:root {
  --bg: #ffffff;
  --bg-2: #f7f9fc;
  --bg-3: #eef2f7;
  --line: #dde4ee;
  --ink: #16202c;
  --ink-2: #55657a;
  --ink-3: #8593a5;
  --accent: #1668d6;
  --accent-soft: #e7effb;
  --bad: #c53030;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(22,32,44,.06), 0 1px 8px rgba(22,32,44,.04);
}
* { box-sizing: border-box; }
/* .row 처럼 display 를 지정한 요소에도 hidden 이 먹도록 */
[hidden] { display: none !important; }
html, body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Pretendard","Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",system-ui,sans-serif;
  font-size: 15px; line-height: 1.5;
}
h1 { font-size: 1.05rem; margin: 0; }
h2 { font-size: 1.1rem; margin: 0 0 .4em; }
h3 { font-size: 1rem; margin: 0 0 .4em; }
a { color: var(--accent); }

.topbar {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px); z-index: 10;
}
.spacer { flex: 1; }
/* 데스크톱에서는 가로를 넓게 쓴다. 다만 **글줄이 긴 문서**는 눈이 따라가기
   힘들어져서 따로 좁힌다(.doc). */
.app { max-width: 1240px; margin: 0 auto; padding: 20px 22px; }
.app--wide { max-width: 1560px; }
.doc { max-width: 820px; }
.footer { border-top: 1px solid var(--line); padding: 18px; text-align: center; margin-top: 30px; }

