/* ====== Grid Wrapper ====== */
.page-header h2{ margin:8px 0; color:var(--txt-0); }
html, body {
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
}

/* 콘텐츠 영역: 그리드가 남은 공간 채움 (모든 그리드 페이지 공통) */
.content:has(.grid-container),
.content:has(.common-grid) {
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    height: calc(100vh - var(--content-bottom, 21px));
}

/* 기본 변수 (밀도 프리셋으로 덮어씀) */
.common-grid{
    width:100%;
    margin-top:16px;
    display:flex;
    flex-direction:column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden; /* 전체 컨테이너는 스크롤 없음 */
    /* spacing */

    --row-gap: 8px;         /* row gap (body) */
    --grid-gap: 16px;       /* column gap (header & row) */
    --col-min-w: 140px;     /* column minimum width */
    --row-pad-v: 14px;      /* row vertical padding */
    --row-pad-h: 24px;      /* row horizontal padding */
    --head-pad-v: 14px;     /* header vertical padding */
    --head-pad-h: 24px;     /* header horizontal padding */

    /* typography */
    --cell-font: 14px;
    --head-font: 14px;

    /* 레이아웃 파라미터 (JS가 갱신) */
    --sel-w: 16px;          /* 선택 체크박스 폭 */
    --no-w:  60px;          /* No. 폭 */
    --data-cols: 10;        /* 실제 컬럼 개수 (JS에서 주입) */

    --chk-size: 16px;
    --chk-radius: 2px;
    --chk-bg: #232B32;            /* 기본 바탕 */
    --chk-bd: #586169;            /* 테두리 */
    --chk-checked-bg: #328DFF;    /* 체크 시 바탕색 */
    --chk-checked-bd: #328DFF;    /* 체크 시 테두리색 */
    --chk-icon: #232B32;          /* 체크마크 색(어두운 배경 대비) */
}

.common-grid .grid-header{
    display:flex; align-items:center; justify-content:space-between; margin-bottom: 24px; margin-top: 24px;
    flex: 0 0 auto;
}
.common-grid .grid-columns-head{
    flex: 0 0 auto;
    overflow-x: hidden;
    padding-right: 12px; /* 바디 스크롤바 공간과 동일 */
}
.common-grid .grid-columns-divider{
    flex: 0 0 auto;
}
.common-grid .grid-body {
    flex: 1 1 auto; /* 남은 공간 차지 */
    min-height: 0;
    overflow-y: auto; /* 그리드 바디만 스크롤 */
    overflow-x: auto;  /* Zone 등 긴 텍스트 시 좌우 스크롤 */
    padding-bottom: 8px;
}
.common-grid .grid-pagination{
    flex: 0 0 auto;
    padding: 16px 70px 16px 0;
    border-top: 1px solid #2E363E;
    background: transparent;
}

.common-grid .grid-title{ color:var(--txt-0); font-weight:600; font-size:16px; }
.common-grid .grid-actions{ display:flex; gap:8px; }

/* Total results (CommonGrid 헤더) */
.grid-total-results{
    display:inline-flex; align-items:center; gap:4px;
}
.grid-total-label{
    color:#F1F1F1; font-size:16px; font-weight:600; font-family:Pretendard, sans-serif;
}
.grid-total-count{
    color:#A2FFFE; font-size:16px; font-weight:600; font-family:Pretendard, sans-serif;
}

