/* ==========================================================
   SNT 케어스테이션 — 디자인 토큰
   미색 종이 위 잉크. 주 행동은 깊은 청록, 등을 떠미는 자리에만 테라코타.
   고령 사용자가 직접 쓰는 화면이라 대비와 크기를 먼저 지킨다.
   ========================================================== */
:root {
  color-scheme: only light;

  /* ── 지면 ── */
  --paper:       #faf6f0;   /* 앱 배경 — 미색 종이 */
  --paper-2:     #f2eade;   /* 눌린 면, 세그먼트 트랙 */
  --surface:     #ffffff;   /* 카드 */
  --surface-2:   #fdfaf5;   /* 카드 안 보조 면 */

  /* ── 잉크 ── 고령 사용자 기준으로 본문 대비를 최우선 */
  --ink:         #14110d;
  --ink-2:       #4a433a;
  --ink-3:       #6b6357;
  --line:        #e8dfd2;   /* 헤어라인 */
  --line-strong: #d6c9b6;   /* 입력 테두리 */
  --line-2:      #d6c9b6;   /* 위와 같은 값 — 새 화면에서 쓰는 이름 */

  /* ── 주 행동 ── 깊은 청록. 미색 위에서 차분하고 따뜻하게 앉는다 */
  --brand:       #0e6a5b;
  --brand-deep:  #0a5147;
  --brand-tint:  #e2f0ec;
  /* 기존 화면이 쓰던 이름 — 값만 새 브랜드로 맞춘다.
     한 번에 전부 고치면 되돌리기 어려워, 이름은 남기고 값만 옮긴다. */
  --pine:        #0e6a5b;
  --pine-deep:   #0a5147;
  --pine-tint:   #e2f0ec;
  --link:        #0a5147;
  --link-dark:   #7fd4c4;

  /* ── 강조 ── 테라코타. "오늘 할 일"처럼 등을 떠미는 자리에만 */
  --warm:        #ac4f1d;
  --warm-deep:   #8c3e14;
  --warm-tint:   #fbeade;

  /* ── 상태색 ── 색만으로 구분하지 않는다. 라벨 글자를 항상 같이 쓴다 */
  --wait:        #855605;   --wait-tint:  #fbf0d8;   /* 의료진 확인 대기 */
  --done:        #1b6633;   --done-tint:  #e3f1e4;   /* 확인 완료 */
  --redo:        #99441a;   --redo-tint:  #fbe9dc;   /* 재측정 필요 */
  --refer:       #9d2b1c;   --refer-tint: #fae2de;   /* 내원 권고 */
  --red:         #9d2b1c;   --red-tint:   #fae2de;   /* 기존 이름 */
  --amber-tint:  #fbf0d8;
  --blue-tint:   #e2f0ec;

  /* ── 모양 ──
     둥근 SaaS 카드가 아니라 기록부 서류의 각. 랜딩(index.html)과 같은 언어다 —
     이 서비스의 산출물은 대시보드가 아니라 기록이고, 화면도 그렇게 읽혀야 한다. */
  --r-lg: 6px;
  --r-md: 5px;
  --r-sm: 4px;
  --radius: 5px;                                     /* 기존 이름 */
  --shadow:      0 1px 0 var(--line), 0 12px 28px -18px rgba(27,26,23,.16);
  --shadow-soft: 0 1px 0 var(--line), 0 6px 16px -12px rgba(27,26,23,.12);
  --shadow-1:    0 1px 0 var(--line), 0 12px 28px -18px rgba(27,26,23,.16);

  /* 시각·수치·서식 번호의 고정폭 — 기록의 기계적 정확성 */
  --mono: ui-monospace, SFMono-Regular, Menlo, 'Cascadia Mono', 'Courier New', monospace;

  /* ── 크기 하한 ── 고령 사용자 기준 */
  --tap: 56px;
}

