/* =========================================================
   별의 종말 - 화면 디자인 (style.css)

   테마: html[data-theme] 로 5가지 색 테마를 바꿉니다. (속성이 없으면 어둠)
     dark 어둠(기본) · light 밝기 · pink 분홍 · sky 하늘 · green 연두
   테마는 "색 토큰"만 바꾸고 크기 · 여백 · 글꼴은 그대로라 배치가 달라지지 않습니다.
   규칙에는 색을 직접 쓰지 않고 아래 토큰만 씁니다. 새 토큰을 만들면 다섯 테마 모두에 정의해 주세요.

   토큰 설명
     --bg 전체 배경 / --panel 주요 패널 / --panel-sunk 패널 안 보조 영역 / --raised 버튼 · 칩
     --panel-edge 패널 윤곽 (어둠은 없음, 밝은 테마는 옅은 테두리 그림자)
     --line · --line-soft 테두리 · 구분선 / --input-bg 입력칸 배경 / --placeholder 입력 안내 글자
     --text · --text-2 · --text-3 글자 (본문 · 보조 · 흐린 설명)
     --accent 강조 / --accent-hover 강조 버튼 위 / --accent-ink 강조 버튼 위 글자 / --accent-soft 강조 옅은 바탕
     --ok · --warn · --bad 상태 글자색, --ok-soft · --warn-soft · --bad-soft · --bad-row 상태 옅은 바탕
     --on-bad 빨간 배지 위 글자 / --live-bg 진행 중 배지 / --hp · --hp-enemy · --burn · --focus 전투 막대 · 숫자
     --npc · --player · --player-ink 인물 표시 / --g0 ~ --g4 등급색 (0 일반 · 1 고급(초록) · 2 레어 · 3 에픽 · 4 레전더리)
       장비 · 아이템은 등급 번호 그대로, 패시브 · 칭호(4단계)는 passiveGradeCls() 로 g0 · g2 · g3 · g4 를 씀
     --ink-shadow 막대 · 떠오르는 숫자의 글자 그림자 / --shadow · --shadow-lg 그림자 / --overlay 팝업 뒤 가림막
     --toast-bg 알림 / --doc-bg 문서 블록 / --sky-star ~ --sky-star-5 하늘 별 / --sky-tint-0 하늘 기본 빛
     --disabled-o 사용할 수 없는 버튼 투명도 / --disabled-text 사용할 수 없는 입력 글자

   어둠 테마: 흑색 · 회색. 기준색 #3B3B3B 는 "주요 패널"에 쓰고,
   배경은 더 어둡게, 패널 안의 보조 영역은 조금 더 어둡게, 버튼·입력은 조금 밝게 해서
   명도 차이로 계층을 나눕니다. 강조색(호박색)은 버튼 · 선택 상태 · 중요한 수치에만 씁니다.
   밝은 테마들: 흰색에 가까운 배경 위에 패널을 옅은 테두리로 나누고, 글자 · 상태색은 진하게 해서
   패널 위에서 4.5:1 이상 대비를 맞췄습니다 (흐린 설명 --text-3 은 3:1 이상).

   글자 크기: 모든 크기가 rem 단위라 html[data-font] 하나로 화면 전체가 바뀝니다.
     소 14px · 중 16px(기본) · 대 18px
   ========================================================= */
:root {
  --f-display: "Gowun Batang", "Nanum Myeongjo", serif;
  --f-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --f-num: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --r: 0.625rem;          /* 모서리 */
  --gap: 1rem;            /* 패널 사이 간격 */
  --pad: 1.125rem;        /* 패널 안쪽 여백 */
  --ctl-h: 2.375rem;      /* 버튼 · 입력 높이 */
}

/* ----- 어둠 (기본) ----- */
:root, html[data-theme="dark"] {
  /* 배경과 면 (어두운 → 밝은) */
  --bg: #161616;          /* 전체 배경 */
  --panel: #3b3b3b;       /* 주요 패널 (기준색) */
  --panel-sunk: #303030;  /* 패널 안 보조 영역 (조금 어둡게) */
  --panel-edge: none;     /* 패널 윤곽 (어둠은 명도 차이로만 구분) */
  --raised: #4a4a4a;      /* 버튼 · 입력 (조금 밝게) */
  --raised-hover: #575757;
  --line: #4d4d4d;        /* 저채도 테두리 · 구분선 */
  --line-soft: #444444;
  --input-bg: #303030;
  --placeholder: #8a8a8a;
  /* 글자 */
  --text: #ededed;
  --text-2: #c4c4c4;      /* 보조 (최종 점검: 버튼 · 칩 바탕에서도 대비 4.5 이상) */
  --text-3: #a8a8a8;      /* 흐린 설명 (최종 점검: 패널 위 대비 4.5 이상) */
  /* 강조 (제한적으로 사용) */
  --accent: #e3a94f;
  --accent-hover: #f0b964;
  --accent-ink: #1c1407;
  --accent-soft: rgba(227, 169, 79, 0.16);
  /* 상태 (색 + 글자 기호를 함께 씀) */
  --ok: #8fd19e;
  --warn: #e3c14f;
  --bad: #e27a63;
  --info: #b4b4b4;
  --ok-soft: rgba(124, 196, 140, 0.14);
  --warn-soft: rgba(227, 193, 79, 0.14);
  --bad-soft: rgba(226, 122, 99, 0.12);
  --bad-row: rgba(226, 122, 99, 0.08);
  --on-bad: #ededed;      /* 빨간 배지 위 글자 */
  --live-bg: #d9674f;     /* '진행 중' 배지 바탕 */
  /* 전투 */
  --hp: #7cc48c;
  --hp-enemy: #d9674f;
  --burn: #f0954a;
  --focus: #c79be8;
  --npc: #6cc3b6;         /* NPC 표시 (청록) */
  --player: #e8dcc4;      /* 실제 플레이어 표시 (밝은 상아색) */
  --player-ink: #1b1b1b;
  /* 등급 */
  --g0: #b4b4b4;
  --g1: #74c95c;   /* 고급 (초록) */
  --g2: #8bbbea;
  --g3: #cdaaee;
  --g4: #f0a640;
  /* 그림자 · 겹침 */
  --ink-shadow: #000;
  --shadow: rgba(0, 0, 0, 0.35);
  --shadow-lg: rgba(0, 0, 0, 0.5);
  --overlay: rgba(0, 0, 0, 0.65);
  --toast-bg: #4a4a4a;
  --doc-bg: #2c2a27;
  --disabled-o: 0.4;
  --disabled-text: #8a8a8a;
  /* 하늘 */
  --sky-star: #fff;
  --sky-star-2: #ddd;
  --sky-star-3: #bbb;
  --sky-star-4: #ccc;
  --sky-star-5: #eee;
  --sky-tint-0: rgba(70, 70, 70, 0.25);
  color-scheme: dark;
}

