/* ============================================================
   storyboard.css — CHAART OS Storyboard Archive System
   Figma 스토리보드를 CHAART OS 토큰으로 렌더링하는 공통 스타일

   사용: 모든 storyboard/*.html 페이지에서 공유
   ============================================================ */

/* ── Layout ── */
.sb-page {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 120px var(--content-px) 80px;
}

/* ── Meta Header (화면 ID, 이름, 위치, 작성일) ── */
.sb-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--charcoal);
  margin-bottom: var(--space-10);
}
.sb-meta-cell {
  display: flex;
  border-right: 1px solid var(--charcoal);
}
.sb-meta-cell:last-child { border-right: none; }

.sb-meta-label {
  flex-shrink: 0;
  width: 100px;
  padding: 10px 16px;
  background: var(--neutral-95);
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--charcoal);
  display: flex;
  align-items: center;
  border-right: 1px solid var(--charcoal);
}
.sb-meta-value {
  flex: 1;
  padding: 10px 16px;
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--charcoal);
  display: flex;
  align-items: center;
}

/* ── Main Content Grid (와이어프레임 + 디스크립션) ── */
.sb-content {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: var(--space-8);
  align-items: start;
}

/* ── Wireframe Panel (좌측) ── */
.sb-wireframe {
  position: sticky;
  top: 100px;
}
.sb-wireframe-frame {
  position: relative;
  width: 393px;
  border: 1px solid var(--charcoal);
  background: var(--neutral-100);
  overflow: visible;
}
.sb-wireframe-frame img {
  width: 100%;
  height: auto;
  display: block;
}
/* 번호 마커 — 주황색 원형 */
.sb-marker {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-wireframe);
  color: var(--white);
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 2px 8px var(--alpha-16);
}
/* 영역 표시 — 주황색 점선 */
.sb-zone {
  position: absolute;
  border: 2px dashed var(--color-wireframe);
  pointer-events: none;
  z-index: 1;
}

/* ── Wireframe Phone Components (66화면 공통) ── */
.sb-wf-statusbar {
  height: 47px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--sans);
  color: var(--charcoal);
}
.sb-wf-statusbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.sb-wf-navbar {
  height: 48px;
  background: var(--white);
  display: flex;
  align-items: center;
  padding: 0 24px;
}
.sb-wf-body {
  padding: 18px 32px 0;
}
.sb-wf-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
  font-family: var(--sans);
  color: var(--charcoal);
  line-height: 1.3;
}
.sb-wf-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  font-family: var(--sans);
  line-height: 1.3;
  margin: 0;
}
.sb-wf-img {
  margin: 24px 32px;
  background: var(--neutral-85);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-wf-btn-stack {
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sb-wf-btn {
  height: 50px;
  background: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--white);
  font-family: var(--sans);
  font-weight: 500;
}
.sb-wf-badge-row {
  display: flex;
  justify-content: center;
}
.sb-wf-badge {
  background: var(--color-wireframe);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 0;
  position: relative;
  font-family: var(--sans);
}
.sb-wf-badge::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--color-wireframe);
}
.sb-wf-divider {
  text-align: center;
  font-size: 14px;
  color: var(--charcoal);
  font-family: var(--sans);
  padding: 14px 0;
  margin: 0;
}
/* 가이드 연결선 — 마커↔요소 연결 */
.sb-guide {
  position: absolute;
  border-top: 2px dashed var(--color-wireframe);
  pointer-events: none;
  z-index: 1;
}

.sb-wf-homebar {
  display: none;
}

/* ── Description Panel (우측) ── */
.sb-desc-header {
  background: var(--neutral-95);
  border: 1px solid var(--charcoal);
  padding: 10px 16px;
  font-family: var(--sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--charcoal);
  text-align: center;
  margin-bottom: 0;
}

.sb-desc-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--charcoal);
}
.sb-desc-table td {
  border: 1px solid var(--charcoal);
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--charcoal);
  vertical-align: top;
  line-height: 1.7;
}
/* 번호 열 */
.sb-desc-num {
  width: 40px;
  text-align: center;
  background: var(--neutral-95);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--red-brand);
}
/* 항목명 열 */
.sb-desc-name {
  width: 90px;
  text-align: center;
  font-weight: 700;
  font-size: var(--text-xs);
}
/* 설명 열 */
.sb-desc-detail {
  font-size: 12px;
  line-height: 1.8;
}
.sb-desc-detail ul {
  margin: 0;
  padding-left: 18px;
}
.sb-desc-detail li {
  margin-bottom: 2px;
}
.sb-desc-detail ul ul {
  margin-top: 2px;
}
.sb-desc-red {
  color: var(--red-brand);
}

/* ── Section Title (카테고리 구분) ── */
.sb-section-title {
  font-family: var(--mono);
  font-size: var(--text-11);
  font-weight: 600;
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
  color: var(--red-brand);
  margin-bottom: var(--space-2);
}
.sb-screen-title {
  font-size: clamp(var(--text-xl), 3vw, 36px);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--charcoal);
  margin-bottom: var(--space-3);
  line-height: 1.2;
}
.sb-screen-id {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-8);
}

