/* clinic-admin — Phase-2 information architecture: five-area rail (desktop), bottom bar + sub-nav + ⋯ sheet (phone),
   topbar utility buttons, the ⌘K search overlay, the AI drawer, the task-first 홈, the 청구 배치 landing and the promoted
   조직 panels. Same grammar as styles.css (paper · Fraunces · Inter · JetBrains Mono · rust accent · celadon). */

/* ── Rail · five areas, the active one expanded into its panels ── */
.rail-areas { display: flex; flex-direction: column; gap: 0; padding: 2px 0 8px; }
.rail-areas .area { padding: 4px 0; border-top: 1px solid var(--line-2); }
.rail-areas .area:first-child { border-top: none; }
.area-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--ink-2); cursor: pointer; text-align: left;
  font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
  transition: background .2s, color .2s, border-color .2s;
}
.area-btn .ai { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); transition: color .2s; }
.area-btn:hover { background: rgba(255,255,255,0.45); color: var(--ink); }
.area-btn.active { color: var(--ink); background: rgba(255,255,255,0.6); border-color: var(--line); }
.area-btn.active .ai { color: var(--accent); }
.area-btn .area-label { flex: 1 1 auto; }
.area-panels { display: none; flex-direction: column; gap: 1px; margin: 2px 0 4px 19px; padding: 2px 0 2px 10px; border-left: 1px solid var(--line); }
.area-panels.active { display: flex; animation: fadeIn .2s ease-out; }
.rail-areas .rail-btn { padding: 7px 10px; font-size: 12.5px; white-space: normal; line-height: 1.3; }

/* ── Topbar · crumb `area › panel`, 🔍 / ✦ utility buttons ── */
.topbar .crumb { white-space: nowrap; }
.topbar .crumb-sep { margin: 0 7px; color: var(--faint); }
.topbar-btn {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,0.45); color: var(--ink-2); cursor: pointer; white-space: nowrap;
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.8px;
  transition: background .2s, color .2s, border-color .2s;
}
.topbar-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.topbar-btn kbd { font-family: "JetBrains Mono", monospace; font-size: 9.5px; padding: 1px 5px; background: rgba(255,255,255,0.6); border: 1px solid var(--line); border-radius: 3px; color: var(--ink); }
.topbar-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.topbar-btn:hover kbd { background: rgba(243,238,226,0.15); color: var(--paper); border-color: rgba(243,238,226,0.4); }
.topbar-btn.accent { color: var(--accent); border-color: rgba(176,74,47,0.4); background: rgba(176,74,47,0.06); }
.topbar-btn.accent:hover, .topbar-btn.accent[aria-expanded="true"] { background: var(--accent); color: var(--paper); border-color: var(--accent); }
@media (max-width: 600px) { .topbar-btn .tb-word { display: none; } .topbar-btn { padding: 6px 9px; } }

/* ── Phone sub-nav · the active area's panels as a segmented control (rendered by shell.js) ── */
.subnav { display: none; }
@media (max-width: 880px) {
  .subnav { display: flex; gap: 6px; flex-shrink: 0; padding: 8px 14px; overflow-x: auto; scrollbar-width: none; background: var(--paper-2); border-bottom: 1px solid var(--line); }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav[hidden] { display: none; }
  .subnav-btn {
    flex: 0 0 auto; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
    background: rgba(255,255,255,0.5); color: var(--ink-2); cursor: pointer; white-space: nowrap;
    font-family: "Inter", sans-serif; font-size: 12px; font-weight: 500;
  }
  .subnav-btn.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
}

