@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

:root {
  /* "Editorial Trust" design system (2026-07 handoff): JQPick reads as a
     purchase-decision report, not a storefront — warm paper background,
     charcoal ink text, a single restrained green accent for links/CTAs/
     labels, and a brown accent reserved for secondary/caution notes only.
     No red/orange/yellow "urgency" colors anywhere. Values below are the
     oklch spec converted to the nearest widely-supported sRGB hex so this
     file works without an oklch-capable browser fallback chain; the actual
     hue relationships (equal chroma, green vs. brown hue only) are
     preserved from the handoff. Variable NAMES are kept stable from the
     prior "premium editorial" palette so every existing rule/class below
     (and every Python-rendered class name) keeps resolving unchanged —
     only the values moved. See docs/ARCHITECTURE.md for prior rationale;
     this supersedes the "terracotta CTA" choice specifically (see --cta). */
  --bg: #f3f1ea;
  --bg-surface: #f8f7f2;
  --card: #fdfcfa;
  --bg-trust: #ece9e0;
  --bg-footer: #2c2924;
  --text: #2c2924;
  --muted: #6a655c;
  --text-tertiary: #837d72;
  --text-on-dark: #d9d5cb;
  --line: rgba(38, 35, 32, .10);
  --line-strong: rgba(38, 35, 32, .15);
  --primary: #3a6a53;
  --primary-soft: #e5efe7;
  --primary-dark: #234433;
  --cta: #3a6a53;
  --cta-soft: #e5efe7;
  --cta-dark: #234433;
  --success: #2f6b46;
  --success-soft: #e9f3ec;
  --warning: #93590a;
  --warning-soft: #fbf1de;
  --danger: #a33d2e;
  --danger-soft: #f8ebe7;
  --accent: #3a6a53;
  --accent-soft: #e5efe7;
  --accent-brown: #8a5a34;
  --accent-brown-soft: #f1e7db;
  --shadow: 0 4px 24px rgba(38, 35, 32, .12);
  --shadow-sm: 0 1px 3px rgba(38, 35, 32, .06);
  --shadow-hover: 0 6px 18px rgba(38, 35, 32, .08);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 12px;
  --radius-pill: 999px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Noto Sans KR", sans-serif;
  background: var(--bg);
  color: var(--text);
  word-break: keep-all;
  overflow-wrap: break-word;
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible {
  outline: 3px solid rgba(53,89,79,.35);
  outline-offset: 2px;
}
.shell {
  width: min(1160px, calc(100% - 28px));
  margin: 0 auto;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(230, 225, 214, .9);
  background: rgba(250,248,243,.92);
  backdrop-filter: blur(14px);
}
.nav {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  /* Positioned ancestor for .nav-toggle-input (position:absolute, no
     top/left) at every width — without this, the hidden checkbox falls
     back to the initial containing block and can widen scrollWidth past
     the viewport on desktop. Pre-existing bug from the 2026-07 redesign,
     fixed here (0px horizontal overflow is a hard requirement this sprint). */
  position: relative;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.15rem;
  font-weight: 900;
  text-decoration: none;
  letter-spacing: -.03em;
  flex-shrink: 0;
}
.brand-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
}
/* Editorial Trust spec: brand mark carries a small brown dot at its
   top-right corner — the only place the two accent hues sit side by side. */
.brand-mark::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-brown);
  border: 1.5px solid var(--bg-surface);
}
.nav-note { color: var(--muted); font-size: .9rem; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  font-size: .92rem;
  font-weight: 500;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav-links a {
  text-decoration: none;
  color: var(--text);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover,
.nav-links a:focus-visible { color: var(--primary); border-bottom-color: var(--primary); }
.nav-links a.is-current { font-weight: 700; color: var(--primary); border-bottom-color: var(--primary); }
.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--primary);
  color: var(--primary);
  background: transparent;
  font-weight: 700;
  font-size: .86rem;
  text-decoration: none;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}
.nav-cta:hover, .nav-cta:focus-visible { background: var(--primary); color: #fff; }
@media (max-width: 640px) { .nav-cta { display: none; } }

/* Mobile nav: pure CSS checkbox toggle so the menu works with JavaScript
   fully disabled. Hidden entirely above the mobile breakpoint. */
.nav-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle-btn:hover { background: var(--primary-soft); }
.nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  position: relative;
  transition: transform .15s ease, opacity .15s ease;
}
.nav-toggle-icon::before { content: ""; position: absolute; top: -6px; }
.nav-toggle-icon::after { content: ""; position: absolute; top: 6px; }

