/* Lore 전체 스타일 */

/* ── 테마 색 (설정 → 화면 → 테마, js/theme.js) ──
   테마 하나에 밝은 화면용·어두운 화면용 색 두 벌 — 기기의 밝게/어둡게 설정에 따라 둘 중 하나로 보임
   아래 기본값은 "가을 낙엽" 테마. 다른 테마를 고르면 js/theme.js가 이 값들을 바꿈 */
:root {
  color-scheme: light dark; /* 스크롤 막대 등 브라우저 기본 부품도 밝게/어둡게 맞춤 */
  --bg: #f7f3ec; /* 기본 바탕 */
  --surface: #ffffff; /* 칸 바탕 */
  --text: #2a2622; /* 글자 */
  --muted: #7a7168; /* 흐린 글자 */
  --border: #e4ddd2; /* 테두리·가로줄 */
  --primary: #8a4b2f; /* 강조색 (테마 대표색) */
  --primary-text: #ffffff; /* 강조색 위 글자 */
  --primary-hover: #723c24; /* 강조색 (마우스 올림) */
  --hover: rgba(138, 75, 47, 0.07); /* 연한 강조 바탕 (마우스 올림) */
  --active-bg: rgba(138, 75, 47, 0.12); /* 연한 강조 바탕 (고른 것) */
  --shadow: 0 1px 3px rgba(40, 30, 20, 0.08); /* 그림자 */
  --logo-ink: #ffffff; /* 로고 안쪽 색 */
  --ai: #6d4bc4; /* AI(크레딧 사용) 상징색 — 보라 계열 테마에서만 다른 색으로 */
  --cover-1: #8a4b2f; --cover-2: #5d6b4a; --cover-3: #4a5d6b; --cover-4: #6b4a5d; --cover-5: #7a6a3a; --cover-6: #3a5a6a; /* 작품 표지 색 (이미지가 없을 때) */
  --ai-text: #ffffff; /* AI 버튼 글자 (AI 색이 밝은 테마에서는 진한 색) */
  --ai-active-bg: color-mix(in srgb, var(--ai) 15%, transparent); /* AI 설정칸 안의 "켜짐" 표시 (4번 모양의 보라) */
  /* 테마와 상관없는 기능 색 */
  --success: #2f7a4b;
  --error: #b3261e;
  --reset-red: #b3261e; /* 전체 초기화 빨강 (테마와 상관없이 고정 — 처음 테마의 오류 빨강) */
  --success-ink: #ffffff; /* 아래쪽 알림의 글자색 */
  --error-ink: #ffffff;
  --radius: 12px;
  --font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-serif: "Nanum Myeongjo", "AppleMyungjo", "Batang", serif;
  --sb-width: 220px; /* 메뉴바 너비 (js/layout.js가 바꿈) */
  --fs-add: 0px; /* 설정의 글자 크기: 모든 글자를 이만큼 키움/줄임 (메뉴 글자 15 기준, js/text-size.js가 바꿈) */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1a17;
    --surface: #26231f;
    --text: #ece6dd;
    --muted: #a39a8f;
    --border: #3a352f;
    --primary: #d08a63;
    --primary-text: #1c1a17;
    --primary-hover: #e09b74;
    --hover: rgba(208, 138, 99, 0.10);
    --active-bg: rgba(208, 138, 99, 0.18);
    --shadow: none;
    --logo-ink: #1c1a17;
    --ai: #7650e6;
  }
}
/* 바탕이 어두운 테마의 기능 색 (data-scheme은 js/theme.js가 정함) — 연한 초록·빨강, 알림 글자는 진한 색 */
:root[data-scheme="dark"] {
  --reset-red: #f28b82;
  --success: #6cc08b;
  --error: #f28b82;
  --success-ink: #0f2e1b;
  --error-ink: #3d0b07;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: calc(16px + var(--fs-add));
  line-height: 1.6;
  word-break: keep-all;
}

[hidden] { display: none !important; }

h1, h2 { line-height: 1.3; margin: 0 0 0.5em; }
h1 { font-size: calc(1.5rem + var(--fs-add)); }
h2 { font-size: calc(1.15rem + var(--fs-add)); }

code {
  font-size: 0.9em;
  background: var(--border);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* 본문 */
.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  padding-bottom: max(48px, env(safe-area-inset-bottom));
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 16px;
}

.muted { color: var(--muted); }
.small { font-size: calc(0.875rem + var(--fs-add)); }
.center { text-align: center; }
.link { color: var(--primary); font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }

/* 시작 화면 (로그인 전): 로고 → Lore → 시작 버튼 */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 72px);
  text-align: center;
}
.hero-logo { width: 88px; height: 88px; color: var(--primary); }
.hero-logo .icon { width: 100%; height: 100%; }
.hero-title {
  margin: 12px 0 36px;
  font-family: var(--font-serif);
  font-size: calc(3rem + var(--fs-add));
  color: var(--primary);
}

/* 버튼 */
.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: calc(0.95rem + var(--fs-add));
  font-weight: 600;
  padding: 10px 16px;
  min-height: 44px; /* 손가락으로 누르기 좋은 크기 */
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.btn:hover:not(:disabled) { border-color: var(--muted); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--border); border-color: transparent; }
/* 버튼 규칙 (docs/UX.md "버튼 규칙"): 보통 버튼(2)·글자 버튼(5)은 같은 모양 — 바탕·글자색은 그대로, 테두리만 주요 색
   아이콘만 있는 버튼(.btn-icon)은 테두리 없이 그대로 */
.btn:where(:not(.btn-primary, .btn-danger, .btn-ai, .btn-icon)) { border-color: var(--primary); }
.btn:where(:not(.btn-primary, .btn-danger, .btn-ai, .btn-icon)):hover:not(:disabled) { border-color: var(--primary-hover); }
/* 켜고 끄는 버튼(4): 꺼져 있으면 눈에 띄지 않게, 켜지면 옅은 주황 */
.btn[aria-pressed="false"]:not(.btn-icon) { border-color: var(--border); }
.btn[aria-pressed="true"]:not(.btn-icon) { border-color: var(--primary); background: var(--active-bg); color: var(--primary); }
/* AI 설정칸 안(크레딧을 쓰기 전 고르는 곳): 보라 계열 — 보통 버튼은 보라 테두리, 체크·라디오도 보라 */
.btn.btn-ai-line { border-color: var(--ai); color: var(--ai); }
.btn.btn-ai-line:hover:not(:disabled) { border-color: var(--ai); background: var(--ai-active-bg); }
.ai-scope, .batch-dialog, .write-ai, .pt-setup { accent-color: var(--ai); }
.ai-scope input, .batch-dialog input, .write-ai input, .pt-setup input { accent-color: var(--ai); }
/* AI 설정칸 안의 고르기 칸·입력 칸: 테두리와 누를 때 강조선도 보라 계열 (주황 대신) */
:is(.ai-scope, .batch-dialog, .write-ai, .pt-setup) :is(select, input[type="text"], input[type="search"], input[type="number"], textarea) { border-color: color-mix(in srgb, var(--ai) 45%, var(--border)); }
:is(.ai-scope, .batch-dialog, .write-ai, .pt-setup) :is(select, input, textarea):focus { outline: 2px solid var(--ai); outline-offset: 1px; }
:is(.ai-scope, .batch-dialog, .write-ai, .pt-setup) .wr-link { color: var(--ai); }
.btn-lg { font-size: calc(1.05rem + var(--fs-add)); padding: 14px 28px; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.actions-stack { flex-direction: column; }
.actions-stack .btn { width: 100%; }

/* 입력 */
.field { display: block; margin-top: 12px; }
.field-label { display: block; font-size: calc(0.875rem + var(--fs-add)); font-weight: 600; margin-bottom: 6px; }
textarea, input[type="text"], input[type="password"] {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  resize: vertical;
}
textarea:focus, input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

.raw { margin-top: 12px; }
.raw summary { cursor: pointer; font-size: calc(0.875rem + var(--fs-add)); color: var(--muted); }
.raw pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  overflow-x: auto;
  font-size: calc(0.8rem + var(--fs-add));
  white-space: pre-wrap;
  word-break: break-all;
}

/* 대화상자 */
.dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 24px;
  width: min(440px, calc(100vw - 32px));
}
.dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.conflict-times { font-size: calc(0.9rem + var(--fs-add)); margin: 16px 0; }
.conflict-times dt { color: var(--muted); }
.conflict-times dd { margin: 0 0 8px; font-weight: 600; }

/* 알림 */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  background: var(--text);
  color: var(--bg);
  padding: 12px 18px;
  border-radius: 10px;
  font-size: calc(0.9rem + var(--fs-add));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 100;
}
.toast[data-type="error"] { background: var(--error); color: var(--error-ink); font-weight: 600; }
.toast[data-type="success"] { background: var(--success); color: var(--success-ink); font-weight: 600; }

@media (max-width: 480px) {
  .hero-title { font-size: calc(2.4rem + var(--fs-add)); }
  .card { padding: 16px; }
  .actions .btn { flex: 1 1 auto; }
}

/* ───────── 로그인 후 레이아웃: 메뉴바 + 작업 영역 (docs/UX.md 5장) ───────── */

.app { display: flex; min-height: 100vh; min-height: 100dvh; }

/* 메뉴바 */
.sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  width: var(--sb-width);
  height: 100vh;
  height: 100dvh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  transition: width 0.2s ease;
}
.sidebar:focus { outline: none; }
body.is-resizing { cursor: col-resize; user-select: none; }
body.is-resizing .sidebar { transition: none; }

.sb-nav { flex: 1; overflow-x: hidden; overflow-y: auto; padding: 4px 10px; }
.sb-bottom { padding: 8px 10px 12px; border-top: 1px solid var(--border); }

.sb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: calc(0.9375rem + var(--fs-add)); /* 15px — 설정 "글자 크기"의 기준 */
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.sb-item:hover { background: var(--hover); }
.sb-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.sb-item.is-active { background: var(--active-bg); color: var(--primary); font-weight: 700; }
.sb-item.is-active-parent { color: var(--primary); }

.sb-icon { display: inline-flex; flex-shrink: 0; width: 20px; height: 20px; }
.sb-icon .icon { width: 20px; height: 20px; }
.sb-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sb-caret { display: inline-flex; color: var(--muted); }
.sb-caret .icon { width: 16px; height: 16px; transition: transform 0.15s; }

.sb-brand {
  flex-shrink: 0;
  height: 60px;
  padding: 0 22px;
  border-radius: 0;
  color: var(--primary);
  font-family: var(--font-serif);
  font-size: calc(1.35rem + var(--fs-add));
  font-weight: 700;
}
.sb-brand:hover { background: none; }
.sb-logo, .sb-logo .icon { width: 26px; height: 26px; }


/* 세계관 줄: 작품보다 작은 글씨로 위에 */
.sb-world-row { display: flex; align-items: center; }
.sb-world-link { flex: 1; min-width: 0; min-height: 34px; gap: 10px; color: var(--muted); font-size: calc(0.82rem + var(--fs-add)); }
.sb-world-link .sb-icon, .sb-world-link .sb-icon .icon { width: 16px; height: 16px; }
.sb-world-link .sb-icon { margin: 0 2px; color: var(--shared); } /* 세계관 아이콘 = 세계관 공유 색 */
.sb-world-toggle {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.sb-world-toggle:hover { background: var(--hover); color: var(--text); }
.sb-world-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.sb-world-toggle .icon { width: 16px; height: 16px; transition: transform 0.15s; }
.sb-world.is-open .sb-world-toggle .icon { transform: rotate(180deg); }
.sb-world-works { display: none; margin-bottom: 4px; }
.sb-world.is-open .sb-world-works { display: block; }
.sb-world-work.is-current { color: var(--primary); font-weight: 700; }

/* 작업 중인 작품 이름 */
.sb-work { font-weight: 700; }
.sb-sep { height: 2px; margin: 8px 4px; border-radius: 1px; background: var(--border); }

/* 아카이브 하위 메뉴 */
.sb-sub { display: none; }
.sb-group.is-open .sb-sub { display: block; margin: 2px 4px 4px; padding-top: 4px; border-top: 3px solid var(--primary); } /* 펼친 "아카이브" 바로 아래 밑줄 (탭 밑줄과 같은 색) */
.sb-sub .sb-subitem { padding-left: 38px; } /* 아카이브 안 메뉴는 한 칸 더 들여씀 */
.sb-group.is-open > .sb-item .sb-caret .icon { transform: rotate(180deg); }
.sb-subitem { min-height: 40px; padding-left: 26px; font-size: calc(0.9rem + var(--fs-add)); }
.sb-subitem .sb-icon, .sb-subitem .sb-icon .icon { width: 18px; height: 18px; }

.sb-avatar { width: 24px; height: 24px; margin: -2px; border-radius: 50%; }

/* 너비 조절 손잡이 (메뉴바 오른쪽 끝) */
.sb-handle {
  position: absolute;
  top: 0;
  right: -4px;
  z-index: 2;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}
.sb-handle:hover, .sb-handle:focus-visible, body.is-resizing .sb-handle {
  outline: none;
  background: linear-gradient(to right, transparent 3px, var(--primary) 3px, var(--primary) 5px, transparent 5px);
}

/* 접기/펼치기 버튼 (메뉴바 오른쪽 끝, 세로 가운데) */
.sb-toggle {
  position: absolute;
  top: 50%;
  right: -14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  box-shadow: var(--shadow);
  transform: translateY(-50%);
  cursor: pointer;
}
.sb-toggle::before { content: ""; position: absolute; inset: -8px; } /* 누르는 영역 넓히기 */
.sb-toggle:hover, .sb-toggle:focus-visible { color: var(--primary); border-color: var(--primary); outline: none; }
.sb-toggle .icon { width: 16px; height: 16px; }

/* 접힘 = 아이콘만 (태블릿·PC) */
@media (min-width: 768px) {
  .sidebar.is-collapsed .sb-label,
  .sidebar.is-collapsed .sb-caret,
  .sidebar.is-collapsed .sb-sub,
  .sidebar.is-collapsed .sb-world-toggle,
  .sidebar.is-collapsed .sb-world-works { display: none; }
  .sidebar.is-collapsed .sb-item { justify-content: center; gap: 0; padding: 0; }
  .sidebar.is-collapsed .sb-sep { margin: 8px 6px; }
}

/* 접힌 메뉴바의 메뉴 이름 말풍선 */
.sb-tip {
  position: fixed;
  z-index: 200;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  font-size: calc(0.8rem + var(--fs-add));
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-50%);
}

/* 작업 영역 */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main-head { position: sticky; top: 0; z-index: 20; }
.main-top {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 24px 0 32px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: calc(0.9rem + var(--fs-add));
  white-space: nowrap;
}
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumb { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crumb-sep { opacity: 0.5; }
.crumb-current { overflow: hidden; color: var(--text); font-weight: 700; text-overflow: ellipsis; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.screen { width: 100%; max-width: 1150px; margin: 0 auto; padding: 32px 32px 64px; }
/* 플롯·관계도·지도: 메뉴바와 위쪽 경로를 뺀 화면 전체를 씀 */
.screen[data-menu="plot"], .screen[data-menu="relations"], .screen[data-menu="map"] { max-width: none; }

/* 스마트폰 메뉴 버튼 (왼쪽 아래) */
.fab-menu { display: none; }
.sb-backdrop { position: fixed; inset: 0; z-index: 25; background: rgba(0, 0, 0, 0.4); }

@media (max-width: 767px) {
  /* 메뉴바는 숨어 있다가 서랍처럼 나옴 */
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(300px, 85vw);
    height: auto;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0s 0.22s;
  }
  .sidebar.is-open { transform: none; visibility: visible; transition: transform 0.22s ease; }
  .sb-handle, .sb-toggle { display: none; }
  /* 서랍 아래쪽은 ☰ 버튼 자리만큼 비워 둠 */
  .sb-bottom { padding-bottom: 72px; }

  /* 위쪽은 현재 위치만 한 줄로 얇게, 스크롤을 내리면 숨김 */
  .main-top {
    height: calc(40px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 16px 0;
    transition: transform 0.2s ease;
  }
  .crumb, .crumb-sep { display: none; }
  .main-head { transition: transform 0.2s ease; }
  body.chrome-hidden .main-head { transform: translateY(-100%); }

  .screen { padding: 20px 16px 96px; }

  .fab-menu {
    position: fixed;
    left: max(16px, env(safe-area-inset-left));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 35; /* 서랍(메뉴바)보다 위: 서랍이 열려도 같은 자리에서 닫을 수 있게 */
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    opacity: 0.92;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
  }
  .fab-menu .icon { width: 22px; height: 22px; }
  body.chrome-hidden .fab-menu,
  body.is-typing .fab-menu { opacity: 0; pointer-events: none; transform: translateY(12px); }
  body.drawer-open .fab-menu { opacity: 1; pointer-events: auto; transform: none; border-color: var(--primary); color: var(--primary); }
}

/* 작은 팝업 메뉴 (작품 전환, 내 계정 등) */
.popmenu {
  position: fixed;
  z-index: 150;
  min-width: 200px;
  max-width: 300px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.popmenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: calc(0.9rem + var(--fs-add));
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.popmenu-item:hover, .popmenu-item:focus-visible { background: var(--hover); outline: none; }
.popmenu-item.is-active { color: var(--primary); font-weight: 700; }
.popmenu-item.is-disabled { opacity: 0.5; cursor: not-allowed; }
.popmenu-item .icon { flex-shrink: 0; width: 18px; height: 18px; }
.popmenu-label { padding: 6px 10px; color: var(--muted); font-size: calc(0.8rem + var(--fs-add)); overflow-wrap: anywhere; }
.popmenu-divider { margin: 6px 0; border: 0; border-top: 1px solid var(--border); }

/* ───────── 화면 공통 ───────── */
.page-title { margin-bottom: 4px; font-size: calc(1.6rem + var(--fs-add)); }
.page-sub { margin: 0 0 24px; color: var(--muted); }

.notice {
  margin-bottom: 24px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  background: var(--surface);
  font-size: calc(0.9rem + var(--fs-add));
}

.placeholder {
  padding: 48px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}
.placeholder .icon { width: 40px; height: 40px; color: var(--primary); opacity: 0.6; }

/* 페이지 머리 (제목 + 오른쪽 버튼) */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.page-head .page-title { margin: 0; }
.page-actions { display: flex; align-items: center; gap: 8px; }
.btn .icon { width: 18px; height: 18px; margin: -2px 2px 0 -4px; vertical-align: middle; }
.sort-select select { min-height: 44px; }

/* 빈 화면 */
.empty {
  padding: 56px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.empty > .icon { width: 44px; height: 44px; color: var(--primary); opacity: 0.7; }
.empty h2 { margin: 12px 0 4px; }
.empty .btn { margin-top: 16px; }

/* 내 작품: 세계관 묶음 */
.world-group { margin-bottom: 32px; }
.world-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.world-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
a.world-title:hover { color: var(--primary); }
.world-title .icon { width: 18px; height: 18px; color: var(--primary); }
.world-head .card-menu { margin-left: auto; }
.world-empty { margin: 0; }

/* 작품 카드 */
.work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin-bottom: 32px; }
.work-card {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: border-color 0.15s, transform 0.15s;
}
.work-card:hover { border-color: var(--primary); }
.work-card-link { display: block; color: var(--text); text-decoration: none; }
.work-card-link:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: var(--radius); }
.work-cover {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, var(--cover), color-mix(in srgb, var(--cover) 70%, #000));
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-serif);
  font-size: calc(2rem + var(--fs-add));
  font-weight: 700;
}
.work-info { padding: 10px 12px 12px; }
.work-name { margin: 0 0 2px; overflow: hidden; font-size: calc(1rem + var(--fs-add)); text-overflow: ellipsis; white-space: nowrap; }
.work-meta { display: flex; align-items: center; gap: 4px; margin: 0; overflow: hidden; color: var(--muted); font-size: calc(0.8rem + var(--fs-add)); white-space: nowrap; }
.work-meta .icon { flex-shrink: 0; width: 14px; height: 14px; }
.work-card .card-menu {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
}
.work-card .card-menu:hover:not(:disabled) { background: rgba(0, 0, 0, 0.45); }

/* 아이콘만 있는 버튼 */
.btn-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  min-height: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
}
.btn-icon .icon { width: 20px; height: 20px; margin: 0; }

.btn-danger { background: var(--error); border-color: var(--error); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(0.92); border-color: var(--error); }
.popmenu-item.is-danger { color: var(--error); }
/* 타임라인 시간대 메뉴: 흰 사건 카드와 구분되게 테마 색을 옅게 입힘 */
.popmenu.popmenu-tinted { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); background: color-mix(in srgb, var(--primary) 14%, var(--surface)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); }
.popmenu.popmenu-tinted .popmenu-item:hover, .popmenu.popmenu-tinted .popmenu-item:focus-visible { background: color-mix(in srgb, var(--primary) 22%, var(--surface)); }
.popmenu.popmenu-tinted .popmenu-divider { border-top-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }

.actions-end { justify-content: flex-end; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 입력 칸 공통 */
input[type="text"], input[type="password"], input[type="number"], input[type="search"], select {
  width: 100%;
  min-height: 44px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
}
select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
fieldset.field { margin: 12px 0 0; padding: 0; border: 0; }
fieldset.field legend { padding: 0; }
.required { color: var(--error); }
.choice-row { display: flex; flex-wrap: wrap; gap: 16px; }
.choice { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; }
.choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.choice-block { display: flex; align-items: flex-start; }
.choice-block input { margin-top: 4px; flex-shrink: 0; }
.choice-detail { margin: 2px 0 8px 26px; }
.world-field .choice { display: flex; }
.no-world { margin: 0; }
.form-error { margin: 16px 0 0; color: var(--error); font-size: calc(0.9rem + var(--fs-add)); font-weight: 600; }

/* 대화상자 */
.dialog-wide { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.dialog-head h2 { margin: 0; }
.dialog-message { color: var(--muted); }

.sb-new-work { color: var(--muted); }

@media (max-width: 767px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .page-actions { width: 100%; }
  .page-actions .sort-select { flex: 1; }
}

/* ───────── 작품 개요 · 세계관 개요 ───────── */
.overview-head { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 32px; }
.overview-cover { flex-shrink: 0; width: 150px; border-radius: var(--radius); box-shadow: var(--shadow); }
.overview-info { min-width: 0; }
.overview-info .page-title { margin-bottom: 6px; }
.overview-meta { margin: 0 0 8px; color: var(--muted); font-size: calc(0.9rem + var(--fs-add)); }
.overview-logline { margin: 0 0 4px; font-size: calc(1.05rem + var(--fs-add)); }
.page-title .icon { width: 24px; height: 24px; margin-right: 4px; color: var(--primary); vertical-align: -3px; }

.overview-section { margin-bottom: 32px; }
.overview-section > h2, .section-head h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.section-head h2 { margin: 0; }
.section-head h2 .icon { width: 20px; height: 20px; color: var(--primary); }
.long-text {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 시작 가이드 */
.guide { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.guide a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
.guide a:hover { border-color: var(--primary); }
.guide a > span:first-of-type { flex: 1; }
.guide .icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--primary); }

/* 세계관 바로가기 (작품이 여러 개인 세계관) */
.world-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
.world-link:hover { border-color: var(--primary); }
.world-link > span:first-of-type { flex: 1; }
.world-link .icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--primary); }
.world-link .icon:last-child { color: var(--muted); }

/* 세계관 개요: 작품 목록 */
.work-list { display: grid; gap: 8px; }
.work-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
.work-row:hover { border-color: var(--primary); }
.work-row > .icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--muted); }
.work-cover-sm { flex-shrink: 0; width: 48px; border-radius: 6px; font-size: calc(1rem + var(--fs-add)); }
.work-row-info { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.work-row-info > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 편집 화면 */
.edit-form { max-width: 720px; }
.edit-form textarea { min-height: 200px; line-height: 1.7; }

@media (max-width: 767px) {
  .overview-head { gap: 16px; }
  .overview-cover { width: 96px; font-size: calc(1.4rem + var(--fs-add)); }
}

/* ───────── 표지 이미지 ───────── */
.work-cover { position: relative; overflow: hidden; }
.work-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work-cover > img:not([src]) { display: none; }
.work-cover.has-image > span { visibility: hidden; }

/* 표지 고르기 칸 */
.with-cover { display: flex; gap: 20px; align-items: flex-start; }
.with-cover-fields { flex: 1; min-width: 0; }
.with-cover-fields > .field:first-child { margin-top: 0; }
.cover-picker { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 120px; flex-shrink: 0; }
.cover-drop {
  width: 120px;
  padding: 0;
  border: 2px dashed transparent;
  border-radius: 10px;
  font-size: calc(1.6rem + var(--fs-add));
  cursor: pointer;
}
.cover-drop:hover, .cover-drop:focus-visible, .cover-drop.is-dragover { border-color: var(--primary); outline: none; }
.cover-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.btn-small { min-height: 32px; padding: 4px 8px; font-size: calc(0.8rem + var(--fs-add)); }

/* 자르기 대화상자 */
.crop-dialog { width: min(360px, calc(100vw - 32px)); text-align: center; }
.crop-dialog h2 { text-align: left; }
.crop-dialog > p { text-align: left; }
.crop-frame {
  margin: 12px auto;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--border);
  cursor: grab;
  touch-action: none;
}
.crop-frame.is-dragging { cursor: grabbing; }
.crop-frame:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.crop-frame canvas { display: block; }
.crop-zoom { display: flex; align-items: center; gap: 10px; max-width: 280px; margin: 0 auto 8px; color: var(--muted); }
.crop-zoom input { flex: 1; accent-color: var(--primary); }

@media (max-width: 480px) {
  .with-cover { flex-direction: column; align-items: center; }
  .with-cover-fields { width: 100%; }
}

/* ───────── 세계관 탭 (경로 바로 아래) ───────── */
.subnav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0 24px 0 32px;
  background: var(--bg);
  border-bottom: 2px solid var(--border);
  scrollbar-width: none;
}
/* 탭 규칙: 탭 줄은 2px 선, 고른 탭은 아래에 3px 밑줄 (버튼이 아니라 탭) */
.subnav-item {
  flex-shrink: 0;
  padding: 10px 14px;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-size: calc(0.9rem + var(--fs-add));
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.subnav-item:hover { color: var(--text); }
.subnav-item.is-active { border-bottom-color: var(--primary); color: var(--primary); }
@media (max-width: 767px) { .subnav { padding: 0 8px; } }

/* ───────── 켜기/끄기 버튼 (🌐 세계관 공유) ───────── */
.toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: calc(0.9rem + var(--fs-add));
  font-weight: 600;
  cursor: pointer;
}
.toggle-btn .icon { width: 18px; height: 18px; }
.toggle-btn .toggle-state { padding: 0 8px; border-radius: 999px; background: var(--border); font-size: calc(0.75rem + var(--fs-add)); }
.toggle-btn[aria-pressed="true"] { border-color: var(--primary); background: var(--active-bg); color: var(--primary); }
.toggle-btn[aria-pressed="true"] .toggle-state { background: var(--primary); color: var(--primary-text); }

/* ───────── 문서 목록 ───────── */
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.search-box .icon { flex-shrink: 0; width: 18px; height: 18px; color: var(--muted); }
.search-box input { flex: 1; min-height: 44px; border: 0; background: none; color: var(--text); font: inherit; }
.search-box input:focus { outline: none; }
.search-box:focus-within { border-color: var(--primary); }

.doc-group { margin-bottom: 24px; }
.doc-group-title { margin-bottom: 8px; font-size: calc(1rem + var(--fs-add)); }
.doc-list { display: grid; gap: 6px; }
.doc-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
.doc-row:hover { border-color: var(--primary); }
.doc-row-title { font-weight: 700; }
.doc-row-tags { margin-left: 4px; color: var(--primary); font-size: calc(0.8rem + var(--fs-add)); font-weight: 400; }
.list-option { width: auto !important; min-height: 40px; padding: 0 8px !important; font-size: calc(0.875rem + var(--fs-add)); }
.char-name-list { display: flex; flex-wrap: wrap; gap: 6px; }
.char-name-item { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 4px; border: 2px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 600; text-decoration: none; }
.char-name-item:hover { border-color: var(--primary); }
.char-name-thumb { position: relative; display: grid; place-items: center; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; color: #fff; font-size: calc(0.8rem + var(--fs-add)); }
.char-name-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.char-name-item .shared-badge .icon { width: 14px; height: 14px; }
.doc-row-summary { overflow: hidden; color: var(--muted); font-size: calc(0.875rem + var(--fs-add)); text-overflow: ellipsis; white-space: nowrap; }
.shared-badge { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-size: calc(0.8rem + var(--fs-add)); font-weight: 600; vertical-align: middle; }
.shared-badge .icon { width: 15px; height: 15px; }

/* ───────── 위키 보기 ───────── */
.wiki { max-width: 1050px; }
.wiki-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--border); }
.wiki-title { margin: 0 0 6px; font-size: calc(1.9rem + var(--fs-add)); }
.wiki-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; color: var(--muted); font-size: calc(0.85rem + var(--fs-add)); }
.wiki-summary { margin: 8px 0 0; }
.wiki-actions { display: flex; gap: 6px; }
.lock-mark { display: inline-flex; color: var(--muted); opacity: 0.6; vertical-align: middle; }
.lock-mark .icon { width: 14px; height: 14px; }

.infobox {
  width: min(420px, 100%);
  margin: 0 auto 24px;
  border: 1px solid var(--border);
  border-collapse: collapse;
  background: var(--surface);
  font-size: calc(0.92rem + var(--fs-add));
}
.infobox caption { padding: 10px; background: var(--active-bg); color: var(--primary); font-weight: 700; caption-side: top; border: 1px solid var(--border); border-bottom: 0; }
.infobox th, .infobox td { padding: 8px 12px; border-top: 2px solid var(--border); text-align: left; vertical-align: top; }
.infobox th { width: 32%; background: var(--bg); color: var(--muted); font-weight: 600; white-space: nowrap; }

