/* 자전거 칼로리 계산기 전용 CSS (2026-10-19). 자전거 카드 cy-bikes → 결과 cy-hero(총 소모 | 에너지 줌 막대) → 기록 칸 cy-form → 칸 cy-cells → 곡선 cy-curve.
   툴 폭은 컨테이너 cy 로 재고(셸 폭과 무관), 공용 부품은 assets/v2.css */
.cy-work{container:cy / inline-size}
.cy-work [hidden]{display:none !important}
.cy-sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-bottom:8px}
.cy-sec-head>.v2-label{margin:0}
.cy-units{margin-left:auto;align-self:center}
.cy-help{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.cy-help:empty{display:none}
.cy-sec-head .cy-help{margin:0}

/* 자전거 카드: 좁으면 3 + 2(빈칸 없이), 넓으면 5장 한 줄. 카드 = 고르는 버튼 + 같은 기록의 kcal + 막대(다섯 장 중 최대 대비) */
.cy-bikes-wrap{padding:14px 18px;border-bottom:1px solid var(--soft)}
.cy-bikes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.cy-bike{grid-column:span 2}
.cy-bike:nth-child(n+4){grid-column:span 3}
@container cy (min-width:600px){ .cy-bikes{grid-template-columns:repeat(5,minmax(0,1fr))} .cy-bike,.cy-bike:nth-child(n+4){grid-column:auto} }
.cy-bike{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;padding:9px 11px 11px;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)}
.cy-bike:hover{border-color:var(--line)}
.cy-bike:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cy-bike[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cy-bike .ic{width:40px;height:24px;color:var(--muted);margin-bottom:3px}
.cy-bike[aria-pressed="true"] .ic{color:var(--accent)}
.cy-bike .nm{font-size:12px;font-weight:650;color:var(--muted);line-height:1.35}
.cy-bike .kc{font-size:19px;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.cy-bike .kc i{display:block;font-style:normal;font-size:11px;font-weight:650;line-height:1.2;color:var(--muted)}
.cy-bike .kc,.cy-bike .ex{margin-bottom:6px}
.cy-bike .ex{margin-top:-5px;font-size:11px;line-height:1.35;color:var(--muted)}
.cy-bike .ex:empty{display:none}
.cy-bike .bar{display:block;width:100%;height:5px;margin-top:auto;border-radius:3px;background:var(--soft);overflow:hidden}
.cy-bike .bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--line);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.cy-bike[aria-pressed="true"] .bar i{background:var(--accent)}
.cy-bikes-wrap .cy-help{margin-top:8px}

/* 결과: 총 소모 큰 숫자 | 에너지 줌 막대(넓으면 나란히) */
.cy-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:16px 18px;border-bottom:1px solid var(--soft)}
@container cy (min-width:640px){ .cy-hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:26px} }
.cy-lead,.cy-main{min-width:0}
.cy-mini{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:14px;padding-top:12px;border-top:1px solid var(--soft)}
.cy-mini:empty{display:none}
.cy-mini>div{flex:1 1 130px;min-width:0}
.cy-mini b,.cy-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}
.cy-mini b i,.cy-cells b i{font-style:normal;font-size:12px;font-weight:650;color:var(--muted)}
.cy-mini small,.cy-cells small{display:block;margin-top:1px;font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--muted)}
.cy-mini .is-cmp{padding-left:12px;border-left:2px dashed var(--line)}
.cy-main>.v2-label{display:block;margin-bottom:6px}
.cy-hero .v2-sub.is-error{color:var(--accent)}
.cy-flow{margin:0;min-width:0}
.cy-flow.is-empty{visibility:hidden}
.cy-flow-t{margin:0 0 6px;font:650 12px/1.45 var(--sans);color:var(--ink)}
.cy-flow-t.b{margin-top:2px}
.cy-bar{display:flex;height:14px;border-radius:4px;overflow:hidden;background:var(--soft)}
.cy-bar i{display:block;height:100%;width:0;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.cy-bar i+i{box-shadow:inset 1px 0 0 var(--card)}
.cy-bar .rest,.cy-key .rest::before{background:var(--line)}
.cy-bar .spin,.cy-key .spin::before{background:color-mix(in srgb, var(--muted) 55%, var(--line))}
.cy-bar .heat,.cy-key .heat::before{background:color-mix(in srgb, var(--accent) 38%, var(--card))}
.cy-bar .work,.cy-key .work::before{background:var(--accent)}
.cy-bar .air,.cy-key .air::before{background:var(--accent)}
.cy-bar .roll,.cy-key .roll::before{background:color-mix(in srgb, var(--ink) 62%, var(--card))}
.cy-bar .climb,.cy-key .climb::before{background:repeating-linear-gradient(135deg, var(--accent) 0 2px, color-mix(in srgb, var(--accent) 30%, var(--card)) 2px 5px)}
.cy-bar .loss,.cy-key .loss::before{background:var(--line)}
.cy-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)}
.cy-key li{white-space:nowrap}
.cy-key li::before{content:"";display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:2px;vertical-align:-1px}
.cy-key b{color:var(--ink);font-weight:750;font-variant-numeric:tabular-nums}
.cy-zoom{display:block;width:100%;height:20px;margin:4px 0 2px}
.cy-zoom polygon{fill:color-mix(in srgb, var(--accent) 13%, transparent)}
.cy-flow.is-indoor .cy-zoom,.cy-flow.is-indoor .cy-bar.b,.cy-flow.is-indoor .cy-key.b{display:none}
.cy-flow.is-indoor .cy-flow-t.b{margin-top:12px;font-weight:600;color:var(--muted)}
.cy-flow>.cy-help{margin-top:8px}

