/* =========================================================================
   이거사자 v2 컴포넌트 — "가격표" 디자인 시스템

   원칙
   - 색·글꼴·간격은 tokens.css 변수만 쓴다 (라이트/다크 자동 전환)
   - 모서리는 각지게. 강한 구분은 2px 잉크 선, 약한 구분은 1px 선·점선
   - 노란 가격표(--ig-signal)는 "좋은 가격" 신호와 강조에만 쓴다
   - 누를 수 있는 요소는 최소 44px (--ig-tap)
   - 모바일 우선: 768px(태블릿) · 1024px(PC) · 1440px(와이드)
   ========================================================================= */

/* 0. 아이콘 · 상품 자리 그림 ------------------------------------------------ */
.ig-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 관리자가 이름으로 고르는 아이콘(카테고리 · 가이드 "한눈에 보기") — Material Symbols Rounded의 이름(합자)을 글자로 쓴다.
   받기 전 · 못 받으면 이름 글자가 번지지 않게 1em 칸으로 자른다. 꾸밈용이라 aria-hidden */
.ig-symbol {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  overflow: hidden;
  font-family: "Material Symbols Rounded";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
  -webkit-font-smoothing: antialiased;
}

.ig-ph {
  fill: none;
  stroke: var(--ig-line-strong);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ig-ph * {
  vector-effect: non-scaling-stroke;
}

.ig-ph .ig-ph__paper {
  fill: var(--ig-paper);
}

/* 가격표 구멍 색은 태그가 놓인 바탕을 따른다 */
.ig-on-paper {
  --ig-hole: var(--ig-paper);
}

.ig-on-ground {
  --ig-hole: var(--ig-ground);
}

/* 1. 로고 ---------------------------------------------------------------- */
.ig-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--ig-space-2);
  min-height: var(--ig-tap);
  color: var(--ig-ink);
  font-size: var(--ig-text-2xl);
  font-weight: var(--ig-weight-heavy);
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.ig-logo img {
  width: 1.875rem;
  height: 1.625rem;
}

/* 로고 윤곽선이 검정이라 다크 테마에서는 밝은 윤곽선 로고(logo-dark.svg)로 바꾼다 */
.ig-logo__mark--dark {
  display: none;
}

:root[data-theme="dark"] .ig-logo__mark--light {
  display: none;
}

:root[data-theme="dark"] .ig-logo__mark--dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .ig-logo__mark--light {
    display: none;
  }

  :root:not([data-theme]) .ig-logo__mark--dark {
    display: block;
  }
}

@media (min-width: 64em) {
  .ig-logo {
    font-size: var(--ig-text-3xl);
  }

  .ig-logo img {
    width: 2.375rem;
    height: 2rem;
  }
}

/* 2. 버튼 ---------------------------------------------------------------- */
.ig-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ig-space-2);
  min-height: var(--ig-tap);
  padding: 0 var(--ig-space-4);
  border: var(--ig-border-strong) solid transparent;
  font-size: var(--ig-text-md);
  font-weight: var(--ig-weight-heavy);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--ig-duration) var(--ig-ease), color var(--ig-duration) var(--ig-ease);
}

.ig-btn .ig-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.ig-btn--primary {
  background: var(--ig-cta);
  border-color: var(--ig-cta);
  color: var(--ig-on-cta);
}

.ig-btn--primary:hover {
  background: color-mix(in srgb, var(--ig-cta) 86%, var(--ig-ground));
}

.ig-btn--secondary {
  background: var(--ig-paper);
  border-color: var(--ig-line-strong);
  color: var(--ig-ink);
}

.ig-btn--secondary:hover {
  background: var(--ig-fill);
}

.ig-btn--signal {
  background: var(--ig-signal);
  border-color: var(--ig-signal);
  color: var(--ig-on-signal);
}

.ig-btn--ghost {
  background: transparent;
  color: var(--ig-ink);
}

.ig-btn--ghost:hover {
  background: var(--ig-fill);
}

.ig-btn--lg {
  min-height: 3.25rem;
  font-size: var(--ig-text-lg);
}

.ig-btn--xl {
  min-height: 3.75rem;
  font-size: var(--ig-text-xl);
}

.ig-btn--block {
  width: 100%;
}

.ig-btn--mono {
  font-family: var(--ig-font-mono);
  font-weight: var(--ig-weight-bold);
}

.ig-btn[disabled],
.ig-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 아이콘만 있는 버튼 */
.ig-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ig-tap);
  height: var(--ig-tap);
  flex: none;
  color: var(--ig-ink);
}

.ig-icon-btn:hover {
  background: var(--ig-fill);
}

.ig-icon-btn .ig-icon {
  width: 1.375rem;
  height: 1.375rem;
}

.ig-icon-btn--boxed {
  background: var(--ig-paper);
  border: var(--ig-border-strong) solid var(--ig-line-strong);
}

.ig-icon-btn--lg {
  width: 3.25rem;
  height: 3.25rem;
}

/* 밑줄 링크 (전체 보기 등) */
.ig-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ig-space-1);
  min-height: var(--ig-tap);
  color: var(--ig-ink);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-sm);
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}

.ig-link:hover {
  text-decoration-thickness: 2px;
}

/* 테마 토글 아이콘 */
.ig-theme-sun {
  display: none;
}

:root[data-theme="dark"] .ig-theme-sun {
  display: block;
}

:root[data-theme="dark"] .ig-theme-moon {
  display: none;
}

/* 테마를 고른 적이 없으면(data-theme 없음) 시스템 설정을 따른다 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .ig-theme-sun {
    display: block;
  }

  :root:not([data-theme]) .ig-theme-moon {
    display: none;
  }
}

/* 3. 헤더 · 내비게이션 ------------------------------------------------------ */
.ig-header {
  background: var(--ig-paper);
  border-bottom: var(--ig-border-strong) solid var(--ig-line-strong);
}

.ig-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "logo actions"
    "search search"
    "nav nav";
  align-items: center;
  column-gap: var(--ig-space-3);
  padding-top: var(--ig-space-1);
}

.ig-header__logo {
  grid-area: logo;
  justify-self: start;
}

.ig-header__search {
  grid-area: search;
  padding-bottom: var(--ig-space-2);
}

/* 홈은 히어로에 검색창이 있어 헤더 검색을 뺀다 */
.ig-header--home .ig-header__inner {
  grid-template-areas:
    "logo actions"
    "nav nav";
}

.ig-header--home .ig-header__search {
  display: none;
}

.ig-header__nav {
  grid-area: nav;
  margin: 0 calc(var(--ig-gutter) * -1);
  padding: 0 calc(var(--ig-gutter) - 0.625rem);
  border-top: var(--ig-border) solid var(--ig-line-soft);
  overflow-x: auto;
  scrollbar-width: none;
}

.ig-header__nav::-webkit-scrollbar {
  display: none;
}

.ig-header__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  margin-right: -0.625rem;
}

.ig-nav {
  display: flex;
  align-items: center;
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-sm);
  white-space: nowrap;
}

.ig-nav__item {
  display: inline-flex;
  align-items: center;
  gap: var(--ig-space-2);
  min-height: var(--ig-tap);
  padding: 0 0.625rem;
  color: var(--ig-ink);
}

.ig-nav__item .ig-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.ig-nav__item:hover {
  background: var(--ig-fill);
}

/* 메뉴 줄은 가로 스크롤 영역이라 바깥 테두리가 잘린다 — 초점 테두리를 안쪽에 그린다 */
.ig-nav__item:focus-visible {
  outline-offset: -3px;
}

.ig-nav__item[aria-current="page"],
.ig-nav__item[aria-current="true"],
.ig-nav__item[aria-expanded="true"] {
  font-weight: var(--ig-weight-bold);
  box-shadow: inset 0 -3px 0 0 var(--ig-line-strong);
}

@media (min-width: 64em) {
  .ig-header {
    position: sticky;
    top: 0;
    z-index: var(--ig-z-header);
  }

  .ig-header__inner {
    /* 메뉴는 글자만큼, 검색창은 남는 폭(최대 440px)을 쓴다 — 1024px에서도 겹치지 않게 */
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "logo search nav actions";
    column-gap: var(--ig-space-4);
    min-height: 4.5rem;
    padding-top: 0;
  }

  .ig-header__search {
    display: block;
    width: 100%;
    max-width: 27.5rem;
    padding-bottom: 0;
  }

  .ig-header__nav {
    justify-self: end;
    margin: 0;
    padding: 0;
    border-top: 0;
    overflow: visible;
  }

  .ig-header__actions {
    margin-right: 0;
    padding-left: var(--ig-space-2);
    border-left: var(--ig-border) solid var(--ig-line);
  }

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

  .ig-nav__item {
    padding: 0 0.875rem;
  }

  /* 홈은 히어로에 검색창이 있어 헤더 검색을 뺀다 */
  .ig-header--home .ig-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo nav actions";
  }

  .ig-header--home .ig-header__search {
    display: none;
  }
}

@media (min-width: 80em) {
  .ig-header__inner {
    column-gap: var(--ig-space-6);
  }
}

/* 4. 검색 --------------------------------------------------------------- */
.ig-search {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 3.125rem;
  background: var(--ig-paper);
  border: var(--ig-border-strong) solid var(--ig-line-strong);
}

/* 노란 띠만으로는 라이트 바탕과 대비가 1.3:1이라 바깥에 잉크 테두리를 함께 그린다 */
.ig-search:focus-within {
  box-shadow: 0 0 0 3px var(--ig-signal);
  outline: 3px solid var(--ig-line-strong);
  outline-offset: 3px;
}

.ig-search__icon {
  display: flex;
  align-items: center;
  padding-left: 0.875rem;
  color: var(--ig-sub);
}

.ig-search__field {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
}

.ig-search__input {
  width: 100%;
  min-width: 0;
  padding: 0 0.875rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ig-ink);
  /* iOS는 16px보다 작은 입력칸에 초점이 가면 화면을 확대한다 */
  font-size: var(--ig-text-lg);
  appearance: none;
}

.ig-search__icon + .ig-search__field .ig-search__input {
  padding-left: 0.625rem;
}

.ig-search__input::placeholder {
  color: var(--ig-sub);
  opacity: 1;
}

.ig-search__input:focus {
  outline: none;
}

/* JS가 준비된 경우만 기본 지우기 버튼을 교체한다. 버튼 표시 여부로 입력 폭은 변하지 않는다. */
.ig-search__field[data-search-clear-ready] .ig-search__input {
  padding-right: var(--ig-tap);
}

.ig-search__field[data-search-clear-ready] .ig-search__input::-webkit-search-cancel-button {
  display: none;
}

.ig-search__clear {
  position: absolute;
  inset: 0 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ig-tap);
  color: var(--ig-sub);
}

.ig-search__clear:hover {
  color: var(--ig-ink);
  background: var(--ig-fill);
}

.ig-search__clear:focus-visible {
  outline-offset: -3px;
}

.ig-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ig-space-2);
  min-width: 3.125rem;
  margin: calc(var(--ig-border-strong) * -1) calc(var(--ig-border-strong) * -1) calc(var(--ig-border-strong) * -1) 0;
  padding: 0 var(--ig-space-4);
  background: var(--ig-cta);
  color: var(--ig-on-cta);
  font-weight: var(--ig-weight-heavy);
}

.ig-search--sm {
  min-height: var(--ig-tap);
}

.ig-search--lg {
  min-height: 3.75rem;
}

.ig-search--lg .ig-search__input {
  font-size: var(--ig-text-xl);
}

@media (min-width: 64em) {
  .ig-search--lg .ig-search__submit {
    min-width: 7rem;
  }
}

/* 5. 가격표 태그 · 라벨 ------------------------------------------------------ */
.ig-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ig-space-1);
  min-height: 1.625rem;
  padding: 0 0.625rem 0 1.25rem;
  background: var(--ig-signal);
  color: var(--ig-on-signal);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
  font-weight: var(--ig-weight-bold);
  line-height: 1;
  white-space: nowrap;
  clip-path: polygon(0.5625rem 0, 100% 0, 100% 100%, 0.5625rem 100%, 0 50%);
}

.ig-tag::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  width: 0.3125rem;
  height: 0.3125rem;
  margin-top: -0.15625rem;
  border-radius: 50%;
  background: var(--ig-hole, var(--ig-fill));
}

