/* ui-refine.css — cand-apple 기반 최종 덮어쓰기 레이어(inline → editorial → product-refresh → 이 파일). 잉크·쿨그레이 중성 톤, 빨강=중국 표기만, 파랑=행동·링크. */

/* ═══ 1. 토큰 ═══════════════════════════════════════════ */
:root{
  color-scheme:light dark;
  --bg:#f5f5f7; --card:#fff; --soft:#f2f2f5; --soft-2:#ebebef; --chip:#f2f2f5;
  --raised:#fff; --raised-soft:#f2f2f5;                 /* 대화상자 면 / 대화상자 안 상자 */
  --text:#1d1d1f; --sub:#48484e; --muted:#6b6b72;
  --line:#e6e6eb; --line-2:#d4d4da; --ctl-line:#8a8a91;
  --blue:#0066cc; --blue-dk:#0055aa; --blue-bg:#eaf2fc; --blue-bg-2:#dbe8f8; --focus:#0071e3;
  --accent:#0066cc; --on-accent:#fff;                   /* 채움 CTA(히어로·장바구니) */
  --ink:#1d1d1f; --on-ink:#fff;
  --red:#c23a2e; --red-dk:#b3261e; --red-bg:#fff3f2; --red-line:#f3d0cb;
  --green:#466653; --green-bg:#eef3ef; --green-line:#d9e3dc;          /* 저채도 세이지: '통과/안전' 신호등 오독 방지 */
  --amber:#8a5700; --amber-bg:#fdf4e3; --amber-line:#ecd9b0;
  --sel-bg:#1d1d1f; --sel-fg:#fff; --sel-line:#1d1d1f;
  --seg-bg:#e9e9ee; --seg-on:#fff;
  --scrim:rgba(10,10,12,.42);
  --shadow:0 0 0 1px rgba(0,0,0,.02),0 1px 2px rgba(0,0,0,.04),0 6px 16px -8px rgba(0,0,0,.08);
  --shadow-hi:0 0 0 1px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.05),0 16px 36px -12px rgba(0,0,0,.16);
  --shadow-seg:0 1px 2px rgba(0,0,0,.08),0 2px 8px -2px rgba(0,0,0,.08);
  --shadow-pop:0 0 0 1px rgba(0,0,0,.04),0 8px 24px -6px rgba(0,0,0,.18),0 24px 64px -16px rgba(0,0,0,.22);
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px; --r:var(--r-lg);
}

/* ═══ 2. 레이아웃·타이포 ═════════════════════════════════ */
body{background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;letter-spacing:-.01em;
  word-break:keep-all;overflow-wrap:break-word;text-rendering:optimizeLegibility}
/* anywhere 는 긴 URL·주소가 들어가는 곳만(전역에 주면 flex 버튼의 최소 폭이 한 글자로 줄어 '삭/제'처럼 쪼개짐) */
.dlg .srcs,dd,.contact-address{overflow-wrap:anywhere}
h1,h2,h3,.news b{text-wrap:balance}
p,.limitnote,.search-scope,footer,.okbox .unk,.evidence-box p{text-wrap:pretty}
.card .meta,.badge2,.trust span,.tag,.evidence-box,.limitnote,footer,.search-scope,.tabs button,.opts select,.tile .lb,.tile small,
.eyebrow,.hero-caption,.alt,.chips button,.links a,.report-button,.madebox{letter-spacing:0}
a{text-underline-offset:3px}
::selection{background:color-mix(in srgb,var(--blue) 22%,transparent)}
.wrap{max-width:1220px;padding:0 32px}
.sec{margin-top:56px;border-top:0;padding-top:0}
.sec h2{font-size:24px;font-weight:700;letter-spacing:-.025em;line-height:1.3}
.sec h2 .sub{font-size:13px;font-weight:400;color:var(--muted);letter-spacing:0}

/* ═══ 3. 내비 ════════════════════════════════════════════ */
.nav{padding:14px 0;border-bottom:1px solid var(--line);gap:24px}
.logo{font-size:17px;font-weight:700;letter-spacing:-.02em;gap:9px}
.logo i{width:26px;height:26px;border-radius:var(--r-sm);background:var(--ink);color:var(--on-ink);font-size:14px;font-weight:700}
.logo-caption{font-size:12px!important;color:var(--muted)!important;font-weight:400}
.nav nav{font-size:13px;gap:2px;color:var(--sub);font-weight:500}
.nav nav a{padding:7px 10px;border-radius:var(--r-sm);color:var(--sub)}
.skip-link{border-radius:var(--r-md);box-shadow:var(--shadow-pop);font-size:14px}

/* ═══ 4. 히어로 ══════════════════════════════════════════ */
.hero{background:none;border:0;margin:0;padding:36px 0 24px}
.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:end}
.eyebrow{background:none;padding:0;border-radius:0;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
/* 두 톤 헤드라인: 앞줄은 보조색, 핵심어 '나의 장보기.'는 잉크 */
.hero h1{font-size:clamp(34px,3.9vw,52px);line-height:1.12;letter-spacing:-.035em;font-weight:700;margin:14px 0;color:var(--muted)}
.hero h1 em{color:var(--text)}
.hero p{font-size:16px;line-height:1.65;color:var(--sub);max-width:34em}
.search-cta{background:var(--accent);color:var(--on-accent);border-radius:var(--r-pill);min-height:44px;padding:10px 20px 10px 22px;
  font-size:15px;font-weight:600;gap:14px;margin-top:22px;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.hero-caption{font-size:12px;color:var(--muted);margin-top:12px}
.hero .tiles{grid-template-columns:repeat(3,minmax(0,1fr));background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);overflow:hidden;margin:0}
.tile{display:flex;flex-direction:column;align-items:flex-start;padding:20px 20px 18px;background:none;border-radius:0;box-shadow:none;min-width:0;color:var(--text)}
.tile+.tile{border-left:1px solid var(--line)}
.tile .lb{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--sub)}
.tile .lb::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.tile.cn .lb::before{background:var(--red)} .tile.ok .lb::before{background:var(--green)} .tile.cos .lb::before{background:var(--blue)}
.hero .tile b,.tile b{font-size:clamp(26px,2.6vw,36px);line-height:1.1;font-weight:600;letter-spacing:-.03em;margin:12px 0 14px;
  white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--text)}
.tile.cn b{color:var(--red-dk)}
.tile.ok b,.tile.cos b{color:var(--text)}
.tile small{margin-top:auto;font-size:12px;font-weight:500;color:var(--muted);line-height:1.5;text-wrap:balance}
.top{margin:24px 0 0;padding-top:14px;border-top:1px solid var(--line);gap:6px;font-size:13px}
.top>span{font-size:13px;color:var(--sub);font-weight:500;margin-right:6px}
.top button{font-size:13px;font-weight:500;padding:5px 11px;border-radius:var(--r-pill);background:var(--card);border:1px solid var(--ctl-line);
  color:var(--text);box-shadow:none;line-height:1.5}
.top button small{font-size:12px;color:var(--muted);margin-left:5px;font-weight:500;font-variant-numeric:tabular-nums}
.top button:hover{background:var(--card);color:var(--text)}

/* ═══ 5. 필터·결과 툴바 ══════════════════════════════════ */
#productSearch{margin-top:8px}
.bar{padding:0}
.panel{background:none;padding:0;box-shadow:none;border-radius:0}
.mode,#mode{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;background:var(--seg-bg);border:0;border-radius:var(--r-md)}
.mode button{min-height:44px;border:0;border-radius:var(--r-sm);background:none;color:var(--sub);font-size:15px;font-weight:500;padding:9px 8px;
  line-height:1.35;white-space:normal;box-shadow:none}
/* 탭의 의미색 점 = 카드 판정 박스 색 */
.mode button::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;vertical-align:.12em;background:var(--muted)}
.mode button[data-m="cn"]::before{background:var(--red)} .mode button[data-m="ok"]::before{background:var(--green)}
.mode button[data-m="cos"]::before{background:var(--blue)}
#mode button[data-m].on,.mode button[data-m].on{background:var(--seg-on);color:var(--text);font-weight:600;box-shadow:inset 0 0 0 1px var(--muted),var(--shadow-seg);border:0}   /* 선택 윤곽: 트랙 대비 4.3:1(라이트)·6.3:1(다크) */
.row2{margin-top:12px;gap:10px}
.search input{min-height:48px;padding:12px 14px 12px 42px;border:1px solid var(--ctl-line);border-radius:var(--r-md);background:var(--card);
  color:var(--text);font-weight:400;box-shadow:none}
