/* YAKGPT 서비스 페이지 디자인 시스템 — "의약품집 한 항목"
   상자 격자·키커 대신 여백·헤어라인·활자 위계로 정본을 읽힌다. 강조색은 깊은 녹색 하나(표제어·링크·선택).
   한 가족(Pretendard Variable), 고정 rem 사다리(12·13·14·15·16·17·18·20·24·28), 데이터 숫자는 tabular. 라이트 기본. 다크 모드는 시스템 설정 또는 상단바 토글(html[data-theme])로 색 토큰만 바꾼다 — 구조·간격·활자는 동일. */
:root{
  --paper:#f6f6f4;--surface:#fff;--surface-2:#f1f2ef;--surface-3:#e8eae6;
  --ink:#171a19;--ink-2:#4a524e;--ink-3:#5f6863;--ink-4:#9aa39e;
  --line:#e3e6e2;--line-2:#cdd3ce;
  --green:#0e5a45;--green-2:#157a5e;--green-soft:#dfeee7;--green-faint:#f2f8f5;--on-green:#fff;--link-line:rgba(14,90,69,.4);--raised:#fff;--img-dim:1;
  --amber:#7d5210;--amber-bg:#fdf3df;--amber-line:#efdcb0;--red:#a8261e;--red-bg:#fbebe9;--blue:#2b4d96;--blue-bg:#e9eefb;--violet:#5a3f9c;--violet-bg:#f1ecfb;
  --t-12:.75rem;--t-13:.8125rem;--t-14:.875rem;--t-15:.9375rem;--t-16:1rem;--t-17:1.0625rem;--t-18:1.125rem;--t-20:1.25rem;--t-24:1.5rem;--t-28:1.75rem;
  --r-1:6px;--r-2:10px;--r-3:12px;  /* r-1 작은 컨트롤, r-2 입력창·목록, r-3 시트 */
  --dur:160ms;--dur-slow:220ms;--ease:cubic-bezier(.2,.7,.2,1);
  --shadow-float:0 12px 32px -14px rgba(23,26,25,.3),0 2px 8px -4px rgba(23,26,25,.14);--shadow-lift:0 1px 2px rgba(23,26,25,.1);
  --top:64px;--measure:42em;--measure-read:44em;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Segoe UI",sans-serif;
  color-scheme:light;accent-color:var(--green-2);scrollbar-color:var(--line-2) transparent;
}
/* 다크 모드 — 역할 토큰만 어두운 값으로. 두 블록(시스템 다크·명시 다크)은 내용이 같아야 한다(tests/service/test_product_page.py가 비교).
   글자 대비: ink-3 5.6:1(시트)·6.1:1(종이), green 8.2:1, 상태색 쌍 6.6–7.7:1. 낱알 사진은 밝기만 88%로 낮추고, 올라앉은 면(세그먼트 활성)은 raised 토큰으로 트랙보다 밝게 유지한다. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#141716;--surface:#1c201f;--surface-2:#242928;--surface-3:#2d3331;
  --ink:#e6eae8;--ink-2:#b3bcb7;--ink-3:#8e9993;--ink-4:#5b6560;
  --line:#333a37;--line-2:#454e4a;
  --green:#6fc7a8;--green-2:#8cd6bb;--green-soft:#1f3d33;--green-faint:#182b25;--on-green:#0f1f19;--link-line:rgba(111,199,168,.45);--raised:#333a37;--img-dim:.88;
  --amber:#e6b566;--amber-bg:#33280f;--amber-line:#4f3f1d;--red:#f0928a;--red-bg:#3a1f1c;--blue:#a3b9f2;--blue-bg:#1f2a44;--violet:#c4abf2;--violet-bg:#2c2444;
  --shadow-float:0 12px 32px -14px rgba(0,0,0,.7),0 2px 8px -4px rgba(0,0,0,.5);--shadow-lift:0 1px 2px rgba(0,0,0,.5);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#141716;--surface:#1c201f;--surface-2:#242928;--surface-3:#2d3331;
  --ink:#e6eae8;--ink-2:#b3bcb7;--ink-3:#8e9993;--ink-4:#5b6560;
  --line:#333a37;--line-2:#454e4a;
  --green:#6fc7a8;--green-2:#8cd6bb;--green-soft:#1f3d33;--green-faint:#182b25;--on-green:#0f1f19;--link-line:rgba(111,199,168,.45);--raised:#333a37;--img-dim:.88;
  --amber:#e6b566;--amber-bg:#33280f;--amber-line:#4f3f1d;--red:#f0928a;--red-bg:#3a1f1c;--blue:#a3b9f2;--blue-bg:#1f2a44;--violet:#c4abf2;--violet-bg:#2c2444;
  --shadow-float:0 12px 32px -14px rgba(0,0,0,.7),0 2px 8px -4px rgba(0,0,0,.5);--shadow-lift:0 1px 2px rgba(0,0,0,.5);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--top) + 60px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--t-15);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;word-break:keep-all}
a{color:var(--green);text-decoration-thickness:1px;text-underline-offset:.16em;text-decoration-color:var(--link-line)}
a:hover{text-decoration-color:currentColor}
::selection{background:var(--green-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--green-2);outline-offset:2px}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.015em;line-height:1.3;text-wrap:balance}
p{margin:0}
code{font-family:inherit}
.num,td.num,th.num,.tabular{font-variant-numeric:tabular-nums}
input::placeholder{color:var(--ink-3);opacity:1}
.ic{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em;flex:none}
.skip{position:absolute;left:8px;top:-48px;background:var(--ink);color:var(--paper);padding:8px 12px;border-radius:var(--r-1);z-index:100;text-decoration:none;font-size:var(--t-13)}
.skip:focus{top:8px}
.js-hidden{display:none}
svg[hidden]{display:none}
[hidden]{display:none!important}
.muted{color:var(--ink-3)}
.h3-sub{font-size:var(--t-12);color:var(--ink-3);font-weight:500;letter-spacing:0}
.h3-link{font-size:var(--t-12);font-weight:600;text-decoration:none}
.mt-12{margin-top:12px}
.mb-12{margin-bottom:12px}
.meta-line{margin-top:14px;font-size:var(--t-12);color:var(--ink-3);font-variant-numeric:tabular-nums}
.hero.solo{grid-template-columns:1fr}
.facts.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.layout.solo{grid-template-columns:1fr}
.hero-kind{margin:0 0 8px;font-size:var(--t-13);color:var(--ink-3)}
.hero-kind a{color:var(--ink-2);text-decoration:none}
.hero-kind a:hover{color:var(--green)}
.hero-kind code{color:var(--green);font-weight:700;font-size:var(--t-12);margin-right:3px}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ---- 상단바 ---- */
.topbar{height:var(--top);padding:0 max(20px,calc((100vw - 1320px)/2));display:flex;align-items:center;gap:18px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:.02em;white-space:nowrap;font-size:var(--t-16)}
.brand-mark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:var(--r-1);background:var(--green);color:var(--on-green);font-weight:800;font-size:var(--t-15);letter-spacing:0}
.topsearch{position:relative;flex:1;max-width:560px;display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--surface);padding:0 5px 0 12px;height:40px;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.topsearch:focus-within{border-color:var(--green-2);box-shadow:0 0 0 3px var(--green-soft)}
.topsearch>.ic{color:var(--ink-3);font-size:var(--t-16)}
.topsearch input{flex:1;border:0;outline:0;font-size:var(--t-15);min-width:40px;background:transparent;height:100%;padding:0}
.topsearch input::placeholder{color:var(--ink-3)}
.topsearch button{border:0;border-radius:var(--r-1);background:var(--green);color:var(--on-green);font-weight:700;font-size:var(--t-13);padding:0 12px;height:30px;cursor:pointer;transition:background var(--dur) var(--ease)}
.topsearch button:hover{background:var(--green-2)}
.topresults{position:absolute;left:-1px;right:-1px;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);box-shadow:var(--shadow-float);max-height:420px;overflow:auto;z-index:40;padding:4px}
.topresults a{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;border-radius:6px;text-decoration:none;color:var(--ink)}
.topresults a:hover,.topresults a:focus{background:var(--green-faint)}
.topresults a strong{display:block;font-size:var(--t-14);font-weight:600}
.topresults a small{color:var(--ink-3);font-size:var(--t-12)}
.topresults .cnt{color:var(--ink-3);font-size:var(--t-12);white-space:nowrap}
.topresults .none{padding:14px;color:var(--ink-3);font-size:var(--t-13)}
.topnav{display:flex;gap:2px;margin-left:auto}
.topnav a{text-decoration:none;color:var(--ink-2);font-size:var(--t-14);font-weight:600;padding:8px 12px;border-radius:var(--r-1);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.topnav a:hover{background:var(--surface-2);color:var(--ink)}
.topnav a.active{color:var(--green);background:var(--green-faint)}
.dev-link{font-size:var(--t-13);color:var(--ink-2);text-decoration:none;border:1px solid var(--line-2);border-radius:var(--r-1);padding:7px 11px;white-space:nowrap;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.dev-link:hover{color:var(--ink);border-color:var(--ink-4)}
.theme-toggle{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-1);background:var(--surface);color:var(--ink-2);font:inherit;font-size:var(--t-13);cursor:pointer;white-space:nowrap;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.theme-toggle:hover{color:var(--ink);border-color:var(--ink-4)}
.theme-toggle .ic{font-size:var(--t-16)}

/* ---- 페이지 틀 · 경로 ---- */
.page{max-width:1320px;margin:0 auto;padding:26px 20px 56px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:var(--t-13);color:var(--ink-3);margin:0 0 18px;min-height:20px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--green);text-decoration:underline}
.crumbs .sep{color:var(--ink-4)}
.crumbs .cur,.crumbs>span{color:var(--ink);font-weight:600}
.crumbs code{font-weight:700;color:var(--green);margin-right:5px;font-size:var(--t-12);font-variant-numeric:tabular-nums}
.crumbs .back{display:inline-grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:var(--r-1);color:var(--ink-2);background:var(--surface);font-size:15px}
.crumbs .back:hover{border-color:var(--line-2);color:var(--green);text-decoration:none}
.crumbs .back .ic{font-size:15px}
.eyebrow{margin:0 0 6px;font-size:var(--t-12);color:var(--ink-3)}

/* ---- 표제(모노그래프 머리) ---- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:24px 40px;padding:26px 28px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3)}
.hero h1{font-size:var(--t-28);font-weight:800;letter-spacing:-.02em;line-height:1.22;overflow-wrap:anywhere}
.hero .en{margin:6px 0 0;color:var(--ink-3);font-size:var(--t-14)}
.hero .company{margin:8px 0 0;font-size:var(--t-15);color:var(--ink-2)}
.hero .company span{color:var(--ink-3)}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:var(--t-12);font-weight:600;background:var(--surface-2);color:var(--ink-2)}
.badge.otc{background:var(--green-soft);color:var(--green)}
.badge.coverage{background:var(--blue-bg);color:var(--blue)}
.badge.special{background:var(--amber-bg);color:var(--amber)}
.badge.warn{background:var(--red-bg);color:var(--red)}
.badge.status{background:var(--surface-2);color:var(--ink-2)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px;margin:22px 0 0;padding:0}
.fact{border-top:1px solid var(--line);padding:10px 0 12px;min-width:0}
.fact dt{font-size:var(--t-12);color:var(--ink-3);margin-bottom:3px}
.fact dd{margin:0;font-size:var(--t-15);font-weight:600;overflow-wrap:anywhere;line-height:1.45;font-variant-numeric:tabular-nums}
.fact dd a{text-decoration:none;border-bottom:1px solid var(--green-soft)}
.fact dd a:hover{border-bottom-color:var(--green)}
.pillcard{align-self:start;border-left:1px solid var(--line);padding:0 0 0 24px;display:flex;flex-direction:column;gap:10px}
.pillcard img{width:100%;height:150px;object-fit:contain;border-radius:6px;background:var(--surface-2);filter:brightness(var(--img-dim))}
.pillcard .noimg{height:150px;display:grid;place-items:center;border-radius:6px;background:var(--surface-2);color:var(--ink-3);font-size:var(--t-13)}
.pillcard dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0;font-size:var(--t-12)}
.pillcard dt{color:var(--ink-3)}
.pillcard dd{margin:0;font-weight:600}

/* 달리는 머리말: 표제가 화면 밖으로 나가면 상단바 아래 붙는다 (이 페이지의 유일한 연출 모션) */
.runhead{position:sticky;top:var(--top);z-index:25;display:flex;align-items:center;gap:12px;height:44px;margin:0 -20px;padding:0 20px;background:var(--paper);border-bottom:1px solid var(--line);transform:translateY(-6px);opacity:0;pointer-events:none;transition:transform var(--dur-slow) var(--ease),opacity var(--dur-slow) var(--ease);font-size:var(--t-14)}
.runhead.on{transform:none;opacity:1;pointer-events:auto}
.runhead strong{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.runhead span{color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.runhead .badge{margin-left:auto}

/* ---- 본문 틀: 색인 열 + 항목 ---- */
.layout{display:grid;grid-template-columns:176px minmax(0,1fr);gap:0 28px;margin-top:14px;align-items:start}
.sidenav{position:sticky;top:calc(var(--top) + 60px);padding:4px 0 0;max-height:calc(100vh - var(--top) - 70px);overflow:auto;font-size:var(--t-13)}
.sidenav a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 10px;margin:0 -10px;border-radius:6px;text-decoration:none;color:var(--ink-2);font-weight:500;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.sidenav a:hover{background:var(--surface-3);color:var(--ink)}
.sidenav a.active{color:var(--green);font-weight:700;background:var(--green-faint)}
.sidenav a em{font-style:normal;font-size:var(--t-12);color:var(--ink-3);font-variant-numeric:tabular-nums}
.sidenav a.dim{color:var(--ink-3)}
.sidenav a.dim em{color:var(--ink-3)}
.content{min-width:0}

/* 항목(section): 종이 바탕 위의 흰 시트 하나 = 정보 영역 하나. 제목(18px)이 위에 오고 시트 사이 간격으로 경계를 읽는다 */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3);padding:22px 26px 24px;margin:0 0 14px;scroll-margin-top:calc(var(--top) + 60px)}
.card:last-child{margin-bottom:0}
.card>h2{font-size:var(--t-18);font-weight:800;color:var(--ink);line-height:1.3;margin:0 0 6px;letter-spacing:-.02em;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.card>h2 .count{font-size:var(--t-13);color:var(--ink-3);font-weight:500;font-variant-numeric:tabular-nums}
.card .lead{margin:0 0 16px;color:var(--ink-2);font-size:var(--t-14);max-width:var(--measure);line-height:1.65}
.card>h2+.lead{padding-bottom:14px;border-bottom:1px solid var(--line);max-width:none}
.card h3{font-size:var(--t-15);font-weight:700;margin:24px 0 8px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.card h3 small,.card h3>span{font-size:var(--t-12);color:var(--ink-3);font-weight:500}
.card h3 a{font-size:var(--t-12);font-weight:600;text-decoration:none}
.card p{margin:0 0 8px;font-size:var(--t-15)}
.card ul{margin:0 0 8px;padding-left:18px;font-size:var(--t-15)}
.card li{margin-bottom:4px}
.card li small{color:var(--ink-3)}
.empty{color:var(--ink-3);font-size:var(--t-14);padding:6px 0}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.more{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-1);padding:7px 12px;font-size:var(--t-13);font-weight:600;color:var(--green);text-decoration:none;cursor:pointer;line-height:1.3;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.more:hover{border-color:var(--green-2);background:var(--green-faint)}
.card>h2+h3,.card>h2+.lead+h3,.card>h2+div>h3:first-child{margin-top:4px}

/* ---- 출처·상태 표시 ---- */
.src{display:inline-block;margin:4px 6px 0 0;padding:2px 7px;border-radius:4px;background:var(--surface-2);color:var(--ink-2);font-size:var(--t-12);font-weight:500;line-height:1.5}
.src.review{background:var(--green-soft);color:var(--green)}
.src.candidate{background:var(--amber-bg);color:var(--amber)}
.src.restricted{background:var(--violet-bg);color:var(--violet)}
.src.danger{background:var(--red-bg);color:var(--red)}
.note{padding:10px 14px;border:1px solid var(--amber-line);border-radius:var(--r-1);background:var(--amber-bg);color:var(--amber);font-size:var(--t-13);line-height:1.6;margin:0 0 14px;max-width:var(--measure)}
.note.info{background:var(--green-faint);border-color:var(--green-soft);color:var(--green)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;border:1px solid var(--line);border-radius:var(--r-1);padding:6px 10px;font-size:var(--t-13);background:var(--surface);color:var(--ink);text-decoration:none;line-height:1.4;max-width:100%}
.chip b{color:var(--green);font-weight:700;font-variant-numeric:tabular-nums}
.chip b a{text-decoration:none}
.chip small{flex-basis:100%;color:var(--ink-3);font-size:var(--t-12)}
a.chip:hover{border-color:var(--green-2)}

/* ---- 표 ---- */
.tbl{width:100%;border-collapse:collapse;font-size:var(--t-14)}
.tbl th{text-align:left;color:var(--ink-3);font-weight:600;font-size:var(--t-12);padding:8px 12px 8px 0;border-bottom:1px solid var(--line-2);white-space:nowrap}
.tbl td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere;line-height:1.5}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl tbody th{text-align:left;color:var(--ink);font-size:var(--t-14);font-weight:600;padding:9px 12px 9px 0;border-bottom:1px solid var(--line);white-space:normal;vertical-align:top}
.tbl td small{color:var(--ink-3);font-size:var(--t-12)}
.tbl-wrap{overflow-x:auto}
.tbl.fit{width:auto;min-width:min(100%,560px)}
.tbl.fit th,.tbl.fit td{padding-right:28px;white-space:nowrap}
.tbl.fit th:last-child,.tbl.fit td:last-child{padding-right:0;white-space:normal}
.tbl.kv th{width:128px;white-space:normal}
.num{text-align:right}

/* ---- 허가문서 ---- */
.doc details{border-top:1px solid var(--line)}
.doc details:last-of-type{border-bottom:1px solid var(--line)}
.doc summary{cursor:pointer;padding:13px 0;font-weight:600;font-size:var(--t-15);list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;color:var(--ink)}
.doc summary::-webkit-details-marker{display:none}
.doc summary::after{content:"";width:16px;height:16px;flex:none;margin-top:5px;background-color:var(--ink-3);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--dur) var(--ease)}
.doc details[open] summary::after{transform:rotate(180deg)}
.doc summary:hover{color:var(--green)}
.doc details .body{padding:0 0 18px;font-size:var(--t-15)}
.doc details .body p{margin:0 0 6px;white-space:pre-wrap}
.doc .plain{padding:2px 0 0}
.doc .plain h3{margin:16px 0 6px;font-size:var(--t-15)}
.doc .plain p{white-space:pre-wrap}
.doc .plain p.ind-sub{margin:4px 0;padding-left:.75em;border-left:2px solid var(--line,#ddd)}
.doc .doc-section{margin:22px 0 8px;font-size:var(--t-12);font-weight:600;color:var(--ink-3);letter-spacing:.02em;display:flex;align-items:center;gap:10px}
.doc .doc-section::after{content:"";flex:1;height:1px;background:var(--line)}
.doc .doc-section:first-child{margin-top:0}
.doc .sm-title{display:flex;flex-direction:column;gap:5px;min-width:0}
.doc .sm-count{color:var(--ink-3);font-weight:500;font-size:var(--t-12);white-space:nowrap;margin-left:auto;padding-right:8px;font-variant-numeric:tabular-nums}
.doc .pv{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-weight:400;line-height:1.9}
.doc .pv span{display:inline;margin-right:4px}
.doc .pv span{font-size:var(--t-12);color:var(--ink-2);background:var(--surface-2);border-radius:4px;padding:2px 7px;white-space:nowrap}
.doc .pv .pv-more{background:transparent;color:var(--ink-3)}
.doc details[open] .pv{display:none}
.doc-jump{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 14px}
.doc-jump a{text-decoration:none;color:var(--ink-2);font-size:var(--t-12);font-weight:600;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 10px;display:inline-flex;gap:5px;align-items:center;max-width:240px;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.doc-jump a .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-jump a:hover{border-color:var(--green-2);color:var(--green)}
.doc-jump a small{color:var(--ink-3);font-weight:500;font-variant-numeric:tabular-nums}
.doc-jump .spacer{flex:1}
.doc-toggle{border:0;background:transparent;color:var(--green);font-weight:600;font-size:var(--t-12);cursor:pointer;padding:4px 6px;border-radius:4px}
.doc-toggle:hover{background:var(--green-faint)}
/* 원문 표·문단 */
.doc .para{margin:0 0 6px;font-size:var(--t-15);white-space:pre-wrap;line-height:1.75;max-width:var(--measure)}
.doc .para p{margin:0 0 4px}
.doc table{border-collapse:collapse;margin:8px 0 12px;font-size:var(--t-13);width:auto;max-width:100%;white-space:normal}
.doc td,.doc th{border:1px solid var(--line-2);padding:6px 9px;vertical-align:top;line-height:1.55}
.doc th{background:var(--surface-2);font-weight:600}
.doc td p{margin:0 0 3px}
.doc sup,.doc sub{font-size:.75em}
/* 개요(outline): 단계별 들여쓰기 = 상위 단계 본문 열 */
.doc .outline{--mk:2.2em;padding:2px 0}
.doc .ol-item{display:grid;grid-template-columns:var(--mk) minmax(0,1fr);gap:0 6px;margin:0 0 7px;font-size:var(--t-15);line-height:1.75}
.doc .ol-item .mk{color:var(--green);font-weight:700;white-space:nowrap;text-align:right;padding-right:2px;font-variant-numeric:tabular-nums}
.doc .ol-item .tx{white-space:pre-wrap;overflow-wrap:anywhere;max-width:var(--measure)}
.doc .ol-item.lv1{margin-top:12px;font-weight:600}
.doc .ol-item.lv1 .tx{font-weight:600}
.doc .ol-item.lv2{margin-left:calc(var(--mk) + 6px);font-weight:400}
.doc .ol-item.lv3{margin-left:calc((var(--mk) + 6px) * 2);font-size:var(--t-14)}
.doc .ol-item.lv4{margin-left:calc((var(--mk) + 6px) * 3);font-size:var(--t-14);color:var(--ink-2)}
.doc .ol-item.lv5{margin-left:calc((var(--mk) + 6px) * 4);font-size:var(--t-14)}
.doc .ol-item.bullet{font-weight:400;margin-top:0}
.doc .ol-item.bullet .tx{font-weight:400}
.doc .ol-item.bullet.head{margin-top:12px}
.doc .ol-item.bullet.head .tx{font-weight:600}
.doc .ol-item.bullet.head .mk{color:var(--green)}
.doc .cont{font-weight:400}
.doc .cont.lv1{margin-left:calc(var(--mk) + 6px)}
.doc .cont.lv2{margin-left:calc((var(--mk) + 6px) * 2)}
.doc .cont.lv3{margin-left:calc((var(--mk) + 6px) * 3)}
.doc .cont.lv4{margin-left:calc((var(--mk) + 6px) * 4)}
.doc .cont.lv5{margin-left:calc((var(--mk) + 6px) * 5)}
.doc .para.cont{color:var(--ink-2)}
.doc .sub-h{margin:16px 0 6px;font-size:var(--t-13);font-weight:700;color:var(--green)}
.doc .note-line{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;margin:4px 0 8px;padding:7px 10px;border-radius:var(--r-1);background:var(--amber-bg);color:var(--amber);font-size:var(--t-13);line-height:1.6;max-width:var(--measure)}
.doc .note-line .mk{font-weight:700}
/* 이상반응 빈도·기관계 요약 */
.doc details.adr{border-top:0;margin-bottom:6px}
.doc details.adr summary{color:var(--green);padding-top:0}
.doc .adr-note{margin:0 0 10px;font-size:var(--t-13);color:var(--ink-2);line-height:1.6;max-width:var(--measure)}
.adr-matrix{font-size:var(--t-13)}
.adr-matrix th{vertical-align:bottom;white-space:normal}
.adr-matrix thead th small{display:block;font-weight:600;color:var(--ink-3);font-size:var(--t-12);margin-top:2px;font-variant-numeric:tabular-nums}
.adr-matrix tbody th{white-space:nowrap;background:transparent}
.adr-matrix td{line-height:1.55;min-width:110px}
.adr-matrix td:empty::after{content:"–";color:var(--ink-3)}
.doc .adr-terms{margin:8px 0 0;font-size:var(--t-12);color:var(--ink-2)}
.doc .adr-terms span{display:inline-block;margin:2px 8px 0 0;background:var(--surface-2);border-radius:4px;padding:1px 7px}
.dur{border-top:1px solid var(--line);padding:12px 0 14px}
.dur h3{margin:0 0 8px;font-size:var(--t-15);font-weight:800;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.dur h3 span{font-size:var(--t-12);color:var(--ink-3);font-weight:500;font-variant-numeric:tabular-nums}
.dur.danger h3{color:var(--red)}
.dur ul{list-style:none;padding:0;margin:0}
.dur li{font-size:var(--t-14);padding:3px 0}
.dur small{color:var(--ink-3)}
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;margin-bottom:10px}
.price{border-top:1px solid var(--line);padding:10px 0 12px}
.price .big{font-size:var(--t-24);font-weight:800;letter-spacing:-.02em;margin:2px 0;font-variant-numeric:tabular-nums}
.price .small{color:var(--ink-3);font-size:var(--t-12)}
.rule{border-top:1px solid var(--line);padding:14px 0}
.rule h4{margin:0 0 6px;font-size:var(--t-15);line-height:1.5}
.rule .meta{color:var(--ink-3);font-size:var(--t-12);margin-bottom:4px;font-variant-numeric:tabular-nums}
.rule details summary{cursor:pointer;color:var(--green);font-weight:600;font-size:var(--t-13)}
.rule .rule-raw{margin-top:8px}
.rule .rule-raw pre{margin-top:6px}
.rule pre{white-space:pre-wrap;font-family:inherit;font-size:var(--t-13);line-height:1.7;background:var(--surface-2);border-radius:var(--r-1);padding:12px 14px;overflow:auto;max-width:var(--measure)}
.rule .doc{background:var(--surface-2);border-radius:var(--r-1);padding:10px 14px;max-width:var(--measure)}
.rule .doc .outline{--mk:2.4em}
.rule .doc .ol-item,.rule .doc .para,.rule .doc .note-line{font-size:var(--t-14)}
.rule-sec{margin:10px 0 4px;font-size:var(--t-12);font-weight:700;color:var(--ink-3);letter-spacing:.02em}
.rule-sec:first-child{margin-top:0}
.rule-old{margin-top:10px}
.rule-old>summary{cursor:pointer;color:var(--ink-3);font-size:var(--t-12);font-weight:600}
.rule-old .doc{background:transparent;border:1px dashed var(--line);color:var(--ink-3)}
.rule-old .doc .ol-item .mk{color:var(--ink-3)}
.rec{border-top:1px solid var(--line);padding:14px 0}
.rec .head{display:flex;justify-content:space-between;gap:10px;color:var(--ink-3);font-size:var(--t-12);margin-bottom:6px;flex-wrap:wrap}
.rec h4{margin:0 0 6px;font-size:var(--t-15);line-height:1.55;max-width:var(--measure)}
.rec p{color:var(--ink-2);font-size:var(--t-14);max-width:var(--measure)}
.rec a{font-size:var(--t-12);font-weight:600;text-decoration:none}
.evi{display:grid}
.evi article{border-top:1px solid var(--line);padding:10px 0}
.evi h4{margin:0 0 3px;font-size:var(--t-14);font-weight:600;line-height:1.5}
.evi h4 a{text-decoration:none;color:var(--ink)}
.evi h4 a:hover{color:var(--green)}
.evi .meta{color:var(--ink-3);font-size:var(--t-12)}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:7px 0;border-top:1px solid var(--line);font-size:var(--t-14)}
.timeline li span{color:var(--ink-3);font-variant-numeric:tabular-nums}
.bar{height:8px;border-radius:4px;background:var(--green-2);min-width:2px}
.tbl td.year{width:70px}
.tbl td.amount{width:130px}
.tbl th.w-120{width:120px}
.facts.two-col{grid-template-columns:1fr 1fr}
.card.solo>h2{margin:0 0 12px}

/* ---- 검색 페이지(권두) ---- */
.frontis{max-width:760px;margin:22px auto 0;padding:26px 0 8px}
.frontis h1{font-size:var(--t-28);font-weight:800;letter-spacing:-.02em;line-height:1.25}
.frontis .sub{margin:12px 0 0;color:var(--ink-2);font-size:var(--t-16);line-height:1.7;max-width:var(--measure)}
.bigsearch{display:flex;align-items:center;gap:10px;margin:22px 0 0;height:54px;padding:0 6px 0 16px;border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--surface);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.bigsearch:focus-within{border-color:var(--green-2);box-shadow:0 0 0 3px var(--green-soft)}
.bigsearch>.ic{color:var(--ink-3);font-size:18px}
.bigsearch input{flex:1;border:0;outline:0;background:transparent;font-size:var(--t-17);height:100%;min-width:0}
.bigsearch input::placeholder{color:var(--ink-3)}
.bigsearch button{border:0;border-radius:var(--r-1);background:var(--green);color:var(--on-green);font-weight:700;font-size:var(--t-14);padding:0 16px;height:40px;cursor:pointer}
.bigsearch button:hover{background:var(--green-2)}
.examples{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:12px 0 0;font-size:var(--t-13);color:var(--ink-3)}
.examples a{border:1px solid var(--line);border-radius:999px;padding:4px 11px;text-decoration:none;color:var(--ink-2);font-size:var(--t-13);background:var(--surface);transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.examples a:hover{border-color:var(--green-2);color:var(--green)}
.indexes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:30px 0 0;border-top:1px solid var(--line-2)}
.indexes a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.indexes a strong{display:block;font-size:var(--t-15);font-weight:700}
.indexes a small{display:block;color:var(--ink-3);font-size:var(--t-13);margin-top:2px}
.indexes a .ic{color:var(--ink-4);font-size:18px}
.indexes a:hover strong{color:var(--green)}
.search-results{margin:22px auto 0;max-width:760px}
.search-results .empty{padding:10px 0}
.search-results a{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.search-results a:first-of-type{border-top:1px solid var(--line-2)}
.search-results a:hover strong{color:var(--green)}
.search-results strong{display:block;font-size:var(--t-15);font-weight:600}
.search-results small{color:var(--ink-3);font-size:var(--t-13)}
.search-results .cnt{color:var(--ink-3);font-size:var(--t-12);white-space:nowrap;font-variant-numeric:tabular-nums}
.search-hero{max-width:760px;margin:22px auto 0}

/* ---- 고정 페이지(읽기) ---- */
.static-page{max-width:var(--measure-read);margin:0 auto;padding:10px 0 20px}
.card.static-page{max-width:calc(var(--measure-read) + 64px);margin:0 auto;padding:28px 32px 32px}
.card.static-page>*{max-width:var(--measure-read)}
.static-page h1{font-size:var(--t-28);font-weight:800;letter-spacing:-.02em;margin:0 0 14px}
.static-page h2{font-size:var(--t-20);margin:38px 0 10px;padding-top:20px;border-top:1px solid var(--line)}
.static-page h3{font-size:var(--t-16);margin:18px 0 4px}
.static-page p,.static-page li{font-size:var(--t-16);line-height:1.8;color:var(--ink)}
.static-page .lead{font-size:var(--t-17);color:var(--ink-2)}
.static-page ul{padding-left:20px}
.static-page .tbl{font-size:var(--t-14)}
.static-page .tbl td{line-height:1.6}
.ssr{padding:10px 0}
.ssr dl{display:grid;grid-template-columns:140px 1fr;gap:6px 12px}
.ssr dt{color:var(--ink-3)}
.ssr dd{margin:0}
.disclaimer{color:var(--ink-3);font-size:var(--t-12)}

/* ---- 로딩 뼈대 ---- */
.skeleton{display:grid;gap:12px;padding:8px 0}
.skeleton i{display:block;height:12px;border-radius:4px;background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:sk 1.1s linear infinite}
.skeleton i:nth-child(2n){width:72%}
.skeleton i:nth-child(3n){width:48%}
@keyframes sk{to{background-position:-200% 0}}
.loading-line{color:var(--ink-3);font-size:var(--t-13);padding:10px 0}

/* ---- 감사 반영: 최소 글자 크기 12px, 장식 기호 대비, 터치 타깃 ---- */
small{font-size:var(--t-12)}
.doc-jump a small,.dur small,.tbl td small,.chip small,.adr-matrix thead th small{font-size:var(--t-12)}
.crumbs .sep{color:var(--ink-3);display:inline-flex}
.crumbs .sep .ic{font-size:14px}
.crumbs a{padding:4px 0;display:inline-block}
.doc-toggle{min-height:32px;padding:6px 8px}
.h3-link{display:inline-block;padding:4px 6px;margin:-4px -6px}
.foot-links a{padding:3px 0}

/* ---- 검색 결과 머리 · 표 변형 · 인쇄 ---- */
.results-head{max-width:760px;margin:10px auto 0;padding:14px 0 6px}
.results-head h1{font-size:var(--t-20);font-weight:800;letter-spacing:-.015em}
.results-head .sub{margin:6px 0 0;color:var(--ink-3);font-size:var(--t-13)}
body.landing .topsearch{display:none}
.tbl.products5 th:nth-child(1){width:36%}.tbl.products5 th:nth-child(2){width:18%}.tbl.products5 th:nth-child(3){width:14%}.tbl.products5 th:nth-child(4){width:12%}
.tbl.products5 td:last-child{padding-left:16px}
.tbl .src{white-space:nowrap}
.tbl td.num,.tbl td.code{white-space:nowrap}
@media (max-width:640px){.doc .pv{display:none}}
@media print{
  :root,:root[data-theme="dark"]{
  --paper:#f6f6f4;--surface:#fff;--surface-2:#f1f2ef;--surface-3:#e8eae6;
  --ink:#171a19;--ink-2:#4a524e;--ink-3:#5f6863;--ink-4:#9aa39e;
  --line:#e3e6e2;--line-2:#cdd3ce;
  --green:#0e5a45;--green-2:#157a5e;--green-soft:#dfeee7;--green-faint:#f2f8f5;--on-green:#fff;--link-line:rgba(14,90,69,.4);--raised:#fff;--img-dim:1;
  --amber:#7d5210;--amber-bg:#fdf3df;--amber-line:#efdcb0;--red:#a8261e;--red-bg:#fbebe9;--blue:#2b4d96;--blue-bg:#e9eefb;--violet:#5a3f9c;--violet-bg:#f1ecfb;
  --shadow-float:0 12px 32px -14px rgba(23,26,25,.3),0 2px 8px -4px rgba(23,26,25,.14);--shadow-lift:0 1px 2px rgba(23,26,25,.1);
  color-scheme:light;
  }
  .topbar,.runhead,.sidenav,.dev-link,.theme-toggle,.skip,.doc-jump,.topresults,.foot-links,.more,.system-switch{display:none!important}
  body{background:var(--surface);color:var(--ink);font-size:11pt}
  .page{max-width:none;padding:0}
  .card,.hero,.level,.products,.browse-head{border:0;border-top:1px solid var(--ink);border-radius:0;padding:12pt 0;margin:0;break-inside:avoid-page}
  .layout{display:block}
  .doc details{break-inside:avoid}
  .doc details>summary::after{display:none}
  a{color:var(--ink);text-decoration:none}
  .doc details:not([open])>.body{display:block}
}

/* ---- 바닥 ---- */
.foot{border-top:1px solid var(--line-2);margin:40px 0 0;padding:28px max(20px,calc((100vw - 1320px)/2)) 44px;color:var(--ink-3);font-size:var(--t-13);line-height:1.7;background:var(--surface)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:24px 40px;max-width:1320px;margin:0 auto}
.foot p{margin:0 0 8px}
.foot-brand{color:var(--ink);font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.foot-brand .brand-mark{width:22px;height:22px;font-size:12px;border-radius:6px}
.foot-tag{color:var(--ink-3);font-weight:500}
.foot-h{color:var(--ink);font-weight:700;margin:0 0 6px}
.foot-links{display:flex;flex-direction:column;gap:4px}
.foot-links a{color:var(--ink-2);text-decoration:none}
.foot-links a:hover{color:var(--green)}
.foot-stamp{font-variant-numeric:tabular-nums}

/* ---- 반응형 ---- */
@media (max-width:980px){
  .layout{grid-template-columns:1fr;gap:0}
  .sidenav{position:sticky;top:var(--top);z-index:20;max-height:none;display:flex;flex-wrap:nowrap;gap:2px;padding:8px 0;margin:0 -20px 12px;padding-left:20px;padding-right:20px;font-size:var(--t-12);overflow-x:auto;background:var(--paper);border-bottom:1px solid var(--line);scrollbar-width:none}
  .sidenav::-webkit-scrollbar{display:none}
  .sidenav a{margin:0;padding:6px 10px;white-space:nowrap;flex:none}
  .sidenav a em{display:none}
  .hero{grid-template-columns:1fr}
  .pillcard{flex-direction:row;align-items:flex-start;border-left:0;padding:16px 0 0;border-top:1px solid var(--line)}
  .pillcard img,.pillcard .noimg{width:140px;height:110px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two,.price-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .indexes{grid-template-columns:1fr}
}
@media (max-width:640px){
  .topbar{gap:10px;padding:0 14px}
  .brand-name,.dev-link,.topnav{display:none}
  .theme-toggle{padding:0 7px}.theme-toggle .lbl{display:none}
  body.landing .brand-name{display:inline}
  body.landing .topbar{justify-content:space-between}
  body.landing .topnav{display:flex;margin-left:0}
  .topsearch{max-width:none}
  .topsearch button{padding:0 10px}
  .page{padding:16px 14px 40px}
  .runhead{margin:0 -14px;padding:0 14px}
  .sidenav{margin:0 -14px 12px;padding-left:14px;padding-right:14px}
  .card{padding:16px 16px 18px;border-radius:10px}
  .hero{padding:18px 16px}
  .pillcard{border-left:0;padding:0}
  .hero h1{font-size:var(--t-24)}
  .facts{grid-template-columns:1fr 1fr;gap:0 16px}
  .pillcard{flex-direction:column}
  .pillcard img,.pillcard .noimg{width:100%;height:150px}
  .timeline li{grid-template-columns:90px 1fr}
  .frontis{margin-top:8px;padding-top:12px}
  .frontis h1{font-size:var(--t-24)}
  .doc .ol-item.lv2{margin-left:10px}
  .doc .ol-item.lv3{margin-left:22px}
  .doc .ol-item.lv4{margin-left:34px}
  .doc .cont.lv1{margin-left:10px}
  .doc .cont.lv2{margin-left:22px}
  .foot{padding:24px 14px 36px}
}
/* 구조화 프로파일 (2026-09-05) */
#profile h3{margin:18px 0 6px;font-size:var(--t-15);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#profile h4{margin:10px 0 4px;font-size:var(--t-13);color:var(--ink-2)}
#profile h4 small,#profile h3 small{color:var(--ink-3);font-weight:500}
.profile-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px 16px}
.profile-list li{padding:5px 8px;border-radius:var(--r-1);cursor:pointer;line-height:1.6;font-size:var(--t-14)}
.profile-list li:hover,.profile-list li:focus{background:var(--surface-2);outline:none}
.profile-list li small{color:var(--ink-3)}
.profile-terms{margin:0 0 6px;font-size:var(--t-14);line-height:1.8;max-width:var(--measure)}
.profile-terms small{color:var(--ink-3)}
.profile-terms .std-term{color:inherit;text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}
.profile-terms .std-term:hover{text-decoration-style:solid}
.hub h1{font-size:var(--t-20,1.25rem);margin:0 0 8px}
.hub-list{margin:8px 0 0;padding-left:18px;line-height:1.8;max-width:var(--measure)}
.hub-list small{color:var(--ink-3);margin-left:6px}
.profile-std{font-weight:400;color:var(--ink-3);margin-left:6px}
/* 원문 절 아래 "이 절에서 뽑은 것" — 원문(plain)과 구분되는 옅은 면 */
.structured{margin:10px 0 14px;padding:10px 14px;border-left:3px solid var(--line,#d9d4c7);background:var(--surface-2,#faf8f3);border-radius:0 6px 6px 0}
.structured h4{margin:0 0 4px;font-size:var(--t-14);display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.structured .std-line{margin:0 0 6px;font-size:var(--t-12,.8rem);color:var(--ink-3)}
.structured-list{margin:0;padding-left:16px;line-height:1.7;font-size:var(--t-14);max-width:var(--measure)}
.structured-list li{margin:0 0 2px}
.structured-list li[data-span]{cursor:pointer}
.structured-list li[data-span]:hover b{text-decoration:underline dotted}
.structured-list code{font-size:.85em;padding:0 4px;background:var(--surface-3,#efece4);border-radius:3px}
.structured-list small{color:var(--ink-3);margin-left:4px}
.structured-list small.rule{font-size:.7em;padding:0 3px;border:1px solid var(--line,#d9d4c7);border-radius:3px;vertical-align:middle}
.structured.empty{opacity:.75}
.spark{display:flex;align-items:flex-end;gap:2px;height:64px;margin:6px 0}.spark span{flex:1;background:var(--accent,#3b82f6);opacity:.75;border-radius:2px 2px 0 0;min-width:2px}
.notes{font-size:var(--t-12,12px);color:var(--muted,#666);margin-top:12px}