:root {
  --bg: #0e1116;
  --surface: #161b22;
  --surface-2: #1c222b;
  --border: #29313d;
  --text: #e6e8eb;
  --muted: #8d96a3;
  --accent: #f2a900;
  --accent-ink: #1a1300;
  --pin-warm-line: #ebd98a;
  --pin-mark: #f85149;
  --pin-team-size-ui: 20px;
  --ok: #3fb950;
  --route-main: #8fd99a;
  --route-alt: #ede08a;
  --guide-line: #8d96a3;
  --zoom-box: var(--guide-line);
  --plane-path: rgba(255, 255, 255, 0.55);
  --plane-arrow: #ffffff;
  --final-ring: #f778ba;
  --landing-spot: #56ccf2;
  --warn: #d29922;
  --danger: #f85149;
  --radius: 10px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.55 "Malgun Gothic", "Segoe UI", system-ui, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* header */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(14, 17, 22, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.logo img { height: 34px; display: block; }
.account { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--muted); }
.account img { width: 26px; height: 26px; border-radius: 50%; display: block; }

/* login and waiting pages */
.auth-box { max-width: 440px; margin: 60px auto; text-align: center; }
.auth-box .btn { justify-content: center; }

/* login page */
.login-page main { padding: 0; }
.login-hero {
  min-height: calc(100vh - 56px - 62px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(560px 360px at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(480px 320px at 100% 100%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%);
}
.login-card {
  width: 100%;
  max-width: 420px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 32px 32px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6);
}
.login-logo { height: 40px; margin-bottom: 14px; }
.login-desc { color: var(--muted); margin: 0 0 22px; font-size: 13px; white-space: nowrap; }
.login-features { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; text-align: left; }
.login-features li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); }
.login-features svg { flex: none; width: 18px; height: 18px; color: var(--accent); }
.login-note { color: var(--muted); font-size: 12px; margin: 16px 0 0; white-space: nowrap; }

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 16px;
  font: inherit;
  font-weight: 700;
  transition: box-shadow .15s, transform .1s;
}
.btn-google:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .35); text-decoration: none; }
.btn-google:active { transform: translateY(1px); }
.btn-google svg { width: 20px; height: 20px; flex: none; }

/* layout */
main { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 0 0 12px; }
.lead { color: var(--muted); margin: 0 0 22px; }
.grid { display: grid; gap: 14px; }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.stack > * + * { margin-top: 16px; }

/* Tabler card appearance; compact app layout in tabler-theme.css. */

/* stat tiles */
.stat .label { color: var(--muted); font-size: 13px; }
.stat .value { font-size: 28px; font-weight: 800; margin-top: 2px; }
.stat .value.sm { font-size: 20px; }
.stat .value small { font-size: 14px; color: var(--muted); font-weight: 600; }
.stat .sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
.stat.accent .value { color: var(--accent); }

/* table */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: 13px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.data-empty td { color: var(--muted); }
.bar { height: 6px; background: var(--surface-2); border-radius: 3px; min-width: 80px; }
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
/* group headers over "한국 대회" / "서바이버 경쟁전" columns, with a divider between the groups */
th.group { text-align: center; color: var(--text); font-size: 12px; padding-bottom: 6px; border-bottom-color: var(--border); }
.group-div { border-left: 1px solid var(--border); }

/* dashboard: consistent spacing between top-level blocks instead of inline margins */
.dashboard-page main > * + * { margin-top: 16px; }
#map-table-note { margin: 10px 0 0; }

/* notices */
.notice {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  background: var(--surface);
  padding: 12px 14px;
  border-radius: 8px;
}
.notice.danger { border-left-color: var(--danger); }
.notice.ok { border-left-color: var(--ok); }

/* forms */
.field { margin-bottom: 16px; }
.field > .field-label { display: block; font-weight: 700; margin-bottom: 6px; }
.field .hint { color: var(--muted); font-size: 12px; margin-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  cursor: pointer;
  user-select: none;
}
/* prediction phases: what choosing the phase gives, under its name (적중률 / ±16m / 확정) */
#phase-hint b { color: var(--text); }
/* one line whatever the phase (its length changes with the phase and moved the maps below): cut with …, full on hover */
#phase-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip input:disabled + span { opacity: .4; cursor: not-allowed; }
/* Inputs and selects use Tabler form-control/form-select. */
.form-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.profile-card { max-width: 560px; margin-top: 16px; }
.profile-card label { display: block; margin-bottom: 8px; font-weight: 600; }
.profile-card input[type=text] {
  flex: 1 1 180px;
  min-width: 0;
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.profile-card input[type=text]::placeholder { color: var(--muted); }
.profile-card input[type=text]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.profile-card .btn { min-height: 42px; padding-inline: 20px; }
.profile-card #nickname-help { margin-bottom: 0; }

/* Tabler buttons; the .primary modifier is bridged in tabler-theme.css. */

/* log */
.log {
  background: #0a0d11;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  height: 360px;
  overflow: auto;
  font: 12px/1.5 Consolas, "D2Coding", monospace;
  color: #c9d1d9;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
}
.badge.running { color: var(--accent); border-color: var(--accent); }
.badge.ok { color: var(--ok); border-color: var(--ok); }
.badge.danger { color: var(--danger); border-color: var(--danger); }

/* wide screens: the usage card goes beside the member table instead of stretching its meters across the page */
@media (min-width: 1700px) {
  main.users-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 20px; align-items: start; grid-auto-flow: dense; }
  main.users-layout > * { grid-column: 1 / -1; }
  main.users-layout > .users-summary, main.users-layout > .users-summary ~ * { grid-column: 1; }
  main.users-layout > .usage-card { grid-column: 2; grid-row: span 30; margin: 0; }
  main.users-layout > .notice { margin-bottom: 16px; }
}

/* steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.step { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface-2); }
.step .n { color: var(--muted); font-size: 12px; font-weight: 700; }
.step.current { border-color: var(--accent); }
.step.current .n { color: var(--accent); }
.step.done .n { color: var(--ok); }

/* gallery */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.thumb {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}
.thumb:hover { border-color: var(--accent); }
.thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #000; }
.thumb .meta { padding: 10px 12px; }
.thumb .title { font-weight: 700; }
.thumb .desc { color: var(--muted); font-size: 12px; }

summary { cursor: pointer; }
.survivor-list { columns: 3 220px; margin: 0; padding-left: 2.2em; }
.survivor-list li { padding: 3px 0; break-inside: avoid; }

/* zone page: use the whole browser width, maps as large as the window height allows */
main.wide { max-width: 2400px; padding-inline: 24px; }
.wide-page .topbar-inner { max-width: 2400px; padding-inline: 24px; }
.zone-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.zone-head h1 { margin: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-bottom: 16px; }
.filters .field { margin: 0; }
/* prediction settings: data · map · phase always on one row (smaller chips; a narrow window scrolls the row
   sideways instead of wrapping), the phase hint on its own line below */
/* label + select per field, all on one row (chips for 3 + 7 + 8 choices filled the width) */
.predict-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.predict-filters .field-row { display: flex; align-items: center; gap: 8px; }
.predict-filters .field-row > .field-label { margin-bottom: 0; white-space: nowrap; }
.predict-filters select { max-width: 100%; }  /* the phase options carry hit rate + error: no cap, or it clips */
.predict-filters #phase-hint { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 12px; }
.predict-filters #phase-hint:empty { display: none; }
/* data source fields (_source_fields.html): their rows join the surrounding filter layout; hidden = kakao-only field
   while the platform is 대회 */
.source-fields { display: contents; }
.source-fields .field[hidden] { display: none !important; }
.wide .canvas-box { width: 100%; max-width: none; margin-inline: 0; box-sizing: border-box; }

/* final zone prediction: one square map that fits the first screen with the filters above it, the recommendations and
   results in the column right of it; the map stays in view while that column scrolls. Narrow screens stack them */
