:root{
  --ink:#26221e; --muted:#756c63; --paper:#f7f3eb; --paper2:#fffdf8;
  --gold:#b89a67; --gold-soft:#eadfc8; --sage:#dbe4d7; --sage-ink:#3d4a3a;
  --line:#ded5c8; --shadow:0 18px 55px rgba(45,35,25,.10);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:
 radial-gradient(circle at 50% 0%,#fffdf7 0,#f7f3eb 52%,#f0eadf 100%);
 color:var(--ink);font-family:"Noto Sans KR","Apple SD Gothic Neo",system-ui,sans-serif}
body{min-height:100vh}
button,input{font:inherit}
.app{width:min(720px,100%);margin:0 auto;min-height:100vh;padding:20px 16px 46px}
.brand{padding:18px 4px 8px;text-align:center}
.brand .author{font-size:12px;letter-spacing:.18em;color:#6f6255;margin-bottom:9px}
.brand h1{font-family:Georgia,"Times New Roman","Noto Serif KR",serif;font-size:28px;line-height:1.32;margin:0;font-weight:700}
.progress{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:22px 0 18px}
.progress span{height:4px;border-radius:99px;background:#ddd3c5}
.progress span.on{background:var(--gold)}
.screen{display:none;animation:fade .28s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.card{background:rgba(255,253,248,.96);border:1px solid rgba(206,193,174,.82);
 border-radius:24px;box-shadow:var(--shadow);padding:25px 20px}
.cover{min-height:565px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.cover .eyebrow{font-size:12px;letter-spacing:.14em;color:#8d7655;margin-bottom:14px}
.cover h2{font-family:Georgia,"Noto Serif KR",serif;font-size:34px;line-height:1.38;margin:0 0 16px}
.cover p{margin:0 auto 34px;color:var(--muted);line-height:1.8;font-size:15px}
.input-wrap{max-width:430px;margin:0 auto;width:100%}
.name-input{width:100%;border:0;border-bottom:1.5px solid #b99c71;background:transparent;
 outline:none;padding:13px 8px;text-align:center;font-size:24px;font-weight:700;color:var(--ink)}
.name-input::placeholder{color:#aaa097;font-weight:400}
.primary{border:0;background:var(--ink);color:#fff;border-radius:999px;width:100%;padding:15px 18px;
 margin-top:20px;font-weight:700;cursor:pointer;box-shadow:0 8px 24px rgba(38,34,30,.18)}
.primary:active{transform:translateY(1px)}
.helper{font-size:11px;color:#968c82;margin-top:13px;line-height:1.6}
.result-title{text-align:center;margin:2px 0 22px}
.result-title .kicker{font-size:12px;letter-spacing:.13em;color:#856d4e}
.result-title h2{font-family:Georgia,"Noto Serif KR",serif;font-size:30px;margin:7px 0 4px}
.result-title p{margin:0;color:var(--muted);font-size:13px}
.strokes{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:0 0 21px}
.strokes span{background:#f4ecdd;border:1px solid #e1d3bc;padding:7px 10px;border-radius:999px;font-size:12px}
.flow{display:grid;gap:11px}
.flow-item{border:1px solid var(--line);border-radius:18px;padding:15px 16px;background:var(--paper2)}
.flow-item .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.flow-item .phase{font-size:12px;color:#7c7167;font-weight:700}
.flow-item .number{font-size:20px;font-weight:800;color:#8d6940}
.flow-item .meaning{margin-top:6px;font-size:16px;font-weight:750;line-height:1.45}
.flow-item.unconscious{background:#f3f7f2;border-color:#d8e0d5}
.flow-item.unconscious .number{color:#546550}
.caption{margin:18px 2px 0;color:#756c63;font-size:12px;line-height:1.75;text-align:center}
.nav{display:flex;gap:10px;margin-top:22px}
.nav button{flex:1;border-radius:999px;padding:13px 14px;font-weight:700;cursor:pointer}
.secondary{border:1px solid #cfc3b4;background:transparent;color:#4b433b}
.next{border:0;background:var(--ink);color:#fff}
.guide h2{font-family:Georgia,"Noto Serif KR",serif;font-size:28px;text-align:center;margin:2px 0 8px}
.guide .lead{text-align:center;color:var(--muted);line-height:1.75;margin:0 0 24px}
.info{padding:17px 16px;border-top:1px solid var(--line)}
.info:first-of-type{border-top:0}
.info h3{font-size:15px;margin:0 0 7px}
.info p{font-size:13px;color:#6f665e;line-height:1.75;margin:0}
.book-note{margin-top:15px;border-radius:17px;background:#f1e7d6;padding:16px;text-align:center;
 color:#5e4d3b;font-size:13px;line-height:1.65}
.error{display:none;margin:13px auto 0;max-width:430px;padding:11px 12px;border-radius:12px;
 background:#fff1ee;color:#9a4338;font-size:12px;line-height:1.55}
.error.show{display:block}
.footer{text-align:center;font-size:10px;color:#9a9188;margin-top:18px}
@media(min-width:620px){
  .app{padding-top:30px}.card{padding:32px 30px}.cover h2{font-size:40px}
  .flow{grid-template-columns:1fr 1fr}
}


.choice-grid{display:grid;gap:14px;margin-top:18px}
.choice-card{border:1px solid var(--line);background:#fffdfa;border-radius:20px;padding:20px 17px;text-align:center}
.choice-card h3{font-size:17px;margin:9px 0 8px}
.choice-card p{font-size:13px;line-height:1.75;color:#70675f;margin:0 0 15px}
.choice-icon{display:inline-flex;align-items:center;justify-content:center;height:30px;min-width:54px;padding:0 10px;border-radius:999px;
 font-size:10px;letter-spacing:.12em;font-weight:800;background:#efe4d1;color:#6a563a}
.choice-btn{display:block;width:100%;border:0;border-radius:999px;padding:13px 14px;background:var(--ink);color:#fff;font-weight:700;cursor:pointer;text-decoration:none;text-align:center}
.choice-note{font-size:10px;color:#968c82;margin-top:9px;line-height:1.5}
.guide-summary{margin-top:17px;padding:16px 14px;border-radius:16px;background:#f4f0e8;color:#63594f;text-align:center;font-size:13px;line-height:1.75}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;
 background:#2b2723;color:#fff;padding:12px 16px;border-radius:999px;font-size:12px;box-shadow:0 12px 30px rgba(0,0,0,.18);
 transition:.2s ease;z-index:99;white-space:nowrap;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:620px){.choice-grid{grid-template-columns:1fr 1fr}}