@charset "utf-8";

#user_wrap {width:100%;max-width:1200px;margin:0 auto;padding:40px 20px;}
#user_wrap:after {display:block;visibility:hidden;clear:both;content:""}

@media screen and (max-width:980px) {
#user_wrap {padding:20px;}
}


#user_nav {display:block;float:left;position:relative;width:300px;background:#fff;
-webkit-transition: all .6s ease-out;
-moz-transition: all .6s ease-out;
-o-transition: all .6s ease-out;
transition: all .6s ease-out;
}

.profile_head {margin:0 0 40px 0;}
.profile_head .bar_wrap {display:block;position:relative;margin:0 0 20px 0;}
.profile_head .bar_wrap:after {display:block;visibility:hidden;clear:both;content:""}
.profile_head .bar {display:block;position:relative;width:100%;height:5px;margin:0 0 10px 0;background:#eee;border-radius:10px;}
.profile_head .bar .bar_progress {display:block;position:absolute;left:0;top:0;height:5px;background:#111;border-radius:10px;}
.profile_head .bar_wrap label {display:block;float:left;font-size:12px;font-weight:300;}
.profile_head .bar_wrap a {display:block;float:right;font-size:12px;}
.profile_head .bar_wrap a i {color:#ddd;font-size:12px;}
.profile_head .profile_img {position:relative;width:150px;margin:0 auto 20px auto;}
.profile_head .profile_img img {width:100%;height:auto;border-radius:50%;}
.profile_head .profile_img label {display:block;position:absolute;right:0;top:0;padding:0 6px;color:#fff;font-size:12px;line-height:22px;background:#0752ab;border-radius:3px;}
.profile_head .nick {margin:0 0 20px 0;font-size:18px;text-align:center;}
.profile_head a.btn_chg {display:block;width:240px;margin:0 auto;font-size:14px;line-height:40px;text-align:center;border:solid 1px #ddd;border-radius:20px;}
.profile_head a.btn_chg i {font-size:16px;}

#user_nav h3 {display:block;position:relative;margin:0 0 30px 0;padding:0 0 20px 0;font-size:18px;border-bottom:solid 2px #111;}
#user_nav ul {margin:0 0 40px 0;}
#user_nav ul li {display:block;margin:0 0 20px 0;}
#user_nav ul li:last-child {margin:0;}
#user_nav ul li a {padding:0 30px;font-size:14px;}
#user_nav ul li a.active {color:#222;font-weight:500;}
#user_nav ul li .sub {margin:10px 30px 0 30px;padding:10px 0px;background:#f6f6f6;border-radius:5px;display: none;}
#user_nav ul li.active .sub {display: block;}
#user_nav ul li .sub a {display:block;color:#999;font-size:13px;line-height:32px;}
#user_nav ul li .sub a.active {color:#222;font-weight:500;text-decoration:underline;}
#user_nav a.btn_pro {display:block;position:relative;padding:15px 20px;color:#666;font-size:14px;line-height:160%;background:#edf5ff;border:solid 1px #bcd6f4;border-radius:10px;}
#user_nav a.btn_pro strong {display:block;color:#222;font-size:18px;font-weight:500;}
#user_nav a.btn_pro .arrow {display:block;position:absolute;right:30px;top:50%;margin:-10px 0 0 0;color:#222;}
#user_nav a.btn_pro .arrow i {font-size:16px;line-height:20px;}

#user_nav .btn_user_panel_close {display:none;position:absolute;right:20px;top:20px;background:none;border:none;}
#user_nav .btn_user_panel_close i {font-size:20px;}

#user_nav.active {
-webkit-transform:translate(300px,0);
transform:translate(300px,0);
}

.overlay {display:none;position:fixed;left:0;right:0;top:0;width:100%;height:100vh;background:rgba(0,0,0,0.6);z-index:99;}

@media screen and (max-width:1200px) {
#user_nav {width:240px;}
}


@media screen and (max-width:980px) {
#user_nav {float:none;position:fixed;left:-300px;top:0;bottom:0;width:300px;padding:50px 20px 20px 20px;overflow-y:auto;z-index:99;}
#user_nav .btn_user_panel_close {display:block;}
}




#user_cont {display:block;float:right;width:calc(100% - 340px);}
#user_cont h3 {display:block;position:relative;margin:0 0 20px 0;font-size:20px;font-weight:600;}
#user_cont h3 a {display:block;position:absolute;right:0;top:50%;font-size:14px;font-weight:400;line-height:20px;margin:-10px 0 0 0;}
#user_cont h3 a.btn_sellinfo {color:#bbb;}
#user_cont h3 a.btn_sellinfo i {font-size:14px;}
#user_cont h3 .account {display:inline-block;padding:0 6px;color:#666;font-size:12px;line-height:22px;font-weight:300;background:#f6f6f6;border:solid 1px #ddd;border-radius:2px;vertical-align:middle;}
#user_cont h3 a.btn_adver {display:block;position:absolute;right:0;top:9px;padding:0 10px;color:#666;font-size:13px;line-height:24px;border:solid 1px #ddd;border-radius:3px;}
#user_cont h3 a.btn_class {display:block;position:absolute;right:0;top:9px;color:#1398d9;font-size:14px;line-height:24px;font-weight:500;}
#user_cont h3 a.btn_class i {font-size:14px;}

#user_cont h3 a.btn_servide {display:block;position:absolute;right:0;top:0px;padding:0 18px;font-size:14px;font-weight:500;line-height:36px;border:solid 1px #ddd;border-radius:5px;}
#user_cont h3 a.btn_servide i {font-size:18px;}


.stat_sell {margin:0 0 40px 0;padding:30px;background:#f6f6f6;border-radius:10px;overflow: hidden;}
.stat_sell ul {}
.stat_sell ul:after {display:block;visibility:hidden;clear:both;content:""}
.stat_sell ul li {display:block;float:left;position:relative;width:24%;height:120px;margin:0 1.33% 0 0;padding:20px;background:#fff;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,0.05);}
.stat_sell ul li:last-child {margin:0;}
.stat_sell ul li label {display:block;position:absolute;right:20px;top:20px;font-size:14px;line-height:36px;}
.stat_sell ul li strong {display:block;position:absolute;right:20px;bottom:20px;font-size:14px;font-weight:700;text-align:right}
.stat_sell ul li .icon {display:block;position:absolute;left:20px;top:20px;width:36px;height:36px;text-align:center;border-radius:10px;}
.stat_sell ul li .icon i {font-size:20px;line-height:36px;}
.stat_sell ul li:nth-child(1) .icon {color:#116ad4;background:#ebf4ff;}
.stat_sell ul li:nth-child(2) .icon {color:#11ca2d;background:#edfee0;}
.stat_sell ul li:nth-child(3) .icon {color:#ff402b;background:#ffedeb;}
.stat_sell ul li .ea {position:relative;font-size:14px;line-height:20px;}
.stat_sell ul li .ea:after {display:block;visibility:hidden;clear:both;content:""}
.stat_sell ul li .ea strong {right:0;bottom:0;font-size:14px;}

.stat_sell .amount {
	display: block;
    float: left;
    width: calc(100% - 150px);
    position: relative;
    height: 55px;
    padding: 0 10px;
    font-size: 16px;
    line-height: 53px;
    background: #fff;
    border: solid 1px #ddd;
    border-radius: 4px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.stat_sell .btn {
	float: right;
    width: 140px;
    height: 55px;
    line-height: 53px;
	background: #444;
	color:#fff;
}

ul.sch_sellform {margin:0 0 20px 0;}
ul.sch_sellform:after {display:block;visibility:hidden;clear:both;content:""}
ul.sch_sellform li {display:block;float:left;margin:0 10px 0 0;}
ul.sch_sellform li:after {display:block;visibility:hidden;clear:both;content:""}
ul.sch_sellform li:last-child {margin:0;}
ul.sch_sellform li:nth-child(1) {width:calc(17% - 10px);}
ul.sch_sellform li:nth-child(2) {width:calc(35% - 10px);}
ul.sch_sellform li:nth-child(3) {width:calc(17% - 10px);}
ul.sch_sellform li:nth-child(4) {width:calc(25% - 10px);}
ul.sch_sellform li:nth-child(5) {width:6%;}
ul.sch_sellform li .f_input {display:block;width:100%;height:40px;padding:0 10px 0 10px;font-size:14px;font-weight:300;line-height:38px;background:#fff;border:solid 1px #eee;border-radius:10px;}
ul.sch_sellform li .f_input:focus {border:solid 1px #222;}
ul.sch_sellform li .f_input.f_date {background:url(../img/calendar.png) no-repeat right 50%;background-size:30px auto;}
ul.sch_sellform li button.btn {display:block;width:100%;height:40px;color:#fff;font-size:14px;background:#17393c;border:none;border-radius:10px;}

ul.sch_sellform li .date {display:block;float:left;position:relative;width:47%;}
ul.sch_sellform li .gap {display:block;float:left;width:6%;color:#999;line-height:40px;text-align:center;}

.date_layer {display:none;position:absolute;left:50%;top:42px;width:220px;margin:0 0 0 -110px;background:#fff;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,0.1);z-index:3;}
.date_layer .date_nav {display:block;padding:0 10px;line-height:40px;text-align:center;border-bottom:solid 1px #ddd;}
.date_layer .date_nav:after {display:block;visibility:hidden;clear:both;content:""}
.date_layer .date_nav strong {font-size:16px;font-weight:500;}
.date_layer .date_nav a {display:block;}
.date_layer .date_nav a i {font-size:14px;}
.date_layer .date_nav a.btn_prev {float:left;}
.date_layer .date_nav a.btn_next {float:right;}
.date_layer dl {padding:5px 20px;}
.date_layer dl:after {display:block;visibility:hidden;clear:both;content:""}
.date_layer dl dd {display:block;float:left;width:33.33%;}
.date_layer dl dd a {display:block;font-size:14px;text-align:center;line-height:32px;border-radius:5px;}
.date_layer dl dd a.on {color:#222;}
.date_layer dl dd a.off {color:#ddd;}
.date_layer dl dd a.today {color:#fff;background:#17393c}

.date_layer.date_layer2 {width:280px !important;margin:0 0 0 -140px;}
.date_layer dl.date_cal {padding:10px;}
.date_layer dl.date_cal dd {width:14.28%}

.user_head {margin:0 0 20px 0;line-height:32px;}
.user_head:after {display:block;visibility:hidden;clear:both;content:""}
.user_head label {margin:0 15px 0 0;}
.user_head .down {float:right;}
.user_head .down a {display:inline-block;padding:0 10px;font-size:14px;line-height:30px;border:solid 1px #ddd;border-radius:5px;}
.user_head .down a i {font-size:16px;}
.user_head .down button {display:inline-block;padding:0 10px;font-size:14px;line-height:30px;border:solid 1px #ddd;border-radius:5px;}


.user_head2 {line-height:32px;}
.user_head2:after {display:block;visibility:hidden;clear:both;content:""}
.user_head2 label {margin:0 15px 0 0;}
.user_head2 .down {float:right;}
.user_head2 .down a {display:inline-block;padding:0 10px;font-size:14px;line-height:30px;border:solid 1px #ddd;border-radius:5px;}
.user_head2 .down a i {font-size:16px;}
.user_head2 .down button {display:inline-block;padding:0 10px;font-size:14px;line-height:30px;border:solid 1px #ddd;border-radius:5px;}

.user_head2 .down {
    display: flex;
    justify-content: flex-end; /* 우측 정렬 */
    gap: 8px;                  /* 버튼 사이 간격 */
    width: 100%;               /* 부모 너비가 꽉 차 있어야 정렬이 눈에 보입니다 */
}

/* 기존 버튼 스타일 유지 */
.user_head2 .down button {
    display: inline-block;
    padding: 0 10px;
    font-size: 14px;
    line-height: 30px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
}

/* Hover effect for all buttons */
.user_head2 .down button:hover {
    background-color: #f8f8f8;
    border-color: #ccc;
}


.user_head2 .down .btn-review {
    border-color: #ff9500; /* 오렌지색 계열 강조 */
    color: #ff9500;
    font-weight: 600;
    background-color: #fff;
    transition: all 0.2s;
}

.user_head2 .down .btn-review:hover {
    background-color: #ff9500;
    color: #fff;
}

/* Specific Style for Confirm Purchase (Primary Action) */
.user_head2 .down button.btn-confirm.primary {
    background-color: #007bff;
    border-color: #0069d9;
    color: #fff;
    font-weight: 600;
}

.user_head2 .down button.btn-confirm.primary:hover {
    background-color: #0069d9;
}


/* 컨시어지/문의하기 버튼 스타일 */
.user_head2 .down .btn-concierge {
    border-color: #999;
    color: #555;
    background-color: #fff;
}

.user_head2 .down .btn-concierge:hover {
    background-color: #f0f0f0;
    border-color: #666;
    color: #333;
}

/* 아이콘을 추가할 경우를 대비한 스타일 */
.user_head2 .down .btn-concierge i {
    margin-right: 4px;
    font-size: 13px;
}


@media screen and (max-width:1200px) {
#user_cont {width:calc(100% - 260px);}
}


@media screen and (max-width:980px) {
#user_cont {width:100%;}
#user_cont h3 .account {display:block;margin:6px 0 0 0;}

.stat_sell {padding:20px;}
.stat_sell ul li {width:48%;margin:0 4% 20px 0;}
.stat_sell ul li:nth-child(2) {margin:0 0 20px 0;}
.stat_sell ul li:nth-child(3) {margin:0 4% 0 0;}
.stat_sell ul li:nth-child(4) {margin:0 0 0 0;}

ul.sch_sellform li {margin:0;}
ul.sch_sellform li:nth-child(1) {width:calc(40% - 10px);margin:0 10px 10px 0;}
ul.sch_sellform li:nth-child(2) {width:60%;margin:0 0 10px 0;}
ul.sch_sellform li:nth-child(3) {width:calc(40% - 10px);margin:0 10px 0 0;}
ul.sch_sellform li:nth-child(4) {width:calc(50% - 10px);margin:0 10px 0 0;}
ul.sch_sellform li:nth-child(5) {width:10%;}

.user_head label {margin:0 10px 0 0;}
.user_head .down {float:none;}
}



.stat_profit {margin:0 0 20px 0;border:solid 1px #ddd;}
.stat_profit ul {padding:20px;}
.stat_profit ul:after {display:block;visibility:hidden;clear:both;content:""}
.stat_profit ul li {display:block;float:left;width:25%;height:60px;padding:0 0 0 40px;border-right:solid 1px #ddd;}
.stat_profit ul li:first-child {width:50%;}
.stat_profit ul li:last-child {border-right:none;}
.stat_profit ul li label {display:block;margin:0 0 6px 0;color:#666;font-size:14px;font-weight:300;}
.stat_profit ul li strong {font-size:16px;font-weight:300;}
.stat_profit ul li:first-child strong {font-size:20px;}

ul.tab {margin:0 0 10px 0;text-align:right;}
ul.tab li {display:inline-block;}
ul.tab li a {display:block;color:#666;font-size:14px;}
ul.tab li a.selected {color:#111;}

ul.panel {margin:0 0 40px 0;}

ul.tab2 {margin:0 0 20px 0;text-align:right;border-bottom:solid 1px #ddd;}
ul.tab2:after {display:block;visibility:hidden;clear:both;content:""}
ul.tab2 li {display:block;float:left;margin:0 40px 0 0;}
ul.tab2 li:last-child {margin:0;}
ul.tab2 li a {display:block;position:relative;color:#666;font-size:16px;line-height:50px;}
ul.tab2 li a.selected {color:#111;}
ul.tab2 li a.selected:after {content:'';display:block;position:absolute;left:50%;bottom:-1px;width:19px;height:12px;background:url(../img/arrow_selec.gif) no-repeat 50% 50%;}
ul.tab2 li:last-child {float:right;}
ul.tab2 li:last-child a {color:#116ad4;font-size:12px;text-decoration:underline;}

ul.panel2 {margin:0 0 40px 0;}

.tab_head {margin:0 0 20px 0;line-height:32px;}
.tab_head:after {display:block;visibility:hidden;clear:both;content:""}
.tab_head select {display:block;float:left;width:120px;height:32px;padding:0 15px;font-size:12px;border:solid 1px #ddd;}
.tab_head a {display:block;float:right;color:#116ad4;font-size:12px;text-decoration:underline;}
.tab_head a img {width:11px;height:auto;}
.tab_head a i {font-size:12px;}

.refer {padding:30px;background:#f6f6f6;border:solid 1px #ddd;}
.refer h4 {display:block;margin:0 0 10px 0;font-size:14px;font-weight:500;}
.refer h4 i {font-size:14px;}
.refer h4 i.xi-info {font-size:18px;}
.refer p {color:#444;font-size:14px;line-height:160%;}
.refer ul {}
.refer ul li {display:block;position:relative;margin:0 0 15px 0;padding:0 0 0 12px;color:#666;font-size:14px;line-height:160%;}
.refer ul li:after {content:'';display:block;position:absolute;left:0;top:8px;width:3px;height:3px;background:#222;border-radius:50%;}
.refer ul li:last-child {margin:0;}
.refer ul li strong {color:#222;font-weight:500;}
.refer ul li a {color:#116ad4;text-decoration:underline;}

.refer.refer2 {margin:40px 0 40px 0;border:none;border-radius: 10px;}
.refer.refer2 h4 {font-size:16px;}


@media screen and (max-width:980px) {
.stat_profit ul li {width:50%;padding:0 0 0 20px;}
.stat_profit ul li:first-child {width:100%;border-right:none;}
.stat_profit ul li:last-child {border-right:none;}

ul.tab2 li {margin:0 20px 0 0;}
ul.tab2 li a {font-size:14px;}
ul.tab2 li:last-child {display:none;}
}


.cal_layer {display:none;position:fixed;left:50%;top:50%;width:90%;max-width:480px;padding:40px;background:#fff;border-radius:15px;z-index:100;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
.cal_layer .btn_cal_profit_close {display:block;position:absolute;right:40px;top:40px;background:none;border:none;}
.cal_layer .btn_cal_profit_close i {font-size:20px;}
.cal_layer h3 {display:block;margin:0 0 40px 0;font-size:20px;font-weight:600;text-align:left;}
.cal_layer p {font-size:14px;}
.cal_layer ul {margin:0 0 40px 0;}
.cal_layer ul li {display:block;position:relative;margin:0 0 40px 0;}
.cal_layer ul li:last-child {margin:0;}
.cal_layer ul li:last-child:after {display:block;position:absolute;right:15px;bottom:0;font-size:14px;line-height:50px;}
.cal_layer ul li label {display:block;margin:0 0 8px 0;color:#666;font-size:12px;font-weight:300;}
.cal_layer ul li .f_input {display:block;width:100%;height:50px;padding:0 10px 0 10px;font-size:15px;font-weight:300;line-height:48px;background:#fff;border:solid 1px #eee;border-radius:5px;}
.cal_layer ul li p {font-size:14px;}
.cal_layer .btn_confirm{text-align:center;}
.cal_layer .btn_submit {
	display: block;
	margin:0px auto;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
    border: solid 1px #ddd;
    border-radius: 5px;
}

.cal_layer .row {display:table-row; font-size:12px;}
.cal_layer .row .cell {display:table-cell;width:25%;padding:5px 10px;font-size:12px;}
.cal_layer .row .cell span {display: block;
    padding: 5px 8px;
	text-align:center;
    background: #eee;
    border-radius: 3px;
}
.cal_layer .row .cell2 {display:table-cell;width:75%;padding:5px 10px;font-size:12px;line-height:150%;font-weight:normal !important;vertical-align:middle;}

/* 공통 뱃지 스타일 */
.cal_layer .row .status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

/* 입금대기 */
.cal_layer .row .status-badge.waiting { 
  background-color: #fff9db; color: var(--status-waiting); border: 1px solid #ffe066; 
}

/* 결제완료 */
.cal_layer .row .status-badge.complete { 
  background-color: #ebfbee; color: var(--status-complete); border: 1px solid #b2f2bb; 
}

/* 구매확정 */
.cal_layer .row .status-badge.confirmed { 
  background-color: #e7f5ff; color: var(--status-confirmed); border: 1px solid #a5d8ff; 
}

/* 기간만료 */
.cal_layer .row .status-badge.expired { 
  background-color: #f1f3f5; color: var(--status-expired); border: 1px solid #dee2e6; 
}

/* 주문취소 */
.cal_layer .row .status-badge.cancel { 
  background-color: #fff5f5; color: var(--status-cancel); border: 1px solid #ffc9c9; 
}

/* 취소.문제해결 */
.cal_layer .row .status-badge.issue { 
  background-color: #f8f0fc; color: var(--status-issue); border: 1px solid #eebefa; 
}

/* 분쟁조정중 */
.cal_layer .row .status-badge.dispute { 
  background-color: #fff4e6; color: var(--status-dispute); border: 1px solid #ffd8a8; 
}

/* 거래취소요청 뱃지 스타일 */
.cal_layer .row .status-badge.request { 
  background-color: #fff4e6; color: var(--status-request); border: 1px solid #f1c40f; 
}



@media screen and (max-width:980px) {
.career_layer {height:90vh;padding:20px;overflow-y:auto;}
.career_layer .btn_close {right:20px;top:20px;}
}


.data_wrap {position:relative;width:100%;height:600px;padding:20px;overflow-y:scroll;border:solid 1px #ddd;border-radius:10px;}
.data_wrap .empty {display:block;position:absolute;left:0;right:0;top:50%;color:#bbb;font-size:14px;text-align:center;line-height:160%;
-webkit-transform:translate(0,-50%);
-moz-transform:translate(0,-50%);
-ms-transform:translate(0,-50%);
-o-transform:translate(0,-50%);
transform:translate(0,-50%);
}
.data_wrap .empty i {margin:0 0 12px 0;color:#444;font-size:36px;}
.data_wrap .empty img {width:50px;margin:0 0 6px 0;}
.data_wrap .empty strong {color:#222;font-weight:500;}

.box_order {display:block;position:relative;margin:0 0 20px 0;}
.box_order:after {display:block;visibility:hidden;clear:both;content:""}
.box_order:last-child {margin:0;}
.box_order header {display:block;position:relative;margin:0 0 20px 0;color:#999;font-size:14px;font-weight:700;height: 30px;}
.box_order header .date {display:block;position:absolute;right:0;top:0;font-weight:400;}
.box_order header .date strong {color:#444;font-weight:400;}
.box_order .img {float:left;width:120px;}
.box_order .img img {width:100%;height:auto;border-radius:4px;}
.box_order .cont {float:right;width:calc(100% - 130px);}
.box_order .title {display:block;margin:0 0 6px 0;color:#999;font-size:15px;font-weight:400;}
.box_order .title strong {color:#444;font-weight:400;}
.box_order .price {margin:0 0 6px 0;font-size:15px;font-weight:600;}
.box_order .userinfo {color:#999;font-size:14px;}
.box_order .userinfo strong {display:inline-block;position:relative;margin:0 8px 0 0;padding:0 8px 0 0;color:#444;font-weight:400;}
.box_order .userinfo strong:after {content:'';display:block;position:absolute;right:0;top:50%;width:1px;height:14px;margin:-7px 0 0 0;background:#ddd;}
.box_order .userinfo a {display:inline-block;padding:0 8px;color:#444;font-size:14px;line-height:22px;border:solid 1px #ddd;border-radius:4px;}
.box_order .button {margin-top:20px;}
.box_order .button a {display:inline-block;padding:0 8px;color:#444;font-size:14px;line-height:22px;border:solid 1px #ddd;border-radius:4px;}
.box_order .txt {margin:20px 0 0 0;padding:20px;color:#666;font-size:14px;line-height:140%;background:#f6f6f6;border-radius:5px;}
.box_order .no_image {
	width: 100%;
	height: 90px;
	background: #f3f4f6;
	color: #9ca3af;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	border-radius:4px;
}

ul.bmstat {margin:0 0 30px 0;}
ul.bmstat:after {display:block;visibility:hidden;clear:both;content:""}
ul.bmstat li {display:block;float:left;width:32%;margin:0 2% 0 0;}
ul.bmstat li:last-child {margin:0;}
ul.bmstat li .box {display:block;padding:40px 20px;background:#f2f3f7;border-radius:10px;}
ul.bmstat li .box:after {display:block;visibility:hidden;clear:both;content:""}
ul.bmstat li h4 {display:block;margin:0 0 12px 0;font-size:14px;font-weight:600;text-align:center;}
ul.bmstat li .amount {display:block;padding:0 20px;font-size:16px;text-align:right;line-height:46px;background:#fff;border-radius:10px;}
ul.bmstat li .amount strong {font-weight:600;}
ul.bmstat li:first-child .box {background:#daeef3}
ul.bmstat li:last-child .amount {float:left;width:calc(100% - 80px);}
ul.bmstat li:last-child button.btn {display:block;float:right;width:70px;height:46px;color:#fff;font-size:14px;background:#15aacf;border:none;border-radius:10px;}


@media screen and (max-width:980px) {
ul.bmstat li {width:49%;margin:0 2% 0 0;}
ul.bmstat li:last-child {margin:0;}
ul.bmstat li:first-child {width:100%;margin:0 0 20px 0;}
}



ul.sch_bmform {margin:0 0 30px 0;}
ul.sch_bmform:after {display:block;visibility:hidden;clear:both;content:""}
ul.sch_bmform li {display:block;float:left;margin:0 10px 0 0;}
ul.sch_bmform li:after {display:block;visibility:hidden;clear:both;content:""}
ul.sch_bmform li:last-child {margin:0;}
ul.sch_bmform li .selec {width:120px;}
ul.sch_bmform li .selec a.btn {color:#222 !important;}
ul.sch_bmform li .f_input {display:block;float:left;width:200px;height:40px;padding:0 10px 0 10px;font-size:14px;font-weight:300;line-height:38px;background:#fff;border:solid 1px #eee;border-radius:10px;}
ul.sch_bmform li .f_input:focus {border:solid 1px #222;}
ul.sch_bmform li .f_input.f_date {background:url(../img/calendar.png) no-repeat right 50%;background-size:30px auto;}

ul.sch_bmform li input[type="date"] {
    width: 120px;   
}

ul.sch_bmform li button.btn {display:block;width:60px;height:40px;font-size:14px;background:#fff;border:solid 1px #ddd;border-radius:10px;}
ul.sch_bmform li a.link {
	display: flex;            /* 플렉스박스 적용 */
    justify-content: center;  /* 가로 중앙 정렬 */
    align-items: center;      /* 세로 중앙 정렬 */

    width: 60px;
    height: 40px;
    font-size: 14px;
    background: #fff;
    border: solid 1px #ddd;
    border-radius: 10px;
    text-decoration: none;
    color: #333;
}
ul.sch_bmform li .date {display:block;float:left;position:relative;}
ul.sch_bmform li .gap {display:block;float:left;width:30px;line-height:40px;text-align:center;}


@media screen and (max-width:980px) {
ul.sch_bmform li:nth-child(1) {width:100%;margin:0 0 10px 0;}
ul.sch_bmform li:nth-child(2) {width:100%;margin:0 0 10px 0;}
ul.sch_bmform li:nth-child(3) {width:60px;}
ul.sch_bmform li .selec {width:100%;}
ul.sch_bmform li .f_input {width:100%;}
ul.sch_bmform li .date {width:48%;}
ul.sch_bmform li input[type="date"] {
    width: 100% !important;   
}
ul.sch_bmform li .gap {width:4%;}
}


.exp_money {margin:0 0 12px 0;font-size:14px;}

.bm_list {}
.bm_list ul {margin:0 0 30px 0;}
.bm_list ul li {display:block;margin:0 0 20px 0;}
.bm_list ul li:last-child {margin:0;}

.bm_list .card {display:table;table-layout:fixed;width:100%;border:solid 1px #ddd;border-radius:10px;}
.bm_list .card .cell {display:table-cell;padding:16px 30px;vertical-align:middle;}
.bm_list .card .use {font-size:16px;text-align:center;}
.bm_list .card .use strong {color:#15aacf;font-weight:400;}
.bm_list .card .use img {border-radius:50%;max-width:80px;}
.bm_list .card .date {margin:0 0 12px 0;color:#999;font-size:12px;}
.bm_list .card .title {margin:0 0 12px 0;font-size:16px;}

.bm_list .card .userinfo {color:#999;font-size:14px;}
.bm_list .card .userinfo strong {display:inline-block;position:relative;margin:0 8px 0 0;padding:0 8px 0 0;color:#444;font-weight:400;}
.bm_list .card .userinfo strong:after {content:'';display:block;position:absolute;right:0;top:50%;width:1px;height:14px;margin:-7px 0 0 0;background:#ddd;}
.bm_list .card .userinfo a {display:inline-block;padding:0 8px;color:#444;font-size:14px;line-height:22px;border:solid 1px #ddd;border-radius:4px;}



.bm_list .card p {color:#666;font-size:12px;}
.bm_list .card .amount {font-size:16px;font-weight:600;text-align:right;}
.bm_list .card .amount strong {color:#15aacf;font-weight:600;}
.bm_list .card .amount.point_use {color:#ff0000;}


.bm_list .card .cell:nth-child(1) {width:16%;padding:10px;border-right:dashed 4px #ddd}
.bm_list .card .cell:nth-child(2) {width:54%;}
.bm_list .card .cell:nth-child(3) {width:30%;}



.bm_list .qaceter {display:table;table-layout:fixed;width:100%;border:solid 1px #ddd;border-radius:10px;}
.bm_list .qaceter .cell {display:table-cell;padding:16px 30px;vertical-align:middle;}
.bm_list .qaceter .use {font-size:16px;text-align:center;}
.bm_list .qaceter .use strong {color:#15aacf;font-weight:400;}
.bm_list .qaceter .use img {border-radius:50%;max-width:80px;}
.bm_list .qaceter .date {margin:0 0 12px 0;color:#999;font-size:12px;}
.bm_list .qaceter .title {margin:0 0 12px 0;font-size:16px;}

.bm_list .qaceter .userinfo {color:#999;font-size:14px;}
.bm_list .qaceter .userinfo strong {display:inline-block;position:relative;margin:0 8px 0 0;padding:0 8px 0 0;color:#444;font-weight:400;}
.bm_list .qaceter .userinfo strong:after {content:'';display:block;position:absolute;right:0;top:50%;width:1px;height:14px;margin:-7px 0 0 0;background:#ddd;}
.bm_list .qaceter .userinfo a {display:inline-block;padding:0 8px;color:#444;font-size:14px;line-height:22px;border:solid 1px #ddd;border-radius:4px;}



.bm_list .qaceter p {color:#666;font-size:12px;}
.bm_list .qaceter .amount {font-size:16px;font-weight:600;text-align:right;}
.bm_list .qaceter .amount strong {color:#15aacf;font-weight:600;}
.bm_list .qaceter .amount.point_use {color:#ff0000;}


.bm_list .qaceter .cell:nth-child(1) {width:80%;}
.bm_list .qaceter .cell:nth-child(2) {width:18%;}





@media screen and (max-width:980px) {
.bm_list .card .cell {padding:16px 20px;}
}


@media screen and (max-width:480px) {
.bm_list .card .cell {padding:16px 10px;}
.bm_list .card .use {font-size:14px;}
.bm_list .card .title {font-size:14px;}
.bm_list .card .amount {font-size:14px;}

.bm_list .card .cell:nth-child(1) {display:none;}
.bm_list .card .cell:nth-child(2) {width:70%;}
.bm_list .card .cell:nth-child(3) {width:30%;}
}

.empty2 {display:block;padding:80px 0;font-size:16px;text-align:center;line-height:160%;font-weight:600;}
.empty2 i {margin:0 0 12px 0;color:#444;font-size:36px;}


.myclass {margin:0 0 40px 0;font-size:24px;}
.myclass strong {font-weight:700;}

@media screen and (max-width:980px) {
.myclass {font-size:18px;}
}

@media screen and (max-width:480px) {
.myclass {font-size:16px;}
}

.myclass_stat_title {position:relative;margin:0 0 18px 0;font-size:16px;font-weight:700;}
.myclass_stat_title .sub {color:#999;font-size:14px;font-weight:400;}
.myclass_stat_title a.btn_info {display:block;position:absolute;right:0;top:0;color:#999;font-size:14px;line-height:20px;font-weight:500;}
.myclass_stat_title a.btn_info i {font-size:14px;}

ul.myclass_info {margin:0 0 40px 0;}
ul.myclass_info li {display:block;position:relative;margin:0 0 4px 0;padding:0 0 0 10px;color:#999;font-size:14px;font-weight:400;line-height:140%;}
ul.myclass_info li:last-child {margin:0;}
ul.myclass_info li:after {content:'';display:block;position:absolute;left:0;top:6px;width:2px;height:2px;background:#999;border-radius:50%;}

ul.myclass_info2 {margin:0 0 40px 0;}
ul.myclass_info2 li {display:block;position:relative;margin:0 0 2px 0;padding:0 0 0 10px;font-size:12px;font-weight:400;line-height:140%;}
ul.myclass_info2 li:last-child {margin:0;}
ul.myclass_info2 li:after {content:'※';display:block;position:absolute;left:0;top:0px;}

.myclass_table {width:100%;margin:0 0 12px 0;overflow-x:auto;overflow-y:hidden;}
.myclass_table table {width:100%;min-width:640px;border-collapse:collapse;border-spacing:0 5px;background:#fff;}
.myclass_table table th {padding:30px 10px;font-size:14px;font-weight:300;line-height:140%;text-align:center;background:#f2f3f7;border:solid 1px #ddd;}
.myclass_table table td {padding:30px 10px;font-size:14px;font-weight:300;line-height:140%;text-align:center;border:solid 1px #ddd;}
.myclass_table table th strong {font-weight:700;}
.myclass_table table td.sub {font-size:12px;}


.faq {}
.faq ul {border-top:solid 1px #eee;}
.faq ul li {display:block;position:relative;font-size:14px;font-weight:700;line-height:140%;border-bottom:solid 1px #eee;cursor:pointer;}
.faq ul li .que {display:block;padding:16px 0;}
.faq ul li .q {display:inline-block;width:60px;text-align:center;}
.faq ul li .ctg {display:inline-block;width:140px;}
.faq ul li .arrow {display:block;position:absolute;right:30px;top:16px;}
.faq ul li .arrow i {font-size:18px;}
.faq ul li ul {display:none;background:#f2f3f7;}
.faq ul li ul li {padding:20px 30px 20px 200px;font-weight:300;line-height:160%;border-bottom:none;}
.faq ul li ul li:first-child {border-top:solid 1px #222;}

.faq ul li.active .arrow {transform-origin:50% 50%;transform:rotate(180deg);}

@media screen and (max-width:980px) {
.faq ul li .que {display:block;padding:16px 40px 16px 0;}
.faq ul li .title {display:block;padding:0 0 0 40px;}
.faq ul li .q {width:40px;}
.faq ul li .ctg {width:calc(100% - 40px);}
.faq ul li .arrow {right:10px;}
.faq ul li ul li {padding:20px 20px 20px 40px;}
}


.myclass_stat {margin:0 0 30px 0;}
.myclass_stat ul {display:block;position:relative;}
.myclass_stat ul:after {display:block;visibility:hidden;clear:both;content:""}
.myclass_stat ul li {display:block;width:calc(35% - 10px);margin:0 0 10px 0;}
.myclass_stat ul li:nth-child(2) {margin:0;}
.myclass_stat ul li:nth-child(3) {display:block;position:absolute;right:0;top:0;width:65%;height:100%;}
.myclass_stat .box {display:block;padding:30px;font-size:16px;font-weight:500;line-height:20px;border:solid 1px #ddd;}
.myclass_stat .box strong {display:block;margin:14px 0 0 0;font-size:20px;font-weight:600;}
.myclass_stat .bar_li {margin:0 0 20px 0;}
.myclass_stat .bar_li:last-child {margin:0;}
.myclass_stat .bar_li:after {display:block;visibility:hidden;clear:both;content:""}
.myclass_stat .bar_li label {display:block;float:left;width:80px;color:#444;font-size:14px;}
.myclass_stat .bar_li .amount {display:block;float:right;width:80px;color:#444;font-size:14px;text-align:right;}
.myclass_stat .bar_li .bar {display:block;float:left;position:relative;width:calc(100% - 200px);height:5px;margin:7px 20px 0 20px;background:#eee;border-radius:10px;}
.myclass_stat .bar_li .bar .bar_in {display:block;position:absolute;left:0;top:0;height:100%;background:#15aacf;border-radius:10px;}

@media screen and (max-width:980px) {
.myclass_stat ul li {float:left;width:calc(50% - 5px);margin:0 10px 10px 0;}
.myclass_stat ul li:nth-child(2) {margin:0 0 10px 0;}
.myclass_stat ul li:nth-child(3) {position:relative;left:0;width:100%;height:auto;}
.myclass_stat .box {padding:20px;font-size:14px;}
.myclass_stat .box strong {font-size:18px;}
.myclass_stat .bar_li .bar {width:calc(100% - 150px);margin:7px 10px 0 10px;}
.myclass_stat .bar_li .amount {width:50px}
}


#chg_wrap {width:100%;max-width:880px;margin:0 auto;padding:60px 20px;}
#chg_cont {width:100%;max-width:600px;margin:0 auto;}
#chg_cont h4 {display:block;margin:0 0 12px 0;font-size:16px;font-weight:600;}

.chg_header {margin:0 0 60px 0;text-align:center;}
.chg_header img {width:130px;height:auto;margin:0 0 30px 0;}
.chg_header h3 {display:block;margin:0 0 8px 0;font-size:36px;font-weight:700;}
.chg_header p {margin:0 0 20px 0;font-size:16px;line-height:160%;}
.chg_header .remain {display:inline-block;padding:0 12px;color:#999;font-size:14px;line-height:38px;border:solid 1px #ddd;border-radius:20px;}
.chg_header .remain strong {color:#444;font-weight:600;}

.chg_amount {position:relative;margin:0 0 50px 0;}
.chg_amount:after {display:block;visibility:hidden;clear:both;content:""}
.chg_amount .amount {display:block;position:absolute;left:0;top:0;width:calc(50% - 10px);height:100%;padding:20px;border:solid 1px #ddd;border-radius:10px;}
.chg_amount .amount p {margin:0 0 12px 0;font-size:14px;}
.chg_amount .amount .inp_box {display:block;position:relative;padding:10px;font-size:16px;line-height:30px;border:solid 1px #ddd;border-radius:10px;}
.chg_amount .amount .inp_box:after {display:block;visibility:hidden;clear:both;content:""}
.chg_amount .amount .inp_box .f_input {display:block;float:left;width:calc(100% - 40px);height:30px;margin:0 5px 0 0;font-size:16px;text-align:right;background:none;border:none;}
.chg_amount ul {display:block;float:right;width:50%;}
.chg_amount ul:after {display:block;visibility:hidden;clear:both;content:""}
.chg_amount ul li {display:block;float:left;width:calc(50% - 5px);margin:0 10px 10px 0;}
.chg_amount ul li:nth-child(3) {margin:0 10px 0 0;}
.chg_amount ul li:nth-child(2n) {margin:0;}
.chg_amount ul li a {display:block;font-size:16px;font-weight:400;text-align:center;line-height:55px;border:solid 1px #222;border-radius:10px;}

@media screen and (max-width:980px) {
.chg_amount .amount {position:relative;width:100%;margin:0 0 10px 0;}
.chg_amount ul {float:none;width:100%;}
}

.chg_way {margin:0 0 40px 0;padding:10px 20px;line-height:40px;border:solid 1px #ddd;border-radius:10px;}
.chg_way .chk_box {display:inline-block;margin:0 30px 0 0;}
.chg_way .chk_box:last-child {margin:0;}
.btn_charge {display:block;margin:0 0 30px 0;color:#fff;font-size:16px;line-height:50px;text-align:center;background:#15aacf;border-radius:10px;}
.btn_later {display:inline-block;margin:0 0 40px 0;color:#666;font-size:14px;text-decoration:underline;}

#chg_cont .myclass_table {margin:0 auto 80px auto;}
#chg_cont .myclass_table table {min-width:auto;}
#chg_cont .myclass_table th,
#chg_cont .myclass_table td {padding:12px 10px;}

#chg_wrap .refer {border:none;border-radius:10px;}
#chg_wrap .refer h4 {font-size:16px;font-weight:600;}
#chg_wrap .refer ul li {margin:0 0 2px 0;}


#inv_wrap {width:100%;max-width:1400px;margin:0 auto;padding:120px;color:#fff;background:#17393c;}
#inv_wrap h3,
#inv_wrap h4 {color:#fff;}
#inv_wrap img {width:100%;height:auto;}
#inv_wrap .cont {float:left;width:50%;margin:0 0 80px 0;}
#inv_wrap .cont img {max-width:480px;}
#inv_wrap .img {float:right;width:50%;max-width:540px;margin:0 0 80px 0;}
#inv_wrap .way {padding:80px;background:#4f6365;border-radius:15px;}

#inv_wrap h3 {display:block;margin:0 0 40px 0;font-size:100px;}
#inv_wrap p {display:block;margin:0 0 40px 0;font-size:36px;line-height:140%;}
#inv_wrap a {display:block;margin:0 0 60px 0;width:450px;color:#17393c;font-size:24px;font-weight:600;text-align:center;line-height:85px;background:#fff;border-radius:10px;}

#inv_wrap h4 {display:block;margin:0 0 12px 0;font-size:24px;font-weight:600;}
#inv_wrap ul li {margin:0 0 8px 30px;font-size:24px;line-height:140%;list-style:decimal;}
#inv_wrap ul li:last-child {margin:0 0 0 30px;}

@media screen and (max-width:1280px) {
#inv_wrap h3 {font-size:72px;}
#inv_wrap p {font-size:30px;}
#inv_wrap a {width:380px;font-size:20px;line-height:72px;}
}

@media screen and (max-width:980px) {
#inv_wrap {padding:60px 40px;}
#inv_wrap .cont {float:none;width:100%;max-width:480px;margin:0 auto 80px auto;}
#inv_wrap .img {float:none;width:100%;margin:0 auto 80px auto;}
#inv_wrap .way {padding:40px;}

#inv_wrap h3 {font-size:60px;}
#inv_wrap p {font-size:24px;}
#inv_wrap a {width:320px;font-size:18px;line-height:60px;}

#inv_wrap h4 {font-size:20px;}
#inv_wrap ul li {font-size:20px;}
}

@media screen and (max-width:480px) {
#inv_wrap {padding:40px 20px;}
#inv_wrap .way {padding:20px;}

#inv_wrap h3 {font-size:48px;}
#inv_wrap p {font-size:18px;}
#inv_wrap a {width:240px;font-size:16px;line-height:50px;}

#inv_wrap h4 {font-size:16px;}
#inv_wrap ul li {font-size:16px;}
}

.coupon-container {
    width: 100%;
    max-width: 540px; /* 모바일 적정 사이즈 */
    margin: 0 auto;
    position: relative;
}

.coupon-container p {margin:0 !important;}

.coupon-bg {
    position: relative;
    width: 100%;
    aspect-ratio: 512 / 858; /* 이미지 원본 비율 */
    background: url('../img/addfr_img.png') no-repeat center center;
    background-size: contain;
}

/* 텍스트가 들어가는 투명한 '틀' - 흰색 박스 크기와 일치시킴 */
.text-box {
    position: absolute;
    left: 15%;  /* 양옆 여백 */
    right: 15%;
    height: 18%; /* 흰색 박스의 높이 비율 */
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */
}

/* 각 박스의 위치 (이미지상의 흰색 칸 위치) */
.upper {
    top: 14.5%; /* 상단 흰색 칸의 시작 지점 */
}

.lower {
    top: 51.5%; /* 하단 흰색 칸의 시작 지점 */
}

.inner-content {
    text-align: center;
}

.coupon-container .label {
    font-size: 12px !important;
    font-weight: 600;
    color: #555;
    letter-spacing: 5px;
    /* 간격 조정의 핵심: 하단 마진 제거 및 음수 값 살짝 부여 */
    margin: 0 0 2px 0; 
    padding: 0;
}

.coupon-container .amount {
    font-size: 45px !important;
    font-weight: 800;
    color: #1b3d3e;
    /* 간격 조정의 핵심: 줄 높이를 1로 고정하여 여백 제거 */
    line-height: 1; 
    margin: 0;
    padding: 0;
}

/* 화면이 아주 작아질 때만 폰트 축소 */
@media (max-width: 480px) {
   .coupon-container .amount { font-size: 28px !important; }
   .coupon-container .label { font-size: 10px !important; }
}


.ms_header {margin:0 0 20px 0;padding:0 0 10px 0;color:#888;font-size:12px;line-height:30px;border-bottom:solid 1px #ddd;}
.ms_header:after {display:block;visibility:hidden;clear:both;content:""}
.ms_header a {color:#666;}
.ms_header a i {font-size:14px;}
.ms_header ul {float:right;}
.ms_header ul:after {display:block;visibility:hidden;clear:both;content:""}
.ms_header ul li {display:block;float:left;margin:0 14px 0 0;}
.ms_header ul li:last-child {margin:0;}
.ms_header ul li a.btn_ad {display:block;padding:0 12px;color:#fff;line-height:30px;background:#444;border-radius:10px;}

ul.ms_list {}
ul.ms_list li {display:block;position:relative;margin:0 0 20px 0;border:solid 1px #ddd;}
ul.ms_list li:after {display:block;visibility:hidden;clear:both;content:""}
ul.ms_list li .img {float:left;position:relative;width:200px;}
ul.ms_list li .img img {width:100%;height:auto;border-radius: 10px;}
ul.ms_list li .img label {display:block;position:absolute;left:10px;top:10px;padding:0 8px;font-size:11px;line-height:18px;background:#eee;border-radius:3px;z-index:1;}
ul.ms_list li .cont {float:right;width:calc(100% - 200px);padding:15px 15px 15px 15px;}
ul.ms_list li .cont a.btn_edit {display:block;position:absolute;right:75px;top:15px;padding:0 16px;font-size:14px;font-weight:500;line-height:30px;text-align:center;border:solid 1px #ddd;border-radius:5px;}
ul.ms_list li .cont a.btn_del {display:block;position:absolute;right:15px;top:15px;padding:0 16px;font-size:14px;font-weight:500;line-height:30px;text-align:center;border:solid 1px #ddd;border-radius:5px;}
ul.ms_list li .cont button.btn_jump {display:block;position:absolute;right:15px;top:15px;padding:0 16px;font-size:14px;font-weight:500;line-height:30px;text-align:center;border:solid 1px #ddd;border-radius:5px;}
ul.ms_list li .cont .ctg {margin:0 0 6px 0;color:#999;font-size:12px;}
ul.ms_list li .cont .title {margin:0 0 20px 0;font-size:14px;}
ul.ms_list li .cont .won {margin:0 0 10px 0;padding:0 0 10px 0;font-size:20px;font-weight:700;border-bottom:solid 1px #ddd;}
ul.ms_list li .cont .edit label {display:block;margin:0 0 4px 0;color:#999;font-size:12px;}
ul.ms_list li .cont .edit p {color:#666;font-size:14px;}

.status1 {background:#7ed321 !important;color:#fff;}
.status2 {background:#0072ff !important;color:#fff;}
.status3 {background:#d0011b !important;color:#fff;}

@media screen and (max-width:980px) {
ul.ms_list li .img {width:140px;}
ul.ms_list li .cont {width:calc(100% - 140px);}
ul.ms_list li .cont a.btn_edit {right:auto;left:10px;top:120px;width:120px;}
ul.ms_list li .cont a.btn_del {right:auto;left:10px;top:150px;width:120px;}
}

@media screen and (max-width:480px) {
ul.ms_list li .img {width:120px;}
ul.ms_list li .cont {width:calc(100% - 120px);}
ul.ms_list li .cont a.btn_edit {right:auto;left:10px;top:100px;width:100px;}
ul.ms_list li .cont a.btn_del {right:auto;left:10px;top:135px;width:100px;}

.FSC-PC {
	height:117px !important;
}

.FSC-PC .icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 4px 10px !important;
  position: absolute !important;
  top: 72px !important;
  right: 10px !important;
  background-color: #193a3d !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.FSC-PC .div-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 4px 10px !important;
  position: absolute !important;
  top: 29px !important;
  right: 10px !important;
  background-color: #193a3d !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.FSC-PC .text-wrapper {
  position: relative !important;
  width: fit-content !important;
  margin-top: -1.00px !important;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700 !important;
  color: #ffffff !important;
  font-size: 9px !important;
  letter-spacing: 0.08px !important;
  line-height: 9px !important;
  white-space: nowrap !important;
}

.FSC-PC .vector {
  position: absolute;
  top: calc(50.00% - 13px);
  left: 314px;
  width: 1px;
  height: 27px;
  object-fit: cover;
}

.FSC-PC .view {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  position: absolute !important;
  top: 91px !important;
  left: 125px !important;
}

.FSC-PC .div {
  position: relative !important;
  width: fit-content !important;
  margin-top: -1.00px !important;
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 500 !important;
  color: var(--crewtor-main-color) !important;
  font-size: 9px !important;
  letter-spacing: 0.08px!important;
  line-height: 9px !important;
  white-space: nowrap !important;
}

.FSC-PC .view {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  position: absolute !important;
  top: 91px !important;
  left: 125px !important;
}

.FSC-PC .view-2 {
  display: flex !important;
  flex-direction: column !important;
  width: 135px !important;
  align-items: flex-start !important;
  gap: 3px !important;
  position: absolute !important;
  top: 18px !important;
  left: 125px !important;
}

.FSC-PC .text-wrapper-2 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: var(--crewtor-main-color);
  font-size: 18px !important;
  letter-spacing: 0.08px;
  line-height: 18px;
}

.FSC-PC .text-wrapper-3 {
  position: relative;
  align-self: stretch;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700 !important;
  color: var(--crewtor-main-color);
  font-size: 36px !important;
  letter-spacing: 0.08px !important;
  line-height: 36px !important;
  letter-spacing: 0.08px !important;
}

.FSC-PC .image-profile {
	position: absolute;
    top: calc(50.00% - 52px) !important;
    left: 7px !important;
    width: 102px !important;
    height: 104px !important;
}

}











/* select */
.select {display:block;position:relative;width:100%;}
.select select {display:block;width:100%;height:50px;color:#999;font-size:15px;line-height:48px;text-indent:10px;background:#fff;border:solid 1px #eee;border-radius:5px;
-o-appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance:none;
}
.select select option {display:block;padding:10px;border:solid 1px #111;}
.select:after {content:"\e941";display:block;position:absolute;right:0px;top:0px;width:40px;height:50px;font-family:"xeicon";font-size:12px;text-align:center;line-height:50px;background:none;z-index:1;cursor:pointer;
-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;
}
.select.selected:after {color:#ff7700;
-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg);
}


/* checkbox, radio*/
.selec_chk {position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;opacity:0;outline:0;z-index:-1;}

.chk_box {position:relative;}
.chk_box input[type="checkbox"] + label {display:inline-block;position:relative;padding-left:30px;font-size:14px;line-height:24px;font-weight:normal;vertical-align:baseline;cursor:pointer;}
.chk_box input[type="checkbox"] + label span {display:block;position:absolute;left:0;top:0px;width:20px;height:20px;background:#ccc;border:none;border-radius:3px;}
.chk_box input[type="checkbox"] + label:hover span {}
.chk_box input[type="checkbox"] + label span:after {content:"\e928";display:block;position:absolute;left:0px;top:0px;width:20px;height:20px;font-family:"xeicon";color:#fff;font-size:14px;text-align:center;line-height:20px;background:none;z-index:1;cursor:pointer;}

.chk_box input[type="checkbox"]:checked + label span {background:#111;}

.all_chk.chk_box input[type="checkbox"] + label span {}

.chk_box input[type="radio"] + label {display:inline-block;position:relative;padding-left:28px;font-size:14px;line-height:20px;font-weight:normal;vertical-align:baseline;cursor:pointer;}
.chk_box input[type="radio"] + label span {display:block;position:absolute;left:0;top:0px;width:20px;height:20px;background:#ccc;border:none;border-radius:50%;}
.chk_box input[type="radio"] + label:hover span {}
.chk_box input[type="radio"] + label span:after {content:"\e928";display:block;position:absolute;left:0px;top:0px;width:20px;height:20px;font-family:"xeicon";color:#fff;font-size:14px;text-align:center;line-height:20px;background:none;z-index:1;cursor:pointer;}

.chk_box input[type="radio"]:checked + label span {background:#111;}


.selec {display:block;position:relative;width:100%;}
.selec a.btn {display:block;width:100%;padding:0 10px;color:#999;font-size:14px;line-height:38px;background:#fff;border:solid 1px #eee;border-radius:10px;}
.selec:after {content:"\e941";display:block;position:absolute;right:15px;top:0px;height:40px;font-family:"xeicon";color:#ccc;font-size:14px;text-align:center;line-height:40px;background:none;z-index:1;cursor:pointer;
-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;
}
.selec.selected:after {
-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg);
}

.selec_layer {display:none;position:absolute;left:0;right:0;top:52px;overflow-y:auto;padding:5px 0;background:#fff;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,0.1);z-index:3;}
.selec_layer a {display:block;padding:0 10px;color:#111;font-size:14px;line-height:40px;}
.selec_layer a:hover {background:#eee;}
.selec_layer a.chk {font-weight:700;}

.selec_layer2 {display:none;position:absolute;left:0;right:0;top:52px;overflow-y:auto;padding:5px 0;background:#fff;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,0.1);z-index:3;}
.selec_layer2 a {display:block;padding:0 10px;color:#111;font-size:14px;line-height:40px;}
.selec_layer2 a:hover {background:#eee;}
.selec_layer2 a.chk {font-weight:700;}

/*포인트*/
#user_cont {}
#user_cont h1 {text-align:left}
#user_cont .point_all {margin:20px 20px 15px;border-radius:5px;background:#edf3fc;border:1px solid #d6e2f4;color:#485172;font-size:1.083em}
#user_cont .point_all:after {display:block;visibility:hidden;clear:both;content:""}
#user_cont .point_all li {float:left;width:50%;padding:20px;text-align:left}
#user_cont .point_all li span {float:right;color:#485172;font-weight:bold}
#user_cont .point_all li:last-child {border-left:1px solid #d6e2f4}
#user_cont .point_all .full_li {width:100%;border-bottom:1px solid #d6e2f4;text-align:left}
#user_cont .point_all .full_li span {color:#000;font-weight:bold;font-size:1.2em}
#user_cont .point_status{background:#737373;border:0;color:#fff;font-weight:bold;font-size:1.083em;text-align:left}
#user_cont .point_status:after {display:block;visibility:hidden;clear:both;content:""}
#user_cont .point_status span{margin-left:10px;float:right}

.point_list {}
.point_list li:first-child {border-top:1px solid #ececec}
.point_list li {border-bottom:1px solid #ececec;background:#fff;padding:15px;list-style:none;position:relative}
.point_list li:after {display:block;visibility:hidden;clear:both;content:""}

.point_list .point_use {background:#f6f6f6}
.point_list .point_use .point_num {font-size:1.25em;color:#ff4f76;font-weight:bold;float:right}
.point_list .point_num {font-size:1.25em;color:#3a8afd;font-weight:bold;position:absolute;right:15px;top:25px}
.point_list .point_top {line-height:15px;margin:0 0 5px}
.point_list .point_top:after {display:block;visibility:hidden;clear:both;content:""}
.point_list .point_tit {font-weight:bold;float:left;font-size:1.083em;display:block}
.point_list .point_date1 {float:left;color:#888d92}
.point_list .point_date {float:left;color:#888d92}
.point_list .txt_expired {color:red;margin-left:5px}

#point .pg_wrap {width:100%;float:inherit;text-align:center}
#point .btn_close {margin:20px auto}

/* 퍼스널 진단결과 */
.FSC-PC {
  position: relative;
  margin-bottom:20px;
  width: 100%;
  height: 164px;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--crewtor-off-color);
}

.FSC-PC .vector {
  position: absolute;
  top: 80px;
  right: 100px;
  width: 68px;
  height: 1px;
  object-fit: cover;
}

.FSC-PC .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 14px;
  position: absolute;
  top: calc(50.00% - 14px);
  right: 20px;
  background-color: #ddd;
  border-radius: 999px;
  overflow: hidden;
}

.FSC-PC .icon.on{
	color: #ffffff;
	 background-color: #193a3d;
}

.FSC-PC .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 0.08px;
  line-height: 15px;
  white-space: nowrap;
}

.FSC-PC .div-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 14px;
  position: absolute;
  top: calc(50.00% - 14px);
  right: 150px;
  background-color: #193a3d;
  border-radius: 999px;
  overflow: hidden;
}

.FSC-PC .view {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  position: absolute;
  top: 142px;
  left: 188px;
}

.FSC-PC .div {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard-Medium", Helvetica;
  font-weight: 500;
  color: var(--crewtor-main-color);
  font-size: 12px;
  letter-spacing: 0.08px;
  line-height: 12px;
  white-space: nowrap;
}

.FSC-PC .view-2 {
  display: flex;
  flex-direction: column;
  width: 135px;
  align-items: flex-start;
  gap: 3px;
  position: absolute;
  top: 27px;
  left: 189px;
}

.FSC-PC .text-wrapper-2 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: var(--crewtor-main-color);
  font-size: 24px;
  letter-spacing: 0.08px;
  line-height: 24px;
}

.FSC-PC .text-wrapper-3 {
  position: relative;
  align-self: stretch;
  font-family: "Pretendard-Bold", Helvetica;
  font-weight: 700;
  color: var(--crewtor-main-color);
  font-size: 60px;
  letter-spacing: 0.08px;
  line-height: 60px;
}

.FSC-PC .image-profile {
  position: absolute;
  top: calc(50.00% - 72px);
  left: 11px;
  width: 158px;
  height: 144px;
}


ul.form {}
ul.form li {display:block;position:relative;margin:0 0 40px 0;padding:0;}
ul.form li:last-child {margin:0;}
ul.form li.gap {margin:0 0 60px 0;padding:0 0 60px 140px;border-bottom:solid 1px #eee;}
ul.form li label {display:block;position:absolute;left:0px;top:0px;font-size:14px;font-weight:500;}
ul.form li .pro_photo {display:block;position:absolute;left:0;top:0;}
ul.form li .pro_photo .profile_img {display:block;width:100px;margin:0 auto 12px auto;}
ul.form li .pro_photo .profile_img img {width:100%;height:auto; border-radius:50%;}
ul.form li .pro_photo a {display:block;width:100%;font-size:14px;text-align:center;line-height:34px;background:#fff;border:solid 1px #ddd;border-radius:8px;}
ul.form li .pro_photo label {display:block;margin-top: 120px;width:100%;font-size:14px;text-align:center;line-height:34px;background:#fff;border:solid 1px #ddd;border-radius:8px;}
ul.form li .frm_info {margin:8px 0 0 0;color:#999;font-size:12px;font-weight:400;}


.w_div {display:block;position:relative;padding:0 0 0 140px;border:solid 1px #eee;border-radius:5px;
-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;
}
.w_div:after {display:block;visibility:hidden;clear:both;content:""}
.w_div.w_padd {}
.w_div.w_padd2 {padding:0 50px 0 580px}
.w_div:hover {border:solid 1px #aaa}
.w_div.w_mgn {margin:0 0 20px 0;}
.w_div.w_error {margin:0 0 40px 0;border:solid 1px #f00001;}
.w_div .label {display:block;position:absolute;left:15px;top:0;font-size:14px;font-weight:400;line-height:48px;}
.w_div .f_input {display:block;width:100%;height:48px;padding:0 10px;font-size:14px;font-weight:300;line-height:48px;background:none;border:none;}
.w_div .text {display:block;width:100%;height:48px;padding:0 10px;font-size:14px;font-weight:300;line-height:48px;background:none;border:none;}
.w_div .textarea {display:block;width:100%;height:140px;padding:0 10px;font-size:14px;font-weight:300;line-height:48px;background:none;border:none;}
.w_div textarea {display:block;width:100%;height:140px;padding:10px;font-size:14px;font-weight:300;line-height:140%;background:none;border:none;resize:none;}
.w_div .sns {display:block;width:100%;height:48px;padding:0 10px;font-size:14px;font-weight:300;line-height:48px;background:none;border:none;}

.w_div .arim {display:block;width:100%;min-height:48px;padding:0 10px;font-size:14px;font-weight:300;line-height:48px;background:none;border:none;}
.w_div .arim .setting {margin-right:50px;}

.w_div.content {margin:20px 0;padding:20px;}

.error {display:block;position:absolute;left:0;right:0;bottom:-25px;color:#f00001;font-size:12px;}
.none {display:none;}

/* 채팅몰록 */
.chat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 800px; /* 전체 너비 제한 */
  margin: 0 auto;
}

.chat-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
  cursor: pointer;
}

.chat-item:hover {
  background-color: #f9f9f9;
}

/* 1. 상대방 회원 영역 */
.chat-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  margin-right: 15px;
}

.user-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-bottom: 5px;
  border:1px solid #ddd;
}

.user-nickname {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

/* 2~4. 채팅 정보 영역 */
.chat-info {
  flex: 1; /* 남은 공간 차지 */
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden; /* 넘치는 텍스트 제어 */
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.last-msg-content {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 말줄임 처리(...) */
  margin-right: 10px;
}

.last-time {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
}

.chat-footer {
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    gap: 10px;           /* 등록일과 버튼 사이 간격 */
    margin-top: 5px;
    font-size: 11px;
    color: #bbb;
}

.btn-chat-small {
    display: inline-block;
    padding: 2px 8px;    /* 크기를 작게 조절 */
    text-decoration: none;
    border-radius: 3px;
    font-size: 10px;     /* 글씨 크기를 등록일과 맞춤 */
    font-weight: bold;
    line-height: 1.4;
	border:1px solid #ddd;
}

.btn-chat-small:hover {
    background-color: #6bc5cc;
    color: #fff;
}

/* 반응형 모바일 설정 */
@media (max-width: 480px) {
  .chat-item {
    padding: 10px;
  }
  .user-icon {
    width: 40px;
    height: 40px;
  }
  .last-msg-content {
    font-size: 13px;
  }
}

/* 퍼스널 진단결과 */

    #personal .list-container {
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
            padding: 15px;
        }

        /* [핵심] 리스트 아이템 세로 중앙 정렬 */
       #personal .list-item {
            display: flex;
            justify-content: space-between;
            align-items: center; /* 왼쪽 컨텐츠와 오른쪽 버튼군을 세로 정중앙 배치 */
            padding: 25px 20px;
            border-bottom: 1px solid #eee;
            background: #fff;
            transition: background 0.3s;
        }

       #personal .list-item:hover {
            background: #f9f9f9;
        }

        /* 왼쪽 정보 레이아웃 */
       #personal .item-info {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* [핵심] FSC 밑에 90% 위치시키기 */
       #personal .status-stack {
            display: flex;
            flex-direction: column; /* 세로로 쌓기 */
            align-items: flex-start;
            gap: 4px;
        }

        /* 배지 공통 */
      #personal  .badge {
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            display: inline-block;
        }

       #personal .badge.airline { background: #e3f2fd; color: #1976d2; margin-bottom: 5px; }

       #personal .badge.fsc {
            background: #1976d2;
            color: #fff;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 11px;
            font-weight: bold;
            letter-spacing: -0.5px;
        }

        /* [핵심] 90% 텍스트 강조 */
      #personal  .percent-text {
            font-size: 38px; /* 더 크게 변경 */
            font-weight: 900;
            color: #1a1a1a;
            line-height: 1; /* 위아래 여백 제거하여 정렬 최적화 */
        }

       #personal .datetime {
            font-size: 14px;
            color: #888;
        }

        /* 버튼 그룹 */
       #personal .button-group {
            display: flex;
            gap: 10px;
        }

      #personal  .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            transition: 0.2s;
        }

      #personal  .btn-primary { background: #4a90e2; color: white; }
      #personal .btn-secondary { background: #6c757d; color: white; }
      #personal  .btn:hover { opacity: 0.8; transform: translateY(-1px); }

        /* 반응형 */
        @media (max-width: 768px) {
           #personal .list-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 0px;
				padding:20px;
            }
           #personal .button-group {
                width: 100%;
            }
           #personal .btn {
                flex: 1;
                text-align: center;
            }
        }

/* 에듀네이터 상담 */
#answer .board-container {
    max-width: 1000px;
    margin: 20px auto;
    padding: 0;
    font-family: 'Pretendard', sans-serif;
}

#answer .board-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #fff;
    border-bottom: 1px solid #f1f1f1;
    transition: background 0.2s;
}

#answer .board-item:hover {
    background: #fafafa;
}

#answer .board-content {
    flex: 1;
    padding-right: 20px;
}

/* 상단 정보 영역 */
#answer .board-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

#answer .board-category {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #e3f2fd;
    padding: 2px 8px;
    border-radius: 4px;
}

#answer .date {
    font-size: 13px;
    color: #999;
}

/* 제목 영역 */
#answer .subject {
    font-size: 19px;
    font-weight: 700;
    color: #222;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

/* 하단 메타 영역 */
#answer .board-meta {
    display: flex;
    align-items: center;
    gap: 15px;
}

#answer .respondent {
    font-size: 14px;
    color: #555;
}

#answer .rating-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 미답변 상태 (Red) */
#answer .status-badge.status-wait {
	padding: 2px 8px;
	font-size: 14px;
    background-color: #fff1f0;
    color: #ff4d4f;
    border: 1px solid #ffa39e;
}

/* 답변완료 상태 (Green) */
#answer .status-badge.status-done {
	padding: 2px 8px;
	font-size: 14px;
    background-color: #f6ffed;
    color: #52c41a;
    border: 1px solid #b7eb8f;
}


#answer .rating { font-size: 14px; color: #fbc02d; font-weight: bold; }

/* 상세보기 버튼 */
#answer .btn-view {
    display: inline-block;
    padding: 12px 28px;
    background: #fff; /* 진한 블랙/네이비 계열 */
    color: #1a1a1a;	
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s ease;
    border: 1px solid #1a1a1a;
}

#answer .btn-view:hover {
    background: #1a1a1a; /* 호버 시 포인트 컬러(블루) */
    border-color: #1a1a1a;
	color:#fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
}

/* 답변하기 버튼 스타일 */
#answer .btn-reply {
    display: inline-block;
    padding: 12px 28px;
    background: #1a1a1a; /* 진한 블랙/네이비 계열 */
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s ease;
    border: 1px solid #1a1a1a;
}

#answer .btn-reply:hover {
    background: #4a90e2; /* 호버 시 포인트 컬러(블루) */
    border-color: #4a90e2;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
}

/* 📱 반응형 (태블릿/모바일) */
@media (max-width: 768px) {
   #answer .board-item {
        flex-direction: column;
        align-items: flex-start;
    }

    #answer .board-content {
        width: 100%;
        padding-right: 0;
        margin-bottom: 15px;
    }

    #answer .subject {
        font-size: 17px;
    }

    #answer .board-action {
        width: 100%;
    }

    #answer .btn-view {
        width: 100%;
        display: block;
        text-align: center;
    }

	#answer .btn-reply {
        width: 100%;
        text-align: center;
        padding: 14px 0; /* 모바일은 터치하기 편하게 더 두툼하게 */
    }
}

/* 결제내역 */
#payment .order-container {
    max-width: 1000px;
    margin: 20px auto;
    padding: 0;
}

#payment .order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    margin-bottom: 15px;
    transition: box-shadow 0.3s ease;
}

#payment .order-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* 왼쪽 정보 영역 */
#payment .order-info {
    flex: 1;
}

#payment .order-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

#payment .order-no {
    font-size: 14px;
    color: #555;
}

#payment .order-date {
    font-size: 13px;
    color: #999;
}

#payment .product-name {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px 0;
}

#payment .order-amount {
    font-size: 20px;
    font-weight: 800;
    color: #d32f2f; /* 금액 강조색 */
}

#payment .order-amount .unit {
    font-size: 14px;
    font-weight: 400;
    margin-left: 2px;
}

/* 금액과 결제방식을 묶는 컨테이너 */
#payment .order-pricing {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 5px;
}

#payment .order-amount {
    font-size: 20px;
    font-weight: 800;
    color: #d32f2f;
}

/* 결제방식 태그 스타일 */
#payment .pay-method {
    display: flex;
    align-items: center;
}

#payment .method-tag {
    font-size: 11px;
    color: #777;
    background: #f1f1f1;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    font-weight: 500;
}

/* 우측 상태 및 버튼 영역 */
#payment .order-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

/* 상태 배지 */
#payment .status-badge {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
}

#payment .status-paid { background: #e8f5e9; color: #2e7d32; } /* 결제완료: 초록 */
#payment .status-pending { background: #fff3e0; color: #ef6c00; } /* 미결제: 주황 */

#payment .btn-detail {
    display: inline-block;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    text-align: center;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 6px;
    transition: all 0.2s ease;
}

#payment .btn-detail:hover {
    color: #333;
    background-color: #f8f9fa;
    border-color: #bbb;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 📱 반응형 (모바일) */
@media (max-width: 768px) {
    #payment .order-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    #payment .order-status {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px dashed #eee;
    }

    #payment .product-name {
        font-size: 16px;
    }

    #payment .order-amount {
        font-size: 18px;
    }

	#payment .order-pricing {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    #payment .method-tag {
        font-size: 12px;
        padding: 4px 10px; /* 모바일에서 가독성 확보 */
    }
}

/* 상담내역 */
/* 2. 컨테이너 */
#message .chat-list-container {
	max-width: 900px;
	margin: 0px auto;
	padding: 0;
}

/* 3. 목록 아이템 개별 요소 */
#message .chat-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	padding: 25px;
	border-radius: 16px;
	margin-bottom: 15px;
	border: 1px solid #eaeaea;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

#message .chat-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.06);
	border-color: #4a90e2;
}

/* 4. 메인 컨텐츠 영역 */
#message .chat-main {
	flex: 1;
	min-width: 0;
	padding-right: 20px;
}

/* 마지막 대화 내용 */
#message .last-msg {
	font-size: 18px;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 날짜 정보 영역 */
#message .chat-dates {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: #999;
	margin-bottom: 15px;
}

#message .date-item.reply-date {
	color: #4a90e2;
	font-weight: 600;
}

#message .date-divider { color: #eee; }

/* [핵심] 하단 회원 정보 영역 */
#message .chat-user-bottom {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 12px;
	border-top: 1px solid #f1f1f1;
}

/* 3D 아이콘 스타일 구현 */
#message .user-icon-sm {
	width: 20px;
	height: 20px;
	background: linear-gradient(145deg, #e6e6e6, #ffffff);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 2px 2px 5px #d1d1d1, -2px -2px 5px #ffffff;
	overflow: hidden;
}

#message .user-icon-sm img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#message .nickname {
	font-size: 14px;
	font-weight: 600;
	color: #555;
}

/* 5. 우측 버튼 영역 */
#message .chat-action {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#message .btn-inquiry {
	display: inline-block;
	padding: 12px 28px;
	background: #1a1a1a;
	color: #fff;
	text-decoration: none;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: background 0.2s;
	text-align: center;
}

#message .btn-inquiry:hover {
	background: #444;
}

/* 📱 6. 반응형 (모바일) */
@media (max-width: 768px) {
	#message .chat-item {
		flex-direction: column;
		align-items: flex-start;
		padding: 20px;
	}

	#message .chat-main {
		width: 100%;
		padding-right: 0;
	}

	#message .last-msg {
		font-size: 16px;
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	#message .chat-action {
		width: 100%;
		margin-top: 20px;
	}

	#message .btn-inquiry {
		width: 100%;
		padding: 15px 0;
	}
}

/* 찜목록 */
#wishlist .product-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
}

#wishlist .product-item {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #eee;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

#wishlist .product-item:hover {
    border-color: #ff4d4f; /* 삭제 버튼 강조를 위한 레드 계열 */
    background: #fffcfc;
}

/* 1. 상품 이미지 스타일 */
#wishlist .product-thumb img {
    width: 120px;
    height: 100px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #f0f0f0;
}

#wishlist .product-thumb .no_image {
    width: 120px;
    height: 90px;
    background: #f3f4f6;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 4px;
}

/* 상품 상세 정보 영역 */
#wishlist .product-detail {
    flex: 1;
    padding: 0 20px;
    min-width: 0;
}

#wishlist .product-tags {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

#wishlist .tag {
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 4px;
}

#wishlist .tag.product-category { background: #e6f7ff; color: #1890ff; }
#wishlist .tag.type { background: #f6ffed; color: #52c41a; }

#wishlist .product-title {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin: 0 0 10px 0;
}

#wishlist .product-meta {
    font-size: 13px;
    color: #888;
}

#wishlist .divider { margin: 0 8px; color: #eee; }

/* 7. 삭제 버튼 스타일 */
#wishlist .btn-delete {
    padding: 10px 20px;
    background: #fff;
    color: #ff4d4f;
    border: 1px solid #ff4d4f;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

#wishlist .btn-delete:hover {
    background: #ff4d4f;
    color: #fff;
}

/* 📱 반응형 (모바일) */
@media (max-width: 768px) {
    #wishlist .product-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
    }

    #wishlist .product-thumb {
        width: 100%;
        margin-bottom: 15px;
    }

    #wishlist .product-thumb img {
        width: 100%;
        height: 150px; /* 모바일에서는 이미지를 크게 배치 */
    }

    #wishlist .product-detail {
        padding: 0;
        width: 100%;
        margin-bottom: 15px;
    }

   #wishlist  .product-action {
        width: 100%;
    }

   #wishlist  .btn-delete {
        width: 100%;
        display: block;
        text-align: center;
    }
}

/* 마일리지 */
#mileage .mileage-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 15px;
}

#mileage .mileage-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 22px 25px;
	background: #fff;
	border-bottom: 1px solid #f0f0f0;
	transition: background 0.2s ease;
}

/* 첫 번째 아이템의 상단 라운드 처리 (선택사항) */
#mileage .mileage-item:first-child { border-radius: 12px 12px 0 0; }
#mileage .mileage-item:last-child { border-radius: 0 0 12px 12px; border-bottom: none; }

#mileage .mileage-item:hover {
	background: #fcfdfe;
}

/* 왼쪽 컨텐츠 */
#mileage .m-content {
	flex: 1;
	padding-right: 15px;
}

#mileage .m-title {
	font-size: 17px;
	font-weight: 600;
	color: #222;
	margin: 0 0 8px 0;
	letter-spacing: -0.3px;
}

#mileage .m-info {
	font-size: 13px;
	color: #999;
	display: flex;
	align-items: center;
	gap: 10px;
}

#mileage .m-divider { color: #eee; }

/* [핵심] 적립/사용 배지 스타일 보완 */
#mileage .m-badge {
	display: inline-block;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 700;
	border-radius: 4px;
	line-height: 1.5;
}

/* 적립 배지 (블루) */
#mileage .badge-plus {
	background-color: #eef6ff;
	color: #1976d2;
	border: 1px solid #d0e3ff;
}

/* 사용 배지 (레드) */
#mileage .badge-minus {
	background-color: #fff1f0;
	color: #d32f2f;
	border: 1px solid #ffd1d1;
}

/* 오른쪽 금액 영역 */
#mileage .m-amount {
	text-align: right;
	min-width: 100px;
}

#mileage .amount-val {
	font-size: 20px;
	font-weight: 800;
	font-family: 'Tahoma', sans-serif; /* 숫자의 균형을 위해 */
}

/* 금액 색상 구분 */
#mileage .amount-val.plus { color: #1976d2; }   /* 적립: 블루 */
#mileage .amount-val.minus { color: #d32f2f; }  /* 사용: 레드 */

#mileage .amount-unit {
	font-size: 14px;
	font-weight: 600;
	color: #444;
	margin-left: 2px;
}

/* 📱 반응형 (모바일) */
@media (max-width: 768px) {
	#mileage .mileage-item {
		padding: 18px 0px;
	}

	#mileage .m-title {
		font-size: 15px;
		margin-bottom: 5px;
	}

	#mileage .amount-val {
		font-size: 17px;
	}

	#mileage .m-info {
		gap: 6px;
	}
}

/* 고객센터 문의 */
#qna .qna-list-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    font-family: 'Pretendard', sans-serif;
}

#qna .qna-card {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    transition: transform 0.2s, box-shadow 0.2s;
}

#qna .qna-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* 상단 영역: 카테고리, 상태, 날짜 */
#qna .qna-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

#qna .qna-status-group {
    display: flex;
    gap: 8px;
}

#qna .qna-category {
    font-size: 12px;
    color: #666;
    background: #f1f3f5;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
}

#qna .qna-status {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
}

#qna .status-wait { background: #fff1f0; color: #ff4d4f; } /* 미답변: 레드 */
#qna .status-done { background: #f6ffed; color: #52c41a; } /* 완료: 그린 */

#qna .qna-date { font-size: 13px; color: #999; }

/* 본문 영역: 제목, 닉네임 */
#qna .qna-body {
    margin-bottom: 20px;
}

#qna .qna-subject {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

#qna .qna-author {
    font-size: 14px;
    color: #777;
}

/* 하단 영역: 버튼 */
#qna .qna-footer {
    display: flex;
    justify-content: flex-end;
}

#qna .btn-view-detail {
    display: inline-block;
    padding: 10px 20px;
    background: #f8f9fa;
    color: #444;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #ddd;
    transition: all 0.2s;
}

#qna .btn-view-detail:hover {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* 📱 반응형 (모바일) */
@media (max-width: 768px) {
   #qna  .qna-card { padding: 15px; }
    
   #qna  .qna-subject { font-size: 16px; }
    
   #qna  .btn-view-detail {
        width: 100%;
        text-align: center;
    }
}

/* 쿠폰존 */
#coupon .coupon-card {
  display: flex;
  max-width: 100%;
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

/* 상세 정보 영역 */
#coupon .coupon-details {
  flex: 1;
  padding: 24px;
}

#coupon .top-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

#coupon .badge-blue {
  background: #ebf5ff;
  color: #3498db;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
}

#coupon .serial-code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  color: #7f8c8d;
  background: #f8f9fa;
  padding: 2px 6px;
  border-radius: 4px;
}

#coupon .coupon-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 12px 0;
  color: #2c3e50;
}

#coupon .benefit-info {
  margin-bottom: 8px;
}

#coupon .benefit-info .amount {
  font-size: 18px;
  font-weight: 700;
  color: #e74c3c;
}

#coupon .validity {
  font-size: 13px;
  color: #95a5a6;
  margin: 0;
}

/* 사이드 D-Day 영역 */
#coupon .coupon-aside {
  width: 120px;
  background: linear-gradient(135deg, #fff 0%, #fdfdfd 100%);
  border-left: 2px dashed #eee;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
}

#coupon .d-day-tag {
  font-size: 22px;
  font-weight: 900;
  color: var(--accent-color);
  margin-bottom: 10px;
}

#coupon .action-btn {
  width: 100%;
  padding: 8px 0;
  background: #2c3e50;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}

/* 반응형 모바일 */
@media (max-width: 500px) {
  #coupon .coupon-card {
    flex-direction: column;
  }
  
  #coupon .coupon-aside {
    width: auto;
    border-left: none;
    border-top: 2px dashed #eee;
    flex-direction: row;
    justify-content: space-between;
    padding: 15px 24px;
  }
  
  #coupon .d-day-tag {
    margin-bottom: 0;
  }
  
  #coupon .action-btn {
    width: 80px;
  }
  
  #coupon .top-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 상품관리 */

#myservice .admin-list { max-width: 100%; margin: 0 auto; background: #fff; }

#myservice .list-item {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
}
#myservice .list-item:hover { background: #fafafa; }

/* 이미지 및 좌측 상단 상태표시 */
#myservice .thumb-area {
  position: relative;
  width: 200px;
  height: 113px;
  margin-right: 20px;
  flex-shrink: 0;
}
#myservice .thumb-area img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid #efefef;}

#myservice .status-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #2ecc71;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 3px 7px;
  border-radius: 4px;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 중앙 정보 텍스트 */
#myservice .info-area { flex: 1; }
#myservice .p-code { font-size: 11px; color: #aaa; font-family: monospace; }
#myservice .p-category { font-size: 12px; color: #3498db; margin-top: 2px; }
#myservice .p-name { font-size: 17px; font-weight: 700; color: #2c3e50; margin: 4px 0; }
#myservice .p-price { font-size: 15px; font-weight: 800; color: #333; }
#myservice .p-date { font-size: 12px; color: #95a5a6; margin-top: 4px; }

/* 우측 버튼 */
#myservice .action-area {
  display: flex;
  flex-direction: column; /* PC에서도 버튼을 세로로 배치해 공간 절약 가능 */
  gap: 6px;
  margin-left: 20px;
}
#myservice .btn {
  padding: 7px 15px;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid #ddd;
  background: #fff;
  width: 65px;
}
#myservice .btn.edit:hover { background: #f8f9fa; border-color: #bbb; }
#myservice .btn.delete { color: #e74c3c; border-color: #ffcccc; background: #fff5f5; }

/* --- 모바일 반응형 --- */
@media (max-width: 600px) {
 #myservice  .list-item { align-items: flex-start; }

 #myservice .thumb-area {
  width: 120px;
}

  #myservice .action-area {
    flex-direction: row; /* 모바일에서는 버튼을 가로로 배치 */
    width: 100%;
    margin-left: 0;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f5f5f5;
  }
  
  #myservice .btn { flex: 1; width: auto; }
  
  #myservice .list-item { flex-wrap: wrap; }
}	

/* 구매관리 */
#purchase .purchase-list { max-width: 950px; margin: 0 auto; background: #fff; font-family: sans-serif; }

#purchase .purchase-item {
  padding: 25px 0;
  border-bottom: 1px solid #f1f1f1;
}

/* 최상단 행: 상태 & 일자 */
#purchase .order-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f8f9fa;
}

:root {
  /* 상태별 테마 컬러 */
  --status-waiting: #f39c12;    /* 입금대기: 대기/주의 (Orange) */
  --status-complete: #27ae60;   /* 결제완료: 긍정/진행 (Green) */
  --status-confirmed: #2980b9;  /* 구매확정: 완료/신뢰 (Blue) */
  --status-expired: #7f8c8d;    /* 기간만료: 비활성 (Gray) */
  --status-cancel: #e74c3c;     /* 주문취소: 경고/중단 (Red) */
  --status-issue: #8e44ad;      /* 취소/문제: 주의필요 (Purple) */
  --status-dispute: #d35400;    /* 분쟁조정: 위험/중재 (Deep Orange) */
  --status-request: #f1c40f;    /* 거래취소요청: 즉시 확인 필요 (Yellow) */
}

/* 공통 뱃지 스타일 */
#purchase .status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

/* 입금대기 */
#purchase .status-badge.waiting { 
  background-color: #fff9db; color: var(--status-waiting); border: 1px solid #ffe066; 
}

/* 결제완료 */
#purchase .status-badge.complete { 
  background-color: #ebfbee; color: var(--status-complete); border: 1px solid #b2f2bb; 
}

/* 구매확정 */
#purchase .status-badge.confirmed { 
  background-color: #e7f5ff; color: var(--status-confirmed); border: 1px solid #a5d8ff; 
}

/* 기간만료 */
#purchase .status-badge.expired { 
  background-color: #f1f3f5; color: var(--status-expired); border: 1px solid #dee2e6; 
}

/* 주문취소 */
#purchase .status-badge.cancel { 
  background-color: #fff5f5; color: var(--status-cancel); border: 1px solid #ffc9c9; 
}

/* 취소.문제해결 */
#purchase .status-badge.issue { 
  background-color: #f8f0fc; color: var(--status-issue); border: 1px solid #eebefa; 
}

/* 분쟁조정중 */
#purchase .status-badge.dispute { 
  background-color: #fff4e6; color: var(--status-dispute); border: 1px solid #ffd8a8; 
}

/* 거래취소요청 뱃지 스타일 */
#purchase .status-badge.request { 
  background-color: #fff4e6; color: var(--status-request); border: 1px solid #f1c40f; 
}

#purchase .order-date { font-size: 13px; color: #999; }

/* 메인 레이아웃 */
#purchase .main-content { display: flex; gap: 20px; align-items: flex-start; }

/* 이미지 영역 */
#purchase .side-area { width: 200px; flex-shrink: 0; }
#purchase .thumb-box { width: 200px; height: 113px; }
#purchase .thumb-box img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1px solid #eee; }

/* 정보 영역 */
#purchase .content-area { flex: 1; min-width: 0; }
#purchase .order-info { margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
#purchase .order-no { font-size: 12px; color: #aaa; font-family: monospace; }
#purchase .p-category { font-size: 12px; color: #3498db; font-weight: 600; }

#purchase .p-name { font-size: 18px; font-weight: 700; color: #2c3e50; margin: 4px 0; }
#purchase .p-price { font-size: 17px; font-weight: 800; color: #333; margin-bottom: 10px; }

/* 구매자 그룹 (금액 밑 배치) */
#purchase .buyer-group { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  padding-top: 10px; 
  border-top: 1px dashed #eee; 
}
#purchase .nickname { font-size: 13px; color: #666; }
#purchase .btn-qna { 
  font-size: 11px; padding: 3px 10px; border: 1px solid #ddd; background: #fff; 
  border-radius: 4px; cursor: pointer; color: #777; transition: 0.2s;
}
#purchase .btn-qna:hover { background: #f8f9fa; border-color: #ccc; }

/* 액션 버튼 */
#purchase .action-area { align-self: stretch; display: flex; align-items: center; }
#purchase .btn-detail {
  padding: 12px 20px; background: #2c3e50; color: #fff; border: none;
  border-radius: 8px; font-weight: 600; cursor: pointer; white-space: nowrap;
  font-size: 14px;
}

/* --- 반응형 모바일 --- */
@media (max-width: 768px) {
  #purchase .main-content { flex-wrap: wrap; gap: 15px; }
  #purchase .side-area { width: 120px; }
  #purchase .thumb-box { width: 120px;}
  #purchase .content-area { width: calc(100% - 85px); }
  #purchase .action-area { width: 100%; margin-top: 5px; }
  #purchase .btn-detail { width: 100%; text-align:center;}  
}

/* 주문상세 */
/* #overview 범위 내 스타일 제한 */
        #overview.detail-container { max-width: 100%; margin: 10px auto;  line-height: 1.6; color: #333; font-family: 'Pretendard', -apple-system, sans-serif; box-sizing: border-box; }
        #overview * { box-sizing: border-box; }

        /* 카드 공통 스타일 */
        #overview .detail-card { background: #fff; border: 1px solid #e1e4e8; border-radius: 12px; padding: 25px; margin-bottom: 25px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); }
        #overview .section-title { font-size: 19px; font-weight: 700; margin: 0 0 20px 0; padding-bottom: 12px; border-bottom: 2px solid #f1f3f5; color: #2c3e50; }

        /* 1. 기본정보 */
        #overview .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        
		/* 공통 스타일 */
		#overview .status-badge {
			display: inline-block;
			padding: 4px 10px;
			border-radius: 3px;
			font-size: 12px;
			font-weight: 500;
			color: #fff;
		}

		/* 상태별 배경색 */
		#overview .status-badge.waiting   { background-color: #6c757d; } /* 회색 (대기) */
		#overview .status-badge.complete  { background-color: #28a745; } /* 녹색 (진행) */
		#overview .status-badge.confirmed { background-color: #007bff; } /* 파란색 (완료) */
		#overview .status-badge.expired   { background-color: #dc3545; } /* 빨간색 (만료) */
		#overview .status-badge.cancel    { background-color: #343a40; } /* 진회색 (취소) */
		#overview .status-badge.issue     { background-color: #17a2b8; } /* 청록색 (해결중) */
		#overview .status-badge.dispute   { background-color: #fd7e14; } /* 주황색 (경고) */
		#overview .status-badge.request   { background-color: #ffc107; color: #212529; } /* 노란색 (주의) */
		#overview .status-badge.default   { background-color: #e9ecef; color: #6c757d; }


        #overview .order-date { font-size: 13px; color: #999; }
        #overview .main-info { display: flex; gap: 20px; }
        #overview .p-img-box img { width: 120px; height: 120px; border-radius: 10px; object-fit: cover; border: 1px solid #eee; flex-shrink: 0; }
        #overview .p-txt-box { flex: 1; min-width: 0; }
        #overview .p-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 5px; }
        #overview .p-category { font-size: 12px; color: #3498db; font-weight: 600; }
        #overview .order-no { font-size: 12px; color: #aaa; font-family: monospace; }
        #overview .p-name { font-size: 20px; font-weight: 700; margin: 0 0 8px 0; color: #2c3e50; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }*/
        #overview .p-price { font-size: 19px; font-weight: 800; color: #333; margin-bottom: 15px; }
        #overview .buyer-group { display: flex; align-items: center; gap: 10px; }
        #overview .nickname { font-size: 14px; color: #555; }
        #overview .btn-qna { padding: 4px 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 11px; text-decoration: none; color: #777; background: #fff; }


		/* 1. 텍스트를 감싸는 박스 */
		#overview .p-txt-box {
			flex: 1;
			min-width: 0; /* 부모가 flex일 때 필수 */
			width: 100%;     /* 일부 모바일 브라우저에서 필요한 트릭 */
		}

		/* 2. 실제 텍스트 제목 */
		#overview .p-name {
			display: block !important;
			max-width: 100%;
			white-space: nowrap !important;
			overflow: hidden !important;
			text-overflow: ellipsis !important;
		}



        /* 공지 박스 */
        #overview .info-notice { display: flex; gap: 12px; padding: 15px; border-radius: 8px; margin-bottom: 20px; background: #eef6ff; border: 1px solid #bcdffb; }
        #overview .info-notice.warning { background: #fff9db; border-color: #f1c40f; }
        #overview .notice-icon { font-size: 18px; }
        #overview .notice-text { font-size: 14px; color: #2c3e50; flex: 1; }
        #overview .period-date { font-weight: 700; color: #007bff; margin-left: 5px; }
        #overview .warning .period-date { color: #d35400; }
        #overview .notice-desc { margin: 4px 0 0 0; font-size: 12px; color: #6c757d; }

        /* 2. 강좌정보 서브 리스트 스타일 */
        #overview .lecture-list { list-style: none; padding: 0; margin: 0; }
        #overview .lecture-list > li { padding: 15px 0; border-bottom: 1px solid #f1f3f5; font-weight: 700; color: #333; font-size: 16px; }
        #overview .lecture-list > li:last-child { border-bottom: none; }
        
        #overview .lecture-list ul { list-style: none; padding: 15px 0 0 0; margin: 0; }
        #overview .lecture-list ul li { margin-bottom: 12px; background: #fafbfc; border-radius: 8px; border: 1px solid #eee; overflow: hidden; }
        #overview .lecture-list ul li a { display: flex; text-decoration: none; color: inherit; align-items: center; }
        
        /* 썸네일 영역 */
        /* 썸네일 박스 기준 설정 */
#overview .lecture-list .img { 
    position: relative; /* 오버레이의 기준점 */
    width: 140px; 
    height: 80px; 
    flex-shrink: 0; 
    overflow: hidden; 
    background: #000; 
    border-radius: 4px;
}

/* 플레이 오버레이 (검은색 반투명 배경) */
#overview .lecture-list .play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* 이미지 살짝 어둡게 */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s;
}

/* CSS로 만든 재생 아이콘 (삼각형) */
#overview .lecture-list .play-icon {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid rgba(255, 255, 255, 0.9); /* 흰색 삼각형 */
    margin-left: 5px; /* 시각적 중앙 정렬 보정 */
    transition: transform 0.3s, border-left-color 0.3s;
}

/* 마우스 호버 효과 */
#overview .lecture-list ul li a:hover .play-overlay {
    background: rgba(0, 0, 0, 0.1); /* 호버 시 이미지가 더 밝아짐 */
}

