/* ==========================================================
   SNT 케어스테이션 — 회사 공통 디자인(2026-10-20 통일)
   흰 카드 · 남색 메뉴 · 파랑 하나 · 책갈피와 종이. 화려함 대신 반듯함.
   고령 사용자가 직접 쓰는 화면이라 대비와 크기를 먼저 지킨다.
   ========================================================== */
:root {
  color-scheme: only light;

  /* ── SNT 공통 색(2026-10-20 디자인 통일) ──────────────────────────────
     회사 화면은 모두 이 한 벌을 쓴다: 의사·측정 보조자·관리자·환자 앱·로그인.
     값의 정본은 대표 시안(2026-10-12 의사 PC)에서 뽑은 색이다. 화면별 파일(doctor-shell·
     clean·patient·caregiver-pc·admin)은 자기 이름(--dr-blue, --brand …)을 이 값에 잇기만
     하고 새 색을 만들지 않는다. 규칙과 쓰임새는 저장소 맨 위 DESIGN.md. */
  --snt-blue:        #2a64f6;   /* 주 행동·선택됨. 시안 #2f6bff 를 한 단계 진하게 — 흰 글자 4.9:1(시안 값은 4.50 으로 기준선에 걸렸다). 파란 글자는 --snt-blue-ink */
  --snt-blue-deep:   #1f55e0;   /* 누를 때 */
  --snt-blue-ink:    #1d4ed8;   /* 파란 글자·링크(흰 바탕 6.7:1) */
  --snt-blue-tint:   #eaf0ff;   /* 옅은 파랑 면 */
  --snt-navy:        #1b2540;   /* 왼쪽 메뉴·로그인 판 */
  --snt-navy-2:      #253153;   /* 메뉴 위에 올렸을 때 */
  --snt-navy-ink:    #c7cfe0;
  --snt-navy-dim:    #8f9bb5;
  /* 책갈피 + 종이 — 회사 시그니처. 고른 책갈피와 그 아래 내용 칸이 같은 옅은 파랑으로 한 장이 된다 */
  --snt-sheet:       #edf2ff;
  --snt-sheet-line:  #d3defb;
  --snt-tab-off:      rgba(100, 116, 139, .07);   /* 고르지 않은 책갈피 — 반투명 회색 */
  --snt-tab-off-hov:  rgba(100, 116, 139, .13);
  --snt-tab-off-line: rgba(100, 116, 139, .18);
  /* 지면·잉크·선 */
  --snt-paper:       #f3f5f9;
  --snt-paper-2:     #e9edf3;
  --snt-surface-2:   #f7f8fb;
  --snt-ink:         #111827;
  --snt-ink-2:       #374151;
  --snt-ink-3:       #556070;   /* 보조 글자 하한(흰 바탕 6.2:1, 지면 위 5.6:1) */
  /* 입력칸 안내 글(placeholder) — 흰 칸 4.8:1, 회색 칸(#f7f8fb) 4.6:1. 예전 값(#788296·#7c848f·#9aa3b2)은
     2.5~3.9:1 로 기준(4.5:1)에 못 미쳤다(2026-10-30 웹 필수 점검 14번). 화면별로 따로 두지 않는다 */
  --snt-placeholder: #6b7280;
  --snt-line:        #e5e9f1;
  --snt-line-2:      #d5dbe6;
  /* 상태 — 글자용 진한 색과 옅은 면. 색만으로 구분하지 않고 라벨 글자를 같이 쓴다 */
  --snt-green-ink:   #15803d;   --snt-green-tint:  #e8f7ee;
  --snt-amber-ink:   #7a5200;   --snt-amber-tint:  #fcf3dc;
  --snt-orange-ink:  #b45309;   --snt-orange-tint: #fff4e0;
  --snt-red-ink:     #c0262c;   --snt-red-tint:    #fdecec;

  /* ── 지면 ── */
  --paper:       var(--snt-paper);     /* 앱 배경 */
  --paper-2:     var(--snt-paper-2);   /* 눌린 면, 세그먼트 트랙 */
  --surface:     #ffffff;              /* 카드 */
  --surface-2:   var(--snt-surface-2); /* 카드 안 보조 면·표 머리 */

  /* ── 잉크 ── 고령 사용자 기준으로 본문 대비를 최우선 */
  --ink:         var(--snt-ink);
  --ink-2:       var(--snt-ink-2);
  --ink-3:       var(--snt-ink-3);
  --line:        var(--snt-line);      /* 헤어라인 */
  --line-strong: var(--snt-line-2);    /* 입력 테두리 */
  --line-2:      var(--snt-line-2);    /* 위와 같은 값 — 새 화면에서 쓰는 이름 */
  --placeholder: var(--snt-placeholder);   /* 어두운 화면은 theme.css 가 바꿔 낀다 */

  /* ── 주 행동 ── */
  --brand:       var(--snt-blue);
  --brand-deep:  var(--snt-blue-deep);
  --brand-ink:   var(--snt-blue-ink);
  --brand-tint:  var(--snt-blue-tint);
  /* 기존 화면이 쓰던 이름 — 값만 새 브랜드로 맞춘다. */
  --pine:        var(--snt-blue);
  --pine-deep:   var(--snt-blue-deep);
  --pine-tint:   var(--snt-blue-tint);
  --link:        var(--snt-blue-ink);
  --link-dark:   #93c5fd;

  /* ── 책갈피 + 종이 ── */
  --sheet:        var(--snt-sheet);
  --sheet-line:   var(--snt-sheet-line);
  --tab-off:      var(--snt-tab-off);
  --tab-off-hov:  var(--snt-tab-off-hov);
  --tab-off-line: var(--snt-tab-off-line);

  /* ── 강조 ── "오늘 할 일"처럼 등을 떠미는 자리에만 */
  --warm:        var(--snt-orange-ink);
  --warm-deep:   #92400e;
  --warm-tint:   var(--snt-orange-tint);

  /* ── 상태색 ── 색만으로 구분하지 않는다. 라벨 글자를 항상 같이 쓴다 */
  --wait:        var(--snt-amber-ink);   --wait-tint:  var(--snt-amber-tint);    /* 의료진 확인 대기 */
  --done:        var(--snt-green-ink);   --done-tint:  var(--snt-green-tint);    /* 확인 완료 */
  --redo:        var(--snt-orange-ink);  --redo-tint:  var(--snt-orange-tint);   /* 재측정 필요 */
  --refer:       var(--snt-red-ink);     --refer-tint: var(--snt-red-tint);      /* 내원 권고 */
  --red:         var(--snt-red-ink);     --red-tint:   var(--snt-red-tint);      /* 기존 이름 */
  --amber-tint:  var(--snt-amber-tint);
  --blue-tint:   var(--snt-blue-tint);

  /* ── 메뉴 레일 ── 남색 */
  --nav-bg: var(--snt-navy);  --nav-hover: var(--snt-navy-2);  --nav-ink: var(--snt-navy-ink);  --nav-dim: var(--snt-navy-dim);

  /* ── 모양 ── 둥근 모서리 세 단, 그림자는 거의 없다(선으로 나눈다) */
  --r-lg: 14px;    /* 큰 카드·종이 */
  --r-md: 12px;    /* 카드·책갈피 */
  --r-sm: 10px;    /* 입력·단추 */
  --radius: 12px;                                    /* 기존 이름 */
  --shadow:      0 12px 32px -12px rgba(16, 24, 40, .22);   /* 떠 있는 것(대화상자·메뉴)만 */
  --shadow-soft: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-1:    0 1px 2px rgba(16, 24, 40, .04);

  /* 고정폭 — 코드·기기 일련번호처럼 글자 하나하나가 중요한 곳에만. 숫자는 tabular-nums 로 맞춘다 */
  --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;
}

