@charset "utf-8";

/* ══ 테마 변수 ══════════════════════════════════ */
:root {
  --bg:         #f2f2f2;
  --surface:    #ffffff;
  --surface2:   #f5f5f5;
  --surface3:   #ebebeb;
  --border:     #e0e0e0;
  --border2:    #cccccc;
  --text1:      #222222;
  --text2:      #555555;
  --text3:      #888888;
  --accent:     #086d81;
  --accent2:    #065e70;
  --danger:     #bb2222;
  --warn:       #cc6600;
  /* 사이드바 */
  --sb-bg:      #083d49;
  --sb-bg2:     #0a4d5c;
  --sb-border:  #0c5e70;
  --sb-text:    #7ec4cf;
  --sb-text-act:#ffffff;
  --sb-accent:  #086d81;
  /* 그림자 */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow:     0 4px 16px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  /* 틴트 */
  --accent-bg:  #e5f4f7;
  --accent-bd:  #a8d8e0;
  --ok-bg:      #f0f7f3;
  --ok-bd:      #c0ddd0;
  --err-bg:     #fef2f2;
  --err-bd:     #f0c0c0;
  --warn-bg:    #fef6ee;
  --warn-bd:    #f5d0a0;
}

[data-theme="dark"] {
  --bg:         #111111;
  --surface:    #1a1a1a;
  --surface2:   #1f1f1f;
  --surface3:   #252525;
  --border:     #2a2a2a;
  --border2:    #333333;
  --text1:      #e8e8e8;
  --text2:      #a0a0a0;
  --text3:      #606060;
  --accent:     #0fa8c4;
  --accent2:    #0c8fa8;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.3);
  --shadow:     0 4px 16px rgba(0,0,0,.4);
  --accent-bg:  #0a2d35;
  --accent-bd:  #145e70;
}

/* ══ 기본 ═══════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text1);
  font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:14px;
  line-height:1.6;
  min-height:100vh;
}

/* ══ 로그인 ═════════════════════════════════════ */
.login-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:100;background:var(--bg);}
.login-box{width:380px;background:var(--surface);border:1px solid var(--border);border-radius:0;padding:40px;text-align:center;box-shadow:var(--shadow);}
.login-logo{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:3px;color:var(--accent);margin-bottom:4px;}
.login-sub{font-size:12px;color:var(--text3);letter-spacing:1px;margin-bottom:32px;}
.login-err{color:var(--danger);font-size:12px;margin-top:8px;}

/* ══ 레이아웃 ════════════════════════════════════ */
.admin-wrap{display:none;min-height:100vh;}
.admin-layout{display:flex;min-height:100vh;}

/* ── 사이드바 ──────────────────────────────────── */
.admin-sidebar{
  width:230px;
  background:var(--sb-bg);
  border-right:none;
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0;left:0;bottom:0;
  z-index:20;
  overflow-y:auto;
}
.admin-sidebar::-webkit-scrollbar{width:3px;}
.admin-sidebar::-webkit-scrollbar-thumb{background:var(--sb-border);}

.sidebar-logo{
  padding:20px 20px 16px;
  border-bottom:1px solid var(--sb-border);
}
.sidebar-logo-text{
  font-family:'Bebas Neue',sans-serif;
  font-size:20px;
  letter-spacing:2px;
  color:#ffffff;
  line-height:1;
}
.sidebar-logo-sub{
  font-size:10px;
  color:var(--sb-text);
  margin-top:3px;
  letter-spacing:.5px;
}

.sidebar-nav{padding:10px 8px;flex:1;}
.sidebar-label{
  font-size:9px;
  color:var(--sb-text);
  padding:14px 12px 5px;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  opacity:.7;
}

