/* ===========================================================
   파덕라이트 공통 스타일 - Liquid Glass × iMessage
   =========================================================== */
/* ════════════════════════════════════════════════════════════════════
   파덕라이트 웹 대시보드 — 디자인 시스템 (변경 금지 약속, 2026-05-08)
   ────────────────────────────────────────────────────────────────────
   이 규칙들은 사용자(Arix)가 명시적으로 정한 약속이다. 함부로 깨지 말 것.
   - 새 화면/컴포넌트 추가 시에도 동일하게 적용
   - 기존 코드 리팩터링 시에도 유지
   - 이걸 어기면 사용자가 빨간 박스보다 더 화낸다

   ▸ 폰트 크기 — 5단계 토큰만 사용. inline px 금지.
       --fs-xs (10px) : 라벨, 메타, 캡션, 보조 텍스트 (구 9~10px)
       --fs-sm (12px) : 본문 작은, 표 셀 sub, 메모 (구 11~12px)
       --fs-md (14px) : 본문 기본, 카드 본문, 강조 텍스트 (구 13~14px)
       --fs-lg (16px) : 섹션 헤더(h4), 카드 헤딩 (구 15~17px)
       --fs-xl (20px) : KPI 큰 숫자, 메인 제목, h3 (구 18~22px)
     ※ 32px(시계), 48px(메인 헤더) 같은 특수 용도는 그대로 둠.
     ※ font-size: 13px 같은 inline 값 추가하지 말 것 → var(--fs-md)로.

   ▸ 색상 — 반드시 CSS var() 사용. 하드코딩 hex 절대 금지.
       --chart-1~5         : 차트 시리즈 5색 (slate / sage / ochre / lavender / rose)
                             테마별로 muted 톤다운된 값. semantic 의미 통일:
                             chart-1=cool blue / chart-2=success green / chart-3=warning orange
                             chart-4=purple / chart-5=danger red
       --chart-1-soft~5-soft : 위 색의 옅은 배경 tint (rgba 0.15~0.22)
       --ink, --ink-sub    : 본문 글자, 보조 글자
       --bg-card-solid     : 카드 솔리드 배경 (도넛 segment border 등에도 사용)
       --bg-input          : 입력/회색 배경
       --border            : 테두리
       --c-primary         : 강조색 (정렬된 ▲▼ 등)
     ※ #34c759, #ff3b30 같은 iOS 시그니처 색은 절대 다시 박지 말 것.
       반드시 의미에 맞는 var(--chart-N) 또는 --ink-sub로.

   ▸ 이모지 — ONLINE/OFFLINE MD 영역에서 모두 제거 완료.
     새로 추가하지 말 것. 토스트/뱃지의 ✓✗ 같은 기능 표시는 예외 허용.

   ▸ 도넛 차트 (Chart.js)
     - cutout: '78%' (얇은 링, 모던)
     - borderWidth: 2 + borderColor: cvar('--bg-card-solid') (segment 분리)
     - hoverOffset: 4
     - donutInlineLabels plugin (5% 이상 segment 안에 % 표시)
     - donutLegendLabels generateLabels (라벨·금액·% 포함)
     - 범례 글자 색은 LegendItem.fontColor에 직접 박을 것.
       legend.labels.color 옵션만으론 generateLabels가 LegendItem 만들 때
       fontColor 미지정이면 적용 안 됨 (테마 전환 시 검정 고정 버그)
     - 차트 생성 직후 setTimeout(() => recolorCharts(), 50)
       → iframe 테마 동기화 race 안전망

   ▸ 정렬 가능한 표 (sortable)
     - common.js 의 enableTableSort()가 모든 <table>에 자동 부착
     - 동적 innerHTML로 테이블 그릴 때마다 명시 호출 필수:
         if (window.enableTableSort) window.enableTableSort();
     - sortable indicator: opacity .65 / weight 600 / size --fs-sm
     - 정렬 활성 ▲▼: var(--c-primary), --fs-sm

   ▸ 모바일 반응형
     - breakpoint: @media (max-width: 600px)
     - 7+ 컬럼 표는 모바일에서 카드 레이아웃으로 분기
       (예: TOP 5 SKU - .ov-desktop-only / .ov-mobile-only)
     - !important로 specificity 충돌 방지

   ▸ 테마 전파
     - 부모 frame이 iframe에 postMessage({type:'theme-applied',value:...})
     - 각 iframe은 message listener에서 documentElement.dataset.theme 갱신
       + recolorCharts() 호출
     - cvar() 결과가 빈 문자열이면 fallback 색 적용 ('|| #888' 패턴)

   ▸ 동적 코드 패치 규칙
     - 큰 파일 수정 시 _bak/<purpose>_<timestamp>/ 에 백업 후 진행
     - find-replace 패턴은 정확히 1회만 매치되도록 충분한 컨텍스트 포함
     - py_compile / node --check 로 변경 후 syntax 검증

   ▸ navigate (index.html)
     - try-catch에서 에러 시 view를 빨간 박스로 덮지 말 것 (silent + console.warn)
     - 빠른 탭 전환 시 race로 첫 호출이 throw, 두 번째 호출이 자연스레 덮음
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* 폰트 스케일 — inline px 대신 반드시 이 토큰만 사용할 것 */
  --fs-xs: 10px;  /* 라벨, 메타, 캡션 */
  --fs-sm: 12px;  /* 본문 작은, 표 셀 sub */
  --fs-md: 14px;  /* 본문 기본, 강조 */
  --fs-lg: 16px;  /* 섹션 헤더, 카드 헤딩 */
  --fs-xl: 20px;  /* KPI 큰 숫자, 메인 제목 */
}