.ig-tag--md {
  min-height: 1.875rem;
  padding: 0 0.75rem 0 1.375rem;
  font-size: var(--ig-text-sm);
  clip-path: polygon(0.625rem 0, 100% 0, 100% 100%, 0.625rem 100%, 0 50%);
}

.ig-tag--md::before {
  left: 0.5625rem;
  width: 0.375rem;
  height: 0.375rem;
  margin-top: -0.1875rem;
}

.ig-tag--lg {
  min-height: 2.25rem;
  padding: 0 1rem 0 1.625rem;
  font-size: var(--ig-text-lg);
  clip-path: polygon(0.6875rem 0, 100% 0, 100% 100%, 0.6875rem 100%, 0 50%);
}

.ig-tag--lg::before {
  left: 0.625rem;
  width: 0.375rem;
  height: 0.375rem;
  margin-top: -0.1875rem;
}

.ig-tag--neutral {
  background: var(--ig-fill);
  color: var(--ig-sub);
}

.ig-tag--inverse {
  background: var(--ig-inverse);
  color: var(--ig-on-inverse);
}

/* 테두리 라벨: "평소 가격" 같은 중립 상태 */
.ig-label {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0 var(--ig-space-2);
  border: var(--ig-border) solid var(--ig-muted);
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
  font-weight: var(--ig-weight-bold);
  line-height: 1;
  white-space: nowrap;
}

.ig-label--up {
  border-color: var(--ig-up);
  color: var(--ig-up);
}

/* 형광펜 강조 */
.ig-mark {
  padding: 0.0625rem 0.375rem;
  background: var(--ig-signal);
  color: var(--ig-on-signal);
}

/* 6. 칩 · 세그먼트 · 셀렉트 · 체크박스 ---------------------------------------- */
.ig-chips {
  display: flex;
  gap: var(--ig-space-2);
}

.ig-chips--wrap {
  flex-wrap: wrap;
}

/* 밀어서 넘기는 칩 줄. 위아래 6px(바깥 여백 -4px)는 초점 테두리가 스크롤 영역에 잘리지 않게 두는 자리.
   스냅은 쓰지 않는다 — 끝쪽 칩에 초점이 가면 스냅 위치로 되돌아가 칩이 화면 밖에 남는다 */
.ig-chips--scroll {
  margin: -4px calc(var(--ig-gutter) * -1);
  padding: 6px var(--ig-gutter);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding-inline: 2.5rem;
}

.ig-chips--scroll::-webkit-scrollbar {
  display: none;
}

@media (min-width: 64em) {
  .ig-chips--scroll {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

.ig-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--ig-tap);
  padding: 0 0.875rem;
  background: var(--ig-paper);
  border: var(--ig-border) solid var(--ig-line);
  color: var(--ig-ink);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-sm);
  white-space: nowrap;
}

.ig-chip:hover {
  border-color: var(--ig-line-strong);
}

.ig-chip[aria-pressed="true"],
.ig-chip[aria-current="page"],
.ig-chip[aria-selected="true"] {
  background: var(--ig-ink);
  border-color: var(--ig-ink);
  color: var(--ig-paper);
  font-weight: var(--ig-weight-bold);
}

.ig-chip__count {
  color: inherit;
  opacity: 0.72;
}

.ig-seg {
  display: inline-flex;
  background: var(--ig-paper);
  border: var(--ig-border-strong) solid var(--ig-line-strong);
}

.ig-seg__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.5rem;
  padding: 0 var(--ig-space-4);
  color: var(--ig-ink);
  font-size: var(--ig-text-md);
  font-weight: var(--ig-weight-bold);
  white-space: nowrap;
}

.ig-seg__item + .ig-seg__item {
  border-left: var(--ig-border-strong) solid var(--ig-line-strong);
}

.ig-seg__item[aria-current="page"],
.ig-seg__item[aria-pressed="true"],
.ig-seg__item[aria-selected="true"] {
  background: var(--ig-cta);
  color: var(--ig-on-cta);
}

.ig-seg__item[aria-disabled="true"] {
  color: var(--ig-sub);
  cursor: not-allowed;
}

/* 못 쓰는 이유를 항목 안에 작게 (랭킹의 "쿠팡 준비 중") */
.ig-seg__note {
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-2xs);
  font-weight: var(--ig-weight-regular);
}

/* 드롭다운 선택 (정렬) — 버튼 + 옵션 링크 목록. 브라우저 기본 select 메뉴는 쓰지 않는다 */
.ig-select {
  position: relative;
  display: inline-flex;
  width: 11rem;
  min-width: 0;
  max-width: 100%;
}

.ig-select__button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ig-space-3);
  width: 100%;
  min-width: 0;
  min-height: var(--ig-tap);
  padding: 0 0.75rem;
  background: var(--ig-paper);
  border: var(--ig-border) solid var(--ig-line-strong);
  color: var(--ig-ink);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-sm);
  text-align: left;
  white-space: nowrap;
}

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

.ig-select__button:hover {
  background: var(--ig-fill);
}

.ig-select__button[aria-expanded="true"] {
  box-shadow: inset 0 0 0 1px var(--ig-line-strong);
}

.ig-select__button .ig-icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--ig-duration) var(--ig-ease);
}

.ig-select__button[aria-expanded="true"] .ig-icon {
  transform: rotate(180deg);
}

.ig-select__list {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  /* 선택 문구에 관계없이 버튼과 같은 폭으로 화면 안쪽에 펼친다. */
  width: 100%;
  min-width: 100%;
  max-width: calc(100vw - var(--ig-gutter) * 2);
  z-index: var(--ig-z-dropdown);
  padding: var(--ig-space-1) 0;
  background: var(--ig-paper);
  border: var(--ig-border-strong) solid var(--ig-line-strong);
  box-shadow: var(--ig-shadow-pop);
}

.ig-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ig-space-3);
  min-height: var(--ig-tap);
  padding: 0 0.75rem;
  color: var(--ig-ink);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-sm);
  white-space: normal;
  overflow-wrap: anywhere;
}

.ig-select__option:hover {
  background: var(--ig-fill);
}

.ig-select__option:focus-visible {
  background: var(--ig-fill);
  outline: 2px solid var(--ig-line-strong);
  outline-offset: -2px;
}

.ig-select__option[aria-current="true"] {
  font-weight: var(--ig-weight-bold);
}

.ig-select__option .ig-icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  visibility: hidden;
}

.ig-select__option[aria-current="true"] .ig-icon {
  visibility: visible;
}

.ig-check {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--ig-tap);
  font-size: var(--ig-text-md);
  cursor: pointer;
}

.ig-check input {
  appearance: none;
  display: grid;
  place-content: center;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  background: var(--ig-paper);
  border: var(--ig-border-strong) solid var(--ig-line-strong);
  cursor: pointer;
}

.ig-check input::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  background: var(--ig-on-signal);
  transform: scale(0);
  transition: transform 120ms var(--ig-ease);
  clip-path: polygon(14% 44%, 0 62%, 42% 100%, 100% 20%, 84% 4%, 40% 66%);
}

.ig-check input:checked {
  background: var(--ig-signal);
}

.ig-check input:checked::before {
  transform: scale(1);
}

/* 7. 브레드크럼 · 섹션 제목 ------------------------------------------------- */
.ig-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem 0.375rem;
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
}

.ig-breadcrumb a {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 0;
  margin: -0.75rem 0;
}

.ig-breadcrumb a:hover {
  color: var(--ig-ink);
  text-decoration: underline;
}

.ig-breadcrumb [aria-current="page"] {
  color: var(--ig-ink);
}

.ig-breadcrumb__sep {
  color: var(--ig-muted);
}

@media (min-width: 64em) {
  .ig-breadcrumb {
    font-size: var(--ig-text-sm);
  }
}

.ig-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ig-space-3);
  min-height: var(--ig-tap);
  padding-bottom: var(--ig-space-2);
  border-bottom: var(--ig-border-strong) solid var(--ig-line-strong);
}

.ig-section-head__title {
  font-size: var(--ig-text-2xl);
  font-weight: var(--ig-weight-heavy);
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.ig-section-head__aside {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
  white-space: nowrap;
}

.ig-section-head__aside .ig-icon {
  width: 1rem;
  height: 1rem;
}

@media (min-width: 64em) {
  .ig-section-head__title {
    font-size: var(--ig-text-3xl);
  }

  .ig-section-head__aside {
    font-size: var(--ig-text-sm);
  }
}

.ig-eyebrow {
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
}

/* 페이지 머리 (목록형 페이지 공통) */
.ig-page-head {
  display: flex;
  flex-direction: column;
  gap: var(--ig-space-2);
  padding: var(--ig-space-5) 0 var(--ig-space-4);
}

.ig-page-head__title {
  font-size: var(--ig-text-4xl);
  font-weight: var(--ig-weight-heavy);
  line-height: 1.25;
  letter-spacing: -0.035em;
}

.ig-page-head__desc {
  max-width: 40em;
  color: var(--ig-sub);
  font-size: var(--ig-text-md);
}

@media (min-width: 64em) {
  .ig-page-head {
    gap: var(--ig-space-3);
    padding: var(--ig-space-8) 0 var(--ig-space-6);
  }

  .ig-page-head__title {
    font-size: var(--ig-text-7xl);
    line-height: 1.15;
  }

  .ig-page-head__desc {
    font-size: var(--ig-text-lg);
  }
}

/* 8. 영수증 · 점선 리더 ------------------------------------------------------ */
.ig-receipt {
  filter: var(--ig-shadow-receipt);
}

.ig-receipt__paper {
  display: flex;
  flex-direction: column;
  gap: var(--ig-space-3);
  padding: var(--ig-space-5) var(--ig-space-5) 2.25rem;
  background: var(--ig-paper);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-md);
  font-variant-numeric: tabular-nums;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
}

.ig-receipt__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ig-space-2);
}

.ig-receipt__head strong {
  font-size: var(--ig-text-base);
}

.ig-receipt__head span {
  color: var(--ig-sub);
  font-size: var(--ig-text-xs);
}

@media (min-width: 64em) {
  .ig-receipt__paper {
    gap: 0.875rem;
    padding: 1.375rem 1.5rem 2.5rem;
    font-size: var(--ig-text-base);
  }
}

.ig-rule {
  height: 0;
  margin: 0;
  border: 0;
  border-top: var(--ig-border) dashed var(--ig-line-strong);
}

.ig-lead {
  display: flex;
  align-items: baseline;
  gap: var(--ig-space-2);
}

.ig-lead__dots {
  flex: 1;
  min-width: 0.75rem;
  border-bottom: 2px dotted var(--ig-line);
  transform: translateY(-4px);
}

.ig-lead--total {
  font-size: var(--ig-text-lg);
  font-weight: var(--ig-weight-bold);
}

@media (min-width: 64em) {
  .ig-lead--total {
    font-size: var(--ig-text-xl);
  }
}

/* 영수증 없이 점선 리더만 쓰는 사실 목록 */
.ig-facts {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.625rem 0;
  border-top: var(--ig-border) dashed var(--ig-line-strong);
  border-bottom: var(--ig-border) dashed var(--ig-line-strong);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-sm);
  font-variant-numeric: tabular-nums;
}

/* 9. 상품 카드 ------------------------------------------------------------ */
.ig-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

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

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

  .ig-products--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ig-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--ig-paper);
  border: var(--ig-border) solid var(--ig-line);
  transition: border-color var(--ig-duration) var(--ig-ease);
}

.ig-card:hover {
  border-color: var(--ig-line-strong);
}

.ig-card:has(.ig-card__link:focus-visible) {
  outline: 3px solid var(--ig-line-strong);
  outline-offset: 2px;
}

.ig-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ig-fill);
}

.ig-card__media img,
.ig-pick__media img,
.ig-gitem__media img,
/* 시안에는 예시 그림만 있어 규칙이 없던 칸 — 운영은 실제 사진이 들어간다 */
.ig-detail-media img,
.ig-rank-row__thumb img,
.ig-recent-item__thumb img,
.ig-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 실제 상품 사진 뒤 판 — 사진 바탕이 대부분 흰색이라 다크 테마에서도 밝은 판에 올린다 (예시 그림 · 이미지 없음은 --ig-fill 그대로) */
.ig-card__media:has(> img),
.ig-rank-row__thumb:has(> img),
.ig-recent-item__thumb:has(> img),
.ig-pick__media:has(> img),
.ig-gitem__media:has(> img),
.ig-detail-media:has(> img) {
  background: var(--ig-plate);
}

