/* 나이픽 — 사이트 CSS. 목업(docs/mockup/home.html 머리)의 토큰·구조를 그대로 옮겼다.
   대비(WCAG 2.x, 2026-10-14 계산 — WCAG relative luminance 와 같은 식):
   라이트  ink/ground 14.89 · ink/surface 16.10 · dim/ground 6.06 · dim/surface 6.56
           mark/ground 7.23 · mark/surface 7.82 · on-mark/mark 7.82
           bar/surface 3.10 (그래픽 3:1 이상, 글자에는 쓰지 않는다)
   다크    ink/ground 14.91 · ink/surface 13.59 · dim/ground 7.74 · dim/surface 7.05
           mark/ground 8.53 · mark/surface 7.77 · on-mark/mark 8.53
           bar/surface 3.66
   강조색(--mark, 자두색)은 화면에 한 번: '지금 고른 나이대'(홈 칸·지도 칩)·순위 화면의 고른 분류 칩·상세의 큰 숫자.
   연령 막대의 '고른 칸'은 --ink 다 — 강조색을 두 번 쓰지 않으려고. 빨강은 오류 전용이라 쓰지 않는다.
   새 색을 만들지 않았다. 만들면 대비를 재서 여기 적는다. */
:root {
  --ground: #F5F6F8; --surface: #FFFFFF; --ink: #1A2130; --dim: #545E6E;
  --line: #D5DAE1; --mark: #8C2B6E; --on-mark: #FFFFFF; --bar: #8A93A2;
  color-scheme: light;
  /* famousbros 공용 부품(fb.css) 값 — 기존 토큰을 가리킨다(G:\workspace\DESIGN.md '토큰'). 다크는 기존 토큰을 따라간다.
     실측(2026-10-16): ink surface 16.10(다크 13.59) · dim surface 6.56(다크 7.05) ·
     accent 자두색 --mark 위 흰 글자 7.82:1(다크 #E79ACB 위 #13161C 8.53:1).
     현재 칸은 이 사이트 규칙대로 잉크(강조색은 화면에 한 번 — 고른 나이대·칩·큰 숫자) — 아래 '머리'. */
  --fb-bg: var(--ground); --fb-surface: var(--surface); --fb-ink: var(--ink); --fb-muted: var(--dim); --fb-line: var(--line);
  --fb-accent: var(--mark); --fb-on-accent: var(--on-mark); --fb-max: 1040px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #13161C; --surface: #1B1F27; --ink: #E7E9EE; --dim: #A2AAB7;
    --line: #323844; --mark: #E79ACB; --on-mark: #13161C; --bar: #6E7787;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #13161C; --surface: #1B1F27; --ink: #E7E9EE; --dim: #A2AAB7;
  --line: #323844; --mark: #E79ACB; --on-mark: #13161C; --bar: #6E7787;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  word-break: keep-all; overflow-wrap: anywhere;
}
img, svg { max-width: 100%; }
a { color: inherit; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
code { font-size: 14px; overflow-wrap: anywhere; }

.skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; min-height: 44px; background: var(--surface); border: 1px solid var(--line); }
.skip:focus { top: 8px; }

/* 머리 — 틀은 fb.css 의 .fb-nav(폰에서는 아래 탭바). 끝 칸(근거/더보기)만 폭에 따라 바꿔 끼운다 */
.logo { align-items: baseline; gap: 8px; }
.logo b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.logo span { color: var(--dim); font-size: 13px; font-weight: 400; }
.nav .nav-narrow { display: none; }
.fb-nav__links a[aria-current] { background: color-mix(in srgb, var(--ink) 8%, transparent); }  /* 현재 칸은 잉크 물 — 강조색은 화면에 한 번 */
@media (max-width: 719px) {
  .nav .nav-wide { display: none; }
  .nav .nav-narrow { display: inline-flex; }
  .fb-nav__links a[aria-current] { color: var(--ink); }
  .fb-nav__bar .logo span { display: none; }  /* 폰 막대는 이름만 — 부제는 푸터·히어로가 말한다 */
}

/* 나이대 2차 띠(/age/…) — 글자 링크 7칸, 줄바꿈(가로 스크롤 없음). 현재 칸은 밑줄 — 강조색은 화면의 다른 한 곳 몫 */
.band-strip { margin-top: 8px; }
.band-strip ul { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 auto; list-style: none; }
.band-strip a { display: block; min-height: 44px; padding: 10px 8px; color: var(--dim); text-decoration: none; font-size: 15px; }
.band-strip a:hover { color: var(--ink); text-decoration: underline; }
.band-strip a[aria-current="page"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--ink); }