* { box-sizing: border-box; margin: 0; }
html { background: var(--paper); min-height: 100%; }
body {
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Pretendard",
               "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  background: var(--paper); color: var(--ink);
  font-size: 15px; line-height: 1.5; letter-spacing: -.015em;
  -webkit-font-smoothing: antialiased;
  /* 한국어는 단어 중간에서 꺾이면 안 된다 — "측정값"이 "측정/값"으로,
     "(30일)"이 "(30/일)"로 갈라진 것이 실제로 관측됐다. keep-all 은 어절
     단위로만 꺾고, break-word 는 이메일·UUID 같은 긴 토큰의 넘침을 막는다. */
  word-break: keep-all; overflow-wrap: break-word;
}

/* ---------- 앱 상단바: 기록부 표지의 머리선 ---------- */
nav {
  background: var(--surface); color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 0 22px; display: flex; align-items: center; gap: 14px; height: 56px;
}
nav .brand { font-weight: 800; letter-spacing: -.02em; font-size: 15px; color: var(--ink);
             display: inline-flex; align-items: center; gap: 7px; }
/* 브랜드 마크 — 관리자가 로고를 올리면 같은 자리에 <img class="mark custom"> 가 들어온다 */
nav .brand .mark { width: 22px; height: 22px; border-radius: 6px; background: var(--brand);
                   display: inline-flex; align-items: center; justify-content: center; flex: none; }
nav .brand .mark svg { width: 13px; height: 13px; }
img.mark.custom { width: auto; height: 24px; max-width: 160px; background: transparent;
                  border-radius: 0; object-fit: contain; }
/* 페이지명은 서식 라벨처럼 — 기록부 표지의 분류 항목 */
nav .brand + * { font-family: var(--mono); color: var(--ink-3); font-size: 11.5px; letter-spacing: .1em; }
nav .who { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
nav a { color: var(--ink-2); text-decoration: none; font-size: 13px; padding: 4px 2px; border-bottom: 1.5px solid transparent; }
nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- 레이아웃 ---------- */
main { padding: 26px 22px 48px; max-width: 1180px; margin: 0 auto; }
.row { display: flex; gap: 20px; align-items: flex-start; }
.col { flex: 1; min-width: 0; }

.card {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-1);
}
/* 카드 제목 = 서식 항목명. 밑줄과 서식 번호(01·02·…)가 기록부의 문법이다.
   번호는 CSS 카운터라 화면 구조를 건드리지 않고, display:none 카드는 세지 않는다. */
main { counter-reset: form-item; }
.card h2 {
  font-size: 15.5px; letter-spacing: -.01em; color: var(--ink);
  margin: 0 0 14px; font-weight: 700;
  /* 서식 머리선 — 랜딩 기록부 카드(rec-head)와 같은 먹선. 한눈에 서류로 읽힌다. */
  border-bottom: 2px solid var(--ink); padding-bottom: 9px;
}
.card h2::before {
  counter-increment: form-item;
  content: counter(form-item, decimal-leading-zero);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--pine); letter-spacing: .08em; margin-right: 8px;
}
.card h2 button { float: right; margin-top: -4px; }

/* 앱 리스트 행 (표 대신) */
.list { }
/* 행은 카드 여백 안쪽으로 10px 씩 삐져나간다 — 배경·헤어라인·왼쪽 레일(.urgent)이
   글자 열보다 넓다. 글자는 예전과 같은 자리(안쪽 2px)에 있고, 레일이 첫 글자를
   덮지 않는다. 선택 행만 따로 여백을 주던 규칙은 폭이 달라져 없앴다. */
