/* ------------------------------------------------------------------
   Timeline of Pretty Much Everything — 시로 테마 (shirolee studio 의 아기 토끼 시로)

   두 가지 테마. 설정 탭에서 시스템 / 라이트 / 다크 중 고른다(기본 라이트).
   · 라이트  연한 종이 위. 토큰의 기본값.
   · 다크    밤하늘에 별이 뜨고, 시대마다 하늘 색이 바뀐다. <html class="is-night">

   규칙 하나만 기억하면 된다.
   · 카드·계기판·탭·시트처럼 크림 면 위의 글자는 두 모드 모두 짙은 갈색(먹) 고정
   · 하늘(배경) 위에 바로 놓인 글자만 --ink-bg 로 모드마다 바뀐다
   ------------------------------------------------------------------ */

:root {
  /* 크림 면(카드) 위 */
  --ink: #3a2a24;                      /* 먹 — 카드 글자 */
  --ink-2: #7a6058;                    /* 흐린 카드 글자 (크림 위 5.3:1) */
  --foam: #fff8ef;                     /* 카드·계기판·탭 */
  --foam-2: #f3e7d8;                   /* 칩·보조 버튼 */
  --bean: #5c3d2e;                     /* 선·시로 윤곽 */
  --line: rgba(92, 61, 46, .18);       /* 크림 위 선 */
  --caramel: #c9956b;
  --blush: #f2a7b3;

  /* 하늘(배경) 위 — 라이트 */
  --sky: #f3e7d8;
  --sky-2: #fff8ef;
  --ink-bg: #3a2a24;
  --ink-bg-2: #7a6058;                 /* 하늘 위 흐린 글자 */
  --line-bg: rgba(92, 61, 46, .2);     /* 하늘 위 선·연도 축 */
  --star: #b57a3e;                     /* 초점·강조 */
  --star-glow: rgba(181, 122, 62, .25);
  --focus-ink: #b57a3e;                /* 하늘 위 초점 글자 */
  --card-focus: #b57a3e;               /* 카드 초점 테두리 */

  --shadow-1: 0 6px 20px rgba(92, 61, 46, .12);
  --shadow-2: 0 10px 30px rgba(92, 61, 46, .18);
  --shadow-3: 0 24px 60px rgba(92, 61, 46, .3);
  --scrim: rgba(58, 42, 36, .45);

  --display: 'Gaegu', 'Gowun Dodum', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --sans: 'Gowun Dodum', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
    'Noto Sans KR', 'Malgun Gothic', sans-serif;

  /* 움직임 곡선 — 튕기는 스프링과 부드러운 감속 */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --spring-soft: cubic-bezier(.22, 1.25, .36, 1);
  --out: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
}

/* 다크 — 하늘만 어두워지고 카드 규칙은 그대로 */
.is-night {
  --sky: #1c1724;
  --sky-2: #2a2233;
  --ink-bg: #fff8ef;
  --ink-bg-2: #c8bbb6;                 /* 하늘 위 흐린 글자 (9:1) */
  --line-bg: rgba(255, 248, 239, .18);
  --star: #ffd98a;
  --star-glow: rgba(255, 217, 138, .35);
  --focus-ink: #ffd98a;
  --card-focus: #ffd98a;
  --shadow-1: 0 6px 20px rgba(0, 0, 0, .25);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, .4);
  --shadow-3: 0 24px 60px rgba(0, 0, 0, .5);
  --scrim: rgba(28, 23, 36, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--sky);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(200, 187, 182, .3); border-radius: 8px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ 배경 */

.app {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--sky);
  color: var(--ink-bg);
  transition: background-color .5s linear;
}

.bg-gradient,
.bg-blob,
.bg-stars,
.bg-grain {
  position: absolute;
  inset: 0;
}

