/* sub-content-box */
.sub-content-box .content-inner {margin:var(--margin-50) 0 0;}
.sub-content-box .content-inner:first-child {margin:0;}
.sub-content-box .content-inner .content-title {margin:0 0 var(--margin-10);}
.sub-content-box .content-inner .content-title h4 {font-size:var(--font-xxl); font-weight:600;}
.sub-content-box .content-inner .content-title h4 b {font-size:inherit; font-weight:600; color:var(--color-active);}
.dark-mode .sub-content-box .content-inner .content-title h4 {color:var(--color-white);}


/* ========================================
   header — 프론트 공통 헤더
   ======================================== */
.header {position:fixed; top:0; left:0; width:100%; z-index:1000; background:rgba(255,255,255,0.97); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--color-gray-300); transition:box-shadow 0.3s ease;}
.header.scrolled {box-shadow:0 2px 12px rgba(0,0,0,0.08);}
.header__inner {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; height:64px;}
.header__brand {display:flex; align-items:center; text-decoration:none; flex-shrink:0;}
.header__logo {height:36px; width:auto; display:block;}
.header__site-name {font-size:var(--font-xl); font-weight:700; color:var(--color-black);}

/* PC 내비게이션 */
.header__nav {display:flex; align-items:center; height:100%;}
.header__menu {display:flex; align-items:center; gap:0; height:100%; list-style:none; margin:0; padding:0;}
.header__menu-item {position:relative; height:100%; display:flex; align-items:center;}
.header__menu-item > a {display:flex; align-items:center; height:100%; padding:0 16px; font-size:var(--font-md); font-weight:500; color:var(--color-gray-800); text-decoration:none; transition:color 0.2s ease; white-space:nowrap;}
.header__menu-item > a:hover,
.header__menu-item > a:focus {color:var(--color-active);}

/* PC 드롭다운 (2차 메뉴) */
.header__dropdown {position:absolute; top:100%; left:0; padding-top:4px; opacity:0; pointer-events:none; transition:opacity 0.25s ease; z-index:100;}
.header__menu-item:hover > .header__dropdown,
.header__menu-item:focus-within > .header__dropdown {opacity:1; pointer-events:auto;}

/* 햄버거 버튼 (PC 숨김) */
.header__hamburger {display:none; background:none; border:none; cursor:pointer; padding:8px; flex-direction:column; gap:5px; align-items:center; justify-content:center; width:40px; height:40px;}
.header__hamburger-bar {display:block; width:22px; height:2px; background:var(--color-gray-800); border-radius:2px; transition:all 0.3s ease;}
.header__hamburger.active .header__hamburger-bar:nth-child(1) {transform:translateY(7px) rotate(45deg);}
.header__hamburger.active .header__hamburger-bar:nth-child(2) {opacity:0;}
.header__hamburger.active .header__hamburger-bar:nth-child(3) {transform:translateY(-7px) rotate(-45deg);}

/* 모바일 오버레이 */
.header__mobile-overlay {position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:999; opacity:0; pointer-events:none; transition:opacity 0.3s ease;}
.header__mobile-overlay.active {opacity:1; pointer-events:auto;}

/* 모바일 사이드 내비 */
.header__mobile-nav {position:fixed; top:0; right:-280px; width:280px; height:100%; background:var(--color-white); z-index:1000; overflow-y:auto; transition:right 0.3s ease; box-shadow:-4px 0 20px rgba(0,0,0,0.1);}
.header__mobile-nav.active {right:0;}
.header__mobile-head {display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--color-gray-300);}
.header__mobile-head .header__logo {height:28px;}
.header__mobile-close {background:none; border:none; font-size:28px; line-height:1; cursor:pointer; color:var(--color-gray-700); padding:4px 8px;}

