/* site.css — 고객 페이지 12개가 함께 쓰는 틀.
   설계: docs/superpowers/specs/2026-09-21-desktop-layout-design.md

   각 페이지의 인라인 <style> 뒤에 링크한다 — 여기 규칙이 이긴다.
   여기 두는 것: 폭·분기점, 상단 메뉴, 푸터, 모서리 토큰, 서브섹션 머리, 버튼.
   페이지마다 다른 2열 배치는 각 페이지의 @media (min-width: 960px) 블록에 둔다.

   색은 brand.json 의 값만 쓴다 (check_brand.py). 여기서 새 hex 를 만들지 않는다. */

:root {
  /* 모서리는 세 값뿐이다. 알약(100px·999px)은 쓰지 않는다. 원(50%)은 점·아바타·손잡이만. */
  --r-ctrl: 4px;    /* 버튼·입력칸·칩·태그·배지·검색창 */
  --r-card: 8px;    /* 카드·모달·시트·그림 틀·details */
  --r-frame: 12px;  /* 481~959px 의 카드 틀만 */
  --nav-h: 60px;
  --site-w: 1200px; /* 컨테이너 바깥 폭. 안쪽 여백 40px → 내용 1120px */
  --section-linen: #eae3d6; /* Approved natural linen for explanatory columns. */
  /* 파란 바탕 주 버튼의 그림자는 이 한 값 — 단지 페이지 첫 버튼(.cta-primary)과 같다 (2026-11-03 운영자 결정) */
  --shadow-cta: 0 8px 24px rgba(65,123,160,0.35), 0 2px 8px rgba(42,143,196,0.25);
}

/* 주 버튼 그림자 통일 — 상품(.cta-inline·바닥 바) · 신청 폼(.cta) · 내 필터(.main) · 결제 안내(.msg .btn).
   .cta-primary 는 각 페이지가 이미 같은 그림자를 들고 있다. 누를 수 없는 상태는 그림자를 뺀다. */
.cta-inline, .cta-bar a, .cta, .main, .msg a.btn, .msg button.btn { box-shadow: var(--shadow-cta); }
.cta:disabled, .main:disabled, .msg button.btn:disabled { box-shadow: none; }

/* ============================================
   상단 메뉴 — 한 마크업
   <nav class="nav"> 로고 + .nav-links(우리 단지 찾기·필터 세트·환기 가이드·내 필터 [+공유])
   ============================================ */
.nav {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: var(--nav-h); padding: 0 24px;
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg, rgba(245,242,235,0.92));
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav .logo { display: flex; align-items: center; text-decoration: none; flex: none; }
.nav .logo-img { height: 28px; width: auto; display: block; }
/* 320px 폰에서도 넘치지 않게 360px 아래로는 여백·로고·버튼 안쪽이 함께 줄어든다
   (360px 이상은 24·28·13·8 그대로, 320px 에서 16·24·8·5). 새 분기점 없이 vw 로 잇는다.
   '내 필터' 만 따로 줄이던 규칙(my-filter.css)은 이걸로 합쳤다 — 페이지를 옮겨도 머리가 같다. */
.nav { padding: 0 clamp(16px, 20vw - 48px, 24px); }
.nav .logo-img { height: clamp(24px, 10vw - 8px, 28px); }
.nav-links { display: flex; align-items: center; gap: clamp(5px, 7.5vw - 19px, 8px); min-width: 0; }
.nav-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 clamp(8px, 12.5vw - 32px, 13px);
  font-size: 12px; font-weight: 600; color: var(--ink); text-decoration: none;
  border-radius: var(--r-ctrl); border: 1px solid transparent; white-space: nowrap;
}
/* 폰에서는 가운데 두 링크를 숨긴다 — QR 로 들어온 사람의 첫 화면은 지금과 같다. */
.nav-opt { display: none; }
.nav-mine { background: var(--paper); border-color: var(--line); }
/* '내 필터' 앞의 작은 사람 이모지 — 글자보다 한 단계 작게, 밑선을 글자에 맞춘다. */
.nav-ico { font-size: 0.85em; line-height: 1; margin-right: 4px; }
.nav-find { background: var(--brand-fill); color: var(--paper); }
.nav-find:hover { background: var(--brand-fill-deep); }
.nav-share {
  width: 36px; height: 36px; flex: none; padding: 0; border-radius: var(--r-ctrl);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); cursor: pointer;
}
.nav-share svg { width: 17px; height: 17px; display: block; }
/* 결제·토큰 흐름 페이지는 데스크톱에서도 이탈 링크를 접는다. */
.nav.nav-quiet .nav-opt { display: none !important; }

