/* 색·치수는 여기 :root 의 변수를 지난다. 날값은 :root 안에만 산다 — tools/web-tokens.py 가 센다.
   값은 web/index.html 의 사다리와 같다(둘이 갈리면 저쪽이 원문이다). */
:root {
  --screen: #F4F6F1;  --card: #FFFFFF;  --ink: #131A14;  --ink-muted: #646E61;
  --ink-absent: #9EA79A; --line: #E4E8DE; --rule: #D3DACE;
  --accent: #0B7C34;  --accent-soft: #E7EFE5;  --on-accent: #FFFFFF;
  --danger: #B42318;  --warn: #8A5A00;
  /* [hidden] 은 «언제나» 숨긴다 — .row·.seg 같은 display:flex 가 UA 의 display:none 을 이겨 hidden 속성이 «종이 위에서만» 숨기던 자리(1730 에서 띄워 보고 잡았다: 손님 선수 화면에 「시즌별 축」 고르개가 보였다). */
[hidden] { display: none !important; }

/* 카카오 브랜드 색 — 가이드 값이라 모드를 안 탄다(둘 다 같은 값). 로고 자산은 도형 574 대기 */
  --kakao-bg: #FEE500;  --kakao-ink: #191919;
  --shadow: 0 2px 10px rgba(13,31,18,.09);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;  --space-5: 24px;  --space-6: 32px;
  --radius-card: 14px;  --radius-control: 8px;  --radius-tile: 10px;
  --measure: 560px;  --wide: 1240px;
  --text-sm: 13px;  --text-base: 16px;  --text-lg: 20px;  --text-xl: 22px;
}
:root:not([data-theme="light"]) { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --screen: #0E1410; --card: #17201A; --ink: #E8EEE6; --ink-muted: #8E9A8B;
    --ink-absent: #5C6659; --line: #26302A; --rule: #2F3A33;
    --accent: #4FBE79; --accent-soft: #16301F; --on-accent: #0C130E;
    --danger: #F08A80; --warn: #E2B35C;
    --shadow: 0 2px 10px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  --screen: #0E1410; --card: #17201A; --ink: #E8EEE6; --ink-muted: #8E9A8B;
  --ink-absent: #5C6659; --line: #26302A; --rule: #2F3A33;
  --accent: #4FBE79; --accent-soft: #16301F; --on-accent: #0C130E;
  --danger: #F08A80; --warn: #E2B35C;
  --shadow: 0 2px 10px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--screen); color: var(--ink);
  font: var(--text-base)/1.6 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif;
}
.top {
  max-width: var(--measure); margin: 0 auto; padding: var(--space-5) var(--space-4) 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
}
.brand { font-weight: 700; color: var(--ink); text-decoration: none; }
#nav { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); color: var(--ink-muted); }
main { max-width: var(--measure); margin: 0 auto; padding: var(--space-4) var(--space-4) var(--space-6); }
/* 나란히 — «그 화면»만 넓게(1662). --measure 는 본문 글 폭이라 그대로. 🔴 중단점 둘 800·1200 은 me.js 의 WIDE 와 «같은 값» */
main.wide { max-width: var(--wide); }
.cols { display: grid; grid-template-columns: 1fr; gap: var(--space-3); align-items: start; }
.axis-head { font-size: var(--text-base); color: var(--ink); }
@media (min-width: 800px) { .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols .col:nth-child(3):last-child { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .cols.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cols.three .col:nth-child(3):last-child { grid-column: auto; } }
h1 { font-size: var(--text-xl); margin: 0 0 var(--space-4); }
h2 { font-size: var(--text-sm); margin: 0 0 var(--space-3); color: var(--ink-muted); font-weight: 600; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow); padding: var(--space-4); margin-bottom: var(--space-3);
}
.why { font-size: var(--text-sm); color: var(--ink-muted); margin: var(--space-2) 0 0; }
.bad { color: var(--danger); }
.warn { color: var(--warn); }
.hide { display: none; }
label.check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.dev { border-top: 1px dashed var(--rule); margin-top: var(--space-4); padding-top: var(--space-3); }
.row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
input[type=number] {
  font: inherit; padding: var(--space-2) var(--space-3); width: 120px;
  border: 1px solid var(--rule); border-radius: var(--radius-control); background: transparent; color: inherit;
}
button {
  font: inherit; padding: var(--space-2) var(--space-4); border-radius: var(--radius-control);
  border: 1px solid var(--rule); background: transparent; color: inherit; cursor: pointer;
}
button.go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.link { border: 0; padding: 0; color: var(--ink-muted); text-decoration: underline; }
.who { font-size: var(--text-lg); font-weight: 700; margin: 0; }
.axis { font-size: var(--text-sm); color: var(--ink-muted); margin: var(--space-1) 0 0; }
.big { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin: var(--space-3) 0 var(--space-2); }
.big div { background: var(--accent-soft); border-radius: var(--radius-tile); padding: var(--space-3) var(--space-1); text-align: center; }
.big b { display: block; font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.big span { font-size: var(--text-sm); color: var(--ink-muted); }
.big div.thin b { color: var(--ink-muted); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
td { padding: var(--space-2) var(--space-1); border-top: 1px solid var(--line); }
td:last-child { text-align: right; font-weight: 600; }
td.absent { color: var(--ink-absent); font-weight: 400; }

/* 소셜 단추 — 우리가 그리는 것(카카오·네이버). 구글은 GIS 가 그린다 */
.social { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; }
button.kakao {
  width: 280px; height: 44px; border: 0; border-radius: var(--radius-control);
  background: var(--kakao-bg); color: var(--kakao-ink); font-weight: 600;
}
button.kakao:disabled { opacity: .45; cursor: default; }

/* 기록 — 경기 목록·상세 */
#nav a { color: var(--ink-muted); text-decoration: none; }
.list { display: flex; flex-direction: column; gap: var(--space-2); }
a.game-row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); align-items: baseline;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow);
  padding: var(--space-3) var(--space-4); color: inherit; text-decoration: none;
}
.game-row .when { font-size: var(--text-sm); color: var(--ink-muted); }
.game-row .vs { font-weight: 700; }
.game-row .where { font-size: var(--text-sm); color: var(--ink-muted); grid-column: 1 / -1; }
.badge { font-size: var(--text-sm); color: var(--accent); background: var(--accent-soft); border-radius: var(--radius-control); padding: 0 var(--space-2); }
.badge.muted { color: var(--ink-muted); background: transparent; border: 1px solid var(--line); }
.notice { background: var(--accent-soft); border-radius: var(--radius-tile); padding: var(--space-3); font-size: var(--text-sm); white-space: pre-line; margin: 0 0 var(--space-3); }
.player { border-top: 1px solid var(--line); padding: var(--space-3) 0; }
.player:first-of-type { border-top: 0; }
.player .name { font-weight: 700; display: flex; gap: var(--space-2); align-items: baseline; }
.player .line { font-size: var(--text-sm); color: var(--ink-muted); margin: var(--space-1) 0 0; }
.player .pas { font-size: var(--text-sm); margin: var(--space-1) 0 0; font-variant-numeric: tabular-nums; }
.back { font-size: var(--text-sm); color: var(--ink-muted); text-decoration: none; display: inline-block; margin-bottom: var(--space-2); }
@media (min-width: 720px) { .list { display: grid; grid-template-columns: 1fr 1fr; } }

