/* app.css — 검진 원장 화면별 규칙.
 *
 * 토큰·컴포넌트 규격은 `tokens.css` (DESIGN.md §3~§6·§9) 에 있다. 이 파일은 그 위에
 * 다섯 화면(로그인·오늘·방문 상세·정원·설정)의 배치와 제품 고유 블록만 더한다.
 * 색은 전부 CSS 변수로만 쓴다 — 하드코딩 색 0건(리뷰어 grep 대상).
 * 간격은 4·8·12·16·24·32 스케일(--s1~--s6)만 쓴다.
 */

/* ── 로그인 — 설정 화면 예외 규칙으로 카드 하나 (DESIGN.md §4-1) ── */
.login-screen {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s5);
  background: var(--bg);
}
.login-card {
  width: 100%; max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-srf);
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s4);
}
.login-card__brand { display: flex; flex-direction: column; gap: var(--s1); }
.login-card__name { font-size: 18px; line-height: 26px; font-weight: 600; }
.login-card__org { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.login-card form { display: flex; flex-direction: column; gap: var(--s3); }
.login-card .btn { width: 100%; }

/* ── 상태 알림 줄 (인라인, 전폭 배너 아님) ─────────────────── */
.err, .session-recovery, .orphaned-edit {
  padding: var(--s2) var(--s3);
  border-radius: var(--r-ctl);
  font-size: 13px; line-height: 20px;
  overflow-wrap: anywhere;
}
.err { background: var(--danger-soft); color: var(--inline-danger-ink); }
.session-recovery { background: var(--warn-soft); color: var(--chip-warn-ink); }
.orphaned-edit {
  background: var(--warn-soft); color: var(--chip-warn-ink);
  display: flex; align-items: flex-start; gap: var(--s3); flex-wrap: wrap;
}
.orphaned-edit p { min-width: 0; flex: 1; }
.inline-note { font-size: 12px; line-height: 16px; color: var(--ink-3); }

/* DESIGN.md §7 시각 표기(`MM-DD HH:mm` KST, 원문은 title). 숫자 폭을 고정하고
 * 한 값이 줄 중간에서 갈라지지 않게 한다. */
.at { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── 목록 화면 ─────────────────────────────────────────────── */
.toolbar {
  height: var(--h-row); flex: none;
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s3);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.toolbar__count { font-size: 13px; line-height: 20px; font-weight: 500; white-space: nowrap; }
.toolbar__spacer { flex: 1; min-width: var(--s2); }
.toolbar__filters { display: flex; align-items: center; gap: var(--s2); overflow: auto; }
.filter-chip {
  border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit;
  border-radius: var(--r-ctl);
}
.filter-chip[aria-pressed="true"] .chip { box-shadow: inset 0 0 0 1px currentColor; }

.list__head {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s3) 0;
}
.list__title { font-size: 18px; line-height: 26px; font-weight: 600; }
.list__notes { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); }

