/* 디자인 시스템 — Claude Design 프로토타입 이식 (코랄 + Pretendard, 모바일 우선) */
:root{
  --point:#FF6B57; --point-press:#F2543E; --point-ink:#C53D2A;
  --point-050:#FFF3F0; --point-100:#FFE6E0;
  --bg:#F6F3F0; --surface:#FFFFFF; --ink:#211C1A; --ink-2:#6E655F; --ink-3:#9A918B;
  --line:#ECE6E0; --line-2:#E2DAD3; --chip:#F2ECE6; --chip-press:#E8DFD7; --disabled-bg:#F4F1EE;
  --shadow-sm:0 1px 2px rgba(45,33,28,.05); --shadow-md:0 6px 20px rgba(45,33,28,.08);
  --shadow-cta:0 8px 22px rgba(255,107,87,.30); --radius:18px; --radius-lg:22px; --maxw:420px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
[hidden]{display:none!important;}
html,body{margin:0;padding:0;}
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  background:#E9E3DD; color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.5;
  display:flex; justify-content:center; min-height:100dvh;
}
a{color:inherit;}

/* App shell */
.app{width:100%;max-width:var(--maxw);min-height:100dvh;background:var(--bg);position:relative;display:flex;flex-direction:column;}

/* top bar */
.topbar{position:sticky;top:0;z-index:30;height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:color-mix(in srgb, var(--bg) 86%, transparent);backdrop-filter:saturate(1.2) blur(10px);}
.brand{display:flex;align-items:center;gap:7px;font-weight:800;font-size:15px;letter-spacing:-.02em;text-decoration:none;color:var(--ink);}
.brand .dot{width:9px;height:9px;border-radius:3px;background:var(--point);box-shadow:0 0 0 3px var(--point-100);}
.topbar nav a{color:var(--ink-2);font-size:14px;font-weight:700;text-decoration:none;margin-left:14px;}
.topbar .iconbtn{border:none;background:transparent;color:var(--ink-2);height:38px;padding:0 13px;border-radius:11px;display:flex;align-items:center;cursor:pointer;font-size:14.5px;font-weight:700;text-decoration:none;}
.topbar.is-test{justify-content:flex-start;gap:12px;}
.backbtn{border:none;background:var(--surface);box-shadow:var(--shadow-sm);width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);flex:none;text-decoration:none;}
.backbtn svg{width:18px;height:18px;}

/* progress */
.progress-wrap{flex:1;display:flex;align-items:center;gap:12px;}
.progress-track{flex:1;height:7px;border-radius:99px;background:var(--line-2);overflow:hidden;}
.progress-fill{height:100%;border-radius:99px;background:var(--point);width:0%;transition:width .45s cubic-bezier(.2,.8,.2,1);}
.progress-num{font-size:13px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums;flex:none;}
.progress-num b{color:var(--point-ink);}

/* screen / page */
.screen{display:flex;flex-direction:column;padding:8px 20px 40px;flex:1;animation:screenIn .45s cubic-bezier(.2,.8,.2,1);}
@keyframes screenIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.screen{animation:none;}}

