:root {
    --topbar: #3B4951;
    --footer: #3B4951;
    --icon: #FFFF00;
    --statusbar-bg: #FFFFFF;
    --btn: #E54E2B;
    --bg: #F8FAFC;
    --panel: #FFFFFF;
    --text: #0F172A;
    --muted: #64748B;
    --line: #E2E8F0;
    --radius: 14px;
    --shadow: 0 6px 20px rgba(2, 8, 23, .08);
    --container: 1280px;
    --i1: #16a34a;
    --i2: #22c55e;
    --i3: #0ea5a5;
    --i4: #10b981;
    --v1: #2563eb;
    --v2: #60a5fa;
    --v3: #7c3aed;
    --v4: #a78bfa;
    --run: #22c55e;
    --idle: #f59e0b;
    --manual: #8b5cf6;
    --alarm: #ef4444;
    --offline: #64748b;
    --production: #60a5fa;
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    /* 가로 스크롤 방지 */
}

main {
    min-height: calc(100vh - 125px);
    /* 헤더·푸터 높이 제외 */
    overflow-y: auto;
    /* 필요할 때만 세로 스크롤 */
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
    background: var(--bg);
    color: var(--text)
}

a {
    color: inherit;
    text-decoration: none
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 16px
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--topbar);
    color: #fff;
    border-bottom: 1px solid #2d3840
}

.topbar-inner {
    display: flex;
    align-items: center;
    height: 56px;
    gap: 12px;
    font-size: 1.1rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.brand .logo {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--icon)
}

.topbar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
}

.topbar .brand .logo {
    width: 40px;
    height: 40px;
    flex: 0 0 120px;
    background: transparent url('logo.svg') no-repeat center / contain;
}

.topbar .brand .brand-text {
    line-height: 1;
}

.nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 30px;
}

.nav a {
    min-width: 100px;
    color: #fff;
    opacity: .9;
    padding: 8px 8px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: .15s;
    position: relative;
    width: auto;
    white-space: nowrap;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.nav a:hover {
    background: rgba(255, 255, 255, .10);
    opacity: 1
}
/******************************** 활성화된 메뉴 스타일 *****************************/
.nav a.active {
    color: var(--icon);
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .24)
}
/*********************************************************************************/

.nav2 {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px
}

.nav2 a {
    color: #fff;
    opacity: .9;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: .15s;
    position: relative;
    width: 260px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.nav2 a:hover {
    background: rgba(255, 255, 255, .10);
    opacity: 1
}

.nav2 a.active {
    color: var(--icon);
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .24)
}

.right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: transparent;
    color: var(--icon);
    border-radius: 10px;
    cursor: pointer;
    padding: 6px 8px
}

.icon-btn-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: transparent;
    color: var(--muted);
    border-radius: 10px;
    cursor: pointer;
    padding: 0px 0px
}

.icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    color: #FFFFFF
}

.icon svg {
    width: 100%;
    height: 100%;
    fill: #FFFFFF;
    color: #FFFFFF
}

.btn-primary {
    background: var(--btn);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    min-width: 90px;
    /* 최소 폭 추가 */
}

.btn-primary:hover {
    filter: brightness(.95)
}

.btn-secondary {
    background: var(--text);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    min-width: 90px;
    /* 최소 폭 추가 */
}

.btn-secondary:hover {
    filter: brightness(.95)
}

.statusbar {
    background: var(--statusbar-bg);
    border-bottom: 10px solid var(--line)
}

.statusbar-inner {
    height: 36px;
    display: flex;
    align-items: center;
    gap: 12px
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #eef2f7;
    color: var(--muted);
    font-size: 12px
}

main {
    padding: 16px 0
}

.grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(12, 1fr)
}

.card {
    grid-column: span 12;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04)
}

@media (min-width: 960px) {
    .span-6 {
        grid-column: span 6
    }

    .span-4 {
        grid-column: span 4
    }

    .span-8 {
        grid-column: span 8
    }

    .span-12 {
        grid-column: span 12
    }
}

.muted {
    color: var(--muted);
    font-size: 13px
}