.search input::placeholder{color:var(--muted)}
.search input:focus{background:var(--card);border-color:var(--focus);outline:2px solid color-mix(in srgb,var(--focus) 35%,transparent);outline-offset:0}
.search::before{border-color:var(--muted)} .search::after{background:var(--muted)}
select{border:1px solid var(--ctl-line);border-radius:var(--r-md);background-color:var(--card);color:var(--text);font-size:14px;font-weight:500;
  padding-top:12px;padding-bottom:12px;min-height:48px}
#co{width:220px;max-width:36%}
.search-scope{font-size:13px;color:var(--muted);margin:10px 0 0;line-height:1.6}
.tabs{gap:6px;margin:14px 0 0;padding:0 0 18px;border-bottom:1px solid var(--line);max-height:none;overflow:visible}
.tabs button{min-height:34px;padding:5px 11px;border-radius:var(--r-sm);border:1px solid var(--ctl-line);background:var(--card);color:var(--text);
  font-size:13px;font-weight:500;line-height:1.4}
.tabs button span{opacity:1;margin-left:6px;font-size:12px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.tabs button.on{background:var(--sel-bg);color:var(--sel-fg);border-color:var(--sel-line)}
.tabs button.on span{color:inherit;opacity:.72}
/* 결과 머리: [결과 수 | 정렬·개수] 한 줄, 안내문은 그 아래 */
.bar+.wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center}
.bar+.wrap>*{grid-column:1/-1;min-width:0}
.bar+.wrap>.stats{grid-row:1;grid-column:1;margin:24px 0 10px}
.bar+.wrap>.opts{grid-row:1;grid-column:2;margin:24px 0 10px}
.bar+.wrap>.limitnote{grid-row:2;margin:0 0 16px}
.stats{font-size:15px;font-weight:500;color:var(--sub);line-height:1.5}
.stats b{font-size:20px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-right:1px}
.opts{justify-content:flex-end;gap:8px}
.opts select{font-size:13px;font-weight:500;min-height:36px;padding:6px 32px 6px 12px;border:1px solid var(--ctl-line);border-radius:var(--r-md);
  background-color:var(--card);color:var(--text);box-shadow:none}
.limitnote{background:none;border:0;border-left:2px solid var(--line-2);border-radius:0;padding:2px 0 2px 14px;font-size:13px;
  line-height:1.65;color:var(--sub);max-width:92ch}
.limitnote a{color:var(--blue)}

/* ═══ 6. 카드(식품) ══════════════════════════════════════ */
.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px;padding-bottom:8px}
.card{container:card/inline-size;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:14px 16px 10px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;row-gap:0;align-content:stretch;
  contain-intrinsic-size:auto 500px;transition:border-color .15s,box-shadow .15s}
.card>*{min-width:0}
/* 영역 순서 = DOM 순서(근거 배지만 예외, 포커스 없음). 근거 배지는 '나머지 원재료' 주석으로 읽히지 않게 늘 자기 줄.
   fill 은 '살펴보기' 위에서 남는 높이를 먹어 같은 행 카드의 아래쪽(제보·담기·쇼핑몰 줄)을 맞춘다. '살펴보기' 띠는 아래 출처 상자
   높이만큼 어긋날 수 있다(subgrid 로 맞추려면 content-visibility·container 의 레이아웃 격리를 풀어야 해서 쓰지 않음) */
.card:not(.cos){grid-template-areas:"head head head" "box box box" "more more more" "trust2 trust2 trust2" "alt alt alt" "tar tar tar"
  "src src src" "fill fill fill" "cta cta cta" "ev ev ev" "rep rep add" "links links links";
  grid-template-rows:repeat(7,auto) 1fr repeat(4,auto)}
.card>.head{grid-area:head} .card>.warn,.card>.okbox,.card>.flagbox{grid-area:box}
.card>details{grid-area:more} .card>.trust{grid-area:trust2}
.card>.alt{grid-area:alt} .card>.tarbox{grid-area:tar} .card>.src{grid-area:src}
.card>.detailbtn{grid-area:cta} .card>.evidence-box{grid-area:ev} .card>.report-button{grid-area:rep}
.card>.addbtn{grid-area:add} .card>.links{grid-area:links} .card>.madebox{grid-area:made}

.card .head{display:block;min-height:0;border:0;padding:0}
.card .head .meta,.head .meta{font-size:13px;font-weight:500;color:var(--muted);line-height:1.5}
.card h3{font-size:17px;line-height:1.4;font-weight:600;letter-spacing:-.015em;margin:3px 0 0;color:var(--text)}
.card .head[data-prod]{cursor:pointer}

/* 판정 박스: 한 겹 틴트. 행마다 '재료명 원산지'를 붙여 쓰고 헤어라인으로 나눈다 */
.card .warn,.card .okbox,.card .flagbox{margin:12px 0 0;border:0;border-radius:var(--r-md);padding:8px 12px 6px}
.card .warn{background:var(--red-bg)}
.card .okbox{background:var(--green-bg)}
.card.unk .okbox,.card .flagbox,.card.cos .okbox{background:var(--soft)}
.card .warn .t,.card .okbox .t,.card .flagbox .t{display:flex;align-items:center;gap:7px;margin:0 0 3px;font-size:13px;font-weight:600;line-height:1.5}
.card .warn .t{color:var(--red-dk)} .card .okbox .t{color:var(--green)}
.card.unk .okbox .t,.card.cos .okbox .t,.card .flagbox .t{color:var(--sub)}
.card .warn .t::before,.card .okbox .t::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.card .warn ul,.card .okbox ul{display:grid;grid-template-columns:minmax(0,1fr);column-gap:18px;margin:0;padding:0}
/* 재료 4개 이상 + 카드 안쪽 330px 이상(1024·1440)일 때만 2열. 폰·768 은 한 열이라 '재료명 원산지'가 부서지지 않는다 */
@container card (min-width:330px){
  .card .warn ul:has(li:nth-child(4)),.card .okbox ul:has(li:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .card .warn ul:has(li:nth-child(4)) li:nth-child(2),.card .okbox ul:has(li:nth-child(4)) li:nth-child(2){border-top:0}
}
.card .warn li,.card .okbox li{display:block;background:none;border-radius:0;padding:3px 0;border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent);
  font-size:15px;line-height:1.45;font-weight:400;color:var(--text)}
.card .okbox li{border-top-color:var(--green-line)}
.card.unk .okbox li{border-top-color:var(--line-2)}
.card .warn li:first-child,.card .okbox li:first-child{border-top:0}
.card .warn li b{font-weight:700;margin-right:7px}
.card .okbox li b{font-weight:600;margin-right:7px}
.card .warn li span,.card .okbox li span{display:inline-block;max-width:100%;font-size:13px;font-weight:600;color:var(--red-dk)}
.card .okbox li span{font-weight:500;color:var(--green)}
.card.unk .okbox li span{color:var(--sub)}
.card .okbox .unk{margin-top:5px;font-size:12px;line-height:1.55;color:var(--muted)}
.card.unk .okbox .unk{font-size:13px;color:var(--sub)}   /* 미확인 탭의 핵심 정보(미표시 재료 수) */
.card .okbox ul:empty{display:none}

/* 나머지 원재료 */
.card>details{margin:6px 0 0;align-self:center;font-size:13px;color:var(--sub);line-height:1.5}
.card>details summary{font-weight:500;color:var(--sub);min-height:0;width:max-content;max-width:100%}
.card>details summary::before{color:var(--muted)}
.card>details ul{margin:6px 0 0;padding-left:16px;line-height:1.7;font-size:13px}
.card>details p{font-size:13px;line-height:1.65;color:var(--sub)}