.ig-card__media .ig-ph {
  width: 56%;
  height: 56%;
}

/* 이미지 없음 — 이미지를 쓸 수 없거나 비었을 때. 빈 진열칸처럼 점선 칸 + 아이콘 (모든 이미지 자리 공통) */
.ig-noimage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ig-space-2);
  margin: 0.625rem;
  border: var(--ig-border) dashed var(--ig-line);
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-2xs);
  line-height: 1.3;
  text-align: center;
}

.ig-noimage .ig-icon {
  width: 1.75rem;
  height: 1.75rem;
  stroke-width: 1.5;
}

/* 작은 썸네일은 아이콘만 */
.ig-rank-row__thumb .ig-noimage,
.ig-recent-item__thumb .ig-noimage,
.ig-pick__media .ig-noimage {
  margin: 0.375rem;
}

.ig-rank-row__thumb .ig-noimage > span,
.ig-recent-item__thumb .ig-noimage > span,
.ig-pick__media .ig-noimage > span {
  display: none;
}

.ig-rank-row__thumb .ig-noimage .ig-icon,
.ig-recent-item__thumb .ig-noimage .ig-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.ig-card__tag {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
}

.ig-card__rank {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--ig-space-2);
  background: var(--ig-cta);
  color: var(--ig-on-cta);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-base);
  font-weight: var(--ig-weight-bold);
}

.ig-card__rank--top {
  background: var(--ig-signal);
  color: var(--ig-on-signal);
}

.ig-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.3125rem;
  padding: 0.625rem 0.625rem 0.75rem;
}

.ig-card__brand {
  overflow: hidden;
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-2xs);
  text-overflow: ellipsis;
  white-space: nowrap; /* 긴 브랜드가 줄바꿈돼 옆 카드와 상품명 · 가격 줄이 어긋나지 않게 한 줄로 */
}

/* 브랜드가 없는 상품(쿠팡 일부): 브랜드 줄은 마크업에서 빠지고 그 자리도 남기지 않는다 — 시안이 한 줄 높이를 남겨 두던
   `::before` 규칙(README 결정 21)은 2026-09-20 사용자 결정으로 뺐다(docs/v4-port-plan.md §6-11). 대체 글자도 넣지 않는다 */

/* 판매처 표시 — 통합 검색 · 최근 본 상품처럼 판매처가 섞이는 목록에서 브랜드 줄 앞에 진하게 */
.ig-seller {
  color: var(--ig-ink);
  font-weight: var(--ig-weight-bold);
}
/* 쿠팡 배송 타입 — API shipping_method(1 로켓배송 · 2 로켓설치 · 3 로켓프레시 · 4 로켓직구 · 5 판매자로켓)를 그대로 보여준다.
   0(일반 · 미상)과 올리브영은 배지를 아예 그리지 않는다. 가격 판단 꼬리표(.ig-tag)와 섞이지 않게 별도 모양 */
.ig-ship { display: inline-flex; align-items: center; gap: 0.1875rem; min-height: 1.375rem; padding: 0 0.375rem; border: var(--ig-border) solid currentColor; color: var(--ig-ship); font-size: var(--ig-text-xs); font-weight: var(--ig-weight-bold); white-space: nowrap; }
.ig-ship .ig-icon { width: 0.875rem; height: 0.875rem; }
.ig-ship--fresh { color: var(--ig-ship-fresh); }
.ig-ship--direct { color: var(--ig-ship-direct); }  /* 해외 직구 — 쿠팡도 이 계열은 보라 */
.ig-ship--vendor { color: var(--ig-sub); font-weight: var(--ig-weight-medium); }
.ig-card__brand .ig-ship { margin-left: var(--ig-space-2); }
.ig-card__ship { display: flex; flex-wrap: wrap; gap: var(--ig-space-2); }

/* 상품명은 최대 두 줄로 자르되 한 줄짜리에 빈 줄을 남기지 않는다 — 시안의 두 줄 최소 높이(2.8em · 2.9em)는
   2026-09-20 사용자 결정으로 뺐다(docs/v4-port-plan.md §6-11) */
.ig-card__name {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--ig-text-sm);
  font-weight: var(--ig-weight-medium);
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 옵션은 두 줄 제한이 있는 상품명 밖에 둔다. 구성 차이가 잘리지 않도록 모두 줄바꿈한다. */
.ig-product-option {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  font-size: var(--ig-text-xs);
  line-height: var(--ig-leading-snug);
}

.ig-product-option > span {
  flex: none;
  color: var(--ig-sub);
}

.ig-product-option > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: var(--ig-weight-bold);
}

.ig-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* 카드 테두리에 초점을 그리는 규칙이 :has()라, :has()를 모르는 브라우저에서는 링크 자체 테두리를 남긴다 */
@supports selector(:has(*)) {
  .ig-card__link:focus-visible {
    outline: none;
  }
}

/* 카드 전체가 링크인 요소: 안쪽 링크에 포커스가 오면 카드 테두리에 표시 */
.ig-shelf:has(.ig-shelf__title a:focus-visible),
.ig-shelf:has(.ig-shelf__title button:focus-visible),
.ig-rank-row:has(.ig-rank-row__name a:focus-visible),
.ig-recent-item:has(.ig-recent-item__name a:focus-visible),
.ig-guide:has(.ig-guide__title a:focus-visible),
.ig-pick:has(.ig-pick__name a:focus-visible),
.ig-aside__row:has(.ig-aside__value a:focus-visible) {
  outline: 3px solid var(--ig-line-strong);
  outline-offset: 2px;
}

/* 배너 칸은 넘김 영역(overflow: hidden)을 꽉 채워서 바깥 테두리가 잘린다 — 안쪽에 그린다 */
.ig-banner__slide:has(.ig-banner__title a:focus-visible) {
  outline: 3px solid var(--ig-line-strong);
  outline-offset: -5px;
}

@supports selector(:has(*)) {
  .ig-shelf__title a:focus-visible,
  .ig-shelf__title button:focus-visible,
  .ig-rank-row__name a:focus-visible,
  .ig-recent-item__name a:focus-visible,
  .ig-guide__title a:focus-visible,
  .ig-pick__name a:focus-visible,
  .ig-aside__value a:focus-visible,
  .ig-banner__title a:focus-visible {
    outline: none;
  }
}

.ig-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem 0.375rem;
}

.ig-card__price strong {
  font-size: var(--ig-text-xl);
  font-weight: var(--ig-weight-heavy);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ig-card__price span {
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-2xs);
}

.ig-card__price s {
  color: var(--ig-sub);
}

.ig-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.125rem 0.375rem;
  margin-top: auto;
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-2xs);
}

/* 힌트 + 평점은 언제나 한 줄 — 좁은 칸에서 두 줄로 접히면 그 카드만 막대가 위로 밀려 옆 카드와 어긋난다.
   시안의 `flex-wrap: wrap` 을 빼고 힌트만 말줄임으로 줄인다(평점은 그대로, 2026-09-20 §6-11) */
.ig-card__meta > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-card__meta > span + span {
  flex: none;
}

@media (min-width: 64em) {
  .ig-card__tag {
    left: 0.75rem;
    bottom: 0.75rem;
  }

  .ig-card__body {
    gap: 0.375rem;
    padding: 0.875rem 0.875rem 1rem;
  }

  .ig-card__brand {
    font-size: var(--ig-text-xs);
  }

  .ig-card__name {
    font-size: var(--ig-text-base);
    line-height: 1.45;
  }

  .ig-card__price strong {
    font-size: 1.375rem;
  }

  .ig-card__price span,
  .ig-card__meta {
    font-size: var(--ig-text-xs);
  }
}

/* 평소 대비 막대 */
.ig-gauge {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  padding-top: 0.4375rem;
  border-top: var(--ig-border) dashed var(--ig-line);
  font-family: var(--ig-font-mono);
}

/* 카드 안의 "평소 대비" 막대는 평점 줄과 함께 바닥에 붙인다 — 상품명이 한 줄이냐 두 줄이냐에 따라 막대 높이가
   카드마다 달라 보이던 것을 막는다(2026-09-20 사용자 결정, `docs/v4-port-plan.md` §6-11).
   평점 줄이 이미 `margin-top: auto`라 막대가 있을 때는 그 자리를 막대에 넘긴다(두 곳이 auto면 남는 자리를 나눠 갖는다) */
.ig-card__body > .ig-gauge {
  margin-top: auto;
}

.ig-card__body > .ig-gauge + .ig-card__meta {
  margin-top: 0;
}

.ig-gauge__top {
  display: flex;
  justify-content: space-between;
  gap: var(--ig-space-2);
  color: var(--ig-sub);
  font-size: var(--ig-text-2xs);
}

.ig-gauge__top b {
  color: var(--ig-ink);
  font-weight: var(--ig-weight-bold);
}

.ig-gauge__track {
  position: relative;
  height: 0.5rem;
  background: var(--ig-fill);
  border: var(--ig-border) solid var(--ig-line-strong);
}

.ig-gauge__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--value, 0%);
  background: var(--ig-signal);
  border-right: var(--ig-border) solid var(--ig-line-strong);
}

.ig-gauge--usual .ig-gauge__fill {
  background: var(--ig-muted);
}

.ig-gauge--up .ig-gauge__fill {
  background: var(--ig-up);
}

.ig-gauge--up .ig-gauge__top b {
  color: var(--ig-up);
}

@media (min-width: 64em) {
  .ig-gauge {
    gap: 0.375rem;
    padding-top: 0.5rem;
  }

  .ig-gauge__top {
    font-size: var(--ig-text-xs);
  }

  .ig-gauge__track {
    height: 0.625rem;
  }
}

/* 스켈레톤 (지연 로딩) */
.ig-skeleton {
  display: block;
  background: linear-gradient(90deg, var(--ig-fill) 0%, var(--ig-shimmer) 50%, var(--ig-fill) 100%);
  background-size: 200% 100%;
  animation: ig-shimmer 1.2s linear infinite;
}

.ig-skeleton--text {
  height: 0.75rem;
}

.ig-skeleton--line {
  height: 1rem;
}

.ig-skeleton--short {
  width: 45%;
}

.ig-skeleton--mid {
  width: 70%;
}

@keyframes ig-shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

/* 10. 랭킹 행 (홈 TOP 100 빠른 보기) ----------------------------------------- */
.ig-rank-list {
  display: flex;
  flex-direction: column;
}

.ig-rank-row {
  position: relative;
  display: grid;
  grid-template-columns: 1.75rem 4rem minmax(0, 1fr);
  column-gap: var(--ig-space-3);
  row-gap: var(--ig-space-1);
  align-items: start;
  padding: 0.875rem 0;
  border-bottom: var(--ig-border) dashed var(--ig-line);
}

.ig-rank-row__num {
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xl);
  font-weight: var(--ig-weight-bold);
  line-height: 1.2;
}

.ig-rank-row__thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background: var(--ig-fill);
}

.ig-rank-row__thumb .ig-ph {
  width: 2.75rem;
  height: 2.75rem;
}

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

.ig-rank-row__name {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--ig-text-md);
  font-weight: var(--ig-weight-medium);
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ig-rank-row__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ig-rank-row__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
}

.ig-rank-row__price {
  grid-column: 3;
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.ig-rank-row__price strong {
  font-size: var(--ig-text-lg);
  font-weight: var(--ig-weight-heavy);
  letter-spacing: -0.02em;
}

.ig-rank-row__price span {
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
}

@media (min-width: 64em) {
  .ig-rank-row {
    grid-template-columns: 2rem 4.5rem minmax(0, 1fr) auto;
    column-gap: var(--ig-space-4);
    padding: var(--ig-space-4) 0;
  }

  .ig-rank-row__num {
    font-size: var(--ig-text-2xl);
  }

  .ig-rank-row__thumb {
    width: 4.5rem;
    height: 4.5rem;
  }

  .ig-rank-row__name {
    font-size: var(--ig-text-base);
  }

  .ig-rank-row__price {
    grid-column: 4;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
  }

  .ig-rank-row__price strong {
    font-size: 1.1875rem;
  }
}

/* 11. 카테고리 선반 라벨 ------------------------------------------------------ */
.ig-shelves {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ig-space-2);
}

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

