/* OPS Mail Desk 화면 스타일
   한 곳에서만 관리한다. index.html 안에 style 태그를 다시 만들지 않는다. */

:root {
  --ink: #1c2b3a;
  --ink-soft: #5a6b7c;
  --ink-faint: #8a99a8;
  --line: #dde4ea;
  --line-soft: #eef2f5;
  --bg: #f4f7f9;
  --panel: #ffffff;
  --accent: #1769e0;
  --accent-dark: #1155bb;
  --accent-soft: #eaf2fd;
  --danger: #c8442f;
  --danger-soft: #fdeeeb;
  --warn: #a36a00;
  --warn-soft: #fdf5e4;
  --ok: #1b7a52;
  --ok-soft: #e8f5ef;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(28, 43, 58, .08);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: "AppleSDGothicNeo-Regular", "Apple SD Gothic Neo", -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  word-break: keep-all;
}

h1, h2, h3 { margin: 0; font-weight: 700; }
h1 { font-size: 17px; }
h2 { font-size: 14px; }
h3 { font-size: 13px; }
p  { margin: 0; }
a  { color: var(--accent); }

button, input, select, textarea {
  font-family: inherit;
  font-size: 12px;
  color: var(--ink);
}

/* ---------------------------------------------------------------- 상단 */

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 0 0 58px;
  padding: 0 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.5px;
}

