/* ================================================================
   pages/components.css — 컴포넌트 쇼케이스 전용 스타일
   ================================================================ */

/* ── 페이지 헤더 ──────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wd-space-lg);
  margin-bottom: var(--wd-space-xl);
  flex-wrap: wrap;
}

.page-title {
  font-size: var(--wd-text-2xl);
  font-weight: var(--wd-weight-bold);
  color: var(--wd-text-dark);
  margin: 0 0 4px;
}

.page-desc {
  font-size: var(--wd-text-sm);
  color: var(--wd-text-muted);
  margin: 0;
}

/* ── 섹션 퀵 내비 ─────────────────────────────────────────────── */
.comp-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── 서브페이지 링크 (CRUD 쇼케이스 등) ───────────────────────── */
.comp-subpages {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.comp-subpages .btn svg:first-child { margin-right: 2px; }
.comp-subpages .btn svg:last-child  { margin-left: 4px; opacity: 0.85; }

.comp-nav-link {
  font-size: var(--wd-text-xs);
  font-weight: var(--wd-weight-semibold);
  color: var(--wd-text-muted);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: var(--wd-radius-full);
  border: 1px solid var(--wd-border);
  transition: all var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
}

.comp-nav-link:hover {
  background: var(--wd-primary);
  border-color: var(--wd-primary);
  color: #fff;
}

/* ── 섹션 ──────────────────────────────────────────────────────── */
.comp-section {
  margin-bottom: var(--wd-space-2xl);
  scroll-margin-top: 80px;   /* fixed 헤더 높이만큼 오프셋 */
}

.comp-section-head {
  display: flex;
  align-items: flex-start;
  gap: var(--wd-space-md);
  margin-bottom: var(--wd-space-lg);
}

.comp-section-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--wd-primary);
  color: var(--wd-text-inverse);
  font-size: var(--wd-text-xs);
  font-weight: var(--wd-weight-bold);
  border-radius: var(--wd-radius-sm);
  letter-spacing: 0.04em;
}

.comp-section-title {
  font-size: var(--wd-text-base);
  font-weight: var(--wd-weight-bold);
  color: var(--wd-text-dark);
  margin: 0 0 2px;
}

.comp-section-desc {
  font-size: var(--wd-text-sm);
  color: var(--wd-text-muted);
  margin: 0;
}

.comp-section-desc code {
  font-size: var(--wd-text-xs);
  background: var(--wd-primary-light);
  color: var(--wd-primary);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ── 컴포넌트 레이블 ──────────────────────────────────────────── */
.comp-label {
  font-size: var(--wd-text-xs);
  font-weight: var(--wd-weight-bold);
  color: var(--wd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--wd-space-md);
  padding-bottom: var(--wd-space-sm);
  border-bottom: 1px dashed var(--wd-border);
}

/* ── 컴포넌트 행 (가로 나열) ──────────────────────────────────── */
.comp-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wd-space-sm);
  align-items: flex-start;
}