/* Category quickbar: header와 hero 사이 가로 카테고리 바 (Design.dc.html §1).
   registry 기반이라 빈 카테고리는 절대 노출되지 않는다. */
.category-quickbar {
  background: var(--card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.quickbar-track {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 16px 48px;
  overflow-x: auto;
  scrollbar-width: none;
}
.quickbar-track::-webkit-scrollbar { display: none; }
.quickbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex: none;
  text-decoration: none;
  color: var(--text);
  scroll-snap-align: start;
}
.quickbar-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.quickbar-tint-a { background: var(--primary-soft); }
.quickbar-tint-b { background: var(--accent-brown-soft); }
.quickbar-icon-more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-weight: 600;
  font-size: .8rem;
}
.quickbar-label {
  font-size: .72rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .quickbar-track { padding: 14px 16px; gap: 18px; scroll-snap-type: x proximity; }
  .quickbar-icon { width: 38px; height: 38px; }
  .quickbar-label { font-size: .68rem; }
}

.hero {
  padding: 28px 0 18px;
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(180px, .7fr);
  gap: 22px;
  align-items: center;
}
.hero-card, .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.hero-card { padding: 26px 28px; }
/* Conclusion Box — spec §5: top-of-page 두괄식 box, green tint background
   (never a left-border accent), pill "결론" label above the headline,
   product name inside the conclusion sentence stays whatever <b> the
   copy already uses. Applied by adding this one class alongside the
   existing "card" class on render_conclusion's wrapping <section> across
   every compare-page builder — no other markup change needed. */
.conclusion-box {
  background: var(--accent-soft);
  border: 1px solid color-mix(in oklch, var(--primary) 30%, transparent);
  box-shadow: none;
}
.conclusion-box::before {
  content: "결론";
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .02em;
  margin-bottom: 10px;
}
.conclusion-box .eyebrow { margin-left: 10px; background: #fff; color: var(--primary); border: 1px solid color-mix(in oklch, var(--primary) 35%, transparent); }
.conclusion-box .lead { color: var(--text); font-size: 15px; line-height: 1.75; max-width: none; }
/* "필형" pill badge — solid accent fill + white text, per spec used for
   report-number labels, category tags, conclusion labels. Product
   recommendation badges use the separate outline .badge-outline instead
   (see below) — never this filled style, to keep visual weight low on
   product cards. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .02em;
}
h1 {
  margin: 14px 0 10px;
  font-size: clamp(1.65rem, 4.4vw, 2.875rem);
  line-height: 1.35;
  letter-spacing: -.02em;
  font-weight: 800;
}
h2 { margin: 0 0 16px; letter-spacing: -.015em; font-size: clamp(1.15rem, 2.4vw, 1.4375rem); line-height: 1.3; font-weight: 800; }
h3 { margin: 0 0 8px; letter-spacing: -.01em; font-weight: 700; font-size: 1.0625rem; line-height: 1.4; }
.lead {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.7;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.hero-trust-line {
  margin-top: 14px;
  color: var(--muted);
  font-weight: 500;
  font-size: .81rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: .93rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.btn-primary { background: var(--cta); color: var(--cta-text, #fff); }
.btn-primary:hover { background: var(--cta-dark); }
.btn-ghost { background: #efece2; color: var(--text); }
.btn-ghost:hover { background: var(--line-strong); }
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--primary);
  color: var(--primary);
}
.btn-outline:hover, .btn-outline:focus-visible { background: var(--primary); color: #fff; }

.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  min-height: 120px;
}
.hero-visual svg { width: 100%; height: auto; max-height: 140px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Homepage search entry (spec: mobile first screen must include a natural
   search entry point). Plain-text substring filter over the registry-driven
   search-index.json — a real, small feature, not a stub. */
.site-search { position: relative; margin-top: 18px; max-width: 420px; }
.site-search-input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: .95rem;
}
.site-search-input:focus-visible { outline: 2px solid rgba(53,89,79,.35); outline-offset: 1px; }
.site-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 20;
  display: none;
}
.site-search-results.is-open { display: block; }
.site-search-results a {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.site-search-results a:last-child { border-bottom: 0; }
.site-search-results a:hover, .site-search-results a:focus-visible { background: var(--primary-soft); }
.site-search-results .result-type { display: block; font-size: .74rem; color: var(--muted); font-weight: 700; }
.site-search-empty { padding: 12px 14px; color: var(--muted); font-size: .86rem; }

.section {
  padding: 40px 0;
}
@media (min-width: 901px) { .section { padding: 56px 0; } }
.section-head {
  max-width: 620px;
  margin: 0 0 22px;
}
.section-head p { margin: 8px 0 0; color: var(--muted); line-height: 1.7; }

.grid {
  display: grid;
  gap: 18px;
}
@media (max-width: 640px) {
  /* .grid의 열 개수는 페이지마다 inline style로 다르게 지정되므로(2/3열
     등), 모바일에서는 항상 1열로 강제 오버라이드한다 — 그렇지 않으면
     3열 카드가 390px 폭에서 극단적으로 눌려 텍스트가 잘린다. */
  .grid { grid-template-columns: 1fr !important; }
}
.tool-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tool-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.tool-card:hover, .tool-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); }
.tool-card-top { display: flex; align-items: center; gap: 12px; }
.tool-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
}
.tool-card h3 { font-size: 1.12rem; }
.tool-card p { margin: 0; color: var(--muted); line-height: 1.6; font-size: .94rem; }
.tool-card-meta {
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: .82rem;
  color: var(--muted);
}
.tool-card-meta b { color: var(--text); font-weight: 700; }
.tool-card-cta { color: var(--primary); font-weight: 800; font-size: .92rem; }
.status-pill {
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  font-size: .74rem;
  font-weight: 800;
}