:root {
  /* 베이스 톤 - iMessage 라이트 */
  --bg-app: #F2F2F7;
  --bg-card: rgba(255,255,255,0.72);
  --bg-card-solid: #FFFFFF;
  --bg-sidebar: rgba(242,242,247,0.78);
  --bg-main: #FFFFFF;
  --bg-input: #F2F2F7;
  --bg-hover: rgba(0,0,0,0.04);
  --bg-active: rgba(0,122,255,0.10);

  /* 잉크 */
  --ink: #000000;
  --ink-sub: #8E8E93;
  --ink-tertiary: #C7C7CC;

  /* 포인트 - Apple Blue */
  --accent: #007AFF;
  --apple-blue: #007AFF;  /* 호환 별칭 */
  --accent-hover: #0056B3;
  --green: #34C759;
  --red: #FF3B30;
  --orange: #FF9500;
  --yellow: #FF9500;
  --purple: #AF52DE;

  /* 시맨틱 컬러 (테마 통일) */
  --c-primary: #007AFF;
  --c-primary-ink: #FFFFFF;
  --c-primary-bg-soft: rgba(0,122,255,0.10);
  --c-primary-border-soft: color-mix(in srgb, var(--c-primary) 40%, transparent);
  --c-danger: #FF3B30;
  --c-danger-ink: #FFFFFF;
  --c-danger-bg-soft: rgba(255,59,48,0.12);
  --c-danger-border-soft: color-mix(in srgb, var(--c-danger) 40%, transparent);
  --c-success: #34C759;
  --c-success-ink: #FFFFFF;
  --c-success-bg-soft: rgba(52,199,89,0.15);
  --c-warn: #FF9500;
  --c-warn-ink: #FFFFFF;
  --c-warn-bg-soft: rgba(255,149,0,0.15);
  --c-info: #AF52DE;
  --c-info-ink: #FFFFFF;
  --c-info-bg-soft: rgba(175,82,222,0.15);
  /* 상승/하락 alias (--c-success/--c-danger와 동일값) */
  --c-up: #34C759;
  --c-dn: #FF3B30;
  /* 범례 전용 dot 색 */
  --c-sky:     #5AC8FA;   /* Apple sky blue  */
  --c-indigo:  #5856D6;   /* Apple indigo    */
  --c-fuchsia: #e879f9;   /* fuchsia-400     */

  /* 차트 팔레트 (5색) */
  /* 2026-05-08: muted/calm 팔레트로 톤다운 */
  --chart-1: #6B8AA8;  /* slate blue */
  --chart-2: #8AA585;  /* sage */
  --chart-3: #C4946D;  /* muted ochre */
  --chart-4: #9788A6;  /* muted lavender */
  --chart-5: #B07878;  /* dusty rose */
  --chart-1-soft: rgba(0,122,255,0.15);
  --chart-2-soft: rgba(52,199,89,0.15);
  --chart-3-soft: rgba(255,149,0,0.15);
  --chart-4-soft: rgba(175,82,222,0.15);
  --chart-5-soft: rgba(255,59,48,0.15);

  /* 테두리 - hairline */
  --border: rgba(60,60,67,0.16);
  --border-strong: rgba(60,60,67,0.29);

  /* 리퀴드 글래스 */
  --glass-bg: rgba(255,255,255,0.60);
  --glass-border: rgba(255,255,255,0.50);
  --glass-inner-light: inset 0 1px 0 rgba(255,255,255,0.7);
  --glass-inner-dark: inset 0 -1px 0 rgba(0,0,0,0.04);
  --glass-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);

  /* 레이아웃 */
  --rail-width: 280px;
  --header-h: 56px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* 모션 */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme='dark'] {
  --bg-app: #000;
  --bg-card: rgba(28,28,30,0.72);
  --bg-card-solid: #1C1C1E;
  --bg-sidebar: rgba(28,28,30,0.78);
  --bg-main: #000;
  --bg-input: #1C1C1E;
  --bg-hover: rgba(255,255,255,0.06);
  --bg-active: rgba(10,132,255,0.18);
  --ink: #FFF;
  --ink-sub: #8E8E93;
  --ink-tertiary: #48484A;
  --accent: #0A84FF;
  --border: rgba(84,84,88,0.35);
  --border-strong: rgba(84,84,88,0.65);
  --glass-bg: rgba(28,28,30,0.55);
  --glass-border: rgba(255,255,255,0.10);
  --glass-inner-light: inset 0 1px 0 rgba(255,255,255,0.08);
  --glass-inner-dark: inset 0 -1px 0 rgba(0,0,0,0.3);
  --glass-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.6);
  /* 시맨틱 */
  --c-primary: #0A84FF;
  --c-primary-ink: #FFFFFF;
  --c-primary-bg-soft: rgba(10,132,255,0.18);
  --c-danger: #FF453A;
  --c-danger-bg-soft: rgba(255,69,58,0.18);
  --c-success: #32D158;
  --c-success-bg-soft: rgba(50,209,88,0.18);
  --c-warn: #FF9F0A;
  --c-warn-bg-soft: rgba(255,159,10,0.18);
  --c-info: #BF5AF2;
  --c-info-bg-soft: rgba(191,90,242,0.18);
  /* 2026-05-08: 다크 배경용 mid-luminance muted */
  --chart-1: #7E9DBB;
  --chart-2: #94B08C;
  --chart-3: #CCA078;
  --chart-4: #A795B5;
  --chart-5: #BC8585;
  --chart-1-soft: rgba(10,132,255,0.25);
  --chart-2-soft: rgba(50,209,88,0.22);
  --chart-3-soft: rgba(255,159,10,0.22);
  --chart-4-soft: rgba(191,90,242,0.22);
  --chart-5-soft: rgba(255,69,58,0.22);
  --c-up: #32D158; --c-dn: #FF453A;
  --c-indigo: #7B78FF;
}

