/* Older or Younger — 게임 무대 + 아래로 이어지는 문서.
 *
 * 왜 무대와 문서를 붙였나: 게임만 있는 페이지는 **얇은 위젯**이다. AdSense 가 2026-07-11
 * pongvn.com 을 "가치가 별로 없는 콘텐츠"로 거절한 게 정확히 그 형태다. 그래서 무대 아래로
 * 데이터 출처·나이 계산법·FAQ 가 이어진다. 스크롤하면 닿고, 게임엔 방해가 안 된다.
 */
:root {
  --bg: #0d0b14;
  --ink: #fff;
  --dim: rgba(255, 255, 255, .62);
  --hi: #ffd23f;
  --ok: #3ddc84;
  --no: #ff5d5d;
  --line: #2a2e3d;
  --panel: #171922;
  --pad: clamp(16px, 4vw, 40px);
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body {
  background: var(--bg); color: var(--ink);
  font: 400 16px/1.6 system-ui, "Segoe UI", -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.skip { position: absolute; left: -9999px }
.skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--hi); color: #1a1400; padding: 10px 16px; border-radius: 8px }

/* ── 무대 ── */
.stage-wrap { position: relative; height: 100svh; min-height: 480px; overflow: hidden }

/* 브랜드 마크 없음 — 위 template 주석 참조. 무대는 게임에 양보한다. */
#hud {
  position: absolute; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px var(--pad); pointer-events: none;
}
#streak { display: flex; align-items: baseline; gap: 8px; font: 800 clamp(20px, 5vw, 30px)/1 system-ui }
#streak b { color: var(--hi); font-size: 1.35em; font-variant-numeric: tabular-nums }
#streak span { font-weight: 600; font-size: .62em; color: var(--dim); text-transform: uppercase; letter-spacing: .1em }
#deckTag {
  font: 700 12px system-ui; letter-spacing: .06em; color: var(--dim);
  background: rgba(255, 255, 255, .09); border-radius: 99px; padding: 6px 12px;
}
/* 도전 링크로 왔을 때는 **깨야 할 숫자를 계속 띄운다.** "12연승을 깨봐" 라고 보내놓고
   받는 사람에게 12를 안 보여주면 그냥 링크 한 개다 — 도전장이 도전장이 아니게 된다. */
#deckTag.challenge { background: var(--hi); color: #1a1400; font-weight: 800 }
#deckTag.won { background: var(--ok); color: #06301a; font-weight: 800 }

#stage { position: absolute; inset: 0; display: flex }
.card {
  flex: 1 1 50%; position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--pad) + 44px) var(--pad);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .3s;   /* JS 의 SLIDE 와 맞춘다 */
}
.card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 11, 20, .35), rgba(13, 11, 20, .82)) }
.card > * { position: relative; z-index: 2 }
#L { background: radial-gradient(120% 90% at 30% 20%, #3b2d6b, #171128) }
#R { background: radial-gradient(120% 90% at 70% 20%, #6b2d4f, #281121) }

/* 슬라이드가 끝나면 transform 을 0 으로 되돌리는데, 그때 transition 이 켜져 있으면
   **되돌아오는 것까지 애니메이션된다**(카드가 오른쪽에서 다시 미끄러져 들어온다).
   JS 가 한 프레임만 noanim 을 걸고 리플로우를 강제한 뒤 뗀다. 없으면 전환이 두 번 튄다. */
#stage.slide #L { transform: translateX(-100%); opacity: 0 }
#stage.slide #R { transform: translateX(-100%) }
#stage.noanim .card { transition: none }

/* word-break:keep-all 은 CJK 용이지만 EN 단독이라 지금은 무해하다 — 로케일이 붙으면 필요해진다. */
.who, .did { word-break: keep-all; overflow-wrap: break-word }
.who { font: 800 clamp(19px, 3.4vw, 30px)/1.2 system-ui; letter-spacing: -.02em; max-width: 16ch }
.did { margin-top: 12px; color: var(--dim); font-size: clamp(14px, 1.9vw, 18px); max-width: 26ch; line-height: 1.45 }

/* 분야 + 연도 = **추론의 손잡이**. 없으면 모르는 인물은 순수 동전던지기가 된다.
   분야는 진짜 신호다 — 실측 평균나이가 tech 32.7 · sport 35.1 ↔ politics 54.8 · art 56.5. */