.soon-pill {
  padding: 8px 14px;
  border-radius: 999px;
  background: #f1ede2;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 700;
}

.why-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.why-card {
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary);
  margin-bottom: 12px;
}
.why-card h3 { font-size: 1rem; }
.why-card p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.6; }

/* Category Card — spec §5: compact, near-square, simple-shape icon on a
   10%-tint accent background + category name + report count. Distinct
   from the homepage's larger image-based "카테고리 탐색" cards
   (.category-explore-card, which keep their real product photography and
   single-link/img-per-card structure that web/tests/test_homepage_content.py
   already enforces) — this lighter card is used for the plain /categories/
   index listing grid, where a dense browse-everything view matters more
   than photography. Icon is a pure-CSS tinted rounded square (no image
   dependency, never broken/missing). */
.category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.category-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease;
}
.category-card:hover, .category-card:focus-visible { box-shadow: var(--shadow-hover); }
.category-card::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  margin-bottom: 8px;
}
.category-card h3 { font-size: .96rem; margin: 0; }
.category-card > p { margin: 2px 0 0; color: var(--text-tertiary, var(--muted)); font-size: .78rem; }
@media (min-width: 901px) { .category-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 640px) { .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .category-card { padding: 14px; } .category-card::before { width: 30px; height: 30px; } }
.category-links {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.category-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  text-decoration: none;
  font-weight: 800;
  font-size: .9rem;
}
.category-links a:hover, .category-links a:focus-visible { background: #dbe9e3; }
.category-soon {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

/* Homepage "카테고리 탐색" image cards (2026-07 category-image-cards sprint).
   Layout reacts to how many published categories exist — never hardcoded
   per page, driven by one modifier class the builder assigns based on
   count: is-feature (1) / is-double (2) / is-grid (3+). */
.category-explore {
  display: grid;
  gap: 20px;
}
.category-explore-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease, transform .15s ease;
}
.category-explore-card:hover { box-shadow: var(--shadow); }
.category-explore-card:focus-visible {
  outline: 2px solid rgba(53,89,79,.45);
  outline-offset: 2px;
}
.category-explore-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--primary-soft);
  overflow: hidden;
}
.category-explore-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.category-explore-body { padding: 22px 24px 26px; }
.category-explore-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .02em;
  margin-bottom: 10px;
}
.category-explore-body h3 { font-size: 1.3rem; margin: 0 0 8px; }
.category-explore-body p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.65;
  max-width: 52ch;
}
.category-explore-cta { color: var(--primary); font-weight: 800; font-size: .92rem; }