/* 모바일만 전체 메뉴. 데스크톱 메뉴와 기존 공유 아이콘은 그대로 둔다. */
.nav-menu-button { width:36px; height:36px; flex:none; padding:0; border:1px solid var(--line); border-radius:var(--r-ctrl); background:var(--paper); color:var(--ink); font-size:23px; cursor:pointer; }
.nav-mobile-menu { position:absolute; right:16px; top:calc(100% + 8px); z-index:60; width:260px; max-width:calc(100vw - 32px); padding:12px 16px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--paper); color:var(--ink); }
.nav-mobile-menu[hidden] { display:none; }
.nav-mobile-menu a,.nav-mobile-menu button { display:block; width:100%; min-height:44px; padding:11px 0; border:0; background:none; color:var(--ink); text-align:left; text-decoration:none; font:inherit; font-size:16px; cursor:pointer; }
.nav-share-desktop { display:none; }
.journey-home-config { grid-column:1/-1; padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--line); text-align:left; }
.journey-home-config h2 { color:var(--ink); font-size:24px; line-height:1.4; margin-bottom:12px; }
.journey-home-config .text-link { display:block; margin-top:16px; }
/* 요청한 원형 되돌리기 버튼. 메뉴 아래에 둬 두 조작 영역이 겹치지 않게 한다. */
.journey-return { position:fixed; top:calc(var(--nav-h) + 16px); right:max(16px,env(safe-area-inset-right)); z-index:45; width:48px; height:48px; display:grid; place-items:center; padding:10px; border:1px solid var(--line); border-radius:50%; background:var(--paper); color:var(--brand-deep); cursor:pointer; }
.journey-return { top:calc(var(--journey-nav-bottom, var(--nav-h)) + var(--journey-pinned-height, 0px) + 16px); }
.journey-return svg { width:24px; height:24px; }
.journey-toc-slot { visibility:hidden; pointer-events:none; box-sizing:border-box; }
.home-toc { display:flex; flex-wrap:wrap; gap:8px; margin:0 24px; padding:18px 0; border-bottom:1px solid var(--line); }
.home-toc a { font-size:12.5px; font-weight:600; color:var(--brand-deep); background:var(--paper); border:1px solid var(--line); padding:7px 13px; border-radius:var(--r-ctrl); text-decoration:none; }
@media(min-width:960px) {
  .home-toc { margin:0; gap:10px 28px; align-items:baseline; counter-reset:toc; }
  .home-toc::before { content:'목차'; margin-right:12px; font-size:12px; font-weight:700; line-height:1.2; letter-spacing:.02em; color:var(--brand-deep); }
  .home-toc a { padding:0; background:none; border:0; font-size:14px; color:var(--ink); }
  .home-toc a::before { counter-increment:toc; content:counter(toc,decimal-leading-zero); font-family:'DM Sans',sans-serif; font-weight:700; font-size:12px; color:var(--brand-deep); margin-right:7px; }
  .home-toc a:hover { color:var(--brand-deep); text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--brand); }
}
.journey-has-toc #search { scroll-margin-top:calc(var(--journey-nav-height, var(--nav-h)) + 16px); }
.journey-toc-surface { position:fixed; top:var(--journey-nav-bottom, var(--nav-h)); z-index:43; background:var(--bg); border-bottom:1px solid var(--line); box-sizing:border-box; pointer-events:none; }
.journey-toc-surface[hidden] { display:none; }
.toc.journey-toc-fixed { position:fixed; top:var(--journey-nav-bottom, var(--nav-h)); left:var(--journey-toc-left); width:var(--journey-toc-width); margin:0; padding-top:12px; padding-bottom:12px; z-index:44; background:transparent; border-color:transparent; box-sizing:border-box; }
@media(min-width:960px) { .toc.journey-toc-fixed { padding-top:18px; padding-bottom:18px; } }
.journey-has-toc section[id], .journey-has-toc details[id] { scroll-margin-top:calc(var(--journey-nav-height, var(--nav-h)) + var(--journey-toc-height, 0px) + 16px); }
.toc a { color:var(--ink-soft, var(--ink)); padding:7px 10px; background:none; }
.toc a::before { color:inherit; }
.toc a:hover { color:var(--brand-deep); background:color-mix(in srgb, var(--brand) 6%, transparent); text-decoration:none; }
.toc a[aria-current="location"] { color:var(--brand-deep); background:color-mix(in srgb, var(--brand) 12%, transparent); text-decoration:none; }
@media(max-width:959px) {
  .toc { flex-wrap:nowrap; gap:20px; counter-reset:toc; overflow-x:auto; min-width:0; scrollbar-width:none; overscroll-behavior-x:contain; }
  .toc::-webkit-scrollbar { display:none; }
  .toc a { flex:none; white-space:nowrap; padding:7px 10px; border:0; border-radius:0; font-size:14px; }
  .toc a::before { counter-increment:toc; content:counter(toc,decimal-leading-zero); font-family:'DM Sans',sans-serif; font-weight:700; font-size:12px; margin-right:7px; }
  /* 옆으로 더 있으면 그쪽 끝을 흐리게 — 글자가 잘린 게 아니라 넘길 수 있다는 표시 (site-journey.js 가 data-more 를 단다) */
  .toc[data-more="right"] { -webkit-mask-image:linear-gradient(to right, black calc(100% - 40px), transparent); mask-image:linear-gradient(to right, black calc(100% - 40px), transparent); }
  .toc[data-more="left"] { -webkit-mask-image:linear-gradient(to left, black calc(100% - 40px), transparent); mask-image:linear-gradient(to left, black calc(100% - 40px), transparent); }
  .toc[data-more="both"] { -webkit-mask-image:linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent); mask-image:linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent); }
}
.aging-hero .photo-label { display:block; line-height:1.65; font-size:12px; color:var(--paper); }
.aging-hero .hero-model-entry { margin-top:12px; color:var(--paper); font-size:14px; line-height:1.7; }
.aging-hero .hero-model-entry a { color:var(--paper); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
@media(min-width:960px) { .nav-menu-button,.nav-mobile-menu { display:none!important; } .nav-share-desktop { display:inline-flex; } }

/* ============================================
   푸터 — 한 마크업
   ============================================ */
.footer {
  padding: 48px 24px; text-align: center;
  background: var(--bg-soft); color: var(--muted); border-top: 1px solid var(--line);
}
.footer .logo { display: flex; justify-content: center; margin-bottom: 16px; text-decoration: none; }
.footer .logo-img { height: 40px; width: auto; }
.footer-tagline { font-size: 14px; color: var(--brand-deep); font-weight: 600; margin-bottom: 18px; letter-spacing: -0.01em; }
.footer-meta { font-size: 11px; line-height: 1.7; color: var(--muted); }
.footer-links { margin-top: 16px; font-size: 11px; }
.footer-links a { color: var(--muted); text-decoration: none; margin: 0 8px; }
.footer-links a:hover { color: var(--ink); }

/* ============================================
   서브섹션 머리 — 알약 라벨을 걷어내고 글자 라벨 + 제목
   각 섹션은 <div class="section-head"> 로 라벨·제목·부제를 감싼다.
   ============================================ */
.section-label, .hero-label, .eyebrow.section-label {
  display: block; margin: 0 0 14px; padding: 0;
  background: none; border-radius: 0; box-shadow: none;
  font-size: 12px; font-weight: 700; line-height: 1.2;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-deep);
}
.section-label.ko { letter-spacing: 0.02em; }
.section-head { min-width: 0; }