/* ---------- 브라우저가 그리는 면도 회사 색으로 — 고른 글자, 키보드 초점, 남색 메뉴의 스크롤 막대 ---------- */
::selection { background: var(--brand-tint); color: var(--ink); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.side-nav, .dr-side { scrollbar-width: thin; scrollbar-color: var(--nav-hover) transparent; }

/* ---------- 앱 상단바: 기록부 표지의 머리선 ---------- */
nav {
  background: var(--surface); color: var(--ink);
  border-bottom: 1px solid var(--line);
  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 + * { color: var(--ink-3); font-size: 13px; font-weight: 700; padding-left: 12px; border-left: 1px solid var(--line); }
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(--brand); }

/* ---------- 레이아웃 ---------- */
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)는 2026-10-20 통일에서
   뺐다: 의사·보조자·환자 화면에는 없어 관리자 화면만 다른 서비스처럼 보였다. */
.card h2 {
  font-size: 16px; letter-spacing: -.02em; color: var(--ink);
  margin: 0 0 12px; font-weight: 800;
}
.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 var(--line); cursor: pointer;
}
.item:last-child { border-bottom: 0; }
.item:hover { background: var(--surface-2); }
.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 var(--line); text-align: left; }
th { font-size: 12.5px; color: var(--ink-3); font-weight: 700; }
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 var(--brand-tint);
}
input[type="file"] { background: var(--surface-2); }
input[type="checkbox"] { width: auto; accent-color: var(--pine); }
::placeholder { color: var(--placeholder); }