#overview .lecture-list ul li a:hover .play-icon {
    transform: scale(1.2); /* 아이콘 확대 */
    border-left-color: #fff; /* 아이콘 더 밝게 */
}

        /* 텍스트 영역 */
        #overview .lecture-list .txt { padding: 0 15px; flex: 1; min-width: 0; }
        #overview .lecture-list .subject { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        #overview .lecture-list .duration { font-size: 12px; color: #3498db; font-weight: 600; margin-bottom: 2px; }
        #overview .lecture-list .description { font-size: 12px; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        /* 3. 다운로드 정보 */
        #overview .download-container { display: flex; flex-direction: column; gap: 10px; }
        #overview .download-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; background: #f8f9fa; border-radius: 8px; border: 1px solid #eee; gap: 10px; }
        #overview .file-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
        #overview .file-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
        #overview .file-size { font-size: 12px; color: #adb5bd; flex-shrink: 0; }
        #overview .btn-download { padding: 6px 15px; background: #fff; border: 1px solid #3498db; color: #3498db; border-radius: 4px; font-size: 12px; font-weight: 600; text-decoration: none; flex-shrink: 0; transition: 0.2s; }
        #overview .btn-download:hover { background: #3498db; color: #fff; }

        /* 4. 결제정보 테이블 */
        #overview .payment-table { width: 100%; border-collapse: collapse; }
        #overview .payment-table th, #overview .payment-table td { padding: 12px 0; border-bottom: 1px solid #f1f3f5; }
        #overview .payment-table th { width: 120px; text-align: left; color: #888; font-weight: 500; font-size: 14px; }
        #overview .total-price { font-weight: 800; color: #e74c3c; font-size: 18px; }

        /* 하단 버튼 */
        #overview .bottom-actions { text-align: center; margin-top: 40px; }
        #overview .btn-list { display: inline-block; padding: 14px 60px; background: #2c3e50; color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600; }

        /* 반응형 */
        @media (max-width: 650px) {
            #overview .main-info { flex-direction: column; align-items: center; text-align: center; }
            #overview .card-header { flex-direction: column; gap: 10px; align-items: flex-start; }
            #overview .lecture-list .img { width: 100px; height: 60px; }
            #overview .lecture-list .subject { font-size: 13px; }
            #overview .btn-list { width: 100%; }
        }