/* ============================================
   모서리 — 페이지들이 함께 쓰는 선택자를 한 번에 각지게
   ============================================ */
.cta-primary, .btn, .go, .pay, .main, .otpbtn, .otp-btn, .cta, .mini, .buy-btn,
.search-btn, .request-btn, .popular-toggle, .popular-tag, .result-tag, .nearby-btn,
.danger-cta, .hint-toggle, .photo-pick, .pre-add, .stopbtn, .setbtn, .file,
input:not([type=checkbox]):not([type=radio]), select, textarea,
.tag, .badge, .stat, .elig, .hero-badge, .hero-eyebrow, .pr-tag, .chip,
.type-btn, .purchase-choice, .shipopt label, .pick, .planrow, .keep, .toast, .hit,
.hero .photo-buttons, .hero .photo-buttons button, .hero .micro-lens figcaption, .back-btn, .nav-cta {
  border-radius: var(--r-ctrl);
}
.card, .edu-card, .compare, .stats, .how-card, .scene-card, .danger-card, .info-card,
.spec-card, .price-card, .sv-modal, .modal, .sheet, .dorm, .intro, .note, .msg,
.search-box, .search-results, .co2-meter, .hv, .hv svg, .guide-details, .section-figure > a,
.danger-scene, .danger-scene > a, .sample-stage, .explore-stage, .fblock, .opt-toggle, .opt-body,
.guide, .sku-banner, .pool-note, .dim-rec, .mp-list, .lp-prev, .calc, .renewbox, .oncenote, .compat,
details, .fig img, .photo-preview img, .sv-hero, .sv-fold, .filter-card, .done, .sblk {
  border-radius: var(--r-card);
}
/* 폰의 바닥 시트는 위 두 모서리만 */
@media (max-width: 480px) {
  .sheet { border-radius: var(--r-card) var(--r-card) 0 0; }
}
/* 단계 번호 — 원 없이 숫자만 */
.visual-steps .step-num, .step .n, .visual-process li::before, .sec-title .num-en {
  width: auto; height: auto; border-radius: 0; background: none; color: var(--brand);
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 20px; line-height: 1;
}
.visual-process li::before { top: 2px; }

