/* 쇼홈(vavu.kr) — 메이드 보드와 같은 SEED 토큰. 색·여백·모서리·글자 크기는 var(--seed-…) 만 쓴다(app-web check:tokens 와 같은 규칙).
   첫 화면 = 검은 큰 화면(사진 4장) → 약속 4가지 → 상품 묶음 → 주문 안내 → 고객센터 → 바닥글. 사진은 상품 목록과 같은 파일이라 더 받지 않는다.
   SEED 어두운 모드는 켜지 않았다(html 에 data-seed-color-mode 없음) — 첫 화면·고객센터·바닥글의 검정은 고정색. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body.shop {
  margin: 0;
  font-family: var(--seed-font-family);
  font-size: var(--seed-font-size-t5);
  line-height: var(--seed-line-height-t5);
  color: var(--seed-color-fg-neutral);
  background: var(--seed-color-bg-layer-default);
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

body.shop img {
  display: block;
  max-width: 100%;
  height: auto;
}

body.shop a {
  color: inherit;
}

body.shop :focus-visible {
  outline: 2px solid var(--seed-color-stroke-focus-ring);
  outline-offset: 2px;
}

/* 화면이 숨긴 칸(hidden)은 아래 display 규칙보다 먼저 — 주문 칸이 단계마다 나타났다 사라진다 */
body.shop [hidden] {
  display: none !important;
}

.shop-skip {
  position: absolute;
  left: var(--seed-dimension-x4);
  top: -100px;
  padding: var(--seed-dimension-x2) var(--seed-dimension-x3);
  background: var(--seed-color-bg-neutral-inverted);
  color: var(--seed-color-fg-neutral-inverted);
  border-radius: var(--seed-radius-r2);
  z-index: 20;
}

.shop-skip:focus {
  top: var(--seed-dimension-x2);
}

.shop-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--seed-dimension-x5);
}

@media (min-width: 720px) {
  .shop-wrap {
    padding: 0 var(--seed-dimension-x8);
  }
}

/* 머리글 — 흰 띠(검은 첫 화면 위에서도 흐려지지 않게 비치지 않는 흰색), 로고 + 쇼홈 + 메뉴 */
.shop-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--seed-color-bg-layer-default);
  border-bottom: 1px solid var(--seed-color-stroke-neutral-subtle);
}

.shop-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--seed-dimension-x4);
  min-height: var(--seed-dimension-x16);
}

.shop-brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--seed-dimension-x2);
  font-size: var(--seed-font-size-t7);
  line-height: var(--seed-line-height-t7);
  font-weight: var(--seed-font-weight-bold);
  letter-spacing: -0.02em;
  text-decoration: none;
}

body.shop .shop-brand__logo {
  width: auto;
  height: var(--seed-dimension-x10);
  border-radius: var(--seed-radius-r2);
}

.shop-nav {
  display: flex;
  align-items: center;
  gap: var(--seed-dimension-x7);
  margin-left: auto;
}

.shop-nav a {
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-medium);
  color: var(--seed-color-fg-neutral-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--seed-duration-d4) var(--seed-timing-function-easing);
}

.shop-nav a:hover {
  color: var(--seed-color-fg-neutral);
}

/* 2026-10-27 고객센터 3단계 — 머리글 오른쪽 유틸(주문 조회 · 회원 가입 · 로그인). PC 는 분류 메뉴 옆에 세로 줄로 나눠 작게,
   폰은 로그인만(나머지는 ☰ 서랍 안). 유틸이 하나도 없으면(주문 받기·로그인 공개 둘 다 꺼짐) 줄도 없다 */
.shop-util {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--seed-dimension-x4);
}

.shop-util a {
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  font-weight: var(--seed-font-weight-medium);
  color: var(--seed-color-fg-neutral-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--seed-duration-d4) var(--seed-timing-function-easing);
}

.shop-util a:hover {
  color: var(--seed-color-fg-neutral);
}

.shop-util > a:first-child {
  padding-left: var(--seed-dimension-x4);
  border-left: 1px solid var(--seed-color-stroke-neutral-muted);
}

/* 3-3 머리글 끝 「로그인」(로그인 공개 때만 있다) — 「내 주문」으로 바뀌어도 메뉴가 밀리지 않게 폭을 잡아 둔다 */
.shop-util a.shop-nav__login {
  display: inline-block;
  min-width: 3.5em;
  text-align: end;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-neutral);
  font-weight: var(--seed-font-weight-bold);
}

/* 폰 ☰ 서랍 — PC(720px↑)엔 없다 */
.shop-menu {
  display: none;
}

/* PC 가 좁으면(태블릿 720~1023px) 한 줄에 다 들어가지 않는다 — 윗줄 = 로고 · 유틸, 아랫줄 = 분류 메뉴 전체(넘치면 메뉴만 줄바꿈) */
@media (min-width: 720px) and (max-width: 1023px) {
  .shop-header__inner {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .shop-util {
    margin-left: auto;
  }

  .shop-nav {
    order: 1;
    flex: 1 0 100%;
    flex-wrap: wrap;
    gap: var(--seed-dimension-x1) var(--seed-dimension-x5);
    margin-left: 0;
    padding-bottom: var(--seed-dimension-x3);
  }
}

@media (max-width: 719px) {
  .shop-header__inner {
    min-height: var(--seed-dimension-x14);
    gap: var(--seed-dimension-x3);
  }

  body.shop .shop-brand__logo {
    height: var(--seed-dimension-x9);
  }

  /* 폰: 분류 메뉴(옆으로 밀던 한 줄, 2026-10-18)는 ☰ 서랍으로 옮겼다(2026-10-27) — 링크는 하나도 빠지지 않는다 */
  .shop-nav {
    display: none;
  }

  .shop-util {
    margin-left: auto;
  }

  .shop-util > a:not(.shop-nav__login) {
    display: none;
  }

  .shop-util > a:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .shop-menu {
    display: block;
  }
}

/* ☰ 단추 — 가는 선 세 개(글자 대신 · 상담 바 아이콘과 같은 선 굵기), 열리면 × */
.shop-menu__open {
  display: grid;
  place-items: center;
  width: var(--seed-dimension-x10);
  height: var(--seed-dimension-x10);
  margin-right: calc(var(--seed-dimension-x2) * -1);
  border-radius: var(--seed-radius-r2);
  color: var(--seed-color-fg-neutral);
  list-style: none;
  cursor: pointer;
}

.shop-menu__open::-webkit-details-marker {
  display: none;
}

.shop-menu__bars,
.shop-menu__bars::before,
.shop-menu__bars::after {
  display: block;
  width: var(--seed-dimension-x5);
  height: 2px;
  border-radius: var(--seed-radius-full);
  background: currentColor;
  transition: transform var(--seed-duration-d4) var(--seed-timing-function-easing);
}

.shop-menu__bars {
  position: relative;
  z-index: 1;
}

.shop-menu__bars::before,
.shop-menu__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.shop-menu__bars::before {
  top: -6px;
}

.shop-menu__bars::after {
  top: 6px;
}

.shop-menu[open] .shop-menu__bars {
  background: transparent;
}

.shop-menu[open] .shop-menu__bars::before {
  top: 0;
  transform: rotate(45deg);
}

.shop-menu[open] .shop-menu__bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* 열린 동안 화면 전체 어두운 막 — 막(= 단추의 일부)을 누르면 서랍이 닫힌다(스크립트 0) */
.shop-menu[open] > .shop-menu__open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--seed-color-bg-overlay-muted);
  cursor: default;
}

/* 서랍 — 머리글 바로 아래 한 장(머리글이 따라다니니 서랍도 같이) · 길면 서랍 안에서만 밀린다 */
.shop-menu__panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 2;
  max-height: calc(100vh - var(--seed-dimension-x14));
  max-height: calc(100dvh - var(--seed-dimension-x14));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--seed-dimension-x2) var(--seed-dimension-x5) calc(var(--seed-dimension-x6) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--seed-color-stroke-neutral-subtle);
  background: var(--seed-color-bg-layer-default);
  box-shadow: var(--seed-shadow-s2);
}

/* 서랍이 열려 있으면 머리글을 아래 상담 바보다 위로(막이 상담 바까지 덮게) · 뒤 화면은 밀리지 않게 */
.shop-header:has(.shop-menu[open]) {
  z-index: 16;
}

body.shop:has(.shop-menu[open]) {
  overflow: hidden;
}

.shop-menu__main,
.shop-menu__sub,
.shop-menu__util {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.shop .shop-menu__main a {
  display: flex;
  align-items: center;
  min-height: var(--seed-dimension-x13);
  border-bottom: 1px solid var(--seed-color-stroke-neutral-subtle);
  font-size: var(--seed-font-size-t6);
  line-height: var(--seed-line-height-t6);
  font-weight: var(--seed-font-weight-bold);
  text-decoration: none;
}

.shop-menu__sub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--seed-dimension-x2);
  margin-top: var(--seed-dimension-x4);
}

body.shop .shop-menu__sub a {
  display: flex;
  align-items: center;
  min-height: var(--seed-dimension-x12);
  padding: 0 var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-neutral-weak);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-medium);
  text-decoration: none;
}

.shop-menu__util {
  display: flex;
  flex-wrap: wrap;
  gap: var(--seed-dimension-x2) var(--seed-dimension-x5);
  margin-top: var(--seed-dimension-x5);
}

.shop-menu__util:empty {
  display: none;
}

body.shop .shop-menu__util a {
  display: inline-flex;
  align-items: center;
  min-height: var(--seed-dimension-x10);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-neutral-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 폰이 좁으면 로고 그림만(쇼홈 글자는 그림 안에도 있다) */
@media (max-width: 399px) {
  .shop-brand__word {
    display: none;
  }
}

/* 작은 영문 머리말(SHOW HOME·COLLECTION …) */
.shop-eyebrow {
  margin: 0 0 var(--seed-dimension-x3);
  font-size: var(--seed-font-size-t2);
  line-height: var(--seed-line-height-t2);
  font-weight: var(--seed-font-weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--seed-color-fg-neutral-muted);
}

.shop-eyebrow a {
  text-decoration: none;
}

.shop-eyebrow a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.shop-eyebrow--light {
  color: var(--seed-color-palette-static-white-alpha-700);
}

/* 버튼(검은 화면 위) */
.shop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--seed-dimension-x13);
  padding: 0 var(--seed-dimension-x7);
  border: 1px solid transparent;
  border-radius: var(--seed-radius-r2);
  font-size: var(--seed-font-size-t5);
  line-height: var(--seed-line-height-t5);
  font-weight: var(--seed-font-weight-bold);
  text-decoration: none;
  transition:
    background-color var(--seed-duration-d4) var(--seed-timing-function-easing),
    border-color var(--seed-duration-d4) var(--seed-timing-function-easing);
}

body.shop .shop-btn--light {
  background: var(--seed-color-palette-static-white);
  color: var(--seed-color-palette-static-black);
}

body.shop .shop-btn--light:hover {
  background: var(--seed-color-palette-static-white-alpha-800);
}

body.shop .shop-btn--ghost {
  border-color: var(--seed-color-palette-static-white-alpha-400);
  color: var(--seed-color-palette-static-white);
}

body.shop .shop-btn--ghost:hover {
  background: var(--seed-color-palette-static-white-alpha-100);
  border-color: var(--seed-color-palette-static-white-alpha-700);
}

/* 첫 화면 큰 화면 — 검은 바탕(어두운 화면 설정에서도 같은 색) + 상품 사진 4장 */
.shop-hero {
  overflow: hidden;
  color: var(--seed-color-palette-static-white);
  background:
    radial-gradient(90% 80% at 85% 10%, var(--seed-color-palette-static-white-alpha-100), transparent 60%),
    radial-gradient(60% 60% at 0% 100%, var(--seed-color-palette-static-white-alpha-50), transparent 70%),
    var(--seed-color-palette-static-black);
}

.shop-hero__inner {
  display: grid;
  gap: var(--seed-dimension-x10);
  padding-top: var(--seed-dimension-x14);
  padding-bottom: var(--seed-dimension-x14);
}

@media (min-width: 900px) {
  .shop-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--seed-dimension-x16);
    padding-top: calc(var(--seed-dimension-x16) * 1.5);
    padding-bottom: calc(var(--seed-dimension-x16) * 1.5);
  }
}

.shop-hero__title {
  margin: 0;
  font-size: var(--seed-font-size-t12);
  line-height: var(--seed-line-height-t12);
  font-weight: var(--seed-font-weight-bold);
  letter-spacing: -0.03em;
}

/* 줄마다 길이를 고르게(폰에서 「주세요.」 한 단어만 다음 줄로 떨어지지 않게) */
.shop-hero__line {
  display: block;
  text-wrap: balance;
}

@media (min-width: 720px) {
  .shop-hero__title {
    font-size: var(--seed-font-size-t14);
    line-height: var(--seed-line-height-t14);
  }
}

.shop-hero__lead {
  max-width: 28em;
  margin: var(--seed-dimension-x5) 0 0;
  font-size: var(--seed-font-size-t5);
  line-height: var(--seed-line-height-t5);
  color: var(--seed-color-palette-static-white-alpha-700);
}

@media (min-width: 720px) {
  .shop-hero__lead {
    font-size: var(--seed-font-size-t6);
    line-height: var(--seed-line-height-t6);
  }
}

.shop-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--seed-dimension-x3);
  margin-top: var(--seed-dimension-x8);
}

@media (max-width: 479px) {
  .shop-hero__actions .shop-btn {
    flex: 1 1 0;
    padding: 0 var(--seed-dimension-x4);
  }
}

.shop-hero__visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--seed-dimension-x3);
}

.shop-hero__tile {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--seed-radius-r4);
  background: var(--seed-color-palette-static-white-alpha-100);
}

.shop-hero__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PC 는 오른쪽 줄을 내려 엇갈리게 */
@media (min-width: 900px) {
  .shop-hero__visual {
    gap: var(--seed-dimension-x4);
    padding-bottom: var(--seed-dimension-x10);
  }

  .shop-hero__tile:nth-child(even) {
    transform: translateY(var(--seed-dimension-x10));
  }
}

/* 칸(섹션) 공통 — 첫 화면 글자·사진은 바로 보인다(떠오르는 효과 없음: 검색 속도 기준 그대로) */
.shop-section {
  padding-top: var(--seed-dimension-x14);
  padding-bottom: var(--seed-dimension-x14);
  scroll-margin-top: var(--seed-dimension-x12);
}

@media (min-width: 720px) {
  .shop-section {
    padding-top: calc(var(--seed-dimension-x16) * 1.5);
    padding-bottom: calc(var(--seed-dimension-x16) * 1.5);
    scroll-margin-top: var(--seed-dimension-x14);
  }
}

