/* ══════════════════════════════════════════════════════════════════════
   kr-style.css — 1onetake.com (L2Logic 한국 사이트 v1)
   글로벌 사이트 CSS를 참조하지 않고 신규 작성. 단일 외부 의존성: Pretendard.

   설계 원칙:
   - 모바일 우선 반응형 (기본 모바일, ≥768px / ≥1024px 단계 확장)
   - 한글 가독성 우선 — Pretendard / line-height 1.6 / letter-spacing 0
   - 변수 기반 토큰 — 색·간격·폰트 모두 CSS Variables
   - 컴포넌트 클래스 prefix .kr- — 향후 다른 CSS와 충돌 방지
   - JS 의존 없음 — 모바일 메뉴 CSS-only checkbox 패턴
══════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────────
   1. CSS 변수 (디자인 토큰)
────────────────────────────────────────────────────────────────────── */
:root {
  /* 색상 — Navy 앵커 + 중성 그레이 + 단일 액센트 */
  --kr-navy:        #0A1C4F;
  --kr-navy-deep:   #061236;
  --kr-navy-hover:  #12287A;
  --kr-accent:      #0066CC;       /* CTA primary */
  --kr-accent-hover:#0077E6;

  --kr-bg:          #FFFFFF;
  --kr-bg-soft:     #F7F8FA;
  --kr-bg-dark:     #0A1C4F;

  --kr-border:      #E5E7EB;
  --kr-border-soft: #F0F2F5;

  --kr-text:        #1A1A1A;
  --kr-text-sub:    #4B5563;
  --kr-text-mute:   #6B7280;
  --kr-text-light:  #9CA3AF;
  --kr-text-on-dark:#FFFFFF;
  --kr-text-on-dark-sub: rgba(255,255,255,.72);

  /* 간격 */
  --kr-space-1: 0.5rem;
  --kr-space-2: 1rem;
  --kr-space-3: 1.5rem;
  --kr-space-4: 2rem;
  --kr-space-5: 3rem;
  --kr-space-6: 4rem;
  --kr-space-7: 5rem;
  --kr-space-8: 6rem;

  /* 모서리 */
  --kr-radius-sm: 6px;
  --kr-radius-md: 12px;
  --kr-radius-lg: 20px;
  --kr-radius-pill: 999px;

  /* 그림자 */
  --kr-shadow-sm: 0 2px 8px rgba(10,28,79,.06);
  --kr-shadow-md: 0 8px 24px rgba(10,28,79,.08);
  --kr-shadow-lg: 0 20px 48px rgba(10,28,79,.12);

  /* 트랜지션 */
  --kr-trans: .2s cubic-bezier(.4,0,.2,1);

  /* 컨테이너 */
  --kr-container: 1180px;

  /* 폰트 */
  --kr-font: 'Pretendard Variable', 'Pretendard',
             -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
             'Malgun Gothic', '맑은 고딕', system-ui, sans-serif;
}


/* ──────────────────────────────────────────────────────────────────────
   2. Reset / Base
────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--kr-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--kr-text);
  background: var(--kr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: keep-all;            /* 한글 단어 단위 줄바꿈 */
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }


/* 접근성: 포커스 윤곽 유지 */
:focus-visible {
  outline: 2px solid var(--kr-accent);
  outline-offset: 2px;
  border-radius: 2px;
}


/* 본문 바로가기 (스크린리더 / 키보드 사용자) */
.kr-skip {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px 16px;
  background: var(--kr-navy);
  color: #fff;
  font-weight: 600;
  z-index: 9999;
  transition: top var(--kr-trans);
}
.kr-skip:focus { top: 0; }


/* ──────────────────────────────────────────────────────────────────────
   3. 레이아웃 프리미티브
────────────────────────────────────────────────────────────────────── */
.kr-container {
  width: 100%;
  max-width: var(--kr-container);
  margin: 0 auto;
  padding: 0 20px;
}

.kr-section {
  padding: var(--kr-space-7) 0;
}
.kr-section-soft {
  background: var(--kr-bg-soft);
}

.kr-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--kr-space-5);
}
.kr-section-foot {
  text-align: center;
  margin-top: var(--kr-space-5);
}
.kr-section-lead {
  margin-top: var(--kr-space-2);
  color: var(--kr-text-sub);
  font-size: 1.0625rem;
}

.kr-grid-2 {
  display: grid;
  gap: var(--kr-space-5);
}

@media (min-width: 1024px) {
  .kr-section { padding: var(--kr-space-8) 0; }
  .kr-grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: var(--kr-space-6);
    align-items: center;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   4. Typography
────────────────────────────────────────────────────────────────────── */
.kr-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--kr-accent);
  text-transform: uppercase;
  margin-bottom: var(--kr-space-2);
}
.kr-eyebrow-light {
  color: rgba(255,255,255,.7);
}

.kr-h2 {
  font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--kr-text);
}
.kr-h2-light { color: var(--kr-text-on-dark); }

.kr-h3 {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: var(--kr-space-2);
}

.kr-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--kr-accent);
  font-size: 0.95rem;
  transition: gap var(--kr-trans);
}
.kr-link-arrow:hover { gap: 10px; }


/* ──────────────────────────────────────────────────────────────────────
   5. Buttons
────────────────────────────────────────────────────────────────────── */
.kr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 28px;
  border-radius: var(--kr-radius-pill);
  font-weight: 600;
  font-size: 0.96rem;
  line-height: 1;
  transition: all var(--kr-trans);
  white-space: nowrap;
  min-height: 48px;            /* 모바일 터치 타겟 */
}
.kr-btn-primary {
  background: var(--kr-accent);
  color: #fff;
}
.kr-btn-primary:hover {
  background: var(--kr-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,102,204,.3);
}
.kr-btn-outline {
  background: transparent;
  color: var(--kr-text);
  border: 1.5px solid var(--kr-border);
}
.kr-btn-outline:hover {
  border-color: var(--kr-navy);
  background: var(--kr-bg-soft);
}
.kr-btn-light {
  background: #fff;
  color: var(--kr-navy);
}
.kr-btn-light:hover {
  background: rgba(255,255,255,.92);
  transform: translateY(-1px);
}


/* ──────────────────────────────────────────────────────────────────────
   6. NAV
────────────────────────────────────────────────────────────────────── */
.kr-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10,28,79,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.kr-nav-inner {
  max-width: var(--kr-container);
  margin: 0 auto;
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
}