/* ============================================
   481~959 — 지금의 카드 틀을 유지하되 모서리만 12px
   ============================================ */
@media (min-width: 481px) and (max-width: 959px) {
  .wrap { border-radius: var(--r-frame); }
}

/* ============================================
   ≥ 960 — 데스크톱
   ============================================ */
@media (min-width: 960px) {
  :root { --nav-h: 88px; --bleed: calc(50% - 50vw); --bleed-pad: calc(50vw - 50%); }
  /* 100vw 는 스크롤바 폭을 포함해 몇 px 넘친다 — 가로 스크롤이 생기지 않게 막는다 */
  body { background: var(--bg); padding: 0; overflow-x: hidden; }
  .wrap {
    max-width: var(--site-w); margin: 0 auto; padding: 0 40px;
    box-shadow: none; border-radius: 0; overflow: visible; background: var(--bg);
  }

  /* 상단 메뉴: 글자 링크, 현재 페이지는 밑줄. 순서는 우리 단지 찾기 · 필터 세트 · 환기 가이드 · 내 필터 */
  /* 화면 가장자리까지 깔고, 안쪽 여백으로 내용은 1120px 틀에 맞춘다 (.wrap 의 padding 40px 기준) */
  .nav { margin: 0 var(--bleed); padding: 0 var(--bleed-pad); }
  .nav .logo-img { height: 32px; }
  .nav-links { gap: 28px; }
  .nav-opt { display: inline-flex; }
  .nav-link { padding: 0; font-size: 14px; border: 0; background: none; color: var(--ink); border-radius: 0; }
  .nav-link[aria-current="page"] { color: var(--brand-deep); box-shadow: inset 0 -2px 0 var(--brand); }
  .nav-link:hover { color: var(--brand-deep); }
  .nav-find, .nav-find:hover { padding: 0; background: none; color: var(--ink); }
  .nav-find:hover { color: var(--brand-deep); }
  .nav-share { margin-left: 4px; }

  /* 섹션: 왼쪽 280px 에 머리, 오른쪽에 내용. 배경띠 대신 선. */
  .section, .warning-section {
    display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 0 64px;
    padding: 72px 0; border-top: 1px solid var(--line); background: none;
  }
  /* 행 간격은 0 — 머리가 여러 행에 걸치므로 row-gap 을 주면 빈 행마다 간격이 쌓여 페이지가 늘어난다.
     내용 사이 간격은 각 요소의 margin 이 맡는다. */
  .section > *, .warning-section > * { grid-column: 2; min-width: 0; }
  .section > .section-head, .warning-section > .section-head { grid-column: 1; grid-row: 1 / span 80; align-self: start; position: sticky; top: calc(var(--nav-h) + 24px); }
  .journey-has-toc .section > .section-head { top:calc(var(--journey-nav-bottom, var(--nav-h)) + var(--journey-pinned-height, 0px) + 24px); }
  .section-head .section-title, .section-head h2 { font-size: 32px; line-height: 1.28; margin-bottom: 14px; }
  .section-head .section-desc { margin-bottom: 0; }
  .section-figure { margin: 0 0 22px; }
  .section-figure { max-width: none; }
  .section-content img { max-width: 100%; }
  /* (5)(10) 표·카드·단계처럼 핵심 정보를 왼쪽 머리 열에 두는 섹션은 열을 넓힌다 */
  .section.head-wide, .warning-section.head-wide { grid-template-columns: 420px minmax(0, 1fr); }
  .section-head > :not(.section-label):not(.section-title):not(h2):not(.section-desc) { margin-top: 24px; }
  /* DANGER 띠는 어두운 배경을 지킨다 — 위 규칙의 background:none 을 되돌린다 */
  .warning-section { padding: 72px var(--bleed-pad); margin: 0 var(--bleed); background: var(--ink); border-top: 0; overflow: visible; }
  .warning-section > * { grid-column: 2; }

  /* 마지막 CTA: 왼쪽 문장, 오른쪽 버튼 */
  .final-cta { padding: 64px 0; border-top: 1px solid var(--line); text-align: left; background: none; }
  .final-cta .cta-content { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
  .final-cta h2 { margin: 0; font-size: 30px; }

  /* 푸터: 태그라인과 링크를 한 줄에 */
  .footer { padding: 40px var(--bleed-pad); margin: 0 var(--bleed); text-align: left; }
  .footer-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 18px; }
  .footer .logo { justify-content: flex-start; margin: 0; }
  .footer-tagline { margin: 0; font-size: 16px; }
  /* 링크 사이 '·' 는 텍스트 노드라 선택할 수 없다 — 글자 크기 0 으로 숨기고 링크만 되살린다 */
  .footer-links { margin: 0; font-size: 0; }
  .footer-links a { margin: 0 0 0 20px; font-size: 13px; }
  .footer-meta { font-size: 12px; }

  /* 고정 바닥 바는 데스크톱에서 접는다 — 오른쪽 열이 그 자리다 */
  .sticky-cta, .cta-bar { display: none; }
}