.shop-section--tint {
  background: var(--seed-color-palette-gray-100);
}

.shop-section__head {
  margin-bottom: var(--seed-dimension-x8);
}

@media (min-width: 720px) {
  .shop-section__head {
    margin-bottom: var(--seed-dimension-x12);
  }
}

.shop-section__title {
  margin: 0;
  font-size: var(--seed-font-size-t10);
  line-height: var(--seed-line-height-t10);
  font-weight: var(--seed-font-weight-bold);
  letter-spacing: -0.02em;
}

@media (min-width: 720px) {
  .shop-section__title {
    font-size: var(--seed-font-size-t12);
    line-height: var(--seed-line-height-t12);
  }
}

.shop-count {
  color: var(--seed-color-fg-neutral-subtle);
  font-weight: var(--seed-font-weight-regular);
}

/* 약속 4가지 — PC 4칸(위 굵은 선), 폰 한 줄씩 */
.shop-values__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--seed-color-fg-neutral);
}

.shop-values__item {
  display: grid;
  grid-template-columns: var(--seed-dimension-x12) minmax(0, 1fr);
  gap: var(--seed-dimension-x1) var(--seed-dimension-x3);
  padding: var(--seed-dimension-x5) 0;
  border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
}

.shop-values__no {
  grid-row: span 2;
  font-size: var(--seed-font-size-t6);
  line-height: var(--seed-line-height-t6);
  color: var(--seed-color-fg-neutral-subtle);
  font-variant-numeric: tabular-nums;
}

.shop-values__title {
  font-size: var(--seed-font-size-t6);
  line-height: var(--seed-line-height-t6);
  font-weight: var(--seed-font-weight-bold);
}

.shop-values__text {
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-neutral-muted);
}

@media (min-width: 720px) {
  .shop-values__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--seed-dimension-x8);
    border-top: 0;
  }

  .shop-values__item {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--seed-dimension-x2);
    padding: var(--seed-dimension-x5) 0 0;
    border-top: 1px solid var(--seed-color-fg-neutral);
    border-bottom: 0;
  }

  .shop-values__no {
    grid-row: auto;
    margin-bottom: var(--seed-dimension-x6);
  }
}

/* 상품 묶음 — PC 는 왼쪽 묶음 이름(따라 내려옴) · 오른쪽 상품 2칸 */
.shop-group {
  padding-top: var(--seed-dimension-x8);
  border-top: 1px solid var(--seed-color-stroke-neutral-muted);
  scroll-margin-top: var(--seed-dimension-x14);
}

.shop-group + .shop-group {
  margin-top: var(--seed-dimension-x14);
}

.shop-group__head {
  margin-bottom: var(--seed-dimension-x6);
}

.shop-group__title {
  margin: 0;
  font-size: var(--seed-font-size-t9);
  line-height: var(--seed-line-height-t9);
  font-weight: var(--seed-font-weight-bold);
  letter-spacing: -0.02em;
}

.shop-group__lead {
  margin: var(--seed-dimension-x2) 0 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-neutral-muted);
}

/* 묶음 → 분류 화면 「전체 보기」(2026-10-18) */
.shop-group__more {
  display: inline-block;
  margin-top: var(--seed-dimension-x3);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-medium);
  color: var(--seed-color-fg-neutral);
  text-decoration: none;
}

.shop-group__more:hover {
  text-decoration: underline;
}

@media (min-width: 900px) {
  .shop-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--seed-dimension-x12);
    align-items: start;
    padding-top: var(--seed-dimension-x10);
  }

  .shop-group__head {
    position: sticky;
    top: calc(var(--seed-dimension-x16) + var(--seed-dimension-x8));
    margin: 0;
  }

  .shop-group__title {
    font-size: var(--seed-font-size-t11);
    line-height: var(--seed-line-height-t11);
  }

  .shop-group__lead {
    font-size: var(--seed-font-size-t5);
    line-height: var(--seed-line-height-t5);
  }
}

/* 상품 카드 — 폰 2칸 · PC 4칸(묶음 안은 2칸) */
.shop-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--seed-dimension-x8) var(--seed-dimension-x3);
}

@media (min-width: 720px) {
  .shop-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--seed-dimension-x10) var(--seed-dimension-x5);
  }

  .shop-grid--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.shop-card__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--seed-dimension-x1);
  text-decoration: none;
}

.shop-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-neutral-weak);
  margin-bottom: var(--seed-dimension-x2);
}

.shop-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform calc(var(--seed-duration-d6) * 2) var(--seed-timing-function-enter-expressive);
}

@media (hover: hover) {
  .shop-card__link:hover .shop-card__media img {
    transform: scale(1.04);
  }

  .shop-card__link:hover .shop-card__name {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.shop-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
}

.shop-card__price strong {
  font-size: var(--seed-font-size-t6);
  line-height: var(--seed-line-height-t6);
  font-weight: var(--seed-font-weight-bold);
}

.shop-card__badge {
  margin-top: var(--seed-dimension-x1);
}

@media (min-width: 720px) {
  .shop-card__name {
    font-size: var(--seed-font-size-t5);
    line-height: var(--seed-line-height-t5);
  }

  .shop-card__price strong {
    font-size: var(--seed-font-size-t7);
    line-height: var(--seed-line-height-t7);
  }
}

/* 주문 안내 — 폰 세로 줄, PC 가로 4단계(동그라미를 선으로 잇는다) */
.shop-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--seed-dimension-x6);
}

.shop-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--seed-dimension-x10) minmax(0, 1fr);
  gap: var(--seed-dimension-x1) var(--seed-dimension-x4);
}

.shop-step__no {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: var(--seed-dimension-x10);
  height: var(--seed-dimension-x10);
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-bg-neutral-inverted);
  color: var(--seed-color-fg-neutral-inverted);
  font-weight: var(--seed-font-weight-bold);
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}

.shop-step__title {
  align-self: end;
  font-size: var(--seed-font-size-t6);
  line-height: var(--seed-line-height-t6);
  font-weight: var(--seed-font-weight-bold);
}

.shop-step__text {
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--seed-dimension-x5) - 0.5px);
  top: var(--seed-dimension-x10);
  bottom: calc(var(--seed-dimension-x6) * -1);
  width: 1px;
  background: var(--seed-color-stroke-neutral-muted);
}

@media (min-width: 720px) {
  .shop-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--seed-dimension-x8);
  }

  .shop-step {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--seed-dimension-x2);
  }

  .shop-step__no {
    grid-row: auto;
    margin-bottom: var(--seed-dimension-x3);
  }

  .shop-step__title {
    align-self: start;
  }

  .shop-step:not(:last-child)::after {
    left: calc(var(--seed-dimension-x10) + var(--seed-dimension-x3));
    right: calc(var(--seed-dimension-x5) * -1);
    top: calc(var(--seed-dimension-x5) - 0.5px);
    bottom: auto;
    width: auto;
    height: 1px;
  }
}

/* 고객센터 띠 — 검은 바탕, 큰 번호(누르면 전화) */
.shop-contact {
  color: var(--seed-color-palette-static-white);
  background: var(--seed-color-palette-static-black);
  scroll-margin-top: var(--seed-dimension-x14);
}

.shop-contact__inner {
  display: grid;
  gap: var(--seed-dimension-x8);
  padding-top: var(--seed-dimension-x14);
  padding-bottom: var(--seed-dimension-x14);
}

@media (min-width: 900px) {
  .shop-contact__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--seed-dimension-x16);
    padding-top: calc(var(--seed-dimension-x16) * 1.25);
    padding-bottom: calc(var(--seed-dimension-x16) * 1.25);
  }
}

.shop-contact__title {
  margin: 0;
  font-size: var(--seed-font-size-t10);
  line-height: var(--seed-line-height-t10);
  font-weight: var(--seed-font-weight-bold);
  letter-spacing: -0.02em;
}

@media (min-width: 720px) {
  .shop-contact__title {
    font-size: var(--seed-font-size-t12);
    line-height: var(--seed-line-height-t12);
  }
}

.shop-contact__list {
  display: grid;
  gap: var(--seed-dimension-x4);
  margin: 0;
}

.shop-contact__row {
  display: grid;
  gap: var(--seed-dimension-x1);
  padding-bottom: var(--seed-dimension-x4);
  border-bottom: 1px solid var(--seed-color-palette-static-white-alpha-200);
}

.shop-contact__row dt {
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-palette-static-white-alpha-600);
}

.shop-contact__row dd {
  margin: 0;
  font-size: var(--seed-font-size-t8);
  line-height: var(--seed-line-height-t8);
  font-weight: var(--seed-font-weight-bold);
}

@media (min-width: 720px) {
  .shop-contact__row dd {
    font-size: var(--seed-font-size-t10);
    line-height: var(--seed-line-height-t10);
  }
}

.shop-contact__row a {
  text-decoration: none;
}

.shop-contact__row a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 상품 화면 */
.shop-product {
  padding-top: var(--seed-dimension-x5);
  padding-bottom: var(--seed-dimension-x16);
}

.shop-crumb {
  margin-bottom: var(--seed-dimension-x4);
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-crumb a {
  text-decoration: none;
}

.shop-crumb a:hover {
  text-decoration: underline;
}

.shop-product__top {
  display: grid;
  gap: var(--seed-dimension-x6);
}

@media (min-width: 720px) {
  .shop-product__top {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--seed-dimension-x12);
    align-items: start;
  }
}

.shop-gallery__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: var(--seed-radius-r4);
  overscroll-behavior-x: contain;
}

.shop-gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 1 / 1;
  background: var(--seed-color-bg-neutral-weak);
}

.shop-gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shop-gallery__hint {
  margin: var(--seed-dimension-x2) 0 0;
  font-size: var(--seed-font-size-t3);
  color: var(--seed-color-fg-neutral-muted);
}

/* PC 는 큰 사진 1장 + 나머지 작은 사진 5칸 — 누를 것 없이 다 보인다 */
@media (min-width: 720px) {
  .shop-gallery__track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--seed-dimension-x2);
    overflow: visible;
    border-radius: 0;
  }

  .shop-gallery__slide {
    border-radius: var(--seed-radius-r2);
    overflow: hidden;
  }

  .shop-gallery__slide:first-child {
    grid-column: 1 / -1;
    border-radius: var(--seed-radius-r4);
  }

  .shop-gallery__hint {
    display: none;
  }
}

.shop-buy__name {
  margin: 0;
  font-size: var(--seed-font-size-t8);
  line-height: var(--seed-line-height-t8);
  font-weight: var(--seed-font-weight-bold);
  letter-spacing: -0.02em;
}

@media (min-width: 720px) {
  .shop-buy__name {
    font-size: var(--seed-font-size-t9);
    line-height: var(--seed-line-height-t9);
  }
}

.shop-buy__price {
  margin: var(--seed-dimension-x4) 0 0;
}

.shop-buy__price strong {
  font-size: var(--seed-font-size-t11);
  line-height: var(--seed-line-height-t11);
  font-weight: var(--seed-font-weight-bold);
  letter-spacing: -0.02em;
}

@media (min-width: 720px) {
  .shop-buy__price strong {
    font-size: var(--seed-font-size-t12);
    line-height: var(--seed-line-height-t12);
  }
}

.shop-facts {
  display: grid;
  margin: var(--seed-dimension-x6) 0 0;
  border-top: 1px solid var(--seed-color-fg-neutral);
}

.shop-facts__row {
  display: grid;
  grid-template-columns: var(--seed-dimension-x16) minmax(0, 1fr);
  gap: var(--seed-dimension-x4);
  padding: var(--seed-dimension-x3) 0;
  border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
}

.shop-facts dt {
  color: var(--seed-color-fg-neutral-muted);
}

.shop-facts dd {
  margin: 0;
}

/* 2026-10-20 상품 정보표(table) — 예전 목록과 같은 모양 */
table.shop-facts {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

table.shop-facts th,
table.shop-facts td {
  padding: var(--seed-dimension-x3) 0;
  border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
  font-size: var(--seed-font-size-t4);
  font-weight: inherit;
  line-height: var(--seed-line-height-t4);
  text-align: left;
  vertical-align: top;
}

table.shop-facts th {
  width: var(--seed-dimension-x16);
  padding-right: var(--seed-dimension-x4);
  color: var(--seed-color-fg-neutral-muted);
  white-space: nowrap;
}

.shop-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--seed-dimension-x2);
  margin: var(--seed-dimension-x4) 0 0;
  padding: 0;
}

.shop-chips .seed-badge__root {
  white-space: normal;
  height: auto;
  min-height: 28px;
}

/* 크기로 금액 보기 — 금액은 서버가 계산(스토어 옵션 가격표) */
.shop-calc {
  display: grid;
  gap: var(--seed-dimension-x3);
  margin: var(--seed-dimension-x6) 0 0;
  padding: var(--seed-dimension-x5);
  border: 1px solid var(--seed-color-stroke-neutral-muted);
  border-radius: var(--seed-radius-r4);
  background: var(--seed-color-palette-gray-100);
}

.shop-calc__title {
  margin: 0;
  font-size: var(--seed-font-size-t6);
  line-height: var(--seed-line-height-t6);
  font-weight: var(--seed-font-weight-bold);
}

.shop-calc__field {
  display: grid;
  gap: var(--seed-dimension-x1);
}

.shop-calc__label {
  font-size: var(--seed-font-size-t4);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-calc__control {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--seed-dimension-x3);
  border: 1px solid var(--seed-color-stroke-neutral-weak);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-layer-default);
  color: var(--seed-color-fg-neutral);
  font: inherit;
}

.shop-calc__control:focus-visible {
  outline: 2px solid var(--seed-color-stroke-focus-ring);
  outline-offset: 1px;
}

.shop-calc__size {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--seed-dimension-x3);
}

.shop-calc__result {
  display: grid;
  gap: var(--seed-dimension-x1);
  margin: 0;
  min-height: 52px;
}

.shop-calc__price {
  font-size: var(--seed-font-size-t9);
  line-height: var(--seed-line-height-t9);
  font-weight: var(--seed-font-weight-bold);
}

.shop-calc__price:empty {
  display: none;
}

