/* 축구 칼로리 계산기 전용 CSS (2026-10-22). 경기판 skc-board: 넓으면 [결과 / 종류 목록 | 경기장 그림(판 띠) + 판 길이·수] → 체중·포지션·복사 → 칸,
   좁으면 결과 → 경기장 → 종류 → 체중 → 칸(DOM 순서 그대로). 아래 skc-more = 시간 × 종류 표 | 프로 비교. 툴 폭은 컨테이너 skc 로 재고, 공용 부품은 assets/v2.css */
.skc-work{container:skc / inline-size;overflow-anchor:none} /* 오류로 결과 문장이 줄 때 Chrome 스크롤 고정이 화면을 옮겨 막 누른 클릭이 빗나가지 않게 */
.skc-work [hidden]{display:none !important}
.skc-help{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.skc-help:empty{display:none}
.skc-sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin-bottom:8px}

/* 경기판 */
.skc-board{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"res" "field" "kind" "body" "cells";gap:18px 24px;padding:16px 18px;border-bottom:1px solid var(--soft)}
@container skc (min-width:700px){
  .skc-board{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto 1fr auto auto;grid-template-areas:"res field" "kind field" "body body" "cells cells"}
}
.skc-res{grid-area:res;min-width:0}
.skc-res .v2-label{display:block;margin-bottom:6px}
.skc-board .v2-sub.is-error{color:var(--accent)}
.skc-field{grid-area:field;min-width:0;display:flex;flex-direction:column}
.skc-field>.skc-pitch{flex:1 0 auto} /* 옆 열이 더 길면 경기장이 세로로 늘어 빈 곳을 채움(선은 preserveAspectRatio none) */
.skc-kind{grid-area:kind;min-width:0;display:flex;flex-direction:column}
.skc-body{grid-area:body;min-width:0;padding-top:14px;border-top:1px solid var(--soft)}
.skc-cells{grid-area:cells}

/* 몫 막대 */
.skc-split{margin-top:12px}
.skc-split-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--soft)}
.skc-split-bar i{display:block;height:100%;width:0;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.skc-split-bar .net{background:var(--accent)}
.skc-split-bar .rest{background:var(--line)}
.skc-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)}
.skc-split-key li::before{content:"";display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:2px;background:var(--line);vertical-align:-1px}
.skc-split-key li.net::before{background:var(--accent)}
.skc-split-key b{color:var(--ink);font-weight:750;font-variant-numeric:tabular-nums}
.skc-split.is-empty{visibility:hidden}

/* 경기장 그림 = 시간 입력: 판마다 띠, 뛴 띠는 왼쪽부터 차오름, 벤치 띠는 빗금 */
.skc-pitch{position:relative;aspect-ratio:105 / 68;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.skc-lines{position:absolute;left:8px;top:8px;width:calc(100% - 16px);height:calc(100% - 16px);overflow:visible}
.skc-lines *{fill:none;stroke:color-mix(in srgb,var(--ink) 22%,transparent);stroke-width:1.4;vector-effect:non-scaling-stroke}
.skc-lines .spot{fill:color-mix(in srgb,var(--ink) 22%,transparent)}
.skc-bands{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--skc-n,4),minmax(0,1fr))}
.skc-pitch.is-stale .skc-bands{opacity:.45}
.skc-band{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;min-width:0;padding:8px;border:0;border-left:1px dashed color-mix(in srgb,var(--ink) 30%,transparent);background:transparent;font-family:var(--sans);color:var(--ink);text-align:left;cursor:pointer;overflow:hidden}
.skc-band:first-child{border-left:0}
.skc-band[aria-pressed="false"]{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 8%,transparent) 0 5px,transparent 5px 11px)}
.skc-band:hover{background-color:color-mix(in srgb,var(--accent) 7%,transparent)}
.skc-band:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.skc-band .fill{position:absolute;inset:0;z-index:0;background:color-mix(in srgb,var(--accent) 17%,transparent);transform-origin:left center;transform:scaleX(0)}
.skc-band[aria-pressed="true"] .fill{transform:scaleX(1)}
.skc-pitch.is-sweep .skc-band[aria-pressed="true"] .fill{animation:skc-fill .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms) both}
@keyframes skc-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.skc-band .hd,.skc-band .ft{position:relative;z-index:1;display:flex;flex-direction:column;max-width:100%;padding:2px 5px;border-radius:5px;background:color-mix(in srgb,var(--paper) 78%,transparent)}
.skc-band .hd b{font-size:12.5px;font-weight:750;line-height:1.3;white-space:nowrap}
.skc-band .hd small{font-size:11px;line-height:1.3;color:var(--muted);white-space:nowrap}
.skc-band .ft b{font-size:16px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.skc-band .ft small{font-size:10.5px;line-height:1.2;color:var(--muted)}
.skc-band .ft small:empty{display:none}
.skc-band[aria-pressed="false"] .ft b{font-size:12.5px;font-weight:700;color:var(--muted)}
.skc-band .ls{display:none}
.skc-pitch.is-tight .skc-band .lf,.skc-pitch.is-tight .skc-band .hd small,.skc-pitch.is-tight .skc-band[aria-pressed="false"] .ft{display:none}
.skc-pitch.is-tight .skc-band .ls{display:inline}
@container skc (max-width:419px){
  .skc-band{padding:6px 5px}
  .skc-band .hd,.skc-band .ft{padding:1px 4px}
  .skc-band .ft b{font-size:14px}
}

/* 판 길이·판 수 */
.skc-time{margin-top:10px}
.skc-time-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.skc-time .v2-label{display:block;margin-bottom:5px}
.skc-chips{margin-top:8px;gap:4px}
.skc-chips button{height:28px;padding:0 9px;font-size:12px}
.skc-legend{list-style:none;display:flex;flex-wrap:wrap;gap:3px 14px;margin:9px 0 0;padding:0;font:600 11.5px/1.4 var(--sans);color:var(--muted)}
.skc-legend li::before{content:"";display:inline-block;width:12px;height:10px;margin-right:5px;border:1px solid var(--line);border-radius:2px;vertical-align:-1px}
.skc-legend .on::before{background:color-mix(in srgb,var(--accent) 17%,var(--paper))}
.skc-legend .off::before{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 18%,transparent) 0 2px,var(--paper) 2px 4px)}