/* ----- 밝기: 흰 바탕 · 옅은 회색 면 · 진한 회색 글자 ----- */
html[data-theme="light"] {
  --bg: #f2f3f5;
  --panel: #ffffff;
  --panel-sunk: #f3f4f6;
  --panel-edge: 0 0 0 1px #e1e4e8, 0 1px 2px rgba(20, 24, 32, 0.05);
  --raised: #e7e9ec;
  --raised-hover: #dadde2;
  --line: #cfd3d9;
  --line-soft: #e4e6ea;
  --input-bg: #ffffff;
  --placeholder: #747b86;
  --text: #1f2328;
  --text-2: #4a515c;
  --text-3: #5d636d;
  --accent: #87500f;
  --accent-hover: #844d0e;
  --accent-ink: #ffffff;
  --accent-soft: rgba(196, 128, 40, 0.13);
  --ok: #26703a;
  --warn: #866000;
  --bad: #be3b26;
  --info: #4a515c;
  --ok-soft: rgba(43, 122, 61, 0.07);
  --warn-soft: rgba(214, 160, 20, 0.1);
  --bad-soft: rgba(190, 59, 38, 0.09);
  --bad-row: rgba(190, 59, 38, 0.06);
  --live-bg: #c4452f;
  --on-bad: #ffffff;
  --hp: #4fae66;
  --hp-enemy: #e8826c;
  --burn: #b85a12;
  --focus: #8247bd;
  --npc: #157a6c;
  --player: #b8925a;
  --player-ink: #1b1b1b;
  --g0: #686e78;
  --g1: #237a35;   /* 고급 (초록) */
  --g2: #2a68ad;
  --g3: #8045b8;
  --g4: #a35f00;
  --ink-shadow: rgba(255, 255, 255, 0.85);
  --shadow: rgba(20, 24, 32, 0.1);
  --shadow-lg: rgba(20, 24, 32, 0.16);
  --overlay: rgba(20, 24, 32, 0.42);
  --toast-bg: #ffffff;
  --doc-bg: #faf7f1;
  --disabled-o: 0.45;
  --disabled-text: #8a9099;
  --sky-star: rgba(40, 46, 58, 0.55);
  --sky-star-2: rgba(40, 46, 58, 0.42);
  --sky-star-3: rgba(40, 46, 58, 0.32);
  --sky-star-4: rgba(40, 46, 58, 0.32);
  --sky-star-5: rgba(40, 46, 58, 0.5);
  --sky-tint-0: rgba(150, 156, 168, 0.18);
  color-scheme: light;
}

/* ----- 분홍: 옅은 분홍 바탕 · 분홍 패널 · 진한 분홍 강조 ----- */
html[data-theme="pink"] {
  --bg: #fdf1f4;
  --panel: #fffafb;
  --panel-sunk: #fcebf0;
  --panel-edge: 0 0 0 1px #f3d3dd, 0 1px 2px rgba(90, 30, 50, 0.05);
  --raised: #f8dde6;
  --raised-hover: #f3ccd9;
  --line: #e9bfcd;
  --line-soft: #f4d9e2;
  --input-bg: #ffffff;
  --placeholder: #8f6878;
  --text: #3a2a30;
  --text-2: #64474f;
  --text-3: #775560;
  --accent: #9e3358;
  --accent-hover: #a03359;
  --accent-ink: #ffffff;
  --accent-soft: rgba(212, 86, 127, 0.12);
  --ok: #256b3a;
  --warn: #855a00;
  --bad: #b8321f;
  --info: #64474f;
  --ok-soft: rgba(43, 117, 66, 0.07);
  --warn-soft: rgba(214, 160, 20, 0.1);
  --bad-soft: rgba(184, 50, 31, 0.09);
  --bad-row: rgba(184, 50, 31, 0.06);
  --live-bg: #c4452f;
  --on-bad: #ffffff;
  --hp: #4fae66;
  --hp-enemy: #e8826c;
  --burn: #b1530f;
  --focus: #7f42b5;
  --npc: #13776a;
  --player: #c9956f;
  --player-ink: #2a1a10;
  --g0: #765c66;
  --g1: #22743a;   /* 고급 (초록) */
  --g2: #2a63a8;
  --g3: #7c3fb3;
  --g4: #9c5800;
  --ink-shadow: rgba(255, 255, 255, 0.85);
  --shadow: rgba(90, 30, 50, 0.1);
  --shadow-lg: rgba(90, 30, 50, 0.16);
  --overlay: rgba(60, 25, 38, 0.42);
  --toast-bg: #ffffff;
  --doc-bg: #fbf3ea;
  --disabled-o: 0.45;
  --disabled-text: #a08590;
  --sky-star: rgba(120, 50, 80, 0.5);
  --sky-star-2: rgba(120, 50, 80, 0.38);
  --sky-star-3: rgba(120, 50, 80, 0.28);
  --sky-star-4: rgba(120, 50, 80, 0.32);
  --sky-star-5: rgba(120, 50, 80, 0.5);
  --sky-tint-0: rgba(230, 160, 185, 0.22);
  color-scheme: light;
}