@media (min-width: 64em) {
  .ig-shelves--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ig-shelf {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: var(--ig-space-3) var(--ig-space-3) 0.875rem;
  background: var(--ig-paper);
  border: var(--ig-border) solid var(--ig-line);
  border-top: 4px solid var(--ig-line-strong);
}

.ig-shelf:hover {
  background: var(--ig-fill);
}

.ig-shelf__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ig-space-2);
  font-size: var(--ig-text-lg);
  font-weight: var(--ig-weight-heavy);
}

.ig-shelf__title a::after,
.ig-shelf__title button::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* 쿠팡 대분류 선반: 상품 목록이 없어 링크 대신 카테고리 메뉴의 그 분류를 여는 버튼 */
.ig-shelf__title button {
  text-align: left;
}

/* 대분류 아이콘(관리자 "카테고리 수정 → 아이콘", 비우면 category) — 이름이 남는 폭을 쓴다 */
.ig-shelf__title > a,
.ig-shelf__title > button {
  flex: 1;
  min-width: 0;
}

.ig-shelf__icon {
  font-size: 1.375rem;
}

.ig-shelf__subs {
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-2xs);
  line-height: 1.6;
}

@media (min-width: 64em) {
  .ig-shelf {
    padding: 0.875rem var(--ig-space-4) var(--ig-space-4);
  }

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

  .ig-shelf__subs {
    min-height: 3.2em;
    font-size: var(--ig-text-xs);
  }
}

/* 12. 배너 (관리자 등록 홈 배너) -------------------------------------------- */
.ig-banner {
  position: relative;
  background: var(--ig-paper);
  border: var(--ig-border-strong) solid var(--ig-line-strong);
}

.ig-banner__viewport {
  overflow: hidden;
}

.ig-banner__track {
  display: flex;
  transition: transform 360ms var(--ig-ease);
}

.ig-banner__slide {
  position: relative;
  display: grid;
  flex: 0 0 100%;
  grid-template-columns: minmax(0, 1fr) 6rem;
  gap: var(--ig-space-3);
  align-items: center;
  min-height: 8.5rem;
  padding: var(--ig-space-4) var(--ig-space-4) 3.25rem;
}

.ig-banner__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}

.ig-banner__title {
  font-size: var(--ig-text-xl);
  font-weight: var(--ig-weight-heavy);
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.ig-banner__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ig-banner__desc {
  color: var(--ig-sub);
  font-size: var(--ig-text-sm);
}

.ig-banner__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  background: var(--ig-fill);
}

.ig-banner__media .ig-ph {
  width: 3.75rem;
  height: 3.75rem;
}

.ig-banner__controls {
  position: absolute;
  left: var(--ig-space-2);
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
}

.ig-banner__count {
  min-width: 2.75rem;
  text-align: center;
  color: var(--ig-sub);
}

@media (min-width: 64em) {
  .ig-banner__slide {
    grid-template-columns: minmax(0, 1fr) 16.25rem;
    gap: var(--ig-space-8);
    min-height: 12.25rem;
    padding: var(--ig-space-6) var(--ig-space-8) 3.5rem;
  }

  .ig-banner__title {
    font-size: var(--ig-text-3xl);
  }

  .ig-banner__desc {
    font-size: var(--ig-text-base);
  }

  .ig-banner__media {
    width: 16.25rem;
    height: 8.75rem;
  }

  .ig-banner__media .ig-ph {
    width: 5.5rem;
    height: 5.5rem;
  }

  .ig-banner__controls {
    left: var(--ig-space-6);
  }
}

/* 이미지 없는 배너는 글자만 넓게 · 배너가 하나면 넘김 버튼 자리를 비워 두지 않는다 */
.ig-banner__slide--no-media {
  grid-template-columns: minmax(0, 1fr);
}

.ig-banner__slide:only-child {
  padding-bottom: var(--ig-space-4);
}

@media (min-width: 64em) {
  .ig-banner__slide:only-child {
    padding-bottom: var(--ig-space-6);
  }
}

/* 13. 가격 판단 블록 --------------------------------------------------------- */
.ig-verdict {
  --ig-hole: var(--ig-paper);
  background: var(--ig-paper);
  border: var(--ig-border-strong) solid var(--ig-line-strong);
}

.ig-verdict__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ig-space-2);
  padding: 0.625rem 0.875rem;
  background: var(--ig-signal);
  color: var(--ig-on-signal);
  border-bottom: var(--ig-border-strong) solid var(--ig-line-strong);
}

.ig-verdict__title {
  display: flex;
  align-items: center;
  gap: var(--ig-space-2);
  font-size: 1.0625rem;
  font-weight: var(--ig-weight-heavy);
  letter-spacing: -0.03em;
}

.ig-verdict__title .ig-icon {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2.6;
}

.ig-verdict__date {
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-2xs);
  white-space: nowrap;
}

.ig-verdict--usual .ig-verdict__head {
  background: var(--ig-fill);
  color: var(--ig-ink);
}

.ig-verdict--wait .ig-verdict__head {
  background: var(--ig-inverse);
  color: var(--ig-on-inverse);
}

/* 좋은 가격이 아닐 때는 노란색을 쓰지 않는다 */
.ig-verdict--usual .ig-range__fill,
.ig-verdict--wait .ig-range__fill {
  background: var(--ig-muted);
}

.ig-verdict--usual .ig-price-rows .is-now dd,
.ig-verdict--wait .ig-price-rows .is-now dd {
  background: var(--ig-fill);
  color: var(--ig-ink);
}

.ig-verdict__body {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 0.875rem 0.875rem var(--ig-space-4);
}

.ig-verdict__reason {
  font-size: var(--ig-text-md);
  line-height: 1.5;
}

.ig-verdict__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ig-space-1) var(--ig-space-2);
}

.ig-verdict__price strong {
  font-size: var(--ig-text-6xl);
  font-weight: var(--ig-weight-heavy);
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.ig-verdict__price span {
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
}

@media (min-width: 64em) {
  .ig-verdict__head {
    padding: var(--ig-space-3) 1.125rem;
  }

  .ig-verdict__title {
    font-size: var(--ig-text-2xl);
  }

  .ig-verdict__title .ig-icon {
    width: 1.375rem;
    height: 1.375rem;
  }

  .ig-verdict__date {
    font-size: var(--ig-text-xs);
  }

  .ig-verdict__body {
    gap: var(--ig-space-4);
    padding: 1.125rem 1.125rem var(--ig-space-5);
  }

  .ig-verdict__reason {
    font-size: var(--ig-text-lg);
  }

  .ig-verdict__price strong {
    font-size: var(--ig-text-7xl);
    line-height: 1;
  }

  .ig-verdict__price span {
    font-size: var(--ig-text-sm);
  }
}

/* 최저~평소 사이 현재 위치 막대 */
.ig-range {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-top: 0.375rem;
}

.ig-range__track {
  position: relative;
  height: 0.75rem;
  background: var(--ig-fill);
  border: var(--ig-border) solid var(--ig-line-strong);
}

.ig-range__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pos, 0%);
  background: var(--ig-signal);
  border-right: var(--ig-border) solid var(--ig-line-strong);
}

.ig-range__marker {
  position: absolute;
  left: var(--pos, 0%);
  top: -0.4375rem;
  bottom: -0.4375rem;
  width: 3px;
  margin-left: -1.5px;
  background: var(--ig-line-strong);
}

.ig-range__caps {
  display: flex;
  justify-content: space-between;
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-2xs);
}

@media (min-width: 64em) {
  .ig-range__track {
    height: 0.875rem;
  }

  .ig-range__caps {
    font-size: var(--ig-text-xs);
  }
}

/* 지금 · 역대 최저 · 평소 가격 한 줄씩 */
.ig-price-rows > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ig-space-3);
  padding: var(--ig-space-2) 0;
  border-top: var(--ig-border) solid var(--ig-line-soft);
  font-size: var(--ig-text-md);
}

.ig-price-rows dd {
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-base);
  font-weight: var(--ig-weight-bold);
  font-variant-numeric: tabular-nums;
}

.ig-price-rows .is-now dd {
  padding: 0.0625rem 0.375rem;
  background: var(--ig-signal);
  color: var(--ig-on-signal);
}

@media (min-width: 64em) {
  .ig-price-rows > div {
    padding: 0.625rem 0;
    font-size: var(--ig-text-base);
  }

  .ig-price-rows dd {
    font-size: 1.0625rem;
  }
}

/* 제휴 고지 (상세 상단 고정 위치) */
.ig-disclosure {
  display: flex;
  align-items: flex-start;
  gap: var(--ig-space-2);
  padding: 0.625rem var(--ig-space-3);
  background: var(--ig-paper);
  border: var(--ig-border) solid var(--ig-line);
  color: var(--ig-sub);
  font-size: var(--ig-text-xs);
  line-height: 1.55;
}

.ig-disclosure .ig-icon {
  width: 1rem;
  height: 1rem;
  margin-top: 0.0625rem;
}

@media (min-width: 64em) {
  .ig-disclosure {
    align-items: center;
    padding: 0.625rem 0.875rem;
    font-size: var(--ig-text-sm);
  }
}

/* 14. 가격 차트 ------------------------------------------------------------ */
.ig-chart {
  display: flex;
  min-width: 0; /* 가로 → 세로 회전 시 캔버스의 이전 너비가 그리드를 늘리지 않게 한다. */
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.875rem 0.875rem 0.625rem;
  background: var(--ig-paper);
  border: var(--ig-border) solid var(--ig-line);
}

.ig-chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ig-space-1) var(--ig-space-2);
}

.ig-chart__title {
  font-size: var(--ig-text-lg);
  font-weight: var(--ig-weight-heavy);
  letter-spacing: -0.03em;
}

.ig-chart__change {
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-sm);
  font-weight: var(--ig-weight-bold);
}

.ig-chart__change span {
  color: var(--ig-sub);
  font-weight: var(--ig-weight-regular);
}

.ig-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-2xs);
}

.ig-chart__legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.ig-chart__legend i {
  display: inline-block;
  width: 1.125rem;
  height: 0;
  border-top: 2.5px solid var(--ig-line-strong);
}

.ig-chart__legend .is-usual {
  border-top: 1.5px dashed var(--ig-muted);
}

.ig-chart__legend .is-low {
  border-top: 1.5px dotted var(--ig-line-strong);
}

/* 시안은 모양 참고용 SVG를 넣어 뒀고, 운영은 같은 자리에 Chart.js `<canvas>`를 그린다 */
.ig-chart svg,
.ig-chart canvas {
  width: 100%;
  height: auto;
  overflow: visible;
}

.ig-chart__svg--lg {
  display: none;
}

@media (min-width: 64em) {
  .ig-chart {
    gap: var(--ig-space-3);
    padding: var(--ig-space-5) var(--ig-space-5) var(--ig-space-4);
  }

  .ig-chart__title {
    font-size: 1.375rem;
  }

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

  .ig-chart__legend {
    font-size: var(--ig-text-xs);
  }

  .ig-chart__svg--sm {
    display: none;
  }

  .ig-chart__svg--lg {
    display: block;
  }
}

.ig-chart__grid {
  fill: none;
  stroke: var(--ig-line-soft);
  stroke-width: 1;
}

.ig-chart__base {
  fill: none;
  stroke: var(--ig-line-strong);
  stroke-width: 1.5;
}

.ig-chart__area {
  fill: var(--ig-ink);
  fill-opacity: 0.05;
}

.ig-chart__usual {
  fill: none;
  stroke: var(--ig-muted);
  stroke-width: 1.2;
  stroke-dasharray: 6 5;
}

.ig-chart__low {
  fill: none;
  stroke: var(--ig-line-strong);
  stroke-width: 1.2;
  stroke-dasharray: 2 4;
}

