/* 습관부자 미래 테스트(명령 #84) — 앱 색(바탕 #FBF8F2 · 글자 #2B2420 · 초록 #2E7D4F) */
:root { --bg: #FBF8F2; --ink: #2B2420; --muted: #7A7268; --green: #2E7D4F; --card: #fff; --line: #E6DFD3; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; word-break: keep-all; }
.page { max-width: 440px; margin: 0 auto; padding: 32px 16px 96px; display: flex; flex-direction: column; gap: 14px; }
h1 { font-size: 26px; line-height: 1.3; margin: 0; text-align: center; font-weight: 900; text-wrap: balance; }
h2 { font-size: 22px; line-height: 1.35; margin: 8px 0 4px; font-weight: 900; text-wrap: balance; }
.hero { display: block; width: min(300px, 80vw); height: auto; margin: 0 auto; border-radius: 24px; }
.sub, .step, .eyebrow { text-align: center; color: var(--muted); margin: 0; font-size: 15px; }
.eyebrow { font-weight: 800; letter-spacing: .02em; }
button { font: inherit; font-size: 16px; font-weight: 800; border-radius: 14px; padding: 15px 16px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer; width: 100%; }
button.primary { background: var(--ink); color: #fff; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.start { display: flex; flex-direction: column; gap: 14px; }
.progress { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
#bar { height: 100%; width: 0; background: var(--green); transition: width .2s; }
.opts { display: flex; flex-direction: column; gap: 10px; }
.opts button { text-align: left; font-weight: 700; border-width: 1.5px; border-color: var(--line); }
.opts button:active { border-color: var(--ink); }
.bubble { background: var(--card); border-radius: 16px; border-bottom-left-radius: 4px; padding: 14px 16px; margin: 0; font-size: 16px; line-height: 1.5; }
.bubble b { display: block; font-size: 13px; color: var(--muted); margin-bottom: 2px; }
.goal { display: flex; align-items: center; gap: 12px; background: #E8F4EC; border-radius: 16px; padding: 10px 14px; }
.goal img { border-radius: 12px; flex: none; }
.goal p { margin: 0; font-size: 15px; line-height: 1.4; }
.goal b { color: var(--green); }
.actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.vs a { color: var(--green); font-weight: 900; }
.vs { background: #FFF4D6; border-radius: 12px; padding: 12px 14px; margin: 0; text-align: center; font-weight: 800; }
.stores { display: flex; flex-direction: column; gap: 8px; text-align: center; font-size: 15px; }
.stores a { color: var(--green); font-weight: 800; }
.toast { text-align: center; color: var(--green); font-weight: 800; margin: 0; }
.about { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); text-align: center; }
.nick { font: inherit; font-size: 16px; padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); width: 100%; }
.board { background: var(--card); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.board h3 { margin: 0 0 2px; font-size: 16px; font-weight: 900; }
.board ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.board li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; font-variant-numeric: tabular-nums; }
.board li .rk { width: 1.6em; color: var(--muted); font-weight: 800; }
.board li .nm { font-weight: 800; flex: none; max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board li .lv { color: var(--muted); }
.board li .tag { font-size: 12px; font-weight: 800; color: #fff; background: var(--ink); border-radius: 6px; padding: 1px 6px; flex: none; }
.board .note { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.ask { display: flex; flex-direction: column; gap: 8px; }
.board li.me .nm, .board li.me .lv { color: var(--green); }
.again { text-align: center; color: var(--muted); font-size: 14px; }
footer { position: fixed; left: 0; right: 0; bottom: 0; text-align: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); font-size: 12px; color: var(--muted); background: var(--bg); border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { #bar { transition: none; } }
/* 명령 #96 유형 결과 */
.who { text-align: center; color: var(--muted); font-size: 17px; font-weight: 800; margin: 0; }
.typename { font-size: 30px; }
.tags { text-align: center; color: var(--green); font-weight: 800; margin: 0; font-size: 15px; word-spacing: 4px; }
.card { background: var(--card); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.card h3 { margin: 0; font-size: 16px; font-weight: 900; }
.lines { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 4px; line-height: 1.5; }
.future .bubble { background: var(--bg); padding: 12px 14px; }
.futurehead { margin: 0; font-size: 17px; font-weight: 900; }
.goalline { margin: 0; color: var(--green); font-weight: 800; }
.match p { margin: 0; display: flex; gap: 10px; font-size: 15px; }
.match b { width: 4em; flex: none; color: var(--muted); }
.match a { color: var(--ink); font-weight: 800; }
.board li .ty { color: var(--muted); font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btnlink { display: block; text-align: center; text-decoration: none; font-weight: 800; border-radius: 14px; padding: 15px 16px; background: var(--ink); color: #fff; }
/* 시작 화면 */
.invite { margin: 0; text-align: center; font-weight: 900; font-size: 17px; }
.mine { display: block; text-align: center; color: var(--green); font-weight: 800; }
.hint { margin: -6px 0 0; font-size: 13px; color: #B3261E; }
button:disabled { opacity: .35; cursor: default; }
body.invited .hero { width: 140px; }
body.invited .page { padding-top: 20px; }
.intro { margin-top: 24px; font-size: 13px; line-height: 1.6; color: var(--muted); text-align: center; }
.intro h2 { margin: 12px 0 4px; font-size: 14px; color: inherit; }
.intro p { margin: 0 0 6px; }
.intro a { color: var(--green); font-weight: 700; }
.namebox { display: grid; gap: 8px; margin: 4px 0 12px; }
.namebox .note { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.qr { display: flex; align-items: center; gap: 18px; padding: 14px; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; }
.qrimg { width: 160px; height: 160px; flex: none; background: #fff; }
.qrimg svg { width: 100%; height: 100%; display: block; }
.qr p { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
body.pcqr .hero { width: 110px; } /* #186-1 PC 결과 화면: 그림을 줄여 QR 이 첫 화면에 들어오게 */