.bg-gradient {
  transition: background-image .6s linear;
  background-image: linear-gradient(180deg, #f3e7d8, #f3e7d8);
}

.bg-blob {
  opacity: .9;
  transition: opacity .6s linear;
}

/* 별 — 연표보다 천천히 흐르는 먼 하늘(패럴랙스는 app.js 가 --sy 로) */
.bg-stars {
  top: -400px;
  bottom: -400px;
  pointer-events: none;
  opacity: .22;
  filter: brightness(.3);   /* 라이트에서는 거의 보이지 않게 */
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff8ef 60%, transparent 100%),
    radial-gradient(1.2px 1.2px at 48% 6%, #fff8ef 60%, transparent 100%),
    radial-gradient(2px 2px at 78% 24%, #ffd98a 60%, transparent 100%),
    radial-gradient(1.2px 1.2px at 90% 60%, #fff8ef 60%, transparent 100%),
    radial-gradient(1.4px 1.4px at 28% 52%, #fff8ef 60%, transparent 100%),
    radial-gradient(1.8px 1.8px at 60% 76%, #fff8ef 60%, transparent 100%),
    radial-gradient(1.2px 1.2px at 8% 88%, #ffd98a 60%, transparent 100%),
    radial-gradient(1.4px 1.4px at 70% 94%, #fff8ef 60%, transparent 100%),
    radial-gradient(1px 1px at 36% 34%, #fff8ef 60%, transparent 100%),
    radial-gradient(1.6px 1.6px at 94% 8%, #fff8ef 60%, transparent 100%);
  background-size: 520px 520px, 380px 380px, 640px 640px, 460px 460px, 700px 700px, 560px 560px, 420px 420px, 600px 600px, 340px 340px, 480px 480px;
  transform: translate3d(0, var(--sy, 0px), 0);
  will-change: transform;
}

.is-night .bg-stars { opacity: .9; filter: none; }

.bg-grain {
  pointer-events: none;
  opacity: .35;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 4px);
}

.shell {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------ 헤더 */

.head {
  flex: 0 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 18px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 0;
}

.brand__mark {
  width: 36px; height: 36px;
  flex: 0 0 auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
}

.brand__text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.brand__sub {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
  color: var(--ink-bg);
  opacity: .72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) { .brand__sub { display: none; } }

.brand__title {
  margin: 0;
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-bg);
}

.pill-btn {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 0;
  background: var(--foam);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  box-shadow: var(--shadow-1);
}

.pill-btn:hover { background: #fff; }

/* 보기 방식 스위치 — 짙은 알약이 통통 튀며 옮겨 간다 */
.seg {
  position: relative;
  display: inline-flex;
  height: 40px;
  padding: 4px;
  border-radius: 999px;
  background: var(--foam);
  box-shadow: var(--shadow-1);
}

.seg__pill {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  border-radius: 999px;
  background: var(--ink);
}

.seg.is-ready .seg__pill { transition: transform .5s var(--spring), width .5s var(--spring); }

.seg__btn {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  padding: 0 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease;
}

.seg__btn.is-active { font-weight: 700; color: var(--foam); }

/* '연도 고정'은 표 보기에서만 의미가 있다 */

/* 테마 설정(설정 탭) — 시스템 / 라이트 / 다크 */
.seg--theme {
  display: flex;
  width: 100%;
  height: 44px;
  background: var(--foam-2);
  box-shadow: none;
}

.seg--theme .seg__btn { flex: 1 1 0; height: 36px; }
.seg--theme .seg__pill { background: var(--ink); }
.card__text--hint { font-size: 12.5px; color: var(--ink-2); }

/* 연도 고정 스위치 — 켜지면 작은 상자에 체크가 톡 */

/* 잠깐 떴다 사라지는 안내 */
.toast {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 10px;
  margin: 0;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--foam);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  box-shadow: var(--shadow-2);
  animation: toast-in .4s var(--spring);
}

.toast[hidden] { display: none; }
.is-zoom .toast { top: 44px; }   /* 탐험의 열 머리글을 가리지 않게 */
.toast.is-leaving { animation: fade-out .25s ease forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, -10px) scale(.9); }
}

/* 누르면 쏙 들어갔다가 통 튀어나오는 손맛 */
.pill-btn, .pick, .tab, .event, .more-chip, .result, .tag, .suggest button,
.hud__step, .icon-btn, .dayrow, .tl-card, .hud__chip, .seg__btn {
  transition: transform .42s var(--spring), background-color .18s ease, opacity .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.pill-btn:active, .pick:active, .tab:active, .more-chip:active, .tag:active,
.suggest button:active, .hud__step:active, .icon-btn:active, .hud__chip:active, .seg__btn:active {
  transform: scale(.88);
  transition-duration: .08s;
}

.event:active, .result:active, .dayrow:active, .tl-card:active {
  transform: scale(.97);
  transition-duration: .08s;
}

/* 연표를 끄는 중에는 눌린 효과를 주지 않는다 */

/* ------------------------------------------------------------ 화면 */

.view {
  flex: 1 1 auto;
  min-height: 0;
}

.view[hidden] { display: none; }

.view:not([hidden]) { animation: view-in .38s var(--out); }

@keyframes view-in {
  from { opacity: 0; transform: translateY(10px); }
}

.view--timeline { position: relative; }

/* 연표 창 — 브라우저 스크롤 대신 js/motion.js 가 움직인다 */

/* 첫 화면 — 시작 안내 */

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-9px) rotate(3deg); }
}

@keyframes nudge-down {
  0%, 55%, 100% { transform: translateY(0); }
  25% { transform: translateY(5px); }
}

/* 초점선 — 여기 걸린 줄의 해가 계기판 숫자 */
.focus-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
  z-index: 8;
}

/* --ring-x: 시간축 점의 가로 위치(app.js 가 잰다) */
.focus-line::before {
  content: "";
  position: absolute;
  left: calc(var(--ring-x, 94px) + 16px);
  right: 16px;
  top: 0;
  border-top: 1.5px dashed var(--star);
  opacity: .55;
}

/* 연도 축 위의 '지금 여기' 고리 — 숨 쉬듯 퍼진다 */
.focus-line span {
  position: absolute;
  left: calc(var(--ring-x, 94px) - 14px);
  top: -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--star);
  box-shadow: 0 0 16px var(--star-glow);
  animation: breathe 2.4s ease-in-out infinite;
}

/* 그림판에 상세를 펼쳐 둔 동안 — 초점선이 글 위를 지나가지 않게 */
.focus-line { transition: opacity .2s ease; }
.focus-line.is-reading { opacity: 0; }

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.25); opacity: .4; }
}

.view--pane {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 16px 100px;
}

.pane {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

.pane--narrow { max-width: 640px; }
.pane--wide { max-width: 980px; }

.pane__lead {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-bg-2);
}

.pane__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

.pane__count {
  font-size: 13px;
  color: var(--ink-bg-2);
  font-variant-numeric: tabular-nums;
}

.loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-bg);
  font-size: 15px;
  pointer-events: none;
}

.loading[hidden] { display: none; }

/* 첫 화면: 데이터를 받아 계기판이 접힌 모양이 되기 전에는 계기판·초점선·탭바를 숨긴다.
   그러지 않으면 index.html 에 적힌 펼친 계기판("0년", 시로 손잡이 띠)이 1초쯤 비쳤다가 바뀐다.
   app.js start() 가 .is-booting 을 떼면 살짝 페이드로 나타난다. */
.app.is-booting .hud,
.app.is-booting .focus-line,
.app.is-booting .tabbar { opacity: 0; visibility: hidden; }
.hud, .tabbar { transition: opacity .25s ease, visibility 0s; }

/* ------------------------------------------------------ 디오라마 무대 */

/* 디오라마 무대 — 연표 뒤에 화면 크기로 깔린다. 장면 그림(.stage__art)은 모두 여기 겹쳐 있고,
   초점선이 있는 장면만 보이도록 app.js 가 opacity 를 바꾼다(경계에서는 교차 페이드).
   섹션에 가두지 않으므로 카테고리를 줄여 연표가 짧아져도 그림이 잘리지 않는다. */
.stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .75;
  /* 가운데(카드 뒤)는 흐리고 좌우 레터박스에서 진하게 */
  -webkit-mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, .9) 14%, rgba(0, 0, 0, .28) 32%, rgba(0, 0, 0, .14) 50%, rgba(0, 0, 0, .28) 68%, rgba(0, 0, 0, .9) 86%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, .9) 14%, rgba(0, 0, 0, .28) 32%, rgba(0, 0, 0, .14) 50%, rgba(0, 0, 0, .28) 68%, rgba(0, 0, 0, .9) 86%, #000 100%);
}

.is-night .stage { opacity: .9; }