.kr-nav-brand {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.kr-nav-brand-text {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.kr-nav-brand-sub {
  font-size: 0.78rem;
  color: rgba(255,255,255,.55);
  font-weight: 500;
}

/* 햄버거 토글 (모바일) */
.kr-nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  gap: 4px;
}
.kr-nav-toggle span {
  width: 22px;
  height: 2px;
  background: #fff;
  transition: transform var(--kr-trans), opacity var(--kr-trans);
}
.kr-nav-toggle-input:checked ~ .kr-nav-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.kr-nav-toggle-input:checked ~ .kr-nav-toggle span:nth-child(2) {
  opacity: 0;
}
.kr-nav-toggle-input:checked ~ .kr-nav-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* 모바일 메뉴 */
.kr-nav-menu {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  background: var(--kr-navy-deep);
  padding: var(--kr-space-3) 20px var(--kr-space-4);
  display: none;
  flex-direction: column;
  gap: var(--kr-space-2);
  border-bottom: 1px solid rgba(255,255,255,.06);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}
.kr-nav-toggle-input:checked ~ .kr-nav-menu {
  display: flex;
}
.kr-nav-menu ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kr-nav-menu li a {
  display: block;
  padding: 14px 0;
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: color var(--kr-trans);
}
.kr-nav-menu li a:hover { color: rgba(255,255,255,.85); }
.kr-nav-cta {
  display: inline-block;
  margin-top: var(--kr-space-3);
  padding: 12px 24px;
  background: var(--kr-accent);
  border-radius: var(--kr-radius-pill);
  font-weight: 600;
  text-align: center;
  font-size: 0.92rem;
  transition: background var(--kr-trans);
}
.kr-nav-cta:hover { background: var(--kr-accent-hover); }

/* 데스크톱 메뉴 */
@media (min-width: 1024px) {
  .kr-nav-toggle { display: none; }
  .kr-nav-menu {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: transparent;
    padding: 0;
    gap: var(--kr-space-4);
    border: none;
    overflow: visible;
  }
  .kr-nav-menu ul {
    flex-direction: row;
    gap: var(--kr-space-3);
  }
  .kr-nav-menu li a {
    padding: 8px 0;
    font-size: 0.94rem;
    border: none;
  }
  .kr-nav-cta {
    margin-top: 0;
    padding: 10px 22px;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   7. HERO
────────────────────────────────────────────────────────────────────── */
.kr-hero {
  background: linear-gradient(180deg, var(--kr-navy) 0%, var(--kr-navy-deep) 100%);
  color: var(--kr-text-on-dark);
  padding: var(--kr-space-7) 0 var(--kr-space-7);
  position: relative;
  overflow: hidden;
}
.kr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(0,102,204,.18) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(18,40,122,.4) 0%, transparent 60%);
  pointer-events: none;
}

.kr-hero-inner {
  position: relative;
  display: grid;
  gap: var(--kr-space-5);
  align-items: center;
}

.kr-hero .kr-eyebrow {
  color: rgba(255,255,255,.7);
}

.kr-hero-title {
  font-size: clamp(2rem, 7vw, 3.4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: var(--kr-space-3);
}
.kr-hero-title strong {
  font-weight: 800;
  background: linear-gradient(90deg, #fff 0%, #B5C4F2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kr-hero-sub {
  font-size: 1.1rem;
  color: rgba(255,255,255,.85);
  margin-bottom: var(--kr-space-2);
  line-height: 1.5;
}
.kr-hero-detail {
  font-size: 0.9rem;
  color: rgba(255,255,255,.6);
  margin-bottom: var(--kr-space-4);
  letter-spacing: .01em;
}

.kr-hero-cta {
  display: flex;
  gap: var(--kr-space-2);
  flex-wrap: wrap;
}
.kr-hero-cta .kr-btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.3);
}
.kr-hero-cta .kr-btn-outline:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.6);
}

.kr-hero-visual-frame {
  border-radius: var(--kr-radius-lg);
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  aspect-ratio: 16 / 9;
}
.kr-hero-visual-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .kr-hero { padding: var(--kr-space-8) 0; }
  .kr-hero-inner {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--kr-space-6);
  }
}


/* ──────────────────────────────────────────────────────────────────────
   8. TRUST BAR
────────────────────────────────────────────────────────────────────── */
.kr-trust {
  background: var(--kr-bg);
  padding: var(--kr-space-4) 0;
  border-bottom: 1px solid var(--kr-border-soft);
}
.kr-trust-list {
  display: grid;
  gap: var(--kr-space-3);
  grid-template-columns: repeat(2, 1fr);
}
.kr-trust-item {
  text-align: center;
  padding: var(--kr-space-2) var(--kr-space-1);
}
.kr-trust-item strong {
  display: block;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--kr-navy);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.kr-trust-item span {
  font-size: 0.78rem;
  color: var(--kr-text-mute);
  line-height: 1.4;
}

@media (min-width: 768px) {
  .kr-trust-list { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .kr-trust-list { grid-template-columns: repeat(6, 1fr); }
}


/* ──────────────────────────────────────────────────────────────────────
   9. ABOUT SECTION
────────────────────────────────────────────────────────────────────── */
.kr-about-text p {
  margin-top: var(--kr-space-2);
  color: var(--kr-text-sub);
  line-height: 1.75;
}
.kr-about-text .kr-link-arrow {
  margin-top: var(--kr-space-3);
}

.kr-about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kr-space-2);
}
.kr-stat-card {
  padding: var(--kr-space-3) var(--kr-space-2);
  background: var(--kr-bg-soft);
  border-radius: var(--kr-radius-md);
  text-align: center;
}
.kr-stat-num {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--kr-navy);
  line-height: 1;
  letter-spacing: -0.02em;
}
.kr-stat-num span {
  font-size: 1.4rem;
  color: var(--kr-accent);
  margin-left: 2px;
}
.kr-stat-label {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--kr-text-mute);
}


/* ──────────────────────────────────────────────────────────────────────
   10. TECH CARDS
────────────────────────────────────────────────────────────────────── */
.kr-tech-cards {
  display: grid;
  gap: var(--kr-space-3);
  grid-template-columns: 1fr;
}
.kr-tech-card {
  padding: var(--kr-space-4) var(--kr-space-3);
  background: var(--kr-bg);
  border: 1px solid var(--kr-border);
  border-radius: var(--kr-radius-md);
  transition: all var(--kr-trans);
}
.kr-tech-card:hover {
  border-color: var(--kr-navy);
  box-shadow: var(--kr-shadow-md);
  transform: translateY(-2px);
}
.kr-tech-num {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--kr-accent);
  letter-spacing: .14em;
  margin-bottom: var(--kr-space-2);
}
.kr-tech-card p {
  margin-top: var(--kr-space-1);
  color: var(--kr-text-sub);
  font-size: 0.95rem;
  line-height: 1.7;
}
.kr-tag {
  display: inline-block;
  margin-top: var(--kr-space-2);
  padding: 4px 12px;
  font-size: 0.74rem;
  font-weight: 600;
  background: var(--kr-bg-soft);
  color: var(--kr-text-sub);
  border-radius: var(--kr-radius-pill);
  letter-spacing: .02em;
}

@media (min-width: 768px) {
  .kr-tech-cards { grid-template-columns: repeat(3, 1fr); }
}


/* ──────────────────────────────────────────────────────────────────────
   11. PRODUCT GRID
────────────────────────────────────────────────────────────────────── */
.kr-product-grid {
  display: grid;
  gap: var(--kr-space-3);
  grid-template-columns: 1fr;
}
.kr-product-card {
  padding: var(--kr-space-4) var(--kr-space-3);
  background: var(--kr-bg);
  border: 1px solid var(--kr-border);
  border-radius: var(--kr-radius-md);
  display: flex;
  flex-direction: column;
  transition: all var(--kr-trans);
}
.kr-product-card:hover {
  border-color: var(--kr-navy);
  box-shadow: var(--kr-shadow-md);
}
.kr-product-card-feat {
  border-color: var(--kr-navy);
  background: var(--kr-bg);
  position: relative;
}
.kr-product-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--kr-text-mute);
  background: var(--kr-bg-soft);
  padding: 4px 10px;
  border-radius: var(--kr-radius-pill);
  margin-bottom: var(--kr-space-2);
}
.kr-product-tag-feat {
  background: var(--kr-navy);
  color: #fff;
}
.kr-product-name {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: var(--kr-space-1);
  line-height: 1.35;
}
.kr-product-desc {
  font-size: 0.92rem;
  color: var(--kr-text-sub);
  line-height: 1.6;
  margin-bottom: var(--kr-space-3);
}
.kr-product-feat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--kr-space-3);
  flex-grow: 1;
}
.kr-product-feat li {
  position: relative;
  padding-left: 18px;
  font-size: 0.88rem;
  color: var(--kr-text-sub);
}
.kr-product-feat li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--kr-accent);
  font-weight: 700;
}
.kr-product-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: 1.5px solid var(--kr-navy);
  color: var(--kr-navy);
  border-radius: var(--kr-radius-pill);
  font-weight: 600;
  font-size: 0.92rem;
  transition: all var(--kr-trans);
  min-height: 44px;
}
.kr-product-cta:hover {
  background: var(--kr-navy);
  color: #fff;
}