/* ----- 하늘: 옅은 하늘색 바탕 · 흰 패널 · 파란 강조 ----- */
html[data-theme="sky"] {
  --bg: #eaf3fc;
  --panel: #ffffff;
  --panel-sunk: #eff5fc;
  --panel-edge: 0 0 0 1px #d6e4f3, 0 1px 2px rgba(20, 50, 90, 0.05);
  --raised: #deeaf7;
  --raised-hover: #cfe0f3;
  --line: #bfd3ea;
  --line-soft: #dce8f5;
  --input-bg: #ffffff;
  --placeholder: #66788f;
  --text: #1c2a3b;
  --text-2: #435369;
  --text-3: #55647a;
  --accent: #235e9f;
  --accent-hover: #245c9a;
  --accent-ink: #ffffff;
  --accent-soft: rgba(47, 116, 192, 0.11);
  --ok: #26763f;
  --warn: #855e00;
  --bad: #bb3826;
  --info: #435369;
  --ok-soft: rgba(38, 118, 63, 0.07);
  --warn-soft: rgba(214, 160, 20, 0.1);
  --bad-soft: rgba(187, 56, 38, 0.09);
  --bad-row: rgba(187, 56, 38, 0.06);
  --live-bg: #c4452f;
  --on-bad: #ffffff;
  --hp: #4fae66;
  --hp-enemy: #e8826c;
  --burn: #b3570f;
  --focus: #7d44b8;
  --npc: #11766a;
  --player: #b8925a;
  --player-ink: #1b1b1b;
  --g0: #5f6f84;
  --g1: #217636;   /* 고급 (초록) */
  --g2: #2163b0;
  --g3: #7b40b5;
  --g4: #a05c00;
  --ink-shadow: rgba(255, 255, 255, 0.85);
  --shadow: rgba(20, 50, 90, 0.1);
  --shadow-lg: rgba(20, 50, 90, 0.16);
  --overlay: rgba(16, 32, 56, 0.42);
  --toast-bg: #ffffff;
  --doc-bg: #f7f4ec;
  --disabled-o: 0.45;
  --disabled-text: #8696aa;
  --sky-star: rgba(30, 60, 110, 0.5);
  --sky-star-2: rgba(30, 60, 110, 0.38);
  --sky-star-3: rgba(30, 60, 110, 0.28);
  --sky-star-4: rgba(30, 60, 110, 0.32);
  --sky-star-5: rgba(30, 60, 110, 0.5);
  --sky-tint-0: rgba(140, 185, 235, 0.25);
  color-scheme: light;
}

/* ----- 연두: 부드러운 연두 · 옅은 노랑 (형광색 없이) ----- */
html[data-theme="green"] {
  --bg: #f3f8e9;
  --panel: #fbfdf3;
  --panel-sunk: #f0f6e1;
  --panel-edge: 0 0 0 1px #dde9c4, 0 1px 2px rgba(40, 60, 20, 0.05);
  --raised: #e4eecd;
  --raised-hover: #d8e6bb;
  --line: #ccdcae;
  --line-soft: #e2ecce;
  --input-bg: #fffff8;
  --placeholder: #6d7b5f;
  --text: #28331f;
  --text-2: #4a583e;
  --text-3: #5a684f;
  --accent: #3b6a1e;
  --accent-hover: #3a681d;
  --accent-ink: #ffffff;
  --accent-soft: rgba(242, 214, 117, 0.32);  /* 노란 강조 바탕 */
  --ok: #2b7339;
  --warn: #7f5b00;
  --bad: #b33a24;
  --info: #4a583e;
  --ok-soft: rgba(79, 138, 43, 0.08);
  --warn-soft: rgba(242, 214, 117, 0.45);
  --bad-soft: rgba(179, 58, 36, 0.09);
  --bad-row: rgba(179, 58, 36, 0.06);
  --live-bg: #c4452f;
  --on-bad: #ffffff;
  --hp: #6fb04a;
  --hp-enemy: #e8826c;
  --burn: #b0560f;
  --focus: #7a46b0;
  --npc: #13756a;
  --player: #d9b85a;
  --player-ink: #2a2410;
  --g0: #66725a;
  --g1: #16683c;   /* 고급 (초록) (연두 테마 강조색과 구분되는 짙은 에메랄드) */
  --g2: #2563a8;
  --g3: #7a40b0;
  --g4: #9a5c00;
  --ink-shadow: rgba(255, 255, 240, 0.85);
  --shadow: rgba(40, 60, 20, 0.1);
  --shadow-lg: rgba(40, 60, 20, 0.16);
  --overlay: rgba(30, 44, 18, 0.4);
  --toast-bg: #fffff8;
  --doc-bg: #fbf6dc;
  --disabled-o: 0.45;
  --disabled-text: #8e9a80;
  --sky-star: rgba(60, 80, 30, 0.5);
  --sky-star-2: rgba(60, 80, 30, 0.38);
  --sky-star-3: rgba(60, 80, 30, 0.28);
  --sky-star-4: rgba(60, 80, 30, 0.32);
  --sky-star-5: rgba(60, 80, 30, 0.5);
  --sky-tint-0: rgba(242, 214, 117, 0.3);
  color-scheme: light;
}
html { font-size: 16px; }
html[data-font="s"] { font-size: 14px; }
html[data-font="m"] { font-size: 16px; }
html[data-font="l"] { font-size: 18px; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--f-body); font-size: 0.9375rem; line-height: 1.55;
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
  padding-block: 0.875rem 3rem;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
code { font-family: var(--f-num); font-size: 0.8125rem; background: var(--panel-sunk); padding: 0.125rem 0.375rem; border-radius: 0.25rem; }

