/* 소함아쿠아 화면 스타일
   색·글자 크기·모서리·간격은 모두 SEED Design 토큰(vendor/seed/base.min.css)을 써요. */

:root {
  --container: 1120px;
  --gutter: var(--seed-dimension-x4);
  --bar-h: 56px;
  --chips-h: 52px;
  --tabbar-h: 0px;
  --tile-top: var(--seed-color-palette-blue-100);
  --tile-bottom: var(--seed-color-palette-blue-200);
  --tile-bubble: var(--seed-color-palette-blue-300);
  --tank-ray: rgba(255, 255, 255, 0.45);
  --tank-bubble: rgba(255, 255, 255, 0.75);
}

/* 주 색(브랜드 색)을 SEED 파랑으로 바꿔요.
   SEED가 밝게·어둡게 모드별로 정해 둔 파랑(informative) 값을 그대로 가져와요.
   밝은 모드: #217cf9, 누를 때 #135fcd / 어두운 모드: #1e82eb
   선택자를 두 개 둔 건 SEED 기본값(:root와 모드 속성 선택자)보다 우선하기 위해서예요. */
:root,
:root[data-seed-color-mode][data-seed-user-color-scheme] {
  /* 글꼴: 어느 기기에서나 같은 모양으로 보이게 Pretendard를 맨 앞에 둬요.
     SEED 기본값은 기기 글꼴(-apple-system, Apple SD Gothic Neo…)이 앞에 있어서
     윈도우는 Pretendard, 맥·아이폰은 애플 글꼴, 안드로이드는 또 다른 글꼴로 제각각이었어요.
     Pretendard를 못 받았을 때만 뒤의 기기 글꼴로 넘어가요. */
  --seed-font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --seed-color-bg-brand-solid: var(--seed-color-bg-informative-solid);
  --seed-color-bg-brand-solid-pressed: var(--seed-color-bg-informative-solid-pressed);
  --seed-color-bg-brand-weak: var(--seed-color-bg-informative-weak);
  --seed-color-bg-brand-weak-pressed: var(--seed-color-bg-informative-weak-pressed);
  --seed-color-fg-brand: var(--seed-color-fg-informative);
  --seed-color-fg-brand-contrast: var(--seed-color-fg-informative-contrast);
  --seed-color-stroke-brand-solid: var(--seed-color-stroke-informative-solid);
  --seed-color-stroke-brand-weak: var(--seed-color-stroke-informative-weak);
}

:root[data-seed-user-color-scheme="dark"] {
  --tank-ray: rgba(255, 255, 255, 0.05);
  --tank-bubble: rgba(255, 255, 255, 0.35);
}

/* 판매 상태 색(예약·품절). 관리자 상품 목록(admin.css)과 같은 색이에요.
   -over는 사진 위 어두운 덮개에 쓰는 밝은 값이에요. */
:root {
  --sale-reserved: #4f8f12;
  --sale-soldout: var(--seed-color-fg-critical);
  --sale-reserved-chip: #9ed45a;
}
:root[data-seed-user-color-scheme="dark"] { --sale-reserved: #9ed45a; }

@media (max-width: 767px) {
  :root { --tabbar-h: 56px; }
}

@media (min-width: 768px) {
  :root {
    --gutter: var(--seed-dimension-x6);
    --bar-h: 64px;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + var(--chips-h) + var(--sub-h, 0px) + 8px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: calc(var(--tabbar-h) + var(--seed-safe-area-bottom));
  background: var(--seed-color-bg-layer-default);
  color: var(--seed-color-fg-neutral);
  font-family: var(--seed-font-family);
  font-size: var(--seed-font-size-t5);
  line-height: var(--seed-line-height-t5);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

html:has(dialog[open]) { overflow: hidden; }

h1, h2, h3, p, dl, dd { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: fixed;
  z-index: 100;
  left: 16px;
  top: -60px;
  padding: 10px 16px;
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-neutral-inverted);
  color: var(--seed-color-fg-neutral-inverted);
  font-size: var(--seed-font-size-t4);
  text-decoration: none;
}
.skip:focus { top: 12px; }

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

.icon {
  display: inline-block;
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

/* ───────── 상단 바 ───────── */

/* 맨 위 줄. 아래 내용이 살짝 비치는 반투명 판이에요.
   글자가 겹쳐 보이지 않게 뒤를 흐리게(blur) 처리해요. 흐리기를 못 쓰는 기기에서는 꽉 찬 바탕으로 보여요. */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--seed-color-bg-layer-default);
  box-shadow: inset 0 -1px 0 var(--seed-color-stroke-neutral-subtle);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-bar {
    background: color-mix(in srgb, var(--seed-color-bg-layer-default) 72%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
  }
}

.app-bar__row {
  display: flex;
  align-items: center;
  gap: var(--seed-dimension-x3);
  height: var(--bar-h);
}

.brand {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  font-size: var(--seed-font-size-t7);
  line-height: var(--seed-line-height-t7);
  font-weight: var(--seed-font-weight-bold);
  letter-spacing: -0.03em;
  text-decoration: none;
}

.brand__mark {
  width: 28px;
  height: 28px;
  color: var(--seed-color-bg-brand-solid);
}

/* 관리자가 올린 로고 그림. 가로가 긴 로고도 맨 위 줄을 밀지 않게 높이를 정해 두고 가로는 알아서 늘어나요. */
.brand__logo {
  height: 30px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}
/* 어두운 모드에서는 검은 붓글씨 로고가 어두운 바탕에 묻혀서 안 보여요.
   그래서 색을 뒤집어(검정 ↔ 흰색) 하얀 붓글씨로 보여 줘요.
   색이 들어간 로고를 올려서 뒤집으면 이상할 때는, 관리자 → 운영 설정 → 가게 로고에서
   "어두운 모드에서 로고 색 뒤집기"를 끄면 돼요. (그러면 data-logo-invert 표시가 안 붙어요) */
:root[data-seed-user-color-scheme="dark"][data-logo-invert] .brand__logo,
:root[data-seed-user-color-scheme="dark"][data-logo-invert] .empty__logo { filter: invert(1); }
.brand.has-logo .brand__mark { display: none; }
/* 로고가 올라와 있는 걸 아는 상태(머리의 스크립트가 붙이는 data-logo)면, 로고가 도착하기 전에도
   기본 물고기 그림을 그리지 않아요. Ctrl+F5로 새로고침할 때 잠깐 보였다 사라지던 문제를 막아요. */
html[data-logo] .brand__mark { display: none; }
.brand.logo-only .brand__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 768px) {
  .brand__logo { height: 36px; max-width: 260px; }
}

/* 검색창은 오른쪽 위, 찜 하트 바로 앞에 둬요.
   처음엔 돋보기 버튼만 보이고, 누르면 검색창이 옆으로 길게 펼쳐져요. */
.search {
  position: relative;
  display: none;
  flex: 0 1 280px;
  min-width: 180px;
  margin: 0 var(--seed-dimension-x1) 0 auto;
}

.search__icon {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 20px;
  height: 20px;
  color: var(--seed-color-fg-neutral-subtle);
  transform: translateY(-50%);
  pointer-events: none;
}

.search__input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 40px;
  border: 0;
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-neutral-weak);
  font-size: var(--seed-font-size-t4);
  outline-offset: 0;
  -webkit-appearance: none;
  appearance: none;
}
.search__input::placeholder { color: var(--seed-color-fg-placeholder); }

.app-bar__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--seed-radius-full);
  background: transparent;
  color: var(--seed-color-fg-neutral);
  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
}
.icon-btn:hover { background: var(--seed-color-bg-transparent-pressed); }

.count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-bg-brand-solid);
  color: var(--seed-color-palette-static-white);
  font-size: 11px;
  font-weight: var(--seed-font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
}
.count[hidden] { display: none; }

.text-btn {
  flex: none;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--seed-radius-r2);
  background: transparent;
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t4);
  font-weight: var(--seed-font-weight-medium);
}
.text-btn:hover { background: var(--seed-color-bg-transparent-pressed); }

.search-cancel { display: none; }

@media (max-width: 767px) {
  .search { display: none; flex: 1 1 auto; min-width: 0; margin: 0; max-width: none; }
  .app-bar.is-searching .brand,
  .app-bar.is-searching .app-bar__actions { display: none; }
  .app-bar.is-searching .search,
  .app-bar.is-searching .search-cancel { display: block; }
}

@media (min-width: 768px) {
  .app-bar.is-searching .search {
    display: block;
    animation: search-in var(--seed-duration-d4, 0.2s) var(--seed-timing-function-enter);
  }
  .app-bar.is-searching .search-toggle { display: none; }
  .app-bar.is-searching .app-bar__actions { margin-left: 0; }
}
@keyframes search-in {
  from { flex-basis: 40px; min-width: 40px; opacity: 0; }
}

/* 상단 메뉴 (SEED tabs: 글자 탭 + 아래 선) */
.cats {
  display: flex;
  align-items: stretch;
  gap: var(--seed-dimension-x4);
  height: var(--chips-h);
}

.menu {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.menu::-webkit-scrollbar { display: none; }

.menu__item { position: relative; display: flex; flex: none; }

.menu__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 100%;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t5);
  font-weight: var(--seed-font-weight-medium);
  white-space: nowrap;
  transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
}
.menu__item:first-child .menu__link { padding-left: 0; }
.menu__link:hover { color: var(--seed-color-fg-neutral); }
.menu__link[aria-current="true"] { color: var(--seed-color-fg-neutral); font-weight: var(--seed-font-weight-bold); }
.menu__link[aria-current="true"]::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--seed-color-fg-neutral);
}
.menu__item:first-child .menu__link::after { left: 0; }
.menu__caret {
  width: 16px;
  height: 16px;
  color: var(--seed-color-fg-neutral-subtle);
  transition: transform var(--seed-duration-d3) var(--seed-timing-function-easing);
}


/* 생물 소메뉴 판: 마우스가 있는 큰 화면에서만 열려요. 휴대폰은 아래 소메뉴 줄을 써요. */
.mega { display: none; }

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .menu { margin: 0; padding: 0; overflow: visible; }
  .has-sub:hover .mega,
  .has-sub:focus-within .mega { display: block; }
  .has-sub.is-dismissed .mega { display: none; }
  .has-sub:hover .menu__caret,
  .has-sub:focus-within .menu__caret { transform: rotate(180deg); }
  .has-sub.is-dismissed .menu__caret { transform: none; }
}

.mega {
  position: absolute;
  top: 100%;
  left: -4px;
  z-index: 40;
  width: 480px;
  padding: var(--seed-dimension-x3);
  border-radius: var(--seed-radius-r4);
  background: var(--seed-color-bg-layer-floating);
  box-shadow: var(--seed-shadow-s3), inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
  animation: mega-in var(--seed-duration-d3) var(--seed-timing-function-enter);
}
@keyframes mega-in {
  from { opacity: 0; transform: translateY(-4px); }
}
.mega__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--seed-dimension-x2);
  padding: 4px 8px 8px;
}
.mega__head strong { font-size: var(--seed-font-size-t5); font-weight: var(--seed-font-weight-bold); }
.mega__all {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 0 4px 8px;
  border: 0;
  background: none;
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t3);
  font-weight: var(--seed-font-weight-medium);
}
.mega__all:hover { color: var(--seed-color-fg-neutral); }
.mega__all .icon { width: 16px; height: 16px; }
.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.mega__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: var(--seed-radius-r3);
  background: none;
  text-align: left;
  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
}
.mega__item:hover { background: var(--seed-color-bg-neutral-weak-alpha); }
.mega__item[aria-current="true"] { background: var(--seed-color-bg-brand-weak); }
.mega__art {
  flex: none;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: var(--seed-radius-r2_5);
  background: var(--tile-top);
}
.mega__art > svg { display: block; width: 100%; height: 100%; }
.mega__label { flex: 1; min-width: 0; font-size: var(--seed-font-size-t4); font-weight: var(--seed-font-weight-medium); }
.mega__count { color: var(--seed-color-fg-neutral-subtle); font-size: var(--seed-font-size-t3); font-variant-numeric: tabular-nums; }

/* 생물을 고르면 메뉴 아래에 소메뉴 줄이 생겨요. */
.subcats { padding-bottom: var(--seed-dimension-x3); }
:root.has-subcats { --sub-h: 44px; }
.chip--sm { height: 32px; padding: 0 12px; font-size: var(--seed-font-size-t3); }

.chips {
  display: flex;
  gap: var(--seed-dimension-spacing-x-between-chips);
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-bg-neutral-weak-alpha);
  color: var(--seed-color-fg-neutral);
  font-size: var(--seed-font-size-t4);
  font-weight: var(--seed-font-weight-medium);
  white-space: nowrap;
  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing),
    color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
}
.chip:hover { background: var(--seed-color-bg-neutral-weak-alpha-pressed); }
.chip[aria-pressed="true"] {
  background: var(--seed-color-bg-neutral-inverted);
  color: var(--seed-color-fg-neutral-inverted);
}

/* ───────── 버튼 (SEED action-button) ───────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--seed-dimension-x10);
  padding: 0 var(--seed-dimension-x4);
  border: 0;
  border-radius: var(--seed-radius-r2);
  font-size: var(--seed-font-size-t4);
  font-weight: var(--seed-font-weight-bold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing),
    transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
}
.btn:active:not(:disabled) { transform: scale(0.97); }

.btn--lg {
  height: var(--seed-dimension-x13);
  padding: 0 var(--seed-dimension-x5);
  border-radius: var(--seed-radius-r3);
  font-size: var(--seed-font-size-t5);
}

.btn--brand {
  background: var(--seed-color-bg-brand-solid);
  color: var(--seed-color-palette-static-white);
}
.btn--brand:hover, .btn--brand:active { background: var(--seed-color-bg-brand-solid-pressed); }

.btn--weak {
  background: var(--seed-color-bg-neutral-weak);
  color: var(--seed-color-fg-neutral);
}
.btn--weak:hover, .btn--weak:active { background: var(--seed-color-bg-neutral-weak-pressed); }

.btn:disabled {
  background: var(--seed-color-bg-disabled);
  color: var(--seed-color-fg-disabled);
  cursor: not-allowed;
}

/* ───────── 첫 화면 ───────── */

/* 배너(가로로 긴 그림·사진)를 위에 두고, 글은 배너 아래에 둬요. */
.hero { padding: var(--seed-dimension-x4) 0 var(--seed-dimension-x2); }

.hero__copy {
  display: grid;
  gap: var(--seed-dimension-x6);
  margin-top: var(--seed-dimension-x6);
}
.hero__side { min-width: 0; }

/* 배너 아래 오른쪽 칸에 들어간 공지사항. 휴대폰에서는 가게 소개 아래로 내려가요. */
.hero__notice { min-width: 0; order: 2; }
.hero__notice .section__head { margin-bottom: var(--seed-dimension-x2); }
/* 첫 화면 알림 한 줄(경매·이벤트). 몇 건인지와 짧은 한 줄만 보여 주고 누르면 그 페이지로 가요.
   휴대폰에서는 공지사항 아래로 경매 → 이벤트 순서로 가요. */
.hero__auction { min-width: 0; order: 3; }
.hero__event { min-width: 0; order: 4; }
#home-auction[data-empty="1"],
#home-event[data-empty="1"] { display: none; }
/* 휴대폰에서 두 줄이 붙어 있으면 간격을 좁혀요. */
@media (max-width: 899px) {
  .hero__auction:not([data-empty="1"]) + .hero__event { margin-top: calc(var(--seed-dimension-x3) - var(--seed-dimension-x6)); }
}
.home-line {
  display: flex;
  align-items: center;
  gap: var(--seed-dimension-x3);
  width: 100%;
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4);
  border: 1px solid var(--seed-color-stroke-neutral-subtle);
  border-radius: var(--seed-radius-r3);
  background: none;
  color: inherit;
  text-align: left;
}
.home-line:hover { background: var(--seed-color-bg-transparent-pressed); }
.home-line__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-bg-brand-weak);
  color: var(--seed-color-fg-brand);
}
.home-line__icon .icon { width: 18px; height: 18px; }
/* 열린 경매·이벤트가 없을 때 ("경매 준비 중이에요" / "이벤트 준비 중이에요"): 알림처럼 튀지 않게 아이콘을 회색으로 */
#home-auction[data-idle="1"] .home-line__icon,
#home-event[data-idle="1"] .home-line__icon { background: var(--seed-color-bg-neutral-weak); color: var(--seed-color-fg-neutral-muted); }
.home-line__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.home-line__title { font-size: var(--seed-font-size-t5); font-weight: var(--seed-font-weight-bold); }
.home-line__when {
  overflow: hidden;
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t4);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-line__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t4);
}
.home-line__go .icon { width: 16px; height: 16px; }
/* 좁은 휴대폰에서는 '경매 보기' 글씨를 숨기고 화살표만 남겨요.
   이벤트 제목처럼 긴 글은 '…'로 자르지 않고 여러 줄로 보여 줘요. (아주 작은 폰도 세 줄까지) */