/* ── Navigation: 이전/다음 화면 ── */
.sb-nav {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
}
.sb-nav-link {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease);
}
.sb-nav-link:hover { color: var(--red-brand); }
.sb-nav-link--disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* ── Index Page (전체 목록) ── */
.sb-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1px;
  background: var(--border);
}
.sb-index-card {
  background: var(--bg-card);
  padding: var(--space-6);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease);
}
.sb-index-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.sb-index-id {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--ls-ultra);
  color: var(--red-brand);
  margin-bottom: var(--space-2);
}
.sb-index-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-1);
}
.sb-index-loc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* ── Design Output Section ── */
.sb-design-section {
  margin-top: var(--space-14);
  padding-top: var(--space-10);
  border-top: 2px solid var(--charcoal);
}
.sb-design-kicker {
  font-family: var(--mono);
  font-size: var(--text-11);
  font-weight: 600;
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
  color: var(--red-brand);
  margin-bottom: var(--space-2);
}
.sb-design-title {
  font-size: clamp(var(--text-xl), 3vw, 32px);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--charcoal);
  margin-bottom: var(--space-3);
  line-height: 1.2;
}
.sb-design-desc {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-8);
  max-width: 560px;
}
.sb-design-grid {
  display: grid;
  grid-template-columns: 500px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
.sb-design-grid > * {
  min-width: 0;
}
.sb-design-phone {
  position: relative;
  width: 393px;
  border: 1px solid var(--charcoal);
  background: var(--bg);
  overflow: visible;
  display: flex;
  flex-direction: column;
}
.sb-design-phone--clipped {
  overflow: hidden;
}
.phone-scroll-bg {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.phone-scroll-bg::-webkit-scrollbar {
  display: none;
}
/* ═══════════════════════════════════════════════════════════════
   Design Phone Internal Elements (sb-dp-*)
   모든 값은 css/tokens.css 참조 — 토큰 수정 시 전체 스토리보드 자동 반영
   ═══════════════════════════════════════════════════════════════ */
.sb-dp-statusbar {
  height: 54px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  font-size: var(--text-base);
  font-weight: 600;
  font-family: var(--sans);
  color: var(--charcoal);
  position: relative;
}
.sb-dp-navbar {
  height: 48px;
  background: var(--bg);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
}
.sb-dp-body {
  padding: var(--space-4) var(--space-8) 0;
}
.sb-dp-title {
  font-size: var(--text-xl);
  font-weight: 700;
  font-family: var(--sans);
  color: var(--charcoal);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-2);
  line-height: 1.25;
}
.sb-dp-subtitle {
  font-size: var(--text-sm);
  font-family: var(--sans);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
  letter-spacing: var(--ls-normal);
}

/* ── Hero: 브랜드 비주얼 — Paper-Catalog Metaphor ──
   "백화점 VIP 라운지에서 받는 브랜드 카드" 메타포
   배경: warm paper (#F0EDE6) + linen 텍스처 + 미세 vignette
   모노그램은 종이 위에 각인된 느낌 (shadow → emboss)
   모션: 절제 — breathing dot만 허용 */
.sb-dp-hero {
  margin: var(--space-6) var(--space-8);
  height: 220px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Paper texture — linen weave (4x4 micro pattern) */
.sb-dp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23000' opacity='0.025'/%3E%3Crect width='1' height='1' x='2' y='2' fill='%23000' opacity='0.018'/%3E%3C/svg%3E");
  background-size: 4px 4px;
  opacity: 0.6;
}
/* Subtle vignette — gallery wall edge darkening */
.sb-dp-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 40%, var(--alpha-4) 100%);
  pointer-events: none;
}
/* 모노그램 로고 — emboss on paper (not glow) */
.sb-dp-hero-monogram {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.6)) drop-shadow(0 -0.5px 0 var(--alpha-6));  /* NOTE: 비브랜드 storyboard 전용 색상, 치환 보류 */
  opacity: 0.92;
}
/* 레드 악센트 라인 (절제된 1px) */
.sb-dp-hero-bar {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 1.5px;
  background: var(--red-brand);
  z-index: 1;
  opacity: 0.7;
}
/* 브랜드 마크 — 좌상단 작은 레드 스퀘어 (카탈로그 인덱스) */
.sb-dp-hero-index {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 6px;
  height: 6px;
  background: var(--red-brand);
  z-index: 1;
  opacity: 0.5;
}
/* 우하단 에디션 라벨 */
.sb-dp-hero-edition {
  position: absolute;
  bottom: 14px;
  right: 16px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
  color: var(--alpha-25);
  z-index: 1;
}
.sb-dp-btn-stack {
  padding: 28px var(--space-8) 48px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sb-dp-btn {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--text-sm);
  font-family: var(--sans);
  font-weight: 600;
  position: relative;
  letter-spacing: var(--ls-normal);
  transition: opacity var(--dur-fast) ease;
}
/* 아이콘 토큰: --icon-md (20px), --icon-stroke (1.5) */
.sb-dp-btn svg {
  flex-shrink: 0;
  width: var(--icon-md);
  height: var(--icon-md);
}
.sb-dp-navbar svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}
/* ── Social Login Buttons — 외부 브랜드 컬러 (토큰화 대상 아님) ── */
.sb-dp-btn--kakao  { background: #FEE500; color: #191919; }  /* Kakao 브랜드 */
.sb-dp-btn--google { background: var(--white); color: #333; border: 1px solid var(--neutral-85); }  /* Google 브랜드 */
.sb-dp-btn--apple  { background: #000; color: var(--white); }  /* Apple 브랜드 */
.sb-dp-btn--naver  { background: #03C75A; color: var(--white); }  /* Naver 브랜드 */
.sb-dp-btn--email  { background: transparent; color: var(--charcoal); border: 1px solid rgba(26,26,26,0.18); }
/* Speech Bubble Badge — 최근 로그인 등 */
.sb-dp-btn:has(.sb-dp-badge) {
  margin-top: 18px;
}
.sb-dp-badge {
  position: absolute;
  left: 50%;
  top: -24px;
  transform: translateX(-50%);
  background: var(--red-brand);
  color: var(--text-inverse);
  font-size: var(--text-11);
  font-weight: 600;
  padding: 5px 14px;
  font-family: var(--sans);
  letter-spacing: var(--ls-normal);
  white-space: nowrap;
  z-index: 2;
  /* NOTE: red-brand 계열 box-shadow — 기반색 rgb(178,42,48) ≠ --red-brand rgb(150,30,35), --shadow-brand(tokens.css L259) 존재하나 구조(4px/16px)·opacity(0.08) 불일치로 직접 치환 불가. 치환 보류 */
  box-shadow: 0 2px 8px rgba(178,42,48,0.25);
  animation: badgeFloat 2s var(--ease) infinite;
}
@keyframes badgeFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}
.sb-dp-badge::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--red-brand);
}
.sb-dp-divider {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: var(--sans);
  padding: 14px 0;
  margin: 0;
  position: relative;
  letter-spacing: var(--ls-wide);
}
.sb-dp-divider::before,
.sb-dp-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 110px;
  height: 1px;
  background: var(--alpha-8);
}
.sb-dp-divider::before { right: calc(50% + 20px); }
.sb-dp-divider::after  { left:  calc(50% + 20px); }
/* ════════════════════════════════════════════════════════════
   Design Phone — Component Block System (v1.0 · 2026-03-19)
   LOG~MKT 스토리보드에서 추출한 공통 UI 블록.
   모든 값은 tokens.css 참조 → tokens 수정 시 전체 스토리보드 자동 반영.
   ════════════════════════════════════════════════════════════ */

/* ── ① Header: 메인 페이지 (로고 + 우측 아이콘) ──
   사용: HOM-001, MYP-001 (탭바 있는 최상위 페이지) */