/* ☀️ Day — 웜톤 베이지/아이보리. 쌩 화이트 피하고 리퀴드 글래스 살림 */

/* 🌙 Midnight — 쿨톤 차콜/네이비 */

[data-theme='rainy-day'] {
  --bg-app: #C8D0D8;            /* 흐린 회청색 — 안개 낀 창밖 (베이스) */
  --bg-card: rgba(232,235,240,0.65);
  --bg-card-solid: #E8EBF0;
  --bg-sidebar: rgba(214,221,228,0.78);
  --bg-main: #D5DCE3;
  --bg-input: #BAC4CE;
  --bg-hover: rgba(95,110,124,0.08);
  --bg-active: rgba(74,133,121,0.16);
  --ink: #2A3640;                /* 짙은 슬레이트 (메인) */
  --ink-sub: #5F6E7C;            /* 블루그레이 (서브) */
  --ink-tertiary: #95A0AC;
  --accent: #4A8579;             /* 모스 청록 — 비 머금은 잎 (포인트) */
  --apple-blue: #4A8579;
  --accent-hover: #3D7065;
  --border: rgba(95,110,124,0.22);
  --border-strong: rgba(95,110,124,0.38);
  --glass-bg: rgba(232,235,240,0.55);
  --glass-border: rgba(255,255,255,0.45);
  --glass-inner-light: inset 0 1px 0 rgba(255,255,255,0.55);
  --glass-inner-dark: inset 0 -1px 0 rgba(95,110,124,0.06);
  --glass-shadow: 0 1px 3px rgba(60,75,90,0.08), 0 8px 24px rgba(60,75,90,0.12);
  /* 시맨틱 — 쿨 그레이/청록 팔레트 */
  --c-primary: #4A8579;
  --c-primary-ink: #FFFFFF;
  --c-primary-bg-soft: rgba(74,133,121,0.16);
  --c-danger: #B85950;           /* 차분한 테라코타 */
  --c-danger-ink: #FFFFFF;
  --c-danger-bg-soft: rgba(184,89,80,0.15);
  --c-success: #8FA56C;          /* 모스 그린 */
  --c-success-ink: #FFFFFF;
  --c-success-bg-soft: rgba(143,165,108,0.18);
  --c-warn: #C9954E;             /* 호박 — 우산 노랑 */
  --c-warn-ink: #FFFFFF;
  --c-warn-bg-soft: rgba(201,149,78,0.18);
  --c-info: #7585A8;             /* 스틸 블루 */
  --c-info-ink: #FFFFFF;
  --c-info-bg-soft: rgba(117,133,168,0.18);
  /* 차트 팔레트 (쿨 그레이 5색) */
  /* 2026-05-08: 비 오는 낮, 채도 한 단계 down */
  --chart-1: #4A8579;
  --chart-2: #8FA56C;
  --chart-3: #B88E55;
  --chart-4: #7585A8;
  --chart-5: #A05E58;
  --chart-1-soft: rgba(74,133,121,0.22);
  --chart-2-soft: rgba(143,165,108,0.22);
  --chart-3-soft: rgba(201,149,78,0.22);
  --chart-4-soft: rgba(117,133,168,0.22);
  --chart-5-soft: rgba(184,89,80,0.22);
  --c-up: #8FA56C; --c-dn: #B85950;
}


