/* 화투 맞고 · 게임 부품 (값은 전부 DESIGN.md 토큰) */

/* ---------- 금속 (브러시 그라데이션: 좌상 밝고 우하 어둠) ---------- */
.m-steel { background: repeating-linear-gradient(100deg, rgb(255 255 255 / .12) 0 1px, transparent 1px 3px), linear-gradient(145deg, var(--steel-1) 0%, var(--steel-2) 52%, var(--steel-3) 100%); }
.m-silver { background: repeating-linear-gradient(100deg, rgb(255 255 255 / .18) 0 1px, transparent 1px 3px), linear-gradient(145deg, var(--silver-1) 0%, var(--silver-2) 48%, var(--silver-3) 100%); }
.m-gold { background: repeating-linear-gradient(100deg, rgb(255 255 255 / .16) 0 1px, transparent 1px 3px), linear-gradient(145deg, var(--gold-1) 0%, var(--gold-2) 50%, var(--gold-3) 100%); }

/* ---------- HUD ---------- */
.hud {
  position: absolute; z-index: 20; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: calc(env(safe-area-inset-top, 0px) + var(--sp-2)) var(--sp-4) var(--sp-2);
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
/* 허브가 넣는 법적 안내 링크(#nts-legal, 왼쪽 위 고정) 아래로 HUD 를 내린다 */
body:has(#nts-legal) .hud { padding-top: calc(env(safe-area-inset-top, 0px) + var(--sp-2) + var(--sp-4)); }
.chip {
  display: flex; align-items: baseline; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  box-shadow: var(--hollow), var(--rim), inset 0 -1px 0 rgb(255 255 255 / .12);
  color: var(--paper); font: 16px/1 var(--font-ko); white-space: nowrap; transform-origin: 50% 50%;
}
.chip .nm { font-size: 15px; color: var(--muted); }
.chip .sc { font: 20px/1 var(--font-display); font-weight: 400; font-variant-numeric: tabular-nums; min-width: 1.1em; text-align: right; }
.chip small { font-size: 13px; color: var(--muted); }
.chip .go { font: 13px/1 var(--font-ko); font-style: normal; color: var(--ink); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-s); display: none; box-shadow: 0 0 0 2px var(--ink); }
.chip .go.on { display: inline-block; }
.chip .tot { display: inline-flex; align-items: center; gap: var(--sp-1); margin-left: var(--sp-1); padding-left: var(--sp-2); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--paper) 18%, transparent); }
.chip .tot b { font: 14px/1 var(--font-display); font-weight: 400; color: var(--glow); font-variant-numeric: tabular-nums; }
.chip .stk { width: 13px; height: 13px; background: var(--glow); clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 62%, 80% 100%, 50% 78%, 20% 100%, 30% 62%, 0 38%, 38% 36%); }
.chip.turn { box-shadow: var(--hollow), 0 0 0 3px var(--glow), 0 0 18px color-mix(in srgb, var(--glow) 60%, transparent); }
.hud .mid { flex: 1; text-align: center; font: 15px/1 var(--font-ko); color: var(--muted); white-space: nowrap; }
.hud .mid b { font: 15px/1 var(--font-display); font-weight: 400; color: var(--glow); }
#mute { width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer; padding: 0; display: grid; place-items: center; color: var(--ink); box-shadow: var(--bevel), var(--rim), 0 3px 0 var(--ink); flex: none; }
#mute svg { width: 21px; height: 21px; }
#mute .x { display: none; }
#mute[aria-pressed="true"] .w { display: none; }
#mute[aria-pressed="true"] .x { display: block; }
#mute:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
#app.narrow .chip { padding: var(--sp-1) var(--sp-2); gap: var(--sp-1); }
#app.narrow .chip .nm { font-size: 13px; }
#app.narrow .chip .sc { font-size: 18px; }
#app.narrow .hud .mid { font-size: 13px; }

/* ---------- 판 위 카드 상태 ---------- */
#app[data-state="input"] #table .card { cursor: pointer; }
#app[data-state="input"] #table .card.match::before { content: ''; position: absolute; z-index: 5; left: 50%; top: -8px; width: 16px; height: 12px; margin-left: -8px; background: var(--glow); clip-path: polygon(50% 100%, 0 0, 100% 0); filter: drop-shadow(0 0 3px var(--ink)); }
#app[data-state="input"] #table .card.pick .face { box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px var(--glow-2), 0 0 20px color-mix(in srgb, var(--glow-2) 80%, transparent); }
.tag { z-index: 800; font-size: 12px; padding: 0 var(--sp-2); }
.tag b { font-size: 13px; }

