* { box-sizing: border-box; }
html, body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; background: #f5f5f7; color: #222; }

/* login */
.login-body { display: grid; place-items: center; min-height: 100vh; }
.login-card { background: white; padding: 32px 28px; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,.08); width: 280px; text-align: center; }
.login-card h1 { margin: 0 0 16px; font-size: 22px; }
.login-card input { width: 100%; padding: 12px 16px; font-size: 24px; letter-spacing: 8px; text-align: center; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 12px; }
.login-card button { width: 100%; padding: 12px; font-size: 16px; background: #007aff; color: white; border: 0; border-radius: 8px; cursor: pointer; }
.login-card .err { color: #d11; font-size: 13px; margin-top: 12px; }

/* layout */
header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: white; border-bottom: 1px solid #e5e5ea; }
header h1 { margin: 0; font-size: 18px; }
header .actions button { background: transparent; border: 0; font-size: 18px; cursor: pointer; padding: 4px 8px; }

main { width: 100%; margin: 0; padding: 16px; display: grid; gap: 16px; grid-template-columns: 1fr 1fr; grid-template-areas: "modes modes" "input output" "input plan"; }
nav#modes { grid-area: modes; display: flex; flex-wrap: wrap; gap: 6px; }
/* #ext-links 줄 = 2026-08-08 삭제 — POP-Q 링크는 #input-head 우측(#popq-link)으로 이동 */
#input-area { grid-area: input; display: flex; flex-direction: column; }
#output { grid-area: output; }
@media (max-width: 900px) { main { grid-template-columns: 1fr; grid-template-areas: "modes" "input" "output" "plan"; } }
.mode-btn { padding: 8px 14px; border: 1px solid #c8c8cc; background: white; border-radius: 18px; cursor: pointer; font-size: 14px; }
.ext-link { padding: 8px 14px; border: 1px solid #c8c8cc; background: white; border-radius: 18px; font-size: 14px; text-decoration: none; color: #222; display: inline-flex; align-items: center; gap: 4px; }
.ext-link:hover { border-color: #007aff; color: #007aff; }
.mode-btn.active { background: #007aff; color: white; border-color: #007aff; }

#input-area { background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e5ea; }
#prompt, #prev-chart { width: 100%; resize: vertical; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; padding: 8px; border: 1px solid #e5e5ea; border-radius: 6px; }
.io-label { display: block; font-size: 12px; color: var(--muted, #666); margin: 0 0 4px; }
.io-label span { color: var(--muted, #999); opacity: .75; }
#prev-chart-wrap { margin-bottom: 10px; }
#prev-chart { min-height: 13vh; }
.input-controls { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.input-controls button { padding: 8px 14px; font-size: 14px; border: 1px solid #c8c8cc; background: white; border-radius: 6px; cursor: pointer; }
.input-controls button.primary { background: #007aff; color: white; border-color: #007aff; }
.input-controls button.danger { background: #d11; color: white; border-color: #d11; }
.input-controls button:disabled { opacity: .4; cursor: not-allowed; }
.img-attach { padding: 8px 12px; border: 1px dashed #c8c8cc; border-radius: 6px; cursor: pointer; font-size: 13px; }
#image-name { margin-left: 6px; color: #555; }
#active-mode { margin-top: 8px; font-size: 13px; color: #666; }

#output { background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e5ea; }
.out-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #e5e5ea; }
.out-header h2 { margin: 0; font-size: 13px; font-weight: 500; color: var(--muted, #666); }
.out-controls { display: flex; gap: 6px; }
.out-controls button { font-size: 13px; padding: 4px 10px; background: white; border: 1px solid #c8c8cc; border-radius: 6px; cursor: pointer; }
#result { word-break: break-word; font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", sans-serif; font-size: 14.5px; line-height: 1.65; min-height: 30vh; margin: 0; padding: 8px 12px; background: #fafafa; border-radius: 6px; }
#result:empty::before { content: attr(data-empty); color: var(--muted, #999); font-size: 13px; }
/* 마크다운 렌더 요소 */
#result > :first-child { margin-top: 0; }
#result h1, #result h2, #result h3, #result h4 { margin: 14px 0 6px; line-height: 1.35; color: var(--primary, #007aff); }
#result h1 { font-size: 18px; } #result h2 { font-size: 16.5px; } #result h3 { font-size: 15.5px; } #result h4 { font-size: 14.5px; }
#result p { margin: 6px 0; }
#result ul, #result ol { margin: 6px 0; padding-left: 22px; }
#result li { margin: 2px 0; }
#result table { border-collapse: collapse; margin: 10px 0; font-size: 13.5px; display: block; overflow-x: auto; max-width: 100%; }
#result th, #result td { border: 1px solid var(--border, #d0d0d5); padding: 5px 10px; text-align: left; vertical-align: top; }
#result th { background: var(--card, #f0f0f3); font-weight: 600; white-space: nowrap; }
#result tbody tr:nth-child(even) { background: var(--cite-bg, #f6f6f8); }
#result code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; background: var(--card, #ececf0); padding: 1px 5px; border-radius: 4px; }
#result pre { background: var(--card, #f0f0f3); padding: 10px 12px; border-radius: 6px; overflow-x: auto; }
#result pre code { background: none; padding: 0; }
#result blockquote { margin: 8px 0; padding: 4px 12px; border-left: 3px solid var(--border, #c8c8cc); color: var(--muted, #555); }
#result hr { border: none; border-top: 1px solid var(--border, #d0d0d5); margin: 12px 0; }
#result pre.r-plain { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; background: none; padding: 0; margin: 0; }
#prompt { flex: 1 1 auto; min-height: 20vh; }
/* 모바일: iOS 사파리가 16px 미만 입력 포커스 시 자동 줌 → 16px로 방지 */
@media (max-width: 900px) {
  #prompt { font-size: 16px; }
}

/* 임상 계산기 모달 */
.calc-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.calc-tab { padding: 6px 14px; border: 1px solid var(--border, #c8c8cc); background: var(--card, white); color: var(--fg, #222); border-radius: 18px; cursor: pointer; font-size: 13px; }
.calc-tab.active { background: var(--primary, #007aff); color: white; border-color: var(--primary, #007aff); }
.calc-pane { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.calc-pane.hidden { display: none; }
.calc-meta { font-size: 12px; color: var(--muted, #777); padding: 6px 8px; background: var(--result-bg, #fafafa); border-radius: 6px; }
.calc-pane label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted, #555); }
.calc-pane label input, .calc-pane label select { padding: 8px 10px; font-size: 14px; border: 1px solid var(--border, #e5e5ea); border-radius: 6px; background: var(--result-bg, #fafafa); color: var(--fg, #222); }
.calc-run { padding: 10px 16px; background: var(--primary, #007aff); color: white; border: 0; border-radius: 6px; cursor: pointer; font-size: 14px; align-self: flex-start; }
.calc-out { padding: 10px 12px; background: var(--cite-bg, #f0f4ff); border: 1px solid var(--cite-border, #c8d4ff); border-radius: 6px; font-size: 14px; color: var(--fg, #222); min-height: 24px; }
.calc-out:empty { display: none; }
.chemo-block { border: 1px solid var(--border, #e5e5ea); border-radius: 6px; padding: 8px 12px; margin-top: 8px; background: var(--result-bg, #fafafa); }
.chemo-block legend { font-size: 12px; font-weight: 600; color: var(--primary, #007aff); padding: 0 6px; }
.popq-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.popq-grid label { font-size: 12px; }
.popq-table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 13px; }
.popq-table td { padding: 4px 8px; border: 1px solid var(--cite-border, #c8d4ff); }
.popq-table td:nth-child(odd) { color: var(--muted, #557); font-weight: 600; }

/* 외부 도구 모달 카드 리스트 */
#tools-list { display: flex; flex-direction: column; gap: 8px; }
.tool-card { display: block; padding: 12px 14px; background: var(--result-bg, #fafafa); border: 1px solid var(--border, #e5e5ea); border-radius: 8px; text-decoration: none; color: var(--fg, #222); transition: border-color .15s, transform .05s; }
.tool-card:hover { border-color: var(--primary, #007aff); }
.tool-card:active { transform: scale(.99); }
.tool-card .tc-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; color: var(--primary, #007aff); }
.tool-card .tc-desc { font-size: 12px; color: var(--muted, #666); }
.tool-card .tc-url { font-size: 11px; color: var(--muted, #888); margin-top: 4px; word-break: break-all; }

/* citations toggle (📚 — dxtx 모드만) */
#citations { margin-top: 12px; }
#citations.hidden { display: none; }
#citations details { background: var(--cite-bg, #f0f4ff); border: 1px solid var(--cite-border, #c8d4ff); border-radius: 6px; padding: 6px 10px; }
#citations summary { cursor: pointer; font-size: 13px; color: var(--cite-summary, #335); padding: 4px 0; user-select: none; }
#citations summary:hover { color: var(--primary, #007aff); }
#citations .cite { margin-top: 8px; padding: 6px 8px; background: var(--card, white); border: 1px solid var(--cite-border, #e0e8ff); border-radius: 4px; }
#citations .cite-head { font-size: 12px; color: var(--cite-summary, #557); font-weight: 600; margin-bottom: 4px; }
#citations .cite-body { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--fg, #333); max-height: 200px; overflow-y: auto; margin: 0; padding: 4px; background: var(--result-bg, #fafafa); border-radius: 4px; }

/* ── 결과 영역 시각 강조 (■ 헤더 / ★ 강조 / 인용) ── */
.r-header { display: inline-block; font-weight: 700; color: var(--primary, #007aff); font-size: 15px; padding-top: 4px; }
.r-star { color: var(--star, #d11); font-weight: 700; }

/* ── 다크 모드 ── */
:root {
  --bg: #f5f5f7;
  --fg: #222;
  --muted: #666;
  --card: #ffffff;
  --border: #e5e5ea;
  --result-bg: #fafafa;
  --primary: #007aff;
  --star: #d11;
  --cite-bg: #f0f4ff;
  --cite-border: #c8d4ff;
  --cite-summary: #335;
}
[data-theme="dark"] {
  --bg: #1c1c1e;
  --fg: #e5e5e7;
  --muted: #98989d;
  --card: #2c2c2e;
  --border: #3a3a3c;
  --result-bg: #1c1c1e;
  --primary: #0a84ff;
  --star: #ff6961;
  --cite-bg: #1f2937;
  --cite-border: #3b475a;
  --cite-summary: #a8b3c4;
}
html, body { background: var(--bg); color: var(--fg); }
header { background: var(--card); border-bottom-color: var(--border); }
#input-area, #output, #plan-output { background: var(--card); border-color: var(--border); }
#result, #plan-result { background: var(--result-bg); color: var(--fg); }
#prompt, #prev-chart { background: var(--result-bg); color: var(--fg); border-color: var(--border); }
.mode-btn { background: var(--card); color: var(--fg); border-color: var(--border); }
.mode-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
.ext-link { background: var(--card); color: var(--fg); border-color: var(--border); }
.ext-link:hover { border-color: var(--primary); color: var(--primary); }
.input-controls button { background: var(--card); color: var(--fg); border-color: var(--border); }
.input-controls button.primary { background: var(--primary); color: white; border-color: var(--primary); }
.out-controls button { background: var(--card); color: var(--fg); border-color: var(--border); }
.out-header { border-bottom-color: var(--border); }
#active-mode { color: var(--muted); }
.img-attach { border-color: var(--border); color: var(--fg); }
#image-name { color: var(--muted); }
.modal-card { background: var(--card); color: var(--fg); }
.modal-card textarea { background: var(--result-bg); color: var(--fg); border-color: var(--border); }
.modal-actions button { background: var(--card); color: var(--fg); border-color: var(--border); }
.modal-actions button.primary { background: var(--primary); color: white; border-color: var(--primary); }
header .actions button { color: var(--fg); }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: grid; place-items: center; z-index: 100; }
.modal.hidden { display: none; }
.modal-card { background: white; width: 90%; max-width: 720px; max-height: 85vh; overflow: auto; padding: 20px; border-radius: 10px; }
.modal-card h2 { margin: 0 0 12px; }
.modal-card textarea { width: 100%; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; padding: 8px; border: 1px solid #e5e5ea; border-radius: 6px; }
.modal-actions { margin-top: 12px; display: flex; justify-content: flex-end; gap: 8px; }
.modal-actions button { padding: 8px 14px; font-size: 14px; border: 1px solid #c8c8cc; background: white; border-radius: 6px; cursor: pointer; }
.modal-actions button.primary { background: #007aff; color: white; border-color: #007aff; }

/* ── 탭 바 (모드 = 탭) ── */
nav#modes { border-bottom: 1px solid var(--border, #e5e5ea); padding-bottom: 8px; }

/* ── 수술 기록지(opnote) 전용 워크스페이스 ── */
#opnote-workspace { grid-column: 1 / -1; }
#opnote-workspace.hidden { display: none; }
.op-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .op-grid { grid-template-columns: 1fr; } }
.op-input, .op-output { background: var(--card, #fff); border: 1px solid var(--border, #e5e5ea); border-radius: 8px; padding: 12px; }
.op-panel-head, .op-out-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border, #e5e5ea); flex-wrap: wrap; }
.op-panel-head h2, .op-out-head h2 { margin: 0; font-size: 15px; color: var(--fg, #222); }
.op-approach { font-size: 13px; color: var(--muted, #666); display: flex; align-items: center; gap: 6px; }

/* segmented control (접근법) */
.seg { display: inline-flex; border: 1px solid var(--border, #c8c8cc); border-radius: 8px; overflow: hidden; }
.seg-btn { padding: 6px 12px; font-size: 13px; background: var(--card, #fff); color: var(--fg, #222); border: 0; border-right: 1px solid var(--border, #c8c8cc); cursor: pointer; }
.seg-btn:last-child { border-right: 0; }
.seg-btn.active { background: var(--primary, #007aff); color: #fff; }

/* 기구 선택 패널 */
.op-instruments { margin-bottom: 10px; border: 1px solid var(--border, #e5e5ea); border-radius: 8px; padding: 8px 10px; background: var(--result-bg, #fafafa); }
.op-instruments > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--fg, #222); user-select: none; }
.instr-count { font-size: 12px; color: var(--primary, #007aff); font-weight: 600; margin-left: 6px; }
.instr-group { margin-top: 10px; }
.instr-group-label { font-size: 12px; color: var(--muted, #666); margin-bottom: 5px; }
.instr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; padding: 5px 11px; font-size: 13px; border: 1px solid var(--border, #c8c8cc); border-radius: 16px; background: var(--card, #fff); color: var(--fg, #222); cursor: pointer; user-select: none; }
.chip.on { background: var(--primary, #007aff); color: #fff; border-color: var(--primary, #007aff); }
.chip .x { margin-left: 6px; opacity: .7; font-weight: 700; }
.op-instr-custom { display: flex; gap: 6px; margin-top: 10px; }
.op-instr-custom input { flex: 1; padding: 7px 10px; font-size: 14px; border: 1px solid var(--border, #e5e5ea); border-radius: 6px; background: var(--card, #fff); color: var(--fg, #222); }
.op-instr-custom button { padding: 7px 12px; font-size: 13px; border: 1px solid var(--border, #c8c8cc); border-radius: 6px; background: var(--card, #fff); color: var(--fg, #222); cursor: pointer; }

#op-prompt { width: 100%; resize: vertical; min-height: 28vh; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; padding: 8px; border: 1px solid var(--border, #e5e5ea); border-radius: 6px; background: var(--result-bg, #fafafa); color: var(--fg, #222); }
@media (max-width: 900px) { #op-prompt { font-size: 16px; } }

/* 구조화된 결과 카드 */
.op-card { border: 1px solid var(--border, #e5e5ea); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.op-card-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: var(--result-bg, #fafafa); border-bottom: 1px solid var(--border, #e5e5ea); font-size: 13px; font-weight: 700; color: var(--primary, #007aff); }
.op-sec-copy, .op-copy-all { font-size: 12px; padding: 3px 10px; border: 1px solid var(--border, #c8c8cc); border-radius: 6px; background: var(--card, #fff); color: var(--fg, #222); cursor: pointer; }
.op-card-body { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; line-height: 1.5; padding: 8px 10px; color: var(--fg, #222); min-height: 20px; }
.op-card-body:empty::before { content: attr(data-empty); color: var(--muted, #999); font-style: italic; }
.op-card-body[contenteditable]:focus { outline: 1.5px solid var(--primary, #007aff); border-radius: 6px; }
.op-card-inline { display: flex; }
.op-card-inline .op-card-body { flex: 1; min-height: 16px; }
.op-card-inline .op-card-body:first-child { border-right: 1px solid var(--border, #e5e5ea); }
.op-closing { line-height: 1.7; }

/* ── v2 하이브리드 슬롯 입력 ── */
.op-detail { font-size: 13px; color: var(--muted, #666); display: flex; align-items: center; gap: 6px; }
.op-section-label { font-size: 12px; font-weight: 700; color: var(--primary, #007aff); margin: 14px 0 7px; }
.op-slot { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.op-slot > label { flex: 0 0 60px; font-size: 13px; color: var(--muted, #666); text-align: right; }
.op-slot > input[type="text"], .op-slot > select { flex: 1 1 170px; min-width: 130px; padding: 7px 9px; font-size: 14px; border: 1px solid var(--border, #e5e5ea); border-radius: 6px; background: var(--card, #fff); color: var(--fg, #222); }
.op-slot > input[type="number"] { flex: 0 0 120px; padding: 7px 9px; font-size: 14px; border: 1px solid var(--border, #e5e5ea); border-radius: 6px; background: var(--card, #fff); color: var(--fg, #222); }
.op-unit { font-size: 13px; color: var(--muted, #666); }
.op-normal { flex: 0 0 auto; padding: 6px 10px; font-size: 12px; border: 1px solid var(--border, #c8c8cc); border-radius: 6px; background: var(--card, #fff); color: var(--fg, #222); cursor: pointer; }
#op-freenote { width: 100%; resize: vertical; min-height: 64px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; padding: 8px; border: 1px solid var(--border, #e5e5ea); border-radius: 6px; background: var(--result-bg, #fafafa); color: var(--fg, #222); }
@media (max-width: 900px) {
  #op-freenote { font-size: 16px; }
  .op-slot > input[type="text"], .op-slot > input[type="number"], .op-slot > select { font-size: 16px; }
  .op-slot > label { flex-basis: 100%; text-align: left; }
}

/* ── ask 모드 출력 스타일 바 + 전체 리포트 확장 (2026-07-30) ── */
.ask-style-hint { margin-left: 8px; font-size: 11px; color: var(--muted, #666); }
#ask-expand-bar { margin-top: 10px; }
#ask-expand-bar.hidden { display: none; }
#btn-ask-expand {
  padding: 7px 12px; font-size: 13px; cursor: pointer;
  border: 1px solid var(--border, #c8c8cc); border-radius: 6px;
  background: var(--card, #fff); color: var(--fg, #222);
}
#btn-ask-expand:hover { border-color: var(--primary, #007aff); color: var(--primary, #007aff); }

/* ── 2단계 플랜 칸 (chart 모드 전용, 2026-08-07) ───────────────────
   정리(Haiku) → 의사 확인·수정 → 플랜(Sonnet). 아래 전체폭. */
#plan-output { grid-area: plan; background: var(--card, white); padding: 12px; border-radius: 8px; border: 1px solid var(--border, #e5e5ea); }
#plan-output.hidden { display: none; }
#plan-result { display: block; width: 100%; box-sizing: border-box; resize: vertical; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px; line-height: 1.6; min-height: 20vh; margin: 0; padding: 8px 12px;
  border: 1px solid var(--border, #e5e5ea); border-radius: 6px; background: var(--card, #fff); color: var(--fg, #222); }
#btn-plan-run { background: var(--primary, #007aff); color: white; border-color: var(--primary, #007aff); font-weight: 600; }
#btn-plan-run:disabled { opacity: .4; cursor: not-allowed; }

/* 정리본 직접 수정 (플랜 근거를 의사가 승인하는 층) */
#result-edit { width: 100%; resize: vertical; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px; padding: 8px; border: 1px solid var(--border, #e5e5ea); border-radius: 6px;
  background: var(--card, #fff); color: var(--fg, #222); min-height: 30vh; }
#result-edit.hidden { display: none; }
#btn-edit.hidden { display: none; }
#btn-edit.editing { background: var(--primary, #007aff); color: white; border-color: var(--primary, #007aff); }
#result.hidden { display: none; }

/* 입력 헤더 — 모드·환자군 선택을 입력칸 위로 (2026-08-07 레이아웃 정리) */
#input-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--border, #e5e5ea); }
#input-head #active-mode { margin: 0; }
#input-head > div[id$="-bar"] { margin-top: 0 !important; }
.input-controls { margin-top: 10px; }

/* ── 파생 문서 선택 (2026-08-08 2축 분리, 라디오 전환): 플랜·진단서 한/영·컨설트 ── */
#doc-tabs { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; color: var(--fg, #222); }
#doc-tabs label { display: inline-flex; align-items: center; gap: 4px; }
#consult-query { display: block; width: 100%; box-sizing: border-box; margin: 0 0 8px;
  font-size: 13px; padding: 6px 10px; border: 1px solid var(--border, #e5e5ea); border-radius: 6px;
  background: var(--card, #fff); color: var(--fg, #222); }
#consult-query.hidden { display: none; }

/* ── 📸 문진표 서랍 (2026-08-08) — 정리칸 바로 위, chart 모드에서만 노출 ──
   폰이 올린 문진표 목록. 접힌 상태가 기본이라 평소엔 한 줄만 먹는다. */
#intake-drawer { margin-bottom: 8px; border: 1px solid var(--border, #e5e5ea); border-radius: 6px;
  background: var(--result-bg, #fafafa); }
#intake-drawer.hidden { display: none; }
#intake-drawer > summary { cursor: pointer; user-select: none; padding: 6px 10px;
  font-size: 13px; color: var(--muted, #666); }
#intake-drawer[open] > summary { border-bottom: 1px solid var(--border, #e5e5ea); }
#intake-badge { margin-left: 6px; font-size: 12px; color: var(--primary, #007aff); }
#intake-badge.warn { color: var(--star, #d11); }
/* 목록은 높이를 제한한다 — 문진표가 쌓여도 정리칸을 화면 밖으로 밀지 않게 */
#intake-list { max-height: 24vh; overflow-y: auto; }
#intake-list:empty::before { display: block; padding: 8px 10px; content: attr(data-empty);
  color: var(--muted, #999); font-size: 12px; }
.intake-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  font-size: 13px; color: var(--fg, #222); cursor: pointer; border-top: 1px solid var(--border, #e5e5ea); }
.intake-row:first-child { border-top: 0; }
.intake-row:hover { background: var(--cite-bg, #f0f4ff); }
.intake-row.plain { cursor: default; }          /* 정리 중·실패 = 누를 게 없다 */
.intake-row.used { opacity: .45; }              /* 이미 정리칸으로 가져간 건 */
.intake-row.err .intake-prev { color: var(--star, #d11); }
.intake-time { color: var(--muted, #888); font-variant-numeric: tabular-nums; }
.intake-prev { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.intake-del { flex: 0 0 auto; font-size: 12px; padding: 2px 6px; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--muted, #888); }
.intake-del:hover { border-color: var(--border, #c8c8cc); color: var(--star, #d11); }
.intake-thumb { flex: 0 0 auto; width: 40px; height: 40px; object-fit: cover;
  border-radius: 4px; border: 1px solid var(--border, #c8c8cc); cursor: zoom-in; }
#intake-zoom { display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, .72); cursor: zoom-out;
  align-items: center; justify-content: center; }
#intake-zoom.show { display: flex; }
#intake-zoom img { max-width: 92vw; max-height: 88vh; border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .5); }

/* 패널 헤더 안 체크박스 라벨이 어두워 안 보이던 것 (2026-08-07) */
.out-controls label { color: var(--fg, #222); }
.out-controls select { font-size: 13px; padding: 3px 6px; border: 1px solid var(--border, #c8c8cc);
  border-radius: 6px; background: var(--card, #fff); color: var(--fg, #222); }
#input-head #active-mode { color: var(--muted, #666); }