:root{
  --bg:#faf7f2; --ink:#232a3b; --sub:#667085; --line:#e8e2d8;
  --primary:#3d4fd1; --primary-d:#2c3bb0; --primary-l:#eceefc;
  --teal:#18a999; --coral:#ff7a59; --card:#fff; --radius:18px;
  --shadow:0 6px 20px rgba(35,42,59,.08);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.7;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",system-ui,sans-serif;font-size:16px}
.app{max-width:480px;margin:0 auto;min-height:100vh;padding:0 16px 110px}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
.hidden{display:none!important}

/* top bar */
.topbar{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:10px 0 4px;position:sticky;top:0;background:var(--bg);z-index:5}
.topbar-title{text-align:center;font-weight:700;font-size:16px}
.icon-btn{width:44px;height:44px;border:0;background:transparent;font-size:30px;line-height:1;border-radius:50%;color:var(--primary)}
.icon-btn:active{background:var(--primary-l)}
.stepper{display:flex;gap:6px;justify-content:center;margin:2px 0 14px}
.stepper i{width:36px;height:6px;border-radius:3px;background:var(--line)}
.stepper i.on{background:var(--primary)}
.stepper i.done{background:var(--teal)}

/* home */
.hero{margin:18px 0 16px;padding:26px 22px;border-radius:24px;color:#fff;
  background:linear-gradient(135deg,#3d4fd1 0%,#18a999 100%);box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.12)}
.hero-badge{display:inline-block;font-size:12px;border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:0 10px;margin-bottom:10px}
.hero h1{font-size:26px;line-height:1.35;margin-bottom:10px}
.hero p{font-size:14px;opacity:.95}
.card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin-bottom:14px}
.privacy{display:flex;gap:12px;font-size:13.5px;color:var(--sub);background:#fff;border:1px dashed #c9d0f5}
.privacy b{color:var(--ink)}
.privacy .ico{font-size:24px;line-height:1.3}
.h2{font-size:15px;color:var(--sub);margin:22px 0 10px;font-weight:700}
.step-card{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;border:0;background:var(--card)}
.step-card:active{transform:scale(.99)}
.step-no{width:44px;height:44px;border-radius:50%;background:var(--primary-l);color:var(--primary);display:grid;place-items:center;font-weight:800;font-size:18px}
.step-card.done .step-no{background:var(--teal);color:#fff}
.step-card.soon{opacity:.55;box-shadow:none;background:#f3efe8}
.step-card .t{font-weight:700;line-height:1.4}
.step-card .s{font-size:12.5px;color:var(--sub)}
.badge{font-size:12px;border-radius:999px;padding:2px 10px;background:var(--primary-l);color:var(--primary);white-space:nowrap}
.badge.done{background:#d9f3ef;color:#0b7f72}
.badge.soon{background:#e9e4da;color:var(--sub)}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.link-btn{border:0;background:transparent;color:var(--primary);text-decoration:underline;padding:8px 4px;font-size:14px}
.link-btn.danger{color:#c2410c}
.foot-note{font-size:12px;color:var(--sub);margin-top:18px;text-align:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:14px;border:2px solid var(--primary);background:#fff;color:var(--primary);padding:12px 20px;font-weight:700;min-height:50px}
.btn.primary{background:var(--primary);color:#fff}
.btn.primary:active{background:var(--primary-d)}
.btn.primary[disabled]{background:#c8cbe6;border-color:#c8cbe6;cursor:not-allowed}
.btn.block{width:100%}
.btn.ghost{border-color:transparent;background:transparent}
.btn.danger{color:#c2410c}
.bottombar{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(to top,var(--bg) 70%,rgba(250,247,242,0));padding:18px 16px calc(14px + env(safe-area-inset-bottom));z-index:6}
.bb-inner{max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:6px}
.bb-sub{text-align:center}

/* intro */
.intro h1{font-size:23px;line-height:1.4;margin:6px 0 10px}
.meta-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.pill{font-size:13px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 12px}
.block-t{font-size:14px;font-weight:800;color:var(--primary);margin-bottom:4px}
.intro .card p, .intro .card li{font-size:15px}
.intro ol{margin:4px 0 0;padding-left:1.3em}
.intro li{margin-bottom:6px}
.example{background:var(--primary-l);border-radius:12px;padding:10px 14px;font-size:14px;margin-top:8px}
.illust{display:block;width:100%;height:auto;margin:6px 0}

/* step1 */
.lead{font-size:15px;margin-bottom:10px}
.chartbox{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:6px}
#chart{width:100%;height:auto;display:block;touch-action:none;user-select:none;-webkit-user-select:none}
#chart .mid{stroke:#d7d1c5;stroke-dasharray:4 5}
#chart .axis{fill:var(--sub);font-size:11px}
#chart .hint{fill:var(--sub);font-size:13px;text-anchor:middle}
#chart .dot-hi{fill:var(--teal)} #chart .dot-lo{fill:var(--coral)}
#chart .dot-n{fill:#fff;font-size:12px;font-weight:800;text-anchor:middle;pointer-events:none}
#chart circle{stroke:#fff;stroke-width:3}
.tips{font-size:13px;color:var(--sub);margin:10px 4px 0}
.plist{display:flex;flex-direction:column;gap:8px}
.prow{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;background:#fff;border:0;border-radius:14px;padding:10px 12px;text-align:left;width:100%;box-shadow:var(--shadow)}
.prow .n{width:30px;height:30px;border-radius:50%;color:#fff;font-weight:800;display:grid;place-items:center;font-size:14px}
.prow .n.hi{background:var(--teal)} .prow .n.lo{background:var(--coral)}
.prow .tt{font-weight:700;line-height:1.4}
.prow .ww{font-size:12.5px;color:var(--sub)}
.prow .lv{font-size:12px;color:var(--sub)}
.empty{font-size:14px;color:var(--sub);text-align:center;padding:12px}

/* sheet */
.overlay{position:fixed;inset:0;background:rgba(20,24,40,.45);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:480px;max-height:90vh;overflow:auto;background:#fff;border-radius:24px 24px 0 0;padding:10px 18px calc(20px + env(safe-area-inset-bottom));animation:up .22s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet-grip{width:44px;height:5px;border-radius:3px;background:#d8d3c8;margin:4px auto 10px}
.sheet h3{font-size:18px;margin-bottom:8px}
.fld{display:block;font-size:13.5px;font-weight:700;color:var(--sub);margin-top:12px}
.fld input[type=text],.fld textarea,.text-in{width:100%;margin-top:4px;font:inherit;font-weight:400;color:var(--ink);padding:11px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff}
.fld input:focus,.fld textarea:focus,.text-in:focus{outline:none;border-color:var(--primary)}
.slider-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-weight:400;font-size:12px;margin-top:4px}
input[type=range]{width:100%;accent-color:var(--primary);height:30px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600;color:var(--ink)}
.chip.on{background:var(--primary);border-color:var(--primary);color:#fff}
.sheet-actions{display:flex;justify-content:space-between;gap:10px;margin-top:18px}
.sheet-actions .btn.primary{flex:1}

/* step2 deck */
.counter{text-align:center;font-weight:700;color:var(--sub);margin-bottom:6px}
.bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin:0 0 14px}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--teal))}
.stack{position:relative;height:300px;margin:6px 8px 12px}
.vcard{position:absolute;inset:0;border-radius:24px;background:#fff;box-shadow:0 12px 30px rgba(35,42,59,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.vcard.back{transform:scale(.94) translateY(14px);opacity:.7;box-shadow:none;pointer-events:none}
.vcard .w{font-size:40px;font-weight:800;color:var(--primary);letter-spacing:.04em}
.vcard .d{margin-top:12px;font-size:16px;color:var(--sub)}
.vcard .tag{position:absolute;top:18px;font-weight:800;font-size:18px;border:3px solid;border-radius:10px;padding:0 12px;opacity:0;transform:rotate(-8deg)}
.vcard .tag.l{right:18px;color:var(--teal);border-color:var(--teal);transform:rotate(8deg)}
.vcard .tag.r{left:18px;color:#9aa0b4;border-color:#9aa0b4}
.vcard.fly{transition:transform .22s ease-in,opacity .22s}
.vcard.snap{transition:transform .2s}
.deck-actions{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.deck-actions .btn{min-height:56px}
.deck-actions .skip{border-color:#c4c8d6;color:#6b7186}
.deck-actions .like{background:var(--teal);border-color:var(--teal);color:#fff}
.q{text-align:center;font-weight:700;margin-bottom:8px}
.swipe-hint{text-align:center;font-size:12.5px;color:var(--sub);margin-top:12px}

.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vopt{position:relative;text-align:left;border:2px solid var(--line);background:#fff;border-radius:14px;padding:10px 12px;line-height:1.4}
.vopt b{display:block;font-size:17px}
.vopt span{font-size:12px;color:var(--sub)}
.vopt.on{border-color:var(--primary);background:var(--primary-l)}
.vopt .no{position:absolute;right:8px;top:8px;width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;display:none;place-items:center;font-size:13px;font-weight:800}
.vopt.on .no{display:grid}
.sel-count{font-weight:800;color:var(--primary)}
.reason-card h3{font-size:20px;color:var(--primary);display:flex;align-items:center;gap:8px}
.reason-card h3 .no{width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:14px}
.reason-card .d{font-size:13px;color:var(--sub);margin:2px 0 8px}
.reason-card textarea{width:100%;font:inherit;padding:11px 12px;border:1.5px solid var(--line);border-radius:12px}
.reason-card textarea:focus{outline:none;border-color:var(--primary)}

/* story card */
.cardwrap{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:10px}
#cardcv{width:100%;height:auto;display:block;border-radius:12px}
.notice{font-size:13px;background:#fff6e5;border:1px solid #f3dca8;border-radius:12px;padding:10px 12px;margin-bottom:12px}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%);background:rgba(35,42,59,.92);color:#fff;border-radius:999px;padding:10px 18px;font-size:14px;z-index:40;max-width:90vw;text-align:center}

/* step3-5 */
.stem{font-size:15px;font-weight:700;color:var(--ink);margin:10px 2px 4px}
.stem:first-child{margin-top:0}
.card .chips{margin:8px 0 2px}
.chip.fixed{background:var(--primary-l);border-color:var(--primary-l);color:var(--primary);cursor:default}
.memo p{font-size:14px;margin-top:2px}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:block;width:100%;text-align:left;border:2px solid var(--line);background:#fff;border-radius:14px;padding:12px 14px;line-height:1.45}
.opt b{display:block;font-size:16px}
.opt span{font-size:13px;color:var(--sub)}
.opt.on{border-color:var(--primary);background:var(--primary-l)}
.notice .link-btn{padding:0 2px;font-size:inherit}