.ig-chart__line {
  fill: none;
  stroke: var(--ig-line-strong);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.ig-chart__dot {
  fill: var(--ig-signal);
  stroke: var(--ig-line-strong);
  stroke-width: 2.5;
}

.ig-chart__label {
  fill: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: 0.6875rem;
}

.ig-chart__label--strong {
  fill: var(--ig-ink);
  font-size: 0.8125rem;
  font-weight: var(--ig-weight-bold);
}

/* 15. 리뷰 요약 ------------------------------------------------------------ */
.ig-review {
  display: flex;
  flex-direction: column;
  gap: var(--ig-space-3);
}

.ig-review__top {
  display: grid;
  gap: var(--ig-space-3);
}

@media (min-width: 64em) {
  .ig-review {
    gap: var(--ig-space-5);
  }

  .ig-review__top {
    grid-template-columns: 23.75rem minmax(0, 1fr);
    gap: var(--ig-space-5);
  }
}

.ig-quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.625rem;
  padding: 1.125rem var(--ig-space-4) var(--ig-space-5);
  background: var(--ig-inverse);
  color: var(--ig-on-inverse);
}

.ig-quote__label {
  color: var(--ig-signal);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-2xs);
}

.ig-quote__text {
  font-size: 1.3125rem;
  font-weight: var(--ig-weight-heavy);
  line-height: 1.45;
  letter-spacing: -0.03em;
}

.ig-quote__more {
  color: var(--ig-on-inverse-sub);
  font-size: var(--ig-text-sm);
  line-height: 1.7;
}

@media (min-width: 64em) {
  .ig-quote {
    gap: 1.125rem;
    padding: 1.875rem 2.125rem;
  }

  .ig-quote__label {
    font-size: var(--ig-text-xs);
  }

  .ig-quote__text {
    font-size: var(--ig-text-5xl);
    line-height: 1.4;
  }

  .ig-quote__more {
    max-width: 44em;
    font-size: var(--ig-text-base);
    line-height: var(--ig-leading-relaxed);
  }
}

/* 2px 테두리 패널 (REVIEW CHECK 등) */
.ig-panel {
  --ig-hole: var(--ig-paper);
  background: var(--ig-paper);
  border: var(--ig-border-strong) solid var(--ig-line-strong);
}

.ig-panel__strip {
  display: flex;
  justify-content: space-between;
  gap: var(--ig-space-2);
  padding: var(--ig-space-2) 0.875rem;
  border-bottom: var(--ig-border-strong) solid var(--ig-line-strong);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-2xs);
}

.ig-panel__strip span + span {
  color: var(--ig-sub);
}

.ig-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--ig-space-3);
  padding: 0.875rem;
}

@media (min-width: 64em) {
  .ig-panel__strip {
    padding: 0.625rem 1.125rem;
    font-size: var(--ig-text-xs);
  }

  .ig-panel__body {
    gap: 0.875rem;
    padding: 1.125rem;
  }
}

.ig-rating {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.ig-rating strong {
  font-size: 2.5rem;
  font-weight: var(--ig-weight-heavy);
  line-height: 1;
  letter-spacing: -0.04em;
}

.ig-rating span {
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-sm);
}

.ig-rating em {
  margin-left: auto;
  color: var(--ig-sub);
  font-size: var(--ig-text-xs);
  font-style: normal;
}

@media (min-width: 64em) {
  .ig-rating strong {
    font-size: 3.5rem;
  }

  .ig-rating span {
    font-size: var(--ig-text-base);
  }

  .ig-rating em {
    font-size: var(--ig-text-sm);
  }
}

.ig-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

@media (min-width: 64em) {
  .ig-keywords {
    gap: var(--ig-space-2);
  }
}

/* 좋게 말한 키워드와 아쉬운 키워드는 줄을 나눠 보여준다 */
.ig-keyword-groups {
  display: flex;
  flex-direction: column;
  gap: var(--ig-space-2);
}

/* 좋아요 · 아쉬워요 상자 */
.ig-box {
  background: var(--ig-paper);
  border: var(--ig-border-strong) solid var(--ig-line-strong);
}

.ig-box__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ig-space-2);
  padding: 0.625rem 0.875rem;
  background: var(--ig-signal);
  color: var(--ig-on-signal);
  border-bottom: var(--ig-border-strong) solid var(--ig-line-strong);
}

.ig-box__head strong,
.ig-box__head h3 {
  font-size: var(--ig-text-lg);
  font-weight: var(--ig-weight-heavy);
}

.ig-box__head span {
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-2xs);
}

.ig-box--inverse .ig-box__head {
  background: var(--ig-inverse);
  color: var(--ig-on-inverse);
}

.ig-box--inverse .ig-box__head span {
  color: var(--ig-on-inverse-sub);
}

.ig-box__rows {
  padding: 0.125rem 0.875rem 0.25rem;
}

@media (min-width: 64em) {
  .ig-box__head {
    padding: var(--ig-space-3) 1.125rem;
  }

  .ig-box__head strong,
  .ig-box__head h3 {
    font-size: var(--ig-text-xl);
  }

  .ig-box__head span {
    font-size: var(--ig-text-xs);
  }

  .ig-box__rows {
    padding: 0.25rem 1.125rem 0.375rem;
  }
}

.ig-rv-row {
  display: grid;
  grid-template-columns: 0.875rem minmax(0, 1fr);
  gap: var(--ig-space-2);
  padding: 0.625rem 0;
  border-top: var(--ig-border) solid var(--ig-line-soft);
  font-size: var(--ig-text-md);
  line-height: 1.55;
}

.ig-rv-row:first-child {
  border-top: 0;
}

.ig-rv-row b {
  font-family: var(--ig-font-mono);
  font-weight: var(--ig-weight-bold);
}

.ig-rv-row strong {
  font-weight: var(--ig-weight-heavy);
}

@media (min-width: 64em) {
  .ig-rv-row {
    grid-template-columns: 1rem minmax(0, 1fr);
    gap: 0.625rem;
    padding: var(--ig-space-3) 0;
    font-size: var(--ig-text-base);
    line-height: var(--ig-leading-normal);
  }
}

/* 이런 분께 추천 · 사기 전에 알아두세요 */
.ig-notes {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.875rem 0;
  border-top: var(--ig-border) dashed var(--ig-line-strong);
  border-bottom: var(--ig-border) dashed var(--ig-line-strong);
}

.ig-notes__label {
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-2xs);
}

.ig-note {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  gap: var(--ig-space-2);
  font-size: var(--ig-text-md);
  line-height: 1.55;
}

.ig-note .ig-icon {
  width: 1rem;
  height: 1rem;
  margin-top: 0.1875rem;
}

@media (min-width: 64em) {
  .ig-notes {
    gap: var(--ig-space-3);
    padding: 1.125rem 0;
  }

  .ig-notes__label {
    font-size: var(--ig-text-xs);
  }

  .ig-note {
    grid-template-columns: 1.25rem minmax(0, 1fr);
    font-size: var(--ig-text-base);
    line-height: var(--ig-leading-normal);
  }

  .ig-note .ig-icon {
    width: 1.125rem;
    height: 1.125rem;
  }
}

.ig-split {
  display: grid;
  gap: var(--ig-space-3);
}

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

/* 16. 추천 상품 ------------------------------------------------------------ */
/* 상세 "함께 보면 좋은" — 목록과 같은 .ig-card(product_card 파셜)를 좌우 스크롤 한 줄에 담는다.
   시안 detail.html의 작은 .ig-reco 카드(150px 고정 · 1024px부터 5열 격자 · 추천 이유 칩 .ig-why)는 2026-09-20 사용자 결정으로
   뺐다(docs/v4-port-plan.md §6-11). 휴대폰은 한 화면에 2장, 태블릿은 3장, 데스크톱은 최대 4장 —
   이고 최소 너비 아래로는 줄지 않으며, 나머지 카드는 옆으로 밀어 본다 */
.ig-recos {
  display: flex;
  gap: 0.625rem;
  /* 위 6px(바깥 여백 -4px)는 카드 초점 테두리가 스크롤 영역에 잘리지 않게 두는 자리 */
  margin: -4px calc(var(--ig-gutter) * -1) -2px;
  padding: 6px var(--ig-gutter);
  overflow-x: auto;
  /* 카드마다 강제로 멈추지 않고 브라우저의 기본 관성 스크롤을 사용한다. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.ig-recos::-webkit-scrollbar {
  display: none;
}

.ig-recos > li {
  display: grid; /* 카드가 칸 높이 · 너비를 꽉 채우게 */
  flex: 0 0 calc((100% - 0.625rem) / 2);
  min-width: 10rem; /* 이보다 좁으면 두 줄 상품명 · 7자리 가격이 안 들어간다(.ig-products 의 17.5em 규칙과 같은 이유) */
}

@media (min-width: 48em) {
  .ig-recos {
    gap: var(--ig-space-4);
  }

  .ig-recos > li {
    flex-basis: calc((100% - var(--ig-space-4) * 2) / 3);
  }
}

@media (min-width: 64em) {
  .ig-recos {
    gap: var(--ig-space-5);
  }

  .ig-recos > li {
    flex-basis: calc((100% - var(--ig-space-5) * 3) / 4);
  }
}

/* 17. 필터 · 툴바 · 더 보기 --------------------------------------------------- */
.ig-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ig-space-2);
}

.ig-toolbar__group {
  display: flex;
  flex-wrap: wrap; /* 320px 화면에서 필터 버튼 · 정렬이 한 줄에 안 들어가면 내려간다 */
  align-items: center;
  gap: var(--ig-space-2);
}

.ig-count {
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-sm);
}

.ig-count strong {
  color: var(--ig-ink);
}

.ig-toolbar__label {
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-sm);
  white-space: nowrap;
}

.ig-filter {
  display: flex;
  flex-direction: column;
  background: var(--ig-paper);
  border: var(--ig-border-strong) solid var(--ig-line-strong);
}

.ig-filter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ig-space-2);
  min-height: 3rem;
  padding: 0 var(--ig-space-2) 0 0.875rem;
  border-bottom: var(--ig-border-strong) solid var(--ig-line-strong);
  font-weight: var(--ig-weight-heavy);
}

.ig-filter__title {
  flex: 1;
  font-size: var(--ig-text-lg);
  font-weight: var(--ig-weight-heavy);
}

.ig-filter__body {
  display: flex;
  flex-direction: column;
}

.ig-filter__group {
  display: flex;
  flex-direction: column;
  gap: var(--ig-space-2);
  padding: 0.875rem;
  border-bottom: var(--ig-border) dashed var(--ig-line);
}

.ig-filter__group-title {
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
  font-weight: var(--ig-weight-bold);
}

.ig-filter__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ig-space-2);
  padding: 0.875rem;
}

.ig-filter__notice {
  flex-basis: 100%;
  color: var(--ig-sub);
  font-size: var(--ig-text-sm);
}

.ig-filter__notice:empty {
  display: none;
}

.ig-filter__foot .ig-btn {
  flex: 1;
}

/* 이전 · 다음 (커서 페이지 이동) */
.ig-pager {
  display: flex;
  justify-content: center;
  gap: var(--ig-space-2);
  padding-top: var(--ig-space-8);
}

.ig-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: min(7.5rem, calc(50% - var(--ig-space-1))); /* 두 버튼이 한 줄에 들어가게 */
  min-height: var(--ig-tap);
  padding: 0 var(--ig-space-4);
  background: var(--ig-paper);
  border: var(--ig-border-strong) solid var(--ig-line-strong);
  color: var(--ig-ink);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-sm);
  font-weight: var(--ig-weight-bold);
}

.ig-pager__btn:hover {
  background: var(--ig-fill);
}

.ig-pager__btn[aria-disabled="true"] {
  background: transparent;
  border-color: var(--ig-line);
  color: var(--ig-sub);
  cursor: not-allowed;
}

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

/* 라디오 선택지 (가격 상태 등 하나만 고르기) */
.ig-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.ig-choice {
  position: relative;
  display: inline-flex;
}

.ig-choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ig-choice span {
  display: inline-flex;
  align-items: center;
  min-height: var(--ig-tap);
  padding: 0 var(--ig-space-3);
  background: var(--ig-paper);
  border: var(--ig-border) solid var(--ig-line);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-sm);
  white-space: nowrap;
}

.ig-choice input:checked + span {
  background: var(--ig-ink);
  border-color: var(--ig-ink);
  color: var(--ig-paper);
  font-weight: var(--ig-weight-bold);
}

.ig-choice input:focus-visible + span {
  outline: 3px solid var(--ig-line-strong);
  outline-offset: 2px;
}

.ig-check__count {
  margin-left: auto;
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
}