.card h3 {
    margin-top: 5px;
    /* 위쪽 여백 줄이기 */
    margin-bottom: 4px;
    /* 제목과 내용 사이 여백 */
}

footer.footerbar {
    background: var(--footer);
    color: #fff;
    margin-top: 24px
}

.footer-inner {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px
}

/*********************************************************************************/
/* 용접설비 개요 대시보드                                                               */
/*********************************************************************************/

/* Bar chart styles */
#barChart text {
    fill: var(--text);
    font-size: 12px;
}

#barChart .axis {
    stroke: #cbd5e1;
}

#barChart .bar {
    fill: var(--btn);
}

#barChart .bar:hover {
    opacity: .85;
}

.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
}

.chart-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
}

.chart-title {
    font-weight: bold;
    margin-bottom: 8px;
}

.chart-bars {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    height: 120px;
    /* 라벨 포함 영역 높이 */
}

.bar-wrap {
    flex: 1;
    /* 막대 간 너비 균등 */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 5px;
    /* 너무 좁아지지 않게 */
}

.chart-bar {
    width: 28px;
    /* 막대 두께 고정 (원하면 조절) */
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    padding: 2px;
    height: 100px;
    /* 라벨 포함 영역 높이 */
    min-height: 20px;
    /* 작은 값도 보이도록 최소 높이 */
    max-height: 100px;
    /* 라벨 포함 영역 높이 */
}

.bar-label {
    margin-top: 6px;
    font-size: 11px;
    color: #666;
    text-align: center;
    white-space: nowrap;
}

/* 상태별 styles*/
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 12px;
}

.summary-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
    cursor: pointer;
    /* 클릭 가능 포인터 */
    transition: box-shadow .15s, transform .05s;
}

.summary-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

.summary-card.active {
    outline: 2px solid var(--icon);
    box-shadow: 0 0 0 4px rgba(255, 255, 0, .25);
}

.summary-card h3 {
    margin-top: 0;
    font-size: 16px;
}

.summary-item {
    background: #f1f5f9;
    border-radius: 12px;
    padding: 4px 8px;
    margin-top: 4px;
    font-size: 14px;
    justify-content: center;
    /* 가로 가운데 정렬 */
    align-items: center;
    /* 세로 가운데 정렬 */
    text-align: center;
    /* 여러 줄 텍스트 가운데 정렬 */
    color: #fff;
    /* 글자색 흰색 */
    font-weight: bold;
}

.summary-item.online {
    background: var(--online);
}

.summary-item.offline {
    background: var(--offline);
}

.summary-item.run {
    background: var(--run);
}

.summary-item.idle {
    background: var(--idle);
}

.summary-item.manual {
    background: var(--manual);
}

.summary-item.alarm {
    background: var(--alarm);
}

.summary-item.data {
    background: #FFFFFF;
    color: #000000;
    font-weight: normal;
}


/* table styles*/
.grid-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.grid-5col {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.table-block {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.table-header {
    padding: 8px 12px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

.table-header.production_weld {
    background: #0270f7ff;
    border-radius: 10px 10px 0 0;
}

.table-header.production {
    background: var(--production);
    border-radius: 10px 10px 0 0;
}

.table-header.alarm {
    background: var(--alarm);
    border-radius: 10px 10px 0 0;
}

.table-header.run {
    background: var(--run);
    border-radius: 10px 10px 0 0;
}

.table-header.idle {
    background: var(--idle);
    border-radius: 10px 10px 0 0;
}

.table-block table {
    width: 100%;
    border-collapse: collapse;
}

.table-block td {
    padding: 6px 10px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
    /* 데이터 셀 크기 */
}

/* 값(두 번째) 컬럼 정렬 */
.table-block td:nth-child(2),
.table-block th:nth-child(2) {
    text-align: right;
    white-space: nowrap;
    /* 시간/숫자 줄바꿈 방지 */
    font-variant-numeric: tabular-nums;
    /* 숫자 자리 맞춤(가능한 폰트에서) */
}

.btn-view {
    background: #3b4951;
    color: #fff;
    border: none;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
}

/*********************************************************************************/

/*********************************************************************************/
/* 용접설비 현황 대시보드                                                               */
/*********************************************************************************/

/* KPI 4개 */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px
}

.kpi-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px
}

.kpi-card.kpi-run {
    background: var(--run);
    color: #fff;
}

.kpi-card.kpi-production {
    background: var(--production);
    color: #fff;
}

.kpi-card.kpi-productionweld {
    background: #0270f7ff;
    color: #fff;
}

.kpi-card.kpi-alarm {
    background: var(--alarm);
    color: #fff;
}

.kpi-card.kpi-idle {
    background: var(--idle);
    color: #fff;
}

.kpi-title {
    font-size: 16px;
    color: var(--text)
}

.kpi-value {
    font-size: 24px;
    font-weight: 700;
    margin-top: 4px
}

.kpi-sub {
    font-size: 12px;
    color: var(--muted)
}

/* 용접설비 카드 8개 */
.equip-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, 1fr)
}

