/* 승률 계산기 '승률 깔때기' — 2026-10-22. 넓이 기준은 작업면 컨테이너(wrcw): 700 이상 = 답 띠 [현재 | 목표까지 | 남은 경기], 입력 한 줄 [기록 | 목표];
   700 미만 = 현재 승률 위, 두 KPI 아래, 입력 두 줄; 420 미만 = 무승부 카드 머리 줄 위로. accent는 목표(선·끌개·닿는 점) 한 곳. */
.wrc-work{container:wrcw/inline-size}
.wrc-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 18px;border-bottom:1px solid var(--soft)}
.wrc-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.wrc-ex .v2-label{margin-right:2px}
.wrc-chip{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:background var(--ease),color var(--ease),border-color var(--ease)}
.wrc-chip:hover{background:var(--btn);color:var(--ink)}
.wrc-chip[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);background:var(--wash)}
.wrc-chip .i{width:13px;height:13px}

/* 답 띠 */
.wrc-ans{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);border-bottom:1px solid var(--soft)}
.wrc-now{padding:16px 18px 18px;background:color-mix(in srgb, var(--wash) 70%, var(--paper))}
.wrc-now > .v2-label{display:block}
.wrc-big{display:flex;align-items:baseline;gap:3px;margin:8px 0 0;font-family:var(--sans);font-size:46px;font-weight:800;line-height:1;letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.wrc-big small{font-size:21px;font-weight:700;color:var(--muted)}
.wrc-big.is-empty{color:var(--muted);opacity:.6}
.wrc-said{margin:9px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.wrc-kpi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.wrc-kpi li{display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px 18px 18px;border-left:1px solid var(--soft)}
.wrc-kpi li > span{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.wrc-kpi li > b{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px;font-family:var(--sans);font-size:32px;font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.wrc-kpi li > b small{font-size:14px;font-weight:700;letter-spacing:0;color:var(--muted)}
.wrc-kpi li > small{font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.wrc-kpi li.is-none > b{color:var(--muted);opacity:.6}

/* 입력 */
.wrc-in{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:12px 0;padding:16px 18px;border-bottom:1px solid var(--soft)}
.wrc-work[data-rec="rate"] .wrc-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.wrc-recf,.wrc-goalf{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;min-width:0}
.wrc-recf{padding-right:18px}
.wrc-goalf{padding-left:18px;border-left:1px solid var(--soft)}
.wrc-work[data-rec="wld"] .v2-f[data-rec="rate"],.wrc-work[data-rec="rate"] .v2-f[data-rec="wld"]{display:none}
.wrc-in > .v2-status{grid-column:1/-1}
.wrc-in > .v2-status:empty{display:none}
.wrc-dc{grid-column:1/-1;display:grid;grid-template-columns:minmax(120px,.8fr) repeat(3,minmax(0,1fr));gap:8px}
.wrc-dc[hidden]{display:none}
.wrc-dch{display:flex;flex-direction:column;justify-content:center;gap:3px;margin:0;min-width:0}
.wrc-hint{font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}
.wrc-dc button{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 8px;min-width:0;padding:8px 11px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);text-align:left;cursor:pointer;transition:border-color var(--ease),background var(--ease)}
.wrc-dc button:hover{border-color:var(--line)}
.wrc-dc button > span{font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink)}
.wrc-dc button > b{font-family:var(--sans);font-size:16px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.wrc-dc button > small{grid-column:1/-1;font-family:var(--mono);font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.wrc-dc button[aria-pressed="true"]{border-color:var(--fill);background:var(--wash);box-shadow:inset 0 0 0 1px var(--fill)}

/* 깔때기 */
.wrc-viz{padding:14px 18px 16px;border-bottom:1px solid var(--soft)}
.wrc-vh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;margin:0 0 8px}
.wrc-key{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-family:var(--sans);font-size:12px;color:var(--muted)}
.wrc-key i{display:inline-block;width:16px;margin-right:-6px;border-top:2px solid var(--ink)}
.wrc-key i.k-lo{border-top-style:dashed;border-top-color:var(--muted)}
.wrc-key i.k-t{border-top-color:var(--accent)}
.wrc-key em{font-style:normal}
.wrc-chart{position:relative}
.wrc-chart svg{display:block;width:100%;overflow:visible;touch-action:pan-y;user-select:none}
.wrc-chart text{font-family:var(--sans);font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.wrc-chart .ty{text-anchor:end}
.wrc-chart .tx{text-anchor:middle}
.wrc-chart .g{stroke:var(--soft);stroke-width:1}
.wrc-chart .cone{fill:var(--wash)}
.wrc-chart .up{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.wrc-chart .lo{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-dasharray:5 4}
.wrc-chart .wil{stroke:var(--ink);stroke-opacity:.22;stroke-width:9;stroke-linecap:round}
.wrc-chart .tg{stroke:var(--accent);stroke-width:1.6}
.wrc-chart .nl{stroke:var(--ink);stroke-width:2;stroke-dasharray:2 3}
.wrc-chart .dr{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3}
.wrc-chart .now,.wrc-chart .keep,.wrc-chart .nk{fill:var(--card);stroke:var(--ink);stroke-width:2}
.wrc-chart .hit{fill:var(--accent);stroke:var(--card);stroke-width:2}
.wrc-chart .lb{font-size:11.5px;font-weight:700;fill:var(--ink);paint-order:stroke;stroke:var(--card);stroke-width:3px;stroke-linejoin:round}
.wrc-chart .guide{stroke:var(--line);stroke-width:1}
.wrc-knob{position:absolute;display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 7px 0 5px;border:1px solid var(--accent);border-radius:13px;background:var(--card);font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--accent);white-space:nowrap;cursor:ns-resize;touch-action:none;font-variant-numeric:tabular-nums}
.wrc-knob::before{content:"↕";font-size:11px}
.wrc-knob[hidden]{display:none}
.wrc-knob:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrc-knob.is-drag,.wrc-knob:hover{background:var(--accent);color:var(--card)}
.wrc-tip{position:absolute;top:0;padding:4px 8px;border-radius:var(--radius);background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:11.5px;font-weight:600;white-space:nowrap;pointer-events:none}
.wrc-tip[hidden]{display:none}

/* 칸 줄 */
.wrc-strip{margin-top:12px;padding-top:12px;border-top:1px solid var(--soft)}
.wrc-sh{margin:0 0 8px;font-family:var(--sans);font-size:13px;font-weight:650;line-height:1.5;color:var(--ink)}
.wrc-sh:empty{display:none}
.wrc-cells{display:grid;gap:3px}
.wrc-cells:empty{display:none}
.wrc-cells i{height:20px;border:1px solid var(--line);border-radius:1px;background:var(--paper);transition:background-color .32s ease,border-color .32s ease}
.wrc-cells i.w{background:var(--fill);border-color:var(--fill)}
.wrc-cells.is-no i.w{background:color-mix(in srgb, var(--fill) 40%, var(--card));border-color:color-mix(in srgb, var(--fill) 40%, var(--card))}
.wrc-cells.is-bar{display:flex;gap:3px;height:24px}
.wrc-cells.is-bar span{display:grid;place-items:center;min-width:0;flex-basis:0;overflow:hidden;border:1px solid var(--line);background:var(--paper)}
.wrc-cells.is-bar span.w{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.wrc-cells.is-bar em{font-style:normal;font-family:var(--sans);font-size:11.5px;font-weight:700;white-space:nowrap}

/* 읽기 줄 · 식 · 단추 */
.wrc-read{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 22px;padding:4px 18px 0}
.wrc-read li{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;border-top:0;padding:10px 0}
.wrc-read li b{white-space:normal}
.wrc-formula{margin:4px 18px 0;padding-top:8px;border-top:1px solid var(--soft);white-space:pre;line-height:1.7}
.wrc-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 18px 16px}
.wrc-work.is-empty .wrc-viz{display:none}

@container wrcw (max-width:699px){
  .wrc-ans{grid-template-columns:minmax(0,1fr)}
  .wrc-now{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:0 16px}
  .wrc-now > .v2-label{grid-column:1/-1}
  .wrc-said{margin:0 0 3px}
  .wrc-kpi li{border-left:0;border-top:1px solid var(--soft)}
  .wrc-kpi li + li{border-left:1px solid var(--soft)}
  .wrc-in,.wrc-work[data-rec="rate"] .wrc-in{grid-template-columns:minmax(0,1fr)}
  .wrc-recf{padding-right:0}
  .wrc-goalf{padding-left:0;border-left:0}
  .wrc-read{grid-template-columns:minmax(0,1fr);gap:0}
  .wrc-read li{flex-direction:row;align-items:baseline;justify-content:space-between;border-top:1px solid var(--soft);padding:8px 0}
  .wrc-read li:first-child{border-top:0}
  .wrc-read li b{text-align:right}
}
@container wrcw (max-width:439px){
  .wrc-recf .v2-input b{display:none} /* 승·패·무 세 칸은 라벨이 단위를 말해 주니, 999,999가 잘리지 않게 단위 칩을 접는다 */
}
@container wrcw (max-width:519px){
  .wrc-dc{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wrc-dch{grid-column:1/-1}
  .wrc-dc button{grid-template-columns:minmax(0,1fr);align-content:start;padding:8px 9px}
  .wrc-dc button > b{white-space:normal}
  .wrc-big{font-size:40px}
  .wrc-kpi li{padding:14px 14px 16px}
  .wrc-kpi li > b{font-size:27px}
}
@media (prefers-reduced-motion:reduce){.wrc-cells i{transition:none}}