/* 맹고 웹 공용 스타일. 색·글꼴은 /guide 페이지와 같은 토큰을 쓴다. 라이트/다크는 기기 설정을 따른다. */
:root {
  --bg:#eef0f3; --surface:#ffffff; --surface-2:#f6f7f9; --ink:#1b1e24; --muted:#5d6472; --line:#d5d9e0;
  --accent:#d6453d; --accent-ink:#ffffff; --live:#e5484d; --ok:#0f8f7e; --ok-bg:#dff3ef; --warn:#b26b00; --warn-bg:#fbefd6;
  --red:#d93a3f; --red-bg:#fde7e7; --blue:#2f6fdc; --blue-bg:#e3ecfd; --ow:#e8890c; --ow-bg:#fdf0dc;
  --font-display:"Do Hyeon","IBM Plex Sans KR",system-ui,sans-serif;
  --font-body:"IBM Plex Sans KR",system-ui,-apple-system,"Malgun Gothic",sans-serif;
  --radius:14px; --shadow:0 1px 2px rgba(20,24,32,.06),0 4px 16px rgba(20,24,32,.05);
}
@media (prefers-color-scheme: dark) { :root {
  --bg:#121417; --surface:#1b1e23; --surface-2:#22262c; --ink:#e9ebef; --muted:#9aa1ad; --line:#2d3139;
  --accent:#ff6a5f; --accent-ink:#1b0d0c; --live:#ff5c61; --ok:#3fd1bb; --ok-bg:#123430; --warn:#f2b33d; --warn-bg:#3a2c10;
  --red:#ff7b7f; --red-bg:#3a1c1e; --blue:#7fa8ff; --blue-bg:#18243d; --ow:#ffad4a; --ow-bg:#3a2a12;
  --shadow:none; color-scheme:dark; } }

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.55 var(--font-body); }
a { color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

.wrap { max-width:1080px; margin:0 auto; padding:0 max(16px, env(safe-area-inset-left, 0px)) 48px max(16px, env(safe-area-inset-right, 0px)); }

/* 상단 바 */
.top { position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(8px); -webkit-backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; gap:14px; padding-top:10px; padding-bottom:10px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:8px; text-decoration:none; font:400 22px/1 var(--font-display); }
.brand i { width:30px; height:30px; border-radius:9px; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center;
  font-style:normal; font-size:18px; }
.nav { display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; }
.nav a { text-decoration:none; color:var(--muted); padding:6px 10px; border-radius:9px; font-weight:500; font-size:14px; }
.nav a:hover { color:var(--ink); background:var(--surface); }
.nav a[aria-current="page"] { color:var(--ink); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); }

h1, h2 { font-family:var(--font-display); font-weight:400; letter-spacing:.01em; margin:0; text-wrap:balance; }
h1 { font-size:30px; line-height:1.15; }
h2 { font-size:22px; line-height:1.2; }
.lede { color:var(--muted); margin:6px 0 0; }
.section { margin-top:28px; }
.section > h2 { margin-bottom:12px; }

.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; }
.grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }

.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:99px; font-size:13px; font-weight:600;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line); white-space:nowrap; }
.pill.on { background:var(--ok-bg); color:var(--ok); border-color:transparent; }
.pill.live { background:var(--live); color:#fff; border-color:transparent; }
.pill.live::before { content:""; width:7px; height:7px; border-radius:50%; background:#fff; animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) { .pill.live::before { animation:none; } }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 14px; border-radius:10px; font-weight:600;
  text-decoration:none; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; font:600 14px var(--font-body); }
.btn:hover { background:var(--surface-2); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn.primary:hover { filter:brightness(1.05); }

/* 채팅 명령어 칩: 한글이 섞여서 고정폭 글꼴이면 '! 서든시참' 처럼 벌어져 보인다 → 본문 글꼴 */
code, kbd { font:600 13px var(--font-body); background:var(--surface-2); border:1px solid var(--line);
  border-radius:6px; padding:1px 6px; white-space:nowrap; }
.muted { color:var(--muted); }
.small { font-size:13px; }
.empty { color:var(--muted); font-size:14px; padding:10px 2px; }
.notice { padding:12px 14px; border-radius:12px; background:var(--warn-bg); color:var(--warn); font-weight:500; }

/* 공개 현황판 */
.board { display:grid; gap:12px; }
.cols { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
.col { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px; min-height:84px; }
.col h3 { margin:0 0 6px; font:400 18px/1.2 var(--font-display); display:flex; justify-content:space-between; gap:8px; }
.col h3 .n { color:var(--muted); font:500 13px var(--font-body); align-self:center; }
.col.red { border-top:4px solid var(--red); } .col.red h3 { color:var(--red); }
.col.blue { border-top:4px solid var(--blue); } .col.blue h3 { color:var(--blue); }
.col.party { border-top:4px solid var(--accent); }
.col.ow { border-top:4px solid var(--ow); }
.seat { display:flex; align-items:center; gap:10px; padding:8px 4px; border-top:1px solid var(--line); }
.seat:first-of-type { border-top:0; }
.seat .no { width:24px; flex:none; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; font-size:13px; }
.seat .who { flex:1; min-width:0; }
.seat .gn { font-weight:700; font-size:16px; overflow-wrap:anywhere; }
.seat .gn.none { font-weight:500; font-size:14px; color:var(--muted); }
.seat .chat { font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tag { flex:none; font-size:12px; font-weight:600; padding:2px 7px; border-radius:7px; background:var(--surface-2); color:var(--muted);
  border:1px solid var(--line); white-space:nowrap; }
.tag.sn { background:var(--blue-bg); color:var(--blue); border-color:transparent; }
.tag.rf { background:var(--red-bg); color:var(--red); border-color:transparent; }
.tag.hot { background:var(--warn-bg); color:var(--warn); border-color:transparent; }
.board-head { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }
.board-head h1 { margin-right:auto; }
.howto { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; }
.updated { font-size:12px; color:var(--muted); }

/* 방송 일정 (홈 '이번 주 방송', 대시보드 미리보기) */
.days { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:8px; }
.day { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px; min-height:112px;
  display:flex; flex-direction:column; gap:2px; }
.day .dl { font-size:13px; color:var(--muted); display:flex; justify-content:space-between; gap:4px; }
.day .dl b { color:var(--ink); font-weight:600; }
.day .tm { font:400 24px/1.1 var(--font-display); margin-top:4px; }
.day .tt { font-weight:600; font-size:14px; overflow-wrap:anywhere; }
.day .nt { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.day.off { background:var(--surface-2); }
.day.off .tm { color:var(--muted); font-size:20px; }
.day.today { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.day .chg { font-size:11px; font-weight:700; color:var(--warn); }
.sched-notice { margin:0 0 10px; padding:10px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--line);
  border-left:4px solid var(--accent); font-weight:600; }
@media (max-width:900px) {
  .days { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(132px, 40%); overflow-x:auto;
    scroll-snap-type:x mandatory; padding-bottom:4px; }
  .day { scroll-snap-align:start; }
}

/* 관리자 화면 공통 */
.me { display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap; }
.me img { width:28px; height:28px; border-radius:50%; background:var(--surface-2); }
select, input[type="text"], input[type="search"] { font:500 14px var(--font-body); padding:7px 9px; border-radius:9px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.me select { max-width:220px; }
.toast { position:fixed; left:50%; bottom:20px; transform:translate(-50%, 20px); opacity:0; pointer-events:none;
  background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:10px; font-weight:500; max-width:min(92vw, 560px);
  transition:opacity .15s, transform .15s; z-index:50; }
.toast.show { opacity:1; transform:translate(-50%, 0); }
.toast.bad { background:var(--live); color:#fff; }
.btn.danger { color:var(--live); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
@media (max-width:560px) { .me { margin-left:0; width:100%; } }

footer.foot { margin-top:40px; color:var(--muted); font-size:13px; display:flex; gap:10px; flex-wrap:wrap; }

@media (max-width:560px) {
  h1 { font-size:26px; }
  .nav { margin-left:0; width:100%; }
  .panel { padding:14px; }
}