.table-wrap { overflow-x: auto; }
.id-cell { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.token {
  font-size: 12px; line-height: 16px; color: var(--ink-3);
  overflow-wrap: anywhere;
}
/* 정원 열의 출처 라벨(날짜 지정 / 요일 기본값). 숫자를 읽는 데 방해가 되지 않도록
 * 한 단계 낮은 색과 크기로, 같은 줄에 둔다(행 높이는 --h-row 하나를 지킨다). */
.cell-src { font-size: 12px; line-height: 16px; color: var(--ink-3); margin-right: var(--s2); }
.name { font-size: 13px; line-height: 20px; font-weight: 500; }

/* ── 접수 작성 줄 (환자 등록 · 예약 · 워크인) ───────────────── */
.compose {
  border-bottom: 1px solid var(--line);
  padding: var(--s3);
  display: flex; flex-direction: column; gap: var(--s3);
  background: var(--surface);
}
.compose[hidden] { display: none; }
.row {
  display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap;
  min-width: 0;
}
.row > .field { min-width: 0; }
.row .input, .row .select { min-width: 96px; }

/* ── 방문 상세 — 패널과 전체 페이지가 같은 내용을 쓴다 ────── */
.visit-sections { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.visit-head { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.visit-head__title { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.visit-head__name { font-size: 15px; line-height: 22px; font-weight: 600; }
.record .visit-head__name { font-size: 18px; line-height: 26px; }
.visit-head__meta { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.visit-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

.exam {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.rows .exam:last-child { border-bottom: 0; }
.exam__line { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; min-width: 0; }
.exam__name { font-size: 13px; line-height: 20px; font-weight: 500; }
.exam__spacer { flex: 1; min-width: var(--s2); }
.ex-val { width: 96px; }
.ex-flag { width: 128px; }
.exam-finding {
  max-width: 100%; width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 즉시 통보 — 의미색은 칩·인라인 메시지에만, 배경 전체 칠하기 금지(§3) */
.critical-open {
  display: flex; flex-direction: column; gap: var(--s2);
  overflow-wrap: anywhere;
}
.critical-open .row-item { border-left: 2px solid var(--danger); }
.notify-box { display: flex; flex-direction: column; gap: var(--s2); }
.notification-entry { display: flex; flex-direction: column; gap: var(--s2); }
.notify-return-reason { width: 100%; }

/* 방문 메모 — append-only, 본문은 줄바꿈을 지킨다 */
.visit-notes { display: flex; flex-direction: column; gap: var(--s2); }
.note-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
}
.rows .note-row:last-child { border-bottom: 0; }
.note-body {
  font-size: 13px; line-height: 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.memo-body {
  font-size: 13px; line-height: 20px; color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#note-body, #r-memo, #v-meta-memo { width: 100%; min-height: 40px; }

/* 시술 기록 · 공단 판정 — 표 열을 늘리지 않고 전폭 블록으로 */
.procedures, .nhis-judgment, .visit-meta-editor, .held {
  display: flex; flex-direction: column; gap: var(--s3);
  min-width: 0;
}
.procedure {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-srf);
  min-width: 0;
}
.sedation-events { display: flex; flex-direction: column; gap: var(--s1); }
.sedation-events li {
  font-size: 12px; line-height: 16px; color: var(--ink-2);
  overflow-wrap: anywhere;
}
.nhis-cancer-list { display: flex; flex-direction: column; gap: var(--s2); }

/* 발행 · 스냅샷 */
.report-publications { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.snapshot {
  margin: 0; padding: var(--s3);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-srf);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 16px; color: var(--ink-2);
  max-height: 240px; overflow: auto;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.report-preview-panel {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-srf);
  min-width: 0;
}
.report-meta { display: grid; grid-template-columns: 96px minmax(0, 1fr); row-gap: var(--s2); column-gap: var(--s3); }
.report-meta dt { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-2); }
.report-meta dd { margin: 0; font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.report-finding {
  font-size: 13px; line-height: 20px; color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.report-unavailable { font-size: 13px; line-height: 20px; color: var(--chip-warn-ink); }
.report-print-inner { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.report-print-blocked, .report-print-page-header { display: none; }

/* ── 설정 화면 ─────────────────────────────────────────────── */
.settings__title { font-size: 18px; line-height: 26px; font-weight: 600; }
.package-rows {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s3);
}
.package-row {
  display: flex; flex-direction: column; gap: var(--s2);
  margin: 0; padding: var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-srf);
  min-width: 0;
}
.package-row legend {
  padding: 0; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-3);
}
.package-actions { display: flex; align-items: center; gap: var(--s3); }
.package-preview {
  display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s3);
  background: var(--accent-soft); border-radius: var(--r-srf);
  font-size: 13px; line-height: 20px;
  overflow-wrap: anywhere;
}
.package-conflict { overflow-wrap: anywhere; }
.package-exam-table { max-height: 320px; overflow: auto; }
.ops-journal { display: flex; flex-direction: column; gap: var(--s1); }
.ops-journal li { font-size: 13px; line-height: 20px; color: var(--ink-2); overflow-wrap: anywhere; }

/* ── 좁은 폭 — 폼 줄을 한 열로 (390 폰까지) ────────────────── */
@media (max-width: 720px) {
  .package-rows { grid-template-columns: 1fr; }
  .row { flex-direction: column; align-items: stretch; }
  .table-wrap { overflow-x: auto; }
  .row .input, .row .select, .ex-val, .ex-flag { width: 100%; min-width: 0; }
  .exam__line { align-items: stretch; flex-direction: column; }
  .record__left, .record__right, .settings__body { padding: var(--s3); }
  .list__head { flex-direction: column; }
}

/* ── 인쇄 ───────────────────────────────────────────────────
 * 두 갈래다. 명시적으로 무장하지 않은 인쇄는 **결과지를 한 글자도 내보내지 않고** 차단
 * 문구만 찍는다(`report-preview.js` 의 `armReportPrintMedia` 가 body 에 클래스를 붙인다).
 * 무장한 인쇄는 결과지 미리보기 하나만 남기고 앱 골격을 전부 뺀다. 선택자만 새 DOM 으로
 * 옮겼고 규칙은 재설계 전과 같다. 색은 항상 라이트다(tokens.css @media print).
 */
@media print {
  html, body {
    background: #fff;
    color: #000;
    font-size: 12pt;
    /* 화면 셸은 100vh 로 묶여 있다. 인쇄에서는 내용만큼 길어져야 쪽이 나뉜다. */
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .report-preview-actions, .snapshot { display: none !important; }

  /* 무장하지 않은 인쇄 — 화면을 전부 감추고 차단 문구만 남긴다. */
  body:not(.report-print-authorized) .app,
  body:not(.report-print-authorized) .login-screen,
  body:not(.report-print-authorized) #visit-box,
  body:not(.report-print-authorized) .report-publications,
  body:not(.report-print-authorized) #report-preview-host,
  body:not(.report-print-authorized) .report-preview-panel {
    display: none !important;
  }
  body:not(.report-print-authorized) .report-print-blocked {
    display: block !important;
    padding: 16mm;
    font-size: 13pt;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  /* 무장한 인쇄 — 결과지 미리보기 하나만 남는다. */
  body.report-print-authorized .report-print-blocked,
  body.report-print-authorized #report-print-page-header { display: none !important; }
  body.report-print-authorized .sidebar,
  body.report-print-authorized .tabbar,
  body.report-print-authorized .header,
  body.report-print-authorized .toolbar,
  body.report-print-authorized .compose,
  body.report-print-authorized .context,
  body.report-print-authorized .subnav,
  body.report-print-authorized .list,
  body.report-print-authorized .panel__head,
  body.report-print-authorized .record__head,
  body.report-print-authorized .record__right,
  body.report-print-authorized .save,
  body.report-print-authorized .scrim,
  body.report-print-authorized .toast { display: none !important; }
  body.report-print-authorized #visit-box > .panel__body > :not(.report-publications),
  body.report-print-authorized .record__left > :not(.report-publications) {
    display: none !important;
  }
  body.report-print-authorized .report-publications > :not(#report-preview-host) {
    display: none !important;
  }
  body.report-print-authorized .app,
  body.report-print-authorized .main,
  body.report-print-authorized .work,
  body.report-print-authorized .record,
  body.report-print-authorized .record__cols,
  body.report-print-authorized .record__left,
  body.report-print-authorized #visit-box,
  body.report-print-authorized #visit-box > .panel__body,
  body.report-print-authorized .report-publications,
  body.report-print-authorized #report-preview-host,
  body.report-print-authorized .report-preview-panel {
    display: block !important;
    /* 1024 미만에서 패널은 전체 화면 시트(`position: fixed`)가 된다(§9). 인쇄 레이아웃의
     * 폭은 용지 폭(≈816px)이라 그 규칙이 걸리고, fixed 요소는 한 쪽으로 잘린다.
     * 흐름으로 되돌려야 긴 결과지가 여러 쪽으로 나뉜다. */
    position: static !important;
    inset: auto !important;
    background: #fff;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
    max-width: none;
    min-width: 0;
    width: auto;
    height: auto;
    overflow: visible;
    max-height: none;
    animation: none;
  }
  body.report-print-authorized .report-print-flow > thead { display: table-header-group; }
  body.report-print-authorized .report-print-flow > thead th {
    text-align: left;
    font-weight: 600;
    font-size: 10pt;
    padding: 2mm 0 3mm;
    border-bottom: 0.4pt solid #333;
    background: #fff;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  body.report-print-authorized .report-notice { display: none; }
  body.report-print-authorized .report-print-banner { display: none; }
  body.report-print-authorized .report-exams thead { display: table-header-group; }
  body.report-print-authorized .report-exams tfoot { display: table-footer-group; }
  body.report-print-authorized .report-exams tr { break-inside: avoid; }
  body.report-print-authorized .report-preview-panel,
  body.report-print-authorized .report-preview-panel * {
    overflow: visible !important;
    max-height: none !important;
  }
}

/* 현재 문맥 한 줄 — 날짜 · 환자 · 방문. 보조 문구 위계(12/500)로만 쓴다. */
.context {
  font-size: 12px; line-height: 16px; font-weight: 500;
  color: var(--ink-2);
  display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap;
  min-width: 0; overflow-wrap: anywhere;
}

/* 섹션 제목은 접히지 않는다. 오른쪽 보조 문구가 남은 폭을 받는다. */
.section__title { white-space: nowrap; }
.section__head > .inline-note, .section__head > .chip { flex: none; }
.section__head { flex-wrap: nowrap; }

/* 긴 식별자는 화면에서 줄이고 값은 DOM 에 그대로 둔다(하네스가 읽는 것은 textContent). */
.exam .token, .row-item .token {
  max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.props dd, .tl__body, .tl__meta, .row-item__sub { overflow-wrap: anywhere; }
.record__right .token { max-width: 100%; white-space: normal; }

/* 패널이 열리면 목록이 좁아진다. 담당·방문 ID 는 패널 안에 그대로 있다(§9 와 같은 규칙). */
.work--panel .col-owner, .work--panel .col-id { display: none; }

/* 패널은 480 이다. 그 안에서는 식별자를 더 줄이고 목록은 시안 01 의 일곱 열만 남긴다. */
.panel .exam .token, .panel .row-item .token { max-width: 96px; }
.work--panel .col-count { display: none; }

/* ── 1024 미만(태블릿·390 폰) — 아무 컨트롤도 화면 밖으로 나가지 않는다 ──
 * §9 는 이 폭에서 패널을 전체 화면 시트로, 사이드바를 하단 탭으로 바꾼다. 헤더·도구줄·
 * 설정 하위 메뉴는 규격이 없어서, 줄을 접어 **감추지 않고** 다 보이게 한다. 무엇을 숨기면
 * 합성 경고나 날짜 같은 것이 사라질 수 있어 그 선택은 하지 않는다.
 */
@media (max-width: 1023px) {
  .header {
    height: auto; min-height: var(--h-header);
    flex-wrap: wrap;
    padding: var(--s2);
  }
  .header__spacer { display: none; }
  .header__right { flex-wrap: wrap; }
  .search { width: 100%; max-width: none; }
  .toolbar {
    height: auto; min-height: var(--h-row);
    flex-wrap: wrap;
    padding: var(--s2);
  }
  .toolbar__filters { flex-wrap: wrap; overflow: visible; }
  .toolbar__spacer { display: none; }
  .subnav { flex-wrap: wrap; overflow: visible; }
}