@media (min-width: 768px) {
  .kr-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .kr-product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ──────────────────────────────────────────────────────────────────────
   12. COMPATIBILITY CTA (다크 블록)
────────────────────────────────────────────────────────────────────── */
.kr-compat-cta {
  background: linear-gradient(135deg, var(--kr-navy) 0%, var(--kr-navy-hover) 100%);
  color: #fff;
}
.kr-cta-block {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.kr-cta-lead {
  margin-top: var(--kr-space-2);
  margin-bottom: var(--kr-space-4);
  color: rgba(255,255,255,.78);
  font-size: 1.0625rem;
}


/* ──────────────────────────────────────────────────────────────────────
   13. QUALITY CTA
────────────────────────────────────────────────────────────────────── */
.kr-quality-cta p {
  margin-top: var(--kr-space-2);
  color: var(--kr-text-sub);
  line-height: 1.75;
}
.kr-quality-cta .kr-link-arrow {
  margin-top: var(--kr-space-3);
}
.kr-quality-list {
  display: grid;
  gap: var(--kr-space-2);
  grid-template-columns: 1fr;
  background: var(--kr-bg);
  padding: var(--kr-space-3);
  border-radius: var(--kr-radius-md);
  border: 1px solid var(--kr-border);
}
.kr-quality-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--kr-space-2);
  border-radius: var(--kr-radius-sm);
  background: var(--kr-bg-soft);
}
.kr-quality-list span {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--kr-navy);
  letter-spacing: .04em;
}
.kr-quality-list em {
  font-style: normal;
  font-size: 0.88rem;
  color: var(--kr-text-sub);
}

@media (min-width: 768px) {
  .kr-quality-list { grid-template-columns: repeat(2, 1fr); }
}


/* ──────────────────────────────────────────────────────────────────────
   14. DEALER CTA
────────────────────────────────────────────────────────────────────── */
.kr-dealer-grid {
  display: grid;
  gap: var(--kr-space-5);
}
.kr-dealer-text p {
  margin-top: var(--kr-space-2);
  color: var(--kr-text-sub);
  line-height: 1.75;
}
.kr-dealer-cta-row {
  display: flex;
  gap: var(--kr-space-2);
  flex-wrap: wrap;
  margin-top: var(--kr-space-3);
}
.kr-dealer-perks {
  display: grid;
  gap: var(--kr-space-2);
}
.kr-dealer-perks li {
  padding: var(--kr-space-3);
  border: 1px solid var(--kr-border);
  border-radius: var(--kr-radius-md);
  background: var(--kr-bg);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color var(--kr-trans);
}
.kr-dealer-perks li:hover {
  border-color: var(--kr-navy);
}
.kr-dealer-perks strong {
  font-size: 0.98rem;
  color: var(--kr-text);
  font-weight: 700;
}
.kr-dealer-perks span {
  font-size: 0.86rem;
  color: var(--kr-text-mute);
}

@media (min-width: 1024px) {
  .kr-dealer-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--kr-space-6);
    align-items: start;
  }
  .kr-dealer-perks {
    grid-template-columns: 1fr 1fr;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   15. SUPPORT INFO (설치/AS/문의)
────────────────────────────────────────────────────────────────────── */
.kr-support-cards {
  display: grid;
  gap: var(--kr-space-3);
  grid-template-columns: 1fr;
}
.kr-support-card {
  padding: var(--kr-space-4) var(--kr-space-3);
  background: var(--kr-bg);
  border: 1px solid var(--kr-border);
  border-radius: var(--kr-radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--kr-space-1);
}
.kr-support-card p {
  color: var(--kr-text-sub);
  font-size: 0.95rem;
  line-height: 1.7;
  flex-grow: 1;
}
.kr-support-card .kr-link-arrow {
  margin-top: var(--kr-space-2);
}

@media (min-width: 768px) {
  .kr-support-cards { grid-template-columns: repeat(3, 1fr); }
}


/* ──────────────────────────────────────────────────────────────────────
   16. FOOTER
────────────────────────────────────────────────────────────────────── */
.kr-footer {
  background: var(--kr-navy-deep);
  color: var(--kr-text-on-dark-sub);
  padding: var(--kr-space-6) 0 var(--kr-space-4);
  font-size: 0.88rem;
}
.kr-footer-grid {
  display: grid;
  gap: var(--kr-space-5);
  grid-template-columns: 1fr;
}
.kr-footer-col h4 {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: var(--kr-space-2);
  letter-spacing: .02em;
}
.kr-footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kr-footer-col ul li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.88rem;
}
.kr-footer-col ul li span {
  font-size: 0.76rem;
  color: rgba(255,255,255,.42);
  letter-spacing: .02em;
}
.kr-footer-col ul li em {
  font-style: normal;
  color: rgba(255,255,255,.85);
}
.kr-footer-col ul li a {
  color: rgba(255,255,255,.85);
  transition: color var(--kr-trans);
}
.kr-footer-col ul li a:hover { color: #fff; }
.kr-footer-col sup {
  font-size: 0.7em;
  color: rgba(255,255,255,.4);
  margin-left: 2px;
}

.kr-footer-brand {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: var(--kr-space-1);
}
.kr-footer-company {
  font-size: 0.92rem;
  color: rgba(255,255,255,.85);
  margin-bottom: var(--kr-space-2);
}
.kr-footer-address {
  font-style: normal;
  color: rgba(255,255,255,.65);
  font-size: 0.86rem;
  margin-bottom: var(--kr-space-3);
  line-height: 1.6;
}
.kr-footer-info {
  margin-bottom: var(--kr-space-2);
}
.kr-footer-note {
  margin-top: var(--kr-space-2);
  font-size: 0.74rem;
  color: rgba(255,255,255,.4);
  line-height: 1.6;
  font-style: italic;
}

.kr-footer-bottom {
  margin-top: var(--kr-space-5);
  padding-top: var(--kr-space-3);
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--kr-space-1);
  font-size: 0.78rem;
  color: rgba(255,255,255,.4);
}

@media (min-width: 768px) {
  .kr-footer-grid {
    grid-template-columns: 2fr 1fr 1.3fr 1fr;
    gap: var(--kr-space-4);
  }
}
@media (min-width: 1024px) {
  .kr-footer-col-wide { padding-right: var(--kr-space-3); }
}