.sb-dp-header-main {
  height: 48px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
}
.sb-dp-header-main svg:last-child {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ── ② Header: 서브페이지 (뒤로가기 + 가운데 타이틀) ──
   사용: MKT-003, MYP-002~016 등 모든 서브페이지
   패턴: justify-content:center + chevron position:absolute left:24px */
.sb-dp-header-sub {
  height: 48px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-6);
  position: relative;
}
.sb-dp-header-sub__back {
  position: absolute;
  left: 24px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sb-dp-header-sub__back svg {
  width: 20px;
  height: 20px;
}
.sb-dp-header-sub__title {
  font-size: var(--text-md);
  font-weight: 700;
  font-family: var(--sans);
  color: var(--charcoal);
  letter-spacing: var(--ls-tight);
}
/* 우측 액션 아이콘 (선택적) */
.sb-dp-header-sub__action {
  position: absolute;
  right: 24px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── ③ Tab Bar: 하단 내비게이션 (4탭 고정) ──
   사용: HOM-*, MKT-*, MYP-001, PRS-* (탭바 필요한 모든 메인 화면)
   활성 탭: .sb-dp-tabbar__item--active (CSS로 자동 처리)
   비활성: CSS 기본값 (HTML 인라인 stroke 속성 불필요) */
.sb-dp-tabbar {
  height: 80px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 var(--space-6);
  border-top: 1px solid var(--alpha-6);
}
.sb-dp-tabbar--fixed {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
.sb-dp-tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.sb-dp-tabbar__item svg {
  width: 24px;
  height: 24px;
  stroke: var(--text-muted);
  stroke-width: 1.5;
}
.sb-dp-tabbar__item--market svg {
  margin-top: 3px;
  transform: translateX(-2px);
}
.sb-dp-tabbar__label {
  font-size: var(--text-2xs);
  font-weight: 500;
  font-family: var(--sans);
  color: var(--text-muted);
  letter-spacing: var(--ls-normal);
}
.sb-dp-tabbar__item--active svg {
  stroke: var(--red-brand);
  stroke-width: 1.8;
}
.sb-dp-tabbar__item--active .sb-dp-tabbar__label {
  font-weight: 600;
  color: var(--red-brand);
}
.sb-dp-tabbar--fixed {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

/* ── ④ CTA Button: 주요 액션 버튼 ──
   사용: 모든 화면의 주요 CTA. var(--charcoal) CTA 절대 금지.
   A. 풀와이드 (full-width): 폼 하단, 바텀시트 하단
   B. 플로팅 (position:absolute bottom): 리스트 하단 고정 */
.sb-dp-cta {
  height: 50px;
  background: var(--cta-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  font-weight: 600;
  font-family: var(--sans);
  color: var(--text-inverse);
  letter-spacing: var(--ls-normal);
}
/* 비활성 CTA (필수 조건 미충족 시) */
.sb-dp-cta--disabled {
  background: var(--alpha-8);
  color: var(--text-muted);
}
/* 보조 CTA (outline) */
.sb-dp-cta--secondary {
  height: 50px;
  background: transparent;
  border: 1px solid var(--alpha-12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  font-weight: 600;
  font-family: var(--sans);
  color: var(--charcoal);
  letter-spacing: var(--ls-normal);
}
/* ── ⑤ List Row: 설정/메뉴 항목 (아이콘 + 라벨 + 셰브론) ──
   사용: MYP-001 설정 리스트, MYP-014 약관 메뉴 등 */
.sb-dp-list-row {
  padding: 15px var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--alpha-6);
}
.sb-dp-list-row__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.sb-dp-list-row__left svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.sb-dp-list-row__label {
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: var(--sans);
  color: var(--charcoal);
  letter-spacing: var(--ls-normal);
}
/* 우측 셰브론 (작은 사이즈) */
.sb-dp-list-row__chevron {
  width: 7px;
  height: 12px;
  flex-shrink: 0;
}
/* 우측 값 텍스트 (버전 정보 등) */
.sb-dp-list-row__value {
  font-size: var(--text-11);
  font-family: var(--mono);
  color: var(--text-muted);
  letter-spacing: var(--ls-wide);
}
/* 위험 항목 (로그아웃 등) */
.sb-dp-list-row--muted .sb-dp-list-row__label {
  color: var(--text-muted);
}
.sb-dp-list-row--muted svg {
  stroke: var(--text-muted);
}

/* ── ⑥ Content Tabs: 인페이지 탭 전환 ──
   사용: MYP-003/004 (마켓/PS), MYP-005/006, MYP-010 (4탭 필터) */
.sb-dp-content-tabs {
  display: flex;
  border-bottom: 1px solid var(--alpha-6);
}
.sb-dp-content-tab {
  flex: 1;
  text-align: center;
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  font-family: var(--sans);
  color: var(--text-muted);
  letter-spacing: var(--ls-normal);
}
.sb-dp-content-tab--active {
  font-weight: 700;
  color: var(--charcoal);
  border-bottom: 2px solid var(--charcoal);
  margin-bottom: -1px;
}

/* ── ⑦ Input Field: 텍스트 입력 ──
   사용: MYP-002 프로필 수정, MYP-011 문의 작성 등 */
.sb-dp-input-group {
  margin-bottom: 20px;
}
.sb-dp-input-label {
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: var(--sans);
  color: var(--text-muted);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.sb-dp-input {
  height: 48px;
  background: var(--alpha-4);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  font-family: var(--sans);
  color: var(--charcoal);
  letter-spacing: var(--ls-normal);
}
.sb-dp-input--placeholder {
  color: var(--text-muted);
}
.sb-dp-input--error {
  border-color: var(--red-brand);
}
.sb-dp-input-helper {
  font-size: var(--text-11);
  font-family: var(--sans);
  color: var(--text-muted);
  margin-top: 6px;
  letter-spacing: var(--ls-normal);
}
.sb-dp-input-helper--error {
  color: var(--red-brand);
}

/* ── ⑧ Profile Section: 프로필 영역 ──
   사용: MYP-001 마이페이지 메인, MYP-002 프로필 수정 */
.sb-dp-profile {
  padding: var(--space-6) var(--space-6) 20px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border-bottom: 1px solid var(--alpha-6);
}
.sb-dp-profile__avatar {
  width: 56px;
  height: 56px;
  background: var(--alpha-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.sb-dp-profile__avatar svg {
  width: 28px;
  height: 28px;
}
.sb-dp-profile__info {
  flex: 1;
  min-width: 0;
}
.sb-dp-profile__name {
  font-size: var(--text-16);
  font-weight: 700;
  font-family: var(--sans);
  color: var(--charcoal);
  margin: 0 0 2px;
  letter-spacing: var(--ls-tight);
}
.sb-dp-profile__sub {
  font-size: var(--text-xs);
  font-weight: 400;
  font-family: var(--sans);
  color: var(--text-muted);
  margin: 0;
  letter-spacing: var(--ls-normal);
}

/* ── ⑧-b Profile Edit: 프로필 수정 (큰 아바타 + 편집 뱃지) ──
   사용: MYP-002 프로필 관리 */
.sb-dp-profile-edit {
  padding: var(--space-8) var(--space-6);
  display: flex;
  justify-content: center;
}
.sb-dp-profile-edit__avatar {
  width: 80px;
  height: 80px;
  background: var(--alpha-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
}
.sb-dp-profile-edit__avatar svg {
  width: 36px;
  height: 36px;
}
.sb-dp-profile-edit__badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.sb-dp-profile-edit__badge svg {
  width: 12px;
  height: 12px;
}

/* ── ⑦-b Input Underline: 밑줄형 입력 필드 ──
   사용: MYP-002 닉네임 편집 등 단일 필드 편집 화면 */
.sb-dp-input--underline {
  height: auto;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--charcoal);
  padding: 10px 0;
  gap: var(--space-2);
}

/* ── CTA 하단 고정 래퍼 ──
   사용: MYP-002 저장 버튼 등 하단 고정 CTA */
.sb-dp-cta-wrap {
  position: absolute;
  bottom: 50px;
  left: var(--space-6);
  right: var(--space-6);
}

/* ── ⑨ Activity Grid: 내 활동 (아이콘 + 라벨 격자) ──
   사용: MYP-001 (구매내역/판매내역/찜한작품) */
.sb-dp-activity {
  padding: var(--space-6) var(--space-6) 20px;
}
.sb-dp-activity__title {
  font-size: var(--text-base);
  font-weight: 700;
  font-family: var(--sans);
  color: var(--charcoal);
  margin: 0 0 var(--space-4);
  letter-spacing: var(--ls-tight);
}
.sb-dp-activity__grid {
  display: flex;
  gap: var(--space-3);
}
.sb-dp-activity__item {
  flex: 1;
  text-align: center;
}
.sb-dp-activity__icon {
  width: 52px;
  height: 52px;
  background: var(--charcoal);
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-dp-activity__icon svg {
  width: 22px;
  height: 22px;
}
.sb-dp-activity__label {
  font-size: var(--text-xs);
  font-weight: 500;
  font-family: var(--sans);
  color: var(--charcoal);
  letter-spacing: var(--ls-normal);
}

/* ── ⑩ Section Divider: 두꺼운 구분선 ──
   사용: MYP-001 설정 리스트 상단 등 */
.sb-dp-section-divider {
  border-top: 8px solid var(--alpha-3);
}

/* ── ⑪ Empty State: 빈 상태 ──
   사용: MYP-003 구매내역 없음, MYP-007 찜한 작품 없음 등 */
.sb-dp-empty {
  padding: 80px var(--space-6);
  text-align: center;
}
.sb-dp-empty__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-dp-empty__icon svg {
  width: 48px;
  height: 48px;
  opacity: 0.2;
}
.sb-dp-empty__title {
  font-size: var(--text-16);
  font-weight: 700;
  font-family: var(--sans);
  color: var(--charcoal);
  margin: 0 0 var(--space-2);
  letter-spacing: var(--ls-tight);
}
.sb-dp-empty__desc {
  font-size: var(--text-13);
  font-family: var(--sans);
  color: var(--text-muted);
  margin: 0;
  letter-spacing: var(--ls-normal);
  line-height: 1.5;
}

/* ── ⑫ Modal/Alert: 중앙 다이얼로그 ──
   사용: MYP-001 로그아웃 확인, MYP-016 탈퇴 확인 등 */
.sb-dp-modal-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.sb-dp-modal {
  width: 280px;
  background: var(--bg);
  padding: var(--space-8) var(--space-6) var(--space-6);
}
.sb-dp-modal__icon {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-dp-modal__title {
  font-size: var(--text-md);
  font-weight: 700;
  font-family: var(--sans);
  color: var(--charcoal);
  text-align: center;
  margin: 0 0 var(--space-2);
  letter-spacing: var(--ls-tight);
}
.sb-dp-modal__title--left {
  text-align: left;
}
.sb-dp-modal__desc--left {
  text-align: left;
}
.sb-dp-modal__desc {
  font-size: var(--text-13);
  font-family: var(--sans);
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 var(--space-6);
  line-height: 1.5;
  letter-spacing: var(--ls-normal);
}
.sb-dp-modal__actions {
  display: flex;
  gap: 8px;
}
.sb-dp-modal__btn {
  flex: 1;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--sans);
  letter-spacing: var(--ls-normal);
}
.sb-dp-modal__btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.sb-dp-modal__btn--ghost:hover {
  background: var(--state-hover-overlay);
  border-color: var(--charcoal);
}
.sb-dp-modal__btn--primary {
  background: var(--red-brand);
  color: var(--text-inverse);
}
.sb-dp-modal__btn--primary:hover {
  background: var(--red-brand-hover);
}
.sb-dp-modal__title--left {
  text-align: left;
}

/* ── LOG-002: Terms Detail Panel ──
   사용: LOG-002 약관 상세 슬라이드 패널 (서비스/개인정보/마케팅) */
.log002-terms-panel {
  position: absolute;
  inset: 0;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform 400ms var(--ease-ios-spring);
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.log002-terms-panel .sb-dp-header-sub {
  padding-top: 44px;
  height: auto;
}
.log002-terms-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6) var(--space-6) var(--space-8);
  -webkit-overflow-scrolling: touch;
}
.log002-terms-content {
  font-family: var(--sans);
  margin: 0;
}
.log002-terms-content h4 {
  font-size: var(--size-md-font);
  font-weight: 700;
  font-family: var(--sans);
  color: var(--charcoal);
  margin: 0 0 var(--space-2);
  letter-spacing: var(--ls-tight);
}
.log002-terms-content h4:not(:first-child) {
  margin-top: var(--space-5);
}
.log002-terms-content p {
  font-size: var(--size-sm-font);
  font-family: var(--sans);
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0 0 var(--space-3);
  letter-spacing: var(--ls-normal);
}
.log002-terms-content ol {
  padding-left: var(--space-5);
  margin: 0 0 var(--space-3);
}
.log002-terms-content li {
  font-size: var(--size-sm-font);
  font-family: var(--sans);
  color: var(--text-secondary);
  line-height: 1.75;
  letter-spacing: var(--ls-normal);
}
/* ── ⑬ Filter Chips: 가로 스크롤 필터 ──
   사용: MKT-001 카테고리 탭, MYP-010 공지사항 탭 */
.sb-dp-filter-bar {
  padding: var(--space-2) var(--space-6);
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sb-dp-filter-bar::-webkit-scrollbar { display: none; }
.sb-dp-filter-chip {
  padding: 6px 14px;
  font-size: var(--text-xs);
  font-family: var(--sans);
  color: var(--charcoal);
  border: 1px solid var(--alpha-12);
  white-space: nowrap;
  flex-shrink: 0;
}
.sb-dp-filter-chip--active {
  background: var(--cta-gradient);
  color: var(--text-inverse);
  font-weight: 600;
  border: none;
}

/* ── ⑭ Toggle/Switch ──
   사용: MYP-009 알림 설정 */
.sb-dp-toggle {
  width: 44px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--alpha-12);
  position: relative;
  flex-shrink: 0;
}
.sb-dp-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px var(--alpha-16);
  transition: transform var(--dur-normal) var(--ease);
}
.sb-dp-toggle--on {
  background: var(--red-brand);
}
.sb-dp-toggle--on::after {
  transform: translateX(20px);
}

/* ── ⑮ Transaction Item: 거래 내역 행 ──
   사용: MYP-003~006 구매/판매 내역 */
.sb-dp-transaction {
  padding: var(--space-4) var(--space-6);
  display: flex;
  gap: 14px;
  border-bottom: 1px solid var(--alpha-6);
}
.sb-dp-transaction__thumb {
  width: 60px;
  height: 60px;
  background: var(--paper);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-dp-transaction__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.sb-dp-transaction__artist {
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--sans);
  color: var(--charcoal);
  letter-spacing: var(--ls-tight);
}
.sb-dp-transaction__detail {
  font-size: var(--text-xs);
  font-family: var(--sans);
  color: var(--text-muted);
  letter-spacing: var(--ls-normal);
}
.sb-dp-transaction__price {
  font-size: var(--text-13);
  font-weight: 700;
  font-family: var(--sans);
  color: var(--charcoal);
  letter-spacing: var(--ls-normal);
}
.sb-dp-transaction__status {
  font-size: var(--text-11);
  font-weight: 600;
  font-family: var(--sans);
  padding: 2px 8px;
  letter-spacing: var(--ls-normal);
}
.sb-dp-transaction__status--complete {
  background: var(--alpha-6);
  color: var(--charcoal);
}
.sb-dp-transaction__status--progress {
  background: var(--red-brand-subtle);
  color: var(--red-brand);
}

/* ── ⑰ FAQ/Accordion: 접히는 항목 ──
   사용: MYP-013 FAQ */
.sb-dp-accordion {
  border-bottom: 1px solid var(--alpha-6);
}
.sb-dp-accordion__header {
  padding: var(--space-4) var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sb-dp-accordion__title {
  font-size: var(--text-base);
  font-weight: 600;
  font-family: var(--sans);
  color: var(--charcoal);
  letter-spacing: var(--ls-normal);
}
.sb-dp-accordion__body {
  padding: 0 var(--space-6) var(--space-4);
  font-size: var(--text-13);
  font-family: var(--sans);
  color: var(--text-secondary);
  line-height: 1.7;
  letter-spacing: var(--ls-normal);
}

/* ── ⑱ Notice/Inquiry List Item ──
   사용: MYP-010 공지사항, MYP-011 1:1 문의 */
.sb-dp-notice-item {
  padding: 14px var(--space-6);
  border-bottom: 1px solid var(--alpha-6);
}
.sb-dp-notice-item__title {
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--sans);
  color: var(--charcoal);
  letter-spacing: var(--ls-normal);
  margin: 0 0 4px;
}
.sb-dp-notice-item__date {
  font-size: var(--text-11);
  font-family: var(--sans);
  color: var(--text-muted);
  letter-spacing: var(--ls-normal);
}
.sb-dp-notice-item__badge {
  display: inline-block;
  font-size: var(--text-2xs);
  font-weight: 600;
  font-family: var(--sans);
  padding: 2px 6px;
  margin-left: 6px;
  letter-spacing: var(--ls-normal);
}
.sb-dp-notice-item__badge--new {
  background: var(--red-brand);
  color: var(--text-inverse);
}

/* ── ⑲ Textarea (문의 등록 등) ──
   사용: MYP-011 1:1 문의 작성 */
.sb-dp-textarea {
  width: 100%;
  min-height: 120px;
  background: var(--alpha-4);
  border: 1px solid var(--border);
  padding: 14px var(--space-4);
  font-size: var(--text-sm);
  font-family: var(--sans);
  color: var(--charcoal);
  letter-spacing: var(--ls-normal);
  line-height: 1.6;
  resize: none;
}

/* ── ⑳ Image Upload Area ──
   사용: MYP-011 문의 이미지 첨부 */
.sb-dp-upload {
  height: 44px;
  background: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-13);
  font-family: var(--sans);
  color: var(--text-inverse);
  font-weight: 600;
  letter-spacing: var(--ls-normal);
}

/* ── ㉑ Favorited List Item: 찜한 작품 리스트 아이템 ──
   사용: MYP-007 찜한 작품 */
.sb-dp-fav-list {
  padding: 0 var(--space-6);
}
.sb-dp-fav-item {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--alpha-6);
}
.sb-dp-fav-item__thumb {
  width: 72px;
  height: 72px;
  background: var(--paper);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-dp-fav-item__thumb-texture {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23000' opacity='0.025'/%3E%3Crect width='1' height='1' x='2' y='2' fill='%23000' opacity='0.018'/%3E%3C/svg%3E");
  background-size: 4px 4px;
  opacity: 0.6;
}
.sb-dp-fav-item__thumb svg {
  opacity: 0.15;
}
.sb-dp-fav-item__body {
  flex: 1;
}
.sb-dp-fav-item__badge {
  display: inline-block;
  font-size: var(--text-3xs);
  font-weight: 600;
  font-family: var(--mono);
  color: var(--charcoal);
  border: 1px solid var(--alpha-12);
  padding: 2px 6px;
  margin-bottom: 4px;
  letter-spacing: var(--ls-wide);
}
.sb-dp-fav-item__name {
  font-size: var(--text-sm);
  font-weight: 700;
  font-family: var(--sans);
  color: var(--charcoal);
  margin: 0 0 3px;
  letter-spacing: var(--ls-normal);
}
.sb-dp-fav-item__artist {
  font-size: var(--text-xs);
  font-family: var(--sans);
  color: var(--text-secondary);
  margin: 0 0 2px;
}
.sb-dp-fav-item__type {
  font-size: var(--text-11);
  font-family: var(--mono);
  color: var(--text-muted);
  margin: 0 0 6px;
  letter-spacing: var(--ls-wide);
}
.sb-dp-fav-item__price {
  font-size: var(--text-sm);
  font-weight: 700;
  font-family: var(--sans);
  color: var(--charcoal);
  margin: 0;
  letter-spacing: var(--ls-normal);
}
.sb-dp-fav-item__heart {
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
}
.sb-dp-fav-item__heart svg {
  fill: var(--red-brand);
  stroke: var(--red-brand);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── ㉒ Info Row: 키-값 정보 행 ──
   사용: MYP-008 계정 정보 */
.sb-dp-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--alpha-6);
}
.sb-dp-info-row--no-border {
  border-bottom: none;
}
.sb-dp-info-row__label {
  font-size: var(--text-sm);
  font-family: var(--sans);
  color: var(--text-secondary);
  letter-spacing: var(--ls-normal);
}
.sb-dp-info-row__value {
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--sans);
  color: var(--charcoal);
  letter-spacing: var(--ls-normal);
}
.sb-dp-info-row__value--mono {
  font-weight: 400;
  font-family: var(--mono);
  letter-spacing: var(--ls-normal);
}
.sb-dp-info-row__link {
  font-size: var(--text-13);
  font-weight: 500;
  font-family: var(--sans);
  color: var(--blue-50);
  letter-spacing: var(--ls-normal);
  border-bottom: 1px solid var(--blue-50);
}
.sb-dp-info-row__link--muted {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-bottom-color: var(--text-muted);
}

/* ── ㉓ Section Title (in-phone): 섹션 제목 ──
   사용: MYP-008 "내 계정" 등 */
.sb-dp-section-title {
  font-size: var(--text-md);
  font-weight: 700;
  font-family: var(--sans);
  color: var(--charcoal);
  margin: 0 0 var(--space-5);
  letter-spacing: var(--ls-tight);
}

/* ── ㉔ Accent Line: 브랜드 악센트 라인 ──
   사용: MYP-008 네비바 직하단 */
.sb-dp-accent-line {
  margin: 0 var(--space-6);
  height: 1px;
  background: var(--red-brand);
  opacity: 0.15;
}

/* ── ㉕ Search Bar: 검색 입력 ──
   사용: MKT-001 마켓 검색, HOM-001 홈 검색 */
.sb-dp-search {
  padding: 10px var(--space-6);
}
.sb-dp-search__field {
  height: 40px;
  background: var(--alpha-4);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 8px;
}
.sb-dp-search__field svg {
  width: 16px;
  height: 16px;
  stroke: var(--text-muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
}
.sb-dp-search__placeholder {
  font-size: var(--text-13);
  font-family: var(--sans);
  color: var(--text-muted);
  letter-spacing: var(--ls-normal);
}

/* ── ㉖ FAB (Floating Action Button) ──
   사용: MKT-001 작품 등록 버튼 */
.sb-dp-fab {
  position: absolute;
  bottom: 96px;
  right: var(--space-6);
  width: 56px;
  height: 56px;
  background: var(--red-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.sb-dp-fab svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-inverse);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ── ㉗ Artwork Card: 마켓 작품 카드 (2열 그리드) ──
   사용: MKT-001~013 마켓 화면, HOM-001 캐러셀 */
.sb-dp-market-grid {
  padding: var(--space-2) var(--space-6) var(--space-4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px var(--space-4);
}
.sb-dp-market-card__thumb {
  aspect-ratio: 1/1;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.sb-dp-market-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sb-dp-market-card__save {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sb-dp-market-card__artist {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: clamp(11px, 3.2vw, 14px);
  font-weight: 600;
  font-family: var(--sans);
  color: var(--charcoal);
  letter-spacing: var(--ls-tight);
  margin: clamp(6px, 2vw, 10px) 0 0;
  line-height: 1.3;
}
.sb-dp-market-card__badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: clamp(8px, 2vw, 10px);
  font-weight: 500;
  font-family: var(--sans);
  color: var(--text-muted);
  border: 1px solid var(--alpha-12);
  padding: 2px 5px 1px;
  letter-spacing: var(--ls-normal);
}
.sb-dp-market-card__size {
  font-size: clamp(9px, 2.4vw, 12px);
  font-weight: 400;
  font-family: var(--sans);
  color: var(--text-muted);
  margin: 3px 0 0;
  line-height: 1.3;
}
.sb-dp-market-card__price {
  font-size: clamp(10px, 2.6vw, 13px);
  font-weight: 700;
  font-family: var(--sans);
  color: var(--charcoal);
  letter-spacing: var(--ls-normal);
  margin: clamp(3px, 1vw, 6px) 0 0;
  line-height: 1.3;
}

/* ── ㉘ Carousel: 가로 스크롤 카드 ──
   사용: HOM-001 마켓/픽스/컬렉터즈 캐러셀 */
.sb-dp-carousel {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--space-6);
  scrollbar-width: none;
  padding: 0 var(--space-6);
}
.sb-dp-carousel::-webkit-scrollbar { display: none; }
.sb-dp-carousel__card {
  flex: 0 0 44%;
  scroll-snap-align: start;
}

/* ── ㉙ Hero Section: 홈 히어로 텍스트 ──
   사용: HOM-001 홈 화면, LOG-001 로그인 화면 */
.sb-dp-hero-text {
  padding: var(--space-8) var(--space-6) 44px;
}
.sb-dp-hero-text__title {
  font-size: var(--text-2xl);
  font-weight: 800;
  font-family: var(--sans);
  color: var(--charcoal);
  line-height: 1.4;
  letter-spacing: var(--ls-tight);
  margin: 0;
}
.sb-dp-hero-text__title .accent {
  color: var(--red-brand);
}
.sb-dp-hero-text__cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  border: 1px solid var(--alpha-12);
  padding: 0 var(--space-4);
  margin-top: var(--space-5);
  font-size: var(--text-13);
  font-weight: 600;
  font-family: var(--sans);
  color: var(--charcoal);
  letter-spacing: var(--ls-normal);
  gap: 6px;
}

/* ── ㉚ Section Header (in-phone): 섹션 제목 + 더보기 ──
   사용: HOM-001 "마켓", "차트 추천", "컬렉터즈" 등 */
.sb-dp-section-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-6) var(--space-3);
}
.sb-dp-section-hd__title {
  font-size: var(--text-md);
  font-weight: 700;
  font-family: var(--sans);
  color: var(--charcoal);
  letter-spacing: var(--ls-tight);
}
.sb-dp-section-hd__more {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: var(--text-xs);
  font-family: var(--sans);
  color: var(--text-muted);
  letter-spacing: var(--ls-normal);
}
.sb-dp-section-hd__more svg {
  width: 14px;
  height: 14px;
}

/* ── ㉛ Choice Card: 홈 선택 카드 ──
   사용: HOM-001 직거래/프라이빗세일 선택 카드 */
.sb-dp-choice-card {
  flex: 1;
  min-height: 120px;
  border: 1px solid var(--alpha-8);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sb-dp-choice-card__icon {
  width: 28px;
  height: 28px;
  margin-bottom: var(--space-3);
}
.sb-dp-choice-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  font-family: var(--sans);
  color: var(--charcoal);
  letter-spacing: var(--ls-tight);
  margin: 0 0 4px;
}
.sb-dp-choice-card__desc {
  font-size: var(--text-xs);
  font-family: var(--sans);
  color: var(--text-muted);
  letter-spacing: var(--ls-normal);
  margin: 0;
}

/* ── ㉜ Question Title: 큰 질문 텍스트 ──
   사용: MYP-016 탈퇴, LOG 온보딩 등 */
.sb-dp-question {
  padding: var(--space-6) var(--space-6) var(--space-2);
}
.sb-dp-question__text {
  font-size: var(--text-lg);
  font-weight: 700;
  font-family: var(--sans);
  color: var(--charcoal);
  margin: 0;
  line-height: 1.4;
  letter-spacing: var(--ls-tight);
}

/* ── Lucide Icon Defaults (모든 sb-dp- 아이콘 기본값) ── */
.sb-dp-header-sub__back svg,
.sb-dp-list-row__left svg,
.sb-dp-header-main svg {
  stroke: var(--charcoal);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
/* 디자인 토큰 테이블 */
.sb-token-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--charcoal);
}
.sb-token-table th {
  background: var(--neutral-95);
  border: 1px solid var(--charcoal);
  padding: 8px 14px;
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--charcoal);
  text-align: left;
}
.sb-token-table td {
  border: 1px solid var(--charcoal);
  padding: 8px 14px;
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--charcoal);
  vertical-align: middle;
  line-height: 1.6;
}
.sb-token-table code {
  font-family: var(--mono);
  font-size: var(--text-11);
  background: var(--neutral-95);
  padding: 1px 5px;
}
.sb-token-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border);
  vertical-align: middle;
  margin-right: 6px;
}

