/* Pretendard 동적 서브셋 — 한글 웹폰트는 통짜로 받으면 수 MB 다. 못 받아도 시스템 글꼴로 읽힌다. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root {
  color-scheme: light;
  --page: #ffffff;
  --card: #ffffff;
  --surface: #f6f7f9;
  --line: #e8eaed;
  --line-strong: #d3d8de;
  --ink: #191f28;
  --ink-2: #4e5968;
  --ink-3: #8b95a1;

  /* 화면의 주황. 로고보다 밝고 선명하다 — 버튼·링크·켜진 탭이 이 색이다.
     흰 바탕 대비 5.2:1, 이 위의 흰 글자도 5.2:1 이라 양쪽으로 AA 를 넘는 **가장 밝은 주황**이다.
     여기서 더 밝히면(#d4500f 부터) 4.5:1 아래로 떨어져 작은 글자가 읽히지 않는다. */
  --brand: #c2410c;
  --brand-dark: #9a330a;
  --brand-soft: #fdf1ea;
  /* 배너 그라디언트 — 흰 글자가 얹히므로 밝은 쪽 끝을 너무 밝히지 않는다. */
  --hero-from: #d4500f;
  --hero-to: #ef8c3c;

  --drop: #d8232a;
  /* 썸네일을 두르는 아주 옅은 선. 흰 상품 사진이 흰 바탕에 녹아 칸 경계가 사라지던 자리다. */
  --line-soft: #ededf0;
  /* 목록의 상품명. 값보다 한 단계 여린 글자라 본문 먹색과 따로 둔다. */
  --card-name: #555555;
  --r-card: 12px;
  --r-media: 10px;
  --r-btn: 8px;
  --wrap: 1320px;

  /* 타이포 썸네일 — 카테고리마다 고정. 순환하지 않는다(같은 분류는 언제나 같은 색). */
  --cat-food-bg: #e3f4ec;    --cat-food-fg: #0f6b48;
  --cat-living-bg: #e4eefb;  --cat-living-fg: #1d5aa6;
  --cat-digital-bg: #fdeadf; --cat-digital-fg: #a7461b;
  --cat-fashion-bg: #fbe5ef; --cat-fashion-fg: #a8335f;
  --cat-beauty-bg: #f3e6fa;  --cat-beauty-fg: #7a3aa0;
  --cat-health-bg: #e6f2e0;  --cat-health-fg: #3f6d1f;
  --cat-pet-bg: #fdf1d6;     --cat-pet-fg: #8a5d00;
  --cat-etc-bg: #eceff1;     --cat-etc-fg: #52606a;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #14181b;
    --card: #1c2226;
    --surface: #222a2f;
    --line: #2c343a;
    --line-strong: #414c54;
    --ink: #f2f5f6;
    --ink-2: #b6c0c7;
    --ink-3: #8b969e;

    --brand: #ff8a4c;
    --brand-dark: #ffa472;
    --brand-soft: #35200f;
    --hero-from: #c2410c;
    --hero-to: #d97a35;

    --drop: #ff7b8c;
    --line-soft: #2c343a;
    --card-name: #b6c0c7;

    --cat-food-bg: #13342a;    --cat-food-fg: #7fdab4;
    --cat-living-bg: #172a44;  --cat-living-fg: #8fbaf0;
    --cat-digital-bg: #3d2317; --cat-digital-fg: #f2a57c;
    --cat-fashion-bg: #3d1c2a; --cat-fashion-fg: #f09ac0;
    --cat-beauty-bg: #2f1d3b;  --cat-beauty-fg: #cfa3ec;
    --cat-health-bg: #1f3016;  --cat-health-fg: #a8d88a;
    --cat-pet-bg: #3a2c0f;     --cat-pet-fg: #f0c766;
    --cat-etc-bg: #262e33;     --cat-etc-fg: #b6c0c7;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 15px/1.6 "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
        "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  -webkit-text-size-adjust: 100%;
  word-break: keep-all;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
@media (max-width: 720px) { .wrap { padding: 0 16px; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--brand); color: #fff; padding: 10px 16px; border-radius: var(--r-btn); font-weight: 700;
}
.skip:focus { top: 12px; }