/* ── Phone bottom bar · five areas + ⋯ ── */
.bottombar { display: none; }
.more-scrim { display: none; }
@media (max-width: 880px) {
  .bottombar {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 5px 4px calc(5px + env(safe-area-inset-bottom, 0px));
    background: var(--paper-2); border-top: 1px solid var(--line);
  }
  .bottombar .area-btn, .bottombar .bb-more {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: auto; min-width: 0;
    padding: 6px 2px 4px; border: none; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer;
    font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.2px; line-height: 1;
  }
  .bottombar .area-btn span, .bottombar .bb-more span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bottombar .ai { width: 20px; height: 20px; color: inherit; }
  .bottombar .area-btn.active { color: var(--accent); background: rgba(176,74,47,0.06); }
  .bottombar .bb-more[aria-expanded="true"] { color: var(--ink); }
  .work-scroll { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .toast-tray { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

  /* the rail is repurposed as the ⋯ sheet: areas hide, the foot (lock · users · privacy · info · tour · search · AI · KO|EN · wipe) slides up */
  .rail {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; max-width: none; height: auto; max-height: 82dvh;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-right: none; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0;
    background: var(--paper); box-shadow: 0 -20px 60px rgba(20,17,13,0.22);
    transform: translateY(105%); transition: transform .25s cubic-bezier(.2,.8,.2,1);
    z-index: 60; overflow-y: auto;
  }
  body.more-open .rail { transform: translateY(0); }
  .rail .mark, .rail .rail-areas { display: none; }
  .rail .rail-foot { margin-top: 0; padding-top: 4px; border-top: none; gap: 2px; }
  .rail .rail-foot .rail-btn { font-size: 12px; padding: 11px 12px; }
  .rail .rail-foot::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 10px; }
  .more-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(20,17,13,0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
  body.more-open .more-scrim { display: block; animation: fadeIn .2s ease-out; }
}

/* ── AI drawer · right-side workbench (phone: full-screen sheet) ── */
.ai-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); z-index: 65;
  display: flex; flex-direction: column;
  background: var(--paper); border-left: 1px solid var(--line); box-shadow: -24px 0 80px rgba(20,17,13,0.18);
  transform: translateX(105%); visibility: hidden;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s;
}
.ai-drawer.open { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.ai-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 22px 12px; border-bottom: 1px solid var(--line); background: var(--paper-2); flex-shrink: 0; }
.ai-drawer-title .panel-num { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 1.5px; color: var(--muted); }
.ai-drawer-title h3 { font-family: "Fraunces", "Noto Serif KR", serif; font-weight: 300; font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; margin-top: 4px; }
.ai-drawer-title h3 em { font-style: italic; color: var(--accent); font-weight: 400; }
.ai-drawer .close-x, .gsearch .close-x {
  width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; transition: background .2s, color .2s;
}
.ai-drawer .close-x:hover, .gsearch .close-x:hover { background: var(--ink); color: var(--paper); }
.ai-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 22px 48px; }
.ai-drawer-body .badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ai-drawer-body .panel-blurb { font-size: 14px; margin-bottom: 16px; max-width: none; }
.ai-drawer .ai-shell { display: flex; flex-direction: column; gap: 16px; }
.ai-drawer .ai-input textarea { min-height: 150px; }
.ai-drawer .ai-output { min-height: 160px; }
@media (min-width: 1500px) { body.ai-open .work-col { margin-right: 560px; } }
@media (max-width: 880px) { .ai-drawer { width: 100vw; border-left: none; box-shadow: none; } .ai-drawer-body { padding: 14px 16px 40px; } }

/* ── Global search overlay (⌘K) · 이동·명령 list + 코드 table ── */
.search-scrim {
  position: fixed; inset: 0; z-index: 95; display: none; align-items: flex-start; justify-content: center;
  background: rgba(20,17,13,0.4); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  padding: 7vh 24px 24px;
}
.search-scrim.open { display: flex; animation: fadeIn .15s ease-out; }
.gsearch {
  width: 100%; max-width: 980px; max-height: 84vh; min-height: min(62vh, 560px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 24px 80px rgba(20,17,13,0.3);
}
.gsearch-input-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.gsearch-input-row .icon { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
.gsearch-input-row input { flex: 1 1 auto; min-width: 0; border: none; background: transparent; font-family: "Inter", sans-serif; font-size: 16px; color: var(--ink); outline: none; }
.gsearch-input-row input::placeholder { color: var(--faint); font-style: italic; }
.gsearch-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.search-scrim.has-query .gsearch-body { grid-template-columns: minmax(240px, 1fr) minmax(0, 2.2fr); }
.gsearch-nav { min-height: 0; min-width: 0; overflow-y: auto; border-right: 1px solid var(--line); }
.gsearch-codes { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.gsearch-codes-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 16px 8px; border-bottom: 1px solid var(--line-2); flex-shrink: 0; }
.gsearch-codes-head .palette-section-label { padding: 0; }
.gsearch-codes-head .search-filters { margin: 0; justify-content: flex-start; gap: 6px; }
.gsearch-codes-head .filter-chip { padding: 4px 10px; font-size: 9px; }
.gsearch-codes-head .summary { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--muted); letter-spacing: 0.5px; }
.gsearch-codes-head .summary strong { color: var(--ink); font-weight: 600; }
.gsearch-codes .result { flex: 1 1 auto; min-height: 120px; max-height: none; border: none; border-radius: 0; background: transparent; overflow: auto; }
.gsearch-codes .result .empty { padding: 40px 24px; font-size: 14px; }
.gsearch .palette-foot { flex-shrink: 0; align-items: center; }
.gsearch .palette-foot .link { margin-left: auto; background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font: inherit; text-transform: none; letter-spacing: 0; }
@media (max-width: 880px) {
  .search-scrim { padding: 0; }
  .gsearch { max-width: none; max-height: none; height: 100dvh; border: none; border-radius: 0; }
  .gsearch-body, .search-scrim.has-query .gsearch-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, auto) minmax(0, 1fr); }
  .gsearch-nav { border-right: none; border-bottom: 1px solid var(--line); max-height: 36vh; }
  .search-scrim.has-query .gsearch-nav { max-height: 26vh; }
  .gsearch .palette-foot { display: none; }
  /* phone: drop the secondary code columns (분류 · 가격/메모 · 기준일) so 코드 · 명칭 · 우리 단가 · 삽입 stay readable */
  #search-result th:nth-child(4), #search-result td:nth-child(4),
  #search-result th:nth-child(6), #search-result td:nth-child(6),
  #search-result th:nth-child(9), #search-result td:nth-child(9) { display: none; }
}