/* chart-2는 모든 테마에서 success(sage green) 의미 유지 — 매출 그린 등 semantic 통일. */











/* ========================================================
   신규 테마 8종 (2026-05-17) — 밝은 5 + 어두운 3
   밝은: cherry · sunset · autumn · sand · snow
   어두운: forest · ocean · ash
   ======================================================== */








/* 재 — 차가운 차콜 + 잔불(ember) 액센트 (다크) */
[data-theme='ash'] {
  --bg-app: #16171A;
  --bg-card: rgba(38,40,45,0.70);
  --bg-card-solid: #26282D;
  --bg-sidebar: rgba(28,29,33,0.78);
  --bg-main: #1E2024;
  --bg-input: #34363C;
  --bg-hover: rgba(208,138,94,0.07);
  --bg-active: rgba(208,138,94,0.16);
  --ink: #E5E2DC;
  --ink-sub: #A29E96;
  --ink-tertiary: #6C6962;
  --accent: #D08A5E;
  --apple-blue: #D08A5E;
  --accent-hover: #E4A074;
  --green: #88B49C;
  --red: #D9756B;
  --yellow: #D6A862;
  --orange: #D08A5E;
  --purple: #9CA0C6;
  --border: rgba(229,226,220,0.10);
  --border-strong: rgba(229,226,220,0.18);
  --c-primary: #D08A5E; --c-primary-ink: #16171A; --c-primary-bg-soft: rgba(208,138,94,0.18);
  --c-danger: #D9756B; --c-danger-ink: #16171A; --c-danger-bg-soft: rgba(217,117,107,0.18);
  --c-success: #88B49C; --c-success-ink: #16171A; --c-success-bg-soft: rgba(136,180,156,0.18);
  --c-warn: #D6A862; --c-warn-ink: #16171A; --c-warn-bg-soft: rgba(214,168,98,0.18);
  --c-info: #9CA0C6; --c-info-ink: #16171A; --c-info-bg-soft: rgba(156,160,198,0.18);
  --chart-1: #D08A5E; --chart-2: #88B49C; --chart-3: #D6A862; --chart-4: #9CA0C6; --chart-5: #D9756B;
  --chart-1-soft: rgba(208,138,94,0.22); --chart-2-soft: rgba(136,180,156,0.22); --chart-3-soft: rgba(214,168,98,0.22); --chart-4-soft: rgba(156,160,198,0.22); --chart-5-soft: rgba(217,117,107,0.22);
  --c-up: #88B49C; --c-dn: #D9756B;
}