/* 근거 배지 = 푸터 범례와 같은 모양: 판매처 표기(mid)·대조 필요(b-mid)는 무채색 윤곽, 약한 근거(weak)는 호박색 면,
   출처 미등록(b-weak)은 면+선+굵게, 오래된 조사(b-old)는 호박색 윤곽. 호박색은 약한 근거에만 */
.card .trust{margin:6px 0 0;gap:4px;justify-content:flex-start;align-content:center}
.trust span,.badge2,.tag{font-size:12px;font-weight:500;line-height:1.5;padding:1px 7px;border-radius:var(--r-sm);white-space:normal}
.good,.b-strong{background:var(--green-bg);color:var(--green)}
.mid,.b-mid{background:none;color:var(--sub);box-shadow:inset 0 0 0 1px var(--line-2)}
.weak,.b-weak{background:var(--amber-bg);color:var(--amber)}
.b-weak{box-shadow:inset 0 0 0 1px var(--amber-line);font-weight:600}
.b-old{background:none;color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber-line)}

/* 원산지 비교: 초록 면 대신 무채색 윤곽 칩(대안 = 안전 오독 방지) */
.card .alt{margin:8px 0 0;border:0;padding:0;gap:6px;font-size:12px;color:var(--muted);align-items:center}
.card .alt span{font-size:12px;font-weight:500;color:var(--muted);margin-right:2px}
.card .alt button{font-size:13px;font-weight:500;line-height:1.4;padding:2px 9px;min-height:24px;border-radius:var(--r-sm);background:var(--card);
  color:var(--text);border:0;box-shadow:inset 0 0 0 1px var(--ctl-line);text-align:left}
.card .tarbox{margin:10px 0 0;background:var(--amber-bg);color:var(--text);border:0;border-radius:var(--r-md);padding:7px 11px;font-size:13px;font-weight:400;line-height:1.55}
.card .tarbox b{font-weight:600;margin-right:4px;color:var(--amber)}
.card .src{margin:8px 0 0;font-size:13px;color:var(--sub);line-height:1.55}

/* 주 행동: 파란 틴트(채움 없는 강조). 전역 .detailbtn 은 보조 윤곽 버튼(장바구니 비우기 등) */
.detailbtn{background:var(--card);color:var(--text);border:1px solid var(--line-2);border-radius:var(--r-md);font-weight:600}
.detailbtn:hover{background:var(--soft);color:var(--text)}
.card .detailbtn{margin:10px 0 0;min-height:36px;padding:8px 14px;border:0;border-radius:var(--r-md);background:var(--blue-bg);color:var(--blue-dk);
  font-size:14px;font-weight:600;line-height:1.4;text-align:left;text-wrap:balance;box-shadow:none}
.card .detailbtn:hover{background:var(--blue-bg-2);color:var(--blue-dk)}

/* 출처: 헤어라인 아래 [제목·재대조 …… ＋수집 메모] / [출처 사이트·조사일] / 면책 12px */
.card .evidence-box{margin:10px 0 0;padding:8px 0 0;background:none;border:0;border-top:1px solid var(--line);border-radius:0;
  display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:2px;font-size:13px;line-height:1.5}
.card .evidence-heading{flex:1 1 auto;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:baseline;gap:0 8px;font-size:12px;font-weight:600;color:var(--sub)}
.card .evidence-heading span{font-size:12px;font-weight:400;color:var(--muted)}
.card .evidence-box dl{order:2;flex:1 1 100%;display:flex;flex-wrap:wrap;gap:0 14px;margin:0;min-width:0}
.card .evidence-box dl>div{display:flex;align-items:baseline;gap:6px;padding:0}
.card .evidence-box dt{font-size:12px;color:var(--muted);white-space:nowrap}
.card .evidence-box dd{margin:0;font-size:13px;color:var(--text);font-variant-numeric:tabular-nums}
.card .evidence-box a{display:inline-block;min-height:0;color:var(--blue);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--blue) 45%,transparent)}   /* 색 말고도 링크임을 알리는 옅은 밑줄(터치 기기 포함) */
.card .evidence-box details{order:1;flex:none;margin-left:auto;font-size:12px;color:var(--muted)}
.card .evidence-box details summary{min-height:0;font-weight:500;color:var(--muted)}
.card .evidence-box details[open]{flex-basis:100%;order:4;margin-left:0}
.card .evidence-box details p{font-size:12px;margin:4px 0 0}
.card .evidence-box>p{order:3;flex:1 1 100%;margin:3px 0 0;font-size:12px;line-height:1.55;color:var(--muted)}

/* 제보(왼쪽) · 담기(오른쪽 윤곽) 한 줄, 쇼핑몰 텍스트 링크 한 줄 */
.card .report-button{margin:4px 0 0;min-height:32px;padding:0;border:0;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;
  justify-content:center;width:auto;justify-self:start;gap:0;font-size:13px;line-height:1.4;color:var(--sub);text-align:left}
.card .report-button span{color:var(--blue);font-weight:600}
.addbtn{font-size:13px!important;border-radius:var(--r-md)!important}
.card .addbtn{margin:4px 0 0;justify-self:end;align-self:center;min-height:32px;padding:5px 10px;background:var(--card);color:var(--text);
  border:1px solid var(--ctl-line);font-weight:600;line-height:1.4;white-space:nowrap}
.card .addbtn.in{background:var(--blue-bg);color:var(--blue-dk);border-color:transparent}
.card .links{margin:2px 0 0 -8px;padding:0;border:0;gap:0 2px;justify-content:flex-start;align-items:center}
.card .links a{font-size:13px;font-weight:500;padding:4px 8px;border:0;border-radius:var(--r-sm);background:none;color:var(--sub);line-height:1.4;min-height:0}
.card .links a::after{content:"↗" / "";margin-left:3px;font-size:12px;color:var(--muted)}
.empty{border:1px dashed var(--line-2)!important;border-radius:var(--r-lg)!important;color:var(--sub);background:var(--card)}
.empty h3{font-size:17px;font-weight:600;color:var(--text)}
.empty a{color:var(--blue)}

/* 카드 폭별 전환(container query) */
@container card (min-width:336px){   /* 제보 206 + 간격 10 + 담기 119 */
  .card .report-button{flex-direction:row;justify-content:flex-start;align-items:center;gap:6px;white-space:nowrap}
}

/* ═══ 7. 화장품 카드 ═════════════════════════════════════ */
/* 칩 수(1~16개) 차이로 생기는 카드 안 빈 구멍 대신 자연 높이 */
#list:has(>.card.cos){align-items:start}
.card.cos{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "made" "box" "cta" "more" "ev" "rep" "links";grid-template-rows:none}
.card.cos>details{margin-top:10px}
.card.cos .report-button{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:0 6px}
.card .madebox{margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:13px;font-weight:500;color:var(--muted);line-height:1.5}
.card .madebox b{background:none;padding:0;border-radius:0;font-size:15px;font-weight:600;color:var(--text)}
/* '중국' 이 증정품·일부 컬러에만 해당하는 값도 있어(예: 대한민국 / 증정용 브러쉬 : 중국) 글자는 잉크색, 빨간 점 하나로만 표시 */
.card .madebox b.cnmade{background:none;color:var(--text);padding:0;border-radius:0}
.card .madebox b.cnmade::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:6px;vertical-align:.18em}
.card .madebox span{flex:1 1 100%;font-size:13px;font-weight:400;color:var(--muted)}
.card .flagbox .chips{gap:6px;margin:6px 0 4px}
.chips button{font-size:13px;line-height:1.4;font-weight:500;padding:4px 9px;border-radius:var(--r-sm);border:1px solid var(--ctl-line);
  background:var(--card);color:var(--text);min-height:0}
.chips button.g1{background:var(--card);color:var(--text);font-weight:600;border-color:var(--ctl-line)}
.chips button.g1::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:.18em}

