/*
 * home.css — 메인 홈(index.php) 전용 페이지 스타일 (WP2).
 *
 * PC 시안 mbg.jpg / 모바일 PDF SC-03 을 하나의 마크업으로 구현한다. 레이아웃 전환은
 * 전부 @media 로만 하고, 이 파일에서 별도의 PC/모바일 마크업을 만들지 않는다.
 * 브레이크포인트 순서 고정: base(모바일) -> max-width:389.98px -> min-width:768px -> min-width:1280px.
 *
 * 색상/간격은 tokens.css 의 var() 만 사용한다. 이 페이지에서만 쓰는 보조 토큰(레이아웃 치수 등
 * 색상이 아닌 값)은 아래 :root 에 페이지 스코프로 추가한다(WP0의 4대 필수 변수는 손대지 않음).
 * 색상 토큰은 전부 assets/css/base/tokens.css 의 :root 로 승격되어 있다 (FIXLIST F1).
 */

:root {
  --home-search-width: 420px;
}

/* ==== 스크린리더 전용 텍스트 (label 연결용) ==== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==== 공용 섹션 리듬 ==== */
.home-section {
  padding: var(--sp-8) 0;
}

.home-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.home-section__head h2 {
  margin: 0;
}

.home-section__more {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: var(--text-3);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.home-section__more:hover {
  color: var(--main-color);
}

/* ==== 0. 모바일 상단바 (프로필 + 알림벨) — >=768px 숨김 ==== */
.home-mobile-topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.home-mobile-topbar__profile {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  flex: 1;
  min-width: 0;
}

.home-mobile-topbar__avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-0);
  color: var(--sub-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-1);
}

.home-mobile-topbar__name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-mobile-topbar__mypage {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: var(--text-2);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.home-mobile-topbar__bell {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
}

.home-mobile-topbar__bell-count {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-danger);
  color: var(--color-on-primary);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

.home-mobile-topbar__bell-count[hidden] {
  display: none;
}

.home-mobile-topbar__bell:hover,
.home-mobile-topbar__mypage:hover {
  color: var(--main-color);
}

@media (min-width: 768px) {
  .home-mobile-topbar {
    display: none;
  }
}

/* ==== 1. 히어로 ==== */
/* 클라이언트 시안: 평평한 배경 대신, 연한 하늘색 바탕 위로 부드러운 원형 그라데이션 블롭이
   아주 느리게 떠다니는("둥둥 떠다니는") 오로라 효과. 이미지/JS 없이 ::before/::after 두 개의
   가상요소에 radial-gradient 블롭을 나눠 담고 transform(translate/scale)만 애니메이션한다
   (background-position/width/height 는 레이아웃·페인트를 다시 계산시켜 저가 안드로이드에서
   버벅이므로 사용하지 않는다). --hero-gradient 토큰 자체는 estimate 스테퍼/auth 화면이 그대로
   쓰고 있으므로 값을 바꾸지 않고, 히어로 전용 --hero-blob-* 토큰(tokens.css)만 새로 쓴다. */
.home-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* .home-hero 를 그 자신의 스태킹 컨텍스트로 만든다. 이게 없으면 아래
                          가상요소의 z-index:-1 은 .home-hero 기준이 아니라 더 바깥(조상) 스태킹
                          컨텍스트 기준으로 매겨져서, .home-hero 자신의 background(F5F3F7)가
                          "인플로우 블록 배경" 단계에서 블롭 위에 덧칠돼 블롭이 아예 안 보이는
                          문제가 생긴다. isolation:isolate 는 z-index 값 자체나 다른 형제/헤더
                          (site-header z-index:100)·모달(400)·토스트(500)와의 순서에는 전혀
                          영향을 주지 않고, 오직 .home-hero 내부만 별도 스태킹 컨텍스트로
                          격리한다. */
  background: var(--hero-blob-base);
  padding: var(--sp-4) 0 var(--sp-8);
}

.home-hero::before,
.home-hero::after {
  content: "";
  position: absolute;
  z-index: -1; /* isolation:isolate 덕분에 이제 이 -1 은 .home-hero 자신의 스태킹 컨텍스트
                  안에서 매겨진다: .home-hero 배경 위 · .home-hero__inner(포지셔닝 없는 일반
                  흐름 콘텐츠) 아래에 그려진다 — 셀렉트/레버/검색바는 계속 클릭·포커스 가능하다. */
  pointer-events: none;
  will-change: transform;
}

