body {
    margin: 0;
}
main {
    flex-grow: 1;
    padding: 20px;
}
.header {
    border-bottom: 1px solid #dee2e6;
    padding: 20px 20px;
}
.wrapper {
    display: flex;
    min-height: 100vh;
}
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 210px;
    background-color: #343a40;
    color: white;
    z-index: 1000;
}
.sidebar .nav-link {
    color: white;
    padding: 14px 20px;
    position: relative;
    font-size: 1rem;
}
.sidebar .submenu .nav-link:hover {
    background-color: #495057;
}
.sidebar .submenu {
    display: none;
}
.sidebar .submenu .nav-link {
    color: #ddd;
    font-size: 0.88rem;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 38px;
}
.sidebar .nav-item.open .submenu {
    display: block;
}
.sidebar .nav-link[data-bs-toggle="submenu"]::after {
    content: "\25BC";
    position: absolute;
    right: 20px;
    font-size: 0.6rem;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}
.sidebar .nav-item.open > .nav-link[data-bs-toggle="submenu"]::after {
    transform: rotate(180deg);
}

/* 사이드바 접힘 상태 */
.sidebar.collapsed {
    transform: translateX(-210px);
    transition: transform 0.3s ease;
}
/* 활성 메뉴 하이라이트 */
.sidebar .nav-link.active {
    background-color: #495057;
    color: #fff;
}
.sidebar .submenu .nav-link.active {
    background-color: #495057;
/*
    pointer-events: none;
    cursor: default;
    현재 메뉴 이벤트 막을때 사용
*/
}

.sidebar-toggle-btn {
    position: absolute;
    top: 60px;
    right: -15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background-color: #343a40;
    color: #fff;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.3s ease;
    font-size: 1.0rem;
    display:flex;
    align-items:center;   /* 세로 중앙 */
    justify-content:center;/* 가로 중앙 */
    line-height:1;        /* 폰트 여백 영향 최소화 */
    padding-bottom:4px;   /* 1px 만큼 위로 보정 */
}

.flex-grow-1 {
    margin-left: 210px; /* 사이드바 너비만큼 마진 */
    width: calc(100% - 210px); /* 필요 시 명시 */
}

.flex-grow-1.collapsed {
    margin-left: 0 !important;
    width: 100% !important;
}

.table {
    table-layout: fixed;  /* 비율 고정 */
    width: 100%;
}

.table th,
.table td {
    white-space: nowrap;    /* 줄바꿈 금지 */
    overflow: hidden;       /* 넘친 부분 숨김 */
    text-overflow: ellipsis;/* … 표시 */
}
.table thead th {
    background-color: #f5f6f9;
}

/* 상세 테이블 전용 */
.detail-table {
    border-top: 1px solid #dee2e6; /* 상단 보더 */
    table-layout: fixed;   /* 셀 폭 균등 분배 */
    width: 100%;           /* 테이블은 가로 꽉 차게 */
}

.detail-table th,
.detail-table td {
    padding-top: 0.6rem;  /* 기본 0.5rem → 약간 넓게 */
    padding-bottom: 0.6rem;
    vertical-align: middle; /* 항상 수직 가운데 정렬 */
}

.multi-line-text {
    font-family: inherit;   /* 부모 글꼴 상속 (Pretendard 등) */
    font-size: inherit;     /* 부모 폰트 크기 상속 */
    white-space: pre-wrap;  /* 줄바꿈 유지 */
    word-break: break-word; /* 긴 단어 줄바꿈 */
    margin: 0;
}
textarea.form-control-sm {
    min-height: 3em;   /* 최소 높이 */
    height: auto;      /* 내용 많아지면 자동 확장 */
}

main.container-fluid .table {
    --bs-table-color: #495057;           /* gray-700 */
    --bs-table-striped-color: #495057;
    --bs-table-hover-color: #495057;
}