/* ═══ 8. 대화상자 ════════════════════════════════════════ */
dialog{width:min(720px,calc(100vw - 24px));max-width:none;max-height:min(88dvh,1000px);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--raised);color:var(--text);box-shadow:var(--shadow-pop);overscroll-behavior:contain}
dialog::backdrop{background:var(--scrim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html:has(dialog[open]){overflow:hidden}
/* 상단 띠(불투명 sticky) 안에 닫기 알약: 스크롤한 본문은 알약 밑이 아니라 띠 밑으로 통째로 들어간다 */
.dlg{padding:0 30px 30px;font-size:15px;line-height:1.7}
.dlg::before{content:"";display:block;position:sticky;top:0;z-index:1;height:60px;margin:0 -30px -4px;pointer-events:none;
  background:linear-gradient(var(--raised) 54px,transparent)}
.dlg .x{position:sticky;top:12px;float:right;z-index:2;margin:-44px -14px 0 0;min-height:36px;min-width:0;padding:6px 12px;
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--raised);color:var(--text);font-size:13px;font-weight:500;box-shadow:var(--shadow)}
.dlg h3{font-size:22px;line-height:1.35;font-weight:700;letter-spacing:-.025em;margin:0 0 8px;padding-right:0}
.dlg h2{letter-spacing:-.025em}
.dlg .eyebrow{display:block;margin-bottom:6px}
.dlg .lvl{font-size:12px;font-weight:500;padding:3px 9px;border-radius:var(--r-sm);background:var(--raised-soft);color:var(--sub)}
.dlg>p,.dlg section p{font-size:15px;line-height:1.7;max-width:62ch;color:var(--text)}
.dlg>p{margin:12px 0 0}
.dlg section{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.dlg section h4{font-size:15px;font-weight:700;color:var(--text);margin:0 0 8px;letter-spacing:-.01em}
.dlg section.who,.dlg section.hi,.dlg section.tipbox,.dlg .unconfirmed-box,.dlg section.limitnote,.dlg section.evidence-box{border-top:0;border-radius:var(--r-md);padding:14px 16px}
.dlg .who{background:var(--amber-bg);border:0}
.dlg .who div{font-size:13px!important;line-height:1.7}
/* 주의('언제')는 호박색 틴트 + 왼쪽 선, 대처('이렇게')는 세이지 틴트 + 왼쪽 선. 빨강은 쓰지 않는다 */
.dlg section.hi,.dlg section.tipbox{border-left:3px solid var(--amber);border-radius:0 var(--r-md) var(--r-md) 0}
.dlg .hi{background:var(--amber-bg)}
.dlg .tipbox{background:var(--green-bg)} .dlg section.tipbox{border-left-color:var(--green)}
.dlg .unconfirmed-box{background:var(--raised-soft)}
.dlg section.limitnote{background:var(--raised-soft);font-size:13px;color:var(--sub)}
.dlg section:not(.evidence-box)>dl:not(.origin-table){display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 18px;margin:12px 0 0}
.dlg section:not(.evidence-box)>dl:not(.origin-table) dt b{font-size:13px;font-weight:600;color:var(--sub)}
.dlg section:not(.evidence-box)>dl:not(.origin-table) dd{margin:0;font-size:14px;line-height:1.65}
.dlg .srcs{font-size:13px;color:var(--muted);line-height:1.8}
.dlg .srcs a{color:var(--blue)}
.dlg .inglist{gap:8px;margin-top:10px}
.dlg .ingitem{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.dlg .ingitem b{font-size:15px;font-weight:600}
.dlg .ingitem .lv{font-size:12px;color:var(--muted);font-weight:500}
.dlg .ingitem p{font-size:14px;line-height:1.65;margin-top:6px}
.dlg .ingitem .w,.dlg .ingitem .t2{margin-top:8px;font-size:14px;line-height:1.65;color:var(--text);padding:6px 10px 6px 12px;border-left:2px solid var(--amber);
  border-radius:0 var(--r-sm) var(--r-sm) 0}
.dlg .ingitem .t2{background:var(--green-bg);border-left-color:var(--green)}
.origin-table{margin:12px 0 0}
.origin-table>div,.dlg .origin-table>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px;padding:8px 0;border-bottom:1px solid var(--line)}
.origin-table dt{font-size:14px;color:var(--sub)}
.origin-table dd{font-size:14px;font-weight:600;color:var(--text);margin:0}
.dlg .evidence-box{margin-top:22px;background:var(--raised-soft);border:0;font-size:14px;line-height:1.6}
.dlg .evidence-heading{font-size:14px;font-weight:600;color:var(--text)}
.dlg .evidence-heading span{font-size:12px;color:var(--muted)}
.dlg .evidence-box dl{margin:8px 0}
.dlg .evidence-box dl>div{grid-template-columns:96px minmax(0,1fr);padding:7px 0;border-top:1px solid var(--line-2)}
.dlg .evidence-box dt{font-size:13px;color:var(--sub)}
.dlg .evidence-box a{display:inline-block;min-height:0;color:var(--blue)}
.dlg .evidence-box p{font-size:13px;color:var(--sub);max-width:none}
.dlg .evidence-box summary{min-height:0;padding-top:6px;font-size:13px;color:var(--sub)}
.dlg .report-button{margin-top:16px;min-height:44px;border-top:1px solid var(--line);font-size:13px;color:var(--sub)}
.dlg .report-button span{color:var(--blue);font-weight:600}
.report-product{font-weight:600;color:var(--text)}
.report-steps{line-height:1.9}
.dlg .search-cta{margin-top:8px}
.dlg small{font-size:12px;color:var(--muted)}
.cartrow{background:var(--raised-soft);border-radius:var(--r-md);padding:12px 14px}
.cartrow>div{flex:1 1 auto;min-width:0}
.cartrow .nm{font-size:15px;font-weight:600}
.cartrow .ing{font-size:13px;color:var(--red-dk)}
.cartrow .ing.okc{color:var(--sub)}   /* '제조국 대한민국'·'중국산 없음'을 초록(안전)으로 읽히지 않게 */
.cartrow button{flex:none;white-space:nowrap;font-size:13px;color:var(--sub);min-height:36px;padding:0 6px;border-radius:var(--r-sm)}
#clearCart{min-height:44px}

/* ═══ 9. 패널(페이저·비율·회사·툴팁·떠 있는 버튼) ═══════ */
.pager{gap:6px;padding:28px 0 36px}
.pager button{min-width:40px;height:40px;border-radius:var(--r-md)!important;border:1px solid var(--ctl-line);background:var(--card);color:var(--text);
  font-size:14px;font-weight:500;box-shadow:none!important;font-variant-numeric:tabular-nums}
.pager button.on{background:var(--sel-bg);color:var(--sel-fg);border-color:var(--sel-line)}
.pager button:disabled{opacity:.4}
.pager button:not([data-p]){border-color:transparent;background:none}   /* … 는 버튼처럼 보이지 않게 */
.ratio{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 18px;margin:10px 0;box-shadow:none}
.ratio summary{font-size:15px;font-weight:600;color:var(--text);padding:4px 0;min-height:0}
.ratio summary::before{color:var(--muted)}
.ratio table{font-size:14px;margin-top:12px}
.ratio td{padding:7px 4px;border-top:1px solid var(--line)}
.ratio tr:first-child td{border-top:0}
.ratio td.nm{font-weight:500}
.ratio .track{height:6px;background:var(--soft-2)}
.ratio .fill{background:var(--red)}
.ratio td.pct{color:var(--text);font-weight:600}
.ratio td.pct span{opacity:1!important;color:var(--muted);font-weight:400}
.ratio .note,.colist+.note{font-size:13px;color:var(--muted);line-height:1.6}
.colist{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}
.colist button{background:var(--soft);border-radius:var(--r-md);padding:10px 12px;border:1px solid transparent}
.colist .cnm{font-size:14px;font-weight:600}
.colist .cst{font-size:13px;color:var(--sub)}
.colist .cst b{color:var(--text);font-variant-numeric:tabular-nums}
#tip{background:var(--raised);color:var(--text);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-pop);font-size:13px;line-height:1.6;padding:12px 14px}
#tip b{font-size:14px;font-weight:600}
#tip .lv{font-size:12px;color:var(--muted);font-weight:500}
#tip .w{color:var(--text);border-top-color:var(--line)}
#tip .k{color:var(--muted);font-size:12px}
#cart{background:var(--accent);color:var(--on-accent);border-radius:var(--r-pill)!important;padding:12px 18px;font-size:14px;font-weight:600;
  box-shadow:var(--shadow-pop);bottom:calc(76px + env(safe-area-inset-bottom))}
#top{width:44px;height:44px;border-radius:50%!important;background:var(--card);color:var(--text);border:1px solid var(--line);
  box-shadow:var(--shadow-pop);font-size:18px;bottom:calc(20px + env(safe-area-inset-bottom))}

