/* ════════════ 골라줘 (decide) — 손바닥 게임쇼 결정 놀이터 ════════════ */
:root{
  --bg:#FFF8F0; --surface:#FFFFFF; --ink:#2A1A2E; --muted:#8A7C90; --line:#F0E3D6;
  --brand:#FF5D8F; --brand-ink:#C42E63;
  --a0:#FF5D8F; --a1:#FF8A3D; --a2:#FFC93C; --a3:#22C7A9;
  --a4:#3DA5FF; --a5:#7C5CFF; --a6:#FF6B6B; --a7:#9BD64A;
  --shadow:0 6px 18px rgba(42,26,46,.10);
  --shadow-lg:0 14px 40px rgba(42,26,46,.18);
  --r-card:20px; --r-btn:16px; --r-modal:28px;
  --display:"Jua","Baloo 2",sans-serif;
  --sans:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
}
/* ===== 3-way theme (Light/Dark/System) — base :root above = native LIGHT. Opposite (dark) WCAG-aware auto-generated (contrast-solving ink/accent vs worst-case surface). ===== */
:root[data-theme="dark"]{
  --bg: #1e1a15;
  --surface: #272727;
  --ink: #c8aacf;
  --muted: #998c9e;
  --line: rgba(255,255,255,0.12);
  --brand: #ff2b6c;
  --brand-ink: #000000;
  --a0: #ff2b6c;
  --a1: #e55b00;
  --a2: #af7e00;
  --a3: #1a9781;
  --a4: #0086fa;
  --a5: #8b6fff;
  --a6: #ff3535;
  --a7: #649422;
}











*{box-sizing:border-box}
[hidden]{display:none!important} /* 명시적 display가 [hidden]을 무력화하지 않도록 */
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--ink); min-height:100vh; overflow-x:hidden;
  background:
    radial-gradient(900px 500px at 12% -8%, #FFE7EF 0%, rgba(255,231,239,0) 60%),
    radial-gradient(800px 520px at 92% 4%, #FFF0D9 0%, rgba(255,240,217,0) 55%),
    radial-gradient(700px 600px at 50% 120%, #E7FBF4 0%, rgba(231,251,244,0) 55%),
    var(--bg);
  background-attachment:fixed; -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
.display,.brand-name{font-family:var(--display)}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:8px}

/* ── 상단 바 ── */
.topbar{position:sticky;top:0;z-index:30;backdrop-filter:blur(10px);
  background:rgba(255,248,240,.82);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.7rem clamp(.8rem,4vw,1.4rem)}
.brand{display:flex;align-items:center;gap:.45rem}
.brand-mark{font-size:1.5rem;filter:drop-shadow(0 2px 6px rgba(255,93,143,.4))}
.brand-name{font-size:1.45rem;color:var(--ink);letter-spacing:.01em}
.tabs{display:flex;gap:.3rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.25rem}
.tab{display:flex;align-items:center;gap:.25rem;border:0;background:transparent;cursor:pointer;
  border-radius:999px;padding:.45rem .8rem;font-size:.92rem;font-weight:700;color:var(--muted);
  transition:background .18s,color .18s,transform .12s}
.tab span{display:inline}
.tab:hover{color:var(--ink)}
.tab.active{background:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(255,93,143,.4)}
.tab:active{transform:scale(.95)}

main{max-width:760px;margin:0 auto;padding:1rem clamp(.8rem,4vw,1.4rem) 5rem}
.tagline{text-align:center;font-family:var(--display);font-size:clamp(1.2rem,5vw,1.7rem);
  color:var(--muted);margin:.4rem 0 1.2rem}
.tagline b{color:var(--brand-ink)}
footer.site{text-align:center;color:var(--muted);font-size:.78rem;line-height:1.7;padding:1rem 1.2rem 3rem}

/* ── 모드 전환 ── */
.mode{animation:rise .28s ease both}
.mode[hidden]{display:none}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── 패널/칩/입력 ── */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:1rem 1.05rem;box-shadow:var(--shadow);margin-top:1rem}
.panel.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem;gap:.5rem}
.panel-head h2{font-family:var(--display);font-size:1.1rem;margin:0;font-weight:400}
.count{font-family:var(--display);font-size:1.1rem;color:var(--brand-ink)}
.panel-tools{display:flex;gap:.35rem;flex-wrap:wrap}
.panel-tools.center{justify-content:center;margin-top:.8rem}
.mini{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;
  padding:.32rem .7rem;font-size:.78rem;font-weight:700;cursor:pointer;transition:.15s}