@media (max-width: 400px) {
  .home-line__go { font-size: 0; }
  .home-line__when {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

.hero__desc {
  max-width: 34em;
  color: var(--seed-color-fg-neutral-muted);
  line-height: 26px;
}

.cutoff {
  margin-top: var(--seed-dimension-x4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin-top: var(--seed-dimension-x3);
  padding: 6px 14px 6px 10px;
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-bg-neutral-weak);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
}
.cutoff .icon { width: 18px; height: 18px; color: var(--seed-color-fg-neutral-subtle); }
.cutoff strong { font-weight: var(--seed-font-weight-bold); font-variant-numeric: tabular-nums; }


.tank {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--seed-radius-r5);
  background: var(--seed-color-palette-blue-100);
}
.tank > svg { display: block; width: 100%; height: 100%; }
/* 첫 화면 배너: 휴대폰은 3:2, 큰 화면은 3:1로 길게 */
.tank--banner { aspect-ratio: 3 / 2; }
@media (min-width: 768px) {
  .tank--banner { aspect-ratio: 3 / 1; border-radius: var(--seed-radius-r6); }
}
/* 관리자가 첫 화면 사진을 올리면 수조 그림 대신 사진을 보여요.
   사진은 잘라내지 않고 통째로 보여 줘요. 그래서 휴대폰에서도 양옆이 잘리지 않아요. */
.tank__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tank--banner.has-photo {
  aspect-ratio: auto;
  background: transparent;
  border: 0;
}
.tank--banner.has-photo .tank__photo {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
}
.tank.has-photo > svg { display: none; }

/* 첫 화면 유튜브 영상 (071, app.js renderHomeVideos) — PC는 두 칸, 휴대폰은 한 칸
   제목 앞에 작은 빨간 유튜브 표시, 썸네일은 그림자 + 올리면 살짝 떠올라요. */
.yt-head { display: flex; align-items: center; gap: 10px; }
.yt-head::before {
  content: '';
  flex: none;
  width: 28px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Crect width='28' height='20' rx='6' fill='%23ff0033'/%3E%3Cpath d='M11 5.5v9l8-4.5z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}
.yt-grid { display: grid; grid-template-columns: 1fr; gap: var(--seed-dimension-x6); }
@media (min-width: 768px) {
  .yt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--seed-dimension-x6); }
  .yt-grid[data-count="1"] { grid-template-columns: minmax(0, 860px); }
}
.yt-card { margin: 0; min-width: 0; }
.yt-card__media,
.yt-card__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--seed-radius-r4);
  background: #0b0b0b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
}
.yt-card__media { cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.yt-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
/* 아래쪽을 살짝 어둡게 해서 재생 단추가 또렷해 보여요 */
.yt-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 45%);
  pointer-events: none;
}
@media (hover: hover) {
  .yt-card__media:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 14px 32px rgba(0, 0, 0, 0.16); }
  .yt-card__media:hover img { transform: scale(1.04); }
  .yt-card__media:hover .yt-card__play { transform: scale(1.08); }
}
.yt-card__media:focus-visible { outline: 3px solid var(--seed-color-stroke-brand-solid, #2563eb); outline-offset: 3px; }
/* 가운데 빨간 재생 단추 (유튜브 모양) */
.yt-card__play {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 42px;
  margin: -21px 0 0 -30px;
  border-radius: 12px;
  background: #ff0033;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease;
}
.yt-card__play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -6px;
  border-style: solid;
  border-width: 9px 0 9px 16px;
  border-color: transparent transparent transparent #fff;
}
.yt-card__cap { display: flex; flex-direction: column; gap: 4px; margin-top: var(--seed-dimension-x3); padding: 0 2px; }
.yt-card__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: var(--seed-font-size-t5);
  font-weight: var(--seed-font-weight-bold);
  line-height: 1.45;
  letter-spacing: -0.01em;
  word-break: keep-all;
}
/* 채널 이름 앞 작은 유튜브 표시 */
.yt-card__channel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t3);
}
.yt-card__channel::before {
  content: '';
  flex: none;
  width: 16px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Crect width='28' height='20' rx='6' fill='%23ff0033'/%3E%3Cpath d='M11 5.5v9l8-4.5z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 배너 슬라이드 (app.js setHeroSlides). 1번째 사진이 높이를 정하고, 나머지는 그 위에 겹쳐서
   --i(몇 번째)와 --at(지금 보이는 번호)의 차이만큼 옆으로 밀어 둬요. */
.tank.is-slider { touch-action: pan-y; }
.tank.is-slider .tank__photo,
.tank__slide {
  transform: translateX(calc((var(--i, 0) - var(--at, 0)) * 100%));
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.tank__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tank__dots {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  display: flex;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
}
/* 점은 작게 보이지만 누르는 자리는 넉넉하게(19px) 잡아요. */
.tank__dots button {
  width: 19px;
  height: 19px;
  padding: 6px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  background-clip: content-box;
  cursor: pointer;
  transition: width 0.3s, background-color 0.3s;
}
.tank__dots button[aria-current="true"] { width: 30px; background-color: #fff; }
.tank__arrow {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #1a1c20;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}
.tank__arrow .icon { width: 20px; height: 20px; }
.tank__arrow--prev { left: 12px; }
.tank__arrow--prev .icon { transform: scaleX(-1); }
.tank__arrow--next { right: 12px; }
.tank__arrow:focus-visible { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .tank.is-slider:hover .tank__arrow { opacity: 1; }
}
@media (hover: none) {
  .tank__arrow { display: none; }
}

/* 사진 4장 모음 배너 (app.js collageHTML). 3:1 무대 위에 원래 그림과 같은 자리로 놓아요.
   글씨 크기는 배너 너비(cqw)에 맞춰 줄고 늘어요. 겹치는 순서: 2번 아래, 1·3번 그 위, 4번 맨 위 */
.tank.is-slider { container-type: inline-size; }
/* 누르면 메뉴로 가는 배너 (관리자 → 배너 사진 → 누르면 갈 곳) */
.tank [data-cat] { cursor: pointer; }
.hero-collage { background: var(--seed-color-bg-layer-default, #fff); overflow: hidden; }
.hero-collage__stage {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  aspect-ratio: 3 / 1;
  transform: translateY(-50%);
}
.hero-collage__head {
  position: absolute;
  top: 4.2%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.3cqw;
  margin: 0;
  color: var(--seed-color-fg-neutral);
  line-height: 1.2;
  white-space: nowrap;
}
.hero-collage__small { font-size: 1.95cqw; font-weight: var(--seed-font-weight-bold); letter-spacing: -0.02em; }
.hero-collage__title { font-size: 3.1cqw; font-weight: 800; letter-spacing: -0.03em; }
.hero-collage__logo { height: 3.6cqw; width: auto; }
:root[data-seed-user-color-scheme="dark"][data-logo-invert] .hero-collage__logo { filter: invert(1); }
.hero-collage__pic { position: absolute; display: block; object-fit: cover; }
.hero-collage__pic--1 { left: 10.31%; top: 21.03%; width: 23.46%; height: 46.1%; z-index: 2; }
.hero-collage__pic--2 { left: 32.69%; top: 39.68%; width: 21.18%; height: 54.92%; z-index: 1; }
.hero-collage__pic--3 { left: 53.21%; top: 21.03%; width: 27.26%; height: 58.93%; z-index: 2; }
.hero-collage__pic--4 { left: 69.58%; top: 49.7%; width: 20.04%; height: 45.1%; z-index: 3; }
/* 사진이 올라와 있는 걸 아는 상태(머리의 스크립트가 붙이는 data-hero)면, 사진이 도착하기 전에
   파란 수조 바탕을 깔지 않아요. Ctrl+F5로 새로고침할 때 파란 띠가 번쩍이던 문제를 막아요. */
html[data-hero] .tank--banner { background: transparent; }


@media (min-width: 900px) {
  .hero { padding: var(--seed-dimension-x6) 0 var(--seed-dimension-x4); }
  /* 큰 화면: 윗줄은 왼쪽 가게 소개·출고일 / 오른쪽 공지사항,
     아랫줄은 왼쪽 경매 한 줄 / 오른쪽 이벤트 한 줄 (두 줄 알림이 나란히 맞춰져요) */
  .hero__copy {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "side notice" "auction event";
    column-gap: var(--seed-dimension-x10);
    row-gap: var(--seed-dimension-x5);
    align-items: start;
    margin-top: var(--seed-dimension-x10);
  }
  .hero__side { grid-area: side; padding-top: 6px; }
  .hero__notice { grid-area: notice; }
  .hero__auction { grid-area: auction; }
  .hero__event { grid-area: event; }
  /* 공지 글이 없으면 소개 글·경매·이벤트가 한 줄씩 다 써요. */
  .hero__copy:has(#notices[data-empty="1"]) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "side" "auction" "event";
  }
  /* 경매·이벤트가 둘 다 없으면 빈 줄 간격이 생기지 않게 해요. */
  .hero__copy:has(#home-auction[data-empty="1"]):has(#home-event[data-empty="1"]) { row-gap: 0; }
}

/* ───────── 구역 ───────── */

.section { padding: var(--seed-dimension-x8) 0; }

@media (max-width: 767px) {
  .section + .section { border-top: 8px solid var(--seed-color-bg-layer-fill); }
}

@media (min-width: 768px) {
  .section { padding: var(--seed-dimension-x12) 0; }
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--seed-dimension-x4);
  margin-bottom: var(--seed-dimension-x4);
}
.section__head--center { align-items: center; }

.section__title {
  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;
}

.section__count {
  color: var(--seed-color-fg-neutral-subtle);
  font-weight: var(--seed-font-weight-medium);
}

.section__desc {
  margin-top: var(--seed-dimension-x1);
  color: var(--seed-color-fg-neutral-subtle);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
}

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

.sort {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
}
.sort select {
  height: 32px;
  padding: 0 24px 0 8px;
  border: 0;
  border-radius: var(--seed-radius-r2);
  background: transparent;
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t4);
  font-weight: var(--seed-font-weight-medium);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.sort select:hover { background: var(--seed-color-bg-transparent-pressed); }
.sort .icon {
  position: absolute;
  right: 4px;
  width: 16px;
  height: 16px;
  color: var(--seed-color-fg-neutral-subtle);
  pointer-events: none;
}

/* ───────── 상품 목록 ───────── */

.rail {
  display: grid;
  /* 휴대폰: 아래 격자(2칸)와 같은 폭. 옆으로 밀면 다음 카드가 나와요. */
  grid-auto-columns: calc((100% - var(--seed-dimension-x3)) / 2);
  grid-auto-flow: column;
  gap: var(--seed-dimension-x3);
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter) 4px;
  overflow-x: auto;
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

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

/* 희귀어·전체 상품 카드도 오늘 입고 카드와 같은 크기로 맞춰요. (큰 화면 한 줄에 6개) */
/* 중간 크기 화면: 오늘 입고 줄의 카드 폭을 아래 격자 한 칸과 똑같이 맞춰요. */
@media (min-width: 768px) {
  .rail {
    grid-auto-columns: calc((100% - 3 * var(--seed-dimension-x4)) / 4);
    gap: var(--seed-dimension-x4);
  }
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--seed-dimension-x8) var(--seed-dimension-x4);
  }
}

@media (min-width: 1024px) {
  .rail { grid-auto-columns: calc((100% - 4 * var(--seed-dimension-x4)) / 5); }
  .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 1120px) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

/* 상품 카드 */
.card {
  position: relative;
  min-width: 0;
}

.card__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--seed-radius-r3);
  background: var(--tile-top);
}
.card__media > svg { display: block; width: 100%; height: 100%; }
/* 용품·미니연못 카드는 사진을 통째로 넣어요(app.js cardHTML). 작은 칸이라 남는 띠가 사진과 이어져 보이게 흐린 바탕을 진하게 깔아요. */
.card__media > .pic::before { opacity: 1; }
/* 대량판매 상품 카드: 사진 오른쪽 위 모서리 표시 (app.js cardHTML).
   색·글꼴은 .flag .flag--bulk("대량 · 1박스 20개")를 그대로 쓰고, 여기서는 자리만 잡아요. */
.card__corner {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}
.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
  pointer-events: none;
}

.is-dry {
  --tile-top: var(--seed-color-palette-gray-100);
  --tile-bottom: var(--seed-color-palette-gray-200);
  --tile-bubble: transparent;
}

.card:has(.card__link:active) .card__media > svg { filter: brightness(0.96); }

/* 품절·예약 덮개. 사진을 어둡게 덮고, 가운데에 관리자 상품 화면과 같은 색 딱지를 놓아요. */
/* 사진 스티커: 어느 브리더·가게에서 데려온 개체인지 사진 왼쪽 위에 둥근 로고만 붙여요. (2026-09-26 글씨는 뺌) */
.stag {
  position: absolute;
  z-index: 1;
  display: flex;
  pointer-events: none;
}
.stag__logos { display: flex; flex: none; }
.stag__logos img {
  display: block;
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  background: #000;
  border: 2px solid #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
}
.stag__logos img + img { margin-left: -8px; }
.stag--card { left: 8px; top: 8px; }
.stag--card .stag__logos img { width: 34px; }
.stag--sheet { left: 14px; top: 14px; }
.stag--sheet .stag__logos img { width: clamp(48px, 12vw, 68px); border-width: 2.5px; }
.stag--sheet .stag__logos img + img { margin-left: -12px; }
/* 경매 카드는 왼쪽 위에 진행 상태가 있어서 스티커는 왼쪽 아래에 둬요. */
.auction-card .stag--card { top: auto; bottom: 8px; }

/* 상품(개체) 이름 위 한 줄: 실물·BEST·HOT */
.flag-line { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 3px; }
.sheet__body > .flag-line { margin-bottom: 6px; }
.flag {
  display: inline-block;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 19px;
  font-weight: var(--seed-font-weight-bold);
  letter-spacing: 0.02em;
}
/* 2026-09-26: 처음 모양(옅은 바탕 + 색 글씨)으로 되돌리고 살짝만 키웠어요. (11px → 12px, 상품 창 12px → 13px) */
.sheet__body > .flag-line .flag { font-size: 13px; line-height: 21px; padding: 0 7px; }
.flag--real { background: #e6f5ec; color: #0f7a45; }
.flag--best { background: var(--seed-color-bg-brand-weak, #e8f1ff); color: var(--seed-color-fg-brand, #1d5fd6); }
.flag--hot { background: var(--seed-color-bg-critical-weak, #ffebe8); color: var(--seed-color-fg-critical, #d6301d); }
/* 대량판매 (1박스 N개) 표시와 1개당 가격 (068) */
.flag--bulk { background: var(--seed-color-bg-neutral-weak); color: var(--seed-color-fg-neutral); }
.price__per { display: block; margin-top: 2px; color: var(--seed-color-fg-neutral-muted); font-size: var(--seed-font-size-t3); font-weight: var(--seed-font-weight-regular); }
[data-seed-user-color-scheme="dark"] .flag--real { background: #173d28; color: #7fdca6; }
.card__soldout {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--seed-color-bg-overlay);
}
.card__soldout > b {
  padding: 5px 14px;
  border-radius: var(--seed-radius-full);
  background: var(--sale-soldout);
  color: var(--seed-color-palette-static-white);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-bold);
}
/* 예약은 연두색 딱지. 바탕이 밝아서 글씨는 어둡게 써요. */
.card__soldout--reserved > b { background: var(--sale-reserved-chip); color: #16250a; }

/* 상품 창의 버튼과 장바구니 줄에서도 같은 색으로 알려 줘요. */
.btn.is-soldout[disabled] { color: var(--sale-soldout); }
.btn.is-reserved[disabled] { color: var(--sale-reserved); }
.line__price.is-soldout { color: var(--sale-soldout); }
.line__price.is-reserved { color: var(--sale-reserved); }

.card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
}

.card__title {
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-medium);
}

.card__link {
  display: -webkit-box;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--seed-radius-r3);
}
.card__link:focus-visible { outline: none; }
.card__link:focus-visible::after {
  outline: 2px solid var(--seed-color-stroke-focus-ring);
  outline-offset: 4px;
}

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 4px;
  margin-top: 2px;
  font-size: var(--seed-font-size-t5);
  line-height: var(--seed-line-height-t5);
  font-weight: var(--seed-font-weight-bold);
}
.price__off { color: var(--seed-color-fg-brand); }
.price__was {
  color: var(--seed-color-fg-neutral-subtle);
  font-size: var(--seed-font-size-t3);
  font-weight: var(--seed-font-weight-regular);
}

@media (min-width: 768px) {
  .card__title {
    font-size: var(--seed-font-size-t5);
    line-height: var(--seed-line-height-t5);
  }
  .card .price {
    font-size: var(--seed-font-size-t6);
    line-height: var(--seed-line-height-t6);
  }
}

/* SEED badge (medium) */
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 6px;
  border-radius: var(--seed-radius-r1);
  font-size: var(--seed-font-size-t1);
  line-height: var(--seed-line-height-t1);
  font-weight: var(--seed-font-weight-medium);
}
.badge--brand { background: var(--seed-color-bg-brand-weak); color: var(--seed-color-fg-brand-contrast); }
.badge--neutral { background: var(--seed-color-bg-neutral-weak); color: var(--seed-color-fg-neutral-muted); }
.badge--info { background: var(--seed-color-bg-informative-weak); color: var(--seed-color-fg-informative-contrast); }
.badge--critical { background: var(--seed-color-bg-critical-weak); color: var(--seed-color-fg-critical); font-weight: var(--seed-font-weight-bold); }
.badge--outline {
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
  color: var(--seed-color-fg-neutral-muted);
  font-weight: var(--seed-font-weight-bold);
}

.stats {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  color: var(--seed-color-fg-neutral-subtle);
  font-size: var(--seed-font-size-t2);
  line-height: var(--seed-line-height-t2);
  font-variant-numeric: tabular-nums;
}
.stats span { display: inline-flex; align-items: center; gap: 2px; }
.stats .icon { width: 14px; height: 14px; stroke-width: 2; }

.like-btn {
  position: absolute;
  z-index: 1;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-bg-layer-floating);
  box-shadow: var(--seed-shadow-s1);
  color: var(--seed-color-fg-neutral-subtle);
}
.like-btn .icon { width: 18px; height: 18px; stroke-width: 2; }
.like-btn[aria-pressed="true"],
.like-lg[aria-pressed="true"] { color: var(--seed-color-fg-brand); }
.is-popping .icon { animation: pop var(--seed-duration-d6) var(--seed-timing-function-enter-expressive); }

