/* =========================================================================
   이거사자 v2 페이지 레이아웃 — 페이지별 배치만 담당 (모양은 components.css)
   ========================================================================= */

/* 공통 섹션 ---------------------------------------------------------------- */
.ig-section {
  padding-top: var(--ig-space-10);
}

.ig-section__body {
  margin-top: var(--ig-space-4);
}

.ig-section__intro {
  display: flex;
  flex-direction: column;
  gap: var(--ig-space-1);
}

@media (min-width: 64em) {
  .ig-section {
    padding-top: var(--ig-space-16);
  }

  .ig-section__body {
    margin-top: var(--ig-space-5);
  }
}

/* 목록형 페이지 머리 아래 컨트롤 묶음 */
.ig-page-controls {
  display: flex;
  flex-direction: column;
  gap: var(--ig-space-3);
  padding-bottom: var(--ig-space-2);
}

/* 목록형 페이지의 결과 영역 (머리 · 컨트롤 바로 아래) */
.ig-page-section {
  padding-top: var(--ig-space-6);
}

.ig-section-note {
  margin-top: var(--ig-space-3);
  color: var(--ig-sub);
  font-size: var(--ig-text-sm);
}

@media (min-width: 64em) {
  .ig-page-section {
    padding-top: var(--ig-space-8);
  }

  .ig-section-note {
    font-size: var(--ig-text-md);
  }
}

/* 안내 문장 안에 짧은 링크가 이어질 때 누르는 자리가 겹치지 않게 (WCAG 2.5.8 간격) */
.ig-section-note .ig-link + .ig-link {
  margin-left: var(--ig-space-2);
}

/* 홈 ---------------------------------------------------------------------- */
.ig-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* 한 칸이 내용 최소 폭(검색창 · 영수증)을 따라 320px 화면을 넘지 않게 */
  gap: var(--ig-space-6);
  padding: var(--ig-space-6) 0 var(--ig-space-2);
}

.ig-home-hero__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}

.ig-home-hero__title {
  font-size: var(--ig-text-4xl);
  font-weight: var(--ig-weight-heavy);
  line-height: 1.28;
  letter-spacing: -0.035em;
}

.ig-home-hero__desc {
  color: var(--ig-sub);
  font-size: var(--ig-text-md);
}

.ig-home-hero__search {
  width: 100%;
}

/* 영수증의 링크 줄은 줄 전체가 링크라 앞 글자에 밑줄을 그어 링크임을 보인다 */
.ig-home-hero__receipt .ig-lead--link > span:first-child {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 64em) {
  .ig-home-hero {
    grid-template-columns: minmax(0, 1fr) 25rem;
    gap: var(--ig-space-16);
    align-items: center;
    padding: var(--ig-space-14) 0 var(--ig-space-3);
  }

  .ig-home-hero__main {
    gap: var(--ig-space-5);
  }

  .ig-home-hero__title {
    font-size: var(--ig-text-7xl);
    line-height: 1.2;
    letter-spacing: -0.04em;
  }

  .ig-home-hero__desc {
    max-width: 36em;
    font-size: 1.0625rem;
  }

  .ig-home-hero__search {
    max-width: 40rem;
  }
}

/* 카테고리 · TOP 100 묶음. 위아래 간격은 다른 섹션처럼 .ig-section의 padding-top(모바일 40px · PC 64px)만 쓴다.
   섹션 여백을 0으로 지우면 PC에서 배너에 붙고, 그리드 row gap까지 주면 모바일에서 두 섹션 사이가 80px로 벌어진다 */
.ig-home-split {
  display: grid;
}

@media (min-width: 64em) {
  .ig-home-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ig-space-12);
    align-items: start;
  }
}

.ig-home-cats__controls,
.ig-home-drops__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ig-space-2);
  margin-top: var(--ig-space-3);
}

.ig-drop-toolbar {
  justify-content: flex-end;
  margin-block: var(--ig-space-3);
}

.ig-drop-toolbar .ig-toolbar__group {
  flex-wrap: nowrap;
  min-width: 0;
}

/* 목록 · 랭킹 · 가격하락 · 검색 ---------------------------------------------- */
.ig-list-layout {
  display: grid;
  gap: var(--ig-space-4);
}

