/* Generated by scripts/split-designer-css.mjs. Do not edit directly. */

/* ==========================================================
   components.css
   KADO Components — BEM 컴포넌트 (버튼/GNB/카드/Pack/Inv/Service/Footer 등). 컴포넌트 모양을 바꾸려면 여기서.
   Last sync: 2026-05-02 · Source: KADO-Showcase.html
   ========================================================== */


/* ==========================================================
   ====== Button System ======
   Spec:
   - Sizes (height fixed): xs 28 / sm 32 / md 40 / lg 48 / xl 56
   - Width modes: hug (default, content size) / fill (100%) / icon-only (square)
   - Icon (.mi) — size auto-scaled per button size
   - flex-shrink: 0 — flex container 안에서 squeeze 방지
   - white-space: nowrap — 텍스트 줄바꿈 방지
   - line-height: 1 — height 정확히 유지
   ========================================================== */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-weight: var(--fw-bd);
  white-space: nowrap;
  line-height: 1;
  border-radius: var(--r-pill); border: 1px solid transparent;
  transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
  user-select: none;
  cursor: pointer;
  flex-shrink: 0;          /* 부모 flex에서 squeeze 방지 */
  vertical-align: middle;
  text-decoration: none;   /* a.ds-btn 대비 */
  box-sizing: border-box;
  /* v0.8: 안전한 default size (md). size 모디파이어(--xs/--sm/--md/--lg/--xl) 누락 시 height collapse 방지.
     모디파이어는 동일 specificity로 override 가능 (선언 순서 우선). */
  height: 40px;
  padding: 0 18px;
  font-size: var(--fs-body-sm);
  min-width: 40px;
}

.ds-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.ds-btn:focus-visible { outline: 2px solid var(--mystic-300); outline-offset: 2px; }

.ds-btn--sm { height: 32px; padding: 0 14px; font-size: var(--fs-caption);    gap: 4px; min-width: 32px; }

.ds-btn--md { height: 40px; padding: 0 18px; font-size: var(--fs-body-sm);    gap: 6px; min-width: 40px; }

.ds-btn--lg { height: 48px; padding: 0 24px; font-size: var(--fs-body);       gap: 8px; min-width: 48px; }

.ds-btn--xl { height: 56px; padding: 0 28px; font-size: var(--fs-h4);         gap: 8px; min-width: 56px; }

/* === Icon (.mi) auto-scaling per size === */
.ds-btn .mi { font-size: 18px; line-height: 1; }

.ds-btn--xs .mi { font-size: 14px; }

.ds-btn--sm .mi { font-size: 16px; }

.ds-btn--md .mi { font-size: 18px; }

.ds-btn--lg .mi { font-size: 20px; }

.ds-btn--xl .mi { font-size: 22px; }

/* default — content size */
.ds-btn--fill { width: 100%; }

.ds-btn--icon-only.ds-btn--sm { width: 32px; }

.ds-btn--icon-only.ds-btn--md { width: 40px; }

.ds-btn--icon-only.ds-btn--lg { width: 48px; }

.ds-btn--icon-only.ds-btn--xl { width: 56px; }

.ds-btn--primary { background: var(--action-primary-bg); color: var(--action-primary-fg); }

.ds-btn--primary:hover:not(:disabled) { background: var(--action-primary-bg-hover); }

.ds-btn--secondary { background: var(--action-secondary-bg); color: var(--action-secondary-fg); border-color: var(--action-secondary-border); }

.ds-btn--secondary:hover:not(:disabled) { background: var(--action-secondary-bg-hover); border-color: var(--action-secondary-border-hover); }

.ds-btn--tertiary { color: var(--action-tertiary-fg); }

.ds-btn--tertiary:hover:not(:disabled) { background: var(--action-tertiary-bg-hover); color: var(--action-tertiary-fg-hover); }

/* Ghost — secondary 보다 한 단계 더 subtle (tone-down). 모달 취소·오퍼 거절 등에 사용 */
.ds-btn--ghost { background: var(--bg-subtle); color: var(--fg-subtle); border-color: transparent; }

.ds-btn--ghost:hover:not(:disabled) { background: var(--bg-muted); color: var(--fg-base); }

body[data-pack-type="brand"] [data-pack-show="limited"],
body[data-pack-type="unlimited"] [data-pack-show="limited"] { display: none !important; }

body[data-pack-type="limited"] [data-pack-show="brand"],
body[data-pack-type="limited"] [data-pack-show="unlimited"] { display: none !important; }

/* ==========================================================
   Filter Rail — 좌측 240px sticky (마켓플레이스 / 컬렉션)
   ========================================================== */
.ds-market-body, .ds-coll-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}

.ds-filter-rail {
  --filter-rail-bottom-gap: 24px;
  --filter-rail-sticky-top: calc(var(--gnb-h) + 24px);
  --filter-rail-height-offset: var(--filter-rail-sticky-top);
  position: sticky; top: var(--filter-rail-sticky-top);
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: 12px;
  padding: 20px 18px;
  max-height: min(
    calc(100vh - var(--filter-rail-height-offset) - var(--filter-rail-bottom-gap)),
    calc(100dvh - var(--filter-rail-height-offset) - var(--filter-rail-bottom-gap))
  );
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  margin-top: 8px;
}

.ds-market-body .ds-filter-rail {
  --filter-rail-height-offset: calc(var(--gnb-h) + 118px);
}

.ds-filter-rail:hover,
.ds-filter-rail:focus-within {
  scrollbar-color: color-mix(in srgb, var(--gray-400) 48%, transparent) transparent;
}

.ds-filter-rail::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.ds-filter-rail::-webkit-scrollbar-track {
  background: transparent;
  margin: 2px 0 12px;
}

.ds-filter-rail::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: var(--r-pill);
  border-right: 2px solid transparent;
  background-clip: content-box;
}

.ds-filter-rail:hover::-webkit-scrollbar-thumb,
.ds-filter-rail:focus-within::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--gray-400) 48%, transparent);
}

.ds-filter-mode__btn.is-active {
  background: var(--bg-base); color: var(--fg-base);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* 그리드가 로딩(aria-busy) 중일 때 빈 상태 메시지를 강제로 숨김.
   리스트가 비어 보이는 짧은 순간에도 검색 결과 메시지가 깜빡이지 않도록. */
.listing-grid[aria-busy="true"] ~ .ds-empty.ds-market-empty,
.ds-market-body__main .listing-grid[aria-busy="true"] ~ .ds-market-empty {
  display: none !important;
}

@media (max-width: 1023px) {
  .ds-market-body, .ds-coll-body { grid-template-columns: 1fr; }
  .ds-filter-rail { position: static; max-height: none; }
}

.ds-notif-page__item.is-unread {
  background: color-mix(in srgb, var(--mystic-500) 4%, transparent);
  border-left: 3px solid var(--mystic-500);
}

.ds-notif-page__icon .mi { font-size: 20px; }

.ds-chip--md.is-active { background: var(--fg-base); color: var(--bg-base); }

.ds-chip--md.is-active .ds-chip__count { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.85); }

.ds-currency-picker.is-open .ds-currency-picker__chev { transform: rotate(180deg); }

.ds-currency-picker.is-open .ds-currency-picker__trigger { background: var(--bg-subtle); border-color: var(--gray-950); }

.ds-currency-picker.is-open .ds-currency-picker__menu {
  opacity: 1; pointer-events: auto;
  transform: translateY(0);
}

.ds-currency-picker__option.is-selected .ds-currency-picker__check { opacity: 1; }

.ds-currency-picker__option.is-selected { background: var(--bg-subtle); }

/* GNB Notification — bell icon + dropdown panel
   v0.7: bell이 user-action 클러스터(잔액/아바타)에 시각적으로 묶이도록 gap 압축 */
.ds-notif {
  margin-right: 0;
  position: relative;
}

.ds-notif-trigger {
  position: relative;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: transparent; border: none;
  cursor: pointer;
  color: var(--fg-base);
  transition: background var(--t-fast) ease-out;
}

.ds-notif-trigger:hover { background: var(--bg-subtle); }

.ds-notif-trigger .mi { font-size: 22px; }

/* 24 → 22 (avatar 크기와 정합) */
.ds-notif-trigger[data-unread="true"]::after {
  content: ''; position: absolute; top: 7px; right: 8px;
  width: 7px; height: 7px;
  background: var(--danger-500, #dc2626);
  border-radius: 50%;
  border: 2px solid var(--bg-base);
}

.ds-notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 360px; max-width: calc(100vw - 32px);
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.16);
  z-index: 100;
  opacity: 0; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--t-base) ease-out, transform var(--t-base) ease-out;
}

.ds-notif-panel.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }

.ds-notif-panel__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.ds-notif-panel__head h3 { font-size: var(--fs-body-md); font-weight: var(--fw-bk); margin: 0; }

.ds-notif-panel__actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ds-notif-panel__mark {
  background: none; border: none; padding: 4px 8px;
  font-size: var(--fs-caption-md); color: var(--fg-muted);
  cursor: pointer; font: inherit; border-radius: 6px;
}

.ds-notif-panel__mark:hover { background: var(--bg-subtle); color: var(--fg-base); }

.ds-notif-panel__close {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  background: var(--bg-base);
  color: var(--fg-base);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.ds-notif-panel__close .mi { font-size: 22px; }

.ds-notif-panel__close:hover { background: var(--bg-subtle); }

.ds-notif-panel__list {
  list-style: none; padding: 0; margin: 0;
  max-height: 400px; overflow-y: auto;
}

.ds-notif-item {
  display: flex; gap: 12px;
  padding: 12px 16px;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--t-fast) ease-out;
}

.ds-notif-item:hover { background: var(--bg-subtle); }

.ds-notif-item:last-child { border-bottom: none; }

.ds-notif-item.is-unread { background: color-mix(in srgb, var(--mystic-500) 5%, transparent); }

.ds-notif-item__icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--fg-base);
}

.ds-notif-item__icon .mi { font-size: 18px; }

.ds-notif-item__body { flex: 1; min-width: 0; }

.ds-notif-item__title {
  font-size: var(--fs-body-xs); font-weight: var(--fw-bd);
  margin: 0 0 2px; line-height: 1.4;
  color: var(--fg-base);
}

.ds-notif-item__sub {
  font-size: var(--fs-caption-sm); color: var(--fg-muted);
  margin: 0; line-height: 1.4;
}

.ds-notif-item__time {
  font-size: var(--fs-caption-xs); color: var(--fg-faint);
  margin-top: 4px;
}

.ds-notif-panel__foot {
  padding: 12px 16px;
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

.ds-notif-panel__foot a {
  font-size: var(--fs-caption-md); font-weight: var(--fw-bd);
  color: var(--fg-base); text-decoration: none;
}

.ds-notif-panel__foot a:hover { text-decoration: underline; }

.ds-notif-empty {
  padding: 32px 16px; text-align: center;
  color: var(--fg-muted); font-size: var(--fs-caption-md);
}

/* Wrapper for bell + panel — relative positioning anchor */
.ds-notif {
  position: relative;
  display: inline-flex; align-items: center;
}

body.is-exchange-mode .ds-coll-card.is-selected {
  outline: 3px solid var(--mystic-500);
  outline-offset: -1px;
}

body.is-exchange-mode .ds-coll-card.is-selected::after {
  background: var(--mystic-500);
  border-color: var(--mystic-500);
  content: '✓'; color: var(--fg-onbrand);
  display: grid; place-items: center;
  font-size: 14px; font-weight: var(--fw-bk);
}

.ds-exchange-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex; gap: 16px; align-items: center;
  padding: 16px 24px;
  background: var(--bg-card);
  border-top: 1px solid var(--border-base);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
}

.ds-gacha-toggle__option.is-active {
  background: var(--gray-950);
  color: var(--gray-0);
  box-shadow: var(--shadow-1);
}

:root[data-theme="dark"] .ds-gacha-toggle__option.is-active {
  background: var(--gray-50); color: var(--gray-950);
}

/* 비활성 팩: 약간 lift만 줄임 (saturate 강하게 X — 팩 디자인 자체가 식별돼야)
   "selectable" feel 유지 */
.ds-gacha-pack:not(.is-active) {
  opacity: 0.78;
  filter: drop-shadow(-8px 16px 24px rgba(15,17,22,0.18));
}

.ds-gacha-pack:not(.is-active):hover {
  opacity: 0.95;
  filter: drop-shadow(-10px 20px 30px rgba(15,17,22,0.24));
}

/* active 팩: 또렷 + 살짝 lift (rotate 약하게 + scale 1.02) */
.ds-gacha-pack--pokemon.is-active {
  transform: rotate(-10deg) scale(1.04) translateY(-4px);
  z-index: 3;
}

.ds-gacha-pack--onepiece.is-active {
  transform: rotate(10deg) scale(1.04) translateY(-4px);
  z-index: 3;
}

/* hover 시 active 팩도 살짝 추가 lift */
.ds-gacha-pack--pokemon.is-active:hover {
  transform: rotate(-8deg) scale(1.06) translateY(-6px);
}

.ds-gacha-pack--onepiece.is-active:hover {
  transform: rotate(8deg) scale(1.06) translateY(-6px);
}

.ds-gacha-thumb.is-active { border-color: var(--mystic-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mystic-500) 14%, transparent); }

.ds-gacha-brand__cta .ds-btn,
.ds-gacha-brand__cta .ds-btn--floating {
  pointer-events: auto;
  min-width: 280px;
  height: 52px;
  padding: 0 24px;
  background: var(--fg-base);
  color: var(--bg-base);
  border-radius: 999px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.32), 0 4px 12px rgba(0,0,0,0.16);
  font-size: var(--fs-body-md); font-weight: var(--fw-bd);
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 12px;
  transition: transform var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}

.ds-gacha-brand__cta .ds-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.16);
}

.ds-gacha-brand__cta .ds-btn .mi { font-size: 20px; }

.ds-gacha-brand__cta.is-loading .ds-btn {
  visibility: hidden;
  pointer-events: none;
}

/* Tablet/Mobile fallback — v0.7: 태블릿에서 packs가 viewport 잠식하는 버그 수정
   container 가로 폭이 grid 1-col로 되며 packs(width 56%)가 너무 커지는 이슈
   → packs 컨테이너 max-width 캡 + pack width 비율 축소 */