.vod_layer {display:none;position:fixed;left:50%;top:50%;width:90%;padding:40px;border-radius:15px;z-index:100;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
.vod_layer .btn_vod_close {display:block;position:absolute;right:40px;top:40px;background:none;border:none;}
.vod_layer .btn_vod_close i {font-size:20px;}

/*수익금 내역 */
/* 기본 레이아웃 */
#revenue .revenue-list { background: #fff; border: 1px solid #e1e4e8; border-radius: 8px; overflow: hidden; font-family: sans-serif; }

/* PC 레이아웃 */
#revenue .list-header { display: flex; background: #f8f9fa; border-bottom: 1px solid #e1e4e8; padding: 12px 15px; font-weight: 600; text-align: center; font-size: 14px; color: #666; }
#revenue .list-item { display: flex; padding: 15px; border-bottom: 1px solid #f1f3f5; align-items: center; text-align: center; font-size: 14px; }

#revenue .col-date { width: 12%; color: #888; }
#revenue .col-type { width: 10%; }
#revenue .col-subject { width: 30%; text-align: left; padding: 0 10px; font-weight: 500; }
#revenue .col-amount { width: 12%; }
#revenue .col-fee { width: 12%; color: #999; }
#revenue .col-net { width: 12%; }
#revenue .col-status { width: 12%; }

/* 상태 및 배지 스타일 */
#revenue .badge { padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
#revenue .badge.sale { background: #e3f2fd; color: #1976d2; }
#revenue .badge.refund { background: #ffebee; color: #d32f2f; }
#revenue .status { font-size: 12px; font-weight: 500; padding: 2px 6px; border-radius: 4px; border: 1px solid #ddd; }
#revenue .status.ready { color: #666; background: #f8f9fa; }
#revenue .status.done { color: #27ae60; border-color: #27ae60; }
#revenue .status.error { color: #d32f2f; border-color: #d32f2f; }
#revenue .plus { color: #27ae60; }
#revenue .minus { color: #d32f2f; }

/* 모바일 반응형 (768px 이하) */
@media (max-width: 768px) {
	#revenue .list-header { display: none; }
	#revenue .list-item { 
		flex-direction: column; 
		align-items: flex-start; 
		padding: 15px; 
		position: relative; 
		gap: 6px; /* 행 간격 확보 */
	}

	/* 전체 행 스타일 */
	#revenue .list-item > div { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; }
	
	/* 제목 영역: 최상단 배치 및 하단 구분선 */
	#revenue .col-subject { 
		order: -2; 
		font-size: 15px; 
		font-weight: 700; 
		padding: 0 0 10px 0; 
		margin-bottom: 5px; 
		border-bottom: 1px solid #eee; 
		display: block; /* 텍스트만 보이게 */
	}
	#revenue .col-subject::before { content: none; }

	/* 상태 영역: 제목 바로 옆이나 아래에 위치하도록 flow 유지 */
	#revenue .col-status { 
		order: -1; 
		width: auto; 
		justify-content: flex-start; 
		margin-bottom: 10px;
		font-size: 13px;
	}
	/* 상태가 절대위치가 아니므로 제목 길이에 맞춰 유동적으로 배치됨 */
	#revenue .col-status::before { content: "상태"; font-weight: 600; color: #999; margin-right: 10px; }

	/* 일반 내역들 */
	#revenue .list-item > div[data-label]::before { 
		content: attr(data-label); 
		font-weight: 600; 
		color: #999; 
		font-size: 13px; 
	}
	
	#revenue .col-date { color: #aaa; font-size: 12px; }
}

