/* #region 드롭다운 버튼 디자인 */
.dropdown {
    position: relative;
    display: inline-block;
}

/* 트리거 버튼 */
.dropdown .trigger {
    cursor: pointer;
    padding: .5rem .75rem;
    display: inline-flex;
    align-items: center;
}

    .dropdown .trigger::after {
        font-size: .9rem;
        line-height: 1;
    }

    .dropdown::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%; /* 트리거 바로 아래 */
        height: 10px; /* 마우스가 지나갈 폭 (필요 시 6~12px 조절) */
        /* 투명해도 됨 */
        pointer-events: auto; /* 이 영역 위에 마우스가 있어도 hover 유지 */
        z-index: 5;
    }

/* 메뉴 (초기 숨김) */
    .dropdown .menu {
        position: absolute;
        right: 0;
        top: calc(100% + .25rem);
        min-width: 100%;
        background: white;
        color: var(--asai-text-strong);
        border: 1px solid var(--asai-border);
        border-radius: .5rem;
        box-shadow: 0 8px 24px rgba(0,0,0,.12);
        padding: .25rem;
        opacity: 0;
        transform: translateY(-4px);
        pointer-events: none;
        transition: .15s ease;
        z-index: 20;
    }

.menu a, .menu button {
    display: block;
    width: 100%;
    padding: .5rem .75rem;
    background: transparent;
    color: inherit;
    border: 0;
    text-align: left;
    cursor: pointer;
    border-radius: .375rem;
    font-size: .8rem;
}

    .menu a:hover, .menu button:hover {
        background: var(--asai-primary-light);
    }

/* ★ 핵심: hover 시 열림 (컨테이너에서 벗어나면 자동 닫힘) */
.dropdown:hover .menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* 접근성 보강: 내부에 포커스가 있으면 열림 유지(키보드/터치 대응) */
.dropdown:focus-within .menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* 왼쪽 정렬로 띄우려면: .menu { right:auto; left:0; } */

/* #endregion 드롭다운 버튼 디자인 */

/* #region 솔루션 디자인 */
.solution {
    width: 100%;
    margin: 0; /* 우선 초과 원인 제거 */
    padding: 1rem; /* margin 대신 padding */
    overflow-x: hidden;
}

.solution-search {
    overflow: visible !important;
    position: relative !important;
    z-index: auto !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    margin-bottom: 1.5rem !important;
}

    .solution-search .solution-search-display {
        display: flex;
    }

        .solution-search .solution-search-display input {
            width: 250px;
            margin-right: 10px;
        }

.solution-search-filter button + button {
    margin-left: 10px;
}

.solution-container {
    font-family: inherit;
    max-width: 100%;
    margin: auto;
}

.solution-container-info {
    background: var(--asai-surface-subtle);
    border: 1px solid var(--asai-border);
    padding: 1.5rem;
    border-radius: 10px;
    margin-bottom: 2rem;
}

.solution-container-info-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
}

    .solution-container-info-title h2 {
        margin: 0;
    }

.solution-container-info-options {
    margin-top: 1rem;
    position: relative;
}

    .solution-container-info-options input {
        padding: 8px;
        margin-left: 1rem;
        font-size: 16px;
        border-radius: 6px;
        border: 1px solid var(--asai-border);
        box-sizing: border-box;
    }

    .solution-container-info-options button {
        background-color: var(--asai-primary);
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 5px;
        margin-left: 1rem;
    }

.solution-container-info-options-suggestions {
    position: absolute;
    top: 100%; /* input 바로 아래 */
    left: 10rem;
    right: 0;
    background-color: white;
    border: 1px solid var(--asai-border);
    border-top: none;
    border-radius: 6px;
    z-index: 1000;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

    .solution-container-info-options-suggestions li {
        padding: 10px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

        .solution-container-info-options-suggestions li:hover {
            background-color: var(--asai-primary-light);
        }

.solution-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--asai-border);
    font-family: inherit;
}