/* ================= 머리 ================= */

.site-head { background: var(--card); }

/* 스크롤해도 붙어 있는 것은 **대메뉴 줄 하나**다(2026-09-17 사용자 결정). 머리 전체를 붙였더니
   폰에서 검색줄까지 화면 위쪽을 너무 먹었다. 대메뉴는 머리 밖(body 바로 아래)에 있어야 붙는다 —
   예전엔 머리 안에 있어서 sticky 를 줘도 머리와 함께 밀려 올라갔다.
   --bar-h 는 스크립트가 잰 실제 높이다(펼침 패널을 열면 커진다). 아래 값은 스크립트가 없을 때의 대략값. */
:root { --bar-h: 52px; }
html { scroll-padding-top: calc(var(--bar-h) + 12px); }
.gnb-bar {
  position: sticky; top: 0; z-index: 40;
  background: var(--card); border-bottom: 1px solid var(--line);
}

/* 얇은 보조 줄 — 자주 안 누르는 것들. 좁은 화면에서는 자리만 차지하므로 감춘다. */
.head-util { border-bottom: 1px solid var(--line); }
.head-util-in { display: flex; justify-content: flex-end; gap: 18px; height: 34px; align-items: center; }
.head-util-in a { font-size: 12.5px; color: var(--ink-3); }
.head-util-in a:hover { color: var(--ink-2); }
@media (max-width: 720px) { .head-util { display: none; } }

/* **가운데 칸이 화면 가운데다.** flex 로 두면 검색창이 로고와 버튼 **사이**의 가운데에 서는데,
   로고가 버튼보다 넓어서 오른쪽으로 밀려 보였다. 양옆을 같은 1fr 로 두면 검색이 페이지 가운데에 온다. */
.head-main {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(0, 1fr);
  align-items: center; gap: 24px;
  padding-top: 16px; padding-bottom: 16px;
}

/* ---- 로고 ---- */
.brand { display: flex; align-items: center; gap: 10px; flex: none; justify-self: start; }
.brand:hover { text-decoration: none; }
.brand-mark { display: block; width: 38px; height: 38px; flex: none; }
.brand-mark svg { display: block; width: 100%; height: 100%; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-size: 23px; font-weight: 800; letter-spacing: -0.06em; }
.brand-text small { font-size: 11.5px; color: var(--ink-3); letter-spacing: -0.02em; margin-top: 2px; }
/* 로고 글자는 아주 좁을 때만 뗀다. 마크만 남으면 어느 사이트인지 한 박자 늦게 읽힌다. */
@media (max-width: 360px) { .brand-text { display: none; } }

/* ---- 가운데 검색 ---- */
.search {
  position: relative; width: 100%;
  display: flex; align-items: center;
  border: 2px solid var(--brand); border-radius: 999px; background: var(--card);
}
.search-input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 15px; padding: 11px 6px 11px 20px; border-radius: 999px;
}
.search-input:focus { outline: none; }
.search-input::placeholder { color: var(--ink-3); }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-go {
  flex: none; border: 0; background: transparent; color: var(--brand);
  padding: 8px 16px 8px 8px; cursor: pointer; display: grid; place-items: center; border-radius: 999px;
}
.search-go:hover { color: var(--brand-dark); }