/* ----- 글자 위계 ----- */
.h2 { font-family: var(--f-display); font-weight: 700; font-size: 1.3125rem; line-height: 1.3; text-wrap: balance; }
.h3 { font-weight: 600; font-size: 1.0625rem; }
.section-title { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 0.75rem; display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.sub-title { font-size: 0.875rem; font-weight: 600; color: var(--text-2); margin: 0.75rem 0 0.5rem; }
.muted { color: var(--text-2); font-size: 0.875rem; }
.dim { color: var(--text-3); }
.small { font-size: 0.75rem; }
.block { display: block; }
.right { text-align: right; }
.strike { text-decoration: line-through; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.accent { color: var(--accent); }
.good { color: var(--ok); }
.bad { color: var(--bad); }
.min0 { min-width: 0; }
.top-gap { margin-top: 0.75rem; }
.eyebrow { font-size: 0.8125rem; letter-spacing: 0.12em; color: var(--text-3); }

/* 상태 표시: 색 + 기호 + 글자 */
.status { display: inline-flex; align-items: baseline; gap: 0.25rem; font-weight: 500; }
.status-ok { color: var(--ok); }
.status-warn { color: var(--warn); }
.status-bad { color: var(--bad); }
.status-info { color: var(--info); }

/* ----- 레이아웃 ----- */
.game { max-width: 1200px; margin: 0 auto; display: grid; gap: var(--gap); }
.panel { display: grid; gap: var(--gap); }
.grid { display: grid; gap: var(--gap); align-items: start; }
.grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.span-2 { grid-column: span 2; }
.stack { display: grid; gap: var(--gap); min-width: 0; }
.panel-box { background: var(--panel); box-shadow: var(--panel-edge); border-radius: var(--r); padding: var(--pad); min-width: 0; display: grid; gap: 0.625rem; align-content: start; }
.sub-box { background: var(--panel-sunk); border-radius: 0.5rem; padding: 0.75rem 0.875rem; display: grid; gap: 0.5rem; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.filters { margin-top: 0.75rem; }
.raid-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); }
.rank-grid { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
.empty-state { justify-items: start; padding: 1.75rem; }

/* ----- 상단 ----- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem 1.5rem; flex-wrap: wrap; padding-bottom: 0.25rem; }
.topbar .who { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.logo-small { font-family: var(--f-display); font-weight: 700; color: var(--text); font-size: 1.25rem; }
.conn { font-size: 0.75rem; padding: 0.125rem 0.625rem; border-radius: 999px; background: var(--panel); color: var(--text-2); }
.conn.on { color: var(--ok); }
.conn.warn { color: var(--warn); }
.wallet { display: flex; gap: 0.375rem 1.25rem; flex-wrap: wrap; }
.wallet div { display: grid; }
.wallet dt { font-size: 0.6875rem; color: var(--text-3); }
.wallet dd { margin: 0; font-size: 0.9375rem; }

.tabs { display: flex; gap: 0.125rem; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab {
  background: none; border: none; padding: 0.5625rem 0.875rem; cursor: pointer; color: var(--text-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 500; font-size: 0.9375rem;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tab-admin { color: var(--accent); }
.badge {
  display: inline-grid; place-items: center; min-width: 1.125rem; height: 1.125rem; padding: 0 0.3125rem; margin-left: 0.25rem;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.6875rem; font-weight: 600; font-family: var(--f-num);
}
.badge-live { background: var(--live-bg); color: var(--on-bad); }
.badge-bad { background: var(--bad); color: var(--on-bad); }

/* ----- 버튼 (높이 · 모서리 통일) ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  min-height: var(--ctl-h); padding: 0 1rem; border: 1px solid transparent; border-radius: 0.5rem;
  background: var(--raised); color: var(--text); cursor: pointer; white-space: nowrap; font-weight: 500; font-size: 0.9375rem; line-height: 1.2;
}
.btn:hover:not(:disabled) { background: var(--raised-hover); }
.btn:disabled { opacity: var(--disabled-o); cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-ghost:hover:not(:disabled) { background: var(--raised); }
.btn-danger { background: transparent; border-color: var(--bad); color: var(--bad); }
.btn-on { border-color: var(--accent); color: var(--accent); }
.btn-sm { min-height: 1.875rem; padding: 0 0.75rem; font-size: 0.8125rem; border-radius: 0.4375rem; }
.btn-lg { min-height: 3rem; padding: 0 1.375rem; font-size: 1.0625rem; }
.btn-block { width: 100%; }

/* 구분 선택 버튼 (탭 안의 전환) */
.seg { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; background: var(--panel-sunk); padding: 0.25rem; border-radius: 0.5625rem; }
.seg-wrap { max-width: 100%; }
.seg-btn {
  border: none; background: transparent; color: var(--text-2); min-height: 2rem; padding: 0 0.75rem; border-radius: 0.375rem;
  cursor: pointer; font-size: 0.875rem; white-space: nowrap;
}
.seg-btn:hover:not(:disabled) { color: var(--text); }
.seg-btn[aria-pressed="true"] { background: var(--raised); color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.seg-btn:disabled { opacity: var(--disabled-o); cursor: not-allowed; }

/* 입력 */
.input {
  min-height: var(--ctl-h); background: var(--input-bg); border: 1px solid var(--line); border-radius: 0.5rem;
  padding: 0.375rem 0.75rem; max-width: 22rem; width: 100%;
}
.input-sm { min-height: 2rem; width: auto; padding: 0.125rem 0.5rem; font-size: 0.875rem; }
textarea.input { resize: vertical; max-width: none; }
.input::placeholder, .num-input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
.input:disabled, .num-input:disabled { color: var(--disabled-text); border-style: dashed; cursor: not-allowed; }
.num-input {
  width: 6rem; min-height: 2rem; background: var(--input-bg); border: 1px solid var(--line); border-radius: 0.375rem;
  padding: 0.125rem 0.375rem; font-family: var(--f-num); font-size: 0.875rem;
}
.num-input.changed { border-color: var(--accent); }
.num-input.invalid { border-color: var(--bad); background: var(--bad-soft); }
.unit { margin-left: 0.25rem; }
.input-name { max-width: 12rem; font-weight: 600; }
.switch { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; cursor: pointer; }
.switch input, input[type="checkbox"] { width: 1.0625rem; height: 1.0625rem; accent-color: var(--accent); }
.form { display: grid; gap: 0.375rem; }
.form .input { max-width: none; }
.form-grid { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 0.5rem 1rem; align-items: center; font-size: 0.875rem; }

/* 막대 */
.bar { height: 0.375rem; background: var(--panel-sunk); border-radius: 999px; overflow: hidden; }
.bar.thin { height: 0.25rem; margin-top: 0.25rem; }
.bar.grow { flex: 1; min-width: 5rem; }
.bar-fill { height: 100%; width: 0; background: var(--accent); }
.hpbar { position: relative; height: 0.625rem; background: var(--panel-sunk); border-radius: 999px; overflow: hidden; }
.hpbar-big { height: 1.375rem; border-radius: 0.5rem; }
.hpfill { height: 100%; width: 100%; background: var(--hp); transition: width 0.12s linear; }
.hp-enemy { background: var(--hp-enemy); }
.hp-low { background: var(--burn); }
.hptext { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.8125rem; color: var(--text); text-shadow: 0 1px 2px var(--ink-shadow); }

/* 칩 · 표시 */
.chips { display: inline-flex; gap: 0.375rem; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; font-size: 0.75rem; padding: 0.0625rem 0.5rem; background: var(--raised); border-radius: 999px; color: var(--text-2); white-space: nowrap; }
.chip-accent { color: var(--accent); background: var(--accent-soft); }
.chip-ok { color: var(--ok); background: var(--ok-soft); }
.chip-warn { color: var(--warn); background: var(--warn-soft); }
.kind { display: inline-block; font-size: 0.6875rem; font-weight: 600; padding: 0 0.375rem; border-radius: 0.25rem; vertical-align: 0.0625rem; margin-left: 0.125rem; }
.kind-player { background: var(--player); color: var(--player-ink); }
.kind-npc { color: var(--npc); box-shadow: inset 0 0 0 1px var(--npc); }
.new-tag { font-size: 0.6875rem; font-weight: 600; color: var(--accent-ink); background: var(--accent); padding: 0 0.375rem; border-radius: 0.25rem; }
.status-dot { display: inline-block; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--text-3); margin-right: 0.3125rem; vertical-align: 0.0625rem; }
.status-dot.on { background: var(--ok); }
.alert { padding: 0.75rem 0.875rem; border-radius: 0.5rem; background: var(--panel); box-shadow: var(--panel-edge); border-left: 3px solid var(--text-3); font-size: 0.875rem; }
.alert-bad { border-left-color: var(--bad); }
.alert-warn { border-left-color: var(--warn); }
.notice { padding: 0.625rem 0.75rem; border-radius: 0.5rem; background: var(--panel-sunk); }
.rules { margin: 0; padding-left: 1.125rem; display: grid; gap: 0.25rem; font-size: 0.875rem; color: var(--text-2); }

/* 목록 */
.list { display: grid; gap: 0.25rem; }
.list-row { display: flex; justify-content: space-between; align-items: center; gap: 0.625rem; padding: 0.5625rem 0; border-top: 1px solid var(--line-soft); }
.list-row:first-child { border-top: none; }
.list-btn {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.125rem 0.75rem; align-items: center;
  padding: 0.625rem 0.75rem; border-radius: 0.5rem; border: none; background: transparent; text-align: left; cursor: pointer; color: var(--text);
}
.list-btn:hover:not(:disabled) { background: var(--panel-sunk); }
.list-btn.selected { background: var(--panel-sunk); box-shadow: inset 3px 0 0 var(--accent); }
.list-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* 표 */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th { text-align: left; font-weight: 500; color: var(--text-3); font-size: 0.75rem; padding: 0.375rem 0.5rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 0.5rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; word-break: keep-all; }
.table tr.me td { background: var(--accent-soft); }
.table tr.row-err td { background: var(--bad-row); }
.table .input { max-width: 16rem; }
.rank-no { font-weight: 600; }
.big-rank { font-family: var(--f-num); font-size: 2.75rem; line-height: 1; color: var(--accent); }
.big-rank span { font-size: 1rem; color: var(--text-2); margin-left: 0.25rem; }

/* ----- 파티 슬롯 ----- */
.party-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; }
.party-grid-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.slot { display: grid; gap: 0.4375rem; align-content: start; padding: 0.75rem; border-radius: 0.5rem; background: var(--panel-sunk); min-width: 0; position: relative; }
.slot-player { box-shadow: inset 3px 0 0 var(--player); }
.slot-npc { box-shadow: inset 3px 0 0 var(--npc); }
.slot-empty { background: transparent; box-shadow: inset 0 0 0 1px var(--line); place-items: center; text-align: center; color: var(--text-3); min-height: 5.5rem; }
.slot-empty strong { color: var(--text-2); font-weight: 500; display: block; }
.slot.down { opacity: 0.45; }
.slot-top { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.slot-icon { width: 2.5rem; height: 2.5rem; flex: none; display: grid; place-items: center; font-size: 1.375rem; background: var(--raised); border-radius: 0.5rem; overflow: hidden; }
.slot-name { font-weight: 600; overflow-wrap: anywhere; }
.slot-sub { font-size: 0.8125rem; color: var(--text-2); }
.hp-line { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-2); gap: 0.5rem; }
.skill-line { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--text-3); }
.skill-line .bar { flex: 1; height: 0.25rem; }
.skill-line .bar-fill { background: var(--text-2); }
.roster { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.roster-item { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.25rem 0.25rem 0.625rem; border-radius: 0.5rem; background: var(--panel-sunk); font-size: 0.875rem; }
.pic-wrap { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; }

/* 이미지 */
.pic, .pic-lg, .pv-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pic-sm { width: 1.5rem; height: 1.5rem; border-radius: 0.375rem; object-fit: cover; }
.pic-sm.inline { display: inline-block; vertical-align: middle; }
.detail .bg { width: 100%; max-height: 9rem; object-fit: cover; border-radius: 0.5rem; }

/* 패시브 아이콘 · 등급 */
.pv {
  --g: var(--g0); width: 2.125rem; height: 2.125rem; flex: none; display: grid; place-items: center; border-radius: 0.5rem; font-size: 1.125rem; line-height: 1;
  background: var(--panel-sunk); box-shadow: inset 0 0 0 1.5px var(--g); overflow: hidden;
}
.pv-lg { width: 2.875rem; height: 2.875rem; font-size: 1.5rem; border-radius: 0.625rem; }
.pv-sm { width: 1.625rem; height: 1.625rem; font-size: 0.875rem; border-radius: 0.375rem; }
.pv-empty { --g: var(--line); color: var(--text-3); font-size: 0.875rem; }
.g0 { --g: var(--g0); } .g1 { --g: var(--g1); } .g2 { --g: var(--g2); } .g3 { --g: var(--g3); } .g4 { --g: var(--g4); }
.grade { font-size: 0.75rem; font-weight: 600; color: var(--g); }
.pv-row { display: flex; gap: 0.3125rem; }
.pcard {
  --g: var(--g0); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; align-items: center;
  padding: 0.625rem 0.75rem; border-radius: 0.5rem; background: var(--panel-sunk); box-shadow: inset 3px 0 0 var(--g);
}
.pcard[data-action] { cursor: pointer; }
.pcard.is-target { box-shadow: inset 3px 0 0 var(--g), 0 0 0 2px var(--accent); }
.pcard.is-highlight { box-shadow: inset 3px 0 0 var(--g), 0 0 0 2px var(--text-2); }
.pcard-empty { box-shadow: inset 0 0 0 1px var(--line); background: transparent; }
.pcard-name { font-weight: 600; display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.pcard-actions { display: flex; gap: 0.375rem; flex-wrap: wrap; justify-content: flex-end; }
.plist { display: grid; gap: 0.375rem; }
.passive-head { display: flex; gap: 0.75rem; align-items: center; }

/* 던전 · 난이도 */
.diff-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.diff { display: grid; gap: 0.125rem; text-align: left; padding: 0.625rem; border: 1px solid transparent; border-radius: 0.5rem; background: var(--panel-sunk); cursor: pointer; min-width: 0; color: var(--text); }
.diff .diff-time { font-size: 1.25rem; }
.diff.selected { border-color: var(--accent); }
.diff:disabled { opacity: 0.45; cursor: not-allowed; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.facts-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact { background: var(--panel-sunk); border-radius: 0.5rem; padding: 0.5rem 0.625rem; min-width: 0; }
.fact b { display: block; font-size: 1.125rem; font-family: var(--f-num); font-weight: 500; }
.fact span { font-size: 0.75rem; color: var(--text-2); }
.power-cmp { display: grid; gap: 0.375rem; }

/* ----- 전투 ----- */
.run-head { display: flex; justify-content: space-between; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.run-title { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.stage { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: 1rem; align-items: center; padding: 1.25rem; border-radius: var(--r); background: var(--panel); box-shadow: var(--panel-edge); }
.monster-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.125rem; align-items: center; min-width: 0; }
.token { position: relative; width: 6rem; height: 6rem; border-radius: 50%; display: grid; place-items: center; font-size: 3.125rem; background: var(--panel-sunk); }
.token.boss { width: 7rem; height: 7rem; font-size: 3.75rem; box-shadow: 0 0 0 2px var(--hp-enemy); }
.token img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.token.gone { opacity: 0.2; }
.mon-info { display: grid; gap: 0.5rem; min-width: 0; }
.mon-name { font-size: 1.125rem; font-weight: 600; }
.progress-line { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.pips { display: flex; gap: 0.25rem; }
.pip { width: 0.75rem; height: 0.75rem; border-radius: 0.1875rem; background: var(--panel-sunk); }
.pip.done { background: var(--accent); }
.pip.boss { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--hp-enemy); }
.pip.boss.done { background: var(--hp-enemy); }
.timer-box { display: grid; gap: 0.25rem; justify-items: end; text-align: right; }
.timer { font-size: 2.5rem; line-height: 1; }
.timer.low { color: var(--bad); }
.timer-box .bar { width: 100%; }
.float { position: absolute; left: 50%; top: 4%; pointer-events: none; white-space: nowrap; font-family: var(--f-num); font-size: 1rem; color: var(--text); text-shadow: 0 1px 3px var(--ink-shadow); animation: floatUp 0.85s ease-out forwards; }
.float.crit { color: var(--accent); font-size: 1.3125rem; }
.float.burn { color: var(--burn); font-size: 0.875rem; }
.float.focus { color: var(--focus); }
.float.heal { color: var(--ok); }
.float.hurt { color: var(--bad); }
.float.label { font-family: var(--f-body); font-size: 0.8125rem; color: var(--text-2); }
.slot .float { top: 0; }
@keyframes floatUp { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -2.5rem); opacity: 0; } }
.meter { display: grid; gap: 0.625rem; }
.meter-row { display: grid; gap: 0.25rem; }
.meter-top { display: flex; justify-content: space-between; font-size: 0.8125rem; gap: 0.5rem; flex-wrap: wrap; }
.meter-bar { display: flex; height: 0.5rem; background: var(--panel-sunk); border-radius: 999px; overflow: hidden; }
.meter-bar i { display: block; height: 100%; }
.sw { display: inline-block; width: 0.5625rem; height: 0.5625rem; border-radius: 2px; margin-right: 0.25rem; }
.sw-hit, .seg-hit { background: var(--text-3); }
.sw-skill, .seg-skill { background: var(--text); }
.sw-burn, .seg-burn { background: var(--burn); }
.sw-focus, .seg-focus { background: var(--focus); }
.legend { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.log { list-style: none; margin: 0; padding: 0; max-height: 14rem; overflow-y: auto; display: grid; gap: 0.1875rem; font-size: 0.8125rem; }
.log li { color: var(--text-2); }
.log li.good { color: var(--ok); }
.log li.bad { color: var(--bad); }

/* 결과 */
.result { display: grid; gap: 0.875rem; padding: 1.25rem; border-radius: var(--r); background: var(--panel); box-shadow: var(--panel-edge); border-top: 3px solid var(--ok); }
.result.fail { border-top-color: var(--bad); }
.result-title { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; }
.reward-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.375rem; }
.reward-item { background: var(--panel-sunk); border-radius: 0.5rem; padding: 0.5rem 0.625rem; font-size: 0.8125rem; }
.reward-item b, .reward-item > span { display: block; }
.reward-item b { font-family: var(--f-num); font-weight: 500; font-size: 0.9375rem; }
.item-name-0 { color: var(--g0); } .item-name-1 { color: var(--g1); } .item-name-2 { color: var(--g2); } .item-name-3 { color: var(--g3); } .item-name-4 { color: var(--g4); }

/* 레이드 */
.raid-head { display: flex; gap: 1rem; align-items: center; }
.raid-icon { width: 4rem; height: 4rem; flex: none; border-radius: 0.75rem; display: grid; place-items: center; font-size: 2.25rem; background: var(--panel-sunk); overflow: hidden; }

/* 장비 · 직업 · NPC */
.stat-table { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0; font-size: 0.875rem; }
.stat-table dt { color: var(--text-2); }
.stat-table dd { margin: 0; text-align: right; }
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.625rem; align-items: center; padding: 0.625rem 0; border-top: 1px solid var(--line-soft); }
.item:first-of-type { border-top: none; }
.item-actions { display: flex; gap: 0.375rem; flex-wrap: wrap; justify-content: flex-end; }
.tree { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; gap: 0.875rem; align-items: center; }
.branches { display: grid; gap: 0.875rem; border-left: 2px solid var(--line); padding-left: 0.875rem; }
.branch { display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(9rem, 1fr); gap: 0.75rem; align-items: center; }
.leaves { display: grid; gap: 0.5rem; border-left: 2px dashed var(--line); padding-left: 0.75rem; }
.job-card { display: grid; gap: 0.375rem; padding: 0.75rem; background: var(--panel-sunk); border-radius: 0.5rem; min-width: 0; }
.job-card.current { box-shadow: inset 0 0 0 1.5px var(--accent); }
.job-card.future { opacity: 0.55; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.job-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.req-list { list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; display: grid; gap: 0.125rem; }
.req-list li::before { content: "○ "; color: var(--text-3); }
.req-list li.done { color: var(--ok); }
.req-list li.done::before { content: "● "; }
.npc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--gap); }
.npc-top { display: flex; gap: 0.75rem; align-items: center; }
.npc-portrait { width: 4rem; height: 4rem; flex: none; border-radius: 0.75rem; display: grid; place-items: center; font-size: 2.25rem; background: var(--panel-sunk); overflow: hidden; }
.npc-quote { font-size: 0.875rem; font-style: italic; color: var(--text); }

