/*
 * 메드프렌즈 관리자 꾸밈새.
 *
 * 기준은 docs/admin-design.md 다. 여기 없는 색·글꼴·그림자를 쓰지 않는다.
 * 바꾸고 싶으면 이 파일보다 그 문서를 먼저 고친다.
 *
 * 분위기는 "조용한 대학병원 접수 데스크". 흰 종이, 가는 회색 선, 또렷한
 * 검정 글씨. 청록은 지금 눌러야 할 것과 선택된 것에만 쓴다.
 */

/* ------------------------------------------------------------------ 토큰 */

:root {
  --paper: #FFFFFF;
  --paper-2: #F7F8FA;
  --rule: #E5E7EB;
  --rule-strong: #D1D5DB;
  --ink: #111827;
  --ink-soft: #6B7280;
  --ink-faint: #9CA3AF;
  --brand: #2CD8E2;
  --brand-ink: #0E7C84;
  --brand-tint: #E6FAFB;
  --danger: #B91C1C;
  --ok: #15803D;
  --warn: #B45309;

  --font: Pretendard, -apple-system, "Segoe UI", sans-serif,
          "Noto Sans Arabic", "Noto Sans Mongolian";
  --mono: ui-monospace, "JetBrains Mono", monospace;

  --side: 240px;
  --top: 48px;
}

/* ------------------------------------------------------------------ 바탕 */

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font: 400 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  /* 한국어 낱말을 글자마다 끊지 않는다. "정보공유" 가 세로로 서던 것을 막는다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

a { color: var(--ink); }
a:hover { color: var(--brand-ink); }
/* 표 안의 이름 링크는 밑줄 없이, 올렸을 때만 */
.mf-table a, .share a { text-decoration: none; }
.mf-table a:hover, .share a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 24px; line-height: 1.3; }
h2 { font-size: 16px; }
p { margin: 0; }

.num, .tnum { font-variant-numeric: tabular-nums; }
.code { font-family: var(--mono); font-size: 12px; }
.soft { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.small { font-size: 12px; }

/* 화면 읽기 프로그램에만 들리게 */
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* 아이콘. 선 그림 하나, 잉크색, 16px */
.ico {
  width: 16px; height: 16px; flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -3px;
}

/* ------------------------------------------------------------------ 틀 */

.shell {
  display: grid;
  grid-template-columns: var(--side) 1fr;
  min-height: 100vh;
}

/* 왼쪽 메뉴. 밝게 둔다. */
.side {
  background: var(--paper-2);
  border-right: 1px solid var(--rule);
  padding: 16px 0 24px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.side .brand {
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px 16px;
  text-decoration: none;
}
.side .brand .mark { height: 28px; width: auto; }
.side .brand .word { height: 16px; width: auto; }

.side .group {
  padding: 16px 16px 4px;
  color: var(--ink-faint); font-size: 12px; font-weight: 600;
}

.side a.item {
  display: block;
  padding: 8px 16px 8px 13px;
  border-left: 3px solid transparent;
  color: var(--ink-soft); text-decoration: none;
}
.side a.item:hover { color: var(--ink); background: var(--paper); }
.side a.item.on {
  color: var(--ink); font-weight: 600;
  border-left-color: var(--brand);
  background: var(--brand-tint);
}

/* 오른쪽 */
.main { min-width: 0; display: flex; flex-direction: column; }

.top {
  height: var(--top);
  display: flex; align-items: center; gap: 12px;
  padding: 0 24px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 5;
}
.top .where { font-weight: 600; flex: 1; min-width: 0; }
.top .who { display: flex; align-items: center; gap: 8px; }
.top form { margin: 0; }

/* 좁은 화면에서 메뉴를 여닫는 단추. 넓은 화면에서는 숨긴다. */
.top .burger { display: none; cursor: pointer; color: var(--ink); }
#nav { display: none; }
.scrim { display: none; }

.page {
  width: 100%; max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 48px;
  flex: 1;
}

.foot {
  padding: 16px 24px;
  color: var(--ink-faint); font-size: 12px;
  border-top: 1px solid var(--rule);
}

/* 쪽 머리: 제목과 주 단추 하나 */
.head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 24px;
}
.head .lead { margin-top: 4px; color: var(--ink-soft); }
.head .back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;
  color: var(--ink-soft); text-decoration: none; font-size: 12px; }
.head .back:hover { color: var(--ink); }
.head .acts { display: flex; gap: 8px; flex: none; }

/* 섹션 사이는 선이 아니라 빈 자리로 가른다 */
.gap { margin-top: 24px; }

