/* 분류 색인(ATC / 식약처 분류번호): 한 단계씩 색인 항목으로 전환, 경로는 breadcrumb. 제품 목록은 정렬·필터 표. */
.browse-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 32px;padding:24px 28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3)}
.browse-head h1{font-size:var(--t-24);font-weight:800;letter-spacing:-.02em;line-height:1.25}
.browse-head h1 small{font-size:var(--t-14);font-weight:600;color:var(--ink-3);margin-left:8px;letter-spacing:0;font-variant-numeric:tabular-nums}
.browse-head .sys{margin:6px 0 0;font-size:var(--t-13);color:var(--ink-3)}
.browse-head.compact{padding:4px 0 0;background:transparent;border:0;border-radius:0}
.browse-head.compact h1{font-size:var(--t-20)}
.browse-head.compact .h1-node{color:var(--ink)}
.products .head .sub{margin-top:0;font-size:var(--t-14);color:var(--ink)}
.h1-node{color:var(--green)}
.browse-head .lead{margin:8px 0 0;color:var(--ink-2);font-size:var(--t-14);max-width:var(--measure);line-height:1.65}
.system-switch{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface-2);gap:2px;flex:none}
.system-switch a{text-decoration:none;color:var(--ink-2);padding:8px 14px;border-radius:var(--r-1);display:grid;gap:1px;min-width:170px;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.system-switch a b{font-size:var(--t-14);color:inherit}
.system-switch a span{font-size:var(--t-12);color:var(--ink-3);line-height:1.4}
.system-switch a:hover{color:var(--ink)}
.system-switch a.active{background:var(--raised);color:var(--ink);box-shadow:var(--shadow-lift)}
.system-switch a.active b{color:var(--green)}
.browse .crumbs{margin:16px 0 14px}
.browse .crumbs:empty{display:none}
.browse .browse-head+.level,.browse .crumbs:empty+.level{margin-top:14px}

/* 현재 단계의 하위 색인 */
.level{padding:18px 26px 8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3);margin:0 0 14px}
.level-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 4px}
.level-head h2{font-size:var(--t-15);font-weight:700;color:var(--ink);letter-spacing:0;line-height:1.5}
.level-head h2 .lv{color:var(--ink-3);font-weight:600;margin-left:8px;font-size:var(--t-13)}
.level-head h2 em{font-style:normal;color:var(--ink-2);margin-left:6px;font-variant-numeric:tabular-nums}
.level-filter{border:1px solid var(--line-2);border-radius:var(--r-1);padding:7px 10px;font-size:var(--t-13);min-width:220px;background:var(--surface);height:32px}
.level-filter:focus-visible{outline:0;border-color:var(--green-2);box-shadow:0 0 0 3px var(--green-soft)}
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));grid-auto-rows:1fr;gap:0 36px;border-top:1px solid var(--line-2)}
.tiles li{display:flex}
.tiles li a{flex:1;display:grid;grid-template-columns:3.6em minmax(0,1fr) auto;grid-template-areas:"code nm cnt" "code en cnt";align-items:center;column-gap:12px;text-decoration:none;color:var(--ink);padding:10px 6px 10px 6px;margin:0 -6px;border-radius:6px;border-bottom:1px solid var(--line);min-height:62px;transition:background var(--dur) var(--ease)}
.tiles li:nth-last-child(-n+1) a{border-bottom-color:transparent}
.tiles li a:hover{background:var(--green-faint)}
.tiles li a:hover .nm{color:var(--green)}
.tiles .code{grid-area:code;font-size:var(--t-12);font-weight:700;color:var(--green);font-variant-numeric:tabular-nums;align-self:center;letter-spacing:.01em}
.tiles .nm{grid-area:nm;font-size:var(--t-14);font-weight:600;line-height:1.35;overflow-wrap:anywhere;transition:color var(--dur) var(--ease);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tiles .en{grid-area:en;font-size:var(--t-12);color:var(--ink-3);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tiles .cnt{grid-area:cnt;font-size:var(--t-13);color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:6px}
.tiles .cnt .ic{color:var(--ink-3);font-size:var(--t-16)}
.tiles .cnt i{font-style:normal;color:var(--ink-3)}

/* 제품 목록 */
.products{padding:20px 26px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3)}
.products .head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px;margin:0 0 12px}
.products .head .sub{color:var(--ink-2);font-size:var(--t-13);margin-top:4px;font-variant-numeric:tabular-nums}
.toolbar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:4px}
.toolbar label{font-size:var(--t-13);color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.toolbar select,.toolbar input[type=text],.toolbar input[type=number],.toolbar input[type=search]{border:1px solid var(--line-2);border-radius:6px;padding:0 8px;font-size:var(--t-13);background:var(--surface);height:32px;color:var(--ink)}
.toolbar select:focus-visible,.toolbar input:focus-visible{outline:0;border-color:var(--green-2);box-shadow:0 0 0 3px var(--green-soft)}
.toolbar .q{width:170px}
.toolbar input[type=number]{width:88px}
.toolbar .chips{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;padding-top:10px;border-top:1px dashed var(--line);align-items:center}
.toolbar .chip{cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;font-size:var(--t-13);line-height:1.2;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);white-space:nowrap;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)}
.toolbar .chip small{display:inline;flex-basis:auto;font-size:var(--t-12);color:var(--ink-3)}
.toolbar .chip:hover{border-color:var(--green-2);color:var(--ink)}
.toolbar .chip.on{background:var(--green);color:var(--on-green);border-color:var(--green)}
.toolbar .chip.on small{color:var(--on-green);opacity:.75}
.toolbar .reset{border:0;background:transparent;color:var(--green);font-weight:600;font-size:var(--t-13);cursor:pointer;padding:4px 8px;margin-left:auto;border-radius:4px}
.toolbar .reset:hover{background:var(--green-faint)}
.ptable{table-layout:fixed}
.ptable th:nth-child(1){width:30%}.ptable th:nth-child(2){width:17%}.ptable th:nth-child(3){width:8%}.ptable th:nth-child(4){width:11%}.ptable th:nth-child(5){width:12%}
@media (min-width:721px){.ptable tbody tr{height:64px}}
.ptable .tag{white-space:nowrap}
.ptable td .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptable td{overflow-wrap:anywhere}
.ptable th.sortable{cursor:pointer;user-select:none}
.ptable th.sortable:hover{color:var(--ink)}
.ptable th .dir{margin-left:3px;color:var(--green);display:inline-block;vertical-align:middle}
.ptable th .dir .ic{font-size:14px;transition:transform var(--dur) var(--ease)}
.ptable th .dir.asc .ic{transform:rotate(180deg)}
.ptable tbody tr:hover td{background:var(--green-faint)}
.ptable td .nm{font-weight:600}
.ptable td .nm a{text-decoration:none;color:var(--ink)}
.ptable td .nm a:hover{color:var(--green)}
.ptable td .sub{display:block;color:var(--ink-3);font-size:var(--t-12);margin-top:2px;font-variant-numeric:tabular-nums}
.ptable td:nth-child(3){white-space:nowrap}
.ptable .tag{display:inline-block;padding:2px 7px;border-radius:4px;font-size:var(--t-12);font-weight:600;margin:1px 4px 1px 0;background:var(--surface-2);color:var(--ink-2);line-height:1.5}
.ptable .tag.ref{background:var(--amber-bg);color:var(--amber)}
.ptable .tag.rx{background:var(--green-soft);color:var(--green)}
.ptable .tag.otc{background:var(--blue-bg);color:var(--blue)}
.ptable .tag.warn{background:var(--red-bg);color:var(--red)}
.ptable .tag.narc{background:var(--violet-bg);color:var(--violet)}
.ptable .tag.first{background:var(--blue-bg);color:var(--blue)}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:var(--t-13);color:var(--ink-3);font-variant-numeric:tabular-nums}
.pager button{border:1px solid var(--line-2);background:var(--surface);border-radius:6px;padding:6px 12px;font-size:var(--t-13);font-weight:600;color:var(--green);cursor:pointer;transition:border-color var(--dur) var(--ease)}
.pager button:hover:not(:disabled){border-color:var(--green-2)}
.pager button:disabled{color:var(--ink-3);opacity:.6;cursor:default;border-color:var(--line)}
.products .empty{padding:20px 0}