.sticky-top-console {
    /* position: sticky; */
    top: 0;              /* 화면 최상단부터 붙이기 */
    z-index: 100;        /* 다른 요소보다 위로 */
    background: #f8f9fa; /* 스크롤 시 투명해지지 않게 배경 고정 */
    padding-top: 5px;
}
.status-console{
    background:#f8f9fa;
    color:#333;
    font-family:Consolas,Menlo,monospace;font-size:0.8rem;
    border:1px solid #ccc;
    padding:10px;
    margin-bottom:20px;
    height:240px;
    min-height:40px;
    max-height:480px;
    overflow-y:auto;
    white-space:pre-wrap;
    resize: vertical;
    position: static;
    z-index: 50;
}
/*.flow-row{border:1px solid #ccc;background:#fff;margin-bottom:10px;display:flex;flex-direction:column;}*/
.flow-content{display:flex;align-items:stretch;}
.flow-id{width:100px;border-right:1px solid #ccc;display:flex;justify-content:center;align-items:center;font-weight:bold;}
.steps-container{flex:1;display:flex;flex-wrap:wrap;padding:10px;gap:5px;}
.step-box{
    width:120px;min-height:80px;background:#e9f0fa;border:1px solid #b0c4de;border-radius:4px;text-align:center;padding:5px;font-size:0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.step-box.important{background:#fdeaea;border-color:#f5c2c2;}
.buttons-container{width:80px;border-left:1px solid #ccc;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:5px;gap:5px;}
.buttons-container .btn{width:60px;}
.log-toggle{padding:5px 10px;text-align:right;}
.log-area{display:none;border-top:1px dashed #aaa;background:#f9f9f9;padding:10px;font-size:0.85rem;color:#555;max-height:300px;overflow-y:auto;}
.pagination{justify-content:center;}
.log-area table td{font-size:0.75rem;font-family:Consolas,monospace;padding:4px 8px;white-space:nowrap;}
.message-cls.status-ready{background-color:#198754;color:white;font-weight:bold;padding:2px 6px;border-radius:4px;}
.message-cls.status-running{background-color:#D5C42D;color:black;font-weight:bold;padding:2px 6px;border-radius:4px;}
.message-cls.status-success{background-color:#0D6EFD;color:white;font-weight:bold;padding:2px 6px;border-radius:4px;}
.message-cls.status-failure{background-color:#C83B3B;color:white;font-weight:bold;padding:2px 6px;border-radius:4px;}
.message-cls.status-skipped{background-color:#495057;color:white;font-weight:bold;padding:2px 6px;border-radius:4px;}
.btn-xs{font-size:0.75rem;padding:4px 4px;line-height:1;border-radius:4px;}
.json-view{height:400px;overflow:auto;font-family:Consolas,monospace;font-size:0.75rem;}
.highlight-line {
    background: linear-gradient(
            transparent 55%,
            rgba(255, 193, 7, 0.5) 55%,   /* #ffc107 */
            rgba(255, 193, 7, 0.5) 80%,
            transparent 80%
    );
}


/* 검색창과 드롭다운을 감싸는 컨테이너 */
.search-wrapper { position: relative; max-width: 400px; }

/* 드롭다운 박스 전체 스타일 */
.dropdown-box { position: absolute; top: calc(100% + 4px); left: 0; z-index: 200; width: 100%; background-color: #fff; border: 1px solid #dee2e6; border-radius: 0.375rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); overflow: hidden; }

/* 드롭다운 헤더 */
.recent-header { padding: 10px 12px; font-size: 13px; font-weight: 500; color: #6c757d; background-color: #f8f9fa; border-bottom: 1px solid #dee2e6; }

/* 최근 검색어 목록 아이템 */
.recent-item { padding: 8px 12px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.recent-item:not(:last-child) { border-bottom: 1px solid #f1f1f1; }
.recent-item:hover { background-color: #f8f9fa; }

.keyword-text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 10px; }

/* 삭제 버튼 */
.remove-btn { font-size: 18px; line-height: 1; color: #adb5bd; cursor: pointer; border: none; background: none; padding: 0 4px; }
.remove-btn:hover { color: #dc3545; }

/* 전체 삭제 버튼이 있는 푸터 */
.recent-footer { padding: 8px 12px; text-align: right; border-top: 1px solid #dee2e6; }

.clear-all-btn { font-size: 12px; color: #6c757d; background: none; border: none; cursor: pointer; }
.clear-all-btn:hover { color: #212529; text-decoration: underline; }

/* 특정 컬럼만 nowrap 무시(줄바꿈 허용) */
.ws-normal {
    white-space: normal !important;
}