/* 신규 8종 스크롤바 */
[data-theme='ash'] ::-webkit-scrollbar-thumb { background: rgba(208,138,94,0.20); }
[data-theme='ash'] ::-webkit-scrollbar-thumb:hover { background: rgba(208,138,94,0.36); }

/* 신규 테마 스크롤바 */


/* 스크롤바 — 테마별 */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', sans-serif;
  background: var(--bg-app);
  color: var(--ink);
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
}

/* 스크롤바 - 애플 스타일 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); }
[data-theme='dark'] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); }

/* ==========================================================
   리퀴드 글래스 카드 (가장 중요한 재료)
   ========================================================== */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-inner-light), var(--glass-inner-dark), var(--glass-shadow);
  border-radius: var(--radius-lg);
}

.glass-pill {
  background: var(--glass-bg);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-inner-light), 0 1px 2px rgba(0,0,0,0.04);
  border-radius: 999px;
}

/* 버튼 공통 */
.btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  border: 0.5px solid var(--border);
  background: var(--bg-card-solid);
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s var(--ease-smooth);
}
.btn:hover { background: var(--bg-hover); }
.btn:active { transform: scale(0.97); }
.btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}
.btn.primary:hover { background: var(--accent-hover); }
.btn.danger { color: var(--red); }
.btn.ghost {
  background: transparent;
  border-color: transparent;
}
.btn.ghost:hover { background: var(--bg-hover); }

/* 배지 */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--bg-input);
  color: var(--ink-sub);
}
.badge.on { background: rgba(52,199,89,0.15); color: var(--green); }
.badge.off { background: rgba(255,59,48,0.15); color: var(--red); }
.badge.warn { background: rgba(255,149,0,0.15); color: var(--orange); }

/* 상태 도트 */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot.on { background: var(--green); box-shadow: 0 0 0 3px rgba(52,199,89,0.15); }
.dot.off { background: var(--red); box-shadow: 0 0 0 3px rgba(255,59,48,0.15); }

/* 토스트 */
.toast-wrap {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: rgba(28,28,30,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: var(--fs-md);
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-12px);
  transition: all 0.35s var(--ease-spring);
  max-width: 460px;
  text-align: center;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.ok { background: rgba(52,199,89,0.92); }
.toast.err { background: rgba(255,59,48,0.92); }

/* 2026-05-20: 테스터 배너 활성 시 body 상단 여백 — JS inline style 대신 클래스
   토글로 처리해 layout thrash(노란 깜빡임)를 줄임 */
body.has-tester-banner { padding-top: 38px; }

/* 카드 */
.card {
  background: var(--bg-card-solid);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.section-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.section-sub {
  font-size: var(--fs-md);
  color: var(--ink-sub);
  margin-bottom: 20px;
}

/* 로딩 스피너 */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 빈 상태 */
.empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--ink-sub);
}
.empty .emoji { font-size: 48px; opacity: 0.5; margin-bottom: 16px; }
.empty .title { font-size: var(--fs-lg); font-weight: 600; margin-bottom: 4px; color: var(--ink); }
.empty .desc { font-size: var(--fs-md); }

/* 반응형 */
@media (max-width: 900px) {
  :root { --rail-width: 240px; }
}



/* ════════════════════════════════════════════════════
   LIQUID GLASS — Apple 톤 (은은하게)
   굴절(blur+saturate) + 색수차(다중 inset) + 프레넬(림 라이트)
   ════════════════════════════════════════════════════ */