/* ═══ 10. 아카이브·뉴스 ══════════════════════════════════ */
.archive-section{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow)}
.archive-section h2{margin:12px 0 22px}
.archive-principles{gap:28px}
.archive-principles p{font-size:14px;line-height:1.7;color:var(--sub);margin:0}
.archive-principles b{font-size:15px;font-weight:600;color:var(--text);margin-bottom:6px}
#publicCollection{font-size:13px;line-height:1.7;color:var(--muted);border-top:1px solid var(--line)}
.collection-count strong{font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.news{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px;border-top:0}
.news a{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:none;gap:8px}
.news .sub{font-size:12px;color:var(--muted);font-weight:500;gap:8px}
.news .sub em{background:var(--soft);color:var(--sub);border-radius:var(--r-sm);padding:1px 7px;font-weight:600}
.news b{font-size:15px;line-height:1.5;font-weight:600}
.news p{font-size:14px;line-height:1.6;color:var(--sub)}
.more{min-height:40px;border:1px solid var(--ctl-line);border-radius:var(--r-pill);background:var(--card);color:var(--text);font-size:14px;font-weight:500;box-shadow:none}

/* ═══ 11. 푸터 ═══════════════════════════════════════════ */
footer{background:none;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;margin-top:56px;
  padding:28px max(0px,calc(100% - 860px)) 104px 0;font-size:13px;line-height:1.8;color:var(--sub)}
footer b{color:var(--text);font-weight:600}
footer a{color:var(--blue);font-weight:500}
#contactMail a,#businessMail a{border-radius:var(--r-md);border-color:var(--line-2);color:var(--blue);background:var(--card);min-height:40px;font-size:14px}

/* ═══ 12. 반응형 ═════════════════════════════════════════ */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .hero .tile b,.tile b{font-size:30px}
  .nav{gap:8px}
}
@media(max-width:760px){
  .wrap,.bar .wrap{padding-inline:16px}
  .nav{padding:14px 0 6px}
  .logo{font-size:17px;min-height:44px}
  .nav nav{font-size:13px;gap:0;padding:2px 6px 4px;margin-inline:-6px;width:calc(100% + 12px);scroll-padding-inline:6px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .nav nav a{padding:6px 10px}
  .nav nav a:first-child{padding-left:10px}
  /* 히어로: 엄지 영역의 큰 CTA. 타일 보조문('개'·↗ 누를 수 있다는 단서)은 작게 남긴다 */
  .hero{padding:18px 0 16px}
  .hero h1{font-size:clamp(30px,8.4vw,36px);letter-spacing:-.03em;margin:10px 0}
  .hero p{font-size:15px}
  .search-cta{display:flex;width:100%;min-height:52px;justify-content:center;margin-top:16px;font-size:16px}
  .hero-caption{text-align:center;margin-top:10px}
  .hero-grid{gap:18px}
  .hero .tile,.tile{padding:12px}
  .tile .lb{font-size:12px;gap:6px}
  .hero .tile b,.tile b{font-size:24px;margin:auto 0 0;padding-top:6px}  /* 라벨이 두 줄로 접혀도 숫자는 바닥 정렬 */
  .tile small{margin-top:6px;line-height:1.4}
  #productSearch{margin-top:4px}
  .mode,#mode{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;border:0}
  .mode button,#mode button[data-m]{font-size:14px;padding:8px 6px;min-height:44px;border:0;border-radius:var(--r-sm)}
  #mode button[data-m]:not(.on){background:none;color:var(--sub)}
  .row2{margin-top:10px;gap:8px}
  #co{width:100%;max-width:none;min-height:44px;padding-top:8px;padding-bottom:8px}
  .search-scope{margin-top:8px}
  /* 카테고리: 한 줄 가로 스크롤 + 끝 페이드 + 스냅 */
  .tabs{flex-wrap:nowrap!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
    margin:12px -16px 0;padding:2px 16px 14px;scroll-padding-inline:16px;gap:6px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 32px),transparent);
    mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 32px),transparent)}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex-shrink:0;padding:6px 12px;scroll-snap-align:start}
  /* 결과 머리: 결과 수 → 정렬·개수 → 안내문(평문) */
  .bar+.wrap>.stats{grid-column:1/-1;margin:18px 0 8px}
  .bar+.wrap>.opts{grid-row:2;grid-column:1/-1;margin:0 0 12px;display:flex;gap:8px}
  .bar+.wrap>.limitnote{grid-row:3;margin:0 0 14px}
  .opts select{flex:1 1 0;min-width:0;min-height:44px}
  .opts #per{flex:0 0 104px}   /* 개수는 고정 폭, 남는 폭은 긴 정렬 문구에 */
  .limitnote{border-left:0;padding:0;font-size:13px;line-height:1.65;color:var(--sub)}
  .grid{gap:12px}
  .card{padding:16px 16px 12px}
  .card .evidence-box dl>div{grid-template-columns:none}
  .archive-section{padding:22px}
  .archive-principles{grid-template-columns:1fr;gap:14px}
  .news{grid-template-columns:1fr}
  .news a{padding:16px}
  .sec h2{font-size:22px}
  footer{padding-right:0;font-size:13px}
  dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 24px)}
  .dlg{padding:0 18px 24px;font-size:15px}
  .dlg::before{margin-inline:-18px}
  .dlg .x{margin-right:-6px}
  .dlg section:not(.evidence-box)>dl:not(.origin-table){grid-template-columns:minmax(0,1fr);gap:2px 0}
  .dlg section:not(.evidence-box)>dl:not(.origin-table) dd{margin-bottom:10px}
  .dlg .evidence-box dl>div{grid-template-columns:84px minmax(0,1fr)}
}
@media(max-width:520px){
  .eyebrow{letter-spacing:.04em}
  /* 바텀시트 */
  dialog{margin:auto 0 0;width:100vw;max-width:100vw;max-height:92dvh;border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0}
  .dlg{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  /* 떠 있는 버튼: 세로로 쌓지 않고 바닥 한 줄로(가리는 띠를 44px 로) */
  #cart{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));padding:10px 14px;font-size:13px;min-height:44px}
  #cart:has(~#top.on){right:68px}
  #top{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
}
@media(max-width:400px){   /* 타일 라벨 한 줄: 점·여백만큼 폭을 되찾는다 */
  .tile .lb::before{display:none}
  .hero .tile,.tile{padding:12px 8px}
  .tile .lb{letter-spacing:-.02em}
}

/* ═══ 13. 다크 ═══════════════════════════════════════════ */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e0e10; --card:#17171a; --soft:#1f1f23; --soft-2:#27272c; --chip:#1f1f23;
    --raised:#202024; --raised-soft:#2a2a2f;              /* 대화상자는 카드보다 한 단계 밝은 면 */
    --text:#f2f2f5; --sub:#c2c2c9; --muted:#9d9da6;
    --line:#2a2a2f; --line-2:#3a3a40; --ctl-line:#6e6e77;
    --blue:#5aa9ff; --blue-dk:#8cc3ff; --blue-bg:#16263a; --blue-bg-2:#1c3150; --focus:#5aa9ff;
    --accent:#1f6fd6; --on-accent:#fff;                    /* 흰 알약 대신 한 단계 낮춘 파랑 */
    --ink:#ececf1; --on-ink:#111113;
    --red:#ff6b61; --red-dk:#ff8f86; --red-bg:#361f21; --red-line:#57302f;
    --green:#9dbba8; --green-bg:#182019; --green-line:#2a362e;
    --amber:#f0c060; --amber-bg:#2a2214; --amber-line:#4d3f22;
    --sel-bg:#ececf1; --sel-fg:#111113; --sel-line:#ececf1;   /* 라이트와 같은 반전 칩(선택 대비 15:1) */
    --seg-bg:#1c1c20; --seg-on:#34343b;
    --scrim:rgba(0,0,0,.62);
    --shadow:0 0 0 1px rgba(255,255,255,.02),0 1px 2px rgba(0,0,0,.5);
    --shadow-hi:0 0 0 1px rgba(255,255,255,.04),0 12px 32px -12px rgba(0,0,0,.8);
    --shadow-seg:0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.5);
    --shadow-pop:0 0 0 1px rgba(255,255,255,.08),0 24px 64px -16px rgba(0,0,0,.9);
  }
  dialog{border-color:var(--line-2)}
  .dlg .ingitem{border-color:var(--line-2)}
  .search-cta{box-shadow:none}
}

