/* Self-hosted fonts (no external requests).
   - Pretendard Variable: public/css/pretendard-site.css + pretendard.css — 본문·버튼·표·제목·로고 전부 (강조는 굵기만).
   - 2026-09-23: 제목(h1/h2)·로고의 Press Start 2P(픽셀, 라틴만)를 뺐다 — "FlipMC" 처럼 영문이 섞인 제목에서 글꼴이 섞여 보였다.
     public/fonts/press-start-2p-latin.woff2, minecraftia.woff 는 더 이상 쓰지 않는다(디스크에만 남음). */

/* Minecraft-inspired theme */
/* Default = Dark theme (mainstream neutrals + blue accent) */
:root {
  --bg: #0f172a;           /* slate-900 */
  --bg-accent: #111827;     /* gray-900 */
  --text: #e5e7eb;          /* gray-200 */
  --muted: #94a3b8;         /* slate-400 (6.9:1 on --bg) */
  --primary: #2563eb;       /* blue-600 — white button text 5.17:1 (blue-500 was 3.68, AA fail) */
  --accent: #1d4ed8;        /* blue-700 (hover) */
  --panel: #111827;         /* gray-900 */
  --border: rgba(148,163,184,0.25); /* slate-400 at 25% */
  --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

/* Scoped to :root — the toggle buttons carry data-theme="light|dark" too, so an unscoped [data-theme] would leak the
   light variables onto the "Light" button in dark mode (label was #475569 on #111827 = 2.3:1, hover 1.0:1). */
:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-accent: #f8fafc;     /* slate-50 */
  --text: #0f172a;          /* slate-900 (17.9:1) */
  --muted: #475569;         /* slate-600 (7.6:1 on white, 7.2:1 on slate-50) */
  --primary: #2563eb;       /* blue-600 */
  --accent: #1d4ed8;        /* blue-700 */
  --panel: #ffffff;
  --border: rgba(15,23,42,0.10); /* slate-900 at 10% */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;          /* Korean: wrap at spaces, not inside words */
  overflow-wrap: anywhere;
  background: var(--bg);
  color: var(--text);
}
@media (max-width: 640px) { body { font-size: 15px; } }

/* Headings/logo: Pretendard like the body — emphasis by weight only (h1 800, h2/logo 700) */
h1, h2, .brand {
  font-family: var(--font-body);
  letter-spacing: 0;
  line-height: 1.4;
}
h1 { font-size: 24px; font-weight: 800; margin: 0 0 12px; }
h2 { font-size: 18px; font-weight: 700; margin: 0 0 10px; }
h3, h4, h5, h6 { font-family: var(--font-body); font-weight: 600; line-height: 1.4; margin: 0 0 8px; }
h3 { font-size: 17px; }
/* Dark mode only: a very subtle 1px drop under headings/logo. Light mode has no text-shadow anywhere. */
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] .brand { text-shadow: 0 1px 0 rgba(0,0,0,0.35); }

p { margin: 0; }
p + p { margin-top: 10px; }
ul + p, ol + p { margin-top: 12px; }
small, .hint { font-size: 13px; }
.hint { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); }
table { font-size: 15px; font-variant-numeric: tabular-nums; border-collapse: collapse; }
th, td { padding: 6px 10px; text-align: left; vertical-align: top; }
button, input, select, textarea { font-family: inherit; }

.container { max-width: 1100px; margin: 0 auto; padding: 20px 16px; }

/* Inline SVG icons (replaces Font Awesome) */
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: currentColor; }