@keyframes pop {
  40% { transform: scale(1.25); }
}

.empty {
  grid-column: 1 / -1;
  padding: var(--seed-dimension-x10) var(--seed-dimension-x4);
  text-align: center;
  color: var(--seed-color-fg-neutral-subtle);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
}
.empty__art {
  width: 112px;
  margin: 0 auto var(--seed-dimension-x4);
  overflow: hidden;
  border-radius: var(--seed-radius-r4);
}
.empty__art > svg { display: block; width: 100%; height: auto; }
/* 장바구니가 비었을 때 나오는 가게 로고. 어두운 모드에서는 맨 위 로고와 똑같이 색을 뒤집어요. */
.empty__art--logo { width: auto; border-radius: 0; }
.empty__logo { display: block; height: 96px; width: auto; max-width: 160px; margin: 0 auto; object-fit: contain; }
.empty__title {
  margin-bottom: var(--seed-dimension-x1);
  color: var(--seed-color-fg-neutral);
  font-size: var(--seed-font-size-t6);
  line-height: var(--seed-line-height-t6);
  font-weight: var(--seed-font-weight-bold);
}
.empty .btn { margin-top: var(--seed-dimension-x4); }

/* 판매 순위 (SEED list-item) */
/* 한 칸씩 옅은 카드로 묶고, 카드 사이는 12px로 좁게 둬요. */
.ranks { display: grid; gap: var(--seed-dimension-x3); }

@media (min-width: 768px) {
  .ranks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ranks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rank__hit {
  display: flex;
  align-items: center;
  gap: var(--seed-dimension-x3);
  width: 100%;
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4) var(--seed-dimension-x3) var(--seed-dimension-x3);
  border: 0;
  border-radius: var(--seed-radius-r4);
  background: var(--seed-color-bg-layer-fill);
  text-align: left;
  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
}
.rank__hit:hover { background: var(--seed-color-bg-neutral-weak); }
.rank__hit:hover .rank__title { text-decoration: underline; text-underline-offset: 3px; }

.rank__num {
  flex: none;
  width: 20px;
  font-size: var(--seed-font-size-t6);
  font-weight: var(--seed-font-weight-bold);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.rank__thumb {
  position: relative;
  flex: none;
  width: 88px;
  height: 88px;
  overflow: hidden;
  border-radius: var(--seed-radius-r3);
  background: var(--tile-top);
}
.rank__thumb > svg { display: block; width: 100%; height: 100%; }
/* 큰 화면: 그림을 오늘 입고·희귀어 카드와 예전 크기의 중간쯤으로 */
@media (min-width: 768px) {
  .rank__thumb { width: 112px; height: 112px; }
}

.rank__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rank__title {
  overflow: hidden;
  font-size: var(--seed-font-size-t5);
  line-height: var(--seed-line-height-t5);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rank__meta {
  color: var(--seed-color-fg-neutral-subtle);
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
}
.rank__price {
  font-size: var(--seed-font-size-t5);
  line-height: var(--seed-line-height-t5);
  font-weight: var(--seed-font-weight-bold);
}

/* 배송 안내 */
.steps { display: grid; gap: var(--seed-dimension-x3); }

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--seed-dimension-x4); }
}

.step {
  padding: var(--seed-dimension-x5);
  border-radius: var(--seed-radius-r4);
  background: var(--seed-color-bg-layer-fill);
}
.step__num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  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-t3);
  font-weight: var(--seed-font-weight-bold);
}
.step__title {
  margin-top: var(--seed-dimension-x3);
  font-size: var(--seed-font-size-t6);
  line-height: var(--seed-line-height-t6);
  font-weight: var(--seed-font-weight-bold);
}
.step__desc {
  margin-top: var(--seed-dimension-x1);
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t4);
  line-height: 22px;
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: var(--seed-dimension-x4);
  padding: 14px var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-informative-weak);
  color: var(--seed-color-fg-informative-contrast);
  font-size: var(--seed-font-size-t4);
  line-height: 22px;
}
.notice .icon { width: 20px; height: 20px; margin-top: 1px; color: var(--seed-color-fg-informative); }

/* ───────── 배송 안내 (따로 열리는 페이지) ───────── */

.ship-notes {
  display: grid;
  gap: var(--seed-dimension-x5);
}
@media (min-width: 768px) {
  .ship-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--seed-dimension-x6); }
}
.ship-note {
  padding: var(--seed-dimension-x6);
  border-radius: var(--seed-radius-r5);
  background: var(--seed-color-bg-layer-fill);
}
.ship-note__title {
  margin-bottom: var(--seed-dimension-x3);
  font-size: var(--seed-font-size-t6);
  line-height: var(--seed-line-height-t6);
  font-weight: var(--seed-font-weight-bold);
}
.ship-note__body p {
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t5);
  line-height: 26px;
}
.ship-note__body p + p { margin-top: var(--seed-dimension-x2); }

/* ───────── 무통장 입금 안내 (따로 열리는 페이지) ───────── */

.bank-page { display: grid; gap: var(--seed-dimension-x5); }
@media (min-width: 768px) {
  .bank-page { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--seed-dimension-x6); align-items: start; }
}
.bank-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--seed-dimension-x3);
  padding: var(--seed-dimension-x6);
  border-radius: var(--seed-radius-r5);
  background: color-mix(in srgb, var(--seed-color-bg-brand-solid) 8%, transparent);
}
.bank-card__label { color: var(--seed-color-fg-neutral-muted); font-size: var(--seed-font-size-t4); line-height: var(--seed-line-height-t4); }
.bank-card__account {
  font-size: 20px; /* 글씨 크기 사다리의 20 (로고·바닥글 상호와 같은 단) */
  line-height: 28px;
  font-weight: var(--seed-font-weight-bold);
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.bank-card__account.is-empty { font-size: var(--seed-font-size-t5); font-weight: var(--seed-font-weight-regular); color: var(--seed-color-fg-neutral-muted); }
.bank-ask { margin-top: var(--seed-dimension-x5); }
/* 계좌 글 바로 오른쪽의 작은 복사 버튼 */
.bank-card__line { line-height: 28px; }
/* 글 흐름 안에 둬서, 휴대폰에서 계좌가 두 줄로 꺾여도 버튼이 (예금주) 바로 뒤에 붙어요. */
.bank-card__line .bank-card__account { display: inline; margin-right: var(--seed-dimension-x2); }
.bank-card__copy {
  display: inline-block;
  vertical-align: 2px;
  height: 26px;
  padding: 0 10px;
  white-space: nowrap;
  border: 0;
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-bg-brand-solid);
  color: var(--seed-color-palette-static-white);
  font: inherit;
  font-size: var(--seed-font-size-t3);
  font-weight: var(--seed-font-weight-bold);
  cursor: pointer;
}
.bank-card__copy:hover { filter: brightness(1.08); }
@media (max-width: 480px) {
  /* 휴대폰에서 '번호(예금주) [복사]'가 한 줄에 들어가게 조금 줄여요. (사다리의 18) */
  .bank-card { padding: var(--seed-dimension-x5) var(--seed-dimension-x4); }
  /* 버튼 앞 띄어쓰기 한 칸이 이미 틈이 돼서 따로 여백을 두지 않아요. */
  .bank-card__line .bank-card__account { font-size: 18px; margin-right: 0; }
  .bank-card__bank { display: block; }
  .bank-card__copy { padding: 0 8px; font-size: var(--seed-font-size-t2); }
}
.bank-card__copy:focus-visible { outline: 2px solid var(--seed-color-stroke-neutral-contrast); outline-offset: 2px; }

/* ───────── 매장 안내 ───────── */

.store {
  display: grid;
  gap: var(--seed-dimension-x5);
  align-items: start;
}
@media (min-width: 768px) {
  .store { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--seed-dimension-x8); }
}
.store__photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--seed-radius-r5);
  background: var(--seed-color-bg-neutral-weak);
}
.store__photo img { width: 100%; height: 100%; object-fit: cover; }
.store__none {
  display: grid;
  justify-items: center;
  gap: var(--seed-dimension-x2);
  color: var(--seed-color-fg-neutral-subtle);
  font-size: var(--seed-font-size-t4);
}
.store__none .icon { width: 28px; height: 28px; }
/* 글의 첫 줄이 왼쪽 사진 맨 위와 나란히 시작하게 해요. */
.store__body { padding-top: 0; }
/* 매장 안내 글. 다른 본문(가게 소개·상품 설명)과 같은 크기·색으로 맞춰요.
   예전엔 18px 진한 검정이라 페이지에서 혼자 크고 무겁게 보였어요. */
.store__desc {
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t5);
  /* 안내가 여러 덩어리라 촘촘하게 붙여요. */
  line-height: 22px;
}
.store__desc b,
.store__desc strong { color: var(--seed-color-fg-neutral); font-weight: var(--seed-font-weight-bold); }
/* 소제목과 그 아래 글은 바짝 붙이고, 덩어리 사이만 조금 띄워요.
   (아래 .rules__body 기본값보다 뒤에 오도록 클래스를 겹쳐 적어요) */
.store__desc.rules__body .rich__sub { margin-top: var(--seed-dimension-x3); }
.store__desc.rules__body p { margin-top: 2px; }
.store__desc.rules__body ul { margin-top: 2px; }
.store__desc.rules__body li + li { margin-top: 0; }
.store__desc.rules__body .rich__key { margin-top: 6px; padding: 8px 10px; line-height: 20px; }
/* 맨 위 글은 사진과 높이를 맞추려고 위 여백을 없애요. */
.store__desc.rules__body > *:first-child { margin-top: 0; }
/* 아직 안 적었을 때 보여 주는 안내는 흐리게 */
.store__map { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--seed-color-stroke-neutral-muted, currentColor); }
.store__map:hover { text-decoration-color: currentColor; }
.store__desc.is-placeholder { color: var(--seed-color-fg-neutral-subtle); }
.store__cs {
  margin-top: var(--seed-dimension-x4);
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
}
.store__cs b { color: var(--seed-color-fg-neutral); font-weight: var(--seed-font-weight-bold); }

/* ───────── 바닥글 ───────── */

/* 바닥글은 옅고 투명한 회색 판이에요. 꽉 찬 회색보다 가볍게 보여요.
   색을 직접 적지 않고 글자색을 아주 옅게 섞어서, 밝게·어둡게 모드 모두 자연스럽게 따라가요. */
.footer {
  margin-top: var(--seed-dimension-x10);
  padding: var(--seed-dimension-x10) 0 calc(var(--seed-dimension-x10) + var(--seed-safe-area-bottom));
  border-top: 1px solid color-mix(in srgb, var(--seed-color-fg-neutral) 8%, transparent);
  background: color-mix(in srgb, var(--seed-color-fg-neutral) 4%, transparent);
  color: var(--seed-color-fg-neutral-subtle);
  font-size: var(--seed-font-size-t3);
  line-height: 20px;
  -webkit-backdrop-filter: saturate(140%);
  backdrop-filter: saturate(140%);
}

/* 휴대폰은 한 줄씩, 넓은 화면은 소개 + 세 칸 */
.footer__grid {
  display: grid;
  gap: var(--seed-dimension-x7);
}
@media (min-width: 600px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__about { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: var(--seed-dimension-x8);
  }
  .footer__about { grid-column: auto; }
}

.footer__brand {
  color: var(--seed-color-fg-neutral);
  font-size: var(--seed-font-size-t7);
  line-height: var(--seed-line-height-t7);
  font-weight: var(--seed-font-weight-bold);
}
.footer__tag { margin-top: var(--seed-dimension-x1); max-width: 28em; }

.footer__sns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--seed-dimension-x2);
  margin-top: var(--seed-dimension-x4);
}
.footer__sns-link {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-bg-layer-default);
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t3);
  font-weight: var(--seed-font-weight-medium);
  text-decoration: none;
}
.footer__sns-link:hover { color: var(--seed-color-fg-neutral); }
/* 뒤에 오는 버튼을 다음 줄로 내리는 빈 칸 */
.footer__sns-break { flex-basis: 100%; height: 0; }
/* 서비스마다 자기 색으로 보여 줘요. (각 서비스의 대표 색)
   주소를 아직 안 넣은 버튼은 눌러도 아무 데도 가지 않고 조금 흐리게 보여요. */
.footer__sns-link--kakao { background: #fee500; color: #191600; }
.footer__sns-link--kakao:hover { background: #f5dd00; color: #191600; }
.footer__sns-link--insta {
  background: linear-gradient(45deg, #f9a03c 0%, #e4405f 45%, #c13584 70%, #7b3fa0 100%);
  color: #fff;
}
.footer__sns-link--insta:hover { color: #fff; filter: brightness(1.06); }
.footer__sns-link--band { background: #00c73c; color: #fff; }
.footer__sns-link--band:hover { background: #00b737; color: #fff; }
/* 주소를 아직 안 넣었을 때 */
.footer__sns-link.is-empty { opacity: 0.55; cursor: default; }

.footer__head {
  margin-bottom: var(--seed-dimension-x3);
  color: var(--seed-color-fg-neutral);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-bold);
}
.footer__dl { display: grid; gap: var(--seed-dimension-x2); }
.footer__dl dt { color: var(--seed-color-fg-neutral-subtle); }
.footer__dl dd {
  margin: 0;
  color: var(--seed-color-fg-neutral-muted);
  font-weight: var(--seed-font-weight-medium);
}
.footer__dl a { color: inherit; text-decoration: none; }
.footer__dl a[href]:hover { text-decoration: underline; }

.footer__links { display: grid; gap: var(--seed-dimension-x2); list-style: none; }
.footer__links a {
  color: var(--seed-color-fg-neutral-muted);
  font-weight: var(--seed-font-weight-medium);
  text-decoration: none;
}
.footer__links a:hover { text-decoration: underline; }

/* 사업자 정보는 펼쳐 볼 수 있게 접어 뒀어요. */
.footer__biz-box {
  margin-top: var(--seed-dimension-x8);
  padding-top: var(--seed-dimension-x5);
  border-top: 1px solid var(--seed-color-stroke-neutral-subtle);
}
.footer__biz-box summary {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  color: var(--seed-color-fg-neutral-muted);
  font-weight: var(--seed-font-weight-medium);
  cursor: pointer;
  list-style: none;
}
.footer__biz-box summary::-webkit-details-marker { display: none; }
.footer__biz-box summary .icon { width: 16px; height: 16px; transition: transform .15s ease; }
.footer__biz-box[open] summary .icon { transform: rotate(180deg); }
.footer__biz {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--seed-dimension-x4);
  margin-top: var(--seed-dimension-x3);
}
.footer__biz b { color: var(--seed-color-fg-neutral-muted); font-weight: var(--seed-font-weight-medium); }

.footer__copy { margin-top: var(--seed-dimension-x5); }

/* ───────── 모바일 하단 탭 ───────── */

.tabbar {
  position: fixed;
  z-index: 30;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: calc(56px + var(--seed-safe-area-bottom));
  padding-bottom: var(--seed-safe-area-bottom);
  background: var(--seed-color-bg-layer-default);
  box-shadow: inset 0 1px 0 var(--seed-color-stroke-neutral-subtle);
}

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

.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--seed-color-fg-neutral-subtle);
  font-size: 11px;
  line-height: 14px;
  font-weight: var(--seed-font-weight-medium);
}
.tab[aria-current="page"] { color: var(--seed-color-fg-neutral); }
.tab .count { top: 4px; right: calc(50% - 22px); }

/* ───────── 상품 상세 (SEED bottom-sheet / dialog) ───────── */

.sheet, .panel {
  padding: 0;
  border: 0;
  background: var(--seed-color-bg-layer-floating);
  color: var(--seed-color-fg-neutral);
  box-shadow: var(--seed-shadow-s3);
  overflow: hidden;
}
.sheet::backdrop, .panel::backdrop {
  background: var(--seed-color-bg-overlay, rgba(0, 0, 0, 0.45));
}
dialog[open]::backdrop { animation: fade-in var(--seed-duration-d5) linear; }

.sheet {
  width: min(520px, calc(100% - 32px));
  max-height: min(90vh, 880px);
  border-radius: var(--seed-radius-r5);
}
.sheet[open] {
  display: flex;
  flex-direction: column;
  animation: sheet-in var(--seed-duration-d6) var(--seed-timing-function-enter-expressive);
}

@media (max-width: 767px) {
  .sheet {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    /* 카카오톡·사파리처럼 아래 도구 막대가 있는 브라우저에서는 보이는 높이(dvh)에 맞춰요. */
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: var(--seed-radius-r5) var(--seed-radius-r5) 0 0;
  }
  .sheet[open] { animation-name: sheet-up; }
}

@keyframes sheet-in { from { opacity: 0; transform: translateY(24px); } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes fade-in { from { opacity: 0; } }

.sheet__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sheet__media {
  position: relative;
  aspect-ratio: 5 / 4;
  background: var(--tile-top);
}
.sheet__media > svg { display: block; width: 100%; height: 100%; }
/* 사진이 있으면 정사각형 칸에 사진을 통째로 넣어요. 위아래·양옆을 자르지 않아요. */
.sheet__media.has-pic { aspect-ratio: 1 / 1; overflow: hidden; }
.pic {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--seed-color-bg-neutral-weak);
}
/* 남는 자리에는 같은 사진을 크게 흐려서 깔아요. */
.pic::before {
  content: '';
  position: absolute;
  inset: -24px;
  background: var(--pic) center / cover no-repeat;
  filter: blur(22px);
  opacity: 0.55;
}
.pic > img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sheet__close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-bg-layer-floating);
  box-shadow: var(--seed-shadow-s1);
  color: var(--seed-color-fg-neutral);
}
.sheet__close .icon { width: 20px; height: 20px; }
/* 합배송·비슷한 상품을 눌러 옮겨 왔을 때 앞 상품으로 돌아가는 버튼 (app.js sheetBack) */
.sheet__back {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-bg-layer-floating);
  box-shadow: var(--seed-shadow-s1);
  color: var(--seed-color-fg-neutral);
  cursor: pointer;
}
.sheet__back .icon { width: 20px; height: 20px; transform: rotate(180deg); }