@media (max-width:1280px) {
    .equip-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (max-width:960px) {
    .equip-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:640px) {
    .equip-grid {
        grid-template-columns: 1fr
    }
}

.equip-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.equip-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
    cursor: pointer; /* 마우스 포인터를 손가락 모양으로 */
}

.equip-card.active {
    outline: 2px solid var(--icon);
    box-shadow: 0 0 0 4px rgba(255, 255, 0, .25);
}

.equip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line)
}

.equip-title {
    display: flex;           /* 추가 */
    align-items: center;     /* 추가 */
    gap: 18px;               /* 원하는 간격(px)으로 조정 */
    font-weight: 700;
    background: #3B4951;
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    line-height: 1
}

.equip-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bold;
    background: #eee;
    min-width: 80px;      /* ✅ 폭 일정하게 */
    text-align: center;   /* ✅ 가운데 정렬 */
    box-sizing: border-box;
}
.status-run { background: #22c55e; color: #fff; }
.status-idle { background: #fbbf24; color: #fff; }
.status-manual { background: #60a5fa; color: #fff; }
.status-alarm { background: #ef4444; color: #fff; }
.status-offline { background: #aaa; color: #fff; }

.equip-pipe {
    font-size: 12px;
    color: var(--muted);
    min-width: 90px;   /* 파이프 번호가 없을 때도 공간 확보 */
    text-align: right; /* 오른쪽 정렬(선택) */
}

.meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 6px;
}

.meta .kv {
    background: #e2e8f0;
    border-radius: 8px;
    padding: 6px 8px;
    text-align: center
}

.meta .kv .k {
    font-size: 12px;
    color: #000000
}

.meta .kv .v {
    font-weight: 700
}

.speed {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 6px;
}

.speed .kv {
    background: #f1f5f9;
    border-radius: 8px;
    padding: 6px 8px;
    text-align: center
}

.speed .kv .k {
    font-size: 12px;
    color: #000000
}

.speed .kv .v {
    font-weight: 700
}

.speed_3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 6px;
}

.speed_3col .kv {
    background: #f1f5f9;
    border-radius: 8px;
    padding: 6px 8px;
    text-align: center
}

.speed_3col .kv .k {
    font-size: 12px;
    color: #000000
}

.speed_3col .kv .v {
    font-weight: 700
}

.speed_2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 6px;
}

.speed_2col .kv {
    background: #f1f5f9;
    border-radius: 8px;
    padding: 6px 8px;
    text-align: center
}

.speed_2col .kv .k {
    font-size: 12px;
    color: #000000
}

.speed_2col .kv .v {
    font-weight: 700
}

.progress {
    height: 10px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden
}

.progress .bar {
    height: 100%;
    background: var(--btn);
    width: 0%
}

.io {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px
}

.io .kv {
    background: #eef2ff;
    border-radius: 8px;
    padding: 6px 8px;
    text-align: center
}

.io .k {
    font-size: 12px;
    color: #000000
}

.io .v {
    font-weight: 700
}

.io .u {
    font-size: 12px;
    color: #000000
}

.io3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px
}

.io3col .kv {
    background: #eef2ff;
    border-radius: 8px;
    padding: 6px 8px;
    text-align: center
}

.io3col .k {
    font-size: 12px;
    color: #000000
}

.io3col .v {
    font-weight: 700
}

.io3col .u {
    font-size: 12px;
    color: #000000
}

.hist {
    height: 20px;
    border-radius: 8px;
    overflow: hidden;
    display: flex
}

.hist .seg {
    height: 100%
}

.hist-legend {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.hist-legend .sw {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #475569
}

.hist-legend .sw::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block
}

/* 상태 색상 */
.seg.run,
.sw.run::before {
    background: var(--run)
}

.seg.idle,
.sw.idle::before {
    background: var(--idle)
}

.seg.manual,
.sw.manual::before {
    background: var(--manual)
}

.seg.alarm,
.sw.alarm::before {
    background: var(--alarm)
}

.seg.offline,
.sw.offline::before {
    background: var(--offline)
}

/* ▼ 용접설비별 보기 모드 툴바 */
.toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 12px;
}

