/* 판정 페이지 공통 스타일. 기존 시험 페이지 3개(50Hz, 층간소음, 담배 연기)의 스타일을 하나로 합쳤습니다.
   한 줄 읽기 폭(~46rem), 판정 도구만 상자로 두르고, 원리 절은 명세서처럼 읽히게 합니다. */
:root{
  --bg:#ECEFF2; --surface:#FFFFFF; --ink:#151E28; --muted:#596572; --line:#D2D9E0;
  --accent:#1B57B5; --accent-soft:#E2EBF9;
  --plate:#DFE4E9; --plate-edge:#BCC5CE; --plate-hi:#F6F8FA;
  --signal:#F1C02B; --signal-ink:#1C190E;
  --ok:#1B7448; --ok-soft:#DFF0E6; --warn:#8F5C00; --warn-soft:#F8EBD2; --risk:#AF2A20; --risk-soft:#F8E1DE;
  /* 글꼴은 기기에 있는 것만 씁니다(외부 글꼴을 받지 않음, 2026-10-05 사람 결정). 윈도는 맑은 고딕, 맥·아이폰은
     Apple SD Gothic Neo, 안드로이드는 Noto Sans KR. 받아 오는 글꼴이 없어 늦게 와 바뀌거나 화면이 밀리는 일(CLS)이 없습니다.
     제목·판정·로고는 굵기(800)로 무게를 줍니다(글꼴에 800이 없으면 가장 가까운 굵은 글꼴). */
  --font-body:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Noto Sans KR","Noto Sans CJK KR",sans-serif;
  --font-display:var(--font-body);
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1318; --surface:#151D25; --ink:#E4E9EF; --muted:#97A3AF; --line:#27323D;
    --accent:#79A6F0; --accent-soft:#18283F;
    --plate:#1C242D; --plate-edge:#34414D; --plate-hi:#26303A;
    --signal:#E2B226; --signal-ink:#15120A;
    --ok:#5BC48B; --ok-soft:#13271C; --warn:#E3AA49; --warn-soft:#2C2211; --risk:#F07A6E; --risk-soft:#331816;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1318; --surface:#151D25; --ink:#E4E9EF; --muted:#97A3AF; --line:#27323D;
  --accent:#79A6F0; --accent-soft:#18283F;
  --plate:#1C242D; --plate-edge:#34414D; --plate-hi:#26303A;
  --signal:#E2B226; --signal-ink:#15120A;
  --ok:#5BC48B; --ok-soft:#13271C; --warn:#E3AA49; --warn-soft:#2C2211; --risk:#F07A6E; --risk-soft:#331816;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:16px;line-height:1.72;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}

.page{padding-inline:clamp(16px,4vw,40px);padding-block:clamp(24px,5vw,48px) 72px}
.wrap{max-width:46rem;margin-inline:auto;display:flex;flex-direction:column;gap:clamp(44px,7vw,68px)}
section{display:flex;flex-direction:column;gap:16px;scroll-margin-top:16px}
.eyebrow{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;color:var(--muted)}
h2{font-size:clamp(21px,3.2vw,25px);font-weight:700;line-height:1.35;letter-spacing:-.01em}
.lede{font-size:16.5px;max-width:41rem}

/* 머리: 제목, 비교 그림, 결론 */
.hero{gap:20px}
.hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(34px,7.2vw,54px);line-height:1.14;letter-spacing:-.02em}
.plates{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:stretch}
.plate{
  background:var(--plate);border:1px solid var(--plate-edge);border-radius:3px;
  padding:12px 14px 13px;display:flex;flex-direction:column;gap:3px;
  box-shadow:inset 0 1px 0 var(--plate-hi);min-width:0;
}
.plate-kicker{font-size:12.5px;color:var(--muted)}
.plate-name{font-weight:600;font-size:15.5px}
.plate-spec{font-family:var(--font-mono);font-size:clamp(17px,2.8vw,21px);font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.3}
.plate-spec strong{font-weight:500;color:var(--accent)}
.plate-spec.good{color:var(--ok)}
.plate-spec.bad{color:var(--risk)}
.plate-vs{
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  font-family:var(--font-mono);font-size:12.5px;color:var(--muted);text-align:center;padding-inline:4px;
}
.plate-vs strong{color:var(--ink);font-weight:500}
.hero-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hero-cards[data-n="2"],.hero-cards[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero-cards[data-n="3"],.hero-cards[data-n="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:621px){.hero-cards[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hero-card{
  background:var(--plate);border:1px solid var(--plate-edge);border-radius:3px;
  padding:10px 12px 11px;display:flex;flex-direction:column;gap:2px;
  box-shadow:inset 0 1px 0 var(--plate-hi);min-width:0;
}
.hc-name{font-weight:600;font-size:15px;line-height:1.4}
.hc-how{font-size:12.5px;color:var(--muted);line-height:1.45}
.hc-fix{font-family:var(--font-mono);font-size:12.5px;color:var(--accent);line-height:1.45;margin-top:2px}
.answer{font-size:clamp(17px,2.4vw,19px);line-height:1.68;max-width:40rem}
.answer strong{font-weight:600}
.who{font-size:15px;color:var(--muted);max-width:40rem}
.to-tool{font-size:15.5px;font-weight:600;max-width:40rem}
.to-tool a{text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px}
.signal{
  position:relative;background:var(--signal);color:var(--signal-ink);
  padding:20px 18px 15px;display:grid;gap:4px;font-size:15px;line-height:1.6;
}
.signal::before{
  content:"";position:absolute;inset:0 0 auto 0;height:6px;
  background-image:repeating-linear-gradient(-45deg,var(--signal-ink) 0 7px,transparent 7px 14px);
}
.signal strong{font-size:16px;font-weight:700}
.signal .refs a{color:var(--signal-ink)}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{
  font-family:var(--font-mono);font-size:12.5px;color:var(--ink);
  background:var(--plate);border:1px solid var(--plate-edge);border-radius:3px;padding:1px 8px;
}
.meta{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.toc{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14.5px}
.toc a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px;color:var(--ink)}
.toc a:hover{border-color:var(--accent);color:var(--accent)}

/* 판정 도구 */
.tool{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:clamp(18px,3.4vw,30px);gap:22px}
.tool-voice{font-size:15px;color:var(--muted);line-height:1.6}
.tool-form{display:flex;flex-direction:column;gap:22px}
.step{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:10px;position:relative}
.step[hidden]{display:none}
.step legend{padding:0;margin-bottom:10px;display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px}
.step-no{
  display:inline-grid;place-items:center;width:24px;height:24px;flex:none;
  border:1px solid var(--ink);border-radius:2px;font-family:var(--font-mono);font-size:13px;font-weight:500;
}
.hint{font-size:14px;color:var(--muted)}
.skip-note{font-size:14px;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{
  display:inline-flex;align-items:center;min-height:42px;padding:8px 14px;
  border:1px solid var(--line);border-radius:4px;background:var(--bg);cursor:pointer;font-size:15px;line-height:1.35;
}
.chips label small{font-size:12.5px;color:var(--muted);margin-left:6px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.card-opt{display:flex;min-width:0}
.cards label{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:11px 14px 12px;
  border:1px solid var(--line);border-radius:4px;background:var(--bg);cursor:pointer;
}
.opt-name{font-weight:600;font-size:15.5px;line-height:1.4}
.opt-ex{font-size:13.5px;color:var(--muted);line-height:1.5}
.chips input:checked + label,.cards input:checked + label{
  border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent);
}
.chips label:hover,.cards label:hover{border-color:var(--accent)}
.sr:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}
.step.is-skipped .chips,.step.is-skipped .cards{opacity:.5}

.result{
  --res-bg:var(--surface);--res-ink:var(--ink);
  background:var(--res-bg);border:1px solid var(--line);border-radius:4px;
  padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px;
}
.result[data-level="ok"]{--res-bg:var(--ok-soft);--res-ink:var(--ok)}
.result[data-level="info"]{--res-bg:var(--accent-soft);--res-ink:var(--accent)}
.result[data-level="warn"]{--res-bg:var(--warn-soft);--res-ink:var(--warn)}
.result[data-level="risk"]{--res-bg:var(--risk-soft);--res-ink:var(--risk)}
.result-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.verdict{font-family:var(--font-display);font-weight:800;font-size:27px;line-height:1.15;letter-spacing:-.01em;color:var(--res-ink)}
.likely{font-size:12.5px;font-weight:600;padding:1px 8px;border-radius:3px;border:1px solid var(--res-ink);color:var(--res-ink)}
.result-ctx{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);flex-basis:100%}
.tag-example{font-size:12px;color:var(--muted);border:1px dashed var(--muted);border-radius:3px;padding:0 6px}
.result-title{font-size:19px;font-weight:700;line-height:1.45}
.mycase{display:flex;flex-direction:column;gap:4px;padding:2px 0 2px 12px;border-left:3px solid var(--res-ink)}
.mycase p{font-size:16px;font-weight:700;line-height:1.5}
.result-note{font-size:14px;color:var(--muted)}
.result-notes{display:flex;flex-direction:column;gap:6px}
.result-notes p{font-size:15px;padding-left:12px;border-left:2px solid var(--res-ink)}
.result-block{display:flex;flex-direction:column;gap:4px}
.block-label{font-size:13px;font-weight:600;color:var(--res-ink);letter-spacing:.02em}
.result-block ul,.result-block ol{margin:0;padding-left:1.2em;display:grid;gap:6px}
.result-block li::marker{color:var(--res-ink)}
.result-block ol li::marker{font-family:var(--font-mono)}
.result-meta{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 14px;margin:4px 0 0;padding-top:10px;
  border-top:1px solid var(--line);font-size:13.5px;color:var(--muted);
}
.result-meta dt{color:var(--ink);font-weight:600}
.result-meta dd{margin:0}
.refs a{font-family:var(--font-mono);font-size:13px;text-decoration:none;margin-right:6px}

