/* 줄넘기 칼로리 계산기 전용 CSS (2026-10-19). 기록판 jr-card(총 소모·몫 막대 | 줄넘기 그림 → 기록 칸 4개 → 칸) → jr-ladder(개수별 | 목표 열량별)
   → jr-cmp(빠르기만 바꾸면: 같은 개수 | 같은 시간) → jr-eq(같은 열량을 다른 운동으로). 툴 폭은 컨테이너 jr 로 재고(셸 폭과 무관), 공용 부품은 assets/v2.css */
.jr-work{container:jr / inline-size}
.jr-work [hidden]{display:none !important}

/* 기록판 머리: 큰 숫자·문장·몫 막대 | 줄넘기 그림 */
.jr-card{padding:16px 18px 14px;border-bottom:1px solid var(--soft)}
.jr-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 22px}
.jr-main{min-width:0}
.jr-main .v2-label{display:block;margin-bottom:6px}
.jr-card .v2-sub.is-error{color:var(--accent)}
.jr-split{max-width:460px;margin-top:12px}
.jr-split-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--soft)}
.jr-split-bar i{display:block;height:100%;width:0;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.jr-split-bar .net{background:var(--accent)}
.jr-split-bar .rest{background:var(--line)}
.jr-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)}
.jr-split-key li::before{content:"";display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:2px;background:var(--line);vertical-align:-1px}
.jr-split-key li.net::before{background:var(--accent)}
.jr-split-key b{color:var(--ink);font-weight:750;font-variant-numeric:tabular-nums}
.jr-split.is-empty{visibility:hidden}

/* 줄넘기 그림: 줄 = 손 높이(y 72)를 축으로 scaleY(cos) — 앞(굵게)·뒤(흐리게), 몸은 줄이 발밑을 지날 때 뜀 */
.jr-fig{display:flex;flex-direction:column;align-items:center;gap:4px;width:150px;margin:0;font-family:var(--sans);text-align:center}
.jr-man{display:block;width:112px;height:auto;overflow:visible}
.jr-man .gnd{stroke:var(--line);stroke-width:2;stroke-linecap:round}
.jr-man .lim{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.jr-man .hd{fill:var(--ink)}
.jr-man .rope path{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.jr-man .rope,.jr-man .body{transform-box:view-box}
.jr-man .rope{transform-origin:60px 72px}
.jr-fig.is-play .rope,.jr-fig.is-play .rope path,.jr-fig.is-play .body{animation-duration:var(--jr-T,.55s);animation-iteration-count:var(--jr-n,4.5);animation-delay:calc(var(--jr-T,.55s) * -.5);animation-timing-function:linear}
.jr-fig.is-play .rope{animation-name:jr-rope}
.jr-fig.is-play .rope path{animation-name:jr-depth}
.jr-fig.is-play .body{animation-name:jr-hop}
@keyframes jr-rope{0%{transform:scaleY(-1)}12.5%{transform:scaleY(-.707)}25%{transform:scaleY(0)}37.5%{transform:scaleY(.707)}50%{transform:scaleY(1)}62.5%{transform:scaleY(.707)}75%{transform:scaleY(0)}87.5%{transform:scaleY(-.707)}100%{transform:scaleY(-1)}}
@keyframes jr-depth{0%{stroke-width:2.6;opacity:1}25%{stroke-width:1.6;opacity:.5}50%{stroke-width:2.6;opacity:1}75%{stroke-width:3.8;opacity:1}100%{stroke-width:2.6;opacity:1}}
@keyframes jr-hop{0%{transform:translateY(-7px)}22%{transform:translateY(-1px)}35%,65%{transform:translateY(0)}78%{transform:translateY(-1px)}100%{transform:translateY(-7px)}}
.jr-fig figcaption{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.jr-fig figcaption b{font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.jr-fig figcaption>span{font-size:11.5px;line-height:1.4;color:var(--muted)}
.jr-fig .jr-play-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;margin-top:4px}
.jr-fig .v2-btn{height:28px;padding:0 10px;font-size:12px}
.jr-count{font:800 13px var(--sans);color:var(--accent);font-variant-numeric:tabular-nums}
.jr-count:empty{display:none}
@container jr (max-width:439px){
  .jr-head{grid-template-columns:minmax(0,1fr)}
  .jr-fig{flex-direction:row;justify-content:flex-start;width:auto;gap:12px;padding-top:12px;border-top:1px solid var(--soft);text-align:left}
  .jr-man{width:64px}
  .jr-fig figcaption{align-items:flex-start}
  .jr-fig .jr-play-row{justify-content:flex-start}
}

/* 기록 칸 4개: 넓으면 한 줄, 좁으면 두 줄 두 칸. '자동' 칸은 점선 */
.jr-log{margin-top:14px;padding-top:14px;border-top:1px solid var(--soft)}
.jr-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@container jr (max-width:419px){ .jr-tile[data-k=n],.jr-tile[data-k=t]{grid-column:1 / -1} } /* 좁으면 개수·시간 한 줄씩(분·초 두 상자 값 칸 확보), 분당 | 체중은 나란히 — DOM 순서 그대로 */
@container jr (min-width:700px){ .jr-tiles{grid-template-columns:repeat(4,minmax(0,1fr))} }
.jr-tile{min-width:0}
.jr-tile>.v2-label{display:block;margin:0 0 5px}
.jr-tile .jr-auto{display:none;margin-left:5px;font-style:normal;font-weight:500;color:var(--muted)}
.jr-tile.is-auto .jr-auto{display:inline}
.jr-tile.is-auto .v2-input{border-style:dashed;background:transparent}
.jr-tile.is-auto .v2-input b{background:transparent}
.jr-boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.jr-boxes .v2-input b{min-width:0;padding:0 7px}
.jr-boxes .v2-input input{padding:0 7px}
.jr-chips{display:flex;margin-top:6px;gap:3px}
.jr-chips button{height:26px;padding:0 7px;font-size:12px}
.jr-units{margin-top:6px;gap:3px}
.jr-units button{height:26px;padding:0 9px;font-size:12px}
.jr-help{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.jr-help:empty{display:none}
.jr-log>.jr-help{margin-top:12px}
.jr-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}

/* 칸(강도·1분당·주 권장·지방) */
.jr-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin-top:14px;padding-top:12px;border-top:1px solid var(--soft)}
.jr-cells:empty{display:none}
@container jr (min-width:600px){ .jr-cells{grid-template-columns:repeat(4,minmax(0,1fr))} }
.jr-cells>div{min-width:0;display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start} /* 라벨·값·설명 줄을 옆 칸과 맞춤 */
.jr-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}
.jr-cells b i{font-style:normal;font-size:12px;font-weight:650;color:var(--muted)}
.jr-cells small{display:block;margin-top:1px;font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--muted)}