@media (max-width: 1023px) {
  .ds-gacha-brand {
    /* minmax(0, 1fr) — 컨텐츠 (특히 카드 그리드 안의 가격 텍스트) 가 min-content
       로 grid item 을 부풀려 viewport 를 넘기던 회귀 차단. */
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px;
  }
  .ds-gacha-brand__main { min-width: 0; }
  .ds-gacha-brand__intro { position: static !important; min-width: 0; }
  .ds-gacha-brand__packs {
    width: 100%;
    height: 320px;
    max-width: 480px;
    margin-inline: auto;
    align-self: center;
  }
  /* v0.8: 모바일/태블릿도 데스크톱처럼 절반 가까이 overlap (42% → 70%) */
  .ds-gacha-pack--onepiece,
  .ds-gacha-pack--pokemon { width: 70%; }
  .ds-gacha-brand__heading { text-align: center; }
  .ds-gacha-brand__chip { align-self: center; }
  .ds-gacha-brand__cta {
    position: sticky;
    right: auto; bottom: 16px;
    justify-content: center;
    pointer-events: none;
    /* 데스크톱은 floating 느낌으로 padding-right: 24px 만 있는데, 모바일에선
       width: 100% pill 이라 pill 좌우 여백 불균형이 됨. 모바일에선 양쪽 균형. */
    padding-left: 16px;
    padding-right: 16px;
  }
  /* mobile/tablet 기본: CTA 100% width — mobile-only 룰에서 유지 */
  .ds-gacha-brand__cta .ds-btn {
    width: 100%;
    min-width: 0;
    /* viewport 좁아져도 텍스트가 pill 밖으로 안 나가도록 font-size 자동 축소
       + 좌우 padding 도 약간 축소. clamp 최소 13px / 최대 16px / 사이 vw-based. */
    font-size: clamp(13px, 3.4vw, 16px);
    padding: 0 18px;
    gap: 8px;
  }
  /* 라벨 자체도 min-width: 0 + ellipsis — clamp 만으로 부족할 정도로 텍스트가
     길면 끝부분 잘림 처리해 화살표가 pill 밖으로 새는 회귀 방지. */
  .ds-gacha-brand__cta .ds-btn > span:not(.mi) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 태블릿 전용 (768-1023) */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 팩 사이즈 — 모바일(46%) 기준 살짝 키운 정도 (42%) */
  .ds-gacha-pack--onepiece,
  .ds-gacha-pack--pokemon { width: 42% !important; }
  /* 두 팩 간격 좁히기 — 모바일과 동일하게 좌/우 14% 안쪽으로 당겨 가운데 overlap 강조 */
  .ds-gacha-pack--pokemon { left: 14% !important; right: auto !important; }
  .ds-gacha-pack--onepiece { right: 14% !important; left: auto !important; }
  /* 팩 컨테이너 — 폭과 비례한 적당한 높이 */
  .ds-gacha-brand__packs { height: 280px !important; max-width: 380px; }
  /* CTA: 풀폭 X — 고정 min-width pill (가운데 floating) */
  .ds-gacha-brand__cta .ds-btn { width: auto !important; min-width: 320px !important; }
}

a.is-coming-soon,
.ds-gnb__link.is-coming-soon,
.ds-footer__link.is-coming-soon,
.ds-mobile-tabs__item.is-coming-soon,
.ds-service-card.is-coming-soon,
.ds-promo__slide.is-coming-soon {
  cursor: not-allowed;
  opacity: 0.42;
  filter: grayscale(1);
  pointer-events: none;
}

.ds-gnb__link.is-coming-soon {
  color: var(--fg-faint);
}

.ds-gnb__link.is-coming-soon::after {
  content: '준비 중';
  position: static;
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin-left: 8px;
  padding: 0 8px;
  border: 1px solid var(--border-base);
  border-radius: var(--r-pill);
  background: var(--bg-card);
  color: var(--fg-muted);
  font-size: 10px;
  font-weight: var(--fw-bd);
  line-height: 1;
  text-transform: none;
}

.ds-mobile-tabs__item.is-coming-soon::after {
  content: '준비 중';
  display: block;
  margin-top: 1px;
  font-size: 8px;
  font-weight: var(--fw-bd);
  color: var(--fg-muted);
}

/* ====== GNB ====== */
.ds-gnb {
  position: sticky; top: 0; z-index: 50;
  height: var(--gnb-h);
  background: color-mix(in srgb, var(--bg-base) 90%, transparent);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid var(--border-subtle);
}

.ds-gnb__inner {
  display: flex; align-items: center; height: 100%;
  max-width: var(--content-max); margin-inline: auto; padding-inline: var(--edge-margin);
  gap: var(--stack-lg);
}

.ds-gnb__logo { display: flex; align-items: center; flex: 0 0 auto; }

.ds-gnb__logo svg { width: 72px; height: auto; }

.ds-gnb__logo svg path { fill: var(--fg-base); }

/* 우측 영역: 메뉴 + 로그인/아이콘 (좌측정렬로 묶임, GNB 우측 끝에 부착) */
.ds-gnb__right {
  display: flex; align-items: center; gap: 20px;
  margin-left: auto; height: 100%;
}

.ds-gnb__menu { display: flex; gap: 0; align-items: stretch; height: 100%; }

.ds-gnb__link {
  font-size: 18px; font-weight: var(--fw-bk);
  color: var(--fg-faint);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  position: relative; transition: color var(--t-fast) ease-out;
  display: inline-flex; align-items: center;
  height: 100%;
  padding: 0 24px;
}

.ds-gnb__link:hover { color: var(--fg-base); }

.ds-gnb__link[aria-current="page"] { color: var(--fg-base); }

.ds-gnb__link[aria-current="page"]::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;  /* GNB border-bottom 1px 위로 얹기 */
  height: 2px; background: var(--fg-base);
  z-index: 1;
}

/* GNB 우측 영역 — 로그인/내정보 버튼이 같은 슬롯에서 상태 전환 (시프트 방지) */
.ds-gnb__icons {
  display: grid;
  grid-template-columns: max-content;
  align-items: center;
  justify-items: end;
  color: var(--fg-base);
}

.ds-gnb__icons > * {
  grid-area: 1 / 1;
  transition: opacity var(--t-fast) ease-out;
}

.ds-gnb__icon-btn .mi { font-size: var(--icon-lg); }

/* v0.7: 태블릿(768~1023)에선 GNB menu 유지 — 모바일 tabbar (<=767) 와 겹치지 않도록 BP 정합 */
@media (max-width: 1023px) {
  .ds-gnb__inner { gap: var(--stack-md); }
  .ds-gnb__right { gap: 20px; }
  .ds-gnb__menu { gap: 22px; }
  .ds-gnb__link {
    padding: 0;
    font-size: var(--fs-body-md);
  }
  .ds-notif { margin-right: 0; }
  .ds-currency-picker { margin-right: 0; }
}

@media (max-width: 767px) {
  .ds-gnb__menu { display: none; }
  .ds-gnb__inner { gap: var(--stack-md); }
  .ds-gnb__icons { gap: var(--stack-xs); }
  body.is-notif-open { overflow: hidden; }
  .ds-notif-panel {
    position: fixed;
    inset: 0;
    width: auto;
    max-width: none;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: 200;
    transform: translateY(10px);
    background: var(--bg-base);
  }
  .ds-notif-panel.is-open { transform: translateY(0); }
  .ds-notif-panel__head {
    min-height: 64px;
    padding: calc(12px + env(safe-area-inset-top)) 20px 12px;
    background: color-mix(in srgb, var(--bg-base) 96%, transparent);
    backdrop-filter: saturate(140%) blur(16px);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
  }
  .ds-notif-panel__head h3 {
    font-size: var(--fs-title-sm);
    font-weight: var(--fw-bk);
  }
  .ds-notif-panel__close { display: inline-flex; }
  .ds-notif-panel__mark {
    min-height: 40px;
    padding-inline: 12px;
    font-size: var(--fs-caption-md);
  }
  .ds-notif-panel__list {
    flex: 1;
    max-height: none;
    overflow-y: auto;
    padding-bottom: 8px;
  }
  .ds-notif-item {
    gap: 14px;
    padding: 16px 20px;
  }
  .ds-notif-item__icon {
    width: 40px;
    height: 40px;
  }
  .ds-notif-item__title { font-size: var(--fs-body-sm); }
  .ds-notif-item__sub { font-size: var(--fs-caption-md); }
  .ds-notif-panel__foot {
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
    background: var(--bg-base);
  }
  .ds-notif-panel__foot a {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill);
    background: var(--fg-base);
    color: var(--bg-base);
    text-decoration: none;
  }
  .ds-notif-panel__foot a:hover { text-decoration: none; }
}

/* Mobile bottom tab bar */
.ds-mobile-tabs {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  /* 네이티브 앱 (viewport-fit=cover) 에서 home indicator 영역에 흰 배경
     깔리도록 불투명 처리 + 최소 8px 여유 확보 (safe-area-inset 이 0 이어도). */
  background: var(--bg-base);
  border-top: 1px solid var(--border-subtle);
  padding-bottom: max(env(safe-area-inset-bottom), 8px);
}

.ds-mobile-tabs__inner { display: grid; grid-template-columns: repeat(5,1fr); }

.ds-mobile-tabs__item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 0; color: var(--fg-faint);
  font-size: var(--fs-caption-xs); font-weight: var(--fw-bd); letter-spacing: 0.04em;
}

.ds-mobile-tabs__item .mi { font-size: 22px; }

.ds-mobile-tabs__item[aria-current="page"] { color: var(--fg-base); }

.ds-mobile-tabs__item[aria-current="page"] .mi { font-variation-settings: 'FILL' 1, 'wght' 500; }

@media (max-width: 767px) {
  .ds-mobile-tabs { display: block; }
  /* 모바일 탭바와 main 콘텐츠가 겹치지 않도록 main에 padding-bottom 보장 */
  main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* footer가 main 안에 있는 페이지 — footer__bottom 마진 조정 */
  main > .ds-footer:last-child { margin-bottom: 0; }
}

.ds-service-card__cta .mi { font-size: var(--icon-sm); }

.ds-pack__meta-item .mi { font-size: 12px; }

.ds-inv__price {
  font-size: 16px;
  font-weight: var(--fw-bd);  /* 600 */
  color: var(--fg-base);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.ds-inv__price-unit {
  font-size: 12px; font-weight: var(--fw-rg); color: var(--fg-muted);
}

/* ====== Footer ====== */
.ds-footer {
  background: var(--bg-base);
  border-top: 1px solid var(--border-base);
  margin-top: var(--stack-xl);
}

/* Footer 12단 그리드 — brand 1-4 / cols 6-12 (가운데 1열 시각 호흡) */
.ds-footer__top {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--stack-lg);
  padding-block: 56px 40px;
}

.ds-footer__brand {
  grid-column: 1 / span 4;
  display: flex; flex-direction: column; gap: 14px;
  max-width: 360px;
}

.ds-footer__brand h4 {
  font-size: 22px; font-weight: var(--fw-bk);
  letter-spacing: -0.012em;
  margin: 0;
}

.ds-footer__logo {
  width: 96px; height: auto; display: block;
  color: var(--fg-base);
}

.ds-footer__brand p {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  line-height: 1.6;
  margin: 0;
}

.ds-footer__cols {
  grid-column: 5 / -1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--stack-md);
}

.ds-footer__col-title {
  font-size: var(--fs-caption-sm);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-base);
  margin: 0 0 16px;
  font-weight: var(--fw-bk);
}

.ds-footer__link {
  display: block;
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  padding-block: 6px;
  transition: color var(--t-fast) ease-out;
}

.ds-footer__link:hover { color: var(--fg-base); }

/* 회사 법적 정보 영역 — 사업자등록·통신판매업·주소 등 */
.ds-footer__legal {
  border-top: 1px solid var(--border-subtle);
  padding-top: 24px;
  display: flex; flex-direction: column; gap: 6px;
}

.ds-footer__legal-line {
  font-size: var(--fs-caption-sm);
  color: var(--fg-muted);
  letter-spacing: -0.005em;
  line-height: 1.7;
  margin: 0;
}

.ds-footer__legal-line strong {
  color: var(--fg-base);
  font-weight: var(--fw-bd);
  margin-right: 6px;
}

.ds-footer__legal-line a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border-base);
  text-underline-offset: 2px;
}

.ds-footer__legal-line a:hover { text-decoration-color: var(--fg-base); }

/* 푸터 하단 row — 카피 + SNS */
.ds-footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
  padding-top: 24px;
  padding-bottom: 32px;
  margin-top: 24px;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-caption-sm); color: var(--fg-faint);
}

.ds-footer__bottom > span:first-child { flex: 1 1 auto; min-width: 0; }

@media (max-width: 599px) {
  .ds-footer__bottom { padding-bottom: 8px; }
}

/* ==========================================================
   Breadcrumb — 페이지 위계 표시
   ========================================================== */
.ds-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-caption); font-weight: var(--fw-md);
  color: var(--fg-muted);
  padding-block: 16px 4px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.ds-breadcrumb a {
  color: inherit;
  text-decoration: none;
  flex: 0 0 auto;
}

.ds-breadcrumb a:hover { color: var(--fg-base); text-decoration: underline; text-underline-offset: 2px; }

.ds-breadcrumb__sep {
  color: var(--fg-faint);
  flex: 0 0 auto;
}

.ds-breadcrumb__current {
  color: var(--fg-base);
  font-weight: var(--fw-bd);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .ds-breadcrumb__current {
    flex: 1 1 auto;
  }
}

.ds-pack-headline__name.is-live-loading,
.ds-pack-headline__sub.is-live-loading,
.section-head__sub.is-live-loading,
.ds-breadcrumb__current.is-live-loading {
  color: transparent !important;
  position: relative;
}

.ds-pack-headline__name.is-live-loading::after,
.ds-pack-headline__sub.is-live-loading::after,
.section-head__sub.is-live-loading::after,
.ds-breadcrumb__current.is-live-loading::after {
  content: "";
  display: block;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--bg-muted, var(--gray-100)) 48%, var(--bg-subtle) 100%);
  background-size: 200% 100%;
  animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
}

.ds-breadcrumb__current.is-live-loading::after { width: 96px; height: 12px; }

.ds-pack-category__btn .mi { font-size: 18px; }

.ds-pack-category__menu.is-open { display: block; }

.ds-pack-tier__price {
  font-size: var(--fs-caption-sm); font-weight: var(--fw-bd);
  color: var(--fg-base);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-pack-tier__price small { font-size: 10px; color: var(--fg-muted); font-weight: var(--fw-rg); margin-left: 1px; }

.ds-pack-tier.is-live-loading .ds-pack-tier__price,
.ds-pack-tier.is-live-loading .ds-pack-tier__price small {
  visibility: hidden;
}

@media (max-width: 599px) {
  .ds-pack-tier__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .ds-pack-tier__card { padding: 8px 4px; }
  .ds-pack-tier__dot { width: 42px; }
  .ds-pack-tier__name { font-size: 11px; }
  .ds-pack-tier__price { font-size: 10px; }
}

.ds-pack-icon-btn .mi {
  font-size: 18px; color: var(--fg-base);
  font-variation-settings: 'FILL' 0, 'wght' 400;
}

.ds-pack-icon-btn[aria-pressed="true"] .mi {
  color: var(--danger-500);
  font-variation-settings: 'FILL' 1, 'wght' 600;
}

.ds-pack-cta__alt .mi { font-size: 14px; }

/* ==========================================================
   Modal — 즐겨찾기 / 공유
   ========================================================== */
.ds-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1000;
  padding: 24px;
  animation: ds-modal-fade var(--t-base) var(--ease-std);
}

.ds-modal.is-open { display: flex; }

@keyframes ds-modal-fade { from { opacity: 0; } to { opacity: 1; } }

.ds-modal__panel {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 24px;
  max-width: 420px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 16px 48px rgba(15,17,22,0.24);
  position: relative;
}

