/* 클로드 디자인 시안(STATPLAY 기록.dc.html)의 값을 그대로 옮겼다.
   각진 사각형(라운드 없음), 1px 테두리로 구분, 숫자는 IBM Plex Mono. */
:root {
  --page-width: 1216px;
  --bg: #10151c;
  --panel: #10151c;
  --bar: #10151c;
  --chip: #19212b;
  --line: #2a3d57;
  --line-soft: #1b2c44;
  --line-mid: #1e2b3f;
  --fg: #fff;
  --body: #dfe8f2;
  --mute: #8fa3ba;
  --dim: #6f8299;
  --amber: #e5b45a;
  --sans: Pretendard, system-ui, sans-serif;
  --mono: Pretendard, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-weight: 400;
}
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input { font-family: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--mute); }
/* 시안의 자간 2px 는 라틴 글자 기준이다. 한글에 그대로 주면 낱자가 벌어져 읽기 나쁘다. */
.label { font: 400 11px var(--mono); color: var(--mute); letter-spacing: .5px; margin: 0 0 12px; }
.label.spaced { margin-top: 38px; }

/* ── 상단 바 (결과 화면에서만 보인다) ───────────────────── */
/* 띠는 화면을 가로지르되 안의 내용은 아래 결과와 같은 폭으로 맞춘다. */
.topbar {
  background: var(--bar);
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; z-index: 20;
}
.topbar-inner {
  display: flex; align-items: center; gap: 14px;
  width: min(var(--page-width), 100%); margin: 0 auto; padding: 16px 48px;
}
body[data-view="home"] .topbar { display: none; }
.topbar .brand {
  font: 700 14px var(--sans); color: var(--fg);
  letter-spacing: 3px; white-space: nowrap;
}
.topbar .search-slot { flex: 1; min-width: 0; }
/* 상단 바에서는 검색창과 같은 높이로 선다. */
.ghost {
  font: 500 12px var(--sans); color: var(--mute);
  border: 1px solid var(--line); padding: 8px 14px; white-space: nowrap;
}
.topbar-inner .ghost { align-self: stretch; padding: 0 16px; }
.ghost:hover { color: var(--body); border-color: var(--mute); }

/* ── 검색 폼 ─────────────────────────────────────────── */
#search-form { display: flex; border: 1px solid var(--line); background: var(--bar); }
#search-form input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--fg);
}
#search-form input::placeholder { color: var(--dim); }
#search-form button {
  font: 700 12px var(--sans); color: var(--panel); background: var(--amber);
  padding: 0 20px; display: flex; align-items: center;
}
#search-form button:disabled { opacity: .45; cursor: default; }
#search-form input:focus { outline: none; }
#search-form:focus-within { border-color: var(--amber); }
/* 첫 화면은 크게, 결과 화면 상단 바에서는 작게 */
#search-home #search-form input { font: 400 22px var(--sans); padding: 20px 22px; }
#search-home #search-form button { font: 700 15px var(--sans); padding: 0 34px; }
#search-bar #search-form input { font: 400 15px var(--sans); padding: 11px 14px; }

/* ── 화면 판 ─────────────────────────────────────────── */
/* 시안은 1440px 고정이었다. 그대로 두면 넓은 화면에서 양옆이 배경색으로 비어
   화면이 잘린 것처럼 보인다. 판은 화면을 채우고, 안의 내용만 폭을 맞춘다. */
