/* 참가자 휴대폰 화면 */
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: calc(10px + var(--safe-t)) 20px 10px; background: var(--bg); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.who { font-size: 14px; color: var(--sub); text-align: right; }
.screen { width: 100%; max-width: 560px; margin: 0 auto; padding: 20px 20px calc(112px + var(--safe-b)); display: flex; flex-direction: column; gap: 20px; }
.screen.center { min-height: 100dvh; justify-content: center; padding-bottom: 40px; }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--accent); margin-bottom: -12px; }
h1 { font-size: 30px; font-weight: 900; line-height: 1.2; letter-spacing: -0.03em; }
h2 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
h2.gap { margin-top: 8px; }
.note { font-size: 15px; color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.inline { display: flex; gap: 8px; margin-top: 12px; }
.inline .field { flex: 1; }
.lab { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--sub); }

/* 하단 탭: 화면 아래 고정, 홈 인디케이터 위 */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(var(--n), 1fr); padding-bottom: var(--safe-b); background: var(--surface); border-top: 1px solid var(--line); }
.tabs button { min-height: 64px; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13px; color: var(--muted); cursor: pointer; }
.tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabs button[aria-current="page"] { color: var(--accent); font-weight: 700; }
.qbadge { position: fixed; top: calc(52px + var(--safe-t)); left: 50%; transform: translateX(-50%); z-index: 15; padding: 6px 12px; border-radius: var(--r-sm); background: var(--hot); color: var(--surface); font-size: 13px; font-weight: 600; }

