/* 1등은 누구일까요? — 코발트 바탕 위에 누끼가 서는 화면. 색은 자사몰 OPTION A와 같은 토큰. */
:root{
  --cobalt:#0B2E6F; --cobalt-d:#071F4D; --cobalt-l:#12409B;
  --yellow:#FFD400; --verm:#FF3B2F; --verm-d:#B62014; --teal:#00C2A8;
  --text:#FFFFFF; --text-2:rgba(255,255,255,.76); --muted:rgba(255,255,255,.54);
  --line:rgba(255,255,255,.18); --card:rgba(255,255,255,.07);
  --f:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-num:"Anton","Pretendard Variable",sans-serif;
  --gut:20px; --tap:48px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cobalt);color:var(--text);font-family:var(--f);
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,p{margin:0}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

.view{min-height:100vh;min-height:100svh;padding:28px var(--gut) calc(36px + env(safe-area-inset-bottom))}

/* 공통 */
.brand{font-weight:800;letter-spacing:.08em;color:var(--yellow);font-size:15px}
.btn{display:flex;align-items:center;justify-content:center;width:100%;max-width:340px;min-height:56px;
  padding:0 24px;border:0;border-radius:999px;font-weight:800;font-size:17px;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;transition:transform .12s ease,background .12s ease}
.btn:active{transform:scale(.97)}
.btn-cta{background:var(--verm);color:#fff;box-shadow:0 6px 0 var(--verm-d)}
.btn-cta:hover{background:#ff5045}
.btn-cta[disabled]{opacity:.6;cursor:default}
.btn-ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px var(--line);min-height:var(--tap);font-size:15px;font-weight:700}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--text-2)}

/* A. 첫 화면 */
.hero,.done{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px}
.title{font-size:clamp(34px,10vw,54px);font-weight:900;letter-spacing:-.035em;line-height:1.12;word-break:keep-all;text-wrap:balance}

.mbox{position:relative;width:min(80vw,340px);aspect-ratio:1;margin:14px 0 10px;border-radius:40px;
  background:var(--cobalt-l);box-shadow:inset 0 0 0 3px var(--yellow),0 22px 0 -8px var(--cobalt-d)}
.mbox-lid{position:absolute;left:-10px;right:-10px;top:-12px;height:38px;border-radius:16px;
  background:var(--yellow);box-shadow:0 5px 0 rgba(7,31,77,.35)}
.mbox-q{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-num);
  font-size:min(62vw,260px);line-height:1;color:var(--yellow);opacity:.2;user-select:none}
.mbox-img{position:absolute;inset:14% 9% 8%;width:82%;height:78%;object-fit:contain;
  filter:drop-shadow(0 16px 18px rgba(4,16,44,.5));opacity:0}
.mbox-img.pop{animation:pop .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes pop{0%{opacity:0;transform:translateY(26px) scale(.55) rotate(-7deg)}
  30%{opacity:1}100%{opacity:1;transform:none}}

.chip{position:absolute;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--yellow);color:var(--cobalt);font-family:var(--f-num);font-size:24px;
  box-shadow:0 4px 0 rgba(7,31,77,.4);animation:bob 2.6s ease-in-out infinite}
.chip-a{left:-14px;top:30%}
.chip-b{right:-16px;top:52%;background:var(--teal);animation-delay:-.9s}
.chip-c{right:14%;bottom:-18px;width:36px;height:36px;font-size:19px;animation-delay:-1.7s}
@keyframes bob{50%{transform:translateY(-9px) rotate(8deg)}}

/* B. 고르기 */
.pick{max-width:980px;margin:0 auto;padding-top:0}
.pick-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:6px;
  margin:0 calc(var(--gut) * -1);padding:14px var(--gut);background:var(--cobalt);border-bottom:1px solid var(--line)}
.back{display:grid;place-items:center;width:var(--tap);height:var(--tap);margin-left:-12px;border-radius:50%;
  color:var(--text);text-decoration:none;font-size:22px}
.pick-title{font-size:clamp(20px,5.6vw,26px);font-weight:800;letter-spacing:-.025em;word-break:keep-all}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:18px}
@media (min-width:640px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:900px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

.card{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--line);border-radius:22px;
  background:var(--card);text-align:left;cursor:pointer;transition:transform .14s ease,background .14s ease,border-color .14s ease}