.sidebar-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:0;
  color:var(--sb-text);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:all .18s;
  border:none;
  background:none;
  width:100%;
  text-align:left;
  font-family:inherit;
  margin-bottom:2px;
  text-decoration:none;
}
.sidebar-item:hover{background:var(--sb-bg2);color:#e0e0e0;}
.sidebar-item.active{background:var(--sb-accent);color:#fff;}
.sidebar-item-icon{font-size:14px;width:18px;text-align:center;flex-shrink:0;}

.sidebar-bottom{
  padding:12px;
  border-top:1px solid var(--sb-border);
}
.sidebar-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:var(--sb-bg2);
  font-size:13px;
  color:var(--sb-text-act);
}
.sidebar-user-avatar{
  width:30px;height:30px;
  border-radius:0;
  background:var(--accent);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;
  flex-shrink:0;
}

/* ── 메인 영역 ─────────────────────────────────── */
.admin-main{
  flex:1;
  margin-left:230px;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ── 상단 바 ───────────────────────────────────── */
.admin-topbar{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:0 28px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:10;
  box-shadow:var(--shadow-sm);
}
.admin-topbar-title{
  font-size:14px;
  font-weight:600;
  color:var(--text1);
}
.admin-topbar-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

/* 다크 모드 토글 */
.theme-toggle{
  width:40px;height:22px;
  border-radius:0;
  border:1px solid var(--border2);
  background:var(--surface2);
  cursor:pointer;
  position:relative;
  transition:all .2s;
}
.theme-toggle::after{
  content:'';
  width:16px;height:16px;
  border-radius:50%;
  background:var(--accent);
  position:absolute;
  top:2px;left:2px;
  transition:transform .2s;
}
[data-theme="dark"] .theme-toggle::after{transform:translateX(18px);}

/* ── 콘텐츠 ───────────────────────────────────── */
.admin-content{
  padding:24px 28px;
  flex:1;
  max-width:1200px;
  width:100%;
}

/* ══ 카드 ════════════════════════════════════════ */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:0;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.card-head{
  padding:14px 20px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.card-title{
  font-size:14px;
  font-weight:600;
  color:var(--text1);
  display:flex;
  align-items:center;
  gap:8px;
}
.card-title::before{
  content:'';
  display:inline-block;
  width:3px;height:14px;
  background:var(--accent);
  flex-shrink:0;
}
.card-body{padding:20px;}

/* ══ 버튼 ════════════════════════════════════════ */
.btn{
  padding:8px 16px;
  border-radius:0;
  border:none;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all .18s;
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.btn-p{background:var(--accent);color:#fff;}
.btn-p:hover{background:var(--accent2);}
.btn-p:disabled{opacity:.4;cursor:not-allowed;}
.btn-g{background:var(--surface2);color:var(--text2);border:1px solid var(--border);}
.btn-g:hover{border-color:var(--accent);color:var(--accent);}
.btn-wr{background:var(--err-bg);color:var(--danger);border:1px solid var(--err-bd);}
.btn-wr:hover{background:#fde8e8;}
.btn-sm{padding:5px 12px;font-size:12px;}
.btn-xs{padding:3px 9px;font-size:12px;}

/* ══ 입력 ════════════════════════════════════════ */
.inp{
  width:100%;
  background:var(--surface2);
  border:1.5px solid var(--border);
  color:var(--text1);
  border-radius:0;
  padding:9px 13px;
  font-family:inherit;
  font-size:13px;
  outline:none;
  transition:border .18s;
}
.inp:focus{border-color:var(--accent);}
.inp::placeholder{color:var(--text3);}
textarea.inp{resize:vertical;}
select.inp{cursor:pointer;}
.inp-pw{font-family:'JetBrains Mono',monospace;letter-spacing:2px;}

.inp-admin{
  width:100%;
  background:var(--surface2);
  border:1.5px solid var(--border);
  color:var(--text1);
  border-radius:0;
  padding:9px 13px;
  font-family:inherit;
  font-size:13px;
  outline:none;
  transition:border .18s;
  resize:vertical;
}
.inp-admin:focus{border-color:var(--accent);}
.inp-admin::placeholder{color:var(--text3);}

.inp-sm2{
  width:100%;
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:0;
  color:var(--text1);
  padding:8px 12px;
  font-size:13px;
  font-family:inherit;
  outline:none;
}
.inp-sm2:focus{border-color:var(--accent);}
select.inp-sm2{cursor:pointer;}

/* ══ 라벨/폼 ════════════════════════════════════ */
.flabel{font-size:12px;color:var(--text3);margin-bottom:6px;display:block;font-weight:500;}
.flabel-sm{font-size:12px;color:var(--text3);margin-bottom:4px;display:block;}
.fgroup{margin-bottom:14px;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* ══ 결과 박스 ═══════════════════════════════════ */
.rbox{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:0;
  padding:18px;
  min-height:200px;
  font-size:13px;
  line-height:1.8;
  color:var(--text1);
  white-space:pre-wrap;
  overflow-y:auto;
  max-height:500px;
}
.rbox.loading::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--accent-bg),transparent);
  animation:shimmer 1.5s infinite;
}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ══ 섹션 버튼 ═══════════════════════════════════ */
.sec-btns{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}

/* ══ 탭 ══════════════════════════════════════════ */
.tab-bar{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:20px;}
.tab-btn{padding:10px 20px;border:none;background:none;color:var(--text3);font-size:13px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;font-family:'Noto Sans KR',sans-serif;transition:all .2s;font-weight:500;}
.tab-btn:hover{color:var(--text1);}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700;}
.tab-panel{display:none;}.tab-panel.active{display:block;}

/* ══ 히스토리 ════════════════════════════════════ */
.hitem{padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;}
.hitem:hover{background:var(--surface2);}
.hitem:last-child{border-bottom:none;}
.hproject{font-size:13px;font-weight:500;color:var(--text1);display:flex;align-items:center;gap:6px;}
.hinput{font-size:12px;color:var(--text2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hdate{font-size:12px;color:var(--text3);font-family:'JetBrains Mono',monospace;}

/* ══ 태그 ════════════════════════════════════════ */
.tag{display:inline-block;padding:2px 10px;border-radius:0;font-size:12px;background:var(--surface2);border:1px solid var(--border);color:var(--text2);}
.t-accent{border-color:var(--accent-bd);color:var(--accent);background:var(--accent-bg);}
.t-green{border-color:var(--ok-bd);color:#4a7a5a;background:var(--ok-bg);}

/* ══ API 상태 ════════════════════════════════════ */
.api-row{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--surface2);border:1px solid var(--border);margin-bottom:14px;font-size:12px;}
.api-dot{width:7px;height:7px;border-radius:50%;background:var(--text3);flex-shrink:0;}
.api-dot.ok{background:#4a7a5a;box-shadow:0 0 6px #4a7a5a88;}
.api-dot.err{background:var(--danger);}

/* ══ 프롬프트 ════════════════════════════════════ */
.prompt-section{margin-bottom:20px;background:var(--surface);border:1px solid var(--border);border-radius:0;overflow:hidden;box-shadow:var(--shadow-sm);}
.prompt-section-head{padding:14px 18px;background:var(--surface2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.prompt-section-body{padding:18px;}
.prompt-key{font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--accent);padding:2px 8px;border-radius:0;background:var(--accent-bg);border:1px solid var(--accent-bd);}
.prompt-save-info{font-size:12px;color:var(--text3);margin-top:6px;}

/* ══ 알림 ════════════════════════════════════════ */
.notice{padding:12px 16px;border-radius:0;font-size:13px;display:flex;align-items:center;gap:10px;}
.notice.n-info{background:var(--accent-bg);border:1px solid var(--accent-bd);color:var(--accent);}

/* ══ 사용자 테이블 ═══════════════════════════════ */
.user-table{width:100%;border-collapse:collapse;font-size:13px;}
.user-table th{padding:10px 14px;text-align:left;font-size:12px;color:var(--text3);font-weight:600;border-bottom:2px solid var(--border);text-transform:uppercase;letter-spacing:.5px;}
.user-table td{padding:10px 14px;border-bottom:1px solid var(--border2);color:var(--text2);vertical-align:middle;}
.user-table tr:hover td{background:var(--surface2);}
.role-badge{display:inline-block;padding:2px 10px;border-radius:0;font-size:12px;font-family:'JetBrains Mono',monospace;}
.role-badge.master{border:1px solid var(--accent-bd);color:var(--accent);background:var(--accent-bg);}
.role-badge.user{border:1px solid var(--border);color:var(--text3);background:var(--surface2);}

/* ══ 사용자 폼 모달 ══════════════════════════════ */
.user-form-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999;display:flex;align-items:center;justify-content:center;padding:20px;}
[data-theme="dark"] .user-form-modal{background:rgba(0,0,0,.75);}
.user-form-box{background:var(--surface);border:1px solid var(--border);border-radius:0;width:100%;max-width:480px;overflow:hidden;box-shadow:var(--shadow);}
.ufm-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.ufm-body{padding:20px;display:flex;flex-direction:column;gap:14px;}
.ufm-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;}

/* ══ 2열 그리드 ══════════════════════════════════ */
.admin-body{display:grid;grid-template-columns:1fr 340px;gap:20px;}

/* ══ 대시보드 스탯 ═══════════════════════════════ */
.admin-stat{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:0;
  padding:20px;
  text-align:center;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.admin-stat::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--accent);
}
.admin-stat-n{font-family:'Bebas Neue',sans-serif;font-size:36px;color:var(--accent);line-height:1.1;}
.admin-stat-l{font-size:12px;color:var(--text3);margin-top:4px;}

/* ══ 스피너 ══════════════════════════════════════ */
.spinner{display:inline-block;width:13px;height:13px;border:2px solid var(--accent-bd);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══ 스트리밍 ════════════════════════════════════ */
.stream-cursor::after{content:'▋';animation:blink .7s step-start infinite;color:var(--accent);}
@keyframes blink{50%{opacity:0}}

/* ══ 스크롤바 ════════════════════════════════════ */
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-thumb{background:var(--border2);}
::-webkit-scrollbar-thumb:hover{background:var(--text3);}

/* ══ 테마 프리셋 (Phase D, 050 system_settings) — 5종 컬러
   --sb-accent 도 함께 오버라이드: 사이드바 active 컬러가 테마 변경 시 같이 갱신되도록. */
[data-theme-preset="orange-classic"] {
  --accent: #e84200; --accent-hover: #ff7733; --sb-accent: #e84200;
}
[data-theme-preset="teal"] {
  --accent: #086d81; --accent-hover: #0a8aa0; --sb-accent: #086d81;
}
[data-theme-preset="violet"] {
  --accent: #7c3aed; --accent-hover: #9d4eff; --sb-accent: #7c3aed;
}
[data-theme-preset="azure"] {
  --accent: #2563eb; --accent-hover: #3b82f6; --sb-accent: #2563eb;
}
[data-theme-preset="forest"] {
  --accent: #16a34a; --accent-hover: #22c55e; --sb-accent: #16a34a;
}

/* ══ 반응형 ══════════════════════════════════════ */
@media(max-width:900px){
  .admin-sidebar{width:56px;}
  .admin-sidebar .sidebar-item span:not(.sidebar-item-icon){display:none;}
  .admin-sidebar .sidebar-logo-text{font-size:12px;letter-spacing:1px;}
  .admin-sidebar .sidebar-logo-sub,.admin-sidebar .sidebar-label,.admin-sidebar .sidebar-user span:not(.sidebar-user-avatar){display:none;}
  .admin-main{margin-left:56px;}
  .admin-body{grid-template-columns:1fr;}
}