.toolbar select {
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 8px;
    background: #fff;
    min-width: 180px;
}

/* ▼ 보기모드별 섹션 표시/숨김 */
.view-section {
    display: none;
}

.view-section.active {
    display: block;
}

/* ▼ 실시간 그래프(스파크라인) */
.mini-chart {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    padding: 0px;
    margin-top: 6px;
}

.mini-chart svg {
    width: 100%;
    height: 180px;
}

.mini-chart path {
    fill: none;
    stroke-width: 2;
}

.path-current {
    stroke: var(--i2);
}

.path-voltage {
    stroke: var(--v2);
}

.path-heat {
    stroke: #0ea5a5;
}

/* ▼ 가동 현황 텍스트 */
.status-text {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

.status-text .kv {
    background: #f1f5f9;
    border-radius: 8px;
    padding: 6px 8px;
    text-align: center;
}

.status-text .kv .k {
    font-size: 12px;
    color: #000;
}

.status-text .kv .v {
    font-weight: 700;
}

/* ▼ 진행 현황 프로그레스 */
.progress {
    height: 20px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.progress .bar {
    height: 100%;
    background: var(--production);
    width: 0%;
    transition: width .2s ease;
}

.progress-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.progress-meta .kv {
    background: #e2e8f0;
    border-radius: 8px;
    padding: 6px 8px;
    text-align: center;
}

.progress-meta .kv .k {
    font-size: 12px;
    color: #000;
}

.progress-meta .kv .v {
    font-weight: 700;
}

/* ▼ 유틸: 숨김 */
.hidden {
    display: none !important;
}

/* ▼ 개별 용접설비 보기 레이아웃 */
.detail-meta,
.detail-io {
    display: grid;
    gap: 8px;
    margin: 8px 0;
}

.detail-meta {
    grid-template-columns: repeat(8, 1fr);
}

.detail-io {
    grid-template-columns: repeat(12, 1fr);
}

.detail-meta .kv {
    background: #f1f5f9;
    border-radius: 8px;
    padding: 6px 8px;
    text-align: center;
}

.detail-io .kv {
    background: #eef2ff;
    border-radius: 8px;
    padding: 6px 8px;
    text-align: center;
}

.detail-meta .k,
.detail-io .k,
.detail-io .u {
    font-size: 12px;
    color: #000;
}

.detail-meta .v,
.detail-io .v {
    font-weight: 700;
}
.detail-io .c {
    font-weight: 700;
    color: #E54E2B;
}

/* 개별 상세 하단: 히스토그램 + 프로그레스 2열 */
.detail-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 2열 */
    gap: 8px;
    align-items: center;
}

/* 히스토그램 그대로 사용 */
.detail-hist {
    height: 24px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    margin-top: 0px;
}

/* 상세 전용 프로그레스 바 높이 통일 */
.detail-progress .progress {
    height: 24px;
}

.detail-progress .progress .bar {
    background: var(--production);
}

/* Centered overlay label for detail progress bar */
.detail-progress .progress { position: relative; }
.detail-progress .progress .progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    color: #111111;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    pointer-events: none;
}

#equipDetailChart {
    height: 300px;
    width: 600px;
}