.mc-header {
  background: rgba(17,24,39,0.9); /* dark glass — 0.9 so nav --muted stays ≥5.2:1 (--text ≥10.8:1) even when the sticky header
                                     scrolls over white/bright content such as the hero image (0.6 dropped to 2.1:1 there) */
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(8px); /* 영상·SVG 등 어떤 콘텐츠보다 위, 모달(#guideModal, z-index 1100)만 그 위 */
}
.mc-header .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mc-header .brand { color: var(--text); text-decoration: none; font-size: 17px; font-weight: 700; display: inline-flex; gap: 10px; align-items: center; white-space: nowrap; flex-shrink: 0; }
.mc-header nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
.mc-header nav a { color: var(--muted); margin-left: 16px; text-decoration: none; font-size: 15px; font-weight: 500; }
.mc-header nav a:hover { color: var(--text); }
@media (max-width: 640px) { .mc-header nav a { margin-left: 10px; font-size: 14px; } .mc-header .container { padding-top: 12px; padding-bottom: 12px; } }
/* 메뉴 4개 묶음 (views/layout.ejs .nav-links — 2026-09-26 "홈" 삭제, 로고가 홈). 글자 사이 간격은 좌우 padding 두 개(데스크톱 8+8 = 16px, 폰 7+7 = 14px)로 만들고
   — 탭 영역도 넓어진다 — 묶음 오른쪽을 같은 만큼 당겨 마지막 글자 뒤 간격(로그인 버튼까지 16px, 폰에선 화면 가장자리)은 예전 그대로.
   폰: 묶음이 nav 의 첫 줄 전체(flex-basis 100%, 오른쪽 정렬, 줄바꿈 없음) → 로그인/내 메뉴·테마는 항상 둘째 줄. 320px 에서도 한 줄(글자 112px + 간격 42px). */
.mc-header nav .nav-links { display: flex; align-items: center; flex-wrap: nowrap; margin-right: -8px; }
.mc-header nav .nav-links a { margin-left: 0; padding: 6px 8px; white-space: nowrap; }
@media (max-width: 640px) {
  .mc-header nav .nav-links { flex-basis: 100%; justify-content: flex-end; margin-right: -7px; }
  .mc-header nav .nav-links a { padding: 4px 7px; }
  .mc-header nav { row-gap: 4px; }
}
/* 320px 폭: 둘째 줄(로그인 10+66 + 테마 12+90 = 178px)이 nav 폭 175.5px 를 2.4px 넘어 셋째 줄로 떨어지던 것 — 테마 앞 간격만 8px 로 */
@media (max-width: 360px) { .mc-header nav .theme-toggle { margin-left: 8px; } }

/* 헤더 로그인 버튼 (비로그인, views/layout.ejs .nav-login) — 알약 버튼, 탭 타겟 40px 이상 */
.mc-header nav a.nav-login {
  display: inline-flex; align-items: center; justify-content: center; margin-left: 16px;
  min-height: 40px; padding: 0 16px; border-radius: 9999px;
  border: 1.5px solid var(--border); background: var(--panel); color: var(--text);
  font-size: 14px; font-weight: 600; line-height: 1; box-shadow: 0 2px 10px rgba(0,0,0,0.20);
  transition: filter .2s, box-shadow .2s;
}
.mc-header nav a.nav-login:hover { color: var(--text); filter: brightness(1.06); box-shadow: 0 6px 18px rgba(0,0,0,0.28); }
.mc-header nav a.nav-login:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
[data-theme="light"] .mc-header nav a.nav-login { box-shadow: 0 2px 10px rgba(15,23,42,0.10); }

/* 헤더 사용자 메뉴 (로그인, views/layout.ejs details.user-menu) — <details>/<summary> 만으로 열리고 닫힌다(JS 없이 동작).
   public/js/app.js 는 바깥 클릭·Esc 닫기만 보탠다. 패널은 오른쪽 정렬·절대 위치, z-index 1200 (헤더 1000 위, 모달 1100 과는 동시에 안 보임). */
.user-menu { position: relative; margin-left: 16px; }
.user-menu-btn {
  list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none;
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; max-width: 220px; padding: 0 12px 0 14px; border-radius: 9999px;
  border: 1.5px solid var(--border); background: var(--panel); color: var(--text);
  font-size: 14px; font-weight: 600; line-height: 1; box-shadow: 0 2px 10px rgba(0,0,0,0.20);
  transition: filter .2s, box-shadow .2s;
}
.user-menu-btn::-webkit-details-marker { display: none; }
.user-menu-btn::marker { content: ''; }
.user-menu-btn:hover, .user-menu[open] .user-menu-btn { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(0,0,0,0.28); }
.user-menu-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
[data-theme="light"] .user-menu-btn { box-shadow: 0 2px 10px rgba(15,23,42,0.10); }
.user-menu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; } /* 버튼의 line-height 1 을 그대로 쓰면 overflow:hidden 이 g·y 아랫부분을 자름 (2026-09-26) */
.user-menu-caret { font-size: 11px; color: var(--muted); transition: transform .15s ease; }
.user-menu[open] .user-menu-caret { transform: rotate(180deg); }
.user-menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 1200;
  min-width: 220px; max-width: min(320px, calc(100vw - 32px)); padding: 6px;
  border-radius: 12px; border: 1px solid var(--border); background: var(--panel);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
