/* 뽑기판 — 결정·추첨 게임 모음 */
:root{
  --bg:#fff8f1;--card:#fff;--ink:#1f1a17;--soft:#6b625b;--faint:#a39a92;--line:#f0e4d8;
  --pri:#f97316;--pri2:#ea580c;--tint:#fff1e6;--win:#16a34a;--lose:#9ca3af;
  --shadow:0 6px 24px rgba(120,60,10,.08);
}
@media(prefers-color-scheme:dark){:root{
  --bg:#17130f;--card:#211b16;--ink:#f5ede6;--soft:#c2b6ab;--faint:#8b7f74;--line:#3a2f26;
  --tint:#2b2017;--shadow:none;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;line-height:1.65;word-break:keep-all}
a{color:inherit}
.wrap{max-width:880px;margin:0 auto;padding:0 16px}

/* 헤더 */
header.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:58px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:21px;letter-spacing:-.03em;text-decoration:none}
.logo svg{flex:none}
.logo small{font-size:12px;font-weight:600;color:var(--faint);letter-spacing:0;margin-left:2px}
nav.tools{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 0 10px}
nav.tools::-webkit-scrollbar{display:none}
nav.tools a img{flex:none;width:20px;height:20px}
nav.tools a{display:flex;align-items:center;gap:5px;flex:none;padding:5px 12px 5px 8px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:14px;text-decoration:none;color:var(--soft)}
nav.tools a:hover{border-color:var(--pri);color:var(--pri2)}
nav.tools a.on{background:var(--pri);color:#fff;border-color:var(--pri)}

/* 본문 */
.crumb{font-size:13px;color:var(--faint);margin:18px 0 0}
.crumb a{text-decoration:none}
h1{font-size:28px;letter-spacing:-.025em;margin:6px 0 6px;line-height:1.3}
.lede{color:var(--soft);margin:0 0 18px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow)}
.panel+.panel{margin-top:14px}
label{font-size:14px;font-weight:700;display:block;margin:0 0 6px}
.hint{font-size:13px;color:var(--faint);font-weight:400}
textarea,input[type=text],input[type=number],select{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink)}
textarea{min-height:130px;resize:vertical;line-height:1.5}
textarea:focus,input:focus,select:focus{outline:2px solid var(--pri);outline-offset:-1px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:12px 0 0}
.row>*{flex:1 1 130px}
.check{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;margin:12px 0 0;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--pri)}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.btn{appearance:none;border:0;border-radius:14px;padding:12px 20px;font:inherit;font-weight:700;font-size:16px;cursor:pointer;background:var(--pri);color:#fff;transition:background .15s,transform .05s}
.btn:hover{background:var(--pri2)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--tint);color:var(--pri2)}
.btn.big{flex:1 1 100%;padding:16px;font-size:19px}
.btn:disabled{opacity:.5;cursor:default}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.chip{appearance:none;border:1px solid var(--line);background:var(--bg);color:var(--soft);border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer}
.chip:hover,.chip.on{border-color:var(--pri);color:var(--pri2)}
.err{color:#dc2626;font-size:14px;margin:8px 0 0;min-height:1em}

/* 결과 */
.result{margin:16px 0 0;padding:18px;border-radius:16px;background:var(--tint);text-align:center;display:none}
.result.on{display:block;animation:pop .35s ease}
.result small{display:block;font-size:13px;color:var(--soft)}
.result b{display:block;font-size:32px;line-height:1.25;letter-spacing:-.02em;color:var(--pri2);word-break:break-all}
@keyframes pop{0%{transform:scale(.92);opacity:0}100%{transform:scale(1);opacity:1}}
.history{margin:12px 0 0;font-size:13px;color:var(--faint)}
.history span{display:inline-block;margin:2px 4px 0 0;padding:2px 8px;border-radius:8px;background:var(--bg);border:1px solid var(--line)}

/* 돌림판 */
.wheelbox{position:relative;width:min(100%,420px);margin:6px auto 0}
.wheelbox canvas{display:block;width:100%;aspect-ratio:1/1}
.pointer{position:absolute;left:50%;top:-6px;transform:translateX(-50%);width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:30px solid var(--ink);filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));z-index:2}

