/* 게임 UI 부품 — 색은 ../theme/tokens.css 의 역할 이름만 쓴다(작은 서울 색감 명세 v1, 2026-09-24).
   예전 이름(--ink·--muted·--mint·--cream)은 다른 화면(ui-kit·qa)이 쓰므로 역할 토큰으로 이어 둔다. */
:root{--ink:var(--text-primary);--muted:var(--text-secondary);--mint:var(--action-primary);--cream:var(--surface-card);--coral:var(--loss);--gold:var(--tier-surface);
  --p0:var(--player-0);--p1:var(--player-1);--p2:var(--player-2);--p3:var(--player-3);
  font-family:var(--font);color:var(--text-primary);background:var(--surface-page);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:var(--surface-page);min-height:100vh}
button,input,select{font:inherit}
button,a,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{cursor:pointer;color:inherit}
button:disabled{cursor:default}
a{color:inherit}
h1,h2,h3,p{margin-top:0}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* 버튼: 도톰한 게임 부품. 주요 행동만 오렌지(흰 글자는 크고 굵게), 나머지는 샌드·종이 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--action-ghost-border);border-radius:13px;padding:12px 16px;font-size:13px;font-weight:800;transition:transform .12s,box-shadow .12s,background .16s;background:var(--action-ghost);color:var(--text-primary);min-height:44px;text-decoration:none}
.btn.primary{background:var(--action-primary);color:var(--action-primary-text);border-color:var(--action-primary-border);box-shadow:0 4px 0 var(--action-primary-shadow);font-size:15px;font-weight:900}
.btn.primary:hover:not(:disabled){background:var(--action-primary-hover)}
.btn.secondary{background:var(--action-secondary);border-color:var(--action-secondary-border);box-shadow:0 3px 0 var(--action-secondary-shadow)}
.btn.reward{background:var(--reward-surface);border-color:var(--reward-border);box-shadow:0 4px 0 #D2A044;color:var(--tier-text)}
.btn.danger{background:#FDE3E6;border-color:#EFA8B1;box-shadow:0 3px 0 #D8A3AC;color:#9E4553}
.btn.ghost{background:var(--action-ghost);border-color:var(--action-ghost-border);box-shadow:0 2px 0 var(--action-ghost-shadow)}
.btn:not(:disabled):active,.btn.pressed{transform:translateY(3px);box-shadow:none!important}
.btn:disabled,.btn.disabled{background:#EFE7DA;color:#A69E90;border-color:#E3D8C6;box-shadow:none}
.wide{width:100%}
.text-button{background:none;border:0;padding:10px 4px;font-size:12px;font-weight:700;color:var(--text-warm);text-decoration:none;cursor:pointer}
.quiet{background:none;border:0;font-size:13px;font-weight:700;padding:10px 12px;border-radius:10px}
.quiet:hover{background:var(--surface-tab)}
.card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-card);padding:22px;box-shadow:0 4px 0 var(--shadow-card)}
.card.market{background:linear-gradient(145deg,#EAF2FF,#FBF3FF);border-color:#D6D7F1}
.card.result{background:linear-gradient(140deg,#FFF3D1,var(--surface-card));border:2px solid var(--reward-border)}
.overline,.eyebrow{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--overline)}
/* 티어 배지: 티어마다 다른 의미 색은 유지(가격대 구분), 바탕만 따뜻하게 */
.badge,.tier{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:9px;font-size:12px;font-weight:900;background:var(--tier-surface);color:var(--tier-text)}
.tier[data-tier="1"],.badge[data-tier="1"]{background:#E4F0DA;color:#4F7A3C}
.tier[data-tier="2"],.badge[data-tier="2"]{background:#DDEBFB;color:#3E75A8}
.tier[data-tier="3"],.badge[data-tier="3"]{background:#EAE2FA;color:#7C5CB0}
.tier[data-tier="4"],.badge[data-tier="4"]{background:#FDE1E3;color:#B05A6C}
.tier[data-tier="5"],.badge[data-tier="5"]{background:var(--tier-surface);color:var(--tier-text)}
.gauge{height:9px;background:#EDE3D2;border-radius:9px;overflow:hidden}
.gauge>i{display:block;height:100%;width:var(--value,0%);background:var(--action-primary);border-radius:inherit;transition:width .3s}
.debt-track{position:relative;display:flex;height:8px;border-radius:9px;overflow:visible;background:linear-gradient(to right,var(--band-safe) 0 50%,var(--band-push) 50% 75%,var(--band-hot) 75% 100%)}
.debt-track>i{position:absolute;left:var(--value,0%);top:-3px;width:4px;height:14px;background:var(--text-primary);border:1px solid #fff;border-radius:3px}
.gauge-caption{display:flex;justify-content:space-between;font-size:11px;color:var(--text-secondary);margin:9px 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
dialog{border:1px solid var(--border-default);border-radius:25px;padding:30px;background:var(--surface-card);color:var(--text-primary);width:min(520px,92vw);max-height:90vh;overflow:auto;box-shadow:0 18px 60px #28324B33}
dialog::backdrop{background:#28324B66;backdrop-filter:blur(5px)}
dialog h2{font-size:26px;margin:12px 0 16px;letter-spacing:-1px}
dialog p{font-size:13px;line-height:1.8;color:var(--text-secondary)}
.dialog-close{float:right;background:#EEE4D2;border:0;border-radius:50%;width:34px;height:34px;font-size:22px;line-height:1;cursor:pointer}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}