.screen {
  width: 100%;
  margin: 0 auto;
  background: var(--panel);
  min-height: 100vh;
}
/* 결과·상태·선택지 모두 같은 폭으로 맞춘다(표 기준 1120px). */
:root { --content: 1120px; }
body[data-view="result"] .screen { min-height: calc(100vh - 57px); }
#home { padding-bottom: 60px; }
.home-title {
  display: flex; align-items: center; justify-content: space-between;
  width: min(var(--page-width), 100%); margin: 0 auto; padding: 20px 48px 18px;
  border-bottom: 3px solid var(--amber);
}
.brand-lg { font: 700 20px var(--sans); color: var(--fg); letter-spacing: 5px; }
#today { font-size: 12px; }
.home-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px;
  width: min(var(--page-width), 100%); margin: 0 auto; padding: 56px 48px 0;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  font: 500 14px var(--sans); color: var(--body);
  border: 1px solid var(--line); background: var(--chip); padding: 11px 16px;
}
.chips button:hover { border-color: var(--amber); color: var(--fg); }
.supported { margin-top: 56px; border-top: 1px solid var(--line-soft); padding-top: 18px; }
.supported .label { margin-bottom: 6px; }
.supported-list { font: 400 14px/1.9 var(--sans); color: var(--mute); margin: 0; }
.box { border: 1px solid var(--line); }
#history .history-item {
  display: flex; width: 100%; text-align: left;
  padding: 13px 14px; border-bottom: 1px solid var(--line-soft);
  font: 500 14px var(--sans); color: var(--body);
}
#history .history-item:last-child { border-bottom: 0; }
#history .history-item:hover { background: var(--chip); color: var(--fg); }
#history .empty-note { font: 400 13px var(--sans); color: var(--dim); padding: 13px 14px; margin: 0; }

/* ── 결과 화면 ───────────────────────────────────────── */
#result { width: min(var(--page-width), 100%); margin: 0 auto; padding: 34px 48px 60px; }
#error {
  font: 500 14px var(--sans); color: var(--amber);
  border: 1px solid var(--amber); padding: 14px 18px; margin-bottom: 24px;
}
/* 제목줄을 표와 같은 폭으로 묶어 "방송용 보기"가 표 오른쪽 끝에 맞게 선다. */
.result-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  max-width: var(--content); padding-bottom: 24px; border-bottom: 1px solid var(--line-soft);
}
.result-head > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.meta, .note { max-width: var(--content); }
.result-head .title {
  font: 700 32px var(--sans); color: var(--fg);
  letter-spacing: -1px; line-height: 1.4; margin: 0;
}
.result-head .sub { font: 400 16px var(--sans); color: var(--mute); margin: 6px 0 0; }
.broadcast {
  font: 500 13px var(--sans); color: var(--body);
  border: 1px solid var(--line); padding: 11px 16px; white-space: nowrap;
}
.broadcast:hover { background: var(--amber); color: var(--panel); }
.broadcast:disabled { opacity: .5; cursor: default; }

/* 결과 위 단추들. 이미지 크기는 눌렀을 때만 펼쳐 화면을 늘어놓지 않는다. */
.result-actions { display: flex; align-items: stretch; gap: 8px; flex: none; }
.save-wrap { position: relative; }
.save-toggle { height: 100%; }
.save-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  display: flex; flex-direction: column; min-width: 190px;
  background: var(--bar); border: 1px solid var(--line);
}
.save-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 14px; text-align: left;
  font: 500 14px var(--sans); color: var(--body);
  border-bottom: 1px solid var(--line-soft);
}
.save-item:last-child { border-bottom: 0; }
.save-item:hover { background: var(--chip); color: var(--fg); }
.save-size { font-size: 11px; color: var(--dim); }
.meta { font: 400 13px var(--sans); color: var(--mute); padding: 18px 0; margin: 0; }
.note { font: 400 12px var(--sans); color: var(--mute); padding-top: 12px; margin: 0; }

/* 순위·목록 표 */
.table-box { border: 1px solid var(--line); max-width: var(--content); overflow-x: auto; }
.record-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.record-table thead th {
  font: 700 13px var(--sans); color: var(--mute); background: var(--bar);
  padding: 14px 18px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line);
}
.record-table thead th.text { text-align: left; }
.record-table thead th:first-child { padding-left: 20px; }
.record-table thead th:last-child { padding-right: 20px; }
.record-table tbody td {
  padding: 17px 18px; border-bottom: 1px solid var(--line-soft);
  text-align: right; font: 400 17px var(--mono); color: var(--body);
  white-space: nowrap;
}
.record-table tbody tr:last-child td { border-bottom: 0; }
.record-table tbody td:first-child { padding-left: 20px; }
.record-table tbody td:last-child { padding-right: 20px; }
.record-table td.text { text-align: left; font: 400 15px var(--sans); color: var(--mute); }
.record-table td.name { font: 700 18px var(--sans); color: var(--fg); }
.record-table td.rank { text-align: left; font: 500 18px var(--mono); color: var(--dim); }
.record-table td.hero { font: 600 22px var(--mono); color: var(--fg); }
.record-table tbody tr.lead { background: var(--chip); }
.record-table tbody tr.lead td.rank,
.record-table tbody tr.lead td.hero { color: var(--amber); }