.home-hero::before {
  inset: -30% -15%;
  background-image:
    radial-gradient(circle at 20% 30%, var(--hero-blob-tint-1) 0%, transparent 60%),
    radial-gradient(circle at 75% 20%, var(--hero-blob-tint-2) 0%, transparent 55%),
    radial-gradient(circle at 45% 82%, var(--hero-blob-tint-3) 0%, transparent 65%);
  filter: blur(60px);
  opacity: 0.55;
  animation: home-hero-blob-drift-a 34s ease-in-out infinite;
}

.home-hero::after {
  inset: -35% -20%;
  background-image:
    radial-gradient(circle at 78% 72%, var(--hero-blob-tint-1) 0%, transparent 58%),
    radial-gradient(circle at 12% 65%, var(--hero-blob-tint-3) 0%, transparent 55%),
    radial-gradient(circle at 55% 12%, var(--hero-blob-tint-2) 0%, transparent 60%);
  filter: blur(70px);
  opacity: 0.45;
  animation: home-hero-blob-drift-b 26s ease-in-out infinite;
  animation-delay: -9s;
}

/* transform 만 바꾸는 두 개의 느린 루프(28~40s 사이, 서로 다른 길이+음수 delay 로 시작 위치를
   어긋나게 해서 "동기화된 것처럼" 보이지 않게 한다). 0%/100% 를 동일하게 둬서(reset.css 의
   prefers-reduced-motion 규칙이 animation-duration 을 0.01ms 로 줄였을 때) 애니메이션이 끝나도
   원래 자리에서 자연스럽게 멈춘다. */
@keyframes home-hero-blob-drift-a {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  33% {
    transform: translate3d(3%, -4%, 0) scale(1.06);
  }
  66% {
    transform: translate3d(-4%, 3%, 0) scale(0.97);
  }
}

@keyframes home-hero-blob-drift-b {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-5%, 4%, 0) scale(1.07);
  }
}

/* 모바일(<768px): 블롭 두 겹 + blur 두 번은 저가 안드로이드에서 컴포지팅 비용이 크므로, 두 번째
   레이어(::after)를 꺼서 블롭 개수/블러 레이어 수를 절반으로 줄인다(완전 정적으로 만들지 않는
   이유: 얇은 화면에서도 "둥둥 떠다니는" 느낌 자체는 브리프가 요구하는 핵심 효과라 하나만 남겨
   살린다). 남은 ::before 는 블러 반경도 줄여 페인트 비용을 낮춘다. */
@media (max-width: 767.98px) {
  .home-hero::after {
    display: none;
  }

  .home-hero::before {
    filter: blur(40px);
  }
}

/* 헤더 오버레이(FIXLIST H1): >=768px 에서 .site-header 가 fixed 로 히어로 위에 뜨므로, site-main
   기본 상단 오프셋(--header-h, assets/css/base/layout.css)을 취소하고 그 대신 히어로 자신의 상단
   패딩에 --header-h 를 더한다 — 히어로 그라데이션이 헤더 뒤(진짜 뷰포트 최상단)까지 이어지고,
   히어로 안 콘텐츠는 흰 알약 아래에서 시작한다. */
@media (min-width: 768px) {
  body.home .site-main {
    padding-top: 0; 
  }

  .home-hero {
    padding-top: calc(var(--header-h) + var(--pd-80));
    padding-bottom:var(--pd-80);
  }
}

.home-hero__inner {
  display: flex;
  flex-direction: column;
}

.home-hero__title {
  margin: 0;
  color: var(--text-1);
}

/* PC 시안 전용: 지역/서비스분야/세부서비스 3단 셀렉트 + 슬롯 레버.
   모바일 SC-03 은 이 자리에 검색바 + 카테고리 그리드를 대신 보여준다(아래 섹션에서 항상 렌더됨). */
.home-hero__picker {
  display: none;
}

@media (min-width: 768px) {
  .home-hero__picker {
    display: block;
    margin-top: var(--sp-6);
  }
}

.home-hero__form {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.home-hero__selects {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-6);
  flex-wrap: wrap;
  flex: 1;
}

.home-hero__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  border: none;
  padding: 0;
  margin: 0;
}

