/* 말랑 귀여움 덧입히기: style.css 뒤에 불러와서 색·모서리·움직임만 바꾼다 */
:root{
  --paper:#fff6e6; --paper2:#ffeacc; --card:#fffdf8; --card2:#fff4e0;
  --ink:#3d2b24; --ink2:#6a524a; --muted:#a08678; --line:#f3dcb8; --line2:#ecc995;
  --acc:#ff7a5c; --acc-d:#e25a3c; --hi:#ffd95e; --hi-l:#fff3bf;
  --ok:#3aa874; --ok-l:#dff6e9; --no:#e0524a; --no-l:#ffe3df;
  --k1:#ff7a5c; --k1l:#ffe5dd; --k2:#2fb5a8; --k2l:#d9f4f0; --k3:#7a8cf0; --k3l:#e6e9ff;
  --r:26px;
  --shadow:0 4px 0 #f0d6ac,0 18px 30px -20px rgba(160,90,40,.45);
}
body{background-color:var(--paper);
  background-image:radial-gradient(circle at 12px 12px,rgba(255,170,120,.22) 3px,transparent 3.5px),radial-gradient(circle at 34px 34px,rgba(255,217,94,.3) 2.5px,transparent 3px);
  background-size:44px 44px}
/* 상단 바 */
.top{background:rgba(255,246,230,.9);border-bottom:3px solid var(--line)}
.mark{border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffb199,#ff7a5c 60%,#e25a3c);box-shadow:0 4px 0 #e25a3c;animation:bob 2.4s ease-in-out infinite}
.mark:after{content:none}
.chip{background:#ff8fa3;color:#fff;box-shadow:0 3px 0 #e96b83}
.tbtn{border:2px solid var(--line2);background:#fff;box-shadow:0 3px 0 var(--line2)}
.tbtn:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--line2);border-color:var(--line2)}
.tbtn[aria-pressed="true"]{background:var(--ink2);border-color:var(--ink2);box-shadow:0 3px 0 var(--ink)}
/* 진행 막대 */
.steps i:before{height:12px;background:var(--line);box-shadow:inset 0 -2px 0 rgba(160,110,50,.15)}
.steps i.on:before{background:linear-gradient(#ffa28b,var(--acc))}
.steps i.now:before{background:linear-gradient(#a8a0ff,#7a8cf0);animation:bob 1.6s ease-in-out infinite}
/* 버튼 */
.btn{background:linear-gradient(#ff9277,var(--acc));border:3px solid #fff;outline:3px solid var(--acc-d);outline-offset:-3px;box-shadow:0 7px 0 var(--acc-d),0 14px 20px -10px rgba(226,90,60,.55)}
.btn:hover{transform:translateY(-2px) scale(1.03);filter:none}
.btn:active{transform:translateY(5px);box-shadow:0 2px 0 var(--acc-d)}
.btn.line{background:#fff;color:var(--ink);outline:0;border:3px solid var(--line2);box-shadow:0 5px 0 var(--line2)}
.card{border:3px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);background:var(--card)}
.fig{border:4px solid #fff;border-radius:var(--r);outline:3px solid var(--line2);box-shadow:0 6px 0 var(--line2),0 20px 30px -20px rgba(160,90,40,.5)}
.fig .cap{background:#ff8fa3;box-shadow:0 3px 0 #e96b83}
.fig .cap i{background:#fff;color:#e96b83}
.pill{box-shadow:0 3px 0 rgba(0,0,0,.18)}
/* 동물과 말풍선 */
.talk{background:linear-gradient(#fffdf8,#fff4e0)}
.talk .animal{animation:bob 2.6s ease-in-out infinite;transform-origin:50% 100%}
.bubble{background:#fff;border:3px solid #ffd95e;border-radius:24px;box-shadow:0 4px 0 #ffd95e}
.bubble:before{background:#fff;border-left:3px solid #ffd95e;border-bottom:3px solid #ffd95e}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1.5deg)}}
.pane:after{content:"";position:absolute;right:20px;top:14px;width:1.4rem;height:1.4rem;background:var(--hi);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:twinkle 2.4s ease-in-out infinite;pointer-events:none}
@keyframes twinkle{0%,100%{opacity:.4;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(20deg)}}
/* 칸 */
.slot{border-width:3px;border-radius:22px;background:#fff;box-shadow:0 4px 0 rgba(0,0,0,.06)}
.slot .no{box-shadow:0 3px 0 rgba(0,0,0,.2);width:2.2em;height:2.2em}
.slot.filled{box-shadow:0 4px 0 var(--c)}
.slot.armed{box-shadow:0 0 0 4px var(--hi),0 4px 0 rgba(0,0,0,.06)}
.note{border:3px solid var(--hi);background:var(--hi-l);border-radius:20px}
.note:before{content:"";flex:none;width:1.1em;height:1.1em;margin-top:.3em;border-radius:50%;background:var(--hi);box-shadow:0 2px 0 #e6b800}
.note.bad:before{background:#ff8a7d;box-shadow:0 2px 0 #e0524a}
.note.good:before{background:#5cc796;box-shadow:0 2px 0 #3aa874}
/* 조각이 놓이는 판 */
.track{background:linear-gradient(#bfe6ff,#9dd5fb);border:3px solid #fff;outline:3px solid #8ac8f5;border-radius:24px;box-shadow:inset 0 -6px 0 rgba(60,140,210,.25)}
.track:after{height:12px;background:repeating-linear-gradient(90deg,#fff 0 14px,#8ac8f5 14px 28px);animation-duration:1.4s}
@keyframes belt{to{background-position:28px 0}}
.piece{background:#fff;border:3px solid #fff;border-radius:18px;box-shadow:0 5px 0 #6fb4ea;padding:.6em 1em}
.piece{overflow:hidden;transition:transform .18s,box-shadow .18s,background .18s}
.piece:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.95),transparent);transform:skewX(-20deg);pointer-events:none}
.piece:hover{transform:translateY(-4px);background:#fffbe0;box-shadow:0 9px 0 #6fb4ea,0 0 0 4px rgba(255,217,94,.65)}
.piece:hover:after{animation:shine .7s ease-out}
@keyframes shine{to{left:130%}}
.piece.sel{outline:4px solid var(--hi);box-shadow:0 7px 0 #6fb4ea;transform:translateY(-4px) scale(1.02)}
.empty{color:#fff}
/* 완성 편지 */
.letter{border:3px solid var(--line2);border-radius:22px;background-color:#fffef9;box-shadow:0 5px 0 var(--line2)}
.letter .s{border-radius:12px}
.stamp{border:4px solid #ff7a5c;color:#ff7a5c;border-radius:99px;padding:.15em .9em;background:#fff}
.stars{color:#ffb800;text-shadow:0 2px 0 #f0a000;letter-spacing:.15em}
/* 점검 */
.qletter{border:3px solid var(--line2);border-radius:22px;background:#fff;box-shadow:0 4px 0 var(--line2)}
.qletter .gap{border-radius:99px;border:3px dashed #ffb199;background:var(--k1l);color:var(--acc-d)}
.opt{border:3px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 5px 0 var(--line2)}
.opt:hover:not(:disabled){border-color:var(--ink2);transform:translateY(-2px)}
.opt .no{box-shadow:0 3px 0 rgba(0,0,0,.2)}
/* 마무리 */
.parade .animal{animation:bob 2s ease-in-out infinite}
.parade .animal:nth-child(2){animation-delay:.2s}.parade .animal:nth-child(3){animation-delay:.4s}.parade .animal:nth-child(4){animation-delay:.6s}
.sum>div{border:3px solid var(--line);border-top-width:8px;border-radius:26px;box-shadow:var(--shadow)}
.end h1{color:var(--acc-d)}
/* 표지: 반짝이는 보랏빛 밤하늘 + 테이프 붙인 사진 */
.cover{background:linear-gradient(160deg,#2b2562,#3d3585 55%,#5a3f94);padding-left:max(24px,6vw)}
.cover:before{background:radial-gradient(50% 60% at 78% 45%,rgba(255,150,170,.35),transparent 70%),radial-gradient(3px 3px at 30% 12%,#fff,transparent),radial-gradient(3px 3px at 46% 82%,#ffe9a0,transparent),radial-gradient(4px 4px at 90% 12%,#fff,transparent),radial-gradient(3px 3px at 62% 8%,#ffe9a0,transparent),radial-gradient(3px 3px at 8% 70%,#fff,transparent),radial-gradient(4px 4px at 20% 40%,#ffe9a0,transparent)}
.cover .ruler{display:none}
.cover .eyebrow{color:#ffe08a}.cover .eyebrow:before{background:#ffe08a;border-radius:99px;height:4px}
.cover h1{text-shadow:0 4px 0 rgba(0,0,0,.18)}
.cover h1 em{color:#ff9bb0;text-shadow:0 4px 0 #c75d78,0 0 30px rgba(255,155,176,.5)}
.namebox{background:rgba(255,255,255,.16);border:3px solid rgba(255,255,255,.7)}
.cover .btn{background:linear-gradient(#ffb2c0,#ff8fa3);outline-color:#e96b83;box-shadow:0 7px 0 #e96b83,0 14px 24px -10px rgba(0,0,0,.4)}
.polaroid{background:#fff;border-radius:18px;padding:10px 10px 8px;box-shadow:0 8px 0 rgba(0,0,0,.18),0 24px 40px -18px rgba(0,0,0,.6)}
.polaroid:before{content:"";position:absolute;left:50%;top:-12px;width:64px;height:22px;margin-left:-32px;background:rgba(255,217,94,.85);border-radius:4px;transform:rotate(-4deg)}
.polaroid .scene{border-radius:12px}
.polaroid b{font-size:var(--read)}
@media(prefers-reduced-motion:reduce){.talk .animal,.parade .animal,.mark,.pane:after,.steps i.now:before{animation:none}}

/* 도장 스티커와 별 */
.seal{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:5.6em;height:5.6em;border-radius:50%;background:radial-gradient(circle at 35% 28%,#ffa58c,#ff7a5c 60%,#e8603f);color:#fff;font-weight:800;line-height:1.1;box-shadow:0 6px 0 #d4502f,0 14px 18px -10px rgba(226,90,60,.6);outline:3px dashed rgba(255,255,255,.85);outline-offset:-7px;animation:slam .55s cubic-bezier(.2,.8,.2,1) both .25s;position:relative;flex:none}
.seal i{font-style:normal;font-size:1.05em;margin-bottom:.1em}
.seal b{font-size:1.05em;font-weight:800;letter-spacing:.04em}
.seal.big{width:7em;height:7em;font-size:1.15em;margin:6px 0}
.starrow{display:inline-flex;gap:6px;align-items:center}
.star{width:2.3rem;height:2.3rem;fill:#e9dcc6;stroke:#e9dcc6;stroke-width:3}
.star.on{fill:#ffd23f;stroke:#ffd23f;filter:drop-shadow(0 3px 0 #f0a800);animation:starpop .6s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:calc(var(--d)*180ms + 500ms)}
@keyframes starpop{0%{opacity:0;transform:scale(.2) rotate(-40deg)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.seal,.star.on{animation:none}}

.btn.push{margin-left:auto}
.bar{justify-content:flex-start}

.seal .ck{width:1.4em;height:1.4em;margin-bottom:.1em}
.seal.big .ck{width:1.6em;height:1.6em}
.noimg .animal,.noimg .scene{font-size:var(--read);font-weight:800;color:var(--muted);text-align:center}

/* ───── 공간 활용: 여백 줄이기 ───── */
:root{--top:56px}
.top{height:var(--top);padding:0 max(10px,1.2vw)}
.brandlogo{height:34px}.tbtn,.chip{height:36px}
main{min-height:calc(100vh - var(--top))}
.wrap{width:min(1560px,100% - 2*max(10px,1.2vw))}
.steps{margin:8px 0 10px;gap:5px}
.steps i:before{height:10px}
.steps small{margin-top:1px;font-size:.84rem}
.grid2{gap:clamp(10px,1.4vw,18px);padding-bottom:16px;align-items:stretch;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.col-l{position:static;gap:10px;grid-template-rows:auto 1fr;align-content:stretch}
.col-l>.talk:only-child{grid-row:1/3}
.talk{padding:10px 14px 10px 6px;grid-template-columns:minmax(110px,38%) 1fr;align-self:stretch}
.talk .animal{width:100%}
.talk.tall{grid-template-columns:1fr;grid-template-rows:1fr auto;justify-items:center;align-content:center;gap:10px;padding:16px}
.talk.tall .animal{width:min(100%,360px)}
.talk.tall .bubble{width:100%;text-align:center}
.talk.tall .bubble:before{left:50%;top:-9px;margin:0 0 0 -8px;transform:rotate(135deg)}
.bubble{padding:.5em .9em}
.pane{padding:clamp(10px,1.3vw,18px) clamp(12px,1.5vw,20px)}
.pane h2{font-size:clamp(1.2rem,.95rem + .8vw,1.65rem);margin:.1em 0 .5em}
.pane:after{right:14px;top:10px;width:1.2rem;height:1.2rem}
.slots{gap:8px}
.slot{padding:.45em .9em;min-height:3.3em;border-radius:18px}
.slot .no{width:2em;height:2em}
.note{margin-top:10px;padding:.4em .9em;min-height:0;border-radius:16px}
.belt{margin-top:10px}
.belt .lbl{margin-bottom:4px}
.track{padding:10px 10px 20px;gap:8px;min-height:80px;border-radius:20px}
.piece{padding:.4em .8em;border-radius:14px}
.letter{padding:12px 16px}
.letter p{line-height:2em}
.legend{margin:10px 0}
.bar{margin-top:12px;gap:10px}
.btn{padding:.6em 1.5em}
.seal{width:5em;height:5em}
.qletter{margin:8px 0 12px;padding:10px 14px}
.opts{gap:8px}
.opt{padding:.55em 1em}
.end{padding:12px 0 28px}
.parade .animal{width:clamp(56px,11vw,112px)}
.end h1{font-size:clamp(1.7rem,1rem + 2.4vw,2.8rem);margin:.1em 0 .2em}
.sum{margin:12px 0;gap:10px}
.sum>div{padding:.7em 1em}
.cover{padding-top:20px;padding-bottom:20px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}.col-l{grid-template-rows:auto}.talk.tall{grid-template-columns:minmax(90px,140px) 1fr;grid-template-rows:auto;justify-items:stretch}.talk.tall .bubble:before{left:-9px;top:50%;margin:-8px 0 0;transform:rotate(45deg)}.talk.tall .bubble{text-align:left}}
.piece{font-size:var(--base)}
.seal.big{width:5.4em;height:5.4em;margin:2px 0}
.end .lbl{margin-top:2px}
.sum p{font-size:var(--base)}
.track{min-height:70px}
.fig .cap{left:8px;bottom:8px}

/* ───── 표지: 그림 한 장 + 시작 카드 ───── */
.cover.cover-img{display:block;padding:0;background:#bfe6ff;min-height:100vh;height:100vh}
.cover.cover-img:before{content:none}
.coverimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;z-index:-1}
.covertitle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.noimg .covertitle{position:static;width:auto;height:auto;clip:auto;color:var(--acc-d);text-align:center;padding-top:6vh;font-size:var(--h1)}
.startcard{position:absolute;right:max(12px,2.5vw);bottom:max(12px,4vh);width:min(520px,calc(100% - 24px));background:rgba(255,253,248,.92);border:3px solid #fff;outline:3px solid var(--line2);border-radius:26px;padding:14px 16px;box-shadow:0 8px 0 var(--line2),0 24px 40px -16px rgba(60,40,20,.5);color:var(--ink);backdrop-filter:blur(6px)}
.startcard .lede{font-size:var(--base);font-weight:700;margin:0 0 10px;color:var(--ink2)}
.startcard .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.startcard .namebox{background:#fff;border:3px solid var(--line2);flex:1 1 200px}
.startcard .namebox label{color:var(--ink2)}
.startcard .namebox input{color:var(--ink);width:100%}
.startcard .namebox input::placeholder{color:var(--muted)}
.startcard .btn{background:linear-gradient(#ff9277,var(--acc));outline-color:var(--acc-d);box-shadow:0 7px 0 var(--acc-d)}
.startcard .err{color:var(--no);min-height:1.2em;margin-top:6px;font-weight:700;font-size:var(--lbl)}
@media(max-width:700px){.coverimg{object-position:22% center}.startcard{left:12px;right:12px;width:auto}}

/* ───── 책상 위에 흩어진 편지 조각 (컨베이어 벨트 대신) ───── */
.track{background:repeating-linear-gradient(90deg,#f1cf9b 0 46px,#ecc58c 46px 92px);border:3px solid #fff;outline:3px solid #d9ad73;border-radius:20px;box-shadow:inset 0 -6px 0 rgba(150,95,40,.22)}
.track:after{content:none;animation:none}
.piece{box-shadow:0 5px 0 #c9975a}
.piece:hover{box-shadow:0 9px 0 #c9975a,0 0 0 4px rgba(255,217,94,.7)}
.piece.sel{box-shadow:0 7px 0 #c9975a}
.empty{color:#8a5a2c}

/* ───── 표지: 그림 전체가 항상 보이게(16:9 틀) + 화면을 눌러 시작하기 ───── */
.cover.cover-img{display:grid;place-items:center;overflow:hidden;background:#9fd6f5;cursor:pointer}
.coverbg{position:absolute;inset:-30px;background:url(../images/cover.webp) center/cover;filter:blur(22px) saturate(1.15);z-index:0}
.cover-img .stage{position:relative;z-index:1;width:min(100vw,177.78vh);aspect-ratio:16/9;max-height:100vh}
.cover-img .coverimg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0}
.cover-img .startcard{right:2.2%;bottom:4%;width:min(46%,520px);z-index:2}
.tapstart{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);z-index:2;display:inline-flex;align-items:center;gap:.7em;border:4px solid #fff;outline:3px solid var(--acc-d);outline-offset:-4px;border-radius:99px;padding:.55em 1.6em;font-weight:800;font-size:clamp(1rem,.6rem + 1.5vw,1.9rem);color:#fff;background:linear-gradient(#ff9277,var(--acc));box-shadow:0 8px 0 var(--acc-d),0 18px 26px -10px rgba(60,30,10,.55);text-shadow:0 2px 0 rgba(160,50,25,.45);cursor:pointer;animation:tapbob 1.6s ease-in-out infinite,tapring 1.6s ease-out infinite;white-space:nowrap}
.tapstart i{width:.7em;height:.7em;background:#fff3bf;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:twinkle 1.4s ease-in-out infinite}
.tapstart i:last-child{animation-delay:.7s}
@keyframes tapbob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}
@keyframes tapring{0%{box-shadow:0 8px 0 var(--acc-d),0 18px 26px -10px rgba(60,30,10,.55),0 0 0 0 rgba(255,255,255,.85)}100%{box-shadow:0 8px 0 var(--acc-d),0 18px 26px -10px rgba(60,30,10,.55),0 0 0 26px rgba(255,255,255,0)}}
@media(max-width:700px){
  .cover.cover-img{display:block;height:auto;min-height:100vh;background:var(--paper)}
  .coverbg{display:none}
  .cover-img .stage{width:100%;aspect-ratio:auto;max-height:none}
  .cover-img .coverimg{position:static;height:auto;aspect-ratio:16/9;display:block}
  .tapstart{position:static;transform:none;margin:14px auto;display:flex;width:fit-content;animation:tapring 1.6s ease-out infinite}
  .cover-img .startcard{position:static;width:auto;margin:14px 12px}
}
@media(prefers-reduced-motion:reduce){.tapstart,.tapstart i{animation:none}}

.cover.cover-img{grid-template-columns:minmax(0,1fr);padding:0}