/* 러닝 칼로리 계산기 전용 CSS (2026-10-19). 막대 rk-bar(아는 기록·단위) → 기록 카드 rk-card(총 소모·활동/쉬는 몫 막대 → 기록 칸 → 칸)
   → rk-pace('페이스만 바꾸면' 선 그림) → rk-races(대회 거리 카드). 툴 폭은 컨테이너 rk 로 재고(셸 폭과 무관), 공용 부품은 assets/v2.css */
.rk-work{container:rk / inline-size}
.rk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.rk-bar>.v2-label{margin:0}
.rk-md button{height:34px;padding:0 13px;font-size:13.5px}
.rk-units{margin-left:auto}
.rk-work [hidden]{display:none !important}

/* 기록 카드: 큰 숫자 + 활동/쉬는 몫 막대 */
.rk-card{padding:16px 18px 14px;border-bottom:1px solid var(--soft)}
.rk-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 28px}
.rk-main{flex:1 1 260px;min-width:0}
.rk-main>.v2-label{display:block;margin-bottom:6px}
.rk-card .v2-sub.is-error{color:var(--accent)}
.rk-card .v2-sub .rk-err{display:block;margin-top:4px;font-family:var(--sans);font-size:12.5px;color:var(--accent)}
.rk-split{flex:1 1 220px;max-width:340px;min-width:0;padding-bottom:4px}
.rk-split-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--soft)}
.rk-split-bar i{display:block;height:100%;width:0;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.rk-split-bar .net{background:var(--accent)}
.rk-split-bar .rest{background:var(--line)}
.rk-split-key{list-style:none;margin:7px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:3px 14px;font:600 11.5px/1.4 var(--sans);color:var(--muted)}
.rk-split-key li::before{content:"";display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:2px;background:var(--line);vertical-align:-1px}
.rk-split-key li.net::before{background:var(--accent)}
.rk-split-key b{color:var(--ink);font-weight:750;font-variant-numeric:tabular-nums}
.rk-split.is-empty{visibility:hidden}

/* 기록 칸: 12칸 격자, 폭마다 차지 칸 수. 시·분·초·분·초는 칸 안에서 나란히 */
.rk-log{margin-top:14px;padding-top:14px;border-top:1px solid var(--soft)}
.rk-tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.rk-tile{grid-column:span 6;min-width:0}
.rk-tile[data-k=d],.rk-tile[data-k=t],.rk-tile[data-k=k]{grid-column:span 12}
@container rk (min-width:520px){ .rk-tile,.rk-tile[data-k=d],.rk-tile[data-k=t]{grid-column:span 6} .rk-tile[data-k=w],.rk-tile[data-k=g],.rk-tile[data-k=k]{grid-column:span 4} }
@container rk (min-width:760px){ .rk-tile[data-k=d],.rk-tile[data-k=p]{grid-column:span 3} .rk-tile[data-k=t]{grid-column:span 4} .rk-tile[data-k=v]{grid-column:span 2} }
.rk-tile>.v2-label{display:block;margin:0 0 5px}
.rk-tile .rk-auto{display:none;margin-left:5px;font-style:normal;font-weight:500;color:var(--muted)}
.rk-tile.is-out .rk-auto{display:inline}
.rk-boxes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.rk-boxes.rk-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.rk-boxes .v2-input b{min-width:0;padding:0 7px}
.rk-boxes .v2-input input{padding:0 7px}
.rk-out{border-style:dashed;background:transparent}
.rk-out output{display:flex;flex:1 1 0;min-width:0;align-items:center;justify-content:flex-end;height:calc(var(--v2-ctl) - 2px);padding:0 10px;font-family:var(--sans);font-size:15.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;overflow:hidden}
.rk-chips{display:flex;margin-top:6px;gap:3px}
.rk-chips button{height:26px;padding:0 7px;font-size:12px}
.rk-help{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.rk-help:empty{display:none}
.rk-log>.rk-help{margin-top:12px}
.rk-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}

/* 칸(강도·1km당·분당·주 75분·지방·목표) */
.rk-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:12px 18px;margin-top:14px;padding-top:12px;border-top:1px solid var(--soft)}
.rk-cells:empty{display:none}
.rk-cells>div{min-width:0}
.rk-cells b{display:block;margin-top:2px;font-family:var(--sans);font-size:17px;font-weight:750;line-height:1.3;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.rk-cells b i{font-style:normal;font-size:12px;font-weight:650;color:var(--muted)}
.rk-cells small{display:block;margin-top:1px;font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--muted)}
.rk-cells .is-target b{color:var(--accent)}