/* 출금내역 */ 
/* 기본 레이아웃 */
#responsive .responsive-list { background: #fff; border: 1px solid #e1e4e8; border-radius: 8px; overflow: hidden; font-family: sans-serif; }

/* PC 레이아웃 */
#responsive .list-header { display: flex; background: #f8f9fa; border-bottom: 1px solid #e1e4e8; padding: 12px 15px; font-weight: 600; text-align: center; font-size: 14px; color: #666; }
#responsive .list-item { display: flex; padding: 15px; border-bottom: 1px solid #f1f3f5; align-items: center; text-align: center; font-size: 14px; transition: background 0.2s; }
#responsive .list-item:hover { background: #fafafa; }

#responsive .col-type { width: 10%; }
#responsive .col-subject { width: 35%; text-align: left; padding: 0 15px; font-weight: 500; }
#responsive .col-amount { width: 12%; }
#responsive .col-fee { width: 12%; color: #999; }
#responsive .col-net { width: 12%; }
#responsive .col-date { width: 10%; color: #888; }
#responsive .col-status { width: 9%; }

/* 내부 텍스트 및 배지 */
#responsive .period { display: block; font-size: 12px; color: #aaa; font-weight: normal; margin-top: 2px; }
#responsive .badge { padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; display: inline-block; }
#responsive .badge.sale { background: #e3f2fd; color: #1976d2; }