@media (max-width: 960px) {
  .sb-design-grid { grid-template-columns: 1fr; }
}

/* ── Multi-screen Layout (2+폰 / 모달 배치 시) ──
   와이어프레임과 Description을 세로로 쌓아서 가로 폭 유지 */
.sb-content--multi {
  grid-template-columns: 1fr;
}
.sb-content--multi .sb-wireframe {
  position: static;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.sb-content--multi .sb-wireframe-frame {
  flex: 0 0 393px;   /* flex-basis wins over width — must be explicit */
  width: 393px;
  max-width: 393px;
}
.sb-design-grid--multi {
  grid-template-columns: 1fr;
}
.sb-design-grid--multi > div:first-child {
  display: flex;
  gap: 24px;
}
.sb-design-grid--multi .sb-design-phone {
  flex: 0 0 393px;   /* flex-basis wins over width in flex context — must be explicit */
  width: 393px;
  max-width: 393px;
}

/* ── BO Desktop Admin — Paper-Catalog Hero (Design Output 플레이스홀더) ── */
.sb-dp-catalog-hero {
  height: 80px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-dp-catalog-hero__texture {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23000' opacity='0.025'/%3E%3Crect width='1' height='1' x='2' y='2' fill='%23000' opacity='0.018'/%3E%3C/svg%3E");
  background-size: 4px 4px;
  opacity: 0.6;
}
.sb-dp-catalog-hero__title {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--sans);
  color: var(--charcoal);
  letter-spacing: var(--ls-tight);
  z-index: 1;
}
.sb-dp-catalog-hero__accent {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 1.5px;
  background: var(--red-brand);
  opacity: 0.7;
}
.sb-dp-catalog-body {
  padding: var(--space-6);
  font-size: var(--text-xs);
  font-family: var(--sans);
  color: var(--text-muted);
  text-align: center;
}

/* ── BO (Back Office) Admin Design Components ──
   사용: BO-USR-*, BO-LIN-*, BO-ETC-* 백오피스 관리 화면 */

/* — Admin Layout Shell — */
.sb-dp-bo-shell {
  display: flex;
  min-height: 720px;
}
.sb-dp-bo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid var(--alpha-6);
}
.sb-dp-bo-header__title {
  font-family: var(--sans);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: var(--ls-tight);
}
.sb-dp-bo-header__meta {
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* — Sidebar — */
.sb-dp-bo-sidebar {
  width: 140px;
  border-right: 1px solid var(--alpha-6);
  background: var(--bg);
  padding: 20px 0;
}
.sb-dp-bo-sidebar__logo {
  padding: var(--space-2) 20px;
  margin-bottom: var(--space-4);
  font-family: var(--sans);
  font-size: var(--text-13);
  font-weight: 700;
  color: var(--charcoal);
}
.sb-dp-bo-sidebar__item {
  padding: 10px 20px;
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.sb-dp-bo-sidebar__item--active {
  font-weight: 600;
  color: var(--red-brand);
  background: var(--red-brand-ghost);
  border-left: 2px solid var(--red-brand);
}
.sb-dp-bo-main {
  flex: 1;
  padding: 20px 24px;
}

/* — Stats Card Grid — */
.sb-dp-bo-stats-label {
  font-family: var(--sans);
  font-size: var(--text-11);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.sb-dp-bo-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.sb-dp-bo-stat-card {
  border: 1px solid var(--border);
  padding: 14px;
  background: var(--bg);
}
.sb-dp-bo-stat-card__label {
  font-family: var(--sans);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  margin-bottom: 6px;
}
.sb-dp-bo-stat-card__value {
  font-family: var(--mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: var(--ls-tight);
}

/* — Search Filter Box — */
.sb-dp-bo-filter {
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
.sb-dp-bo-filter__header {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--charcoal);
  padding: 10px var(--space-4);
  border-bottom: 1px solid var(--border);
  letter-spacing: var(--ls-normal);
}
.sb-dp-bo-filter-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: var(--text-11);
}
.sb-dp-bo-filter-table td {
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--alpha-4);
}
.sb-dp-bo-filter-table td:first-child {
  background: rgba(26,26,26,0.02);  /* NOTE: 근사 alpha 토큰 미존재 (0.02/0.025), 치환 보류 */
  font-weight: 600;
  width: 100px;
}

/* — Action Button Row — */
.sb-dp-bo-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.sb-dp-bo-btn {
  padding: var(--space-2) 28px;
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 600;
}
.sb-dp-bo-btn--outline {
  border: 1px solid var(--charcoal);
  color: var(--charcoal);
}
.sb-dp-bo-btn--filled {
  background: var(--charcoal);
  color: var(--text-inverse);
}
.sb-dp-bo-btn--sm {
  padding: var(--space-1) 14px;
  font-size: var(--text-2xs);
}

/* — Data Table Header — */
.sb-dp-bo-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.sb-dp-bo-list-header__title {
  font-family: var(--sans);
  font-size: var(--text-13);
  font-weight: 600;
  color: var(--charcoal);
}
.sb-dp-bo-list-header__tools {
  display: flex;
  gap: 8px;
}
.sb-dp-bo-select {
  border: 1px solid var(--alpha-12);
  padding: var(--space-1) var(--space-3);
  font-family: var(--sans);
  font-size: var(--text-2xs);
  color: var(--text-secondary);
}
.sb-dp-bo-placeholder {
  font-family: var(--sans);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-2);
}

/* — Dropdown (Open State) — */
.sb-dp-bo-dropdown {
  position: relative;
  display: inline-block;
}
.sb-dp-bo-dropdown__trigger {
  border: 1px solid var(--charcoal);
  padding: 6px 14px;
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--charcoal);
}
.sb-dp-bo-dropdown__panel {
  border: 1px solid var(--charcoal);
  background: var(--bg);
  margin-top: -1px;
}
.sb-dp-bo-dropdown__option {
  padding: var(--space-2) 14px;
  font-family: var(--sans);
  font-size: var(--text-xs);
  border-top: 1px solid var(--alpha-4);
}
.sb-dp-bo-dropdown__option:first-child {
  border-top: none;
}
.sb-dp-bo-dropdown__option--active {
  font-weight: 600;
  background: var(--alpha-3);
}
.sb-dp-bo-dropdown__label {
  font-family: var(--sans);
  font-size: var(--text-11);
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  letter-spacing: var(--ls-wide);
}