.ds-modal__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}

.ds-modal__close {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent; border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--fg-muted);
  transition: var(--t-fast) ease-out;
  position: absolute; top: 14px; right: 14px;
}

.ds-modal__close:hover { background: var(--bg-subtle); color: var(--fg-base); }

.ds-modal__close .mi { font-size: 20px; }

.ds-modal__icon--fav .mi {
  font-size: 28px; color: var(--danger-500);
  font-variation-settings: 'FILL' 1;
}

.ds-modal__actions .ds-btn {
  flex: 1; text-align: center;
  min-height: 44px;          /* 사이즈 modifier 미지정 시에도 찌부 방지 */
  padding: 0 16px;            /* 사이즈 modifier 없을 때 좌우 패딩 보장 */
  font-size: var(--fs-body-sm);
}

.ds-share-channel__icon .mi { font-size: 18px; color: inherit; }

/* ==========================================================
   Offer Modal — 가격 제안 (확장: .ds-modal 위에 얹는 내부 요소)
   v3.1: 메시지 X, 만료 1/3/7/30, 카운터 X, 수수료 X
   ========================================================== */
.ds-offer-notice[hidden],
.ds-offer-cancel-link[hidden] { display: none !important; }

.ds-offer-notice .mi { font-size: 16px; color: var(--fg-muted); flex-shrink: 0; }

