/* 서브페이지 공통 모듈: Page Title · Hero Visual · Product Sub Nav · Final CTA · Pagination */
/* ---------- 서브페이지 기본: 고정 헤더 높이만큼 본문을 내림 ---------- */
.page-sub main { padding-top:var(--header-height) }
html:has(.sub-nav) { scroll-padding-top:calc(var(--header-height) + var(--subnav-height) + 20px) }
main [tabindex="-1"]:focus { outline:none }

/* ---------- Page Title: 가운데 정렬 H1 ---------- */
.page-title { padding-block:64px; text-align:center }
.page-title--tall { padding-block:96px 72px }
.page-title h1 { font:700 64px/68px var(--font-head); color:var(--text-heading) }
.page-title__sub { margin-top:16px; font-size:18px; line-height:28px; color:var(--text-body) }

/* ---------- Hero Visual: 배경 이미지 + 오버레이 + 가운데 카피 ---------- */
.hero-visual { position:relative; display:flex; align-items:center; justify-content:center; min-height:520px; margin-inline:max(96px,calc((100% - 1728px)/2)); padding:72px 48px; overflow:hidden; background:var(--color-black); color:white; text-align:center }
.hero-visual__image { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover }
.hero-visual__overlay { position:absolute; inset:0; background:linear-gradient(90deg,#1c1b2933 0%,#1c1b2999 28%,#1c1b2999 72%,#1c1b2933 100%) }
.hero-visual__copy { position:relative; display:grid; gap:24px; width:100%; max-width:var(--content-width) }
.hero-visual .eyebrow { color:white }
.hero-visual__title { font:700 80px/88px var(--font-head) }
.hero-visual__guide { font-size:28px; font-weight:700; line-height:42px }
.hero-visual__description { font-size:16px; line-height:24px }

/* 스크롤 확장: sub.js가 .is-active와 크기를 지정합니다. JS 미동작·모션 최소화에서는 기본 레이아웃을 유지합니다. */
.hero-stage.is-active .hero-visual { position:sticky; top:0; min-height:0 }

/* ---------- Product Sub Nav: 헤더 아래 고정되는 섹션 탐색 ---------- */
.sub-nav { position:sticky; top:var(--header-height); z-index:80; background:var(--color-black); color:white; transition:top .25s }
/* 아래로 스크롤하면 Header가 숨고 Sub Nav만 상단에 고정됩니다. */
.is-header-hidden .sub-nav { top:0 }
.sub-nav__inner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:var(--subnav-height); padding-block:12px }
.sub-nav__list { display:flex; gap:12px; min-width:0; overflow-x:auto; scrollbar-width:none }
.sub-nav__list::-webkit-scrollbar { display:none }
.sub-nav__link { position:relative; display:flex; align-items:center; justify-content:center; min-width:136px; min-height:44px; padding:4px 12px; font-size:13px; font-weight:500; line-height:20px; white-space:nowrap; transition:background-color .2s }
.sub-nav__link[aria-current="true"]::after { content:""; position:absolute; left:12px; right:12px; bottom:0; height:2px; background:var(--color-red) }
.sub-nav__link:focus-visible { background:var(--surface-on-dark) }
.sub-nav__actions { display:flex; flex:none; align-items:center; gap:24px }
.sub-nav__catalog { display:inline-flex; align-items:center; gap:4px; min-height:44px; font-size:13px; font-weight:500; line-height:20px; white-space:nowrap }
.sub-nav__catalog img { flex:none; width:16px; height:16px }
.sub-nav__catalog:focus-visible { text-decoration:underline }
@media(hover:hover) {
    .sub-nav__link:hover { background:var(--surface-on-dark) }
    .sub-nav__catalog:hover { text-decoration:underline }
}

/* ---------- Final CTA: 푸터 앞 공통 문의 영역 ---------- */
.final-cta { display:flex; align-items:center; min-height:420px; padding-block:72px; background:var(--color-black); color:white; text-align:center }
.final-cta__inner { display:grid; justify-items:center; gap:40px }
.brand-band { display:grid; grid-template-columns:132px 60px 48px; height:4px }
.brand-band span:nth-child(1) { background:var(--text-heading) }
.brand-band span:nth-child(2) { background:var(--color-red) }
.brand-band span:nth-child(3) { background:var(--color-gold) }
.final-cta__title { font:700 64px/68px var(--font-head) }
.final-cta__actions { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; width:100% }
.final-cta__actions .button { min-width:min(300px,100%); min-height:56px; text-align:left }

/* ---------- Pagination ---------- */
.pagination { padding-top:8px }
.pagination__list { display:flex; flex-wrap:wrap; justify-content:center; gap:6px }
.pagination__link { display:grid; place-items:center; min-width:44px; min-height:44px; padding:4px; font:500 17px/1 var(--font-head); color:var(--text-body); transition:background-color .2s,color .2s }
.pagination__link svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5 }
.pagination__link--arrow { color:var(--color-black) }
.pagination__link[aria-current="page"] { background:var(--color-black); color:white; font-weight:700 }
.pagination__link[aria-disabled="true"] { color:var(--color-muted); pointer-events:none }
.pagination__link:not([aria-current]):focus-visible { background:var(--surface); color:var(--color-black) }
@media(hover:hover) {
    .pagination__link:not([aria-current]):hover { background:var(--surface); color:var(--color-black) }
}