/* 테이블 모델 강제 */
table.detail-io {
  display: table !important;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
}

table.detail-io thead { 
  display: table-header-group !important;
}

table.detail-io tbody { 
  display: table-row-group !important;
}

table.detail-io tr {
  display: table-row !important;
}

table.detail-io th,
table.detail-io td {
  display: table-cell !important;
  vertical-align: middle;
  text-align: center;
}

/* flex/float/그리드 강제 해제 (프레임워크 충돌 대비) */
table.detail-io,
table.detail-io thead,
table.detail-io tbody,
table.detail-io tr {
  float: none !important;
  flex: none !important;
  text-align: center;
}

/* 선택: 기본 스타일 */
table.detail-io th,
table.detail-io td {
  border: 1px solid #ccc;
  padding: 6px 8px;
  text-align: center;
}
table.detail-io th { background:#f3f3f3; font-weight:600; }
table.detail-io td:first-child { background:#fafafa; font-weight:600; text-align:center; }

/* 강조 색상 */
table.detail-io td[id*="_wps"] {
  background-color: #f3f0ff;
  color: #563acc;
}
table.detail-io td[id*="_max"] {
  background-color: #fff8e1;
}
table.detail-io td[id*="_min"] {
  background-color: #e9f7ef;
}
table.detail-io td[id*="_set"] {
  background-color: #eef7ff;
  color: #004c91;
  font-weight:600;
}
table.detail-io td[id*="_real"] {
  background-color: #f7e2da;
  color: #910000;
  font-weight:600;
}
table.detail-io td[id*="_unit"] {
  background-color: #fafafa;
}

/* 선택: 기본 스타일 */
table.detail-io-jobdata {
    padding: 6px 8px;
    margin-top: 8px;
}

#equipDetailCard .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
#equipDetailCard .card-header h3 {
    margin: 0;
    flex: 1;              /* h3가 남은 공간을 차지 */
}
/*********************************************/
#equipDetailCard .reload-btn {
    margin-left: auto;    
}
/*********************************************/
.reload-label {
    font-size:12px;
    margin-right:0px;
    color: var(--muted)
}
/* 아이콘 버튼 기본 스타일(있지 않다면 추가) */
.icon-btn {
    width: 32px; height: 32px;
    border: none; background: transparent; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #334155; cursor: pointer;
}
.icon-btn:hover { background: #eef2ff; color: #1d4ed8; }
.reload-btn.spinning svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/*********************************************************************************/

/********************************************************************************/
/* 용접 결과 대시보드                                                              */
/********************************************************************************/
/* forms */
.form-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px
}

.form-row2 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px
}

.form-row8 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px
}

.form-row9 {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 8px
}

.form-row2 .form-field {
    flex: 1 1 120px; /* 최소 120px, 공간 나누기 */
    min-width: 140px; /* 너무 작아지지 않게 */
    max-width: 220px; /* 너무 커지지 않게 (선택) */
    box-sizing: border-box;
}

.form-row8 .form-field {
    flex: 1 1 50px; /* 최소 120px, 공간 나누기 */
    min-width: 50px; /* 너무 작아지지 않게 */
    max-width: 200px; /* 너무 커지지 않게 (선택) */
    box-sizing: border-box;
}

.form-row9 .form-field {
    flex: 1 1 50px; /* 최소 120px, 공간 나누기 */
    min-width: 50px; /* 너무 작아지지 않게 */
    max-width: 200px; /* 너무 커지지 않게 (선택) */
    box-sizing: border-box;
}


.form-field {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 4px
}

.form-field label {
    font-size: 12px;
    color: var(--muted)
}

.form-field input,
.form-field select {
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 8px;
    background: #fff
}

.actions {
    display: flex;
    gap: 8px;
    align-items: end
}

/* list */
.table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 10px
}

.multi-select {
    min-width: 150px;
    position: relative;
    user-select: none;
}