/* 1 category: wide feature card, image and text side by side on desktop */
.category-explore.is-feature .category-explore-card { flex-direction: row; align-items: stretch; }
.category-explore.is-feature .category-explore-img-wrap {
  width: 56%;
  aspect-ratio: auto;
  flex-shrink: 0;
}
.category-explore.is-feature .category-explore-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 40px;
}
.category-explore.is-feature .category-explore-body h3 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.category-explore.is-feature .category-explore-body p { font-size: 1rem; max-width: 44ch; }

/* 2 categories: two columns on desktop/tablet */
.category-explore.is-double { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 3+ categories: grid, capped at 3 columns even on very wide screens */
.category-explore.is-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .category-explore.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .category-explore.is-feature .category-explore-card { flex-direction: column; }
  .category-explore.is-feature .category-explore-img-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .category-explore.is-feature .category-explore-body { padding: 22px 24px 26px; }
}
@media (max-width: 640px) {
  .category-explore.is-double,
  .category-explore.is-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .category-explore-card { transition: none; }
}

/* 이번 주 랭킹 numbered list (Design.dc.html §1 "이번 주 인기 랭킹") — 실제
   클릭/조회 데이터가 미미해 total_score 기준 실제 계산값으로 정렬한다. */
.ranking-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.ranking-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.ranking-row:last-child { border-bottom: 0; }
.ranking-row:hover { background: var(--bg-surface); }
.ranking-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--primary);
  width: 26px;
  flex-shrink: 0;
}
.ranking-img.product-img-wrap { width: 48px; height: 48px; flex-shrink: 0; border-radius: 8px; }
.ranking-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ranking-name { font-weight: 700; font-size: .92rem; color: var(--text); }
.ranking-meta { font-size: .8rem; color: var(--muted); }
.ranking-price { font-weight: 700; font-size: .98rem; color: var(--text); flex-shrink: 0; }

/* 방법론 섹션 "JQPick은 이렇게 비교합니다" (Design.dc.html §1) */
.methodology-section { background: var(--bg-trust); }
.methodology-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-top: 36px;
  text-align: left;
}
.methodology-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--primary); }
.methodology-icon.is-round { border-radius: 50%; background: var(--accent-brown); }
.methodology-grid h4 { margin: 14px 0 6px; font-size: .92rem; font-weight: 700; }
.methodology-grid p { margin: 0; font-size: .84rem; line-height: 1.6; color: var(--muted); }
@media (max-width: 720px) {
  .methodology-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

/* 인기 구매가이드 2x2 (실제 가이드 개수만큼만, 부족하면 부족한 대로) */
.guide-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.guide-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease;
}
.guide-list-item:hover { box-shadow: var(--shadow-hover); }
.guide-list-text { flex: 1; min-width: 0; }
.guide-list-text h3 { font-size: .95rem; margin: 0; }
.guide-list-text p { margin: 3px 0 0; font-size: .81rem; color: var(--muted); }
.guide-list-arrow { color: var(--primary); font-weight: 700; }
@media (max-width: 640px) { .guide-list-grid { grid-template-columns: 1fr; } }

/* Editorial concept mark (2026-08-01 visual-density fix): guides and
   insights are auto-published explainers with no product photo of their
   own, so their cards used to be pure text next to image-bearing comparison
   cards. This is a decorative, deterministic-per-article abstract mark —
   never a stand-in for a real product photo. See
   builder.render_editorial_mark(). */
.editorial-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, #fbfaf6 0%, #f1ede2 100%);
  border: 1px solid var(--line);
}
.editorial-mark svg { width: 40px; height: 40px; display: block; }
/* The homepage guide rows keep their tighter 44px footprint. */
.editorial-mark.guide-list-icon { width: 44px; height: 44px; border-radius: 10px; }
.editorial-mark.guide-list-icon svg { width: 28px; height: 28px; }
@media (max-width: 640px) {
  .editorial-mark { width: 52px; height: 52px; }
  .editorial-mark svg { width: 32px; height: 32px; }
}

/* 스펙 비교표 (Design.dc.html §2 "스펙 비교표"): 데스크톱은 표, 모바일은
   .mobile-compare-cards로 전환한다 — 표를 강제로 좁히면 텍스트가 잘리므로
   .table-wrap에 가로 스크롤을 격리해 페이지 전체 overflow를 막는다. */