.predict-grid {
  display: grid;
  grid-template-columns: minmax(0, max(480px, calc(100vh - 140px))) minmax(360px, 1fr);  /* map fills the screen under the top bar once the filters scroll away */
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.predict-grid .card { min-width: 0; }
.predict-map { position: sticky; top: 68px; }
.predict-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.predict-side #landing-card { margin-bottom: 0; }
.predict-side .result-grid { grid-template-columns: 1fr; }
@media (max-width: 1100px) {
  .predict-grid { grid-template-columns: 1fr; }
  .predict-map { position: static; }
}
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.panel-head h2 { margin: 0; }
/* fold every box over a map at once (zone.html, predict.js renderUiFolds) */
.ui-fold { align-self: center; margin-left: auto; padding: 3px 10px; font-size: 12px; color: var(--muted); }
.ui-fold:hover { color: var(--text); }
.ui-fold[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.hint-item { white-space: nowrap; }
.hint-key { color: var(--accent); font-weight: 700; }
.canvas-box { position: relative; width: 100%; aspect-ratio: 1; background: #000; border-radius: 8px; overflow: hidden; }
/* map buttons (app.js mapControls): bottom right corner, the zone maps keep their scale bar under them */
.map-ctrl { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; z-index: 3; }
.detail-box .map-ctrl { bottom: 40px; }
.map-ctrl-btn { min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(14, 17, 22, .78); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.map-ctrl-btn:hover { background: rgba(40, 46, 56, .92); }
.map-ctrl-btn.on { color: var(--accent); border-color: var(--accent); }
.map-ctrl-btn.map-ctrl-text { font-size: 13px; font-weight: 600; white-space: nowrap; }
.map-ctrl-btn[hidden] { display: none; }
.canvas-box canvas { display: block; touch-action: none; }
#overview { cursor: crosshair; touch-action: none; }
.detail-box { position: relative; }
.tip {
  position: absolute;
  pointer-events: none;
  background: rgba(14, 17, 22, .94);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
}
.view-bar { display: grid; gap: 10px; margin-top: 12px; }
.legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.legend-bar { width: 140px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #f0463c, rgba(128,128,128,.25), #3fc85a); }
/* one square map: the page title, card title, map and tool bar fit in one screen (a full-width square overflowed it);
   the search conditions sit in the left side column (#heatmap-side) */
.heatmap-grid { display: grid; grid-template-columns: minmax(0, max(480px, calc(100vh - 240px))) minmax(300px, 380px); justify-content: start; gap: 16px; align-items: start; }
@media (max-width: 900px) { .heatmap-grid { grid-template-columns: 1fr; } }
.legend-bar.heat { background: linear-gradient(90deg, #285aff, #00dcff, #ffe600, #ff2828); }
input[type=range] { accent-color: var(--accent); width: 160px; }
#map { cursor: grab; }
#map:active { cursor: grabbing; }
/* results: route, then the zone statistics (one column beside the map, .predict-side) */
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .result-grid { grid-template-columns: 1fr; } }
/* map tools: one group per tool, colored like what the tool draws on the map */
.inline-pin { display: inline-flex; align-items: center; gap: 0.4em; vertical-align: middle; font: inherit; }
.pin-team-tag {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--pin-mark);
  line-height: 0;
}
.pin-team-tag svg {
  display: block;
  width: var(--pin-team-size-ui);
  height: var(--pin-team-size-ui);
}
/* phase slider: vertical, on the overview's right edge (predict.js renderPhaseSlider), 1 at the bottom → 8 on top */
.phase-slider {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  height: min(46%, 260px);
  width: 44px;
  padding: 12px 0;
  box-sizing: content-box;
  background: rgba(14, 17, 22, .6);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.phase-slider .ps-rail { position: relative; height: 100%; width: 100%; }
.phase-slider .ps-track, .phase-slider .ps-fill {
  position: absolute;
  left: 50%;
  width: 6px;
  margin-left: -3px;
  bottom: 0;
  border-radius: 3px;
}
.phase-slider .ps-track { top: 0; background: rgba(255, 255, 255, .14); }
/* cold to hot over the whole rail (app.js PHASE_HEAT, the same stops), shown up to the current phase: the colour at a
   phase stays the same whichever phase is current */
.phase-slider .ps-fill { top: 0; background: linear-gradient(to top, #3d7bff 0%, #2fc3e6 25%, #e8d75a 50%, #fb8c35 75%, #ea3443 100%);
  clip-path: inset(calc(100% - var(--fill, 0%)) 0 0 0 round 3px); transition: clip-path .15s; }
.phase-slider .ps-stop {
  position: absolute;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: 0 0 -6px -6px;
  border-radius: 50%;
  /* a phase not reached yet: a hollow ring, so it stands out from the grey rail (user 2026-10-04: the 8 above a
     current 7 melted into the rail) */
  background: #0e1116;
  box-shadow: inset 0 0 0 2px #6e7681;
  transition: background .15s, width .15s, height .15s, margin .15s;
}
.phase-slider .ps-stop.on { background: var(--c, #c02cb0); box-shadow: none; }
/* the current dot grows by its size, not a transform, so its number keeps the same size and column as the others */
.phase-slider .ps-stop.current { width: 18px; height: 18px; margin: 0 0 -9px -9px; background: var(--c, #b025d8); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.phase-slider .ps-stop.off { opacity: .35; }
/* numbers: one right-aligned column, 16px left of every dot's center (about 5px clear of the current dot's ring) */
.phase-slider .ps-stop b {
  position: absolute;
  right: calc(50% + 16px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #8b949e;
}
.phase-slider .ps-stop.current b { color: #fff; }
.phase-slider .ps-stop.on b { color: #d0d7de; }
.phase-slider:hover, .phase-slider.dragging { background: rgba(14, 17, 22, .78); }

/* map legends: floating box in the top-left corner of each map, only for what is drawn right now */
.map-legend {
  position: absolute;
  top: 10px;
  left: 10px;
  display: grid;
  gap: 5px;
  padding: 8px 10px;
  background: rgba(14, 17, 22, .78);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.25;
  color: #d0d7de;
  pointer-events: none;  /* the map under it stays clickable */
  max-width: calc(100% - 20px);
}
/* fold arrow at the right end: down when closed, up when open */
.fold-section > summary { list-style: none; }
.fold-section > summary::-webkit-details-marker { display: none; }
/* 낙하 추천 · 이동 경로: the title line folds the section (same arrow as the guides above the maps) */
.fold-section > summary { cursor: pointer; display: flex; align-items: baseline; gap: 8px 14px; flex-wrap: wrap;
  position: relative; padding-right: 30px; }
/* the arrow stays at the right end of the title line even when the text next to the title wraps */
.fold-section > summary::after { position: absolute; right: 6px; top: 7px; margin: 0; }
.fold-section:not([open]) > summary { margin-bottom: 0 !important; }
.fold-section > summary::after {
  content: ""; margin-left: auto; align-self: center; flex: none;
  width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-2px) rotate(45deg); transition: transform .15s, border-color .15s;
}
.fold-section[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.fold-section > summary:hover::after { border-color: var(--text); }

.para-tag {
  flex: none; display: inline-block; min-width: 2.6em; padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 700; text-align: center; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--muted);
}
.para-tag--accent {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

/* 판단 기준과 근거 (정보 page, #criteria): groups and rows; the evidence of a row folds (.crit-note) */
.criteria { margin-top: 24px; }
.criteria summary { cursor: pointer; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.criteria .crit-group { margin-top: 22px; padding-top: 14px; border-top: 2px solid var(--border); }
.criteria h3 { font-size: 16px; margin: 0 0 8px; color: var(--accent); }
.criteria h4 { font-size: 13px; margin: 14px 0 6px; color: var(--muted); }
/* long values and notes wrap inside their cell (the global th/td rule keeps table cells on one line);
   fixed layout so a long cell cannot widen the table past the page. Korean words are not split mid-word */
.crit-badge { font-size: 11px; padding: 1px 7px; border-radius: 10px; white-space: nowrap; border: 1px solid; }
.crit-badge.official { color: #0e1116; background: var(--ok); border-color: var(--ok); }
.crit-badge.verified { color: var(--ok); border-color: var(--ok); }
.crit-badge.chosen { color: var(--warn); border-color: var(--warn); }
.crit-badge.definition { color: var(--muted); border-color: var(--border); }

/* page with a left column: header on top, [side | content], footer at the bottom */
.page-body { display: flex; align-items: stretch; min-height: calc(100vh - 56px - 62px); }
.page-body > main { flex: 1; min-width: 0; }
.side-panel { flex: none; width: 320px; background: var(--surface); border-right: 1px solid var(--border); transition: width .15s; }
.side-panel[hidden] { display: none; }
/* Stack the marker panel above the map when it would leave no room for the main column. */
@media (max-width: 700px) {
  .page-body { flex-direction: column; }
  .side-panel, .side-panel.collapsed { width: 100%; border-right: 0; border-bottom: 1px solid var(--border); }
  .predict-filters .field-row { max-width: 100%; }
  .predict-filters .field-row select { min-width: 0; }
}
.side-inner { position: sticky; top: 56px; max-height: calc(100vh - 56px); overflow-y: auto; padding: 20px 18px 28px; }
.side-panel .ms-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side-panel .ms-title { font-size: 17px; white-space: nowrap; }
.side-panel .ms-toggle { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--muted); width: 32px; height: 32px; cursor: pointer; flex: none; font-size: 13px; }
.side-panel .ms-toggle:hover { color: var(--text); border-color: var(--muted); }
.side-panel.collapsed { width: 60px; }
.side-panel.collapsed .side-inner { padding-inline: 13px; }
.side-panel.collapsed .ms-title, .side-panel.collapsed .ms-body { display: none; }
.side-panel .mm-acts { display: flex; gap: 6px; margin: 16px 0 6px; }
.side-panel .mm-acts button { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 13px; padding: 6px 0; cursor: pointer; }
.side-panel .mm-acts button:hover { border-color: var(--accent); color: var(--accent); }
.side-panel .mm-group { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .02em;
  margin: 18px 0 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.side-panel .mm-list label { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; font-size: 14px;
  border-radius: 8px; cursor: pointer; width: 100%; box-sizing: border-box; }
.side-panel .mm-list label:hover { background: var(--surface-2); }
.side-panel .mm-list label input { margin: 0; width: 16px; height: 16px; accent-color: var(--accent); }
.side-panel .mm-name {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1.35;
}
.side-panel .mm-title { font-weight: 700; line-height: 1.3; }
.side-panel .mm-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; max-width: 100%; }
.side-panel .mm-tag { font-weight: 400; font-size: 11px; color: var(--muted); white-space: nowrap; }
.side-panel .mm-list label canvas { flex: none; }
#overview-tip { max-width: 300px; }
.side-panel .mm-count { white-space: nowrap; flex: none; }
.side-panel .mm-count { margin-left: auto; color: var(--muted); font-size: 12px; }
.side-panel .side-filters { margin-top: 16px; }
.side-panel .side-filters .field { margin-bottom: 20px; }
/* label and select on one line: the 320px column has no room for a row of chips */
.side-panel .side-filters .field-row { display: flex; align-items: center; gap: 10px; }
.side-panel .side-filters .field-row > .field-label { flex: none; width: 64px; margin-bottom: 0; white-space: nowrap; }
.side-panel .side-filters .field-row select { flex: 1; min-width: 0; }
.side-panel .side-filters .mm-note { margin-top: 4px; }
.side-panel .side-filters .hint, .side-panel .side-filters .mm-note { word-break: keep-all; }
.side-panel .mm-note { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 18px 0 0; }
.map-legend .lg-group {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 8px 0 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.map-legend .lg-toggle + .lg-group { margin-top: 0; padding-top: 0; border-top: none; }
/* fold button in the top-right corner: the only clickable part of the legend (the legend itself lets clicks
   through to the map). Same chevron as the fold sections above the maps: up = open (click to fold), down = folded */
.map-legend { padding-right: 38px; }
.map-legend .lg-toggle {
  pointer-events: auto;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 6px;
  cursor: pointer;
}
.map-legend .lg-toggle::after {
  content: ""; width: 7px; height: 7px;
  border-right: 2px solid #d0d7de; border-bottom: 2px solid #d0d7de;
  transform: translateY(2px) rotate(-135deg); transition: transform .15s;
}
.map-legend.collapsed .lg-toggle::after { transform: translateY(-2px) rotate(45deg); }
.map-legend .lg-toggle:hover { background: rgba(255, 255, 255, .14); border-color: var(--accent); }
.map-legend .lg-toggle:hover::after { border-color: var(--accent); }
.map-legend.collapsed { padding: 0; width: 36px; height: 36px; }
.map-legend.collapsed > :not(.lg-toggle) { display: none; }
/* the left column, the right one's mirror: the tool box centered on the left edge (above the view choices box) */
.map-left {
  position: absolute; top: 10px; left: 10px; bottom: 86px; max-width: min(62%, 470px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  pointer-events: none;
}
/* the tool box: the phase slider's box and pills, one per tool in its map color (--tool), ✕ on the corner clears */
.map-toolbar { pointer-events: auto; flex: none; margin-block: auto; width: 65px; box-sizing: border-box; padding: 12px 0;
  display: grid; justify-items: center; gap: 12px; background: rgba(14, 17, 22, .6); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px; }
.tb-tool { --tool: #d0d7de; position: relative; }
.tb-tool.pin { --tool: var(--pin-mark); }
.tb-tool.plane { --tool: var(--plane-arrow); }
.tb-tool.mortar { --tool: #ffa657; }  /* predict.js MORTAR_COLOR */
.tb-tool.mapgrid { --tool: #c9d1d9; }  /* not "grid": the page layout class .grid */
.tb-tool.contour { --tool: #ffe8a0; }  /* app.js drawMapContours: the 50 m lines' colour */
.tb-tool.screen { --tool: #7ee0c3; }
.tb-tool.screen .tb-btn:disabled { cursor: progress; }
/* reading: filled from the bottom as it goes (--p), white text over it, a spinning ring instead of the icon */
.tb-tool.screen.busy .tb-btn { border-color: var(--tool); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
  background: linear-gradient(to top, color-mix(in srgb, var(--tool) 75%, transparent) var(--p, 0%), rgba(126, 224, 195, .12) var(--p, 0%));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tool) 35%, transparent); }
.ss-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: ss-spin .8s linear infinite; }
@keyframes ss-spin { to { transform: rotate(360deg); } }
/* the game window is shared: a green dot on the button's corner */
.tb-tool.screen.live::before { content: ""; position: absolute; top: -3px; left: -3px; width: 9px; height: 9px; z-index: 1;
  border-radius: 50%; background: #3fb950; border: 1.5px solid #0e1116; }
/* what «인게임» found (predict.js readScreen): beside the tool box, over the map, the found map part with the route */
.screen-status { position: absolute; left: calc(100% + 16px); top: -10px; width: 200px; box-sizing: border-box; z-index: 3;
  display: grid; gap: 6px; padding: 8px 10px; font-size: 12px; line-height: 1.35; color: #d0d7de;
  background: rgba(14, 17, 22, .88); border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; }
.screen-status[hidden] { display: none; }
/* the box lets the mouse through to the map (its hover is what F, S and E use), only its buttons take clicks */
.screen-status { pointer-events: none; }
.screen-status button { pointer-events: auto; }
.screen-status canvas { width: 100%; height: auto; border-radius: 4px; }
.screen-status .ss-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.screen-status button { font: inherit; font-size: 11px; padding: 2px 8px; color: #d0d7de; cursor: pointer;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px; }
.tb-btn { width: 48px; height: 46px; box-sizing: border-box; display: grid; place-items: center; align-content: center;
  gap: 3px; padding: 0; font: inherit; font-size: 9.5px; font-weight: 600; line-height: 1; cursor: pointer; color: var(--tool, #d0d7de);
  border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid color-mix(in srgb, var(--tool, #fff) 40%, transparent);
  transition: background .15s, color .15s; }
.tb-btn:hover { border-color: var(--tool); background: color-mix(in srgb, var(--tool) 14%, transparent); }
/* something drawn (pin, plane route): the button stays as it is, the ✕ on its corner says so; a filled look read as
   «still drawing» on the white plane button (user 2026-10-05 «비행기 경로그리기가 활성화 되어있는거 아님») */
.tb-tool.set .tb-btn { border-color: color-mix(in srgb, var(--tool) 40%, transparent); }
.tb-tool.active .tb-btn { border-color: var(--tool); background: var(--tool); color: #0e1116; }
.tb-icon { display: grid; place-items: center; height: 18px; font-size: 16px; line-height: 1; }
.tb-clear { position: absolute; top: -6px; right: -7px; width: 18px; height: 18px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; font: inherit; font-size: 10px; font-weight: 800; line-height: 1; cursor: pointer; color: #0e1116;
  background: var(--tool); border: 1px solid rgba(0, 0, 0, .45); }
.tb-clear[hidden] { display: none; }
.tb-clear:hover { filter: brightness(1.15); }
.tb-sep { width: 32px; height: 1px; background: rgba(255, 255, 255, .1); }
.tb-reset { --tool: #8b949e; color: #8b949e; border-color: rgba(255, 255, 255, .16); }
.tb-reset:hover { color: var(--text); border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); }
.tb-sep.vertical { width: 1px; height: 32px; }
/* the circle's view choices (zone.html #zone-views): bottom left corner once a circle is placed, the tool box's pills in
   a row; the chosen view is filled with the accent, 히트 엔딩 (on / off) only tinted so it reads as a switch */
.map-viewbar { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: rgba(14, 17, 22, .6); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; }
.map-viewbar[hidden] { display: none; }
.vb-group { display: flex; gap: 6px; }
.vb-pill { position: relative; width: 58px; height: 46px; box-sizing: border-box; display: grid; place-items: center; align-content: center;
  gap: 3px; font-size: 9.5px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; color: #d0d7de; user-select: none;
  border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); transition: background .15s, color .15s; }
.vb-pill input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.vb-pill:hover { border-color: var(--accent); color: var(--accent); }
.vb-pill:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.vb-pill:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.vb-toggle:has(input:checked) { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
/* how-to box: same look as the legend, in the top right corner, one control per line */
.map-legend.map-hint { left: auto; right: 10px; max-width: min(46%, 320px); }
/* the overview's right column: the phase slider centered on the right edge (above the scale bar) */
.map-right {
  position: absolute; top: 10px; right: 10px; bottom: 84px; width: min(46%, 320px);  /* map buttons + scale bar under it */
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: none;
}
.map-right > .phase-slider {
  position: relative; top: auto; right: auto; transform: none; pointer-events: auto;
  height: auto; flex: 0 1 560px; min-height: 460px; margin-block: auto;  /* the replay's box (.replay-box .playing) + 자동 · 배속 · 포커스 */
  display: flex; flex-direction: column; width: 65px; padding: 16px 0 10px; border-radius: 10px; cursor: default;
}
/* the numbers sit left of the dots: the rail moves right by about their width so dots + numbers are centered */
.map-right > .phase-slider .ps-rail { flex: 1 1 auto; height: auto; width: auto; margin-left: 12px; min-height: 150px; cursor: pointer; }
/* 자동 (predict.js autoTick), the slider's foot: the clock (time left, 경고 / 수축) over the ▶ / ❚❚ button, and on the
   rail the phase from the current stop to the next (faint = warning yellow / shrink red, bright = time gone) */
.phase-slider .ps-foot { flex: none; display: grid; justify-items: center; gap: 12px; margin: 14px 8px 0; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .1); }  /* the same foot in both boxes: clock, damage (+ 자동 · 배속 on the overview) */
.phase-slider .ps-auto { width: 44px; height: 36px; box-sizing: border-box; display: grid; place-content: center; gap: 2px;
  padding: 0; font: inherit; line-height: 1; cursor: pointer; color: #d0d7de; border-radius: 17px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); transition: background .15s, color .15s; }
.phase-slider .ps-auto-icon { font-size: 11px; }
.phase-slider .ps-auto span:last-child { font-size: 9px; }
.phase-slider .ps-auto:hover { border-color: var(--accent); color: var(--accent); }
.phase-slider .ps-auto.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.phase-slider .ps-speed { width: 44px; height: 22px; box-sizing: border-box; padding: 0; font: inherit; font-size: 11px;
  font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; cursor: pointer; color: #8b949e; border-radius: 11px;
  background: none; border: 1px solid rgba(255, 255, 255, .14); }
.phase-slider .ps-speed:hover { border-color: var(--accent); color: var(--accent); }
.phase-slider .ps-speed.fast { color: var(--accent); border-color: var(--accent); }
/* 자기장 포커스 (zoomToZone): the same pill as 자동, icon over its name; faint until a circle is placed */
.phase-slider .ps-focus { width: 44px; height: 38px; box-sizing: border-box; display: grid; place-items: center; align-content: center;
  gap: 2px; padding: 0; font: inherit; font-size: 9px; line-height: 1; cursor: pointer; color: #d0d7de; border-radius: 17px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); }
.phase-slider .ps-focus:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.phase-slider .ps-focus:disabled { opacity: .35; cursor: default; }
/* the current phase's clock on the rail: the colours of its two stops (app.js phaseRailColors), and over the shrink
   part (above --split, the warning below it) moving diagonal stripes, a warning tape, so it still reads as «수축»
   without painting a cool phase red (user 2026-10-04) */
.phase-slider .ps-seg, .phase-slider .ps-progress { position: absolute; left: 50%; width: 8px; margin-left: -4px; border-radius: 4px;
  background: linear-gradient(to top, var(--c0, var(--warn)), var(--c1, var(--danger))); }
.phase-slider .ps-seg::after, .phase-slider .ps-progress::after { content: ""; position: absolute; left: 0; right: 0; top: 0;
  bottom: var(--split, 50%); border-radius: inherit;
  background: linear-gradient(-45deg, rgba(14, 17, 22, .6) 25%, transparent 25% 50%, rgba(14, 17, 22, .6) 50% 75%, transparent 75%) 0 0 / 8px 8px;
  animation: ps-stripes .7s linear infinite; }
@keyframes ps-stripes { to { background-position: 0 -8px; } }
.phase-slider .ps-seg { opacity: .35; }
.phase-slider .ps-progress { box-shadow: 0 0 8px var(--c1, rgba(248, 81, 73, .55)); }
.phase-slider .ps-stop.target { background: #0e1116; box-shadow: 0 0 0 2px var(--c, var(--danger)); }  /* where the rail is heading */
@media (prefers-reduced-motion: reduce) { .phase-slider .ps-seg::after, .phase-slider .ps-progress::after { animation: none; } }
.phase-slider .ps-seg[hidden], .phase-slider .ps-progress[hidden], .phase-slider .ps-clock[hidden] { display: none; }
.phase-slider.running .ps-stop.current { animation: ps-pulse 1.6s ease-in-out infinite; }
@keyframes ps-pulse { 50% { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 0 6px color-mix(in srgb, var(--c, #b025d8) 40%, transparent); } }
.phase-slider .ps-clock { display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; background: none;
  font: inherit; line-height: 1; color: #d0d7de; cursor: pointer; white-space: nowrap; }
.phase-slider .ps-clock b { font-size: 15px; font-variant-numeric: tabular-nums; }
.phase-slider .ps-clock small { font-size: 9px; color: #8b949e; }
.phase-slider .ps-clock.warn b, .phase-slider .ps-clock.warn small { color: var(--warn); }
.phase-slider .ps-clock.shrink b, .phase-slider .ps-clock.shrink small { color: var(--danger); }
.phase-slider .ps-clock.done b { color: #8b949e; }
.phase-slider .ps-clock.idle { cursor: default; opacity: .55; }
/* 경기 재생: the replay's slider follows the playback (player.js renderPlaySlider) - the rail fills from the phase's
   circle to the next as the zone warns (yellow) and shrinks (red), and the foot shows the time left and the blue
   zone's damage per second in this phase */
.replay-box .phase-slider.playing { display: flex; flex-direction: column; height: min(80%, 460px); width: 65px;
  padding: 16px 0 10px; border-radius: 10px; cursor: default; }  /* top: the top dot sticks out half above the rail */
/* margin-left 12px centers numbers + dots on the box, the same center as the clock and damage below: numbers span 23 →
   16px left of the dot's center, the current dot with its ring 11px right of it → the dot's center 6px right of the middle */
.replay-box .phase-slider.playing .ps-rail { flex: 1 1 auto; height: auto; width: auto; margin-left: 12px; min-height: 60px; cursor: pointer; }
.replay-box .phase-slider.playing .ps-foot { gap: 7px; margin: 9px 8px 0; padding-top: 8px; }
.phase-slider .pb-zone[hidden] { display: none; }
.phase-slider .pb-zone .ps-clock { cursor: default; }
.phase-slider .ps-clock.wait b, .phase-slider .ps-clock.wait small { color: #8b949e; }
.phase-slider .ps-dps { display: grid; justify-items: center; gap: 3px; line-height: 1; white-space: nowrap; }
.phase-slider .ps-dps b { font-size: 14px; color: #ff7b72; font-variant-numeric: tabular-nums; }
.phase-slider .ps-dps small { font-size: 9px; color: #8b949e; }
.map-hint .hint-item { display: block; white-space: normal; line-height: 1.45; }
.map-hint .lg-group:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.map-legend .lg {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  font-size: 12px;
  font-weight: 400;
  line-height: 22px;
}
.map-legend .lg-icon {
  flex: none;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-legend .lg-icon svg, .map-legend .lg-icon canvas { display: block; width: 22px; height: 22px; flex: none; }
.map-legend .lg-text { flex: 1; min-width: 0; line-height: 22px; white-space: nowrap; }
.map-legend .lg { white-space: nowrap; }
#overview-tip .tip-tag { white-space: nowrap; display: inline-block; margin-right: 4px; }
.map-legend .gradient { width: 22px; height: 8px; border-radius: 4px; flex: none;
  background: linear-gradient(90deg, #f0463c, rgba(128,128,128,.4), #3fc85a); }
.map-legend .gradient.phase1-gradient { height: 12px; border-radius: 4px; border: 1px solid rgba(255,255,255,.6);
  background: rgba(225,232,255,.3); }
#landing-card { margin-bottom: 16px; }
.landing-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 12px; }
.landing-head-title { font-size: 16px; }
.landing-head-hint { font-size: 12.5px; line-height: 1.4; }
.landing-more { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.landing-more summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); list-style: none; }
.landing-more summary::-webkit-details-marker { display: none; }
.landing-more-body p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; }
.landing-more-body p:last-child { margin-bottom: 0; }
.landing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.landing-cards .route-card { text-align: left; align-items: stretch; }
.landing-spot-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.landing-spot-head .rank {
  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--landing-spot); color: #0e1116; font-size: 13px; font-weight: 800;
}
.landing-spot-head .landing-spot-kpi { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--ok); }
.landing-reasons {
  margin: 0 0 10px; padding-left: 1.15em; font-size: 13px; line-height: 1.55; color: var(--text);
}
.landing-reasons li + li { margin-top: 4px; }
/* 문장 덩어리·괄호 덩어리는 각각 한 줄, 폭이 모자라면 둘 사이에서만 줄바꿈 */
.landing-reason-one { white-space: nowrap; }
.landing-reasons b { font-weight: 700; }
.landing-em { color: var(--ok); font-weight: 600; white-space: nowrap; }
.landing-warn-inline { color: var(--warn); font-weight: 600; white-space: nowrap; }
.landing-vehicles { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 2px; }
.landing-vehicles-title { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.landing-warn { margin-top: 6px; font-size: 12px; color: var(--warn); }
.landing-cards .route-title .rank {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--landing-spot); color: #0e1116; font-size: 13px;
}
.result-column { min-width: 0; }
.zone-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.fold-section[open] > summary { margin-bottom: 10px; }
.result-note { margin: 14px 0 0; line-height: 1.7; }
.result-how { margin-top: 12px; font-size: 13px; }
.result-how > summary { cursor: pointer; width: fit-content; }
.result-how ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.6; }
.landing-cards .vehicle-line {
  display: flex; align-items: flex-start; gap: 8px; max-width: 100%; min-width: 0;
}
.landing-cards .vehicle-line + .vehicle-line { margin-top: 8px; }
.landing-cards .vehicle-line-badge { flex: none; width: 22px; height: 22px; display: block; margin-top: 1px; }
.landing-cards .vehicle-line-body { flex: 1; min-width: 0; line-height: 1.45; overflow: hidden; }
.landing-cards .vehicle-line-main {
  display: block; white-space: normal; overflow-wrap: break-word; word-break: keep-all;
}
#vehicle-info-guide[open] > :not(summary) { padding-top: 6px; }
.landing-cards .vehicle-line b { font-weight: 800; white-space: nowrap; }
.landing-cards .vehicle-line .muted { white-space: nowrap; }
.route-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.route-card {
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font: inherit;
  line-height: 1.7;
  cursor: pointer;
}
.route-card:hover { border-color: var(--muted); }
.route-card.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.route-card .route-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.route-card .swatch { width: 26px; height: 5px; border-radius: 3px; }
.route-card .warn { color: #f0883e; }
.areas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.areas li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; background: var(--surface-2); border-radius: 8px; }
.area-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }

.muted { color: var(--muted); }
[hidden] { display: none !important; }

.footer { color: var(--muted); font-size: 12px; text-align: center; padding: 20px; border-top: 1px solid var(--border); }

/* player page (templates/player.html, static/player.js) */
.player-page main > * + * { margin-top: 16px; }
#player > * + * { margin-top: 16px; }
.player-search { display: flex; gap: 8px; max-width: 560px; }
.player-search input, .hero-search input {
  flex: 1;
  min-width: 0;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font: inherit;
  font-size: 15px;
}
.player-search input:focus, .hero-search input:focus { outline: none; border-color: var(--accent); }
#player .player-scope { margin-top: 6px; font-size: 12.5px; }
/* key words in page intros: bold + accent (things to watch out for: warning color) */
.hl { color: var(--accent); font-weight: 700; }
.warn-hl { color: var(--warn); font-weight: 700; }
.choice-btn { padding: 6px 12px; font-weight: 600; }
.choice-btn.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* replay view tabs: outlined when chosen, so the filled yellow ▶ under the map stays the only play button */
.replay-modes .choice-btn.active { background: var(--surface-2); color: var(--accent); border-color: var(--accent); }
/* filters above the match list (player.html #match-filters): the zone page's label + select rows */
.match-filters { margin: 4px 0 12px; }
.match-filters select { min-width: 120px; }
.match-table-wrap { max-height: 420px; overflow-y: auto; }
.match-table tr.can-replay { cursor: pointer; }
.match-table td.nowrap { white-space: nowrap; }
.match-table tr.can-replay:hover td { background: var(--surface-2); }
.match-table tr.selected td { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.replay-btn { padding: 4px 10px; font-size: 12.5px; }
/* 고정 / 고정 해제 right of 리플레이 (player.js pinButton): pinned = accent outline */
.pin-btn { padding: 4px 10px; font-size: 12.5px; min-width: 76px; }  /* 고정 = 고정 해제 width: 리플레이 stays put */
.pin-btn.on { color: var(--accent); border-color: var(--accent); }
#pin-card { margin-top: 16px; }
.kind { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.kind-ranked { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.kind-esport { color: var(--landing-spot); border-color: color-mix(in srgb, var(--landing-spot) 50%, var(--border)); }
.rank-win { color: var(--accent); }
/* 운영 점수 column (player page) */
.rot { font-weight: 700; font-variant-numeric: tabular-nums; }
.rot-hi { color: var(--ok); }
.rot-mid { color: var(--text); }
.rot-lo { color: var(--danger); }
.rot-n { margin-left: 5px; font-size: 11px; }
.rank-top { color: var(--ok); }
/* the map as big as the screen height allows (up to 1040px), 우리 팀 · 경기 로그 in a fixed 340px column beside it */
.player-page main.wide { max-width: 1740px; }
/* while playing back, three columns (teams · map · 우리 팀 + 경기 로그): the whole screen width, so the side columns do not
   take the map's room (user 2026-10-04 «좌우 여백이 남아있는데 지도를 왜 줄여»), but no wider than the two side columns
   at their least (370 + 450px) beside the full map, so a wide screen does not stretch them («너무 넓잖아») */
.player-page main.wide:has(.replay-grid.playing) { max-width: calc(370px + min(1030px, 99vh - 40px) + 450px + 32px + 48px); }
/* the map keeps its size (square, about the screen height); the side columns share the rest of the width */
.replay-grid { display: grid; grid-template-columns: minmax(0, min(1030px, calc(99vh - 40px))) minmax(340px, 1fr); gap: 16px; align-items: start; }  /* map column 10% larger than 936px / 90vh - 36px (2026-10-03) */
.replay-box { position: relative; }
#replay-title { scroll-margin-top: 12px; }  /* a little room above it when scrolled to (the site header scrolls away) */
.replay-box canvas { width: 100%; height: 100%; display: block; }
/* the scale bar is drawn in the bottom right corner: the + · − · ⤢ · 따라가기 buttons sit above it */
.replay-box .map-ctrl { bottom: 40px; }
/* chalk box (player.js chalk): bottom left, the zone tab's tool pills (.tb-btn) in a row; the pen takes the chosen color */
.replay-tools { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: rgba(14, 17, 22, .6); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; }
.replay-tools .tb-reset:disabled { opacity: .35; cursor: default; }
/* left middle: the 격자 · 등고선 tools in the zone tab's tool box (.map-toolbar); not .replay-side, the team / log cards' class */
.replay-maptools { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 3; margin: 0; }
.replay-tools .tb-reset:disabled:hover { color: #8b949e; border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); }
.chalk-colors { display: grid; grid-template-columns: repeat(2, 16px); gap: 5px; }
.chalk-swatch { width: 16px; height: 16px; padding: 0; border-radius: 50%; cursor: pointer; background: var(--sw);
  border: 2px solid rgba(14, 17, 22, .9); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.chalk-swatch.on { box-shadow: 0 0 0 2px #fff; }
/* legend under the replay map: one box per group (선수 · 지도 · 예측 · 조작), same look as the map legends */
/* boxes as wide as their longest line (none spills into the next), filling the row */
.replay-legend { position: static; margin-top: 10px; display: flex; flex-wrap: wrap;
  gap: 8px; background: none; border: 0; padding: 0; pointer-events: auto; max-width: none; }
.replay-legend .lg-box { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 9px;
  background: rgba(14, 17, 22, .78); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; }
.replay-legend .lg-group { margin: 0 0 3px; padding: 0; border: 0; }
.replay-legend .lg-item { white-space: nowrap; line-height: 1.4; min-height: 20px; }
.replay-legend .lg-none { display: inline-flex; align-items: center; gap: 8px; opacity: .4; }  /* not in this match */
.replay-legend .lg-item > span:not(.lg-none):has(> .lg-dot) { display: inline-flex; align-items: center; gap: 8px; }
.replay-legend .lg-item > .muted { font-size: 11px; }
/* the zone map's legend and controls, under the map in the replay's form (zone.html .zone-legend): one row of boxes,
   short labels (details on hover), the 조작 box's keycaps */
.zone-legend { margin: 10px 0 0; }
.zone-legend-boxes { display: contents; }
.zone-legend .lg { min-height: 20px; gap: 8px; }
.zone-legend .lg-icon { width: 18px; }
.zone-legend .lg-icon svg, .zone-legend .lg-icon canvas { width: 18px; height: 18px; }
.zone-legend .lg-text { line-height: 1.4; }
#overview-hint { display: flex; flex-direction: column; gap: 3px; }
.lg-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.lg-item > .lg-dot, .lg-item > .lg-line, .lg-item > .lg-star, .lg-item > .lg-mark, .lg-item > .lg-icon { flex: none; }
.lg-icon { width: 14px; height: 13px; }  /* official icon (static/pubg), e.g. the care package */
.lg-mark { width: 12px; text-align: center; font-weight: 700; color: #fff; line-height: 1; }
.lg-keys { display: inline-flex; gap: 3px; flex: none; min-width: 52px; }
.lg-keys kbd { font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: 4px; color: #e6edf3;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); border-bottom-width: 2px; }
.lg-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-sizing: border-box; }
.lg-star { color: var(--final-ring); font-size: 15px; line-height: 1; width: 12px; text-align: center; }
.lg-line { width: 18px; border-top: 2px dashed var(--plane-path); display: inline-block; }
/* 우리 팀 panel next to the replay map (player.js renderTeam) */
.team-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.team-stat { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.team-stat .muted { font-size: 12px; }
.team-stat b { font-size: 18px; font-variant-numeric: tabular-nums; }
.team-table { width: 100%; font-size: 13px; }
.ui-page .team-card .table.team-table > :not(caption) > * > * { padding: 8px 5px; }  /* beats ui-layout.css .ui-page .table cells (12px 16px): 6 columns fit the side column without a scrollbar */
.team-card .table-wrap { margin: 0 -8px; }  /* use some of the card's side padding */
.team-table td { font-variant-numeric: tabular-nums; }
.team-table .team-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-table tr.me .team-name { color: var(--accent); font-weight: 700; }
.team-table .name-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.team-table .name-link:hover, .team-table .name-link:focus-visible { color: var(--accent); text-decoration: underline; }
/* while playing: 팀 목록 on the left (230px), then the map, then 우리 팀 · 경기 로그 */
/* the team list gets room for a whole [TAG] nickname (16 characters) with its numbers (user 2026-10-04: no «…»); on a
   1080p screen the map gives up about 70px for it */
.replay-grid.playing { grid-template-columns: minmax(370px, 1fr) minmax(0, min(1030px, calc(99vh - 40px))) minmax(450px, 1fr); }
.pb-teams.card { padding: 12px 10px; max-height: calc(100vh - 90px); display: flex; flex-direction: column; }
.pb-teams.card[hidden] { display: none; }
.pb-teams-head { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; font-size: 13px; padding: 0 8px 8px; }
/* alive count on the map, top right above the phase slider (user 2026-10-04); on a narrow map it goes under the
   phase text drawn at the top middle of the canvas */
.pb-map-count { position: absolute; top: 10px; right: 10px; z-index: 3; padding: 5px 10px; font-size: 13px; color: #c9d1d9;
  background: rgba(14, 17, 22, .6); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; pointer-events: none; }
.pb-map-count[hidden] { display: none; }
.pb-map-count b { color: #fff; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .pb-map-count { top: 30px; font-size: 12px; } }
.pb-teams-head .pb-check { font-size: 12px; }
.pb-teams-list { overflow-y: auto; min-height: 0; }
.pb-team { padding: 8px 8px 6px; border-radius: 8px; }
.pb-team + .pb-team { margin-top: 4px; }
.pb-team.mine { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pb-team h3 { margin: 0 0 4px; font-size: 13px; display: flex; align-items: center; }
/* «이 팀 보기»: another team as ours on the same playback (player.js viewTeam) */
.pb-team-pick { margin-left: auto; padding: 0 6px; border: 1px solid var(--border); border-radius: 4px; background: none;
  color: var(--muted); font: inherit; font-size: 11px; font-weight: 400; line-height: 18px; cursor: pointer; }
.pb-team-pick:hover, .pb-team-pick:focus-visible { color: var(--accent); border-color: var(--accent); }
.team-card-title { display: flex; align-items: center; gap: 8px; }
.team-card-title .pb-team-pick[hidden] { display: none; }
.team-summary.loading { opacity: .45; }  /* the other team's numbers on their way (loadTeamCard) */
/* alive / members, right after the team name («1팀 4/4») */
.pb-team-left { margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.pb-team.mine h3 { color: var(--accent); }
.pb-team.out h3 { color: var(--muted); }
.pb-team ul { list-style: none; margin: 0; padding: 0; }
.pb-tm { display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 4px; font-size: 13px; line-height: 1.5; cursor: pointer; }
.pb-tm:hover { background: var(--surface-2); }
.pb-tm-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.pb-tm.knocked .pb-tm-dot { background: #ff9f43; }
.pb-tm.dead .pb-tm-dot { background: none; width: 8px; height: auto; }
.pb-tm.dead .pb-tm-dot::before { content: "×"; color: var(--danger); font-weight: 700; font-size: 13px; line-height: 1; }
.pb-tm-bar { flex: none; width: 3px; height: 13px; border-radius: 2px; }
.pb-tm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-tm-clan { color: var(--muted); font-weight: 400; font-size: 12px; }  /* [TAG] before the nickname */
.pb-team.mine .pb-tm-name { color: var(--accent); font-weight: 600; }
.pb-tm.dead .pb-tm-name { color: var(--muted); }
.pb-tm-icon { flex: none; font-size: 11px; }
/* kills · assists · damage so far: fixed columns under the .pb-tm-cols titles */
.pb-tm-num { flex: none; width: 24px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.pb-tm-num.zero { color: var(--muted); opacity: .55; }
.pb-tm-cols { display: flex; justify-content: flex-end; gap: 4px; padding: 0 12px 4px; font-size: 11px;
  position: sticky; top: 0; z-index: 1; background: var(--surface); }
.pb-tm-cols span { width: 24px; text-align: center; }  /* same width as .pb-tm-num: evenly spaced */
.pb-tm-num.dmg, .pb-tm-cols .dmg { width: 32px; }  /* damage reaches 4 digits */
@media (max-width: 900px) { .replay-grid { grid-template-columns: 1fr; } }
/* 경기 로그 under 우리 팀 while playing (player.js renderLog): time first, newest on top, scroll down for the past */
.replay-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pb-log-card { position: relative; }
.pb-log-card[hidden] { display: none; }
.pb-log-card .panel-head { align-items: center; }
.pb-log-card h2 { margin: 0; }
.pb-log { list-style: none; margin: 0; padding: 0; height: max(360px, calc(100vh - 160px)); overflow-y: auto; font-size: 12px; }  /* about the screen height */
.pb-log:empty::before { content: "아직 없음"; display: block; padding: 6px; color: var(--muted); }
.pb-log li { display: flex; gap: 6px; padding: 4px 6px; border-radius: 6px; line-height: 1.45; cursor: pointer; }
.pb-log li:hover { background: var(--surface-2); }
.pb-log li.mine { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pb-log time { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; }
.pb-log .pb-log-who { overflow-wrap: anywhere; }
.pb-log .pb-log-who.mine { font-weight: 700; }
/* who [verb ▸] whom weapon: the tag is an arrow pointing at the one it happened to */
/* one line per row with whole names (user 2026-10-04 «… 안 생기게», then «개행 없이 1줄로»): the right column is wide
   enough for two «10 · [TAG] 16자» names at 12px; only the weapon gives way if a row still does not fit */
.pb-log-line { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; min-width: 0; flex: 1; }
.pb-log-line .pb-log-who { flex: none; white-space: nowrap; }
.pb-log-team { width: auto; padding: 3px 26px 3px 8px; font-size: 13px; background-color: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; background-position: right 7px center; }
.pb-log-act { flex: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 11px; font-weight: 700;
  padding: 1px 11px 1px 6px; border-radius: 4px 0 0 4px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); }
/* a weapon with no official icon (newer than pubg/api-assets, 2024-10: RPD, JS9 ...): its name in a box the size of
   an icon, in the icon's place at the right (2026-10-09 user: plain text sat right after the name) */
.pb-log-weapon { flex: 0 1 48px; min-width: 0; margin-left: auto; box-sizing: border-box; height: 15px; padding: 0 3px; align-self: center;
  border: 1px solid color-mix(in srgb, var(--text) 45%, transparent); border-radius: 3px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-align: center; font-size: 9.5px; font-weight: 700; line-height: 13px; letter-spacing: .04em; color: var(--text); opacity: .9; }
/* a fixed right column: «약 149m» / «31m» / «자폭» of every row end at the same place, so the weapon icons line up
   (they moved with the distance's width, user 2026-10-04 «로그창 뒤틀린거») */
.pb-log-dist { flex: none; width: 52px; text-align: right; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-log-dist.alone { margin-left: auto; }
.pb-log-icon { flex: 0 1 auto; min-width: 0; margin-left: auto; height: 12px; width: auto; max-width: 48px; object-fit: contain; opacity: .9; }  /* official weapon / kill feed icon (static/pubg), the name on hover */
/* colour as in the game's killfeed: blue = our team did it, red = it happened to our team, white = others (player.js logTone) */
.tone-ours .pb-log-act { background: rgba(80, 160, 255, .24); color: #8cc8ff; }
.tone-lost .pb-log-act { background: rgba(255, 90, 90, .22); color: #ff9c9c; }
.tone-other .pb-log-act { background: rgba(255, 255, 255, .12); color: #fff; }
.pb-log-new { position: absolute; left: 50%; top: 62px; transform: translateX(-50%); z-index: 1; font-size: 12px; padding: 4px 12px; }
.pb-log-new[hidden] { display: none; }
/* match playback (player page: ▶ 경기 재생, web/playback.py) */
.replay-modes { margin-bottom: 10px; }
/* a box like the map's phase slider and tool pills (user 2026-10-04 «기존 UI 박스처럼»): the time bar with our fights
   on a row of its own across the box (longer, so the marks are easier to point at), the buttons under it */
.playback-bar { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-top: 10px; padding: 8px 12px 10px;
  background: rgba(14, 17, 22, .6); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; }
.playback-bar #pb-speed { margin-left: auto; }
.playback-bar[hidden] { display: none; }
.playback-bar #pb-play { min-width: 44px; justify-content: center; }
/* our players' lanes: «1 이름» on the left (as wide as the longest name), the lanes and the time bar to its right */
.pb-timeline { order: -1; flex: 1 1 100%; min-width: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 0; }
/* lanes of 20px (MARK_LANE_H): room between the rows (a stripe behind them was taken away, user 2026-10-04); the marks
   in proportion to the map's player dots (18px across, «지도 아이콘 크기 맞춰서»): dots and rings 12px, ✕ 13 / 16px */
.pb-lane-names { display: grid; grid-auto-rows: 20px; align-content: start; font-size: 12px; line-height: 20px; white-space: nowrap; }
.pb-lane-names > span { padding-right: 10px; }
.pb-lane-names b { display: inline-block; width: 12px; font-variant-numeric: tabular-nums; }
.pb-lane-names .gone { opacity: .5; }
.pb-track { position: relative; min-width: 0; padding-top: var(--marks-h, 14px); }
.playback-bar #pb-time { width: 100%; display: block; }
/* fights of our team over the time bar (player.js renderMarks): a lane per player of ours (MARK_LANE_H = 11px), the
   range's thumb is 16px wide so the bar runs from 8px to 100% - 8px */
.pb-marks { position: absolute; left: 8px; right: 8px; top: 0; height: var(--marks-h, 14px); }
.pb-fight { position: absolute; top: -2px; bottom: 0; border-radius: 4px; background: rgba(255, 255, 255, .07); cursor: pointer; }
.pb-fight:hover { background: rgba(255, 255, 255, .16); }
.pb-lane { position: absolute; height: 2px; margin-top: 9px; border-radius: 1px; opacity: .5; pointer-events: none; }
.pb-mark { position: absolute; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; cursor: pointer;
  box-sizing: border-box; z-index: 1; margin-top: 4px; border: 1px solid rgba(0, 0, 0, .6); }
.pb-mark.knock { background: none; border: 2.5px solid; }
.pb-mark.down, .pb-mark.dead { width: 16px; height: 16px; margin-left: -8px; margin-top: 2px; border: 0; border-radius: 0; line-height: 16px;
  text-align: center; color: var(--danger); font-weight: 700; font-size: 13px; }
.pb-mark.dead { font-size: 16px; }
.pb-mark:hover { transform: scale(1.4); z-index: 2; }
.pb-clock { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 118px; }
.pb-check { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 13px; }
.playback-bar select { background-color: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 26px 5px 6px; background-position: right 7px center; }
#pb-record.recording { color: var(--danger); border-color: var(--danger); }
.pb-save { padding: 3px 9px; font-size: 12px; white-space: nowrap; }
.pb-saved { color: var(--ok); font-size: 12px; white-space: nowrap; }
.pb-left { font-size: 11px; margin-left: 5px; white-space: nowrap; }
.pb-left.soon { color: var(--warn); font-weight: 700; }

/* dashboard: hero, feature sections, FAQ (templates/dashboard.html) */
.dashboard-page main > .feature { margin-top: 0; }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  padding: 36px 32px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 85% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    linear-gradient(160deg, var(--surface-2), var(--surface));
}
.kicker { color: var(--accent); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; margin-bottom: 8px; }
.hero-title { font-size: 32px; line-height: 1.3; margin: 0 0 12px; letter-spacing: -.01em; }
.hero-lead { color: var(--muted); font-size: 15px; margin: 0 0 22px; max-width: 640px; }
.hero-lead b { color: var(--text); }
.hero-search { display: flex; gap: 8px; max-width: 600px; }
.hero-search input { font-size: 16px; padding: 12px 16px; }
.hero-search .btn { padding-inline: 20px; }
.hero-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; font-size: 13px; }
.example-chip { padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); }
.example-chip:hover { border-color: var(--accent); text-decoration: none; }
.example-chip.chip-mine { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); font-weight: 700; }
.hero-stats { display: grid; grid-template-columns: repeat(2, minmax(120px, auto)); gap: 16px 28px; margin: 0; }
.hero-stats dt { color: var(--muted); font-size: 12.5px; }
.hero-stats dd { margin: 2px 0 0; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hero-stats dd small { font-size: 13px; color: var(--muted); font-weight: 600; margin-left: 3px; }

.feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 40px;
  align-items: center;
  padding: 44px 4px;
  border-bottom: 1px solid var(--border);
}
.feature.reverse .feature-text { order: 2; }
.feature h2 { font-size: 24px; line-height: 1.35; margin: 0 0 12px; }
.feature-text p { color: #c9d1d9; margin: 0 0 14px; line-height: 1.7; }
.feature-points { margin: 0 0 18px; padding-left: 1.1em; display: grid; gap: 6px; color: var(--muted); line-height: 1.6; }
.feature-points b { color: var(--text); }
.feature-link { font-weight: 700; }
.feature-shot { margin: 0; }
.feature-shot img { display: block; width: 100%; border-radius: 10px; border: 1px solid var(--border); }
.feature-shot figcaption { color: var(--muted); font-size: 12.5px; margin-top: 8px; }

/* dashboard «운영 학습» table (dashboard.html, scripts/ops_learn results) */
.ops-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13.5px; }
.ops-table th, .ops-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: left; }
.ops-table th { color: var(--muted); font-weight: 600; font-size: 12px; }
.ops-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.ops-table td.ops-up { color: var(--ok); font-weight: 700; }
.ops-table td.ops-down { color: var(--danger); font-weight: 700; }
.backtest-card {background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
.bt-title { font-weight: 700; margin-bottom: 10px; }
.bt-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.bt-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bt-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.bt-rows { display: grid; gap: 10px; }
.bt-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 92px; gap: 12px; align-items: center; font-size: 13px; }
.bt-phase { color: var(--muted); white-space: nowrap; }
.bt-bar { position: relative; height: 18px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.bt-bar > span { position: absolute; top: 0; bottom: 0; left: 0; }
.bt-q90 { background: color-mix(in srgb, var(--accent) 40%, var(--surface-2)); }
.bt-q50 { background: var(--accent); }
.bt-val { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.section-title { font-size: 20px; margin: 44px 0 14px; }
.dashboard-page main > .section-title { margin-top: 44px; }
.faq { display: grid; gap: 10px; }
.faq .card { padding: 14px 18px; }
.faq summary { font-weight: 700; }
.faq p { color: var(--muted); margin: 10px 0 0; line-height: 1.7; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 26px 20px; }
  .hero-title { font-size: 26px; }
  .feature { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
  .feature.reverse .feature-text { order: 0; }
}
.kind-normal { color: var(--text); border-color: color-mix(in srgb, var(--text) 35%, var(--border)); }
.kind-api { color: var(--pin-warm-line); border-color: color-mix(in srgb, var(--pin-warm-line) 45%, var(--border)); margin-left: 4px; }
.recent-btn { padding: 5px 12px; font-size: 12.5px; }
/* my account · followed players (player page, dashboard) */
.follow-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 10px; }
.follow-label { font-size: 12.5px; margin-left: 6px; }
.follow-chip { padding: 5px 12px; font-size: 13px; font-weight: 600; }
.follow-chip.is-mine { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
/* replay contribution line (static/replay_contrib.js): PC Chrome / Edge only, a slim note rather than a card */
.replay-contrib { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin: 10px 0 0;
  padding: 7px 12px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 6px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.replay-contrib[hidden] { display: none; }
.replay-contrib b { color: var(--text); }
.replay-contrib .rc-text { min-width: 0; }
.replay-contrib .rc-actions { display: flex; gap: 6px; }
.replay-contrib .btn { padding: 3px 12px; font-size: 12px; min-height: 0; }
.replay-contrib .rc-title { color: var(--text); font-weight: 600; }
/* setup guide: Tabler avatar + nav-segmented + steps-vertical steps-counter + input-group; the app .steps above is a grid, so display is reset */
.replay-contrib.rc-guide { display: block; max-width: 840px; padding: 14px 16px; border: 1px solid var(--border); border-left: 3px solid var(--accent);
  background: var(--surface); border-radius: 8px; }
.replay-contrib .icon { width: 16px; height: 16px; flex: none; }
.replay-contrib .rc-head { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.replay-contrib .rc-avatar { --tblr-avatar-bg: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.replay-contrib .rc-avatar .icon { width: 18px; height: 18px; }
.replay-contrib .rc-head-text { flex: 1 1 260px; min-width: 0; }
.replay-contrib .rc-title { font-size: 14px; line-height: 1.4; }
.replay-contrib .rc-sub { font-size: 12.5px; }
.replay-contrib .rc-modes { --tblr-nav-height: 2rem; --tblr-nav-bg: var(--surface-2); --tblr-nav-active-bg: var(--accent);
  --tblr-nav-link-padding-x: .7rem; font-size: 12.5px; font-weight: 600; }
.replay-contrib .rc-modes .nav-link { color: var(--muted); gap: 5px; }
.replay-contrib .rc-modes .nav-link:hover { color: var(--text); }
.replay-contrib .rc-modes .nav-link.active { color: var(--accent-ink); border-color: var(--accent); }
.replay-contrib .rc-steps.steps { --tblr-steps-dot-size: 1.375rem; --tblr-steps-vertical-item-gap: 14px; --tblr-steps-vertical-connector-gap: 14px;
  --tblr-steps-vertical-padding-start: .75rem; display: flex; flex-direction: column; margin: 14px 0 0; padding: 0; overflow: visible; }
.replay-contrib .rc-steps .step-item { color: var(--muted); cursor: default; margin: 0; }
.replay-contrib .rc-steps .step-item::before { background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.replay-contrib .rc-steps .step-item::after { background: var(--border); }
.replay-contrib .rc-step-title { color: var(--text); margin-bottom: 6px; line-height: 1.5; }
.replay-contrib .rc-step-title:last-child { margin-bottom: 0; }
.replay-contrib .rc-steps .btn { vertical-align: middle; margin: 0; }
.replay-contrib .rc-hint { margin-top: 4px; font-size: 12px; }
.replay-contrib .rc-badge { margin-left: 6px; font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--border); vertical-align: 1px; }
.replay-contrib .rc-path-group { width: auto; max-width: 100%; display: inline-flex; flex-wrap: nowrap; }
.replay-contrib .rc-path-group .form-control.rc-path { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12.5px; padding: 5px 10px;
  field-sizing: content; min-width: 0; color: var(--text); background: var(--surface-2); border-color: var(--border); cursor: text; }
.replay-contrib .rc-path-group .rc-copy { padding: 4px 12px; gap: 5px; border-radius: 0 6px 6px 0; color: var(--muted);
  background: var(--surface-2); font-size: 12px; }
.replay-contrib .rc-path-group.rc-wide { display: flex; width: 100%; }
.replay-contrib .rc-wide .form-control.rc-path { field-sizing: fixed; flex: 1; }
.replay-contrib kbd { font-size: 11px; padding: 1px 5px; }
.replay-contrib .rc-copy:hover { color: var(--text); }
.replay-contrib .rc-copy.done { color: #4ade80; }
/* status line (status() in replay_contrib.js): mark + title + muted detail, ghost actions and a close X on the right */
.replay-contrib.rc-status-mode { width: fit-content; max-width: min(840px, 100%); flex-wrap: nowrap; gap: 6px 16px; padding: 6px 6px 6px 14px;
  border: 1px solid var(--border); border-left: 3px solid var(--accent); background: var(--surface); border-radius: 8px; }
.replay-contrib .rc-status { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; min-width: 0; }
.replay-contrib .rc-mark { display: inline-flex; color: var(--accent); }
.replay-contrib .rc-ok .rc-mark { color: #4ade80; }
.replay-contrib .rc-warn .rc-mark { color: #f59e0b; }
.replay-contrib .rc-mark .spinner-border { width: 14px; height: 14px; border-width: 2px; }
.replay-contrib .rc-st-title { color: var(--text); font-weight: 600; }
.replay-contrib .rc-status .rc-badge { margin-left: 0; }
.replay-contrib .rc-note .rc-off { margin-left: auto; padding: 0 8px; font-size: 12px; }
.replay-contrib .rc-st-detail { color: var(--muted); }
.replay-contrib .rc-st-detail::before { content: "·"; margin-right: 8px; }
.replay-contrib.rc-status-mode .rc-actions { flex: none; align-items: center; gap: 2px; }
.replay-contrib .rc-actions .btn-ghost-secondary { color: var(--muted); background: transparent; border-color: transparent; }
.replay-contrib .rc-actions .btn-ghost-secondary:hover { color: var(--text); background: var(--surface-2); }
.replay-contrib .rc-x { padding: 4px; }
.replay-contrib .rc-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; }
.replay-contrib .rc-note .icon { margin-top: 2px; }
@media (max-width: 600px) { .replay-contrib .rc-modes { width: 100%; } }
.player-head.card { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 14px 20px; flex-wrap: wrap; }  /* .card: tabler-theme.css (loaded after) sets .card display:block */
.player-head-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.player-head-name h2 { font-size: 24px; margin: 0; overflow-wrap: anywhere; }
.head-roster { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.head-roster[hidden], .player-head-actions[hidden], .head-stage[hidden] { display: none; }
.head-roster-label { font-size: 12px; margin-right: 2px; }
/* 구분 of a tournament match: event · stage on one line, after the 대회 tag (player.js kindName) */
.stage-label { white-space: nowrap; }
.head-stage { text-decoration: none; }
.head-stage:hover { color: var(--accent); border-color: var(--accent); }
.player-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.player-head-actions .btn { padding: 7px 14px; font-weight: 600; }
.player-head-actions .btn.active { color: var(--accent); border-color: var(--accent); }
.kind-mine { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

/* admin «PUBG API» page (templates/api.html): tab 수집 현황 */
.st-table td.missing, #cloud-result td.missing { color: var(--warn); font-weight: 700; }
.ok-text { color: var(--ok); }
.warn-text { color: var(--warn); }
.list-scroll { max-height: 420px; overflow-y: auto; }
.api-page code { font-size: 12px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.api-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.api-head .lead { margin: 0; max-width: 720px; }
.api-row { margin-top: 14px; }
.api-row > .card { min-width: 0; }
/* tab API 목록 (web/api_catalog.py) */
.api-page .card[id], .api-page [id^="api-"] { scroll-margin-top: 72px; }
.api-page h2 code { font-size: 13px; font-weight: 600; }
/* catalogue head (developers.coupang.com/ko/api): intro line, then cards = count above the title, one line, «보기 →» */
.api-intro { margin: 4px 0 16px; font-size: 14px; line-height: 1.7; }
.api-intro p { margin: 0 0 4px; }
.api-intro .muted { font-size: 12.5px; }
.api-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.api-cat { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.api-cat:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-1px); }
.api-cat small { color: var(--muted); font-size: 12.5px; }
.api-cat small b { color: var(--accent); font-size: 15px; }
.api-cat strong { display: flex; align-items: baseline; font-size: 16px; }
.api-cat > span { color: var(--muted); font-size: 13px; line-height: 1.5; word-break: keep-all; }
.api-cat em { margin-top: auto; padding-top: 6px; font-style: normal; font-size: 13px; font-weight: 600; color: var(--accent); }
.sec-no { margin-right: 10px; color: var(--accent); font-family: ui-monospace, Consolas, monospace; font-weight: 700; font-size: 11.5px;
  letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.sec-no::before { content: "# "; }
/* table of contents (developers.coupang.com sidebar): a group = button row ▸ title · count, folding its items */
.api-toc .ms-title { display: block; margin-bottom: 10px; }
.api-toc .toc-group { margin-top: 2px; }
.api-toc .toc-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none;
  color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; transition: background .15s; }
.api-toc .toc-head:hover { background: var(--surface-2); }
.api-toc .toc-head.current .toc-title { color: var(--accent); }
.api-toc .toc-caret { flex: none; font-size: 10px; color: var(--muted); transition: transform .15s; }
.api-toc .toc-group.open > .toc-head .toc-caret { transform: rotate(90deg); }
.api-toc .toc-title { flex: 1; min-width: 0; }
.api-toc .toc-count { flex: none; margin-left: auto; font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.api-toc .toc-no { margin-right: 6px; font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; color: var(--muted); }
.api-toc .toc-items { display: none; list-style: none; margin: 2px 0 6px; padding: 0 0 0 16px; }
.api-toc .toc-group.open > .toc-items { display: block; }
.api-toc .toc-items a { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-radius: 6px; font-size: 12.5px; line-height: 1.4;
  color: var(--muted); transition: background .15s, color .15s; }
.api-toc .toc-items a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.api-toc .toc-items a.active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600; }
.api-toc .toc-items a.active .toc-no, .api-toc .toc-items a.active .toc-count { color: inherit; }
.api-toc .toc-group.sub > .toc-head { padding: 6px 8px 6px 10px; font-size: 12.5px; font-weight: 500; color: var(--muted); gap: 6px; }
.api-toc .toc-group.sub > .toc-head:hover { color: var(--text); }
.api-toc .toc-group.sub > .toc-items { padding-left: 10px; }
.ep-method.mini { min-width: 30px; padding: 0 4px; font-size: 9.5px; border-radius: 3px; }
/* reference blocks (docs.tosspayments.com/reference): method badge + path, key/quota tags, parameter lists, «객체 상세» */
.ref-head { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.ref-head h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }
.ref-filter { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.ref-filter button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; padding: 4px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.ref-filter button.on { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: 0 0 0 1px var(--border); }
.ptable tr[hidden], .ptable tbody[hidden] { display: none; }
.ep-method { flex: none; display: inline-block; min-width: 44px; text-align: center; padding: 2px 7px; border-radius: 5px; font-size: 11.5px;
  font-weight: 800; letter-spacing: .03em; font-family: ui-monospace, Consolas, monospace; }
.ep-method.get { color: #58a6ff; background: color-mix(in srgb, #58a6ff 15%, transparent); }
.ep-method.file { color: var(--muted); background: var(--surface-2); }
.ep-var { color: var(--accent); }
.ep-tag { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 12px; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
.ep-tag.key { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); }
.ep-tag.free { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
.ep-what { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; }
.ep-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 10px 0 0; font-size: 13px; line-height: 1.5; }
.ep-meta dt { color: var(--muted); white-space: nowrap; }
.ep-meta dd { margin: 0; }
.ref-callout { margin: 14px 0 0; padding: 12px 16px 12px 32px; background: var(--surface-2); border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.ref-callout.single { padding-left: 16px; }
/* parameter tables (developers.coupang.com endpoint pages): Name · 우리 DB · 설명, a parent row folds its fields (⌄),
   a field sits indented on a guide line with its full path under the name */
.pt-wrap { margin-top: 8px; overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.ptable { width: 100%; min-width: 760px; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.ptable col.pt-col-name { width: 46ch; }
.ptable col.pt-col-type { width: 25ch; }
.ptable col.pt-col-use { width: 38%; }
.ptable thead th { padding: 10px 16px; background: var(--surface-2); text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ptable td { padding: 11px 16px; border-top: 1px solid var(--border); border-bottom: 0; vertical-align: top; line-height: 1.6; color: var(--text);
  white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.ptable .pt-name { position: relative; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.ptable .pt-name b { font-weight: 600; }
.ptable .pt-type { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--muted); word-break: normal; overflow-wrap: break-word; }
.ptable .pt-stored { color: var(--ok); }
/* 요청 table: a row opens its details in place */
.ref-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ep-table col.ep-col-method { width: 76px; }
.ep-table col.ep-col-path { width: 42%; }
.ep-table col.ep-col-name { width: 21ch; }
.ep-table col.ep-col-short { width: 9ch; }
.ep-table col.ep-col-caret { width: 36px; }
.ep-table .ep-row { cursor: pointer; transition: background .12s; }
.ep-table .ep-row:hover td, .ep-table .ep-item.open .ep-row td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.ep-table .ep-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ep-table .ep-row td { vertical-align: middle; white-space: nowrap; }
.ep-table .ep-row td.pt-name { white-space: normal; }
.ep-table .ep-title { font-weight: 600; white-space: nowrap; }
.ep-table .ep-path-cell, .ep-table .ep-path-cell b {
  white-space: normal; word-break: normal; overflow-wrap: anywhere;
}
.ep-table .ep-row .pt-name b { font-weight: 600; }
.ep-caret { color: var(--muted); text-align: center; }
.ep-caret > span { display: inline-block; transition: transform .15s; }
.ep-table .ep-item.open .ep-caret > span { transform: rotate(90deg); }
.ep-table .ep-detail { display: none; }
.ep-table .ep-item.open .ep-detail { display: table-row; }
.ep-table .ep-detail > td { border-top: 0; padding-top: 0; padding-bottom: 16px; background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.ep-item { scroll-margin-top: 72px; }
/* parameter tables: more columns (Type, a short «우리 쓰임»), the docs' «폐기» and «문서에 없음» marks */
.ptable col.pt-col-kind { width: 16ch; }
.ptable col.pt-col-use-s { width: 13ch; }
.ptable col.pt-col-kv { width: 15ch; }
.pt-dep { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 4px; font-family: inherit; font-size: 10.5px; font-weight: 600;
  color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); vertical-align: 1px; white-space: nowrap; }
.pt-dep.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); }
.obj > summary > span:not(.muted) { color: var(--text); font-size: 13px; }
/* 수집 panel: the same look as API 목록 — numbered headings (CSS counters, so a card missing on the public site does
   not leave a gap; the shared parts _collect_run / _map_table get it too) and the rounded tables */
.st-panel { counter-reset: st; }
.st-panel .card > .ref-head > h2, .st-panel .card > h2:first-child, .st-panel .card > .panel-head:first-child > h2 { counter-increment: st; }
.st-panel .card > .ref-head > h2::before, .st-panel .card > h2:first-child::before, .st-panel .card > .panel-head:first-child > h2::before {
  content: "# " counter(st, decimal-leading-zero); margin-right: 10px; color: var(--accent); font-family: ui-monospace, Consolas, monospace; font-weight: 700;
  font-size: 11.5px; letter-spacing: .06em; }
.st-panel .card > h2:first-child, .st-panel .card > .panel-head:first-child { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.st-panel #map-table .table-wrap, .st-panel #cloud-result { border: 1px solid var(--border); border-radius: 12px; }
.st-panel #map-table thead th, .st-panel #cloud-result thead th { background: var(--surface-2); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; color: var(--muted); }
.ptable.st-table, .ptable.kv { table-layout: auto; min-width: 0; }
.ptable.st-table td.num, .ptable.st-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-cards { margin-bottom: 4px; }
#tables-card .st-cards { margin-bottom: 14px; }
div.api-cat:hover { border-color: var(--border); transform: none; }
.api-cat.warn { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); }
.api-cat.warn small b { color: var(--warn); }
.obj-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.obj { border: 1px solid var(--border); border-radius: 8px; padding: 0 14px; }
.obj > summary { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; cursor: pointer; list-style: none; }
.obj > summary::-webkit-details-marker { display: none; }
.obj > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.obj[open] > summary::before { transform: rotate(90deg); }
.obj > summary .muted { font-size: 12.5px; }
.obj[open] { padding-bottom: 12px; }
.api-page .badge { white-space: nowrap; }

/* member admin (templates/users.html): count line above the table, page buttons below */
.users-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 10px; }
.users-summary .users-page { margin-left: auto; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }

/* member page: this month's use against the free plans (web/usage.py) */
.usage-card { margin-bottom: 16px; }
.usage-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 12px; }
.usage-card h2 { margin: 0; font-size: 17px; }
.usage-meta { margin: 0; font-size: 13px; }
.usage-meters { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.usage-meter-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.usage-meter-label { font-weight: 600; font-size: 13px; white-space: nowrap; }
.usage-meter-nums { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.usage-meter-pct { margin-left: 6px; font-weight: 700; }
.usage-meter-bar { height: 8px; min-width: 0; }
.usage-meter-bar > span.warn { background: var(--warn); }
.usage-meter-bar > span.danger { background: var(--danger); }
.usage-meter-proj, .usage-meter-hint { margin: 4px 0 0; font-size: 12px; line-height: 1.35; }
.usage-details { margin-top: 14px; font-size: 12px; }
.usage-details > summary { cursor: pointer; user-select: none; }
.usage-detail-list { margin: 8px 0 0; padding-left: 1.2em; line-height: 1.5; }
.usage-detail-list li + li { margin-top: 6px; }
.danger-text { color: var(--danger); font-weight: 700; }
.warn-text { color: var(--warn); font-weight: 700; }

/* SCP 랭킹 (templates/clan.html) */
.clan-card { margin-top: 14px; }
/* sortable headers on every table (esports results, 전적 목록, SCP 랭킹): Tabler's .table-sort button/class with its
   asc/desc state, drawn as ▲ over ▼ (as on the official esports tables): both dim = sortable, the lit one = the
   order in use; --sort-on = the lit colour (esports: its yellow) */
:root { --sort-dim: #5b6573; --sort-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath d='M1.5 6L5 2.5L8.5 6M1.5 12L5 15.5L8.5 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.table-sort { display: inline-flex; align-items: center; gap: 6px; width: auto; margin: 0; padding: 0; line-height: 1;
  background: none; border: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  white-space: nowrap; cursor: pointer; user-select: none; }
.table-sort:hover { color: var(--text); }
.table-sort.asc, .table-sort.desc { color: var(--sort-on, var(--accent)); }
.table-sort::after, .table-sort.asc::after, .table-sort.desc::after { content: ""; flex-shrink: 0; width: 10px; height: 18px;
  margin: 0; -webkit-mask: var(--sort-icon) center / 100% 100% no-repeat; mask: var(--sort-icon) center / 100% 100% no-repeat;
  background: var(--sort-dim); }
.table-sort.asc::after { background: linear-gradient(var(--sort-on, var(--accent)) 50%, var(--sort-dim) 50%); }
.table-sort.desc::after { background: linear-gradient(var(--sort-dim) 50%, var(--sort-on, var(--accent)) 50%); }
.clan-table th.sortable { cursor: pointer; }
.data-tables td { vertical-align: middle; }
.data-tables td.num { white-space: nowrap; }
.data-tables .bar-cell .bar { width: 90px; }
.clan-table td.name a { color: var(--text); font-weight: 700; }
.clan-table tr.top-1 td:first-child { color: var(--accent); font-weight: 800; }
.clan-table tr.top-2 td:first-child, .clan-table tr.top-3 td:first-child { color: var(--text); font-weight: 800; }
.clan-table tr.muted-row td.name a { color: var(--muted); font-weight: 600; }
.clan-remove { padding: 2px 8px; font-size: 12px; }
.clan-table td.last-col { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.clan-add { margin: 12px 0 0; }
/* 내전 추첨기 (clan.html #scrim): Tabler .tag chips in two drop boxes, then team cards */
.scrim-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.scrim-box-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.scrim-box-head .btn { margin-left: auto; }
.scrim-drop { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; min-height: 96px; padding: 10px;
  border: 1px dashed var(--border); border-radius: 8px; background: var(--surface-2); }
.scrim-drop.in { border-color: var(--accent); }
.scrim-drop.over { border-style: solid; border-color: var(--accent); background: rgba(242, 169, 0, .08); }
.scrim-chip { cursor: grab; user-select: none; color: var(--text); }
.scrim-chip:hover { border-color: var(--accent); }
.scrim-chip small { color: var(--muted); }
.scrim-chip.guest { border-style: dashed; }
/* 1~4티어 고정: one box per place in a team (--tier-cols = the team size) */
.scrim-tiers { display: grid; grid-template-columns: repeat(var(--tier-cols, 4), minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.scrim-tier-drop { min-height: 64px; }
@media (max-width: 760px) { .scrim-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.scrim-guest { display: flex; gap: 6px; margin-top: 8px; }
.scrim-guest input { max-width: 220px; }
.scrim-options { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
/* the team cards and the 대장 cards share one grid (same column widths, team N under its 대장) */
.scrim-teams, .scrim-hall { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.scrim-team { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface-2); }
.scrim-team-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.scrim-team-head b { color: var(--accent); white-space: nowrap; }
.scrim-real small { white-space: nowrap; }
.scrim-team ol { margin: 0; padding: 0; list-style: none; }
.scrim-team li { display: flex; align-items: center; gap: 8px; padding: 4px 0; min-height: 30px; }
/* 1티어·2티어… = place in the team by score: gold, silver, bronze, then plain */
.scrim-tier { flex-shrink: 0; min-width: 44px; text-align: center; font-size: 11px; font-weight: 800; padding: 2px 6px;
  border-radius: 999px; border: 1px solid currentColor; color: var(--muted); }
.scrim-tier.t1 { color: var(--accent); background: rgba(242, 169, 0, .12); }
.scrim-tier.t2 { color: #b7c0ca; }
.scrim-tier.t3 { color: #c98a55; }
/* pinned by a 티어 고정 box: the tier colour filled, dark text */
.scrim-tier.pinned { color: #111; background: var(--accent); border-color: var(--accent); }
.scrim-tier.pinned.t2 { background: #b7c0ca; border-color: #b7c0ca; }
.scrim-tier.pinned.t3 { background: #c98a55; border-color: #c98a55; }
.scrim-tier.pinned.t4 { background: var(--muted); border-color: var(--muted); }
/* the reveal (clan.js revealTeams): a pending slot shows flickering names (.scrim-roll / .cap-roll) over its hidden
   answer, then .landed pops it in */
.scrim-roll, .cap-roll { display: none; }
.pending .scrim-real, .pending .cap-real { display: none; }
.pending .scrim-roll { display: inline; color: var(--muted); filter: blur(1.2px); }
.pending .cap-roll { display: flex; }
.landed .scrim-real { animation: scrim-pop .45s cubic-bezier(.2, 1.6, .4, 1); display: inline-block; }
@keyframes scrim-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
/* 대장 명예의 전당: one card per team's 1티어, the team number in a yellow corner flag (esports top-5 cards) */
#scrim-captains:not(:empty) { margin-bottom: 16px; }
.scrim-hall-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.scrim-hall-head b { font-size: 16px; color: var(--accent); letter-spacing: .02em; }
.scrim-captain { position: relative; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; min-height: 236px;
  background: var(--surface-2); }
.cap-flag { position: absolute; top: 0; left: 0; z-index: 1; background: var(--accent); color: #111; font-weight: 900;
  font-size: 13px; padding: 7px 11px; }
.cap-roll { height: 236px; align-items: center; justify-content: center; padding: 0 12px; text-align: center;
  font-size: 18px; font-weight: 800; color: var(--muted); filter: blur(1.5px);
  background: repeating-radial-gradient(circle at 70% 30%, transparent 0 14px, rgba(255, 255, 255, .03) 14px 15px); }
.cap-face { height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-bottom: 1px solid var(--border);
  background: repeating-radial-gradient(circle at 70% 30%, transparent 0 14px, rgba(255, 255, 255, .035) 14px 15px),
              radial-gradient(circle at 50% 60%, rgba(242, 169, 0, .16), transparent 70%); }
.cap-face .tier-icon { width: 76px; height: 76px; }
.cap-tier { font-size: 12px; font-weight: 700; color: var(--muted); }
.cap-initial { font-size: 54px; font-weight: 900; color: var(--accent); line-height: 1; }
.cap-body { padding: 12px 14px 14px; }
.cap-name { font-size: 16px; font-weight: 800; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cap-stats span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; color: var(--muted); background: rgba(255, 255, 255, .05); padding: 1px 4px; }
.cap-stats b { display: block; font-size: 17px; padding: 2px 4px 0; }
.cap-stats div:first-child b { color: var(--accent); }
.cap-stats .cap-none { grid-column: 1 / -1; }
.scrim-captain.landed { animation: scrim-flip .6s ease-out, scrim-glow 1.4s ease-out; }
@keyframes scrim-flip { 0% { transform: perspective(700px) rotateY(90deg); } 100% { transform: perspective(700px) rotateY(0); } }
@keyframes scrim-glow { 0%, 40% { box-shadow: 0 0 0 2px var(--accent), 0 0 26px rgba(242, 169, 0, .55); } 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .landed .scrim-real, .scrim-captain.landed { animation: none; } }
.tier { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  border: 1px solid currentColor; color: var(--muted); }
.tier-bronze { color: #c98a55; }
.tier-silver { color: #b7c0ca; }
.tier-gold { color: var(--accent); }
.tier-platinum { color: #5fd4c4; }
.tier-crystal { color: #9d8cff; }
.tier-diamond { color: #7aa2ff; }
.tier-master { color: #c77dff; }
.tier-survivor { color: var(--danger); }
.clan-filters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* 닉네임 찾기 box: the selects' look (background, border, padding) */
.clan-filters input[type=search] { background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px; font: inherit; width: 160px; }
.clan-filters input[type=search]:focus { outline: none; border-color: var(--accent); }
.clan-table td { vertical-align: middle; }
.clan-table td.rank { color: var(--muted); width: 28px; }
.clan-table td.cell-center { white-space: nowrap; }
.clan-table td.rp-col small { color: var(--muted); font-weight: 600; }
/* vertical-align: middle: an inline-flex box's baseline is the icon's bottom, which pushed the tier text above the
   other cells' text in the row */
.tier-cell { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.clan-table .tier-cell > .muted { margin-left: 2px; font-variant-numeric: tabular-nums; }
.tier-cell .tier { border: 0; padding: 0; font-size: 13px; }
/* max-width: none: Tabler's img { max-width: 100% } makes a table's auto layout count the icon as 0px wide, so the
   column came out an icon too narrow and the cell ran over the next one's padding */
.tier-icon { width: 30px; height: 30px; max-width: none; flex-shrink: 0; object-fit: contain; }
/* 전적 검색 card: the tier next to 카카오 */
.head-tier { gap: 4px; }
.head-tier .tier-icon { width: 26px; height: 26px; }
.head-tier .muted { font-size: 12px; }
/* 전적 검색 card: 시즌별 경쟁전, one chip per season under the name (player.js renderSeasons) */
.head-seasons { flex-basis: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.head-seasons[hidden], .head-seasons .btn[hidden] { display: none; }
.head-seasons-label { font-size: 12px; }
/* a row per ranked era: «S36~ 최고» · seasons; the seasons on cells of one width so the rows line up */
.head-seasons-list { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: start; }
.season-era-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 6px; }
.season-era-list .season-chip { justify-content: flex-start; overflow: hidden; }
.head-seasons-list > :nth-child(n + 3) { padding-top: 8px; border-top: 1px dashed var(--border); }
@media (max-width: 700px) {
  .head-seasons-list { grid-template-columns: minmax(0, 1fr); }
  .head-seasons-list > :nth-child(n + 3) { padding-top: 0; border-top: 0; }
  .head-seasons-list > .season-era-best:nth-child(n + 3) { padding-top: 8px; border-top: 1px dashed var(--border); }
}
.season-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 2px 9px 2px 7px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; white-space: nowrap; }
.season-chip .season-n { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 2px; }
.season-chip .tier-icon { width: 22px; height: 22px; }
.season-chip.tier-cell .tier { font-size: 12px; }
.season-chip.is-none, .season-chip.is-wait { color: var(--muted); }
/* the best season-best RP of the strip, and its season's chip */
.season-chip.is-best { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding-right: 11px; }
.season-chip.is-best .season-n { color: var(--accent); }
.season-chip.is-best-season { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.bar-cell { display: inline-flex; align-items: center; gap: 8px; vertical-align: top; }
.bar-cell .bar { width: 64px; height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.bar-cell .bar > span { display: block; height: 100%; border-radius: 4px; background: var(--muted); }
.bar-cell .bar.blue > span { background: #4d9de0; }
.bar-cell .bar.orange > span { background: #e2561c; }
.bar-cell > span:last-child { min-width: 34px; font-variant-numeric: tabular-nums; }
.kd-hot { color: var(--danger); font-weight: 800; }
.kd-high { color: var(--accent); font-weight: 700; }
.kd-mid { color: var(--text); }
.kd-low { color: var(--muted); }