.ig-list-layout__aside {
  display: none;
}

.ig-list-layout__main {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-width: 0;
}

.ig-filter-trigger {
  display: inline-flex;
}

@media (min-width: 64em) {
  .ig-list-layout {
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: var(--ig-space-8);
    align-items: start;
  }

  /* 필터가 화면보다 길면 브랜드 목록 · "필터 적용"이 목록 끝까지 안 보인다 — 패널을 화면 높이에 맞추고 선택지만 스크롤 */
  .ig-list-layout__aside {
    display: flex;
    position: sticky;
    top: calc(var(--ig-header-height) + var(--ig-space-6));
    max-height: calc(100vh - var(--ig-header-height) - var(--ig-space-6) * 2);
  }

  .ig-list-layout__aside .ig-filter {
    flex: 1;
    min-height: 0;
  }

  .ig-list-layout__aside .ig-filter__body {
    min-height: 0;
    overflow-y: auto;
  }

  .ig-filter-trigger {
    display: none;
  }
}

.ig-filter-trigger__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3125rem;
  background: var(--ig-signal);
  color: var(--ig-on-signal);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-2xs);
}

/* 필터: PC는 왼쪽 고정 패널, 모바일은 "필터" 버튼으로 여는 전체 화면 시트 (같은 폼 하나) */
@media (max-width: 63.99875em) {
  /* 적용 개수와 상품 수 문구 길이가 바뀌어도 두 줄 배치를 유지한다. */
  .ig-toolbar--filters > .ig-count {
    flex-basis: 100%;
  }

  .ig-toolbar--filters > .ig-toolbar__group {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .ig-toolbar--filters .ig-toolbar__group .ig-toolbar__group {
    flex-wrap: nowrap;
    min-width: 0;
  }

  .ig-toolbar--filters .ig-filter-trigger {
    flex-shrink: 0;
    min-width: 7.5rem; /* 적용 개수 배지가 붙어도 정렬 버튼 폭을 밀지 않는다. */
  }

  .ig-toolbar--filters .ig-select,
  .ig-toolbar--filters .ig-select__button {
    min-width: 0;
    max-width: 100%;
  }

  .ig-toolbar--filters .ig-select__button > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ig-toolbar--filters .ig-toolbar__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .ig-list-layout__aside.is-open {
    position: fixed;
    inset: 0;
    z-index: var(--ig-z-overlay);
    display: flex;
    flex-direction: column;
    background: var(--ig-ground);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  .ig-list-layout__aside.is-open .ig-filter {
    flex: 1;
    min-height: 0;
    border: 0;
  }

  .ig-list-layout__aside.is-open .ig-filter__head {
    min-height: 3.75rem;
    padding: 0 0.375rem 0 var(--ig-gutter);
  }

  .ig-list-layout__aside.is-open .ig-filter__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .ig-list-layout__aside.is-open .ig-filter__group {
    padding: var(--ig-space-4) var(--ig-gutter);
  }

  .ig-list-layout__aside.is-open .ig-filter__foot {
    padding: 0.625rem var(--ig-gutter) calc(0.625rem + env(safe-area-inset-bottom));
    background: var(--ig-paper);
    border-top: var(--ig-border-strong) solid var(--ig-line-strong);
  }
}

@media (min-width: 64em) {
  .ig-filter__close {
    display: none;
  }
}

/* 상세 -------------------------------------------------------------------- */
.ig-detail-top {
  display: flex;
  flex-direction: column;
  gap: var(--ig-space-3);
  padding-top: 0.875rem;
}

.ig-detail-hero {
  display: grid;
  gap: var(--ig-space-4);
  margin-top: var(--ig-space-4);
}

.ig-detail-media {
  --ig-hole: var(--ig-fill);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--ig-fill);
}

.ig-detail-media .ig-ph {
  width: 34%;
  height: 72%;
}

/* 이미지 없는 상품: 큰 칸이라 아이콘 · 글자를 키운다 */
.ig-detail-media .ig-noimage {
  margin: var(--ig-space-4);
  font-size: var(--ig-text-sm);
}

.ig-detail-media .ig-noimage .ig-icon {
  width: 3rem;
  height: 3rem;
}

.ig-detail-media__badge {
  position: absolute;
  left: var(--ig-space-3);
  top: var(--ig-space-3);
  padding: 0.25rem 0.5rem;
  background: var(--ig-paper);
  border: var(--ig-border) solid var(--ig-line-strong);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
}

.ig-detail-media__tag {
  position: absolute;
  left: var(--ig-space-3);
  bottom: var(--ig-space-3);
}

.ig-detail-info {
  display: flex;
  flex-direction: column;
  gap: var(--ig-space-4);
  min-width: 0;
}

.ig-product-head {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ig-product-head__title {
  font-size: var(--ig-text-2xl);
  font-weight: var(--ig-weight-bold);
  line-height: 1.38;
  letter-spacing: -0.03em;
}

.ig-product-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 0.625rem;
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
}

.ig-detail-actions {
  display: none;
}

/* 현재 옵션은 항상 보이고, 비교 목록만 펼친다. 긴 이름은 줄바꿈하고 가격 열은 유지한다. */
.ig-product-options {
  min-width: 0;
  border: var(--ig-border-strong) solid var(--ig-line-strong);
  background: var(--ig-paper);
}

.ig-product-options__summary {
  display: flex;
  flex-direction: column;
  gap: var(--ig-space-3);
  padding: var(--ig-space-3);
  cursor: pointer;
  list-style: none;
}

.ig-product-options__summary::-webkit-details-marker {
  display: none;
}

.ig-product-options__summary--static {
  cursor: auto;
}

.ig-product-options__head,
.ig-product-options__toggle {
  display: flex;
  align-items: center;
  gap: var(--ig-space-2);
}

.ig-product-options__head {
  justify-content: space-between;
  font-size: var(--ig-text-xs);
}

.ig-product-options__count,
.ig-product-options__note,
.ig-product-options__unit,
.ig-product-options__price-label {
  color: var(--ig-sub);
  font-size: var(--ig-text-xs);
  font-weight: var(--ig-weight-regular);
}

.ig-product-options__toggle {
  flex: none;
  font-weight: var(--ig-weight-bold);
}

.ig-product-options__toggle .ig-icon {
  width: 1rem;
  height: 1rem;
}

.ig-product-options__close,
.ig-product-options[open] .ig-product-options__change {
  display: none;
}

.ig-product-options[open] .ig-product-options__close {
  display: inline;
}

.ig-product-options[open] .ig-product-options__toggle .ig-icon {
  transform: rotate(180deg);
}

.ig-product-options__selection,
.ig-product-options__option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--ig-space-3);
}