/* 경기 종류 = 고르는 막대 목록(옆 경기장 높이만큼 늘어남) */
.skc-types{display:flex;flex:1 1 auto;flex-direction:column;gap:6px}
.skc-type{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(36px,1fr) auto;grid-template-areas:"nm bar val";align-items:center;gap:6px 12px;min-height:44px;padding:6px 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),box-shadow var(--ease)}
.skc-type:hover{border-color:var(--line)}
.skc-type:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skc-type[aria-checked="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.skc-type .nm{grid-area:nm;min-width:0}
.skc-type .nm b{display:block;font-size:13.5px;font-weight:750;line-height:1.35}
.skc-type .nm small{display:block;font-size:11.5px;line-height:1.4;color:var(--muted)}
.skc-type .bar{grid-area:bar;height:8px;border-radius:4px;background:var(--soft);overflow:hidden}
.skc-type .bar i{display:block;height:100%;width:0;background:var(--line);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.skc-type[aria-checked="true"] .bar i{background:var(--accent)}
.skc-type .val{grid-area:val;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.skc-type .val b{display:block;font-size:15px;font-weight:800;line-height:1.3}
.skc-type .val i{font-style:normal;font-size:11px;font-weight:600;color:var(--muted)}
.skc-type .val small{display:block;font-size:11px;line-height:1.35;color:var(--muted)}
@container skc (max-width:439px){
  .skc-type{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm val" "bar bar"}
}

/* 체중·포지션·복사: 넓으면 한 줄(단추는 빈 라벨 자리로 입력칸과 맞춤), 좁으면 체중 | 포지션 + 단추 줄 */
.skc-body-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px 16px}
.skc-body .v2-f>.v2-label{display:block;margin:0 0 5px}
.skc-pos{display:flex;gap:4px;flex-wrap:nowrap}
.skc-pos button{flex:1 1 auto;height:var(--v2-ctl,42px);padding:0 10px;white-space:nowrap}
.skc-pos button:disabled{opacity:.5;cursor:not-allowed}
.skc-units{margin-top:6px;gap:3px}
.skc-units button{height:26px;padding:0 9px;font-size:12px}
.skc-acts{grid-column:1 / -1;min-width:0}
.skc-acts-l{display:none}
.skc-acts-b{display:flex;flex-wrap:wrap;gap:8px}
@container skc (min-width:620px){
  .skc-body-row{grid-template-columns:minmax(150px,230px) auto minmax(0,1fr)}
  .skc-acts{grid-column:auto}
  .skc-acts-l{display:block;margin:0 0 5px}
  .skc-acts-b{justify-content:flex-end}
  .skc-acts .v2-btn{height:var(--v2-ctl,42px)}
}
@container skc (max-width:459px){
  .skc-body-row{grid-template-columns:minmax(0,1fr)} /* 좁으면 체중 · 포지션 · 단추를 한 줄씩(포지션 단추 두 개가 한 줄 전체를 씀) */
  .skc-pos button{flex:1 1 0;min-width:0}
}
.skc-body .skc-help{margin-top:8px}
.skc-body .v2-status:empty{display:none}
.skc-body .v2-status{display:block;margin-top:6px}

/* 칸: 2열(마지막 칸은 한 줄 전체) → 넓으면 5열 */
.skc-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;padding-top:12px;border-top:1px solid var(--soft)}
.skc-cells:empty{display:none}
.skc-cells.is-empty{visibility:hidden}
.skc-cells>div{min-width:0}
.skc-cells>div:last-child{grid-column:1 / -1}
.skc-cells .v2-label{display:block;margin-bottom:3px}
.skc-cells b{display:block;font-family:var(--sans);font-size:20px;font-weight:800;line-height:1.25;color:var(--ink);font-variant-numeric:tabular-nums}
.skc-cells b i{font-style:normal;font-size:12px;font-weight:600;color:var(--muted)}
.skc-cells small{display:block;margin-top:2px;font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}
@container skc (min-width:600px){
  .skc-cells{grid-template-columns:repeat(5,minmax(0,1fr))}
  .skc-cells>div:last-child{grid-column:auto}
}

/* 아래: 시간 × 종류 표 | 프로 비교 */
.skc-more{display:grid;grid-template-columns:minmax(0,1fr)}
.skc-tblbox,.skc-probox{min-width:0;padding:16px 18px}
.skc-probox{border-top:1px solid var(--soft)}
@container skc (min-width:760px){
  .skc-more{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
  .skc-probox{border-top:0;border-left:1px solid var(--soft)}
}
.skc-tblwrap{overflow-x:auto}
.skc-tbl{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13px;color:var(--ink)}
.skc-tbl th,.skc-tbl td{padding:7px 8px;border-bottom:1px solid var(--soft);white-space:nowrap}
.skc-tbl thead th{font-size:11.5px;font-weight:650;color:var(--muted);text-align:right;border-bottom:2px solid var(--soft)}
.skc-tbl thead th:first-child,.skc-tbl tbody th{text-align:left}
.skc-tbl tbody th{font-weight:650;color:var(--muted)}
@container skc (max-width:459px){
  .skc-tbl{font-size:12.5px}
  .skc-tbl th,.skc-tbl td{padding:6px 4px}
  .skc-tbl th{white-space:normal;line-break:strict} /* 긴 언어의 머리글은 줄바꿈(장음 기호만 넘어가지 않게), 숫자 칸은 한 줄 */
}
.skc-tbl td{text-align:right;font-weight:650;font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--accent) var(--a,0%),transparent)}
.skc-tbl thead th.is-now{color:var(--ink);border-bottom-color:var(--accent)}
.skc-tbl td.is-now{box-shadow:inset 1px 0 0 var(--accent),inset -1px 0 0 var(--accent)}
.skc-tbl tbody tr:last-child td.is-now{box-shadow:inset 1px 0 0 var(--accent),inset -1px 0 0 var(--accent),inset 0 -1px 0 var(--accent)}
.skc-tbl tr.is-now th,.skc-tbl tr.is-now td{font-weight:850;color:var(--ink)}
.skc-tblbox>.skc-help{margin-top:8px}
.skc-bars{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.skc-bars li{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(36px,1fr) auto;align-items:center;gap:10px;font-family:var(--sans)}
.skc-bars .nm{min-width:0;font-size:12.5px;font-weight:650;line-height:1.35;color:var(--ink)}
.skc-bars .nm small{display:block;font-size:11px;font-weight:500;color:var(--muted)}
.skc-bars .bar{height:10px;border-radius:5px;background:var(--soft);overflow:hidden}
.skc-bars .bar i{display:block;height:100%;width:0;background:var(--line);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.skc-bars li[data-pro="mine"] .bar i{background:var(--accent)}
.skc-bars b{font-size:14px;font-weight:800;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.skc-bars b i{font-style:normal;font-size:11px;font-weight:600;color:var(--muted)}
.skc-probox #skcProCap{margin-top:8px}
.skc-bars--km{margin-top:12px;padding-top:12px;border-top:1px dashed var(--soft)}
.skc-probox>.skc-help:last-child{margin-top:8px}

@media (prefers-reduced-motion:reduce){
  .skc-split-bar i,.skc-type .bar i,.skc-bars .bar i{transition:none}
  .skc-pitch.is-sweep .skc-band .fill{animation:none}
}