/* One narrow column like the real scoresheet: colored category rows, a ring of 7 seats. */
:root{
  --bg:#eef1f4; --surface:#ffffff; --sunk:#e3e8ee; --line:#cfd7e0;
  --fg:#18212c; --muted:#5b6878; --accent:#1f4f8f; --accent-fg:#ffffff;
  --c-mil:#c0392b; --c-coin:#b8860b; --c-wonder:#7a6a58; --c-civ:#2563b0;
  --c-sci:#2e8b57; --c-com:#d4a106; --c-guild:#7d3c98; --c-city:#2b2f36; --c-leader:#a9b1bb; --c-extra:#6b7785;
  --good:#2e7d4f; --warn:#b26a00;
  --f-display:"Gowun Batang", "Noto Serif KR", Georgia, serif;
  --f-body:"IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --f-num:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#10151c; --surface:#18202a; --sunk:#0c1117; --line:#2b3644;
  --fg:#e6ebf1; --muted:#95a2b3; --accent:#7eaaf0; --accent-fg:#0d1520;
  --c-mil:#e5685b; --c-coin:#e0b33c; --c-wonder:#b8a58f; --c-civ:#6fa0e8;
  --c-sci:#5cc28a; --c-com:#ecc644; --c-guild:#b47ad0; --c-city:#0a0d11; --c-leader:#e8ecf1; --c-extra:#98a4b3;
  --good:#5cc28a; --warn:#e8a64a; color-scheme:dark;
}}
*{box-sizing:border-box}
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.55 var(--f-body)}
.wrap{max-width:760px;margin:0 auto;padding-inline:16px;padding-block:0 48px}
header.top{padding-block:22px 10px;display:grid;gap:4px}
h1{font:700 1.7rem/1.2 var(--f-display);margin:0;text-wrap:balance}
h2{font:700 1.2rem/1.3 var(--f-display);margin:0}
.lede{color:var(--muted);margin:0;font-size:.92rem}
.label{font-size:.75rem;letter-spacing:.06em;color:var(--muted);font-weight:600}
.note{font-size:.85rem;color:var(--muted);margin:0}
code{font-family:var(--f-num);font-size:.9em}
[hidden]{display:none!important}
.banner{padding:10px 12px;border-radius:10px;background:var(--sunk);color:var(--muted);font-size:.88rem;margin-bottom:12px}
.banner.warn{color:var(--warn)}
.panel{display:grid;gap:18px;padding-top:18px}
.block{display:grid;gap:10px}
.card{padding:16px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.row.between{justify-content:space-between;margin-top:12px}
.btn{font:600 .95rem var(--f-body);padding:11px 16px;border-radius:10px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-fg);cursor:pointer}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.danger{border-color:var(--c-mil);background:transparent;color:var(--c-mil)}
.btn:disabled{opacity:.5;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.roombar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:10px;padding-top:8px}
.code{font:600 2rem/1.1 var(--f-num);letter-spacing:.18em}
.sharelink{margin-top:8px;font-family:var(--f-num);font-size:.85rem}

nav.tabs{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);display:flex;gap:6px;padding-block:10px;margin-top:10px;border-bottom:1px solid var(--line)}
nav.tabs button{flex:1;font:600 .95rem var(--f-body);padding:10px 8px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer}
nav.tabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}

.ring{position:relative;width:min(100%,300px);aspect-ratio:1;margin:0 auto;max-width:100%}
.ring .table{position:absolute;inset:30%;border-radius:50%;background:var(--sunk);border:1px dashed var(--line);display:grid;place-items:center;text-align:center;font-size:.72rem;color:var(--muted);padding:6px}
.seat{position:absolute;width:74px;transform:translate(-50%,-50%);border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:6px 4px;cursor:pointer;display:grid;gap:1px;text-align:center;font:500 .72rem/1.25 var(--f-body)}
.seat b{font:600 1rem var(--f-num)}
.seat .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat.mine{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.seat.done::after{content:"완료";position:absolute;top:-8px;right:-6px;background:var(--good);color:var(--surface);font-size:.62rem;padding:1px 5px;border-radius:6px}

.who{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.who .full{grid-column:1/-1}
.f{display:grid;gap:4px;font-size:.8rem;color:var(--muted);font-weight:500}
input,select{font:500 1rem var(--f-body);color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:9px 10px;width:100%;min-width:0}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;width:max-content}
.seg button{border:0;background:var(--surface);color:var(--fg);padding:8px 16px;font:600 .95rem var(--f-body);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg)}