/* — Detail Info Table — */
.sb-dp-bo-detail-title {
  font-family: var(--sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-4);
}
.sb-dp-bo-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.sb-dp-bo-info-card {
  border: 1px solid var(--border);
  padding: var(--space-4);
}
.sb-dp-bo-info-card__label {
  font-family: var(--sans);
  font-size: var(--text-11);
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  letter-spacing: var(--ls-wide);
}
.sb-dp-bo-info-card__value {
  font-family: var(--sans);
  font-size: var(--text-2xs);
  color: var(--text-secondary);
  line-height: 1.8;
}

/* — Admin Modal — */
.sb-dp-bo-modal {
  border: 1px solid var(--border);
}
.sb-dp-bo-modal__close {
  text-align: right;
  padding: 12px 16px 0;
}
.sb-dp-bo-modal__body {
  padding: 8px 32px 24px;
  text-align: center;
}
.sb-dp-bo-modal__body--no-input {
  padding: 32px 32px 24px;
  text-align: center;
}
.sb-dp-bo-modal__title {
  font-family: var(--sans);
  font-size: var(--text-16);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: var(--space-4);
  letter-spacing: var(--ls-tight);
}
.sb-dp-bo-modal__desc {
  font-family: var(--sans);
  font-size: var(--text-13);
  color: var(--text-secondary);
  letter-spacing: var(--ls-normal);
}
.sb-dp-bo-modal__input {
  border: 1px solid var(--alpha-12);
  padding: 10px 14px;
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: left;
  background: var(--bg);
  width: 100%;
  box-sizing: border-box;
}
.sb-dp-bo-modal__actions {
  display: flex;
}
.sb-dp-bo-modal__btn {
  flex: 1;
  padding: 14px;
  text-align: center;
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--ls-normal);
}
.sb-dp-bo-modal__btn--cancel {
  background: var(--neutral-90);
  color: var(--charcoal);
}
.sb-dp-bo-modal__btn--confirm {
  background: var(--charcoal);
  color: var(--text-inverse);
}

