/* ─────────────────────────────────────────────────────────────
   컴포넌트 — tokens.css 위에서만 동작한다.
   재질 규칙
     · 콘텐츠(카드, 타일, 목록)  → Semi-Flat  (.card, .tile)
     · 떠 있는 크롬(상단 바, 탭 바, 주 행동, 시트) → Liquid Glass (.glass)
     · 인물·서사 글 → 세리프 (.display, .title, .story)
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { font: var(--t-body); color: var(--ink); background: var(--bg); transition: background var(--d-slow), color var(--d-slow); }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-chip); }

/* 안개 배경: 화면 루트에 한 번만 */
.mist { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); }
.mist::before { content: ""; position: absolute; inset: -20%; z-index: -1; filter: blur(10px);
  background: radial-gradient(38% 30% at 18% 8%, var(--mist-a), transparent 70%), radial-gradient(40% 28% at 92% 30%, var(--mist-b), transparent 70%), radial-gradient(45% 30% at 30% 96%, var(--mist-c), transparent 70%);
  animation: mist-drift 26s ease-in-out infinite alternate; }
@keyframes mist-drift { to { transform: translate3d(3%, -2%, 0) scale(1.06); } }

/* ── 글자 ── */
.display { font: var(--t-display); letter-spacing: -.02em; text-wrap: balance; }
.title { font: var(--t-title); letter-spacing: -.01em; text-wrap: balance; }
.story { font: var(--t-story); color: var(--ink-2); }
.heading { font: var(--t-heading); }
.label { font: var(--t-label); }
.caption { font: var(--t-caption); color: var(--ink-3); }
.kicker { font: var(--t-micro); letter-spacing: .14em; color: var(--accent); }
.num { font-variant-numeric: tabular-nums; }

/* ── 아이콘 ── */
.i { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.i.sm { width: 16px; height: 16px; }

/* ── 재질 ── */
.card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--e1); overflow: hidden; transition: background var(--d-slow); }
.card.pad { padding: var(--s4) 18px; }
.glass { background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--e2);
  backdrop-filter: blur(var(--glass-blur)) saturate(170%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%); }

/* ── 버튼 ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s5); border-radius: var(--r-control); font: var(--t-label); font-size: 14px; transition: transform var(--d-fast) var(--ease), background var(--d-base); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.quiet { background: var(--surface-2); color: var(--ink); }
.btn.ghost { color: var(--ink-2); }
.btn.block { display: flex; width: 100%; }
.btn.between { justify-content: space-between; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); transition: transform var(--d-base) var(--ease); }
.icon-btn:active { transform: scale(.88); }

/* 주 행동: 화면에 하나. 유리 위에 강조색 원 */
.cta { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 56px; padding: 0 var(--s2) 0 22px; border-radius: 28px; font: var(--t-label); font-size: 15px; transition: transform var(--d-fast) var(--ease); }
.cta:active { transform: scale(.97); }
.cta em { font-style: normal; color: var(--accent); }
.cta .go { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; }
.cta span { transition: opacity var(--d-fast); }