.ds-offer-notice--info .mi { color: var(--common-500, #3B82F6); }

.ds-offer-notice--login .mi { color: var(--fg-base); }

.ds-modal[data-login-required="true"] .ds-offer-field {
  opacity: 0.48;
}

.ds-modal[data-login-required="true"] .ds-offer-preset,
.ds-modal[data-login-required="true"] .ds-offer-expiry__pill {
  cursor: not-allowed;
}

.ds-offer-expiry__pill.is-active {
  border-color: var(--mystic-500);
  background: color-mix(in srgb, var(--mystic-500) 8%, var(--bg-card));
  color: var(--mystic-500);
  font-weight: var(--fw-bd);
}

.ds-card-offers__notify-link .mi { font-size: 16px; }

.ds-offer-card__actions .ds-btn { height: 36px; padding: 0 16px; font-size: var(--fs-caption); border-radius: var(--r-pill); }

.ds-offer-row__chip .mi {
  font-size: 13px;
  font-variation-settings: 'FILL' 1, 'wght' 500;
}

@media (max-width: 767px) {
  /* mobile horizontal snap rail */
  .ds-offers-stats {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: -16px;
    padding: 0 16px 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ds-offers-stats::-webkit-scrollbar { display: none; }
  .ds-offers-stats > .ds-offers-stat {
    flex: 0 0 36%;  /* peek 패턴 */
    scroll-snap-align: start;
  }
  /* v0.8: mobile offer row — 2-section stack (top: thumb+body, footer: chip/actions/date) */
  .ds-offer-row {
    grid-template-columns: 84px 1fr;
    grid-template-areas:
      "thumb body"
      "footer footer";
    column-gap: 12px;
    row-gap: 10px;
    align-items: start;
    padding: 12px 14px;
  }
  .ds-offer-row__thumb {
    grid-area: thumb;
    width: 84px;
    background-size: contain;
  }
  .ds-offer-row__body {
    grid-area: body;
    gap: 6px;
    align-self: start;
    padding-top: 2px;
  }
  .ds-offer-row__line1 {
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
  }
  .ds-offer-row__direction {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    background: var(--bg-subtle);
    color: var(--fg-subtle);
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: var(--fw-bd);
    text-transform: none;
    letter-spacing: 0;
  }
  .ds-offer-row__user {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: var(--fs-body-sm);
  }
  .ds-offer-row__card {
    -webkit-line-clamp: 2;
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .ds-offer-row__line2 {
    margin-top: 2px;
  }
  .ds-offer-row__amount {
    font-size: 18px;
    line-height: 1.15;
  }
  /* footer: 좌측 (chip 위 · 날짜 아래) + 우측 액션 버튼 */
  .ds-offer-row__right {
    grid-area: footer;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "chip actions"
      "date actions";
    align-items: center;
    justify-items: stretch;
    column-gap: 10px;
    row-gap: 4px;
    min-width: 0;
    padding-top: 10px;
    border-top: 1px solid var(--border-base);
  }
  .ds-offer-row__right .ds-offer-row__chip {
    grid-area: chip;
    justify-self: start;
    margin-right: 0;
  }
  .ds-offer-row__right .ds-offer-row__actions {
    grid-area: actions;
    align-self: center;
    justify-self: end;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 150px;
  }
  .ds-offer-row__right .ds-offer-row__actions .ds-btn {
    min-width: 56px;
    padding-inline: 10px;
  }
  .ds-offer-row__right .ds-offer-row__date {
    grid-area: date;
    justify-self: start;
    margin-left: 0;
    font-size: 11px;
    color: var(--fg-muted);
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* placeholder: 액션 컬럼 폭만 0으로 — past row는 chip/date가 전체 폭 사용 */
  .ds-offer-row__actions--placeholder { display: none; }
}

.ds-avatar-modal__circle {
  width: 112px; height: 112px;
  border-radius: 50%;
  background: var(--gray-950);
  background-size: cover; background-position: center;
  color: var(--gray-0);
  display: grid; place-items: center;
  font-size: 44px; font-weight: var(--fw-bk);
  letter-spacing: -0.02em;
  border: 3px solid var(--bg-card);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

:root[data-theme="dark"] .ds-avatar-modal__circle {
  background: var(--gray-50); color: var(--gray-950);
}

.ds-avatar-modal__circle[data-has-image] .ds-avatar-modal__letter { display: none; }

.ds-avatar-modal__btn .mi { font-size: 22px; color: var(--fg-subtle); flex-shrink: 0; }

.ds-avatar-modal__btn--danger:hover .mi,
.ds-avatar-modal__btn--danger:hover strong {
  color: var(--color-danger, #d33);
}

.ds-offer-modal-success__icon .mi { font-size: 40px; }

.ds-stepper button .mi { font-size: 18px; }

.ds-pack-info__cta-row .ds-btn { flex: 1; }

.ds-pool-card__value-amount {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bd);  /* v0.5: bk 700 → bd 600 */
  color: var(--fg-base);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.ds-pool-grid--browse .ds-pool-card__value-amount { font-size: var(--fs-caption); }

.ds-pay-confirm .ds-modal__head {
  align-items: flex-start;
  margin-bottom: 4px;
}

.ds-modal__panel--wizard .ds-modal__head {
  display: flex; flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 0 14px 0;      /* close 버튼은 absolute 라 우측 padding 불필요 */
  margin: 0;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

/* v0.7 T3: 모바일 — dot stepper 압축 (현재 step만 강조, 나머지는 미니멀) */
@media (max-width: 480px) {
  .ds-wizard__progress {
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ds-wizard__progress::-webkit-scrollbar { display: none; }
  .ds-wizard__step-cell .ds-wizard__step-label { display: none; }
  .ds-wizard__step-cell.is-active .ds-wizard__step-label { display: inline; font-size: 11px; }
  .ds-wizard__step { width: 22px; height: 22px; font-size: 11px; }
  .ds-modal__panel--wizard .ds-wizard__step-line { margin-top: 10px; }
}

.ds-wizard__step-cell.is-active .ds-wizard__step-label {
  color: var(--fg-base);
  font-weight: var(--fw-bk);
}

/* step cell의 .ds-wizard__step에 active/done 클래스 적용 (cell이 부모) */
.ds-wizard__step-cell.is-active .ds-wizard__step {
  background: var(--mystic-300);
  color: var(--mystic-950);
  border-color: var(--mystic-300);
  transform: scale(1.08);
}

/* active = 현재 단계 (brand 그린) — 시선 1순위 */
.ds-wizard__step.is-active {
  background: var(--mystic-300);
  color: var(--mystic-950);
  border-color: var(--mystic-300);
  transform: scale(1.08);
}

/* 좌측 cancel/prev | 우측 next/submit (margin-left: auto) */
#wizardNextBtn,
#gradingSubmitBtn {
  margin-left: auto;
}

#wizardNextBtn .mi,
#gradingSubmitBtn .mi { font-size: 16px; margin-right: 4px; }

.ds-wizard__step-error .mi {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1.2;
}

.ds-wizard__actions .ds-btn--primary { margin-left: auto; }

.ds-wizard__actions .ds-btn--primary .mi { font-size: 16px; margin-right: 4px; }

.ds-uploader__slot.has-image .mi,
.ds-uploader__slot.has-image .ds-uploader__hint { display: none; }

.ds-uploader__slot .mi { font-size: 32px; color: var(--fg-faint); }

.ds-wizard__tips .mi { font-size: 14px; color: var(--mystic-300); }

.ds-tier-option__icon .mi { font-size: 20px; }

.ds-wizard__field-zip .ds-btn { flex-shrink: 0; }

.ds-address-search-module .ds-btn {
  flex-shrink: 0;
}

.ds-address-search-layer.is-loading {
  display: grid;
  place-items: center;
}

.ds-address-search-layer.is-loading::before {
  content: "주소 검색을 불러오는 중...";
  color: var(--fg-muted);
  font-size: 14px;
}

@media (max-width: 640px) {
  .ds-address-search-module {
    align-items: stretch;
    flex-direction: column;
  }
  .ds-address-search-module .ds-btn {
    width: 100%;
  }
}

.ds-grading-address__option.is-selected {
  border-color: var(--fg-base);
  box-shadow: inset 0 0 0 1px var(--fg-base);
}

.ds-grading-address__option.is-selected .ds-grading-address__radio {
  border-color: var(--fg-base);
}

.ds-grading-address__option.is-selected .ds-grading-address__radio::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: inherit;
  background: var(--fg-base);
}

#gradingAddressForm[hidden] {
  display: none !important;
}

#gradingSaveAddressBtn {
  align-self: flex-start;
}

.ds-modal__panel--done .ds-modal__icon--success .mi { font-size: 32px; }

@media (max-width: 1023px) {
  .ds-footer__top {
    grid-template-columns: 1fr;
    gap: var(--stack-lg);
    padding-block: 40px 32px;
  }
  .ds-footer__brand { grid-column: 1 / -1; max-width: 100%; }
  .ds-footer__cols { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); gap: var(--stack-md); }
}

@media (max-width: 599px) {
  .ds-footer__cols { grid-template-columns: repeat(2, 1fr); gap: var(--stack-lg); }
  .ds-footer__bottom { padding-bottom: 24px; }
}

/* ==========================================================
   Auth state — 로그인 전/후 표시 토글
   <body data-auth="guest"|"user"> 로 제어
   ========================================================== */
[data-auth="guest"] .user-only { display: none !important; }

[data-auth="user"]  .guest-only { display: none !important; }

/* GNB 우측 슬롯 안에서는 display:none 대신 opacity+pointer-events 토글 — 슬롯 폭 유지 */
[data-auth="guest"] .ds-gnb__icons .user-only,
[data-auth="user"]  .ds-gnb__icons .guest-only {
  display: inline-flex !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.auth-toggle .mi { font-size: 14px; color: var(--fg-muted); }

/* GNB 사용자 영역 (로그인 후) */
.ds-gnb__user {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 0;
  width: auto;
  flex: 0 0 auto;
  padding: 4px 4px 4px 12px;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  text-decoration: none;
  transition: background var(--t-fast) ease-out;
}

.ds-gnb__user:hover { background: var(--bg-muted); }

.ds-gnb__balance {
  display: inline-block;
  min-width: 0;
  text-align: right;
  font-size: 14px; font-weight: var(--fw-bd, 600);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  color: var(--fg-base, #030712); letter-spacing: -0.005em;
  white-space: nowrap;
}

.ds-gnb__balance small { color: var(--fg-muted, #6b7280); font-size: 12px; font-weight: var(--fw-rg, 400); margin-left: 2px; }

.ds-gnb__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gray-950); color: var(--gray-0);
  display: grid; place-items: center;
  font-size: 11px; font-weight: var(--fw-bk);
  letter-spacing: -0.005em;
}

:root[data-theme="dark"] .ds-gnb__avatar { background: var(--gray-50); color: var(--gray-950); }

.ds-profile__avatar {
  width: 64px; height: 64px;  /* v0.7: 72 → 64 (compact hero) */
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  display: grid; place-items: center;
  font-size: 22px; font-weight: var(--fw-bk);
  flex-shrink: 0;
  position: relative; z-index: 1;
  background-size: cover;
  background-position: center;
}

.ds-profile__avatar-letter {
  position: relative; z-index: 1;
}

.ds-profile__avatar-edit .mi { font-size: 22px; }

/* 이미지 업로드 후 — letter 숨김 */
button.ds-profile__avatar--editable[data-has-image="true"] .ds-profile__avatar-letter { display: none; }

.ds-profile__settings .mi { font-size: 20px; }

.ds-profile__balance-amount {
  font-size: 26px; font-weight: var(--fw-bk);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  letter-spacing: -0.012em;
  line-height: 1;
}

.ds-profile__balance-amount small { font-size: 13px; color: var(--gray-400); font-weight: var(--fw-rg); margin-left: 2px; }

.ds-profile__balance .ds-btn { margin: 0; }

@media (max-width: 767px) {
  /* v0.7 M6: hero 슬림 — 한 row 유지 (column stack 안 함), 컴팩트 spacing */
  .ds-profile {
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 18px !important;
  }
  .ds-profile__avatar { width: 52px; height: 52px; font-size: 18px; }
  .ds-profile__name { font-size: 18px; margin-bottom: 2px; }
  .ds-profile__sub { font-size: 11px; gap: 4px; }
  .ds-profile__sub > span:nth-child(n+5) { display: none; }  /* 가입일 hide on tight viewport */
  .ds-profile__balance {
    padding-left: 14px !important;
    border-left: 1px solid rgba(255,255,255,0.14);
    align-items: flex-end;
    flex-shrink: 0;
    gap: 6px !important;
  }
  .ds-profile__balance-amount { font-size: 18px; }
  .ds-profile__balance-amount small { font-size: 11px; }
  .ds-profile__balance .ds-btn { padding: 0 10px !important; height: 28px !important; font-size: 11px !important; }
}

.ds-coll-summary__action-list .mi { font-size: 18px; color: var(--fg-muted); flex-shrink: 0; }

/* ==========================================================
   v0.7 B2: my-collection 모바일 전용 재설계 — "이건 모바일 앱이구나" feel
   ========================================================== */
@media (max-width: 767px) {
  /* 1. 헤더 슬림 — 제목 + 공개 토글 한 줄, 긴 sub 제거 */
  .ds-coll-stats {
    padding-block: 16px 12px !important;
  }
  .ds-coll-stats__head {
    flex-direction: row !important;
    align-items: center !important;
    margin-bottom: 14px;
    gap: 12px;
  }
  .ds-coll-stats__title { font-size: 22px !important; line-height: 1.2; margin: 0 !important; }
  .ds-coll-stats__sub { display: none !important; }  /* 긴 안내문 제거 (스크롤 절약) */
  .ds-coll-visibility {
    flex-direction: row !important;
    gap: 8px;
    align-items: center !important;
    flex-shrink: 0;
  }
  .ds-coll-visibility__row { gap: 6px; }
  .ds-coll-visibility__label { font-size: 11px; color: var(--fg-muted); }
  .ds-coll-visibility__hint { display: none !important; }  /* hint는 모바일 생략 */

  /* 2. 통계 4-card → 컴팩트 stack (불필요 padding 제거) */
  .ds-coll-summary {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
  /* card--value: hero 유지 (검정 강조) — 압축 */
  .ds-coll-summary__card {
    min-height: 0 !important;
    padding: 14px 16px !important;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .ds-coll-summary__card--value {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 18px !important;
  }
  .ds-coll-summary__card--value .ds-coll-summary__value { font-size: 28px; }

  /* card--dist: 한 줄 inline 표기 — 바 + legend 컴팩트 */
  .ds-coll-summary__card--dist {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "label  value"
      "bar    bar";
    gap: 4px 12px;
    column-gap: 12px;
  }
  .ds-coll-summary__card--dist .ds-coll-summary__label { grid-area: label; align-self: center; }
  .ds-coll-summary__card--dist .ds-coll-summary__value { grid-area: value; text-align: right; font-size: 18px; }
  .ds-coll-summary__card--dist .ds-coll-summary__bar { grid-area: bar; margin-top: 2px; }
  /* v0.7 T1: 모바일에서도 legend 노출 — bar 색만 봐선 어떤 그레이더가 몇 장인지 모름 */
  .ds-coll-summary__card--dist {
    grid-template-areas:
      "label value"
      "bar bar"
      "legend legend" !important;
  }
  .ds-coll-summary__card--dist .ds-coll-summary__legend {
    display: flex !important;
    grid-area: legend;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 11px;
    color: var(--fg-muted);
    line-height: 1.3;
  }

  /* card--mover: 한 줄 inline */
  .ds-coll-summary__card--mover {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "label  .       delta"
      "name   name    name";
    gap: 2px 8px;
  }
  .ds-coll-summary__card--mover .ds-coll-summary__label { grid-area: label; }
  .ds-coll-summary__card--mover .ds-coll-summary__mover-delta { grid-area: delta; font-size: 14px; margin: 0; }
  .ds-coll-summary__card--mover .ds-coll-summary__mover-delta small { display: none; }
  .ds-coll-summary__card--mover .ds-coll-summary__mover-name { grid-area: name; font-size: 13px; color: var(--fg-muted); }

  /* card--actions: 모바일에선 column layout — 라벨 + 2 chip pair (라벨 살림) */
  .ds-coll-summary__card--actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .ds-coll-summary__card--actions .ds-coll-summary__action-list {
    flex-direction: row;
    gap: 6px;
  }
  .ds-coll-summary__card--actions .ds-coll-summary__action-list li {
    flex: 1;
  }
  .ds-coll-summary__card--actions .ds-coll-summary__action-list li a {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: var(--bg-subtle);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.2;
  }
  :root[data-theme="dark"] .ds-coll-summary__card--actions .ds-coll-summary__action-list li a {
    background: var(--gray-900);
  }
  .ds-coll-summary__card--actions .ds-coll-summary__action-list .mi {
    font-size: 16px;
    flex-shrink: 0;
  }
  /* v0.7 T1: count "3건" + label "등급 심사 중" 명확히 2줄 */
  .ds-coll-summary__action-text {
    display: flex; flex-direction: column;
    gap: 1px;
    line-height: 1.2;
    flex: 1; min-width: 0;
  }
  .ds-coll-summary__action-count {
    font-size: 15px; font-weight: var(--fw-bd);
    color: var(--fg-base); line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
  .ds-coll-summary__action-label {
    font-size: 11px; font-weight: var(--fw-md);
    color: var(--fg-muted);
    line-height: 1.2;
  }

  /* card--mover 모바일 — thumb visible, 정보 컴팩트 */
  .ds-coll-summary__card--mover {
    grid-template-areas: none !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }
  .ds-coll-summary__mover-thumb { width: 40px; }
  .ds-coll-summary__card--mover .ds-coll-summary__mover-body {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "label  delta"
      "name   name";
    gap: 2px 8px;
  }
  .ds-coll-summary__card--mover .ds-coll-summary__label { grid-area: label; align-self: center; }
  .ds-coll-summary__card--mover .ds-coll-summary__mover-delta {
    grid-area: delta;
    font-size: 14px;
    margin: 0;
    align-self: center;
  }
  .ds-coll-summary__card--mover .ds-coll-summary__mover-delta small { display: none; }
  .ds-coll-summary__card--mover .ds-coll-summary__mover-name {
    grid-area: name;
    font-size: 13px;
    color: var(--fg-base);
    font-weight: var(--fw-bd);
  }

  /* 3. body padding-bottom — tabbar 위까지 카드 그리드 보이도록 (이미 v0.6에 있음) */
  .ds-coll-stats { state-hide: false; }
}

.ds-activity-card__icon .mi { font-size: 18px; }

.ds-quick-item .mi { font-size: 22px; color: var(--fg-base); }

.ds-quick-item--logout .mi { color: var(--danger-500, #dc2626); }

.ds-recent__icon .mi { font-size: 16px; }

.ds-recent__amount { font-size: var(--fs-body-sm); font-weight: var(--fw-bd); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; flex-shrink: 0; }

.ds-recent-empty__icon .mi {
  font-size: 24px;
}

.ds-recent-empty__link .mi {
  font-size: 16px;
}

.ds-fab .mi { font-size: 22px; font-variation-settings: 'FILL' 1, 'wght' 500; }

.ds-feature__price {
  font-size: 26px; font-weight: var(--fw-bd);  /* v0.5: bk 700 → bd 600 */
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  letter-spacing: -0.014em;
  color: var(--gray-0);
}

.ds-feature__price-unit {
  font-size: var(--fs-caption);
  color: rgba(255,255,255,0.55);
  font-weight: var(--fw-rg);  /* v0.5: md 500 → rg 400 (unit 룰) */
}

.ds-feature__cta .mi { font-size: 14px; transition: transform var(--t-fast) ease-out; }

.ds-feature:hover .ds-feature__cta .mi { transform: translateX(3px); }

:root[data-theme="dark"] .ds-feature__price { color: var(--gray-950); }

:root[data-theme="dark"] .ds-feature__price-unit { color: var(--fg-muted); }

.ds-mosaic-cell__price-amount {
  font-size: 16px; font-weight: var(--fw-bd);  /* 600 */
  letter-spacing: -0.01em;
}

.ds-mosaic-cell__price-unit {
  font-size: 12px; font-weight: var(--fw-rg);
  color: var(--fg-muted);
}

.ds-mosaic-cell--dark .ds-mosaic-cell__price-unit { color: var(--gray-400); }

.ds-promo__dot.is-active {
  width: 20px; background: var(--gray-a700);
}

:root[data-theme="dark"] .ds-promo__dot.is-active { background: rgba(255,255,255,0.7); }

@media (max-width: 767px) {
  /* v1: 모바일 promo — 박스 스타일 (margin 유지, 라운드 유지). 이미지 비율 그대로 (1440×640 ≈ 2.25:1) */
  .ds-promo {
    margin-inline: 0;
    border-radius: 12px;
  }
  .ds-promo__track {
    aspect-ratio: 1440 / 640;
    height: auto;
    border-radius: 12px;
  }
  /* GNB 바로 밑에 딱 붙도록 — promo를 감싸는 첫 section의 top padding 제거 */
  main > .container > section:first-of-type:has(.ds-promo) {
    padding-top: 0 !important;
  }
}

.ds-promo__slide.is-active { opacity: 1 !important; z-index: 1; }

.ds-promo__nav .mi { font-size: 20px; color: var(--fg-base); }

:root[data-theme="dark"] .ds-promo__nav .mi { color: var(--gray-0); }

.ds-promo-banner__eyebrow .mi { font-size: 14px; }

@keyframes ds-banner-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.ds-promo-banner__chip .mi { font-size: 16px; color: var(--mystic-300); }

/* ==========================================================
   KADO 슬랜트 시그니처 — 평행사변형 시각보정 토큰
   로고가 약 8° 우상향 슬랜트라 이를 시그니처로 차용.
   시각보정 체크리스트 (chip/step 양쪽에서 공통 적용):
     1) container: skewX(-8deg) → 모양만 평행사변형으로
     2) inner __label: skewX(8deg) → 글자 역보정으로 똑바로
     3) padding-x: 일반 chip보다 +6px (슬랜트로 잘려나간 시각 폭 보상)
     4) 인접 element gap: +4px (slope 끝점이 시각적으로 가까이 보임)
     5) border-radius: 0 (슬랜트의 직선 끝이 시그니처)
     6) font-weight: 동일하나 letter-spacing 약 -0.005em (슬랜트로 글자가 가늘어 보임 보강)
     7) 8°는 sweet spot — 12°↑은 만화체, 4°↓은 의도 흐림
   ========================================================== */
:root {
  --slant-deg: -8deg;
  --slant-deg-counter: 8deg;
}

.ds-page-header:has(+ .ds-filter-backdrop + .ds-market-body) {
  padding-block: 32px 24px;
}

.ds-page-header__settings .mi { font-size: 20px; }

.ds-page-search .mi { font-size: 20px; color: var(--fg-muted); }

.ds-listing__price {
  font-size: 16px; font-weight: var(--fw-bd);  /* 600 */
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  letter-spacing: -0.01em;
}

.ds-listing__currency { font-size: 12px; font-weight: var(--fw-rg); color: var(--fg-muted); }

.ds-active-filter-chip .mi {
  font-size: 14px;
  line-height: 1;
}

.ds-filter-toggle .mi { font-size: 18px; }

/* 슬라이드 애니메이션 — 필터 rail 좌측에서 in/out (desktop) */
.ds-market-body, .ds-coll-body {
  transition: grid-template-columns 0.32s var(--ease-emp), gap 0.32s var(--ease-emp);
}

.ds-filter-rail {
  transform: translateX(0);
  opacity: 1;
  transition:
    transform 0.32s var(--ease-emp),
    opacity 0.2s ease 0.06s;
  will-change: transform, opacity;
}

.ds-market-body.is-filter-hidden,
.ds-coll-body.is-filter-hidden {
  grid-template-columns: 0 1fr !important;
  gap: 0 !important;
}

.ds-market-body.is-filter-hidden .ds-filter-rail,
.ds-coll-body.is-filter-hidden .ds-filter-rail {
  transform: translateX(calc(-100% - 32px));
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.32s var(--ease-emp),
    opacity 0.18s ease;
}

.ds-filter-rail__close .mi { font-size: 20px; }

.ds-filter-rail__apply .ds-btn { width: 100%; }

@media (max-width: 1023px) {
  .ds-filter-rail {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .ds-filter-rail__head,
  .ds-filter-mode,
  .ds-filter-rail__apply {
    flex: 0 0 auto;
  }
  .ds-filter-rail__scroll {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-right: 2px;
    scrollbar-width: none;
  }
  .ds-filter-rail__scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .ds-filter-rail__apply {
    position: relative;
    z-index: 1;
    margin: 12px -18px 0;
    padding: 12px 18px calc(12px + max(env(safe-area-inset-bottom, 0px), var(--kado-visual-bottom-inset, 0px)));
    background: var(--bg-card);
    box-shadow: 0 -12px 24px rgba(255, 255, 255, 0.94);
  }
  .ds-filter-options--scroll {
    max-height: none;
    overflow: visible;
    padding-right: 0;
    scrollbar-width: auto;
  }
  .ds-filter-options--scroll::-webkit-scrollbar {
    display: none;
  }
  .ds-filter-group {
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-subtle);
    padding: 14px 0;
  }
  .ds-filter-group:first-child {
    padding-top: 0;
  }
  .ds-filter-group h3.ds-filter-group__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 28px;
    margin: 0;
    cursor: pointer;
    user-select: none;
  }
  .ds-filter-group h3.ds-filter-group__toggle::after {
    content: 'expand_less';
    font-family: 'Material Symbols Outlined';
    font-size: 18px;
    line-height: 1;
    color: var(--fg-faint);
    font-weight: 400;
    transition: transform var(--t-fast) ease-out, color var(--t-fast) ease-out;
  }
  .ds-filter-group h3.ds-filter-group__toggle:hover,
  .ds-filter-group h3.ds-filter-group__toggle:focus-visible {
    color: var(--fg-base);
  }
  .ds-filter-group h3.ds-filter-group__toggle:focus-visible {
    outline: 2px solid var(--mystic-300);
    outline-offset: 4px;
    border-radius: 6px;
  }
  .ds-filter-group__content {
    padding-top: 10px;
  }
  .ds-filter-group.is-collapsed .ds-filter-group__content {
    display: none;
  }
  .ds-filter-group.is-collapsed h3.ds-filter-group__toggle::after {
    transform: rotate(180deg);
    color: var(--fg-muted);
  }
}

/* Backdrop (모바일 bottom sheet) */
.ds-filter-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.ds-sticky-bar__search .mi { font-size: 18px; color: var(--fg-muted); flex-shrink: 0; }

.ds-sticky-bar__search-trigger .mi { font-size: 18px; }

/* v0.7 S3: 검색 overlay (full-screen) */
.ds-search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg-base);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out;
  display: flex; flex-direction: column;
}

.ds-search-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.ds-search-overlay__back .mi { font-size: 22px; }

.ds-search-overlay__input-wrap > .mi { font-size: 18px; color: var(--fg-muted); flex-shrink: 0; }

.ds-search-overlay__clear .mi { font-size: 14px; }

.ds-search-overlay__result .mi {
  font-size: 18px; color: var(--fg-muted);
}

/* ============ TABLET: Filter rail = side drawer overlay (768–1023px)
   왜: tablet에서 grid-template-columns: 1fr + position:static로 인해
       filter rail이 inline 전체 폭을 차지해 화면을 꽉 채움.
   How: 우측 side drawer로 슬라이드. (page-header 검색은 그대로 유지)
   z-index: theme toggle(101)보다 위 — close 버튼 클릭 충돌 방지 */
@media (min-width: 768px) and (max-width: 1023px) {
  .ds-market-body, .ds-coll-body {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    transition: none !important;
  }
  .ds-filter-rail {
    position: fixed !important;
    left: auto; right: 0; bottom: 0; top: 0;
    width: min(420px, 92vw);
    z-index: 110;  /* theme toggle(101) 위 */
    margin: 0;
    border-radius: 16px 0 0 16px;
    border-left: 1px solid var(--border-base);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.16);
    height: 100vh;
    max-height: none;
    padding: 20px 20px 0;
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.32s var(--ease-emp);
  }
  .ds-filter-backdrop { z-index: 109; }
  .ds-market-body.is-filter-hidden .ds-filter-rail,
  .ds-coll-body.is-filter-hidden .ds-filter-rail {
    transform: translateX(100%) !important;
    opacity: 1 !important;
    pointer-events: none;
  }
  /* close: 좌측 inline (theme toggle 충돌 방지) — 우측은 초기화 버튼 */
  .ds-filter-rail__close { display: grid; place-items: center; position: static !important; }
  .ds-filter-rail__apply { display: block; }
  .ds-filter-rail__head {
    position: relative;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px;
    padding-right: 0;
  }
  .ds-filter-rail__head h2 { order: 2; flex: 1; }
  .ds-filter-rail__close { order: 1; }
  .ds-filter-rail__reset { order: 3; }
  .ds-filter-backdrop { display: block; }
  body:has(.ds-market-body:not(.is-filter-hidden)) .ds-filter-backdrop,
  body:has(.ds-coll-body:not(.is-filter-hidden)) .ds-filter-backdrop {
    opacity: 1; pointer-events: auto;
  }
  body:has(.ds-market-body:not(.is-filter-hidden)),
  body:has(.ds-coll-body:not(.is-filter-hidden)) {
    overflow: hidden;
  }
}

/* ============ MOBILE: Bottom sheet pattern (필터) + 1-row sticky bar (v0.7 M3) ============ */
@media (max-width: 767px) {
  /* v0.7 M3 + S3: 1-row sticky bar (56px) — filter + count + search icon + sort */
  .ds-sticky-bar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    min-height: 56px;
    padding: 0;
    gap: 8px;
    row-gap: 8px;
    margin-top: 4px;
    margin-bottom: 12px;
  }
  .ds-sticky-bar > .ds-sticky-bar__left { display: contents; }
  .ds-filter-toggle {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .ds-filter-toggle__label { white-space: nowrap; }
  .ds-sticky-bar > .ds-sticky-bar__right {
    width: auto;
    margin-left: auto;
    gap: 6px;
    flex: 0 0 auto;
  }
  .ds-sticky-bar__search { display: none !important; }
  .ds-active-filter-chips {
    flex: 0 0 100%;
    order: 10;
    width: 100%;
    max-width: 100%;
    gap: 4px;
    padding: 0 0 2px;
  }
  .ds-active-filter-chip { height: 22px; padding: 0 7px 0 9px; font-size: 10px; }
  /* count 짧게 (10개의 매물 → 10건) */
  .ds-sticky-bar__count { font-size: var(--fs-caption); white-space: nowrap; }
  /* sort dropdown 컴팩트 */
  .ds-sticky-bar__right .ds-dropdown__trigger { padding: 0 10px; height: 34px; font-size: var(--fs-body-sm); }
  .ds-sticky-bar__right .ds-dropdown__value { white-space: nowrap; }

  /* page-header 검색은 모바일에서 숨김 */
  .ds-page-search { display: none !important; }

  /* market-body — grid 레이아웃 해제 */
  .ds-market-body, .ds-coll-body {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    transition: none !important;
  }

  /* filter rail = bottom sheet */
  .ds-filter-rail {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    top: auto;
    z-index: 100;
    margin: 0;
    border-radius: 16px 16px 0 0;
    border: none;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.16);
    height: min(85dvh, 720px);
    max-height: 85vh;
    max-height: min(85dvh, 720px);
    padding: 32px 18px 0;
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.32s var(--ease-emp);
  }
  /* drag handle */
  .ds-filter-rail::before {
    content: '';
    position: absolute; top: 10px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    background: var(--gray-300);
    border-radius: 2px;
  }
  /* 모바일에선 is-filter-hidden = 닫힌 상태 = bottom 으로 내려감 */
  .ds-market-body.is-filter-hidden .ds-filter-rail,
  .ds-coll-body.is-filter-hidden .ds-filter-rail {
    transform: translateY(100%) !important;
    opacity: 1 !important;
    pointer-events: none;
  }
  /* 모바일에선 grid-template-columns trick 무력화 */
  .ds-market-body.is-filter-hidden,
  .ds-coll-body.is-filter-hidden {
    grid-template-columns: none !important;
    gap: 0 !important;
  }

  /* close 버튼 + apply CTA 모바일 노출 */
  .ds-filter-rail__close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }
  .ds-filter-rail__apply { display: block; }
  /* head 위계 정합 — 모바일에선 close 버튼이 우측 */
  .ds-filter-rail__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    padding-right: 0;
  }
  .ds-filter-rail__head h2 { flex: 1; }
  .ds-filter-rail__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
  }
  .ds-filter-rail__close { position: static; }

  /* backdrop */
  .ds-filter-backdrop { display: block; }
  /* 모바일 + 필터 열림 = backdrop visible */
  body:has(.ds-market-body:not(.is-filter-hidden)) .ds-filter-backdrop,
  body:has(.ds-coll-body:not(.is-filter-hidden)) .ds-filter-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  /* 스크롤 잠금 */
  body:has(.ds-market-body:not(.is-filter-hidden)),
  body:has(.ds-coll-body:not(.is-filter-hidden)) {
    overflow: hidden;
  }

  /* 토글 버튼 active 상태도 아이콘 only (label hidden 위에서 처리됨) */
}

.ds-sort .mi { font-size: 16px; color: var(--fg-muted); }

.ds-pricing__features .mi { font-size: 16px; color: var(--gray-600); flex-shrink: 0; margin-top: 1px; }

.ds-feature-chip .mi { font-size: 14px; color: var(--fg-muted); }

@media (max-width: 767px) {
  .ds-service-block {
    padding-block: 32px;
  }
  .ds-service-block:first-of-type {
    padding-top: 24px;
  }
  .ds-grading-hero {
    padding-block: 0 32px;
  }
  .ds-grading-hero__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 18px;
  }
  .ds-grading-hero__copy {
    max-width: none;
    width: 100%;
    gap: 8px;
  }
  .ds-grading-hero__title {
    font-size: 26px;
    line-height: 1.18;
  }
  .ds-grading-hero__sub {
    margin-top: 8px;
    line-height: 1.5;
  }
  .ds-grading-hero__cta {
    width: 100%;
    align-items: stretch;
    gap: 8px;
    margin-top: 0;
  }
  .ds-grading-hero__cta .ds-btn {
    width: 100%;
    justify-content: center;
  }
  .ds-grading-hero__cta-note {
    width: 100%;
    justify-content: center;
  }
}

.ds-howto__phase-alert .mi { font-size: 13px; }

/* v0.7 M5: 모바일에선 inline horizontal stepper (6 dots + 짧은 라벨, 캐러셀 X)
   ~110px 높이 (이전 ~600px+ 2x3 grid 대비 1/5) */
@media (max-width: 767px) {
  .ds-process-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 4px 4px;
  }
  .ds-process-grid > .ds-process-step {
    flex: 1 1 0;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 2px !important;
    background: transparent !important;
    border: 0 !important;
    position: relative;
    min-width: 0;
  }
  .ds-process-grid > .ds-process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 13px;  /* 28px num circle 중앙선 */
    left: calc(50% + 16px);
    right: calc(-50% + 16px);
    height: 1px;
    background: var(--border-base);
    z-index: 0;
  }
  /* icon 자리를 num circle로 swap — icon mi 숨기고 num을 그 자리로 absolute */
  .ds-process-grid > .ds-process-step .ds-process-step__icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    position: relative; z-index: 1;
    display: grid; place-items: center;
    margin-bottom: 0;
  }
  .ds-process-grid > .ds-process-step .ds-process-step__icon .mi { display: none; }

  .ds-process-grid > .ds-process-step .ds-process-step__body {
    align-items: center;
    text-align: center;
    gap: 0;
    flex-direction: column;
  }
  /* num을 icon circle 안에 absolute로 옮기기 */
  .ds-process-grid > .ds-process-step .ds-process-step__num {
    position: absolute;
    top: 6px;  /* circle 중앙 */
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: var(--fw-bk);
    color: var(--fg-base);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    z-index: 2;
    pointer-events: none;
  }
  .ds-process-grid > .ds-process-step .ds-process-step__label {
    font-size: 10px;
    font-weight: var(--fw-bd);
    line-height: 1.2;
    word-break: keep-all;
    color: var(--fg-base);
  }
}