/* ── 홈 · task-first sections ── */
.home-sec { margin: 0 0 26px; }
.home-h { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; display: flex; align-items: baseline; gap: 8px; }
.home-count { font-size: 9.5px; color: var(--paper); background: var(--accent); border-radius: 999px; padding: 1px 7px; letter-spacing: 0.5px; }
.home-count[hidden] { display: none; }
.home-sec .today-nudges { margin: 0 0 8px; }
.todo-list { display: flex; flex-direction: column; gap: 8px; }
.todo {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 14px; background: rgba(255,255,255,0.55); border: 1px solid var(--line); border-left: 3px solid var(--celadon); border-radius: 6px;
  cursor: pointer; transition: background .2s, transform .15s;
}
.todo:hover { background: rgba(255,255,255,0.8); transform: translateX(2px); }
.todo.warn { border-left-color: var(--warn); }
.todo.urgent { border-left-color: var(--accent); background: rgba(176,74,47,0.06); }
.todo.over { border-left-color: var(--accent); }
.todo.step { border-left-color: var(--celadon-2); }
.todo-when { font-family: "Fraunces", serif; font-weight: 300; font-size: 20px; letter-spacing: -0.02em; min-width: 64px; text-align: center; color: var(--ink); font-variant-numeric: tabular-nums; }
.todo.urgent .todo-when, .todo.over .todo-when { color: var(--accent); }
.todo-when em { font-style: italic; color: var(--muted); font-size: 12px; font-weight: 400; }
.todo.step .todo-when { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--celadon-2); }
.todo-title { font-family: "Fraunces", "Noto Serif KR", serif; font-size: 15.5px; color: var(--ink); line-height: 1.3; }
.todo-meta { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--muted); letter-spacing: 0.4px; margin-top: 3px; }
.todo .btn.sm { white-space: nowrap; }
.todo-empty { padding: 20px 16px; font-family: "Fraunces", "Noto Serif KR", serif; font-style: italic; color: var(--muted); font-size: 14px; background: rgba(255,255,255,0.35); border: 1px dashed var(--line); border-radius: 6px; }
.home-fold { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,0.4); padding: 0 18px; }
.home-fold summary { list-style: none; cursor: pointer; padding: 14px 0; display: flex; align-items: center; gap: 10px; }
.home-fold summary::-webkit-details-marker { display: none; }
.home-fold summary::before { content: "▸"; font-family: "JetBrains Mono", monospace; color: var(--accent); transition: transform .2s; }
.home-fold[open] summary::before { transform: rotate(90deg); }
.home-fold summary .home-h { margin: 0; }
.home-fold > :not(summary) { margin-bottom: 16px; }
@media (max-width: 600px) {
  .todo { grid-template-columns: auto minmax(0, 1fr); }
  .todo .btn.sm { grid-column: 1 / -1; justify-content: center; }
  .todo-when { min-width: 48px; font-size: 17px; }
}