/* 모션 축소: 여기서 새로 넣은 전환은 없다. 각 페이지의 prefers-reduced-motion 블록이 그대로 산다. */

/* Shared explanatory surfaces. Dark warning sections retain their own palette. */
@media (min-width: 960px) {
  .wrap > .section > .section-head,
  .apt-explain .section > .section-head,
  .apt-explain .proof > .section-head,
  .apt-explain .faq > .section-head,
  .legal-layout > .legal-nav,
  .wrap > .steps,
  .wrap > .product-info {
    background: var(--section-linen);
    border: 0; border-radius: var(--r-card); padding: 24px 20px;
  }
  .wrap > .section > .section-head .info-card,
  .apt-explain .section > .section-head .info-card,
  .apt-explain .faq > .section-head .info-card {
    background: color-mix(in srgb, var(--paper) 64%, var(--section-linen));
    border-color: color-mix(in srgb, var(--line) 55%, var(--section-linen));
    box-shadow: none;
  }
  .wrap > .section > .section-head .visual-callout,
  .apt-explain .section > .section-head .visual-callout {
    border-left: 0; padding-left: 0; background: none;
  }
  .legal-layout > .legal-nav ol { border-left: 0; }
  .legal-layout > .legal-nav a { border-left: 0; margin-left: 0; padding-left: 0; }
}