/* 생년월일 세 칸(년·월·일) — app.js birthSelects 가 <input type="date" data-birth> 자리에 만든다 */
.date3 { display: flex; gap: 8px; }
.date3 select { flex: 1 1 0; min-width: 0; width: auto; margin: 0; }
.date3 .d3-y { flex-grow: 1.35; }
.clean .date3 select { padding-right: 34px; background-position: right 10px center; background-size: 18px; }

/* ---------- 버튼 ---------- */
button {
  padding: 10px 18px; border: 0; border-radius: 8px;
  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: var(--paper-2); color: var(--ink);    /* 보조: 옅은 회색 채움 */
  box-shadow: none;
}
button.gray:hover { background: var(--line-2); }
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 #f2c4c6; }
button.red:hover { background: var(--red-tint); }
button:disabled { background: var(--paper-2); color: var(--ink-3); 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: var(--paper-2); color: var(--ink-2); letter-spacing: .01em;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }

/* ---------- 기타 ---------- */
.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(--brand-ink); 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(--brand-ink); border-color: var(--sheet-line); }
.quality-msg.fail { background: var(--red-tint); color: var(--red); border-color: #f2c4c6; }

audio { width: 100%; margin-top: 12px; }
/* 위치 프리셋 칩 */
.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(--brand-ink); }

/* 환자 헤더 (진료 상세 상단) */
.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: var(--paper-2); 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-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.qbar { display: flex; align-items: center; gap: 8px; margin: 9px 0; }
.qbar .track { flex: 1; height: 6px; background: var(--paper-2); 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-size: 12.5px; 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(--brand-ink); }
.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-size: 26px; display: block; color: var(--brand-ink);
  font-weight: 800; 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: var(--brand-ink); border: 1px solid var(--sheet-line); }
.notice-banner.warn { background: var(--warm-tint); color: var(--warm); border: 1px solid #f6dcb4; }
.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(--brand-ink); }
.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-size: 12.5px; letter-spacing: 0;
  color: var(--brand-ink); border: 0; padding: 0; margin: 0 0 6px; font-weight: 800;
}
.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; }
/* 녹음 중 신호 세기 — 하트 크기로 보여 준다(quality.js showLevel). 파형·막대는 두지 않는다. */
.lvl-heart-wrap { display:flex; align-items:center; justify-content:center; }
.lvl-heart { width:44px; height:44px; fill:#e0475b; transform:scale(.55); transform-origin:50% 55%;
  transition:transform .09s linear, fill .2s; }