/* 자동완성. 머리 밖으로 넘치므로 z-index 가 대메뉴보다 높아야 한다. */
.search-pop {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  overflow: hidden; max-height: 60vh; overflow-y: auto;
}
.search-pop a {
  display: flex; align-items: baseline; gap: 12px; padding: 11px 16px;
  border-bottom: 1px solid var(--line);
}
.search-pop a:last-child { border-bottom: 0; }
.search-pop a:hover, .search-pop a[aria-selected="true"] { background: var(--surface); text-decoration: none; }
.sp-name {
  flex: 1; min-width: 0; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-price { flex: none; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---- 오른쪽 두 버튼 ---- */
.head-actions { display: flex; align-items: center; gap: 8px; flex: none; justify-self: end; }
.act {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 10px; color: var(--ink-2); font-size: 11.5px; font-weight: 600; letter-spacing: -0.02em;
}
.act:hover { color: var(--brand); text-decoration: none; }
.act svg { display: block; }
.act-sub { color: var(--brand); }
.act-count {
  position: absolute; top: -2px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--drop); color: #fff; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
}
/* 좁은 화면: 로고·버튼 한 줄, 검색은 그 아래 전폭. */
@media (max-width: 560px) {
  .head-main { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .search { order: 3; grid-column: 1 / -1; }
  .act span:not(.act-count) { display: none; }
}

/* ---- 대메뉴 = 카테고리 ---- */
.gnb { background: var(--card); border-top: 1px solid var(--line); }
.gnb-in {
  display: flex; align-items: center; gap: 4px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.gnb-in::-webkit-scrollbar { display: none; }
/* 가운데 맞춤. justify-content: center 를 쓰지 않는다 — 좁은 화면에서 넘치면 왼쪽 끝이
   스크롤로도 닿지 않게 잘린다. 양 끝의 auto 여백은 넘칠 때 0 이 되어 그 문제가 없다. */
.gnb-in > :first-child { margin-left: auto; }
.gnb-in > :last-child { margin-right: auto; }
.gnb-in a, .gnb-all {
  flex: none; padding: 13px 14px; font-size: 15px; font-weight: 600; letter-spacing: -0.03em;
  color: var(--ink-2); white-space: nowrap; border-bottom: 3px solid transparent;
}
.gnb-in a:hover { color: var(--ink); text-decoration: none; }
.gnb-in a.on { color: var(--brand); border-bottom-color: var(--brand); }
.gnb-all {
  display: flex; align-items: center; gap: 6px; margin-right: 8px;
  border: 0; background: transparent; cursor: pointer; font-family: inherit; color: var(--ink);
}
.cat-panel { background: var(--card); border-bottom: 1px solid var(--line); }
.cat-panel { border-top: 1px solid var(--line); border-bottom: 0; }
.cat-panel-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 16px; padding-bottom: 16px; }
.cat-panel-in a {
  padding: 8px 14px; border-radius: 999px; background: var(--surface);
  font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.cat-panel-in a:hover { background: var(--brand-soft); color: var(--brand); text-decoration: none; }

/* ================= 타이틀 배너 ================= */

/* 그림은 인라인 style 로 들어온다(컨텐츠 허브가 갈아끼운다). 여기서는 깔리는 방식만 정한다. */
.hero {
  position: relative;
  background: linear-gradient(115deg, var(--hero-from) 0%, var(--hero-to) 100%);
  background-size: cover; background-position: center;
  color: #fff;
}
/* 그림 위의 글자가 읽히도록 어둡게 덮는다. 어떤 그림이 올지 모르므로 반드시 필요하다. */
.hero.has-image::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.55) 100%);
}
.hero-in { position: relative; padding-top: 44px; text-align: center; }
.hero-title {
  margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.05em; line-height: 1.25;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
}
.hero-sub {
  margin: 8px 0 0; font-size: 15px; color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}
@media (max-width: 720px) {
  .hero-in { padding-top: 30px; }
  .hero-title { font-size: 25px; }
  .hero-sub { font-size: 13.5px; }
}

/* 탭 — 배너 아래 모서리에 걸터앉는다. 켜진 탭이 본문 바탕색이라 아래로 이어져 보인다. */
.hero-tabs {
  display: flex; justify-content: center; gap: 6px;
  margin: 28px auto 0; padding: 0 4px;
  overflow-x: auto; scrollbar-width: none;
}
.hero-tabs::-webkit-scrollbar { display: none; }
.hero-tabs a {
  flex: none; padding: 13px 28px; border-radius: 12px 12px 0 0;
  background: rgba(255, 255, 255, 0.2); color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap;
}
.hero-tabs a:hover { background: rgba(255, 255, 255, 0.32); text-decoration: none; }
.hero-tabs a.on { background: var(--page); color: var(--brand); }
@media (max-width: 720px) { .hero-tabs a { padding: 11px 18px; font-size: 14px; } }
/* 좁은 화면에서는 가운데 맞춤을 버린다 — 넘칠 때 가운데로 맞추면 양 끝이 잘려 나간다. */
@media (max-width: 480px) {
  .hero-tabs { justify-content: flex-start; }
  .hero-tabs a { padding: 11px 14px; font-size: 13.5px; }
}