main.wrap { padding-top: 32px; padding-bottom: 64px; }
h1, h2, h3 { line-height: 1.3; letter-spacing: -0.02em; }
h1 { font-size: 28px; margin: 0 0 8px; }
h2 { font-size: 20px; margin: 44px 0 8px; }
h3 { font-size: 17px; margin: 24px 0 8px; }
h2 small, h3 small { font-weight: 400; }
p { margin: 0 0 12px; }
.lede { color: var(--dim); max-width: 40em; }
.meta { color: var(--dim); font-size: 14px; }

/* 나이대 고르기 — 이 사이트의 주인공. 숫자 자체가 버튼이다 */
.ages { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 24px 0 0; padding: 0; list-style: none; }
.ages a {
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 96px; padding: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px; text-decoration: none;
}
.ages a b { font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.ages a span { color: var(--dim); font-size: 14px; margin-top: 4px; }
.ages a:hover { border-color: var(--ink); }
.ages a[aria-current="true"] { background: var(--mark); border-color: var(--mark); color: var(--on-mark); }
.ages a[aria-current="true"] span { color: var(--on-mark); }

/* 정렬 고르기 — 칸 하나, 보기 둘 */
.sort { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0 0 12px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.seg a { min-height: 44px; padding: 10px 16px; text-decoration: none; color: var(--dim); background: var(--surface); }
.seg a + a { border-left: 1px solid var(--line); }
.seg a[aria-current="true"] { color: var(--ground); background: var(--ink); font-weight: 700; }

/* 순위 목록 — 줄 전체가 링크(처음부터 앵커를 grid 로 깐다, intype .plist__i a 방식) */
.rank { margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.rank li + li { border-top: 1px solid var(--line); }
.rank a {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) 72px; grid-template-areas: "n name x" "n strip x";
  gap: 4px 12px; align-items: center; min-height: 64px; padding: 12px 16px; text-decoration: none;
}
.rank a:hover .name { text-decoration: underline; }
.rank .n { grid-area: n; color: var(--dim); font-weight: 700; font-variant-numeric: tabular-nums; }
.rank .name { grid-area: name; font-weight: 700; }
.rank .name small { color: var(--dim); font-weight: 400; font-size: 13px; margin-left: 8px; }
.rank .strip { grid-area: strip; }
.rank .x { grid-area: x; text-align: right; font-variant-numeric: tabular-nums; }
.rank .x b { display: block; font-size: 20px; line-height: 1.1; }
.rank .x span { color: var(--dim); font-size: 12px; }

/* 연령 막대 — 칸 너비 = 비중. 고른 나이대만 진하게, 글자로도 같이 적는다(색만으로 구분 금지) */
.strip { display: flex; gap: 2px; height: 8px; }
.strip i { display: block; background: var(--bar); border-radius: 1px; }
.strip i.on { background: var(--ink); }

.more-link { display: inline-block; min-height: 44px; padding: 10px 0; font-weight: 700; }

.note { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 16px; }
.note ul { margin: 0; padding-left: 20px; }
.note li + li { margin-top: 4px; }
.note p:last-child { margin-bottom: 0; }
.collecting { margin: 16px 0 0; }
.collecting__h { font-weight: 700; }
.formula p { margin: 0 0 8px; }

/* 장소 이름 목록 — 칸마다 44px 링크 */
.plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.plist a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; text-decoration: none; }
.plist a:hover { border-color: var(--ink); text-decoration: underline; }

/* 나이대 허브 — 여섯 묶음 */
.hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.hub h2 { margin-top: 32px; }

/* 더보기 격자 — 제목 있는 두 묶음 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.grid a { display: flex; flex-direction: column; min-height: 64px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; text-decoration: none; }
.grid a:hover b { text-decoration: underline; }
.grid span { color: var(--dim); font-size: 14px; }

/* 상세 — 큰 숫자 하나 */
.crumb { color: var(--dim); font-size: 14px; margin: 0 0 8px; }
.crumb a { display: inline-block; min-height: 44px; min-width: 44px; padding: 10px 0; }
.hero-num { display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; align-items: end; margin: 24px 0 12px; }
.hero-num .age { font-size: 72px; line-height: .9; font-weight: 800; letter-spacing: -0.05em; color: var(--mark); }
.hero-num .times { font-size: 22px; font-weight: 700; }
.hero-num .why { grid-column: 1 / -1; color: var(--dim); margin: 8px 0 0; }
.bigstrip { display: flex; gap: 2px; margin: 24px 0 8px; }
.bigstrip div { min-width: 0; padding: 8px 4px 0; border-top: 12px solid var(--bar); font-size: 13px; color: var(--dim); white-space: nowrap; overflow: hidden; }
.bigstrip div.on { border-top-color: var(--ink); color: var(--ink); font-weight: 700; overflow: visible; }

table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
caption { text-align: left; padding: 0 0 8px; }
th, td { height: 44px; padding: 8px 12px; text-align: right; border-top: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; }
thead th { color: var(--dim); font-size: 13px; font-weight: 600; border-top: 0; }
tr.on td { font-weight: 700; }

/* 지도·칩 */
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 16px 0; padding: 0; list-style: none; }
.chips a { display: block; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); text-decoration: none; font-weight: 600; }
.chips a:hover { border-color: var(--ink); }
.chips a[aria-current="true"] { background: var(--mark); border-color: var(--mark); color: var(--on-mark); }
.chips--sm a { font-weight: 400; font-size: 15px; }
.mapgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; }
.mapgrid__h { margin-top: 0; }
/* 🔥 z-index:0 + isolation — Leaflet 판·컨트롤(z 400~1000)을 상자 안에 가둔다. 없으면 떠 있는 내비(50)·탭바(60) 위로 올라온다 */
.map { position: relative; z-index: 0; isolation: isolate; aspect-ratio: 4 / 3; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; color: var(--dim); font-size: 13px; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); vertical-align: -1px; margin-right: 4px; }
.dot.low { background: var(--bar); width: 8px; height: 8px; vertical-align: 0; }
/* Leaflet 확대·축소 단추를 44px 로(기본 30px). 팝업 링크도 44px */
.map.leaflet-container .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 22px; } /* .map 을 붙여 뒤에 오는 leaflet.css 를 이긴다 */
.legend a { display: inline-flex; align-items: center; min-height: 44px; }
.leaflet-container { font: inherit; background: var(--surface); }
.leaflet-popup-content { margin: 8px 12px; }
.pop { display: flex; flex-direction: column; justify-content: center; min-height: 44px; color: #1A2130; text-decoration: none; } /* 팝업 바탕은 Leaflet 흰색 고정 — 라이트 ink 를 쓴다(16.10:1) */
.pop:hover b { text-decoration: underline; }

/* 글 화면(근거·소개·방침·약관) */
.prose { max-width: 44em; }
.prose ul { padding-left: 20px; }
.prose li + li { margin-top: 4px; }
.inl { text-decoration: underline; }

/* 쿠팡 파트너스 칸(ages/coupang.py) — 기본 끔 */
.cpn { margin: 32px 0; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.cpn__h { font-weight: 700; margin: 0 0 4px; }
.cpn__d { color: var(--dim); font-size: 13px; }
.cpn__l { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cpn__i { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.cpn__img { grid-row: span 2; border-radius: 4px; }
.cpn__a { display: flex; align-items: center; min-height: 44px; font-weight: 700; }
.cpn__n { color: var(--dim); font-size: 14px; margin: 0; }
.cpn__b { width: 100%; border: 0; }

/* 푸터·히어로·CTA — 틀은 fb.css. 소개·방침·약관은 푸터에만. h2 공통 위 여백(44px)을 받지 않는다 */
.fb-cta__h { margin-top: 0; }
.fb-hero { padding-top: 24px; }

@media (max-width: 720px) {
  main.wrap { padding-top: 24px; }
  h1 { font-size: 24px; }
  .ages { grid-template-columns: repeat(3, 1fr); }
  .ages a { min-height: 72px; }
  .ages a b { font-size: 36px; }
  .rank a { grid-template-columns: 24px minmax(0, 1fr) 64px; padding: 12px; gap: 4px 8px; }
  .rank .name small { display: block; margin: 0; }
  .hero-num .age { font-size: 56px; }
  .mapgrid, .hub { grid-template-columns: 1fr; }
  .bigstrip div { font-size: 12px; }
  th, td { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}