/* 비타민 D 계산기 — 결과 머리(걸리는 분 + 노출 띠) → [하늘 | 나(앞·뒤 몸 그림·피부색)] → 연중 지도. 검사 수치 모드는 [입력 | 결과·눈금].
   띠·지도·눈금 칸은 밝은 고정색 + 어두운 고정 글자(--vtd-t)라 라이트·다크 모두 대비를 지키고, 화상 구간·못 채움 칸은 빗금으로 색이 아닌 구분도 준다. */
.vtd-work{container:vtd / inline-size;--vtd-t:#1f1a14;--vtd-sun:#f2b134;--vtd-sun2:#f7d27c;--vtd-burn:#e9a79a;
  --vtd-s1:#f6e0cf;--vtd-s2:#ecc6a6;--vtd-s3:#d6a47c;--vtd-s4:#b47a4f;--vtd-s5:#875233;--vtd-s6:#563220;
  --vtd-b0:#e7a13a;--vtd-b1:#efba5d;--vtd-b2:#f4cf88;--vtd-b3:#f8e1b4;--vtd-b4:#fbeed5;--vtd-b5:#f1ebe2}
.vtd-bar{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--soft)}
.vtd-mdhint{margin:0;flex:1 1 220px}
.vtd-pt{margin:0 0 10px;font-family:var(--sans);font-size:13px;font-weight:750;color:var(--ink)}
.vtd-help{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.vtd-help.is-error{color:var(--accent)}
.vtd-segf{display:flex;flex-direction:column;gap:5px;min-width:0}
.vtd-segf > .v2-label{display:block}

/* 햇빛 배치: 툴 폭 760px 이상이면 하늘 | 나 두 열 */
.vtd-sun,.vtd-lab{display:grid;grid-template-columns:minmax(0,1fr)}
.vtd-sun[hidden],.vtd-lab[hidden],.vtd-food[hidden]{display:none}
.vtd-sun{grid-template-areas:"head" "sky" "me" "year"}
.vtd-head{grid-area:head;display:grid;gap:14px 22px;padding:16px 18px;border-bottom:1px solid var(--soft)}
.vtd-sky{grid-area:sky;margin:0;padding:16px 18px;border-bottom:1px solid var(--soft);container:vtdsky / inline-size}
.vtd-me{grid-area:me;margin:0;padding:16px 18px;border-bottom:1px solid var(--soft)}
.vtd-year{grid-area:year;padding:16px 18px}
@container vtd (min-width:760px){
  .vtd-sun{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head head" "sky me" "year year"}
  .vtd-sky{border-right:1px solid var(--soft)}
}
@container vtd (min-width:640px){
  .vtd-head{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"sum dose" "food food" "acts acts"}
  .vtd-sum{grid-area:sum} .vtd-dose{grid-area:dose} .vtd-food{grid-area:food} .vtd-head .vtd-acts{grid-area:acts}
}

/* 결과 머리 */
.vtd-sum .v2-big{flex-wrap:wrap;margin-top:6px}
.vtd-sum .v2-big small{margin-right:6px}
.vtd-sum .v2-sub{margin-top:10px}
.vtd-work[data-st="over"] .vtd-sum .v2-big,.vtd-work[data-st="none"] .vtd-sum .v2-big,.vtd-work[data-st="area0"] .vtd-sum .v2-big{font-size:34px}
.vtd-dose{display:flex;flex-direction:column;gap:10px;min-width:0}
.vtd-track{position:relative;padding-top:26px}
.vtd-tk-bar{position:relative;height:16px;border:1px solid var(--line);border-radius:8px;background:var(--paper);overflow:hidden}
.vtd-tk-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--vtd-sun2),var(--vtd-sun));transition:width .45s cubic-bezier(.2,.7,.2,1)}
.vtd-tk-fill.is-full{background:linear-gradient(90deg,var(--vtd-sun2),var(--vtd-sun) 70%,#e19422)}
.vtd-tk-burnz{position:absolute;top:0;bottom:0;right:0;background:repeating-linear-gradient(135deg,var(--vtd-burn) 0 4px,rgba(233,167,154,.35) 4px 8px)}
.vtd-tk-m{position:absolute;top:20px;bottom:18px;width:0;border-left:2px solid var(--vtd-t)}
.vtd-tk-m em{position:absolute;bottom:22px;left:0;transform:translateX(-50%);font-style:normal;font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--ink);white-space:nowrap;background:var(--card);padding:0 3px}
.vtd-tk-m--burn{border-left-color:#b23a22}
.vtd-tk-m--burn em{color:#b23a22}
.vtd-tk-m.is-l em{transform:none} .vtd-tk-m.is-r em{transform:translateX(-100%)} /* 띠 끝에서는 글자를 안쪽으로 */
.vtd-tk-m--tg.is-low em{bottom:auto;top:calc(100% + 2px)} /* 화상 표식과 가까우면 띠 아래로 */
.vtd-track{padding-bottom:2px}
.vtd-tk-ax{display:flex;justify-content:space-between;margin-top:3px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vtd-tk-m--burn{border-left-color:#f08f78} :root:not([data-theme="light"]) .vtd-tk-m--burn em{color:#f08f78} :root:not([data-theme="light"]) .vtd-tk-m{border-left-color:var(--ink)}}
:root[data-theme="dark"] .vtd-tk-m--burn{border-left-color:#f08f78} :root[data-theme="dark"] .vtd-tk-m--burn em{color:#f08f78} :root[data-theme="dark"] .vtd-tk-m{border-left-color:var(--ink)}
.vtd-min{display:grid;grid-template-columns:auto minmax(0,1fr) 96px;align-items:center;gap:10px}
.vtd-min > label{margin:0}
.vtd-min input[type="range"]{width:100%;accent-color:var(--vtd-sun)}
.vtd-made{margin:0;font-family:var(--sans);font-size:13.5px;font-weight:650;line-height:1.5;color:var(--ink)}
.vtd-made.is-ok::before{content:"✓ ";color:#2f7d3e}
.vtd-made.is-warn,.vtd-made.is-error{color:var(--accent)}
.vtd-food{padding-top:12px;border-top:1px dashed var(--soft)}
.vtd-food > .v2-label{margin:0 0 8px}
.vtd-foods{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:6px 18px;margin:0;padding:0;list-style:none}
.vtd-foods li{display:grid;grid-template-columns:minmax(0,1fr) 64px auto;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--soft)}
.vtd-fn{display:flex;flex-direction:column;min-width:0;font-family:var(--sans)}
.vtd-fn b{font-size:13px;font-weight:700;color:var(--ink)}
.vtd-fn small{font-size:11.5px;color:var(--muted)}
.vtd-fbar{height:8px;border-radius:4px;background:var(--soft);overflow:hidden}
.vtd-fbar i{display:block;height:100%;background:var(--vtd-sun)}
.vtd-fk{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.vtd-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* 하늘 */
.vtd-where{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.vtd-city{grid-column:1 / -1}
.vtd-select{width:100%;height:var(--v2-ctl,42px);padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink)}
.vtd-where .v2-input input[type="date"],.vtd-where .v2-input input[type="time"]{min-width:0;text-align:left}
.vtd-time{position:relative}
.vtd-now{flex:none;padding:0 10px;border:0;border-left:1px solid var(--soft);background:var(--wash);font-family:var(--sans);font-size:12px;font-weight:650;color:var(--ink);cursor:pointer}
.vtd-now:hover{background:var(--btn)}
@container vtdsky (max-width:460px){ .vtd-where{grid-template-columns:minmax(0,1fr)} } /* 날짜·시각 칸이 좁으면 시각 값이 잘린다(id 'Sekarang' 버튼이 가장 넓음) */
.vtd-uv{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:10px 14px;align-items:end;margin-top:16px}
.vtd-gauge{min-width:0}
.vtd-uv .vtd-help,.vtd-glass{grid-column:1 / -1}
.vtd-uv .vtd-help{margin:0}
.vtd-g-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-family:var(--sans)}
.vtd-g-top b{font-size:20px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.vtd-g-top small{font-size:11.5px;color:var(--muted)}
.vtd-g-cat{padding:1px 8px;border-radius:var(--radius);font-size:12px;font-weight:750;color:var(--vtd-t);background:#9fd38f}
.vtd-g-cat[data-c="1"]{background:#f5e27a} .vtd-g-cat[data-c="2"]{background:#f7b07a} .vtd-g-cat[data-c="3"]{background:#f19a9a} .vtd-g-cat[data-c="4"]{background:#c9b5ef}
.vtd-g-bar{position:relative;height:10px;margin-top:8px;border-radius:5px;background:linear-gradient(90deg,#9fd38f 0 23.08%,#f5e27a 23.08% 46.15%,#f7b07a 46.15% 61.54%,#f19a9a 61.54% 84.62%,#c9b5ef 84.62%)}
.vtd-g-mark{position:absolute;top:-4px;width:4px;height:18px;margin-left:-2px;border-radius:2px;background:var(--ink);box-shadow:0 0 0 2px var(--card);transition:left .45s cubic-bezier(.2,.7,.2,1)}
.vtd-g-ticks{position:relative;height:14px;margin-top:3px;font-family:var(--mono);font-size:10px;color:var(--muted)}
.vtd-g-ticks span{position:absolute;transform:translateX(-50%)} .vtd-g-ticks span:first-child{transform:none}
.vtd-glass{margin-top:2px}
.vtd-day{margin-top:16px;padding-top:14px;border-top:1px dashed var(--soft)}
.vtd-day > .v2-label{display:block;margin-bottom:6px}
.vtd-day svg{display:block;width:100%;height:auto;cursor:crosshair;overflow:visible}
.vtd-day .vtd-d-area{fill:var(--vtd-sun2);opacity:.75}
.vtd-day .vtd-d-line{fill:none;stroke:#c98a12;stroke-width:1.6}
.vtd-day .vtd-d-uv3{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.vtd-day .vtd-d-ax{stroke:var(--soft);stroke-width:1}
.vtd-day text{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.vtd-day .vtd-d-pk{font-family:var(--sans);font-size:10.5px;font-weight:700;fill:var(--ink)}
.vtd-day .vtd-d-now{stroke:var(--ink);stroke-width:1.6}
.vtd-day .vtd-d-dot{fill:var(--ink);stroke:var(--card);stroke-width:2}

/* 나: 몸 그림 + 조절 */
.vtd-me{display:flex;flex-direction:column;gap:14px}
.vtd-me > .vtd-pt{margin:0}
.vtd-sky > .vtd-pt{margin-bottom:14px} /* 나 열(gap 14px)과 첫 칸 높이를 맞춘다 */
.vtd-fig{display:flex;align-items:center;gap:14px}
.vtd-bodies{display:flex;gap:6px;flex:none}
.vtd-body{margin:0;text-align:center}
.vtd-body svg{display:block;width:84px;height:172px}
.vtd-body figcaption{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.vtd-rg{cursor:pointer;fill:var(--soft);stroke:var(--line);stroke-width:1;transition:fill .2s ease}
.vtd-rg.is-on{fill:var(--vtd-sun);stroke:#a86b10}
.vtd-rg:hover{stroke:var(--accent);stroke-width:1.6}
.vtd-rg:focus{outline:none} .vtd-rg:focus-visible{stroke:var(--accent);stroke-width:2.5}
.vtd-scalp{fill:var(--wash);stroke:var(--line);stroke-dasharray:2 2}
.vtd-area{margin:0;flex:1 1 auto;min-width:0;font-family:var(--sans);font-size:13px;font-weight:650;line-height:1.5;color:var(--ink)}
.vtd-pre{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))} /* 한 줄 고정: 옆 열 첫 칸(도시 선택)과 위·아래를 맞춘다 */
.vtd-pre button{height:var(--v2-ctl,42px);padding:0 4px;font-size:12px;white-space:normal;line-height:1.12} /* 라벨은 두 줄 안(로케일 문구도 짧게) */
@container vtd (max-width:459px){ .vtd-pre{grid-template-columns:repeat(3,minmax(0,1fr))} } /* 휴대폰 한 열: 세 칸 두 줄 */
.vtd-skins{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.vtd-skins button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;height:58px;padding:4px 2px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer}
.vtd-skins button i{width:26px;height:26px;border-radius:50%;background:var(--sw);border:1px solid rgba(31,26,20,.25)}
.vtd-skins button[aria-checked="true"]{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.vtd-skins + .vtd-help{margin-top:0}

/* 연중 지도 */
.vtd-year-head .vtd-help{margin:0 0 10px}
.vtd-map-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.vtd-map{display:grid;grid-template-columns:40px repeat(var(--cols,11),minmax(26px,1fr));gap:2px;min-width:calc(40px + var(--cols,11) * 28px)}
.vtd-mh{font-family:var(--mono);font-size:10.5px;color:var(--muted);text-align:center;padding-bottom:2px}
.vtd-mh:first-child{position:sticky;left:0;z-index:1;background:var(--card)}
.vtd-ml{display:flex;align-items:center;font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--muted);white-space:nowrap;position:sticky;left:0;z-index:1;background:var(--card)} /* 가로로 넘겨도 달 이름 고정 */
.vtd-ml.is-cur{color:var(--ink)}
.vtd-c{display:grid;place-items:center;height:24px;border-radius:2px;font-family:var(--mono);font-size:10.5px;color:var(--vtd-t);cursor:pointer;font-variant-numeric:tabular-nums}
.vtd-c-b0{background:var(--vtd-b0)} .vtd-c-b1{background:var(--vtd-b1)} .vtd-c-b2{background:var(--vtd-b2)} .vtd-c-b3{background:var(--vtd-b3)} .vtd-c-b4{background:var(--vtd-b4)} .vtd-c-b5{background:var(--vtd-b5)}
.vtd-c-over{background:repeating-linear-gradient(135deg,#efc3b8 0 3px,#fbe9e4 3px 6px)}
.vtd-c-none{background:transparent;border:1px dashed var(--soft);cursor:default}
.vtd-c:hover:not(.vtd-c-none){outline:1px solid var(--ink)}
.vtd-c.is-sel{outline:2px solid var(--ink);outline-offset:1px;font-weight:700}
.vtd-cell{min-height:1.5em;margin:8px 0 0;font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink)}
.vtd-legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.vtd-legend li{display:flex;align-items:center;gap:5px}
.vtd-legend i{display:inline-block;width:14px;height:12px;border-radius:2px}

/* 검사 수치 */
.vtd-lab{grid-template-areas:"out" "in"}
.vtd-labin{grid-area:in;display:flex;flex-direction:column;gap:14px;margin:0;padding:16px 18px}
.vtd-labout{grid-area:out;display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-bottom:1px solid var(--soft)}
.vtd-labout .v2-sub{margin:0}
.vtd-labout .v2-sub.is-error{color:var(--accent)}
@container vtd (min-width:700px){
  .vtd-lab{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:"in out"}
  .vtd-labin{border-right:1px solid var(--soft)} .vtd-labout{border-bottom:0}
}
.vtd-scale{padding-top:26px}
.vtd-sc-bar{position:relative;height:22px;border-radius:3px;overflow:visible}
.vtd-sc-bar > i{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.vtd-sc-bar > i em{font-style:normal;font-family:var(--sans);font-size:11px;font-weight:700;color:var(--vtd-t);white-space:nowrap}
.vtd-sc-def{background:#f2b5aa;border-radius:3px 0 0 3px} .vtd-sc-low{background:#f3dba0} .vtd-sc-ok{background:#bfe3c9} .vtd-sc-high{background:repeating-linear-gradient(135deg,#ddd0f2 0 4px,#ece4f8 4px 8px);border-radius:0 3px 3px 0}
.vtd-sc-arrow{position:absolute;top:9px;height:4px;background:var(--vtd-t);opacity:.55}
.vtd-sc-m{position:absolute;top:-6px;bottom:-6px;width:0;border-left:3px solid var(--vtd-t)}
.vtd-sc-m em{position:absolute;bottom:calc(100% + 2px);left:0;transform:translateX(-50%);font-style:normal;font-family:var(--sans);font-size:11.5px;font-weight:750;color:var(--ink);white-space:nowrap;background:var(--card);padding:0 3px}
.vtd-sc-m--goal{border-left-style:dashed}
.vtd-sc-m--goal em{bottom:auto;top:calc(100% + 2px)}
.vtd-sc-ax{position:relative;height:30px;margin-top:2px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.vtd-sc-ax span{position:absolute;bottom:0;transform:translateX(-50%)} .vtd-sc-ax span:first-child{transform:none} .vtd-sc-ax span:last-child{transform:translateX(-100%)}
.vtd-ul-t{margin:4px 0 6px;font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink)}
.vtd-ul-bar{position:relative;height:12px;border:1px solid var(--soft);border-radius:6px;background:var(--paper);margin-bottom:20px}
.vtd-ul-bar > i{position:absolute;top:0;bottom:0}
.vtd-ul-li{left:0;background:var(--muted);opacity:.55;border-radius:6px 0 0 6px} .vtd-ul-lo{background:var(--vtd-sun)} .vtd-ul-hi{background:repeating-linear-gradient(135deg,var(--vtd-sun) 0 3px,var(--vtd-sun2) 3px 6px)}
.vtd-ul-line{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px solid #b23a22}
.vtd-ul-line em{position:absolute;top:calc(100% + 1px);left:0;transform:translateX(-50%);font-style:normal;font-family:var(--sans);font-size:11px;font-weight:700;color:#b23a22;white-space:nowrap}

@media (prefers-reduced-motion:reduce){ .vtd-tk-fill,.vtd-g-mark,.vtd-rg{transition:none} }