/* 세미나 — 홈과 방 화면이 같이 쓰는 색·글꼴·버튼·입력 */
:root {
  --bg: #F2F4F8;
  --surface: #FFFFFF;
  --ink: #131925;
  --muted: #5A6477;
  --line: #D6DCE7;
  --accent: #2D6AE8;
  --ok: #0F8F66;
  --warn: #E39400;
  --danger: #D23B3B;
  --font-sans: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D1118; --surface: #151B25; --ink: #E6EBF3; --muted: #97A1B4; --line: #283042;
    --accent: #6D9CFF; --ok: #36C692; --warn: #FFB52B; --danger: #FF6B6B;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0D1118; --surface: #151B25; --ink: #E6EBF3; --muted: #97A1B4; --line: #283042;
  --accent: #6D9CFF; --ok: #36C692; --warn: #FFB52B; --danger: #FF6B6B;
  color-scheme: dark;
}

html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); line-height: 1.5; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }

.btn {
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 6px;
  font: inherit; padding: 4px 10px; cursor: pointer; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
}
.btn:hover { border-color: var(--muted); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn:disabled:hover { border-color: var(--line); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #FFFFFF; padding: .6em 1.1em; font-weight: 600; }
.btn.danger { color: var(--danger); }

.input {
  font: inherit; width: 100%; min-width: 0; padding: .55em .75em; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink);
}
.input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.msg { color: var(--danger); min-height: 1.4em; font-size: .9em; }
.msg.good { color: var(--ok); }

/* 비밀번호 창 */
.gate {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(6px);
}
.gate-card {
  width: min(100%, 26em); background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.4em; display: grid; gap: .7em; font-size: 16px;
}
.gate-card h2 { font-size: 1.45em; line-height: 1.2; }
.gate-card label { font-size: .9em; color: var(--muted); }