/* ── 청구 › 청구 배치 landing · batch card + 3-step progress ── */
.claims-batch-card { margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,0.55); }
.claims-batch-card .cb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink); margin-bottom: 10px; }
.claims-batch-card .cb-head .code { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--muted); }
.claims-batch-card .pill, .claims-step .cs-state { display: inline-block; padding: 2px 8px; border-radius: 3px; font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: 0.6px; text-transform: uppercase; background: rgba(20,17,13,0.06); color: var(--muted); }
.claims-batch-card .pill.ok { background: rgba(74,122,79,0.13); color: var(--ok); }
.claims-batch-card .pill.warn { background: rgba(184,122,28,0.15); color: var(--warn); }
.cb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px 12px; }
.cb-cell .cb-k { display: block; font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.cb-cell .cb-v { font-family: "Fraunces", serif; font-size: 20px; font-weight: 300; color: var(--ink); font-variant-numeric: tabular-nums; }
.claims-steps { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.claims-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 6px; background: rgba(255,255,255,0.5); }
.claims-step.done { border-left-color: var(--ok); }
.claims-step.todo { border-left-color: var(--warn); }
.claims-step.need { border-left-color: var(--accent); }
.claims-step.soon { opacity: 0.65; border-style: dashed; }
.cs-n { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", monospace; font-size: 12px; border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,0.7); }
.claims-step.done .cs-n { background: var(--ok); color: var(--paper); border-color: var(--ok); }
.cs-title { font-family: "Fraunces", "Noto Serif KR", serif; font-size: 16px; color: var(--ink); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.claims-step.done .cs-state { background: rgba(74,122,79,0.13); color: var(--ok); }
.claims-step.todo .cs-state { background: rgba(184,122,28,0.15); color: var(--warn); }
.claims-step.need .cs-state { background: rgba(176,74,47,0.13); color: var(--accent); }
.cs-detail { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.45; }
.claims-step .btn.sm { white-space: nowrap; }
@media (max-width: 600px) {
  .claims-step { grid-template-columns: auto minmax(0, 1fr); }
  .claims-step .btn { grid-column: 1 / -1; justify-content: center; }
}
.batch-strip.compact { padding: 8px 12px; }
.drop.flash { animation: claims-flash 1.2s ease-out 1; }

/* ── 환자 › 접수 보드 — the pid picker must shrink on a phone (its longest EN option is wider than the viewport) ── */
#tab-board .intake-add select#intake-name { flex: 1 1 150px; min-width: 0; max-width: 100%; }

/* ── 조직 › 데이터 처리 현황 · 기관 프로필 · 마스터 업로드 panels ── */
.privacy-card .sec-tabs { margin-top: 0; }
.privacy-card .sec-table-wrap { max-height: 58vh; }
#tab-org .org-form .org-grid { grid-template-columns: 1.4fr 1fr 1fr 0.8fr 1fr; }
@media (max-width: 880px) { #tab-org .org-form .org-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { #tab-org .org-form .org-grid { grid-template-columns: 1fr; } }

/* ── 청구 배치 landing (UX polish) — upload card full width, then one progress column per 보험유형 (자보 · 건보) ── */
.claims-landing { display: flex; flex-direction: column; gap: 22px; }
.claims-progress-h { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; display: flex; align-items: baseline; gap: 8px; }
.claims-progress-h .step { color: var(--accent); font-weight: 600; }
.claims-progress .claims-payer { padding: 14px 16px 12px; background: rgba(255,255,255,0.5); }
.claims-progress .claims-payer-h { margin-bottom: 12px; font-size: 15px; color: var(--ink); }
.claims-progress .claims-payer-h .pill { white-space: nowrap; flex-shrink: 0; }
.claims-progress .claims-batch-card .cb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.claims-progress .claims-batch-card .cb-head strong { overflow-wrap: anywhere; }
.claims-progress .claims-step { padding: 12px 14px; gap: 12px; }
.claims-progress .cs-title { font-size: 15.5px; }
@media (max-width: 600px) { .claims-progress .claims-batch-card .cb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Korean table cells keep words together (no character-per-line columns); the dense ledgers scroll sideways inside .result instead */
th, td, .cs-title, .cs-detail, .todo-title, .cb-head { word-break: keep-all; }
#jabo-recon-result table, #nhis-recon-result table { min-width: 880px; }
#appeal-list table, #appeal-candidates table { min-width: 720px; }
.total-strip { flex-wrap: wrap; gap: 6px 14px; }
.total-strip .label { white-space: nowrap; }
.total-strip .value { text-align: right; font-size: clamp(18px, 1.8vw, 26px); margin-left: auto; }
@media (min-width: 881px) { #tab-guarantee .p3-table { min-width: 880px; } #tab-docs .p3-table, #tab-consent .p3-table { min-width: 760px; } }

/* Welcome footer — the walkthrough link */
.welcome .footer-row .welcome-foot { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.welcome .footer-row .link { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font: inherit; font-weight: 500; }

/* ── Guided tour card (js/tour.js) — fixed bottom-right; phone: above the bottom bar ── */
.tour-card {
  position: fixed; right: 22px; bottom: 22px; z-index: 70; width: min(380px, calc(100vw - 32px));
  padding: 14px 16px 12px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px;
  background: var(--paper); box-shadow: 0 18px 50px rgba(20,17,13,0.22); animation: fadeIn .2s ease-out;
}
.tour-card[hidden], .tour-card .btn[hidden] { display: none !important; }
.tour-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.tour-n { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 1.4px; color: var(--muted); }
.tour-card .close-x { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; }
.tour-card .close-x:hover { background: var(--ink); color: var(--paper); }
.tour-title { font-family: "Fraunces", "Noto Serif KR", serif; font-weight: 400; font-size: 17px; color: var(--ink); margin: 0 0 6px; letter-spacing: -0.01em; }
.tour-body { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 0 0 12px; word-break: keep-all; }
.tour-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tour-actions .spacer { flex: 1 1 auto; }
.tour-actions .btn.sm { padding: 6px 12px; font-size: 11px; }
.tour-target { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 8px; }
body.tour-open .work-scroll { padding-bottom: 200px; }
@media (max-width: 880px) {
  .tour-card { right: 12px; left: 12px; width: auto; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body.tour-open .work-scroll { padding-bottom: calc(260px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Canonical panel flow — every panel that consumes or produces records reads the same way:
   ① 샘플 · 시연 (sample file + run demo) → ② 데이터 올리기 / 입력 → ③ 결과 검토 (status · summary · table) → ④ 내보내기 · 다음 단계.
   Same marker (①②③④, mono, accent), same titles (flow.step1..4), same components (.status · .empty · .actions). ── */
.flow { display: flex; flex-direction: column; gap: 18px; }
.flow-step {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: baseline;
  padding: 20px 22px 22px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,0.5);
}
.flow-step::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: 0.7;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='1'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 0.06 0'/></filter><rect width='100' height='100' filter='url(%23n)'/></svg>");
}
.flow-step > .step { grid-column: 1; font-family: "JetBrains Mono", monospace; font-size: 19px; line-height: 1; color: var(--accent); font-weight: 500; }
.flow-step > h4 {
  grid-column: 2; margin: 0; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted);
}
.flow-step > h4 .count { margin-left: auto; font-size: 10px; letter-spacing: 1px; color: var(--muted); text-transform: none; }
.flow-step > h4 .sub { font-size: 10.5px; letter-spacing: 0.6px; text-transform: none; color: var(--faint); }
.flow-step > .flow-body { grid-column: 1 / -1; min-width: 0; margin-top: 14px; }
/* ① — one compact row: the sentence + [샘플 파일 받기] [▶ 샘플로 시연] */
.flow-step[data-step="1"] { padding: 14px 22px 16px; border-left: 3px solid var(--accent); }
.flow-step[data-step="1"] > .flow-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 10px; }
.flow-step[data-step="1"] > .flow-body > p { flex: 1 1 320px; margin: 0; font-family: "Fraunces", "Noto Serif KR", serif; font-style: italic; font-size: 14px; line-height: 1.45; color: var(--ink-2); word-break: keep-all; }
.flow-step[data-step="1"] > .flow-body > p strong { font-style: normal; font-family: "Inter", sans-serif; font-weight: 500; color: var(--ink); }
.flow-step[data-step="1"] > .flow-body > .actions { flex: 0 1 auto; margin-left: auto; }
/* action rows (① samples · ④ exports + hand-offs) */
.flow-step .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.flow-step .actions .act { display: inline-flex; align-items: center; gap: 8px; }
.flow-step .actions .act-k { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.flow-step .actions .spacer { flex: 1 1 auto; }
.flow-step .actions .act-note { flex: 1 1 260px; min-width: 0; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.3px; color: var(--muted); line-height: 1.5; word-break: keep-all; }
.flow-step .actions .btn .play { font-size: 9px; }
.flow-step .actions select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,0.7); font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink); }
/* sub-heads inside a step (e.g. 수기 단건 정산 · 파기 대장) */
.flow-h5 { margin: 22px 0 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.flow-h5:first-child { margin-top: 0; }
.flow-h5 .count { font-size: 9.5px; color: var(--paper); background: var(--accent); border-radius: 999px; padding: 1px 7px; letter-spacing: 0.5px; }
.flow-h5 .ghost { padding: 4px 9px; border: 1px solid var(--line); border-radius: 4px; background: transparent; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink-2); cursor: pointer; }
.flow-h5 .ghost:hover { border-color: var(--ink); background: rgba(255,255,255,0.6); }
/* 인증 자체점검 ③ — the auto-judged items restated with their reasons (the checkable list stays in ②) */
.accred-auto-list { display: flex; flex-direction: column; margin-top: 12px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,0.5); }
.accred-auto-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 14px; border-bottom: 1px solid var(--line-2); font-size: 13px; color: var(--ink); }
.accred-auto-row:last-child { border-bottom: none; }
.accred-auto-row .check { width: 20px; text-align: center; font-family: "JetBrains Mono", monospace; font-weight: 700; }
.accred-auto-row.ok .check { color: var(--ok); } .accred-auto-row.warn .check { color: var(--warn); } .accred-auto-row.bad .check { color: var(--accent); }
.accred-auto-row .item-meta { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
/* the format hint under a drop zone + the [열 이름 보기] disclosure */
.hint.cols { display: block; margin-top: 8px; font-family: "JetBrains Mono", monospace; text-transform: none; letter-spacing: 0.3px; font-size: 10.5px; color: var(--ink-2); line-height: 1.6; word-break: keep-all; }
.hint.cols.cols-out { text-align: center; margin: 10px 0 0; }
details.schema { padding: 10px 14px; }
details.schema > summary { cursor: pointer; list-style: none; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
details.schema > summary::-webkit-details-marker { display: none; }
details.schema > summary::before { content: "▸ "; color: var(--accent); }
details.schema[open] > summary::before { content: "▾ "; }
details.schema[open] > summary { margin-bottom: 8px; }
/* ③ status line — one component, always first in the step */
.status {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 0 0 12px;
  background: rgba(123,168,154,0.10); border-left: 2px solid var(--celadon); border-radius: 4px;
  font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-2); line-height: 1.5; word-break: keep-all;
}
.status.warn { background: rgba(184,122,28,0.12); border-color: var(--warn); }
.status.err  { background: rgba(176,74,47,0.10);  border-color: var(--accent); }
.status .dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--celadon-2); }
.status.warn .dot { background: var(--warn); }
.status.err  .dot { background: var(--accent); }
.status + .status { margin-top: -4px; }
/* ③ empty state — the same two lines everywhere: what to do, and where the sample is */
.empty { padding: 40px 24px; text-align: center; color: var(--muted); font-family: "Fraunces", "Noto Serif KR", serif; font-style: italic; font-size: 15.5px; line-height: 1.5; word-break: keep-all; }
.empty p { margin: 0; }
.empty .empty-hint { margin-top: 8px; font-family: "JetBrains Mono", monospace; font-style: normal; font-size: 10.5px; letter-spacing: 0.3px; color: var(--faint); }
.empty.small { padding: 18px; font-size: 13px; }
.result-toolbar { margin-bottom: 10px; }
.result-toolbar:last-child { margin-bottom: 0; }
.result-toolbar .summary { line-height: 1.6; }
@media (max-width: 600px) {
  .flow-step { padding: 16px 14px 18px; }
  .flow-step[data-step="1"] { padding: 12px 14px 14px; }
  .flow-step[data-step="1"] > .flow-body > .actions, .flow-step[data-step="4"] .actions { margin-left: 0; width: 100%; }
  .flow-step .actions .btn { flex: 1 1 auto; justify-content: center; }
  .flow-step .actions .act { flex: 1 1 100%; justify-content: space-between; }
  .flow-step .actions .spacer { display: none; }
}

/* ── Print · reduced motion ── */
@media print { .ai-drawer, .search-scrim, .bottombar, .subnav, .more-scrim, .tour-card { display: none !important; } .home-fold { border: none; padding: 0; } .tour-target { outline: none; } }
@media (prefers-reduced-motion: reduce) {
  .ai-drawer, .rail, .area-panels.active, .search-scrim.open, .more-scrim, .home-fold summary::before, .todo, .drop.flash, .tour-card { transition: none !important; animation: none !important; }
}