/* 모바일 메뉴 목록 */
.header__mobile-menu {list-style:none; margin:0; padding:0;}
.header__mobile-item {border-bottom:1px solid var(--color-gray-200);}
.header__mobile-link-row {display:flex; align-items:center; justify-content:space-between;}
.header__mobile-link-row > a {flex:1; min-width:0; padding:14px 16px; font-size:var(--font-md); font-weight:500; color:var(--color-gray-800); text-decoration:none;}
.header__mobile-toggle {background:none; border:none; cursor:pointer; padding:14px 16px; display:flex; align-items:center; justify-content:center;}
.header__mobile-toggle-icon {display:block; width:12px; height:12px; position:relative; transition:transform 0.3s ease;}
.header__mobile-toggle-icon::before,
.header__mobile-toggle-icon::after {content:""; position:absolute; background:var(--color-gray-600); border-radius:1px;}
.header__mobile-toggle-icon::before {top:50%; left:0; width:100%; height:2px; transform:translateY(-50%);}
.header__mobile-toggle-icon::after {top:0; left:50%; width:2px; height:100%; transform:translateX(-50%); transition:transform 0.3s ease;}
.header__mobile-toggle-icon.active::after {transform:translateX(-50%) rotate(90deg);}

/* 모바일 서브 메뉴 (아코디언) */
.header__mobile-sub {list-style:none; margin:0; padding:0; max-height:0; overflow:hidden; transition:max-height 0.3s ease; background:var(--color-gray-50);}
.header__mobile-sub li {border-top:1px solid var(--color-gray-200);}
.header__mobile-sub .header__mobile-link-row > a {padding-left:32px; font-weight:400; font-size:var(--font-sm); color:var(--color-gray-700);}
.header__mobile-sub .header__mobile-sub .header__mobile-link-row > a {padding-left:48px; font-size:var(--font-xs);}

