/* petdeal.kr 2026-10 — 공통 3단 레이아웃(왼쪽 메뉴 · 본문 · 오른쪽 보조 정보) 단일 스타일시트.
   202610b(2026-10-04): 상품 카드·격자와 상품 상세 다듬기. 캐시된 옛 HTML이 쓰는 petdeal-202610.css는 그대로 둔다.
   202610c(2026-10-12): 상세 가격 달력 히트맵과 상품 의견(맨 아래 블록). 캐시된 옛 HTML이 쓰는 petdeal-202610b.css도 그대로 둔다. */

:root {
  --pd-bg: #f8f4ee;
  --pd-surface: #ffffff;
  --pd-surface-2: #f3ede4;
  --pd-ink: #17191e;
  --pd-ink-2: #474c56;
  --pd-ink-3: #62686f;
  --pd-line: #e9e0d3;
  --pd-line-strong: #d9ccba;
  --pd-brand: #e2560b;
  --pd-brand-strong: #b8440a;
  --pd-brand-soft: #fff1e7;
  --pd-cta: #c2410c;
  --pd-good: #0d7a45;
  --pd-good-soft: #e6f5ec;
  --pd-teal: #0b6f7a;
  --pd-teal-soft: #e3f3f4;
  --pd-blue: #1f5fbf;
  --pd-blue-soft: #e8f0fc;
  --pd-warn: #9a5b00;
  --pd-warn-soft: #fdf3dc;
  --pd-bad: #b42318;
  --pd-bad-soft: #fdecea;
  --pd-muted-soft: #f1ebe2;
  --pd-radius: 10px;
  --pd-radius-sm: 8px;
  --pd-shadow: 0 1px 2px rgba(23, 25, 30, 0.04), 0 4px 16px rgba(23, 25, 30, 0.05);
  --pd-shadow-hover: 0 2px 4px rgba(23, 25, 30, 0.06), 0 10px 28px rgba(23, 25, 30, 0.09);
  --pd-font: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Segoe UI", sans-serif;
  --pd-wrap: 1480px;
  --pd-gutter: 16px;
  color-scheme: light;
}

@media (min-width: 768px) {
  :root { --pd-gutter: 24px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pd-bg);
  color: var(--pd-ink);
  font-family: var(--pd-font);
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
body.pd-overlay-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--pd-blue); outline-offset: 2px; border-radius: 6px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.pd-skip {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  padding: 10px 16px; border-radius: 999px;
  background: var(--pd-ink); color: #fff; font-weight: 700;
}
.pd-skip:focus { top: 12px; }