/* HOME */
.hero-eyebrow{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;background:var(--point-050);color:var(--point-ink);font-size:13px;font-weight:700;padding:7px 12px;border-radius:99px;margin-top:14px;}
.hero-eyebrow .spark{width:6px;height:6px;border-radius:50%;background:var(--point);}
.home-headline{font-size:34px;line-height:1.18;font-weight:800;letter-spacing:-.035em;margin:18px 0 0;text-wrap:balance;}
.home-headline .hl{color:var(--point);}
.home-sub{margin:14px 0 0;color:var(--ink-2);font-size:16px;max-width:30ch;}
.home-visual{margin:26px 0 4px;border-radius:var(--radius-lg);background:radial-gradient(120% 90% at 80% 10%, var(--point-100) 0%, transparent 55%),linear-gradient(180deg,#FFFFFF 0%,#FFF7F4 100%);border:1px solid var(--line);box-shadow:var(--shadow-md);padding:22px;position:relative;overflow:hidden;}
.home-visual .gift{width:100%;aspect-ratio:16/9;border-radius:14px;background:repeating-linear-gradient(135deg,#FFE2DA 0 11px,#FFD7CC 11px 22px);display:flex;align-items:center;justify-content:center;position:relative;}
.gift .badge{background:var(--surface);border-radius:99px;padding:9px 15px;font-weight:800;font-size:14px;color:var(--ink);box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:8px;}
.gift .badge .pin{width:8px;height:8px;border-radius:50%;background:var(--point);}
.home-visual .stat-row{display:flex;gap:10px;margin-top:16px;}
.home-visual .stat{flex:1;background:var(--surface);border-radius:14px;padding:12px 13px;border:1px solid var(--line);}
.home-visual .stat .k{font-size:20px;font-weight:800;letter-spacing:-.03em;}
.home-visual .stat .l{font-size:12px;color:var(--ink-3);margin-top:1px;font-weight:600;}
.cta-zone{margin-top:auto;padding-top:24px;}

/* primary button */
.btn-primary{width:100%;border:none;cursor:pointer;background:var(--point);color:#fff;font-family:inherit;font-size:18px;font-weight:800;height:60px;border-radius:17px;box-shadow:var(--shadow-cta);display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;transition:transform .12s ease,background .15s ease;}
.btn-primary:active{transform:translateY(1px) scale(.99);background:var(--point-press);}
.cta-note{text-align:center;color:var(--ink-3);font-size:13px;margin:12px 0 0;}

/* chips */
.chips-label{font-size:14px;font-weight:700;color:var(--ink-2);margin:30px 0 12px;display:flex;align-items:center;gap:6px;}
.chips-label::after{content:"";flex:1;height:1px;background:var(--line);}
.chips,.subchip-row{display:flex;flex-wrap:wrap;gap:9px;}
.chip{border:1px solid var(--line-2);background:var(--surface);cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink);padding:10px 15px;border-radius:99px;display:inline-flex;align-items:center;gap:6px;text-decoration:none;transition:transform .1s ease,background .15s ease;}
.chip:active{transform:scale(.96);background:var(--chip);}
.chip[aria-disabled="true"]{opacity:.6;}

/* TEST */
.q-kicker{font-size:14px;font-weight:700;color:var(--point-ink);margin-top:18px;}
.q-title{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.28;margin:10px 0 0;text-wrap:balance;}
.q-hint{color:var(--ink-3);font-size:14px;margin:9px 0 0;}
.options{display:flex;flex-direction:column;gap:11px;margin-top:26px;}
.opt{width:100%;text-align:left;cursor:pointer;font-family:inherit;background:var(--surface);border:1.5px solid var(--line-2);border-radius:16px;padding:18px;font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink);display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-sm);transition:transform .12s ease,border-color .15s ease,background .15s ease;}
.opt .num{flex:none;width:30px;height:30px;border-radius:9px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--ink-2);}
.opt:active{transform:scale(.985);}
.opt.is-picked{border-color:var(--point);background:var(--point-050);}
.opt.is-picked .num{background:var(--point);color:#fff;}

/* RESULT */
.result-hero{margin-top:14px;background:radial-gradient(120% 100% at 85% 0%, var(--point-100) 0%, transparent 60%),linear-gradient(180deg,#FFFFFF 0%,#FFF7F4 100%);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 22px;box-shadow:var(--shadow-md);}
.result-hero .tag{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:6px 11px;font-size:12.5px;font-weight:700;color:var(--point-ink);box-shadow:var(--shadow-sm);}
.result-hero .tag .pin{width:6px;height:6px;border-radius:50%;background:var(--point);}
.result-name{font-size:27px;font-weight:800;letter-spacing:-.035em;line-height:1.2;margin:14px 0 0;text-wrap:balance;}
.result-desc{color:var(--ink-2);font-size:15.5px;margin:12px 0 0;line-height:1.6;}
.disclosure{display:flex;gap:10px;align-items:flex-start;background:var(--point-050);border:1px solid var(--point-100);border-radius:13px;padding:11px 13px;margin-top:14px;}
.disclosure .i{flex:none;width:17px;height:17px;border-radius:50%;background:var(--point);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.disclosure p{margin:0;font-size:11.5px;line-height:1.55;color:var(--point-ink);font-weight:500;}
.result-cta{margin-top:16px;}
.sec-head{margin:34px 0 14px;}
.sec-head h2,.sec-head h3{font-size:19px;font-weight:800;letter-spacing:-.03em;margin:0;}
.sec-head p{font-size:13.5px;color:var(--ink-3);margin:5px 0 0;}

/* category buttons */
.cat-list{display:flex;flex-direction:column;gap:11px;}
.cat-btn{width:100%;text-align:left;cursor:pointer;font-family:inherit;background:var(--surface);border:1.5px solid var(--line-2);border-radius:16px;padding:16px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-sm);text-decoration:none;transition:transform .12s ease,border-color .15s ease,box-shadow .15s ease;}
.cat-btn:active{transform:scale(.99);}
.cat-btn:hover{border-color:var(--point-100);box-shadow:var(--shadow-md);}
.cat-ico{flex:none;width:46px;height:46px;border-radius:13px;background:var(--point-050);display:flex;align-items:center;justify-content:center;font-size:22px;}
.cat-body{flex:1;min-width:0;}
.cat-name{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink);}
.cat-reason{display:block;font-size:13px;color:var(--ink-2);margin-top:3px;line-height:1.45;}
.cat-go{flex:none;display:flex;align-items:center;gap:3px;color:var(--point-ink);font-size:13.5px;font-weight:800;}
.cat-go svg{width:15px;height:15px;}
.cat-btn.is-disabled{background:var(--disabled-bg);border-color:var(--line);box-shadow:none;cursor:not-allowed;}
.cat-btn.is-disabled .cat-ico{background:#ECE6E0;filter:grayscale(.5);opacity:.7;}
.cat-btn.is-disabled .cat-name,.cat-btn.is-disabled .cat-reason{color:var(--ink-3);}
.soon-badge{font-size:11px;font-weight:800;color:var(--ink-3);background:#E7E0DA;border-radius:7px;padding:3px 7px;}
.cat-go.is-soon{color:var(--ink-3);}

/* keyword list */
.kw-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:6px 4px;box-shadow:var(--shadow-sm);}
.kw-item{display:flex;align-items:center;gap:13px;padding:13px 14px;}
.kw-item + .kw-item{border-top:1px solid var(--line);}
.kw-rank{flex:none;width:24px;font-weight:800;color:var(--point);font-size:15px;}
.kw-text{flex:1;font-weight:700;font-size:15.5px;letter-spacing:-.02em;}
.kw-text b{color:var(--ink);} .kw-text span{color:var(--ink-2);font-weight:600;font-size:14px;}

/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:10px;}
.faq{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);}
.faq summary{list-style:none;cursor:pointer;padding:16px;display:flex;align-items:center;gap:11px;font-weight:700;font-size:15px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .q{flex:none;width:22px;height:22px;border-radius:7px;background:var(--point-050);color:var(--point-ink);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;}
.faq .a{padding:0 16px 16px 49px;color:var(--ink-2);font-size:14px;line-height:1.65;}

.other-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 16px;box-shadow:var(--shadow-sm);}

/* share (secondary) */
.share-zone{margin-top:30px;border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.share-zone .sl{font-size:13px;color:var(--ink-3);font-weight:600;}
.share-btns{display:flex;gap:10px;}
.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;cursor:pointer;font-family:inherit;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:11px 16px;font-size:14px;font-weight:700;color:var(--ink);transition:transform .1s ease,background .12s ease;}
.share-btn svg{width:17px;height:17px;flex:none;}
.share-btn:active{transform:scale(.96);background:var(--chip);}
.share-btn.kakao{background:#FEE500;border-color:#F2D900;color:#3A2929;}
.restart-row{margin-top:22px;display:flex;justify-content:center;}
.restart-btn{background:transparent;border:none;cursor:pointer;font-family:inherit;color:var(--ink-3);font-size:13.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px;}

/* toast */
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);background:#26201D;color:#fff;font-size:14px;font-weight:600;padding:13px 20px;border-radius:13px;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:80;display:flex;align-items:center;gap:8px;max-width:90vw;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast .dot{width:7px;height:7px;border-radius:50%;background:var(--point);flex:none;}

/* footer */
.site-foot{margin-top:auto;padding:22px 20px 30px;border-top:1px solid var(--line);color:var(--ink-3);font-size:12.5px;}
.site-foot nav a{margin-right:14px;color:var(--ink-2);text-decoration:none;font-weight:600;}
.site-foot .foot-note{margin:10px 0 0;}

/* ── 콘텐츠 페이지 유틸 (가이드/소개/개인정보/고지/대시보드) ── */
h1{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.25;margin:14px 0 10px;}
h2{font-size:18px;font-weight:800;margin:24px 0 8px;}
.lead{font-size:16px;color:var(--ink-2);}
p{margin:8px 0;}
.muted{color:var(--ink-2);} .small{font-size:13px;}
ul{margin:8px 0;padding-left:18px;color:var(--ink-2);}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:12px 0;box-shadow:var(--shadow-sm);}
.btn-row{display:flex;flex-direction:column;gap:10px;margin:16px 0;}
.btn{display:block;width:100%;text-align:center;text-decoration:none;padding:15px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface);font-weight:700;color:var(--ink);}
.table{width:100%;border-collapse:collapse;font-size:14px;margin:10px 0;background:var(--surface);}
.table th,.table td{border:1px solid var(--line);padding:8px;text-align:left;}
.faq dt{font-weight:700;margin-top:12px;} .faq dd{margin:4px 0 0;color:var(--ink-2);}