/* =========================================================
   skmagic-dealer 자체 렌탈 사이트 스타일
   디자인 톤: SK매직 본사 정합 — 시그니처 코랄 레드 + 차콜 그레이
   본사 실측: #DE4F41 (메인 빨강) / #C13A2D (다크) / #222·#666 텍스트
   ========================================================= */

/* ─── Pretendard 로컬 호스팅 ───
   외부 CDN(jsdelivr) 제거 — file:// 환경에서 폰트 swap(FOUT) 시 텍스트 metrics 변동으로
   GNB 메뉴가 가로로 튀고 카드들이 아래로 점프하는 흔들림 발생.
   로컬 woff2로 즉시 로드되면 첫 페인트부터 Pretendard 적용 → 흔들림 0. */
@font-face{
  font-family:'Pretendard'; font-weight:400; font-style:normal; font-display:block;
  src:url('./fonts/Pretendard-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Pretendard'; font-weight:500; font-style:normal; font-display:block;
  src:url('./fonts/Pretendard-Medium.woff2') format('woff2');
}
@font-face{
  font-family:'Pretendard'; font-weight:600; font-style:normal; font-display:block;
  src:url('./fonts/Pretendard-SemiBold.woff2') format('woff2');
}
@font-face{
  font-family:'Pretendard'; font-weight:700; font-style:normal; font-display:block;
  src:url('./fonts/Pretendard-Bold.woff2') format('woff2');
}
@font-face{
  font-family:'Pretendard'; font-weight:800; font-style:normal; font-display:block;
  src:url('./fonts/Pretendard-ExtraBold.woff2') format('woff2');
}

:root{
  --primary: #DE4F41;        /* SK매직 본사 시그니처 레드 */
  --primary-dark: #C13A2D;   /* hover/active 다크 변종 */
  --primary-soft: #FFEEEC;   /* 연한 레드 배경 (eyebrow, tag) */
  --accent: #444444;         /* 본사 보조 액션톤 차콜 (일반 CTA용) */
  --ink-1: #222222;   /* 본사 메인 텍스트 */
  --ink-2: #333333;
  --ink-3: #666666;   /* 본사 일반 텍스트 (가장 흔함) */
  --ink-4: #999999;   /* 옅은 텍스트 */
  --line: #E8E8E8;            /* 본사 라인 */
  --line-strong: #D0D0D0;
  --bg: #FFFFFF;
  --surface: #F5F5F5;         /* 본사 서피스 */
  --surface-2: #F4F4F4;
  --danger: #DE4F41;          /* 빨강과 통합 */
  --gold: #C58B2B;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;

  --shadow-card: 0 4px 18px rgba(34,34,34,.06);
  --shadow-pop:  0 12px 38px rgba(34,34,34,.12);

  --container: 1200px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
/* 스크롤바 자리를 항상 확보 — 콘텐츠 양에 따라 스크롤바 등장/소멸하면서 가로폭이 17px 튀는 현상 방지.
   scrollbar-gutter:stable 미지원 브라우저용 fallback: overflow-y:scroll */
html{scrollbar-gutter:stable;overflow-y:scroll;background:#fff}
body{background:#fff}

/* ─── 페이지 전환 시 깜빡임 제거 ───
   View Transitions API — Chrome 126+, Edge 126+ 지원. 미지원 브라우저는 자동 fallback animation. */
@view-transition{navigation:none}  /* zoom 변화 효과 없애기 위해 비활성화 */
/* 헤더·푸터는 페이지마다 동일 → 명명해서 morph로 처리 (변화 없으면 시각적 깜빡임 0) */
.util-bar{view-transition-name:util-bar}
.site-header{view-transition-name:site-header}
.site-footer{view-transition-name:site-footer}
/* 명명 안 된 나머지(콘텐츠 영역)는 root로 — cross-fade 길게 잡아 부드럽게 */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:180ms;
  animation-timing-function:cubic-bezier(.4,0,.2,1);
}
/* 명명 그룹은 짧게 morph (실제 변화 없으면 안 보임) */
::view-transition-old(util-bar),
::view-transition-new(util-bar),
::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-old(site-footer),
::view-transition-new(site-footer){
  animation-duration:0ms;
}

/* ─── View Transitions 미지원 브라우저용 fallback: body fade-in ───
   페이지 진입 시 짧은 fade. 진입할 때마다 보이지만 view-transition 작동 시엔 같이 적용되어 자연스러움. */
@supports not (view-transition-name: a) {
  body{animation:pageFadeIn 160ms ease-out}
  @keyframes pageFadeIn{from{opacity:0}to{opacity:1}}
}
body{
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  color: var(--ink-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss06" on, "ss03" on;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}

/* ---------- Layout ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* ---------- Top utility bar ---------- */
.util-bar{
  background:var(--ink-1);color:#CCCCCC;font-size:12px;
}
.util-bar .container{display:flex;align-items:center;justify-content:flex-end;gap:18px;height:34px}
.util-bar a{color:#CCCCCC;opacity:.85}
.util-bar a:hover{opacity:1;color:#fff}

/* ---------- Header ---------- */
/* sticky 끔 — 스크롤 따라오는 게 거슬린다는 피드백 반영. 정적 헤더로. */
.site-header{position:static;background:#fff;border-bottom:1px solid var(--line)}
.site-header .container{display:flex;align-items:center;gap:24px;height:74px}
.brand{display:flex;align-items:center;gap:14px;font-weight:700;font-size:16px;color:var(--ink-1);letter-spacing:-0.3px}
.brand-logo{height:40px;width:auto;display:block;flex-shrink:0}
.partner-label{
  padding-left:14px;
  border-left:1px solid var(--line);
  font-weight:700;
  font-size:14px;
  letter-spacing:-0.2px;
  white-space:nowrap;
  /* 실버/크롬 메탈 — 거울 대칭형 (위 라이트 → 중간 다크 띠 → 아래 라이트) */
  background: linear-gradient(180deg,
    #9A9A9A 0%,
    #5A5A5A 35%,
    #1F1F1F 50%,
    #5A5A5A 65%,
    #9A9A9A 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
/* 다크 배경(푸터) — 메탈 톤 반전 (밝은 크롬, 대칭형) */
.site-footer .partner-label{
  border-left-color:#3A3A3A;
  background: linear-gradient(180deg,
    #E8E8E8 0%,
    #B8B8B8 35%,
    #707070 50%,
    #B8B8B8 65%,
    #E8E8E8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
/* 호환: 기존 brand-mark 클래스가 남은 곳을 위해 — 새 코드에선 안 씀 */
.brand-mark{display:none}

.gnb{display:flex;gap:4px;margin-left:8px}
.gnb a{
  padding:10px 14px;font-size:15px;font-weight:600;color:var(--ink-2);
  border-radius:10px;transition:.15s;position:relative;
}
.gnb a:hover{background:var(--surface);color:var(--ink-1)}
.gnb a.active{color:var(--primary-dark);background:transparent}
.gnb a.active::after{
  content:'';position:absolute;left:14px;right:14px;bottom:2px;
  height:2px;background:var(--primary);border-radius:1px;
}

.header-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.icon-btn{
  width:42px;height:42px;border-radius:10px;display:grid;place-items:center;color:var(--ink-2);
  transition:.15s;
}
.icon-btn:hover{background:var(--surface);color:var(--ink-1)}
.icon-btn svg{width:20px;height:20px}

.cta-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:999px;
  background:var(--ink-1);color:#fff;font-weight:700;font-size:14px;
  transition:.15s;
}
.cta-pill:hover{background:#000}
.cta-pill svg{width:16px;height:16px}

/* ---------- Hero Slider (new) ---------- */
.hero-slider{
  position:relative;
  width:100%;max-width:1440px;margin:0 auto;  /* 컨테이너보다 살짝 키움, 양옆 여백 유지 */
  aspect-ratio:16/5; /* 이미지 native 비율과 일치 → 잘림 X, 빈 공간 X */
  overflow:visible;background:#fff;  /* 화살표가 박스 밖으로 빠질 수 있게 */
}
.hs-track{overflow:hidden;border-radius:inherit}  /* 이미지/슬라이드는 박스 안에서만 */
/* 슬라이더 바로 다음 섹션의 위쪽 여백 압축 (기본 72px → 36px) */
.hero-slider + .section,
.hero-slider + main .section:first-of-type{padding-top:36px}
.hs-track{position:absolute;inset:0}
.hs-slide{
  position:absolute;inset:0;opacity:0;transition:opacity .6s ease;
  pointer-events:none;
  display:flex;align-items:center;justify-content:center; /* 박스 정중앙 — 화살표 높이와 일치 */
}
.hs-slide.on{opacity:1;pointer-events:auto}
.hs-slide img{
  width:100%;height:100%;       /* 박스 = 이미지 비율이라 가득 채움 (빈 공간 없음) */
  object-fit:cover;
  display:block;
}
/* 좌·우 네비 버튼 — 동그라미 없는 얇은 SVG 화살표 */
.hs-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:auto;height:auto;border:0;cursor:pointer;padding:8px 14px;
  background:transparent;color:#9ca3af;  /* 회색 */
  display:grid;place-items:center;
  opacity:.85;
  transition:transform .2s ease, opacity .2s ease, color .2s ease;
}
.hs-nav svg{width:80px;height:80px;display:block}
.hs-nav:hover{background:transparent;color:#4b5563;transform:translateY(-50%) scale(1.15);opacity:1}
.hs-prev{left:-150px}
.hs-next{right:-150px}
/* 하단 인디케이터 점 */
.hs-dots{display:none}  /* 인디케이터 점 숨김 */
.hs-dot{
  width:9px;height:9px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.55);transition:.18s;padding:0;
}
.hs-dot.on{background:#fff;width:28px;border-radius:5px}
.hs-dot:hover:not(.on){background:rgba(255,255,255,.85)}
/* 모바일 — 이미지 가로 꽉 채움 + 좌우 화살표 숨김 (점 인디케이터로 충분) */
@media (max-width:960px){
  .hero-slider{aspect-ratio:16/5}                /* 이미지 native 비율(1920×600 = 16:5)에 정확히 맞춤 → 잘림·빈영역 모두 없음 */
  .section.home-cat{margin-top:0;padding:32px 0}  /* 배너와 호흡 — 위아래 균등 */
  .hs-slide img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}  /* 박스=이미지 비율이라 cover/contain 결과 동일 — 깔끔하게 cover */
  .hs-nav{display:none}                          /* 모바일은 자동전환 + 점으로만 */
  .hs-dots{bottom:8px;gap:6px}
  .hs-dot{width:7px;height:7px}
  .hs-dot.on{width:22px}
}

/* ---------- Hero (legacy) ---------- */
.hero{
  background:linear-gradient(135deg,#FFF5F4 0%,#FFFAF9 60%,#FFFFFF 100%);
  border-bottom:1px solid var(--line);
}
.hero .container{
  display:grid;grid-template-columns:1fr 1.15fr;gap:40px;
  padding-top:44px;padding-bottom:44px;align-items:center;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:999px;
  background:#fff;border:1px solid var(--line);
  font-size:12px;font-weight:700;color:var(--primary-dark);
  letter-spacing:0.4px;
}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px rgba(222,79,65,.18)}
.hero h1{
  font-size:48px;line-height:1.2;letter-spacing:-1px;margin:18px 0 14px;color:var(--ink-1);font-weight:800;
}
.hero h1 em{font-style:normal;color:var(--primary-dark)}
.hero p.lead{font-size:17px;color:var(--ink-3);line-height:1.6;margin:0 0 28px;max-width:520px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 22px;border-radius:12px;font-weight:700;font-size:15px;
  transition:.15s;border:1px solid transparent;
}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-ghost{background:#fff;color:var(--ink-1);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink-1)}
.btn svg{width:16px;height:16px}

.hero-visual{
  position:relative;aspect-ratio: 16/9;
  /* 좌측 hero 그라데이션과 같은 톤 — 단, 살짝 더 진해서 박스 영역 구분 */
  background:linear-gradient(135deg,#FCEDEA 0%,#FDF5F2 100%);
  border-radius:24px;overflow:hidden;
  box-shadow:0 8px 24px rgba(34,34,34,.06);
}
/* 박스 상단 제목 — 좌측 카드와 동일한 left 라인 */
.hv-title{
  position:absolute;top:9%;left:6%;z-index:1;
  font-size:22px;font-weight:800;letter-spacing:-0.4px;color:var(--ink-1);
  white-space:nowrap;
}
.hv-title em{font-style:normal;color:var(--primary)}

.hero-visual .hv-img{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;justify-content:flex-end;
  gap:0;padding:0 0 8% 30%;
}
.hero-visual .hv-img img{
  height:82%;width:auto;flex-shrink:0;object-fit:contain;
  /* 유리 위 반사 — 음수 offset으로 사진 자체 흰 여백 보정 + 빠른 페이드 */
  -webkit-box-reflect: below -90px linear-gradient(to bottom,
    rgba(0,0,0,0.4) 0%,
    rgba(0,0,0,0.1) 18%,
    transparent 38%);
}
/* 사선 정수기를 정면 위로 더 가깝게 — 살짝 겹침 */
.hero-visual .hv-img-side{margin-left:-22%}

/* ── Hero floating cards — 정수기 옆 혜택/가격 카드 ── */
.hv-card{
  position:absolute;background:#fff;border-radius:14px;
  box-shadow:0 12px 30px rgba(34,34,34,.10), 0 2px 4px rgba(34,34,34,.04);
  padding:14px 16px;z-index:2;font-size:13px;line-height:1.4;
  animation:hvFloat 4s ease-in-out infinite alternate;
}
/* 카드들은 top:50% + translateY(-50%)로 중앙 정렬되므로 floating은 그 기준에서 ±6px */
@keyframes hvFloat{
  from{transform:translateY(calc(-50% + 0px))}
  to{transform:translateY(calc(-50% - 8px))}
}

/* 좌측 — 베스트 가격 카드 (정수기 왼편) */
.hv-card-tl{
  top:50%;left:5%;min-width:178px;
  transform:translateY(-50%);
  transform-origin:left center;animation-delay:0s;
}
.hv-card-tl .hvc-tag{
  display:inline-block;background:var(--primary);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:0.04em;
  padding:3px 8px;border-radius:99px;margin-bottom:8px;
}
.hv-card-tl .hvc-name{
  font-size:13px;font-weight:700;color:var(--ink-1);letter-spacing:-0.3px;margin-bottom:6px;
}
.hv-card-tl .hvc-price{
  font-size:13px;color:var(--ink-3);display:flex;align-items:baseline;gap:3px;
}
.hv-card-tl .hvc-price strong{
  font-size:22px;color:var(--ink-1);letter-spacing:-0.5px;font-weight:800;
}
.hv-card-tl .hvc-price span{font-size:13px;color:var(--ink-3)}
.hv-card-tl .hvc-sub{
  font-size:11px;color:var(--ink-4);margin-top:4px;
}


.hero-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:30px;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;
}
.hero-stats .s{
  padding:18px 22px;border-right:1px solid var(--line);
}
.hero-stats .s:last-child{border-right:none}
.hero-stats .s b{font-size:24px;display:block;color:var(--ink-1);letter-spacing:-0.5px}
.hero-stats .s span{font-size:12px;color:var(--ink-4);margin-top:2px;display:block}

/* 홈 카테고리 섹션 — 위아래 패딩 균등 → 카드 정중앙 */
.section.home-cat{padding:32px 0;margin-top:0}
.section.home-cat + .section{padding-top:48px}
@media (min-width:961px){
  .section.home-cat{margin-top:0;padding:40px 0}
  .section.home-cat + .section{padding-top:56px}
}

/* ---------- "우리는 이렇게 다릅니다" 카드 ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.why-card{text-align:left;padding:28px}
.why-card .ic{margin:0 0 14px}
.why-title{font-size:18px;font-weight:800;margin-bottom:6px;letter-spacing:-0.3px}
.why-desc{font-size:13px;color:var(--ink-3);line-height:1.55}
/* 모바일 — 1열 세로 쌓기 + 카드 안은 아이콘 좌·텍스트 우 가로 배열 */
@media (max-width:768px){
  .why-grid{grid-template-columns:1fr;gap:10px}
  .why-card{display:flex;align-items:center;gap:16px;padding:16px 18px;min-height:0}
  .why-card .ic{margin:0;flex-shrink:0}
  .why-text{flex:1;min-width:0}
  .why-title{margin-bottom:2px;font-size:15px}
  .why-desc{font-size:12.5px;line-height:1.5}
}

/* ---------- Section ---------- */
.section{padding:72px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px;gap:16px;flex-wrap:wrap}
.section-head h2{font-size:30px;letter-spacing:-0.6px;margin:0;color:var(--ink-1);font-weight:800}
.section-head .sub{color:var(--ink-3);font-size:15px;margin-top:6px}
.section-head .more{color:var(--primary-dark);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:4px}
.section-head .more svg{width:14px;height:14px}

/* ---------- 페이지 흔들림(CLS) 방지: JS가 채우기 전 빈 컨테이너에 자리 선점 ----------
   :empty는 JS innerHTML로 채워지는 순간 자동 해제 — 빈 동안만 적용.
   값은 실측 자연 높이 기준 + 약간 여유. 빈 상태 페이지 길이 ≈ 채워진 상태로 만들어 점프 최소화. */
.cat-grid:empty{min-height:150px}                 /* 6열 카테고리 1행 (데스크탑) */
.product-grid:empty{min-height:500px}             /* 4열 product 카드 1행 */
#cat-sections:empty{min-height:2700px}            /* 4 카테고리 섹션 (데스크탑 실측 2660) */
#filter-bar:empty{min-height:58px}                /* 필터칩 1줄 */
#cat-products:empty{min-height:780px}             /* 카테고리 페이지 product grid 2행 */
.gallery .main:empty,.gallery .thumbs:empty{min-height:560px}
.infoimgs:has(.empty){min-height:600px}           /* 인포그래픽 로드 전 */

/* ---------- Category grid (simplified, compact center) ---------- */
.cat-grid{
  display:grid;grid-template-columns:repeat(4,auto);
  gap:40px;justify-content:center;
}
.cat-card{
  background:transparent;border:0;border-radius:14px;
  padding:12px 10px;text-align:left;transition:.18s;cursor:pointer;
  min-height:0;
  display:flex;align-items:center;gap:12px;
}
.cat-text{display:flex;flex-direction:column;min-width:0}
.cat-card:hover{
  /* 박스·그림자·이동 효과 모두 제거 — 아이콘 색 변화만으로 호버 표현 */
  background:transparent;border-color:transparent;box-shadow:none;
}
.cat-card .ic{
  width:46px;height:46px;border-radius:50%;margin:0;flex-shrink:0;
  background:var(--surface);display:grid;place-items:center;color:var(--ink-2);
  box-shadow:none;
  transition:.18s;
}
.cat-card .ic svg{width:28px;height:28px}
.cat-card:hover .ic{background:#f0f0f0;color:#6b7280}
.cat-card .nm{font-weight:700;font-size:14px;color:var(--ink-1)}
.cat-card .cnt{font-size:11px;color:var(--ink-4);margin-top:1px}

/* ---------- Product card ---------- */
.product-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.product-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;transition:.18s;display:flex;flex-direction:column;
  /* CLS 방지: 카드 height 고정 → 이미지/폰트 로드 후 카드 내부 jitter가 페이지에 전파 안됨 */
  min-height:430px;
}
.product-card:hover{
  border-color:var(--primary);box-shadow:var(--shadow-card);
}
.product-card .thumb{
  position:relative;aspect-ratio:1/1;background:var(--surface);overflow:hidden;
}
.product-card .thumb img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:16px;
  transition:transform .3s;
}
.product-card:hover .thumb img{transform:scale(1.04)}
/* 워커힐 브랜드 배지 — 카드 좌상단에 absolute로 떠있는 layout (이미지 안 박힘) */
.product-card{position:relative}
.product-card .brand-badge{
  position:absolute;top:10px;left:10px;z-index:3;
  display:block;
  width:60px;height:60px;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  border-radius:10px;
  pointer-events:none;
}
/* 상세 페이지 메인 이미지 위 배지 */
.gallery{position:relative}
.gallery .brand-badge{
  position:absolute;top:16px;left:16px;z-index:3;
  display:block;
  width:110px;height:110px;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  border-radius:14px;
  pointer-events:none;
}
/* 상세 갤러리 — 반값(좌상단)·추천(우상단) 배지 */
.gallery .half-badge{
  position:absolute;left:16px;top:16px;z-index:4;
  width:72px;height:72px;border-radius:0;
  background:var(--primary);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1.0;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.2);pointer-events:none;
}
.gallery .half-badge .m{font-size:13px;font-weight:600;letter-spacing:-0.3px}
.gallery .half-badge .t{font-size:24px;font-weight:800;margin-top:4px}
.gallery .badges{position:absolute;right:16px;top:16px;z-index:4;display:flex;gap:6px}
.gallery .badges .badge{font-size:13px;padding:6px 12px}
@media (max-width:768px){
  .gallery .half-badge{width:56px;height:56px;left:12px;top:12px}
  .gallery .half-badge .m{font-size:11px}
  .gallery .half-badge .t{font-size:19px;margin-top:3px}
  .gallery .badges{right:12px;top:12px}
}
.product-card .badges{
  position:absolute;right:12px;top:12px;z-index:4;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;
}
/* 반값할인 배지 — 카드 좌상단 (빨간 둥근 사각형 · "N개월" 작게 / "반값" 크게) */
.product-card .half-badge{
  position:absolute;left:12px;top:12px;z-index:5;
  width:54px;height:54px;border-radius:0;
  background:var(--primary);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1.0;box-shadow:0 2px 6px rgba(0,0,0,.18);
  pointer-events:none;text-align:center;
}
.product-card .half-badge .m{font-size:10px;font-weight:600;letter-spacing:-0.3px}
.product-card .half-badge .t{font-size:18px;font-weight:800;margin-top:3px}
/* 모바일 — 배지 축소 */
@media (max-width:768px){
  .product-card .half-badge{width:46px;height:46px;border-radius:0;left:10px;top:10px}
  .product-card .half-badge .m{font-size:9px}
  .product-card .half-badge .t{font-size:15px;margin-top:2px}
}
@media (max-width:560px){
  .product-card .half-badge{width:40px;height:40px;border-radius:0;left:8px;top:8px}
  .product-card .half-badge .m{font-size:8px;letter-spacing:-0.5px}
  .product-card .half-badge .t{font-size:13px;margin-top:1px}
}
.badge{
  font-size:11px;font-weight:700;padding:4px 8px;border-radius:6px;
  background:var(--ink-1);color:#fff;letter-spacing:-0.2px;
}
.badge.b-rental{background:var(--ink-2)}  /* 구독 = 차콜 (정보성) */
.badge.b-sale{background:var(--primary)}  /* 할인 = 빨강 (긴급 강조) */
.badge.b-best{background:var(--gold)}     /* 베스트 = 골드 */
.badge.b-hot{background:var(--primary)}   /* HOT = 빨강 */

.product-card .body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.product-card .model{font-size:11px;color:var(--ink-4);font-weight:600;letter-spacing:0.2px}
.product-card .name{font-size:15px;font-weight:700;line-height:1.4;color:var(--ink-1);min-height:42px;word-break:keep-all}
.product-card .benefits{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.product-card .bft{font-size:11px;color:var(--ink-3);background:var(--surface);padding:3px 8px;border-radius:6px}
.product-card .price-row{margin-top:auto;padding-top:10px;border-top:1px dashed var(--line)}
/* 취소선 정상가는 왼쪽, 구독 월 금액은 오른쪽 같은 줄 */
.product-card .price-row .price-main{display:flex;align-items:baseline;justify-content:flex-end;gap:8px;margin-top:2px}
.product-card .price-row .del{font-size:12px;color:var(--ink-4);text-decoration:line-through;margin-right:auto}
.product-card .price-row .now{font-size:13px;color:var(--ink-3);display:flex;align-items:baseline;gap:4px}
.product-card .price-row .now strong{font-size:20px;color:var(--ink-1);letter-spacing:-0.5px}
/* 제휴카드 적용가 — 구독 요금과 동일한 크기·서식·굵기, 금액만 빨강 */
.product-card .price-row .card-applied{font-size:13px;color:var(--ink-3);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:2px 4px;margin-top:5px}
.product-card .price-row .card-applied small{white-space:nowrap;flex-shrink:0}
.product-card .price-row .card-applied .ca-price{white-space:nowrap}
.product-card .price-row .card-applied strong{font-size:20px;color:var(--primary);letter-spacing:-0.5px}

/* 색상 dot — 모델코드 줄에 inline (우측 정렬). 카드 세로 공간 절약. */
.product-card .model{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.product-card .colors{display:flex;gap:4px;flex-shrink:0}
.product-card .colors .dot{
  width:12px;height:12px;border-radius:50%;
  border:1px solid var(--line-strong);
  background-position:center;background-size:contain;background-repeat:no-repeat;
}

/* ---------- Category section (home) ---------- */
.cat-section{padding:36px 0;border-bottom:1px solid var(--line)}
.cat-section:last-child{border-bottom:none}
/* 홈: 첫 카테고리 섹션 위 패딩 제거 → 아이콘 그리드와의 간격을 위(배너↔아이콘)와 대칭으로 */
#cat-sections .cat-section:first-child{padding-top:0}
.cat-section .section-head{margin-bottom:22px;align-items:center}
.cat-section .section-head h2{font-size:24px;letter-spacing:-0.4px;font-weight:800}
.cat-section .section-head .sub{font-size:13px;color:var(--ink-4);margin-top:3px}
.cat-section .more svg{width:14px;height:14px;vertical-align:middle;margin-left:2px}
.sec-ic{
  width:48px;height:48px;border-radius:14px;
  background:var(--surface);color:var(--ink-2);
  display:grid;place-items:center;flex-shrink:0;
}
.sec-ic svg{width:22px;height:22px}
.cat-page-icon svg{width:28px;height:28px}

/* ─── 카테고리 아이콘 박스 — 통일된 차분한 그레이 톤 ──
   색은 ink-3(#666)보다 더 옅은 톤으로 — 박스 안 아이콘이 너무 강하게 안 보이도록.
   클래스 구조는 그대로 유지. */
.cat-color-water,
.cat-color-air,
.cat-color-bidet,
.cat-color-mattress,
.cat-color-filter,
.cat-color-card,
.cat-color-bed,
.cat-color-box {
  background: var(--surface) !important;
  color: #8A8A8A !important;  /* 차분한 미디엄 그레이 */
}
/* 호버 시 — 매우 연한 회색 (빨강 대신) */
.cat-card:hover .ic[class*="cat-color-"]{
  background: #f0f0f0 !important;
  color: #6b7280 !important;
}
.sec-ic svg{width:26px;height:26px}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink-1);color:#A0A0A0;padding:50px 0 24px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.footer-grid h4{color:#fff;font-size:14px;margin:0 0 14px;letter-spacing:-0.2px}
.footer-grid ul li{font-size:13px;margin-bottom:8px}
.footer-grid ul li a:hover{color:#fff}
/* ---------- 사업자정보 (영업용 신뢰 표시) ----------
   각 HTML 푸터에 동일 블록으로 박힘. 더미 값이므로 실제 정보로 교체할 것. */
.biz-info{
  margin-top:32px;padding-top:24px;border-top:1px solid #3A3A3A;
}
.biz-info .biz-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:10px 28px;margin:0;font-size:12px;
}
.biz-info .biz-row{display:flex;gap:10px;align-items:baseline;min-width:0}
.biz-info dt{color:#888;font-weight:600;min-width:90px;flex-shrink:0;margin:0}
.biz-info dd{color:#BBB;margin:0;word-break:break-all}
.biz-info .biz-row.full{grid-column:1 / -1}
.biz-info .biz-note{font-size:11px;color:#666;margin-top:14px;line-height:1.6}

.footer-bottom{
  margin-top:24px;padding-top:18px;border-top:1px solid #3A3A3A;font-size:12px;color:#777777;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}

/* ---------- Detail page ---------- */
.detail-wrap{padding:40px 20px 80px}
.breadcrumb{font-size:12px;color:var(--ink-4);margin-bottom:24px}
.breadcrumb a{color:var(--ink-3)}
.breadcrumb a:hover{color:var(--ink-1)}
.detail-top{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:flex-start}
.gallery{position:relative}
.gallery .main{
  aspect-ratio:1/1;background:var(--surface);border-radius:18px;overflow:hidden;
  display:grid;place-items:center;border:1px solid var(--line);
}
.gallery .main img{max-width:90%;max-height:90%;object-fit:contain}
.gallery .thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:14px}
.gallery .thumbs .t{
  aspect-ratio:1/1;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  display:grid;place-items:center;background:#fff;cursor:pointer;transition:.15s;
}
.gallery .thumbs .t:hover{border-color:var(--ink-2)}
.gallery .thumbs .t.on{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset}
.gallery .thumbs .t img{max-width:80%;max-height:80%}

.detail-info .model{font-size:13px;color:var(--ink-4);font-weight:600;letter-spacing:0.3px}
.detail-info .name-row{display:flex;align-items:baseline;gap:12px;margin:6px 0 12px;flex-wrap:wrap}
.detail-info .name-row h1{font-size:32px;letter-spacing:-0.5px;margin:0;color:var(--ink-1)}
.detail-info .color-name{font-size:15px;font-weight:300;color:var(--ink-4);letter-spacing:-0.2px}
.detail-info .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.detail-info .tags span{font-size:12px;padding:5px 10px;border-radius:999px;background:var(--surface);color:var(--ink-2);font-weight:600}

/* ---------- 색상 선택 (상세) ---------- */
.color-picker{
  display:flex;align-items:center;gap:16px;
  margin:18px 0;padding:14px 16px;
  border:1px solid var(--line);border-radius:14px;background:#fff;
}
.color-picker[hidden]{display:none}
.color-picker .cp-label{font-size:13px;color:var(--ink-3);font-weight:700;min-width:62px}
.color-picker .cp-chips{display:flex;gap:10px;flex-wrap:wrap}
.color-picker .cp-chip{
  display:inline-grid;place-items:center;
  width:34px;height:34px;border-radius:50%;
  border:2px solid transparent;background:transparent;
  transition:.15s;cursor:pointer;
}
.color-picker .cp-chip:hover{border-color:var(--line-strong)}
.color-picker .cp-chip.on{border-color:var(--primary)}
.color-picker .cp-dot{
  width:22px;height:22px;border-radius:50%;display:block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
  /* url() 이미지 색상(예: PSG 네이비 패턴) 정확히 채우기 — 본사 본문 동일 처리 */
  background-position:center;background-size:contain;background-repeat:no-repeat;
}

/* 약정/관리유형 옵션 블록 — 본사 페이지의 의무약정기간 + 관리유형 영역에 대응 */
.option-block{
  margin-top:18px;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:18px 20px;
}
.benefit-box{
  margin-top:24px;padding:14px 16px;border-radius:14px;
  background:var(--primary-soft);border:1px solid rgba(222,79,65,.18);
  font-size:13px;color:var(--ink-2);line-height:1.55;
  display:flex;align-items:center;gap:10px;
}
.benefit-box[hidden]{display:none}
.benefit-box strong{
  flex:none;font-size:12px;font-weight:700;color:var(--primary);
  padding:3px 9px;border-radius:999px;background:#fff;
  border:1px solid rgba(222,79,65,.28);
}
.option-row{display:flex;align-items:center;gap:16px;padding:8px 0;flex-wrap:wrap}
.option-row[hidden]{display:none}
.option-row + .option-row{border-top:1px solid var(--line);margin-top:8px;padding-top:14px}
.option-row.first-visible{border-top:none;margin-top:0;padding-top:8px}
.option-row .op-label{
  min-width:78px;font-size:14px;font-weight:600;color:var(--ink-2);letter-spacing:-0.02em;
}
.op-tabs{display:flex;gap:8px;flex-wrap:wrap}
.op-tab{
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 18px;min-width:64px;
  border:1px solid var(--line);border-radius:10px;background:#fff;
  font-size:14px;font-weight:600;color:var(--ink-2);
  cursor:pointer;transition:border-color .12s,background .12s,color .12s;
  user-select:none;
}
.op-tab:hover{border-color:var(--line-strong)}
.op-tab.on{
  border-color:var(--primary);color:var(--primary);background:var(--primary-soft);
}
.option-info{
  margin-top:14px;padding:12px 14px;background:#fafafa;border-radius:10px;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;
  font-size:13px;color:var(--ink-2);
}
.option-info .oi-item{display:inline-flex;align-items:center;gap:8px}
.option-info .k{font-weight:600;color:var(--ink-3)}
.option-info .v{color:var(--ink-1)}
.option-info:empty{display:none}
@media (max-width:768px){
  .option-row{gap:10px}
  .option-row .op-label{min-width:64px;font-size:13px}
  .op-tab{padding:8px 14px;font-size:13px;min-width:54px}
}

.price-card{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;margin-top:18px;
}
.price-card .row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.price-card .row:last-child{border-bottom:none}
.price-card .row .label{font-weight:700;color:var(--ink-2)}
.price-card .row .label .label-note{display:block;font-weight:500;font-size:11.5px;color:var(--ink-4);margin-top:3px}
.price-card .row .val{font-size:24px;font-weight:800;color:var(--ink-1);letter-spacing:-0.5px;white-space:nowrap}
.price-card .row .val small{font-size:13px;color:var(--ink-4);font-weight:600;margin-right:4px}
.price-card .row .val .del{font-size:13px;color:var(--ink-4);text-decoration:line-through;display:block;font-weight:500}
/* 반값할인 보조표기 — 처음 N개월 반값금액(빨강 작게) + 현재 요금 가로 배치 */
.price-card .row .val .val-half{display:inline;font-size:12.5px;font-weight:700;color:var(--primary);letter-spacing:0;margin-right:8px;white-space:nowrap}
.price-card .row .val .val-now{display:inline;white-space:nowrap}
/* 제휴카드 적용가(빨강 강조) + 안내 링크 */
.price-card .val-card{color:var(--primary)}
.card-link-row{padding:10px 0 0;text-align:right}
.card-link-row a{font-size:13px;font-weight:700;color:var(--primary);text-decoration:none}
.card-link-row a:hover{text-decoration:underline}

.detail-cta{display:flex;gap:10px;margin-top:18px}
.detail-cta .btn{flex:1;justify-content:center;padding:16px}

/* ---------- Detail Tabs ---------- */
.detail-tabs{margin-top:60px;border-top:1px solid var(--line)}
.detail-tabs .tabbar{
  display:flex;gap:0;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:10;
}
.detail-tabs .tabbar button{
  padding:18px 28px;font-weight:700;font-size:15px;color:var(--ink-4);
  border-bottom:2px solid transparent;transition:.15s;
}
.detail-tabs .tabbar button.on{color:var(--primary-dark);border-bottom-color:var(--primary)}
.detail-tabs .tabpane{padding:40px 0}
.detail-tabs .infoimgs{max-width:1100px;margin:0 auto}
.detail-tabs .infoimgs img,
.detail-tabs .infoimgs video{width:100%;height:auto;margin:0 auto;display:block;border-radius:8px}
.detail-tabs .infoimgs img + img{margin-top:0}

/* ---------- 제품 사양 테이블 ---------- */
.spec-wrap{max-width:900px;margin:0 auto}
/* 매트리스 사이즈 탭 — 제품사양 상단 */
.size-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.size-tab{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 16px;min-width:60px;
  border:1px solid var(--line);border-radius:8px;background:#fff;
  font-size:13.5px;font-weight:500;color:var(--ink-2);
  cursor:pointer;transition:.15s;
}
.size-tab:hover{border-color:var(--line-strong)}
.size-tab.on{
  background:var(--ink-1);color:#fff;border-color:var(--ink-1);font-weight:600;
}
.spec-table{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.5}
.spec-table th,
.spec-table td{
  padding:13px 14px;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top;
}
.spec-table th{
  background:var(--surface);
  color:var(--ink-3);font-weight:600;
  width:18%;min-width:120px;
}
.spec-table td{color:var(--ink-1);width:32%;word-break:break-word}
.spec-table tr:hover th{background:var(--surface-2)}
@media (max-width: 720px){
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td{display:block;width:100%}
  .spec-table th{
    background:transparent;border-bottom:none;padding:14px 0 4px;
    font-size:12px;color:var(--ink-4);
  }
  .spec-table td{padding:0 0 12px;border-bottom:1px solid var(--line);font-size:14px}
  .spec-table th:empty + td{display:none}
  .spec-table th:empty{display:none}
}

/* ---------- Empty / loading ---------- */
.skeleton, .empty{padding:80px 20px;text-align:center;color:var(--ink-4)}
.empty svg{width:48px;height:48px;color:var(--line-strong);margin-bottom:12px}
.loader{
  display:inline-block;width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--primary);
  border-radius:50%;animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Floating 상담 버튼 (FAB) ----------
   PC: 알약형 + 클릭 시 popup(전화·카톡·영업시간).
   모바일: 원형 아이콘만 + tel: 직링크 (탭 → 즉시 전화). */
.fab-consult{
  position:fixed;right:24px;bottom:24px;z-index:100;
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 20px;border-radius:999px;
  background:var(--primary);color:#fff;
  font-weight:700;font-size:15px;letter-spacing:-0.3px;
  box-shadow:0 8px 24px rgba(222,79,65,.32);
  transition:background .18s, box-shadow .18s;
  text-decoration:none;cursor:pointer;
}
.fab-consult:hover{
  background:var(--primary-dark);
  box-shadow:0 12px 30px rgba(222,79,65,.42);
}
.fab-consult svg{width:18px;height:18px}

/* ===== 맨 위로 버튼 (우하단, 상담 FAB 위에 쌓기) ===== */
.scroll-top{
  position:fixed;right:24px;bottom:88px;z-index:98;
  width:46px;height:46px;border-radius:50%;
  background:#fff;border:1px solid var(--line);color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.14);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
.scroll-top.show{opacity:.82;visibility:visible;transform:translateY(0)}
/* 모바일 터치 후 색 잔상 원천 차단 — hover 에서 색을 안 바꾸고(PC는 그림자만), 포커스 외곽선 제거 */
.scroll-top:focus{outline:none}
@media (hover:hover){ .scroll-top:hover{box-shadow:0 7px 20px rgba(0,0,0,.22)} }
.scroll-top svg{width:20px;height:20px}
@media (max-width:560px){ .scroll-top{right:16px;bottom:76px;width:48px;height:48px} }

/* PC popup */
.fab-popup{
  position:fixed;right:24px;bottom:88px;z-index:99;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:18px 20px;min-width:240px;
  box-shadow:0 14px 36px rgba(0,0,0,.16);
  animation:fabPopIn .15s ease-out;
}
.fab-popup[hidden]{display:none}
@keyframes fabPopIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fab-popup .pop-label{margin:0 0 8px;font-size:12px;color:var(--ink-4);font-weight:700;letter-spacing:0.3px}
.fab-popup .pop-tel{font-size:24px;font-weight:800;color:var(--ink-1);letter-spacing:-0.6px;display:block;line-height:1.2}
.fab-popup .pop-hours{font-size:12px;color:var(--ink-3);margin-top:6px}
.fab-popup .pop-kakao{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:14px;padding:10px 14px;border-radius:10px;
  background:#FEE500;color:#191919;font-weight:700;font-size:13px;
  text-decoration:none;transition:background .15s;
}
.fab-popup .pop-kakao:hover{background:#FDD835}

/* 모바일 — 원형 FAB + popup 화면 폭 맞춰 */
@media (max-width: 560px){
  .fab-consult{
    right:16px;bottom:16px;
    width:48px;height:48px;padding:0;border-radius:50%;
    justify-content:center;gap:0;
  }
  .fab-consult .fab-label{display:none}
  .fab-consult svg{width:20px;height:20px}
  .fab-popup{
    right:16px;bottom:82px;
    min-width:auto;width:auto;max-width:calc(100vw - 32px);
    padding:16px 18px;
  }
  .fab-popup .pop-tel{font-size:22px}
}

/* ---------- Filter bar (category page) ---------- */
.filter-bar{
  display:flex;gap:8px;flex-wrap:wrap;padding:16px 0;margin-bottom:24px;border-bottom:1px solid var(--line);
}
.filter-bar .chip{
  padding:8px 14px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;
  font-size:13px;font-weight:600;color:var(--ink-2);transition:.15s;
}
.filter-bar .chip:hover{border-color:var(--ink-2)}
.filter-bar .chip.on{background:var(--ink-1);color:#fff;border-color:var(--ink-1)}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .hero .container{grid-template-columns:1fr;gap:24px;padding-top:36px;padding-bottom:36px}
  .hero h1{font-size:34px}
  .cat-grid{grid-template-columns:repeat(4,1fr);gap:6px}
  .cat-card{padding:10px 4px;flex-direction:column;gap:6px;text-align:center;align-items:center}
  .cat-card .ic{width:42px;height:42px;border-radius:50%;margin:0}
  .cat-card .ic svg{width:22px;height:22px}
  .cat-text{align-items:center}
  .cat-card .nm{font-size:12.5px}
  .cat-card .cnt{font-size:10px}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  /* 2열로 좁아지면 데스크탑용 고정 높이(430px)가 과해 카드가 세로로 늘어남 → 내용 높이에 맞춤 */
  .product-card{min-height:0}
  /* 썸네일 패딩(16px)이 좁은 카드에선 상대적으로 커져 제품이 작아 보임 → PC와 동일한 채움 비율(~90%)로 축소 */
  .product-card .thumb img{padding:8px}
  .detail-top{grid-template-columns:1fr;gap:30px}
  .gallery{position:relative}
  .footer-grid{grid-template-columns:1fr 1fr}
  .gnb{display:none}
  /* CLS: 2열로 변하면 자연 높이 다름 — min-height 재조정 */
  .cat-grid:empty{min-height:280px}
  .product-grid:empty{min-height:880px}
  #cat-sections:empty{min-height:4000px}
  #cat-products:empty{min-height:1500px}
}
@media (max-width: 960px){
  /* 모바일 hero — 카드/제목 작게 */
  .hv-title{top:5%;left:4%;font-size:17px}
  .hv-card{padding:10px 12px;border-radius:11px;animation:none;transform:none}
  .hv-card-tl{top:4%;left:3%;bottom:auto;min-width:148px;transform:none}
  .hv-card-tl .hvc-price strong{font-size:18px}
  .hv-card-tl .hvc-name{font-size:12px}
  .hv-card-tl .hvc-sub{font-size:10px}
}
@media (max-width: 560px){
  .cat-grid{grid-template-columns:repeat(4,1fr);gap:4px}  /* 좁은 모바일도 4열 한 줄 유지 */
  .product-grid{grid-template-columns:repeat(2,1fr)}

  /* 필터 칩: 줄바꿈 막고 한 줄 유지 + 가로 스크롤 */
  .filter-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .filter-bar::-webkit-scrollbar{display:none}
  .filter-bar .chip{flex-shrink:0}

  /* 카드 폭이 절반(약 158px)이라 글자영역이 그대로면 세로로 길쭉해짐(H/W 2.4) →
     글자·여백을 PC 비례로 줄여 PC와 같은 카드 비율(H/W ≈ 1.8)로 축소 */
  .product-card .body{padding:9px 10px 11px;gap:3px}
  .product-card .model{font-size:9px}
  .product-card .name{font-size:12px;line-height:1.3;min-height:31px}
  .product-card .benefits{gap:3px;margin-top:2px}
  .product-card .bft{font-size:9px;padding:2px 5px}
  .product-card .price-row{padding-top:7px}
  /* 모바일 2열 카드는 폭이 좁아 정가(취소선)가 줄바꿈됨 → 모바일에선 숨김.
     할인 강조는 '반값' 배지 + 구독가 + 제휴카드 적용가로 충분. (PC는 그대로 노출) */
  .product-card .price-row .del{display:none}
  .product-card .price-row .now{font-size:11px}
  .product-card .price-row .now strong{font-size:16px}
  .product-card .price-row .card-applied{font-size:11px;margin-top:3px}
  .product-card .price-row .card-applied strong{font-size:16px}

  .hero h1{font-size:28px}
  .section{padding:48px 0}
  .section-head h2{font-size:24px}

  /* ----- 헤더: 빡빡함 완화 ----- */
  .site-header .container{gap:8px;height:60px}
  .brand{gap:8px}
  .brand-logo{height:32px}
  .partner-label{font-size:12px;padding-left:10px;font-weight:500}
  .header-actions{gap:0}
  .icon-btn{width:36px;height:36px}
  .icon-btn svg{width:18px;height:18px}
  /* 영업용 카탈로그 — 장바구니·계정은 모바일에서 의미 적어 숨김. 검색만 유지. */
  .header-actions button[aria-label="장바구니"],
  .header-actions button[aria-label="계정"]{display:none}
  .cta-pill{padding:8px 14px;font-size:13px;white-space:nowrap}
  .cta-pill svg{width:14px;height:14px}

  /* ----- 푸터: 1열 + 각 카테고리 안 링크는 가로 한 줄로 ----- */
  .footer-grid{grid-template-columns:1fr;gap:20px}
  .footer-grid h4{margin-bottom:8px}
  /* 쇼핑·고객지원 등 링크 ul → 한 줄 가로 배열 (고객센터 ft-info 제외) */
  .footer-grid ul:not(.ft-info){display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0}
  .footer-grid ul:not(.ft-info) li{margin:0}
  .biz-info .biz-grid{grid-template-columns:1fr;gap:8px 0}
  .biz-info .biz-row.full{grid-column:auto}
  .biz-info dt{min-width:90px}
  .footer-bottom{
    flex-direction:column;align-items:flex-start;
    gap:6px;padding-top:14px;margin-top:14px;
  }
}

@media (max-width: 380px){
  /* 매우 좁은 폭에선 partner-label 숨겨 로고만 보이게 */
  .partner-label{display:none}
}

/* ===== 상담/주문 신청 모달 ===== */
.consult-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.consult-modal[hidden]{display:none}
.cm-backdrop{position:absolute;inset:0;background:rgba(20,20,30,.5)}
.cm-panel{position:relative;background:#fff;border-radius:20px;width:100%;max-width:440px;max-height:90vh;overflow-y:auto;
  padding:32px 28px;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:cmIn .22s ease}
@keyframes cmIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cm-x{position:absolute;top:16px;right:16px;width:36px;height:36px;border:0;background:var(--surface);border-radius:50%;
  display:grid;place-items:center;color:var(--ink-3);cursor:pointer;transition:background .15s}
.cm-x:hover{background:var(--line)}
.cm-title{font-size:21px;font-weight:800;color:var(--ink-1);letter-spacing:-.5px;padding-right:30px}
.cm-sub{margin-top:8px;font-size:14px;color:var(--ink-3);line-height:1.6}
.cm-product{background:var(--surface);border-radius:12px;padding:12px 16px;margin-bottom:18px;font-size:13.5px;color:var(--ink-2)}
.cm-product strong{color:var(--ink-1);font-weight:700}
.cm-product .cm-product-opt{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-3)}
/* 유형 선택 버튼 */
.cm-choice{display:block;width:100%;text-align:left;margin-top:14px;padding:18px 20px;border:1.5px solid var(--line);
  border-radius:14px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s;font-family:inherit}
.cm-choice:hover{border-color:var(--primary);background:var(--surface)}
.cm-choice strong{display:block;font-size:16px;font-weight:700;color:var(--ink-1)}
.cm-choice span{display:block;margin-top:4px;font-size:13px;color:var(--ink-3);line-height:1.5}
/* 폼 */
.cm-field{display:block;margin-top:14px}
.cm-field span{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.cm-field input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-size:15px;
  font-family:inherit;color:var(--ink-1);transition:border-color .15s;box-sizing:border-box}
.cm-field input:focus{outline:none;border-color:var(--primary)}
.cm-agree{display:flex;align-items:flex-start;gap:9px;margin-top:18px;font-size:12.5px;color:var(--ink-3);line-height:1.55;cursor:pointer}
.cm-agree input{margin-top:2px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--primary)}
.cm-agree a{color:var(--primary);font-weight:700;text-decoration:none}
.cm-agree a:hover{text-decoration:underline}
.cm-err{margin-top:12px;font-size:13px;color:var(--primary);font-weight:600}
.cm-actions{display:flex;gap:10px;margin-top:22px}
.cm-back{flex:0 0 auto;padding:13px 20px;border:1.5px solid var(--line);border-radius:10px;background:#fff;
  font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;font-family:inherit}
.cm-back:hover{background:var(--surface)}
.cm-submit{flex:1;padding:14px;border:0;border-radius:10px;background:var(--primary);color:#fff;
  font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s}
.cm-submit:hover{background:var(--primary-dark,#c33f33)}
.cm-submit:disabled{opacity:.6;cursor:default}
/* 완료 */
#cm-step-done{text-align:center;padding:10px 0}
.cm-done-ic{width:72px;height:72px;margin:6px auto 18px;border-radius:50%;background:var(--surface);
  display:grid;place-items:center;color:var(--primary)}
#cm-step-done .cm-submit{margin-top:22px}
@media (max-width:480px){
  .cm-panel{padding:26px 20px;border-radius:16px}
  .cm-title{font-size:19px}
}