.shop-calc__detail,
.shop-calc__range {
  margin: 0;
  font-size: var(--seed-font-size-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-buy__cta {
  width: 100%;
  margin-top: var(--seed-dimension-x6);
}

.shop-buy__hint,
.shop-buy__call {
  margin: var(--seed-dimension-x2) 0 0;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-buy__call a {
  font-weight: var(--seed-font-weight-bold);
  color: var(--seed-color-fg-neutral);
}

.shop-detail {
  margin-top: var(--seed-dimension-x14);
  padding-top: var(--seed-dimension-x10);
  border-top: 1px solid var(--seed-color-stroke-neutral-muted);
}

.shop-detail__head {
  margin-bottom: var(--seed-dimension-x8);
  text-align: center;
}

/* 상세 사진은 원래 크기까지만(늘리면 흐려진다) — 가로는 width 속성 값, 넓은 사진은 860, 좁은 화면에선 화면 폭에 맞춘다(세로는 비율대로라 밀림 없음) */
body.shop .shop-detail__img {
  max-width: min(100%, 860px);
  margin: 0 auto;
}

.shop-detail__text {
  max-width: 860px;
  margin: var(--seed-dimension-x4) auto;
}

/* 움직이는 사진 — 멈춘 사진을 먼저 보이고, 누르면 그 자리에서 원본(GIF)을 받아 보인다(누르기 전엔 받지 않음) */
.shop-motion {
  max-width: 860px;
  margin: 0 auto;
}

.shop-motion > summary {
  position: relative;
  display: block;
  list-style: none;
  cursor: pointer;
}

.shop-motion > summary::-webkit-details-marker {
  display: none;
}

.shop-motion[open] > summary {
  display: none;
}

.shop-motion__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: var(--seed-dimension-x2) var(--seed-dimension-x4);
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-bg-neutral-inverted);
  color: var(--seed-color-fg-neutral-inverted);
  font-weight: var(--seed-font-weight-bold);
  white-space: nowrap;
}

.shop-motion > summary:focus-visible {
  outline: 2px solid var(--seed-color-stroke-focus-ring);
  outline-offset: 2px;
}

/* 주문하기 — 계산기 바로 아래, 한 자리에서 담기 → 합계 → 주문서 → 접수(입금 계좌) */
.shop-order {
  display: grid;
  gap: var(--seed-dimension-x3);
  margin-top: var(--seed-dimension-x6);
  padding-top: var(--seed-dimension-x6);
  border-top: 1px solid var(--seed-color-fg-neutral);
}

.shop-order__title {
  margin: 0;
  font-size: var(--seed-font-size-t7);
  line-height: var(--seed-line-height-t7);
  font-weight: var(--seed-font-weight-bold);
}

.shop-order__lead,
.shop-order__hint {
  margin: 0;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-order__add {
  display: grid;
}

.shop-order__add .shop-buy__cta {
  margin-top: 0;
}

/* 배송 안내 두 줄 — 같이 주문하면 무료 · 제주·도서산간 추가 */
.shop-order__rules {
  display: grid;
  gap: var(--seed-dimension-x1);
  margin: 0;
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-palette-gray-100);
  list-style: none;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-order__rules li::before {
  content: "· ";
}

.shop-order__note,
.shop-order__error {
  margin: 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
}

.shop-order__note:empty,
.shop-order__error:empty {
  display: none;
}

.shop-order__error {
  color: var(--seed-color-fg-critical);
}

.shop-order__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--seed-dimension-x2);
}

.shop-order__lines:empty {
  display: none;
}

.shop-order__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--seed-dimension-x3);
  align-items: center;
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4);
  border: 1px solid var(--seed-color-stroke-neutral-muted);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-layer-default);
}

.shop-order__size {
  display: block;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
}

.shop-order__option {
  display: block;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-order__amount {
  font-weight: var(--seed-font-weight-bold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.shop-order__drop {
  padding: var(--seed-dimension-x1) var(--seed-dimension-x2);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--seed-font-size-t3);
  color: var(--seed-color-fg-neutral-muted);
  text-decoration: underline;
  cursor: pointer;
}

.shop-order__sum {
  display: grid;
  gap: var(--seed-dimension-x1);
  margin: 0;
  padding: var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-palette-gray-100);
}

.shop-order__sum div {
  display: flex;
  justify-content: space-between;
  gap: var(--seed-dimension-x3);
}

.shop-order__sum dt {
  color: var(--seed-color-fg-neutral-muted);
}

.shop-order__sum dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.shop-order__total {
  margin-top: var(--seed-dimension-x1);
  padding-top: var(--seed-dimension-x2);
  border-top: 1px solid var(--seed-color-stroke-neutral-muted);
  font-size: var(--seed-font-size-t6);
  line-height: var(--seed-line-height-t6);
  font-weight: var(--seed-font-weight-bold);
}

.shop-order__sum .shop-order__total dt {
  color: var(--seed-color-fg-neutral);
}

.shop-order__form {
  display: grid;
  gap: var(--seed-dimension-x5);
  scroll-margin-top: var(--seed-dimension-x16);
}

.shop-order__group {
  display: grid;
  gap: var(--seed-dimension-x3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.shop-order__sub {
  padding: 0;
  margin-bottom: var(--seed-dimension-x1);
  font-size: var(--seed-font-size-t5);
  line-height: var(--seed-line-height-t5);
  font-weight: var(--seed-font-weight-bold);
}

.shop-order__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--seed-dimension-x3);
}

@media (max-width: 479px) {
  .shop-order__pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

.shop-order__zip {
  max-width: 10em;
}

.shop-order__check {
  display: flex;
  align-items: center;
  gap: var(--seed-dimension-x2);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  cursor: pointer;
}

.shop-order__check input {
  flex: none;
  width: var(--seed-dimension-x5);
  height: var(--seed-dimension-x5);
  margin: 0;
  accent-color: var(--seed-color-fg-neutral);
}

.shop-order__agree {
  display: grid;
  gap: var(--seed-dimension-x2);
  padding: var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-palette-gray-100);
}

.shop-order__more summary {
  margin-left: var(--seed-dimension-x7);
  font-size: var(--seed-font-size-t3);
  color: var(--seed-color-fg-neutral-muted);
  cursor: pointer;
}

.shop-order__more p {
  margin: var(--seed-dimension-x2) 0 0 var(--seed-dimension-x7);
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

/* 사진·손그림 보내기(선택) — 2026-10-22 계산기 안(종류 다음 · 가로 앞)으로 옮김. 안내 한 줄 + 접힌 손그림 예시 + [사진 찍기]·[사진첩에서 고르기] + 고른 사진 */
.shop-order__photo {
  display: grid;
  gap: var(--seed-dimension-x2);
  min-width: 0;
}

.shop-order__photo .shop-calc__label {
  margin: 0;
}

/* 손그림 예시는 접어 둔다 — 폰에서 가로·세로 칸이 아래로 밀리지 않게 */
.shop-order__sketch > summary {
  width: fit-content;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
  text-decoration: underline;
  cursor: pointer;
}

.shop-order__sketch .shop-order__example {
  max-width: 15em;
  margin-top: var(--seed-dimension-x2);
}

.shop-order__example {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--seed-color-stroke-neutral-muted);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-layer-default);
}

.shop-order__example figcaption {
  padding: var(--seed-dimension-x1) var(--seed-dimension-x2);
  font-size: var(--seed-font-size-t2);
  line-height: var(--seed-line-height-t2);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-order__pick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--seed-dimension-x2);
}

.shop-order__pick-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--seed-dimension-x3);
  border: 1px solid var(--seed-color-stroke-neutral-weak);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-layer-default);
  font-size: var(--seed-font-size-t4);
  font-weight: var(--seed-font-weight-bold);
  cursor: pointer;
}

.shop-order__pick-button:focus-within {
  outline: 2px solid var(--seed-color-stroke-focus-ring);
  outline-offset: 1px;
}

/* 파일 칸은 눈에만 숨김 — 글자를 누르면 폰 카메라·사진첩이 열린다 */
.shop-order__file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.shop-order__photo-note {
  margin: 0;
  font-size: var(--seed-font-size-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-order__photo-note:empty,
.shop-order__photos:empty {
  display: none;
}

.shop-order__photos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--seed-dimension-x2);
}

.shop-order__shot {
  display: grid;
  gap: var(--seed-dimension-x1);
  justify-items: center;
}

.shop-order__shot img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-neutral-weak);
}

/* 봇만 채우는 칸 — 사람 눈·키보드에 안 걸린다 */
.shop-order__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.shop-order__done {
  display: grid;
  gap: var(--seed-dimension-x4);
  padding: var(--seed-dimension-x5);
  border: 1px solid var(--seed-color-fg-neutral);
  border-radius: var(--seed-radius-r4);
  scroll-margin-top: var(--seed-dimension-x16);
}

.shop-order__ok {
  margin: 0;
  font-size: var(--seed-font-size-t8);
  line-height: var(--seed-line-height-t8);
  font-weight: var(--seed-font-weight-bold);
}

.shop-order__receipt {
  display: grid;
  gap: var(--seed-dimension-x2);
  margin: 0;
}

.shop-order__receipt div {
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr);
  gap: var(--seed-dimension-x3);
}

.shop-order__receipt dt {
  color: var(--seed-color-fg-neutral-muted);
}

.shop-order__receipt dd {
  margin: 0;
  font-weight: var(--seed-font-weight-bold);
}

/* 접수 화면 품목 줄(2026-10-22) — 담은 줄과 같은 모양, [빼기] 칸만 없다 */
.shop-order__line--done {
  grid-template-columns: minmax(0, 1fr) auto;
}

.shop-order__again {
  justify-self: start;
  padding: var(--seed-dimension-x2) var(--seed-dimension-x4);
  border: 1px solid var(--seed-color-stroke-neutral-muted);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-layer-default);
  color: var(--seed-color-fg-neutral);
  font: inherit;
  cursor: pointer;
}

/* 개인정보 처리방침·이용약관 */
.shop-doc {
  max-width: 800px;
  padding-top: var(--seed-dimension-x10);
  padding-bottom: var(--seed-dimension-x16);
}

.shop-doc h2 {
  margin: var(--seed-dimension-x8) 0 var(--seed-dimension-x2);
  font-size: var(--seed-font-size-t6);
  line-height: var(--seed-line-height-t6);
  font-weight: var(--seed-font-weight-bold);
}

.shop-doc p,
.shop-doc li {
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
}

.shop-doc p {
  margin: 0 0 var(--seed-dimension-x2);
}

.shop-doc ul,
.shop-doc ol {
  display: grid;
  gap: var(--seed-dimension-x1);
  margin: 0 0 var(--seed-dimension-x2);
  padding-left: var(--seed-dimension-x5);
}

.shop-doc__lead {
  margin-top: var(--seed-dimension-x3);
  color: var(--seed-color-fg-neutral-muted);
}

/* 3-3 「개정 예정」 칸(시행일 전에만) — 바뀌는 점 요약 + [새 전문 보기] 접기 */
.shop-doc__notice {
  margin: var(--seed-dimension-x6) 0 var(--seed-dimension-x8);
  padding: var(--seed-dimension-x5);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-neutral-weak);
}

.shop-doc__notice > h2 {
  margin-top: 0;
}

.shop-doc__next {
  margin-top: var(--seed-dimension-x3);
}

/* 펼침 삼각형(기본 표시)은 그대로 두고 누르는 높이만 넉넉히 */
.shop-doc__next > summary {
  padding: var(--seed-dimension-x3) 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-bold);
  cursor: pointer;
}

.shop-doc__history {
  margin-top: var(--seed-dimension-x6);
  color: var(--seed-color-fg-neutral-muted);
}

/* 상품 화면 아래 다른 상품 */
.shop-related {
  margin-top: var(--seed-dimension-x16);
  padding-top: var(--seed-dimension-x10);
  border-top: 1px solid var(--seed-color-stroke-neutral-muted);
}

/* 분류 화면(2026-10-18, /c/{분류}/) — 상품 화면과 같은 머리 여백·위치 줄, 카드는 첫 화면 격자(폰 2칸·PC 4칸) 그대로 */
.shop-category {
  padding-top: var(--seed-dimension-x5);
  padding-bottom: var(--seed-dimension-x16);
}

.shop-category__head {
  margin-bottom: var(--seed-dimension-x8);
}

.shop-category__lead {
  max-width: 60ch;
  margin: var(--seed-dimension-x3) 0 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-category__uses {
  margin-top: var(--seed-dimension-x14);
  padding-top: var(--seed-dimension-x8);
  border-top: 1px solid var(--seed-color-stroke-neutral-muted);
}

.shop-category__subtitle {
  margin: 0 0 var(--seed-dimension-x4);
  font-size: var(--seed-font-size-t7);
  line-height: var(--seed-line-height-t7);
  font-weight: var(--seed-font-weight-bold);
  letter-spacing: -0.02em;
}

.shop-category__uses-list {
  display: grid;
  gap: var(--seed-dimension-x2);
  margin: 0;
  padding-left: 1.2em;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-category__guide {
  margin: var(--seed-dimension-x8) 0 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-category__others {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--seed-dimension-x2);
  margin-top: var(--seed-dimension-x10);
}

.shop-category__others-label {
  margin-right: var(--seed-dimension-x1);
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-subtle);
}

body.shop .shop-category__others a {
  display: inline-block;
  padding: var(--seed-dimension-x1) var(--seed-dimension-x4);
  border: 1px solid var(--seed-color-stroke-neutral-muted);
  border-radius: 999px;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-medium);
  color: var(--seed-color-fg-neutral);
  text-decoration: none;
}

body.shop .shop-category__others a:hover {
  border-color: var(--seed-color-fg-neutral);
}

@media (min-width: 720px) {
  .shop-category__head {
    margin-bottom: var(--seed-dimension-x12);
  }

  .shop-category__uses-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--seed-dimension-x6);
    padding: 0;
    list-style: none;
  }
}

.shop-empty p {
  margin: var(--seed-dimension-x3) 0 0;
}

/* 바닥글 — 검은 바탕(고객센터 띠와 이어진다) */
.shop-footer {
  background: var(--seed-color-palette-static-black);
  color: var(--seed-color-palette-static-white-alpha-600);
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  border-top: 1px solid var(--seed-color-palette-static-white-alpha-100);
}

.shop-footer .shop-wrap {
  padding-top: var(--seed-dimension-x10);
  padding-bottom: var(--seed-dimension-x12);
}

.shop-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--seed-dimension-x3) var(--seed-dimension-x6);
  margin-bottom: var(--seed-dimension-x6);
  padding-bottom: var(--seed-dimension-x6);
  border-bottom: 1px solid var(--seed-color-palette-static-white-alpha-100);
}

body.shop .shop-footer__brand {
  margin: 0;
  font-size: var(--seed-font-size-t7);
  line-height: var(--seed-line-height-t7);
  font-weight: var(--seed-font-weight-bold);
  letter-spacing: -0.02em;
  color: var(--seed-color-palette-static-white);
}

.shop-footer__brand span {
  margin-left: var(--seed-dimension-x2);
  font-size: var(--seed-font-size-t2);
  letter-spacing: 0.18em;
  color: var(--seed-color-palette-static-white-alpha-600);
}