/* 고르기 전: 질문 위 안내와 결과 자리(잠금). 결과 자리는 verdict-tool.js가 다 고르면 결과로 바꿈 */
.tool-prompt{font-size:16px;font-weight:700;line-height:1.5;color:var(--accent)}
.result[data-level="wait"]{border-style:dashed}
.result-wait{display:flex;flex-direction:column;gap:8px}
.rw-title{font-size:16.5px;font-weight:700;line-height:1.45}
.rw-missing{font-size:15px;font-weight:700;color:var(--warn)}
.rw-missing a{color:inherit}
.rw-lines{display:grid;gap:8px;margin-top:4px}
.rw-lines span{display:block;height:10px;border-radius:5px;background:var(--line)}
.rw-lines span:nth-child(1){width:45%}
.rw-lines span:nth-child(2){width:85%}
.rw-lines span:nth-child(3){width:65%}
fieldset.step{scroll-margin-top:12px}
/* '처음부터 다시': 하나라도 고르면 보임(verdict-tool.js) */
.tool-reset-row{text-align:right;margin-top:-10px}
.tool-reset{
  font:inherit;font-size:14px;line-height:1.4;color:var(--muted);background:none;border:0;padding:8px 2px;cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
}
.tool-reset:hover{color:var(--accent)}
.tool-reset:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* 화면 아래 한 줄(verdict-tool.js). go: 다 고른 뒤 결과 상자가 화면 아래면 '지금 판정 · 결과 보기 ↓'.
   again: 결과를 지나 근거 절에 닿으면 '다른 경우도 판정해 보기 ↑'. 한 번에 하나만 뜸 */