/* ---------- 손패 살펴보기 · 끌어 내기 ----------
   떠오르기·확대는 .face 에만 CSS 로 건다. 카드 자체(.card)의 transform 은 GSAP 가 쓰므로 건드리지 않는다. */
#table .card { touch-action: none; }
#table .card .face { transition: transform .16s ease, box-shadow .16s ease; }
#table .card.hovering, #table .card.sel { z-index: 850 !important; }
#table .card.hovering .face { transform: translateY(-12px); }
#table .card.sel .face {
  transform: translateY(-16px) scale(1.08);
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px var(--glow), 0 12px 20px rgb(8 3 24 / .45);
}
#table .card.dragging { z-index: 960 !important; cursor: grabbing; }
#table .card.dragging .face { transform: scale(1.12); box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px var(--glow), var(--soft); transition: box-shadow .16s ease; }
#app[data-state="input"] #table .card.kfocus .face { box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px var(--paper), 0 0 0 9px var(--glow-2); }
#table .card.droptarget .face { box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px var(--glow), 0 0 22px color-mix(in srgb, var(--glow) 80%, transparent); }
#app.dropok #table .card.dragging .face { box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px var(--up), 0 0 24px color-mix(in srgb, var(--up) 70%, transparent), var(--soft); }
/* 크게 보기: 손패 위에 뜨는 확대 카드와 설명(누르면 뒤의 판이 눌리도록 pointer-events 없음) */
#fly .card.preview { z-index: 1200; pointer-events: none; filter: drop-shadow(0 14px 22px rgb(8 3 24 / .55)); }
#fly .card.preview .face { box-shadow: 0 0 0 3px var(--ink), 0 4px 0 var(--ink); }
.pvlab {
  position: absolute; left: 50%; bottom: calc(100% + var(--sp-2)); translate: -50% 0; white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-m); background: var(--ink); color: var(--paper);
  font: 15px/1.2 var(--font-ko); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), var(--soft);
}
.pvlab b { font-weight: 400; color: var(--glow); }
.pvlab span { font-size: 12px; color: var(--muted); }
.pvlab em { font-size: 12px; font-style: normal; color: var(--up); }
@media (prefers-reduced-motion: reduce) { #table .card .face { transition: none; } }

/* ---------- 제목(글자마다 쾅) ---------- */
#titleWrap { top: 38%; }
#title .ch { position: relative; display: inline-block; transform-origin: 50% 88%; }
#title .ch b {
  position: relative; z-index: 1; font-weight: 400; font-family: 'Titan One', 'Jua', 'Malgun Gothic', sans-serif;
  background: linear-gradient(180deg, #FFFFFF 6%, var(--gold-1) 34%, var(--gold-2) 72%, var(--gold-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#title[data-tone="red"] .ch b { background-image: linear-gradient(180deg, #FFFFFF 6%, #FF9088 38%, #E8403C 74%, #A82230 100%); }
#title[data-tone="blue"] .ch b { background-image: linear-gradient(180deg, #FFFFFF 6%, #96BCFF 38%, #3B78F0 74%, #2149B0 100%); }
#title[data-tone="bad"] .ch b { background-image: linear-gradient(180deg, #FFFFFF 6%, var(--silver-2) 40%, var(--steel-2) 74%, var(--steel-3) 100%); }
#title[data-tone="go"] .ch b { background-image: linear-gradient(180deg, #FFFFFF 6%, var(--diamond) 40%, var(--diamond-dk) 80%, var(--steel-3) 100%); }
#title .ch::before {
  content: attr(data-c); position: absolute; left: 0; top: 0; z-index: 0; color: var(--ink); font-family: 'Titan One', 'Jua', 'Malgun Gothic', sans-serif;
  -webkit-text-stroke: .18em var(--ink); text-shadow: 0 .1em 0 var(--ink), 0 .2em .28em rgb(8 3 24 / .5);
}
#title .sp { width: .3em; }

/* ---------- 버튼 ---------- */
.btn {
  min-height: 52px; min-width: 112px; padding: var(--sp-2) var(--sp-5); border: 0; border-radius: var(--r-m); cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
  font: 22px/1 var(--font-ko); color: var(--ink);
  box-shadow: var(--bevel), var(--rim), var(--drop);
  transition: filter .15s ease;
}
.btn small { font-size: 12px; opacity: .8; }
.btn:hover { filter: brightness(1.08); }
.btn:active { translate: 0 2px; box-shadow: var(--bevel), var(--rim), 0 2px 0 var(--ink); }
.btn:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.btn:disabled { filter: grayscale(.6) brightness(.8); cursor: default; }
.btn.ghost { min-width: 72px; font-size: 16px; }
#decide { position: absolute; left: 0; top: 0; z-index: 11; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); opacity: 0; visibility: hidden; }
#decide .q { margin: 0; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font: 15px/1.2 var(--font-ko); }
#decide .row { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
#dummyBtn { position: absolute; left: 0; top: 0; z-index: 11; min-width: 96px; }
/* 바닥 짝 고르기 창: 후보를 크게 나란히 */
#decide .pickrow { gap: var(--sp-4); }
.pickc {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-3);
  border: 0; border-radius: var(--r-m); cursor: pointer; color: var(--paper); font: 16px/1 var(--font-ko);
  background: color-mix(in srgb, var(--ink) 78%, transparent); box-shadow: 0 0 0 3px var(--glow-2), var(--soft);
  touch-action: manipulation;
}
.pickc .card { position: relative; }
.pickc:active { translate: 0 2px; }
.pickc:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }

/* ---------- ▲ 팝업 ---------- */
.upPop {
  position: absolute; left: 0; top: 0; z-index: 25; pointer-events: none; white-space: nowrap;
  font: 17px/1 var(--font-display); -webkit-text-stroke: .16em var(--ink); paint-order: stroke fill;
}
.upPop.up { color: var(--up); }
.upPop.down { color: var(--down); }

/* ---------- 결산 · 시작 ---------- */
#settle, #start { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; padding: var(--sp-4); opacity: 0; visibility: hidden; background: rgb(6 20 13 / .45); }
#settle .panel, #start .panel {
  position: relative; width: min(380px, 100%); padding: var(--sp-5) var(--sp-5) var(--sp-4); border-radius: var(--r-l);
  display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3);
  box-shadow: var(--bevel), var(--rim), var(--drop), var(--soft); color: var(--ink);
}
#settle h2, #start h2 { margin: 0; text-align: center; font: 30px/1.1 var(--font-ko); }
#settle .sub, #start .sub { margin: 0; text-align: center; font: 15px/1.35 var(--font-ko); }
#settle .sub b { font-family: var(--font-display); font-weight: 400; }
#settle .rows, #settle .mults { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); background: var(--panel); box-shadow: var(--hollow), inset 0 0 0 2px var(--ink); display: grid; gap: var(--sp-1); }
#settle .rows:empty, #settle .mults:empty { display: none; }
#settle .rows li { display: flex; justify-content: space-between; font: 16px/1.3 var(--font-ko); color: var(--muted); }
#settle .rows li b { font: 17px/1.3 var(--font-display); font-weight: 400; color: var(--paper); font-variant-numeric: tabular-nums; }
#settle .mults { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); background: transparent; box-shadow: none; padding: 0; }
#settle .mults li { padding: var(--sp-1) var(--sp-2); border-radius: var(--r-s); text-align: center; background: var(--ink); color: var(--paper); font: 15px/1.1 var(--font-ko); box-shadow: 0 3px 0 var(--ink-2); }
#settle .mults li b { font: 17px/1 var(--font-display); font-weight: 400; color: var(--glow); }
#settle .final { display: flex; align-items: baseline; justify-content: center; gap: var(--sp-3); }
#settle .final:empty { display: none; }
#settle .final span { font: 16px/1 var(--font-ko); }
#settle .final b { font: 44px/1 var(--font-display); font-weight: 400; color: #FFFFFF; -webkit-text-stroke: .1em var(--ink); paint-order: stroke fill; text-shadow: 0 .06em 0 var(--ink); font-variant-numeric: tabular-nums; }
#settle .btn, #start .btn { align-self: center; min-width: 180px; }
#start .fine { margin: 0; text-align: center; font: 12px/1.3 var(--font-ko); }

