.intro{max-width:780px;padding:55px 0}.intro h1{font-size:clamp(42px,7vw,76px)}.choice{display:grid;grid-template-columns:1fr 1fr;gap:18px}.choice button{padding:28px;text-align:left;min-height:160px;font-size:23px;line-height:1.6}.choice button::before{content:attr(data-letter);display:block;font-size:12px;letter-spacing:3px;margin-bottom:20px;color:#c9dcac}.result-card{border:1px solid #4d6043;border-radius:20px;overflow:hidden;margin:32px 0}.cover{padding:30px;color:#1c291b;background:var(--accent);position:relative}.cover h2{font-size:clamp(34px,5vw,56px);margin:10px 0}.cover p{color:#273622;font-size:19px;max-width:620px}.cover .tag{color:#35432f}.body{padding:28px;background:#203021}.body audio{width:100%;margin:15px 0}.body .states [aria-pressed=true]{background:var(--accent);color:#1d2b19}.note{border-left:3px solid #d0e5ad;padding-left:18px}.summary{padding:20px;background:#243020;border-radius:12px}.summary p{margin:7px 0}.steps{font-size:12px;letter-spacing:2px;color:#c8dda8}.progress{margin-bottom:25px}@media(max-width:650px){.choice{grid-template-columns:1fr}.choice button{min-height:105px;padding:20px;font-size:20px}.choice button::before{margin-bottom:8px}.intro{padding:25px 0}}
/* Korean reading rhythm: keep words together, balance short headings. */
#app { word-break: keep-all; overflow-wrap: anywhere; }
#app h1, #app h2, #app h3 { text-wrap: balance; }
.question h1 {
 font-size: clamp(28px, 3.8vw, 42px);
 line-height: 1.45;
 letter-spacing: -0.035em;
 max-width: 19em;
 margin: 24px 0 16px;
}
.question > p { line-height: 1.85; }
.question .steps { letter-spacing: 0.035em; line-height: 1.8; }
.choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice button {
 min-width: 0;
 padding: 26px;
 font-size: clamp(19px, 2.2vw, 22px);
 line-height: 1.75;
 letter-spacing: -0.02em;
 word-break: keep-all;
 overflow-wrap: anywhere;
 text-wrap: balance;
}
.choice button::before { margin-bottom: 14px; line-height: 1.4; }
.intro h1, .intro > p { white-space: pre-line; }
.cover h2 { line-height: 1.4; letter-spacing: -0.035em; }
.cover p { line-height: 1.8; text-wrap: pretty; }
.body p, .summary p { line-height: 1.85; text-wrap: pretty; }
@media (max-width: 650px) {
 .question { margin: 26px auto; }
 .question h1 { font-size: clamp(27px, 6.5vw, 34px); }
 .choice { grid-template-columns: minmax(0, 1fr); gap: 12px; }
 .choice button { padding: 20px 22px; min-height: 112px; font-size: 20px; }
 .choice button::before { margin-bottom: 10px; }
 .question .states { gap: 8px; }
}