/* ────────────────────────────────────────────────────────────────────────
   tokens.css — 디자인 토큰 SSOT (design_refresh 2026-06-22)
   확정 팔레트 = 목업 mockups/design_refresh/*.html :root (틸/블루).
   concat 1순위 로드(baseof) → main.css·components.css가 참조.
   디폴트 파랑 #2563eb 폐기. 변수 정의만, 셀렉터 없음.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  /* 브랜드 (틸/블루) */
  --brand:   #0c5570;   /* primary 딥틸블루 */
  --brand-d: #093f53;   /* dark — util바·테이블 헤더 */
  --brand-l: #2c7f86;   /* light — 링크 hover·보조 */
  --teal:    #5fc4b4;   /* 밝은 틸 악센트 */
  --accent:  #1763c9;   /* 샤프 액센트 — 링크·견적버튼·탭 underline */
  --ok:      #1d7a59;   /* 성공/재고 */

  /* 중립 스케일 */
  --ink:   #1a2632;     /* 본문 */
  --muted: #5d6b75;     /* 보조 텍스트 */
  --line:  #dce3e8;     /* 경계선 */
  --line2: #eef2f4;     /* 옅은 경계선 */
  --soft:  #f5f7f8;     /* 옅은 배경 */
  --bg:    #ffffff;

  /* 로고 워드마크 */
  --logo-en: #1d3a63;   /* LUMIGEN 네이비 */
  --logo-kr: #3aa794;   /* KOREA 틸 */

  /* 타입 스케일 */
  --fs-h1:   30px;
  --fs-h2:   22px;
  --fs-h3:   16px;
  --fs-body: 14px;
  --fs-sm:   12.5px;
  --fs-xs:   11px;

  /* 간격 스케일 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;

  /* radius·그림자 */
  --r: 3px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow-md: 0 4px 14px rgba(9,63,83,.10);

  /* ── 레거시 별칭 (--fp-* → 새 토큰 매핑, 기존 var() 참조 무파괴) ──
       main.css가 var(--fp-*)로 참조하는 부분을 틸/블루로 자동 이동.
       하드코딩 #2563eb는 Task B에서 직접 마이그레이션. */
  --fp-navy:        var(--logo-en);
  --fp-navy-deep:   var(--brand-d);
  --fp-accent:      var(--brand);
  --fp-accent-hover:var(--brand-l);
  --fp-teal:        var(--teal);
  --fp-text:        var(--ink);
  --fp-muted:       var(--muted);
  --fp-border:      var(--line);
  --fp-bg-alt:      var(--soft);
}
/* ============================================================
   Lumigen Korea — main.css
   B2B 생명과학 시약 유통 사이트. 기능 우선, 장식 최소.
   ============================================================ */

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Noto Sans KR", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #1a1a2e;
  background: #ffffff;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* ── Container ────────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header styles moved to Phase 5d block at end of file */

/* ── Main content ─────────────────────────────────────────── */
main {
  min-height: calc(100vh - 60px - 160px);
  padding: 32px 0;
}

/* ── Page heading ─────────────────────────────────────────── */
h1 { font-size: 24px; font-weight: 700; margin-bottom: 16px; }
h2 { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }

/* ── Spec table (product detail) ──────────────────────────── */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 24px;
}
.spec-table th,
.spec-table td {
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
}
.spec-table th {
  background: #f9fafb;
  font-weight: 600;
  width: 36%;
  color: #374151;
}
.spec-table tr:nth-child(even) td { background: #f9fafb; }
/* SSOT §18.3 LMG SKU(Cat No) 볼드 / Mfr No 일반 */
.spec-table .spec-th-bold { font-weight: 700; color: #111827; }

/* ── Comparison table (target hub) ───────────────────────── */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 24px;
}
.compare-table th {
  background: var(--brand);
  color: #ffffff;
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
  font-weight: 600;
}
.compare-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line2);
  font-variant-numeric: tabular-nums;
}
.compare-table tr:hover td { background: #f3f8f8; }

/* ── 규격별 판매가 표 (가격게시 벤더) ─────────────────────────
   2026-09-06 신설. 그 전엔 CSS가 없어 맨 HTML 표로 렌더됐다.
   스펙표와 같은 골격을 쓴다 — 한 페이지에 표 문법이 둘이면 다른 사이트처럼 보인다. */
.pdx-price { margin: 0 0 28px; }
.price-table {
  width: 100%;
  max-width: 420px;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 8px;
}
.price-table th,
.price-table td {
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  text-align: left;
}
.price-table th {
  background: #f9fafb;
  font-weight: 600;
  color: #374151;
}
.price-table th:last-child,
.price-table .pt-krw { text-align: right; }
.price-table .pt-size { font-weight: 600; color: #111827; white-space: nowrap; }
.price-table .pt-krw { font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-table .pt-krw b { font-weight: 700; color: #111827; }
.price-table tr:nth-child(even) td { background: #f9fafb; }
.pt-note { margin: 0; font-size: 12.5px; color: #6b7280; }

/* ── 카탈로그 색인 `/{vendor}/catalog/` ────────────────────────
   2026-09-06 신설. 초판은 템플릿 인라인 스타일 + 하드코딩 색이라
   테마와 분리돼 다른 사이트처럼 보였다. 허브·스펙표 골격을 그대로 쓴다. */
.cat-index { padding: 32px 20px 64px; }
.cat-h1 {
  font-size: 24px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.03em;
  margin: 12px 0 6px;
}
.cat-sub { font-size: 13px; color: #6b7280; margin: 0 0 24px; }

/* 색인 루트 — 페이지 카드 그리드 */
.cat-page-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.cat-page-card {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 14px;
  border: 1px solid var(--line2, #e5e7eb);
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
}
.cat-page-card:hover { border-color: var(--accent); background: #f7f9fc; }
.cat-page-range { color: var(--accent); font-weight: 700; font-size: 14px; }
.cat-page-count { color: #9ca3af; font-size: 12px; }

/* 색인 한 장 — 품목 표 (스펙표와 같은 문법) */
.cat-table-wrap { overflow-x: auto; }
.cat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cat-table th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.cat-table td { padding: 8px 10px; border-bottom: 1px solid #f1f2f4; color: #374151; }
.cat-table tr:hover td { background: #f7f9fc; }
.cat-td-no { white-space: nowrap; }
.cat-td-sku { white-space: nowrap; font-weight: 700; color: #111827; }
/* LMG SKU 병행표기 — 모델번호가 나오는 자리는 항상 둘 다 (SSOT §12.4, 2026-09-06) */
.sku { font-weight: 700; color: #111827; white-space: nowrap; }
.related-sku { font-weight: 700; color: #111827; margin-right: 6px; }
.related-sku::after { content: "·"; color: #9ca3af; margin-left: 6px; }
.cat-td-no a { color: var(--accent); font-weight: 700; text-decoration: none; }
.cat-td-no a:hover { text-decoration: underline; }
.cat-th-price, .cat-td-price {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cat-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  font-size: 13px;
}
.cat-pager a { color: var(--accent); font-weight: 600; text-decoration: none; }
.cat-pager .cat-pager-all { color: #6b7280; font-weight: 400; }
.cat-pager a:hover { text-decoration: underline; }

/* ── CTA button ───────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.15s;
}
.btn-primary {
  background: var(--accent);
  color: #ffffff;
}
.btn-primary:hover { background: var(--brand); text-decoration: none; }
.btn-secondary {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}
.btn-secondary:hover { background: #e5e7eb; text-decoration: none; }

/* ── Page list (list.html) ────────────────────────────────── */
.page-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
}
.page-list a {
  font-size: 14px;
  color: var(--accent);
}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  background: var(--soft);
  border-top: 1px solid var(--line);
  padding: 32px 0 24px;
  margin-top: 48px;
}
.site-footer .container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 24px;
  align-items: start;
}
.footer-brand strong { font-size: 15px; font-weight: 700; display: block; margin-bottom: 4px; }
.footer-brand p { font-size: 13px; color: #6b7280; }
.footer-contact p { font-size: 13px; color: #374151; margin-bottom: 4px; }
.footer-contact a { color: var(--brand-l); }
.footer-biz { font-size: 11px !important; color: var(--muted) !important; }
.footer-copyright { text-align: right; }
.footer-copyright small { font-size: 12px; color: var(--muted); }

/* ── Related Products (Phase 3-K) ────────────────────────── */
.related-products { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #e5e7eb; }
.related-products .related-block { margin-bottom: 2rem; }
.related-products h2 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; color: #111827; }
.related-products .related-subtitle { font-size: 0.875rem; color: #6b7280; margin-bottom: 1rem; }
.related-products .related-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.5rem; }
.related-products .related-list li a { display: block; padding: 0.75rem; border: 1px solid #e5e7eb; border-radius: var(--r); background: #fff; text-decoration: none; color: inherit; transition: border-color 0.15s; }
.related-products .related-list li a:hover { border-color: var(--accent); }
.related-products .related-list strong { display: block; font-size: 0.9375rem; line-height: 1.3; margin-bottom: 0.25rem; color: #111827; }
.related-products .related-list small { font-size: 0.8125rem; color: #6b7280; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .site-footer .container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .footer-copyright { text-align: left; }
  h1 { font-size: 20px; }
  .spec-table th { width: 42%; }
}

/* ── Target Hub + Category Hub (Phase 3-L) ───────────────── */
.hub-subtitle { color: #6b7280; margin-bottom: 1.5rem; }
.gene-info { margin: 1.5rem 0; padding: 1.25rem 1.5rem; background: #f9fafb; border-radius: var(--r); border-left: 3px solid var(--accent); }
.gene-info .gene-summary { font-size: 14px; line-height: 1.75; color: #374151; }
.gene-info .gene-summary-en { margin-top: 0.75rem; font-size: 13px; color: #4b5563; }
.gene-info .gene-summary-en summary { cursor: pointer; color: var(--accent); font-weight: 500; }
.gene-info .gene-summary-en p { margin-top: 0.5rem; padding-left: 1rem; border-left: 2px solid #d1d5db; color: #4b5563; }
.gene-links { margin-top: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.gene-links .btn { display: inline-block; padding: 0.5rem 1rem; background: #fff; border: 1px solid var(--accent); color: var(--accent); border-radius: var(--r); text-decoration: none; font-size: 0.875rem; font-weight: 500; }
.gene-links .btn:hover { background: var(--accent); color: #fff; text-decoration: none; }

.comparison .table-wrap { overflow-x: auto; }
.comparison-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.comparison-table th, .comparison-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; }
.comparison-table th { background: #1e3a8a; color: #fff; font-weight: 600; white-space: nowrap; }
.comparison-table tr:nth-child(even) td { background: #f9fafb; }
.comparison-table tr:hover td { background: #f3f8f8; }
.comparison-table .btn-sm { display: inline-block; padding: 0.25rem 0.6rem; background: var(--accent); color: #fff; border-radius: 4px; text-decoration: none; font-size: 0.75rem; font-weight: 500; }
.comparison-table .btn-sm:hover { background: var(--brand); text-decoration: none; }
.price-inquiry { color: #ea580c; font-weight: 600; }
.more-note { font-size: 0.875rem; color: #6b7280; margin-top: 1rem; }

.cta { margin: 2.5rem 0; text-align: center; }
.btn-primary { display: inline-block; padding: 0.875rem 2rem; background: var(--accent); color: #fff; border-radius: var(--r); text-decoration: none; font-weight: 600; font-size: 1.0625rem; }
.btn-primary:hover { background: var(--brand); text-decoration: none; }

/* Category-hub specific */
.cat-targets { margin: 2rem 0; }
.cat-targets ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.5rem; }
.cat-targets li a { display: flex; justify-content: space-between; padding: 0.625rem 0.875rem; border: 1px solid #e5e7eb; border-radius: var(--r); background: #fff; color: #1a1a2e; text-decoration: none; font-size: 14px; }
.cat-targets li a:hover { border-color: var(--accent); color: var(--accent); }
.cat-targets li a .count { color: #6b7280; font-size: 12px; }
.cat-products { margin: 2rem 0; }
.cat-products ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.5rem; }
.cat-products li a { display: block; padding: 0.625rem 0.875rem; border: 1px solid #e5e7eb; border-radius: var(--r); background: #fff; color: #1a1a2e; text-decoration: none; font-size: 13px; line-height: 1.4; }
.cat-products li a:hover { border-color: var(--accent); }
.cat-products li small { display: block; color: #6b7280; margin-top: 2px; font-size: 11px; }

/* ============================================================
   Front Page (Phase 5a) — WP 95점 메인 복원 + Target Hub 블록
   접두사: .fp-*
   ============================================================ */

:root {
  --fp-navy: #1e3a5f;
  --fp-navy-deep: #142844;
  --fp-accent: var(--accent);
  --fp-accent-hover: var(--brand);
  --fp-teal: #0d9488;
  --fp-text: #1a1a2e;
  --fp-muted: #6b7280;
  --fp-border: #e5e7eb;
  --fp-bg-alt: #f9fafb;
}

main { padding: 0; }

.fp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ── Hero ──────────────────────────────────────────────────── */
.fp-hero {
  background: linear-gradient(160deg, var(--fp-navy) 0%, var(--fp-navy-deep) 100%);
  color: #ffffff;
  padding: 72px 0 64px;
  text-align: center;
}
.fp-eyebrow {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.72);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.fp-hero-title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
  margin-bottom: 32px;
  letter-spacing: -0.01em;
}

/* Search form */
.fp-search-form { max-width: 620px; margin: 0 auto 20px; }
.fp-search-box {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: var(--r);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  overflow: hidden;
}
.fp-search-input {
  flex: 1;
  border: 0;
  padding: 16px 20px;
  font-size: 15px;
  color: var(--fp-text);
  outline: none;
  background: transparent;
}
.fp-search-input::placeholder { color: #9ca3af; }
.fp-search-btn {
  border: 0;
  background: var(--fp-accent);
  color: #ffffff;
  padding: 0 22px;
  height: 52px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.fp-search-btn:hover { background: var(--fp-accent-hover); }

/* Chips */
.fp-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto 44px;
}
.fp-chip-label {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  margin-right: 4px;
}
.fp-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: #ffffff;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.fp-chip:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.45);
  color: #ffffff;
  text-decoration: none;
}

/* Hero CTA */
.fp-hero-cta {
  max-width: 480px;
  margin: 0 auto;
  padding: 28px 24px 24px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r);
}
.fp-cta-title {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}
.fp-cta-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 16px;
}
.fp-email-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.fp-email { font-size: 13px; color: rgba(255,255,255,0.8); }
.fp-copy-btn {
  background: rgba(255,255,255,0.15);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 4px 12px;
  border-radius: var(--r);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.fp-copy-btn:hover { background: rgba(255,255,255,0.22); }

.fp-cta-btn {
  width: 100%;
  padding: 12px 20px;
  background: var(--fp-accent);
  color: #ffffff;
  border: 0;
  border-radius: var(--r);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.fp-cta-btn:hover { background: var(--fp-accent-hover); }
.fp-cta-btn:disabled { background: #475569; cursor: default; }

/* Inquiry form (expanded) */
.fp-inquiry-wrap { margin-top: 18px; text-align: left; }
.fp-inquiry-form { max-width: 380px; margin: 0 auto; }
.fp-label {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.82);
  margin-bottom: 4px;
  margin-top: 6px;
}
.fp-req { color: #f87171; }
.fp-input, .fp-textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  color: #ffffff;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.fp-input::placeholder, .fp-textarea::placeholder { color: rgba(255,255,255,0.45); }
.fp-input:focus, .fp-textarea:focus {
  outline: none;
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.16);
}
.fp-textarea { resize: vertical; min-height: 72px; }
.fp-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.82);
  cursor: pointer;
}
.fp-consent input { margin-top: 3px; }
.fp-consent a { color: #93c5fd; }
.fp-submit-btn {
  width: 100%;
  padding: 12px;
  background: var(--fp-teal);
  color: #ffffff;
  border: 0;
  border-radius: var(--r);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.fp-submit-btn:hover { background: #0b7a6e; }
.fp-submit-btn:disabled { background: #475569; cursor: default; }
.fp-result {
  font-size: 12px;
  margin-top: 10px;
  text-align: center;
}
.fp-result-ok  { color: #86efac; }
.fp-result-err { color: #fca5a5; }

/* ── Sections ─────────────────────────────────────────────── */
.fp-section { padding: 56px 0; background: #ffffff; }
.fp-section-alt { background: var(--fp-bg-alt); }
.fp-section-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--fp-text);
  text-align: center;
  margin-bottom: 24px;
}
.fp-section-hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  gap: 16px;
  flex-wrap: wrap;
}
.fp-section-hd .fp-section-title { text-align: left; margin-bottom: 0; }
.fp-section-sub {
  color: var(--fp-muted);
  font-size: 14px;
  margin-bottom: 20px;
}
.fp-view-all {
  font-size: 13px;
  color: var(--fp-accent);
  font-weight: 600;
  white-space: nowrap;
}

/* Category grid */
.fp-cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 40px;
}
.fp-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 14px 22px;
  border: 1px solid var(--fp-border);
  border-radius: var(--r);
  background: #ffffff;
  color: var(--fp-text);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.fp-cat-card:hover {
  border-color: var(--fp-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(12,85,112,0.08);
  text-decoration: none;
}
.fp-cat-icon { font-size: 30px; margin-bottom: 10px; line-height: 1; }
.fp-cat-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: var(--fp-text); }
.fp-cat-desc { font-size: 12px; color: var(--fp-muted); line-height: 1.5; }

/* Trust block */
.fp-trust-block {
  margin: 24px auto 0;
  max-width: 720px;
  text-align: center;
  padding: 24px 16px;
  border-top: 1px solid var(--fp-border);
}
.fp-trust-text {
  font-size: 15px;
  color: var(--fp-text);
  line-height: 1.75;
}
.fp-trust-text strong {
  color: var(--fp-accent);
  font-size: 18px;
  font-weight: 800;
}

/* Target Hub grid */
.fp-target-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.fp-target-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--fp-border);
  border-radius: var(--r);
  background: #ffffff;
  color: var(--fp-text);
  text-decoration: none;
  font-size: 14px;
  transition: border-color 0.15s, color 0.15s;
}
.fp-target-card:hover {
  border-color: var(--fp-accent);
  color: var(--fp-accent);
  text-decoration: none;
}
.fp-target-symbol { font-weight: 700; }
.fp-target-count {
  font-size: 12px;
  color: var(--fp-muted);
}
.fp-target-card:hover .fp-target-count { color: var(--fp-accent); }

/* ── Responsive (Phase 5a) ───────────────────────────────── */
@media (max-width: 768px) {
  .fp-hero { padding: 48px 0 40px; }
  .fp-hero-title { font-size: 28px; }
  .fp-eyebrow { font-size: 11px; }
  .fp-section { padding: 40px 0; }
  .fp-section-title { font-size: 19px; }
  .fp-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .fp-target-grid { grid-template-columns: repeat(2, 1fr); }
  .fp-hero-cta { padding: 22px 18px 20px; }
}

/* ============================================================
   Search placeholder page (Phase 5a 임시)
   ============================================================ */
.search-placeholder {
  max-width: 680px;
  margin: 40px auto;
  padding: 32px 24px;
}
.search-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--fp-text);
}
.search-query-box {
  background: var(--fp-bg-alt);
  border: 1px solid var(--fp-border);
  border-radius: var(--r);
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 14px;
}
.search-query-label {
  color: var(--fp-muted);
  margin-right: 8px;
}
.search-query-box strong {
  color: var(--fp-text);
  font-size: 15px;
  word-break: break-all;
}
.search-notice {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--r);
  padding: 18px 20px;
  margin-bottom: 24px;
}
.search-notice-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #92400e;
}
.search-notice-body {
  font-size: 13.5px;
  color: #78350f;
  line-height: 1.7;
}
.search-alternatives {
  padding: 20px 0 8px;
}
.search-alt-title {
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--fp-text);
}
.search-alt-list {
  list-style: none;
  padding: 0;
}
.search-alt-list li {
  padding: 8px 0;
  font-size: 14px;
  color: var(--fp-text);
  border-bottom: 1px dashed var(--fp-border);
}
.search-alt-list li:last-child { border-bottom: 0; }
.search-alt-list a { color: var(--fp-accent); font-weight: 600; }
.search-copy-btn {
  margin-left: 8px;
  background: var(--fp-bg-alt);
  border: 1px solid var(--fp-border);
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 12px;
  cursor: pointer;
}
.search-copy-btn:hover { background: #e5e7eb; }

/* ============================================================
   About page (Phase 5a — WP /about/ 이식)
   ============================================================ */
.about-section {
  padding: 56px 0 80px;
  background: #ffffff;
}
.about-page {
  max-width: 760px;
  margin: 0 auto;
  color: var(--fp-text);
  line-height: 1.8;
}
.about-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--fp-text);
  margin-bottom: 24px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.about-subtitle {
  font-size: 20px;
  font-weight: 700;
  color: var(--fp-text);
  margin: 32px 0 16px;
}
.about-page p {
  font-size: 15.5px;
  color: #374151;
  margin-bottom: 14px;
}
.about-divider {
  height: 1px;
  background: var(--fp-border);
  margin: 32px 0;
}
.about-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin-top: 16px;
  background: var(--fp-bg-alt);
  border-radius: var(--r);
  overflow: hidden;
}
.about-info-table th,
.about-info-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--fp-border);
  text-align: left;
  vertical-align: top;
}
.about-info-table tr:last-child th,
.about-info-table tr:last-child td { border-bottom: 0; }
.about-info-table th {
  width: 30%;
  font-weight: 600;
  color: var(--fp-muted);
  background: #ffffff;
  border-right: 1px solid var(--fp-border);
}
.about-info-table td { color: var(--fp-text); }
.about-info-table a { color: var(--fp-accent); }

@media (max-width: 640px) {
  .about-section { padding: 36px 0 60px; }
  .about-title { font-size: 22px; }
  .about-subtitle { font-size: 17px; }
  .about-info-table th { width: 38%; padding: 12px 12px; }
  .about-info-table td { padding: 12px 12px; }
}

/* ============================================================
   Product detail — SEO sections (Phase 5c-2)
   관련 질환 / 신호경로 태그, 연구 동향 (PubMed 대표 논문) 렌더링용.
   ============================================================ */
.pd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pd-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  background: var(--fp-bg-alt);
  color: var(--fp-muted);
  border: 1px solid var(--fp-border);
}
.pd-note {
  font-size: 11.5px;
  color: #9ca3af;
  margin: 10px 0 0;
}
.pd-papers {
  border-left: 2px solid var(--fp-border);
  padding-left: 14px;
  margin-top: 12px;
}
.pd-papers p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--fp-muted);
  margin-bottom: 10px;
}
.pd-papers p:last-child { margin-bottom: 0; }

/* ================================================================
   Phase 5d — Header v2 (sticky + mega menu + search, CTA 메뉴화)
   흰 배경 고정. 아이콘 + "LUMIGEN / KOREA" 2줄 워드마크.
   검색창은 오른쪽 끝 (margin-left: auto).
================================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 80px;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-logo {
  width: 40px;
  height: 40px;
  display: block;
  flex-shrink: 0;
}
.brand-mark {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 3px;
}
.brand-mark-en {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--logo-en);
}
.brand-mark-kr {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--logo-kr);
}

/* Primary nav */
.primary-nav { flex: 0 0 auto; }
.nav-list {
  list-style: none;
  display: flex;
  gap: 2px;
  align-items: center;
  margin: 0;
  padding: 0;
}
.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--r);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  line-height: 1.4;
}
.nav-link:hover { background: rgba(12, 85, 112, 0.08); color: var(--brand); text-decoration: none; }
.nav-caret { transition: transform 0.2s; opacity: 0.55; }
.nav-item.is-open > .nav-link .nav-caret { transform: rotate(180deg); }

/* Mega panel */
.mega-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  padding: 18px;
  z-index: 1100;
  animation: mega-in 0.16s ease-out;
}
@keyframes mega-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mega-cats { min-width: 620px; }
.mega-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
.mega-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.mega-card:hover { background: var(--soft); text-decoration: none; }
.mega-icon {
  font-size: 26px;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.mega-card-body { display: flex; flex-direction: column; line-height: 1.3; }
.mega-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.mega-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }

.mega-targets { min-width: 360px; padding: 16px 18px; }
.mega-label { font-size: 12px; color: #6b7280; margin-bottom: 10px; font-weight: 500; letter-spacing: 0.02em; }
.mega-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mega-chip {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--brand);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}
.mega-chip:hover { background: var(--bg); border-color: var(--brand-l); text-decoration: none; color: var(--brand); }
.mega-all {
  display: inline-block;
  font-size: 13px;
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.mega-all:hover { text-decoration: underline; }

/* Header search — 오른쪽 끝 정렬 */
.header-search {
  flex: 0 1 auto;
  width: 320px;
  max-width: 360px;
  min-width: 220px;
  margin-left: auto;
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  transition: background 0.15s, border-color 0.15s;
}
.header-search:focus-within { background: var(--bg); border-color: var(--brand); box-shadow: 0 0 0 3px rgba(12, 85, 112, 0.12); }
.header-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 9px 14px;
  font-size: 14px;
  color: #1f2937;
  outline: none;
  font-family: inherit;
}
.header-search-input::placeholder { color: #9ca3af; }
.header-search-btn {
  border: 0;
  background: none;
  padding: 0 14px;
  cursor: pointer;
  color: #6b7280;
  display: flex;
  align-items: center;
}
.header-search-btn:hover { color: var(--brand); }

/* Mobile toggle */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #1f2937;
  transition: transform 0.2s, opacity 0.2s, background 0.2s;
  border-radius: 2px;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  top: 80px;
  left: 0; right: 0;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 20px 20px 28px;
  z-index: 999;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}
.md-search { display: flex; gap: 8px; margin-bottom: 16px; }
.md-search input {
  flex: 1;
  border: 1px solid #e5e7eb;
  border-radius: var(--r);
  padding: 11px 14px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
}
.md-search input:focus { border-color: #0c5570; }
.md-search button {
  border: 0;
  background: #0c5570;
  color: #fff;
  padding: 0 18px;
  border-radius: var(--r);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}
.md-list { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0 0 16px; padding: 0; }
.md-list a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--r);
  font-size: 16px;
  color: #111827;
  font-weight: 500;
  text-decoration: none;
}
.md-list a:hover { background: #f3f6fa; text-decoration: none; }
.md-cta {
  display: block;
  text-align: center;
  background: #0c5570;
  color: #ffffff;
  padding: 14px;
  border-radius: var(--r);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.md-cta:hover { background: #094457; color: #ffffff; text-decoration: none; }

/* Responsive */
@media (max-width: 1180px) and (min-width: 961px) {
  .header-inner { gap: 16px; }
  .header-search { width: 240px; min-width: 200px; }
  .nav-list { gap: 0; }
  .nav-link { padding: 8px 10px; font-size: 14px; }
}
@media (max-width: 960px) {
  .primary-nav, .header-search { display: none; }
  .nav-toggle { display: flex; }
  .header-inner { gap: 10px; padding: 0 16px; height: 68px; }
  .brand-logo { width: 40px; height: 40px; }
  .brand-mark-en { font-size: 18px; }
  .brand-mark-kr { font-size: 10px; }
  .mobile-drawer { top: 68px; }
}
@media (max-width: 420px) {
  .brand-mark { display: none; }
}

/* ============================================================
   Phase 3: Product detail page styles (M5, 2026-05-18)
   prose 0 철학: spec 표 + structure + UI label만
   ============================================================ */

/* ── Product detail container ───────────────────────────────── */
.product-detail {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb { margin-bottom: 20px; }
.breadcrumb-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  font-size: 13px;
  color: #6b7280;
  padding: 0;
  margin: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  margin-right: 4px;
  color: #d1d5db;
}
.breadcrumb-item a { color: var(--accent); }
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-current { color: #374151; font-weight: 500; }

/* ── H1 ─────────────────────────────────────────────────────── */
.product-h1 {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 24px;
  line-height: 1.4;
  word-break: break-word;
}

/* ── Section heading (H2) ───────────────────────────────────── */
.section-h2 {
  font-size: 17px;
  font-weight: 600;
  color: #111827;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 8px;
  margin: 0 0 14px;
}
.section-h2 .compare-subtitle {
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
  margin-left: 8px;
}

/* ── Spec table (SSOT §18.2·§18.3) ─────────────────────────── */
.spec-section { margin-bottom: 32px; }
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 14px;
}
.spec-table th[scope="row"] {
  text-align: left;
  padding: 8px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  width: 160px;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
  vertical-align: top;
}
.spec-table td {
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  color: #111827;
  vertical-align: top;
  word-break: break-word;
}
/* LMG SKU 볼드 (VWR 패턴, SSOT §18.3) */
.spec-table th.spec-th-bold {
  font-weight: 700;
  color: #111827;
}
.spec-vendor-link, .spec-target-link { color: var(--accent); }
.spec-vendor-link:hover, .spec-target-link:hover { text-decoration: underline; }

/* ── Datasheet link ─────────────────────────────────────────── */
.datasheet-link-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.btn-datasheet {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: var(--accent);
  color: #fff;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.btn-datasheet:hover { background: var(--brand); text-decoration: none; color: #fff; }
.datasheet-provider { font-size: 12px; color: #9ca3af; }

/* ── Inquiry section (§4) ───────────────────────────────────── */
.inquiry-section { margin-bottom: 32px; }
.inquiry-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.btn-inquiry {
  display: inline-block;
  padding: 10px 20px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
}
.btn-inquiry:hover { background: var(--brand); text-decoration: none; color: #fff; }
.inq-meta-inline { font-size: 12px; color: #6b7280; }

/* sticky CTA bar btn override */
.sticky-inquiry-btn {
  width: 100%;
  text-align: center;
  padding: 12px;
  font-size: 15px;
}

/* ── Inquiry modal (CSS :target trick) ─────────────────────── */
.inquiry-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.45);
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 16px;
}
.inquiry-modal-backdrop:target { display: flex; }

.inquiry-modal-box {
  background: #fff;
  border-radius: var(--r);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  width: 100%;
  max-width: 480px;
  padding: 24px;
  position: relative;
}
.inquiry-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.inquiry-modal-title { font-size: 18px; font-weight: 700; color: #111827; }
.inquiry-modal-close {
  font-size: 18px;
  color: #6b7280;
  text-decoration: none;
  line-height: 1;
  padding: 4px 8px;
}
.inquiry-modal-close:hover { color: #111827; text-decoration: none; }

/* ── Inquiry form ───────────────────────────────────────────── */
.inquiry-form { display: flex; flex-direction: column; gap: 12px; }
.inq-field { display: flex; flex-direction: column; gap: 4px; }
.inq-label { font-size: 13px; font-weight: 500; color: #374151; }
.req-mark { color: #dc2626; }
.inq-input {
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-family: inherit;
  color: #111827;
}
.inq-input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

/* 선택 입력 접힘 (2026-09-06 — 첫 문의는 이메일 1칸. 나머지는 열어보는 사람만) */
.inq-optional { margin: 2px 0 4px; }
.inq-optional > summary {
  cursor: pointer;
  font-size: 13px;
  color: #6b7280;
  list-style: none;
  padding: 6px 0;
  user-select: none;
}
.inq-optional > summary::-webkit-details-marker { display: none; }
.inq-optional > summary::before { content: "+ "; font-weight: 700; }
.inq-optional[open] > summary::before { content: "\2212 "; }
.inq-optional > summary:hover { color: #374151; }
.inq-optional[open] { display: flex; flex-direction: column; gap: 12px; }
.inq-textarea {
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-family: inherit;
  resize: vertical;
  min-height: 72px;
  color: #111827;
}
.inq-textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.inq-privacy .inq-privacy-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: #4b5563;
  cursor: pointer;
}
.btn-inq-submit {
  padding: 11px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.btn-inq-submit:hover { background: var(--brand); }
.btn-inq-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.inq-result { font-size: 12px; text-align: center; min-height: 16px; margin: 4px 0 0; }
.inq-meta-label {
  font-size: 12px;
  color: #9ca3af;
  text-align: center;
  margin: 10px 0 0;
}

/* ── Layer 0 table (§5) ─────────────────────────────────────── */
.layer0-section { margin-bottom: 32px; }
.layer0-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 12px;
}
.layer0-table th {
  text-align: left;
  padding: 7px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  font-weight: 500;
  color: #374151;
  font-size: 12px;
}
.layer0-table td {
  padding: 7px 12px;
  border: 1px solid #e5e7eb;
  color: #111827;
}
.layer0-current td { background: #f3f8f8; }
.current-dot { color: var(--accent); font-size: 10px; }
.col-check { width: 36px; text-align: center; }
.layer0-cta-row { margin-top: 8px; }
.btn-layer0, .btn-compare { font-size: 13px; padding: 8px 16px; }
.mono { font-family: ui-monospace, monospace; font-size: 12px; }

/* ── Compare table (§6) ─────────────────────────────────────── */
.compare-section { margin-bottom: 32px; }
.compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 12px;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 600px;
}
.compare-table th {
  text-align: left;
  padding: 8px 10px;
  background: var(--brand);
  border: 1px solid var(--brand);
  font-weight: 600;
  color: #fff;
  font-size: 11.5px;
  white-space: nowrap;
}
.compare-table td {
  padding: 7px 10px;
  border: 1px solid var(--line2);
  color: #111827;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.compare-current td { background: #f3f8f8; }
.compare-current-label { font-size: 11px; color: var(--accent); font-weight: 600; }
.compare-link { color: var(--accent); font-size: 12px; white-space: nowrap; }
.compare-link:hover { text-decoration: underline; }
.compare-cta-row { margin-top: 8px; }

/* ── Related products (§7) ─────────────────────────────────── */
.related-l1-section, .related-l2-section { margin-bottom: 32px; }
.related-cat-h3 {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin: 12px 0 6px;
}
.related-l1-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.related-l1-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}
.related-link { color: var(--accent); font-weight: 500; }
.related-link:hover { text-decoration: underline; }
.related-name { color: #6b7280; font-size: 12px; }

/* L2 grid 2×3 cards */
.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.related-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.related-card:hover { border-color: var(--accent); box-shadow: 0 1px 4px rgba(12,85,112,0.1); text-decoration: none; }
.related-card-catno { font-size: 13px; font-weight: 600; color: var(--accent); font-family: ui-monospace, monospace; }
.related-card-name { font-size: 12px; color: #6b7280; line-height: 1.4; }

/* L3 category hub link */
.related-l3-link {
  margin-top: 12px;
  font-size: 13px;
}
.related-l3-link a { color: var(--accent); }
.related-l3-link a:hover { text-decoration: underline; }

/* ============================================================
   Phase 6 — Sub Hub styles (SSOT §14)
   ============================================================ */

/* Sub hub container */
.sub-hub {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 56px;
}

/* Sub hub H1 */
.sub-hub-h1 {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 24px;
  line-height: 1.35;
}

/* 서브 허브 한국어 소개문 (2026-09-01).
   제품 원문이 없는 벤더(NIBSC 등)에서는 이 문단이 페이지의 유일한 본문이다. */
.sub-hub-intro {
  max-width: 62em;
  margin: 0 0 24px;
  line-height: 1.75;
  color: var(--text-secondary, #444);
}

/* §3 Vendor 카드 */
.sub-hub-vendor-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: var(--r);
  padding: 18px 22px;
  margin-bottom: 28px;
}
.shvc-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.shvc-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.shvc-vendor-name {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}
.shvc-meta {
  font-size: 13px;
  color: #6b7280;
}
.shvc-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.shvc-btn {
  display: inline-block;
  padding: 8px 18px;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.btn-secondary { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
.btn-secondary:hover { background: #e5e7eb; text-decoration: none; color: #111827; }
.btn-inquiry { background: var(--accent); color: #fff; }
.btn-inquiry:hover { background: var(--brand); text-decoration: none; color: #fff; }
.btn-vendor-inq { background: var(--accent); color: #fff; }
.btn-vendor-inq:hover { background: var(--brand); text-decoration: none; color: #fff; }

/* §4 통계 카드 */
.sub-hub-stats { margin-bottom: 28px; }
.sh-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.sh-stat-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--r);
  padding: 14px 16px;
}
.sh-stat-title {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sh-stat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sh-stat-table tr { border-bottom: 1px solid #f3f4f6; }
.sh-stat-table tr:last-child { border-bottom: none; }
.sh-stat-label { padding: 5px 0; color: #374151; }
.sh-stat-val { padding: 5px 0; text-align: right; color: #6b7280; font-variant-numeric: tabular-nums; }

/* §5 사양 분포 표 */
.sub-hub-spec-dist { margin-bottom: 28px; }
.sh-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sh-spec-table th {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  padding: 9px 14px;
  font-weight: 600;
  color: #374151;
  text-align: left;
}
.sh-spec-table td {
  border: 1px solid #e5e7eb;
  padding: 9px 14px;
  color: #374151;
}
.sh-spec-table tr:nth-child(even) td { background: #f9fafb; }

/* §6 Product 리스트 테이블 */
.sub-hub-products { margin-bottom: 28px; }
.sh-table-wrap { overflow-x: auto; }
.sh-product-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 560px;
}
.sh-product-table th {
  background: #1e3a5f;
  color: #fff;
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
}
.sh-product-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}
.sh-product-table tr:hover td { background: #f3f8f8; }
.sh-cat-no a { font-family: ui-monospace, monospace; font-size: 12px; color: var(--accent); }
.sh-cat-no a:hover { text-decoration: underline; }
.sh-prod-name { max-width: 280px; }

/* §7 페이지네이션 */
.sh-pagination { margin: 24px 0; }
.sh-page-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0 0 8px;
}
.sh-page-btn {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #e5e7eb;
  border-radius: var(--r);
  font-size: 13px;
  color: #374151;
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s;
}
.sh-page-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; background: #f3f8f8; }
.sh-page-active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.sh-page-active:hover { background: var(--brand); }
.sh-page-note { font-size: 12px; color: #9ca3af; }

/* §8 관련 카테고리 chip */
.sub-hub-related { margin-bottom: 28px; }
.sh-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-cat-chip {
  display: inline-block;
  padding: 6px 14px;
  background: #f3f6fa;
  color: #0c5570;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #dbe7ef;
  transition: background 0.12s;
}
.sh-cat-chip:hover { background: #dbe7ef; text-decoration: none; }

/* ============================================================
   Phase 6 — Category Hub styles (SSOT §15)
   ============================================================ */

/* Category hub container */
.category-hub {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 56px;
}

/* Category hub H1 */
.category-hub-h1 {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 24px;
  line-height: 1.35;
}

/* §3 Vendor 분포 표 */
.ch-vendor-dist { margin-bottom: 32px; }
.ch-table-wrap { overflow-x: auto; }
.ch-vendor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 480px;
}
.ch-vendor-table th {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  padding: 10px 14px;
  font-weight: 600;
  color: #374151;
  text-align: left;
  white-space: nowrap;
}
.ch-th-num, .ch-td-num { text-align: right; }
.ch-th-pct, .ch-td-pct { text-align: right; width: 56px; }
.ch-th-bar { width: 120px; }
.ch-vendor-table td {
  border: 1px solid #e5e7eb;
  padding: 10px 14px;
  vertical-align: middle;
}
.ch-vendor-table tr:nth-child(even) td { background: #f9fafb; }
.ch-vendor-link { color: var(--accent); font-weight: 600; }
.ch-vendor-link:hover { text-decoration: underline; }
.ch-bar-wrap {
  width: 100%;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}
.ch-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  min-width: 2px;
}
.ch-sub-hub-link { font-size: 13px; color: var(--accent); }
.ch-sub-hub-link:hover { text-decoration: underline; }
.ch-hub-only-label { font-size: 12px; color: #9ca3af; }
.ch-no-sub { color: #d1d5db; }

/* §4 통계 카드 */
.ch-stats { margin-bottom: 28px; }
.ch-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.ch-stat-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--r);
  padding: 14px 16px;
}
.ch-stat-title {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ch-stat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ch-stat-table tr { border-bottom: 1px solid #f3f4f6; }
.ch-stat-table tr:last-child { border-bottom: none; }
.ch-stat-label { padding: 5px 0; color: #374151; }
.ch-stat-val { padding: 5px 0; text-align: right; color: #6b7280; font-variant-numeric: tabular-nums; }

/* §5 사양 분포 표 */
.ch-spec-dist { margin-bottom: 28px; }
.ch-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ch-spec-table th {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  padding: 9px 14px;
  font-weight: 600;
  color: #374151;
  text-align: left;
}
.ch-spec-table td {
  border: 1px solid #e5e7eb;
  padding: 9px 14px;
  color: #374151;
}
.ch-spec-table tr:nth-child(even) td { background: #f9fafb; }

/* §6 gene Top 20 chip grid */
.ch-targets { margin-bottom: 28px; }
.ch-target-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.ch-target-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  border: 1px solid #e5e7eb;
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: border-color 0.12s, box-shadow 0.12s;
  text-align: center;
}
.ch-target-chip:hover { border-color: var(--accent); box-shadow: 0 1px 4px rgba(12,85,112,0.1); text-decoration: none; }
.ch-gene { font-size: 13px; font-weight: 700; color: #111827; }
.ch-gene-count { font-size: 11px; color: #9ca3af; margin-top: 3px; }
.ch-targets-note { font-size: 12px; color: #9ca3af; margin-top: 6px; }

/* §7 관련 카테고리 */
.ch-related-cats { margin-bottom: 28px; }
.ch-related-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-related-chip {
  display: inline-block;
  padding: 7px 16px;
  background: #f3f6fa;
  color: #0c5570;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #dbe7ef;
  transition: background 0.12s;
}
.ch-related-chip:hover { background: #dbe7ef; text-decoration: none; }

/* ============================================================
   Phase 6 — Megamenu vendor panel (SSOT §16)
   ============================================================ */

.mega-vendors {
  min-width: 680px;
  padding: 18px 20px;
}
.mega-vendors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 10px;
}
.mega-vendor-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: var(--r);
  text-decoration: none;
  color: #111827;
  transition: background 0.12s;
}
.mega-vendor-card:hover { background: #f3f6fa; text-decoration: none; color: #111827; }
.mvc-name { font-size: 14px; font-weight: 600; }
.mvc-count { font-size: 12px; color: #9ca3af; }
.mvc-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  background: #fef3c7;
  color: #92400e;
  font-weight: 600;
}
.mega-vendors-note { font-size: 11px; color: #9ca3af; border-top: 1px solid #f3f4f6; padding-top: 8px; }

/* target 검색 form in megamenu */
.mega-targets-search {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.mega-targets-input {
  flex: 1;
  border: 1px solid #e5e7eb;
  border-radius: var(--r);
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  color: #1f2937;
}
.mega-targets-input:focus { border-color: #0c5570; box-shadow: 0 0 0 3px rgba(12,85,112,0.1); }
.mega-targets-btn {
  border: 0;
  background: #0c5570;
  color: #fff;
  border-radius: var(--r);
  padding: 0 14px;
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
}
.mega-targets-btn:hover { background: #094457; }

/* Mobile accordion */
.md-accordion-item details { padding: 0; }
.md-accordion-summary {
  display: block;
  padding: 12px 14px;
  border-radius: var(--r);
  font-size: 16px;
  color: #111827;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: background 0.12s;
}
.md-accordion-summary::-webkit-details-marker { display: none; }
.md-accordion-summary::after {
  content: " ›";
  float: right;
  transition: transform 0.2s;
  color: #9ca3af;
}
details[open] .md-accordion-summary::after { transform: rotate(90deg); }
.md-accordion-summary:hover { background: #f3f6fa; }
.md-sub-list { list-style: none; padding: 4px 0 4px 20px; margin: 0; }
.md-sub-list a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--r);
  font-size: 14px;
  color: #374151;
  text-decoration: none;
}
.md-sub-list a:hover { background: #f3f6fa; color: #0c5570; }
.md-hub-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 3px;
  margin-left: 4px;
  font-weight: 600;
}

/* nav-link-cta (견적문의 강조) */
.nav-link-cta { color: var(--brand) !important; font-weight: 700 !important; }
.nav-link-cta:hover { background: rgba(12,85,112,0.08) !important; }

/* Responsive adjustments */
@media (max-width: 960px) {
  .mega-vendors-grid { grid-template-columns: 1fr; }
  .ch-target-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .sub-hub-h1 { font-size: 20px; }
  .category-hub-h1 { font-size: 20px; }
  .shvc-inner { flex-direction: column; }
  .ch-target-grid { grid-template-columns: repeat(2, 1fr); }
  .sh-product-table th, .sh-product-table td { padding: 8px 10px; font-size: 12px; }
}

/* ───────────────────────────────────────────────────────────────────────
   Vendor hub 인기 제품 spec block (`20260522-04` — SSOT §3 룰 7 구현)
   list.html § 5 popular_products 박힘
   ─────────────────────────────────────────────────────────────────────── */
.vendor-popular { margin: 32px 0; }
.vendor-popular-note {
  font-size: 13px;
  color: #666;
  margin: -4px 0 16px;
}
.vendor-popular-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: var(--r);
}
.vendor-popular-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: #fff;
}
.vendor-popular-table thead th {
  background: var(--brand);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 0;
  font-weight: 600;
  font-size: 11.5px;
  color: #fff;
  white-space: nowrap;
}
.vendor-popular-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line2);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.vendor-popular-table tbody tr:last-child td { border-bottom: none; }
.vendor-popular-table tbody tr:hover { background: #f3f8f8; }
.vp-th-sku, .vp-td-sku { width: 110px; }
.vp-th-mfr, .vp-td-mfr { width: 170px; }
.vp-th-cat, .vp-td-cat { width: 90px; }
.vp-th-spec, .vp-td-spec { width: 200px; }
.vp-td-sku {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: #888;
}
.vp-link {
  color: var(--accent);
  text-decoration: none;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
}
.vp-link:hover { text-decoration: underline; }
.vp-link-name {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.vp-link-name:hover { text-decoration: underline; }
.vp-td-spec { font-size: 12.5px; color: #555; line-height: 1.5; }
.vp-td-spec .spec-label {
  color: #999;
  font-size: 11.5px;
  margin-right: 2px;
}
.vp-td-desc { font-size: 12.5px; color: #555; line-height: 1.45; }

.cat-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.cat-tag-antibody { background: #e8f0fe; color: var(--accent); }
.cat-tag-elisa    { background: #fce8e6; color: #c5221f; }
.cat-tag-protein  { background: #e6f4ea; color: #137333; }
.cat-tag-other    { background: #f1f3f4; color: #5f6368; }

@media (max-width: 960px) {
  /* tablet: 설명 컬럼 숨김, 핵심 5 컬럼 */
  .vp-th-desc, .vp-td-desc { display: none; }
}
@media (max-width: 640px) {
  /* mobile: SKU·Category 컬럼 숨김, 3 컬럼 (Mfr No / 제품명 / 스펙) */
  .vp-th-sku, .vp-td-sku,
  .vp-th-cat, .vp-td-cat { display: none; }
  .vendor-popular-table thead th,
  .vendor-popular-table tbody td { padding: 8px 10px; font-size: 12px; }
}

/* ───────────────────────────────────────────────────────────────────────
   Product page sidebar (Phase 5c.1 복원 박힘, `20260523-01`)
   layout grid: main + sticky sidebar (desktop), single column (mobile)
   ─────────────────────────────────────────────────────────────────────── */
.product-layout {
  display: block;
}
.product-main {
  min-width: 0;
}
.product-sidebar {
  margin-top: 32px;
}
.sidebar-inquiry-box {
  padding: 18px;
  border: 1px solid #e5e7eb;
  border-radius: var(--r);
  background: #fff;
}
.sidebar-inq-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 14px;
}
.sidebar-copy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #f9fafb;
  border-radius: var(--r);
  margin-bottom: 8px;
  gap: 8px;
}
.sidebar-copy-row:last-of-type { margin-bottom: 14px; }
.sidebar-copy-row .copy-info { min-width: 0; }
.sidebar-copy-row .copy-label {
  font-size: 11px;
  color: #6b7280;
  display: block;
}
.sidebar-copy-row .copy-value {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  word-break: break-all;
}
.sidebar-copy-row .copy-btn {
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--accent);
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
}
.pd-inq-toggle-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.pd-inq-toggle-btn:hover { background: var(--brand); }
.pd-inq-wrap { margin-top: 14px; }
.pd-inq-form .pd-inq-label {
  display: block;
  font-size: 12px;
  color: #374151;
  font-weight: 500;
  margin: 0 0 4px;
}
.pd-inq-form .req { color: #dc2626; }
.pd-inq-form .opt { color: #9ca3af; font-weight: 400; }
.pd-inq-input, .pd-inq-textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  margin-bottom: 10px;
  box-sizing: border-box;
  font-family: inherit;
}
.pd-inq-textarea { resize: vertical; }
.pd-inq-checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.pd-inq-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
}
.pd-inq-consent {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: #4b5563;
  margin-bottom: 10px;
  cursor: pointer;
}
.pd-inq-consent input { margin-top: 2px; flex-shrink: 0; }
.pd-inq-consent a { color: var(--accent); }
.pd-inq-submit-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.pd-inq-submit-btn:hover { background: var(--brand); }
.pd-inq-submit-btn:disabled { background: #9ca3af; cursor: not-allowed; }
.pd-inq-result {
  margin: 10px 0 0;
  font-size: 12px;
  text-align: center;
  min-height: 16px;
}

/* Desktop: 2 column layout (main + sticky sidebar) */
@media (min-width: 960px) {
  .product-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: start;
  }
  .product-sidebar {
    margin-top: 0;
    position: sticky;
    top: 80px;
  }
}


/* ── 제품 개요 (AI 요약) — SSOT §2.1 배치 / §2.2 고지 UX ─────────
   고지 1줄은 **항상 보임**(호버 의존 금지, §2.2 안티-패턴).
   ⓘ 상세만 <details>로 접는다 = JS 0. 모바일은 탭으로 열린다. */
.aidesc-section { margin-bottom: 32px; }
.aidesc-section .section-h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.aidesc-src {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}
/* ⓘ 펼침 — summary 마커 제거하고 ⓘ 글리프로 대체 */
.aidesc-note { display: inline; }
.aidesc-note > summary {
  display: inline;
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  margin-left: 4px;
}
.aidesc-note > summary::-webkit-details-marker { display: none; }
.aidesc-note > summary::after { content: "ⓘ"; }
.aidesc-note[open] > summary::after { content: "ⓘ"; }
.aidesc-note > span {
  display: block;
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: normal;
  max-width: 340px;
}
.aidesc-body {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink);
}
.aidesc-body p { margin: 0 0 10px; }
.aidesc-body p:last-child { margin-bottom: 0; }
.aidesc-foot {
  margin-top: 10px;
  text-align: right;
  font-size: var(--fs-xs);
}
.aidesc-foot a { color: var(--muted); text-decoration: underline; }
.aidesc-foot a:hover { color: var(--brand-l); }

/* ── Vendor hub 소개 블록 (2026-09-04) ──────────────────────────
   intro_ko 가 다문단이 되면서 드러난 미스타일 구간.
   템플릿의 <p class=vendor-intro-text> 는 markdownify 가 만든 <p> 를
   중첩시켜 브라우저가 래퍼를 강제로 닫았다 → <div> 로 교체하고 여기서 잡는다. */
.vendor-intro { margin: 0 0 36px; }
.vendor-intro-text { margin: 0 0 20px; }
.vendor-intro-text p { margin: 0 0 15px; line-height: 1.8; color: #374151; }
.vendor-intro-text p:last-child { margin-bottom: 0; }
.vendor-meta-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 12px 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.vendor-meta-item { font-size: 14px; color: #374151; }
.vmeta-label { color: #6b7280; font-size: 12px; margin-right: 4px; }
/* 벤더 허브 섹션 간 공통 여백 — section-h2 에 top margin 이 없어
   모든 섹션 제목이 앞 블록에 붙던 문제 (2026-09-04) */
.vendor-categories,
.vendor-popular,
.vendor-featured,
.vendor-official,
.vendor-inquiry { margin: 36px 0 0; }
.vendor-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.vendor-cat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  text-decoration: none;
  color: #111827;
  font-size: 14px;
  font-weight: 500;
  transition: border-color .15s, background .15s;
}
a.vendor-cat-card:hover { border-color: #0f766e; background: #f0fdfa; }
.cat-card-arrow { color: #9ca3af; font-size: 13px; }
.vendor-cat-nolink { color: #6b7280; background: #f9fafb; }
.vendor-cat-note { margin: 12px 0 0; font-size: 13px; color: #6b7280; }
/* ────────────────────────────────────────────────────────────────────────
   components.css — design_refresh 2026-06-22 신규 컴포넌트
   킥페이지/홈 목업(mockups/design_refresh/*.html)의 컴포넌트 클래스.
   concat 마지막 로드(main.css override 가능). tokens.css 변수 사용.
   Task B(util바)·C(킥페이지 비교테이블)·D(홈 funnel)에서 채움.
   ──────────────────────────────────────────────────────────────────────── */

/* ── util 다크바 (Task B) ── */
.util-bar {
  background: var(--brand-d);
  color: #cfe0e3;
  font-size: 12px;
}
.util-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.util-tag { color: #cfe0e3; letter-spacing: 0.01em; }
.util-spacer { margin-left: auto; }
.util-link { color: #cfe0e3; text-decoration: none; transition: color 0.12s; }
.util-link:hover { color: #fff; text-decoration: none; }
@media (max-width: 768px) {
  .util-tag { display: none; }
  .util-inner { justify-content: flex-end; gap: 14px; padding: 0 16px; }
  .util-spacer { display: none; }
}

/* ── 조밀 푸터 (Task B) — main.css의 .site-footer .container 3컬럼 grid override ── */
.site-footer .container {
  display: block;
}
.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.footer-col { display: flex; flex-direction: column; gap: 6px; }
.footer-col b {
  font-size: 12.5px;
  color: var(--ink);
  margin-bottom: 4px;
  font-weight: 700;
}
.footer-col a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.12s;
}
.footer-col a:hover { color: var(--brand); text-decoration: none; }
.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;             /* nav 제거 후 미니멀 사업자정보 = 가운데 정렬 (2026-06-26) */
  gap: 6px;
  padding-top: 4px;
}
.footer-meta .footer-line1 { font-size: 13px; color: var(--ink); }
.footer-meta .footer-line1 strong { font-weight: 700; }
.footer-meta .footer-line2 { font-size: 12px; color: var(--muted); }
.footer-meta .footer-line2 a { color: var(--brand-l); }
.footer-vendor-auth { margin-top: 12px; }
.footer-vendor-auth p { font-size: 12px; color: var(--muted); }
.footer-vendor-auth a { color: var(--brand-l); }
.site-footer .footer-copyright { text-align: center; margin-top: 14px; }
@media (max-width: 768px) {
  .footer-nav { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ════════════════════════════════════════════════════════════════════════
   홈(index.html) — design_refresh 목업 home_cst_codex.html 이식 (Task D)
   전부 .home2 스코프 (main.css 글로벌 section/h2 등과 충돌 방지)
   ════════════════════════════════════════════════════════════════════════ */
.home2 { font-size: 14px; line-height: 1.6; }
.home2 .num { font-variant-numeric: tabular-nums; }
.home2 .wrap { max-width: 1240px; margin: 0 auto; padding: 0 22px; }

/* 히어로 */
.home2 .hero { position: relative; min-height: 520px; color: #fff;
  background: var(--brand-d) url("/img/brand/hero_science.jpg") center/cover no-repeat; overflow: hidden; }
.home2 .hero:before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(9,63,83,.97) 0%, rgba(9,63,83,.93) 42%, rgba(9,63,83,.7) 70%, rgba(9,63,83,.46) 100%); }
.home2 .hero .wrap { position: relative; z-index: 1; display: flex; align-items: center; min-height: 520px; }
.home2 .hero-copy { width: min(690px,100%); padding: 54px 0 58px; }
.home2 .eyebrow { font-size: 13px; color: #a9cfd1; margin-bottom: 13px; font-weight: 700; }
.home2 .hero h1 { font-size: 42px; font-weight: 800; line-height: 1.17; letter-spacing: -.02em; margin-bottom: 14px; color: #fff; }
.home2 .hero h1 span { color: #fff; border-bottom: 3px solid var(--accent); }
.home2 .hero p { color: #d6e5e7; font-size: 15.5px; line-height: 1.75; margin-bottom: 24px; max-width: 660px; }
.home2 .bigbar { display: flex; border-radius: var(--r); overflow: hidden; border: 1px solid rgba(255,255,255,.34); background: #fff; width: min(650px,100%); }
.home2 .bigbar input { flex: 1; border: 0; padding: 15px 16px; font-size: 15px; outline: none; color: var(--ink); min-width: 0; }
.home2 .bigbar button { border: 0; background: var(--accent); color: #fff; font-weight: 800; padding: 0 26px; font-size: 15px; cursor: pointer; }
.home2 .qt { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; align-items: center; width: min(660px,100%); }
.home2 .qt > span { font-size: 12px; color: #a9cfd1; font-weight: 700; }
.home2 .qt a { border: 1px solid rgba(158,195,198,.48); border-radius: var(--r); padding: 5px 10px; font-size: 12.5px; color: #edf6f7; background: rgba(12,85,112,.42); }
.home2 .qt a:hover { background: rgba(23,99,201,.36); border-color: rgba(255,255,255,.7); }
.home2 .hero-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; width: min(650px,100%); margin-top: 24px; }
.home2 .hero-facts .f { border: 1px solid rgba(207,224,227,.32); border-radius: var(--r); padding: 11px 12px; background: rgba(9,63,83,.48); }
.home2 .hero-facts b { display: block; font-size: 18px; color: #fff; line-height: 1.15; }
.home2 .hero-facts .f span { display: block; margin-top: 3px; font-size: 11.5px; color: #bad3d6; }

/* 제조사 밴드 */
.home2 .mfrband { border-bottom: 1px solid var(--line); background: var(--soft); }
.home2 .mfrband .wrap { display: flex; align-items: center; gap: 24px; min-height: 66px; padding-top: 12px; padding-bottom: 12px; }
.home2 .mfrband .lab { font-size: 11.5px; color: var(--muted); font-weight: 800; white-space: nowrap; border-right: 1px solid var(--line); padding-right: 22px; line-height: 1.35; }
.home2 .mfrband ul { list-style: none; display: flex; gap: 20px 24px; flex-wrap: wrap; margin: 0; padding: 0; }
.home2 .mfrband li a { font-weight: 800; color: #475762; font-size: 15px; opacity: .86; letter-spacing: -.01em; }
.home2 .mfrband li a:hover { color: var(--brand); opacity: 1; }

/* 섹션 공통 */
.home2 .sec { padding: 42px 0; }
.home2 .sec-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; gap: 16px; }
.home2 .sec-h h2 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.home2 .sec-h .more { font-size: 13px; color: var(--brand-l); font-weight: 800; white-space: nowrap; }
.home2 .sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }

/* 표적 그리드 */
.home2 .tgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; }
.home2 .tgt { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 15px; background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 14px; transition: border-color .15s, background .15s; }
.home2 .tgt:hover { border-color: var(--brand-l); background: #f8fbfb; }
.home2 .tgt .g { font-weight: 800; font-size: 15px; line-height: 1.25; }
.home2 .tgt .g small { display: block; font-weight: 500; font-size: 11px; color: var(--muted); margin-top: 3px; }
.home2 .tgt .c { text-align: right; white-space: nowrap; }
.home2 .tgt .c b { font-size: 15px; color: var(--brand); }
.home2 .tgt .c small { display: block; font-size: 11px; color: var(--muted); }
.home2 .tgt.featured { border-color: var(--brand); background: #f3f8f8; }
.home2 .tgt.featured .g { color: var(--brand); }

/* CD4 비교 미리보기 */
.home2 .compare-preview { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.home2 .compare-preview .ph { display: flex; align-items: center; gap: 10px; justify-content: space-between; background: var(--soft); border-bottom: 1px solid var(--line); padding: 10px 14px; font-size: 12.5px; color: var(--muted); }
.home2 .compare-preview .ph b { color: var(--ink); font-size: 14px; }
.home2 .ctbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.home2 .ctbl th { background: var(--brand); color: #fff; text-align: left; padding: 8px 10px; font-weight: 600; font-size: 11.5px; white-space: nowrap; }
.home2 .ctbl td { padding: 8px 10px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.home2 .ctbl tr:last-child td { border-bottom: 0; }
.home2 .ctbl tbody tr:hover td { background: #f3f8f8; }
.home2 .ctbl .mfr { font-weight: 800; color: var(--brand); }
.home2 .ctbl .cat { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: #23323c; white-space: nowrap; }
.home2 .ctbl .mfrno { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); white-space: nowrap; }
.home2 .ctbl tbody tr { cursor: pointer; }
.home2 .pv-more { display: block; text-align: center; padding: 11px; font-size: 12.5px; color: var(--brand-l); font-weight: 800; border-top: 1px solid var(--line2); background: var(--soft); }
.home2 .badge { display: inline-block; border: 1px solid var(--line); border-radius: 2px; padding: 1px 6px; font-size: 11px; color: #465761; background: var(--soft); white-space: nowrap; }

/* 제품군 */
.home2 .cats { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; }
.home2 .catc { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; background: #fff; min-height: 118px; transition: border-color .15s; }
.home2 .catc:hover { border-color: var(--brand-l); }
.home2 .catc b { font-size: 15px; }
.home2 .catc .s { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.55; }
.home2 .catc .n { font-size: 12.5px; color: var(--brand); font-weight: 800; margin-top: 8px; }

/* 신뢰 수치 밴드 */
.home2 .trust { background: var(--brand-d); color: #fff; }
.home2 .trust .wrap { display: flex; gap: 0; padding-top: 30px; padding-bottom: 30px; }
.home2 .trust .t { flex: 1; text-align: center; border-right: 1px solid #1c4451; padding: 0 14px; }
.home2 .trust .t:last-child { border-right: 0; }
.home2 .trust .t b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.home2 .trust .t span { font-size: 12.5px; color: #9ec3c6; }

/* CTA */
.home2 .cta { border: 0; border-radius: var(--r); padding: 30px 34px; background: var(--brand-d); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.home2 .cta h2 { font-size: 20px; margin-bottom: 7px; color: #fff; }
.home2 .cta p { color: #b9d2d6; font-size: 13.5px; }
.home2 .cta a { display: inline-block; background: var(--accent); color: #fff; font-weight: 800; padding: 14px 30px; border-radius: var(--r); white-space: nowrap; font-size: 15px; }
.home2 .cta a:hover { background: #1252a8; color: #fff; text-decoration: none; }
.home2 .cta a.alt { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.45); margin-left: 8px; }
.home2 .cta a.alt:hover { background: rgba(255,255,255,.1); }

@media (max-width: 980px) {
  .home2 .hero { min-height: 500px; background-position: 62% center; }
  .home2 .hero:before { background: linear-gradient(90deg, rgba(9,63,83,.98) 0%, rgba(9,63,83,.9) 56%, rgba(9,63,83,.42) 100%); }
  .home2 .hero h1 { font-size: 34px; }
  .home2 .tgrid, .home2 .cats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 720px) {
  .home2 .hero, .home2 .hero .wrap { min-height: 0; }
  .home2 .hero { background-position: 70% center; }
  .home2 .hero:before { background: linear-gradient(90deg, rgba(9,63,83,.98) 0%, rgba(9,63,83,.94) 72%, rgba(9,63,83,.65) 100%); }
  .home2 .hero-copy { padding: 42px 0; }
  .home2 .hero h1 { font-size: 30px; }
  .home2 .hero p { font-size: 14px; }
  .home2 .bigbar { display: grid; grid-template-columns: 1fr 76px; }
  .home2 .bigbar button { padding: 0; }
  .home2 .hero-facts { grid-template-columns: 1fr; }
  .home2 .mfrband .wrap { align-items: flex-start; }
  .home2 .mfrband ul { gap: 10px 16px; }
  .home2 .mfrband li a { font-size: 13px; }
  .home2 .sec { padding: 32px 0; }
  .home2 .sec-h { display: block; }
  .home2 .sec-h .more { display: inline-block; margin-top: 5px; }
  .home2 .tgrid, .home2 .cats { grid-template-columns: 1fr; }
  .home2 .compare-preview { overflow-x: auto; }
  .home2 .trust .wrap { display: grid; grid-template-columns: 1fr 1fr; }
  .home2 .trust .t { border-right: 1px solid #1c4451; border-bottom: 1px solid #1c4451; padding: 16px 10px; }
  .home2 .trust .t:nth-child(2n) { border-right: 0; }
  .home2 .trust .t:nth-last-child(-n+2) { border-bottom: 0; }
  .home2 .cta { display: block; }
  .home2 .cta .btns { margin-top: 16px; }
  .home2 .cta a { margin-bottom: 6px; }
  .home2 .cta a.alt { margin-left: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   킥 페이지 = 표적 비교 허브 (target/single.html) — 목업 target_cd4_refined 이식 (Task C)
   전부 .thub 스코프. sticky offset = 실제 .site-header 높이(80px) 기준.
   ════════════════════════════════════════════════════════════════════════ */
.thub { font-size: 14px; line-height: 1.6; color: var(--ink); }
.thub .num { font-variant-numeric: tabular-nums; }
.thub-wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

/* breadcrumb */
.thub .bc { border-bottom: 1px solid var(--line2); background: var(--soft); font-size: 12px; color: var(--muted); }
.thub .bc .thub-wrap { height: 36px; display: flex; align-items: center; gap: 7px; }
.thub .bc a { color: var(--muted); }
.thub .bc a:hover { color: var(--brand); }
.thub .bc b { color: #39464f; }

/* target header */
.thub .thead { padding: 24px 0 18px; border-bottom: 1px solid var(--line); }
.thub .thead .thub-wrap { display: flex; align-items: flex-start; gap: 26px; }
.thub .tt { flex: 1; min-width: 0; }
.thub .tt h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
.thub .tt .ali { font-size: 15px; color: var(--muted); margin-top: 4px; }
.thub .facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.thub .facts .f { border: 1px solid var(--line); border-radius: var(--r); padding: 5px 10px; font-size: 12px; color: #3a4751; background: #fff; }
.thub .facts .f b { color: var(--ink); }
.thub .facts .f a { color: var(--brand-l); font-weight: 600; }
/* cover 박스: 제조사(좌, 2~3줄) | 카탈로그 건수(우) */
.thub .cover { margin-left: auto; flex: none; width: 500px; border: 1px solid var(--line); border-radius: var(--r); padding: 13px 16px; background: var(--soft); display: flex; gap: 16px; align-items: stretch; }
.thub .cover .lab { font-size: 11px; color: var(--muted); font-weight: 600; margin-bottom: 7px; }
.thub .cover-mf { flex: 1; min-width: 0; }
.thub .cover-mf .mf { display: flex; flex-wrap: wrap; gap: 4px; }
.thub .cover-mf .mf a { font-size: 11px; font-weight: 700; color: #465761; border: 1px solid var(--line); border-radius: 2px; padding: 2px 6px; background: #fff; }
.thub .cover-mf .mf a:hover { border-color: var(--brand-l); color: var(--brand); }
.thub .cover-count { flex: none; text-align: right; border-left: 1px solid var(--line); padding-left: 14px; display: flex; flex-direction: column; justify-content: center; }
.thub .cover-count .big { font-size: 24px; font-weight: 800; color: var(--brand); line-height: 1.1; white-space: nowrap; }
.thub .cover-count .big span { font-size: 12px; color: var(--muted); font-weight: 600; margin-left: 2px; }

/* gene summary + sources */
.thub .gene { padding: 22px 0; border-bottom: 1px solid var(--line); background: #fff; }
.thub .gene .thub-wrap { display: grid; grid-template-columns: 1fr 280px; gap: 30px; }
.thub .gene h2 { font-size: 14px; font-weight: 700; color: var(--brand); margin-bottom: 8px; }
.thub .gene-prose { font-size: 13.5px; color: #37444e; line-height: 1.75; }
.thub .gene-prose p { margin-bottom: 8px; }
.thub .tagrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.thub .tag { display: inline-block; border: 1px solid var(--line); border-radius: var(--r); padding: 3px 8px; font-size: 12px; color: #374151; background: var(--soft); }
.thub .tag.dz { background: var(--soft); border-color: var(--line); color: var(--brand-l); }
.thub .src { border-left: 2px solid var(--line); padding-left: 16px; }
.thub .src .lab { font-size: 11px; color: var(--muted); font-weight: 600; margin-bottom: 9px; }
.thub .src ul { list-style: none; display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; }
.thub .src li { font-size: 12.5px; }
.thub .src li a { color: var(--brand-l); font-weight: 600; }
.thub .src li small { color: var(--muted); display: block; font-weight: 400; }

/* sticky type tabs */
.thub .tabs { position: sticky; top: 80px; background: #fff; border-bottom: 1px solid var(--line); z-index: 15; }
.thub .tabs .thub-wrap { display: flex; gap: 0; overflow-x: auto; }
.thub .ctab { padding: 13px 18px; font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; background: none; border-top: 0; border-left: 0; border-right: 0; white-space: nowrap; }
.thub .ctab.active { color: var(--brand); border-bottom-color: var(--accent); }
.thub .ctab .n { color: var(--accent); font-weight: 800; font-size: 12.5px; margin-left: 5px; }

/* comparison tables */
.thub .cmp { padding: 18px 0 30px; }
.thub .cmp .intro { font-size: 12px; color: var(--muted); margin: 4px 0 14px; }
.thub .tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.thub table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 760px; }
.thub table.tbl th { background: var(--brand); color: #fff; text-align: left; padding: 9px 11px; font-weight: 600; font-size: 11.5px; white-space: nowrap; }
.thub table.tbl td { padding: 9px 11px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.thub table.tbl tr:last-child td { border-bottom: 0; }
.thub table.tbl tbody tr:nth-child(even) td { background: #f7fafb; }
.thub table.tbl tbody tr:hover td { background: #eef6f6; }
.thub table.tbl .mfr a { font-weight: 700; color: var(--brand); }
.thub table.tbl .cat a { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; color: #8b97a1; white-space: nowrap; }
.thub table.tbl .nm { min-width: 250px; }
.thub table.tbl .nm a { color: #283641; }
.thub table.tbl .sku { font-weight: 700; white-space: nowrap; }
.thub .qcell { text-align: center; }
.thub .qcell input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }
.thub .more { margin: 12px 0 4px; text-align: center; }
.thub .more a { font-size: 13px; color: var(--brand-l); font-weight: 700; }
.thub .thub-foot { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.thub .thub-foot a { color: var(--brand-l); text-decoration: underline; }

/* 동시견적 sticky 바 */
.thub-quote-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--brand-d); color: #fff; padding: 12px 20px; align-items: center; justify-content: center; gap: 16px;
  box-shadow: 0 -2px 10px rgba(9,63,83,.25); }
.thub-quote-bar .qb-btn { background: var(--accent); color: #fff; padding: 8px 18px; border-radius: var(--r); font-size: 14px; font-weight: 700; text-decoration: none; }
.thub-quote-bar .qb-clear { background: transparent; color: #9ec3c6; border: 0; font-size: 13px; cursor: pointer; }

@media (max-width: 900px) {
  .thub .thead .thub-wrap { display: block; }
  .thub .cover { margin: 16px 0 0; min-width: 0; }
  .thub .gene .thub-wrap { grid-template-columns: 1fr; gap: 18px; }
  .thub .src { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 14px; }
  .thub .tabs { top: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   제품상세(_default/single.html) 리빌딩 — 헤더 + 2단(spec/견적 sticky) (Task E rebuild)
   .pdx 스코프. spec-table/compare-table 등은 main.css(이미 틸 마이그레이션) 재사용.
   ════════════════════════════════════════════════════════════════════════ */
/* 제품 헤더 (full-width) */
.pdx-head { padding: 4px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.pdx-vend { display: inline-block; font-size: 12px; font-weight: 800; color: var(--brand); border: 1px solid var(--line); border-radius: var(--r); padding: 3px 9px; margin-bottom: 10px; text-decoration: none; }
.pdx-vend:hover { border-color: var(--brand-l); }
.pdx-head .product-h1 { font-size: 23px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; margin: 0; }
.pdx-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pdx-facts .f { border: 1px solid var(--line); border-radius: var(--r); padding: 5px 10px; font-size: 12px; color: #3a4751; }
.pdx-facts .f b { color: var(--ink); }
.pdx-facts .f a { color: var(--brand-l); font-weight: 600; }

/* 2단 본문: spec(좌) + 견적 sticky(우) */
.pdx-body { display: flex; gap: 30px; align-items: flex-start; margin-bottom: 8px; }
.pdx-main { flex: 1; min-width: 0; }
.pdx-aside { width: 300px; flex: none; position: sticky; top: 74px; }

/* 견적 cover 박스 (기존 sidebar-inquiry-box 대체 룩) */
.pdx-quote { border: 1px solid var(--line); border-radius: var(--r); background: var(--soft); padding: 16px; }
.pdx-qrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.pdx-qrow:last-of-type { border-bottom: 0; }
.pdx-qk { font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.pdx-qv { font-size: 13px; font-weight: 700; text-align: right; word-break: break-all; }
.pdx-qv.sku { color: var(--brand); font-family: ui-monospace, Menlo, monospace; }
.pdx-qv.mono { font-family: ui-monospace, Menlo, monospace; font-weight: 600; font-size: 12px; }
.pdx-qv.ok { color: var(--ok); }
.pdx-copy { border: 0; background: none; color: var(--brand-l); font-size: 11px; font-weight: 700; cursor: pointer; padding: 0 0 0 6px; white-space: nowrap; }
.pdx-copy:hover { text-decoration: underline; }
.pdx-qbtn { display: block; width: 100%; text-align: center; background: var(--accent); color: #fff; font-weight: 800; padding: 12px; border-radius: var(--r); margin-top: 12px; border: 0; cursor: pointer; font-size: 14px; }
.pdx-qbtn:hover { background: var(--brand); color: #fff; text-decoration: none; }
.pdx-qmeta { font-size: 11px; color: var(--muted); text-align: center; margin-top: 9px; }

/* 모바일: 2단 → 1단, 견적 박스 위로 */
@media (max-width: 900px) {
  .pdx-body { flex-direction: column-reverse; gap: 18px; }
  .pdx-aside { width: 100%; position: static; }
}

/* 제품 spec 표: pdx-main 안에서 2열 그리드 (목업 정합) — 기존 <table> 마크업 재사용 */
.pdx-main .spec-table { display: block; margin-bottom: 0; }
.pdx-main .spec-table tbody { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; }
.pdx-main .spec-table tr { display: flex; align-items: baseline; border-bottom: 1px solid var(--line2); }
.pdx-main .spec-table th,
.pdx-main .spec-table td { border: 0 !important; background: none !important; padding: 8px 0 !important; vertical-align: baseline; }
.pdx-main .spec-table th[scope="row"] { width: 118px !important; flex: none; color: var(--muted) !important; font-weight: 600 !important; font-size: 13px; white-space: nowrap; }
.pdx-main .spec-table td { color: var(--ink); font-size: 13px; word-break: break-word; }
.pdx-main .spec-table th.spec-th-bold + td,
.pdx-main .spec-table td .mono { font-weight: 700; }
/* 좁은 화면: 1열 복귀 */
@media (max-width: 760px){ .pdx-main .spec-table tbody { grid-template-columns: 1fr; } }

/* ── 홈 인라인 견적폼 (CTA, 2026-06-24 옛 인라인 폼 복원) ── */
.home2 .cta-inq { align-items: stretch; gap: 32px; }
.home2 .cta-inq .cta-copy { flex: 1 1 42%; align-self: center; }
.home2 .cta-mail { margin-top: 12px; font-size: 12.5px; color: #9fc0c5; }
.home2 .cta-mail a { display: inline; background: none; color: var(--teal); font-weight: 700; padding: 0; border-radius: 0; }
.home2 .cta-mail a:hover { background: none; text-decoration: underline; color: var(--teal); }
.home2 .home-inq { flex: 1 1 50%; background: #fff; border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 9px; }
.home2 .home-inq .hi-hp { position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; }
.home2 .home-inq .hi-row { display: flex; gap: 9px; }
.home2 .home-inq input[type="text"],
.home2 .home-inq input[type="email"],
.home2 .home-inq input[type="tel"],
.home2 .home-inq textarea { width: 100%; flex: 1; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; font-size: 13.5px; color: var(--ink); font-family: inherit; background: #fff; }
.home2 .home-inq input::placeholder,
.home2 .home-inq textarea::placeholder { color: #97a4ac; }
.home2 .home-inq input:focus,
.home2 .home-inq textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(12,85,112,.12); }
.home2 .home-inq textarea { resize: vertical; min-height: 132px; }
.home2 .home-inq .hi-consent { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.home2 .home-inq .hi-consent input { margin-top: 2px; flex: none; }
.home2 .home-inq a { display: inline; background: none; padding: 0; border-radius: 0; color: var(--accent); font-weight: 600; }
.home2 .home-inq a:hover { background: none; text-decoration: underline; color: var(--accent); }
.home2 .home-inq button[type="submit"] { background: var(--accent); color: #fff; font-weight: 800; border: 0; border-radius: var(--r); padding: 12px; font-size: 14.5px; cursor: pointer; }
.home2 .home-inq button[type="submit"]:hover { background: #1252a8; }
.home2 .home-inq button[type="submit"]:disabled { opacity: .6; cursor: default; }
.home2 .home-inq .hi-result { font-size: 12.5px; margin: 0; min-height: 16px; line-height: 1.4; }
@media (max-width: 760px) {
  .home2 .cta-inq { display: block; }
  .home2 .home-inq { margin-top: 18px; }
  .home2 .home-inq .hi-row { flex-direction: column; }
}

/* ── 규격별 판매가 표 (LUM-20260905-1116) ───────────────────────── */
/* 판매가 — 견적 카드 최상단 (2026-09-18, 본문 .pdx-price 섹션 대체) */
.pdx-qprice { margin: -4px 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pdx-qprice-h { font-size: 12px; font-weight: 600; color: var(--muted, #666); margin-bottom: 6px; }
.pdx-qprice-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 3px 0; }
.pdx-qprice-size { font-size: 13px; color: var(--muted, #666); white-space: nowrap; }
.pdx-qprice-krw { white-space: nowrap; font-size: 13px; }
.pdx-qprice-krw b { font-size: 19px; letter-spacing: -0.01em; }
/* Cat No 칸: 「코드 규격」 을 한 줄로 붙인다 (2026-09-18 사용자 — 규격이 코드 밑으로
   접혀 내려가 행 높이가 늘어난 것을 교정). 줄 나눔은 <br> 로만, 셀 폭 때문에 접히지 않게 nowrap. */
.pdx-main .spec-table th.spec-th-bold + td { white-space: nowrap; }
.spec-sku-size { color: var(--muted, #666); font-weight: 400; font-size: 12px; margin-left: 2px; }
.pdx-qprice-sku { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.pdx-qprice-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
                   font-weight: 600; color: var(--brand-l, #0b6); letter-spacing: -0.02em; }
.pdx-qrow-sku { align-items: flex-start; }
.pdx-qsku-line { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-bottom: 4px; }
.pdx-qsku-size { font-size: 11px; color: var(--muted, #666); }
.pdx-qprice-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted, #666); }
.pdx-price { margin: 18px 0 4px; }
.price-table { width: 100%; max-width: 420px; border-collapse: collapse; font-size: 14px; }
.price-table th { text-align: left; font-weight: 600; color: var(--muted, #666);
                  font-size: 12px; padding: 4px 10px 4px 0; border-bottom: 1px solid var(--line2, #e5e5e5); }
.price-table td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line2, #e5e5e5); }
.price-table .pt-size { white-space: nowrap; color: var(--muted, #666); }
.price-table .pt-krw { text-align: right; white-space: nowrap; }
.price-table .pt-krw b { font-size: 16px; }
.pt-note { margin: 6px 0 0; font-size: 12px; color: var(--muted, #666); }
.sticky-cta-bar {
  display: none; }

@media (min-width: 900px) {
  .site-header .hamburger {
    display: none; }
  .site-header .nav-main {
    display: flex; }
  .related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px; }
  .breadcrumb li {
    display: inline; }
  .breadcrumb li:nth-child(2)::before {
    content: none; } }

@media (max-width: 900px) {
  .container {
    padding: 0 12px; }
  main {
    padding: 16px 0; }
  .spec-table {
    display: block;
    width: 100%; }
  .spec-table thead {
    display: none; }
  .spec-table tbody,
  .spec-table tr {
    display: block;
    width: 100%; }
  .spec-table tr {
    border-bottom: 1px solid #e5e7eb;
    padding: 6px 0; }
  .spec-table th,
  .spec-table td {
    display: block;
    width: 100%;
    padding: 2px 0;
    border: none;
    font-size: 13px; }
  .spec-table th {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em; }
  .compare-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
  .compare-col-extra {
    display: none; }
  .related-grid {
    grid-template-columns: 1fr; }
  .breadcrumb {
    font-size: 12px; }
  .breadcrumb li:not(:first-child):not(:last-child) {
    display: none; }
  .breadcrumb li:nth-child(2)::before {
    content: "\2026";
    display: inline; }
  .site-header .nav-main {
    display: none; }
  .site-header .hamburger {
    display: block; }
  .megamenu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    overflow-y: auto;
    padding: 16px; }
  details {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    margin-bottom: 8px; }
  details summary {
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between; }
  details summary::-webkit-details-marker {
    display: none; }
  details summary::after {
    content: "\FF0B";
    font-size: 16px;
    color: #6b7280; }
  details[open] > summary::after {
    content: "\FF0D"; }
  details .details-content {
    padding: 8px 12px 12px;
    border-top: 1px solid #e5e7eb; }
  .sticky-cta-bar {
    display: flex;
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 10px 16px;
    gap: 8px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); }
  .sticky-cta-bar .btn-inquiry {
    flex: 1;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none; }
  .sticky-cta-bar .btn-inquiry:hover {
    background: #1d4ed8;
    text-decoration: none; }
  .sticky-cta-bar .btn-copy-catno {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap; }
  .sticky-cta-bar .btn-copy-catno:hover {
    background: #e5e7eb; } }