/* =========================================================
   복약안내 서비스

   서브메뉴가 7갈래로 갈라지는 가장 큰 영역입니다. 갈래마다 성격이 달라
   한 파일에 두되 아래 순서로 묶었습니다.

     1.   설치 단계 (.page-med-steps)      프로그램 설치
     1-2. 주석 달린 스크린샷               프로그램 설정 안내
     1-3. 조건 목록·편집 (.page-med-cond)  약사 어드바이스 · 약국 맞춤 지면 공용
     2.   프로그램 선택 (.page-med-erp)    약국 / 병원 프로그램 설정
     3.   등록된 PC (.page-med-device)     설치된 PC 등록
     4.   기본 어드바이스 (.page-med-*)    조건에 맞는 글이 없을 때 실리는 글·그림
     5.   복약지도 정보수정 (.page-med-info) 목록
     5-2. 복약지도 정보수정 (.page-med-spec) 상세·편집
     6.   약국 맞춤 지면 (.page-pc)        약봉투 광고 자리
     7.   서비스 현황 (.page-dash)         출력 건수·마일리지·처방 TOP 10
     8.   복약지도 미리보기 (.page-preview) 정보를 넣고 안내문을 그려 보는 화면

   설정 화면(AgentSetup)의 주석 달린 스크린샷은 여기서 다루지 않습니다.
   깜박이는 점의 위치가 style.css 에 이미지별 좌표(퍼센트)로 45줄 박혀
   있어서, 그것은 스타일이 아니라 이미지에 딸린 데이터입니다. 껍데기만
   새로 하고 좌표 장치는 그대로 씁니다.
   ========================================================= */

/* ---------------------------------------------------------
   1. 설치 단계

   예전 .install 은 좌우 두 칸(설명 / 그림)을 float 로 붙이고 단계 번호를
   position: absolute 로 얹었습니다. 화면이 좁아지면 그림이 설명 아래로
   떨어지는데, 그때 번호가 제자리에 남아 제목과 겹쳤습니다.
   --------------------------------------------------------- */

/* 이전 버전 안내임을 밝히는 줄 */
.page-med__version-note { margin-bottom: var(--pd-space-6); }

/* ---------------------------------------------------------
   0. 화면 머리 (.page-med-intro)

   예전 .content-header 자리입니다. 그 안에는 화면 이름(h1)과 상태(h2)가
   또 들어 있었는데 제목 줄로 올렸으므로, 여기 남는 것은 설명문과 주요
   동작(등록하기)과 도움말입니다.

   설명은 왼쪽에서 늘어나고 동작은 오른쪽에 붙습니다. 좁아지면 동작이
   설명 아래로 내려가 왼쪽에 섭니다.
   --------------------------------------------------------- */

.page-med-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pd-space-6);
  margin-bottom: var(--pd-space-6);
}

.page-med-intro__text { min-width: 0; }
.page-med-intro__text p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--pd-text-secondary);
}
.page-med-intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pd-space-2);
  flex: 0 0 auto;
}

/* 도움말 여는 단추. 예전에는 <i class="material-icons">info</i> 에 클릭
   이벤트를 걸어 뒀습니다. 요소가 i 라서 탭으로 갈 수 없고 엔터로 열 수도
   없었습니다. button 으로 바꿉니다. */
.page-med-help {
  display: inline-flex;
  align-items: center;
  gap: var(--pd-space-1);
  margin-bottom: var(--pd-space-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--pd-accent);
  font-size: 14px;
  font-weight: var(--pd-weight-medium);
  cursor: pointer;
}
.page-med-help:hover { text-decoration: underline; }
.page-med-help:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); border-radius: var(--pd-radius-xs); }
.page-med-help .pd-icon { flex: 0 0 auto; }

@media (max-width: 768px) {
  .page-med-intro { flex-direction: column; align-items: stretch; }
}

.page-med-steps {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-6);
  counter-reset: pd-step;
}

.page-med-step {
  display: grid;
  /* 설명 칸은 줄어들 수 있고 그림 칸은 제 폭을 지킨다 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
  gap: var(--pd-space-8);
  align-items: start;
  padding: var(--pd-space-8);
  background-color: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
}

.page-med-step__desc { min-width: 0; }

/* 번호는 글로 읽을 것이 없으므로 CSS 로 센다. 예전에는 <div class="step">01</div>
   처럼 마크업에 적혀 있어서 중간 단계를 주석 처리하면 02, 04 로 건너뛰었습니다.
   (실제로 DownloadAgentV2 에서 03 이 주석 처리돼 번호를 손으로 고쳐 놨습니다) */
.page-med-step__num {
  counter-increment: pd-step;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  margin-bottom: var(--pd-space-3);
  padding-inline: var(--pd-space-2);
  border-radius: var(--pd-radius-pill);
  background-color: var(--pd-accent);
  color: var(--pd-text-on-accent);
  font-size: 14px;
  font-weight: var(--pd-weight-bold);
  font-variant-numeric: tabular-nums;
}
.page-med-step__num::before { content: counter(pd-step, decimal-leading-zero); }

.page-med-step__desc h2 {
  margin-bottom: var(--pd-space-3);
  font-size: 20px;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-text);
  letter-spacing: -0.01em;
}

.page-med-step__desc p {
  margin-bottom: var(--pd-space-2);
  font-size: 15px;
  line-height: 1.6;
  color: var(--pd-text-secondary);
}
.page-med-step__desc p:last-child { margin-bottom: 0; }
.page-med-step__desc p strong {
  display: inline-block;
  min-width: 74px;
  color: var(--pd-text);
  font-weight: var(--pd-weight-semibold);
}
.page-med-step__desc .pd-btn { margin-top: var(--pd-space-5); }

/* 그림은 두 장까지 나란히 */
.page-med-step__shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--pd-space-4);
  min-width: 0;
}
.page-med-step__shots a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  background-color: var(--pd-surface-sunken);
  transition: border-color var(--pd-dur) var(--pd-ease);
}
.page-med-step__shots a:hover { border-color: var(--pd-accent); }
.page-med-step__shots a:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
.page-med-step__shots img { display: block; width: 100%; height: auto; }

/* 다운로드 단계는 그림 대신 큰 버튼 하나.

   버튼을 .page-med-step__shots 안에 두면 안 됩니다. 그 안의 a 는 그림 테두리
   규칙(.page-med-step__shots a)을 받는데, 특이도가 클래스 둘(0,2,0)이라
   버튼 규칙(0,1,0)을 눌러 흰 글자가 흰 배경에 얹혔습니다. 자리를 나눕니다. */
.page-med-step__action { min-width: 0; }

.page-med-step__download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pd-space-3);
  width: 100%;
  min-height: 76px;
  padding: var(--pd-space-4) var(--pd-space-6);
  border: 0;
  border-radius: var(--pd-radius-lg);
  background-color: var(--pd-cta);
  color: var(--pd-text-on-accent);
  font-size: 17px;
  font-weight: var(--pd-weight-bold);
  text-align: center;
  transition: background-color var(--pd-dur) var(--pd-ease);
}
.page-med-step__download:hover { background-color: var(--pd-cta-hover); color: var(--pd-text-on-accent); }
.page-med-step__download:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }

@media (max-width: 960px) {
  .page-med-step {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pd-space-5);
    padding: var(--pd-space-5);
  }
  .page-med-step__desc h2 { font-size: 18px; }
}

/* ---------------------------------------------------------
   1-2. 주석 달린 스크린샷 (프로그램 설정 안내)

   예전에는 각 스크린샷 아래에 .mb-48 유틸리티를 붙여 간격을 냈습니다.
   묶음의 간격은 묶음이 정할 일이라 gap 으로 옮겼습니다.

   .agent-image / .manual-pointer / .m-point 는 그대로 씁니다. 깜박이는
   점의 좌표가 style.css 에 이미지별로 45줄 박혀 있어서, 이름을 바꾸면
   그 좌표가 전부 어긋납니다.
   --------------------------------------------------------- */

/* 한동안 폭을 스크린샷 크기(1280)로 줄이고 가운데로 모았습니다. 오른쪽에
   120px 가 늘 비어 보였기 때문인데, 되돌렸습니다 — 이 화면은 3차 탭으로 옆
   화면(필독 프로그램 설치 · 약국/병원 프로그램 설정)과 오가는 자리라, 탭을
   누를 때마다 제목과 탭 줄이 60px 씩 좌우로 흔들렸습니다. 한 화면 안의 여백
   보다 오가는 화면들의 자리가 같은 것이 먼저입니다. */
.page-med-manual {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-8);
  align-items: flex-start;
}

/* 제목은 예전에 h4 였습니다. 화면 제목이 h1 인데 h4 로 뛰면 사이가 비어
   낭독기가 단계를 잘못 읽습니다. */
.page-med-manual > h2 {
  font-size: 18px;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-text);
}

/* 스크린샷이 화면보다 넓을 때 잘리지 않게 */
.page-med-manual > .agent-image { max-width: 100%; }

.page-med-manual__prev { align-self: stretch; }

/* ---------------------------------------------------------
   1-3. 약사 어드바이스 · 약국 맞춤 지면

   조건 목록 (.page-med-cond)

   이 화면의 뜻은 전부 조건 논리입니다 — "A 를 처방했고, 그리고 B 또는 C
   를 처방한 경우". 예전에는 그 논리를 CSS 로만 그렸습니다.

       .advice-condition li span:after { content: 'or'; }
       .advice-condition li:before    { content: 'link'; }    ← '그리고'

   글자가 마크업에 없으니 낭독기는 약품 이름만 줄줄이 읽습니다. 조건이
   AND 인지 OR 인지 알 수 없습니다. 이어 주는 말을 마크업으로 내보내고
   여기서는 모양만 잡습니다.

   ── 여기 주석에 있던 버그 ──────────────────────────────────
   위 예시 줄에 `/* 그리고 *​/` 를 그대로 적어 두었습니다. CSS 주석은 겹칠
   수 없어서 이 주석 블록이 **그 줄에서 닫혔고**, 남은 설명 글이 셀렉터로
   읽혀 바로 뒤의 `.page-med-cond` 규칙이 통째로 버려졌습니다. 그래서
   조건 묶음이 flex 가 아니라 block 으로 쌓여 간격이 0 이었습니다.
   (측정: 묶음 사이 실제 간격 0px, computed display: block)
   --------------------------------------------------------- */

/* 묶음 사이가 곧 "그리고" 입니다. 글자를 걷은 대신 간격을 벌려
   (8 → 12px) 묶음이 서로 다른 조건이라는 것이 보이게 합니다. */
.page-med-cond {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-3);
}

.page-med-cond__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pd-space-2);
  padding: var(--pd-space-3) var(--pd-space-4);
  background-color: var(--pd-surface-sunken);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  font-size: 14px;
  line-height: 1.6;
  color: var(--pd-text-secondary);
  word-break: break-all;
}

/* 묶음 안의 약품을 잇는 "또는".
   ("그리고" 와 A·B·C 이름표는 걷었습니다 — _AdviceConditions.cshtml 참고) */
.page-med-cond__or {
  color: var(--pd-accent);
  font-size: 13px;
  font-weight: var(--pd-weight-semibold);
}

.page-med-cond__drug { color: var(--pd-text); }

/*
   조건이 넷 이상이면 뒤쪽을 접습니다.

   예전에는 접을 것에 style="display:none" 을 직접 붙이고, CSS 가
   li[style^="display"] 로 그 인라인 스타일을 되짚어 아이콘까지 감췄습니다.
   보여 주는 방식이 마크업에 스며 있던 셈입니다. 접기는 감싼 요소의
   클래스 하나로만 다룹니다.
*/
.page-med-cond-fold:not(.is-open) .page-med-cond__group:nth-child(n+4) { display: none; }

/* 검색 줄 — 기준은 제 폭만, 검색어가 남는 폭을 받는다.
   .pd-field-row 는 칸을 똑같이 나누므로(flex: 1 1 0) 여기서 되돌립니다. */
.page-med-advice__search {
  max-width: 680px;
  margin-bottom: var(--pd-space-6);
}
.page-med-advice__search .pd-field-row > .pd-field:first-child { flex: 0 0 auto; }
.page-med-advice__search-keyword { flex: 1 1 auto; }

/* 카드 그리드 (목록) */
/*
   한 줄에 놓인 카드는 높이가 같아야 합니다.

   예전에는 align-items: start 라 조건 수에 따라 카드마다 높이가 달랐습니다.
   같은 성격의 것이 들쭉날쭉하면 목록으로 읽히지 않고, "조건 n개 더 보기"
   단추도 카드마다 다른 높이에 떠 있었습니다. 늘려 맞추고, 그 단추는 카드
   맨 아래에 붙입니다.
*/
.page-med-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--pd-space-5);
  align-items: stretch;
}
.page-med-cards > .pd-card { height: 100%; }
.page-med-cards > .pd-card > .pd-card__body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* 조건 목록이 남는 높이를 먹고, 더 보기 단추가 바닥으로 밀립니다. */
.page-med-cards .page-med-card__more { margin-top: auto; padding-top: var(--pd-space-3); }

.page-med-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pd-space-3);
}
.page-med-card__head h3 { min-width: 0; font-size: 16px; font-weight: var(--pd-weight-bold); }
.page-med-card__head h3 a { color: var(--pd-text); }
.page-med-card__head h3 a:hover { color: var(--pd-accent); text-decoration: underline; }

.page-med-card__count { margin-bottom: var(--pd-space-3); font-size: 13px; color: var(--pd-text-muted); }
.page-med-card__count strong { color: var(--pd-cta); }

.page-med-card__more { margin-top: var(--pd-space-3); text-align: center; }

/* 아직 등록하지 않은 자리 */
.page-med-card__empty {
  padding: var(--pd-space-4);
  border: 1px dashed var(--pd-border);
  border-radius: var(--pd-radius-md);
  font-size: 13px;
  line-height: 1.6;
  color: var(--pd-text-muted);
}

/* 기본 어드바이스는 조합에 안 맞을 때 쓰이는 바탕값이라 목록에서 구분해
   보여 줍니다. 예전에는 style="border: 3px solid #999" 를 요소에 직접
   붙여 뒀습니다. */
.page-med-card--default { border-color: var(--pd-border-strong); border-width: 2px; }

/* 목록 안의 "등록하기" 자리 */
.page-med-card--add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pd-space-3);
  min-height: 200px;
  padding: var(--pd-space-6);
  border: 1px dashed var(--pd-border-strong);
  border-radius: var(--pd-radius-lg);
  background: none;
  color: var(--pd-text-muted);
  font-size: 15px;
  font-weight: var(--pd-weight-semibold);
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--pd-dur) var(--pd-ease), color var(--pd-dur) var(--pd-ease);
}
.page-med-card--add:hover { border-color: var(--pd-accent); color: var(--pd-accent); }
.page-med-card--add:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
.page-med-card--add .pd-icon { width: var(--pd-icon-lg); height: var(--pd-icon-lg); }

/* 미리보기 — 실제 인쇄물의 모습

   .advice 의 글자 크기(h1 22px, p 11px)는 스타일이 아니라 **인쇄물의
   실제 크기**입니다. 여기서 키우면 미리보기가 결과와 달라집니다.
   그래서 .advice 는 style.css 의 것을 그대로 쓰고, 그것을 담는 틀만
   여기서 잡습니다. */
.page-med-preview__label {
  margin-bottom: var(--pd-space-2);
  font-size: 13px;
  font-weight: var(--pd-weight-semibold);
  color: var(--pd-text-muted);
}
.page-med-preview__sheet {
  max-width: 420px;
  background-color: var(--pd-surface);
}
.page-med-preview__title {
  margin-bottom: var(--pd-space-1);
  font-size: 13px;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-text);
}

/* 상세 화면 — 카드 몇 장이 세로로 쌓이고 마지막에 목록으로 돌아가는 줄 */
.page-med-detail {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-5);
}
.page-med-detail > .pd-btn-row { justify-content: center; }

/* 조건 줄 편집 — 줄마다 약품 여럿(select2)과 지우기 단추 하나 */
.page-med-composites {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-2);
  margin-bottom: var(--pd-space-3);
}
.page-med-composites > li {
  display: flex;
  align-items: flex-start;
  gap: var(--pd-space-2);
}
/* select2 는 스스로 폭을 계산합니다. flex 항목 안에서 0 으로 줄어들지
   않게 최소 폭을 풀어 줍니다. */
.page-med-composites > li > .select2 { flex: 1 1 auto; min-width: 0; }
.page-med-composites > li > select { flex: 1 1 auto; min-width: 0; }
.page-med-composites > li > .delete-btn { flex: 0 0 auto; }
.page-med-composites > li > .delete-btn[disabled] { opacity: .35; cursor: not-allowed; }

/* 기본 어드바이스 방식 고르기 (텍스트 / 이미지) */
.page-med-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--pd-space-5);
}
.page-med-choice__item {
  display: flex;
  flex-direction: column;
  padding: var(--pd-space-4);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  background-color: var(--pd-surface-sunken);
}
/* 고른 쪽을 테두리로 알립니다. 예전에는 .select-default 에 active 클래스를
   붙였다 떼는 JS 가 있었습니다. */
.page-med-choice__item:has(input:checked) {
  border-color: var(--pd-accent);
  background-color: var(--pd-accent-subtle);
}
/* 카드 안의 라벨은 이미 상자 안이므로 테두리를 겹치지 않게 한다 */
.page-med-choice__item > .pd-check-card {
  border: 0;
  padding: 0;
  background: none;
}
.page-med-choice__item > .pd-check-card:hover { border: 0; }

.page-med-choice__body { margin-top: var(--pd-space-4); flex: 1 1 auto; }
.page-med-choice__foot { margin-top: var(--pd-space-4); }

/* ---------------------------------------------------------
   2. 프로그램 선택 (약국 / 병원)

   보험청구 프로그램을 고르면 그 프로그램의 설정 화면 그림이 아래로
   이어집니다. 고르는 순간 주소가 바뀌어 새로 그려집니다.
   --------------------------------------------------------- */

.page-med-erp__pick {
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: var(--pd-space-8);
  padding: var(--pd-space-6);
  background-color: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  text-align: center;
}
.page-med-erp__pick .pd-field { text-align: start; }

.page-med-erp__pick h2 {
  margin-bottom: var(--pd-space-4);
  font-size: 17px;
  font-weight: var(--pd-weight-semibold);
  color: var(--pd-text);
}

.page-med-erp__shots {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-5);
  max-width: 1000px;
  margin-inline: auto;
}
.page-med-erp__shots img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-md);
}

/* ---------------------------------------------------------
   3. 등록된 PC
   --------------------------------------------------------- */

.page-med-device { display: flex; flex-direction: column; gap: var(--pd-space-6); }
.page-med-device__form { max-width: 640px; }

/* ---------------------------------------------------------
   4. 기본 어드바이스 편집 (텍스트 / 이미지)

   조건에 맞는 어드바이스가 없을 때 실리는 글·그림을 정하는 두 화면입니다.
   --------------------------------------------------------- */

/* 인쇄물 폭(750px)을 그대로 쓰는 미리보기를 가로 스크롤로 가둡니다.
   폭을 줄이면 안쪽 pt·mm 치수가 인쇄 결과와 어긋나므로 줄이지 않습니다. */
.page-med-sheet {
  overflow-x: auto;
  padding-bottom: var(--pd-space-1);
}

/* --- 예시 / 샘플 --- */

/*
   예전 .advice-sample .advice 는 높이를 200px 로 못 박고 넘치는 부분을
   잘랐습니다. 예시 중 둘은 그보다 길어서 뒷줄이 보이지 않았는데, 여기 있는
   글은 미리보기가 아니라 "골라서 편집기에 넣는 내용" 입니다. 읽을 수 없으면
   고를 수 없으니 높이를 풀고 전부 보여 줍니다.
*/
.page-med-samples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pd-space-5);
  margin-top: var(--pd-space-5);
  list-style: none;
  padding: 0;
}
.page-med-samples--single { grid-template-columns: minmax(0, 1fr); max-width: 480px; }

.page-med-sample {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-3);
  align-items: flex-start;
}
.page-med-sample__body {
  width: 100%;
  flex: 1 1 auto;
  padding: var(--pd-space-4);
  background-color: var(--pd-surface-sunken);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-md);
}
.page-med-sample__body .advice { color: var(--pd-text); }

@media (max-width: 720px) {
  .page-med-samples { grid-template-columns: minmax(0, 1fr); }
}

/* --- 이미지 올리는 자리 --- */

.page-med-upload { margin-top: var(--pd-space-6); }

/* .dz-area 의 점선 테두리는 그대로 물려받고, 눌러서 고를 수 있다는 것과
   포커스가 어디 있는지만 더합니다. */
.page-med-drop {
  display: block;
  border-radius: var(--pd-radius-md);
  transition: border-color var(--pd-dur) var(--pd-ease), box-shadow var(--pd-dur) var(--pd-ease);
}
.page-med-drop:hover { border-color: var(--pd-accent); }
/* 파일 입력이 label 안에 숨어 있으니 영역 자체가 포커스를 알려야 합니다. */
.page-med-drop:focus-within {
  border-color: var(--pd-accent);
  box-shadow: var(--pd-focus-ring);
}
.page-med-drop__message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pd-space-2);
  color: var(--pd-text-secondary);
  font-size: 14px;
}
.page-med-drop__message .pd-icon { color: var(--pd-text-muted); }
.page-med-drop__message strong { color: var(--pd-accent-on-subtle); }

/* --- 자르기 창 --- */

/* cropper 는 <img> 를 자기 컨테이너로 감쌉니다. 폭을 주지 않으면 원본
   크기대로 벌어져 모달을 넘칩니다. */
.page-med-crop {
  margin-top: var(--pd-space-4);
  background-color: var(--pd-surface-sunken);
  border-radius: var(--pd-radius-md);
}
.page-med-crop img { display: block; max-width: 100%; }

/* 아직 그림이 없을 때. 안내문의 어드바이스 자리가 비어 있음을 알립니다. */
.page-med-image-slot:empty {
  display: grid;
  place-items: center;
  color: var(--pd-text-muted);
}
.page-med-image-slot:empty::before {
  content: "아직 올린 이미지가 없습니다";
  font-size: 14px;
}

/* 등록된 것이 없을 때의 한 줄. .advice 자리를 대신합니다. */
.page-med-choice__none {
  padding: var(--pd-space-6) 0;
  color: var(--pd-text-muted);
  font-size: 14px;
}

/* ---------------------------------------------------------
   5. 복약지도 정보수정 (.page-med-info)

   개별 약품의 식별정보·복약정보를 고치는 갈래입니다. 목록에서 약을 찾아
   들어가 고칩니다.
   --------------------------------------------------------- */

.page-med-info { display: flex; flex-direction: column; gap: var(--pd-space-5); }

/* --- 검색 · 걸러 보기 --- */

.page-med-info__filters {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-4);
  padding: var(--pd-space-5);
  background-color: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
}
.page-med-info__search-type { flex: 0 0 160px; }

.page-med-info__toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pd-space-3) var(--pd-space-6);
  padding-top: var(--pd-space-4);
  border-top: 1px solid var(--pd-border);
}

.page-med-info__count { font-size: 14px; color: var(--pd-text-secondary); }
.page-med-info__count strong { color: var(--pd-text); font-weight: var(--pd-weight-bold); }
.page-med-info__count span { color: var(--pd-text-muted); }

/* --- 표 --- */

/* 약 사진은 실제 크기가 제각각입니다. 칸을 정해 두고 그 안에 맞춥니다. */
.page-med-info__image,
.page-med-info__noimage {
  display: grid;
  place-items: center;
  width: 72px;
  height: 44px;
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-sm);
  background-color: var(--pd-surface-sunken);
  overflow: hidden;
}
.page-med-info__image img { max-width: 100%; max-height: 100%; }
.page-med-info__noimage { color: var(--pd-text-muted); }

.page-med-info__name {
  font-weight: var(--pd-weight-semibold);
  /* 약품명은 길고 괄호·슬래시가 섞여 있어 아무 데서나 끊겨야 합니다. */
  word-break: break-all;
}

.page-med-info__maker { font-size: 13px; color: var(--pd-text-secondary); }

.page-med-info__ingredients { margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--pd-text-secondary); }
.page-med-info__ingredients > li + li { margin-top: 2px; }

/* --- 약효설명 펼치기 --- */

.page-med-info__more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: var(--pd-space-2);
  padding: 2px var(--pd-space-2);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-pill);
  background: none;
  font-size: 12px;
  color: var(--pd-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
}
.page-med-info__more:hover { border-color: var(--pd-accent); color: var(--pd-accent-on-subtle); }
.page-med-info__more:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
.page-med-info__more .pd-icon {
  width: 14px; height: 14px;
  transition: transform var(--pd-dur) var(--pd-ease);
}
.page-med-info__more[aria-expanded="true"] .pd-icon { transform: rotate(180deg); }

.page-med-info__detail > td {
  padding-top: 0;
  background-color: var(--pd-surface-sunken);
  font-size: 13px;
  line-height: 1.7;
  color: var(--pd-text-secondary);
}

/* --- 도움말 모달의 그림 --- */

.page-med-help__shot {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--pd-space-4);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-md);
}

@media (max-width: 720px) {
  /* .pd-field-row 는 줄바꿈을 하지 않습니다. 여기서 기준을 100% 로만 바꾸면
     검색 기준이 한 줄을 다 차지하면서 검색어 칸을 화면 밖으로 밀어냅니다.
     줄바꿈을 함께 열어 줘야 아래로 내려갑니다. */
  .page-med-info__filters .pd-field-row { flex-wrap: wrap; }
  .page-med-info__search-type { flex: 1 1 100%; }
}

/* ---------------------------------------------------------
   5-2. 복약지도 정보수정 — 상세 (.page-med-spec)

   기본 제공 정보와 약국이 고친 정보를 나란히 놓고 견주는 화면입니다.
   왼쪽이 원본, 오른쪽이 수정본이라는 것이 한눈에 보여야 합니다.
   --------------------------------------------------------- */

.page-med-spec { display: flex; flex-direction: column; gap: var(--pd-space-6); }

/* --- 머리 줄: 약 이름 + 미출력 스위치 --- */

.page-med-spec__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pd-space-4);
}
.page-med-spec__drug {
  font-size: 20px;
  font-weight: var(--pd-weight-bold);
  color: var(--pd-text);
  word-break: break-all;
}
.page-med-spec__switch {
  display: flex;
  align-items: center;
  gap: var(--pd-space-3);
  margin-bottom: 0;
}
/* 저장 결과는 스위치 왼쪽에 자리를 차지하며 나타납니다. absolute 로 얹으면
   화면이 좁을 때 약 이름을 파고듭니다. */
.page-med-spec__status { font-size: 13px; color: var(--pd-text-muted); }
.page-med-spec__status[data-state="ok"] { color: var(--pd-success); }
.page-med-spec__status[data-state="fail"] { color: var(--pd-danger); }

/* --- 네 칸 --- */

.page-med-spec__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pd-space-5);
  align-items: start;
}

/* --- 이름 · 값 목록 --- */

.page-med-spec__list { margin: 0; display: flex; flex-direction: column; gap: var(--pd-space-4); }
.page-med-spec__row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: var(--pd-space-4);
  align-items: start;
}
.page-med-spec__row > dt {
  font-size: 13px;
  font-weight: var(--pd-weight-semibold);
  color: var(--pd-text-secondary);
  padding-top: 1px;
}
.page-med-spec__row > dd {
  margin: 0;
  min-width: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--pd-text);
  word-break: break-word;
}
.page-med-spec__none { color: var(--pd-text-muted); }

.page-med-spec__bullets { margin: 0; padding: 0; list-style: none; }
.page-med-spec__bullets > li {
  position: relative;
  padding-inline-start: var(--pd-space-4);
}
.page-med-spec__bullets > li::before {
  content: "•";
  position: absolute;
  inset-inline-start: 0;
  color: var(--pd-text-muted);
}
.page-med-spec__bullets > li + li { margin-top: 2px; }

/* EDI 코드는 여러 개가 쉼표로 이어져 길어집니다. */
.page-med-spec__codes {
  font-family: var(--pd-font-mono, monospace);
  font-size: 13px;
  word-break: break-all;
}

.page-med-spec__links { margin: var(--pd-space-2) 0 0; padding: 0; list-style: none; font-size: 13px; }
.page-med-spec__links > li + li { margin-top: 2px; }
.page-med-spec__links > li > span { color: var(--pd-text-muted); margin-inline-end: var(--pd-space-1); }
.page-med-spec__links a,
.page-med-spec__linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--pd-accent-on-subtle);
  text-decoration: underline;
}
.page-med-spec__links .pd-icon { width: 12px; height: 12px; }
/* 약정원만 폼 전송이라 button 입니다. 옆 링크들과 같아 보여야 합니다. */
.page-med-spec__linkbtn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.page-med-spec__linkbtn:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 2px; }

.page-med-spec__image {
  display: grid;
  place-items: center;
  width: 120px;
  height: 72px;
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-sm);
  background-color: var(--pd-surface-sunken);
  overflow: hidden;
}
.page-med-spec__image img { max-width: 100%; max-height: 100%; }

/* --- 견주기 표시 --- */

.page-med-diff--in  { background-color: var(--pd-success-subtle); border-radius: 2px; }
.page-med-diff--out { background-color: var(--pd-danger-subtle); border-radius: 2px; }

.page-med-spec__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pd-space-2) var(--pd-space-4);
  margin-bottom: var(--pd-space-4);
  font-size: 12px;
  color: var(--pd-text-muted);
}
.page-med-spec__legend-item { display: inline-flex; align-items: center; gap: var(--pd-space-2); }
.page-med-spec__legend-item > span {
  width: 14px; height: 14px;
  border: 1px solid var(--pd-border);
  border-radius: 3px;
}

/* 노출되지 않는 줄임을 밝히는 꼬리표 */
.page-med-spec__off {
  display: inline-block;
  margin-inline-start: var(--pd-space-2);
  padding: 0 var(--pd-space-2);
  border-radius: var(--pd-radius-xs);
  background-color: var(--pd-danger-subtle);
  color: var(--pd-danger);
  font-size: 12px;
}

/* --- 배경색강조 문구 (텍스트그램) --- */

.page-med-spec__grams { display: flex; flex-wrap: wrap; gap: var(--pd-space-2); margin: 0; padding: 0; list-style: none; }
.page-med-spec__grams > li {
  padding: 3px var(--pd-space-2);
  border-radius: var(--pd-radius-xs);
  background-color: var(--pd-surface-muted);
  color: var(--pd-text-secondary);
  font-size: 13px;
  font-weight: var(--pd-weight-semibold);
  line-height: 1.4;
}
/* 중요도 1 은 안내문에서도 더 눈에 띄게 나갑니다. */
.page-med-spec__grams > li[data-major] {
  background-color: var(--pd-accent);
  color: var(--pd-text-on-accent);
}
/* 약국이 더한 문구 */
.page-med-spec__grams > li[data-changed] {
  outline: 2px solid var(--pd-success);
  outline-offset: 1px;
}

@media (max-width: 960px) {
  .page-med-spec__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .page-med-spec__row { grid-template-columns: minmax(0, 1fr); gap: var(--pd-space-1); }
}

/* --- 복약정보 · 식별정보 편집 폼 --- */

.page-med-form { display: flex; flex-direction: column; gap: var(--pd-space-6); }

/* 입력칸 옆에 "기본값으로" 단추가 붙는 줄. 단추는 줄어들지 않습니다. */
.page-med-form__reset {
  display: flex;
  align-items: flex-start;
  gap: var(--pd-space-2);
}
.page-med-form__reset > .pd-input,
.page-med-form__reset > .select2 { flex: 1 1 auto; min-width: 0; }
.page-med-form__reset > .pd-btn { flex: 0 0 auto; }

/* 여러 줄 입력칸은 단추를 아래 오른쪽에 둡니다. 위에 붙이면 안내문과 겹칩니다. */
/* 여러 줄 입력칸은 되돌리기 단추를 아래 오른쪽에 두고, 왼쪽에는 안내를 둡니다. */
.page-med-form__reset-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pd-space-3);
}
.page-med-form__reset-end > .pd-field__hint { margin: 0; }

/* 지금 등록된 약 이미지와 그 옆의 "기본값으로" 단추 */
.page-med-form__image {
  display: flex;
  align-items: center;
  gap: var(--pd-space-3);
}

/* ---------------------------------------------------------
   6. 약국 맞춤 지면 (.page-pc)

   약봉투 아래쪽 광고 자리에 약국이 직접 만든 이미지를 넣는 갈래입니다.
   최대 3개까지 등록합니다.
   --------------------------------------------------------- */

.page-pc { display: flex; flex-direction: column; gap: var(--pd-space-6); }

/* --- 기능안내 (도움말 모달 안) ---

   예전에는 목록 위에 늘 펼쳐 둔 **어두운 상자**였습니다. 두 가지가 걸렸습니다.
   한 번 읽으면 되는 내용이 화면 절반을 늘 차지했고, 나머지 두 갈래(약사
   어드바이스 · 복약지도 정보수정)는 같은 것을 도움말 모달로 넣어 두어 같은
   성격의 글이 갈래마다 다르게 나왔습니다.

   모달로 옮기면서 어두운 톤도 걷었습니다. 모달은 흰 바탕이라 반전 색을
   그대로 쓰면 글자가 보이지 않습니다. */

.page-pc-howto {
  position: relative;
  display: grid;
  /* 모달 본문이 592px 이라 그림 칸을 280 으로 두면 글 칸이 288 밖에 안 남아
     세 단어마다 줄이 바뀝니다. 그림은 보조 설명이라 먼저 양보합니다. */
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--pd-space-6);
  align-items: start;
}
.page-pc-howto__text > p { font-size: 15px; line-height: 1.7; }
.page-pc-howto__text b,
.page-pc-howto__text strong { font-weight: var(--pd-weight-bold); color: var(--pd-text); }

.page-pc-tip {
  margin-top: var(--pd-space-5);
  padding-top: var(--pd-space-5);
  border-top: 1px solid var(--pd-border);
}
.page-pc-tip__badge {
  display: inline-block;
  margin-bottom: var(--pd-space-3);
  padding: 2px var(--pd-space-3);
  border-radius: var(--pd-radius-pill);
  background-color: var(--pd-accent);
  color: var(--pd-text-on-accent);
  font-size: 12px;
  font-weight: var(--pd-weight-bold);
}
.page-pc-tip dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--pd-space-5);
  margin: 0;
}
.page-pc-tip dt { margin-bottom: var(--pd-space-1); font-size: 14px; font-weight: var(--pd-weight-bold); color: var(--pd-text); }
.page-pc-tip dd { margin: 0; font-size: 13px; line-height: 1.7; word-break: keep-all; color: var(--pd-text-secondary); }
.page-pc-tip b { color: var(--pd-accent-on-subtle); }

/* 그림 둘이 겹쳐 놓인 모양. 예전에는 화면 폭마다 다른 픽셀 좌표를 박아
   두었는데, 여기서는 상자 안의 비율로만 잡습니다. */
.page-pc-howto__art { position: relative; align-self: end; }
.page-pc-howto__paper { display: block; width: 100%; height: auto; }
.page-pc-howto__example {
  position: absolute;
  /* 예전 넓은 상자에서는 -8% 로 글 쪽으로 걸쳐 놓았습니다. 모달에서는 글 칸이
     좁아 글자에 닿으므로 그림 칸 안에 둡니다. */
  left: 0;
  bottom: 20%;
  width: 56%;
  height: auto;
  border-radius: var(--pd-radius-sm);
  /* 겹친 것이 의도임을 그림자로 알립니다. 없으면 잘못 얹힌 것처럼 보입니다. */
  box-shadow: var(--pd-shadow-md);
}

@media (max-width: 900px) {
  .page-pc-howto { grid-template-columns: minmax(0, 1fr); }
  .page-pc-howto__art { display: none; }
}

/* --- 등록한 지면 목록 --- */

.page-pc-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pd-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: start;
}
.page-pc-card__count { margin-bottom: var(--pd-space-4); font-size: 13px; color: var(--pd-text-secondary); }
.page-pc-card__count strong { color: var(--pd-cta); font-weight: var(--pd-weight-bold); }

/* 비어 있는 칸 = 등록하기 */
.page-pc-add {
  min-height: 200px;
  border: 1px dashed var(--pd-border-strong);
  border-radius: var(--pd-radius-lg);
  background-color: var(--pd-surface-sunken);
  align-self: stretch;
}
.page-pc-add > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pd-space-3);
  height: 100%;
  min-height: 200px;
  padding: var(--pd-space-6);
  color: var(--pd-text-muted);
  font-size: 15px;
  font-weight: var(--pd-weight-semibold);
  text-align: center;
  line-height: 1.5;
}
.page-pc-add > a:hover { color: var(--pd-accent-on-subtle); text-decoration: none; }
.page-pc-add:hover { border-color: var(--pd-accent); background-color: var(--pd-accent-subtle); }

@media (max-width: 900px) {
  .page-pc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .page-pc-list { grid-template-columns: minmax(0, 1fr); }
}

/* --- 걸린 약품 --- */

.page-pc-drugs { display: flex; flex-direction: column; gap: var(--pd-space-2); margin: 0; padding: 0; list-style: none; }
.page-pc-drugs > li {
  display: flex;
  align-items: center;
  gap: var(--pd-space-3);
  padding: var(--pd-space-2);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  background-color: var(--pd-surface-sunken);
}
.page-pc-drugs__thumb {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--pd-radius-sm);
  background-color: var(--pd-surface);
  overflow: hidden;
}
.page-pc-drugs__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.page-pc-drugs__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.page-pc-drugs__title { font-size: 13px; font-weight: var(--pd-weight-semibold); color: var(--pd-text); word-break: break-all; }
.page-pc-drugs__effect { font-size: 12px; color: var(--pd-text-muted); }

/* 상세 화면은 폭이 넓어 두 줄로 놓습니다. */
.page-pc-drugs--wide {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* --- 등록된 이미지 · 미리보기 --- */

.page-pc-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--pd-space-6);
}
.page-pc-preview__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pd-space-3); }
.page-pc-preview__item > h3 { font-size: 15px; font-weight: var(--pd-weight-semibold); color: var(--pd-text); }
.page-pc-preview__box {
  width: 100%;
  padding: var(--pd-space-1);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-sm);
  background-color: var(--pd-surface);
}
.page-pc-preview__box img { display: block; width: 100%; height: auto; }
.page-pc-preview__foot { justify-content: flex-start; }

/*
   샘플 안내문 위에 등록한 이미지를 얹습니다.

   아래 퍼센트는 스타일이 아니라 **샘플 그림 안에서 광고 자리가 어디인지** 를
   가리키는 좌표입니다(PharmCustom_previewA4.png / A5.png 에 딸린 값).
   그림을 갈면 이 값도 함께 재야 합니다. 예전에는 팝업 id 로 갈라져
   style.css 에 있었습니다.
*/
.page-pc-sheet { position: relative; border: 1px solid var(--pd-border); }
.page-pc-sheet > img { display: block; width: 100%; height: auto; }
.page-pc-sheet__ad { position: absolute; border: 1px solid var(--pd-text); }
.page-pc-sheet__ad > img { display: block; width: 100%; height: auto; }
.page-pc-sheet__ad--a4 { left: 50.4%; bottom: 5.5%; width: 47%; }
.page-pc-sheet__ad--a5 { left: 3%; bottom: 2%; width: 68%; }

/* --- 지면 편집기 (fabric.js) --- */

/* 편집기 자체(툴바·캔버스)는 custom.css 가 그립니다. 여기서는 껍데기만 잡습니다. */
.page-pc-editor { display: flex; flex-direction: column; gap: var(--pd-space-5); }

/* 템플릿을 고르면 작업물이 사라진다는 경고. 제목 아래 한 줄로 둡니다. */
.page-pc-editor__warn {
  margin-top: 2px;
  font-size: 12px;
  color: var(--pd-danger);
}

/* ---------------------------------------------------------
   7. 서비스 현황 (.page-dash)

   출력 건수 세 칸과 처방의약품 TOP 10 막대그래프뿐인 화면입니다.

   예전 .dashboard .summary 는 칸마다 배경 이미지(icon_dashboard_daily.png
   등)를 깔고 그 자리를 비우려고 padding-left: 120px 을 줬습니다. 화면
   폭에 따라 background-size 와 padding 을 두 벌 적어야 했고, 이미지가
   PNG 라 색을 바꿀 수 없었습니다. 아이콘 스프라이트로 바꾸면 그 두 벌이
   한 벌로 줄고 currentColor 를 따릅니다.
   --------------------------------------------------------- */

.page-dash { display: flex; flex-direction: column; gap: var(--pd-space-6); }

.page-dash-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pd-space-4);
}

.page-dash-stat .pd-card__body {
  display: flex;
  align-items: flex-start;
  gap: var(--pd-space-4);
  height: 100%;
}
.page-dash-stat__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pd-accent-subtle);
  color: var(--pd-accent-on-subtle);
}
.page-dash-stat__icon .pd-icon { width: var(--pd-icon-lg); height: var(--pd-icon-lg); }
.page-dash-stat__body { flex: 1 1 auto; min-width: 0; }
.page-dash-stat__label { font-size: 14px; color: var(--pd-text-secondary); }
.page-dash-stat__value {
  margin-top: var(--pd-space-1);
  font-size: 32px;
  font-weight: var(--pd-weight-bold);
  line-height: 1.2;
  color: var(--pd-accent-on-subtle);
}
/* 단위(건 · M)는 숫자에 딸린 말이라 숫자보다 작고 흐리게 둡니다. */
.page-dash-stat__unit {
  margin-left: 2px;
  font-size: 16px;
  font-style: normal;
  font-weight: var(--pd-weight-medium);
  color: var(--pd-text-muted);
}
.page-dash-stat__actions { margin-top: var(--pd-space-3); }

/* 그래프 카드 */
.page-dash-chart__head { flex-wrap: wrap; }
.page-dash-chart__filter {
  display: flex;
  align-items: center;
  gap: var(--pd-space-2);
  flex-wrap: wrap;
}
/* 조회 기간은 고른 연·월에서 나오는 결과라 오른쪽 끝에 붙입니다. */
.page-dash-chart__period {
  margin-left: auto;
  font-size: 13px;
  color: var(--pd-text-muted);
}

/*
   막대 높이는 Chart.js 가 캔버스 크기에서 계산합니다(maintainAspectRatio:
   false). 그래서 높이를 여기서 정해 줘야 합니다 — 정하지 않으면 캔버스가
   0 이 되어 그래프가 아예 보이지 않습니다. 10칸이 겹치지 않는 최소값입니다.
*/
.page-dash-chart__box { position: relative; height: 340px; }
.page-dash-chart__note { margin-top: var(--pd-space-3); }

@media (max-width: 900px) {
  .page-dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .page-dash-stats { grid-template-columns: minmax(0, 1fr); }
  .page-dash-stat__value { font-size: 26px; }
  .page-dash-chart__period { margin-left: 0; flex-basis: 100%; }
  .page-dash-chart__box { height: 260px; }
}

/* ---------------------------------------------------------
   8. 복약지도 미리보기 (.page-preview)

   환자·약품·처방 정보를 넣고 실제 복약안내문 PDF 를 그려 보는 화면입니다.
   왼쪽이 입력, 오른쪽이 결과입니다. 좁아지면 결과가 입력 아래로 갑니다.

   예전에는 .preview-medi 가 flex 로 300px + 나머지를 잡았는데, 그 규칙이
   admin.css 와 style.css 두 곳에 똑같이 들어 있었습니다.
   --------------------------------------------------------- */

.page-preview {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: var(--pd-space-6);
  align-items: start;
}

.page-preview__form { display: flex; flex-direction: column; gap: var(--pd-space-5); }

/* .pd-field 는 저희끼리 간격을 두지 않습니다(레이블-입력 사이 간격만 갖습니다).
   쌓는 쪽이 간격을 냅니다 — Account/Register 의 .page-account__col 과 같습니다. */
.page-preview__form .pd-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-5);
}

/* 값 뒤에 붙는 단위(년생 · 일 · 회). 입력칸은 늘어나고 단위는 제 폭을 지킵니다. */
.page-preview__unit {
  display: flex;
  align-items: center;
  gap: var(--pd-space-2);
}
.page-preview__unit > .pd-input { flex: 1 1 auto; min-width: 0; }
.page-preview__unit > span {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--pd-text-muted);
}

/* select2 는 스스로 폭을 계산합니다. 100% 를 주지 않으면 빈 상태에서
   폭이 0 에 가깝게 잡힙니다. */
.page-preview__drugs .select2 { width: 100% !important; }
.page-preview__drugs .select2-selection--multiple { min-height: var(--pd-control-h); }
.page-preview__drugs .select2-selection__rendered li { white-space: normal; font-size: 13px; }

/*
   결과 자리. 안내문이 그려지기 전에는 안내문(.pd-empty)이, 그리는 동안에는
   스피너가 이 자리를 채웁니다. PDF 가 붙으면 둘 다 감춥니다.

   높이는 보이는 화면에 맞춥니다. 예전에는 min-height: 624px / max-height:
   960px 를 고정으로 줬는데, A4 비율로 잡으면 넓은 화면에서 1300px 이 넘어
   미리보기를 보려면 페이지를 스크롤해야 했습니다. 안내문은 PDF 뷰어가
   제 안에서 스크롤하므로 자리만 채워 주면 됩니다.
*/
.page-preview__result {
  position: sticky;
  top: var(--pd-space-4);
}
.page-preview__stage {
  position: relative;
  height: calc(100vh - 200px);
  min-height: 480px;
  background: var(--pd-surface-sunken);
  border-radius: var(--pd-radius-md);
  overflow: hidden;
}
/* :not([hidden]) 을 붙이는 이유 — 이 선택자는 특이도가 .pd-empty[hidden] 과
   같은데 나중에 읽히므로, 그냥 두면 감춘 요소까지 다시 펴 버립니다. */
.page-preview__stage > .pd-empty:not([hidden]),
.page-preview__stage > .pd-loading:not([hidden]) {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-preview__stage > .pd-loading:not([hidden]) { flex-direction: column; gap: var(--pd-space-3); }
.page-preview__view { position: absolute; inset: 0; }
.page-preview__view embed,
.page-preview__view iframe,
.page-preview__view object { width: 100%; height: 100%; border: 0; }

@media (max-width: 992px) {
  .page-preview { grid-template-columns: minmax(0, 1fr); }
  .page-preview__result { position: static; }
}

/* ---------------------------------------------------------
   8. 작업 레이아웃으로 옮기고 나서 드러난 것들

   네 갈래를 스튜디오(_MedicationStudio)로 옮기며 화면을 하나씩 직접
   열어 보고 찾은 문제들입니다. 대부분 예전에도 있었지만, 제목 줄과
   2차 메뉴가 자리를 차지하고 있어 눈에 덜 띄었습니다.
   --------------------------------------------------------- */

/*
   8-1. 세로로 이어지는 칸이 서로 붙어 있었다 (약사 어드바이스 등록·수정)

   .pd-field 는 스스로 위아래 여백을 갖지 않습니다. 감싸는 칸이 gap 을
   주면 되는데 .pd-card__body 는 그냥 블록이라, "약품명 / 성분명" 라벨이
   바로 위 입력칸에 딱 붙어 있었습니다(측정: 간격 0px).

   .pd-field-row 안의 칸은 가로로 나란히 서므로 건드리지 않습니다.
*/
.page-med-detail .pd-card__body > .pd-field + .pd-field { margin-top: var(--pd-space-5); }

/*
   8-2. 폼이 에디터보다 두 배 넓었다

   어드바이스 에디터는 750px 고정입니다(인쇄 규격이라 바꾸지 않습니다).
   카드가 1400px 이면 에디터 오른쪽에 650px 짜리 빈 자리가 남고, 조합명
   같은 한 줄 입력칸도 까닭 없이 1400px 이 됩니다. 카드를 에디터에 맞춥니다.
*/
.page-med-detail .pd-card:has(.preview-advice) { max-width: 840px; }

/*
   8-3. 편집기 탭의 현재 표시가 코랄이었다 (약국 맞춤 지면 등록·수정)

   전산약봉투용 / A4사이즈용 탭은 옛 마크업(ul.tab)을 씁니다. common.css 는
   현재 항목을 민트로 그리는데, 실제로는 글자가 #222 · 밑줄이 코랄
   (#f37268)로 나왔습니다. 코랄은 이 제품에서 **주의·삭제**에 쓰는 색이라
   "지금 보고 있는 탭"에 쓰면 뜻이 어긋납니다. 다른 탭 줄과 같게 맞춥니다.
*/
.page-pc-editor .tab { display: flex; gap: var(--pd-space-6); }
.page-pc-editor .tab > li { display: block; }
.page-pc-editor .tab > li > a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  font-size: 15px;
  font-weight: var(--pd-weight-semibold);
  color: var(--pd-text-secondary);
  border-bottom: 2px solid transparent;
}
.page-pc-editor .tab > li > a::after,
.page-pc-editor .tab > li > a:hover::after { content: none; }
.page-pc-editor .tab > li > a:hover { color: var(--pd-text); border-bottom-color: var(--pd-border-strong); }
.page-pc-editor .tab > li.current > a { color: var(--pd-accent); border-bottom-color: var(--pd-accent); }

/*
   8-4. 이미지 올리기 펼침 메뉴에 스타일이 아예 없었다

   스크립트는 .img-upload-menu 에 .open 을 붙였다 떼는데, 그 클래스를
   받는 CSS 가 어디에도 없었습니다. 그래서 메뉴가 **늘 펼쳐진 채** 도구
   줄 위에 겹쳐 있었습니다("이미지 올리기 / 잘라서 올리기" 두 줄).
*/
.img-upload-dropdown { position: relative; display: inline-block; }
.img-upload-menu {
  position: absolute;
  top: calc(100% + var(--pd-space-1));
  inset-inline-end: 0;
  z-index: var(--pd-z-dropdown);
  display: none;
  min-width: 132px;
  padding: var(--pd-space-1);
  margin: 0;
  list-style: none;
  background-color: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  box-shadow: var(--pd-shadow-md);
}
.img-upload-menu.open { display: block; }
.img-upload-menu > li { display: block; }
.img-upload-menu > li > button {
  display: block;
  width: 100%;
  padding: var(--pd-space-2) var(--pd-space-3);
  border: 0;
  border-radius: var(--pd-radius-sm);
  background: none;
  color: var(--pd-text-secondary);
  font-size: 13px;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}
.img-upload-menu > li > button:hover { background-color: var(--pd-surface-sunken); color: var(--pd-text); }
.img-upload-menu > li > button:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }

/*
   8-5. 보이지 않는 폼이 자리를 차지했다 (약국 맞춤 지면 등록·수정)

   #UploadForm · #WorkImageForm 은 ajax 로만 쓰는 업로드 통로입니다. 화면에
   보이는 것이 없는데 .page-pc-editor 가 세로 flex(gap 20px)라 **항목으로
   세어져** 제목과 첫 카드 사이에 40px 짜리 빈 띠를 만들었습니다.
   display: none 은 FormData·submit 에 영향을 주지 않습니다.
*/
.page-pc-editor > #UploadForm,
.page-pc-editor > #WorkImageForm { display: none; }