.item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 12px; margin: 0 -10px; border-bottom: 1px solid #f0ede6; cursor: pointer;
}
.item:last-child { border-bottom: 0; }
.item:hover { background: #faf9f5; }
.item.sel { background: var(--pine-tint); border-radius: 4px; }
.item.urgent { box-shadow: inset 3px 0 0 var(--blue-tint); }
.item.urgent.sel { box-shadow: inset 3px 0 0 var(--pine); }
.item .tit { font-size: 14.5px; font-weight: 600; }
.item .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.item .right { text-align: right; flex: none; font-size: 13px; font-weight: 600; }
.st { font-weight: 700; font-size: 12.5px; }
.st.g { color: var(--pine); } .st.b { color: #33506e; } .st.r { color: var(--red); }
.st.y { color: #8a6410; } .st.p { color: #7d3a56; } .st.gray { color: var(--ink-3); }
/* 내원 권고 — '확인중'(.p)과 반드시 달라야 한다. 병원에 가라는 안내다. */
.st.ref { color: var(--refer); }

/* ---------- 표 ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 10px; border-bottom: 1px solid #f0ede6; text-align: left; }
th { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
tr.selected { background: var(--pine-tint) !important; box-shadow: inset 3px 0 0 var(--pine); }

/* ---------- 폼 ---------- */
label { display: block; font-size: 12px; color: var(--ink-2); margin: 12px 0 5px; font-weight: 600; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px;
  font: inherit; color: var(--ink); background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--pine); box-shadow: 0 0 0 3px rgba(30, 77, 64, .10);
}
input[type="file"] { background: #fbfaf7; }
input[type="checkbox"] { width: auto; accent-color: var(--pine); }
::placeholder { color: #b3aea3; }

/* ---------- 버튼 ---------- */
button {
  padding: 10px 18px; border: 0; border-radius: 6px;
  background: var(--pine); color: #fff;              /* Apple: 파랑 채움이 기본 액션 */
  font: inherit; font-weight: 500; font-size: 14px; letter-spacing: -.01em; cursor: pointer;
  transition: background .15s, transform .05s;
}
button:hover { background: var(--pine-deep); }
button:active { transform: translateY(1px); }
button.gray {
  background: #e8e8ed; color: var(--ink);            /* Apple 보조: 연회색 채움 */
  box-shadow: none;
}
button.gray:hover { background: #dcdce1; }
button.green { background: var(--pine); }
button.green:hover { background: var(--pine-deep); }
button.red { background: transparent; color: var(--red); box-shadow: inset 0 0 0 1px #f0c9b3; }
button.red:hover { background: var(--red-tint); }
button:disabled { background: #c7c7cc; color: #fff; cursor: default; }
td button { padding: 5px 11px; font-size: 12px; }

/* ---------- 상태 배지: 작은 라벨 + 색점 ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 4px; font-size: 11.5px; font-weight: 600;
  background: #f1efe9; color: var(--ink-2); letter-spacing: .01em;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #b3aea3; }

/* ---------- 기타 ---------- */
.muted { color: var(--ink-3); font-size: 12.5px; }
.actions { display: flex; gap: 8px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
.ok { color: var(--pine); font-weight: 700; }

.quality-msg {
  padding: 11px 14px; border-radius: 8px; margin-top: 12px; font-size: 13px; font-weight: 600;
  border: 1px solid;
}
.quality-msg.pass { background: var(--pine-tint); color: var(--pine-deep); border-color: #cfdcd2; }
.quality-msg.fail { background: var(--red-tint); color: var(--red); border-color: #e6cfce; }

audio { width: 100%; margin-top: 12px; }
/* 파일 드롭존 */
.dropzone {
  border: 1.5px dashed var(--line-strong); border-radius: 5px; padding: 22px 16px;
  text-align: center; cursor: pointer; transition: border-color .15s, background .15s; background: #fbfaf7;
}
.dropzone:hover { border-color: var(--pine); background: var(--pine-tint); }
.dropzone.drag { border-color: var(--pine); background: var(--pine-tint); }
.dropzone .dz-ic { width: 40px; height: 40px; margin: 0 auto 8px; color: var(--ink-3); }
.dropzone .dz-ic svg { width: 100%; height: 100%; stroke: currentColor; }
.dropzone.has-file { border-style: solid; border-color: var(--pine); background: #fff; text-align: left; }
.dropzone .dz-main { font-size: 14px; font-weight: 600; color: var(--ink); }
.dropzone .dz-sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.dropzone .dz-file { display: flex; align-items: center; gap: 10px; }
.dropzone .dz-file .fico { width: 34px; height: 34px; border-radius: 8px; background: var(--pine-tint); color: var(--pine);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; flex: none; }

/* 위치 프리셋 칩 */
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.preset { font-size: 12.5px; padding: 6px 12px; border-radius: 6px; border: 1.5px solid var(--line-strong);
  background: #fff; color: var(--ink-2); cursor: pointer; font-weight: 600; }
.preset:hover { border-color: var(--ink-3); }
.preset.on { border-color: var(--pine); background: var(--pine-tint); color: var(--pine); }

/* 환자 헤더 (진료 상세 상단) */
.pt-head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.pt-head .avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: var(--pine); color: #fff; font-weight: 800; font-size: 19px;
  display: flex; align-items: center; justify-content: center;
}
.pt-head .pt-name { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.pt-head .pt-meta { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.chip-sm { font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: #f1efe9; border-radius: 5px; padding: 2px 8px; }
.pt-head .pt-right { margin-left: auto; text-align: right; }

/* 녹음 카드 (표 대신) */
.rec { border: 1px solid var(--line); border-radius: 4px; padding: 13px 14px; margin-bottom: 10px; }
.rec:last-child { margin-bottom: 0; }
.rec .rec-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rec .rec-name { font-weight: 700; font-size: 14px; }
.rec .rec-name .pos { font-weight: 500; color: var(--ink-3); font-size: 12.5px; margin-left: 6px; }
.rec .rec-dur { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.qbar { display: flex; align-items: center; gap: 8px; margin: 9px 0; }
.qbar .track { flex: 1; height: 6px; background: #ece9e1; border-radius: 999px; overflow: hidden; }
.qbar .fill { height: 100%; border-radius: 999px; }
.qbar .fill.pass { background: var(--pine); } .qbar .fill.fail { background: var(--red); }
.qbar .qval { font-family: var(--mono); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qbar .qtag { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 4px; }
.qbar .qtag.pass { background: var(--pine-tint); color: var(--pine); }
.qbar .qtag.fail { background: var(--red-tint); color: var(--red); }
.rec audio { width: 100%; height: 34px; margin-top: 6px; }
.rec .playbtn { padding: 6px 12px; font-size: 12.5px; }

/* 통계 타일 */
.stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.stat { flex: 1; min-width: 110px; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 16px 14px; text-align: center; box-shadow: var(--shadow-1); }
.stat b { font-family: var(--mono); font-size: 25px; display: block; color: var(--pine);
  font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--ink-3); }

/* 환자 알림 배너 */
.notice-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius);
  margin-bottom: 18px; font-size: 14px; font-weight: 600; }
.notice-banner.info { background: var(--primary-tint); color: #1a5ca8; border: 1px solid #b6d8f8; }
.notice-banner.warn { background: #fdece3; color: #a13a00; border: 1px solid #f3cbb0; }
.notice-banner .n-act { margin-left: auto; }
.notice-banner button { padding: 7px 14px; font-size: 13px; }
.badge-new { display: inline-block; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--pine);
  border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }
.badge-new.warn { background: var(--red); }

/* 토글 칩 (소견 옵션) */
.toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: 6px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); user-select: none; }
.toggle:hover { border-color: var(--ink-3); }
.toggle.on { border-color: var(--pine); background: var(--pine-tint); color: var(--pine); }
.toggle .box { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; }
.toggle.on .box { background: var(--pine); border-color: var(--pine); }
.toggle.on .box::after { content: "✓"; color: #fff; font-size: 10px; font-weight: 800; }

/* 의료진 소견 결과 — 기록부의 소견란. 괘선 위에 쓰인 글로 읽히게 한다.
   괘선 간격(27px)과 본문 line-height 를 맞춰야 글줄이 선 위에 앉는다. */
.review-result {
  border-left: 3px solid var(--pine);
  background: var(--surface); border-top: 1px solid var(--line);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 18px; margin: 0;
}
.review-result h2 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  color: var(--pine); border: 0; padding: 0; margin: 0 0 6px; font-weight: 600;
}
.review-result h2::before { content: none; }   /* 서식 번호는 카드 제목의 것 */
.review-result p:first-of-type {
  font-size: 15px; line-height: 27px;
  background: repeating-linear-gradient(to bottom, transparent 0 26px, var(--line) 26px 27px);
}

@media (max-width: 760px) {
  .row { flex-direction: column; }
  .col { max-width: none !important; width: 100%; }
  nav { padding: 0 12px; gap: 8px; }
  nav .who { display: none; }              /* 긴 안내문은 모바일에서 숨김 */
  nav .brand + span { display: none; }     /* 브랜드 옆 페이지명도 숨김(제목은 본문에) */
  /* 의사 화면은 상단에 버튼이 셋이라 375px 에서 "내 정/보"처럼 두 줄로
     쪼개졌다. 글자를 줄이고 줄바꿈을 막아 한 줄에 앉힌다. */
  nav .brand { font-size: 14px; white-space: nowrap; }
  nav button { white-space: nowrap; padding: 7px 10px; font-size: 12.5px; }
  nav a { white-space: nowrap; }
  main { padding: 16px 14px 40px; }

  /* 목록 행: 좁은 화면에서는 위아래로 접는다.
     한 줄을 유지하면 오른쪽 버튼 묶음(담당 기관·승인·탈퇴 …)이 화면 밖으로
     밀려 페이지 전체가 가로로 스크롤되고, 마지막 버튼은 아예 닿지 않는다. */
  .item { flex-direction: column; align-items: stretch; gap: 10px; }
  .item .right {
    text-align: left;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  }
  /* 이름·이메일이 길어도 칸을 밀지 않게 — 줄바꿈 허용 */
  .item .tit, .item .sub { overflow-wrap: anywhere; }

  /* 환자 헤더: 좁은 화면에서 아바타·이름·상태를 한 줄에 두면 오른쪽 상태
     문구가 "의료진 확인 대 / 기" 처럼 글자 단위로 쪼개진다. 상태를 아래로
     내리고 줄바꿈을 막는다. */
  .pt-head { flex-wrap: wrap; }
  .pt-head .pt-right {
    margin-left: 0; text-align: left;
    flex-basis: 100%; display: flex; align-items: center;
    flex-wrap: wrap; gap: 8px;
  }
  .pt-head .pt-right .st { white-space: nowrap; }
  .pt-head .pt-right > div { margin-top: 0 !important; }
}

/* 브라우저 직접 녹음 */
.rec-live { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1.5px solid #eec3bd;
            border-radius:10px; background:#fdf6f5; margin-bottom:8px; }
.rec-dot { width:11px; height:11px; border-radius:50%; background:#c0392b; animation:recblink 1s infinite; flex:none; }
@keyframes recblink { 50% { opacity:.25; } }
.rec-time { font-weight:800; font-variant-numeric:tabular-nums; min-width:52px; }
.lvl-wrap { flex:1; height:10px; background:#f0e9e8; border-radius:6px; overflow:hidden; }
.lvl-bar { height:100%; width:0%; background:#0a7d32; border-radius:6px; transition:width .08s linear; }
.lvl-bar.low { background:#c0392b; }
.rec-hint { font-size:11.5px; color:var(--ink-3, #86868b); margin-top:4px; }
.or-sep { display:flex; align-items:center; gap:10px; color:var(--ink-3, #86868b); font-size:11.5px; margin:10px 0 8px; }
.or-sep::before, .or-sep::after { content:""; flex:1; border-top:1px solid var(--line); }

/* 녹음 직후 업로드 안내 — "녹음했는데 그다음 뭘 누르지"가 실제로 나온 질문이다.
   만든 사람이 헤맸으면 고령 사용자는 확실히 헤맨다. */
.up-nudge { display:flex; align-items:center; gap:8px; margin:10px 0 8px; padding:12px 14px;
  background: var(--warm-tint); border:1.5px solid var(--warm); border-radius:6px;
  font-size:14.5px; font-weight:700; color: var(--warm-deep); }
@keyframes up-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(14,106,91,.45); }
                      50%     { box-shadow:0 0 0 9px rgba(14,106,91,0); } }
button.pulse { animation: up-pulse 1.1s ease-out 3; }
@media (prefers-reduced-motion: reduce) { button.pulse { animation: none; } }

/* 목록 페이지네이션 */
.pager { display:flex; align-items:center; justify-content:center; gap:12px; padding:10px 0 2px; }
.pager .pg { font-size:12.5px; padding:5px 12px; border-radius:5px; border:1px solid var(--line-strong);
             background:var(--surface); color:var(--ink); cursor:pointer; font-weight:600; }
.pager .pg:disabled { opacity:.35; cursor:default; }
.pager .pg-info { font-size:12.5px; font-weight:600; }

/* 별칭 토큰 — 일부 화면이 --primary/--soft/--muted 를 쓰는데 미정의라
   테두리가 검정으로 떨어지고 강조가 사라졌다. 기존 토큰에 매핑한다. */
:root {
  --primary: var(--pine);
  --primary-tint: var(--pine-tint);
  --soft: var(--pine-tint);
  --muted: var(--ink-3);
}

/* 배지 단축 클래스 — 화면이 statusCls() 의 g/r/b/y/p 를 쓰는데 규칙이 없어
   음질 '통과'와 '미달'이 같은 회색으로 보였다 (비의료인이 구분 불가) */
/* .st 의 기존 상태 색은 건드리지 않는다 — 덮어쓰면 '내원 권고'의 적갈색이
   보라로 바뀌는 등 임상 긴급도 색상이 흐트러진다 */
.badge.g { background: #e8f5ec; color: #0a7d32; }
.badge.r { background: #fdeeec; color: #c0392b; }
.badge.ref { background: var(--refer-tint); color: var(--refer); }
.badge.b { background: #eef3fb; color: #2b4a8b; }
.badge.y { background: #fff4e5; color: #b8500a; }
.badge.p { background: #f3eefb; color: #6b3fa0; }
.badge.gray { background: #f1efe9; color: #6e6e73; }

/* 터치 타깃 — 태블릿 사용(측정 보조자)을 전제로 최소 높이 확보 */
/* 오프라인·전송 대기 안내 막대.
   "저장됐습니다" 로 오인하면 안 되므로 성공 색(초록)을 쓰지 않는다.
   아직 의료진에게 가지 않았다는 사실이 읽혀야 한다. */
.offline-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  background: var(--amber-tint); border: 1px solid #f0d9a8; border-radius: 6px;
  padding: 12px 14px; margin-bottom: 12px; font-size: 13.5px; color: #7c5a12;
}
.offline-bar.off { background: var(--red-tint); border-color: #f3cbb0; color: #a13a00; }
.offline-bar b { font-size: 14px; }
.offline-bar span { flex: 1 1 100%; }
.offline-bar button { margin-left: auto; }

/* 모바일 최소 글자 크기.
   주 사용자가 고령이다. 배지·라벨이 11px 이면 화면에서 읽히지 않는다.
   데스크톱은 그대로 두고 좁은 화면에서만 한 단계 올린다. */
@media (max-width: 760px) {
  .tag, .badge, .st, .kbd, .cnt, .meta, .stepno { font-size: 12.5px; }
  .muted { font-size: 13.5px; }
  body { font-size: 15.5px; }
}

@media (pointer: coarse) {
  button, .preset, .pager .pg, .wd { min-height: 44px; }
  .toggle, .audio-tools .sp { min-height: 40px; display: inline-flex; align-items: center; }
}

/* 플레이스홀더 대비 — 입력 예시가 플레이스홀더로만 제공되는 화면이 있어
   대비가 낮으면 고령 사용자에게 안내가 사실상 보이지 않는다 */
::placeholder { color: #8a857c; }

/* 비밀번호 표시 토글 */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 58px; width: 100%; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  /* 손가락으로 누르는 자리다. 글자만 작게 두고 영역은 40px 을 지킨다 —
     입력칸 안에 있다고 눌리는 크기까지 줄일 이유는 없다. */
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 56px;
  padding: 0 12px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* 배경·글자색을 여기서 다시 못 박는다. 이 버튼은 <button> 이라
   button:hover(특이도 0,1,1)가 .pw-eye(0,1,0)를 이긴다 — 테두리만 바꿔 두면
   마우스를 올린 순간 진한 초록 바탕에 진한 글자가 되어 글씨가 사라진다.
   누르고도 반응이 없는 것처럼 보여 "표시가 안 된다"는 신고로 돌아왔다. */
.pw-eye:hover, .pw-eye:focus, .pw-eye:active {
  background: var(--surface); color: var(--ink); border-color: var(--ink-3);
}


/* 비밀번호 변경 대화상자 (app.js changePassword).
   전역 리셋의 `* { margin: 0 }` 이 <dialog> 기본값 margin:auto 를 지워
   화면 왼쪽 위에 붙어 버린다 — 가운데 정렬을 여기서 되돌린다. */
dialog.pw-modal {
  margin: auto; border: 0; padding: 0; width: min(92vw, 380px);
  border-radius: 8px; background: var(--surface, #fff); color: var(--ink, #1a1a1a);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}
dialog.pw-modal::backdrop { background: rgba(0, 0, 0, .38); }
dialog.pw-modal input { width: 100%; }


/* ===== 측정값(활력징후) 입력·표시 — vitals.js 와 한 벌 =====
   환자·보호자·의사 세 화면이 같은 모양을 쓴다. 화면마다 따로 두면
   같은 값이 어디서는 크게, 어디서는 흐리게 보인다. */
.vt-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.vt-cell label {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 14px; font-weight: 700; margin: 0 0 5px;
}
.vt-cell .vt-u { font-size: 12px; font-weight: 600; color: var(--ink-3); }
/* 숫자를 넣는 칸이다 — 손가락과 노안 모두를 고려해 크게 둔다 */
.vt-cell input { width: 100%; font-size: 18px; font-variant-numeric: tabular-nums; }
.vt-cell .vt-hint { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }

.vt-list { display: flex; flex-direction: column; gap: 6px; }
.vt-row {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px;
}
/* '확인 필요'는 사람이 한 번 보라는 표시지 위험 경보가 아니다.
   빨강을 쓰면 화면이 판단한 것으로 읽힌다 — 주의색(warm)까지만. */
.vt-row.flag { border-color: var(--warm); background: var(--warm-tint); }
.vt-k { font-size: 14px; font-weight: 700; min-width: 84px; }
.vt-v { font-family: var(--mono); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.vt-v i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-3); margin-left: 3px; }
.vt-t { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-left: auto; }
.vt-flag { font-size: 11.5px; font-weight: 800; color: var(--warm); white-space: nowrap; }
.vt-x {
  min-height: 32px; padding: 0 10px; font-size: 13px; line-height: 1;
  background: transparent; color: var(--ink-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
}
.vt-x:hover { color: var(--ink); border-color: var(--ink-3); }
.vt-why { margin: 2px 0 6px 2px; font-size: 12.5px; color: var(--warm); }
/* 메모와 기기 시리얼. 둘 다 저장은 하면서 화면 어디에도 안 나와서,
   측정값이 어느 기기로 나온 것인지 확인할 방법이 없었다. */
.vt-meta { margin: 2px 0 6px 2px; font-size: 12.5px; color: var(--muted); }

/* ── 항목별 변화(스파크라인) ──
   그래프 하나 그리려고 외부 라이브러리를 들이지 않는다. 인라인 SVG 다. */
.vt-trend { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.vt-tc { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 13px 9px; }
.vt-th { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.vt-th b { font-size: 14px; }
.vt-tu { font-size: 11.5px; color: var(--ink-3); }
/* 지난 회차 대비. 사실(뺄셈)이지 판정이 아니므로 색을 입히지 않는다 —
   체중이 준 것과 산소포화도가 준 것은 같은 뜻이 아니다. */
.vt-d { font-size: 12px; font-weight: 700; color: var(--ink-2); flex-basis: 100%; }
.vt-spark { width: 100%; height: 56px; display: block; overflow: visible; }
.vt-line { fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round;
           vector-effect: non-scaling-stroke; }
/* 기준선 — "이 선을 넘었다"가 보이게. 실선으로 두면 값 선과 헷갈린다. */
.vt-guide { stroke: var(--warm); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55;
            vector-effect: non-scaling-stroke; }
.vt-dot { fill: var(--brand); }
.vt-dot.flag { fill: var(--warm); }
.vt-dot.cur { fill: var(--surface); stroke: var(--brand); stroke-width: 2.4;
              vector-effect: non-scaling-stroke; }
.vt-ax { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-top: 2px; }