/* VO2max 계산기 전용 CSS (2026-10-16). 2패널 계산형 + 5구간 게이지 · 나이별 분포 차트(띠 + 내 점) · 표 보기. 공용 부품은 assets/v2.css. 접두 vo2-
   띠·게이지 칸은 잉크 한 색의 농도 단계(순차), 내 값만 accent. */
.vo2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.vo2-in{padding:16px 18px 18px;min-width:0}
.vo2-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.vo2-fields .full{grid-column:1 / -1}
.vo2-fields [hidden]{display:none !important}
.vo2-seglabel{display:block;margin:0 0 5px}
.vo2-seg{display:flex;flex-wrap:nowrap;width:100%}
.vo2-seg button{flex:1 1 0;min-width:0;height:var(--v2-ctl,42px);padding:0 5px;font-family:var(--sans);font-size:13px;font-weight:700;line-height:1.15;white-space:normal} /* 긴 로케일 라벨은 버튼 안에서 두 줄 */
.vo2-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.vo2-help{margin:12px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted)}
.vo2-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:14px}
.vo2-out{padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft);display:flex;flex-direction:column}
.vo2-out > .v2-label{display:block;margin-bottom:6px}
.vo2-out .v2-big span{white-space:nowrap}
.vo2-out .v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted);white-space:normal}
.vo2-out .v2-big small[hidden]{display:none}
.vo2-out .v2-formula{white-space:normal;overflow-wrap:anywhere;line-height:1.6}
/* 5구간 게이지 */
.vo2-gauge{margin:16px 0 4px;padding-top:22px}
.vo2-gtrack{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;height:12px}
.vo2-gtrack i{display:block;border-radius:2px;transition:outline-color var(--ease)}
.vo2-gtrack i:first-child{border-radius:6px 2px 2px 6px}
.vo2-gtrack i:nth-child(5){border-radius:2px 6px 6px 2px}
.vo2-gtrack i.is-on{outline:2px solid var(--ink);outline-offset:1px}
.vo2-gmark{position:absolute;top:-6px;width:4px;height:24px;margin-left:-2px;border-radius:2px;background:var(--accent);box-shadow:0 0 0 2px var(--paper);transition:left 480ms cubic-bezier(.3,.7,.3,1)}
.vo2-glab{position:absolute;bottom:calc(100% + 9px);transform:translateX(-50%);font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;transition:left 480ms cubic-bezier(.3,.7,.3,1)}
.vo2-glab.is-l{transform:translateX(-4px)}
.vo2-glab.is-r{transform:translateX(calc(-100% + 4px))}
.vo2-gcuts{position:relative;height:16px;margin-top:5px;font-family:var(--sans);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.vo2-gcuts span{position:absolute;top:0;transform:translateX(-50%)}
.z0{background:color-mix(in srgb, var(--ink) 7%, var(--paper))}
.z1{background:color-mix(in srgb, var(--ink) 14%, var(--paper))}
.z2{background:color-mix(in srgb, var(--ink) 20%, var(--paper))}
.z3{background:color-mix(in srgb, var(--ink) 27%, var(--paper))}
.z4{background:color-mix(in srgb, var(--ink) 34%, var(--paper))}
.vo2-rows{margin-top:12px}
.vo2-rows li span em{display:block;font-style:normal;font-size:11.5px;color:var(--muted)}
.vo2-rows li b{text-align:right}
.vo2-note{margin:10px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--ink)}
.vo2-note:empty,.vo2-caveat:empty{display:none}
.vo2-caveat{margin:10px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.vo2-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--soft)}
.vo2-foot .v2-status{margin-left:auto}
/* 아래 차트 상자 */
.vo2-box{padding:14px 18px 18px;border-top:1px solid var(--soft)}
.vo2-box-head{display:flex;align-items:baseline;justify-content:space-between;gap:4px 16px;flex-wrap:wrap;margin-bottom:8px}
.vo2-hint{font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.vo2-chart{position:relative;width:100%;min-width:0;touch-action:pan-y}
.vo2-chart svg{display:block;width:100%;height:auto;overflow:visible}
.vo2-chart polygon{stroke:none}
.vo2-chart polygon.z0{fill:color-mix(in srgb, var(--ink) 7%, var(--paper))}
.vo2-chart polygon.z1{fill:color-mix(in srgb, var(--ink) 14%, var(--paper))}
.vo2-chart polygon.z2{fill:color-mix(in srgb, var(--ink) 20%, var(--paper))}
.vo2-chart polygon.z3{fill:color-mix(in srgb, var(--ink) 27%, var(--paper))}
.vo2-chart polygon.z4{fill:color-mix(in srgb, var(--ink) 34%, var(--paper))}
.vo2-chart .cut{fill:none;stroke:var(--paper);stroke-width:2}
.vo2-chart .p50{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:4 4;opacity:.55}
.vo2-chart .grid{stroke:var(--soft);stroke-width:1}
.vo2-chart .ax{font-family:var(--sans);font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}
.vo2-chart .guide{stroke:var(--ink);stroke-width:1;opacity:.45}
.vo2-chart .me{transition:transform 520ms cubic-bezier(.3,.7,.3,1)}
.vo2-chart .me .ring{fill:var(--paper);opacity:.9}
.vo2-chart .me .dot{fill:var(--accent)}
.vo2-chart .me-t{font-family:var(--sans);font-size:12px;font-weight:700;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round}
.vo2-chart .vo2-bands.anim{animation:vo2Reveal 700ms cubic-bezier(.3,.7,.3,1) both} /* 성별·나이 범위가 바뀌면 띠가 왼쪽부터 그려진다(R45) */
@keyframes vo2Reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.vo2-tip{position:absolute;top:4px;left:0;z-index:2;max-width:min(100%,320px);padding:6px 9px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--ink);font-variant-numeric:tabular-nums;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.vo2-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:10px 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:12px;color:var(--muted)}
.vo2-legend li{display:flex;align-items:center;gap:6px}
.vo2-legend i{display:inline-block;width:14px;height:10px;border-radius:2px}
.vo2-legend i.me{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.vo2-chart-note{margin:8px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--ink)}
.vo2-chart-note:empty{display:none}
.vo2-tbl{margin-top:12px}
.vo2-tbl summary{cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink)}
.vo2-tbl .tbl{margin-top:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.vo2-table{width:auto;min-width:min(100%,420px);border-collapse:collapse;font-family:var(--sans);font-size:13px;font-variant-numeric:tabular-nums}
.vo2-table th,.vo2-table td{padding:6px 10px;border-top:1px solid var(--soft);text-align:left;white-space:nowrap}
.vo2-table thead th{font-size:11.5px;font-weight:700;color:var(--muted);border-top:0}
.vo2-table .n{text-align:right}
.vo2-table tbody th{font-weight:600}
.vo2-table tr.is-cur th,.vo2-table tr.is-cur td{background:var(--accent-wash)}
@media (max-width:720px){
  .vo2-grid{grid-template-columns:minmax(0,1fr)}
  .vo2-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@media (max-width:420px){
  .vo2-in,.vo2-out,.vo2-box{padding-left:12px;padding-right:12px}
  .vo2-table th,.vo2-table td{padding:6px 6px}
}
@media (prefers-reduced-motion:reduce){ .vo2-gmark,.vo2-glab,.vo2-chart .me{transition:none} .vo2-chart .vo2-bands.anim{animation:none} }
@container v2in (max-width:440px){ .vo2-modes{grid-template-columns:repeat(2,minmax(0,1fr))} } /* 방법 버튼 4개는 좁은 폭에서 2×2(로케일 라벨 넘침 0) */
@container v2in (max-width:380px){ .vo2-seg button{font-size:12px;padding:0 3px} }
@container v2in (max-width:300px){ .vo2-fields{grid-template-columns:minmax(0,1fr)} }