.shop-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--seed-dimension-x2) var(--seed-dimension-x5);
}

body.shop .shop-footer__nav a {
  color: var(--seed-color-palette-static-white-alpha-800);
  text-decoration: none;
}

body.shop .shop-footer__nav a:hover {
  text-decoration: underline;
}

.shop-footer p {
  margin: 0 0 var(--seed-dimension-x1);
}

.shop-footer p:empty {
  display: none;
}

body.shop .shop-footer a {
  color: var(--seed-color-palette-static-white-alpha-800);
}

body.shop .shop-footer__name {
  color: var(--seed-color-palette-static-white-alpha-800);
  font-weight: var(--seed-font-weight-bold);
}

/* 고객센터 띠의 작은 안내(입금 계좌 아래) — 큰 글자 줄 안에서 한 단계 작게 */
.shop-contact__note {
  display: block;
  margin-top: var(--seed-dimension-x1);
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  font-weight: var(--seed-font-weight-regular);
  color: var(--seed-color-palette-static-white-alpha-600);
}

/* 눈에는 안 보이고 화면 읽기 프로그램만 읽는 글자 — 아이콘 버튼의 이름 */
.shop-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 떠 있는 빠른 상담(카카오톡 → 네이버 톡톡 → 전화) — 2026-10-15. 어느 화면에서든 바로 묻게.
   겹침 순서: 머리글(10)보다 위, 본문 바로가기(20)보다 아래. 상품 화면엔 아래쪽 고정 바가 없어 위치는 모든 화면이 같다.
   카카오·네이버 색은 SEED 토큰에 없는 각 회사 브랜드 가이드 색이라 여기서 한 번만 정한다. */
:root {
  --shop-kakao-bg: #fee500; /* 카카오 브랜드 가이드 색 */
  --shop-kakao-fg: #191919; /* 카카오 브랜드 가이드 색 */
  --shop-naver-bg: #03c75a; /* 네이버 브랜드 가이드 색 */
}

.shop-float {
  position: fixed;
  right: var(--seed-dimension-x4);
  bottom: calc(var(--seed-dimension-x4) + env(safe-area-inset-bottom));
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: var(--seed-dimension-x2_5);
}

body.shop .shop-float__btn {
  display: grid;
  place-items: center;
  width: var(--seed-dimension-x13);
  height: var(--seed-dimension-x13);
  border-radius: var(--seed-radius-r3_5);
  box-shadow: var(--seed-shadow-s2);
  text-decoration: none;
  transition:
    transform var(--seed-duration-d4) var(--seed-timing-function-easing),
    box-shadow var(--seed-duration-d4) var(--seed-timing-function-easing);
}

body.shop .shop-float__btn svg {
  width: var(--seed-dimension-x6);
  height: var(--seed-dimension-x6);
}

body.shop .shop-float__btn:focus-visible {
  outline: 2px solid var(--seed-color-stroke-focus-ring);
  outline-offset: 3px;
}

body.shop .shop-float__btn--kakao {
  background: var(--shop-kakao-bg);
  color: var(--shop-kakao-fg);
}

body.shop .shop-float__btn--naver {
  background: var(--shop-naver-bg);
  color: var(--seed-color-palette-static-white);
}

/* 전화 = 진한 바탕 + 흰 글자. 검은 바닥글 위에서도 버튼 모양이 보이게 옅은 흰 테두리 */
body.shop .shop-float__btn--tel {
  background: var(--seed-color-bg-neutral-inverted);
  color: var(--seed-color-fg-neutral-inverted);
  border: 1px solid var(--seed-color-palette-static-white-alpha-200);
}

/* 공유(2026-10-17) = 흰 바탕 + 옅은 테두리. <button> 이라 기본 모양을 지운다. 누르면 share.js 가 기기 공유창 또는 주소 복사 */
body.shop .shop-float__btn--share {
  padding: 0;
  border: 1px solid var(--seed-color-stroke-neutral-muted);
  background: var(--seed-color-bg-layer-default);
  color: var(--seed-color-fg-neutral);
  font: inherit;
  cursor: pointer;
  appearance: none;
}

/* 공유 결과 안내(「주소를 복사했어요」) — 화면 아래 가운데, 2.4초 뒤 사라짐. share.js 가 만든다 */
.shop-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--seed-dimension-x6) + env(safe-area-inset-bottom));
  z-index: 16;
  max-width: calc(100vw - var(--seed-dimension-x10));
  padding: var(--seed-dimension-x2_5) var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-neutral-inverted);
  color: var(--seed-color-fg-neutral-inverted);
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  box-shadow: var(--seed-shadow-s2);
  opacity: 0;
  transform: translate(-50%, var(--seed-dimension-x2));
  pointer-events: none;
  transition:
    opacity var(--seed-duration-d4) var(--seed-timing-function-easing),
    transform var(--seed-duration-d4) var(--seed-timing-function-easing);
}

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

/* 2026-10-18 「어디에 쓰나요」·「자주 묻는 질문」(첫 화면) + 상품 요약 줄 — 사장님 「키워드를 본문에 녹여 SEO·AIEO 가 잘 되게」.
   글은 전부 HTML 에 바로 들어 있고(접지 않음) 한 항목 한두 줄. 폰 = 한 줄 카드, PC(720px↑) = 쓰임새 3칸 · 질문/답 두 칸. */
.shop-uses__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--seed-dimension-x3);
}

.shop-uses__item {
  padding: var(--seed-dimension-x5);
  border: 1px solid var(--seed-color-stroke-neutral-muted);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-layer-default);
}

.shop-uses__title {
  margin: 0 0 var(--seed-dimension-x2);
  font-size: var(--seed-font-size-t6);
  line-height: var(--seed-line-height-t6);
  font-weight: var(--seed-font-weight-bold);
}

.shop-uses__text {
  margin: 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-uses__link {
  display: inline-block;
  margin-top: var(--seed-dimension-x3);
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  font-weight: var(--seed-font-weight-bold);
  text-decoration: none;
  text-underline-offset: 3px;
}

.shop-uses__link:hover {
  text-decoration: underline;
}

.shop-faq {
  margin: 0;
  border-top: 1px solid var(--seed-color-fg-neutral);
}

.shop-faq__item {
  display: grid;
  gap: var(--seed-dimension-x2);
  padding: var(--seed-dimension-x5) 0;
  border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
}

.shop-faq__q {
  margin: 0;
  font-size: var(--seed-font-size-t6);
  line-height: var(--seed-line-height-t6);
  font-weight: var(--seed-font-weight-bold);
}

.shop-faq__a {
  margin: 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-neutral-muted);
}

@media (min-width: 720px) {
  .shop-uses__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shop-faq__item {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--seed-dimension-x8);
  }
}

/* 상품 화면 제목 아래 요약 한 단락(kv center_shop_seo 상품 요약) */
.shop-buy__summary {
  margin: 0 0 var(--seed-dimension-x3);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-neutral-muted);
}

/* 상품 화면 「후기」 절(2026-10-18, 밀스턴 구조 참고) — 평균 별점 · 별점별 개수(progress, 인라인 style 금지) · 목록 · 「더 보기」(details, JS 0).
   예시 묶음이면 노란 띠. 글은 전부 HTML 에 있어 검색엔진이 읽는다 */
/* 2026-10-23 절 바깥은 .shop-rv(후기 0 이어도 있음 — [후기 남기기]) · 요약·목록은 그 안의 .shop-reviews */
.shop-rv {
  margin-top: var(--seed-dimension-x14);
}

.shop-reviews {
  margin-top: var(--seed-dimension-x4);
}

.shop-reviews__sample {
  margin: 0 0 var(--seed-dimension-x4);
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r2);
  background: #fff7d6;
  color: #6b4e00;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  font-weight: var(--seed-font-weight-bold);
}

.shop-reviews__summary {
  display: grid;
  gap: var(--seed-dimension-x4);
  padding: var(--seed-dimension-x5);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-palette-gray-100);
}

.shop-reviews__avg {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--seed-dimension-x2);
  margin: 0;
}

.shop-reviews__avg strong {
  font-size: var(--seed-font-size-t11);
  line-height: var(--seed-line-height-t11);
  font-weight: var(--seed-font-weight-bold);
  letter-spacing: -0.02em;
}

.shop-reviews__avg-stars {
  font-size: var(--seed-font-size-t6);
  color: #f5a524;
  letter-spacing: 0.04em;
}

.shop-reviews__total {
  font-size: var(--seed-font-size-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-reviews__bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--seed-dimension-x1);
}

.shop-reviews__bar {
  display: grid;
  grid-template-columns: var(--seed-dimension-x8) minmax(0, 1fr) var(--seed-dimension-x8);
  align-items: center;
  gap: var(--seed-dimension-x2);
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-reviews__meter {
  width: 100%;
  height: var(--seed-dimension-x2);
  accent-color: var(--seed-color-fg-neutral);
}

.shop-reviews__bar-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.shop-reviews__list {
  list-style: none;
  margin: var(--seed-dimension-x4) 0 0;
  padding: 0;
}

.shop-review {
  padding: var(--seed-dimension-x4) 0;
  border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
}

.shop-review__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--seed-dimension-x2);
  margin: 0 0 var(--seed-dimension-x1);
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-review__stars {
  color: #f5a524;
  letter-spacing: 0.04em;
}

.shop-review__author {
  font-weight: var(--seed-font-weight-bold);
  color: var(--seed-color-fg-neutral);
}

.shop-review__text {
  margin: 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  white-space: pre-line;
}

.shop-reviews__more {
  margin-top: var(--seed-dimension-x3);
}

.shop-reviews__more > summary {
  cursor: pointer;
  padding: var(--seed-dimension-x3) 0;
  font-size: var(--seed-font-size-t4);
  font-weight: var(--seed-font-weight-bold);
}

@media (min-width: 720px) {
  .shop-reviews__summary {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: center;
  }
}

/* 폰 하단 바의 큰 [주문하기](2026-10-18, 사장님 「KREAM 처럼 구매 버튼이 늘 손가락 아래」) — 주문 칸이 있는 상품 화면만(.shop-float--buy).
   상담 버튼 4개는 작은 아이콘으로 다 남고(글자는 읽기 프로그램용 aria-label), 오른쪽 큰 버튼 글자는 buybar.js 가 주문 칸 상태를 따라 바꾼다
   (「크기 넣고 주문」 → 「주문하기 · 합계」 → 「주문서로」 → 「주문 접수됨」). 10-18 00:5x 의 따라다니던 「견적 · 주문」 알약은 이 버튼이 대신한다.
   PC(768px↑)는 오른쪽 금액·주문 칸이 sticky 로 따라오므로 이 버튼은 숨긴다. */
body.shop .shop-float__buy {
  display: none;
}

/* 주문 버튼·주문서로 돌아올 때 붙박이 머리글 아래로 제목이 숨지 않게 */
.shop-calc,
.shop-order__form,
.shop-order__done {
  scroll-margin-top: var(--seed-dimension-x16);
}

