/* 당뇨 위험도 계산기 전용 CSS (2026-10-10, 2026-10-19 작업면 재설계). 결과 카드(보는 방법 전환)·점수 쌓기 막대·문진표 줄·검진 결과지 줄 dr-*. 공용 부품은 assets/v2.css
   구간 색 세 단계(z0 정상·낮음 / z1 전단계·중간 / z2 당뇨병 기준·높음)를 막대·눈금·단계·범례에 똑같이 쓴다. 폭 판단은 작업면 컨테이너 dr 기준 */
.dr-work{container:dr / inline-size}
.dr-work .z0,.dr-steps li[data-b="0"],.dr-key-sw{background:var(--soft)}
.dr-work .z1,.dr-steps li[data-b="1"],.dr-key-sw--pre,.dr-g .z.pre{background:var(--line)}
.dr-work .z2,.dr-steps li[data-b="2"],.dr-key-sw--hi,.dr-g .z.hi{background:color-mix(in srgb, var(--accent) 38%, var(--soft))}
.dr-help{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.dr-help:empty{display:none}
.dr-work .v2-status:empty{display:none}
/* 위: 결과 카드 두 장 = 보는 방법 */
.dr-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.dr-tabs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.dr-tab{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:11px 14px 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--muted);font:inherit;text-align:left;cursor:pointer;transition:background var(--ease),border-color var(--ease),box-shadow var(--ease)}
.dr-tab:hover{background:var(--btn)}
.dr-tab[aria-pressed="true"]{background:color-mix(in srgb, var(--wash) 70%, var(--paper));border-color:var(--line);box-shadow:inset 0 3px 0 var(--fill);cursor:default}
.dr-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dr-tab .v2-label{display:block;margin:0 0 5px;max-width:100%}
.dr-tab__big{display:block;max-width:100%;font-family:var(--sans);font-size:26px;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dr-tab__big small{font-size:14px;font-weight:700}
.dr-tab__big.b2{color:var(--accent)}
.dr-work:lang(ko) .dr-tab__big{word-break:keep-all}
.dr-tab__sub{display:block;margin-top:5px;max-width:100%;font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--muted)}
.dr-tab:not([aria-pressed="true"]) .dr-tab__big{color:var(--muted)}
.dr-acts{display:flex;flex-direction:column;gap:6px}
.dr-act-st{grid-column:1/-1}
.dr-pane[hidden]{display:none}
.dr-pst{display:block;padding:10px 18px 0}
/* ① 문진표: 점수 쌓기 막대 */
.dr-viz{padding:14px 18px 12px}
.dr-stack .trk{position:relative;height:22px;border-radius:3px;overflow:hidden}
.dr-stack .zs,.dr-stack .sgs{position:absolute;inset:0}
.dr-stack .zs .z{position:absolute;top:0;bottom:0}
.dr-stack .zs .z+.z{box-shadow:inset 2px 0 0 var(--paper)}
.dr-stack .sgs{display:flex}
.dr-stack .sg{flex:none;width:0;height:100%;background:var(--fill);transition:width .55s cubic-bezier(.2,.7,.2,1)}
.dr-stack .sg.is-on{box-shadow:inset -2px 0 0 color-mix(in srgb, var(--paper) 85%, transparent)}
.dr-stack .ax{position:relative;height:15px;margin-top:4px}
.dr-stack .ax em{position:absolute;top:0;transform:translateX(-50%);font-family:var(--sans);font-size:10.5px;font-variant-numeric:tabular-nums;font-style:normal;line-height:1;color:var(--muted)}
.dr-stack .ax em.s{transform:none}
.dr-stack .ax em.e{transform:translateX(-100%)}
.dr-legend-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 18px;margin-top:6px}
.dr-bands{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--muted)}
.dr-bands li{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.dr-bands .z{display:inline-block;width:10px;height:10px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--line)}
.dr-bands li.is-on{color:var(--ink);font-weight:750}
.dr-key{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--muted)}
.dr-key span{display:inline-flex;align-items:center;gap:5px}
.dr-work .sw{display:inline-block;flex:none;width:14px;height:10px;border-radius:2px;background:var(--fill)}
.dr-work .sg.is-mod,.dr-work .sw.sw--mod,.dr-work .dr-qr.is-mod .pt .sw{background:repeating-linear-gradient(135deg, var(--fill) 0 3px, color-mix(in srgb, var(--fill) 30%, transparent) 3px 6px)}
.dr-mod{margin:8px 0 0;font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--ink)}
.dr-adv{margin:4px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted)}
.dr-mod:empty,.dr-adv:empty{display:none}
.dr-foot{padding:10px 18px 14px;border-top:1px solid var(--soft)}
/* 문진표: 질문 칸은 한 줄(번호 | 질문 + 도움말 | 답 | 받은 점수). 작업면이 넓으면(dr ≥ 760px) 두 칸 격자.
   is-wide(선택지 셋 이상·긴 버튼 글자·키몸무게)는 한 줄 전체를 쓰고, 좁은 작업면에서는 답을 아래 줄로 내린다.
   답은 칸 위쪽에 붙여 같은 줄 두 칸의 입력 상자 위아래를 맞춘다(R41) */