.home-hero__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-2);
}

.home-hero__region-pair {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.home-hero__arrow {
  display: flex;
  align-items: center;
  padding-bottom: var(--sp-2);
  color: var(--text-3);
}

.home-hero__select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.home-hero__select-wrap::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 40%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-3);
  border-bottom: 2px solid var(--text-3);
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
  z-index: 3;
}

.home-hero__select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--main-color);
  color: var(--main-color);
  font-weight: 700;
  font-size: 1.125rem;
  min-height: 44px;
  min-width: 108px;
  padding: 0 var(--sp-6) var(--sp-2) 0;
  font-family: var(--font-family-base);
}

.home-hero__select:disabled {
  color: var(--text-3);
  border-bottom-color: var(--color-line-soft);
}

.home-hero__select:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
}

/* 첫 진입 시 4개 셀렉트 위에서 연속으로 내려가는 슬롯 릴. */
.home-slot-reel {
  position: absolute;
  left: 0;
  right: var(--sp-6);
  bottom: var(--sp-2);
  z-index: 2;
  display: none;
  height: 34px;
  overflow: hidden;
  color: var(--main-color);
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 34px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.28s ease;
}

.home-slot-reel__track {
  display: flex;
  flex-direction: column;
  width: 100%;
  will-change: transform;
}

.home-slot-reel__track.is-rolling {
  animation-name: home-slot-roll-down;
  animation-duration: var(--slot-duration, 9s);
  animation-delay: var(--slot-delay, 0ms);
  animation-timing-function: linear;
  animation-fill-mode: both;
}

.home-slot-reel__item {
  display: block;
  flex: 0 0 34px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-hero__select-wrap.is-slot-spinning .home-slot-reel {
  display: block;
}

.home-hero__select-wrap.is-slot-spinning .home-hero__select {
  color: transparent;
  border-bottom-color: var(--main-color);
}

.home-hero__selects.is-slot-machine-finishing .home-slot-reel {
  opacity: 0;
}

@keyframes home-slot-roll-down {
  0% {
    transform: translateY(var(--slot-start));
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  12% {
    transform: translateY(var(--slot-cruise));
    animation-timing-function: linear;
  }
  72% {
    transform: translateY(var(--slot-brake));
    animation-timing-function: cubic-bezier(0, 0.55, 0.15, 1);
  }
  100% {
    transform: translateY(0);
  }
}

/* 슬롯 자체가 요청된 핵심 연출이므로 OS의 전역 모션 축소 규칙보다 이 릴의 1회 재생을 우선한다. */
@media (prefers-reduced-motion: reduce) {
  .home-slot-reel__track.is-rolling {
    animation-duration: var(--slot-duration, 9s) !important;
    animation-iteration-count: 1 !important;
  }

  .home-slot-reel {
    transition-duration: 0.22s !important;
  }

  .home-popup__track {
    transition-duration: 0.48s !important;
  }

  .home-popup__viewport {
    transition-duration: 0.35s !important;
  }
}

.home-hero__lever {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: var(--sp-2) var(--sp-4);
  min-width: 44px;
  min-height: 84px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
}

.home-hero__lever-track {
  position: relative;
  width: 14px;
  height: 68px;
  border-radius: 999px;
  background: var(--lever-gradient);
  box-shadow: inset 0 2px 4px rgba(17, 24, 39, 0.18);
}

.home-hero__lever-ball {
  position: absolute;
  left: 50%;
  top: 4px;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sub-color);
  box-shadow: var(--shadow-1);
  transition: top 0.2s ease;
}

.home-hero__lever:hover .home-hero__lever-ball,
.home-hero__lever:focus-visible .home-hero__lever-ball {
  top: calc(100% - 30px);
}

.home-hero__lever:active .home-hero__lever-ball {
  top: calc(100% - 26px);
}

.home-hero__lever:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
}

.home-hero__caption {
  margin-top: var(--sp-3);
  font-size: 0.8125rem;
  color: var(--text-2);
}

/* ==== 2. 통합 검색바 (흰 배경 raised 카드) ==== */
.home-search-wrap {
  margin-top: var(--sp-4);
  position: relative;
  z-index: 2;
}

.home-search {
  max-width: var(--home-search-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--surface-0);
  border-radius: 999px;
  box-shadow: var(--shadow-1);
  padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-4);
}