.ds-process-step__icon .mi { font-size: 20px; color: var(--fg-base); }

.ds-tracking-compact__hint .mi { font-size: 14px; color: var(--gray-600); }

/* ==========================================================
   Empty State — 신청 내역 없음
   ========================================================== */
.ds-empty {
  padding: 64px 24px;
  text-align: center;
  background: var(--bg-subtle);
  border-radius: 12px;
  border: 1px dashed var(--border-base);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}

.ds-empty .mi { font-size: 28px; color: var(--fg-faint); }

.ds-pay-method__icon .mi { font-size: 18px; color: inherit; }

.ds-pay-summary__notes .mi {
  font-size: 14px;
  color: var(--fg-faint);
}

@keyframes ds-open-aura {
  0%   { opacity: 0;    transform: scale(0.6); }
  20%  { opacity: 0.5;  transform: scale(1.2); }
  60%  { opacity: 0.25; transform: scale(1.6); }
  100% { opacity: 0.15; transform: scale(1.8); }
}

@keyframes ds-open-pack-in {
  0%   { opacity: 0; transform: scale(0.5) translateY(40px); }
  60%  { opacity: 1; transform: scale(1.06) translateY(-6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes ds-open-pack-shake {
  0%, 100% { transform: scale(1) rotate(0); }
  20%      { transform: scale(1.02) rotate(-2deg); }
  40%      { transform: scale(1.02) rotate(2deg); }
  60%      { transform: scale(1.04) rotate(-1.5deg); }
  80%      { transform: scale(1.04) rotate(1.5deg); }
}

@keyframes ds-open-pack-out {
  0%   { opacity: 1; transform: scale(1); filter: blur(0); }
  60%  { opacity: 0.4; transform: scale(1.4); filter: blur(8px); }
  100% { opacity: 0; transform: scale(2); filter: blur(20px); }
}

@keyframes ds-open-burst {
  0%   { opacity: 0;   transform: scale(0.2); }
  30%  { opacity: 1;   transform: scale(1.5); }
  100% { opacity: 0;   transform: scale(3); }
}

@keyframes ds-open-card-emerge {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ds-open-qty a.is-active { background: var(--gray-0); color: var(--gray-950); }

@keyframes ds-open-value-in {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes ds-open-cta-in {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.ds-open-cta__btn .mi { font-size: 18px; }

.ds-open-skip .mi { font-size: 14px; }

.ds-result-modal__close .mi { font-size: 20px; }

.ds-result-chip .mi { font-size: 22px; color: var(--fg-base); }

.ds-result-modal__footer .ds-btn {
  flex: 1 1 0;
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

.ds-result-modal__footer .ds-btn .mi { font-size: 16px; margin-right: 4px; }

.ds-result-action__icon .mi { font-size: 20px; color: inherit; }

.ds-result-footer__btn .mi { font-size: 18px; }

.ds-result-receipt__head .mi {
  font-size: 18px; color: var(--fg-muted);
  transition: transform var(--t-fast) ease-out;
}

.ds-result-receipt[open] .ds-result-receipt__head .mi { transform: rotate(180deg); }

.ds-coll-card__amount {
  font-size: 16px;  /* 카드 thumbnail price 통일 (.ds-listing__price와 동일) */
  font-weight: var(--fw-bd);
  font-variant-numeric: tabular-nums;
}

.ds-coll-card__value-unit {
  font-size: 12px; font-weight: var(--fw-rg); color: var(--fg-muted);
}

.ds-coll-cta__btn .mi { font-size: 18px; }

/* v0.7: 모바일/태블릿 — 카드 art를 먼저 보여주고 (above-fold) info는 아래
   art container는 viewport width fill (양옆 16px 마진), 안에서 카드 이미지는 5:7 비율로 중앙 fit
   (order는 위 블록에서 BP별로 분기 — tablet: main/listings/info, mobile: main/info/listings) */
@media (max-width: 1023px) {
  .market-detail-grid__main .ds-market-art {
    align-items: stretch;  /* container가 vw fill 하도록 */
  }
  .market-detail-grid__main .ds-market-art__inner {
    aspect-ratio: auto;
    width: 100%;
    height: 50vh;                  /* 명시적 height — IMG max-height 계산 가능 */
    min-height: 320px;
    max-height: 50vh;
    margin-inline: 0;
    padding: 16px;
    background: var(--gray-100);
    overflow: hidden;              /* IMG가 절대 container 밖으로 나가지 않도록 */
  }
  /* 카드 이미지: container 안에서 5:7 비율 유지, 풀 노출 (NO-CROP) */
  .market-detail-grid__main .ds-market-art__inner img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 auto !important;
    display: block !important;
  }
  .market-detail-grid__main .ds-market-art__thumbs {
    display: none;
  }
  .ds-market-info__name {
    font-size: var(--fs-h4) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.012em !important;
  }
  .ds-market-info__price-amount {
    font-size: 28px !important;
  }
}

.ds-market-art__thumb.is-active {
  border-color: var(--gray-950); border-width: 2px;
}

:root[data-theme="dark"] .ds-market-art__thumb.is-active { border-color: var(--gray-50); }

.ds-market-art__nav .mi { font-size: 22px; }

.ds-market-art__zoom-btn .mi { font-size: 18px; }

/* Zoom lightbox */
.ds-zoom-lightbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}

.ds-zoom-lightbox.is-open { display: flex; }

.ds-zoom-lightbox__close .mi { font-size: 22px; }

.ds-zoom-lightbox__nav .mi { font-size: 26px; }

.ds-market-badge .mi { font-size: 14px; }

.ds-card-in-pack__cta .mi { font-size: 14px; }

.ds-market-info__price-amount {
  font-size: 36px; font-weight: var(--fw-bd);  /* v0.6: bk → bd (max 600) */
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.024em; line-height: 1;
  display: inline-flex; align-items: baseline; gap: 8px;
}

/* v0.7 T2: dual mode — P main 옆 작은 통화 환산 */
.ds-kado-fiat-sub {
  font-size: 13px; font-weight: var(--fw-md);
  color: var(--fg-muted); letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.ds-market-info__seller-verified .mi { font-size: 14px; }

.ds-market-info__actions .ds-btn {
  /* size 통일 (.ds-pack-cta 등 다른 컴포넌트 override 무력화) */
  width: 100% !important;
  height: 52px !important;
  padding: 0 16px !important;
  font-size: var(--fs-body-sm) !important;  /* 14px — 양 버튼 동일 */
  font-weight: var(--fw-bd) !important;     /* 600 (max 600 룰) */
  letter-spacing: -0.005em !important;
  /* center 정렬 보장 */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1 !important;
  min-width: 0 !important;
  text-align: center !important;
}

.ds-market-info__actions .ds-btn .mi { font-size: 16px; }

.ds-market-info__notes .mi {
  font-size: 14px; color: var(--fg-faint);
}

.ds-market-pay-seller__badge .mi { font-size: 13px; }

.ds-market-pay-seller__check-row .mi {
  font-size: 16px;
  color: var(--gray-600);
  font-variation-settings: 'FILL' 1;
}

.ds-market-pay-address__box .ds-btn {
  align-self: flex-start;
  margin-top: 4px;
}

.ds-wallet-hero__amount {
  font-size: 44px; font-weight: var(--fw-bk);
  letter-spacing: -0.026em; line-height: 1;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  margin: 4px 0;
  color: var(--fg-base);
}

.ds-wallet-hero__amount small {
  font-size: var(--fs-h4); color: var(--fg-muted);
  font-weight: var(--fw-md); margin-left: 4px;
}

.ds-wallet-hero__btn .mi { font-size: 18px; }

.ds-wallet-flow__label .mi { font-size: 14px; }

.ds-wallet-tx__download .mi { font-size: 14px; }

/* v0.7 S5: 모바일에선 텍스트 숨기고 icon만 (data export는 desktop 친화 액션) */
@media (max-width: 767px) {
  .ds-wallet-tx__download {
    width: 36px; height: 36px;
    padding: 0;
    justify-content: center;
    font-size: 0;  /* 텍스트 숨김 */
    gap: 0;
  }
  .ds-wallet-tx__download .mi { font-size: 18px; }
}

.ds-wallet-tx__icon .mi { font-size: 18px; color: inherit; }

.ds-wallet-tx__more .mi { font-size: 18px; }

.ds-charge-payment .ds-modal__head {
  align-items: flex-start;
  flex-shrink: 0;
  margin: 0;
  padding: 48px 48px 18px;
  position: relative;
}

.ds-charge-payment .ds-modal__close {
  top: 40px;
  right: 40px;
}

.ds-charge-payment__actions .ds-btn {
  height: 52px;
}

@media (max-width: 599px) {
  .ds-charge-payment {
    width: min(100vw - 20px, 520px);
    max-height: 92vh;
    padding: 0;
  }
  .ds-charge-payment .ds-modal__head {
    padding: 28px 18px 14px;
  }
  .ds-charge-payment .ds-modal__close {
    top: 16px;
    right: 14px;
  }
  .ds-charge-payment__body {
    margin-right: 6px;
    padding: 0 12px 14px 18px;
  }
  .ds-charge-payment__method {
    grid-template-columns: 48px minmax(0, 1fr) 20px;
    min-height: 72px;
    padding: 14px;
  }
  .ds-charge-payment__actions {
    grid-template-columns: 1fr;
    padding: 16px 18px max(18px, env(safe-area-inset-bottom));
  }
}

.ds-grading-header .ds-btn {
  display: inline-flex !important;
  align-items: center !important; gap: 6px !important;
  height: 48px !important; padding: 0 22px !important;
}

.ds-grading-header .ds-btn .mi { font-size: 18px; }

.ds-grading-category.is-active {
  background: var(--gray-950); color: var(--gray-0);
  border-color: var(--gray-950);
}

:root[data-theme="dark"] .ds-grading-category.is-active { background: var(--gray-50); color: var(--gray-950); border-color: var(--gray-50); }

.ds-grading-category.is-active .ds-grading-category__icon {
  background: rgba(255,255,255,0.12);
}

:root[data-theme="dark"] .ds-grading-category.is-active .ds-grading-category__icon {
  background: rgba(0,0,0,0.10);
}

.ds-grading-category.is-active .ds-grading-category__count { color: rgba(255,255,255,0.7); }

:root[data-theme="dark"] .ds-grading-category.is-active .ds-grading-category__count { color: rgba(0,0,0,0.55); }

.ds-grading-item__chip .mi { font-size: 14px; }

.ds-grading-item__chip[data-status="done"] .mi { font-variation-settings: 'FILL' 1; }

.ds-grading-timeline__step.is-done .ds-grading-timeline__dot .mi {
  color: white; font-size: 14px;
}

.ds-grading-guide__hint .mi { font-size: 14px; }

.ds-grading-item__note .mi { font-size: 16px; color: var(--fg-muted); }

.ds-grading-result__arrow .mi { font-size: 24px; }

.ds-grading-help__title .mi {
  font-size: 16px; color: var(--fg-muted);
  font-variation-settings: 'FILL' 1;
}

.ds-settings-nav a.is-active {
  background: var(--gray-950); color: var(--gray-0);
}

:root[data-theme="dark"] .ds-settings-nav a.is-active {
  background: var(--gray-50); color: var(--gray-950);
}

.ds-settings-nav a .mi { font-size: 18px; }

/* Avatar */
.ds-settings-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gray-950);
  color: var(--gray-0);
  display: grid; place-items: center;
  font-size: 16px; font-weight: var(--fw-bk);
}

/* ==========================================================
   === DROPDOWN === Custom select (시스템 select 대체 — 디자인 일관성)
   사용:
     <div class="ds-dropdown" data-value="recent">
       <button class="ds-dropdown__trigger">...</button>
       <ul class="ds-dropdown__menu" role="listbox">
         <li class="ds-dropdown__option is-selected" data-value="recent">...</li>
       </ul>
     </div>
   JS: trigger 클릭 시 .is-open 토글, option 클릭 시 selection 변경
   ========================================================== */
.ds-dropdown {
  position: relative;
  display: inline-block;
}

.ds-dropdown.is-open .ds-dropdown__chev { transform: rotate(180deg); }

/* dropdown이 열리면 부모 stacking context도 위로 끌어올림 */
.ds-dropdown.is-open { z-index: 9999; position: relative; }

.ds-dropdown.is-open .ds-dropdown__menu { display: block; }

.ds-dropdown__option.is-selected {
  background: var(--bg-subtle);
  font-weight: var(--fw-bk);
}

.ds-dropdown__option.is-selected::after {
  content: '';
  width: 6px; height: 10px;
  border-right: 2px solid var(--fg-base);
  border-bottom: 2px solid var(--fg-base);
  transform: rotate(45deg);
  margin-bottom: 2px;
}

/* ==========================================================
   === STATES === Empty / Loading / Error
   사용:
     <body data-state="empty"|"loading"|"error">
     ?state=empty 같은 URL param으로 토글 (각 페이지 JS에서 처리)
     일반 상태는 data-state 없음 (default)
   ========================================================== */

/* 기본 .ds-empty는 위 2641 line에 정의돼 있음 — 확장 사용 */
.ds-empty__icon-ball {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-card);
  border-radius: 50%;
  color: var(--fg-muted);
  margin-bottom: 4px;
}

.ds-empty__icon-ball .mi { font-size: 28px; }

.ds-empty__title {
  font-size: 18px; font-weight: var(--fw-bk);
  color: var(--fg-base);
  letter-spacing: -0.012em;
  margin: 0;
}

.ds-empty__sub {
  font-size: var(--fs-body-sm);
  color: var(--fg-muted);
  margin: 0;
  max-width: 360px;
  line-height: 1.5;
}

.ds-error-block__icon .mi { font-size: 28px; }

/* === Skeleton (loading shimmer) ===
   Light-mode tokens (--bg-subtle = gray-50, --bg-muted = gray-100) sit too
   close to white on .ds-mypage-hero's white card surface, making the
   skeleton bars effectively invisible. Use gray-200/gray-100 so the bars
   are tangible without becoming heavy. Dark mode keeps the token-driven
   gradient since gray-900/800 already contrast their surface. */
.ds-skeleton {
  background: linear-gradient(
    90deg,
    var(--gray-200) 0%,
    var(--gray-100) 50%,
    var(--gray-200) 100%
  );
  background-size: 200% 100%;
  animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
  display: block;
}

:root[data-theme="dark"] .ds-skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-subtle) 0%,
    var(--bg-muted, var(--bg-card)) 50%,
    var(--bg-subtle) 100%
  );
  background-size: 200% 100%;
}

