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

html {
  /* 윈도우 스크롤바 레이아웃 쏠림 방지 (데스크탑만) */
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}

@media (max-width: 768px) {
  html {
    scrollbar-gutter: auto;
  }
}

html, body {
  min-height: 100dvh;
  width: 100%;
  overflow-x: hidden; /* 가로 스크롤(쏠림 현상) 방지 */
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #fff;
  color: #0a0a0a;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

/* ─── 토큰 ───────────────────────────────────────────────────────────── */
:root {
  --page-x: 5rem;
  --queue-gap: 0.75rem;
  --frame-gap: 1.5rem;

  /* ── 타이포그래피 스케일 (4단계) ──────────────────────────────────
     Display:  섹션 대표 타이틀 (hero, section header, 상담 타이틀)
     Title:    카드·서브섹션 제목
     Eyebrow:  섹션 서브레이블 · 카테고리 · 가격
     Body:     본문
  ─────────────────────────────────────────────────────────────── */
  --t-display:  clamp(1.43rem, 3.57vw, 3rem);   /* 모든 섹션 주요 헤드라인   */
  --t-title:    clamp(1.8rem, 3vw, 2.6rem);     /* 카드 제목, 서브 헤드라인  */
  --t-eyebrow:  clamp(1.2rem, 1.5vw, 1.5rem);  /* 섹션 서브레이블           */
  --t-body:     1rem;                            /* 본문                     */
}

/* ─── 헤더 ────────────────────────────────────────────────────────────── */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-x);
  height: 120px;
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #fff;
  z-index: 100;
}

/* 헤더 높이만큼 본문 밀어내기 */
main { padding-top: 120px; }

/* 모바일: 헤더 높이 절반으로 축소 + 로고 크기 축소 */
@media (max-width: 768px) {
  .site-header { height: 60px !important; }
  main          { padding-top: 60px !important; }
  .logo         { font-size: 1.5rem; }   /* 2.1rem ÷ 1.4 ≈ 1.5rem */
}

.logo {
  font-size: 2.1rem;
  font-weight: 600;
  color: #0a0a0a;
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1;
}

.header-actions { display: flex; align-items: center; gap: 0.25rem; }

.icon-btn {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  padding: 0.5rem; color: #0a0a0a; border-radius: 4px;
  transition: opacity 0.15s;
}
.icon-btn:hover { opacity: 0.5; }

/* ─── 히어로 섹션 ─────────────────────────────────────────────────────── */
.hero {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem var(--page-x) 4rem;
}

/* ─── 상단: 카드형 프레임 ────────────────────────────────────────────────── */
.hero-top { width: 100%; }

/* ─── 메인 프레임 ─────────────────────────────────────────────────────── */
.hero-frame-wrap { position: relative; }

/* ── 슬라이드 Play / Pause 토글 버튼 ─────────────────────────── */
.slide-play-btn {
  position: absolute;
  z-index: 10;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s;
  line-height: 0;
}
.slide-play-btn:hover { color: #fff; }

/* 기본(재생 중): Pause 아이콘 표시, Play 아이콘 숨김 */
.slide-play-icon--pause { display: block; }
.slide-play-icon--play  { display: none;  }

/* 일시정지 상태: Play 아이콘 표시, Pause 아이콘 숨김 */
.slide-play-btn.is-paused .slide-play-icon--pause { display: none;  }
.slide-play-btn.is-paused .slide-play-icon--play  { display: block; }

/* 모바일(≤767px): 우측 상단 */
@media (max-width: 767px) {
  .slide-play-btn {
    top: 12px;
    right: 12px;
    bottom: auto;
  }
}

/* 태블릿·데스크탑(≥768px): 우측 하단 */
@media (min-width: 768px) {
  .slide-play-btn {
    bottom: 18px;
    right: 20px;
    top: auto;
  }
}


/* ── 슬라이드 닷 네비게이션 ─────────────────────────────────── */
.slide-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 7px;
  align-items: center;
}

.slide-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
}

.slide-dot.active {
  background: #fff;
  transform: scale(1.25);
  border-color: #fff;
}

/* ── 모바일 기본: 직사각 프레임, 서클 없음 ────────────────────────────── */
.hero-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 0;
}
.hero-card-circle { display: none; }

/* ── 태블릿·데스크탑(768px+): 오목 곡선(좌상단만) ───────────────── */
@media (min-width: 768px) {
  .hero-frame {
    --r: 30px;
    --s: 80px;
    aspect-ratio: 16 / 9;
    clip-path: shape(
      from 0 calc(var(--s) + 2 * var(--r)),
      arc by var(--r) calc(0px - var(--r)) of var(--r) cw,
      arc by var(--s) calc(0px - var(--s)) of var(--s),
      arc by var(--r) calc(0px - var(--r)) of var(--r) cw,
      hline to 100%,
      vline to 100%,
      hline to 0,
      vline to calc(var(--s) + 2 * var(--r))
    );
  }

  /* 데스크탑+에서 히어로 수직 간격 조정 */
  .hero {
    padding-top: 0.5rem;   /* 헤더~프레임 간격 축소 */
    gap: 4rem;              /* 프레임~타이틀 간격 확보 */
  }
  .hero-bottom {
    padding-top: 2rem;     /* 타이틀 상단 여백 추가 */
  }
  /* 공통 서클 스타일 */
  .hero-card-circle {
    display: flex;
    position: absolute;
    width: 90px;
    height: 90px;
    background: #0a0a0a;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    z-index: 2;
    pointer-events: none;
  }
  .hero-card-circle--tl { top: 0; left: 0; }
  .hero-card-circle--br { display: none; }  /* 우하단 서클+곡선 제거 */
  /* 히어로 텍스트: 한 줄로 */
  .hero-headline {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 0.4em;
  }
  .hero-sub,
  .hero-main {
    display: inline;
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    font-weight: 700;
    color: #0a0a0a;
    letter-spacing: -0.04em;
    line-height: 1.15;
  }
  /* tr-wrap/tr-inner가 block이면 줄바꿈 강제됨 → inline으로 해제 */
  .hero-sub .tr-wrap,
  .hero-main .tr-wrap,
  .hero-sub .tr-inner,
  .hero-main .tr-inner {
    display: inline;
    overflow: visible;
  }
}
.slide-sep { font-weight: 300; opacity: 0.35; }

/* ── btn-home: skoll 호버 애니메이션 ─────────────────────────────────── */
.btn-home {
  background: transparent;
  border: none;
  cursor: pointer;
  overflow: hidden;
  pointer-events: auto;
}

/* 검은 원: 평소엔 버튼을 덮고 있다가 hover 시 아래로 슬라이드 아웃 */
.btn-home::before {
  content: '';
  position: absolute;
  background: #0a0a0a;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 50%;
  transform: translate3d(0, 0, 0);
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

.btn-home:hover::before {
  transform: translate3d(0, 100%, 0);
}

/* 화살표 / SONO 레이블 공통 */
.btn-home__arrow,
.btn-home__label {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* 기본: 화살표 중앙, SONO는 아래에 숨김 */
.btn-home__arrow {
  color: #fff;
  transition: transform 0.2s ease;
}
.btn-home__label {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  transform: translateY(100%);
  transition: transform 0.2s 0.1s ease, color 0.1s 0.25s;
}

/* hover: 화살표 위로 퇴장, SONO 아래서 등장 */
.btn-home:hover .btn-home__arrow {
  animation: BtnMoveUpInitial 0.2s forwards;
}
.btn-home:hover .btn-home__label {
  transform: translateY(0);
  color: #0a0a0a;
}

@keyframes BtnMoveUpInitial {
  to { transform: translate3d(0, -115%, 0); }
}
@keyframes BtnMoveUpEnd {
  from { transform: translate3d(0, 100%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* ── btn-next: 우하단 슬라이드 버튼 (동일 애니메이션) ─────────────────── */
.btn-next {
  background: transparent;
  border: none;
  cursor: pointer;
  overflow: hidden;
  pointer-events: auto;
}

.btn-next::before {
  content: '';
  position: absolute;
  background: #0a0a0a;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 50%;
  transform: translate3d(0, 0, 0);
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

.btn-next:hover::before {
  transform: translate3d(0, 100%, 0);
}

/* counter (기본), arrow (hover 시 등장) */
.btn-next__label,
.btn-next__arrow {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.btn-next__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  transition: color 0.1s 0.25s;
  gap: 0.2rem;
}
.btn-next:hover .btn-next__label {
  animation: BtnMoveUpInitial 0.2s forwards;
}

.btn-next__arrow {
  color: #fff;
  transform: translateY(100%);
  transition: transform 0.2s 0.1s ease, color 0.1s 0.25s;
}
.btn-next:hover .btn-next__arrow {
  transform: translateY(0);
  color: #0a0a0a;
}

/* ─── 슬라이드 ───────────────────────────────────────────────────────── */
/* ─── 슬라이드 트랙 ──────────────────────────────────────────────────── */
.slides-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.frame-slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
}

/* ── 이미지 전용 슬라이드 ────────────────────────────────────── */
.frame-slide--img-only {
  background: #f0ece8; /* 이미지 로딩 전 fallback */
}

/* picture 태그가 프레임을 가득 채우도록 */
.frame-slide--img-only picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.slide-full-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* 모바일: 세로 이미지 — 상단 기준 표시 */
@media (max-width: 767px) {
  .slide-full-img {
    object-position: center top;
  }
}


.frame-slide-content {
  position: absolute;
  inset: 0;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.75rem;
}

.frame-slide-content--top-center {
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding-top: 3rem;
}

.frame-slide-content--top-center .frame-label {
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #0a0a0a;
}

.frame-slide-content--top-center .frame-title {
  color: #0a0a0a;
}

.frame-flow-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.66rem 1.68rem;
  border-radius: 999px;
  background: #fff;
  font-size: 1.06rem;
  font-weight: 600;
  color: #0a0a0a;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ─── 채팅 버블 ────────────────────────────────────────────────────── */
.frame-chat-bubbles {
  width: 260px;
  max-width: 90%;
}

/* ─── 유리 스텝 카드 ─────────────────────────────────────────────── */
@property --step-angle-1 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -75deg;
}
@property --step-angle-2 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -45deg;
}

.frame-step-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(110px, auto);
  gap: 0.75rem;
  width: 100%;
  flex: 0 0 auto;
  margin-top: 1rem;
}

.step-card-wrap {
  position: relative;
  z-index: 2;
  border-radius: 14px;
  transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1);
  height: 100%;
}
.step-card-wrap:hover { transform: scale(0.975); }

.step-card-shadow {
  --sc-fix: 1.5em;
  position: absolute;
  width: calc(100% + var(--sc-fix));
  height: calc(100% + var(--sc-fix));
  top: calc(0% - var(--sc-fix) / 2);
  left: calc(0% - var(--sc-fix) / 2);
  filter: blur(clamp(2px, 0.125em, 12px));
  overflow: visible;
  pointer-events: none;
}
.step-card-shadow::after {
  content: "";
  position: absolute;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.08));
  width: calc(100% - var(--sc-fix) - 0.25em);
  height: calc(100% - var(--sc-fix) - 0.25em);
  top: calc(var(--sc-fix) - 0.4em);
  left: calc(var(--sc-fix) - 0.875em);
}