.toc { display: inline-block; min-width: 220px; margin: 0 0 28px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.toc h2 { margin: 0 0 6px; font-size: calc(1rem + var(--fs-add)); }
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc button { padding: 3px 0; border: 0; background: none; color: var(--primary); font: inherit; text-align: left; cursor: pointer; }
.toc button:hover { text-decoration: underline; }
.toc-d2 { padding-left: 1.2em; }
.toc-d3 { padding-left: 2.4em; }
.toc-num { font-weight: 700; }

.wiki-section { margin-bottom: 20px; scroll-margin-top: 110px; }
.wiki-heading { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
h2.wiki-heading { font-size: calc(1.35rem + var(--fs-add)); }
h3.wiki-heading { font-size: calc(1.15rem + var(--fs-add)); }
h4.wiki-heading { font-size: calc(1rem + var(--fs-add)); }
.wiki-num { color: var(--primary); font-weight: 700; }
.to-top { margin-left: auto; padding: 0 6px; border: 0; background: none; color: var(--muted); font-size: calc(0.9rem + var(--fs-add)); cursor: pointer; }
.wiki-text { line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }

.wiki-link { color: var(--primary); text-decoration: none; border-bottom: 1px solid currentColor; }
.wiki-link:hover { background: var(--hover); }
.wiki-link.is-missing { color: var(--error); border-bottom-style: dashed; }
.fn-ref button { padding: 0 1px; border: 0; background: none; color: var(--primary); font: inherit; font-size: 0.75em; cursor: pointer; }
.footnotes { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--border); font-size: calc(0.875rem + var(--fs-add)); }
.footnotes ol { margin: 0; padding: 0; list-style: none; }
.footnotes li { margin-bottom: 6px; scroll-margin-top: 110px; }
.footnotes li button { border: 0; background: none; color: var(--primary); font: inherit; cursor: pointer; }

/* ───────── 위키 편집 ───────── */
.wiki-edit { display: grid; gap: 24px; }

.wiki-edit-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.wiki-edit-head .page-title { margin: 0; }
.wiki-edit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wiki-form .card h2 { margin: 0; font-size: calc(1.05rem + var(--fs-add)); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lock-row { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: calc(0.85rem + var(--fs-add)); cursor: pointer; }

.lock-btn {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.6;
}
.lock-btn .icon { width: 18px; height: 18px; }
.lock-btn:hover { background: var(--hover); opacity: 1; }
.lock-btn[aria-pressed="true"] { border-color: var(--primary); background: var(--active-bg); color: var(--primary); opacity: 1; }

.input-with-lock { display: flex; align-items: center; gap: 6px; }
.field-rows { display: grid; gap: 6px; margin: 10px 0; }
.field-row { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(0, 2fr) auto auto auto auto auto; align-items: center; gap: 4px; } /* 이름 · 내용 · 고정 · AI 참고 · ↑ · ↓ · ✕ */
.field-row input { min-height: 40px; }
.field-row .btn-icon { width: 32px; height: 32px; min-height: 32px; }

.section-edit { margin: 14px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.section-edit.depth-2 { margin-left: 24px; }
.section-edit.depth-3 { margin-left: 48px; }
.section-edit-head { display: flex; align-items: center; gap: 4px; }
.section-edit-head input { flex: 1; min-width: 0; min-height: 40px; font-weight: 700; }
.section-edit-head .btn-icon { width: 32px; height: 32px; min-height: 32px; }
.section-edit-head .btn-icon:disabled { opacity: 0.25; }
.text-tools { display: flex; gap: 6px; margin: 8px 0 6px; }
.section-edit textarea { min-height: 120px; background: var(--surface); line-height: 1.7; }


@media (max-width: 767px) {
  .field-row { grid-template-columns: minmax(0, 1fr) auto auto auto auto auto; } /* 첫 줄: 이름 · 버튼들, 둘째 줄: 내용 */
  .field-row input[data-key="value"] { grid-column: 1 / -1; grid-row: 2; }
  .section-edit.depth-2 { margin-left: 10px; }
  .section-edit.depth-3 { margin-left: 20px; }
  .section-edit-head { flex-wrap: wrap; }
  .section-edit-head input { flex-basis: 100%; order: -1; }
}

/* 내 작품 검색창 (보기 방식 왼쪽) */
.home-search { width: 240px; margin: 0; }
.home-search input { min-height: 42px; }
@media (max-width: 767px) {
  .page-actions { flex-wrap: wrap; }
  .home-search { width: 100%; }
}

/* 세계관 아카이브: 아카이브 하위 메뉴별 칸 */
.shared-section { margin-bottom: 28px; }
.shared-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: calc(1.1rem + var(--fs-add)); }
.shared-section-title .icon { width: 20px; height: 20px; color: var(--primary); }
.wiki-title .shared-badge { margin-left: 6px; }

/* ───────── 위키: 블록 (보기) ───────── */
.wiki-section > * + * { margin-top: 12px; }
.infobox { width: min(420px, 100%); margin: 0 auto 24px; border: 2px solid var(--border); background: var(--surface); font-size: calc(0.92rem + var(--fs-add)); }
.infobox-caption { padding: 10px; background: var(--active-bg); color: var(--primary); font-weight: 700; text-align: center; }
.infobox table { width: 100%; border-collapse: collapse; }
.infobox-image { margin: 0; border-top: 2px solid var(--border); }
.infobox-image img { display: block; width: 100%; max-height: 520px; object-fit: contain; background: var(--bg); }
.infobox-image figcaption { padding: 6px 10px; color: var(--muted); font-size: calc(0.8rem + var(--fs-add)); text-align: center; }
.infobox-more { border-top: 2px solid var(--border); }
.infobox-more > summary { padding: 8px 10px; color: var(--primary); font-size: calc(0.85rem + var(--fs-add)); font-weight: 600; text-align: center; cursor: pointer; }

.wiki-images { display: grid; gap: 10px; }
.wiki-images.count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wiki-images.count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wiki-images figure { margin: 0; }
.wiki-images img { display: block; width: 100%; max-height: 560px; object-fit: contain; border-radius: 8px; background: var(--surface); }
.wiki-images.count-1 img { width: auto; max-width: 100%; margin: 0 auto; }
.wiki-images figcaption { margin-top: 4px; color: var(--muted); font-size: calc(0.85rem + var(--fs-add)); text-align: center; }

.wiki-table-wrap { overflow-x: auto; }
.wiki-table { border-collapse: collapse; min-width: 50%; font-size: calc(0.92rem + var(--fs-add)); }
.wiki-table th, .wiki-table td { padding: 8px 12px; border: 2px solid var(--border); text-align: left; vertical-align: top; }
.wiki-table th { background: var(--active-bg); font-weight: 700; }

.status-box { display: inline-grid; gap: 6px; min-width: min(360px, 100%); padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.status-row { display: grid; grid-template-columns: 6em 1fr auto; align-items: center; gap: 10px; }
.status-label { font-weight: 600; }
.status-bar { height: 10px; overflow: hidden; border-radius: 999px; background: var(--border); }
.status-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.status-value { font-size: calc(0.85rem + var(--fs-add)); font-variant-numeric: tabular-nums; }
.status-grade { grid-column: 2 / -1; color: var(--primary); font-weight: 700; }

.fold { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.fold > summary { padding: 10px 14px; font-weight: 700; cursor: pointer; }
.fold > .wiki-text { padding: 0 14px 12px; }

@media (max-width: 767px) {
  .wiki-images.count-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ───────── 위키: 블록 (편집) ───────── */
.block-edit { margin-top: 10px; padding: 10px; border: 1px dashed var(--border); border-radius: 8px; background: var(--surface); }
.block-edit.block-text { padding: 0; border: 0; background: none; }
.block-head { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.block-type { margin-right: auto; color: var(--muted); font-size: calc(0.8rem + var(--fs-add)); font-weight: 700; }
.block-head .btn-icon { width: 30px; height: 30px; min-height: 30px; }
.block-head .btn-icon:disabled { opacity: 0.25; }
.add-block { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.add-block .icon { width: 14px; height: 14px; }

.image-edit-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.image-edit { position: relative; display: flex; flex-direction: column; gap: 4px; width: 140px; }
.image-edit img { width: 140px; height: 140px; object-fit: cover; border-radius: 8px; background: var(--bg); }
.image-edit input { min-height: 34px; padding: 4px 8px; font-size: calc(0.8rem + var(--fs-add)); }
.image-edit-tools { display: flex; justify-content: center; gap: 2px; }
.image-edit-tools .btn-icon { width: 30px; height: 30px; min-height: 30px; }
.image-edit-tools .btn-icon:disabled { opacity: 0.25; }
.image-main { position: absolute; top: 6px; left: 6px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: var(--primary-text); font-size: calc(0.72rem + var(--fs-add)); font-weight: 700; }
.image-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 140px;
  height: 140px;
  border: 2px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: calc(0.85rem + var(--fs-add));
  cursor: pointer;
}
.image-add:hover, .image-add:focus-within { border-color: var(--primary); color: var(--primary); }
.image-add .icon { width: 22px; height: 22px; }

.table-edit-wrap { overflow-x: auto; }
.table-edit { border-collapse: collapse; }
.table-edit td { padding: 2px; }
.table-edit input { min-width: 110px; min-height: 36px; padding: 4px 8px; }
.table-edit input.is-header { font-weight: 700; background: var(--active-bg); }
.table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }

.status-edit { display: grid; gap: 6px; margin-bottom: 6px; }
.status-edit-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 4px; }
.status-edit-row input { min-height: 36px; padding: 4px 8px; }
.block-fold input[data-k="title"] { margin-bottom: 4px; font-weight: 700; }

/* 맨 위로 버튼 (오른쪽 아래) */
.fab-top {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 24;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.fab-top:hover { border-color: var(--primary); }
.fab-top .icon { width: 20px; height: 20px; }
.fab-top[hidden] { display: none; }
/* 스크롤하면 바로 나타나고, 멈추면 천천히 사라짐 (마우스를 올리고 있으면 그대로) */
.fab-top { opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 0s linear 1.2s; }
.fab-top.is-shown, .fab-top:hover, .fab-top:focus-visible { opacity: 1; visibility: visible; transition: opacity 0.15s ease; }
@media (min-width: 1200px) { body.ai-open .fab-top { right: 420px; } }

/* 세계관 탭: 두 줄 (아래 줄은 세계관 아카이브의 하위 메뉴) */
.subnav { display: block; padding: 0; }
.subnav-row { display: flex; gap: 4px; overflow-x: auto; padding: 0 24px 0 32px; scrollbar-width: none; }
.subnav-sub { border-top: 2px solid var(--border); background: var(--surface); }
.subnav-sub .subnav-item { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: calc(0.85rem + var(--fs-add)); }
.subnav-item .icon { width: 16px; height: 16px; }
@media (max-width: 767px) { .subnav-row { padding: 0 8px; } }

/* 접기 (목차·블록) */
.fold-check { display: inline-flex; align-items: center; gap: 4px; margin: 0 6px; color: var(--muted); font-size: calc(0.8rem + var(--fs-add)); white-space: nowrap; cursor: pointer; }
.fold-check input { width: 16px; height: 16px; accent-color: var(--primary); }
.fold-title { margin: 6px 0; min-height: 36px; font-size: calc(0.85rem + var(--fs-add)); }
.block-edit { border-style: dashed; }
.block-edit.block-text { padding: 8px 10px; border: 1px dashed var(--border); background: var(--surface); }
.block-edit.is-folded { border-color: var(--primary); }
.section-fold { margin-bottom: 16px; }
.fold-body { padding: 4px 14px 12px; }
.fold-body > * + * { margin-top: 12px; }
.wiki-heading { scroll-margin-top: 110px; }
.wiki-section-body { margin-bottom: 20px; }
.wiki-section-body > * + * { margin-top: 12px; }

/* 이미지 크기 */
.wiki-images { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.wiki-images figure { flex: 0 0 auto; max-width: 100%; }
.wiki-images figure[style*="width:100%"] { width: 100% !important; }
.wiki-images img, .wiki-images.count-1 img { width: 100%; max-height: none; }
.image-width { display: flex; flex-direction: column; gap: 2px; font-size: calc(0.75rem + var(--fs-add)); color: var(--muted); }
.image-width input { width: 100%; accent-color: var(--primary); }

/* 스테이터스: 표시 방식·최대값, 다각형 */
.status-options { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.status-options .field-label { margin: 0; }
.status-max { display: inline-flex; align-items: center; gap: 6px; font-size: calc(0.85rem + var(--fs-add)); }
.status-max input { width: 90px; min-height: 36px; padding: 4px 8px; }
.status-edit-row { grid-template-columns: 1.4fr 1fr auto; }
.form-hint { margin: 4px 0 8px; color: var(--error); font-size: calc(0.8rem + var(--fs-add)); }
.status-radar { display: inline-block; width: min(380px, 100%); padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); text-align: center; }
.status-radar svg { display: block; width: 100%; height: auto; }
.radar-ring { fill: none; stroke: var(--border); stroke-width: 1; }
.radar-axis { stroke: var(--border); stroke-width: 1; }
.radar-area { fill: var(--primary); fill-opacity: 0.28; stroke: var(--primary); stroke-width: 2; }
.radar-dot { fill: var(--primary); }
.radar-label { fill: var(--text); font-size: 13px; font-weight: 600; }
.radar-value { fill: var(--primary); }
.radar-max { margin: 0; }
/* 스테이터스는 블록마다 한 줄씩 (나란히 붙지 않게) */
.status-box { display: grid; width: fit-content; max-width: 100%; }
.status-radar { display: block; }

/* ───────── 캐릭터 카드 ───────── */
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.char-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
}
.char-card:hover { border-color: var(--primary); }
.char-image { aspect-ratio: 3 / 4; font-size: calc(2rem + var(--fs-add)); }
.char-info { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.char-name { font-size: calc(1rem + var(--fs-add)); }
.char-tags { color: var(--primary); font-size: calc(0.78rem + var(--fs-add)); }
.char-summary { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: calc(0.82rem + var(--fs-add)); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tag-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 18px; }
.tag-chip { padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font: inherit; font-size: calc(0.82rem + var(--fs-add)); cursor: pointer; }
.tag-chip:hover { border-color: var(--primary); }
.tag-chip.is-active { border-color: var(--primary); background: var(--active-bg); color: var(--primary); font-weight: 700; }
@media (max-width: 767px) { .char-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* 경고 창 (짧게, 버튼 가로) */
.dialog-compact { width: min(400px, calc(100vw - 32px)); }
.dialog-compact h2 { margin-bottom: 4px; color: var(--error); }
.actions-row { flex-wrap: nowrap; justify-content: flex-end; }
.actions-row .btn { flex: 0 0 auto; }
@media (max-width: 420px) { .actions-row .btn { flex: 1 1 0; padding: 10px 8px; font-size: calc(0.85rem + var(--fs-add)); } }

/* 위쪽 줄 오른쪽 저장 상태 */
.save-status { color: var(--muted); font-size: calc(0.82rem + var(--fs-add)); white-space: nowrap; }
.save-status.is-saved { color: var(--success); }
.save-status.is-saving { color: var(--primary); }
.save-status.is-warn { color: var(--error); }

/* 빈 줄 */
.wiki-spacer { margin: 0 !important; }
.spacer-edit { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: calc(0.85rem + var(--fs-add)); }
.spacer-edit select { width: auto; min-height: 34px; padding: 2px 8px; }

/* 정렬 (이미지·스테이터스) */
.wiki-images.align-left, .status-wrap.align-left { justify-content: flex-start; }
.wiki-images.align-center, .status-wrap.align-center { justify-content: center; }
.wiki-images.align-right, .status-wrap.align-right { justify-content: flex-end; }
.status-wrap { display: flex; }
.status-title { margin-bottom: 6px; color: var(--primary); font-weight: 700; text-align: center; }
.status-radar .status-title { margin: 4px 0 0; }
.block-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; }
.block-options .field-label { margin: 0; }
.align-pick { display: inline-flex; gap: 2px; }
.align-pick .btn.is-on { border-color: var(--primary); background: var(--active-bg); color: var(--primary); }
.status-title-input { margin-bottom: 8px; font-weight: 700; }
.status-preview { margin-top: 10px; padding: 12px; border: 1px dashed var(--border); border-radius: 8px; background: var(--bg); }
.status-preview .status-wrap { pointer-events: none; }

/* 이미지 너비 (px) */
.size-bar { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: var(--border); }
.size-bar > span { display: block; height: 100%; background: var(--primary); opacity: 0.7; }
.image-width .btn { min-height: 26px; padding: 0 6px; font-size: calc(0.72rem + var(--fs-add)); }
.image-edit { width: 160px; }
.image-edit img { width: 160px; height: 140px; }
.wiki-images figure { max-width: 100%; }

/* 분류 고르기 버튼, 구분선 */
.category-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.divider { margin: 16px 0 8px; border: 0; border-top: 1px solid var(--border); }

/* 문서 연결 고르기 */
.doc-picker { width: min(480px, calc(100vw - 32px)); }
.doc-picker .search-box { margin: 10px 0; }
.picker-list { display: grid; gap: 4px; max-height: 50vh; overflow-y: auto; }
.picker-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.picker-item:hover, .picker-item:focus-visible { border-color: var(--primary); outline: none; }
.picker-kind { color: var(--primary); font-size: calc(0.72rem + var(--fs-add)); font-weight: 700; }

/* 블록 정렬 버튼 (오른쪽 위, 접기 왼쪽) */
.align-pick { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: calc(0.8rem + var(--fs-add)); white-space: nowrap; }
.align-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 8px; font-size: calc(0.8rem + var(--fs-add)); }
.align-btn .icon { width: 14px; height: 14px; }
.wiki-table-wrap { display: flex; }
.wiki-table-wrap.align-center { justify-content: center; }
.wiki-table-wrap.align-right { justify-content: flex-end; }

/* ───────── 말풍선 (각주·문서 연결) ───────── */
.wiki-tip {
  position: fixed;
  z-index: 300;
  max-width: min(340px, calc(100vw - 16px));
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  font-size: calc(0.875rem + var(--fs-add));
  line-height: 1.6;
}
.tip-label { color: var(--primary); font-size: calc(0.72rem + var(--fs-add)); font-weight: 700; }
.tip-doc { display: flex; gap: 10px; }
.tip-thumb { flex-shrink: 0; width: 56px; height: 72px; object-fit: cover; border-radius: 6px; background: var(--bg); }
.tip-thumb:not([src]) { display: none; }
.tip-summary { color: var(--muted); }
.tip-open { display: inline-block; margin-top: 4px; color: var(--primary); font-weight: 600; text-decoration: none; }

/* ───────── 집필: 회차 목록 ───────── */
.chapter-list { display: grid; gap: 4px; }
.chapter-row { display: flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.chapter-row:hover { border-color: var(--primary); }
.chapter-link { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; min-height: 48px; padding: 6px 4px 6px 14px; color: var(--text); text-decoration: none; }
.chapter-no { flex-shrink: 0; width: 4.5ch; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.chapter-time { min-width: 5.5em; text-align: right; }
.chapter-title { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.chapter-meta { flex-shrink: 0; color: var(--muted); font-size: calc(0.8rem + var(--fs-add)); }
.status-chip { flex-shrink: 0; padding: 0 8px; border-radius: 999px; background: var(--border); font-size: calc(0.75rem + var(--fs-add)); font-weight: 700; }
.status-chip.is-revise { background: var(--active-bg); color: var(--primary); }
.status-chip.is-done { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }
.chapter-group { margin-bottom: 10px; }
.chapter-group > summary { padding: 8px 4px; font-weight: 700; cursor: pointer; }
@media (max-width: 767px) { .chapter-link .chapter-meta:last-child { display: none; } }

/* ───────── 집필: 원고 편집기 ───────── */
.editor { max-width: 1050px; margin: 0 auto; }
.editor-head { position: sticky; top: 56px; z-index: 5; margin: -8px 0 12px; padding: 8px 0; background: var(--bg); }
.editor-title-row { display: flex; align-items: center; gap: 10px; }
.editor-no { flex-shrink: 0; min-width: 4.5ch; color: var(--muted); font-size: calc(1.05rem + var(--fs-add)); font-variant-numeric: tabular-nums; text-align: right; }
button.editor-no { padding: 4px 6px; border: 1px dashed transparent; border-radius: 6px; background: none; font-family: inherit; white-space: nowrap; cursor: pointer; } /* 누르면 외전 ⇄ 회차 */
button.editor-no:hover { border-color: var(--border); color: var(--primary); }
.editor-no.is-side { color: var(--primary); font-weight: 700; }
.editor-title { flex: 1; min-height: 44px; border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; background: none !important; font-size: calc(1.3rem + var(--fs-add)); font-weight: 700; }
.editor-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.editor-bar select { width: auto; min-height: 34px; padding: 2px 8px; }
.editor-count { color: var(--muted); font-size: calc(0.8rem + var(--fs-add)); }
.editor-spacer { flex: 1; }
.editor-bar .btn.is-on { border-color: var(--primary); background: var(--active-bg); color: var(--primary); }
.mode-btn { min-width: 4em; }
.mode-btn.is-view { border-color: var(--border); background: var(--surface); color: var(--text); }
.editor.is-view .editor-title { border-bottom-color: transparent !important; }

/* AI 기능 (크레딧 사용): 보라색 버튼 + 오른쪽 위 ✦ */
.btn-ai { position: relative; padding-right: 18px; border: 1px solid var(--ai) !important; background: var(--ai) !important; color: var(--ai-text) !important; font-weight: 700; }
.btn-ai:hover { background: color-mix(in srgb, var(--ai) 85%, #000) !important; }
/* 꺼진 AI 버튼(예: API 키 없음)도 버튼 색은 그대로 — 반투명하게 하면 바탕과 섞여 다른 색처럼 보임. 글자만 흐리게 */
.btn-ai:disabled { opacity: 1; color: color-mix(in srgb, var(--ai-text) 45%, var(--ai)) !important; }
.btn-ai:disabled:hover { background: var(--ai) !important; }
.btn.btn-ai-line:disabled { opacity: 1; border-style: dashed; color: color-mix(in srgb, var(--ai) 60%, transparent); }
.btn-ai .ai-mark { position: absolute; top: 2px; right: 5px; color: currentColor; font-size: calc(0.6rem + var(--fs-add)); line-height: 1; }
.editor-extra > summary .btn-ai { float: right; margin: -4px 0 0 8px; }
.editor-tools { display: flex; gap: 6px; margin-top: 8px; }
.manuscript {
  display: block;
  width: 100%;
  min-height: 65vh;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: calc(1.05rem + var(--fs-add));
  line-height: 1.9;
  outline: none;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.manuscript { position: relative; }
.manuscript:focus { border-color: var(--primary); }
.manuscript p, .manuscript-text p { margin: 0; }
.manuscript img, .manuscript-text img { max-width: 100%; height: auto; border-radius: 6px; vertical-align: top; }
/* 이미지 크기 조절 테두리 (편집기에서 이미지를 누르면) */
.img-frame { position: fixed; z-index: 30; border: 2px solid var(--primary); pointer-events: none; }
.img-handle { position: absolute; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 3px; background: var(--primary); pointer-events: auto; touch-action: none; }
.img-handle.is-nw { top: -8px; left: -8px; cursor: nwse-resize; }
.img-handle.is-se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.img-handle.is-ne { top: -8px; right: -8px; cursor: nesw-resize; }
.img-handle.is-sw { bottom: -8px; left: -8px; cursor: nesw-resize; }
.img-size { position: absolute; right: 4px; bottom: 4px; padding: 0 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: calc(0.75rem + var(--fs-add)); }
.manuscript img { cursor: pointer; }
.manuscript img[data-paste] { min-width: 120px; min-height: 80px; outline: 1px dashed var(--muted); background: var(--active-bg); }
.manuscript.is-empty::before { content: attr(data-placeholder); position: absolute; inset: 0 0 auto 0; padding: inherit; color: var(--muted); pointer-events: none; } /* 본문 칸의 안쪽 여백을 그대로 써서 오른쪽으로 넘치지 않게 */

/* 글쓰기 도구 줄 (편집할 때만) */
.rich-tools { flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.tool-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 32px; height: 32px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: calc(0.9rem + var(--fs-add)); cursor: pointer; }
.tool-btn:hover { background: var(--active-bg); }
.tool-btn.is-on { border-color: var(--primary); background: var(--active-bg); color: var(--primary); }
.tool-btn .icon { width: 18px; height: 18px; }
.tool-wide { padding: 0 8px; font-size: calc(0.8rem + var(--fs-add)); }
.tool-select { width: auto !important; min-height: 32px !important; height: 32px; padding: 0 6px !important; font-size: calc(0.85rem + var(--fs-add)); }
.tool-font { max-width: 10em; }
.tool-sep { width: 1px; height: 20px; margin: 0 2px; background: var(--border); }

/* 보기: 게시글처럼 */
.post-page { max-width: 1050px; margin: 0 auto; }
.post-bar { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 12px; }
.post { padding: 28px 30px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.post .manuscript-text { white-space: pre-wrap; }
.post .footnotes { margin-top: 24px; }
.post-extra { margin-top: 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.post-extra h2 { margin: 0 0 6px; font-size: calc(0.9rem + var(--fs-add)); color: var(--muted); }
.post-extra p { margin: 0; white-space: pre-wrap; }
@media (max-width: 767px) { .post { padding: 18px 16px; } }
.manuscript-preview { min-height: 65vh; padding: 20px 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.manuscript-text { font-family: var(--font-serif); font-size: calc(1.05rem + var(--fs-add)); line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.preview-title { margin-bottom: 16px; font-size: calc(1.3rem + var(--fs-add)); }
.editor-extra { margin-top: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.editor-extra > summary { font-weight: 700; cursor: pointer; }
.editor-extra textarea { margin-top: 8px; }
.editor-nav { display: flex; justify-content: space-between; margin-top: 20px; }
.overview-progress { margin: 0 0 4px; }

/* 집중 모드: 메뉴바·위쪽 줄 숨김 */
body.focus-mode .sidebar, body.focus-mode .main-head, body.focus-mode .fab-menu { display: none !important; }
body.focus-mode .editor-head { top: 0; }
@media (max-width: 767px) {
  .editor-head { top: 40px; }
  .manuscript { padding: 14px !important; }
  /* 스마트폰: 도구 줄은 한 줄로 (옆으로 밀어서 봄) */
  .rich-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rich-tools::-webkit-scrollbar { display: none; }
  .rich-tools > * { flex-shrink: 0; }
  /* 본문을 쓰는 중(키보드가 올라옴)에는 위에 붙은 칸을 도구 줄만 남겨 글 쓸 자리를 넓힘 */
  .editor:has(.manuscript:focus) .editor-title-row,
  .editor:has(.manuscript:focus) .editor-bar { display: none; }
  .editor:has(.manuscript:focus) .editor-head { padding: 4px 0; }
  .editor:has(.manuscript:focus) .rich-tools { margin-top: 0; }
}

/* 내보내기 */
.export-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.export-pick .field-label { margin: 0 auto 0 0; }
.export-box { margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.export-chapters { display: grid; gap: 2px; max-height: calc(6 * 34px + 16px); overflow-y: auto; padding: 8px 10px; }
.export-item:hover { color: var(--primary); }
.export-box + .muted { margin-top: 6px; }
.export-item { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.export-no { flex-shrink: 0; width: 4.5ch; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.export-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.export-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.export-note { margin: 2px 0; }
.export-format { width: auto !important; min-height: 34px !important; height: 34px; padding: 0 6px !important; font-size: calc(0.85rem + var(--fs-add)); }

/* 작품 개요: 이름을 바꿀 수 있는 항목 제목 (예: 기획 의도) */
.label-input { width: auto !important; max-width: 16em; min-height: 34px; margin-bottom: 6px; font-weight: 700; }

/* 표: 넓은 표도 가로 스크롤로 첫 칸까지 볼 수 있게 (가운데 정렬 상자 안에서는 왼쪽으로 넘친 부분이 잘림 → 여백으로 정렬) */
.wiki-table-wrap { display: block !important; overflow-x: auto; }
.wiki-table-wrap .wiki-table { margin-right: auto; }
.wiki-table-wrap.align-center .wiki-table { margin-left: auto; margin-right: auto; }
.wiki-table-wrap.align-right .wiki-table { margin-left: auto; margin-right: 0; }
.wiki-table td, .wiki-table th { min-width: 4em; }

/* ───────── 미니 집필 목록 (메뉴바 탭) ───────── */
.sb-row { display: flex; align-items: center; gap: 2px; }
.sb-row > .sb-item { flex: 1; min-width: 0; }
.sb-tab-btn, .mini-icon-btn { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.sb-tab-btn:hover, .mini-icon-btn:hover { background: var(--hover); color: var(--primary); }
.sb-tab-btn .icon, .mini-icon-btn .icon { width: 18px; height: 18px; }
.sb-nav.is-mini .sb-main { display: none; }
.sb-nav:not(.is-mini) .sb-mini { display: none; }
.sb-mini { display: flex; flex-direction: column; min-height: 100%; }
.mini-head { position: sticky; top: -4px; z-index: 1; display: flex; align-items: center; gap: 2px; padding: 4px 0 6px; border-bottom: 1px solid var(--border); background: var(--sidebar-bg, var(--surface)); }
.mini-title { flex: 1; min-width: 0; padding: 0 6px; color: var(--text); font-weight: 700; text-decoration: none; }
.mini-title:hover { color: var(--primary); }
.mini-list { flex: 1; padding: 6px 0 12px; }
.mini-list.is-drop { background: var(--hover); border-radius: 8px; }
.mini-item { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 8px; border-radius: 8px; color: var(--text); font-size: calc(0.875rem + var(--fs-add)); text-decoration: none; cursor: pointer; }
.mini-item:hover { background: var(--hover); }
.mini-item.is-current { background: var(--active-bg); color: var(--primary); font-weight: 700; }
.mini-item.is-peek { box-shadow: inset 3px 0 0 var(--primary); } /* 분할 화면에 보이는 회차 (AI가 아니므로 테마색) */

/* ───────── 분할 화면 (js/split.js) — 원래 화면 + 오른쪽에 더 연 화면 (최대 3개) ───────── */
.top-split { border: 0; background: none; cursor: pointer; }
.top-split[hidden] { display: none; }
.top-split.is-active { color: var(--primary); }
.top-actions:empty + .top-split { margin-left: -12px; }
.top-split + .top-memo { margin-left: -6px; }
.split-grip { display: none; }
.split-row.is-split { display: grid; grid-template-columns: repeat(var(--panes, 2), minmax(0, 1fr)); gap: 12px; align-items: start; padding-right: 12px; }
.split-row.is-split .screen { max-width: none; padding: 20px 20px 64px; }
/* 화면 위쪽 여백: 누르면 그 화면을 고름, 고른 화면은 주황색 가로줄 (펼친 아카이브 밑줄과 같은 굵기) */
.split-row.is-split .split-grip { display: block; height: 12px; margin: 0 4px; border-bottom: 3px solid transparent; cursor: pointer; }
.split-row.is-split .split-grip:hover { border-bottom-color: var(--border); }
.split-row.is-split .is-selected > .split-grip { border-bottom-color: var(--primary); }
.split-main > .split-grip { position: sticky; top: 56px; z-index: 6; background: var(--bg); }
.split-pane > .split-grip { position: relative; z-index: 4; }
/* 주황색 줄 가운데 아래의 ‹ › : 고른 화면을 옆 화면과 자리 바꿈 */
.split-move { display: none; position: absolute; top: 100%; left: 50%; gap: 4px; transform: translate(-50%, 3px); }
.split-row.is-split .is-selected > .split-grip .split-move { display: flex; }
.split-move button { display: grid; place-items: center; width: 28px; height: 20px; padding: 0; border: 1px solid var(--primary); border-radius: 6px; background: var(--surface); color: var(--primary); cursor: pointer; }
.split-move button:hover:not(:disabled) { background: var(--active-bg); }
.split-move button:disabled { opacity: 0.35; cursor: default; }
.split-move .icon { width: 14px; height: 14px; }
.split-row.is-split .editor-head { top: 68px; } /* 원래 화면의 위쪽 여백(12px) 아래에 붙음 */
body.focus-mode .split-main > .split-grip { top: 0; }
body.focus-mode .split-row.is-split .editor-head { top: 12px; }
.split-pane { position: sticky; top: 56px; display: flex; flex-direction: column; height: calc(100vh - 56px); height: calc(100dvh - 56px); min-width: 0; padding-bottom: 12px; }
body.focus-mode .split-pane { top: 0; height: 100vh; height: 100dvh; }
.split-pane .peek { position: static; inset: auto; z-index: auto; flex: 1; min-height: 0; max-height: none; border-radius: 12px; box-shadow: none; }
.pane-subtabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 14px; border-bottom: 2px solid var(--border); } /* 분할 화면 세계관 탭의 하위 탭 (탭 규칙: 밑줄) */
.pane-subtab { margin-bottom: -2px; padding: 6px 10px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font: inherit; font-size: calc(0.85rem + var(--fs-add)); font-weight: 600; cursor: pointer; }
.pane-subtab:hover { color: var(--text); }
.pane-subtab.is-active { border-bottom-color: var(--primary); color: var(--primary); }
.peek-empty { display: grid; justify-items: center; gap: 8px; padding: 48px 20px; color: var(--muted); text-align: center; }
.peek-empty .icon { width: 32px; height: 32px; }
@media (max-width: 767px) { .split-pane { display: none; } }
.mini-item.is-dragging { opacity: 0.4; }
.mini-no { flex-shrink: 0; min-width: 3ch; color: var(--muted); font-size: calc(0.8rem + var(--fs-add)); font-variant-numeric: tabular-nums; text-align: right; }
.mini-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-folder { margin: 2px 0; border-radius: 8px; }
.mini-folder.is-drop { background: var(--active-bg); outline: 1px dashed var(--primary); }
.mini-folder-head { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; min-height: 34px; padding: 0 6px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: calc(0.875rem + var(--fs-add)); font-weight: 700; cursor: pointer; }
.mini-folder-head:hover { background: var(--hover); }
.mini-folder-head .icon { width: 16px; height: 16px; flex-shrink: 0; }
.mini-caret .icon { transition: transform 0.15s; transform: rotate(-90deg); }
.mini-folder.is-open .mini-caret .icon { transform: none; }
.mini-count { color: var(--muted); font-size: calc(0.75rem + var(--fs-add)); font-weight: 400; }
.mini-folder-items { display: none; padding-left: 14px; }
.mini-folder.is-open .mini-folder-items { display: block; }
.mini-empty { margin: 6px 8px; color: var(--muted); font-size: calc(0.8rem + var(--fs-add)); }
.mini-hint { margin: 0; padding: 8px 4px; border-top: 1px solid var(--border); color: var(--muted); font-size: calc(0.75rem + var(--fs-add)); white-space: normal; }
@media (min-width: 768px) {
  .sidebar.is-collapsed .sb-tab-btn, .sidebar.is-collapsed .sb-mini { display: none; }
  .sidebar.is-collapsed .sb-nav.is-mini .sb-main { display: block; }
}

/* 집필 큰 목록의 폴더 */
.chapter-folder > summary .icon { width: 16px; height: 16px; vertical-align: -2px; }
.chapter-loose { margin-bottom: 4px; }

/* ───────── 곁보기 판 (분할 화면의 판·콘티의 원고 보기) ───────── */
.peek { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.peek-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.peek-no { color: var(--muted); font-variant-numeric: tabular-nums; }
.peek-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peek-body { padding: 16px 20px; }
@media (max-width: 1099px) {
  .peek { position: fixed; inset: auto 0 0 0; top: auto; z-index: 40; max-height: 55vh; border-radius: 12px 12px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3); }
}

/* 곁보기 판의 탭 (여러 자료를 열어 오가며 보기) */
.peek-toprow { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 8px 0 12px; background: var(--bg); }
.peek-tabbar { position: sticky; top: 32px; z-index: 2; display: flex; align-items: flex-end; gap: 2px; padding: 6px 6px 0; border-bottom: 2px solid var(--border); background: var(--bg); }
.peek-tabs { position: relative; scroll-behavior: auto; flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.peek-arrow, .peek-more, .peek-closeall { flex-shrink: 0; display: grid; place-items: center; height: 30px; margin-bottom: 3px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: calc(0.8rem + var(--fs-add)); cursor: pointer; white-space: nowrap; }
.peek-arrow { width: 26px; padding: 0; }
.peek-arrow .icon { width: 16px; height: 16px; }
.peek-arrow:hover:not(:disabled), .peek-more:hover, .peek-closeall:hover { background: var(--hover); color: var(--text); }
.peek-arrow:disabled { opacity: 0.3; cursor: default; }
.peek-more { color: var(--primary); font-weight: 700; }
.peek-tabs::-webkit-scrollbar { display: none; }
.peek-tab { display: flex; flex-shrink: 0; align-items: center; gap: 6px; max-width: 200px; height: 34px; padding: 0 4px 0 10px; border: 0; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0; color: var(--muted); font-size: calc(0.85rem + var(--fs-add)); cursor: pointer; }
.peek-tab:hover { color: var(--text); background: var(--hover); }
.peek-tab.is-active { border-bottom-color: var(--primary); color: var(--primary); font-weight: 700; }
.peek-tab-icon .icon { width: 14px; height: 14px; }
.peek-tab-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peek-tab-close { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.peek-tab-close:hover { background: var(--hover); color: var(--danger, #d55); }
.peek-tab-close .icon { width: 14px; height: 14px; }
.peek-head { top: 72px; }
.peek-tabbar [hidden] { display: none; }
.peek-badge { padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: calc(0.75rem + var(--fs-add)); }
.peek-body .wiki { max-width: none; }
.peek-body .char-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

/* 미니 집필 목록: 터치로 길게 눌러 끌기 */
.mini-item { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.mini-item.is-lifted { background: var(--active-bg); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); transform: scale(1.03); }
.mini-ghost { position: fixed; top: 0; left: 0; z-index: 100; max-width: 220px; overflow: hidden; padding: 6px 12px; border-radius: 8px; background: var(--primary); color: #fff; font-size: calc(0.85rem + var(--fs-add)); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }

/* 폴더 고르기 창 */
.folder-picker input[type="search"] { margin-bottom: 8px; }
.pick-search { display: flex; gap: 6px; margin-bottom: 8px; }
.pick-search input[type="search"] { flex: 1; min-width: 0; margin-bottom: 0; }
.pick-search select { flex-shrink: 0; width: auto; }
.folder-pick-list { display: grid; gap: 2px; max-height: min(50vh, 360px); overflow-y: auto; }
.folder-pick { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.folder-pick:hover:not(:disabled) { background: var(--hover); }
.folder-pick:disabled { color: var(--muted); cursor: default; }
.folder-pick .icon { width: 18px; height: 18px; }

/* ───────── 5단계: AI ───────── */
.ai-toggle { margin-left: auto; }
/* AI 버튼(집필 AI·문서 AI — 한 화면에 하나만 보임)이 있으면 그 오른쪽에, 없으면 저장 상태·🔔를 오른쪽 끝으로 */
.main-top .top-actions { margin-left: auto; }
.main-top:has(.ai-toggle:not([hidden])) .top-actions { margin-left: 12px; }
.ai-toggle.is-on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ai) 40%, transparent); }
.ai-mark-inline { color: var(--ai); font-size: 0.8em; vertical-align: super; }

/* AI 패널: PC는 오른쪽 칸(본문이 비켜 줌), 태블릿은 겹쳐서, 스마트폰은 아래에서 올라오는 판 */
.ai-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 35; display: flex; flex-direction: column; width: 400px; max-width: 100vw; border-left: 1px solid var(--border); background: var(--surface); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25); }
@media (min-width: 1200px) {
  body.ai-open .main { margin-right: 400px; }
  .ai-panel { box-shadow: none; }
}
@media (max-width: 767px) {
  .ai-panel { top: auto; left: 0; width: 100%; height: 78vh; height: 78dvh; border-left: 0; border-top: 1px solid var(--border); border-radius: 14px 14px 0 0; }
}
.ai-head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--border); }
.ai-title { flex-shrink: 0; }
.ai-model { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 200px; overflow: hidden; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: calc(0.75rem + var(--fs-add)); text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.ai-model .icon { flex-shrink: 0; width: 12px; height: 12px; }
.ai-refs { max-height: 40%; overflow-y: auto; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.ai-refs > summary { font-size: calc(0.875rem + var(--fs-add)); font-weight: 700; cursor: pointer; }
.ai-refs[open] > summary { margin-bottom: 6px; }
.ref-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0; }
.ref-group-name { width: 100%; color: var(--muted); font-size: calc(0.75rem + var(--fs-add)); }
.ref-chip { padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: calc(0.8rem + var(--fs-add)); cursor: pointer; }
.ref-chip.is-on { border-color: var(--ai); background: var(--ai-active-bg); color: var(--text); font-weight: 700; }
.ref-chip.is-on::before { content: "✓ "; color: var(--ai); }
.ai-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.ai-empty { margin: auto 0; text-align: center; }
.ai-msg { max-width: 92%; padding: 8px 12px; border-radius: 12px; font-size: calc(0.9rem + var(--fs-add)); line-height: 1.6; overflow-wrap: anywhere; }
.ai-msg.is-user, .ai-msg-text { white-space: pre-wrap; }
.ai-msg.is-user { align-self: flex-end; background: var(--active-bg); }
.ai-msg.is-ai { align-self: flex-start; border: 1px solid var(--border); background: var(--bg); }
.ai-msg.is-error { border-color: var(--danger, #d55); color: var(--danger, #d55); }
.ai-typing { color: var(--muted); }
.ai-usage { margin-top: 6px; color: var(--muted); font-size: calc(0.7rem + var(--fs-add)); }
.ai-card { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--ai); border-radius: 10px; background: color-mix(in srgb, var(--ai) 8%, var(--surface)); white-space: normal; }
.ai-card.is-conflict { border-color: #d89a2b; background: color-mix(in srgb, #d89a2b 10%, var(--surface)); }
.ai-card.is-muted { border-style: dashed; color: var(--muted); }
.ai-card-title { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.ai-card-title .icon, .ai-card .icon { width: 14px; height: 14px; vertical-align: -2px; }
.ai-card p { margin: 4px 0; }
.ai-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.ai-card-done { color: var(--success); font-weight: 700; font-size: calc(0.85rem + var(--fs-add)); }
.ai-conflict { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 6px 0; font-size: calc(0.85rem + var(--fs-add)); }
.ai-conflict dt { color: var(--muted); }
.ai-conflict dd { margin: 0; }
.ai-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; }
.ai-quick-btn { padding: 4px 10px; border: 1px dashed var(--ai); border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: calc(0.8rem + var(--fs-add)); cursor: pointer; }
.ai-quick-btn:hover { background: color-mix(in srgb, var(--ai) 12%, transparent); }
.ai-input { display: flex; align-items: flex-end; gap: 6px; padding: 10px 14px 14px; border-top: 1px solid var(--border); }
.ai-input textarea { flex: 1; min-height: 44px; max-height: 160px; resize: vertical; }

/* 수정안 비교 */
.compare-reason { margin: 0 0 10px; color: var(--muted); }
.compare-list { display: grid; gap: 12px; max-height: 60vh; overflow-y: auto; }
.compare-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.compare-item.is-blocked { opacity: 0.6; }
.compare-check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.compare-check .icon { width: 14px; height: 14px; vertical-align: -2px; }
.compare-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compare-tag { display: block; margin-bottom: 4px; color: var(--muted); font-size: calc(0.75rem + var(--fs-add)); }
.compare-text { min-height: 2em; padding: 8px; border-radius: 8px; background: var(--bg); font-size: calc(0.9rem + var(--fs-add)); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.compare-text del { background: color-mix(in srgb, #e05555 22%, transparent); color: #e07070; text-decoration: line-through; }
.compare-text ins { background: color-mix(in srgb, #3ca86b 25%, transparent); color: inherit; text-decoration: none; }
@media (max-width: 767px) { .compare-cols { grid-template-columns: 1fr; } }

/* AI 설정 */
.key-row { display: flex; gap: 6px; }
/* 설정: 카드 제목 아래 항목을 한 칸 들여 씀 */
.settings-page .card > :not(h2) { margin-left: 1em; }
/* 설정의 버튼: 배경과 구별되게 색을 넣음 (저장 같은 주 버튼은 원래 진한 색) */
.settings-page .btn:not(.btn-primary):not(.btn-ai):not(.btn-danger) { border-color: color-mix(in srgb, var(--primary) 35%, transparent); background: var(--active-bg); color: var(--primary); }
.settings-page .btn:not(.btn-primary):not(.btn-ai):not(.btn-danger):hover { background: color-mix(in srgb, var(--primary) 20%, transparent); }
.key-input { position: relative; }
.key-input input { width: 100%; padding-right: 80px !important; } /* 눈·✕ 두 버튼 자리 */
.key-eye { position: absolute; top: 50%; right: 40px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; transform: translateY(-50%); }
.key-eye:hover { color: var(--text); background: var(--hover); }
.key-eye .icon { width: 18px; height: 18px; }
.key-eye.key-clear { right: 4px; }
.key-eye.key-clear:hover { color: var(--error); }
.key-row input, .key-row select { flex: 1; min-width: 0; }
[data-id="result"].is-ok { color: var(--success); }
[data-id="result"].is-error { color: var(--danger, #d55); }
.notice { margin-top: 12px; padding: 8px 12px; border-radius: 8px; background: var(--active-bg); }

/* ───────── 집필 AI ───────── */
.wr-scroll { flex: 1; overflow-y: auto; padding: 12px 14px 20px; }
.wr-settings { margin: 12px 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--ai) 55%, var(--border)); border-radius: 10px; background: var(--bg); }
.wr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; font-size: calc(0.85rem + var(--fs-add)); }
.wr-label { flex-shrink: 0; width: 4.8em; color: var(--muted); font-size: calc(0.8rem + var(--fs-add)); font-weight: 700; }
.wr-row select { width: auto !important; min-height: 30px !important; height: 30px; padding: 0 6px !important; font-size: calc(0.8rem + var(--fs-add)); }
.wr-target { flex: 1; min-width: 0; }
.wr-refs { padding-left: 0; }
.wr-ref-names { flex: 1; min-width: 0; color: var(--text); font-size: calc(0.8rem + var(--fs-add)); }
.wr-check { gap: 8px; color: var(--muted); font-size: calc(0.8rem + var(--fs-add)); }
.wr-est { margin: 6px 0 0; color: var(--muted); font-size: calc(0.75rem + var(--fs-add)); }
.wr-link { padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-size: calc(0.8rem + var(--fs-add)); text-decoration: underline; cursor: pointer; }
.wr-tasks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wr-task { min-height: 38px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: calc(0.85rem + var(--fs-add)); font-weight: 700; cursor: pointer; }
.wr-task:hover:not(:disabled) { border-color: var(--ai); }
.wr-task:disabled { opacity: 0.5; cursor: default; }
.wr-task-gap { visibility: hidden; }
.wr-task.is-on { border-color: var(--ai); background: var(--ai-active-bg); color: var(--ai); }
.wr-nokey { margin-bottom: 16px; }
.wr-nokey .btn { margin-top: 4px; }
.wr-request { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.wr-request textarea { min-height: 76px; resize: vertical; font-size: calc(0.9rem + var(--fs-add)); }
.wr-request .btn { align-self: flex-end; }
.wr-names { margin-top: -2px; }
.wr-temp-note { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: var(--active-bg); font-size: calc(0.8rem + var(--fs-add)); line-height: 1.5; }
.wr-card-req { margin: 0 0 6px; }
.wr-card + .wr-card { margin-top: 8px; }

/* 보관함 */
.keep-list { display: grid; gap: 12px; }
.keep-memo { position: relative; padding: 12px 14px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.keep-source { padding: 0 8px; border-radius: 999px; background: var(--active-bg); color: var(--muted); font-size: calc(0.75rem + var(--fs-add)); font-weight: 700; }
.keep-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-right: 32px; margin-bottom: 8px; }
.keep-del { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.keep-del:hover { background: var(--hover); color: var(--text); }
.keep-del .icon { width: 16px; height: 16px; }
.keep-text { font-family: var(--font-serif); line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.keep-orig { margin-top: 8px; color: var(--muted); }
.keep-orig > summary { cursor: pointer; font-size: calc(0.8rem + var(--fs-add)); }
.keep-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.keep-foot .icon, .ai-card-foot .icon { width: 14px; height: 14px; }
.keep-undo { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 12px; border-radius: 10px; background: var(--active-bg); }
.sb-gap { height: 10px; }
.wr-custom { display: flex; gap: 6px; margin: 8px 0 4px; }
.wr-custom input { flex: 1; min-width: 0; }
.wr-h { margin: 16px 0 6px; font-size: calc(0.9rem + var(--fs-add)); }
.wr-card { padding: 10px 12px; border: 1px solid var(--ai); border-radius: 10px; background: color-mix(in srgb, var(--ai) 6%, var(--surface)); }
.wr-card + .wr-card { margin-top: 8px; }
.wr-card.is-kept { border-style: dashed; }
.wr-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; margin-bottom: 6px; }
.wr-diff { display: grid; gap: 4px; }
.wr-diff .compare-text { max-height: 220px; overflow-y: auto; }
.wr-ideas { max-height: 320px; overflow-y: auto; padding: 8px; border-radius: 8px; background: var(--bg); font-size: calc(0.9rem + var(--fs-add)); line-height: 1.6; white-space: pre-wrap; }
.wr-kept { margin-top: 4px; }
.pick-row { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 8px; border-radius: 8px; cursor: pointer; }
.pick-row:hover { background: var(--hover); }

/* ───────── 10-15 수정 ───────── */
/* 엣지가 비밀번호 칸에 따로 넣는 눈 표시 숨김 (우리 눈 버튼과 겹치지 않게) */
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }

/* 집필 AI */
.wr-req-label { display: block; margin: 0 0 4px; font-size: calc(0.85rem + var(--fs-add)); font-weight: 700; }
.wr-need-mark, .wr-need { color: var(--ai); font-weight: 700; }
.wr-need { font-size: calc(0.85rem + var(--fs-add)); }
.wr-run { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.wr-request textarea.is-missing, .wr-row select.is-missing { border-color: var(--ai) !important; outline: 2px solid var(--ai); outline-offset: 0; }
.wr-warn { margin: 2px 0 6px; padding: 6px 8px; border-radius: 6px; background: color-mix(in srgb, var(--ai) 14%, transparent); color: var(--text); font-size: calc(0.8rem + var(--fs-add)); line-height: 1.5; }
.wr-langs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 8px; margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.wr-langs legend { padding: 0 4px; }
.wr-lang { display: flex; align-items: center; gap: 6px; min-height: 30px; font-size: calc(0.85rem + var(--fs-add)); cursor: pointer; }
.wr-lang input { accent-color: var(--ai); }
/* 고르기 창의 목록: 어두운 칸 하나, 6개쯤 보이고 나머지는 스크롤 (스크롤 막대 늘 보임) */
.pick-box { max-height: calc(6 * 38px + 12px); overflow-y: scroll; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); scrollbar-width: auto; scrollbar-color: var(--muted) transparent; }
.pick-box .pick-row { min-height: 38px; }

/* 메뉴바: 지금 세계관·작품 상자, AI 묶음 이름 */
.sb-current { margin: 4px 0; padding: 2px; border: 1.5px solid var(--primary); border-radius: 12px; }
.sb-current-line { height: 1px; margin: 2px 8px; background: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.sb-group-label { padding: 6px 12px 2px; color: var(--muted); font-size: calc(0.75rem + var(--fs-add)); font-weight: 700; letter-spacing: 0.04em; }
@media (min-width: 768px) {
  .sidebar.is-collapsed .sb-group-label { display: none; }
  .sidebar.is-collapsed .sb-current { padding: 0; border-width: 1px; }
}

/* 보관함 */
.keep-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.keep-check { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); align-self: center; }

/* 문서 편집: AI 참고 / AI 숨김 (항목마다) */
/* AI 참고 / AI 숨김: 크레딧을 쓰는 버튼이 아니므로 보라색이 아니라 테마 색 (타임라인 "전체" 칩과 같은 모양) */
.ai-ref-btn { flex-shrink: 0; min-height: 30px; padding: 0 10px; border: 1px solid var(--primary); border-radius: 999px; background: var(--active-bg); color: var(--primary); font: inherit; font-size: calc(0.75rem + var(--fs-add)); font-weight: 700; white-space: nowrap; cursor: pointer; }
.ai-ref-btn.is-hidden { border: 1px dashed var(--border); background: var(--surface); color: var(--muted); font-weight: 600; text-decoration: line-through; }
.ai-ref-btn:hover { border-color: var(--primary); }

/* 6단계: 충돌 검사 결과 */
.da-after { max-height: 180px; overflow-y: auto; margin: 2px 0 4px; font-size: calc(0.85rem + var(--fs-add)); line-height: 1.6; white-space: pre-wrap; }
.da-changes { margin-top: 8px; }
.da-desc { margin: 6px 2px 0; color: var(--muted); font-size: calc(0.8rem + var(--fs-add)); line-height: 1.5; }
.wr-check-ok { margin: 4px 0; color: var(--success); font-weight: 700; }
.wr-issues { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wr-issue { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.wr-issue.is-ignored { opacity: 0.55; }
.wr-issue p { margin: 4px 0; }
.wr-issue-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.wr-level { padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, #d89a2b 25%, transparent); color: #d89a2b; font-size: calc(0.75rem + var(--fs-add)); font-weight: 700; }
.wr-level.is-hard { background: color-mix(in srgb, #e05555 22%, transparent); color: #e07070; }
.wr-quote { display: block; width: 100%; padding: 6px 8px; border: 0; border-left: 3px solid var(--ai); border-radius: 4px; background: color-mix(in srgb, var(--ai) 8%, transparent); color: var(--text); font: inherit; font-family: var(--font-serif); font-size: calc(0.9rem + var(--fs-add)); text-align: left; cursor: pointer; }
.wr-quote:hover:not(:disabled) { background: color-mix(in srgb, var(--ai) 16%, transparent); }
.wr-quote:disabled { cursor: default; }
.batch-bar { height: 8px; margin: 12px 0; overflow: hidden; border-radius: 999px; background: var(--border); }
.batch-bar span { display: block; height: 100%; background: var(--ai); transition: width 0.3s; }
.batch-before { margin-bottom: 6px; font-size: calc(0.85rem + var(--fs-add)); }
.batch-dialog input[type="search"] { margin: 8px 0; }
.batch-dialog .compare-item textarea { width: 100%; }

/* 6단계: AI 인터뷰 */
.iv-setup { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--ai) 55%, var(--border)); border-radius: 12px; background: var(--surface); }
.iv-field { display: flex; flex-direction: column; gap: 4px; font-size: calc(0.8rem + var(--fs-add)); font-weight: 700; color: var(--muted); }
.iv-field select { width: auto; min-width: 9em; }
.iv-chat { display: flex; flex-direction: column; gap: 10px; max-height: 55vh; overflow-y: auto; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.iv-who { display: block; margin-bottom: 2px; color: var(--muted); font-size: calc(0.7rem + var(--fs-add)); font-weight: 700; }
.ai-msg.is-skip { opacity: 0.6; font-style: italic; }
.iv-input { margin-top: 10px; }
.iv-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; color: var(--muted); font-size: calc(0.8rem + var(--fs-add)); }
.iv-progress .batch-bar { flex: 1; margin: 0; }
.batch-bar.is-plain span { background: var(--primary); } /* AI가 아닌 진행 막대는 테마 색 */
.iv-input textarea { width: 100%; }
.iv-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.iv-done { margin: 8px 0; color: var(--ai); }
.iv-result { margin-top: 18px; border-color: var(--ai); }
.iv-result-head { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.iv-result-head h2 { margin: 0; }
.iv-mbti { flex-shrink: 0; padding: 10px 14px; border-radius: 12px; background: var(--ai); color: var(--ai-text); font-size: calc(1.6rem + var(--fs-add)); font-weight: 800; letter-spacing: 0.06em; }
.iv-traits { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.iv-result h3 { margin: 14px 0 4px; font-size: calc(0.95rem + var(--fs-add)); }
.iv-list { margin: 0; padding-left: 18px; }
.iv-list li { margin: 4px 0; }

/* ───────── AI 설정파트너 ───────── */
.pt-setup { display: grid; grid-template-columns: 170px 1fr; margin-bottom: 20px; border: 1.5px solid var(--ai); border-radius: 12px; background: var(--surface); overflow: hidden; }
.pt-modes { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-right: 1px solid color-mix(in srgb, var(--ai) 45%, var(--border)); background: var(--bg); }
.pt-mode { min-height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.pt-mode:hover { background: var(--hover); }
.pt-mode.is-on { border-color: var(--ai); background: var(--ai-active-bg); color: var(--ai); }
.pt-mode-sep { flex-shrink: 0; height: 2px; margin: 4px 6px; border-radius: 1px; background: color-mix(in srgb, var(--ai) 55%, var(--border)); } /* 대화 종류 묶음 사이 보라색 가로선 */
.pt-config { padding: 14px 18px; }
.pt-config h2 { margin: 0 0 6px; font-size: calc(1.05rem + var(--fs-add)); }
.pt-desc { margin: 0 0 12px; color: var(--muted); font-size: calc(0.9rem + var(--fs-add)); line-height: 1.6; }
.pt-field { display: block; margin: 10px 0; }
.pt-label { display: block; margin-bottom: 4px; font-size: calc(0.85rem + var(--fs-add)); font-weight: 700; }
.pt-field select { width: auto; min-width: 10em; }
.pt-chars { margin-top: 6px; }
.pt-scope-desc { margin: 6px 0 0; color: var(--muted); font-size: calc(0.85rem + var(--fs-add)); line-height: 1.5; }
.pt-scope-picks { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.pt-scope-picks:empty { display: none; }
.pt-start { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.pt-list-title { margin: 0 0 8px; font-size: calc(1rem + var(--fs-add)); }
.pt-list { display: grid; gap: 6px; }
.pt-item { display: flex; align-items: center; gap: 4px; padding-right: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.pt-item:hover { border-color: var(--ai); }
.pt-item-main { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; min-height: 48px; padding: 6px 12px; color: var(--text); text-decoration: none; }
.pt-item-title { flex: 1; min-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-badge { flex-shrink: 0; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ai) 18%, transparent); color: var(--ai); font-size: calc(0.75rem + var(--fs-add)); font-weight: 700; }
.pt-chat { display: flex; flex-direction: column; height: calc(100vh - 150px); height: calc(100dvh - 150px); min-height: 420px; }
.screen:has(.pt-chat) { max-width: 1100px; }
.pt-chat-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.pt-chat-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 16px 4px; }
.pt-messages .ai-msg { max-width: 85%; }
.pt-inputbar { display: flex; align-items: flex-end; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.pt-inputbar textarea { flex: 1; min-height: 52px; max-height: 200px; resize: vertical; }
.pt-est { margin-top: 4px; }
.pt-apply { display: grid; gap: 8px; margin-top: 10px; }
.pt-apply-item { padding: 8px 10px; border: 1px solid var(--ai); border-radius: 10px; background: color-mix(in srgb, var(--ai) 6%, var(--surface)); white-space: normal; }
.pt-apply-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.pt-locked { color: #d89a2b; font-size: calc(0.8rem + var(--fs-add)); }
.pt-locked .icon { width: 14px; height: 14px; vertical-align: -2px; }
.pt-next { display: flex; justify-content: flex-end; margin-top: 8px; }
@media (max-width: 767px) {
  .pt-setup { grid-template-columns: 1fr; }
  .pt-modes { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); }
  .pt-mode-sep { flex-basis: 100%; margin: 2px 6px; }
  .pt-messages .ai-msg { max-width: 95%; }
}

/* ───────── 7단계: 아카이브 ───────── */
/* 아카이브 공통: 세계관 공유 색 · 상자 · 탭 · 보기 버튼 */
:root { --shared: var(--primary); } /* 세계관 공유 색 = 테마 대표색(주황) */
.ar-shared { display: inline-flex; align-items: center; color: var(--shared); vertical-align: -2px; }
.ar-shared .icon { width: 15px; height: 15px; }
.ar-box { margin-bottom: 16px; }
.ar-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px; margin-bottom: 10px; border-bottom: 2px solid var(--border); }
.ar-tab { display: flex; align-items: center; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.ar-tab > button[data-ar-tab], .ar-tab > button[data-keep-tab] { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border: 0; background: none; color: var(--muted); font: inherit; font-size: calc(0.9rem + var(--fs-add)); font-weight: 600; cursor: pointer; }
.ar-tab.is-active { border-bottom-color: var(--primary); }
.ar-tab.is-active > button[data-ar-tab], .ar-tab.is-active > button[data-keep-tab] { color: var(--primary); }
.ar-tab-menu, .ar-tab-add { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 4px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.ar-tab-add { margin: 0 0 4px 4px; border: 1px dashed var(--border); }
.ar-tab-menu:hover, .ar-tab-add:hover { background: var(--hover); color: var(--primary); }
.ar-tab-menu .icon, .ar-tab-add .icon { width: 16px; height: 16px; }
.ar-views { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.page-sub .ar-shared .icon { width: 16px; height: 16px; }
/* 보기 고르기 (▾ 버튼) */
.ar-drop-group { display: inline-flex; gap: 8px; }
.ar-drop-wrap { display: inline-flex; flex-direction: column; gap: 1px; }
.ar-drop-title { padding-left: 4px; color: var(--muted); font-size: calc(0.7rem + var(--fs-add)); font-weight: 700; }
.tl-tools { align-items: flex-end !important; }
.ar-drop { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: calc(0.85rem + var(--fs-add)); font-weight: 600; cursor: pointer; }
.ar-drop:hover, .ar-drop[aria-expanded="true"] { border-color: var(--primary); color: var(--primary); }
.ar-drop .icon { width: 14px; height: 14px; }
/* 세계관 공유 켜기/끄기 (아이콘 버튼 — 제목 칸 오른쪽) */
.tl-title-row { display: flex; gap: 6px; align-items: center; }
.tl-title-row input { flex: 1; min-width: 0; }
.ar-share-btn { display: inline-grid; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--muted); cursor: pointer; }
.ar-share-btn .icon { width: 20px; height: 20px; }
.ar-share-btn:hover { border-color: var(--primary); }
.ar-share-btn[aria-pressed="true"] { border-color: var(--primary); background: var(--active-bg); color: var(--primary); }

/* 타임라인 */
.tl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px; }
.tl-tools-left { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; } /* 거르기 버튼을 보기·분류 버튼 아래 선에 맞춤 */
.tl-body.is-editable { padding-bottom: 45vh; } /* 맨 아래 빈칸 밑으로도 더 내려 볼 수 있게 */
.tl-tools input[type="search"] { flex: 1; min-width: 12em; }
.tl { position: relative; margin: 0; padding: 0; list-style: none; }
.tl::before { content: ""; position: absolute; top: 0; bottom: 18px; left: 132px; width: 2px; background: var(--border); }
.tl-row { position: relative; display: grid; grid-template-columns: 120px 24px minmax(0, 1fr); margin-bottom: 14px; }
.tl-when { display: flex; flex-direction: column; align-items: flex-end; padding-top: 10px; padding-right: 8px; color: var(--primary); font-size: calc(0.85rem + var(--fs-add)); font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.tl-row-move { display: flex; opacity: 0.55; }
.tl-row:hover .tl-row-move, .tl-row-move:focus-within { opacity: 1; }
.tl-row-move .btn-icon { width: 26px; height: 26px; min-height: 26px; }
.tl-row-move .icon { width: 14px; height: 14px; }
.tl-dot { z-index: 1; width: 14px; height: 14px; margin: 14px 0 0 6px; border: 3px solid var(--primary); border-radius: 50%; background: var(--bg); }
.tl-dot-add { display: grid; place-items: center; width: 24px; height: 24px; margin: 6px 0 0 1px; padding: 0; border-width: 2px; color: var(--primary); cursor: pointer; }
.tl-dot-add .icon { width: 14px; height: 14px; }
.tl-dot-when { padding: 0; cursor: pointer; } /* 시간대 동그라미: 누르면 이름 변경·삭제 */
.tl-dot-when:hover, .tl-dot-when:focus-visible { background: var(--active-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.tl-when-form { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.tl-when-form input { width: 7em; min-width: 0; padding: 2px 6px; border: 1px solid var(--primary); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; font-size: calc(0.85rem + var(--fs-add)); }
.tl-when-ok { flex: none; padding: 2px 8px; border: 0; border-radius: 6px; background: var(--primary); color: var(--primary-text); font: inherit; font-size: calc(0.85rem + var(--fs-add)); font-weight: 700; cursor: pointer; }
.tl-dot-add:hover { background: var(--active-bg); }
.tl-add-end { margin-top: 2px; }
.tl-row-body { min-width: 0; }
.tl-evs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.tl-ev { flex: 1 1 240px; min-width: 0; max-width: 520px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
/* 사건 옮기기: 작게, 마우스를 올리면 진하게 (터치 화면은 늘 보임) */
.tl-ev-move { display: inline-flex; opacity: 0.35; transition: opacity 0.15s; }
.tl-ev:hover .tl-ev-move, .tl-ev-move:focus-within { opacity: 1; }
@media (hover: none) { .tl-ev-move { opacity: 0.8; } }
.tl-ev-move button { display: inline-grid; place-items: center; width: 22px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.tl-ev-move button:hover:not(:disabled) { background: var(--hover); color: var(--primary); }
.tl-ev-move button:disabled { opacity: 0.3; cursor: default; }
.tl-ev-move .icon { width: 14px; height: 14px; }
.tl-when-mini { margin: 2px 0 0; color: var(--primary); font-size: calc(0.78rem + var(--fs-add)); font-weight: 700; }
.tl-ev-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tl-ev-head .btn-icon { width: 28px; height: 28px; min-height: 28px; }
.tl-ev-head .btn-icon .icon { width: 15px; height: 15px; }
.tl-cat { padding: 0 8px; border-radius: 999px; background: var(--active-bg); color: var(--primary); font-size: calc(0.75rem + var(--fs-add)); font-weight: 700; }
.tl-desc { margin: 6px 0 0; white-space: pre-wrap; font-size: calc(0.92rem + var(--fs-add)); }
.tl-links { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.ref-chip.is-chapter { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.ref-chip.is-char { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); }
a.ref-chip { text-decoration: none; }
.tl-row-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; }
/* 빈 시간대: "아래에 추가"·"같은 시간대에 추가"를 시간대 동그라미와 같은 줄에 */
.tl-row.is-empty .tl-evs { display: none; }
.tl-row.is-empty .tl-row-foot { padding-top: 6px; }
.tl-insert { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: calc(0.75rem + var(--fs-add)); cursor: pointer; }
.tl-insert:hover { color: var(--primary); }
.tl-insert .icon { width: 12px; height: 12px; }
/* 그 자리 입력칸 */
.tl-dialog { width: min(640px, calc(100vw - 32px)); }
.tl-dialog .tl-form { max-width: none; padding: 0; border: 0; box-shadow: none; }
.tl-dialog .dialog-head { margin-bottom: 8px; }
.tl-form { position: relative; flex: 1 1 100%; max-width: 640px; padding: 12px 14px; border: 1px solid var(--primary); border-radius: 12px; background: var(--surface); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); }
.tl-form-x { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; min-height: 30px; }
.tl-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding-right: 30px; }
.tl-f { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-f > span, .tl-f > label { color: var(--muted); font-size: calc(0.78rem + var(--fs-add)); font-weight: 600; }
.tl-f input, .tl-f textarea { width: 100%; }
.tl-f-wide { grid-column: 1; }
.tl-f-full { grid-column: 1 / -1; }
.tl-f-share { justify-content: flex-end; }
.tl-f-share .toggle-btn { align-self: flex-start; min-height: 36px; }
.tl-form-actions { display: flex; align-items: center; justify-content: flex-end; margin-top: 10px; }
/* 요약 보기 */
.tl.is-brief .tl-row { margin-bottom: 6px; }
.tl.is-brief .tl-when { padding-top: 4px; }
.tl.is-brief .tl-dot { margin-top: 8px; }
.tl-brief { display: flex; flex-wrap: wrap; gap: 4px 6px; padding-top: 2px; }
.tl-mini { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: calc(0.85rem + var(--fs-add)); font-weight: 600; text-align: left; cursor: pointer; }
.tl-mini:hover { border-color: var(--primary); }
/* 분류별·캐릭터별 */
.tl-grid-wrap { overflow: auto; max-height: 75vh; border: 1px solid var(--border); border-radius: 12px; }
.tl-grid { min-width: 100%; border-collapse: separate; border-spacing: 0; }
.tl-grid th, .tl-grid td { min-width: 150px; padding: 6px 8px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); vertical-align: top; text-align: left; }
.tl-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); font-size: calc(0.85rem + var(--fs-add)); }
.tl-grid .tl-grid-when { position: sticky; left: 0; z-index: 1; min-width: 100px; max-width: 160px; background: var(--surface); color: var(--primary); font-size: calc(0.82rem + var(--fs-add)); }
.tl-grid thead .tl-grid-when { z-index: 3; color: var(--muted); }
.tl-grid td .tl-mini { display: flex; width: 100%; margin-bottom: 4px; }
.tl-grid:not(.is-brief) td { min-width: 230px; }
.tl-grid td .tl-ev { max-width: none; margin-bottom: 6px; }
@media (max-width: 767px) {
  .tl::before { left: 8px; }
  .tl-row { grid-template-columns: 24px minmax(0, 1fr); }
  .tl-when { grid-column: 2; flex-direction: row; align-items: center; gap: 6px; padding: 0 0 2px; text-align: left; }
  .tl-dot { grid-row: 1 / span 2; grid-column: 1; margin: 2px 0 0 1px; }
  .tl-dot-add { margin: 0; }
  .tl-row-body { grid-column: 2; }
  .tl-row-move { opacity: 1; }
  .tl-form-grid { grid-template-columns: 1fr; padding-right: 26px; }
  .tl-f-wide { grid-column: auto; }
}

/* 플롯 */
.plot-board { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; padding-bottom: 12px; }
.plot-act { flex: 1 0 240px; max-width: 420px; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.plot-act.is-dragging { opacity: 0.4; }
.plot-act.is-drop-before { outline: 2px dashed var(--primary); outline-offset: 2px; }
.plot-act-head { display: flex; align-items: center; gap: 4px; }
.plot-act-head[draggable="true"] { cursor: grab; }
.plot-act-title { flex: 1; min-width: 0; min-height: 36px !important; padding: 4px 8px !important; font-weight: 700; }
.plot-act-head .btn-icon { width: 30px; height: 30px; min-height: 30px; }
.plot-board.is-by .plot-act { max-width: none; } /* 유형·상태·회차별: 열이 화면 폭을 나눠 씀 */
.plot-board.is-by .plot-act-head { justify-content: space-between; padding: 4px 4px 0; }
.plot-scenes { display: flex; flex-direction: column; gap: 6px; min-height: 40px; padding: 2px; border-radius: 8px; }
.plot-scenes.is-drop { background: var(--active-bg); outline: 1px dashed var(--primary); }
.plot-card { padding: 8px 10px; border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: 8px; background: var(--bg); cursor: pointer; }
.plot-card.is-doing { border-left-color: var(--primary); }
.plot-card.is-hold { border-left-style: dashed; opacity: 0.85; }
.plot-card.is-done { border-left-color: var(--success); }
.plot-card.is-done strong { color: var(--muted); }
.plot-board.is-readonly .plot-card { cursor: default; }
.plot-card.is-dragging { opacity: 0.4; }
.plot-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.plot-status { flex: none; padding: 0 7px; border-radius: 999px; background: var(--border); color: var(--muted); font-size: calc(0.72rem + var(--fs-add)); font-weight: 700; }
.plot-card.is-doing .plot-status { background: var(--active-bg); color: var(--primary); }
.plot-card-head strong .ar-shared { margin-left: 4px; }
.plot-card.is-done .plot-status { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.plot-card p { display: -webkit-box; margin: 4px 0 0; overflow: hidden; color: var(--muted); font-size: calc(0.85rem + var(--fs-add)); white-space: pre-wrap; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.plot-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.plot-tags:empty { display: none; }
.ref-chip.is-type { border-color: #d89a2b; color: #b37a12; }
.plot-empty { margin: 6px; }
.plot-add { align-self: flex-start; }
.plot-status-pick { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.plot-status-pick:has(input:checked) { border-color: var(--primary); background: var(--active-bg); color: var(--primary); font-weight: 700; }
.plot-status-pick input { margin: 0; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-danger-text { color: var(--danger, #d55); }

/* 관계도 */
.rel-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px; }
.rel-top .ar-tabs { flex: 1; min-width: 0; margin-bottom: 0; }
.rel-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-bottom: 6px; }
.rel-tools .toggle-btn { min-height: 36px; padding: 4px 10px; }
.rel-view-select select { min-height: 36px; padding: 4px 8px; }
.rel-main { position: relative; display: flex; height: calc(100vh - 250px); min-height: 380px; margin-top: 8px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; }
.rel-box.is-readonly .rel-main { height: 60vh; }
.rel-wrap { position: relative; flex: 1; min-width: 0; overflow: hidden; background: var(--bg); background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 24px 24px; cursor: grab; touch-action: none; }
.rel-wrap:active { cursor: grabbing; }
.rel-wrap.is-group-mode { cursor: crosshair; }
.rel-svg { display: block; width: 100%; height: 100%; user-select: none; }
.rel-node { cursor: pointer; }
.rel-node circle { stroke: var(--bg); stroke-width: 3; }
.rel-node.is-from circle { stroke: var(--ai); stroke-width: 5; }
.rel-initial { fill: #fff; font-size: 18px; font-weight: 700; pointer-events: none; }
.rel-default { color: #fff; pointer-events: none; }
.rel-name { fill: var(--text); font-size: 15px; font-weight: 700; pointer-events: none; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.rel-edge > path { fill: none; stroke-width: 2.2; pointer-events: none; } /* 색·점선·끝 모양은 선마다 (js/archive/rel-edge.js) */
.rel-label { cursor: pointer; }
.rel-label rect { fill: var(--surface); stroke: var(--border); }
.rel-label text { fill: var(--text); font-size: 13px; }
.rel-label.is-empty text { fill: var(--muted); font-size: 11px; }
.rel-group-box { fill: color-mix(in srgb, var(--primary) 5%, transparent); stroke: color-mix(in srgb, var(--primary) 55%, transparent); stroke-width: 2; stroke-dasharray: 8 5; pointer-events: none; }
.rel-glabel { cursor: move; }
.rel-glabel rect { fill: var(--primary); }
.rel-glabel text { fill: var(--primary-text); font-size: 14px; font-weight: 700; }
.rel-resize { fill: var(--surface); stroke: var(--primary); stroke-width: 1.5; cursor: nwse-resize; }
.rel-draft { fill: color-mix(in srgb, var(--primary) 10%, transparent); stroke: var(--primary); stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }
.rel-banner { margin-bottom: 10px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); } /* 보라색은 AI 전용 → 테마 색 */
.rel-wrap .rel-banner { position: absolute; top: 10px; left: 50%; z-index: 2; width: max-content; max-width: calc(100% - 20px); margin: 0; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); transform: translateX(-50%); cursor: default; }
.rel-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; pointer-events: none; }
.rel-zoom { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 2px; padding: 2px 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: default; }
.rel-zoom .btn-icon { width: 30px; height: 30px; min-height: 30px; }
.rel-zoom [data-id="zoom"] { min-width: 3.2em; text-align: center; }
.rel-side { display: flex; flex: 0 0 260px; flex-direction: column; gap: 8px; padding: 10px; overflow: hidden; border-left: 1px solid var(--border); background: var(--surface); }
.rel-side-tabs { display: flex; border-bottom: 2px solid var(--border); }
.rel-side-tabs button { flex: 1; padding: 6px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; background: none; color: var(--muted); font: inherit; font-size: calc(0.88rem + var(--fs-add)); font-weight: 600; cursor: pointer; }
.rel-side-tabs button.is-active { border-bottom-color: var(--primary); color: var(--primary); }
/* 직접 추가: 왼쪽 큰 동그라미(이름 칸·버튼 줄에 걸쳐 가운데), 오른쪽 위 "* 이름" · 이름 칸 · 오른쪽 끝 추가 */
.rel-custom-form { display: grid; grid-template-columns: 68px 1fr; grid-template-rows: auto auto; gap: 6px 10px; align-items: center; }
.rel-custom-form input[type="text"] { grid-column: 2; grid-row: 1; min-width: 0; }
.rel-custom-form .btn { grid-column: 2; grid-row: 2; justify-self: end; }
.rel-avatar-pick { position: relative; grid-column: 1; grid-row: 1 / span 2; align-self: center; justify-self: center; width: 64px; height: 64px; cursor: pointer; }
.rel-avatar-pick .rel-avatar { width: 64px; height: 64px; background: var(--muted); }
.rel-avatar-pick .rel-avatar .icon { width: 32px; height: 32px; }
.rel-avatar-pick:hover .rel-avatar { outline: 2px solid var(--primary); outline-offset: 2px; }
.rel-avatar-plus { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--surface); border-radius: 50%; background: var(--primary); color: var(--primary-text); }
.rel-avatar-plus .icon { width: 14px; height: 14px; }
.rel-side-view { flex: none; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; font-size: calc(0.85rem + var(--fs-add)); line-height: 1.6; cursor: pointer; }
.rel-side-view:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.rel-side-view:disabled { opacity: 0.35; cursor: default; }
.rel-side-list { flex: 1; overflow-y: auto; }
.rel-side-list ul { margin: 0; padding: 0; list-style: none; }
.rel-side-item { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; cursor: pointer; }
.rel-side-item:hover { background: var(--hover); }
.rel-side-item.is-placed .rel-side-name { color: var(--muted); }
.rel-side-name { flex: 1; min-width: 0; overflow: hidden; font-size: calc(0.9rem + var(--fs-add)); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.rel-side-check { display: inline-grid; flex: none; width: 16px; color: var(--success); }
.rel-side-check .icon { width: 16px; height: 16px; }
.rel-side-item .btn-icon { width: 28px; height: 28px; min-height: 28px; }
.rel-avatar { display: inline-grid; flex: none; place-items: center; width: 34px; height: 34px; overflow: hidden; border-radius: 50%; color: #fff; font-size: calc(0.8rem + var(--fs-add)); font-weight: 700; }
.rel-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rel-avatar .icon { width: 18px; height: 18px; }
@media (max-width: 767px) {
  .rel-main { height: 65vh; }
  .rel-side { position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; width: min(280px, 85%); box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15); }
}

/* 지도 */
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.map-card { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; }
.map-card:hover { border-color: var(--primary); }
.map-thumb { display: grid; place-items: center; height: 140px; overflow: hidden; background: var(--bg); color: var(--muted); }
.map-thumb img, .map-thumb svg { width: 100%; height: 100%; object-fit: cover; }
.map-card-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; }
.map-view { --map-top: 220px; position: relative; height: calc(100vh - var(--map-top)); min-height: 320px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 24px 24px; touch-action: none; cursor: grab; }
.map-view:active { cursor: grabbing; }
.map-stage { position: absolute; top: 0; left: 0; display: block; overflow: hidden; border-radius: 6px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); transform-origin: 0 0; user-select: none; }
.map-stage img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.map-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.screen:has(.md-toolbar) .map-view { --map-top: 330px; }
.peek-body .map-view { height: 55vh; }
/* 크게 보기: 화면 가득 */
.screen.map-fullscreen { position: fixed; inset: 0; z-index: 70; max-width: none; padding: 10px 12px; overflow: auto; background: var(--bg); }
.screen.map-fullscreen .page-head { margin-bottom: 6px; }
.screen.map-fullscreen .map-view { --map-top: 90px; }
.screen.map-fullscreen:has(.md-toolbar) .map-view { --map-top: 200px; }
@media (max-width: 767px) { .screen.map-fullscreen .map-view { --map-top: 150px; } }
.map-stage.is-pin-mode { cursor: crosshair; }
.map-stage.is-draw-mode { cursor: crosshair; touch-action: none; }
.map-stage.is-draw-mode.md-tool-select { cursor: default; }
.map-stage.is-draw-mode:not(.md-tool-select) .map-pin { pointer-events: none; opacity: 0.45; } /* 핀은 이동 도구에서만 끌어 옮김 */
.map-stage.md-tool-select .map-pin { cursor: move; }
.map-stage:not(.is-draw-mode) .md-shape, .map-stage.is-draw-mode:not(.md-tool-select):not(.md-tool-erase) .md-shape { pointer-events: none; } /* 그린 것은 그리기의 이동 도구에서만 끌어 옮김 */
.map-stage.md-tool-select .md-shape { cursor: move; touch-action: none; }
.map-stage.md-tool-erase { cursor: cell; }
.md-erase-trail { fill: none; stroke: rgba(255, 90, 90, 0.45); stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.md-num { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: calc(0.85rem + var(--fs-add)); }
.md-num input { width: 4.2em; min-height: 32px; padding: 2px 6px; }
.md-eraser { min-height: 34px; padding: 4px 10px; }
.md-swatch-btn > .icon { width: 30px; height: 30px; padding: 4px; }
.md-swatch-upload { display: grid; place-items: center; border: 1px dashed var(--border); border-radius: 4px; color: var(--muted); }
.md-swatch-upload .icon { width: 18px; height: 18px; }
img.md-swatch { object-fit: cover; border-radius: 4px; }
.page-title .ar-shared { margin-left: 0.4em; }
/* 핀 설정 창 */
.pin-dialog { width: min(520px, calc(100vw - 32px)); }
.pin-form { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pin-form input { flex: 1; min-width: 0; }
.pin-form-icon { display: grid; flex: none; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px dashed var(--border); border-radius: 12px; background: var(--bg); cursor: pointer; }
.pin-form-icon:hover { border-color: var(--primary); }
.pin-look { margin-bottom: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; }
.md-sel-line { fill: none; stroke: #2f7fd8; stroke-width: 3; stroke-dasharray: 10 6; pointer-events: none; }
.md-handle { fill: #fff; stroke: #2f7fd8; stroke-width: 3; cursor: grab; }
.md-handle-text { fill: none; stroke: #2f7fd8; stroke-width: 3; stroke-dasharray: 6 4; }
.md-draft { fill: none; stroke: #2f7fd8; stroke-width: 4; stroke-dasharray: 12 6; pointer-events: none; }
.md-draft-pt { fill: #2f7fd8; pointer-events: none; }
.md-draft-pt.is-first { fill: #fff; stroke: #2f7fd8; stroke-width: 4; }
/* 그리기 도구 줄 */
.md-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.md-tools { display: inline-flex; gap: 4px; }
.md-bg { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: calc(0.85rem + var(--fs-add)); }
.md-bg select { min-height: 32px; padding: 2px 6px; }
.md-palette { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.md-swatch-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; width: 72px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: calc(0.72rem + var(--fs-add)); cursor: pointer; }
.md-swatch-btn[aria-pressed="true"] { border-color: var(--primary); background: var(--active-bg); color: var(--primary); font-weight: 700; }
.md-swatch { width: 44px; height: 30px; }
.md-hint { margin: 0 0 8px; }
/* 새 지도 */
.map-new { width: min(620px, calc(100vw - 32px)); }
.map-ways { display: grid; gap: 8px; margin: 10px 0; }
.map-way { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.map-way span { color: var(--muted); font-size: calc(0.85rem + var(--fs-add)); }
.map-way[aria-pressed="true"] { border-color: var(--primary); background: var(--active-bg); }
.map-tools { margin: 6px 0 0; padding-left: 1.2em; font-size: calc(0.88rem + var(--fs-add)); }
.map-tools li { margin-bottom: 4px; }
/* 자동 지형 */
/* 자동 지형 만들기 창: ① 대륙 설계(왼쪽 그림 + 오른쪽 고르기) ② 완성 지도 */
.terrain-dialog { width: min(900px, calc(100vw - 32px)); }
.terrain-sec { margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.terrain-sec-head { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: calc(0.95rem + var(--fs-add)); }
.terrain-design { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 640px) { .terrain-design { grid-template-columns: 1fr; } }
.terrain-canvas canvas { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--surface); }
.terrain-canvas.is-paint canvas { cursor: crosshair; touch-action: none; }
.terrain-side { display: flex; flex-direction: column; gap: 8px; font-size: calc(0.9rem + var(--fs-add)); }
.terrain-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.terrain-row input[type="range"] { flex: 1; min-width: 80px; }
.terrain-label { color: var(--muted); font-weight: 600; }
.terrain-select { width: auto !important; min-height: 34px !important; padding: 2px 8px !important; }
.terrain-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.terrain-pick { padding: 0; overflow: hidden; border: 3px solid transparent; border-radius: 8px; background: none; cursor: pointer; }
.terrain-pick canvas { display: block; width: 100%; height: auto; }
.terrain-pick:hover { border-color: var(--border); }
.terrain-pick.is-active { border-color: var(--primary); }
.terrain-conts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: calc(0.9rem + var(--fs-add)); }
.terrain-cont { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.terrain-cont.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
.terrain-cont-pick { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; border: 0; border-radius: 999px; background: none; color: var(--text); font: inherit; cursor: pointer; }
.terrain-num { display: inline-grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: calc(0.75rem + var(--fs-add)); }
.terrain-cont-del { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.terrain-cont-del:hover { background: var(--hover); color: var(--error); }
.terrain-cont-del .icon { width: 12px; height: 12px; }
.terrain-tip { margin: 6px 0 0; }
.terrain-stage { position: relative; width: min(100%, calc(36vh * 1.6)); margin: 6px auto 0; touch-action: none; }
.terrain-stage.is-adding { cursor: crosshair; } /* "대륙 추가"를 켰을 때만: 빈 곳을 누르면 대륙 */
.terrain-stage.is-adding canvas { outline: 2px dashed var(--primary); outline-offset: 2px; }
.terrain-stage canvas { display: block; width: 100%; height: auto; border-radius: 10px; }
.terrain-mark { position: absolute; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 2px solid #fff; border-radius: 50%; color: #fff; font: inherit; font-size: calc(0.85rem + var(--fs-add)); font-weight: 700; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); transform: translate(-50%, -50%); cursor: grab; touch-action: none; }
.terrain-mark.is-active { outline: 3px solid var(--primary); outline-offset: 1px; }
.terrain-mark:active { cursor: grabbing; }
/* 핀 */
.map-pin { position: absolute; display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; color: inherit; text-decoration: none; transform: translate(-50%, -100%) scale(var(--pin-s, 1)); transform-origin: 50% 100%; cursor: pointer; touch-action: none; } /* 지도를 확대해도 핀은 같은 크기 */
.map-pin.is-badge { transform: translate(-50%, -22px) scale(var(--pin-s, 1)); transform-origin: 50% 22px; }
.map-pin-dot .icon { width: 28px; height: 28px; color: #e05555; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.map-pin.has-doc .map-pin-dot .icon { color: var(--primary); }
.map-pin-badge { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border: 2px solid #fff; border-radius: 50%; background: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); }
.map-pin-badge .icon { width: 24px; height: 24px; }
.map-pin-badge.has-img { background: #fff; }
.map-pin-badge img { width: 100%; height: 100%; object-fit: cover; }
.map-pin-label { margin-top: 2px; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: calc(0.75rem + var(--fs-add)); font-weight: 700; white-space: nowrap; }
.map-pin-dot + .map-pin-label { margin-top: -2px; }
.pin-look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; max-height: 50vh; overflow-y: auto; }
.pin-look-grid button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: calc(0.75rem + var(--fs-add)); cursor: pointer; }
.pin-look-grid button[aria-pressed="true"] { border-color: var(--primary); background: var(--active-bg); }
.pin-look-grid .map-pin-badge { width: 36px; height: 36px; }
.pin-look-upload { margin-top: 10px; }
.peek-body .map-stage, .peek-body .rel-wrap { max-width: 100%; }

.btn-help { width: 32px; height: 32px; min-height: 32px; border: 1px solid var(--border); border-radius: 50%; font-weight: 700; }

/* 관계 잇기·변경 창: 선 색·선 모양 (누르면 펼쳐짐) */
.rel-edge-dialog input[type="text"] { width: 100%; }
.rel-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; }
.rel-opt-name { width: 4.5em; color: var(--muted); font-size: calc(0.85rem + var(--fs-add)); font-weight: 600; }
.rel-opt-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid var(--primary); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: calc(0.85rem + var(--fs-add)); cursor: pointer; }
.rel-opt-btn:hover { border-color: var(--primary-hover); }
.rel-opt-list { position: fixed; z-index: 10; display: flex; flex-direction: column; gap: 2px; width: max-content; max-height: 240px; overflow-y: auto; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); } /* 창 위에 떠서 아래로 펼쳐짐 */
.rel-opt-list[hidden] { display: none; }
.rel-opt-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: calc(0.85rem + var(--fs-add)); text-align: left; cursor: pointer; }
.rel-opt-list button:hover { background: var(--hover); }
.rel-opt-btn .icon { width: 14px; height: 14px; color: var(--muted); }
.rel-color-dot { display: inline-block; width: 20px; height: 20px; border-radius: 50%; }
.rel-style-sample { width: 52px; height: 14px; color: var(--text); }

/* 집필 편집 도움말 말풍선 (? 버튼 오른쪽 아래) */
.help-pop { position: fixed; z-index: 90; max-width: min(360px, calc(100vw - 24px)); padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font-size: calc(0.88rem + var(--fs-add)); line-height: 1.6; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }
.help-pop::before { content: ""; position: absolute; top: -7px; left: 14px; width: 12px; height: 12px; border-top: 1px solid var(--border); border-left: 1px solid var(--border); background: var(--surface); transform: rotate(45deg); }
.font-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* 설정 → 화면 → 글꼴 */
.set-theme { margin-top: 60px; } /* 테마: 글꼴과 떨어뜨림 (다른 칸 사이 12px의 5배) */
.theme-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 12px; }
.theme-item { display: grid; gap: 12px; justify-items: start; }
/* 테마 칸: 그 테마의 바탕 + 왼쪽 글자 두 줄 + 오른쪽 색 두 개(강조색 · 연한 강조 바탕) */
.theme-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 14px 14px 18px; border: 1px solid; border-radius: 12px; font: inherit; text-align: left; cursor: pointer; }
.theme-card.is-on, .theme-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } /* 고른 테마 */
.theme-text { display: grid; gap: 2px; min-width: 0; }
.theme-line1 { font-size: calc(1rem + var(--fs-add)); font-weight: 700; }
.theme-line2 { font-size: calc(0.85rem + var(--fs-add)); }
.theme-sw { display: flex; flex-shrink: 0; gap: 8px; }
.theme-sw span { display: block; width: 40px; height: 40px; border: 1px solid transparent; border-radius: 10px; }
.theme-sw .theme-sw-ai { display: grid; place-items: center; font-size: calc(0.8rem + var(--fs-add)); font-weight: 800; } /* 마지막 칸: AI 색 */
.theme-name { padding-left: 2px; font-size: calc(0.85rem + var(--fs-add)); font-weight: 600; } /* 칸 아래, 칸 왼쪽 선에 맞춤 */
.font-row select { flex: 1; min-width: 180px; max-width: 320px; }
.help-pop-head { display: block; color: var(--primary); } /* 항목 제목: 주황색, 그 아래 줄부터 설명 */
.help-pop p { margin: 0; }
.help-pop p + p { margin-top: 10px; }
.help-pop code { color: var(--primary); }

/* 핀 설정 창: 아이콘 오른쪽 아래 작은 + */
.pin-form-icon { position: relative; }
.pin-form-plus { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--surface); border-radius: 50%; background: var(--primary); color: var(--primary-text); }
.pin-form-plus .icon { width: 12px; height: 12px; }

/* ── 콘티 (글 콘티) — docs/UX.md 6-19 ── */
.ct-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ct-ep-no { flex: none; color: var(--primary); }
.ct-title { flex: 1; min-width: 0; min-height: 40px !important; padding: 4px 10px !important; border-color: transparent !important; background: transparent !important; font-size: calc(1.1rem + var(--fs-add)) !important; font-weight: 700; }
.ct-title:hover, .ct-title:focus { border-color: var(--border) !important; background: var(--surface) !important; }
.ct-from { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 6px; }
.ct-cuts { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ct-cut { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.ct-cut:focus-within { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.ct-cut-head { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.ct-no { color: var(--primary); font-size: calc(0.9rem + var(--fs-add)); font-weight: 700; }
.ct-cut-head .btn-icon { width: 30px; height: 30px; min-height: 30px; opacity: 0.5; }
.ct-cut-head .btn-icon .icon { width: 16px; height: 16px; }
.ct-cut:hover .ct-cut-head .btn-icon, .ct-cut:focus-within .ct-cut-head .btn-icon { opacity: 1; }
.ct-cut-head .btn-icon:disabled { opacity: 0.25 !important; }
.ct-fields { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 8px; } /* 넓은 화면: 한 줄에 3칸까지, 넘치면 아랫줄로 */
@media (max-width: 899px) { .ct-fields { grid-template-columns: 1fr; } }
.ct-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ct-f-head { display: flex; align-items: center; gap: 2px; }
.ct-f-name { flex: 1; min-width: 0; min-height: 26px !important; padding: 2px 6px !important; border: 1px solid transparent !important; border-radius: 6px; background: transparent !important; color: var(--muted); font-size: calc(0.8rem + var(--fs-add)) !important; font-weight: 700; }
.ct-f-name:hover, .ct-f-name:focus { border-color: var(--border) !important; background: var(--bg) !important; color: var(--text); }
.ct-f-name::placeholder { font-weight: 400; }
.ct-f-del { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; opacity: 0.5; }
.ct-f-del .icon { width: 14px; height: 14px; }
.ct-f-del:hover { opacity: 1; background: var(--hover); color: var(--danger, #d55); }
.ct-cut-add { min-height: 28px; margin-left: 4px; opacity: 0.75; }
.ct-cut:hover .ct-cut-add, .ct-cut:focus-within .ct-cut-add { opacity: 1; }
.ct-cut-add .icon { width: 14px; height: 14px; }
@media (max-width: 599px) { .ct-cut-head { flex-wrap: wrap; } }
.ct-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ct-img { position: relative; margin: 0; }
.ct-img img { display: block; height: 120px; max-width: 100%; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); cursor: zoom-in; }
.ct-img.is-big { flex-basis: 100%; }
.ct-img.is-big img { height: auto; max-height: 80vh; cursor: zoom-out; }
.ct-img-del { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; opacity: 0; }
.ct-img-del .icon { width: 14px; height: 14px; }
.ct-img:hover .ct-img-del, .ct-img-del:focus { opacity: 1; }
@media (hover: none) { .ct-img-del { opacity: 1; } }
.ct-f textarea { width: 100%; min-height: 56px; padding: 6px 8px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: calc(0.9rem + var(--fs-add)); line-height: 1.55; resize: none; }
.ct-f textarea:focus { outline: 2px solid var(--primary); outline-offset: 0; }
.ct-add-end { margin-top: 10px; }
.page-count { margin-left: 6px; color: var(--muted); font-size: calc(0.95rem + var(--fs-add)); font-weight: 600; }
.ct-sub { margin-bottom: 16px; }
.ct-from .ref-chip.is-active { border-color: var(--primary); background: var(--active-bg); color: var(--primary); font-weight: 700; }
.ct-page-tools { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ct-page-tools .btn-icon .icon { width: 18px; height: 18px; }
.ct-page .manuscript { min-height: 60vh; font-family: inherit; font-size: calc(0.95rem + var(--fs-add)); line-height: 1.7; }
/* 콘티: 원고 보기를 열면 두 칸 (넓은 화면) */
.ct-split.has-peek { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1100px) { .screen:has(.ct-split.has-peek) { max-width: calc(1050px * 2 + 16px + 64px); } }
@media (max-width: 1099px) { .ct-split.has-peek { display: block; } }
.ct-split.has-peek .ct-main { min-width: 0; }
.ct-peek .peek-head { top: 0; }
.pick-toggle[aria-pressed="true"] { border-color: var(--primary); background: var(--active-bg); color: var(--primary); }
.ct-count { flex: none; color: var(--muted); font-size: calc(0.85rem + var(--fs-add)); font-weight: 600; white-space: nowrap; }
.ct-start { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 10px 14px; margin-top: 16px; text-align: left; } /* 버튼은 왼쪽 위아래, 설명은 오른쪽 */
.ct-start .btn { margin-top: 0; justify-content: flex-start; }
@media (max-width: 599px) { .ct-start { grid-template-columns: 1fr; } .ct-start span { margin-bottom: 6px; } }
.ct-page { display: block; width: 100%; min-height: 60vh; padding: 12px 14px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; line-height: 1.7; resize: none; }
.ct-page:focus { outline: 2px solid var(--primary); outline-offset: 0; }
.ct-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; }
.ct-preview { display: flex; flex-direction: column; gap: 6px; max-height: 320px; margin-top: 6px; padding: 8px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: calc(0.85rem + var(--fs-add)); }
.ct-preview-cut b { color: var(--primary); }
.ct-preview-cut p { margin: 2px 0 0; white-space: pre-wrap; }
.ct-preview-cut p span { display: inline-block; min-width: 3em; color: var(--muted); font-weight: 600; }

/* ───────── 공지사항 (8단계) ───────── */
/* 🔔: PC·태블릿은 위쪽 줄 오른쪽 끝, 스마트폰은 서랍 안 설정 옆 */
.top-bell { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; color: var(--muted); }
.top-bell:hover, .top-bell.is-active { background: var(--hover); color: var(--primary); }
.top-bell .icon { width: 20px; height: 20px; }
.top-actions + .top-bell { margin-left: -4px; }
.top-actions:empty + .top-bell { margin-left: -12px; } /* 빈 저장 상태 칸의 간격만큼 당김 */
#sb-bell { position: relative; display: none; }
#sb-bell.is-active { color: var(--primary); }
@media (max-width: 767px) {
  .top-bell { display: none; }
  #sb-bell { display: grid; width: 44px; height: 44px; }
}
/* 새 공지가 있으면 빨간 점 (스마트폰은 ☰ 버튼에도) */
.notice-bell::after, .fab-menu::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--error);
  box-sizing: content-box;
  display: none;
}
.fab-menu::after { top: 4px; right: 4px; border-color: var(--surface); }
body.has-new-notice .notice-bell::after,
body.has-new-notice .fab-menu::after { display: block; }

.notice-list { max-width: 820px; border-top: 1px solid var(--border); }
.notice-item { border-bottom: 1px solid var(--border); }
.notice-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 8px; cursor: pointer; list-style: none; }
.notice-row::-webkit-details-marker { display: none; }
.notice-row:hover { background: var(--hover); }
.notice-type { flex-shrink: 0; min-width: 4.5em; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: calc(0.78rem + var(--fs-add)); text-align: center; }
.notice-title { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.notice-item[open] .notice-title { color: var(--primary); }
.notice-date { flex-shrink: 0; color: var(--muted); font-size: calc(0.85rem + var(--fs-add)); font-variant-numeric: tabular-nums; }
.notice-body { margin: 0 8px 16px; padding: 16px 18px; border-radius: 10px; background: var(--surface); white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .notice-row { flex-wrap: wrap; gap: 4px 10px; }
  .notice-title { flex-basis: 100%; order: 3; }
}
.badge-new { padding: 1px 7px; border-radius: 999px; background: var(--error); color: #fff; font-size: calc(0.72rem + var(--fs-add)); font-weight: 700; letter-spacing: 0.03em; }

/* ───────── 작품 상태 ───────── */
/* 새 작품·작품 수정 창: 장르 오른쪽에 작품 상태 */
.field-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: end; }
.field-status select { min-width: 7.5em; }
/* 작품 상태 표시 (작품 개요 제목 옆, 내 작품 카드의 장르 옆) */
.work-status { display: inline-block; padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: calc(0.75rem + var(--fs-add)); font-weight: 700; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.work-status.is-serial { color: var(--success); }
.work-status.is-done { color: var(--primary); }
.work-status.is-hold { color: var(--muted); }
.work-status.is-plan { color: var(--ai); }

/* ───────── 작품 개요: 제목 옆 작품 상태 · 작품 통계 ───────── */
.overview-title .work-status { margin-left: 6px; font-size: calc(0.8rem + var(--fs-add)); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stat-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; }
a.stat-tile:hover { border-color: var(--primary); }
.stat-label { color: var(--muted); font-size: calc(0.8rem + var(--fs-add)); font-weight: 600; }
.stat-value { font-size: calc(1.7rem + var(--fs-add)); font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-value small { margin-left: 2px; color: var(--muted); font-size: calc(0.85rem + var(--fs-add)); font-weight: 600; }
.stat-sub { color: var(--muted); font-size: calc(0.75rem + var(--fs-add)); }
/* 회차 진행 상태: 초안(주황) · 퇴고(파랑) · 완료(초록) — 한눈에 구별되는 세 색 (색약 구별도 확인함), 막대 옆에 이름·개수도 씀 */
.stat-status { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.status-bar { display: flex; gap: 2px; height: 12px; margin: 8px 0 10px; }
.status-seg { min-width: 6px; border-radius: 4px; }
.status-seg.is-draft, .status-dot.is-draft { background: #d9932b; }
.status-seg.is-revise, .status-dot.is-revise { background: #4a78d0; }
.status-seg.is-done, .status-dot.is-done { background: #2f9a5a; }
.status-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: calc(0.85rem + var(--fs-add)); }
.status-legend strong { color: var(--text); }
.status-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
:root[data-scheme="dark"] .status-seg.is-draft, :root[data-scheme="dark"] .status-dot.is-draft { background: #bf852a; }
:root[data-scheme="dark"] .status-seg.is-revise, :root[data-scheme="dark"] .status-dot.is-revise { background: #5c86d8; }
:root[data-scheme="dark"] .status-seg.is-done, :root[data-scheme="dark"] .status-dot.is-done { background: #3ea866; }
@media (max-width: 480px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ───────── 내 작품: 내 정보 칸 · 장르 옆 작품 상태 ───────── */
.profile-card { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-bottom: 28px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--primary) 7%, var(--surface))); box-shadow: var(--shadow); }
.profile-avatar { display: grid; place-items: center; flex-shrink: 0; width: 64px; height: 64px; padding: 0; overflow: hidden; border: 0; border-radius: 50%; background: var(--active-bg); color: var(--primary); cursor: pointer; }
.profile-avatar:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar .icon { width: 36px; height: 36px; }
.profile-main { flex: 1; min-width: 180px; }
.profile-date { margin: 0; color: var(--muted); font-size: calc(0.85rem + var(--fs-add)); }
.profile-name { margin: 2px 0 2px; font-size: calc(1.3rem + var(--fs-add)); }
.profile-stats { margin: 0; }
/* 이어 쓰기: 작품 수 아래, 버튼 오른쪽에 작품 정보 */
.profile-continue { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; margin-top: 10px; }
.profile-continue:empty { display: none; }
.profile-continue-info { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-genre { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.work-genre .work-status { font-size: calc(0.68rem + var(--fs-add)); }

/* ───────── 빠른 메모 (위쪽 줄 메모장) ───────── */
/* 메모 색 = 테마 색 (테마가 바뀌면 함께 바뀜): 칸 바탕에 강조색을 살짝 섞음 */
:root { --memo-bg: color-mix(in srgb, var(--primary) 12%, var(--surface)); --memo-border: color-mix(in srgb, var(--primary) 45%, var(--border)); --memo-ink: var(--text); }
.top-memo { border: 0; background: none; cursor: pointer; }
.top-memo[aria-expanded="true"] { background: var(--memo-bg); color: var(--memo-ink); }
.top-memo + .top-bell { margin-left: -6px; }
@media (max-width: 767px) { .top-memo { display: grid; width: 34px; height: 34px; } }
.memo-pop { position: fixed; z-index: 160; padding: 12px; border: 1px solid var(--memo-border); border-radius: 14px; background: var(--memo-bg); color: var(--memo-ink); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); }
.memo-pop::before { content: ""; position: absolute; top: -7px; left: calc(var(--tail, 50%) - 7px); width: 12px; height: 12px; border-top: 1px solid var(--memo-border); border-left: 1px solid var(--memo-border); background: var(--memo-bg); transform: rotate(45deg); } /* 말풍선 꼬리 */
.memo-pop-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.memo-pop-where { margin-left: auto; }
.memo-pop-where a { color: inherit; font-weight: 600; }
.memo-pop textarea { min-height: 110px; border-color: var(--memo-border); background: color-mix(in srgb, #fff 55%, var(--memo-bg)); color: var(--memo-ink); }
.memo-pop textarea { background: var(--surface); }
.memo-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.memo-pop-foot .muted { color: color-mix(in srgb, var(--memo-ink) 65%, transparent); }

/* ───────── 메모 보관함 ───────── */
.memo-new { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 18px; padding: 12px; border: 1px solid var(--memo-border); border-radius: 12px; background: var(--memo-bg); } /* 메모 칸 오른쪽에 저장 (칸 아래쪽 선에 맞춤) */
.memo-new textarea { flex: 1; min-width: 0; }
.memo-new .btn { flex-shrink: 0; }
.memo-new textarea { border-color: var(--memo-border); background: var(--surface); color: var(--memo-ink); }
.memo-new-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.memo-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.memo-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.memo-item { padding: 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--memo-border); border-radius: 10px; background: var(--surface); }
.memo-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.memo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; }
.memo-work { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.memo-work .icon { width: 14px; height: 14px; }
.memo-del { margin-left: auto; }

/* ───────── 캐릭터 통계 ───────── */
.cs-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; /* 볼 항목 아래(모두 보기·모두 해제 아래)에 보는 방법·정렬 기준·보기 */ margin-bottom: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.cs-pick { min-width: 0; margin: 0; padding: 0; border: 0; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); font-size: calc(0.85rem + var(--fs-add)); cursor: pointer; }
.cs-chip.is-on { border-color: var(--primary); background: var(--active-bg); color: var(--primary); font-weight: 600; }
.cs-chip input { margin: 0; accent-color: var(--primary); }
.cs-pick-actions { display: flex; gap: 6px; margin-top: 8px; }
.cs-sort { display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: 6px 10px; align-items: end; justify-content: start; padding-top: 12px; border-top: 1px solid var(--border); }
.cs-hide-empty { align-self: center; margin-top: 22px; white-space: nowrap; } /* 보기 오른쪽 */
.cs-mode-desc { grid-column: 1 / -1; margin: 0; } /* 고른 보는 방법의 설명 — 보는 방법 칸 왼쪽에서 시작 */
@media (max-width: 600px) { .cs-sort { grid-template-columns: 1fr 1fr; } .cs-sort .cs-select:first-child { grid-column: 1 / -1; } .cs-hide-empty { grid-column: 1 / -1; margin-top: 0; } }
.cs-select select { width: auto; min-width: 9em; }
.cs-count { margin: 0 0 6px; }
.cs-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.cs-table { width: 100%; table-layout: fixed; border-collapse: collapse; /* 묶음마다 칸 너비가 같게 */ font-size: calc(0.9rem + var(--fs-add)); }
.cs-table th, .cs-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; white-space: nowrap; }
.cs-table td { max-width: 260px; white-space: normal; overflow-wrap: anywhere; }
.cs-table thead th { position: sticky; top: 0; background: var(--bg); color: var(--muted); font-size: calc(0.8rem + var(--fs-add)); }
.cs-table tbody tr:last-child > * { border-bottom: 0; }
.cs-table tbody tr:hover { background: var(--hover); }
.cs-table .cs-name { width: 150px; overflow: hidden; text-overflow: ellipsis; position: sticky; left: 0; background: var(--surface); font-weight: 700; }
.cs-table thead .cs-name { background: var(--bg); }
.cs-table .cs-name a { color: var(--text); text-decoration: none; }
.cs-table .cs-name a:hover { color: var(--primary); text-decoration: underline; }
.cs-table .is-sort { color: var(--primary); }
.cs-table td.is-sort { font-weight: 600; }
.cs-empty { color: var(--muted); }
.cs-group { margin-bottom: 16px; }
.cs-group-head { margin: 0 0 6px; font-size: calc(1rem + var(--fs-add)); }

/* ───────── AI 작품 분석 ───────── */
.an-chapter-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.an-chapter-tools input { flex: 1; min-width: 160px; }
.an-hint { display: block; margin-bottom: 6px; color: var(--muted); font-size: calc(0.82rem + var(--fs-add)); }
.an-warn { padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--error) 10%, transparent); color: var(--error); }
.an-running { padding: 16px 18px; border: 1.5px solid var(--ai); border-radius: 12px; background: var(--surface); }
.an-running-head { display: flex; align-items: center; gap: 10px; }
.an-spinner { width: 16px; height: 16px; border: 2px solid color-mix(in srgb, var(--ai) 30%, transparent); border-top-color: var(--ai); border-radius: 50%; animation: an-spin 0.8s linear infinite; }
@keyframes an-spin { to { transform: rotate(360deg); } }
.an-result-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.an-result-title { flex: 1; min-width: 0; }
.an-result-title .page-title { margin-bottom: 2px; }
.an-result-title p { margin: 0; }
.an-extra { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: var(--active-bg); font-size: calc(0.9rem + var(--fs-add)); }
.an-extra strong { margin-right: 6px; }
.an-report { max-width: 860px; line-height: 1.75; }
.an-report h2 { margin: 26px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); font-size: calc(1.15rem + var(--fs-add)); }
.an-report h2:first-child { margin-top: 6px; }
.an-report h3 { margin: 16px 0 6px; font-size: calc(1rem + var(--fs-add)); }
.an-report p { margin: 6px 0; }
.an-report ul { margin: 6px 0; padding-left: 1.3em; }
.an-report li { margin: 4px 0; }
.an-running .an-report:not(:empty) { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--border); }

/* ───────── 새 버전 알림 띠 ───────── */
.update-bar { position: fixed; top: 12px; left: 50%; z-index: 300; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--text); color: var(--bg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); transform: translateX(-50%); font-size: calc(0.9rem + var(--fs-add)); }
.update-reload { border: 0 !important; background: var(--primary) !important; color: var(--primary-text) !important; }
.update-close { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; opacity: 0.7; }
.update-close:hover { opacity: 1; background: rgba(127, 127, 127, 0.2); }

.an-all { border-color: var(--border) !important; }
.an-all.is-on { border-color: var(--ai) !important; background: var(--ai-active-bg) !important; color: var(--ai) !important; }
.an-list-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.an-list-head .pt-list-title { margin-bottom: 0; }
.an-list-head + .pt-list { margin-top: 10px; }

/* 캐릭터 통계: 빈도 분석 · 이름 나열 */
.cs-freq { margin-bottom: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.cs-freq-head { margin: 0 0 10px; font-size: calc(1rem + var(--fs-add)); }
.cs-bars { display: grid; gap: 6px; }
.cs-bar-row { display: grid; grid-template-columns: minmax(70px, 180px) minmax(0, 1fr); align-items: center; gap: 12px; }
.cs-bar-key { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(0.9rem + var(--fs-add)); text-align: right; }
.cs-bar-track { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cs-bar { display: block; flex: 0 1 auto; max-width: calc(100% - 3.5em); height: 10px; min-width: 4px; border-radius: 0 4px 4px 0; background: var(--primary); }
.cs-bar.is-empty { background: color-mix(in srgb, var(--primary) 45%, var(--surface)); } /* 비어 있음도 색으로 (값이 있는 막대보다 옅게) */
.cs-bar-num { flex-shrink: 0; color: var(--muted); font-size: calc(0.82rem + var(--fs-add)); font-variant-numeric: tabular-nums; }
.cs-names { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-name-chip { padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); font-size: calc(0.85rem + var(--fs-add)); text-decoration: none; }
.cs-name-chip:hover { border-color: var(--primary); color: var(--primary); }


/* ───────── 화면 잠금 (숫자판) ───────── */
.pin-screen { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); }
.pin-screen.is-lock { background: var(--bg); } /* 잠금 화면은 뒤가 전혀 보이지 않게 */
.pin-box { width: min(320px, 100%); text-align: center; }
.pin-logo { width: 52px; height: 52px; margin: 0 auto 10px; color: var(--primary); }
.pin-logo .icon { width: 100%; height: 100%; }
.pin-title { margin: 0 0 4px; font-size: calc(1.25rem + var(--fs-add)); }
.pin-sub { margin: 0; color: var(--muted); font-size: calc(0.9rem + var(--fs-add)); }
.pin-dots { display: flex; justify-content: center; gap: 16px; margin: 22px 0 8px; }
.pin-dots span { width: 14px; height: 14px; border: 2px solid var(--primary); border-radius: 50%; transition: background 0.1s; }
.pin-dots span.is-on { background: var(--primary); }
.pin-dots.is-wrong { animation: pin-shake 0.35s; }
.pin-dots.is-wrong span { border-color: var(--error); }
@keyframes pin-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pin-msg { min-height: 1.5em; margin: 0 0 10px; color: var(--error); font-size: calc(0.85rem + var(--fs-add)); }
.pin-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pin-key { display: grid; place-items: center; height: 60px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); font: inherit; font-size: calc(1.4rem + var(--fs-add)); font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pin-key:active { background: var(--active-bg); }
.pin-key:hover { border-color: var(--primary); }
.pin-key .icon { width: 22px; height: 22px; }
.pin-key-text { color: var(--muted); font-size: calc(0.85rem + var(--fs-add)); font-weight: 600; }

.page-sub.cs-sub { margin-bottom: 12px; } /* 캐릭터 통계: 설명과 옵션 칸 사이를 반으로 */

/* 설정 화면의 줄: 설명 왼쪽 · 설정 오른쪽 (모든 칸 공통) */
.set-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 12px 0; border-top: 1px solid var(--border); }
.card > h2 + .set-row, .card > .set-desc + div > .set-row:first-child, [data-id="lock-more"] > .set-row { border-top: 0; }
[data-id="lock-more"] > .set-row { padding-top: 0; }
.set-text { flex: 1 1 260px; min-width: 0; }
.set-text > :first-child { margin-top: 0; }
.set-text > :last-child { margin-bottom: 0; }
.set-name { display: block; font-weight: 600; }
.set-desc { margin: 4px 0; color: var(--muted); font-size: calc(0.875rem + 1px + var(--fs-add)); line-height: 1.6; }
.settings-page .small { font-size: calc(0.875rem + 1px + var(--fs-add)); } /* 설정의 설명 글자는 1 크게 */
.set-desc strong { color: var(--text); }
.set-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }
.set-ctl:empty { display: none; }
.set-ctl select { width: auto; max-width: 220px; min-height: 36px; padding: 4px 10px; }
.set-ctl input[type="number"], .set-ctl .btn-small { min-height: 36px; }
.set-ctl input[type="number"] { width: 5.5em; }

/* 켜기/끄기 스위치 (누르면 동그라미가 오른쪽으로, 빈 쪽에 ON/OFF) */
.switch { position: relative; flex-shrink: 0; width: 64px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: var(--border); cursor: pointer; transition: background 0.2s; }
.switch-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s; }
.switch-text { position: absolute; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.switch-on { left: 10px; color: var(--primary-text); visibility: hidden; }
.switch-off { right: 8px; color: var(--muted); }
.switch[aria-checked="true"] { background: var(--primary); }
.switch[aria-checked="true"] .switch-knob { transform: translateX(34px); }
.switch[aria-checked="true"] .switch-on { visibility: visible; }
.switch[aria-checked="true"] .switch-off { visibility: hidden; }
.switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 글자 크기 · 내보내기 저장 위치(버튼 왼쪽, 설명 오른쪽) · 템플릿 줄(이름 | 긴 고르기 칸 | 버튼) */
.text-size-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.text-size-row input { width: 5.5em; }
.folder-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.folder-btns { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; }
.folder-row .set-desc { flex: 1 1 220px; }
.tpl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--border); }
.tpl-row:first-child { border-top: 0; }
.tpl-row .set-name { flex: 0 0 auto; min-width: 4.5em; }
.tpl-row select { flex: 1 1 160px; width: auto; min-width: 0; min-height: 36px; padding: 4px 10px; }
.tpl-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl-btns .btn-small { min-height: 36px; }

/* 템플릿 보기 창 */
.tpl-view { overflow: auto; }
.tpl-view .infobox { margin: 12px 0 20px; }
.tpl-view .infobox td { min-width: 6em; }
.tpl-sections { margin: 0; padding: 0; list-style: none; }
.tpl-sections li { padding: 4px 0; }
.tpl-num { color: var(--primary); font-weight: 600; }

/* 전체 초기화: 문구 입력 칸 + 버튼 (오른쪽) */
.reset-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.reset-row input { flex: 1 1 240px; min-width: 0; }

/* 설정 → 데이터 백업 (9단계) */
.danger-text { color: var(--reset-red); } /* 전체 초기화: 모든 테마에서 같은 빨강 */
[data-id="reset"].btn-danger { border-color: var(--reset-red); background: var(--reset-red); color: #fff; }
.backup-progress { margin-top: 10px; }
.backup-progress .batch-bar { margin: 6px 0 8px; }

/* 원고 불러오기 창 (집필 목록의 [불러오기]) */
.import-dialog { width: min(560px, calc(100vw - 32px)); }
.import-list { display: grid; gap: 2px; max-height: min(50vh, 420px); overflow-y: auto; margin: 8px 0 12px; padding: 0; list-style: none; }
.import-list li { display: flex; align-items: baseline; gap: 10px; padding: 6px 8px; border-radius: 8px; background: var(--hover); }
.import-list li.is-error { background: none; color: var(--error); }
.import-no { flex-shrink: 0; min-width: 3.5em; font-weight: 700; }
.import-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 오른쪽 판: 모바일 미리보기 (집필 AI 창과 같은 자리 — .ai-panel) */
@media (min-width: 1200px) {
  body.side-open .main { margin-right: 400px; }
  body.side-open .fab-top { right: 420px; }
}
.side-body { flex: 1; overflow-y: auto; padding: 12px 14px 20px; }

/* 모바일 미리보기: 스마트폰 화면 폭(360)에 맞춘 틀. 글자는 설정의 글자 크기와 상관없이 스마트폰 기본 크기로 */
.mp-note { margin: 0 0 10px; }
.mp-phone { width: min(100%, 372px); margin: 0 auto; padding: 14px 6px 18px; border: 1px solid var(--border); border-radius: 26px; background: var(--bg); }
.mp-screen { width: 100%; max-width: 360px; height: calc(100vh - 190px); height: calc(100dvh - 190px); min-height: 320px; margin: 0 auto; overflow-y: auto; padding: 16px; border-radius: 14px; background: var(--surface); user-select: text; }
.mp-title { margin: 0 0 14px; font-size: 18px; line-height: 1.4; }
.mp-screen .manuscript-text { font-size: 16px; line-height: 1.8; }
.mp-screen a { color: inherit; cursor: default; pointer-events: none; }
.mp-notes { margin-top: 20px; font-size: 13px; }
@media (max-width: 767px) { .mp-screen { height: calc(78dvh - 150px); } }

/* 타임라인: 보기·분류 글자는 버튼 왼쪽에 */
.ar-drop-wrap.is-inline { flex-direction: row; align-items: center; gap: 6px; }
.ar-drop-wrap.is-inline .ar-drop-title { padding-left: 0; }
.tl-tools:has(.ar-drop-wrap.is-inline) { align-items: center !important; }
.tl-tools:has(.ar-drop-wrap.is-inline) .tl-tools-left { align-items: center; }
/* 타임라인 탭 설정 (시간축 위치) — 보기·분류 위 */
.tl-set { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; }

/* 시간축 오른쪽: 왼쪽 모양을 좌우로 뒤집은 것 */
.tl.is-axis-right::before { left: auto; right: 132px; }
.tl.is-axis-right .tl-row { grid-template-columns: minmax(0, 1fr) 24px 120px; }
.tl.is-axis-right .tl-row > .tl-when { grid-column: 3; grid-row: 1; align-items: flex-start; padding-right: 0; padding-left: 8px; text-align: left; }
.tl.is-axis-right .tl-row > .tl-dot { grid-column: 2; grid-row: 1; margin: 14px 0 0 4px; }
.tl.is-axis-right .tl-row > .tl-dot-add { margin: 6px 0 0 -1px; }
.tl.is-axis-right .tl-row > .tl-row-body { grid-column: 1; grid-row: 1; }
.tl.is-axis-right .tl-evs, .tl.is-axis-right .tl-row-foot, .tl.is-axis-right .tl-brief { justify-content: flex-end; }
.tl.is-axis-right .tl-end .tl-row-body { text-align: right; }
.tl.is-axis-right .tl-form { margin-left: auto; }

/* 시간축 가운데: 왼쪽 사건 | 시간대·점 | 오른쪽 사건 */
.tl.is-axis-center::before { left: 50%; margin-left: -1px; }
.tl.is-axis-center .tl-row { grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr); }
.tl.is-axis-center .tl-axis { display: flex; flex-direction: column; align-items: center; }
.tl.is-axis-center .tl-axis .tl-when { z-index: 1; align-items: center; padding: 6px 4px 0; text-align: center; }
.tl.is-axis-center .tl-axis .tl-when > span:first-child { padding: 0 4px; background: var(--bg); }
.tl.is-axis-center .tl-axis .tl-dot { margin: 6px 0 0; }
.tl.is-axis-center .tl-evs { min-height: 30px; border-radius: 10px; }
.tl.is-axis-center .tl-evs.is-l { grid-column: 1; justify-content: flex-end; }
.tl.is-axis-center .tl-evs.is-r { grid-column: 3; }
.tl.is-axis-center .tl-row-form { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 8px; }
.tl.is-axis-center .tl-row-foot { grid-column: 1 / -1; justify-content: center; }
.tl.is-axis-center .tl-row.is-empty .tl-evs { display: flex; }
.tl.is-axis-center .tl-row.is-form { display: flex; justify-content: center; }
.tl.is-axis-center .tl-row.is-form > .tl-when, .tl.is-axis-center .tl-row.is-form > .tl-dot { display: none; }
.tl.is-axis-center .tl-row.is-form > .tl-row-body { width: min(640px, 100%); }
.tl.is-axis-center .tl-end { display: flex; flex-direction: column; align-items: center; }
.tl.is-axis-center .tl-end > .tl-when { display: none; }
.tl.is-axis-center .tl-end .tl-dot-add { margin: 6px 0 0; }

/* 끌어서 옮기기 */
.tl-body.is-editable .tl-ev { cursor: grab; }
@media (hover: none) { .tl-body.is-editable .tl-ev { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }
body.tl-dragging, body.tl-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.tl-ev.is-dragging { opacity: 0.35; }
.tl-ghost { position: fixed; top: 0; left: 0; z-index: 60; margin: 0; pointer-events: none; opacity: 0.92; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.tl-row.is-drop > .tl-row-body .tl-evs, .tl.is-axis-center .tl-evs.is-drop { outline: 2px dashed var(--primary); outline-offset: 3px; border-radius: 10px; }
.tl-row.is-drop > .tl-when, .tl-row.is-drop .tl-axis .tl-when { color: var(--primary); text-decoration: underline; }
.tl-ev.is-drop-before { box-shadow: -4px 0 0 var(--primary); }
.tl-row.is-drop-above { box-shadow: 0 -3px 0 var(--primary); }
.tl-row.is-drop-below { box-shadow: 0 3px 0 var(--primary); }

/* 플롯 카드: [유형] 제목 … 상태 / 관련·회수·문서 (누르면 이동) */
.plot-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
/* 플롯 유형 색: 관계선과 같은 10가지 색 계열이지만, 메인페이지 작품 상태처럼 진하고 선명하게 (글자·테두리에 씀) */
:root { --pc-gray: #5f6368; --pc-red: #c62828; --pc-orange: #d35400; --pc-yellow: #b07d00; --pc-green: #2f7a4b; --pc-teal: #00796b; --pc-blue: #1f5fbf; --pc-purple: #6d4bc4; --pc-pink: #c2185b; --pc-brown: #8a4b2f; }
:root[data-scheme="dark"] { --pc-gray: #b5b0aa; --pc-red: #ff6b6b; --pc-orange: #ff9f43; --pc-yellow: #ffd43b; --pc-green: #6cc08b; --pc-teal: #38d9c0; --pc-blue: #74a9ff; --pc-purple: #a48bff; --pc-pink: #ff7eb6; --pc-brown: #d08a63; }


.plot-type { flex: none; padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; background: none; color: var(--type-color, var(--primary)); font-size: calc(0.72rem + var(--fs-add)); font-weight: 700; line-height: 1.5; white-space: nowrap; } /* 메인페이지의 작품 상태 표시처럼 테두리·글자에 색 */
.plot-links { display: grid; gap: 4px; margin-top: 6px; }
.plot-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.plot-link-label { flex: none; min-width: 2.4em; color: var(--muted); font-size: calc(0.72rem + var(--fs-add)); font-weight: 700; }
.ref-chip.is-doc { border-color: var(--primary); color: var(--primary); }
.plot-card a.ref-chip { transition: background 0.12s, color 0.12s; }
.plot-card a.ref-chip:hover, .plot-card a.ref-chip:focus-visible { background: var(--primary); border-color: var(--primary); color: var(--primary-text); font-weight: 700; }

/* 플롯 고치기 창: 유형(넓게) + 색 동그라미 | 상태(2×2) */
.plot-type-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: start; }
.plot-type-row { display: flex; align-items: center; gap: 8px; }
.plot-type-input { flex: 1; min-width: 0; }
.plot-type-input::-webkit-calendar-picker-indicator { display: none !important; opacity: 0; } /* 고르기 목록 화살표 숨김 (글을 지워도 남던 화살표) */
.plot-color { position: relative; flex: none; }
.plot-color-btn { display: block; width: 30px; height: 30px; padding: 0; border: 3px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--border); cursor: pointer; }
.plot-color-btn:hover { box-shadow: 0 0 0 2px var(--primary); }
.plot-color-list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; display: grid; grid-template-columns: repeat(5, 28px); gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.plot-color-list[hidden] { display: none; }
.plot-color-dot { width: 28px; height: 28px; padding: 0; border: 2px solid var(--surface); border-radius: 50%; cursor: pointer; }
.plot-color-dot:hover { transform: scale(1.1); }
.plot-color-dot.is-on { box-shadow: 0 0 0 2px var(--text); }
.plot-status-grid { display: grid; grid-template-columns: repeat(2, auto); gap: 4px; }
.plot-status-grid .tag-chip { justify-content: flex-start; }

/* 유형별·상태별·회차별: 열은 분류(폭이 모자라면 다음 줄로), 열 안에서 폴더별로 묶음 */
.plot-tools { align-items: center !important; }
.plot-cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.plot-cols .plot-act { flex: 1 1 260px; max-width: none; }
.plot-cols.is-by .plot-act-head { justify-content: space-between; padding: 4px 4px 0; }
.plot-cols.is-readonly .plot-card { cursor: default; }
.plot-act.is-drop { outline: 1px dashed var(--primary); outline-offset: 2px; }
.plot-sub { display: flex; flex-direction: column; gap: 4px; }
.plot-sub + .plot-sub { margin-top: 6px; }
.plot-sub-head { display: flex; align-items: center; gap: 4px; padding: 0 2px; color: var(--muted); font-size: calc(0.78rem + var(--fs-add)); font-weight: 700; }
.plot-sub-head .icon { width: 14px; height: 14px; color: var(--primary); }
@media (max-width: 767px) { .plot-type-pair { grid-template-columns: 1fr; gap: 8px; } }
.post-bar .btn.is-on { border-color: var(--primary); background: var(--active-bg); color: var(--primary); }