/* 공용 부품이 모양을 맡고 이 파일은 약 정보와 분자 자리의 배치만 정한다. */
.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-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: center;
  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__recent { display: flex; flex-wrap: wrap; gap: var(--pd-space-2); width: 100%; }

.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; }
/* 사진 없음은 표의 다른 칸과 같은 「-」로 표기한다. 빈 상자만 남기면 자료 부재와 불러오기 실패가 구분되지 않는다. */
.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; }
/* 주제 다섯은 주 내비게이션이다. 한 줄에 제목 · 자료 미리보기 · 화살표를 두고 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: 1px solid var(--pd-border);
  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); }
/* 카드 머리는 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__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)가 전부 맡는다.
   성분코드를 열로 넣어 표 하나로 합쳤으므로 묶음용 자체 스타일이 필요 없어졌다. */
.pharmsci .pharmsci__login-gate { display: grid; justify-items: start; gap: var(--pd-space-3); }
/* 게이트의 볼 수 있는 정보: 탭 이름을 앞에 굵게, 절 이름을 뒤에. 목록 점 없이 줄마다 한 탭이다. */
.pharmsci .pharmsci__gate-list { display: grid; gap: var(--pd-space-1); margin: 0; padding: 0; list-style: none; word-break: keep-all; }
.pharmsci .pharmsci__gate-list strong { margin-inline-end: var(--pd-space-2); color: var(--pd-text); font-weight: var(--pd-weight-semibold); }

/* native dialog의 포커스 격리는 유지하고 배경·패널 모양은 공용 모달이 맡는다. */
.pharmsci .pharmsci__login-dialog { padding: 0; border: none; max-width: none; max-height: none; }

@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) {
  /* 약 카드 헤드: 사진을 위로 올리고 제목이 줄바꿈하게 한다. */
  .pharmsci .pharmsci__drug-head { grid-template-columns: minmax(0,1fr); }
  .pharmsci .pharmsci__drug-section { grid-column: 1; }
  .pharmsci .pharmsci__drug-title { overflow-wrap: anywhere; }
  /* 사진 없는 빈 상자는 좁은 폭에서 숨긴다(2026-09-17 결정: 데스크톱에선 유지). */
  .pharmsci .pharmsci__pill-figure--card:has(.pharmsci__pill-fallback) { display: none; }
  /* 허가 원문 상자 패딩 축소 — 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: 1px solid var(--pd-border);
  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-"] { 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;
  padding-inline-start: var(--pd-space-4);
  text-indent: calc(var(--pd-space-4) * -1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pharmsci .pharmsci__reference-star { display: inline-block; width: var(--pd-space-4); text-indent: 0; }
/* 머리글은 전부 가운데. 값이 한 낱말인 칸과 값 부재(-)도 가운데로 맞춘다. */
.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); }

/* 비로그인 약품 화면(R56): 상세 없이 안내 카드 하나만 둔다. 본문 폭 전체로 늘이면 짧은 문장이 비어 보인다. */
.pharmsci .pharmsci__gate-zone { max-width: 768px; margin-top: var(--pd-space-3); }

/* 불러오는 중: 빈 상태(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); }