@keyframes ds-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ds-market-info__price-amount .ds-card-detail-skeleton-line,
.ds-card-value__amount .ds-card-detail-skeleton-line,
.ds-offer-cardview__price-amount .ds-card-detail-skeleton-line {
  display: inline-block;
}

.ds-card-art__face.is-loading,
.ds-market-art__inner.is-loading,
.ds-market-art__thumb.is-loading,
.ds-offer-cardview__image.is-loading,
.ds-card-zoom__viewport.is-loading,
.ds-market-listing__thumb.is-loading {
  position: relative;
}

.ds-card-art__face.is-loading::before,
.ds-market-art__inner.is-loading::before,
.ds-market-art__thumb.is-loading::before,
.ds-offer-cardview__image.is-loading::before,
.ds-card-zoom__viewport.is-loading::before,
.ds-market-listing__thumb.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--bg-muted, var(--gray-100)) 48%, var(--bg-subtle) 100%);
  background-size: 200% 100%;
  animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
  z-index: 2;
}

.ds-card-art__face.is-loading img,
.ds-market-art__inner.is-loading img,
.ds-market-art__thumb.is-loading img,
.ds-offer-cardview__image.is-loading img,
.ds-card-zoom__viewport.is-loading img,
.ds-market-listing__thumb.is-loading img,
img[data-live-image-pending="true"] {
  opacity: 0 !important;
}

.ds-market-art__inner.is-loading .ds-market-art__nav,
.ds-market-art__inner.is-loading .ds-market-art__zoom-btn,
.ds-card-art__face.is-loading .ds-card-art__fallback {
  display: none !important;
}

/* Hide all decorative chrome during skeleton so the cell renders as a clean
   image-area shimmer + two text bars. The chip/label show colored chrome
   (green --mystic-300 background) that distracts from the loading state. */
.is-live-skeleton .ds-mosaic-cell__label,
.is-live-skeleton .ds-mosaic-cell__limited-chip,
.is-live-skeleton .ds-mosaic-cell__price-unit,
.is-live-skeleton .ds-mosaic-cell__stock {
  display: none !important;
}

/* === State toggle rules ===
   - 기본(.ds-empty / .ds-error-block / [data-skeleton])는 hidden
   - body[data-state="..."] 시 해당 블록만 visible + 일반 콘텐츠는 .state-hide로 hide */
.ds-empty,
.ds-error-block,
[data-skeleton] { display: none; }

body[data-state="empty"]   .ds-empty        { display: flex; }

body[data-state="loading"] [data-skeleton]  { display: block; }

.ds-state-toggle a.is-active {
  background: var(--gray-950); color: var(--gray-0);
}

.ds-card-art__side-btn.is-active {
  background: var(--gray-100);
  color: var(--fg-base);
  border-color: var(--gray-950);
  border-width: 2px;
}

:root[data-theme="dark"] .ds-card-art__side-btn.is-active {
  background: var(--gray-800);
  color: var(--gray-950);
  border-color: var(--gray-50);
}

.ds-card-art__zoom .mi { font-size: 18px; }

.ds-card-art__face.is-active {
  opacity: 1;
  pointer-events: auto;
}

.ds-card-art__fallback .mi { font-size: 48px; color: var(--fg-faint); }

.ds-card-art__pin:hover,
.ds-card-art__pin.is-active {
  background: var(--gray-700);
  border-color: var(--gray-0);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.25), 0 2px 8px rgba(0,0,0,0.3);
}

.ds-magnifier.is-visible { opacity: 1; }

.ds-card-grade__cert .mi {
  position: absolute; top: 10px; right: 10px;
  font-size: 14px; color: var(--fg-muted);
}

.ds-card-value__delta .mi { font-size: 16px; }

.ds-card-cta__primary .mi { font-size: 20px; }

.ds-card-cta__secondary .mi {
  font-size: 22px;
  color: var(--fg-base);
}

.ds-card-info__row dd a .mi { font-size: 14px; opacity: 0.6; }

/* ==========================================================
   === CARD-ZOOM === (모달 + pan/zoom 인터랙션)
   롤백: 이 섹션 통째로 삭제 + card-detail.html 안 #cardZoom 마크업 삭제
   ========================================================== */
.ds-card-zoom {
  position: fixed; inset: 0;
  z-index: 200;
  background: rgba(8, 9, 12, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  flex-direction: column;
  color: var(--gray-0);
}

.ds-card-zoom.is-open { display: flex; }

.ds-card-zoom__close .mi { font-size: 22px; }

.ds-card-zoom__hint .mi { font-size: 16px; }

.ds-card-zoom__ctrl .mi { font-size: 20px; }

.ds-password-field__toggle .mi {
  font-size: 20px;
  line-height: 1;
}

);
   마크업은 JS가 .ds-toast 동적 생성. */
.ds-toast {
  position: fixed;
  /* 모달 위에 떠야 함 — overlay(200), dropdown(9999) 위 */
  z-index: 99999;
  right: 24px; bottom: 24px;
  min-width: 260px; max-width: 360px;
  background: var(--gray-950);
  color: var(--gray-0);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
  font-size: var(--fs-body-sm); font-weight: var(--fw-md);
  box-shadow: var(--shadow-3);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.22s var(--ease-emp), opacity 0.22s ease-out;
}

.ds-toast.is-visible { transform: translateY(0); opacity: 1; }

:root[data-theme="dark"] .ds-toast {
  background: var(--gray-50); color: var(--gray-950);
}

.ds-toast__icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  display: grid; place-items: center;
}

.ds-toast__msg { flex: 1; line-height: 1.4; }

@media (max-width: 599px) {
  .ds-toast { right: 12px; left: 12px; bottom: 88px; min-width: 0; max-width: none; }
}

@keyframes ds-auth-spin {
  to { transform: rotate(360deg); }
}

.ds-seller-hero__badge .mi { font-size: 14px; }

.ds-networth__range-btn.is-active {
  background: var(--bg-card);
  color: var(--fg-base);
  box-shadow: var(--shadow-1);
}

.ds-wizard__resend .mi { font-size: 14px; }

.ds-ebay-photo .mi { font-size: 24px; color: var(--fg-muted); }

.ds-detected-card__hint .mi { font-size: 16px; color: var(--mystic-500, var(--fg-base)); }

.ds-fee-note .mi { font-size: 16px; color: var(--fg-muted); flex-shrink: 0; margin-top: 1px; }

/* hidden attribute가 display:flex보다 우선되도록 */
.ds-btn[hidden] { display: none !important; }

.ds-ebay-receipt__schedule .mi { font-size: 18px; color: var(--fg-muted); }

.ds-calendar__trigger > .mi:first-child { font-size: 18px; color: var(--fg-muted); }

.ds-calendar.is-open .ds-calendar__chev { transform: rotate(180deg); }

.ds-calendar__clear .mi { font-size: 14px; }

.ds-calendar.is-open { z-index: 9999; }

.ds-calendar.is-open .ds-calendar__popup { display: block; }

.ds-calendar__nav .mi { font-size: 18px; }

.ds-calendar__day:hover:not(:disabled):not(.is-selected) { background: var(--bg-subtle); }

.ds-calendar__day[data-weekday="0"]:not(.is-selected):not([data-out="true"]) { color: var(--danger-600); }

