/* 누구냐넌 — shared styles for index.html / live.html / admin.html.
   Extracted verbatim from screens.html v1.3 (colors, radii, type scale).
   Board-mockup chrome (.board/.shot/.frames/.phone/.tv/.desktop bezels,
   fake status bar) is dropped — pages fill the real viewport instead. */

:root {
  --paper: #F4F2EE; --ink: #191F28; --sub: #6B7684; --line: #E5E1DA;
  --accent: #FF5A45;
  --kakao-bg: #BACEE0;
  --bubble-me: #FEE500;
  --bubble-other: #FFFFFF;
  --admin-bg: #F9FAFB;
  --font: "Pretendard", "Apple SD Gothic Neo", "Wanted Sans", -apple-system, "Noto Sans KR", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Without this, an author rule like `.chat-screen{display:flex}` ties the UA's
   `[hidden]{display:none}` on specificity and wins by source order — the element
   stays visible despite `hidden`. Every screen/tab/sheet toggle here relies on
   `hidden` actually hiding, so this must outrank all of them. */
[hidden] { display: none !important; }
html, body { height: 100%; overflow-x: clip; }
body { background: var(--paper); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
svg { display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input { font: inherit; color: inherit; }

/* ---------- kakao chat UI (shared by user chat + live) ---------- */
.chat-top { display: flex; align-items: center; gap: 12px; padding: 8px 14px 10px; flex-shrink: 0; }
.chat-top .back { font-size: 20px; line-height: 1; }
.chat-top .title { font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em; }
.chat-top .count { font-size: 13px; color: #55606e; margin-left: 4px; font-weight: 500; }
.chat-top .icons { margin-left: auto; display: flex; align-items: center; gap: 16px; color: #2b3038; }
.chat-top .icons .dots { font-size: 17px; line-height: 1; }

.pinned { margin: 0 10px; background: rgba(255,255,255,.92); border-radius: 12px; padding: 10px 14px; display: flex; gap: 10px; align-items: flex-start; box-shadow: 0 1px 4px rgba(0,0,0,.06); flex-shrink: 0; }
.pinned .ic { color: var(--accent); margin-top: 2px; flex-shrink: 0; }
.pinned .txt { font-size: 13px; line-height: 1.45; color: #333; }
.pinned .txt b { font-weight: 700; }
.pinned .fold { margin-left: auto; color: #98a2ae; font-size: 12px; margin-top: 2px; }

/* min-height: 0 overrides the flex item's default min-height:auto — without it, a flex
   child with `flex:1` grows to fit its content instead of clipping to the available
   space, so overflow-y:auto never actually kicks in and the JS "scroll to bottom" call
   below becomes a no-op (nothing to scroll). */
.chat-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 12px 10px; display: flex; flex-direction: column; gap: 4px; }
/* live.js groups sent messages under the topic they were written under. `contents`
   keeps the wrapper invisible to chat-body's own flex layout/gap — children lay out
   exactly as if they were direct children of chat-body. */
.topic-group { display: contents; }
.day-chip { align-self: center; background: rgba(0,0,0,.12); color: #fff; font-size: 11px; padding: 4px 12px; border-radius: 20px; margin: 6px 0 10px; }
.sys-chip { align-self: center; background: rgba(0,0,0,.10); color: #41505f; font-size: 11.5px; padding: 5px 14px; border-radius: 20px; margin: 8px 0; text-align: center; line-height: 1.5; }
.empty-chip { align-self: center; color: var(--sub); font-size: 13px; padding: 24px 0; text-align: center; }

.msg { display: flex; gap: 8px; margin-top: 8px; max-width: 88%; }
.msg .avatar { width: 38px; height: 38px; border-radius: 15px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff; overflow: hidden; }
.msg .avatar img { width: 80%; height: 80%; object-fit: contain; }
.msg .col { display: flex; flex-direction: column; gap: 3px; }
.msg .name { font-size: 12px; color: #48545f; padding-top: 2px; }
.msg .row { display: flex; align-items: flex-end; gap: 6px; }
.bubble { background: var(--bubble-other); border-radius: 4px 16px 16px 16px; padding: 9px 12px; font-size: 14.5px; line-height: 1.5; color: #1d1d1d; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.bubble img { display: block; max-width: 100%; border-radius: 10px; }
.msg.host .avatar { background: var(--accent); color: #fff; }
.avatar.photo { background: #CBD9EE; }
.avatar.photo img { width: 100%; height: 100%; object-fit: cover; }
.msg.me .name { text-align: right; padding-right: 2px; }
.msg.host .bubble { border: 1.5px solid rgba(255,90,69,.45); }
.msg.host .name { font-weight: 700; color: #c8402f; }
.time { font-size: 10.5px; color: #5b6b7c; white-space: nowrap; padding-bottom: 1px; }

.msg.me { align-self: flex-end; flex-direction: row-reverse; max-width: 80%; }
.msg.me .row { flex-direction: row-reverse; }
.msg.me .bubble { background: var(--bubble-me); border-radius: 16px 4px 16px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.chat-input { background: #fff; padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 14px); display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.chat-input .plus { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #5b6b7c; background: #f2f4f6; flex-shrink: 0; }
.chat-input .field { flex: 1; min-width: 0; background: #f2f4f6; border-radius: 20px; padding: 9px 16px; font-size: 14px; color: #191F28; border: none; }
.chat-input .field::placeholder { color: #98a2ae; }
.chat-input .field:disabled { color: #98a2ae; }
.chat-input .send { width: 34px; height: 34px; border-radius: 50%; background: var(--bubble-me); display: flex; align-items: center; justify-content: center; color: #191F28; flex-shrink: 0; }
.chat-input .send:disabled { opacity: .4; }

/* dim + sheet (profile change) */
.dim { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; flex-direction: column; justify-content: flex-end; z-index: 20; }
.sheet { background: #fff; border-radius: 22px 22px 0 0; padding: 26px 22px calc(env(safe-area-inset-bottom, 0px) + 34px); }
.sheet h3 { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.sheet p { font-size: 13px; color: var(--sub); line-height: 1.6; margin-bottom: 18px; }
.sheet .nick-row { display: flex; gap: 10px; }
.sheet .nick-input { flex: 1; min-width: 0; border: 1.5px solid var(--ink); border-radius: 14px; padding: 13px 16px; font-size: 15px; font-weight: 600; }
.sheet .dice { width: 50px; border-radius: 14px; background: #f2f4f6; display: flex; align-items: center; justify-content: center; color: #41505f; }
.sheet .cta { margin-top: 14px; background: var(--ink); color: #fff; border-radius: 14px; padding: 15px; text-align: center; font-size: 15px; font-weight: 700; width: 100%; }
.menu-pop { position: fixed; top: 54px; right: 12px; background: #fff; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.18); padding: 6px; width: 170px; z-index: 21; }
.menu-pop div { padding: 11px 14px; font-size: 14px; border-radius: 9px; text-align: left; }
.menu-pop div.hot { background: #FFF1EE; font-weight: 700; }

/* ---------- onboarding screen ---------- */
.onboard { background: #fff; min-height: 100dvh; display: flex; flex-direction: column; padding: 0 26px; position: relative; }
.onboard .top { margin-top: 56px; }
.onboard .logo { font-size: 13px; font-weight: 800; letter-spacing: .16em; color: var(--accent); margin-bottom: 26px; }
.onboard h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.28; }
.onboard h2 .u { box-shadow: inset 0 -12px 0 rgba(254,229,0,.75); }
.onboard .desc { margin-top: 16px; font-size: 14px; color: var(--sub); line-height: 1.7; }
.onboard .nick-zone { margin-top: 44px; }
.onboard .nick-label { font-size: 12px; font-weight: 700; color: var(--sub); letter-spacing: .08em; margin-bottom: 10px; }
.onboard .nick-row { display: flex; gap: 10px; }
.onboard .nick-input { flex: 1; border: 2px solid var(--ink); border-radius: 16px; padding: 16px 18px; font-size: 18px; font-weight: 700; }
.onboard .nick-input::placeholder { color: #98a2ae; font-weight: 600; }
.onboard .dice { width: 58px; border: 2px solid var(--line); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #41505f; }
.onboard .hint { margin-top: 12px; font-size: 12.5px; color: #98a2ae; }
.onboard .bottom { margin-top: auto; margin-bottom: 32px; padding-bottom: env(safe-area-inset-bottom, 0px); }
.onboard .anon-note { display: flex; gap: 10px; align-items: flex-start; background: #F7F8FA; border-radius: 14px; padding: 14px 16px; font-size: 13px; color: #4a5561; line-height: 1.6; margin-bottom: 16px; }
.onboard .anon-note svg { margin-top: 2px; flex-shrink: 0; color: #6B7684; }
.onboard .cta { background: var(--bubble-me); border-radius: 16px; padding: 18px; text-align: center; font-size: 16px; font-weight: 800; width: 100%; }
.onboard .cta:disabled { opacity: .5; }
/* Same visual language as .sys-chip, but usable outside a flex chat-body (align-self
   needs a flex parent; .onboard .bottom isn't one), so this centers via margin instead. */
.inline-alert { background: rgba(0,0,0,.10); color: #41505f; font-size: 11.5px; padding: 5px 14px; border-radius: 20px; margin: 12px auto 0; text-align: center; line-height: 1.5; width: fit-content; }

/* ---------- user chat screen ---------- */
/* height, not min-height — a min-height lets the column grow past the viewport when
   chat-body's content overflows, which defeats chat-body's own flex:1/min-height:0
   scroll clamp (see .chat-body) and, on the chat screen, can push .chat-input itself
   off-screen instead of scrolling to reach it. */
.chat-screen { background: var(--kakao-bg); height: 100dvh; display: flex; flex-direction: column; position: relative; }

/* ---------- streaming (live) screen ---------- */
.live-screen { background: var(--kakao-bg); height: 100dvh; display: flex; flex-direction: column; position: relative; }
.live-screen .chat-top { padding: 14px 24px; background: rgba(255,255,255,.65); backdrop-filter: blur(4px); }
.live-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; border-radius: 8px; padding: 5px 11px; }
.live-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* Projector-readable "지금 주제" banner — the label stays small/quiet, the topic
   itself is the thing an audience across the room needs to read at a glance. */
.live-screen .pinned { margin: 12px 18px 0; padding: 16px 20px; gap: 12px; }
.live-screen .pinned .ic { margin-top: 4px; }
.live-screen .pinned .txt { display: flex; flex-direction: column; gap: 4px; }
.live-screen .pinned .lab { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--accent); }
.live-screen .pinned .topic { font-size: 22px; font-weight: 800; line-height: 1.35; color: var(--ink); }
/* Bottom padding clears the fixed QR card (64px + 8px*2 padding + 20px offset ≈ 100px)
   so the newest bubble never lands behind it.
   No justify-content: flex-end here (even though it reads like the natural way to pin a
   short conversation to the bottom) — a flex column's scrollable-overflow box is computed
   from the flex-start edge, so flex-end content that overflows renders pushed off the top
   while scrollHeight stays equal to clientHeight: the browser never registers anything to
   scroll to, and manual scrolling silently does nothing. live.js's scrollToBottom() already
   pins the view to the newest message via JS, which achieves the same look without this trap. */
.live-screen .chat-body { padding: 20px 24px 112px; gap: 8px; scroll-padding-bottom: 112px; }
.live-screen .bubble { font-size: 16.5px; padding: 11px 15px; }
/* live.js only ever renders the topic announcement as variant "me" on this screen (sent
   participant messages are variant "other") — sizing it up a step balances the now-larger
   pinned banner above without competing with it. */
.live-screen .msg.me .bubble { font-size: 19px; font-weight: 700; padding: 14px 18px; }
.live-screen .msg .avatar { width: 42px; height: 42px; }
.live-screen .msg { max-width: 62%; }
.live-screen .msg.me { max-width: 70%; }
.live-screen .msg.enter { animation: rise .5s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.qr-float { position: fixed; right: 20px; bottom: 20px; z-index: 3; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(25,31,40,.22); padding: 8px; }
.qr-float .qr { width: 64px; height: 64px; display: grid; place-items: center; }
.qr-float .qr svg { width: 100%; height: 100%; }

/* ---------- admin screen ---------- */
.admin-screen { background: var(--admin-bg); min-height: 100dvh; display: flex; flex-direction: column; }
.adm-top { background: #fff; border-bottom: 1px solid #EDEFF2; padding: 14px 26px; display: flex; align-items: center; gap: 14px; flex-shrink: 0; flex-wrap: wrap; }
.adm-top .brand { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; }
.adm-top .brand span { color: var(--accent); }
.adm-top .session { font-size: 13px; color: var(--sub); border: 1px solid #EDEFF2; border-radius: 8px; padding: 5px 12px; }
.adm-top .right { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sub); }
.adm-topic { background: #fff; border-bottom: 1px solid #EDEFF2; padding: 16px 26px; display: flex; align-items: center; gap: 14px; flex-shrink: 0; flex-wrap: wrap; }
.adm-topic .lab { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--accent); white-space: nowrap; }
.adm-topic .q { font-size: 15px; font-weight: 700; flex: 1; letter-spacing: -0.01em; }
.state { font-size: 11px; font-weight: 800; border-radius: 7px; padding: 4px 10px; white-space: nowrap; }
.state.on { background: #E8F7EE; color: #1E7F4F; }
.state.off { background: #F2F4F6; color: #6B7684; }
.btn { border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn.dark { background: var(--ink); color: #fff; }
.btn.ghost { background: #fff; border: 1px solid #DDE1E6; color: #41505f; }
.btn.danger { background: #FFF1EE; color: #c8402f; }
.btn.accent { background: var(--accent); color: #fff; }
.btn:disabled { opacity: .45; cursor: default; }
.adm-tabs { display: flex; gap: 4px; padding: 12px 26px 0; background: var(--admin-bg); flex-shrink: 0; }
.adm-tabs div { padding: 9px 16px; font-size: 13.5px; font-weight: 600; color: var(--sub); border-radius: 10px 10px 0 0; cursor: pointer; }
.adm-tabs div.on { background: #fff; color: var(--ink); font-weight: 800; border: 1px solid #EDEFF2; border-bottom-color: #fff; }
.adm-body { background: #fff; flex: 1; margin: 0 26px 26px; border: 1px solid #EDEFF2; border-top: none; border-radius: 0 12px 12px 12px; overflow: auto; position: relative; }
.adm-banner { margin: 16px; border-radius: 12px; padding: 13px 16px; font-size: 13px; line-height: 1.6; }
.adm-banner.idle { background: #F7F8FA; color: #4a5561; }
.adm-banner.closed { background: #F2F4F6; color: #4a5561; }
.adm-banner b { font-weight: 800; }
.composer { display: flex; gap: 10px; margin: 16px 16px 16px; }
.composer .inp { flex: 1; border: 1.5px solid var(--ink); border-radius: 12px; padding: 12px 16px; font-size: 14px; font-weight: 600; color: #191F28; }
.composer .inp::placeholder { color: #98a2ae; font-weight: 500; }
table.inbox { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.inbox th { font-size: 11px; letter-spacing: .08em; color: #98a2ae; text-align: left; font-weight: 700; padding: 12px 14px; border-bottom: 1px solid #EDEFF2; background: #FBFCFD; }
.inbox td { padding: 13px 14px; border-bottom: 1px solid #F3F5F7; vertical-align: middle; }
.inbox tr.checked td { background: #FFF8F0; }
.cbx { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid #C6CDD5; display: inline-block; vertical-align: middle; cursor: pointer; }
.cbx.on { background: var(--ink); border-color: var(--ink); position: relative; }
.cbx.on::after { content: "\2713"; color: #fff; font-size: 11px; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.nick-cell { display: flex; align-items: center; gap: 9px; font-weight: 600; white-space: nowrap; }
.topic-hint { font-size: 11px; color: #98a2ae; margin: 3px 0 0 37px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
/* A row whose message was written under a topic other than the one currently active —
   dimmed so the admin can tell it apart from the current topic's inbox at a glance. */
.inbox tr.other-topic td { opacity: .55; }
.inbox tr.other-topic .topic-hint { color: var(--accent); opacity: 1; }
.mini-av { width: 28px; height: 28px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; background: #EEF1F4; }
.mini-av img { width: 80%; height: 80%; object-fit: contain; }
.chip { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 3px 8px; }
.chip.wait { background: #F2F4F6; color: #6B7684; }
.chip.sent { background: #E8F7EE; color: #1E7F4F; }
.img-thumb { width: 44px; height: 34px; border-radius: 6px; background: #F2B26B; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; letter-spacing: .06em; vertical-align: middle; margin-right: 8px; cursor: pointer; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.row-actions .btn { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.float-bar { position: fixed; right: 26px; bottom: 22px; background: var(--ink); color: #fff; border-radius: 16px; padding: 12px 14px 12px 20px; display: flex; align-items: center; gap: 14px; box-shadow: 0 14px 34px rgba(25,31,40,.35); }
.float-bar .cnt { font-size: 13.5px; font-weight: 700; }
.float-bar .cnt b { color: var(--bubble-me); }
.float-bar .btn { padding: 9px 14px; font-size: 13px; }
.float-bar .btn.send { background: var(--accent); color: #fff; }
.float-bar .btn.del { background: rgba(255,255,255,.12); color: #fff; }

/* nickname tab */
.warn-note { margin: 16px; background: #FFF8F0; border: 1px solid #F5E3CB; border-radius: 12px; padding: 13px 16px; font-size: 12.5px; color: #7A5B2E; line-height: 1.6; }
.nick-table td .cur { font-weight: 700; }
.nick-table td .old { color: #98a2ae; font-size: 12px; margin-left: 8px; text-decoration: line-through; }
.nick-edit { display: flex; gap: 8px; align-items: center; }
.nick-edit .inp { border: 1.5px solid var(--ink); border-radius: 9px; padding: 7px 12px; font-size: 13px; font-weight: 600; min-width: 130px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}