/* ── comp-label 내 code 태그: bold 상속 방지 ────────────────────── */
.comp-label code {
  font-size: var(--wd-text-xs);
  font-weight: var(--wd-weight-normal);
  background: var(--wd-primary-light);
  color: var(--wd-primary);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ── 구분선 ────────────────────────────────────────────────────── */
.comp-divider {
  border: none;
  border-top: 1px solid var(--wd-border);
  margin: var(--wd-space-md) 0;
}

/* ── 섹션 간 구분 배너 ────────────────────────────────────────── */
.comp-section + .comp-section {
  border-top: 2px solid var(--wd-border);
  padding-top: var(--wd-space-xl);
}

/* ── 배경 레이어 미리보기 컨테이너 ───────────────────────────── */
.comp-bg-preview {
  position: relative;
  overflow: hidden;
  height: 200px;
  border-radius: var(--wd-radius-lg);
  border: 1px solid var(--wd-border);
  background: linear-gradient(145deg, #e8f0fc 0%, #eef3fb 50%, #e6edf8 100%);
}

/* position:fixed 클래스를 컨테이너 안에서 absolute로 재정의 */
.comp-bg-preview .db-bg-grid,
.comp-bg-preview .db-bg-radial,
.comp-bg-preview .db-orb {
  position: absolute;
}

[data-theme="dark"] .comp-bg-preview {
  background: linear-gradient(145deg, #0f1118 0%, #13151f 50%, #0d1017 100%);
}

/* ── 코드 스니펫 블록 ─────────────────────────────────────────── */
.comp-code {
  background: var(--wd-bg-subtle, #f4f6fa);
  border: 1px solid var(--wd-border);
  border-radius: var(--wd-radius-md);
  padding: var(--wd-space-md) var(--wd-space-lg);
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: var(--wd-text-xs);
  line-height: 1.7;
  color: var(--wd-text);
  overflow-x: auto;
  margin: 0;
  white-space: pre;
}

/* ── 쇼케이스 전용 유틸리티 ────────────────────────────────────
   반복되는 inline 스타일(뮤티드 sm 텍스트 · 미리보기 박스 · 캡션)을
   최소 수의 클래스로 대체. 토큰은 tokens.css 참조. */

/* 데모 카드 body 등에서 중앙 정렬 + 뮤티드 sm 텍스트 */
.comp-preview-center {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wd-text-muted);
  font-size: var(--wd-text-sm);
}

/* 단순 뮤티드 sm 텍스트 (중앙 정렬 없이) */
.comp-muted-sm {
  color: var(--wd-text-muted);
  font-size: var(--wd-text-sm);
}

/* 극소 캡션 — 타임스탬프, 보조 힌트 */
.comp-caption {
  color: var(--wd-text-muted);
  font-size: var(--wd-text-xs);
}

/* 본문 sm — 카드 내 설명 문단 */
.comp-body-sm {
  color: var(--wd-text);
  font-size: var(--wd-text-sm);
  line-height: 1.7;
}

/* comp-row 정렬 변형 */
.comp-row--center { align-items: center; }
.comp-row--end    { align-items: flex-end; }

/* 세로 구분선 — 쇼케이스 내부 버튼 그룹 구분 */
.comp-vsep {
  flex-shrink: 0;
  width: 1px;
  height: 28px;
  background: var(--wd-border);
}

/* 세로 스택 (알림 데모 등 소형 수직 리스트) */
.comp-stack-sm {
  display: flex;
  flex-direction: column;
  gap: var(--wd-space-sm);
}

/* 아이콘 + 텍스트 인라인 정렬 */
.icon-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 프라이머리 컬러 아이콘 */
.icon-primary {
  color: var(--wd-primary);
}

[data-theme="dark"] .comp-code {
  background: #1a1d2e;
  border-color: rgba(255,255,255,0.08);
}

/* ── 배경 레이어 정보 테이블 ──────────────────────────────────── */
.bg-layer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wd-text-sm);
}

.bg-layer-table th {
  text-align: left;
  font-size: var(--wd-text-xs);
  font-weight: var(--wd-weight-bold);
  color: var(--wd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-bottom: 2px solid var(--wd-border);
}

.bg-layer-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--wd-border);
  vertical-align: top;
  color: var(--wd-text);
}

.bg-layer-table tr:last-child td {
  border-bottom: none;
}

