/* 간단 기획: 뉴브스 라이트 섹션 톤. 한 화면에 질문 하나, 큰 글씨, 고르기 위주 */
body{background:var(--light);color:var(--black);min-height:100dvh;display:flex;flex-direction:column}
main{flex:1;width:100%}

.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(244,244,244,.94);backdrop-filter:blur(6px)}
.top .wrap{display:flex;align-items:center;gap:16px;height:56px}
.logo{text-decoration:none;font-size:15px;letter-spacing:.02em}
.tool{font-size:13px;color:var(--muted-l)}
.bar{height:3px;background:var(--rule-l)}
.bar i{display:block;height:100%;width:0;background:var(--red);transition:width .3s ease}

.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-l)}
.intro,.q,.done{max-width:880px;padding-block:clamp(40px,8vw,96px) 48px}
.intro h1{font-size:clamp(36px,6.4vw,76px);font-weight:700;letter-spacing:-.04em;line-height:1.15;margin-top:16px;text-wrap:balance}
.lead{font-size:clamp(17px,1.6vw,21px);color:#2b2b2b;margin-top:20px;max-width:34ch;line-height:1.6}
.what{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--black);margin-top:40px}
.what div{padding:16px 16px 0 0;display:flex;flex-direction:column;gap:4px}
.what div + div{padding-left:16px;border-left:1px solid var(--rule-l)}
.what .en{font-size:28px;line-height:1}
.what b{font-size:15px}
.what p{font-size:13.5px;color:var(--muted-l)}

.q .step{font-family:var(--en);font-weight:500;font-size:14px;color:var(--muted-l);font-variant-numeric:tabular-nums}
.q h2{font-size:clamp(28px,4.4vw,48px);font-weight:700;letter-spacing:-.035em;line-height:1.25;margin-top:12px;text-wrap:balance}
.q .hint{font-size:15.5px;color:var(--muted-l);margin-top:12px;max-width:52ch}
.q .body{margin-top:32px;display:flex;flex-direction:column;gap:12px}

.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opts.one-col{grid-template-columns:minmax(0,1fr)}
.opt{display:flex;align-items:flex-start;gap:14px;text-align:left;background:var(--white);border:1px solid var(--rule-l);padding:18px 18px;border-radius:2px;min-width:0;transition:border-color .15s}
.opt:hover{border-color:var(--black)}
.opt .mark{flex:none;width:22px;height:22px;border:1.5px solid var(--black);margin-top:1px;display:grid;place-items:center;font-size:13px;line-height:1}
.opt.radio .mark{border-radius:50%}
.opt b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em}
.opt small{display:block;font-size:13.5px;color:var(--muted-l);margin-top:2px}
.opt[aria-pressed="true"],.opt[aria-checked="true"]{border-color:var(--black);box-shadow:inset 0 0 0 1px var(--black)}
.opt[aria-pressed="true"] .mark,.opt[aria-checked="true"] .mark{background:var(--black);color:var(--white)}
.opt.radio[aria-checked="true"] .mark::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--white)}
.opt[aria-pressed="true"] .mark::after{content:"✓"}

label.fld{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--muted-l)}
.in{width:100%;background:var(--white);border:1px solid var(--rule-l);border-radius:2px;padding:14px 16px;font-size:17px;color:var(--black);outline:none;line-height:1.5}
.in:focus{border-color:var(--black)}
textarea.in{resize:vertical;min-height:96px}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px}

.pages{display:flex;flex-direction:column;gap:8px}
.page{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;background:var(--white);border:1px solid var(--rule-l);padding:14px 16px;text-align:left}
.page .mark{width:22px;height:22px;border:1.5px solid var(--black);display:grid;place-items:center;font-size:13px}
.page[aria-pressed="true"] .mark{background:var(--black);color:var(--white)}
.page[aria-pressed="true"] .mark::after{content:"✓"}
.page b{font-size:16px;font-weight:600}
.page small{display:block;font-size:13px;color:var(--muted-l)}
.page[aria-pressed="false"] b,.page[aria-pressed="false"] small{opacity:.5}
.addpage{display:flex;gap:8px}
.addpage .in{font-size:15px;padding:10px 14px}

.consent{display:flex;gap:12px;align-items:flex-start;background:var(--white);border:1px solid var(--rule-l);padding:16px;font-size:14px;line-height:1.6}
.consent input{width:20px;height:20px;margin-top:2px;accent-color:var(--black);flex:none}
.consent small{display:block;color:var(--muted-l);font-size:13px;margin-top:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.nav{display:flex;gap:10px;align-items:center;margin-top:40px;flex-wrap:wrap}
.nav .sp{flex:1}
.btn{font:600 16px var(--ko);background:var(--black);color:var(--white);border:0;padding:16px 28px;border-radius:2px;white-space:nowrap}
.btn.red{background:var(--red)}
.btn.ghost{background:transparent;color:var(--black);border:1px solid var(--black)}
.btn.text{background:none;color:var(--muted-l);padding:16px 8px;text-decoration:underline;text-underline-offset:4px;font-weight:500}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.err{color:var(--red);font-size:14.5px;font-weight:600}
.saved{font-size:13px;color:var(--muted-l)}

.done h1{font-size:clamp(32px,5vw,60px);font-weight:700;letter-spacing:-.04em;line-height:1.2;margin-top:14px;text-wrap:balance}
.sum{margin-top:36px;border-top:1px solid var(--black)}
.sum > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--rule-l);font-size:15.5px}
.sum dt{font-weight:600}
.sum dd{margin:0;min-width:0;overflow-wrap:anywhere}
.big3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:32px;border-top:1px solid var(--black)}
.big3 div{padding:16px 16px 0 0}
.big3 div + div{padding-left:16px;border-left:1px solid var(--rule-l)}
.big3 span{font-size:13px;color:var(--muted-l)}
.big3 b{display:block;font-family:var(--en);font-weight:500;font-size:clamp(28px,3.4vw,44px);line-height:1.15;font-variant-numeric:tabular-nums}
.note{margin-top:24px;font-size:14.5px;border-left:3px solid var(--red);padding-left:14px;max-width:62ch}

.foot{border-top:1px solid var(--rule-l);padding-block:28px calc(32px + env(safe-area-inset-bottom,0px));font-size:13px;color:var(--muted-l)}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}

@media (max-width:640px){
  .opts,.row2,.what,.big3{grid-template-columns:minmax(0,1fr)}
  .what div,.what div + div,.big3 div,.big3 div + div{padding-left:0;border-left:0}
  .what div + div,.big3 div + div{border-top:1px solid var(--rule-l);margin-top:12px;padding-top:12px}
  .sum > div{grid-template-columns:minmax(0,1fr);gap:2px}
  .nav .btn{flex:1}
  .nav .sp{display:none}
  .tool{display:none}
}

/* 레퍼런스 찾는 법 (참고 사이트 질문 아래) */
.refguide{margin-top:20px;background:var(--white);border:1px solid var(--rule-l);padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.refguide h3{font-size:16px;font-weight:700;letter-spacing:-.02em}
.refguide dl{margin:0;border-top:1px solid var(--black)}
.refguide dl > div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--rule-l);font-size:14.5px}
.refguide dt{font-weight:600}
.refguide dd{margin:0;min-width:0}
.refguide a{text-underline-offset:3px}
.refguide a:hover{color:var(--red)}
.refguide ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:#2b2b2b}
@media (max-width:640px){.refguide dl > div{grid-template-columns:minmax(0,1fr);gap:2px}}