/* 캐릭터 생성 */
.create { max-width: 45rem; margin: 6vh auto 0; display: grid; gap: 1.75rem; }
.logo { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.75rem, 10vw, 4.5rem); line-height: 1.05; margin: 0.375rem 0 0.625rem; color: var(--text); }
.lede { color: var(--text-2); font-size: 1rem; max-width: 46ch; }
.create-form { display: grid; gap: 0.625rem; }
.starter-jobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.625rem; margin-bottom: 0.75rem; }
.starter { text-align: left; display: grid; gap: 0.25rem; padding: 0.875rem; border: 1px solid transparent; background: var(--panel); box-shadow: var(--panel-edge); border-radius: var(--r); cursor: pointer; color: var(--text); }
.starter[aria-pressed="true"] { border-color: var(--accent); }
.starter-icon { font-size: 1.625rem; }
.starter-name { font-family: var(--f-display); font-weight: 700; font-size: 1.125rem; }

/* 관리자 */
.admin-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.625rem; }
.tile { display: grid; gap: 0.125rem; padding: 0.875rem; border-radius: var(--r); background: var(--panel); box-shadow: var(--panel-edge); }
.tile b { font-size: 1.75rem; font-weight: 500; }
.tile span { font-size: 0.8125rem; color: var(--text-2); }
.sticky-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; box-shadow: 0 0.5rem 1rem var(--shadow); }
.cfg-table td:first-child { min-width: 10rem; }
.img-list { display: grid; gap: 0.25rem; }
.img-row { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.5rem 0; border-top: 1px solid var(--line-soft); }
.img-preview { width: 3.25rem; height: 3.25rem; border-radius: 0.625rem; background: var(--panel-sunk); display: grid; place-items: center; font-size: 1.625rem; overflow: hidden; }
.img-preview img { width: 100%; height: 100%; object-fit: cover; }
.img-row input[type="file"] { font-size: 0.75rem; max-width: 14rem; }
.change-list { margin: 0; padding-left: 1.125rem; max-height: 16rem; overflow-y: auto; font-size: 0.8125rem; display: grid; gap: 0.125rem; }

