/* 펫바이블 v2 — 일반 소비자 기준 모바일 우선. 본문 15px, 누르는 영역 44px, 강조색 1가지 + 검증 초록. */
:root {
  --ink: #1b1b1e; --sub: #4b4b52; --muted: #6b6b72; --line: #ebebee; --bg: #fff; --soft: #f7f6f3; --chip: #f4f4f6;
  --accent: #111111; --accent-ink: #111111; --brand: #000000; --brand-cream: #ffffff; --brand-lime: #dafe26; --good: #111111; --good-bg: #f3f3f3; --ok: #1f7a4d; --ok-bg: #eef7f1; --bad-bg: #fdf0ed;
  --fs: 15px; --radius: 14px; --tap: 44px; --maxw: 720px;
}
html.bigtext { --fs: 17px; }
* { box-sizing: border-box; }
html { font-size: var(--fs); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Noto Sans KR", "Pretendard", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; color: var(--ink); background: var(--bg); line-height: 1.5; padding-bottom: calc(64px + env(safe-area-inset-bottom)); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px; z-index: 99; }
main { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
h1 { font-size: 1.45rem; line-height: 1.25; margin: 16px 0 10px; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 1.2rem; margin: 0; font-weight: 800; }
h3 { font-size: 1rem; margin: 10px 0 6px; font-weight: 800; }
p { margin: 6px 0; }
.lead { font-size: .95rem; color: var(--sub); margin: 0 0 14px; line-height: 1.65; }
.lead a, .more { color: var(--accent-ink); font-weight: 700; }
.muted { color: var(--muted); } .small { font-size: .8rem; } .tiny { font-size: .73rem; color: var(--muted); line-height: 1.45; }
.warn { color: var(--accent-ink); }
b, strong { font-weight: 700; }

/* 상단바 */
.top { position: sticky; top: 0; z-index: 20; background: var(--brand); color: var(--brand-cream); border-bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: 52px; }
.top .left, .top .right { display: flex; gap: 6px; align-items: center; }
.logo { display: inline-flex; align-items: center; color: var(--brand-cream); font-weight: 800; font-size: 1.27rem; letter-spacing: -.02em; } .logo span { color: var(--brand-lime); } .logo img { height: 22px; width: auto; }
.icon-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: rgba(255,255,255,.14); color: #fff; }
.icon-btn[aria-pressed="true"] { background: var(--brand-cream); color: var(--brand); }
.icon-btn svg { width: 18px; height: 18px; }
.preview-bar { background: #ffe8a3; color: #5a4100; text-align: center; padding: 6px; font-weight: 700; font-size: .85rem; }

/* 하단 5탭 */
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); padding-bottom: env(safe-area-inset-bottom); z-index: 20; }
.tabbar a { height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .73rem; font-weight: 700; color: var(--muted); gap: 3px; }
.tabbar a[aria-current="page"] { color: var(--ink); position: relative; } .tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand-lime); }
.tabbar svg { width: 22px; height: 22px; }

