/* 옵스원 디자인 템플릿(형태 축) — html[data-template] 선택 시에만 적용. 기본(속성 없음)은 현행 레이아웃 무변경.
   색은 스킨 축(skins.css)이, 형태(여백·반경·그림자·밀도·타이포)는 이 파일이 담당한다 — 두 축은 독립·조합 가능.
   토큰(--r-*·--shadow-*) 오버라이드는 var()를 쓰는 앱 전 컴포넌트에 자동 전파된다. 색 토큰은 건드리지 않는다(스킨 담당). */

/* ── 여유 대시보드 (dash) — 넉넉한 여백·큰 라운딩·부드럽고 넓은 그림자·큰 헤딩. Conceptzilla 참조 미감. ── */
html[data-template="dash"] {
  /* 큰 라운딩 — 카드·버튼·칩·모달 전부 둥글게 */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  /* 부드럽고 넓게 퍼지는 그림자 — 대시보드 카드 뜬 느낌(네온 글로우 아님, 저채도 잉크 확산) */
  --shadow-xs: 0 1px 3px rgba(17,24,39,.04);
  --shadow-sm: 0 6px 20px rgba(17,24,39,.06);
  --shadow-md: 0 16px 44px rgba(17,24,39,.09);
  --shadow-lg: 0 30px 70px rgba(17,24,39,.14);
}

/* 다크에서도 형태(여백·반경)는 같게 유지하되, 그림자만 다크용으로 더 짙게(라이트 그림자가 다크에서 안 보임) */
html[data-template="dash"][data-theme="dark"] {
  --shadow-xs: 0 1px 3px rgba(0,0,0,.4);
  --shadow-sm: 0 6px 20px rgba(0,0,0,.5);
  --shadow-md: 0 16px 44px rgba(0,0,0,.6);
  --shadow-lg: 0 30px 70px rgba(0,0,0,.7);
}

/* ── 넉넉한 여백 — 본문 컨테이너 ── */
html[data-template="dash"] .page { padding: 26px 44px 72px; }
html[data-template="dash"] .wms-wrap { padding: 32px 40px 80px; }

/* ── 큰 헤딩 — 화면 제목 시원하게 ── */
html[data-template="dash"] .page-title { margin: 10px 0 28px; }
html[data-template="dash"] .page-title h1,
html[data-template="dash"] .page-title-text h1 { font-size: 32px; letter-spacing: -.03em; }
html[data-template="dash"] .page-title .sub,
html[data-template="dash"] .page-title-text .sub { margin-top: 10px; font-size: 15.5px; }

/* ── 카드·패널 — 그림자 한 단계 띄우고 헤더 여백 확대 ── */
html[data-template="dash"] .panel { box-shadow: var(--shadow-sm); }

/* ── 통계 스트립(KPI) — 셀 여백 키워 숫자 강조 ── */
html[data-template="dash"] .stat-cell { padding: 18px 22px; }

/* ── 홈 대시보드/피드/칸반 템플릿 컨테이너도 더 넓게 ── */
html[data-template="dash"] .htpl { padding-top: 32px; }

/* ── 모바일 — 여백은 줄이되 라운딩·그림자는 유지 ── */
@media (max-width: 900px) {
  html[data-template="dash"] .page { padding: 16px 18px calc(var(--bottomnav-h) + 120px); }
  html[data-template="dash"] .wms-wrap { padding: 18px 16px 96px; }
  html[data-template="dash"] .page-title h1,
  html[data-template="dash"] .page-title-text h1 { font-size: 26px; }
}