/* KBeauty Verified™ — USAnaru™ 디자인 시스템(site.css) 위에 얹는 것만: 대표 색(로즈) · 규제 결과 부품.
   레이아웃·머리·바닥·단추·표·공유 막대·검색창은 모두 site.css 그대로다. */
:root{
  --accent:#a23e63; --accent-2:#5a1f36; --brand-bg:#a23e63;
  --ok-soft:#e5f3ec; --warn-c:#9a5b00; --warn-soft:#fdf1dc; --bad-soft:#fde8e6;
  --info:#3f5f8a; --info-soft:#e8eef7; --none:#8a8290; --none-soft:#f1eef0; --ink:var(--text);
}
:root[data-theme="dark"]{
  --accent:#e47fa3; --accent-2:#f3b6cb; --brand-bg:#a23e63;
  --ok-soft:#14301f; --warn-c:#f0b35a; --warn-soft:#33270f; --bad-soft:#3a1714;
  --info:#93b4e3; --info-soft:#1a2535; --none:#8f8794; --none-soft:#26212a;
}
/* site.css 에 박힌 USAnaru 청록·주황을 로즈로 */
.brand{background:var(--brand-bg)}
.btn.primary{box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 28%,transparent)}
.btn.primary:hover{box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 34%,transparent)}
:root[data-theme="dark"] .btn.primary{color:#1a1018;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 22%,transparent)}
#theme-toggle:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.sbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.brand .b1{font-weight:700}.brand .b2{font-weight:400}.brand .tm{font-size:.75em;font-weight:700;color:#fff;vertical-align:top;position:relative;top:-.15em}

/* 글자 크기 도우미 (site.css 에 없는 것) */
.small{font-size:.875rem}.lead{font-size:1.05rem;color:var(--muted);max-width:760px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.between{justify-content:space-between}
.stack>*+*{margin-top:.8rem}
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
textarea{font:inherit;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.7rem .85rem;width:100%;min-height:180px;resize:vertical}
textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}

/* 홈 머리 */
.hero{padding:1.2rem 0 .6rem}
.hero h1{font-size:clamp(1.8rem,4.6vw,2.8rem);max-width:840px;letter-spacing:-.02em}
.hero .flags{font-size:1.4rem;letter-spacing:.2em}
.stats{display:flex;gap:1.6rem;flex-wrap:wrap;margin:1.2rem 0}
.stats b{display:block;font-family:var(--font-display);font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums}
.stats span{color:var(--muted);font-size:.85rem}

/* 규제 상태 알약 */
.pill{display:inline-flex;align-items:center;gap:.3rem;border-radius:999px;padding:.12rem .55rem;font-size:.76rem;font-weight:650;white-space:nowrap}
td .pill{white-space:normal;line-height:1.35}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn-c)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.info{background:var(--info-soft);color:var(--info)}
.pill.none{background:var(--none-soft);color:var(--none)}
.pill .dot{width:.5rem;height:.5rem;border-radius:50%;display:inline-block;background:currentColor}

/* 나라별 결과 상자 */
.verdicts{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin:1rem 0}
.verdict{border-radius:var(--radius);padding:1rem 1.1rem;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)}
.verdict .j{font-weight:700;display:flex;gap:.4rem;align-items:center;font-family:var(--font-display)}
.verdict.ok{border-left:5px solid var(--ok)}.verdict.warn{border-left:5px solid var(--warn)}.verdict.bad{border-left:5px solid var(--bad)}.verdict.none{border-left:5px solid var(--none)}
.verdict p{margin:.35rem 0 0;font-size:.92rem}

/* 표 감싸기 */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.tw table{font-size:.9rem}.tw tr:last-child td{border-bottom:0}.tw th{background:var(--soft);white-space:nowrap}
td.n{color:var(--muted);font-variant-numeric:tabular-nums;width:2.5rem}
.unmatched{color:var(--muted);font-style:italic}