/* ──────────────────────────────────────────────────────────────────────
   17. 모바일·접근성 보정
────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 480px) {
  .kr-hero-cta { flex-direction: column; align-items: stretch; }
  .kr-hero-cta .kr-btn { width: 100%; }
}

/* 인쇄 시 네비/푸터 숨김 (간단 보정) */
@media print {
  .kr-nav, .kr-footer { display: none; }
  body { color: #000; background: #fff; }
}


/* ──────────────────────────────────────────────────────────────────────
   18. COMING SOON (v1: 미작성 페이지 링크 시각 처리)
────────────────────────────────────────────────────────────────────── */
.coming-soon {
  opacity: 0.6;
  cursor: not-allowed;
}
.coming-soon:hover {
  text-decoration: none;
}


/* ──────────────────────────────────────────────────────────────────────
   19. HERO VISUAL CLEANUP — transparent PNG (누끼) 안전 마감 (v2 튜닝)
   변경 이력:
     v1: object-fit:contain + radial-gradient + 누끼 친화 마감
     v2: drop-shadow 완화 / gradient 확장 / aspect-ratio 제거(min-height만 적용)
   ※ 기존 .kr-hero-visual-frame 규칙(섹션 7)을 source-order cascade로 override.
────────────────────────────────────────────────────────────────────── */
.kr-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.kr-hero-visual-frame-clean,
.kr-hero-visual-frame {
  width: 100%;
  max-width: 620px;
  aspect-ratio: auto;
  min-height: 320px;
  padding: 24px;
  border: 0;
  border-radius: 28px;
  overflow: visible;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 40%, transparent 75%),
    radial-gradient(circle at 50% 70%, rgba(0,102,204,0.22) 0%, rgba(0,102,204,0.08) 45%, transparent 75%);
  box-shadow: none;
}

.kr-hero-visual-frame-clean img,
.kr-hero-visual-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,0.22));
}

@media (max-width: 1023px) {
  .kr-hero-visual-frame-clean,
  .kr-hero-visual-frame {
    max-width: 560px;
    padding: 18px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .kr-hero-visual-frame-clean,
  .kr-hero-visual-frame {
    max-width: 100%;
    padding: 12px;
  }

  .kr-hero-visual-frame-clean img,
  .kr-hero-visual-frame img {
    max-height: 280px;
  }
}


/* ════════════════════════════════════════════════════════════════════
   기술지원 메뉴 강조 — NAV에서 시각적 가시성 확보
══════════════════════════════════════════════════════════════════════ */
.kr-nav-menu ul li a.kr-nav-support {
  color: #fff !important;
  font-weight: 700;
  border-bottom: 2px solid rgba(255, 255, 255, .7);
  padding-bottom: 2px;
}
.kr-nav-menu ul li a.kr-nav-support:hover {
  border-bottom-color: #fff;
}
.kr-nav-menu ul li a.kr-nav-support-active {
  border-bottom-color: #fff;
}

/* ════════════════════════════════════════════════════════════════════
   이미지 매핑 — 글로벌 동일 경로 자산 적용 (2026-05-05 v6 imgmap)
   - products Hero / vehicles 카드 / index 카드 / compatibility 결과 카드
   - 모든 <img>는 onerror 시 .kr-image-fallback 클래스 자동 부여
══════════════════════════════════════════════════════════════════════ */

/* 공통 — 이미지 wrapper의 fallback 상태 */
.kr-image-fallback {
  background: linear-gradient(135deg, var(--kr-bg-soft) 0%, #FFFFFF 100%);
  border: 1px dashed var(--kr-border);
  position: relative;
  min-height: 180px;
}
.kr-image-fallback::after {
  content: "제품 이미지 준비중";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--kr-text-mute);
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
}

/* products/*.html — Hero 이미지 */
.kr-product-hero-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* vehicles/*.html + index.html — 카드 이미지 */
.kr-product-card-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, var(--kr-bg-soft) 0%, #FFFFFF 100%);
  border-radius: var(--kr-radius-sm);
  overflow: hidden;
  margin-bottom: var(--kr-space-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kr-product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.kr-product-card:hover .kr-product-card-image img {
  transform: scale(1.03);
}
.kr-product-card-image.kr-image-fallback {
  min-height: 0;
}

/* compatibility 결과 카드 이미지 */
.kr-result-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, var(--kr-bg-soft) 0%, #FFFFFF 100%);
  border-radius: var(--kr-radius-sm);
  overflow: hidden;
  margin-bottom: var(--kr-space-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kr-result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kr-result-image.kr-image-fallback {
  min-height: 0;
  aspect-ratio: 16 / 10;
}

/* 모바일 최적화 — 이미지 영역 살짝 줄임 */
@media (max-width: 640px) {
  .kr-product-card-image,
  .kr-result-image {
    aspect-ratio: 16 / 9;
  }
}

/* ════════════════════════════════════════════════════════════════════
   카카오톡 채널 — 실제 연동 (2026-05-05 v7)
══════════════════════════════════════════════════════════════════════ */

/* Footer 등 인라인 텍스트 링크 */
.kr-kakao-link {
  font-weight: 700;
  color: var(--kr-text);
  text-decoration: none;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
  transition: border-color 0.2s, color 0.2s;
}
.kr-kakao-link:hover {
  color: #111;
  border-bottom-color: #FEE500;
  border-bottom-style: solid;
}

/* 강조 CTA 버튼 (카카오톡 노란색) */
.kr-kakao-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.98rem;
  background: #FEE500;
  color: #111;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.kr-kakao-cta:hover,
.kr-kakao-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(254, 229, 0, 0.4);
  background: #FEE500;
  color: #111;
}
.kr-kakao-cta:active {
  transform: translateY(0);
}

/* support.html 메인 채널 카드의 카카오톡 강조 */
.kr-support-channel-kakao {
  background: linear-gradient(135deg, #FFFEF0 0%, #FFFAEB 100%);
  border-color: #FEE500;
  box-shadow: 0 4px 12px rgba(254, 229, 0, 0.15);
}

/* contact.html 카카오톡 카드 강조 */
.kr-support-card-kakao {
  background: linear-gradient(135deg, #FFFEF0 0%, #FFFAEB 100%);
  border-color: #FEE500;
}
.kr-support-card-kakao h3 {
  color: #111;
}

/* ════════════════════════════════════════════════════════════════════
   v8 이미지 정책 안정화 (2026-05-05)
   - aspect-ratio 고정으로 비율 깨짐 방지
   - 누끼 제품 이미지: object-fit: contain
   - 차량/썸네일 이미지: object-fit: cover
   - 모바일 4:3 / 데스크탑 16:9 또는 16:10
   - 하단 정의가 우선 (cascade)
══════════════════════════════════════════════════════════════════════ */

/* ── 공통 이미지 프레임 — 모든 카드 이미지에 동일 비율 강제 ── */
.kr-image-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--kr-radius-md);
  background: var(--kr-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.kr-image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* 누끼 제품 이미지 — 잘리지 않게 contain */
.kr-image-frame.kr-product-image img,
.kr-product-hero-image,
.kr-product-card .kr-product-card-image img {
  object-fit: contain !important;
  background: var(--kr-bg-soft);
}

/* 차량 / 썸네일 — cover */
.kr-image-frame.kr-thumb-image img,
.kr-result-image img {
  object-fit: cover;
}

/* products Hero 영역 강제 안정화 */
.kr-product-image-frame {
  width: 100%;
  aspect-ratio: 4 / 3 !important;
  max-height: 480px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--kr-space-3) !important;
}
.kr-product-image-frame img.kr-product-hero-image {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: 0 auto;
}

/* vehicles + index 카드 이미지 — 비율 고정 */
.kr-product-card-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--kr-radius-sm);
  background: var(--kr-bg-soft);
  margin-bottom: var(--kr-space-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kr-product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.kr-product-card:hover .kr-product-card-image img {
  transform: scale(1.03);
}

/* compatibility 결과 카드 */
.kr-result-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--kr-radius-sm);
  background: var(--kr-bg-soft);
  margin-bottom: var(--kr-space-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kr-result-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── SKU 갤러리 (products 페이지 전용, 최대 10개) ── */
.kr-sku-gallery-section {
  margin-top: var(--kr-space-4);
}
.kr-sku-gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: var(--kr-space-2);
}
.kr-sku-gallery .kr-sku-thumb {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  border-radius: var(--kr-radius-sm);
  background: var(--kr-bg-soft);
  cursor: pointer;
  border: 1px solid var(--kr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, transform 0.2s;
}
.kr-sku-gallery .kr-sku-thumb:hover {
  border-color: var(--kr-navy);
  transform: translateY(-1px);
}
.kr-sku-gallery .kr-sku-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 갤러리 슬롯이 onerror로 숨겨지면 슬롯 자체도 숨김 (그리드 공백 방지) */
.kr-sku-gallery .kr-sku-thumb.kr-image-fallback {
  display: none;
}

/* ── Fallback 강화 (이미지 준비중 박스) ── */
.kr-image-fallback {
  background: var(--kr-bg-soft) !important;
  border: 1px dashed var(--kr-border) !important;
  position: relative;
  min-height: 160px;
}
.kr-image-fallback::after {
  content: "이미지 준비중";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  text-align: center;
  color: var(--kr-text-mute);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}

/* ── 모바일 대응 ── */
@media (max-width: 640px) {
  .kr-image-frame { aspect-ratio: 4 / 3; }
  .kr-product-image-frame { aspect-ratio: 4 / 3 !important; max-height: 360px; }
  .kr-product-card-image { aspect-ratio: 4 / 3; }
  .kr-result-image { aspect-ratio: 4 / 3; }
  .kr-sku-gallery { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}

@media (max-width: 480px) {
  .kr-sku-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════
   v11 — 메인 모델 검색 + 라인업 결과 카드 + 비교 라인업 (2026-05-05)
══════════════════════════════════════════════════════════════════════ */

/* ── 메인 페이지 모델 검색 섹션 ── */
.kr-home-compat-search {
  background: linear-gradient(180deg, var(--kr-bg) 0%, var(--kr-bg-soft) 100%);
}
.kr-home-compat-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kr-space-2);
  max-width: 720px;
  margin: var(--kr-space-3) auto 0;
}
.kr-home-compat-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kr-home-compat-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kr-text-sub);
  letter-spacing: 0.01em;
}
.kr-home-compat-select {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--kr-border);
  border-radius: var(--kr-radius-md);
  background: var(--kr-bg);
  font-size: 1rem;
  color: var(--kr-text);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23445' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.kr-home-compat-select:hover:not(:disabled),
.kr-home-compat-select:focus-visible {
  border-color: var(--kr-navy);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 32, 96, 0.1);
}
.kr-home-compat-select:disabled {
  background-color: var(--kr-bg-soft);
  cursor: not-allowed;
  opacity: 0.6;
}