.table-wrap { overflow-x: auto; }
.table-wrap table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--card);
}
.table-wrap th, .table-wrap td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  font-size: .86rem;
  text-align: center;
  white-space: nowrap;
}
.table-wrap thead th { background: var(--bg-surface); font-weight: 700; color: var(--text); border-bottom: 1px solid var(--line); }
.table-wrap tbody th { text-align: left; color: var(--muted); font-weight: 400; white-space: nowrap; }
.table-wrap td.best-value { background: var(--primary-soft); font-weight: 700; }
.product-name-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.table-thumb-wrap.product-img-wrap { width: 60px; height: 60px; border-radius: 8px; }
.name-text { font-size: .8rem; font-weight: 700; line-height: 1.35; white-space: normal; }

.mobile-compare-cards { display: none; }
@media (max-width: 640px) {
  /* :has()로 비교 스펙표(#compare-table)를 담은 .table-wrap만 카드뷰로
     대체한다 — "빠른 선택 가이드" 같은 다른 .table-wrap(가로 스크롤만
     필요, 카드 대체본이 없음)은 계속 스크롤 가능한 표로 남아야 한다.
     :has() 미지원 브라우저에서는 이 규칙이 조용히 무시되고 표가 계속
     스크롤 가능한 상태로 보여지므로 빈 화면이 되는 실패 모드가 없다. */
  .table-wrap:has(#compare-table) { display: none; }
  .mobile-compare-cards { display: grid; gap: 14px; }
  .mobile-compare-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px;
  }
  .mobile-compare-card h4 { margin: 10px 0; font-size: .98rem; }
  .mobile-card-img.product-img-wrap { width: 100%; aspect-ratio: 16/9; border-radius: 8px; }
  .mobile-compare-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    font-size: .84rem;
  }
  .mobile-compare-grid span { color: var(--muted); }
  .mobile-compare-grid strong { text-align: right; }
}