#responsive .status { font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 4px; border: 1px solid #ddd; display: inline-block; }
#responsive .status.ready { color: #666; background: #f8f9fa; }
#responsive .status.done { color: #27ae60; border-color: #27ae60; }

#responsive .plus { color: #27ae60; font-weight: 600; }

/* 모바일 반응형 (768px 이하) */
@media (max-width: 768px) {
	#responsive .list-header { display: none; }
	#responsive .list-item { 
		flex-direction: column; 
		align-items: flex-start; 
		padding: 15px; 
		gap: 8px;
	}

	/* 공통 행 스타일 */
	#responsive .list-item > div { 
		width: 100%; 
		text-align: center; 
		display: flex; 
		justify-content: space-between; 
		align-items: center;
		padding: 0;
	}

	/* 정산명(제목) 영역 커스텀 */
	#responsive .col-subject { 
		order: -3; /* 최상단 */
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		padding: 0 0 10px 0;
		margin-bottom: 5px;
		border-bottom: 2px solid #f1f3f5;
		font-size: 16px;
		width: 100%;
	}
	#responsive .col-subject::before { content: none !important; }
	#responsive .col-subject strong { display: block; width: 100%; color: #111; }

	/* 구분(배지) 영역 */
	#responsive .col-type { order: -2; justify-content: flex-start; }
	#responsive .col-type::after { content: "수익 구분"; order: -1; font-weight: 600; color: #999; font-size: 13px; margin-right: auto; }
	#responsive .col-type::before { content: none !important; }

	/* 상태 영역 */
	#responsive .col-status { order: -1; margin-bottom: 5px; }

	/* 데이터 라벨링 */
	#responsive .list-item > div[data-label]::before { 
		content: attr(data-label); 
		font-weight: 600; 
		color: #999; 
		font-size: 13px;
		flex-shrink: 0;
	}

	/* 실지급액 강조 */
	#responsive .col-net { font-size: 15px; background: #fcfcfc; padding: 8px 5px !important; border-radius: 4px; }
}