/* ── 칩 / 필 ── */
.chip { display: inline-flex; align-items: center; gap: var(--s1); font: var(--t-caption); color: var(--ink-2); padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-2); }
.chip.outline { background: none; box-shadow: inset 0 0 0 1px var(--line); }
.chip.accent { color: var(--accent); background: var(--accent-soft); }
.chip.good { color: var(--good); background: var(--good-soft); }
.chip.warn { color: var(--warn); background: var(--warn-soft); }
.chip.danger { color: var(--danger); background: var(--danger-soft); }
.chip.tag { font: var(--t-micro); letter-spacing: .08em; }
.pill { display: inline-flex; align-items: center; gap: var(--s1); font: var(--t-label); font-variant-numeric: tabular-nums; padding: 5px 9px 5px 7px; border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.pill .i { width: 15px; height: 15px; color: var(--ink-2); }
.pill.accent .i { color: var(--accent); }

/* ── 막대 ── */
.bar { height: 5px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.bar > i { display: block; height: 100%; width: var(--v, 0%); border-radius: inherit; background: var(--accent); transition: width .7s var(--ease); }
.bar.good > i { background: var(--good); } .bar.warn > i { background: var(--warn); } .bar.mute > i { background: var(--ink-3); }

/* ── 상단 상태 바 (유리) ── */
.topbar { display: flex; align-items: center; gap: var(--s2); height: 52px; padding: 0 var(--s2) 0 var(--s4); border-radius: 26px; }
.topbar .when { flex: 1; line-height: 1.15; }
.topbar .when small { display: block; font: var(--t-micro); font-weight: 400; color: var(--ink-2); }
.topbar .when b { font: var(--t-label); font-size: 14px; font-variant-numeric: tabular-nums; }

/* ── 하단 탭 바 (유리) ── */
.tabbar { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; height: 66px; padding: 0 6px; border-radius: 33px; }
.tabbar button { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: 2px; height: 54px; border-radius: 27px; font-size: 10.5px; color: var(--ink-3); transition: color var(--d-base); }
.tabbar button[aria-current="page"] { color: var(--ink); }
.tabbar .ind { position: absolute; top: 6px; left: 6px; height: 54px; width: calc((100% - 12px) / var(--n, 5)); border-radius: 27px; background: var(--surface); box-shadow: 0 1px 3px var(--glass-shade); transform: translateX(calc(var(--at, 0) * 100%)); transition: transform var(--d-slow) var(--ease); }

/* ── 인물 영역 (Editorial) ── */
.hero { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end; }
.hero .traits { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
/* 초상 슬롯: 지금은 도트, 나중에 일러스트 <img>로 교체. 비율과 자리는 그대로 */
.portrait { position: relative; width: var(--size, 84px); aspect-ratio: 1; border-radius: calc(var(--size, 84px) * .28); background: var(--px-sky); box-shadow: var(--e1); overflow: hidden; display: grid; align-items: end; }
.portrait > svg, .portrait > img { display: block; width: 100%; height: auto; }
.portrait > img { height: 100%; object-fit: cover; }
.portrait.tall { aspect-ratio: 4 / 5; }
.portrait[data-temp]::after { content: "임시"; position: absolute; top: 6px; left: 6px; font: var(--t-micro); font-size: 9px; color: var(--ink-3); background: var(--surface); padding: 1px 5px; border-radius: 6px; }
.px { shape-rendering: crispEdges; }

/* ── 능력·자원 타일 ── */
.stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s2); }
.stat { background: var(--surface); border-radius: var(--r-tile); box-shadow: var(--e1); padding: 10px 12px; display: grid; gap: 4px; }
.stat small { display: flex; align-items: center; gap: 4px; font: var(--t-caption); color: var(--ink-2); }
.stat small .i { width: 15px; height: 15px; color: var(--accent); }
.stat b { font: var(--t-heading); font-variant-numeric: tabular-nums; }
.stat b span { font-weight: 400; color: var(--ink-3); font-size: 13px; }

/* ── 사건 카드: 이미지를 쓰는 유일한 카드 ── */
.event .art { background: var(--px-sky); padding: 18px 18px 0; }
.event .art > svg, .event .art > img { display: block; width: 100%; }
.event .body { padding: var(--s4) 18px 18px; display: grid; gap: var(--s2); justify-items: start; }
.event .body .btn { margin-top: 6px; }
.term { color: var(--accent); font-weight: 600; border-bottom: 1px dashed currentColor; cursor: pointer; }

/* ── 행동 타일 (Icon-first) ── */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { background: var(--surface); border-radius: var(--r-tile); box-shadow: var(--e1); padding: 14px 6px 12px; display: grid; justify-items: center; gap: var(--s2); transition: transform .18s var(--ease), box-shadow var(--d-base), background var(--d-slow); }
.tile:active { transform: scale(.95); }
.tile .ic { width: 46px; height: 46px; border-radius: var(--r-control); display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); transition: background var(--d-base), color var(--d-base), transform .35s var(--ease); }
.tile b { font: var(--t-label); }
.tile small { font: var(--t-micro); font-weight: 400; color: var(--ink-3); margin-top: -6px; }
.tile[aria-pressed="true"] { box-shadow: 0 0 0 1.5px var(--accent), var(--e1); }
.tile[aria-pressed="true"] .ic { background: var(--accent); color: var(--on-accent); transform: translateY(-2px) scale(1.05); }
.tile[disabled] { opacity: .45; }
/* 가로형: 설명이 필요한 목록(기회 2~3개)에 */
.tile.row { grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; gap: var(--s3); padding: 12px 14px; text-align: left; }
.tile.row small { margin: 2px 0 0; display: block; font: var(--t-caption); }
.tile.row > .i { color: var(--ink-3); }