.updates-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.update-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.update-date {
  flex-shrink: 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.update-item p { margin: 0; font-size: .92rem; line-height: 1.5; }

/* JQ pick cards — shared across compare pages, /jq-picks/, and the homepage
   JQ픽 section. Deliberately two sizes (large "대표 추천" + small "추가
   후보") so JQ picks never render as a uniform grid of identical cards
   (spec: pick cards must carry differentiated visual weight). */
.primary-pick-card {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 20px 0 0;
}
.primary-pick-img { width: 220px; height: 220px; flex-shrink: 0; }
.primary-pick-text { flex: 1; min-width: 0; }
.primary-pick-name { margin: 8px 0 6px; font-size: clamp(1.15rem, 3vw, 1.375rem); font-weight: 700; }
.primary-pick-verdict { font-size: .98rem; font-weight: 400; color: var(--muted); margin: 0 0 10px; }
/* ✓ prefix on every reason via list-marker content — spec §5 Product Card
   step 4 ("핵심 장점 3개 — ✓ prefix") — achieved without touching any
   Python render function, since the marker is pure CSS. */
.primary-pick-reasons {
  margin: 0 0 10px;
  padding-left: 20px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.7;
  list-style: none;
}
.primary-pick-reasons li { position: relative; }
.primary-pick-reasons li::before {
  content: "✓";
  position: absolute;
  left: -20px;
  color: var(--primary);
  font-weight: 700;
}
.primary-pick-con, .primary-pick-for { margin: 4px 0; font-size: .92rem; }
/* △ prefix + brown accent on the one honest downside — spec §5 step 5. */
.primary-pick-con { color: var(--accent-brown); }
.primary-pick-con::before { content: "△ "; }
.primary-pick-con strong { color: var(--accent-brown); margin-right: 4px; font-weight: 700; }
.primary-pick-for { color: var(--text-tertiary, var(--muted)); font-size: 12.5px; }
.primary-pick-for strong { color: var(--text); margin-right: 4px; font-weight: 700; }
.primary-pick-jump { display: inline-block; margin-top: 10px; font-size: .86rem; font-weight: 700; }
/* Dashed divider before price+CTA — spec §5 step 7 ("점선 구분선 →
   가격+CTA"). .price-block always directly precedes render_buy_cta's
   markup in every render_primary_pick*/render_large_card implementation,
   so this single rule covers every product/pick card site-wide. */
.primary-pick-text .price-block,
.pick-card .price-block { padding-top: 14px; margin-top: 6px; border-top: 1px dashed var(--line-strong); }
.pick-reason { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.55; flex-grow: 1; }

.unique-alternatives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.alt-pick-card {
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.alt-pick-img { width: 96px; height: 96px; }
.alt-pick-card h3, .alt-pick-card h4 { margin: 2px 0 0; font-size: .98rem; }
.alt-pick-card p { margin: 0; color: var(--muted); font-size: .82rem; }
@media (max-width: 900px) {
  .primary-pick-card { flex-direction: column; align-items: center; text-align: left; }
}
@media (max-width: 560px) {
  .primary-pick-img { width: 160px; height: 160px; }
}

.method-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.method-card {
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.method-card h4 { margin: 0 0 6px; font-size: .96rem; }
.method-card p { margin: 0 0 12px; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.method-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
}
.method-status.is-live { background: var(--success-soft); color: var(--success); }
.method-status.is-soon { background: #f1ede2; color: var(--muted); }
.method-status.is-partial { background: var(--primary-soft); color: var(--primary); }

.featured-compare-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  text-decoration: none;
}
.featured-compare-body { display: flex; gap: 20px; align-items: flex-start; }
.featured-compare-img { width: 120px; height: 120px; flex-shrink: 0; }
.featured-compare-text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.featured-compare-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.featured-compare-top h3 { font-size: 1.25rem; margin: 0; }
.featured-compare-text > p { margin: 0; color: var(--muted); line-height: 1.6; }
.featured-compare-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: .86rem;
  color: var(--muted);
}
.featured-compare-meta b { color: var(--text); }

/* Product image wrapper — shared by the homepage featured card and every
   comparison page. Two-layer, CSS-first structure so a card is NEVER empty
   or shows a broken-image glyph:
     1. .product-img-fallback is always in the DOM (brand/model/icon text),
        laid out to fill the wrapper — present regardless of whether any
        image request ever succeeds or JS runs at all.
     2. .product-img-photo (the real <img>, only rendered when an exact
        model match has a real URL) sits on top with an opaque background,
        covering the fallback once loaded. A JS onerror hides it on failure,
        revealing the fallback beneath — but even without JS, a failed real
        <img> renders small enough that the fallback text behind/around it
        stays legible, so the card never goes fully blank. */
.product-img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbfaf6;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.product-img-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px;
  text-align: center;
  color: var(--muted);
  background: #fbfaf6;
}
.product-img-fallback-icon { color: var(--muted); opacity: .7; }
.product-img-fallback-brand { font-size: .74rem; font-weight: 800; color: var(--text); }
.product-img-fallback-model { font-size: .68rem; color: var(--muted); line-height: 1.3; }
.product-img-fallback-note { font-size: .66rem; color: var(--muted); margin-top: 1px; }
.product-img-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fbfaf6;
}

@media (max-width: 560px) {
  .featured-compare-body { flex-direction: column; }
  .featured-compare-img { width: 100px; height: 100px; }
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
  font-size: .78rem;
  color: var(--muted);
}
.trust-strip strong { color: var(--text); }

.result-followup {
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: 13px;
  background: var(--primary-soft);
}
.result-followup p { margin: 0 0 8px; font-size: .86rem; color: var(--text); line-height: 1.5; }
.result-followup a {
  color: var(--primary);
  font-weight: 800;
  font-size: .88rem;
  text-decoration: none;
}
.result-followup a:hover, .result-followup a:focus-visible { text-decoration: underline; }

.margin-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 800;
  margin-left: 6px;
}
.margin-pill.is-short { background: var(--danger-soft); color: var(--danger); }
.margin-pill.is-ok { background: var(--warning-soft); color: var(--warning); }
.margin-pill.is-ample { background: var(--success-soft); color: var(--success); }

.flow-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.flow-step {
  position: relative;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.flow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 900;
  font-size: .9rem;
  margin-bottom: 10px;
}
.flow-step p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.6; }

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #f1ede2;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}
.badge-primary { background: var(--primary-soft); color: var(--primary); }
/* Outline-style badge for product recommendation tags (BEST PICK / 가성비
   최고 / JQ 대표 추천 etc.) — spec: white background, bordered, colored
   text only, never a filled background, so it stays visually lighter than
   the CTA button on the same card. */