.stage__art {
  position: absolute;
  left: 0;
  right: 0;
  top: -200px;                           /* 그림 위쪽은 하늘 여백이라, 무대가 초점선 근처에 오도록 끌어올린다 */
  height: max(900px, 56.25vw);           /* 1600×900 그림을 폭에 맞췄을 때의 높이 */
  opacity: 0;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: max(1600px, 100%) auto;
  transform-origin: 50% 40%;
  will-change: opacity, transform;
  /* 그림의 위·아래 가장자리(동굴 천장, 지면)가 딱 끊기지 않게 양쪽을 흐린다 */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 10%, #000 30%, #000 52%, transparent 82%);
  mask-image: linear-gradient(180deg, transparent 0, transparent 10%, #000 30%, #000 52%, transparent 82%);
}

/* 보이는 장면만 아주 느리게 숨쉰다(크기·위치를 살짝). transform 은 app.js 몫이라 scale/translate 로 */
.stage__art.is-on { animation: scene-breathe 24s ease-in-out infinite alternate; }

@keyframes scene-breathe {
  from { scale: 1; translate: 0 0; }
  to { scale: 1.045; translate: -1.4% 0; }
}

/* 폰: 레터박스가 없으니 그림을 위쪽에 작게 깔고 아래로 흐려지게 */
@media (max-width: 899px) {
  .stage {
    opacity: .9;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .is-night .stage { opacity: .95; }
  /* 그림을 화면 폭의 2.6배로 키우고(좌우 무대 하나가 화면을 채움) 왼쪽↔오른쪽을 천천히 오간다.
     transform 은 app.js 몫이라 translate/scale 로. 위는 하늘 여백이라 조금 끌어올린다 */
  .stage__art {
    left: 0;
    right: auto;
    top: -14vw;
    width: 260vw;
    height: calc(260vw * .5625);
    background-size: 100% auto;
    background-position: 0 0;
    transform-origin: 30% 60%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 92%);
    mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 92%);
  }
  .stage__art.is-on { animation: scene-pan 38s ease-in-out infinite alternate; }
}

@keyframes scene-pan {
  0%, 8% { translate: 0 0; scale: 1; }
  92%, 100% { translate: -160vw 0; scale: 1.04; }
}

/* ------------------------------------- 시간축 카드(갈림길 화면이 쓴다) */

/* 모바일 우선: [색 띠][연도│별][카드]  /  넓은 화면: [색 띠][국가사 카드][연도][주제사 카드] */
.branch-tl {
  --lane-w: 7px;
  --lane-gap: 2px;
  --gutter: calc(var(--lanes, 0) * (var(--lane-w) + var(--lane-gap)) + 8px);
  --mark-w: 70px;
}

/* 나라별 왕조·시대 색 띠 */

.tl {
  position: relative;
  padding-bottom: 6px;
}

/* 시간축 세로선 */
.tl::before {
  content: "";
  position: absolute;
  top: -10px;
  bottom: 0;
  left: calc(var(--gutter) + var(--mark-w) - 11px);
  width: 2px;
  border-radius: 1px;
  background: var(--line-bg);
}

.tl-year {
  position: relative;
  display: grid;
  grid-template-columns: var(--gutter) var(--mark-w) minmax(0, 1fr);
  align-items: start;
}

.tl-mark {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  padding: 9px 22px 0 0;
  text-align: right;
  color: var(--ink-bg);
}

.tl-mark__pre {
  display: block;
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--ink-bg-2);
}

.tl-mark__num {
  display: inline-block;
  font-family: var(--display);
  font-size: 19px;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transform-origin: 100% 50%;
  transition: transform .45s var(--spring), color .2s ease;
}

/* 연도 축 위의 발자국 — 시로가 지나간 자리 */
.tl-dot {
  position: absolute;
  right: 2px;
  top: 9px;
  width: 16px;
  height: 16px;
  background:
    radial-gradient(circle at 50% 68%, var(--dotc, var(--ink-bg)) 0 30%, transparent 33%),
    radial-gradient(circle at 18% 34%, var(--dotc, var(--ink-bg)) 0 15%, transparent 18%),
    radial-gradient(circle at 50% 18%, var(--dotc, var(--ink-bg)) 0 15%, transparent 18%),
    radial-gradient(circle at 82% 34%, var(--dotc, var(--ink-bg)) 0 15%, transparent 18%);
  transition: transform .45s var(--spring);
}

@keyframes hop-dot {
  0%, 100% { transform: scale(1.5) rotate(12deg); }
  50% { transform: scale(1.7) rotate(18deg) translateY(-1px); }
}

.tl-side {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding: 4px 0 4px 4px;
  min-width: 0;
}

.tl-side--nation { grid-row: 1; }
.tl-side--theme { grid-row: 2; }
.tl-side.is-empty { display: none; }
.tl-side--nation:not(.is-empty) + .tl-side--theme { padding-top: 0; }

.tl-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  max-width: 440px;
  padding: 10px 13px 11px 14px;
  text-align: left;
  border-radius: 18px;
  border: 0;
  border-left: 6px solid var(--c);
  background: var(--foam);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.tl-card:hover { background: #fff; }

.tl-card__cat {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-2);
}

.tl-card__cat .dot { width: 7px; height: 7px; }

.tl-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-wrap: pretty;
}

