/* ---------- 글꼴 (눈누 무료 글꼴: Pretendard, 부크크 명조) ---------- */
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'BookkMyungjo'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/BookkMyungjo-Lt.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'BookkMyungjo'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/BookkMyungjo-Bd.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* ---------- 테마 토큰 ---------- */
/* 평소: 흰 바탕 모노크롬. 강조색 없이 검정과 굵기 대비로만 위계를 만든다 */
:root {
  --bg: #fafafa;
  --panel: #ffffff;
  --panel-2: #f4f4f5;
  --text: #0a0a0a;
  --muted: #71717a;
  --line: #e4e4e7;
  --line-strong: #d4d4d8;
  --accent: #0a0a0a;
  --accent-text: #fafafa;
  --shine: #a1a1aa;
  --bubble: #f4f4f5;
  --bubble-me: #0a0a0a;
  --bubble-me-text: #fafafa;
  --narr: #27272a;
  --danger: #dc2626;
  --sans: 'Pretendard', 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  --serif: 'BookkMyungjo', 'Noto Serif KR', serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
/* 언어별 글꼴 (js/i18n.js가 html lang을 정한다): 가나·한자는 Noto JP가 맡는다 */
html[lang="ja"] {
  --sans: 'Pretendard', 'Noto Sans JP', 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  --serif: 'Noto Serif JP', 'BookkMyungjo', serif;
}
/* 부크크 명조의 라틴 글자는 영문 본문에 맞지 않아 영어판은 Source Serif로 */
html[lang="en"] { --serif: 'Source Serif 4', 'BookkMyungjo', Georgia, serif; }

body[data-theme="vampire"] {
  --bg: #12060a;
  --panel: #1b0a0e;
  --panel-2: #230d12;
  --text: #f1dfe1;
  --muted: #a0868a;
  --line: #3a1a20;
  --line-strong: #5a2830;
  --accent: #b01a34;
  --accent-text: #fff1f2;
  --shine: #b01a34;
  --bubble: #2a1015;
  --bubble-me: #6e0f20;
  --bubble-me-text: #fbe9eb;
  --narr: #e3cdd0;
}

body[data-theme="gumiho"] {
  --bg: #040b15;
  --panel: #091524;
  --panel-2: #0d1c31;
  --text: #dceaff;
  --muted: #8199bb;
  --line: #1a2d48;
  --line-strong: #2a4568;
  --accent: #3fb6ff;
  --accent-text: #02101d;
  --shine: #3fb6ff;
  --bubble: #0f2238;
  --bubble-me: #1d4f7a;
  --bubble-me-text: #eaf5ff;
  --narr: #c9dcf5;
}

/* ---------- 기본 ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
/* 평평하고 각진 면: 모서리 둥글림과 그림자를 쓰지 않는다 (봉인·구슬 같은 소품은 예외) */
button, input, select { border-radius: 0; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
body, .topbar, .sidebar, .notices, .chat, .composer, .bubble, .doc, .login-box {
  transition: background-color 2.5s ease, color 2.5s ease, border-color 2.5s ease;
}
button { font: inherit; }
.hidden { display: none !important; }

/* 로고: 아무것도 비치지 않는 빈 거울 */
.logo-mark { flex: none; color: var(--text); }
.logo-mark .shine { stroke: var(--shine); stroke-width: 2; stroke-linecap: round; fill: none; }
.logo-mark .shine.faint { opacity: .45; }
.brand { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.brand .logo-mark { width: 22px; height: 22px; }
.brand b { font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: .06em; }
.brand span { color: var(--muted); font-weight: 300; font-size: 13px; letter-spacing: .04em; margin-left: 2px; }
.logo { display: flex; align-items: center; gap: 12px; margin-bottom: 48px; }
.logo .logo-mark { width: 40px; height: 40px; }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-text b { font-family: var(--serif); font-size: 26px; letter-spacing: .1em; }
.logo-text span { font-size: 10px; font-weight: 500; letter-spacing: .28em; color: var(--muted); margin-top: 5px; }

/* 스크롤바: 테마 색에 맞춘 얇은 스크롤 */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- 로그인 ---------- */
#login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 16px;
}
.login-box {
  width: min(400px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 48px 40px 32px;
  display: flex;
  flex-direction: column;
}
.login-box h1 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 32px; }
.login-box label { font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 8px; }
.login-box input[type="text"] {
  font: inherit;
  height: 44px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  margin-bottom: 24px;
}
.login-box input[type="text"]:hover { border-bottom-color: #a1a1aa; }
.login-box input[type="text"]:focus { outline: none; border-bottom: 2px solid var(--text); }
.login-box .check { display: flex; align-items: center; gap: 8px; margin-bottom: 32px; font-size: 14px; color: var(--text); }
.login-box .check input { accent-color: var(--text); width: 16px; height: 16px; margin: 0; }
.login-box .check small { color: var(--muted); }
.primary, .ghost {
  height: 48px;
  padding: 0 32px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
  margin-bottom: 8px;
  border: 1px solid var(--accent);
}
/* 마우스를 올리면 바탕과 글자가 뒤집힌다 */
.primary { background: var(--accent); color: var(--accent-text); }
.primary:hover { background: transparent; color: var(--accent); }
.ghost { background: transparent; color: var(--accent); }
.ghost:hover { background: var(--accent); color: var(--accent-text); }
.lang-row { display: flex; gap: 0; margin: -12px 0 32px; }
.lang-row button {
  flex: 1;
  height: 32px;
  font-size: 12px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.lang-row button + button { border-left: 0; }
.lang-row button:hover { background: var(--panel-2); color: var(--text); }
.lang-row button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 600; }
.lang-select { appearance: none; font: inherit; font-size: 12px; }
.fine { font-size: 11px; color: var(--muted); line-height: 1.7; margin: 24px 0 0; text-align: center; }

/* ---------- 게임 레이아웃 ---------- */
#app { height: 100dvh; display: flex; flex-direction: column; }

.topbar {
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.clock { margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.user { font-size: 13px; font-weight: 500; white-space: nowrap; }
.icon-btn {
  height: 32px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  padding: 0 12px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.icon-btn:hover { border-color: var(--text); color: var(--text); }

.layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 280px;
}

.sidebar, .notices { background: var(--bg); overflow-y: auto; }
.sidebar { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.sidebar ul { list-style: none; margin: 0; padding: 24px 0; }
.sidebar li button {
  width: 100%;
  height: 44px;
  padding: 0 24px;
  border: 0;
  background: transparent;
  font-size: 14px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
}
.sidebar li button:hover { background: var(--panel-2); color: var(--text); }
.sidebar li button.active { background: var(--text); color: var(--bg); font-weight: 600; }
.badge {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  background: var(--danger);
  color: #fff;
  padding: 1px 6px;
}
.side-foot { margin-top: auto; padding: 24px; font-size: 11px; letter-spacing: .04em; color: var(--muted); }

.notices { border-left: 1px solid var(--line); padding: 24px; }
.notices h2 { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px; }
.notices ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--text); }
.notices li { border-bottom: 1px solid var(--line); }
.notices li button {
  width: 100%;
  padding: 14px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  cursor: pointer;
}
.notices li button:hover b { text-decoration: underline; text-underline-offset: 3px; }
.notices li b { font-size: 13px; font-weight: 500; line-height: 1.5; }
.notices li span { font-size: 11px; color: var(--muted); }
.notices li.new b { color: var(--danger); }
.notices li.new b::before { content: 'NEW '; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.notices li.deleted b { color: var(--muted); font-weight: 400; }

.center { min-height: 0; display: flex; flex-direction: column; background: var(--panel); }
.center > section { flex: 1; min-height: 0; }

.chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  transition: background-color 2.5s ease, box-shadow 3s ease;
}
.chat-head {
  flex: none;
  padding: 16px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.chat-head b { font-weight: 700; }
.chat-head span { color: var(--muted); margin-left: 8px; font-size: 12px; font-weight: 300; }

.log {
  flex: 1;
  overflow-y: auto;
  padding: 40px clamp(16px, 5vw, 64px) 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.composer {
  flex: none;
  border-top: 1px solid var(--line);
  padding: 16px clamp(16px, 4vw, 48px) calc(16px + env(safe-area-inset-bottom));
  min-height: 80px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: var(--panel);
}
.composer .hint {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  background: var(--bg);
}
.composer .hint:hover { border-color: var(--line-strong); }
.composer .hint b { color: var(--text); font-weight: 600; animation: blink 1.4s ease-in-out infinite; }
.choice {
  flex: 1 1 160px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  animation: rise .2s ease both;
}
.choice:hover, .choice:focus-visible { background: var(--accent); color: var(--accent-text); outline: none; }
.composer .done { flex: 1; text-align: center; color: var(--muted); font-size: 13px; }

.menu-btn, .scrim { display: none; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; position: relative; }
  .notices { display: none; }
  .sidebar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 240px;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform .2s ease, background-color 2.5s ease;
  }
  .sidebar.open { transform: none; }
  .brand span { display: none; }
  .scrim.show { display: block; position: absolute; inset: 0; z-index: 10; background: rgba(10, 10, 10, .4); }
  .menu-btn { display: inline-block; }
  .topbar { gap: 6px; padding: 0 12px; }
  .topbar .icon-btn { padding: 0 8px; font-size: 11px; }
  .brand b { display: none; }
  .user { display: none; }
  .grid .hide-m { display: none; }
  .grid td, .grid th { padding: 10px 8px; }
}

/* ---------- 메뉴 화면 ---------- */
.view {
  overflow-y: auto;
  padding: 48px clamp(16px, 5vw, 64px) 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.page { width: 100%; max-width: 820px; animation: rise .2s ease both; }
.page-head { margin-bottom: 32px; }
.page-head h2 { font-size: 28px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin: 8px 0 0; }
.page-head .muted { margin: 8px 0 0; font-weight: 300; font-size: 14px; }
.muted { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.small { font-size: 12px; margin-top: 16px; }
.section { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin: 48px 0 12px; }
.link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
}
.link:hover { text-decoration-color: currentColor; }
.link.back { margin-bottom: 4px; text-decoration: none; color: var(--muted); }
.link.back:hover { color: var(--text); }

.table-wrap { width: 100%; overflow-x: auto; border-top: 1px solid var(--text); }
.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
.grid th {
  text-align: left;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--muted);
  background: transparent;
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.grid td { height: 52px; padding: 8px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.grid tr:last-child td { border-bottom: 0; }
.grid .narrow { white-space: nowrap; width: 1%; color: var(--muted); font-size: 13px; }
.grid .mid { text-align: center; }
.grid tr.clickable { cursor: pointer; }
.grid tr.clickable:hover td { background: var(--panel-2); }
.grid tr.deleted td { color: var(--muted); font-style: italic; }
.grid tr.alert td { color: #d93a4f; font-weight: 500; }
.grid tr.odd td { color: var(--muted); font-style: italic; }
.tag {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 1px 6px;
  margin-right: 8px;
  vertical-align: 1px;
}
.tag.new { color: #fff; background: var(--danger); border-color: var(--danger); margin: 0 0 0 8px; }
/* 상태 칩: 진행 중은 테두리, 완료는 채움, 그 밖은 흐린 회색 */
.status { display: inline-block; font-size: 11px; letter-spacing: .04em; line-height: 22px; padding: 0 8px; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; }
.status.ing { color: var(--text); border-color: var(--text); }
.status.done { color: var(--bg); background: var(--text); border-color: var(--text); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.card {
  text-align: left;
  padding: 24px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
button.card { cursor: pointer; }
button.card:hover { background: var(--panel-2); }
.card span { font-size: 12px; color: var(--muted); }
.card b { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.callout {
  margin-top: 16px;
  padding: 16px 20px;
  border: 1px solid var(--accent);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.meta-row { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--muted); padding-bottom: 16px; border-bottom: 1px solid var(--text); align-items: center; }
.post { padding: 32px 0; line-height: 1.85; font-size: 15px; border-bottom: 1px solid var(--line); }
.post p { margin: 0 0 10px; }
.post ol { margin: 12px 0; padding-left: 22px; }
.post li { margin-bottom: 6px; }
.post .foot { color: var(--muted); font-size: 12px; margin-top: 20px; }
.post.deleted { color: var(--muted); font-style: italic; }
.comments .comment { padding: 16px 0; border-bottom: 1px solid var(--line); }
.comments .c-head { display: flex; gap: 12px; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.comments .c-head span { color: var(--muted); font-size: 12px; font-weight: 400; }
.comments .comment p { margin: 0; font-size: 14px; line-height: 1.6; }

.search-input {
  width: 100%;
  max-width: 320px;
  font: inherit;
  height: 40px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
}
.search-input:hover { border-bottom-color: #a1a1aa; }
.search-input:focus { outline: none; border-bottom: 2px solid var(--text); }
.empty { color: var(--muted); font-size: 14px; padding: 32px 0; }
.presence { font-size: 12px; white-space: nowrap; }
.presence::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; background: #9aa3b2; vertical-align: 1px; }
.presence.on::before { background: #2fb36b; }
.presence.away::before { background: #e0a400; }
.presence.weird { color: #3fa9e8; }
.presence.weird::before { background: #3fb6ff; box-shadow: 0 0 6px #3fb6ff; }

.stamps { display: flex; gap: 0; margin: 24px 0; border: 1px solid var(--line-strong); width: max-content; max-width: 100%; overflow: hidden; }
.stamp-box { width: 92px; text-align: center; border-right: 1px solid var(--line-strong); }
.stamp-box:last-child { border-right: 0; }
.stamp-box .role { font-size: 11px; letter-spacing: .04em; color: var(--muted); background: var(--bg); padding: 6px 0; border-bottom: 1px solid var(--line-strong); }
.stamp-box .mark { height: 64px; display: grid; place-items: center; }
.stamp-box .who { font-size: 12px; padding: 4px 0 6px; color: var(--muted); min-height: 24px; }
.name-stamp {
  width: 44px;
  height: 44px;
  border: 2px solid #d4483b;
  border-radius: 50%;
  color: #d4483b;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  transform: rotate(-8deg);
}
.wait { font-size: 12px; color: var(--muted); }
.seal-mark {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 20px;
  transform: rotate(-12deg);
}
.seal-mark.red { background: radial-gradient(circle at 35% 35%, #c42b3c, #6a0915 72%); color: #f8dada; box-shadow: 0 2px 5px rgba(0, 0, 0, .35); }
.seal-mark.blue { border: 2px solid #3fb6ff; color: #3fb6ff; box-shadow: 0 0 10px rgba(63, 182, 255, .6), inset 0 0 8px rgba(63, 182, 255, .4); }

.to-chat {
  margin-top: 48px;
  height: 40px;
  padding: 0 24px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.to-chat:hover { background: var(--accent); color: var(--accent-text); }
.to-chat.pulse { background: var(--accent); color: var(--accent-text); font-weight: 600; animation: blink 1.6s ease-in-out infinite; }

/* ---------- 메시지 ---------- */
.log > * { animation: rise .2s ease both; }

.narr {
  margin: 0;
  max-width: 62ch;
  line-height: 1.9;
  font-size: 16px;
  color: var(--narr);
  white-space: pre-wrap;
}

.sys {
  align-self: center;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-strong);
  padding: 4px 12px;
}

.divider { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 11px; letter-spacing: .08em; margin: 12px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.msg { display: flex; gap: 12px; max-width: min(560px, 88%); }
.msg.right { align-self: flex-end; flex-direction: row-reverse; }
.avatar {
  width: 36px;
  height: 36px;
  flex: none;
  background: var(--accent);
  color: var(--accent-text);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 14px;
}
.msg .name { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.msg .name b { color: var(--text); font-weight: 600; margin-right: 6px; }
.bubble {
  background: var(--bubble);
  border: 1px solid transparent;
  padding: 10px 16px;
  line-height: 1.65;
  font-size: 15px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-height: 1.6em;
}
.msg.right .bubble {
  background: var(--bubble-me);
  color: var(--bubble-me-text);
}

.choice-echo { align-self: flex-end; font-size: 12px; color: var(--muted); font-weight: 500; }
.choice-echo::before { content: '— '; }

/* 직접 들리는 목소리 */
.voice { margin: 8px 0; padding-left: 20px; border-left: 2px solid var(--accent); max-width: 62ch; }
.voice figcaption { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.voice blockquote { margin: 0; font-size: 18px; line-height: 1.75; min-height: 1.7em; white-space: pre-wrap; }

/* 메뉴 확인 과제 */
.task {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  padding: 6px 6px 6px 16px;
  border: 1px dashed var(--accent);
  color: var(--text);
}
.task button {
  height: 32px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-text);
  padding: 0 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.task button:hover { background: transparent; color: var(--accent); }
button.hint { font: inherit; font-size: 13px; text-align: left; }
.task-hint { border-color: var(--accent) !important; color: var(--text) !important; }

/* 공지 문서 */
.doc {
  max-width: 520px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--accent);
  padding: 20px 24px;
}
.doc h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.doc .meta { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.doc ol { margin: 0; padding-left: 20px; line-height: 1.8; font-size: 14px; }
.doc li { animation: rise .2s ease both; }
.doc li:last-child { color: var(--muted); font-size: 12px; }

/* 조직도 검색 */
.search { max-width: 460px; border: 1px solid var(--line-strong); background: var(--panel); overflow: hidden; }
.search .bar { padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.search .bar span { color: var(--muted); margin-right: 8px; }
.search .res { padding: 16px; font-size: 13px; color: var(--muted); min-height: 50px; }

/* 거울: 좌우 반전 */
.mirror { align-self: center; width: min(440px, 100%); }
.mirror .caption { font-size: 12px; color: var(--muted); text-align: center; margin-bottom: 8px; }
.glass {
  position: relative;
  padding: 34px 20px;
  background-color: #0b1019;
  background-image: linear-gradient(135deg, rgba(150, 170, 200, .16), rgba(10, 16, 28, .6) 60%, rgba(150, 170, 200, .14));
  border: 1px solid rgba(160, 180, 210, .35);
  overflow: hidden;
  text-align: center;
}
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .1) 45%, transparent 60%);
  pointer-events: none;
}
.mirrored {
  display: inline-block;
  transform: scaleX(-1);
  font-family: var(--serif);
  font-size: 22px;
  color: rgba(230, 236, 245, .85);
  text-shadow: 0 0 10px rgba(200, 220, 255, .35);
  min-height: 1.4em;
}

/* 명함 + 붉은 봉인 */
.bizcard {
  align-self: center;
  width: min(360px, 100%);
  aspect-ratio: 1.75;
  background: #f3eee4;
  color: #2a1717;
  border-radius: 4px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  padding: 22px 24px;
  font-family: var(--serif);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotate(-2deg);
}
.bizcard h4 { margin: 0 0 10px; font-size: 15px; letter-spacing: .12em; }
.bizcard p { margin: 0; font-size: 13px; line-height: 1.7; }
.seal {
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #c42b3c, #6a0915 72%);
  color: #f8dada;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-family: var(--serif);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45), inset 0 0 8px rgba(0, 0, 0, .45);
  transform: rotate(-14deg) scale(0);
  animation: stamp .45s .5s cubic-bezier(.2, 1.6, .4, 1) forwards;
}
.card-back { align-self: center; font-family: var(--serif); font-style: italic; color: var(--narr); font-size: 14px; text-align: center; }

/* 엔딩 */
.ending {
  align-self: center;
  width: min(440px, 100%);
  text-align: center;
  padding: 48px 32px 32px;
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--text);
  background: var(--panel);
  margin-top: 24px;
}
.ending h3 { font-family: var(--serif); font-weight: 700; margin: 0 0 16px; font-size: 22px; letter-spacing: .04em; }
.ending p { margin: 0; color: var(--narr); line-height: 1.8; }
.ending .tbc { font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--muted); margin: 24px 0 32px; letter-spacing: .24em; }
.ending .row { display: flex; gap: 8px; flex-wrap: wrap; }
.ending .row button { flex: 1 1 140px; margin: 0; }

.ending.bad { border-color: #8a1c2b; border-top-color: var(--danger); }
.ending.bad h3 { color: var(--danger); }

/* 막·챕터 제목 */
.chapter {
  align-self: center;
  text-align: center;
  padding: 48px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chapter b { font-family: var(--serif); font-weight: 700; font-size: 28px; letter-spacing: .12em; }
.chapter span { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: .2em; }

/* 세는 소리 */
/* 넘치면 위쪽이 잘리고 가장 최근 숫자가 보이게 */
.count { flex: none; align-self: stretch; max-height: 46vh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.count-nums {
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--narr);
  word-break: normal;
  opacity: .85;
}

/* ---------- 여우구슬 ---------- */
.orb-btn {
  position: fixed;
  right: 18px;
  bottom: 86px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px 0 12px;
  border: 1px solid rgba(63, 182, 255, .55);
  background: #07121f;
  color: #cfe9ff;
  font-size: 13px;
  cursor: pointer;
}
.orb-btn i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e6f6ff, #3fb6ff 45%, #0b3a66 80%);
  box-shadow: 0 0 6px rgba(63, 182, 255, .6);
}
.orb-btn[aria-pressed="true"] { border-color: #3fb6ff; box-shadow: 0 0 18px rgba(63, 182, 255, .55); }
/* 모바일: 선택지와 겹치지 않게 상단 바 아래 오른쪽에 아이콘만 */
@media (max-width: 900px) {
  .orb-btn { top: 64px; bottom: auto; right: 12px; height: 34px; padding: 0 7px; }
  .orb-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.orb-btn[aria-pressed="true"] i { animation: orb-pulse 2.4s ease-in-out infinite; }

/* 구슬을 켜면 화면 전체에 푸른빛이 덮인다 */
body.orb-on #app::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 25;
  background: radial-gradient(ellipse at center, rgba(40, 140, 255, .06), rgba(10, 60, 140, .28));
  mix-blend-mode: multiply;
  animation: orb-breathe 6s ease-in-out infinite;
}
body.orb-on .page, body.orb-on .view { filter: hue-rotate(-12deg) saturate(1.15); }
.grid tr.marked td { color: #d93a4f; }
.grid tr.marked td:first-child { font-weight: 600; text-shadow: 0 0 8px rgba(217, 58, 79, .35); }
.grid tr.ink-row td { color: #3fa9e8; font-style: italic; }
.presence.weird.blood { color: #d93a4f; }
.presence.weird.blood::before { background: #d93a4f; box-shadow: 0 0 6px #d93a4f; }

/* 흰 글씨: 평소엔 바탕과 같은 색, 구슬을 켜면 떠오른다 */
.ink { color: var(--panel); user-select: none; margin-top: 10px; transition: color 1.6s ease, text-shadow 1.6s ease; }
.ink p { margin: 0 0 6px; }
.ink.shown { color: #3fa9e8; text-shadow: 0 0 8px rgba(63, 169, 232, .5); user-select: text; }

/* ---------- 문서고 ---------- */
.paper {
  width: 100%;
  margin-top: 24px;
  padding: 32px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 15px;
  line-height: 1.9;
}
.paper p { margin: 0 0 10px; }
.paper.old { font-family: var(--serif); background: #efe8da; color: #2c2219; border-color: #d8ccb6; }
.paper.old .ink { color: #efe8da; }
.paper.old .ink.shown { color: #1e74b8; }
.paper .sign { text-align: right; font-family: var(--serif); color: var(--muted); margin-top: 18px; }
.paper.old .sign { color: #6b5a45; }
.floors { list-style: none; margin: 16px 0 8px; padding: 0; border-top: 1px solid var(--text); overflow: hidden; font-family: var(--sans); font-size: 14px; }
.floors li { display: flex; gap: 16px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.floors li:last-child { border-bottom: 0; }
.floors b { width: 44px; flex: none; color: var(--muted); font-family: var(--mono); font-weight: 400; font-size: 13px; font-variant-numeric: tabular-nums; }
.floors li.blank span { color: var(--muted); font-style: italic; }
.floors li.hidden-floor { background: rgba(63, 182, 255, .08); color: #3fa9e8; animation: rise .6s ease both; }
.floors li.hidden-floor b { color: #3fa9e8; }

/* ---------- 시설 관리 ---------- */
.callout.warn { border-color: #ca8a04; border-left-width: 3px; color: var(--text); margin: 0 0 16px; }
.facility { width: 100%; }
.card.danger b { color: var(--danger); }
.fac-progress { height: 2px; background: var(--line); margin: 16px 0 4px; overflow: hidden; }
.fac-progress i { display: block; height: 100%; background: var(--accent); transition: width .6s ease; }
.fac-start { width: 100%; margin: 16px 0 0; }
.fac-btn {
  height: 32px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  padding: 0 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.fac-btn:hover:not(:disabled) { background: var(--accent); color: var(--accent-text); }
.fac-btn:disabled { opacity: .3; cursor: not-allowed; }
.fac-log { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); max-height: 260px; overflow-y: auto; font-size: 13px; }
.fac-log li { display: flex; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); animation: rise .2s ease both; }
.fac-log li:last-child { border-bottom: 0; }
.fac-log time { color: var(--muted); font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; flex: none; }
.fac-log li.warn span { color: #c77a00; }
.fac-log li.alert span { color: #d93a4f; font-weight: 600; }
.fac-log li.ok span { color: #1f8a4c; }
.fac-result { margin-top: 14px; font-weight: 600; }
.fac-result.win { color: #1f8a4c; }
.fac-result.lose { color: #d93a4f; }

/* ---------- 열람 제한 기록 (사이드 스토리) ---------- */
.side {
  position: fixed;
  inset: 56px 0 0 0;
  z-index: 28;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  animation: rise .3s ease both;
}
.side-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.side-head b { font-family: var(--serif); font-weight: 700; letter-spacing: .06em; }
.side .log { max-width: 760px; width: 100%; margin: 0 auto; }
.side:not(.hidden) ~ .orb-btn { display: none; }
body.redshift .side { box-shadow: inset 0 0 160px rgba(150, 0, 20, .55); }
.paper.record { font-family: var(--serif); }
.paper.record.sealed { color: var(--muted); font-style: italic; }
.record-play { margin-top: 16px; padding: 12px 22px; }
.callout.unlock { border-color: #b01a34; margin: 0 0 14px; }
.grid .locked { color: var(--muted); }

/* 피가 번지는 화면: 붉은 테두리가 한 번 크게 번졌다 빠진다 */
body.bloodflash #app::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 29;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(120, 0, 12, .85));
  animation: bloodflash 1.6s ease-out forwards;
}

.stamp-box.me { background: rgba(217, 58, 79, .06); }
.stamp-box.me .wait { color: #d93a4f; font-weight: 600; }

/* ---------- 연출 효과 ---------- */
.serif { font-family: var(--serif) !important; letter-spacing: .02em; }
.glow { text-shadow: 0 0 6px rgba(90, 195, 255, .95), 0 0 18px rgba(60, 150, 255, .6); }
.bleed { color: #e0324d !important; text-shadow: 0 0 10px rgba(224, 50, 77, .45); }
.shake { animation: shake .45s linear 2 !important; }
body.flicker #app { animation: flicker .9s steps(1) 1; }
body.redshift .chat { box-shadow: inset 0 0 140px rgba(150, 0, 20, .5); }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes orb-pulse { 50% { box-shadow: 0 0 14px rgba(63, 182, 255, 1); } }
@keyframes orb-breathe { 50% { opacity: .7; } }
@keyframes bloodflash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@keyframes stamp { to { transform: rotate(-14deg) scale(1); } }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 2px); }
}
@keyframes flicker {
  0% { opacity: 1; }
  10% { opacity: .15; }
  20% { opacity: 1; }
  32% { opacity: .4; filter: brightness(1.8); }
  44% { opacity: 1; filter: none; }
  60% { opacity: .1; }
  70% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .log > *, .choice, .doc li, .fac-log li, .floors li { animation: none; }
  body.orb-on #app::after, .orb-btn i { animation: none !important; }
  body.bloodflash #app::before { animation: none; opacity: .5; }
  .shake, body.flicker #app { animation: none !important; }
  .seal { animation: none; transform: rotate(-14deg); }
}

/* ---------- 3막 · 결재 ---------- */
/* 통합 검색: 데스크톱은 상단 바, 모바일은 메뉴의 검색 화면 */
.top-search { flex: 0 1 240px; margin-left: 16px; }
.top-search input {
  width: 100%;
  height: 32px;
  font: inherit;
  font-size: 13px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--text);
}
.top-search input:hover { border-color: var(--muted); }
.top-search input:focus { outline: none; border-color: var(--text); }
.only-m { display: none; }
.search-form { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 24px; }
.search-form .search-input { max-width: 420px; }
.search-form .primary { height: 40px; padding: 0 20px; margin: 0; font-size: 14px; }

/* 일출 카운트다운 */
.deadline { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text); border: 1px solid var(--line-strong); padding: 0 8px; line-height: 26px; white-space: nowrap; }
body.urgent .deadline, body.urgent .desk-timer { color: #fff; background: var(--danger); border-color: var(--danger); animation: blink 1s steps(2) infinite; }
body.urgent .clock { color: var(--danger); }

/* 입력 중 표시와 메신저 직접 입력 */
.bubble.typing::after { content: '···'; letter-spacing: .2em; color: var(--muted); animation: blink 1s ease-in-out infinite; }
.reply { flex: 1; display: flex; gap: 8px; flex-wrap: wrap; }
.reply input {
  flex: 1 1 200px;
  height: 48px;
  font: inherit;
  padding: 0 14px;
  border: 1px solid var(--accent);
  background: var(--bg);
  color: var(--text);
}
.reply input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent); }
.reply .primary, .reply .ghost { margin: 0; padding: 0 22px; }

/* 결재 화면: 문서가 가운데 고정되고 뒤는 가려진다 */
.desk {
  position: fixed;
  inset: 56px 0 0 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 10, 10, .55);
  animation: rise .3s ease both;
}
.desk-box {
  width: min(1100px, 100%);
  height: min(820px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--accent);
}
.desk-head { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.desk-head b { font-family: var(--serif); font-size: 18px; letter-spacing: .12em; }
.desk-timer { font-family: var(--mono); font-size: 13px; border: 1px solid var(--line-strong); padding: 0 10px; line-height: 28px; }
.desk-tabs { flex: none; display: flex; border-bottom: 1px solid var(--line); overflow-x: auto; }
.desk-tabs button { border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); padding: 12px 20px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.desk-tabs button:hover { color: var(--text); background: var(--panel-2); }
.desk-tabs button[aria-pressed="true"] { color: var(--bg); background: var(--text); font-weight: 600; }
.desk-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.desk-doc { overflow-y: auto; padding: 24px 32px 32px; }
.desk-doc .page-head { margin-bottom: 16px; }
.desk-doc .page-head h2 { font-size: 22px; }
.desk-chat { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--bg); }
.desk-chat-head { flex: none; padding: 12px 16px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.desk-log { flex: 1; min-height: 120px; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.desk-log .msg { max-width: 100%; }
.desk-log .avatar { width: 28px; height: 28px; font-size: 12px; }
.desk-log .bubble { font-size: 13px; padding: 8px 12px; }
.desk-chat .reply { flex: none; flex-wrap: nowrap; padding: 12px; border-top: 1px solid var(--line); }
.desk-chat .reply input { height: 40px; flex-basis: 120px; min-width: 0; }
.desk:not(.hidden) ~ .orb-btn { display: none; }
.desk-chat .reply .primary { height: 40px; padding: 0 14px; font-size: 13px; }

/* 증인 서명란: 갑(붉은)·을(푸른) 쪽 */
.sign-btn { display: block; width: 100%; border: 0; border-top: 1px solid var(--line-strong); background: transparent; color: var(--text); font-size: 11px; font-weight: 600; padding: 8px 4px; cursor: pointer; }
.sign-btn.red:hover { background: #b01a34; color: #fff1f2; }
.sign-btn.blue:hover { background: #1d4f7a; color: #eaf5ff; }
.act-btn { margin-top: 16px; }

/* 약조 원본의 빈 줄: 증인이 직접 적어 넣는다 */
.amend { margin-top: 24px; padding: 20px 24px; }
.amend-head { font-size: 13px; color: #6b5a45; margin: 0 0 12px; }
.amend-row { display: flex; gap: 12px; align-items: flex-start; }
.amend-row b { padding-top: 8px; white-space: nowrap; }
.amend textarea {
  flex: 1;
  font: inherit;
  font-size: 16px;
  line-height: 1.6;
  padding: 6px 2px;
  border: 0;
  border-bottom: 1px solid #b8a88e;
  background: transparent;
  color: #2c2219;
  resize: vertical;
}
.amend textarea:focus { outline: none; border-bottom: 2px solid #2c2219; }
.amend textarea::placeholder { color: #a8987e; }
.amend-warn { color: #a3132b; font-size: 13px; margin: 8px 0 0; font-family: var(--sans); }
.amend .primary { margin: 16px 0 0; background: #2c2219; border-color: #2c2219; color: #efe8da; }
.amend .primary:hover { background: transparent; color: #2c2219; }

/* 승인 버튼 환각: 둘로 갈라져 커서를 피해 다닌다 */
.trap-zone { position: relative; height: 150px; margin-top: 24px; border: 1px dashed var(--line-strong); overflow: hidden; }
.trap-one { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }
.trap-btn {
  position: absolute;
  width: 96px;
  height: 40px;
  font-weight: 600;
  cursor: pointer;
  transition: left .18s ease-out, top .18s ease-out;
  animation: trap-jitter .3s steps(2) infinite;
}
.trap-btn.red { background: #b01a34; border: 1px solid #b01a34; color: #fff1f2; }
.trap-btn.blue { background: transparent; border: 1px solid #3fb6ff; color: #3fb6ff; box-shadow: 0 0 10px rgba(63, 182, 255, .5); }
.trap-note { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0; text-align: center; font-size: 12px; color: var(--muted); font-style: italic; }

/* 시스템 침식: 단계(data-glitch 1~3)마다 노이즈가 짙어지고 화면이 가끔 어긋난다 */
.noise { position: fixed; inset: 0; z-index: 26; pointer-events: none; opacity: 0; transition: opacity 2s ease; }
body[data-glitch] .noise {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(176, 26, 52, .05) 0 2px, transparent 2px 7px, rgba(63, 182, 255, .05) 7px 9px, transparent 9px 13px);
  animation: noise-shift .18s steps(3) infinite;
}
body[data-glitch="1"] .noise { opacity: .35; }
body[data-glitch="2"] .noise { opacity: .6; }
body[data-glitch="3"] .noise { opacity: .85; }
body[data-glitch="2"] .center, body[data-glitch="3"] .center { animation: tear 9s steps(1) infinite; }
body[data-glitch="3"] .log { text-shadow: 1.5px 0 rgba(176, 26, 52, .45), -1.5px 0 rgba(63, 182, 255, .45); }

@keyframes noise-shift { 0% { background-position: 0 0, 0 0; } 50% { background-position: 0 1px, 3px 0; } 100% { background-position: 0 2px, -2px 0; } }
@keyframes tear {
  0%, 100% { transform: none; clip-path: none; }
  61% { transform: translateX(4px); clip-path: inset(30% 0 52% 0); }
  62% { transform: translateX(-3px); clip-path: inset(64% 0 12% 0); }
  63% { transform: none; clip-path: none; }
  88% { transform: translateX(-5px) skewX(-2deg); }
  89% { transform: none; }
}
@keyframes trap-jitter { 50% { transform: translate(1px, -1px); } }

@media (max-width: 900px) {
  .top-search { display: none; }
  .only-m { display: block; }
  .deadline { font-size: 11px; padding: 0 6px; }
  .topbar:has(.deadline:not(.hidden)) .clock { display: none; }
  .topbar:has(.deadline:not(.hidden)) .deadline { margin-left: auto; }
  .desk { padding: 0; }
  .desk-box { height: 100%; border: 0; }
  .desk-body { display: flex; flex-direction: column; overflow-y: auto; }
  .desk-doc { overflow: visible; padding: 20px 16px; }
  .desk-chat { border-left: 0; border-top: 1px solid var(--line); }
  .desk-log { max-height: 240px; }
  .stamp-box { width: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-glitch] .noise, .center, .trap-btn { animation: none !important; }
  body.urgent .deadline, body.urgent .desk-timer { animation: none; }
}

/* ---------- 확인창 ---------- */
.modal-back { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(10, 10, 10, .45); }
.modal { width: min(400px, 100%); background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); border-top: 3px solid var(--accent); padding: 32px 32px 24px; }
.modal p { margin: 0 0 32px; font-size: 15px; line-height: 1.7; }
.modal-row { display: flex; gap: 8px; }
.modal-row button { flex: 1; margin: 0; }