.badge-outline {
  background: #fff;
  border: 1.3px solid var(--primary);
  color: var(--primary);
}

.page { padding: 36px 0 72px; }
.breadcrumb {
  margin-bottom: 18px;
  color: var(--muted);
  font-size: .9rem;
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.calc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 18px;
  align-items: start;
}
.card { padding: 26px; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.field label {
  display: block;
  margin-bottom: 7px;
  font-size: .92rem;
  font-weight: 800;
}
.help {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}
input, select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #d9d3c4;
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' fill='none' stroke='%2355606f' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
}
input:focus, select:focus {
  outline: 3px solid rgba(36,87,230,.14);
  border-color: var(--primary);
}
.actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
button {
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  padding: 0 18px;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
.primary { background: var(--primary); color: #fff; flex: 1; }
.primary:hover { background: var(--primary-dark); }
.secondary { background: #f1ede2; color: var(--text); }
.secondary:hover { background: #e6e0d2; }

.result-hero {
  padding: 22px;
  border-radius: 17px;
  background: var(--primary-soft);
  margin-bottom: 14px;
}
.result-label { color: var(--muted); font-size: .86rem; font-weight: 700; }
.result-value {
  margin-top: 4px;
  font-size: clamp(2.4rem, 8vw, 4.1rem);
  font-weight: 950;
  letter-spacing: -.05em;
}
.result-unit { font-size: 1rem; font-weight: 750; color: var(--muted); }
.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.metric {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.metric span { display: block; color: var(--muted); font-size: .8rem; }
.metric strong { display: block; margin-top: 5px; font-size: 1.08rem; }
.notice {
  margin-top: 14px;
  padding: 14px 15px;
  border-radius: 13px;
  background: var(--warning-soft);
  color: var(--warning);
  line-height: 1.55;
  font-size: .9rem;
}
.notice.danger { background: var(--danger-soft); color: var(--danger); }
.content-card { margin-top: 18px; }
.content-card p, .content-card li { color: var(--muted); line-height: 1.75; }
.formula {
  padding: 16px;
  border-radius: 14px;
  background: #f7f5ef;
  border: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-x: auto;
}

.more-details {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.more-details summary {
  cursor: pointer;
  font-weight: 800;
  font-size: .9rem;
  color: var(--primary);
  list-style: none;
}
.more-details summary::-webkit-details-marker { display: none; }
.more-details[open] summary { margin-bottom: 8px; }
.more-details ul { margin: 0; padding-left: 20px; }

.footer {
  padding: 48px 0;
  margin-top: 24px;
  background: var(--bg-footer);
  color: var(--text-on-dark);
  font-size: .84rem;
  line-height: 1.8;
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  text-decoration: none;
}
.footer-brand .brand-mark { color: var(--primary); }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-links a { color: var(--text-on-dark); text-decoration: none; font-size: .84rem; }
.footer-links a:hover { color: #fff; }
.footer-note {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.45);
  font-size: .78rem;
  line-height: 1.7;
}
@media (max-width: 560px) {
  .footer-top { flex-direction: column; align-items: flex-start; }
}
.hidden { display: none !important; }

@media (max-width: 900px) {
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .calc-layout, .tool-grid, .flow-steps { grid-template-columns: 1fr; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .hero-card { padding: 20px 18px; }
  .hero { padding: 16px 0 10px; }
}
@media (max-width: 720px) {
  .nav-toggle-btn { display: inline-flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .2s ease;
  }
  .nav-links a { display: block; padding: 12px 10px; border-bottom: 1px solid var(--line); }
  .nav-links li:last-child a { border-bottom: 0; }
  .nav-toggle-input:checked ~ .nav-links {
    max-height: 480px;
    visibility: visible;
  }
  .nav-toggle-input:checked ~ .nav-toggle-btn .nav-toggle-icon { background: transparent; }
  .nav-toggle-input:checked ~ .nav-toggle-btn .nav-toggle-icon::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle-input:checked ~ .nav-toggle-btn .nav-toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }
  .nav { position: relative; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 640px) {
  .nav-links { font-size: .92rem; }
}
@media (max-width: 560px) {
  .form-grid, .metrics, .why-grid { grid-template-columns: 1fr; }
  .card { padding: 20px; }
  .actions { flex-direction: column; }
  .nav-note { display: none; }
}
@media (max-width: 400px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .method-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}