.dr-sheet{display:grid;grid-template-columns:minmax(0,1fr);column-gap:26px;list-style:none;margin:0;padding:0 18px}
.dr-qr{display:flex;flex-wrap:wrap;align-items:flex-start;gap:7px 10px;min-width:0;padding:9px 0;border-top:1px solid var(--soft)}
.dr-qr[hidden]{display:none}
.dr-qr .hint{order:4;flex:1 0 100%;margin-top:-2px;padding-left:28px;font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}
.dr-qr .no{flex:none;width:18px;padding-top:14px;font-family:var(--mono);font-size:11px;font-weight:700;line-height:1;color:var(--muted)}
.dr-qr .qt{flex:1 1 0;min-width:64px;padding-top:11px}
.dr-qr .qt .lb{display:block;font-family:var(--sans);font-size:13.5px;font-weight:700;line-height:1.35;color:var(--ink)}
.dr-qr .qt small{display:block;margin-top:2px;font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}
.dr-qr .qt small:empty{display:none}
.dr-qr .qa{flex:none;max-width:100%;min-width:0}
.dr-qr .v2-seg{display:flex;flex-wrap:wrap;gap:4px}
.dr-qr .v2-seg button{flex:0 0 auto;min-width:56px;height:auto;min-height:var(--v2-ctl,42px);padding:6px 12px} /* 옆 칸 입력칸(42px)과 높이를 맞춤(R41) */
.dr-qr .qa>.v2-f{width:128px}
.dr-bmi{display:flex;flex-wrap:wrap;gap:8px}
.dr-bmi>.v2-f{width:128px}
.dr-bmi.is-imp>.v2-f{width:116px}
.dr-qr .pt{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:44px;margin-left:auto;padding-top:13px;font-family:var(--sans);font-size:12.5px;font-weight:700;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.dr-qr .pt .sw{visibility:hidden}
.dr-qr.is-pt .pt{color:var(--ink)}
.dr-qr.is-pt .pt .sw{visibility:visible}
@container dr (min-width:760px){ .dr-sheet{grid-template-columns:repeat(2,minmax(0,1fr))} .dr-qr.is-wide{grid-column:1/-1} }
@container dr (max-width:759px){
  .dr-qr.is-wide .no{padding-top:3px}
  .dr-qr.is-wide .qt{padding-top:0}
  .dr-qr.is-wide .pt{order:2;padding-top:2px}
  .dr-qr.is-wide .qa{order:3;flex:1 0 100%;padding-left:28px}
}
/* ② 검진 결과지 */
.dr-verdict{padding:12px 18px;border-bottom:1px solid var(--soft)}
.dr-vtop{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:8px 18px;align-items:center}
.dr-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:0;padding:0;list-style:none}
.dr-steps li{display:flex;align-items:center;justify-content:center;padding:7px 8px;font-family:var(--sans);font-size:12px;font-weight:700;line-height:1.3;text-align:center;color:var(--muted);transition:background .3s,color .3s}
.dr-steps li:first-child{border-radius:3px 0 0 3px}
.dr-steps li:last-child{border-radius:0 3px 3px 0}
.dr-steps li.is-on{background:var(--fill);color:var(--on-fill)}
.dr-steps li.is-on[data-b="2"]{background:var(--accent);color:var(--paper)}
.dr-verdict .v2-sub{margin:0}
.dr-notes{margin:9px 0 0;padding-left:18px;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.dr-notes:empty{display:none}
.dr-notes li+li{margin-top:3px}
.dr-report{padding:2px 18px 14px}
.dr-report .dr-help{margin-top:8px}
.dr-rh,.dr-rr{display:grid;grid-template-columns:minmax(0,1fr) 132px minmax(0,1.7fr) 96px;grid-template-areas:"nm in g ch";gap:6px 16px;align-items:center}
.dr-rh{padding:7px 0 6px;border-bottom:1px solid var(--soft);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.dr-rh span:last-child{text-align:right}
.dr-rr{padding:10px 0 8px;border-bottom:1px solid var(--soft)}
.dr-rr .nm{grid-area:nm;min-width:0}
.dr-rr .nm label{display:block;font-family:var(--sans);font-size:13.5px;font-weight:700;line-height:1.35;color:var(--ink)}
.dr-rr .nm small{display:block;margin-top:2px;font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--muted)}
.dr-rr .dr-in{grid-area:in;min-width:0}
.dr-g{grid-area:g;min-width:0}
.dr-g .trk{position:relative;display:block;height:12px;margin:0 0 17px;border-radius:6px;background:var(--soft)}
.dr-g .z{position:absolute;top:0;bottom:0}
.dr-g .z.hi{border-radius:0 6px 6px 0}
.dr-g .tk{position:absolute;top:16px;transform:translateX(-50%);font-family:var(--sans);font-size:10.5px;font-variant-numeric:tabular-nums;font-style:normal;line-height:1;color:var(--muted);white-space:nowrap}
.dr-g .mk{position:absolute;top:-4px;left:0;width:4px;height:20px;margin-left:-2px;border-radius:2px;background:var(--ink);box-shadow:0 0 0 2px var(--paper);opacity:0;transition:left .5s cubic-bezier(.2,.7,.2,1),opacity .2s}
.dr-rr.is-on .mk{opacity:1}
.dr-g .cv{display:block;font-family:var(--sans);font-size:11px;line-height:1.4;color:var(--muted)}
.dr-g .cv:empty{display:none}
.dr-chip{grid-area:ch;justify-self:end;padding:3px 8px;border-radius:var(--radius);background:var(--soft);font-family:var(--sans);font-size:12px;font-style:normal;font-weight:700;line-height:1.35;color:var(--muted);text-align:center}
.dr-rr.b0 .dr-chip{color:var(--ink)}
.dr-rr.b1 .dr-chip{background:var(--line);color:var(--ink)}
.dr-rr.b2 .dr-chip{background:var(--accent);color:var(--paper)}
.dr-key-sw{display:inline-block;width:10px;height:10px;margin:0 4px 0 0;border-radius:2px;vertical-align:-1px}
@media (prefers-reduced-motion:reduce){ .dr-stack .sg,.dr-g .mk,.dr-steps li{transition:none} }
/* 좁은 작업면: 질문 줄은 답을 아래 줄로, 결과지 줄은 이름·판정 / 입력·눈금 두 줄 */
@container dr (max-width:640px){
  .dr-vtop{grid-template-columns:minmax(0,1fr)}
  .dr-rh{display:none}
  .dr-rr{grid-template-columns:minmax(0,150px) minmax(0,1fr);grid-template-areas:"nm ch" "in g";row-gap:8px;column-gap:14px}
  .dr-chip{align-self:start}
  .dr-g .trk{margin-top:6px}
}
@container dr (max-width:560px){
  .dr-top{grid-template-columns:minmax(0,1fr)}
  .dr-acts{flex-direction:row;flex-wrap:wrap}
  .dr-tab__big{font-size:22px}
}
@container dr (max-width:420px){
  .dr-top,.dr-viz,.dr-verdict,.dr-report{padding-left:12px;padding-right:12px}
  .dr-sheet,.dr-pst,.dr-foot{padding-left:12px;padding-right:12px}
  .dr-tabs{gap:8px}
  .dr-tab{padding:10px 11px 11px}
  .dr-tab__big{font-size:19px}
  .dr-rr{grid-template-columns:minmax(0,142px) minmax(0,1fr);column-gap:12px}
}