.sheet__body { padding: var(--seed-dimension-x5) var(--seed-dimension-x5) var(--seed-dimension-x6); }

.sheet__title {
  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;
}
.sheet__body .price {
  margin-top: var(--seed-dimension-x3);
  font-size: var(--seed-font-size-t9);
  line-height: var(--seed-line-height-t9);
}
.sheet__body .price__was { font-size: var(--seed-font-size-t4); }

/* 설명 사진 (067): 가로 꽉 차게, 자르지 않고, 사이 틈 없이 이어서 (긴 상세 사진을 나눠 올려도 이어져 보여요) */
.desc-photos {
  margin-top: var(--seed-dimension-x4);
  overflow: hidden;
  border-radius: var(--seed-radius-r3);
}
.desc-photos img { display: block; width: 100%; height: auto; }
.sheet__desc {
  margin-top: var(--seed-dimension-x4);
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t5);
  line-height: 26px;
  /* 관리자가 엔터로 나눈 줄을 그대로 보여 줘요. */
  white-space: pre-wrap;
}

.ship-line {
  display: flex;
  align-items: flex-start;
  gap: var(--seed-dimension-x2);
  margin-top: var(--seed-dimension-x4);
  padding-top: var(--seed-dimension-x4);
  border-top: 1px solid var(--seed-color-stroke-neutral-subtle);
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t4);
  line-height: 22px;
}
.ship-line .icon { width: 20px; height: 20px; margin-top: 1px; color: var(--seed-color-fg-neutral-subtle); }
.ship-line strong { color: var(--seed-color-fg-neutral); font-weight: var(--seed-font-weight-bold); }
/* 배송 안내 문구는 줄마다 한 문단이에요. */
.ship-line__body { min-width: 0; }
.ship-line__body p + p { margin-top: 6px; }

.sheet__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--seed-dimension-x2);
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4) calc(var(--seed-dimension-x3) + var(--seed-safe-area-bottom));
  background: var(--seed-color-bg-layer-floating);
  box-shadow: inset 0 1px 0 var(--seed-color-stroke-neutral-subtle);
}
.sheet__actions { flex-wrap: wrap; }
.sheet__actions .btn { flex: 1 1 auto; min-width: 0; }
/* 장바구니 담기 · 바로 구매. 좁은 화면에서는 둘째 줄로 내려가 가로를 꽉 채워요. */
.sheet__buy { display: flex; flex: 1 1 240px; gap: var(--seed-dimension-x2); min-width: 0; }

.like-lg {
  display: grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: var(--seed-radius-r3);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
  color: var(--seed-color-fg-neutral-muted);
}

/* SEED quantity-picker */
.qty {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 52px;
  border-radius: var(--seed-radius-r3);
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
}
.qty button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--seed-color-fg-neutral);
}
.qty button:disabled { color: var(--seed-color-fg-disabled); cursor: not-allowed; }
.qty .icon { width: 18px; height: 18px; stroke-width: 2; }
.qty output {
  min-width: 24px;
  font-weight: var(--seed-font-weight-bold);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.qty--sm { height: 32px; border-radius: var(--seed-radius-r2); }
.qty--sm button { width: 32px; }
.qty--sm .icon { width: 16px; height: 16px; }
.qty--sm output { font-size: var(--seed-font-size-t4); }

/* ───────── 장바구니 (SEED side-panel) ───────── */

.panel {
  width: min(420px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 0 0 auto;
}
.panel[open] {
  display: flex;
  flex-direction: column;
  animation: panel-in var(--seed-duration-d6) var(--seed-timing-function-enter-expressive);
}
@keyframes panel-in { from { transform: translateX(100%); } }

.panel__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 var(--seed-dimension-x2) 0 var(--seed-dimension-x5);
  box-shadow: inset 0 -1px 0 var(--seed-color-stroke-neutral-subtle);
}
.panel__title {
  font-size: var(--seed-font-size-t6);
  line-height: var(--seed-line-height-t6);
  font-weight: var(--seed-font-weight-bold);
}

.panel__body {
  flex: 1 1 auto;
  padding: 0 var(--seed-dimension-x5) var(--seed-dimension-x5);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.panel__body .notice { margin: var(--seed-dimension-x4) 0 0; }

.line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--seed-dimension-x3);
  align-items: start;
  padding: var(--seed-dimension-x4) 0;
  box-shadow: inset 0 -1px 0 var(--seed-color-stroke-neutral-subtle);
}
.line__thumb {
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: var(--seed-radius-r2);
  background: var(--tile-top);
}
.line__thumb > svg { display: block; width: 100%; height: 100%; }
.line__name {
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
}
.line__price {
  margin-top: 2px;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-bold);
}
.line__ctrl { margin-top: var(--seed-dimension-x2); }
.line__remove {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -6px -6px 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--seed-radius-full);
  background: none;
  color: var(--seed-color-fg-neutral-subtle);
}
.line__remove:hover { background: var(--seed-color-bg-transparent-pressed); }
.line__remove .icon { width: 18px; height: 18px; }

.summary {
  flex: none;
  padding: var(--seed-dimension-x4) var(--seed-dimension-x5);
  background: var(--seed-color-bg-layer-fill);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
}
.summary__row { display: flex; justify-content: space-between; gap: var(--seed-dimension-x4); }
.summary__row + .summary__row { margin-top: 6px; }
.summary__row dt { color: var(--seed-color-fg-neutral-muted); }
.summary__row dd { font-variant-numeric: tabular-nums; }
.summary__total {
  margin-top: var(--seed-dimension-x3) !important;
  padding-top: var(--seed-dimension-x3);
  border-top: 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);
}
.summary__total dt { color: var(--seed-color-fg-neutral); }

.freeship {
  margin-bottom: var(--seed-dimension-x3);
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
}
.freeship strong { color: var(--seed-color-fg-neutral); }
.bar {
  display: block;
  height: 4px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-bg-neutral-weak);
}
.bar > i {
  display: block;
  width: var(--p, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--seed-color-bg-positive-solid);
  transition: width var(--seed-duration-d6) var(--seed-timing-function-easing);
}

.panel__foot {
  flex: none;
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4) calc(var(--seed-dimension-x3) + var(--seed-safe-area-bottom));
  background: var(--seed-color-bg-layer-floating);
}
.panel__foot .btn { width: 100%; }

/* ───────── 알림 (SEED snackbar) ───────── */

.snackbar {
  position: fixed;
  inset: auto auto calc(var(--tabbar-h) + var(--seed-safe-area-bottom) + 16px) 50%;
  width: max-content;
  max-width: calc(100% - 32px);
  height: auto;
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-neutral-inverted);
  color: var(--seed-color-fg-neutral-inverted);
  box-shadow: var(--seed-shadow-s2);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity var(--seed-duration-d4) var(--seed-timing-function-enter),
    transform var(--seed-duration-d4) var(--seed-timing-function-enter);
}
.snackbar.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.snackbar__inner { display: flex; align-items: center; gap: var(--seed-dimension-x4); }
.snackbar__action {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--seed-color-fg-brand);
  font-weight: var(--seed-font-weight-bold);
}

/* ───────── 데이터베이스에서 오는 것들 ───────── */

[hidden] { display: none !important; }

a.text-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* 상품 사진 (관리자가 올린 사진이 있으면 그림 대신 보여요) */
.card__media > img,
.rank__thumb > img,
.line__thumb > img,
.sheet__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.notice-bar {
  margin: 0;
  padding: 10px var(--gutter);
  background: var(--seed-color-bg-brand-weak);
  color: var(--seed-color-fg-brand-contrast);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-medium);
  text-align: center;
}

.rail-empty,
.loading {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--seed-dimension-x8) var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-layer-fill);
  color: var(--seed-color-fg-neutral-subtle);
  font-size: var(--seed-font-size-t4);
  text-align: center;
}

.line.is-soldout .line__thumb,
.line.is-soldout .line__name { opacity: 0.5; }
.line.is-soldout .line__price { color: var(--seed-color-fg-critical); }

/* ───────── 회원 (로그인·가입) ───────── */

.sheet--form { width: min(440px, calc(100% - 32px)); }
/* 휴대폰에서는 로그인·주문서·후기 쓰기 창도 상품 창처럼 가로를 꽉 채워요.
   (위 줄이 휴대폰용 .sheet { width: 100% } 보다 뒤에 있어서 오른쪽에 32px 빈 띠가 생겼어요, 2026-10-01) */
@media (max-width: 767px) {
  .sheet--form { width: 100%; }
}
.sheet--form .sheet__close { box-shadow: none; background: transparent; }
.sheet--form .sheet__close:hover { background: var(--seed-color-bg-transparent-pressed); }

.form-body { position: relative; padding: var(--seed-dimension-x6) var(--seed-dimension-x5) var(--seed-dimension-x6); }

.form-head { padding-right: var(--seed-dimension-x10); margin-bottom: var(--seed-dimension-x6); }
.form-title {
  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;
}
.form-desc {
  margin-top: var(--seed-dimension-x2);
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t4);
  line-height: 22px;
}

.form { display: flex; flex-direction: column; gap: var(--seed-dimension-x4); }
.form--row { flex-direction: row; }
.form--row .btn { flex: 1 1 0; }

/* SEED text-input (outline, large) */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label {
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  font-weight: var(--seed-font-weight-medium);
}
.field__input {
  width: 100%;
  min-height: var(--seed-dimension-x13);
  padding: 0 var(--seed-dimension-x4);
  border: 0;
  border-radius: var(--seed-radius-r3);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
  color: var(--seed-color-fg-neutral);
  font-size: var(--seed-font-size-t5);
  outline: none;
  transition: box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
}
/* 여러 줄 칸(취소 요청 이유·후기·게시글): 한 줄 칸과 달리 위아래 여백이 있어야 글씨가 테두리에 붙지 않아요.
   글꼴도 따로 정하지 않으면 브라우저 기본(고정폭)으로 나와요. */
textarea.field__input {
  display: block;
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4);
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
}
.field__input::placeholder { color: var(--seed-color-fg-placeholder); }
.field__input:focus { box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-contrast); }
.field__input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--seed-color-stroke-critical-solid); }

/* 칸 아래 작은 도움말 */
.field__hint {
  color: var(--seed-color-fg-neutral-subtle);
  font-size: var(--seed-font-size-t3);
  line-height: 18px;
}
.field__hint b { color: var(--seed-color-fg-neutral-muted); font-weight: var(--seed-font-weight-medium); }

/* 내 정보의 닉네임 칸 */
.nick-form { margin-bottom: var(--seed-dimension-x6); }

.form-error:empty { display: none; }
.form-error {
  margin-top: calc(var(--seed-dimension-x1) * -1);
  color: var(--seed-color-fg-critical);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
}

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

.btn--critical {
  background: var(--seed-color-bg-critical-solid);
  color: var(--seed-color-palette-static-white);
}
.btn--critical:hover, .btn--critical:active { background: var(--seed-color-bg-critical-solid-pressed); }

/* 카카오 로그인 버튼은 카카오 디자인 가이드 색을 따라요. */
.btn--kakao { background: #fee500; color: rgba(0, 0, 0, 0.85); }
.btn--kakao:hover, .btn--kakao:active { background: #f5dc00; }
.btn--kakao .icon { width: 20px; height: 20px; color: #000; }

/* SEED switch (관리자 페이지와 내 정보에서 같이 써요) */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex: none;
  margin: 0;
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-palette-gray-500);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--seed-duration-d3) var(--seed-timing-function-easing);
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--seed-color-palette-static-white);
  box-shadow: var(--seed-shadow-s1);
  transition: transform var(--seed-duration-d3) var(--seed-timing-function-easing);
}
.switch:checked { background: var(--seed-color-bg-brand-solid); }
.switch:checked::after { transform: translateX(18px); }
.switch:disabled { opacity: 0.5; cursor: default; }

.form-links {
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--seed-dimension-x2);
  margin-top: var(--seed-dimension-x4);
  color: var(--seed-color-fg-neutral-subtle);
  font-size: var(--seed-font-size-t4);
}
.form-links .link-btn + .link-btn::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-right: var(--seed-dimension-x2);
  background: var(--seed-color-stroke-neutral-muted);
  vertical-align: -1px;
}

.link-btn {
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t4);
  font-weight: var(--seed-font-weight-medium);
}
.link-btn:hover { color: var(--seed-color-fg-neutral); text-decoration: underline; text-underline-offset: 3px; }

.form-note {
  margin-top: var(--seed-dimension-x3);
  color: var(--seed-color-fg-neutral-subtle);
  font-size: var(--seed-font-size-t3);
  text-align: center;
}

/* 약관 동의 (SEED checkbox) */
.consents {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4);
  border: 0;
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-layer-fill);
}
.check-row { display: flex; align-items: center; justify-content: space-between; gap: var(--seed-dimension-x2); }
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  cursor: pointer;
}
.check--all {
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--seed-color-stroke-neutral-subtle);
  font-weight: var(--seed-font-weight-bold);
}
.check em {
  margin-right: 4px;
  color: var(--seed-color-fg-brand);
  font-style: normal;
  font-weight: var(--seed-font-weight-medium);
}
.check em.is-optional { color: var(--seed-color-fg-neutral-subtle); }
.check input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: var(--seed-radius-r1_5);
  background: var(--seed-color-bg-layer-default);
  box-shadow: inset 0 0 0 1.5px var(--seed-color-stroke-neutral-weak);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.check input:checked {
  background: var(--seed-color-bg-brand-solid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: none;
}
.check input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--seed-color-stroke-critical-solid); }
.check-row .link-btn { flex: none; font-size: var(--seed-font-size-t3); text-decoration: underline; text-underline-offset: 3px; }

/* 동의 항목의 "보기"를 누르면 펼쳐지는 안내 */
.consent-doc {
  margin: 2px 0 6px 32px;
  padding: 10px 12px;
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-layer-default);
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t3);
  line-height: 20px;
}
.consent-doc p + p, .consent-doc dl + p, .consent-doc p + a { display: block; margin-top: 6px; }
.consent-doc dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; }
.consent-doc dt { color: var(--seed-color-fg-neutral); font-weight: var(--seed-font-weight-medium); white-space: nowrap; }
.consent-doc dd { margin: 0; }
.consent-doc a { color: var(--seed-color-fg-brand); font-weight: var(--seed-font-weight-medium); text-underline-offset: 3px; }

.form-note a { color: var(--seed-color-fg-neutral-muted); text-underline-offset: 3px; }
.form-links a.link-btn { text-decoration: none; }

