/* ═══════════════════════════════════════════════════════════════════════
   chrome-v3.css — V3 상단바 · 푸터 · 비교 토글
   ───────────────────────────────────────────────────────────────────────
   신청(v3-apply)과 랜딩(v3-landing) 두 변형이 공유한다.

   style.css 의 기존 규칙과 충돌하던 부분을 여기서 정리한다.

     · header 는 높이를 고정하지 않는다.
       768px 이하에서 .nav-container 가 flex-direction: column 으로 바뀌는데
       height 를 못 박아 두면 로고와 메뉴가 눌린다 → 패딩으로 높이를 만든다.
     · .logo-svg 는 style.css 가 height: 48px !important 로 강제하므로
       같은 !important 로 되돌려야 한다.
     · footer 는 style.css 가 padding: 3rem 1.5rem / text-align: center 를
       주고 있어 V3 푸터 레이아웃과 이중으로 겹친다 → 초기화한다.
     · .scroll-progress 는 transform: scaleX() 로 움직이는 요소다.
       width 를 바꾸면 아무 일도 일어나지 않는다 (JS 쪽도 함께 수정).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --v3-warm: 120, 96, 62;
    --v3-gold: var(--accent-gold-rgb, 197, 168, 128);
    --v3-accent: var(--btn-color, var(--primary-red, #9e3d2f));
    --v3-ink: var(--text-primary, #2c2523);
    --v3-ink-soft: var(--text-secondary, #5f544d);
    --v3-ink-faint: rgba(var(--text-primary-rgb, 44, 37, 35), 0.45);
    --v3-surface: var(--bg-secondary, #ffffff);
    --v3-surface-sub: var(--bg-primary, #f8f6f3);
    --v3-line: var(--border-color, rgba(120, 96, 62, 0.25));
    --v3-line-soft: var(--border-light, rgba(120, 96, 62, 0.15));
}

/* ───────────────────────────────────────────────
   1. 상단바
   ─────────────────────────────────────────────── */
:is(body[class*="v3plus"], body) header {
    background: var(--v3-surface, #fff);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* 기존의 2px 골드 실선 대신 얇고 또렷한 경계 + 아래로 옅은 그림자 */
    border-bottom: 1px solid var(--v3-line, rgba(120, 96, 62, 0.3));
    box-shadow: 0 1px 0 rgba(var(--v3-warm, 120, 96, 62), 0.06);
    padding: 0 1.25rem;
}

:is(body[class*="v3plus"], body) .nav-container {
    max-width: 1080px;
    /* height 고정 대신 패딩으로 높이를 만든다 (모바일 세로 배치 대응) */
    height: auto;
    min-height: 0;
    padding: 0.5rem 0;
    gap: 0.75rem;
}

:is(body[class*="v3plus"], body) .logo {
    font-family: 'Noto Serif KR', serif !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    gap: 0.45rem !important;
    line-height: 1.2;
    white-space: nowrap;
}
/* style.css 의 .logo-svg { height: 48px !important } 를 되돌린다 */
:is(body[class*="v3plus"], body) .logo img,
:is(body[class*="v3plus"], body) .logo .logo-svg {
    height: 30px !important;
    width: auto !important;
}
:is(body[class*="v3plus"], body) .logo-suffix {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--v3-ink-soft);
    padding: 0.1rem 0.32rem;
    border: 1px solid var(--v3-line-soft);
    border-radius: 4px;
    background: var(--v3-surface-sub);
}

:is(body[class*="v3plus"], body) .nav-links {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    border-top: none;
    margin: 0;
    padding: 0;
    width: auto;
}
:is(body[class*="v3plus"], body) .nav-links a {
    margin-left: 0;
    padding: 0.34rem 0.6rem;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--v3-ink-soft);
    border-radius: 5px;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
}
:is(body[class*="v3plus"], body) .nav-links a:hover {
    color: var(--v3-ink);
    background: var(--v3-surface-sub);
}
:is(body[class*="v3plus"], body) .nav-links a.active {
    color: var(--v3-accent);
    background: rgba(var(--v3-gold, 197, 168, 128), 0.22);
}

/* 스크롤 진행 헤어라인 — transform 기반이므로 JS 도 transform 을 쓴다 */
:is(body[class*="v3plus"], body) .scroll-progress {
    bottom: -1px;
    height: 2px;
    background: var(--v3-accent);
    opacity: 0.9;
}

/* 모바일: style.css 가 세로 배치로 바꾸는 구간을 조밀하게 다듬는다 */
@media (max-width: 768px) {
    :is(body[class*="v3plus"], body) header { padding: 0 0.9rem; }
    :is(body[class*="v3plus"], body) .nav-container {
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 0.45rem 0 0;
    }
    :is(body[class*="v3plus"], body) .logo {
        font-size: 0.95rem !important;
        margin-top: 0 !important;
    }
    :is(body[class*="v3plus"], body) .logo img,
    :is(body[class*="v3plus"], body) .logo .logo-svg { height: 26px !important; }
    :is(body[class*="v3plus"], body) .nav-links {
        width: 100%;
        justify-content: center;
        gap: 0.1rem;
        margin-top: 0.4rem;
        padding: 0.3rem 0;
        border-top: 1px solid var(--v3-line-soft);
    }
    :is(body[class*="v3plus"], body) .nav-links a {
        font-size: 0.78rem;
        padding: 0.26rem 0.5rem;
        border-radius: 5px;
    }
}

