:root {
  --ink: #111;
  --line: #333;
  --muted: #666;
  --bg: #f3f4f6;
  --paper: #fff;
  --accent: #2563eb;
  --nurse: #d32f2f;
  --head: #eef2f7;
  /* 네오브루탈리즘 버튼: 굵은 검정 테두리 + 딱딱한 그림자, 누르면 그림자만큼 들어간다 */
  --nb-ink: #111;
  --nb-yellow: #ffd43b;
  --nb-shadow: 3px 3px 0 var(--nb-ink);
  --nb-shadow-sm: 2px 2px 0 var(--nb-ink);
}

/* 서울한강체(공문 전용). 실제로 쓰이는 굵기만 내려받는다. */
@font-face { font-family: "SeoulHangang"; src: url("fonts/SeoulHangangL.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "SeoulHangang"; src: url("fonts/SeoulHangangM.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "SeoulHangang"; src: url("fonts/SeoulHangangB.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "SeoulHangang"; src: url("fonts/SeoulHangangEB.ttf") format("truetype"); font-weight: 800; font-display: swap; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 0.875rem;
}

/* ---------- 위쪽 도구줄: 양식 탭 | 그 양식의 도구 · 신청 호실 · 상태 · 초기화 ----------
   공통 상단 메뉴(../common/gnav.php) 바로 아래 한 줄이고, 화면을 내려도 위에 붙어 있다.
   (2026-11-02 왼쪽 세로 메뉴에서 바꿈 — 세로 메뉴가 13rem을 차지해 신청서·주문서가 그만큼 더 작게 축소됐음) */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.6rem 1rem;
  background: var(--paper);
  border-bottom: 2px solid var(--nb-ink);
}
.toolbar h1 { margin: 0; font-size: 1rem; white-space: nowrap; }

.tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tab { padding: 0.45rem 0.9rem; text-decoration: none; white-space: nowrap; }

.actions { flex: 1 1 20rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-left: 1rem; border-left: 2px dashed #ccc; }
.actions button { padding: 0.4rem 0.9rem; white-space: nowrap; }
.actions .status { order: 2; flex: 1 1 10rem; word-break: keep-all; } /* 상태 문구는 도구 뒤, 남는 칸에 */
/* 초기화는 자주 쓰는 버튼과 떼어 오른쪽 끝에, 빨간 테두리로(잘못 누르지 않게) */
.actions #resetBtn { order: 3; margin-left: auto; border-color: #f0b4b4; color: var(--nurse); }

/* 주문서: 그 달 신청한 호실 바로가기(누르면 그 호실 신청서로) — assets/app.js renderRoomJump */
.room-jump { order: 1; display: none; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--muted); }
body[data-form="order"] .room-jump:not(:empty) { display: inline-flex; }
.actions .room-jump button { padding: 0.2rem 0.55rem; font-size: 0.8rem; color: #d70015; }
/* 주문서 표의 호실 칸 제목도 누르면 그 호실 신청서로(화면에서만) */
@media screen {
  #form-order th.room[data-room] { cursor: pointer; }
  #form-order th.room[data-room]:hover { color: var(--accent); text-decoration: underline; }
}

@media (max-width: 60rem) {
  .actions { flex-basis: 100%; padding-left: 0; border-left: 0; }
}

/* ---------- 버튼 공통 = 출퇴근기 도구줄 버튼 모양(2026-11-09 사용자 요청, 예전 네오브루탈리즘 검은 테두리·그림자) ----------
   흰 바탕·얇은 회색 테두리·둥근 모서리, 마우스를 올리면 연회색. 지금 양식 탭·저장은 파란 바탕(--btn-pri) */
:root { --btn-line: #cfd5e1; --btn-hover: #f0f3f8; --btn-pri: #2457d6; --btn-pri-hover: #1c47b3; }
.tab, .actions button,
.tpl-btns button, .tpl-add, .tpl-actions button {
  border: 1px solid var(--btn-line);
  border-radius: 6px;
  background: var(--paper);
  color: #1d2433;
  font: inherit;
  cursor: pointer;
  transition: background 0.12s ease;
}
.tab:hover, .actions button:hover,
.tpl-btns button:hover, .tpl-add:hover, .tpl-actions button:hover { background: var(--btn-hover); }
.tab:active, .actions button:active,
.tpl-btns button:active, .tpl-add:active, .tpl-actions button:active { background: #e4e9f1; }
.tab:focus-visible, .actions button:focus-visible,
.tpl-btns button:focus-visible, .tpl-add:focus-visible, .tpl-actions button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.actions .primary, .tpl-actions .primary,
.tab.is-active { background: var(--btn-pri); border-color: var(--btn-pri); color: #fff; }
.actions .primary:hover, .tpl-actions .primary:hover,
.tab.is-active:hover { background: var(--btn-pri-hover); }
.order-only, .request-only, .letter-only { display: none; }
body[data-form="order"] .order-only { display: inline-flex; gap: 0.25rem; align-items: center; }
body[data-form="request"] .request-only,
body[data-form="letter"] .letter-only { display: inline-block; }
.status { color: var(--muted); font-size: 0.8rem; }
.status.is-error { color: var(--nurse); }

/* ---------- 용지 ---------- */
main { flex: 1; min-width: 0; padding: 1rem; }
.sheet {
  display: none;
  max-width: 210mm;
  margin: 0 auto;
  padding: 1.5rem;
  background: var(--paper);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  overflow-x: auto;
}
.sheet.is-active { display: block; }

/* 양식 나란히: 각 A4 폭 그대로 두고 묶음 전체를 화면 너비에 맞춰 축소한다(--fit, assets/app.js fitSheets). */
.sheets {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  width: max-content;
  margin: 0 auto;
  zoom: var(--fit, 1);
}
.sheets > .sheet { display: block; flex: 0 0 auto; width: 210mm; max-width: none; margin: 0; cursor: default; }
/* 세 양식 모두 A4(210×297mm) 한 장. 신청서·주문서 안쪽 여백 = 인쇄 @page 여백과 같게 해 화면과 인쇄 배치를 맞춘다.
   위 25mm = 파일철 펀치 자리(회의록·교육 서명지와 같음), 좌우·아래 12mm. (공문은 .letter가 A4 크기·여백을 직접 정한다) */
.sheets > .sheet:not(.letter) { min-height: 297mm; padding: 25mm 12mm 12mm; }
.sheets > .letter { display: flex; }
.sheets > .sheet:not(.is-active) { box-shadow: 0 0 0 1px #ddd; }
.sheets > .sheet.is-active { box-shadow: 0 0 0 3px var(--nb-yellow), 0 0 0 5px var(--nb-ink); }
/* 신청서·주문서는 나란히, 공문은 [공문] 메뉴를 눌렀을 때 따로,
   양식 편집은 주문서 자리(신청서 오른쪽)에, 주문서 약품 편집은 신청서 자리(주문서 오른쪽)에 표시한다. */
body[data-form="letter"] .sheets > .sheet:not(.letter),
body:not([data-form="letter"]) .sheets > .letter,
body:not([data-form="template"]) .sheets > #form-template,
body[data-form="template"] .sheets > #form-order,
body:not([data-form="catalog"]) .sheets > #form-catalog,
body[data-form="catalog"] .sheets > #form-request { display: none; }

/* 편집 중(양식·약품): 양식과 편집 화면이 각자 따로 스크롤되도록 화면 높이의 스크롤 상자로 만든다.
   .sheets는 zoom(--fit)으로 축소되므로 높이를 --fit으로 나눠 실제 화면 높이(100vh - main 위아래 여백)에 맞춘다. */
@media (min-width: 60.0625rem) {
  body[data-form="template"] main,
  body[data-form="catalog"] main { padding-bottom: 0; }
  body[data-form="template"] .sheets,
  body[data-form="catalog"] .sheets { height: calc((100vh - 1rem) / var(--fit, 1)); align-items: stretch; }
  body[data-form="template"] .sheets > .sheet,
  body[data-form="template"] .sheets > #form-template,
  body[data-form="catalog"] .sheets > .sheet,
  body[data-form="catalog"] .sheets > #form-catalog { min-height: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain; }
  /* 스크롤 상자 안의 sticky는 상자 안쪽 여백만큼 떠 있으므로, 아래 여백을 없애 저장 버튼 줄을 맨 아래에 붙인다. */
  body[data-form="template"] .sheets > #form-template,
  body[data-form="catalog"] .sheets > #form-catalog { padding-bottom: 0; }
  body[data-form="template"] .tpl-actions,
  body[data-form="catalog"] .tpl-actions { margin-bottom: 0; }
}

@media (max-width: 60rem) {
  /* 세로로 쌓을 때 용지는 화면 폭(100%)에 맞춤. width:auto 에 margin:0 auto 면 용지가 안의 표 폭(약 730px)만큼 커져
     페이지 전체가 넓어졌음(휴대폰에서 전체가 작게 축소되어 보임). 넓은 표는 용지(.sheet, overflow-x:auto) 안에서 옆으로 밀어서 봄 */
  .sheets { flex-direction: column; width: auto; zoom: 1; }
  .sheets > .sheet { width: 100%; min-width: 0; max-width: 210mm; margin: 0 auto; }
}
/* 공유 링크(?share=1, index.php $share): 약품 신청서 양식만.
   주문서·공문·편집 화면과 메뉴(양식 탭·상단 메뉴 링크)·양식 편집·초기화·링크 공유 버튼을 숨기고, 불러오기·저장·인쇄만 남긴다. */
body.share .gnav > a,
body.share .tabs,
body.share #editTplBtn,
body.share #resetBtn,
body.share #shareBtn { display: none !important; }
body.share .sheets > .sheet:not(#form-request) { display: none !important; }
body.share .sheets > #form-request.is-active { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); } /* 한 장뿐이라 '활성' 노란 테두리는 뺌 */

/* 신청서·주문서도 공문과 같은 서울한강체(기본 L). 굵게(th·합계)는 B로 나온다. */
#form-request, #form-order { font-family: "SeoulHangang", "Malgun Gothic", sans-serif; font-weight: 300; }
/* font-weight: normal(400)은 M(500)으로 잡히므로 본문과 같은 L을 유지한다. */
#form-request tbody th, #form-order tbody th, #form-request .title { font-weight: inherit; }

table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th, td { border: 1px solid var(--line); padding: 0.25rem; text-align: center; vertical-align: middle; }
thead th { background: var(--head); }
tbody th { font-weight: normal; line-height: 1.35; }

input, select { font: inherit; color: inherit; }
td input {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: center;
  padding: 0.2rem 0;
}
td input:focus, .title input:focus, .sign input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
td input:disabled { background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 4px, #e9e9e9 4px, #e9e9e9 8px); }

.w-year { width: 4.5em; }
.w-month { width: 3.2em; }
.w-name { width: 10.2em; }
.w-date { width: 11em; }
.title input, .title select, .sign input, .order-head input {
  border: 0;
  border-bottom: 1px solid #aaa;
  background: transparent;
  text-align: center;
}

/* ---------- ① 신청서 ---------- */
.request { min-width: 640px; }
.request .c-name { width: 14.5%; }
.request .c-num { width: 7%; }
.request .c-stock { width: 9.5%; } /* '현재수량' 제목이 한 줄에 들어가게(약품명 칸에서 2.5%를 가져옴, 한쪽 합계 46% 그대로) */
.request thead tr:nth-child(2) th { white-space: nowrap; }
.request .c-exp { width: 15%; } /* "YY.MM.DD~YY.MM.DD"가 한 줄에 들어가도록 */
.request input[data-field="exp"] { font-size: 0.72rem; letter-spacing: -0.02em; }
.request input[data-field="exp"]:not(:disabled) { cursor: pointer; }
.request .title { padding: 1.25rem 0.5rem; font-size: 1.35rem; font-weight: normal; background: var(--paper); }
.request .title select { font-size: inherit; }
/* 그 달에 신청 수량이 있는 호실(assets/app.js markFilledRooms): 목록에서 빨간색, 고른 호실이 그렇다면 제목 칸도 빨간색 */
#roomSelect option.room-filled, #roomSelect.room-filled { color: #d70015; font-weight: 700; }
#roomSelect option:not(.room-filled) { color: #1d1d1f; font-weight: 400; }
@media print { #roomSelect.room-filled { color: inherit; font-weight: inherit; } }
.ym-pick { position: relative; display: inline-block; }
.ym-btn {
  font: inherit;
  padding: 0 0.3em;
  border: 0;
  border-bottom: 1px solid #aaa;
  background: transparent;
  cursor: pointer;
}
.ym-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ym-pop {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: 15rem;
  padding: 0.6rem;
  font-size: 0.95rem;
  background: var(--paper);
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.ym-pop[hidden] { display: none; }
.ym-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.ym-head button { width: 2rem; height: 2rem; border: 0; border-radius: 6px; background: transparent; font-size: 1.1rem; cursor: pointer; }
.ym-head button:hover:not(:disabled) { background: #eef2f7; }
.ym-head button:disabled { opacity: 0.3; cursor: default; }
.ym-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3rem; }
.ym-grid button { padding: 0.45rem 0; border: 1px solid transparent; border-radius: 6px; background: transparent; font: inherit; cursor: pointer; }
.ym-grid button:hover { background: #eef2f7; }
.ym-grid button.is-today { border-color: var(--accent); }
.ym-grid button.is-selected { background: var(--accent); color: #fff; }
.nurse-only { color: var(--nurse); }
/* 신청서 약품명 칸: 줄마다 주문서 약품을 고르는 선택 목록(처음에는 빈칸) */
.request .req-name { padding: 0 2px; }
.request select.req-med {
  width: 100%;
  border: 0;
  background: transparent;
  font-size: 0.78rem;
  text-align: center;
  cursor: pointer;
}
.request select.req-med:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
/* 평소(양식 편집이 아닐 때)는 약품명이 잠겨 있으므로 화살표 없이 글자처럼 보인다 */
.request select.req-med:disabled { appearance: none; -webkit-appearance: none; color: inherit; opacity: 1; cursor: default; }
/* 양식 편집 중: 고를 수 있는 칸임을 알 수 있게 옅은 노란 배경 */
body[data-form="template"] .request .req-name { background: #fff8d6; }
/* 다른 호실의 양호실 전용 약품 줄: 빨간 이름 + 신청 칸 "신청불가"(assets/app.js setSlotEnabled) */
.request th.nurse-blocked, .request th.nurse-blocked select.req-med:disabled { color: var(--nurse); text-decoration: line-through; }
.request td input[data-pos]::placeholder { color: var(--nurse); opacity: 1; font-size: 0.72rem; font-weight: 700; }
/* 약품 전체 이름(줄바꿈됨, assets/app.js setSlotEnabled가 채움). 선택 목록은 줄바꿈이 안 돼 긴 이름이 칸에서 잘리므로,
   양식 편집(약품을 고르는 화면)이 아닐 때는 화면에서도 인쇄처럼 이 이름을 보여 준다 */
.request .req-print { display: none; font-size: 0.78rem; line-height: 1.25; }
body:not([data-form="template"]) .request select.req-med { display: none; }
body:not([data-form="template"]) .request .req-print { display: block; }
/* 현재수량 자동 계산 칸(공통 재고 − 신청 합계). 숫자를 직접 고치면 재고 실사값이 되어 검은 글씨로 바뀐다. */
.request td input.stock-auto { color: var(--accent); }
/* 신청이 이전 현재수량보다 많아 부족한 경우(음수) */
.request td input.stock-neg { color: var(--nurse); font-weight: 700; }
/* 약품을 고르기 전 줄의 입력칸은 막혀 있지만 빗금 대신 빈칸으로 보이게 한다 */
.request td input[data-pos]:disabled { background: none; cursor: default; }
.etc { text-align: left; padding: 0.5rem 0.75rem; }
.etc label { display: flex; gap: 0.5rem; align-items: center; color: var(--muted); margin-bottom: 0.25rem; }
.etc label input { flex: 1; border: 0; border-bottom: 1px solid #aaa; text-align: left; }
.notes { list-style: none; margin: 0.5rem 0 0; padding: 0; line-height: 1.6; }
.confirm { margin: 0.25rem 0 0; text-align: right; color: var(--muted); }

.sign { margin-top: 1.5rem; text-align: right; line-height: 2; }
.sign p { margin: 0; }
.sign-label { margin-right: 0.3em; }

/* ---------- ② 주문서 ---------- */
.order-head { position: relative; text-align: center; margin-bottom: 0.75rem; }
.order-head h2 { margin: 0 0 0.25rem; font-size: 1.35rem; }
.order-head > input { display: block; margin-left: auto; text-align: right; }
/* 최소 폭 = A4 본문 폭(210mm - 좌우 여백 12mm×2). 더 넓으면 용지 안에 가로 스크롤이 생긴다. */
.order { min-width: 186mm; font-size: 0.8rem; counter-reset: rowno; }
/* 29개 품목 + 추가 줄 몇 개가 A4 한 장에 들어가도록 줄 간격을 줄인다. */
.order th, .order td { padding: 2px; line-height: 1.15; }
.order tbody { font-size: 0.75rem; }
.order td input { padding: 0; }
/* 수량(신청서에서 자동)·단가([약품 편집]에서)는 주문서에서 고칠 수 없다 */
.order td input[readonly] { cursor: default; }
.order td input[readonly]:focus { outline: none; }
/* 약품 편집에서 바꿨지만 아직 저장하지 않은 단가(미리보기) */
.order td.cat-preview { background: #fff3bf; }
.order thead th { font-size: 0.75rem; }
.order .no { width: 2.2rem; }
.order thead th:nth-child(2) { width: 9.5rem; }
.order tbody tr { counter-increment: rowno; }
.order tbody .no::before { content: counter(rowno); }
.order .name { text-align: left; padding-left: 0.4rem; }
.order .name input { text-align: left; }
.order .sum, .order .amount, .order tfoot td { font-variant-numeric: tabular-nums; }
.order .amount, #amountTotal { text-align: right; padding-right: 0.4rem; }
.order thead th:nth-last-child(1) { width: 5.5rem; }
.order thead th:nth-last-child(2) { width: 4.5rem; }
.order tfoot td, .order tfoot th { background: var(--head); font-weight: bold; }
.order tbody tr.is-empty .sum, .order tbody tr.is-empty .amount { color: #aaa; }

.sum-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--head);
  border-radius: 6px;
  text-align: left;
}
.submitted { color: var(--nb-ink); font-size: 0.8rem; font-weight: 700; } /* 주문서 '신청 장소: …' — 잘 보이게 진하게 */


/* ---------- ③ 공문 (A4, 서울한강체) ---------- */
.letter {
  --lt-margin-x: 20mm;
  --lt-margin-top: 18mm;
  --lt-margin-bottom: 14mm;
  display: none;
  flex-direction: column;
  width: 210mm;
  max-width: 100%;
  min-height: 297mm;
  padding: var(--lt-margin-top) var(--lt-margin-x) var(--lt-margin-bottom);
  font-family: "SeoulHangang", "Malgun Gothic", sans-serif;
  font-weight: 300;
}
.letter.is-active { display: flex; }
.letter[data-weight="M"] { font-weight: 500; }
.letter[data-weight="B"] { font-weight: 700; }
.letter[data-weight="EB"] { font-weight: 800; }
/* 공문에서만 보인다(.letter-only). 그냥 .letter-weight 로 쓰면 .letter-only 숨김을 덮어 주문서·신청서에도 보였음 */
body[data-form="letter"] .letter-weight { display: inline-flex; gap: 0.25rem; align-items: center; }
.letter-weight select { padding: 0.3rem; border: 1px solid #bbb; border-radius: 6px; font: inherit; }
.lt-in {
  border: 0;
  border-bottom: 1px dashed transparent;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 0.1rem 0.15rem;
  min-width: 0;
}
.lt-in:hover { border-bottom-color: #bbb; }
.lt-in:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: #f8fbff; }
.lt-area { display: block; width: 100%; resize: none; overflow: hidden; line-height: 1.7; white-space: pre-wrap; }

.lt-head { display: grid; grid-template-columns: 4.5rem 1fr 4.5rem; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; }
.lt-logo, .lt-emblem { width: 100%; height: auto; }
.lt-center { text-align: center; }
.lt-center .lt-in { display: block; width: 100%; text-align: center; }
.lt-slogan { font-size: 0.8rem; }
.lt-org { font-size: 1.6rem; font-weight: 800; letter-spacing: 0.1em; }

.lt-meta { border-bottom: 2px solid var(--ink); padding-bottom: 0.25rem; margin-bottom: 1.25rem; }
.lt-row { display: flex; align-items: baseline; gap: 1rem; font-size: 1rem; line-height: 1.9; }
.lt-row .lt-label { flex: 0 0 3.5rem; }
.lt-row .lt-in { flex: 1; }

.lt-body { margin-bottom: 2rem; }
.lt-intro { padding-left: 3rem; }
.lt-below { display: block; width: 100%; margin: 0.75rem 0 0.25rem; text-align: center; }
.lt-details { padding-left: 4.5rem; }
/* 사용내역 표(9개 호실 + 합계, 11열이 A4 본문 폭에 들어가도록 작게) */
.lt-usage { margin: 0.5rem 0 0; }
/* 품목이 많아도 공문이 A4 한 장에 들어가도록 줄 간격을 좁게 둔다. */
/* 글자는 칸 가운데(가로·세로), 줄 높이는 읽기 편할 만큼만 — 품목이 많으면 A4를 넘으므로 경고(assets/app.js warnLetterOverflow) */
/* 5mm: 공문 A4 한 장에 사용내역 13개 품목까지 들어간다(6.5mm는 9개) */
.usage { width: 100%; font-size: 0.72rem; line-height: 1.2; }
.usage th, .usage td {
  height: 5mm;
  padding: 0.05rem 0.2rem;
  border: 1px solid #555;
  text-align: center;
  vertical-align: middle;
  font-weight: inherit;
}
.usage thead th { background: #eef1f4; font-weight: 500; }
.usage .u-name { width: 38%; } /* 긴 품목명이 두 줄로 늘어나지 않도록 넓게 */
.usage .u-sum { width: 8%; font-weight: 700; }
.usage tfoot th, .usage tfoot td { background: #f6f7f9; font-weight: 700; }
.usage td { font-variant-numeric: tabular-nums; }
.lt-usage-notice { margin: 0.5rem 0 0; padding: 0.5rem 0.75rem; border: 1px dashed #bbb; border-radius: 6px; color: var(--muted); font-size: 0.8rem; }

/* 붙임·발신명의 묶음을 아래로 밀어 결재란 바로 위에 둔다(본문 길이와 무관). */
.lt-closing { margin-top: auto; }

.lt-sender { display: block; width: 100%; margin: 28mm 0 1rem; text-align: center; font-size: 1.5rem; font-weight: 800; letter-spacing: 0.15em; }

.lt-foot { border-top: 4px solid #c8c8c8; padding-top: 0.5rem; font-size: 0.8rem; line-height: 2.2; }
.lt-approvals { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0 0.5rem; }
.lt-approval { display: flex; gap: 0.25rem; align-items: baseline; }
.lt-role { width: 4.5em; font-size: 0.7rem; }
.lt-name { flex: 1; width: 5em; font-size: 0.85rem; }
.lt-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.35rem; }
.lt-line .lt-label { margin-right: 0.25rem; }
.lt-line .lt-in { width: 8em; }
.lt-line .lt-date { width: 10em; }
.lt-line .lt-zip { width: 4em; }
.lt-line .lt-tel { width: 7.5em; text-align: center; }
.lt-line .lt-wide { width: 13em; }

/* ---------- ④ 양식 편집 ---------- */
body[data-form="template"] #resetBtn,
body[data-form="catalog"] #resetBtn { display: none; }
.tpl-title { margin: 0 0 0.25rem; font-size: 1.2rem; }
.tpl-hint { margin: 0 0 1rem; color: var(--muted); }
.tpl-box { margin: 0 0 1rem; padding: 0.75rem; border: 1px solid #ccc; border-radius: 6px; min-width: 0; }
.tpl-box legend { padding: 0 0.25rem; font-weight: bold; }
.tpl-labels { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: 0.5rem; }
.tpl-box input[type="text"], .tpl-box textarea, .tpl-box select {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid #bbb;
  border-radius: 4px;
  background: var(--paper);
}
.tpl-rows { width: 4.5rem; margin: 0 0.25rem; padding: 0.35rem 0.5rem; border: 1px solid #bbb; border-radius: 4px; text-align: right; }
.tpl-list { margin: 0 0 0.5rem; padding-left: 1.5rem; }
.tpl-item { padding: 0.5rem 0; border-bottom: 1px dashed #ddd; }
.tpl-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; align-items: center; margin-top: 0.35rem; }
.tpl-meta label { white-space: nowrap; color: var(--nurse); }
/* 주문서 약품 편집(약품명·단가) — .tpl-box 밖이라 입력칸 모양을 따로 준다 */
.cat-list .cat-name, .cat-list .cat-price { padding: 0.35rem 0.5rem; border: 1px solid #bbb; border-radius: 4px; background: var(--paper); font: inherit; }
.cat-list .cat-name { width: 100%; resize: vertical; }
.cat-list .cat-price { width: 7rem; text-align: right; }
.cat-list .cat-price-label { color: var(--ink); }
.tpl-btns { display: inline-flex; gap: 0.25rem; }
.tpl-btns button, .tpl-add, .tpl-actions button { padding: 0.3rem 0.6rem; }
.tpl-btns .tpl-del { color: var(--nurse); }
.tpl-field { display: block; margin-bottom: 0.5rem; }
.tpl-field-block textarea { margin-top: 0.25rem; }
/* 저장 버튼이 긴 목록 맨 아래에 묻히지 않도록 화면 하단에 고정한다.
   .sheet의 overflow-x:auto는 sticky 기준을 시트 자신으로 바꾸므로 편집 화면만 해제한다. */
#form-template, #form-catalog { overflow: visible; }
.tpl-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 0.75rem;
  margin: 1rem -12mm -12mm; /* 시트 안쪽 여백(12mm)까지 가로·아래로 채운다 */
  padding: 0.75rem 12mm 1rem;
  background: var(--paper);
  border-top: 2px solid var(--nb-ink);
}

/* ---------- 확인 창 ---------- */
.dlg {
  width: min(26rem, calc(100vw - 2rem));
  padding: 1.25rem;
  border: 2px solid var(--nb-ink);
  border-radius: 10px;
  box-shadow: 5px 5px 0 var(--nb-ink);
  background: var(--paper);
  color: var(--ink);
}
.dlg::backdrop { background: rgba(0, 0, 0, 0.35); }
.dlg-msg { margin: 0 0 1.25rem; line-height: 1.6; white-space: pre-line; word-break: keep-all; }
.dlg-fields:empty { display: none; }
.dlg-fields { display: grid; gap: 0.6rem; margin: -0.5rem 0 1.25rem; }
.dlg-field { display: grid; gap: 0.25rem; font-weight: 700; }
.dlg-field input { padding: 0.45rem 0.6rem; border: 2px solid var(--nb-ink); border-radius: 8px; font: inherit; font-weight: 400; }
.dlg-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.tpl-actions .tpl-pw { margin-left: auto; } /* 저장·돌아가기와 떨어뜨려 오른쪽 끝에 */
.dlg-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; }
.dlg-btns button {   /* 창 버튼도 출퇴근기 도구줄 모양(2026-11-09) */
  padding: 0.45rem 1rem;
  border: 1px solid var(--btn-line);
  border-radius: 6px;
  background: var(--paper);
  color: #1d2433;
  font: inherit;
  cursor: pointer;
  transition: background 0.12s ease;
}
.dlg-btns button:hover { background: var(--btn-hover); }
/* 인쇄할 호실 고르기(index.php #printRoomsDlg) */
.pr-rooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem 1rem; margin: -0.5rem 0 0.75rem; }
.pr-rooms label { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pr-rooms input { width: 1.1rem; height: 1.1rem; }
.pr-rooms .pr-all { grid-column: 1 / -1; padding-bottom: 0.5rem; border-bottom: 1px solid #ddd; }
.pr-note { margin: 0 0 1rem; font-size: 0.85rem; color: #666; }
.pr-rooms label.room-filled { color: #d70015; } /* 그 달 신청 수량이 있는 호실(assets/app.js markFilledRooms) — 호실 목록과 같은 빨간색 */
/* 여러 호실 인쇄용 사본(assets/app.js printRequestRooms): 화면에는 보이지 않음 */
.sheet.print-copy { display: none; }
.dlg-btns button:active { background: #e4e9f1; }
.dlg-btns button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dlg-btns .primary { background: var(--btn-pri); border-color: var(--btn-pri); color: #fff; }
.dlg-btns .primary:hover { background: var(--btn-pri-hover); }

/* ---------- 휴대폰(760px 이하, 화면만): 신청서를 약품별 카드 목록으로 ----------
   8칸 표(약품명·현재수량·신청·사용기한 × 좌우 2묶음)는 휴대폰 폭에 들어가지 않아 옆으로 밀며 입력해야 했음 →
   표의 한 줄(왼쪽 약품·오른쪽 약품)을 3칸 격자로 바꿔 [약품 이름(한 줄 전체)] / [현재수량][신청][사용기한] 순으로 쌓는다
   (종이의 줄 순서: 왼쪽 → 오른쪽). 입력칸 위 이름표는 td 의 data-label(index.php, 양식 편집의 표 제목).
   약품 없는 빈 줄은 숨김(양식 편집 중에는 보임). PC 화면·인쇄는 그대로. */
@media screen and (max-width: 760px) {
  .sheets > #form-request { padding: 14px 12px; }
  .request { min-width: 0; }
  .request, .request thead, .request tbody { display: block; }
  .request colgroup, .request thead tr:nth-child(2) { display: none; } /* 표 제목 줄 → 칸마다 이름표 */
  .request thead tr:first-child, .request thead tr:first-child th { display: block; }
  .request .title { border: 0; padding: 0.25rem 0 0.75rem; font-size: 1.15rem; line-height: 1.8; }
  .request .title select, .request .title .ym-btn { font-size: 16px; }
  .request tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; }
  .request tbody th, .request tbody td { border: 0; padding: 0; }
  .request tbody th.req-name { grid-column: 1 / -1; padding: 14px 2px 6px; border-top: 1px solid var(--line); text-align: left; }
  .request .req-print { display: block; font-size: 1rem; line-height: 1.3; font-weight: 400; } /* 줄바꿈되는 전체 약품 이름 */
  .request select.req-med { display: none; }
  body[data-form="template"] .request select.req-med { display: block; font-size: 16px; }
  body[data-form="template"] .request .req-print { display: none; }
  .request td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: 0.75rem; color: var(--muted); text-align: left; }
  .request td input[data-pos] { height: 44px; padding: 0 4px; border: 1px solid #c9ccd3; border-radius: 8px; background: #fff; font-size: 16px; }
  .request td input[data-field="exp"] { font-size: 13px; }
  .request td input[data-pos]:disabled { border-color: #e3e5e8; background: #f2f3f5; }
  /* 약품 없는 빈 줄(이름 칸 + 뒤의 입력칸 3개) 숨김 */
  body:not([data-form="template"]) .request th.req-name:has(option:checked[value=""]),
  body:not([data-form="template"]) .request th.req-name:has(option:checked[value=""]) + td,
  body:not([data-form="template"]) .request th.req-name:has(option:checked[value=""]) + td + td,
  body:not([data-form="template"]) .request th.req-name:has(option:checked[value=""]) + td + td + td { display: none; }
  /* 기타 요청 칸: 제목 위, 입력칸은 한 줄씩 크게 */
  .request tbody tr:last-child { display: block; margin-top: 18px; padding-top: 12px; border-top: 2px solid var(--nb-ink); }
  .request tbody tr:last-child th { display: block; padding: 0 2px 8px; text-align: left; font-weight: 700; }
  .request tbody tr:last-child td.etc { display: block; }
  .etc label { flex-direction: column; align-items: stretch; gap: 4px; margin-bottom: 10px; }
  .etc label input { height: 44px; padding: 0 10px; border: 1px solid #c9ccd3; border-radius: 8px; font-size: 16px; }
  /* 신청자·날짜 */
  .sign { text-align: left; }
  .sign input { height: 40px; font-size: 16px; }
  /* 사용기한 달력: 입력칸 옆 대신 화면 아래쪽에 붙는 판(두 달은 위아래로, 넘치면 판 안에서 스크롤) */
  .exp-pop { position: fixed !important; top: auto !important; right: 8px !important; bottom: 8px !important; left: 8px !important; max-height: 78vh; overflow-y: auto; }
  .exp-cal { width: 100%; }
  .exp-grid button { height: 2.6rem; }
}

/* ---------- 사용기한 달력(2개월) ---------- */
.exp-pop {
  position: absolute;
  z-index: 30;
  max-width: calc(100vw - 16px);
  padding: 0.75rem;
  background: var(--paper);
  border: 2px solid var(--nb-ink);
  border-radius: 10px;
  box-shadow: 5px 5px 0 var(--nb-ink);
  font-size: 0.85rem;
}
.exp-pop[hidden] { display: none; }
.exp-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.exp-head button { width: 2rem; height: 2rem; border: 0; border-radius: 6px; background: transparent; font-size: 1.1rem; cursor: pointer; }
.exp-head button:hover { background: #eef2f7; }
.exp-hint { font-weight: 700; color: var(--muted); }
.exp-cals { display: flex; flex-wrap: wrap; gap: 1rem; }
.exp-cal { width: 15rem; }
.exp-cal-title { margin: 0 0 0.35rem; text-align: center; font-weight: 700; }
.exp-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.exp-wd { padding: 0.15rem 0; text-align: center; font-size: 0.72rem; color: var(--muted); }
.exp-grid button { height: 2rem; border: 0; border-radius: 6px; background: transparent; font: inherit; color: inherit; cursor: pointer; }
.exp-grid button:hover { background: #eef2f7; }
.exp-grid .sun { color: var(--nurse); }
.exp-grid .sat { color: var(--accent); }
.exp-grid .is-today { box-shadow: inset 0 0 0 1px var(--accent); }
.exp-grid .in-range { background: #fff3bf; border-radius: 0; }
.exp-grid .is-start, .exp-grid .is-end { background: var(--nb-yellow); font-weight: 700; box-shadow: inset 0 0 0 2px var(--nb-ink); }
.exp-foot { margin-top: 0.6rem; }

/* number 입력의 스핀 버튼 제거(칸이 좁아 숫자가 가려짐) */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- 인쇄 ---------- */
@page { size: A4 portrait; margin: 25mm 12mm 12mm; } /* 위 25mm = 파일철 펀치 자리(화면 .sheet 안쪽 여백과 같게) */
/* 공문은 용지 여백을 0으로 두고 .letter의 padding을 여백으로 쓴다(화면과 같은 A4 배치). */
@page letter-page { size: A4 portrait; margin: 0; }
@media print {
  body { display: block; background: #fff; font-size: 10pt; }
  .toolbar, .no-print { display: none; }
  main { padding: 0; }
  /* 화면에는 세 양식이 나란히 있지만 인쇄는 활성 양식 하나만, 축소 없이 */
  .sheets { display: block; width: auto; zoom: 1; }
  .sheets > .sheet:not(.is-active) { display: none; }
  .sheets > .sheet.is-active { box-shadow: none; }
  /* 신청서·주문서는 @page 여백(위 25mm·좌우아래 12mm)이 화면의 안쪽 여백을 대신한다(공문은 .letter 210mm).
     좌우 1px: 표가 인쇄 영역 폭을 꽉 채우면 표 바깥 테두리(border-collapse에서 절반이 표 밖)가 잘리므로 여유를 둔다. */
  .sheets > .sheet:not(.letter) { width: auto; min-height: 0; padding: 0 1px; }
  .sheet { box-shadow: none; padding: 0; max-width: none; overflow: visible; }
  .request, .order { min-width: 0; }
  td input:disabled { background: none; }
  /* 신청서 약품명: 잘리는 선택 목록 대신 전체 이름(줄바꿈 허용)을 인쇄한다 */
  .request select.req-med { display: none; }
  .request .req-print { display: block; font-size: 0.78rem; line-height: 1.25; }
  .title input, .title select, .ym-btn, .sign input, .order-head input, .etc label input { border-bottom-color: transparent; }
  select { appearance: none; -webkit-appearance: none; }
  .hide-empty .order tbody tr.is-empty { display: none; }
  /* 여러 호실 인쇄: 화면의 양식은 숨기고 호실별 사본만 한 장씩 */
  body.multi-print .sheets > .sheet:not(.print-copy) { display: none !important; }
  body.multi-print .sheets > .sheet.print-copy { display: block; break-after: page; }
  body.multi-print .sheets > .sheet.print-copy:last-child { break-after: auto; }
  /* 296mm: 297mm 정확히 맞추면 소수점 반올림으로 빈 두 번째 장이 생길 수 있다. */
  .letter {
    page: letter-page;
    width: 210mm;
    max-width: none;
    min-height: 296mm;
    padding: var(--lt-margin-top) var(--lt-margin-x) var(--lt-margin-bottom);
  }
  .lt-in, .lt-in:hover { border-bottom-color: transparent; }
  .lt-in::placeholder { color: transparent; }
  .lt-foot, .usage { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  thead th, .order tfoot td, .order tfoot th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .nurse-only { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}