/* =========================================================
   PickNode — web
   Nodery의 종이/그리드 배경 위에, 픽노드 모드 색(노디·온이·큐리·랜덤)을 얹는다.
   --accent 계열은 body[data-mode] 로 갈아끼운다.
   ========================================================= */
:root{
  --paper:#FAF7F2;
  --card:#FFFFFF;
  --navy:#14213D;
  --ink:#18181B;
  --ink-2:#3F3F46;
  --muted:#8E8E97;
  --faint:#B4B4BB;
  --line:#EDEDF0;
  --border:#E2E2E7;
  --track:#F1F2F7;
  --orange:#DC6D26;
  --ok:#2E9C6A;
  --danger:#C2410C;

  --accent:#3A54C9;
  --accent-dark:#2A3EA0;
  --accent-soft:#EBEEFB;
  --bar1:#3A54C9; --bar2:#6478DB; --bar3:#93A2E8; --bar4:#C2CBF2;

  --radius:18px;
  --radius-sm:12px;
  --sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
body[data-mode="vote"]{--accent:#3A54C9;--accent-dark:#2A3EA0;--accent-soft:#EBEEFB;
  --bar1:#3A54C9;--bar2:#6478DB;--bar3:#93A2E8;--bar4:#C2CBF2}
body[data-mode="judge"]{--accent:#1F8A78;--accent-dark:#166B5C;--accent-soft:#E6F4F1;
  --bar1:#1F8A78;--bar2:#54A99B;--bar3:#8AC7BD;--bar4:#C0E4DE}
body[data-mode="board"]{--accent:#6C4FC4;--accent-dark:#5238A0;--accent-soft:#F0EBFA;
  --bar1:#6C4FC4;--bar2:#8A73D4;--bar3:#AC9BE2;--bar4:#D3CAF0}
body[data-mode="random"]{--accent:#C97F12;--accent-dark:#9A600C;--accent-soft:#FBF0DE;
  --bar1:#C97F12;--bar2:#D79A42;--bar3:#E5B87A;--bar4:#F2D7B3}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.55;
  word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(to right, rgba(20,33,61,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,33,61,.04) 1px, transparent 1px);
  background-size:40px 40px;background-attachment:fixed;
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
ul,ol{list-style:none}
button,input,textarea{font:inherit;color:inherit}
.mono{font-family:var(--mono);letter-spacing:.03em}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;
  padding:10px 16px;background:rgba(250,247,242,.9);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-brand{display:flex;align-items:center;gap:8px;font-size:16px;letter-spacing:-.02em}
.topbar-brand img{border-radius:7px}
.topbar-nav{display:flex;gap:2px;margin-left:auto;font-size:14px;font-weight:600;color:var(--muted)}
.topbar-nav a{padding:7px 11px;border-radius:999px;transition:background .15s,color .15s}
.topbar-nav a:hover{color:var(--ink)}
.topbar-nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent-dark)}
.topbar-out{font-size:12px;color:var(--faint);font-family:var(--mono)}
@media (max-width:520px){
  .topbar{gap:8px;padding:9px 12px}
  .topbar-out{display:none}
  .topbar-nav{gap:0;font-size:13px}
  .topbar-nav a{padding:7px 9px}
}

/* ---------- Layout ---------- */
.view{flex:1;width:100%;max-width:1280px;margin:0 auto;padding:28px 24px 64px}
@media (max-width:640px){.view{padding:20px 14px 56px}}

/* 웹은 가로가 남는다 — 입력/결과 화면은 두 열로 쓴다. 좁아지면 한 열로 접힌다. */
.two-col{display:grid;gap:22px;align-items:start}
@media (min-width:900px){
  .two-col{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .two-col.even{grid-template-columns:1fr 1fr}
  .two-col.rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .two-col > .sticky{position:sticky;top:76px}
}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.page-head .hero{margin-bottom:0}
.stack{display:flex;flex-direction:column;gap:18px}
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;box-shadow:0 4px 16px -12px rgba(24,24,27,.28);
}
.card-flat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px}
h1{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.25}
h2{font-size:19px;font-weight:700;letter-spacing:-.02em}
h3{font-size:15px;font-weight:700;letter-spacing:-.01em}
.sub{color:var(--muted);font-size:14px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.hr{height:1px;background:var(--line);margin:4px 0}

/* ---------- Hero (mode header) ---------- */
.hero{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.hero img{width:74px;height:74px;flex:none;filter:drop-shadow(0 6px 14px rgba(24,24,27,.14))}
.hero h1{font-size:24px}
.hero .sub{margin-top:4px}
@media (max-width:520px){.hero img{width:60px;height:60px}.hero h1{font-size:21px}}

.hero-dot{width:74px;height:74px;flex:none;border-radius:20px;display:grid;place-items:center;font-size:34px;background:var(--accent-soft)}
.story-text{margin-top:8px;font-size:15.5px;line-height:1.75;color:var(--ink-2)}
/* 결과 계산 방식 3종 안내 */
.methods{margin-top:12px;display:flex;flex-direction:column;gap:12px}
.methods li{display:flex;flex-direction:column;gap:5px}
.methods li .badge{align-self:flex-start}
.methods small{font-size:13px;color:var(--muted);line-height:1.55}
/* 댓글 입력 옆 — 특별 위원 미리보기 */
.persona-preview{display:flex;gap:6px;margin-top:14px}
.persona-preview img{flex:1;min-width:0;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(24,24,27,.14))}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:13px 20px;border-radius:999px;border:1.5px solid transparent;
  font-weight:700;font-size:15px;line-height:1;cursor:pointer;background:none;
  transition:background .16s,border-color .16s,color .16s,transform .12s,box-shadow .16s;
}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 20px -12px var(--accent)}
.btn-primary:hover:not([disabled]){background:var(--accent-dark)}
.btn-ghost{border-color:var(--border);color:var(--ink-2);background:var(--card)}
.btn-ghost:hover:not([disabled]){border-color:var(--accent);color:var(--accent-dark)}
.btn-quiet{color:var(--muted);font-weight:600;font-size:14px;padding:10px 14px}
.btn-quiet:hover{color:var(--ink)}
.btn-block{width:100%}
.btn-sm{padding:9px 15px;font-size:13.5px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Form ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.label{font-size:14px;font-weight:700}
.input,.textarea{
  width:100%;background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius-sm);
  padding:13px 14px;font-size:15.5px;transition:border-color .16s,box-shadow .16s;
}
.input::placeholder,.textarea::placeholder{color:var(--faint)}
.input:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.textarea{min-height:150px;resize:vertical;line-height:1.65}
.opt-row{display:flex;align-items:center;gap:9px}
.opt-row .idx{
  flex:none;width:23px;height:23px;border-radius:50%;background:var(--accent-soft);color:var(--accent-dark);
  display:grid;place-items:center;font-size:12px;font-weight:800;font-family:var(--mono);
}
.icon-btn{
  flex:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--card);
  color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:17px;line-height:1;
}
.icon-btn:hover{color:var(--danger);border-color:var(--danger)}
.counter{font-size:12px;color:var(--faint);font-family:var(--mono);text-align:right}
.counter.over{color:var(--danger)}

