:root {
    --bg: #0E172A;
    --panel: #232B32;
    --line: #2E363E;
    --text: #CFE0EF;
    --muted: #9AAEBF;
    --header-h: 50px;
    /* 레이아웃 오프셋: tokens.css 레이아웃 토큰 파생. (2026-06-15 · tanwoo · 15번 스펙: --sb-width 중복 제거 + 매직넘버 315 파생화) */
    --content-left: var(--content-left-derived);
    --content-right: 24px;
    --content-bottom: 21px;
    --content-top: 112px; /* header bottom(68) + gap(44) */
    --content-px: 28px;   /* 콘텐츠 좌우 패딩 */
}

/* ===== Global box-sizing reset ===== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--bg);
}

body {
    margin: 0;
    padding: 0;
}

/* ===== 다크 배경 통일 ===== */
body.body--dark,
.body--dark {
    background: var(--bg) !important;
    color: var(--text);
    font-family: Pretendard, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
}

.kv-body {
    background: var(--bg);
    color: var(--text);
    font-family: Pretendard, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.kv-page {
    width: 1920px;
    height: 1080px;
    margin: 0 auto;
    transform-origin: top left;
}

.kv-content {
    background: transparent;
}

/* ===== 레이아웃 래퍼 ===== */
.layout {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* GNB 헤더(투명) 뒤로 스크롤 콘텐츠가 비쳐 보이는 현상 차단용 백드롭
 * header top(18) + header height(50) = 68px 영역을 페이지 배경색으로 덮음.
 * var(--bg) 사용 → 다크/라이트 테마 자동 대응.
 * z-index 999 → sidebar(1010)·gnb-header(1000) 는 위로, toolbar(999)와 물리적으로 겹치지 않음. */
.layout::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 68px;
    background: var(--bg);
    z-index: 999;
    pointer-events: none;
}

/* ===== 콘텐츠 영역: 유동 폭 (left:315 ~ right:24, bottom:21) ===== */
.content {
    margin-left: var(--content-left) !important;
    margin-right: var(--content-right) !important;
    width: auto !important;
    padding-top: var(--content-top) !important;
    padding-bottom: var(--content-bottom);
    padding-left: var(--content-px);
    padding-right: var(--content-px);
    min-height: calc(100vh - var(--content-bottom));
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--text);
    position: relative;
}

.content--fixed {
    margin-left: var(--content-left) !important;
    margin-right: var(--content-right) !important;
    width: auto !important;
    padding-top: var(--content-top) !important;
    min-height: calc(100vh - var(--content-bottom));
    box-sizing: border-box;
}

/* 툴바가 있는 페이지: header(68) + toolbar(64) = 132px */
body.has-toolbar .content,
body.has-toolbar .content--fixed {
    padding-top: 132px !important;
}

/* Detail 페이지: layout > main-wrapper가 콘텐츠 영역 역할 */
.main-wrapper {
    margin-left: var(--content-left) !important;
    margin-right: var(--content-right) !important;
    width: auto !important;
    padding-top: var(--content-top) !important;
    min-height: calc(100vh - var(--content-bottom));
    box-sizing: border-box;
    display: flex;
}
body.has-toolbar .main-wrapper {
    padding-top: 132px !important;
}

.content--dark {
    background: transparent;
}

/* ===== TV Mode — 헤더/사이드바 없이 전체 화면 ===== */
body.tv-mode .content {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
}
body.tv-mode .nc-toolbar {
    display: none !important;
}

/* ===== 상세 페이지 공통 Delete 버튼 ===== */
.action-buttons .btn-delete {
    background-color: transparent !important;
    color: #FF5C5C !important;
    border: 1px solid rgba(255, 92, 92, 0.4) !important;
    font-weight: 500 !important;
    margin-right: auto;
}
.action-buttons .btn-delete:hover {
    border-color: #FF5C5C !important;
    color: #FF7A7A !important;
}