.home-search__input {
  flex: 1;
  min-width: 0;
  min-height: 60px;
  font-size: 0.9375rem;
  color: var(--text-1);
  background: transparent;
  padding-left:20px;
}

.home-search__input::placeholder {
  color: var(--text-3);
}

.home-search__submit {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-search__submit:hover {
  opacity: 0.92;
}

.home-search__submit:focus-visible {
  outline: 2px solid var(--sub-color);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .home-search-wrap {
    margin-top: calc(-1 * var(--sp-6));
  }

  .home-search {
    box-shadow: var(--shadow-2);
  }
}

/* ==== 3. 카테고리 아이콘 그리드 (DB, CategoryService) ==== */
.home-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}

.home-categories__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-4) var(--sp-2);
  background: var(--surface-1);
  border-radius: var(--radius-md);
  color: var(--text-2);
  text-align: center;
}

.home-categories__link:hover {
  color: var(--main-color);
}

.home-categories__link:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
}

.home-categories__icon {
  display: inline-flex;
  color: var(--main-color);
}

.home-categories__item--more .home-categories__icon {
  color: var(--text-3);
}

.home-categories__label {
  max-width: 100%;
  font-size: 0.75rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .home-categories {
    grid-template-columns: repeat(8, 1fr);
    gap: var(--sp-4);
  }
}

/* ==== 4. 캐러셀 공용 (인기 전문가) ==== */
.home-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.home-carousel__arrow {
  display: none;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-0);
  box-shadow: var(--shadow-1);
  color: var(--text-2);
  align-items: center;
  justify-content: center;
}

.home-carousel__arrow:hover {
  color: var(--main-color);
}

.home-carousel__arrow:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .home-carousel__arrow {
    display: inline-flex;
  }
}

.card-expert-list {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: var(--sp-1) 0 var(--sp-2);
  flex: 1;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.card-expert-list::-webkit-scrollbar {
  display: none;
}

.card-expert-list .card-expert {
  flex: 0 0 auto;
  width: 240px;
  scroll-snap-align: start;
}

@media (max-width: 389.98px) {
  .card-expert-list .card-expert {
    width: 208px;
  }
}

@media (min-width: 1280px) {
  .card-expert-list .card-expert {
    width: calc((100% - 2 * var(--sp-4)) / 3);
  }
}

/* ==== 5. 프로모션 배너 (DB, PromotionService — 관리자가 슬라이드를 추가/편집) ==== */
.home-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.home-banner__track {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
}

.home-banner.is-dragging {
  cursor: grabbing;
}

.home-banner.is-dragging .home-banner__track {
  transition: none;
}

.home-banner__slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6);
  min-height: 108px;
  color: var(--color-on-primary);
}

.home-banner__slide--sub {
  background: var(--sub-color);
}

.home-banner__slide--event {
  background: var(--color-accent-yellow);
  color: var(--text-1);
}

.home-banner__art--event {
  color: var(--sub-color);
}

.home-banner__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.home-banner__label {
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0.85;
}