/* 최근 검색어 칩 (홈) — 최대 5개(최근 것부터). 한 줄에 두고 넘치면 목록만 옆으로 밀며 넘친 쪽 끝을 흐리게 하고
   (app.js가 data-overflow = start · end · both), 긴 검색어는 말줄임. “전체 삭제”는 목록 밖에 두어 늘 보인다 */
.ig-recent-searches {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.ig-recent-searches__label {
  flex: 0 0 auto;
  margin-right: 0.25rem;
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
  white-space: nowrap;
}

.ig-recent-searches__list {
  display: flex;
  flex: 0 1 auto;
  gap: 0.375rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 2.5rem;
  scrollbar-width: none;
}

.ig-recent-searches__list::-webkit-scrollbar {
  display: none;
}

/* 카테고리와 최근 검색어의 가로 스크롤에 같은 가장자리 표시를 쓴다. */
.ig-chips--scroll[data-overflow="end"],
.ig-recent-searches__list[data-overflow="end"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}

.ig-chips--scroll[data-overflow="start"],
.ig-recent-searches__list[data-overflow="start"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem);
  mask-image: linear-gradient(to right, transparent, #000 2.5rem);
}

.ig-chips--scroll[data-overflow="both"],
.ig-recent-searches__list[data-overflow="both"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}

.ig-recent-searches__clear {
  flex: 0 0 auto;
  min-height: var(--ig-tap);
  padding: 0 var(--ig-space-2);
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

.ig-recent-searches__clear:hover {
  color: var(--ig-ink);
}

/* 휴대폰: 라벨 · 전체 삭제를 윗줄에 두고 목록은 아랫줄 폭을 다 쓴다 */
@media (max-width: 47.99875em) {
  .ig-recent-searches {
    display: grid;
    grid-template-areas: "label clear" "list list";
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 0.125rem;
  }

  .ig-recent-searches__label {
    grid-area: label;
  }

  .ig-recent-searches__clear {
    grid-area: clear;
  }

  .ig-recent-searches__list {
    grid-area: list;
  }
}

.ig-term {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: stretch;
  background: var(--ig-paper);
  border: var(--ig-border) solid var(--ig-line);
}

.ig-term a {
  display: block;
  max-width: 11em;
  overflow: hidden;
  padding: 0 0.25rem 0 var(--ig-space-3);
  font-size: var(--ig-text-sm);
  line-height: calc(var(--ig-tap) - 2 * var(--ig-border));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-term a:hover {
  text-decoration: underline;
}

.ig-term button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  color: var(--ig-sub);
}

.ig-term button:hover {
  background: var(--ig-fill);
  color: var(--ig-ink);
}

.ig-term button .ig-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* 영수증 안의 링크 줄 · 버튼 */
.ig-lead--link {
  padding: 0.625rem 0;
  margin: -0.625rem 0;
  color: var(--ig-ink);
}

.ig-lead--link:hover > span:last-child {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ig-receipt__paper .ig-btn {
  font-family: var(--ig-font-sans);
}

/* 가격 신호 (상세) */
.ig-signals {
  display: flex;
  flex-direction: column;
}

.ig-signal {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.625rem;
  padding: var(--ig-space-3) 0;
  border-top: var(--ig-border) dashed var(--ig-line);
}

.ig-signal:first-child {
  padding-top: 0;
  border-top: 0;
}

.ig-signal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--ig-fill);
  color: var(--ig-ink);
}

.ig-signal__icon .ig-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.ig-signal__icon--good {
  background: var(--ig-signal);
  color: var(--ig-on-signal);
}

.ig-signal__icon--up {
  color: var(--ig-up);
}

.ig-signal__title {
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-md);
  font-weight: var(--ig-weight-bold);
  line-height: 1.4;
}

.ig-signal__desc {
  margin-top: 0.125rem;
  color: var(--ig-sub);
  font-family: var(--ig-font-sans);
  font-size: var(--ig-text-sm);
  line-height: 1.55;
}

@media (min-width: 64em) {
  .ig-signal__title {
    font-size: var(--ig-text-base);
  }
}

/* 리뷰 키워드: 부정 */
.ig-tag--minus {
  background: var(--ig-fill);
  color: var(--ig-up);
}

/* AI 리뷰 준비 중 */
.ig-pending {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--ig-space-3);
  padding: var(--ig-space-4);
  background: var(--ig-paper);
  border: var(--ig-border-strong) dashed var(--ig-line);
}

.ig-pending__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--ig-fill);
}

.ig-pending__title {
  font-size: var(--ig-text-lg);
  font-weight: var(--ig-weight-heavy);
}

.ig-pending__desc {
  margin-top: 0.125rem;
  color: var(--ig-sub);
  font-size: var(--ig-text-md);
}

/* 확인창 */
.ig-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: calc(var(--ig-z-toast) - 1);
  width: min(22.5rem, calc(100% - var(--ig-space-8)));
  background: var(--ig-paper);
  border: var(--ig-border-strong) solid var(--ig-line-strong);
  box-shadow: var(--ig-shadow-pop);
  transform: translate(-50%, -50%);
}

.ig-dialog__body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: var(--ig-space-5) var(--ig-space-5) var(--ig-space-4);
}

.ig-dialog__title {
  font-size: var(--ig-text-xl);
  font-weight: var(--ig-weight-heavy);
  line-height: 1.35;
}

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

.ig-dialog__actions {
  display: flex;
  gap: var(--ig-space-2);
  padding: 0 var(--ig-space-5) var(--ig-space-5);
}

.ig-dialog__actions .ig-btn {
  flex: 1;
}

.ig-scrim--top {
  z-index: calc(var(--ig-z-toast) - 2);
}

/* 쇼핑 가이드: 비교 카드 · 상품 블록 · 상황별 추천 · 관련 가이드 */
.ig-compare {
  display: grid;
  gap: 0.625rem;
}

@media (min-width: 48em) {
  .ig-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ig-space-4);
  }
}

.ig-pick__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ig-space-2);
}

.ig-pick__rank {
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-sm);
  font-weight: var(--ig-weight-bold);
}

.ig-pick__price {
  font-size: var(--ig-text-xl);
  font-weight: var(--ig-weight-heavy);
}

.ig-pick__meta {
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
}

.ig-tag--premium {
  background: var(--ig-inverse);
  color: var(--ig-on-inverse);
}

.ig-tag--value {
  background: var(--ig-fill);
  color: var(--ig-ink);
}

/* 쇼핑 가이드 배지: 민감 · 케어 */
.ig-tag--care {
  background: var(--ig-sub);
  color: var(--ig-paper);
}

.ig-gitem {
  --ig-hole: var(--ig-fill);
  display: grid;
  gap: 0.875rem;
  padding: var(--ig-space-6) 0;
  border-top: var(--ig-border-strong) solid var(--ig-line-strong);
}

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

.ig-gitem__media .ig-ph {
  width: 30%;
  height: 60%;
}

.ig-gitem__badge {
  position: absolute;
  left: var(--ig-space-3);
  top: var(--ig-space-3);
  padding: 0.1875rem 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-gitem__body {
  --ig-hole: var(--ig-ground);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ig-space-2);
  min-width: 0;
}

.ig-gitem__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ig-space-2);
}

.ig-gitem__rank {
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xl);
  font-weight: var(--ig-weight-bold);
}

.ig-gitem__name {
  font-size: var(--ig-text-2xl);
  font-weight: var(--ig-weight-heavy);
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.ig-gitem__brand {
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
}

.ig-gitem__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem var(--ig-space-2);
}

.ig-gitem__price strong {
  font-size: 1.375rem;
  font-weight: var(--ig-weight-heavy);
}

.ig-gitem__price span {
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-sm);
}

.ig-gitem__rating {
  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-gitem__note {
  align-self: stretch;
  padding: 0.625rem var(--ig-space-3);
  background: var(--ig-fill);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-sm);
}

.ig-gitem__review {
  font-size: var(--ig-text-base);
  line-height: 1.7;
}

@media (min-width: 48em) {
  .ig-gitem {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--ig-space-6);
  }

  .ig-gitem__media {
    aspect-ratio: 1 / 1;
  }
}

@media (min-width: 64em) {
  .ig-gitem__name {
    font-size: var(--ig-text-3xl);
  }
}

.ig-aside {
  display: flex;
  flex-direction: column;
  background: var(--ig-paper);
  border: var(--ig-border-strong) solid var(--ig-line-strong);
}

.ig-aside__head {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.875rem var(--ig-space-4);
  border-bottom: var(--ig-border-strong) solid var(--ig-line-strong);
}

.ig-aside__title {
  font-size: var(--ig-text-xl);
  font-weight: var(--ig-weight-heavy);
}

.ig-aside__rows {
  padding: 0 var(--ig-space-4);
}

.ig-aside__row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: var(--ig-space-3) 0;
  border-bottom: var(--ig-border) dashed var(--ig-line);
}

.ig-aside__row:last-child {
  border-bottom: 0;
}

.ig-aside__label {
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
}

.ig-aside__value {
  font-size: var(--ig-text-base);
  font-weight: var(--ig-weight-bold);
  line-height: 1.45;
}

.ig-aside__value a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ig-aside__foot {
  padding: 0 var(--ig-space-4) var(--ig-space-4);
}

/* .ig-guide(바탕 paper)가 뒤에 선언돼 있어 두 클래스로 덮는다 — 한 클래스면 라이트에서 흰 바탕에 흰 글자가 된다 */
.ig-guide.ig-guide--all {
  justify-content: center;
  background: var(--ig-inverse);
  border-color: var(--ig-inverse);
  color: var(--ig-on-inverse);
}

.ig-guide--all .ig-guide__body {
  justify-content: center;
  min-height: 11.25rem;
}

.ig-guide--all .ig-eyebrow,
.ig-guide--all .ig-guide__meta {
  color: var(--ig-on-inverse-sub);
}

.ig-prose {
  max-width: 44em;
  font-size: var(--ig-text-lg);
  line-height: 1.8;
}

/* 18. 상태 화면 (빈 결과 · 오류 · 404) ---------------------------------------- */
.ig-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ig-space-3);
  padding: var(--ig-space-12) var(--ig-space-4);
  background: var(--ig-paper);
  border: var(--ig-border-strong) dashed var(--ig-line);
  text-align: center;
}

.ig-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background: var(--ig-fill);
}

.ig-state__icon .ig-icon {
  width: 2rem;
  height: 2rem;
  stroke-width: 1.8;
}

.ig-state__code {
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
  color: var(--ig-sub);
}

.ig-state__title {
  font-size: var(--ig-text-xl);
  font-weight: var(--ig-weight-heavy);
  line-height: 1.35;
}

.ig-state__desc {
  max-width: 32em;
  color: var(--ig-sub);
  font-size: var(--ig-text-md);
}

.ig-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ig-space-2);
  margin-top: var(--ig-space-1);
}

@media (min-width: 64em) {
  .ig-state {
    padding: 4.5rem var(--ig-space-6);
  }

  .ig-state__title {
    font-size: 1.375rem;
  }

  .ig-state__desc {
    font-size: var(--ig-text-base);
  }
}

/* 19. 오버레이: 시트 · 서랍 · 딤 ------------------------------------------------ */
.ig-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--ig-z-scrim);
  background: var(--ig-scrim);
}

.ig-sheet {
  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-sheet__head {
  display: flex;
  align-items: center;
  gap: var(--ig-space-2);
  min-height: 3.75rem;
  padding: var(--ig-space-2) 0.375rem var(--ig-space-2) var(--ig-gutter);
  background: var(--ig-paper);
  border-bottom: var(--ig-border-strong) solid var(--ig-line-strong);
}

.ig-sheet__title {
  flex: 1;
  font-size: var(--ig-text-xl);
  font-weight: var(--ig-weight-heavy);
}

.ig-sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--ig-space-4) var(--ig-gutter);
}

.ig-sheet__foot {
  display: flex;
  gap: var(--ig-space-2);
  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);
}

.ig-sheet__foot .ig-btn {
  flex: 1;
}

@media (min-width: 48em) {
  .ig-sheet--side {
    inset: 0 0 0 auto;
    width: 26.25rem;
    border-left: var(--ig-border-strong) solid var(--ig-line-strong);
  }
}

/* 최근 본 상품 서랍 (항목 전체가 링크, 항목별 삭제 없음) */
.ig-recent-filters {
  margin-bottom: var(--ig-space-4);
}