/* 알림 · 팝업 */
.toasts { position: fixed; z-index: 30; display: grid; gap: 0.5rem; justify-items: end; pointer-events: none;
  right: max(1rem, env(safe-area-inset-right, 0px)); left: max(1rem, env(safe-area-inset-left, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
.toast { padding: 0.625rem 0.875rem; border-radius: 0.5rem; background: var(--toast-bg); max-width: 24rem; border-left: 3px solid var(--ok); box-shadow: 0 0.5rem 1.5rem var(--shadow-lg); }
.toast.bad { border-left-color: var(--bad); }
.modal-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 1rem; background: var(--overlay); }
.modal { width: min(36rem, 100%); max-height: 88vh; overflow-y: auto; padding: 1.375rem; background: var(--panel); box-shadow: var(--panel-edge); border-radius: var(--r); display: grid; gap: 0.875rem; }
.modal h2 { font-family: var(--f-display); font-size: 1.375rem; }
.modal-buttons { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; }

/* 좁은 화면 */
@media (max-width: 62rem) {
  .grid-2, .raid-grid, .rank-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .party-grid, .party-grid-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diff-grid, .facts-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .img-row { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .img-row .actions { grid-column: 1 / -1; }
}
@media (max-width: 38rem) {
  .stage { grid-template-columns: 1fr; }
  .timer-box { justify-items: start; text-align: left; }
  .timer { font-size: 2rem; }
  .token { width: 4.5rem; height: 4.5rem; font-size: 2.375rem; }
  .token.boss { width: 5rem; height: 5rem; font-size: 2.75rem; }
  .tree, .branch, .form-grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* =========================================================
   세계 · 스토리 (별의 종말)
   ========================================================= */
/* 하늘: 세계 단계에 따라 별빛이 줄어듦 (회색 테마 유지, 색은 아주 옅게) */
.sky { position: fixed; inset: 0 0 auto 0; height: 9rem; pointer-events: none; z-index: 0; opacity: var(--sky-o, 0.55);
  background-image: radial-gradient(1px 1px at 12% 30%, var(--sky-star) 50%, transparent 51%), radial-gradient(1px 1px at 28% 62%, var(--sky-star-2) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 18%, var(--sky-star) 50%, transparent 51%), radial-gradient(1px 1px at 63% 48%, var(--sky-star-4) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 22%, var(--sky-star) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 90% 58%, var(--sky-star-5) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 75%, var(--sky-star-3) 50%, transparent 51%), radial-gradient(1px 1px at 7% 80%, var(--sky-star-2) 50%, transparent 51%),
    linear-gradient(to bottom, var(--sky-tint, var(--sky-tint-0)), transparent); }
html[data-phase="omen"] { --sky-o: 0.5; }
html[data-phase="spread"] { --sky-o: 0.38; --sky-tint: rgba(80, 66, 56, 0.25); }
html[data-phase="truth"] { --sky-o: 0.26; --sky-tint: rgba(88, 62, 50, 0.28); }
html[data-phase="prep"] { --sky-o: 0.17; --sky-tint: rgba(96, 58, 46, 0.3); }
html[data-phase="final"] { --sky-o: 0.1; --sky-tint: rgba(110, 54, 40, 0.34); }
html[data-phase="end"], html[data-phase="after"] { --sky-o: 0.04; --sky-tint: rgba(227, 169, 79, 0.12); }
.game { position: relative; z-index: 1; }
.world-chip { font: inherit; font-size: 0.75rem; padding: 0.125rem 0.625rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-sunk); color: var(--text-2); cursor: pointer; }
.world-chip:hover { color: var(--text); border-color: var(--text-3); }

.world-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.world-facts { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: 0; }
.world-facts div { display: grid; gap: 0.125rem; }
.world-facts dt { font-size: 0.75rem; color: var(--text-3); }
.world-facts dd { margin: 0; }
.world-card .h2 { margin-top: 0.125rem; }
.village-lines { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin: 0.5rem 0; }
.story-line { color: var(--text); font-family: var(--f-display); line-height: 1.7; border-left: 2px solid var(--line); padding-left: 0.75rem; margin: 0.5rem 0; }
.small { font-size: 0.8125rem; }
.link-btn { font: inherit; background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.chip-btn { border: 0; cursor: pointer; font: inherit; font-size: 0.75rem; }
.chip-btn:hover { background: var(--raised-hover); color: var(--text); }
.row-between.wrap { flex-wrap: wrap; gap: 0.5rem; }

/* 게시판 목록 */
.post-list { display: grid; gap: 0.375rem; }
.post-row { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; gap: 0.625rem; align-items: start; width: 100%; text-align: left;
  font: inherit; color: inherit; background: var(--panel-sunk); border: 1px solid transparent; border-radius: 0.5rem; padding: 0.625rem 0.75rem; cursor: pointer; }
.post-row:hover { border-color: var(--line); }
.post-row.unread b { color: var(--text); }
.post-row.read { opacity: 0.82; }
.post-dot { color: var(--accent); line-height: 1.5; }
.post-row.read .post-dot { color: var(--text-3); }
.post-row .right { text-align: right; line-height: 1.45; }
.pager { margin-top: 0.75rem; }
.latest { border-left: 3px solid var(--accent); }

/* 읽기 화면 · 본문 블록 */
.reader { max-width: 46rem; margin: 0 auto; }
.reader-title { font-family: var(--f-display); font-size: 1.5rem; margin: 0.25rem 0; line-height: 1.35; overflow-wrap: anywhere; }
.reader-body { display: grid; gap: 0.75rem; margin: 1rem 0; line-height: 1.8; overflow-wrap: anywhere; }
.reader-body p, .sb p { margin: 0; }
.sb-narr { font-family: var(--f-display); font-size: 1.03rem; }
.sb { border-radius: 0.5rem; }
.sb-say { background: var(--panel-sunk); padding: 0.625rem 0.75rem; border-left: 3px solid var(--npc); }
.sb-who { font-size: 0.8125rem; font-weight: 600; color: var(--npc); margin-bottom: 0.125rem; display: flex; gap: 0.375rem; align-items: center; flex-wrap: wrap; }
.sb-icon { font-size: 1rem; }
.sb-record, .sb-doc, .sb-letter, .sb-notice, .sb-personal { padding: 0.75rem 0.875rem; background: var(--panel-sunk); }
.sb-record { border: 1px dashed var(--line); font-size: 0.9375rem; }
.sb-doc { border: 1px solid var(--line); font-family: var(--f-display); background: var(--doc-bg); }
.sb-letter { border-left: 3px solid var(--player); font-family: var(--f-display); }
.sb-notice { border-left: 3px solid var(--accent); }
.sb-personal { border: 1px solid var(--accent); background: var(--accent-soft); display: grid; gap: 0.5rem; }
.sb-title { font-size: 0.75rem; letter-spacing: 0.06em; color: var(--text-3); margin-bottom: 0.375rem; font-family: var(--f-body); }
.reader-links { margin: 0.5rem 0; }

/* 도감 · 수집품 */
.codex-grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.codex-card { display: flex; gap: 0.625rem; align-items: center; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--panel-sunk); border: 1px solid transparent; border-radius: 0.5rem; padding: 0.5rem 0.625rem; min-width: 0; }
.codex-card:hover { border-color: var(--line); }
.codex-card.unknown { opacity: 0.55; }
.codex-icon { font-size: 1.375rem; width: 2rem; text-align: center; flex: none; }
.resident .h3 { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
details summary { cursor: pointer; color: var(--text-2); font-size: 0.875rem; margin-top: 0.5rem; }
.lore { display: grid; gap: 0.375rem; }
.log li.story-line { color: var(--text); font-family: var(--f-display); border-left: 2px solid var(--line); padding-left: 0.5rem; }
.log li.warn { color: var(--warn); }
.toast-link { font: inherit; color: inherit; text-align: left; cursor: pointer; pointer-events: auto; border: 0; border-left: 3px solid var(--accent); }
.toast-link:hover { background: var(--raised-hover); }
@media (max-width: 560px) {
  .post-row { grid-template-columns: 1rem minmax(0, 1fr); }
  .post-row .right { grid-column: 2; text-align: left; }
  .post-row .right br { display: none; }
  .reader-title { font-size: 1.25rem; }
}
/* 설명 문장이 긴 표 (세계 탭 · 도감 · 아이템 · 인물): 왼쪽 정렬, 좁은 화면에서는 한 줄씩 */
#tab-world .stat-table, .modal .stat-table { grid-template-columns: minmax(6rem, auto) 1fr; }
#tab-world .stat-table dd, .modal .stat-table dd { text-align: left; line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  #tab-world .stat-table, .modal .stat-table { grid-template-columns: 1fr; gap: 0.125rem; }
  #tab-world .stat-table dd, .modal .stat-table dd { margin-bottom: 0.375rem; }
}
.day-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.75rem, 1fr)); gap: 0.375rem; margin: 0.5rem 0 0.75rem; }
.day-cell { display: grid; gap: 0.0625rem; font: inherit; color: inherit; text-align: center; background: var(--panel-sunk); border: 1px solid transparent; border-radius: 0.375rem; padding: 0.375rem 0.25rem; cursor: pointer; }
.day-cell span { font-size: 0.6875rem; color: var(--text-3); }
.day-cell.selected { border-color: var(--accent); }
.textarea-lg { width: 100%; min-height: 18rem; font-family: var(--f-body); line-height: 1.6; resize: vertical; }
.text-list { display: grid; gap: 0.5rem; }
.text-list textarea { width: 100%; resize: vertical; margin-top: 0.25rem; }