/* ------------------------------------------------------------------ 카드 */

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 16px;
}
.card + .card { margin-top: 24px; }
.card > .card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
/* 표를 품은 카드는 표가 끝까지 닿게 한다 */
.card.flush { padding: 0; overflow: hidden; }
.card.flush > .card-head { padding: 16px 16px 0; }

/* ------------------------------------------------------------------ 숫자 칸 */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat { padding: 4px 16px; border-left: 1px solid var(--rule); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat .label { font-size: 12px; color: var(--ink-soft); }
.stat .value { font-size: 24px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.stat .sub { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ 표 */

.scroll { overflow-x: auto; }

.mf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  /* 좁은 화면에서는 찌그러뜨리지 않고 표 안에서 옆으로 넘긴다 */
  min-width: 720px;
}
.mf-table th {
  height: 36px; padding: 0 12px;
  text-align: left; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.mf-table td {
  height: 36px; padding: 6px 12px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.mf-table tr:last-child td { border-bottom: 0; }
.mf-table tbody tr:hover td { background: var(--paper-2); }

.mf-table .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mf-table .c { text-align: center; }
.mf-table .nw { white-space: nowrap; }
.mf-table .acts { text-align: right; white-space: nowrap; width: 1%; }
.mf-table .w-id { width: 72px; }
.mf-table .w-code { width: 96px; }
.mf-table .w-date { width: 112px; }
.mf-table .w-state { width: 96px; }
.mf-table .w-name { width: 22%; }
.mf-table .w-wide { width: 40%; }

/* 쓰지 않는 줄은 글씨만 흐리게. 취소선·회색 바탕은 쓰지 않는다. */
.mf-table tr.off td { color: var(--ink-soft); }

/* 방금 저장한 줄 */
.mf-table tr.hit td { background: var(--brand-tint); }

/* 표 안의 덧붙임 줄 (신고 내역 등) */
.mf-table tr.more td { background: var(--paper-2); padding: 12px; }
.mf-table tr.more ul { margin: 0; padding: 0; list-style: none; }
.mf-table tr.more li { padding: 2px 0; }

.empty {
  padding: 32px 16px; text-align: center; color: var(--ink-soft);
}
.empty a { margin-left: 8px; }

/* ------------------------------------------------------------------ 상태 */

/* 8px 점 + 한 단어. 신호등을 늘어놓지 않는다. */
.state { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.state::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--ink-faint); background: transparent;
}
.state.ok::before { background: var(--ok); border-color: var(--ok); }
.state.warn::before { background: var(--warn); border-color: var(--warn); }
.state.solid::before { background: var(--ink); border-color: var(--ink); }

/* ------------------------------------------------------------------ 칩 */

.chip {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 8px;
  border-radius: 999px;
  background: var(--paper-2); color: var(--ink);
  font-size: 12px; white-space: nowrap; text-decoration: none;
}
.chip.on { background: var(--brand-tint); color: var(--brand-ink); font-weight: 600; }
a.chip:hover { color: var(--ink); background: var(--rule); }
a.chip.on:hover { color: var(--brand-ink); background: var(--brand-tint); }

/* ------------------------------------------------------------------ 단추 */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--rule-strong); border-radius: 4px;
  background: var(--paper); color: var(--ink);
  font: inherit; font-weight: 600; white-space: nowrap;
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--paper-2); color: var(--ink); }

.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.primary:hover { background: #000; color: var(--paper); }

.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: var(--paper); color: var(--danger); }
.btn.danger.fill { background: var(--danger); color: var(--paper); }

/* 표 안의 동작. 테두리 없이 아이콘만. */
.ghost {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 4px;
  background: transparent; color: var(--ink);
  cursor: pointer; text-decoration: none;
}
.ghost:hover { background: var(--rule); color: var(--ink); }
.ghost.danger { color: var(--danger); }

/* 글씨만 있는 단추 (나가기 등) */
.link {
  border: 0; background: none; padding: 0;
  font: inherit; color: var(--ink-soft); cursor: pointer;
}
.link:hover { color: var(--ink); text-decoration: underline; }

form.inline { display: inline; margin: 0; }

/* ------------------------------------------------------------------ 입력 */

input[type=text], input[type=search], input[type=number], select, textarea {
  height: 36px; padding: 0 12px;
  border: 1px solid var(--rule-strong); border-radius: 4px;
  background: var(--paper); color: var(--ink);
  font: inherit;
}
textarea { height: auto; padding: 8px 12px; line-height: 1.5; resize: vertical; width: 100%; }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:disabled, select:disabled, textarea:disabled { background: var(--paper-2); }

