/* 번번이 수리 대작전: 1920×1080 무대를 화면에 맞춰 줄이는 방식 (Paperlogy 500 이상만 사용) */
@font-face{font-family:'Paperlogy';src:url(../fonts/Paperlogy-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Paperlogy';src:url(../fonts/Paperlogy-700.woff2) format('woff2');font-weight:600 700;font-display:swap}
@font-face{font-family:'Paperlogy';src:url(../fonts/Paperlogy-800.woff2) format('woff2');font-weight:800 900;font-display:swap}
:root{
  --paper:#f4eee2; --card:#fffdf8; --ink:#1d1b17; --ink2:#4a443a; --muted:#8a8272; --line:#e4d9c3;
  --acc:#e0492b; --acc2:#bf3318; --hi:#ffd54a; --ok:#2f8a63; --okl:#dcf1e6; --no:#c0392b; --nol:#fbe2dd;
  --d:#1f7a78; --e:#4b5f96; --c:#cf5a3a; --q:#b58a10; --L:#2f8a63; --G:#8a4fb0;
  --sh:0 30px 50px -30px rgba(70,45,10,.45),0 2px 0 rgba(255,255,255,.9) inset;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--paper)}
body{font-family:'Paperlogy','Pretendard','Malgun Gothic',sans-serif;font-weight:500;color:var(--ink);word-break:keep-all;overflow-wrap:break-word;line-break:strict;-webkit-font-smoothing:antialiased;user-select:none;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(1100px 700px at 8% 4%,#e9f4e2 0,transparent 60%),radial-gradient(1000px 700px at 96% 100%,#fbe3d6 0,transparent 60%),var(--paper)}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;touch-action:manipulation}
img{display:block;-webkit-user-drag:none}
[hidden]{display:none!important}
h1,h2,h3,h4,p{text-wrap:pretty}h1,h2,h3{text-wrap:balance;font-weight:800;line-height:1.25}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:center;overflow:hidden;
  background:radial-gradient(1100px 700px at 8% 4%,#e9f4e2 0,transparent 60%),radial-gradient(1000px 700px at 96% 100%,#fbe3d6 0,transparent 60%),var(--paper)}
#stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(90,70,30,.10) 1.4px,transparent 1.8px);background-size:28px 28px;pointer-events:none}
#rotate{position:fixed;inset:0;z-index:99;background:var(--ink);color:#fff;display:grid;place-items:center;text-align:center;font-size:22px;font-weight:700;line-height:1.7}
:focus-visible{outline:4px solid var(--acc);outline-offset:3px;border-radius:12px}

/* ───── 상단 바 ───── */
#top{position:absolute;left:24px;right:24px;top:14px;height:60px;display:flex;align-items:center;justify-content:space-between;z-index:30}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.mark{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#f06a45,#c93d22);box-shadow:0 8px 16px -6px rgba(200,60,30,.7);position:relative}
.mark::before{content:"";position:absolute;left:7px;top:7px;width:13px;height:13px;border:4px solid #fff;border-radius:50%}
.mark::after{content:"";position:absolute;left:21px;top:22px;width:10px;height:4px;background:#fff;border-radius:3px;transform:rotate(45deg);transform-origin:left center}
.wordmark{font-size:30px;font-weight:800;letter-spacing:-.02em}
.unit{font-size:17px;font-weight:700;color:var(--acc2);background:#fde7de;border-radius:99px;padding:6px 14px}
.top-r{display:flex;align-items:center;gap:10px}
.tbtn{height:46px;padding:0 20px;border-radius:99px;background:rgba(255,253,248,.85);border:1.5px solid var(--line);font-weight:700;font-size:18px;display:inline-flex;align-items:center;gap:8px;transition:transform .15s,box-shadow .2s,border-color .2s}
.tbtn:hover{transform:translateY(-2px);box-shadow:0 10px 18px -12px rgba(60,40,10,.6);border-color:var(--ink)}
.tbtn.ic[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.logoLink{display:block;margin-left:6px;padding-left:16px;border-left:1.5px solid var(--line)}
.brandlogo{height:46px;width:auto}

/* ───── 공통 부품 ───── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:64px;padding:0 38px;border-radius:99px;font-size:24px;font-weight:800;color:#fff;background:linear-gradient(180deg,#ee5a39,#cf3d20);box-shadow:0 7px 0 #a82e15,0 18px 26px -12px rgba(190,50,20,.65);transition:transform .12s,box-shadow .12s,filter .2s;position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-90px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:glint 4.2s ease-in-out infinite}
@keyframes glint{0%,60%{left:-90px}100%{left:130%}}
.btn:hover{filter:brightness(1.06)}.btn:active{transform:translateY(5px);box-shadow:0 2px 0 #a82e15,0 8px 12px -8px rgba(190,50,20,.6)}
.btn[disabled]{background:#d3c9b4;box-shadow:0 7px 0 #b7ab92;color:#fff;cursor:not-allowed;filter:none}.btn[disabled]::after{display:none}
.btn.line{background:var(--card);color:var(--ink);box-shadow:0 0 0 2.5px var(--ink),0 7px 0 var(--ink)}
.btn.line::after{display:none}
.btn.line:active{box-shadow:0 0 0 2.5px var(--ink),0 2px 0 var(--ink)}
.btn.sm{height:52px;font-size:20px;padding:0 28px}
.btn.green{background:linear-gradient(180deg,#3da577,#25805a);box-shadow:0 7px 0 #1a6445,0 18px 26px -12px rgba(30,120,80,.6)}
.card{background:rgba(255,253,248,.88);border:1px solid rgba(255,255,255,.9);border-radius:28px;box-shadow:var(--sh);backdrop-filter:blur(8px)}
.pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:99px;font-size:17px;font-weight:800;background:var(--ink);color:#fff;white-space:nowrap}
.lbl{font-size:17px;font-weight:700;color:var(--muted);letter-spacing:.04em}
.ico{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
#toast{position:absolute;left:50%;bottom:34px;transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:14px 28px;border-radius:99px;opacity:0;pointer-events:none;transition:.3s;z-index:90;font-size:20px;font-weight:700}
#toast.on{opacity:1;transform:translate(-50%,0)}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.86);opacity:0}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.reveal{animation:up .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*70ms)}

/* ───── 팝업(모달) ───── */
#modal{position:absolute;inset:0;z-index:60;background:rgba(29,24,16,.55);backdrop-filter:blur(6px);display:grid;place-items:center;animation:fade .25s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.box{background:var(--card);border-radius:36px;box-shadow:0 50px 90px -30px rgba(0,0,0,.7);padding:34px 40px 34px;max-width:1760px;max-height:1010px;overflow:hidden;animation:pop .45s cubic-bezier(.2,.9,.3,1.1) both;position:relative;display:flex;flex-direction:column}
.box.w-s{width:720px}.box.w-m{width:1000px}.box.w-l{width:1360px}.box.w-xl{width:1560px}
.box h3{font-size:36px}.box .acts{display:flex;gap:14px;justify-content:flex-end;align-items:center;margin-top:20px}
.mhead{display:flex;align-items:center;gap:16px;margin:-34px -40px 22px;padding:18px 40px;background:var(--mc);color:#fff;border-radius:36px 36px 0 0}
.mhead .mi{width:50px;height:50px;border-radius:16px;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:30px}
.mhead h3{font-size:30px;flex:1}.mhead .who{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.2);padding:6px 18px 6px 8px;border-radius:99px;font-size:20px;font-weight:800}
.mhead .who img{height:38px;width:auto;border-radius:50%;background:#fff;padding:2px}
.steps{display:flex;gap:8px;align-items:center}
.steps .st{height:34px;padding:0 16px;border-radius:99px;background:rgba(255,255,255,.2);font-size:17px;font-weight:800;display:inline-flex;align-items:center;gap:7px;opacity:.7}
.steps .st.on{background:#fff;color:var(--mc);opacity:1}.steps .st.dn{opacity:1;background:rgba(255,255,255,.4)}
.mbody{flex:1;min-height:0;display:flex;gap:30px}
.scene{width:560px;flex:none;display:flex;flex-direction:column;gap:14px}
.scene .pic{border-radius:26px;overflow:hidden;aspect-ratio:3/2;background:#e9dfc9;box-shadow:0 20px 30px -20px rgba(60,40,10,.6)}
.scene .pic img{width:100%;height:100%;object-fit:cover}
.scene .cap{font-size:25px;font-weight:800}
.scene .tipbox{background:#f6efdd;border-radius:20px;padding:16px 20px;font-size:19px;font-weight:600;line-height:1.55;color:var(--ink2)}
.pane{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.ask{font-size:26px;font-weight:800;line-height:1.4}.ask small{display:block;font-size:19px;color:var(--muted);font-weight:600;margin-top:4px}
.sents{display:flex;flex-direction:column;gap:10px}
.sent{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:center;text-align:left;padding:14px 20px 14px 14px;border-radius:20px;background:#f6f0e3;border:3px solid transparent;font-size:23px;font-weight:600;line-height:1.45;transition:.18s}
.sent .n{width:42px;height:42px;border-radius:14px;background:#e3d7bd;display:grid;place-items:center;font-weight:800;font-size:20px;color:var(--ink2)}
.sent:hover{background:#fbf3df;transform:translateX(4px)}
.sent.sel{background:#fff2b8;border-color:#e8b800}.sent.sel .n{background:#e8b800;color:#fff}
.sent.good{background:var(--okl);border-color:var(--ok)}.sent.good .n{background:var(--ok);color:#fff}
.sent.bad{background:var(--nol);border-color:var(--no);animation:shake .4s}.sent.bad .n{background:var(--no);color:#fff}
.sent.miss{background:#fff7d6;border:3px dashed #e8b800}
.sent.glow{box-shadow:0 0 0 5px rgba(120,200,255,.6)}
.opts{display:grid;gap:12px}.opts.two{grid-template-columns:1fr 1fr}
.opt{text-align:left;padding:18px 22px;border-radius:22px;background:#f6f0e3;border:3px solid transparent;font-size:24px;font-weight:700;line-height:1.45;display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:center;transition:.18s}
.opt .n{width:44px;height:44px;border-radius:50%;background:#e3d7bd;display:grid;place-items:center;font-weight:800;font-size:21px}
.opt:hover{background:#fbf3df;transform:translateY(-3px)}
.opt.sel{background:#fff2b8;border-color:#e8b800}.opt.sel .n{background:#e8b800;color:#fff}
.opt.good{background:var(--okl);border-color:var(--ok)}.opt.good .n{background:var(--ok);color:#fff}
.opt.bad{background:var(--nol);border-color:var(--no);animation:shake .4s;opacity:.85}.opt.bad .n{background:var(--no);color:#fff}
.opt.gone{opacity:.28;pointer-events:none;text-decoration:line-through}
.fb{border-radius:22px;padding:16px 22px;font-size:22px;font-weight:700;line-height:1.5;animation:up .35s both}
.fb.ok{background:var(--okl);color:#17583e}.fb.no{background:var(--nol);color:#8f2a1f}.fb.info{background:#e8eefb;color:#2f3f75}
.fb b{font-weight:800}
.foot{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:6px}
.foot .sp{flex:1}
.hintbtn{height:52px;padding:0 22px;border-radius:99px;background:#e6f4ff;color:#1b6a9c;font-weight:800;font-size:19px;display:inline-flex;align-items:center;gap:10px}
.hintbtn:disabled{opacity:.4;cursor:not-allowed}
.hintbtn .stone{width:18px;height:18px}
.resbig{display:flex;align-items:center;gap:20px;padding:18px 24px;border-radius:26px;background:linear-gradient(135deg,#fff2b8,#ffe48a);font-size:26px;font-weight:800}
.resbig .stars{font-size:38px;color:#e8a30c;letter-spacing:4px}
.stv polygon{fill:#ffd43b;stroke:#ffb020;stroke-width:2.6;stroke-linejoin:round;paint-order:stroke}
.stv .hl{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;opacity:.85}
.stv .ck{fill:#ff8f7a;opacity:.7}
.stv.off polygon{fill:#efe6d3;stroke:#e0d4ba}
.stv{filter:drop-shadow(0 2px 0 rgba(200,130,0,.28))}.stv.off{filter:none}
.resbig .stars{display:flex;gap:4px;font-size:46px;color:inherit;letter-spacing:0}
.pcard .row .star{display:inline-flex;font-size:22px;color:inherit}
.rate{gap:3px}.rate button{font-size:34px;line-height:0;padding:2px;transition:transform .12s}.rate button:hover{transform:scale(1.15) rotate(-6deg)}
.rate button.on{color:inherit}
.resbig .stars{font-size:56px}.resbig .stars .stv{filter:drop-shadow(0 3px 0 rgba(200,130,0,.3))}