.ig-recent-item {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--ig-space-3);
  align-items: center;
  padding: var(--ig-space-3) 0;
  border-bottom: var(--ig-border) dashed var(--ig-line);
}

.ig-recent-item:hover .ig-recent-item__name {
  text-decoration: underline;
}

.ig-recent-item__meta {
  color: var(--ig-sub);
  font-size: var(--ig-text-xs);
}

.ig-recent-item__thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background: var(--ig-fill);
}

.ig-recent-item__thumb .ig-ph {
  width: 2.5rem;
  height: 2.5rem;
}

.ig-recent-item__info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.ig-recent-item__brand {
  overflow: hidden;
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-2xs);
  text-overflow: ellipsis;
  white-space: nowrap; /* 긴 브랜드가 줄바꿈돼 옆 카드와 상품명 · 가격 줄이 어긋나지 않게 한 줄로 */
}

.ig-recent-item__name {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--ig-text-md);
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ig-recent-item__name a::after {
  content: "";
  position: absolute;
  inset: 0 var(--ig-tap) 0 0;
}

.ig-recent-item--full-name .ig-recent-item__name {
  display: block;
  overflow: visible;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset;
}

.ig-recent-item .ig-icon-btn {
  position: relative;
  z-index: 1;
}

/* 20. 카테고리 메뉴 --------------------------------------------------------- */
.ig-catmenu {
  position: fixed;
  inset: 0;
  z-index: var(--ig-z-overlay);
  display: flex;
  flex-direction: column;
  background: var(--ig-paper);
}

.ig-catmenu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.75rem;
  padding: 0 0.375rem 0 var(--ig-gutter);
  border-bottom: var(--ig-border-strong) solid var(--ig-line-strong);
}

.ig-catmenu__title {
  display: flex;
  align-items: center;
  gap: var(--ig-space-2);
  font-size: var(--ig-text-xl);
  font-weight: var(--ig-weight-heavy);
}

/* 판매처 탭(올리브영 · 쿠팡): 아래 카테고리 트리를 바꾸는 스위치라 제목 바로 옆에 붙이고,
   남는 자리는 닫기 버튼 앞에 둬서 닫기를 잘못 누르지 않게 떨어뜨린다 */
.ig-catmenu__sellers {
  margin-left: var(--ig-space-4);
  margin-right: auto;
}

.ig-catmenu__sellers .ig-seg__item {
  padding: 0 var(--ig-space-3);
}

@media (max-width: 22.4375em) {
  .ig-catmenu__title .ig-icon {
    display: none;
  }
}

.ig-catmenu__panes {
  display: grid;
  flex: 1;
  grid-template-columns: 8rem minmax(0, 1fr);
  min-height: 0;
}

.ig-catmenu__tops {
  overflow-y: auto;
  background: var(--ig-ground);
  border-right: var(--ig-border) solid var(--ig-line);
}

.ig-catmenu__top {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 3.25rem;
  padding: 0 var(--ig-space-3);
  border-bottom: var(--ig-border) solid var(--ig-line-soft);
  color: var(--ig-sub);
  font-size: var(--ig-text-md);
  font-weight: var(--ig-weight-bold);
  text-align: left;
}

/* 지금 보고 있는 대분류(aria-current): 바탕 차이(1.1:1)만으로는 구분이 안 돼 왼쪽에 잉크 막대를 더한다 */
.ig-catmenu__top[aria-current="true"] {
  margin-right: -1px;
  background: var(--ig-paper);
  box-shadow: inset 4px 0 0 var(--ig-line-strong);
  color: var(--ig-ink);
  font-weight: var(--ig-weight-heavy);
}

/* 대분류 열은 세로 스크롤 영역이라 바깥 테두리가 잘린다 — 안쪽에 그린다 */
.ig-catmenu__top:focus-visible {
  outline-offset: -3px;
}

.ig-catmenu__subs {
  overflow-y: auto;
  padding: var(--ig-space-2) var(--ig-gutter) var(--ig-space-6);
}

/* 모바일은 모든 분류를 이어 붙인다 — 스크롤을 따라 왼쪽 대분류 표시가 바뀐다(app.js) */
.ig-catmenu__group + .ig-catmenu__group {
  margin-top: var(--ig-space-6);
}

.ig-catmenu__group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.25rem;
  border-bottom: var(--ig-border-strong) solid var(--ig-line-strong);
  font-size: var(--ig-text-lg);
  font-weight: var(--ig-weight-heavy);
}

.ig-catmenu__links a {
  display: flex;
  align-items: center;
  min-height: var(--ig-tap);
  border-bottom: var(--ig-border) solid var(--ig-line-soft);
  font-size: var(--ig-text-md);
}

.ig-catmenu__links a:hover {
  text-decoration: underline;
}

@media (min-width: 64em) {
  .ig-catmenu {
    top: var(--ig-header-height);
    bottom: auto;
    max-height: calc(100vh - var(--ig-header-height));
    border-bottom: var(--ig-border-strong) solid var(--ig-line-strong);
    box-shadow: var(--ig-shadow-pop);
  }

  .ig-catmenu__head {
    width: 100%;
    max-width: calc(var(--ig-container) + var(--ig-gutter) * 2);
    margin: 0 auto;
    border-bottom: 0;
  }

  .ig-catmenu__panes {
    display: block;
    overflow-y: auto;
    border-top: var(--ig-border) solid var(--ig-line);
  }

  .ig-catmenu__tops {
    display: none;
  }

  .ig-catmenu__subs {
    max-width: calc(var(--ig-container) + var(--ig-gutter) * 2);
    margin: 0 auto;
    padding: var(--ig-space-6) var(--ig-gutter) var(--ig-space-8);
    overflow: visible;
    columns: 6 10.625rem;
    column-gap: var(--ig-space-8);
  }

  .ig-catmenu__group,
  .ig-catmenu__group + .ig-catmenu__group {
    margin-top: 0;
    margin-bottom: var(--ig-space-5);
    break-inside: avoid;
  }

  .ig-catmenu__group-title {
    min-height: 2.5rem;
    font-size: var(--ig-text-base);
  }

  .ig-catmenu__links a {
    min-height: 2rem;
    border-bottom: 0;
    color: var(--ig-sub);
    font-size: var(--ig-text-md);
  }

  .ig-catmenu__links a:hover {
    color: var(--ig-ink);
  }
}

/* 안쪽 스크롤 영역: 얇고 테마 색을 따르는 스크롤바 */
.ig-catmenu__tops,
.ig-catmenu__subs,
.ig-catmenu__panes,
.ig-sheet__body,
.ig-filter__body {
  scrollbar-width: thin;
  scrollbar-color: var(--ig-line) transparent;
}

/* 21. 하단 고정 구매 바 · 위로 가기 · 토스트 ---------------------------------- */
.ig-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--ig-z-bar);
  display: flex;
  gap: var(--ig-space-2);
  padding: 0.625rem var(--ig-gutter) calc(0.625rem + env(safe-area-inset-bottom));
  padding-left: max(var(--ig-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--ig-gutter), env(safe-area-inset-right, 0px));
  background: var(--ig-paper);
  border-top: var(--ig-border-strong) solid var(--ig-line-strong);
}

.ig-cta-bar .ig-btn--primary {
  flex: 1;
}

.has-cta-bar {
  padding-bottom: calc(4.5rem + 2px + env(safe-area-inset-bottom));
}

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

  .has-cta-bar {
    padding-bottom: 0;
  }
}

.ig-scroll-top {
  position: fixed;
  right: max(var(--ig-gutter), env(safe-area-inset-right, 0px));
  bottom: calc(var(--ig-space-4) + env(safe-area-inset-bottom));
  z-index: var(--ig-z-bar);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ig-tap);
  height: var(--ig-tap);
  background: var(--ig-paper);
  border: var(--ig-border-strong) solid var(--ig-line-strong);
  color: var(--ig-ink);
  visibility: hidden; /* 투명하기만 하면 Tab이 보이지 않는 버튼에 멈춘다 */
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--ig-duration) var(--ig-ease), transform var(--ig-duration) var(--ig-ease), visibility var(--ig-duration);
}

.ig-scroll-top.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.has-cta-bar .ig-scroll-top {
  bottom: calc(5.25rem + 2px + env(safe-area-inset-bottom));
}

@media (min-width: 64em) {
  .ig-scroll-top,
  .has-cta-bar .ig-scroll-top {
    right: var(--ig-space-6);
    bottom: var(--ig-space-6);
  }
}

.ig-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--ig-space-6) + env(safe-area-inset-bottom));
  z-index: var(--ig-z-toast);
  display: flex;
  align-items: center;
  gap: var(--ig-space-2);
  min-height: var(--ig-tap);
  max-width: calc(100% - var(--ig-space-8));
  padding: 0 var(--ig-space-4);
  background: var(--ig-inverse);
  border: var(--ig-border-strong) solid var(--ig-line-strong); /* 다크에서는 반전 바탕이 페이지와 비슷해 테두리로 가장자리를 보인다 */
  color: var(--ig-on-inverse);
  font-size: var(--ig-text-md);
  font-weight: var(--ig-weight-bold);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity var(--ig-duration) var(--ig-ease), transform var(--ig-duration) var(--ig-ease);
}

.ig-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.has-cta-bar .ig-toast {
  bottom: calc(5.5rem + 2px + env(safe-area-inset-bottom));
}

@media (min-width: 64em) {
  .has-cta-bar .ig-toast {
    bottom: var(--ig-space-6);
  }
}

/* 22. 푸터 --------------------------------------------------------------- */
.ig-footer {
  margin-top: var(--ig-space-12);
  background: var(--ig-paper);
  border-top: var(--ig-border-strong) solid var(--ig-line-strong);
}

.ig-app-install {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ig-space-4);
  padding-block: var(--ig-space-5);
  border-bottom: 1px solid var(--ig-line);
}
.ig-app-install strong { color: var(--ig-ink); }
.ig-app-install p { margin-top: var(--ig-space-2); color: var(--ig-sub); font-size: var(--ig-text-sm); }
.ig-app-install .ig-btn { flex-shrink: 0; }
@media (max-width: 30em) {
  .ig-app-install .ig-btn { width: 100%; }
}

.ig-install-dialog {
  width: min(28rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 1.5rem;
  border: var(--ig-border-strong) solid var(--ig-line-strong);
  background: var(--ig-paper);
  color: var(--ig-ink);
}
.ig-install-dialog::backdrop { background: var(--ig-scrim); }
.ig-install-dialog h2 { font-size: var(--ig-text-xl); }
.ig-install-dialog p { margin-block: 1rem; }
.ig-install-dialog form { display: flex; justify-content: flex-end; }

.ig-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--ig-space-2);
  padding-top: var(--ig-space-5);
  padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
  line-height: 1.6;
}
.ig-footer__text { display: grid; gap: var(--ig-space-2); }
.ig-footer__links { display: flex; flex-wrap: wrap; gap: var(--ig-space-2) var(--ig-space-4); }
.ig-footer__links a { color: var(--ig-sub); text-decoration: underline; text-underline-offset: 3px; }
.ig-footer__links a:hover { color: var(--ig-ink); }
.ig-footer__links a.is-strong { color: var(--ig-ink); font-weight: var(--ig-weight-bold); }
.ig-policy__meta { display: flex; flex-wrap: wrap; gap: var(--ig-space-2) var(--ig-space-4); color: var(--ig-sub); font-family: var(--ig-font-mono); font-size: var(--ig-text-md); }
.ig-policy-nav { padding-bottom: var(--ig-space-2); }
.ig-policy-alert { margin-top: var(--ig-space-4); }
.ig-policy__foot { margin-top: var(--ig-space-4); color: var(--ig-sub); font-size: var(--ig-text-md); }
.ig-doc-layout { display: grid; gap: var(--ig-space-4); padding-top: var(--ig-space-5); }
/* 제목 · 버전 줄은 본문 칸 안에 있다(왼쪽 목록이 제목과 같은 높이에서 시작하도록).
   위 여백은 제목 대신 레이아웃이 갖는다 */
.ig-doc-layout > .ig-page-head { padding-top: 0; }
/* 격자 칸의 기본 최소 너비(min-width: auto)를 푼다 — 문서 목록의 밀어 넘기는 칩 줄이 칸을
   넓혀 320px 에서 가로 스크롤이 생겼다(WP9 검수, 시안에도 있던 흠) */