.pd-wrap { width: 100%; max-width: calc(var(--pd-wrap) + var(--pd-gutter) * 2); margin: 0 auto; padding: 0 var(--pd-gutter); }
.pd-wrap--narrow { max-width: calc(820px + var(--pd-gutter) * 2); }
.pd-main { display: block; padding-bottom: 56px; min-height: 60vh; }
.pd-center { text-align: center; margin-top: 28px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---------- 검색 모달 ---------- */
.pd-search-modal { position: fixed; inset: 0; z-index: 210; }
.pd-search-modal[hidden] { display: none; }
.pd-search-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 17, 21, 0.45); }
.pd-search-modal__dialog {
  position: relative; width: min(640px, calc(100% - 24px)); margin: 72px auto 0;
  max-height: calc(100vh - 110px); display: flex; flex-direction: column;
  background: var(--pd-surface); border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
@media (max-width: 640px) {
  .pd-search-modal__dialog { width: 100%; margin: 0; height: 100%; max-height: none; border-radius: 0; }
}
.pd-search-modal__bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--pd-line); }
.pd-search-modal__bar svg { width: 20px; height: 20px; color: var(--pd-ink-3); flex-shrink: 0; }
.pd-search-modal__input { flex: 1; min-width: 0; border: 0; outline: none; font-size: 17px; padding: 8px 0; background: transparent; }
.pd-search-modal__close { border: 0; background: var(--pd-muted-soft); border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 700; }
.pd-search-modal__body { overflow-y: auto; padding: 14px; display: grid; gap: 18px; }
.pd-search-modal__label { font-size: 13px; font-weight: 800; color: var(--pd-ink-3); margin-bottom: 8px; }
.pd-search-modal__chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-search-modal__chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--pd-line); background: var(--pd-surface); font-size: 14px; }
.pd-search-modal__chip:hover { border-color: var(--pd-brand); color: var(--pd-brand-strong); }
.pd-search-modal__rows { display: grid; gap: 4px; }
.pd-search-modal__row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px; border: 0; border-radius: var(--pd-radius-sm); background: transparent;
}
.pd-search-modal__row:hover { background: var(--pd-muted-soft); }
.pd-search-modal__row-icon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--pd-brand-soft); color: var(--pd-brand-strong); font-size: 12px; font-weight: 800; }
.pd-search-modal__thumb { position: relative; display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 10px; background: #fff; border: 1px solid var(--pd-line); overflow: hidden; font-size: 11px; color: var(--pd-ink-3); }
.pd-search-modal__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pd-search-modal__thumb--out-of-stock img { opacity: 0.4; }
.pd-search-modal__thumb-badge { position: absolute; inset: auto 0 0; background: rgba(23, 25, 30, 0.75); color: #fff; font-size: 10px; text-align: center; }
.pd-search-modal__row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.pd-search-modal__row-note { font-size: 12px; color: var(--pd-ink-3); }
.pd-search-modal__row-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pd-search-modal__row-meta { font-size: 12px; color: var(--pd-ink-3); }
.pd-search-modal__row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; font-size: 14px; }
.pd-search-modal__badge { font-size: 11px; color: var(--pd-good); font-weight: 700; }
.pd-search-modal__badge--out-of-stock { color: var(--pd-ink-3); }
.pd-search-modal__more { width: 100%; margin-top: 6px; padding: 11px; border: 1px solid var(--pd-line); border-radius: var(--pd-radius-sm); background: var(--pd-surface-2); font-weight: 700; }
.pd-search-modal__empty { padding: 18px 8px; text-align: center; color: var(--pd-ink-3); }
.pd-search-modal__empty-title { font-weight: 700; color: var(--pd-ink); margin-bottom: 4px; }

/* ---------- 공통 조각 ---------- */
.pd-pill {
  display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px;
  background: var(--pd-surface); border: 1px solid var(--pd-line); font-size: 14px; font-weight: 700; color: var(--pd-ink-2);
}
.pd-pill:hover { border-color: var(--pd-brand); color: var(--pd-brand-strong); }

.pd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent;
  font-size: 15px; font-weight: 800; line-height: 1.2; text-align: center;
}
.pd-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.pd-btn--primary { background: var(--pd-cta); color: #fff; box-shadow: 0 8px 20px rgba(194, 65, 12, 0.28); transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; }
.pd-btn--primary:active { transform: scale(0.98); }
.pd-btn--primary svg { transition: transform 0.2s ease; }
.pd-btn--primary:hover svg { transform: translate(2px, -2px); }
.pd-btn--primary:hover { background: #9a3412; }
.pd-btn--ghost { background: var(--pd-surface); border-color: var(--pd-line-strong); color: var(--pd-ink); }
.pd-btn--ghost:hover { border-color: var(--pd-ink-3); }
.pd-btn--lg { min-height: 52px; font-size: 16px; }

.pd-badge {
  display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 800; line-height: 1.4; white-space: nowrap;
  background: var(--pd-muted-soft); color: var(--pd-ink-2);
}
.pd-badge--near-low { background: var(--pd-good-soft); color: var(--pd-good); }
.pd-badge--below-avg { background: var(--pd-teal-soft); color: var(--pd-teal); }
.pd-badge--dropping { background: var(--pd-blue-soft); color: var(--pd-blue); }
.pd-badge--checking { background: var(--pd-warn-soft); color: var(--pd-warn); }
.pd-badge--out-of-stock { background: #2c2f36; color: #fff; }

.pd-delta { display: inline-flex; align-items: center; font-size: 13px; font-weight: 800; white-space: nowrap; }
.pd-delta--down { color: var(--pd-good); }
.pd-delta--up { color: var(--pd-bad); }

.pd-empty { margin: 20px 0; padding: 36px 20px; border: 1px dashed var(--pd-line-strong); border-radius: var(--pd-radius); background: var(--pd-surface); text-align: center; }
.pd-empty__title { font-weight: 800; font-size: 17px; }
.pd-empty__text { margin-top: 6px; color: var(--pd-ink-3); font-size: 14px; }

/* ---------- 섹션 제목 ---------- */
.pd-section { margin-top: 44px; }
.pd-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pd-sec-head__title { font-size: 21px; line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; }
.pd-sec-head__basis { margin-top: 3px; font-size: 13px; color: var(--pd-ink-3); }
.pd-sec-head__link { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 14px; font-weight: 700; color: var(--pd-ink-2); white-space: nowrap; }
.pd-sec-head__link svg { width: 16px; height: 16px; }
.pd-sec-head__link:hover { color: var(--pd-brand-strong); }
@media (min-width: 768px) {
  .pd-section { margin-top: 56px; }
  .pd-sec-head__title { font-size: 24px; }
}

/* ---------- 칩 ---------- */
.pd-chips { margin: 20px 0 4px; }
.pd-chips__list {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding: 2px 0 6px; margin: 0 calc(var(--pd-gutter) * -1); padding-left: var(--pd-gutter); padding-right: var(--pd-gutter);
  scroll-padding-left: var(--pd-gutter);
}
.pd-chips__list::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  .pd-chips__list { flex-wrap: wrap; overflow: visible; margin: 0; padding-left: 0; padding-right: 0; }
}
.pd-chip {
  display: inline-flex; align-items: center; flex-shrink: 0; min-height: 38px; padding: 0 15px;
  border-radius: 999px; border: 1px solid var(--pd-line); background: var(--pd-surface);
  font-size: 14px; font-weight: 700; color: var(--pd-ink-2); white-space: nowrap;
}
.pd-chip:hover { border-color: var(--pd-ink-3); color: var(--pd-ink); }
.pd-chip.is-active { background: var(--pd-ink); border-color: var(--pd-ink); color: #fff; }

/* ---------- 홈 히어로 ---------- */
.pd-hero { margin-top: 18px; border: 1px solid var(--pd-line); border-radius: 18px; background: linear-gradient(135deg, #fff 0%, #fff7f0 100%); }
.pd-hero__inner { display: grid; gap: 18px; }
.pd-shell .pd-wrap.pd-hero__inner { padding: 20px 18px; }
.pd-hero__eyebrow { font-size: 13px; font-weight: 800; color: var(--pd-brand-strong); }
.pd-hero__title { margin-top: 8px; font-size: 27px; line-height: 1.3; font-weight: 800; letter-spacing: -0.03em; }
.pd-hero__desc { margin-top: 10px; color: var(--pd-ink-2); font-size: 15px; }
.pd-hero__search, .pd-searchbar {
  display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 6px 6px 6px 14px;
  background: var(--pd-surface); border: 1.5px solid var(--pd-line-strong); border-radius: 14px;
}
.pd-hero__search:focus-within, .pd-searchbar:focus-within { border-color: var(--pd-brand); box-shadow: 0 0 0 4px var(--pd-brand-soft); }
.pd-hero__search svg, .pd-searchbar svg { width: 20px; height: 20px; color: var(--pd-ink-3); flex-shrink: 0; }
.pd-hero__search input, .pd-searchbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; padding: 8px 0; }
.pd-hero__search button, .pd-searchbar button { flex-shrink: 0; min-height: 42px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--pd-ink); color: #fff; font-weight: 800; }
.pd-hero__pets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.pd-hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.pd-stat { padding: 14px 16px; border-radius: var(--pd-radius); background: var(--pd-surface); border: 1px solid var(--pd-line); }
.pd-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pd-stat dt { font-size: 13px; font-weight: 700; color: var(--pd-ink-3); }
.pd-stat dd { margin-top: 4px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.pd-stat dd small { font-size: 15px; font-weight: 700; margin-left: 2px; }
.pd-stat dd a:hover { color: var(--pd-brand-strong); }
.pd-stat--deal dd { color: var(--pd-good); }
.pd-stat dd.pd-stat__note { margin-top: 4px; font-size: 12px; font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--pd-ink-3); }
.pd-stat__note a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 899px) {
  .pd-hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pd-stat { padding: 10px 12px; }
  .pd-stat:last-child:nth-child(odd) { grid-column: auto; }
  .pd-stat dt { font-size: 11px; line-height: 1.35; }
  .pd-stat dd { font-size: 19px; }
  .pd-stat dd small { font-size: 12px; }
  .pd-stat dd.pd-stat__note { display: none; }
}
@container pd-main (min-width: 720px) {
  .pd-hero__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: center; }
  .pd-shell .pd-wrap.pd-hero__inner { padding: 28px 28px; }
  .pd-hero__title { font-size: 30px; }
  .pd-hero__desc { font-size: 16px; }
  .pd-hero__search { max-width: 520px; }
}
@media (min-width: 1360px) {
  /* 넓은 화면에서는 오른쪽 보조 정보에 같은 수치가 보인다 */
  .pd-home .pd-hero__stats { display: none; }
  .pd-home .pd-hero__inner { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 상품 그리드 · 카드 (쿠팡·스마트스토어형 밀도) ---------- */
.pd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@container pd-main (min-width: 560px) { .pd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
/* 4칸은 본문 폭 720px부터: 1440px 화면(본문 776px)과 태블릿에서 카드 한 장이 250px까지 커지던 구간을 170~190px로 맞춘다 */
@container pd-main (min-width: 720px) { .pd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
@container pd-main (min-width: 860px) { .pd-grid { gap: 14px; } }
@container pd-main (min-width: 720px) and (max-width: 859px) { .pd-grid:not(.pd-grid--row) .pd-card__cta { gap: 4px; font-size: 12.5px; } }

/* 한 줄 가로 목록(홈 섹션·관련 상품): 좁은 화면은 옆으로 넘기고, 넓은 화면은 한 줄에 5칸 */
.pd-grid.pd-grid--row {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 8px) / 2.1);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin;
  margin: 0 calc(var(--pd-gutter) * -1); padding: 4px var(--pd-gutter) 8px; scroll-padding-left: var(--pd-gutter);
}
.pd-grid--row > * { scroll-snap-align: start; }
.pd-card__cta-tag { flex-shrink: 0; white-space: nowrap; }
.pd-card__cta { white-space: nowrap; }
@container pd-main (max-width: 559px) { .pd-grid--row .pd-card__cta { gap: 4px; font-size: 12px; } }
@container pd-main (min-width: 560px) { .pd-grid.pd-grid--row { grid-template-columns: none; grid-auto-columns: calc((100% - 3 * 12px) / 3.4); } }
@container pd-main (min-width: 860px) {
  /* 간격을 칸 폭 계산과 같은 14px로 고정한다(본문 1180px 이상에서 6칸 격자의 16px 간격이 덮어써 줄이 8px 넘쳤다) */
  .pd-grid.pd-grid--row { grid-template-columns: none; grid-auto-columns: calc((100% - 4 * 14px) / 5); gap: 14px; overflow: visible; margin: 0; padding: 4px 0 0; }
  /* 넓은 화면은 한 줄 5칸이다. 6번째부터는 줄 밖으로 밀려 가로 넘침이 생기므로 숨긴다(좁은 화면은 옆으로 넘겨 본다) */
  .pd-grid.pd-grid--row > :nth-child(n+6) { display: none; }
}
/* 5칸 한 줄이 시작되는 구간(1536px 화면 등)은 카드가 160px대라 버튼 글자가 테두리에 닿는다. 글자를 한 단계 줄인다 */
@container pd-main (min-width: 860px) and (max-width: 979px) { .pd-grid--row .pd-card__cta { gap: 3px; font-size: 12px; } }

.pd-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: 14px;
  overflow: hidden; transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
@media (hover: hover) {
  .pd-card:hover { box-shadow: var(--pd-shadow-hover); border-color: var(--pd-line-strong); transform: translateY(-3px); }
  .pd-card:hover .pd-card__media img { transform: scale(1.05); }
  .pd-card__link:hover .pd-card__title { text-decoration: underline; text-underline-offset: 3px; }
}
.pd-card.is-at-low { border-color: #9fd8b8; box-shadow: 0 0 0 1px #9fd8b8 inset; }
.pd-card__link { display: flex; flex-direction: column; flex: 1; }
.pd-card__media { position: relative; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
.pd-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 6px; transition: transform 0.35s ease; }
.pd-card__media > .pd-badge { position: absolute; left: 6px; top: 6px; font-size: 11px; padding: 2px 7px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.pd-card--out-of-stock .pd-card__media img, .pd-card--checking .pd-card__media img { opacity: 0.5; filter: grayscale(0.85); }
.pd-card__ribbon {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 0; text-align: center;
  background: linear-gradient(90deg, var(--pd-good), #0e8049); color: #fff; /* 2026-10-27 끝색 #12a05b 80% + 검정, 흰 글자 5.00:1 */ font-size: 11.5px; font-weight: 800;
}
.pd-card__body { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 8px; flex: 1; border-top: 1px solid var(--pd-line); }
.pd-card__title {
  font-size: 13.5px; font-weight: 700; line-height: 1.4; color: var(--pd-ink); letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em;
}
.pd-card__brand { font-weight: 800; color: var(--pd-ink-2); }
.pd-card__price { display: flex; align-items: baseline; gap: 5px; margin-top: 3px; line-height: 1.2; }
.pd-card__rate { font-style: normal; font-size: 17px; font-weight: 900; color: var(--pd-bad); letter-spacing: -0.02em; }
.pd-card__price strong { font-size: 17px; font-weight: 900; letter-spacing: -0.03em; }
.pd-card__save { font-size: 12px; color: var(--pd-good); font-weight: 600; }
.pd-card__save strong { font-weight: 900; }
.pd-card__trend { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.pd-card__trend .pd-spark { flex: 1; min-width: 0; max-height: 26px; }
.pd-card__trend-low { flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--pd-good); }
/* 가격 변동이 없는 상품: 미니 차트 자리에 점선과 기록 일수를 놓아 카드마다 줄 구성을 같게 한다 */
.pd-card__trend--flat { min-height: 26px; font-size: 12px; font-weight: 700; color: var(--pd-ink-3); white-space: nowrap; }
.pd-card__trend--flat::before { content: ""; flex: 1; min-width: 0; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--pd-line-strong) 0 6px, transparent 6px 10px); }
/* 가격 확인 중·품절 카드의 금액은 지금 가격이 아니므로 한 단계 낮춘다 */
.pd-card--checking .pd-card__price strong, .pd-card--out-of-stock .pd-card__price strong { color: var(--pd-ink-3); }
.pd-spark { width: 100%; height: auto; display: block; overflow: visible; }
.pd-spark__area { fill: var(--pd-brand); opacity: 0.08; }
.pd-spark__line { fill: none; stroke: var(--pd-brand); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.pd-spark__low { fill: var(--pd-good); stroke: #fff; stroke-width: 1.2; }
.pd-spark__now { fill: var(--pd-brand); stroke: #fff; stroke-width: 1.4; }
.pd-spark.is-at-low .pd-spark__now, .pd-spark.is-at-low .pd-spark__line { fill: var(--pd-good); stroke: var(--pd-good); }
.pd-spark.is-at-low .pd-spark__line { fill: none; }
.pd-spark.is-at-low .pd-spark__area { fill: var(--pd-good); }
.pd-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; margin-top: auto; padding-top: 5px; font-size: 11px; color: var(--pd-ink-3); }
.pd-ship { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 4px; background: var(--pd-muted-soft); color: var(--pd-ink-2); font-weight: 800; font-size: 12px; }
.pd-ship--rocket { background: #e8f0fc; color: #0f4fae; }
.pd-card__fresh.is-stale { color: var(--pd-warn); font-weight: 700; }
.pd-card__cta {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; overflow: hidden;
  margin: 0 8px 8px; min-height: 36px; border-radius: 9px;
  /* 가격 메리트가 확인된 카드(.is-deal)만 채운 버튼으로 두고 나머지는 테두리 버튼으로 낮춘다.
     여섯 칸 목록에서 검은 버튼이 가격보다 먼저 보이던 문제를 줄이고 특가 카드가 먼저 눈에 들어오게 한다. */
  background: var(--pd-surface); color: var(--pd-ink); border: 1px solid var(--pd-line-strong); font-size: 13px; font-weight: 800;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
@media (hover: hover) {
  .pd-card__cta:not(.is-deal):hover { background: var(--pd-ink); border-color: var(--pd-ink); color: #fff; }
  .pd-card__cta:not(.is-deal):hover .pd-card__cta-tag { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
}
.pd-card__cta.is-deal { background: var(--pd-cta); border-color: var(--pd-cta); color: #fff; box-shadow: 0 4px 12px rgba(194, 65, 12, 0.25); }
.pd-card__cta svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.pd-card__cta:hover svg { transform: translateX(3px); }
.pd-card__cta:active { transform: scale(0.98); }
.pd-card__cta.is-deal::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-18deg); animation: pd-shine 3.8s ease-in-out infinite;
}
.pd-card__cta-tag { font-size: 12px; font-weight: 800; padding: 0 4px; border-radius: 3px; border: 1px solid var(--pd-line-strong); color: var(--pd-ink-3); }
.pd-card__cta.is-deal .pd-card__cta-tag { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
@keyframes pd-shine { 0%, 62% { left: -60%; } 100% { left: 130%; } }
@media (min-width: 1024px) {
  .pd-card__title { font-size: 14px; }
  .pd-card__price strong, .pd-card__rate { font-size: 18px; }
}
@media (max-width: 380px) {
  .pd-card__cta-tag { display: none; }
  /* 테두리 1px만큼 줄어든 버튼 안쪽 폭에 맞춘다(320px 화면에서 글자가 테두리에 닿지 않게) */
  .pd-card__cta { gap: 4px; font-size: 12.5px; }
  .pd-card__price strong, .pd-card__rate { font-size: 15.5px; }
}

/* 저점 배지 맥박 */
.pd-pulse { position: relative; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 999px; background: currentColor; }
.pd-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: currentColor; animation: pd-pulse 1.8s ease-out infinite; }
@keyframes pd-pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.8); opacity: 0; } }

/* 스크롤 등장 (JS가 body.pd-motion을 붙였을 때만) */
.pd-motion [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease var(--pd-delay, 0ms), transform 0.5s ease var(--pd-delay, 0ms), box-shadow 0.22s ease, border-color 0.22s ease; }
.pd-motion [data-reveal].is-in { opacity: 1; transform: none; }
.pd-motion [data-reveal] .pd-spark__line { stroke-dashoffset: 100; transition: stroke-dashoffset 1.1s ease calc(var(--pd-delay, 0ms) + 200ms); }
.pd-motion [data-reveal].is-in .pd-spark__line { stroke-dashoffset: 0; }
@media (hover: hover) { .pd-motion [data-reveal].is-in:hover { transform: translateY(-3px); } }

/* ---------- 최근 본 상품 ---------- */
.pd-rv { margin-top: 28px; }
.pd-rv[hidden] { display: none; }
.pd-rv__track { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 6px; }
.pd-rv__item { display: flex; align-items: center; gap: 10px; flex: 0 0 240px; padding: 8px; background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: var(--pd-radius-sm); }
.pd-rv__item img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: #fff; flex-shrink: 0; }
.pd-rv__text { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.35; }
.pd-rv__title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---------- 카테고리 타일 ---------- */
.pd-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container pd-main (min-width: 560px) { .pd-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container pd-main (min-width: 860px) { .pd-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.pd-tiles--large { margin-top: 20px; }
.pd-tile { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: var(--pd-radius); min-width: 0; }
.pd-tile:hover { border-color: var(--pd-brand); box-shadow: var(--pd-shadow); }
.pd-tile__icon { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--pd-brand-soft); color: var(--pd-brand-strong); font-size: 14px; font-weight: 800; }
.pd-tile__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.pd-tile__name { font-size: 15px; }
.pd-tile__meta { font-size: 12px; color: var(--pd-ink-3); }

/* ---------- 가이드 카드 ---------- */
.pd-guides { display: grid; gap: 12px; }
@container pd-main (min-width: 560px) { .pd-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container pd-main (min-width: 860px) { .pd-guides { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.pd-guide { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: var(--pd-radius); }
.pd-guide:hover { border-color: var(--pd-ink-3); }
.pd-guide__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--pd-ink-3); }
.pd-guide__topic { display: inline-flex; padding: 2px 8px; border-radius: 6px; background: var(--pd-muted-soft); color: var(--pd-ink-2); font-size: 12px; font-weight: 800; }
.pd-guide__title { font-size: 16px; line-height: 1.45; }
.pd-guide__summary { font-size: 14px; color: var(--pd-ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 판단 기준 안내 ---------- */
.pd-howto { padding: 22px; border-radius: var(--pd-radius); background: var(--pd-surface); border: 1px solid var(--pd-line); }
.pd-howto__title { font-size: 19px; font-weight: 800; }
.pd-howto__steps { display: grid; gap: 12px; margin-top: 14px; counter-reset: pd-step; }
@container pd-main (min-width: 700px) { .pd-howto__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.pd-howto__steps li { position: relative; padding-left: 38px; display: flex; flex-direction: column; font-size: 14px; color: var(--pd-ink-2); }
.pd-howto__steps li::before {
  counter-increment: pd-step; content: counter(pd-step);
  position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 999px; background: var(--pd-ink); color: #fff; font-size: 13px; font-weight: 800;
}
.pd-howto__steps strong { color: var(--pd-ink); font-size: 15px; }
.pd-howto__note { display: flex; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pd-line); font-size: 13px; color: var(--pd-ink-3); }
.pd-howto__note svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; }
.pd-howto__note a { text-decoration: underline; text-underline-offset: 2px; color: var(--pd-ink-2); }

/* ---------- 목록 페이지 ---------- */
.pd-intro { padding: 28px 0 4px; }
.pd-intro__eyebrow { font-size: 13px; font-weight: 800; color: var(--pd-brand-strong); }
.pd-intro__title { margin-top: 4px; font-size: 26px; line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; }
.pd-intro__desc { margin-top: 8px; font-size: 15px; color: var(--pd-ink-2); max-width: 720px; }
.pd-intro__count { margin-top: 8px; font-size: 14px; color: var(--pd-ink-3); }
.pd-intro__count strong { color: var(--pd-ink); }
@media (min-width: 768px) { .pd-intro { padding-top: 40px; } .pd-intro__title { font-size: 32px; } }

.pd-filters { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; }
.pd-filters .pd-chips { margin: 12px 0 0; }
.pd-sort { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--pd-ink-2); }
.pd-sort select, .pd-variant select {
  min-height: 40px; padding: 0 36px 0 12px; border: 1px solid var(--pd-line-strong); border-radius: 10px;
  background: var(--pd-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767c87' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 18px;
  appearance: none; -webkit-appearance: none; font-size: 14px; max-width: 100%;
}
.pd-main > .pd-wrap > .pd-grid { margin-top: 18px; }

.pd-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 32px; }
.pd-pager__btn { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--pd-line-strong); background: var(--pd-surface); font-weight: 700; font-size: 14px; }
.pd-pager__btn:hover { border-color: var(--pd-ink-3); }
.pd-pager__btn.is-disabled { opacity: 0.4; }
.pd-pager__status { font-size: 14px; color: var(--pd-ink-3); }
.pd-pager__status strong { color: var(--pd-ink); }

.pd-searchbar { max-width: 640px; }

/* ---------- 상세 ---------- */
.pd-crumbs { padding-top: 18px; font-size: 13px; color: var(--pd-ink-3); }
.pd-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px; }
.pd-crumbs li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.pd-crumbs li + li::before { content: "›"; color: var(--pd-line-strong); }
.pd-crumbs li:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.pd-crumbs a:hover { color: var(--pd-ink); text-decoration: underline; }

.pd-verdict { padding: 18px; border-radius: var(--pd-radius); background: var(--pd-surface); border: 1px solid var(--pd-line); border-left: 5px solid var(--pd-line-strong); }
.pd-verdict--near-low { border-left-color: var(--pd-good); }
.pd-verdict--below-avg { border-left-color: var(--pd-teal); }
.pd-verdict--dropping { border-left-color: var(--pd-blue); }
.pd-verdict--checking { border-left-color: var(--pd-warn); }
.pd-verdict--out-of-stock { border-left-color: #2c2f36; }

.pd-range { padding-top: 22px; }
.pd-range__title { font-size: 12.5px; color: var(--pd-ink-2); }
.pd-range__title strong { font-weight: 900; }
.pd-range--low .pd-range__title strong { color: var(--pd-good); }
.pd-range--mid .pd-range__title strong { color: var(--pd-warn); }
.pd-range--high .pd-range__title strong { color: var(--pd-bad); }
.pd-range__bar { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); height: 22px; border-radius: 8px; overflow: visible; }
/* 세 구간은 옅게 두고 현재가가 있는 구간만 진하게 칠해, 막대만 봐도 판정이 읽히게 한다 */
.pd-range__zone { display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.pd-range__zone:nth-child(1) { background: var(--pd-good-soft); color: var(--pd-good); border-radius: 8px 0 0 8px; }
.pd-range__zone:nth-child(2) { background: var(--pd-warn-soft); color: var(--pd-warn); border-left: 1px solid var(--pd-surface); border-right: 1px solid var(--pd-surface); }
.pd-range__zone:nth-child(3) { background: var(--pd-bad-soft); color: var(--pd-bad); border-radius: 0 8px 8px 0; }
.pd-range--low .pd-range__zone:nth-child(1) { background: var(--pd-good); color: #fff; }
.pd-range--mid .pd-range__zone:nth-child(2) { background: var(--pd-warn); color: #fff; }
.pd-range--high .pd-range__zone:nth-child(3) { background: var(--pd-bad); color: #fff; }
.pd-range__dot {
  position: absolute; top: -7px; left: var(--pos, 50%); width: 4px; height: 36px; margin-left: -2px;
  border-radius: 4px; background: var(--pd-ink); box-shadow: 0 0 0 3px #fff;
  transition: left 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* 꼬리표는 위치 비율만큼 왼쪽으로 당겨, 양 끝에서도 막대 밖으로 나가지 않는다(0%면 왼쪽 정렬, 100%면 오른쪽 정렬) */
.pd-range__dot em { position: absolute; top: -22px; left: 50%; transform: translateX(calc(-1 * var(--pos, 50%))); padding: 1px 7px; border-radius: 6px; background: var(--pd-ink); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; white-space: nowrap; }
.pd-motion .pd-range:not(.is-in) .pd-range__dot { left: 50%; }
.pd-range__ends { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--pd-ink-3); }
.pd-verdict__save { font-size: 13px; color: var(--pd-good); font-weight: 600; }
.pd-verdict__save strong { font-weight: 900; }

.pd-variant { display: flex; flex-direction: column; gap: 6px; }
.pd-variant label { font-size: 13px; font-weight: 800; color: var(--pd-ink-2); }
.pd-variant select { width: 100%; min-height: 46px; font-size: 15px; }
.pd-variant__note { font-size: 12px; color: var(--pd-ink-3); }

.pd-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--pd-muted-soft); flex-shrink: 0; }
.pd-seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 800; color: var(--pd-ink-3); }
.pd-seg button.is-active { background: var(--pd-surface); color: var(--pd-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.pd-chart__summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.pd-chart__summary:empty { display: none; }
.pd-chart__stat.is-flat { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pd-chart__stat { display: flex; flex-direction: column; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--pd-surface); border: 1px solid var(--pd-line); }
.pd-chart__stat span { font-size: 12px; color: var(--pd-ink-3); font-weight: 700; }
.pd-chart__stat strong { font-size: 17px; font-weight: 900; letter-spacing: -0.02em; }
.pd-chart__stat small { font-size: 11.5px; color: var(--pd-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-chart__stat.is-low strong { color: var(--pd-good); }
.pd-chart__stat.is-high strong { color: var(--pd-bad); }
.pd-chart__stat.is-now { border-color: var(--pd-brand); background: var(--pd-brand-soft); }
.pd-chart__stat.is-now.is-best { border-color: var(--pd-good); background: var(--pd-good-soft); }
.pd-chart__stat.is-now.is-best small { color: var(--pd-good); font-weight: 800; }
@media (max-width: 420px) { .pd-chart__stat { padding: 8px 9px; } .pd-chart__stat strong { font-size: 14.5px; } }
.pd-chart__canvas { position: relative; padding: 12px 8px 4px; border-radius: var(--pd-radius); background: var(--pd-surface); border: 1px solid var(--pd-line); min-height: 230px; color: var(--pd-ink-3); font-size: 14px; touch-action: pan-y; }
.pd-chart__svg { width: 100%; height: auto; overflow: visible; }
.pd-chart__grid { stroke: var(--pd-line); stroke-width: 1; }
.pd-chart__tick { fill: var(--pd-ink-3); font-size: 11px; font-family: var(--pd-font); }
.pd-chart__band { fill: var(--pd-good); opacity: 0.1; }
.pd-chart__band-label { fill: var(--pd-good); font-size: 11px; font-weight: 800; font-family: var(--pd-font); }
.pd-chart__area { opacity: 0; transition: opacity 0.8s ease 0.5s; }
.pd-chart__line { fill: none; stroke: var(--pd-brand); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.4s cubic-bezier(0.3, 0.7, 0.2, 1); }
.pd-chart__avg { stroke: var(--pd-ink-3); stroke-width: 1.4; stroke-dasharray: 5 5; }
.pd-chart__avg-label { fill: var(--pd-ink-3); font-size: 11px; font-weight: 700; font-family: var(--pd-font); }
.pd-chart__mark { opacity: 0; transition: opacity 0.4s ease 1.2s; }
.pd-chart__mark circle { stroke: #fff; stroke-width: 2.5; }
.pd-chart__mark.is-low circle { fill: var(--pd-good); }
.pd-chart__mark.is-high circle { fill: var(--pd-bad); }
.pd-chart__mark.is-now circle { fill: var(--pd-brand); }
.pd-chart__mark.is-now.is-best circle { fill: var(--pd-good); }
.pd-chart__mark .pd-chart__ping { fill: var(--pd-brand) !important; stroke: none !important; opacity: 0.35; transform-box: fill-box; transform-origin: center; animation: pd-ping 1.8s ease-out infinite; }
.pd-chart__mark.is-best .pd-chart__ping { fill: var(--pd-good) !important; }
@keyframes pd-ping { 0% { transform: scale(0.6); opacity: 0.5; } 100% { transform: scale(1.9); opacity: 0; } }
.pd-chart__mark-label { font-size: 11.5px; font-weight: 800; font-family: var(--pd-font); paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.pd-chart__mark.is-low .pd-chart__mark-label { fill: var(--pd-good); }
.pd-chart__mark.is-high .pd-chart__mark-label { fill: var(--pd-bad); }
.pd-chart__now-label { fill: var(--pd-ink); font-size: 12px; font-weight: 900; font-family: var(--pd-font); paint-order: stroke; stroke: #fff; stroke-width: 4px; opacity: 0; transition: opacity 0.4s ease 1.3s; }
.pd-chart__canvas.is-drawn .pd-chart__line { stroke-dashoffset: 0; }
.pd-chart__canvas.is-drawn .pd-chart__area, .pd-chart__canvas.is-drawn .pd-chart__mark, .pd-chart__canvas.is-drawn .pd-chart__now-label { opacity: 1; }
.pd-chart__area { opacity: 0; }
.pd-chart__canvas.is-drawn .pd-chart__area { opacity: 1; }
.pd-chart__cross { stroke: var(--pd-ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.pd-chart__hover { fill: #fff; stroke: var(--pd-ink); stroke-width: 2.5; }
.pd-chart__tip { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--pd-ink); color: #fff; font-size: 12px; line-height: 1.35; pointer-events: none; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); }
.pd-chart__tip[hidden] { display: none; }
.pd-chart__tip strong { font-size: 14px; }
.pd-chart__tip small { color: #c9ccd3; }

/* 상세 고정 구매 바 */
.pd-stickybar { position: fixed; left: 0; right: 0; top: 62px; z-index: 45; transform: translateY(-120%); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; background: rgba(255, 255, 255, 0.97); border-bottom: 1px solid var(--pd-line); box-shadow: 0 6px 16px rgba(23, 25, 30, 0.08); pointer-events: none; }
.pd-stickybar.is-visible { transform: none; opacity: 1; pointer-events: auto; }
.pd-stickybar[hidden] { display: none; }
body.admin-bar .pd-stickybar { top: 94px; }
.pd-stickybar__inner { display: flex; align-items: center; gap: 10px; padding-top: 8px; padding-bottom: 8px; }
.pd-stickybar__inner img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; border: 1px solid var(--pd-line); background: #fff; flex-shrink: 0; }
.pd-stickybar__text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.pd-stickybar__name { font-size: 12px; color: var(--pd-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-stickybar__text strong { font-size: 16px; font-weight: 900; }
.pd-stickybar .pd-btn { min-height: 40px; padding: 0 14px; font-size: 14px; flex-shrink: 0; }

.pd-trust { margin-top: 44px; padding: 20px; border-radius: var(--pd-radius); background: var(--pd-surface-2); border: 1px solid var(--pd-line); font-size: 14px; color: var(--pd-ink-2); }
.pd-trust__title { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--pd-ink); }
.pd-trust__title svg { width: 19px; height: 19px; color: var(--pd-good); }
.pd-trust ul { display: grid; gap: 6px; margin-top: 10px; padding-left: 18px; list-style: disc; }
.pd-trust__links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; }
.pd-trust__links a { text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }

/* ---------- 광고 자리 (옵션에 슬롯 ID가 있을 때만 출력) ---------- */
.pd-ad { margin: 44px 0 0; padding-top: 10px; border-top: 1px solid var(--pd-line); min-height: 120px; }
.pd-ad__label { font-size: 11px; font-weight: 700; color: var(--pd-ink-3); margin-bottom: 6px; }

/* ---------- 글 · 정책 ---------- */
.pd-text-stack { display: grid; gap: 12px; margin-top: 20px; }
.pd-text-card { padding: 20px; border-radius: var(--pd-radius); background: var(--pd-surface); border: 1px solid var(--pd-line); font-size: 15px; color: var(--pd-ink-2); }
.pd-text-card--accent { border-left: 5px solid var(--pd-brand); }
.pd-text-card h2 { font-size: 18px; color: var(--pd-ink); margin-bottom: 8px; }
.pd-text-card p + p { margin-top: 8px; }
.pd-text-card ul { display: grid; gap: 6px; padding-left: 18px; list-style: disc; }
.pd-text-card a { color: var(--pd-brand-strong); text-decoration: underline; text-underline-offset: 2px; }
.pd-rule-list { display: grid; gap: 10px; }
.pd-rule-list__item { display: grid; gap: 2px; padding: 12px; border-radius: var(--pd-radius-sm); background: var(--pd-surface-2); }
.pd-rule-list__item strong { color: var(--pd-ink); }
.pd-form-card { display: grid; gap: 14px; margin-top: 20px; padding: 20px; border-radius: var(--pd-radius); background: var(--pd-surface); border: 1px solid var(--pd-line); font-size: 14px; color: var(--pd-ink-2); }
.pd-form-card label { display: grid; gap: 6px; font-weight: 700; color: var(--pd-ink); }
.pd-form-card input, .pd-form-card select, .pd-form-card textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--pd-line-strong); border-radius: 10px; background: #fff; font-weight: 400; }
.pd-form-card button { justify-self: start; min-height: 46px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--pd-ink); color: #fff; font-weight: 800; }

.pd-article { --pd-article-pad: 20px; margin-top: 12px; padding: var(--pd-article-pad); border-radius: var(--pd-radius); background: var(--pd-surface); border: 1px solid var(--pd-line); }
@container pd-main (min-width: 600px) { .pd-article { --pd-article-pad: 32px; } }
.pd-article__meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--pd-ink-3); }
.pd-article__title { margin-top: 10px; font-size: 26px; line-height: 1.35; font-weight: 800; letter-spacing: -0.02em; }
@media (min-width: 768px) { .pd-article__title { font-size: 32px; } }
.pd-article__lead { margin-top: 10px; font-size: 17px; color: var(--pd-ink-2); }
.pd-article__summary { margin-top: 20px; padding: 16px 18px; border-radius: var(--pd-radius-sm); background: var(--pd-brand-soft); }
.pd-article__summary-label { font-size: 13px; font-weight: 800; color: var(--pd-brand-strong); margin-bottom: 4px; }
.pd-article__body { margin-top: 8px; font-size: 16px; line-height: 1.8; color: var(--pd-ink-2); }
.pd-article__body h2 { margin-top: 28px; font-size: 20px; line-height: 1.4; color: var(--pd-ink); }
.pd-article__body ul { margin-top: 10px; display: grid; gap: 8px; padding-left: 20px; list-style: disc; }
.pd-article__body a { color: var(--pd-brand-strong); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.pd-article__resources { margin-top: 28px; padding: 16px; border-radius: var(--pd-radius-sm); background: var(--pd-surface-2); }
.pd-article__resources-label { font-size: 13px; font-weight: 800; color: var(--pd-ink-3); margin-bottom: 8px; }
.pd-article__resources ul { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-article__foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--pd-line); font-size: 13px; color: var(--pd-ink-3); }
.pd-prose > * + * { margin-top: 12px; }
.pd-prose a { color: var(--pd-brand-strong); text-decoration: underline; }

/* ---------- 토스트 ---------- */
.pd-toast {
  position: fixed; left: 50%; bottom: 96px; z-index: 300; transform: translate(-50%, 16px);
  padding: 10px 18px; border-radius: 999px; background: var(--pd-ink); color: #fff; font-size: 14px; font-weight: 700;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
}
.pd-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* 가이드 단위 가격 표 (inc/theme-unit-price.php) */
.pd-unit { margin: 18px 0 8px; padding: 16px; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); background: var(--pd-surface); }
.pd-unit__title { font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.pd-unit__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pd-unit__table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 14px; }
.pd-unit__table th, .pd-unit__table td { padding: 9px 8px; border-bottom: 1px solid var(--pd-line); text-align: right; vertical-align: top; white-space: nowrap; }
.pd-unit__table thead th { font-size: 12px; font-weight: 700; color: var(--pd-ink-3); background: var(--pd-surface-2); }
.pd-unit__table tbody th { text-align: left; font-weight: 600; white-space: normal; min-width: 180px; }
.pd-unit__table thead th:first-child { text-align: left; }
.pd-unit__table a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pd-unit__note, .pd-unit__empty { margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--pd-ink-3); }
.pd-unit__note a, .pd-unit__empty a { text-decoration: underline; }
/* 공통 법적 고지 mu-plugin이 wp_footer에서 푸터 밖에 붙이는 링크 줄. 같은 링크를 푸터 "운영 기준"에 두었으므로 숨긴다. */
.gjc-legal-links { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* 정렬 칩 */
.pd-sortbar .pd-chips { margin: 6px 0 0; }
.pd-sortbar .pd-chip { min-height: 32px; padding: 0 12px; font-size: 13px; background: transparent; border-color: transparent; color: var(--pd-ink-3); }
.pd-sortbar .pd-chip:hover { color: var(--pd-ink); border-color: var(--pd-line); }
.pd-sortbar .pd-chip.is-active { background: var(--pd-brand-soft); border-color: transparent; color: var(--pd-brand-strong); }

/* ---------- 페이지 연결: 더 둘러보기 · 가이드 링크 ---------- */
.pd-explore { display: flex; flex-direction: column; gap: 12px; }
.pd-explore__label { font-size: 13px; font-weight: 800; color: var(--pd-ink-2); margin-top: 4px; }
.pd-crosslinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pd-crosslinks .pd-pill small { margin-left: 4px; color: var(--pd-ink-3); font-weight: 700; }
.pd-main .pd-wrap > .pd-crosslinks { margin-top: 28px; }
.pd-guide-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--pd-radius); background: var(--pd-surface); border: 1px solid var(--pd-line); }
.pd-guide-link:hover { border-color: var(--pd-brand); }
.pd-guide-link__icon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--pd-brand-soft); color: var(--pd-brand-strong); }
.pd-guide-link__icon svg { width: 20px; height: 20px; }
.pd-guide-link__body { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.35; }
.pd-guide-link__body small { font-size: 12px; font-weight: 700; color: var(--pd-ink-3); }
.pd-guide-link__body strong { font-size: 15px; }
.pd-guide-link__arrow { width: 18px; height: 18px; color: var(--pd-ink-3); flex-shrink: 0; }

/* ---------- 모바일 첫 화면에 상품이 보이도록 히어로 압축 ---------- */
@media (max-width: 639px) {
  .pd-notice { font-size: 11px; }
  .pd-notice__inner { padding-top: 5px; padding-bottom: 5px; }
  .pd-hero__inner { gap: 12px; padding-top: 16px; padding-bottom: 14px; }
  .pd-hero__eyebrow { font-size: 12px; }
  .pd-hero__title { font-size: 21px; margin-top: 4px; }
  .pd-hero__desc { display: none; }
  .pd-hero__search { margin-top: 12px; }
  .pd-hero__search button { min-height: 38px; }
  .pd-hero__pets { margin-top: 10px; gap: 6px; }
  .pd-hero__pets .pd-pill { padding: 5px 11px; font-size: 13px; }
  .pd-hero__stats { gap: 6px; }
  .pd-stat { padding: 7px 9px; border-radius: 10px; }
  .pd-stat dd { font-size: 16px; margin-top: 1px; }
  .pd-home .pd-chips { margin-top: 12px; }
  .pd-home .pd-section:first-of-type, .pd-home .pd-rv + .pd-section { margin-top: 18px; }
  .pd-sec-head { margin-bottom: 10px; }
  .pd-sec-head__title { font-size: 19px; }
  .pd-intro { padding-top: 18px; }
  .pd-intro__title { font-size: 23px; }
}
@media (max-width: 639px) {
  .pd-home .pd-hero__stats { display: none; }
  .pd-home .pd-sec-head__basis { display: none; }
}
@container pd-main (min-width: 720px) {
  .pd-hero__desc { margin-top: 6px; }
}

/* =====================================================================
   앱형 공통 레이아웃 (inc/theme-layout.php · header.php · footer.php)
   · 1440px 이상: 사이드바 248 | 본문(가로 100%) | 보조 정보 320
   · 1024~1439px: 사이드바 | 본문,  1023px 이하: 상단 바 + 본문(사이드바는 ☰ 서랍)
   · 데스크톱 본문 폭은 728px 이상이라 본문 가로 광고가 728×90을 유지한다.
   ===================================================================== */
:root {
  --pd-side: 248px;
  --pd-side-min: 76px;
  --pd-rail: 320px;
  --pd-pad: 16px;
  --pd-gold: #9a6b1f;
  --pd-gold-text: #8b601c; /* 2026-10-26 글자 대비: gold 90% + 검정, #f8f4ee 위 5.06:1 */
  --pd-brand-solid: #c74c0a; /* 2026-10-26 흰 글자 버튼 바탕: brand 88% + 검정, 흰 글자 4.70:1 */
  --pd-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (min-width: 768px) { :root { --pd-pad: 24px; } }
@media (min-width: 1024px) { :root { --pd-pad: 20px; } }
@media (min-width: 1280px) { :root { --pd-pad: 32px; } }
@media (min-width: 1600px) { :root { --pd-pad: 40px; } }
:root { --pd-gutter: var(--pd-pad); }

.pd-app { display: flex; min-height: 100vh; }
.pd-page { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pd-shell { flex: 1; width: 100%; padding: 0 var(--pd-pad); }
.pd-shell .pd-wrap { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
.pd-shell .pd-wrap--narrow { max-width: 860px; }
.pd-main { min-width: 0; container: pd-main / inline-size; }
.pd-rail { display: none; }
@media (min-width: 1440px) {
  .pd-shell { display: grid; grid-template-columns: minmax(0, 1fr) var(--pd-rail); column-gap: 32px; align-items: start; }
  .pd-rail { display: flex; flex-direction: column; gap: 16px; padding: 28px 0 40px; }
  /* 넓은 화면에서는 오른쪽 보조 정보의 '최근 본 상품'·데이터 현황만 쓴다 */
  .pd-main .pd-rv { display: none !important; }
  .pd-home .pd-hero__stats { display: none; }
  .pd-home .pd-hero__inner { grid-template-columns: minmax(0, 1fr); }
}

.pd-logo__mark { display: inline-grid; place-items: center; flex-shrink: 0; color: var(--pd-ink); }
.pd-logo__mark svg { width: 100%; height: 100%; }

/* ---------- 왼쪽 사이드바 (모바일에서는 서랍) ---------- */
.pd-sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 220; width: min(300px, 86vw);
  display: flex; flex-direction: column; padding: 16px 12px 18px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: var(--pd-surface); border-right: 1px solid var(--pd-line);
  transform: translateX(-102%); visibility: hidden; transition: transform 0.3s var(--pd-ease), visibility 0s linear 0.3s;
  scrollbar-width: thin; scrollbar-color: var(--pd-line-strong) transparent;
}
body.pd-nav-open { overflow: hidden; }
body.pd-nav-open .pd-sidebar { transform: none; visibility: visible; transition: transform 0.3s var(--pd-ease), visibility 0s; box-shadow: 12px 0 40px rgba(20, 16, 12, 0.18); }
.pd-scrim { position: fixed; inset: 0; z-index: 210; background: rgba(20, 16, 12, 0.45); }
.pd-scrim[hidden] { display: none; }

.pd-sidebar__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pd-sidebar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 0 8px; }
.pd-sidebar__brand .pd-logo__mark { width: 40px; height: 40px; }
.pd-sidebar__brand:hover .pd-logo__mark { transform: rotate(-6deg); transition: transform 0.25s ease; }
.pd-sidebar__brand-text { display: flex; flex-direction: column; font-size: 20px; font-weight: 900; line-height: 1.1; letter-spacing: -0.03em; }
.pd-sidebar__brand-text small { margin-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--pd-ink-3); }
.pd-sidebar__close { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--pd-muted-soft); }
.pd-sidebar__close svg { width: 20px; height: 20px; }

.pd-sidebar__collapse, .pd-sidebar__search, .pd-sidebar__link, .pd-catgroup summary {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 12px;
  border-radius: 8px; font-size: 15px; line-height: 1.3; white-space: nowrap; color: var(--pd-ink);
}
.pd-sidebar__collapse svg, .pd-sidebar__search svg, .pd-sidebar__link svg, .pd-catgroup summary svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--pd-ink-3); transition: color 0.2s; }
.pd-sidebar__collapse { border: 0; background: transparent; font-size: 14px; color: var(--pd-ink-3); }
.pd-sidebar__collapse:hover { background: var(--pd-surface-2); color: var(--pd-ink); }
.pd-sidebar__search { margin: 4px 0 2px; border: 1px solid var(--pd-line); border-radius: 999px; background: var(--pd-surface-2); font-size: 14px; color: var(--pd-ink-3); }
.pd-sidebar__search:hover { border-color: var(--pd-ink-3); color: var(--pd-ink); }
.pd-sidebar__heading { margin: 20px 12px 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; white-space: nowrap; color: var(--pd-ink-3); }
.pd-sidebar__nav ul { display: grid; gap: 2px; }
.pd-sidebar__link { position: relative; transition: background 0.2s, color 0.2s, transform 0.2s var(--pd-ease); }
.pd-sidebar__link:hover { background: var(--pd-surface-2); transform: translateX(2px); }
.pd-sidebar__link:hover svg { color: var(--pd-brand); }
.pd-sidebar__link.is-current { background: var(--pd-brand-soft); color: var(--pd-brand-strong); font-weight: 800; }
.pd-sidebar__link.is-current svg { color: currentColor; }
.pd-sidebar__link.is-current::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 4px; background: var(--pd-brand); }
.pd-sidebar__foot { margin-top: auto; padding: 18px 8px 0; font-size: 12px; line-height: 1.6; color: var(--pd-ink-3); }
.pd-sidebar__links { display: flex; flex-wrap: wrap; gap: 2px 12px; padding-top: 14px; border-top: 1px solid var(--pd-line); }
.pd-sidebar__links a:hover { color: var(--pd-ink); text-decoration: underline; }
.pd-sidebar__links strong { color: var(--pd-ink-2); }
.pd-sidebar__copy { margin-top: 6px; }

/* 반려동물별 카테고리 묶음 */
.pd-catgroup summary { cursor: pointer; list-style: none; font-weight: 700; }
.pd-catgroup summary::-webkit-details-marker { display: none; }
.pd-catgroup summary span { flex: 1; min-width: 0; }
.pd-catgroup summary small { font-size: 12px; font-weight: 700; color: var(--pd-ink-3); }
.pd-catgroup summary::after {
  content: ""; width: 7px; height: 7px; margin: -3px 2px 0; flex-shrink: 0;
  border-right: 2px solid var(--pd-ink-3); border-bottom: 2px solid var(--pd-ink-3); transform: rotate(45deg); transition: transform 0.2s ease;
}
.pd-catgroup[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.pd-catgroup summary:hover { background: var(--pd-surface-2); }
.pd-catgroup[open] summary svg { color: var(--pd-brand); }
.pd-catgroup ul { position: relative; display: grid; gap: 1px; margin: 2px 0 8px 22px; padding-left: 12px; border-left: 1px solid var(--pd-line); }
.pd-catgroup__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 4px 10px; border-radius: 6px; font-size: 14px; line-height: 1.35; color: var(--pd-ink-2); }
.pd-catgroup__link small { font-size: 12px; color: var(--pd-ink-3); }
.pd-catgroup__link:hover { background: var(--pd-surface-2); color: var(--pd-ink); }
.pd-catgroup__link.is-current { background: var(--pd-brand-soft); color: var(--pd-brand-strong); font-weight: 800; }
.pd-catgroup__link.is-current::before { content: ""; position: absolute; left: -1px; width: 2px; height: 22px; background: var(--pd-brand); }
.pd-catgroup__link.is-current small { color: var(--pd-brand-strong); }

@media (min-width: 1024px) {
  .pd-sidebar {
    position: sticky; top: 0; z-index: 20; flex: none; width: var(--pd-side); height: 100vh;
    transform: none; visibility: visible; box-shadow: none; transition: none;
  }
  body.admin-bar .pd-sidebar { top: 32px; height: calc(100vh - 32px); }
  .pd-sidebar__close, .pd-scrim, .pd-topbar { display: none !important; }
  body.pd-side-collapsed .pd-sidebar { width: var(--pd-side-min); }
  /* 너비 애니메이션은 '메뉴 접기'를 누를 때만 쓴다(창 크기 변경·첫 그리기에서는 움직이지 않는다) */
  body.pd-side-animating .pd-sidebar { transition: width 0.35s var(--pd-ease); }
  body.pd-side-animating .pd-stickybar { transition: transform 0.3s ease, opacity 0.3s ease, left 0.35s var(--pd-ease); }
  body.pd-side-collapsed .pd-sidebar__label,
  body.pd-side-collapsed .pd-sidebar__heading,
  body.pd-side-collapsed .pd-sidebar__cats,
  body.pd-side-collapsed .pd-sidebar__foot { display: none; }
  body.pd-side-collapsed .pd-sidebar__brand,
  body.pd-side-collapsed .pd-sidebar__collapse,
  body.pd-side-collapsed .pd-sidebar__search,
  body.pd-side-collapsed .pd-sidebar__link { justify-content: center; padding-left: 0; padding-right: 0; }
  body.pd-side-collapsed .pd-sidebar__collapse svg { transform: scaleX(-1); }
  body.pd-side-collapsed .pd-sidebar__link:hover { transform: none; }
}
@media (max-width: 1023px) { .pd-sidebar__collapse { display: none; } }

/* ---------- 모바일 상단 바 ---------- */
.pd-topbar {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 var(--pd-pad);
  background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--pd-line);
}
.pd-topbar__brand { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 19px; font-weight: 900; letter-spacing: -0.03em; }
.pd-topbar__brand .pd-logo__mark { width: 34px; height: 34px; }
.pd-menu-btn, .pd-search-btn { display: inline-grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border: 0; border-radius: 10px; background: var(--pd-muted-soft); color: var(--pd-ink); }
.pd-menu-btn svg, .pd-search-btn svg { width: 21px; height: 21px; }
.pd-topbar .pd-search-btn { margin-left: auto; background: transparent; border: 1px solid var(--pd-line); border-radius: 999px; }

/* ---------- 광고·제휴 안내 띠 (본문 열 맨 위) ---------- */
.pd-notice { margin: 14px var(--pd-pad) 0; padding: 9px 14px; border: 1px solid #ecd9a6; border-radius: var(--pd-radius-sm); background: #fff7df; color: #5f4a14; font-size: 12.5px; line-height: 1.6; }
.pd-notice svg { display: inline-block; width: 15px; height: 15px; margin: -2px 6px 0 0; vertical-align: middle; color: #9a6b1f; }
.pd-notice strong { margin-right: 4px; color: #7a5200; }
.pd-notice__sub { color: #7f6a39; }
.pd-notice a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 639px) { .pd-notice { margin-top: 10px; padding: 8px 12px; font-size: 12px; } }

/* ---------- 페이지 머리말 · 영문 소제목 · 섹션 제목 ---------- */
.pd-eyebrow, .pd-intro__eyebrow, .pd-hero__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pd-gold-text); }
.pd-eyebrow { margin-bottom: 4px; }
.pd-intro { padding: 28px 0 6px; }
.pd-intro__title { margin-top: 6px; font-size: clamp(28px, 3vw, 40px); line-height: 1.2; font-weight: 900; letter-spacing: -0.04em; }
.pd-intro__desc { color: var(--pd-ink-3); font-size: 16px; }
.pd-sec-head__title { font-size: clamp(21px, 2vw, 27px); font-weight: 900; letter-spacing: -0.035em; }
.pd-sec-head__basis { color: var(--pd-ink-3); }
@media (max-width: 639px) { .pd-intro { padding-top: 20px; } }

/* 홈 머리말: 상자 대신 큰 제목 + 검색 */
.pd-hero { margin-top: 0; border: 0; border-radius: 0; background: none; }
.pd-shell .pd-wrap.pd-hero__inner { padding: 28px 0 6px; }
.pd-hero__title { margin-top: 6px; font-size: clamp(28px, 3.3vw, 46px); line-height: 1.18; font-weight: 900; letter-spacing: -0.045em; }
.pd-hero__desc { color: var(--pd-ink-3); }
.pd-hero__search { max-width: 640px; border-radius: 999px; padding: 6px 6px 6px 18px; }
.pd-hero__search button { border-radius: 999px; padding: 0 22px; background: var(--pd-brand-solid); }
.pd-hero__search button:hover { background: var(--pd-brand-strong); }
.pd-stat { border-radius: var(--pd-radius); }
@container pd-main (min-width: 720px) {
  .pd-shell .pd-wrap.pd-hero__inner { padding: 36px 0 8px; }
}

/* ---------- 목록 6칸 기준 (2·3·4·6열, 목록 광고는 24번째 카드 뒤) ---------- */
@container pd-main (min-width: 1180px) {
  .pd-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .pd-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.pd-card { border-radius: var(--pd-radius); }
.pd-card__media > .pd-badge { border-radius: 999px; padding: 2px 8px; }
.pd-card__cta { border-radius: var(--pd-radius-sm); }
.pd-tile, .pd-guide, .pd-guide-link, .pd-howto, .pd-empty, .pd-text-card, .pd-form-card, .pd-article, .pd-trust, .pd-unit { border-radius: var(--pd-radius); }
.pd-chip { min-height: 36px; }

/* ---------- 오른쪽 보조 정보 ---------- */
.pd-rail__box { padding: 18px; background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: var(--pd-radius); }
.pd-rail__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.pd-rail__title { font-size: 16px; font-weight: 900; letter-spacing: -0.02em; }
.pd-rail__box > .pd-rail__title { margin-bottom: 10px; }
.pd-rail__more { font-size: 12.5px; font-weight: 700; color: var(--pd-ink-3); }
.pd-rail__more:hover { color: var(--pd-brand-strong); }
.pd-rail__box > .pd-rail__more { display: inline-block; margin-top: 10px; }
.pd-rail__list { display: grid; gap: 8px; }
.pd-rail__item { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--pd-line); border-radius: var(--pd-radius-sm); transition: border-color 0.2s, box-shadow 0.2s; }
.pd-rail__item:hover { border-color: var(--pd-line-strong); box-shadow: var(--pd-shadow); }
.pd-rail__item img { width: 56px; height: 56px; flex-shrink: 0; object-fit: contain; border-radius: 6px; background: #fff; }
.pd-rail__item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-rail__item-name { font-size: 13.5px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pd-rail__item-price { font-size: 13px; color: var(--pd-brand-strong); }
.pd-rail__item-price strong { font-weight: 900; }
.pd-rail__item-price em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--pd-good); }
.pd-rail__stats { display: grid; gap: 8px; }
.pd-rail__stats > div { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.pd-rail__stats dt { color: var(--pd-ink-3); }
.pd-rail__stats dd { font-weight: 800; }
.pd-rail__stats dd.is-good { color: var(--pd-good); }
.pd-rail__links li + li { border-top: 1px dashed var(--pd-line); }
.pd-rail__links a { display: block; padding: 8px 0; font-size: 13.5px; line-height: 1.45; color: var(--pd-ink-2); }
.pd-rail__links a:hover { color: var(--pd-brand-strong); }
.pd-rail__note { padding: 0 4px; font-size: 11.5px; line-height: 1.55; color: var(--pd-ink-3); }
.pd-rv--rail { margin-top: 0; }
.pd-rv--rail .pd-rv__track { flex-direction: column; gap: 8px; overflow: visible; padding: 0; }
.pd-rv--rail .pd-rv__item { flex: none; padding: 8px; border-radius: var(--pd-radius-sm); }
.pd-rv--rail .pd-rv__item:nth-child(n+6) { display: none; }
.pd-rv--rail .pd-rv__item img { width: 56px; height: 56px; }

/* ---------- 푸터 (본문 열 안, 밝은 톤) ---------- */
.pd-footer { margin: 48px var(--pd-pad) 0; padding: 28px 0 36px; border-top: 1px solid var(--pd-line); background: transparent; color: var(--pd-ink-3); font-size: 13.5px; }
.pd-footer__grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .pd-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; } }
.pd-footer__logo { display: flex; align-items: center; gap: 10px; color: var(--pd-ink); font-size: 18px; font-weight: 900; letter-spacing: -0.03em; }
.pd-footer__logo .pd-logo__mark { width: 32px; height: 32px; }
.pd-footer__logo span:last-child { font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--pd-ink-3); }
.pd-footer__desc { margin-top: 8px; max-width: 460px; }
.pd-footer__heading { margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: var(--pd-ink); }
.pd-footer__links { display: grid; gap: 6px; }
.pd-footer__links a:hover { color: var(--pd-ink); text-decoration: underline; }
.pd-footer__legal { display: grid; gap: 4px; margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--pd-line); font-size: 12px; }
.pd-footer__legal strong { margin-right: 6px; color: var(--pd-ink-2); }
.pd-footer__copy { margin-top: 6px; }

/* ---------- 상세 고정 구매 바: 상단 바·사이드바 옆에 붙는다 ---------- */
.pd-stickybar { top: 56px; }
.pd-shell .pd-stickybar .pd-wrap { max-width: none; margin: 0; padding-left: var(--pd-pad); padding-right: var(--pd-pad); }
@media (min-width: 1024px) {
  .pd-stickybar { top: 0; left: var(--pd-side); }
  body.pd-side-collapsed .pd-stickybar { left: var(--pd-side-min); }
  body.admin-bar .pd-stickybar { top: 32px; }
}

/* =====================================================================
   상품 상세 (petdeal-product-detail.php) — 세로 높이를 줄인 한 블록 구성
   ===================================================================== */
.pd-detail .pd-section { margin-top: 36px; }
/* 상단 카드: [이미지 | 제목·가격·구매 | 가격 요약] 세 구역을 한 카드에 붙인다.
   좁은 화면은 이미지+제목 → 가격·구매 → 요약 순서로 쌓고, 이미지 구역은 카드 높이만큼 늘어나 빈 공간이 생기지 않는다. */
.pd-pdp {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "media head" "buy buy" "facts facts";
  margin-top: 12px; overflow: hidden; background: var(--pd-surface);
  border: 1px solid var(--pd-line); border-top: 4px solid var(--pd-line-strong); border-radius: var(--pd-radius);
  box-shadow: 0 1px 2px rgba(40, 20, 0, 0.04), 0 10px 30px rgba(40, 20, 0, 0.05);
}
.pd-pdp--near-low { border-top-color: var(--pd-good); }
.pd-pdp--below-avg { border-top-color: var(--pd-teal); }
.pd-pdp--dropping { border-top-color: var(--pd-blue); }
.pd-pdp--checking { border-top-color: var(--pd-warn); }
.pd-pdp--out-of-stock { border-top-color: #2c2f36; }
.pd-pdp--hold { border-top-color: var(--pd-brand); }
.pd-pdp__media { grid-area: media; position: relative; aspect-ratio: 1 / 1; margin: 14px 0 0 14px; overflow: hidden; background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-radius-sm); }
.pd-pdp__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.pd-pdp__media.is-sold-out img { opacity: 0.35; filter: grayscale(1); }
.pd-pdp__soldout { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 4px 12px; border-radius: 999px; background: #2c2f36; color: #fff; font-size: 13px; font-weight: 800; }
.pd-pdp__head { grid-area: head; align-self: center; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 14px 14px 0 12px; }
.pd-pdp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.pd-pdp__brand { font-weight: 800; color: var(--pd-ink-2); }
a.pd-pdp__brand { text-decoration: underline; text-decoration-color: var(--pd-line-strong); text-underline-offset: 3px; }
a.pd-pdp__brand:hover { color: var(--pd-brand-strong); text-decoration-color: currentColor; }
.pd-pdp__chip { padding: 1px 9px; border-radius: 999px; background: var(--pd-muted-soft); font-size: 12px; font-weight: 700; color: var(--pd-ink-2); }
.pd-pdp__chip--muted { background: transparent; border: 1px solid var(--pd-line); }
.pd-pdp__title { font-size: 18px; line-height: 1.35; font-weight: 900; letter-spacing: -0.03em; }

.pd-pdp__buy { grid-area: buy; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px; }
.pd-pdp__status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pd-pdp__status .pd-badge { border-radius: 999px; padding: 3px 10px; }
.pd-pdp__save { font-size: 13px; font-weight: 600; color: var(--pd-good); }
.pd-pdp__save strong { font-weight: 900; }
.pd-pdp__price { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 14px; }
.pd-pdp__now strong { display: block; font-size: 34px; line-height: 1; font-weight: 900; letter-spacing: -0.045em; }
.pd-pdp__delta { display: flex; flex-direction: column; padding-bottom: 2px; line-height: 1.25; }
.pd-pdp__delta strong { font-size: 15px; font-weight: 900; }
.pd-pdp__delta span { font-size: 11.5px; font-weight: 600; color: var(--pd-ink-3); }
.pd-pdp__delta--up strong { color: var(--pd-bad); }
.pd-pdp__delta--down strong { color: var(--pd-good); }
.pd-pdp__judge { padding: 10px 12px; border-radius: var(--pd-radius-sm); background: var(--pd-surface-2); font-size: 14px; line-height: 1.6; color: var(--pd-ink-2); }
.pd-pdp__judge strong { color: var(--pd-ink); }
.pd-pdp__actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.pd-pdp__actions .pd-btn { border-radius: var(--pd-radius-sm); }
.pd-pdp__fine { font-size: 11.5px; line-height: 1.55; color: var(--pd-ink-3); }

.pd-pdp__facts { grid-area: facts; display: grid; gap: 14px; min-width: 0; padding: 14px; background: var(--pd-surface-2); border-top: 1px solid var(--pd-line); }
.pd-pdp__facts .pd-range { padding-top: 0; }
.pd-range__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 36px; font-size: 13px; font-weight: 800; color: var(--pd-ink-2); }
.pd-range__head strong { font-size: 14px; font-weight: 900; }
.pd-range--low .pd-range__head strong { color: var(--pd-good); }
.pd-range--mid .pd-range__head strong { color: var(--pd-warn); }
.pd-range--high .pd-range__head strong { color: var(--pd-bad); }
.pd-pdp__facts .pd-range__ends { margin-top: 8px; font-size: 12px; font-weight: 600; }
.pd-pdp__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* 수치가 3개면 한 줄 3칸(4개면 2×2)으로 놓아 빈 칸을 만들지 않는다 */
.pd-pdp__stats:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pd-pdp__trend { display: none; }
.pd-pdp__trend-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 13px; font-weight: 800; color: var(--pd-ink-2); }
.pd-pdp__trend-head a { font-size: 12px; font-weight: 700; color: var(--pd-ink-3); text-decoration: underline; text-underline-offset: 2px; }
.pd-pdp__trend-head a:hover { color: var(--pd-brand-strong); }
.pd-pdp__trend-plot { display: flex; align-items: center; flex: 1; min-height: 48px; }
.pd-pdp__trend-plot .pd-spark { width: 100%; max-height: 72px; }
/* 가격 변동이 없던 상품: 일직선 차트를 키우지 않고 '변동 없음'을 한눈에 읽히는 안내로 보여 준다 */
.pd-pdp__flat { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 0 2px; text-align: center; }
.pd-pdp__flat-line { width: 100%; max-width: 180px; height: 2px; margin-bottom: 10px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--pd-line-strong) 0 8px, transparent 8px 13px); position: relative; }
.pd-pdp__flat-line::after { content: ""; position: absolute; right: -4px; top: -4px; width: 10px; height: 10px; border-radius: 999px; background: var(--pd-brand); box-shadow: 0 0 0 3px var(--pd-surface); }
.pd-pdp__flat strong { font-size: 16px; font-weight: 900; letter-spacing: -0.02em; color: var(--pd-ink); }
.pd-pdp__flat span { font-size: 12.5px; line-height: 1.5; color: var(--pd-ink-3); }
.pd-pdp__stats > div { min-width: 0; padding: 9px 11px; background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: var(--pd-radius-sm); }
.pd-pdp__stats dt { overflow: hidden; font-size: 11.5px; color: var(--pd-ink-3); text-overflow: ellipsis; white-space: nowrap; }
.pd-pdp__stats dd { margin-top: 2px; font-size: 15px; font-weight: 900; letter-spacing: -0.02em; }
.pd-pdp__stats dd small { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--pd-ink-3); }

