/* 하루녹음 화면. 폴드 접힘(좁은 화면) 1단, 펼침(600px 이상) 2단. */
:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --text: #1b1f24;
  --muted: #5d6673;
  --line: #d9dee5;
  --accent: #1f6feb;
  --accent-text: #ffffff;
  --bad: #b3261e;
  --active: #e8f0fe;
  --warn: #b26a00;
  --ok: #1a7f37;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111418;
    --card: #1a1f25;
    --text: #e6e9ee;
    --muted: #9aa4b1;
    --line: #2d343d;
    --accent: #4c8dff;
    --accent-text: #0b1220;
    --bad: #ff8a80;
    --active: #1f2d44;
    --warn: #f0b050;
    --ok: #5fd07a;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
[hidden] { display: none !important; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.logo { height: 26px; width: auto; }
.org-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who { display: flex; align-items: center; gap: 10px; color: var(--muted); white-space: nowrap; }

.notice {
  margin: 10px 14px 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}

.gate { max-width: 420px; margin: 48px auto; padding: 0 16px; text-align: center; }
.gate h1 { font-size: 20px; }

/* 폴드 접힘(좁은 화면): 1단 — 재생 막대는 위에 붙어 있고(문장을 누르면 곧바로 들림) 그 아래 타임라인.
   펼침(600px 이상): 2단 — 왼쪽 타임라인(따로 스크롤), 오른쪽 재생·목록·올리기·설정. */
.layout {
  display: grid;
  gap: 12px;
  padding: 12px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "search" "truth" "compare" "player" "timeline" "list" "calendar" "events" "drafts" "numbers" "suspects" "learn" "usage" "spend" "engines" "scores" "upload" "settings";
}
@media (max-width: 599px) {
  .area-player { position: sticky; top: 0; z-index: 2; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
  .area-player h2 { display: none; }
}
@media (min-width: 600px) {
  .layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-areas:
      "search search"
      "compare compare"
      "timeline player"
      "timeline truth"
      "timeline list"
      "timeline calendar"
      "timeline events"
      "timeline drafts"
      "timeline numbers"
      "timeline suspects"
      "timeline learn"
      "timeline usage"
      "timeline spend"
      "timeline engines"
      "timeline scores"
      "timeline upload"
      "timeline settings";
    grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto 1fr;
    align-items: start;
  }
  .area-timeline { max-height: calc(100vh - 90px); overflow: auto; position: sticky; top: 12px; }
  .area-list { max-height: 45vh; overflow: auto; }
}
.area-search { grid-area: search; background: linear-gradient(135deg, var(--active) 0%, var(--card) 140%); border-color: var(--accent); }
.area-search h2 { margin: 0 0 2px; }
.area-search .search-sub { margin: 0 0 10px; }
.area-search .search-form input[type="search"] { font-size: 16px; padding: 10px 12px; }
.area-search .search-form button[type="submit"] { min-height: 40px; padding: 0 18px; font-weight: 700; }
.area-player { grid-area: player; }
.area-timeline { grid-area: timeline; padding-top: 0; }
.area-list { grid-area: list; }
.area-upload { grid-area: upload; }
.area-numbers { grid-area: numbers; }
/* 고칠 것 모음(2026-10-09): 넓은 화면에서는 재생 아래(왼쪽 타임라인을 보며 고친다) */
.area-truth { grid-area: truth; border-color: var(--accent); }
.area-truth summary { cursor: pointer; font-size: 17px; font-weight: 700; }
.truth-progress { color: var(--accent); font-size: 14px; margin-left: 6px; }
.truth-guide { margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
.truth-list .truth-why { margin: 0; font-size: 13px; }
.truth-item.done { opacity: 0.75; }
.truth-state { border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; }
.truth-state.done { border-color: #2e7d32; color: #2e7d32; }
.truth-state.stale { border-color: var(--bad); color: var(--bad); }
.truth-actions { margin-top: 10px; align-items: center; }
.tl-rec .truth-ctl { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tl-rec .truth-tag { border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; padding: 0 8px; font-weight: 700; }
.tl-rec .truth-tag.done { border-color: #2e7d32; color: #2e7d32; }
.tl-rec .truth-ctl button { min-height: 28px; padding: 2px 8px; }
.tl-rec.flash { animation: segFlash 1.2s ease-in-out 3; }
@media (prefers-color-scheme: dark) {
  .truth-state.done, .tl-rec .truth-tag.done { border-color: #81c784; color: #81c784; }
}
/* 정답 도우미(2026-10-09): 여러 엔진으로 미리 받아쓰기 + 엔진과 다른 곳 */
.truth-engines { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.truth-engines .te-title { margin: 0 0 4px; font-size: 15px; }
.te-pick-row { margin-top: 8px; align-items: center; gap: 8px; flex-wrap: wrap; }
.te-msg, .te-status { white-space: pre-line; font-size: 13px; line-height: 1.5; margin: 8px 0 0; }
.te-msg.bad { color: var(--bad); }
.te-panel { margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.te-panel .te-summary { margin: 4px 0; font-size: 14px; }
.te-panel .te-engines-line { margin: 0; font-size: 12px; }
.te-showall { font-size: 13px; display: inline-flex; gap: 4px; align-items: center; }
.te-rows { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.te-row { border: 1px solid var(--accent); border-radius: 8px; padding: 6px 8px; }
.te-row.agree { opacity: 0.55; border-color: var(--line); }
.te-row.resolved { border-color: #2e7d32; }
.te-row.extra { border-style: dashed; }
.te-row-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.te-row-head .play { min-height: 28px; padding: 2px 8px; }
.te-tag { border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; font-size: 12px; }
.te-tag.diff { border-color: var(--accent); color: var(--accent); }
.te-tag.ok { border-color: #2e7d32; color: #2e7d32; }
.te-ours, .te-alt { margin: 6px 0 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; overflow-wrap: anywhere; }
.te-who { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--accent); min-width: 64px; }
.te-ours .te-who { color: inherit; }
.te-alt-text { flex: 1 1 200px; }
.te-pick { min-height: 28px; padding: 2px 8px; }
.te-note { margin: 4px 0 0; font-size: 12px; }
.te-acts { margin-top: 6px; gap: 6px; }
.te-acts button { min-height: 28px; padding: 2px 8px; }
@media (prefers-color-scheme: dark) {
  .te-row.resolved { border-color: #81c784; }
  .te-tag.ok { border-color: #81c784; color: #81c784; }
}
.area-suspects { grid-area: suspects; }
.area-learn { grid-area: learn; }
.area-events { grid-area: events; }
.area-calendar { grid-area: calendar; }
.area-drafts { grid-area: drafts; }
.area-usage { grid-area: usage; }
.area-spend { grid-area: spend; }
.area-engines { grid-area: engines; }
.area-compare { grid-area: compare; }
.area-scores { grid-area: scores; }
.num-count { color: var(--bad); }
.num-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 60vh; overflow: auto; }
.num-item { padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.num-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.num-head .when { color: var(--text); font-weight: 600; }
.num-preview { font-size: 13px; line-height: 1.45; margin: 0; padding-left: 10px; border-left: 3px solid var(--line); }
.num-preview .num-who { color: var(--muted); margin-right: 4px; }
.num-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.num-form input { width: 160px; }
.num-form .msg { font-size: 12px; }
.area-settings { grid-area: settings; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  min-width: 0;
}
.card h2 { font-size: 16px; margin: 0 0 8px; }
.muted { color: var(--muted); font-size: 13px; }
.meta { margin: 0 0 8px; color: var(--muted); }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.row label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.row label.inline { flex-direction: row; align-items: center; gap: 6px; }
.row label.grow { flex: 1 1 200px; }
.row label.grow input { width: 100%; }

input, select, button {
  font: inherit;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  min-height: 36px;
}
button { cursor: pointer; }
button:disabled { opacity: 0.5; cursor: default; }
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
button.link { border: 0; background: none; color: var(--accent); padding: 4px; min-height: 0; }

audio { width: 100%; }
progress { flex: 1 1 160px; height: 10px; }
.msg { min-height: 1.5em; margin: 4px 0 0; }
.msg.bad { color: var(--bad); }

.list { list-style: none; margin: 8px 0; padding: 0; }
.list li + li { border-top: 1px solid var(--line); }
.item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 4px 10px;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 8px;
  padding: 8px 6px;
  background: none;
}
.item.active { background: var(--active); }
.item .when { font-variant-numeric: tabular-nums; font-weight: 600; }
.item .info { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { font-size: 12px; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--line); }
.badge.call { border-color: #2e7d32; }
.badge.import { border-color: #8e6c00; }

.name-edit summary { cursor: pointer; font-size: 13px; color: var(--muted); }

/* ── 타임라인 ── */
.tl-head { position: sticky; top: 0; z-index: 1; background: var(--card); padding-top: 12px; border-bottom: 1px solid var(--line); }
.tl-top h2 { margin: 0 auto 0 0; }
.tl-month { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 5.5em; text-align: center; }
.tl-days { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: thin; }
.tl-day {
  display: grid;
  gap: 0;
  flex: 0 0 auto;
  text-align: center;
  padding: 4px 8px;
  min-height: 0;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.3;
}
.tl-day b { font-size: 15px; }
.tl-day .sub { color: var(--muted); }
.tl-day.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.tl-day.on .sub { color: inherit; }
.tl-status { margin: 0 0 8px; }
.tl-status .warn { color: var(--bad); font-weight: 600; }
.tl-date { font-weight: 700; margin: 10px 0 4px; }
.tl-list { list-style: none; margin: 0; padding: 0; }
.tl-rec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 12px;
  padding: 6px 4px;
  border-top: 2px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.tl-rec.cont { margin-top: 4px; border-top-style: dashed; border-top-width: 1px; }
.tl-rec .when { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.tl-rec .play { min-height: 28px; padding: 2px 8px; }
.tl-rec .state { border-radius: 999px; padding: 0 8px; border: 1px solid var(--line); }
.tl-rec .state.failed { color: var(--bad); border-color: var(--bad); }
.tl-rec .state.working { border-color: var(--accent); color: var(--accent); }
.tl-rec button.retry { min-height: 28px; padding: 2px 8px; }
.tl-seg { margin: 0; }
.tl-seg .seg-main {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 2px 8px;
  align-items: baseline;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 6px;
  padding: 5px 4px;
  background: none;
  min-height: 0;
}
.tl-seg .seg-main:hover { background: var(--active); }
.tl-seg.playing .seg-main { background: var(--active); box-shadow: inset 3px 0 0 var(--accent); }
.tl-seg .t { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-seg .who { font-size: 12px; font-weight: 700; min-width: 2.2em; }
.tl-seg .who.me { color: var(--accent); }
.tl-seg .who.me-unsure { color: var(--accent); opacity: 0.7; }
.tl-seg .who.other { color: #2e7d32; }
.tl-seg .who.unknown { color: var(--muted); }
.tl-seg .text { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) {
  .tl-seg .who.other { color: #81c784; }
}
@media (max-width: 380px) {
  .tl-seg .seg-main { grid-template-columns: auto 1fr; }
  .tl-seg .t { grid-column: 1 / -1; }
}

.workers-in-settings { padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.workers-in-settings h3 { margin: 0 0 4px 0; font-size: 15px; font-weight: 700; }
.workers-in-settings .muted { margin: 0 0 12px 0; }
.settings { display: grid; gap: 8px; margin-top: 8px; }
.settings label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
details summary { cursor: pointer; font-weight: 700; }
.contacts-in-settings { padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.contacts-in-settings h3 { margin: 0 0 4px 0; font-size: 15px; font-weight: 700; }
.contacts-in-settings h4 { margin: 12px 0 4px 0; font-size: 14px; }
.contacts-in-settings .muted { margin: 0 0 8px 0; }
.called-list { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow: auto; }
.called-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.called-list .phone { font-variant-numeric: tabular-nums; min-width: 118px; }
.called-list .calls { color: var(--muted); }
.who-chip { border: 1px solid var(--line); border-radius: 999px; padding: 0 10px; min-height: 26px; background: var(--card); color: var(--text); font-weight: 600; }
.who-chip.noname { color: var(--muted); font-weight: 400; }
.dir { color: var(--muted); font-size: 12px; }
.name-edit-inline { display: inline-flex; gap: 4px; align-items: center; }
.name-edit-inline input { width: 130px; min-height: 26px; }
.name-edit-inline button { min-height: 26px; padding: 0 8px; }
.tl-seg { display: flex; align-items: flex-start; gap: 2px; }
.tl-seg .seg-main { flex: 1; }
.tl-seg .seg-edit { flex: none; min-height: 26px; padding: 0 6px; border: 0; background: none; color: var(--muted); opacity: 0.45; }
.tl-seg:hover .seg-edit, .tl-seg .seg-edit:focus { opacity: 1; }
.tl-seg .edited-mark { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; margin-left: 6px; }
.seg-editor { flex: 1; display: grid; gap: 6px; padding: 6px 4px; border: 1px solid var(--accent); border-radius: 8px; margin: 2px 0; }
.seg-editor textarea { width: 100%; min-height: 3.2em; font: inherit; resize: vertical; }
.seg-editor .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.seg-editor .row button { min-height: 28px; padding: 2px 10px; }
.seg-editor .role-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.seg-editor .orig { font-size: 12px; color: var(--muted); margin: 0; }

/* ── 여러 날 검색(1-4a) ── 결과를 보는 동안 하루 타임라인은 숨긴다 */
.search-form { margin: 8px 0 4px; }
.search-form input[type="search"] { flex: 1 1 14em; min-width: 0; }
.searching #tl-date, .searching #tl-empty, .searching #tl-list, .searching #tl-more { display: none !important; }
.search-head { align-items: center; }
.search-head .tl-date { margin-right: auto; }
.search-note { font-size: 13px; padding: 6px 0 2px; }
.tl-seg mark { background: #ffe58a; color: inherit; border-radius: 3px; padding: 0 1px; }
@media (prefers-color-scheme: dark) {
  .tl-seg mark { background: #6b5a14; }
}

/* 고친 글자로 배우기(1-8) */
.learn-list { list-style: none; margin: 4px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.learn-list li { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line, #d9dee3); border-radius: 8px; padding: 6px 10px; }
.learn-list .learn-text { flex: 1; word-break: keep-all; }
.tl-seg .text.auto-fixed { text-decoration: underline dotted; text-underline-offset: 3px; }
.edited-mark.auto-mark { background: #e8f1fb; color: #1a4f8b; }
/* AI 문맥 고치기(2026-10-09): 'AI 고침' 표시를 누르면 원래 받아쓴 글과 번갈아 보인다 */
.tl-seg .text.ai-fixed { text-decoration: underline dotted #7a4fb5; text-underline-offset: 3px; }
.tl-seg .text.ai-fixed.ai-original { text-decoration: none; color: var(--muted); font-style: italic; }
.edited-mark.ai-mark { background: #f1eafb; color: #5b2f97; cursor: pointer; }

/* 대화 분석(1-7): 분류 칸, 확인 패널, 약속 후보, 매물등록대기, AI 사용량 */
.list li.az-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 6px; align-items: center; padding: 2px 0; }
.list li.az-row .az-box { grid-column: 2; padding: 0 6px 6px; }
.az-check { min-height: 0; width: 18px; height: 18px; padding: 0; }
.az-bar { align-items: center; }
.az-bar label { flex-direction: row; align-items: center; gap: 6px; }
.az-box { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; min-width: 0; }
.az-box .az-cat { min-height: 28px; padding: 2px 8px; }
.az-box .az-summary { color: var(--muted); overflow-wrap: anywhere; flex: 1 1 12em; }
.az-box .az-make, .az-box .az-again { min-height: 28px; padding: 2px 10px; }
.az-box .az-again { border: 0; background: none; color: var(--accent); }
.az-state { border-radius: 999px; padding: 0 8px; border: 1px solid var(--line); }
.az-state.working { border-color: var(--accent); color: var(--accent); }
.az-state.failed { border-color: var(--bad); color: var(--bad); }
.az-mark { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; }
.tl-rec .az-box { flex-basis: 100%; }

.az-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  max-height: 70vh; overflow: auto;
  background: var(--card); border-top: 2px solid var(--accent);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.az-panel h3 { margin: 0 0 6px; font-size: 16px; }
@media (min-width: 600px) { .az-panel { left: auto; right: 12px; bottom: 12px; width: 420px; border: 2px solid var(--accent); border-radius: 12px; } }
.az-lines { list-style: none; margin: 4px 0 8px; padding: 0; }
.az-lines li { padding: 2px 0; overflow-wrap: anywhere; }

.az-tabs button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.az-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow: auto; }
.az-item { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: grid; gap: 6px; min-width: 0; }
.az-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.az-fields input { flex: 1 1 9em; min-width: 0; }
.az-fields.money .az-money { flex: 1 1 7em; display: flex; flex-direction: column; font-size: 12px; color: var(--muted); }
.az-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.az-badges:empty { display: none; }
.az-quote { margin: 0; padding-left: 10px; border-left: 3px solid var(--line); font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.az-item .row { margin: 0; }
.area-usage progress { width: 100%; }
.az-settings { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.az-settings .row label { flex-direction: row; align-items: center; gap: 6px; }
.az-settings #az-limit { width: 6em; }
.az-auto { border: 1px solid var(--line); border-radius: 10px; margin: 0 0 8px; padding: 6px 10px 8px; min-width: 0; }
.az-auto legend { font-weight: 700; padding: 0 4px; }
.az-auto label { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 6px 0; }
.az-auto input { min-height: 0; padding: 0; width: 20px; height: 20px; flex: none; }
.az-auto p { margin: 4px 0 0; overflow-wrap: anywhere; }

/* 유료 엔진·키, 엔진 설정, 비용 현황 */
.area-spend h3, .area-engines h3 { margin: 12px 0 4px; font-size: 15px; font-weight: 700; }
.area-spend .az-tabs { margin-top: 0; }
.pd-total { font-size: 22px; font-weight: 700; margin: 4px 0; }
.pd-blocked { margin: 4px 0; padding: 6px 10px; border: 1px solid var(--bad); border-radius: 8px; color: var(--bad); font-weight: 700; }
.pd-meter { margin: 8px 0; }
.pd-meter-text { margin: 0 0 3px; font-size: 13px; overflow-wrap: anywhere; }
.pd-bar { height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; }
.pd-fill { height: 100%; width: 0; background: var(--accent); }
.pd-meter.warn .pd-fill { background: var(--warn); }
.pd-meter.blocked .pd-fill { background: var(--bad); }
.pd-meter.warn .pd-meter-text { color: var(--warn); }
.pd-meter.blocked .pd-meter-text { color: var(--bad); font-weight: 600; }
.pd-table-wrap { overflow-x: auto; max-width: 100%; }
.pd-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.pd-table th, .pd-table td { text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pd-table th:first-child, .pd-table td:first-child { text-align: left; white-space: normal; min-width: 7em; }
.pd-table th { color: var(--muted); font-weight: 600; }
.pd-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; max-height: 40vh; overflow: auto; }
.pd-days li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; gap: 6px; align-items: center; font-size: 13px; }
.pd-days .pd-day-bar { height: 10px; border-radius: 5px; background: var(--accent); min-width: 2px; }
.pd-days .pd-day-amt { text-align: right; font-variant-numeric: tabular-nums; }
.pd-engine { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 8px 0; display: grid; gap: 4px; min-width: 0; }
.pd-engine h3 { margin: 0; }
.pd-engine-status { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.pd-engine-status .on { color: var(--ok); font-weight: 600; }
.pd-engine-status .off { color: var(--muted); }
.pd-engine-status .bad { color: var(--bad); }
.pd-fields { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.pd-fields label { flex: 1 1 12em; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.pd-fields input { width: 100%; min-width: 0; }
.pd-engine .row { margin: 4px 0 0; }
.pd-engine .msg { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.pd-route { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line); min-width: 0; }
.pd-route b { font-size: 14px; }
.pd-route-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-route-picks label { flex: 1 1 11em; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.pd-route-picks select { width: 100%; min-width: 0; }
.pd-warn { margin: 6px 0; padding: 6px 10px; border: 1px solid var(--warn); border-radius: 8px; color: var(--warn); font-size: 13px; }
.pd-preview { margin: 6px 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
#pd-import-ok-wrap { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0; font-size: 13px; }
#pd-import-ok-wrap[hidden] { display: none; }
.pd-settings .row label { flex-direction: column; align-items: stretch; gap: 2px; }
.pd-settings .row input { width: 9em; }
.pd-price { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 8px; margin: 6px 0; }
.pd-price label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.pd-price input { width: 9em; }
.pd-price p { flex: 1 1 100%; margin: 0; }
.area-engines h4 { margin: 10px 0 2px; font-size: 14px; }

/* 엔진 비교: 통화 옆 버튼, 실행 패널, 나란히 보기, 성적표 */
:root { --diff-soft: #ffe2c2; --diff-strong: #ffb066; --best: #1a7f37; }
@media (prefers-color-scheme: dark) {
  :root { --diff-soft: #5a3a14; --diff-strong: #a8601a; --best: #5fd07a; }
}
.cmp-open { min-height: 28px; padding: 2px 10px; font-size: 13px; }
.list li.az-row .cmp-open { grid-column: 2; justify-self: start; margin: 0 0 6px 6px; }
.cmp-panel h3 { margin: 0 0 6px; font-size: 16px; }
.cmp-picks { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; }
.cmp-pick { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; min-width: 0; }
.cmp-pick input { margin-top: 3px; min-height: 0; flex: none; }
.cmp-pick.off { opacity: 0.65; }
.cmp-pick .cmp-pick-text { min-width: 0; overflow-wrap: anywhere; }
.cmp-pick .cmp-pick-why { display: block; font-size: 12px; color: var(--muted); }
.cmp-sum { margin: 6px 0; font-weight: 600; overflow-wrap: anywhere; }
.cmp-import { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; margin: 6px 0; }
.cmp-import input { min-height: 0; flex: none; margin-top: 3px; }
.cmp-prog { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; }
.cmp-prog li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; overflow-wrap: anywhere; }

.cmp-top h2 { margin: 0 auto 0 0; }
.cmp-status { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-status li { border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; font-size: 12px; overflow-wrap: anywhere; }
.cmp-status li.working { border-color: var(--accent); color: var(--accent); }
.cmp-status li.failed { border-color: var(--bad); color: var(--bad); }
.cmp-only { margin: 4px 0; font-size: 13px; }
.cmp-only input { min-height: 0; }
.cmp-legend { margin: 2px 0 6px; }
.cmp-rows { list-style: none; margin: 0; padding: 0; }
.cmp-row { border-top: 1px solid var(--line); padding: 8px 0; min-width: 0; }
.cmp-row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cmp-row-head .play { min-height: 26px; padding: 1px 8px; }
.cmp-cols { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) {
  .cmp-cols { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
}
.cmp-cell { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; min-width: 0; display: grid; gap: 4px; align-content: start; }
.cmp-cell.gold { border-color: var(--accent); background: var(--active); }
.cmp-cell-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.cmp-cell-head .primary-mark { font-weight: 400; border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; font-size: 11px; }
.cmp-vote { min-height: 24px; padding: 0 8px; font-size: 12px; }
.cmp-vote[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.cmp-text { overflow-wrap: anywhere; white-space: pre-wrap; margin: 0; }
.cmp-text.none { color: var(--muted); }
.cmp-diff { background: var(--diff-soft); color: inherit; border-radius: 3px; text-decoration: underline dotted; text-underline-offset: 3px; }
.cmp-chr { background: var(--diff-strong); font-weight: 700; border-radius: 2px; }

.sc-gold { font-weight: 700; margin: 4px 0; }
.sc-list { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 10px; }
.sc-item { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: grid; gap: 4px; min-width: 0; }
.sc-item h3 { margin: 0; font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.sc-best { font-size: 11px; font-weight: 600; color: var(--best); border: 1px solid var(--best); border-radius: 999px; padding: 0 8px; }
.sc-line { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.sc-bar { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.sc-fill { height: 100%; width: 0; background: var(--accent); min-width: 2px; }
.sc-na { color: var(--muted); }

.list-kind-summary { margin: 2px 0 4px; }
.list-kind-summary:empty { display: none; }

/* 문장 나누기(가상 분할) */
.tl-seg.split-part .seg-main { box-shadow: inset 3px 0 0 var(--line); }
.tl-seg.split-b .seg-main { margin-left: 14px; }
.tl-seg.split-part.playing .seg-main { box-shadow: inset 3px 0 0 var(--accent); }
.tl-seg .split-mark { background: #fff3d6; color: #7a4f00; border-color: #e6c778; }
.tl-seg .seg-unsplit { flex: none; align-self: center; min-height: 24px; padding: 0 8px; font-size: 12px; opacity: 0.6; }
.tl-seg:hover .seg-unsplit, .tl-seg .seg-unsplit:focus { opacity: 1; }
.seg-editor .hint { font-size: 12px; color: var(--muted); margin: 0; }
.seg-editor .split-panel { display: grid; gap: 6px; padding: 8px; border: 1px dashed var(--accent); border-radius: 8px; }
.seg-editor .split-panel p { margin: 0; overflow-wrap: anywhere; }
.tl-seg.flash .seg-main, .tl-seg.flash .seg-editor { animation: segFlash 1.2s ease-in-out 3; }
@keyframes segFlash { 50% { background: #ffe58a; } }
@media (prefers-color-scheme: dark) { .tl-seg .split-mark { background: #4a3a10; color: #f0d890; border-color: #7a6320; } }
@media (max-width: 420px) { .tl-seg.split-b .seg-main { margin-left: 6px; } .tl-seg .seg-unsplit { max-width: 7em; white-space: normal; } }

/* 일정 달력(2-1) */
.cal-head { justify-content: center; margin: 4px 0; }
.cal-head button { min-width: 40px; }
.cal-month { min-width: 7em; text-align: center; font-variant-numeric: tabular-nums; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-wd { text-align: center; font-size: 13px; color: var(--muted); padding: 3px 0; }
.cal-wd.sun { color: var(--bad); }
.cal-wd.sat { color: var(--accent); }
.cal-cell { min-height: 96px; min-width: 0; padding: 3px 3px 4px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; border: 1px solid var(--line); background: var(--card); border-radius: 6px; cursor: pointer; overflow: hidden; }
.cal-cell.other { opacity: 0.5; background: transparent; }
.cal-cell.selected { background: var(--active); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-daybtn { align-self: flex-start; min-height: 0; min-width: 1.8em; padding: 0 5px; border: 0; background: none; border-radius: 999px; font-size: 13px; line-height: 1.7; font-variant-numeric: tabular-nums; text-align: center; }
.cal-cell.sun .cal-daybtn { color: var(--bad); }
.cal-cell.sat .cal-daybtn { color: var(--accent); }
.cal-cell.today .cal-daybtn { background: var(--accent); color: var(--accent-text); font-weight: 700; }
.cal-chips { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-chip { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; min-height: 0; padding: 1px 4px; border: 1px solid transparent; border-left: 3px solid var(--ok); border-radius: 3px; background: color-mix(in srgb, var(--ok) 14%, var(--card)); font-size: 12px; line-height: 1.45; text-align: left; overflow: hidden; }
.cal-chip-time { flex: none; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 11px; }
.cal-chip-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip.manual { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--card)); }
.cal-chip.candidate { border: 1px dashed var(--muted); border-left: 3px dashed var(--muted); background: transparent; color: var(--muted); }
.cal-chip.off { border-left-color: var(--line); background: transparent; opacity: 0.55; }
.cal-chip.struck .cal-chip-title { text-decoration: line-through; }
.cal-chip-more { align-self: flex-start; min-height: 0; padding: 0 6px; border: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 700; }
@media (max-width: 480px) {
  .cal-grid { gap: 2px; }
  .cal-cell { min-height: 66px; padding: 2px 1px 3px; border-radius: 4px; }
  .cal-daybtn { font-size: 11px; padding: 0 3px; }
  .cal-chip { padding: 0 2px; gap: 0; font-size: 10px; border-left-width: 2px; }
  .cal-chip-time { display: none; }
  .cal-chip-more { font-size: 10px; padding: 0 2px; }
  .cal-wd { font-size: 11px; }
}
.cal-ev.is-focus { outline: 2px solid var(--accent); }
.cal-showall { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.cal-showall input { min-height: 0; width: 18px; height: 18px; padding: 0; }
.cal-day-title { margin: 8px 0 4px; font-size: 16px; }
.cal-ev-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cal-time { font-variant-numeric: tabular-nums; }
.cal-title { font-weight: 600; overflow-wrap: anywhere; }
.cal-ev.is-off .cal-title { text-decoration: line-through; color: var(--muted); }
.cal-ev .row { margin: 0; }
.badge.cal-manual { border-color: var(--accent); color: var(--accent); }
.badge.cal-confirmed { border-color: var(--ok); color: var(--ok); }
.badge.cal-candidate { border-color: var(--warn); color: var(--warn); }
.badge.cal-auto { border-color: var(--ok); color: var(--ok); }
.cal-form, .cal-voice { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.cal-form h3, .cal-voice h3 { margin: 0 0 4px; font-size: 15px; }
.cal-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cal-fields .cal-f { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); min-width: 0; }
.cal-fields .cal-f:nth-child(1), .cal-fields .cal-f:nth-child(5), .cal-fields .cal-f:nth-child(6) { grid-column: 1 / -1; }
.cal-fields input { width: 100%; min-width: 0; box-sizing: border-box; }
/* 반복·알림 칸(2-1 완성) */
.cal-fields select { width: 100%; min-width: 0; box-sizing: border-box; }
.cal-fields .cal-repeat-box, .cal-fields .cal-alert-box { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cal-fields .cal-repeat-box .cal-wd, .cal-fields .cal-alert-box > span, .cal-fields .cal-alert-box .cal-alerts { grid-column: 1 / -1; }
.cal-wd, .cal-alerts { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.cal-fields .cal-wd input, .cal-fields .cal-alerts input { width: auto; }
.badge.cal-repeat { background: var(--accent-soft, #e8f0fe); }
.cal-voice textarea { width: 100%; box-sizing: border-box; font: inherit; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; resize: vertical; }
.cal-pv-note { margin: 0; font-size: 13px; color: var(--muted); }
.cal-warn { margin: 0; color: var(--warn); font-size: 13px; }

/* 칸이 좁으면 시각은 접고 제목만 */
.cal-cell { container-type: inline-size; }
@container (max-width: 95px) { .cal-chip-time { display: none; } }