.multi-header {
    padding: 7px 6px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.multi-options {
    position: absolute;
    top: 100%;             /* ✔ 헤더 바로 아래에 붙도록 */
    left: 0;
    min-width: 120px;
    width: max-content;
    border: 1px solid #ccc;
    background: white;
    border-radius: 6px;
    margin-top: 4px;       /* 헤더와 간격 */
    padding: 8px;
    display: none;
    flex-direction: column;
    max-height: 420px;
    overflow-y: auto;
    z-index: 10;
    font-size: 14px;
}

/* 옵션 항목 정렬 + 간격 */
.multi-options label {
    display: flex !important;
    flex-direction: row !important;   /* .filters label 의 column 덮어쓰기 */
    align-items: center !important;   /* 체크박스와 텍스트 높이 일치 */
    gap: 6px;
    padding: 2px 0;        /* ✔ 옵션 상하 간격 */
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;   /* 줄바꿈 방지 */
    color: #333;
}

.multi-options input[type="checkbox"] {
    margin: 0;             /* 위아래 간격 영향 없게 */
}

.arrow {
    font-size: 12px;
}

.multi-header .arrow {
    font-size: 12px;
    transition: transform 0.2s ease;  /* 부드럽게 회전 */
}

/* 헤더에 .open 붙으면 화살표 180도 회전 */
.multi-header.open .arrow {
    transform: rotate(180deg);
}

.table-wrap {
    max-height: 400px;
    overflow-y: auto;
}

#weldList {
    width: 100%;
    border-collapse: collapse;
}

#weldList thead th {
    position: sticky;
    top: 0;
    background: #fafafa;
    /* 헤더 배경 */
    z-index: 2;
}
#weldList thead th {
    position: sticky;
    top: 0;
    background: #fafafa;
    /* 헤더 배경 */
    z-index: 2;
}
table {
    width: 100%;
    border-collapse: collapse
}

th,
td {
    padding: 8px 8px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    max-width: 130px;       /* 원하는 최대 너비(px) */
}

th {
    background: #f8fafc;
    text-align: left;
    color: #334155
}

td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

/* legend */
.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px
}

.legend .item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #475569
}

.legend .sw {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block
}

/* chart */
.weld-chart-card {
    min-height: 450px
}

#weldChart,
.weld-chart-host {
    width: 100%;
}

/* SVG 전용 (기존 .weld-chart 규칙 유지) */
svg.weld-chart {
    width: 100%;
    height: 340px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.weld-chart text {
    fill: #475569;
    font-size: 12px
}

.weld-chart .grid {
    stroke: #e2e8f0;
    stroke-width: 1
}

.weld-chart .axis {
    stroke: #94a3b8;
    stroke-width: 1
}

.path-i1 {
    stroke: var(--i1)
}

.path-i2 {
    stroke: var(--i2)
}

.path-i3 {
    stroke: var(--i3)
}

.path-i4 {
    stroke: var(--i4)
}

.path-v1 {
    stroke: var(--v1)
}

.path-v2 {
    stroke: var(--v2)
}

.path-v3 {
    stroke: var(--v3)
}

.path-v4 {
    stroke: var(--v4)
}

.series-path {
    fill: none;
    stroke-width: 2
}

@media print {
  body * { visibility: hidden !important; }
  #reportArea, #reportArea * { visibility: visible !important; }

  /* ✅ 인쇄 시 무조건 보이도록 (hidden 클래스 무력화) */
  #reportArea {
    display: block !important;
    position: absolute; left: 0; top: 0; width: 100%;
  }

  /* (선택) 차트 색 보정 */
  #reportArea, #reportArea * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* (선택) 섹션 단위로 페이지 분리 방지 */
  .report-section { break-inside: avoid; page-break-inside: avoid; }

  html, body {
    overflow: visible !important;
  }
  #reportArea {
    overflow: visible !important;
  }
}
/*********************************************************************************/

/********************************************************************************/
/* 가동 통계 대시보드                                                              */
/********************************************************************************/
/* ===== 가동 통계: 필터 ===== */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end
}

.filters label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #475569
}

.filters select,
.filters input[type=date] {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 10px;
    background: #fff;
    min-width: 160px;
}

/* ===== 용접설비 그리드 ===== */
.oee-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, 1fr)
}