@media (hover: hover) {
  body.shop .shop-float__btn:hover {
    transform: translateY(calc(var(--seed-dimension-x0_5) * -1));
    box-shadow: var(--seed-shadow-s3);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.shop .shop-float__btn {
    transition: none;
  }

  body.shop .shop-float__btn:hover {
    transform: none;
  }
}

/* 폰(767px↓): 세로로 쌓인 둥근 버튼이 본문 오른쪽 글자를 가렸다(2026-10-17) → 화면 맨 아래 한 줄 바(카카오톡 · 네이버 톡톡 · 전화 · 공유, 아이콘 위·글자 아래)로 바꾸고
   본문엔 바 높이만큼 아래 여백을 줘 어느 자리에서도 글자가 가리지 않는다. PC(768px↑)는 그대로.
   바 높이 = 버튼 x14 + 위아래 x2 (+ 홈 표시줄 안전 영역). 글자(::after)는 눈으로 보는 용도, 읽기 프로그램은 aria-label 을 읽는다. */
@media (max-width: 767px) {
  body.shop:has(.shop-float) {
    padding-bottom: calc(var(--seed-dimension-x14) + var(--seed-dimension-x4) + env(safe-area-inset-bottom));
  }

  .shop-float {
    right: 0;
    left: 0;
    bottom: 0;
    flex-direction: row;
    gap: var(--seed-dimension-x2);
    padding: var(--seed-dimension-x2) var(--seed-dimension-x4) calc(var(--seed-dimension-x2) + env(safe-area-inset-bottom));
    background: var(--seed-color-bg-layer-default);
    border-top: 1px solid var(--seed-color-stroke-neutral-muted);
  }

  body.shop .shop-float__btn {
    flex: 1 1 0;
    grid-auto-flow: row;
    align-content: center;
    gap: var(--seed-dimension-x0_5);
    width: auto;
    min-width: 0;
    height: var(--seed-dimension-x14);
    border-radius: var(--seed-radius-r3);
    box-shadow: none;
    font-size: var(--seed-font-size-t3);
    line-height: var(--seed-line-height-t3);
    font-weight: var(--seed-font-weight-bold);
    white-space: nowrap;
  }

  body.shop .shop-float__btn svg {
    width: var(--seed-dimension-x5);
    height: var(--seed-dimension-x5);
  }

  body.shop .shop-float__btn--kakao::after {
    content: "카카오톡";
  }

  body.shop .shop-float__btn--naver::after {
    content: "네이버 톡톡";
  }

  body.shop .shop-float__btn--tel::after {
    content: "전화";
  }

  body.shop .shop-float__btn--share::after {
    content: "공유";
  }

  /* 흰 바 위에서는 전화 버튼의 옅은 흰 테두리가 필요 없다 */
  body.shop .shop-float__btn--tel {
    border-color: transparent;
  }

  /* 안내 말풍선은 바 위에 */
  .shop-toast {
    bottom: calc(var(--seed-dimension-x14) + var(--seed-dimension-x8) + env(safe-area-inset-bottom));
  }

  /* 주문 바(.shop-float--buy, 상품 화면): 상담 4개 = 작은 둥근 아이콘(x10, 글자 없음) · 오른쪽 큰 [주문하기] = 남는 폭 전부(바 높이 x14 그대로) */
  body.shop .shop-float--buy {
    gap: var(--seed-dimension-x1_5, 6px);
  }

  body.shop .shop-float--buy .shop-float__btn {
    flex: 0 0 auto;
    width: var(--seed-dimension-x10);
    height: var(--seed-dimension-x10);
    border-radius: var(--seed-radius-full);
    align-self: center;
  }

  body.shop .shop-float--buy .shop-float__btn::after {
    content: none;
  }

  body.shop .shop-float--buy .shop-float__btn svg {
    width: var(--seed-dimension-x5);
    height: var(--seed-dimension-x5);
  }

  body.shop .shop-float--buy .shop-float__buy {
    display: grid;
    place-items: center;
    flex: 1 1 auto;
    min-width: 0;
    height: var(--seed-dimension-x14);
    margin-left: var(--seed-dimension-x1);
    padding: 0 var(--seed-dimension-x3);
    border: 0;
    border-radius: var(--seed-radius-r3);
    background: var(--seed-color-bg-neutral-inverted);
    color: var(--seed-color-fg-neutral-inverted);
    font: inherit;
    font-size: var(--seed-font-size-t4);
    line-height: var(--seed-line-height-t4);
    font-weight: var(--seed-font-weight-bold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    appearance: none;
  }

  body.shop .shop-float--buy .shop-float__buy[hidden] {
    display: none;
  }

  body.shop .shop-float--buy .shop-float__buy:focus-visible {
    outline: 2px solid var(--seed-color-stroke-focus-ring);
    outline-offset: 3px;
  }

  body.shop .shop-float--buy .shop-float__buy[data-state="done"] {
    background: var(--seed-color-bg-neutral-weak);
    color: var(--seed-color-fg-neutral);
  }
}

/* PC(720px↑, 기존 두 칸 기준점과 같음) 상품 화면 — 오른쪽 금액·주문 칸이 사진·상세를 내려도 따라온다(KREAM 식 sticky). 그리드: 왼쪽 = 사진 → 상세 → 다른 상품, 오른쪽 = 주문 칸 */
@media (min-width: 720px) {
  .shop-product__top {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas:
      "gallery buy"
      "detail buy"
      "reviews buy"
      "related buy";
    align-items: start;
  }

  .shop-product__top > .shop-gallery {
    grid-area: gallery;
  }

  .shop-product__top > .shop-detail {
    grid-area: detail;
  }

  .shop-product__top > .shop-rv {
    grid-area: reviews;
  }

  .shop-product__top > .shop-related {
    grid-area: related;
  }

  .shop-product__top > .shop-buy {
    grid-area: buy;
    position: sticky;
    top: calc(var(--seed-dimension-x14) + var(--seed-dimension-x4));
    max-height: calc(100vh - var(--seed-dimension-x14) - var(--seed-dimension-x8));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: var(--seed-dimension-x1);
  }
}

/* 아주 좁은 폰(359px↓): 네 칸이 좁아 긴 글자만 줄인다 · 주문 바의 큰 버튼 글자도 한 단계 작게 */
@media (max-width: 359px) {
  body.shop .shop-float__btn--naver::after {
    content: "톡톡";
  }

  body.shop .shop-float--buy .shop-float__buy {
    font-size: var(--seed-font-size-t3);
    line-height: var(--seed-line-height-t3);
    padding: 0 var(--seed-dimension-x2);
  }
}

@media (min-width: 768px) {
  .shop-float {
    right: var(--seed-dimension-x6);
    bottom: calc(var(--seed-dimension-x6) + env(safe-area-inset-bottom));
  }
}

/* 바닥글 맨 아래 방문자 수(2026-10-17) — 보드에서 켰을 때만 있다. visits.js 가 숫자를 채운 뒤에 보인다(그 전엔 hidden).
   body.shop 을 붙여 .shop-footer p 의 아래 여백 규칙보다 앞선다 */
body.shop .shop-footer__visits {
  margin: var(--seed-dimension-x2) 0 0;
  font-size: var(--seed-font-size-t2);
  line-height: var(--seed-line-height-t2);
  color: var(--seed-color-palette-static-white-alpha-500);
}

@media print {
  .shop-float {
    display: none;
  }
}

/* ★ 2026-10-20 견적서(계산기 결과 → 페이지 안 견적서 판 → 인쇄/PDF) */
.shop-calc__actions{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-top:8px}
.shop-calc__qty{max-width:110px}
.shop-calc__quote[hidden]{display:none}
.shop-quote-sheet{max-width:860px;margin:16px auto;padding:0 16px 24px;background:#fff;scroll-margin-top:var(--seed-dimension-x16, 64px)}
.shop-quote-sheet__bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 0;border-bottom:1px solid #e5e7eb;margin-bottom:12px}
.shop-quote-sheet__hint{flex-basis:100%;margin:4px 0 0;font-size:.82rem;color:#6b7280}
.shop-quote-paper{border:1px solid #d1d5db;padding:24px;color:#111;font-size:14px;line-height:1.5}
.shop-quote-paper__title{text-align:center;font-size:28px;letter-spacing:.5em;margin:0 0 8px}
.shop-quote-paper__meta{text-align:center;color:#555;margin:0 0 16px;font-size:13px}
.shop-quote-paper__parties{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.shop-quote-paper__party{width:100%;border-collapse:collapse;font-size:13px}
.shop-quote-paper__party caption{text-align:left;font-weight:700;padding:0 0 4px}
.shop-quote-paper__party th{width:34%;text-align:left;background:#f3f4f6;border:1px solid #d1d5db;padding:5px 8px;font-weight:600}
.shop-quote-paper__party td{border:1px solid #d1d5db;padding:5px 8px;min-height:1.6em}
.shop-quote-paper__party td[contenteditable]:empty:before{content:attr(data-ph);color:#9ca3af}
.shop-quote-paper__sum{margin:8px 0 10px;font-size:15px}
.shop-quote-paper__items{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:12px}
.shop-quote-paper__items th,.shop-quote-paper__items td{border:1px solid #d1d5db;padding:6px 8px;text-align:right}
.shop-quote-paper__items th{background:#f3f4f6;text-align:center}
.shop-quote-paper__items td:first-child,.shop-quote-paper__items td:nth-child(2){text-align:left}
.shop-quote-paper__notes{margin:0 0 14px;padding-left:18px;font-size:12px;color:#444}
.shop-quote-paper__sign{text-align:right;font-weight:700;margin:0}
@media (max-width:640px){.shop-quote-paper__parties{grid-template-columns:1fr}.shop-quote-paper{padding:14px}.shop-quote-paper__items{font-size:12px}}
@media print{
  body.shop-quote-open>*:not(.shop-quote-sheet){display:none!important}
  .shop-quote-sheet{margin:0;padding:0;max-width:none}
  .shop-quote-sheet__bar{display:none}
  .shop-quote-paper{border:0;padding:0}
  @page{margin:14mm}
  *{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}
/* 2026-10-20 견적서 표 — 숫자 칸 줄바꿈 없이, 폰은 표를 가로 스크롤 */
.shop-quote-paper__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:12px}
.shop-quote-paper__items{min-width:620px;margin-bottom:0}
.shop-quote-paper__items th,.shop-quote-paper__items td:nth-child(n+3){white-space:nowrap}
.shop-quote-paper__items td:first-child{min-width:150px}
@media print{.shop-quote-paper__scroll{overflow:visible}.shop-quote-paper__items{min-width:0;width:100%}}

/* ★ 2026-10-20 증빙 — 주문하기 버튼 위 작은 한 줄(현금영수증 자동 · [변경]을 누를 때만 소득공제·지출증빙·세금계산서 고르기) · 주문 완료 화면 [🧾 거래명세서 인쇄] */
.shop-order__proof,
.shop-order__proof-panel {
  display: grid;
  gap: var(--seed-dimension-x3);
}
.shop-order__proof-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--seed-dimension-x2);
  margin: 0;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}
.shop-order__proof-toggle {
  min-height: var(--seed-dimension-x8, 32px);
  padding: 0 var(--seed-dimension-x1);
  border: 0;
  background: none;
  font: inherit;
  color: var(--seed-color-fg-neutral);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.shop-order__proof-toggle:focus-visible {
  outline: 2px solid var(--seed-color-stroke-focus-ring, #2563eb);
  outline-offset: 2px;
}
.shop-order__proof-kinds {
  display: grid;
  gap: var(--seed-dimension-x2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.shop-order__proof-kinds legend {
  padding: 0;
  margin-bottom: var(--seed-dimension-x2);
}
.shop-order__tax {
  display: grid;
  gap: var(--seed-dimension-x3);
}
.shop-order__tax[hidden] {
  display: none;
}
.shop-order__tax .shop-order__more summary {
  margin-left: 0;
}
.shop-order__tax .shop-order__more > * + * {
  margin-top: var(--seed-dimension-x3);
}
.shop-order__stmt {
  justify-self: start;
}
.shop-quote-paper__sign--to {
  margin-top: var(--seed-dimension-x2, 8px);
}

/* ★ 2026-10-23 손님 후기 — 쓰기 칸(스마트스토어 리뷰 쓰기 순서: 별점 → 글 → 사진 → 이름·휴대폰 → [등록]) · 거르기·정렬 · 사진 · 쇼홈 답글 ·
   사진 크게 보기(같은 화면 위 한 겹). 별 색은 위 후기 절과 같은 #f5a524. 폰 375 먼저, PC 도 같은 모양 */
.shop-rv__open {
  margin-top: var(--seed-dimension-x4);
}

.shop-rv__thanks,
.shop-rv__empty {
  margin: 0 0 var(--seed-dimension-x4);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  text-align: center;
  color: var(--seed-color-fg-neutral-muted);
}

.shop-rv__thanks {
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-positive-weak);
  color: var(--seed-color-fg-positive);
  font-weight: var(--seed-font-weight-bold);
}

.shop-rv-write {
  display: grid;
  gap: var(--seed-dimension-x4);
  margin: 0 0 var(--seed-dimension-x6);
  padding: var(--seed-dimension-x5);
  border: 1px solid var(--seed-color-stroke-neutral-weak);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-layer-default);
  scroll-margin-top: var(--seed-dimension-x16);
}

.shop-rv-write__rate {
  display: grid;
  justify-items: center;
  gap: var(--seed-dimension-x1);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.shop-rv-write__label {
  margin: 0;
  padding: 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-bold);
}

.shop-rv-write__stars {
  display: flex;
  gap: var(--seed-dimension-x1);
}

/* 별 한 칸 = 48px 누르는 자리 · 진짜 radio 는 그 위에 투명하게(키보드 화살표·읽기 프로그램 그대로) */
.shop-rv-write__star {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--seed-dimension-x12);
  height: var(--seed-dimension-x12);
  border-radius: var(--seed-radius-r2);
  font-size: var(--seed-font-size-t10);
  color: var(--seed-color-palette-gray-300);
  cursor: pointer;
}

.shop-rv-write__star--on {
  color: #f5a524;
}

.shop-rv-write__star:focus-within {
  outline: 2px solid var(--seed-color-stroke-focus-ring);
  outline-offset: 1px;
}

.shop-rv-write__radio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.shop-rv-write__mood {
  margin: 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-bold);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-rv-write__field {
  display: grid;
  gap: var(--seed-dimension-x1);
  min-width: 0;
}

.shop-rv-write__text,
.shop-rv-write__input {
  width: 100%;
  min-height: 44px;
  padding: var(--seed-dimension-x3);
  border: 1px solid var(--seed-color-stroke-neutral-weak);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-layer-default);
  font: inherit;
  font-size: var(--seed-font-size-t5);
  color: var(--seed-color-fg-neutral);
}

.shop-rv-write__text {
  min-height: calc(var(--seed-dimension-x16) * 2);
  resize: vertical;
}

.shop-rv-write__count {
  margin: calc(var(--seed-dimension-x3) * -1) 0 0;
  text-align: right;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-subtle);
  font-variant-numeric: tabular-nums;
}

.shop-rv-write__photo {
  display: grid;
  gap: var(--seed-dimension-x2);
}

.shop-rv-write__pick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--seed-dimension-x2);
}

.shop-rv-write__pick-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--seed-dimension-x3);
  border: 1px solid var(--seed-color-stroke-neutral-weak);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-layer-default);
  font-size: var(--seed-font-size-t4);
  font-weight: var(--seed-font-weight-bold);
  cursor: pointer;
}

.shop-rv-write__pick-button:focus-within {
  outline: 2px solid var(--seed-color-stroke-focus-ring);
  outline-offset: 1px;
}

/* 파일 칸은 눈에만 숨김 — 글자를 누르면 폰 카메라·사진첩이 열린다 */
.shop-rv-write__file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.shop-rv-write__photo-note,
.shop-rv-write__hint {
  margin: 0;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-rv-write__photo-note:empty,
.shop-rv-write__photos:empty,
.shop-rv-write__error:empty {
  display: none;
}

.shop-rv-write__photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--seed-dimension-x2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-rv-write__shot {
  display: grid;
  gap: var(--seed-dimension-x1);
  justify-items: center;
}

.shop-rv-write__shot img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-neutral-weak);
}

.shop-rv-write__drop {
  padding: var(--seed-dimension-x1) var(--seed-dimension-x2);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--seed-font-size-t3);
  color: var(--seed-color-fg-neutral-muted);
  text-decoration: underline;
  cursor: pointer;
}

.shop-rv-write__who {
  display: grid;
  gap: var(--seed-dimension-x3);
}

/* 봇만 채우는 칸 — 사람 눈·키보드에 안 걸린다 */
.shop-rv-write__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.shop-rv-write__error {
  margin: 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-critical);
}

.shop-rv-write__actions {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--seed-dimension-x2);
}

/* 목록 위 거르기(전체·사진 후기) · 정렬 — 후기가 2개 이상일 때만 review.js 가 보인다 */
.shop-rv-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--seed-dimension-x2);
  margin-top: var(--seed-dimension-x4);
}

.shop-rv-tools__filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--seed-dimension-x2);
}

.shop-rv-chip,
.shop-rv-tools__select {
  min-height: var(--seed-dimension-x10);
  padding: 0 var(--seed-dimension-x3);
  border: 1px solid var(--seed-color-stroke-neutral-weak);
  background: var(--seed-color-bg-layer-default);
  font: inherit;
  font-size: var(--seed-font-size-t4);
  color: var(--seed-color-fg-neutral);
}

.shop-rv-chip {
  border-radius: var(--seed-radius-full);
  cursor: pointer;
}

.shop-rv-chip[aria-pressed="true"] {
  border-color: var(--seed-color-bg-neutral-inverted);
  background: var(--seed-color-bg-neutral-inverted);
  color: var(--seed-color-fg-neutral-inverted);
  font-weight: var(--seed-font-weight-bold);
}

.shop-rv-tools__select {
  border-radius: var(--seed-radius-r2);
}