/* 사다리 */
.ladscroll{overflow-x:auto;margin:14px -4px 0;padding:0 4px}
.ladstage{min-width:100%}
.ladrow{display:grid;gap:0}
.ladrow button,.ladrow div{margin:0 3px;padding:7px 2px;border-radius:10px;font:inherit;font-size:13px;font-weight:700;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ladrow button{appearance:none;border:2px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.ladrow button:hover{border-color:var(--pri)}
.ladrow button.done{color:#fff}
.ladrow div{border:2px dashed var(--line);color:var(--soft)}
.ladrow div.hit{border-style:solid;color:#fff}
#ladder{display:block;width:100%;height:360px}
.resultlist{margin:14px 0 0;padding:0;list-style:none}
.resultlist li{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line)}
.resultlist li b{color:var(--pri2)}

/* 제비 */
.slips{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;margin:14px 0 0}
.slip{appearance:none;aspect-ratio:3/4;border:0;border-radius:12px;font:inherit;font-weight:800;cursor:pointer;background:repeating-linear-gradient(45deg,var(--pri) 0 10px,var(--pri2) 10px 20px);color:#fff;font-size:20px;box-shadow:var(--shadow);transition:transform .25s}
.slip:hover{transform:translateY(-2px)}
.slip.open{background:var(--card);color:var(--soft);border:2px solid var(--line);font-size:15px;cursor:default;transform:none;word-break:break-all;padding:4px}
.slip.open.win{background:var(--win);color:#fff;border-color:var(--win)}

/* 주사위 */
.dice{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:16px 0 4px;min-height:84px}
.die{width:76px;height:76px;border-radius:16px;background:#fff;border:2px solid #e8dccf;box-shadow:0 4px 10px rgba(0,0,0,.12);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:10px;color:#1f1a17}
.die i{width:13px;height:13px;border-radius:50%;background:#1f1a17;place-self:center;visibility:hidden}
.die i.on{visibility:visible}
.die.one i.on{background:#dc2626;width:17px;height:17px}
.die.num{display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;padding:0}
.die.roll{animation:shake .12s linear infinite}
@keyframes shake{0%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}100%{transform:rotate(-8deg)}}

/* 동전 */
.coinwrap{perspective:900px;width:150px;height:150px;margin:18px auto 6px}
.coin{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.coin .face{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:800;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 0 0 0 8px rgba(255,255,255,.35),0 6px 16px rgba(0,0,0,.18)}
.coin .front{background:radial-gradient(circle at 35% 30%,#fde68a,#d97706);color:#7c2d12}
.coin .back{background:radial-gradient(circle at 35% 30%,#e5e7eb,#9ca3af);color:#374151;transform:rotateY(180deg)}
.stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px 0 0}
.stats div{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px 14px;font-size:14px;color:var(--soft)}
.stats b{color:var(--ink);font-size:18px;margin-left:4px}

/* 팀·순서 */
.teams{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:16px 0 0}
.team{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 14px;animation:pop .3s ease both}
.team h3{margin:0 0 6px;font-size:16px;color:var(--pri2)}
.team ul{margin:0;padding:0 0 0 18px}
.order{counter-reset:o;list-style:none;padding:0;margin:16px 0 0}
.order li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line);animation:pop .3s ease both}
.order li::before{counter-increment:o;content:counter(o);flex:none;width:30px;height:30px;border-radius:50%;background:var(--pri);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px}

/* 숫자 */
.balls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:16px 0 0}
.ball{min-width:52px;height:52px;padding:0 10px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;background:var(--pri);animation:pop .3s ease both}
.ball.y{background:#f5b301}.ball.b{background:#3b82f6}.ball.r{background:#ef4444}.ball.g{background:#6b7280}.ball.n{background:#22c55e}

/* 문서 */
.doc{margin:34px 0 0}
.doc h2{font-size:21px;letter-spacing:-.02em;margin:30px 0 10px}
.doc h3{font-size:17px;margin:20px 0 6px}
.doc p,.doc li{color:var(--soft)}
.doc ol,.doc ul{padding-left:22px}
.doc strong{color:var(--ink)}
details{border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:8px 0;background:var(--card)}
details summary{font-weight:700;cursor:pointer}
details p{margin:8px 0 0}

/* 카드 그리드 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin:14px 0 0}
.tcard{display:block;padding:16px;border-radius:18px;background:var(--card);border:1px solid var(--line);text-decoration:none;transition:border-color .15s,transform .15s}
.tcard:hover{border-color:var(--pri);transform:translateY(-2px)}
.tcard .ic{display:block;width:52px;height:52px;transition:transform .2s}
.tcard:hover .ic{transform:translateY(-2px) rotate(-4deg)}
.tcard b{display:block;margin:8px 0 2px;font-size:17px}
.tcard span{font-size:13px;color:var(--soft);line-height:1.5}
.grid.home{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:640px){.grid.home{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.grid.home{grid-template-columns:1fr}}
.related{margin:40px 0 0}
.related h2{font-size:19px;margin:0}

/* 홈 */
.hero{text-align:center;padding:34px 0 10px}
.hero h1{font-size:34px;margin:0 0 8px}
.hero h1 em{font-style:normal;color:var(--pri)}
.badges{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:12px 0 0}
.badges span{font-size:13px;padding:4px 10px;border-radius:999px;background:var(--tint);color:var(--pri2);font-weight:600}

/* 푸터 */
footer{margin:56px 0 0;padding:26px 0 40px;border-top:1px solid var(--line);font-size:13px;color:var(--faint);text-align:center}
footer nav{display:flex;gap:4px 12px;flex-wrap:wrap;justify-content:center;margin:0 0 12px}
footer nav a{text-decoration:none;color:var(--soft)}
footer .biz{line-height:1.8}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(10px);background:#1f1a17;color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;opacity:0;transition:.2s;pointer-events:none;z-index:50;max-width:90vw}
.toast.on{opacity:1;transform:translateX(-50%)}

@media(max-width:560px){
  h1{font-size:24px}
  .hero h1{font-size:28px}
  .panel{padding:14px;border-radius:16px}
  .result b{font-size:26px}
  .die{width:64px;height:64px;padding:8px}
  .die i{width:11px;height:11px}
}