/* ==========================================================================
   成分ページ（?poc_ingredient=）: 薬剤詳細（poc-drug.css）の部品に、味比較表・剤形別詳細を足す。
   すべて .poc-ing 配下に限定（他ページへは影響しない）。DS=ピンク系 / シロップ=ブルー系の見出し。
   PC: 4列の表 / スマホ（〜700px）: 1行を1枚のカードにして、列名ラベル付きで縦に表示（横スクロールなし）。
   ========================================================================== */
.poc-ing-head__summary { margin: 10px 0 0; color: var(--poc-ink); font-size: 16px; font-weight: 700; line-height: 1.6; }
.poc-ing-head { grid-template-columns: minmax(0, 1fr); }

/* ---------- 味比較 ---------- */
.poc-ing-taste { display: grid; gap: 18px; }
.poc-ing-taste > .poc-d-sec__title { margin-bottom: 0 !important; }
.poc-ing-tbl { display: grid; gap: 8px; min-width: 0; }
html body.poc-drug-page #content .poc-calc-wrap .poc-ing-tbl__title { margin: 0 !important; padding: 8px 14px !important; border-radius: 10px; font-size: 16px; font-weight: 800; line-height: 1.4; color: var(--poc-ink) !important; border-left: 0 !important; }
html body.poc-drug-page #content .poc-calc-wrap .poc-ing-tbl--ds .poc-ing-tbl__title { background: #fde9f1 !important; border: 1px solid #f3bcd2; color: #8d2757 !important; }
html body.poc-drug-page #content .poc-calc-wrap .poc-ing-tbl--syrup .poc-ing-tbl__title { background: #e5f0ff !important; border: 1px solid #b9d3f8; color: var(--poc-blue-d) !important; }