.kr-home-compat-result {
  margin-top: var(--kr-space-4);
}
.kr-home-compat-result:empty {
  display: none;
}

/* ── 공유 라인업 결과 카드 (index.html + compatibility.html) ── */
.kr-lineup-result {
  max-width: 960px;
  margin: 0 auto;
  animation: kr-fade-in 0.3s ease-out;
}
.kr-lineup-result-head {
  text-align: center;
  margin-bottom: var(--kr-space-3);
}
.kr-lineup-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 900px;
  margin: 28px auto 0;
}

.kr-lineup-card {
  background: var(--kr-bg);
  border: 1.5px solid var(--kr-border);
  border-radius: var(--kr-radius-lg);
  padding: var(--kr-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--kr-space-2);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
/* v14: 카드는 정적 (클릭 불가) — 사용자 혼동 방지를 위해 hover 효과 제거.
   액션은 카드 외부의 "구매상담 / 문의" 단독 CTA로만 유도. */
.kr-lineup-card:hover {
  /* hover transform/shadow 제거 — 카드 자체는 클릭 불가 */
}
.kr-lineup-card-feat {
  border-color: var(--kr-accent);
  background: linear-gradient(180deg, var(--kr-bg) 0%, rgba(0, 32, 96, 0.02) 100%);
}

.kr-lineup-card-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--kr-radius-sm);
  overflow: hidden;
  background: var(--kr-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kr-lineup-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.kr-lineup-card-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--kr-bg-soft);
  color: var(--kr-text-sub);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  width: fit-content;
}
.kr-lineup-card-tag-feat {
  background: var(--kr-navy);
  color: #fff;
}

.kr-lineup-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--kr-text);
  margin: 0;
  letter-spacing: -0.01em;
}
.kr-lineup-card-desc {
  font-size: 0.95rem;
  color: var(--kr-text-sub);
  margin: 0;
  line-height: 1.55;
}
.kr-lineup-card-feat-list,
.kr-lineup-card-feat {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kr-lineup-card-feat li {
  font-size: 0.92rem;
  color: var(--kr-text-sub);
  padding-left: 18px;
  position: relative;
  line-height: 1.45;
}
.kr-lineup-card-feat li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--kr-accent);
}
.kr-lineup-card-cta {
  margin-top: auto;
  width: 100%;
  text-align: center;
  justify-content: center;
}

.kr-lineup-result-foot {
  max-width: 720px;
  margin: var(--kr-space-4) auto 0;
  text-align: center;
}
.kr-lineup-result-actions {
  display: flex;
  gap: var(--kr-space-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--kr-space-2);
}
.kr-lineup-result-actions .kr-btn {
  flex: 1 1 200px;
  min-width: 200px;
  max-width: 280px;
}