.step-card {
  --border-w: 1px;
  position: relative;
  z-index: 3;
  height: 100%;
  box-sizing: border-box;
  background: linear-gradient(-75deg,
    rgba(255,255,255,0.25),
    rgba(255,255,255,0.65),
    rgba(255,255,255,0.25));
  border-radius: 14px;
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,0.04),
    inset 0 -2px 2px rgba(255,255,255,0.5),
    0 4px 3px -2px rgba(0,0,0,0.15),
    inset 0 0 0 0 rgba(255,255,255,0.2);
  backdrop-filter: blur(4px);
  padding: 1.1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  text-align: left;
  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* 유리 테두리 */
.step-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 14px;
  width: calc(100% + var(--border-w));
  height: calc(100% + var(--border-w));
  top: calc(0% - var(--border-w) / 2);
  left: calc(0% - var(--border-w) / 2);
  padding: var(--border-w);
  box-sizing: border-box;
  background: conic-gradient(
    from var(--step-angle-1) at 50% 50%,
    rgba(0,0,0,0.4),
    rgba(0,0,0,0) 5% 40%,
    rgba(0,0,0,0.4) 50%,
    rgba(0,0,0,0) 60% 95%,
    rgba(0,0,0,0.4)
  ), linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.55));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: --step-angle-1 500ms ease;
}
.step-card-wrap:hover .step-card::after { --step-angle-1: -125deg; }

/* 광택 오버레이 */
.step-card::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: 14px;
  overflow: clip;
  background: linear-gradient(
    var(--step-angle-2),
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.45) 40% 50%,
    rgba(255,255,255,0) 55%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  background-size: 200% 200%;
  background-position: 0% 50%;
  transition:
    background-position 500ms cubic-bezier(0.25, 1, 0.5, 1),
    --step-angle-2 500ms cubic-bezier(0.25, 1, 0.5, 1);
}
.step-card-wrap:hover .step-card::before {
  background-position: 25% 50%;
  --step-angle-2: -15deg;
}

