/* ============================================================
   온결검사 결과지 : 밝은 종이

   60장을 어두운 화면에서 읽는 사람은 없다. 그래서 결과지만
   종이처럼 밝게 두고, 표지와 장 구분만 어둡게 남긴다.
   본문은 크게, 줄 간격은 넓게, 한 줄 길이는 짧게.
   ============================================================ */
.sheet{background:#FCFDFC;color:var(--text-primary);border-radius:22px;overflow:hidden;
  border:1px solid var(--line-light);box-shadow:0 30px 70px rgba(16,26,28,.1)}
.sheet-hd{padding:24px clamp(20px,3.4vw,34px);border-bottom:1px solid var(--line-light);
  display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;background:#F4F7F5}
.sheet-hd h2{font-size:clamp(18px,2.1vw,24px);color:var(--text-primary)}
.sheet-hd .meta{margin-left:auto;font-family:var(--label);font-weight:500;font-size:11.5px;letter-spacing:.04em;
  color:var(--text-secondary);text-align:right;line-height:1.7}
.sheet-bd{padding:0}

/* one page */
.pg{padding:clamp(30px,4.6vw,54px) clamp(20px,3.4vw,44px);border-top:1px solid var(--line-light);
  scroll-margin-top:86px}
.sheet-bd>.pg:first-child{border-top:0}
.pg-hd{display:flex;align-items:baseline;gap:14px;margin-bottom:10px}
.pg-hd .lbl{font-family:var(--label);font-weight:500;font-size:11px;letter-spacing:.12em;
  color:var(--accent-text);opacity:.85;margin:0}
.pg-num{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--text-secondary);opacity:.55;flex:none}
.pg-t{font-family:var(--display);font-weight:700;letter-spacing:-.012em;
  font-size:clamp(21px,2.7vw,31px);line-height:1.4;color:var(--text-primary);
  margin-bottom:20px;max-width:24ch}

/* body copy: bigger, airier, shorter measure. this is the readability fix. */
.lead{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.85vw,21px);line-height:1.68;
  color:var(--accent-text);margin-bottom:22px;max-width:30ch;
  padding-left:16px;border-left:3px solid var(--accent-muted)}
.rp{font-size:clamp(15.6px,1.15vw,16.8px);line-height:1.95;color:var(--text-primary);
  max-width:36em;margin-bottom:16px}
.rp b{font-weight:500;color:var(--accent-text)}
.rp:last-child{margin-bottom:0}

/* boxes */
.bx{border-radius:15px;padding:20px 22px;margin:22px 0;border:1px solid var(--line-light);background:var(--panel)}
.bx b{display:block;font-family:var(--label);font-weight:500;font-size:11.5px;letter-spacing:.1em;
  margin-bottom:10px;color:var(--accent-text)}