/* 내 정보 */
.me-list {
  margin-bottom: var(--seed-dimension-x5);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-layer-fill);
}
.me-row {
  display: flex;
  align-items: center;
  gap: var(--seed-dimension-x3);
  width: 100%;
  min-height: 56px;
  padding: 0 var(--seed-dimension-x4);
  border: 0;
  background: none;
  font-size: var(--seed-font-size-t5);
  text-align: left;
}
.me-list li + li .me-row { box-shadow: inset 0 1px 0 var(--seed-color-stroke-neutral-subtle); }
.me-row span { flex: 1; }
.me-row small { display: block; margin-top: 1px; color: var(--seed-color-fg-neutral-subtle); font-size: var(--seed-font-size-t3); line-height: 18px; }
label.me-row { cursor: pointer; padding-top: 10px; padding-bottom: 10px; }
.me-row strong { color: var(--seed-color-fg-neutral-muted); font-weight: var(--seed-font-weight-medium); }
.me-row .icon:first-child { width: 22px; height: 22px; color: var(--seed-color-fg-neutral-subtle); }
.me-row .icon:last-child { width: 18px; height: 18px; color: var(--seed-color-fg-neutral-subtle); }

/* ───────── 수조 움직임 ───────── */

.tank .swim {
  transform-box: fill-box;
  transform-origin: center;
  animation: swim var(--dur, 20s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes swim {
  0% { transform: translate(0, 0) scaleX(1); }
  46% { transform: translate(var(--dist), -6px) scaleX(1); }
  50% { transform: translate(var(--dist), 0) scaleX(-1); }
  96% { transform: translate(0, 6px) scaleX(-1); }
  100% { transform: translate(0, 0) scaleX(1); }
}

.tank .bob {
  transform-box: fill-box;
  transform-origin: center;
  animation: bob 3.2s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(-3px); } }

.tank .bubble {
  opacity: 0;
  transform-box: fill-box;
  animation: rise 5s linear var(--delay, 0s) infinite;
}
@keyframes rise {
  0% { opacity: 0; transform: translate(0, 0); }
  10%, 85% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--wob, 6px), -330px); }
}

.tank.is-paused * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tank .swim, .tank .bob, .tank .bubble { animation: none; }
  .tank .bubble { opacity: 0.8; }
  .sheet[open], .panel[open], dialog[open]::backdrop, .is-popping .icon { animation: none; }
  .btn:active:not(:disabled) { transform: none; }
  .snackbar { transition: none; }
}

/* 전체 상품 "상품 더보기" (8개씩) */
.more-wrap { display: flex; justify-content: center; margin-top: var(--seed-dimension-x8); }
.more-btn { min-width: min(100%, 320px); }
.more-btn__page { color: var(--seed-color-fg-neutral-subtle); font-weight: var(--seed-font-weight-medium); font-variant-numeric: tabular-nums; }
.more-btn .icon { width: 18px; height: 18px; }

/* ───────── 목록 페이지 (메뉴를 눌러 들어간 화면) ───────── */
body.is-list #shop { padding-top: var(--seed-dimension-x6); }
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-bottom: var(--seed-dimension-x2);
  color: var(--seed-color-fg-neutral-subtle);
  font-size: var(--seed-font-size-t3);
}
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { color: var(--seed-color-fg-neutral); text-decoration: underline; text-underline-offset: 3px; }
.crumb [aria-current] { color: var(--seed-color-fg-neutral-muted); font-weight: var(--seed-font-weight-medium); }
.crumb__sep { width: 14px; height: 14px; }
@media (min-width: 900px) {
  body.is-list #shop .section__title {
    font-size: var(--seed-font-size-t9);
    line-height: var(--seed-line-height-t9);
  }
}

/* ───────── 경매 ───────── */
.rules {
  margin-bottom: var(--seed-dimension-x5);
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-informative-weak);
  color: var(--seed-color-fg-informative-contrast);
  font-size: var(--seed-font-size-t4);
  line-height: 22px;
}
.rules summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--seed-font-weight-bold);
  cursor: pointer;
}
.rules summary .icon { width: 20px; height: 20px; color: var(--seed-color-fg-informative); }
.rules__body ul { margin: var(--seed-dimension-x2) 0 0; padding-left: 1.2em; list-style: disc; }

/* 글 안에서 색을 주는 표시. {{글자}} = 빨강, [[글자]] = 파랑 */
.rich-red { color: var(--seed-color-fg-critical); font-weight: var(--seed-font-weight-bold); }
.rich-blue { color: var(--seed-color-fg-informative); font-weight: var(--seed-font-weight-bold); }
/* 경매 설명은 꾸미기 표시를 그대로 살려서 보여 줘요. (줄바꿈은 문단으로 나뉘어요) */
.sheet__desc.rules__body { white-space: normal; }
.sheet__desc.rules__body p + p { margin-top: var(--seed-dimension-x2); }
.rules__body li + li { margin-top: 4px; }

.auction-card__hit {
  display: flex;
  flex-direction: column;
  gap: var(--seed-dimension-x2);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.auction-card .card__media { display: block; position: relative; }
.auction-card__hit:hover .card__title { text-decoration: underline; text-underline-offset: 3px; }
.auction-card .card__body { display: flex; flex-direction: column; gap: 2px; }
.auction-card .card__title { font-size: var(--seed-font-size-t4); line-height: var(--seed-line-height-t4); }
.auction-card .badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
}
.auction-card__left { color: var(--seed-color-fg-neutral-subtle); font-size: var(--seed-font-size-t3); font-variant-numeric: tabular-nums; }
.auction-card__left.is-urgent { color: var(--seed-color-fg-critical); font-weight: var(--seed-font-weight-bold); }
.auction-card__price { display: flex; align-items: baseline; gap: 6px; }
.auction-card__price b { font-size: var(--seed-font-size-t5); font-weight: var(--seed-font-weight-bold); }
.auction-card__meta { color: var(--seed-color-fg-neutral-subtle); font-size: var(--seed-font-size-t3); }
.auction-card.is-ended .card__media { opacity: 0.55; }

.auction-sheet__left {
  margin-top: var(--seed-dimension-x1);
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t4);
  font-variant-numeric: tabular-nums;
}
.auction-sheet__left.is-urgent { color: var(--seed-color-fg-critical); font-weight: var(--seed-font-weight-bold); }

.bid-box {
  margin-top: var(--seed-dimension-x5);
  padding: var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r4);
  background: var(--seed-color-bg-layer-fill);
}
.bid-box__hint { color: var(--seed-color-fg-neutral-muted); font-size: var(--seed-font-size-t4); }
.bid-box__hint strong { color: var(--seed-color-fg-neutral); font-weight: var(--seed-font-weight-bold); }
.bid-box__mine { color: var(--seed-color-fg-brand); font-weight: var(--seed-font-weight-bold); }
.bid-box__done { font-size: var(--seed-font-size-t5); font-weight: var(--seed-font-weight-bold); }
.bid-steps { display: flex; flex-wrap: wrap; gap: var(--seed-dimension-x2); margin-top: var(--seed-dimension-x3); }
.bid-steps .btn { flex: 1 1 auto; gap: 4px; }
.bid-steps em { color: var(--seed-color-fg-neutral-subtle); font-style: normal; font-size: var(--seed-font-size-t2); font-weight: var(--seed-font-weight-medium); }
.bid-form .field__hint.is-warn { color: var(--seed-color-fg-critical); font-weight: var(--seed-font-weight-bold); }
/* 자동입찰 칸 */
.auto-box {
  display: flex;
  flex-direction: column;
  gap: var(--seed-dimension-x2);
  margin-top: var(--seed-dimension-x4);
  padding: var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-layer-default);
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
}
.auto-box.is-on { box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-solid); }
.auto-box__title { display: flex; align-items: center; gap: 6px; font-weight: var(--seed-font-weight-bold); }
.auto-box__title .icon { width: 18px; height: 18px; color: var(--seed-color-fg-brand); }
.auto-box__title strong { color: var(--seed-color-fg-brand); }
.auto-box__state { color: var(--seed-color-fg-neutral-muted); font-size: var(--seed-font-size-t3); line-height: var(--seed-line-height-t3); }
.auto-box__btns { display: flex; gap: var(--seed-dimension-x2); }
.auto-box__btns .btn { flex: 1; }
.auto-box .field__hint.is-warn { color: var(--seed-color-fg-critical); font-weight: var(--seed-font-weight-bold); }
.bid__who .badge--neutral { font-weight: var(--seed-font-weight-medium); }
.bid-form { display: flex; flex-direction: column; gap: var(--seed-dimension-x3); margin-top: var(--seed-dimension-x4); }
/* 즉구가로 바로 사기 버튼 */
.buy-now {
  margin-top: var(--seed-dimension-x3);
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-solid);
  color: var(--seed-color-fg-brand);
}

.bid-title {
  margin-top: var(--seed-dimension-x6);
  margin-bottom: var(--seed-dimension-x2);
  font-size: var(--seed-font-size-t5);
  font-weight: var(--seed-font-weight-bold);
}
.bid-more { margin-top: var(--seed-dimension-x2); color: var(--seed-color-fg-neutral-subtle); font-size: var(--seed-font-size-t3); }
.bid-empty { color: var(--seed-color-fg-neutral-subtle); font-size: var(--seed-font-size-t4); }
.bid-list { display: flex; flex-direction: column; }
.bid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 2px var(--seed-dimension-x3);
  align-items: center;
  padding: var(--seed-dimension-x3) 0;
  box-shadow: inset 0 -1px 0 var(--seed-color-stroke-neutral-subtle);
  font-size: var(--seed-font-size-t4);
}
.bid:last-child { box-shadow: none; }
.bid__who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bid__who em { color: var(--seed-color-fg-brand); font-style: normal; font-size: var(--seed-font-size-t3); font-weight: var(--seed-font-weight-bold); }
.bid__amount { font-weight: var(--seed-font-weight-bold); font-variant-numeric: tabular-nums; }
.bid__time { color: var(--seed-color-fg-neutral-subtle); font-size: var(--seed-font-size-t3); font-variant-numeric: tabular-nums; }
.bid__msg { grid-column: 1 / -1; color: var(--seed-color-fg-neutral-muted); font-size: var(--seed-font-size-t3); }
.bid.is-top .bid__amount { color: var(--seed-color-fg-brand); }

/* 방금 들어온 입찰: 줄과 카드 가격이 한 번 반짝여요. */
.bid.is-new { animation: bid-flash 1.6s var(--seed-timing-function-enter); }
.auction-card__price.is-bumped b { animation: bid-pop 0.9s var(--seed-timing-function-enter); }
@keyframes bid-flash {
  0%, 30% { background: var(--seed-color-bg-brand-weak); }
  100% { background: transparent; }
}
@keyframes bid-pop {
  0% { color: var(--seed-color-fg-brand); transform: scale(1); }
  30% { color: var(--seed-color-fg-brand); transform: scale(1.12); }
  100% { transform: scale(1); }
}
.auction-card__price b { display: inline-block; transform-origin: left center; }

/* 입찰 기록 옆 "실시간" 표시 */
.bid-title { display: flex; align-items: center; gap: var(--seed-dimension-x2); }
.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--seed-color-fg-critical);
  font-size: var(--seed-font-size-t2);
  font-weight: var(--seed-font-weight-bold);
}
.live-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: live-dot 1.4s ease-in-out infinite;
}
@keyframes live-dot { 50% { opacity: 0.25; } }

/* 새 입찰 알림 ("○○님이 입찰했어요") — 화면 위쪽에 잠깐 떠요. */
.bid-alert {
  position: fixed;
  inset: calc(var(--seed-safe-area-top, 0px) + 12px) auto auto 50%;
  display: flex;
  align-items: center;
  gap: var(--seed-dimension-x3);
  width: max-content;
  max-width: calc(100% - 32px);
  height: auto;
  margin: 0;
  padding: 10px 14px 10px 10px;
  border: 0;
  border-radius: var(--seed-radius-r4);
  background: var(--seed-color-bg-layer-floating, var(--seed-color-bg-layer-default));
  color: var(--seed-color-fg-neutral);
  box-shadow: var(--seed-shadow-s3, var(--seed-shadow-s2)), inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -16px);
  transition: opacity var(--seed-duration-d4) var(--seed-timing-function-enter),
    transform var(--seed-duration-d4) var(--seed-timing-function-enter);
}
.bid-alert.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.bid-alert__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--seed-color-bg-brand-weak);
  color: var(--seed-color-fg-brand);
}
.bid-alert__icon .icon { width: 16px; height: 16px; }
.bid-alert__text { display: flex; flex-direction: column; min-width: 0; font-weight: var(--seed-font-weight-medium); }
.bid-alert__text small {
  overflow: hidden;
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t2);
  line-height: var(--seed-line-height-t2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bid-alert.is-strong .bid-alert__text small { color: inherit; opacity: 0.85; }
.bid-alert__action {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--seed-color-fg-brand);
  font-weight: var(--seed-font-weight-bold);
}
/* 내 입찰가를 누가 넘었을 때는 더 눈에 띄게 */
.bid-alert.is-strong { background: var(--seed-color-bg-critical-solid); color: var(--seed-color-palette-static-white); }
.bid-alert.is-strong .bid-alert__icon { background: rgba(255, 255, 255, 0.2); color: inherit; }
.bid-alert.is-strong .bid-alert__action { color: inherit; text-decoration: underline; }
.bid-alert.is-strong.is-open .bid-alert__icon .icon { animation: bell-ring 0.8s ease-in-out 2; }
@keyframes bell-ring {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-18deg); }
  40% { transform: rotate(14deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .bid-alert { transition: none; }
  .bid.is-new, .auction-card__price.is-bumped b, .live-chip i, .bid-alert .icon { animation: none !important; }
}

/* 경매 규칙 글 (## 제목, - 목록, ! 강조) */
.rules__head,
.rich__head {
  margin-top: var(--seed-dimension-x5);
  margin-bottom: 0;
  font-size: var(--seed-font-size-t6);
  line-height: var(--seed-line-height-t6);
  font-weight: var(--seed-font-weight-bold);
}
.rules__body > .rules__head:first-child { margin-top: var(--seed-dimension-x2); }
.rules__sub,
.rich__sub {
  margin-top: var(--seed-dimension-x4);
  margin-bottom: 0;
  color: var(--seed-color-fg-neutral);
  font-size: var(--seed-font-size-t5);
  line-height: var(--seed-line-height-t5);
  font-weight: var(--seed-font-weight-bold);
}
.rules__body p { margin-top: var(--seed-dimension-x2); }
.rules__key,
.rich__key {
  margin-top: var(--seed-dimension-x3);
  padding: 10px 12px;
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-layer-default);
  color: var(--seed-color-fg-neutral);
  font-weight: var(--seed-font-weight-bold);
  box-shadow: inset 3px 0 0 var(--seed-color-bg-brand-solid);
}
.rules__body code {
  padding: 1px 6px;
  border-radius: var(--seed-radius-r1);
  background: var(--seed-color-bg-layer-default);
  font-family: inherit;
  font-weight: var(--seed-font-weight-bold);
  font-variant-numeric: tabular-nums;
}
.rules__body strong { font-weight: var(--seed-font-weight-bold); }

/* ───────── 커뮤니티·이벤트 게시판 ───────── */
.board-tabs { margin-bottom: var(--seed-dimension-x4); }
.board-note {
  margin-bottom: var(--seed-dimension-x4);
  padding: 10px 14px;
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-layer-fill);
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t4);
}

.post-list { display: flex; flex-direction: column; }
.post-row { box-shadow: inset 0 -1px 0 var(--seed-color-stroke-neutral-subtle); }
.post-row:first-child { box-shadow: inset 0 1px 0 var(--seed-color-stroke-neutral-subtle), inset 0 -1px 0 var(--seed-color-stroke-neutral-subtle); }
.post-row__hit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: var(--seed-dimension-x4) var(--seed-dimension-x2);
  border: 0;
  background: none;
  text-align: left;
}
.post-row__hit:hover { background: var(--seed-color-bg-transparent-pressed); }
.post-row__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--seed-font-size-t5);
  font-weight: var(--seed-font-weight-medium);
}
.post-row.is-pinned .post-row__title { font-weight: var(--seed-font-weight-bold); }
.post-row__title em {
  flex: none;
  padding: 1px 6px;
  border-radius: var(--seed-radius-r1);
  background: var(--seed-color-bg-brand-weak);
  color: var(--seed-color-fg-brand);
  font-style: normal;
  font-size: var(--seed-font-size-t2);
  font-weight: var(--seed-font-weight-bold);
}
.post-row__count { color: var(--seed-color-fg-brand); font-size: var(--seed-font-size-t3); font-weight: var(--seed-font-weight-bold); }
.post-row__photo { width: 16px; height: 16px; color: var(--seed-color-fg-neutral-subtle); }
.post-row__excerpt {
  overflow: hidden;
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t4);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-row__meta { color: var(--seed-color-fg-neutral-subtle); font-size: var(--seed-font-size-t3); }