@container pd-main (max-width: 599px) {
  .pd-pdp__share-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .pd-pdp__actions .pd-btn--ghost { padding: 0 14px; }
}
@container pd-main (min-width: 600px) {
  .pd-pdp { grid-template-columns: 230px minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "media head" "media buy" "facts facts"; margin-top: 16px; }
  .pd-pdp__media { align-self: stretch; aspect-ratio: auto; min-height: 230px; margin: 0; border: 0; border-right: 1px solid var(--pd-line); border-radius: 0; }
  .pd-pdp__media img { padding: 20px; }
  .pd-pdp__head { align-self: start; padding: 20px 22px 0; }
  .pd-pdp__buy { padding: 14px 22px 20px; }
  .pd-pdp__title { font-size: 22px; }
  .pd-pdp__now strong { font-size: 38px; }
  .pd-pdp__facts { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 22px; padding: 18px 22px; }
  /* 가격 범위 막대가 없으면 수치가 전체 폭을 쓴다(미니 흐름은 이 폭에서 숨김) */
  .pd-pdp__facts:not(:has(.pd-range)) .pd-pdp__stats { grid-column: 1 / -1; }
  .pd-pdp__stats, .pd-pdp__stats:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
}
@container pd-main (min-width: 1100px) {
  .pd-pdp { grid-template-columns: 300px minmax(0, 1fr) 300px; grid-template-rows: auto 1fr; grid-template-areas: "media head facts" "media buy facts"; }
  .pd-pdp__media { min-height: 300px; }
  .pd-pdp__head { padding: 24px 28px 0; }
  .pd-pdp__buy { padding: 16px 28px 24px; }
  .pd-pdp__title { font-size: 26px; }
  .pd-pdp__now strong { font-size: 44px; }
  .pd-pdp__facts { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 22px 22px 18px; border-top: 0; border-left: 1px solid var(--pd-line); }
  /* 남는 높이는 '최근 가격 흐름' 패널이 차지한다. 흐름이 없으면 수치 줄들이 고르게 나눠 가진다 */
  .pd-pdp__trend { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 84px; padding: 10px 14px; background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: var(--pd-radius-sm); }
  .pd-pdp__trend-plot .pd-spark { max-height: 140px; }
  /* 좁고 긴 열에서는 수치를 영수증처럼 줄로 읽히게 한다 */
  .pd-pdp__stats { display: flex; flex-direction: column; gap: 0; }
  .pd-pdp__stats > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 7px 0; background: none; border: 0; border-bottom: 1px dashed var(--pd-line-strong); border-radius: 0; }
  .pd-pdp__facts:not(:has(.pd-pdp__trend)) .pd-pdp__stats { flex: 1; }
  .pd-pdp__facts:not(:has(.pd-pdp__trend)) .pd-pdp__stats > div { flex: 1 1 auto; }
  .pd-pdp__stats > div:last-child { border-bottom: 0; }
  .pd-pdp__stats dt { font-size: 13px; }
  .pd-pdp__stats dd { margin-top: 0; text-align: right; }
}