/* 만들기·입력 */
.row.between { justify-content: space-between; align-items: baseline; }
a.btn { display: inline-block; font-size: var(--text-sm); padding: var(--space-2) var(--space-3); border: 1px solid var(--rule);
        border-radius: var(--radius-control); color: inherit; text-decoration: none; }
a.btn.go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
label.field { display: block; font-size: var(--text-sm); color: var(--ink-muted); margin: var(--space-3) 0 var(--space-1); }
input[type=text], input[type=date], input[type=time], input[type=datetime-local], select {
  font: inherit; width: 100%; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--card); color: inherit;
}
.seg { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.seg label { border: 1px solid var(--rule); border-radius: var(--radius-control); padding: var(--space-1) var(--space-3); cursor: pointer; }
.seg input { display: none; }
.seg input:checked + span { color: var(--accent); font-weight: 700; }
.pa-row { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); align-items: center;
          border-top: 1px solid var(--line); padding: var(--space-3) 0; }
.pa-row .n { font-weight: 700; color: var(--ink-muted); }
.pa-row .ctl { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.pa-row select, .pa-row input[type=number] { width: auto; }
.pa-row .flags { display: flex; gap: var(--space-3); font-size: var(--text-sm); grid-column: 2; }
.pa-row .flags label { display: flex; gap: var(--space-1); align-items: center; }
.pa-row .flags label.off { color: var(--ink-absent); }
.extra { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-2); }
.extra label { font-size: var(--text-sm); color: var(--ink-muted); }
.extra input { width: 100%; }
.actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-4); }
@media (min-width: 720px) { .pa-row { grid-template-columns: auto 1fr auto; } .pa-row .flags { grid-column: auto; } }