/* ── ㉝ Guide Text: 안내 텍스트 영역 ──
   사용: MKT-003 업로드 방식 선택 가이드 등 */
.sb-dp-guide-text {
  padding: var(--space-4) var(--space-6) 0;
}
.sb-dp-guide-text p {
  font-size: var(--text-13);
  font-family: var(--sans);
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
  letter-spacing: var(--ls-normal);
}
.sb-dp-guide-text .muted {
  color: var(--text-muted);
}

/* ── ㉞ Upload Card: 업로드 방식 선택 카드 ──
   사용: MKT-003 간편/직접 업로드 카드 */
.sb-dp-upload-card {
  padding: var(--space-4) var(--space-6) var(--space-2);
}
.sb-dp-upload-card + .sb-dp-upload-card {
  padding-top: 0;
  padding-bottom: var(--space-6);
}
.sb-dp-upload-card__inner {
  position: relative;
  overflow: hidden;
  padding: 20px 20px 18px;
}
.sb-dp-upload-card__inner > *:not(.sb-dp-upload-card__texture) {
  position: relative;
  z-index: 1;
}
.sb-dp-upload-card--quick .sb-dp-upload-card__inner {
  background: var(--paper);
}
.sb-dp-upload-card--quick .sb-dp-upload-card__texture {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23000' opacity='0.025'/%3E%3Crect width='1' height='1' x='2' y='2' fill='%23000' opacity='0.018'/%3E%3C/svg%3E");
  background-size: 4px 4px;
  opacity: 0.6;
  pointer-events: none;
}
.sb-dp-upload-card--manual .sb-dp-upload-card__inner {
  background: rgba(26,26,26,0.025);  /* NOTE: 근사 alpha 토큰 미존재 (0.02/0.025), 치환 보류 */
  border: 1px solid var(--border);
}
.sb-dp-upload-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.sb-dp-upload-card__mono {
  font-family: var(--mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-widest);
  color: var(--text-muted);
  text-transform: uppercase;
}
.sb-dp-upload-card__recommend {
  font-size: var(--text-2xs);
  font-weight: 600;
  font-family: var(--sans);
  color: var(--red-brand);
  border: 1px solid var(--red-brand);
  padding: 2px 7px;
  letter-spacing: var(--ls-wide);
}
.sb-dp-upload-card__icon {
  display: block;
  margin-bottom: 10px;
}
.sb-dp-upload-card__icon svg {
  stroke: var(--charcoal);
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  fill: none;
}
.sb-dp-upload-card--manual .sb-dp-upload-card__icon svg {
  opacity: 1;
}
.sb-dp-upload-card__title {
  font-weight: 700;
  font-family: var(--sans);
  color: var(--charcoal);
  margin: 0 0 5px;
  line-height: 1.2;
}
.sb-dp-upload-card--quick .sb-dp-upload-card__title {
  font-size: var(--text-lg);
  letter-spacing: var(--ls-tight);
}
.sb-dp-upload-card--manual .sb-dp-upload-card__title {
  font-size: var(--text-lg);
  letter-spacing: var(--ls-tight);
}
.sb-dp-upload-card__sub {
  font-size: var(--text-xs);
  font-family: var(--sans);
  letter-spacing: var(--ls-normal);
  line-height: 1.5;
  margin: 0 0 18px;
}
.sb-dp-upload-card--quick .sb-dp-upload-card__sub {
  color: var(--text-secondary);
}
.sb-dp-upload-card--manual .sb-dp-upload-card__sub {
  color: var(--text-muted);
}
.sb-dp-upload-card__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sb-dp-upload-card__action-label {
  font-size: var(--text-xs);
  font-family: var(--sans);
  letter-spacing: var(--ls-normal);
}
.sb-dp-upload-card--quick .sb-dp-upload-card__action-label {
  font-weight: 600;
  color: var(--charcoal);
}
.sb-dp-upload-card--manual .sb-dp-upload-card__action-label {
  font-weight: 500;
  color: var(--text-muted);
}
.sb-dp-upload-card__action svg {
  stroke: var(--charcoal);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  fill: none;
}
.sb-dp-upload-card--manual .sb-dp-upload-card__action svg {
  opacity: 0.35;
}