/* ---------- 코인 · 지갑 · 온라인 메뉴 ---------- */
.cn {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; flex: none;
  background: radial-gradient(circle at 50% 50%, var(--ink) 0 18%, transparent 19%), radial-gradient(circle at 36% 32%, var(--gold-1) 0 22%, var(--gold-2) 23% 62%, var(--gold-3) 63%);
  box-shadow: 0 0 0 2px var(--ink);
}
.cn.big { width: 26px; height: 26px; box-shadow: 0 0 0 3px var(--ink); }
.chip.coins .stk { clip-path: none; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--ink) 0 18%, transparent 19%), radial-gradient(circle at 36% 32%, var(--gold-1) 0 22%, var(--gold-2) 23% 62%, var(--gold-3) 63%); box-shadow: 0 0 0 1.5px var(--ink); }
.chip.away { opacity: .6; }
.chip .tm { font: 13px/1 var(--font-display); font-style: normal; color: var(--ink); background: var(--paper); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); font-variant-numeric: tabular-nums; }
.chip .tm:empty { display: none; }
.chip .tm.hurry { background: var(--down); }

#start .panel.menu { width: min(400px, 100%); max-height: 100%; overflow-y: auto; }
#start .wallet { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-m); background: var(--panel); color: var(--paper); box-shadow: var(--hollow), inset 0 0 0 2px var(--ink); }
#start .wallet .sub { color: var(--muted); }
#start .wl { display: flex; align-items: center; gap: var(--sp-2); }
#start .wl b { font: 34px/1 var(--font-display); font-weight: 400; color: var(--glow); font-variant-numeric: tabular-nums; }
#start .wl span { font: 16px/1 var(--font-ko); color: var(--muted); }
#start .nick { min-height: 44px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--paper); font: 16px/1 var(--font-ko); cursor: pointer; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--paper) 22%, transparent); }
#start .nick:hover { background: color-mix(in srgb, var(--paper) 10%, transparent); }
#start .btn.refill { min-height: 44px; min-width: 160px; font-size: 17px; }
#start .modes { display: grid; gap: var(--sp-3); }
#start .modes .btn, #start .make .btn { align-self: stretch; }
#start .mode { display: grid; gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--r-m); background: color-mix(in srgb, var(--ink) 16%, transparent); }
.stakes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.stake {
  min-height: 52px; padding: var(--sp-1); border: 0; border-radius: var(--r-m); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
  background: var(--panel); color: var(--paper); box-shadow: var(--hollow), inset 0 0 0 2px var(--ink);
}
.stake b { font: 18px/1 var(--font-display); font-weight: 400; color: var(--paper); font-variant-numeric: tabular-nums; }
.stake small { font: 12px/1 var(--font-ko); color: var(--muted); }
.stake.on { background: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 3px var(--glow); }
.stake.on b { color: var(--glow); }
.stake:disabled { opacity: .45; cursor: default; }
.stake:focus-visible, #start .nick:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
#start .rooms { display: grid; gap: var(--sp-1); max-height: 216px; overflow-y: auto; padding: var(--sp-2); border-radius: var(--r-m); background: var(--panel); box-shadow: var(--hollow), inset 0 0 0 2px var(--ink); }
#start .rooms .fine { color: var(--muted); padding: var(--sp-3) 0; }
#start .room { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-s); color: var(--paper); background: color-mix(in srgb, var(--paper) 6%, transparent); }
#start .room .h { font: 16px/1.2 var(--font-ko); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#start .room .k { font: 14px/1 var(--font-ko); color: var(--glow); white-space: nowrap; }
.btn.sm, #start .btn.sm { min-height: 44px; min-width: 88px; padding: var(--sp-1) var(--sp-3); font-size: 15px; }
#start .make { display: grid; gap: var(--sp-2); }
#start .join { display: flex; gap: var(--sp-2); }
#start .join .btn { min-width: 112px; font-size: 18px; }
.codein {
  flex: 1; min-width: 0; height: 52px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-m);
  background: var(--paper); color: var(--ink); font: 22px/1 var(--font-ko); text-align: center; letter-spacing: .08em;
  box-shadow: var(--hollow), var(--rim); user-select: text; -webkit-user-select: text;
}
.codein::placeholder { color: var(--steel-3); font-size: 16px; letter-spacing: 0; }
.codein:focus-visible { outline: 3px solid var(--glow-2); outline-offset: 2px; }
.bigcode { padding: var(--sp-3); border-radius: var(--r-m); background: var(--ink); color: var(--glow); text-align: center; font: 44px/1 var(--font-display); letter-spacing: .16em; user-select: text; -webkit-user-select: text; }
.row2 { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
#settle .row2 .btn.ghost, #start .row2 .btn.ghost { min-width: 96px; }
#settle .row2 .btn:not(.ghost) { min-width: 160px; }
#start .linkline { user-select: text; -webkit-user-select: text; word-break: break-all; }
#start .btn.ghost { align-self: center; }
#settle .fine { margin: 0; text-align: center; font: 13px/1.3 var(--font-ko); }
#settle .coinline {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-1) var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); background: var(--ink); color: var(--paper); font: 16px/1 var(--font-ko);
}
#settle .coinline b { font: 30px/1 var(--font-display); font-weight: 400; font-variant-numeric: tabular-nums; }
#settle .coinline.up span { color: var(--up); }
#settle .coinline.down span { color: var(--down); }
#settle .coinline small { flex-basis: 100%; text-align: center; font: 12px/1.2 var(--font-ko); color: var(--muted); }
.toast {
  position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 64px); z-index: 30; translate: -50% 0;
  max-width: calc(100% - var(--sp-6)); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper); font: 15px/1.3 var(--font-ko); text-align: center;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--paper) 14%, transparent), var(--soft);
  pointer-events: none; opacity: 0; visibility: hidden;
}
.toast b { font-family: var(--font-display); font-weight: 400; color: var(--glow); }