.solution-table-row {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.solution-table-cell {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    max-width: 100%;
    padding: 8px;
    border: 1px solid var(--asai-border);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.solution-table-log {
/*    background-color: aqua;*/
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
/*    border: 1px solid var(--asai-border);*/
    font-family: inherit;
}

    .solution-table-log-cell {
        padding: 8px;
        /*    border: 1px solid var(--asai-border);*/
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1 1 0;
    }

    .solution-table-log-msg-cell {
        padding: 8px;
        /*    border: 1px solid var(--asai-border);*/
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 3 1 0; /* name 칼럼이 3배 더 커질 수 있음 */
    }

.solution-bottom{
    width: 100%;
}

/* Solution bottom pagination CSS */
.solution-pagination {
/*    background-color: aqua;*/
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

    .solution-pagination button {
        padding: 8px 16px;
        font-size: 16px;
        border: 1px solid var(--asai-border);
        background-color: transparent;
        border: none;
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.2s ease;
    }

        .solution-pagination button:hover {
            background-color: var(--asai-primary-light);
        }

        .solution-pagination button.active {
            background-color: var(--asai-primary);
            color: white;
            font-weight: bold;
            border-color: var(--asai-primary);
        }

/* Solution Dropdown menu CSS jhlee_20250520 */
.solution-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.solution-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    z-index: 9999;
    width: 180px;
    padding: 0;
    border: 0px solid var(--asai-border);
    list-style: none;
}

    .solution-dropdown-menu li {
        padding: 8px 16px;
        cursor: pointer;
        font-size: 14px;
    }

        .solution-dropdown-menu li:hover {
            background-color: var(--asai-primary-light);
        }

.solution-dropdown-menu-right {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    z-index: 9999;
    width: 100%;
    padding: 0;
    border: 0px solid var(--asai-border);
    list-style: none;
}

    .solution-dropdown-menu-right li {
        padding: 8px 16px;
        cursor: pointer;
        font-size: 14px;
    }

        .solution-dropdown-menu-right li:hover {
            background-color: var(--asai-primary-light);
        }

/* #endregion 솔루션 디자인 */
.card {
    gap: 1rem;
    padding: .5rem;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: var(--asai-radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

    .card input {
        background-color: lightgray;
        width: 80%;
        height: 100%;
        border: .5px;
        border-radius: .25rem;
    }

.slot {
    width: 100%;
}

/* ========================================================================
   ASAI V1 unified page system
   Dashboard DataOps 시안 1의 토큰/간격/카드/표 규칙을 나머지 페이지에 확장한다.
   ======================================================================== */
.as-page{width:min(calc(100% - 48px),1680px);margin:0 auto;padding:28px 0 40px;display:flex;flex-direction:column;gap:18px;color:var(--asai-text)}
.as-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;min-height:70px}
.as-page-head>div:first-child{min-width:0}.as-eyebrow{display:block;margin-bottom:4px;color:var(--asai-primary);font-size:13px;font-weight:800;letter-spacing:-.01em}
.as-page-head h1{margin:0;color:var(--asai-text-strong);font-size:28px;font-weight:800;letter-spacing:-.035em;line-height:1.25}.as-page-head p{margin:6px 0 0;color:var(--asai-text-muted);font-size:14px}
.as-head-meta{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding:9px 12px;border:1px solid var(--asai-border-light);border-radius:8px;background:#fff;box-shadow:var(--shadow-1)}.as-head-meta span{font-size:12px;color:var(--asai-text-muted)}.as-head-meta strong{font-size:14px;color:var(--asai-text-strong)}
.as-grid{display:grid;gap:16px;min-width:0}.as-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.as-register-grid>.as-card,.as-system-top>.as-card{height:100%}
.as-card{min-width:0;background:#fff;border:1px solid var(--asai-border);border-radius:10px;box-shadow:var(--shadow-1);overflow:visible}.as-card-head{min-height:64px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 18px 12px;border-bottom:1px solid var(--asai-border-light)}.as-card-head h2{margin:0;color:var(--asai-text-strong);font-size:17px;font-weight:800;letter-spacing:-.02em}.as-card-head p{margin:4px 0 0;color:var(--asai-text-muted);font-size:13px}.as-card-body{padding:18px}.as-card-foot{display:flex;justify-content:center;align-items:center;min-height:54px;padding:10px 16px;border-top:1px solid var(--asai-border-light)}.as-foot-left{justify-content:flex-start}.as-count{flex:0 0 auto;color:var(--asai-text-strong);font-size:13px;font-weight:700;white-space:nowrap}
.as-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.as-field{display:flex;flex-direction:column;gap:7px}.as-field label{font-size:13px;font-weight:700;color:var(--asai-text-strong)}.as-field small,.as-help{font-size:12px;color:var(--asai-text-muted)}.as-help{margin:8px 0 0}.as-control,.as-select,.as-search-input{min-height:42px;border:1px solid var(--asai-border);border-radius:6px;background:#fff}.as-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:16px;flex-wrap:wrap}.as-actions.btn-group{margin-top:0}
.as-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid var(--asai-border-light);background:var(--asai-surface-subtle)}.as-search-group,.as-filter-group{display:flex;align-items:center;gap:8px}.as-search-group .as-select{width:150px}.as-search-input{width:min(360px,38vw)}
.as-table-card{overflow:hidden}.as-table-scroll{width:100%;overflow:auto}.as-table{border:0!important;border-radius:0!important;overflow:visible!important}.as-table .solution-table-row{min-height:44px;border-bottom:1px solid var(--asai-border-light);background:#fff}.as-table .solution-table-row:last-child{border-bottom:0}.as-table .solution-table-header{background:#f7f9fb!important;color:var(--asai-text-strong);font-weight:700}.as-table .solution-table-cell{display:flex;align-items:center;justify-content:flex-start;padding:10px 12px;border:0!important;font-size:13px;line-height:1.35;text-align:left}.as-table .solution-table-header .solution-table-cell{font-size:12px;color:#425466}.as-col-id{flex:0 0 80px!important}.as-col-status{flex:0 0 110px!important}.as-col-time{flex:0 0 170px!important}.as-col-corid{flex:0 0 260px!important}.as-col-message{flex:2 1 320px!important}.as-log-table{min-width:1120px}.as-job-table{min-width:1280px}.as-empty{padding:32px 18px;text-align:center;color:var(--asai-text-muted);font-size:14px;background:#fff}
.as-status{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}.as-status.is-success{color:#08783f;background:#e8f7ef}.as-status.is-danger{color:#b42318;background:#fff0ef}.as-status.is-info{color:#1856b8;background:#edf4ff}.as-status.is-neutral{color:#59636e;background:#f0f2f4}
.as-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.as-stat-card{min-height:118px;padding:17px 18px;background:#fff;border:1px solid var(--asai-border);border-radius:10px;box-shadow:var(--shadow-1)}.as-stat-card>span{font-size:13px;font-weight:700;color:var(--asai-text-subtle)}.as-stat-card strong{display:block;margin-top:7px;color:var(--asai-text-strong);font-size:26px;line-height:1.2;letter-spacing:-.03em}.as-stat-card strong small{margin-left:3px;font-size:13px;font-weight:600}.as-stat-card p{margin:8px 0 0;color:var(--asai-text-muted);font-size:12px}
.as-kv-list{margin:0;padding:6px 18px 14px}.as-kv-list>div{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,1fr);gap:16px;align-items:center;min-height:46px;border-bottom:1px solid var(--asai-border-light)}.as-kv-list>div:last-child{border-bottom:0}.as-kv-list dt{color:var(--asai-text-subtle);font-size:13px;font-weight:600}.as-kv-list dd{margin:0;color:var(--asai-text-strong);font-size:14px;font-weight:700;text-align:right}.as-path{overflow-wrap:anywhere}
.as-chart-card{overflow:hidden}.as-chart-body{padding:8px 14px 14px;min-width:0}.as-badge{align-self:center;padding:5px 10px;border-radius:999px;background:#edf4ff;color:var(--asai-primary);font-size:12px;font-weight:800}
.as-health-row{display:flex;align-items:flex-start;gap:12px;padding:4px 0}.as-health-dot{width:10px;height:10px;margin-top:6px;border-radius:50%;background:#98a2b3}.as-health-dot.is-ok{background:var(--asai-success)}.as-health-dot.is-bad{background:var(--asai-danger)}.as-health-row strong{font-size:15px;color:var(--asai-text-strong)}.as-health-row p{margin:4px 0 0;font-size:13px;color:var(--asai-text-muted)}
.as-progress{height:10px;margin:16px 18px;background:#edf1f5;border-radius:999px;overflow:hidden}.as-progress>div{height:100%;background:var(--asai-primary);border-radius:inherit;transition:width .2s ease}.as-compact-table{margin-top:4px}
.as-error-card{max-width:760px;margin:48px auto;padding:28px}.as-error-card h1{margin:8px 0;font-size:26px}.as-error-card p{color:var(--asai-text-muted)}.as-error-id{display:flex;gap:12px;margin-top:18px;padding:12px;border-radius:8px;background:var(--asai-surface-subtle)}
/* legacy shared components normalization */
.solution-pagination{margin-top:0!important}.solution-pagination button{min-width:36px;min-height:36px;padding:6px 10px!important;font-size:13px!important;border-radius:6px!important}.solution-pagination button.active{background:var(--asai-primary)!important;border-color:var(--asai-primary)!important}.solution-search-filter button,.solution-dropdown-wrapper button{min-height:40px;border-color:var(--asai-border)!important;background:#fff!important;color:var(--asai-text)!important}
@media(max-width:1200px){.as-page{width:min(calc(100% - 32px),1680px)}.as-grid-2{grid-template-columns:1fr}.as-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.as-page-head{align-items:flex-start}.as-toolbar{align-items:stretch;flex-direction:column}.as-search-group{width:100%}.as-search-input{width:100%;flex:1 1 auto}}
@media(max-width:720px){.as-page{width:calc(100% - 24px);padding-top:20px}.as-page-head{display:block}.as-page-head h1{font-size:24px}.as-head-meta{margin-top:12px;width:max-content}.as-form-row,.as-stat-grid{grid-template-columns:1fr}.as-search-group{flex-wrap:wrap}.as-search-group .as-select{width:100%}.as-search-input{width:100%}.as-card-head{padding:14px}.as-card-body{padding:14px}}