/* 세금계산서 */
/* 기본 레이아웃 */
#taxinvoice { max-width: 1100px; margin: 0px auto; padding: 0; font-family: 'Pretendard', sans-serif; }
#taxinvoice .taxinvoice-list { background: #fff; border: 1px solid #e1e4e8; border-radius: 10px; overflow: hidden; }

/* PC 레이아웃 */
#taxinvoice .list-header { 
	display: flex; background: #f8f9fa; border-bottom: 1px solid #e1e4e8; 
	padding: 15px; font-weight: 600; text-align: center; font-size: 14px; color: #666; 
}
#taxinvoice .list-item { 
	display: flex; padding: 18px 15px; border-bottom: 1px solid #f1f3f5; 
	align-items: center; text-align: center; font-size: 14px; transition: background 0.2s; 
}
#taxinvoice .list-item:hover { background: #fafafa; }

/* 컬럼 너비 재설정 (증빙 제거 후 비율 조정) */
#taxinvoice .col-date    { width: 15%; color: #888; }
#taxinvoice .col-subject { width: 45%; text-align: left; padding: 0 15px; font-weight: 600; color: #333; }
#taxinvoice .col-amount  { width: 15%; text-align: right; }
#taxinvoice .col-tax     { width: 10%; text-align: right; color: #999; }
#taxinvoice .col-total   { width: 15%; text-align: right; }