.tl-card__span {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.tl-card__bar {
  display: block;
  flex: 0 0 auto;
  height: 4px;
  border-radius: 2px;
  background: var(--c);
}

.tl-card__len { color: var(--ink-2); white-space: nowrap; }

/* 탐험 — 시간 줌 캔버스(기본 보기). 타임라인 스크롤 대신 이 캔버스가 화면을 맡는다 */
/* 탐험 — 판(눕는 쪽)과 덮개(납작, 입력)를 담는 상자. 눕힌 판의 먼 끝이 밖으로 새지 않게 자른다 */
.zoom-box {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  overflow: hidden;
}

.zoom-plane {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.zoom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.zoom.is-dragging { cursor: grabbing; }
.is-zoom .zoom-box { display: block; }

/* 막간 무대 — 카드 없는 빈 구간. 뒤 무대의 디오라마가 이 사이로 온전히 보인다 */

/* 해와 해 사이 — 오래 비면 '⋯ 350년' */

/* 넓은 화면: 가운데 축을 두고 왼쪽 국가사, 오른쪽 주제사 */
@media (min-width: 900px) {
  .branch-tl { --lane-w: 8px; --lane-gap: 3px; --mark-w: 104px; }

  .tl::before { left: calc(var(--gutter) + (100% - var(--gutter) - var(--mark-w)) / 2 + var(--mark-w) / 2 - 1px); }

  .tl-year { grid-template-columns: var(--gutter) minmax(0, 1fr) var(--mark-w) minmax(0, 1fr); }

  .tl-mark {
    grid-column: 3;
    grid-row: 1;
    padding: 28px 0 0;
    text-align: center;
  }

  .tl-mark__pre,
  .tl-mark__num {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 0 7px;
    border-radius: 7px;
    background: var(--foam);
    color: var(--ink);
  }

  .tl-mark__pre { color: var(--ink-2); }
  .tl-mark__num { transform-origin: 50% 50%; }
  
  

  .tl-dot { right: auto; left: 50%; margin-left: -8px; top: 8px; }

  .tl-side { grid-row: 1; padding: 4px 0; }
  .tl-side.is-empty { display: block; }
  .tl-side--nation { grid-column: 2; align-items: flex-end; padding-right: 10px; }
  .tl-side--theme { grid-column: 4; align-items: flex-start; padding-left: 10px; }
  .tl-side--nation:not(.is-empty) + .tl-side--theme { padding-top: 4px; }

  .tl-side--nation .tl-card {
    text-align: right;
    border-left: 0;
    border-right: 6px solid var(--c);
  }

  .tl-side--nation .tl-card__cat { flex-direction: row-reverse; }
  
  .tl-side--nation .tl-card__span { flex-direction: row-reverse; }

  

  

  

  
}

/* ------------------------------------------- 갈림길(대체역사) 화면 */

/* 가상임을 늘 밝힌다 */
.branch-fiction {
  margin: 0 0 16px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(201, 149, 107, .8);
  background: var(--foam-2);
  font-size: 12.5px;
  color: var(--ink);
}

.branch-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(201, 149, 107, .18);
  color: var(--bean);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.branch-list { display: flex; flex-direction: column; gap: 12px; }




.branch-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }







/* 같은 시간축의 '실제 | 가상' */
.branch-tl { margin: 4px 0 8px; }

/* 갈림길부터 가상의 줄기가 시간축 옆으로 갈라져 나란히 흐른다 */
.branch-tl::after {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 0;
  left: calc(var(--gutter) + var(--mark-w) - 5px);
  border-left: 2px dashed var(--star);
  opacity: .7;
}


.branch-tl .tl-year.has-alt .tl-dot { --dotc: var(--star); }
.branch-tl .tl-year.has-choice .tl-dot { transform: scale(1.35) rotate(-12deg); }

.tl-card.is-real { opacity: .78; }
.tl-card.is-real:hover { opacity: 1; }

.alt-card {
  width: 100%;
  max-width: 440px;
  padding: 9px 13px 11px;
  border-radius: 18px;
  border: 2px dashed rgba(201, 149, 107, .9);
  background: var(--foam);
  box-shadow: 0 3px 12px rgba(90, 75, 120, .1);
  color: var(--ink);
}

.alt-card--choice { border-style: solid; border-color: var(--caramel); }

.alt-card--ending {
  border-style: solid;
  border-color: var(--bean);
  background: #fff;
}


.alt-card__tag {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--bean);
}


.alt-card__title {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.alt-card__text { margin: 4px 0 0; font-size: 13px; line-height: 1.65; opacity: .85; }








.alt-reality {
  margin: 10px 0 0;
  padding: 9px 11px;
  border-radius: 11px;
  background: rgba(201, 149, 107, .12);
  border: 1px solid rgba(201, 149, 107, .45);
  font-size: 12.5px;
  line-height: 1.65;
}


.branch-bar { display: flex; gap: 8px; margin: 12px 0 0; }
.branch-cols { display: none; }

/* ---------- 갈림길 게임 — 목록(스테이지) */

.bg-hero { margin: 0 0 12px; color: var(--ink-bg); }
.bg-hero__kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; opacity: .7; }
.bg-hero__title { margin: 0 0 6px; font-family: var(--display); font-size: 40px; line-height: 1; }
.bg-hero__lead { margin: 0; font-size: 14px; line-height: 1.7; opacity: .85; }

.bg-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding: 16px 18px 14px;
  border: 0;
  border-radius: 22px;
  background: var(--foam);
  box-shadow: 0 5px 0 var(--caramel), var(--shadow-1);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .42s var(--spring), box-shadow .2s ease;
}

.bg-stage:hover { transform: translateY(-2px); }
.bg-stage:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--caramel), var(--shadow-1); transition-duration: .08s; }