.mini:hover{color:var(--ink);border-color:var(--brand);background:#fff7fa}
.mini.danger:hover{color:#fff;background:var(--a6);border-color:var(--a6)}

.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;min-height:2.2rem}
.chips.slim{gap:.4rem}
.chip{display:flex;align-items:center;gap:.4rem;background:#fff;border:1.5px solid var(--line);
  border-radius:999px;padding:.4rem .55rem .4rem .85rem;font-weight:600;font-size:.95rem;
  box-shadow:0 2px 6px rgba(42,26,46,.05);animation:pop .2s ease both}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.chip .dot{width:.7rem;height:.7rem;border-radius:50%;flex:none}
.chip .wlabel{font-size:.78rem;color:var(--muted);min-width:1.1rem;text-align:center}
.chip .step{border:0;background:#f4eee9;width:1.35rem;height:1.35rem;border-radius:50%;
  cursor:pointer;font-weight:800;color:var(--ink);line-height:1;display:grid;place-items:center}
.chip .step:hover{background:var(--a2)}
.chip .emoji{font-size:1.1rem}
.chip .x{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:1rem;
  width:1.3rem;height:1.3rem;border-radius:50%;display:grid;place-items:center}
.chip .x:hover{background:#ffe3ec;color:var(--brand-ink)}

.add-row{display:flex;gap:.5rem;margin-top:.8rem}
.add-row.wc-add .emoji-slot{flex:none;width:3rem}
.add-input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:var(--r-btn);
  padding:.7rem .9rem;font-size:1rem;font-family:var(--sans);background:#fff;outline:none;transition:.18s}
.add-input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(255,93,143,.14)}
.add-input::placeholder{color:#c3b6bd}
.add-btn,.emoji-slot{border:0;cursor:pointer;border-radius:var(--r-btn);background:var(--brand);color:#fff;
  font-size:1.25rem;font-weight:800;padding:0 1rem;min-width:3rem;transition:.15s;box-shadow:0 4px 12px rgba(255,93,143,.35)}
.emoji-slot{background:#fff;border:1.5px solid var(--line);color:inherit;box-shadow:none}
.emoji-slot:hover{border-color:var(--brand)}
.add-btn:hover{background:var(--brand-ink)}
.add-btn:active,.emoji-slot:active{transform:translateY(2px) scale(.97)}
.hint{color:var(--muted);font-size:.82rem;line-height:1.7;margin:.7rem 0 0}
.hint.center{text-align:center;margin-top:1rem}
.hint b{color:var(--brand-ink)}

/* ── 메인 액션 버튼 ── */
.main-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.3rem;position:sticky;bottom:1rem;z-index:10}
.big{border:0;cursor:pointer;border-radius:var(--r-btn);padding:.95rem 1.6rem;font-size:1.05rem;
  font-weight:800;font-family:var(--display);transition:transform .1s,box-shadow .2s,background .2s}
.big.primary{background:var(--brand);color:#fff;box-shadow:0 8px 22px rgba(255,93,143,.45)}
.big.primary:hover{background:var(--brand-ink);box-shadow:0 10px 28px rgba(255,93,143,.55)}
.big.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:var(--shadow)}
.big.ghost:hover{border-color:var(--brand);color:var(--brand-ink)}
.big:active{transform:translateY(2px) scale(.985)}
.big:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}

/* ── 스테이지(결과 무대) ── */
.stage{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:.5rem}

/* ── 룰렛 ── */
.wheel-wrap{position:relative;width:min(80vw,340px);height:min(80vw,340px);margin:.5rem auto 0}
.wheel-pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);z-index:5;
  font-size:2rem;color:var(--brand);filter:drop-shadow(0 3px 4px rgba(0,0,0,.2));pointer-events:none}
.wheel{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 8px #fff,0 0 0 11px var(--brand),var(--shadow-lg);
  transition:transform 4.2s cubic-bezier(.16,.84,.3,1)}
.wheel svg{display:block;width:100%;height:100%}
.wheel .sector-label{font-family:var(--sans);font-weight:800;fill:#fff;font-size:13px;
  paint-order:stroke;stroke:rgba(0,0,0,.18);stroke-width:2px}
.wheel-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;
  width:23%;height:23%;border-radius:50%;border:4px solid #fff;cursor:pointer;
  background:radial-gradient(circle at 38% 32%,#fff 0%,var(--brand) 60%,var(--brand-ink) 100%);
  color:#fff;font-family:var(--display);font-size:clamp(.9rem,4vw,1.3rem);
  box-shadow:0 6px 16px rgba(255,93,143,.5);transition:transform .12s}