.home-banner__headline {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

.home-banner__body {
  font-size: 0.8125rem;
  opacity: 0.9;
}

.home-banner__art {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-banner__art img {
  width: auto;
  max-width: 32vw;
  height: 72px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.home-banner__controls {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.home-banner__pager {
  font-size: 0.75rem;
  color: var(--color-on-primary);
  background: rgba(17, 24, 39, 0.4);
  padding: 2px var(--sp-2);
  border-radius: 999px;
}

.home-banner__dots {
  display: none;
}

/* 점(dot) 시각 크기는 7px로 유지한다. 모바일에서는 목록을 숨기고 PC에서만 가로 폭을 줄인다. */
.home-banner__dot {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.home-banner__dot::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}

.home-banner__dot.is-active::after {
  background: var(--color-on-primary);
}

.home-banner__dot:focus-visible {
  outline: 2px solid var(--color-on-primary);
  outline-offset: 1px;
  border-radius: 50%;
}

@media (min-width: 768px) {
  .home-banner__slide {
    padding: var(--sp-8);
    min-height: 140px;
  }

  .home-banner__art img {
    max-width: 180px;
    height: 100px;
  }

  .home-banner__dots {
    display: flex;
  }

  .home-banner__dot {
    width: 24px;
  }

  .home-banner__headline {
    font-size: 1.25rem;
  }
}

/* ==== 6. 베스트 이용후기 ==== */
.home-reviews {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

.review-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.review-card__link:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.review-card__thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.review-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-card__thumb-fallback {
  color: var(--text-3);
}

.review-card__title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-1);
}

.review-card__rating svg {
  color: var(--color-warning);
}

@media (min-width: 768px) {
  .home-reviews {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==== 7. 중고마켓 ==== */
.card-market-list {
  display: grid;
  width: 100%;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
}

/* 긴 상품명이 모바일 그리드의 고유 너비를 키우지 않도록 카드 폭을 제한한다. */
.card-market-list > .card-market,
.card-market-list .card-market__link,
.card-market-list .card-market__body,
.card-market-list .card-market__title {
  min-width: 0;
  max-width: 100%;
}

.card-market-list .card-market__link {
  width: 100%;
}

/* ==== 메인 우측 하단 이미지 팝업 ==== */
.home-popup[hidden] {
  display: none;
}

.home-popup {
  position: fixed;
  left: var(--sp-6);
  bottom: var(--sp-6);
  z-index: 90;
  width: min(300px, calc(100vw - var(--sp-8)));
  overflow: hidden;
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-0);
  box-shadow: var(--shadow-2);
}

.home-popup__viewport {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  transition: height 0.35s ease;
  will-change: height;
}

.home-popup__track {
  display: flex;
  align-items: flex-start;
  width: 100%;
  transition: transform 0.48s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.home-popup__track.is-dragging {
  transition: none !important;
  will-change: transform;
}

.home-popup__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.home-popup__slide,
.home-popup__slide a,
.home-popup__slide img {
  display: block;
  width: 100%;
}

.home-popup__slide img {
  height: auto;
  max-height: min(60vh, 440px);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.home-popup__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 42px;
  height: 52px;
  place-items: center;
  border: 0;
  border-radius: var(--radius-md);
  background: rgba(17, 24, 39, 0.62);
  color: #fff;
  font-size: 0.72rem;
  line-height: 1;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.home-popup__arrow--prev {
  left: var(--sp-2);
}

.home-popup__arrow--next {
  right: var(--sp-2);
}

.home-popup:hover .home-popup__arrow,
.home-popup:focus-within .home-popup__arrow {
  opacity: 1;
  pointer-events: auto;
}

.home-popup__arrow:hover,
.home-popup__arrow:focus-visible {
  background: rgba(17, 24, 39, 0.82);
}

.home-popup__dots {
  display: none;
}

.home-popup__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--color-line-soft);
}

.home-popup__actions button {
  min-height: 48px;
  padding: 0 var(--sp-2);
  background: var(--surface-0);
  color: var(--text-2);
  font-size: 0.875rem;
  cursor: pointer;
}

.home-popup__actions button + button {
  border-left: 1px solid var(--color-line-soft);
}

.home-popup__actions button:hover {
  background: var(--surface-1);
}

@media (min-width: 768px) {
  .card-market-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }
}

/* ==== 작은 모바일 (389px 이하) ==== */
@media (max-width: 389.98px) {
  .home-hero {
    padding-bottom: var(--sp-6);
  }

  .home-banner__slide {
    padding: var(--sp-4);
  }

  .home-banner__art svg {
    width: 40px;
    height: 40px;
  }

  .home-banner__art img {
    max-width: 28vw;
    height: 50px;
  }
}

@media (max-width: 767.98px) {
  .home-popup {
    right: var(--sp-4);
    bottom: calc(56px + var(--sp-4) + env(safe-area-inset-bottom, 0px));
    width: min(280px, calc(100vw - var(--sp-8)));
  }

  .home-popup__arrow {
    display: none !important;
  }

  .home-popup__dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transform: translateX(-50%);
  }

  .home-popup__dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.42);
    box-shadow: 0 1px 4px rgba(17, 24, 39, 0.28);
    cursor: pointer;
    transition: width 0.2s ease, background-color 0.2s ease;
  }

  .home-popup__dots button[aria-current="true"] {
    width: 20px;
    background: #fff;
  }
}

@media (hover: none) {
  .home-popup__arrow {
    opacity: 0.88;
    pointer-events: auto;
  }
}