.sheet{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.srow{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:12px;padding:10px 12px 10px 0;border-top:1px solid var(--line)}
.srow:first-child{border-top:0}
.swatch{align-self:stretch;background:var(--sw);border-right:1px solid var(--line)}
.srow .t{min-width:0}
.srow .t strong{display:block;font-weight:600}
.srow .t span{font-size:.78rem;color:var(--muted)}
.stepper{display:flex;align-items:center;gap:4px}
.stepper button{width:36px;height:40px;border-radius:9px;border:1px solid var(--line);background:var(--sunk);color:var(--fg);font:600 1.1rem var(--f-num);cursor:pointer}
.stepper input{width:58px;text-align:center;font:600 1.1rem var(--f-num);font-variant-numeric:tabular-nums;padding:8px 2px}
.pts{font:600 .85rem var(--f-num);color:var(--muted);text-align:right}
.sub{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0 12px 12px 22px}
.sub.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.sub .f{text-align:center}
.sub input{text-align:center;font:600 1.05rem var(--f-num);padding:8px 2px}
.check{display:flex;gap:8px;align-items:center;padding:0 12px 12px 22px;font-size:.85rem;color:var(--muted)}
.check input{width:auto}
.total{display:flex;justify-content:space-between;align-items:baseline;padding:14px 16px;background:var(--sunk)}
.total .n{font:600 2rem var(--f-num);font-variant-numeric:tabular-nums}
.saved{font-size:.8rem;color:var(--muted)}

.winner{display:grid;gap:2px}
.winner .big{font:700 1.5rem/1.25 var(--f-display)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;min-width:760px}
th,td{padding:9px 8px;text-align:right;border-top:1px solid var(--line);font-size:.9rem;white-space:nowrap}
thead th{border-top:0;font-size:.72rem;color:var(--muted);font-weight:600;border-bottom:3px solid var(--th,transparent)}
td.name,th.name{text-align:left;position:sticky;left:0;background:var(--surface)}
td.num{font-family:var(--f-num)}
td.tot{font:600 1rem var(--f-num)}
.rank{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--sunk);font:600 .75rem var(--f-num);margin-right:6px}
tr.first .rank{background:var(--c-coin);color:var(--surface)}
.pill{display:inline-block;font-size:.66rem;padding:1px 6px;border-radius:6px;margin-left:6px;vertical-align:1px}
.pill.ok{background:var(--good);color:var(--surface)}
.pill.wait{border:1px solid var(--line);color:var(--muted)}
.bar{height:8px;border-radius:4px;background:var(--sunk);overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.confirm{display:grid;gap:8px;padding:12px;border:1px solid var(--c-mil);border-radius:12px}

.titlerow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px}
.authbar{display:flex;gap:10px;align-items:baseline;font-size:.85rem;color:var(--muted)}
.linkbtn{border:0;background:none;padding:0;color:var(--accent);font:600 .85rem var(--f-body);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.codeinput{flex:1;text-transform:uppercase;font-family:var(--f-num);letter-spacing:.2em}
#loginName{flex:2}
.pininput{flex:1;font-family:var(--f-num);letter-spacing:.2em}
.seat.taken{color:var(--muted)}
.seat.taken .nm{color:var(--fg)}
.srow.flat{border-top:0;padding-top:0}
.pos{color:var(--good)} .neg{color:var(--c-mil)}
table.narrow{min-width:0}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.tile{padding:12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:grid;gap:2px}
.tile .v{font:600 1.5rem var(--f-num);font-variant-numeric:tabular-nums}
.stats{display:grid;gap:18px}
@media (max-width:420px){.who{grid-template-columns:1fr}.sub{padding-left:12px}.check{padding-left:12px}}
@media (prefers-reduced-motion:no-preference){.bar i{transition:width .3s}}

/* 라운드 입력: 방장이 시대별로 열고 닫음 */
.roundbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;border-left:6px solid var(--line)}
.roundbar.open{border-left-color:var(--good)}
.roundbar .rtext{display:grid;gap:1px}
.roundbar strong{font:700 1.1rem/1.3 var(--f-display)}
.roundbar.open strong{color:var(--good)}
.roundbar .rhost{display:grid;gap:4px}
.roundbar .seg button{padding:7px 12px}
.lock{font-size:.8rem;font-weight:600;color:var(--muted)}
.lock.open{color:var(--good)}
.row.flat{margin-top:0}
.check.flat{padding:0}
fieldset.sheet{margin:0;padding:0;min-width:0}
fieldset.sheet:disabled .srow,fieldset.sheet:disabled .sub,fieldset.sheet:disabled .check{opacity:.55}
fieldset.sheet:disabled .stepper button{cursor:default}
.total .note{font-size:.8rem}
td .place{display:block;font:500 .66rem var(--f-body);color:var(--muted)}
td.muted{color:var(--muted)}

/* 콤보 */
.chains{display:grid;gap:8px}
.chains .label{margin-top:6px}
.chain{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:8px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.chain .arrow{font:600 1.1rem var(--f-num);color:var(--good)}
.chain .tos{display:grid;gap:6px}
.chip{display:grid;gap:0;padding:6px 8px 6px 10px;border-left:4px solid var(--cc,var(--line));border-radius:6px;background:var(--sunk);font-weight:600;font-size:.9rem;line-height:1.3}
.chip small{font:500 .7rem var(--f-body);color:var(--muted)}
.tradelist{display:grid;gap:8px}
.trade{display:grid;grid-template-columns:minmax(120px,38%) 1fr;align-items:center;gap:10px;padding:8px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:.88rem}
@media (max-width:420px){.trade{grid-template-columns:1fr}.roundbar{align-items:start}}

/* 게임 준비 */
.members{display:flex;flex-wrap:wrap;gap:6px}
.member{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;background:var(--sunk);font-size:.88rem}
.member.seated{box-shadow:inset 0 0 0 1px var(--good)}
.member .kick{border:0;background:none;color:var(--muted);font:600 1rem var(--f-body);cursor:pointer;padding:0 2px;line-height:1}
.draws{display:grid;gap:6px}
.draw{display:grid;grid-template-columns:28px minmax(0,.8fr) minmax(0,1.4fr);gap:8px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--sunk);font-size:.9rem}
.draw b{font:600 1rem var(--f-num)}
.draw small{display:block;font-size:.72rem;color:var(--muted)}
.draw.mine{box-shadow:inset 0 0 0 2px var(--accent)}