/* geongi.manuz.com — 건강기능식품 원료·기능성.
   컨셉: 식품 포장의 영양성분표·표시 상자. 미색 포장지 바탕, 검정 굵은 테두리, 두꺼운 구분선, 좁은 고딕 숫자.
   색은 흑백만(강조도 굵기·반전으로). 본문 Pretendard 자체 호스팅, 숫자 Archivo Narrow(비동기). 라이트 고정(자동 다크모드 없음). 모바일 390px 기준, 터치 44px. */
:root {
  color-scheme: light;
  --paper: #f4f1e8; --card: #ffffff; --ink: #111111; --ink-2: #363636; --muted: #5f5f5f; --track: #e2ded2;
  --sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --num: "Archivo Narrow", "Pretendard", "Helvetica Neue", Arial, sans-serif;
  --wrap: 920px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--sans); font-size: 16px; line-height: 1.65; color: var(--ink); background: var(--paper); word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: 16px; }
.skip { position: absolute; left: -9999px; top: 10px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; font-weight: 700; }
.skip:focus { left: 10px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: .875rem; color: var(--ink-2); }
h2 { font-size: 1.3rem; line-height: 1.35; letter-spacing: -.02em; margin: 36px 0 12px; padding-top: 10px; border-top: 5px solid var(--ink); }
.h-sub { font-size: .8rem; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.h3 { font-size: 1rem; margin: 20px 0 8px; }
section > p { margin: 8px 0; }

/* 머리: 흰 띠 + 굵은 밑줄, 검정 상자 워드마크 */
.mast { background: var(--card); border-bottom: 6px solid var(--ink); position: sticky; top: 0; z-index: 20; }
.mast-in { display: flex; align-items: center; gap: 12px; min-height: 58px; padding-block: 6px; }
.wordmark { display: inline-flex; align-items: stretch; flex: none; text-decoration: none; border: 2.5px solid var(--ink); font-weight: 700; line-height: 1; }
.wm-box { background: var(--ink); color: #fff; padding: 8px 8px 7px; letter-spacing: -.02em; }
.wm-text { padding: 8px 9px 7px; letter-spacing: -.02em; }
.mast-search { display: flex; margin-left: auto; flex: 1; max-width: 340px; min-width: 0; border: 2.5px solid var(--ink); background: var(--card); }
.mast-search input { flex: 1; min-width: 0; height: 40px; border: 0; padding: 0 10px; font: inherit; font-size: 16px; color: var(--ink); background: transparent; }
.mast-search input:focus { outline: none; }
.mast-search button { flex: none; width: 44px; border: 0; border-left: 2.5px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; display: grid; place-items: center; }
.nav { border-top: 1px solid var(--ink); }
.nav-in { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.nav-in::-webkit-scrollbar { display: none; }
.nav a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: .92rem; font-weight: 600; text-decoration: none; border-right: 1px solid var(--ink); }
.nav a:first-child { border-left: 1px solid var(--ink); }
.nav a:hover { background: var(--paper); }
.nav a[aria-current="page"] { background: var(--ink); color: #fff; }
@media (max-width: 560px) {
  .mast-in { flex-wrap: wrap; gap: 8px; }
  .mast-search { order: 3; flex-basis: 100%; max-width: none; }
  .nav-in { padding-inline: 0; }
  .nav a:first-child { border-left: 0; }
}
.main { flex: 1; padding-block: 18px 44px; }

/* 소개 */
.hero { padding: 4px 0 14px; }
.eyebrow { margin: 0 0 6px; font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-2); }
.h1 { margin: 0; font-size: clamp(1.65rem, 2.6vw + 1rem, 2.4rem); line-height: 1.2; letter-spacing: -.035em; font-weight: 700; }
.lead { margin: 10px 0 0; color: var(--ink-2); max-width: 660px; }
.asof { margin: 8px 0 0; font-size: .85rem; color: var(--muted); }

/* 검색 */
.search { display: flex; margin: 6px 0 22px; max-width: 560px; border: 3px solid var(--ink); background: var(--card); }
.search input { flex: 1; min-width: 0; height: 50px; padding: 0 14px; font: inherit; font-size: 1.05rem; color: var(--ink); background: transparent; border: 0; }
.search input:focus { outline: none; box-shadow: inset 0 -3px 0 var(--ink); }
.search button { flex: none; padding: 0 20px; font: inherit; font-weight: 700; color: #fff; background: var(--ink); border: 0; cursor: pointer; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; font-weight: 700; color: #fff !important; background: var(--ink); text-decoration: none; border: 2.5px solid var(--ink); }
.btn:hover { background: var(--card); color: var(--ink) !important; }

/* 영양성분표 상자 */
.facts { background: var(--card); border: 3px solid var(--ink); padding: 6px 12px 8px; max-width: 520px; margin: 4px 0 8px; }
.facts-h { margin: 0; font-size: 1.9rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.15; }
.facts-sub { margin: 2px 0 4px; font-size: .82rem; color: var(--ink-2); }
.rule-thick { height: 10px; background: var(--ink); margin: 4px -2px; }
.rule-mid { height: 5px; background: var(--ink); margin: 2px -2px; }
.facts dl { margin: 0; }
.lrow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; border-top: 1px solid var(--ink); }
.facts dl .lrow:first-child { border-top: 0; }
.lrow dt { margin: 0; min-width: 0; }
.lrow dd { margin: 0; text-align: right; flex: none; max-width: 60%; }
.lrow dd.num { font-size: 1.1rem; font-weight: 700; }
.lrow.b dt { font-weight: 700; }
.lrow.ind dt { padding-left: 1em; color: var(--ink-2); }
.lrow.ind dd { font-weight: 500; }
.lrow.big dt { font-size: 1.05rem; }
.lrow.big dd { font-size: 1.7rem; line-height: 1.1; }
.lrow.head { font-size: .78rem; font-weight: 700; border-top: 0; padding: 4px 0 2px; }
.lrow dd:not(.num) { font-size: .92rem; }
.facts-foot { margin: 4px 0 0; font-size: .78rem; color: var(--ink-2); line-height: 1.5; }
.tag { display: inline-block; font-size: .7rem; font-weight: 700; padding: 0 5px; margin-left: 6px; border: 1.5px solid var(--ink); vertical-align: 2px; line-height: 1.5; letter-spacing: 0; }

/* 원문 인용 */
.orig { margin: 8px 0; padding: 12px 14px; background: var(--card); border: 1px solid var(--ink); border-left: 8px solid var(--ink); font-size: 1rem; }
.orig.sm { font-size: .9rem; padding: 8px 10px; margin: 6px 0; }
.orig-p { margin: 8px 0; }

/* 주의사항: 검정 띠 제목 */
.caution { margin-top: 30px; border: 3px solid var(--ink); background: var(--card); }
.caution h2 { margin: 0; padding: 8px 12px; border: 0; background: var(--ink); color: #fff; font-size: 1.1rem; }
.caution > p, .caution > .orig { margin: 0; padding: 10px 12px; }
.caution .orig { border: 0; font-weight: 600; }
.caution .consult-in { border-top: 2px dashed var(--ink); }
.consult { margin: 24px 0; padding: 12px 14px; border: 2.5px solid var(--ink); background: var(--card); font-size: .95rem; }
.consult b { display: inline-block; background: var(--ink); color: #fff; padding: 0 6px; margin-right: 6px; font-size: .82rem; }

/* 해설 */
.notes { background: var(--card); border: 2px solid var(--ink); padding: 2px 14px 6px; margin-top: 28px; }
.notes h2 { margin: 10px 0 4px; padding: 0; border: 0; font-size: 1.05rem; }
.notes p { margin: 8px 0; }
.notes p.small { border-top: 1px solid var(--ink); padding-top: 6px; color: var(--muted); }

/* 기능성 타일 */
.tiles { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.tiles a { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 76px; padding: 10px 12px; background: var(--card); border: 2px solid var(--ink); text-decoration: none; }
.tiles a:hover { background: var(--ink); color: #fff; }
.t-name { font-weight: 700; line-height: 1.35; }
.t-num { font-size: .85rem; color: inherit; opacity: .8; }
@media (max-width: 440px) { .tiles { grid-template-columns: 1fr 1fr; } .tiles a { padding: 8px 10px; } .t-name { font-size: .92rem; } }

/* 원료 카드(기능성 분류 페이지) */
.cards { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 10px; }
.card { background: var(--card); border: 2px solid var(--ink); padding: 10px 12px; }
.c-h { margin: 0; font-weight: 700; font-size: 1.05rem; }
.c-f { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .88rem; border-top: 1px solid var(--ink); padding-top: 6px; }
.c-f b { font-size: 1rem; }

/* 제품 목록 */
.plist { list-style: none; margin: 8px 0; padding: 0; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); background: var(--card); }
.plist li { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 7px 10px; border-top: 1px solid var(--ink); }
.plist li:first-child { border-top: 0; }
.plist a { font-weight: 700; }
.plist .meta { font-size: .82rem; color: var(--muted); }
.pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 12px 0; }
.pager a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 2px solid var(--ink); background: var(--card); text-decoration: none; font-weight: 700; }

/* 표 */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 3px solid var(--ink); background: var(--card); margin: 8px 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th, .tbl td { padding: 9px 10px; border-top: 1px solid var(--ink); text-align: left; vertical-align: top; }
.tbl thead th { font-size: .78rem; font-weight: 700; white-space: nowrap; border-top: 0; border-bottom: 5px solid var(--ink); }
.tbl tbody tr:first-child > * { border-top: 0; }
.tbl tbody th { font-weight: 700; }
.tbl tbody th[scope="row"] { min-width: 8em; }
.tbl .r { text-align: right; white-space: nowrap; }
.tbl td.r.num { font-size: 1.02rem; font-weight: 700; }
.tbl.kv th { width: 8.5em; white-space: nowrap; }
.cmp-tbl th[scope="col"] { min-width: 11rem; white-space: normal; }
.cmp-tbl td { min-width: 11rem; }

/* 막대 그래프 */
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .charts { grid-template-columns: 1fr; } }
.hist { margin: 8px 0; background: var(--card); border: 2px solid var(--ink); padding: 10px 12px; }
.hist figcaption { font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.bars li { display: grid; grid-template-columns: 5.5rem 1fr 3.5rem; gap: 8px; align-items: center; font-size: .85rem; }
.b-lbl { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-bar { height: 14px; background: var(--track); }
.b-bar span { display: block; height: 100%; background: var(--ink); }
.b-val { text-align: right; font-weight: 700; }

/* 칩·링크 */
.chips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 2px solid var(--ink); background: var(--card); font-size: .9rem; font-weight: 600; text-decoration: none; }
.chips a:hover { background: var(--ink); color: #fff; }
.links { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; }
.links.cols { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 18px; }
.links li { min-height: 32px; }
.more { margin: 10px 0; border: 2px solid var(--ink); background: var(--card); }
.more summary { cursor: pointer; display: flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 700; }
.more > *:not(summary) { margin: 0; padding: 4px 12px 12px; }
.toc { display: flex; flex-wrap: wrap; gap: 0 4px; font-size: .9rem; margin: 4px 0 8px; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
#data ul, #limits ul, #words ul, #gate ul, #method ol { padding-left: 1.2em; }
#data li, #limits li, #words li, #gate li, #method li { margin: 6px 0; }

/* 공용 조각(pub-*) */
.crumbs ol { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: .8rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 4px; }
.ad { min-height: 280px; margin: 30px 0; padding: 8px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--ink); }
.faq details:first-of-type { border-top: 3px solid var(--ink); }
.faq summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; font-weight: 700; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--num); font-size: 1.4rem; flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq-a { padding: 0 0 12px; color: var(--ink-2); }
.src-block { margin-top: 40px; padding: 4px 14px 10px; border: 2px solid var(--ink); background: var(--card); }
.src-block h2 { font-size: 1rem; margin: 10px 0 4px; padding: 0; border: 0; }
.src { padding-left: 1.2em; font-size: .88rem; }
.src li { margin: 4px 0; }
.changelog { padding-left: 1.2em; font-size: .9rem; }
.changelog time { font-family: var(--num); color: var(--muted); margin-right: 6px; }

/* 꼬리: 검정 반전 */
.foot { background: var(--ink); color: #e9e9e9; padding: 26px 0 34px; font-size: .84rem; }
.foot a { color: #fff; }
.foot-brand { margin: 0 0 8px; font-weight: 700; font-size: 1rem; color: #fff; }
.foot-note { margin: 6px 0; max-width: 720px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 14px; margin: 12px 0 8px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 40px; }
.foot-copy { margin: 0; color: #a8a8a8; }
.tbl td.nw { white-space: nowrap; }