/* 선수 기록: 핵심 수치를 먼저 읽고, 세부 기록은 일정한 간격으로 비교한다. */
.card-row { max-width: var(--content); }
.hero-box {
  display: flex; align-items: baseline; gap: 32px;
  padding: 12px 0 24px; margin-bottom: 16px;
}
.hero-box .hero-label { font: 700 18px var(--sans); color: var(--body); }
.hero-box .hero-value {
  font: 600 64px/1.1 var(--mono); color: var(--amber);
  font-variant-numeric: tabular-nums; letter-spacing: -2px;
  overflow-wrap: anywhere; min-width: 0;
}
.stats-title { font: 500 14px var(--sans); color: var(--mute); margin: 0 0 14px; }
.stat-grid {
  display: flex; flex-wrap: wrap; margin: 0;
  border-top: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.stat-grid .cell {
  flex: 1 1 25%; min-width: 0; padding: 20px 24px;
  border-bottom: 1px solid var(--line-soft);
}
.stat-grid dt { font: 700 15px var(--sans); color: var(--body); margin-bottom: 8px; }
.stat-grid dd {
  font: 500 28px/1.25 var(--mono); color: var(--fg);
  margin: 0; overflow-wrap: anywhere;
}

/* 동명이인 선택 */
.pick-lead { font: 400 12px var(--mono); color: var(--mute); letter-spacing: .5px; }
.pick-title { font: 900 40px var(--sans); color: var(--fg); margin: 8px 0 28px; }
.pick-box { border: 1px solid var(--line); max-width: var(--content); }
/* 시안에는 포지션 칸이 있었지만 서버가 포지션을 주지 않아 뺐다. 남은 칸을 그만큼 좁힌다. */
.pick-option {
  display: grid; grid-template-columns: minmax(0, 1fr) 110px 150px 130px;
  align-items: center; width: 100%; text-align: left;
  padding: 22px 24px; border-bottom: 1px solid var(--line-soft);
}
.pick-box .pick-option:last-child { border-bottom: 0; }
.pick-option:hover { background: var(--chip); }
.pick-option.active { background: var(--chip); box-shadow: inset 3px 0 0 var(--amber); }
.pick-option .p-name { font: 700 26px var(--sans); color: var(--fg); }
.pick-option .p-team { font: 500 17px var(--sans); color: var(--amber); }
.pick-option .p-years { font: 400 17px var(--mono); color: var(--body); }
.pick-option .p-no { font: 400 14px var(--mono); color: var(--mute); text-align: right; }
.pick-actions { display: flex; align-items: center; gap: 16px; padding-top: 16px; }
.pick-submit {
  font: 700 14px var(--sans); color: var(--panel); background: var(--amber); padding: 13px 22px;
}
.pick-submit:disabled { opacity: .4; cursor: default; }
.pick-foot { font: 400 13px var(--sans); color: var(--mute); padding-top: 14px; margin: 0; }

/* 상태 — 검색 중 / 결과 없음 / 문장 답변 */
.state-box { border: 1px solid var(--line); padding: 30px 32px 34px; max-width: var(--content); }
.state-box .label { margin-bottom: 10px; }
.state-box h2 { font: 900 30px var(--sans); color: var(--fg); margin: 0 0 20px; }
.state-q { font: 400 16px/1.8 var(--sans); color: var(--mute); margin: 0 0 14px; }
.bar { height: 8px; background: var(--bar); border: 1px solid var(--line); overflow: hidden; margin-bottom: 22px; }
.bar i { display: block; height: 100%; width: 34%; background: var(--amber); animation: sweep 1.5s ease-in-out infinite; }
@keyframes sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(330%); } }
@media (prefers-reduced-motion: reduce) { .bar i { animation: none; width: 100%; opacity: .4; } }
.steps { list-style: none; margin: 0; padding: 0; font: 400 15px/2.1 var(--mono); color: var(--body); }
.steps li { display: flex; justify-content: space-between; gap: 16px; }
.steps li span:last-child { color: var(--amber); }
.steps li.now span:last-child { color: var(--fg); }
.state-foot {
  font: 400 13px var(--sans); color: var(--mute);
  border-top: 1px solid var(--line-soft); margin-top: 20px; padding-top: 16px;
}
.link { font: inherit; color: var(--amber); text-decoration: underline; padding: 0; }
.empty-actions { display: flex; align-items: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.deep-button { font: 700 14px var(--sans); color: var(--panel); background: var(--amber); padding: 13px 22px; }
.deep-button:disabled { opacity: .45; cursor: default; }
.empty-actions p { font: 400 12px var(--sans); color: var(--mute); margin: 0; }
.answer { border: 1px solid var(--line); padding: 30px 32px; max-width: var(--content); }
.answer p { font: 400 17px/1.9 var(--sans); color: var(--body); margin: 0 0 14px; white-space: pre-line; }
.answer p:last-child { margin-bottom: 0; }
.answer-table { margin-top: 26px; }

@media (max-width: 1180px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .result-head .title, .pick-title { font-size: 32px; }
}
@media (max-width: 760px) {
  .home-title, .home-grid, #result { padding-left: 20px; padding-right: 20px; }
  .topbar-inner { padding: 14px 20px; flex-wrap: wrap; gap: 12px; }
  .topbar .brand { flex: 1; font-size: 12px; letter-spacing: 2px; }
  .topbar .search-slot { order: 3; flex: 1 0 100%; }
  .topbar-inner .ghost { padding: 8px 12px; }
  .result-head { align-items: flex-start; flex-direction: column; gap: 18px; }
  .result-head .title { font-size: 26px; }
  .result-head .sub { font-size: 13px; line-height: 1.7; }
  .hero-box { padding: 12px 0 24px; margin-bottom: 16px; }
  .hero-box .hero-value { font-size: 48px; }
  .stat-grid .cell { flex-basis: 50%; padding: 18px 12px; }
  .stat-grid dd { font-size: 26px; }
  .record-table tbody td { padding: 15px 14px; }
  .state-box, .answer { padding: 24px 20px; }
  .state-box h2 { font-size: 24px; overflow-wrap: anywhere; }
  .steps { font-family: var(--sans); font-size: 13px; }
  .pick-option { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .pick-option .p-no { grid-column: 2; }
}

button:focus-visible, .table-box:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 4px;
}
.record-table tbody tr:hover { background: var(--chip); }
.note { line-height: 1.8; }
.answer { margin-top: 24px; }
.answer p { max-width: 75ch; overflow-wrap: anywhere; }

.brand, .brand-lg { display: flex; align-items: center; gap: 10px; }
.brand img { width: 116px; height: auto; }
.brand-lg img { width: 180px; height: auto; }
.brand span, .brand-lg span { letter-spacing: 0; }

.broadcast-control { display: flex; align-items: stretch; gap: 8px; }
.template-label { display: flex; flex-direction: column; gap: 4px; color: var(--dim); font-size: 11px; }
.template-select { min-width: 120px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--fg); font: inherit; font-size: 13px; }
.template-select:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.result-actions { flex-wrap: wrap; align-items: center; }
@media (max-width: 640px) {
  .result-head { flex-wrap: wrap; }
  .result-actions { width: 100%; }
  .broadcast-control { flex-wrap: wrap; }
}

/* 조회 결과의 템플릿 선택과 실행 버튼을 같은 기준선에 맞춘다. */
.broadcast-control{align-items:flex-end;max-width:100%;gap:10px}
.template-label{font-size:12px;color:var(--mute);min-width:0;gap:7px}
.template-select{height:42px;max-width:320px;width:100%;font:400 13px var(--sans);padding:10px 32px 10px 12px;border-radius:5px}
.broadcast-control .broadcast{min-height:42px;white-space:nowrap;border-radius:5px}
a.ghost{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-height:36px;border-radius:4px}
a:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media(max-width:640px){.broadcast-control{width:100%}.template-label{flex:1}.template-select{max-width:100%}}