/* SVG 굴절 필터 (displacement) — body 끝에 주입되는 <svg> */
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {

/* 공통 리퀴드 글래스 — 모든 클래스에 적용 */
.liquid-glass,
.cal-card, .kpi-card, .upload-card, .detail, .chart-box,
.menu-btn, .bot-card, .set-card,
.mem-left, .mem-toolbar,
.sched-item, .cron-job,
.header-clock,
.theme-toggle, .device-toggle, .theme-toggle-m,
.confirm-box {
  position: relative;
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  background: var(--glass-bg);
  /* 프레넬 림: 가장자리 밝기 강조 + 색수차 inset */
  box-shadow:
    inset 0 0 0 0.5px var(--glass-border),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    inset 1px 0 0 rgba(0,122,255,0.03),
    inset -1px 0 0 rgba(255,59,48,0.025),
    0 1px 2px rgba(0,0,0,0.03),
    0 8px 24px rgba(0,0,0,0.06);
  border: none !important;  /* 기존 1px 테두리 무력화 */
}

/* 다크 모드에서는 림을 검정 베이스로 — 너무 밝지 않게 */
[data-theme='dark'] .liquid-glass,
[data-theme='dark'] .cal-card, [data-theme='dark'] .kpi-card, [data-theme='dark'] .upload-card,
[data-theme='dark'] .detail, [data-theme='dark'] .chart-box,
[data-theme='dark'] .menu-btn, [data-theme='dark'] .bot-card, [data-theme='dark'] .set-card,
[data-theme='dark'] .mem-left, [data-theme='dark'] .mem-toolbar,
[data-theme='dark'] .sched-item, [data-theme='dark'] .cron-job,
[data-theme='dark'] .header-clock,
[data-theme='dark'] .theme-toggle, [data-theme='dark'] .device-toggle,
[data-theme='dark'] .theme-toggle-m,
[data-theme='dark'] .confirm-box {
  background: rgba(28,28,30,0.58);
  box-shadow:
    inset 0 0 0 0.5px rgba(255,255,255,0.09),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 1px 0 0 rgba(10,132,255,0.05),
    inset -1px 0 0 rgba(255,69,58,0.035),
    0 1px 3px rgba(0,0,0,0.5),
    0 8px 24px rgba(0,0,0,0.55);
}




/* 사이드바는 블러 더 강하게 */
#sidebar {
  backdrop-filter: blur(40px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.8) !important;
  background: var(--bg-sidebar) !important;
}

/* 메인 헤더 — 이미 glass이지만 보강 */
.main-header {
  backdrop-filter: blur(30px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.6) !important;
}

/* active 카드는 accent 림 강화 */
.menu-btn.active,
.bot-card.active,
.mem-item.active {
  box-shadow:
    inset 0 0 0 1px var(--accent),
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,122,255,0.15),
    0 1px 2px rgba(0,122,255,0.10),
    0 8px 24px rgba(0,122,255,0.12) !important;
}

/* 배경 무드 — bg-mood 레이어: 살짝 그라디언트 움직임으로 굴절감 보강 */
#bg-mood {
  position: fixed; inset: 0;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(0,122,255,0.06), transparent 60%),
    radial-gradient(1000px 500px at 90% 100%, rgba(255,59,48,0.035), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
[data-theme='dark'] #bg-mood {
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(10,132,255,0.10), transparent 60%),
    radial-gradient(1000px 500px at 90% 100%, rgba(255,69,58,0.06), transparent 60%);
}

}  /* @supports end */

/* ===========================================================
   공통 모달 (paduk.confirm / paduk.prompt)
   시스템 다이얼로그 → 테마 적응 모달
   =========================================================== */