/* chips */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  border:1px solid var(--border);background:var(--card);border-radius:999px;
  padding:8px 14px;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.chip:hover{border-color:var(--accent);color:var(--accent-dark)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- Intro (첫 방문 소개) ---------- */
.intro-hero{text-align:center;padding:22px 0 40px}
.intro-logo{height:104px;width:auto;margin:0 auto 18px;filter:drop-shadow(0 10px 22px rgba(24,24,27,.16))}
.intro-hero h1{font-size:clamp(28px,5.4vw,44px);letter-spacing:-.035em;line-height:1.22;margin-top:10px}
.intro-hero h1 em{font-style:normal;color:var(--accent)}
.intro-lead{max-width:34em;margin:16px auto 0;color:var(--ink-2);font-size:clamp(15px,1.7vw,17px);line-height:1.7}
.intro-cta{justify-content:center;margin-top:26px}
.btn-lg{padding:16px 28px;font-size:16px}
.mascot-row{display:flex;justify-content:center;gap:14px;margin-top:36px}
.mascot-row img{width:76px;height:76px;filter:drop-shadow(0 6px 14px rgba(24,24,27,.13))}
@media (max-width:520px){.mascot-row img{width:60px;height:60px}}

/* 히어로 옆 소개 영상. 900px 아래에서는 카피 밑으로 내려간다(.two-col 과 같은 분기점). */
.ih-video{width:100%;margin-top:34px}
.video-frame{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  background:#000;border:1px solid var(--border);box-shadow:0 28px 52px -32px rgba(24,24,27,.7);
}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ih-video figcaption{margin-top:11px;font-size:13px;color:var(--muted)}
@media (min-width:900px){
  .intro-hero{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;
    align-items:center;text-align:left;padding:34px 0 48px;
  }
  .intro-hero .intro-logo{margin:0 0 16px}
  .intro-hero .intro-lead{margin:16px 0 0}
  .intro-hero .intro-cta,.intro-hero .mascot-row{justify-content:flex-start}
  .ih-video{margin-top:0}
}
@media (max-width:899px){.ih-video figcaption{text-align:center}}

.intro-sec{padding:44px 0;border-top:1px solid var(--line)}
.sec-h{font-size:clamp(22px,3.4vw,30px);font-weight:800;letter-spacing:-.03em;line-height:1.3;margin-top:10px}
.sec-p{margin-top:12px;color:var(--ink-2);font-size:15.5px;line-height:1.75;max-width:44em}
.note{margin-top:18px;background:var(--accent-soft);border-radius:var(--radius-sm);
  padding:14px 16px;font-size:13.5px;color:var(--ink-2);line-height:1.65}

.steps{display:grid;gap:12px;margin-top:24px}
@media (min-width:700px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.steps .n{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--accent);color:#fff;font-family:var(--mono);font-size:13px;font-weight:800;margin-bottom:12px;
}
.steps b{display:block;font-size:17px;letter-spacing:-.02em}
.steps small{display:block;margin-top:6px;color:var(--muted);font-size:13.5px;line-height:1.6}

/* 등록증 — 경고가 아니라 자랑이다. 사진을 크게 놓고 문구는 짧게. */
.cert{
  margin-top:26px;display:grid;gap:26px;align-items:center;
  background:linear-gradient(135deg,#101B33,#1D2B4C);color:#fff;
  border-radius:var(--radius);padding:28px;
}
@media (min-width:820px){.cert{grid-template-columns:300px 1fr;padding:34px 38px;gap:36px}}
.cert-shot{
  border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:0 24px 48px -24px rgba(0,0,0,.8);transform:rotate(-1.4deg);
  border:1px solid rgba(255,255,255,.18);
}
.cert-shot img{width:100%;height:auto;display:block}
.cert-kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;font-weight:700;
  color:#F0A868;
}
.cert-txt h3{font-size:clamp(24px,3.4vw,32px);font-weight:800;letter-spacing:-.03em;line-height:1.25;margin-top:10px}
.cert-txt h3 em{font-style:normal;color:#F5B87F}
.cert-p{margin-top:14px;color:rgba(255,255,255,.78);font-size:15px;line-height:1.75}
.cert-p b{color:#fff}
.cert-meta{margin-top:20px;display:grid;gap:9px}
@media (min-width:560px){.cert-meta{grid-template-columns:1fr 1fr;gap:12px 26px}}
.cert-meta div{border-top:1px solid rgba(255,255,255,.14);padding-top:9px}
.cert-meta dt{font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.04em}
.cert-meta dd{font-size:14px;font-weight:600;margin-top:3px}

/* 모드 쇼케이스 — 가로 슬라이딩. 스크롤 스냅이 본체, 화살표·점은 조작기다. */
.carousel{position:relative;margin-top:24px}
.car-track{
  display:flex;gap:0;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;   /* scroll-behavior 는 두지 않는다 — rAF 로 직접 굴린다 */
  scrollbar-width:none;-ms-overflow-style:none;border-radius:var(--radius);
}
.car-track::-webkit-scrollbar{display:none}
.car-track:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.slide{
  flex:0 0 100%;scroll-snap-align:start;
  display:grid;gap:20px;align-items:center;background:var(--ms);
  border:1px solid color-mix(in srgb,var(--m) 18%,transparent);border-radius:var(--radius);padding:26px;
}
@media (min-width:820px){.slide{grid-template-columns:1fr 330px;padding:30px 36px;gap:32px}}

/* 스크린샷 두 장을 겹쳐 놓는다 — 세로로 세우면 슬라이드가 쓸데없이 길어진다. */
.shots{position:relative;height:250px;display:flex;justify-content:center;align-items:center}
.shots .phone{position:absolute;width:150px;border-width:5px;border-radius:18px}
.shots .back{transform:translateX(-64px) rotate(-6deg) scale(.92);opacity:.92;z-index:1}
.shots .front{transform:translateX(58px) rotate(4deg);z-index:2}
@media (max-width:520px){
  .shots{height:210px}
  .shots .phone{width:124px}
  .shots .back{transform:translateX(-50px) rotate(-6deg) scale(.92)}
  .shots .front{transform:translateX(46px) rotate(4deg)}
}

/* 탭 — 슬라이드 위에서 모드를 바로 고른다. */
.car-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.car-tabs button{
  display:inline-flex;align-items:center;gap:7px;padding:8px 16px 8px 10px;border-radius:999px;
  border:1.5px solid var(--border);background:var(--card);color:var(--ink-2);
  font-size:14px;font-weight:700;cursor:pointer;transition:background .16s,border-color .16s,color .16s;
}
.car-tabs button img{width:30px;height:30px}
.car-tabs button span{font-size:19px;line-height:1;width:30px;text-align:center}
.car-tabs button:hover{border-color:var(--m);color:var(--m)}
.car-tabs button[aria-selected="true"]{background:var(--ms);border-color:var(--m);color:var(--m)}

.slide-head{display:flex;align-items:center;gap:14px}
.slide-face{width:84px;height:84px;flex:none;filter:drop-shadow(0 8px 16px rgba(24,24,27,.16))}
.slide-face.dot{border-radius:26px;background:rgba(255,255,255,.6);display:grid;place-items:center;font-size:46px}
.show-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--m);font-weight:700}
.show-h{font-size:clamp(26px,3.6vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-top:4px;color:var(--m)}
.slide-tag{font-size:clamp(15px,1.9vw,18px);font-weight:700;color:var(--ink-2);margin-top:4px}
.show-p{margin-top:14px;color:var(--ink-2);font-size:clamp(14.5px,1.6vw,16px);line-height:1.7}
.show-go{margin-top:18px;background:var(--m);box-shadow:none;font-size:15px;padding:11px 19px}
.show-go:hover{filter:brightness(.92)}
@media (max-width:520px){
  .slide{padding:20px}
  .slide-face{width:66px;height:66px}
  .slide-face.dot{font-size:32px;border-radius:18px}
}

.car-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--card);
  color:var(--ink);font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 6px 18px -8px rgba(24,24,27,.4);transition:opacity .16s,transform .12s;
}
.car-nav:hover:not([disabled]){transform:translateY(-50%) scale(1.06)}
.car-nav[disabled]{opacity:0;pointer-events:none}
.car-nav.prev{left:-8px}
.car-nav.next{right:-8px}
@media (max-width:900px){.car-nav{display:none}}   /* 좁은 화면은 스와이프로 */

.dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.dots button{
  width:9px;height:9px;padding:0;border:none;border-radius:50%;background:var(--border);cursor:pointer;
  transition:background .16s,width .16s;
}
.dots button[aria-current]{background:var(--accent);width:24px;border-radius:999px}

.ticks{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.ticks li{position:relative;padding-left:22px;font-size:14px;color:var(--ink-2);line-height:1.55}
.ticks li::before{
  content:"";position:absolute;left:4px;top:.52em;width:7px;height:7px;border-radius:2px;
  background:var(--m,var(--accent));
}

.phone{
  justify-self:center;width:270px;max-width:100%;border-radius:26px;overflow:hidden;
  border:7px solid var(--navy);background:var(--navy);box-shadow:0 20px 40px -24px rgba(11,18,38,.7);
}
.phone img{width:100%;height:auto;display:block}

.seg-demo{margin-top:22px}
.demo-q{font-weight:800;font-size:17px;letter-spacing:-.02em;margin-bottom:14px}
.seg-demo .seg-row{grid-template-columns:52px 1fr;margin-bottom:10px}

.intro-end{
  text-align:center;padding:46px 26px;margin-top:44px;border-radius:var(--radius);
  background:var(--navy);color:#fff;
}
.intro-end h2{font-size:clamp(22px,3.4vw,30px);letter-spacing:-.03em}
.intro-end p{margin:10px 0 24px;color:rgba(255,255,255,.72);font-size:15px}
.intro-end .btn-primary{background:var(--orange);box-shadow:0 10px 24px -12px rgba(220,109,38,.9)}
.intro-end .btn-primary:hover{background:#E07E3A}
.intro-end .stores{justify-content:center;margin-top:22px}
.intro-end .store{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.intro-end .store:hover:not(.is-soon){background:rgba(255,255,255,.16)}
.intro-end .store small{color:rgba(255,255,255,.6)}

/* ---------- Store badges (공식 배지 스타일) ---------- */
.stores{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.badge-store{
  display:inline-flex;align-items:center;gap:11px;padding:9px 18px 9px 14px;border-radius:9px;
  background:#000;color:#fff;border:1px solid #000;min-width:172px;
  transition:transform .12s,box-shadow .16s;
}
.badge-store:hover:not(.is-soon){transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(0,0,0,.8)}
.badge-store svg{flex:none}
.badge-store small{
  display:block;font-size:10px;line-height:1.1;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(255,255,255,.82);
}
.badge-store b{display:block;font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-top:1px}
.badge-store.is-soon{opacity:.42;cursor:default}
.store-strip{margin-top:28px;display:flex;justify-content:center}

/* ---------- Ad slot ---------- */
.ad-slot{margin-top:32px;display:flex;justify-content:center}
.ad-slot.banner{margin-top:36px}
.ad-box{
  width:100%;max-width:728px;height:90px;border-radius:var(--radius-sm);
  border:1px dashed var(--border);background:var(--track);
  display:grid;place-items:center;color:var(--faint);font-size:12px;font-family:var(--mono);letter-spacing:.08em;
}
@media (max-width:760px){.ad-box{max-width:320px;height:100px}}

/* ---------- Mode select (home) ---------- */
.home-hero{text-align:center;padding:14px 0 26px}
.home-hero>img{height:96px;width:auto;margin:0 auto 14px;filter:drop-shadow(0 8px 18px rgba(24,24,27,.16))}
.home-hero h1{font-size:30px}
.home-hero p{margin-top:8px;color:var(--muted)}
.btn-intro{
  margin-top:18px;background:var(--card);border-color:var(--border);
  color:var(--ink);font-size:14.5px;padding:11px 20px;
}
.btn-intro img{width:20px;height:20px;border-radius:6px}
.btn-intro span{transition:transform .16s}
.btn-intro:hover span{transform:translateX(3px)}
.modes{display:grid;gap:12px}
@media (min-width:620px){.modes{grid-template-columns:1fr 1fr}}
.mode{
  display:grid;grid-template-columns:3fr 2fr;gap:20px;align-items:start;text-align:left;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;
  transition:transform .16s,border-color .16s,box-shadow .16s;
}
.mode:hover{transform:translateY(-3px);border-color:var(--m);box-shadow:0 18px 34px -22px var(--m)}
.mode-top{display:flex;align-items:center;gap:16px}
.mode-face{width:84px;height:84px;flex:none}
.mode .dot{
  width:84px;height:84px;flex:none;border-radius:22px;display:grid;place-items:center;
  font-size:40px;background:var(--ms);
}
.mode-kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--m);font-weight:700}
.mode b{display:block;font-size:24px;letter-spacing:-.03em;line-height:1.2;margin-top:3px}
.mode-tag{display:block;color:var(--m);font-size:14px;font-weight:700;margin-top:3px}
.mode-main{display:flex;flex-direction:column;min-width:0;height:100%}
.mode-desc{margin-top:16px;color:var(--ink-2);font-size:14.5px;line-height:1.6}
.mode .ticks{margin-top:12px}
/* 스크린샷은 마스코트와 같은 높이에서 시작해 카드 오른쪽 2/5 를 채운다. */
.mini-phone{
  width:100%;border-radius:16px;overflow:hidden;align-self:start;
  border:5px solid var(--navy);background:var(--navy);box-shadow:0 16px 30px -18px rgba(11,18,38,.7);
}
.mini-phone img{width:100%;height:auto;display:block}
@media (max-width:520px){
  .mode{gap:14px;padding:18px}
  .mini-phone{border-radius:12px;border-width:4px}
}
.mode-go{
  margin-top:auto;padding-top:18px;color:var(--m);font-weight:800;font-size:15px;
  display:inline-flex;align-items:center;gap:6px;
}
.mode:hover .mode-go span{transform:translateX(3px)}
.mode-go span{transition:transform .16s}
@media (max-width:520px){
  .mode{padding:20px}
  .mode-face,.mode .dot{width:66px;height:66px}
  .mode .dot{font-size:32px;border-radius:18px}
  .mode b{font-size:21px}
}

/* ---------- 랜덤 도구 목록 ---------- */
.tools{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tool{
  display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px;transition:transform .16s,border-color .16s,box-shadow .16s;
}
.tool:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 18px 34px -22px var(--accent)}
.tool .dot{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;font-size:32px;background:var(--accent-soft)}
.tool b{font-size:18px;letter-spacing:-.02em}
.tool small{color:var(--muted);font-size:13.5px;line-height:1.5}
.tool .go{margin-top:auto;color:var(--accent);font-weight:800;font-size:14px}

/* 랜덤 도구 화면 — 설정 | 무대 */
/* 설정을 위, 무대를 아래로 쌓는다(사용자 결정). 무대가 가로 전체를 쓰므로 sticky 는 뗐다. */
.tool-layout{display:flex;flex-direction:column;gap:16px}
.opt-grid{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

/* ---------- Result ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-dark);font-size:12.5px;font-weight:700;
}
.badge i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}
.badge-stat{background:#E3F5EF;color:#0B7A5E}
.badge-fact{background:#E9EEFC;color:#2647A8}

.qhead{font-size:20px;font-weight:800;letter-spacing:-.025em;line-height:1.4}
.total{font-family:var(--mono);font-size:13px;color:var(--muted)}
.total b{color:var(--accent-dark);font-size:15px}

.bars{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.bar-head{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.bar-name{font-weight:700;font-size:15.5px}
.bar-name .crown{color:var(--accent);margin-right:4px}
.bar-pct{margin-left:auto;font-family:var(--mono);font-weight:700;font-size:15px}
.bar-n{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.track{height:11px;border-radius:999px;background:var(--track);overflow:hidden}
.fill{display:block;height:100%;border-radius:999px;width:0;transition:width .85s cubic-bezier(.22,.9,.28,1)}

.segtabs{display:flex;gap:6px;background:var(--track);padding:4px;border-radius:12px}
.segtabs button{
  flex:1;padding:9px 6px;border:none;background:none;border-radius:9px;cursor:pointer;
  font-size:13.5px;font-weight:700;color:var(--muted);transition:background .15s,color .15s;
}
.segtabs button[aria-selected="true"]{background:var(--card);color:var(--accent-dark);box-shadow:0 2px 6px -3px rgba(24,24,27,.3)}

.seg-list{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.seg-row{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center}
.seg-label{font-size:13px;font-weight:700;color:var(--ink-2);text-align:right}
.seg-label small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);font-weight:500}
.seg-track{display:flex;height:22px;border-radius:7px;overflow:hidden;background:var(--track)}
.seg-part{
  height:100%;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800;
  font-family:var(--mono);min-width:0;overflow:hidden;transition:width .7s cubic-bezier(.22,.9,.28,1);
}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);margin-top:14px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:3px;display:block}

.basis{background:var(--accent-soft);border-radius:var(--radius-sm);padding:14px 16px;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.basis b{color:var(--accent-dark)}

.verdict{
  text-align:center;padding:22px 18px;border-radius:var(--radius);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
}
.verdict .winner{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--accent-dark)}
.verdict .pct{font-family:var(--mono);font-size:14px;color:var(--ink-2);margin-top:6px}
.verdict .summary{margin-top:12px;font-size:14.5px;color:var(--ink-2);line-height:1.65}

/* user vote */
.uvote{display:flex;flex-direction:column;gap:10px}
.uvote-btn{
  display:flex;align-items:center;gap:10px;width:100%;padding:13px 16px;cursor:pointer;
  border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--card);
  font-size:15px;font-weight:700;text-align:left;transition:border-color .15s,background .15s;
}
.uvote-btn:hover{border-color:var(--accent);background:var(--accent-soft)}
.uvote-btn[disabled]{cursor:default}
.uvote-btn .ubar{margin-left:auto;font-family:var(--mono);font-size:13.5px;color:var(--accent-dark)}

/* ---------- Comments (board) ---------- */
.cmt{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.cmt:last-child{border-bottom:none}
.cmt-av{
  flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-size:15px;font-weight:800;color:#fff;letter-spacing:-.02em;object-fit:contain;
}
.cmt-persona .cmt-av{width:48px;height:48px;border-radius:14px;background:var(--card)}
.cmt-top{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.cmt-nick{font-weight:700;font-size:14.5px}
.cmt-meta{font-size:11.5px;color:var(--faint);font-family:var(--mono)}
.cmt-text{margin-top:5px;font-size:15px;line-height:1.68;color:var(--ink-2)}
.cmt-emp{margin-top:8px;font-size:12px;color:var(--muted)}
.cmt-persona{background:var(--accent-soft);margin:0 -10px;padding:16px 10px;border-radius:12px;border-bottom:none}

.personas{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media (max-width:560px){.personas{grid-template-columns:repeat(3,1fr)}}
.persona{
  border:1px solid var(--border);border-radius:16px;background:var(--card);padding:10px 6px 12px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .15s,transform .15s,box-shadow .15s;
}
.persona:hover:not([disabled]){border-color:var(--accent);transform:translateY(-3px);box-shadow:0 14px 26px -18px var(--accent)}
.persona[disabled]{cursor:default}
.persona img{width:100%;max-width:96px;aspect-ratio:1;object-fit:contain;transition:filter .3s}
.persona.done img{filter:grayscale(1);opacity:.55}
.persona.busy img{animation:bob 1s ease-in-out infinite}
.persona b{font-size:12.5px;font-weight:700;text-align:center;line-height:1.3;color:var(--ink-2)}
.persona.done b{color:var(--faint)}
.persona .state{font-size:11px;color:var(--accent);font-weight:700}

/* support (self-harm) */
.support{background:#FFF7ED;border:1px solid #FDBA74;border-radius:var(--radius);padding:20px;line-height:1.7}
.support h2{color:#9A3412;margin-bottom:8px}

/* ---------- Random tools ---------- */
/* 모션 원칙: 결과는 이미 정해져 있어도 "아직 모르겠다"를 최대한 길게 끈다.
   무대 전체는 rAF(app.js)가 굴리고, 여기서는 상태·질감만 맡는다. */
.tool-stage{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px 20px;display:grid;place-items:center;min-height:400px;overflow:hidden;
  transition:border-color .3s,box-shadow .3s;
}
@media (max-width:560px){.tool-stage{min-height:330px;padding:18px 14px}}
/* 진행 중 긴장. 무대에 position 을 주면 색종이 층의 기준이 흔들리므로 건드리지 않는다. */
.tool-stage.tense{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));animation:stageTense 1.15s ease-in-out infinite}
@keyframes stageTense{
  0%,100%{box-shadow:inset 0 0 26px -14px color-mix(in srgb,var(--accent) 30%,transparent)}
  50%{box-shadow:inset 0 0 42px -6px color-mix(in srgb,var(--accent) 45%,transparent)}
}

/* 무대 안 공통 껍데기 — 색종이(.fx)가 기준으로 삼는 좌표계이기도 하다. */
.stage-fx{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}

/* 왼쪽 모션 · 오른쪽 결과.
   align-items:start 와 .stage-scene 의 고정 높이가 핵심이다 — center 로 두면 오른쪽 결과가
   길어질 때 왼쪽 장면이 다시 가운데 정렬되면서 통째로 위아래로 흔들린다(글자 흔들림의 진짜 원인). */
.stage-split{display:grid;gap:22px;width:100%;align-items:start}
@media (min-width:820px){.stage-split{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:26px}}
.stage-scene{width:100%;height:340px;display:grid;place-items:center}
.stage-side{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.stage-side .order-list{max-width:320px}
@media (max-width:819px){.stage-scene{height:300px}}
.stage-fx.shake{animation:stageShake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes stageShake{
  10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}
  30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}
}
.fx{position:absolute;inset:0;pointer-events:none;z-index:4}
.fx-bit{
  position:absolute;left:50%;top:46%;border-radius:2px;background:var(--c);opacity:0;
  animation:fxfly 1s cubic-bezier(.12,.72,.3,1) var(--delay) forwards;
}
@keyframes fxfly{
  0%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(.5)}
  60%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot)) scale(1)}
}
/* grid/flex 로 두면 <b>참가자1</b> 같은 인라인 조각이 제각각 아이템이 되어 줄이 갈린다.
   높이를 고정해 두는 것도 중요하다 — 문구가 drum(13.5px) ↔ result-big(30px) 로 바뀔 때마다
   무대 전체가 다시 가운데 정렬되면서 동전·룰렛이 위아래로 튄다(사용자가 잡아준 문제). */
.tool-msg{text-align:center;min-height:62px;line-height:1.6;display:block;width:100%}
.tool-msg .result-big,.tool-msg .drum{display:block;line-height:1.35;padding-top:6px}
.drum{font-family:var(--mono);font-size:13.5px;font-weight:700;letter-spacing:.1em;color:var(--accent-dark)}
/* 점 개수가 바뀔 때 글줄이 위아래로 출렁이던 원인:
   빈 inline-block 은 줄상자가 없어서 baseline 이 '아래 모서리'가 된다. 글자가 하나 들어가는 순간
   baseline 이 튀면서 줄 전체가 흔들린다. 폭·높이를 고정하고 bottom 정렬로 baseline 계산에서 뺀다. */
.drum b{display:inline-block;width:2.1em;height:1.2em;line-height:1.2;text-align:left;
  vertical-align:bottom;white-space:nowrap;overflow:hidden}   /* nowrap 이 없으면 '...' 이 두 줄로 접힌다 */

/* --- 동전 --- */
.coin-stage{position:relative;width:200px;height:216px;display:grid;place-items:center;perspective:900px}
.coin-shadow{
  position:absolute;left:50%;bottom:10px;width:116px;height:18px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(24,24,27,.42),rgba(24,24,27,0) 70%);
  transform:translateX(-50%);
}
/* will-change:filter 를 쓰면 안 된다 — filter 를 실제로 건 것처럼 3D 문맥이 평면으로 눌려
   backface-visibility 가 죽고 뒷면이 영영 안 보인다(앞면만 나오던 진짜 원인). */