/* ===== 라이트모드 공통 ===== */
html.body--light-pending { background: #FFFFFF !important; }

body.body--light {
    background: #FFFFFF !important;
    color: #2D3748;
}
body.body--light .content {
    background: #FFFFFF;
    color: #2D3748;
}
body.body--light .kv-body {
    background: #FFFFFF;
    color: #2D3748;
}

/* ===== 라이트모드: CSS 변수 재정의 ===== */
body.body--light {
    --bg: #F3F5F9;
    --panel: #FFFFFF;
    --line: #E2E8F0;
    --text: #2D3748;
    --muted: #6B7280;
    /* --gray-XX 변수 라이트모드 재정의 */
    --gray-90: #F3F5F9;
    --gray-80: #FFFFFF;
    --gray-70: #E2E8F0;
    --gray-60: #CBD5E0;
    --gray-50: #9CA3AF;
    --gray-40: #6B7280;
    --gray-30: #4B5563;
    --gray-20: #374151;
    --gray-10: #1F2937;
    --gray-00: #111827;
}

/* ===== 라이트모드: 레이아웃 ===== */
body.body--light .layout { background: #FFFFFF; }
body.body--light .content { background: #FFFFFF; color: #2D3748; }
body.body--light .content--fixed { background: #FFFFFF; }
body.body--light .main-wrapper { background: #FFFFFF; }

/* ===== 라이트모드: 입력 필드 공통 ===== */
body.body--light .bs-input { background: #FFFFFF; outline-color: #CBD5E0; }
body.body--light .bs-input__native { color: #1A202C; }
body.body--light .bs-input__native::placeholder { color: #9CA3AF; }
body.body--light .bs-select { background: #FFFFFF; outline-color: #CBD5E0; }
body.body--light .bs-select .label { color: #1A202C; }
body.body--light .bs-select .val { color: #4B5563; }
body.body--light .bs-select .val.muted { color: #9CA3AF; }
body.body--light .bs-select.is-disabled { outline-color: #E2E8F0; }
body.body--light .date-range { background: #FFFFFF; outline-color: #CBD5E0; }
body.body--light .date-native { color: #1A202C; }
body.body--light .date-chip { background: #E2E8F0; color: #1A202C; }
body.body--light .date-dash { background: #CBD5E0; }
body.body--light .date-hint { color: #6B7280; }

/* ===== 라이트모드: 필터/브레드크럼 공통 ===== */
body.body--light .breadcrumb { background: #FFFFFF; }
body.body--light .breadcrumb-item span { color: #6B7280; }
body.body--light .breadcrumb-item strong { color: #1A202C; }
body.body--light .filter-card { background: #FFFFFF; border-color: #E2E8F0; }
body.body--light .filter-title { color: #1A202C; }
body.body--light .filter-caption { color: #2563EB; }
body.body--light .content-head { color: #1A202C; }

/* ===== 라이트모드: 테이블/행 공통 ===== */
body.body--light .detail-row { background: #FFFFFF; border-color: #E2E8F0; }
body.body--light .detail-label { color: #6B7280; }
body.body--light .detail-value { color: #1A202C; }

/* ===== 라이트모드: 버튼 공통 ===== */
body.body--light .btn-apply { background: #E2E8F0; color: #1A202C; border-color: #E2E8F0; }
body.body--light .btn-apply:hover { background: #CBD5E0; }
body.body--light .btn-apply span { color: #1A202C; }
body.body--light .btn-apply img { filter: brightness(0) saturate(100%) invert(15%) sepia(10%) saturate(500%) hue-rotate(180deg) brightness(90%) contrast(90%); }
body.body--light .link-clear { color: #6B7280; }
body.body--light .divider { background: #E2E8F0; }
body.body--light .btn-secondary { background: #E2E8F0; border-color: #E2E8F0; color: #4B5563; }
body.body--light .btn-secondary:hover { background: #CBD5E0; border-color: #CBD5E0; color: #1A202C; }

/* ===== 라이트모드: 스크롤바 공통 ===== */
body.body--light ::-webkit-scrollbar-track { background: #FFFFFF; }
body.body--light ::-webkit-scrollbar-thumb { background: #CBD5E0; }
body.body--light ::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* ===== 라이트모드: 상태 표시 ===== */
/* 그리드 관련 라이트모드 → grid.css 에서 통일 관리 */

/* ===== 라이트모드: 공통 컨트롤 ===== */
body.body--light .control-box { background: #FFFFFF; border-color: #CBD5E0; color: #1A202C; }
body.body--light .input-plain { color: #1A202C; }
body.body--light .input-plain::placeholder { color: #9CA3AF; }
body.body--light .input-select { background: #FFFFFF; border-color: #CBD5E0; color: #1A202C; }
body.body--light .input-date { background: #E2E8F0; color: #1A202C; }
body.body--light .label { color: #6B7280; }
body.body--light .value .value-text { color: #1A202C; }
body.body--light .value .hint { color: #9CA3AF; }
body.body--light .filter-actions { border-color: #E2E8F0; }
body.body--light .filter-controls::-webkit-scrollbar { background: #FFFFFF; }
body.body--light .filter-controls::-webkit-scrollbar-thumb { background-color: #CBD5E0; }

/* ===== 반응형: 1024~1279 — 사이드바 숨김 구간은 content 전체폭 ===== */
/* --content-left 변수값만 바꿔 content·toolbar·chatbot(모두 이 변수 참조)을 한 번에 전체폭으로.
 * (2026-06-15 · tanwoo · 15번 스펙 SO-6: 좌여백 --edge-gap. !important 싸움 없이 변수 재정의로 처리) */
@media (max-width: 1279px) {
  :root { --content-left: var(--edge-gap); }
}