.ig-product-options__name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--ig-text-sm);
  font-weight: var(--ig-weight-bold);
}

.ig-product-options__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--ig-text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ig-product-options__body {
  border-top: var(--ig-border) solid var(--ig-line);
}

.ig-product-options__note {
  padding: var(--ig-space-3);
}

.ig-product-options__list {
  max-height: 24rem;
  max-height: min(24rem, 50svh);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scroll-padding-block: var(--ig-space-2);
}

.ig-product-options__list > li + li {
  border-top: var(--ig-border) solid var(--ig-line-soft);
}

.ig-product-options__option {
  min-height: 3.5rem;
  padding: var(--ig-space-3);
}

.ig-product-options__option[aria-current="page"] {
  background: var(--ig-fill);
  box-shadow: inset 3px 0 0 var(--ig-signal);
}

.ig-product-options__option:focus-visible,
.ig-product-options__summary:focus-visible {
  outline-offset: -3px;
}

.ig-product-options__description {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.ig-product-options__badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.ig-product-options__badges:empty {
  display: none;
}

.ig-product-options__selected,
.ig-product-options__soldout {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  padding: 0 0.375rem;
  font-size: var(--ig-text-xs);
  font-weight: var(--ig-weight-bold);
}

.ig-product-options__selected {
  background: var(--ig-signal);
  color: var(--ig-on-signal);
}

.ig-product-options__selected .ig-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.ig-product-options__soldout {
  color: var(--ig-sub);
  border: var(--ig-border) solid var(--ig-line);
}

.ig-product-options__unit {
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  .ig-product-options__option:hover {
    background: var(--ig-fill);
  }
}

.ig-detail-grid {
  display: grid;
  gap: var(--ig-space-4);
  margin-top: var(--ig-space-8);
}

.ig-detail-grid__aside .ig-btn {
  display: none;
}

@media (min-width: 64em) {
  .ig-detail-top {
    padding-top: var(--ig-space-5);
  }

  .ig-detail-hero {
    grid-template-columns: 32.5rem minmax(0, 1fr);
    gap: var(--ig-space-14);
    align-items: start;
    margin-top: var(--ig-space-5);
  }

  .ig-detail-media {
    aspect-ratio: 1 / 1;
  }

  .ig-detail-media .ig-ph {
    width: 40%;
    height: 50%;
  }

  .ig-detail-media__badge {
    left: 1.125rem;
    top: 1.125rem;
    font-size: var(--ig-text-sm);
  }

  .ig-detail-media__tag {
    left: 1.125rem;
    bottom: 1.125rem;
  }

  .ig-detail-info {
    gap: var(--ig-space-5);
  }

  .ig-product-head {
    gap: var(--ig-space-2);
  }

  .ig-product-head__title {
    font-size: var(--ig-text-4xl);
  }

  .ig-product-head__meta {
    font-size: var(--ig-text-sm);
  }

  .ig-detail-actions {
    display: flex;
    gap: 0.625rem;
  }

  .ig-detail-actions .ig-btn--primary {
    flex: 1;
  }
  /* 공유 버튼을 구매 버튼 높이에 맞춘다 (아이콘 버튼 3.25rem · 구매 버튼 3.75rem이라 어긋났음) */
  .ig-detail-actions .ig-icon-btn { height: auto; align-self: stretch; }

  .ig-detail-grid {
    grid-template-columns: minmax(0, 1fr) 22.5rem;
    gap: var(--ig-space-12);
    align-items: start;
    margin-top: var(--ig-space-16);
  }

  .ig-detail-grid__aside {
    position: sticky;
    top: calc(var(--ig-header-height) + var(--ig-space-6));
  }

  .ig-detail-grid__aside .ig-btn {
    display: inline-flex;
  }
}

/* 살까 말까: 3개 묶음 */
.ig-decide {
  display: grid;
  gap: 0;
}

@media (min-width: 64em) {
  .ig-decide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ig-space-6);
  }
}