/* 검색 */
.search-widget { margin: 20px 0 8px; } .search-row input::placeholder { color: #a3a3aa; font-weight: 400; } .search-row input { caret-color: var(--brand-lime); }
/* 입력 전 깜빡이는 형광 커서(가짜). 입력칸을 누르거나 글자가 있으면 숨긴다 */
.search-row { position: relative; } .search-row::before { content: ""; position: absolute; left: 13px; top: 50%; width: 2px; height: 20px; margin-top: -10px; background: var(--brand-lime); border-radius: 1px; animation: pb-blink 1.1s steps(2, start) infinite; pointer-events: none; }
.search-row:focus-within::before, .search-row:has(input:not(:placeholder-shown))::before { display: none; }
@keyframes pb-blink { to { visibility: hidden; } }
/* 카테고리 허브 */
.hub-search { margin: 14px 0 12px; }
/* 반려 상식 게시판 상단 메뉴 */
.board-tabs { display: flex; gap: 0; margin: 6px -16px 16px; padding: 0 8px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .board-tabs::-webkit-scrollbar { display: none; }
.board-tabs a { flex: 0 0 auto; padding: 12px 10px; font-size: .95rem; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; border-bottom: 2.5px solid transparent; margin-bottom: -1px; } .board-tabs a.on { color: var(--ink); font-weight: 800; border-bottom-color: var(--ink); }
.hub { display: grid; grid-template-columns: 92px 1fr; gap: 0; margin: 0 -16px; border-top: 1px solid var(--line); }
.hub-rail { display: flex; flex-direction: column; background: var(--soft); border-right: 1px solid var(--line); position: sticky; top: 0; align-self: start; max-height: calc(100vh - 70px); overflow-y: auto; scrollbar-width: none; } .hub-rail::-webkit-scrollbar { display: none; }
.hub-rail .rail { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; padding: 8px 6px; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; font-size: .78rem; font-weight: 600; color: var(--sub); text-align: center; word-break: keep-all; line-height: 1.25; } .hub-rail .rail small { font-size: .66rem; color: var(--muted); font-weight: 500; }
.hub-rail .rail.on { background: #fff; color: var(--ink); font-weight: 800; box-shadow: inset 3px 0 0 var(--brand-lime); }
.hub-panels { min-width: 0; padding: 4px 14px 24px; }
.hub-panel { display: none; } .hub-panel.on { display: block; } .no-js .hub-panel { display: block; }
.hub-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 0 6px; } .hub-panel-head h2 { font-size: .95rem; margin: 0; } .hub-panel-head .cnt { font-size: .74rem; color: var(--muted); }
.hub .cat-tree { gap: 0; } .hub .cat-tree > li { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 2px 0; }
.hub .cat-tree details > summary > a { font-size: .9rem; font-weight: 700; } .hub .cat-tree .chips { padding-bottom: 8px; }
.search-label { display: block; font-weight: 700; font-size: .8rem; color: var(--muted); margin-bottom: 8px; }
.search-row { display: flex; gap: 8px; }
.search-row input { flex: 1; min-width: 0; width: 100%; min-height: 46px; font-size: 1rem; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 12px; font-family: inherit; }
.search-row button { min-width: 72px; min-height: 46px; border: 0; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 700; font-size: .93rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.chip { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-weight: 700; font-size: .87rem; color: var(--ink); }
.chip small { color: var(--muted); font-weight: 500; font-size: .8rem; }
.chip.has { border-color: var(--good); color: var(--good); } .chip.has small { color: var(--good); font-weight: 700; }
.chip[aria-pressed="true"], .chip.on { border-color: var(--ink); background: var(--ink); color: #fff; } .chip.on small { color: #fff; }
.chips.big .chip { min-height: 40px; }
.chips.soft .chip { border: 0; background: var(--chip); min-height: 30px; font-weight: 600; }
.chips.soft .lbl { color: var(--muted); font-weight: 700; font-size: .85rem; line-height: 30px; }
.chips.tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 6px 0; } .chips.tabs::-webkit-scrollbar { display: none; }
.chips.tabs .chip { flex: 0 0 auto; min-height: 32px; border: 0; background: var(--chip); font-size: .85rem; } .chips.tabs .chip.on { background: var(--ink); color: #fff; }

/* 히어로·퀵메뉴·통계 */
.hero-wrap { margin: 28px 0 22px; }
#popular.widget { padding-top: 26px; padding-bottom: 22px; } #popular + .widget { border-top-width: 8px; }
.hero-eyebrow { display: inline-block; margin: 0; padding: 2px 8px; border-radius: 6px; font-size: .8rem; font-weight: 700; color: #111; background: var(--brand-lime); }
.hero { font-size: 2.15rem; font-weight: 900; line-height: 1.15; letter-spacing: -.035em; margin: 0 0 12px; -webkit-text-stroke: 1.1px currentColor; } .hero .soft { display: block; font-size: 1.62rem; font-weight: 700; color: #55555c; letter-spacing: -.03em; margin-bottom: 4px; -webkit-text-stroke: 0; } .hero .soft .num { color: #9a9aa2; } .hero .hl { color: inherit; background: linear-gradient(transparent 62%, var(--brand-lime) 62%, var(--brand-lime) 94%, transparent 94%); padding: 0 2px; } .hero .soft + br { display: none; }
.hero-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 0; margin: 14px 0 0; padding: 0; font-size: .74rem; color: var(--muted); } .hero-stats { flex-wrap: nowrap; gap: 0; overflow-x: auto; scrollbar-width: none; font-size: .7rem; white-space: nowrap; } .hero-stats::-webkit-scrollbar { display: none; } .hero-stats li { display: inline-flex; align-items: center; gap: 4px; padding: 0 9px; border-right: 1px solid var(--line); } .hero-stats li:first-child { padding-left: 0; } .hero-stats li:last-child { border-right: 0; } .hero-stats b { color: var(--sub); font-weight: 700; } .hero-stats svg { color: #9a9aa2; }
.hero-sub { color: var(--sub); margin: 0; font-size: .9rem; line-height: 1.5; font-weight: 400; }
.stats { display: flex; gap: 14px; margin: 8px 0 0; font-size: .85rem; color: var(--muted); } .stats b { color: var(--ink); font-size: 1.07rem; }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; }
.quick a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: var(--radius); background: var(--soft); font-size: .8rem; font-weight: 700; } .quick svg { width: 24px; height: 24px; }

/* 위젯 */
.widget { margin: 48px 0; }
.home > .widget, .home > .search-widget + .hero-wrap { position: relative; }
.home > .widget { margin: 0; padding: 40px 0; border-top: 8px solid #f4f4f4; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
.home > .quick { margin-bottom: 32px; }
.widget-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 20px; }
.widget-head .cnt, .widget-head .date { font-size: .8rem; color: var(--muted); font-weight: 500; }
.hscroll { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 6px; -webkit-overflow-scrolling: touch; }
.hscroll::-webkit-scrollbar { display: none; }
.pop-row { margin: 0; padding: 2px 0 8px; gap: 12px; } .pop-row > * { flex: 0 0 120px !important; }
.pop { display: flex; flex-direction: column; gap: 5px; color: var(--ink); text-decoration: none; } .pop .rank { font-size: 1.05rem; font-weight: 800; line-height: 1; } .pop .thumb { width: 120px; height: 120px; } .pop .name { font-size: .82rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; } .pop .gheart { font-size: .58rem; padding: 1px 6px 1px 5px; gap: 3px; } .pop .price { font-size: .9rem; font-weight: 800; }
.pop-more { flex: 0 0 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--sub); text-decoration: none; font-size: .7rem; text-align: center; word-break: keep-all; } .pop-more .circle { width: 48px; height: 48px; border-radius: 999px; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; background: #fff; color: var(--ink); }
.hscroll > * { flex: 0 0 150px; scroll-snap-align: start; }

/* 카드 — 세로 작은 카드 (가로 넘김) */
.mini { display: flex; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.mini .row { display: flex; justify-content: space-between; align-items: center; }
.mini .rank { font-size: .93rem; font-weight: 800; color: var(--accent-ink); }
.mini .delta { font-size: .73rem; font-weight: 700; color: var(--good); } .mini .delta.flat { color: #9a9aa2; }
.mini .thumb { height: 110px; width: 100%; border-radius: 10px; }
.mini .cat { font-size: .73rem; color: var(--muted); }
.mini .name { font-size: .87rem; line-height: 1.3; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini .price { font-size: .93rem; font-weight: 800; } .mini .price .drop { font-size: .8rem; color: var(--good); font-weight: 700; }
.mini .reason { font-size: .73rem; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .grid2 .mini .thumb { height: 90px; }

/* 공통 썸네일·지수 */
.thumb { background: #f0efeb; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 10px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.noimg { color: #9a9aa2; font-size: .75rem; text-align: center; padding: 6px; }
.score { font-weight: 800; color: var(--good); white-space: nowrap; } .score b { font-size: 1.07rem; } .score small { font-size: .7rem; color: var(--muted); font-weight: 500; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; }
.mark, .vbadge { display: inline-block; padding: 1px 6px; border-radius: 6px; font-size: .73rem; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.mark.pick { background: var(--brand-lime); color: #111; border-radius: 999px; padding: 2px 10px; letter-spacing: -.01em; } .mark.pick i { color: #111; font-style: normal; font-weight: 900; }
.vbadge { background: #fff; color: #111; border: 1.5px solid #111; border-radius: 999px; padding: 1px 9px; }
.hearts { display: inline-flex; gap: 2px; align-items: center; white-space: nowrap; vertical-align: middle; background: #111; color: #fff; border-radius: 999px; padding: 4px 11px 4px 10px; line-height: 1; }
.hearts svg { display: block; } .hearts .h-num { font-size: .95em; font-weight: 800; margin-right: 5px; color: #fff; font-variant-numeric: tabular-nums; } .hearts .h-grade { margin-left: 6px; font-size: .78rem; font-weight: 700; color: var(--brand-lime); } .hearts .h-full { fill: var(--brand-lime); } .hearts .h-empty { fill: #3d3d3d; }
.score-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .method-tbl td:not(:last-child), .method-tbl th:not(:last-child) { white-space: nowrap; } .score-line small { font-size: .73rem; color: var(--muted); font-weight: 600; }
.score-wait { color: var(--muted); font-weight: 500; font-size: .8rem; }

/* 카드 — 한 줄 카드 (목록) */
.line-card { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; min-height: var(--tap); }
.line-card .rank { font-size: .8rem; font-weight: 800; color: var(--muted); text-align: center; }
.line-card .thumb { width: 56px; height: 56px; border-radius: 8px; }
.line-card .meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.line-card .cat { font-size: .73rem; color: var(--muted); }
.line-card .name { font-size: .93rem; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-card .sub { font-size: .73rem; color: var(--muted); }
.line-card .score { font-size: 1.13rem; } .line-card .score small { font-size: .67rem; }
.list { display: flex; flex-direction: column; gap: 14px; }

/* 카드 — 펼침 카드 (카테고리 1·2위) */
.big-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.big-card.top1 { border: 1.5px solid var(--ink); }
.big-card .head { display: grid; grid-template-columns: 96px 1fr; gap: 14px; color: inherit; text-decoration: none; border-radius: 10px; } .big-card a.head:active, .big-card a.foot:active { background: var(--soft); }
.big-card .pic { position: relative; } .big-card .pic .thumb { width: 96px; height: 96px; }
.big-card .badge { position: absolute; top: -8px; left: -8px; width: 28px; height: 28px; border-radius: 999px; background: var(--sub); color: #fff; font-size: .87rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.big-card.top1 .badge { background: var(--ink); }
.big-card .meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.big-card .cat { font-size: .73rem; color: var(--muted); }
.big-card .name { font-size: .93rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 40px; }
.card-save { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--sub); } .card-save[aria-pressed="true"] { background: var(--ink); color: var(--brand-lime); border-color: var(--ink); }
.big-card .gheart { font-size: .66rem; padding: 2px 8px 2px 6px; gap: 4px; }
.big-card .pricebox { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 2px; } .big-card .pricebox .was { font-size: .8rem; color: var(--muted); } .big-card .pricebox .now { font-size: 1.13rem; font-weight: 800; } .big-card .pricebox .when { font-size: .72rem; color: var(--muted); flex-basis: 100%; }
.big-card .unit-line { font-size: .78rem; color: var(--sub); }
.big-card .score-line { display: flex; align-items: baseline; gap: 6px; } .big-card .score-line b { font-size: 1.47rem; font-weight: 800; color: var(--good); } .big-card .score-line small { font-size: .73rem; color: var(--muted); }
.big-card .facts-line { font-size: .74rem; color: var(--muted); }
.parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-size: .73rem; color: var(--muted); }
.parts div { padding: 8px; border-radius: 8px; background: var(--soft); } .parts b { display: block; font-size: .93rem; color: var(--ink); } .parts b small { font-size: .67rem; font-weight: 500; }
.pros-cons { margin: 0; font-size: .87rem; line-height: 1.5; } .pros-cons .pro { color: var(--good); } .pros-cons .con { color: var(--accent-ink); }
.big-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: inherit; text-decoration: none; margin: 0; max-width: none; padding: 14px 0 0; font-size: 1rem; border-top: 1px solid var(--line); border-radius: 0; }
.big-card .price { display: flex; flex-direction: column; } .big-card .price b { font-size: 1.13rem; font-weight: 800; } .big-card .price small { font-size: .73rem; color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border-radius: 10px; background: var(--accent); color: #fff; font-size: .93rem; font-weight: 800; border: 0; white-space: nowrap; }
.btn.ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); }
.btn.soft { background: #fff; color: var(--ink); border: 1.5px solid var(--line); width: 100%; }
.btn.off, .buy.off { background: #eef0f2; color: #4a5058; font-weight: 700; cursor: default; }
.more-wrap { display: none; } .more-wrap.open { display: flex; flex-direction: column; gap: 8px; }

/* 정렬·필터 */
.sortbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 22px -16px 18px; padding: 18px 16px 0; border-top: 4px solid #f3f3f4; }
.sortbar h2 { font-size: 1rem; } .sortbar .count { margin: 0; font-size: .85rem; color: var(--muted); font-weight: 500; }
.sort-select select { min-height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M7 10l5 5 5-5%27 fill=%27none%27 stroke=%27%23111%27 stroke-width=%272.2%27/%3E%3C/svg%3E") no-repeat right 8px center/16px; font: inherit; font-size: .85rem; font-weight: 700; color: var(--ink); appearance: none; -webkit-appearance: none; }
.review-text { font-size: .9rem; line-height: 1.65; color: var(--sub); margin: 0 0 10px; } .review-sum .tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: var(--chip); font-size: .78rem; } .review-sum .tag small { color: var(--muted); }
.h1-small { font-size: .8rem; font-weight: 600; color: var(--muted); margin: 6px 0 0; letter-spacing: 0; line-height: 1.3; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pb-intro { margin: 14px 0 8px; padding: 9px 11px; border-radius: var(--radius); background: var(--soft); border-left: 4px solid var(--brand-lime); font-size: .72rem; line-height: 1.55; color: var(--ink); }
.pb-intro .pb-intro-title { display: block; font-size: .78rem; font-weight: 800; margin-bottom: 4px; }
.pb-intro p { margin: 0 0 4px; line-height: 1.5; word-break: keep-all; }
.pb-notes { list-style: none; margin: 8px 0 0; padding: 0 2px; font-size: .68rem; line-height: 1.5; color: #9a9aa2; word-break: keep-all; } .pb-notes li { padding-left: 10px; text-indent: -10px; } .pb-notes li::before { content: "* "; }
.pb-intro-sm { font-size: .66rem; line-height: 1.5; padding: 8px 10px; margin: 18px 0 6px; border-left-width: 3px; } .pb-intro-sm .pb-intro-title { font-size: .72rem; margin-bottom: 2px; } .pb-intro-sm p { margin: 0 0 3px; } .pb-intro-sm .pb-intro-link { font-size: .66rem; }
.pb-notes-sm { font-size: .62rem; margin: 4px 0 0; white-space: nowrap; overflow: hidden; } .pb-notes-sm li { text-overflow: ellipsis; overflow: hidden; }
.heart-link { display: inline-flex; text-decoration: none; min-height: 44px; align-items: center; }
.pb-intro .pb-intro-link { display: inline-block; margin-top: 2px; font-size: .72rem; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; min-height: 0; } .sortbar .date { font-size: .8rem; color: var(--muted); font-weight: 500; }
.filters { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.filters .chip { min-height: 30px; padding: 0 10px; font-size: .8rem; border: 0; background: var(--chip); }

/* 카테고리 */
.crumb { font-size: .8rem; color: var(--muted); margin: 12px 0 0; display: flex; gap: 4px; flex-wrap: wrap; } .crumb a { color: var(--muted); } .crumb .here { color: var(--ink); font-weight: 700; }
.cat-group .widget-head h2 a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.cat-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cat-tree > li { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; }
.cat-tree details > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; min-height: var(--tap); }
.cat-tree details > summary::-webkit-details-marker { display: none; }
.cat-tree details > summary::after { content: "▾"; color: var(--muted); } .cat-tree details[open] > summary::after { content: "▴"; }
.cat-tree details > summary > a { flex: 1; font-weight: 800; font-size: .95rem; } .cat-tree details > summary > a.has { color: var(--good); } .cat-tree details > summary > a small { margin-left: 6px; font-size: .8rem; color: var(--good); }
.cat-tree .chips { margin: 0 0 4px; }
.cat-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--good); border-radius: 12px; min-height: var(--tap); }
.cat-card .meta { display: flex; flex-direction: column; } .cat-card b { font-size: .93rem; } .cat-card span { font-size: .8rem; color: var(--good); font-weight: 700; } .cat-card .arr { color: var(--good); font-weight: 800; font-size: 1.1rem; }
.guide-box { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--radius); background: var(--soft); margin: 16px 0; }
.guide-box h2 { font-size: 1rem; } .guide-box ol { margin: 0; padding-left: 18px; font-size: .87rem; color: var(--sub); display: flex; flex-direction: column; gap: 4px; } .guide-box ol b { color: var(--ink); }
.guide-box .more { font-size: .87rem; }

/* 검증 요청 */
.empty-cat { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: var(--soft); margin: 14px 0; }
.empty-cat .lead-row { display: flex; align-items: center; gap: 10px; }
.empty-cat .ico { width: 40px; height: 40px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .empty-cat .ico svg { width: 22px; height: 22px; }
.empty-cat .lead-row b { font-size: 1rem; display: block; } .empty-cat .lead-row span { font-size: .8rem; color: var(--muted); }
.request { display: flex; flex-direction: column; gap: 10px; }
.request-note { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--sub); }
.request-note input { min-height: 44px; padding: 0 12px; font-size: .93rem; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font-family: inherit; font-weight: 400; }
.request-btn { min-height: 48px; width: 100%; font-size: 1rem; }
.request-btn:disabled { opacity: .6; }
.request-status { margin: 0; font-weight: 700; min-height: 1.2em; font-size: .87rem; } .request-status.ok { color: var(--good); } .request-status.err { color: var(--accent-ink); }
.request.sent .request-note, .request.sent .request-btn { display: none; }
.request.compact { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px dashed #c9c9cf; border-radius: 12px; margin: 16px 0; flex-wrap: wrap; }
.request.compact .txt { display: flex; flex-direction: column; } .request.compact .txt b { font-size: .93rem; } .request.compact .txt span { font-size: .8rem; color: var(--muted); }
.request.compact .request-note { display: none; flex-basis: 100%; } .request.compact.open .request-note { display: flex; }
.request.compact .request-btn { width: auto; min-height: 40px; font-size: .87rem; } .request.compact .request-status, .request.compact .tiny { flex-basis: 100%; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; font-size: .73rem; text-align: center; margin: 6px 0; }
.steps div { padding: 8px 4px; border-radius: 8px; background: var(--chip); color: var(--muted); font-weight: 700; } .steps div.on { background: var(--ink); color: #fff; }
.news { display: flex; flex-direction: column; gap: 8px; font-size: .87rem; } .news div { display: flex; justify-content: space-between; gap: 8px; } .news .st { font-weight: 700; } .news .st.done { color: var(--good); } .news .st.doing { color: var(--accent-ink); } .news .st.queued { color: var(--muted); }
.box { padding: 14px; border-radius: var(--radius); background: var(--soft); display: flex; flex-direction: column; gap: 10px; }

/* 가이드·기준 */
dialog.sheet { border: 0; border-radius: 16px; padding: 20px; width: min(92vw, 420px); color: var(--ink); }
dialog.sheet::backdrop { background: rgba(0,0,0,.45); }
dialog.sheet .sheet-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; } dialog.sheet .sheet-head img { border-radius: 12px; } dialog.sheet .sheet-head p { margin: 2px 0 0; color: var(--muted); font-size: .87rem; }
dialog.sheet h2 { font-size: 1.07rem; margin: 0; } dialog.sheet ol li::marker { font-weight: 800; } dialog.sheet ol { margin: 0 0 10px; border-top: 3px solid var(--brand-lime); padding-top: 10px; padding-left: 20px; line-height: 1.7; } dialog.sheet .btn { width: 100%; min-height: var(--tap); }
[data-install][hidden] { display: none; }
.banner { display: block; border-radius: var(--radius); overflow: hidden; } .banner img { width: 100%; height: auto; }
.browse-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 10px; margin-bottom: 16px; }
.browse-tile { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: var(--tap); color: var(--ink); }
.browse-tile[hidden] { display: none; }
.browse-tile .thumb { aspect-ratio: 1; width: 100%; }
.browse-tile .name { font-size: .8rem; font-weight: 700; line-height: 1.3; text-align: center; word-break: keep-all; }
.pet-tag { position: absolute; top: 4px; left: 4px; z-index: 1; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.94); color: #3b4148; font-size: .73rem; font-weight: 700; box-shadow: 0 0 0 1px var(--line); }
.guide-grid { display: grid; gap: 8px; }
.guide-grid.two { grid-template-columns: 1fr 1fr; gap: 10px; } .guide-grid.two .guide { min-height: 120px; justify-content: space-between; } .guide-grid.two .guide strong { font-size: .93rem; line-height: 1.4; word-break: keep-all; }
.guide { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); min-height: var(--tap); }
.guide strong { font-size: .95rem; } .guide span { color: var(--muted); font-size: .87rem; } .guide small { color: var(--accent-ink); font-weight: 700; font-size: .8rem; }
.method-link { display: block; padding: 14px; border-radius: var(--radius); background: var(--soft); }
.method-link strong { display: block; font-size: .95rem; } .method-link span { color: var(--muted); font-size: .87rem; }
.points { padding-left: 20px; font-size: .95rem; } .points li { margin: 5px 0; }
.method h1 { margin-bottom: 10px; } .method h2 { margin: 36px 0 12px; } .method .lead { line-height: 1.7; } .method p { line-height: 1.7; }
.heart-note { margin: 20px 0 8px; padding: 14px 16px; border-radius: var(--radius); background: #111; color: #fff; } .heart-note b { color: var(--brand-lime); font-size: .97rem; } .heart-note p { margin: 6px 0 0; font-size: .9rem; color: #e8e8e8; }
.disclaimer { margin-top: 40px; padding-top: 8px; border-top: 1px solid var(--line); } .disclaimer h2 { margin-top: 20px; } .disclaimer ol { padding-left: 1.3em; font-size: .87rem; color: var(--sub); line-height: 1.7; } .disclaimer li { margin: 6px 0; }
.heart-mini { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--radius); background: var(--soft); font-size: .85rem; color: var(--sub); } .heart-mini a { font-weight: 700; color: var(--ink); }
.method-pillars { display: grid; gap: 10px; } .method-pillars div { padding: 12px 14px; border-radius: var(--radius); background: var(--soft); border-left: 4px solid var(--brand-lime); } .method-pillars b { display: block; font-size: .95rem; margin-bottom: 2px; } .method-pillars span { color: var(--muted); font-size: .87rem; }
.method-steps { padding-left: 1.3em; } .method-steps li { margin: 10px 0; line-height: 1.6; } .method-steps b { margin-right: 6px; }
.tbl { width: 100%; border-collapse: collapse; font-size: .85rem; } .tbl th, .tbl td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; vertical-align: top; } .tbl th { background: var(--soft); }

/* 상품 상세 */
.product { padding-bottom: 110px; }
.hero-img { margin: 10px -16px 0; aspect-ratio: 1; background: var(--soft); overflow: hidden; } .hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-img .noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: .9rem; }
.product-info { display: flex; flex-direction: column; gap: 7px; padding: 14px 0 4px; } .product-info h1 { font-size: 1.1rem; font-weight: 700; line-height: 1.4; margin: 0; letter-spacing: -.01em; } .product-info .badge-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .product-info .gheart { font-size: .66rem; padding: 2px 8px 2px 6px; gap: 4px; } .product-info .heart-link { min-height: 0; }
.product-info .pricebox { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 2px; } .product-info .pricebox .now { font-size: 1.45rem; font-weight: 800; } .product-info .pricebox .when { font-size: .74rem; color: var(--muted); }
.product-info .unit-line { font-size: .84rem; color: var(--sub); } .product-info .review-line { font-size: .8rem; color: var(--muted); } .product-info .review-line a { font-weight: 700; color: var(--ink); margin-left: 4px; }
.analysis { margin: 18px 0 6px; } .analysis h2 { font-size: 1.05rem; margin: 0 0 8px; } .analysis h2 small { font-size: .72rem; color: var(--muted); font-weight: 500; margin-left: 6px; }
.analysis-body { font-size: .92rem; line-height: 1.7; color: var(--sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .analysis-body p { margin: 0 0 10px; } .analysis.open .analysis-body { display: block; -webkit-line-clamp: unset; }
.analysis-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; min-height: 36px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: .84rem; font-weight: 700; color: var(--ink); } .analysis-more svg { transition: transform .2s; } .analysis.open .analysis-more svg { transform: rotate(180deg); } .analysis.no-more .analysis-more { display: none; }
.analysis-body .q-title { font-weight: 700; color: var(--ink); margin: 4px 0 4px; } .analysis-body .quotes { margin: 0 0 10px; padding-left: 18px; } .analysis-body .quotes li { margin: 2px 0; }
.divider { border: 0; border-top: 6px solid #f3f3f4; margin: 18px -16px 4px; }
.product-top { display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: start; margin-top: 10px; }
.product-top .thumb { width: 132px; height: 132px; border-radius: 12px; }
.product-top .brand { font-size: .8rem; color: var(--muted); font-weight: 700; }
.product-top h1 { font-size: 1.05rem; font-weight: 600; line-height: 1.35; margin: 0; }
.product-top .meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.product-top .gheart { font-size: .66rem; padding: 2px 8px 2px 6px; gap: 4px; }
.product-top .heart-link { min-height: 0; }
.product-top .pricebox { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; } .product-top .pricebox .now { font-size: 1.25rem; font-weight: 800; } .product-top .pricebox .when { font-size: .72rem; color: var(--muted); flex-basis: 100%; }
.product-top .unit-line { font-size: .8rem; color: var(--sub); }
.product-top .rankline { font-size: .8rem; color: var(--sub); }
.product-top .score-line { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; } .product-top .score-line b { font-size: 2rem; font-weight: 800; color: var(--good); line-height: 1; } .product-top .score-line small { font-size: .8rem; color: var(--muted); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-size: .73rem; color: var(--muted); margin: 18px 0 8px; }
.kpis-2 { grid-template-columns: 1fr 1fr; position: relative; padding-bottom: 0; } .kpis-link { display: block; color: inherit; text-decoration: none; } .kpis-link:active .kpis div { background: var(--chip); } .kpis-go { grid-column: 1 / -1; text-align: right; font-size: .74rem; font-weight: 700; color: var(--ink); padding: 0 4px 2px; }
.kpis div { padding: 10px; border-radius: 10px; background: var(--soft); } .kpis b { display: block; font-size: 1.07rem; color: var(--ink); } .kpis b small { font-size: .67rem; font-weight: 500; }
.review-sum { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-size: .87rem; }
.review-sum div { padding: 12px; border-radius: 12px; display: flex; flex-direction: column; gap: 6px; } .review-sum .pros { background: var(--ok-bg); } .review-sum .cons { background: var(--bad-bg); }
.review-sum b { font-size: .8rem; } .review-sum .pros b { color: var(--ok); } .review-sum .cons b { color: var(--accent-ink); }
.cmp { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: .8rem; }
.cmp .r { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; border-top: 1px solid var(--line); } .cmp .r:first-child { border-top: 0; background: var(--soft); color: var(--muted); font-weight: 700; }
.cmp .r > * { padding: 8px 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmp .r > :first-child { padding-left: 10px; color: var(--muted); }
.cmp .me { font-weight: 800; } .cmp .me.g { color: var(--good); } .cmp .r:first-child .me { color: var(--ink); }
.facts { display: grid; grid-template-columns: 84px 1fr; gap: 6px 10px; margin: 0; font-size: .87rem; } .facts dt { color: var(--muted); font-weight: 700; } .facts dd { margin: 0; }
.chart { margin: 0; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.chart svg { width: 100%; height: auto; } .chart .grid { stroke: var(--line); } .chart .tick { font-size: 15px; fill: var(--muted); }
.chart .line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; } .chart .avg { stroke: #9aa0a6; stroke-dasharray: 6 6; stroke-width: 2; }
.chart .dot-min { fill: var(--good); } .chart .dot-now { fill: var(--accent); }
.chart figcaption { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8rem; margin-top: 6px; }
.sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; } .sw-min { background: var(--good); } .sw-now { background: var(--accent); } .sw-avg { background: #9aa0a6; }
.buy-bar { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); padding: 10px 16px 8px; background: #fff; border-top: 1px solid var(--line); z-index: 15; }
.buy-row { display: flex; gap: 8px; max-width: var(--maxw); margin: 0 auto; }
.save { width: 56px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font-size: .73rem; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink); }
.save svg { width: 18px; height: 18px; } .save[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink); }
.buy { flex: 1; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; background: var(--accent); color: #fff; font-size: 1rem; font-weight: 800; line-height: 1.2; }
.buy small { font-size: .73rem; font-weight: 500; opacity: .92; }
.buy-bar .disclosure { font-size: .67rem; margin: 4px 0 0; text-align: center; color: var(--muted); }

/* 검색 */
.search-cats { margin: 8px 0 14px; }

/* 하단 */
.foot { max-width: var(--maxw); margin: 32px auto 0; padding: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.foot-brand { font-weight: 800; color: var(--ink); } .foot nav a { font-weight: 700; }
.disclosure { font-size: .8rem; }
@media (min-width: 600px) { .guide-grid { grid-template-columns: 1fr 1fr; } .hscroll > * { flex-basis: 180px; } }
.filters .chip.on { background: var(--ink); color: #fff; }

/* 먹어도 되나요 */
.food-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; min-height: var(--tap); }
.food-card .q { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .food-card .q b { font-size: .95rem; } .food-card .q span { font-size: .8rem; color: var(--muted); }
.verdict { flex: 0 0 auto; font-size: .73rem; font-weight: 800; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.v-ok { background: var(--ok-bg); color: var(--ok); } .v-no { background: #fff3e4; color: #9a5300; } .v-ban { background: var(--bad-bg); color: var(--accent-ink); } .v-hold { background: var(--chip); color: var(--sub); }
.verdict-box { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; margin: 10px 0 14px; font-size: 1rem; } .verdict-box .lbl { font-size: .8rem; font-weight: 700; opacity: .8; } .verdict-box b { font-size: 1.07rem; }
.verdict-box.v-ok { background: var(--ok-bg); color: var(--ok); } .verdict-box.v-no { background: #fff3e4; color: #9a5300; } .verdict-box.v-ban { background: var(--bad-bg); color: var(--accent-ink); } .verdict-box.v-hold { background: var(--chip); color: var(--sub); }
.article .eyebrow { margin: 12px 0 0; font-size: .8rem; font-weight: 700; color: var(--muted); }
.article h1 { margin-top: 4px; } .article > p { font-size: .97rem; line-height: 1.65; margin: 10px 0; }
.article .scope { font-size: .87rem; color: var(--sub); background: var(--soft); padding: 10px 12px; border-radius: 10px; }
.article h2 { margin: 18px 0 8px; font-size: 1.07rem; }
.emergency { margin: 16px 0; border: 1.5px solid var(--accent); background: #fff; } .emergency b { color: var(--accent-ink); } .emergency p { margin: 0; font-size: .9rem; }
.sources { padding-left: 20px; font-size: .85rem; color: var(--sub); } .sources li { margin: 3px 0; }
.food-search { margin: 6px 0 12px; } .food-search input { min-height: 42px; }
.story p { font-size: 1rem; line-height: 1.75; margin: 14px 0; } .story h1 { font-size: 1.5rem; }
.story h2 { margin: 36px 0 10px; font-size: 1.13rem; } .story ul { margin: 10px 0; padding-left: 1.2em; font-size: 1rem; line-height: 1.75; } .story li { margin: 4px 0; }
.toc { margin: 12px 0 18px; } .toc .points { margin: 0; } .toc a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.guide-article h2 { margin: 22px 0 8px; font-size: 1.07rem; } .guide-article > p { font-size: .97rem; line-height: 1.65; }
.sources a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.score-line .hearts .h-num, .hearts .h-num { color: #fff; font-size: 1rem; line-height: 1; } .product-top .score-line .hearts { padding: 6px 13px 6px 12px; } .product-top .score-line .hearts .h-num { font-size: 1.2rem; }
.cat-intro h3 { font-size: 1rem; margin: 22px 0 8px; } .cat-intro h3:first-of-type { margin-top: 0; } .cat-intro p, .cat-intro li { font-size: .95rem; line-height: 1.7; color: var(--sub); } .cat-intro p { margin: 0 0 10px; } .cat-intro ul { margin: 0; padding-left: 1.2em; } .cat-intro li { margin: 6px 0; } .cat-intro b { color: var(--ink); }
.answer { margin: 4px 0 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--soft); border-left: 4px solid var(--brand-lime); font-size: .95rem; line-height: 1.6; }
.home-faq details { border-bottom: 1px solid var(--line); } .home-faq summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 700; cursor: pointer; padding: 10px 0; } .home-faq details p { margin: 0 0 14px; color: var(--sub); line-height: 1.7; }

/* 펫바이블 그린 하트(인증 마크) */
.meta .hearts, .big-card .hearts { align-self: flex-start; margin-top: 4px; }
.gheart { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 3px 10px 3px 8px; border-radius: 999px; background: #111; color: var(--brand-lime); font-size: .78rem; font-weight: 800; white-space: nowrap; }
.gheart svg path { fill: var(--brand-lime); }
.gheart-inline { display: inline-flex; vertical-align: middle; font-size: .62rem; padding: 1px 7px 1px 5px; gap: 3px; margin-right: 1px; }
.leaf-group { margin: 36px 0; } .leaf-group h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 14px; } .leaf-group h2 small { font-size: .8rem; color: var(--muted); font-weight: 600; }