/* 보완 디자인: cute.css 뒤에 불러와서 대비·반응·새 부품을 더한다 */
:root{--k1d:#d0482a;--k2d:#16796f;--k3d:#4f60cf;--lbl:clamp(.92rem,.82rem + .22vw,1.04rem)}

/* 글자 대비: 흰 글씨가 올라가는 색은 한 단계 진하게 */
.pill.k1,.slot .no,.opt.k1 .no,.sum .k1 .no{background:var(--k1d)}
.pill.k2,.opt.k2 .no,.sum .k2 .no{background:var(--k2d)}
.pill.k3,.opt.k3 .no,.sum .k3 .no{background:var(--k3d)}
.slot.k1 .no{background:var(--k1d)}.slot.k2 .no{background:var(--k2d)}.slot.k3 .no{background:var(--k3d)}
.slot.k1 .nm{color:var(--k1d)}.slot.k2 .nm{color:var(--k2d)}.slot.k3 .nm{color:var(--k3d)}
.chip{background:#e6577a}
.fig .cap{background:#e6577a}.fig .cap i{color:#e6577a}
.lbl{color:#7d6457}
.steps small{color:#7d6457}

/* 위쪽 점수 칩이 바뀔 때 통통 */
.chip.bump{animation:bump .5s cubic-bezier(.2,.9,.3,1.5)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(-2deg)}100%{transform:none}}

/* 칸: 힌트 반짝임, 놓은 칸의 퐁 */
.slot.hint{animation:hintglow 1s ease-in-out infinite;background:#fffbe0}
@keyframes hintglow{0%,100%{box-shadow:0 0 0 3px var(--hi),0 4px 0 rgba(0,0,0,.06)}50%{box-shadow:0 0 0 9px rgba(255,217,94,.55),0 4px 0 rgba(0,0,0,.06)}}
.slot.filled::before{content:"";position:absolute;inset:-3px;border-radius:inherit;border:3px solid var(--c);animation:ripple .7s ease-out both;pointer-events:none}
.slot{position:relative}
@keyframes ripple{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.08)}}
.slot.filled .got{font-weight:800}

/* 안내 줄 + 힌트 버튼 */
.noterow{display:flex;gap:8px;align-items:stretch;margin-top:10px}
.noterow .note{flex:1;margin-top:0}
.hintbtn{flex:none;border:3px solid var(--hi);background:#fff;color:var(--ink);border-radius:18px;font-weight:800;padding:0 .9em;cursor:pointer;line-height:1.15;box-shadow:0 4px 0 #e6b800;transition:transform .12s}
.hintbtn small{display:block;font-size:.78em;color:#a06a00;font-weight:700}
.hintbtn:hover{transform:translateY(-2px)}
.hintbtn:active{transform:translateY(3px);box-shadow:none}

/* 놓지 않은 조각 입장 */
.piece{animation:pieceIn .5s cubic-bezier(.2,.9,.3,1.3) both}
.piece:nth-child(2){animation-delay:.05s}.piece:nth-child(3){animation-delay:.1s}.piece:nth-child(4){animation-delay:.15s}.piece:nth-child(5){animation-delay:.2s}
#app.still .piece{animation:none}
@keyframes pieceIn{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
.piece.shake{animation:shake .4s}

/* 완성 편지 살펴보기 */
.legend{align-items:center}
.legend .lead{font-weight:800;color:var(--ink2);font-size:var(--lbl);margin-right:2px}
.legend .pill{border:3px solid transparent;cursor:pointer;font-family:inherit;transition:transform .12s,box-shadow .12s}
.legend .pill:hover{transform:translateY(-2px)}
.legend .pill.sel{border-color:#fff;box-shadow:0 0 0 3px var(--ink),0 3px 0 rgba(0,0,0,.2);transform:scale(1.06)}
.letter .s{transition:opacity .25s,box-shadow .25s,transform .25s}
.letter.dim .s{opacity:.35}
.letter.dim .s.on{opacity:1;box-shadow:0 0 0 3px var(--ink);transform:translateY(-1px)}
.cue{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:rgba(61,43,36,.55);text-underline-offset:.22em}

/* 점검: 문장 하나 / 두 편지 비교 */
.qletter.one{text-align:center;font-size:var(--h3)}
.qletter .quote{display:inline-block;padding:.1em .7em;border-radius:99px;background:var(--hi-l);box-shadow:0 0 0 3px var(--hi)}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 4px}
.pick{display:flex;flex-direction:column;gap:6px;text-align:left;background:#fff;border:3px solid var(--line);border-radius:22px;padding:.7em .9em;cursor:pointer;font-size:var(--base);font-weight:700;line-height:1.6;box-shadow:0 5px 0 var(--line2);transition:.15s;color:var(--ink)}
.pick .tag{align-self:flex-start;background:var(--ink2);color:#fff;border-radius:99px;padding:0 .8em;font-weight:800;font-size:var(--lbl)}
.pick:hover:not(:disabled){transform:translateY(-3px);border-color:var(--ink2)}
.pick.bad{border-color:var(--no);background:var(--no-l);opacity:.7}
@media(max-width:560px){.picks{grid-template-columns:1fr}}

/* 표지 안내 */
.howto{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-weight:700;font-size:var(--lbl);color:var(--ink2)}
.howto li{display:flex;align-items:center;gap:6px}
.howto b{display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--ink2);color:#fff;font-size:.85em}
.bestline{margin:0 0 10px;font-weight:800;color:var(--acc-d);font-size:var(--lbl)}

/* 마지막 화면: 증서 */
.cert{max-width:620px;margin:6px auto 10px;padding:8px;border-radius:30px;background:linear-gradient(135deg,#ffd95e,#ff9bb0,#9fd6f5,#ffd95e);box-shadow:0 8px 0 rgba(160,90,40,.25),0 24px 36px -20px rgba(160,90,40,.5)}
.certin{position:relative;background:#fffef9;border-radius:24px;padding:14px 20px 16px;border:3px dashed var(--line2);text-align:center}
.certin small{font-weight:800;letter-spacing:.14em;color:var(--muted)}
.certin h2{font-size:clamp(1.4rem,1rem + 1.6vw,2.1rem);color:var(--acc-d);margin:2px 0 4px}
.certin .who{font-size:var(--h3)}
.certin .who b{border-bottom:4px solid var(--hi);padding:0 .3em}
.certin p{margin:2px 0;font-weight:700}
.certin .sc b{color:var(--acc-d);font-size:1.15em}
.certin .dt{color:var(--muted);font-size:var(--lbl)}
.certin .seal{position:absolute;right:12px;bottom:10px;width:4.3em;height:4.3em;font-size:.82em;transform:rotate(0)}
.sum .tip{margin-top:4px;font-weight:700;color:var(--ink)}
.closing{font-size:var(--read);font-weight:800;margin:6px 0 12px}
.endbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* 인쇄: 증서만 */
@media print{
  body{background:#fff}
  body *{visibility:hidden}
  #cert,#cert *{visibility:visible}
  #cert{position:absolute;left:50%;top:20mm;transform:translateX(-50%);width:170mm;max-width:none;box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* 휴대전화 */
@media(max-width:640px){
  .noterow{flex-direction:column}
  .hintbtn{padding:.4em .9em;display:flex;gap:6px;align-items:center;justify-content:center}
  .hintbtn small{display:inline}
  .certin .seal{position:static;margin-top:6px}
}
@media(prefers-reduced-motion:reduce){.chip.bump,.slot.hint,.piece,.slot.filled::before{animation:none}}

/* 마지막 화면을 한 화면에 가깝게 */
.end .parade .animal{width:clamp(48px,7vw,84px)}
.end h1{font-size:clamp(1.5rem,1rem + 1.8vw,2.2rem)}
.end .sum{margin:8px 0}
.end .sum>div{padding:.5em .9em}
.end .sum .no{width:1.7em;height:1.7em;margin-bottom:.2em}
.end .sum b{font-size:var(--read)}
.end .sum p{font-size:var(--lbl)}

/* 휴대전화: 상단 바가 화면 밖으로 밀리지 않게 */
@media(max-width:640px){
  html,body{overflow-x:hidden}
  .top{gap:6px;padding:0 8px}
  .wordmark{display:none}
  .brand{gap:0}
  .top-r{gap:4px;min-width:0}
  .chip{padding:0 10px;font-size:.8rem;height:34px}
  .tbtn{padding:0 10px;font-size:.8rem;height:34px}
  .brandlogo{height:26px;margin-left:2px;padding-left:6px}
  .steps{gap:3px}
}

/* 소품 그림(images/props.webp: 3열x2행 스프라이트) */
.pr{display:inline-block;flex:none;aspect-ratio:1;background:url(../images/props.webp) no-repeat;background-size:300% 200%;background-position:calc(var(--c)*50%) calc(var(--r)*100%);mix-blend-mode:multiply;vertical-align:middle}
.pr.medal{width:clamp(84px,11vw,120px);position:absolute;left:14px;top:50%;margin-top:calc(clamp(84px,11vw,120px)/-2);animation:bob 2.4s ease-in-out infinite}
.certin{padding-left:clamp(100px,13vw,140px);padding-right:clamp(80px,10vw,110px)}
.pr.bulb{width:2.2em;margin:-.4em .2em -.4em -.5em}
.hintbtn{display:flex;align-items:center;flex-wrap:wrap;justify-content:center}
.pr.env{width:1.9em;margin:-.35em .35em -.35em -.55em}
.pick .tag{display:inline-flex;align-items:center}
@media(max-width:640px){.pr.medal{position:static;margin:0 auto;display:block}.certin{padding:12px}}
@media print{.pr{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
@media(prefers-reduced-motion:reduce){.pr.medal{animation:none}}

/* 표지: 와이드 그림을 화면 가득(좌우 여백 없이) 채우고, 시작 버튼은 작게 */
.cover.cover-img{display:block}
.coverbg{display:none}
.cover-img .stage{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;max-height:none}
.cover-img .coverimg{object-fit:cover;object-position:center}
.cover-img .startcard{right:2%;bottom:3%;width:min(40%,460px)}
.tapstart{bottom:4%;font-size:clamp(.85rem,.55rem + .7vw,1.1rem);padding:.4em 1.2em;border-width:3px;outline-width:2px;gap:.5em;box-shadow:0 5px 0 var(--acc-d),0 12px 18px -10px rgba(60,30,10,.5)}
@keyframes tapring{0%{box-shadow:0 5px 0 var(--acc-d),0 0 0 0 rgba(255,255,255,.85)}100%{box-shadow:0 5px 0 var(--acc-d),0 0 0 16px rgba(255,255,255,0)}}
@media(max-width:700px){
  .cover.cover-img{display:block}
  .cover-img .stage{position:relative;inset:auto;height:auto}
  .cover-img .coverimg{position:static;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
  .tapstart{font-size:.95rem}
}

/* 아래쪽 빈 곳 채우기: 오른쪽 칸을 세로로 쓰고, 정리 카드를 가운데에 둔다 */
.pane{display:flex;flex-direction:column}
.pane .bar{margin-top:auto;padding-top:10px}
.recap{flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px;margin-top:12px;padding:10px 12px;border:3px dashed var(--line2);border-radius:22px;background:rgba(255,255,255,.7)}
.recap .lbl{margin-bottom:2px}
.rrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rrow .pill{flex:none;min-width:9.2em;justify-content:center}
.rrow .rt{flex:1;min-width:0;font-weight:800;font-size:var(--read)}
.rrow .rt small{display:block;font-weight:600;font-size:var(--lbl);color:var(--ink2)}
.whoin{width:6.5em;border:0;border-bottom:4px solid var(--hi);background:transparent;text-align:center;font-weight:800;font-size:inherit;color:var(--ink);padding:0 .2em}
.whoin:focus{outline:none;background:var(--hi-l);border-radius:8px 8px 0 0}
.whoin::placeholder{color:var(--muted)}

/* 표지 버튼 줄: 시작하기 + (이어서 하는 사람에게만) 이어하기 */
.coverbtns{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);display:flex;gap:12px;align-items:center;justify-content:center;z-index:2;white-space:nowrap}
.coverbtns .tapstart{position:static;transform:none;animation:tapring 1.6s ease-out infinite}
.resumebtn{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15;border:3px solid #fff;outline:2px solid var(--k2d);outline-offset:-3px;border-radius:99px;padding:.32em 1.1em;font-weight:800;font-size:clamp(.85rem,.55rem + .7vw,1.1rem);color:#fff;background:linear-gradient(#4fcfc1,var(--k2));box-shadow:0 5px 0 var(--k2d),0 12px 18px -10px rgba(10,60,50,.5);cursor:pointer;font-family:inherit;text-shadow:0 2px 0 rgba(10,80,70,.4)}
.resumebtn small{font-size:.72em;font-weight:700;opacity:.95}
.resumebtn:hover{transform:translateY(-2px)}
.resumebtn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--k2d)}
@media(max-width:700px){.coverbtns{position:static;transform:none;flex-wrap:wrap;margin:14px 8px}}
@media(prefers-reduced-motion:reduce){.coverbtns .tapstart{animation:none}}

/* 왼쪽 위: 아이콘 없이 제목 블록. 누르면 표지로 */
.brand{gap:0}
.brand .wordmark{display:inline-flex;align-items:center;height:36px;padding:0 16px;font-size:1.05rem;border:2px solid var(--line2);border-radius:99px;background:#fff;box-shadow:0 3px 0 var(--line2);transition:transform .15s,box-shadow .15s}
.brand:hover .wordmark{transform:translateY(-2px);box-shadow:0 5px 0 var(--line2)}
.brand:active .wordmark{transform:translateY(2px);box-shadow:0 1px 0 var(--line2)}
@media(max-width:640px){
  .wordmark{display:inline-flex}
  .brand .wordmark{padding:0 10px;font-size:.8rem;height:34px}
  .brand .wordmark span:first-child{display:none}
}

/* 로고 링크 */
.logolink{display:inline-flex;align-items:center;border-radius:12px;transition:transform .15s}
.logolink:hover{transform:translateY(-2px)}

/* 힌트 버튼: 한 줄로, 글자는 13px 이상 */
.hintbtn{flex-direction:row;gap:2px;padding:.2em .8em;flex-wrap:nowrap;white-space:nowrap}
.hintbtn small{display:inline;margin-left:.3em;font-size:13px}
.pr.bulb{width:1.9em}

/* 이름 쓰기 안내 */
.namehint{margin:0 0 6px;font-weight:800;color:var(--acc-d);font-size:var(--lbl)}
.whoin.nudge{animation:nudge 1s ease-in-out 2;background:var(--hi-l)}
@keyframes nudge{50%{box-shadow:0 0 0 6px rgba(255,217,94,.8)}}
@media(prefers-reduced-motion:reduce){.whoin.nudge{animation:none}}

/* 컴퓨터 화면(901px 이상): 사연·완성 화면이 화면 높이에 맞게 들어오도록 압축 */
@media(min-width:901px){
  .grid2{padding-bottom:8px}
  .steps{margin:6px 0 6px}
  .fig .scene{aspect-ratio:auto;height:clamp(160px,38vh,420px)}
  .slot{grid-template-columns:auto auto 1fr;gap:0 10px;min-height:0;padding:.3em .8em}
  .slot .no{grid-row:1;width:1.9em;height:1.9em}
  .slot.filled .no{grid-row:1/3}
  .slot .ask{font-size:var(--lbl)}
  .slot .got{grid-column:2/-1!important;margin-top:0;line-height:1.4}
  .slots{gap:6px}
  .noterow{margin-top:8px}
  .noterow .note{padding:.3em .8em}
  .belt{margin-top:8px}
  .track{padding:8px 8px 10px;gap:8px;min-height:0}
  .track .piece{flex:1 1 calc(50% - 8px);max-width:100%;line-height:1.4}
  .pane h2{margin:0 0 .35em}
  .pane{padding:10px 16px}
  .letter{padding:8px 14px}
  .recap{margin-top:8px;padding:8px 12px;gap:6px}
  .bar{margin-top:8px}
}
/* 높이가 낮은 화면(노트북 크롬 등): 마지막 화면과 점검 화면 압축 */
@media(min-width:901px) and (max-height:820px){
  .end .parade{display:none}
  .end{padding:6px 0 10px}
  .end h1{margin:0 0 .15em}
  .cert{margin:2px auto 8px}
  .certin{padding-top:8px;padding-bottom:10px}
  .end .sum .tip{display:none}
  .end .sum{margin:6px 0}
  .closing{margin:2px 0 8px}
  .qletter{margin:6px 0 8px}
  .talk.tall .animal{width:min(100%,300px)}
}

@media(min-width:901px) and (max-height:820px){
  .recap .rt small{display:none}
  .rrow{gap:8px}
  .rrow .pill{min-width:8.6em}
  .pane .seal{width:4.2em;height:4.2em;font-size:.85em}
  .pane .bar{margin-top:6px;padding-top:4px}
  .pane .starrow .star{width:1.9rem;height:1.9rem}
  .pane .note{margin-top:8px;padding:.25em .8em}
  .legend{margin:8px 0 0}
  .pane:after{display:none}
  .pane .lbl{line-height:1.2}
}

/* 위쪽 여백이 main 밖으로 새어 나가 화면보다 6px 길어지던 문제 */
main{display:flow-root}
@media(min-width:901px) and (max-height:820px){#app:has(.end) .steps{display:none}}
@media(min-width:901px) and (max-height:820px){
  .track{gap:6px;padding:6px 8px 8px}
  .track .piece{padding:.25em .7em;font-size:.94rem;border-width:2px;box-shadow:0 4px 0 #c9975a}
  .slot .nm{font-size:1rem}
  .pane h2{font-size:1.2rem}
  .noterow{margin-top:6px}
  .belt .lbl{margin-bottom:2px}
}

/* 마지막 화면의 동물 친구들: 동그란 틀 + 어울리는 윤곽선 */
.ring{position:relative;display:inline-block;flex:none;width:clamp(56px,11vw,104px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#fffdf8;border:4px solid var(--rc,#ff7a5c);box-shadow:0 4px 0 var(--rc,#ff7a5c),0 0 0 4px #fff,0 8px 14px -6px rgba(120,70,30,.45)}
.ring.r0{--rc:#ff7a5c}.ring.r1{--rc:#ffb82e}.ring.r2{--rc:#2fb5a8}.ring.r3{--rc:#7a8cf0}
.ring .animal{position:absolute;left:50%;top:50%;width:128%;transform:translate(-50%,-50%);mix-blend-mode:normal;animation:none}
.parade{gap:clamp(10px,2vw,22px);align-items:center}
.parade .ring{animation:bob 2s ease-in-out infinite}
.parade .ring:nth-child(2){animation-delay:.2s}.parade .ring:nth-child(3){animation-delay:.4s}.parade .ring:nth-child(4){animation-delay:.6s}
@media(prefers-reduced-motion:reduce){.parade .ring{animation:none}}
.parade .ring .animal{width:128%!important}

/* 도장(접수 완료·상담 완료): 점선 테두리를 없애고, 글자가 원 안에 여유 있게 들어가는 깔끔한 배지 */
.seal,.seal.big{
  width:5.4em;height:5.4em;padding:0;gap:.12em;font-size:1em;line-height:1;
  background:radial-gradient(circle at 32% 24%,#ffb09a,#ff7a5c 58%,#ea5d3d);
  border:0;outline:0;
  box-shadow:inset 0 0 0 .22em rgba(255,255,255,.95),inset 0 0 0 .3em rgba(234,93,61,.55),0 4px 0 #d4502f,0 10px 16px -8px rgba(212,80,47,.6);
  animation:none;transform:none;
}
.seal .ck{width:1.05em;height:1.05em;margin:0;stroke-width:3.2}
.seal b{font-size:.9em;font-weight:800;letter-spacing:0;line-height:1.1;display:block}
.seal.big{width:5.4em;height:5.4em}
.pane .seal{width:4.8em;height:4.8em;font-size:1em}
.certin .seal{width:4.8em;height:4.8em;font-size:1em}
@media(min-width:901px) and (max-height:820px){.pane .seal{width:4.4em;height:4.4em;font-size:1em}}

/* 증서 메달 크게 */
.certin{--md:clamp(124px,21vh,210px);padding-left:calc(var(--md) + 36px);padding-right:calc(4.8em + 30px);min-height:calc(var(--md) + 16px);display:flex;flex-direction:column;justify-content:center}
.pr.medal{width:var(--md);margin-top:calc(var(--md)/-2);left:18px}
.cert{max-width:min(760px,96vw)}
@media(max-width:640px){
  .certin{--md:150px;padding:12px;min-height:0}
  .pr.medal{position:static;margin:0 auto 4px}
}