/* ── index.html 비교 카드 라인업 (제품 라인업 섹션 재설계) ── */
.kr-product-grid-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 900px;
  margin: var(--kr-space-3) auto 0;
}
.kr-product-recommend {
  font-size: 0.92rem;
  color: var(--kr-text-sub);
  margin: var(--kr-space-2) 0 0;
  padding: var(--kr-space-2);
  background: var(--kr-bg-soft);
  border-radius: var(--kr-radius-sm);
  border-left: 3px solid var(--kr-accent);
  line-height: 1.5;
}
.kr-product-recommend strong {
  display: block;
  color: var(--kr-navy);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* ── 모바일 (768px 이하) — 1열 ── */
@media (max-width: 768px) {
  .kr-home-compat-form {
    grid-template-columns: 1fr;
  }
  .kr-lineup-result-grid {
    grid-template-columns: 1fr;
    gap: var(--kr-space-2);
  }
  .kr-product-grid-compare {
    grid-template-columns: 1fr;
    gap: var(--kr-space-2);
  }
  .kr-lineup-result-actions .kr-btn {
    flex: 1 1 100%;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .kr-home-compat-select {
    min-height: 48px;
    font-size: 0.95rem;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v12 — SNS 채널 + 회사 연락처 + 트루사이트 (2026-05-05)
══════════════════════════════════════════════════════════════════════ */

/* ── 메인 SNS 섹션 (엘투로직 제품 설치 후기) ── */
.kr-review-channel-section {
  background: var(--kr-bg);
}
.kr-social-links {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--kr-space-2);
  max-width: 960px;
  margin: var(--kr-space-3) auto 0;
}
.kr-social-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: var(--kr-space-3);
  border: 1.5px solid var(--kr-border);
  border-radius: var(--kr-radius-md);
  background: var(--kr-bg);
  text-decoration: none;
  color: var(--kr-text);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  text-align: center;
  min-height: 156px;
}
.kr-social-link:hover,
.kr-social-link:focus-visible {
  border-color: var(--kr-navy);
  transform: translateY(-2px);
  box-shadow: var(--kr-shadow-sm);
  outline: none;
}
.kr-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--kr-navy);
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.kr-social-icon-blog { background: #03C75A; }
.kr-social-icon-ig   { background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.kr-social-icon-yt   { background: #FF0000; }
.kr-social-icon-tt   { background: #000000; }

.kr-social-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--kr-text);
  letter-spacing: -0.01em;
}
.kr-social-desc {
  font-size: 0.82rem;
  color: var(--kr-text-mute);
  line-height: 1.4;
}

/* ── footer SNS 아이콘 (5개 가로 줄) ── */
.kr-footer-sns-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--kr-text-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: var(--kr-space-2);
  margin-bottom: 8px;
}
.kr-footer-sns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kr-footer-sns li {
  margin: 0;
  padding: 0;
  border: none;
}
.kr-footer-sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  transition: transform 0.15s, opacity 0.15s;
}
.kr-footer-sns a:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}
.kr-footer-sns-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.kr-footer-sns-ic-blog { background: #03C75A; color: #fff; border-color: transparent; }
.kr-footer-sns-ic-ig   { background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: #fff; border-color: transparent; }
.kr-footer-sns-ic-yt   { background: #FF0000; color: #fff; border-color: transparent; }
.kr-footer-sns-ic-tt   { background: #000; color: #fff; border-color: rgba(255,255,255,0.4); }

/* ── contact / support 전화 카드 ── */
.kr-contact-phone-list {
  margin: 0;
  padding: var(--kr-space-2);
  background: var(--kr-bg-soft);
  border-radius: var(--kr-radius-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kr-contact-phone-num {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--kr-navy);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.kr-contact-phone-num:hover {
  text-decoration: underline;
}
.kr-contact-phone-hours {
  font-size: 0.85rem;
  color: var(--kr-text-mute);
}

/* ── 모바일 ── */
@media (max-width: 768px) {
  .kr-social-links {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .kr-social-icon { width: 48px; height: 48px; font-size: 0.72rem; }
  .kr-social-name { font-size: 0.92rem; }
  .kr-social-desc { font-size: 0.78rem; }
  .kr-footer-sns a { width: 40px; height: 40px; }
  .kr-footer-sns-ic { width: 40px; height: 40px; font-size: 0.65rem; }
}

/* ════════════════════════════════════════════════════════════════════
   v13 — 모델검색 결과 균등 + PRO 강조 제거 + 스펙 비교 섹션 (2026-05-05)
══════════════════════════════════════════════════════════════════════ */

/* [1] 모델검색 결과 카드 이미지 영역 통일 */
.kr-lineup-card-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kr-bg-soft);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: var(--kr-space-2);
}
.kr-lineup-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  box-sizing: border-box;
}

/* [2] PRO 카드 파란색 강조 제거 — 두 카드 완전 동일 스타일 */
.kr-lineup-card-feat {
  border-color: var(--kr-border) !important;
  background: var(--kr-bg) !important;
  box-shadow: none !important;
}
.kr-lineup-card-feat:hover {
  border-color: var(--kr-navy) !important;
  background: var(--kr-bg) !important;
}
.kr-lineup-card-tag-feat {
  background: var(--kr-bg-soft) !important;
  color: var(--kr-text-sub) !important;
}

/* [3] 결과 영역 단일 큰 CTA */
.kr-lineup-main-cta {
  min-height: 56px;
  padding: 0 28px;
  font-size: 16px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kr-lineup-result-actions {
  justify-content: center !important;
}
.kr-lineup-result-actions .kr-btn {
  flex: 0 0 auto !important;
  min-width: 240px !important;
  max-width: none !important;
}

/* [5] 제품 라인업 — 스펙 비교 섹션 */
.kr-lineup-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 900px;
  margin: var(--kr-space-3) auto var(--kr-space-4);
}
.kr-lineup-spec-card {
  background: var(--kr-bg);
  border: 1.5px solid var(--kr-border);
  border-radius: var(--kr-radius-lg);
  padding: var(--kr-space-3);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kr-lineup-spec-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--kr-bg-soft);
  border-radius: var(--kr-radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kr-lineup-spec-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  box-sizing: border-box;
}
.kr-lineup-spec-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--kr-bg-soft);
  color: var(--kr-text-sub);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  width: fit-content;
}
.kr-lineup-spec-name {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--kr-text);
  margin: 0;
  letter-spacing: -0.01em;
}
.kr-lineup-spec-desc {
  font-size: 0.92rem;
  color: var(--kr-text-sub);
  margin: 0;
  line-height: 1.55;
}

/* 비교표 */
.kr-lineup-compare-wrap {
  max-width: 900px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--kr-radius-md);
  border: 1px solid var(--kr-border);
}
.kr-lineup-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--kr-bg);
  min-width: 600px;
}
.kr-lineup-compare-caption {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--kr-text-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 0;
  text-align: center;
  caption-side: top;
}
.kr-lineup-compare thead {
  background: var(--kr-navy);
  color: #fff;
}
.kr-lineup-compare th,
.kr-lineup-compare td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--kr-border);
}
.kr-lineup-compare thead th {
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
}
.kr-lineup-compare tbody th {
  font-weight: 600;
  background: var(--kr-bg-soft);
  color: var(--kr-text);
  width: 28%;
  white-space: nowrap;
}
.kr-lineup-compare tbody td {
  color: var(--kr-text-sub);
}
.kr-lineup-compare tbody tr:last-child th,
.kr-lineup-compare tbody tr:last-child td {
  border-bottom: none;
}

/* 모바일 — 비교표 스크롤 + 카드 1열 */
@media (max-width: 768px) {
  .kr-lineup-spec-grid {
    grid-template-columns: 1fr;
  }
  .kr-lineup-compare {
    font-size: 0.88rem;
  }
  .kr-lineup-compare th,
  .kr-lineup-compare td {
    padding: 12px;
  }
}

@media (max-width: 640px) {
  .kr-lineup-card-image,
  .kr-lineup-spec-image {
    aspect-ratio: 4 / 3;
  }
  .kr-lineup-main-cta {
    width: 100%;
    min-width: 0 !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   v14 — FAQ 섹션 (products 632 페이지)
   ────────────────────────────────────────────────────────────────── */
.kr-faq-section {
  padding: var(--kr-space-7) 0;
  background: var(--kr-bg-soft);
}
.kr-faq-section .kr-section-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--kr-space-3);
}
.kr-faq-heading {
  font-size: var(--kr-font-2xl);
  font-weight: 700;
  color: var(--kr-navy);
  text-align: center;
  margin: 0 0 var(--kr-space-5);
  letter-spacing: -0.01em;
}
.kr-faq-item {
  background: var(--kr-bg);
  border: 1px solid var(--kr-border);
  border-radius: var(--kr-radius-md);
  margin: 0 0 var(--kr-space-2);
  overflow: hidden;
}
.kr-faq-item[open] { border-color: var(--kr-navy); }
.kr-faq-q {
  cursor: pointer;
  padding: var(--kr-space-3) var(--kr-space-4);
  font-weight: 600;
  font-size: var(--kr-font-base);
  color: var(--kr-text);
  list-style: none;
  position: relative;
  padding-right: 2.5rem;
}
.kr-faq-q::-webkit-details-marker { display: none; }
.kr-faq-q::after {
  content: "+";
  position: absolute;
  right: var(--kr-space-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--kr-navy);
}
.kr-faq-item[open] .kr-faq-q::after { content: "−"; }
.kr-faq-a {
  margin: 0;
  padding: 0 var(--kr-space-4) var(--kr-space-3);
  color: var(--kr-text-muted);
  line-height: 1.7;
  font-size: var(--kr-font-sm);
}
@media (max-width: 600px) {
  .kr-faq-heading { font-size: var(--kr-font-xl); }
  .kr-faq-q { font-size: var(--kr-font-sm); padding: var(--kr-space-2) var(--kr-space-3); padding-right: 2.2rem; }
  .kr-faq-a { padding: 0 var(--kr-space-3) var(--kr-space-2); }
}