.wheel-hub:hover{transform:translate(-50%,-50%) scale(1.06)}
.wheel-hub:active{transform:translate(-50%,-50%) scale(.94)}
.wheel-hub:disabled{opacity:.6;cursor:not-allowed}

/* ── 결과 배너 ── */
.result-banner{text-align:center;background:#fff;border:2px solid var(--brand);border-radius:var(--r-card);
  padding:1rem 1.4rem;box-shadow:var(--shadow-lg);animation:bannerPop .4s cubic-bezier(.18,1.4,.4,1) both;max-width:90%}
.result-banner .rb-cap{color:var(--muted);font-size:.8rem;font-weight:700}
.result-banner .rb-name{font-family:var(--display);font-size:clamp(1.6rem,8vw,2.4rem);color:var(--brand-ink);line-height:1.2;margin-top:.1rem}
@keyframes bannerPop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}

/* ── 사다리 ── */
.ladder-canvas{width:min(94vw,560px);max-width:100%;height:auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--shadow);touch-action:manipulation}

/* ── 월드컵 ── */
.round-pick{display:flex;align-items:center;gap:.7rem;margin-top:1rem;flex-wrap:wrap}
.round-pick>span{color:var(--muted);font-size:.85rem;font-weight:700}
.round-chips{display:flex;gap:.4rem;flex-wrap:wrap}
.round-chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:.4rem .9rem;
  font-weight:800;cursor:pointer;font-family:var(--display);transition:.15s}
.round-chip.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.round-chip:disabled{opacity:.35;cursor:not-allowed}

.wc-progress{display:flex;align-items:center;gap:.7rem;margin:.6rem 0 1.2rem}
.wc-round-label{font-family:var(--display);font-size:1.2rem;color:var(--brand-ink);white-space:nowrap}
.wc-match-label{color:var(--muted);font-weight:700;font-size:.9rem;white-space:nowrap}
.wc-bar{flex:1;height:.6rem;background:#f0e3d6;border-radius:999px;overflow:hidden}
.wc-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--a1),var(--brand));
  border-radius:999px;transition:width .35s ease}

.versus{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.6rem}
.vs-card{border:2.5px solid var(--line);background:#fff;border-radius:var(--r-card);cursor:pointer;
  padding:1.6rem .8rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  min-height:44vw;max-height:300px;justify-content:center;transition:transform .12s,border-color .18s,box-shadow .2s;
  animation:rise .3s ease both}
.vs-card:hover{border-color:var(--brand);box-shadow:0 8px 24px rgba(255,93,143,.28);transform:translateY(-3px)}
.vs-card:active{transform:scale(.97)}
.vs-card.win{animation:winFlash .45s ease both}
@keyframes winFlash{0%{transform:scale(1)}45%{transform:scale(1.08);box-shadow:0 0 0 6px rgba(255,93,143,.35)}100%{transform:scale(1)}}
.vs-card .vc-emoji{font-size:clamp(2.8rem,16vw,4.6rem);line-height:1}
.vs-card .vc-name{font-family:var(--display);font-size:clamp(1.1rem,5vw,1.5rem);text-align:center;word-break:keep-all}
.vs-mark{font-family:var(--display);color:var(--muted);font-size:1.1rem}

.champ-card{background:#fff;border:3px solid var(--brand);border-radius:var(--r-modal);text-align:center;
  padding:2rem 1.4rem 1.6rem;box-shadow:var(--shadow-lg);max-width:380px;margin:1.5rem auto 0;
  animation:bannerPop .5s cubic-bezier(.18,1.4,.4,1) both}