@media (min-width: 480px) {
  .shop-rv-write__who {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 후기 한 건 — 구매 확인 · 사진 줄(누르면 크게) · 글 5줄 접기 · 쇼홈 답글 */
.shop-review__bought {
  padding: 0 var(--seed-dimension-x1_5);
  border-radius: var(--seed-radius-r1);
  background: var(--seed-color-bg-positive-weak);
  color: var(--seed-color-fg-positive);
  font-size: var(--seed-font-size-t2);
  line-height: var(--seed-line-height-t3);
  font-weight: var(--seed-font-weight-bold);
}

.shop-review__photos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--seed-dimension-x2);
  margin: var(--seed-dimension-x2) 0;
  padding: 0;
  list-style: none;
}

.shop-review__shot {
  display: block;
  border-radius: var(--seed-radius-r2);
  overflow: hidden;
}

body.shop .shop-review__shot img {
  width: var(--seed-dimension-x16);
  height: var(--seed-dimension-x16);
  object-fit: cover;
  background: var(--seed-color-bg-neutral-weak);
}

.shop-review__text--clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}

.shop-review__more {
  margin-top: var(--seed-dimension-x1);
  padding: var(--seed-dimension-x1) 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--seed-font-size-t3);
  font-weight: var(--seed-font-weight-bold);
  color: var(--seed-color-fg-neutral-muted);
  text-decoration: underline;
  cursor: pointer;
}

.shop-review__reply {
  margin: var(--seed-dimension-x3) 0 0;
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-neutral-weak);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
}

.shop-review__reply-date {
  font-size: var(--seed-font-size-t3);
  color: var(--seed-color-fg-neutral-muted);
}

@media (min-width: 720px) {
  body.shop .shop-review__shot img {
    width: calc(var(--seed-dimension-x10) * 2);
    height: calc(var(--seed-dimension-x10) * 2);
  }
}

/* 사진 크게 보기 — 화면 전체 어두운 한 겹(머리글·상담 바보다 위) · 가운데 큰 사진 · 닫기·이전·다음 48px */
body.shop-rv-viewing {
  overflow: hidden;
}

.shop-rv-view {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: var(--seed-dimension-x14) var(--seed-dimension-x4);
  background: var(--seed-color-palette-static-black-alpha-900);
}

body.shop .shop-rv-view__img {
  max-width: 100%;
  max-height: calc(100vh - var(--seed-dimension-x14) * 2);
  border-radius: var(--seed-radius-r2);
  object-fit: contain;
}

.shop-rv-view__close,
.shop-rv-view__prev,
.shop-rv-view__next {
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--seed-dimension-x12);
  height: var(--seed-dimension-x12);
  border: 0;
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-palette-static-white-alpha-200);
  color: var(--seed-color-palette-static-white);
  font: inherit;
  font-size: var(--seed-font-size-t8);
  cursor: pointer;
}

.shop-rv-view__close {
  top: var(--seed-dimension-x3);
  right: var(--seed-dimension-x3);
}

.shop-rv-view__prev,
.shop-rv-view__next {
  top: 50%;
  transform: translateY(-50%);
}

.shop-rv-view__prev {
  left: var(--seed-dimension-x2);
}

.shop-rv-view__next {
  right: var(--seed-dimension-x2);
}

.shop-rv-view__count {
  position: absolute;
  right: 0;
  bottom: var(--seed-dimension-x4);
  left: 0;
  margin: 0;
  text-align: center;
  font-size: var(--seed-font-size-t4);
  color: var(--seed-color-palette-static-white);
}

/* 2026-10-24 후기 옵션 줄 — 구매 확인된 후기의 주문 줄 「종류 · 가로 × 세로」(스마트스토어 리뷰처럼 작게) */
.shop-review__option {
  margin: 0 0 var(--seed-dimension-x1);
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

/* ★ 2026-10-25 3단계 영상 후기 — 쓰기 칸 영상 1개(찍기·사진첩 · 미리보기 · 길이) · 작은 사진 줄의 영상 표지(▶ 길이) · 「사진·영상 준비 중」 자리 ·
   크게 보기 안 영상(그 자리 재생). 파일은 고도 이미지호스팅 주소 — 폰 375 먼저, PC 도 같은 모양 */
.shop-rv-write__video {
  display: grid;
  gap: var(--seed-dimension-x2);
}

.shop-rv-write__video-note {
  margin: 0;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-rv-write__video-note:empty {
  display: none;
}

.shop-rv-write__clip {
  display: grid;
  gap: var(--seed-dimension-x1);
  justify-items: start;
  min-width: 0;
}

body.shop .shop-rv-write__preview {
  display: block;
  width: 100%;
  max-width: 320px;
  max-height: 240px;
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-palette-static-black);
  object-fit: contain;
}

.shop-rv-write__clip-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--seed-dimension-x2);
  margin: 0;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
  font-variant-numeric: tabular-nums;
}

.shop-rv-write__clip-info [data-clip-length]:empty {
  display: none;
}

.shop-review__shot--video {
  position: relative;
}

/* 영상 표지 위 왼쪽 아래 「▶ 0:08」 */
.shop-review__play {
  position: absolute;
  left: var(--seed-dimension-x1);
  bottom: var(--seed-dimension-x1);
  padding: 0 var(--seed-dimension-x1);
  border-radius: var(--seed-radius-r1);
  background: var(--seed-color-palette-static-black-alpha-700);
  color: var(--seed-color-palette-static-white);
  font-size: var(--seed-font-size-t2);
  line-height: var(--seed-line-height-t3);
  font-weight: var(--seed-font-weight-bold);
  font-variant-numeric: tabular-nums;
}

/* 「사진·영상 준비 중」 자리 — 작은 사진과 같은 크기(올린 뒤 1~2분이면 고도 사진·영상으로 바뀐다) */
.shop-review__wait {
  display: grid;
  place-items: center;
  width: var(--seed-dimension-x16);
  height: var(--seed-dimension-x16);
  padding: var(--seed-dimension-x1);
  border: 1px dashed var(--seed-color-stroke-neutral-weak);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-neutral-weak);
  font-size: var(--seed-font-size-t2);
  line-height: var(--seed-line-height-t2);
  text-align: center;
  color: var(--seed-color-fg-neutral-muted);
  word-break: keep-all;
}

@media (min-width: 720px) {
  .shop-review__wait {
    width: calc(var(--seed-dimension-x10) * 2);
    height: calc(var(--seed-dimension-x10) * 2);
  }
}

/* 크게 보기 안 영상 — 사진과 같은 자리(표지를 받기 전에도 재생 단추가 넉넉하게 폭 100%, 세로 영상은 양옆 검은 띠) */
body.shop .shop-rv-view__video {
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - var(--seed-dimension-x14) * 2);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-palette-static-black);
}

/* ★ 2026-10-24 상품 문의(스마트스토어 문의 모양 · 글자는 메이드) — 머리(제목 왼쪽 · [문의하기] 오른쪽) → 같은 자리 쓰기 칸(🔒 비밀글 기본) →
   거르기(전체·답 드림·답 기다림 · 비밀글 빼고 보기) → 목록(질문 3줄 접힘 → 펼치면 회색 상자 「쇼홈」 답). 비밀글은 「비밀글이에요 🔒」 줄과 상태·날짜만,
   펼치면 비밀번호 칸. 후기 절(.shop-rv)과 클래스가 겹치지 않게 .shop-iq 로만. 폰 375 먼저, PC 도 같은 모양 */
.shop-iq {
  margin-top: var(--seed-dimension-x14);
  padding-top: var(--seed-dimension-x10);
  border-top: 1px solid var(--seed-color-stroke-neutral-muted);
}

.shop-iq__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--seed-dimension-x3);
  margin-bottom: var(--seed-dimension-x3);
}

.shop-iq__heading {
  min-width: 0;
}

.shop-iq__heading .shop-eyebrow {
  margin-bottom: var(--seed-dimension-x1);
}

.shop-iq__lead,
.shop-iq__empty,
.shop-iq__none {
  margin: 0 0 var(--seed-dimension-x4);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-iq__empty,
.shop-iq__none {
  margin: var(--seed-dimension-x4) 0;
  text-align: center;
}

.shop-iq__thanks {
  margin: 0 0 var(--seed-dimension-x4);
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-positive-weak);
  color: var(--seed-color-fg-positive);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-bold);
  text-align: center;
}

/* 쓰기 칸 — 후기 쓰기 칸과 같은 상자 */
.shop-iq-write {
  display: grid;
  gap: var(--seed-dimension-x4);
  margin: 0 0 var(--seed-dimension-x6);
  padding: var(--seed-dimension-x5);
  border: 1px solid var(--seed-color-stroke-neutral-weak);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-layer-default);
  scroll-margin-top: var(--seed-dimension-x16);
}

.shop-iq-write__field {
  display: grid;
  gap: var(--seed-dimension-x1);
  min-width: 0;
}

.shop-iq-write__label {
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-bold);
}

.shop-iq-write__text,
.shop-iq-write__input {
  width: 100%;
  min-height: 44px;
  padding: var(--seed-dimension-x3);
  border: 1px solid var(--seed-color-stroke-neutral-weak);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-layer-default);
  font: inherit;
  font-size: var(--seed-font-size-t5);
  color: var(--seed-color-fg-neutral);
}

.shop-iq-write__text {
  min-height: calc(var(--seed-dimension-x16) * 2);
  resize: vertical;
}

.shop-iq-write__count {
  margin: calc(var(--seed-dimension-x3) * -1) 0 0;
  text-align: right;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-subtle);
  font-variant-numeric: tabular-nums;
}

/* 🔒 비밀글 — 켜져 있을 때만 비밀번호 칸(inquiry.js 가 숨김을 바꾼다) */
.shop-iq-write__secret {
  display: grid;
  gap: var(--seed-dimension-x3);
  padding: var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-palette-gray-100);
}

.shop-iq-write__check,
.shop-iq-tools__secret {
  display: flex;
  align-items: center;
  gap: var(--seed-dimension-x2);
  min-height: 44px;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  cursor: pointer;
}

.shop-iq-write__check {
  font-weight: var(--seed-font-weight-bold);
}

.shop-iq-write__check input,
.shop-iq-tools__check {
  flex: none;
  width: var(--seed-dimension-x5);
  height: var(--seed-dimension-x5);
  margin: 0;
  accent-color: var(--seed-color-fg-neutral);
}

.shop-iq-write__who {
  display: grid;
  gap: var(--seed-dimension-x3);
}

.shop-iq-write__hint {
  margin: 0;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

/* 비밀번호 칸 아래 한 줄(잊으면 못 연다) — 칸과 함께 숨는다(2026-10-24 반박 검토) */
.shop-iq-write__note {
  display: block;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-iq-write__tips > summary {
  cursor: pointer;
  font-size: var(--seed-font-size-t4);
  font-weight: var(--seed-font-weight-bold);
}

.shop-iq-write__tip-list {
  margin: var(--seed-dimension-x2) 0 0;
  padding-left: var(--seed-dimension-x5);
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

/* 봇만 채우는 칸 — 사람 눈·키보드에 안 걸린다 */
.shop-iq-write__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.shop-iq-write__error,
.shop-iq-open__error {
  margin: 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-critical);
}

.shop-iq-write__error:empty,
.shop-iq-open__error:empty {
  display: none;
}

.shop-iq-write__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--seed-dimension-x2);
}

/* 거르기 — 문의가 2개 이상일 때만 inquiry.js 가 보인다 */
.shop-iq-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--seed-dimension-x2);
  margin-bottom: var(--seed-dimension-x2);
}

.shop-iq-tools__filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--seed-dimension-x2);
}

.shop-iq-chip {
  min-height: var(--seed-dimension-x10);
  padding: 0 var(--seed-dimension-x3);
  border: 1px solid var(--seed-color-stroke-neutral-weak);
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-bg-layer-default);
  font: inherit;
  font-size: var(--seed-font-size-t4);
  color: var(--seed-color-fg-neutral);
  cursor: pointer;
}

.shop-iq-chip[aria-pressed="true"] {
  border-color: var(--seed-color-bg-neutral-inverted);
  background: var(--seed-color-bg-neutral-inverted);
  color: var(--seed-color-fg-neutral-inverted);
  font-weight: var(--seed-font-weight-bold);
}

/* 목록 한 줄 — 질문(접힘 3줄) · 아래 줄(상태 | 이름 | 날짜) · 오른쪽 펼침 화살표 */
.shop-iq__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--seed-color-stroke-neutral-muted);
}

.shop-iq-item {
  border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
}

.shop-iq-item__sum {
  position: relative;
  display: block;
  padding: var(--seed-dimension-x4) var(--seed-dimension-x8) var(--seed-dimension-x4) 0;
  list-style: none;
  cursor: pointer;
}

.shop-iq-item__sum::-webkit-details-marker {
  display: none;
}

/* 펼침 화살표(글자 없이 테두리로) — 펼치면 위로 */
.shop-iq-item__sum::after {
  content: "";
  position: absolute;
  top: var(--seed-dimension-x5);
  right: var(--seed-dimension-x2);
  width: var(--seed-dimension-x2);
  height: var(--seed-dimension-x2);
  border-right: 2px solid var(--seed-color-fg-neutral-muted);
  border-bottom: 2px solid var(--seed-color-fg-neutral-muted);
  transform: rotate(45deg);
}

.shop-iq-item__box[open] > .shop-iq-item__sum::after {
  top: var(--seed-dimension-x6);
  transform: rotate(-135deg);
}

.shop-iq-item__q {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-size: var(--seed-font-size-t5);
  line-height: var(--seed-line-height-t5);
  white-space: pre-line;
}

.shop-iq-item__box[open] .shop-iq-item__q {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
  overflow: visible;
}

.shop-iq-item__q--secret {
  color: var(--seed-color-fg-neutral-muted);
}

.shop-iq-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--seed-dimension-x1) var(--seed-dimension-x2);
  margin-top: var(--seed-dimension-x1_5);
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-iq-item__meta > * + *::before {
  content: "|";
  margin-right: var(--seed-dimension-x2);
  color: var(--seed-color-stroke-neutral-weak);
}

.shop-iq-item__status {
  font-weight: var(--seed-font-weight-bold);
}

.shop-iq-item__status--answered {
  color: var(--seed-color-fg-positive);
}

.shop-iq-item__body {
  padding: 0 0 var(--seed-dimension-x4);
}

.shop-iq-item__answer {
  display: grid;
  gap: var(--seed-dimension-x1_5);
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-neutral-weak);
}

.shop-iq-item__answer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--seed-dimension-x2);
  margin: 0;
}

.shop-iq-item__by {
  padding: 0 var(--seed-dimension-x1_5);
  border-radius: var(--seed-radius-r1);
  background: var(--seed-color-bg-neutral-inverted);
  color: var(--seed-color-fg-neutral-inverted);
  font-size: var(--seed-font-size-t2);
  line-height: var(--seed-line-height-t3);
  font-weight: var(--seed-font-weight-bold);
}