@media (max-width:980px){.browse-head{align-items:flex-start}.system-switch{flex:1 1 100%;display:flex;max-width:100%}.system-switch a{flex:1 1 0;min-width:0}}
@media (max-width:720px){
  .browse-head{padding:18px 16px}.level,.products{padding:14px 16px}
  .ptable thead,.tbl.stack thead{display:none}
  .ptable tr,.tbl.stack tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;padding:12px 0;border-bottom:1px solid var(--line);height:auto}
  .ptable td,.tbl.stack td{display:block;padding:0;border:0;white-space:normal}
  .ptable td:first-child,.ptable td:last-child,.tbl.stack td:first-child,.tbl.stack td:last-child{grid-column:1/-1}
  .ptable td[data-th]::before,.tbl.stack td[data-th]::before{content:attr(data-th);display:block;font-size:var(--t-12);color:var(--ink-3);margin-bottom:1px}
  .ptable td.num,.tbl.stack td.num{text-align:left}
  .ptable tbody tr:hover td{background:transparent}
  .ptable td .sub{white-space:normal}
  .tiles{grid-template-columns:1fr;gap:0}
  .level-filter{min-width:0;width:100%}
  .toolbar label{flex:1 1 45%}
  .toolbar select{flex:1}
}

/* 질환·용도(YAKGPT 임상 분류): 영역 → 임상 문제 → 계열 → 성분 → 품목 */
.topics .note.draft{margin:10px 0 0;font-size:var(--t-12);color:var(--ink-3);max-width:var(--measure);line-height:1.55}
.topics .system-switch a{min-width:150px}
.topics .domain-jump{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px}
.topics .domain-jump a{font-size:var(--t-12);color:var(--ink-2);text-decoration:none;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.topics .domain-jump a:hover{border-color:var(--green-2);color:var(--ink)}
.topics .topic-domain{margin-top:14px;scroll-margin-top:72px}
.topics .level-head{align-items:baseline}
.topics .level-head .hint{flex-basis:100%;margin:0 0 6px;font-size:var(--t-12);color:var(--ink-3)}
.topics .tiles li a{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm cnt" "en cnt";min-height:56px}
.topics .browse-head .rules{font-variant-numeric:tabular-nums}
.topics .classes{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.topics .classes li a{display:grid;grid-template-columns:minmax(180px,.9fr) minmax(0,2.4fr) auto;gap:6px 16px;align-items:center;padding:9px 8px;margin:0 -8px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);border-radius:6px;transition:background var(--dur) var(--ease)}
.topics .classes li a:hover{background:var(--green-faint)}
.topics .classes li.on a{background:var(--green-soft)}
.topics .classes .cls{font-weight:600;font-size:var(--t-14);display:grid;gap:1px}
.topics .classes .cls small{font-weight:500;font-size:var(--t-11);color:var(--ink-3);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.topics .classes .ing{font-size:var(--t-13);color:var(--ink-2);line-height:1.5;overflow-wrap:anywhere}
.topics .classes .cnt{font-size:var(--t-13);color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.topics .classes .cnt i{font-style:normal;color:var(--ink);font-weight:600}
.topics .classes li.empty{padding:12px 0;color:var(--ink-3);font-size:var(--t-13)}
.topics .products .head h2{font-size:var(--t-16);font-weight:700}
.topics .products .head h2 em{font-style:normal;color:var(--ink-2);margin-left:6px;font-variant-numeric:tabular-nums}
.topics .toolbar.topic-filter{gap:8px 12px}
.topics .toolbar .reset{margin-left:0}
.topics .basis{display:inline-block;font-size:var(--t-11);padding:2px 7px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}
.topics .basis.licensed{border-color:var(--green-2);color:var(--green);background:var(--green-faint)}
.topics .basis.mention,.topics .basis.observed{color:var(--ink-3);border-style:dashed}
.topics .flag{display:inline-block;font-size:var(--t-11);padding:1px 6px;margin:1px 3px 1px 0;border-radius:4px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.topics .pager{display:flex;gap:12px;align-items:center;font-size:var(--t-13);color:var(--ink-2);margin:12px 0 0;font-variant-numeric:tabular-nums}
@media (max-width:720px){.topics .classes li a{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"cls cnt" "ing ing"}.topics .classes .cls{grid-area:cls}.topics .classes .ing{grid-area:ing}.topics .classes .cnt{grid-area:cnt}}

/* 상세 페이지 파생 자료 카드(enrichment_card.js 가 끼움) — 검수 전 초안 */
.card.enrich h2 .badge.draft{font-size:var(--t-11);vertical-align:middle;margin-left:8px;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line-2)}
.card.enrich h3{font-size:var(--t-14);margin:16px 0 6px}
.card.enrich h3 small{font-weight:400;font-size:var(--t-12);color:var(--ink-3);margin-left:8px}
.enrich-topics{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.enrich-topics li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--t-13)}
.enrich-topics li:last-child{border-bottom:0}
.enrich-topics a{text-decoration:none;color:var(--ink)}
.enrich-topics a:hover b{color:var(--green)}
.enrich-topics .sub{color:var(--ink-3)}
.enrich-topics .ev{flex-basis:100%;font-size:var(--t-12);color:var(--ink-3);font-variant-numeric:tabular-nums}
.card.enrich .basis,.topics .basis{display:inline-block;font-size:var(--t-11);padding:2px 7px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}
.card.enrich .basis.licensed{border-color:var(--green-2);color:var(--green);background:var(--green-faint)}
.enrich-others{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 0;font-size:var(--t-12)}
.enrich-others .k{color:var(--ink-3);margin-right:4px}
.enrich-others .chip.dim{text-decoration:none;color:var(--ink-2);border:1px dashed var(--line-2);background:transparent;display:inline-flex;gap:6px;align-items:baseline;padding:3px 9px;border-radius:999px}
.enrich-others .chip.dim small{color:var(--ink-3);font-size:var(--t-11)}
.enrich-flags{display:flex;flex-wrap:wrap;gap:6px}
.enrich-flags .flag{display:inline-block;font-size:var(--t-12);padding:3px 9px;border-radius:6px;background:var(--surface-2);color:var(--ink-2)}
.enrich-flags .flag.pregnancy_contra_1,.enrich-flags .flag.pregnancy_contra_2,.enrich-flags .flag.pregnancy_contra,.enrich-flags .flag.age_contra{background:var(--green-soft);color:var(--green)}
.enrich-mech{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:3px;font-size:var(--t-13)}
.enrich-mech li{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.enrich-mech .sys{font-size:var(--t-11);color:var(--ink-3);min-width:56px}
.enrich-mech small{color:var(--ink-3);font-size:var(--t-12)}
.enrich-canon,.enrich-peds{margin:4px 0 0;font-size:var(--t-13);color:var(--ink-2);font-variant-numeric:tabular-nums}