/* 글 읽기 */
.post-view__board { color: var(--seed-color-fg-brand); font-size: var(--seed-font-size-t3); font-weight: var(--seed-font-weight-bold); }
.post-view__meta { margin-top: 4px; color: var(--seed-color-fg-neutral-subtle); font-size: var(--seed-font-size-t3); }
.post-view__tools { display: flex; gap: var(--seed-dimension-x3); margin-top: var(--seed-dimension-x2); }
.post-view__body {
  margin-top: var(--seed-dimension-x4);
  font-size: var(--seed-font-size-t5);
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.post-photos { display: flex; flex-direction: column; gap: var(--seed-dimension-x2); margin-top: var(--seed-dimension-x4); }
.post-photos img { width: 100%; border-radius: var(--seed-radius-r3); }

.comment-list { display: flex; flex-direction: column; }
.comment {
  position: relative;
  padding: var(--seed-dimension-x3) 0;
  box-shadow: inset 0 -1px 0 var(--seed-color-stroke-neutral-subtle);
  font-size: var(--seed-font-size-t4);
}
.comment:last-child { box-shadow: none; }
.comment__who { font-weight: var(--seed-font-weight-bold); }
.comment__who em { margin-left: 4px; color: var(--seed-color-fg-brand); font-style: normal; font-size: var(--seed-font-size-t3); }
.comment__time { margin-left: 6px; color: var(--seed-color-fg-neutral-subtle); font-size: var(--seed-font-size-t3); }
.comment__body { margin-top: 2px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.comment__del { position: absolute; top: var(--seed-dimension-x2); right: 0; font-size: var(--seed-font-size-t3); }
.comment-form { display: flex; gap: var(--seed-dimension-x2); margin-top: var(--seed-dimension-x4); }
.comment-form .field { flex: 1; }

/* 글쓰기 창의 사진 고르기 */
.post-photo-row { display: flex; flex-wrap: wrap; gap: var(--seed-dimension-x2); margin-bottom: var(--seed-dimension-x2); }
.post-photo { position: relative; width: 84px; height: 84px; overflow: hidden; border-radius: var(--seed-radius-r2); background: var(--tile-top); }
.post-photo img { width: 100%; height: 100%; object-fit: cover; }
.post-photo .icon-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 26px;
  height: 26px;
  background: var(--seed-color-bg-layer-floating);
  box-shadow: var(--seed-shadow-s1);
}
.post-photo .icon-btn .icon { width: 16px; height: 16px; }
#post-editor input[type="file"] { display: none; }
.mega__grid--one { grid-template-columns: minmax(0, 1fr); }
.mega--boards { width: 260px; }

#notices[data-empty="1"] { display: none; }
#notices .post-row__hit { padding-left: 0; padding-right: 0; }

/* 게시판 글에 쓴 양식 */
.post-view__body h4, .post-view__body h5 { margin-top: var(--seed-dimension-x5); }
.post-view__body p + p { margin-top: var(--seed-dimension-x2); }
.post-view__body ul { margin-top: var(--seed-dimension-x2); padding-left: 1.2em; list-style: disc; }
.post-view__body li + li { margin-top: 4px; }
.post-view__body code {
  padding: 1px 6px;
  border-radius: var(--seed-radius-r1);
  background: var(--seed-color-bg-layer-fill);
  font-family: inherit;
  font-weight: var(--seed-font-weight-bold);
}

/* 사진첩 */
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--seed-dimension-x4) var(--seed-dimension-x3); }
@media (min-width: 768px) { .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.photo-card__hit {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.photo-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--seed-radius-r4);
  background: var(--tile-top);
}
.photo-card__media img { width: 100%; height: 100%; object-fit: cover; }
.photo-card__none {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--seed-color-fg-neutral-subtle);
  font-size: var(--seed-font-size-t3);
}
.photo-card__count {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-bg-layer-floating);
  box-shadow: var(--seed-shadow-s1);
  font-size: var(--seed-font-size-t2);
  font-weight: var(--seed-font-weight-bold);
}
.photo-card__count .icon { width: 14px; height: 14px; }
.photo-card__title {
  overflow: hidden;
  font-size: var(--seed-font-size-t4);
  font-weight: var(--seed-font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-card__hit:hover .photo-card__title { text-decoration: underline; text-underline-offset: 3px; }


/* 잠시 쉬고 있는 구역(지금은 추천 상품). index.html에서 data-off="1"을 지우면 다시 나와요. */
.section[data-off="1"] { display: none; }

/* 추천 상품 목록의 할인 표시 */
.rank__price { display: flex; align-items: baseline; gap: 5px; }
.rank__price em { color: var(--seed-color-fg-critical); font-style: normal; font-weight: var(--seed-font-weight-bold); }
.rank__price s { color: var(--seed-color-fg-neutral-subtle); font-size: var(--seed-font-size-t3); font-weight: var(--seed-font-weight-medium); }

/* ───────── 주문 (order.js) ───────── */

/* 주문서 안의 묶음: 주문 상품 / 받는 분 / 입금 */
.order-block { display: flex; flex-direction: column; gap: var(--seed-dimension-x3); }
.order-block + .order-block { padding-top: var(--seed-dimension-x5); box-shadow: inset 0 1px 0 var(--seed-color-stroke-neutral-subtle); }
.order-block__title { margin: 0; font-size: var(--seed-font-size-t5); line-height: var(--seed-line-height-t5); font-weight: var(--seed-font-weight-bold); }

.order-items { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--seed-font-size-t4); line-height: var(--seed-line-height-t4); }
.order-items li { display: flex; gap: var(--seed-dimension-x2); align-items: baseline; }
.order-items__name { flex: 1; min-width: 0; }
.order-items__qty { color: var(--seed-color-fg-neutral-muted); white-space: nowrap; }
.order-items__price { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 72px; text-align: right; }

.summary--flat { margin: 0; border-radius: var(--seed-radius-r2); }

/* 입금 계좌 안내 */
.bank-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px var(--seed-dimension-x3);
  align-items: center;
  padding: var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r2);
  background: color-mix(in srgb, var(--seed-color-bg-brand-solid) 8%, transparent);
}
/* 결제 방법 고르기 (카드 결제 · 무통장 입금). 관리자에서 카드 결제를 켰을 때만 주문서에 나와요. */
.pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: var(--seed-dimension-x2); }
.pay-method {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--seed-dimension-x3);
  border-radius: var(--seed-radius-r2);
  box-shadow: inset 0 0 0 1.5px var(--seed-color-stroke-neutral-weak);
  font-size: var(--seed-font-size-t4);
  font-weight: var(--seed-font-weight-medium);
  cursor: pointer;
}
.pay-method input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
/* PG 심사 중: 카드 결제 안에서 결제창(KICC·헥토)을 고르는 줄 (order.js cardPgs) */
.pay-pgs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--seed-dimension-x2); margin-top: var(--seed-dimension-x3); }
.pay-method:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--seed-color-bg-brand-solid);
  background: color-mix(in srgb, var(--seed-color-bg-brand-solid) 8%, transparent);
  color: var(--seed-color-fg-brand);
  font-weight: var(--seed-font-weight-bold);
}
.pay-method:has(input:focus-visible) { outline: 2px solid var(--seed-color-bg-brand-solid); outline-offset: 2px; }
.pay-method:has(input:disabled) { color: var(--seed-color-fg-disabled); cursor: not-allowed; }
.pay-panel { display: flex; flex-direction: column; gap: var(--seed-dimension-x3); }
.pay-panel[hidden] { display: none; }
.pay-panel .form-desc { margin: 0; }
.bank-box p { margin: 0; }
.bank-box__label { grid-column: 1 / -1; color: var(--seed-color-fg-neutral-muted); font-size: var(--seed-font-size-t3); line-height: var(--seed-line-height-t3); }
.bank-box__account { font-weight: var(--seed-font-weight-bold); font-size: var(--seed-font-size-t5); line-height: var(--seed-line-height-t5); word-break: keep-all; }
.bank-box__row { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--seed-dimension-x3); font-size: var(--seed-font-size-t4); }
.bank-box__row span { color: var(--seed-color-fg-neutral-muted); }
.bank-box__row strong { font-variant-numeric: tabular-nums; }
.bank-box__row:first-of-type { margin-top: 6px; padding-top: 8px; box-shadow: inset 0 1px 0 var(--seed-color-stroke-neutral-subtle); }

/* 내 주문 */
.order-list { display: flex; flex-direction: column; gap: var(--seed-dimension-x4); margin: 0; padding: 0; list-style: none; }
.order-card {
  display: flex;
  flex-direction: column;
  gap: var(--seed-dimension-x3);
  padding: var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-layer-fill);
}
.order-card p { margin: 0; }
.order-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--seed-dimension-x2); }
.order-card__no { font-weight: var(--seed-font-weight-bold); font-variant-numeric: tabular-nums; }
.order-card__date, .order-card__to { color: var(--seed-color-fg-neutral-muted); font-size: var(--seed-font-size-t3); line-height: var(--seed-line-height-t3); }
.order-card__date { margin-top: -8px !important; }
.order-card__total { display: flex; justify-content: space-between; gap: var(--seed-dimension-x3); padding-top: 8px; box-shadow: inset 0 1px 0 var(--seed-color-stroke-neutral-subtle); font-size: var(--seed-font-size-t4); }
.order-card__total span { color: var(--seed-color-fg-neutral-muted); }
.order-card__total strong { font-variant-numeric: tabular-nums; }
.order-card__ship { display: flex; align-items: center; gap: var(--seed-dimension-x2); font-size: var(--seed-font-size-t4); }
.order-card__ship .icon { width: 18px; height: 18px; color: var(--seed-color-fg-neutral-subtle); flex: none; }
.order-card__ship span { flex: 1; min-width: 0; word-break: break-all; }
.order-card .bank-box { background: var(--seed-color-bg-layer-default); }

/* 주문 상태 딱지 (관리자 화면과 같은 색) */
.order-chip {
  flex: none;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--seed-font-size-t2);
  line-height: 18px;
  font-weight: var(--seed-font-weight-bold);
}
.order-chip.is-wait { background: color-mix(in srgb, var(--seed-color-fg-warning, #b7791f) 16%, transparent); color: var(--seed-color-fg-warning, #b7791f); }
.order-chip.is-info { background: color-mix(in srgb, var(--seed-color-bg-brand-solid) 14%, transparent); color: var(--seed-color-fg-brand); }
.order-chip.is-done { background: color-mix(in srgb, var(--seed-color-fg-positive, #1a8a4a) 14%, transparent); color: var(--seed-color-fg-positive, #1a8a4a); }
.order-chip.is-off { background: var(--seed-color-bg-neutral-weak); color: var(--seed-color-fg-neutral-subtle); }

/* ───────── 적립금·쿠폰 (order.js) ───────── */
.summary__minus dd { color: var(--seed-color-fg-brand); }
.points-row { display: flex; gap: var(--seed-dimension-x2); }
.points-row .field__input { flex: 1; min-width: 0; }
.points-row .btn { flex: none; }
.order-card__minus, .order-card__earn { font-size: var(--seed-font-size-t3); line-height: var(--seed-line-height-t3); }
.order-card__minus { color: var(--seed-color-fg-brand); margin-top: -6px !important; }
.order-card__earn { color: var(--seed-color-fg-positive); }

.points-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--seed-dimension-x3);
  margin-bottom: var(--seed-dimension-x5);
  padding: var(--seed-dimension-x5);
  border-radius: var(--seed-radius-r3);
  background: color-mix(in srgb, var(--seed-color-bg-brand-solid) 8%, transparent);
}
.points-total span { color: var(--seed-color-fg-neutral-muted); font-size: var(--seed-font-size-t4); }
.points-total strong { font-size: 20px; line-height: 28px; font-variant-numeric: tabular-nums; }

.point-list { margin: 0; padding: 0; list-style: none; }
.point-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--seed-dimension-x3); padding: var(--seed-dimension-x3) 0; }
.point-list li + li { box-shadow: inset 0 1px 0 var(--seed-color-stroke-neutral-subtle); }
.point-list p { margin: 0; }
.point-list__why { font-size: var(--seed-font-size-t4); line-height: var(--seed-line-height-t4); }
.point-list__date { color: var(--seed-color-fg-neutral-subtle); font-size: var(--seed-font-size-t2); }
.point-list strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.point-list .is-plus { color: var(--seed-color-fg-brand); }
.point-list .is-minus { color: var(--seed-color-fg-neutral-muted); }

.claim-form { margin-bottom: var(--seed-dimension-x5); }
.coupon-list { display: flex; flex-direction: column; gap: var(--seed-dimension-x3); margin: 0; padding: 0; list-style: none; }
.coupon-card {
  position: relative;
  padding: var(--seed-dimension-x4) var(--seed-dimension-x5);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-layer-fill);
  box-shadow: inset 4px 0 0 var(--seed-color-bg-brand-solid);
}
.coupon-card p { margin: 0; }
.coupon-card__value { font-size: 18px; line-height: 26px; font-weight: var(--seed-font-weight-bold); color: var(--seed-color-fg-brand); }
.coupon-card__name { font-size: var(--seed-font-size-t4); line-height: var(--seed-line-height-t4); }
.coupon-card__meta { color: var(--seed-color-fg-neutral-subtle); font-size: var(--seed-font-size-t2); margin-top: 2px !important; }
.coupon-card__state {
  position: absolute;
  top: var(--seed-dimension-x4);
  right: var(--seed-dimension-x4);
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--seed-color-bg-neutral-weak);
  color: var(--seed-color-fg-neutral-subtle);
  font-size: var(--seed-font-size-t2);
  font-weight: var(--seed-font-weight-bold);
}
.coupon-card.is-off { box-shadow: inset 4px 0 0 var(--seed-color-stroke-neutral-subtle); }
.coupon-card.is-off .coupon-card__value { color: var(--seed-color-fg-neutral-subtle); }

/* 상품 창의 "상품 링크 복사" */
/* 상품 창 영상 */
.sheet__video { margin-top: var(--seed-dimension-x4); }
.sheet__video-label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--seed-dimension-x2);
  color: var(--seed-color-fg-neutral);
  font-size: var(--seed-font-size-t4);
  font-weight: var(--seed-font-weight-bold);
}
.sheet__video-label .icon { width: 16px; height: 16px; color: var(--seed-color-fg-brand, currentColor); stroke-width: 1.4; }
.sheet__video video {
  display: block;
  width: 100%;
  max-height: 70vh;
  border-radius: var(--seed-radius-r3);
  background: #000;
}
.sheet__share { margin-top: var(--seed-dimension-x2); font-size: var(--seed-font-size-t3); }
/* 유튜브 영상 */
.sheet__video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--seed-radius-r3);
  background: #000;
}
/* 이 브라우저가 못 읽는 영상 형식일 때 */
.sheet__video-fail {
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-layer-fill, #f2f3f6);
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t4);
}
.ship-line__sub { display: block; color: var(--seed-color-fg-neutral-muted); font-size: var(--seed-font-size-t3); }
/* 배송비가 두 가지일 때 장바구니·주문서 설명 (069) */
.summary__note--fee { color: var(--seed-color-fg-neutral); }
/* 배송 안내 페이지 맨 위 배송비 표 */
.ship-fees { display: flex; flex-direction: column; gap: var(--seed-dimension-x2); margin: var(--seed-dimension-x3) 0 0; padding: 0; list-style: none; }
.ship-fees li { display: flex; justify-content: space-between; gap: var(--seed-dimension-x3); font-size: var(--seed-font-size-t5); }
.ship-fees li span { color: var(--seed-color-fg-neutral-muted); }
.ship-fees__note { margin-top: var(--seed-dimension-x3); color: var(--seed-color-fg-neutral-muted); font-size: var(--seed-font-size-t4); line-height: 1.6; word-break: keep-all; }
.summary__note { margin-top: var(--seed-dimension-x2); color: var(--seed-color-fg-neutral-muted); font-size: var(--seed-font-size-t3); }

/* ───────── 옵션 묶음·사진 여러 장·비슷한 상품·최근 본 상품·후기 (2026-09-22) ───────── */
.price__from { margin-left: 2px; font-size: var(--seed-font-size-t3); font-weight: var(--seed-font-weight-regular); color: var(--seed-color-fg-neutral-muted); }
.stats__star { color: var(--seed-color-fg-neutral-muted); }
.stats__star > span[aria-hidden] { color: #f5a623; }
.stats__n { color: var(--seed-color-fg-neutral-subtle); }

/* 사진 여러 장: 옆으로 밀어서 넘겨요 */
.gallery__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track > .pic { flex: 0 0 100%; scroll-snap-align: center; }
.gallery__nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  padding: 0;
  border: 0;
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-bg-layer-floating);
  box-shadow: var(--seed-shadow-s1);
  color: var(--seed-color-fg-neutral);
}
.gallery__nav .icon { width: 18px; height: 18px; }
.gallery__nav--prev { left: 10px; }
.gallery__nav--prev .icon { transform: scaleX(-1); }
.gallery__nav--next { right: 10px; }
.gallery__count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 2px 10px;
  border-radius: var(--seed-radius-full);
  background: rgba(0, 0, 0, 0.55);
  color: var(--seed-color-palette-static-white, #fff);
  font-size: var(--seed-font-size-t2);
}
@media (pointer: coarse) { .gallery__nav { display: none; } }

