/* 일광화상 계산기 — '하루 자외선 시간표': 답 → 그림(그날 UV 곡선 + 나가 있는 시간 띠 + 맨살·선크림 줄) → 언제·어디서 → 피부 타입 띠 → 선크림 | 하늘과 주변.
   그림의 줄 색·빗금은 밝은 고정색이라 라이트·다크 모두 같은 대비를 지키고, 문턱을 넘은 구간은 색이 아닌 빗금으로도 구분한다. */
.sbn-work{container:sbn / inline-size;--sbn-sun:#f2b134;--sbn-sun2:#f7d27c;--sbn-cream:#2f6fa3;--sbn-burn:#b23a22;
  --sbn-s1:#f6e0cf;--sbn-s2:#ecc6a6;--sbn-s3:#d6a47c;--sbn-s4:#b47a4f;--sbn-s5:#875233;--sbn-s6:#563220}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sbn-work{--sbn-cream:#7db6e6;--sbn-burn:#f08f78}}
:root[data-theme="dark"] .sbn-work{--sbn-cream:#7db6e6;--sbn-burn:#f08f78}
.sbn-pt{margin:0;font-family:var(--sans);font-size:13px;font-weight:750;color:var(--ink)}
.sbn-help{margin:0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.sbn-help.is-error{color:var(--accent)}
.sbn-help[hidden]{display:none}
.sbn-segf{display:flex;flex-direction:column;gap:5px;min-width:0}
.sbn-segf > .v2-label{display:block}

/* 결과: 답 | 버튼 → 그림 → 언제·어디서 */
.sbn-res{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"ans" "acts" "day" "when";gap:14px 20px;padding:16px 18px 18px;border-bottom:1px solid var(--soft)}
.sbn-ans{grid-area:ans;min-width:0}
.sbn-ans .v2-big{flex-wrap:wrap;margin-top:6px}
.sbn-ans .v2-big small{font-family:var(--sans);font-size:14px}
.sbn-work[data-st="safe"] .sbn-ans .v2-big{font-size:34px}
.sbn-ans .v2-sub.is-error{color:var(--accent)}
.sbn-line{margin:8px 0 0;font-family:var(--sans);font-size:13px;font-weight:650;line-height:1.5;color:var(--ink)}
.sbn-line::before{content:"";display:inline-block;width:9px;height:7px;margin-right:6px;background:var(--sbn-cream);clip-path:polygon(0 0,100% 0,50% 100%);vertical-align:1px}
.sbn-line[hidden]{display:none}
.sbn-acts{grid-area:acts;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sbn-day{grid-area:day;min-width:0}
@container sbn (min-width:640px){
  .sbn-res{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ans acts" "day day" "when when"}
  .sbn-acts{align-self:start;justify-content:flex-end}
}

/* 그림 */
.sbn-svg{border-radius:var(--radius);cursor:crosshair;touch-action:pan-y;outline-offset:3px}
.sbn-svg:focus-visible{outline:2px solid var(--ink)}
.sbn-svg svg{display:block;width:100%;height:auto;overflow:visible}
.sbn-svg .sbn-win{fill:var(--paper);stroke:var(--line);stroke-dasharray:3 3}
.sbn-svg .sbn-area{fill:var(--sbn-sun2);opacity:.8}
.sbn-svg .sbn-uvl{fill:none;stroke:#c98a12;stroke-width:1.6}
.sbn-svg .sbn-uve{fill:none;stroke:#c98a12;stroke-width:1.3;stroke-dasharray:4 3}
.sbn-svg .sbn-uv3{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3;opacity:.7}
.sbn-svg .sbn-ax,.sbn-svg .sbn-tick{stroke:var(--line);stroke-width:1}
.sbn-svg .sbn-t{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.sbn-svg .sbn-pk{font-family:var(--sans);font-size:11px;font-weight:700;fill:var(--ink)}
.sbn-svg .sbn-pkd{fill:var(--ink);stroke:var(--card);stroke-width:2}
.sbn-svg .sbn-ln-t{font-family:var(--sans);font-size:10.5px;font-weight:700;fill:var(--muted)}
.sbn-svg .sbn-lane{fill:var(--wash);stroke:var(--line)}
.sbn-svg .sbn-burn{stroke:var(--sbn-burn);stroke-width:2}
.sbn-svg .sbn-burnd{fill:var(--sbn-burn)}
.sbn-svg .sbn-app{fill:var(--sbn-cream)}
.sbn-svg .sbn-app.is-after{opacity:.45}
.sbn-svg .sbn-off{fill:none;stroke:var(--sbn-cream);stroke-width:1.3}
.sbn-svg .sbn-cur{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:2 2}
.sbn-lanes{display:grid;gap:3px;margin:8px 0 0;padding:0;list-style:none}
.sbn-ln{display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 8px;font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--ink)}
.sbn-ln > i{flex:none;align-self:center;width:14px;height:9px;border-radius:2px;background:linear-gradient(90deg,#fdf0d6,#f4c46a,#e28022)}
.sbn-ln.is-plan > i{box-shadow:0 -3px 0 -1px var(--sbn-cream)}
.sbn-ln b{font-weight:750}
.sbn-ln em{font-style:normal;font-size:12px;color:var(--muted)}
.sbn-lg{display:flex;flex-wrap:wrap;gap:3px 14px;margin-top:3px;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.sbn-lg i{display:inline-block;width:14px;height:9px;margin-right:5px;border-radius:2px;vertical-align:-1px}
.sbn-lg-fill{background:linear-gradient(90deg,#fdf0d6,#f4c46a,#e28022)}
.sbn-lg-over{background:repeating-linear-gradient(45deg,#d9573d 0 2px,#f3b6a6 2px 4px)}
.sbn-lg .sbn-lg-app{width:9px;height:7px;background:var(--sbn-cream);clip-path:polygon(0 0,100% 0,50% 100%);border-radius:0}
.sbn-lg-after{background:#f4c46a;opacity:.42}
.sbn-lg .sbn-lg-off{width:10px;height:8px;background:var(--sbn-cream);border-radius:0;clip-path:polygon(evenodd,0 0,100% 0,50% 100%,0 0,22% 14%,50% 72%,78% 14%,22% 14%)}
.sbn-read{min-height:1.5em;margin:6px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.sbn-read.is-on{color:var(--ink);font-weight:650}
.sbn-delay{margin-top:4px}

/* 언제·어디서: 그림의 시간축 바로 아래 */
.sbn-when{grid-area:when;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;margin:0;padding-top:14px;border-top:1px dashed var(--soft)}
.sbn-when > .sbn-help,.sbn-when > .v2-f:nth-child(-n+2){grid-column:1 / -1}
@container sbn (min-width:470px){ .sbn-when > .v2-f:nth-child(-n+2){grid-column:auto} }
@container sbn (min-width:700px){ .sbn-when{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.05fr) minmax(0,1fr)} }
.sbn-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)}
.sbn-when .v2-input input[type="time"]{text-align:left}
.sbn-lrow{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 5px}
.sbn-lrow label{margin:0}
.sbn-now{padding:0;border:0;background:none;font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.sbn-now:hover{color:var(--accent)}

/* 피부 타입 띠: 버튼마다 맨살로 붉어지기까지 걸리는 시간 */
.sbn-skin{margin:0;padding:16px 18px;border-bottom:1px solid var(--soft)}
.sbn-skin-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-bottom:8px}
.sbn-skins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
@container sbn (min-width:560px){ .sbn-skins{grid-template-columns:repeat(6,minmax(0,1fr))} }
.sbn-skins button{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"sw r" "m m";align-items:center;gap:4px 7px;min-width:0;padding:8px 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);text-align:left;font-family:var(--sans);cursor:pointer;transition:border-color var(--ease),box-shadow var(--ease)}
.sbn-skins button:hover{border-color:var(--line)}
.sbn-skins button i{grid-area:sw;width:20px;height:20px;border-radius:50%;background:var(--sw);border:1px solid rgba(31,26,20,.25)}
.sbn-skins button b{grid-area:r;font-size:11.5px;font-weight:700;color:var(--muted)}
.sbn-sk-m{grid-area:m;font-size:13.5px;font-weight:750;line-height:1.25;color:var(--ink);font-variant-numeric:tabular-nums}
.sbn-skins button[aria-checked="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.sbn-skins button[aria-checked="true"] b{color:var(--ink)}
.sbn-skin > .sbn-help{margin-top:8px}

/* 선크림 | 하늘과 주변 */
.sbn-ctl{display:grid;grid-template-columns:minmax(0,1fr)}
.sbn-sun,.sbn-env{display:flex;flex-direction:column;gap:14px;min-width:0;margin:0;padding:16px 18px}
.sbn-sun{border-bottom:1px solid var(--soft)}
@container sbn (min-width:700px){
  .sbn-ctl{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .sbn-sun{border-bottom:0;border-right:1px solid var(--soft)}
}
.sbn-spf{display:grid;grid-template-columns:repeat(auto-fit,minmax(46px,1fr))}
.sbn-am{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.sbn-am button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:auto;min-height:46px;padding:5px 4px;line-height:1.2}
.sbn-am button b{font-weight:700}
.sbn-am button small{font-size:11px;font-weight:600;opacity:.8}
.sbn-reg,.sbn-sf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.sbn-reg button,.sbn-sf button{height:auto;min-height:30px;padding:5px 8px;line-height:1.25}
.v2-seg button:disabled{opacity:.45;cursor:not-allowed}
.sbn-envin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;align-items:start}
.sbn-envin .sbn-help{margin-top:6px}
.sbn-gauge{min-width:0}
.sbn-g-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-family:var(--sans)}
.sbn-g-top b{font-size:20px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.sbn-g-top small{font-size:11.5px;color:var(--muted)}
.sbn-g-cat{padding:1px 8px;border-radius:var(--radius);font-size:12px;font-weight:750;color:#1f1a14;background:#9fd38f}
.sbn-g-cat[data-c="1"]{background:#f5e27a} .sbn-g-cat[data-c="2"]{background:#f7b07a} .sbn-g-cat[data-c="3"]{background:#f19a9a} .sbn-g-cat[data-c="4"]{background:#c9b5ef}
.sbn-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%)}
.sbn-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)}
.sbn-g-ticks{position:relative;height:14px;margin-top:3px;font-family:var(--mono);font-size:10px;color:var(--muted)}
.sbn-g-ticks span{position:absolute;transform:translateX(-50%)} .sbn-g-ticks span:first-child{transform:none}
@container sbn (max-width:400px){ .sbn-envin{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion:reduce){ .sbn-g-mark{transition:none} }