:root{--paper:#f5eee1;--sheet:#fffaf0;--ink:#2e2925;--muted:#70655b;--accent:#744831;--line:#d5c5b0;--soft:#e9ddca;--base-space:8px;--number-font:ui-monospace,SFMono-Regular,Consolas,monospace}
*{box-sizing:border-box} [hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;line-height:1.6;word-break:keep-all;display:grid;grid-template-areas:"top" "main" "ad" "footer";grid-template-columns:minmax(0,1fr);isolation:isolate}
body[data-story="wallet-story"]{--paper:#f0f3f6;--sheet:#fff;--ink:#243341;--muted:#5f6c78;--accent:#305986;--line:#cbd5df;--soft:#e1e8ee}
body[data-story="office-survival"]{--paper:#eeefe6;--sheet:#fafbf6;--ink:#293023;--muted:#646c59;--accent:#596642;--line:#cbd0be;--soft:#e1e5d6}
button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:default}a{color:inherit;text-underline-offset:4px}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}h1:focus{outline:none}img{max-width:100%;height:auto}button{transition:background .15s,border-color .15s,transform .15s}
.topbar{grid-area:top;width:min(100% - 40px,760px);margin:0 auto;padding:20px 0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);font-size:13px}.topbar a{text-decoration:none}.topbar .brand{display:flex;gap:8px;align-items:center}.brand img{width:24px;height:24px}.topbar span{color:var(--muted)}
main{grid-area:main;width:min(100% - 40px,680px);margin:0 auto;min-width:0}.stage{scroll-margin-top:16px;min-height:540px;display:grid;grid-template-areas:"content";grid-template-columns:minmax(0,1fr)}.stage>.intro-stage,.stage>.play-stage,.stage>.result-stage{grid-area:content;min-width:0}
.intro-stage{text-align:center;padding:32px 0 56px}.scene-art{margin:0 auto 24px;width:420px;max-width:100%;border-radius:14px;overflow:hidden}.scene-art img{display:block}.eyebrow{color:var(--accent);font-size:13px;font-weight:700;letter-spacing:.05em;margin:0 0 12px}h1{font-size:clamp(27px,4.5vw,38px);letter-spacing:-.045em;line-height:1.35;margin:0 0 20px}h2{font-size:16px;margin:0 0 20px}.lead{color:var(--muted);font-size:16px;max-width:480px;margin:0 auto 24px;line-height:1.9}.intro-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 16px;font-size:13px;margin:0 0 32px;color:var(--muted)}.intro-meta span+span:before{content:"·";margin-right:16px}
.primary,.secondary,.kakao{display:block;width:100%;padding:17px 20px;border:1px solid var(--accent);border-radius:6px;font-size:16px;font-weight:700;min-height:56px}.primary{background:var(--accent);color:var(--sheet)}.primary:hover{filter:brightness(1.1)}.secondary{background:var(--sheet);color:var(--ink);border-color:var(--line)}.secondary:hover{border-color:var(--accent)}.start{max-width:420px;margin:0 auto}.text-button{border:0;background:none;color:var(--muted);padding:12px 0;font-size:13px;text-decoration:underline;text-underline-offset:4px}.small{font-size:12px;color:var(--muted);line-height:1.7}.error{color:#9a362c;padding:16px;border:1px solid currentColor}.intro-stage .small{margin-top:18px}
.play-stage{padding:20px 0 24px}.play-top{display:flex;justify-content:space-between;align-items:center;font-size:13px}.play-top>span{font-family:var(--number-font);font-weight:700}.progress-track{height:4px;background:var(--soft);margin:8px 0 24px;overflow:hidden}.progress-track>span{height:100%;display:block;background:var(--accent);transition:width .2s}.scene-caption{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px;margin-bottom:16px}.scene-with-mascot{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--accent)}.question-mascot{display:block;width:84px;height:44px;object-fit:contain;border-radius:6px;flex:none}.scene-caption b{color:var(--ink);margin-left:8px;white-space:nowrap}
.question-sheet{padding:28px 32px;background:var(--sheet);border:1px solid var(--line);border-radius:6px}.question-number{font:13px var(--number-font);color:var(--accent);margin:0 0 18px}.question-sheet h1{font-size:clamp(23px,4vw,30px);margin-bottom:16px}.question-detail{font-size:14px;color:var(--muted);margin:0 0 28px;line-height:1.8}.options{display:grid;gap:10px}.choice{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:17px 16px;min-height:64px;background:var(--sheet);border:1px solid var(--line);border-radius:4px;color:var(--ink);font-size:15px;line-height:1.65}.choice:hover{background:var(--paper);border-color:var(--accent)}.choice:active{transform:translateY(1px)}.choice-letter{font-size:11px;flex:none;color:var(--muted);width:18px}.choice-arrow{margin-left:auto;flex:none;color:var(--accent)}.last-choice{font-size:12px;color:var(--muted);margin:18px 0 0;min-height:24px}.save-note{margin:8px 0}.result-stage{padding:40px 0}.result-identity{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);margin-bottom:24px;padding-bottom:16px}.result-identity img{display:block;width:160px;border-radius:8px}.result-identity span{font:12px var(--number-font);color:var(--muted)}.result-stage h1{max-width:560px;margin-bottom:18px}.result-quote{font-size:18px;font-weight:700;color:var(--accent);margin:0 0 24px}.result-description{font-size:15px;line-height:1.9;margin-bottom:28px}.balance-line{display:flex;justify-content:space-between;align-items:center;background:var(--soft);padding:18px 20px;gap:12px}.balance-line span{font-size:13px}.balance-line strong{font-size:23px;white-space:nowrap;font-variant-numeric:tabular-nums}.traits{margin:32px 0;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.trait{display:grid;grid-template-columns:94px 1fr 28px;gap:12px;align-items:center;margin-top:14px;font-size:13px}.trait-bar{height:6px;background:var(--soft)}.trait-bar i{height:100%;display:block;background:var(--accent)}.trait b{font:12px var(--number-font);text-align:right}
.receipt{border:1px dashed var(--line);background:var(--sheet);padding:24px;margin:24px 0}.receipt h2{margin-bottom:12px}.receipt p{display:grid;grid-template-columns:90px 1fr;gap:12px;border-top:1px dotted var(--line);padding-top:14px;font-size:13px}.receipt p span{color:var(--muted)}.receipt strong{font-weight:500}.result-notes p{font-size:13px;line-height:1.9}.disclaimer{margin:24px 0}.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.share-actions .primary{grid-column:1/-1}.kakao{background:#fee500;border-color:#eed500;color:#31271a;font-size:14px}.share-status{font-size:13px;color:var(--muted);margin:12px 0}textarea{font:13px var(--number-font);width:100%;border:1px solid var(--line);padding:12px;color:var(--ink);background:var(--sheet)}.next-stories{margin:36px 0 0;padding-top:24px;border-top:1px solid var(--line)}.next-stories a{display:flex;justify-content:space-between;text-decoration:none;font-size:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.how-to{padding:28px 0 48px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}.how-to h2{color:var(--ink)}.how-to p{line-height:1.9}.how-to details{border-top:1px solid var(--line);padding:16px 0}.how-to summary{cursor:pointer;font-size:13px;color:var(--ink);font-weight:600}.how-to details p{font-size:13px;margin-bottom:0}.ad-zone{grid-area:ad;min-height:90px;width:min(100% - 40px,680px);margin:16px auto 32px;text-align:center}.ad-zone:empty{min-height:0;margin:0}footer{grid-area:footer;text-align:center;font-size:12px;padding:24px 20px 32px;border-top:1px solid var(--line);color:var(--muted)}footer a{margin:0 8px}
@media(max-width:520px){.topbar{width:calc(100% - 32px);padding:16px 0}.topbar>span{font-size:11px}main{width:calc(100% - 32px)}.intro-stage{padding-top:24px}.scene-art{width:320px;margin-bottom:20px}.lead{font-size:15px}.question-sheet{padding:22px 18px}.choice{padding:15px 12px;gap:10px;font-size:14px}.scene-caption{font-size:11px}.question-detail{margin-bottom:22px}.play-stage{padding-top:10px}.result-stage{padding-top:28px}.result-stage h1{font-size:28px}.result-quote{font-size:17px}.receipt{padding:20px 16px}.receipt p{grid-template-columns:76px 1fr;gap:8px}.share-actions .secondary,.share-actions .kakao{font-size:13px;padding:14px 10px}.trait{grid-template-columns:84px 1fr 28px}.intro-meta{font-size:12px;gap:8px}.intro-meta span+span:before{margin-right:8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}