.champ-crown{font-size:2.6rem;animation:floaty 2.4s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.champ-emoji{font-size:5rem;line-height:1;margin:.2rem 0}
.champ-name{font-family:var(--display);font-size:clamp(2rem,10vw,3rem);color:var(--brand-ink);line-height:1.1}
.champ-label{display:inline-block;background:var(--a2);color:var(--ink);font-weight:800;
  border-radius:999px;padding:.2rem .9rem;margin-top:.5rem;font-size:.85rem}
.champ-runner{color:var(--muted);margin-top:.9rem;font-size:.9rem;line-height:1.6}
.champ-runner b{color:var(--ink)}

/* ── 모달 ── */
.modal-back{position:fixed;inset:0;z-index:50;background:rgba(42,26,46,.5);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:1.2rem;animation:fade .2s ease both}
.modal-back[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border-radius:var(--r-modal);padding:1.5rem 1.4rem;width:100%;max-width:420px;
  box-shadow:var(--shadow-lg);position:relative;animation:bannerPop .3s cubic-bezier(.18,1.3,.4,1) both;max-height:88vh;overflow:auto}
.modal.slim-modal{max-width:360px}
.modal h3{font-family:var(--display);font-size:1.3rem;margin:0 0 1rem;font-weight:400}
.modal-x{position:absolute;top:.9rem;right:.9rem;border:0;background:#f4eee9;width:2rem;height:2rem;
  border-radius:50%;cursor:pointer;font-weight:800;color:var(--ink)}
.modal-x:hover{background:var(--a6);color:#fff}
.share-canvas{width:100%;max-width:340px;display:block;margin:0 auto;border-radius:16px;box-shadow:var(--shadow)}
.modal-actions{display:flex;gap:.6rem;justify-content:center;margin-top:1.1rem;flex-wrap:wrap}
.modal-actions .big{padding:.75rem 1.2rem;font-size:.95rem}

.save-row{display:flex;gap:.5rem;margin-bottom:1rem}
.sets-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.set-item{display:flex;align-items:center;justify-content:space-between;gap:.6rem;border:1.5px solid var(--line);
  border-radius:14px;padding:.6rem .8rem}
.set-item .si-main{display:flex;flex-direction:column;gap:.1rem;cursor:pointer;flex:1;min-width:0}
.set-item .si-name{font-weight:800}
.set-item .si-meta{font-size:.76rem;color:var(--muted)}
.set-item .si-load{border:0;background:var(--brand);color:#fff;border-radius:999px;padding:.4rem .9rem;font-weight:800;cursor:pointer;font-size:.82rem}
.set-item .si-del{border:0;background:#f4eee9;color:var(--muted);border-radius:50%;width:1.9rem;height:1.9rem;cursor:pointer;font-weight:800}
.set-item .si-del:hover{background:var(--a6);color:#fff}
.sets-empty{color:var(--muted);text-align:center;padding:1.2rem;font-size:.9rem}

.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.3rem}
.emoji-grid button{border:0;background:#faf5f0;border-radius:10px;font-size:1.4rem;padding:.4rem 0;cursor:pointer;transition:.12s}
.emoji-grid button:hover{background:var(--a2);transform:scale(1.15)}

/* ── 토스트 ── */
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,140%);z-index:80;
  background:var(--ink);color:#fff;padding:.7rem 1.2rem;border-radius:999px;font-weight:700;font-size:.9rem;
  box-shadow:var(--shadow-lg);transition:transform .35s cubic-bezier(.18,1.2,.4,1);max-width:90vw}
.toast.show{transform:translate(-50%,0)}

/* ── confetti ── */
#confetti{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.confetti-bit{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;will-change:transform,opacity;
  animation:fall var(--cd,1.4s) cubic-bezier(.3,.6,.4,1) forwards}
@keyframes fall{0%{transform:translateY(-10px) rotate(0);opacity:1}
  100%{transform:translateY(105vh) rotate(720deg);opacity:.9}}

/* ── 반응형 ── */
@media (max-width:560px){
  .panel.two-col{grid-template-columns:1fr;gap:.6rem}
  .tab span{display:none}
  .tab{padding:.5rem .7rem;font-size:1.05rem}
  .brand-name{font-size:1.3rem}
  .vs-card .vc-name{word-break:keep-all}
}
@media (max-width:380px){
  .versus{gap:.35rem}
  .main-actions .big{flex:1}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.05s!important}
  .wheel{transition-duration:.6s!important}
}

/* i18n language switcher — 밝은 크림 테마에 맞춰 런타임 기본값(중립 반투명)을 덮어쓴다. */
.topbar .i18n-switch{
  --i18n-switch-bg:#fff;
  --i18n-switch-border:var(--line);
  --i18n-switch-fg:var(--ink);
  --i18n-switch-active-bg:rgba(255,93,143,.16);
  --i18n-switch-active-fg:var(--brand-ink);
  --i18n-switch-menu-bg:#fff;
  --i18n-switch-menu-border:var(--line);
  --i18n-switch-shadow:var(--shadow);
}
/* ===== dark-mode overrides for hardcoded backgrounds (refinement) — pastels become faint dark glows ===== */
:root[data-theme="dark"] body{
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(255,231,239,.10) 0%, transparent 60%),
    radial-gradient(800px 520px at 92% 4%, rgba(255,240,217,.08) 0%, transparent 55%),
    radial-gradient(700px 600px at 50% 120%, rgba(231,251,244,.08) 0%, transparent 55%),
    var(--bg);
}
:root[data-theme="dark"] .topbar{ background: rgba(20,16,24,.82); }
:root[data-theme="dark"] .tabs{ background: rgba(255,255,255,.06); }
:root[data-theme="dark"] .wc-bar{ background: rgba(255,255,255,.10); }