/* ═══ 14. 접근성(포커스·터치·호버·모션) ══════════════════ */
/* 링은 요소 자신의 반경을 따른다(알약·셀렉트 모양 유지). 반경 0인 문장 속 링크·summary 만 둥글게 */
:focus-visible{outline:2px solid var(--focus)!important;outline-offset:2px!important}
a:not([class]):focus-visible,summary:focus-visible{border-radius:var(--r-sm)}
.hero .tiles .tile:focus-visible{outline-offset:-4px!important}   /* .tiles overflow:hidden 에 잘리지 않게 안쪽 링 */
@media(max-width:760px){
  .nav nav a:focus-visible{outline-offset:-2px!important}
  /* 카테고리 칩은 바깥 링(선택 칩 반전 면 위 안쪽 링은 2.1:1). 아래 규칙이 포커스 때 잘림·페이드를 풀어 준다.
     키보드 포커스가 들어오면 가로 스크롤·끝 페이드를 풀고 줄바꿈(반쯤 보이는 항목은 포커스해도 스크롤되지 않아 링·글자가 잘림) */
  .nav nav:has(:focus-visible),.tabs:has(:focus-visible){flex-wrap:wrap!important;overflow:visible;-webkit-mask-image:none;mask-image:none}
}
/* 누를 영역은 가상요소로 넓히고 포커스 링은 글자만 감싼다(summary 의 ::before 는 ＋ 표시라 ::after) */
.card .evidence-box a,.dlg .evidence-box a,.limitnote a,footer>a,footer>b>a,.card>details summary,.card .evidence-box details summary{position:relative}
.card .evidence-box a::before,.dlg .evidence-box a::before,.limitnote a::before,footer>a::before,footer>b>a::before,
.card>details summary::after,.card .evidence-box details summary::after{content:"";position:absolute;inset:-12px -2px}
/* 터치 타겟: 휴대폰 폭과 터치 가능한 기기(태블릿·터치 노트북) 공통. 메타 링크는 겉 크기 그대로 누를 영역만 넓힌다 */
@media(max-width:760px),(any-pointer:coarse){
  .tabs button,.chips button,.card .alt button,.top button,.opts select,.cartrow button{min-height:40px}
  .card .alt button,.chips button{padding:6px 10px}
  .card .detailbtn,.card .addbtn,.card .report-button,.dlg .x,.pager button,.cartrow button{min-height:44px}
  .dlg .x{top:8px;margin-top:-48px}   /* 44px 알약도 60px 띠 안에 */
  .card .addbtn{padding:8px 14px}
  .cartrow button{min-width:44px}
  .dlg .srcs a{display:block;padding:10px 0}   /* 성분창 출처 URL: 줄마다 누를 블록 */
  .dlg .srcs br{display:none}
  @container card (max-width:349.98px){   /* 터치 담기 127px: 제보 206 + 10 + 127 이 안 들어가면 제보를 두 줄로 */
    .card .report-button{flex-direction:column;align-items:flex-start;gap:0;white-space:normal}
  }
  .pager button{min-width:44px;height:44px}
  .card .links{gap:0}
  .card .links a{min-height:44px;display:inline-flex;align-items:center;padding:6px 8px}
  .nav nav a{min-height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center}
  .logo{min-height:44px}
  .ratio summary,.dlg .evidence-box summary{min-height:44px;display:flex;align-items:center}
}
/* 페이저 한 줄(터치 블록의 44px 뒤에 와야 이김): … 옆의 현재±2 는 숨긴다(… 가 이미 건너뜀을 알림). 최대 9개 × 32px 이상.
   11개×44+10×6=544px 가 안 들어가는 폭(<576)까지 덮는다. 세 자리 쪽 번호가 좁은 버튼 안에서 쪼개지지 않게 패딩을 줄이고 nowrap */