@media (max-width:1280px) {
    .oee-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (max-width:960px) {
    .oee-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:640px) {
    .oee-grid {
        grid-template-columns: 1fr
    }
}

.oee-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.oee-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.oee-name {
    font-weight: 700;
    background: #3B4951;
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    line-height: 1
}

.oee-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px
}

.oee-meta2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px
}

.oee-kv {
    background: #f1f5f9;
    border-radius: 8px;
    padding: 6px 8px;
    text-align: center
}

.oee-kv .k {
    font-size: 12px;
    color: #475569
}

.oee-kv .v {
    font-weight: 700
}

/* ===== 그래프 공통 ===== */
.oee-graph {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px;
    min-height: 140px
}

.oee-graph .title {
    font-size: 12px;
    color: #64748B;
    margin-bottom: 6px
}

/* (Day) 24h 히스토그램: 시간 축 없이 색 분포 막대 + 보조 눈금 */
.hist24 {
    display: flex;
    height: 40px;
    border-radius: 8px;
    overflow: hidden
}

.hist24 .bin {
    flex: 1
}

.hist24-scale {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #64748B;
    margin-top: 4px
}

.hist24-scale span {
    transform: translateX(-50%);
}

/* (Week/Month) 일자별 가동률 막대 그래프 */
.bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 100px
}

.bar {
    flex: 1;
    position: relative;
    height: 100%;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.bar .fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    background: var(--run);
}

.bar .lbl {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 10px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3)
}

.bars-x {
    display: flex;
    gap: 2px;
    justify-content: space-between;
    font-size: 9px;
    color: #64748B;
    margin-top: 4px
}

/*.bars-wrap { overflow-x: auto; }*/
.bars.compact {
    gap: 2px;
}

.bars-x.compact {
    font-size: 9px;
}

.bars-x span {
    white-space: nowrap;
}

/* 상태 색상 토큰 (이미 있으면 생략 가능) */
.seg.run {
    background: var(--run)
}

.sw.run::before {
    background: var(--run)
}

.seg.idle {
    background: var(--idle)
}

.sw.idle::before {
    background: var(--idle)
}

.seg.manual {
    background: var(--manual)
}

.sw.manual::before {
    background: var(--manual)
}

.seg.alarm {
    background: var(--alarm)
}

.sw.alarm::before {
    background: var(--alarm)
}

.seg.offline {
    background: var(--offline)
}

.sw.offline::before {
    background: var(--offline)
}

.legend-states {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.legend-states .sw {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #475569
}

.legend-states .sw::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block
}

.oee-table-wrap {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/********************************************************************************/

/********************************************************************************/
/* 시스템 로그 대시보드                                                            */
/********************************************************************************/
/* ===== 시스템 로그: 필터 ===== */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end
}

.filters label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #475569
}

.filters select,
.filters input[type=date],
.filters input[type=text] {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 10px;
    background: #fff;
    min-width: 160px;
}

/* ===== 로그 패널 ===== */
.pane-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px
}

.log-pane {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 6px;
    height: clamp(400px, 62vh, 700px);
    /* 세로 스크롤 높이 */
    overflow-y: auto;
}

/* 로그 아이템 */
.log-item {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 8px;
    align-items: start;
    padding: 8px;
    border-bottom: 1px dashed #e5e7eb
}

.log-item:last-child {
    border-bottom: none
}

.log-time {
    font-size: 12px;
    color: #64748B;
    white-space: nowrap
}

.log-msg {
    font-size: 14px
}

.log-equip {
    font-size: 12px;
    color: #475569;
    white-space: nowrap
}

.sev {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.sev.info {
    background: #e2e8f0;
    color: #0f172a
}

.sev.warn {
    background: #fef3c7;
    color: #92400e
}

.sev.err {
    background: #fee2e2;
    color: #991b1b
}

.sev.crit {
    background: #fecaca;
    color: #7f1d1d;
    border: 1px solid #ef4444
}

/* 알람 전용 코드/원인 배지 */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 11px;
    background: #f1f5f9;
    color: #334155;
    margin-left: 6px
}

/* 가독성 옵션 */
.log-msg small {
    color: #64748B
}