/* 포커스. 그림자를 쓰는 유일한 자리다. */
input:focus, select:focus, textarea:focus, .btn:focus-visible, .ghost:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

/* 폼: 라벨 위, 입력 아래 */
.field { display: block; margin-bottom: 16px; }
.field > .label {
  display: block; margin-bottom: 4px;
  font-size: 12px; font-weight: 600; color: var(--ink);
}
.field > .label .must {
  display: inline-block; width: 4px; height: 4px; margin-left: 4px;
  border-radius: 50%; background: var(--danger); vertical-align: middle;
}
.field > .help { margin-top: 4px; font-size: 12px; color: var(--ink-soft); }
.field input[type=text], .field textarea, .field select { width: 100%; }

.form-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 24px;
}

/* 줄로 늘어놓는 입력 */
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row .grow { flex: 1; min-width: 160px; }
/* 라벨이 위에 붙은 입력을 늘어놓을 때는 아랫줄을 맞춘다 */
.row.end { align-items: flex-end; gap: 12px; }
.row .field { margin-bottom: 0; }
.row .field.grow input { width: 100%; }

/* 토글. 공개/비공개를 체크박스 대신 이것으로. */
.toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle .track {
  width: 32px; height: 18px; border-radius: 999px;
  background: var(--rule-strong); position: relative; flex: none;
}
.toggle .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: var(--paper);
}
.toggle input:checked + .track { background: var(--ink); }
.toggle input:checked + .track::after { left: 16px; }
.toggle input:focus-visible + .track { box-shadow: 0 0 0 3px var(--brand-tint); }

/* 읽기만 하는 값들 (회원 상세) */
.facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 24px; margin: 0;
}
.facts div { min-width: 0; }
.facts dt { font-size: 12px; color: var(--ink-soft); margin-bottom: 2px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ 찾기 줄 */

.filters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.filters input[type=search] { width: 240px; }
.filters .total { margin-left: auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ 쪽 넘김 */

.pager {
  display: flex; justify-content: flex-end; align-items: center; gap: 2px;
  margin-top: 12px;
  font-variant-numeric: tabular-nums;
}
.pager a, .pager span {
  min-width: 28px; height: 28px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; color: var(--ink-soft); text-decoration: none;
}
.pager a:hover { background: var(--paper-2); color: var(--ink); }
.pager .now { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ 탭 */

.tabs {
  display: flex; gap: 20px; overflow-x: auto;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 16px;
}
.tabs a {
  padding: 8px 0; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
}
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }

/* ------------------------------------------------------------------ 번역 칸 */

/* 테두리 없는 글 상자. 누르면 테두리가 생긴다. */
.cell-edit {
  width: 100%; min-height: 32px;
  border: 1px solid transparent; border-radius: 4px;
  padding: 6px 8px; background: transparent;
  font: inherit; font-size: 13px; resize: none;
}
.cell-edit:hover { border-color: var(--rule); }
.cell-edit:focus { background: var(--paper); resize: both; }
.cell-edit.dirty { border-color: var(--rule-strong); background: var(--paper); }

.help-line { margin-top: 8px; font-size: 12px; color: var(--ink-soft); }

/* 표 아래 저장 줄 */
.save-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  margin-top: 16px;
}
.save-bar .count { color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }

/* 변수명 칸 아래 붙는 설명 */
.memo { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-soft); }

/* ------------------------------------------------------------------ 막대·그래프 */

/* 비율 막대. 폭을 SVG 속성으로 넘겨 style="" 을 쓰지 않는다. */
.bar { display: block; width: 100%; height: 6px; }
.bar .track { fill: var(--rule); }
.bar .fill { fill: var(--ink-soft); }

.share { width: 100%; border-collapse: collapse; font-size: 13px; }
.share td { height: 32px; padding: 0 8px; border-bottom: 1px solid var(--rule); }
.share tr:last-child td { border-bottom: 0; }
.share td:first-child { padding-left: 0; }
.share td:last-child { padding-right: 0; }
.share .w-bar { width: 32%; }
.share .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; width: 48px; }

.thirds {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.thirds h3 { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }

/* 가입 추이. 점을 선으로 잇는다. 그림 하나만 청록이다. */
.chart svg { display: block; width: 100%; height: 160px; overflow: visible; }
.chart .area { fill: var(--brand-tint); stroke: none; }
.chart .line {
  fill: none; stroke: var(--brand); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* 길이가 0 인 선 + 둥근 끝 = 늘여도 동그란 점 */
.chart .dot {
  stroke: var(--brand); stroke-width: 6; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.chart .ticks { display: flex; margin-top: 8px; }
.chart .tick { flex: 1; min-width: 0; text-align: center; font-variant-numeric: tabular-nums; }
.chart .tick .n { font-size: 12px; font-weight: 600; }
.chart .tick .m { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }

/* ------------------------------------------------------------------ 알림 */

/* 오른쪽 아래. 흰 바탕, 왼쪽 막대로 종류를 가른다. 몇 초 뒤 사라진다. */
.toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 20;
  max-width: 360px;
  padding: 12px 16px 12px 13px;
  background: var(--paper);
  border: 1px solid var(--rule); border-left: 3px solid var(--ok);
  border-radius: 6px;
  animation: toast 5s ease forwards;
}
.toast.bad { border-left-color: var(--danger); }
@keyframes toast {
  0%, 85% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

/* ------------------------------------------------------------------ 확인 창 */

dialog.confirm {
  width: 440px; max-width: calc(100vw - 32px);
  padding: 24px; border: 1px solid var(--rule); border-radius: 6px;
  color: var(--ink);
}
dialog.confirm::backdrop { background: rgba(17, 24, 39, 0.4); }
dialog.confirm h2 { margin-bottom: 8px; }
dialog.confirm .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }

/* 큰 편집 창 */
dialog.editor {
  width: 880px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  padding: 24px; border: 1px solid var(--rule); border-radius: 6px;
  color: var(--ink);
}
dialog.editor::backdrop { background: rgba(17, 24, 39, 0.4); }
dialog.editor h2 { margin-bottom: 16px; font-family: var(--mono); }
dialog.editor .ref { margin-bottom: 16px; }
dialog.editor .ref .label { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; }
dialog.editor .ref .body {
  max-height: 160px; overflow: auto; white-space: pre-wrap;
  padding: 8px 12px; background: var(--paper-2); border-radius: 4px; font-size: 13px;
}
dialog.editor textarea { min-height: 280px; resize: both; }
dialog.editor .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* 긴 원문·자동번역은 표에서 세 줄까지만 보인다. 다 보려면 큰 창을 연다. */
.clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; white-space: pre-line;
}

/* 편집 칸과 큰 창 단추를 나란히 */
.edit-cell { display: flex; align-items: flex-start; gap: 4px; }
.edit-cell .cell-edit { flex: 1; }

/* ------------------------------------------------------------------ 로그인 */

.gate {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: var(--paper-2);
}
.gate .card { width: 320px; max-width: 100%; text-align: center; padding: 32px 24px; }
.gate .mark { height: 40px; width: auto; }
.gate h1 { font-size: 20px; margin-top: 16px; }
.gate .lead { color: var(--ink-soft); margin-top: 4px; }
.gate .oops {
  margin-top: 16px; padding: 8px 12px;
  border: 1px solid var(--rule); border-left: 3px solid var(--danger); border-radius: 4px;
  text-align: left; font-size: 13px;
}
.gate .ways { margin-top: 24px; display: grid; gap: 8px; justify-items: center; }

/* 카카오 단추. 노란 바탕은 카카오 로그인 디자인 지침이 정한 것이라
   토큰 밖이지만 그대로 둔다. 여기 말고는 쓰지 않는다. */
.gate .kakao {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 288px; height: 40px; border-radius: 4px;
  background: #FEE500; color: rgba(0, 0, 0, 0.85);
  font-weight: 600; text-decoration: none;
}
.gate .kakao:hover { color: rgba(0, 0, 0, 0.85); filter: brightness(0.97); }
.gate .google { display: flex; justify-content: center; min-height: 40px; }

/* ------------------------------------------------------------------ 좁은 화면 */

@media (max-width: 1000px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .thirds { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .shell { grid-template-columns: 1fr; }

  /* 메뉴는 위에 덮어 띄운다 */
  .side {
    position: fixed; inset: 0 auto 0 0; z-index: 30;
    width: var(--side); height: 100vh;
    transform: translateX(-100%); transition: transform 0.15s ease;
  }
  #nav:checked ~ .shell .side { transform: none; }
  #nav:checked ~ .shell .scrim {
    display: block; position: fixed; inset: 0; z-index: 25; background: rgba(17, 24, 39, 0.4);
  }

  .top { padding: 0 16px; }
  .top .burger { display: inline-flex; }
  .top .who .name { display: none; }

  .page { padding: 16px 16px 32px; }
  .head { flex-direction: column; }
  .filters input[type=search] { width: 100%; }
  .facts { grid-template-columns: 1fr; }
}