/* ---------- Tabs: 화면 내 필터 ---------- */
.tabs { display:flex; flex-wrap:wrap; gap:8px 32px }
.tabs__tab { min-height:56px; padding:16px 24px; line-height:24px; color:var(--text-body); transition:background-color .2s,color .2s }
.tabs__tab[aria-selected="true"] { background:var(--color-black); color:white }
.tabs__tab:not([aria-selected="true"]):focus-visible { background:var(--surface); color:var(--color-black) }
@media(hover:hover) {
    .tabs__tab:not([aria-selected="true"]):hover { background:var(--surface); color:var(--color-black) }
}

/* ---------- 어두운 배경 위 포커스 표시 ---------- */
.sub-nav :focus-visible,.final-cta :focus-visible { outline-color:white }

/* ---------- 반응형: 1599px 이하 ---------- */
@media(max-width:1599px) {
    .page-title h1 { font-size:56px; line-height:1.1 }
    .hero-visual { margin-inline:var(--gutter) }
    .hero-visual__title { font-size:72px; line-height:1.1 }
    .sub-nav__list { gap:4px }
    .sub-nav__link { min-width:96px }
    .sub-nav__actions { gap:16px }
    .sub-nav__actions .button { min-width:160px }
    .final-cta__title { font-size:56px; line-height:1.1 }
}

/* ---------- 반응형: 1199px 이하 (태블릿) ---------- */
@media(max-width:1199px) {
    .tabs { gap:8px }
    .page-title { padding-block:48px }
    .page-title--tall { padding-block:64px 48px }
    .page-title h1 { font-size:48px }
    .hero-visual { min-height:420px; padding:56px 32px }
    .hero-visual__copy { gap:16px }
    .hero-visual__title { font-size:60px }
    .hero-visual__guide { font-size:24px; line-height:1.5 }
    /* 탭 폭이 좁아 섹션 링크만 남기고, 카탈로그·문의는 Hero와 Final CTA에서 제공 */
    .sub-nav__actions { display:none }
    .sub-nav__inner { padding-block:8px }
    .sub-nav__list { flex:1; margin-inline:calc(var(--gutter)*-1); padding-inline:var(--gutter) }
    .sub-nav__link { flex:1 0 auto; min-width:0 }
    .final-cta { min-height:0; padding-block:64px }
    .final-cta__title { font-size:48px }
    .final-cta__actions { gap:16px }
    .final-cta__actions .button { flex:1 1 200px; min-width:0 }
}

/* ---------- 반응형: 767px 이하 (모바일) ---------- */
@media(max-width:767px) {
    .page-title,.page-title--tall { padding-block:40px 32px }
    .page-title h1 { font-size:clamp(34px,8.8vw,48px); line-height:1.08 }
    .page-title__sub { margin-top:12px; font-size:16px; line-height:24px }
    .hero-visual { min-height:360px; padding:48px 20px }
    .hero-visual__overlay { background:#1c1b29a6 }
    .hero-visual__title { font-size:clamp(38px,10vw,56px) }
    .hero-visual__guide { font-size:20px }
    .hero-visual__description { font-size:14px; line-height:1.7 }
    .final-cta { padding-block:56px }
    .final-cta__inner { gap:32px }
    .final-cta__title { font-size:clamp(34px,8.8vw,48px); line-height:1.08 }
    .final-cta__actions { flex-direction:column; gap:12px }
    .final-cta__actions .button { flex:none; width:100% }
    .pagination__list { gap:1px }
}