/********************************************************************************/

/********************************************************************************/
/* 용접 결과 상세 분석 대시보드                                                     */
/********************************************************************************/
/* 헤더는 가운데 정렬 */
#statsMerged thead th {
    text-align: center;
    background-color: #f5f5f5;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 0;
    /* ← 둥글림 제거 */
}

/* 일반 셀은 우측 정렬 */
#statsMerged tbody td {
    text-align: right;
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 0;
    /* ← 둥글림 제거 */
}

/* 파이프 이름(첫 번째 열)은 왼쪽 정렬 */
#statsMerged tbody td:first-child {
    text-align: left;
    font-weight: bold;
}

/* 전체 테이블도 라운드 제거 */
#statsMerged {
    border-collapse: collapse;
    border-radius: 0;
    /* ← 둥글림 제거 */
}

/* 입력표 스타일 */
#anomalyThresholds thead th {
    text-align: center;
    background: #f5f5f5;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 0;
    white-space: nowrap;
    /* 제목 줄바꿈 방지 */
}

#anomalyThresholds tbody td {
    text-align: right;
    padding: 6px 6px 6px 6px;
    /* 오른쪽 패딩 증가 */
    border: 1px solid #ddd;
    border-radius: 0;
    white-space: nowrap;
    /* 제목 줄바꿈 방지 */
}

#anomalyThresholds tbody td:first-child {
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    /* 제목 줄바꿈 방지 */
}

#anomalyThresholds input[type=number] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 1px 4px 1px;
    /* 오른쪽 패딩 증가 */
    text-align: right;
    white-space: nowrap;
    /* 제목 줄바꿈 방지 */
}

/* 결과표 스타일 (라운드 0, 헤더 중앙/숫자 우측) */
#anomalyTableByTable thead th {
    text-align: center;
    background: #f5f5f5;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 0;
}

#anomalyTableByTable tbody td {
    text-align: right;
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 0;
}

#anomalyTableByTable tbody td:first-child {
    text-align: left;
    font-weight: 600;
}

#anomalyTableByTable tbody td:nth-child(2),
#anomalyTableByTable tbody td:nth-child(5) {
    text-align: center;
}

/********************************************************************************/

/********************************************************************************/
/* 가동 통계 상세 분석 대시보드                                                     */
/********************************************************************************/
.oee-grid.one-col {
    display: block
}

.oee-grid.one-col .oee-card {
    width: 100%;
    max-width: 100%;
    margin-bottom: 16px
}

.filters .row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap
}

.filters label {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.card .filters+.filters {
    margin-top: 12px;
}

.table-wrap {
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px
}

table.simple {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px
}

table.simple th,
table.simple td {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    white-space: nowrap
}

table.simple thead th {
    position: sticky;
    top: 0;
    background: #fafafa;
    z-index: 1
}

.mini-bars {
    display: flex;
    gap: 8px;
    align-items: flex-end
}

.mini-bars .col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px
}

.mini-bars .stack {
    width: 18px;
    height: 120px;
    display: flex;
    flex-direction: column
}

.mini-bars .seg {
    width: 100%
}

.seg.run {
    background: var(--run)
}

.seg.idle {
    background: var(--idle)
}

.seg.manual {
    background: var(--manual)
}

.seg.alarm {
    background: var(--alarm)
}

.seg.offline {
    background: var(--offline)
}

.echart {
    min-height: 400px;
}

/********************************************************************************/

/********************************************************************************/
/* 시스템 로그 대시보드                                                     */
/********************************************************************************/
/* 스크롤 영역 */
.table-scroll {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #d0d5dd;
    position: relative;
}

/* thead 고정 */
.table-scroll thead th {
    position: sticky;
    top: 0;
    background: #f8f9fa;   /* 헤더 배경 (어두운 톤 원하면 변경 가능) */
    z-index: 10;
    border-bottom: 1px solid #ccc;
}

/* 기본 테이블 스타일 */
.table-scroll table {
    border-collapse: collapse;
    width: 100%;
}

.table-scroll th,
.table-scroll td {
    border-bottom: 1px solid #eee;
}
/********************************************************************************/