/* 아이 예상키 계산기 — 결과 머리(카드 두 장 + 판정) → [가족 키 기록 | 키 재기 벽] → 성장 곡선.
   accent는 '우리 아이'(지금 아이 실루엣·지금 곡선·아이 점)에만 쓰고, 부모 키 범위·곡선은 잉크 점선 + wash로 구분한다. */
.cht-work{container:cht / inline-size}
.cht-pt{margin:0 0 10px;font-family:var(--sans);font-size:13px;font-weight:750;color:var(--ink)}
.cht-help{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.cht-work [data-u][hidden]{display:none}

/* 결과 머리 */
.cht-head{display:grid;gap:12px;padding:16px 18px;border-bottom:1px solid var(--soft)}
.cht-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.cht-card{min-width:0}
.cht-card .v2-big{margin-top:6px;flex-wrap:wrap}
.cht-card .v2-sub{margin-top:8px}
.cht-card + .cht-card{padding-top:14px;border-top:1px solid var(--soft)}
@container cht (min-width:560px){
  .cht-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 22px}
  .cht-card + .cht-card{padding:0 0 0 22px;border-top:0;border-left:1px solid var(--soft)}
}
.cht-work[data-st="t"] #chtCardC .v2-big,.cht-work[data-st="none"] #chtCardC .v2-big{font-size:22px}
.cht-verdict{margin:0;font-size:14px;line-height:1.65;color:var(--ink)}
.cht-verdict:empty{display:none}
.cht-verdict .is-err{font-weight:650;color:var(--accent)}
.cht-verdict .is-low{display:block;margin-top:6px;font-weight:650}
.cht-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* 가족 키 기록 | 키 재기 벽 */
.cht-mid{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--soft)}
@container cht (min-width:620px){
  .cht-mid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
  .cht-sheet{border-right:1px solid var(--soft)}
}
.cht-sheet{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 14px;align-content:start;margin:0;padding:16px 18px}
.cht-sheet > .cht-pt,.cht-sheet > .cht-sep,.cht-sheet > .cht-help{grid-column:1 / -1}
.cht-sheet > .cht-pt{margin-bottom:2px}
.cht-row{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center;min-height:var(--v2-ctl,42px)}
.cht-row > .v2-label{display:block;margin:0}
.cht-row > .v2-label em{font-style:normal;font-weight:400;margin-left:5px}
.cht-ctl{min-width:0}
.cht-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.cht-sep{margin:8px 0 0;padding-top:12px;border-top:1px solid var(--soft);font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ink)}
.cht-sheet > .cht-help{margin-top:2px}
/* 기록 칸이 좁으면(툴 폭 375px 이하 한 열, 620~799px 두 열) 라벨을 칸 위로: 나이 쌍(세·개월) 값 자리가 20px 아래로 줄어든다(ja·id align squeeze) */
@container cht (max-width:375px), cht (min-width:620px) and (max-width:799px){
  .cht-sheet{grid-template-columns:minmax(0,1fr)}
  .cht-row{row-gap:5px}
}

.cht-wallbox{display:flex;flex-direction:column;margin:0;padding:16px 18px;min-width:0}
.cht-wall{position:relative;flex:1 1 auto;min-width:0;min-height:210px}
.cht-wsvg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.cht-wrule line{stroke:var(--line);stroke-width:1}
.cht-wrule text{font-family:var(--sans);font-size:10px;fill:var(--muted)}
.cht-wnames{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:5px 6px 0 34px;font-family:var(--sans);font-size:11px;font-weight:600;line-height:1.3;color:var(--muted);text-align:center}
.cht-wnames span{padding:0 2px;overflow-wrap:anywhere}
.cht-wnames .is-off{opacity:.45}
.cht-wfloor{stroke:var(--ink);stroke-width:1.2}
.cht-wfig,.cht-wv{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.cht-wf--fa path,.cht-wf--mo path{fill:color-mix(in srgb, var(--muted) 42%, transparent)}
.cht-wf--now path{fill:var(--accent)}
.cht-wf--adult path{fill:color-mix(in srgb, var(--accent) 10%, transparent);stroke:var(--accent);stroke-width:1.4;stroke-dasharray:4 3}
.cht-wv{font-family:var(--sans);font-size:11px;font-weight:700;fill:var(--ink);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--card);stroke-width:3px;stroke-linejoin:round}
.cht-wband rect{fill:color-mix(in srgb, var(--ink) 6%, transparent);stroke:var(--ink);stroke-opacity:.45;stroke-width:1;stroke-dasharray:3 3}
.cht-wcurve line{stroke:var(--accent);stroke-width:2}

/* 성장 곡선 */
.cht-curve{padding:16px 18px}
.cht-chead{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-bottom:8px}
.cht-chead .cht-pt{margin:0}
.cht-chead .cht-help{margin:0}
.cht-plot{min-width:0}
.cht-psvg{display:block;width:100%;height:auto;overflow:visible;cursor:crosshair}
.cht-pgrid line{stroke:var(--soft);stroke-width:1}
.cht-pgrid line.v{stroke-dasharray:2 3}
.cht-pgrid text,.cht-plines text{font-family:var(--sans);font-size:10px;fill:var(--muted);font-variant-numeric:tabular-nums}
.cht-pgrid text.u{font-size:9.5px}
.cht-plines path{fill:none;stroke:var(--line);stroke-width:1}
.cht-plines path.mid{stroke:var(--muted);stroke-width:1.6}
.cht-ptgt .tline{fill:none;stroke:var(--ink);stroke-opacity:.7;stroke-width:1.3;stroke-dasharray:5 4}
.cht-ptgt .tband{fill:color-mix(in srgb, var(--ink) 9%, transparent);stroke:var(--ink);stroke-opacity:.55;stroke-width:1;stroke-dasharray:2 2}
.cht-ptgt .tmid{stroke:var(--ink);stroke-width:2}
.cht-pproj{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cht-pclip{transition:transform 1s cubic-bezier(.3,.6,.2,1)}
.cht-ppt{fill:var(--accent);stroke:var(--paper);stroke-width:2}
.cht-pend{fill:var(--paper);stroke:var(--accent);stroke-width:2}
.cht-pguide line{stroke:var(--ink);stroke-opacity:.45;stroke-width:1;stroke-dasharray:3 3}
.cht-pguide circle.c{fill:var(--accent);stroke:var(--paper);stroke-width:1.5}
.cht-pguide circle.t{fill:var(--ink);stroke:var(--paper);stroke-width:1.5}
.cht-pguide circle.m{fill:var(--muted);stroke:var(--paper);stroke-width:1.5}
.cht-age{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:6px 12px;margin-top:10px}
.cht-age input[type="range"]{width:100%;margin:0;accent-color:var(--accent)}
.cht-read{grid-column:1 / -1;margin:0;font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--ink);font-variant-numeric:tabular-nums}
.cht-read b{font-weight:750;margin-right:4px}
.cht-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:10px 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.cht-legend li{display:inline-flex;align-items:center;gap:6px}
.cht-legend li::before{content:"";width:18px;height:0;border-top:2px solid var(--line)}
.cht-legend li.c::before{border-top:2.4px solid var(--accent)}
.cht-legend li.t::before{border-top:1.5px dashed var(--ink)}
.cht-legend li.b::before{width:9px;height:12px;border:1px dashed var(--ink);background:color-mix(in srgb, var(--ink) 9%, transparent)}
.cht-legend li.l::before{border-top:1px solid var(--line)}

@media (prefers-reduced-motion:reduce){ .cht-wfig,.cht-wv,.cht-pclip{transition:none} }