/* 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:16px; 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);}

/* 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 > 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;}


/* 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 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;}

.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;
    margin-left: auto;   /* ⭐ 오른쪽 끝으로 이동 */
}

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;
}