/* 표 · 작은 탭 · 폼 — 관리자 화면과 목록 화면이 함께 쓴다 */

.subtabs{display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap}
.subtab{
  border:1px solid var(--bd); background:var(--card); color:var(--tx2);
  border-radius:20px; padding:6px 14px; font-size:12.5px; font-weight:600; cursor:pointer;
}
.subtab.on{background:var(--band); border-color:var(--band); color:#fff}
.subtab .n{
  margin-left:5px; background:var(--danger); color:#fff; font-size:10px;
  padding:1px 6px; border-radius:9px; font-weight:700;
}
.subtab.on .n{background:rgba(255,255,255,.22)}

.toolbar{display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap}
.toolbar .grow{flex:1; min-width:160px}

.tablewrap{
  background:var(--card); border:1px solid var(--bd); border-radius:var(--r);
  overflow-x:auto;
}
table.tbl{width:100%; border-collapse:collapse; font-size:13px; min-width:640px}
table.tbl th{
  text-align:left; font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--tx2);
  padding:11px 12px; border-bottom:1px solid var(--bd); white-space:nowrap; background:var(--card);
  position:sticky; top:0;
}
table.tbl td{padding:11px 12px; border-bottom:1px solid var(--bd-soft); vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tr:hover td{background:var(--bg)}
table.tbl td.num{font-family:var(--font-num); font-variant-numeric:tabular-nums}
table.tbl td.acts{white-space:nowrap; text-align:right}
table.tbl .sub{font-size:11.5px; color:var(--tx2); margin-top:2px}

.btn-sm{
  border:1px solid var(--bd); background:var(--card); color:var(--tx);
  border-radius:var(--r-sm); padding:5px 10px; font-size:11.5px; font-weight:600;
  cursor:pointer; margin-left:4px;
}
.btn-sm:hover{border-color:var(--green)}
.btn-sm.go{background:var(--band); border-color:var(--band); color:#fff}
.btn-sm.bad{border-color:var(--danger); color:var(--danger)}

.state{font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap}
.state.pending{background:var(--warn-bg); color:var(--warn)}
.state.ok{background:var(--chip); color:var(--tx)}
.state.suspended{background:var(--danger-bg); color:var(--danger)}

.msg{
  font-size:13px; line-height:1.65; padding:11px 13px; border-radius:var(--r-sm);
  margin:12px 0; display:none;
}
.msg.on{display:block}
.msg.bad{background:var(--danger-bg); color:var(--danger)}
.msg.good{background:var(--chip); color:var(--tx)}

textarea.input{min-height:180px; resize:vertical; font-family:var(--font-num); font-size:12.5px; line-height:1.7}

.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.row-inline{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
label.check{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; cursor:pointer}
label.check input{width:15px; height:15px; accent-color:var(--band)}

.note{font-size:12px; color:var(--tx2); line-height:1.7; margin:8px 0 0}
.note code{
  background:var(--chip); padding:1px 5px; border-radius:4px;
  font-family:var(--font-num); font-size:11.5px;
}

/* 작은 창 */
.modal{
  position:fixed; inset:0; z-index:120; background:rgba(23,28,20,.55);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal[hidden]{display:none}
.modal-box{
  background:var(--card); border-radius:var(--r); padding:22px;
  width:100%; max-width:420px; max-height:86vh; overflow-y:auto;
}
.modal-box h3{font-size:15px; font-weight:700; margin:0 0 4px}
.modal-box .sub{font-size:12.5px; color:var(--tx2); margin:0 0 16px; line-height:1.6}
.modal-acts{display:flex; gap:8px; margin-top:16px}
.modal-acts .btn, .modal-acts .btn-wide{flex:1; margin-top:0}

/* 공지 */
.notice-item{
  background:var(--card); border:1px solid var(--bd); border-radius:var(--r);
  padding:16px 18px; margin-bottom:10px;
}
.notice-item.pin{border-color:var(--gold); border-left-width:3px}
.notice-head{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:8px}
.notice-head h3{font-size:14.5px; font-weight:700; margin:0}
.notice-head .when{font-size:11.5px; color:var(--tx3); margin-left:auto}
.notice-body{font-size:13px; line-height:1.8; color:var(--tx2); white-space:pre-wrap}
.notice-admin{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--chip); border:1px solid var(--bd); border-radius:var(--r-sm);
  padding:10px 14px; margin-bottom:14px; font-size:12.5px; color:var(--tx2);
}
.notice-admin .btn-sm{margin-left:auto}
.notice-item.hidden-notice{opacity:.62; border-style:dashed}

@media (max-width:640px){
  .two{grid-template-columns:1fr}

  /* 폰에서 정보성 표(tbl-cards)는 카드로 쌓는다.
   * MR이 병원 복도에서 폰으로 보는데, 가로 스크롤 표는 오른쪽 칸(대개 '내용')이
   * 안 보여 쓸모가 없다. 줄마다 라벨:값을 세로로 쌓아 한눈에 들어오게 한다.
   * 관리자 표는 이 클래스가 없어 그대로 스크롤(주로 PC로 본다). */
  .tbl-cards table.tbl{min-width:0; font-size:12.5px}
  .tbl-cards thead{display:none}
  .tbl-cards tbody, .tbl-cards tr, .tbl-cards td{display:block; width:auto}
  .tbl-cards tr{padding:11px 13px; border-bottom:1px solid var(--bd)}
  .tbl-cards tr:last-child{border-bottom:0}
  .tbl-cards tr:hover td{background:transparent}
  .tbl-cards td{padding:3px 0; border:0; display:flex; gap:10px; align-items:baseline}
  .tbl-cards td::before{
    content:attr(data-label); flex:0 0 92px;
    color:var(--tx3); font-size:11px; font-weight:700; line-height:1.6;
  }
  .tbl-cards td.num{text-align:left; justify-content:flex-start}
}