/* 가격 흐름: 차트와 기간별 최저·최고 표를 한 섹션에 */
.pd-history__grid { display: grid; gap: 12px; }
/* 가격 흐름 배치(본문 폭 기준)
   · 820px 미만: 요약 → 차트 → 기간표 순서로 쌓는다.
   · 820~999px: 요약을 두 열 위에 한 줄로 두고 그 아래 [차트 | 기간표].
   · 1000px 이상: 왼쪽은 차트, 오른쪽은 요약과 기간표를 쌓아 두 열의 높이를 맞춘다.
     (예전에는 요약이 차트 위에만 있어 오른쪽 표 아래가 180px쯤 비었다. 1000px 미만은 오른쪽 열이 좁아 요약 글자가 잘리므로 한 줄 배치를 쓴다.) */
@container pd-main (min-width: 820px) {
  .pd-history__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-areas: "summary summary" "chart table"; align-items: start; }
  .pd-history__grid > .pd-chart__summary { grid-area: summary; }
  .pd-history__chart { grid-area: chart; }
  .pd-history__table { grid-area: table; }
  .pd-history__grid.is-table-only { grid-template-columns: minmax(0, 560px); grid-template-areas: "table"; }
  .pd-history__grid.is-chart-only { grid-template-columns: minmax(0, 1fr); grid-template-areas: "summary" "chart"; }
}
@container pd-main (min-width: 1000px) {
  .pd-history__grid:not(.is-chart-only):not(.is-table-only) { grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "chart summary" "chart table"; align-items: stretch; }
  /* 요약은 차트가 그려질 때 채워진다. 자리를 미리 잡아 두어 표가 아래로 밀리지 않게 한다 */
  .pd-history__grid:not(.is-chart-only):not(.is-table-only) > .pd-chart__summary { min-height: 78px; }
  .pd-history__grid:not(.is-chart-only):not(.is-table-only) > .pd-chart__summary:empty { display: grid; }
  .pd-history__grid > .pd-chart__summary .pd-chart__stat.is-flat { align-items: center; align-content: center; }
  .pd-history__grid:not(.is-chart-only) .pd-history__table { display: flex; }
  .pd-history__grid:not(.is-chart-only) .pd-history__table .pd-ptable { height: 100%; }
  .pd-history__grid:not(.is-chart-only) .pd-history__table .pd-ptable td, .pd-history__grid:not(.is-chart-only) .pd-history__table .pd-ptable tbody th { vertical-align: middle; }
}
/* 요약 칸의 보조 문구('최저가보다 +11.2%')는 좁은 칸에서 말줄임으로 잘리지 않고 줄바꿈한다 */
.pd-history .pd-chart__stat small { white-space: normal; overflow: visible; }
.pd-history .pd-chart__summary { gap: 6px; margin-bottom: 0; }
.pd-history .pd-chart__stat { padding: 7px 10px; border-radius: var(--pd-radius-sm); }
.pd-history .pd-chart__stat strong { font-size: 15px; }
.pd-history .pd-chart__canvas { border-radius: var(--pd-radius); }
.pd-history__table { overflow: hidden; background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: var(--pd-radius); }
.pd-ptable { width: 100%; border-collapse: collapse; font-size: 14px; }
.pd-ptable th, .pd-ptable td { padding: 9px 12px; border-bottom: 1px solid var(--pd-line); text-align: right; vertical-align: top; }
.pd-ptable thead th { padding-top: 8px; padding-bottom: 8px; background: var(--pd-surface-2); font-size: 12px; font-weight: 700; color: var(--pd-ink-3); }
.pd-ptable thead th:first-child, .pd-ptable tbody th { text-align: left; }
.pd-ptable tbody th { font-weight: 700; color: var(--pd-ink-2); white-space: nowrap; }
.pd-ptable td strong { display: block; font-weight: 800; white-space: nowrap; }
.pd-ptable td.is-low strong { color: var(--pd-good); }
.pd-ptable td small { display: block; font-size: 11.5px; color: var(--pd-ink-3); white-space: nowrap; }
.pd-ptable__avg > div { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; font-size: 14px; }
.pd-ptable__avg > div + div { border-top: 1px solid var(--pd-line); }
.pd-ptable__avg dt { color: var(--pd-ink-3); }
.pd-ptable__avg dd { font-weight: 800; }