.card:hover{background:rgba(255,255,255,.12);border-color:var(--text-2)}
.card:active{transform:scale(.97)}
.card-img{position:relative;display:block;aspect-ratio:1;border-radius:14px;background:var(--cobalt-l);overflow:hidden}
.card-img img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;
  filter:drop-shadow(0 8px 10px rgba(4,16,44,.45));opacity:0;transition:opacity .5s ease}
.card-img img.on{opacity:1}
.card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-height:26px}
.num{font-family:var(--f-num);font-size:20px;line-height:1;color:var(--yellow);letter-spacing:.02em;font-weight:400}
.name{font-size:14px;font-weight:700;color:var(--text);word-break:keep-all}
.badge{padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.3;font-style:normal;
  color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.badge-set{background:var(--teal);color:var(--cobalt-d);box-shadow:none}

/* 사진 파일이 없을 때 자리 표시 */
.ph{position:absolute;inset:8%;display:grid;place-items:center;border:2px dashed var(--teal);border-radius:12px;
  color:var(--teal);font-size:12px;font-weight:700;text-align:center;padding:6px;word-break:break-all}

/* 크게 보기 */
.sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet-back{position:absolute;inset:0;background:rgba(4,16,44,.78);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.sheet-panel{position:relative;width:100%;max-width:520px;max-height:94svh;overflow-y:auto;
  padding:18px var(--gut) calc(26px + env(safe-area-inset-bottom));border-radius:30px 30px 0 0;
  background:var(--cobalt-d);box-shadow:inset 0 3px 0 var(--yellow);
  display:flex;flex-direction:column;align-items:center;gap:12px;animation:rise .28s cubic-bezier(.2,.9,.3,1)}
@keyframes rise{from{transform:translateY(60px);opacity:0}}
@media (min-width:640px){.sheet{align-items:center}.sheet-panel{border-radius:30px}}
.sheet-x{align-self:flex-end;width:var(--tap);height:var(--tap);margin:-6px -10px -14px 0;border:0;border-radius:50%;
  background:transparent;font-size:30px;line-height:1;cursor:pointer;color:var(--text-2)}
.slides{display:flex;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:22px;background:var(--cobalt-l)}
.slides::-webkit-scrollbar{display:none}
.slide{position:relative;flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1;max-height:50svh}
.slide img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 14px 16px rgba(4,16,44,.5))}
.dots{display:flex;gap:8px;min-height:8px}
.dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer}
.dots button.on{background:var(--yellow)}
.sheet-label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.sheet-label .num{font-size:28px}
.sheet-label .name{font-size:17px}
.sheet-err{font-size:14px;font-weight:700;color:var(--yellow)}

/* C. 투표 완료 */
.done-title{font-size:clamp(30px,8.6vw,44px);font-weight:900;letter-spacing:-.03em}
.mbox.is-open{box-shadow:inset 0 0 0 3px var(--yellow),0 22px 0 -8px var(--cobalt-d)}
.mbox-pick{position:absolute;inset:0;display:block}
.mbox-pick img{position:absolute;inset:9%;width:82%;height:82%;object-fit:contain;
  filter:drop-shadow(0 16px 18px rgba(4,16,44,.5));animation:pop .6s cubic-bezier(.2,1.5,.4,1) both,float 3.4s ease-in-out .6s infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.done-label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.done-label .num{font-size:30px}
.done-label .name{font-size:18px}
.done-title{word-break:keep-all;text-wrap:balance;line-height:1.2}
.links{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;margin-top:4px}
.links .btn-cta{margin-bottom:6px}
.links .btn-ghost{min-height:52px;font-size:16px}
.btn-text{min-height:var(--tap);padding:0 16px;border:0;background:transparent;color:var(--text-2);
  font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.btn-text:hover{color:var(--text)}

.demo{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:10;
  padding:6px 12px;border-radius:999px;background:var(--cobalt-d);box-shadow:inset 0 0 0 1px var(--line);
  font-size:11px;font-weight:600;color:var(--text-2);white-space:nowrap;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .mbox-img.pop,.mbox-pick img{animation:fade .4s ease both}
  .chip,.sheet-panel{animation:none}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}