.bx p{font-size:15.4px;line-height:1.86;color:var(--text-primary);max-width:36em}
.bx p+p{margin-top:12px}
.bx.act{background:rgba(31,122,107,.08);border-color:rgba(31,122,107,.28)}
.bx.good{background:rgba(31,122,107,.06);border-color:rgba(31,122,107,.22)}
.bx.ok{background:rgba(31,122,107,.05);border-color:rgba(31,122,107,.18)}
.bx.hot{background:rgba(217,168,142,.16);border-color:rgba(196,132,98,.4)}
.bx.warn{background:rgba(217,168,142,.14);border-color:rgba(196,132,98,.36)}
.bx.hot b,.bx.warn b{color:#8C4F32}
.bx.why,.bx.info,.bx.when{background:#F1F4F2;border-color:var(--line-light)}
.bx.crisis{background:#0E1719;border-color:#0E1719}
.bx.crisis b{color:var(--accent-glow)}
.bx.crisis p{color:#E8EEEC}
.bx.crisis p b{display:inline;font-size:inherit;letter-spacing:0;color:var(--accent-glow);margin:0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.two-col .bx{margin:22px 0 0}
@media (max-width:680px){ .two-col{grid-template-columns:1fr} }

/* what to actually say */
.sayhd{font-family:var(--label);font-weight:500;font-size:11.5px;letter-spacing:.1em;
  color:var(--accent-text);margin:24px 0 12px}
.says{display:grid;gap:10px}
.says p{font-family:var(--display);font-weight:700;
  font-size:clamp(16px,1.6vw,19px);line-height:1.62;color:var(--text-primary);
  background:#fff;border:1px solid var(--accent-muted);border-radius:14px;padding:16px 20px;max-width:34em}
.says .qm{color:var(--accent);opacity:.7}

/* meters */
.mts{display:grid;gap:12px;margin:20px 0}
.mts.wide{gap:9px}
.mt{display:grid;grid-template-columns:11ch 1fr 6ch;gap:14px;align-items:center}
.mt .mn{font-size:14px;color:var(--text-secondary)}
.mt .mb{height:8px;border-radius:99px;background:rgba(16,26,28,.08);overflow:hidden}
.mt .mb i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.mt.alt .mb i{background:var(--warm)}
.mt .mv{font-family:var(--mono);font-size:12px;color:var(--accent-text);text-align:right}
@media (max-width:600px){ .mt{grid-template-columns:8.5ch 1fr 5.5ch;gap:9px} }

.pair{display:grid;grid-template-columns:7ch 1fr 1fr 4ch;gap:8px;align-items:center;padding:5px 0}
.pair .pn{font-size:13.6px;color:var(--text-secondary)}
.pair .pb{height:7px;border-radius:99px;background:rgba(16,26,28,.08);overflow:hidden}
.pair .pb i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.pair .pb.alt i{background:var(--warm)}
.pair .pv{font-family:var(--mono);font-size:11px;color:#8C4F32;text-align:right}
.pair.hot .pn{color:var(--text-primary);font-weight:500}

.gapr{display:grid;grid-template-columns:24px 7ch 1fr 5ch;gap:12px;align-items:center}
.gapr .gi{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;color:#fff;background:var(--accent)}
.gapr .gn{font-size:14.5px;font-weight:500}
.gapr .gb{height:8px;border-radius:99px;background:rgba(16,26,28,.08);overflow:hidden}
.gapr .gb i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--warm))}
.gapr .gv{font-family:var(--mono);font-size:11.5px;color:var(--accent-text);text-align:right}

/* lists */
.steps,.wk,.big3,.honest,.mis,.knots{margin:0;padding:0;list-style:none}
.steps{counter-reset:s;display:grid;gap:12px;margin:20px 0}
.steps li{position:relative;padding-left:38px;font-size:15.6px;line-height:1.85;max-width:36em}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:2px;
  width:25px;height:25px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:11.5px;color:var(--accent-text);
  background:rgba(31,122,107,.1);border:1px solid rgba(31,122,107,.24)}
.steps b{font-weight:500}
.wk{counter-reset:w;display:grid;gap:11px;margin:20px 0}
.wk li{position:relative;padding-left:38px;font-size:15.6px;line-height:1.85;max-width:36em;
  padding-bottom:11px;border-bottom:1px solid var(--line-light)}
.wk li:last-child{border-bottom:0;padding-bottom:0}
.wk li::before{counter-increment:w;content:counter(w);position:absolute;left:0;top:1px;
  width:25px;height:25px;border-radius:7px;display:grid;place-items:center;
  font-family:var(--mono);font-size:11.5px;color:#fff;background:var(--accent)}
.wk.emg li::before{background:#8C4F32}
.big3{display:grid;gap:16px;margin:22px 0}
.big3 li{display:flex;gap:16px;align-items:flex-start;background:var(--panel);
  border:1px solid var(--line-light);border-radius:16px;padding:20px 22px}
.big3 .n3{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:15px;color:#fff;background:var(--accent)}
.big3 div{font-size:15.4px;line-height:1.82}
.big3 b{font-weight:500;color:var(--text-primary)}
.honest,.mis{display:grid;gap:13px;margin:20px 0}
.honest li,.mis li{position:relative;padding-left:22px;font-size:15.4px;line-height:1.85;max-width:36em}
.honest li::before,.mis li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;
  border-radius:2px;background:var(--accent);opacity:.7}
.mis b{display:inline-block;min-width:5.5ch;font-weight:500;color:var(--accent-text);margin-right:8px}
.knots{display:grid;gap:11px;margin:16px 0}
.knots li{position:relative;padding-left:24px;font-size:15.6px;line-height:1.82;max-width:36em}
.knots li::before{content:"";position:absolute;left:0;top:.68em;width:11px;height:11px;
  border-radius:3px;border:1.5px solid #C48462}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.chips span{font-size:13.4px;color:var(--accent-text);background:rgba(31,122,107,.09);
  border-radius:999px;padding:8px 15px}

/* type cards */
.tys{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin:20px 0}
.tyc{border:1px solid var(--line-light);border-radius:15px;padding:17px 18px;background:var(--panel)}
.tyc.on{border-color:var(--accent);background:rgba(31,122,107,.08);box-shadow:0 6px 20px rgba(31,122,107,.1)}
.tyc b{display:block;font-family:var(--display);font-weight:700;font-size:18px;margin-bottom:7px}
.tyc.on b{color:var(--accent-text)}
.tyc span{font-size:13.4px;line-height:1.65;color:var(--text-secondary)}

.pull3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:20px 0}
.pc{border:1px solid var(--line-light);border-radius:15px;padding:18px;background:var(--panel);position:relative}
.pc .pi{position:absolute;top:14px;right:16px;font-family:var(--mono);font-size:11px;color:var(--accent-text);opacity:.5}
.pc b{display:block;font-family:var(--display);font-weight:700;font-size:17px;margin-bottom:8px;color:var(--accent-text)}
.pc p{font-size:14px;line-height:1.7;color:var(--text-primary)}
.pc .pex{display:block;margin-top:9px;font-size:12.6px;color:var(--text-secondary)}

/* the worked example */
.ex{background:var(--panel);border:1px solid var(--line-light);border-radius:18px;
  padding:clamp(22px,3vw,32px);margin:20px 0}
.exq{font-family:var(--display);font-weight:700;font-size:clamp(16.5px,1.7vw,20px);line-height:1.7;
  color:var(--text-primary);margin-bottom:14px;max-width:32em}
.exa{font-size:15.4px;line-height:1.88;color:var(--text-secondary);max-width:36em}
.exa+.exa{margin-top:12px}
.exa b{color:var(--accent-text);font-weight:500}

/* the only dark pages: cover and section dividers */
.pg.cover,.pg.divider{background:var(--canvas-deep);color:var(--text-on-deep);border-top:0}
.pg.cover .pg-hd,.pg.divider .pg-hd{display:none}
.cv{padding:clamp(20px,5vw,50px) 0;text-align:center}
.cvk{font-family:var(--label);font-weight:500;font-size:11.5px;letter-spacing:.2em;color:var(--accent-glow);margin-bottom:22px}
.cv h4{font-family:var(--display);font-weight:700;font-size:clamp(30px,5vw,46px);color:var(--text-on-deep);margin-bottom:18px}
.cvm{font-family:var(--label);font-size:13px;letter-spacing:.05em;color:var(--text-on-deep-dim);line-height:1.9;margin-bottom:26px}
.cvt{font-size:15px;line-height:1.9;color:var(--text-on-deep-dim);max-width:30em;margin-inline:auto}
.dv{display:flex;align-items:flex-start;gap:clamp(16px,3vw,28px);padding:clamp(8px,2vw,20px) 0}
.dvn{font-family:var(--display);font-weight:700;font-size:clamp(34px,5.5vw,54px);color:var(--accent-glow);
  line-height:1;opacity:.85;flex:none}
.dv h4{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.6vw,29px);color:var(--text-on-deep);margin-bottom:10px}
.dv p{font-size:15px;line-height:1.85;color:var(--text-on-deep-dim);max-width:34em}

/* the map */
.ogmap{display:block;width:100%;max-width:420px;margin:20px auto;height:auto}
.ogmap .qd{fill:rgba(16,26,28,.028)}
.ogmap .qd.a{fill:rgba(16,26,28,.055)}
.ogmap .ax{stroke:rgba(16,26,28,.18);stroke-width:1}
.ogmap .lb{fill:var(--text-secondary);font-family:var(--label);font-size:11.5px;letter-spacing:.03em}
.ogmap .qn{fill:var(--text-secondary);font-family:var(--display);font-size:15px;opacity:.45}
.ogmap .link{stroke:var(--accent);stroke-width:1.6;stroke-dasharray:5 4;opacity:.55}
.ogmap .mk.shown{fill:var(--accent)}
.ogmap .mk.want{fill:var(--warm)}
.ogmap .mk.knot{fill:none;stroke:var(--text-secondary);stroke-width:1.6;opacity:.55}
.lg3{display:grid;gap:10px;margin:18px 0 22px}
.lg3 div{display:flex;align-items:center;gap:11px;font-size:14.4px;color:var(--text-secondary)}
.lg3 b{color:var(--text-primary);font-weight:500;margin-right:4px}
.lg3 .s{width:14px;height:14px;flex:none}
.lg3 .s.d{background:var(--accent);transform:rotate(45deg)}
.lg3 .s.c{background:var(--warm);border-radius:50%}
.lg3 .s.q{border:2px solid var(--text-secondary);border-radius:3px;opacity:.6}

/* contents */
.tocwrap{padding:clamp(26px,4vw,40px) clamp(20px,3.4vw,44px);background:#F4F7F5;
  border-bottom:1px solid var(--line-light)}
.tocwrap .lbl{font-family:var(--label);font-weight:500;font-size:11px;letter-spacing:.12em;
  color:var(--accent-text);margin-bottom:16px}
.toc{margin:0;padding:0;list-style:none;display:grid;gap:1px clamp(22px,4vw,48px);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.toc a{display:flex;align-items:baseline;gap:10px;text-decoration:none;padding:8px 0;
  color:var(--text-secondary);font-size:13.8px;line-height:1.55;
  border-bottom:1px solid var(--line-light);transition:color .3s var(--ease)}
.toc a:hover{color:var(--accent-text)}
.toc .tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toc .pn{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--accent-text);opacity:.6;flex:none}

/* the 40 percent line */
.locked{position:relative;max-height:300px;overflow:hidden}
.locked .veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(252,253,252,0) 0%,rgba(252,253,252,.9) 46%,#FCFDFC 88%)}
.locked .blurred{filter:blur(6px);opacity:.55;user-select:none}
.locked .pg{border-top:0}
.gate{padding:clamp(28px,4vw,44px) clamp(22px,4vw,38px);background:var(--canvas-deep);text-align:center}
.gate .pill{display:inline-flex;align-items:center;gap:9px;font-family:var(--label);font-weight:500;
  font-size:11.5px;letter-spacing:var(--label-track);color:var(--accent-glow);
  background:rgba(95,203,180,.12);border:1px solid rgba(95,203,180,.28);border-radius:999px;padding:8px 16px}
.gate h3{margin-top:18px;font-size:clamp(20px,2.6vw,29px);color:var(--text-on-deep)}
.gate p{margin-top:14px;font-size:15px;line-height:1.75;color:var(--text-on-deep-dim);max-width:44ch;margin-inline:auto}
.gate .btn{margin-top:26px}
.gate-toc{margin:26px auto 4px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:66ch}
.gate-toc .tl{display:inline-flex;align-items:center;gap:8px;font-size:12.4px;line-height:1.5;
  color:var(--text-on-deep-dim);background:rgba(232,238,236,.06);border:1px solid var(--line-deep);
  border-radius:999px;padding:7px 13px}
.gate-toc .tl i{width:9px;height:11px;flex:none;border-radius:2px;border:1px solid var(--accent-glow);
  border-top-width:4px;border-top-left-radius:5px;border-top-right-radius:5px;opacity:.72}