@font-face{font-family:"Paperlogy";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Paperlogy";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Paperlogy";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Paperlogy";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --ink:#262B4D; --dusk:#3A3F6B; --peri:#8E9ED6; --rose:#B8736E; --blush:#E7B8AE;
  --thread:#EAD99A; --paper:#F3EAE6; --text:#2A2740; --mute:#6D6780;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--ink)}
body{font-family:"Paperlogy",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;color:var(--text);
  -webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,textarea:focus-visible{outline:2px solid var(--thread);outline-offset:3px}
[hidden]{display:none!important}

.app{position:relative;max-width:480px;min-height:100dvh;margin:0 auto;overflow:hidden;background:var(--ink)}
.screen{position:absolute;inset:0;display:none;flex-direction:column;min-height:100dvh}
.screen.is-on{display:flex}
.bg{position:absolute;inset:0;background:center/cover no-repeat;transition:opacity .6s ease}
.bg.dim::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,43,77,.35),rgba(38,43,77,.82))}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;border-radius:27px;font-size:16px;font-weight:600;letter-spacing:-.01em;transition:transform .15s ease,background .2s}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--ink);color:#fff}
.btn.ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn.text{min-height:44px;font-weight:500;color:var(--mute);font-size:14px}

/* intro */
.s-intro{justify-content:space-between;color:var(--ink)}
.s-intro .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(243,234,230,.9) 0%,rgba(243,234,230,.75) 24%,rgba(243,234,230,0) 40%,rgba(243,234,230,.0) 55%,rgba(243,234,230,.92) 82%)}
.intro-copy{padding:64px 28px 0}
.intro-copy h1,.intro-copy .sub{position:relative}
.intro-copy h1{font-size:clamp(28px,8.4vw,38px);line-height:1.18;font-weight:300;letter-spacing:-.04em;color:var(--ink);text-shadow:0 1px 18px rgba(243,234,230,.8)}
.intro-copy .sub{margin-top:14px;font-size:15px;font-weight:500;color:var(--dusk)}
.intro-foot{position:relative;padding:0 28px calc(28px + var(--safe-b))}
.lede{position:relative;margin:0 28px 22px}
.lede p{font-size:14px;line-height:1.8;color:var(--text)}
.intro-foot .meta{margin-top:12px;text-align:center;font-size:12px;color:var(--mute)}
.s-intro .lede{position:absolute;left:0;right:0;bottom:calc(126px + var(--safe-b));margin:0 28px}
@media (prefers-reduced-motion:no-preference){
  .intro-copy h1{animation:rise 1s .1s both}
  .intro-copy .sub{animation:rise 1s .35s both}
}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* question */
.s-q{color:#fff}
.s-q .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,43,77,.55) 0%,rgba(38,43,77,.05) 22%,rgba(38,43,77,.25) 38%,rgba(30,34,62,.9) 62%,rgba(30,34,62,.94) 100%)}
.q-top{position:relative;display:flex;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 0}
.back{width:40px;height:40px;border-radius:50%;font-size:26px;line-height:1;background:rgba(38,43,77,.35)}
.back:disabled{opacity:.25}
.count{width:40px;flex:none}
.thread{position:relative;flex:1;height:24px}
.thread svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.thread path{fill:none;stroke:var(--thread);stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:.9}
.dot{position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;transition:left .6s cubic-bezier(.3,.7,.2,1),right .6s cubic-bezier(.3,.7,.2,1)}
.dot.l{left:0;background:var(--blush);box-shadow:0 0 0 2px rgba(255,255,255,.2)}
.dot.r{right:0;background:var(--peri);box-shadow:0 0 0 2px rgba(255,255,255,.2)}
.q-body{position:relative;margin-top:auto;padding:0 22px calc(clamp(56px, 11vh, 110px) + var(--safe-b))}
.extra{display:inline-block;margin-bottom:12px;padding:5px 12px;border-radius:999px;background:rgba(234,217,154,.18);color:var(--thread);font-size:12px;font-weight:500}
.situation{font-size:21px;line-height:1.5;font-weight:500;letter-spacing:-.02em;text-shadow:0 1px 14px rgba(20,22,44,.6)}
.situation{margin-bottom:22px}
.opts{display:grid;gap:10px}
.opt{display:block;width:100%;min-height:76px;padding:16px 18px;border-radius:18px;text-align:left;font-size:15.5px;line-height:1.5;
  background:rgba(243,234,230,.13);border:1px solid rgba(243,234,230,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .2s,border-color .2s,transform .15s}
.opt:active{transform:scale(.99)}
.opt.picked{background:rgba(243,234,230,.94);color:var(--ink);border-color:#fff}
.q-body.swap{animation:swap .45s ease both}
@keyframes swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.busy .opts{pointer-events:none;opacity:.6}

/* feedback */
.s-fb{justify-content:flex-end;overflow-y:auto}
.fb-card{position:relative;margin:auto 12px calc(12px + var(--safe-b));padding:26px 20px 18px;border-radius:26px;background:var(--paper)}
.fb-card h2{font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.fb-note{margin-top:6px;font-size:12.5px;line-height:1.6;color:var(--mute)}
.fb-q{margin-top:18px}
.fb-q p{font-size:14px;font-weight:500;margin-bottom:8px}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.scale button,.yn button{min-height:42px;border-radius:12px;background:#fff;border:1px solid #E1D6D2;font-size:14px}
.scale button.on,.yn button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.scale-cap{display:flex;justify-content:space-between;margin-top:4px;font-size:11px;color:var(--mute)}
.yn{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#fbComment{width:100%;min-height:72px;margin-top:18px;padding:12px 14px;border-radius:14px;border:1px solid #E1D6D2;font:inherit;font-size:14px;resize:vertical;background:#fff}
.fb-actions{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-top:16px}
.fb-actions .ghost{background:transparent;color:var(--mute);border-color:#D8CCC8}

/* gather */
.s-gather{align-items:center;justify-content:center;color:#fff}
.gather{position:relative;text-align:center}
.gather p{margin-top:28px;font-size:16px;line-height:1.7}
.meet{position:relative;width:140px;height:20px;margin:0 auto}
.meet::before{content:"";position:absolute;left:10px;right:10px;top:50%;border-top:1.4px solid var(--thread)}
.meet .dot{width:18px;height:18px;margin-top:-9px}
@media (prefers-reduced-motion:no-preference){
  .meet .l{animation:toR 1.6s ease-in-out forwards}
  .meet .r{animation:toL 1.6s ease-in-out forwards}
}
@keyframes toR{to{left:calc(50% - 17px)}}
@keyframes toL{to{right:calc(50% - 17px)}}

/* result */
.s-result{overflow-y:auto;background:var(--paper);-webkit-overflow-scrolling:touch}
.r-hero{flex:none;height:52vh;min-height:320px;background:center 42%/cover no-repeat}
.r-paper{position:relative;margin-top:-56px;padding:30px 24px calc(36px + var(--safe-b));border-radius:28px 28px 0 0;background:var(--paper)}
.r-from{display:inline-block;margin-bottom:14px;padding:5px 12px;border-radius:999px;background:rgba(38,43,77,.08);font-size:12px;color:var(--dusk)}
.r-q{font-size:14px;font-weight:500;color:var(--rose)}
.r-a{margin-top:10px;font-size:28px;line-height:1.36;font-weight:600;letter-spacing:-.035em;color:var(--ink)}
.r-moment{position:relative;margin-top:22px;padding:16px 18px;border-radius:16px;background:#fff;font-size:15px;line-height:1.7;color:var(--text)}
.r-body{margin-top:26px}
.r-body p{font-size:15.5px;line-height:1.9;color:var(--text)}
.r-body p+p{margin-top:16px}
.r-actions{display:grid;gap:6px;margin-top:34px}
.r-foot{margin-top:28px;text-align:center;font-size:12px;color:var(--mute)}

/* sheet */
.sheet-wrap{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet-dim{position:absolute;inset:0;background:rgba(20,22,44,.55)}
.sheet{position:relative;width:100%;max-width:480px;padding:0 20px calc(14px + var(--safe-b));border-radius:26px 26px 0 0;background:var(--paper);overflow:hidden;animation:up .3s ease both}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet-art{height:120px;margin:0 -20px 18px;background:center 62%/cover no-repeat}
.sheet h3{font-size:19px;font-weight:600;color:var(--ink)}
.sheet p{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--mute)}
.sheet-btns{display:grid;gap:8px;margin-top:18px}
.sheet .ghost{background:#fff;color:var(--ink);border-color:#E1D6D2}

.toast{position:fixed;left:50%;bottom:calc(28px + var(--safe-b));z-index:30;transform:translate(-50%,20px);padding:11px 18px;border-radius:999px;background:var(--ink);color:#fff;font-size:13.5px;opacity:0;pointer-events:none;transition:.25s}
.toast.on{opacity:1;transform:translate(-50%,0)}
.err{position:relative;margin:auto 24px;padding:22px;border-radius:18px;background:var(--paper);text-align:center;font-size:14.5px;line-height:1.7}
.err .btn{margin-top:14px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}