/* ================= 본문 ================= */

/* 켜진 탭이 본문과 같은 흰색이라 배너와 본문이 붙어 보인다. 첫 제목을 한 칸 더 내려
   **탭 줄과 본문 사이에 숨 쉴 자리**를 만든다(2026-09-17). */
/* **main.wrap 이다 — main 만 쓰면 안 먹는다.** 본문은 <main class="wrap"> 이라
   .wrap 의 padding: 0 24px (클래스, 0-1-0)가 요소 선택자 main (0-0-1)을 이겨서
   위 여백이 통째로 0 이 된다. 값만 올려 두고 안 먹는 것을 못 봤던 자리다(2026-09-17). */
main.wrap { padding-top: 52px; padding-bottom: 10px; }
@media (max-width: 720px) { main.wrap { padding-top: 40px; } }
h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; margin: 0 0 8px; }
h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.035em; margin: 44px 0 14px; }
h3 { font-size: 15px; font-weight: 700; margin: 16px 0 6px; }

/* 제목 + 아래 한 줄. 탭에서 누른 말과 같은 말이 여기 있어야 사람이 "여기가 거기" 라고 안다. */
/* 제목과 첫 상품 사이를 넉넉히 둔다(2026-09-18 사용자 결정) — 붙어 있으면 설명이 격자에 눌린다. */
.sec-head { margin: 0 0 34px; }
.sec-head h2 { margin-top: 44px; }
.sec-head .lede { margin: 0; }
/* 분류 페이지의 머리만 가운데. 설명글이 길면 폭을 묶어야 가운데 맞춤이 읽힌다 —
   한 줄이 화면 끝까지 늘어나면 가운데인지 아닌지가 눈에 들어오지 않는다. */
.sec-head.center { text-align: center; }
.sec-head.center .lede { max-width: 80ch; margin-left: auto; margin-right: auto; }
/* 너비를 74ch 로 묶어 두었더니 넓은 화면에서도 한 문장이 두 줄로 꺾였다(2026-09-17). 본문 폭을 따른다. */
.lede { color: var(--ink-2); margin: 0 0 20px; font-size: 15px; }
.lede a { color: var(--brand); font-weight: 600; }
.more { margin: 14px 0 0; }
.more a { color: var(--brand); font-weight: 700; font-size: 14.5px; }

/* ================= 상품 격자 ================= */

