:root{
    /* Base */
    --bg:#F6F8FC;
    --panel:#FFFFFF;
    --panel2:#FFFFFF;
    --text:#0B1220;
    --muted:#60708A;
    --line:rgba(16,24,40,.10);
    --soft:rgba(16,24,40,.04);
    --soft2:rgba(16,24,40,.06);

    /* Topbar (light sky, premium glass) */
    --topbar-bg:#EAF4FF;
    --topbar-bg-2:#F6FBFF;
    --topbar-border:rgba(31,107,255,.18);

    /* Connext */
    --primary:#1f6bff;
    --primary2:#00C8FF;
    --primarySoft:rgba(31,107,255,.10);
    --primaryLine:rgba(31,107,255,.22);

    --good:#16a34a;
    --warn:#f59e0b;
    --bad:#ef4444;

    --radius:14px;
    --radius2:18px;
    --shadow:0 14px 34px rgba(16,24,40,.10);
    --shadow2:0 6px 18px rgba(16,24,40,.08);

    --font: -apple-system, BlinkMacSystemFont, "SF Pro Display","SF Pro Text",
    "Pretendard","Noto Sans JP",
    system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Apple SD Gothic Neo","Malgun Gothic", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:var(--font);
    background:radial-gradient(900px 480px at 18% 0%, rgba(31,107,255,.10), transparent 60%),
    radial-gradient(900px 480px at 82% 10%, rgba(0,200,255,.10), transparent 55%),
    var(--bg);
    color:var(--text);
    overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
button{font-family:inherit}

/* ===== Top Header (Global Tabs) ===== */
.topbar{
    position:sticky;
    top:0;
    z-index:100;
    background: linear-gradient(180deg, rgba(234,244,255,.88), rgba(246,251,255,.92));
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--topbar-border);
    box-shadow: 0 6px 18px rgba(16,24,40,.06);
}
.topbar-inner{
    height:68px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:0 18px;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:240px;
}
/*.brandMark{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid rgba(31,107,255,.18);
   !* background: rgba(255,255,255,.70);*!
    box-shadow: 0 2px 10px rgba(16,24,40,.06);
}*/
.brand img{ height:26px; width:auto; display:block; }
.brand .brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand .brand-text b{font-size:13px; letter-spacing:-.2px}
.brand .brand-text span{font-size:12px;color:var(--muted)}

.global-nav{
    display:flex;
    align-items:center;
    gap:6px;
    overflow:auto;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
    padding:6px;
    border-radius:999px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(31,107,255,.14);
    box-shadow: 0 2px 10px rgba(16,24,40,.05);
    max-width:min(980px, 56vw);
}
.global-nav::-webkit-scrollbar{height:6px}
.global-nav::-webkit-scrollbar-thumb{background:rgba(16,24,40,.18); border-radius:999px}

.gitem{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-radius:999px;
    font-size:13px;
    color:rgba(11,18,32,.78);
    border:1px solid transparent;
    white-space:nowrap;
    cursor:pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.gitem:hover{
    background: rgba(255,255,255,.86);
    border-color: rgba(31,107,255,.16);
    transform: translateY(-1px);
}
.gitem.active{
    background:#fff;
    border-color: var(--primaryLine);
    color:var(--text);
    box-shadow:0 1px 0 rgba(16,24,40,.03);
}
.gdot{
    width:8px;height:8px;border-radius:999px;
    background:rgba(16,24,40,.25);
}
.gitem.active .gdot{
    background: linear-gradient(135deg, var(--primary), var(--primary2));
}

.top-actions{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:240px;
    justify-content:flex-end;
}
.search{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:999px;
    border:1px solid rgba(31,107,255,.14);
    background: rgba(255,255,255,.72);
    box-shadow: 0 2px 10px rgba(16,24,40,.05);
}
.search input{
    width:240px;
    max-width:30vw;
    border:none;
    outline:none;
    background:transparent;
    font-size:13px;
    color:var(--text);
}
.search input::placeholder{color:rgba(96,112,138,.95)}

.btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--text);
    cursor:pointer;
    font-size:13px;
    box-shadow: 0 1px 0 rgba(16,24,40,.03);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{background: rgba(16,24,40,.03); transform: translateY(-1px); box-shadow: var(--shadow2);}
