/* 약품 묶음 화면(/collection · /collection/<id>) — 반절 폭(720px) 먼저, 사이트 토큰(product_page.css)만 쓴다 */
.coll{max-width:760px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 48px;display:grid;gap:16px}
.coll .ch{display:grid;gap:8px}
.coll h1{font-size:22px;line-height:1.3;margin:0;text-wrap:balance}
.coll h2{font-size:16px;margin:0 0 6px}
.coll h3{font-size:13px;color:var(--ink-3);margin:10px 0 4px;letter-spacing:.02em}
.coll .kind{margin:0;font-size:12.5px;color:var(--green);font-weight:600}
.coll .lead,.coll .note,.coll .hint{margin:0;font-size:13px;line-height:1.6;color:var(--ink-3);max-width:62ch}
.coll .crumb{font-size:12.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:4px}
.coll .crumb a{color:var(--ink-2)}
.coll .crumb .sep{color:var(--ink-4)}
.coll .areas{display:flex;flex-wrap:wrap;gap:6px}
.coll .areas a{font-size:13px;border:1px solid var(--line-2);border-radius:999px;padding:2px 10px;color:var(--ink-2);text-decoration:none;background:var(--surface)}
.coll .areas a:hover{border-color:var(--green-2);color:var(--green)}
.coll .area,.coll .blk{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 16px;min-width:0}
.coll .lst{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:14px;line-height:1.55}
.coll .lst li{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.coll .lst li.nest{padding-left:16px}
.coll .lst li.nest::before{content:"└";color:var(--ink-4)}
.coll a.cl{color:var(--green);text-decoration:none;border-bottom:1px solid var(--link-line)}
.coll a.cl:hover{border-bottom-color:var(--green)}
.coll .cn{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.coll .also{font-size:11px;color:var(--amber);background:var(--amber-bg);border-radius:999px;padding:0 6px}
.coll .atc,.coll .kcd{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.coll details.grp{border-top:1px dashed var(--line);padding:4px 0}
.coll details.grp:first-of-type{border-top:0}
.coll details.grp>summary{cursor:pointer;font-size:14px;font-weight:600;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.coll details.grp .lst{padding:4px 0 6px 16px}
.coll .facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 12px;margin:0;font-size:13.5px;line-height:1.6}
.coll .facts dt{color:var(--ink-3)}
.coll .facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.coll .pills{display:flex;flex-wrap:wrap;gap:5px;margin:0}
.coll .pill{font-size:13px;background:var(--surface-2);border-radius:6px;padding:1px 8px}
.coll .pill .cn{margin-left:4px}
.coll .tbl-wrap{overflow-x:auto}
.coll .ptbl{width:100%;border-collapse:collapse;font-size:13.5px}
.coll .ptbl th{text-align:left;font-size:12px;color:var(--ink-3);font-weight:600;border-bottom:1px solid var(--line);padding:4px 6px}
.coll .ptbl td{border-bottom:1px solid var(--line);padding:5px 6px;vertical-align:top}
.coll .ptbl td small{display:block;color:var(--ink-3);font-size:12px}
.coll .ptbl a{color:var(--ink);text-decoration:none}
.coll .ptbl a:hover{color:var(--green)}
.coll a:focus-visible,.coll summary:focus-visible{outline:2px solid var(--green-2);outline-offset:2px}
@media (max-width:480px){.coll .facts{grid-template-columns:minmax(0,1fr)}}
.coll .pb{display:inline-block;font-size:11px;border-radius:999px;padding:0 6px;margin-right:3px;white-space:nowrap}
.coll .pb.ok{background:var(--green-faint);color:var(--green)}
.coll .pb.no{background:var(--surface-2);color:var(--ink-3)}
.coll .pb.ref{background:var(--blue-bg);color:var(--blue)}
.coll .pb.off{background:var(--amber-bg);color:var(--amber)}
.coll .lst li small{flex-basis:100%;color:var(--ink-3);font-size:12px}