/* ──────────────────────────────────────────────────────────────────
   v15 — 모델검색 결과 카드 클릭 가능 (a 태그 변환)
   카드는 <a class="kr-lineup-card kr-lineup-card-link">로 렌더링됨.
   기존 .kr-lineup-card 스타일은 그대로 유지하고, link 변형만 추가.
   ────────────────────────────────────────────────────────────────── */
.kr-lineup-card.kr-lineup-card-link {
  display: flex;
  flex-direction: column;
  gap: var(--kr-space-2);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.kr-lineup-card.kr-lineup-card-link:hover {
  transform: translateY(-2px);
  border-color: rgba(10, 28, 79, 0.28);
  box-shadow: 0 6px 20px rgba(10, 28, 79, 0.08);
}
.kr-lineup-card.kr-lineup-card-link:focus-visible {
  outline: 3px solid rgba(0, 102, 204, 0.35);
  outline-offset: 4px;
}
.kr-lineup-card-more {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  padding-top: var(--kr-space-2);
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--kr-navy);
  letter-spacing: -0.005em;
}
.kr-lineup-card.kr-lineup-card-link:hover .kr-lineup-card-more {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ──────────────────────────────────────────────────────────────────
   v15.1 — Footer SNS compact 높이 최적화
   기존 v15 ul/li 구조 → div+span+a 구조로 변경.
   목표: footer SNS 영역 297px → 1~2줄 (40px 이하).
   ────────────────────────────────────────────────────────────────── */
.kr-footer-sns-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}
.kr-footer-sns-label {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
  margin-right: 2px;
}
.kr-footer-sns-compact a {
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  transition: color 0.15s ease;
  white-space: nowrap;
}
.kr-footer-sns-compact a:hover,
.kr-footer-sns-compact a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kr-footer-sns-compact a:focus-visible {
  outline: 2px solid rgba(0, 102, 204, 0.45);
  outline-offset: 2px;
  border-radius: 2px;
}
.kr-footer-sns-divider {
  color: rgba(255, 255, 255, 0.28);
  user-select: none;
}
@media (max-width: 640px) {
  .kr-footer-sns-compact {
    gap: 3px 7px;
    margin-top: 6px;
    font-size: 12px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v18 — SKU 미디어 fallback 보강 (2026-05-07)
   기존 fallback 정책 호환:
   - .kr-sku-gallery .kr-sku-thumb.kr-image-fallback { display: none; }  → 그리드 공백 방지
   - .kr-image-fallback::after { content: "이미지 준비중"; }            → hero 등은 안내 박스
══════════════════════════════════════════════════════════════════════ */

/* hero 이미지 fallback 시 박스 톤다운 (과한 강조 방지) */
.kr-product-image-frame.kr-image-fallback {
  border: 1px dashed var(--kr-border) !important;
  background: var(--kr-bg-soft) !important;
}
.kr-product-image-frame.kr-image-fallback img {
  display: none;
}

/* SKU 갤러리 섹션에 모든 슬롯이 fallback이면 섹션 자체 톤다운 (선택적) */
.kr-sku-gallery:empty,
.kr-sku-gallery:has(.kr-sku-thumb:not(.kr-image-fallback)):not(:has(.kr-sku-thumb:not(.kr-image-fallback))) {
  /* :has는 모던 브라우저 한정 — 미지원 브라우저에서는 자연스럽게 무시됨 */
}

/* 갤러리 hover 시 줌 인 효과 (개선) */
.kr-sku-gallery .kr-sku-thumb img {
  transition: transform 0.3s ease;
}
.kr-sku-gallery .kr-sku-thumb:hover img {
  transform: scale(1.05);
}

/* ════════════════════════════════════════════════════════════════════
   v18.1 — SKU 미디어 정정 구조 + Lightbox (2026-05-07)
   - 썸네일 1번 = 대표 카드 이미지 (자동)
   - 썸네일 2~10 = 엑셀 썸네일
   - SKU 갤러리 = 별도 grid 섹션
══════════════════════════════════════════════════════════════════════ */

/* 통합 wrapper */
.kr-sku-media {
  display: flex;
  flex-direction: column;
  gap: var(--kr-space-3);
}

/* 메인 이미지 뷰어 (.kr-product-image-frame을 .kr-sku-main-viewer로 사용) */
.kr-sku-main-viewer {
  position: relative;
}
.kr-sku-main-image-button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
  border-radius: var(--kr-radius-md);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kr-sku-main-image-button:hover {
  transform: scale(1.01);
}
.kr-sku-main-image-button:focus-visible {
  outline: 2px solid var(--kr-navy);
  outline-offset: 2px;
}
.kr-sku-main-image {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 썸네일 스트립 */
.kr-sku-thumbnail-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--kr-space-2);
}
.kr-sku-thumbnail-strip:empty {
  display: none;
}
.kr-sku-thumb-button {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid var(--kr-border);
  border-radius: var(--kr-radius-sm);
  background: var(--kr-bg-soft);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.kr-sku-thumb-button:hover {
  border-color: var(--kr-navy);
  transform: translateY(-1px);
}
.kr-sku-thumb-button.is-active {
  border-color: var(--kr-navy);
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(0, 50, 100, 0.15);
}
.kr-sku-thumb-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kr-sku-thumb-button.kr-thumb-fallback {
  display: none;  /* fallback 시 슬롯 사라짐 */
}

/* SKU 갤러리 그리드 — 기존 .kr-sku-gallery와 호환 (이미 정의됨) */
.kr-sku-gallery-grid .kr-sku-thumb {
  cursor: zoom-in;
}

/* 갤러리 .kr-sku-gallery-item alias (선택적) */
.kr-sku-gallery-item {
  cursor: zoom-in;
}

/* Lightbox */
.kr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.86);
  padding: 20px;
  cursor: zoom-out;
}
.kr-lightbox[hidden] {
  display: none;
}
.kr-lightbox-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
  border-radius: var(--kr-radius-sm);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.kr-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.kr-lightbox-close:hover {
  background: #fff;
}
body.kr-lightbox-open {
  overflow: hidden;
}