@media(max-width:600px){
  .pager{flex-wrap:nowrap;gap:4px}
  .pager button{flex:0 1 44px;min-width:32px;padding:0 2px;white-space:nowrap;overflow-wrap:normal;font-size:13px;letter-spacing:-.02em}
  .pager button:not([data-p])+button:has(+button+button.on),.pager button.on+button+button:has(+button:not([data-p])){display:none}
}
@media(hover:hover){
  .nav nav a:hover{background:var(--soft-2);color:var(--text)}
  .search-cta:hover{background:color-mix(in srgb,var(--accent) 88%,#000)}   /* 밝히면 다크에서 흰 글자 대비 4.28 → 어둡게 */
  .tile:hover{background:var(--soft);box-shadow:none}
  .top button:hover{border-color:var(--sub)}
  .mode button:not(.on):hover{background:color-mix(in srgb,var(--seg-on) 55%,transparent);color:var(--text)}
  .tabs button:not(.on):hover{background:var(--soft);border-color:var(--sub)}
  .card:hover{transform:none;border-color:var(--line-2);box-shadow:var(--shadow-hi)}
  .card>details summary:hover{color:var(--text)}
  .card .alt button:hover,.chips button:hover{box-shadow:inset 0 0 0 1px var(--text);border-color:var(--text);color:var(--text)}
  .card .evidence-box a:hover{text-decoration-color:currentColor}
  .card .report-button:hover span{text-decoration:underline}
  .card .addbtn:not(.in):hover{border-color:var(--sub);background:var(--soft)}
  .card .links a:hover{background:var(--soft);color:var(--text)}
  .pager button:not(.on):not(:disabled):hover{border-color:var(--sub)}
  .colist button:hover{background:var(--card);border-color:var(--line-2)}
  .news a:hover{transform:none;background:var(--card);border-color:var(--line-2);box-shadow:var(--shadow-hi)}
  .dlg .x:hover{background:var(--raised-soft)}
}
@media(hover:none){
  .card:hover{border-color:var(--line);box-shadow:var(--shadow)}
  .tabs button:hover{background:var(--card)} .tabs button.on:hover{background:var(--sel-bg)}
  .mode button:hover{background:none} #mode button[data-m].on:hover{background:var(--seg-on)}
  button:active,.links a:active,.nav nav a:active,summary:active{opacity:.7}
}
@media(prefers-reduced-motion:no-preference){
  .card .detailbtn,.card .addbtn,.search-cta,.tabs button,.mode button{transition:background-color .15s,border-color .15s,filter .15s}
}
@media(prefers-reduced-motion:reduce){
  .card,.news a,.tile{transition:none!important}
  html{scroll-behavior:auto}
}
/* 고대비(forced-colors): 면·그림자로만 보이던 선택 상태를 시스템 강조색으로 */
/* Evidence-first release: shared status, readable mobile controls, bounded dialogs. */
#originFilters{margin:12px 0 18px}#originFilters[hidden]{display:none}
#originFilters>div{display:flex;flex-wrap:wrap;gap:7px}#originFilters button{font:inherit;font-size:13px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--text);cursor:pointer}
#originFilters button[aria-pressed=true]{background:var(--blue);color:#fff;border-color:var(--blue)}
#originFilters p,#originCoverage{font-size:12px!important;line-height:1.7;color:var(--sub)}
#list .food-origin-summary{padding:14px;border:1px solid var(--line);border-radius:14px;background:#f4f7f4;font-size:13px;line-height:1.7}
#list .food-origin-summary[data-origin-state=china]{background:#faf1ec;border-color:#ead9cf;color:#8b3b29}
#list .food-origin-summary[data-origin-state=unknown]{background:#f3f5f6;color:#53646a}
#list .food-origin-summary strong{font-size:13px}#list .food-origin-summary dl{margin:8px 0}#list .food-origin-summary dl>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px;padding:5px 0;border-top:1px solid #dce7de}
#list .food-origin-summary dd{margin:0;text-align:right;overflow-wrap:anywhere}#list .food-origin-summary small{display:block;color:var(--sub);font-size:11px}
#list .food-origin-disclosure{display:block;width:100%;min-width:0}#list .food-origin-disclosure .okbox{margin-top:8px}
#list .readable-card>.evidence-disclosure{display:block;align-self:stretch;width:100%;min-width:0;box-sizing:border-box}
#list .readable-card>.evidence-disclosure>summary>.evidence-toggle{display:none}
#list .readable-card>.food-origin-disclosure>summary,#list .readable-card>.evidence-disclosure>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 0;list-style:none;border:0;text-align:left;width:100%;box-sizing:border-box}
#list .readable-card>.food-origin-disclosure>summary::before,#list .readable-card>.evidence-disclosure>summary::before{display:none;content:none}
#list .readable-card>.food-origin-disclosure>summary::after,#list .readable-card>.evidence-disclosure>summary::after{content:'+';display:block;position:static;border:0;flex:0 0 auto;margin:0;width:auto;height:auto;transform:none}
#list .readable-card>details[open]>summary::after{content:'−'}
#list .readable-card>.food-origin-disclosure>summary::-webkit-details-marker,#list .readable-card>.evidence-disclosure>summary::-webkit-details-marker{display:none}
.record-bundle-note{font-size:12px;line-height:1.6;color:var(--sub);margin:8px 0 0}.grouped-source-records button{min-height:44px;cursor:pointer}
#dlg{box-sizing:border-box;max-width:calc(100vw - 16px);max-height:92dvh;overflow:auto}
#dlgBody{min-width:0;padding:12px 20px 24px;overflow-wrap:anywhere;box-sizing:border-box}#dlgBody::before{display:none}
#dlgBody .x{position:sticky;float:none;display:block;top:0;right:auto;left:auto;margin:0 0 10px auto;min-width:60px;min-height:44px;z-index:10;background:var(--card);border:1px solid var(--line)}
#dlgBody .report-dialog .x{position:sticky;top:0;right:auto;margin-left:auto}
.service-links{font-size:13px;line-height:1.8}.service-links a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:600px){
 #dailyTips{grid-template-columns:minmax(0,1fr) 32px 32px 32px;row-gap:2px}
 #dailyTips .tip-top strong{grid-column:1;grid-row:1}#dailyTips .tip-controls{grid-column:2;grid-row:1}#dailyTips #tipPlay{grid-column:3;grid-row:1}#dailyTips #tipDetails summary{grid-column:4;grid-row:1}
 #dailyTips .tip-viewport{grid-column:1/-1;grid-row:2;width:100%}#dailyTips .tip-slide h3{font-size:13px;line-height:28px}#dailyTips button,#dailyTips #tipDetails summary{min-width:32px;min-height:36px}
 #originFilters>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}#originFilters button{white-space:normal;font-size:12px}
 #dlgBody{padding:12px 16px 24px}#dlgBody h3{padding-right:0}#list{scroll-margin-top:100px}
}
@media(forced-colors:active){
  #mode button[data-m].on,.tabs button.on,.pager button.on{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  .tabs button.on span{color:HighlightText}
}
/* Keep food list actions short; full evidence stays in the detail dialog. */
#list .compact-food-card{padding:20px;gap:14px;min-height:0}
#list .compact-food-card .head{margin:0;padding:0}
#list .compact-food-card h3{margin:8px 0 0}
#list .compact-food-card .card-actions{margin:0;padding:0}
#list .compact-food-card .origin-china,#dlgBody .origin-china{color:#a42b1c;font-weight:800}
#list .food-origin-summary small{font-size:12px;color:#53675b;margin-top:6px}
.news .news-event{min-width:0}.news .news-event>a{display:block;height:auto}
.news .news-event details{padding:10px 14px;font-size:12px;border:1px solid var(--line);border-radius:12px;margin-top:6px}
.news .news-event details summary{cursor:pointer;min-height:30px;line-height:30px}
.news .news-event details a{display:block;padding:8px;margin:5px 0;border:0;border-radius:0;box-shadow:none}
@media(max-width:600px){
 #q,#co,#sort,#per,#brandSearch{font-size:16px!important}
 #dailyTips{grid-template-columns:minmax(0,1fr) 32px 48px 32px}
 #dailyTips #tipPlay{width:48px;font-size:12px}
 #list .compact-food-card{padding:18px}
}

/* 업체 · 분류 한 줄: flex 간격과 가운뎃점 공백이 겹쳐 벌어지던 것 정리 */
#list .head .meta{column-gap:5px}

/* 공식 자료 출처 칸: 기관 자료 목록 · 식별번호 복사 · 직접 확인 링크 */
.dlg section.official-source:not(.evidence-box)>dl:not(.origin-table){display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0}
.official-source dl>div{display:grid;grid-template-columns:7.5em 1fr;gap:4px 12px}
.official-source dt{color:var(--muted);font-size:13px}
.official-source dd{margin:0;font-size:14px;overflow-wrap:anywhere}
.official-source ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.official-source .official-id{font-variant-numeric:tabular-nums;font-weight:650}
.official-source .copy-id{font:inherit;font-size:12px;padding:3px 10px;margin-left:4px;border-radius:999px;border:1px solid var(--line);background:var(--card,#fff);color:var(--text);cursor:pointer}
@media (max-width:520px){.official-source dl>div{grid-template-columns:1fr}}

/* 용량 묶음에서 용량별 원산지 표시가 다를 때 */
#list .size-mixed{margin:4px 0 0;font-size:13px;font-weight:650;color:#9b1c1c}

/* 식약처 푸드QR 원산지 카드 묶음 (foodqr-ui.js) */
#foodqrResults{display:grid;gap:14px;margin:0 0 18px}
#foodqrResults .foodqr-head{padding:14px 16px;border-radius:12px;background:var(--soft,#f1f5ee)}
#foodqrResults .foodqr-head p{margin:4px 0 0;font-size:13px;color:var(--muted)}
#foodqrResults h3 small{font-size:14px;font-weight:500;color:var(--muted)}
#foodqrResults .card-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#foodqrResults a.detailbtn{text-decoration:none;text-align:center}
#foodqrResults .foodqr-barcode{font-size:12px;color:var(--muted)}
#foodqrResults .foodqr-more{font:inherit;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--card,#fff);cursor:pointer}
#foodqrResults .head .meta{display:flex;flex-wrap:wrap;column-gap:5px}
#foodqrResults .head .meta{display:flex;flex-wrap:wrap;column-gap:5px}

/* 첫 화면 줄이기: 결과 카드가 빨리 보이도록 (팁은 목록 아래로 이동, catalog-products.js) */
.search-scope{display:none}
#originFilters>div{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
#originFilters>div::-webkit-scrollbar{display:none}
#originFilters>div>button{flex:0 0 auto;white-space:nowrap;min-height:40px;padding:0 16px}
#originFilters>p{display:none}
#originFilters:has([data-origin-filter="not_found"][aria-pressed="true"])>p{display:block}
#categoryTrack{grid-template-rows:auto auto;grid-auto-columns:64px;row-gap:6px}
#categoryTrack>button{padding:4px 2px;min-height:0}
#categoryTrack .category-icon{width:28px;height:28px;font-size:18px}
#dailyTips.below-results{margin:18px 0 0}

/* 용량 묶음 상세: 용량별 원산지 상태 */
.grouped-source-records .size-origin{font-size:13px;margin-left:4px}
.grouped-source-records .size-origin.china{color:#9b1c1c}

/* 공유 버튼 · 바코드 스캔 (share-scan.js) */
.card-actions .sharebtn{font:inherit;font-size:14px;border:0;background:none;color:var(--muted);cursor:pointer;padding:8px 6px;min-height:40px}
.search{position:relative}
#scanBtn{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:1px solid var(--line);background:var(--card,#fff);border-radius:12px;width:44px;height:44px;font-size:20px;cursor:pointer}
#q{padding-right:64px}
#scanDlg{border:0;border-radius:16px;padding:0;width:min(92vw,420px)}
#scanDlg .scan-body{display:grid;gap:12px;padding:18px}
#scanDlg video{width:100%;border-radius:12px;background:#000;aspect-ratio:4/3;object-fit:cover}
#scanDlg .scan-note{margin:0;font-size:13px;color:var(--muted)}
#scanDlg .scan-manual{display:grid;gap:8px;grid-template-columns:1fr auto auto;align-items:end}
#scanDlg .scan-manual label{display:grid;gap:4px;font-size:13px}
#scanDlg input{font:inherit;font-size:16px;padding:10px;border:1px solid var(--line);border-radius:10px}
#scanDlg button{font:inherit;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--card,#fff);cursor:pointer}
#aldamToast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#1f2a24;color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}
#aldamToast.on{opacity:1}
#foodqrResults .card-actions a.detailbtn{flex:1 1 auto;white-space:nowrap}
#foodqrResults .card-actions .foodqr-barcode{order:3;flex-basis:100%}
#topicChips{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;margin:8px 0 2px;padding-bottom:2px}
#topicChips::-webkit-scrollbar{display:none}
#topicChips span{flex:0 0 auto;font-size:12px;color:var(--muted);margin-right:2px}
#topicChips button{flex:0 0 auto;font:inherit;font-size:13px;white-space:nowrap;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card,#fff);cursor:pointer;min-height:34px}
#foodqrResults .barcode-note{margin:6px 0 0;font-size:13px;font-weight:650;color:#8a5a00}
#foodqrResults .barcode-note{margin:6px 0 0;font-size:13px;font-weight:650;color:#8a5a00}
/* 제품 사진 (Open Food Facts, CC BY-SA) */
#foodqrResults .head{display:flex;gap:12px;align-items:flex-start}
#foodqrResults .pimg{flex:0 0 64px;width:64px;text-align:center}
#foodqrResults .pimg img{width:64px;height:64px;object-fit:contain;border-radius:10px;background:#fff;border:1px solid var(--line)}
#foodqrResults .pimg small{display:block;font-size:10px;line-height:1.3;color:var(--muted);margin-top:2px}

/* 원산지 표시 찍기 (label-ocr.js) · 바코드 사진 */
#topicChips #labelBtn,#labelBtn{flex:0 0 auto;font:inherit;font-size:13px;font-weight:700;white-space:nowrap;padding:6px 12px;border-radius:999px;border:1px solid #1f5f3a;background:#1f5f3a;color:#fff;cursor:pointer;min-height:34px}
#labelDlg{border:0;border-radius:16px;padding:0;width:min(94vw,460px);max-height:90vh}
#labelDlg .label-body{display:grid;gap:12px;padding:18px}
#labelDlg .label-top{display:flex;justify-content:space-between;align-items:center}
#labelDlg .label-close{font:inherit;border:1px solid var(--line);background:var(--card,#fff);border-radius:10px;padding:6px 12px;cursor:pointer}
#labelDlg .label-note,#labelDlg .label-status{margin:0;font-size:14px;color:var(--muted)}
#labelDlg .label-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#labelDlg .label-pick label{display:flex;justify-content:center;align-items:center;min-height:48px;border-radius:12px;border:1px solid var(--line);cursor:pointer;font-weight:700}
#labelDlg .label-cta{background:#1f5f3a;color:#fff;border-color:#1f5f3a}
#labelDlg .label-preview{width:100%;max-height:220px;object-fit:contain;border-radius:12px;background:#f3f3f3}
#labelDlg .label-result{border:1px solid var(--line);border-radius:12px;padding:12px}
#labelDlg .label-result strong.is-china{color:#9b1c1c}
#labelDlg .label-result dl{display:grid;gap:4px;margin:10px 0}
#labelDlg .label-result dl>div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:4px}
#labelDlg .label-result dd{margin:0}
#labelDlg .origin-china{color:#9b1c1c;font-weight:700}
#labelDlg .label-warn{font-size:12px;color:var(--muted);margin:0}
#labelDlg textarea{width:100%;font:inherit;font-size:14px;border:1px solid var(--line);border-radius:10px;padding:8px}
#scanDlg .scan-photo{display:flex;justify-content:center;align-items:center;min-height:48px;border-radius:12px;background:#1f5f3a;color:#fff;font-weight:700;cursor:pointer}
#scanDlg .scan-status{margin:0;font-size:13px;color:var(--muted)}
/* 휴대폰: 바코드·원산지 창을 화면 폭 전체 아래쪽 시트로 */
@media (max-width:600px){#scanDlg,#labelDlg{width:100%;max-width:100%;margin:auto 0 0;left:0;right:0;border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom)}}
#labelDlg .label-report{margin-top:10px;width:100%;font:inherit;font-weight:700;padding:12px;border-radius:12px;border:1px solid #1f5f3a;background:#eef6f0;color:#1f5f3a;cursor:pointer}
/* 바코드·품목보고번호 검색: 이름 검색 목록 숨김, 번호 입력 칸 */
body.barcode-mode #list,body.barcode-mode #pager{display:none}
#foodqrResults .report-form{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;padding:14px 16px;border-radius:12px;background:var(--card,#fff);border:1px solid var(--line)}
#foodqrResults .report-form label{display:grid;gap:6px;font-size:14px;font-weight:650}
#foodqrResults .report-form input{font:inherit;font-size:16px;padding:10px;border:1px solid var(--line);border-radius:10px}
#foodqrResults .report-form button{font:inherit;font-weight:700;padding:11px 16px;border-radius:10px;border:0;background:#1f5f3a;color:#fff;cursor:pointer}
#scanDlg .scan-shot{min-height:54px;border-radius:12px;border:0;background:#1f5f3a;color:#fff;font:inherit;font-size:17px;font-weight:800;cursor:pointer}
#scanDlg .scan-hint{margin:0;font-size:13px;color:var(--muted)}
#scanDlg .scan-photo.alt{background:var(--card,#fff);color:var(--text);border:1px solid var(--line);font-weight:650;min-height:44px}
#foodqrResults .snap-back{min-height:52px;border-radius:12px;border:0;background:#1f5f3a;color:#fff;font:inherit;font-size:16px;font-weight:800;cursor:pointer}

/* 알레르기: 원산지(빨강)와 섞이지 않게 호박색 */
.allergy-box{border-left:3px solid #d97706;padding-left:10px}
.allergy-box strong{color:#b45309}
.allergy-yes{color:#b45309;font-weight:700}
.label-allergy{font-weight:600;color:#b45309}

/* 휴대폰 바텀시트: #dlg 의 max-width(100vw-16px) 때문에 왼쪽으로 쏠리던 것 → 화면 폭 전체 */
@media(max-width:520px){dialog,#dlg{width:100vw;max-width:100vw;margin:auto 0 0;left:0;right:0}}
.allergy-line{margin:6px 0 0;font-size:.85rem}
.allergy-partial{margin:6px 0 8px;padding:8px 10px;border-radius:8px;background:#fef3c7;color:#92400e;font-weight:700;font-size:.9rem;line-height:1.5}
@media (prefers-color-scheme:dark){.allergy-partial{background:#451a03;color:#fcd34d}}
.support-line{margin:10px 0;font-size:.92rem;line-height:1.6}.support-line a{font-weight:700}
/* 첫 화면 바로가기·처음 방문 안내 */
.shortcuts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:10px 0 4px}
.shortcuts a,.shortcuts button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border:1px solid var(--line,#d7ded4);border-radius:14px;background:var(--card,#fff);color:inherit;text-decoration:none;font:inherit;font-size:1.3rem;cursor:pointer;min-width:0}
.shortcuts span{font-size:.78rem;font-weight:700;line-height:1.3;text-align:center;word-break:keep-all}
@media(max-width:380px){.shortcuts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.first-guide{margin:8px 0;padding:10px 12px;border-radius:12px;background:#e3f1e5;font-size:.9rem;line-height:1.6}
.first-guide button{margin-left:6px;font:inherit;font-size:.85rem;padding:2px 10px;border-radius:999px;border:1px solid #1f5f3a;background:#fff;cursor:pointer}