/* 텍스트 스타일 */
#taxinvoice .period { display: block; font-size: 12px; color: #999; font-weight: normal; margin-top: 3px; }
#taxinvoice .total-price { color: #2563eb; font-weight: 700; }

/* 상태 배지 */
#taxinvoice .status { 
	font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 4px; 
	border: 1px solid #ddd; background: #fff; display: inline-block;
}
#taxinvoice .status.done { color: #2563eb; border-color: #2563eb; background: #eff6ff; }

/* 모바일 반응형 (768px 이하) */
@media (max-width: 768px) {
	#taxinvoice .list-header { display: none; }
	#taxinvoice .list-item { 
		flex-direction: column; align-items: flex-start; 
		padding: 20px 15px; gap: 10px; border-bottom: 8px solid #f8f9fa;
	}

	#taxinvoice .list-item > div { 
		width: 100%; text-align: right; display: flex; 
		justify-content: space-between; align-items: center; 
	}

	#taxinvoice .col-subject { 
		order: 1; padding: 0 0 12px 0 !important; border-bottom: 1px solid #eee; 
		margin-bottom: 5px; flex-direction: column; align-items: flex-start;
		width: 100%;
	}
	#taxinvoice .col-subject::before { content: none; }
	#taxinvoice .col-subject strong { font-size: 16px; }

	#taxinvoice .col-status { order: 2; margin-bottom: 5px; }
	
	#taxinvoice .col-total { 
		order: 3; background: #f8fafc; padding: 12px 10px !important; 
		border-radius: 6px; margin: 5px 0;
	}
	#taxinvoice .col-total .total-price { font-size: 16px; }

	#taxinvoice .col-date { order: 4; }
	#taxinvoice .col-amount { order: 5; }
	#taxinvoice .col-tax { order: 6; }

	#taxinvoice .list-item > div[data-label]::before { 
		content: attr(data-label); font-weight: 600; color: #999; font-size: 13px; 
	}
}

/* 점프관리 */
/* 기본 레이아웃 */
#jump-manage { max-width: 1100px; margin: 20px auto; padding: 0; font-family: 'Pretendard', sans-serif; color: #333; }

/* 상단 자산 요약 */
#jump-manage .asset-summary { display: flex; gap: 12px; margin-bottom: 25px; }
#jump-manage .asset-card { 
	flex: 1; background: #fff; border: 1px solid #e1e4e8; border-radius: 12px; 
	padding: 20px; display: flex; align-items: center; gap: 15px;
}
#jump-manage .asset-icon {
	width: 44px; height: 44px; border-radius: 10px;
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#jump-manage .asset-card.highlight .asset-icon { background-color: #eff6ff; color: #2563eb; }
#jump-manage .asset-card.coupon { border-color: #fecaca; }
#jump-manage .asset-card.coupon .asset-icon { background-color: #fef2f2; color: #ef4444; }
#jump-manage .asset-card .label { font-size: 13px; color: #888; }
#jump-manage .asset-card .value { font-size: 20px; font-weight: 800; color: #111; }

/* 리스트 컨테이너 */
#jump-manage .jump-list-wrap { background: #fff; border-top: 2px solid #333; }

/* 아이템 레이아웃 (PC) */
#jump-manage .list-item { 
	display: flex; padding: 25px 0; border-bottom: 1px solid #eee; 
	align-items: center; justify-content: space-between; gap: 30px;
}

#jump-manage .col-info { flex: 1; display: flex; align-items: flex-start; gap: 24px; }

/* 버튼 영역 (상하 배치 핵심) */
#jump-manage .col-btns { 
	width: 180px; 
	display: flex; 
	flex-direction: column; /* 세로 정렬 */
	gap: 8px; 
	flex-shrink: 0; 
}

/* 상품 이미지 (200x113 고정) */
#jump-manage .thumb-wrap { width: 200px; height: 113px; flex-shrink: 0; overflow: hidden; border-radius: 8px; border: 1px solid #eee; }
#jump-manage .thumb-wrap img { width: 100%; height: 100%; object-fit: cover;  }

/* 상품 상세 구성 */
#jump-manage .category-info { font-size: 13px; color: #9ca3af; margin-bottom: 6px; }
#jump-manage .prod-type { font-size: 11px; color: #2563eb; font-weight: 600; margin-right: 6px; border: 1px solid #2563eb; padding: 1px 4px; border-radius: 3px; }
#jump-manage .prod-name { font-weight: 700; color: #1f2937; font-size: 18px; display: block; margin-top: 5px; line-height: 1.4; }

/* 최근 점프일시 배지 */
#jump-manage .last-jump-time { 
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; color: #666; margin-top: 12px; 
	background: #f3f4f6; padding: 5px 12px; border-radius: 20px;
}
#jump-manage .last-jump-time::before { content: "최근 점프"; font-weight: 700; font-size: 11px; color: #4b5563; }

/* 버튼 스타일 */
#jump-manage .btn { 
	width: 100%; /* 너비 꽉 채움 */
	padding: 10px 0; 
	border-radius: 6px; 
	font-size: 13px; 
	font-weight: 600; 
	cursor: pointer; 
	border: 1px solid transparent; 
	transition: 0.2s;
}
#jump-manage .btn-mile { background: #2563eb; color: #fff; }
#jump-manage .btn-mile:hover { background: #1d4ed8; }
#jump-manage .btn-coupon { background: #fff; border-color: #d1d5db; color: #4b5563; }
#jump-manage .btn-coupon:hover { background: #f9fafb; border-color: #9ca3af; }

/* 모바일 반응형 (768px 이하) */
@media (max-width: 768px) {
	#jump-manage .asset-summary { flex-direction: column; gap: 10px; }
	
	#jump-manage .list-item { 
		flex-direction: column; align-items: flex-start; padding: 20px; 
		border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 15px;
	}
	#jump-manage .col-info { flex-direction: column; width: 100%; gap: 15px; }
	#jump-manage .thumb-wrap { width: 100%; height: auto; aspect-ratio: 200 / 113; }
	
	#jump-manage .prod-name { font-size: 16px; }
	#jump-manage .last-jump-time { width: 100%; justify-content: space-between; box-sizing: border-box; }

	#jump-manage .col-btns { width: 100%; margin-top: 10px; }
}

/* 컨시어지 문의 모달창 */
.complaint_layer {display:none;position:fixed;left:50%;top:50%;width:90%;max-width:480px;padding:40px;background:#fff;border-radius:15px;z-index:100;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
.complaint_layer .btn_cal_profit_close {display:block;position:absolute;right:40px;top:40px;background:none;border:none;}
.complaint_layer .btn_cal_profit_close i {font-size:20px;}
.complaint_layer h3 {display:block;margin:0 0 40px 0;font-size:20px;font-weight:600;text-align:left;}
.complaint_layer p {font-size:14px;}
.complaint_layer ul {margin:0 0 40px 0;}
.complaint_layer ul li {display:block;position:relative;margin:0 0 0 0;}
.complaint_layer ul li:last-child {margin:0;}
.complaint_layer ul li:last-child:after {display:block;position:absolute;right:15px;bottom:0;font-size:14px;line-height:50px;}
.complaint_layer ul li label {display:block;margin:0 0 8px 0;color:#666;font-size:12px;font-weight:300;}
.complaint_layer ul li .f_input {display:block;width:100%;height:50px;padding:0 10px 0 10px;font-size:15px;font-weight:300;line-height:48px;background:#fff;border:solid 1px #eee;border-radius:5px;}
.complaint_layer ul li p {font-size:14px;}
.complaint_layer .btn_confirm{text-align:center;}
.complaint_layer .btn_submit {
	display: block;
	margin:0px auto;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
    border: solid 1px #ddd;
    border-radius: 5px;
}

.complaint_layer .row {display:table-row; font-size:12px;}
.complaint_layer .row .cell {display:table-cell;width:25%;padding:5px 10px;font-size:12px;}
.complaint_layer .row .cell span {display: block;
    padding: 5px 8px;
	text-align:center;
    background: #eee;
    border-radius: 3px;
}
.complaint_layer .row .cell2 {display:table-cell;width:75%;padding:5px 10px;font-size:12px;line-height:150%;font-weight:normal !important;vertical-align:middle;}
.complaint_layer .w_div {padding:0 !important;}
.complaint_layer textarea {
    width: 100%;
    height: 250px !important;      /* 기본 높이 */
    line-height:150% !important;
	min-height: 100px;  /* 최소 높이 (이하로 안 줄어듬) */
    max-height: 300px;  /* 최대 높이 (이상으로 안 늘어남) */
    padding: 10px;
    box-sizing: border-box; /* 패딩이 높이에 영향을 주지 않도록 설정 */
}

  .badge { font-size: 12px; padding: 4px 10px; border-radius: 6px; color: #fff; font-weight: 600; background: #0ea5e9; }


  /* 1. 모달 기본창 너비 설정 */
#vod_content {
    position: relative;
    margin: 5% auto;
    padding: 0;
    width: 90%;
    max-width: 800px;
    background: #000;
    overflow: hidden; /* 모서리 삐져나옴 방지 */
}

/* 2. 동영상 컨테이너 (16:9 비율 유지) */
#my-vimeo-player {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%; 
    overflow: hidden;
    background: #000;
}

/* 3. 내부 iframe을 컨테이너에 꽉 채우기 */
#my-vimeo-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 모바일 전용 미세 조정 (상단 밀착형) */
@media (max-width: 768px) {
    .vod_layer {
        padding: 0 !important; /* 부모 레이어 여백 제거 */
    }

    #vod_content {
        width: 100%;     /* 모바일 가로 꽉 채우기 */
        margin: 0 auto;  /* 상단 마진 0으로 밀착 */
        max-width: none;
        border-radius: 0; /* 테두리 굴곡 제거하여 밀착감 상승 */
    }

    /* 닫기 버튼이 있다면 위치 재조정 (동영상 위로) */
    .close_btn_class { 
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 999;
        color: #fff;
    }
}


/* 마이페이지 검색창 */
 :root {
	--bg-dark: #1a3735;
	--btn-reset: #f8f9fa;
	--border-color: #ddd;
	--point-color: #ffeb3b;
}

/* [PC 버전] 가로 배치 */
.filter-group {
	display: flex;
	align-items: center;
	gap: 8px;	
	margin-bottom:20px;
}

.filter-group > * {
	height: 40px;
	border: 1px solid var(--border-color);
	border-radius: 6px;
	font-size: 14px;
	padding: 0 10px;
	box-sizing: border-box;
	outline: none;
}

/* 날짜 구분선 */
.filter-group .sep { border: none; padding: 0; display: flex; align-items: center; }

/* 검색창은 PC에서 유동적 */
.filter-group .search-input { flex: 1; min-width: 150px; }


/* 버튼 공통 스타일 */
.filter-group .btn {
    height: 40px;
    /* 1. 가로 길이를 직접 지정 (글자 수와 상관없이 일치됨) */
    width: 85px; 
    
    /* 2. 패딩을 제거하거나 좌우를 동일하게 설정 */
    padding: 0; 
    
    font-size: 14px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    
    /* 3. 중앙 정렬 유지 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* 4. 테두리 포함 크기 계산 */
    box-sizing: border-box; 
    transition: all 0.2s ease;
}

/* 조회 버튼 (이미지의 짙은 녹색 계열) */
.filter-group .btn-submit {
    background-color: #1a3735;
    color: #ffeb3b; /* 노란색 텍스트 */
    border: none;
}

/* 초기화 버튼 (이미지의 밝은 회색 계열) */
.filter-group .btn-reset {
    background-color: #f8f9fa;
    color: #333;
    border: 1px solid #ddd;
    margin-left: 4px; /* 버튼 사이 간격 */
}


/* 1. 모든 인풋의 너비를 부모 요소에 맞게 고정 */
.date-input {
  width: 120px; /* 또는 기존에 사용하던 px 값 */
  box-sizing: border-box; /* 패딩이 너비에 영향을 주지 않도록 설정 */
  height: 40px; /* 높이도 통일해주는 것이 좋습니다 */
  
  /* 2. 브라우저 기본 스타일 제거 (아이콘 공간 확보 등) */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  /* 3. 텍스트 정렬 및 여백 통일 */
  padding: 0 10px;
  display: inline-block;
  vertical-align: middle;
}

/* 4. 데이트 피커 아이콘이 공간을 차지해 글자가 밀리는 것 방지 (선택 사항) */
input[type="date"]::-webkit-calendar-picker-indicator {
  margin: 0;
  padding: 0;
  cursor: pointer;
}


/* [모바일 버전] 768px 이하 */
@media (max-width: 768px) {
	.filter-group {
		display: grid;
		grid-template-columns: 1fr 1fr; /* 2열 구조 */
		gap: 10px;
	}

	/* 한 줄 전체 차지하는 요소들 */
	.filter-group select, .search-input {
		grid-column: span 2;
	}

	/* 날짜 입력칸 (한 줄에 2개) */
	.filter-group .date-input {
		grid-column: span 1;
	}

	/* 버튼들을 한 줄에 나란히 (50%씩) */
	.filter-group .btn {
        width: auto; /* 고정 너비 해제 */
        flex: 1;    /* 부모 컨테이너의 절반씩 자동으로 채움 */
        grid-column: span 1;
    }

	.date-input { width: 100%;}

	.filter-group .sep { display: none; } /* 모바일에서 물결 숨김 */
}

/* 리뷰등록 */

/* 4. 별점 리스트 (3개 항목) */
.review-rating-list {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 12px;
    margin-bottom: 20px;
}

.rating-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    border-bottom: 1px solid #eee;
}