/* 버튼(공통) */
.btn{ border:none; border-radius:4px; padding:12px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.btn-primary-custom{ background:#fff; color:#0E172A; font-weight:700; font-size:20px; line-height:1; }
.btn-secondary-custom{ background:#2E363E; color:#8799A8; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* 로딩/빈상태 */
.grid-loading, .grid-empty{
    display:flex; align-items:center; justify-content:center; gap:12px;
    color:var(--txt-2); padding:24px 0;
}

/* =========================
   헤더 (동적 그리드 트랙)
   ========================= */
.grid-columns-head{
    width:100%;
    color:#586169; font-size:var(--head-font); font-weight:500; line-height:1;
}
.grid-columns-head .grid-line{
    display:grid;
    /* 기본: 선택 + No. + 데이터 N */
    grid-template-columns: var(--sel-w) var(--no-w) repeat(var(--data-cols), minmax(var(--col-min-w, 100px),1fr));
    gap: var(--grid-gap);
    align-items:center;
    padding: 0px 24px 14px 24px;
    min-height:30px;
    border-bottom: solid 1px #2E363E;
}
/* 체크박스 없는 경우: No. + 데이터 N */
.common-grid.no-select .grid-columns-head .grid-line{
    grid-template-columns: var(--no-w) repeat(var(--data-cols), minmax(var(--col-min-w, 100px),1fr));
}

.grid-columns-divider{ height:1px; background:var(--line); width:100%; margin:8px 0; }

/* 헤더용 체크박스 */
.grid-columns-head .grid-checkbox-all{
    width:16px; height:16px; appearance:none; -webkit-appearance:none; outline:none;
    border:1px solid #586169; border-radius:2px; background:#232B32; cursor:pointer;
}
.grid-columns-head .grid-checkbox-all:checked{
    background:#328DFF; border-color:#328DFF;
    box-shadow: inset 0 0 0 2px #232B32;
}

/* 헤더 라벨 셀 */
.grid-cell.muted{
    color:#586169; font-weight:500;
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* =========================
   바디 (동적 그리드 트랙)
   ========================= */
.grid-body{ 
    display:flex; 
    flex-direction:column; 
    gap:8px; 
    margin-top:8px;
    padding-right: 12px; /* 스크롤바 공간 확보 */
    padding-bottom: 20px; /* 마지막 항목이 잘 보이도록 여백 추가 */
}

/* 스크롤바 스타일링 */
.grid-body::-webkit-scrollbar {
    width: 8px;
}

.grid-body::-webkit-scrollbar-track {
    background: #232B32;
    border-radius: 4px;
}

.grid-body::-webkit-scrollbar-thumb {
    background: #586169;
    border-radius: 4px;
}

.grid-body::-webkit-scrollbar-thumb:hover {
    background: #7E8C95;
}

.grid-row{
    display:grid;
    /* 기본: 선택 + No. + 데이터 N */
    grid-template-columns: var(--sel-w) var(--no-w) repeat(var(--data-cols), minmax(var(--col-min-w, 100px),1fr));
    gap: var(--grid-gap);
    align-items:center;
    padding: var(--row-pad-v, 14px) var(--row-pad-h, 24px);
    background:#232B32; border-radius:4px;
    border: 1px solid transparent;
    color: #CFE0EF;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Pretendard', sans-serif;
    cursor: pointer;
    transition: background 0.2s ease;
}
.grid-row:hover{
    background: #2A3238;
}
.grid-row.is-active{
    border: 1px solid #328DFF;
    outline: none;                          /* 선택(outline)과 겹침 방지 */
}
.grid-row.selected.is-active{ outline: none; }
.common-grid.no-select .grid-row{
    /* 체크박스 없는 경우 */
    grid-template-columns: var(--no-w) repeat(var(--data-cols), minmax(var(--col-min-w, 100px),1fr));
}

.grid-row.selected{ outline:1px solid #2E363E; }

/* 헤더 행 (grid-container 페이지용) */
.grid-row.header {
    background: transparent;
    color: #586169;
    font-weight: 500;
    border-radius: 0;
    cursor: default;
}
.grid-row.header:hover { background: transparent; }

/* 체크박스 공통 (grid-container 페이지용) */
.grid-checkbox {
    width: 16px; height: 16px;
    background-color: #232B32;
    border: 1px solid #586169;
    border-radius: 2px;
    cursor: pointer;
    appearance: none; -webkit-appearance: none;
    position: relative;
}
.grid-checkbox:checked {
    background-color: #328DFF;
    border-color: #328DFF;
}
.grid-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 3px; top: 0px;
    width: 6px; height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 이 클래스가 붙은 셀에만 적용 (그리드 전역에서도 재사용 가능) */
.common-grid .grid-row .grid-cell.cell-tag-number{
    color: #328DFF;
}

.common-grid .grid-row .grid-cell.cell-tag-count{
    color: #FF594A;
}

/* === 체크박스 공통 (헤더/바디 동일 적용) === */
.common-grid .grid-checkbox,
.common-grid .grid-checkbox-all{
    width: var(--chk-size); height: var(--chk-size);
    appearance: none; -webkit-appearance: none; outline: none;
    border: 1px solid var(--chk-bd);
    border-radius: var(--chk-radius);
    background: var(--chk-bg);
    cursor: pointer; display: inline-block; position: relative;
}

.common-grid .grid-checkbox:hover,
.common-grid .grid-checkbox-all:hover{
    border-color: #8799A8;
}

.common-grid .grid-checkbox:focus-visible,
.common-grid .grid-checkbox-all:focus-visible{
    box-shadow: 0 0 0 3px rgba(50,141,255,.35);
}

/* 체크 상태: 배경 + 체크 아이콘 */
.common-grid .grid-checkbox:checked,
.common-grid .grid-checkbox-all:checked{
    background: var(--chk-checked-bg);
    border-color: var(--chk-checked-bd);
    color: var(--chk-icon);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23232B32' d='M10.3 3.3 5 8.6 1.7 5.3 3.1 3.9 5 5.8 8.9 1.9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* 일부 선택(indeterminate) 시: 가로 바 표시 */
.common-grid .grid-checkbox-all:indeterminate{
    background: var(--chk-checked-bg);
    border-color: var(--chk-checked-bd);
    background-image: linear-gradient(var(--chk-icon), var(--chk-icon));
    background-size: 10px 2px;
    background-position: center;
    background-repeat: no-repeat;
}

.common-grid .grid-checkbox:disabled,
.common-grid .grid-checkbox-all:disabled{
    opacity: .6; cursor: not-allowed; }

/* 공통 셀 */
.grid-cell{
    color: #CFE0EF; font-size: 14px; line-height:1;
    min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    font-family: 'Pretendard', sans-serif;
    display: flex; align-items: center;
}
.grid-cell.primary a, .grid-cell.primary{ color:var(--accent-blue); text-decoration:none; }
.grid-cell.primary a:hover{ text-decoration:underline; }

/* 정렬 헬퍼 클래스 (필요시 사용) */
.grid-cell.xs{ text-align:center; }
.grid-cell.sm{ text-align:center; }
.grid-cell.md{ text-align:left; }
.grid-cell.lg{ text-align:center; }
.grid-cell.xl{ text-align:left; }
.grid-cell.c{ text-align:left; }


/* ====== Status Badge (Pill Style) ====== */
.status-badge{
    height:auto; padding:6px 12px; border-radius:4px; border:none; outline:0;
    display:inline-flex; align-items:center; justify-content:center; gap:6px; box-sizing:border-box;
}
.status-badge span{
    font-size:12px; font-weight:600; line-height:1; color: inherit;
    white-space:nowrap;
}

/* normal / caution / danger */
.status-badge{ border:1px solid transparent; outline:0; } /* 유지 */

.status-badge.normal{
    background: rgba(11,216,158,.15);
    color: #0BD89E;
    border-color: currentColor;
}
.status-badge.caution{
    background: rgba(255,231,77,.15);
    color: #E2C044;
    border-color: currentColor;
}
.status-badge.critical,
.status-badge.danger{
    background: rgba(255,89,74,.15);
    color: #FA7047;
    border-color: currentColor;
}


/* 상태 배지 아이콘 */
.status-badge img.status-img{ width:14px; height:14px; display:block; }

/* Completed / In Progress / Pending - Pill Style */
.status-badge.completed{ background:rgba(40,167,69,.15); padding:6px 12px; border-radius:4px; }
.status-badge.completed span{ color:#28A745; font-weight:600; }
.status-badge.in_progress{ background:rgba(0,123,255,.15); padding:6px 12px; border-radius:4px; }
.status-badge.in_progress span{ color:#007BFF; font-weight:600; }
.status-badge.pending{ background:rgba(255,193,7,.15); padding:6px 12px; border-radius:4px; }
.status-badge.pending span{ color:#FFC107; font-weight:600; }
.status-badge.active{ background:rgba(11,216,158,.12); border-radius:4px; }
.status-badge.inactive{ background:rgba(126,140,149,.12); border-radius:4px; }

/* ====== Pagination ====== */
.grid-pagination {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding: 16px 70px 16px 0;
    border-top: 1px solid #2E363E;
    background: transparent;
    position: sticky;
    bottom: 0;
    z-index: 10;
}
.pagination-controls{ display:inline-flex; justify-content:flex-start; align-items:center; gap:16px; }
.btn-pagination{
    width:24px; height:24px; padding:6px; border:none; background:transparent;
    display:flex; justify-content:center; align-items:center; cursor:pointer;
}
.btn-pagination img{ width:12px; height:12px; }
.btn-pagination:disabled img{ opacity:.4; }
.page-numbers{ display:flex; align-items:center; gap:12px; }
.page-number{
    width:24px; height:24px; border-radius:4px; background:transparent; color:#7E8C95;
    display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; font-size:12px; font-weight:500;
}
.page-number.active{ background:#8799A8; color:#0E172A; font-weight:700; }

/* ====== Filters ====== */
.filter-row{ display:flex; gap:12px; align-items:center; }
.filter-box{
    height:46px; padding:16px 20px; border-radius:4px; box-sizing:border-box;
    background:var(--bg-0); outline:1px solid #586169; color:var(--txt-1);
    display:flex; align-items:center; gap:10px; min-width:300px;
}
.filter-box[aria-disabled="true"]{ outline-color:#2E363E; color:#586169; }
.filter-caption{ color:var(--accent-cyan); font-size:14px; font-weight:500; }

/* =========================
   밀도 프리셋 (행 개수에 따라 JS로 클래스 토글)
   폰트 크기는 14px 고정, 패딩/갭만 조절
   ========================= */
.common-grid.density-comfy{
    --row-gap: 10px;
    --row-pad-v: 14px;
    --head-pad-v: 14px;
}
.common-grid.density-normal{
    --row-gap: 8px;
    --row-pad-v: 12px;
    --head-pad-v: 12px;
}
.common-grid.density-compact{
    --row-gap: 4px;
    --row-pad-v: 8px;
    --head-pad-v: 8px;
}

/* ===== 반응형 디자인 ===== */
@media (max-width: 1600px) and (min-width: 1201px){
    .grid-columns-head .grid-line{ padding: var(--head-pad-v) 16px; }
    .grid-row{ padding: var(--row-pad-v) 16px; }
}

@media (max-width: 1200px){
    .grid-columns-head .grid-line{ padding: var(--head-pad-v) 16px; }
    .grid-row{ padding: var(--row-pad-v) 16px; }
}

@media (max-width: 992px){
    .grid-columns-head{ display:none; }
}

@media (max-width: 768px){
    .common-grid{ --grid-gap: 8px; }
    .grid-columns-head .grid-line{ padding: var(--head-pad-v) 12px; }
    .grid-row{ padding: var(--row-pad-v) 12px; }
    /* 폰트 크기 14px 고정 — 밀도는 패딩/갭만 조절 */
}

@media (max-width: 420px){
    .status-badge span{ max-width:70px; font-size:14px; }
    .common-grid{ --grid-gap: 6px; }
    .grid-cell{ font-size:14px; }
}

/* 빈 데이터 표시 */
.grid-empty-state{
    width:316px; margin:40px auto; display:flex; flex-direction:column; gap:20px; text-align:center; align-items:center;
}
.grid-empty-state img{ width:40px; height:40px; }
.grid-empty-title{ color:#AAB5BE; font-size:20px; font-family:Pretendard; font-weight:500; line-height:16px; }
.grid-empty-desc{ color:#8799A8; font-size:16px; font-family:Pretendard; font-weight:400; line-height:24px; }

/* 상태 pill */
.status-pill{
    display:inline-flex; align-items:center; gap:6px;
    padding:10px 14px; border-radius:16.24px;
    font:700 12px/12px Pretendard;
}
/* 아이콘만(incident 전용) */
.status-pill--icon-only{
    width:70px; height:32px;
    display:inline-flex; align-items:center; justify-content:center;
}
.status-pill__ico{ width:70px; height:32px; display:block; }
/* ===== 그리드 스크롤바 스타일 (위에서 정의한 것 외에 추가 옵션) ===== */
/* 스크롤바를 보이게 하려면 위에서 정의한 webkit-scrollbar 스타일을 사용 */
/* ===== 숫자/비숫자 정렬 규칙 ===== */
/* 기본: 바디 셀은 가운데 정렬 */
.common-grid .grid-row .grid-cell { text-align: center; }

/* 숫자 전용: 오른쪽 정렬 (우선순위 보장을 위해 !important) */
.common-grid .grid-row .grid-cell.align-right { text-align: right !important; }

/* 명시적 가운데 강제 */
.common-grid .grid-row .grid-cell.align-center { text-align: center !important; }

/* 헤더 라벨도 가운데(원한다면 유지) */
.common-grid .grid-columns-head .grid-cell.muted { text-align: center; }

/* ===== 라이트모드: 그리드 (모든 그리드 공통) ===== */
body.body--light .common-grid{
    --chk-bg: #FFFFFF;
    --chk-bd: #CBD5E0;
    --chk-checked-bg: #328DFF;
    --chk-checked-bd: #328DFF;
    --chk-icon: #FFFFFF;
}
body.body--light .grid-columns-head{ color:#6B7280; }
body.body--light .grid-columns-head .grid-line{ border-bottom-color:#E2E8F0; }
body.body--light .grid-columns-head .grid-checkbox-all{ border-color:#CBD5E0; background:#FFFFFF; }
body.body--light .grid-columns-head .grid-checkbox-all:checked{ background:#328DFF; border-color:#328DFF; box-shadow:inset 0 0 0 2px #FFFFFF; }
body.body--light .grid-cell.muted{ color:#6B7280; }
body.body--light .grid-columns-divider{ background:#E2E8F0; }
/* 행: 통일 — #F7F8FA (콘텐츠 배경 #FFFFFF 대비 구분) */
body.body--light .grid-row{ background:#F7F8FA; color:#1A202C; }
body.body--light .grid-row:hover{ background:#EDF0F4; }
body.body--light .grid-row.header{ background:transparent; color:#6B7280; }
body.body--light .grid-row.selected{ outline-color:#328DFF; }
body.body--light .grid-cell{ color:#1A202C; }
body.body--light .grid-body::-webkit-scrollbar-track{ background:#F3F5F9; }
body.body--light .grid-body::-webkit-scrollbar-thumb{ background:#CBD5E0; }
body.body--light .grid-body::-webkit-scrollbar-thumb:hover{ background:#9CA3AF; }
/* 체크박스 (grid-container 페이지용) */
body.body--light .grid-checkbox{ background:#FFFFFF; border-color:#CBD5E0; }
body.body--light .grid-checkbox:checked{ background:#328DFF; border-color:#328DFF; }
/* 페이지네이션 — 통일 */
body.body--light .grid-pagination{ background:transparent; border-top-color:#E2E8F0; }
body.body--light .pagination-container{ background:transparent; border-top-color:#E2E8F0; }
body.body--light .page-number{ color:#6B7280; }
body.body--light .page-number.active{ background:#374151; color:#FFFFFF; }
body.body--light .page-btn{ color:#6B7280; }
body.body--light .page-btn.active{ background:#374151; color:#FFFFFF; }
body.body--light .btn-pagination img{
    filter: brightness(0) saturate(100%) invert(40%) sepia(5%) saturate(800%) hue-rotate(180deg) brightness(95%) contrast(90%);
}
/* 상태/빈 데이터 */
body.body--light .grid-empty-title{ color:#4B5563; }
body.body--light .grid-empty-desc{ color:#6B7280; }
body.body--light .loading-state,
body.body--light .empty-state{ background:#F7F8FA; }
body.body--light .empty-title{ color:#4B5563; }
body.body--light .empty-desc{ color:#6B7280; }
/* Total results (grid-container 페이지) */
body.body--light .total-results span{ color:#1A202C; }
body.body--light .total-results .fw-bold{ color:#328DFF; }
/* Total results (CommonGrid 페이지) */
body.body--light .grid-total-label{ color:#1A202C; }
body.body--light .grid-total-count{ color:#328DFF; }
/* 센서 ID 링크 */
body.body--light .sensor-id-text{ color:#2563EB; }
/* 버튼 */
body.body--light .btn-primary-custom{ background:#1A202C; color:#FFFFFF; }
body.body--light .btn-secondary-custom{ background:#E2E8F0; color:#4B5563; }
body.body--light .common-grid .grid-checkbox:checked,
body.body--light .common-grid .grid-checkbox-all:checked{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FFFFFF' d='M10.3 3.3 5 8.6 1.7 5.3 3.1 3.9 5 5.8 8.9 1.9z'/%3E%3C/svg%3E");
}
body.body--light .filter-box{ background:#FFFFFF; outline-color:#CBD5E0; color:#1A202C; }
body.body--light .filter-box[aria-disabled="true"]{ outline-color:#E2E8F0; color:#9CA3AF; }