/*
 * XimTier SaaS 디자인 시스템
 * brand-DNA: 한글 전용 · 신뢰감(공공/B2B) · 완전 분석 / i18n: 한·영
 * 모던 SaaS: 라이트 베이스 + 절제된 그라데이션 + 명확한 위계 + LineIcons
 */
:root{
  /* XimTier 브랜드 — 로열 군청 primary (ximtier.com) + Tableau식 전문가 분석 디자인 */
  --brand:#1e3a8a; --brand2:#1e40af; --brand-soft:#eef2ff;
  --accent:#4e79a7;        /* Tableau Blue — 데이터 강조 */
  --cta:#ff385c;
  --success:#59a14f; --warn:#edc948; --danger:#e15759;   /* Tableau 시맨틱 */
  /* Tableau 10 데이터 팔레트 (차트·바·카테고리 색) */
  --d1:#4e79a7; --d2:#f28e2b; --d3:#e15759; --d4:#76b7b2; --d5:#59a14f;
  --d6:#edc948; --d7:#b07aa1; --d8:#ff9da7; --d9:#9c755f; --d10:#bab0ac;
  /* 전문가 도구 중성 베이스 (회색조 — 데이터에만 색) */
  --ink:#172b4d; --ink2:#42526e; --muted:#6b778c; --faint:#97a0af;
  --bg:#f4f5f7; --surface:#ffffff; --panel:#fafbfc; --line:#dfe1e6; --line2:#ebecf0;
  --grad:#1e3a8a;
  /* 절제된 그림자 (분석 도구는 평면적) */
  --shadow-sm:0 1px 1px rgba(9,30,66,.06);
  --shadow:0 1px 3px rgba(9,30,66,.1),0 0 1px rgba(9,30,66,.08);
  --shadow-lg:0 8px 20px rgba(9,30,66,.12);
  /* 작은 라운드 (전문가 도구는 각짐) */
  --r:6px; --r-lg:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Pretendard',-apple-system,system-ui,sans-serif;background:var(--bg);
  color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
.lni{vertical-align:-.05em}

/* ── 앱 셸 (사이드바 + 메인) ── */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:248px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:30}
.app-main{margin-left:248px;flex:1;display:flex;flex-direction:column;min-width:0}
.app-content{padding:28px 40px;max-width:1680px;width:100%;margin:0 auto}
@media(min-width:1900px){.app-content{max-width:none}}

.brand{display:flex;align-items:center;gap:11px;padding:22px 22px;font-weight:800;font-size:19px;
  letter-spacing:-.4px;border-bottom:1px solid var(--line2)}