.bg-layer-table code {
  font-size: var(--wd-text-xs);
  background: var(--wd-primary-light);
  color: var(--wd-primary);
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

.bg-layer-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ── 데모 블록 내 소제목 ────────────────────────────────────────── */
.comp-sub-title {
  font-size: var(--wd-text-xs);
  font-weight: var(--wd-weight-semibold);
  color: var(--wd-text-muted);
  margin-bottom: var(--wd-space-sm);
}

/* ── 데모 그룹 래퍼 (소제목 + 데모 행 묶음) ───────────────────── */
.comp-demo-group {
  margin-bottom: var(--wd-space-lg);
}

/* ── 데모 세로 스택 (flex column, 거터 시각화 등) ─────────────── */
.comp-demo-stack {
  display: flex;
  flex-direction: column;
  gap: var(--wd-space-sm);
}

/* ── 그리드 시각화 셀 (sec-grid 전용) ──────────────────────────── */
.grid-demo-cell {
  background: var(--wd-primary-light);
  border: 1.5px solid var(--wd-primary);
  border-radius: var(--wd-radius-md);
  padding: 14px 16px;
  font-size: var(--wd-text-sm);
  font-weight: var(--wd-weight-bold);
  color: var(--wd-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 52px;
}

/* span 표시 뱃지 */
.grid-demo-cell span {
  font-size: var(--wd-text-xs);
  font-weight: var(--wd-weight-semibold);
  background: var(--wd-primary);
  color: var(--wd-text-inverse);
  padding: 1px 6px;
  border-radius: var(--wd-radius-full);
}

/* 메인 영역 강조 */
.grid-demo-cell--main {
  background: rgba(26, 115, 232, 0.12);
  border-color: var(--wd-primary);
}

/* 세로 방향 (반응형 클래스명 표시용) */
.grid-demo-cell--col {
  flex-direction: column;
  gap: 2px;
}

/* g-0 거터 데모 — radius 제거 */
.grid-demo-cell--flush {
  border-radius: 0;
}

/* 거터 데모 셀 — xs 폰트 */
.grid-demo-cell--xs {
  font-size: var(--wd-text-xs);
}

/* 반응형 셀 내 클래스명 레이블 */
.comp-cell-label {
  font-size: var(--wd-text-xs);
  font-weight: var(--wd-weight-normal);
}

[data-theme="dark"] .grid-demo-cell {
  background: rgba(26, 115, 232, 0.12);
  border-color: rgba(26, 115, 232, 0.5);
}
[data-theme="dark"] .grid-demo-cell--main {
  background: rgba(26, 115, 232, 0.2);
}

/* ── 글래스 카드 데모 배경 영역 ──────────────────────────────────
   glass 카드를 그라디언트 배경 위에 올려야 backdropfilter · glow 효과가
   실제처럼 표현됨. 라이트/다크 각각 적합한 그라디언트 사용.         */
.glass-demo-area {
  padding: var(--wd-space-lg);
  border-radius: var(--wd-radius-lg);
  background: linear-gradient(135deg, #dbeafe 0%, #ede9fe 50%, #d1fae5 100%);
  margin-bottom: var(--wd-space-md);
}
[data-theme="dark"] .glass-demo-area {
  background: linear-gradient(135deg, #0d1225 0%, #16113a 50%, #0d1622 100%);
}

/* ── DataTables 2.x + FixedColumns 5.x — WiseDairy 디자인 통합 (sec-fixed-col-table) ── */
#sec-fixed-col-table .dt-container {
  font-size: var(--wd-text-sm);
}
#sec-fixed-col-table table.dataTable {
  border-collapse: collapse;
  width: 100% !important;
}
#sec-fixed-col-table table.dataTable thead th {
  background: var(--wd-table-hd);
  color: var(--wd-text-muted);
  font-size: var(--wd-text-xs);
  font-weight: var(--wd-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 10px;
  border-bottom: 1px solid var(--wd-border);
  text-align: center;
  position: relative;
}
/* 정렬 가능 컬럼: 소팅 아이콘 공간 확보 (좌우 대칭 패딩) */
#sec-fixed-col-table table.dataTable thead th.dt-orderable-asc,
#sec-fixed-col-table table.dataTable thead th.dt-orderable-desc {
  cursor: pointer;
  padding-inline: 22px;
}
/* 소팅 아이콘 — th 우측 끝에 고정, 텍스트와 분리 */
#sec-fixed-col-table table.dataTable thead th .dt-column-order {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
}
/* 정렬 중 컬럼 강조 */
#sec-fixed-col-table table.dataTable thead th.dt-ordering-asc .dt-column-order::before,
#sec-fixed-col-table table.dataTable thead th.dt-ordering-desc .dt-column-order::after { opacity: 1; color: var(--wd-primary); }
#sec-fixed-col-table table.dataTable tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--wd-border);
  color: var(--wd-text);
  vertical-align: middle;
  text-align: center;
}
#sec-fixed-col-table table.dataTable tbody tr:last-child td { border-bottom: none; }
#sec-fixed-col-table table.dataTable tbody tr:hover td { background: #f8fafc; }
/* 고정 컬럼 배경 — sticky 셀이 스크롤 뒤 콘텐츠를 덮어야 함 (좌·우 모두) */
#sec-fixed-col-table table.dataTable thead th.dtfc-fixed-start,
#sec-fixed-col-table table.dataTable thead th.dtfc-fixed-end { background: var(--wd-table-hd); }
#sec-fixed-col-table table.dataTable tbody td.dtfc-fixed-start,
#sec-fixed-col-table table.dataTable tbody td.dtfc-fixed-end { background: var(--wd-default); }
#sec-fixed-col-table table.dataTable tbody tr:hover td.dtfc-fixed-start,
#sec-fixed-col-table table.dataTable tbody tr:hover td.dtfc-fixed-end { background: #f8fafc; }
/* 우측 고정 컬럼 그림자 방향 반전 */
#sec-fixed-col-table table.dataTable tbody td.dtfc-fixed-end { box-shadow: -2px 0 6px rgba(0,0,0,.06); }
#sec-fixed-col-table table.dataTable thead th.dtfc-fixed-end { box-shadow: -2px 0 6px rgba(0,0,0,.06); }
/* 스크롤 헤더/바디 */
#sec-fixed-col-table .dt-scroll-head { border-bottom: none; }

/* ── 글래스 카드 내 수치 셀 ─────────────────────────────────────
   카드 내부의 반투명 수치 박스. 라이트=흰 반투명, 다크=미세한 밝기. */
.glass-stat-cell {
  text-align: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.50);
  border-radius: var(--wd-radius-md);
}
[data-theme="dark"] .glass-stat-cell {
  background: rgba(255, 255, 255, 0.06);
}
.glass-stat-value {
  font-size: var(--wd-text-xl);
  font-weight: 800;
  color: var(--wd-text-dark);
}
.glass-stat-label {
  font-size: var(--wd-text-xs);
  color: var(--wd-text-muted);
  margin-top: 4px;
}

/* ── 그룹 섹션 내 서브 헤드 (테이블 그룹 등) ─────────────────────── */
.comp-sub-group-head {
  margin: var(--wd-space-2xl) 0 var(--wd-space-lg);
  padding-bottom: var(--wd-space-sm);
  border-bottom: 1px dashed var(--wd-border-strong);
}
.comp-section-head + .comp-sub-group-head { margin-top: 0; }
.comp-sub-group-head h3 {
  font-size: var(--wd-text-base);
  font-weight: var(--wd-weight-bold);
  color: var(--wd-text-dark);
  margin: 0 0 2px;
}
.comp-sub-group-head p {
  font-size: var(--wd-text-sm);
  color: var(--wd-text-muted);
  margin: 0;
}