/* ============================================================
   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: #FF6F00;
  color: #fff;
  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 rgba(0,0,0,0.15);
}
/* 영역 표시 — 주황색 점선 */
.sb-zone {
  position: absolute;
  border: 2px dashed #FF6F00;
  pointer-events: none;
  z-index: 1;
}

/* ── Wireframe Phone Components (66화면 공통) ── */
.sb-wf-statusbar {
  height: 47px;
  background: #fff;
  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: #fff;
  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: #fff;
  font-family: var(--sans);
  font-weight: 500;
}
.sb-wf-badge-row {
  display: flex;
  justify-content: center;
}
.sb-wf-badge {
  background: #FF6F00;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 12px;
  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 #FF6F00;
}
.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 #FF6F00;
  pointer-events: none;
  z-index: 1;
}

.sb-wf-homebar {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 5px;
  background: var(--charcoal);
  border-radius: 5px;
}

/* ── 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;
}

/* ── Section Title (카테고리 구분) ── */
.sb-section-title {
  font-family: var(--mono);
  font-size: var(--text-11);
  font-weight: 600;
  letter-spacing: 0.14em;
  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: -0.03em;
  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: 0.08em;
  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: 0.14em;
  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: 0.14em;
  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: -0.03em;
  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: 393px 1fr;
  gap: var(--space-8);
  align-items: start;
}
.sb-design-phone {
  position: relative;
  width: 393px;
  border: 1px solid var(--charcoal);
  background: var(--bg, #FAFAF8);
  overflow: hidden;
}
/* 디자인 폰 내부 요소 */
.sb-dp-statusbar {
  height: 47px;
  background: var(--bg, #FAFAF8);
  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-dp-navbar {
  height: 48px;
  background: var(--bg, #FAFAF8);
  display: flex;
  align-items: center;
  padding: 0 24px;
}
.sb-dp-body {
  padding: 16px 32px 0;
}
.sb-dp-title {
  font-size: 24px;
  font-weight: 700;
  font-family: var(--sans);
  color: var(--charcoal);
  letter-spacing: -0.03em;
  margin-bottom: 8px;
  line-height: 1.25;
}
.sb-dp-subtitle {
  font-size: 14px;
  font-family: var(--sans);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
  letter-spacing: -0.005em;
}

/* ── Hero: 브랜드 비주얼 — Paper-Catalog Metaphor ──
   "백화점 VIP 라운지에서 받는 브랜드 카드" 메타포
   배경: warm paper (#F0EDE6) + linen 텍스처 + 미세 vignette
   모노그램은 종이 위에 각인된 느낌 (shadow → emboss)
   모션: 절제 — breathing dot만 허용 */
.sb-dp-hero {
  margin: 24px 32px;
  height: 220px;
  background: var(--paper, #F0EDE6);
  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%, rgba(17,17,17,0.04) 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 rgba(0,0,0,0.06));
  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: 0.14em;
  text-transform: uppercase;
  color: rgba(26,26,26,0.25);
  z-index: 1;
}
/* 플로팅 지오메트리 — 제거: 절제가 품위를 만든다 */
.sb-dp-hero-geo { display: none; }

.sb-dp-btn-stack {
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sb-dp-btn {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-family: var(--sans);
  font-weight: 600;
  position: relative;
  letter-spacing: -0.005em;
  transition: opacity var(--dur-fast, 150ms) ease;
}
/* 아이콘 토큰: --icon-md (20px), --icon-stroke (1.5) */
.sb-dp-btn svg {
  flex-shrink: 0;
  width: var(--icon-md, 20px);
  height: var(--icon-md, 20px);
}
.sb-dp-navbar svg {
  width: var(--icon-lg, 24px);
  height: var(--icon-lg, 24px);
}
.sb-dp-btn--kakao  { background: #FEE500; color: #191919; }
.sb-dp-btn--google { background: #fff; color: #333; border: 1px solid var(--neutral-85); }
.sb-dp-btn--apple  { background: #000; color: #fff; }
.sb-dp-btn--naver  { background: #03C75A; color: #fff; }
.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, #B22A30);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 14px;
  font-family: var(--sans);
  letter-spacing: -0.01em;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(178,42,48,0.25);
  animation: badgeFloat 2s ease-in-out 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, #B22A30);
}
.sb-dp-divider {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--sans);
  padding: 14px 0;
  margin: 0;
  position: relative;
  letter-spacing: 0.04em;
}
.sb-dp-divider::before,
.sb-dp-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 110px;
  height: 1px;
  background: rgba(26,26,26,0.08);
}
.sb-dp-divider::before { right: calc(50% + 20px); }
.sb-dp-divider::after  { left:  calc(50% + 20px); }
.sb-dp-homebar {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 5px;
  background: var(--charcoal);
  border-radius: 5px;
}
/* 디자인 토큰 테이블 */
.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: 11px;
  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;
}
.sb-content--multi .sb-wireframe-frame {
  flex: 1;
  width: auto;
}
.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: 1;
  width: auto;
}

/* ── 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%; }
}