[data-theme="light"] .user-menu-panel { box-shadow: 0 16px 40px rgba(15,23,42,0.16); }
.user-menu-nicks { display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px; padding: 8px 12px 10px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.user-menu-nicks span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-header nav a.user-menu-item {
  display: flex; align-items: center; gap: 8px; margin-left: 0; min-height: 40px; padding: 0 12px; border-radius: 8px;
  color: var(--text); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.mc-header nav a.user-menu-item:hover { background: rgba(148,163,184,0.15); color: var(--text); }
.mc-header nav a.user-menu-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--primary); }
.user-menu-item .icon { color: var(--muted); font-size: 14px; }
@media (max-width: 640px) {
  .user-menu, .mc-header nav a.nav-login { margin-left: 10px; }
  /* 둘째 줄(내 메뉴 + 테마)이 한 줄에 들어가도록 남는 폭까지만: nav 폭(100vw − 여백 32 − 로고 100.5 − 간격 12) − 버튼 앞 10 − 테마 12+90 ≈ 100vw − 256px.
     긴 이름은 … 로 줄인다(2026-09-26). 80px 아래로는 안 줄임 → 320px 에서 이름이 길면 셋째 줄로 떨어질 수 있음 */
  .user-menu-btn { max-width: clamp(80px, calc(100vw - 258px), 150px); padding: 0 10px 0 12px; }
  .mc-header nav a.nav-login { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) { .user-menu-caret { transition: none; } }
/* Light header (opaque enough that nav text stays readable over scrolled content) */
[data-theme="light"] .mc-header { background: rgba(255,255,255,0.85); }
/* Theme toggle button */
.theme-btn { margin-left: 12px; border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.theme-btn:hover { filter: brightness(1.08); }

.mc-footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; padding: 24px 0; text-align: center; margin-top: 32px; }
[data-theme="light"] .mc-footer { background: rgba(255,255,255,.6); }

.hero { position: relative; text-align: center; padding: 56px 0 40px; overflow: hidden; }
.hero h1 { font-size: 26px; line-height: 1.4; margin: 0 0 12px; }
.hero p { color: var(--muted); margin: 0; font-size: 17px; line-height: 1.7; }
.hero .hero-actions { margin-top: 20px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero .grid-bg { display: none; }
.hero.hero-glow::after { display: none; }

/* Hero with image */
.hero.hero-split { text-align: left; }
.hero-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: center; }
.hero.hero-split .hero-actions { justify-content: flex-start; }
.hero-media { display: flex; justify-content: center; }
.hero-media img { width: 100%; height: auto; max-width: 560px; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 20px 40px rgba(0,0,0,0.35); }
@media (max-width: 900px) { .hero-wrap { grid-template-columns: 1fr; } .hero { text-align: center; } .hero.hero-split { text-align: left; } .hero.hero-split .hero-actions { justify-content: flex-start; } }

.adventure { padding: 24px 16px; }
.adventure-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: start; }
.adventure-copy h2 { margin: 0 0 8px; }
.adventure-copy p { margin: 0 0 12px; color: var(--muted); }
.adventure-points { margin: 0 0 14px; padding-left: 18px; }
.adventure-points li { margin: 6px 0; }
.map-frame { border-radius: 16px; border: 1px solid var(--border); overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.35); }
.map-frame img, .map-frame video { width: 100%; height: auto; display: block; image-rendering: -webkit-optimize-contrast; }
.adventure .hint { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); margin-top: 8px; }
@media (max-width: 900px) { .adventure-wrap { grid-template-columns: 1fr; } }

