/* URL.KR v2 - 레이아웃(헤더·푸터·우측 퀵메뉴)
   모든 v2 프런트 화면이 같은 헤더·푸터·퀵메뉴를 쓴다. 여기를 고치면 전 페이지에 반영된다.
   토큰은 tokens.css, 공통 컴포넌트는 base.css, 메인 전용은 home.css. */

/* ── 헤더 ─────────────────────────────────────────────── */
.hv2-header { position: sticky; top: 0; z-index: 80; background: var(--band); color: #fff; box-shadow: 0 2px 10px rgb(40 66 67 / 12%); }
.hv2-page :where([id]) { scroll-margin-top: 88px; }
.hv2-header-in { display: flex; align-items: center; gap: 20px; min-height: 72px; }
.hv2-brand { font-size: 26px; font-weight: 700; letter-spacing: -.03em; color: #fff; display: inline-flex; align-items: baseline; }
.hv2-brand span { color: var(--accent-on-band); }
.hv2-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.hv2-nav a, .hv2-nav button { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 0; background: none; border-radius: var(--r-md); font-size: 15px; color: var(--band-link); }
.hv2-nav a:hover, .hv2-nav button:hover { color: #fff; background: rgb(255 255 255 / 8%); }
/* 헤더 CTA 는 벤치마크대로 작고 각지게 - 테두리 1px, 라운드 4px, 굵기 500.
   모바일에서는 아래 미디어쿼리가 조작 영역을 46px 로 되돌린다. */
.hv2-nav .hv2-nav-cta { background: var(--accent); color: #fff; font-weight: 500; padding: 6px 12px; min-height: 37px; line-height: 1.5; border: 1px solid var(--accent); border-radius: var(--r-sm); }
.hv2-nav .hv2-nav-cta:hover { background: var(--accent-deep); }
.hv2-nav form { margin: 0; }
.hv2-menu-btn { display: none; align-items: center; gap: 7px; margin-left: auto; min-height: 44px; padding: 8px 14px; background: transparent; color: #fff; border: 1px solid var(--border-invert); border-radius: var(--r-md); font-size: 14px; font-weight: 700; }
/* 열리면 '메뉴 ≡' → '닫기 ✕' 로 바꾼다 */
.hv2-menu-btn .hv2-menu-close, .hv2-menu-btn .hv2-i-close { display: none; }
.hv2-menu-btn[aria-expanded='true'] .hv2-menu-open, .hv2-menu-btn[aria-expanded='true'] .hv2-i-menu { display: none; }
.hv2-menu-btn[aria-expanded='true'] .hv2-menu-close { display: inline; }
.hv2-menu-btn[aria-expanded='true'] .hv2-i-close { display: inline-block; }
.hv2-menu-btn[aria-expanded='true'] { border-color: #fff; color: #fff; }

/* ── 푸터 ─────────────────────────────────────────────── */
.hv2-footer { background: var(--band); color: rgb(255 255 255 / 78%); padding: 44px 0 20px; font-size: 14px; }
.hv2-footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 26px; }
.hv2-footer-brand p { margin-top: 10px; line-height: 1.6; color: rgb(255 255 255 / 72%); }
.hv2-footer h2 { font-size: 14px; font-weight: 700; letter-spacing: .03em; color: #fff; }
.hv2-footer nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.hv2-footer nav h2 { margin-bottom: 6px; }
/* 밑줄 대신 호버 시 굵기 + 로고 '.KR' 색으로 알린다. */
.hv2-footer :where(nav, address, .hv2-footer-bottom) a { color: var(--band-link); text-decoration: none; }
.hv2-footer :where(nav, address, .hv2-footer-bottom) a:hover { color: var(--accent-on-band); font-weight: 700; }
.hv2-footer nav a { padding-block: 5px; }
.hv2-affiliate { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border-invert); font-size: 12.5px; line-height: 1.7; color: rgb(255 255 255 / 62%); }
.hv2-footer address { margin-top: 10px; font-style: normal; font-size: 12.5px; line-height: 1.7; color: rgb(255 255 255 / 68%); }
.hv2-footer address span { margin-right: 14px; }
.hv2-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-invert); font-size: 12.5px; }

/* ── 우측 퀵메뉴 ──────────────────────────────────────── */
/* 본문 폭이 1140px 라, 1400px(Bootstrap xxl) 미만에서는 바를 놓을 여백이 없다.
   그 아래에서는 본문을 가리지 않도록 TOP 만 우측 하단에 남긴다. */
/* 면은 딥틸이라 밝은 섹션에서는 그대로 떠 보인다. 같은 색인 푸터·정의 밴드 위에서만
   묻히므로 흰 테두리로 경계를 만든다(면색을 바꾸면 밝은 섹션에서 같은 문제가 생긴다). */
.hv2-quick { position: fixed; top: 50%; right: 20px; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column; width: 76px; background: var(--band); border: 1px solid #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-float); }
.hv2-quick-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 13px 6px; border: 0; background: none; color: #fff; font-family: inherit; font-size: 12px; line-height: 1.25; letter-spacing: -.01em; }
.hv2-quick-item + .hv2-quick-item { border-top: 1px solid var(--border-invert); }
.hv2-quick-item .hv2-icon { font-size: 19px; }
.hv2-quick-item:hover { background: rgb(255 255 255 / 10%); color: var(--accent-on-band); }
/* TOP 은 어느 정도 내렸을 때만 나타난다(home-v2.js) */
.hv2-quick-top { display: none; }
.hv2-quick-top.is-visible { display: flex; }

@media (max-width: 1399px) {
    /* TOP 하나만 남는 구간이라, TOP 이 숨으면 빈 껍데기의 흰 테두리가 선으로 보인다.
       컨테이너째 숨기고 TOP 이 나타날 때만 띄운다(has-top 은 home-v2.js 가 붙인다). */
    .hv2-quick { top: auto; bottom: 16px; right: 12px; width: 46px; transform: none; display: none; }
    .hv2-quick.has-top { display: flex; }
    .hv2-quick-item:not(.hv2-quick-top) { display: none; }
    .hv2-quick-item { padding: 11px 4px; }
    .hv2-quick-label { display: none; }
}

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width: 991px) {
    .hv2-menu-btn { display: inline-flex; }
    .hv2-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 40; flex-direction: column; align-items: stretch; gap: 2px; background: var(--band); border-top: 1px solid var(--border-invert); padding: 12px 24px 20px; }
    .hv2-menu-btn[aria-expanded='true'] + .hv2-nav { display: flex; }
    /* 패널 기준을 헤더 전체로 잡는다. .hv2-header-in 은 본문 폭(100% - 48px)이라
       거기에 붙이면 좌우 24px 이 남아 화면을 다 덮지 못한다. */
    .hv2-nav { max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
    .hv2-nav a, .hv2-nav button { justify-content: flex-start; min-height: 46px; width: 100%; }
    /* 데스크톱은 벤치마크대로 37px 이지만 모바일 터치 영역은 44px 이상을 지킨다.
       .hv2-nav a 보다 특이도가 높아 여기서 명시적으로 되돌려야 한다. */
    .hv2-nav .hv2-nav-cta { justify-content: center; margin-top: 6px; min-height: 46px; }
    .hv2-footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
    .hv2-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .hv2-footer-top { gap: 22px 14px; }
    /* 데스크톱은 컴팩트하게 줄였지만 모바일에서는 터치 영역을 다시 넓힌다. */
    .hv2-footer nav a { padding-block: 9px; }
    .hv2-footer address { text-align: center; }
    .hv2-footer address span { display: block; margin-right: 0; }
}

@media print {
    .hv2-header, .hv2-menu-btn, .hv2-quick { display: none !important; }
    .hv2-footer { background: #fff !important; color: #000 !important; }
    .hv2-footer * { color: #000 !important; }
}