/* 입장 */
.pin { width: 100%; min-height: 72px; text-align: center; font-size: 24px; font-weight: 700; letter-spacing: .18em; padding-left: .18em; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-variant-numeric: tabular-nums; }
.pin:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.terms { margin: 0; border-top: 1px solid var(--line); }
.terms div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.terms dt { font-size: 14px; font-weight: 700; }
.terms dd { margin: 0; font-size: 14px; color: var(--sub); }
.terms.short { list-style: none; padding: 0; }
.terms.short li { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.terms.short span { color: var(--sub); }
.more { margin-top: 8px; font-size: 14px; color: var(--muted); }
.more summary { cursor: pointer; padding: 10px 0; min-height: 44px; }
.check { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: 15px; cursor: pointer; }
.check input { width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }
.check small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.choice { display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; }
.choice span { display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-weight: 600; }
.choice small { font-weight: 400; font-size: 13px; color: var(--muted); }
.choice input:checked + span { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 15px; cursor: pointer; }

/* 홈 */
.notice { padding: 14px 16px; border-radius: var(--r); background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: 600; }
.notice.hot { background: var(--hot); }
.notice + .notice { margin-top: 8px; }
.notice .ntime { opacity: .8; font-weight: 500; margin-right: 4px; }
.npast { font-size: 14px; color: var(--muted); }
.npast summary { cursor: pointer; padding: 10px 0; min-height: 44px; }
.npast ul { margin: 0; padding: 0 0 0 4px; list-style: none; display: grid; gap: 6px; }
dialog.nmodal { width: min(92vw, 420px); padding: 24px 22px; border: 0; border-radius: var(--r-lg); background: var(--surface); color: var(--ink); }
dialog.nmodal::backdrop { background: rgba(20, 25, 26, .6); }
.nmodal .ntag, .ntoast .ntag { font-size: 14px; font-weight: 700; color: var(--hot); }
.nmodal .nbody { font-size: 20px; font-weight: 700; line-height: 1.45; margin: 0; word-break: keep-all; }
.ntoast { position: fixed; left: 12px; right: 12px; bottom: calc(76px + var(--safe-b)); z-index: 60; max-width: 540px; margin: 0 auto; display: grid; gap: 4px; text-align: left;
  padding: 14px 16px; border: 0; border-radius: var(--r); background: var(--ink); color: var(--surface); font: inherit; font-size: 16px; box-shadow: 0 8px 24px rgba(20, 25, 26, .25); animation: nup .25s ease-out both; }
.ntoast .ntag { color: var(--accent-soft, #9BD3B4); }
.ntoast.out { opacity: 0; transform: translateY(8px); transition: .2s; }
@keyframes nup { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .ntoast { animation: none; } }
.card { padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.card.ok { border-color: var(--accent); background: var(--accent-soft); }
.score .label { font-size: 15px; font-weight: 600; }
.live { font-size: 13px; color: var(--accent); font-weight: 600; }
.live::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.big { font-size: 56px; font-weight: 900; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.big small { font-size: 20px; font-weight: 600; margin-left: 2px; }
.stat { padding: 8px 0; }
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.timeline li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.timeline li.past { color: var(--muted); }
.timeline li.now { color: var(--accent); font-weight: 700; }
.timeline li.now span:first-child::before { content: "지금 "; font-size: 12px; }
.map { width: 100%; height: auto; border-radius: var(--r); }
.rank { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.rank li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); counter-increment: r; }
.rank li span::before { content: counter(r) "위  "; color: var(--muted); }

.score .pts { font-size: 20px; }
.chase { font-size: 15px; font-weight: 600; color: var(--sub); }
.card.score.lead { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.card.now { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.card.now .label { font-size: 14px; color: var(--stage-sub); }
.card.now .chase { color: var(--stage-sub); }
.card.now .nx { font-size: 20px; }
.card.now.hot { background: var(--hot); border-color: var(--hot); }
.card.now.hot .label, .card.now.hot .chase { color: var(--hot-soft); }
.prog { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.prog .bar { height: 8px; border-radius: 4px; background: var(--sunk); overflow: hidden; }
.prog .bar i { display: block; height: 100%; background: var(--accent); transition: width var(--d-reveal) var(--ease); }

/* 미션 */
.missions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mrow { width: 100%; min-height: 68px; display: grid; grid-template-columns: 1fr auto 20px; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); text-align: left; cursor: pointer; }
.mno { font-size: 15px; color: var(--muted); font-weight: 600; }
.mt { display: flex; flex-direction: column; gap: 2px; font-size: 17px; font-weight: 700; }
.mt small { font-size: 14px; font-weight: 500; color: var(--muted); }
.mt small.ok { color: var(--accent); font-weight: 600; }
.mt small.ok::before { content: "완료, "; }
.mp { font-size: 15px; font-weight: 700; color: var(--accent); }
.mrow.done { border-color: var(--accent); background: var(--accent-soft); }
.ms { font-size: 14px; color: var(--muted); text-align: right; }
.ms.ok { color: var(--accent); font-weight: 600; }
.ms.ok::before { content: "✓ "; }
.mrow svg, .back svg { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px 0 0; border: 0; background: none; font-size: 15px; color: var(--sub); cursor: pointer; margin-bottom: -8px; }
.empty { display: flex; flex-direction: column; gap: 6px; padding: 32px 20px; border: 1px dashed var(--line); border-radius: var(--r); text-align: center; background: var(--surface); }
.empty b { font-size: 16px; }
.empty span { font-size: 14px; color: var(--muted); }
.bingo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cell { aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: 16px; font-weight: 600; padding: 6px; cursor: pointer; }
.cell.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cell:disabled { cursor: default; color: var(--ink); }
.cell.on:disabled { color: var(--accent-ink); }
.cell.line { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); animation: glow var(--d-reveal) var(--ease) both; }
.cell.line:disabled { color: var(--gold-ink); }
@keyframes glow { from { transform: scale(.92); } to { transform: none; } }
.plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plist li { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 68px; padding: 10px 12px 10px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: 16px; font-weight: 600; }
.plist li.done { border-color: var(--accent); }
.plist small { display: block; font-size: 13px; font-weight: 500; color: var(--accent); }
.plist .btn { flex: none; }
.poses summary { min-height: 44px; display: flex; align-items: center; font-size: 15px; font-weight: 600; cursor: pointer; }
.poses p { font-size: 15px; padding: 6px 0; }
.stop h2 { margin: 0; }
.pillx { font-size: 13px; color: var(--muted); }
.pillx.ok { color: var(--accent); font-weight: 600; }
.q { padding-top: 12px; border-top: 1px solid var(--line); }
.q p { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.opts { display: grid; gap: 8px; }
.opt { min-height: 52px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: 16px; text-align: left; cursor: pointer; }
.opt.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 700; }
.opts.big .opt { min-height: 68px; font-size: 18px; text-align: center; }
.lockbox { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding-top: 4px; }

/* 사진 */
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: var(--r); background: var(--sunk); }
.seg button { min-height: 44px; border: 0; border-radius: var(--r-sm); background: none; font-size: 15px; font-weight: 600; color: var(--sub); cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(18, 20, 23, .12); }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ph { position: relative; padding: 0; border: 0; border-radius: var(--r-sm); overflow: hidden; background: var(--sunk); aspect-ratio: 1; cursor: pointer; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph span { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 6px 8px; font-size: 13px; color: #FEFEFE; text-align: left; background: rgba(18, 20, 23, .6); }
.sk { aspect-ratio: 1; border-radius: var(--r-sm); background: var(--sunk); }
.sk.tall { aspect-ratio: auto; height: 220px; }
.viewer { width: 100%; max-width: 560px; padding: 12px; border: 0; border-radius: var(--r); background: var(--ink); }
.viewer::backdrop { background: rgba(0, 0, 0, .7); }
.viewer img { width: 100%; border-radius: var(--r-sm); margin-bottom: 12px; }
.poll h2 { font-size: 22px; line-height: 1.35; margin: 0 0 4px; }
.poll .label { font-size: 14px; font-weight: 700; color: var(--accent); }
.opts.vs2 { grid-template-columns: 1fr auto 1fr; align-items: stretch; }
.opts.vs2 .opt { min-height: 140px; font-size: 18px; font-weight: 800; text-align: center; }
.opts.vs2 .opt:first-child { background: var(--accent-soft); }
.opts.vs2 .opt.on { background: var(--accent); color: var(--accent-ink); }
.vsx { align-self: center; font-size: 14px; font-weight: 800; color: var(--muted); }
.poll h2.emoji { font-size: 44px; text-align: center; }
/* 10초 게임 */
.game h2 { margin: 0; }
.tpad { width: 100%; min-height: 200px; margin-top: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--r); background: var(--ink); color: var(--surface); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.tpad.run { background: var(--accent); }
.tpad.done { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.tpad:disabled { background: var(--sunk); color: var(--muted); cursor: default; }
.tnum { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.tnum.blind { opacity: .6; }
.tsub { font-size: 15px; opacity: .85; }
.tries { padding-top: 8px; border-top: 1px solid var(--line); font-size: 15px; }
.spinner { width: 32px; height: 32px; margin: 8px auto; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(3, 1fr); } }
/* 이름표, 익명 게시판 */
.namecard .nm { font-size: 22px; }
.ta { min-height: 0; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.posts li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.posts li p { flex: 1; }
.posts li.mine { color: var(--accent); font-weight: 600; }

/* 글자 크게 */
html.bigtext body { zoom: 1.15; }
.aa { margin-left: 8px; min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 15px; font-weight: 800; color: var(--ink); cursor: pointer; }
html.bigtext .aa { background: var(--ink); color: var(--surface); }

/* 결과 공개 */
.results .pres { padding-top: 10px; border-top: 1px solid var(--line); font-size: 15px; display: flex; flex-direction: column; gap: 4px; }
.esub { font-size: 14px; font-weight: 700; color: var(--accent); margin-bottom: -12px; }

/* 2026-10-03 시뮬레이션 반영 */
/* 첫 화면: 행사 이름과 환영, 입장 단계 */
.welcome { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.welcome .wname { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.welcome .wsub { font-size: 17px; font-weight: 700; color: var(--accent); }
.welcome .wdate { font-size: 14px; color: var(--muted); }
.welcome .wmsg { margin-top: 8px; font-size: 15px; color: var(--sub); }
.stepno { font-size: 14px; font-weight: 700; color: var(--muted); margin-bottom: -12px; }
/* 비밀번호 네 칸: 입력은 한 칸이고 숫자를 칸에 그린다 */
.teaser { max-width: 920px; min-height: 100vh; min-height: 100dvh; justify-content: center; gap: 24px; padding: calc(28px + var(--safe-t)) max(16px, env(safe-area-inset-left, 0px)) calc(28px + var(--safe-b)); }
.teaser h1 { font-family: var(--f-display, var(--f)); font-size: clamp(26px, 5vw, 42px); text-align: center; }
.teaser video { display: block; width: 100%; max-height: 70vh; max-height: 70dvh; object-fit: contain; aspect-ratio: 16 / 9; background: var(--stage); border-radius: var(--r); }
.teaser-note { color: var(--sub); font-size: clamp(17px, 3vw, 22px); text-align: center; }
.op-preview { padding: calc(8px + var(--safe-t)) 16px 8px; background: var(--gold); color: var(--gold-ink); font-weight: 700; text-align: center; }

.kakao { display: block; padding: 12px 14px; border-radius: var(--r-sm); background: var(--ink); color: var(--surface); font-size: 15px; font-weight: 600; text-decoration: none; }
.chip.in { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); background: var(--sunk); border-color: var(--sunk); cursor: not-allowed; }
.chip.in small { font-size: 12px; }
/* 당첨 배너: 모든 탭 위 */
.pzbanner { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: calc(100% - 32px); margin: 12px 16px 0; padding: 14px 16px; border: 0; border-radius: var(--r); background: var(--gold); color: var(--gold-ink); text-align: left; cursor: pointer; }
.pzbanner b { font-size: 17px; }
.pzbanner span { font-size: 14px; }
/* 바텀시트 (시스템 입력창 대신) */
dialog.sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 560px; margin: 0 auto; padding: 20px 20px calc(20px + var(--safe-b)); border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface); color: var(--ink); }
dialog.sheet::backdrop { background: rgba(20, 25, 26, .5); }
.sheet-act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.linkbtn { background: none; border: 0; padding: 10px; color: var(--muted); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; justify-self: center; }
/* 마무리 */
.endcard .end-h { font-size: 17px; font-weight: 700; }
.endlist { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--sub); }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; }
small.wait { display: block; color: var(--hot); font-weight: 600; }
/* 줄바꿈 깨짐 방지: 시각과 짧은 버튼은 한 줄 */
.card.now .num, .timeline .num, .btn.sm, .namecard .btn { white-space: nowrap; }
html.bigtext .inline { flex-wrap: wrap; }
html.bigtext .inline .btn.sm { flex: 1 1 100%; }
html.bigtext .card.now .row { flex-wrap: wrap; }

/* 경품 본인 서명 */
.psinfo { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 0; }
.psinfo dt { font-size: 12px; color: var(--muted); }
.psinfo dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; }
.sigbox { position: relative; border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: #FFFFFF; }
.sigbox canvas { display: block; width: 100%; height: 180px; touch-action: none; }
.sighint { position: absolute; inset: 0; display: grid; place-items: center; color: #8A9391; font-size: 15px; pointer-events: none; }
.sighint[hidden] { display: none; }

dialog.morning-sheet { max-height: calc(100dvh - 20px); overflow-y: auto; }

.geo-map {position:relative;width:100%;aspect-ratio:1;background:#e1eadc;overflow:hidden;border-radius:12px;}
.geo-map>img {position:absolute;width:20%;height:20%;}
.geo-map>svg {position:absolute;inset:0;width:100%;height:100%;}
.geo-map svg text {font-family:inherit;}
.feature-card{padding:24px 20px}.candidate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.candidate{padding:0;border:2px solid transparent;border-radius:16px;overflow:hidden;background:var(--card);color:inherit}.candidate img{display:block;width:100%;height:136px;object-fit:cover}.candidate b,.candidate span{display:block;padding:10px;font-size:14px}.candidate.selected{border-color:var(--accent,#25664e)}.candidate:disabled{opacity:.55}.ox-choices{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}.ox-choices .btn{font-size:58px;height:120px;border-radius:24px}.ox-choices .selected{outline:3px solid var(--accent,#25664e);outline-offset:4px}.ox-answer{font-size:48px;font-weight:800}.result-row{display:flex;justify-content:space-between;gap:16px;padding:16px;border-bottom:1px solid var(--line)}.release-sheet h1{font-size:28px}.feature-card .inline{align-items:end}

/* 4차: 사진 올리기 버튼 두 개와 진행 띠 */
.picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.picker .btn { width: 100%; }
.picker.small .btn { min-height: 44px; padding: 0 12px; }
.plist li { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
.pickhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 15px; }
.pickhead small { color: var(--muted); }
.mgroup { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.mgrid { grid-template-columns: repeat(3, 1fr); }
.mthumb { display: flex; flex-direction: column; gap: 6px; }
.mthumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); background: var(--sunk); }
.mthumb .btn { width: 100%; min-height: 44px; font-size: 14px; }
.upbar { position: fixed; left: 12px; right: 12px; bottom: calc(76px + var(--safe-b)); z-index: 55; max-width: 540px; margin: 0 auto; display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--r); background: var(--ink); color: var(--surface); box-shadow: 0 8px 24px rgba(20, 25, 26, .25); animation: nup .25s ease-out both; }
.upbar-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 16px; }
.upbar-track { display: block; height: 6px; border-radius: 3px; background: rgba(253, 254, 253, .2); overflow: hidden; }
.upbar-track i { display: block; height: 100%; background: var(--accent-soft); transition: width var(--d-state) var(--ease); }
.upbar small { font-size: 13px; opacity: .85; }
.upbar.ok .upbar-track i { background: var(--gold); }
.upbar.hot { background: var(--hot); }
.upbar.hot .upbar-track i { background: var(--surface); }
/* 영상: 피드 표시와 보기 창 */
.vbadge { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(18, 20, 23, .62); }
.vbadge::after { content: ""; position: absolute; left: 11px; top: 8px; border-left: 9px solid #FEFEFE; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.viewer video { width: 100%; max-height: 70dvh; border-radius: var(--r-sm); margin-bottom: 12px; background: #000; }
/* 건배 점등: 금색 한 면이 천천히 켜졌다 꺼진다 */
.cheers { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--gold); color: var(--gold-ink); opacity: 0; transition: opacity .8s var(--ease); text-align: center; padding: 24px; }
.cheers.on { opacity: 1; }
.cheers-t { font-size: 72px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.cheers-s { font-size: 18px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .cheers { transition: opacity .3s linear !important; } }
/* 쓰레기 종류 카운터 */
.trash-total { flex-direction: row; justify-content: space-between; align-items: center; }
.trash-total .label { font-size: 15px; font-weight: 600; }
.trash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trash-cell { display: flex; flex-direction: column; gap: 6px; }
.trash-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
.trash-plus { position: relative; min-height: 112px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); text-align: left; cursor: pointer; touch-action: manipulation; transition: transform var(--d-tap) var(--ease), border-color var(--d-state); }
.trash-plus:active { transform: scale(.97); border-color: var(--accent); }
.trash-plus .tk { font-size: 16px; font-weight: 700; }
.trash-plus .tn { font-size: 40px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.trash-plus .tp { position: absolute; right: 14px; top: 14px; font-size: 14px; font-weight: 700; color: var(--accent); }
.trash-plus.pop .tn { animation: glow .3s var(--ease); }
.trash-minus { min-height: 44px; border: 0; border-radius: var(--r-sm); background: var(--sunk); color: var(--sub); font-size: 14px; cursor: pointer; }
.trash-minus:disabled { opacity: .45; cursor: default; }
/* 운영진 부르기, 귀가 버스, 나의 하루 */
.helpcard .help-now { font-size: 17px; }
.helpcard .help-now b { margin-right: 6px; }
.helpsheet fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.helpsheet legend { font-size: 14px; font-weight: 700; color: var(--sub); margin-bottom: 8px; }
.helpsheet .tables { grid-template-columns: repeat(6, 1fr); }
.helpsheet .reasons { grid-template-columns: 1fr 1fr; }
.helpsheet label { cursor: pointer; }
.helpsheet input { position: absolute; opacity: 0; }
.helpsheet label span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 15px; font-weight: 600; text-align: center; }
.helpsheet input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.helpsheet input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
dialog.helpsheet { max-height: calc(100dvh - 20px); overflow-y: auto; }
.busopts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.busopts button { min-height: 52px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.busopts button[aria-checked="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.busopts button:disabled { color: var(--muted); cursor: default; }
.busopts button[aria-checked="true"]:disabled { color: var(--accent-ink); opacity: .75; }
.mydaycard { background: var(--stage); border-color: var(--stage); color: var(--stage-ink); }
.mydaycard .label { font-size: 14px; color: var(--gold); font-weight: 700; }
.mydaycard .myday-h { font-size: 22px; font-weight: 800; }
.mydaycard .note { color: var(--stage-sub); }
dialog.mydaysheet { max-height: calc(100dvh - 12px); overflow-y: auto; }
.myday-frame { display: grid; place-items: center; min-height: 240px; }
.myday-img { width: 100%; border-radius: var(--r); box-shadow: 0 6px 20px rgba(20, 25, 26, .25); }

/* 행사 후 설문, 테마 토큰과 큰 글씨 설정을 그대로 따른다 */
.survey-page { gap: 24px; padding-bottom: 12px; }
.survey-back { align-self: flex-start; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--sub); font-weight: 600; cursor: pointer; }
.survey-head { display: grid; gap: 10px; }
.survey-head h1 { margin: 0; font-size: 28px; }
.survey-progress { display: grid; gap: 8px; color: var(--sub); font-size: 14px; }
.survey-progress progress { width: 100%; height: 6px; border: 0; border-radius: 3px; overflow: hidden; appearance: none; }
.survey-progress progress::-webkit-progress-bar { background: var(--sunk); }
.survey-progress progress::-webkit-progress-value { background: var(--accent); }
.survey-progress progress::-moz-progress-bar { background: var(--accent); }
.survey-questions { display: grid; gap: 24px; }
.survey-question { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.survey-question legend { float: left; display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 0; margin: 0 0 18px; font-size: 17px; font-weight: 650; line-height: 1.6; }
.survey-question legend + * { clear: both; }
.survey-number { flex: none; color: var(--accent); font-size: 14px; }
.survey-stars { display: grid; grid-template-columns: repeat(5, minmax(44px,1fr)); gap: 6px; }
.survey-stars label, .survey-choices label { position: relative; cursor: pointer; }
.survey-stars input, .survey-choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.survey-stars label > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 64px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--sub); transition: border-color .12s; }
.survey-stars svg { width: 24px; height: 24px; fill: transparent; stroke: currentColor; stroke-width: 1.5px; }
.survey-stars small { font-size: 13px; font-weight: 600; }
.survey-stars .filled svg { fill: var(--accent); color: var(--accent); }
.survey-stars input:checked + span { border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent); }
.survey-stars input:focus-visible + span, .survey-choices input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }
.survey-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--muted); }
.survey-choices { display: grid; gap: 8px; }
.survey-choices label > span { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 52px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 16px; }
.survey-choices label > span::before { content: ''; width: 18px; height: 18px; border: 2px solid var(--muted); border-radius: 50%; flex: none; }
.survey-choices input:checked + span { border: 2px solid var(--accent); padding: 11px 13px; color: var(--accent); background: var(--accent-soft); font-weight: 650; }
.survey-choices input:checked + span::before { border: 5px solid var(--accent); }
.survey-question:disabled { opacity: .75; }
.survey-text { min-height: 104px; padding: 12px; resize: vertical; }
.survey-counter { display: block; margin-top: 8px; text-align: right; font-size: 13px; color: var(--muted); }
.survey-error { color: var(--hot); padding: 12px 0; font-size: 15px; }
.survey-thanks { padding: 64px 8px 24px; text-align: center; align-items: center; gap: 20px; }
.survey-thanks h1 { margin: 0; }
.survey-thanks > .btn { margin-top: 8px; }
.survey-mark { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 24px; background: var(--accent-soft); color: var(--accent); }
.survey-mark svg { width: 40px; height: 40px; fill: currentColor; }
/* 좁은 휴대폰에서 큰 글씨를 켜도 별점 다섯 칸을 카드 안에 둔다 */
.survey-question legend, .survey-choices span { overflow-wrap: anywhere; }
@media (max-width: 360px) {
  .survey-question { padding: 12px 8px; }
  .survey-stars { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .survey-stars label > span { min-width: 0; }
}

/* 브라우저 공통: 입장 화면의 노치와 글꼴 확대 */
#app > .screen { padding-top: calc(20px + var(--safe-t)); }
#app > .screen.center { padding-bottom: calc(40px + var(--safe-b)); }
.top > *, .row > *, .inline > *, .two > * { min-width: 0; }
.brand { overflow-wrap: anywhere; }
.who { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; }
.inline { flex-wrap: wrap; }
.inline .lab { flex: 1 1 140px; }
.inline .field { min-width: 0; }
.inline > .btn { flex: 1 1 120px; width: auto; }
.geo-map + .note a { display: inline-flex; align-items: center; min-height: 44px; }
.feature-card summary { min-height: 44px; padding: 10px 0; cursor: pointer; }
.qbadge{display:flex;flex-direction:column;gap:.4rem;align-items:flex-start;white-space:normal;line-height:1.5}.qbadge[hidden]{display:none}.safety-card ol{padding-left:1.4rem;display:grid;gap:.8rem}.safety-card li{line-height:1.6}

.qbadge{position:sticky;top:calc(52px + var(--safe-t));left:auto;transform:none;max-width:100%;margin:0 12px}

.entry-direct .terms.short li{display:block}

.queue-held{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.queue-held p{margin:8px 0}.queue-held .btnrow{flex-wrap:wrap}
.safety-carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px}.safety-carousel article{flex:0 0 100%;scroll-snap-align:start}.safety-carousel img{width:100%;border-radius:16px}.safety-carousel p{line-height:1.6}.pose-letter{font-size:72px;font-weight:800;text-align:center}.pose-example img{max-width:100%;border-radius:16px}.mission-veiled{background:repeating-linear-gradient(45deg,transparent,transparent 12px,#7771 12px,#7771 24px)}.mrow.locked .mp{filter:blur(3px)}.bestshot-own{max-width:100%}.bingo input[type=file]{width:100%;font-size:12px}.bingo label.cell{display:flex;flex-direction:column;gap:8px}