/* ── ㉟ Completion: 완료 화면 중앙 레이아웃 ──
   사용: MKT-007, MKT-011 등록 완료 화면 */
.sb-dp-completion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.sb-dp-completion--full {
  height: calc(100% - 48px);
  padding: 0 40px;
}
.sb-dp-completion--compact {
  height: calc(100% - 130px);
  padding: 0 24px;
}
.sb-dp-completion__icon {
  margin-bottom: var(--space-8);
}
.sb-dp-completion__icon--boxed {
  width: 64px;
  height: 64px;
  border: 1.5px solid var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
}
.sb-dp-completion__icon svg {
  stroke: var(--charcoal);
  stroke-linecap: square;
  stroke-linejoin: miter;
  fill: none;
}
.sb-dp-completion__title {
  font-size: var(--text-lg);
  font-weight: 700;
  font-family: var(--sans);
  color: var(--charcoal);
  margin: 0 0 var(--space-3);
  text-align: center;
  letter-spacing: var(--ls-tight);
  line-height: 1.4;
}
.sb-dp-completion__title--sm {
  font-size: 18px;
  margin: 0;
}
.sb-dp-completion__desc {
  font-size: var(--text-sm);
  font-weight: 400;
  font-family: var(--sans);
  color: var(--text-muted);
  margin: 0 0 56px;
  text-align: center;
  letter-spacing: var(--ls-normal);
  line-height: 1.6;
}
.sb-dp-completion__cta-wrap {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  padding: 0 var(--space-6);
}
.sb-dp-completion__cta-wrap--bottom-34 {
  bottom: 34px;
}
.sb-dp-completion__cta-wrap--bottom-42 {
  bottom: 42px;
}