/* 기록 칸: 모드 줄 → 칸(줄마다 남는 폭은 칸이 나눠 가짐, 빈칸 없음) */
.cy-form{padding:14px 18px;border-bottom:1px solid var(--soft)}
.cy-modes{display:flex;flex-wrap:wrap;gap:8px 20px}
.cy-mrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.cy-mrow>.v2-label{margin:0}
.cy-mrow .v2-seg button{height:32px;padding:0 12px;font-size:13px}
.cy-tiles{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.cy-tile{flex:1 1 150px;min-width:0}
.cy-tile[data-k=t]{flex-basis:180px}
.cy-tile>.v2-label{display:block;margin:0 0 5px}
.cy-tile .cy-auto{display:none;margin-left:5px;font-style:normal;font-weight:500;color:var(--muted)}
.cy-tile.is-out .cy-auto{display:inline}
.cy-boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.cy-boxes .v2-input b{min-width:0;padding:0 7px}
.cy-boxes .v2-input input{padding:0 7px}
.cy-out{border-style:dashed;background:transparent}
.cy-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}
.cy-chips{display:flex;margin-top:6px;gap:3px}
.cy-chips button{height:26px;padding:0 7px;font-size:12px}
.cy-form>.cy-help{margin-top:12px}
.cy-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}

/* 칸(활동·시간당·파워·강도·MET 표 비교) */
.cy-cells{display:flex;flex-wrap:wrap;gap:12px 18px;padding:14px 18px;border-bottom:1px solid var(--soft)}
.cy-cells:empty{display:none}
.cy-cells>div{flex:1 1 150px;min-width:0}

/* 곡선: 실제 폭으로 그림(글자 크기 유지). 이 계산 = accent 실선, MET 표 = ink 점선 계단 */
.cy-curve{margin:0;padding:14px 18px 16px;min-width:0}
.cy-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)}
.cy-keys li::before{content:"";display:inline-block;width:18px;height:0;margin-right:6px;vertical-align:3px;border-top:3px solid var(--accent)}
.cy-keys li.kc::before{border-top:2px dashed var(--ink)}
.cy-chart{position:relative;min-width:0;touch-action:pan-y}
.cy-chart svg{display:block;max-width:100%;height:auto;overflow:visible}
.cy-chart .ax{stroke:var(--line);stroke-width:1}
.cy-chart .gl{stroke:var(--soft);stroke-width:1}
.cy-chart .tl{font:600 11px var(--sans);fill:var(--muted);font-variant-numeric:tabular-nums}
.cy-chart .tl.now{font-weight:800;fill:var(--ink)}
.cy-chart .lm{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cy-chart .lc{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:6 4;stroke-linejoin:round}
.cy-chart .lfix{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:2 4}
.cy-chart .lab{font:700 11.5px var(--sans);paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round}
.cy-chart .lab.c{fill:var(--muted)}
.cy-chart .vline{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3}
.cy-chart .dot{fill:var(--accent);stroke:var(--card);stroke-width:3}
.cy-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}
.cy-chart .guide{stroke:var(--ink);stroke-width:1;opacity:.35}
.cy-chart .gdot{stroke:var(--card);stroke-width:2}
.cy-chart .gdot.m{fill:var(--accent)}
.cy-chart .gdot.c{fill:var(--ink)}
.cy-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}
.cy-tip b{font-weight:800}
.cy-tip .m{color:var(--accent)}

@media (prefers-reduced-motion:reduce){ .cy-bar i,.cy-bike .bar i{transition:none} }