.bg-stage__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.bg-stage__no {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--foam);
  font-weight: 700;
  letter-spacing: .06em;
}
.bg-stage__year { font-weight: 700; color: var(--ink-2); }
.bg-stage__title { font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 1.1; }
.bg-stage__q { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.bg-stage__foot { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 4px; font-size: 12.5px; font-weight: 700; }
.bg-stage__dex { display: flex; gap: 4px; }
.bg-stage__pip { width: 12px; height: 12px; border-radius: 4px; background: var(--line); }
.bg-stage__count { color: var(--ink-2); }
.bg-stage__go { margin-left: auto; color: var(--bean); }

/* 결말 등급 색 */
.tone-best { --tone: #d9a520; }
.tone-good { --tone: #6fa36a; }
.tone-mixed { --tone: #c9956b; }
.tone-bad { --tone: #c25b5b; }
.bg-stage__pip.is-on { background: var(--tone); }

/* ---------- 진행 — 계기판(해·게이지) */

.bg-hud {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 20px;
  background: var(--ink);
  color: var(--foam);
  box-shadow: var(--shadow-2);
}

.bg-hud__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bg-hud__title { font-size: 13px; font-weight: 700; opacity: .75; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-hud__year { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1; white-space: nowrap; }

.bg-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 8px; }
.bg-gauge { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
.bg-gauge__label { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.bg-gauge__icon { margin-right: 3px; }
.bg-gauge__pips { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; }
.bg-gauge__pips i { flex: 1 1 0; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, .16); }
.bg-gauge__pips i.is-on { background: var(--star); }
.bg-gauge__pips i.is-up { animation: pip-up .7s var(--spring) both; }
.bg-gauge__pips i.is-down { animation: pip-down .7s ease both; }
.bg-gauge.is-low .bg-gauge__pips i.is-on { background: #e07a6a; animation: pip-low 1.2s ease-in-out infinite; }

.bg-gauge__delta {
  position: absolute;
  right: 0;
  top: -14px;
  font-size: 13px;
  font-weight: 700;
  animation: float-up 1.3s ease-out both;
}
.bg-gauge__delta.is-up { color: #9fd99a; }
.bg-gauge__delta.is-down { color: #ff9b8a; }

@keyframes pip-up { 0% { transform: scaleY(.2); background: #fff; } 60% { transform: scaleY(1.6); } }
@keyframes pip-down { 0% { background: #ff9b8a; transform: scaleY(1.4); } 100% { background: rgba(255, 255, 255, .16); } }
@keyframes pip-low { 50% { opacity: .55; } }
@keyframes float-up { 0% { opacity: 0; transform: translateY(8px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }

/* ---------- 진행 — 장면 카드 */

.scene {
  position: relative;
  margin: 0 0 12px;
  padding: 18px 18px 16px;
  border-radius: 24px;
  background: var(--foam);
  box-shadow: var(--shadow-2);
  color: var(--ink);
}

.scene.is-in { animation: scene-in .5s var(--spring); }
@keyframes scene-in { from { opacity: 0; transform: translateX(26px) rotate(1.5deg) scale(.97); } }

.scene--event { border: 2px dashed rgba(201, 149, 107, .8); }
.scene--choice { border: 2px solid var(--caramel); }
.scene--ending { border: 3px solid var(--tone); }

.scene__tag { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--bean); }
.scene__title { margin: 0 0 8px; font-family: var(--display); font-size: 28px; line-height: 1.15; }
.scene__text { margin: 0 0 12px; font-size: 15px; line-height: 1.75; }
.scene__fell { margin: 0 0 8px; font-weight: 700; color: #c25b5b; }

.scene__anchor { margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: var(--foam-2); font-size: 13px; line-height: 1.65; }
.scene__link {
  margin-left: 6px;
  padding: 1px 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(120, 105, 150, .14);
  color: inherit;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.scene__opts { display: flex; flex-direction: column; gap: 9px; }

.scene__opt {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  column-gap: 10px;
  padding: 12px 14px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(201, 149, 107, .7), 0 2px 10px rgba(90, 60, 40, .08);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .4s var(--spring), box-shadow .15s ease;
}

.is-night .scene__opt { background: var(--foam-2); }
.scene__opt:hover { transform: translateY(-2px); }
.scene__opt:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(201, 149, 107, .7); transition-duration: .06s; }

.scene__opt-key {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--foam);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
}

.scene__opt-label { font-size: 15px; font-weight: 700; line-height: 1.4; }
.scene__opt-hint { font-size: 12px; color: var(--ink-2); }
.scene__next { display: flex; justify-content: flex-end; }

/* 결말 배지 */
.scene__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  background: var(--tone);
  color: #fff;
  font-weight: 700;
  animation: badge-in .7s var(--spring) both;
}
.scene__badge-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
@keyframes badge-in { 0% { transform: scale(.3) rotate(-12deg); opacity: 0; } 70% { transform: scale(1.12) rotate(3deg); opacity: 1; } }

.scene__reality {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(201, 149, 107, .12);
  border: 1px solid rgba(201, 149, 107, .45);
  font-size: 13.5px;
  line-height: 1.7;
}

.scene__dex { margin: 0 0 12px; }
.scene__dex-title { margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.scene__dex-row { display: flex; flex-wrap: wrap; gap: 6px; }
.scene__dex-chip {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px dashed var(--line);
  font-size: 12px;
  color: var(--ink-2);
}
.scene__dex-chip.is-on { border: 0; background: var(--tone); color: #fff; font-weight: 700; }
.scene__dex-chip.is-now { box-shadow: 0 0 0 2px var(--foam), 0 0 0 4px var(--tone); }
.scene__acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* 룰렛 — 확률만큼 나눈 띠 위를 바늘이 돌다 멈춘다 */
.roulette { margin-top: 12px; }
.roulette__band { position: relative; display: flex; height: 38px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--ink); }
.roulette__seg { position: relative; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; transition: filter .3s ease; }
.roulette__seg--0 { background: #6fa36a; }
.roulette__seg--1 { background: #c25b5b; }
.roulette__seg--2 { background: #d9a520; }
.roulette__seg--3 { background: #7d6fb0; }
.roulette__band:has(.is-hit) .roulette__seg:not(.is-hit) { filter: grayscale(.8) brightness(.8); }
.roulette__seg.is-hit { animation: seg-hit .6s var(--spring); }
@keyframes seg-hit { 40% { transform: scaleY(1.18); } }
.roulette__needle {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--foam);
}
.roulette__label { margin: 8px 0 0; font-weight: 700; text-align: center; }
.roulette__label.is-done { animation: pop-in .4s var(--spring); }

/* ---------- 지나온 길 · 실제 역사와 나란히 */

.bg-trail { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; }
.bg-trail__item {
  display: inline-flex;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--foam);
  color: var(--ink);
  font-size: 12px;
  opacity: .8;
}
.bg-trail__item.is-now { opacity: 1; box-shadow: 0 0 0 2px var(--caramel); }
.bg-trail__item--choice { background: var(--foam-2); }
.bg-trail__year { font-weight: 700; color: var(--ink-2); }
.bg-trail__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bg-compare { margin: 0 0 4px; }
.bg-compare > summary {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--foam);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.bg-compare > summary::-webkit-details-marker { display: none; }
.bg-compare > summary::after { content: " ▾"; }
.bg-compare[open] > summary::after { content: " ▴"; }
.bg-compare[open] > summary { margin-bottom: 10px; }

@media (prefers-reduced-motion: reduce) {
  .scene.is-in, .scene__badge, .bg-gauge__delta, .bg-gauge__pips i { animation: none !important; }
}
.pill-btn:disabled { opacity: .45; cursor: default; }

/* 실제 연표 상세 카드 안의 '갈림길로 가기' */
.branch-link {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px dashed var(--caramel);
  background: rgba(201, 149, 107, .08);
  color: var(--bean);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

@media (min-width: 900px) {
  /* 넓은 화면: 가운데 축 왼쪽 실제, 오른쪽 가상 — 가상 줄기는 축 오른쪽에 */
  .branch-tl::after { left: calc(var(--gutter) + (100% - var(--gutter) - var(--mark-w)) / 2 + var(--mark-w) / 2 + 4px); }

  .branch-cols {
    display: grid;
    grid-template-columns: var(--gutter) minmax(0, 1fr) var(--mark-w) minmax(0, 1fr);
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-bg);
    opacity: .7;
  }

  .branch-cols__real { grid-column: 2; text-align: right; padding-right: 10px; }
  .branch-cols__alt { grid-column: 4; padding-left: 10px; color: var(--focus-ink); }
}

/* ------------------------------------------------------- 공통 조각 */

/* 창 안으로 들어올 때 통 튀어나오는 등장 */
.tl-year {
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(.96);
  transform-origin: 30% 50%;
}

.tl-year.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .4s ease var(--d, 0ms),
    transform .62s var(--spring) var(--d, 0ms);
}

.dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.event {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 6px 8px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  gap: 7px;
  align-items: baseline;
}

.event:hover { background: #fff; }

/* -------------------------------------------------------- 카테고리 */

.pick-track { margin-bottom: 18px; }

.pick-track__label {
  margin: 0 0 8px;
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--ink-bg-2);
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}

/* 당근이 놓인 칸이 켜진 카테고리. 끈 칸은 점선으로 비워 둔다 */
.pick {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 12px 0 14px;
  border-radius: 18px;
  border: 1.5px dashed var(--line-bg);
  border-left: 6px solid var(--pc, var(--line-bg));
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  color: var(--ink-bg-2);
  background: transparent;
}

.pick.is-on {
  border: 0;
  border-left: 6px solid var(--pc, var(--caramel));
  background: var(--foam);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}

.pick__name {
  flex: 1 1 auto;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pick__count {
  white-space: nowrap;
  font-size: 12px;
  color: inherit;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

.pick__dot {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px dashed var(--line-bg);
  position: relative;
  transition: transform .4s var(--spring);
}

.pick.is-on .pick__dot {
  border: 0;
  border-radius: 0;
  background: none;
  transform: rotate(30deg);
}

/* 당근: 주황 몸통(::after) 위에 초록 잎(::before) */
.pick.is-on .pick__dot::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 8px;
  height: 14px;
  border-radius: 4px 4px 6px 6px / 3px 3px 12px 12px;
  background: #e8955b;
}

.pick.is-on .pick__dot::before {
  content: "";
  position: absolute;
  left: 4px;
  top: -1px;
  width: 10px;
  height: 7px;
  border-radius: 5px 5px 2px 2px;
  background: #8fb58a;
}

/* ------------------------------------------------------------ 검색 */

.search {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  background: var(--foam);
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  outline: none;
  margin-bottom: 14px;
  box-shadow: var(--shadow-1);
}

.search:focus { box-shadow: 0 0 0 2px var(--star), var(--shadow-1); }
.search::placeholder { color: var(--ink-2); }
.search::-webkit-search-cancel-button { display: none; }

.suggest {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.suggest button {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 0;
  background: var(--foam);
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}

.results {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.result {
  width: 100%;
  text-align: left;
  background: var(--foam);
  border: 0;
  border-left: 6px solid var(--c, var(--caramel));
  border-radius: 18px;
  padding: 13px 15px;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  font: inherit;
  color: var(--ink);
}

.result:hover { background: #fff; }

.result__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.result__years { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.result__cat { font-size: 12.5px; color: var(--ink-2); }

.result__title {
  margin: 0 0 3px;
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.1;
  font-weight: 700;
}

.result__summary { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }

/* ------------------------------------------------------------ 정보 */

.card {
  background: var(--foam);
  border-radius: 20px;
  padding: 18px 18px 20px;
  box-shadow: var(--shadow-1);
  color: var(--ink);
}

.card__label {
  margin: 0 0 6px;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--ink-2);
}

.card__text {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.75;
}

.card__text:last-child { margin-bottom: 0; }

.credits {
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

.credits strong { color: var(--ink); font-weight: 700; }

.note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.7;
}

.note--warn {
  border: 1.5px solid rgba(224, 137, 63, .5);
  background: rgba(224, 137, 63, .1);
}

/* ------------------------------------------------------------ 탭바 */

.tabbar {
  position: absolute;
  z-index: 30;            /* 연표 층(.scroll, z-index 1)보다 위 */
  left: 0; right: 0; bottom: 0;
  padding: 8px 12px max(12px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.tabbar__inner {
  display: flex;
  gap: 2px;
  padding: 6px;
  border-radius: 999px;
  background: var(--foam);
  box-shadow: var(--shadow-2);
  pointer-events: auto;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
}

/* 활성 탭 뒤 알약 — 탭을 옮기면 통통 튀며 따라간다 */
.tabbar__pill {
  position: absolute;
  left: 0;
  top: 6px;
  height: 44px;
  border-radius: 999px;
  background: var(--ink);
  pointer-events: none;
}

.tabbar__inner.is-ready .tabbar__pill {
  transition: transform .5s var(--spring), width .5s var(--spring);
}

.tabbar__inner::-webkit-scrollbar { display: none; }

.tab {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 15px;
  border-radius: 999px;
  border: 0;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  color: var(--ink);
  background: transparent;
  white-space: nowrap;
}

.tab { position: relative; z-index: 1; }
.tab.is-active { font-weight: 700; color: #ffd98a; }

.tab__icon {
  width: 18px; height: 18px;
  display: block;
  transition: transform .45s var(--spring);
}

.tab__icon svg { width: 100%; height: 100%; display: block; }
.tab.is-active .tab__icon { transform: scale(1.2) rotate(-8deg); }

/* -------------------------------------------------- 시트 · 팝업 */

.scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 40;
}

.scrim[hidden] { display: none; }
.scrim:not([hidden]) { animation: fade-in .25s ease; }
.scrim.is-leaving { animation: fade-out .23s ease forwards; }

@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

#sheet-scrim { z-index: 50; }

.sheet {
  position: absolute;
  z-index: 60;
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(520px, calc(100% - 28px));
  max-height: min(84%, 720px);
  display: flex;
  flex-direction: column;
  background: var(--foam);
  border-radius: 28px;
  box-shadow: var(--shadow-3);
  color: var(--ink);
}

.sheet[hidden] { display: none; }
/* 화면 가운데에 톡 떠오르는 카드. 머리 부분을 아래로 끌어내려도 닫힌다 */
.sheet:not([hidden]) { animation: pop-in .46s var(--spring); }
.sheet.is-leaving { animation: pop-out .2s ease-in forwards; }
.sheet.is-dragging { animation: none; }

.sheet__head {
  padding: 14px 18px 10px 22px;
  touch-action: none;
  cursor: grab;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sheet__head::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 9px;
  width: 40px;
  height: 5px;
  margin-left: -20px;
  border-radius: 3px;
  background: var(--line);
}

.sheet__titles { flex: 1 1 auto; min-width: 0; padding-top: 8px; }

/* 연도 — 앞의 색 점이 카테고리 */
.sheet__eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-2);
}

.sheet__eyebrow .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

.sheet__title {
  margin: 0;
  font-family: var(--display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
}

.sheet__body { padding: 0 22px 20px; overflow-y: auto; }

.icon-btn {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  margin-top: 6px;
  border-radius: 50%;
  border: 0;
  background: var(--foam-2);
  color: inherit;
  cursor: pointer;
  font-size: 15px;
}

.sheet__source {
  margin: 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.sheet__source a { color: inherit; text-underline-offset: 2px; }
.sheet__source.is-missing { opacity: .75; }

.sheet__desc {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.8;
  text-wrap: pretty;
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(.82) translateY(14px); }
}

@keyframes pop-out {
  to { opacity: 0; transform: scale(.92); }
}

/* ------------------------------------------------ 시간 계기판(HUD) */

/* 큰 숫자 + 시대 띠 + 띠 위를 깡충 가는 시로 */
.hud {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 68px);
  width: min(620px, calc(100% - 20px));
  margin: 0 auto;
  padding: 9px 12px 8px;
  border-radius: 24px;
  background: var(--foam);
  box-shadow: var(--shadow-2);
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
}

.hud__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hud__read {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hud__pre {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
}

.hud__pre:not(:empty) { margin-right: 2px; }

.hud__num {
  display: inline-block;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  transform-origin: 0 100%;
}

.hud__suf { font-size: 14px; font-weight: 700; color: var(--ink-2); }

.hud__meta {
  margin: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.3;
  white-space: nowrap;
}

.hud__era {
  display: inline-block;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
}

.hud__count {
  font-size: 11.5px;
  color: var(--ink-2);
  min-height: 1.3em;
}

.hud__step {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: var(--foam-2);
  color: var(--ink);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  padding: 0 0 3px;
  cursor: pointer;
}

.hud__step:hover { background: #fff; }

/* 펼치기 단추 — 접을 수 있을 때만(탐험·폰) 보인다 */
.hud__more {
  display: none;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-left: -4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  padding: 0;
}

.hud__more i {
  display: block;
  width: 8px;
  height: 8px;
  margin: 7px auto 0;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .3s var(--spring), margin .3s ease;
}

.hud.is-mini .hud__more,
.hud.is-open .hud__more { display: block; }
.hud.is-open .hud__more i { transform: rotate(135deg); margin-top: 4px; }

/* 접힌 계기판 — 해와 시대만 담은 알약 한 줄. 누르면 펼친다 */
.hud.is-mini {
  width: -moz-fit-content;
  width: fit-content;
  max-width: calc(100% - 20px);
  padding: 5px 6px;
  border-radius: 999px;
}

.hud.is-mini .hud__top { gap: 8px; }
.hud.is-mini .hud__read,
.hud.is-mini .hud__meta { cursor: pointer; }
.hud.is-mini .hud__num { font-size: 24px; }
.hud.is-mini .hud__pre,
.hud.is-mini .hud__suf { font-size: 12px; }
.hud.is-mini .hud__step { width: 32px; height: 32px; font-size: 19px; }
.hud.is-mini .hud__meta { flex-direction: row; align-items: baseline; gap: 6px; margin-left: 2px; }
.hud.is-mini .hud__era { font-size: 15px; }
.hud.is-mini .hud__count { display: none; }   /* 장면 이름은 캔버스에 이미 적혀 있다 */
/* 숫자 자릿수·기원전이 바뀌어도 알약 폭이 출렁이지 않게 '기원전 30000년' 자리를 잡아 둔다 */
.hud.is-mini .hud__read { min-width: 124px; justify-content: center; }
.hud.is-mini .hud__now,
.hud.is-mini .scrub,
.hud.is-mini .hud__x { display: none; }
.is-open .hud__read, .is-open .hud__meta { cursor: pointer; }

/* 시대 점프 버튼을 누르면 납작해졌다가 튀어오른다 */
.hud__step.is-pressed { animation: squash .42s var(--spring); }

@keyframes squash {
  0% { transform: scale(1.25, .75); }
  40% { transform: scale(.9, 1.15); }
  100% { transform: scale(1, 1); }
}

.scrub {
  position: relative;
  height: 44px;
  margin-top: 6px;
  cursor: pointer;
  outline: none;
  touch-action: none;
}

.scrub__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  height: 22px;
  border-radius: 11px;
  overflow: hidden;
  background: var(--foam-2);
  box-shadow: inset 0 1px 3px rgba(92, 61, 46, .18);
}

.scrub:focus-visible .scrub__track { outline: 2px solid var(--star); outline-offset: 2px; }

.scrub__seg {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--seg);
  display: flex;
  align-items: center;
  padding: 0 0 2px 7px;
  overflow: hidden;
}

.scrub__seg span {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  color: #fff8ef;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* 눈금 하나 = 연표의 한 줄 */
.scrub__ticks {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  pointer-events: none;
}

.scrub__ticks i {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 5px;
  background: rgba(255, 248, 239, .5);
}

/* 손잡이 = 시로. 끌면 끄는 쪽으로 기울고(--tilt), 귀가 흔들린다 */
.scrub__knob {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 44px;
  pointer-events: none;
  will-change: transform;
}

.scrub__knob i {
  position: absolute;
  left: -22px;
  top: 0;
  width: 44px;
  height: 44px;
  transform: rotate(var(--tilt, 0deg));
  transform-origin: 50% 80%;
  transition: transform .3s var(--spring);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .3));
}

.scrub__knob svg { width: 100%; height: 100%; display: block; }

.hud.is-grabbed .scrub__knob i { transform: scale(1.25) rotate(var(--tilt, 0deg)); transition-duration: .12s; }
.hud.is-grabbed .scrub__knob .shiro__ears { animation: ear-wiggle .35s ease-in-out infinite alternate; transform-origin: 60px 40px; }
.hud.is-grabbed .scrub { cursor: grabbing; }

@keyframes ear-wiggle {
  from { transform: rotate(-6deg); }
  to { transform: rotate(6deg); }
}

/* 던지면 시로가 한 번 깡총 */
.hud.is-hop .scrub__knob i { animation: hop .5s var(--spring); }

@keyframes hop {
  0% { transform: translateY(0) scale(1.1, .9); }
  40% { transform: translateY(-14px) scale(.95, 1.1); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* 빨리 끌면 뒤로 흩어지는 흙먼지 (hud.js 가 만든다) */
.scrub__spark {
  position: absolute;
  top: 20px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--foam);
  opacity: .9;
  pointer-events: none;
  animation: spark .55s ease-out forwards;
}

@keyframes spark {
  from { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
  to { opacity: 0; transform: translate(var(--dx, -20px), var(--dy, -16px)) scale(2); }
}

/* 지금 이때 — 같은 해에 나라마다 이어지던 왕조·시대 */
.hud__now {
  display: flex;
  gap: 6px;
  min-height: 26px;
  margin-top: 6px;
  overflow-x: auto;       /* 칩이 많으면(최대 나라마다 2개) 옆으로 밀어 본다 */
  overflow-y: hidden;
  scrollbar-width: none;
  touch-action: pan-x;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 88%, transparent);
}

.hud__now::-webkit-scrollbar { display: none; }

.hud__chip {
  flex: 0 0 auto;
  max-width: 70%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 0;
  background: var(--foam-2);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.hud__chip i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }

.hud__chip.is-era {
  background: transparent;
  border: 1.5px dashed rgba(92, 61, 46, .35);
}

.hud__chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 가로로 넘길 열이 있을 때만 보이는 얇은 위치 막대 */
.hud__x {
  position: absolute;
  left: 22px;
  right: 22px;
  top: -11px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 248, 239, .25);
  overflow: hidden;
  opacity: .55;
  transition: opacity .3s ease;
}

.hud__x.is-active { opacity: 1; }
.hud__x[hidden] { display: none; }

.hud__x i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--caramel);
}

/* ---------------------------------------------------------- 반응형 */

@media (max-width: 640px) {
  .head { padding: max(12px, env(safe-area-inset-top)) 14px 8px; gap: 8px; }
  .brand__title { font-size: 20px; }
  
  .focus-line::before { right: 10px; }
  .hud { padding: 8px 10px 8px; }
  .hud__num { font-size: 30px; }
  .hud__step { width: 36px; height: 36px; font-size: 20px; }
  
  
  
  
  
  
  .seg__btn { padding: 0 9px; font-size: 13.5px; }
  
  
  
  .view--pane { padding: 4px 12px 100px; }
  .tab { padding: 0 8px; gap: 4px; }
  .tabbar__inner { gap: 0; }
  .tab__icon { width: 20px; height: 20px; }
}

/* 아주 좁은 화면: 탭 이름을 아이콘 아래로 내려 네 탭이 다 들어가게 */
@media (max-width: 400px) {
  .tab { flex-direction: column; gap: 2px; height: 50px; padding: 0 11px; font-size: 11px; }
  .tabbar__pill { height: 50px; }
  
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .tl-year { opacity: 1; transform: none; }
  .stage__art.is-on { animation: none; }
  .scrub__spark { display: none; }
}

/* ---------------------------------------------------------- 퀴즈(데모) — js/quiz.js */
.pill-btn--strong { background: var(--ink); color: var(--foam); font-weight: 700; }
.pill-btn--strong:hover { background: var(--ink); filter: brightness(1.12); }

.quiz__top { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.quiz__title { margin: 0; font-family: var(--display); font-size: 24px; color: var(--ink-bg); }
.quiz__badge {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  background: var(--foam);
  box-shadow: var(--shadow-1);
}
.quiz__status { margin: 0 0 4px; }
.quiz__flash { min-height: 1.6em; margin: 0 0 10px; font-size: 14.5px; font-weight: 700; color: var(--ink-bg); }
.quiz__flash.is-ok { color: #3f8a55; }
.quiz__flash.is-miss { color: #b5523f; }
.quiz__hand { margin: 0 0 14px; }
.quiz__hint { margin: 0 0 6px; font-size: 13px; color: var(--ink-bg-2); }
.quiz__result { margin: 0 0 14px; }
.quiz__score { margin: 0 0 10px; font-size: 26px; letter-spacing: 2px; color: var(--ink-bg); }

.quiz__line { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px dashed var(--line-bg); }
.quiz__slot-row, .quiz__card-row { margin: 0; padding: 4px 0; }

.quiz-card {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 16px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--foam);
  box-shadow: var(--shadow-1);
  cursor: pointer;
}
.quiz-card:disabled { cursor: default; opacity: 1; }
.quiz__hand .quiz-card { border: 2px solid var(--ink); }
.quiz-card__head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.quiz-card__title { font-size: 16px; font-weight: 700; }
.quiz-card__year { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.quiz-card.is-ok { box-shadow: inset 4px 0 0 #5fae74, var(--shadow-1); }
.quiz-card.is-miss { box-shadow: inset 4px 0 0 #d4735f, var(--shadow-1); }

.quiz-slot {
  width: 100%;
  height: 34px;
  border: 1.5px dashed var(--line-bg);
  border-radius: 12px;
  background: transparent;
  color: var(--ink-bg-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.quiz-slot:hover, .quiz-slot:focus-visible { border-color: var(--ink-bg); color: var(--ink-bg); background: rgba(255, 255, 255, .35); }

/* ------------------------------------------------ 사용법 안내(js/tour.js) */

/* 화면 전체를 덮지만 손은 막지 않는다 — 안내를 보며 그림판을 바로 만져 볼 수 있게 */
.tour {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}

.tour[hidden] { display: none; }

/* 가리키는 곳 둘레만 밝게 남기는 구멍 */
.tour__spot {
  position: absolute;
  border-radius: 22px;
  box-shadow: 0 0 0 200vmax rgba(24, 14, 10, .42), 0 0 0 3px var(--star);
  transition: left .35s var(--spring), top .35s var(--spring), width .35s var(--spring), height .35s var(--spring);
}

.tour__spot[hidden] { display: none; }

.tour__card {
  position: absolute;
  left: 50%;
  width: min(420px, calc(100% - 24px));
  padding: 16px 18px 14px;
  border-radius: 24px;
  background: var(--foam);
  color: var(--ink);
  box-shadow: var(--shadow-3);
  pointer-events: auto;
  transform: translateX(-50%);
}

.tour__card--top { top: 46px; }
.tour__card--bottom { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.tour__card.is-in { animation: tour-in .42s var(--spring); }

@keyframes tour-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.94); }
}

.tour__count {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}

.tour__title {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.15;
}

.tour__text {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.7;
  text-wrap: pretty;
}

.tour__skip {
  position: absolute;
  top: 12px;
  right: 14px;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.tour__skip:hover { background: var(--foam-2); }
.tour__skip[hidden] { display: none; }

.tour__dots { display: flex; gap: 6px; margin-bottom: 12px; }

.tour__dots span {
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: var(--line);
  transition: width .25s ease, background .25s ease;
}

.tour__dots span.is-on { width: 20px; background: var(--star); }

.tour__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.tour__never {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
}

.tour__never[hidden] { display: none; }
.tour__never input { width: 17px; height: 17px; margin: 0; accent-color: var(--star); }
.tour__btns { display: flex; gap: 8px; margin-left: auto; }
.tour__btns [hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tour__spot { transition: none; }
}

/* 아주 좁은 폰에서도 이름이 잘리지 않게 */
@media (max-width: 380px) {
  .brand__title { font-size: 18px; }
}