.meta { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; justify-content: center }
.tag { background: rgba(255, 255, 255, .14); border-radius: 99px; padding: 5px 12px; font: 700 12px system-ui; color: rgba(255, 255, 255, .9) }
.yr { font: 700 13px system-ui; color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums }

.age { margin-top: 18px; font: 900 clamp(56px, 13vw, 120px)/1 system-ui; letter-spacing: -.04em; color: var(--hi); font-variant-numeric: tabular-nums }
.age small { display: block; font: 700 clamp(11px, 1.4vw, 13px)/1 system-ui; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; margin-top: 10px }
.qmark { color: rgba(255, 255, 255, .28) }

/* 출생연도는 **리빌 뒤에만** 뜬다 — 정답의 "왜". 여기서 배우고, 배우니까 한 판 더 하게 된다. */
.born { margin-top: 10px; min-height: 20px; font: 600 13px system-ui; color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .3s }
.born.show { opacity: 1 }

#ask { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; width: min(100%, 300px) }
.btn {
  background: transparent; color: var(--ink); border: 2px solid rgba(255, 255, 255, .45);
  border-radius: 99px; padding: 14px 20px; cursor: pointer;
  font: 800 clamp(14px, 1.9vw, 17px) system-ui;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform .12s, background .16s, border-color .16s;
}
.btn:hover { background: rgba(255, 255, 255, .13); border-color: #fff }
.btn:active { transform: scale(.96) }
.btn kbd { font: 600 11px system-ui; opacity: .5; border: 1px solid currentColor; border-radius: 4px; padding: 1px 5px }
.btn.hint { border-style: dashed; border-color: rgba(255, 255, 255, .28); padding: 10px 16px }
.btn.hint.used { opacity: .4; pointer-events: none }

#verdict {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); z-index: 50;
  font: 900 clamp(60px, 16vw, 140px)/1 system-ui; opacity: 0; pointer-events: none;
  transition: transform .3s cubic-bezier(.2, 1.6, .4, 1), opacity .3s;
}
#verdict.show { opacity: 1; transform: translate(-50%, -50%) scale(1) }
#verdict.ok { color: var(--ok) }
#verdict.no { color: var(--no) }

.src { margin-top: 14px; font-size: 12px; min-height: 18px }
.src a { color: var(--dim) }

/* ── 게임오버 ── */
#over {
  position: absolute; inset: 0; z-index: 60; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; text-align: center;
  background: rgba(10, 8, 16, .94); backdrop-filter: blur(8px); padding: var(--pad);
}
#over.show { display: flex }
#over h2 { font: 900 clamp(26px, 6vw, 44px)/1.1 system-ui; letter-spacing: -.03em }
#over .quip { color: var(--dim); max-width: 34ch; font-size: clamp(14px, 2vw, 17px) }
#art {
  background: rgba(255, 255, 255, .07); border-radius: 14px; padding: 16px 20px;
  font: 600 15px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap;
  word-break: break-all; max-width: min(94vw, 520px); text-align: left;
}
#over .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center }
.btn2 { background: var(--hi); color: #1a1400; border: 0; border-radius: 99px; padding: 13px 22px; font: 800 15px system-ui; cursor: pointer }
.btn2.ghost { background: rgba(255, 255, 255, .12); color: #fff }
.status { color: var(--dim); font-size: 13px; min-height: 18px }

/* ── 문서 (무대 아래) ── */
.wrap { max-width: 760px; margin: 0 auto; padding: clamp(40px, 8vw, 80px) var(--pad) 0 }
.hero h1 { font: 900 clamp(34px, 7vw, 56px)/1.05 system-ui; letter-spacing: -.03em }
.hero .sub { margin-top: 14px; color: var(--dim); font-size: clamp(16px, 2.2vw, 19px) }
.how, .about { margin-top: clamp(36px, 7vw, 64px) }
.how h2, .about h2 { font: 800 clamp(20px, 3vw, 26px)/1.25 system-ui; letter-spacing: -.02em; margin-bottom: 12px }
.about h2 + p { color: var(--dim) }
.about p { margin-bottom: 22px }
.how ol { padding-left: 22px; color: var(--dim) }
.how li { margin-bottom: 8px }
.how .note { margin-top: 16px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--dim); font-size: 14px }
.faq dt { font-weight: 700; margin-top: 18px }
.faq dd { margin: 6px 0 0; color: var(--dim) }

.site-foot { max-width: 760px; margin: clamp(48px, 9vw, 90px) auto 0; padding: 28px var(--pad) 48px; border-top: 1px solid var(--line); color: var(--dim); font-size: 14px }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px }
.foot-links a { color: var(--dim); text-decoration: none }
.foot-links a:hover { color: var(--ink) }