.btn.primary{
    border-color: rgba(31,107,255,.25);
    background: linear-gradient(135deg, rgba(31,107,255,.18), rgba(0,200,255,.14));
    color:#0b3fbf;
}
.btn.solid{
    border-color: rgba(31,107,255,.28);
    background: linear-gradient(135deg, rgba(31,107,255,.96), rgba(0,200,255,.85));
    color:#fff;
    box-shadow: 0 10px 20px rgba(31,107,255,.18);
}

.avatar{
    width:32px;height:32px;border-radius:999px;
    background:linear-gradient(135deg, rgba(31,107,255,.95), rgba(0,200,255,.65));
    border:1px solid rgba(31,107,255,.25);
    box-shadow: 0 8px 18px rgba(31,107,255,.12);
}

/* ===== Sub Nav ===== */
.subbar{
    position:sticky;
    top:68px;
    z-index:90;
    background: rgba(246,251,255,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(31,107,255,.12);
}
.subbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 18px;
}
.subnav{
    display:flex;
    gap:6px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    padding:2px;
}
.subnav::-webkit-scrollbar{height:6px}
.subnav::-webkit-scrollbar-thumb{background:rgba(16,24,40,.16); border-radius:999px}

.sitem{
    flex:0 0 auto;
    padding:9px 12px;
    border-radius:999px;
    border:1px solid transparent;
    background:transparent;
    cursor:pointer;
    font-size:13px;
    color:rgba(11,18,32,.72);
    white-space:nowrap;
    transition: background .12s ease, border-color .12s ease;
}
.sitem:hover{background:rgba(16,24,40,.03); border-color:rgba(16,24,40,.08)}
.sitem.active{
    background: linear-gradient(135deg, rgba(31,107,255,.16), rgba(0,200,255,.12));
    border-color: rgba(31,107,255,.22);
    color:#0b3fbf;
    font-weight:700;
}

.sub-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end;}

/* ===== Page ===== */
.page{
    padding:18px;
    display:grid;
    gap:14px;
    /*max-width: 1280px;*/
    max-width: 2100px;
    margin: 0 auto;
}
.page-title{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    padding-top: 4px;
}
.page-title h1{
    margin:0;
    font-size:22px;
    letter-spacing:-.3px;
}
.page-title p{
    margin:6px 0 0;
    color:var(--muted);
    font-size:13px;
    line-height:1.45;
}

/* ===== Cards ===== */
.card{
    background: var(--panel);
    border:1px solid rgba(16,24,40,.10);
    border-radius: var(--radius2);
    box-shadow: var(--shadow2);
    overflow:hidden;
    margin-top:20px;
}
.card-header{
    padding:14px 14px 10px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    border-bottom:1px solid rgba(16,24,40,.08);
    background:
            radial-gradient(700px 220px at 18% 10%, rgba(31,107,255,.08), transparent 55%),
            radial-gradient(700px 220px at 82% 10%, rgba(0,200,255,.07), transparent 55%),
            linear-gradient(180deg, rgba(16,24,40,.03), transparent);
}
.card-header h3{margin:0;font-size:14px; letter-spacing:-.2px}
.card-header .meta{margin-top:4px;font-size:12px;color:var(--muted)}
.card-body{padding:14px}

.chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 10px;
    border-radius:999px;
    border:1px solid rgba(16,24,40,.10);
    background: rgba(16,24,40,.03);
    font-size:12px;
    color:rgba(11,18,32,.78);
    white-space:nowrap;
}
.dot{width:8px;height:8px;border-radius:999px;background:var(--good)}
.dot.warn{background:var(--warn)}
.dot.bad{background:var(--bad)}