/* ───────────────────────────────────────────────
   2. 푸터
   ─────────────────────────────────────────────── */
/* style.css 의 footer 규칙(패딩 3rem, 가운데 정렬)을 걷어낸다 */
:is(body[class*="v3plus"], body) footer.v3-footer {
    padding: 0;
    text-align: left;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    background: var(--v3-surface);
    border-top: 1px solid var(--v3-line);
    margin-top: 2.5rem;
}
:is(body[class*="v3plus"], body) .v3-footer-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 1.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
}
:is(body[class*="v3plus"], body) .v3-footer-main { min-width: 0; }
:is(body[class*="v3plus"], body) .v3-footer-title {
    font-size: 0.885rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--v3-ink);
    margin: 0 0 0.4rem;
    font-family: 'Noto Serif KR', serif;
}
:is(body[class*="v3plus"], body) .v3-footer-info {
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--v3-ink-soft);
    margin: 0;
    word-break: keep-all;
}
:is(body[class*="v3plus"], body) .v3-footer-nav {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
:is(body[class*="v3plus"], body) .v3-footer-nav a {
    font-size: 0.775rem;
    font-weight: 600;
    color: var(--v3-ink-soft);
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--v3-line-soft);
    border-radius: 5px;
    background: var(--v3-surface-sub);
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}
:is(body[class*="v3plus"], body) .v3-footer-nav a:hover {
    color: var(--v3-accent);
    border-color: var(--v3-accent);
}
:is(body[class*="v3plus"], body) .v3-footer-copy {
    border-top: 1px solid var(--v3-line-soft);
    padding: 0.7rem 1.25rem;
    font-size: 0.735rem;
    color: var(--v3-ink-faint);
    text-align: center;
    background: var(--v3-surface-sub);
}

@media (max-width: 720px) {
    :is(body[class*="v3plus"], body) footer.v3-footer { margin-top: 1.5rem; }
    :is(body[class*="v3plus"], body) .v3-footer-inner { padding: 1.15rem 1rem 1rem; }
    /* 좁은 화면에서 링크 버튼이 한 줄을 넘겨 가로로 잘리던 것을
       여러 행으로 나눠 담고, 각 행을 꽉 채우도록 늘린다 */
    :is(body[class*="v3plus"], body) .v3-footer-nav {
        flex-wrap: wrap;
        flex-shrink: 1;
        width: 100%;
        gap: 0.4rem;
    }
    :is(body[class*="v3plus"], body) .v3-footer-nav a {
        flex: 1 1 auto;
        text-align: center;
        padding: 0.42rem 0.5rem;
    }
    /* 하단 고정 제출바에 가리지 않게 */
    body[class*="apply"] .v3-footer-copy { padding-bottom: 5.5rem; }
}
@media print {
    :is(body[class*="v3plus"], body) footer.v3-footer,
    :is(body[class*="v3plus"], body) header { display: none !important; }
}

/* ───────────────────────────────────────────────
   3. 다크 모드 크롬 (상단바 / 푸터) 대비 보정
   ─────────────────────────────────────────────── */
.dark-mode :is(body[class*="v3plus"], body) header {
    background: rgba(19, 28, 53, 0.96) !important;
    border-bottom: 1px solid rgba(107, 155, 210, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
.dark-mode :is(body[class*="v3plus"], body) .logo {
    color: #f0c040 !important;
}
.dark-mode :is(body[class*="v3plus"], body) .nav-links a {
    color: #cbd5e1 !important;
}
.dark-mode :is(body[class*="v3plus"], body) .nav-links a:hover,
.dark-mode :is(body[class*="v3plus"], body) .nav-links a.active {
    color: #f0c040 !important;
    background: rgba(240, 192, 64, 0.15) !important;
}
.dark-mode :is(body[class*="v3plus"], body) footer.v3-footer {
    background: rgba(12, 18, 37, 0.98) !important;
    border-top: 1px solid rgba(107, 155, 210, 0.25) !important;
    color: #cbd5e1 !important;
}
.dark-mode :is(body[class*="v3plus"], body) .v3-footer-title {
    color: #f8fafc !important;
}
.dark-mode :is(body[class*="v3plus"], body) .v3-footer-info {
    color: #94a3b8 !important;
}
.dark-mode :is(body[class*="v3plus"], body) .v3-footer-nav a {
    background: rgba(30, 48, 96, 0.5) !important;
    border-color: rgba(107, 155, 210, 0.3) !important;
    color: #cbd5e1 !important;
}
.dark-mode :is(body[class*="v3plus"], body) .v3-footer-copy {
    background: rgba(10, 15, 32, 0.9) !important;
    border-top-color: rgba(107, 155, 210, 0.2) !important;
    color: #94a3b8 !important;
}