/* ── ㊱ Deleted Phone: 삭제된 화면 플레이스홀더 ──
   사용: MKT-007 Phone 1 삭제 표시 등 */
.sb-dp-deleted {
  background: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-dp-deleted__label {
  font-size: var(--text-13);
  font-family: var(--sans);
  color: var(--text-on-dark-faint);
  text-decoration: line-through;
}

/* ── ㊱ Notification Card: 알림 카드 (HOM-004) ──
   사용: HOM-004 알림 내역 */
/* ── Editorial Notification Card (HOM-004 redesign) ── */
.sb-dp-noti-card {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-bottom: 1px solid var(--alpha-6);
  border-left: 3px solid transparent;
  background: var(--bg);
  transition: background var(--dur-fast) var(--ease);
}
.sb-dp-noti-card--unread {
  background: var(--alpha-3);
  border-left-color: var(--red-brand);
}
.sb-dp-noti-card__category {
  font-size: var(--text-2xs);
  font-family: var(--mono);
  font-weight: 500;
  color: var(--text-muted);
  margin: 0;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}
.sb-dp-noti-card--unread .sb-dp-noti-card__category {
  color: var(--red-brand);
}
.sb-dp-noti-card__body {
  font-size: var(--text-sm);
  font-family: var(--sans);
  font-weight: 400;
  color: var(--charcoal);
  margin: 0;
  line-height: 1.6;
  letter-spacing: var(--ls-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sb-dp-noti-card__time {
  font-size: var(--text-2xs);
  font-family: var(--mono);
  font-weight: 400;
  color: var(--text-muted);
  margin: 0;
  letter-spacing: var(--ls-wide);
}

/* ── ㊲ Onboarding Copy: 온보딩 카피 영역 (LOG-007, LOG-008) ──
   사용: LOG-007 온보딩 3단계, LOG-008 기존 사용자 */
.sb-dp-onboard-copy {
  padding: var(--space-5) var(--space-6) 0;
}
.sb-dp-onboard-copy__title {
  font-size: var(--text-lg);
  font-weight: 700;
  font-family: var(--sans);
  color: var(--charcoal);
  margin: 0 0 var(--space-1);
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
}
.sb-dp-onboard-copy__sub {
  font-size: var(--text-sm);
  font-weight: 400;
  font-family: var(--sans);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
  letter-spacing: var(--ls-normal);
}
/* legacy alias */
.sb-dp-onboard-copy__desc {
  font-size: var(--text-sm);
  font-weight: 400;
  font-family: var(--sans);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
  letter-spacing: var(--ls-normal);
}

/* ── ㊳ Mosaic Grid: 3단 작품 모자이크 (LOG-008) ──
   사용: LOG-008 온보딩 이미지 영역 */
.sb-dp-mosaic {
  margin: var(--space-5) var(--space-6);
  height: 542px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 3px;
}
.sb-dp-mosaic__strip {
  display: grid;
  gap: 3px;
  overflow: hidden;
}
.sb-dp-mosaic__strip--2col {
  grid-template-columns: 1fr 1fr;
}
.sb-dp-mosaic__strip--3col {
  grid-template-columns: 1fr 1fr 1fr;
}
.sb-dp-mosaic__cell {
  overflow: hidden;
}
.sb-dp-mosaic__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sb-dp-mosaic__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.02), var(--alpha-40));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.sb-dp-mosaic__overlay-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  font-family: var(--mono);
  color: rgba(255,255,255,0.7);  /* NOTE: 비브랜드 storyboard 전용 색상, 치환 보류 */
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}

/* ── ㊴ System Modal (LOG-009): 정사각형 중앙 모달 ──
   사용: LOG-009 시스템 모달 */
.sb-dp-sys-modal-dim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-dim);
  z-index: 5;
}
.sb-dp-sys-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78%;
  aspect-ratio: 1/1;
  background: var(--bg);
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 25px;
}
.sb-dp-sys-modal__text {
  text-align: center;
  padding: 0 24px;
}
.sb-dp-sys-modal__title {
  font-size: var(--text-md);
  font-weight: 700;
  font-family: var(--sans);
  color: var(--charcoal);
  margin: 0 0 var(--space-2);
  letter-spacing: var(--ls-tight);
}
.sb-dp-sys-modal__desc {
  font-size: var(--text-md);
  font-weight: 500;
  font-family: var(--sans);
  color: var(--text-secondary);
  margin: 0;
  letter-spacing: var(--ls-normal);
}
.sb-dp-sys-modal__actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 0;
}
.sb-dp-sys-modal__btn {
  flex: 1;
  height: 50px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  font-weight: 600;
  font-family: var(--sans);
  color: var(--text-inverse);
  letter-spacing: var(--ls-normal);
  cursor: pointer;
}
.sb-dp-sys-modal__btn--secondary {
  background: var(--text-secondary);
}
.sb-dp-sys-modal__btn--primary {
  background: var(--cta-gradient);
}

/* ── ㊵ Banner Placeholder (HOM-005) ──
   사용: HOM-005 대배너 이미지 플레이스홀더 */
.sb-dp-banner-placeholder {
  margin: 16px 0 0;
  height: 200px;
  background: var(--paper);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sb-dp-banner-placeholder__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.sb-dp-banner-placeholder__label {
  font-family: var(--mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--alpha-25);
}

/* ── ㊶ Market Card Text Area ──
   사용: HOM-005 작품 카드 텍스트 영역 래퍼 */
.sb-dp-market-card__info {
  margin: 10px 0 0;
}

/* ── Thumb Texture (공통 13+ files) ──
   사용: 작품 썸네일 위 linen 도트 텍스처 오버레이 */
.sb-dp-thumb-texture {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23000' opacity='0.025'/%3E%3Crect width='1' height='1' x='2' y='2' fill='%23000' opacity='0.018'/%3E%3C/svg%3E");
  background-size: 4px 4px;
  opacity: 0.6;
}

/* ── CTA Float (MYP-003, MYP-004+) ──
   사용: 오른쪽 하단 플로팅 CTA 버튼 래퍼 */
.sb-dp-cta-float {
  position: absolute;
  bottom: 50px;
  right: var(--space-6);
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .sb-meta { grid-template-columns: repeat(2, 1fr); }
  .sb-meta-cell:nth-child(2) { border-right: none; }
  .sb-content { grid-template-columns: 1fr; }
  .sb-wireframe { position: static; }
}
@media (max-width: 640px) {
  .sb-meta { grid-template-columns: 1fr; }
  .sb-meta-cell { border-right: none; border-bottom: 1px solid var(--charcoal); }
  .sb-meta-cell:last-child { border-bottom: none; }
  .sb-wireframe-frame { width: 100%; }
}