.lvl-heart.low { fill:#cdbfbd; }
.rec-hint { font-size:11.5px; color:var(--ink-3, #86868b); margin-top:4px; }

/* 녹음 직후 업로드 안내 — "녹음했는데 그다음 뭘 누르지"가 실제로 나온 질문이다.
   만든 사람이 헤맸으면 고령 사용자는 확실히 헤맨다. */
.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: var(--done-tint); color: var(--done); }
.badge.r { background: var(--refer-tint); color: var(--refer); }
.badge.ref { background: var(--refer-tint); color: var(--refer); }
.badge.b { background: var(--brand-tint); color: var(--brand-ink); }
.badge.y { background: var(--redo-tint); color: var(--redo); }
.badge.p { background: #f3eefb; color: #6b3fa0; }
.badge.gray { background: var(--paper-2); color: var(--ink-3); }

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

/* 비밀번호 표시 토글 */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 52px; width: 100%; }
.pw-eye {
  /* 세로 가운데는 위·아래를 칸에 붙여 맞춘다(transform 을 쓰지 않는다). 예전에는 top:50% + translateY(-50%)
     였는데, 누르는 순간 button:active 의 transform 이 그 값을 덮어 버튼이 반 칸(약 20px) 아래로 내려갔다 —
     손가락을 떼는 자리가 버튼 밖이 되어 눌림이 취소됐다(2026-10-19 사용자: "누르면 아래로 내려가면서
     안 눌려"). 위·아래를 붙이면 칸 높이 전체가 누르는 자리가 된다. */
  position: absolute; right: 6px; top: 0; bottom: 0; transform: none;
  /* 손가락으로 누르는 자리다. 글자만 작게 두고 영역은 40px 을 지킨다 —
     입력칸 안에 있다고 눌리는 크기까지 줄일 이유는 없다. */
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 44px;
  padding: 0 10px; font-size: 14px; font-weight: 600;
  border: 0; border-radius: var(--r-sm);
  background: transparent; 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: transparent; color: var(--ink);
}
.pw-eye:focus-visible { outline: 2px solid var(--ink-3); outline-offset: 1px; }
/* 눌러도 움직이지 않는다 — button:active { translateY(1px) } 보다 강하게(위 2026-10-19 설명) */
.pw-wrap .pw-eye:active { transform: none; }
.pw-eye svg { width: 22px; height: 22px; display: block; }
/* 브라우저가 스스로 붙이는 비밀번호 보기 버튼은 끈다. 윈도우 Edge 는 입력 중인
   비밀번호 칸에 눈 모양 버튼을 따로 띄우는데, 그걸로 글자를 보이게 해 둔 채
   우리 "표시/숨김"을 누르면 type 만 바뀌고 화면은 그대로라 버튼이 먹통으로 보인다.
   같은 일을 하는 버튼이 둘일 이유가 없다.
   규칙을 나눠 둔다 — 선택자 목록에 모르는 의사 요소가 하나라도 섞이면 브라우저가
   규칙 전체를 버린다(새 Edge 는 -ms-reveal 만 알고 옛 -ms-clear 는 모를 수 있다). */
input::-ms-reveal { display: none; }
input::-ms-clear { display: none; }


/* 비밀번호 변경 대화상자 (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%; }

/* ===== 확인·알림 창 (app.js uiConfirm / uiAlert) =====
   브라우저 기본 confirm/alert 대신 쓴다. 화면 토큰만 쓰고 크기는 손가락 기준. */
dialog.ui-dlg {
  margin: auto; border: 0; padding: 0; background: var(--surface); color: var(--ink);
  border-radius: var(--r-md); width: min(460px, calc(100vw - 32px));
  box-shadow: 0 18px 50px rgba(0, 0, 0, .26);
}
dialog.ui-dlg::backdrop { background: rgba(20, 18, 15, .45); }
.ui-dlg-box { padding: 24px 22px 18px; }
.ui-dlg h3 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; margin: 0 0 10px; }
.ui-dlg h3[hidden] { display: none; }
.ui-dlg p { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.ui-dlg-acts { display: flex; gap: 10px; margin-top: 20px; }
.ui-dlg-acts button {
  flex: 1; min-height: 50px; padding: 0 16px; border-radius: 10px;
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
}
.ui-dlg-acts button[hidden] { display: none; }
.ui-dlg-acts .gray { background: var(--paper-2); color: var(--ink); box-shadow: none; }
.ui-dlg-acts .gray:hover { background: var(--line); }
.ui-dlg-acts .danger { background: var(--refer); color: #fff; }
.ui-dlg-acts .danger:hover { background: #9b1c21; }


/* 측정값 기능이 꺼져 있으면(app.js FEATURES.vitals) 그 자리를 통째로 숨긴다.
   화면 스크립트가 style.display 를 다시 '' 로 돌려도 이긴다(!important). */
html:not(.vitals-on) [data-vitals] { display: none !important; }

/* ===== 측정값(활력징후) 입력·표시 — 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-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-size: 12px; font-variant-numeric: tabular-nums; 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; }

/* ── 심혈관 참고 정보(2026-10-26 대표 자료 1.8.1) ──
   위험인자·문진 증상·권고 검사는 사람이 고르고 적은 것을 글로 옮겨 적을 뿐이다. 값에 따라 색·아이콘을 바꾸지
   않는다(1등급) — 모든 줄이 같은 중립 색이다.
   색은 화면 모드를 따르는 이름(--ink-2·--ink-3·--surface-2·--line)으로 — 고정값(--snt-*)을 쓰면 어두운 화면에서
   밝은 글자 자리에 진한 회색이 그대로 남아 '의사가 권한 검사' 1.66:1, 위험요인 안내 2.68:1 이었다(2026-10-30 점검 14번).
   밝은 화면에서는 같은 값이다. */
.cardio-ref { display: grid; gap: 4px; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--line);
              border-radius: 8px; background: var(--surface-2); font-size: 13px; color: var(--ink-2); }
.cardio-ref .r { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.cardio-ref .k { flex: 0 0 auto; min-width: 88px; font-weight: 700; color: var(--ink-3); }
.cardio-ref .v { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.cardio-ref .r button { margin-left: auto; }
.rec-tests { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); }
.rec-tests b { font-weight: 700; }
.rv-tests { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--snt-line); border-radius: 8px; }
.rv-tests[hidden] { display: none; }
.rv-tests .lb { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.rv-tests .opts { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.rv-tests label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.rv-tests input[type="text"] { min-width: 0; width: 220px; max-width: 100%; }
.rf-form { display: grid; gap: 6px; }
.rf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
/* 이름도 동그라미와 같은 줄 가운데에(2026-10-26 운영 점검 E1 — 이름이 위에 붙어 보였다) */
.rf-k { flex: 0 0 140px; font-weight: 600; align-self: center; line-height: 1.3; margin: 0; }
/* 누르는 자리 44px — 동그라미가 작아 어르신 폰에서 누르기 어려웠다(2026-10-26 운영 점검 P2). 글자까지 눌린다. */
.rf-opt { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; cursor: pointer; }
.rf-opt input[type="radio"], .rf-opt input[type="checkbox"] { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--snt-primary, #2563eb); }
.rf-kinds { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-left: 12px; font-size: 13px; }
.rf-kinds.off { opacity: .45; }
/* 열면 그 자리로 내려가는 칸 — 위 고정 머리띠에 첫 줄이 가리지 않게(2026-10-26 운영 점검 E4) */
#editPt, #meRisk, #ptRiskForm { scroll-margin-top: 72px; }
.rf-kinds.off .rf-opt { cursor: default; }
.rf-hint { flex-basis: 100%; color: var(--ink-3); font-size: 12px; }
.rf-other { min-width: 0; width: 200px; max-width: 100%; }
@media (max-width: 480px) { .rf-k { flex-basis: 100%; } }
.cg-risk { border: 1px solid var(--snt-line); border-radius: 8px; padding: 8px 12px 10px; margin: 10px 0; }
.cg-risk legend { font-weight: 700; padding: 0 4px; }
.pt-risk-form { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--snt-line); border-radius: 8px; display: grid; gap: 8px; }
.pt-risk-form[hidden] { display: none; }


/* ── 본문 바로 가기(2026-11-02 웹 필수 점검 15번) ──
   키보드로 Tab 을 처음 누르면 맨 먼저 닿는 링크. 평소에는 화면 밖에 두고 초점을 받을 때만 왼쪽 위에 보인다 —
   화면 모양은 그대로다. 누르면 메뉴를 건너뛰고 본문(main)으로 초점을 옮긴다(a11y.js — 주소의 #은 바꾸지 않는다.
   의사·관리자 화면은 #/주소로 화면을 바꾸기 때문). */
.skip-link {
  position: fixed; left: 12px; top: -80px; z-index: 1000;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--snt-navy); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none;
  box-shadow: var(--shadow);
}
.skip-link:focus, .skip-link:focus-visible { top: 12px; outline: 3px solid var(--snt-blue); outline-offset: 2px; }
/* 바로 가기로 초점을 받은 본문 칸에는 테두리를 두르지 않는다 — 화면 전체가 파란 상자로 보인다 */
#main:focus, #adminMain:focus { outline: none; }