/* 더 둘러보기 + 정보 기준을 한 줄에 */
.pd-detail-foot { display: grid; gap: 16px; }
.pd-detail-foot .pd-trust { margin-top: 0; }
@container pd-main (min-width: 820px) {
  .pd-detail-foot { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}

/* =====================================================================
   202610c — 상품 상세 가격 달력 히트맵 (petdeal-product-detail.php · petdeal-202610c.js)
   색 5단계는 coff·kkultong·agaya와 같다: 진한 빨강(쌈) → 연한 빨강 → 크림(평균) → 연한 파랑 → 진한 파랑(비쌈).
   ===================================================================== */
:root {
  --pd-heat-1: #d6353b;
  --pd-heat-2: #f0a196;
  --pd-heat-3: #f1e7d6;
  --pd-heat-4: #a9c8e6;
  --pd-heat-5: #2c6baa;
  /* 가격 방향 글자색도 coff와 같은 뜻: 내려감(싸짐) = 빨강, 올라감 = 파랑. 흰 바탕 대비 4.5:1 이상. */
  --pd-down: #c93a3f;
  --pd-up: #1f6fb2;
}
.pd-history { position: relative; }
.pd-heat__insight { margin-bottom: 12px; font-size: 15px; font-weight: 700; line-height: 1.5; }
.pd-heat__insight b { font-weight: 900; }
.pd-heat__insight .is-down, .pd-heat-side__stats .is-down { color: var(--pd-down); }
.pd-heat__insight .is-up, .pd-heat-side__stats .is-up { color: var(--pd-up); }
.pd-heat__wrap { min-width: 0; }
.pd-heat__grid { display: grid; gap: 3px; width: max-content; max-width: 100%; grid-template-columns: 22px repeat(var(--n, 12), var(--cw, 22px)); grid-template-rows: 14px repeat(7, var(--ch, 22px)); border-radius: 6px; touch-action: manipulation; }
.pd-heat__grid:focus-visible { outline-offset: 6px; }
.pd-heat__m { grid-row: 1; justify-self: start; font-size: 11px; line-height: 14px; color: var(--pd-ink-3); white-space: nowrap; overflow-wrap: normal; }
.pd-heat__d { grid-column: 1; align-self: center; font-size: 10.5px; line-height: 1; color: var(--pd-ink-3); }
.pd-heat__c { position: relative; border-radius: var(--cr, 4px); cursor: pointer; transition: background-color 0.35s; }
.pd-heat__c.l1 { background: var(--pd-heat-1); }
.pd-heat__c.l2 { background: var(--pd-heat-2); }
.pd-heat__c.l3 { background: var(--pd-heat-3); }
.pd-heat__c.l4 { background: var(--pd-heat-4); }
.pd-heat__c.l5 { background: var(--pd-heat-5); }
.pd-heat__c.is-none { background: transparent; border: 1px dashed var(--pd-line-strong); cursor: default; }
.pd-heat__c.is-dip::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--pd-ink); box-shadow: 0 0 0 1.5px #fff; }
.pd-heat__c.is-today { box-shadow: inset 0 0 0 2.5px var(--pd-ink); }
.pd-heat__c.is-act { z-index: 2; box-shadow: 0 0 0 2px var(--pd-brand); }
.pd-heat__c.is-today.is-act { box-shadow: inset 0 0 0 2.5px var(--pd-ink), 0 0 0 2px var(--pd-brand); }
.pd-heat__grid.is-big { --cr: 6px; }
.pd-heat__grid.is-big .pd-heat__c:not(.is-none)::before { content: attr(data-n); position: absolute; left: 5px; top: 3px; font-size: 10px; line-height: 1.2; color: rgba(23, 25, 30, 0.72); }
.pd-heat__grid.is-big .pd-heat__c.l1::before, .pd-heat__grid.is-big .pd-heat__c.l5::before { color: #fff; }
.pd-heat__grid.is-big .pd-heat__c.is-dip::after { top: auto; bottom: 6px; margin: 0 -3px; }
.pd-heat__grid.is-play .pd-heat__c { animation: pd-heat-in 0.22s ease-out backwards; animation-delay: var(--dl, 0ms); }
.pd-heat__c.is-new { animation: pd-heat-in 0.3s ease-out; }
@keyframes pd-heat-in { from { opacity: 0; } }

/* 범례 = 보이는 기간의 범위 막대(최저~평균~최고)와 현재가 위치. 라벨은 body의 overflow-wrap:anywhere를 끊어 한 줄로 둔다. */
.pd-heat__legend { min-width: 0; }
.pd-heat__scale { position: relative; padding-top: 28px; }
.pd-heat__pin { position: absolute; inset: 0 0 auto 0; height: 28px; pointer-events: none; }
.pd-heat__pin-t { position: absolute; top: 0; left: calc(var(--p) * 100%); transform: translateX(calc(var(--p) * -100%)); font-size: 12px; font-weight: 800; white-space: nowrap; overflow-wrap: normal; }
.pd-heat__pin svg { position: absolute; bottom: 3px; left: clamp(6px, calc(var(--p) * 100%), calc(100% - 6px)); width: 12px; height: 8px; transform: translateX(-50%); fill: var(--pd-ink); }
.pd-heat__bar { height: 10px; border-radius: 999px; }
.pd-heat__tick { position: absolute; top: 25px; left: calc(var(--p) * 100%); width: 2px; height: 16px; margin-left: -1px; border-radius: 1px; background: var(--pd-ink); opacity: 0.55; }
.pd-heat__labels { position: relative; height: 32px; margin-top: 6px; }
.pd-heat__labels.is-two { height: 58px; }
.pd-heat__label { position: absolute; top: 0; left: calc(var(--p) * 100%); transform: translateX(calc(var(--p) * -100%)); text-align: center; font-size: 12px; font-weight: 800; line-height: 1.35; white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
.pd-heat__label i { display: block; font-size: 11px; font-style: normal; font-weight: 600; color: var(--pd-ink-3); }
.pd-heat__label.is-low2 { top: 26px; }
.pd-heat__flat { font-size: 14px; font-weight: 700; color: var(--pd-ink-2); }
.pd-heat__keys { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12px; color: var(--pd-ink-3); }
.pd-heat__keys i { position: relative; display: inline-block; width: 12px; height: 12px; margin-right: 5px; border-radius: 3px; vertical-align: -2px; }
.pd-heat__keys .k-none { border: 1px dashed var(--pd-line-strong); }
.pd-heat__keys .k-today { background: var(--pd-heat-3); box-shadow: inset 0 0 0 2px var(--pd-ink); }
.pd-heat__keys .k-dip { background: var(--pd-heat-2); }
.pd-heat__keys .k-dip::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: var(--pd-ink); }

.pd-heat-side__title { margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--pd-ink-3); }
.pd-heat-side__spark { display: block; width: 100%; height: 44px; overflow: visible; touch-action: pan-y; }
.pd-heat-side__spark .s-line { fill: none; stroke: var(--pd-ink-2); stroke-width: 1.6; stroke-linejoin: round; }
.pd-heat-side__spark .s-avg { stroke: var(--pd-ink-3); stroke-dasharray: 3 3; opacity: 0.6; }
.pd-heat-side__spark .s-avg-t { fill: var(--pd-ink-3); font-family: var(--pd-font); font-size: 10px; }
.pd-heat-side__spark .s-cursor { stroke: var(--pd-brand); stroke-width: 1.5; }
.pd-heat-side__spark .s-now { stroke: var(--pd-ink); stroke-width: 1.5; }
.pd-heat-side__axis { display: flex; justify-content: space-between; margin-top: 3px; font-size: 11px; color: var(--pd-ink-3); }
.pd-heat-side__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pd-line); }
.pd-heat-side__stats span, .pd-heat-side__stats small { display: block; overflow: hidden; font-size: 11.5px; color: var(--pd-ink-3); text-overflow: ellipsis; white-space: nowrap; }
.pd-heat-side__stats b { display: block; font-size: 15px; font-weight: 900; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-heat-side__deals { display: none; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--pd-line); }
.pd-heat-side__deals h3 { margin-bottom: 8px; font-size: 12.5px; font-weight: 800; color: var(--pd-ink-2); }
.pd-heat-side__deals h3 small { font-weight: 600; color: var(--pd-ink-3); }
.pd-heat-side__deals div { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-heat__chip { min-height: 30px; padding: 0 10px; border: 1px solid #ebc3bb; border-radius: 999px; background: #fdf1ee; color: #8e2b2f; font-size: 12px; font-weight: 800; }
.pd-heat__chip:hover { background: #fbe1db; }
.pd-heat__tip { position: absolute; z-index: 40; left: 0; top: 0; max-width: calc(100% - 16px); padding: 6px 10px; border-radius: 8px; background: var(--pd-ink); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.4; pointer-events: none; opacity: 0; transition: opacity 150ms ease-out; } /* 툴팁 등장: transitions.dev --duration-quick · --ease-out */
.pd-heat__tip.is-on { opacity: 1; }
.pd-heat__empty { padding: 16px; border: 1px dashed var(--pd-line-strong); border-radius: var(--pd-radius); background: var(--pd-surface); font-size: 14px; color: var(--pd-ink-2); }

/* 배치(본문 폭 기준): 820px 미만은 달력 → 흐름·통계 → 기간표로 쌓고,
   820~999px은 달력을 위 전체 폭에 두고 그 아래 [흐름·통계 | 기간표], 1000px 이상은 왼쪽 달력과 오른쪽 [흐름·통계 / 기간표]. */
/* 배치(본문 폭 기준, coff와 같은 문법): 760px 미만은 달력 → 범례 → 흐름·통계로 쌓고, 760px 이상은 왼쪽 [달력/범례] · 오른쪽 272px [흐름·통계·하루 특가]. */
.pd-heat__body { display: grid; gap: 16px; grid-template-areas: "hm" "lg" "side"; }
.pd-heat__wrap { grid-area: hm; }
.pd-heat__legend { grid-area: lg; }
.pd-heat-side { grid-area: side; min-width: 0; padding-top: 14px; border-top: 1px solid var(--pd-line); }
@container pd-main (min-width: 560px) and (max-width: 759px) {
  .pd-heat-side__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container pd-main (min-width: 760px) {
  .pd-heat__body { grid-template-columns: minmax(0, 1fr) 272px; gap: 18px 28px; grid-template-areas: "hm side" "lg side"; }
  .pd-heat-side { padding-top: 0; border-top: 0; }
  .pd-heat-side__deals.is-on { display: block; }
}

/* =====================================================================
   202610c — 상품 의견 (inc/theme-opinions.php · page-opinions.php)
   ===================================================================== */
.pd-opinions .pd-sec-head { margin-bottom: 8px; }
.pd-opinions__sort { display: flex; justify-content: flex-end; margin: -6px 0 4px; }
.pd-opinions__sort .pd-chips { margin: 0; }
.pd-opinions__sort .pd-chip { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.pd-opinions__empty { margin-top: 8px; padding: 16px; border: 1px dashed var(--pd-line-strong); border-radius: var(--pd-radius); background: var(--pd-surface); font-size: 14px; color: var(--pd-ink-2); }
.pd-op-list, .pd-op-list .children { margin: 0; padding: 0; list-style: none; }
.pd-op-list { margin-top: 8px; padding: 0 16px; background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: var(--pd-radius); }
.pd-op { padding: 14px 0; border-top: 1px solid var(--pd-line); }
.pd-op-list > .pd-op:first-child { border-top: 0; }
.pd-op-list .children { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--pd-line); }
.pd-op-list .children .pd-op { padding: 10px 0 4px; }
.pd-op-list .children > .pd-op:first-child { border-top: 0; padding-top: 0; }
.pd-op__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; }
.pd-op__author { font-weight: 800; color: var(--pd-ink); }
.pd-op__date { color: var(--pd-ink-3); }
.pd-op__reply-mark { padding: 0 7px; border-radius: 999px; background: var(--pd-muted-soft); font-size: 11.5px; font-weight: 700; color: var(--pd-ink-2); }
.pd-op__vote { display: inline-flex; gap: 4px; margin-left: auto; }
.pd-op__vote-btn { display: inline-flex; align-items: center; gap: 4px; min-width: 44px; min-height: 32px; padding: 0 10px; border: 1px solid var(--pd-line-strong); border-radius: 999px; background: var(--pd-surface); font-size: 12px; color: var(--pd-ink-2); }
.pd-op__vote-btn b { font-weight: 800; font-variant-numeric: tabular-nums; }
.pd-op__vote-btn:hover { border-color: var(--pd-ink-3); }
.pd-op__vote-btn[aria-pressed="true"] { border-color: var(--pd-brand-strong); background: var(--pd-brand-soft); color: var(--pd-brand-strong); }
.pd-op__body { margin-top: 6px; font-size: 15px; line-height: 1.65; color: var(--pd-ink); }
.pd-op__body p + p { margin-top: 6px; }
.pd-op__body a { color: var(--pd-brand-strong); text-decoration: underline; text-underline-offset: 2px; }
.pd-op__pending { margin-bottom: 4px; font-size: 12.5px; font-weight: 700; color: var(--pd-warn); }
.pd-op__deleted { padding: 4px 0; font-size: 13px; font-weight: 700; color: var(--pd-ink-2); }
.pd-op__actions { display: flex; gap: 14px; margin-top: 4px; }
.pd-op__actions a, .pd-op__del { display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 700; color: var(--pd-ink-3); text-decoration: underline; text-underline-offset: 2px; }
.pd-op__actions a:hover, .pd-op__del:hover { color: var(--pd-ink); }
.pd-op-del { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pd-op-del input { flex: 1 1 160px; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--pd-line-strong); border-radius: var(--pd-radius-sm); background: #fff; }
.pd-op-del button { min-height: 40px; padding: 0 14px; border: 1px solid var(--pd-line-strong); border-radius: var(--pd-radius-sm); background: var(--pd-surface); font-weight: 700; }
.pd-op-del .is-confirm { border-color: var(--pd-bad); background: var(--pd-bad); color: #fff; }
.pd-op-del__error { flex-basis: 100%; font-size: 12.5px; font-weight: 700; color: var(--pd-bad); }
.pd-opinions__pager { flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pd-pager__btn.is-current { border-color: var(--pd-ink); background: var(--pd-ink); color: #fff; }

/* 의견 작성 폼. 답글을 누르면 comment-reply.js가 이 상자를 해당 의견 아래로 옮긴다. */
.pd-op-respond { margin-top: 16px; padding: 18px; background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: var(--pd-radius); }
.pd-op-list .pd-op-respond { margin: 10px 0 4px; background: var(--pd-surface-2); }
.pd-op-form__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 17px; font-weight: 900; letter-spacing: -0.02em; }
.pd-op-form__title small a { font-size: 13px; font-weight: 700; color: var(--pd-ink-3); text-decoration: underline; text-underline-offset: 2px; }
.pd-op-form { display: grid; gap: 14px; margin-top: 12px; }
.pd-op-form > p, .pd-op-form > div { margin: 0; }
.pd-op-form__row { display: grid; gap: 14px; }
.pd-op-form__field { display: grid; gap: 6px; min-width: 0; }
.pd-op-form__field label { font-size: 13.5px; font-weight: 800; color: var(--pd-ink); }
.pd-op-form__field label small { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--pd-ink-3); }
.pd-op-form__req { color: var(--pd-bad); }
.pd-op-form input[type="text"], .pd-op-form input[type="password"], .pd-op-form textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--pd-line-strong); border-radius: 10px; background: #fff; font-size: 15px; }
.pd-op-form textarea { min-height: 120px; resize: vertical; }
.pd-op-form input::placeholder, .pd-op-form textarea::placeholder { color: var(--pd-ink-3); }
.pd-op-form input:focus-visible, .pd-op-form textarea:focus-visible { outline: 3px solid var(--pd-blue); outline-offset: 1px; border-color: var(--pd-blue); }
.pd-op-form__agree { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--pd-radius-sm); background: var(--pd-surface-2); font-size: 13px; line-height: 1.6; color: var(--pd-ink-2); }
.pd-op-form__agree input { flex-shrink: 0; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--pd-brand-strong); }
.pd-op-form__agree label { cursor: pointer; }
.pd-op-form__agree a { color: var(--pd-brand-strong); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.pd-op-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pd-op-form .form-submit { margin: 0; }
.pd-op-form__submit { width: 100%; min-height: 48px; padding: 0 28px; border: 0; border-radius: var(--pd-radius-sm); background: var(--pd-ink); color: #fff; font-size: 15px; font-weight: 800; }
.pd-op-form__submit:hover { background: #2c2f36; }
@container pd-main (min-width: 600px) {
  .pd-op-form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pd-op-form__submit { width: auto; }
}

/* 오른쪽 보조 정보: 최신 의견 */
.pd-rail__opinions li + li { border-top: 1px dashed var(--pd-line); }
.pd-rail__opinions a { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; }
.pd-rail__op-text { font-size: 13.5px; line-height: 1.45; color: var(--pd-ink); }
.pd-rail__opinions a:hover .pd-rail__op-text { color: var(--pd-brand-strong); }
.pd-rail__op-meta { overflow: hidden; font-size: 12px; color: var(--pd-ink-3); text-overflow: ellipsis; white-space: nowrap; }
.pd-rail__empty { font-size: 13px; color: var(--pd-ink-3); }

/* 모든 의견 페이지 */
.pd-op-feed { display: grid; gap: 12px; margin-top: 8px; }
.pd-op-card { display: grid; gap: 12px; padding: 16px; background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: var(--pd-radius); }
.pd-op-card__product { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px; border-radius: var(--pd-radius-sm); background: var(--pd-surface-2); }
.pd-op-card__product img { flex-shrink: 0; width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--pd-line); border-radius: 8px; background: #fff; }
.pd-op-card__product-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-op-card__name { display: -webkit-box; overflow: hidden; font-size: 14px; font-weight: 800; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pd-op-card__product:hover .pd-op-card__name { color: var(--pd-brand-strong); }
.pd-op-card__price { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; }
.pd-op-card__price .pd-badge { padding: 1px 7px; border-radius: 999px; font-size: 11px; }
.pd-op-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pd-op-card__body .pd-op__body { margin-top: 2px; }
.pd-op-card__more { align-self: flex-start; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--pd-brand-strong); text-decoration: underline; text-underline-offset: 2px; }
@container pd-main (min-width: 760px) {
  .pd-op-card { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
}

/* =====================================================================
   202610c — 상품 상세 coff 구조(2026-10-12): 히어로 · 구역 탭 · 상자 · 옵션 표 · 작은 카드 · 상품 정보 · 하단 구매 바 · 오른쪽 시세 탭
   레이아웃·컴포넌트 크기는 coff(coff-4.1.2.css)를 따르고 색은 petdeal 토큰만 쓴다.
   ===================================================================== */
.pd-product { display: block; }

/* 첫 화면: [사진 | 태그·제목·옵션·가격·단위가·판단·구매·즐겨찾기·고지] */
.pd-p-hero { display: grid; gap: 16px; margin-top: 10px; }
.pd-p-media { position: relative; justify-self: center; width: min(100%, 240px); }
.pd-p-img { display: block; width: 100%; aspect-ratio: 1 / 1; padding: 10px; object-fit: contain; background: #fff; border: 1px solid var(--pd-line); border-radius: 12px; }
.pd-p-img.is-empty { display: grid; place-items: center; color: var(--pd-ink-3); }
.pd-p-img.is-empty svg { width: 64px; height: 64px; }
.pd-p-media.is-sold-out .pd-p-img { opacity: 0.4; filter: grayscale(1); }
.pd-p-media__badge { position: absolute; left: 10px; top: 10px; padding: 3px 10px; border-radius: 999px; font-size: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.pd-p-soldout { position: absolute; left: 50%; top: 50%; padding: 4px 12px; border-radius: 999px; background: #2c2f36; color: #fff; font-size: 13px; font-weight: 800; transform: translate(-50%, -50%); }
.pd-p-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pd-p-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-p-tags a, .pd-p-tags span { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--pd-muted-soft); font-size: 12px; font-weight: 700; color: var(--pd-ink-2); }
.pd-p-tags a:hover { color: var(--pd-ink); }
.pd-p-title { font-size: 20px; font-weight: 800; line-height: 1.4; letter-spacing: -0.02em; }
.pd-p-opts { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.pd-p-opt { padding: 2px 10px; border: 1px solid var(--pd-line-strong); border-radius: 999px; font-weight: 700; color: var(--pd-ink-2); }
.pd-p-opt--more { border-color: transparent; background: var(--pd-brand-soft); color: var(--pd-brand-strong); text-decoration: underline; text-underline-offset: 2px; }
.pd-p-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pd-p-price b { font-size: 36px; font-weight: 900; line-height: 1.1; letter-spacing: -0.03em; }
.pd-p-price b small { margin-left: 2px; font-size: 20px; }
.pd-p-unit { font-size: 13px; color: var(--pd-ink-2); }

/* 판단 상자(coff .cf-verdict): 상태마다 배경·테두리·글자색만 바뀐다. */
.pd-verdict-box { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--vbd, var(--pd-line)); border-radius: 12px; background: var(--vbg, var(--pd-surface)); }
.pd-verdict-box > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-verdict-box b { font-size: 15.5px; font-weight: 800; color: var(--vfg, var(--pd-ink)); }
.pd-verdict-box > div > span { font-size: 13px; line-height: 1.55; color: var(--pd-ink-2); }
.pd-verdict-box__ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--vfg, var(--pd-ink-2)); color: #fff; font-size: 15px; font-weight: 800; }
.pd-verdict-box.is-good { --vbg: var(--pd-good-soft); --vbd: #b5dec9; --vfg: var(--pd-good); }
.pd-verdict-box.is-cheap { --vbg: var(--pd-teal-soft); --vbd: #a8d8da; --vfg: var(--pd-teal); }
.pd-verdict-box.is-drop { --vbg: var(--pd-blue-soft); --vbd: #bccff0; --vfg: var(--pd-blue); }
.pd-verdict-box.is-wait { --vbg: var(--pd-warn-soft); --vbd: #ecd9a6; --vfg: var(--pd-warn); }
.pd-verdict-box.is-off { --vbg: #f0eeea; --vbd: #d8d3cb; --vfg: #2c2f36; }
.pd-verdict-box.is-new { --vbg: var(--pd-brand-soft); --vbd: #f3c9a8; --vfg: var(--pd-brand-strong); }
.pd-verdict-box.is-flat { --vbg: var(--pd-muted-soft); --vbd: var(--pd-line-strong); --vfg: var(--pd-ink-2); }

/* 구매 버튼(coff .cf-cta) · 즐겨찾기 · 링크 복사 */
.pd-p-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-cta { flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 48px; padding: 0 16px; border-radius: 12px; background: var(--pd-cta); color: #fff; font-size: 15px; font-weight: 800; line-height: 1.3; text-align: center; transition: background 0.15s ease, transform 0.15s ease; }
.pd-cta:hover { background: #9a3412; }
.pd-cta:active { transform: scale(0.98); }
.pd-cta svg { flex-shrink: 0; width: 16px; height: 16px; }
.pd-cta__ad { flex-shrink: 0; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.28); font-size: 11px; font-weight: 700; line-height: 1.5; }
.pd-p-fav { flex: 1 1 auto; min-height: 48px; padding: 0 14px; border: 1px solid var(--pd-line-strong); border-radius: 12px; background: var(--pd-surface); font-size: 14px; font-weight: 800; color: var(--pd-ink-2); white-space: nowrap; }
.pd-p-fav.is-on { border-color: var(--pd-brand-strong); background: var(--pd-brand-soft); color: var(--pd-brand-strong); }
.pd-p-fav:hover { border-color: var(--pd-ink-3); }
.pd-p-disclosure { font-size: 12px; line-height: 1.5; color: var(--pd-ink-2); }
.pd-p-note { font-size: 12px; line-height: 1.5; color: var(--pd-ink-3); }
@container pd-main (min-width: 480px) {
  .pd-cta { flex: 1 1 auto; }
  .pd-p-fav { flex: none; }
}
@container pd-main (min-width: 640px) {
  .pd-p-hero { grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
  .pd-p-media { width: 100%; }
  .pd-p-title { font-size: 22px; }
}
@container pd-main (min-width: 900px) {
  .pd-p-hero { grid-template-columns: 320px minmax(0, 1fr); gap: 28px; }
}

/* 구역 탭: 밑줄형, 스크롤해도 위에 붙는다(모바일은 상단 바 56px 아래). */
.pd-p-tabs { position: sticky; top: 56px; z-index: 15; display: flex; gap: 2px; margin-top: 20px; padding: 0 4px; overflow-x: auto; background: var(--pd-bg); border-bottom: 1px solid var(--pd-line); scrollbar-width: none; }
.pd-p-tabs::-webkit-scrollbar { display: none; }
.pd-p-tabs a { flex-shrink: 0; margin-bottom: -1px; padding: 12px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 700; color: var(--pd-ink-3); white-space: nowrap; }
.pd-p-tabs a:hover { color: var(--pd-ink); }
.pd-p-tabs a[aria-current="true"] { border-color: var(--pd-brand); color: var(--pd-ink); }
.pd-product section[id] { scroll-margin-top: 112px; }
@media (min-width: 1024px) {
  .pd-p-tabs { top: 0; }
  .pd-product section[id] { scroll-margin-top: 56px; }
}

/* 상자(coff .cf-box)와 머리줄 */
.pd-box { position: relative; margin-top: 16px; padding: 18px; background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: 12px; }
.pd-box__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 12px; }
.pd-box__head h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.pd-box__head h2 small { font-size: 13px; font-weight: 700; color: var(--pd-ink-3); }
.pd-box__sub { font-size: 12.5px; color: var(--pd-ink-3); }
.pd-box__more { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--pd-brand-strong); white-space: nowrap; }
.pd-box__more:hover { text-decoration: underline; }
.pd-box__head .pd-period { margin-left: auto; }
.pd-psection { margin-top: 24px; }
.pd-pgrid + .pd-box__head--bare { margin-top: 22px; }
.pd-period { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--pd-muted-soft); }
.pd-period button { min-height: 30px; padding: 0 13px; border: 0; border-radius: 999px; background: none; font-size: 13px; font-weight: 700; color: var(--pd-ink-2); }
.pd-period button[aria-pressed="true"] { background: var(--pd-ink); color: #fff; }

/* 표: 기간별 최저·최고, 옵션별 가격 */
.pd-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pd-table caption { padding-bottom: 6px; text-align: left; font-size: 12.5px; font-weight: 700; color: var(--pd-ink-2); }
.pd-table th { padding: 8px 6px; border-bottom: 1px solid var(--pd-line); font-size: 12px; font-weight: 700; color: var(--pd-ink-3); text-align: right; }
.pd-table td { padding: 9px 6px; border-bottom: 1px solid var(--pd-line); text-align: right; font-variant-numeric: tabular-nums; }
.pd-table th:first-child, .pd-table td:first-child { text-align: left; }
.pd-table tbody tr:last-child th, .pd-table tbody tr:last-child td { border-bottom: 0; }
.pd-opt th { padding: 10px 12px; background: var(--pd-surface-2); }
.pd-opt td { padding: 12px; text-align: left; vertical-align: middle; }
.pd-opt th:not(:first-child) { text-align: left; }
.pd-opt tr.is-cur td { background: var(--pd-brand-soft); }
.pd-opt__n a { font-weight: 700; color: var(--pd-ink); text-decoration: underline; text-decoration-color: var(--pd-line-strong); text-underline-offset: 3px; }
.pd-opt__n a:hover { color: var(--pd-brand-strong); }
.pd-opt__cur { margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--pd-cta); color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; }
.pd-opt td.pd-opt__p { font-size: 15px; font-weight: 800; white-space: nowrap; }
.pd-opt td.pd-opt__u { color: var(--pd-ink-2); white-space: nowrap; }
.pd-opt .pd-badge { border-radius: 999px; font-size: 11.5px; }
.pd-opt__note { margin-top: 8px; font-size: 12px; color: var(--pd-ink-3); }
.pd-strip { display: inline-flex; gap: 2px; vertical-align: middle; }
.pd-strip i { width: 12px; height: 12px; border-radius: 3px; background: var(--pd-heat-3); }
.pd-strip .l1 { background: var(--pd-heat-1); }
.pd-strip .l2 { background: var(--pd-heat-2); }
.pd-strip .l4 { background: var(--pd-heat-4); }
.pd-strip .l5 { background: var(--pd-heat-5); }
@container pd-main (max-width: 639px) {
  .pd-opt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pd-opt, .pd-opt tbody { display: block; }
  .pd-opt tr { display: grid; grid-template-columns: auto auto minmax(max-content, 1fr); grid-template-areas: "name name pr" "strip sig un"; gap: 8px 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--pd-line); }
  .pd-opt tr:first-child { border-top: 0; }
  .pd-opt tr.is-cur { margin: 0 -10px; padding: 12px 10px; border-radius: 10px; background: var(--pd-brand-soft); }
  .pd-opt td { display: block; padding: 0; border: 0; background: none !important; }
  .pd-opt td.pd-opt__n { grid-area: name; }
  .pd-opt td.pd-opt__p { grid-area: pr; text-align: right; }
  .pd-opt td.pd-opt__u { grid-area: un; font-size: 12px; text-align: right; }
  .pd-opt td.pd-opt__s { grid-area: strip; }
  .pd-opt td.pd-opt__g { grid-area: sig; }
}

/* 작은 상품 카드(coff 카드): 비슷한 상품·같은 브랜드·즐겨찾기 페이지. 별 단추는 링크 밖에 두고 사진 위에 얹는다. */
.pd-pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container pd-main (min-width: 640px) { .pd-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.pd-pcard { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.pd-pcard:hover { border-color: var(--pd-line-strong); box-shadow: var(--pd-shadow); }
.pd-pcard--near-low { border-color: #b5dec9; }
.pd-pcard__link { display: flex; flex: 1; flex-direction: column; gap: 3px; padding: 8px 8px 10px; }
.pd-pcard__media { position: relative; display: block; margin-bottom: 5px; }
.pd-pcard__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 8px; background: #fff; }
.pd-pcard__media .pd-badge { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); overflow: hidden; padding: 2px 7px; border-radius: 999px; font-size: 12px; text-overflow: ellipsis; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.pd-pcard__name { display: -webkit-box; min-height: 2.76em; overflow: hidden; font-size: 13px; font-weight: 700; line-height: 1.38; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pd-pcard__link:hover .pd-pcard__name { color: var(--pd-brand-strong); }
.pd-pcard__opt { overflow: hidden; font-size: 11.5px; color: var(--pd-ink-3); text-overflow: ellipsis; white-space: nowrap; }
.pd-pcard__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin-top: auto; padding-top: 2px; }
.pd-pcard__price b { font-size: 16px; font-weight: 900; letter-spacing: -0.03em; }
.pd-pcard__price b small { margin-left: 1px; font-size: 12px; font-weight: 700; }
.pd-pcard__price b.is-none { font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--pd-ink-3); }
.pd-pcard__price em { font-size: 12.5px; font-style: normal; font-weight: 800; color: var(--pd-down); }
.pd-pcard__unit { font-size: 11.5px; color: var(--pd-ink-2); }
.pd-pcard__fav { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); font-size: 17px; line-height: 1; color: var(--pd-ink-3); }
.pd-pcard__fav.is-on { color: #c77700; }
.pd-store-empty { grid-column: 1 / -1; padding: 28px 16px; border: 1px dashed var(--pd-line-strong); border-radius: 12px; background: var(--pd-surface); text-align: center; font-size: 14px; color: var(--pd-ink-3); }

/* 상세 끝 짧은 문단: 가이드 연결 · 정보 기준 · '펫딜'과 무관 안내 · 정정 요청(필수 요소, coff 하단 고지 자리) */
.pd-p-foot { display: grid; gap: 6px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--pd-line); font-size: 12.5px; line-height: 1.6; color: var(--pd-ink-3); }
.pd-p-foot a { font-weight: 700; color: var(--pd-ink-2); text-decoration: underline; text-underline-offset: 2px; }
.pd-p-foot a:hover { color: var(--pd-brand-strong); }
.pd-p-foot__links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pd-p-foot__guide { font-size: 13px; color: var(--pd-ink-2); }
/* 의견을 상자 안에 둘 때: 목록 테두리를 빼고 폼은 구분선 아래에 둔다(coff 의견 구역 모양). */
.pd-box.pd-opinions .pd-op-list { margin-top: 4px; padding: 0; border: 0; background: none; }
.pd-box .pd-op-respond { margin-top: 18px; padding: 18px 0 0; border: 0; border-top: 1px solid var(--pd-line); border-radius: 0; background: none; }
.pd-box .pd-op-list .pd-op-respond { padding: 14px; border: 1px solid var(--pd-line); border-radius: 12px; background: var(--pd-surface-2); }

/* 하단 고정 구매 바(coff .cf-buybar): 본문 끝에 두고 sticky로 화면 아래에 붙인다. 좁은 화면은 본문 여백까지 꽉 채운다. */
.pd-buybar { position: sticky; bottom: 0; z-index: 25; margin: 16px calc(-1 * var(--pd-pad)) 0; padding: 8px var(--pd-pad) 6px; background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--pd-line); box-shadow: 0 -6px 20px rgba(23, 25, 30, 0.07); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pd-buybar__row { display: flex; align-items: center; gap: 12px; }
.pd-buybar__price { display: flex; flex-direction: column; min-width: 0; }
.pd-buybar__price b { font-size: 18px; font-weight: 900; line-height: 1.25; white-space: nowrap; }
.pd-buybar__price span { overflow: hidden; font-size: 12px; color: var(--pd-ink-2); text-overflow: ellipsis; white-space: nowrap; }
.pd-buybar .pd-cta { flex: 1 1 auto; min-height: 44px; padding: 0 12px; font-size: 14px; white-space: nowrap; }
.pd-buybar__note { margin-top: 4px; text-align: center; font-size: 11px; line-height: 1.35; color: var(--pd-ink-3); }
/* 의견 폼에 입력하는 동안은 구매 바를 감추고, 포커스로 스크롤될 때 바 높이만큼 여유를 둔다(모바일 키보드와 겹침 방지). */
html:has(.pd-buybar) { scroll-padding-bottom: 104px; }
.pd-wrap:has(.pd-op-form :focus) > .pd-buybar { visibility: hidden; }
@media (min-width: 1024px) {
  .pd-buybar { margin: 16px 0 0; padding: 8px 16px 6px; border: 1px solid var(--pd-line); border-bottom: 0; border-radius: 12px 12px 0 0; }
}

/* 오른쪽 시세 탭(coff aside): 하락률·저점·즐겨찾기·최근 본 */
.pd-rail__box.pd-side { padding: 12px; }
.pd-side__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-bottom: 6px; padding: 3px; border-radius: 999px; background: var(--pd-muted-soft); }
.pd-side__tabs button { min-height: 32px; padding: 0 2px; border: 0; border-radius: 999px; background: none; font-size: 12.5px; font-weight: 700; color: var(--pd-ink-2); white-space: nowrap; }
.pd-side__tabs button[aria-selected="true"] { background: var(--pd-ink); color: #fff; }
.pd-side__panel[hidden] { display: none; }
.pd-side__panel:focus-visible { outline-offset: 2px; }
.pd-mini-list { margin: 0; padding: 0; list-style: none; }
.pd-mini { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 8px; }
.pd-mini:hover { background: var(--pd-surface-2); }
.pd-mini__rank { flex-shrink: 0; width: 14px; text-align: center; font-size: 12px; font-weight: 800; color: var(--pd-brand-strong); }
.pd-mini__thumb { flex-shrink: 0; width: 40px; height: 40px; object-fit: contain; border: 1px solid var(--pd-line); border-radius: 8px; background: #fff; }
.pd-mini__body { display: flex; flex-direction: column; min-width: 0; }
.pd-mini__name { overflow: hidden; font-size: 12.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pd-mini__price { font-size: 12px; color: var(--pd-ink-2); }
.pd-mini__price b { font-weight: 800; color: var(--pd-down); }
.pd-rail__basis { font-size: 11.5px; color: var(--pd-ink-3); }
.pd-side__empty { padding: 14px 6px; text-align: center; font-size: 12.5px; color: var(--pd-ink-3); }
.pd-side__more { display: block; margin-top: 4px; padding: 4px; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--pd-ink-3); }
.pd-side__more:hover { color: var(--pd-brand-strong); }