/* 옵션 고르기 */
.opts { margin-top: var(--seed-dimension-x4); }
.opts__label { margin-bottom: var(--seed-dimension-x2); font-size: var(--seed-font-size-t3); font-weight: var(--seed-font-weight-bold); color: var(--seed-color-fg-neutral-muted); }
.opts__list { display: flex; flex-wrap: wrap; gap: var(--seed-dimension-x2); }
.opt {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 96px;
  padding: 8px 14px;
  border: 1px solid var(--seed-color-stroke-neutral-weak, var(--seed-color-stroke-neutral-subtle));
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-layer-default);
  color: var(--seed-color-fg-neutral);
  text-align: left;
}
.opt__name { font-size: var(--seed-font-size-t4); font-weight: var(--seed-font-weight-bold); }
.opt__price { font-size: var(--seed-font-size-t3); color: var(--seed-color-fg-neutral-muted); }
.opt[aria-pressed="true"] { border-color: var(--seed-color-fg-brand); box-shadow: inset 0 0 0 1px var(--seed-color-fg-brand); }
.opt.is-out .opt__name, .opt.is-out .opt__price { color: var(--seed-color-fg-neutral-subtle); }

.restock-btn { flex: 1; gap: 6px; }
.restock-btn .icon { width: 18px; height: 18px; }
.restock-btn[aria-pressed="true"] { color: var(--seed-color-fg-brand); }

.sheet__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--seed-dimension-x1);
  color: var(--seed-color-fg-neutral);
  font-size: var(--seed-font-size-t3);
  font-weight: var(--seed-font-weight-bold);
  text-decoration: none;
}
.sheet__rating > span[aria-hidden] { color: #f5a623; }
.sheet__rating > span:last-child { font-weight: var(--seed-font-weight-regular); color: var(--seed-color-fg-neutral-muted); text-decoration: underline; }

/* 비슷한 상품·최근 본 상품: 옆으로 넘기는 작은 카드 줄 */
.sheet__more { margin-top: var(--seed-dimension-x6); }
.sheet__more-title { margin-bottom: var(--seed-dimension-x3); font-size: var(--seed-font-size-t5); }
.mini-row {
  display: flex;
  gap: var(--seed-dimension-x3);
  margin: 0;
  padding: 0 0 var(--seed-dimension-x1);
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x proximity;
}
.mini-row > li { flex: 0 0 112px; scroll-snap-align: start; }
.mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--seed-color-fg-neutral);
  text-align: left;
}
.mini__thumb { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--seed-radius-r2); background: var(--tile-top); }
.mini__thumb > img, .mini__thumb > svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.mini__out {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.45);
  color: var(--seed-color-palette-static-white, #fff);
  font-size: var(--seed-font-size-t3);
  font-weight: var(--seed-font-weight-bold);
}
.mini__name { display: -webkit-box; overflow: hidden; font-size: var(--seed-font-size-t3); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mini__price { font-size: var(--seed-font-size-t3); font-weight: var(--seed-font-weight-bold); }
@media (min-width: 768px) { #recent .mini-row > li { flex-basis: 140px; } }

/* 상품 후기 */
.reviews { margin-top: var(--seed-dimension-x6); padding-top: var(--seed-dimension-x5); border-top: 1px solid var(--seed-color-stroke-neutral-subtle); }
.reviews:empty { display: none; }
.reviews__head { display: flex; align-items: center; justify-content: space-between; gap: var(--seed-dimension-x2); margin-bottom: var(--seed-dimension-x3); }
.reviews__title { font-size: var(--seed-font-size-t5); }
.reviews__title span { color: var(--seed-color-fg-brand); }
.reviews__avg { display: inline-flex; align-items: center; gap: 6px; }
.reviews__avg b { font-size: var(--seed-font-size-t4); }
.reviews__write { margin-bottom: var(--seed-dimension-x3); }
.reviews__empty { color: var(--seed-color-fg-neutral-muted); font-size: var(--seed-font-size-t3); }
.stars { color: #f5a623; letter-spacing: 1px; font-size: var(--seed-font-size-t3); }
.stars__off { color: var(--seed-color-stroke-neutral-subtle, #ddd); }
.review-list { margin: 0; padding: 0; list-style: none; }
.review { padding: var(--seed-dimension-x3) 0; border-bottom: 1px solid var(--seed-color-stroke-neutral-subtle); }
.review:last-child { border-bottom: 0; }
.review__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--seed-font-size-t3); }
.review__who { font-weight: var(--seed-font-weight-bold); }
.review__who em { margin-left: 4px; padding: 0 6px; border-radius: var(--seed-radius-full); background: var(--seed-color-bg-brand-weak); color: var(--seed-color-fg-brand-contrast); font-size: var(--seed-font-size-t1, 11px); font-style: normal; }
.review__date { margin-left: auto; color: var(--seed-color-fg-neutral-subtle); }
.review__opt { margin-top: 4px; color: var(--seed-color-fg-neutral-muted); font-size: var(--seed-font-size-t2); }
.review__body { margin-top: 6px; white-space: pre-line; font-size: var(--seed-font-size-t4); }
.review__photos { display: flex; gap: var(--seed-dimension-x2); margin-top: var(--seed-dimension-x2); }
.review__photos img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: var(--seed-radius-r2); }
.review__del { margin-top: 6px; font-size: var(--seed-font-size-t2); }

.star-pick { border: 0; margin: 0; padding: 0; }
.star-pick__row { display: flex; gap: 4px; }
.star-pick__btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--seed-color-stroke-neutral-subtle, #ddd);
  font-size: 32px;
  line-height: 1;
}
.star-pick__btn[aria-pressed="true"] { color: #f5a623; }
.review-photo-btn { align-self: flex-start; }

/* 주문서: 주소 찾기·현금영수증 */
.addr-finder { position: relative; margin: var(--seed-dimension-x2) 0; border: 1px solid var(--seed-color-stroke-neutral-subtle); border-radius: var(--seed-radius-r2); overflow: hidden; }
.addr-finder__box { height: 420px; }
.addr-finder__close { display: block; width: 100%; padding: 10px; border-top: 1px solid var(--seed-color-stroke-neutral-subtle); text-align: center; }
#co-address { margin-top: var(--seed-dimension-x2); }
.receipt-no { margin-top: var(--seed-dimension-x2); }
.order-card__reviews { display: flex; flex-wrap: wrap; gap: var(--seed-dimension-x2); margin-top: var(--seed-dimension-x2); }

/* ───────── 2026-09-25 경매·주문 손질 ───────── */
/* 경매 창: 남은 시간 옆 '마감 30분 전 알림' 종 */
.auction-sheet__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--seed-dimension-x2); margin-top: var(--seed-dimension-x1); }
.auction-sheet__row .auction-sheet__left { margin-top: 0; }
.watch-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-bg-neutral-weak);
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t3);
  font-weight: var(--seed-font-weight-medium);
  cursor: pointer;
}
.watch-btn .icon { width: 16px; height: 16px; }
.watch-btn[aria-pressed="true"] { background: var(--seed-color-bg-brand-weak); color: var(--seed-color-fg-brand); font-weight: var(--seed-font-weight-bold); }
/* 자동입찰 최대 금액을 넘었을 때: 빨간 테두리 + 할 일 버튼 */
.auto-box.is-over { box-shadow: inset 0 0 0 2px var(--seed-color-stroke-critical-solid, var(--seed-color-fg-critical)); background: var(--seed-color-bg-critical-weak); }
.auto-box.is-over .auto-box__title, .auto-box.is-over .auto-box__title .icon, .auto-box.is-over .auto-box__title strong { color: var(--seed-color-fg-critical); }
.auto-box.is-over .auto-box__state { color: var(--seed-color-fg-neutral); }
.auto-box__warn { color: var(--seed-color-fg-critical); font-size: var(--seed-font-size-t3); font-weight: var(--seed-font-weight-bold); }
/* 서버 알림 닫기 */
.bid-alert__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  opacity: 0.7;
}
.bid-alert__close .icon { width: 16px; height: 16px; }
.bid-alert .bid-alert__text span { white-space: normal; }
/* 주문: 경매 낙찰 표시, 도서산간 줄, 받을 곳 적기 안내 */
.order-chip.is-auction { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; background: color-mix(in srgb, var(--seed-color-bg-brand-solid) 14%, transparent); color: var(--seed-color-fg-brand); }
.order-chip.is-auction .icon { width: 13px; height: 13px; }
.summary__sub dt, .summary__sub dd { color: var(--seed-color-fg-neutral-subtle); font-size: var(--seed-font-size-t3); }
.order-card__todo { color: var(--seed-color-fg-brand); font-weight: var(--seed-font-weight-bold); }
.order-card.needs-address { box-shadow: inset 0 0 0 2px var(--seed-color-stroke-brand-solid, var(--seed-color-fg-brand)); }
/* 내 정보 → 경매 */
.back-link { margin-bottom: var(--seed-dimension-x2); font-size: var(--seed-font-size-t3); }
.alert-pick { display: flex; flex-direction: column; gap: var(--seed-dimension-x2); margin: 0 0 var(--seed-dimension-x5); padding: var(--seed-dimension-x4); border: 0; border-radius: var(--seed-radius-r3); background: var(--seed-color-bg-layer-fill); }
.alert-pick__title { float: left; width: 100%; padding: 0; font-weight: var(--seed-font-weight-bold); } /* legend를 테두리 위가 아니라 상자 안에 둬요 */
.alert-pick__title + * { clear: both; }
.alert-pick__row { display: flex; align-items: flex-start; gap: var(--seed-dimension-x2); cursor: pointer; }
.alert-pick__row input { margin-top: 4px; accent-color: var(--seed-color-bg-brand-solid); }
.alert-pick__row span { display: flex; flex-direction: column; }
.alert-pick__row small { color: var(--seed-color-fg-neutral-subtle); font-size: var(--seed-font-size-t3); }
.my-auction-list { display: flex; flex-direction: column; gap: var(--seed-dimension-x3); margin: 0; padding: 0; list-style: none; }
.my-auction { padding: var(--seed-dimension-x4); border-radius: var(--seed-radius-r3); box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle); }
.my-auction__head { display: flex; align-items: center; gap: var(--seed-dimension-x2); }
.my-auction__title { min-width: 0; overflow: hidden; color: var(--seed-color-fg-neutral); font-weight: var(--seed-font-weight-bold); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.my-auction__meta { margin-top: 2px; color: var(--seed-color-fg-neutral-muted); font-size: var(--seed-font-size-t3); }
.my-auction__act { margin-top: var(--seed-dimension-x2); }

/* ───────── 알림함 (alerts.js, 2026-09-25) ───────── */
/* 경매 결제 안내: 경매 규칙 위 파란 글씨 */
.auction-pay-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 var(--seed-dimension-x3);
  color: var(--seed-color-fg-informative);
  font-size: var(--seed-font-size-t4);
  line-height: 22px;
  font-weight: var(--seed-font-weight-medium);
}
.auction-pay-note .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.auction-pay-note b { font-weight: var(--seed-font-weight-bold); }

.alert-tabs {
  flex: none;
  margin: 0;
  padding: var(--seed-dimension-x3) var(--seed-dimension-x5);
  box-shadow: inset 0 -1px 0 var(--seed-color-stroke-neutral-subtle);
}
.alert-tab__n {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-bg-critical-solid);
  color: var(--seed-color-palette-static-white);
  font-size: 11px;
  font-weight: var(--seed-font-weight-bold);
  line-height: 1;
}
#alerts .panel__head .text-btn { margin-left: auto; margin-right: var(--seed-dimension-x1); }
#alerts .panel__head .text-btn:disabled { opacity: .4; }
.alert-list { margin: 0 calc(var(--seed-dimension-x5) * -1); }
.alert-list li + li { box-shadow: inset 0 1px 0 var(--seed-color-stroke-neutral-subtle); }
.alert-item {
  position: relative;
  display: flex;
  gap: var(--seed-dimension-x3);
  width: 100%;
  padding: var(--seed-dimension-x4) 26px var(--seed-dimension-x4) var(--seed-dimension-x5);
  border: 0;
  background: transparent;
  color: var(--seed-color-fg-neutral);
  text-align: left;
  cursor: pointer;
}
.alert-item:hover { background: var(--seed-color-bg-neutral-weak-alpha); }
.alert-item.is-unread { background: var(--seed-color-bg-informative-weak); }
.alert-item.is-unread:hover { background: var(--seed-color-bg-informative-weak-pressed, var(--seed-color-bg-informative-weak)); }
.alert-item__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-bg-layer-default);
  color: var(--seed-color-fg-neutral-muted);
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
}
.alert-item__icon .icon { width: 18px; height: 18px; }
.alert-item.is-unread .alert-item__icon { color: var(--seed-color-fg-informative); }
.alert-item.is-strong.is-unread .alert-item__icon { color: var(--seed-color-fg-critical); }
.alert-item__main { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.alert-item__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--seed-dimension-x2);
  color: var(--seed-color-fg-neutral-subtle);
  font-size: var(--seed-font-size-t2);
  line-height: 18px;
}
.alert-item__meta b { font-weight: var(--seed-font-weight-medium); }
.alert-item.is-strong .alert-item__meta b { color: var(--seed-color-fg-critical); }
.alert-item__meta span { flex: none; }
.alert-item__title {
  /* 경매 이름이 길면 두 줄까지 보여 줘요. (2026-09-26 점검: 한 줄 말줄임으로 이름이 잘렸어요) */
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--seed-font-size-t4);
  font-weight: var(--seed-font-weight-bold);
  line-height: 21px;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.alert-item__body {
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t3);
  line-height: 20px;
  overflow-wrap: anywhere;
}
.alert-item__dot {
  position: absolute;
  top: 22px;
  right: 10px;
  width: 7px;
  height: 7px;
  border-radius: var(--seed-radius-full);
  background: var(--seed-color-bg-critical-solid);
}
.alert-list + .btn { margin-top: var(--seed-dimension-x4); }
.alert-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: var(--seed-dimension-x10, 40px) var(--seed-dimension-x4);
  color: var(--seed-color-fg-neutral-muted);
  text-align: center;
}
.alert-empty .icon { width: 36px; height: 36px; color: var(--seed-color-fg-neutral-subtle); }
.alert-empty p { margin: 0; color: var(--seed-color-fg-neutral); font-weight: var(--seed-font-weight-bold); }

/* 알림에서 눌러 들어온 주문 */
.order-card.is-focus { box-shadow: 0 0 0 2px var(--seed-color-stroke-brand-solid, var(--seed-color-fg-brand)); }
/* 취소·환불 요청 */
.order-card__req {
  padding: var(--seed-dimension-x2) var(--seed-dimension-x3);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-warning-weak, var(--seed-color-bg-neutral-weak));
  color: var(--seed-color-fg-warning-contrast, var(--seed-color-fg-neutral));
  font-size: var(--seed-font-size-t3);
  line-height: 20px;
}
.order-card__req-btn { align-self: flex-start; color: var(--seed-color-fg-neutral-muted); font-size: var(--seed-font-size-t3); }
.cancel-req { display: grid; gap: var(--seed-dimension-x2); }
.cancel-req[hidden] { display: none; }
.cancel-req .form--row { display: flex; gap: var(--seed-dimension-x2); }
.cancel-req .form--row .btn { flex: 1 1 0; }