/* 쇼핑 가이드 --------------------------------------------------------------- */
.ig-guide-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ig-space-3);
  padding: var(--ig-space-5) 0 var(--ig-space-2);
}

.ig-guide-hero__title {
  font-size: var(--ig-text-4xl);
  font-weight: var(--ig-weight-heavy);
  line-height: 1.3;
  letter-spacing: -0.035em;
}

.ig-guide-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 0.625rem;
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
}

.ig-guide-hero__subtitle {
  max-width: 40em;
  color: var(--ig-sub);
  font-size: var(--ig-text-base);
}

.ig-guide-layout {
  display: grid;
  gap: var(--ig-space-10);
}

.ig-guide-layout__main {
  min-width: 0;
}

@media (min-width: 64em) {
  .ig-guide-hero {
    gap: var(--ig-space-4);
    padding: var(--ig-space-10) 0 var(--ig-space-4);
  }

  .ig-guide-hero__title {
    font-size: 2.75rem;
    line-height: 1.2;
  }

  .ig-guide-hero__meta {
    font-size: var(--ig-text-sm);
  }

  .ig-guide-hero__subtitle {
    font-size: var(--ig-text-xl);
  }

  .ig-guide-layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--ig-space-12);
    align-items: start;
  }

  /* 상품이 없어 곁 패널이 빠진 가이드는 본문을 전폭으로 (시안에는 없는 데이터 상태) */
  .ig-guide-layout:not(:has(> .ig-guide-layout__aside)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .ig-guide-layout__aside {
    position: sticky;
    top: calc(var(--ig-header-height) + var(--ig-space-6));
  }
}

/* 상태 전용 페이지 (404 등) ---------------------------------------------------- */
.ig-state-page {
  padding-block: var(--ig-space-8);
}

@media (min-width: 64em) {
  .ig-state-page {
    padding-block: var(--ig-space-16);
  }
}