@media (max-width: 720px) {
  #stage { flex-direction: column }
  .card { padding: 16px var(--pad) }
  #L { padding-top: 64px }
  #stage.slide #L, #stage.slide #R { transform: translateY(-100%) }
  .age { margin-top: 8px }
  #ask { margin-top: 14px; flex-direction: row; flex-wrap: wrap }
  .btn { padding: 12px 14px; font-size: 14px; flex: 1 1 40% }
  .btn.hint { flex: 1 1 100% }
  .did { max-width: 30ch }
}


/* ────────────────────────────────────────────────────────────────────────────
 * 하우스 프로모 슬롯 — 다른 툴에서 **그대로** 가져왔다(SSoT = 105_growth
 * HOUSE_AD_PLACEMENT_PLAN_2026-07 §2.5). 여기서 다시 디자인하지 마라.
 *
 * ⚠️ `.promo-anchor[hidden] { display: none }` 은 **필수**다. 없으면 앵커가 채워지기 전에
 *    하단에 **빈 바**가 그대로 보인다. 그리고 슬롯의 min-height 는 **자리 예약**이다 —
 *    승인 후 광고로 스왑될 때 레이아웃이 튀지 않게(CLS 0) 하려는 것이지 장식이 아니다.
 * ⚠️ rel="sponsored" 를 붙이지 마라 — 애드센스 심사에서 하우스링크를 광고로 오인시킨다.
 * ──────────────────────────────────────────────────────────────────────────── */
/* House promo slot (result-area cross-brand -> Toolio). Reserved 336x280 box = CLS 0 in house & ad states. Spec: 105_growth HOUSE_AD_PLACEMENT_PLAN_2026-07 (2.5) */
.promo-slot { margin: 24px auto 0; padding: 0 20px; display: flex; justify-content: center; }
.promo-slot__card { width: 100%; max-width: 336px; min-height: 280px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: 26px; border-radius: var(--radius, 14px); border: 1px solid var(--line, #2a2e3d); background: var(--panel, #171922); color: var(--ink, #f4f5f7); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.promo-slot__card:hover { border-color: var(--accent, #ffd23f); transform: translateY(-2px); }
.promo-slot__brand { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.promo-slot__hook { color: var(--muted, #9aa0b0); font-size: .95rem; line-height: 1.55; }
.promo-slot__cta { color: var(--accent, #ffd23f); font-weight: 700; font-size: .95rem; margin-top: auto; }
@media (max-width: 380px) { .promo-slot__card { max-width: 300px; padding: 22px; } }
/* cross-brand rotation: reserve container height (CLS 0) + clamp long titles + slim anchor bar */
.promo-slot { min-height: 310px; align-items: center; }
.promo-slot__hook { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 380px) { .promo-slot { min-height: 310px; } }
.promo-anchor { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 8px; justify-content: center; padding: 9px 14px calc(9px + env(safe-area-inset-bottom)); background: var(--panel-2, #1f2230); border-top: 1px solid var(--line, #2a2e3d); box-shadow: 0 -6px 22px rgba(0,0,0,.28); }
/* [hidden] must override the display:flex above (author rules beat the UA [hidden] rule) or the close button cannot dismiss the bar. */
.promo-anchor[hidden] { display: none; }
/* Reserve the anchor's height so the fixed bar never covers page content. */
body:has(.promo-anchor:not([hidden])) { padding-bottom: 52px; }
.promo-anchor__link { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 92vw; text-decoration: none; color: var(--ink, #f4f5f7); font-size: .9rem; }
.promo-anchor__brand { flex: 0 0 auto; font-weight: 700; }
.promo-anchor__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted, #9aa0b0); }
.promo-anchor__cta { flex: 0 0 auto; color: var(--accent, #ffd23f); font-weight: 700; }