/* ───────── 메다카와 합배송 (상품 창 맨 아래, 2026-09-26) ───────── */
.bundle {
  margin-top: var(--seed-dimension-x6);
  padding: var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-informative-weak);
}
.bundle__title { margin: 0; font-size: var(--seed-font-size-t5); line-height: var(--seed-line-height-t5); font-weight: var(--seed-font-weight-bold); }
.bundle__desc { margin: 4px 0 0; color: var(--seed-color-fg-informative-contrast); font-size: var(--seed-font-size-t3); line-height: 20px; }
.bundle__label { margin: var(--seed-dimension-x3) 0 var(--seed-dimension-x2); font-size: var(--seed-font-size-t3); font-weight: var(--seed-font-weight-bold); color: var(--seed-color-fg-neutral-muted); }
.bundle__list { display: grid; gap: var(--seed-dimension-x2); margin: 0; padding: 0; list-style: none; }
.bundle-item {
  display: flex;
  align-items: center;
  gap: var(--seed-dimension-x3);
  padding: var(--seed-dimension-x2);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-layer-default);
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
}
.bundle-item.is-on { box-shadow: inset 0 0 0 1.5px var(--seed-color-fg-brand); }
.bundle-item__thumb {
  flex: none;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: var(--seed-radius-r2);
  overflow: hidden;
  background: var(--seed-color-bg-neutral-weak);
  cursor: pointer;
}
.bundle-item__thumb img, .bundle-item__thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.bundle-item__info { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.bundle-item__name {
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  color: var(--seed-color-fg-neutral);
  font-size: var(--seed-font-size-t4);
  font-weight: var(--seed-font-weight-medium);
  line-height: 20px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.bundle-item__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.bundle-item__price { font-size: var(--seed-font-size-t3); font-weight: var(--seed-font-weight-bold); }
.bundle-item.is-out .bundle-item__price { color: var(--seed-color-fg-neutral-subtle); font-weight: var(--seed-font-weight-regular); }
.bundle-item .qty { flex: none; }
.bundle__hint { margin: var(--seed-dimension-x2) 0 0; color: var(--seed-color-fg-neutral-subtle); font-size: var(--seed-font-size-t2); }

/* 바로 구매 위 총 상품 금액 */
.sheet__total {
  display: flex;
  order: -1; /* 찜·수량·구매 버튼 줄 위 */
  flex: 1 1 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--seed-dimension-x2);
  margin: 0 0 2px;
  font-size: var(--seed-font-size-t4);
}
/* 좁은 휴대폰(320px)에서 "(1개 · 배송비 … 별도)"가 중간에서 끊겨 "별도)"만 떨어지지 않게 괄호째 다음 줄로 넘겨요. */
.sheet__total > span { min-width: 0; }
.sheet__total small { display: inline-block; color: var(--seed-color-fg-neutral-subtle); font-size: var(--seed-font-size-t2); }
.sheet__total strong { font-size: var(--seed-font-size-t6); font-weight: var(--seed-font-weight-bold); white-space: nowrap; }
.sheet__individual { margin: 2px 0 0; color: var(--seed-color-fg-neutral-muted); font-size: var(--seed-font-size-t4); }
/* 원산지: 가격 아래 한 줄. 회색 이름표 + 나라 이름 (app.js openProduct, 065) */
.sheet__origin {
  display: flex;
  align-items: center;
  gap: var(--seed-dimension-x2);
  margin: var(--seed-dimension-x2) 0 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
}
.sheet__origin-k {
  flex: none;
  padding: 1px 8px;
  border-radius: var(--seed-radius-r1, 4px);
  background: var(--seed-color-bg-neutral-weak);
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t3);
  font-weight: var(--seed-font-weight-bold);
}
/* 상품 창 가격 아래 눈에 띄는 안내 상자 (프라배박스 일반 판매: 2개당 배송비 1회) */
.sheet__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--seed-dimension-x2);
  margin: var(--seed-dimension-x3) 0 0;
  padding: 10px 12px;
  border: 1px solid var(--seed-color-stroke-warning-weak, #f5d77a);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-warning-weak, #fff8e1);
  color: var(--seed-color-fg-warning-contrast, #5c4400);
  font-size: var(--seed-font-size-t4);
  line-height: 1.5;
  word-break: keep-all;
}
.sheet__notice .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--seed-color-fg-warning, #b08500); }
.sheet__notice strong { font-weight: var(--seed-font-weight-bold); }
.sheet__origin-v { color: var(--seed-color-fg-neutral); font-weight: var(--seed-font-weight-medium, 500); }

/* ───────── 휴대폰 알림 켜기 (alerts.js renderPushBox, push.js) ───────── */
.push-box {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--seed-dimension-x3);
  margin: 0 var(--seed-dimension-x5) var(--seed-dimension-x2);
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-neutral-weak);
}
.push-box[hidden] { display: none; }
.push-box.is-off { background: var(--seed-color-bg-brand-weak); }
.push-box__icon { flex: none; font-size: 20px; line-height: 1; }
.push-box__text { display: flex; flex: 1; flex-direction: column; min-width: 0; margin: 0; gap: 2px; }
.push-box__text b { color: var(--seed-color-fg-neutral); font-size: var(--seed-font-size-t4); font-weight: var(--seed-font-weight-bold); }
.push-box__text small { color: var(--seed-color-fg-neutral-muted); font-size: var(--seed-font-size-t3); line-height: 1.45; word-break: keep-all; }
.push-box .btn--sm { flex: none; height: 32px; padding: 0 14px; border-radius: var(--seed-radius-full); font-size: var(--seed-font-size-t3); }
.push-box .text-btn { flex: none; }

/* ───────── 옵션형 상품 (app.js optPickHTML, 049) ───────── */
.optpick .opts:first-child { margin-top: var(--seed-dimension-x4); }
.opt:disabled { cursor: not-allowed; }
.line__opt {
  margin-top: 2px;
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t3);
  line-height: 1.4;
}

/* 합배송·추가 구성상품 드롭다운 (app.js bundleHTML, 2026-09-26) */
.bundle__pick { display: grid; gap: 6px; margin-top: var(--seed-dimension-x3); }
.bundle__pick .bundle__label { margin: 0; }
.bundle__select {
  width: 100%;
  height: 44px;
  padding: 0 36px 0 var(--seed-dimension-x3);
  border: 0;
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-layer-default) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='%23868b94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak, var(--seed-color-stroke-neutral-subtle));
  color: var(--seed-color-fg-neutral);
  font-size: var(--seed-font-size-t4);
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.bundle__select:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--seed-color-fg-brand); }
.bundle__select:disabled { opacity: .5; cursor: not-allowed; }
.bundle__pick + .bundle__list { margin-top: var(--seed-dimension-x3); }
.bundle-item__remove {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--seed-radius-full);
  background: transparent;
  color: var(--seed-color-fg-neutral-muted);
  cursor: pointer;
}
.bundle-item__remove .icon { width: 16px; height: 16px; }
.bundle-item__remove:hover { background: var(--seed-color-bg-neutral-weak); }
/* 담긴 줄은 X 버튼 때문에 자리가 좁아서 이름을 두 줄까지 보여 줘요. */
.bundle-item[data-bundle-line] .bundle-item__name {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  word-break: keep-all;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.35;
}
.push-box__btns { display: inline-flex; flex: none; align-items: center; gap: 4px; }

/* 로그인 창 맨 아래 '테스트 계정으로 로그인' (가게용, 관리자 → 회원에서 켰을 때만) */
.test-login { margin-top: var(--seed-dimension-x5); text-align: center; }
.test-login summary {
  display: inline-block;
  padding: 4px 2px;
  color: var(--seed-color-fg-neutral-subtle);
  font-size: var(--seed-font-size-t3);
  cursor: pointer;
}
.test-login[open] { text-align: left; }
.test-login[open] summary { display: block; margin-bottom: var(--seed-dimension-x3); text-align: center; }

/* ───────── 컴퓨터(넓은 화면)용 상품·경매 창 (2026-10-11) ─────────
   휴대폰에서는 보기 편했지만 컴퓨터에서는 가운데 520px짜리 좁은 창이라 사진·영상·설명이 작게 보였어요.
   900px부터는 창을 1200px까지 넓히고, 위쪽을 '사진 | 이름·가격·옵션' 두 칸으로 나눠요.
   · 상품 창(.sheet--wide): 두 칸 아래에 영상·설명·설명 사진·후기를 넓게(글·사진은 860px까지) 보여 줘요.
   · 경매 창(.sheet--split): 왼쪽 칸에 사진·영상(상면·측면)을 위에서 아래로 쌓고, 오른쪽 칸에 설명·입찰·기록을 둬요.
     두 칸은 따로 스크롤돼서 영상을 보면서 입찰할 수 있어요. (auction.js renderSheet)
   · 게시글 창(.sheet--read, 커뮤니티·이벤트·공지): 같은 크기로 넓히고 글·사진·댓글은 가운데 860px 안에 둬요. */

/* 상품 창은 본문이 위(요약)·아래(상세) 두 덩어리예요. 좁은 화면에서는 예전처럼 한 덩어리로 이어 붙여요. */
.sheet__body--summary { padding-bottom: 0; }
.sheet__body--detail { padding-top: 0; }
/* ───────── 팝업 안내 (083, app.js showPopup) ─────────
   들어올 때 한 번 뜨는 운영 안내 창. 휴대폰은 아래에서 올라오고 컴퓨터는 가운데에 떠요. */
.notice-popup { width: min(480px, calc(100% - 32px)); }
@media (max-width: 767px) { .notice-popup { width: 100%; } }
.notice-popup .form-head { margin-bottom: var(--seed-dimension-x4); }
.notice-popup__body {
  color: var(--seed-color-fg-neutral);
  font-size: var(--seed-font-size-t5);
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.notice-popup__body > *:first-child { margin-top: 0; }
.notice-popup__body p + p { margin-top: var(--seed-dimension-x2); }
.notice-popup__body a { color: var(--seed-color-fg-brand); text-decoration: underline; text-underline-offset: 3px; }
.notice-popup__foot {
  display: flex;
  flex: none;
  gap: var(--seed-dimension-x2);
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4) calc(var(--seed-dimension-x3) + var(--seed-safe-area-bottom));
  box-shadow: inset 0 1px 0 var(--seed-color-stroke-neutral-subtle);
}
.notice-popup__foot .btn { flex: 1 1 0; min-width: 0; }

/* 로고가 있을 때: 위쪽 옅은 띠 + 띠에 반쯤 걸친 둥근 로고 + 가게 이름 + 제목, 글은 가운데 정렬 */
.notice-popup__band {
  height: 76px;
  background:
    radial-gradient(120% 140% at 50% 0%, var(--seed-color-bg-brand-weak) 0%, transparent 70%),
    var(--seed-color-bg-layer-default);
  box-shadow: inset 0 -1px 0 var(--seed-color-stroke-neutral-subtle);
}
.notice-popup__main { padding-top: 0; text-align: center; }
.notice-popup__logo {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: -44px auto 0;
  border-radius: var(--seed-radius-full);
  background: #fff;
  /* 바깥 테두리는 창 바탕색이라 띠에서 로고가 살짝 떠 보여요. */
  box-shadow: 0 0 0 5px var(--seed-color-bg-layer-floating), 0 6px 18px rgba(0, 0, 0, 0.18);
}
.notice-popup__logo img { display: block; width: 66%; height: 66%; object-fit: contain; }
.notice-popup__shop {
  margin-top: var(--seed-dimension-x3);
  color: var(--seed-color-fg-brand);
  font-size: var(--seed-font-size-t3);
  font-weight: var(--seed-font-weight-bold);
  letter-spacing: 0.14em;
}
.notice-popup.has-logo .form-title {
  margin-top: var(--seed-dimension-x1);
  font-size: var(--seed-font-size-t8);
  line-height: var(--seed-line-height-t8);
}
/* 제목 아래 짧은 줄 */
.notice-popup.has-logo .form-title::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  margin: var(--seed-dimension-x3) auto var(--seed-dimension-x4);
  border-radius: 2px;
  background: var(--seed-color-stroke-neutral-muted, var(--seed-color-stroke-neutral-subtle));
}
.notice-popup.has-logo .notice-popup__body { color: var(--seed-color-fg-neutral-muted); }
.notice-popup.has-logo .notice-popup__body p + p { margin-top: var(--seed-dimension-x3); }
.notice-popup.has-logo .notice-popup__body ul { display: inline-block; text-align: left; }
/* 닫기 버튼은 띠 위에 얹혀요. */
.notice-popup.has-logo .sheet__close { background: var(--seed-color-bg-layer-floating); box-shadow: var(--seed-shadow-s1); }

/* 영상 아래 짧은 설명 (경매: 촬영 기기·조명 등). 엔터로 나눈 줄을 그대로 보여 줘요. */
.sheet__video-note {
  margin: var(--seed-dimension-x2) 0 0;
  color: var(--seed-color-fg-neutral-muted);
  font-size: var(--seed-font-size-t4);
  line-height: 22px;
  white-space: pre-line;
}
/* 배송비·배송 안내·교환/환불: 좁은 화면은 설명 아래 것만, 넓은 화면은 사진 오른쪽 칸 것만 보여요. */
.sheet__ship--side { display: none; }

@media (min-width: 900px) {
  .sheet--wide, .sheet--split, .sheet--read {
    width: min(1200px, calc(100% - 48px));
    max-height: min(94vh, 1100px);
  }
  /* 게시글 창: 짧은 글도 창이 납작해지지 않게 높이를 조금 잡아 둬요. */
  .sheet--read { min-height: min(70vh, 640px); }
  .sheet--read .sheet__body {
    padding: var(--seed-dimension-x10) max(var(--seed-dimension-x8), calc((100% - 860px) / 2)) var(--seed-dimension-x10);
  }
  .sheet--read .sheet__body > :is(.post-view__board, .sheet__title) { padding-right: var(--seed-dimension-x8); }
  .sheet--read .sheet__title { font-size: var(--seed-font-size-t10); line-height: var(--seed-line-height-t10); }
  .sheet--read .post-view__meta { font-size: var(--seed-font-size-t4); }
  .sheet--read .post-view__body { font-size: var(--seed-font-size-t6); line-height: 30px; }
  .sheet--wide .sheet__top {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
  }
  /* 사진 칸은 기본이 정사각형이고, 오른쪽 칸(옵션·배송 안내)이 더 길면 그 높이까지 늘어나서 사진 아래가 비지 않아요.
     (사진은 잘리지 않고 가운데에, 남는 자리는 흐린 바탕) 오른쪽이 화면보다 길면 보이는 높이까지만 늘리고 스크롤해도 붙어 있어요. */
  .sheet--wide .sheet__top > .sheet__media {
    position: sticky;
    top: 0;
    align-self: stretch;
    justify-self: stretch; /* 가로는 칸 너비 그대로 (정사각형 비율을 따라 옆 칸으로 넘치지 않게) */
    /* 보이는 높이 = 창 높이 − 아래 구매 줄(두 줄일 때 110px, 1100px부터 한 줄 76px) */
    max-height: calc(min(94vh, 1100px) - var(--sheet-actions-h, 110px));
  }

  /* 경매 창: 높이를 정해 두고 왼쪽(사진·영상)·오른쪽(설명·입찰)을 따로 스크롤해요. */
  .sheet--split { height: min(94vh, 1100px); }
  .sheet--split > .sheet__scroll {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
  }
  .sheet--split .auction-side,
  .sheet--split .sheet__body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .sheet--split .auction-side {
    position: relative; /* 사진이 없을 때 스티커가 첫 영상 위에 붙어요 */
    border-right: 1px solid var(--seed-color-stroke-neutral-subtle);
  }
  /* 왼쪽 칸의 영상: 칸 너비에 꽉 차게, 아래 설명만 안쪽으로 살짝 들여요. */
  .sheet--split .auction-side .sheet__video { margin-top: 0; }
  .sheet--split .auction-side > :is(.sheet__media, .sheet__video) + .sheet__video { margin-top: var(--seed-dimension-x2); }
  .sheet--split .auction-side .sheet__video :is(video, iframe) { border-radius: 0; }
  .sheet--split .auction-side .sheet__video-note,
  .sheet--split .auction-side .sheet__video-fail { margin: var(--seed-dimension-x2) var(--seed-dimension-x4) var(--seed-dimension-x3); }

  .sheet--wide .sheet__body--summary,
  .sheet--split .sheet__body { padding: var(--seed-dimension-x8); }
  /* 오른쪽 위 닫기 버튼과 겹치지 않게 */
  .sheet--wide .sheet__body--summary > :is(.flag-line, .sheet__title),
  .sheet--split .sheet__body > :is(.badges, .flag-line, .sheet__title) { padding-right: var(--seed-dimension-x8); }

  /* 아래 상세: 글·사진이 너무 길게 늘어지지 않게 가운데 860px 안에 둬요. */
  .sheet--wide .sheet__body--detail {
    padding: var(--seed-dimension-x4) max(var(--seed-dimension-x8), calc((100% - 860px) / 2)) var(--seed-dimension-x10);
    border-top: 1px solid var(--seed-color-stroke-neutral-subtle);
  }
  /* 사진 오른쪽 빈자리에 배송비·배송 안내·교환/환불을 채워요. (아래 상세에서는 숨겨요) */
  .sheet--wide .sheet__ship--side { display: block; margin-top: var(--seed-dimension-x2); }
  .sheet--wide .sheet__ship--below { display: none; }
  /* 영상·설명이 없는 상품은 후기가 상세의 첫 줄이라 가로줄이 두 번 그어지지 않게 해요. */
  .sheet--wide .sheet__body--detail > .sheet__ship--below:first-child + .reviews { margin-top: 0; padding-top: var(--seed-dimension-x2); border-top: 0; }
  .sheet--wide .sheet__title, .sheet--split .sheet__title { font-size: var(--seed-font-size-t10); line-height: var(--seed-line-height-t10); }
  .sheet--wide .sheet__desc { font-size: var(--seed-font-size-t6); line-height: 30px; }
  .sheet--wide .mini-row > li { flex-basis: 150px; }
  .sheet--wide .sheet__actions { padding-inline: var(--seed-dimension-x8); }
}

/* 구매 줄: 찜 · 총 금액 · 수량 · 장바구니/바로 구매를 한 줄에 (창이 충분히 넓을 때만. 그보다 좁으면 총 금액이 윗줄) */
@media (min-width: 1100px) {
  .sheet--wide { --sheet-actions-h: 76px; }
  .sheet--wide .sheet__actions {
    flex-wrap: nowrap;
    gap: var(--seed-dimension-x3);
  }
  .sheet--wide .sheet__total {
    order: 0;
    flex: 1 1 0;
    justify-content: flex-end;
    gap: var(--seed-dimension-x3);
    margin: 0;
  }
  .sheet--wide .sheet__total strong { font-size: var(--seed-font-size-t8); }
  .sheet--wide .sheet__buy { flex: 0 0 380px; }
  /* 품절(재입고 알림)·예약중처럼 버튼이 하나일 때는 오른쪽에 알맞은 너비로 */
  .sheet--wide .sheet__actions > .btn { flex: 0 1 380px; margin-left: auto; }
}