/* 헤더 높이만큼 body padding (고정 헤더) */
body {padding-top:64px;}
/* hideHeader 인증 페이지 — 옅은 그레이 배경 위 카드 화면 가운데 정렬 */
body.no-header {padding:40px 20px; background:#f4f6fa; min-height:100vh; display:flex; align-items:center; justify-content:center;}

/* ── 반응형: 태블릿 이하 ── */
@media (max-width:991px){
.header__nav {display:none;}
.header__hamburger {display:flex;}
}

/* ============================================================
   user-auth — 사용자(프론트) 인증 페이지 (Split 레이아웃)
   좌측: 브랜드 히어로(사이트명·슬로건) / 우측: 폼
   내부 UI 컴포넌트(.input-box, .check-box, .button-box .btn 등)는 common.css 사용
   ============================================================ */

/* user-auth — 좌우 분할 카드 (최대 900px, 자연 높이, 카드 형태) */
.user-auth {width:100%; max-width:900px; margin:0 auto; display:flex; align-items:stretch; background:#ffffff; border-radius:20px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(15, 23, 42, 0.12), 0 10px 20px -8px rgba(15, 23, 42, 0.06); word-break:keep-all; overflow-wrap:break-word;}
/* user-auth--wide — 회원가입/정보수정 등 입력 필드 많은 폼 페이지
   (좌측 brand 영역 숨김 + 우측 폼 풀폭 단일 카드로 전환) */
.user-auth--wide {max-width:820px;}
.user-auth--wide .user-auth__brand {display:none;}
.user-auth--wide .user-auth__panel {flex:1 1 auto;}
.user-auth--wide .user-auth__panel-inner {max-width:none; width:100%;}

/* user-auth__brand — 좌측 브랜드 hero (다크 그라데이션 + 미세한 도트 패턴) */
.user-auth__brand {flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; gap:48px; padding:64px 56px; color:#ffffff; background-color:#0f172a; background-image:radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.5px), linear-gradient(155deg, #0f172a 0%, #1e293b 55%, #1e1b4b 100%); background-size:22px 22px, auto;}

/* user-auth__brand-top — 상단 로고/사이트명
   로고 크기/비율 다양성 대응 — max-width + max-height 동시 적용으로 모든 비율 자연스럽게 fit
   (가로형은 width 제한 우선, 세로형/정사각형은 height 제한 우선, 작은 로고는 원본 크기 유지) */
.user-auth__brand-top {display:flex; align-items:center; gap:10px;}
.user-auth__brand-top img {max-width:140px; max-height:32px; width:auto; height:auto; object-fit:contain; filter:brightness(0) invert(1);}
.user-auth__brand-name {color:#ffffff; font-size:18px; font-weight:700; letter-spacing:-0.01em;}

/* user-auth__brand-foot — 하단 메타 */
.user-auth__brand-foot {color:rgba(255, 255, 255, 0.5); font-size:13px;}

/* user-auth__panel — 우측 폼 영역 */
.user-auth__panel {flex:1; min-width:0; display:flex; align-items:center; justify-content:center; padding:56px;}
.user-auth__panel-inner {width:100%; max-width:400px;}

/* user-auth__head — 폼 헤더 */
.user-auth__head {margin-bottom:36px;}
.user-auth__title {margin:0 0 10px; font-size:28px; font-weight:700; color:#0f172a; line-height:1.25; letter-spacing:-0.025em;}
.user-auth__lead {margin:0; font-size:14.5px; color:#64748b; line-height:1.65;}

/* user-auth__link — 보조 링크 */
.user-auth__link {color:var(--color-active, #4f6ef7); font-weight:500; text-decoration:none; transition:color 0.15s ease;}
.user-auth__link:hover {color:var(--color-active2, #4257d2); text-decoration:underline; text-underline-offset:3px;}

/* user-auth__divider — SNS 구분선 */
.user-auth__divider {display:flex; align-items:center; gap:14px; margin:28px 0 18px; color:#94a3b8; font-size:12px; font-weight:500;}
.user-auth__divider::before,
.user-auth__divider::after {content:""; flex:1; height:1px; background:#e2e8f0;}

/* user-auth__signup — 폼 하단 가입/이동 안내 */
.user-auth__signup {margin:28px 0 0; text-align:center; font-size:14px; color:#64748b;}
/* signup 내 강조 링크 — 상위와 동일 글씨체 + 포인트 컬러 + 밑줄 */
.user-auth__signup .user-auth__link {font-weight:inherit; font-size:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}

/* agree-box — 회원가입 약관 동의 영역 (admin.css 정의를 user 측에 prefix 없이 이관) */
.agree-box {border-top:1px solid var(--color-gray-200);}
.agree-box .agree-total {background:var(--color-gray-100); padding:var(--padding-15); border-radius:var(--radius-8, 8px);}
.agree-box .agree-list {padding:var(--padding-15);}
.agree-box .agree-list > ul > li {margin:0 0 10px; display:flex; flex-wrap:wrap; align-items:center; gap:15px;}
.agree-box .agree-list > ul > li:last-of-type {margin:0;}
.agree-box .agree-list > ul > li .check-box {flex:1; min-width:0;}
.agree-box .agree-list > ul > li .agree-modal {color:var(--color-active); text-decoration:underline;}

/* login-or — SNS 구분선 ("or" 문구, 양옆 라인) */
.login-or {margin:24px 0; display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
.login-or p {font-size:14px; color:var(--color-gray-600); text-transform:uppercase; letter-spacing:1px; font-weight:600;}
.login-or:before,
.login-or:after {display:block; content:""; flex:1; min-width:0; height:1px; background:var(--color-gray-200);}

/* ── 반응형: 태블릿 이하 991px ── */
@media (max-width:991px){
.user-auth__brand {padding:48px 40px;}
.user-auth__panel {padding:48px 40px;}
.user-auth__title {font-size:26px;}
}

/* ── 반응형: 모바일 767px (좌측 brand 숨김, 폼만 풀스크린화) ── */
@media (max-width:767px){
body.no-header {padding:0;}
.user-auth {border-radius:0; box-shadow:none; min-height:100vh;}
.user-auth__brand {display:none;}
.user-auth__panel {padding:36px 24px;}
.user-auth__head {margin-bottom:28px;}
.user-auth__title {font-size:24px;}
.user-auth__lead {font-size:14px;}
}

/* ── 반응형: 소형 모바일 480px ── */
@media (max-width:480px){
.user-auth__panel {padding:32px 20px;}
.user-auth__title {font-size:22px;}
}