/* 제품 카드 */
.pcard{display:flex;flex-direction:column;gap:.35rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;color:var(--text);box-shadow:var(--shadow);transition:border-color .2s,transform .12s}
.pcard:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-1px)}
.pcard .b{font-size:.74rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.pcard .t{font-weight:650;line-height:1.35}

/* 출처 · 공식 원문 · 우리 설명 */
.src{font-size:.82rem;color:var(--muted);border-top:1px dashed var(--line);margin-top:.8rem;padding-top:.6rem}
.official{background:var(--soft);border-radius:10px;padding:.8rem 1rem;font-size:.92rem}
.official .lbl,.ours .lbl{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:block;margin-bottom:.2rem}
.ours{border:1px dashed var(--line);border-radius:10px;padding:.8rem 1rem;font-size:.92rem;background:var(--card)}
.notice{background:var(--info-soft);color:var(--text);border-radius:10px;padding:.75rem 1rem;font-size:.9rem}
.notice.warn{background:var(--warn-soft)}
.disclose{font-size:.8rem;color:var(--muted);margin:0}
.flash{padding:.6rem 1rem;border-radius:10px;background:var(--ok-soft);margin-bottom:1rem}

/* 구매 상자 */
.buy{display:flex;flex-direction:column;gap:.5rem}
.buy a.btn{display:flex;justify-content:space-between;align-items:center}

/* 광고 자리 */
.slot{border:1px dashed var(--line);border-radius:var(--radius);padding:.6rem;margin:1.4rem 0;min-height:90px;text-align:center}
.slot .tiny{display:block;text-align:left;margin-bottom:.3rem}

/* 쪽 넘김 · 알파벳 · 칩 */
.pager{display:flex;gap:.4rem;justify-content:center;margin:1.4rem 0}
.letters{display:flex;flex-wrap:wrap;gap:.2rem;margin:.6rem 0}
.letters a{display:inline-block;min-width:1.9rem;text-align:center;padding:.15rem .3rem;border-radius:6px;font-weight:600}
.letters a.on{background:var(--accent);color:#fff}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin:.6rem 0}
.chips a{border:1px solid var(--line);border-radius:999px;padding:.2rem .7rem;font-size:.85rem;color:var(--text);background:var(--card)}
.chips a.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.rk-tabs a .muted{color:inherit;opacity:.7}
.mg-head .lead{margin:.1rem 0 .2rem}
/* ── 페이지 머리 + 검색창 + AI visibility 바로 가기 (USAnaru™ 에서 그대로) ── */
.sbox{display:flex;align-items:center;gap:.5rem;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.4rem .4rem .4rem .9rem;box-shadow:var(--shadow)}
.sbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.sbox-ic{color:var(--muted);display:inline-flex}
.sbox input{flex:1;min-width:0;border:0;background:transparent;padding:.55rem .2rem;font-size:1rem;box-shadow:none !important;outline:none!important}
.sbox .btn{padding:.6rem 1.1rem}
.prov-search{margin:.6rem 0 .2rem;max-width:620px}.prov-search.sbox-wide{max-width:none}
.sbox-go{flex:none;white-space:nowrap;margin-left:.35rem;display:inline-flex;align-items:center;gap:.35rem;background:color-mix(in srgb,var(--accent) 10%,var(--card));border-color:color-mix(in srgb,var(--accent) 35%,var(--line));color:var(--accent)}.sbox-go:hover{background:color-mix(in srgb,var(--accent) 18%,var(--card));border-color:var(--accent)}
@media(max-width:640px){.sbox-go-t{display:none}.sbox-go{padding-left:.65rem;padding-right:.65rem}}
@media(max-width:560px){.sbox .btn{padding:.6rem .8rem}.sbox input::placeholder{font-size:.85rem}}
.rk-tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin:.4rem 0 .7rem}
.rk-tabs a{display:inline-flex;align-items:center;gap:.25rem;padding:.32rem .75rem;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--text);font-size:.84rem;font-weight:600;text-decoration:none;white-space:nowrap}
.rk-tabs a:hover{border-color:#4f46e5;color:#4f46e5;text-decoration:none}
.rk-tabs a.on{background:#4f46e5;border-color:#4f46e5;color:#fff}
.rk-tabs a .muted{color:inherit;opacity:.7}
.mg-head{display:flex;flex-direction:column;gap:.4rem;margin:.2rem 0 1rem;padding-bottom:.8rem;border-bottom:3px solid var(--text)}
.mg-head h1{margin:0;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em}
.mg-head .rk-tabs{margin:.2rem 0 0}
.mg-head .lead{margin:.1rem 0 .2rem}
.mg-kicker{margin:0;display:flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.mg-titlebar{display:flex;justify-content:space-between;align-items:flex-end;gap:.8rem;flex-wrap:wrap}
.mg-go{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border-radius:999px;background:#4f46e5;color:#fff!important;font-weight:750;font-size:.92rem;box-shadow:0 6px 16px rgba(79,70,229,.28);white-space:nowrap}
.mg-go:hover{background:#4338ca;text-decoration:none}
.nt-dot{position:relative;width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 6px 1px rgba(74,222,128,.9)}
.nt-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#4ade80;animation:nt-pulse 1.8s ease-out infinite}
@keyframes nt-pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(3);opacity:0}}
@media (prefers-reduced-motion:reduce){.nt-dot::after{animation:none}}
.mg-filt{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.mg-filt a{display:inline-flex;align-items:center;padding:.22rem .65rem;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:.8rem;font-weight:650;white-space:nowrap}
.mg-filt a:hover{border-color:#4f46e5;color:#4338ca;text-decoration:none}
.mg-filt a.on{background:color-mix(in srgb,#4f46e5 12%,var(--card));border-color:color-mix(in srgb,#4f46e5 45%,var(--line));color:#4338ca}
.mg-filt span{width:1px;height:1.1rem;background:var(--line);margin:0 .2rem;color:transparent;overflow:hidden}

/* 본문 소제목 위 여백 (site.css 는 0) */
.wrap.page>h2,.wrap.page>section>h2,.wrap.page>div>h2{margin-top:1.8rem}

/* 머리 ↔ 브레드크럼 간격 줄임 (USAnaru 34px → 약 16px, 운영자 2026-10-16) */
.wrap.page{padding-top:.45rem}@media(max-width:700px){.wrap.page{padding-top:.35rem}}
.chk{text-transform:none;letter-spacing:0;font-weight:500;color:var(--text);display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem}
.brand.brand-img{background:none;padding:0}

/* 관할 배지 (국기 이모지 대신 — 윈도우에서도 같게) */
.jur{display:inline-block;font:800 .66rem/1.5 var(--font-body);letter-spacing:.05em;padding:0 .34rem;border-radius:4px;vertical-align:1px;color:#fff;background:#6b7280}
.jur-kr{background:#2f4fa8}.jur-eu{background:#1f3f8f}.jur-us{background:#9b2335}
.hero .flags .jur{font-size:.8rem;padding:.1rem .45rem;margin-right:.2rem}
/* 성분 목록의 규정 칩 — 한 줄에 셋 */
.jflags{display:inline-flex;gap:.3rem;white-space:nowrap}
.jchip{display:inline-flex;align-items:center;gap:.25rem;border-radius:6px;padding:.1rem .4rem;font-size:.74rem;font-weight:650;background:var(--none-soft);color:var(--none)}
.jchip b{font-size:.64rem;letter-spacing:.04em;opacity:.8}
.jchip.ok{background:var(--ok-soft);color:var(--ok)}.jchip.warn{background:var(--warn-soft);color:var(--warn-c)}.jchip.bad{background:var(--bad-soft);color:var(--bad)}.jchip.info{background:var(--info-soft);color:var(--info)}
td:has(>.jflags){white-space:nowrap;width:1%}
/* 머리: 로그인해 종·아바타가 붙어도 메뉴가 잘리지 않게 */
@media(max-width:1320px){.hdr .controls{margin-left:.6rem;gap:.35rem}nav.topnav a{padding:.32rem .45rem;font-size:.93rem}.hdr .top>.row{gap:.9rem!important}}
@media(max-width:1180px){nav.topnav a{font-size:.88rem;padding:.3rem .38rem}}

/* 제품 카드: 브랜드 · 제목 · 종류를 세로로, 제목은 본문 색 (2026-10-16 점검) */
.pcard{gap:0;padding:.9rem 1rem .7rem}
.pcard-a{display:flex;flex-direction:column;gap:.3rem;color:var(--text)!important;text-decoration:none!important}
.pcard-a:hover .t{color:var(--accent)}
.pcard .t{color:var(--text)}
.pcard .cbar{margin-top:auto;padding-top:.55rem}
.pcard .cbar-pc{display:none}          /* 카드 폭이 좁다 — 공유·링크 복사만 (상세 페이지에는 전체 공유 막대) */
/* 필터 칩 안의 관할 배지 — .mg-filt span(구분선) 규칙에 가려지지 않게 */
.mg-filt span.jur,.rk-tabs span.jur{width:auto;height:auto;margin:0;overflow:visible;color:#fff;font-size:.62rem}
.mg-filt span.jur-kr,.rk-tabs span.jur-kr{background:#2f4fa8}.mg-filt span.jur-eu,.rk-tabs span.jur-eu{background:#1f3f8f}.mg-filt span.jur-us,.rk-tabs span.jur-us{background:#9b2335}
/* 제품 머리: 휴대폰에서는 구매 상자를 아래로 */
.prod-head{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1rem;align-items:start}
@media(max-width:760px){.prod-head{grid-template-columns:1fr}}
/* 성분 목록 표 */
.ing-tbl td:first-child{width:46%}.ing-tbl td:nth-child(2){width:30%}
.pcard .cbar{flex-wrap:wrap!important;overflow:visible;row-gap:.3rem}.pcard .cbar-sep{display:none}

/* 머리: 메뉴가 들어갈 자리가 모자라는 폭(1000px 이하)에서는 ☰ 메뉴로 — site.css 700px 규칙과 같은 내용 */
@media(max-width:1000px){
  .hdr .top{flex-wrap:wrap;gap:.6rem}
  .hdr .top>.row{width:100%;gap:.6rem !important;flex-wrap:nowrap;justify-content:space-between}
  .nav-btn{display:inline-flex}
  nav.topnav,.hdr .controls{display:none}
  .top.open nav.topnav{display:flex;flex-direction:column;align-items:stretch;order:3;width:100%;gap:.15rem;padding-top:.5rem;border-top:1px solid var(--line)}
  .top.open nav.topnav a{padding:.6rem .7rem;font-size:.95rem;border-radius:10px}.top.open nav.topnav a.active{background:var(--soft)}.top.open nav.topnav a.active::after{display:none}
  .top.open .controls{display:flex;width:100%;margin-left:0;justify-content:flex-start;gap:.5rem;padding:.4rem 0 .3rem;border-top:1px solid var(--line)}
  .top.open .row{flex-wrap:wrap}
}
/* 자외선 차단 성분 표 — 세 나라 칸 같은 폭 */
.uv-tbl th:first-child,.uv-tbl td:first-child{width:34%}
.uv-tbl th:not(:first-child),.uv-tbl td:not(:first-child){width:22%}