/* 아이 성장·예방접종 도구 2종(성장도표 백분위·영유아 예방접종 일정) 전용 스타일 */
/* 백분위수 곡선 */
.kd-chart{min-width:0}
.kd-svg{width:100%;height:auto;display:block;max-height:320px}
/* 글자 크기는 tools-kids.js 가 그릴 때 style 로 넣는다. 좁은 화면에서 viewBox 가 줄어드는 만큼 키워야 읽힌다 */
.kd-ax{fill:var(--muted)}
.kd-plab{fill:var(--ink2);font-weight:700}
/* 항목별 계산 표. '체질량지수'·'백분위수'가 글자 단위로 세로로 접히지 않게 한다.
   열 차례를 항목·측정값·백분위수·Z·L·M·S 로 두어 좁은 화면에서도 백분위수가 첫 화면에 들어온다(L·M·S 는 가로로 끌어 본다) */
.kd-t th,.kd-t td:first-child{white-space:nowrap}
/* 일곱 칸을 1280px 데스크톱의 결과 열(482px)에 넣으면 마지막 S 칸 숫자가 오른쪽에서 잘린다.
   L·M·S 는 산식을 확인하는 참고 값이라 칸 여백과 글자를 줄여 열 폭 안에 들어오게 한다 */
.kd-t th:nth-child(n+5),.kd-t td:nth-child(n+5){padding-left:5px;padding-right:5px;font-size:12.5px}
/* 백분위수 곡선. 50백분위수만 굵은 본문색, 나머지는 옅은 본문색으로 그려 다크에서도 보이게 한다 */
.kd-pc{stroke:var(--ink2);stroke-width:1.1;opacity:.45}
.kd-p50{stroke:var(--ink);stroke-width:2.2;opacity:.9}
/* 다음 접종 이름은 감염병 이름이라 길다. 글자 사이가 아니라 낱말 사이에서 접는다 */
.kd-next{font-size:32px;line-height:1.22;word-break:keep-all;overflow-wrap:break-word}
@media(max-width:420px){.kd-next{font-size:27px}}
/* 접종 달력 */
.kd-mo{margin-top:14px}
.kd-mo:first-child{margin-top:0}
.kd-mo h4{font-size:13px;font-weight:700;color:var(--ink2);margin:0 0 6px;letter-spacing:.01em}
.kd-mo h4 small{font-weight:600;color:var(--muted);font-size:12px;margin-left:4px}
.kd-row{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);margin-bottom:6px;font-size:14px}
.kd-row.on{background:var(--soft)}
.kd-row input[type=checkbox]{margin-top:3px;flex:none}
.kd-main{flex:1;min-width:0;display:block}
.kd-row.on .kd-main b{text-decoration:line-through;color:var(--muted)}
.kd-vac{color:var(--ink2);font-size:13px}
.kd-when{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.kd-note{display:block;color:var(--muted);font-size:12px;margin-top:3px;line-height:1.45}
.kd-badge{flex:none;align-self:center;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap}
.kd-b-done{background:var(--soft);color:var(--muted)}
.kd-b-late{background:color-mix(in srgb,var(--red) 22%,transparent);color:var(--red)}
.kd-b-now{background:color-mix(in srgb,var(--mint) 22%,transparent);color:var(--mint)}
.kd-b-soon{background:var(--soft);color:var(--ink2)}
@media(max-width:420px){
  .kd-row{padding:8px;font-size:13.5px}
  .kd-badge{font-size:11px;padding:2px 7px}
  .kd-svg{max-height:260px}
}