.card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.muted { color: var(--ink-2); font-size: .88rem; margin: 0 0 .5em; }
.small { font-size: .8rem; }
.warn { color: var(--bad); }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.row > * { min-width: 0; }
label { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: .86rem; }
input, select {
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; font: inherit; max-width: 100%; min-width: 0;
}
.btn {
  background: var(--bg-3); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 14px; cursor: pointer; font: inherit; font-weight: 600;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { color: #fff; filter: brightness(1.06); }
.btn--ghost { background: transparent; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.results, #identities { display: grid; gap: 8px; margin-top: 10px; }
.cand, .src {
  /* 펼쳐지는 예약 현황(.slots)이 제 줄을 차지하도록 wrap 은 항상 켠다.
     예전엔 모바일 폭에서만 켜져 있어서 데스크톱에서 같은 줄로 밀려 들어갔다. */
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.src { display: block; }

.career { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.career:first-child { border-top: 0; margin-top: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px,1fr)); gap: 8px; margin: 10px 0; }
.stat { background: var(--bg-3); border-radius: 10px; padding: 8px 10px; }
.stat b { display: block; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.stat span { color: var(--ink-2); font-size: .76rem; }

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { border-collapse: collapse; width: 100%; font-size: .86rem; margin-top: 8px; }
table.data th, table.data td {
  padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.data th { color: var(--ink-2); font-weight: 600; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .app { padding: 10px 12px 14px; }
  .card { padding: 12px; margin-bottom: 10px; }
  label { flex: 1 1 100%; }
  label input, label select { flex: 1; }
}

/* 수동 연결 */
.manual { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; }
.manual summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.manual summary:hover { color: var(--accent); }

/* 문서 페이지 */
.doc h3 { margin-top: 1.4em; }
.doc ul, .doc ol { padding-left: 1.2em; color: var(--ink); }
.doc li { margin: .25em 0; }
.doc mark { background: #fff3cd; padding: 0 3px; border-radius: 3px; }
.notice { background: var(--accent-soft); border-left: 3px solid var(--accent); padding: 10px 12px; border-radius: 6px; margin: 0; }
.highlight { background: #eefaf3; border-left: 3px solid #12805c; padding: 10px 12px; border-radius: 6px; }
.doc table.data th { white-space: nowrap; }
.doc table.data td { white-space: normal; }

/* 다중 선택 칩 — 지역/팀 */
.field { margin: 12px 0; }
.field__label { color: var(--ink-2); font-size: .86rem; margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chip-check {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px 5px 9px; cursor: pointer; user-select: none;
  color: var(--ink); font-size: .86rem; line-height: 1.3;
}
.chip-check:hover { border-color: var(--accent); }
.chip-check input { accent-color: var(--accent); margin: 0; width: 15px; height: 15px; }
.chip-check small { color: var(--ink-3); font-size: .72rem; }
.chip-check:has(input:checked) {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
.chip-check:has(input:checked) small { color: var(--accent); }

/* 접히는 섹션 (회원가입·소스) */
details > summary { cursor: pointer; }
details > summary:hover { color: var(--accent); }
#member-box[open] > summary, #member-box > summary { margin-bottom: .4em; }

@media (max-width: 640px) {
  .chip-check { flex: 0 0 auto; }
}

/* 사이트별 팀 묶음 */
.site-group { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.site-group:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.site-group__head { color: var(--ink); font-size: .9rem; margin-bottom: 2px; }

/* 고르기 목록의 프로필 사진 — 원본을 그대로 걸고 저장하지 않는다 */
.cand__photo {
  width: 52px; height: 52px; border-radius: 10px; object-fit: cover;
  background: var(--bg-3); flex: 0 0 auto;
}
.cand__body { flex: 1; min-width: 0; }

/* 경기 아래 붙는 이닝별 타석 결과 */
.pa-row > td { border-top: 0; padding: 0 6px 7px; }
.pa-list { display: flex; flex-wrap: wrap; gap: 4px; }
.pa {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 1px 7px; font-size: .76rem; color: var(--ink-2);
}
.pa b { color: var(--ink-3); font-weight: 600; margin-right: 4px; }

.foldbtns { display: flex; gap: 4px; }
.foldbtns .btn { padding: 5px 9px; font-size: .8rem; }

/* 연도 머리 요약 — 펼치지 않아도 보이는 부분이라 summary 안에 들어간다 */
.yrwrap { margin: 6px 0 2px; }
.yr { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; }
.yr__tit { flex: 0 0 42px; padding-top: 6px; }
.stats--mini {
  margin: 0; flex: 1 1 auto; min-width: 0; gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
}
.stats--mini .stat { padding: 5px 7px; }
.stats--mini .stat b { font-size: .98rem; }
.stats--mini .stat span { font-size: .7rem; }
.poslist { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 auto; min-width: 0; }
.pos {
  background: var(--bg-3); border-radius: 999px; padding: 3px 9px;
  font-size: .78rem; color: var(--ink-2);
}
.pos b { font-variant-numeric: tabular-nums; margin-right: 4px; color: var(--ink); }

@media (max-width: 640px) {
  .yr { flex-direction: column; gap: 3px; }
  .yr__tit { flex: none; padding-top: 0; }
}

/* 팀 → 시즌 → 경기 */
details.team {
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  padding: 8px 12px; margin: 8px 0;
}
details.team > summary { font-size: .95rem; padding: 3px 0; }
/* 팀·연도 머리의 요약은 표 형태(.yrwrap)로 바뀌었다. .sum 은 합계만 있는
   해(totalsBlock)에서 아직 쓰인다 — 거기는 경기별로 내려갈 수가 없다. */
details.team > summary { padding-bottom: 2px; }
details.team > summary .sum { color: var(--ink-2); font-size: .82rem; margin-left: 8px; }
details.season {
  border-top: 1px solid var(--line); padding: 6px 0 6px 10px; margin-top: 6px;
}
details.season > summary { color: var(--ink); font-size: .88rem; }
/* 시즌 머리 안의 요약은 팀 머리보다 한 단 작게 — 계층이 보이게 */
details.season .yrwrap { margin-top: 4px; }
details.season .stats--mini .stat b { font-size: .9rem; }
.season__body { padding: 6px 0 4px; }
a.ext { font-size: .78rem; }
a.ext::after { content: " ↗"; }
table.data.games { font-size: .82rem; }
table.data.games td { padding: 4px 8px; }

@media (max-width: 640px) {
}

/* 연도별 / 팀별 전환 */
.tabs { display: flex; gap: 6px; margin: 10px 0 4px; }
.tab {
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 14px; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--ink-2); font-size: .86rem;
}
.tab:hover { border-color: var(--accent); color: var(--accent); }
.tab.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* 통계 / 경기 기록 — 화면을 가르는 큰 탭이라 조금 더 크게 잡는다 */
.tabs--pane { margin: 12px 0 10px; border-bottom: 1px solid var(--line); gap: 2px; }
.tabs--pane .tab {
  border: 0; border-radius: 8px 8px 0 0; padding: 8px 16px; font-size: .92rem;
  margin-bottom: -1px; border-bottom: 2px solid transparent;
}
.tabs--pane .tab.is-on {
  background: none; color: var(--accent); border-bottom-color: var(--accent);
}
.tabs--pane .tab:hover { color: var(--accent); }

.links { font-size: .8rem; margin-bottom: 6px; }

/* 타자/투수 · 연도별/팀별 버튼 줄 */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 4px; }
.toolbar .tabs { margin: 0; }
.tabs--kind .tab { font-weight: 700; }
.tab:disabled { opacity: .4; cursor: not-allowed; }
.tab:disabled:hover { border-color: var(--line); color: var(--ink-2); }

/* 주소로 바로 찾기 */
label.grow { flex: 1 1 320px; }
label.grow input { flex: 1; }
#link-box code { font-size: .78rem; background: var(--bg-3); padding: 1px 5px; border-radius: 4px; }

/* 팀 칩에 리그 이름이 길게 붙는 경우가 있다 (야구인은 참여리그를 함께 보여 준다) */
.chip-check { max-width: 100%; flex-wrap: wrap; }
.chip-check > span, .chip-check > small { min-width: 0; overflow-wrap: anywhere; }

/* 포지션별 · 타순별 요약 */
.split { margin: 8px 0 10px; }
.split__title { font-weight: 600; margin-bottom: 2px; }

/* 조회 전 동의 */
.consent {
  display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 4px;
  padding: 10px 12px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; color: var(--ink); font-size: .84rem; line-height: 1.5;
  cursor: pointer;
}
.consent input { margin-top: 2px; accent-color: var(--accent); flex: 0 0 auto; }
.consent:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* 여러 페이지 공통 — 상단 메뉴 */
.topbar .brand { font-weight: 700; color: var(--ink); text-decoration: none; font-size: 1.02rem; }
/* 상단 오른쪽: 이름은 계정으로 가는 링크, 그 옆이 로그아웃 */
.who { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.nav { display: flex; gap: 4px; }
.nav a {
  color: var(--ink-2); text-decoration: none; font-size: .88rem; font-weight: 600;
  padding: 5px 10px; border-radius: 8px;
}
.nav a:hover { background: var(--bg-3); color: var(--accent); }
.nav a.is-on { background: var(--accent-soft); color: var(--accent); }

/* 랜딩 */
.hero { padding: 28px 4px 8px; }
.hero h2 { font-size: 1.5rem; margin-bottom: .3em; }
.hero p { color: var(--ink-2); max-width: 46em; }
.steps { padding-left: 1.2em; color: var(--ink); }
.steps li { margin: .5em 0; }
.steps b { display: block; }
.ad-slot { margin: 14px 0; min-height: 0; }

@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; gap: 6px 10px; }
  .hero { padding-top: 16px; }
  .hero h2 { font-size: 1.25rem; }
}

/* 시설 지도 — 목록과 같은 자리에서 전환한다 */
#venue-map {
  height: clamp(320px, 58vh, 640px); border-radius: 12px;
  border: 1px solid var(--line); margin: 8px 0 4px;
}
#map-note:empty { display: none; }
.mapcard { padding: 8px 10px; font-size: .82rem; line-height: 1.5; min-width: 160px; }
.mapcard b { display: block; }
.mapcard__kind { color: var(--accent); font-size: .74rem; }
.mapcard__addr { color: var(--ink-2); }

/* 야구 시설 */
.tag { font-size: .72rem; padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
.tag--on { background: #eefaf3; color: #12805c; border: 1px solid #b7e3ce; }
.tag--off { background: var(--bg-3); color: var(--ink-3); border: 1px solid var(--line); }
.tag--kind { background: var(--accent-soft); color: var(--accent); border: 1px solid #c5d9f5; }

/* 예약 현황 — 월 달력으로 보고, 날짜를 고르면 그 날 시간대가 아래에 펼쳐진다 */
.cal__nav { justify-content: space-between; margin: 0 0 8px; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__w { text-align: center; font-size: .76rem; color: var(--ink-3); padding: 2px 0; }
.cal__w:first-child { color: #c53030; }
.cal__w:last-child { color: var(--accent); }
.cal__d {
  aspect-ratio: 1 / 1; min-height: 34px; padding: 0;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font: inherit; font-size: .85rem; font-variant-numeric: tabular-nums;
  color: var(--ink-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cal__d.is-pad { border: 0; background: none; cursor: default; }
.cal__d.is-none { background: var(--bg-3); color: var(--ink-3); cursor: default; }
.cal__d.is-open { background: #eefaf3; border-color: #b7e3ce; color: #12805c; font-weight: 700; }
.cal__d.is-closed { background: var(--bg-3); color: var(--ink-3); text-decoration: line-through; }
.cal__d.is-today { box-shadow: inset 0 0 0 2px var(--accent-soft); }
.cal__d.is-sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal__d:disabled { cursor: default; }

.cal__legend { display: flex; align-items: center; gap: 5px; margin-top: 8px; }
.cal__legend .cal__key + span { margin-right: 6px; }
.cal__key {
  width: 12px; height: 12px; border-radius: 3px; display: inline-block;
  border: 1px solid var(--line);
}
.cal__key.is-open { background: #eefaf3; border-color: #b7e3ce; }
.cal__key.is-closed, .cal__key.is-none { background: var(--bg-3); }

.cal__day { flex: 1 1 100%; margin-top: 10px; }
.cal__daytit { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }

.slots { flex: 1 1 100%; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.slots__nav { justify-content: space-between; margin: 0 0 8px; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.slot {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px; font-size: .84rem;
}
.slot b { font-variant-numeric: tabular-nums; }
.slot--open { background: #eefaf3; border-color: #b7e3ce; }
.slot--open span { color: #12805c; font-weight: 600; }
.slot--full { background: #fff8e6; border-color: #f0dca8; }
.slot--closed { background: var(--bg-3); color: var(--ink-3); }

/* ------------------------------------------------------------------ 게시판 */
.board {
  display: grid; grid-template-columns: 236px minmax(0, 1fr);
  gap: 18px; align-items: start;
}
.board__side { display: grid; gap: 12px; position: sticky; top: 72px; }
.board__main { min-width: 0; }
.card--tight { padding: 12px 14px; }

.side__title {
  font-size: .78rem; color: var(--ink-3); font-weight: 700;
  margin: 10px 0 5px; letter-spacing: .02em;
}
.side__title:first-child { margin-top: 0; }
.side__list { display: grid; gap: 2px; }
.side__item {
  text-align: left; background: none; border: 0; font: inherit;
  color: var(--ink-2); padding: 7px 10px; border-radius: 8px; cursor: pointer;
}
.side__item:hover { background: var(--bg-3); }
.side__item.is-on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.side__sel { width: 100%; }
.side__note p { margin: 0; }

/* 게시판 고르기는 다른 화면과 같은 2층 탭이다. 카드 밖 첫 줄이라 위 여백만 없앤다. */
.board__main > .tabs--pane { margin-top: 0; }
.board__bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.board__bar h2 { margin: 0; }
.board__bar input[type="search"] { width: clamp(120px, 26vw, 260px); }

.posts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
         border-radius: 12px; overflow: hidden; }
.posts:empty { border: 0; }
.post { background: #fff; padding: 12px 14px; cursor: pointer; }
.post:hover { background: var(--bg-2); }
.post__head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.post__title { font-weight: 600; }
.post__cnt { color: var(--accent); font-size: .82rem; font-weight: 700; }
.post__meta { margin-top: 3px; }

.pager { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 14px; }
.pager__n {
  min-width: 34px; padding: 6px 9px; border: 1px solid var(--line); background: #fff;
  border-radius: 8px; font: inherit; color: var(--ink-2); cursor: pointer;
}
.pager__n.is-on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }

.view__title { margin: 4px 0 0; }
.view__body {
  white-space: pre-wrap; word-break: break-word; line-height: 1.7;
  margin: 14px 0; padding: 14px 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
#b-view textarea, #b-view input[type="text"] { width: 100%; }

.cmtwrap { margin-top: 16px; }
.cmts { display: grid; gap: 8px; }
.cmt { border-top: 1px solid var(--line); padding-top: 8px; }
.cmt__meta { display: flex; align-items: center; gap: 8px; }
.cmt__body { white-space: pre-wrap; word-break: break-word; }
.cmt__form { display: flex; gap: 8px; margin-top: 10px; align-items: flex-start; }
.cmt__form textarea { flex: 1; }
.linkbtn {
  background: none; border: 0; padding: 0; font: inherit; font-size: .76rem;
  color: var(--ink-3); cursor: pointer; text-decoration: underline;
}
.linkbtn:hover { color: var(--bad); }

/* ---------------------------------------------------- 모바일 하단 탭바
   좁은 화면에서는 상단 메뉴가 두세 줄을 차지해 본문이 밀린다. 그 줄을 없애고
   손이 닿는 아래쪽으로 옮긴다. 넓은 화면에서는 상단 메뉴를 그대로 쓴다. */
.tabbar { display: none; }

@media (max-width: 860px) {
  .board { grid-template-columns: 1fr; }
  .board__side { position: static; }
  .board__side .side__list { grid-auto-flow: column; grid-auto-columns: max-content;
                             overflow-x: auto; gap: 4px; }
  .board__side .side__item { white-space: nowrap; }
}

@media (max-width: 640px) {
  .topbar .nav { display: none; }          /* 하단 탭바가 대신한다 */
  .topbar { flex-wrap: nowrap; gap: 10px; padding: 9px 14px; }

  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 7px 0 6px; font-size: .68rem; color: var(--ink-3); text-decoration: none;
  }
  .tabbar a b { font-size: 1.02rem; line-height: 1; font-weight: 400; }
  .tabbar a.is-on { color: var(--accent); }
  body { padding-bottom: 58px; }
  .board__bar { flex-wrap: wrap; }
  .board__bar input[type="search"] { width: 100%; order: 3; }
}

/* ---------------------------------------------------- 분석 · 차트
   경기별 추정득점(RC)을 넷으로 갈라 색으로 보여 준다. 상대평가가 아니라
   고정 기준이라 시즌이 달라도 같은 색은 같은 뜻이다. */
.rc-0 { background: #1b7f4b; color: #fff; }      /* 아주 좋음 */
.rc-1 { background: #cfeddc; color: #12603a; }   /* 좋음 */
.rc-2 { background: #fbdcd8; color: #8f2d20; }   /* 아쉬움 */
.rc-3 { background: #c0392b; color: #fff; }      /* 침묵 */
td.rc { font-weight: 700; font-variant-numeric: tabular-nums; }
/* 정밀득점은 음수가 나온다. 칸을 통째로 칠하면 추정득점 열과 다퉈서
   글자만 붉힌다. */
td.xr { font-variant-numeric: tabular-nums; }
td.xr.is-neg { color: #c0392b; font-weight: 700; }
rect.rcbar.rc-0 { fill: #1b7f4b; }
rect.rcbar.rc-1 { fill: #8fd0ac; }
rect.rcbar.rc-2 { fill: #f0aca2; }
rect.rcbar.rc-3 { fill: #c0392b; }

.analysis > summary { font-size: 1rem; padding: 2px 0 8px; }
.analysis .stats { margin-top: 0; }

.chart { margin: 12px 0 4px; }
.chart__tit { margin-bottom: 4px; }
.chart__svg { width: 100%; max-width: 420px; height: auto; display: block; }
.chart__svg .gridline { stroke: var(--line); stroke-dasharray: 3 3; stroke-width: 1; }
.chart__svg .gridlab { fill: var(--ink-2); font-size: 7.5px; }
.chart__svg .xlab { fill: var(--ink-3); font-size: 7px; text-anchor: middle; }
.chart__svg .axis { stroke: var(--line); stroke-width: 1; }
.chart__svg .avgline {
  fill: none; stroke: var(--accent); stroke-width: 1.6;
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
}

.anal__grid {
  display: grid; gap: 14px 20px; margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.hbars { display: grid; gap: 3px; }
.hbar { display: grid; grid-template-columns: 52px 1fr 54px; align-items: center; gap: 6px; }
.hbar__k { font-size: .78rem; color: var(--ink-2); }
.hbar__t { background: var(--bg-3); border-radius: 999px; height: 12px; }
.hbar__t i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.hbar__v { font-size: .74rem; color: var(--ink-3); text-align: right;
           font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------- 메인: 두 갈래 고르기
   설명을 늘어놓는 대신 "무엇을 할지" 만 크게 묻는다. */
.hero--tight { padding-bottom: 4px; }
.hero--tight h2 { margin-bottom: .2em; }

.picker {
  display: grid; gap: 14px; margin: 14px 0 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.pick {
  display: grid; gap: 6px; align-content: start;
  padding: 22px 20px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow); text-decoration: none; color: inherit;
  transition: border-color .12s, transform .12s;
}
.pick:hover { border-color: var(--accent); transform: translateY(-2px); }
.pick b { font-size: 1.15rem; }
.pick__icon { font-size: 1.7rem; line-height: 1; }
.pick__go { color: var(--accent); font-size: .84rem; font-weight: 600; margin-top: 4px; }
.picker__more { text-align: center; }

@media (max-width: 640px) {
  .pick { padding: 18px 16px; }
}

/* 지표 도움말 — 약어를 아는 사람에게만 통하는 이름은 쓰지 않되,
   원래 이름을 찾아볼 수는 있게 한 곳에 모아 둔다. */
.mhelp { display: inline-block; }
.mhelp > summary {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  font-size: .78rem; color: var(--accent); list-style: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px;
}
.mhelp > summary::-webkit-details-marker { display: none; }
.mhelp > summary::before { content: "?"; font-weight: 700; }
.mhelp > summary:hover { border-color: var(--accent); background: var(--accent-soft); }
.mhelp__list {
  margin: 8px 0 0; padding: 12px 14px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 10px;
}
.mhelp__list dt { font-weight: 700; margin-top: 8px; }
.mhelp__list dt:first-child { margin-top: 0; }
.mhelp__list dd { margin: 2px 0 0; }

/* 통계 탭 안의 최근 N경기 — 통산과 나란히 두되 한 단 안쪽으로 들여 놓는다 */
.recent { margin: 14px 0 4px; border: 1px solid var(--line); border-radius: 10px;
          padding: 10px 12px; background: var(--bg-2); }
.recent > summary { cursor: pointer; font-size: .95rem; }
.recent .stats { margin: 8px 0; }
.recent .yr { margin-top: 4px; }

/* ---------------------------------------------------- 라인업
   넓은 화면에서는 타순 표와 야구장을 나란히, 좁으면 표 아래에 그림을 둔다. */
.lu-grid {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 46%);
}
.lu-field svg { width: 100%; height: auto; display: block; border-radius: 10px; }
@media (max-width: 860px) {
  .lu-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------- 로그인 화면
   로그인 전에는 카드 하나뿐이라 위쪽에 붙어 있으면 허전하다. 화면 가운데로
   올리되 **세로가 짧은 화면**(가로로 눕힌 폰, 낮은 창)에서는 잘리지 않도록
   min-height 로만 잡고 넘치면 그냥 흐르게 둔다. */
body.signin .app { display: grid; place-items: center; }
body.signin #account-card {
  width: min(420px, 100%);
  min-height: 0;
  margin: 0;
}
body.signin .app {
  min-height: calc(100dvh - 122px);   /* 상단바 + 푸터 */
}
@supports not (height: 100dvh) {
  body.signin .app { min-height: calc(100vh - 122px); }
}

.signin__head { text-align: center; margin-bottom: 16px; }
.signin__head h2 { margin: 6px 0 4px; }
.signin__head p { margin: 0; }
.signin__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px; font-size: 1.5rem;
  background: var(--accent-soft); box-shadow: inset 0 0 0 1px #c5d9f5;
}
.field--block { display: block; margin-bottom: 10px; font-size: .84rem;
                color: var(--ink-2); }
.field--block input { display: block; width: 100%; margin-top: 4px; }
.btn--block { width: 100%; justify-content: center; margin-bottom: 8px; }
.signin__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line);
}
.signin__foot a { text-decoration: none; }

@media (max-width: 640px) {
  body.signin .app { min-height: calc(100dvh - 160px); padding-top: 4px; }
}

/* ---------------------------------------------------- 상단 오른쪽 버튼 */
.who .btn-mini {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; font: inherit; font-size: .8rem; font-weight: 600;
  background: #fff; color: var(--ink-2); cursor: pointer; text-decoration: none;
  white-space: nowrap;
}
.who .btn-mini:hover { border-color: var(--accent); color: var(--accent); }
.who .btn-mini--admin { border-color: #f0dca8; background: #fff8e6; color: #8a6100; }
.who .btn-mini--admin:hover { border-color: #b7791f; color: #8a6100; }
.who .btn-mini--go {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.who .btn-mini--go:hover { background: #1257b8; border-color: #1257b8; color: #fff; }

@media (max-width: 420px) {
  .who .btn-mini { padding: 4px 9px; }
  .who .btn-mini span { display: none; }   /* 아주 좁으면 기호만 */
}

/* ---------------------------------------------------- 설정 화면
   왼쪽에 "무엇을·왜", 오른쪽에 조작. 좁으면 위아래로 접힌다. */
.set {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 8px 24px; padding: 16px 0; border-top: 1px solid var(--line);
}
.set:first-child { border-top: 0; padding-top: 4px; }
.set--last { border-top: 1px solid var(--line); }
.set__label { display: grid; gap: 2px; align-content: start; }
.set__label b { font-size: .95rem; }
.set__body { display: grid; gap: 8px; align-content: start; min-width: 0; }
.set__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.set__row input, .set__row select { flex: 1 1 150px; min-width: 0; }
.set__row .btn { flex: 0 0 auto; }
.set__body .manual { margin-top: 4px; }

@media (max-width: 720px) {
  .set { grid-template-columns: 1fr; gap: 8px; }
}

/* 포지션 그림 · 내야외야 비율 · 지표 토글 */
.posfield { margin: 6px 0 4px; }
.posfield svg { width: 100%; max-width: 460px; height: auto; display: block;
                margin: 0 auto; border-radius: 10px; }

.split2 { margin: 4px 0 8px; }
.split2__bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden;
               background: var(--bg-3); }
.split2__bar i.is-inf { background: #b7791f; }
.split2__bar i.is-out { background: #1668d6; }
.split2__lab { display: flex; justify-content: space-between; margin-top: 4px; }

.tabs--mini { margin: 0; gap: 3px; }
.tabs--mini .tab { padding: 3px 9px; font-size: .74rem; }
.chart__svg .wobaline {
  fill: none; stroke: #1b7f4b; stroke-width: 1.6; stroke-dasharray: 4 3;
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
rect.rcbar.bar-inv { fill: #1668d6; }

/* 글쓰기 도구줄과 본문 서식 */
.ebar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
        margin: 8px 0 4px; }
.ebar__b {
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  min-width: 32px; height: 30px; font: inherit; font-size: .9rem;
  cursor: pointer; color: var(--ink-2);
}
.ebar__b:hover { border-color: var(--accent); color: var(--accent); }

.rich { line-height: 1.7; word-break: break-word; }
.rich p { margin: 0; }
.rich__gap { height: .7em; }
.rich ul { margin: 4px 0; padding-left: 1.2em; }
.rich blockquote {
  margin: 4px 0; padding: 4px 12px; border-left: 3px solid var(--line);
  color: var(--ink-2);
}
.rich__img {
  max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0;
  border: 1px solid var(--line); display: block;
}

/* 차트 눈금과 범례 */
.chart__svg .gridlab--l { text-anchor: end; }
.legend { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 6px;
          max-width: 420px; }
.legend__i { display: inline-flex; align-items: center; gap: 4px;
             font-size: .68rem; color: var(--ink-3); }
.legend__k { width: 9px; height: 9px; border-radius: 2px; display: inline-block;
             flex: 0 0 auto; }
.legend__k.k-rc0 { background: #1b7f4b; }
.legend__k.k-rc1 { background: #8fd0ac; }
.legend__k.k-rc2 { background: #f0aca2; }
.legend__k.k-rc3 { background: #c0392b; }
.legend__k.k-inv { background: #1668d6; }
.legend__k.k-line { height: 2px; border-radius: 2px; background: var(--accent); }
.legend__k.k-woba { height: 2px; border-radius: 2px;
  background: repeating-linear-gradient(90deg,#1b7f4b 0 4px,transparent 4px 7px); }

/* 팀 평균과 그 대비 */
.teamavg { margin: 8px 0 12px; padding: 10px 12px; background: var(--bg-2);
           border: 1px solid var(--line); border-radius: 10px; }
.teamavg--wait { background: var(--bg-2); }
.diff { display: block; font-size: .68rem; font-weight: 700;
        font-variant-numeric: tabular-nums; }
.diff.is-up { color: #12805c; }
.diff.is-down { color: #c0392b; }

/* 차트 위 단추줄 — 왼쪽은 기간, 오른쪽은 지표 */
.chart__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
              margin-bottom: 6px; }

/* 되돌릴 수 없는 단추는 색으로도 구분한다 */
.btn--danger { border-color: #e3b4ae; color: var(--bad); background: #fff; }
.btn--danger:hover { background: var(--bad); border-color: var(--bad); color: #fff; }

/* 내 공개 범위 고르는 칸 */
.share-pick { display: grid; gap: 3px; justify-items: end; text-align: right; }
.share-pick select { min-width: 150px; }