/* 동물 친구 편지 상담소: 발굴 현장 노트 디자인을 이어받음 (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:#f2ece0; --paper2:#e8dfcd; --card:#fbf8f1; --card2:#f6f0e3;
  --ink:#1b1a17; --ink2:#48433a; --muted:#7a7263; --line:#d8ccb5; --line2:#c6b99f;
  --acc:#d6452a; --acc-d:#b53720; --hi:#ffd54a; --hi-l:#fff0b3;
  --ok:#2f7d5b; --ok-l:#dcefe5; --no:#b3362a; --no-l:#f6dcd7;
  --night:#12141b;
  --k1:#d6452a; --k1l:#f7ded6; --k2:#1f7a78; --k2l:#d9eeec; --k3:#4b5f96; --k3l:#e1e6f5;
  --base:clamp(1rem,.74rem + .5vw,1.2rem);
  --read:clamp(1.06rem,.72rem + .55vw,1.3rem);
  --lbl:clamp(.88rem,.8rem + .22vw,1.02rem);
  --h1:clamp(2rem,1rem + 3vw,3.6rem);
  --h2:clamp(1.4rem,1rem + 1.2vw,2rem);
  --h3:clamp(1.1rem,.95rem + .5vw,1.4rem);
  --r:18px; --top:64px;
  --shadow:0 1px 0 rgba(60,45,15,.05),0 18px 36px -22px rgba(50,35,10,.42);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Paperlogy','Pretendard','Malgun Gothic',sans-serif;font-weight:500;font-size:var(--base);line-height:1.62;
  word-break:keep-all;overflow-wrap:break-word;line-break:strict;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  background-image:radial-gradient(rgba(90,70,30,.09) 1px,transparent 1.3px);background-size:22px 22px}
p,li,span,label,button,textarea,input,h1,h2,h3,h4,small,em,b{word-break:keep-all;overflow-wrap:break-word}
h1,h2,h3,h4{margin:0;line-height:1.28;text-wrap:balance;font-weight:800}
p{margin:0;text-wrap:pretty}
button,input{font:inherit;color:inherit}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:6px}
.wrap{width:min(1180px,100% - 2*max(16px,3vw));margin:0 auto}
main{min-height:calc(100vh - var(--top));outline:none}
main.bare{min-height:100vh}

/* ───── 상단 바 ───── */
.top{position:sticky;top:0;z-index:30;height:var(--top);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 max(16px,2.2vw);
  background:rgba(242,236,224,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(120,100,60,.18)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.mark{width:26px;height:26px;background:linear-gradient(135deg,#e8593a,#b53720);border-radius:5px;box-shadow:0 6px 14px -6px rgba(181,55,32,.7);animation:markpulse 3.6s ease-in-out infinite;display:inline-block;flex:none}
@keyframes markpulse{0%,100%{transform:rotate(45deg) scale(.78)}50%{transform:rotate(225deg) scale(.86)}}
.wordmark{font-size:1.2rem;font-weight:800;letter-spacing:-.01em;display:inline-flex;gap:.28em;white-space:nowrap}
.top-r{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.chip{border:0;background:var(--ink);color:var(--paper);height:40px;display:inline-flex;align-items:center;padding:0 16px;border-radius:99px;font-weight:700;font-size:var(--lbl);white-space:nowrap}
.tbtn{height:40px;border-radius:99px;border:1px solid rgba(120,100,60,.28);background:rgba(255,253,248,.7);font-weight:700;font-size:var(--lbl);padding:0 14px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer;transition:transform .15s,box-shadow .2s,border-color .2s}
.tbtn:hover{transform:translateY(-2px);box-shadow:0 8px 16px -10px rgba(50,35,10,.5);border-color:var(--ink)}
.tbtn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.brandlogo{height:40px;width:auto;flex:none;margin-left:10px;padding-left:14px;border-left:1px solid rgba(120,100,60,.3)}

/* 진행 막대 */
.steps{display:flex;gap:6px;margin:18px 0 20px}
.steps i{flex:1;min-width:0;display:block;font-style:normal}
.steps i:before{content:"";display:block;height:8px;border-radius:99px;background:var(--line)}
.steps i.on:before{background:var(--acc)}
.steps i.now:before{background:var(--ink)}
.steps small{display:block;text-align:center;font-weight:700;font-size:var(--lbl);color:var(--muted);margin-top:4px;white-space:nowrap}
.steps i.now small{color:var(--ink)}

/* ───── 공통 부품 ───── */
.lbl{font-weight:700;font-size:var(--lbl);letter-spacing:.06em;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;background:var(--acc);color:#fff;font-weight:800;padding:.78em 1.6em;border-radius:99px;
  font-size:var(--base);box-shadow:0 6px 0 var(--acc-d),0 12px 22px -10px rgba(140,40,20,.55);transition:transform .12s,box-shadow .12s,filter .2s;text-decoration:none}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--acc-d),0 6px 12px -8px rgba(140,40,20,.5)}
.btn.line{background:transparent;color:var(--ink);box-shadow:none;border:2px solid var(--ink)}
.btn.line:active{transform:none;background:var(--paper2)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pill{display:inline-flex;align-items:center;font-size:var(--lbl);font-weight:800;padding:.18em .8em;border-radius:99px;color:#fff;white-space:nowrap}
.pill.k1{background:var(--k1)}.pill.k2{background:var(--k2)}.pill.k3{background:var(--k3)}
.reveal{animation:up .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*70ms)}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#app.still .reveal,#app.still .w,#app.still .pop{animation:none}
.w{display:inline-block;animation:wordup .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k,0)*55ms + 80ms)}
@keyframes wordup{from{opacity:0;transform:translateY(.55em);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
.pop{animation:pop .5s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes pop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);background:var(--ink);color:var(--paper);padding:.7em 1.3em;border-radius:99px;opacity:0;pointer-events:none;transition:.28s;z-index:90;font-weight:700;max-width:92vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ───── 그림 조각(스프라이트) ───── */
.sp{background-repeat:no-repeat;mix-blend-mode:multiply;display:flex;align-items:center;justify-content:center}
.animal{aspect-ratio:384/341;background-image:url(../images/sheet_a.webp);background-size:400% 300%}
.scene{aspect-ratio:3/2;background-size:cover;background-position:center;mix-blend-mode:normal;background-color:var(--paper2)}
.noimg .sp{background-image:none;mix-blend-mode:normal}
.noimg .animal{font-size:clamp(56px,9vw,100px)}
.noimg .scene{font-size:clamp(48px,8vw,84px);background:linear-gradient(135deg,var(--paper2),#d9cdb3)}

/* ───── 표지 ───── */
.cover{position:relative;min-height:100vh;background:var(--night);color:#f7efe0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(16px,3vw,48px);overflow:hidden;isolation:isolate;padding:clamp(28px,6vh,72px) max(16px,4vw) clamp(28px,6vh,72px) max(56px,7vw)}
.cover:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 78% 45%,rgba(214,69,42,.28),transparent 70%),radial-gradient(40% 50% at 10% 100%,rgba(255,213,74,.12),transparent 70%)}
.cover .ruler{position:absolute;left:max(16px,2vw);top:0;bottom:0;width:26px;z-index:0;opacity:.55;
  background:repeating-linear-gradient(180deg,rgba(247,239,224,.6) 0 1px,transparent 1px 22px),repeating-linear-gradient(180deg,rgba(247,239,224,.9) 0 2px,transparent 2px 110px);
  -webkit-mask:linear-gradient(90deg,#000 0 8px,transparent 8px);mask:linear-gradient(90deg,#000 0 8px,transparent 8px)}
.cover .eyebrow{font-weight:700;letter-spacing:.14em;color:var(--hi);font-size:var(--lbl);margin-bottom:.9em;display:flex;align-items:center;gap:.7em}
.cover .eyebrow:before{content:"";width:34px;height:2px;background:var(--hi)}
.cover h1{font-size:clamp(2.6rem,1rem + 6vw,6.4rem);line-height:1.06;letter-spacing:-.02em;margin-bottom:.3em}
.cover h1 em{font-style:normal;color:var(--acc);text-shadow:0 0 30px rgba(214,69,42,.35)}
.cover h1 .w{animation-duration:.9s;animation-delay:calc(var(--k,0)*160ms + 150ms)}
.cover .lede{font-size:clamp(1.05rem,.8rem + .8vw,1.5rem);max-width:28em;color:#ded4c1;margin-bottom:1.6em}
.cover .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.namebox{display:flex;align-items:center;background:rgba(247,239,224,.1);border:1.5px solid rgba(247,239,224,.45);border-radius:99px;padding:4px 4px 4px 20px;backdrop-filter:blur(6px)}
.namebox label{font-weight:700;font-size:var(--lbl);color:#d8ccb5;margin-right:10px;white-space:nowrap}
.namebox input{background:none;border:0;color:#fff;min-width:0;width:10em;padding:.55em 0;font-weight:700;font-size:var(--base)}
.namebox input::placeholder{color:#a99f8b}
.namebox input:focus{outline:none}
.cover .err{color:#ffb4a5;font-weight:700;min-height:1.4em;margin-top:.7em;font-size:var(--lbl)}
.collage{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2vw,22px);padding:10px;max-width:560px;justify-self:center;width:100%}
.polaroid{background:#fffdf8;border-radius:8px;padding:8px 8px 6px;box-shadow:0 24px 40px -18px rgba(0,0,0,.7);color:var(--ink);animation:up .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*160ms + 300ms)}
.polaroid:nth-child(1){transform:rotate(-3deg)}.polaroid:nth-child(2){transform:rotate(2.5deg) translateY(14px)}
.polaroid:nth-child(3){transform:rotate(2deg)}.polaroid:nth-child(4){transform:rotate(-2.5deg) translateY(14px)}
.polaroid .scene{border-radius:4px;background-color:#fff}
.polaroid b{display:block;text-align:center;font-size:var(--lbl);font-weight:800;padding-top:5px}

/* ───── 사연(조립) 화면 ───── */
.grid2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(16px,2.6vw,36px);align-items:start;padding-bottom:56px}
.grid2>*{min-width:0}
.col-l{display:grid;gap:14px;position:sticky;top:calc(var(--top) + 10px)}
.fig{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.fig .scene{border-radius:0}
.fig .cap{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px;background:rgba(18,20,27,.82);color:#fff;font-weight:800;border-radius:99px;padding:.3em 1em .3em .4em;font-size:var(--lbl)}
.fig .cap i{font-style:normal;background:var(--acc);border-radius:99px;min-width:1.7em;height:1.7em;display:grid;place-items:center;font-size:.9em}
.talk{display:grid;grid-template-columns:minmax(96px,150px) 1fr;gap:12px;align-items:center;padding:12px 16px 12px 8px}
.bubble{position:relative;background:var(--hi-l);border:2px solid var(--hi);border-radius:16px;padding:.7em 1em;font-weight:700;font-size:var(--read)}
.bubble:before{content:"";position:absolute;left:-9px;top:50%;width:16px;height:16px;margin-top:-8px;background:var(--hi-l);border-left:2px solid var(--hi);border-bottom:2px solid var(--hi);transform:rotate(45deg)}
.pane{padding:clamp(16px,2.2vw,30px)}
.pane h2{font-size:var(--h2);margin:.2em 0 .7em}
.slots{display:grid;gap:10px}
.slot{--c:var(--k1);--cl:var(--k1l);display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;text-align:left;width:100%;background:#fffdf8;border:2px dashed var(--c);border-radius:14px;padding:.7em 1em;min-height:4.2em;cursor:pointer;transition:.15s}
.slot.k2{--c:var(--k2);--cl:var(--k2l)}.slot.k3{--c:var(--k3);--cl:var(--k3l)}
.slot .no{width:2em;height:2em;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:800;grid-row:1/3}
.slot .nm{font-weight:800;color:var(--c);font-size:var(--read)}
.slot .ask{font-size:var(--lbl);color:var(--ink2);font-weight:500}
.slot .got{grid-column:2;font-weight:700;font-size:var(--read);margin-top:.2em}
.slot.filled{background:var(--cl);border-style:solid;cursor:default;animation:pop .45s cubic-bezier(.2,.9,.3,1.2)}
.slot.armed{box-shadow:0 0 0 4px var(--hi)}
.slot.over{transform:scale(1.02);box-shadow:0 0 0 4px var(--hi)}
.note{margin-top:14px;display:flex;gap:10px;align-items:flex-start;border-left:5px solid var(--hi);background:var(--hi-l);border-radius:0 12px 12px 0;padding:.6em 1em;font-weight:700;min-height:3.2em}
.note.bad{border-color:var(--no);background:var(--no-l)}
.note.good{border-color:var(--ok);background:var(--ok-l)}
.belt{margin-top:16px}
.belt .lbl{margin-bottom:6px}
.track{position:relative;background:var(--ink);border-radius:16px;padding:14px 12px 24px;display:flex;flex-wrap:wrap;gap:10px;min-height:100px;overflow:hidden}
.track:after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:repeating-linear-gradient(90deg,var(--hi) 0 18px,#3a3a40 18px 36px);animation:belt 1s linear infinite}
@keyframes belt{to{background-position:36px 0}}
.piece{position:relative;z-index:1;background:var(--card);border:2px solid var(--line2);border-radius:12px;padding:.55em .9em;font-weight:700;font-size:var(--read);text-align:left;cursor:grab;box-shadow:0 4px 0 rgba(0,0,0,.35);touch-action:manipulation;transition:transform .12s}
.piece:hover{transform:translateY(-2px)}
.piece.sel{outline:4px solid var(--hi);outline-offset:1px;transform:translateY(-3px)}
.piece.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.empty{color:#cfc5b1;font-weight:700;padding:.4em}

/* 완성 */
.letter{position:relative;background:#fffdf8;border:1px solid var(--line2);border-radius:12px;padding:clamp(16px,2vw,26px);box-shadow:var(--shadow);
  background-image:repeating-linear-gradient(180deg,transparent 0 2.2em,rgba(120,100,60,.14) 2.2em calc(2.2em + 1px))}
.letter p{font-size:var(--read);line-height:2.2em;font-weight:700}
.letter .s{padding:.08em .4em;border-radius:8px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.letter .s.k1{background:var(--k1l)}.letter .s.k2{background:var(--k2l)}.letter .s.k3{background:var(--k3l)}
.stamp{display:inline-block;border:3px solid var(--acc);color:var(--acc);font-weight:800;padding:.1em .7em;border-radius:8px;letter-spacing:.06em;background:rgba(214,69,42,.05);font-size:var(--h3);animation:slam .55s cubic-bezier(.2,.8,.2,1) both .25s}
@keyframes slam{0%{opacity:0;transform:scale(1.9);filter:blur(3px)}55%{opacity:1;transform:scale(.94);filter:blur(0)}100%{transform:none;opacity:1}}
.legend{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.stars{font-weight:800;font-size:var(--h3);color:#c88a00;letter-spacing:.1em}

/* 점검 */
.qletter{font-size:var(--read);font-weight:700;line-height:2;background:#fffdf8;border:1px solid var(--line2);border-radius:12px;padding:clamp(14px,2vw,22px);margin:12px 0 16px}
.qletter .gap{display:inline-block;min-width:6em;text-align:center;border:3px dashed var(--line2);border-radius:10px;color:var(--muted);padding:0 .6em;margin:0 .2em}
.opts{display:grid;gap:10px}
.opt{display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:.75em 1em;cursor:pointer;font-weight:800;font-size:var(--read);transition:.15s}
.opt:hover:not(:disabled){border-color:var(--ink)}
.opt .no{flex:none;width:1.9em;height:1.9em;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:800;font-size:.9em}
.opt.k1 .no{background:var(--k1)}.opt.k2 .no{background:var(--k2)}.opt.k3 .no{background:var(--k3)}
.opt:disabled{opacity:.45;cursor:not-allowed}
.opt.bad{border-color:var(--no);background:var(--no-l)}

/* 마무리 */
.end{padding:clamp(24px,5vh,56px) 0 64px;text-align:center}
.end h1{font-size:var(--h1);margin:.2em 0 .3em}
.parade{display:flex;justify-content:center;gap:clamp(4px,1.5vw,16px);margin-bottom:6px}
.parade .animal{width:clamp(64px,16vw,140px)}
.sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0;text-align:left}
.sum>div{border-radius:var(--r);padding:1em 1.2em;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)}
.sum .no{display:grid;place-items:center;width:2em;height:2em;border-radius:50%;color:#fff;font-weight:800;margin-bottom:.4em}
.sum b{display:block;font-size:var(--h3)}
.sum p{color:var(--ink2);font-size:var(--read)}
.sum .k1 .no{background:var(--k1)}.sum .k2 .no{background:var(--k2)}.sum .k3 .no{background:var(--k3)}
.sum .k1{border-top:6px solid var(--k1)}.sum .k2{border-top:6px solid var(--k2)}.sum .k3{border-top:6px solid var(--k3)}

@media(max-width:900px){
  .cover{grid-template-columns:1fr;padding-left:max(48px,8vw);align-content:center}
  .collage{order:-1;max-width:420px;padding:0}
  .grid2{grid-template-columns:1fr}
  .col-l{position:static}
  .sum{grid-template-columns:1fr}
}
@media(max-width:640px){
  .tbtn span,.chip.hide-s{display:none}
  .tbtn{padding:0 12px}.brandlogo{height:28px;margin-left:4px;padding-left:8px}
  .wordmark{font-size:1.02rem}.steps small{display:none}
  .talk{grid-template-columns:90px 1fr}
}
@media(prefers-reduced-motion:reduce){.track:after,.mark,.reveal,.w,.pop,.stamp,.polaroid,.piece.shake{animation:none}}
@media print{.top,#toast{display:none}}