.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 34px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 넓은 화면에서 넷(2026-09-18 사용자 결정). 쇼핑몰 격자가 대개 넷이고, 한 화면에 더 담긴다. */
@media (min-width: 900px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 상세 아래 '같은 분류의 다른 딜' 은 한 줄에 넷. 본문 격자보다 한 칸 더 넣어
   여덟 개가 두 줄로 떨어진다(칸이 작아지지만 여기 카드는 곁다리라 괜찮다). */
@media (min-width: 900px) { .cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 380px) { .cards { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

.card { display: flex; flex-direction: column; min-width: 0; }

.card-media { position: relative; margin-bottom: 12px; }
.card-media > a { display: block; line-height: 0; }
.card-media > a:hover { text-decoration: none; }

/* 하트 — 사진 위 오른쪽. 스크립트가 켜기 전에는 HTML 에 hidden 으로 들어 있다. */
.like {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  width: 34px; height: 34px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.92); color: var(--ink-3);
  display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.like svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.like:hover { color: var(--drop); }
.like[aria-pressed="true"] { color: var(--drop); }
.like[aria-pressed="true"] svg { fill: currentColor; stroke: currentColor; }

/* 분류 꼬리표 — 롯데온 카드의 "몰 이름" 자리. 사진 왼쪽 위에 얹는다. */
/* 배경·글자색은 cat-* 클래스가 준다(썸네일과 같은 색). 흰 바탕을 깔면 상품 사진이 흰색일 때
   — 대부분이 그렇다 — 배지가 통째로 사라진다. */
.card-cat {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}

.card-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.card-mall { margin: 0 0 4px; }
.card-mall .mall { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
/* 이름은 **언제나 두 줄 자리**를 차지한다. 한 줄짜리 이름 때문에 옆 칸과 값의 높이가 어긋나면
   격자가 흔들려 보이고, 값을 훑는 눈이 줄마다 위아래로 움직여야 한다. */
.card-name {
  font-size: 16px; line-height: 1.45; letter-spacing: -0.025em; color: var(--card-name);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1.45em * 2);
  margin-bottom: 7px;
}
/* 상품명에 손을 올리면 브랜드 색(2026-09-18 사용자 결정) — 사이트의 모든 상품명이 같은 규칙이다. */
.card-name:hover, .sale-name:hover, .cell-product a:hover, .sp-name:hover { color: var(--brand); }

/* 값이 이 사이트에서 가장 크게 읽히는 글자다. */
.card-price { margin: 0; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.card-price b {
  font-size: 22px; font-weight: 800; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.card-price .unknown { font-size: 17px; color: var(--ink-3); font-weight: 700; }
.card-price s { color: var(--ink-3); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.card-price .off { color: var(--drop); font-size: 20px; font-weight: 800; letter-spacing: -0.04em; }

.tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 14px; }
.tag {
  font-size: 11.5px; font-weight: 600; line-height: 1.75;
  padding: 0 7px; border-radius: 5px;
  background: var(--surface); color: var(--ink-2);
}
.tag.low { background: var(--drop); color: #fff; }
.tag.buy { background: var(--brand-soft); color: var(--brand-dark); }
.tag.stale { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (prefers-color-scheme: dark) {
  .tag.low { color: #241014; }
  .tag.buy { color: var(--brand); }
}

/* 카드마다 바닥에 붙는 버튼. margin-top:auto 라 이름이 한 줄이든 두 줄이든 아래 선이 맞는다. */
.card-go {
  margin-top: auto; display: block; text-align: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-btn);
  padding: 10px 0; font-size: 14px; font-weight: 700; color: var(--ink-2);
}
.card-go:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); text-decoration: none; }

/* ================= 썸네일 ================= */
/* 타이포를 바닥에 깔고 사진을 위에 덮는다. 사진을 못 불러오면 onerror 가 지워서 타이포가 드러난다. */
.thumb {
  position: relative; overflow: hidden; flex: none;
  border-radius: var(--r-media);
  display: grid; place-items: center;
  font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  background: var(--cat-etc-bg); color: var(--cat-etc-fg);
}
.thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* 상품 사진은 흰 바탕 정사각형이 흔하다. 잘라 내면 상품이 잘리므로 담기만 한다. */
  object-fit: contain; background: #fff;
}
/* 회색 테두리(2026-09-17) — 목록·상세·같은 분류 딜의 썸네일 전부.
   **사진 위에 덧그린다.** 예전엔 .thumb 자체의 안쪽 그림자였는데, 안쪽 그림자는 자식 아래에
   칠해져서 사진이 덮으면 사라졌다(사진이 있는 칸에는 테두리가 없었다). border 를 쓰지 않는 것은
   aspect-ratio 칸에 1px 씩 더해져 옆 칸과 높이가 어긋나서다. */
.thumb::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line-strong);
}
.thumb-card { width: 100%; aspect-ratio: 1 / 1; font-size: 44px; }
.thumb-sm { width: 52px; height: 52px; font-size: 21px; border-radius: 8px; }
.thumb-lg { width: 100%; aspect-ratio: 1 / 1; font-size: 110px; border-radius: var(--r-card); }
.cat-food    { background: var(--cat-food-bg);    color: var(--cat-food-fg); }
.cat-living  { background: var(--cat-living-bg);  color: var(--cat-living-fg); }
.cat-digital { background: var(--cat-digital-bg); color: var(--cat-digital-fg); }
.cat-fashion { background: var(--cat-fashion-bg); color: var(--cat-fashion-fg); }
.cat-beauty  { background: var(--cat-beauty-bg);  color: var(--cat-beauty-fg); }
.cat-health  { background: var(--cat-health-bg);  color: var(--cat-health-fg); }
.cat-pet     { background: var(--cat-pet-bg);     color: var(--cat-pet-fg); }
.cat-etc     { background: var(--cat-etc-bg);     color: var(--cat-etc-fg); }

/* ================= 딜 상세 ================= */

.crumbs { font-size: 13px; color: var(--ink-3); margin: 0 0 14px; }
.crumbs a { color: var(--ink-3); }

.pd { display: grid; gap: 28px; align-items: start; }
@media (min-width: 960px) {
  .pd { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 56px; }
  /* 사진이 따라온다 — 오른쪽 구매 칸이 길어져도 무엇을 사는지가 눈에 남는다. */
  .pd-media { position: sticky; top: calc(var(--bar-h) + 16px); }
}

/* 구매 칸은 넓히지 않는다 — 한 줄이 길어지면 값과 버튼이 서로 멀어져 눈이 왕복한다. */
.pd-buy { max-width: 560px; }
.pd-mall { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.pd-name { font-size: 24px; line-height: 1.4; letter-spacing: -0.035em; margin: 0 0 16px; }
.pd-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.pd-price b {
  font-size: 38px; font-weight: 800; letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.pd-price .off { font-size: 34px; font-weight: 800; color: var(--drop); letter-spacing: -0.05em; }
.pd-price s { font-size: 17px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pd-price .unknown { font-size: 26px; color: var(--ink-3); }
.pd-lowest { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; color: var(--drop); }

.pd-quick {
  margin: 20px 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: grid; gap: 10px;
}
.pd-quick .fact, .pd-facts .fact { display: flex; gap: 16px; align-items: baseline; }
.pd-quick dt, .pd-facts dt { flex: none; width: 108px; color: var(--ink-3); font-size: 14px; margin: 0; }
.pd-quick dd, .pd-facts dd { margin: 0; font-size: 14px; }

.buy-head { font-size: 16px; margin: 24px 0 10px; }
.links { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.links li {
  border: 1px solid var(--line-strong); border-radius: var(--r-card);
  background: var(--card); padding: 14px 16px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.links .grade { font-size: 14px; color: var(--ink-2); flex: 1; min-width: 0; }
.links .grade b { color: var(--ink); font-weight: 700; }
.links .cand { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.links .cheaper { color: #0f7a4f; font-weight: 700; white-space: nowrap; }
.links .pricier, .links .same-price { color: var(--ink-3); white-space: nowrap; }
.links .go {
  flex: none; background: var(--brand); color: #fff;
  font-weight: 700; font-size: 15px; padding: 11px 22px; border-radius: var(--r-btn);
}
.links .go:hover { background: var(--brand-dark); text-decoration: none; }
@media (prefers-color-scheme: dark) {
  .links .cheaper { color: #4cc79a; }
  .links .go { color: #241a09; }
}

/* 큰 하트 — 구매 링크 아래. 사러 나가지 않는 사람에게 남는 유일한 행동이다. */
.like-lg {
  margin-top: 14px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--r-btn);
  background: var(--card); color: var(--ink-2); font: inherit; font-weight: 700; cursor: pointer;
}
.like-lg svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.like-lg:hover { border-color: var(--drop); color: var(--drop); }
.like-lg[aria-pressed="true"] { color: var(--drop); border-color: var(--drop); background: transparent; }
.like-lg[aria-pressed="true"] svg { fill: currentColor; }

/* 상세 안의 탭 — 머리 바로 아래에 붙어 따라온다. 예전 top: 48px 은 붙지도 않는 대메뉴 높이를
   짐작한 값이라 화면 위와 탭 사이가 떠 있었다. 이제 머리 실제 높이를 쓴다. */
.pd-tabs {
  position: sticky; top: var(--bar-h); z-index: 20;
  display: flex; gap: 2px; margin: 44px 0 0;
  background: var(--page); border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.pd-tabs::-webkit-scrollbar { display: none; }
.pd-tabs a {
  flex: none; padding: 14px 22px; font-size: 15px; font-weight: 700; color: var(--ink-3);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.pd-tabs a:hover { color: var(--ink); text-decoration: none; }
.pd-sec { scroll-margin-top: calc(var(--bar-h) + 56px); padding-top: 8px; }
.pd-sec h2 { margin-top: 32px; }
.pd-facts { margin: 0 0 18px; display: grid; gap: 12px; }
/* 상품 정보는 제목과 목록을 같은 만큼 들인다 — 탭의 글자와 왼쪽 선이 맞는다(탭 칸의 안쪽 여백 22px). */
#info h2, #info .pd-facts, #info .more { padding-left: 22px; }
@media (max-width: 720px) { #info h2, #info .pd-facts, #info .more { padding-left: 14px; } }

.notice {
  background: var(--surface); border-radius: var(--r-btn);
  padding: 12px 14px; font-size: 13px; color: var(--ink-2);
  margin: 14px 0;
}
.notice.warn { background: var(--brand-soft); color: var(--brand-dark); }
@media (prefers-color-scheme: dark) { .notice.warn { color: var(--brand); } }

/* 쿠팡 고지 — 가격 안내 바로 아래의 별도 영역. 꼬리에 묻지 않는다. */
.disclosure {
  margin: -6px 0 14px; padding: 10px 14px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-btn);
  font-size: 12px; color: var(--ink-3); line-height: 1.55;
}

/* ---- 후기 요약 (AI 가 쓴 유일한 본문) ---- */
.bullets { margin: 6px 0 16px; padding-left: 18px; color: var(--ink-2); font-size: 14px; }
.bullets li { margin-bottom: 5px; }
.fine { font-size: 12px; color: var(--ink-3); margin: 0 0 22px; }

/* ================= 쿠팡 베스트의 분류 탭 ================= */
/* 대메뉴·상세 탭과 같은 결이다 — 누르는 것은 알약, 켜진 것은 브랜드색. */
.best-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px;
}
.best-tabs button {
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card);
  padding: 9px 16px; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink-2); cursor: pointer;
}
.best-tabs button b { color: var(--ink-3); font-weight: 600; margin-left: 2px; }
.best-tabs button:hover { border-color: var(--brand); color: var(--brand); }
.best-tabs button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.best-tabs button.on b { color: rgba(255, 255, 255, 0.85); }
@media (prefers-color-scheme: dark) { .best-tabs button.on { color: #241a09; } }
/* 탭이 켜지면 구역 제목은 군더더기다 — 탭에 이미 같은 말이 있다. */
[data-best-sec] > .sec-head h2 { margin-top: 24px; }

/* ================= 초특가 딜모음 (사진 없는 딜) ================= */
/* 격자가 아니라 글 목록이다. 값이 가장 크고, 이름·판매처가 그 위아래에 붙는다. */
.sale-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) { .sale-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
.sale-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 16px;
  padding: 14px 4px; border-bottom: 1px solid var(--line);
}
.sale-list li:hover { background: var(--brand-soft); }
.sale-name {
  grid-column: 1; font-size: 18px; line-height: 1.45; letter-spacing: -0.025em; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sale-price {
  grid-column: 2; grid-row: 1 / span 2; margin: 0; white-space: nowrap;
  display: flex; align-items: baseline; gap: 6px;
}
/* 값은 브랜드 색으로 세운다 — 이 목록에는 사진이 없어서 값이 유일한 눈에 띄는 것이다. */
.sale-price b { font-size: 19px; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--brand); }
.sale-price .unknown { font-size: 15px; color: var(--ink-3); font-weight: 700; }
.sale-price .off { color: var(--drop); font-weight: 800; font-size: 15px; }
.sale-facts { grid-column: 1; margin: 0; font-size: 12.5px; color: var(--ink-3); }
.sale-facts .tag.low { margin-right: 6px; }

/* 제목 옆 건수 배지 — 설명 문장에서 숫자를 빼고 여기로 옮겼다. */
.sec-head .count-badge {
  display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: 14px; font-weight: 700; vertical-align: middle;
}
@media (prefers-color-scheme: dark) { .sec-head .count-badge { color: var(--brand); } }

/* 검색 결과의 구역 나누기 — 사진 있는 결과 / 초특가(사진 없음) / 인기 딜. */
.sec-divider { margin: 40px 0 0; border: 0; border-top: 1px solid var(--line); }

/* ================= 인기·검색 ================= */

.liked-sec { margin-bottom: 8px; }
.liked-sec h2 { margin-top: 0; }
.liked-sec .count {
  display: inline-block; min-width: 22px; padding: 0 7px; margin-left: 4px;
  background: var(--drop); color: #fff; border-radius: 999px;
  font-size: 13px; font-weight: 700; vertical-align: middle;
}
.search-term { color: var(--brand); }


/* ================= 리포트 ================= */

.byline { font-size: 13px; color: var(--ink-3); margin: 0 0 18px; }
.report-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; }
.report-list li {
  border: 1px solid var(--line); border-radius: var(--r-btn);
  padding: 13px 16px; font-weight: 600;
}
.report-list li:hover { border-color: var(--line-strong); }

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
th { color: var(--ink-3); font-weight: 600; white-space: nowrap; background: var(--surface); }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.drop { color: var(--drop); font-weight: 700; }
.cell-product { display: flex; align-items: center; gap: 10px; }
.cell-product .thumb-sm { width: 44px; height: 44px; font-size: 18px; }

/* ================= 구독 ================= */

.cta {
  margin: 56px 0 10px; padding: 26px 28px;
  border: 1px solid var(--line-strong); border-radius: var(--r-card);
  background: var(--brand-soft);
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.cta-text { flex: 1; min-width: 260px; }
.cta strong { display: block; font-size: 19px; letter-spacing: -0.035em; margin-bottom: 6px; }
.cta p { margin: 0; color: var(--ink-2); font-size: 14.5px; max-width: 60ch; }
.cta-go {
  flex: none; background: var(--brand); color: #fff;
  font-weight: 700; font-size: 15px; padding: 13px 26px; border-radius: var(--r-btn);
}
.cta-go:hover { background: var(--brand-dark); text-decoration: none; }
@media (prefers-color-scheme: dark) { .cta-go { color: #241a09; } }

/* ================= 꼬리 ================= */

.site-foot {
  margin-top: 64px; border-top: 1px solid var(--line);
  background: var(--surface); padding: 32px 0 48px;
  font-size: 13px; color: var(--ink-3);
}
.foot-info { margin-bottom: 18px; }
.foot-info summary {
  cursor: pointer; font-size: 14px; font-weight: 700; color: var(--ink-2);
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.foot-info summary::-webkit-details-marker { display: none; }
/* 글자(⌄)로 그리면 글꼴마다 기준선이 달라 한 픽셀씩 내려앉는다. 선 두 개로 직접 그린다. */
.foot-info summary::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.foot-info[open] summary::after { margin-top: 2px; transform: rotate(-135deg); }
.foot-info-body { padding: 12px 0 0; max-width: 88ch; }
.foot-info-body p { margin: 0 0 8px; line-height: 1.7; }

.foot-links {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.foot-links a { color: var(--ink-2); font-weight: 600; font-size: 13.5px; }

.foot-note { margin: 14px 0 0; max-width: 92ch; line-height: 1.7; }

.foot-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
}
.foot-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 800; letter-spacing: -0.05em; color: var(--ink-2);
}
.foot-brand .brand-mark { width: 26px; height: 26px; }
.foot-copy { color: var(--ink-3); font-size: 12px; }

/* 맨 위로 — 두 참고 화면 모두 오른쪽 아래에 있다. */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-2);
  display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.to-top:hover { color: var(--brand); border-color: var(--brand); }

.empty {
  color: var(--ink-3);
  border: 1px dashed var(--line-strong); border-radius: var(--r-card);
  padding: 30px 20px; text-align: center; line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}