.brand strong { display: block; font-size: 14px; }
.brand small  { display: block; color: var(--ink-faint); font-size: 10px; }
/* 화면에 보이는 버전. 어느 판을 보고 있는지 사용자가 바로 알게 한다 */
.app-ver { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px;
           background: var(--line, #e5e7eb); color: var(--ink-faint);
           font-size: 10px; font-weight: 700; letter-spacing: .2px; vertical-align: 1px; }

.topbar nav { display: flex; gap: 4px; }

.nav-btn {
  padding: 7px 13px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  font-weight: 700;
  cursor: pointer;
}
.nav-btn:hover  { background: var(--line-soft); }
.nav-btn.active { background: var(--accent-soft); color: var(--accent-dark); }

.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.connection {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 11px;
}
.connection b { font-weight: 700; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.dot.off  { background: var(--ink-faint); }
.dot.warn { background: var(--warn); }

/* ---------------------------------------------------------------- 버튼 */

button.primary, button.secondary, button.ghost, button.danger {
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 14px;
  border: 1px solid transparent;
}
button.primary   { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover:not(:disabled) { background: var(--accent-dark); }
button.secondary { background: #fff; border-color: var(--line); color: var(--ink); }
button.secondary:hover:not(:disabled) { background: var(--line-soft); }
button.ghost     { background: transparent; border-color: transparent; color: var(--accent); padding: 4px 6px; }
button.ghost:hover { text-decoration: underline; }
button.danger    { background: #fff; border-color: #e6c4bd; color: var(--danger); }
button.danger:hover:not(:disabled) { background: var(--danger-soft); }
button.small     { padding: 5px 10px; font-size: 11px; }
button:disabled  { opacity: .5; cursor: default; }

.icon-btn {
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* ---------------------------------------------------------------- 본문 */

main { flex: 1; min-height: 0; }

.view { display: none; height: 100%; }
.view.active { display: block; }

.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 20px 0;
  padding: 11px 14px;
  border: 1px solid #e6d3a8;
  border-radius: var(--radius);
  background: var(--warn-soft);
  color: #6d4a05;
  font-size: 12px;
}
.banner button { margin-left: auto; }

.summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 20px;
}

/* 이름과 숫자를 한 줄에 나란히 둔다. 위아래로 쌓으면 카드가 두 배로 높아지고,
   그만큼 아래 왼쪽 메뉴가 밀려 한 화면에 안 들어온다(2026-09-09). */
.summary-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.summary-card span   { color: var(--ink-soft); font-size: 11px; }
.summary-card strong { font-size: 19px; letter-spacing: -.5px; line-height: 1.1; }
.summary-card.clickable { cursor: pointer; }
.summary-card.clickable:hover { border-color: var(--accent); }
.summary-card.alert  { border-color: #e8cac2; background: var(--danger-soft); }
.summary-card.alert strong { color: var(--danger); }

.workspace {
  display: grid;
  grid-template-columns: 208px minmax(340px, 1fr) minmax(460px, 1.35fr);
  gap: 12px;
  height: calc(100% - 84px);
  padding: 0 20px 14px;
}

/* --------------------------------------------------------------- 필터 */

.filters {
  overflow-y: auto;
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.filters h2 {
  padding: 0 6px;
  margin-bottom: 7px;
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: .5px;
}

.filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 9px;
  margin-bottom: 2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 12px;
  cursor: pointer;
}
.filter:hover  { background: var(--line-soft); }
.filter.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; }
.filter b { font-variant-numeric: tabular-nums; }
.filter.danger-filter.has-value { color: var(--danger); }

.aside-divider { height: 1px; margin: 12px 6px; background: var(--line); }

.aside-field {
  display: block;
  margin: 0 6px 9px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
}
.aside-field span { display: block; margin-bottom: 4px; }
.aside-field select,
.aside-field input {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-weight: 400;
}

.filter-reset {
  width: calc(100% - 12px);
  margin: 10px 6px 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

/* ----------------------------------------------------------- 업무 목록 */

.case-list-panel,
.detail-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.list-toolbar p { color: var(--ink-faint); font-size: 11px; }

.search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.search span  { color: var(--ink-faint); }
.search input { width: 150px; border: 0; outline: 0; }

.case-table-head,
.case-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 84px 74px 82px;
  gap: 10px;
  align-items: center;
  padding: 9px 16px;
}

.case-table-head {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 700;
}

.case-list { flex: 1; min-height: 0; overflow-y: auto; }

.case-row {
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.case-row:hover  { background: #fafcfe; }
.case-row.active { background: var(--accent-soft); }

.priority { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.priority.urgent { background: var(--danger); }
.priority.high   { background: var(--warn); }

.case-main { min-width: 0; }
.case-main strong {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.case-main span {
  display: block;
  overflow: hidden;
  color: var(--ink-faint);
  font-size: 10.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tag-auto {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 9.5px;
  font-weight: 800;
}

.badge {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--line-soft);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
.badge.new      { background: var(--accent-soft); color: var(--accent-dark); }
.badge.approval { background: var(--danger-soft); color: var(--danger); }
.badge.waiting  { background: var(--warn-soft); color: var(--warn); }
.badge.partner  { background: #efe9fb; color: #5b3fa8; }
.badge.confirmed, .badge.completed { background: var(--ok-soft); color: var(--ok); }

.assignee, .deadline { color: var(--ink-soft); font-size: 11px; }
.deadline.overdue { color: var(--danger); font-weight: 700; }

.empty-list {
  padding: 30px 16px;
  color: var(--ink-faint);
  font-size: 12px;
  text-align: center;
}

.list-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 11px;
}

/* ----------------------------------------------------------- 상세 화면 */

.detail-panel.empty { align-items: center; justify-content: center; }

.empty-state { color: var(--ink-faint); text-align: center; }
.empty-state .mail-illustration { font-size: 34px; }
.empty-state h2 { margin: 8px 0 4px; color: var(--ink-soft); }

.detail-head {
  flex: 0 0 auto;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}
.detail-kicker {
  display: flex;
  gap: 8px;
  margin-bottom: 3px;
  color: var(--ink-faint);
  font-size: 10.5px;
}
.detail-kicker span + span::before { content: "· "; }
.detail-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.detail-head h2 { font-size: 15px; line-height: 1.35; }
.detail-actions { display: flex; gap: 6px; flex: 0 0 auto; }

.status-strip {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: end;
  padding: 9px 18px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}
.status-strip label { min-width: 0; }
.status-strip label > span {
  display: block;
  margin-bottom: 3px;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 700;
}
.status-strip input,
.status-strip select {
  width: 100%;
  height: 30px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
}
.status-strip button { height: 30px; padding: 4px 12px; }

.detail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 24px; }

.meta-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfd;
}
.meta-item small  { display: block; color: var(--ink-faint); font-size: 10px; }
.meta-item strong { display: block; font-size: 12px; word-break: break-all; }

.thread-title {
  margin: 4px 0 9px;
  color: var(--ink-soft);
  font-size: 11px;
}

.message-card {
  width: 93%;
  padding: 12px 15px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.message-card.inbound  { margin-right: 7%; }
.message-card.outbound { margin-left: 7%; background: #f7fafd; border-color: #d9e5f1; }

.message-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.message-top strong { font-size: 12px; }
.message-top span   { color: var(--ink-faint); font-size: 10.5px; }

.message-content {
  white-space: pre-wrap;
  font-size: 12.5px;
  line-height: 1.65;
}

.message-translation {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
}
.message-translation small { display: block; margin-bottom: 3px; color: var(--accent); font-size: 10px; font-weight: 700; }
.message-translation p { white-space: pre-wrap; color: #33526f; line-height: 1.65; }

.file-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
}
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  color: var(--ink-soft);
  font-size: 10.5px;
  text-decoration: none;
}
.file-chip:hover { border-color: var(--accent); color: var(--accent); }

.warn-line {
  margin-top: 7px;
  padding: 6px 8px;
  border-radius: 5px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 10.5px;
  line-height: 1.45;
}

.file-chip.warn { border-color: #e0c48f; color: var(--warn); }

/* 관리자가 아니면 설정 화면에서 바꾸는 기능을 감춘다 */
.read-only .inline-form,
.read-only .data-table td.actions,
.read-only .switch-row input,
.read-only #settingsSaveBtn { display: none; }

.delivery {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 10px;
  font-weight: 700;
}

.delivery.danger { background: var(--danger-soft); color: var(--danger); }
.message-card.failed { border-color: #e6c4bd; background: #fffaf9; }

.message-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
}

/* ----------------------------------------------------- AI · 회사 카드 */

.insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border: 1px solid #c9dcf1;
  border-radius: var(--radius);
  background: linear-gradient(150deg, #fff, #f6fafe);
}
.insight-grid > section:only-child { grid-column: 1 / -1; }
.insight-grid > section + section { padding-left: 16px; border-left: 1px solid var(--line); }

.ai-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.ai-title strong { font-size: 12px; }
.ai-title small  { display: block; color: var(--ink-faint); font-size: 10px; }

.ai-summary { white-space: pre-wrap; font-size: 12px; line-height: 1.65; }

.section-label {
  margin: 11px 0 5px;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 800;
}

.extracted-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
}
.extracted-grid small  { display: block; color: var(--ink-faint); font-size: 10px; }
.extracted-grid strong { display: block; font-size: 11.5px; word-break: break-all; }

.ai-pending {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ai-pending small { display: block; color: var(--ink-faint); }

.company-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.company-title strong { display: block; font-size: 12px; }
.company-title span   { display: block; color: var(--ink-faint); font-size: 10px; }

.service-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0; }
.service-tags span {
  padding: 3px 8px;
  border-radius: 12px;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 10px;
}

.partner-hint {
  margin: 9px 0;
  padding: 9px 11px;
  border-radius: 6px;
  background: #f2f8f5;
  font-size: 11px;
  line-height: 1.55;
}
.partner-hint strong { display: block; margin-bottom: 2px; color: var(--ok); }

details { font-size: 10.5px; color: var(--ink-soft); }
details summary { cursor: pointer; }
details ul { padding-left: 17px; line-height: 1.6; }

.approval-card {
  padding: 13px 15px;
  margin-bottom: 14px;
  border: 1px solid #e6c4bd;
  border-radius: var(--radius);
  background: var(--danger-soft);
}
.approval-card h3 { margin-bottom: 8px; color: var(--danger); }
.approval-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid #f0d6d0;
}
.approval-item strong { display: block; font-size: 12px; }
.approval-item span   { display: block; color: var(--ink-soft); font-size: 11px; }
.approval-item div:last-child { display: flex; gap: 6px; flex: 0 0 auto; }

.event-log { margin-top: 6px; }
.event-log li {
  display: flex;
  gap: 10px;
  padding: 4px 0;
  color: var(--ink-soft);
  font-size: 11px;
  list-style: none;
}
.event-log time { flex: 0 0 108px; color: var(--ink-faint); }
.event-log ul { padding: 0; margin: 0; }

/* -------------------------------------------------------- 목록형 화면 */

.content-view { height: 100%; overflow-y: auto; padding: 16px 20px 30px; }

.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.page-heading p { color: var(--ink-soft); font-size: 12px; }
.eyebrow { color: var(--ink-faint); font-size: 10px; font-weight: 800; letter-spacing: 1px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 12px;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.card h3 { margin: 7px 0 3px; }
.card p  { color: var(--ink-soft); font-size: 11.5px; }
.card .body-preview {
  max-height: 84px;
  overflow: hidden;
  margin-top: 7px;
  color: var(--ink-faint);
  font-size: 11px;
  white-space: pre-wrap;
}
.card-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 11px;
}
.card-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  color: var(--ink-faint);
  font-size: 10px;
}
.asset-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 10px;
  font-weight: 800;
}

/* ------------------------------------------------------------ 설정 화면 */

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px;
  align-items: start;
}

/* ── 설정 화면 ─────────────────────────────────────────────────────────
   왼쪽에서 고르면 오른쪽에 그 내용만 나온다.
   ⚠️ 화면 전체가 스크롤되지 않게 한다. 넘치는 것은 **오른쪽 칸 안에서만** 스크롤한다.
      예전에는 일곱 묶음이 통째로 늘어서 있어 한참 내려야 원하는 설정이 나왔다. */
.settings-shell {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  /* ⚠️ 화면 폭을 다 쓰지 않는다. 넓은 모니터에서 입력칸이 통째로 늘어나면
     글자와 칸이 멀어져 한눈에 안 들어온다. 읽기 좋은 폭에서 멈춘다. */
  max-width: 1040px;
  height: calc(100vh - 210px);
  min-height: 380px;
}
/* 머리글도 같은 폭으로 맞춘다. 아래 상자만 좁으면 어긋나 보인다 */
#settingsView .page-heading { max-width: 1040px; }

.settings-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfe;
  height: 100%;
  overflow-y: auto;
}
.settings-menu button {
  padding: 9px 11px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink-soft, #52606d);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.settings-menu button:hover { background: var(--line-soft, #eef2f7); }
.settings-menu button.on {
  background: #12325c;
  color: #fff;
  font-weight: 600;
}

.settings-panels { height: 100%; overflow-y: auto; padding-right: 2px; }
/* 한 번에 하나만 보여 준다 */
.settings-panels .settings-card { display: none; margin: 0; }
.settings-panels .settings-card.on { display: flex; }

.settings-card {
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
/* 담당자 카드는 이름·메일·부서·배정·삭제 5열이라 한 칸이면 버튼이 잘린다.
   수신 계정 카드도 접속 확인·비밀번호·삭제 3개 버튼이 nowrap 으로 한 줄에 묶여 같은 문제가 있었다.
   화면이 넓을 때만 두 칸을 쓰게 해서 좁은 화면에서는 그대로 접히게 둔다. */
.settings-card.wide { grid-column: span 2; }
@media (max-width: 1100px) { .settings-card.wide { grid-column: auto; } }

/* 좁은 화면에서 두 칸을 못 쓰게 되면 표가 다시 넘친다.
   그때는 잘라 버리지 말고 카드 안에서 가로로 밀어 볼 수 있게 한다. */
.settings-card { overflow-x: auto; }

.settings-card > h2 { margin-bottom: 3px; }
.settings-card > p  { margin-bottom: 12px; color: var(--ink-soft); font-size: 11.5px; }

.data-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.data-table th {
  padding: 6px 6px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 10px;
  text-align: left;
}
.data-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.data-table td.actions { text-align: right; white-space: nowrap; }
.data-table .muted { color: var(--ink-faint); font-size: 10.5px; }

.switch-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.switch-row:last-of-type { border-bottom: 0; }
.switch-row input { margin-top: 3px; }
.switch-row strong { display: block; font-size: 12px; }
.switch-row small  { display: block; color: var(--ink-soft); font-size: 11px; }

.inline-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.inline-form label { display: block; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.inline-form label span { display: block; margin-bottom: 3px; }
.inline-form input,
.inline-form select,
.inline-form textarea {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-weight: 400;
}
.inline-form .full { grid-column: 1 / -1; }

.detect-box {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfd;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.55;
}
.detect-box.found { border-color: #b9d9c8; background: var(--ok-soft); color: var(--ok); }
.detect-box.miss  { border-color: #e6d3a8; background: var(--warn-soft); color: var(--warn); }
.detect-box b { display: block; color: var(--ink); font-weight: 700; }
.detect-box small { display: block; margin-top: 3px; color: var(--ink-soft); font-weight: 400; }

.manual-toggle {
  display: flex !important;
  align-items: center;
  gap: 7px;
  font-weight: 400;
  font-size: 11.5px;
}
.manual-toggle input { width: auto; }
.manual-toggle span { margin: 0 !important; }

.inline-form label em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-faint);
}

.result-line {
  padding: 9px 11px;
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.5;
}
.result-line.ok   { background: var(--ok-soft); color: var(--ok); }
.result-line.fail { background: var(--danger-soft); color: var(--danger); }

.hint {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--line-soft);
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.55;
}
.hint code {
  padding: 1px 4px;
  border-radius: 3px;
  background: #fff;
  font-size: 11px;
}

/* -------------------------------------------------------------- 대화상자 */

dialog.dialog {
  width: min(560px, 92vw);
  padding: 0;
  border: 0;
  border-radius: 11px;
  box-shadow: 0 18px 48px rgba(20, 34, 48, .26);
}
dialog.dialog.wide { width: min(720px, 94vw); }
/* 회신 작성이 바탕, 견적 계산이 그 위에 뜨므로 폭에 위계를 준다 */
dialog#replyDialog.dialog { width: min(880px, 94vw); }
dialog#quoteDialog.dialog { width: min(640px, 92vw); }
dialog::backdrop { background: rgba(22, 34, 46, .35); }

/* 안내표 미리보기 — A4 를 그대로 보여 줘야 해서 가장 넓다.
   화면 높이에 맞춰 늘어나되, 낮은 화면에서도 버튼줄이 밀려나지 않게 상한을 둔다. */
dialog#cardPreviewDialog.dialog { width: min(1000px, 96vw); padding: 18px 20px 16px; }
.preview-lead { margin: -6px 0 10px; color: var(--ink-faint); font-size: 11px; }
.preview-frame {
  height: min(72vh, 900px);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper, #f4f5f7);
}
.preview-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

dialog form { padding: 18px 20px 20px; }

.dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

dialog label {
  display: block;
  margin-bottom: 10px;
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 700;
}
dialog label > input,
dialog label > select,
dialog label > textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-weight: 400;
}
dialog textarea { resize: vertical; line-height: 1.6; }

.dialog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* 본문 입력칸은 label 밖에 있어 위의 dialog label 규칙이 걸리지 않는다. 따로 지정한다. */
#replyBody {
  display: block;
  width: 100%;
  min-height: 210px;
  max-height: 46vh;
  overflow-y: auto;
  margin-bottom: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;      /* 사람이 친 줄바꿈을 그대로 지킨다 */
  resize: vertical;
}

.reply-body-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.reply-body-head label { margin: 0; }

.attachment-options {
  max-height: 108px;
  overflow-y: auto;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.attachment-option {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 5px;
  font-weight: 400;
  font-size: 11.5px;
}
.attachment-option input { width: auto; margin: 0; }

.direct-attachment {
  margin-top: 4px;
  padding: 11px;
  border: 1px dashed #b9c7d4;
  border-radius: 7px;
  background: #fafcfe;
}
.direct-attachment > span {
  display: block;
  margin-top: 5px;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 400;
  word-break: break-all;
}

.notice {
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: 6px;
  background: var(--warn-soft);
  color: #6d4a05;
  font-size: 11px;
  line-height: 1.5;
}
.notice.danger { background: var(--danger-soft); color: var(--danger); }
/* 받은 주소와 다르게 보낼 때 이유를 적는 칸. 안내문 바로 아래에 붙는다 */
.from-reason { display: block; margin-top: 6px; font-size: 11px; }
.from-reason input { width: 100%; margin-top: 3px; }

/* ------------------------------------------------------------------ 알림 */

.toast {
  position: fixed;
  /* popover 기본 스타일(가운데 정렬·테두리)을 지운다. 우리 위치·모양을 그대로 쓴다 */
  margin: 0;
  border: 0;
  inset: auto auto 26px 50%;
  overflow: visible;
  left: 50%;
  bottom: 26px;
  z-index: 60;
  max-width: 78vw;
  padding: 11px 18px;
  border-radius: 8px;
  background: rgba(23, 36, 48, .94);
  color: #fff;
  font-size: 12px;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity .18s, transform .18s;
  pointer-events: none;
}
.toast:popover-open { display: block; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: rgba(150, 40, 24, .96); }

@media (max-width: 1280px) {
  .workspace { grid-template-columns: 186px minmax(280px, 1fr) minmax(380px, 1.2fr); }
  /* 예전에는 여기서 3열로 접었는데, 카드가 5장이라 두 줄이 되면서 왼쪽 메뉴에 스크롤이 생겼다.
     한 화면에서 스크롤 없이 보는 편이 나으므로 좁아져도 한 줄을 유지하고 카드를 줄인다. */
  .summary { padding: 8px 14px; gap: 7px; }
  .summary-card { padding: 7px 10px; gap: 6px; }
  .summary-card span   { font-size: 10.5px; }
  .summary-card strong { font-size: 17px; }
}


/* ── 가격표 뷰 ─────────────────────────────────────────── */
/* 화면 아래 끝까지 채운다. 높이는 flex 가 알아서 잡으므로 계산하지 않는다.
   .content-view 의 아래 여백 30px 을 줄여 표를 더 보여준다. */
#pricingView { display: none; flex-direction: column; min-height: 0; padding-bottom: 10px; }
#pricingView.active { display: flex; }
.pricing-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 0 12px; flex: 0 0 auto;
}
.pricing-bar h2 { margin: 0 0 3px; font-size: 16px; }
.pricing-bar p { margin: 0; font-size: 12.5px; color: var(--ink-soft, #6b7686); }
.pricing-bar a.secondary {
  padding: 7px 13px; border-radius: 7px; border: 1px solid var(--line, #d8dee7);
  background: #fff; font-size: 12.5px; text-decoration: none; color: var(--ink, #1a2333);
  white-space: nowrap;
}
#pricingFrame {
  flex: 1 1 auto; width: 100%; border: 1px solid var(--line, #d8dee7);
  border-radius: 10px; background: #fff;
}

/* ── 견적 계산 ─────────────────────────────────────────── */
.reply-tools { display: flex; gap: 8px; }

/* 요소에 display 를 지정하면 브라우저 기본 [hidden](display:none) 을 덮어쓴다.
   예전에는 dialog 안에서만 이 문제를 막아 뒀는데, .banner{display:flex} 때문에
   숨긴 배너가 빈 노란 띠로 남아 보이는 일이 있었다(2026-09-09).
   숨김은 어디서나 이기도록 한 곳에서 못박는다. */
[hidden] { display: none !important; }

/* 이 창은 <form> 이 없어 dialog form 여백 규칙이 안 걸린다. 직접 잡아준다.
   화면보다 길어지면 가운데 영역만 스크롤되고 제목·버튼은 자리를 지킨다. */
#quoteDialog[open] {
  display: flex;
  flex-direction: column;
  padding: 0;
  max-height: min(90vh, 900px);
}
#quoteDialog .dialog-head { flex: 0 0 auto; padding: 18px 20px 0; margin-bottom: 12px; }
#quoteDialog .quote-form  { flex: 1 1 auto; overflow-y: auto; padding: 0 20px 4px; }
#quoteDialog .dialog-actions {
  flex: 0 0 auto; margin-top: 0; padding: 12px 20px 16px;
  border-top: 1px solid var(--line, #eef1f5); background: #fff;
}

/* ⚠️ 높이는 대화상자 한 곳에서만 정한다.
   예전에는 대화상자가 min(90vh,900px), 안쪽 본문이 calc(88vh-130px) 로 따로 계산했다.
   화면이 1100px 보다 높으면 안쪽이 바깥보다 커져서 내용이 흘러넘쳤고,
   버튼줄이 화면 한가운데 걸린 채 그 아래가 잘려 보였다(2026-09-09).
   이제 본문이 남는 자리를 전부 쓰고, 모자라면 자기가 스크롤한다.
   min-height:0 이 없으면 flex 자식은 내용보다 작아지지 않아 그대로 넘친다. */
#quoteDialog .quote-split {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}
#quoteDialog .quote-mail,
#quoteDialog .quote-pane { min-height: 0; }
.quote-form label .hint { font-weight: 400; color: var(--muted, #6b7686); font-size: 11px; }
.quote-more { margin: 12px 0 4px; border: 1px solid var(--line, #e2e6ec); border-radius: 8px; padding: 0 12px; }
.quote-more summary { cursor: pointer; padding: 9px 0; font-size: 13px; font-weight: 600; }
.quote-more[open] { padding-bottom: 10px; }
.quote-checks { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
dialog label.inline {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 400; margin: 0;
}
dialog label.inline > input { width: auto; margin: 0; }

/* 청구 대상 — 해외(USD) / 국내(원화) */
.quote-market { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.quote-market-lab { font-size: 10.5px; font-weight: 700; color: var(--ink-soft, #6b7686); }
.quote-market .seg { display: flex; border: 1px solid var(--line, #d8dee7); border-radius: 7px; overflow: hidden; }
.quote-market .seg button {
  border: 0; border-right: 1px solid var(--line, #d8dee7); background: #fff;
  padding: 6px 14px; font-size: 12.5px; font-family: inherit; color: var(--ink-soft, #6b7686); cursor: pointer;
}
.quote-market .seg button:last-child { border-right: 0; }
.quote-market .seg button.on { background: #12325c; color: #fff; font-weight: 600; }
.quote-market-note { font-size: 11.5px; color: #b26a00; }

/* 출발지 ⇄ 도착지 */
.quote-route-cap {
  font-size: 10.5px; font-weight: 700; color: var(--ink-soft, #6b7686);
  margin-bottom: 5px; letter-spacing: .2px;
}
.quote-route { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 10px; align-items: center; margin-bottom: 10px; }
.quote-route > input {
  width: 100%; border: 1px solid var(--line, #d8dee7); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; font-family: inherit; background: #fff;
}
.quote-route .icon-btn.swap {
  align-self: center; width: 30px; height: 30px; flex: none;
  border: 1px solid var(--line, #d8dee7); border-radius: 7px; background: #fff;
  font-size: 14px; line-height: 1; cursor: pointer; color: var(--ink-soft, #6b7686);
}
.quote-route .icon-btn.swap:hover { background: #f2f6fb; color: #0a5bd3; }

.link-btn {
  background: none; border: 0; padding: 0; margin-right: 14px; cursor: pointer;
  font-family: inherit; font-size: 12px; color: var(--ink-soft, #6b7686); text-decoration: underline;
}
.link-btn:hover { color: #0a5bd3; }
/* 지우는 단추는 색으로 구분한다. 되돌릴 수 없는 동작이다 */
.link-btn.danger { color: var(--danger, #c0392b); }
.link-btn.danger:hover { color: #a5301f; }

/* 편집 영역이 비면 안내 글을 보여 준다(글상자의 placeholder 자리) */
#replyBody:empty::before { content: attr(data-placeholder); color: var(--ink-faint); }
#replyBody:focus { outline: 2px solid #cfe0ff; outline-offset: -1px; }
/* 본문에 들어간 견적서는 넘치지 않게 줄인다. 메일에서는 원래 크기로 나간다 */
#replyBody table { max-width: 100%; }
/* 본문에 들어간 견적서는 한 덩어리다. 눌러서 고를 수 있음을 알려 준다 */
#replyBody [data-quote-doc] { cursor: default; border-radius: 8px; }
#replyBody [data-quote-doc]:hover { outline: 2px solid #dbe6f7; outline-offset: 2px; }
#replyBody [data-quote-doc].picked { outline: 2px solid var(--brand, #1d4ed8); outline-offset: 2px; }

/* 오른쪽 버튼 메뉴 */
.doc-menu {
  position: fixed;
  margin: 0;
  padding: 5px;
  border: 1px solid var(--line, #d8dee7);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(20, 34, 48, .18);
  min-width: 150px;
}
.doc-menu button {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--ink, #1a2333);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.doc-menu button:hover { background: var(--line-soft, #eef2f7); }
.doc-menu button.danger { color: var(--danger, #c0392b); }
.doc-menu hr { margin: 4px 2px; border: 0; border-top: 1px solid var(--line, #e7ebf0); }


/* 같은 조건을 또 담으려 할 때 버튼을 흔들어 알린다. 글로만 알리면 놓친다 */
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.shake { animation: shake .28s 2; }
.quote-lang {
  margin-right: auto; display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--ink-soft, #6b7686);
}
.quote-lang select { width: auto; padding: 5px 8px; font-size: 12.5px; }

.quote-result { margin-top: 14px; min-height: 60px; }
.quote-route-line { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.quote-route-line .arrow { color: var(--ink-soft, #6b7686); margin: 0 6px; font-weight: 400; }
.quote-route-line .missing { color: #c0392b; font-weight: 400; }
.quote-route-line .tbc { color: var(--ink-soft, #6b7686); font-weight: 400; font-size: 12px; }
.quote-result .empty { color: var(--muted, #6b7686); font-size: 13px; padding: 18px 0; text-align: center; }
.quote-lines { width: 100%; border-collapse: collapse; font-size: 13px; }
.quote-lines td { padding: 6px 0; border-bottom: 1px solid var(--line, #eef1f5); }
.quote-lines td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.quote-lines tr.total td { border-bottom: 0; border-top: 2px solid var(--line, #d8dee7); font-weight: 700; padding-top: 9px; }
.quote-notes { font-size: 11.5px; color: var(--muted, #6b7686); margin-top: 8px; line-height: 1.7; }

.quote-internal {
  margin-top: 12px; padding: 11px 13px; border-radius: 8px;
  background: #f4f7fb; border: 1px solid #dde5ef; font-size: 12.5px;
}
.quote-internal h4 { margin: 0 0 7px; font-size: 11px; letter-spacing: .4px; color: #5a6b80; }
.quote-internal dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 0; }
.quote-internal dt { color: #6b7686; }
.quote-internal dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.quote-internal .rate { font-weight: 700; }
.quote-internal .rate.good { color: #0f7b4f; }
.quote-internal .rate.mid  { color: #b26a00; }
.quote-internal .rate.bad  { color: #c0392b; }

.quote-warn {
  margin-top: 10px; padding: 9px 12px; border-radius: 8px;
  background: #fdf3e3; border: 1px solid #f0d9ad; color: #8a5a00; font-size: 12.5px; line-height: 1.6;
}
.quote-block {
  margin-top: 10px; padding: 12px 14px; border-radius: 8px;
  background: #fdecea; border: 1px solid #f3c8c2; color: #a33227; font-size: 13px; line-height: 1.6;
}

/* 차고지 옆 안내 — 셀렉트와 같은 높이 자리에서 가산 분을 설명한다 */
.depot-note {
  align-self: end;
  padding-bottom: 9px;
  color: var(--muted, #6b7686);
  font-size: 11px;
  line-height: 1.5;
  word-break: keep-all;
}

/* 어떤 배율이 왜 걸렸는지 — 첫 칩이 실제 적용된 것, 나머지는 밀려난 후보 */
.quote-mult {
  margin: 10px 0 2px; padding: 8px 10px; border-radius: 6px;
  background: var(--line-soft, #f4f6f9); font-size: 12px; line-height: 1.9;
}
.quote-mult b { margin-right: 6px; }
.quote-mult span {
  display: inline-block; margin-right: 5px; padding: 1px 7px; border-radius: 10px;
  background: #fff; border: 1px solid var(--line, #e2e6ec); color: var(--muted, #6b7686);
}
.quote-mult span.on { border-color: #12325c; background: #12325c; color: #fff; }
.quote-mult i { color: var(--muted, #6b7686); font-style: normal; font-size: 11px; }

/* 공급가 대비 마진 — 매출 대비 수익률과 구분되게 파란 계열로 */
.quote-internal .mg { margin-left: 6px; color: #0a5bd3; font-weight: 600; font-size: 11px; }

/* 도착지로 존을 가른 근거 — 손으로 고른 값과 다를 수 있어 눈에 띄게 둔다 */
.quote-zone {
  margin: 8px 0 2px; padding: 7px 10px; border-radius: 6px;
  background: #eef4fd; color: #12325c; font-size: 12px; line-height: 1.6;
}


/* ---------------------------------------------------------------- 메일함 폴더
   좌측 맨 위의 계정 폴더. 아래 '업무 상태'와 모양은 같되, 성격이 다르므로
   (어디를 보는가 ↔ 그 안에서 무엇을 보는가) 선택 색을 달리해 구분한다. */
#mailboxFolders { display: flex; flex-direction: column; gap: 2px; }

.filter.mailbox > span { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.filter.mailbox > span small { color: var(--ink-faint); font-size: 10px; font-weight: 400; }
/* 상태 버튼의 선택색(연한 파랑)과 같으면 둘 중 무엇을 고른 상태인지 헷갈린다.
   지금 보고 있는 메일함은 확실히 눈에 띄어야 하므로 채운 색을 쓴다. */
.filter.mailbox.active { background: var(--accent); color: #fff; }
.filter.mailbox.active > span { font-weight: 700; }
.filter.mailbox.active > span small { color: rgba(255,255,255,.72); }
.filter.mailbox.active > b { color: #fff; }


/* 메일함 박스 — 아래 '업무 상태' 목록과 성격이 달라 한 덩어리로 떼어 놓는다.
   같은 모양의 버튼이 위아래로 이어지면 지금 무엇을 고른 상태인지 업무 중에 헷갈린다. */
.mailbox-group {
  margin-bottom: 12px;
  padding: 9px 9px 10px;
  border: 1px solid #cfe0f5;
  border-radius: var(--radius);
  background: #f2f7fd;
}
.mailbox-group > h2 { margin: 0 0 6px 2px; }


/* 메일 한 통의 머리 부분 — 첨부와 번역 버튼을 본문 위에 나란히 둔다.
   첨부를 본문 아래에 두었더니 긴 메일에서 스크롤 밖으로 밀려
   첨부가 아예 안 온 것처럼 보였다(2026-09-09). */
.message-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0 9px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.message-bar .file-strip { margin: 0; flex: 1; }
.message-bar .translate-btn { flex: none; white-space: nowrap; }
.translate-btn[disabled] { opacity: .6; cursor: progress; }

/* 전달받은 건 표시 — 회신이 원 고객에게 가는지 눈으로 확인해야 하는 건이다. */
.tag-forward {
  background: var(--warn-soft);
  color: #6d4a05;
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   견적 작성 — 왼쪽 메일 본문 · 오른쪽 작성
   메일을 보면서 항목을 옮겨 적는 일이라 둘이 한 화면에 있어야 한다.
   ══════════════════════════════════════════════════════════════ */
dialog#quoteDialog.dialog { width: min(1480px, 96vw); }

.quote-head { align-items: center; gap: 14px; padding: 14px 18px 0; margin-bottom: 10px; }
.quote-head h2 { margin: 0; }
.quote-head .seg { margin-left: auto; }

.quote-split {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  max-height: calc(88vh - 130px);
}
/* 화면이 좁으면 본문을 위로 접는다. 옆으로 밀려 잘리는 것보다 낫다. */
@media (max-width: 1100px) {
  .quote-split { grid-template-columns: 1fr; max-height: calc(88vh - 120px); }
  .quote-mail { max-height: 220px; border-right: 0; border-bottom: 1px solid var(--line); }
}

.quote-mail {
  border-right: 1px solid var(--line);
  background: var(--bg-soft, #f7f8fa);
  overflow: auto;
  padding: 14px 16px;
}
.quote-mail-head { margin-bottom: 8px; line-height: 1.5; }
.quote-mail-head b { display: block; font-size: 12.5px; }
.quote-mail-head span { font-size: 11px; }
.quote-mail-body {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 11.5px;
  line-height: 1.65;
}
.quote-mail-body mark { background: #fde68a; padding: 0 1px; }

.quote-pane { overflow: auto; padding: 16px 18px 18px; }

/* ── 안내표 ─────────────────────────────────────────────── */
.card-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.card-meta-grid label:first-child:nth-last-child(2) { grid-column: span 1; }
.card-tools { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }

.card-blocks { display: flex; flex-direction: column; gap: 14px; }
.card-block { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.card-block-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--bg-soft, #f7f8fa);
  border-bottom: 1px solid var(--line);
}
.card-block-head .num {
  width: 20px; height: 20px; border-radius: 4px; flex: 0 0 auto;
  background: var(--brand, #1d4ed8); color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
.card-block-head input.t { font-weight: 700; flex: 0 0 auto; width: 210px; }
.card-block-head input.d { flex: 1 1 auto; min-width: 120px; }
.card-block-head .ops { display: flex; gap: 4px; margin-left: auto; }
.card-block-body { padding: 10px; overflow-x: auto; }
.card-block-foot { padding: 0 10px 10px; }
.card-block-foot textarea { width: 100%; min-height: 44px; font-size: 11px; line-height: 1.6; }

.card-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.card-table th, .card-table td { border: 1px solid var(--line); padding: 5px 7px; vertical-align: top; }
.card-table th { background: var(--bg-soft, #f7f8fa); font-weight: 600; white-space: nowrap; }
.card-table td.money { text-align: right; }
.card-table input, .card-table select { width: 100%; font-size: 11.5px; padding: 3px 5px; }
.card-table input.money { text-align: right; }

/* 금액 칸의 출처를 색으로 구분한다 — 잘못된 값이 그대로 나가는 것을 막는 장치다 */
.card-table input.seeded { background: #fff; color: var(--ink, #1b2733); }
.card-table input.edited { background: #eef4ff; color: #1d4ed8; font-weight: 700; }
.card-table input.blank  { background: #fffbeb; border-color: #f5c86b; }
.cell-why { display: block; font-size: 9.5px; line-height: 1.4; color: var(--muted, #7b8794); margin-top: 2px; }
.cell-why.warn { color: #b45309; }
.cell-why b { color: #1d4ed8; }
.cell-why.loss { color: var(--danger, #c0392b); font-weight: 700; }

.route-cols { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.route-col {
  border: 1px solid var(--line); border-radius: 6px; padding: 7px 8px;
  display: grid; gap: 5px; min-width: 250px; background: #fff;
}
.route-col .r1 { display: flex; gap: 5px; align-items: center; }
.route-col .r2 { display: flex; gap: 5px; align-items: center; font-size: 10.5px; }
.route-col select, .route-col input { font-size: 11px; padding: 3px 5px; }
.route-col .name { flex: 1 1 auto; font-weight: 600; }

.card-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.card-add > span { font-size: 11px; color: var(--muted, #7b8794); margin-right: 2px; }
.card-internal { margin-top: 12px; }

.card-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.card-cards .c { border: 1px solid var(--line); border-radius: 6px; padding: 8px; display: grid; gap: 4px; }

/* ── A4 인쇄 ──────────────────────────────────────────────
   ⚠️ 인쇄가 백지로 나오는 사고를 두 번 겪었다. 원인은 늘 「부모를 통째로 숨김」이었다.
   그래서 인쇄본은 화면 구조 밖(#cardPrintRoot)에 따로 그리고, 인쇄 때 그것만 남긴다. */
#cardPrintRoot { display: none; }
@media print {
  body > *:not(#cardPrintRoot) { display: none !important; }
  #cardPrintRoot { display: block !important; }
  @page { size: A4 portrait; margin: 12mm 12mm 14mm; }
}
.pr-doc { font-size: 10.5px; line-height: 1.55; color: #1b2733; }
.pr-brand { display: flex; align-items: center; gap: 8px; border-bottom: 2px solid #1e3a8a; padding-bottom: 8px; margin-bottom: 14px; }
.pr-brand .g { width: 22px; height: 22px; border-radius: 5px; background: #1e3a8a; color: #fff; display: grid; place-items: center; font-weight: 800; }
.pr-brand .n { font-size: 16px; font-weight: 800; color: #1e3a8a; letter-spacing: -.3px; }
.pr-title { font-size: 17px; font-weight: 800; color: #1e3a8a; margin: 0 0 3px; word-break: keep-all; }
.pr-sub { color: #6b7280; margin: 0 0 14px; }
.pr-sec { margin-bottom: 14px; break-inside: avoid; }
.pr-sec-h { display: flex; align-items: baseline; gap: 7px; margin-bottom: 6px; }
.pr-sec-h .bar { width: 3px; align-self: stretch; background: #1e3a8a; border-radius: 2px; }
.pr-sec-h .n { font-weight: 800; color: #1e3a8a; }
.pr-sec-h .t { font-weight: 800; }
.pr-sec-h .d { color: #6b7280; font-size: 9.5px; }
.pr-sec-h .vat { margin-left: auto; border: 1px solid #cbd5e1; border-radius: 4px; padding: 1px 6px; font-size: 9px; color: #475569; white-space: nowrap; }
.pr-t { width: 100%; border-collapse: collapse; }
.pr-t th, .pr-t td { border: 1px solid #cbd5e1; padding: 5px 7px; }
.pr-t th { background: #eef2f7; font-weight: 700; text-align: center; }
.pr-t td.m { text-align: right; font-variant-numeric: tabular-nums; }
.pr-t td.c { text-align: center; }
.pr-note { color: #6b7280; font-size: 9.5px; line-height: 1.6; margin-top: 5px; white-space: pre-wrap; }
.pr-cards { display: flex; gap: 8px; margin-top: 6px; }
.pr-cards .c { flex: 1; border: 1px solid #cbd5e1; border-radius: 5px; padding: 7px 9px; }
.pr-cards .c .l { color: #6b7280; font-size: 9.5px; }
.pr-cards .c .v { font-weight: 800; font-size: 13px; margin-top: 3px; }

/* 견적 창에서 만들어 붙인 PDF 목록 */
/* 첨부 구역 안에 들어가는 상자. 「컴퓨터에서 바로 첨부」와 같은 모양이라 한 묶음으로 읽힌다 */
.made-box { display: block; }
.made-box > b { display: block; font-size: 11px; font-weight: 600; }
.made-files { margin-top: 6px; display: grid; gap: 6px; }
.made-files .f {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px;
  background: #f4f8ff; font-size: 11.5px;
}
.made-files .f .n { font-weight: 600; }
.made-files .f .s { color: var(--muted, #7b8794); }
.made-files .f .sp { margin-left: auto; display: flex; gap: 8px; }

/* ══════════════════════════════════════════════════════════════
   로그인 · 결재
   ══════════════════════════════════════════════════════════════ */
.login-gate {
  position: fixed; inset: 0; z-index: 60;
  background: #eef1f6; display: grid; place-items: center; padding: 20px;
}
.login-card {
  width: min(380px, 94vw); background: #fff; border-radius: 12px;
  box-shadow: 0 18px 48px rgba(20, 34, 48, .18); padding: 26px 26px 22px;
  display: grid; gap: 12px;
}
.login-brand { font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.login-brand .g {
  background: var(--brand, #1d4ed8); color: #fff; border-radius: 5px;
  padding: 2px 7px; font-size: 12px; margin-right: 6px;
}
.login-lead { color: var(--muted, #6b7686); font-size: 12px; line-height: 1.6; margin: 0; }
.login-sub { font-size: 11px; color: var(--muted, #6b7686); margin-top: 6px; }
.login-card button.primary { width: 100%; padding: 10px; }

.who { font-size: 11.5px; color: var(--muted, #6b7686); }
.approval-badge {
  border: 0; border-radius: 6px; padding: 5px 10px; cursor: pointer;
  background: var(--warn-soft, #fdf0d5); color: #6d4a05; font-weight: 700; font-size: 11.5px;
}
.approval-badge:hover { filter: brightness(.97); }

/* 결재 구역 — 발송을 막는 장치라 보내기 버튼 옆에 둔다 */
.approval-box {
  margin-top: 14px; border: 1px solid var(--line, #e2e6ec); border-radius: 8px;
  padding: 11px 12px; background: #fbfcfe;
}
.ap-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ap-head .hint { font-weight: 400; }
.ap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ap-money { display: flex; gap: 5px; }
.ap-money input { flex: 1 1 auto; text-align: right; }
.ap-money select { width: 64px; }
.ap-state {
  margin-top: 10px; border-radius: 6px; padding: 8px 10px; font-size: 11.5px; line-height: 1.6;
  background: var(--warn-soft, #fdf0d5); color: #6d4a05;
}
.ap-state.ok { background: #e7f4ea; color: #1e7a3c; }
.ap-state.bad { background: var(--danger-soft, #fdeaea); color: var(--danger, #c0392b); }
.ap-state b { font-weight: 700; }
.ap-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.ap-actions .grow { flex: 1 1 200px; }

/* 회신 창도 길어졌다 — 결재 구역이 붙으면서 화면보다 커진다.
   ⚠️ 견적 창에서 이미 겪은 것과 같은 문제다. 높이는 창 한 곳에서만 정하고,
      가운데만 스크롤시키며 제목과 버튼줄은 자리를 지킨다.
      min-height:0 이 없으면 flex 자식이 내용보다 작아지지 않아 그대로 넘친다. */
dialog#replyDialog[open] {
  display: flex;
  flex-direction: column;
  padding: 0;
  max-height: min(90vh, 940px);
}
/* form 이 창 높이를 물려받아야 한다. flex:1 이 없으면 form 이 내용만큼 커져
   버튼줄이 창 밖으로 밀린다(창은 836px 인데 버튼줄이 1167px 에 있었다). */
#replyDialog > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 0; }
#replyDialog .dialog-head { flex: 0 0 auto; padding: 18px 20px 0; }
#replyDialog .dialog-actions {
  flex: 0 0 auto; margin-top: 0; padding: 12px 20px 16px;
  border-top: 1px solid var(--line, #eef1f5); background: #fff;
}
/* 제목줄과 버튼줄 사이가 남는 자리를 쓰고, 모자라면 스스로 스크롤한다.
   ⚠️ `:not(...)` 두 개를 쓴 규칙이 `.reply-scroll` 보다 우선순위가 높아
      스크롤 영역까지 고정 크기로 눌러 버렸다. 스크롤 영역도 예외로 뺀다. */
#replyDialog > form > *:not(.dialog-head):not(.dialog-actions):not(.reply-scroll) { flex: 0 0 auto; }
#replyDialog > form > .reply-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 20px 6px; }

/* 설정 화면 — 박스 크기를 맞춘다.
   ⚠️ align-items:start 였을 때는 목록이 긴 박스만 아래로 길어져 줄이 어긋나 보였다.
      같은 줄의 박스는 높이를 맞추고, 목록이 길면 **표만** 스크롤시킨다. */
.settings-grid { align-items: stretch; }
.settings-card { flex-direction: column; }
.settings-card > .table-scroll { flex: 1 1 auto; min-height: 0; }

/* 담당자·부서·계정처럼 줄이 늘어나는 표 */
.table-scroll {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.table-scroll table { margin: 0; }
.table-scroll thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-soft, #f7f8fa);
}

/* 결재 — 읽어서 확인하는 자리다. 사람이 고르는 칸이 아니라 사실을 보여 준다. */
.ap-facts { display: grid; gap: 6px; margin: 0 0 4px; }
.ap-facts > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: baseline; gap: 10px; }
.ap-facts dt { color: var(--muted, #6b7686); font-size: 11.5px; margin: 0; }
.ap-facts dd { margin: 0; font-size: 12.5px; font-weight: 600; }
.ap-facts dd .muted { font-weight: 400; }

/* 결재판 — 하이웍스 결재선처럼 가로로 놓는다.
   처리하면 그 칸에 일자·시각이 찍혀 「누가 언제 봤는지」가 한눈에 남는다. */
.ap-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-top: 10px; }
.ap-stamps { display: flex; gap: 0; }
.ap-stamp {
  min-width: 92px; text-align: center;
  border: 1px solid var(--line, #dfe4ea); border-right: 0; background: #fff;
}
.ap-stamp:last-child { border-right: 1px solid var(--line, #dfe4ea); border-radius: 0 6px 6px 0; }
.ap-stamp:first-child { border-radius: 6px 0 0 6px; }
.ap-stamp .role {
  font-size: 10.5px; color: var(--muted, #6b7686);
  background: var(--bg-soft, #f7f8fa); border-bottom: 1px solid var(--line, #dfe4ea);
  padding: 3px 6px;
}
.ap-stamp .name { font-size: 12px; font-weight: 700; padding: 7px 6px 2px; }
.ap-stamp .when { font-size: 10px; color: var(--muted, #6b7686); padding: 0 6px 7px; line-height: 1.35; min-height: 26px; }
.ap-stamp.done .name { color: #1e7a3c; }
.ap-stamp.done .when { color: #1e7a3c; }
.ap-stamp.turn { box-shadow: inset 0 0 0 2px #1d4ed8; }
.ap-stamp.turn .role { color: #1d4ed8; font-weight: 700; }
.ap-stamp.no .name, .ap-stamp.no .when { color: var(--danger, #c0392b); }
.ap-actions { margin-top: 0; justify-content: flex-end; }


/* 24시간 회신 목표 — 목록 오른쪽 끝 */
.deadline .sla {
  display: block; margin-top: 3px; font-size: 10.5px; font-weight: 700;
  border-radius: 4px; padding: 1px 5px; width: fit-content; margin-left: auto;
}
.deadline .sla.open { background: #eef4ff; color: #1d4ed8; }
.deadline .sla.over { background: var(--danger-soft, #fdeaea); color: var(--danger, #c0392b); }
.sla.lag  { background: var(--line); color: var(--ink-faint); }
.deadline .sla.met  { background: #e7f4ea; color: #1e7a3c; }
.deadline .sla.late { background: var(--warn-soft, #fdf0d5); color: #6d4a05; }
.deadline .sla.done { background: var(--bg-soft, #f1f3f6); color: var(--muted, #7b8794); }
.deadline .sla.soon { background: var(--warn-soft, #fdf0d5); color: #6d4a05; }

/* 구간이 여럿인 문의 — 한 줄짜리 칸에 담기지 않아 표로 편다 */
.seg-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 4px; }
.seg-table th, .seg-table td { border: 1px solid var(--line); padding: 4px 6px; text-align: left; }
.seg-table th { background: var(--bg-soft, #f7f8fa); font-weight: 600; white-space: nowrap; }
.seg-table td { word-break: break-word; }
/* 날짜·시각·편명·구분은 줄바꿈하지 않는다. 「12:0 0」처럼 갈라져 읽기 어려웠다. */
.seg-table td:nth-child(1), .seg-table td:nth-child(2),
.seg-table td:nth-child(5), .seg-table td:nth-child(6) { white-space: nowrap; }
.seg-table td:nth-child(3), .seg-table td:nth-child(4) { min-width: 110px; }

/* 메일에서 찾은 구간 — 견적 창 맨 위 */
.q-seg { border: 1px solid var(--line); border-radius: 8px; padding: 10px 11px; margin-bottom: 12px; background: #fbfcfe; }
.q-seg-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.q-seg-list { display: flex; flex-wrap: wrap; gap: 6px; }
.q-seg-btn {
  border: 1px solid var(--line); background: #fff; border-radius: 6px;
  padding: 5px 9px; font-size: 11.5px; cursor: pointer; text-align: left;
}
.q-seg-btn b { color: var(--muted, #7b8794); margin-right: 5px; }
.q-seg-btn:hover { border-color: var(--brand, #1d4ed8); }
.q-seg-btn.on { border-color: var(--brand, #1d4ed8); background: #eef4ff; font-weight: 600; }
.q-seg-btn.on b { color: var(--brand, #1d4ed8); }
.q-seg-note { margin-top: 8px; font-size: 11px; line-height: 1.6; color: #6d4a05; background: var(--warn-soft, #fdf0d5); border-radius: 6px; padding: 7px 9px; }

/* 담은 구간 — 한 견적서로 묶일 목록 */
.q-basket {
  margin: 0 0 12px;
  padding: 12px 13px;
  border: 1px solid var(--line, #d8dee7);
  border-radius: 8px;
  background: #fbfcfe;
}
.q-basket-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.q-basket-head .hint, .q-seg-head .hint {
  margin: 0; padding: 0; background: none; font-size: 10.5px;
}
.q-basket-head b { font-size: 12px; }
.q-basket .b {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px;
  padding: 4px 0; border-bottom: 1px solid var(--line);
}
.q-basket .b:last-child { border-bottom: 0; }
.q-basket .b .n { color: var(--muted, #7b8794); width: 16px; }
.q-basket .b .r { flex: 1 1 auto; }
.q-basket .b .m { font-weight: 700; font-variant-numeric: tabular-nums; }
.q-basket .b .x { color: var(--muted, #7b8794); }
.q-basket .sum { display: flex; justify-content: space-between; margin-top: 7px; font-weight: 700; }
.q-seg-btn .add {
  margin-left: 8px; border: 1px solid var(--line); border-radius: 4px;
  background: #fff; font-size: 10.5px; padding: 1px 6px; cursor: pointer;
}
.q-seg-btn .add.on { background: var(--brand, #1d4ed8); color: #fff; border-color: var(--brand, #1d4ed8); }
.q-basket .b .m input {
  width: 96px; text-align: right; font-size: 11.5px; padding: 2px 5px;
  border: 1px solid var(--line); border-radius: 4px; font-variant-numeric: tabular-nums;
}
.q-basket .b .m input.edited { background: #eef4ff; color: #1d4ed8; font-weight: 700; border-color: #b9cdfa; }
.q-basket .b .was { font-size: 10px; color: var(--muted, #7b8794); text-decoration: line-through; margin-right: 5px; }
.q-cut { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.q-cut > span { font-size: 11.5px; color: var(--muted, #6b7686); }
.q-cut input { font-size: 11.5px; padding: 3px 6px; }
.q-cut #qCutValue { width: 92px; text-align: right; }
.q-cut #qCutMode { width: 66px; font-size: 11.5px; }
.q-cut #qCutLabel { flex: 1 1 180px; min-width: 140px; }
.q-basket .sum .before { font-weight: 400; color: var(--muted, #7b8794); }
/* 합계를 내지 않을 때. 메일 본문과 같은 모양으로 보여 준다 */
.q-basket .sum .off { color: var(--muted, #7b8794); letter-spacing: 1px; }

/* ── 견적 창 입력 영역 구분 ────────────────────────────────────────────
   흰 바탕에 입력칸만 늘어놓으면 어디까지가 한 묶음인지 안 보인다.
   묶음마다 옅은 상자와 제목을 둔다. */
.q-box {
  margin: 0 0 12px;
  padding: 12px 13px 4px;
  border: 1px solid var(--line, #d8dee7);
  border-radius: 8px;
  background: #fbfcfe;
}
.q-box-title {
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--ink-soft, #6b7686);
}
/* 상자 안에서는 입력칸이 흰 바탕이라야 눈에 들어온다 */
.q-box select, .q-box input { background: #fff; }
.q-box .quote-market { margin-bottom: 12px; }

/* 합계를 어떻게 낼지 — 구간 목록과 줄로 나눈다 */
.q-total-opts {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line, #d8dee7);
}
.q-nototal {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
}
.q-nototal input { margin: 0; }
.q-nototal .t { font-size: 11.5px; font-weight: 600; }
.q-nototal .hint {
  grid-column: 2;
  margin: 0;
  padding: 0;
  background: none;      /* .hint 기본이 회색 상자라 넓게 퍼져 보였다 */
  font-size: 10.5px;
  font-weight: 400;
  color: var(--muted, #6b7686);
}
/* 해외 운행 견적 — 문장을 받아 구간별로 보여 준다 */
#qApiText { width: 100%; font-size: 12px; line-height: 1.6; }
.q-api-cap { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; }
.q-api-cap .sp { margin-left: auto; display: flex; gap: 10px; font-weight: 400; }

/* 구간 한 줄 — 날짜·시각·출발·도착·인원·차량 */
.q-api-rows { display: grid; gap: 8px; }
.q-api-row {
  display: grid;
  grid-template-columns: 88px 116px 104px minmax(0,1fr) minmax(0,1fr) 58px 24px;
  gap: 6px;
  align-items: center;
}
.q-api-row input, .q-api-row select { font-size: 11.5px; padding: 5px 7px; width: 100%; }
.q-api-row .x { color: var(--muted, #7b8794); border: 0; background: none; cursor: pointer; font-size: 13px; }
.q-api-rowhead {
  display: grid;
  grid-template-columns: 88px 116px 104px minmax(0,1fr) minmax(0,1fr) 58px 24px;
  gap: 6px;
  font-size: 10.5px;
  color: var(--muted, #6b7686);
  margin-bottom: 2px;
}
.q-api-rowadd { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; }
.q-api-rowadd .hint { margin: 0; padding: 0; background: none; font-size: 10.5px; }
.q-api-preview { margin-top: 8px; font-size: 11.5px; }
.q-api-preview summary { cursor: pointer; color: var(--ink-soft, #52606d); }
.q-api-preview .hint { margin: 4px 0 0; padding: 0; background: none; font-size: 10.5px; }
.q-api-actions { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
.q-api-actions .hint { margin: 0; padding: 0; background: none; font-size: 10.5px; }
.q-api-result { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.q-api-seg { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 11.5px; }
.q-api-seg:last-child { border-bottom: 0; }
.q-api-seg .t { font-weight: 600; }
.q-api-seg .m { float: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.q-api-seg select { margin-top: 5px; font-size: 11.5px; max-width: 320px; }
.q-api-seg .note { margin-top: 4px; color: var(--muted, #7b8794); font-size: 10.5px; line-height: 1.5; }
.q-api-sum { display: flex; justify-content: space-between; margin-top: 9px; font-weight: 700; }
.q-cut-lab { min-width: 74px; font-size: 11.5px; font-weight: 600; color: var(--ink, #1a2333); }
/* 합계를 끄면 깎을 것도 없다. 꺼져 있음을 눈으로 알 수 있게 */
.q-cut input:disabled, .q-cut select:disabled { background: #f1f3f6; color: #9aa5b1; }

/* 저쪽이 실제로 짚은 위치 — ⚠️ 엉뚱한 곳을 짚고도 금액은 나온다. 반드시 눈으로 보게 한다. */
.q-api-match { margin: 5px 0 0; font-size: 10.5px; line-height: 1.65; color: var(--muted, #6b7686); }
.q-api-match b { display: inline-block; min-width: 30px; color: var(--ink-soft, #52606d); font-weight: 600; }
.q-api-match .err { color: #b3261e; font-weight: 600; }
.q-api-match .hint { margin: 0; padding: 0; background: none; font-size: 10.5px; }
.q-api-seg.warn { background: #fffaf0; border-radius: 6px; padding-left: 8px; padding-right: 8px; }
.q-api-seg.bad .err { color: #b3261e; }

/* 보낼 금액 — 저쪽 값이 이상하면 여기서 손으로 고친다 */
.q-api-fix { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 11px; }
.q-api-fix > span:first-child { font-weight: 600; color: var(--ink-soft, #52606d); }
.q-api-fix input { width: 116px; font-size: 11.5px; padding: 4px 6px; text-align: right;
  font-variant-numeric: tabular-nums; border: 1px solid #7aa7e0; background: #f7fbff; }
.q-api-fix .cur { color: var(--muted, #7b8794); }
.q-api-fix .chg { color: #0a6b3d; font-weight: 600; }
.q-api-fix .hint { margin: 0; padding: 0; background: none; font-size: 10.5px; }

/* 등급을 아직 안 골랐을 때 — 금액이 나왔다는 것은 보이게, 확정 금액과는 구분되게 */
.q-api-seg .m .range { font-weight: 600; color: var(--ink-soft, #52606d); }
.q-api-seg .m .range em { font-style: normal; font-weight: 400; font-size: 10.5px; color: var(--muted, #7b8794); }
.q-api-sum .wait { font-style: normal; font-weight: 400; font-size: 10.5px; color: var(--muted, #7b8794); }
/* 도착지를 못 찾았지만 금액은 나온 경우 — 빨강은 과하다 */
.q-api-match .soft { color: #8a6100; }
/* 국가를 안 골라 막힌 행 */
#qApiRows select.need { border: 1.5px solid #b3261e; background: #fff5f4; }

/* 메뉴 권한 편집 — 슈퍼어드민 전용
   ⚠️ 다이얼로그 기본 규칙(dialog label > input { display:block; width:100% })이
      체크박스를 한 줄 전체로 늘려 놓는다. 그래서 여기서 다시 지정한다. */
.perm-who { margin: 0 0 12px; font-size: 12px; color: var(--ink, #1a2333); }
.perm-who .muted { margin-left: 8px; }
.perm-group {
  border: 1px solid var(--line, #d8dee7); border-radius: 8px;
  padding: 6px 14px 10px; margin: 0 0 10px;
}
.perm-group legend { font-size: 11.5px; font-weight: 700; color: var(--ink-soft, #52606d); padding: 0 6px; }
.perm-item {
  display: grid; grid-template-columns: 16px minmax(0, 1fr);
  align-items: start; gap: 9px;
  margin: 0; padding: 5px 0;
  font-size: 12px; font-weight: 400; color: var(--ink, #1a2333);
}
.perm-item > input[type="checkbox"] {
  display: inline-block; width: 16px; height: 16px;
  margin: 1px 0 0; padding: 0; flex: none;
}
.perm-item > span { display: block; }
.perm-item b { font-weight: 600; }
.perm-item small { display: block; margin-top: 1px; color: var(--muted, #7b8794); font-size: 10.5px; line-height: 1.45; }
#userRows .user-role { font-size: 11.5px; padding: 3px 5px; }
/* 사용 중지된 사람 — 목록에는 남기되 눈에 띄지 않게. 되돌릴 수 있어야 해서 지우지 않는다. */
#userRows tr.user-off td { opacity: .55; }
#userRows tr.user-off td:first-child { font-style: italic; }

/* 종료된 건 — 무엇으로 끝났는지 상세 맨 위에 둔다.
   ⚠️ 이력에도 남지만 이력은 길어서 눈에 안 들어온다. */
.closed-card {
  margin: 0 0 14px;
  padding: 11px 14px;
  border: 1px solid #d8dee7;
  border-left: 3px solid #7b8794;
  border-radius: 8px;
  background: #f7f8fa;
}
.closed-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; font-size: 12px; }
.closed-head b { color: var(--ink, #1a2333); }
.closed-reason {
  padding: 1px 8px; border-radius: 999px;
  background: #e6eaef; color: #425061; font-size: 11px; font-weight: 600;
}
.closed-head .muted { font-size: 11px; }
.closed-note { margin: 7px 0 0; font-size: 12px; line-height: 1.65; color: var(--ink-soft, #52606d); white-space: pre-wrap; }
#closeDialog textarea { min-height: 92px; resize: vertical; }