.shop-iq-item__answer-date {
  font-size: var(--seed-font-size-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-iq-item__answer-text {
  margin: 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  white-space: pre-line;
}

.shop-iq-item__wait,
.shop-iq-item__lock {
  margin: 0 0 var(--seed-dimension-x2);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-neutral-muted);
}

/* 비밀번호 칸 — 한 줄(칸 + [열기]) · 틀리면 아래 한 줄 */
.shop-iq-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--seed-dimension-x2);
  max-width: 360px;
}

.shop-iq-open__input {
  width: 100%;
  min-height: 44px;
  padding: var(--seed-dimension-x2) var(--seed-dimension-x3);
  border: 1px solid var(--seed-color-stroke-neutral-weak);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-layer-default);
  font: inherit;
  font-size: var(--seed-font-size-t5);
  color: var(--seed-color-fg-neutral);
}

.shop-iq-open__submit {
  min-height: 44px;
}

.shop-iq-open__error {
  grid-column: 1 / -1;
}

.shop-iq__more-button {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: var(--seed-dimension-x3);
  border: 1px solid var(--seed-color-stroke-neutral-weak);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-layer-default);
  font: inherit;
  font-size: var(--seed-font-size-t4);
  font-weight: var(--seed-font-weight-bold);
  color: var(--seed-color-fg-neutral);
  cursor: pointer;
}

.shop-iq__more {
  margin-top: var(--seed-dimension-x3);
}

.shop-iq__more > summary {
  cursor: pointer;
  padding: var(--seed-dimension-x3) 0;
  font-size: var(--seed-font-size-t4);
  font-weight: var(--seed-font-weight-bold);
}

@media (min-width: 480px) {
  .shop-iq-write__who {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* PC(720px↑) 상품 화면 그리드 — 문의 절이 있을 때만 후기 아래 한 칸을 더한다(없는 화면은 옛 칸 그대로) */
@media (min-width: 720px) {
  .shop-product__top:has(> .shop-iq) {
    grid-template-areas:
      "gallery buy"
      "detail buy"
      "reviews buy"
      "inquiries buy"
      "related buy";
  }

  .shop-product__top:has(> .shop-iq) > .shop-iq {
    grid-area: inquiries;
  }
}

/* 2026-10-24 상품 화면 가격 아래 「궁금한 점은 문의 N개 보기」(같은 쪽 「문의」 절로) — 문의 절로 건너뛰면 붙박이 머리글 아래로 제목이 숨지 않게 */
.shop-buy__ask {
  margin: var(--seed-dimension-x2) 0 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-neutral-muted);
}

/* 글자색은 위 p 에서 물려받는다(body.shop a = inherit) */
.shop-buy__ask a {
  display: inline-block;
  padding: var(--seed-dimension-x1) 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.shop-iq {
  scroll-margin-top: var(--seed-dimension-x16);
}

/* 2026-10-27 사장님 「옵션 간단히 선택할 수 있게」 — 한곳에 상품 고르기 = 두 줄 버튼(종류 → 벨크로 색, calc.js) · 원래 고르기 칸은 숨기고 값만 보낸다 */
.shop-calc__pick {
  display: grid;
  gap: var(--seed-dimension-x3);
}

.shop-calc__pick-row {
  display: grid;
  gap: var(--seed-dimension-x1);
}

.shop-calc__opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--seed-dimension-x2);
}

.shop-calc__opt {
  min-height: 44px;
  padding: 0 var(--seed-dimension-x4);
  border: 1px solid var(--seed-color-stroke-neutral-weak);
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-bg-layer-default);
  color: var(--seed-color-fg-neutral);
  font: inherit;
  font-size: var(--seed-font-size-t5);
  cursor: pointer;
}

.shop-calc__opt[aria-pressed="true"] {
  border-color: var(--seed-color-bg-neutral-inverted);
  background: var(--seed-color-bg-neutral-inverted);
  color: var(--seed-color-fg-neutral-inverted);
  font-weight: var(--seed-font-weight-bold);
}

.shop-calc__opt:focus-visible {
  outline: 2px solid var(--seed-color-stroke-focus-ring);
  outline-offset: 1px;
}

.shop-calc__field[data-picked] {
  display: none;
}

/* ★ 2026-10-27 후기 게시판(/reviews/) 1단계 — 모든 상품 손님 후기 한 목록(폰 = 줄마다 카드 · PC 720px↑ = 표) · 글 읽기 ·
   첫 화면 「최근 후기」 · 상품 화면 「전체 후기 게시판 ›」. 기간 칩·정렬 칸은 상품 화면 후기 절(.shop-rv-chip · .shop-rv-tools__select)
   그대로, 별 색은 후기 절과 같은 #f5a524. 폰 375 먼저 — 긴 상품명·긴 글은 줄이고(…) 칸은 minmax(0, 1fr) 라 가로로 넘치지 않는다.
   a 글자색·img 크기는 body.shop a · body.shop img 보다 앞서게 body.shop 을 붙인다 */
.shop-rb {
  padding-top: var(--seed-dimension-x5);
  padding-bottom: var(--seed-dimension-x16);
}

.shop-rb__head {
  margin-bottom: var(--seed-dimension-x6);
}

.shop-rb__lead {
  max-width: 60ch;
  margin: var(--seed-dimension-x3) 0 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-rb__empty {
  margin: var(--seed-dimension-x6) 0 0;
  padding: var(--seed-dimension-x10) var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-palette-gray-100);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  text-align: center;
  color: var(--seed-color-fg-neutral-muted);
}

.shop-rb-stars {
  color: #f5a524;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.shop-rb-tag {
  display: inline-block;
  padding: 0 var(--seed-dimension-x1_5);
  border-radius: var(--seed-radius-r1);
  background: var(--seed-color-bg-neutral-weak);
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t2);
  line-height: var(--seed-line-height-t3);
  font-weight: var(--seed-font-weight-bold);
  white-space: nowrap;
}

.shop-rb-tag--bought {
  background: var(--seed-color-bg-positive-weak);
  color: var(--seed-color-fg-positive);
}

/* [후기 쓰기] — 누르면 그 자리에서 상품 고르기가 펼쳐진다(details · 스크립트 0) → 고른 상품 화면의 후기 쓰기 칸 */
.shop-rb-pick {
  margin: 0 0 var(--seed-dimension-x6);
}

.shop-rb-pick > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--seed-dimension-x10);
  padding: 0 var(--seed-dimension-x5);
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-bg-neutral-inverted);
  color: var(--seed-color-fg-neutral-inverted);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-bold);
  list-style: none;
  cursor: pointer;
}

.shop-rb-pick > summary::-webkit-details-marker {
  display: none;
}

.shop-rb-pick__lead {
  margin: var(--seed-dimension-x3) 0 var(--seed-dimension-x2);
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-rb-pick__list {
  display: grid;
  gap: var(--seed-dimension-x2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-rb-pick__item {
  display: flex;
  align-items: center;
  gap: var(--seed-dimension-x3);
  padding: var(--seed-dimension-x2) var(--seed-dimension-x3);
  border: 1px solid var(--seed-color-stroke-neutral-weak);
  border-radius: var(--seed-radius-r3);
  text-decoration: none;
}

.shop-rb-pick__item:hover {
  border-color: var(--seed-color-fg-neutral);
}

body.shop .shop-rb-pick__item img {
  flex: none;
  width: var(--seed-dimension-x12);
  height: var(--seed-dimension-x12);
  object-fit: cover;
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-neutral-weak);
}

.shop-rb-pick__name {
  min-width: 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-medium);
}

/* 거르기 줄 — 기간 칩 · 정렬 · 찾기(글·상품) · 결과 한 줄. reviews.js 가 켜야 보인다(그 전엔 hidden) */
.shop-rb-tools {
  display: grid;
  gap: var(--seed-dimension-x3);
  margin: 0 0 var(--seed-dimension-x4);
  scroll-margin-top: var(--seed-dimension-x16);
}

.shop-rb-tools__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--seed-dimension-x2);
}

.shop-rb-tools__period {
  display: flex;
  flex-wrap: wrap;
  gap: var(--seed-dimension-x2);
}

.shop-rb-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--seed-dimension-x2);
}

.shop-rb-search__input {
  width: 100%;
  min-width: 0;
  min-height: var(--seed-dimension-x10);
  padding: 0 var(--seed-dimension-x3);
  border: 1px solid var(--seed-color-stroke-neutral-weak);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-layer-default);
  font: inherit;
  font-size: var(--seed-font-size-t4);
  color: var(--seed-color-fg-neutral);
}

.shop-rb-search__go,
.shop-rb-result__reset {
  min-height: var(--seed-dimension-x10);
  padding: 0 var(--seed-dimension-x4);
  border: 0;
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-neutral-inverted);
  color: var(--seed-color-fg-neutral-inverted);
  font: inherit;
  font-size: var(--seed-font-size-t4);
  font-weight: var(--seed-font-weight-bold);
  cursor: pointer;
}

.shop-rb-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--seed-dimension-x2);
  margin: 0;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-rb-result__reset {
  min-height: var(--seed-dimension-x8);
  padding: 0 var(--seed-dimension-x3);
  background: var(--seed-color-bg-neutral-weak);
  color: var(--seed-color-fg-neutral);
  font-size: var(--seed-font-size-t3);
}

/* 목록 — 폰은 줄마다 카드(상품 → 별점 · 쓴 분 · 날짜 → 글 2줄 · 사진 수 · 구매 확인), PC 720px↑ 는 표(번호 · 상품 · 후기 · 쓴 분 · 날짜 · 별점) */
.shop-rb-table {
  display: block;
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--seed-color-fg-neutral);
}

.shop-rb-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.shop-rb-table tbody {
  display: block;
}

.shop-rb-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "item item item"
    "rate who date"
    "body body body";
  align-items: center;
  gap: var(--seed-dimension-x1) var(--seed-dimension-x2);
  padding: var(--seed-dimension-x4) 0;
  border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
}

.shop-rb-row > td {
  display: block;
  min-width: 0;
}

.shop-rb-row > .shop-rb-row__no {
  display: none;
}

.shop-rb-row__item {
  grid-area: item;
}

.shop-rb-row__rate {
  grid-area: rate;
}

.shop-rb-row__who {
  grid-area: who;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  font-weight: var(--seed-font-weight-bold);
}

.shop-rb-row__date {
  grid-area: date;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.shop-rb-row__body {
  grid-area: body;
}

body.shop .shop-rb-row__product {
  display: flex;
  align-items: center;
  gap: var(--seed-dimension-x2);
  min-width: 0;
  color: var(--seed-color-fg-neutral-muted);
  text-decoration: none;
}

body.shop .shop-rb-row__product img {
  flex: none;
  width: var(--seed-dimension-x10);
  height: var(--seed-dimension-x10);
  object-fit: cover;
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-neutral-weak);
}

.shop-rb-row__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
}

.shop-rb-row__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  text-decoration: none;
}

.shop-rb-row__text:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.shop-rb-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--seed-dimension-x1);
  margin-top: var(--seed-dimension-x1);
}

.shop-rb-row__tags:empty {
  display: none;
}

/* 쪽 이동 — 서버가 만든 쪽은 링크, reviews.js 가 다시 그린 쪽은 같은 모양의 버튼 */
.shop-rb-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--seed-dimension-x1);
  margin-top: var(--seed-dimension-x6);
}

body.shop .shop-rb-pager__link,
body.shop .shop-rb-pager__step,
.shop-rb-pager__now {
  display: inline-grid;
  place-items: center;
  min-width: var(--seed-dimension-x10);
  min-height: var(--seed-dimension-x10);
  padding: 0 var(--seed-dimension-x2);
  border: 1px solid transparent;
  border-radius: var(--seed-radius-r2);
  background: none;
  font: inherit;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-neutral);
  text-decoration: none;
  cursor: pointer;
}

body.shop .shop-rb-pager__link:hover,
body.shop .shop-rb-pager__step:hover {
  border-color: var(--seed-color-stroke-neutral-weak);
}

body.shop .shop-rb-pager__now {
  background: var(--seed-color-bg-neutral-inverted);
  color: var(--seed-color-fg-neutral-inverted);
  font-weight: var(--seed-font-weight-bold);
  cursor: default;
}

.shop-rb-pager__gap {
  padding: 0 var(--seed-dimension-x1);
  color: var(--seed-color-fg-neutral-subtle);
}

@media (min-width: 720px) {
  .shop-rb-table {
    display: table;
    table-layout: fixed;
  }

  .shop-rb-table thead {
    position: static;
    display: table-header-group;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
  }

  .shop-rb-table tbody {
    display: table-row-group;
  }

  .shop-rb-row {
    display: table-row;
  }

  .shop-rb-row > td,
  .shop-rb-row > .shop-rb-row__no {
    display: table-cell;
    padding: var(--seed-dimension-x3) var(--seed-dimension-x2);
    border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
    vertical-align: middle;
  }

  .shop-rb-table th {
    padding: var(--seed-dimension-x3) var(--seed-dimension-x2);
    border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
    font-size: var(--seed-font-size-t3);
    line-height: var(--seed-line-height-t3);
    font-weight: var(--seed-font-weight-bold);
    color: var(--seed-color-fg-neutral-muted);
    text-align: center;
  }

  .shop-rb-table th.shop-rb-table__item,
  .shop-rb-table th.shop-rb-table__body {
    text-align: left;
  }

  .shop-rb-table__no {
    width: 4rem;
  }

  .shop-rb-table__item {
    width: 26%;
  }

  .shop-rb-table__who {
    width: 6rem;
  }

  .shop-rb-table__date {
    width: 7rem;
  }

  .shop-rb-table__rate {
    width: 7.5rem;
  }

  .shop-rb-row__no,
  .shop-rb-row__who,
  .shop-rb-row__date,
  .shop-rb-row__rate {
    text-align: center;
  }

  .shop-rb-row__no {
    font-size: var(--seed-font-size-t3);
    color: var(--seed-color-fg-neutral-muted);
    font-variant-numeric: tabular-nums;
  }

  .shop-rb-row__who {
    font-weight: var(--seed-font-weight-regular);
  }

  .shop-rb-row__text {
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
}

/* 글 읽기 — 상품(그 상품 화면으로) · 제목 · 별점·쓴 분·날짜·구매 확인 · 사진·영상 크게(그 자리) · 글 · 쇼홈 답글 · 이전글·다음글 · 목록 */
.shop-rb-read__post {
  padding-top: var(--seed-dimension-x6);
  border-top: 1px solid var(--seed-color-fg-neutral);
}

body.shop .shop-rb-read__product {
  display: inline-flex;
  align-items: center;
  gap: var(--seed-dimension-x3);
  max-width: 100%;
  padding: var(--seed-dimension-x2) var(--seed-dimension-x3);
  border: 1px solid var(--seed-color-stroke-neutral-weak);
  border-radius: var(--seed-radius-r3);
  text-decoration: none;
}

body.shop .shop-rb-read__product img {
  flex: none;
  width: var(--seed-dimension-x14);
  height: var(--seed-dimension-x14);
  object-fit: cover;
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-neutral-weak);
}