.ds-calendar__day[data-weekday="6"]:not(.is-selected):not([data-out="true"]) { color: var(--rare-700, #b73828); }

.ds-calendar__day.is-today:not(.is-selected) {
  font-weight: var(--fw-bk);
  box-shadow: inset 0 0 0 1.5px var(--gray-950);
}

:root[data-theme="dark"] .ds-calendar__day.is-today:not(.is-selected) {
  box-shadow: inset 0 0 0 1.5px var(--gray-50);
}

.ds-calendar__day.is-selected {
  background: var(--gray-950);
  color: var(--gray-0);
  font-weight: var(--fw-bk);
}

:root[data-theme="dark"] .ds-calendar__day.is-selected {
  background: var(--mystic-300);
  color: var(--gray-950);
}

.ds-app-row__copy .mi { font-size: 14px; }

.ds-app-empty__icon .mi { font-size: 24px; }

.ds-live-loading .ds-empty__icon-ball,
.is-live-loading .ds-mosaic-cell__visual {
  animation: ds-live-loading-pulse 1.3s ease-in-out infinite;
}

@keyframes ds-live-loading-pulse {
  0%, 100% { opacity: 0.58; }
  50% { opacity: 1; }
}

/* ==================================================================
   📱 MOBILE APP SHELL — v0.6 (2026-05-04)
   ----------------------------------------
   '데스크톱 grid 압축' 느낌을 제거하고 실제 모바일 앱 GUI 패턴 적용:
   · slim chrome (GNB 52px, FAB 제거, footer 미니멀)
   · horizontal snap rails (inv / listing / mosaic)
   · vertical featured hero (4:5 비례, mobile impact)
   · section title 20px / chevron-only link
   · safe-area-inset 지원
   ----------------------------------------
   적용 BP: <= 767px 단일.
   - 기존 모바일 룰들과 일부 충돌하므로 specificity 높여 cascade override.
   ================================================================== */
@media (max-width: 767px) {

  /* ────────────── A. App shell ────────────── */

  /* GNB slim — 56px → 52px, 콤팩트 inner */
  :root { --gnb-h: 52px; }
  /* iOS 네이티브 앱 (viewport-fit=cover) 에서 status bar 영역이 투명해
     뒤 컨텐츠가 비쳤음. GNB 의 배경을 불투명 + safe-area-inset-top 만큼
     padding 위로 확장해 상태바 뒷쪽도 흰색으로 덮음. height 도 동일 폭만큼
     증가 → 컨텐츠는 자동으로 한 칸 더 아래로 시작. */
  .ds-gnb {
    background: var(--bg-base);
    padding-top: env(safe-area-inset-top);
    height: calc(var(--gnb-h) + env(safe-area-inset-top));
    /* 일부 WKWebView 에서 padding 영역에 backdrop-filter 가 적용되어 반투명으로
       보이던 회귀 차단. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* GNB padding 으로도 안 가려지는 환경 fallback — body 가장 위쪽 safe-area-inset-top
     높이만큼을 흰 fixed 띠로 덮음. GNB sticky 가 viewport 끝까지 안 닿는
     iOS WKWebView 케이스 대응. */
  body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: env(safe-area-inset-top);
    background: var(--bg-base);
    z-index: 60;
    pointer-events: none;
  }
  .ds-gnb__logo svg { width: 72px; }
  .ds-gnb__inner { padding-inline: 16px; gap: 12px; }
  .ds-gnb__right { gap: 16px; }
  .ds-gnb__icons { grid-template-columns: max-content; }
  /* 로그인 버튼/잔액 chip 콤팩트 */
  .ds-gnb__user {
    min-width: 0;
    padding: 4px 6px 4px 12px !important;
    gap: 6px !important;
    height: 36px !important;
  }
  .ds-gnb__balance { min-width: 0; font-size: 14px; }
  .ds-gnb__balance small { font-size: 12px; margin-left: 1px; }
  .ds-gnb__avatar { width: 28px; height: 28px; font-size: 12px; }
  .ds-gnb__icon-btn { width: 32px; height: 32px; }
  .ds-gnb__icon-btn .mi { font-size: 18px; }

  /* FAB '충전' 모바일에서 제거 — 탭바 + 헤더 잔액 chip으로 대체.
     wallet은 my페이지/잔액 chip 탭으로 진입. */
  .ds-fab { display: none !important; }

  /* main 하단 padding — tabbar(60px + safe-area) 위로 콘텐츠 안 가리도록 */
  main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* container 좌우 패딩 16px 강제 */
  .container { padding-inline: 16px; }


  /* ────────────── B. Section rhythm — 20px / 600 / chevron link ────────────── */

  .section { padding-block: 20px; }
  .section--xl { padding-block: 28px; }

  .section-head {
    margin-bottom: 14px;
    align-items: center;
  }
  .section-head__title h2 {
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-weight: var(--fw-bk);
  }

  /* link-more (전체 가챠 →) → chevron-only icon */
  .link-more {
    font-size: 0 !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--fg-muted) !important;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-pill);
    flex-shrink: 0;
  }
  .link-more::after {
    content: 'chevron_right';
    font-family: 'Material Symbols Outlined';
    font-size: 24px;
    font-weight: 400;
    font-variation-settings: 'FILL' 0, 'wght' 400;
    line-height: 1;
  }
  .link-more:hover { color: var(--fg-base) !important; }


  /* ────────────── C. Promo carousel — 모바일 박스 (이미지 비율 그대로) ────────────── */

  /* v1: 박스 스타일 — margin 유지, 라운드 12px, 이미지 비율 그대로 (1440×640 ≈ 2.25:1) */
  .ds-promo {
    margin-inline: 0 !important;
    border-radius: 12px !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .ds-promo__track {
    border-radius: 12px !important;
    aspect-ratio: 1440 / 640 !important;
    height: auto !important;
  }
  .ds-promo__dots {
    bottom: 10px !important;
    z-index: 4;
  }
  /* v0.7: 모바일에서도 좌우 화살표 항상 표시 (작게) */
  .ds-promo__nav {
    display: grid !important;
    width: 28px !important; height: 28px !important;
    opacity: 1 !important;
    background: rgba(255,255,255,0.92) !important;
  }
  .ds-promo__nav .mi { font-size: 16px !important; }
  .ds-promo__nav--prev { left: 8px !important; }
  .ds-promo__nav--next { right: 8px !important; }
  /* hint text 사이즈 다운 */
  .ds-promo__hint { font-size: 14px !important; }
  .ds-promo__hint-sub { font-size: 10px !important; letter-spacing: 0.06em; }


  /* ────────────── D. Hero mosaic → 모바일 재구성 ────────────── */
  /* 레이아웃:
     Row 1: [Featured (vertical, col 1, span 2 rows)] [Thumb 1 (col 2)]
     Row 2: [Featured continues]                      [Thumb 2 (col 2)]
     Row 3: [Limited 1 (col 1)] [Limited 2 (col 2)]
     hide-mobile 셀 (Brand 3, Limited 3) 숨김 */
  .hero-mosaic {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
  }
  /* v2: Featured 모바일 — vertical poster (좌측 col 1, 2-row span) */
  .hero-mosaic > .ds-feature {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    background-image: url('/kado-design/assets/banners/banner_vertical-1.webp') !important;
  }
  /* Featured 내부 타이포 모바일 사이즈 — 컴팩트 hero 정합 */
  .ds-feature__name {
    font-size: 18px !important;       /* 26 → 18 (slim hero) */
    max-width: 60% !important;
    letter-spacing: -0.018em;
    line-height: 1.2;
  }
  .ds-feature__price { font-size: 18px !important; }
  .ds-feature__price-unit { font-size: 11px !important; }
  .ds-feature__cta { font-size: 12px !important; }
  /* visual: 2:1에 맞게 우측에 정사각 비례 영역 */
  .ds-feature__visual {
    width: 50% !important;
    right: -5% !important;
    bottom: -10% !important;
    aspect-ratio: 1 / 1 !important;
  }
  .ds-feature__bottom { gap: 6px !important; }

  /* mosaic-cell — 2-col grid, square pack visual + 짧은 정보 */
  .ds-mosaic-cell { border-radius: 12px; }
  .ds-mosaic-cell__body { padding: 10px 12px 12px !important; gap: 4px !important; }
  .ds-mosaic-cell__name { font-size: 13px !important; }
  .ds-mosaic-cell__price-amount { font-size: 13px !important; }
  .ds-mosaic-cell__price-unit { font-size: 11px !important; }
  .ds-mosaic-cell__label { font-size: 9px !important; letter-spacing: 0.05em; }
  /* limited cell: deck visual 좀 작게 */
  .ds-mosaic-cell__visual--deck { padding: 10px !important; gap: 8px !important; }
  .ds-mosaic-cell__hero-card { width: 42% !important; }
  .ds-mosaic-cell__deck > span { width: 100% !important; }
  .ds-mosaic-cell__limited-chip {
    font-size: 9px !important;
    padding: 3px 7px !important;
    top: 8px !important; left: 8px !important;
    right: auto !important; /* hug content (PC base의 right override) */
    width: auto !important;
    display: inline-flex !important;
  }
  .ds-mosaic-cell__stock { font-size: 10px !important; }


  /* ────────────── E. inv-grid (방금 뽑힌 카드) → horizontal snap rail ────────────── */

  .inv-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    /* edge-to-edge */
    margin-inline: -16px;
    padding: 0 16px 4px;
    /* smooth touch scrolling */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .inv-grid::-webkit-scrollbar { display: none; }
  .inv-grid > .ds-inv {
    flex: 0 0 156px !important;
    scroll-snap-align: start;
    width: auto !important;
  }
  .inv-grid > .ds-home-recent-empty {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    scroll-snap-align: start;
    padding: 56px 20px;
  }


  /* ────────────── F. listing-grid (지금 거래되는 카드) → horizontal snap rail ────────────── */

  /* Scope: data-mobile-cap이 있는 grid (홈 teaser)에만 rail.
     marketplace · seller-profile 같은 dedicated browse는 2-col grid 유지. */
  .listing-grid[data-mobile-cap] {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    margin-inline: -16px;
    padding: 0 16px 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .listing-grid[data-mobile-cap]::-webkit-scrollbar { display: none; }
  .listing-grid[data-mobile-cap] > .ds-listing {
    flex: 0 0 156px !important;
    scroll-snap-align: start;
    width: auto !important;
  }
  /* mobile-cap으로 숨겨놓던 4번째+ 항목 다시 보이게 — snap rail로 모두 표시 */
  .listing-grid[data-mobile-cap="3"] > .ds-listing:nth-child(n+4) { display: flex !important; }
  .listing-grid[data-mobile-cap="6"] > .ds-listing:nth-child(n+7) { display: flex !important; }

  /* dedicated browse: 2-col grid (765-> 기존 3-col 룰을 override) */
  .listing-grid:not([data-mobile-cap]) {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }


  /* ────────────── G. service-grid (더 알아보기) → 컴팩트 list cell ────────────── */

  .service-grid { gap: 10px !important; }
  .ds-service-card {
    aspect-ratio: auto !important;
    min-height: 96px !important;
    padding: 16px 18px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px;
    border-radius: 12px;
  }
  .ds-service-card > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }
  .ds-service-card__title { font-size: 15px !important; margin-bottom: 4px !important; }
  .ds-service-card__desc {
    font-size: 12px !important; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0 !important;
  }
  .ds-service-card__cta {
    margin-top: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    border: none !important;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--fg-muted) !important;
    flex-shrink: 0;
  }
  .ds-service-card__cta .mi { font-size: 22px !important; }
  /* decor 큰 아이콘 (verified/language/campaign) — 모바일은 숨김 (서비스 카드 row가 콤팩트해서 공간 없음) */
  .ds-service-card__decor { display: none !important; }


  /* ────────────── H. Footer minimal — brand + legal essentials only ────────────── */

  .ds-footer { padding: 24px 0 16px !important; margin-top: 12px; }
  .ds-footer__top {
    flex-direction: column !important;
    gap: 16px !important;
    padding-bottom: 16px !important;
  }
  .ds-footer__brand p {
    font-size: 12px !important;
    line-height: 1.55;
  }
  .ds-footer__logo { width: 56px !important; }

  /* 다중 col 링크 (SERVICE/SUPPORT/LEGAL) 모바일 숨김 — 탭바와 중복 */
  .ds-footer__cols { display: none !important; }

  /* legal 작게 */
  .ds-footer__legal-line {
    font-size: 10px !important;
    line-height: 1.55;
    margin-bottom: 4px !important;
  }
  .ds-footer__disclaimer {
    font-size: 10px !important;
    line-height: 1.5;
  }
  .ds-footer__bottom {
    padding-top: 12px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .ds-footer__bottom > span:first-child { font-size: 10px !important; }


  /* ────────────── I. Cap mobile-cap removal for inv (display all 6) ────────────── */

  .inv-grid > .ds-inv:nth-child(n+7) { display: flex !important; }


  /* ────────────── J. ds-inv card 내부 모바일 polish ────────────── */

  /* 156px 너비 카드 안에서 정보 잘 보이도록 */
  .ds-inv__name { font-size: 13px !important; }
  .ds-inv__meta { font-size: 10px !important; }
  .ds-inv__price { font-size: 13px !important; }
  .ds-inv__price-unit { font-size: 11px !important; }
  .ds-inv__offer { font-size: 11px !important; padding: 4px 8px !important; }


  /* ────────────── K. ds-listing card 내부 모바일 polish ────────────── */

  .ds-listing__name { font-size: 13px !important; }
  .ds-listing__sub { font-size: 10px !important; }
  .ds-listing__price { font-size: 13px !important; }
  .ds-listing__currency { font-size: 11px !important; }


  /* ────────────── L. Section padding 일괄 — 페이지 분기 ────────────── */

  /* 기본: 모든 페이지의 첫 섹션은 GNB와 적당한 간격 유지 (제목/본문 가독성) */
  main > .container > section.section:first-of-type {
    padding-top: 16px !important;
  }
  /* HOME 예외: promo 캐러셀이 있는 첫 섹션은 GNB 바로 밑 풀블리드 (배너 디자인 의도) */
  main > .container > section.section:first-of-type:has(.ds-promo) {
    padding-top: 0 !important;
  }


  /* ────────────── M. Tabbar 폴리시 — safe-area & active state ────────────── */

  .ds-mobile-tabs {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(60px + env(safe-area-inset-bottom));
  }
  /* 사장 요청 정정 — 탭바 자체는 원래 크기 유지, 밑의 home indicator 여백만 보강.
     padding-bottom 은 base 의 .ds-mobile-tabs 에 max(safe-area, 8px) 로 이미
     걸려 있고, 추가로 inner content 높이도 60px 유지. */
  .ds-mobile-tabs__inner { height: 60px; }
  .ds-mobile-tabs__item { padding: 8px 0 !important; gap: 3px !important; }
  .ds-mobile-tabs__item .mi { font-size: 22px; }
  .ds-mobile-tabs__item { font-size: 9px !important; letter-spacing: 0.04em; }


  /* ────────────── N. Theme toggle button 모바일 — GNB 영역 안에 정합 ────────────── */

  /* GNB 안의 theme toggle 36→32 */
  .ds-gnb .theme-toggle,
  .ds-gnb__icon-btn[id="themeToggle"] {
    width: 32px; height: 32px;
  }
}

@keyframes ds-404-card-enter {
  0% {
    transform: rotate(0deg) translateX(0) translateY(8px) scale(0.92);
    opacity: 0;
  }
  100% {
    transform: rotate(var(--target-rotate)) translateX(var(--target-x));
    opacity: var(--target-opacity);
  }
}

@keyframes ds-404-code-pop {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ==========================================================
   Avatar Presets (v0.7) — KADO 팔레트 (gray + mystic) + 평행사변형 패턴
   비주얼만 (size는 부모 element에서 상속/유지)
   ========================================================== */
.ds-avatar-preset {
  position: relative;
  border-radius: 50%;
  display: grid; place-items: center;
  overflow: hidden;
  color: rgba(255,255,255,0.95);
  font-weight: var(--fw-bk);
}

/* mid gray */

/* 평행사변형 패턴 — 두 sets of skewed lines crossing for rhomboid feel */
.ds-avatar-preset::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(120deg,
      transparent 0 14px,
      rgba(255,255,255,0.10) 14px 16px,
      transparent 16px 28px),
    repeating-linear-gradient(60deg,
      transparent 0 18px,
      rgba(255,255,255,0.06) 18px 19px);
  pointer-events: none;
  mix-blend-mode: overlay;
}

.ds-avatar-modal__presets-grid .ds-avatar-preset {
  aspect-ratio: 1; border: none; cursor: pointer; padding: 0;
  font-family: inherit;
  transition: transform var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}

.ds-avatar-modal__presets-grid .ds-avatar-preset:hover {
  transform: scale(1.06);
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}

.ds-avatar-modal__presets-grid .ds-avatar-preset[aria-pressed="true"] {
  outline: 3px solid var(--mystic-500, #38a169);
  outline-offset: 2px;
}

/* ============================================================
   Doc Page (placeholder — 약관/정책/안내/가이드 페이지 공용)
   v0.8: 클라이언트 콘텐츠 들어오기 전 base layout 확보
   ============================================================ */
.ds-doc-page {
  max-width: 720px;
  margin: 0 auto;
  padding-block: 32px 96px;
}

.ds-doc-page__head {
  border-bottom: 1px solid var(--border-base);
  padding-bottom: 24px;
  margin-bottom: 32px;
}

.ds-doc-page__eyebrow {
  display: inline-block;
  font-size: var(--fs-caption-sm);
  font-weight: var(--fw-bd);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.ds-doc-page__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bk);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--fg-base);
}