/* Modal */
.modal {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 1100;
  /* 노치·홈 인디케이터 안쪽 + 최소 12px 여백. 모달이 화면보다 길면 위가 잘리지 않고 안에서 스크롤된다 */
  --modal-pad-top: max(12px, env(safe-area-inset-top));
  --modal-pad-bottom: max(12px, env(safe-area-inset-bottom));
  padding: var(--modal-pad-top) max(12px, env(safe-area-inset-right)) var(--modal-pad-bottom) max(12px, env(safe-area-inset-left));
}
.modal.show { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); }
.modal-dialog { position: relative; width: min(760px, 100%); }
.modal-content {
  position: relative; border-radius: 16px; border: 1px solid var(--border); background: var(--panel); padding: 18px; box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  max-height: calc(100vh - var(--modal-pad-top) - var(--modal-pad-bottom));
  max-height: calc(100dvh - var(--modal-pad-top) - var(--modal-pad-bottom));
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
/* 닫기(✕): 스크롤되는 .modal-content 밖(.modal-dialog 기준)에 두어 안을 끝까지 내려도 항상 보인다. 탭 타겟 44px */
.modal-close {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.modal-close:hover { background: var(--bg-accent); }
.modal-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.modal .card-item.title-card { padding-left: 48px; padding-right: 48px; } /* 제목이 닫기 버튼 밑으로 가지 않게 */

/* Modal card stack */
.card-stack { display: grid; gap: 14px; }
.card-item { border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.02); padding: 14px; }
.card-item.title-card { text-align: center; }
.card-item.title-card h2 { margin: 6px 0 12px; }
.card-item.media-card .map-frame { margin: 0; }
.card-item.body-card p { margin: 0; color: var(--muted); }
.card-item.points-card .adventure-points { margin: 0; padding-left: 18px; }
.card-item.points-card li { margin: 6px 0; }
.card-item.tip-card .hint { display: block; } /* flex 면 글자·링크가 따로 칸이 돼 "지 / 도" 처럼 쪼개졌다 */
.actions.center { justify-content: center; }

/* Constrain preview video size inside modal */
.modal .media-card .map-frame { max-width: 520px; margin: 0 auto; }
.modal .media-card .map-frame img, .modal .media-card .map-frame video { max-height: 300px; width: 100%; height: auto; object-fit: contain; }
@media (max-width: 480px) {
  .modal .media-card .map-frame { max-width: 100%; }
  .modal .media-card .map-frame img, .modal .media-card .map-frame video { max-height: 200px; }
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 24px; }

/* 홈 하단 그룹 (views/index.ejs): 서버 · 서비스 · 문의. 소제목 + 오른쪽으로 이어지는 구분선, 카드는 기존 .panel 그대로 */
.home-group { margin-top: 40px; }
.home-group > .grid { margin-top: 14px; }
.group-title {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; color: var(--muted);
}
.group-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.group-title .icon { color: var(--primary); }
:root[data-theme="dark"] .group-title .icon, :root:not([data-theme]) .group-title .icon { color: #60a5fa; } /* 다크: blue-400 (6.4:1) */
.home-group .panel > h3 { font-size: 18px; font-weight: 700; margin: 0 0 10px; }
.home-group .panel > h3 .icon { margin-right: 6px; }
.panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  border: 1px solid var(--border);
  border-radius: 12px; padding: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
[data-theme="light"] .panel { background: var(--panel); box-shadow: 0 6px 20px rgba(15,23,42,0.08); }
.panel-spotlight { position: relative; }
.panel-spotlight::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(120deg, rgba(63,185,80,.7), rgba(46,160,67,.7), rgba(46,160,67,0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.panel.center { text-align: center; }
.panel h2 { margin-top: 0; }
.panel > p { margin-top: 12px; }
.panel > p:first-of-type { margin-top: 0; }
.panel > h1 + p, .panel > h2 + p { margin-top: 0; }
.panel .actions { margin-top: 14px; }

.info-list { margin: 0; padding-left: 0; list-style: none; font-size: 15px; font-variant-numeric: tabular-nums; }
.info-list li { margin: 8px 0; }

.steps { margin: 0; padding-left: 22px; list-style: decimal; }
.steps li { margin: 8px 0; padding-left: 2px; }
p + .steps, p + .info-list { margin-top: 10px; }

code { background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 6px; font-size: 0.925em; }
[data-theme="light"] code { background: rgba(15,23,42,0.06); }

/* Status page badges */
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 9999px; font-size: 13px; font-weight: 600; line-height: 1.5; border: 1px solid var(--border); vertical-align: 1px; }
.status-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-online { color: #3fb950; background: rgba(63,185,80,0.12); }   /* 5.0:1 on tinted dark panel */
.status-offline { color: #ff7b72; background: rgba(248,81,73,0.12); }  /* 5.4:1 (was #f85149 = 4.1, AA fail) */
.status-pending { color: #d29922; background: rgba(210,153,34,0.12); } /* 6.0:1 */
/* Light theme: darker text so badges pass WCAG AA on the 12% tint over white (6.4 / 7.2 / 6.4) */
[data-theme="light"] .status-online { color: #166534; }
[data-theme="light"] .status-offline { color: #991b1b; }
[data-theme="light"] .status-pending { color: #92400e; }
.status-meta { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; margin: 8px 0 0; }
.status-meta a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 10px 14px; color: #fff; background: var(--primary);
  font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em;
  border-radius: 8px; text-decoration: none; border: 2px solid #1e40af;
  box-shadow: 0 4px 0 #1e3a8a; transition: transform .05s ease-in-out, background .2s;
}
.btn:hover { background: var(--accent); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #1e3a8a; }
.btn.btn-secondary { background: #2f81f7; border-color: #1b4fb3; box-shadow: 0 4px 0 #1b4fb3; color: #001028; }
.btn.btn-secondary:hover { background: #1f6feb; }
.btn.btn-mini { padding: 4px 8px; font-size: 12px; box-shadow: 0 3px 0 #1e3a8a; }
.btn.copied { filter: hue-rotate(-20deg) saturate(1.2); }

/* Modern pill buttons for external/brand actions */
.btn-pill {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 10px 16px; border-radius: 9999px; text-decoration: none;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em;
  border: 1.5px solid var(--border); background: var(--panel); color: var(--text);
  box-shadow: 0 2px 10px rgba(0,0,0,0.20);
  transition: transform .06s ease, box-shadow .2s, filter .2s, background .2s;
  cursor: pointer;
}
.btn-pill:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(0,0,0,0.28); }
.btn-pill:active { transform: translateY(1px); }
.btn-pill .icon { font-size: 16px; }

.btn-brand { background: var(--primary); color: #fff; border-color: rgba(0,0,0,0.15); box-shadow: 0 8px 20px rgba(37,99,235,0.35); }
.btn-brand:hover { background: var(--accent); }

/* 카카오톡 오픈채팅 문의 — 카카오 가이드 색(노랑 #FEE500 · 글자 검정 85% · 아이콘 검정). 테마와 무관하게 같은 색 */
.btn-kakao { background: #FEE500; color: rgba(0,0,0,0.85); border-color: rgba(0,0,0,0.12); box-shadow: 0 8px 20px rgba(254,229,0,0.25); }
.btn-kakao:hover { background: #F5DC00; filter: none; }
.btn-kakao .icon { color: #000; }

.btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
.btn-outline:hover { background: rgba(148,163,184,0.12); }

.btn-mini { padding: 6px 10px; font-size: 12px; box-shadow: none; border-width: 1px; }

/* 로그인 페이지 (/login, views/login.ejs) — .panel 카드 하나를 가운데 놓고 구글 시작 버튼만 둔다 */
.login-wrap { display: flex; justify-content: center; padding: 32px 0 16px; }
.login-card { width: min(520px, 100%); text-align: center; padding: 28px 22px; }
.login-card h1 { margin: 0 0 12px; font-size: 24px; }
.login-lead { color: var(--muted); margin: 0 0 20px; line-height: 1.65; }
.login-card .actions { margin: 0 0 18px; }
.login-note { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0; }
.login-note + .login-note { margin-top: 8px; }
.login-note a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.login-error { border: 1px solid rgba(248,81,73,0.4); background: rgba(248,81,73,0.12); color: #ff7b72; border-radius: 10px; padding: 10px 12px; margin: 0 0 16px; font-size: 14px; }
[data-theme="light"] .login-error { color: #991b1b; }
/* 구글 버튼: 밝은 바탕 + 어두운 글자(구글 브랜드 가이드의 기본 버튼 톤). 아이콘은 icons.json 의 google */
.btn-google { background: #ffffff; color: #1f1f1f; border-color: #dadce0; box-shadow: 0 8px 20px rgba(0,0,0,0.25); min-width: 240px; }
.btn-google:hover { background: #f8f9fa; filter: none; }
.btn-google .icon { color: #4285f4; }
@media (max-width: 520px) { .login-card h1 { font-size: 20px; } .btn-google { width: 100%; } }

/* Theme toggle: segmented control with a sliding knob.
   Geometry (border-box): track padding 4px, border 1.5px; each option is a FIXED width (40px <640px: 12px pad + 16px icon + 12px pad;
   84px ≥640px: icon + 6px gap + 12px label, centred). Knob: left 4px, width calc(50% − 4px) of the track's padding box
   = (2·optW + 8)/2 − 4 = optW exactly, so translateX(100%) lands on the second option:
     <640px : padding box 88px → knob 40px, light x=4..44, dark x=44..84 (≤ 88 − 4)
     ≥640px : padding box 176px → knob 84px, light x=4..88, dark x=88..172 (≤ 176 − 4) */
.theme-toggle {
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center;
  gap: 0; margin-left: 12px; padding: 4px; border-radius: 12px; background: var(--panel);
  border: 1.5px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,0.25); isolation: isolate;
}
[data-theme="light"] .theme-toggle { box-shadow: 0 2px 10px rgba(15,23,42,0.10); }
.theme-option {
  position: relative; z-index: 1; appearance: none; background: transparent; border: 0; color: var(--muted);
  cursor: pointer; width: 40px; height: 32px; padding: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0;
}
.theme-option .icon { font-size: 16px; }
.theme-option .label { display: none; }
@media (min-width: 640px) { .theme-option { width: 84px; } .theme-option .label { display: inline; } }
.theme-option:hover { color: var(--text); }
.theme-option[aria-pressed="true"] { color: var(--text); }
.theme-option:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.theme-option .icon-sun { color: #fbbf24; }
.theme-option .icon-moon { color: #60a5fa; }
[data-theme="light"] .theme-option .icon-sun { color: #b45309; }  /* amber-700: 4.5:1 on the knob (#f1f1f2) it always sits on in light mode, 5.0:1 on white (amber-600 was 2.8 on knob) */
[data-theme="light"] .theme-option .icon-moon { color: #2563eb; }
.theme-slider {
  position: absolute; z-index: 0; left: 4px; top: 4px; bottom: 4px; width: calc(50% - 4px);
  border-radius: 8px; background: rgba(148,163,184,0.15); border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,0.20);
  transform: translateX(0); transition: transform .2s ease;
}
[data-theme="light"] .theme-slider { background: rgba(15,23,42,0.06); }
:root[data-theme="dark"] .theme-slider { transform: translateX(100%); }
@media (prefers-reduced-motion: reduce) { .theme-slider { transition: none; } }

/* 서버 주소 등 한 번에 긁어 복사할 값 — 클릭 한 번이면 전체 선택된다(JS 없음) */
.addr { user-select: all; -webkit-user-select: all; font-weight: 600; white-space: nowrap; }
/* 접속 주소 안내(카카오톡 오픈채팅으로만 배포) */
.addr-note { color: var(--muted); font-size: 13px; font-weight: 500; }
.panel > p.addr-line, .card-item.body-card p.addr-line { margin: 8px 0 0; font-size: 14px; color: var(--muted); }

/* 모드 안내 (/mods, views/mods.ejs): 섹션(h2) 아래 .grid 에 .panel.mod-card 카드. 명령어는 <code> 하나씩, 클릭하면 전체 선택 */
.mods-section { margin-top: 28px; }
.mods-section > h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.mods-section > .grid { margin-top: 12px; }
.mod-card h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 6px; font-size: 17px; }
.mod-card h3 small { font-size: 12px; font-weight: 500; color: var(--muted); }
.mod-card > p { color: var(--text); }
.cmd-list { margin: 10px 0 0; padding: 0; list-style: none; font-size: 14px; }
.cmd-list li { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.cmd-list code { user-select: all; -webkit-user-select: all; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmd-list span { color: var(--muted); }
.mod-note { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.mod-note strong { color: var(--text); font-weight: 600; }
.mod-levels { margin: 10px 0 0; font-size: 13px; line-height: 1.6; }
.mod-levels dt { float: left; clear: left; min-width: 2.4em; font-weight: 700; font-variant-numeric: tabular-nums; }
.mod-levels dd { margin: 0 0 2px 2.6em; color: var(--muted); }

@media (max-width: 520px) {
  .hero h1 { font-size: 20px; }
  .hero p { font-size: 16px; }
  h1 { font-size: 22px; }
}