.coin3d{position:relative;width:128px;height:128px;transform-style:preserve-3d;will-change:transform}
.coin-face{
  position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;backface-visibility:hidden;
  font-size:40px;font-weight:800;letter-spacing:-.03em;color:#7A4B05;
  background:radial-gradient(circle at 34% 28%,#FDF0CE,#E8B54B 56%,#B87F1B);
  box-shadow:inset 0 -7px 16px rgba(120,74,5,.3),inset 0 7px 13px rgba(255,255,255,.55),0 14px 28px -16px rgba(0,0,0,.6);
}
.coin-face::after{content:"";position:absolute;inset:8px;border-radius:50%;border:2px dashed rgba(122,75,5,.26)}
.coin-face.tails{transform:rotateX(180deg);background:radial-gradient(circle at 34% 28%,#FAE7C1,#DFA93C 56%,#A9741A)}
.coin3d.landed .coin-face{animation:coinGlow .8s ease-out}
@keyframes coinGlow{
  0%{box-shadow:0 0 0 0 rgba(201,127,18,.85),inset 0 -7px 16px rgba(120,74,5,.3)}
  100%{box-shadow:0 0 0 30px rgba(201,127,18,0),inset 0 -7px 16px rgba(120,74,5,.3)}
}

.face-cards{display:flex;gap:10px}
.face-card{
  width:76px;padding:12px 8px;border-radius:14px;border:1.5px solid var(--border);background:var(--card);
  display:flex;flex-direction:column;align-items:center;gap:2px;transition:border-color .25s,background .25s,transform .25s;
}
.face-card b{font-size:24px;color:var(--faint);transition:color .25s}
.face-card small{font-size:11px;color:var(--muted);font-family:var(--mono)}
.face-card.on{border-color:#C97F12;background:#FBF0DE;transform:translateY(-3px)}
.face-card.on b{color:#9A600C}

.chip-list{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.chip-item{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;
  border:1px solid var(--border);background:var(--card);font-size:13px;font-weight:700;color:var(--ink-2);
  transition:border-color .25s,background .25s,color .25s;
}
.chip-item i{width:9px;height:9px;border-radius:3px;display:block}
.chip-item.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark)}

/* --- 룰렛 --- */
.roulette-wrap{position:relative;width:min(340px,78vw);aspect-ratio:1;filter:drop-shadow(0 20px 28px rgba(24,24,27,.3))}
.roulette{
  position:relative;width:100%;height:100%;border-radius:50%;will-change:transform;
  box-shadow:inset 0 0 0 7px #fff,inset 0 0 0 9px rgba(24,24,27,.13),inset 0 0 30px -6px rgba(0,0,0,.35);
}
/* 휠과 같이 돌되 글자만 반대로 세운다 — 멈춘 각도가 어디든 읽힌다. */
.r-label{
  position:absolute;transform:translate(-50%,-50%) rotate(calc(var(--rot,0) * -1deg));
  color:#fff;font-size:15px;font-weight:800;
  letter-spacing:-.02em;text-shadow:0 1px 3px rgba(0,0,0,.45);white-space:nowrap;max-width:44%;
  overflow:hidden;text-overflow:ellipsis;pointer-events:none;
}
.r-peg{
  position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.45);
}
.r-win{position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;animation:rwin 1.6s ease-out 2}
@keyframes rwin{0%,100%{opacity:0}45%{opacity:1}}
.roulette-hub{
  position:absolute;left:50%;top:50%;width:54px;height:54px;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle at 36% 30%,#fff,#E7E7EE);
  box-shadow:0 5px 12px rgba(0,0,0,.3);display:grid;place-items:center;font-size:21px;z-index:3;
}
.roulette-pin{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);transform-origin:50% 5px;
  width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;
  border-top:25px solid var(--accent-dark);z-index:5;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));
}