.ds-doc-page__sub {
  font-size: var(--fs-body-md);
  color: var(--fg-muted);
  margin: 0;
  line-height: 1.5;
}

.ds-doc-page__body {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.ds-doc-empty .mi { font-size: 32px; color: var(--fg-faint); display: block; margin-bottom: 8px; }

.ds-doc-notice__pin .mi {
  font-size: 14px;
}

/* Inquiry form (1:1 문의 / 제휴) */
.ds-doc-form { display: flex; flex-direction: column; gap: 18px; }

.ds-doc-form__field { display: flex; flex-direction: column; gap: 6px; }

.ds-doc-form__label {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bd);
  color: var(--fg-base);
}

.ds-doc-form__input,
.ds-doc-form__textarea,
.ds-doc-form__select {
  width: 100%;
  font: inherit;
  font-size: var(--fs-body-md);
  color: var(--fg-base);
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: 10px;
  transition: var(--t-fast) ease-out;
}

.ds-doc-form__textarea { min-height: 140px; resize: vertical; line-height: 1.5; }

.ds-doc-form__input:focus,
.ds-doc-form__textarea:focus,
.ds-doc-form__select:focus {
  outline: none;
  border-color: var(--gray-950);
}

:root[data-theme="dark"] .ds-doc-form__input:focus,
:root[data-theme="dark"] .ds-doc-form__textarea:focus,
:root[data-theme="dark"] .ds-doc-form__select:focus { border-color: var(--gray-50); }

.ds-doc-form__hint {
  font-size: var(--fs-caption-sm);
  color: var(--fg-muted);
}

.ds-doc-form__actions {
  display: flex; gap: 10px; margin-top: 8px;
}

@media (max-width: 767px) {
  .ds-doc-page { padding-block: 24px 64px; }
  .ds-doc-page__title { font-size: var(--fs-h3); }
  .ds-doc-page__head { padding-bottom: 20px; margin-bottom: 24px; }
  .ds-doc-page__body { gap: 28px; }
}

/* ============================================================
   v0.8 사용자 아바타 — 전역 동기화 (avatar.js + placeholder)
   ============================================================ */
/* 이미지 또는 placeholder 적용 시 letter/text 숨김 */
.ds-gnb__avatar[data-has-image],
.ds-gnb__avatar[data-placeholder] { color: transparent; font-size: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }

.ds-profile__avatar[data-has-image] .ds-profile__avatar-letter,
.ds-profile__avatar[data-placeholder] .ds-profile__avatar-letter { display: none; }

.ds-profile__avatar[data-placeholder] { background-size: cover; background-position: center; background-repeat: no-repeat; }

.ds-avatar-modal__circle[data-placeholder] .ds-avatar-modal__letter { display: none; }

.ds-avatar-modal__circle[data-placeholder] { background-size: cover; background-position: center; background-repeat: no-repeat; }

.ds-settings-avatar[data-has-image],
.ds-settings-avatar[data-placeholder] { color: transparent; font-size: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }

.ds-avatar-modal__footer .ds-btn { flex: 1; }

.ds-avatar-modal__footer .ds-btn--primary[disabled],
.ds-avatar-modal__footer .ds-btn--primary[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

.ds-exchange-banner__icon .mi { font-size: 22px; }

.ds-exchange-banner__close .mi { font-size: 22px; }

.ds-coll-card__select .mi { font-size: 18px; color: #fff; opacity: 0; }

body[data-mode="exchange"] .ds-coll-card.is-selected .ds-coll-card__select {
  background: var(--mystic-600, #14b441);
  border-color: var(--mystic-600, #14b441);
}

body[data-mode="exchange"] .ds-coll-card.is-selected .ds-coll-card__select .mi { opacity: 1; }

body[data-mode="exchange"] .ds-coll-card.is-selected {
  outline: 3px solid var(--mystic-500);
  outline-offset: -1px;
  border-radius: 12px;
}

/* 하단 sticky bar — 선택 요약 + 교환하기 */
.ds-exchange-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  padding: 12px var(--edge-margin) calc(12px + env(safe-area-inset-bottom));
  background: var(--bg-card);
  border-top: 1px solid var(--border-base);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
}

body[data-mode="exchange"] .ds-exchange-bar { display: block; }

/* filter rail이 열린 상태(=상단 카드 grid가 우측 inset)면 하단 바 컨텐츠도 카드 영역과 정렬 */
body[data-mode="exchange"]:has(.ds-coll-body:not(.is-filter-hidden)) .ds-exchange-bar__inner {
  padding-left: calc(240px + 32px); /* rail width + gap */
}

@media (max-width: 1023px) {
  /* 태블릿/모바일은 rail이 inline grid가 아니라 overlay라 정렬 보정 불필요 */
  body[data-mode="exchange"]:has(.ds-coll-body:not(.is-filter-hidden)) .ds-exchange-bar__inner {
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .ds-exchange-bar__total { font-size: 18px; }
  .ds-exchange-bar__cta .ds-btn { padding-inline: 14px; }
}

/* 모바일 탭바와 겹치지 않도록 mode=exchange 시 mobile-tabs hide */
body[data-mode="exchange"] .ds-mobile-tabs { display: none !important; }

body[data-mode="exchange"] main { padding-bottom: 120px !important; }

.ds-coll-headline__vis .mi { font-size: 16px; color: var(--fg-muted); }

.ds-coll-overview__delta .mi { font-size: 13px; }

.ds-coll-activity-card__icon .mi { font-size: 18px; color: var(--fg-base); }

.ds-coll-activity-card__cta .mi { font-size: 16px; transition: transform var(--t-fast); }

.ds-coll-activity-card:hover .ds-coll-activity-card__cta .mi { transform: translateX(3px); }

.ds-coll-activity-card--mover .ds-coll-activity-card__icon .mi { color: var(--mystic-700); }

.ds-coll-activity-card__delta .mi { font-size: 16px; }

@media (max-width: 767px) {
  /* 모바일: title은 좌측, 프로필 공개 토글은 우측 (한 줄) */
  .ds-coll-headline { flex-direction: row; align-items: flex-end; gap: 12px; }
  .ds-coll-headline__text { flex: 1; min-width: 0; }
  .ds-coll-headline__actions {
    flex-shrink: 0;
    align-self: flex-end;
    padding-bottom: 2px;
  }
  /* 모바일: vis 토글은 라벨 숨기고 아이콘 + 토글만 (compact) */
  .ds-coll-headline__vis #collVisLabel { display: none; }
  .ds-coll-overview { padding: 32px; gap: 24px; }
  .ds-coll-overview > .ds-coll-overview__metric:first-child {
    flex: 0 0 100%;
    width: 100%;
  }
  .ds-coll-overview__secondary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: start;
    align-items: start;
    gap: 0;
    flex: 0 0 100%;
    width: 100%;
    margin-left: 0;
    min-width: 0;
  }
  .ds-coll-overview__secondary .ds-coll-overview__metric {
    min-width: 0;
    align-items: flex-start;
    text-align: left;
  }
  .ds-coll-overview__secondary .ds-coll-overview__value {
    justify-content: flex-start;
  }
  .ds-coll-overview__divider { display: none; }
  .ds-coll-overview__cta {
    flex: 0 0 100%;
    margin-left: 0;
    width: 100%;
  }
  .ds-coll-overview__cta .ds-btn { width: 100%; }
  .ds-coll-overview__value { font-size: 22px; }
  .ds-coll-activity-grid { grid-template-columns: 1fr; gap: 10px; }
  .ds-coll-activity-grid > :first-child { grid-column: auto; }
  /* 모바일: ds-coll-controls — 중앙 status filter chips 숨김, 필터 좌측 / 정렬 우측 한 줄 정렬 */
  .ds-coll-controls {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .ds-coll-controls .ds-coll-filter { display: none !important; }
  .ds-coll-controls .ds-filter-toggle { margin-right: auto !important; }
  .ds-coll-controls .ds-coll-sort-dropdown { margin-left: auto; }
}

/* 가입 직후 로딩 상태 — 멤버십 카드 내부 스켈레톤은 어두운 배경에서 너무
   강하게 보여서 10% 투명도로 톤다운 */
.ds-mypage-hero__card .ds-skeleton {
  opacity: 0.1;
}

.ds-mypage-hero__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mystic-700);
  background-size: cover; background-position: center;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .ds-mypage-hero { padding: 16px; }
  .ds-mypage-hero__card { padding: 18px; max-width: 360px; }
  .ds-mypage-hero__name { font-size: 18px; margin-top: 18px; }
  .ds-mypage-hero__balance-row { left: 18px; right: 18px; bottom: 18px; }
  .ds-mypage-hero__balance-value { font-size: 20px; }
  .ds-mypage-hero__avatar { width: 48px; height: 48px; }
  .ds-mypage-hero__greet-text h2 { font-size: 19px; }
  .ds-mypage-hero__metric { min-height: 88px; padding: 0 10px; }
  .ds-mypage-hero__metric-label { font-size: 10px; letter-spacing: 0; }
  .ds-mypage-hero__metric-value { gap: 3px; font-size: 14px; }
  .ds-mypage-hero__metric-value small { font-size: 10px; }
  .ds-mypage-hero__metric-delta { font-size: 10px; }
}

.ds-grader-coming__label .mi { font-size: 14px; }

/* v0.8 toast 안 inline link 스타일 */
.ds-toast a { color: inherit; text-decoration: underline; font-weight: var(--fw-bk); }

.ds-toast a:hover { opacity: 0.85; }

.ds-toast .mi { font-size: 18px; flex-shrink: 0; }

/* v0.8 promo carousel — 이미지 기반 슬라이드 (banner-{1,2,3}

-{pc,mobile}

[data-live-image-missing="true"] {
  background-image: none !important;
  background-color: var(--gray-100) !important;
}

:root[data-theme="dark"] [data-live-image-missing="true"] {
  background-color: var(--gray-800) !important;
}

/* ==========================================================
   Fixed layer guard
   - 디자이너 HTML이 앱 래퍼 안에 주입되면서 일부 모바일/인앱 브라우저에서
     fixed 레이어가 스크롤 컨테이너에 갇히는 현상을 방지한다.
   ========================================================== */
body > [data-kado-fixed-layer="true"].ds-modal,
body > [data-kado-fixed-layer="true"].ds-search-overlay,
body > [data-kado-fixed-layer="true"].ds-card-zoom {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1300;
}

body > [data-kado-fixed-layer="true"].ds-zoom-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000;
}

body > [data-kado-fixed-layer="true"].ds-toast {
  position: fixed !important;
}

body > [data-kado-fixed-layer="true"].ds-exchange-bar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1200;
}

@media (max-width: 767px) {
  body > [data-kado-fixed-layer="true"].ds-mobile-tabs {
    display: block;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100%;
    z-index: 1100;
    transform: none !important;
    /* 스크롤 위로 컨텐츠가 비치지 않도록 hoist 본체에도 명시. */
    background: var(--bg-base) !important;
  }

  body.ds-filter-open > [data-kado-fixed-layer="true"].ds-mobile-tabs,
  body:has(.ds-modal.is-open) > [data-kado-fixed-layer="true"].ds-mobile-tabs,
  body:has(.ds-search-overlay.is-open) > [data-kado-fixed-layer="true"].ds-mobile-tabs,
  body:has(.ds-zoom-lightbox.is-open) > [data-kado-fixed-layer="true"].ds-mobile-tabs,
  body:has(.ds-card-zoom.is-open) > [data-kado-fixed-layer="true"].ds-mobile-tabs {
    pointer-events: none;
  }

  /* 알림 패널이 열린 동안엔 하단 탭바 자체를 숨김. (탭바 z-index 1100 이
     notif-panel z-index 200 보다 높아서 footer 의 "전체 알림 보기" 버튼이
     탭바 뒤로 가려졌었음.) */
  body.is-notif-open > [data-kado-fixed-layer="true"].ds-mobile-tabs {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body > [data-kado-fixed-layer="true"].ds-filter-rail {
    position: fixed !important;
    left: auto !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(420px, 92vw);
    height: 100vh;
    height: 100dvh;
    max-height: none;
    z-index: 1210;
    transform: translateX(100%) !important;
    opacity: 1 !important;
    visibility: hidden;
    pointer-events: none;
  }

  body.ds-filter-open > [data-kado-fixed-layer="true"].ds-filter-rail {
    transform: translateX(0) !important;
    visibility: visible;
    pointer-events: auto;
  }
}

@media (max-width: 767px) {
  body > [data-kado-fixed-layer="true"].ds-filter-rail {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100%;
    height: min(85dvh, 720px);
    max-height: 85vh;
    max-height: min(85dvh, 720px);
    z-index: 1210;
    transform: translateY(100%) !important;
    opacity: 1 !important;
    visibility: hidden;
    pointer-events: none;
  }

  body.ds-filter-open > [data-kado-fixed-layer="true"].ds-filter-rail {
    transform: translateY(0) !important;
    visibility: visible;
    pointer-events: auto;
  }
}

@media (max-width: 1023px) {
  body > [data-kado-fixed-layer="true"].ds-filter-backdrop {
    display: block;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body.ds-filter-open > [data-kado-fixed-layer="true"].ds-filter-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body.ds-filter-open {
    overflow: hidden;
  }
}