/* 메뉴 화면에서는 판 점수 칩을 숨긴다(연습 누적 별과 코인이 섞여 보이지 않게) */
#app:is([data-state="title"], [data-state="menu"], [data-state="lobby"], [data-state="joining"]) .hud .chip,
#app:is([data-state="title"], [data-state="menu"], [data-state="lobby"], [data-state="joining"]) .hud .mid { visibility: hidden; }
/* 좁은 화면 코인 판: 칩을 두 줄(닉네임 / 점수·코인)로, 남은 시간은 칩 모서리 배지로, 가운데 정보는 두 줄로 */
.chip { position: relative; }
#app.narrow .hud { gap: var(--sp-1); padding-left: var(--sp-3); padding-right: var(--sp-3); }
#app.narrow .chip.coins { flex-wrap: wrap; row-gap: 0; min-width: 0; max-width: 40%; border-radius: var(--r-m); padding: var(--sp-1) var(--sp-2); }
#app.narrow .chip.coins .nm { flex-basis: 100%; font-size: 12px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
#app.narrow .chip.coins small { display: none; }
#app.narrow .chip.coins .tot { margin-left: 0; }
#app.narrow .chip.coins .tot b { font-size: 13px; }
#app.narrow .chip .tm { position: absolute; top: calc(var(--sp-2) * -1); right: calc(var(--sp-1) * -1); z-index: 1; box-shadow: 0 0 0 2px var(--ink); }
#app.narrow .hud .mid span { display: block; line-height: 1.3; font-size: 12px; }
#app.narrow .hud .mid i { display: none; }
.hud .mid i { font-style: normal; }
#start .fine.sep { padding-top: var(--sp-2); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 20%, transparent); }
#start .fine a { color: var(--ink); text-decoration: underline; }
.linkbtn { align-self: center; min-height: 44px; padding: 0 var(--sp-3); border: 0; background: transparent; color: var(--ink); font: 14px/1 var(--font-ko); text-decoration: underline; cursor: pointer; }
.linkbtn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* 독촉 단추(상대 칩 아래) · 자리 비움 띠 */
#nudgeBtn { position: absolute; left: 0; top: 0; z-index: 21; min-height: 44px; min-width: 72px; padding: 0 var(--sp-3); font-size: 16px; }
#afkBar {
  position: absolute; left: 50%; bottom: var(--sp-4); z-index: 31; translate: -50% 0; width: min(420px, calc(100% - var(--sp-6)));
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-3);
  border-radius: var(--r-m); background: var(--ink); color: var(--paper); font: 15px/1.35 var(--font-ko); text-align: center;
  box-shadow: inset 0 0 0 2px var(--glow), var(--soft);
}