/* 모바일 대응 */
@media (max-width: 640px) {
  .kr-sku-thumbnail-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }
  .kr-sku-thumb-button {
    width: 56px;
    height: 56px;
  }
  .kr-lightbox {
    padding: 12px;
  }
  .kr-lightbox-close {
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   v20 — Floating CTA (우측 하단 고정 문의 버튼)
   ─────────────────────────────────────────────────────────────────── */
.kr-floating-cta {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}
.kr-floating-cta-btn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 999px;
  background: var(--kr-bg, #ffffff);
  color: var(--kr-navy, #0A1C4F);
  border: 1px solid var(--kr-border, #e2e6ee);
  box-shadow: 0 4px 14px rgba(10, 28, 79, 0.12), 0 1px 3px rgba(10, 28, 79, 0.06);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  min-height: 44px; /* iOS 터치 가이드 */
}
.kr-floating-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(10, 28, 79, 0.16), 0 2px 4px rgba(10, 28, 79, 0.08);
}
.kr-floating-cta-btn:active {
  transform: translateY(0);
}
.kr-floating-cta-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
}
.kr-floating-cta-btn-icon svg {
  width: 18px; height: 18px;
}
.kr-floating-cta-btn-label {
  letter-spacing: -0.01em;
}
/* 카카오 — 노란색 적당히 */
.kr-floating-cta-btn-kakao {
  background: #FEE500;
  color: #181600;
  border-color: #f5d800;
}
.kr-floating-cta-btn-kakao:hover {
  background: #FFEC1F;
}
/* 전화 — primary navy */
.kr-floating-cta-btn-phone {
  background: var(--kr-navy, #0A1C4F);
  color: #ffffff;
  border-color: var(--kr-navy, #0A1C4F);
}
.kr-floating-cta-btn-phone:hover {
  background: #16306d;
}
/* 설치점 — 보조 (light) */
.kr-floating-cta-btn-dealer {
  background: var(--kr-bg, #ffffff);
  color: var(--kr-navy, #0A1C4F);
  border-color: var(--kr-border, #e2e6ee);
}

/* 모바일 (390px 이하) — 라벨 숨기고 아이콘만 */
@media (max-width: 480px) {
  .kr-floating-cta {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
  }
  .kr-floating-cta-btn {
    padding: 0;
    width: 48px;
    height: 48px;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(10, 28, 79, 0.18);
  }
  .kr-floating-cta-btn-label {
    display: none;
  }
  .kr-floating-cta-btn-icon {
    width: 24px;
    height: 24px;
  }
  .kr-floating-cta-btn-icon svg {
    width: 22px; height: 22px;
  }
}

/* 시간 안내 (전화 버튼 hover 시 PC) */
@media (min-width: 768px) {
  .kr-floating-cta-btn-phone-time {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.7);
    font-weight: 400;
    margin-left: 4px;
    border-left: 1px solid rgba(255,255,255,0.25);
    padding-left: 6px;
  }
}
@media (max-width: 767px) {
  .kr-floating-cta-btn-phone-time {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v20 — 신규 페이지 공통 (reviews / dealer-network / company-info)
   ─────────────────────────────────────────────────────────────────── */
.kr-page-hero {
  padding: var(--kr-space-7) 0 var(--kr-space-5);
  background: var(--kr-bg-soft);
  border-bottom: 1px solid var(--kr-border);
}
.kr-page-hero-eyebrow {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--kr-navy);
  background: rgba(10, 28, 79, 0.06);
  border-radius: 999px;
  margin-bottom: var(--kr-space-3);
  letter-spacing: 0.02em;
}
.kr-page-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  line-height: 1.2;
  margin: 0 0 var(--kr-space-3);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.kr-page-hero p {
  color: var(--kr-text-sub);
  max-width: 720px;
  font-size: 1.02rem;
  line-height: 1.7;
}

/* 후기 grid */
.kr-review-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--kr-space-4) 0 var(--kr-space-5);
}
.kr-review-filter-btn {
  padding: 8px 14px;
  background: var(--kr-bg);
  border: 1px solid var(--kr-border);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  color: var(--kr-text);
  transition: all 0.18s;
}
.kr-review-filter-btn:hover, .kr-review-filter-btn.is-active {
  background: var(--kr-navy);
  color: #ffffff;
  border-color: var(--kr-navy);
}
.kr-review-grid {
  display: grid;
  gap: var(--kr-space-4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin-top: var(--kr-space-4);
}
.kr-review-card {
  display: flex;
  flex-direction: column;
  background: var(--kr-bg);
  border: 1px solid var(--kr-border);
  border-radius: var(--kr-radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.kr-review-card:hover {
  border-color: var(--kr-navy);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(10, 28, 79, 0.06);
}
.kr-review-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--kr-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  color: var(--kr-text-mute);
  border-bottom: 1px solid var(--kr-border);
}
.kr-review-card-body {
  padding: var(--kr-space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kr-review-card-vehicle {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--kr-navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kr-review-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--kr-text);
  line-height: 1.4;
  margin: 0;
}
.kr-review-card-meta {
  display: flex;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--kr-text-mute);
  margin-top: 4px;
}

/* dealer-network */
.kr-dealer-section {
  padding: var(--kr-space-6) 0;
  border-bottom: 1px solid var(--kr-border);
}
.kr-dealer-section:last-child {
  border-bottom: none;
}
.kr-dealer-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--kr-space-3);
  flex-wrap: wrap;
}
.kr-dealer-section-header h2 {
  font-size: 1.4rem;
  margin: 0;
  font-weight: 700;
}
.kr-dealer-badge {
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.kr-dealer-badge-official {
  background: var(--kr-navy);
  color: #ffffff;
}
.kr-dealer-badge-general {
  background: var(--kr-bg-soft);
  color: var(--kr-text-sub);
  border: 1px solid var(--kr-border);
}
.kr-dealer-grid {
  display: grid;
  gap: var(--kr-space-3);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.kr-dealer-card {
  padding: var(--kr-space-3);
  background: var(--kr-bg);
  border: 1px solid var(--kr-border);
  border-radius: var(--kr-radius-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kr-dealer-card.is-official {
  border-color: var(--kr-navy);
  border-width: 1.5px;
}
.kr-dealer-card-name {
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0;
  color: var(--kr-text);
}
.kr-dealer-card-region {
  font-size: 0.82rem;
  color: var(--kr-navy);
  font-weight: 500;
}
.kr-dealer-card-info {
  font-size: 0.86rem;
  color: var(--kr-text-sub);
  line-height: 1.55;
}
.kr-dealer-card-services {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0;
}
.kr-dealer-service-tag {
  padding: 2px 8px;
  font-size: 0.72rem;
  background: var(--kr-bg-soft);
  border-radius: 4px;
  color: var(--kr-text-sub);
}
.kr-dealer-card-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}
.kr-dealer-card-action {
  flex: 1;
  padding: 7px 10px;
  font-size: 0.82rem;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid var(--kr-border);
  color: var(--kr-text);
  background: var(--kr-bg);
  transition: all 0.18s;
}
.kr-dealer-card-action:hover {
  background: var(--kr-bg-soft);
  border-color: var(--kr-navy);
}

/* 지도 placeholder */
.kr-map-placeholder {
  background: var(--kr-bg-soft);
  border: 1px dashed var(--kr-border);
  border-radius: var(--kr-radius-md);
  padding: var(--kr-space-5);
  text-align: center;
  color: var(--kr-text-mute);
  font-size: 0.92rem;
  margin: var(--kr-space-3) 0;
}

/* company-info */
.kr-company-stats {
  display: grid;
  gap: var(--kr-space-3);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: var(--kr-space-4) 0;
}
.kr-company-stat {
  padding: var(--kr-space-3);
  text-align: center;
  background: var(--kr-bg);
  border: 1px solid var(--kr-border);
  border-radius: var(--kr-radius-md);
}
.kr-company-stat-num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--kr-navy);
  letter-spacing: -0.02em;
}
.kr-company-stat-label {
  font-size: 0.86rem;
  color: var(--kr-text-sub);
  margin-top: 4px;
}