.brand .mark{width:34px;height:34px;border-radius:10px;background:var(--brand);display:grid;
  place-items:center;color:#fff;font-size:17px;box-shadow:0 6px 16px rgba(30,58,138,.32)}
.brand .mark svg{color:#fff}
.nav{padding:14px 12px;flex:1}
.nav-label{font-size:11px;font-weight:700;color:var(--faint);text-transform:uppercase;
  letter-spacing:.08em;padding:14px 12px 6px}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;
  color:var(--ink2);font-weight:600;font-size:14.5px;transition:.16s;margin-bottom:2px}
.nav-item .lni{font-size:18px;color:var(--muted);transition:.16s}
.nav-item:hover{background:var(--brand-soft);color:var(--brand)}
.nav-item:hover .lni{color:var(--brand)}
.nav-item.active{background:var(--brand);color:#fff;box-shadow:0 8px 20px rgba(30,58,138,.26)}
.nav-item.active .lni{color:#fff}
.nav-foot{padding:14px;border-top:1px solid var(--line2)}

/* ── 사이드바 접기/펼치기 ── */
.brand{position:relative}
.sidebar-toggle{margin-left:auto;width:28px;height:28px;border-radius:8px;border:1px solid var(--line);
  background:#fff;color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:.16s;flex-shrink:0}
.sidebar-toggle:hover{border-color:var(--brand);color:var(--brand)}
.sidebar-toggle .lni{font-size:15px;transition:transform .2s}

/* 접힌 상태 */
body.sidebar-collapsed .sidebar{width:74px}
body.sidebar-collapsed .app-main{margin-left:74px}
body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .nav-item span,
body.sidebar-collapsed .nav-label{opacity:0;width:0;overflow:hidden;white-space:nowrap;pointer-events:none}
body.sidebar-collapsed .nav-label{height:8px;padding:0}
body.sidebar-collapsed .brand{justify-content:center;padding:22px 12px}
body.sidebar-collapsed .nav-item{justify-content:center;padding:11px 0;gap:0}
body.sidebar-collapsed .nav-foot .nav-item{justify-content:center}
body.sidebar-collapsed .sidebar-toggle{position:absolute;top:50%;right:-13px;transform:translateY(-50%);
  margin:0;background:#fff;box-shadow:var(--shadow-sm);z-index:31}
body.sidebar-collapsed .sidebar-toggle .lni{transform:rotate(180deg)}
.sidebar,.app-main{transition:width .2s ease,margin-left .2s ease}

/* ── 탑바 ── */
.topbar{height:64px;background:rgba(255,255,255,.8);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
  padding:0 40px;position:sticky;top:0;z-index:20}
.topbar h1{font-size:18px;font-weight:750}
.topbar .right{display:flex;align-items:center;gap:14px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  font-size:12.5px;font-weight:600;background:var(--brand-soft);color:var(--brand)}
.pill.ok{background:#dcfce7;color:#15803d}.pill.off{background:#fee2e2;color:#b91c1c}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--grad);color:#fff;display:grid;
  place-items:center;font-weight:700;font-size:14px}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.lang a{padding:5px 11px;font-size:12.5px;font-weight:600;color:var(--muted);transition:.15s}
.lang a.active{background:var(--grad);color:#fff}

/* ── 카드/패널 (Tableau식 평면 패널, 고밀도) ── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 20px;box-shadow:var(--shadow-sm)}
.card.hover{transition:.15s}.card.hover:hover{box-shadow:var(--shadow);border-color:#c1c7d0}
.grid{display:grid;gap:12px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.section-head{display:flex;align-items:center;justify-content:space-between;margin:22px 0 12px}
.section-head h2{font-size:16px;font-weight:700;letter-spacing:-.2px}
.eyebrow{color:var(--muted);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase}

/* ── KPI 타일 (Tableau식: 좌측 컬러바 + 큰 수치) ── */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px 14px 18px;
  position:relative;overflow:hidden}
.stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--d1)}
.stat .ico{width:32px;height:32px;border-radius:6px;display:grid;place-items:center;font-size:16px;
  margin-bottom:10px;background:#f0f3f9;color:var(--accent)}
.stat .ico.a{background:#eaf1f7;color:var(--d1)}.stat .ico.b{background:#eef6ec;color:var(--d5)}
.stat .ico.c{background:#fdf4e0;color:#bb8800}
.stat .num{font-size:26px;font-weight:800;letter-spacing:-.8px;color:var(--ink);
  font-variant-numeric:tabular-nums}
.stat .lbl{font-size:12px;color:var(--muted);margin-top:1px;font-weight:600}
.stat:nth-child(2)::before{background:var(--d2)}.stat:nth-child(3)::before{background:var(--d5)}
.stat:nth-child(4)::before{background:var(--d4)}

/* ── 버튼 (각진 전문가 도구 스타일, 절제된 그림자) ── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r);font-weight:600;
  font-size:13.5px;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink2);
  transition:.14s}
.btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.btn .lni{font-size:16px}
.btn.primary{background:var(--brand);color:#fff;border:1px solid var(--brand);box-shadow:none}
.btn.primary:hover{background:var(--brand2);color:#fff;filter:none}
.btn.cta{background:var(--cta);color:#fff;border:1px solid var(--cta)}
.btn.cta:hover{background:#e00b41;color:#fff}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--line2);border-color:transparent}
.btn.danger:hover{border-color:var(--danger);color:var(--danger);background:#fdeded}

/* ── 드롭존 (절제된 평면) ── */
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1.5px dashed var(--line);border-radius:var(--r-lg);padding:40px 28px;text-align:center;
  cursor:pointer;transition:.15s;background:var(--panel)}
.drop input[type=file]{display:none}
.drop:hover,.drop.over{border-color:var(--accent);background:#eef3f9}
.drop .big{width:52px;height:52px;border-radius:10px;background:var(--brand);color:#fff;display:grid;
  place-items:center;font-size:24px;margin:0 auto 14px;box-shadow:var(--shadow-sm)}
.drop b{font-size:15px;color:var(--ink)}.drop small{display:block;color:var(--muted);margin-top:6px;font-size:12.5px}
/* 업로드·분석 진행 표시 (선택 즉시 — 먹통 오해 방지) */
.drop-loading{cursor:default;border-style:solid;border-color:var(--brand);background:#eef3f9}
.drop-loading:hover{background:#eef3f9}
.spinner{width:46px;height:46px;margin:0 auto 14px;border-radius:50%;
  border:4px solid var(--line);border-top-color:var(--brand);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* 분석 실패 행 — 파일명 + 에러 전문 표시 (잘림 없음) */
.tbl tr.clickable-row{cursor:pointer}
.tbl tr.err-row td{padding-top:0;border-top:none}
.err-box{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;margin:0 0 4px;
  background:#fef2f2;border:1px solid #fecaca;border-radius:8px;font-size:13px;color:#b42318;line-height:1.5}
.err-box .lni{flex:none;margin-top:1px}

/* ── 변수 중요도 바 (Tableau 호리존탈 바차트: 각진 데이터 컬러 + 모노 수치) ── */
.bar{display:flex;align-items:center;gap:12px;margin:7px 0}
.bar .nm{width:140px;text-align:right;font-size:12.5px;font-weight:600;flex-shrink:0;color:var(--ink2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .track{flex:1;height:18px;border-radius:2px;background:var(--line2);overflow:hidden}
.bar .fill{height:100%;border-radius:2px;background:var(--d1);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.bar:nth-child(2) .fill{background:var(--d2)}.bar:nth-child(3) .fill{background:var(--d3)}
.bar:nth-child(4) .fill{background:var(--d4)}.bar:nth-child(5) .fill{background:var(--d5)}
.bar:nth-child(6) .fill{background:var(--d6)}.bar:nth-child(7) .fill{background:var(--d7)}
.bar .v{width:50px;text-align:right;font-size:12.5px;color:var(--ink);font-weight:700;
  font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ── 칩/뱃지 (작고 각진 전문가 스타일) ── */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:4px 10px;border-radius:4px;font-size:12px;font-weight:600;background:#eaf1f7;
  color:var(--d1);border:1px solid #d4e2ef}
.chip.y{background:#eef6ec;color:#3d7a35;border-color:#cfe6c9}
.badge{padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700}
.badge.on{background:#eef6ec;color:#3d7a35}.badge.soon{background:#fdf4e0;color:#9a7400}
.badge.done{background:#eef6ec;color:#3d7a35}.badge.failed{background:#fbeaea;color:#b03a3c}
.badge.running{background:#eaf1f7;color:var(--d1)}

/* ── 도메인 카드 (평면 패널) ── */
.domain{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;
  transition:.14s;cursor:default}
.domain:hover{box-shadow:var(--shadow);border-color:#c1c7d0}
.domain .dico{font-size:22px;margin-bottom:8px;color:var(--accent)}
.domain h4{font-size:14px;font-weight:700;margin-bottom:7px}

/* ── 테이블 (고밀도 데이터 그리드) ── */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;padding:8px 12px;border-bottom:2px solid var(--line);background:var(--panel)}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line2);font-size:13px;color:var(--ink2);
  font-variant-numeric:tabular-nums}
.tbl tr:hover td{background:#f0f4f9}
.mono{font-family:ui-monospace,'SF Mono',monospace;font-size:12.5px;color:var(--ink2)}

/* ── 코드 박스 ── */
.code{background:#0f172a;border-radius:12px;padding:16px 18px;font-family:ui-monospace,monospace;
  font-size:13px;color:#a5f3fc;overflow-x:auto;margin-top:12px;line-height:1.7}
.code .k{color:#c4b5fd}.code .s{color:#fcd34d}.code .c{color:#64748b}

/* ── 인증 화면 ── */
.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.auth-art{background:var(--grad);color:#fff;padding:60px;display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden}
.auth-art::after{content:'';position:absolute;width:480px;height:480px;border-radius:50%;
  background:rgba(255,255,255,.08);top:-120px;right:-140px}
.auth-art .mark{width:54px;height:54px;border-radius:15px;background:rgba(255,255,255,.18);
  display:grid;place-items:center;font-size:26px;margin-bottom:30px;color:#fff}
.auth-art .mark svg{color:#fff;width:28px;height:28px}
.auth-art h2{font-size:34px;font-weight:800;letter-spacing:-1px;line-height:1.25;position:relative}
.auth-art p{margin-top:18px;font-size:16px;opacity:.92;max-width:400px;position:relative}
.auth-art .feat{margin-top:34px;display:flex;flex-direction:column;gap:14px;position:relative}
.auth-art .feat div{display:flex;align-items:center;gap:12px;font-size:15px}
.auth-art .feat .lni{font-size:20px}
.auth-form{display:flex;align-items:center;justify-content:center;padding:40px}
.auth-box{width:100%;max-width:380px}
.auth-box h1{font-size:26px;font-weight:800;letter-spacing:-.6px}
.auth-box .sub{color:var(--muted);margin:8px 0 28px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink2);margin-bottom:7px}
.field input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:11px;font-size:14.5px;
  font-family:inherit;transition:.16s;background:#fff}
.field input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.auth-box .btn{width:100%;justify-content:center;margin-top:6px}
.auth-alt{text-align:center;margin-top:22px;font-size:14px;color:var(--muted)}
.auth-alt a{color:var(--brand);font-weight:600}
.auth-lang{position:absolute;top:24px;right:28px;z-index:5}

/* ── 플래시 ── */
.flash{position:fixed;top:18px;right:18px;z-index:90;padding:14px 18px;border-radius:12px;
  font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);max-width:420px;animation:slideIn .3s}
.flash.notice{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.flash.alert{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fade{animation:fade .4s ease}

/* ── 모달 (도메인 추가/수정) ── */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:80;padding:20px}
.modal-overlay.show{display:flex;animation:fade .2s}
.modal{background:#fff;border-radius:var(--r-lg);padding:28px;width:100%;max-width:540px;
  box-shadow:var(--shadow-lg);max-height:90vh;overflow-y:auto}
.modal h3{font-size:19px;font-weight:750;margin-bottom:20px}
.modal .field select{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:11px;
  font-family:inherit;font-size:14.5px;background:#fff}

.empty{text-align:center;padding:50px 20px;color:var(--muted)}
.empty .lni{font-size:46px;color:var(--faint);margin-bottom:14px;display:block}
.hidden{display:none}

/* ── OAuth 버튼 ── */
.oauth{margin-top:20px}
.oauth-divider{text-align:center;position:relative;margin:18px 0}
.oauth-divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--line)}
.oauth-divider span{position:relative;background:var(--surface);padding:0 12px;font-size:12.5px;color:var(--faint)}
.oauth-btn{width:100%;justify-content:center;margin-bottom:10px;font-weight:600;background:#fff}
.oauth-btn .lni{font-size:18px}
.oauth-btn form{width:100%}
form.button_to{width:100%}
.oauth-hint{display:flex;align-items:center;gap:9px;justify-content:center;font-size:12.5px;
  color:var(--faint);padding:10px;background:var(--bg);border-radius:10px}

/* ── 사용현황 모니터링 (관리) ── */
.usage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.meter{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.meter .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.meter .top .lni{font-size:18px;color:var(--brand)}
.meter .label{font-size:12.5px;color:var(--muted);font-weight:600}
.meter .big{font-size:26px;font-weight:800;letter-spacing:-.6px}
.meter .sub{font-size:12px;color:var(--faint)}
.meter .progress{height:8px;border-radius:5px;background:var(--line2);overflow:hidden;margin-top:12px}
.meter .progress .fill{height:100%;background:var(--grad);border-radius:5px;transition:width .8s}
.meter.warn .progress .fill{background:linear-gradient(90deg,#f59e0b,#ef4444)}
.usage-method{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:7px;
  font-size:12px;font-weight:600;background:var(--brand-soft);color:var(--brand)}
.usage-method.api{background:#e0f2fe;color:#0369a1}
.usage-method.mcp{background:#f3e8ff;color:#7c3aed}
.usage-method.ui{background:#dcfce7;color:#15803d}

/* ── 운영 토글 스위치 (도메인 활성/비활성) ── */
.toggle{width:42px;height:24px;border-radius:999px;background:var(--line);border:none;cursor:pointer;
  position:relative;transition:.2s;padding:0;flex-shrink:0}
.toggle.on{background:var(--grad)}
.toggle .knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle.on .knob{left:21px}
.toggle:hover{opacity:.85}

@media(max-width:900px){.sidebar{display:none}.app-main{margin-left:0}.auth{grid-template-columns:1fr}
  .auth-art{display:none}.g2,.g3,.g4{grid-template-columns:1fr 1fr}}