.paduk-modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:99999;opacity:0;transition:opacity .15s ease-out;padding:20px}
.paduk-modal-backdrop.active{opacity:1}
.paduk-modal{background:var(--bg-card-solid);border:.5px solid var(--border);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25),0 0 0 .5px rgba(255,255,255,.05);max-width:420px;width:100%;padding:22px 22px 16px;transform:scale(.94);transition:transform .18s cubic-bezier(.2,.9,.4,1.1)}
.paduk-modal-backdrop.active .paduk-modal{transform:scale(1)}
.paduk-modal-title{font-size:var(--fs-lg);font-weight:700;color:var(--ink);margin:0 0 6px;line-height:1.35}
.paduk-modal-title.danger{color:var(--c-danger,#ff3b30)}
.paduk-modal-msg{font-size:var(--fs-md);color:var(--ink-sub);line-height:1.55;margin:0 0 16px;white-space:pre-wrap;word-break:break-word}
.paduk-modal-input{width:100%;padding:9px 12px;background:var(--bg-input);color:var(--ink);border:1px solid var(--border);border-radius:10px;font-size:var(--fs-md);font-weight:500;outline:none;margin-bottom:14px;font-family:inherit;transition:border-color .12s,box-shadow .12s;box-sizing:border-box}
.paduk-modal-input:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-bg-soft)}
.paduk-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.paduk-modal-btn{padding:7px 16px;border-radius:10px;font-size:var(--fs-md);font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .12s;font-family:inherit;min-width:64px}
.paduk-modal-btn.cancel{background:transparent;color:var(--ink-sub);border-color:var(--border)}
.paduk-modal-btn.cancel:hover{background:var(--bg-input);color:var(--ink)}
.paduk-modal-btn.ok{background:var(--c-primary);color:var(--c-primary-ink);border-color:var(--c-primary)}
.paduk-modal-btn.ok:hover{opacity:.9}
.paduk-modal-btn.ok.danger{background:var(--c-danger,#ff3b30);color:var(--c-danger-ink,#fff);border-color:var(--c-danger,#ff3b30)}
.paduk-modal-btn.ok.danger:hover{filter:brightness(1.08)}
@media(max-width:600px){
  .paduk-modal{padding:18px 18px 14px;border-radius:14px}
  .paduk-modal-title{font-size:var(--fs-md)}
  .paduk-modal-msg{font-size:var(--fs-sm)}
}


/* ===========================================================
   테이블 전역 정렬 통일 + sortable 헤더 (2026-05-07 추가)
   - 모든 테이블 셀: 수직 가운데
   - 헤더-데이터 정렬 일치 (JS가 inline style로 강제)
   - th.sortable: 클릭 정렬 (▲▼)
   - !important로 페이지별 CSS보다 강하게
   =========================================================== */
table { border-collapse: collapse; }
table th, table td {
  vertical-align: middle;
}
table th { font-weight: 700; }
table th.num, table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* ===========================================================
   전역 표 정렬 통일 (2026-05-07 추가)
   - 모든 페이지의 모든 <table>: 헤더와 데이터 모두 가운데 정렬
   - 페이지별 CSS 우선순위 무시 (!important)
   - 숫자 컬럼(.num)도 가운데 정렬 (tabular-nums는 유지)
   =========================================================== */
table thead th,
table tbody td,
table tfoot td,
.dt thead th, .dt tbody td,
.ov-top-tbl thead th, .ov-top-tbl tbody td,
.data-table thead th, .data-table tbody td {
  text-align: center !important;
  vertical-align: middle !important;
}
/* .num 셀: 가운데 정렬 강제 + 숫자만 정렬용 폰트 변형 유지 */
table td.num, table th.num,
.dt td.num, .dt th.num,
.ov-top-tbl td.num, .ov-top-tbl th.num {
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
}

/* 정렬 가능 헤더 — 페이지별 CSS보다 강하게 (block1+2 병합) */
table th.sortable,
.dt thead th.sortable,
.ov-top-tbl thead th.sortable {
  cursor: pointer !important;
  user-select: none !important;
  position: relative !important;
  padding-right: 24px !important;
  padding-left: 14px !important;
  transition: background-color .12s !important;
}
table th.sortable::after {
  content: '⇅' !important;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 700 !important;
  opacity: .45 !important;
  pointer-events: none !important;
  color: var(--ink-sub, #8e8e93) !important;
  letter-spacing: 0 !important;
}
table th.sortable:hover {
  background-color: var(--bg-input, rgba(0,0,0,.05)) !important;
}
table th.sortable:hover::after { opacity: .85 !important; }
table th.sort-asc::after  { content: '▲' !important; opacity: 1 !important; color: var(--c-primary, #007aff) !important; font-size: var(--fs-xs) !important; }
table th.sort-desc::after { content: '▼' !important; opacity: 1 !important; color: var(--c-primary, #007aff) !important; font-size: var(--fs-xs) !important; }

/* 필터 적용된 헤더 — 좌측 작은 마커 */
table th.has-filter::before {
  content: '▣';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: var(--c-primary);
  pointer-events: none;
}

/* ── 필터 다이얼로그 (엑셀 자동 필터 스타일) ── */
.tbl-filter-dialog {
  position: fixed;
  z-index: 99999;
  width: 280px;
  max-height: 460px;
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 8px;
  background: var(--bg-card-solid);
  color: var(--ink);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.20);
}
.tbl-filter-dialog .tfd-head {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  padding: 0 2px;
}
.tbl-filter-dialog .tfd-search {
  width: 100%;
  padding: 7px 10px;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--ink);
  font-size: var(--fs-sm);
  outline: none;
  box-sizing: border-box;
}
.tbl-filter-dialog .tfd-search:focus { border-color: var(--c-primary); }
.tbl-filter-dialog .tfd-tools { display: flex; gap: 6px; }
.tbl-filter-dialog .tfd-list {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: 280px;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  padding: 4px 0;
}
.tbl-filter-dialog .tfd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-sm);
}
.tbl-filter-dialog .tfd-row:hover {
  background: color-mix(in srgb, var(--c-primary, #007aff) 10%, transparent);
}
.tbl-filter-dialog .tfd-row input[type="checkbox"] { margin: 0; flex: 0 0 auto; }
.tbl-filter-dialog .tfd-label {
  flex: 1 1 auto;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tbl-filter-dialog .tfd-count {
  font-size: var(--fs-xs);
  color: var(--ink-sub);
  flex: 0 0 auto;
}

/* ── 날짜 컬럼 트리 (년 → 월 → 일) ── */
.tbl-filter-dialog .tfd-tree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  cursor: default;
  user-select: none;
  font-size: var(--fs-sm);
}
.tbl-filter-dialog .tfd-tree-row:hover {
  background: color-mix(in srgb, var(--c-primary, #007aff) 10%, transparent);
}
.tbl-filter-dialog .tfd-tree-year  { padding-left: 8px;  font-weight: 600; }
.tbl-filter-dialog .tfd-tree-month { padding-left: 26px; }
.tbl-filter-dialog .tfd-tree-day   { padding-left: 44px; cursor: pointer; }
.tbl-filter-dialog .tfd-tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  font-size: 9px;
  color: var(--ink-sub);
  cursor: pointer;
  flex: 0 0 auto;
}
.tbl-filter-dialog .tfd-tree-day .tfd-tree-toggle { visibility: hidden; }
.tbl-filter-dialog .tfd-tree-row input[type="checkbox"] { margin: 0; flex: 0 0 auto; }
.tbl-filter-dialog .tfd-tree-label {
  flex: 1 1 auto;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tbl-filter-dialog .tfd-tree-count {
  font-size: var(--fs-xs);
  color: var(--ink-sub);
  flex: 0 0 auto;
}
.tbl-filter-dialog .tfd-children { /* 컨테이너 — display:none/block 토글 */ }
.tbl-filter-dialog .tfd-actions { display: flex; gap: 6px; justify-content: flex-end; }
.tbl-filter-dialog .tfd-btn {
  padding: 6px 12px;
  font-size: var(--fs-sm);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--ink);
  border: 0.5px solid var(--border);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.tbl-filter-dialog .tfd-btn:hover {
  background: var(--bg-card-solid);
  border-color: var(--ink-sub);
}
.tbl-filter-dialog .tfd-btn.disabled,
.tbl-filter-dialog .tfd-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.tbl-filter-dialog .tfd-btn.primary {
  background: var(--c-primary);
  color: var(--c-primary-ink, #fff);
  border-color: var(--c-primary);
}
.tbl-filter-dialog .tfd-btn.primary:hover { filter: brightness(1.08); }

/* ── 헤더 정렬 동기화 클래스 (common.js sortable이 class로 주입)
   specificity (0,1,2) > global center rule (0,0,3) → !important 없이도 우선 ──  */
table th.th-align-left   { text-align: left   !important; }
table th.th-align-right  { text-align: right  !important; }
table th.th-align-center { text-align: center !important; }