/* --- 사다리 --- */
.ladder-svg{width:100%;height:330px;overflow:visible}
.l-rung{opacity:0;transform-box:fill-box;transform-origin:center}
.l-rung.on{animation:rungIn .26s ease-out var(--d) both}
@keyframes rungIn{from{opacity:0;transform:scaleX(.15)}to{opacity:1;transform:scaleX(1)}}
.l-runner{transition:r .18s}
.l-runner.turn{r:9}
.l-prize{transform-box:fill-box;transform-origin:center}
.l-prize.lit{animation:platePop .55s cubic-bezier(.2,1.3,.4,1)}
@keyframes platePop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}

/* --- 제비뽑기 --- */
.cup{position:relative;width:min(330px,92%);display:flex;flex-direction:column;align-items:center}
/* 컵보다 넓어지면 안 된다 — max-width 가 있어야 flex-shrink 가 걸린다(참가자 10명이면 삐져나왔다). */
.stick-row{display:flex;gap:7px;justify-content:center;align-items:flex-end;min-height:132px;max-width:100%}
.stick{
  width:23px;height:120px;border-radius:7px 7px 3px 3px;cursor:pointer;position:relative;
  background:linear-gradient(100deg,#F5E5CA 0%,#E2C89F 46%,#C9A776 100%);
  border:1px solid #C4A374;box-shadow:0 7px 13px -9px rgba(0,0,0,.55);
  transition:filter .25s,opacity .3s,box-shadow .25s;will-change:transform;
}
.stick:hover:not([disabled]){filter:brightness(1.06)}
.stick[disabled]{cursor:default}
.stick.pulled{z-index:3}
.stick.hit{
  background:linear-gradient(100deg,#FFE2D9,#F6A48F 58%,#E4826A);border-color:#D9705B;
  box-shadow:0 0 0 3px rgba(217,112,91,.28),0 12px 20px -10px rgba(217,112,91,.95);
}
.stick.miss{filter:grayscale(.6) brightness(.98);opacity:.55}
.stick .tip{
  position:absolute;left:-5px;right:-5px;top:7px;text-align:center;font-size:10.5px;font-weight:800;
  color:#7A4B05;font-family:var(--mono);opacity:0;transition:opacity .25s;
}
.stick.done .tip{opacity:1}
.stick.hit .tip{color:#7A271A}
.cup-body{
  position:relative;margin-top:-48px;width:100%;height:98px;border-radius:9px 9px 24px 24px;z-index:2;
  background:linear-gradient(180deg,#33405C 0%,#1B2438 100%);color:rgba(255,255,255,.72);
  display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.28em;
  box-shadow:inset 0 9px 15px rgba(255,255,255,.09),inset 0 -14px 20px rgba(0,0,0,.35),0 18px 30px -20px rgba(0,0,0,.8);
}

/* --- 순서 정하기: 400m 트랙 --- */
.track-svg{width:100%;height:100%;max-height:336px;display:block;margin:0 auto}
.track-field rect{fill:#EDF4EF;stroke:#DCE8E0;stroke-width:2}
.track-lane{fill:none;stroke:#E8E8ED;stroke-linecap:round}
.track-finish{stroke:#18181B;stroke-width:3;stroke-dasharray:5 5;opacity:.55}
.runner{filter:drop-shadow(0 3px 5px rgba(24,24,27,.35))}
.runner.in circle{animation:runnerIn .6s cubic-bezier(.2,1.4,.35,1)}
@keyframes runnerIn{0%{r:9}45%{r:13}100%{r:9}}

/* --- 결과 목록(사다리 · 순서) --- */
.result-big{font-size:30px;font-weight:800;letter-spacing:-.03em;text-align:center;color:var(--accent-dark)}
.order-list{display:flex;flex-direction:column;gap:8px;width:100%;max-width:340px}
.order-item{
  display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:12px;
  background:var(--accent-soft);font-weight:700;font-size:15px;
  animation:pop .3s cubic-bezier(.2,1.2,.4,1) backwards;
}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.order-item .rank{
  width:26px;height:26px;flex:none;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:800;font-family:var(--mono);
}
.order-item .medal{font-size:19px;transition:opacity .25s}
.order-item .prize{margin-left:auto;color:var(--faint);font-weight:800}
.order-item .prize.reveal{color:var(--accent-dark);animation:pop .38s cubic-bezier(.2,1.35,.4,1)}
.order-item.win{background:linear-gradient(100deg,#FFF3D6,#FDE3A7);box-shadow:inset 0 0 0 2px rgba(201,127,18,.4)}
.order-item.spin b{color:var(--faint)}
.order-item.spin .medal{opacity:0}
.order-item.locked{animation:lockIn .42s cubic-bezier(.2,1.4,.35,1)}
@keyframes lockIn{0%{transform:scale(1)}35%{transform:scale(1.045)}100%{transform:scale(1)}}
.order-item.first{
  background:linear-gradient(100deg,#FFF3D6,#FDE3A7);
  box-shadow:inset 0 0 0 2px rgba(201,127,18,.45),0 12px 24px -16px rgba(201,127,18,.9);
}

@media (max-width:560px){
  .opt-grid{grid-template-columns:1fr}
  .stick{width:19px;height:106px}
  .stick-row{gap:5px;min-height:118px}
  .cup-body{height:86px;margin-top:-44px;letter-spacing:.18em}
  .coin-stage{width:180px;height:196px}
  .coin3d{width:112px;height:112px}
  .coin-face{font-size:35px}
}

@media (prefers-reduced-motion:reduce){
  .tool-stage.tense,.stage-fx.shake,.l-rung.on,.r-win,.coin3d.landed .coin-face{animation:none}
  .l-rung{opacity:1}
}

/* ---------- 대기 연출 ----------
   0 모집 → 1 진행 → 2 광고(가림) → 3 공개 */
.wait{display:grid;gap:26px;align-items:center;padding:16px 0 10px}
@media (min-width:900px){.wait{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;padding:26px 0 16px}}
.wait-host{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.wait-face{width:150px;height:150px;filter:drop-shadow(0 12px 24px rgba(24,24,27,.16));animation:bob 2.2s ease-in-out infinite}
@media (max-width:520px){.wait-face{width:112px;height:112px}}
.bubble{
  position:relative;background:var(--card);border:1.5px solid var(--border);border-radius:18px;
  padding:16px 20px;font-size:clamp(17px,2vw,21px);font-weight:700;letter-spacing:-.02em;line-height:1.45;
  min-height:60px;min-width:min(340px,100%);max-width:420px;color:var(--ink);
  transition:opacity .25s;box-shadow:0 10px 26px -18px rgba(24,24,27,.35);
}
.bubble::before{
  content:"";position:absolute;left:50%;top:-9px;width:16px;height:16px;transform:translateX(-50%) rotate(45deg);
  background:var(--card);border-left:1.5px solid var(--border);border-top:1.5px solid var(--border);
}
.bubble.hide{opacity:0}
.bubble .caret{display:inline-block;width:2px;height:1em;background:var(--accent);margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.wait-sub{font-size:13px;color:var(--muted)}

/* 장면은 scene.js 가 캔버스에 그린다. 박스 크기만 여기서 정한다(가로가 넓을수록 무대가 넓어진다). */
.wait-scene{
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  height:clamp(280px,34vw,460px);box-shadow:0 18px 40px -28px rgba(24,24,27,.45);
}
.wait-canvas{width:100%;height:100%;display:block}

/* ---------- 전면 광고(인터스티셜) ---------- */
.inter{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;
  background:rgba(11,18,38,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:fadein .25s ease-out;
}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.inter-box{
  width:min(420px,100%);background:var(--card);border-radius:22px;padding:18px 18px 16px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8);display:flex;flex-direction:column;gap:14px;
}
.inter-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);font-family:var(--mono);letter-spacing:.06em}
.inter-ad{
  width:100%;aspect-ratio:300/250;border-radius:12px;border:1px dashed var(--border);background:var(--track);
  display:grid;place-items:center;color:var(--faint);font-size:12px;font-family:var(--mono);letter-spacing:.08em;text-align:center;line-height:1.8;
}
.inter-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.inter-foot .sub{font-size:13px}
.inter .btn[disabled]{opacity:.45}

/* ---------- Loading (공유 링크로 열 때 등 짧은 로딩) ---------- */
.loading{display:flex;flex-direction:column;align-items:center;gap:18px;padding:56px 20px;text-align:center}
.loading img{width:104px;height:104px;animation:bob 1.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.loading .msg{font-size:16px;font-weight:700;min-height:26px}
.loading .sub{font-size:13.5px}
.progress{width:min(280px,80%);height:5px;border-radius:999px;background:var(--track);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);border-radius:999px;
  animation:slide 1.5s ease-in-out infinite;width:42%}
@keyframes slide{0%{margin-left:-42%}100%{margin-left:100%}}
.skeleton{background:linear-gradient(90deg,var(--track),#F8F8FB,var(--track));
  background-size:200% 100%;animation:shimmer 1.2s linear infinite;border-radius:8px}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- Notice / error ---------- */
.notice{border-radius:var(--radius);padding:18px 20px;line-height:1.65;font-size:14.5px}
.notice-warn{background:#FEF3F2;border:1px solid #FDA29B;color:#7A271A}
.notice-warn b{display:block;font-size:15.5px;margin-bottom:6px}
.notice-info{background:var(--accent-soft);color:var(--ink-2)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);z-index:60;
  background:var(--navy);color:#fff;padding:12px 20px;border-radius:999px;font-size:14px;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100% - 32px);text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Footer ---------- */
.sitefoot{
  border-top:1px solid var(--line);padding:26px 18px 34px;text-align:center;
  font-size:12.5px;color:var(--muted);line-height:1.7;
}
.sitefoot p{max-width:720px;margin:0 auto}
.sitefoot-links{display:flex;gap:16px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.sitefoot-links a{color:var(--ink-2);font-weight:600}
.sitefoot-links a:hover{color:var(--accent-dark)}
.sitefoot .copy{margin-top:12px;font-size:11px;color:var(--faint)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- 피드 · 랭킹 ---------- */
.fh{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fh .more{color:var(--accent);font-weight:700;font-size:14px}
.fc-list{display:flex;flex-direction:column;gap:10px}
.fc{
  display:block;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.fc:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 14px 26px -20px var(--accent)}
.fc.sk{pointer-events:none}
.fc-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.fc-views{margin-left:auto;font-size:11.5px;color:var(--faint)}
.rank-badge{
  width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:800;
  background:var(--track);color:var(--muted);
}
.rank-badge.top{background:var(--accent);color:#fff}
.new-badge{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--orange);background:#FBEFE3;padding:3px 7px;border-radius:999px}
.fc-title{font-size:15.5px;font-weight:700;letter-spacing:-.02em;line-height:1.45;color:var(--ink)}
.fc-opts{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.fc-opt{font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--track);padding:5px 10px;border-radius:999px}
.fc-opt.win{background:var(--accent-soft);color:var(--accent-dark)}
.fc-opt.win b{margin-left:2px}
.fc-story{font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.fc-verdict{margin-top:10px;font-size:14px;font-weight:700;color:var(--accent-dark)}
.fc-verdict .crown{margin-right:4px}
.fc-meta{margin-top:8px;font-size:12px;color:var(--faint)}
.empty{padding:18px 6px;text-align:center}

/* 반응 */
.reacts{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.react{
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px 7px 9px;border-radius:999px;cursor:pointer;
  border:1px solid var(--border);background:var(--card);font-size:13px;font-weight:600;color:var(--ink-2);
  transition:border-color .15s,background .15s,transform .12s;
}
.react span{font-size:16px;line-height:1}
.react b{font-family:var(--mono);font-size:12px;color:var(--muted)}
.react:hover:not([disabled]){border-color:var(--accent);transform:translateY(-1px)}
.react.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-dark)}
.react.on b{color:var(--accent-dark)}
.publish{border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:var(--accent-soft)}

.all-teaser .fc{padding:12px 14px}
.all-teaser .fc-title{font-size:14px}
.all-teaser .fc-story{font-size:13.5px}
/* 모드 선택의 티저 띠 */
.teaser{margin-top:34px}
.teaser[data-tone="judge"]{--accent:#1F8A78;--accent-dark:#166B5C;--accent-soft:#E6F4F1}
.teaser-row{display:grid;gap:12px;margin-top:14px}
@media (min-width:720px){.teaser-row{grid-template-columns:repeat(3,1fr)}}

/* ---------- 기부 온도탑 ---------- */
.don-dot{font-size:32px;color:var(--orange);background:#FBEFE3}
.tower-card{text-align:center;padding:26px 22px 20px}
.tower-card .sub b{color:var(--orange)}
.don-pct{font-family:var(--mono);font-size:clamp(40px,6vw,56px);font-weight:700;letter-spacing:-.03em;color:var(--orange);line-height:1.1;margin-top:6px}
.tower{width:min(240px,100%);height:auto;margin:14px auto 6px;display:block;overflow:visible}
.tower text{font-family:var(--mono)}
.heart-in{transform-box:fill-box;transform-origin:center;animation:beat 1.6s ease-in-out infinite}
.heart-top.lit{transform-box:fill-box;transform-origin:center;animation:beat 1.2s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(220,109,38,.7))}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.14)}24%{transform:scale(1)}36%{transform:scale(1.1)}50%{transform:scale(1)}}
.don-since{font-size:11.5px;color:var(--faint)}
.don-steps{margin-top:14px}
@media (min-width:700px){.don-steps{grid-template-columns:1fr}}
.don-steps li{padding:14px 16px}

/* ---------- 기부 — 금액 카드(오른쪽 열) ---------- */
.don-card{padding:24px}
.don-label{font-size:13.5px;color:var(--muted);font-weight:700}
.don-amount{font-family:var(--mono);font-size:clamp(30px,5vw,42px);font-weight:700;letter-spacing:-.02em;margin-top:6px}
.don-amount span{font-size:.5em;color:var(--faint);font-weight:500}
.don-bar{height:12px;border-radius:999px;background:var(--track);overflow:hidden;margin-top:16px}
.don-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--orange),#F0A868);transition:width .9s cubic-bezier(.22,.9,.28,1)}
.don-note{margin-top:12px;font-size:13px;color:var(--muted);line-height:1.65}
.don-hist{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.don-hist li{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--line);font-size:14px}
.don-hist .don-amt{margin-left:auto;font-weight:700;color:var(--orange)}
.don-hist small{flex-basis:100%;color:var(--muted);font-size:12.5px}