.rating-item:last-child { border-bottom: none; }

.rating-title {
    font-size: 14px;
    font-weight: 600;
    color: #444;
}

/* 별점 로직 (라디오 버튼 역순 활용) */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
}

.star-rating input { display: none; }

.star-rating label {
    font-size: 1.6rem; /* 터치하기 적당한 크기 */
    color: #ddd;
    cursor: pointer;
    padding: 0 2px;
    transition: transform 0.1s ease-in-out;
}

.star-rating label:active { transform: scale(1.3); }

.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #ffc107; /* 황금색 별 */
}

/* 5. 리뷰 본문 텍스트 영역 */
.review-text-area {
    position: relative;	
}

.review-text-area textarea {
    display: block;
    width: 100% !important;
    height: 140px !important;
    padding: 15px !important; /* 영문으로 정확히 입력 */
    border: 1px solid #ddd !important;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.6;
    resize: none;
    box-sizing: border-box !important; /* 패딩이 영역 안으로 계산되게 함 */
    background: #fff;
}

.review-text-area textarea:focus {
    outline: none;
    border-color: #007bff;
    background: #fdfdfd;
}

.char-count {
    text-align: right;
    font-size: 12px;
    color: #999;
    margin-top: 6px;
}

/* 6. 이미지 등록 영역 */
.image-upload-box {
    border: 2px dashed #ccc;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    background: #fafafa;
    transition: background 0.2s;
}

.image-upload-box:hover { background: #f0f7ff; border-color: #007bff; }

.upload-label {
    cursor: pointer;
    color: #777;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.upload-label i { font-size: 28px; color: #555; }

.preview-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.preview-item {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #eee;
}

/* 7. 제출 버튼 */
.btn_confirm { margin-top: 10px; }

.btn_submit {
    width: 100%;
    padding: 16px;
    background: #222; /* 현대적인 블랙 톤 */
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn_submit:hover { opacity: 0.9; }

/* 8. 우측 상단 닫기 버튼 */
.btn_cal_profit_close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 26px;
    color: #bbb;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.btn_cal_profit_close:hover { color: #333; }

/* 9. 반응형 미디어 쿼리 */
@media screen and (max-width: 480px) {
    .complaint_layer {
        width: 100%;
        height: 100%; /* 모바일에서는 전체 화면 대응 가능 */
        max-height: 100vh;
        border-radius: 0; /* 전체 화면 시 둥근 모서리 제거 선택 가능 */
        padding: 40px 20px;
    }

    .rating-item {
        padding: 12px 10px;
    }

    .rating-title { font-size: 13px; }

    .star-rating label { font-size: 1.4rem; }
    
    .btn_cal_profit_close { top: 15px; right: 15px; }
}


/* 글자 수 표시 스타일 */
.char-count {
    text-align: right;
    font-size: 12px;
    color: #888;
    margin-top: 5px;
}
.char-count span {
    color: #007bff; /* 포인트 색상 */
    font-weight: bold;
}

/* 이미지 미리보기 컨테이너 */
.preview-container {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.preview-item {
    width: 70px;
    height: 70px;
    object-fit: cover; /* 이미지 비율 유지하며 꽉 채움 */
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}


/* 기본 활성 상태 버튼 */
.btn_submit {
    width: 100%;
    padding: 16px;
    background: #222; /* 검정색 또는 포인트 컬러 */
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

/* 비활성화 상태 버튼 스타일 */
.btn_submit:disabled {
    background: #ccc !important; /* 회색으로 변경 */
    color: #888 !important;
    cursor: not-allowed; /* 마우스 커서 변경 */
    opacity: 0.7;
}


/* 사진 첨부 전체 감싸는 영역 */
.image-upload-wrapper {
    background: #f8fbff; /* 아주 연한 푸른빛 배경 */
    border-radius: 12px;
    padding: 15px;
    border: 1px solid #e1e9f5;
}

/* 메인 업로드 박스 */
.image-upload-box {
    background: #ffffff;
    border: 2px dashed #007bff; /* 포인트 컬러 점선 */
    border-radius: 10px;
    transition: all 0.3s ease;
}

.image-upload-box:hover {
    background: #f0f7ff;
    border-style: solid; /* 호버 시 실선으로 변경 */
}

/* 라벨 내부 정렬 */
.upload-label {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    gap: 15px;
}

/* 카메라 아이콘 원형 배경 */
.icon-circle {
    width: 45px;
    height: 45px;
    background: #007bff;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}

/* 텍스트 그룹 */
.text-group {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.main-text {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

.sub-text {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

/* 미리보기 그리드 시스템 */
.preview-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3열 고정 */
    gap: 12px;
    margin-top: 15px;
}

.preview-item-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* 정사각형 유지 */
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.preview-item {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지 꽉 채움 */
    transition: transform 0.3s;
}

.preview-item:hover {
    transform: scale(1.1);
}

/* 반응형 모바일 최적화 */
@media screen and (max-width: 480px) {
    .upload-label {
        padding: 12px 15px;
    }
    .main-text { font-size: 15px; }
    .icon-circle { width: 40px; height: 40px; }
}

/* 부모 컨테이너에 relative가 반드시 있어야 합니다 */
.preview-item-wrapper {
    position: relative !important; 
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: #eee;
}

.preview-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 이미지 미리보기 컨테이너 중복 방지 */
#image-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 15px;
}

/* 이미지 삭제 버튼 (빨간 원) */
.btn-del-img {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    width: 22px !important;
    height: 22px !important;
    background: #ff0000 !important; /* 배경 빨간색 */
    color: #ffffff !important; /* X 글자 하얀색 */
    border-radius: 50% !important;
    border: 1px solid #fff !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 14px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 10;
    padding: 0;
}

/* 아이콘 폰트와 겹치지 않게 처리 */
.btn-del-img i {
    font-size: 12px;
    pointer-events: none; /* 클릭 방해 방지 */
}

/* 이미지 한 개의 크기를 조절 (6개일 때 최적화) */
.review-img-item {
    width: calc(33.333% - 10px); /* 1줄에 3개씩 배치 */
    aspect-ratio: 1 / 1; /* 정정사각형 유지 */
    position: relative;
}

.review-img-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}


/* 사진 첨부 박스 컨테이너 */
.photo-upload-btn {
    display: flex; /* 가로 배치 */
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 */
    gap: 15px; /* 아이콘과 텍스트 사이 간격 */
    padding: 15px 20px;
    height: 80px; /* 높이를 확 줄임 */
    border: 2px dashed #007bff;
    border-radius: 12px;
    background-color: #f0f7ff;
    cursor: pointer;
}

/* 카메라 아이콘 조절 */
.photo-upload-btn .icon-camera {
    width: 40px;
    height: 40px;
    flex-shrink: 0; /* 크기 유지 */
}

/* 텍스트 영역 */
.photo-upload-btn .text-group {
    text-align: left; /* 왼쪽 정렬 */
}

.photo-upload-btn .text-main {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.photo-upload-btn .text-sub {
    font-size: 13px;
    color: #888;
}
/* 스터디룸 예약현황 */
.res-list-container { width: 100%; margin: 20px 0; font-family: 'Pretendard', sans-serif; }

/* 테이블 기본 스타일 */
.res-table { width: 100%; border-collapse: collapse; background: #fff; border-top: 2px solid #333; }
.res-table th { background: #f8f9fa; padding: 15px 10px; font-size: 14px; border-bottom: 1px solid #ddd; color: #555; }
.res-table td { padding: 15px 10px; text-align: center; border-bottom: 1px solid #eee; font-size: 14px; color: #333; }

/* 텍스트 강조 */
.res-od-id { color: #888; font-family: 'Verdana'; font-size: 12px; }
.res-name { font-weight: 600; color: #222; }
.res-price { font-weight: 700; color: #e74c3c; }

/* 진행상황 배지 */
.status-badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.status-done { background: #e7f5ff; color: #1c7ed6; } /* 완료: 파란색 */
.status-cancel { background: #fff5f5; color: #fa5252; } /* 취소: 빨간색 */

/* [핵심] 모바일 반응형 (카드형 변환) */
@media screen and (max-width: 800px) {
    .res-table, .res-table thead, .res-table tbody, .res-table th, .res-table td, .res-table tr { 
        display: block; 
    }
    
    /* 헤더 숨기기 */
    .res-table thead tr { position: absolute; top: -9999px; left: -9999px; }
    
    .res-table tr { 
        margin-bottom: 15px; border: 1px solid #ddd; border-radius: 10px; 
        padding: 10px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    
    .res-table td { 
        border: none; position: relative; padding-left: 40% !important; 
        text-align: right !important; min-height: 35px; line-height: 20px;
        border-bottom: 1px dashed #f0f0f0;
    }
    
    .res-table td:last-child { border-bottom: none; }

    /* data-label 속성으로 항목명 표시 */
    .res-table td:before { 
        content: attr(data-label); 
        position: absolute; left: 15px; width: 35%; 
        text-align: left; font-weight: 700; color: #888; font-size: 13px;
    }

    .res-name { font-size: 16px; color: #3498db; }
}

/* 모달 배경 */
.res-modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); z-index: 9999; align-items: center; justify-content: center;
}

/* 모달 본체 */
.res-modal-content {
    background: #fff; width: 90%; max-width: 400px; border-radius: 12px;
    overflow: hidden; animation: fadeIn 0.3s ease;
}

.res-modal-header { padding: 15px 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.res-modal-header h3 { margin: 0; font-size: 16px; color: #333; }
.close-modal { background: none; border: none; font-size: 24px; cursor: pointer; color: #aaa; }

.res-modal-body { padding: 20px; }
.detail-info-list { list-style: none; padding: 0; margin: 0; }
.detail-info-list li { padding: 10px 0; border-bottom: 1px dashed #eee; font-size: 14px; display: flex; justify-content: space-between; }
.detail-info-list li strong { color: #888; }

.cancel-notice { margin-top: 15px; font-size: 12px; color: #e74c3c; background: #fff5f5; padding: 10px; border-radius: 5px; }

.res-modal-footer { padding: 15px; display: flex; gap: 10px; }
.res-modal-footer button { flex: 1; height: 45px; border-radius: 6px; font-weight: 600; cursor: pointer; border: none; }
.btn-cancel-req { background: #ff6b6b; color: #fff; }
.btn-close-modal { background: #eee; color: #666; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }



/* 기본 배너 스타일 */
.main-banner {
    position: relative;
    width: 100%;
    height: 350px; /* PC 기준 높이 */
    background: url('../img/lou_bg.png') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
}

/* 배경을 살짝 어둡게 하여 글자 가독성 높임 (Overlay) */
.main-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.2); /* 이미지에 따라 조절 */
}

.banner-content {
    position: relative;
    z-index: 1;
    padding: 0 20px;
}

.banner-title {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    letter-spacing: -1px;
	color:#fff;
}

.banner-text {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 500;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    word-break: keep-all; /* 단어 단위 줄바꿈으로 깔끔하게 유지 */
}

/* 📱 모바일 반응형 (768px 이하) */
@media (max-width: 768px) {
    .main-banner {
        height: 280px; /* 모바일에서 높이 축소 */
    }

    .banner-title {
        font-size: 32px; /* 타이틀 크기 축소 */
        margin-bottom: 15px;
    }

    .banner-text {
        font-size: 15px; /* 본문 크기 축소 */
        line-height: 1.5;
        padding: 0 10px;
    }

    /* 모바일에서 강제 줄바꿈 해제 또는 최적화 */
    .banner-text br {
        display: none; /* 화면이 좁을 땐 브라우저 자동 줄바꿈 사용 */
    }
}


/* 파트너십 문의 컨테이너 */
.partnership_con {
   
    margin: 0 auto;
    padding: 30px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
    font-family: 'Pretendard', -apple-system, sans-serif;
    box-sizing: border-box;
}

/* 리스트 레이아웃 */
.partnership_con ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* 세로 방향 정렬 */
    gap: 25px; /* 항목 사이 간격을 넉넉하게 조정 */
}

/* 모든 항목 100% 너비 유지 */
.partnership_con li {
    width: 100% !important;
    box-sizing: border-box;
}

/* 입력 필드 그룹 */
.partnership_con .w_div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 라벨 스타일 */
.partnership_con .label {
    font-weight: 700;
    font-size: 15px;
    color: #333;
    display: block;
}

/* 입력창 및 텍스트영역 스타일 */
.partnership_con .f_input, 
.partnership_con textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    background-color: #fff;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* 포커스 시 효과 */
.partnership_con .f_input:focus, 
.partnership_con textarea:focus {
    border-color: #000;
    outline: none;
    background-color: #fafafa;
}

.partnership_con textarea {
    min-height: 250px;
    line-height: 1.6;
    resize: vertical; /* 사용자가 높이 조절 가능 */
}

/* 개인정보 동의 영역 */
.partnership_con .refer2 {
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #eee;
}

.partnership_con .chk_box label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.partnership_con .red {
    color: #ff3b30;
    font-weight: 700;
}

/* 버튼 영역 */
.partnership_con .btn_confirm {
    margin-top: 40px;
    text-align: center;
}

.partnership_con .btn_submit {
    width: 100%;
    max-width: 320px;
    height: 60px;
    background: #000;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
}

.partnership_con .btn_submit:hover {
    background: #333;
}

.partnership_con .btn_submit:active {
    transform: scale(0.98);
}

/* 모바일 전용 여백 조정 */
@media (max-width: 480px) {
    .partnership_con {
        margin: 10px;
        padding: 20px 15px;
        border: none;
        box-shadow: none;
    }
}

.terms_layer {display:none;position:fixed;left:50%;top:50%;width:70%;max-width:90%; max-height:90%;padding:20px;background:#fff;border-radius:15px;z-index:100;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}

.terms_layer .btn_cal_profit_close {display:block;position:absolute;right:40px;top:40px;background:none;border:none;}
.terms_layer .btn_cal_profit_close i {font-size:20px;}
.terms_layer h3 {display:block;margin:0 0 40px 0;font-size:20px;font-weight:600;text-align:left;}
.terms_layer #layer_cont {
	flex: 1;               /* 남은 공간을 꽉 채움 */
    max-height: 70vh;
	overflow-y: auto;      /* 내용이 많으면 자동으로 세로 스크롤 생성 */
    overflow-x: hidden;    /* 가로 스크롤 방지 */
    margin-top: 15px;
    padding-right: 10px;   /* 스크롤바와 내용 사이 여백 */
    
    /* 부드러운 스크롤 (iOS 등에서 유용) */
    -webkit-overflow-scrolling: touch;
}

.terms_layer table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; border-top: 2px solid var(--primary-blue); }
.terms_layer table th { vertical-align: middle; text-align:center; background: #eff6ff; padding: 12px; border: 1px solid var(--border-color); text-align: center; color: var(--primary-blue); }
.terms_layer table td { vertical-align: middle; padding: 12px; border: 1px solid var(--border-color); }


.terms_layer ul {margin:0 0 40px 0;}
.terms_layer ul li {display:block;position:relative;margin:0 0 40px 0;}
.terms_layer ul li:last-child {margin:0;}
.terms_layer ul li:last-child:after {display:block;position:absolute;right:15px;bottom:0;font-size:14px;line-height:50px;}
.terms_layer ul li label {display:block;margin:0 0 8px 0;color:#666;font-size:12px;font-weight:300;}
.terms_layer ul li .f_input {display:block;width:100%;height:50px;padding:0 10px 0 10px;font-size:15px;font-weight:300;line-height:48px;background:#fff;border:solid 1px #eee;border-radius:5px;}
.terms_layer ul li p {font-size:14px;}
.terms_layer .btn_confirm{text-align:center;}
.terms_layer .btn_submit {
	display: block;
	margin:0px auto;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
    border: solid 1px #ddd;
    border-radius: 5px;
}

.terms_layer .row {display:table-row; font-size:12px;}
.terms_layer .row .cell {display:table-cell;width:25%;padding:5px 10px;font-size:12px;}
.terms_layer .row .cell span {display: block;
    padding: 5px 8px;
	text-align:center;
    background: #eee;
    border-radius: 3px;
}
.terms_layer .row .cell2 {display:table-cell;width:75%;padding:5px 10px;font-size:12px;line-height:150%;font-weight:normal !important;vertical-align:middle;}