.poc-ing-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; border: 1px solid var(--poc-line); border-radius: 12px; overflow: hidden; background: #fff; font-size: 14.5px; line-height: 1.65; }
.poc-ing-table thead th { padding: 9px 12px; background: #f1f5fb; color: var(--poc-muted); font-size: 13px; font-weight: 800; text-align: left; border-bottom: 1px solid var(--poc-line); }
.poc-ing-table thead th:nth-child(1) { width: 24%; }
.poc-ing-table thead th:nth-child(2) { width: 15%; }
.poc-ing-table thead th:nth-child(3) { width: 37%; }
.poc-ing-table thead th:nth-child(4) { width: 24%; }
.poc-ing-table tbody th, .poc-ing-table tbody td { padding: 12px; vertical-align: top; text-align: left; border-top: 1px solid var(--poc-line); overflow-wrap: anywhere; word-break: normal; background: #fff; font-weight: 400; }
.poc-ing-table tbody tr:first-child th, .poc-ing-table tbody tr:first-child td { border-top: 0; }
.poc-ing-table tbody tr.is-originator th, .poc-ing-table tbody tr.is-originator td { background: #fffaf0; }

.poc-ing-str__main { display: block; font-size: 16px; font-weight: 800; color: var(--poc-ink); line-height: 1.4; }
.poc-ing-str__sub { display: block; margin-top: 2px; color: var(--poc-muted); font-size: 12.5px; line-height: 1.55; }
.poc-ing-prod__label { display: block; word-break: keep-all; overflow-wrap: normal; line-break: strict; font-size: 16px; font-weight: 800; color: var(--poc-ink); line-height: 1.4; }
.poc-ing-prod__name { display: block; margin-top: 3px; color: var(--poc-ink); font-size: 13px; font-weight: 400; }
.poc-ing-prod__maker { display: block; color: var(--poc-muted); font-size: 12.5px; font-weight: 400; }
.poc-ing-prod__legacy { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 700; }

.poc-ing-taste dl, dl.poc-ing-taste { margin: 0; display: grid; gap: 6px; }
dl.poc-ing-taste > div { display: grid; gap: 1px; }
dl.poc-ing-taste dt { margin: 0; color: var(--poc-muted); font-size: 12px; font-weight: 800; }
dl.poc-ing-taste dd { margin: 0; }
.poc-ing-nodata { color: var(--poc-muted); margin: 0; }
.poc-ing-tnote { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; background: #f6f9fd; color: var(--poc-muted); font-size: 12.5px; line-height: 1.6; }
.poc-ing-src { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: baseline; }
.poc-ing-src .poc-d-src__chip { margin: 0; }

.poc-ing-sup { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid; gap: 4px; font-size: 13.5px; }
.poc-ing-sup li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.poc-ing-sup__k { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 999px; background: #edf1f7; color: var(--poc-muted); font-size: 11.5px; font-weight: 800; }
.poc-ing-taste__note { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff8e6; border: 1px solid #f3d99b; color: #6b4a00; font-size: 13.5px; }

/* ---------- 剤形別詳細 ---------- */
.poc-ing-form--ds > .poc-d-acc__summary { border-left: 6px solid #e66a9a; }
.poc-ing-form--syrup > .poc-d-acc__summary { border-left: 6px solid var(--poc-blue); }
.poc-ing-form--tablet > .poc-d-acc__summary { border-left: 6px solid #8aa0b8; }
.poc-ing-list { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid; gap: 8px; }
.poc-ing-list li { margin: 0 !important; padding: 0 0 0 14px !important; position: relative; list-style: none !important; font-size: 14.5px; line-height: 1.7; }
.poc-ing-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: #9db0c6; }
.poc-ing-toollinks { margin: 10px 0 0 !important; padding: 0 !important; list-style: none !important; display: grid; gap: 8px; }
.poc-ing-toollinks li { margin: 0 !important; padding: 0 !important; list-style: none !important; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.poc-ing-toolbtn { box-sizing: border-box; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; font-size: 14px; font-weight: 800; text-decoration: none; }
.poc-ing-toollinks__d { color: var(--poc-muted); font-size: 12.5px; line-height: 1.6; flex: 1 1 220px; }
.poc-ing-doclinks { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid; gap: 6px; }
.poc-ing-doclinks li { margin: 0 !important; padding: 0 !important; list-style: none !important; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; }
.poc-ing-doclinks__p { min-width: 4.5em; font-weight: 800; color: var(--poc-ink); }
.poc-ing-doclinks a { display: inline-flex; align-items: center; min-height: 36px; }
.poc-ing-gen__lead { margin: 12px 0 6px; font-weight: 700; }

/* ---------- 出典 ---------- */
.poc-ing-srclist, .poc-ing-srcdocs { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid; gap: 10px; }
.poc-ing-srclist > li, .poc-ing-srcdocs > li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.poc-ing-srcprod { padding-top: 10px; border-top: 1px solid var(--poc-line); }
.poc-ing-srcprod:first-child { padding-top: 0; border-top: 0; }
.poc-ing-srcprod__name { margin: 0 0 6px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.poc-ing-srcdocs { gap: 6px; }
.poc-ing-srcdocs > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13px; line-height: 1.6; scroll-margin-top: 14px; overflow-wrap: anywhere; }
.poc-ing-srcdocs__m { color: var(--poc-muted); font-size: 12px; }
.poc-ing-legacy .poc-d-links li { margin: 0 0 6px; }

/* ---------- スマホ: 表 → カード ---------- */
@media (max-width: 700px) {
	.poc-ing-table, .poc-ing-table tbody, .poc-ing-table tr, .poc-ing-table tbody th, .poc-ing-table tbody td { display: block; width: 100%; }
	.poc-ing-table { border: 0; background: transparent; }
	.poc-ing-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.poc-ing-table tbody { display: grid; gap: 10px; }
	.poc-ing-table tr { border: 1px solid var(--poc-line); border-radius: 12px; overflow: hidden; background: #fff; }
	.poc-ing-table tbody th, .poc-ing-table tbody td { border-top: 1px solid var(--poc-line); padding: 10px 12px; }
	.poc-ing-table tbody tr th:first-child { border-top: 0; background: #f6f9fd; }
	.poc-ing-table tbody tr.is-originator th:first-child { background: #fff3d6; }
	.poc-ing-table tbody tr.is-originator td { background: #fffaf0; }
	.poc-ing-table tbody td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--poc-muted); font-size: 12px; font-weight: 800; }
	.poc-ing-prod__label { font-size: 17px; }
	.poc-ing-toollinks li { display: grid; }
	.poc-ing-toolbtn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .poc-ing-table * { transition: none; } }

/* ---------- 薬を調べる一覧: 成分ページ（試作）カード ---------- */
.poc-ing-listcards { margin: 0 0 16px; padding: 14px 16px 16px; background: #fff; border: 1px solid var(--poc-line); border-radius: var(--poc-radius); box-shadow: var(--poc-shadow); }
html body.poc-drug-page #content .poc-calc-wrap .poc-ing-listcards__title { margin: 0 0 10px !important; padding: 0 0 0 10px !important; border-left: 4px solid var(--poc-blue) !important; font-size: 16px; font-weight: 800; color: var(--poc-ink) !important; }
.poc-ing-listcards__list { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.poc-ing-listcard { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.poc-ing-listcard__link { display: grid; gap: 4px; min-height: 64px; padding: 12px 14px; border: 2px solid #c4d7ef; border-radius: 12px; background: #f6f9fd; color: var(--poc-ink); text-decoration: none; }
.poc-ing-listcard__link:hover { border-color: var(--poc-blue); background: #eaf3ff; }
.poc-ing-listcard__link:focus-visible { outline: 3px solid #ffb830; outline-offset: 2px; }
.poc-ing-listcard__name { font-size: 17px; font-weight: 800; }
.poc-ing-listcard__desc { color: var(--poc-muted); font-size: 13px; line-height: 1.6; }

/* ---------- 剤形詳細: 製品別の包装・取扱い・添加剤（味比較表から移した情報） ---------- */
.poc-ing-prodspec { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid; gap: 10px; }
.poc-ing-prodspec > li { margin: 0 !important; padding: 8px 0 0 !important; list-style: none !important; border-top: 1px solid var(--poc-line); display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 4px 12px; font-size: 14px; line-height: 1.65; }
.poc-ing-prodspec > li:first-child { border-top: 0; padding-top: 0 !important; }
.poc-ing-prodspec__p { font-weight: 800; color: var(--poc-ink); word-break: keep-all; }
@media (max-width: 700px) { .poc-ing-prodspec > li { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 剤形が増えた成分ページ（細粒・内用液など）の見出し色 ---------- */
html body.poc-drug-page #content .poc-calc-wrap .poc-ing-tbl--granule .poc-ing-tbl__title { background: #e8f6ee !important; border: 1px solid #b4dcc6; color: #14724a !important; }
html body.poc-drug-page #content .poc-calc-wrap .poc-ing-tbl--liquid .poc-ing-tbl__title { background: #e2f4f6 !important; border: 1px solid #a9d6dc; color: #0d6a75 !important; }
.poc-ing-form--fine_granule > .poc-d-acc__summary { border-left: 6px solid #3aa37a; }
.poc-ing-form--liquid > .poc-d-acc__summary { border-left: 6px solid #2a9aa8; }

/* 先発・後発区分の根拠（厚労省リスト） */
html body.poc-drug-page #content .poc-calc-wrap .poc-ing-srcmhlw__title { margin: 14px 0 6px !important; font-size: 14px; font-weight: 800; color: var(--poc-ink) !important; }
.poc-ing-srcmhlw { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid; gap: 4px; font-size: 12.5px; line-height: 1.6; overflow-wrap: anywhere; }
.poc-ing-srcmhlw li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.poc-ing-srcmhlw__code { white-space: nowrap; color: var(--poc-muted, #5b6b7d); font-size: 11.5px; }

/* ---------- 整理状況（試作）・服用/混合の注意・剤形別の製品一覧・試作一覧 ---------- */
html body.poc-drug-page #content .poc-calc-wrap .poc-d-tag--state { font-weight: 800; }
html body.poc-drug-page #content .poc-calc-wrap .poc-d-tag--state-A { background: #e4f5ea !important; color: #146c3a !important; border-color: #9bd3b0 !important; }
html body.poc-drug-page #content .poc-calc-wrap .poc-d-tag--state-B { background: #fff3da !important; color: #8a5a00 !important; border-color: #f0cf8a !important; }
html body.poc-drug-page #content .poc-calc-wrap .poc-d-tag--state-C { background: #eef1f5 !important; color: #435468 !important; border-color: #c9d2de !important; }
.poc-ing-state { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #f6f9fd; border: 1px solid #d3e0f2; color: var(--poc-ink); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.poc-ing-state--B { background: #fff9ec; border-color: #f0dfb4; }
.poc-ing-nodata--maker { margin-top: 4px; font-size: 12.5px; }
.poc-ing-mixing { display: grid; gap: 12px; }
.poc-ing-mixing > .poc-d-sec__title { margin-bottom: 0 !important; }
.poc-ing-mixlist { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid; gap: 14px; }
.poc-ing-mixprod { margin: 0 !important; padding: 12px 14px !important; list-style: none !important; border: 1px solid var(--poc-line); border-radius: 12px; background: #fff; min-width: 0; }
.poc-ing-mixprod__name { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.poc-ing-formprods { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid; gap: 8px; }
.poc-ing-formprods li { margin: 0 !important; padding: 8px 10px !important; list-style: none !important; display: grid; gap: 2px; border: 1px solid var(--poc-line); border-radius: 10px; background: #fafcff; min-width: 0; overflow-wrap: anywhere; }
.poc-ing-formprods__str { color: var(--poc-muted); font-size: 12.5px; line-height: 1.6; }
.poc-ing-listcard--all .poc-ing-listcard__link { border-style: dashed; background: #fff; }

.poc-ing-idx__body { display: grid; gap: 18px; }
.poc-ing-idxsec { display: grid; gap: 10px; }
.poc-ing-idxsec > .poc-d-sec__title { margin-bottom: 0 !important; }
.poc-ing-idxlist { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.poc-ing-idxitem { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid; min-width: 0; }
/* カード全体が1つのリンク（成分名だけでなく、カードのどこをクリック・タップしても成分ページへ） */
.poc-ing-idxitem__link { display: grid; gap: 4px; align-content: start; box-sizing: border-box; height: 100%; padding: 10px 12px; border: 1px solid var(--poc-line); border-radius: 12px; background: #fff; color: var(--poc-ink); text-decoration: none; min-width: 0; -webkit-tap-highlight-color: rgba(43, 124, 255, .12); transition: border-color .12s, background-color .12s; }
.poc-ing-idxitem__link:hover { border-color: var(--poc-blue); background: #f3f8ff; }
.poc-ing-idxitem__link:hover .poc-ing-idxitem__name { text-decoration: underline; }
.poc-ing-idxitem__link:focus-visible { outline: 3px solid #ffb830; outline-offset: 2px; border-color: var(--poc-blue); background: #f3f8ff; }
.poc-ing-idxitem__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.poc-ing-idxitem__name { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.poc-ing-idxitem__class { color: var(--poc-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.poc-ing-idxitem__meta { color: var(--poc-ink); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.poc-ing-idxitem__why { color: var(--poc-muted); font-size: 12.5px; line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 700px) { .poc-ing-idxlist { grid-template-columns: minmax(0, 1fr); } }
.poc-ing-state { text-align: left; }
html body.poc-drug-page #content .poc-calc-wrap .poc-ing-idx { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 16px; }
html body.poc-drug-page #content .poc-calc-wrap .poc-ing-idxitem__link,
html body.poc-drug-page #content .poc-calc-wrap .poc-ing-idxitem__link:hover,
html body.poc-drug-page #content .poc-calc-wrap .poc-ing-idxitem__link:focus-visible { color: var(--poc-ink) !important; text-decoration: none !important; }
html body.poc-drug-page #content .poc-calc-wrap .poc-ing-idxitem__link:hover .poc-ing-idxitem__name,
html body.poc-drug-page #content .poc-calc-wrap .poc-ing-idxitem__link:focus-visible .poc-ing-idxitem__name { color: var(--poc-blue) !important; text-decoration: underline; }