/* 구역 머리 */
.jr-sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-bottom:8px}
.jr-sec-head .jr-help{margin:0}

/* 사다리: 개수별 | 목표 열량별. 줄 = 이름 · 막대 · 값 · 시간(누르면 그 값으로) */
.jr-ladder{display:grid;grid-template-columns:minmax(0,1fr);gap:16px 22px;padding:14px 18px 16px;border-bottom:1px solid var(--soft)}
@container jr (min-width:620px){ .jr-ladder{grid-template-columns:repeat(2,minmax(0,1fr))} }
.jr-lad{min-width:0;container:jrl / inline-size}
.jr-lad-list{display:grid;gap:4px}
.jr-row{display:grid;grid-template-columns:minmax(58px,auto) minmax(28px,1fr) auto;align-items:center;gap:10px;width:100%;min-width:0;padding:6px 10px;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)}
.jr-row:hover{border-color:var(--line)}
.jr-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.jr-row:disabled{cursor:default;opacity:.55}
.jr-row[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.jr-row .nm{font-size:12.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.jr-row .nm i,.jr-row .kc i{font-style:normal;font-size:11px;font-weight:650;color:var(--muted)}
.jr-row .bar{display:block;height:6px;border-radius:3px;background:var(--soft);overflow:hidden}
.jr-row .bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--line);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.jr-row[aria-pressed="true"] .bar i{background:var(--accent)}
.jr-row .val{display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:0}
.jr-row .kc{font-size:14.5px;font-weight:800;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.jr-row .tm{font-size:11.5px;line-height:1.2;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
@container jrl (min-width:360px){ .jr-row .val{flex-direction:row;align-items:baseline;gap:10px} .jr-row .tm{min-width:84px;text-align:right} }
.jr-lad-note{grid-column:1 / -1;margin-top:-6px}

/* 막대 목록(빠르기 비교·같은 열량): 이름 | 막대 | 값 */
.jr-cmp,.jr-eq{padding:14px 18px 16px;min-width:0}
.jr-cmp{border-bottom:1px solid var(--soft)}
.jr-cmp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 26px}
@container jr (min-width:620px){ .jr-cmp-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.jr-cmp-col{min-width:0}
.jr-cmp-h{margin:0 0 6px;font:700 12.5px/1.4 var(--sans);color:var(--ink)}
.jr-bars{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.jr-bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm val" "bar bar";align-items:baseline;gap:3px 10px;min-width:0;font-family:var(--sans)}
.jr-bars .nm{grid-area:nm;min-width:0;font-size:12.5px;font-weight:650;color:var(--ink)}
.jr-bars .nm em{font-style:normal;font-size:11px;font-weight:750;color:var(--accent);margin-left:4px}
.jr-bars .nm small{margin-left:6px;font-size:11px;font-weight:500;color:var(--muted)}
.jr-bars .nm a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.jr-bars .nm a:hover{text-decoration-color:var(--ink)}
.jr-bars b{grid-area:val;font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.jr-bars .bar{grid-area:bar;display:block;height:8px;border-radius:4px;background:var(--soft);overflow:hidden}
.jr-bars .bar i{display:block;height:100%;width:0;border-radius:4px;background:var(--line);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.jr-bars .is-now .bar i{background:var(--accent)}
.jr-cmp>.jr-help,.jr-eq>.jr-help{margin-top:10px}
@container jr (min-width:620px){ .jr-eq-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px} .jr-eq-list li:first-child{grid-column:1 / -1} }

@media (prefers-reduced-motion:reduce){
  .jr-split-bar i,.jr-row .bar i,.jr-bars .bar i{transition:none}
  .jr-fig.is-play .rope,.jr-fig.is-play .rope path,.jr-fig.is-play .body{animation:none !important}
}