/* 이달의 덥찬 (2026-11-01 개편) — 라우 핀볼 배너(public/img/dc/hero.webp, GPT) + 줄 받는 법 두 카드 + 일정 3단계.
   색은 배너 바탕(아이보리 #FDF0E2)·라원 레드·금색에 맞춘다 */
.dx{--dx-ivory:#FDF0E2;--dx-cream:#FFF8EE;--dx-gold:#E9AE2E;--dx-gold-d:#9A6800;--dx-red:#DC2A33;--dx-ink:#2B211B;--dx-muted:#8A7A6B;--dx-line:#F0DFC8;
  color:var(--dx-ink);display:grid;gap:1rem;padding-bottom:1rem}
.dx h1,.dx h2{font-family:'Jua',var(--font,sans-serif);font-weight:400;letter-spacing:-.01em}
.dx-admin{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.82rem;color:var(--dx-gold-d);background:#FFF6DA;border:1px dashed var(--dx-gold);border-radius:12px;padding:.5rem .8rem}

.dx-tabs{display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none}
.dx-tabs a{flex:none;display:grid;text-align:center;padding:.45rem .9rem;border-radius:999px;background:#fff;border:1px solid var(--dx-line);color:var(--dx-ink);font-weight:800;font-size:.86rem}
.dx-tabs a small{font-size:.68rem;color:var(--dx-muted);font-weight:700}
.dx-tabs a.on{background:var(--dx-red);border-color:var(--dx-red);color:#fff}
.dx-tabs a.on small{color:#ffe1e1}

/* ① 히어로 */
.dx-hero{position:relative;display:grid;grid-template-columns:minmax(0,46%) 1fr;min-height:430px;border-radius:26px;overflow:hidden;
  background:var(--dx-ivory) url(/img/dc/hero.webp) right center/auto 100% no-repeat;box-shadow:0 18px 40px rgba(154,104,0,.14);border:1px solid #F4E2C6}
.dx-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--dx-ivory) 38%,rgba(253,240,226,.85) 50%,rgba(253,240,226,0) 64%);pointer-events:none}
.dx-hero-txt{position:relative;padding:2rem 0 1.8rem 2.2rem;display:flex;flex-direction:column;gap:.9rem;justify-content:center}
.dx-hero-empty{grid-template-columns:minmax(0,52%) 1fr;min-height:340px}
.dx-hero-empty h1{font-size:2rem;margin:0}
.dx-hero-empty p{margin:0;color:var(--dx-muted)}
.dx-eyebrow{align-self:flex-start;font-size:.78rem;font-weight:800;color:var(--dx-gold-d);background:#fff;border:1px solid #F3D99A;border-radius:999px;padding:.28rem .75rem;box-shadow:0 2px 0 #F3D99A}
.dx-eyebrow em{font-style:normal;color:var(--dx-red)}
.dx-prize{display:flex;align-items:center;gap:1rem}
.dx-prize-img{position:relative;flex:none;width:240px;height:240px;border-radius:22px;background:#fff;border:3px solid #fff;box-shadow:0 0 0 2px var(--dx-gold),0 12px 24px rgba(154,104,0,.22);display:grid;place-items:center}
.dx-prize-img img{width:100%;height:100%;object-fit:contain;border-radius:18px}
.dx-prize-img>span:first-child{font-weight:800;color:var(--dx-gold-d);letter-spacing:.2em}
.dx-crown{position:absolute;top:-20px;left:-14px;font-size:2rem;transform:rotate(-18deg);filter:drop-shadow(0 3px 2px rgba(0,0,0,.15))}
.dx-prize h1{margin:0;font-size:2.05rem;line-height:1.15;word-break:keep-all}
.dx-prize h1 span{display:block;font-family:var(--font,sans-serif);font-size:.82rem;font-weight:800;color:var(--dx-red);letter-spacing:.02em;margin-bottom:.25rem}
.dx-when{margin:0;font-size:.98rem;line-height:1.6;color:#5A4A3C}
.dx-when .red{color:var(--dx-red)}
.dx-note{font-size:.8rem;color:var(--dx-muted)}
.dx-note a,.dx-plan li span a,.dx-rules li a{color:var(--dx-red);font-weight:700;text-decoration:underline}
.dx-count{align-self:flex-start;display:flex;align-items:baseline;gap:.6rem;background:var(--dx-ink);color:#fff;border-radius:14px;padding:.55rem 1rem}
.dx-count small{font-size:.78rem;color:#F3D99A;font-weight:700}
.dx-count b{font-family:var(--mono,monospace);font-size:1.35rem;letter-spacing:.02em}

/* ② 결과 */
.dx-result{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;border-radius:20px;padding:1.1rem 1.3rem;
  background:linear-gradient(120deg,#FFF6DA,#FFE9B0);border:2px solid var(--dx-gold)}
.dx-result.me{background:linear-gradient(120deg,#FFE3E3,#FFD1A8);border-color:var(--dx-red)}
.dx-result.wait{background:linear-gradient(120deg,#fff,#FFF1DC);border:2px dashed var(--dx-gold)}
.dx-result-b{display:grid;gap:.2rem}
.dx-result-b small{font-weight:800;color:var(--dx-gold-d);font-size:.8rem}
.dx-result-b b{font-family:'Jua',sans-serif;font-weight:400;font-size:1.55rem}
.dx-result-b span{color:#6B5A49;font-size:.88rem}
.dx-result-a{display:flex;gap:.5rem;flex-wrap:wrap}

/* ③ 숫자 */
.dx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.dx-stats>div{background:#fff;border:1px solid var(--dx-line);border-radius:18px;padding:.85rem 1rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .25rem}
.dx-stats small{flex-basis:100%;font-size:.76rem;font-weight:800;color:var(--dx-muted)}
.dx-stats b{font-family:var(--mono,monospace);font-size:1.7rem;line-height:1.1}
.dx-stats i{font-style:normal;font-size:.85rem;color:var(--dx-muted);font-weight:700}
.dx-stats em{flex-basis:100%;font-style:normal;font-size:.74rem;color:var(--dx-muted)}
.dx-stats .mine{background:linear-gradient(140deg,#FFF6DA,#fff);border-color:#F3D99A}
.dx-stats .mine a{font-weight:800;color:var(--dx-red);font-size:.9rem}
.dx-stats .odds b{color:var(--dx-red)}

/* ④ 줄 받는 법 */
.dx-ways{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.dx-way{position:relative;display:grid;grid-template-columns:110px 1fr;gap:1rem;align-items:start;background:#fff;border:1px solid var(--dx-line);border-radius:22px;padding:1.2rem;box-shadow:0 8px 22px rgba(43,33,27,.05)}
.dx-way.free{background:linear-gradient(160deg,#FFF0F0 0%,#fff 55%);border-color:#F7CFCF}
.dx-way.goods{background:linear-gradient(160deg,#FFF6DA 0%,#fff 55%);border-color:#F3D99A}
.dx-ic{width:110px;height:110px;object-fit:contain}
.dx-way-b{display:flex;flex-direction:column;gap:.45rem;min-width:0;align-self:stretch}
.dx-way-b h2{margin:0;font-size:1.45rem}
.dx-way-b p{margin:0;color:#6B5A49;font-size:.88rem;line-height:1.55}
.dx-tag{align-self:flex-start;font-size:.7rem;font-weight:800;color:#fff;background:var(--dx-red);border-radius:999px;padding:.12rem .55rem}
.dx-tag.gold{background:var(--dx-gold);color:var(--dx-ink)}
.dx-dots{display:flex;align-items:center;gap:.3rem;min-height:38px}
.dx-dots i{flex:1;max-width:26px;aspect-ratio:1;border-radius:50%;background:#F8E3E3;border:2px solid #F3C7C7}
.dx-dots i.on{background:radial-gradient(circle at 35% 30%,#FF8A8A,var(--dx-red) 60%,#A9141C);border-color:#A9141C;box-shadow:0 2px 4px rgba(220,42,51,.35)}
.dx-dots-t{font-size:.8rem;color:var(--dx-muted)}
.dx-dots-t b{color:var(--dx-red)}
.dx-btn{width:100%;justify-content:center;text-align:center;margin-top:auto}
.dx-btn.done{background:#F1EAE0;border-color:#E3D7C6;color:var(--dx-muted);cursor:default}
.dx-enter{display:contents}
.dx-qty{display:flex;align-items:center;gap:.4rem;min-height:38px}
.dx-qty output,.dx-qty span{line-height:1}
.dx-qty button{width:38px;height:38px;border-radius:12px;border:1px solid #E9CF8A;background:#fff;font-size:1.25rem;font-weight:800;color:var(--dx-ink);cursor:pointer}
.dx-qty output{min-width:2.2ch;text-align:center;font-family:var(--mono,monospace);font-size:1.4rem;font-weight:800}
.dx-qty span{color:var(--dx-muted);font-weight:700}
.dx-qty b{margin-left:auto;font-family:var(--mono,monospace);font-size:1.05rem;color:var(--dx-gold-d)}
.dx-bal{font-size:.8rem;color:var(--dx-muted)}
.dx-excl{font-size:.8rem;line-height:1.5;color:#8A4B00;background:#FFF3D6;border:1px dashed #E9C46A;border-radius:12px;padding:.55rem .7rem}
.dx-enter .check{font-size:.8rem;line-height:1.45}

/* ⑤ 일정 */
.dx-plan,.dx-past,.dx-rules{background:#fff;border:1px solid var(--dx-line);border-radius:22px;padding:1.2rem 1.3rem}
.dx-plan h2,.dx-past h2,.dx-rules h2{margin:0 0 .8rem;font-size:1.3rem}
.dx-plan ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;counter-reset:dx}
.dx-plan li{position:relative;display:grid;justify-items:center;text-align:center;gap:.2rem;padding:.9rem .6rem;border-radius:18px;background:var(--dx-cream);border:2px solid transparent}
.dx-plan li+li::before{content:"›";position:absolute;left:-.72rem;top:42%;font-size:1.4rem;color:#D8C2A3;font-weight:800}
.dx-plan li img{width:84px;height:84px;object-fit:contain}
.dx-plan li b{font-size:.95rem}
.dx-plan li span{font-size:.8rem;color:var(--dx-muted)}
.dx-plan li.now{background:#FFF6DA;border-color:var(--dx-gold)}
.dx-plan li.now::after{content:"지금";position:absolute;top:.55rem;right:.6rem;font-size:.66rem;font-weight:800;color:#fff;background:var(--dx-red);border-radius:999px;padding:.08rem .45rem}
.dx-plan li.done{opacity:.55}

.dx-past-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem}
.dx-past-i{display:grid;gap:.15rem;color:var(--dx-ink);font-size:.82rem}
.dx-past-i .im{aspect-ratio:1;border-radius:14px;background:var(--dx-cream);overflow:hidden;display:block}
.dx-past-i img{width:100%;height:100%;object-fit:contain}
.dx-past-i span{color:var(--dx-muted);font-size:.75rem}
.dx-rules ul{margin:0;padding-left:1.1rem;font-size:.86rem;line-height:1.6;color:#4E4034}
.dx-rules li{margin:.25rem 0}

/* 줄 랭킹 (2026-11-02) — 위 5명 막대 + 전체는 팝업 */
.dx-board{background:#fff;border:1px solid var(--dx-line);border-radius:22px;padding:1.2rem 1.3rem 1rem;box-shadow:0 8px 22px rgba(43,33,27,.05)}
.dx-board-h{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-bottom:.8rem}
.dx-board-h h2{margin:0;font-size:1.35rem}
.dx-board-h h2 small{font-family:var(--font,sans-serif);font-size:.7rem;font-weight:900;color:#fff;background:var(--dx-red);border-radius:6px;padding:.1rem .4rem;vertical-align:middle;margin-left:.2rem}
.dx-board-h span{display:block;font-size:.8rem;color:var(--dx-muted);font-weight:700;margin-top:.15rem}
.dx-all-btn{border:1px solid #EBCB6E;background:#FFF6DA;color:var(--dx-ink);border-radius:999px;padding:.45rem .95rem;font:inherit;font-size:.85rem;font-weight:800;cursor:pointer}
.dx-all-btn b{color:var(--dx-red)}
.dx-all-btn:hover{background:#FFEDB8}
.dx-board-empty{display:flex;align-items:center;gap:.9rem;padding:.6rem .2rem;color:var(--dx-muted);font-size:.9rem;line-height:1.5}
.dx-board-empty img{width:64px;height:64px;object-fit:contain}
.dx-board-empty p{margin:0}.dx-board-empty b{color:var(--dx-ink)}
.dx-top{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.dx-top li{display:grid;grid-template-columns:2.4rem minmax(0,1.1fr) minmax(0,1.6fr) 5.6rem;align-items:center;gap:.8rem;padding:.6rem .9rem;border-radius:14px;background:#FFFBF3;border:1px solid #F5E9D2}
.dx-top li.r1{background:linear-gradient(100deg,#FFF0C2,#FFFBF0);border-color:#EBCB6E}
.dx-top li.r2{background:linear-gradient(100deg,#F1F2F6,#FFFBF3)}
.dx-top li.r3{background:linear-gradient(100deg,#F8E6D6,#FFFBF3)}
.dx-rk{font-size:1.5rem;line-height:1;text-align:center;font-weight:900;color:var(--dx-muted);font-family:var(--mono,monospace)}
.dx-top li:nth-child(n+4) .dx-rk{font-size:1rem}
.dx-who{min-width:0;display:flex;flex-direction:column}
.dx-who b{font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dx-who small{font-size:.74rem;color:var(--dx-muted)}
.dx-meter{height:10px;border-radius:999px;background:#F3EADB;overflow:hidden}
.dx-meter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#E9AE2E,var(--dx-red))}
.dx-n{text-align:right;font-size:.8rem;color:var(--dx-muted);line-height:1.15}
.dx-n b{font-family:var(--mono,monospace);font-size:1.35rem;color:var(--dx-red);margin-right:.1rem}
.dx-n small{display:block;font-size:.72rem}
.dx-top li.me{box-shadow:inset 0 0 0 2px var(--dx-red)}
.dx-modal tr.me td{background:#FFF0F0;font-weight:800}
.dx-modal tr.me td:first-child{box-shadow:inset 3px 0 0 var(--dx-red)}
.dx-board em,.dx-modal em{font-style:normal;font-size:.66rem;font-weight:800;color:#fff;background:var(--dx-red);border-radius:999px;padding:.05rem .4rem;vertical-align:middle}
.dx-mine-row{display:flex;align-items:center;gap:.6rem;margin-top:.5rem;padding:.55rem .9rem;border-radius:14px;border:2px dashed #F3C7C7;background:#FFF5F5;font-size:.85rem}
.dx-mine-row b{color:var(--dx-red);font-size:1.05rem}
.dx-mine-row span:last-child{margin-left:auto;color:var(--dx-muted);font-weight:700}
.dx-list-n{margin:.6rem 0 0;font-size:.76rem;color:var(--dx-muted);line-height:1.5}

/* 전체 참여자 팝업 */
.dx-modal{width:min(560px,calc(100vw - 24px));max-height:min(80vh,720px);padding:0;border:0;border-radius:22px;background:#fff;box-shadow:0 24px 60px rgba(43,33,27,.3);color:var(--dx-ink)}
.dx-modal[open]{display:flex;flex-direction:column}
.dx-modal::backdrop{background:rgba(30,22,16,.55)}
.dx-modal-h{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.1rem .6rem;background:linear-gradient(120deg,#FFF1C4,#FFF8EE)}
.dx-modal-h b{display:block;font-family:'Jua',var(--font,sans-serif);font-size:1.35rem}
.dx-modal-h span{font-size:.78rem;color:var(--dx-muted);font-weight:700}
.dx-x{width:36px;height:36px;border-radius:50%;border:1px solid var(--dx-line);background:#fff;font-size:1rem;cursor:pointer}
.dx-find{margin:.7rem 1.1rem 0;padding:.55rem .8rem;border:1px solid var(--dx-line);border-radius:12px;font:inherit;font-size:.9rem}
.dx-jump{margin:.5rem 1.1rem 0;align-self:flex-start;border:0;background:none;color:var(--dx-red);font:inherit;font-size:.82rem;font-weight:800;cursor:pointer;padding:0}
.dx-modal-list{overflow:auto;margin:.6rem 1.1rem 0;border:1px solid #F3ECE2;border-radius:14px;flex:1;min-height:120px}
.dx-modal table{width:100%;border-collapse:collapse;font-size:.88rem}
.dx-modal th{position:sticky;top:0;background:#FBF6EE;font-size:.74rem;color:var(--dx-muted);font-weight:800;text-align:right;padding:.5rem .7rem;z-index:1}
.dx-modal td{padding:.5rem .7rem;border-top:1px solid #F3ECE2;text-align:right;font-variant-numeric:tabular-nums}
.dx-modal th:nth-child(-n+2),.dx-modal td:nth-child(-n+2){text-align:left}
.dx-modal td:first-child{width:3rem;font-weight:800;color:var(--dx-muted)}
.dx-modal tr.win td{background:#FFF6DA}
.dx-modal tr.hl td{background:#FFF0F0}
.dx-modal .dx-list-n{margin:.6rem 1.1rem 1rem}
@media (max-width:860px){
  .dx-hero{grid-template-columns:1fr;min-height:0;background:var(--dx-ivory)}
  .dx-hero::before{display:none}
  .dx-hero-txt{padding:0 1.1rem 1.2rem}
  .dx-hero-txt::before{content:"";display:block;order:-2;margin:0 -1.1rem .2rem;aspect-ratio:3/2;background:url(/img/dc/hero-768.webp) center/cover no-repeat}
  .dx-hero-txt .dx-prize{order:-1}   /* 배너 바로 아래 경품, 칩은 그 아래로 — 배너에 걸치면 글씨가 겹친다 */
  .dx-hero-empty .dx-hero-txt::before{aspect-ratio:3/2}
  /* 경품을 크게 — 사진은 화면 폭 가득(최대 340px), 이름은 그 아래 가운데 */
  .dx-prize{margin-top:.2rem;flex-direction:column;align-items:center;gap:.7rem;text-align:center}
  .dx-prize-img{width:min(100%,340px);height:auto;aspect-ratio:1;border-radius:22px}
  .dx-crown{top:-16px;left:-10px;font-size:2rem}
  .dx-prize h1{font-size:1.75rem;min-width:0}
  .dx-eyebrow{font-size:.74rem}
  .dx-count b{font-size:1.2rem}
  .dx-stats{grid-template-columns:1fr 1fr}
  .dx-ways{grid-template-columns:1fr}
  .dx-board{padding:1rem}
  .dx-top li{grid-template-columns:2rem minmax(0,1fr) 4.6rem;gap:.5rem .6rem;padding:.55rem .7rem}
  .dx-meter{grid-column:2/-1;grid-row:2;height:7px}
  .dx-rk{grid-row:1/3}
  .dx-n b{font-size:1.15rem}
  .dx-all-btn{width:100%}
  .dx-modal td,.dx-modal th{padding:.45rem .5rem}
  .dx-way{grid-template-columns:76px 1fr;padding:1rem}
  .dx-ic{width:76px;height:76px}
  .dx-plan ol{grid-template-columns:1fr}
  .dx-plan li{grid-template-columns:64px 1fr;justify-items:start;text-align:left;column-gap:.8rem;padding-right:2.8rem}
  .dx-plan li img{grid-row:span 2;width:60px;height:60px}
  .dx-plan li b{font-size:.88rem;letter-spacing:-.02em}
  .dx-plan li+li::before{display:none}
}