/* ===== KPI ===== */
.kpi-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:12px;
}
.kpi{
    border:1px solid rgba(16,24,40,.10);
    border-radius: var(--radius);
    padding:12px;
    background:
            radial-gradient(380px 140px at 18% 0%, rgba(31,107,255,.08), transparent 55%),
            #fff;
}
.kpi .label{font-size:12px;color:var(--muted)}
.kpi .value{margin-top:6px;font-size:18px;font-weight:800; letter-spacing:-.2px}
.kpi .delta{margin-top:8px;font-size:12px;color:rgba(11,18,32,.72); display:flex; gap:8px; align-items:center}
.pill{
    font-size:11px;
    padding:3px 8px;
    border-radius:999px;
    background: rgba(31,107,255,.10);
    border:1px solid rgba(31,107,255,.18);
    color:#0b3fbf;
    font-weight:700;
}

/* ===== Table ===== */
.table-wrap{
    width:100%;
    overflow:auto;
    border-radius:14px;
    border:1px solid rgba(16,24,40,.10);
    background:#fff;
}
table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    min-width:980px;
    background:#fff;
}
thead th{
    text-align:center;
    font-size:12px;
    color:var(--muted);
    font-weight:700;
    padding:12px 12px;
    border-bottom:1px solid rgba(16,24,40,.10);
    background: linear-gradient(180deg, rgba(16,24,40,.03), #fff);
    position:sticky;
    top:0;
    z-index:1;
}
tbody td{
    padding:12px 12px;
    border-bottom:1px solid rgba(16,24,40,.08);
    font-size:13px;
    vertical-align:middle;
}
tbody tr:hover{background:rgba(31,107,255,.035)}
.cell-title{display:flex;align-items:center;gap:10px;min-width:0;}
.thumb{
    width:44px;height:32px;border-radius:10px;
    border:1px solid rgba(31,107,255,.18);
    background:linear-gradient(135deg, rgba(31,107,255,.18), rgba(0,200,255,.10));
    flex:0 0 auto;
}
.ttext{min-width:0;}
.ttext b{
    display:block;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:52ch;
}
.ttext span{
    display:block; margin-top:2px;
    color:var(--muted); font-size:12px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:56ch;
}

/* Toggle */
.toggle{
    width:42px;height:24px;border-radius:999px;
    border:1px solid rgba(16,24,40,.12);
    background:rgba(16,24,40,.06);
    position:relative; cursor:pointer; display:inline-block;
}
.toggle::after{
    content:"";
    position:absolute; width:18px;height:18px;border-radius:999px;
    background:#fff; border:1px solid rgba(16,24,40,.12);
    top:50%; left:3px; transform:translateY(-50%);
    transition:all .18s ease;
    box-shadow:0 2px 6px rgba(16,24,40,.10);
}
.toggle.on{
    background:rgba(31,107,255,.18);
    border-color:rgba(31,107,255,.22);
}
.toggle.on::after{left:21px; border-color:rgba(31,107,255,.22)}

.status{
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 10px; border-radius:999px;
    border:1px solid rgba(16,24,40,.10);
    background:rgba(16,24,40,.03);
    font-size:12px; white-space:nowrap;
}

.actions{display:flex; gap:8px; justify-content:flex-end; white-space:nowrap;}
.iconbtn{
    width:34px;height:34px;border-radius:12px;
    border:1px solid rgba(16,24,40,.10);
    background:#fff; cursor:pointer;
    display:grid; place-items:center;
    transition: transform .12s ease, background .12s ease;
}
.iconbtn:hover{background:rgba(16,24,40,.03); transform: translateY(-1px);}

/* ===== Split layout ===== */
.split{display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; align-items:start;}
.split .leftPane, .split .rightPane{min-height:520px;}

.list{display:flex;flex-direction:column;gap:10px;}
.row{
    border:1px solid rgba(16,24,40,.10);
    border-radius:14px;
    padding:12px;
    background:#fff;
    cursor:pointer;
    transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease;
}
.row:hover{background:rgba(31,107,255,.03); transform: translateY(-1px);}
.row.active{
    border-color:rgba(31,107,255,.28);
    box-shadow:0 0 0 4px rgba(31,107,255,.08);
}
.row-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.row-top b{font-size:13px}
.row-top .mini{font-size:12px;color:var(--muted); white-space:nowrap}
.row-mid{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.45}

.detail{display:grid;gap:12px;}
.detail .box{
    border:1px solid rgba(16,24,40,.10);
    border-radius:14px;
    padding:12px;
    background:#fff;
}
.detail h4{margin:0 0 8px;font-size:13px; letter-spacing:-.15px}
.kv{display:grid; grid-template-columns: 120px 1fr; gap:8px 10px; font-size:13px;}
.kv .k{color:var(--muted); font-size:12px}
.kv .v{color:var(--text);}

/* Fake chart */
.chart{
    height:220px;border-radius:14px;border:1px solid rgba(16,24,40,.10);
    background:#fff; position:relative; overflow:hidden;
}
.chart::before{
    content:""; position:absolute; inset:0;
    background:
            linear-gradient(90deg, rgba(16,24,40,.05) 1px, transparent 1px) 0 0/44px 100%,
            linear-gradient(0deg, rgba(16,24,40,.045) 1px, transparent 1px) 0 0/100% 44px;
    opacity:.65; pointer-events:none;
}

/* sparkline 영역 높이 강제 */
.chart .spark{
    inset:10px;
    position:absolute;
    left:14px;
    right:14px;
    bottom:14px;
    height:200px;
    top:auto;             /* ★ inset 효과 제거 */
    border-radius:12px;
    background:
            radial-gradient(520px 220px at 26% 78%, rgba(31,107,255,.22), transparent 55%),
            radial-gradient(520px 220px at 74% 28%, rgba(0,200,255,.18), transparent 55%);
    opacity:.95;
}

/* 캔버스는 꽉 차게 */
.chart .spark canvas{
    display:block;
    width:100% !important;
    height:100% !important;
}
.chart-label{
    top: 12px;
    left: 78px;   /* ← 여기만 조절하면 됨 (60~90 사이 추천) */
    z-index: 5;
    position:absolute; 
    font-size:12px; color:var(--muted);
    background:rgba(255,255,255,.86);
    border:1px solid rgba(16,24,40,.10);
    padding:6px 10px; border-radius:999px;
}

.lang-dropdown {
    position: relative;
}

.lang-menu {
    position: absolute;
    right: 0;
    top: 44px;
    background: #fff;
    border: 1px solid rgba(16,24,40,.1);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(16,24,40,.12);
    display: none;
    min-width: 120px;
    overflow: hidden;
    z-index: 200;
}

.lang-menu a {
    display: block;
    padding: 10px 14px;
    font-size: 13px;
    color: #0B1220;
}

.lang-menu a:hover {
    background: rgba(31,107,255,.06);
}

/* Sections */
.section{display:none}
.section.active{display:block; animation:fade .16s ease-out}
@keyframes fade{from{opacity:.4; transform:translateY(4px)} to{opacity:1; transform:translateY(0)}}

/* Responsive */
@media (max-width: 1180px){
    .kpi-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
    .split{grid-template-columns: 1fr}
    .global-nav{max-width: 52vw}
    table{min-width:860px}
}
@media (max-width: 860px){
    .brand{min-width:auto}
    .top-actions{min-width:auto}
    .search{display:none}
    .global-nav{max-width: 62vw}
    .sub-actions .btn{display:none}
    .page{padding:14px}
    table{min-width:760px}
}