.verdict-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:0 12px calc(10px + env(safe-area-inset-bottom,0px));pointer-events:none}
.verdict-bar[hidden]{display:none}
.verdict-bar button{
  pointer-events:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;
  width:100%;max-width:46rem;margin:0 auto;padding:9px 14px 10px;border:0;border-radius:8px;
  background:var(--ink);color:var(--bg);text-align:left;font:inherit;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.verdict-bar button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vb-label{grid-column:1;font-size:12px;opacity:.75;line-height:1.3}
.vb-main{grid-column:1;font-size:15.5px;font-weight:700;line-height:1.35}
.vb-sub{grid-column:1;font-size:13px;line-height:1.4;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vb-sub[hidden]{display:none}
.vb-go{grid-column:2;grid-row:1 / span 3;font-size:13px;border:1px solid currentColor;border-radius:16px;padding:3px 10px;white-space:nowrap}
.verdict-bar [hidden]{display:none}
.verdict-bar[data-mode="again"] button{grid-template-columns:minmax(0,1fr);text-align:center;padding:11px 14px 12px}
.verdict-bar.is-changed button{animation:vb-flash .8s ease-out}
@keyframes vb-flash{
  0%{box-shadow:0 0 0 3px var(--accent),0 6px 18px rgba(0,0,0,.28)}
  100%{box-shadow:0 0 0 0 transparent,0 6px 18px rgba(0,0,0,.28)}
}
@media (prefers-reduced-motion: reduce){.verdict-bar.is-changed button{animation:none}}

/* 덧붙인 절: 찾을 표기 */
.lookup{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.look{
  display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);grid-template-areas:"label term" "label text";
  gap:4px 18px;padding-block:14px;border-bottom:1px solid var(--line);
}
.look-label{grid-area:label;font-weight:600;font-size:15px}
.look-term{grid-area:term;font-family:var(--font-mono);font-size:15px;color:var(--accent)}
.look p{grid-area:text;font-size:15px}

/* 흔한 주장 */
.claims{display:flex;flex-direction:column}
.claim{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:8px 26px;padding-block:20px;border-top:1px solid var(--line)}
.claim:last-child{border-bottom:1px solid var(--line)}
.claim-q{font-weight:600;font-size:16.5px;line-height:1.5}
.claim-side{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.claim-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.claim-why{font-size:14.5px;color:var(--muted)}
.claim-why b{color:var(--ink);font-weight:600;margin-right:6px}
.chip{
  --chip-bg:var(--accent-soft);--chip-ink:var(--accent);display:inline-block;
  font-size:12.5px;font-weight:600;line-height:1.5;padding:1px 8px;border-radius:3px;background:var(--chip-bg);color:var(--chip-ink);
}
.chip[data-kind="wrong"],.chip[data-kind="reversed"]{--chip-bg:var(--risk-soft);--chip-ink:var(--risk)}
.chip[data-kind="half"],.chip[data-kind="over"]{--chip-bg:var(--warn-soft);--chip-ink:var(--warn)}
.chip[data-kind="cond"]{--chip-bg:var(--accent-soft);--chip-ink:var(--accent)}
.chip[data-kind="right"]{--chip-bg:var(--ok-soft);--chip-ink:var(--ok)}

/* 원리: 그림과 부품 */
.diagram{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:16px;display:flex;flex-direction:column;gap:12px}
.dg-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dg-wrap[data-panels="1"]{grid-template-columns:minmax(0,1fr)}
.dg-panel{display:flex;flex-direction:column;gap:6px;min-width:0}
.dg-title{font-weight:600;font-size:14.5px}
.dg{width:100%;max-width:100%;height:auto;display:block;color:var(--ink)}
.dg text{font-family:var(--font-body);font-size:11.5px;fill:currentColor}
.dg .dg-strong{font-weight:600;font-size:12px}
.dg .dg-muted{fill:var(--muted);font-size:11px}
.dg .dg-mono{font-family:var(--font-mono)}
.dg .dg-label-risk{fill:var(--risk);font-weight:600}
.dg .dg-label-ok{fill:var(--ok);font-weight:600}
.dg .dg-note-risk{fill:var(--risk)}
.dg-bldg{fill:none;stroke:var(--ink);stroke-width:1.5}
.dg-wall{stroke:var(--ink);stroke-width:3}
.dg-wall.hit{stroke:var(--risk)}
.dg-slab{fill:var(--plate);stroke:var(--plate-edge);stroke-width:1}
.dg-slab.hit{fill:var(--risk-soft);stroke:var(--risk)}
.dg-floor{stroke:var(--line);stroke-width:1}
.dg-mat{fill:var(--warn-soft);stroke:var(--warn);stroke-width:1}
.dg-impact{stroke:var(--ink);stroke-width:2;fill:none}
.dg-impact-head{fill:var(--ink)}
.dg-trans{stroke:var(--risk);stroke-width:2.5;fill:none}
.dg-trans.light{stroke-width:1.5;stroke-dasharray:3 3}
.dg-trans-head{fill:var(--risk)}
.dg-duct{fill:var(--plate);stroke:var(--plate-edge);stroke-width:1}
.dg-fan{fill:var(--muted)}
.dg-smoke{stroke:var(--risk);stroke-width:2;fill:none}
.dg-head{fill:var(--risk)}
.dg-damper{stroke:var(--ok);stroke-width:3.5;stroke-linecap:round}
.dg-wave-a{stroke:var(--muted);stroke-width:2;fill:none;stroke-linejoin:round}
.dg-wave-b{stroke:var(--accent);stroke-width:2;fill:none;stroke-linejoin:round}
.dg-cycle{stroke:var(--line);stroke-width:1}
.diagram figcaption{font-size:13.5px;color:var(--muted)}
#why > p.note{font-size:15px;color:var(--muted)}
.parts{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.part{
  display:grid;grid-template-columns:minmax(0,8.5rem) minmax(0,1fr) auto;grid-template-areas:"name desc factor";
  gap:4px 18px;padding-block:14px;border-bottom:1px solid var(--line);align-items:baseline;
}
.part-name{grid-area:name;font-weight:600}
.part p{grid-area:desc;font-size:15px}
.part-factor{grid-area:factor;font-family:var(--font-mono);font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--accent);white-space:nowrap;text-align:right}

/* 근거와 수정 기록 */
.sources{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sources li{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:0 8px;padding:8px 10px;margin-inline:-10px;border-radius:4px}
.sources li:target{background:var(--accent-soft)}
.src-no{font-family:var(--font-mono);font-size:13.5px;color:var(--muted);padding-top:2px}
.src-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.src-kind{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.src-use{font-size:14px;color:var(--muted)}
.log{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px}
.log dt{font-family:var(--font-mono);font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.log dd{margin:0;font-size:15px}
.foot{font-size:13.5px;color:var(--muted);display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:18px}

@media (prefers-reduced-motion: no-preference){
  .chips label,.cards label{transition:background-color .15s ease,border-color .15s ease}
}
@media (max-width:620px){
  .plates{grid-template-columns:minmax(0,1fr)}
  .plate-vs{flex-direction:row;justify-content:flex-start;gap:14px;text-align:left;padding-inline:2px}
  .hero-cards,.hero-cards[data-n="3"],.hero-cards[data-n="6"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .claim{grid-template-columns:minmax(0,1fr)}
  .part{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name factor" "desc desc"}
  .look{grid-template-columns:minmax(0,1fr);grid-template-areas:"label" "term" "text"}
  .dg-wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .cards{grid-template-columns:minmax(0,1fr)}
  .log{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .log dd{margin-bottom:10px}
}