/* 가입 */
.nums { display: flex; flex-wrap: wrap; gap: var(--space-1); font-variant-numeric: tabular-nums; }
.nums span { border: 1px solid var(--line); border-radius: var(--radius-control); padding: 0 var(--space-2); font-size: var(--text-sm); color: var(--ink-muted); }
.req { border-top: 1px solid var(--line); padding: var(--space-3) 0; }
.req .row { margin-top: var(--space-2); }
/* 알림함 · 공지 · 설정 */
.noti { display: block; border-top: 1px solid var(--line); padding: var(--space-3) 0; color: inherit; text-decoration: none; }
.noti.unread { font-weight: 700; }
.noti .kind { font-size: var(--text-sm); color: var(--ink-muted); }
.noti .stay { font-size: var(--text-sm); color: var(--warn); margin: var(--space-1) 0 0; }
.notice { border-top: 1px solid var(--line); padding: var(--space-3) 0; white-space: pre-line; }
.danger { color: var(--danger); }
button.danger { border-color: var(--danger); color: var(--danger); }
/* 일정·참불 */
.tally { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin: var(--space-3) 0; }
.tally div { background: var(--accent-soft); border-radius: var(--radius-tile); padding: var(--space-2); text-align: center; }
.tally b { display: block; font-size: var(--text-xl); }
.tally span { font-size: var(--text-sm); color: var(--ink-muted); }
.tally div.off { background: transparent; border: 1px solid var(--line); }
.seg label.on { color: var(--accent); font-weight: 700; border-color: var(--accent); }
.names { font-size: var(--text-sm); margin: var(--space-1) 0 0; }
.comment { border-top: 1px solid var(--line); padding: var(--space-2) 0; }
.comment .meta { font-size: var(--text-sm); color: var(--ink-muted); }
textarea { font: inherit; width: 100%; min-height: 64px; padding: var(--space-2) var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--card); color: inherit; }
/* 팀 */
table.players { font-size: var(--text-sm); }
table.players th { text-align: right; font-weight: 600; color: var(--ink-muted); padding: var(--space-1); border-bottom: 1px solid var(--line); }
table.players th:first-child, table.players td:first-child { text-align: left; }
table.players td { text-align: right; padding: var(--space-2) var(--space-1); font-weight: 400; }
table.players td:last-child { font-weight: 400; }
table.players tr.thin td { color: var(--ink-muted); }
table.players a { color: var(--accent); }   /* 링크 기본색(브라우저 파랑)은 토큰이 아니다 */
.member { display: flex; gap: var(--space-2); align-items: baseline; border-top: 1px solid var(--line); padding: var(--space-2) 0; }
.member:first-child { border-top: 0; }
.member .num { min-width: 2.2em; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.member .role { margin-left: auto; font-size: var(--text-sm); color: var(--ink-muted); }
.member .ctl { display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center; width: 100%; }
.member .ctl input.jersey { width: 72px; }
.member { flex-wrap: wrap; }
.emblem { width: 40px; height: 40px; border-radius: var(--radius-control); object-fit: cover; vertical-align: middle; margin-right: var(--space-2); }
input[type=file] { font: inherit; font-size: var(--text-sm); max-width: 100%; }
.wrap { overflow-x: auto; }

/* 추이 — SVG 손글씨. 색은 변수로만(날값 자) */
svg.chart { width: 100%; height: auto; display: block; }
svg.chart .grid { stroke: var(--line); stroke-width: 1; }
svg.chart .axis { fill: var(--ink-muted); font-size: 11px; }
svg.chart .cum { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
svg.chart .rec { fill: none; stroke: var(--ink-muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
svg.chart .dot { fill: var(--card); stroke: var(--accent); stroke-width: 2; }
svg.chart .dot.zero { fill: var(--accent); }
svg.chart .gap { fill: var(--ink-absent); font-size: 11px; }
svg.chart .val { fill: var(--ink); font-size: 12px; font-weight: 600; }
svg.chart .delta-up { fill: var(--accent); font-size: 11px; }
/* 내려간 변화량은 «회색»이다(iOS DeltaBadge 규약 · 1700) — ⛔ --danger 는 「네가 고쳐야 한다」(오류·위험 문구·지우기 단추)에만. 나쁜 성적은 고칠 일이 아니다. */
svg.chart .delta-down { fill: var(--ink-muted); font-size: 11px; }
.legend { display: flex; gap: var(--space-3); font-size: var(--text-sm); color: var(--ink-muted); flex-wrap: wrap; }
.legend i { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--accent); vertical-align: middle; margin-right: 4px; }
.legend i.rec { border-top: 2px dashed var(--ink-muted); }
/* 별점 추이 막대(V46) — 5점 만점의 몇 할인가. 너비만 화면이 준다. */
.meter { flex: 1; height: var(--space-2); margin: 0 var(--space-3); background: var(--line); border-radius: var(--radius-control); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); }

/* 네트워크·서버 실패 띠(ALL-1761) — 위쪽 한 곳에서 원인과 「다시 시도」. */
.netbar { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; max-width: var(--measure); margin: var(--space-3) auto 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--danger); border-radius: var(--radius-control); background: var(--card); color: var(--ink); font-size: var(--text-sm); }
.netbar.hide { display: none; }

/* ── 공용 부품(ALL-1760 · ui.js) ─────────────────────────────
   🔴 색·간격은 전부 위 :root 토큰에서 온다. ⛔ 날값을 쓰지 않는다(web-checks 의 날값 자가 0 을 지킨다). */

/* 빈 상태·오류 — AOS Empty · iOS ContentUnavailableView 와 같은 자리 */
.empty { text-align: center; padding: var(--space-5) var(--space-4); color: var(--ink-muted); }
.empty-title { font-size: var(--text-base); color: var(--ink); margin: 0; font-weight: 600; }
.empty .why { margin-top: var(--space-2); }
.empty button { margin-top: var(--space-3); }

/* 읽는 중 — ⚠️ 글자를 같이 둔다. 도는 그림만 두면 「멈춘 것」으로 보인다 */
.loading { display: flex; gap: var(--space-2); align-items: center; justify-content: center;
  padding: var(--space-5) var(--space-4); color: var(--ink-muted); font-size: var(--text-sm); }
.spin { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ⚠️ 움직임을 줄이라고 한 사람에게는 안 돌린다 — 대신 흐리게 두어 「도는 중」임이 남는다 */
@media (prefers-reduced-motion: reduce) { .spin { animation: none; opacity: 0.5; } }

/* 누를 수 있는 줄 — 🔴 «링크처럼» 안 보이게 한다.
   ⛔ 밑줄·파랑을 그대로 두면 iOS `FieldRow`·AOS `Item` 과 «다른 것»이 된다(ALL-1760 — 띄워서 잡았다). */
a.row { text-decoration: none; color: inherit; justify-content: space-between; }
a.row:hover { background: var(--accent-soft); }
a.row b { font-weight: 600; }
a.row [aria-hidden] { color: var(--ink-muted); }
/* 🔴 «부품이 낸» 줄(`.row.kv` — ui.js 의 row)에만 건다.
   ⛔ `.card > .row` 에 걸었더니 «단추 묶음»까지 양끝으로 벌어졌다(ALL-1760 — 띄워서 잡았다).
   ★ 다른 화면들이 이미 `.row` 를 flex gap 으로 쓴다 — 그 줄에 안 닿아야 한다. */
.row.kv { padding: var(--space-2) 0; justify-content: space-between; }
.row.kv + .row.kv { border-top: 1px solid var(--line); }

/* 한 줄 알림 — 화면 «안»에 남는다. 사라지는 띠는 #netbar 다 */
.toast { font-size: var(--text-sm); color: var(--ink); background: var(--accent-soft);
  border-radius: var(--radius-card); padding: var(--space-2) var(--space-3); margin: var(--space-3) 0 0; }
.toast.bad { background: var(--card); color: var(--danger); border: 1px solid var(--danger); }