/* '페이스만 바꾸면' 선 그림: 실제 폭으로 그림(글자 크기 유지). 같은 거리 = accent 실선, 같은 시간 = ink 점선 */
.rk-pace{margin:0;padding:14px 18px 16px;border-bottom:1px solid var(--soft);min-width:0}
.rk-sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-bottom:6px}
.rk-sec-head .rk-help{margin:0}
.rk-keys{list-style:none;display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 4px;padding:0;font:600 11.5px/1.4 var(--sans);color:var(--muted)}
.rk-keys li::before{content:"";display:inline-block;width:18px;height:0;margin-right:6px;vertical-align:3px;border-top:3px solid var(--accent)}
.rk-keys li.kt::before{border-top:2px dashed var(--ink)}
.rk-chart{position:relative;min-width:0;touch-action:pan-y}
.rk-chart svg{display:block;max-width:100%;height:auto;overflow:visible}
.rk-chart .ax{stroke:var(--line);stroke-width:1}
.rk-chart .gl{stroke:var(--soft);stroke-width:1}
.rk-chart .tl{font:600 11px var(--sans);fill:var(--muted);font-variant-numeric:tabular-nums}
.rk-chart .tl.now{font-weight:800;fill:var(--ink)}
.rk-chart .ld{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rk-chart .lt{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:6 5;stroke-linecap:round}
.rk-chart .lab{font:700 11.5px var(--sans);paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round}
.rk-chart .lab.d{fill:var(--accent)}
.rk-chart .lab.t{fill:var(--ink)}
.rk-chart .vline{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3}
.rk-chart .dot{fill:var(--accent);stroke:var(--card);stroke-width:3}
.rk-chart .dlab{font:800 12.5px var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round;font-variant-numeric:tabular-nums}
.rk-chart .guide{stroke:var(--ink);stroke-width:1;opacity:.35}
.rk-chart .gdot{stroke:var(--card);stroke-width:2}
.rk-chart .gdot.d{fill:var(--accent)}
.rk-chart .gdot.t{fill:var(--ink)}
.rk-tip{position:absolute;top:0;z-index:2;padding:6px 9px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:0 2px 10px rgba(0,0,0,.08);font:600 12px/1.45 var(--sans);color:var(--ink);white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
.rk-tip b{font-weight:800}
.rk-tip .d{color:var(--accent)}

/* 대회 거리 카드: 지금 페이스·경사 그대로, 막대 = 풀코스 대비. 한 번 만들고 값·너비만 바꿈 */
.rk-races{padding:14px 18px 16px}
.rk-race-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@container rk (min-width:560px){ .rk-race-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.rk-race{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:10px 12px 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);color:var(--ink);text-align:left;cursor:pointer;transition:border-color var(--ease),background-color var(--ease)}
.rk-race:hover{border-color:var(--line)}
.rk-race:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rk-race:disabled{cursor:default;opacity:.55}
.rk-race[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.rk-race .nm{font-size:12px;font-weight:650;color:var(--muted)}
.rk-race .kc{font-size:20px;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.rk-race .kc i{font-style:normal;font-size:12px;font-weight:650;color:var(--muted);margin-left:3px}
.rk-race .tm{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.rk-race .bar{display:block;width:100%;height:6px;margin-top:6px;border-radius:3px;background:var(--soft);overflow:hidden}
.rk-race .bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--line);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.rk-race[aria-pressed="true"] .bar i{background:var(--accent)}
.rk-races>.rk-help{margin-top:8px}

@media (prefers-reduced-motion:reduce){ .rk-split-bar i,.rk-race .bar i{transition:none} }