.step-card__num {
  font-size: 0.91rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2a5bda;
}
.step-card__title {
  font-size: clamp(1.4rem, 1.82vw, 1.61rem);
  font-weight: 700;
  color: #0a0a0a;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.step-card__desc {
  font-size: 1.15rem;
  color: rgba(10,10,10,0.55);
  line-height: 1.55;
}
.step-card__accent { color: #2a5bda; font-weight: 600; }

/* 모바일: 간격만 축소, 2열 유지 */
@media (max-width: 767px) {
  .frame-step-grid { gap: 0.5rem; margin-top: 0.6rem; }
  .step-card { padding: 0.8rem 0.8rem 0.75rem; }
  .step-card__title { font-size: 1.15rem; }
  .step-card__desc { font-size: 0.9rem; }
}

/* 데스크탑: 타이틀과 동일하게 full width */

/* ─── 히어로 슬라이드 레이아웃 ─────────────────────────────────── */
.slide-hero-layout {
  position: absolute;
  inset: 0;
  padding: 6% 5%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 4%;
  box-sizing: border-box;
}

.slide-hero-left {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  flex: 1;
  min-width: 0;
  justify-content: center;
  pointer-events: none;
}

.slide-hero-svg {
  width: clamp(80px, 14%, 160px);
}
.slide-hero-svg svg {
  width: 100%;
  height: auto;
  display: block;
}

.slide-hero-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: left;
}
.slide-hero-sub {
  font-size: clamp(1.19rem, 1.68vw, 1.54rem);
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.slide-hero-title {
  font-size: clamp(2.1rem, 3.64vw, 3.36rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

/* ─── 히어로 블랙 카드 ─────────────────────────────────────────── */
.hero-info-card {
  margin-top: 1rem;
  background: #0a0a0a;
  border-radius: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 60px;
  padding: 0.9rem 1.1rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* ─── 우측 2×2 벤토 카드 ───────────────────────────────────────── */
.slide-hero-right {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0.5rem;
  width: clamp(308px, 55%, 569px);
  align-self: stretch;
  flex-shrink: 0;
  pointer-events: none;
}

.bento-card {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  padding: 1.4rem 1.3rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.3rem;
  position: relative;
  overflow: hidden;
}

.bento-img {
  position: absolute;
  bottom: 0.9rem;
  right: 0.9rem;
  height: 32%;
  width: auto;
  object-fit: contain;
  object-position: bottom right;
}

.bento-card--light .bento-step,
.bento-card--light .bento-title,
.bento-card--light .bento-desc { color: #1a1a1a; }

.bento-card--dark .bento-step,
.bento-card--dark .bento-title,
.bento-card--dark .bento-desc { color: #fff; }

.bento-step {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: #0a0a0a;
  color: #fff !important;
  font-size: clamp(0.62rem, 0.85vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: fit-content;
  margin-bottom: 0.2rem;
}
.bento-title {
  font-size: clamp(1.05rem, 1.63vw, 1.52rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.bento-desc {
  font-size: clamp(0.79rem, 1.05vw, 0.96rem);
  line-height: 1.5;
  opacity: 0.85;
  color: #1a1a1a;
}
.bento-card--dark .bento-desc { color: #fff !important; opacity: 0.85; }
.bento-card--light strong { color: #3167ED; }
.bento-card--dark strong { color: #a0ec06; }

@media (max-width: 767px) {
  .slide-hero-right {
    display: none; /* 모바일에서는 숨김 */
  }
}

.hero-info-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  font-size: clamp(0.78rem, 1.1vw, 1rem);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.sel-badge {
  padding: 0.8rem 1.2rem;
  border: 1.5px solid #000; /* 가이드 버튼과 동일한 테두리 */
  border-radius: 14px;      /* 가이드 버튼과 동일한 둥글기 */
  background: #fff;
  color: #000;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.sel-badge.active {
  background: #000;
  color: #fff;
}
.sel-badge:hover {
  background: #f0f0f0;
}
.sel-badge.active:hover {
  background: #333;
}

.hero-step-sep {
  color: rgba(255,255,255,0.35);
  font-weight: 400;
}

@media (max-width: 767px) {
  .hero-info-card { min-height: 60px; padding: 0.8rem 1rem; }
  .hero-info-steps { font-size: clamp(0.7rem, 2.8vw, 0.88rem); gap: 0.3rem 0.4rem; }
}

/* 소형 핸드폰 (390px 이하) */
@media (max-width: 390px) {
  .hero-info-card { min-height: 44px; padding: 0.3rem 0.7rem; margin-top: 0.4rem; }
  .hero-info-steps { font-size: clamp(0.64rem, 2.6vw, 0.8rem); gap: 0.2rem 0.3rem; }
}

@media (max-width: 767px) {
  /* 전체 레이아웃: 세로 스택 */
  .slide-hero-layout {
    flex-direction: column;
    padding: 6% 5% 4%;
    gap: 0.8rem;
    align-items: stretch;
    overflow: hidden;
  }

  /* SVG: 우측 상단 배경 데코 (3배 크게, 반투명) */
  .slide-hero-svg {
    position: absolute;
    top: -65%;
    right: -30%;
    width: clamp(200px, 62vw, 300px);
    opacity: 1;
    z-index: 1;
    pointer-events: none;
    flex-shrink: 0;
  }

  /* 좌측 컨텐츠: 세로 배치 */
  .slide-hero-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
  }

  .slide-hero-text { align-items: flex-start; text-align: left; }
  .slide-hero-title { font-size: clamp(1.7rem, 6.5vw, 2.3rem); }
  .slide-hero-sub { font-size: clamp(0.9rem, 3.5vw, 1.1rem); }

  .hero-info-card {
    width: fit-content;
    max-width: 100%;
    position: relative;
    z-index: 3;
  }

  /* 그리드 카드: 하단 표시 */
  .slide-hero-right {
    display: grid;
    width: 100%;
    flex: 1;
    min-height: 0;
    aspect-ratio: 2 / 1;
    align-self: auto;
    position: relative;
    z-index: 2;
  }

  /* 카드 크기 조정 */
  .bento-step { font-size: clamp(0.66rem, 2.64vw, 0.84rem); padding: 0.3rem 0.55rem; }
  .bento-title { font-size: clamp(1.02rem, 3.84vw, 1.32rem); }
  .bento-desc { font-size: clamp(0.78rem, 2.64vw, 0.96rem); }
  .bento-card { padding: 0.9rem 1rem; }
  .bento-img { height: 27%; bottom: 0.6rem; right: 0.6rem; }
}

/* ─── 태블릿 (768px ~ 1024px): 데스크탑 동일 배치 유지 ──────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  .slide-hero-layout { padding: 5% 4%; gap: 3%; }
  .slide-hero-right {
    display: grid;
    width: clamp(260px, 50%, 460px);
  }
  .slide-hero-svg { width: clamp(70px, 11%, 130px); }
  .slide-hero-title { font-size: clamp(1.6rem, 3vw, 2.6rem); }
  .slide-hero-sub { font-size: clamp(0.9rem, 1.5vw, 1.2rem); }
  .hero-info-card { padding: 0.7rem 0.9rem; min-height: 48px; }
  .hero-info-steps { font-size: clamp(0.68rem, 1vw, 0.88rem); }
  .bento-title { font-size: clamp(0.9rem, 1.4vw, 1.3rem); }
  .bento-desc { font-size: clamp(0.68rem, 0.9vw, 0.85rem); }
  .bento-step { font-size: clamp(0.58rem, 0.75vw, 0.72rem); padding: 0.35rem 0.6rem; }
  .bento-card { padding: 1rem 1.1rem; }
  .bento-img { height: 28%; bottom: 0.7rem; right: 0.7rem; }
}

.frame-chat-bubbles--single {
  width: auto;
  max-width: 88%;
  display: flex;
  justify-content: center;
}

.frame-chat-bubbles--single .chat-bubble {
  float: none;
  max-width: 100%;
  white-space: nowrap;
}

.chat-bubble {
  position: relative;
  padding: 0.55rem 1.1rem;
  border-radius: 20px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 6px;
  max-width: 80%;
  opacity: 0;
}

.chat-bubble--them {
  background: #fff;
  color: #0a0a0a;
  float: left;
  border-bottom-left-radius: 4px;
}

.chat-bubble--me {
  background: #0B93F6;
  color: #fff;
  float: right;
  border-bottom-right-radius: 4px;
}

.chat-clear { clear: both; }

/* ── keyframes ── */
@keyframes chat-gentle {
  0%   { opacity: 0; transform: scale3d(1.5, 1.5, 1.5); transform-origin: bottom right; }
  50%  { opacity: 1; transform: scale3d(1.5, 1.5, 1.5); }
  to   { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes chat-slam {
  0%   { opacity: 0; transform: rotate3d(0,0,1,5deg) scale3d(3,3,3) translate3d(-40px,-10px,0); }
  18%  { opacity: 1; transform: rotate3d(0,0,1,0deg) scale3d(1,1,1) translate3d(0,0,0); }
  40%  { transform: rotate3d(0,0,1,1deg) scale3d(1.08,1.08,1.08) translate3d(-1px,-1px,0); }
  55%  { transform: scale3d(1,1,1); }
  to   { opacity: 1; transform: rotate3d(0,0,1,0deg); }
}

@keyframes chat-loud {
  0%   { opacity: 0; transform: scale3d(0.5,0.5,0.5); }
  10%  { opacity: 1; }
  20%  { transform: rotate3d(0,0,1,5deg) scale3d(1.4,1.4,1.4); }
  30%  { transform: rotate3d(0,0,1,-5deg) scale3d(1.4,1.4,1.4); }
  40%  { transform: rotate3d(0,0,1,5deg) scale3d(1.4,1.4,1.4); }
  50%  { transform: rotate3d(0,0,1,-5deg) scale3d(1.4,1.4,1.4); }
  to   { opacity: 1; transform: rotate3d(0,0,1,0deg) scale3d(1,1,1); }
}

.chat-gentle {
  animation: chat-gentle 4s ease-out both;
  transform-origin: bottom right;
}
.chat-slam {
  animation: chat-slam 1.5s cubic-bezier(.87,.58,.25,1.29) both;
}
.chat-loud {
  animation: chat-loud 1.5s ease-in-out both;
}

.frame-label {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.frame-title {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

/* ─── 도트 (모바일만) ─────────────────────────────────────────────────── */
.hero-dots {
  display: none;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0 0.5rem;
}

.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ccc; border: none; cursor: pointer; padding: 0;
  transition: background 0.3s, transform 0.2s;
}
.dot.active { background: #0a0a0a; transform: scale(1.25); }



/* ─── 하단: 텍스트 + 배지 ────────────────────────────────────────────── */
.hero-bottom {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hero-headline {
  font-size: var(--t-display);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: #0a0a0a;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 태블릿+ : br 숨겨서 한 줄로 표시 */
@media (min-width: 768px) {
  .mobile-break { display: none; }
}

.hero-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.54rem;
  border-radius: 999px;
  background: #0a0a0a;
  color: #fff;
  font-size: 1.27rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* ─── 반응형 (모바일 ≤768px) ─────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --page-x: 2rem; }

  .site-header { padding: 0 var(--page-x); height: 120px; }

  .hero { padding: 0 0 3rem; gap: 0; }

  .hero-top { grid-template-columns: 1fr; gap: 0; }

  .hero-frame { aspect-ratio: 3 / 4; }

  .hero-queue { display: none; }
  .hero-dots  { display: flex; }

  .hero-bottom { padding: 2.5rem var(--page-x) 0; gap: 1.25rem; }

  .frame-title { font-size: clamp(1.6rem, 7vw, 2.4rem); }

  /* 모바일 메인 타이틀 */
  .hero-headline { font-size: 2.2rem; }

  .tag {
    font-size: 1.1rem;
    padding: 0.55rem 1.3rem;
  }

  /* BS 카드 오버라이드는 기본 스타일 아래 별도 미디어쿼리에서 처리 */
}

/* ─── Best Seller 섹션 ──────────────────────────────────────────────────── */
.section-bs {
  padding: 8vw var(--page-x) 10vw;
}

.section-bs__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 3rem;
}

.section-title {
  font-size: var(--t-display);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #0a0a0a;
}

/* 모바일: section-title 2배 확대 */
@media (max-width: 768px) {
  .section-title { font-size: 2.86rem; }
}


.section-more {
  display: flex;
  align-items: center;
  color: #0a0a0a;
  text-decoration: none;
  transition: transform 0.2s;
}
.section-more:hover { transform: translateX(4px); }

/* 좌우 화살표 네비 */
.bs-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bs-nav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #0a0a0a;
  padding: 0.4rem;
  transition: transform 0.2s;
}
.bs-nav__btn:first-child:hover { transform: translateX(-4px); }
.bs-nav__btn:last-child:hover  { transform: translateX(4px); }

/* ─── 캐러셀 ─────────────────────────────────────────────────────────── */
.bs-carousel {
  overflow: hidden;
  width: 100%;
}

.bs-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* 카드: 기본 1개 보임 (모바일) */
.bs-card {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  cursor: pointer;
}

/* 태블릿 (768px+): 2개 */
@media (min-width: 768px) {
  .bs-card { flex: 0 0 calc((100% - 1.5rem) / 2); }
}

/* 데스크탑 (1200px+): 3개 */
@media (min-width: 1200px) {
  .bs-card { flex: 0 0 calc((100% - 3rem) / 3); }
}

/* 썸네일 래퍼 (히어로 frame-wrap 역할) */
.bs-card__thumb-wrap {
  position: relative;
}

/* 썸네일 */
.bs-card__thumb {
  --r: 20px;   /* 전환 아크 */
  --s: 70px;   /* 오목 아크 */
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  clip-path: shape(
    from 0 calc(var(--s) + 2 * var(--r)),
    arc by var(--r) calc(0px - var(--r)) of var(--r) cw,
    arc by var(--s) calc(0px - var(--s)) of var(--s),
    arc by var(--r) calc(0px - var(--r)) of var(--r) cw,
    hline to 100%,
    vline to calc(100% - var(--s) - 2 * var(--r)),
    arc by calc(0px - var(--r)) var(--r) of var(--r) cw,
    arc by calc(0px - var(--s)) var(--s) of var(--s),
    arc by calc(0px - var(--r)) var(--r) of var(--r) cw,
    hline to 0,
    vline to calc(var(--s) + 2 * var(--r))
  );
}

/* 카드 서클 배지 */
.bs-card__circle {
  position: absolute;
  width: 68px;
  height: 68px;
  background: #0a0a0a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  z-index: 2;
}
.bs-card__circle--tl { top: 0; left: 0; }
.bs-card__circle--br { bottom: 0; right: 0; font-size: 0.85rem; letter-spacing: 0.02em; }


.bs-card__thumb--1 {
  background: linear-gradient(145deg, #0d2b3e 0%, #0a5f6e 40%, #14998b 100%);
}
.bs-card__thumb--2 {
  background: linear-gradient(145deg, #c93b1a 0%, #ff6242 60%, #ffa040 100%);
}
.bs-card__thumb--3 {
  background: linear-gradient(145deg, #1a0066 0%, #4c00e6 50%, #8040ff 100%);
}
.bs-card__thumb--4 {
  background: linear-gradient(145deg, #2d1a00 0%, #8a4500 55%, #c48a00 100%);
}
.bs-card__thumb--5 {
  background: linear-gradient(145deg, #001f3d 0%, #003f8a 55%, #0077c8 100%);
}

/* 썸네일 번호 */
.bs-card__rank {
  font-size: 4rem;
  font-weight: 900;
  color: rgba(255,255,255,0.25);
  letter-spacing: -0.05em;
  line-height: 1;
  font-family: inherit;
}

/* 카드 본문 */
.bs-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.bs-card__sub {
  font-size: 1.4rem;
  font-weight: 400;
  color: #0a0a0a;
  letter-spacing: 0.01em;
}

.bs-card__title {
  font-size: var(--t-title);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: #0a0a0a;
  margin: 0;
}

.bs-card__price {
  font-size: var(--t-eyebrow);
  font-weight: 400;
  color: #0a0a0a;
  margin-top: 0.2rem;
}

/* BS 카드 — 모바일에서 전체 텍스트 확대 */
@media (max-width: 768px) {
  .bs-card__title { font-size: 2.4rem !important; }
  .bs-card__price { font-size: 1.6rem !important; }
  .bs-tag         { font-size: 1.2rem; padding: 0.55rem 1.4rem; }
}

.bs-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bs-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.58rem 1.5rem;
  border-radius: 999px;
  background: #0a0a0a;
  color: #fff;
  font-size: 1.33rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* 호버 썸네일 확대 */
.bs-card__thumb {
  transition: transform 0.4s cubic-bezier(0.2, 0, 0.2, 1);
}
.bs-card:hover .bs-card__thumb {
  transform: scale(1.02);
}

/* ── 반응형 그리드 ─────────────────────────────────────────────────────── */
/* 태블릿 (768px+): 2열 */
@media (min-width: 768px) {
  .bs-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
/* 데스크탑 (1200px+): 3열 */
@media (min-width: 1200px) {
  .bs-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── 빈 섹션 ──────────────────────────────────────────────────────────── */
.section-empty {
  min-height: 100vh;
}

/* ─── 텍스트 리빌 래퍼 ──────────────────────────────────────────────────── */
.tr-wrap {
  display: block;
  overflow: hidden;
}
.tr-inner {
  display: block;
}


/* ─── 상담 섹션 ─────────────────────────────────────────────────── */
.section-consult { padding: 0; }

.consult-header {
  padding: 5vw var(--page-x) 0;
  text-align: center;
}

.consult-sub {
  font-size: clamp(1.56rem, 2vw, 1.95rem);
  font-weight: 400;
  color: #0a0a0a;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
  overflow: hidden; /* tr-inner 클리핑 */
}

.consult-title {
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.05em;
  color: #0a0a0a;
  overflow: hidden; /* tr-inner 클리핑 */
}

@media (max-width: 767px) {
  .consult-title {
    font-size: clamp(2.38rem, 5.95vw, 3.33rem); /* 모바일 2배 × 1/1.2 */
  }
}

/* ─── 플랜 탭바 ──────────────────────────────────────────────────── */
.plan-sticky-wrap {
  position: relative;
  z-index: 101;
  background: #fff;
  padding: 0;
  margin-bottom: 1.5rem;
}

.plan-sticky-wrap.is-fixed {
  position: fixed;
  left: 0;
  right: 0;
  padding: 0.8rem var(--page-x, 5%);
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.plan-sticky-wrap.is-fixed.brand-attached {
  border-bottom: none;
  box-shadow: none;
  padding-bottom: 0;
}
/* 플랜 배지: 아래에 다른 탭이 붙을 때 하단 라운딩 및 테두리 제거 */
.plan-sticky-wrap.is-fixed.brand-attached #planBadges {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* ─── 브랜드 탭바 sticky 래퍼 ─────────────────────────────────────── */
.brand-sticky-wrap {
  position: relative;
  z-index: 100;
  background: #fff;
  padding: 0;
  margin-bottom: 1.5rem;
}

.brand-sticky-wrap.is-fixed {
  position: fixed;
  left: 0;
  right: 0;
  padding: 0.8rem var(--page-x, 5%);
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* 플랜이 바로 위에 있을 때 상단 여백 없이 밀착 */
.brand-sticky-wrap.is-fixed.plan-attached {
  padding-top: 0.1rem;
}

/* 가전종류 탭이 바로 아래 붙을 때 → 구분선/그림자 제거 */
.brand-sticky-wrap.is-fixed.brand-attached {
  border-bottom: none;
  box-shadow: none;
  padding-bottom: 0.1rem;
}

.brand-sticky-placeholder { display: none; }
.brand-sticky-placeholder.active { display: block; }

/* ─── 브랜드 탭바 (12컬럼 그리드 일치) ─────────────────────────────── */
#brandBadges {
  display: flex !important;
  gap: 0 !important;
  width: 100%;
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
}

#brandBadges .sel-badge {
  flex: 1 !important;
  border-radius: 0 !important;
  border: none !important;
  border-right: 1.5px solid #e0e0e0 !important;
  background: transparent;
  color: #0a0a0a;
  padding: 0.7rem 0.3rem !important;
  text-align: center;
  font-size: clamp(0.82rem, 1.1vw, 1.02rem) !important;
  font-weight: 700;
  transition: background 0.15s, color 0.15s;
  transform: none !important;
}

#brandBadges .sel-badge:last-child { border-right: none !important; }
#brandBadges .sel-badge:hover { background: #f4f4f4; color: #0a0a0a; transform: none !important; }
#brandBadges .sel-badge.active { background: #0a0a0a; color: #fff; outline: none; }
#brandBadges .sel-badge:focus { outline: none; }

@media (max-width: 767px) {
  #brandBadges .sel-badge { padding: 0.6rem 0.2rem !important; font-size: clamp(0.72rem, 2.8vw, 0.88rem) !important; }
  #catBadges .sel-badge { padding: 0.6rem 0.2rem !important; font-size: clamp(0.72rem, 2.8vw, 0.88rem) !important; }
}

/* placeholder */
.plan-sticky-placeholder { display: none; }
.plan-sticky-placeholder.active { display: block; }

.wizard-body { margin-top: 2rem; } /* 데스크탑 상단 여백 축소 (4vw -> 2rem) */

.wizard-step {
  border-top: none;
  padding: 1rem var(--page-x); /* 1.5rem에서 1rem으로 더 축소 */
}
@media (max-width: 767px) {
  .wizard-body { margin-top: 0.5rem !important; }
  .wizard-step { padding: 1rem var(--page-x) !important; }
  /* 너무 붙지 않도록 적절한 황금 마진 확보 */
  #wizardStepProduct { padding-bottom: 0.8rem !important; } 
  #wizardStepProduct + .wizard-step, 
  #wizardStepProduct ~ .wizard-step { padding-top: 0.8rem !important; }
}

.wstep-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.wstep-head--form { flex-wrap: wrap; gap: 0.8rem; }

.wstep-num {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #0a0a0a; color: #fff;
  font-size: 1rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.wstep-num--icon {
  background: transparent !important;
  width: 48px;
  height: 48px;
}
@media (max-width: 767px) {
  .wstep-num--icon {
    width: 34px;
    height: 34px;
  }
}

.wstep-title {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* ── 안내 문구 전용 디자인 버튼 ── */
.guide-btn-wrap {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0 0.2rem; /* 하단 여백을 대폭 제거 (1rem -> 0.2rem) */
}
@media (max-width: 767px) {
  .guide-btn-wrap { margin-bottom: 0; } /* 안내 문구 아래 여백 제거 */
}

.guide-btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 6px 6px 6px 20px;
  border: 1.5px solid #000;
  border-radius: 14px;
  background: transparent;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.guide-btn:hover {
  background-color: #000;
}

.guide-btn-text {
  font-size: 15px;
  font-weight: 600;
  color: #000;
  transition: color 0.3s ease;
}

.guide-btn:hover .guide-btn-text {
  color: #a8ff39;
}

.guide-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #a8ff39;
  padding: 6px;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.guide-btn:hover .guide-btn-icon {
  transform: rotate(45deg);
}

.guide-btn-icon svg {
  width: 18px;
  height: 18px;
  color: #000;
  transition: transform 0.3s ease;
}

.guide-btn:hover .guide-btn-icon svg {
  transform: rotate(-45deg);
}

/* 데스크탑에서 더 크게 */
@media (min-width: 768px) {
  .guide-btn {
    gap: 32px;
    padding: 10px 10px 10px 32px;
    border-radius: 20px;
    border-width: 2px;
  }
  .guide-btn-text {
    font-size: 19px;
  }
  .guide-btn-icon {
    padding: 10px;
    border-radius: 12px;
  }
  .guide-btn-icon svg {
    width: 24px;
    height: 24px;
  }
}

.wstep-badges { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.sel-badge {
  padding: 0.85rem 2rem;
  border-radius: 999px;
  border: 2px solid #0a0a0a;
  background: transparent;
  color: #0a0a0a;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.sel-badge:hover  { background: #0a0a0a; color: #fff; transform: translateY(-2px); }
.sel-badge.active { background: #0a0a0a; color: #fff; }

/* ─── 플랜 선택: 12컬럼 그리드 일치 ─────────────────────────── */
#planBadges {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  width: 100%;
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
}

#planBadges .sel-badge {
  grid-column: span 3; /* 12 / 4 = 3 */
  border-radius: 0 !important;
  border: none !important;
  border-right: 1.5px solid #e0e0e0 !important;
  background: transparent;
  color: #0a0a0a;
  padding: 0.7rem 0.5rem;
  text-align: center;
  font-size: clamp(0.88rem, 1.2vw, 1.05rem);
  font-weight: 700;
  transition: background 0.15s, color 0.15s;
  transform: none !important;
  position: relative;
}
/* 모서리 처리 */
#planBadges .sel-badge:first-child { border-radius: 10px 0 0 10px !important; }
#planBadges .sel-badge:last-child  { border-radius: 0 10px 10px 0 !important; border-right: none !important; }

/* Best 툴팁 — 330X4 active 시 위쪽에 표시 */
#planBadges .sel-badge[data-best].active::before {
  content: 'Best';
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%) scale(1);
  background: #A4E43F;
  color: #0a0a0a;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  animation: best-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes best-pop {
  from { transform: translateX(-50%) scale(0.4); opacity: 0; }
  to   { transform: translateX(-50%) scale(1);   opacity: 1; }
}

#planBadges .sel-badge:last-child {
  border-right: none !important;
}

#planBadges .sel-badge:hover {
  background: #f4f4f4;
  color: #0a0a0a;
  transform: none !important;
}

#planBadges .sel-badge.active {
  background: #0a0a0a;
  color: #fff;
  outline: none;
}

#planBadges .sel-badge:focus {
  outline: none;
}

@media (max-width: 767px) {
  #planBadges .sel-badge { padding: 0.6rem 0.2rem; font-size: clamp(0.78rem, 3.2vw, 0.95rem); }
}


.app-carousel {
  overflow-x: auto; overflow-y: visible;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.app-dual-rows {
  margin-top: 1.5rem;
}

.app-row-outer {
  width: 100%;
  overflow: hidden; /* 트랙이 화면 밖으로 나가지 않도록 가림 */
  position: relative;
  margin-bottom: 0.5rem;
}

.app-track {
  display: flex !important; /* 가로 정렬 */
  gap: 1rem;
  transition: transform 0.5s ease;
  padding: 10px 0;
  width: max-content;
  will-change: transform;
}

/* 각 카드의 너비를 화면 분할에 맞춰 고정 */
.app-track .app-card {
  flex: 0 0 calc((100vw - (var(--page-x, 5%) * 2) - 3rem) / 4);
}

@media (min-width: 1201px) {
  .app-track .app-card {
    flex: 0 0 calc((1100px - 3rem) / 4); /* 최대 너비 1100px 기준 */
  }
}

@media (max-width: 1023px) {
  .app-track .app-card {
    flex: 0 0 calc((100vw - (var(--page-x, 5%) * 2) - 2rem) / 3);
  }
}

@media (max-width: 767px) {
  .app-track .app-card {
    flex: 0 0 calc((100vw - (var(--page-x, 5%) * 2) - 1rem) / 2);
  }
}

/* ─── 가전 카드 ─────────────────────────────────────────────────── */
.app-card {
  background: transparent;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  position: relative;               /* ::after 체크마크 기준점 */
  transition: transform 0.2s;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media (max-width: 1023px) { .app-track { grid-auto-columns: calc((100% - 2rem) / 3); } }
@media (max-width: 767px)  { .app-track { grid-auto-columns: calc((100% - 1rem) / 2); } }

.app-card:hover  { transform: translateY(-3px); }

/* 선택 시: 켬 쓰록 애니메이션 + 체크배지 */
.app-card.active  { transform: translateY(-3px); }
.app-card.active::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #A4E43F;
  color: #0a0a0a;
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  z-index: 2;
  animation: check-pop 0.2s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes check-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* 정사각형 이미지 프레임 (bento 스타일) */
.app-card__frame {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 10px;
  background: #f2f2f2 center/contain no-repeat;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-card__emoji { font-size: 2.6rem; }

/* 텍스트 영역 */
.app-card__body {
  padding: 0.55rem 0.15rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* 브랜드 알약 배지 */
.app-card__brand {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: #0a0a0a;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 짧은 이름 (브랜드 배지 아래, 모델명 위) */
.app-card__model {
  display: block;
  font-size: 0.75rem;
  color: rgba(10,10,10,0.45);
  font-weight: 400;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 전체 모델명 (가장 굵고 크게) */
.app-card__name {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  color: #0a0a0a;
  letter-spacing: -0.02em;
  margin-top: 0.1rem;
  /* 긴 텍스트 처리 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

/* 상품명 (모델명 아래, 작은 보조 텍스트) */
.app-card__product-name {
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(10,10,10,0.5);
  line-height: 1.4;
  margin-top: 0.1rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ─── 가전 카드 내 플랜 정보 (예상 요금·혜택) ─────────────────── */
.app-card__plan-info {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(10,10,10,0.08);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.app-card__plan-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
}

.app-card__plan-row dt {
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(10,10,10,0.45);
  white-space: nowrap;
  flex-shrink: 0;
}

.app-card__plan-row dd {
  font-size: 0.78rem;
  font-weight: 600;
  color: #0a0a0a;
  text-align: right;
  line-height: 1.35;
}

.app-card__plan-row--benefit dd {
  color: #e05a00;   /* 혜택 강조색 (주황) */
  font-weight: 700;
  font-size: 0.8rem;
}

/* active 상태일 때 plan-info는 동일 배경(흰색)이므로 색 그대로 유지 */
.app-card.active .app-card__plan-info {
  border-top-color: rgba(10,10,10,0.12);
}


.loading-text { 
  font-size: 1rem; color: #888; padding: 2rem 0;
  width: 100%;
  flex: 0 0 100%;
  text-align: center;
}

.sel-summary {
  font-size: 1rem; color: #888;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
.sel-chip {
  padding: 0.4rem 1rem; border-radius: 999px;
  background: #0a0a0a; color: #fff; font-size: 0.9rem; font-weight: 600;
}

.wizard-form-step .wstep-head { margin-bottom: 1.5rem; }

.consult-form {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.form-fields { display: flex; gap: 1rem; flex: 1; flex-wrap: wrap; }

.form-input {
  flex: 1; min-width: 160px;
  padding: 0.9rem 1.2rem;
  border: 2px solid #0a0a0a; border-radius: 8px;
  font-size: 1rem; font-family: inherit; background: #fff;
  outline: none; transition: border-color 0.2s;
}
.form-input:focus { border-color: #555; }

.form-submit {
  padding: 1rem 2.4rem;
  background: #0a0a0a; color: #fff;
  border: none; border-radius: 999px;
  font-size: 1.05rem; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: opacity 0.2s, transform 0.2s; white-space: nowrap;
}
.form-submit:hover    { opacity: 0.8; transform: translateY(-2px); }
.form-submit:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }

.form-done { font-size: 1.1rem; font-weight: 600; color: #0a0a0a; padding: 1rem 0; }
.sel-bar .form-done { color: #A4E43F; width: 100%; text-align: center; padding: 0.5rem 0; margin: 0; font-size: 0.95rem; }

@media (max-width: 768px) {
  .wizard-step  { padding: 2rem var(--page-x); }
  .wstep-head   { margin-bottom: 1.2rem; }
  .consult-form { flex-direction: column; align-items: stretch; }
  .form-submit  { text-align: center; }
}

/* ─── 카테고리 탭바 sticky 래퍼 ──────────────────────────────────── */
.cat-sticky-wrap {
  position: relative;
  z-index: 99;
  background: #fff;
  padding: 0;
  margin-bottom: 1.5rem;
}

.cat-sticky-wrap.is-fixed {
  position: fixed;
  left: 0;
  right: 0;
  padding: 0.8rem var(--page-x, 5%);
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.cat-sticky-wrap.is-fixed.plan-attached {
  padding-top: 0;
}
/* 가전 종류 배지: 위에 다른 탭이 붙을 때 상단 라운딩 및 중복 테두리 제거 */
.cat-sticky-wrap.is-fixed.plan-attached #catBadges {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.cat-sticky-wrap.is-fixed.brand-attached {
  border-bottom: none;
  box-shadow: none;
  padding-bottom: 0.5rem;
}

.cat-sticky-placeholder { display: none; }
.cat-sticky-placeholder.active { display: block; }

/* ─── catBadges 세그먼트 (12컬럼 그리드) ─────────────── */
#catBadges {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto;
  gap: 0;
  width: 100%;
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
}

#catBadges .sel-badge {
  grid-column: span 2;
  border-radius: 0 !important;
  border: none !important;
  border-right: 1.5px solid #e0e0e0 !important;
  background: transparent;
  color: #0a0a0a;
  padding: 0.7rem 0.2rem !important;
  text-align: center;
  font-size: clamp(0.72rem, 1vw, 0.95rem) !important;
  font-weight: 700;
  transition: background 0.15s, color 0.15s;
  transform: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
#catBadges .sel-badge.active {
  background: #0a0a0a !important;
  color: #fff !important;
}

/* 첫 번째(전체) 버튼 — 2행 전체 차지 */
#catBadges .sel-badge:first-child {
  grid-row: 1 / 3;
  font-size: clamp(0.72rem, 2.5vw, 1rem) !important;
}

/* 1행 버튼들 (2번~6번 항목) 하단 라인 추가 */
#catBadges .sel-badge:nth-child(2),
#catBadges .sel-badge:nth-child(3),
#catBadges .sel-badge:nth-child(4),
#catBadges .sel-badge:nth-child(5),
#catBadges .sel-badge:nth-child(6) {
  border-bottom: 1.5px solid #e0e0e0 !important;
}

/* 각 행의 마지막 버튼(6번, 11번) 우측 라인 제거 */
#catBadges .sel-badge:nth-child(6),
#catBadges .sel-badge:nth-child(11) {
  border-right: none !important;
}

#catBadges .sel-badge:last-child { border-right: none !important; }
#catBadges .sel-badge:hover { background: #f4f4f4; color: #0a0a0a; transform: none !important; }
#catBadges .sel-badge.active { background: #0a0a0a; color: #fff; outline: none; }
#catBadges .sel-badge:focus { outline: none; }

/* ─── 모바일: 텍스트 크기 및 패딩 미세 조정 ───────────────────── */
@media (max-width: 767px) {
  #catBadges .sel-badge {
    padding: 0.6rem 0.15rem !important;
    font-size: clamp(0.64rem, 2.6vw, 0.8rem) !important;
  }
}

/* ─── 카테고리 필터 배지 여백 ───────────────────────────────────── */
.cat-filter-badges {
  margin-bottom: 1.8rem;
}

/* ─── 캐러셀 드래그 커서 ─────────────────────────────────────── */
.app-carousel { cursor: grab; }
.app-carousel:active { cursor: grabbing; }

/* ─── 독립 2행 캐러셀 ──────────────────────────────────────── */
#appDualRows { display: block; }
#appSlider   { display: none; }

@media (max-width: 767px) {
  #appDualRows { display: none; }
  #appSlider   { display: block; }
}

#appSlider {
  overflow: hidden;
  min-height: 500px;
}

.app-slider__track {
  display: flex;
  gap: 0;
  transition: transform 0.42s cubic-bezier(0.25, 0, 0.25, 1);
  will-change: transform;
}

/* 한 페이지 기본: 4열 × 2행 (데스크탑) */
.app-slider__page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  padding: 5px;
  box-sizing: border-box;
}

/* 태블릿: 3열 × 2행 */
@media (max-width: 1199px) {
  .app-slider__page { grid-template-columns: repeat(3, 1fr); }
}

/* 모바일: 2열 × 3행 */
@media (max-width: 767px) {
  .app-slider__page {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    gap: 0.6rem;
  }
}

.app-slider__page .app-card {
  transition: outline-color 0.15s;
  cursor: pointer;
}
.app-slider__page .app-card:hover { transform: translateY(-2px); }

/* ─── 도트 인디케이터 ─────────────────────────────────────────── */
.app-slider__dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.9rem 0 0.2rem;
  margin-bottom: 3.5rem; /* 아래 섹션과의 간격 확보 */
}
.app-slider__dots--top {
  padding: 0.2rem 0 0.7rem;
  margin-bottom: 0;
}
.app-slider__track {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.app-slider__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(10,10,10,0.15);
  border: none; cursor: pointer; padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.app-slider__dot.active {
  background: #0a0a0a;
  transform: scale(1.4);
}

/* ─── 카드 이미지 위 카테고리 레이블 ───────────────────────────── */
.app-card__thumb { position: relative; }

.app-card__cat-label {
  position: absolute;
  top: 0.5rem; left: 0.5rem;
  background: rgba(10,10,10,0.58);
  color: #fff;
  font-size: 0.72rem; font-weight: 700;
  padding: 0.18rem 0.52rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  pointer-events: none;
  letter-spacing: 0.02em;
}


/* ─── 헤드라인 SVG 아이콘 ─────────────────────────────────────── */
.headline-icon {
  display: inline-block;
  width: 0.92em;
  height: 0.92em;
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: 0.3em;
  position: relative;
  top: -0.1em;
}
/* fill은 JS(setAttribute)로 직접 제어 — transition만 CSS로 유지 */
.headline-icon path { transition: fill 0.6s ease; }



/* ─── 상담 섹션 아이콘 ───────────────────────────────────────── */
.consult-icon {
  display: block;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1.2rem; /* 중앙 정렬 + 아래 텍스트와 간격 */
}

/* ─── 상품 선택 2열 레이아웃 ──────────────────────────────────── */
.wstep-row {
  display: flex;
  align-items: stretch;
  gap: 2rem;
}

.wstep-left {
  flex: 0 0 auto;
  min-width: 220px;
}

/* ─── 플랜 정보 카드 ────────────────────────────────────────── */
.plan-info-card {
  flex: 1 1 0;
  background: #0a0a0a;
  border-radius: 16px;
  padding: 2.4rem;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}



.plan-info-card__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* 사이트 전체 소문자 레이블과 동일 스타일 */
.plan-info-card__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a0ec06;
  margin-bottom: 0.75rem;
  line-height: 1;
}

/* wstep-title(clamp 1.4~2rem)보다 한 단계 아래 */
.plan-info-card__title {
  font-size: clamp(2.2rem, 3.6vw, 3rem); /* 2배 */
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 0.75rem;
}

/* --t-body: 1rem과 동일 */
.plan-info-card__desc {
  font-size: var(--t-body);
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  margin-bottom: 1.25rem;
  max-width: 40ch;
}

.plan-info-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* sel-badge 다크 버전과 같은 구조 */
.plan-chip {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  background: transparent;
  letter-spacing: 0.01em;
}


@media (max-width: 767px) {
  .wstep-row {
    flex-direction: column;
    gap: 1.5rem;
  }
  .wstep-left {
    min-width: 0;
    width: 100%;
  }
  .plan-info-card {
    flex: none;       /* column 방향에서 flex-basis:0 문제 해결 */
    width: 100%;
    padding: 1.75rem 1.5rem;
  }
}

/* 태블릿(768~1199px): 카드를 버튼 아래로 */
@media (min-width: 768px) and (max-width: 1199px) {
  .wstep-row {
    flex-direction: column;
    gap: 1.5rem;
  }
  .plan-info-card {
    flex: none;
    width: 100%;
  }
}

/* ─── 플랜 카드 동적 콘텐츠 ──────────────────────────────────── */
.plan-info-card__top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

/* Best 뱃지 — 타이틀 비례 크기 */
.plan-card-best {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1.3rem;     /* 2배 */
  border-radius: 999px;
  background: #a0ec06;
  color: #0a0a0a;
  font-size: 1.44rem;         /* 2배 */
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* 데이터 행 */
.plan-card-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.25rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.plan-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.975rem 0;   /* 0.65 × 1.5 */
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.plan-card-row__key {
  font-size: 1.23rem;   /* 0.82 × 1.5 */
  color: rgba(255,255,255,0.45);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.plan-card-row__val {
  font-size: 1.35rem;   /* 0.9 × 1.5 */
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  text-align: right;
}

/* 총 납입 금액 강조 */
.plan-card-row--total .plan-card-row__val {
  font-size: 1.575rem; /* 1.05 × 1.5 */
  font-weight: 700;
  color: #a0ec06;
}

/* 모바일: 상품 카드 내부 텍스트 1.2배 축소 (타이틀·배지 제외) */
@media (max-width: 767px) {
  .plan-info-card__label { font-size: 0.63rem; }
  .plan-info-card__desc  { font-size: 0.83rem; }
  .plan-card-row         { padding: 0.8rem 0; }
  .plan-card-row__key    { font-size: 1.025rem; }
  .plan-card-row__val    { font-size: 1.125rem; }
  .plan-card-row--total .plan-card-row__val { font-size: 1.31rem; }
}

.plan-title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;   /* h4 margin 대신 여기서 하단 간격 처리 */
}

/* 행 내 h4의 아래 마진 제거 — flex 중앙 정렬 오차 해소 */
.plan-title-row .plan-info-card__title {
  margin-bottom: 0;
}

.plan-title-row .plan-card-best {
  flex-shrink: 0;
  /* top 오프셋 불필요 — align-items:center으로 자동 중앙 */
}

/* ─── 푸터 ───────────────────────────────────────────────────── */
.site-footer-main {
  background: #0a0a0a;
  color: rgba(255,255,255,0.5);
  padding: 4rem var(--page-x) 3rem;
}

.footer-inner {
  max-width: 900px;
}

/* 법적 링크 */
.footer-legal {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.footer-legal__link {
  color: rgba(255,255,255,0.75);
  font-size: 1.28rem;  /* 0.85 × 1.5 */
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.footer-legal__link:hover { color: #fff; }

.footer-legal__sep {
  color: rgba(255,255,255,0.25);
  font-size: 1.2rem;   /* 0.8 × 1.5 */
}

/* 회사명 */
.footer-company {
  font-size: 1.2rem;   /* 0.8 × 1.5 */
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

/* 정보 테이블 */
.footer-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 2rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.footer-info__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  padding: 0.9rem 0;   /* 0.6 × 1.5 */
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.footer-info__row dt {
  font-size: 1.17rem;  /* 0.78 × 1.5 */
  color: rgba(255,255,255,0.35);
  font-weight: 400;
  white-space: nowrap;
  min-width: 9em;
}

.footer-info__row dd {
  font-size: 1.17rem;  /* 0.78 × 1.5 */
  color: rgba(255,255,255,0.65);
  font-weight: 400;
  margin: 0 2rem 0 0;
  line-height: 1.5;
}

/* 저작권 */
.footer-copy {
  font-size: 1.13rem;  /* 0.75 × 1.5 */
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  .site-footer-main { padding: 3rem var(--page-x) 2.5rem; }
  /* dt/dd 세로 스택: 각 dt는 라벨, dd는 바로 아래 */
  .footer-info__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0.75rem 0;
  }
  .footer-info__row dt {
    min-width: 0;
    font-size: 1rem;
    color: rgba(255,255,255,0.4);
    margin-bottom: 0.15rem;
  }
  .sel-bar__inner {
  background: #0a0a0a;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 60px rgba(0,0,0,0.5);
  padding: 0.8rem 1.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 1100px;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.12);
  border-bottom: none;
}

/* 데스크탑 반응형: 텍스트 및 요소 확대 */
@media (min-width: 1024px) {
  .sel-bar__inner {
    padding: 1.2rem 2.5rem 0.8rem;
    gap: 1rem;
  }
  .sel-bar__thumb {
    width: 64px; height: 64px;
    padding: 6px;
    border-radius: 12px;
  }
  .sel-bar__name {
    font-size: 1.4rem;
  }
  .sel-bar__meta {
    font-size: 0.85rem;
    margin-bottom: 4px;
  }
  .sel-bar__detail-line {
    font-size: 1.15rem; /* 기존 1.05rem에서 확대 */
    line-height: 1.5;
    color: rgba(255,255,255,0.75); /* 명도 상향 */
  }
  .sel-bar__detail-line--highlight {
    font-size: 1.5rem; /* 월 가격 대폭 강조 */
    margin-bottom: 0.3rem;
  }
  .sel-bar__input {
    height: 54px;
    font-size: 1.1rem;
    padding: 0 1.5rem !important;
    border-radius: 12px;
  }
  .sel-bar__cta {
    font-size: 1.2rem;
    padding: 0 2.5rem;
    height: 54px;
    border-radius: 12px;
  }
  .sel-bar__header {
    padding-bottom: 0.8rem;
  }
}

/* 상단: 2열 정보 */
.sel-bar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sel-bar__product {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-width: 0;
  flex: 1.2;
}
.sel-bar__thumb {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #fff center/contain no-repeat;
  flex-shrink: 0;
  padding: 4px;
}
.sel-bar__text { flex: 1; min-width: 0; }
.sel-bar__meta {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: 2px;
}
.sel-bar__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sel-bar__detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid rgba(255,255,255,0.12);
  padding-left: 1.2rem;
  flex: 1.5;
  min-width: 0;
}
.sel-bar__detail-line {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sel-bar__detail-line--highlight {
  color: #a0ec06;
  font-weight: 700;
}

.sel-bar__footer {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sel-bar__cancel {
  background: none;
  border: none;
  color: rgba(255,255,255,0.3);
  font-size: 0.825rem;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.2s;
}

.sel-bar__cancel:hover { color: #fff; }

.sel-bar__cta {
  flex: 1;
  background: #a0ec06;
  color: #0a0a0a;
  border: none;
  border-radius: 8px;
  padding: 0.8rem 1.5rem;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  text-align: center;
}
  .footer-info__row dd {
    font-size: 1rem;
    margin: 0 0 0.6rem 0;
  }
  .footer-info__row dd:last-child { margin-bottom: 0; }
}

/* ─── 하단 고정 상담 탭바 ────────────────────────────────────── */
.consult-tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.32, 0, 0.15, 1);
  pointer-events: none;
}

.consult-tabbar.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}

.consult-tabbar__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: #fff;
  padding: 1.2rem var(--page-x);
  border-top: 1px solid rgba(10,10,10,0.08);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.08);
}

/* 선택 요약 칩 */
.consult-tabbar__sel {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  flex: 1 1 0;
  min-width: 0;
}

.tabbar-chip {
  font-size: 0.82rem;
  font-weight: 600;
  color: #0a0a0a;
  white-space: nowrap;
}

.tabbar-chip--empty {
  color: rgba(10,10,10,0.3);
}

.tabbar-sep {
  color: rgba(10,10,10,0.2);
  font-size: 0.77rem;
}

/* 입력 + 버튼 행 */
.consult-tabbar__form {
  display: flex;
  align-items: center;
  gap: 0.56rem;
  flex-shrink: 0;
}

.tabbar-input {
  height: 51px;
  padding: 0 0.96rem;
  border: 1.5px solid rgba(10,10,10,0.15);
  border-radius: 999px;
  font-size: 0.77rem;
  font-family: inherit;
  color: #0a0a0a;
  background: #fff;
  outline: none;
  width: 130px;
  transition: border-color 0.15s;
}
.tabbar-input::placeholder { color: rgba(10,10,10,0.35); }
.tabbar-input:focus { border-color: #0a0a0a; }

/* 신청 버튼 */
.consult-tabbar__btn {
  flex-shrink: 0;
  height: 51px;
  padding: 0 1.75rem;
  border-radius: 999px;
  background: #0a0a0a;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background 0.15s;
}
.consult-tabbar__btn:hover { background: #333; }

@media (max-width: 900px) {
  .consult-tabbar__form { flex: 1 1 0; }
  .tabbar-input { flex: 1 1 0; width: auto; }
}

@media (max-width: 767px) {
  .consult-tabbar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding: 1.4rem var(--page-x) 1.2rem;
  }
  .consult-tabbar__sel {
    display: flex;
  }
  /* 폼: 입력 2개 나란히, 버튼 아래 전체 너비 */
  .consult-tabbar__form {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .tabbar-input {
    width: 100%;
    height: 50px;
    font-size: 0.9rem;
  }
  .consult-tabbar__btn {
    grid-column: 1 / -1;   /* 2열 전체 차지 */
    width: 100%;
    height: 56px;
    font-size: 1rem;
    border-radius: 999px;
  }
}



/* ─── 플랜 카드 노치 래퍼 ─────────────────────────────────────── */
.plan-card-notch-wrap {
  position: relative;
  flex: 1 1 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* 히어로 섹션과 동일한 clip-path:shape() 기법으로 좌상단 노치 */
.plan-card-notch-wrap .plan-info-card {
  --nc-r: 16px;   /* 모서리 반경 */
  --nc-s: 56px;   /* 노치 크기 */
  flex: 1 1 auto;
  border-radius: 0;   /* clip-path가 형태 담당 */
  /* 노치 영역(nc-s + 2×nc-r = 88px) 아래부터 콘텐츠 시작 */
  padding-top: calc(var(--nc-s) + 2 * var(--nc-r) + 1.5rem) !important;
  clip-path: shape(
    from 0 calc(var(--nc-s) + 2 * var(--nc-r)),
    arc by var(--nc-r) calc(0px - var(--nc-r)) of var(--nc-r) cw,
    arc by var(--nc-s) calc(0px - var(--nc-s)) of var(--nc-s),
    arc by var(--nc-r) calc(0px - var(--nc-r)) of var(--nc-r) cw,
    hline to calc(100% - var(--nc-r)),
    arc by var(--nc-r) var(--nc-r) of var(--nc-r) cw,
    vline to calc(100% - var(--nc-r)),
    arc by calc(0px - var(--nc-r)) var(--nc-r) of var(--nc-r) cw,
    hline to var(--nc-r),
    arc by calc(0px - var(--nc-r)) calc(0px - var(--nc-r)) of var(--nc-r) cw,
    vline to calc(var(--nc-s) + 2 * var(--nc-r))
  );
}

/* Best 알약 배지 — 노치 위에 절대 배치 */
.plan-card-best-notch {
  position: absolute;
  top: 16px;
  left: 14px;
  z-index: 5;
  display: none;          /* JS가 330X4일 때 inline-flex로 바꿈 */

  /* 알약(pill): 가로로 납작하고 통통하게 */
  padding: 0.6rem 1.8rem;
  border-radius: 14px;    /* capsule, 완전한 원 아님 */
  background: #a0ec06;
  color: #0a0a0a;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(160, 236, 6, 0.5);
  align-items: center;
  justify-content: center;
}

/* 모바일: 래퍼도 flex:none으로 */
@media (max-width: 767px) {
  .plan-card-notch-wrap {
    flex: none;
    width: 100%;
  }
}

/* ─── 플랜 세부 정보 스트립 (가전 이미지 아래) ─────────────── */
.plan-detail-strip {
  margin-top: 1.5rem;
  border-radius: 14px;
  background: #0a0a0a;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.plan-detail__line {
  padding: 0.85rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.01em;
  line-height: 1.5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.plan-detail__line--highlight {
  font-size: 0.95rem;
  font-weight: 700;
  color: #a0ec06;
  border-bottom: none;
  letter-spacing: 0.02em;
}

/* 선택된 상품명 (스트립 최상단) */
.plan-detail__line--product {
  font-size: 1.43rem;
  font-weight: 700;
  color: #fff;
  padding: 0.85rem 1.5rem 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  letter-spacing: -0.01em;
  display: none; /* 비어있으면 숨김 */
}
.plan-detail__line--product:not(:empty) {
  display: block;
}

@media (max-width: 767px) {
  .plan-detail-strip  { margin-top: 1rem; border-radius: 12px; }
  .plan-detail__line  { padding: 0.7rem 1.1rem; font-size: 0.8rem; }
  .plan-detail__line--highlight { font-size: 0.85rem; }
}

/* ─── 부드러운 스크롤 ──────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ─── 내비게이션 오버레이 ──────────────────────────────────── */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  visibility: hidden;
}

.nav-overlay.is-open {
  visibility: visible;
  pointer-events: auto;
}

/* 반투명 배경 */
.nav-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.35s ease;
}

.nav-overlay.is-open .nav-overlay__backdrop {
  background: rgba(0,0,0,0.45);
}

/* 드로어 패널 */
.nav-drawer {
  position: absolute;
  top: 0; right: 0;
  width: min(340px, 85vw);
  height: 100%;
  background: #fff;
  padding: 2.5rem 2rem 2rem;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.32, 0, 0.15, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0,0,0,0.12);
}

.nav-overlay.is-open .nav-drawer {
  transform: translateX(0);
}

/* 닫기 버튼 */
.nav-drawer__close {
  align-self: flex-end;
  background: none;
  border: none;
  cursor: pointer;
  color: #0a0a0a;
  padding: 0.5rem;
  margin-bottom: 2.5rem;
  border-radius: 50%;
  transition: background 0.15s;
}
.nav-drawer__close:hover { background: #f4f4f4; }

/* 메뉴 리스트 */
.nav-drawer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nav-drawer__link {
  display: block;
  padding: 1.2rem 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: #0a0a0a;
  text-decoration: none;
  letter-spacing: -0.03em;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  transition: color 0.15s, padding-left 0.2s;
}
.nav-drawer__link:hover {
  color: #a0ec06;
  padding-left: 0.5rem;
}

/* ─── 선택 상품 플로팅 바 (Ultra-Slim 2-Tier) ──────────────────────── */
.sel-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 300;
  padding: 0 var(--page-x, 2.5%) env(safe-area-inset-bottom, 8px);
  pointer-events: none;
  transform: translateY(110%);
  transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1);
}
.sel-bar.is-open {
  transform: translateY(0);
  pointer-events: auto;
}

.sel-bar__inner {
  background: #0a0a0a;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 60px rgba(0,0,0,0.5);
  padding: 0.8rem 1.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 1100px;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.12);
  border-bottom: none;
}

/* 데스크탑 반응형: 텍스트 및 요소 확대 */
@media (min-width: 1024px) {
  .sel-bar__inner {
    padding: 1.2rem 2.5rem 0.8rem;
    gap: 1rem;
  }
  .sel-bar__thumb {
    width: 64px; height: 64px;
    padding: 6px;
    border-radius: 12px;
  }
  .sel-bar__name {
    font-size: 1.4rem;
  }
  .sel-bar__meta {
    font-size: 0.85rem;
    margin-bottom: 4px;
  }
  .sel-bar__detail-line {
    font-size: 1.05rem;
    line-height: 1.4;
  }
  .sel-bar__input {
    height: 54px;
    font-size: 1.1rem;
    padding: 0 1.5rem !important;
    border-radius: 12px;
  }
  .sel-bar__cta {
    font-size: 1.2rem;
    padding: 0 2.5rem;
    height: 54px;
    border-radius: 12px;
  }
  .sel-bar__header {
    padding-bottom: 0.8rem;
  }
}

/* 상단: 2열 정보 */
.sel-bar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sel-bar__product {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-width: 0;
  flex: 1.2;
}
.sel-bar__thumb {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #fff center/contain no-repeat;
  flex-shrink: 0;
  padding: 4px;
}
.sel-bar__text { flex: 1; min-width: 0; }
.sel-bar__meta {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: 2px;
}
.sel-bar__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sel-bar__detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid rgba(255,255,255,0.12);
  padding-left: 1.2rem;
  flex: 1.5;
  min-width: 0;
}
.sel-bar__detail-line {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sel-bar__detail-line--highlight {
  color: #a0ec06;
  font-weight: 700;
}

.sel-bar__footer {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sel-bar__cancel {
  background: none;
  border: none;
  color: rgba(255,255,255,0.3);
  font-size: 0.825rem;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.2s;
}

.sel-bar__cancel:hover { color: #fff; }

.sel-bar__cta {
  flex: 1;
  background: #a0ec06;
  color: #0a0a0a;
  border: none;
  border-radius: 8px;
  padding: 0.8rem 1.5rem;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  text-align: center;
}
.sel-bar__cta:hover  { background: #96d630; transform: translateY(-1px); }
.sel-bar__cta:active { transform: scale(0.98); }

/* 모바일 대응 (정보 노출 유지하며 슬림화) */
@media (max-width: 640px) {
  .sel-bar__header {
    gap: 0.6rem;
  }
  .sel-bar__detail {
    padding-left: 0.6rem;
    flex: 1.6;
  }
  .sel-bar__name { font-size: 0.78rem; }
  .sel-bar__detail-line { font-size: 0.65rem; }
  .sel-bar__cta { font-size: 0.85rem; padding: 0.6rem 0.8rem; }
}

.sel-bar__form { display: flex; gap: 0.6rem; padding: 0.2rem 0; margin-bottom: 0.3rem; }
.sel-bar__input {
  flex: 1; min-width: 0; background: #1a1a1a; border: 1.5px solid #2a2a2a;
  border-radius: 8px; color: #fff; padding: 0.7rem 0.9rem; font-size: 0.85rem;
  font-family: inherit; outline: none; transition: border-color 0.15s;
}
.sel-bar__input:focus { border-color: #A4E43F; }
.sel-bar__input::placeholder { color: #555; }

/* ─── 푸터 위 고정 상담 신청 섹션 ──────────────────────────────── */
.static-form-section {
  background: #0a0a0a;
  padding: 3.5rem var(--page-x, 5%);
}
.static-form-inner {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}
.static-form__title {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 0.4rem;
}
.static-form__sub {
  font-size: 0.95rem;
  color: #888;
  margin-bottom: 0.6rem;
}
.static-form__guide {
  margin-top: 0.8rem;
  font-size: 1.14rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1.6rem;
  word-break: keep-all; 
  overflow-wrap: break-word;
}
.static-form__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}
.static-form__input {
  flex: 1;
  min-width: 0; /* 브라우저 기본 최소 너비 무시 */
  padding: 0.9rem 1.1rem;
  border: 1.5px solid #2a2a2a;
  border-radius: 12px;
  font-size: 1rem;
  color: #fff;
  background: #1a1a1a;
  outline: none;
  transition: border-color 0.15s;
}
.static-form__input::placeholder { color: #555; }
.static-form__input:focus { border-color: #A4E43F; }
.static-form__cta {
  width: 100%;
  padding: 1rem;
  border: none;
  border-radius: 12px;
  background: #A4E43F;
  color: #0a0a0a;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.static-form__cta:hover  { background: #96d630; }
.static-form__cta:active { transform: scale(0.98); }
.static-form__cta:disabled { background: #2a2a2a; color: #555; cursor: not-allowed; }
.static-form__done {
  color: #A4E43F;
  font-size: 1rem;
  font-weight: 600;
  padding: 1rem 0;
}


/* ─── 약관 모달 (Terms Modal) ─────────────────────────────────── */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 20px;
}

.modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: #fff;
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.modal-overlay.is-active .modal-content {
  transform: translateY(0);
}

.modal-header {
  padding: 24px 32px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0a0a0a;
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.modal-close:hover { color: #0a0a0a; }

.modal-body {
  padding: 32px;
  overflow-y: auto;
  line-height: 1.6;
  color: #333;
  font-size: 0.95rem;
}

.modal-img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.modal-img:not(:last-child) { margin-bottom: 20px; }

/* 모달 본문 텍스트 스타일 */
.modal-body h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0a0a0a;
  margin: 24px 0 12px;
}
.modal-body h4:first-child { margin-top: 0; }
.modal-body p { margin-bottom: 1rem; }
.modal-body ul { margin-bottom: 1.5rem; padding-left: 1.2rem; }
.modal-body li { margin-bottom: 0.5rem; }
.modal-body strong { color: #0a0a0a; }

/* 모바일 모달 대응 */
@media (max-width: 600px) {
  .modal-content {
    max-height: 90vh;
    border-radius: 20px;
  }
  .modal-header { padding: 20px 24px 14px; }
  .modal-body   { padding: 24px; font-size: 0.9rem; }
}
/* ── 상담 신청 섹션 모바일 대응 ── */
@media (max-width: 480px) {
  .static-form__fields {
    flex-direction: column;
  }
  .static-form__input {
    width: 100%;
    flex: none;
  }
}