.shop-rb-read__product-name {
  min-width: 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-medium);
}

.shop-rb-read__product-go {
  flex: none;
  color: var(--seed-color-fg-neutral-muted);
}

.shop-rb-read__title {
  margin: var(--seed-dimension-x5) 0 var(--seed-dimension-x2);
  font-size: var(--seed-font-size-t9);
  line-height: var(--seed-line-height-t9);
  font-weight: var(--seed-font-weight-bold);
  letter-spacing: -0.02em;
}

.shop-rb-read__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--seed-dimension-x1) var(--seed-dimension-x3);
  margin: 0;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-rb-read__author {
  font-weight: var(--seed-font-weight-bold);
  color: var(--seed-color-fg-neutral);
}

.shop-rb-read__option {
  margin: var(--seed-dimension-x2) 0 0;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-rb-read__shots {
  display: grid;
  gap: var(--seed-dimension-x3);
  margin: var(--seed-dimension-x5) 0 0;
  padding: 0;
  list-style: none;
}

body.shop .shop-rb-read__photo {
  width: 100%;
  max-width: 720px;
  height: auto;
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-neutral-weak);
}

body.shop .shop-rb-read__video {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  max-height: 80vh;
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-palette-static-black);
  object-fit: contain;
}

.shop-rb-read__wait {
  margin: var(--seed-dimension-x4) 0 0;
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4);
  border: 1px dashed var(--seed-color-stroke-neutral-weak);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-neutral-weak);
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-rb-read__text {
  margin: var(--seed-dimension-x5) 0 0;
  font-size: var(--seed-font-size-t5);
  line-height: var(--seed-line-height-t5);
  white-space: pre-line;
}

.shop-rb-read__reply {
  margin: var(--seed-dimension-x5) 0 0;
  padding: var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-neutral-weak);
}

.shop-rb-read__reply-head {
  margin: 0 0 var(--seed-dimension-x1);
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-rb-read__reply-by {
  color: var(--seed-color-fg-neutral);
}

.shop-rb-read__reply-text {
  margin: 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  white-space: pre-line;
}

.shop-rb-read__nav {
  margin-top: var(--seed-dimension-x8);
  border-top: 1px solid var(--seed-color-stroke-neutral-muted);
}

body.shop .shop-rb-read__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--seed-dimension-x3);
  padding: var(--seed-dimension-x3) 0;
  border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  text-decoration: none;
}

.shop-rb-read__step-label {
  font-size: var(--seed-font-size-t3);
  font-weight: var(--seed-font-weight-bold);
  color: var(--seed-color-fg-neutral-muted);
  white-space: nowrap;
}

.shop-rb-read__step-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-rb-read__step-date {
  font-size: var(--seed-font-size-t3);
  color: var(--seed-color-fg-neutral-muted);
  font-variant-numeric: tabular-nums;
}

.shop-rb-read__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--seed-dimension-x2);
  margin-top: var(--seed-dimension-x6);
}

/* [목록]은 <a> 라 body.shop a(글자색 물려받기)가 SEED 단추 글자색을 덮는다 — 단추 글자색을 되살린다 */
body.shop .shop-rb-read__actions .seed-action-button--variant_neutralSolid {
  color: var(--seed-color-fg-on-neutral-solid);
}

.shop-rb-related {
  margin-top: var(--seed-dimension-x12);
}

.shop-rb-related__title {
  margin: 0 0 var(--seed-dimension-x3);
  font-size: var(--seed-font-size-t7);
  line-height: var(--seed-line-height-t7);
  font-weight: var(--seed-font-weight-bold);
  letter-spacing: -0.02em;
}

@media (min-width: 720px) {
  .shop-rb-read__post,
  .shop-rb-read__nav,
  .shop-rb-read__actions {
    max-width: 760px;
  }

  .shop-rb-read__title {
    font-size: var(--seed-font-size-t10);
    line-height: var(--seed-line-height-t10);
  }
}

/* 첫 화면 「최근 후기」(후기가 있을 때만) — 폰 한 줄씩 · PC 2칸 · 넓은 PC 3칸, 오른쪽 위 「후기 게시판 보기 ›」 */
.shop-rb-recent__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--seed-dimension-x3);
}

body.shop .shop-rb-recent__all {
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

body.shop .shop-rb-recent__all:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.shop-rb-recent__list {
  display: grid;
  gap: var(--seed-dimension-x3);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.shop .shop-rb-card__link {
  display: flex;
  align-items: flex-start;
  gap: var(--seed-dimension-x3);
  height: 100%;
  padding: var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-layer-default);
  text-decoration: none;
}

body.shop .shop-rb-card__img {
  flex: none;
  width: var(--seed-dimension-x16);
  height: var(--seed-dimension-x16);
  object-fit: cover;
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-neutral-weak);
}

.shop-rb-card__body {
  display: grid;
  flex: 1 1 auto;
  gap: var(--seed-dimension-x1);
  min-width: 0;
}

.shop-rb-card__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
}

.shop-rb-card__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

@media (hover: hover) {
  body.shop .shop-rb-card__link:hover .shop-rb-card__text {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

@media (min-width: 720px) {
  .shop-rb-recent__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--seed-dimension-x4);
  }
}

@media (min-width: 900px) {
  .shop-rb-recent__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 상품 화면 「후기 N」 머리의 「전체 후기 게시판 ›」(실제 후기가 있을 때만) — 제목 아래 한 줄, [후기 남기기] 자리는 그대로 */
body.shop .shop-rv__all {
  display: block;
  width: fit-content;
  margin: var(--seed-dimension-x2) auto 0;
  padding: var(--seed-dimension-x1) 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-medium);
  color: var(--seed-color-fg-neutral-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ★ 2026-10-27 문의 게시판(/qna/) 2단계 — 후기 게시판(.shop-rb*)과 한 벌: 표·카드·쪽 번호·칩·[문의 쓰기]·[목록] 단추·답 상태 꼬리표
   (.shop-rb-tag)를 그대로 쓰고, 비밀글 줄 색(.shop-iq-item__q--secret)·비밀번호 칸(.shop-iq-open)·답 상자(.shop-iq-item__answer)는 상품
   화면 「문의」 절 것을 그대로 쓴다. 여기엔 문의에만 있는 것만 — 답 드림 꼬리표 색(상품 화면 답 드림과 같은 초록) · 폰 카드 둘째 줄(답 상태 ·
   쓴 분 · 날짜) · PC 상태 칸 · 읽기 쪽 질문 · 첫 화면 이어 붙이기 · 상품 화면 「전체 문의 게시판 ›」 */
.shop-qb-status {
  justify-self: start;
}

.shop-qb-status--answered {
  background: var(--seed-color-bg-positive-weak);
  color: var(--seed-color-fg-positive);
}

.shop-qb-row {
  grid-template-areas:
    "item item item"
    "state who date"
    "body body body";
}

.shop-qb-row__state {
  grid-area: state;
}

@media (min-width: 720px) {
  .shop-qb-table__state {
    width: 6.5rem;
  }

  .shop-qb-row__state {
    text-align: center;
  }
}

.shop-qb-read__q {
  margin: var(--seed-dimension-x5) 0 0;
  font-size: var(--seed-font-size-t5);
  line-height: var(--seed-line-height-t5);
  white-space: pre-line;
}

.shop-qb-read__body {
  margin: var(--seed-dimension-x4) 0 0;
}

/* 첫 화면 「최근 후기」 바로 다음 「최근 문의」 — 두 칸이 한 회색 띠로 이어지게 위 여백만 뺀다 */
.shop-rb-recent + .shop-qb-recent {
  padding-top: 0;
}

/* 상품 화면 「문의 N」 제목 아래 한 줄(게시판에 문의가 있을 때만) — [문의하기] 자리는 그대로 */
body.shop .shop-iq__all {
  display: inline-block;
  margin-top: var(--seed-dimension-x1);
  padding: var(--seed-dimension-x1) 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-medium);
  color: var(--seed-color-fg-neutral-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ★ 2026-10-27 고객센터 3단계 — 바닥글 안내 줄 · 첫 화면 공지 띠 · 공지 게시판(/notice/) · 고객센터(/cs/) · 이용안내(/guide/).
   게시판은 후기·문의 게시판(.shop-rb*) 한 벌을 그대로 쓰고 공지에만 있는 것(고정 꼬리표 · 폰 카드 줄 · 단락 본문)만 .shop-nb* 로.
   고객센터는 첫 화면 절 모양(.shop-section · .shop-contact · .shop-faq) 그대로, 이용안내는 약관·처리방침 문서 모양(.shop-doc) 그대로 */

/* 바닥글 안내 줄 — 윗줄(브랜드 · 메뉴) 바로 아래, 회사 정보 위 */
body.shop .shop-footer__guide {
  margin: 0 0 var(--seed-dimension-x4);
  color: var(--seed-color-palette-static-white-alpha-500);
}

body.shop .shop-footer__guide a {
  text-decoration: none;
}

body.shop .shop-footer__guide a:hover {
  text-decoration: underline;
}

body.shop .shop-footer__guide strong {
  color: var(--seed-color-palette-static-white);
}

/* 고정 꼬리표 — 후기·문의 게시판 꼬리표(.shop-rb-tag) 모양에 진한 바탕 */
.shop-nb-tag {
  background: var(--seed-color-bg-neutral-inverted);
  color: var(--seed-color-fg-neutral-inverted);
}

/* 첫 화면 큰 사진 바로 아래 공지 띠 한 줄 — 「공지」 · 제목(넘치면 …) · 날짜 · 「전체 ›」 */
.shop-nb-band {
  border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
  background: var(--seed-color-bg-layer-default);
}

.shop-nb-band__inner {
  display: flex;
  align-items: center;
  gap: var(--seed-dimension-x3);
  min-height: var(--seed-dimension-x12);
}

body.shop .shop-nb-band__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-medium);
  text-decoration: none;
}

body.shop .shop-nb-band__title:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.shop-nb-band__day {
  flex: none;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
  font-variant-numeric: tabular-nums;
}

body.shop .shop-nb-band__all {
  flex: none;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  font-weight: var(--seed-font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 399px) {
  .shop-nb-band__day {
    display: none;
  }
}

/* 공지 목록 — 폰 = 줄마다 (고정) 제목 · 날짜, PC 720px↑ = 표(번호(고정) · 제목 · 날짜) */
@media (max-width: 719px) {
  .shop-nb-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "no body"
      "date date";
    column-gap: 0;
  }

  .shop-nb-row--pinned {
    column-gap: var(--seed-dimension-x2);
  }

  .shop-nb-row > .shop-rb-row__no {
    grid-area: no;
  }

  .shop-nb-row--pinned > .shop-rb-row__no {
    display: block;
  }
}

.shop-nb-row .shop-rb-row__text {
  font-weight: var(--seed-font-weight-medium);
}

.shop-nb-row--pinned .shop-rb-row__text {
  font-weight: var(--seed-font-weight-bold);
}

/* 공지 읽기 본문 — 빈 줄로 나눈 단락(단락 안 줄바꿈은 그대로) */
.shop-nb-read__body {
  margin-top: var(--seed-dimension-x5);
}

.shop-nb-read__body p {
  margin: 0 0 var(--seed-dimension-x4);
  font-size: var(--seed-font-size-t5);
  line-height: var(--seed-line-height-t5);
  white-space: pre-line;
}

/* 고객센터 머리 — 위치 줄 · 제목 · 한 줄 안내(그 아래로 상담 연결 · 자주 묻는 질문 · 최근 공지 · 바로가기 절) */
.shop-cs__head {
  padding-top: var(--seed-dimension-x5);
  padding-bottom: var(--seed-dimension-x10);
}

.shop-cs__notices {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--seed-color-fg-neutral);
}

body.shop .shop-cs__notice-link {
  display: flex;
  align-items: center;
  gap: var(--seed-dimension-x3);
  min-height: var(--seed-dimension-x13);
  padding: var(--seed-dimension-x3) 0;
  border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
  text-decoration: none;
}

.shop-cs__notice-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--seed-font-size-t5);
  line-height: var(--seed-line-height-t5);
  font-weight: var(--seed-font-weight-medium);
}

@media (hover: hover) {
  body.shop .shop-cs__notice-link:hover .shop-cs__notice-title {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.shop-cs__notice-day {
  flex: none;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
  font-variant-numeric: tabular-nums;
}

/* 바로가기 — 폰 한 줄씩 · PC 2칸 · 넓은 PC 4칸 */
.shop-cs__cards {
  display: grid;
  gap: var(--seed-dimension-x3);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.shop .shop-cs__card {
  display: grid;
  gap: var(--seed-dimension-x1);
  height: 100%;
  padding: var(--seed-dimension-x5);
  border: 1px solid var(--seed-color-stroke-neutral-muted);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-layer-default);
  text-decoration: none;
}

body.shop .shop-cs__card:hover {
  border-color: var(--seed-color-fg-neutral);
}

.shop-cs__card-title {
  font-size: var(--seed-font-size-t6);
  line-height: var(--seed-line-height-t6);
  font-weight: var(--seed-font-weight-bold);
}

.shop-cs__card-text {
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-neutral-muted);
}

@media (min-width: 720px) {
  .shop-cs__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--seed-dimension-x4);
  }
}

@media (min-width: 1024px) {
  .shop-cs__cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 이용안내 — 약관 문서(.shop-doc) 그대로 + 차례(누르면 그 절로) · 「준비 중 / 시행 예정」 한 줄 */
.shop-guide .shop-crumb {
  margin-bottom: var(--seed-dimension-x5);
}

.shop-guide h2 {
  scroll-margin-top: var(--seed-dimension-x16);
}

.shop-guide__toc {
  margin: var(--seed-dimension-x6) 0 var(--seed-dimension-x4);
  padding: var(--seed-dimension-x4) var(--seed-dimension-x5);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-neutral-weak);
}

.shop-guide__toc ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--seed-dimension-x2) var(--seed-dimension-x4);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.shop .shop-guide__toc a {
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.shop-guide__wait {
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-neutral-weak);
  color: var(--seed-color-fg-neutral-muted);
}