html, body {overflow-x:hidden;}

/* splash-box */
.splash-box {position:fixed; left:50%; top:0; width:100%; height:100%; max-width:500px; background:var(--color-active2); transform:translateX(-50%); display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center;}
.splash-box img {display:block; width:72px; margin:0 auto;}
.splash-box h1 {width:100%; margin:16px 0 0; text-align:center; font-size:24px; font-weight:bold; color:var(--color-white);}
.splash-box h2 {width:100%; margin:8px 0 0; text-align:center; font-size:20px; font-weight:600; color:var(--color-white); opacity:0.5;}

/* logo-box */
.logo-box {margin:0 0 32px;}
.logo-box img {display:block; margin:0 auto; width:96px;}
.logo-box p {padding:4px 0; margin:12px 0 0; text-align:center; font-size:16px; font-weight:600; color:#717FA5; word-break:keep-all;}

/* logo-title-box */
.logo-title-box {margin:32px 0;}
.logo-title-box:before {display:block; content:""; width:123px; height:98px; margin:0 auto 16px; background:url('../images/icon_logo_title_card.webp') no-repeat center / cover;}
.logo-title-box.main:before {width:169px; height:132px; background-image:url('../images/img_logo_title2.webp');}
.logo-title-box h2 img {display:block; margin:0 auto; width:147px;}
.logo-title-box p {margin:24px 0 0; text-align:center; font-size:16px; word-break:keep-all;}
.logo-title-box p b {font-size:16px; font-weight:600; color:var(--color-active);}
.logo-title-box a {width:140px; height:48px; border-radius:16px; font-size:16px; color:#fff; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:16px auto 0; background:var(--color-active); color:#fff;}

/* button-box */
.button-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.button-box .btn {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; flex:1; min-width:0; height:48px; border-radius:16px; font-size:16px;}
.button-box .btn-sm {font-size:14px; font-weight:400; padding:0 8px; flex:none; border-radius:6px; height:29px;}
.button-box .btn-round {border-radius:50px;}
.button-box .btn-more:after {}
.button-box .btn-white {border:1px solid rgba(0,0,0,0.3); color:#272727; background:#fff;}
.button-box .btn-white.ft-active {color:var(--color-active) !important; border:0;}
.button-box .btn-red {color:#fff;}
.button-box .btn-active {color:var(--color-white);}
.button-box .btn-active4 {background:#46547B; color:#fff;}
.button-box .btn-lightgray-outline {color:rgba(0,0,0,0.3); border:1px solid rgba(0,0,0,0.3);}
.button-box .btn.disabled {background:#E7E7E7 !important; border-color:#E7E7E7 !important; color:#979797 !important;}
.button-box .btn-active-outline.disabled {background:#fff !important;}

.button-box--support {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.button-box--support a {
    flex-shrink: 0;
}

/* input-box */
.input-box {border-bottom:1px solid rgba(0,0,0,0.3); padding:8px 0;}
.input-box strong {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 0 2px; font-size:14px; font-weight:bold; width:100%;}
.input-box strong .toggle {width:24px; height:24px; font-size:0; background:url('../images/icon_arrow_down.svg') no-repeat center / cover; transform:rotate(180deg);}
.input-box strong b {font-size:12px; font-weight:600; color:var(--color-active);}
.input-box .inner {display:flex; flex-wrap:wrap; align-items:center; flex:1; min-width:0;}
.input-box .inner input {display:block; width:100%; font-size:16px; font-weight:600; flex:1; min-width:0;}
.input-box .inner input::placeholder {color:rgba(0,0,0,0.5);}
.input-box .inner em {font-size:16px; margin:0 0 0 10px;}
.input-box .inner .password {width:24px; height:24px; margin:0 0 0 10px; background:url('../images/icon_eye_on.svg') no-repeat center / cover; font-size:0;}
.input-box .inner .date {width:24px; height:24px; margin:0 0 0 10px; background:url('../images/icon_date.svg') no-repeat center / cover; font-size:0;}
.input-box .inner .button-box .btn.disabled {background:rgba(0,0,0,0.03) !important;}
.input-box.password-on > .inner .password {background-image:url('../images/icon_eye_off.svg');}
.input-box.input-icon {position:relative; padding:8px 0 8px 32px;}
.input-box.input-icon:before {position:absolute; left:0; top:50%; transform:translateY(-50%); display:block; content:""; width:24px; height:24px; margin:0 8px 0 0; background-size:cover; background-position:center;}
.input-box.input-icon.input-id:before {background-image:url('../images/icon_user.svg');}
.input-box.input-icon.input-pw:before {background-image:url('../images/icon_lock.svg');}
.input-box.input-icon.input-name:before {background-image:url('../images/icon_name.svg');}
.input-box.input-icon.input-phone:before {background-image:url('../images/icon_phone.svg');}
.input-box.input-icon.input-company:before {background-image:url('../images/icon_company.svg');}
.input-box.input-icon.input-company-number:before {background-image:url('../images/icon_company_number.svg');}
.input-box.focus {border-color:var(--color-active);}
.input-box.border {border:1px solid rgba(0,0,0,0.3); padding:8px;}

/* select-box */
.select-box {border-bottom:1px solid rgba(0,0,0,0.3); padding:8px 0;}
.select-box strong {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 0 2px; font-size:14px; font-weight:bold; width:100%;}
.select-box strong b {font-size:12px; font-weight:600; color:var(--color-active);}
.select-box > .inner {display:flex; flex-wrap:wrap; align-items:center; flex:1; min-width:0;}
.select-box > .inner select {display:block; padding:0 30px 0 0; width:100%; font-size:16px; font-weight:600; flex:1; min-width:0; color:rgba(0,0,0,0.5); background:url('../images/icon_select.svg') no-repeat right center / 24px;}
.select-box.border {border:1px solid rgba(0,0,0,0.3); border-radius:4px; padding:8px;}

/* file-box */
.file-box {display:flex; flex-wrap:wrap; align-items:center; border-bottom:1px solid rgba(0,0,0,0.3); padding:8px 0;}
.file-box:before {display:block; content:""; width:24px; height:24px; margin:0 8px 0 0; background:url('../images/icon_clip.svg') no-repeat center / cover;}
.file-box > .inner {flex:1; min-width:0;}
.file-box > .inner strong {width:100%; display:block; margin:0 0 2px; font-size:14px; font-weight:bold;}
.file-box > .inner div {display:flex; flex-wrap:wrap; align-items:center;}
.file-box > .inner div .file-name {flex:1; min-width:0;}
.file-box > .inner div .file-name p {font-size:16px; font-weight:600; color:rgba(0,0,0,0.5); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.file-box > .inner div .file-name.success p {color:#000;}
.file-box > .inner div .file-select {margin:0 0 0 10px; position:relative; min-height:29px;}
.file-box > .inner div .file-select input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.file-box > .inner div .file-select .delete {display:none; font-size:0; width:20px; height:20px; background:url('../images/icon_delete.svg') no-repeat center / cover;}
.file-box > .inner div .file-name.success ~ .file-select input {display:none;}
.file-box > .inner div .file-name.success ~ .file-select label {display:none;}
.file-box > .inner div .file-name.success ~ .file-select .delete {display:block;}
.file-box > .inner div .file-select input[type="file"] {
    display: none; /* 기본 버튼 숨김 */
}

.file-box > .inner div .file-select label {
    cursor: pointer; /* 진짜 클릭 영역 */
}
/* file-list-box */
.file-list-box a {display:flex; flex-wrap:wrap; align-items:center; margin:0 0 16px;}
.file-list-box a:last-of-type {margin:0;}
.file-list-box a p {flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px;}
.file-list-box a:before {display:inline-block; content:""; width:24px; height:24px; margin:0 8px 0 0; background:url('../images/icon_clip.svg') no-repeat center / cover;}

/* radio-box */
.radio-box {position:relative; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center;}
.radio-box input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.radio-box label {display:flex; flex-wrap:wrap; align-items:center; font-size:16px; color:rgba(0,0,0,0.5); flex:1; min-width:0;}
.radio-box label:before {display:block; content:""; width:24px; height:24px; margin:0 8px 0 0; background:url('../images/icon_radio.svg') no-repeat center / cover;}
.radio-box input:checked ~ label:before {background-image:url('../images/icon_radio_on.svg');}
.radio-box a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:21px; border-radius:6px; border:1px solid #979797; color:#979797; padding:0 8px;}

/* check-box */
.check-box {position:relative; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center;}
.check-box input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.check-box label {display:flex; flex-wrap:wrap; align-items:center; font-size:16px; color:rgba(0,0,0,0.5); flex:1; min-width:0;}
.check-box label:before {display:block; content:""; width:24px; height:24px; margin:0 8px 0 0; background:url('../images/icon_check.svg') no-repeat center / cover;}
.check-box input:checked ~ label:before {background-image:url('../images/icon_check_on.svg');}
.check-box a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:21px; border-radius:6px; border:1px solid #979797; color:#979797; padding:0 8px;}

/* check-total-box */
.check-total-box .total-head {border-bottom:1px solid rgba(0,0,0,0.3); padding:4px 0 8px; margin:0 0 8px;}
.check-total-box .check-box label {color:#000;}
.check-total-box .check-box label:before {width:28px; height:28px;}

/* member-check-box */
.member-check-box {padding:8px 0;}
.member-check-box ul li {position:relative; margin:0 0 32px;}
.member-check-box ul li:last-of-type {margin:0;}
.member-check-box ul li input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.member-check-box ul li label {display:flex; flex-wrap:wrap; align-items:center; border:1px solid rgba(0,0,0,0.3); padding:16px;}
.member-check-box ul li label:before {display:block; content:""; width:32px; height:32px; background-size:cover; background-position:center;}
.member-check-box ul li label > div {flex:1; min-width:0; padding:0 0 0 16px;}
.member-check-box ul li label > div strong {font-size:18px; font-weight:bold;}
.member-check-box ul li label > div p {margin:8px 0 0; font-size:14px; color:rgba(0,0,0,0.5);}
.member-check-box ul li input:checked ~ label {border-color:rgba(60,129,241,0.5); background:rgba(60,129,241,0.1);}
.member-check-box ul li:nth-of-type(1) label:before {background-image:url('../images/icon_member_check_01.svg');}
.member-check-box ul li:nth-of-type(2) label:before {background-image:url('../images/icon_member_check_02.svg');}

/* link-box */
.link-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.link-box ul {display:flex; flex-wrap:wrap; align-items:center;}
.link-box ul li {display:flex; flex-wrap:wrap; align-items:center;}
.link-box ul li:after {display:inline-block; content:""; margin:0 10px; width:1px; height:10px; background:rgba(0,0,0,0.5);}
.link-box ul li:last-of-type:after {display:none;}
.link-box ul li a {font-size:16px; color:rgba(0,0,0,0.5);}

/* message-box */
.message-box {display:none; flex-wrap:wrap; align-items:center; margin:4px 0 0;}
.message-box p {font-size:12px; color:rgba(0,0,0,0.5); word-break:keep-all; flex:1; min-width:0;}
.message-box.warn:before {display:inline-block; content:""; width:18px; height:18px; margin:0 4px 0 0; background:url('../images/icon_warning.svg') no-repeat center / cover;}
.message-box.warn p {color:#EF4444;}
.message-box.success:before {display:inline-block; content:""; width:18px; height:18px; margin:0 4px 0 0; background:url('../images/icon_success.svg') no-repeat center / cover;}
.message-box.success p {color:#008000;}
.message-box.check:before {display:inline-block; content:""; width:18px; height:18px; margin:0 4px 0 0; background:url('../images/icon_success_check.svg') no-repeat center / cover;}
.message-box.check p {color:var(--color-active);}
.message-box.notice:before {display:inline-block; content:""; width:18px; height:18px; margin:0 4px 0 0; background:url('../images/icon_success_notice.svg') no-repeat center / cover;}
.message-box.notice p {color:var(--color-active);}
.message-box.active {
    display: flex !important;
}

/* title-box */
.title-box {padding:8px 0 16px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.title-box h1 {font-size:20px; font-weight:800; text-align:center; width:100%;}
.title-box h1 b {font-size:20px; font-weight:800; color:var(--color-active);}
.title-box h2 {font-size:14px; font-weight:bold;}
.title-box h2.tc {font-size:16px; font-weight:600; width:100%;}
.title-box h2.lg {font-size:16px; font-weight:bold;}
.title-box h2.title-icon {display:flex; flex-wrap:wrap; align-items:center;}
.title-box h2.title-icon:before {width:24px; height:24px; margin:0 4px 0 0; content:""; background-size:cover; background-position:center;}
.title-box h2.title-basic:before {background-image:url('../images/icon_title_basic.svg');}
.title-box h2.title-company:before {background-image:url('../images/icon_title_company.svg');}
.title-box h2.title-person:before {background-image:url('../images/icon_title_person.svg');}
.title-box h2.title-price:before {background-image:url('../images/icon_title_price.svg');}
.title-box h2.title-file:before {background-image:url('../images/icon_clip.svg');}
.title-box p {margin:8px 0 0; text-align:center; font-size:14px; color:rgba(0,0,0,0.5); word-break:keep-all; width:100%;}
.title-box .update {display:flex; flex-wrap:wrap; align-items:center; font-size:14px; font-weight:600; color:var(--color-active);}
.title-box .update:after {display:block; content:""; width:20px; height:20px; margin:0 0 0 4px; background:url('../images/icon_arrow_right.svg') no-repeat center / cover; filter:var(--filter-active-100);}

/* text-box */
.text-box p {font-size:14px; word-break:keep-all;}
.text-box p b {font-size:14px; font-weight:600; color:var(--color-active);}
.text-box ul li {margin:0 0 10px; padding:0 0 0 15px; color:rgba(0,0,0,0.5); word-break:keep-all; font-size:12px; position:relative;}
.text-box ul li:last-of-type {margin:0;}
.text-box ul li:before {position:absolute; left:5px; top:6.5px; width:3px; height:3px; background:rgba(0,0,0,0.5); border-radius:50%; content:"";}

/* text-agree-box */
.text-agree-box ul {padding:0 0 0 15px;}
.text-agree-box ul li {list-style:none; font-size:13px; margin:0 0 5px; color:#666;}
.text-agree-box ul li:last-of-type {margin:0;}

/* text-check-box */
.text-check-box ul li {display:flex; flex-wrap:wrap; align-items:center; margin:0 0 16px;}
.text-check-box ul li:last-of-type {margin:0;}
.text-check-box ul li:before {display:block; content:""; width:20px; height:20px; margin:0 4px 0 0; background:url('../images/icon_text_check.svg') no-repeat center / cover;}
.text-check-box ul li p {flex:1; min-width:0; font-size:14px; color:#46547B; word-break:keep-all;}

/* text-info-box */
.text-info-box {border-radius:4px; border:1px solid rgba(0,0,0,0.3); background:rgba(0,0,0,0.03); padding:16px;}
.text-info-box ul li {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; margin:0 0 8px;}
.text-info-box ul li:last-of-type {margin:0;}
.text-info-box ul li b {font-size:14px; color:rgba(0,0,0,0.5);}
.text-info-box ul li p {font-size:14px; font-weight:bold; flex:1; min-width:0; padding:0 0 0 10px; text-align:right;}
.text-info-box.no-bg {border-radius:0; border:0; padding:0; background:none;}

/* text-detail-box */
.text-detail-box > ul > li {margin:0 0 16px;}
.text-detail-box > ul > li:last-of-type {margin:0;}
.text-detail-box > ul > li > strong {display:block; font-size:12px; font-weight:600; color:rgba(0,0,0,0.5);}
.text-detail-box > ul > li > div p {font-size:16px; font-weight:bold;}
.text-detail-box > ul > li > div p a {font-size:16px; font-weight:bold;}

/* text-guide-box */
.text-guide-box > ul > li {margin:0 0 16px;}
.text-guide-box > ul > li:last-of-type {margin:0;}
.text-guide-box > ul > li > p {position:relative; font-size:14px; color:#46547B; word-break:keep-all; padding:0 0 0 14px;}
.text-guide-box > ul > li > p:before {position:absolute; left:0; top:3px; width:6px; height:13px; border-radius:2px; background:#E0E8FF; content:"";}

/* text-blue-box */
.text-blue-box {border:1px solid rgba(60,129,241,0.3); background:#F6F8FF; border-radius:8px; padding:8px 8px 8px 12px;}
.text-blue-box ul li {display:flex; flex-wrap:wrap; font-size:12px; word-break:keep-all; margin:0 0 4px;}
.text-blue-box ul li:last-of-type {margin:0;}
.text-blue-box ul li:before {display:inline-block; content:""; width:3px; height:3px; border-radius:50%; background:#000; margin:0 5px 0 0; position:relative; top:8px;}
.text-blue-box ul li p {font-size:12px; word-break:keep-all; flex:1; min-width:0;}
.text-blue-box ul li b {font-size:12px; font-weight:600; color:var(--color-active);}

/* result-box */
.result-box {position:fixed; padding:0 16px 64px; left:50%; top:0; width:100%; height:100%; transform:translateX(-50%); max-width:500px; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center;}
.result-box strong {width:100%; display:block; text-align:center; font-size:20px; font-weight:bold; word-break:keep-all;}
.result-box p {margin:16px 0 0; width:100%; text-align:center; color:rgba(0,0,0,0.5); font-size:16px;}
.result-box p b {font-size:16px; font-weight:bold; color:var(--color-active);}
.result-box a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:16px 0 0; font-size:16px; color:var(--color-active);}
.result-box.success:before {display:block; content:""; width:128px; height:128px; margin:0 auto 32px; background:url('../images/icon_result_success.webp') no-repeat center / cover;}
.result-box.payment:before {display:block; content:""; width:128px; height:128px; margin:0 auto 32px; background:url('../images/icon_result_payment.webp') no-repeat center / cover;}

/* result-error-box */
.result-error-box {border:1px solid #EF4444; border-radius:8px; background:rgba(239,68,68,0.05); width:100%; padding:16px; margin:16px 0 0;}
.result-error-box p {text-align:center; font-size:16px; word-break:keep-all; margin:0; color:#EF4444;}
.result-error-box p:before {display:block; content:""; width:20px; height:20px; margin:0 auto 4px; background:url('../images/icon_warning.svg') no-repeat center / cover;}
.result-error-box p b {font-size:16px; color:#ef4444; font-weight:600;}

/* result-detail-box */
.result-detail-box {width:100%; margin:16px 0 0; padding:16px 32px;}
.result-detail-box h3 {text-align:center; border-bottom:1px solid rgba(113,127,165,0.3); padding:0 0 4px; margin:0 0 12px; font-size:14px; font-weight:600; color:#46547B;}
.result-detail-box ul li {margin:0 0 8px; display:flex; flex-wrap:wrap; justify-content:space-between;}
.result-detail-box ul li:last-of-type {margin:0;}
.result-detail-box ul li b {font-size:14px; color:#717FA5;}
.result-detail-box ul li p {font-size:14px; color:#717FA5; font-weight:600; width:auto; margin:0;}
.result-detail-box a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:16px 0 0; font-size:16px; color:var(--color-active);}
.result-detail-box a.ft-active3 {color:#46547B !important;}

/* find-box */
.find-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; background:rgba(0,0,0,0.03); border:1px solid rgba(0,0,0,0.3); border-radius:6px; padding:8px; margin:16px 0;}
.find-box strong {display:block; text-align:center; font-size:20px; font-weight:bold;}

/* modal-box */
.modal-box {pointer-events:none; opacity:0; position:fixed; left:0; top:0; width:100%; height:100%; transition:all ease 0.5s; z-index:9998; background:rgba(0,0,0,0.5);}
.modal-box .box {pointer-events:none; opacity:0; padding:16px; position:absolute; left:50%; top:45%; width:calc(100% - 32px); max-width:311px; transform:translate(-50%,-50%); max-height:90%; background:#fff; border-radius:16px; transition:all ease 0.5s; display:flex; flex-direction:column;}
.modal-box .box.sm {max-width:279px;}
.modal-box .box.bottom {top:auto; bottom:-15px; max-width:500px; width:100%; border-radius:15px 15px 0 0; transform:translateX(-50%);}
.modal-box .modal-head {border-bottom:1px solid rgba(0,0,0,0.3); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:8px; width:100%;}
.modal-box .modal-head h2 {font-size:18px; font-weight:bold;}
.modal-box .modal-head .close {width:24px; height:24px; font-size:0; margin:0 0 0 10px; background:url('../images/icon_close.svg') no-repeat center / cover;}
.modal-box .modal-body {width:100%; height:100%; overflow-y:auto; padding:16px; margin:8px 0;}
.modal-box .modal-body h2 {text-align:center; word-break:keep-all; font-size:18px; font-weight:bold;}
.modal-box .modal-body .modal-body-text.check:before {display:block; content:""; margin:0 auto 8px; width:72px; height:72px; background:url('../images/icon_modal_check.svg') no-repeat center / cover;}
.modal-box .modal-body .modal-body-text.failed:before {display:block; content:""; margin:0 auto 8px; width:72px; height:72px; background:url('../images/icon_modal_failed.svg') no-repeat center / cover;}
.modal-box .modal-body .modal-body-text.guide:before {display:block; content:""; margin:0 auto 8px; width:72px; height:72px; background:url('../images/icon_modal_guide.svg') no-repeat center / cover;}
.modal-box .modal-body .modal-body-text.confirm:before {display:block; content:""; margin:0 auto 8px; width:72px; height:72px; background:url('../images/icon_modal_confirm.svg') no-repeat center / cover;}
.modal-box .modal-body .modal-body-text p {font-size:16px; text-align:center; word-break:keep-all;}
.modal-box .modal-body .modal-body-text p b {font-size:16px; font-weight:600; color:var(--color-active);}
.modal-box .modal-foot {width:100%;}
.modal-box .modal-foot .button-box .btn {border-radius:8px;}
.modal-box.fixed {pointer-events:inherit; opacity:1;}
.modal-box.fixed .box {pointer-events:inherit; opacity:1; top:50%;}
.modal-box.fixed .box.bottom {top:auto; bottom:0;}

/* select-link-box */
.select-link-box ul li {border-bottom:1px solid rgba(0,0,0,0.1);}
.select-link-box ul li .btn {color:#000; width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; text-align:center; height:56px; font-size:16px;}

/* tab-box */
.tab-box {margin:0 0 16px;}
.tab-box.tab1 ul {display:flex; flex-wrap:wrap; background:#000; border-radius:8px; padding:4px;}
.tab-box.tab1 ul li {flex:1; min-width:0;}
.tab-box.tab1 ul li button {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:100%; height:36px; border-radius:8px; font-size:16px; color:rgba(255,255,255,0.8);}
.tab-box.tab1 ul li button.active {background:#fff; color:#000; font-weight:bold;}

/* support-top-box */
.support-top-box {margin:0 0 16px;}
.support-top-box > div {width:136px; height:71.85px; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center; margin:0 auto; background:url('../images/bg_support.webp') no-repeat center / cover;}
.support-top-box > div p {font-size:14px; text-align:center; width:100%;}
.support-top-box > div p:after {display:block; content:""; width:72.84px; height:10.74px; margin:5px auto 3px; background:url('../images/bg_support_star.webp') no-repeat center / cover;}
.support-top-box > div strong {display:block; text-align:center; font-size:18px; font-weight:bold; width:100%;}

/* support-history-box */
.support-history-box {display:flex; flex-wrap:wrap;}
.support-history-box a {flex:1; min-width:0; padding:8.5px; margin:0 8px 0 0; border-radius:8px; border:1px solid rgba(0,0,0,0.3);}
.support-history-box a:last-of-type {margin:0;}
.support-history-box a:before {display:block; content:""; width:32px; height:32px; margin:0 auto; background-size:cover; background-position:center;}
.support-history-box a p {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:4px 0 0; font-size:14px; font-weight:600;}
.support-history-box a p:after {display:inline-block; content:""; width:20px; height:20px; margin:0 0 0 4px; background:url('../images/icon_arrow_right.svg') no-repeat center / cover;}
.support-history-box a b {display:block; text-align:center; margin:4px 0 0; font-size:12px; font-weight:600; color:rgba(0,0,0,0.5);}
.support-history-box a:nth-of-type(1):before {background-image:url('../images/icon_support_history_01.svg');}
.support-history-box a:nth-of-type(2):before {background-image:url('../images/icon_support_history_02.svg');}
.support-history-box a:nth-of-type(3):before {background-image:url('../images/icon_support_history_03.svg');}

/* support-history-list-box */
.support-history-list-box h2 {display:flex; flex-wrap:wrap; align-items:center; border-bottom:1px solid rgba(0,0,0,0.3); padding:0 0 8px; margin:0 0 16px; font-size:14px; font-weight:bold;}
.support-history-list-box ul li {border-bottom:1px solid rgba(0,0,0,0.3); padding:8px 0; margin:0 0 16px; display:flex; flex-wrap:wrap; align-items:center;}
.support-history-list-box ul li:last-of-type {margin:0; border:0;}
.support-history-list-box ul li:before {display:block; content:""; width:28px; height:28px; margin:0 8px 0 0; background-size:cover; background-position:center;}
.support-history-list-box ul li > div {flex:1; min-width:0;}
.support-history-list-box ul li > div time {display:block; font-size:12px; font-weight:600;}
.support-history-list-box ul li > div time b {font-size:12px; font-weight:600; color:rgba(0,0,0,0.5);}
.support-history-list-box ul li > div p {font-size:14px;}
.support-history-list-box ul li > div p b {font-size:14px; font-weight:bold;}
.support-history-list-box ul li.list-01:before {background-image:url('../images/icon_support_history_01.svg');}
.support-history-list-box ul li.list-02:before {background-image:url('../images/icon_support_history_02.svg');}
.support-history-list-box ul li.list-03:before {background-image:url('../images/icon_support_history_03.svg');}

/* border-box */
.border-box {border:1px solid rgba(0,0,0,0.3); border-radius:8px; padding:16px; overflow:hidden;}
.border-box.gray {background:rgba(0,0,0,0.03); padding:12px; border-radius:4px;}
.border-box.shadow {box-shadow:0 0 8px rgba(0,0,0,0.08);}
.border-box > p {font-size:14px; text-align:center; word-break:keep-all;}

/* blue-box */
.blue-box {background:#F6F8FF; border:1px solid rgba(0,0,0,0.3); border-radius:8px; padding:16px;}
.blue-box > .list-head {margin:0 0 8px;}
.blue-box > .list-head h2 {display:flex; flex-wrap:wrap; align-items:center; font-size:14px; font-weight:bold;}
.blue-box > .list-head h2:before {display:inline-block; content:""; width:24px; height:24px; margin:0 4px 0 0; background-size:cover; background-position:center;}
.blue-box > .list-head h2.invite:before {background-image:url('../images/icon_blue_invite.svg');}
.blue-box > .list-head h2.promotion:before {background-image:url('../images/icon_blue_promotion.svg');}
.blue-box > .list-body {margin:0 0 8px;}
.blue-box > .list-body p {display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; background:#fff; border:1px solid rgba(0,0,0,0.3); border-radius:4px; padding:8px; font-size:14px;}
.blue-box > .list-foot {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; padding:0 20px;}
.blue-box > .list-foot > * {height:28px; padding:0 16px; font-size:14px; font-weight:600; margin:0 16px 0 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border:1px solid var(--color-active); color:var(--color-active); border-radius:50px;}
.blue-box > .list-foot > *:last-child {margin:0;}

/* total-price-box */
.total-price-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; border-radius:8px; padding:8px 16px; border:1px solid rgba(0,0,0,0.3); background:#f6f8ff;}
.total-price-box p {font-size:16px;}
.total-price-box p small {display:block; font-size:12px; color:rgba(0,0,0,0.5);}
.total-price-box b {font-size:16px;}
.total-price-box b strong {font-size:16px; font-weight:bold; margin:0 6px 0 0;}

/* total-order-price-box */
.total-order-price-box {border:1px solid rgba(0,0,0,0.3); border-radius:8px; padding:16px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.total-order-price-box > p {width:100%; text-align:center; margin:8px 0 0;}
.total-order-price-box > div {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-bottom:1px solid rgba(0,0,0,0.3); padding:0 20px 4px;}
.total-order-price-box > div strong {font-size:24px; font-weight:bold; margin:0 8px 0 0;}
.total-order-price-box > div b {font-size:24px;}

/* question-box */
.question-box {background:#F6F8FF; padding:16px;}
.question-box h2 {display:flex; flex-wrap:wrap; align-items:center; margin:0 0 8px; color:#46547B; font-size:16px; font-weight:bold;}
.question-box h2:before {display:block; content:""; width:28px; height:28px; margin:0 6px 0 0; background:url('../images/icon_question.svg') no-repeat center / cover;}
.question-box p {font-size:12px; color:#717FA5; word-break:keep-all;}

/* board-faq-box */
.board-faq-box > ul > li {margin:0 0 16px;}
.board-faq-box > ul > li .faq-head button {display:flex; flex-wrap:wrap; align-items:center; width:100%; border-bottom:1px solid rgba(0,0,0,0.1); padding:10px 0;}
.board-faq-box > ul > li .faq-head button b {font-size:18px; font-weight:bold; color:#3C81F1; margin:0 8px 0 0;}
.board-faq-box > ul > li .faq-head button h2 {flex:1; min-width:0; font-size:14px; text-align:left; margin:0 10px 0 0;}
.board-faq-box > ul > li .faq-head button h3 {flex:1; min-width:0; font-size:14px; text-align:left; margin:0 10px 0 0;}
.board-faq-box > ul > li .faq-head button:after {display:block; content:""; width:24px; height:24px; background:url('../images/icon_faq_toggle.svg') no-repeat center / cover; transition:all ease 0.5s;}
.board-faq-box > ul > li .faq-body {border-radius:8px; padding:16px; background:rgba(0,0,0,0.03);}
.board-faq-box > ul > li .faq-body p {font-size:14px; font-weight:600;}
.board-faq-box > ul > li.active .faq-head button {border:0;}
.board-faq-box > ul > li.active .faq-head button:after {transform:rotate(180deg);}

/* board-notice-box */
.board-notice-box h2 {font-size:16px; font-weight:bold; display:flex; flex-wrap:wrap; align-items:center; margin:0 0 16px;}
.board-notice-box h2:before {display:inline-block; content:""; width:28px; height:28px; margin:0 6px 0 0; background:url('../images/icon_notice.svg') no-repeat center / cover;}
.board-notice-box > ul {margin:8px 0 0;}
.board-notice-box > ul > li {margin:0 0 8px; border-bottom:1px solid rgba(0,0,0,0.3);}
.board-notice-box > ul > li:last-of-type {margin:0;}
.board-notice-box > ul > li .inner {display:flex; flex-wrap:wrap; align-items:center; padding:0 8px 8px;}
.board-notice-box > ul > li .inner:before {display:inline-block; content:""; width:8px; height:16px; border-radius:2px; background:#9FBAFF; margin:0 12px 0 0;}
.board-notice-box > ul > li .inner > div {flex:1; min-width:0;}
.board-notice-box > ul > li .inner > div time {font-size:14px; color:rgba(0,0,0,0.5);}
.board-notice-box > ul > li .inner > div p {font-size:14px; font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.board-notice-box > ul > li .inner > div p.show {overflow:visible; white-space:normal; text-overflow:normal;}
.board-notice-box > ul > li .inner > div h3 {overflow:visible; white-space:normal; text-overflow:normal;}

/* board-view-box */
.board-view-box {margin:16px 0 0; padding:16px; border-radius:4px; border:1px solid rgba(0,0,0,0.3);}
.board-view-box p {margin:0 0 24px; font-size:14px; word-break:keep-all;}
.board-view-box p:last-of-type {margin:0;}

/* myprice-box */
.myprice-box {border:1px solid rgba(0,0,0,0.3); border-radius:8px; padding:16px;}
.myprice-box .list-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.myprice-box .list-head h2 {font-size:16px; font-weight:bold;}
.myprice-box .list-head button {display:block; font-size:0; width:20px; height:20px; background:url('../images/icon_eye_off.svg') no-repeat center / cover;}
.myprice-box .list-body {margin:16px 0 0; display:flex; flex-wrap:wrap; align-items:center;}
.myprice-box .list-body:after {display:block; content:""; width:105px; height:94px; background:url('../images/img_price.webp') no-repeat center / cover;}
.myprice-box .list-body > div {flex:1; min-width:0; padding:0 15px 0 0;}
.myprice-box .list-body > div p {font-size:12px;}
.myprice-box .list-body > div b {display:flex; flex-wrap:wrap; align-items:center; font-size:16px;}
.myprice-box .list-body > div b strong {font-size:20px; font-weight:bold; margin:0 4px 0 0;}
.myprice-box .list-body > div .button-box {margin:8px 0 0; justify-content:flex-start;}
.myprice-box .list-body > div .button-box .btn {flex:none; padding:0 16px; border-radius:4px; height:32px; font-weight:bold; font-size:14px;}
.myprice-box .list-foot {margin:16px 0 0; padding:8px 16px; border-radius:4px; border:1px solid rgba(0,0,0,0.3); background:#F6F8FF; display:flex; flex-wrap:wrap; align-items:center;}
.myprice-box .list-foot ul {flex:1; min-width:0; padding:0 15px 0 0;}
.myprice-box .list-foot ul li {display:flex; flex-wrap:wrap;}
.myprice-box .list-foot ul li b {width:50px; font-size:12px; color:rgba(0,0,0,0.5);}
.myprice-box .list-foot ul li p {flex:1; min-width:0; font-size:12px;}
.myprice-box .list-foot .update {display:flex; flex-wrap:wrap; align-items:center; font-size:14px; font-weight:600; color:var(--color-active);}
.myprice-box .list-foot .update:after {display:block; content:""; width:20px; height:20px; margin:0 0 0 4px; background:url('../images/icon_arrow_right.svg') no-repeat center / cover; filter:var(--filter-active-100);}

/* qr-box */
.qr-box .image {border:1px solid rgba(0,0,0,0.3); border-radius:8px; width:160px; margin:0 auto; overflow:hidden;}
.qr-box .image img {width:157px;}
.qr-box .content {margin:32px 0 8px;}
.qr-box .content ul {display:flex; flex-wrap:wrap; justify-content:space-between; padding:0 16px;}
.qr-box .content ul li:last-of-type {margin:0;}
.qr-box .content ul li > * {display:block; text-align:center; font-size:14px; padding:0 15px;}
.qr-box .content ul li > *:before {display:block; content:""; width:28px; height:28px; margin:0 auto 4px; background-size:cover; background-position:center;}
.qr-box .content ul li.save > *:before {background-image:url('../images/icon_qr_save.svg');}
.qr-box .content ul li.copy > *:before {background-image:url('../images/icon_qr_copy.svg');}
.qr-box .content ul li.share > *:before {background-image:url('../images/icon_qr_share.svg');}

/* add-box */
.add-box {border:1px dashed var(--color-active); border-radius:8px; padding:33px 16px; position:relative;}
/*.add-box:before {display:block; content:""; width:24px; height:24px; margin:0 auto 8px; background:url('../images/icon_add.svg') no-repeat center / cover;}*/
.add-box-icon {display:block; content:""; width:24px; height:24px; margin:0 auto 8px; background:url('../images/icon_add.svg') no-repeat center / cover; cursor: pointer}
.add-box button {display:block; width:100%; text-align:center; font-size:14px; color:var(--color-active);}
.add-box input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.add-box label {display:block; width:100%; text-align:center; font-size:14px; color:var(--color-active);}
.add-box.add-file:before {width:56px; background-image:url('../images/icon_add_02.webp');}

/* add-file-list-box */
.add-file-list-box > ul > li {margin:0 0 10px; display:flex; flex-wrap:wrap; align-items:center;}
.add-file-list-box > ul > li:last-of-type {margin:0;}
/*.add-file-list-box > ul > li:before {width:24px; height:24px; content:""; margin:0 8px 0 0; background:url('../images/icon_clip.svg') no-repeat center / cover;}*/
.add-file-list-box > ul > li p {flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin:0 8px 0 0; font-size:14px;}
.add-file-list-box > ul > li .delete {width:20px; height:20px; margin-right: 10px; font-size:0; background:url('../images/icon_delete2.svg') no-repeat center / cover;}
.add-file-list-box ul li .clip {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    background: url('../images/icon_clip.svg') no-repeat center / cover;
}

/* contract-step-box */
.contract-step-box ul {display:flex; flex-wrap:wrap; padding:16px; justify-content:space-between; margin-right:-36px;}
.contract-step-box ul li {display:flex; flex-wrap:wrap; align-items:center; flex:1; min-width:0;}
.contract-step-box ul li:after {display:block; content:""; width:24px; height:24px; margin:0 12px; background:url('../images/icon_contract_arrow.svg') no-repeat center / cover;}
.contract-step-box ul li:last-of-type:after {opacity:0;}
.contract-step-box ul li p {flex:1; min-width:0; position:relative;}
.contract-step-box ul li p:after {display:block; content:""; padding-bottom:100%;}
.contract-step-box ul li p b {position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid rgba(0,0,0,0.5); background:rgba(0,0,0,0.05); font-size:14px; font-weight:600; color:rgba(0,0,0,0.8); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50%;}

/* contract-list-box */
.contract-list-box > ul > li {margin:0 0 16px; border:1px solid rgba(0,0,0,0.3); border-radius:8px; padding:16px; display:flex; flex-wrap:wrap; align-items:center; box-shadow:0 0 8px rgba(0,0,0,0.08);}
.contract-list-box > ul > li:last-of-type {margin:0;}
.contract-list-box > ul > li > div {flex:1; min-width:0;}
.contract-list-box > ul > li .list-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 0 8px;}
.contract-list-box > ul > li .list-head time {font-size:14px;}
.contract-list-box > ul > li .list-head time b {font-size:14px; color:rgba(0,0,0,0.5);}
.contract-list-box > ul > li .list-head strong {font-size:14px; font-weight:600; color:#717FA5;}
.contract-list-box > ul > li .list-body .state {display:flex; flex-wrap:wrap; align-items:center;}
.contract-list-box > ul > li .list-body .state span {height:21px; border-radius:4px; font-size:12px; padding:0 6px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.contract-list-box > ul > li .list-body .state span.state-RT {border:1px solid #AB8DFF; background:rgba(171,141,255,0.05); color:#6C4BCB;}
.contract-list-box > ul > li .list-body .state span.state-DP {border:1px solid #9B8372; background:rgba(155,131,114,0.1); color:#9B8372;}
.contract-list-box > ul > li .list-body .state span.state-MT {border:1px solid #FB8A4E; background:rgba(255,196,0,0.05); color:#FB8A4E;}
.contract-list-box > ul > li .list-body .state span.state-UT {border:1px solid #3B82F6; background:rgba(59,130,246,0.05); color:#3B82F6;}
.contract-list-box > ul > li .list-body .state span.state-ET {border:1px solid #0caf40; background:rgba(59,130,246,0.05); color: #0ba83f;}
.contract-list-box > ul > li .list-body .subject strong {display:block; padding:4px 0; font-size:18px; font-weight:bold;}
.contract-list-box > ul > li .list-body .subject p {font-size:14px; color:rgba(0,0,0,0.5);}
.contract-list-box > ul > li .list-body .price {display:flex; flex-wrap:wrap; align-items:center; margin:6px 0 0;}
.contract-list-box > ul > li .list-body .price > div {display:flex; flex-wrap:wrap; align-items:center; background:#F6F8FF; border-radius:4px; border:1px solid rgba(0,0,0,0.3); padding:2px 8px;}
.contract-list-box > ul > li .list-body .price > div small {font-size:14px; color:rgba(0,0,0,0.5);}
.contract-list-box > ul > li .list-body .price > div b {margin:0 0 0 8px; font-size:14px;}
.contract-list-box > ul > li .list-body .state {display: flex;justify-content: space-between; align-items: center;}
.contract-list-box > ul > li .list-body .state .btn-delete {width:24px; height:22px; font-size:0; background:url('../images/icon_trash.svg') no-repeat center / cover;}
.contract-list-box > ul > li .list-foot {margin:8px 0 0;}
.contract-list-box > ul > li .list-foot .foot-button {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 -8px;}
.contract-list-box > ul > li .list-foot .foot-button .btn {font-size:14px; color:var(--color-active); height:32px; width:calc(33.33% - 16px); margin:0 8px; display:flex; flex-wrap:wrap; align-items:center; border-radius:50px;}
.contract-list-box > ul > li .list-foot .foot-button .btn.order {background:var(--color-active); color:#fff; font-weight:bold; font-size:16px; justify-content:center;}
.contract-list-box > ul > li .list-foot .foot-price {text-align:right;}
.contract-list-box > ul > li .list-foot .foot-price p {font-size:18px;}
.contract-list-box > ul > li .list-foot .foot-price p b {font-size:18px; font-weight:600;}
.contract-list-box > ul > li .list-foot .foot-price small {display:block; text-align:right; margin:4px 0 0; font-size:14px; color:var(--color-active);}
.contract-list-box > ul > li .list-foot .foot-price div {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; margin:4px 0 0;}
.contract-list-box > ul > li .list-foot .foot-price div a {font-size:12px; background:var(--color-active); color:#fff; height:28px; padding:0 12px; display:flex; flex-wrap:wrap; align-items:center; border-radius:50px;}
.contract-list-box > ul > li .list-foot .btn-sm {height:32px; font-size:16px; font-weight:600;}
.contract-list-box > ul > li .list-message {width:calc(100% + 40px); margin-left:-40px; margin-top:8px; border:1px solid #717FA5; border-radius:4px; background:rgba(113,127,165,0.1); padding:5px 8px; display:flex; flex-wrap:wrap; align-items:center;}
.contract-list-box > ul > li .list-message:before {display:inline-block; content:""; width:16px; height:16px; margin:0 4px 0 0; background:url('../images/icon_contract_message.svg') no-repeat center / cover;}
.contract-list-box > ul > li .list-message p {font-size:12px; color:#717FA5; flex:1; min-width:0;}
.contract-list-box > ul > li .list-message.error {border-color:#EF4444; background:rgba(239,68,68,0.05);}
.contract-list-box > ul > li .list-message.error:before {background-image:url('../images/icon_warning.svg');}
.contract-list-box > ul > li .list-message.error p {color:#EF4444;}
.contract-list-box > ul > li .list-message.error .upload {font-size:12px; font-weight:bold; color:#EF4444;}
.contract-list-box > ul > li .list-message .noti {font-size:12px; font-weight:bold; color: #717FA5;}
.contract-list-box > ul > li.gray {background:rgba(0,0,0,0.03);}
.contract-list-box > ul > li.gray:before {margin-top:0 !important;}
.contract-list-box > ul.before > li:before {display:block; content:""; width:32px; height:32px; margin:-30px 8px 0 0; background:url('../images/icon_contract.svg') no-repeat center / cover;}

/* contract-order-box */
.contract-order-box > ul > li {margin:0 0 8px; padding:0 16px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.contract-order-box > ul > li:last-of-type {margin:0;}
.contract-order-box > ul > li strong {display:flex; flex-wrap:wrap; align-items:center; font-size:14px; color:#46547B;}
.contract-order-box > ul > li strong em {display:block; font-size:0; width:20px; height:20px; background-size:cover; background-position:center; margin:0 4px 0 0;}
.contract-order-box > ul > li p {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:4px; color:#fff; background:#717FA5; height:28px; padding:0 16px; font-size:14px;}
.contract-order-box > ul > li:nth-of-type(1) strong em {background-image:url('../images/icon_order_01.svg');}
.contract-order-box > ul > li:nth-of-type(2) strong em {background-image:url('../images/icon_order_02.svg');}
.contract-order-box > ul > li:nth-of-type(3) strong em {background-image:url('../images/icon_order_03.svg');}
.contract-order-box > ul > li:nth-of-type(4) strong em {background-image:url('../images/icon_order_04.svg');}

/* info-list-box */
.info-list-box > ul > li {margin:0 0 16px;}
.info-list-box > ul > li:last-of-type {margin:0;}
.info-list-box > ul > li h2 {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 0 8px; color:#717FA5; font-size:14px; font-weight:bold;}

/* step-box */
.step-box .step-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:0 16px; margin:0 0 8px;}
.step-box .step-head span {font-size:12px;}
.step-box .step-head b {font-size:12px; font-weight:600;}
.step-box .step-body {position:relative; margin:0 16px 8px; width:calc(100% - 32px); height:6px; border-radius:4px; border:1px solid rgba(0,0,0,0.3); background:#fff; overflow:hidden;}
.step-box .step-body .bar {position:absolute; left:0; top:0; height:100%; background:#000; transition:all ease 0.5s;}
.step-box .step-body .bar.step-01 {width:5%;}
.step-box .step-body .bar.step-02 {width:35.5%;}
.step-box .step-body .bar.step-03 {width:68.5%;}
.step-box .step-body .bar.step-04 {width:100%;}
.step-box .step-foot ul {display:flex; flex-wrap:wrap; justify-content:space-between;}
.step-box .step-foot ul li b {width:20px; height:20px; background:#E7E7E7; font-size:14px; font-weight:600; color:#979797; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:0 auto; border-radius:50%;}
.step-box .step-foot ul li p {text-align:center; font-size:12px; margin:4px 0 0;}
.step-box .step-foot ul li.active b {background:#000; color:#fff;}
.step-box .step-foot ul li.success b {font-size:0; background:url('../images/icon_step_success.webp') no-repeat center / cover;}

/* step-title-box */
.step-title-box {margin:24px 0 16px; border:1px solid #9FBAFF; background:#F6F8FF; border-radius:8px; padding:16px;}
.step-title-box h2 {text-align:center; font-size:14px; font-weight:bold; margin:0 0 4px;}
.step-title-box h2:before {display:block; content:""; margin:0 auto 4px; width:20px; height:20px; background-size:cover; background-position:center;}
.step-title-box h2.step-01:before {background-image:url('../images/icon_step_title_01.svg');}
.step-title-box h2.step-02:before {background-image:url('../images/icon_step_title_02.svg');}
.step-title-box h2.step-03:before {background-image:url('../images/icon_step_title_03.svg');}
.step-title-box p {font-size:12px; color:rgba(0,0,0,0.5); word-break:keep-all; text-align:center;}

/* toggle-parent-box */
.toggle-parent-box .hidden {display:none;}
.toggle-parent-box.active .toggle {transform:rotate(0);}
.toggle-parent-box.active .toggle-inner {display:none;}
.toggle-parent-box.active .hidden {display:block;}

/* calendar-box */
.calendar-box .cal-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:4px 0;}
.calendar-box .cal-head button {display:block; font-size:0; width:24px; height:24px; background-size:cover; background-position:center;}
.calendar-box .cal-head button.prev {background-image:url('../images/icon_arrow_left.svg');}
.calendar-box .cal-head button.next {background-image:url('../images/icon_arrow_right.svg');}
.calendar-box .cal-head h2 {font-size:20px; font-weight:600;}
.calendar-box .cal-body table {table-layout:fixed;}
.calendar-box .cal-body table thead tr th {border-bottom:1px solid #f5f5f5; font-size:18px; font-weight:600; padding:12px 0;}
.calendar-box .cal-body table thead tr th:nth-of-type(6) {color:var(--color-red);}
.calendar-box .cal-body table thead tr th:nth-of-type(7) {color:var(--color-red);}
.calendar-box .cal-body table tbody tr td {font-size:18px; font-weight:600; position:relative;}
.calendar-box .cal-body table tbody tr td:after {display:block; content:""; padding-bottom:100%;}
.calendar-box .cal-body table tbody tr td p {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; font-size:18px; font-weight:600;}
.calendar-box .cal-body table tbody tr td:nth-of-type(6) p {color:var(--color-red);}
.calendar-box .cal-body table tbody tr td:nth-of-type(7) p {color:var(--color-red);}
.calendar-box .cal-body table tbody tr td:nth-of-type(6) button {color:var(--color-red);}
.calendar-box .cal-body table tbody tr td:nth-of-type(7) button {color:var(--color-red);}
.calendar-box .cal-body table tbody tr td.off {opacity:0.5;}
.calendar-box .cal-body table tbody tr td button {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; color:#000; border-radius:50%; width:100%; height:100%; font-size:18px; font-weight:600;}
.calendar-box .cal-body table tbody tr td button.today {background:#EDEDED;}
.calendar-box .cal-body table tbody tr td button.active {background:var(--color-active); color:#fff;}

/* order-split-box */
.order-split-box > ul > li {display:flex; flex-wrap:wrap; align-items:center; padding:0 16px; margin:0 0 16px;}
.order-split-box > ul > li:last-of-type {margin:0;}
.order-split-box > ul > li .number strong {width:32px; height:32px; background:#F4F4F4; margin:0 8px 0 0; border:1px solid rgba(0,0,0,0.5); font-size:14px; font-weight:bold; color:#B3B3B3; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50%;}
.order-split-box > ul > li .content {flex:1; min-width:0;}
.order-split-box > ul > li .delete {margin:0 0 0 16px;}
.order-split-box > ul > li .delete .delete-btn {width:24px; height:24px; font-size:0; background:url('../images/icon_trash.svg') no-repeat center / cover;}
.order-split-box > ul > li.active .number strong {background:rgba(239,68,68,0.1); border-color:#EF4444; color:#EF4444;}
.order-split-box .split-add {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:16px 0 0;}
.order-split-box .split-add .add {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; font-size:16px; color:var(--color-active);}
.order-split-box .split-add .add:before {display:block; content:""; width:24px; height:24px; margin:0 4px 0 0; background:url('../images/icon_split_add.svg') no-repeat center / cover;}

/* banner-swiper-box */
.banner-swiper-box .swiper-container {overflow:hidden;}
.banner-swiper-box a {display:block; border-radius:8px; overflow:hidden; box-shadow:0 8px 8px -2px rgba(0,0,0,0.04), 0 3px 4px -2px rgba(0,0,0,0.01);}
.banner-swiper-box a img {width:100%;}

/* category-box */
.category-box.border {border:1px solid rgba(0,0,0,0.3); border-radius:8px; padding:8px; box-shadow:0 0 8px rgba(0,0,0,0.08);}
.category-box > ul > li {border-bottom:1px solid rgba(0,0,0,0.1); margin:0 0 8px;}
.category-box > ul > li:last-of-type {margin:0; border:0;}
.category-box > ul > li .inner {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:8px;}
.category-box > ul > li .inner > strong {display:flex; flex-wrap:wrap; align-items:center; font-size:14px;}
.category-box > ul > li .inner > strong:before {display:inline-block; content:""; width:20px; height:20px; margin:0 4px 0 0; background-size:cover; background-position:center;}
.category-box > ul > li .inner > strong.id:before {background-image:url('../images/icon_cate_01.svg');}
.category-box > ul > li .inner > strong.pw:before {background-image:url('../images/icon_cate_02.svg');}
.category-box > ul > li .inner > strong.call:before {background-image:url('../images/icon_cate_03.svg');}
.category-box > ul > li .inner > strong.name:before {background-image:url('../images/icon_cate_04.svg');}
.category-box > ul > li .inner > strong.payment:before {background-image:url('../images/icon_cate_05.svg');}
.category-box > ul > li .inner > strong.invite:before {background-image:url('../images/icon_cate_06.svg');}
.category-box > ul > li .inner > strong.promotion:before {background-image:url('../images/icon_cate_07.svg');}
.category-box > ul > li .inner > strong.bank:before {background-image:url('../images/icon_cate_08.svg');}
.category-box > ul > li .inner > strong.notice:before {background-image:url('../images/icon_cate_09.svg');}
.category-box > ul > li .inner > strong.guide:before {background-image:url('../images/icon_cate_10.svg');}
.category-box > ul > li .inner > strong.faq:before {background-image:url('../images/icon_cate_11.svg');}
.category-box > ul > li .inner > strong.terms:before {background-image:url('../images/icon_cate_12.svg');}

.category-box > ul > li .inner > strong.home:before {background-image:url('../images/icon_cate_13.svg');}
.category-box > ul > li .inner > strong.support:before {background-image:url('../images/icon_cate_14.svg');}
.category-box > ul > li .inner > strong.order:before {background-image:url('../images/icon_cate_15.svg');}
.category-box > ul > li .inner > strong.contract:before {background-image:url('../images/icon_cate_16.svg');}
.category-box > ul > li .inner > strong.history:before {background-image:url('../images/icon_cate_17.svg');}
.category-box > ul > li .inner > strong.mypage:before {background-image:url('../images/icon_cate_18.svg');}
.category-box > ul > li .inner > strong.leave:before {background-image:url('../images/icon_cate_19.svg');}
.category-box > ul > li .inner > strong.invite:before {background-image:url('../images/icon_cate_20.svg');}
.category-box > ul > li .inner > div {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; flex:1; min-width:0; padding:0 0 0 10px;}
.category-box > ul > li .inner > div p {font-size:14px;}
.category-box > ul > li .inner > div .more {display:flex; flex-wrap:wrap; align-items:center; font-size:14px;}
.category-box > ul > li .inner > div .more:after {width:20px; height:20px; margin:0 0 0 4px; display:block; content:""; background:url('../images/icon_arrow_right.svg') no-repeat center / cover;}
.category-box > ul > li .inner > div .copy {display:flex; flex-wrap:wrap; align-items:center; font-size:14px;}
.category-box > ul > li .inner > div .copy:after {width:20px; height:20px; margin:0 0 0 4px; display:block; content:""; background:url('../images/icon_copy.svg') no-repeat center / cover;}
.category-box > ul > li .inner > div .copy.border {border:1px solid rgba(0,0,0,0.3); border-radius:8px; padding:4px 8px;}
.category-box > ul > li .inner > div .btn-sm {height:24px;}
.category-box > ul > li .inner.link:after {display:block; content:""; width:20px; height:20px; margin:0 0 0 4px; background:url('../images/icon_arrow_right.svg') no-repeat center / cover;}

/* button-box */
/*
.button-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.button-box .btn {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; flex:1; min-width:0; height:48px; border-radius:16px; font-size:16px;}
.button-box .btn-sm {font-size:14px; font-weight:400; padding:0 8px; flex:none; border-radius:6px; height:29px;}
.button-box .btn-round {border-radius:50px;}
.button-box .btn-more:after {}
.button-box .btn-white {border:1px solid rgba(0,0,0,0.3); color:#272727; background:#fff;}
.button-box .btn-white.ft-active {color:var(--color-active) !important; border:0;}
.button-box .btn-red {color:#fff;}
.button-box .btn-active {color:var(--color-white);}
.button-box .btn-active4 {background:#46547B; color:#fff;}
.button-box .btn-lightgray-outline {color:rgba(0,0,0,0.3); border:1px solid rgba(0,0,0,0.3);}
.button-box .btn.disabled {background:#E7E7E7 !important; border-color:#E7E7E7 !important; color:#979797 !important;}
.button-box .btn-active-outline.disabled {background:#fff !important;}
*/

/* logout-box */
.logout-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.logout-box a {height:37px; padding:0 32px; font-size:14px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border:1px solid rgba(0,0,0,0.3);}
.logout-box a:before {display:inline-block; content:""; width:20px; height:20px; margin:0 4px 0 0; background:url('../images/icon_loguout.svg') no-repeat center / cover;}

/* guide-box */
.guide-box .guide-head {padding:16px; margin:0 0 32px;}
.guide-box .guide-head h2 {font-size:22px; font-weight:800; text-align:center;}
.guide-box .guide-head h2 b {font-size:22px; font-weight:800; color:var(--color-active);}
.guide-box .guide-head h2:after {display:block; content:""; width:70.62px; height:56.3px; margin:24px auto 0; background:url('../images/img_guide_title.webp') no-repeat center / cover;}
.guide-box .guide-body > ul > li {margin:0 0 16px;}
.guide-box .guide-body > ul > li:last-of-type {margin:0;}
.guide-box .guide-body > ul > li .list-head {display:flex; flex-wrap:wrap; align-items:center; margin:0 0 8px;}
.guide-box .guide-body > ul > li .list-head b {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:32px; height:38px; border-radius:4px; color:#fff; background:var(--color-active2); font-size:20px; font-weight:900;}
.guide-box .guide-body > ul > li .list-head strong {flex:1; min-width:0; padding:0 0 0 12px; font-size:16px; font-weight:bold; color:var(--color-active2);}
.guide-box .guide-body > ul > li .list-body {border-radius:8px; border:1px solid rgba(0,0,0,0.3); padding:16px;}
.guide-box .guide-body > ul > li .list-body p {font-size:14px;}
.guide-box .guide-body > ul > li .list-body dl dd {position:relative; font-size:14px; margin:0 0 3px; display:flex; flex-wrap:wrap; word-break:keep-all; padding:0 0 0 8px;}
.guide-box .guide-body > ul > li .list-body dl dd:before {position:absolute; left:0; display:inline-block; content:""; width:3px; height:3px; background:#000; border-radius:50%; margin:0 5px 0 0; top:9px;}
.guide-box .guide-body > ul > li .list-body dl dd:last-of-type {margin:0:}

/* faq-box */
.faq-box {border:1px solid rgba(0,0,0,0.3); border-radius:4px; background:#F6F8FF; padding:16px; margin:0 0 16px;}
.faq-box strong {display:flex; flex-wrap:wrap; align-items:center; margin:0 0 8px; font-size:16px; font-weight:bold;}
.faq-box strong:before {display:inline-block; content:""; width:28px; height:28px; margin:0 6px 0 0; background:url('../images/icon_faq.svg') no-repeat center / cover;}
.faq-box p {font-size:12px; word-break:keep-all; color:rgba(0,0,0,0.5);}

/* sca-box */
.sca-box {margin:0 0 16px;}
.sca-box ul {display:flex; flex-wrap:wrap; margin:0 -2.5px -5px;}
.sca-box ul li {width:calc(33.33% - 5px ); margin:0 2.5px 5px;}
.sca-box ul li .btn { font-size:14px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border:1px solid rgba(0,0,0,0.3); height:36px;}
.sca-box ul li.active .btn {border-color:var(--color-active); background:var(--color-active); color:#fff; font-weight:600;}

/* service-box */
.service-box ul li {padding:5.5px 0; display:flex; flex-wrap:wrap; align-items:center;}
.service-box ul li:before {display:inline-block; content:""; width:20px; height:20px; margin:0 8px 0 0; background-size:cover; background-position:center;}
.service-box ul li p {flex:1; min-width:0; font-size:14px; color:rgba(0,0,0,0.6); word-break:keep-all;}
.service-box ul li p b {font-size:14px; color:rgba(0,0,0,0.6); font-weight:bold;}
.service-box ul li:nth-of-type(1):before {background-image:url('../images/icon_service_01.svg');}
.service-box ul li:nth-of-type(2):before {background-image:url('../images/icon_service_02.svg');}
.service-box ul li:nth-of-type(3):before {background-image:url('../images/icon_service_03.svg');}
.service-box ul li:nth-of-type(4):before {background-image:url('../images/icon_service_04.svg');}

/* support-more-box */
.support-more-box {display:flex; flex-wrap:wrap; align-items:center; border:1px solid rgba(0,0,0,0.3); border-radius:8px; padding:16px; box-shadow:0 0 8px rgba(0,0,0,0.08);}
.support-more-box .list-image {width:104px;}
.support-more-box .list-image img {width:100%;}
.support-more-box .list-content {flex:1; min-width:0; padding:0 0 0 16px;}
.support-more-box .list-content strong {display:block; font-size:12px; font-weight:bold; color:rgba(0,0,0,0.5); border-bottom:1px solid rgba(0,0,0,0.3); padding:0 0 4px; margin:0 0 12px;}
.support-more-box .list-content p {font-size:14px; word-break:keep-all; margin:0 0 12px;}
.support-more-box .list-content p b {font-size:14px; font-weight:bold; color:var(--color-red);}
.support-more-box .list-content a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50px; width:104px; height:32px; font-size:12px; font-weight:bold; color:#fff; background:rgba(0,0,0,0.8);}

/* footer-box */
.footer-box {background:rgba(0,0,0,0.8); margin:24px -16px 0; padding:16px;}
.footer-box h2 {margin:0 0 8px;}
.footer-box h2 button {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:100%; font-size:14px; font-weight:bold; color:#fff;}
.footer-box h2 button:after {display:inline-block; content:""; width:20px; height:20px; margin:0 0 0 4px; background:url('../images/icon_footer_arrow.svg') no-repeat center / cover;}
.footer-box .footer-link {display:none; margin:0 0 8px;}
.footer-box .footer-link ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.footer-box .footer-link ul li {display:flex; flex-wrap:wrap; align-items:center;}
.footer-box .footer-link ul li:after {display:inline-block; content:""; width:1px; height:10px; margin:0 4px; background:rgba(255,255,255,0.5);}
.footer-box .footer-link ul li:last-of-type:after {display:none;}
.footer-box .footer-link ul li a {font-size:12px; color:rgba(255,255,255,0.8);}
.footer-box .footer-info ul li {margin:0 0 5px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.footer-box .footer-info ul li p:after {display:inline-block; content:""; width:1px; height:10px; margin:0 4px; background:rgba(255,255,255,0.5);}
.footer-box .footer-info ul li p:last-of-type:after {display:none;}
.footer-box .footer-info ul li p {font-size:12px; color:rgba(255,255,255,0.8); display:flex; flex-wrap:wrap; align-items:center;}
.footer-box.active h2 button:after {transform:rotate(180deg);}
.footer-box.active .footer-link {display:block;}

.footer-info {display:none;}
.footer-info.active {display:block;}

.footer-box h2 button:after {
    display:inline-block;
    content:"";
    width:20px;
    height:20px;
    margin-left:4px;
    background:url('../images/icon_footer_arrow.svg') no-repeat center/cover;
    transition: transform 0.3s;
}
.footer-box h2 button.rotated:after {
    transform: rotate(180deg);
}

.contract-arrow{
    color:#999;
    font-weight:400;
    display:inline-block;
    margin-left:2px;
    vertical-align:middle;
    transform:translateY(1px); /* 필요 시만 */
}

/* NICEPAY 백드롭 강제 보정 */
#bg_layer {
    position: fixed !important;  /* 스크롤/주소창 변화에도 화면을 덮게 */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;   /* 신형 뷰포트 단위 */
    /* 호환 보조 */
    height: 100svh !important;
    background: #4c4c4c !important;
    opacity: 0.65 !important;
    z-index: 9998 !important;
}

/* support-record-section 전용 보정 */
.support-record-section {
    padding: 70px 16px 80px;
}

.summary-box {
    text-align: center;
    padding: 20px 0 16px;
    margin: 0 0 24px;
    background: #fff;
}

.summary-box p {
    font-size: 14px;
    color: rgba(0,0,0,0.7);
    margin: 0 0 8px;
    text-align: center;
}

.summary-box strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #3C81F1;
}

.summary-box .sub-info {
    font-size: 13px;
    color: rgba(0,0,0,0.5);
    margin-top: 4px;
    text-align: center;
}


.summary-box hr {
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin: 16px auto 0;
    width: 92%;
}

.convert-box {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    border: none;
    box-shadow: none;
    margin-bottom: 24px;
}

.convert-box label {
    display: flex;
    justify-content: space-between; /* 왼쪽: 제목, 오른쪽: 잔고 */
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}


.convert-box .balance {
    font-size: 13px;
    color: #3C81F1;
    font-weight: 700;
    text-align: right;
    flex-shrink: 0;
}

.convert-box .input-group {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 10px;
}

.convert-box .input-group input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
}

.convert-box .input-group span {
    font-size: 15px;
    margin-left: 4px;
    color: #333;
}

.convert-box .input-group .btn-all {
    margin-left: 8px;
    background: #F3F7FF;
    color: #3C81F1;
    font-weight: 600;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 14px;
}

.convert-info {
    margin-top: 12px;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.btn-convert {
    display: block;
    width: 100%;
    background: #3C81F1;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    padding: 14px 0;
    border-radius: 6px;
    margin-top: 28px;
}

.alert-box {
    display: none;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
    padding: 24px 20px;
    margin-top: 20px;
}

.alert-box.active {
    display: block;
}

.alert-box p {
    font-size: 14px;
    color: #333;
    margin-bottom: 16px;
    line-height: 1.5;
}

.alert-box .btn-ok {
    display: inline-block;
    background: #3C81F1;
    color: #fff;
    padding: 8px 24px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
}


/* 회원 탈퇴 페이지 전용 스타일 */
.leave-section {
    padding: 70px 16px 120px;
    background: #fff;
    min-height: 100vh;
}

.leave-section h1 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}

.leave-box {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
}

.leave-box h2 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
    margin-top: 16px;
}

.leave-box p {
    font-size: 14px;
    color: #777;
    line-height: 1.6;
    margin: 4px 0;
}

.leave-box ul {
    list-style: none;
    padding-left: 0;
}

.leave-box li {
    position: relative;
    padding-left: 14px;
    font-size: 14px;
    color: #777;
    line-height: 1.6;
    margin: 4px 0;
}

.leave-box li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: rgba(0, 0, 0, 0.4);
    font-size: 18px;
    line-height: 1.2;
}

.leave-box textarea {
    width: 100%;
    min-height: 90px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    font-size: 14px;
    resize: vertical;
}

.leave-box label {
    display: flex;
    align-items: center;
    margin-top: 12px;
    font-size: 14px;
    color: #555;
}

.leave-box input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.2);
}

/* footer 위치는 공용 shadow 그대로 쓰는 중이라 leave-footer는 안 씀 */

.leave-section ~ footer.shadow .button-box .btn.btn-active {
    background-color: #F04438 !important;
    border-color: #F04438 !important;
    color: #fff !important;
}

/* hover 상태 */
.leave-section ~ footer.shadow .button-box .btn.btn-active:hover:not(.disabled) {
    background-color: #D93B32 !important;
    border-color: #D93B32 !important;
    color: #fff !important;
}

/* disabled 상태 */
.leave-section ~ footer.shadow .button-box .btn.btn-active.disabled {
    background-color: #ccc !important;
    border-color: #ccc !important;
    color: #fff !important;
    cursor: not-allowed;
}

/* 확장형 input 박스에서만 밑줄 제거 */
.input-box-flex {
    border-bottom: none !important;
}


/* 기존 input-box는 유지하고, 확장형 구조를 위한 전용 클래스 */
.input-box-flex .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 좌측 콘텐츠는 자연 크기, 버튼은 우측 정렬 */
.input-box-flex .content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

/* 버튼 박스 오른쪽 고정 */
.input-box-flex .button-box {
    margin-left: 8px;
    flex-shrink: 0;
}

.seo-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* === 헤더 공통 플렉스 정렬 === */
header .container,
.header-main .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.header-logo,
.main-logo {
    flex: 0 0 auto;
}

/* === 회원가입 버튼 위치 고정 === */
.header-right {
    display: flex;
    align-items: center;
    order: 1;
    margin-right: 12px;
}

.main-menu,
.header-bar {
    display: flex;
    align-items: center;
    order: 2;
}

/* === 회원가입 버튼 디자인 === */
.btn-join {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: #3C81F1;
    border: 1px solid rgba(60,129,241,0.5);
    border-radius: 50px;
    background: #fff;
    transition: all 0.2s ease;
}

.btn-join:hover {
    background: rgba(60,129,241,0.05);
}

/* === 모바일 헤더에도 동일하게 적용 === */
header .header-logo {
    margin-right: auto;
}

header .header-right {
    display: flex;
    align-items: center;
    order: 1;
    margin-right: 10px;
}

header .header-bar {
    display: flex;
    align-items: center;
    order: 2;
}

/* 회원가입 버튼 공통 스타일 강제 통일 */
header .btn-join {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding: 6px 16px;
    border-radius: 20px;

    border: 1px solid #2F6BFF; /* 파란색 보더 */
    color: #2F6BFF;            /* 파란 텍스트 */

    font-size: 14px;
    font-weight: 600;
    background: #fff;

    white-space: nowrap;
    text-decoration: none;

    /* 우선순위 충돌 방지 */
    box-sizing: border-box;
}

/* 초대한 사람 영역 */
.section-title {
    font-size: 18px;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 12px;
}

/* 컨테이너 박스 */
.invite-box {
    width: 100%;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 0;
    text-align: center;
    margin-bottom: 8px;
}

/* 초대한 사람 아이디 표시 */
.invite-user {
    font-size: 16px;
    font-weight: 700;
    color: #2563eb; /* 파란색 */
}

/* 안내문 */
.invite-guide {
    font-size: 13px;
    color: #6b7280;
    text-align: center;
    margin-bottom: 20px;
}