.ig-doc-layout > * { min-width: 0; }
.ig-doc-nav__title { display: none; margin-bottom: var(--ig-space-2); color: var(--ig-sub); font-size: var(--ig-text-md); font-weight: var(--ig-weight-bold); }
@media (min-width: 64em) {
  .ig-doc-layout { grid-template-columns: 13.5rem minmax(0, 1fr); gap: var(--ig-space-8); padding-top: var(--ig-space-8); align-items: start; }
  /* PC: 왼쪽 칸에 목록을 세로로 걸치고, 오른쪽 칸에 제목과 본문을 차례로 둔다 */
  .ig-doc-layout__nav { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: calc(var(--ig-header-height) + var(--ig-space-6)); }
  .ig-doc-layout > .ig-page-head { grid-column: 2; grid-row: 1; }
  .ig-doc-layout__main { grid-column: 2; grid-row: 2; }
  .ig-doc-nav__title { display: block; }
  .ig-doc-layout__nav .ig-chips { flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 0; overflow: visible; }
  .ig-doc-layout__nav .ig-chip { justify-content: flex-start; width: 100%; }
}
.ig-prose h2 { margin: var(--ig-space-8) 0 var(--ig-space-2); font-size: var(--ig-text-xl); }
.ig-prose h2:first-child { margin-top: 0; }
.ig-prose p + p, .ig-prose ul { margin-top: var(--ig-space-3); }
.ig-prose ul { padding-left: 1.125rem; list-style: disc; }
.ig-prose li + li { margin-top: 0.375rem; }

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

  .ig-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--ig-space-6);
    padding-top: var(--ig-space-6);
    padding-bottom: var(--ig-space-8);
  }
}

/* 23. 쇼핑 가이드 (큐레이션) ------------------------------------------------ */
.ig-guides {
  display: grid;
  gap: var(--ig-space-3);
}

@media (min-width: 48em) {
  .ig-guides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ig-space-4);
  }
}

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

/* 홈: 가이드 2개를 넓게 (전체 보기는 섹션 머리 링크) */
@media (min-width: 64em) {
  .ig-guides--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ig-guide {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ig-paper);
  border: var(--ig-border) solid var(--ig-line);
}

.ig-guide:hover {
  border-color: var(--ig-line-strong);
}

.ig-guide__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  background: var(--ig-fill);
}

.ig-guide__media .ig-ph {
  width: 34%;
  height: 54%;
}

/* 가이드 대표 이미지(hero_image_url)는 칸을 채운다 — 상품 사진이 아니라 판을 깔지 않는다 */
.ig-guide__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 홈 가이드 카드는 이미지를 낮게 */
.ig-guide--home .ig-guide__media {
  aspect-ratio: 5 / 2;
}

.ig-guide__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ig-space-2);
  padding: 0.875rem 0.875rem var(--ig-space-4);
}

.ig-guide__title {
  font-size: 1.0625rem;
  font-weight: var(--ig-weight-heavy);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.ig-guide__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ig-guide__excerpt {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ig-sub);
  font-size: var(--ig-text-md);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 홈 가이드 카드: 비교한 상품 앞 3개를 가격표 줄로 — 카드 링크는 제목 하나라 줄은 글자만 */
.ig-guide__products {
  align-self: stretch;
  border-top: var(--ig-border) solid var(--ig-line-strong);
  font-size: var(--ig-text-sm);
}

.ig-guide__products li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--ig-space-2);
  padding: 0.4375rem 0;
  border-bottom: var(--ig-border) dashed var(--ig-line);
}

.ig-guide__rank {
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
}

.ig-guide__product {
  min-width: 0;
}

.ig-guide__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-guide__price {
  font-family: var(--ig-font-mono);
  font-weight: var(--ig-weight-bold);
}

.ig-guide__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.625rem;
  margin-top: auto;
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
}

.ig-guide--featured {
  border: var(--ig-border-strong) solid var(--ig-line-strong);
}

@media (min-width: 64em) {
  .ig-guide--featured {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .ig-guide--featured .ig-guide__media {
    flex: 0 0 52%;
    aspect-ratio: auto;
    min-height: 20rem;
  }

  .ig-guide--featured .ig-guide__body {
    justify-content: center;
    gap: var(--ig-space-3);
    padding: var(--ig-space-8);
  }

  .ig-guide--featured .ig-guide__title {
    font-size: var(--ig-text-4xl);
  }

  .ig-guide--featured .ig-guide__excerpt {
    font-size: var(--ig-text-lg);
  }
}

/* 상황별 추천 카드 */
.ig-pick {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--ig-space-3);
  padding: 0.875rem;
  background: var(--ig-paper);
  border: var(--ig-border-strong) solid var(--ig-line-strong);
  --ig-hole: var(--ig-paper);
}

.ig-pick__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
  background: var(--ig-fill);
}

.ig-pick__media .ig-ph {
  width: 3.5rem;
  height: 3.5rem;
}

.ig-pick__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  min-width: 0;
}

.ig-pick__scenario {
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
}

.ig-pick__name {
  font-size: var(--ig-text-base);
  font-weight: var(--ig-weight-heavy);
  line-height: 1.4;
}

.ig-pick__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

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

@media (min-width: 64em) {
  .ig-pick {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--ig-space-5);
    padding: var(--ig-space-5);
  }

  .ig-pick__media {
    width: 7.5rem;
    height: 7.5rem;
  }

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

  .ig-pick__summary {
    font-size: var(--ig-text-base);
  }
}

/* 한눈에 보기 포인트 */
.ig-points {
  display: grid;
  gap: var(--ig-space-2);
}

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

@media (min-width: 64em) {
  .ig-points {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ig-point {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.875rem;
  background: var(--ig-paper);
  border: var(--ig-border) solid var(--ig-line);
  border-top: 4px solid var(--ig-line-strong);
}

.ig-point__title {
  display: flex;
  align-items: center;
  gap: var(--ig-space-2);
  font-size: var(--ig-text-base);
  font-weight: var(--ig-weight-heavy);
}

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

/* 자주 묻는 질문 */
.ig-faq {
  border-top: var(--ig-border-strong) solid var(--ig-line-strong);
}

.ig-faq details {
  border-bottom: var(--ig-border) solid var(--ig-line-soft);
}

.ig-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ig-space-3);
  min-height: 3.5rem;
  padding: var(--ig-space-2) 0;
  font-size: var(--ig-text-base);
  font-weight: var(--ig-weight-bold);
  list-style: none;
  cursor: pointer;
}

.ig-faq summary::-webkit-details-marker {
  display: none;
}

.ig-faq summary .ig-icon {
  transition: transform var(--ig-duration) var(--ig-ease);
}

.ig-faq details[open] summary .ig-icon {
  transform: rotate(180deg);
}

.ig-faq__answer {
  padding-bottom: var(--ig-space-4);
  color: var(--ig-sub);
  font-size: var(--ig-text-md);
  line-height: var(--ig-leading-relaxed);
}

/* 아주 좁은 화면 (17.5em 미만) — 기본 글꼴에서는 280px 미만이라 실제 기기에는 걸리지 않고,
   글꼴 크기 설정을 키운 작은 폰에서만 걸린다 (125%면 350px, 150%면 420px 미만) */
@media (max-width: 17.5em) {
  /* 상품 카드는 한 줄에 하나 — 두 칸이면 7자리 가격이 카드 밖으로 나간다 */
  .ig-products {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 판매처 탭은 제목 · 닫기 아래 줄로 */
  .ig-catmenu__head {
    flex-wrap: wrap;
  }

  .ig-catmenu__sellers {
    order: 1;
    margin: 0 0 var(--ig-space-2);
  }

  .ig-btn {
    white-space: normal;
  }

  .ig-seg {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .ig-rank-row__price {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .ig-rank-row {
    grid-template-columns: 1.75rem 3rem minmax(0, 1fr);
  }

  .ig-rank-row__thumb {
    width: 3rem;
    height: 3rem;
  }

  /* 가격 뱃지("최저가 +100원" 등)가 칸보다 길면 두 줄로 */
  .ig-tag {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    line-height: 1.2;
    white-space: normal;
  }

  .ig-verdict__head {
    flex-wrap: wrap;
  }

  .ig-section-head {
    flex-wrap: wrap;
  }

  .ig-section-head__aside {
    white-space: normal;
  }

  .ig-pick {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .ig-pick__media {
    width: 3.5rem;
    height: 3.5rem;
  }
}

/* 24. 강제 색상 모드 (Windows 고대비) — 바탕색으로만 보이던 상태를 시스템 색으로 ----------------------- */
@media (forced-colors: active) {
  .ig-seg__item[aria-disabled="true"] {
    color: GrayText;
  }

  .ig-check input {
    forced-color-adjust: none;
    background: Canvas;
    border-color: CanvasText;
  }

  .ig-check input:checked {
    background: Highlight;
    border-color: Highlight;
  }

  .ig-check input::before {
    background: HighlightText;
  }

  /* 고른 상태는 테두리로 (초점 테두리 outline과 겹치지 않게 border를 쓴다) */
  .ig-chip[aria-pressed="true"],
  .ig-chip[aria-current="page"],
  .ig-chip[aria-selected="true"],
  .ig-seg__item[aria-current="page"],
  .ig-seg__item[aria-selected="true"],
  .ig-choice input:checked + span,
  .ig-catmenu__top[aria-current="true"],
  .ig-nav__item[aria-current="page"],
  .ig-nav__item[aria-current="true"] {
    border: var(--ig-border-strong) solid Highlight;
  }

  .ig-search:focus-within {
    outline-color: Highlight;
  }
}

/* 검색·랭킹 공용 재고 필터: 작은 화면에서도 줄바꿈하며 정렬 폭에 영향을 주지 않는다. */
.ig-stock-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.ig-stock-filter .ig-check { margin: 0; }

.ig-stock-filter .ig-check { white-space: nowrap; min-height: 44px; }
.ig-stock-filter [hidden] { display: none; }
.ig-ranking-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 20px; }

.ig-toolbar--stock + .ig-page-section { padding-top: 0; }
@media (max-width: 359px) {
  .ig-toolbar--stock .ig-toolbar__label { display: none; }
}

/* 브랜드 탐색: 기존 보조 텍스트 모양을 유지하고 상품 링크와 독립적으로 선택한다. */
.ig-brand-link {
  position: relative;
  z-index: 2;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) {
  .ig-brand-link:hover { color: var(--ig-ink); }
}
.ig-brand-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.ig-brand-selection { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 20px; }
.ig-brand-selection__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-sm);
}
.ig-filter__brands { max-height: 20rem; overflow-y: auto; overscroll-behavior-y: contain; padding: 4px; }
.ig-filter__brands .ig-check + .ig-check { margin-top: 12px; }

/* 상품 삭제 요청 — 상세의 들머리 줄과 시트 안 폼(계획 §6-19).
   선택지는 시안의 `.ig-choices` · `.ig-choice`(필터 "가격 상태")를 그대로 쓰고, 여기서는
   들머리 줄 정렬 · 묶음 간격 · 이름표 · 여러 줄 입력칸만 정한다(시안에 입력칸이 없다). */
.ig-removal-cta { align-items: center; flex-wrap: wrap; }
.ig-removal-cta > span { flex: 1; min-width: 7.5rem; }
.ig-removal-cta .ig-btn { flex: none; }
.ig-removal__group { margin-top: var(--ig-space-5); }
.ig-removal__label {
  display: block;
  margin-bottom: var(--ig-space-2);
  color: var(--ig-sub);
  font-family: var(--ig-font-mono);
  font-size: var(--ig-text-xs);
  font-weight: var(--ig-weight-bold);
}
.ig-removal__detail {
  /* inline 이면 글꼴 베이스라인만큼 아래에 틈이 생겨 글자 수 줄이 밀린다 */
  display: block;
  width: 100%;
  min-height: 7.5rem;
  padding: 0.625rem 0.75rem;
  background: var(--ig-paper);
  border: var(--ig-border) solid var(--ig-line-strong);
  color: var(--ig-ink);
  /* iOS는 16px보다 작은 입력칸에 초점이 가면 화면을 확대한다 */
  font-size: var(--ig-text-lg);
  resize: vertical;
}
.ig-removal__count { margin-top: 0.375rem; color: var(--ig-sub); font-family: var(--ig-font-mono); font-size: var(--ig-text-2xs); }