/* Cloudflare 크림 스킨 (slide-design.md 기준) */
:root {
  --paper: #fffbf5; --ink: #171717; --muted: #7a5a48; --soft: #6b5a50;
  --accent: #c2410c; --mark: #e85a0c; --raw1: #ff5f08; --raw2: #ff9910;
  --line: #efe4d8; --card: #ffffff; --peach: #fff1e6; --zone: rgba(255, 95, 8, 0.04);
  --ok: #15803d; --ng: #b91c1c;
}
* { box-sizing: border-box; }
html, body { word-break: keep-all; overflow-wrap: anywhere; margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Inter, system-ui, sans-serif; }
.bar { position: fixed; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--raw1), var(--raw2)); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.logo-text { font-weight: 800; letter-spacing: -.02em; color: var(--ink); }

/* ───────── 모바일 (참석자) ───────── */
body.mobile { min-height: 100dvh; }
.m-wrap { max-width: 480px; margin: 0 auto; padding: 18px 16px 40px; }
.m-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 18px; margin: 0 0 14px; }
.m-title { font-size: 24px; line-height: 1.35; margin: 6px 0 8px; letter-spacing: -.02em; }
.m-sub { font-size: 15px; line-height: 1.6; color: var(--soft); margin: 0 0 6px; }
.m-err { color: var(--ng); font-size: 14px; }
.m-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.m-form input { font: inherit; font-size: 17px; padding: 14px; border-radius: 12px; border: 1px solid #dccfc2; background: #fff; }
.m-form button, .m-btn { display: block; width: 100%; text-align: center; font: inherit; font-size: 17px; font-weight: 700; padding: 15px; border-radius: 12px;
  border: 0; background: var(--mark); color: #fff; text-decoration: none; margin-top: 8px; }
.m-btn.ghost { background: #fff; color: var(--ink); border: 1px solid #dccfc2; }
.s-item { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin: 0 0 12px; }
.s-item h2 { font-size: 18px; line-height: 1.45; margin: 6px 0 8px; }
.s-item h3 { font-size: 16px; color: var(--accent); margin: 12px 0 6px; }
.s-item ul { margin: 0; padding-left: 18px; line-height: 1.6; font-size: 15px; }
.s-ans, .s-mine { margin: 4px 0; font-size: 15px; }
.ok { color: var(--ok); font-weight: 700; } .ng { color: var(--ng); font-weight: 700; }

/* play 화면 */
.p-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.p-me { font-size: 14px; color: var(--soft); text-align: right; line-height: 1.35; }
.p-me b { color: var(--ink); font-size: 16px; }
.p-hello { font-size: 30px; line-height: 1.3; font-weight: 900; letter-spacing: -.03em; margin: 8px 0 4px; }
.p-hello em { font-style: normal; color: var(--mark); }
.p-company { font-size: 16px; color: var(--soft); }
.p-note { font-size: 13px; line-height: 1.6; color: var(--soft); background: var(--peach); border-radius: 12px; padding: 12px 14px; margin-top: 14px; }
.p-wait { text-align: center; color: var(--soft); font-size: 15px; margin-top: 18px; }
.p-q { font-size: 21px; line-height: 1.45; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 14px; }
.p-timer { height: 8px; border-radius: 99px; background: #f1e6da; overflow: hidden; margin: 6px 0 4px; }
.p-timer > i { display: block; height: 100%; background: linear-gradient(90deg, var(--raw1), var(--raw2)); transition: width .2s linear; }
.p-tsec { font-size: 13px; color: var(--soft); text-align: right; }
.p-opts { display: flex; flex-direction: column; gap: 10px; }
.p-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 12px 14px; border-radius: 14px; border: 2px solid #eadccf;
  background: #fff; font: inherit; font-size: 17px; font-weight: 600; text-align: left; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.p-opt .k { flex: 0 0 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--peach); color: var(--accent); font-weight: 800; }
.p-opt.sel { border-color: var(--mark); background: #fff6ef; }
.p-opt.right { border-color: var(--ok); background: #effaf2; }
.p-opt.wrong { border-color: var(--ng); background: #fdf0f0; }
.p-opt:disabled { opacity: 1; }
.p-submit { margin-top: 12px; }
.p-result { text-align: center; padding: 26px 10px; }
.p-result .big { font-size: 34px; font-weight: 900; letter-spacing: -.03em; }
.p-result .big.ok { color: var(--ok); } .p-result .big.ng { color: var(--ng); }
.p-result .pts { font-size: 18px; margin-top: 6px; color: var(--accent); font-weight: 700; }
.p-warn { border: 2px solid var(--mark); background: #fff6ef; }
.p-warn .icon { width: 44px; height: 44px; border-radius: 50%; background: var(--mark); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 26px; margin-bottom: 8px; }
.p-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.p-chips span { background: var(--peach); color: var(--accent); border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 700; }
/* AI에게 물어보세요 */
.ask { margin-top: 22px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 16px; }
.ask-title { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.ask-title::before { content: "AI"; display: inline-block; font-size: 11px; font-weight: 800; color: #fff; background: var(--mark); border-radius: 6px; padding: 2px 6px; margin-right: 8px; vertical-align: 2px; }
.ask-sub { font-size: 12px; color: var(--soft); margin-top: 4px; }
.ask-closed { font-size: 14px; color: var(--soft); background: var(--peach); border-radius: 12px; padding: 12px; margin-top: 12px; }
.ask-chips { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ask-chip { text-align: left; font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 12px; border: 1px solid #eadccf; background: var(--paper); color: var(--ink); }
.ask-chip::before { content: "Q. "; color: var(--accent); font-weight: 800; }
.ask-form { display: flex; gap: 8px; margin-top: 10px; }
.ask-form input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 12px; border-radius: 12px; border: 1px solid #dccfc2; }
.ask-form button { font: inherit; font-size: 15px; font-weight: 700; padding: 0 16px; border-radius: 12px; border: 0; background: var(--ink); color: #fff; }
.ask-form button:disabled { opacity: .5; }
.ask-item { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ask-q { font-size: 14px; font-weight: 700; } .ask-q::before { content: "Q. "; color: var(--accent); }
.ask-a { font-size: 15px; line-height: 1.65; margin-top: 6px; white-space: pre-wrap; }
.ask-wait { color: var(--soft); } .ask-err { color: var(--ng); }
.ask-meta { font-size: 12px; color: var(--soft); margin-top: 6px; } .ask-meta .hit { color: var(--ok); font-weight: 700; }
.p-conn { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 12px; padding: 6px 12px; border-radius: 99px; display: none; }

/* ───────── 발표 화면 (PC, 1920x1080 캔버스) ───────── */
body.present { overflow: hidden; background: #f3ece3; height: 100vh; }
.stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; background: var(--paper); overflow: hidden; }
.stage .bar { position: absolute; height: 12px; }
.st-head { position: absolute; left: 96px; right: 96px; top: 44px; display: flex; justify-content: space-between; align-items: center; }
.stage .eyebrow { font-size: 22px; }
.st-logo { height: 56px; display: block; } .st-head .logo-text { font-size: 34px; }
.st-foot { position: absolute; left: 96px; right: 96px; bottom: 40px; display: flex; justify-content: space-between; font-size: 22px; color: var(--soft); }
.st-body { position: absolute; left: 96px; right: 96px; top: 150px; bottom: 100px; }
.st-theme { font-size: 40px; font-weight: 800; color: var(--accent); letter-spacing: -.02em; margin: 0 0 18px; }
.st-title { font-size: 84px; line-height: 1.15; font-weight: 900; letter-spacing: -.035em; margin: 0; }
.st-title em { font-style: normal; color: var(--mark); }
.st-sub { font-size: 36px; line-height: 1.45; color: var(--soft); margin: 22px 0 0; }
.st-q { font-size: 64px; line-height: 1.25; font-weight: 800; letter-spacing: -.03em; margin: 30px 0 60px; max-width: 1420px; }
.st-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.st-opts.n5, .st-opts.n7 { grid-template-columns: 1fr 1fr 1fr; }
.st-opt { position: relative; background: #fff; border: 3px solid #eadccf; border-radius: 22px; padding: 26px 34px; display: flex; align-items: center; gap: 26px; overflow: hidden; min-height: 170px; }
.st-opt .k { flex: 0 0 64px; height: 64px; border-radius: 16px; background: var(--peach); color: var(--accent); display: grid; place-items: center; font-size: 34px; font-weight: 900; z-index: 1; }
.st-opt .t { font-size: 48px; font-weight: 700; letter-spacing: -.02em; z-index: 1; flex: 1; }
.st-opts.n7 .st-opt { min-height: 130px; } .st-opts.n7 .st-opt .t, .st-opts.n5 .st-opt .t { font-size: 34px; }
.st-opt .n { z-index: 1; text-align: right; line-height: 1.1; } .st-opt .n b { display: block; font-size: 34px; font-weight: 900; color: var(--ink); } .st-opt .n small { font-size: 20px; color: var(--soft); font-weight: 600; }
.st-opt .fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(232, 90, 12, .10); transition: width .6s ease; }
.st-opt.right { border-color: var(--mark); background: #fff6ef; }
.st-opt.right .k { background: var(--mark); color: #fff; }
.st-opt.right .fill { background: rgba(232, 90, 12, .22); }
.st-opt.dim { opacity: .55; }
.st-timer { position: absolute; right: 0; top: -10px; text-align: right; }
.st-timer .sec { transition: transform .2s ease, color .2s ease; transform-origin: right top; }
.st-timer.urgent .sec { color: #dc2626; transform: scale(1.7); animation: pulse 1s ease-in-out infinite; }
.st-timer.urgent .lbl { visibility: hidden; }
.st-timer.over .sec { color: var(--soft); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.st-optwrap { position: relative; }
.st-closed { z-index: 5; position: absolute; inset: -12px; border-radius: 26px; background: rgba(255, 251, 245, .96); display: none; align-items: center; justify-content: center; }
.st-closed.on { display: flex; }
.st-closed span { font-size: 220px; font-weight: 900; letter-spacing: .08em; color: var(--mark); }
.p-optwrap { position: relative; }
.p-closed { z-index: 5; position: absolute; inset: -6px; border-radius: 16px; background: rgba(255, 251, 245, .93); display: none; align-items: center; justify-content: center; }
.p-closed.on { display: flex; }
.p-closed span { font-size: 64px; font-weight: 900; color: var(--mark); letter-spacing: .06em; }
.p-tsec.urgent { font-size: 40px; font-weight: 900; color: #dc2626; text-align: center; animation: pulse 1s ease-in-out infinite; }
.st-timer .sec { font-size: 96px; font-weight: 900; color: var(--mark); line-height: 1; }
.st-timer .lbl { font-size: 24px; color: var(--soft); }
.st-reveal { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; }
.st-reveal .st-opts { grid-template-columns: 1fr; gap: 16px; }
.st-reveal .st-opt { min-height: 88px; padding: 16px 24px; }
.st-reveal .st-opt .t { font-size: 32px; } .st-reveal .st-opt .k { flex-basis: 52px; height: 52px; font-size: 28px; }
.st-reveal .st-q { font-size: 44px; margin: 0 0 28px; }
.st-exp { background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 40px 44px; align-self: start; }
.st-exp h2 { font-size: 54px; line-height: 1.2; margin: 10px 0 24px; letter-spacing: -.03em; color: var(--ink); }
.st-exp ul { margin: 0; padding-left: 34px; } .st-exp li { font-size: 32px; line-height: 1.5; margin: 0 0 16px; color: var(--ink); }
.st-demo { display: inline-block; margin-top: 18px; background: var(--mark); color: #fff; font-size: 30px; font-weight: 800; padding: 16px 28px; border-radius: 14px; text-decoration: none; }
.st-big { font-size: 220px; font-weight: 900; color: var(--mark); line-height: 1; letter-spacing: -.04em; }
.st-names { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; max-height: 250px; overflow: hidden; }
.st-names span { background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 10px 22px; font-size: 28px; font-weight: 600; }
.st-lobby { display: grid; grid-template-columns: 1fr 560px; gap: 60px; align-items: start; }
.st-join { background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 36px 40px; text-align: center; }
.st-qr { width: 420px; height: 420px; display: block; margin: 0 auto; }
.st-join .url { font-size: 36px; font-weight: 800; color: var(--accent); margin-top: 14px; }
.st-qrtip { font-size: 24px; line-height: 1.5; color: var(--soft); margin: 10px 0 0; }
.st-count { margin-top: 28px; display: flex; align-items: baseline; gap: 14px; }
.st-count b { font-size: 140px; font-weight: 900; color: var(--mark); line-height: 1; letter-spacing: -.04em; }
.st-count span { font-size: 40px; font-weight: 700; color: var(--soft); }
.st-bul { margin: 40px 0 0; padding: 0; list-style: none; }
.st-bul li { font-size: 44px; line-height: 1.45; margin: 0 0 22px; padding-left: 44px; position: relative; }
.st-bul li::before { content: ""; position: absolute; left: 0; top: 18px; width: 20px; height: 20px; border-radius: 6px; background: var(--mark); }
.st-safe { margin-top: 48px; background: #fff; border: 3px solid var(--mark); border-radius: 22px; padding: 32px 38px; font-size: 36px; line-height: 1.5; }
.st-rank { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; margin-top: 34px; }
.st-row { display: flex; align-items: center; gap: 22px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 26px; }
.st-row .r { width: 64px; font-size: 40px; font-weight: 900; color: var(--soft); }
.st-row .nm { flex: 1; font-size: 34px; font-weight: 700; } .st-row .nm small { display: block; font-size: 22px; font-weight: 500; color: var(--soft); }
.st-row .pt { font-size: 34px; font-weight: 800; color: var(--accent); }
.st-row.top { border: 3px solid var(--mark); background: #fff6ef; } .st-row.top .r { color: var(--mark); }
.st-prod { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.st-prod div { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px 24px; }
.st-prod b { display: block; font-size: 34px; color: var(--accent); margin-bottom: 8px; } .st-prod span { font-size: 24px; color: var(--soft); }
.st-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 24px; }
.st-stats div { background: var(--peach); border-radius: 22px; padding: 26px 28px; }
.st-stats b { display: block; font-size: 54px; font-weight: 900; color: var(--mark); line-height: 1.05; } .st-stats span { font-size: 24px; color: var(--soft); }
.st-overlay { position: absolute; inset: 0; background: rgba(255, 251, 245, .97); padding: 150px 96px 100px; }
.st-help { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); font-size: 18px; color: var(--soft); background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 8px 20px; display: none; }
.st-help.on { display: block; }
.st-conn { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 20px; padding: 8px 18px; border-radius: 99px; display: none; }

/* ───────── 관리자 ───────── */
body.admin { padding: 16px; }
.a-grid { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 1200px; margin: 0 auto; }
@media (min-width: 900px) { .a-grid { grid-template-columns: 1.2fr 1fr; } }
.a-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.a-card h2 { font-size: 16px; margin: 0 0 10px; }
.a-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.a-btns button, .a-btns a { font: inherit; font-size: 15px; font-weight: 700; padding: 12px 16px; border-radius: 10px; border: 1px solid #dccfc2; background: #fff; cursor: pointer; color: var(--ink); text-decoration: none; }
.a-btns .pri { background: var(--mark); color: #fff; border-color: var(--mark); font-size: 18px; padding: 14px 26px; }
.a-btns .warn { color: var(--ng); }
.a-steps { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow: auto; }
.a-steps li { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.a-steps li:hover { background: var(--zone); }
.a-steps li.cur { background: #fff1e6; font-weight: 700; }
.a-steps .tag { font-size: 11px; padding: 2px 6px; border-radius: 6px; background: #f1e6da; color: var(--soft); flex: 0 0 auto; }
.a-steps .tag.core { background: var(--mark); color: #fff; }
.a-steps .done { color: var(--ok); font-size: 12px; }
.a-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; }
.a-kv b { color: var(--soft); font-weight: 500; }
.a-rank { font-size: 14px; line-height: 1.7; margin: 0; padding-left: 20px; }
.a-input { font: inherit; padding: 10px; border-radius: 8px; border: 1px solid #dccfc2; min-width: 240px; }
.a-log { font-size: 12px; color: var(--ng); white-space: pre-wrap; }

/* 클로징 구성도 */
.arch-title { font-size: 52px; font-weight: 900; letter-spacing: -.03em; margin: 0; line-height: 1.2; }
.arch-title em { font-style: normal; color: var(--mark); }
.arch { position: absolute; left: 0; top: 0; width: 1728px; height: 830px; }
.arch-svg { position: absolute; left: 0; top: 0; }
.arch-svg .zone { fill: rgba(255, 95, 8, 0.04); stroke: rgba(232, 90, 12, 0.35); stroke-width: 2; stroke-dasharray: 10 8; }
.arch-svg .al { stroke: #e85a0c; stroke-width: 3; }
.arch-svg .al.flow { stroke-dasharray: 10 8; animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -36; } }
.zone-label { position: absolute; left: 356px; top: 124px; font-size: 22px; font-weight: 800; color: var(--accent); letter-spacing: .02em; }
.an { position: absolute; background: #fff; border: 2px solid var(--mark); border-radius: 18px; padding: 18px 22px; display: flex; flex-direction: column; justify-content: center; gap: 6px; box-shadow: 0 4px 14px rgba(120, 60, 20, .06); }
.an b { font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.an span { font-size: 20px; color: var(--soft); line-height: 1.35; }
.an.client { border: 2px solid #d9cbbd; background: var(--paper); }
.an.core { background: #fff6ef; border-width: 3px; }
.an.core b { font-size: 40px; color: var(--mark); }
.arch-stats { position: absolute; left: 1470px; top: 110px; width: 258px; height: 710px; display: flex; flex-direction: column; gap: 14px; }
.arch-stats div { flex: 1; background: var(--peach); border-radius: 20px; padding: 18px 22px; display: flex; flex-direction: column; justify-content: center; }
.arch-stats b { font-size: 56px; font-weight: 900; color: var(--mark); line-height: 1.05; letter-spacing: -.03em; }
.arch-stats span { font-size: 20px; color: var(--soft); margin-top: 4px; }

/* 첫 페이지 */
body.landing { min-height: 100vh; display: flex; align-items: center; }
.l-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 48px; display: grid; grid-template-columns: 1fr 460px; gap: 64px; align-items: center; }
.l-logo { height: 52px; display: block; margin-bottom: 36px; }
.l-ev { font-size: 15px; } .l-theme { font-size: 28px; font-weight: 800; color: var(--accent); margin: 10px 0 14px; }
.l-title { font-size: 64px; line-height: 1.15; font-weight: 900; letter-spacing: -.035em; margin: 0; }
.l-sub { font-size: 20px; line-height: 1.6; color: var(--soft); margin-top: 20px; }
.l-right { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 32px; text-align: center; }
.l-qr { width: 100%; max-width: 396px; display: block; margin: 0 auto; }
.l-url { font-size: 26px; font-weight: 800; color: var(--accent); margin-top: 12px; }
.l-mobile, .l-mtitle { display: none; }
.l-mtitle { font-size: 26px; margin: 4px 0 0; }
@media (max-width: 820px) {
  body.landing { align-items: flex-start; }
  .l-wrap { grid-template-columns: 1fr; padding: 24px 18px; gap: 18px; }
  .l-logo { height: 30px; margin-bottom: 18px; }
  .l-title, .l-sub, .l-right { display: none; } .l-theme { font-size: 18px; } .l-mtitle { display: block; }
  .l-mobile { display: flex; }
}

/* 문제별 시상대 */
.pd-wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; height: 100%; padding-top: 10px; }
.pd-h { font-size: 40px; font-weight: 900; letter-spacing: -.02em; margin-bottom: 24px; }
.pd-h span { display: block; font-size: 22px; font-weight: 600; color: var(--soft); margin-top: 6px; }
.pd-stage { display: flex; align-items: flex-end; justify-content: center; gap: 18px; height: 640px; }
.pd-col { width: 280px; display: flex; flex-direction: column; align-items: center; text-align: center; animation: rise .6s ease both; }
.pd-1 { animation-delay: .5s; } .pd-2 { animation-delay: .25s; } .pd-3 { animation-delay: 0s; }
@keyframes rise { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
.pd-name { font-size: 40px; font-weight: 900; letter-spacing: -.02em; }
.pd-co { font-size: 22px; color: var(--soft); min-height: 30px; }
.pd-meta { font-size: 22px; font-weight: 700; color: var(--accent); margin: 6px 0 14px; min-height: 30px; }
.pd-block { width: 100%; border-radius: 20px 20px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 18px; }
.pd-block span { font-size: 96px; font-weight: 900; color: #fff; line-height: 1; }
.pd-1 .pd-block { height: 330px; background: linear-gradient(180deg, #ff9910, #e85a0c); }
.pd-2 .pd-block { height: 240px; background: linear-gradient(180deg, #f4b37a, #e08a4a); }
.pd-3 .pd-block { height: 170px; background: linear-gradient(180deg, #e9c9ab, #cfa27c); }
.pd-1 .pd-name { font-size: 48px; color: var(--mark); }
.pd-empty .pd-block { opacity: .35; }
.cr-row { display: flex; align-items: center; gap: 22px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 26px; margin-bottom: 14px; }
.cr-row .r { width: 56px; font-size: 40px; font-weight: 900; color: var(--soft); }
.cr-row .nm { flex: 1; font-size: 34px; font-weight: 800; } .cr-row .nm small { display: block; font-size: 20px; font-weight: 500; color: var(--soft); }
.cr-row .pt { font-size: 34px; font-weight: 900; color: var(--accent); }
.cr-row.top { border: 3px solid var(--mark); background: #fff6ef; } .cr-row.top .r { color: var(--mark); }

/* 참석자 명단 */
.r-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.r-table th { text-align: left; font-size: 12px; color: var(--soft); font-weight: 600; padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.r-table td { padding: 8px; border-bottom: 1px solid #f3ebe2; vertical-align: middle; }
.r-table tr:hover td { background: var(--zone); }
.r-act { white-space: nowrap; } .r-act button { font: inherit; font-size: 12px; padding: 5px 8px; border-radius: 7px; border: 1px solid #dccfc2; background: #fff; cursor: pointer; margin-right: 3px; }
.r-act button.warn { color: var(--ng); }
.r-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #d6a36f; margin-right: 6px; } .r-dot.on { background: var(--ok); } .r-dot.off { background: #d9cbbd; }
.ed.editing { outline: 2px solid var(--mark); border-radius: 4px; padding: 0 4px; background: #fff; }
.r-modal { position: fixed; inset: 0; background: rgba(23, 23, 23, .45); align-items: center; justify-content: center; z-index: 50; }
.r-box { background: #fff; border-radius: 16px; padding: 24px; text-align: center; max-width: 360px; }

.p-ot { flex: 1; }
.p-tags { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; margin-left: 8px; }
.p-tag { font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 99px; white-space: nowrap; color: #fff; }
.p-tag.ans { background: var(--ok); } .p-tag.ng { background: var(--ng); } .p-tag.mine { background: var(--mark); }

.st-rate { display: flex; align-items: baseline; gap: 14px; margin: 6px 0 4px; }
.st-rate b { font-size: 72px; font-weight: 900; color: var(--mark); letter-spacing: -.03em; line-height: 1; }
.st-rate span { font-size: 24px; color: var(--soft); font-weight: 600; }
.p-pct { font-size: 13px; font-weight: 800; color: var(--soft); margin-left: 6px; white-space: nowrap; }

/* 응답자 수 */
.st-meter { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 28px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 18px 30px; }
.mt-lbl { font-size: 34px; font-weight: 800; color: var(--soft); }
.mt-bar { flex: 1; height: 26px; background: #f1e6da; border-radius: 99px; overflow: hidden; }
.mt-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--raw1), var(--raw2)); border-radius: 99px; transition: width .4s ease; }
.mt-num { font-size: 40px; font-weight: 800; color: var(--soft); white-space: nowrap; }
.mt-num b { font-size: 72px; font-weight: 900; color: var(--mark); letter-spacing: -.03em; }

/* 하단 바: 남은 시간 + 응답 */
.st-q { max-width: none !important; }
.st-meter { padding: 14px 30px; gap: 24px; }
.mt-time { display: flex; align-items: baseline; gap: 10px; min-width: 300px; }
.mt-ic { font-size: 28px; font-weight: 800; color: var(--soft); }
.mt-time b { font-size: 84px; font-weight: 900; color: var(--mark); letter-spacing: -.03em; line-height: 1; min-width: 110px; text-align: right; transition: font-size .2s ease, color .2s ease; }
.mt-u { font-size: 34px; font-weight: 800; color: var(--soft); }
.mt-time.urgent b { font-size: 112px; color: #dc2626; animation: pulse 1s ease-in-out infinite; }
.mt-time.over b { color: var(--soft); }
.mt-sep { width: 2px; align-self: stretch; background: var(--line); }

/* 휴대폰 마감 표시: 시간 초과(빨강) / 응답 완료(초록) */
.p-closed.timeout span { color: #dc2626; font-size: 54px; }
.p-closed.done span { color: var(--ok); font-size: 50px; }
.p-result .big.timeout { color: #dc2626; }