/* 행동 상세: 선택 전에 대가를 보여 준다 */
.detail { display: grid; gap: var(--s3); }
.detail p { font-size: 13.5px; color: var(--ink-2); }
.odds { display: flex; align-items: center; gap: 10px; font: var(--t-caption); }
.odds .bar { flex: 1; }
.odds b { color: var(--ink); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── 섹션 머리 ── */
.sect { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--s1); }

/* ── 세력 줄 ── */
.power { display: grid; grid-template-columns: 86px 1fr 30px; gap: 10px; align-items: center; font-size: 13px; }
.power b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.wire { font: 400 13px/1.6 var(--font-display); color: var(--ink-2); padding-top: var(--s3); border-top: 1px solid var(--line); }
.wire b { font: var(--t-micro); letter-spacing: .1em; color: var(--ink-3); margin-right: var(--s2); }

/* ── 지도 ── */
.starmap { display: block; width: 100%; height: auto; }
.starmap .lane { stroke: var(--ink-3); stroke-width: 1; opacity: .45; }
.starmap .lane.unknown { stroke-dasharray: 2 4; }
.starmap .lane.from { stroke: var(--accent); stroke-width: 1.6; opacity: .8; }
.starmap .lane.path { stroke: var(--accent); stroke-width: 2; opacity: 1; stroke-dasharray: 4 3; }
.starmap .node { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1.2; cursor: pointer; transition: stroke var(--d-base); }
.starmap .node:hover { stroke: var(--accent); }
.starmap .here { fill: var(--accent); }
.starmap .halo { fill: none; stroke: var(--accent); transform-box: fill-box; transform-origin: center; animation: halo 2.6s var(--ease) infinite; }
@keyframes halo { from { transform: scale(.6); opacity: .6; } to { transform: scale(2.2); opacity: 0; } }
.starmap text { font: 11px var(--font-ui); fill: var(--ink-2); text-anchor: middle; }
.starmap text.on { fill: var(--ink); font-weight: 600; }

/* ── 용어 카드: 처음 만난 고유명사에만 ── */
.veil { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; padding: 28px; perspective: 900px; opacity: 0; pointer-events: none; transition: opacity .3s;
  background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.veil.on { opacity: 1; pointer-events: auto; }
.term-card { position: relative; width: 100%; max-width: 300px; padding: 22px; border-radius: var(--r-sheet); text-align: center; overflow: hidden; display: grid; gap: var(--s2); justify-items: center; transform: rotateY(-95deg) scale(.86); transition: transform var(--d-reveal) var(--ease); }
.veil.on .term-card { transform: none; }
.term-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%); background: linear-gradient(105deg, transparent 35%, var(--glass-edge) 50%, transparent 65%); }
.veil.on .term-card::after { animation: sweep 1.1s .45s var(--ease) forwards; }
@keyframes sweep { to { transform: translateX(120%); } }
.term-card .frame { position: relative; width: 120px; height: 120px; margin: 6px 0 8px; padding: 20px; border-radius: var(--r-sheet); background: var(--px-sky); }
.term-card .frame::before { content: ""; position: absolute; inset: -7px; border-radius: 34px; border: 1px solid var(--accent); opacity: 0; }
.veil.on .frame::before { animation: ring 1.2s .5s var(--ease) forwards; }
@keyframes ring { from { opacity: .7; transform: scale(.8); } to { opacity: 0; transform: scale(1.35); } }
.term-card p { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin-bottom: var(--s2); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }