/* 공용 부품이 모양을 맡고 이 파일은 약 정보와 분자 자리의 배치만 정한다. */
.pharmsci {
  --pharmsci-drug-image-size: calc(var(--pd-space-16) * 2 + var(--pd-space-8));
  /* 제품표의 사진은 이름이 들어갈 자리를 빼앗지 않을 만큼만 크게 둔다. */
  --pharmsci-product-image-size: calc(var(--pd-space-16) - var(--pd-space-2));
  --pharmsci-search-thumb-size: var(--pd-space-12);
  /* 최근 검색: 줄 높이는 터치 44px 이상, 겹쳐 여는 목록은 5줄 남짓에서 스크롤. */
  --pharmsci-recent-row-h: calc(var(--pd-space-10) + var(--pd-space-1));
  --pharmsci-recent-max-h: calc(var(--pharmsci-recent-row-h) * 5.5);
  --pharmsci-preview-lead-w: calc(var(--pd-space-20) * 8);
  --pharmsci-preview-point-min: calc(var(--pd-space-20) * 2.5);
  --pharmsci-sticky-gap: var(--pd-space-4);
  /* layout.css의 GNB 내부 높이에 아래 테두리 1px와 읽기 여백을 더한다. */
  --pharmsci-sticky-top: calc(var(--pd-gnb-h) + var(--pd-radius-xs) / 2 + var(--pharmsci-sticky-gap));
  --pharmsci-guide-leading: 1.75;
  max-width: 1320px;
  margin-inline: auto;
  padding: var(--pd-space-6) var(--pd-space-5) var(--pd-space-12);
}

/* 기존 랜딩 화면의 section 여백이 약학정보 본문에 섞이지 않게 한다. */
.pharmsci section { padding: 0; }
.pharmsci section.pd-card__body { padding: var(--pd-space-4); }
.pharmsci section.pd-tabpanel { padding: var(--pd-space-5); }
/* 탭 카드 맨 아래 면책은 패널과 좌우 여백이 달라 글줄 시작이 어긋났다. 패널과 같은 여백을 준다. */
.pharmsci .pharmsci__tabs > .pd-note { margin: 0 var(--pd-space-5) var(--pd-space-5); }
.pharmsci .pharmsci__search-panel {
  display: flex;
  flex-wrap: wrap;
  /* 첫 화면은 검색창 아래에 최근 검색이 펼쳐져 카드가 길어진다. 가운데 맞춤이면 제목이 따라 내려간다. */
  align-items: flex-start;
  gap: var(--pd-space-3) var(--pd-space-6);
}
.pharmsci .pharmsci__intro { display: grid; gap: var(--pd-space-1); }
/* 검색창은 제목 오른쪽 남은 폭을 다 쓴다 — 고객센터 자주 묻는 질문 검색(page-faq.css)과 같은 꼴(2026-09-29 사용자 지시).
   전에는 520px 상한이라 1280 화면에서 입력이 436px 에 그쳤다. 버튼 폭도 같게 둔다. */
.pharmsci .pharmsci__search-form { flex: 1; min-width: 0; }
.pharmsci .pharmsci__search-row { display: flex; align-items: center; gap: var(--pd-space-2); }
.pharmsci .pharmsci__search-row .pd-input-group { flex: 1 1 auto; min-width: 0; }
.pharmsci .pharmsci__search-row .pd-btn { flex: 0 0 auto; min-width: 96px; }
/* 좁은 화면은 자주 묻는 질문 검색처럼 입력 아래에 버튼을 한 줄로 둔다(page-faq.css 와 같은 640px) */
@media (max-width: 640px) {
  .pharmsci .pharmsci__search-row { flex-direction: column; align-items: stretch; }
  .pharmsci .pharmsci__search-row .pd-btn { width: 100%; }
}
.pharmsci .pharmsci__intro-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pd-space-2); }
.pharmsci .pharmsci__intro-head h1 { margin: 0; }
/* 최근 검색(R115). 칩 줄 대신 구분선 목록 — 긴 검색어와 줄마다 삭제를 다루기 좋다. 색은 중립, 민트는 검색 단추뿐.
   첫 화면(inline)은 검색창 아래 제자리, 결과 · 상세(popover)는 검색창 아래에 겹쳐 본문을 밀지 않는다. */
.pharmsci .pharmsci__search-form { position: relative; }
.pharmsci .pharmsci__recent { display: grid; gap: var(--pd-space-2); margin-top: var(--pd-space-3); }
.pharmsci .pharmsci__recent[data-pharmsci-recent-mode="popover"] {
  position: absolute;
  top: calc(100% + var(--pd-space-2));
  left: 0;
  right: 0;
  z-index: var(--pd-z-dropdown);
  margin-top: 0;
  padding: var(--pd-space-3) var(--pd-space-4);
  background: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  box-shadow: var(--pd-shadow-md);
}
.pharmsci .pharmsci__recent-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pd-space-2); }
.pharmsci .pharmsci__recent-head h2 { margin: 0; color: var(--pd-text-muted); }
.pharmsci .pharmsci__recent > p { margin: 0; }
.pharmsci .pharmsci__recent-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: var(--pharmsci-recent-max-h);
  overflow-y: auto;
}
.pharmsci .pharmsci__recent-list li {
  display: flex;
  align-items: center;
  gap: var(--pd-space-1);
  border-bottom: 1px solid var(--pd-border);
}
.pharmsci .pharmsci__recent-term {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--pharmsci-recent-row-h);
  padding: var(--pd-space-2);
  border: 0;
  background: var(--pd-surface);
  color: var(--pd-text);
  font: inherit;
  text-align: start;
  overflow-wrap: anywhere;
  cursor: pointer;
  border-radius: var(--pd-radius-sm);
}
.pharmsci .pharmsci__recent-term:hover,
.pharmsci .pharmsci__recent-term:focus-visible { background: var(--pd-surface-sunken); }
.pharmsci .pharmsci__recent-list .pd-btn--icon { flex: 0 0 auto; min-width: var(--pharmsci-recent-row-h); min-height: var(--pharmsci-recent-row-h); }
/* 첫 화면(R116): 한 줄에 「최근 검색」 라벨 · 검색어 알약(✕ 포함) · 끝에 「전체 지우기」. 구분선 목록을 넓게 펼치면
   칸이 흩어지고 전체 지우기가 멀리 떨어졌다. 알약 하나가 검색 · 삭제 두 단추를 감싼다(둘은 형제 단추 그대로). */
.pharmsci .pharmsci__recent[data-pharmsci-recent-mode="inline"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pd-space-2);
}
.pharmsci .pharmsci__recent[data-pharmsci-recent-mode="inline"] .pharmsci__recent-head { display: contents; }
.pharmsci .pharmsci__recent[data-pharmsci-recent-mode="inline"] .pharmsci__recent-head h2 { margin-inline-end: var(--pd-space-1); }
.pharmsci .pharmsci__recent[data-pharmsci-recent-mode="inline"] [data-pharmsci-recent-clear] { order: 2; color: var(--pd-text-muted); }
.pharmsci .pharmsci__recent[data-pharmsci-recent-mode="inline"] .pharmsci__recent-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pd-space-2);
  max-height: none;
  overflow: visible;
  order: 1;
}
.pharmsci .pharmsci__recent[data-pharmsci-recent-mode="inline"] .pharmsci__recent-list li {
  gap: 0;
  height: var(--pd-control-h-sm);
  padding-inline-start: var(--pd-space-3);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-pill);
  background: var(--pd-surface);
}
.pharmsci .pharmsci__recent[data-pharmsci-recent-mode="inline"] .pharmsci__recent-list li:hover { border-color: var(--pd-border-hover); }
.pharmsci .pharmsci__recent[data-pharmsci-recent-mode="inline"] .pharmsci__recent-term {
  min-height: 0;
  padding: 0;
  font-size: 13px;
  white-space: nowrap;
  border-radius: 0;
}
.pharmsci .pharmsci__recent[data-pharmsci-recent-mode="inline"] .pharmsci__recent-term:hover,
.pharmsci .pharmsci__recent[data-pharmsci-recent-mode="inline"] .pharmsci__recent-term:focus-visible { background: var(--pd-surface); text-decoration: underline; }
.pharmsci .pharmsci__recent[data-pharmsci-recent-mode="inline"] .pharmsci__recent-list .pd-btn--icon {
  min-width: 0;
  min-height: 0;
  height: 100%;
  border-radius: var(--pd-radius-pill);
  color: var(--pd-text-muted);
}
/* 좁은 화면에서 겹쳐 열면 검색 단추와 본문을 가린다. 카드 안에 펼치고, 열린 동안만 본문이 내려간다.
   위의 기본 규칙보다 뒤에 둔다(같은 선택자라 뒤가 이긴다). */
@media (max-width: 640px) {
  .pharmsci .pharmsci__recent[data-pharmsci-recent-mode="popover"] {
    position: static;
    margin-top: var(--pd-space-3);
    padding: 0;
    border: 0;
    box-shadow: none;
  }
}

.pharmsci .pharmsci__zones {
  display: grid;
  grid-template-columns: minmax(0,768fr) minmax(300px,488fr);
  gap: var(--pd-space-6);
  margin-top: var(--pd-space-3);
  align-items: start;
}
.pharmsci .pharmsci__zones > *,
.pharmsci .pharmsci__drug-zone > *,
.pharmsci .pharmsci__member-content > * { min-width: 0; }
.pharmsci .pharmsci__drug-zone,
.pharmsci .pharmsci__member-content { display: grid; gap: var(--pd-space-3); }
.pharmsci .pharmsci__molecule-placeholder { min-height: 300px; justify-content: center; }
.pharmsci .pharmsci__drug-head {
  display: grid;
  grid-template-columns: var(--pharmsci-drug-image-size) minmax(0,1fr);
  /* 가로 간격은 사진과 글을 떼어 놓는 값이고, 세로 간격은 제목 덩어리와 값 목록 사이다.
     둘을 같은 값으로 두면 아래쪽에 빈 띠가 생긴다. */
  gap: var(--pd-space-3) var(--pd-space-4);
  padding: var(--pd-space-4);
}
.pharmsci .pharmsci__drug-title { display: grid; gap: var(--pd-space-1); min-width: 0; }
.pharmsci .pharmsci__pill-figure {
  width: var(--pharmsci-product-image-size);
  height: var(--pharmsci-product-image-size);
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* confirm 사진은 흰 배경을 그대로 담고 있다. 자리 배경을 표면색으로 맞춰 경계가 드러나지 않게 한다. */
  background: var(--pd-surface);
  border-width: 1px;
  border-style: solid;
  border-color: var(--pd-ink-200);
  border-radius: var(--pd-radius-md);
}
.pharmsci .pharmsci__pill-figure--card {
  width: var(--pharmsci-drug-image-size);
  height: var(--pharmsci-drug-image-size);
  border-radius: var(--pd-radius-lg);
}
.pharmsci .pharmsci__pill-image { width: 100%; height: 100%; object-fit: contain; }
/* 검색 결과 줄 머리 사진(R102). 목록 한 줄 높이를 크게 늘리지 않는 크기로 둔다. */
.pharmsci .pharmsci__pill-figure--thumb {
  width: var(--pharmsci-search-thumb-size);
  height: var(--pharmsci-search-thumb-size);
}
.pharmsci .pharmsci__search-table .pharmsci__thumb-col { width: calc(var(--pharmsci-search-thumb-size) + var(--pd-space-4)); }
/* 좁은 폭의 카드형 목록에서도 사진이 줄 머리(왼쪽)다. 목록 부품은 제목 · 뱃지 · 보조 줄 두 칸이라 사진 칸을 앞에 하나 더 둔다. */
@media (max-width: 768px) {
  .pharmsci .pharmsci__search-table.pd-table--list tbody tr { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pharmsci .pharmsci__search-table.pd-table--list .pharmsci__thumb-col {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    width: auto;
    padding: 0;
    border-bottom: 0;
  }
  .pharmsci .pharmsci__search-table.pd-table--list .pharmsci__thumb-col::before { content: none; }
  .pharmsci .pharmsci__search-table.pd-table--list .pd-list-title { grid-column: 2; }
  .pharmsci .pharmsci__search-table.pd-table--list .pd-list-aside { grid-column: 3; }
  .pharmsci .pharmsci__search-table.pd-table--list .pd-list-meta { grid-column: 2 / -1; }
}
/* 사진 없음은 표의 다른 칸과 같은 「-」로 표기한다. 빈 상자만 남기면 자료 부재와 불러오기 실패가 구분되지 않는다. */
.pharmsci .pharmsci__pill-fallback { color: var(--pd-text-muted); overflow-wrap: anywhere; }
.pharmsci .pharmsci__fallback { display: grid; }
.pharmsci .pharmsci__drug-section { grid-column: 2; min-width: 0; }
.pharmsci .pharmsci__fields {
  display: grid;
  /* 150px 는 「품목기준코드 200808319」 한 쌍이 못 들어가 값이 자꾸 다음 줄로 넘어간다. */
  grid-template-columns: repeat(auto-fit, minmax(210px,1fr));
  gap: var(--pd-space-2) var(--pd-space-5);
  margin: 0;
}
/* 이름표 폭을 고정해 여러 열에 걸쳐 값의 시작점이 한 줄에 맞도록 한다. */
.pharmsci .pharmsci__field {
  display: grid;
  grid-template-columns: calc(var(--pd-space-16) + var(--pd-space-4)) minmax(0,1fr);
  gap: var(--pd-space-2);
  align-items: baseline;
  min-width: 0;
}
.pharmsci .pharmsci__field dt { white-space: nowrap; }
/* 「1,200원 · 2024-03-01」처럼 숫자 값이 날짜 가운데서 끊기던 것을 막는다. */
.pharmsci .pharmsci__fields .t-num { white-space: nowrap; }
.pharmsci .pharmsci__field dt { flex: none; }
.pharmsci .pharmsci__field dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }

/* 한국어는 어절 중간에서 끊으면 읽기가 크게 나빠진다. 본문 계열 전부 어절 단위로 끊는다.
   overflow-wrap 은 끊을 곳이 없는 긴 코드·URL 을 위한 최후 수단으로만 남긴다. */
.pharmsci .pharmsci__source-text { white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }
.pharmsci .pharmsci__guide-section { margin-top: var(--pd-space-5); }
.pharmsci .pharmsci__guide-entry { margin-top: var(--pd-space-3); }
.pharmsci .pharmsci__permission-text { max-width: 100%; overflow-x: auto; white-space: pre-line; }
/* 허가 원문 본문. 조항마다 회색 상자를 두니 한 화면에 상자가 열 개씩 쌓였다(약 139종 실측, R64).
   상자 대신 제목 아래 얇은 왼쪽 선으로 「이 제목의 본문」임만 보인다(디자인 지침: 카드는 위계가 있을 때만). */
.pharmsci .pharmsci__permission-block {
  display: grid;
  gap: var(--pd-space-2);
  padding: 0 0 0 var(--pd-space-4);
  background: var(--pd-surface);
  border-inline-start: 2px solid var(--pd-border);
  line-height: var(--pharmsci-guide-leading);
}
.pharmsci .pharmsci__permission-block > * { margin-block: 0; }
/* 허가 원문은 한 문단이 길다. 읽기 폭을 제한하고 목록·표에 조판을 준다. */
.pharmsci .pharmsci__permission-block,
.pharmsci .pd-accordion__panel,
.pharmsci .pharmsci__permission-block { max-width: calc(var(--pd-space-16) * 11); }
.pharmsci .pharmsci__permission-block ul,
.pharmsci .pharmsci__permission-block ol {
  margin-block: var(--pd-space-2);
  padding-inline-start: var(--pd-space-6);
}
.pharmsci .pharmsci__permission-block li + li,
.pharmsci .pd-accordion__panel li + li { margin-block-start: var(--pd-space-2); }
.pharmsci .pd-accordion__panel ul,
.pharmsci .pd-accordion__panel ol {
  margin-block: var(--pd-space-2);
  padding-inline-start: var(--pd-space-6);
}
/* 허가 원문 안의 표는 폭을 넘기기 쉽다. 칸 조판을 주고 넘칠 때만 그 표만 가로로 흐르게 한다. */
.pharmsci .pharmsci__permission-block table,
.pharmsci .pd-accordion__panel table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
.pharmsci .pharmsci__permission-block td,
.pharmsci .pharmsci__permission-block th,
.pharmsci .pd-accordion__panel td,
.pharmsci .pd-accordion__panel th {
  padding: var(--pd-space-2) var(--pd-space-3);
  border: 1px solid var(--pd-border);
  text-align: start;
  vertical-align: top;
}
.pharmsci .pharmsci__category-chip[open] { flex-basis: 100%; }
.pharmsci .pharmsci__safety-panel > section + section { margin-top: var(--pd-space-5); }
/* 요약 물성과 주제를 좁은 오른쪽 열에서도 같은 위치에서 비교하게 한다. */
.pharmsci .pharmsci__metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--pd-border); }
.pharmsci .pharmsci__metrics > .pd-metric { padding: var(--pd-space-2); background: var(--pd-surface); min-width: 0; }
/* 좁은 오른쪽 열에서 MW 같은 값이 한 글자 때문에 두 줄이 된다.
   자간을 95%(-0.05em)로 좁혀 한 줄에 담는다. 93~97% 범위에서 조정 가능. */
/* 공용 지표 값은 대시보드 KPI용 28px 다. 여기 타일은 열두 칸이 나란히 서는 자리라
   그 크기면 값만 커다랗고 이름표는 깨알처럼 보인다. 값을 줄여 이름표와 균형을 맞춘다. */
.pharmsci .pharmsci__metrics .pd-metric__value {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pharmsci .pharmsci__metrics .pd-metric__label {
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 이름표가 「ESOL logS 수용해도 추정」처럼 긴 것이 섞여 있다. 칸 안에서 위아래 기준을 맞춘다. */
.pharmsci .pharmsci__metrics > .pd-metric { justify-content: flex-start; gap: var(--pd-space-1); }
.pharmsci .pharmsci__metrics--3 { grid-template-columns: repeat(3,1fr); }
/* 통계 셋은 좁은 화면에서도 세 칸이다(아래 900px 이하 두 칸 규칙에서 뺀다). 두 칸으로 접히면 넷째 자리가 빈 회색 상자로 남고
   이름표가 잘렸다(타크로리무스 형태 앙상블). 칸이 좁아지므로 이름표는 줄을 바꾼다. */
.pharmsci .pharmsci__metrics--3 .pd-metric__label { white-space: normal; overflow: visible; }
/* 단위는 값이 아니라 이름표 뒤에 조용히 붙인다(디자인 시스템 §6). */
/* .t-unit 은 0.78em 이라 13px 이름표 안에서 10px 로 내려간다. 글자 하한 12px 을 지킨다(R49). */
.pharmsci .pharmsci__metrics .pd-metric__label .t-unit { color: var(--pd-text-muted); font-weight: var(--pd-weight-medium); font-size: 12px; }
/* 이름은 기존 글자 모양을 유지하고, 가리키거나 누르면 설명을 연다. */
.pharmsci .pharmsci__sources.pharmsci__metric-help { margin-top: 0; min-width: 0; }
.pharmsci .pharmsci__metric-trigger {
  display: block;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: var(--pd-surface);
  font-family: inherit;
  line-height: inherit;
  text-align: start;
  text-decoration: none;
  cursor: help;
}
.pharmsci .pharmsci__sources.pharmsci__metric-help.is-enhanced.is-open .pharmsci__sources-body {
  width: min(100vw, calc(var(--pd-space-16) * 5));
}
/* 주제 다섯은 주 내비게이션이다. 한 줄에 제목 · 자료 미리보기 · 화살표를 두고 44px 로 세워
   1280×900 에서 패널 안쪽 스크롤 없이 다섯 줄이 모두 보이게 한다. */
.pharmsci .pharmsci__topics { display: grid; grid-template-columns: minmax(0,1fr); border-top: 1px solid var(--pd-border); }
.pharmsci [hidden] { display: none !important; }
.pharmsci .pd-empty { word-break: keep-all; }
.pharmsci [data-molecule-host] {
  position: relative;
  height: 260px;
  overflow: hidden;
  /* 3D 뷰어 배경은 2D 판과 같은 흰 표면 + 테두리다. 원자색은 pharmsci-3d.js 의 흰 바탕용 색(짙은 회색 탄소 ·
     빨강 산소 · 파랑 질소)이라 2D 구조식과 색 체계가 같다. 명도 대비(2026-09-24, R62): 짙은 회색 바탕 + 기본색 대비
     산소 3.54 → 4.93, 질소 5.67 → 6.47, 그늘 면 최저 1.49 → 5.77. 스크립트도 이 자리의 계산값을 그대로 읽어 캔버스에 넣는다. */
  background: var(--pd-surface);
  border-radius: var(--pd-radius-md);
}
/* 줄바꿈하는 요약 도구도 공용 버튼 그룹과 같은 선택 표시를 유지한다. */
.pharmsci .pharmsci__molecule .pd-btn[aria-pressed="true"],
.pharmsci [data-molecule-expanded] .pd-btn[aria-pressed="true"] {
  background: var(--pd-accent-subtle);
  border-color: var(--pd-accent);
  color: var(--pd-accent-on-subtle);
}
.pharmsci .pharmsci__molecule .pd-card__body { display: grid; gap: var(--pd-space-3); }
.pharmsci .pharmsci__molecule-stage { display: grid; gap: var(--pd-space-3); min-width: 0; }
.pharmsci .pharmsci__viewer { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--pd-border); border-radius: var(--pd-radius-md); background: var(--pd-surface); }
.pharmsci .pharmsci__viewer > [data-molecule-legend] { flex: none; margin: 0; padding: var(--pd-space-2) var(--pd-space-3); }
.pharmsci .pharmsci__viewer-enlarge { position: absolute; top: var(--pd-space-2); left: var(--pd-space-2); z-index: var(--pd-z-sticky); background: var(--pd-surface); }
.pharmsci .pharmsci__molecule-dialog:not([open]) { display: none; }
.pharmsci .pharmsci__molecule-dialog[open] {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-4);
  width: min(1100px, calc(100vw - 32px));
  max-width: none;
  height: min(820px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: var(--pd-space-5);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  background: var(--pd-surface);
  color: var(--pd-text);
  box-shadow: var(--pd-shadow-lg);
  overflow: auto;
}
/* 배경 막은 공통 색(ink-900)에 투명도만 준다 — 색을 섞어 새 값을 만들지 않는다(토큰 규칙). */
.pharmsci .pharmsci__molecule-dialog::backdrop { background: var(--pd-ink-900); opacity: 0.45; }
.pharmsci .pharmsci__molecule-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pd-space-3); }
.pharmsci .pharmsci__molecule-dialog-head .pd-btn { min-height: 44px; }
.pharmsci .pharmsci__molecule-dialog-body { flex: 1; min-height: 0; }
.pharmsci .pharmsci__molecule-dialog .pharmsci__molecule-stage { display: flex; flex-direction: column; height: 100%; }
.pharmsci .pharmsci__molecule-dialog .pharmsci__viewer { flex: 1; min-height: 180px; }
.pharmsci .pharmsci__molecule-dialog [data-molecule-host],
.pharmsci .pharmsci__molecule-dialog [data-molecule-blueprint] { flex: 1; height: auto; min-height: 0; }
.pharmsci .pharmsci__molecule-dialog .pharmsci__viewer-enlarge { display: none; }
.pharmsci .pharmsci__element-key { display: inline-flex; align-items: center; gap: var(--pd-space-1); white-space: nowrap; }
.pharmsci .pharmsci__element-swatch { width: 10px; height: 10px; flex: none; border: 1px solid var(--pd-ink-400); border-radius: var(--pd-radius-pill); }
/* 카드 머리는 56px 로 줄인다. 요약 패널은 주제 목록까지 한 화면에 들어와야 한다. */
.pharmsci .pharmsci__molecule > .pd-card__head { min-height: 56px; padding-block: var(--pd-space-3); }
/* 풀다운은 이름 바로 아래 고정 자리다. 이름표(성분 N개)와 한 줄에 두고 남은 폭을 셀렉트가 쓴다. */
.pharmsci .pharmsci__picker { display: flex; align-items: center; gap: var(--pd-space-2); min-width: 0; }
.pharmsci .pharmsci__picker label { flex: none; white-space: nowrap; color: var(--pd-text-muted); }
.pharmsci .pharmsci__picker select { flex: 1; min-width: 0; width: auto; }
/* 뷰어 한 자리에 3D 와 2D 를 전환해 보인다. 전환 단추는 캔버스 오른쪽 위에 얹는다. */
.pharmsci .pharmsci__viewer-switch {
  position: absolute;
  top: var(--pd-space-2);
  right: var(--pd-space-2);
  z-index: var(--pd-z-sticky);
  background: var(--pd-surface);
  border-radius: var(--pd-radius-md);
}
/* 불러오는 중·오류 문장은 캔버스 위 가운데에 한 줄로 얹는다. */
.pharmsci .pharmsci__viewer-status {
  position: absolute;
  inset-inline: var(--pd-space-3);
  bottom: var(--pd-space-3);
  margin: 0;
  padding: var(--pd-space-2) var(--pd-space-3);
  background: var(--pd-surface);
  color: var(--pd-text);
  border-radius: var(--pd-radius-sm);
  font-size: 12px;
  text-align: center;
}
/* 구조가 없으면 어두운 빈 상자 대신 밝은 빈 상태 120px 에 이유를 한 번만 쓴다. */
.pharmsci .pharmsci__viewer.is-empty [data-molecule-host],
.pharmsci .pharmsci__viewer.is-empty [data-molecule-blueprint],
.pharmsci .pharmsci__viewer.is-empty .pharmsci__viewer-switch { display: none; }
.pharmsci .pharmsci__viewer.is-empty .pharmsci__viewer-status {
  position: static;
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: var(--pd-space-4);
  background: var(--pd-surface-sunken);
  color: var(--pd-text-muted);
  border: 1px dashed var(--pd-ink-300);
  border-radius: var(--pd-radius-md);
  font-size: 12px;
}
/* 색 셋(택일) · 표면(겹치기) · 회전·시점(조작)을 모양으로 구분해 한 줄에 둔다. */
.pharmsci .pharmsci__viewer-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pd-space-2);
  padding: var(--pd-space-1);
  background: var(--pd-surface-sunken);
  border-radius: var(--pd-radius-md);
}
.pharmsci .pharmsci__viewer-actions { display: flex; gap: var(--pd-space-1); margin-inline-start: auto; }
/* 범례·판독은 상자 없이 한 줄 캡션이다. 띠는 짧게 두고 양끝 값을 뒤에 붙인다. */
.pharmsci .pharmsci__viewer-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pd-space-1) var(--pd-space-2);
  margin: 0;
  color: var(--pd-text-muted);
}
.pharmsci .pharmsci__panel-caveat { margin: 0; color: var(--pd-text-muted); }
/* 오른쪽 패널은 좁아 한 글자 때문에 두 줄이 되기 쉽다. 어절 단위로 끊고 버튼 이름은 붙여 쓴다. */
.pharmsci .pharmsci__molecule .pd-card__body { word-break: keep-all; }
.pharmsci .pharmsci__molecule .pd-btn--sm { white-space: nowrap; }
.pharmsci .pharmsci__molecule {
  /* GNB height is defined in layout.css as --pd-gnb-h; the extra token gap keeps the sticky panel below the sticky header. */
  /* 내부 스크롤바를 만들지 않는다. max-height + overflow 로 붙여 두면 3D 자리에
     세로 스크롤바가 생겨 화면이 지저분해진다. 패널이 화면보다 길면 같이 흐르게 둔다. */
  position: sticky;
  top: var(--pharmsci-sticky-top);
  /* 약 카드의 바로가기로 건너왔을 때 제목이 머리 막대 밑에 숨지 않게 한다. */
  scroll-margin-top: var(--pd-gnb-h);
}
.pharmsci .pharmsci__topics > .pd-btn {
  display: grid;
  grid-template-columns: max-content minmax(0,1fr) auto;
  align-items: center;
  gap: var(--pd-space-3);
  height: 44px;
  min-width: 0;
  padding: 0 var(--pd-space-2);
  border-radius: 0;
  border-bottom: 1px solid var(--pd-border);
  text-align: start;
}
.pharmsci .pharmsci__topic-title { font-weight: var(--pd-weight-semibold); color: var(--pd-text); }
.pharmsci .pharmsci__topics small { min-width: 0; color: var(--pd-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pharmsci .pharmsci__topics .pd-icon { color: var(--pd-text-muted); }
/* 자료가 없는 주제도 눌러 열 수 있다(빈 상태 한 줄). 흐린 글자로만 미리 알린다. */
.pharmsci .pharmsci__topics > .pd-btn[aria-disabled="true"] .pharmsci__topic-title { color: var(--pd-text-muted); font-weight: var(--pd-weight-medium); }
.pharmsci [data-molecule-scale] { display: inline-block; width: calc(var(--pd-space-16) + var(--pd-space-8)); height: var(--pd-space-2); border-radius: var(--pd-radius-xs); }
.pharmsci [data-molecule-expanded] > * + * { margin-top: var(--pd-space-3); }
.pharmsci [data-molecule-expanded] .pd-btn-row { flex-wrap: wrap; gap: var(--pd-space-2); }
/* 좁은 폭에서 탭 줄이 잘려도 넘침이 안 보였다. 오른쪽 끝을 흐리게 해 더 있음을 알리고, 탭 단위로 멈추게 한다. */
.pharmsci .pharmsci__topic-tabs .pd-tabs { scroll-snap-type: x proximity; }
.pharmsci .pharmsci__topic-tabs .pd-tab { scroll-snap-align: start; flex: none; }
/* 드물게 쓰는 분자 도구는 툴바 상자 안에 접어 둔다(R89, 확대 보기에서만). 단추는 툴바 끝, 펼친 내용은
   같은 상자의 다음 줄 전체 — 닫혀 있을 때는 따로 차지하는 줄이 없다. */
.pharmsci .pharmsci__tools-toggle { gap: var(--pd-space-1); }
.pharmsci .pharmsci__tools-toggle .pd-icon { transition: transform var(--pd-dur-fast) var(--pd-ease); }
.pharmsci .pharmsci__tools-toggle[aria-expanded="true"] { color: var(--pd-text); background: var(--pd-surface); }
.pharmsci .pharmsci__tools-toggle[aria-expanded="true"] .pd-icon { transform: rotate(180deg); }
.pharmsci .pharmsci__tools {
  flex: 1 0 100%;
  padding: var(--pd-space-3) var(--pd-space-2) var(--pd-space-2);
  border-top: 1px solid var(--pd-border);
}
.pharmsci .pharmsci__tools .pd-btn-row { flex-wrap: wrap; gap: var(--pd-space-1); }
/* 이름표 폭을 맞춰 세 줄의 버튼 시작점이 한 줄로 서게 한다. */
.pharmsci .pharmsci__tool-row {
  display: grid;
  grid-template-columns: calc(var(--pd-space-16) - var(--pd-space-2)) minmax(0,1fr);
  align-items: center;
  gap: var(--pd-space-3);
}
.pharmsci .pharmsci__tool-row + .pharmsci__tool-row { margin-block-start: var(--pd-space-2); }
.pharmsci .pharmsci__tool-label { color: var(--pd-text-muted); font-weight: var(--pd-weight-semibold); }

.pharmsci .pharmsci__results { margin-top: var(--pd-space-3); }
.pharmsci .pharmsci__results-note { margin: var(--pd-space-1) 0 0; }
/* 결과 줄 어디를 눌러도 그 약이 열린다(R117). 사진 칸을 눌러도 아무 일이 없었다. */
.pharmsci .pharmsci__search-table tbody tr[data-pharmsci-row-href] { cursor: pointer; }
.pharmsci .pharmsci__search-table tbody tr[data-pharmsci-row-href]:hover { background: var(--pd-surface-sunken); }
/* 첫 화면 미리보기(R108). 실제 상세 화면 그림 한 장과 그 아래 설명. 그림은 아래로 갈수록 카드 바탕(surface)으로
   사라지게 찍었으므로 테두리 · 바탕을 두르지 않는다 — 두르면 사라지는 끝에 선이 생긴다. 설명은 그림 위에 얹지 않는다(지침). */
.pharmsci .pharmsci__preview {
  display: grid;
  gap: var(--pd-space-6);
  margin-top: var(--pd-space-3);
  padding: var(--pd-space-8);
}
.pharmsci .pharmsci__preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pd-space-4);
}
.pharmsci .pharmsci__preview-lead { display: grid; gap: var(--pd-space-2); max-width: var(--pharmsci-preview-lead-w); }
.pharmsci .pharmsci__preview-lead h2,
.pharmsci .pharmsci__preview-lead p { margin: 0; word-break: keep-all; }
/* 비회원 로그인은 검색과 겨루지 않게 민트가 아닌 본문색 밑줄 링크로 둔다(R113). */
.pharmsci .pharmsci__preview-login {
  display: inline-flex;
  align-items: center;
  gap: var(--pd-space-1);
  justify-self: start;
  color: var(--pd-text);
  font-weight: var(--pd-weight-semibold);
  text-decoration: underline;
  text-underline-offset: var(--pd-space-1);
}
.pharmsci .pharmsci__preview-login:hover,
.pharmsci .pharmsci__preview-login:focus-visible { color: var(--pd-text-muted); }
.pharmsci .pharmsci__preview-shot { margin: 0; }
.pharmsci .pharmsci__preview-shot img { display: block; width: 100%; height: auto; }
/* 다섯 설명은 같은 크기 카드가 아니라 번호 붙은 글 목록이다. 칸 폭이 되는 만큼 한 줄에 놓는다. */
.pharmsci .pharmsci__preview-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--pharmsci-preview-point-min), 1fr));
  gap: var(--pd-space-5) var(--pd-space-6);
  margin: 0;
  padding: var(--pd-space-6) 0 0;
  list-style: none;
  border-top: 1px solid var(--pd-border);
}
.pharmsci .pharmsci__preview-points li { display: grid; gap: var(--pd-space-1); align-content: start; }
.pharmsci .pharmsci__preview-points strong { font-weight: var(--pd-weight-bold); color: var(--pd-text); }
.pharmsci .pharmsci__preview-points p { margin: 0; word-break: keep-all; }
@media (max-width: 640px) {
  .pharmsci .pharmsci__preview { padding: var(--pd-space-4); gap: var(--pd-space-4); }
}
/* 검색 결과 표도 제품표와 같은 규칙으로 맞춘다 — 머리글 가운데, 배지 폭 고정, 한 줄 유지. */
.pharmsci .pharmsci__search-table th { text-align: center; }
.pharmsci .pharmsci__search-table td.pharmsci__center { text-align: center; }
.pharmsci .pharmsci__search-table td.pharmsci__nowrap { white-space: nowrap; }
.pharmsci .pharmsci__search-table th { white-space: nowrap; }
/* 성분 목록이 들어가는 칸은 줄마다 세우므로 세로 위 기준으로 맞춘다. */
.pharmsci .pharmsci__search-table td { vertical-align: top; }
/* 검색 결과는 사이트 목록 표(.pd-table--stack --list)가 전부 맡는다.
   성분코드를 열로 넣어 표 하나로 합쳤으므로 묶음용 자체 스타일이 필요 없어졌다. */

@media (max-width: 1180px) {
  .pharmsci .pharmsci__zones { gap: var(--pd-space-3); }
  .pharmsci .pharmsci__search-form { flex-basis: 100%; }
  .pharmsci .pharmsci__drug-section { grid-column: 1 / -1; }
}
/* 2026-09-24 E2E 실측: 768px 에서 제품표·지표가 눌려 900px 로 조정 (PRD AC-51) */
@media (max-width: 900px) {
  .pharmsci .pharmsci__zones { grid-template-columns: minmax(0,1fr); }
  .pharmsci .pharmsci__molecule {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }
  .pharmsci .pharmsci__fields { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* 좁은 폭에서는 이름표 열을 없애고 값이 아래로 오게 한다(필드는 이제 격자다). */
  .pharmsci .pharmsci__field { grid-template-columns: minmax(0,1fr); gap: var(--pd-space-1); }
  /* 좁은 폭에서 이름표 열을 유지하면 도구 버튼이 한두 개씩 끊긴다. */
  .pharmsci .pharmsci__tool-row { grid-template-columns: minmax(0,1fr); gap: var(--pd-space-1); }
  /* 제품 칸은 좁아지면 사진과 이름을 위아래로 쌓는다. */
  .pharmsci .pharmsci__product-cell { grid-template-columns: minmax(0,1fr); gap: var(--pd-space-2); }
  /* 좁은 폭에서 표는 칸이 블록으로 쌓인다(.pd-table--stack). 이때 한 줄 강제를 풀지 않으면
     긴 제품명이 화면 밖으로 나간다. 두 줄이 되더라도 화면 안에 있는 쪽이 낫다. */
  .pharmsci .pharmsci__search-table td.pharmsci__nowrap { white-space: normal; }
  .pharmsci .pharmsci__search-table td.pharmsci__center { text-align: start; }
}
@media (max-width: 640px) {
  /* 약 카드 헤드: 사진을 숨기거나 위로 쌓지 않고 작게 줄여 제목 왼쪽에 둔다(PILLDOC-2523).
     위로 쌓으면 사진 한 장이 첫 화면 절반을 차지해 약 이름 · 성분이 밀려난다. */
  .pharmsci .pharmsci__drug-head {
    --pharmsci-drug-image-size: var(--pd-space-20);
    gap: var(--pd-space-2) var(--pd-space-3);
  }
  .pharmsci .pharmsci__drug-section { grid-column: 1 / -1; margin-top: var(--pd-space-1); }
  /* 사진 옆 좁은 칸에는 약 이름 · 배지만 둔다. 성분 · 모양 설명까지 넣으면 한 줄 열 글자 남짓으로 길게 늘어진다. */
  .pharmsci .pharmsci__drug-title { display: contents; overflow-wrap: anywhere; }
  .pharmsci .pharmsci__drug-title > * { grid-column: 1 / -1; min-width: 0; }
  .pharmsci .pharmsci__drug-title > .pd-btn-row { grid-column: 2; align-self: center; }
  .pharmsci .pharmsci__pill-figure--card { border-radius: var(--pd-radius-md); }
  /* 사진 없는 빈 상자는 좁은 폭에서 숨기고 제목이 한 줄을 다 쓴다(2026-09-17 결정: 데스크톱에선 유지).
     「-」 요소는 사진이 있어도 DOM 에 늘 있고 스크립트가 hidden 만 바꾼다. 보이는 것만 골라야
     사진 있는 약까지 숨지 않는다. */
  .pharmsci .pharmsci__pill-figure--card:has(.pharmsci__pill-fallback:not([hidden])) { display: none; }
  .pharmsci .pharmsci__drug-head:has(.pharmsci__pill-fallback:not([hidden])) { grid-template-columns: minmax(0,1fr); }
  .pharmsci .pharmsci__drug-head:has(.pharmsci__pill-fallback:not([hidden])) .pharmsci__drug-title > .pd-btn-row { grid-column: 1 / -1; }
  /* 허가 원문 상자 패딩 축소 — 260px 열에서 좌우 공백이 지나치게 넓었다. */
  .pharmsci .pharmsci__permission-block { padding: 0 0 0 var(--pd-space-3); }
}

/* 숨긴 주제를 열거나 화면 폭이 바뀌어도 원본 비율로 다시 그릴 자리를 확보한다. */
.pharmsci [data-molecule-2d],
.pharmsci [data-molecule-charge-map] { min-width: 0; width: 100%; }
.pharmsci [data-molecule-2d] canvas,
.pharmsci [data-molecule-charge-map] canvas { max-width: 100%; background: var(--pd-surface); }
/* 호변이성질체·골격은 분자마다 그림 한 장 + SMILES 한 줄이다. 칸으로 깔고 그림을 가운데 둔다. */
.pharmsci [data-structure-list] { overflow-wrap: anywhere; }
.pharmsci .pharmsci__structure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--pd-space-4);
  margin: var(--pd-space-2) 0 0;
  padding: 0;
  list-style: none;
}
.pharmsci .pharmsci__structure-item { display: grid; justify-items: center; gap: var(--pd-space-2); min-width: 0; }
.pharmsci .pharmsci__structure-canvas {
  width: 100%;
  max-width: 240px;
  height: auto;
  background: var(--pd-surface);
  border: 1px solid var(--pd-ink-200);
  border-radius: var(--pd-radius-md);
}
/* SMILES 는 참고용 식별자라 본문보다 작고 조용하게, 어디서든 끊기게 둔다. */
/* 유사 성분의 구조식 미리보기. 없으면 숨어 있고, 오면 칸 안에 들어간다. */
/* 복합체 식별자는 코드 한 줄 + 이름 한 줄로 쌓는다. 코드는 눈으로 대조하는 값이라 고정폭. */
/* BOILED-Egg 모식도. 흰자·노른자는 문헌 분류영역의 근사라 채도를 낮춰 둔다. */
.pharmsci .pharmsci__egg { display: flex; justify-content: center; margin-block: var(--pd-space-2); }
.pharmsci .pharmsci__egg-svg { width: 100%; max-width: calc(var(--pd-space-16) * 5); height: auto; }
.pharmsci .pharmsci__egg-plot { fill: var(--pd-surface-sunken); stroke: var(--pd-ink-200); }
.pharmsci .pharmsci__egg-white { fill: var(--pd-ink-100); stroke: var(--pd-ink-300); }
.pharmsci .pharmsci__egg-yolk { fill: var(--pd-warning-subtle); stroke: var(--pd-gold-400); }
.pharmsci .pharmsci__egg-point { fill: var(--pd-accent); stroke: var(--pd-surface); stroke-width: 1.4; }

/* 생체이용 레이더. 색은 토큰으로만 두고 좌표는 스크립트가 만든다. */
.pharmsci .pharmsci__radar { display: flex; justify-content: center; margin-block: var(--pd-space-2); }
.pharmsci .pharmsci__radar-svg { width: 100%; max-width: calc(var(--pd-space-16) * 4); height: auto; }
.pharmsci .pharmsci__radar-ring { fill: none; stroke: var(--pd-ink-200); }
.pharmsci .pharmsci__radar-spoke { fill: none; stroke: var(--pd-ink-200); }
/* 「약물 친화 범위」는 좋은 범위다. 위험색(빨강)으로 채우면 반대로 읽혀 중립 회색으로 둔다.
   성분 선은 차트 1번 색이다. 민트(강조색)는 활성·선택 전용이라 쓰지 않는다. */
.pharmsci .pharmsci__radar-range { fill: var(--pd-ink-100); stroke: var(--pd-ink-300); }
.pharmsci .pharmsci__radar-value { fill: none; stroke: var(--pd-chart-1); stroke-width: 1.6; }
.pharmsci .pharmsci__radar-label {
  fill: var(--pd-text-muted);
  font-size: 12px;
  text-anchor: middle;
}
.pharmsci .pharmsci__egg-axis { fill: var(--pd-text-muted); font-size: 12px; }
/* 리간드 이름(N-(4-hydroxyphenyl)acetamide)이 좁은 칸에서 글자마다 끊겼다. 칸에 최소 폭을 둔다. */
.pharmsci .pharmsci__complex-cell { display: grid; gap: var(--pd-space-1); min-width: 8rem; }
.pharmsci .pharmsci__complex-codes { font-family: var(--pd-font-mono); font-size: 12px; }
.pharmsci .pharmsci__complex-name { color: var(--pd-text-muted); overflow-wrap: anywhere; }
.pharmsci .pharmsci__sim-thumb {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
  aspect-ratio: 4 / 3;
  margin-inline: auto;
  background: var(--pd-surface);
  border-radius: var(--pd-radius-sm);
}
.pharmsci .pharmsci__structure-smiles {
  font-family: var(--pd-font-mono);
  font-size: 12px;
  color: var(--pd-text-muted);
  overflow-wrap: anywhere;
  text-align: center;
}
.pharmsci [data-molecule-structure-topic] > section { margin-top: var(--pd-space-3); }
.pharmsci [data-charge-scale] { width: 100%; }

/* 복합제의 긴 성분명은 줄바꿈하고 선택 버튼은 한 줄에서 비교하게 한다. */
.pharmsci [data-pharmsci-ingredients] { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
/* 복합제 성분 줄은 단일제와 같은 자리(제목 왼쪽 선)에서 시작한다. 전에는 목록 들여쓰기 20px 만 남고
   불릿은 [data-pharmsci-ingredient] 의 display: block 에 지워져, 복합제만 까닭 없이 들어가 보였다(2026-09-29 사용자 지적).
   어디서 끊기는지는 글줄 밖 왼쪽 여백에 건 점으로 보인다. */
.pharmsci .pharmsci__ingredient-list { margin: 0; padding: 0; list-style: none; }
.pharmsci .pharmsci__ingredient-list li { position: relative; }
.pharmsci .pharmsci__ingredient-list li::before { content: "·"; position: absolute; right: 100%; margin-right: var(--pd-space-2); color: var(--pd-text-muted); font-weight: var(--pd-weight-semibold); }
.pharmsci .pharmsci__ingredient-list li + li { margin-block-start: var(--pd-space-1); }
.pharmsci [data-molecule-picker] { min-width: 0; overflow-x: auto; }
.pharmsci [data-molecule-select] { flex-wrap: nowrap; width: max-content; }
.pharmsci [data-molecule-ingredient],
.pharmsci [data-molecule-count] { flex-shrink: 0; }
.pharmsci [data-molecule-name],
.pharmsci [data-molecule-metrics-name],
.pharmsci [data-molecule-2d-name] { overflow-wrap: anywhere; }

/* 2D 는 3D 와 같은 자리·같은 높이의 전환 판이다. 겹쳐 두던 작은 판은 분자를 가렸고 터치에서 확대가 안 됐다.
   흰 바탕으로 라벨을 지우는 렌더러에 맞춰 판은 밝게 둔다. */
.pharmsci [data-molecule-viewer] { position: relative; min-width: 0; }
.pharmsci [data-molecule-blueprint] {
  display: grid;
  place-items: center;
  height: 260px;
  padding: var(--pd-space-3);
  background: var(--pd-surface);
  border-radius: var(--pd-radius-md);
}
/* 그림은 판 높이에 맞춰 줄어들므로(pharmsci-2d.js fitHeight) 너비가 남는다. 남는 폭은 양옆으로 나눠 가운데에 둔다. */
.pharmsci [data-molecule-blueprint] canvas { display: block; max-height: 100%; margin-inline: auto; }
.pharmsci [data-molecule-blueprint] .pd-empty { padding: var(--pd-space-1); margin: 0; }
.pharmsci .pharmsci__structure-figure { display: grid; justify-items: center; gap: var(--pd-space-1); margin: 0; }
.pharmsci .pharmsci__structure-forms { margin-top: var(--pd-space-4); }
/* 원자료(SMARTS·원자 번호)는 한 곳에 접어 둔다. 여는 단추는 자기 글자만큼만 차지한다. */
.pharmsci .pharmsci__raw > summary { cursor: pointer; list-style: none; width: max-content; }
.pharmsci .pharmsci__raw > summary::-webkit-details-marker { display: none; }
.pharmsci .pharmsci__raw ul { margin: var(--pd-space-2) 0 0; padding-inline-start: var(--pd-space-5); overflow-wrap: anywhere; }
/* 카드 머리 한 줄(근거 배지 · 참고 문장 · 기준일). */
.pharmsci .pharmsci__topic-lead { margin: 0; color: var(--pd-text-muted); }
/* 약물 유사성 규칙은 「규칙 · 판정」 한 줄씩 목록으로 둔다. 기준식은 그 줄 안에 접는다. */
.pharmsci .pharmsci__rule-list { display: grid; gap: var(--pd-space-2); margin: var(--pd-space-2) 0 0; padding: 0; list-style: none; }
/* 이름 · 판정 · (이 성분 값 / 기준) 세 칸 격자. 줄바꿈 위치가 규칙마다 달라 읽는 자리가 흔들렸다(R63). */
.pharmsci .pharmsci__rule { display: grid; grid-template-columns: 7rem auto minmax(0, 1fr); align-items: baseline; gap: var(--pd-space-1) var(--pd-space-3); word-break: keep-all; }
.pharmsci .pharmsci__rule-name { font-weight: var(--pd-weight-medium); }
.pharmsci .pharmsci__rule-text { display: grid; gap: var(--pd-space-1); min-width: 0; }
@media (max-width: 640px) {
  .pharmsci .pharmsci__rule { grid-template-columns: minmax(0, 1fr) auto; }
  .pharmsci .pharmsci__rule-text { grid-column: 1 / -1; }
}
/* 입체 배열 · 취약 부위 목록은 본문 왼쪽 선에 맞춘다(들여쓰기가 어긋났다) */
.pharmsci [data-fg-stereocenters],
.pharmsci [data-fg-labile-groups] { display: grid; gap: var(--pd-space-1); margin: var(--pd-space-2) 0 0; padding: 0; list-style: none; font-size: 14px; }
.pharmsci [data-fg-pharmacophore-kinds] { flex-wrap: wrap; gap: var(--pd-space-1); }
.pharmsci [data-pharmsci-ingredient] { display: block; white-space: normal; }

/* 긴 표적명과 제공되지 않는 항목 문구가 좁은 주제 카드 밖으로 밀려나지 않게 한다. */
.pharmsci [data-molecule-topic-body] section > section { margin-top: var(--pd-space-5); }
.pharmsci [data-molecule-topic-body] .pd-metric__value,
.pharmsci [data-molecule-topic-body] td,
.pharmsci [data-fg-groups] .pd-note { overflow-wrap: anywhere; }
.pharmsci [data-molecule-topic-body] .pd-table-wrap { max-width: 100%; overflow-x: auto; }
/* 화면 안의 모든 표는 머리글을 가운데 둔다(디자인 리뷰 2026-09-17).
   행 제목(th[scope=row])은 글이라 왼쪽에 그대로 둔다. */
.pharmsci .pd-table thead th { text-align: center; }
/* 주제 본문의 표는 값이 여러 줄이 되는 칸이 섞여 있어 위 기준으로 맞춘다. */
.pharmsci [data-molecule-topic-body] .pd-table td { vertical-align: top; }
/* 주제 본문의 그림(2D 구조식·전하 지도 등)은 칸 가운데에 둔다. */
.pharmsci [data-molecule-topic-body] canvas { display: block; margin-inline: auto; }
.pharmsci [data-fg-groups] { align-items: flex-start; flex-wrap: wrap; gap: var(--pd-space-2); }
.pharmsci [data-fg-groups] details { min-width: 0; max-width: 100%; }

/* 원자별 부분전하: 복약 · 허가사항의 접힘과 같은 머리행. 절 안이라 머리행은 한 단 작게(패딩 12 · 16, 제목 14px) 둔다. */
.pharmsci .pharmsci__charge-trigger { padding: var(--pd-space-3) var(--pd-space-4); list-style: none; }
.pharmsci .pharmsci__charge-trigger::-webkit-details-marker { display: none; }
.pharmsci .pharmsci__charge-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pd-space-2); min-width: 0; }
.pharmsci .pharmsci__charge-head .pd-accordion__q { font-size: 14px; }
/* 펼친 표는 칸 안에서만 스크롤하고 머리글을 고정한다. 바깥 접힘이 테두리를 그리므로 안쪽 테두리 · 모서리는 뺀다. */
.pharmsci .pharmsci__charge-scroll { --pd-table-h: calc(var(--pd-space-16) * 6); border: 0; border-top: 1px solid var(--pd-border); border-radius: 0; }
.pharmsci .pharmsci__charge-scroll .pd-table th,
.pharmsci .pharmsci__charge-scroll .pd-table td { padding: var(--pd-space-1) var(--pd-space-4); line-height: 1.5; }
.pharmsci .pharmsci__charge-scroll .pd-table thead th { padding-block: var(--pd-space-2); background: var(--pd-surface-sunken); white-space: nowrap; }
.pharmsci .pharmsci__charge-scroll .pd-table td[data-numeric] { font-variant-numeric: tabular-nums; }
/* 원소 기호는 한두 글자라 가운데 머리글 밑에 가운데로 둔다. */
.pharmsci .pharmsci__charge-scroll .pd-table td:nth-child(2) { text-align: center; }
/* 휴대폰에서는 칸 좌우 여백을 줄여 네 열이 가로 스크롤 없이 들어간다(390px 에서 표가 칸보다 32px 넓었다). */
@media (max-width: 640px) {
  .pharmsci .pharmsci__charge-trigger { padding: var(--pd-space-3); }
  .pharmsci .pharmsci__charge-scroll .pd-table th,
  .pharmsci .pharmsci__charge-scroll .pd-table td { padding-inline: var(--pd-space-2); }
}
.pharmsci .pharmsci__charge-scroll .pd-table tbody tr:last-child td { border-bottom: 0; }
.pharmsci [data-fg-groups] summary { height: auto; white-space: normal; }
.pharmsci [data-sim-items] tr[tabindex="0"] { cursor: pointer; }
.pharmsci [data-sim-items] tr[tabindex="0"]:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
/* 행 전체가 이동 링크인데 모양이 없었다. 이름에 밑줄을 달아 누를 수 있음을 보인다. */
.pharmsci .pharmsci__sim-name { color: var(--pd-text); font-weight: var(--pd-weight-semibold); text-decoration: underline; text-underline-offset: 2px; }
/* 30% 미만은 구조가 닮았다고 보기 어렵다. 같은 무게로 두지 않고 흐리게, 처음에 구분 줄 하나를 둔다. */
.pharmsci [data-sim-items] tr.is-weak td { color: var(--pd-text-muted); }
.pharmsci [data-sim-items] tr.is-weak .pharmsci__sim-name { font-weight: var(--pd-weight-medium); }
.pharmsci .pharmsci__sim-divider td { color: var(--pd-text-muted); font-size: 12px; background: var(--pd-surface-sunken); }
/* 그림이 한 장도 없으면 「구조」 열을 통째로 접는다. */
.pharmsci .pharmsci__sim-table.is-without-thumbs th[data-sim-thumb-col],
.pharmsci .pharmsci__sim-table.is-without-thumbs tr:not(.pharmsci__sim-divider) > td:first-child { display: none; }

/* 시뮬레이션은 저장된 프레임을 3D 뷰어에 재생하므로 상태와 조작을 한 묶음으로 둔다. */
.pharmsci .pharmsci__sim-section { display: grid; gap: var(--pd-space-3); }
.pharmsci .pharmsci__sim-bars { display: flex; align-items: end; flex-wrap: wrap; gap: var(--pd-space-2); min-height: var(--pd-space-16); }
.pharmsci .pharmsci__sim-bar {
  align-items: end;
  min-width: var(--pd-space-10);
  height: var(--pd-space-16);
  gap: var(--pd-space-1);
}
/* 막대 높이는 상온 분포다. 주요 형태(5% 이상)는 차트 색, 나머지는 회색으로 가른다(★·● 글리프 대신). */
.pharmsci .pharmsci__sim-bar-fill {
  display: block;
  width: var(--pd-space-2);
  min-height: var(--pd-space-1);
  height: var(--sim-bar-size);
  background: var(--pd-ink-300);
  /* 짧은 막대(상온 비율이 낮은 형태)에 둥근 모서리를 주면 점(●)처럼 보였다. 막대는 각지게 둔다. */
  border-radius: 0;
}
.pharmsci .pharmsci__sim-bar.is-major .pharmsci__sim-bar-fill { background: var(--pd-chart-1); }
.pharmsci .pharmsci__sim-bar[aria-pressed="true"] { box-shadow: var(--pd-focus-ring); }
/* 채워지기 전의 빈 알림 상자·빈 막대 자리는 회색 덩어리로만 보인다. 내용이 있을 때만 자리를 준다. */
.pharmsci .pd-note:empty,
.pharmsci .pharmsci__sim-bars:empty { display: none; }
/* 자료가 없는 절은 뼈대를 접고 제목과 안내만 남긴다 — 빈 표와 슬라이더가 먼저 쌓이면 안내가 묻힌다.
   읽는 법 설명도 보여줄 값이 없으면 함께 접는다. */
.pharmsci .pharmsci__sim-section.is-empty > *:not(h4):not(.pd-btn-row):not(.pd-empty) { display: none; }
.pharmsci .pharmsci__sim-section.is-empty .pd-btn-row .pd-btn { display: none; }
.pharmsci .pharmsci__sim-section.is-empty .pd-empty { padding-block: var(--pd-space-5); }
/* 슬라이더 색이 브라우저 기본(자홍)으로 토큰 밖이었다. */
.pharmsci .pharmsci__sim-range { width: 100%; accent-color: var(--pd-accent); }
.pharmsci .pharmsci__sim-spectrum { min-height: calc(var(--pd-space-16) + var(--pd-space-8)); }
.pharmsci .pharmsci__sim-spectrum-svg { display: block; width: 100%; height: calc(var(--pd-space-16) + var(--pd-space-8)); color: var(--pd-accent); }
.pharmsci .pharmsci__sim-axis { stroke: var(--pd-text-muted); }
/* 글자에 stroke 를 주면 획이 두꺼워져 번져 보였다(회전 곡선 축). 글자는 fill 만. */
.pharmsci .pharmsci__sim-axis-label { color: var(--pd-text-muted); fill: var(--pd-text-muted); stroke: none; font-size: 12px; }
.pharmsci .pharmsci__sim-vib-tick { stroke: var(--pd-accent); }
.pharmsci .pharmsci__sim-energy-line { fill: none; stroke: var(--pd-accent); stroke-width: 1px; }
.pharmsci .pharmsci__sim-marker { stroke: var(--pd-accent-on-subtle); stroke-width: 1px; }
.pharmsci .pharmsci__sim-marker.is-active { stroke: var(--pd-danger); }
@media (max-width: 900px) {
  .pharmsci [data-molecule-topic-body] .pd-metric-row:not(.pharmsci__metrics--3) { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* 약 카드의 패널 바로가기는 한 열 화면에서만 필요하다. 두 열에서는 패널이 이미 옆에 있다. */
.pharmsci .pharmsci__molecule-jump { display: none; justify-self: start; }
@media (max-width: 900px) {
  .pharmsci .pharmsci__molecule-jump { display: inline-flex; }
  .pharmsci [data-molecule-host],
  .pharmsci [data-molecule-blueprint] { height: 240px; }
  .pharmsci .pharmsci__picker label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pharmsci .pharmsci__metrics:not(.pharmsci__metrics--3) { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* 스펙트럼의 영역 구분은 색 토큰을 공유해 테마와 함께 바뀌게 한다. */
.pharmsci .pharmsci__sim-vib-band { opacity: 0.12; }
.pharmsci .pharmsci__sim-clash { fill: var(--pd-danger); }
.pharmsci .pharmsci__sim-spectrum-svg[role="slider"] { cursor: pointer; }
.pharmsci .pharmsci__sim-spectrum-svg:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
.pharmsci [data-pharmsci-simulation] [data-region="0"] { stroke: var(--pd-chart-1); fill: var(--pd-chart-1); color: var(--pd-chart-1); }
.pharmsci [data-pharmsci-simulation] [data-region="1"] { stroke: var(--pd-chart-2); fill: var(--pd-chart-2); color: var(--pd-chart-2); }
.pharmsci [data-pharmsci-simulation] [data-region="2"] { stroke: var(--pd-chart-3); fill: var(--pd-chart-3); color: var(--pd-chart-3); }
.pharmsci [data-pharmsci-simulation] [data-region="3"] { stroke: var(--pd-chart-4); fill: var(--pd-chart-4); color: var(--pd-chart-4); }
.pharmsci [data-pharmsci-simulation] [data-region="4"] { stroke: var(--pd-chart-5); fill: var(--pd-chart-5); color: var(--pd-chart-5); }
.pharmsci [data-pharmsci-simulation] [data-region="5"] { stroke: var(--pd-chart-6); fill: var(--pd-chart-6); color: var(--pd-chart-6); }

/* 시각적으로만 접어 보조기기의 읽기 순서와 스크립트 없는 화면을 보존한다. */
.pharmsci .pharmsci__sources { margin-top: var(--pd-space-4); }
.pharmsci .pharmsci__sources.is-enhanced:not(.is-open) .pharmsci__sources-body {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  overflow: clip;
  clip-path: inset(50%);
}
.pharmsci .pharmsci__sources.is-enhanced.is-open .pharmsci__sources-body {
  position: fixed;
  z-index: var(--pd-z-tooltip);
  top: var(--sources-top);
  left: var(--sources-left);
  width: min(100vw, calc(var(--pd-space-16) * 8));
  max-height: var(--sources-max-height, 100vh);
  overflow: auto;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  padding: var(--pd-space-4);
  background: var(--pd-surface);
  box-shadow: var(--pd-shadow-lg);
}
@media print {
  .pharmsci .pharmsci__sources.is-enhanced:not(.is-open) .pharmsci__sources-body,
  .pharmsci .pharmsci__sources.is-enhanced.is-open .pharmsci__sources-body {
    position: static;
    width: auto;
    height: auto;
    max-height: none;
    overflow: visible;
    clip-path: none;
    box-shadow: none;
  }
}

/* 목업 v2.0의 번호·미연결 자리·원문 배경은 공용 토큰으로 옮긴다. */
.pharmsci .pharmsci__section-head { flex-wrap: wrap; align-items: center; gap: var(--pd-space-2); }
/* 허가 원문 탭 맨 아래 출처 한 줄(R85 · R86) */
.pharmsci .pharmsci__permit-source { margin: var(--pd-space-6) 0 0; padding-top: var(--pd-space-3); border-top: 1px solid var(--pd-border); color: var(--pd-text-muted); line-height: 1.5; }
.pharmsci .pharmsci__permit-source strong { color: var(--pd-text-secondary); font-weight: var(--pd-weight-semibold); }
.pharmsci .pharmsci__permit-source span { white-space: nowrap; }
/* 절로 내려간 뒤 도착점 표시 — 클래스를 붙였다 떼면 배경이 서서히 빠진다(키프레임은 쓰지 않는다: 선택자 범위 규칙) */
.pharmsci .pharmsci__guide-section h3,
.pharmsci .pd-accordion__trigger,
.pharmsci .pharmsci__permit-title { transition: background-color 1.2s ease-out; border-radius: var(--pd-radius-sm); }
.pharmsci .pharmsci__jump-target { background: var(--pd-warning-subtle); transition: none; }
@media (prefers-reduced-motion: reduce) { .pharmsci .pharmsci__guide-section h3, .pharmsci .pd-accordion__trigger, .pharmsci .pharmsci__permit-title { transition: none; } }
/* 허가사항 안전 표시 띠(R26~R28). 탭 머리 위 1~3줄. 색은 금기 빨강·주의 금색·상태 회색만 쓰고 민트는 쓰지 않는다. */
/* 탭 위 「주요 주의」 한 줄(R88) — 글자 한 줄. 신호어만 색, 대상 명사는 밑줄 링크. 알약 · 테두리 · 「›」 없음 */
.pharmsci .pharmsci__safety-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pd-space-1) var(--pd-space-3); padding: var(--pd-space-3) var(--pd-space-5); border-bottom: 1px solid var(--pd-border); font-size: 14px; line-height: 1.5; }
.pharmsci .pharmsci__strip-lead { font-size: 13px; font-weight: var(--pd-weight-semibold); color: var(--pd-text-secondary); }
.pharmsci .pharmsci__strip-items { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pd-space-1) var(--pd-space-2); margin: 0; padding: 0; list-style: none; }
.pharmsci .pharmsci__strip-items > li + li::before { content: "·"; margin-right: var(--pd-space-2); color: var(--pd-text-muted); }
.pharmsci .pharmsci__strip-link { color: var(--pd-text); text-decoration: none; border-radius: var(--pd-radius-xs); }
.pharmsci .pharmsci__strip-target { text-decoration: underline; text-decoration-color: var(--pd-border-strong); text-underline-offset: 3px; }
.pharmsci .pharmsci__strip-link:hover .pharmsci__strip-target { text-decoration-color: var(--pd-text); }
.pharmsci .pharmsci__strip-link:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
.pharmsci .pharmsci__signal { font-weight: var(--pd-weight-semibold); }
.pharmsci .pharmsci__signal--danger { color: var(--pd-danger-on-subtle); }
.pharmsci .pharmsci__signal--gold { color: var(--pd-warning-on-subtle); }
.pharmsci .pharmsci__strip-more .pharmsci__strip-target { color: var(--pd-text-secondary); }
/* 탭 이름 + 절 이동 줄은 한 덩어리로 화면 위에 붙는다(R88) */
.pharmsci .pharmsci__tabhead { position: sticky; top: var(--pd-gnb-h); z-index: var(--pd-z-sticky); background: var(--pd-surface); }
.pharmsci .pharmsci__tabs > .pharmsci__tabhead:first-child { border-radius: var(--pd-radius-lg) var(--pd-radius-lg) 0 0; }
.pharmsci .pharmsci__subnav { overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--pd-border); }
.pharmsci .pharmsci__subnav::-webkit-scrollbar { display: none; }
.pharmsci .pharmsci__subnav ul { display: flex; gap: var(--pd-space-5); margin: 0; padding: 0 var(--pd-space-5); list-style: none; white-space: nowrap; }
.pharmsci .pharmsci__subnav a { display: inline-flex; align-items: center; min-height: 36px; font-size: 13px; color: var(--pd-text-muted); text-decoration: none; }
.pharmsci .pharmsci__subnav a:hover { color: var(--pd-text); }
.pharmsci .pharmsci__subnav a[aria-current="true"] { color: var(--pd-text); font-weight: var(--pd-weight-semibold); }
.pharmsci .pharmsci__subnav a:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); border-radius: var(--pd-radius-xs); }
@media (max-width: 640px) { .pharmsci .pharmsci__subnav ul { gap: var(--pd-space-4); padding: 0 var(--pd-space-4); } .pharmsci .pharmsci__subnav a { min-height: 40px; } }
/* 띠의 칩·바로가기로 내려온 절 제목이 고정 GNB 아래에 가려지지 않게 한다. */
.pharmsci [id^="pharmsci-permit-"],
.pharmsci [id^="pharmsci-guide-"],
.pharmsci #pharmsci-tabs { scroll-margin-top: var(--pd-gnb-h); }
.pharmsci .pharmsci__permit-empty { margin-top: var(--pd-space-3); }
.pharmsci .pharmsci__permit-group,
.pharmsci .pharmsci__permit-title { margin-block: var(--pd-space-5) var(--pd-space-2); font-weight: var(--pd-weight-semibold); }
/* 조항 제목(16px)이 본문(15px)보다 작던(14px) 위계를 바로잡는다. 절 제목(18px) > 조항 제목 > 본문. */
.pharmsci .pharmsci__permit-title,
.pharmsci .pharmsci__guide-section .pd-accordion__q { font-size: 16px; line-height: 1.5; }
.pharmsci .pharmsci__section-head + .pharmsci__guide-entry > .pharmsci__permit-title:first-child,
.pharmsci .pharmsci__section-head + .pharmsci__permit-title { margin-top: var(--pd-space-2); }
/* 문장이 제목 자리에 들어온 조항은 본문과 같은 굵기 · 크기로 둔다. */
.pharmsci .pharmsci__permit-title--sentence { font-size: 15px; font-weight: var(--pd-weight-regular); }
.pharmsci .pharmsci__permit-divider { margin-block: var(--pd-space-4); border: 0; border-top: 1px dashed var(--pd-border-strong); }
/* 공공 허가 원문 정규화 결과(PharmSciPermitLabel). 번호 글자는 원문 그대로 두고 들여쓰기만 준다. */
.pharmsci .pharmsci__permit-body { white-space: normal; }
/* 문단 사이는 허가 원문 상자의 grid 간격 하나로만 띄운다. 문단 margin 을 더하면 간격이 두 배가 된다. */
.pharmsci .pharmsci__permit-body .lbl-p { margin: 0; }
/* 내어쓰기(R65). 칸(lbl-lvN)은 바깥 여백, 번호 칸은 안쪽 여백 하나로 나눠 준다.
   번호는 번호 칸(lbl-m, space-6)에 두고 둘째 줄 · 설명 문단(lbl-cont)은 번호 뒤 글자 선에 맞춘다. 불릿은 번호 칸이 좁다(space-3).
   아래 칸의 번호는 윗 칸 글자 선에서 시작한다. 번호 없는 도입 문단은 들여쓰지 않는다. */
.pharmsci .pharmsci__permit-body .lbl-item,
.pharmsci .pharmsci__permit-body .lbl-cont { padding-inline-start: var(--pd-space-6); }
.pharmsci .pharmsci__permit-body .lbl-bullet { padding-inline-start: var(--pd-space-3); }
.pharmsci .pharmsci__permit-body .lbl-item { text-indent: calc(var(--pd-space-6) * -1); }
.pharmsci .pharmsci__permit-body .lbl-item.lbl-bullet { text-indent: calc(var(--pd-space-3) * -1); }
/* 번호 뒤 공백을 칸 안에 남겨(pre) 복사한 글자에서도 「1) 피부」가 「1)피부」로 붙지 않게 한다. */
.pharmsci .pharmsci__permit-body .lbl-m { display: inline-block; min-width: var(--pd-space-6); text-indent: 0; white-space: pre; font-variant-numeric: tabular-nums; }
.pharmsci .pharmsci__permit-body .lbl-bullet > .lbl-m { min-width: var(--pd-space-3); }
/* 같은 칸에 두 자리 번호(10) · (12))가 있으면 그 칸 전체의 번호 칸을 넓힌다(lbl-wide, R66). 불릿은 좁은 칸 그대로. */
.pharmsci .pharmsci__permit-body .lbl-item.lbl-wide:not(.lbl-bullet),
.pharmsci .pharmsci__permit-body .lbl-cont.lbl-wide:not(.lbl-bullet) { padding-inline-start: var(--pd-space-8); }
.pharmsci .pharmsci__permit-body .lbl-item.lbl-wide:not(.lbl-bullet) { text-indent: calc(var(--pd-space-8) * -1); }
.pharmsci .pharmsci__permit-body .lbl-wide:not(.lbl-bullet) > .lbl-m { min-width: var(--pd-space-8); }
.pharmsci .pharmsci__permit-body .lbl-lv1 { margin-inline-start: var(--pd-space-6); }
.pharmsci .pharmsci__permit-body .lbl-lv2 { margin-inline-start: var(--pd-space-12); }
.pharmsci .pharmsci__permit-body .lbl-lv3 { margin-inline-start: var(--pd-space-16); }
/* 좁은 폭은 칸 사이를 space-4 로 줄인다. 번호 칸 너비는 같다. 이 규칙이 위 데스크톱 규칙보다 뒤에 있어야 적용된다
   (예전 모바일 규칙은 앞쪽 @media 안에 있어 같은 선택자의 데스크톱 규칙에 늘 덮였다). */
@media (max-width: 900px) {
  .pharmsci .pharmsci__permit-body .lbl-lv1 { margin-inline-start: var(--pd-space-4); }
  .pharmsci .pharmsci__permit-body .lbl-lv2 { margin-inline-start: var(--pd-space-8); }
  .pharmsci .pharmsci__permit-body .lbl-lv3 { margin-inline-start: var(--pd-space-12); }
}
/* 표는 표 상자 안에서만 가로로 흐른다. 페이지는 가로 스크롤이 생기지 않는다. 병합 칸(rowspan 최대 37)이 많아 카드형으로 풀지 않는다. */
.pharmsci .pharmsci__permit-body .lbl-tbl-wrap { max-width: 100%; overflow-x: auto; margin-block: var(--pd-space-2) var(--pd-space-3); }
.pharmsci .pharmsci__permit-body .lbl-tbl { display: table; width: auto; min-width: 100%; overflow: visible; border-collapse: collapse; font-size: 12px; }
.pharmsci .pharmsci__permit-body .lbl-tbl td,
.pharmsci .pharmsci__permit-body .lbl-tbl th { min-width: calc(var(--pd-space-16) + var(--pd-space-4)); }
.pharmsci .pharmsci__permit-body .lbl-img { max-width: 100%; height: auto; }
/* 표 주석(「1) 임상시험에서 …」)은 목록 번호와 다르다. 표 바로 밑에 표 글자 크기 · 흐린 색으로 붙이고, 번호는 좁은 칸에 내어 쓴다. */
.pharmsci .pharmsci__permit-body .lbl-foot { padding-inline-start: var(--pd-space-5); text-indent: calc(var(--pd-space-5) * -1); color: var(--pd-text-muted); font-size: 12px; }
.pharmsci .pharmsci__permit-body .lbl-foot > .lbl-m { min-width: var(--pd-space-5); }
/* 「주1)」 · 「10)」 이 있는 조항은 주석 번호 칸 전체를 넓혀 1) · 2) 의 글자가 한 선에 선다. */
.pharmsci .pharmsci__permit-body .lbl-foot.lbl-wide { padding-inline-start: var(--pd-space-8); text-indent: calc(var(--pd-space-8) * -1); }
.pharmsci .pharmsci__permit-body .lbl-foot.lbl-wide > .lbl-m { min-width: var(--pd-space-8); }
.pharmsci .pharmsci__permit-body .lbl-foot.lbl-foot-cont { text-indent: 0; }
.pharmsci .pharmsci__permit-body .lbl-tbl-wrap:has(+ .lbl-foot) { margin-block-end: var(--pd-space-1); }
.pharmsci .pharmsci__permit-body .lbl-foot + :not(.lbl-foot) { margin-block-start: var(--pd-space-3); }
/* 품목기준코드 칸도 옆 칸들과 같은 글꼴 · 크기다. 전에는 고정폭 12px 이라 이 칸만 달라 보였다(2026-09-29 사용자 지적).
   숫자 폭만 맞춘다 — 약 카드의 코드 칸(t-num)과 같다. */
.pharmsci .pharmsci__standard-code { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pharmsci .pharmsci__notes { margin-top: var(--pd-space-3); }
.pharmsci .pharmsci__reference-product { background: var(--pd-ink-50); }
.pharmsci .pharmsci__reference-star { color: var(--pd-gold-500); }
/* 8열을 5열로 줄였으므로 가로 최소폭을 강제하지 않는다. 남은 칸은 제품 칸이 가져간다. */
.pharmsci .pharmsci__table { width: 100%; table-layout: fixed; }
.pharmsci .pharmsci__table th,
.pharmsci .pharmsci__table td { overflow-wrap: anywhere; word-break: keep-all; vertical-align: top; }
/* 제품 칸이 가장 넓어야 한다 — 좁게 두면 제품명이 통째로 잘리고 제조사가 다음 줄로 밀린다.
   나머지 넷은 담는 값의 최대 길이에 맞춰 고정해 행마다 폭이 흔들리지 않게 한다.
   768px 이하에서는 pd-table--stack 이 열을 없애므로 폭 고정이 필요 없다. */
@media (min-width: 769px) {
  .pharmsci .pharmsci__table th:nth-child(2),
  .pharmsci .pharmsci__table td:nth-child(2) { width: 17%; }
  .pharmsci .pharmsci__table th:nth-child(3),
  .pharmsci .pharmsci__table td:nth-child(3) { width: 15%; }
  .pharmsci .pharmsci__table th:nth-child(4),
  .pharmsci .pharmsci__table td:nth-child(4) { width: 17%; }
  .pharmsci .pharmsci__table th:nth-child(5),
  .pharmsci .pharmsci__table td:nth-child(5) { width: 11%; }
}
.pharmsci .pharmsci__product-cell {
  display: grid;
  grid-template-columns: var(--pharmsci-product-image-size) minmax(0,1fr);
  align-items: center;
  gap: var(--pd-space-3);
}
.pharmsci .pharmsci__product-name { display: grid; gap: var(--pd-space-1); min-width: 0; align-content: center; }
/* 이름은 한 줄로 유지하고 넘치면 말줄임으로 자른다. 전체 이름은 title 로 남긴다. */
.pharmsci .pharmsci__product-title {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pharmsci .pharmsci__reference-star { display: inline-block; width: var(--pd-space-4); margin-inline-start: var(--pd-space-1); }
/* 머리글은 전부 가운데. 값이 한 낱말인 칸과 값 부재(-)도 가운데로 맞춘다. */
.pharmsci .pharmsci__table th { text-align: center; }
/* 「허가 2024-01-01」이 날짜 가운데서 끊기던 것도 여기서 함께 막는다. */
.pharmsci .pharmsci__table td.pharmsci__center { text-align: center; white-space: nowrap; }
.pharmsci .pharmsci__blank { color: var(--pd-text-muted); }
/* 급여 배지는 「급여」와 「비급여」로 글자 수가 달라 폭이 흔들린다. 최소폭을 맞추고 가운데 정렬한다. */
.pharmsci .pharmsci__reimbursement { display: grid; justify-items: center; gap: var(--pd-space-1); text-align: center; }
.pharmsci .pharmsci__cover-badge { min-width: var(--pd-space-16); justify-content: center; text-align: center; }
/* 색 · 모양 · 앞면 · 뒷면을 라벨과 함께 줄마다 세운다. */
.pharmsci .pharmsci__appearance {
  display: grid;
  grid-template-columns: max-content minmax(0,1fr);
  gap: var(--pd-space-1) var(--pd-space-2);
  margin: 0;
}
.pharmsci .pharmsci__appearance dt { color: var(--pd-text-muted); white-space: nowrap; }
.pharmsci .pharmsci__appearance dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pharmsci .pd-accordion__item {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--pd-border);
}
.pharmsci .pd-accordion__item:last-child { border-bottom: 0; }
.pharmsci .pd-accordion__trigger {
  align-items: start;
  gap: var(--pd-space-3);
  padding-block: var(--pd-space-3);
}
.pharmsci .pd-accordion__q {
  display: block;
  padding-inline-start: var(--pd-space-6);
  text-indent: calc(var(--pd-space-6) * -1);
  font-variant-numeric: tabular-nums;
}
.pharmsci .pd-accordion__panel {
  max-width: calc(var(--pd-space-16) * 10);
  padding-block-start: var(--pd-space-2);
  padding-block-end: var(--pd-space-5);
  line-height: var(--pharmsci-guide-leading);
}
.pharmsci .pd-accordion__panel > * { margin-block: 0; }
.pharmsci .pd-accordion__panel > * + * { margin-block-start: var(--pd-space-3); }
.pharmsci .pd-accordion__chev { transition: transform var(--pd-dur) var(--pd-ease); }
.pharmsci details[open] > summary .pd-accordion__chev { transform: rotate(180deg); }


/* 불러오는 중: 빈 상태(48px 위아래 여백)와 구분되게 사이트 .pd-loading 과 같은 모양으로. 스피너 규격은 components.css .pd-spinner--sm 과 같다. */
.pharmsci .pd-empty.is-loading { flex-direction: row; justify-content: flex-start; gap: var(--pd-space-2); padding: var(--pd-space-3) 0; font-size: 14px; color: var(--pd-text-muted); text-align: start; }
.pharmsci .pd-empty.is-loading::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: var(--pd-radius-pill); border: 2px solid var(--pd-border-strong); border-top-color: var(--pd-accent); animation: pd-spin 700ms linear infinite; }
@media (prefers-reduced-motion: reduce) { .pharmsci .pd-empty.is-loading::before { animation: none; } }

/* 390px 이하에서 유사 성분 표는 담긴 상자가 250px 남짓이라 네 칸을 나란히 둘 수 없다. 칸 폭을 고정하면 성분명이
   한 글자씩 끊겼다(2026-09-24 E2E 캡처). 좁은 폭에서는 행을 카드로 바꾼다. 왼쪽 구조식, 오른쪽에 이름, 유사도, ATC. */
@media (max-width: 640px) {
  .pharmsci .pharmsci__sim-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pharmsci .pharmsci__sim-table,
  .pharmsci .pharmsci__sim-table tbody { display: block; width: 100%; }
  .pharmsci .pharmsci__sim-table tr:not(.pharmsci__sim-divider) {
    display: grid;
    grid-template-columns: 72px minmax(0,1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--pd-space-3);
    row-gap: var(--pd-space-1);
    padding: var(--pd-space-3) 0;
    border-bottom: 1px solid var(--pd-border);
  }
  .pharmsci .pharmsci__sim-table tr:not(.pharmsci__sim-divider) > td { display: block; padding: 0; border: 0; text-align: start; min-width: 0; }
  .pharmsci .pharmsci__sim-table tr:not(.pharmsci__sim-divider) > td:nth-child(1) { grid-column: 1; grid-row: 1 / span 3; }
  .pharmsci .pharmsci__sim-table tr:not(.pharmsci__sim-divider) > td:nth-child(n+2) { grid-column: 2; overflow-wrap: anywhere; }
  .pharmsci .pharmsci__sim-table tr:not(.pharmsci__sim-divider) > td:nth-child(3),
  .pharmsci .pharmsci__sim-table tr:not(.pharmsci__sim-divider) > td:nth-child(4) { font-size: 13px; color: var(--pd-text-muted); }
  .pharmsci .pharmsci__sim-table.is-without-thumbs tr:not(.pharmsci__sim-divider) { grid-template-columns: minmax(0,1fr); }
  .pharmsci .pharmsci__sim-table.is-without-thumbs tr:not(.pharmsci__sim-divider) > td:nth-child(n+2) { grid-column: 1; }
  .pharmsci .pharmsci__sim-table .pharmsci__sim-divider,
  .pharmsci .pharmsci__sim-table .pharmsci__sim-divider td { display: block; }
  .pharmsci .pharmsci__sim-thumb { max-width: 100%; }
}

/* 표 칸: 날짜는 한 줄로, 허가 상태는 옆 칸을 침범하지 않게 낱말 경계에서 줄바꿈한다(2026-09-24 사용자 지적). */
.pharmsci .pharmsci__date { white-space: nowrap; }
.pharmsci .pharmsci__table td.pharmsci__permit-cell { white-space: normal; }

/* 제품표 목록 변환(카드형). 두 칸 배치에서 왼쪽 열이 560px 안팎인 1100px 이하부터 쓴다. 다섯 칸 표는 그 폭에서
   색·모양·각인이 글자 단위로 끊기고 보험코드가 잘렸다. 자리는 components.css .pd-table--list 와 같은 규칙으로 못 박는다. */
@media (max-width: 1100px) {
  .pharmsci .pharmsci__table.pd-table--list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pharmsci .pharmsci__table.pd-table--list,
  .pharmsci .pharmsci__table.pd-table--list tbody { display: block; width: 100%; }
  .pharmsci .pharmsci__table.pd-table--list tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--pd-space-1) var(--pd-space-3);
    padding: var(--pd-space-4);
    border-bottom: 1px solid var(--pd-border);
  }
  .pharmsci .pharmsci__table.pd-table--list td { display: block; width: auto; min-width: 0; padding: 0; text-align: start; border: 0; }
  .pharmsci .pharmsci__table.pd-table--list td::before { content: none; }
  .pharmsci .pharmsci__table.pd-table--list .pd-list-title { grid-column: 1; grid-row: 1; }
  .pharmsci .pharmsci__table.pd-table--list .pd-list-aside { grid-column: 2; grid-row: 1; justify-self: end; }
  .pharmsci .pharmsci__table.pd-table--list .pd-list-meta { grid-column: 1 / -1; font-size: 13px; color: var(--pd-text-muted); }
  .pharmsci .pharmsci__table.pd-table--list .pd-table__empty { grid-column: 1 / -1; }
  .pharmsci .pharmsci__table.pd-table--list .pharmsci__product-cell { justify-content: start; justify-items: start; }
  .pharmsci .pharmsci__table.pd-table--list .pharmsci__product-name { text-align: start; }
  /* 레이블은 사이트 표(.pd-table--stack)의 칸 레이블 규칙(여백 · 밀어내기)과 보험코드 칸의 고정폭 글꼴을 물려받아
     「허가      정상」 「보 험 코 드」처럼 벌어졌다. 카드에서는 글줄 안의 짧은 이름표로 되돌린다. */
  .pharmsci .pharmsci__table.pd-table--list .pd-list-meta[data-label]::before {
    content: attr(data-label); display: inline; width: auto; min-width: 0; margin: 0 var(--pd-space-2) 0 0; padding: 0;
    font-family: var(--pd-font-sans); font-size: 13px; letter-spacing: normal; color: var(--pd-text-muted);
  }
  /* 카드에서는 제품명을 한 줄로 자르지 않는다. 표에서 한 줄로 둔 것은 칸 높이를 맞추기 위해서였다. */
  .pharmsci .pharmsci__table.pd-table--list .pharmsci__product-title { white-space: normal; overflow: visible; text-overflow: clip; }
  /* 카드에서는 색 · 모양 · 앞면 · 뒷면을 한 줄로 흘린다. 항목마다 줄을 쓰면 카드가 네 줄 더 길어진다. */
  .pharmsci .pharmsci__table.pd-table--list .pharmsci__appearance { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--pd-space-1); }
  .pharmsci .pharmsci__table.pd-table--list .pharmsci__appearance dd { margin-inline-end: var(--pd-space-3); }
  .pharmsci .pharmsci__table.pd-table--list .pd-list-meta .pharmsci__blank { display: none; }
}

/* 휴대폰 폭에서는 오른쪽 급여 칸이 제품명 폭을 빼앗아 「레피졸정15m / g」처럼 끊겼다(2026-09-24 캡처).
   급여 배지 · 상한가 · 적용일을 제품명 아래 한 줄로 내린다. */
@media (max-width: 640px) {
  .pharmsci .pharmsci__table.pd-table--list tbody tr { grid-template-columns: minmax(0, 1fr); }
  .pharmsci .pharmsci__table.pd-table--list .pd-list-aside { grid-column: 1; grid-row: 2; justify-self: start; }
  .pharmsci .pharmsci__table.pd-table--list .pharmsci__reimbursement { display: flex; flex-wrap: wrap; align-items: center; justify-items: start; gap: var(--pd-space-1) var(--pd-space-2); text-align: start; }
}

/* PILLDOC-2321: 약리·물성·구조·유사 성분 탭 개선 */
.pharmsci .pharmsci__sim-grid { stroke: var(--pd-border); stroke-width: 1px; }
/* 휴대폰에서 표적 표는 세 칸이 들어가지 않아 측정 건수가 잘렸다. 결합 세기가 핵심이라 측정 건수 칸을 뺀다. */
@media (max-width: 640px) {
  .pharmsci .pharmsci__target-table th:nth-child(3), .pharmsci .pharmsci__target-table td:nth-child(3) { display: none; }
}
/* 모체 행에 붙인 염 형태 목록은 이름(밑줄 링크 모양)과 구분되는 보조 줄이다. */
.pharmsci .pharmsci__sim-salts { display: block; margin-top: var(--pd-space-1); font-weight: var(--pd-weight-regular); text-decoration: none; }
.pharmsci [data-sim4-torsion-curve] .pharmsci__sim-spectrum-svg { height: auto; max-height: 220px; }
.pharmsci .pharmsci__egg-grid { stroke: var(--pd-border); stroke-width: 1px; }
.pharmsci .pharmsci__egg-tick { fill: var(--pd-text-muted); font-size: 12px; }
.pharmsci .pharmsci__egg-label { fill: var(--pd-text); font-size: 12px; font-weight: var(--pd-weight-semibold); }
.pharmsci .pharmsci__pharm-pchembl { display: grid; gap: 1px; }
.pharmsci .pharmsci__pharm-conc { color: var(--pd-text-muted); font-size: 12px; }
.pharmsci .pharmsci__pharm-bar { display: block; height: 6px; max-width: 80px; margin-top: var(--pd-space-1); margin-inline-start: auto; background: var(--pd-chart-1); border-radius: var(--pd-radius-pill); }
.pharmsci .pharmsci__rule-detail { margin: 0; color: var(--pd-text); font-size: 13px; }
.pharmsci .pharmsci__rule-criteria { margin: 0; color: var(--pd-text-muted); font-size: 12px; }
.pharmsci .pharmsci__fg-desc { margin: var(--pd-space-2) 0 0; color: var(--pd-text-muted); word-break: keep-all; white-space: pre-line; }
/* 입체 구조 절은 지표가 둘뿐이다. 넉 칸 격자를 그대로 두면 빈 두 칸이 회색 상자로 보였다(2026-09-24 캡처). */
.pharmsci [data-topic-functional-groups] .pharmsci__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 360px; }
/* 이 카드 안의 빈 결과(입체중심 없음 등)는 큰 빈 상태가 아니라 조용한 한 줄로 둔다. */
/* 주제 다섯 모두 「자료 없음」은 큰 상자 대신 조용한 한 줄이다. (약리의 「결합 구조 자료 없음」이 큰 빈 상자였다) */
.pharmsci [data-molecule-topic-body] .pd-empty:not(.is-loading) { align-items: flex-start; padding: var(--pd-space-2) 0; font-size: 13px; color: var(--pd-text-muted); text-align: start; }
.pharmsci .pharmsci__sim-pct { white-space: nowrap; }

/* ── 성분 3D·약리 주제 다섯 배치 정리 (R63, 2026-09-24) ──
   주제 본문은 확대 카드(pd-card) 안에 있는데 주제마다 다시 pd-card 로 감싸 상자 안 상자가 됐다(디자인 지침 7장:
   카드는 위계가 있을 때만). 안쪽 카드는 테두리 · 배경 · 안쪽 여백을 빼고, 절은 여백과 구분선으로 가른다. */
.pharmsci [data-molecule-topic-body] .pd-card { border: 0; border-radius: 0; box-shadow: none; background: var(--pd-surface); }
.pharmsci [data-molecule-topic-body] .pd-card__body { padding: 0; }
/* 보이는 절 사이에만 선을 둔다. 「section + section」은 숨은 절 뒤의 선을 지웠고, 평탄화 규칙에 밀려 시뮬레이션 절에는 선이 없었다. */
.pharmsci [data-molecule-topic-body] section:not([hidden]) ~ section:not([hidden]),
.pharmsci [data-molecule-topic-body] .pharmsci__charge-section,
.pharmsci [data-molecule-topic-body] .pharmsci__structure-forms {
  margin-top: var(--pd-space-6);
  padding-top: var(--pd-space-5);
  border-top: 1px solid var(--pd-border);
}
.pharmsci [data-molecule-topic-body] .pd-card__title { margin: 0 0 var(--pd-space-2); }
.pharmsci [data-molecule-topic-body] .pd-btn-row > .pd-card__title { margin: 0; }
/* 탭 맨 위 한 줄 답. 본문(14px)보다 한 단계 크게, 굵게 */
.pharmsci .pharmsci__takeaway { margin: var(--pd-space-2) 0 var(--pd-space-4); font-size: 15px; font-weight: var(--pd-weight-semibold); color: var(--pd-text); word-break: keep-all; }
/* 접기 단추(원자료 보기 등)는 글 줄처럼 읽히는 토글이다. 안쪽 여백만큼 글자가 본문 왼쪽 선에서 들어가 보여 여백을 뺀다. */
.pharmsci [data-molecule-topic-body] details > summary.pd-btn--ghost,
.pharmsci [data-molecule-topic-body] .pd-btn-row > .pd-btn--ghost:first-child { padding-inline: 0; }
/* 전하 지도: 칸 폭을 다 채우던 그림 · 색 막대를 읽기 좋은 크기로 */
.pharmsci [data-molecule-charge-map] canvas { display: block; width: 100%; max-width: calc(var(--pd-space-20) * 5 + var(--pd-space-5)); height: auto; margin-inline: auto; }
.pharmsci [data-charge-scale] { display: block; width: min(100%, calc(var(--pd-space-20) * 3)); height: var(--pd-space-2); margin: var(--pd-space-2) 0 var(--pd-space-1); border-radius: var(--pd-radius-sm); }
/* HOMO · LUMO 값이 둘만 있으면 4칸 격자의 나머지가 회색 빈 칸으로 남았다. 있는 칸만 폭을 나눈다. */
.pharmsci [data-homo-lumo-metrics] { grid-template-columns: repeat(auto-fit, minmax(calc(var(--pd-space-16) * 2), 1fr)); }
/* 유사 성분 구조 그림: 160px 이 행을 높게 벌려 한 화면에 3줄만 보였다 */
.pharmsci .pharmsci__sim-table .pharmsci__sim-thumb { max-width: calc(var(--pd-space-20) + var(--pd-space-6)); }
/* 진동 스펙트럼 축 숫자(그림 밖 한 줄) */
.pharmsci .pharmsci__sim-vib-axis { display: flex; justify-content: space-between; margin-top: var(--pd-space-1); color: var(--pd-text-muted); font-variant-numeric: tabular-nums; }
.pharmsci .pharmsci__sim-vib-axis[hidden] { display: none; }
/* 진동 영역 범례: 차트색 글자는 흰 바탕에서 대비가 1.8~2.8 이었다. 글자는 본문색, 영역 색은 앞 색견본으로 */
.pharmsci [data-pharmsci-simulation] [data-sim4-vib-legend] .pd-badge[data-region] { color: var(--pd-text-secondary); gap: var(--pd-space-1); }
.pharmsci [data-pharmsci-simulation] [data-sim4-vib-legend] .pd-badge[data-region]::before { content: ""; width: var(--pd-space-2); height: var(--pd-space-2); border-radius: var(--pd-radius-sm); }
.pharmsci [data-pharmsci-simulation] [data-sim4-vib-legend] .pd-badge[data-region="0"]::before { background: var(--pd-chart-1); }
.pharmsci [data-pharmsci-simulation] [data-sim4-vib-legend] .pd-badge[data-region="1"]::before { background: var(--pd-chart-2); }
.pharmsci [data-pharmsci-simulation] [data-sim4-vib-legend] .pd-badge[data-region="2"]::before { background: var(--pd-chart-3); }
.pharmsci [data-pharmsci-simulation] [data-sim4-vib-legend] .pd-badge[data-region="3"]::before { background: var(--pd-chart-4); }
.pharmsci [data-pharmsci-simulation] [data-sim4-vib-legend] .pd-badge[data-region="4"]::before { background: var(--pd-chart-5); }
.pharmsci [data-pharmsci-simulation] [data-sim4-vib-legend] .pd-badge[data-region="5"]::before { background: var(--pd-chart-6); }
/* 숫자 칸은 줄을 바꾸지 않는다(390px 에서 「804.0 / 3」으로 끊겼다) */
.pharmsci [data-molecule-topic-body] td[data-numeric] { white-space: nowrap; }
/* 약물 친화 범위 표: 이름 · 값 · 범위 세 열을 고정 폭으로 나눠 값과 범위가 붙지 않게 한다.
   범위는 하한 · 「~」 · 상한 세 칸 격자라 줄마다 소수점과 물결이 같은 자리다. */
.pharmsci .pharmsci__radar-table { table-layout: fixed; }
.pharmsci .pharmsci__radar-table th:nth-child(1), .pharmsci .pharmsci__radar-table td:nth-child(1) { width: 40%; text-align: start; }
.pharmsci .pharmsci__radar-table th:nth-child(2), .pharmsci .pharmsci__radar-table td:nth-child(2) { width: 20%; }
.pharmsci .pharmsci__radar-table th:nth-child(3), .pharmsci .pharmsci__radar-table td:nth-child(3) { width: 40%; text-align: center; }
.pharmsci .pharmsci__range {
  display: inline-grid;
  grid-template-columns: 7ch auto 7ch;
  column-gap: var(--pd-space-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pharmsci .pharmsci__range > span { text-align: end; }
.pharmsci .pharmsci__range > span:nth-child(2) { color: var(--pd-text-muted); text-align: center; }
/* 폰(390px)에서는 범위가 칸 밖으로 넘쳤다. 이름 열을 줄이고 범위 격자를 좁힌다(150.00 이 여섯 글자). */
@media (max-width: 640px) {
  .pharmsci .pharmsci__radar-table th:nth-child(1), .pharmsci .pharmsci__radar-table td:nth-child(1) { width: 34%; }
  .pharmsci .pharmsci__radar-table th:nth-child(2), .pharmsci .pharmsci__radar-table td:nth-child(2) { width: 20%; }
  .pharmsci .pharmsci__radar-table th:nth-child(3), .pharmsci .pharmsci__radar-table td:nth-child(3) { width: 46%; }
  .pharmsci .pharmsci__range { grid-template-columns: 6ch auto 6ch; column-gap: var(--pd-space-1); }
}
/* 숫자 칸 머리글도 숫자와 같은 오른쪽에 둔다. 위의 thead th 가운데 정렬이 더 강해 머리글만 가운데에 떠 있었다(R68). */
.pharmsci .pd-table thead th[data-numeric] { text-align: end; }
/* 계산 물성 12칸은 폰에서 두 칸씩(세 칸이면 이름표가 세 줄로 접혔다) */
@media (max-width: 640px) {
  .pharmsci [data-molecule-topic-body] [data-prop-descriptors] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ── 성분 주제 다섯 다듬기 (R67, 2026-09-25, 약 110종 실측) ── */
/* 탭 줄 바로 밑에 기준일 줄이 붙어 있었다. 탭과 본문 사이를 띄운다. */
.pharmsci [data-molecule-topic-body] { padding-top: var(--pd-space-3); }
/* 구조 없는 성분: 물성 · 구조 · 유사 성분 틀을 숨기고 이유 한 줄만. 약리 탭에서는 한 줄도 숨긴다. */
.pharmsci [data-molecule-structureless] { display: none; }
.pharmsci [data-structureless] > [data-molecule-structureless] { display: block; margin: 0; }
.pharmsci [data-structureless][data-topic-current="pharm"] > [data-molecule-structureless] { display: none; }
.pharmsci [data-structureless] > [data-molecule-topic-panel="prop"],
.pharmsci [data-structureless] > [data-molecule-topic-panel="fg"],
.pharmsci [data-structureless] > [data-molecule-topic-panel="sim"],
.pharmsci [data-structureless] > [data-molecule-charge-topic] { display: none; }
/* 위 절(HOMO · LUMO · 이온화)과 같은 간격(24px)을 두고 띄운다 */
.pharmsci .pharmsci__charge-table { margin-top: var(--pd-space-6); }
/* 표 안 접기 단추(상온 비율 0% 형태 보기)는 칸 안쪽 여백에 단추 여백까지 더해 한 칸 들어가 보였다 */
.pharmsci .pharmsci__row-toggle { padding-inline: 0; }
/* 활성 표 · 결합 구조 표는 칸이 넷 · 다섯이라 390px 에서 표적 이름이 한 글자씩 끊겼다(「BG / C- / 823」).
   좁은 폭에서는 읽을 수 있는 최소 폭을 주고 표 상자 안에서 가로로 민다. */
@media (max-width: 640px) {
  .pharmsci [data-molecule-topic-body] .pharmsci__wide-table { min-width: calc(var(--pd-space-16) * 9); }
}

/* 형태 분포: 테두리 상자 안 한쪽 끝에 가는 막대가 붙은 타일이었다. 같은 바닥선에 선 막대 그래프로 바꾼다(R68).
   막대 위가 높을수록 상온에서 많은 형태, 아래 숫자는 상대 에너지와 형태 번호. 누르면 3D 가 그 형태로 바뀌는 동작은 그대로. */
.pharmsci .pharmsci__sim-bars { align-items: flex-end; flex-wrap: nowrap; overflow-x: auto; gap: var(--pd-space-1); min-height: 0; padding-bottom: var(--pd-space-1); border-bottom: 1px solid var(--pd-border); }
.pharmsci .pharmsci__sim-bar {
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-width: var(--pd-space-12);
  height: auto;
  padding: var(--pd-space-1);
  gap: var(--pd-space-1);
  border-color: var(--pd-surface);
  background: var(--pd-surface);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.pharmsci .pharmsci__sim-bar:hover { background: var(--pd-surface-sunken); }
.pharmsci .pharmsci__sim-bar[aria-pressed="true"] { border-color: var(--pd-border-strong); box-shadow: none; }
.pharmsci .pharmsci__sim-bar .pharmsci__sim-bar-fill { order: -1; width: var(--pd-space-6); height: calc(var(--pd-space-16) * var(--sim-bar-ratio, 0.04)); min-height: 2px; }
.pharmsci .pharmsci__sim-bar > span:last-child { color: var(--pd-text-muted); }
/* 결합 회전 곡선 위 현재 각도 */
.pharmsci .pharmsci__sim-cursor { stroke: var(--pd-text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.pharmsci .pharmsci__sim-cursor-dot { fill: var(--pd-chart-1); stroke: var(--pd-surface); stroke-width: 2; }
/* 폰에서 여섯째 막대가 둘째 줄로 내려가 바닥선이 끊겼다. 한 줄을 유지하고 막대 폭을 줄인다. 많으면 옆으로 민다.
   위 데스크톱 규칙보다 뒤에 둬야 적용된다. */
@media (max-width: 640px) {
  .pharmsci .pharmsci__sim-bar { min-width: var(--pd-space-10); }
  /* 유사 성분 표는 폰에서 카드로 풀린다. 카드 안 숫자는 오른쪽이 아니라 이름 밑 왼쪽 선에 둔다. */
  .pharmsci .pharmsci__sim-table td[data-numeric] { text-align: start; }
}

/* 결합 구조 판정 칸: 판정 문구와 수집 상태 배지를 줄마다 하나씩 */
.pharmsci .pharmsci__verdict-cell { display: grid; justify-items: start; gap: var(--pd-space-1); }

/* 첫 화면 검색창 아래(PILLDOC-2667, R122 · 시안 06-2). 회원은 우리 약국 처방 많은 약, 비회원은 한 약으로 보는 다섯 장면. */
/* 회원: 약은 세로로 한 줄씩, 정보는 가로로. 숫자 열은 오른쪽 정렬(지침 6). */
.pharmsci .pharmsci__top { display: grid; gap: var(--pd-space-4); margin-top: var(--pd-space-3); padding: var(--pd-space-6); }
.pharmsci .pharmsci__top-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--pd-space-2) var(--pd-space-4); }
.pharmsci .pharmsci__top-lead { display: grid; gap: var(--pd-space-1); }
.pharmsci .pharmsci__top-lead h2,
.pharmsci .pharmsci__top-lead p { margin: 0; word-break: keep-all; }
.pharmsci .pharmsci__top-link { font-weight: var(--pd-weight-semibold); color: var(--pd-accent); white-space: nowrap; text-decoration: underline; text-underline-offset: var(--pd-space-1); }
.pharmsci .pharmsci__top-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--pd-border); border-radius: var(--pd-radius-lg); overflow: hidden; }
.pharmsci .pharmsci__top-row {
  display: grid;
  grid-template-columns: var(--pd-space-10) var(--pd-space-16) minmax(0, 2.4fr) minmax(0, 1.3fr) 6rem 5.5rem 5rem 8.5rem 13.5rem;
  align-items: center;
  gap: var(--pd-space-3);
  padding: var(--pd-space-3) var(--pd-space-4);
  border-top: 1px solid var(--pd-border);
}
.pharmsci .pharmsci__top-row:first-child { border-top: 0; }
.pharmsci .pharmsci__top-row:not(.pharmsci__top-row--head):hover { background: var(--pd-surface-sunken); }
.pharmsci .pharmsci__top-row--head { padding-block: var(--pd-space-2); background: var(--pd-surface-sunken); color: var(--pd-text-muted); font-size: 0.8125em; font-weight: var(--pd-weight-semibold); }
.pharmsci .pharmsci__top-row--head .pharmsci__top-cnt,
.pharmsci .pharmsci__top-row--head .pharmsci__top-price,
.pharmsci .pharmsci__top-row--head .pharmsci__top-same,
.pharmsci .pharmsci__top-row--head .pharmsci__top-jump { text-align: right; }
.pharmsci .pharmsci__rank { display: inline-grid; place-items: center; min-width: var(--pd-space-6); height: var(--pd-space-6); padding-inline: var(--pd-space-1); border-radius: var(--pd-radius-pill); background: var(--pd-ink-100); color: var(--pd-text-secondary); font-weight: var(--pd-weight-bold); font-variant-numeric: tabular-nums; }
.pharmsci .pharmsci__rank--top { background: var(--pd-ink-900); color: var(--pd-surface); }
.pharmsci .pharmsci__pill-figure--row { width: var(--pd-space-16); height: var(--pd-space-10); }
/* 줄 높이가 낮아 사진이 칸을 넘지 않게 칸 안에서 줄인다(grid 의 height:100% 는 칸 높이가 아니라 사진 크기로 풀린다). */
.pharmsci .pharmsci__pill-figure--row { display: flex; align-items: center; justify-content: center; }
.pharmsci .pharmsci__pill-figure--row .pharmsci__pill-image { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.pharmsci .pharmsci__top-name { display: grid; gap: var(--pd-space-1); min-width: 0; color: var(--pd-text); text-decoration: none; }
.pharmsci .pharmsci__top-drug { font-weight: var(--pd-weight-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pharmsci .pharmsci__top-ingredient { color: var(--pd-text-secondary); font-size: 0.875em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pharmsci .pharmsci__top-name:hover .pharmsci__top-drug,
.pharmsci .pharmsci__top-name:focus-visible .pharmsci__top-drug { color: var(--pd-accent); text-decoration: underline; text-underline-offset: var(--pd-space-1); }
.pharmsci .pharmsci__top-maker { display: grid; gap: var(--pd-space-1); min-width: 0; color: var(--pd-text-muted); font-size: 0.875em; }
.pharmsci .pharmsci__top-maker-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pharmsci .pharmsci__top-badges { display: flex; flex-wrap: wrap; gap: var(--pd-space-1); }
.pharmsci .pharmsci__top-cnt,
.pharmsci .pharmsci__top-price,
.pharmsci .pharmsci__top-same { text-align: right; }
.pharmsci .pharmsci__top-cnt b,
.pharmsci .pharmsci__top-price b { color: var(--pd-text); }
.pharmsci .pharmsci__top-cnt small { display: block; color: var(--pd-text-muted); }
.pharmsci .pharmsci__top-permit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pd-space-1); color: var(--pd-text-muted); font-size: 0.875em; }
.pharmsci .pharmsci__top-recent { color: var(--pd-warning-on-subtle); font-weight: var(--pd-weight-bold); }
.pharmsci .pharmsci__top-jump { display: flex; justify-content: flex-end; gap: var(--pd-space-1); }
.pharmsci .pharmsci__top-jump a { padding: var(--pd-space-1) var(--pd-space-2); border: 1px solid var(--pd-border); border-radius: var(--pd-radius-sm); font-size: 0.875em; font-weight: var(--pd-weight-semibold); color: var(--pd-accent); white-space: nowrap; text-decoration: none; }
.pharmsci .pharmsci__top-jump a:hover,
.pharmsci .pharmsci__top-jump a:focus-visible { border-color: var(--pd-accent); }
.pharmsci .pharmsci__top-foot { margin: 0; }
@media (max-width: 1180px) {
  .pharmsci .pharmsci__top-row { grid-template-columns: var(--pd-space-8) var(--pd-space-12) minmax(0, 2fr) minmax(0, 1.2fr) 5.5rem 5rem 4.5rem 8rem; }
  .pharmsci .pharmsci__top-row .pharmsci__top-jump { display: none; }
}
/* 좁은 화면: 한 줄을 두 단으로 — 위는 순위 · 사진 · 약, 아래는 값 네 칸과 바로 가기. 판단에 필요한 열을 감추지 않는다(지침 6). */
@media (max-width: 900px) {
  .pharmsci .pharmsci__top { padding: var(--pd-space-4); }
  .pharmsci .pharmsci__top-row--head { display: none; }
  .pharmsci .pharmsci__top-row {
    grid-template-columns: var(--pd-space-6) var(--pd-space-12) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "no ph name name" "no ph maker maker" "cnt cnt price same" "permit permit permit permit" "jump jump jump jump";
    gap: var(--pd-space-1) var(--pd-space-3);
    padding: var(--pd-space-3);
  }
  .pharmsci .pharmsci__top-row .pharmsci__top-jump { display: flex; }
  .pharmsci .pharmsci__top-no { grid-area: no; align-self: start; }
  .pharmsci .pharmsci__top-ph { grid-area: ph; align-self: start; }
  .pharmsci .pharmsci__pill-figure--row { width: var(--pd-space-12); height: var(--pd-space-12); }
  .pharmsci .pharmsci__top-name { grid-area: name; }
  .pharmsci .pharmsci__top-drug,
  .pharmsci .pharmsci__top-ingredient { white-space: normal; }
  .pharmsci .pharmsci__top-maker { grid-area: maker; grid-template-columns: auto 1fr; align-items: center; gap: var(--pd-space-2); }
  .pharmsci .pharmsci__top-cnt { grid-area: cnt; }
  .pharmsci .pharmsci__top-price { grid-area: price; }
  .pharmsci .pharmsci__top-same { grid-area: same; }
  .pharmsci .pharmsci__top-permit { grid-area: permit; }
  .pharmsci .pharmsci__top-cnt,
  .pharmsci .pharmsci__top-price,
  .pharmsci .pharmsci__top-same { margin-top: var(--pd-space-2); padding-top: var(--pd-space-2); border-top: 1px dashed var(--pd-border); text-align: left; }
  .pharmsci .pharmsci__top-cnt::before,
  .pharmsci .pharmsci__top-price::before,
  .pharmsci .pharmsci__top-same::before,
  .pharmsci .pharmsci__top-permit::before { content: attr(data-label); display: block; color: var(--pd-text-muted); font-size: 0.8125em; font-weight: var(--pd-weight-medium); }
  .pharmsci .pharmsci__top-permit::before { display: inline; margin-right: var(--pd-space-1); }
  .pharmsci .pharmsci__top-jump { grid-area: jump; margin-top: var(--pd-space-2); }
  .pharmsci .pharmsci__top-jump a { flex: 1; text-align: center; padding-block: var(--pd-space-2); }
}

@media (max-width: 640px) {
  .pharmsci .pharmsci__top { padding: var(--pd-space-3); }
}
/* 비회원: 한 약으로 보는 다섯 장면(시안 06 이야기 스크롤형). 장면마다 왼쪽은 큰 문장과 실제 값 하나, 오른쪽은 회색 판 위의 실제 자료 조각. */
.pharmsci .pharmsci__story { margin-top: var(--pd-space-3); padding: 0; }
.pharmsci .pharmsci__story-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--pd-space-4) var(--pd-space-8); padding: var(--pd-space-8) var(--pd-space-10) var(--pd-space-8); border-bottom: 1px solid var(--pd-ink-100); }
.pharmsci .pharmsci__story-eyebrow { margin: 0; font-size: 0.8125rem; font-weight: var(--pd-weight-bold); color: var(--pd-mint-600); letter-spacing: 0.02em; }
.pharmsci .pharmsci__story-title { margin: var(--pd-space-1) 0 0; font-size: 1.75rem; line-height: 1.35; letter-spacing: -0.02em; font-weight: var(--pd-weight-bold); color: var(--pd-text); word-break: keep-all; }
.pharmsci .pharmsci__story-lead { margin: var(--pd-space-2) 0 0; font-size: 0.9375rem; color: var(--pd-text-secondary); word-break: keep-all; }
.pharmsci .pharmsci__story-toc { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pd-space-2); }
.pharmsci .pharmsci__story-toc a { display: inline-flex; align-items: center; gap: var(--pd-space-2); padding: var(--pd-space-1) var(--pd-space-3); border: 1px solid var(--pd-border); border-radius: var(--pd-radius-pill); background: var(--pd-surface); color: var(--pd-text-secondary); font-size: 0.8125rem; text-decoration: none; white-space: nowrap; }
.pharmsci .pharmsci__story-toc a b { font-size: 0.6875rem; color: var(--pd-mint-600); font-variant-numeric: tabular-nums; }
.pharmsci .pharmsci__story-toc a:hover,
.pharmsci .pharmsci__story-toc a:focus-visible { border-color: var(--pd-mint-300); color: var(--pd-text); }

.pharmsci .pharmsci__story-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--pd-space-16); }
.pharmsci .pharmsci__scene { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--pd-space-12); padding: var(--pd-space-16) 0 var(--pd-space-16) var(--pd-space-10); }
.pharmsci .pharmsci__scene + .pharmsci__scene { border-top: 1px solid var(--pd-ink-100); }
.pharmsci .pharmsci__scene-copy { min-width: 0; }
.pharmsci .pharmsci__scene-num { display: inline-flex; align-items: center; gap: var(--pd-space-2); font-size: 0.8125rem; font-weight: var(--pd-weight-semibold); color: var(--pd-text-muted); }
.pharmsci .pharmsci__scene-num i { display: inline-grid; place-items: center; width: var(--pd-space-6); height: var(--pd-space-6); border-radius: var(--pd-radius-pill); background: var(--pd-mint-50); color: var(--pd-mint-700); font-size: 0.75rem; font-style: normal; font-weight: var(--pd-weight-bold); }
.pharmsci .pharmsci__scene-title { margin: var(--pd-space-3) 0 0; font-size: 1.875rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: var(--pd-weight-bold); color: var(--pd-text); word-break: keep-all; }
.pharmsci .pharmsci__scene-text { max-width: 25rem; margin: var(--pd-space-3) 0 0; font-size: 0.9375rem; line-height: 1.65; color: var(--pd-text-secondary); word-break: keep-all; }
.pharmsci .pharmsci__scene-fact { max-width: 25rem; margin-top: var(--pd-space-6); padding-top: var(--pd-space-4); border-top: 2px solid var(--pd-ink-900); }
.pharmsci .pharmsci__scene-value { display: block; font-size: 2.5rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--pd-mint-700); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pharmsci .pharmsci__scene-value small { margin-left: var(--pd-space-1); font-size: 1.125rem; font-weight: var(--pd-weight-bold); color: var(--pd-mint-600); }
.pharmsci .pharmsci__scene-value--long { font-size: 1.875rem; }
.pharmsci .pharmsci__scene-key { display: block; margin-top: var(--pd-space-1); font-size: 0.8125rem; color: var(--pd-text-muted); }
.pharmsci .pharmsci__scene-where { display: flex; align-items: center; gap: var(--pd-space-2); margin: var(--pd-space-4) 0 0; font-size: 0.8125rem; color: var(--pd-text-secondary); }
.pharmsci .pharmsci__scene-where .pd-icon { width: 0.875rem; height: 0.875rem; color: var(--pd-ink-400); }

.pharmsci .pharmsci__scene-view { min-width: 0; padding: var(--pd-space-6); border: 1px solid var(--pd-ink-100); border-radius: var(--pd-radius-lg); background: var(--pd-ink-50); }
.pharmsci .pharmsci__frag { overflow: hidden; border: 1px solid var(--pd-border); border-radius: var(--pd-radius-lg); background: var(--pd-surface); box-shadow: var(--pd-shadow-lg); }
.pharmsci .pharmsci__frag-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pd-space-2); padding: var(--pd-space-2) var(--pd-space-4); border-bottom: 1px solid var(--pd-ink-100); font-size: 0.75rem; color: var(--pd-text-muted); }
.pharmsci .pharmsci__frag-bar b { font-size: 0.8125rem; color: var(--pd-text); }
.pharmsci .pharmsci__frag-side { margin-left: auto; }
.pharmsci .pharmsci__frag-body { padding: var(--pd-space-5); }
.pharmsci .pharmsci__frag-tabs { display: flex; gap: var(--pd-space-1); overflow: hidden; padding: 0 var(--pd-space-3); border-bottom: 1px solid var(--pd-border); }
.pharmsci .pharmsci__frag-tabs span { padding: var(--pd-space-3) var(--pd-space-2) var(--pd-space-2); border-bottom: 2px solid var(--pd-surface); font-size: 0.8125rem; color: var(--pd-text-muted); white-space: nowrap; }
.pharmsci .pharmsci__frag-tabs .is-on { border-bottom-color: var(--pd-mint-400); color: var(--pd-text); font-weight: var(--pd-weight-bold); }
.pharmsci .pharmsci__frag-more { display: flex; justify-content: space-between; gap: var(--pd-space-3); padding: var(--pd-space-3) var(--pd-space-5); border-top: 1px solid var(--pd-ink-100); background: var(--pd-ink-50); font-size: 0.8125rem; color: var(--pd-text-muted); }

/* 장면 1 약품 카드 */
.pharmsci .pharmsci__idc { display: grid; grid-template-columns: 8.25rem minmax(0, 1fr); gap: var(--pd-space-5); }
.pharmsci .pharmsci__idc-ph { width: 8.25rem; height: 8.25rem; border-radius: var(--pd-radius-lg); }
.pharmsci .pharmsci__idc-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pd-space-2); }
.pharmsci .pharmsci__idc-title b { margin-right: var(--pd-space-1); font-size: 1.1875rem; color: var(--pd-text); }
.pharmsci .pharmsci__idc-ingredient { margin: var(--pd-space-1) 0 0; font-size: 0.8125rem; color: var(--pd-text-secondary); }
.pharmsci .pharmsci__idc-marks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pd-space-2); margin-top: var(--pd-space-3); }
.pharmsci .pharmsci__idc-marks div { display: grid; gap: var(--pd-space-1); padding: var(--pd-space-2) var(--pd-space-3); border: 1px solid var(--pd-ink-100); border-radius: var(--pd-radius-md); background: var(--pd-ink-50); }
.pharmsci .pharmsci__idc-marks span { font-size: 0.6875rem; color: var(--pd-text-muted); }
.pharmsci .pharmsci__idc-marks b { font-size: 0.8125rem; color: var(--pd-text); overflow-wrap: anywhere; }
.pharmsci .pharmsci__idc-marks .is-key { border-color: var(--pd-mint-200); background: var(--pd-mint-50); }
.pharmsci .pharmsci__idc-kv { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 4.5rem minmax(0, 1fr)); gap: var(--pd-space-2) var(--pd-space-3); margin: 0; padding-top: var(--pd-space-4); border-top: 1px dashed var(--pd-ink-200); font-size: 0.8125rem; }
.pharmsci .pharmsci__idc-kv dt { color: var(--pd-text-muted); }
.pharmsci .pharmsci__idc-kv dd { margin: 0; color: var(--pd-text); }

/* 장면 2 · 3 허가 원문 */
.pharmsci .pharmsci__doctext { font-size: 0.84375rem; line-height: 1.7; color: var(--pd-ink-800); }
.pharmsci .pharmsci__doctext h4 { margin: 0 0 var(--pd-space-2); font-size: 0.875rem; color: var(--pd-text); }
.pharmsci .pharmsci__doctext h4 + .pd-prose,
.pharmsci .pharmsci__doctext .pd-prose + h4 { margin-top: var(--pd-space-1); }
.pharmsci .pharmsci__doctext p { margin: 0; }
.pharmsci .pharmsci__doctext .pd-prose { margin-bottom: var(--pd-space-4); }
.pharmsci .pharmsci__doctext--clamp { max-height: 17rem; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent); mask-image: linear-gradient(to bottom, black 75%, transparent); }

/* 장면 4 제품표 */
.pharmsci .pharmsci__ptable { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.pharmsci .pharmsci__ptable th,
.pharmsci .pharmsci__ptable td { padding: var(--pd-space-2) var(--pd-space-3); border-bottom: 1px solid var(--pd-ink-100); text-align: left; white-space: nowrap; }
.pharmsci .pharmsci__ptable th { background: var(--pd-ink-50); color: var(--pd-text-secondary); font-size: 0.75rem; font-weight: var(--pd-weight-semibold); }
.pharmsci .pharmsci__ptable tr.is-base td { background: var(--pd-mint-50); }
.pharmsci .pharmsci__ptable tr.is-base td:first-child { border-left: 3px solid var(--pd-mint-400); }
.pharmsci .pharmsci__ptable-maker { display: none; }

/* 장면 5 성분 */
.pharmsci .pharmsci__mol-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pd-space-2); }
.pharmsci .pharmsci__mol-stats div { display: grid; gap: var(--pd-space-1); padding: var(--pd-space-3); border: 1px solid var(--pd-ink-100); border-radius: var(--pd-radius-md); }
.pharmsci .pharmsci__mol-stats b { font-size: 1.1875rem; color: var(--pd-text); }
.pharmsci .pharmsci__mol-stats small { margin-left: var(--pd-space-1); font-size: 0.75rem; font-weight: var(--pd-weight-semibold); color: var(--pd-text-muted); }
.pharmsci .pharmsci__mol-stats span { font-size: 0.75rem; color: var(--pd-text-muted); }
.pharmsci .pharmsci__mol-topics { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--pd-space-2) var(--pd-space-3); margin: var(--pd-space-4) 0 0; padding-top: var(--pd-space-3); border-top: 1px dashed var(--pd-ink-200); font-size: 0.8125rem; }
.pharmsci .pharmsci__mol-topics dt { color: var(--pd-text-muted); }
.pharmsci .pharmsci__mol-topics dd { margin: 0; color: var(--pd-text); }

/* 진행 점: 장면 열 옆에 붙어 화면을 따라온다(sticky). 지금 장면은 민트로 채운다. */
.pharmsci .pharmsci__story-rail { position: sticky; top: var(--pharmsci-sticky-top); align-self: start; display: flex; flex-direction: column; align-items: center; gap: var(--pd-space-5); padding: var(--pd-space-16) 0; }
.pharmsci .pharmsci__story-rail a { position: relative; width: 0.875rem; height: 0.875rem; border: 2px solid var(--pd-ink-300); border-radius: var(--pd-radius-pill); background: var(--pd-surface); transition: transform 0.2s, background-color 0.2s, border-color 0.2s; }
.pharmsci .pharmsci__story-rail a.is-done { border-color: var(--pd-mint-400); }
.pharmsci .pharmsci__story-rail a[aria-current="step"] { transform: scale(1.25); border-color: var(--pd-mint-400); background: var(--pd-mint-400); box-shadow: var(--pd-focus-ring); }
.pharmsci .pharmsci__story-rail a::after { content: attr(data-name); position: absolute; top: 50%; right: 1.375rem; transform: translateY(-50%); padding: var(--pd-space-1) var(--pd-space-2); border-radius: var(--pd-radius-sm); background: var(--pd-ink-900); color: var(--pd-surface); font-size: 0.75rem; font-weight: var(--pd-weight-semibold); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.pharmsci .pharmsci__story-rail a:hover::after,
.pharmsci .pharmsci__story-rail a:focus-visible::after { opacity: 1; }

/* 마무리: 같은 카드 안에서 바탕 톤만 바꾼 띠(디자인 지침 2 테마 잠금). 행동은 기존 미리보기와 같은 텍스트 링크(R113). */
.pharmsci .pharmsci__story-finale { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pd-space-4) var(--pd-space-8); padding: var(--pd-space-6) var(--pd-space-10); border-top: 1px solid var(--pd-border); border-radius: 0 0 var(--pd-radius-lg) var(--pd-radius-lg); background: var(--pd-surface-sunken); }
.pharmsci .pharmsci__story-finale-lead { display: grid; gap: var(--pd-space-1); }
.pharmsci .pharmsci__story-finale-lead h3,
.pharmsci .pharmsci__story-finale-lead p { margin: 0; word-break: keep-all; }
.pharmsci .pharmsci__story-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pd-space-2) var(--pd-space-5); }
.pharmsci .pharmsci__story-signup { color: var(--pd-text-secondary); font-weight: var(--pd-weight-medium); text-decoration: underline; text-underline-offset: var(--pd-space-1); }
.pharmsci .pharmsci__story-signup:hover,
.pharmsci .pharmsci__story-signup:focus-visible { color: var(--pd-text); }

/* 나타나기: 내용은 기본으로 보이고, 스크립트가 붙은 뒤 화면에 들어올 때만 짧게 움직인다(시작도 투명 0 이 아니다). */
.pharmsci .pharmsci__story.is-animated .pharmsci__rv { opacity: 0.3; transform: translateY(1.125rem); transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pharmsci .pharmsci__story.is-animated .pharmsci__rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pharmsci .pharmsci__story.is-animated .pharmsci__rv { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1024px) {
  .pharmsci .pharmsci__story-head { grid-template-columns: minmax(0, 1fr); }
  .pharmsci .pharmsci__story-toc { justify-content: flex-start; }
  .pharmsci .pharmsci__scene { grid-template-columns: minmax(0, 1fr); gap: var(--pd-space-6); padding: var(--pd-space-12) var(--pd-space-8); }
  .pharmsci .pharmsci__story-body { grid-template-columns: minmax(0, 1fr); }
  .pharmsci .pharmsci__story-rail { display: none; }
}
/* 모바일(시안 06 모바일 390): 한 단, 큰 글자를 줄이고 회색 판 여백을 좁힌다. 제품표는 제조사를 이름 아래로 내리고 각인 열을 뺀다. */
@media (max-width: 640px) {
  .pharmsci .pharmsci__story-head { padding: var(--pd-space-6) var(--pd-space-4) var(--pd-space-5); }
  .pharmsci .pharmsci__story-title { font-size: 1.375rem; }
  .pharmsci .pharmsci__story-lead { font-size: 0.875rem; }
  .pharmsci .pharmsci__scene { gap: var(--pd-space-5); padding: var(--pd-space-8) var(--pd-space-4); }
  .pharmsci .pharmsci__scene-title { margin-top: var(--pd-space-2); font-size: 1.4375rem; }
  .pharmsci .pharmsci__scene-text { font-size: 0.875rem; }
  .pharmsci .pharmsci__scene-fact { margin-top: var(--pd-space-4); padding-top: var(--pd-space-3); }
  .pharmsci .pharmsci__scene-value { font-size: 2rem; }
  .pharmsci .pharmsci__scene-value--long { font-size: 1.5rem; }
  .pharmsci .pharmsci__scene-where { margin-top: var(--pd-space-3); }
  .pharmsci .pharmsci__scene-view { padding: var(--pd-space-3); }
  .pharmsci .pharmsci__frag-body { padding: var(--pd-space-4); }
  .pharmsci .pharmsci__frag-bar { padding: var(--pd-space-2) var(--pd-space-3); }
  .pharmsci .pharmsci__frag-side { display: none; }
  .pharmsci .pharmsci__idc { grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--pd-space-3); }
  .pharmsci .pharmsci__idc-ph { width: 5.5rem; height: 5.5rem; }
  .pharmsci .pharmsci__idc-title b { font-size: 1rem; }
  .pharmsci .pharmsci__idc-text { display: contents; }
  .pharmsci .pharmsci__idc-ph { grid-row: span 2; }
  .pharmsci .pharmsci__idc-marks { grid-column: 1 / -1; margin-top: var(--pd-space-1); }
  .pharmsci .pharmsci__idc-kv { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .pharmsci .pharmsci__frag-tabs { padding: 0 var(--pd-space-1); }
  .pharmsci .pharmsci__frag-tabs span { padding: var(--pd-space-2); font-size: 0.75rem; }
  .pharmsci .pharmsci__frag-tabs .is-optional { display: none; }
  .pharmsci .pharmsci__frag-more { flex-direction: column; gap: var(--pd-space-1); padding: var(--pd-space-3) var(--pd-space-4); }
  .pharmsci .pharmsci__ptable th,
  .pharmsci .pharmsci__ptable td { padding: var(--pd-space-2); white-space: normal; }
  .pharmsci .pharmsci__ptable .is-wide { display: none; }
  .pharmsci .pharmsci__ptable-maker { display: block; margin-top: var(--pd-space-1); font-size: 0.71875rem; color: var(--pd-text-muted); }
  .pharmsci .pharmsci__mol-topics { grid-template-columns: 5.25rem minmax(0, 1fr); }
  .pharmsci .pharmsci__story-finale { padding: var(--pd-space-5) var(--pd-space-4); }
}
/* 상세 화면 왼쪽 날개(R124) — 처방 많은 약 상위 3개(사진 · 이름만)로 다른 약을 바로 연다.
   본문(1320px) 왼쪽 여백이 날개를 담을 만큼 넓은 데스크톱에서만 약 카드 묶음 바로 왼쪽에 둔다. 모바일 · 여백이 좁은 화면에는 두지 않는다 —
   본문을 가리거나 밀어내지 않는다(사용자 지시 2026-10-14). 본문보다 눈에 덜 띄게 처음 크기의 70% 로 둔다. */
.pharmsci {
  --pharmsci-wing-w: calc((var(--pd-space-16) + var(--pd-space-12)) * 0.7);
  --pharmsci-wing-gap: var(--pd-space-2);
}
.pharmsci .pharmsci__wing { display: none; }
.pharmsci .pharmsci__wing-panel {
  width: var(--pharmsci-wing-w);
  padding: var(--pd-space-1);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  background: var(--pd-surface);
  box-shadow: var(--pd-shadow-md);
}
.pharmsci .pharmsci__wing-list { display: grid; gap: var(--pd-space-1); margin: 0; padding: 0; list-style: none; }
.pharmsci .pharmsci__wing-item {
  display: grid;
  justify-items: center;
  gap: var(--pd-space-1);
  padding: var(--pd-space-1);
  border-radius: var(--pd-radius-md);
  color: var(--pd-text);
  text-decoration: none;
}
.pharmsci .pharmsci__wing-item:hover { background: var(--pd-accent-subtle); }
.pharmsci .pharmsci__wing-item:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
.pharmsci .pharmsci__wing-item[aria-current="page"] { background: var(--pd-accent-subtle); outline: 1px solid var(--pd-accent); outline-offset: -1px; }
.pharmsci .pharmsci__pill-figure--wing { width: calc(var(--pd-space-12) * 0.7); height: calc(var(--pd-space-12) * 0.7); }
.pharmsci .pharmsci__wing-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
@media (min-width: 1480px) {
  /* 약 카드 묶음(.pharmsci__zones) 바로 왼쪽에 붙여 윗선을 약 카드와 맞추고, 내려 읽을 때는 GNB 아래에 따라붙는다. */
  .pharmsci .pharmsci__zones { position: relative; }
  .pharmsci .pharmsci__wing { position: absolute; top: 0; bottom: 0; left: calc(-1 * (var(--pharmsci-wing-w) + var(--pharmsci-wing-gap))); display: block; z-index: var(--pd-z-sticky); }
  .pharmsci .pharmsci__wing-panel { position: sticky; top: var(--pharmsci-sticky-top); }
}
@media print { .pharmsci .pharmsci__wing { display: none; } }