/* DCEC Platform — Design System (design_dcec_platform.md Section 0) */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@400;500;700&display=swap');

:root {
  /* 0.1 Color Palette — Dark Theme */
  --bg-base: #020617;
  --bg-card: #0E1223;
  --bg-elevated: #1B2336;
  --bg-secondary: #1B2336;
  --color-primary: #2563EB;
  --color-secondary: #3B82F6;
  --color-success: #22C55E;
  --color-warning: #D97706;
  --color-danger: #EF4444;
  --text-primary: #F8FAFC;
  --text-muted: #94A3B8;
  --border-color: #334155;
  --ring-color: #2563EB40;

  /* 0.3 Spacing (8dp) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* 0.4 Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);

  /* Layout */
  --sidebar-width: 220px;
  --sidebar-collapsed: 56px;
  color-scheme: dark;
}

/* Light Theme Override */
[data-theme="light"] {
  --bg-base: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-elevated: #F1F5F9;
  --bg-secondary: #F1F5F9;
  --text-primary: #0F172A;
  --text-muted: #64748B;
  --border-color: #E2E8F0;
  --ring-color: #2563EB40;
  color-scheme: light;
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Body */
body {
  font-family: 'Fira Sans', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.5;
}

/* 0.2 Typography */
h1, h2, h3, h4 { font-family: 'Fira Code', 'Noto Sans KR', monospace; font-weight: 600; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
code, .mono { font-family: 'Fira Code', 'Noto Sans KR', monospace; font-size: 0.875rem; }

/* Links */
a { color: var(--color-primary); text-decoration: none; transition: color 200ms ease; cursor: pointer; }
a:hover { color: var(--color-secondary); }

/* Form controls */
input,
textarea,
select,
.form-input {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  color-scheme: inherit;
}

input::placeholder,
textarea::placeholder,
.form-input::placeholder {
  color: var(--text-muted);
}

select,
.form-input {
  appearance: auto;
}

select option,
select optgroup,
.form-input option,
.form-input optgroup {
  background: var(--bg-card);
  color: var(--text-primary);
}

/* Global interaction polish */
button, [role="button"], .nav-item, .dash-card, .card { cursor: pointer; }
:focus-visible { box-shadow: 0 0 0 2px var(--ring-color); outline: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* Skeleton loading shimmer */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton { background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--border-color) 50%, var(--bg-elevated) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; height: 1em; }

/* === SIDEBAR === */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-width);
  background: var(--bg-card);
  border-right: 1px solid var(--border-color);
  padding: var(--space-md) 0;
  display: flex; flex-direction: column;
  z-index: 100;
  transition: width 200ms ease;
}
.sidebar-brand {
  padding: var(--space-md) var(--space-lg);
  font-family: 'Fira Code', monospace;
  font-size: 1rem; font-weight: 700;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-md);
}
.sidebar-section {
  padding: var(--space-sm) var(--space-lg);
  font-size: 0.625rem; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sidebar-nav { flex: 1; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  color: var(--text-muted);
  font-size: 0.875rem;
  transition: all 200ms ease;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.nav-item:hover { color: var(--text-primary); background: var(--bg-elevated); }
.nav-item.active {
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  background: var(--bg-elevated);
}
.nav-item svg { width: 18px; height: 18px; stroke-width: 1.5; flex-shrink: 0; }
/* === 1depth 아코디언 (1depth > 2depth) === */
.nav-l1 {
  display: flex; align-items: center; gap: var(--space-sm);
  width: 100%; padding: var(--space-sm) var(--space-lg);
  font-size: 0.95rem; font-weight: 600;
  color: var(--text-primary);
  background: none; border: none; border-left: 3px solid transparent;
  text-align: left; cursor: pointer; transition: all 200ms ease;
}
.nav-l1:hover { background: var(--bg-elevated); }
.nav-l1.active { color: var(--color-primary); border-left-color: var(--color-primary); background: var(--bg-elevated); }
.nav-l1 svg { width: 18px; height: 18px; stroke-width: 1.75; flex-shrink: 0; }
.nav-chevron { margin-left: auto; width: 14px !important; height: 14px !important; transition: transform 200ms ease; }
.nav-group.open > .nav-group-header .nav-chevron { transform: rotate(180deg); }
.nav-group-items { display: none; }
.nav-group.open > .nav-group-items { display: block; }
.nav-group-items .nav-item { font-size: 0.8rem; padding-left: calc(var(--space-lg) + 18px); }
/* 하위 토글(3depth 부모) — 형제 링크와 **같은 글자 크기**여야 한다. 종전에는 인라인
   `font:inherit` 가 font-size 까지 덮어써서 토글만 1rem 으로 커졌다(2026-09-01 W000200).
   여기서는 버튼 UA 기본값만 지우고 크기는 위 `.nav-item` 규칙에 맡긴다. */
.nav-subtoggle {
  width: 100%; text-align: left;
  background: none; border: none; border-left: 3px solid transparent;
  font-family: inherit; font-weight: inherit; color: inherit;
}
.nav-subtoggle .nav-chevron { margin-left: auto; }
.nav-group-items .nav-item svg { width: 15px; height: 15px; }
.sidebar-footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border-color);
  font-size: 0.75rem; color: var(--text-muted);
}

/* === MAIN === */
.main {
  margin-left: var(--sidebar-width);
  padding: var(--space-lg);
  min-height: 100vh;
}

/* === CARDS === */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
}
.card-title {
  font-size: 0.75rem; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
}

/* === GRID === */
.grid { display: grid; gap: var(--space-md); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* === BADGES === */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 12px;
  font-size: 0.75rem; font-weight: 600;
}
.badge-ok { background: #064e3b; color: var(--color-success); }
.badge-warn { background: #78350f; color: var(--color-warning); }
.badge-err { background: #7f1d1d; color: var(--color-danger); }
.badge-muted { background: var(--bg-elevated); color: var(--text-muted); }

/* === TABLE === */
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th {
  text-align: left; padding: var(--space-sm) var(--space-md);
  color: var(--text-muted); font-weight: 500;
  border-bottom: 1px solid var(--border-color);
}
.table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--bg-elevated);
}
.table tr:hover td { background: var(--bg-elevated); }

/* === BUTTONS === */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: 6px 12px; border-radius: 6px;
  font-size: 0.8125rem; font-weight: 500;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 150ms ease;
}
.btn:hover { background: var(--border-color); }
.btn:focus { box-shadow: 0 0 0 3px var(--ring-color); outline: none; }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover { background: #1d4ed8; }
.btn-danger { background: var(--color-danger); border-color: var(--color-danger); }
/* 공통 색 변형(전역) — 페이지별 커스텀 버튼 대신 이걸 사용. filled 변형은 흰 텍스트 */
.btn-primary, .btn-danger, .btn-success, .btn-warning { color: #fff; }
.btn-success { background: var(--color-success); border-color: var(--color-success); }
.btn-warning { background: var(--color-warning); border-color: var(--color-warning); }
.btn-muted { background: var(--bg-elevated); border-color: var(--border-color); color: var(--text-muted); }
.btn-primary:hover, .btn-danger:hover, .btn-success:hover, .btn-warning:hover { filter: brightness(1.1); }
.btn-sm { padding: 3px 8px; font-size: 0.75rem; }
/* 필터/세그먼트 버튼바 활성 표시(공통) — data-f/data-nf 등 토글 .active */
.btn.active { border-color: var(--color-primary); color: var(--color-primary); background: rgba(37,99,235,.12); }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; filter: none; }

/* === GAUGE (Progress Bar) === */
.gauge { height: 8px; border-radius: 4px; background: var(--bg-elevated); overflow: hidden; }
.gauge-fill { height: 100%; border-radius: 4px; transition: width 300ms ease; }
.gauge-ok .gauge-fill { background: var(--color-success); }
.gauge-warn .gauge-fill { background: var(--color-warning); }
.gauge-danger .gauge-fill { background: var(--color-danger); }

/* === LOG VIEWER === */
.log-viewer {
  font-family: 'Fira Code', monospace;
  font-size: 0.8rem; color: var(--text-muted);
  background: var(--bg-base);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: var(--space-md);
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* === EVENT LIST === */
.event-item {
  display: flex; gap: var(--space-sm); align-items: flex-start;
  padding: var(--space-xs) 0;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--bg-elevated);
}
.event-time { color: var(--text-muted); white-space: nowrap; font-family: 'Fira Code', monospace; font-size: 0.75rem; }

/* === HTMX INDICATORS === */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease; }
.htmx-request .htmx-indicator { opacity: 1; }

/* === FOCUS / ACCESSIBILITY === */
:focus-visible { box-shadow: 0 0 0 3px var(--ring-color); outline: none; }
[tabindex]:focus { box-shadow: 0 0 0 3px var(--ring-color); }

/* === 0.8 RESPONSIVE === */
@media (max-width: 1024px) {
  .sidebar { width: var(--sidebar-collapsed); }
  .sidebar .nav-text, .sidebar-section, .sidebar-brand span { display: none; }
  .main { margin-left: var(--sidebar-collapsed); }
}
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main { margin-left: 0; padding: var(--space-md); padding-bottom: 72px; }
  .mobile-tabbar { display: flex; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 375px) {
  body { overflow-x: hidden; }
  .main { padding: var(--space-sm); padding-bottom: 72px; }
  .grid-auto { grid-template-columns: 1fr; }
  .card, .dash-card { padding: var(--space-md); }
}

/* Mobile Tab Bar */
.mobile-tabbar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
  justify-content: space-around;
  padding: var(--space-sm) 0;
  z-index: 100;
}
.tab-item {
  display: flex; flex-direction: column; align-items: center;
  font-size: 0.625rem; color: var(--text-muted);
  cursor: pointer;
}
.tab-item.active { color: var(--color-primary); }
.tab-item svg { width: 20px; height: 20px; margin-bottom: 2px; }

/* ── 공용 정보전달 컴포넌트 (카드→목록→세부, 전 페이지 재사용) ── */
.agent-badge { display:inline-flex; align-items:center; gap:5px; padding:1px 7px; border:1px solid var(--border-color); border-radius:10px; font-family:'Fira Code',monospace; font-size:0.66rem; color:var(--text-primary); background:var(--bg-card); white-space:nowrap; }
.agent-badge .ab-sess { color:var(--text-muted); opacity:0.8; }
.dcl-bar { display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.dcl-search { flex:1; min-width:160px; background:var(--bg-elevated); border:1px solid var(--border-color); border-radius:6px; padding:6px 10px; color:var(--text-primary); font-family:'Fira Code',monospace; font-size:0.76rem; }
/* 수집 페이저는 공통 dcecPager(.dcec-pager) 사용 — 페이지 전용 .dcl-pager 폐기 */
.dcl-list { display:flex; flex-direction:column; gap:6px; }
.dcl-row { display:flex; flex-direction:column; gap:5px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:6px; padding:9px 12px; cursor:pointer; transition:border-color 150ms; }
.dcl-row:hover { border-color:var(--color-primary); }
/* 1줄: 항목(메타) — agent 배지 + 상태 + 날짜(우측) */
.dcl-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dcl-head .dcl-date { margin-left:auto; font-family:'Fira Code',monospace; font-size:0.66rem; color:var(--text-muted); white-space:nowrap; }
/* 구분/상태 태그 배지는 공통 가이드(.dcec-st dcec-st-*) 사용 — .dcl-tag/.dcl-stat 폐기 */
/* 목록 테이블 — 헤더(항목) + 정렬 컬럼 */
.dcl-table { width:100%; border-collapse:collapse; font-size:0.78rem; }
/* insight drill-down 테이블도 리스트 헤더 표준 정합(배경+굵게+2px) — 일관성(W000104) */
.dcl-table thead th { text-align:center; padding:9px 10px; font-size:0.74rem; letter-spacing:0.02em; color:var(--text-primary); background:var(--bg-elevated); border-bottom:2px solid var(--border-color); white-space:nowrap; font-weight:700; }
.dcl-table thead th:first-child { padding-left:16px; }
.dcl-table tbody tr:first-child td { padding-top:14px; }  /* 헤더와 데이터 영역 구분 공백 */
.dcl-table td.c-tag, .dcl-table td.c-stat { text-align:center; }
.dcl-table tbody tr { border-bottom:1px solid var(--border-color); cursor:pointer; transition:background 120ms; }
.dcl-table tbody tr:hover { background:var(--bg-elevated); }
.dcl-table td { padding:8px 10px; vertical-align:top; }
.dcl-table .c-tag, .dcl-table .c-stat, .dcl-table .c-date { white-space:nowrap; width:1%; }
.dcl-table .c-date { color:var(--text-muted); font-family:'Fira Code',monospace; font-size:0.68rem; text-align:right; }
.dcl-table .c-main { color:var(--text-primary); word-break:break-word; line-height:1.5; }
/* 2줄~: 내용 — 전체폭(넓게), 2줄 미리보기(전체는 세부에서) */
.dcl-body { font-size:0.8rem; line-height:1.5; color:var(--text-primary); word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* 공통 리스트 레이아웃 — 같은 표시 형태(리스트)는 같은 레이아웃 재사용. 컬럼만 가변. (base.html 인라인 → 정위치 이동, P2-4) */
/* 디자인 지침(W000103/104): 일관성은 '스타일 표준'(헤더 주목성·정렬·간격·배지)으로 확보하고,
   컬럼 폭은 **일정하게 유지**한다(가이드 "리스트 폭 일정화", W000103) — `table-layout:fixed`
   가 기본이라 컨텐츠 길이가 폭을 밀어내지 못한다. 같은 화면의 동종 테이블이 서로 다른 폭으로
   그려지면 세로로 훑어 비교가 안 되기 때문. 비율 조정이 필요하면 그 테이블에 <colgroup> 을 쓰고
   (per-page 인라인 폭 조정 금지), 메타 컬럼은 .cell-narrow(width:1%)로 좁힌다. 넘침은 줄바꿈.
   ※ 2026-08-10 W000129 실측: 종전 주석은 "내용에 맞춘다(강제 균등 금지)"로 가이드와 상충했고
     실제 CSS 에도 table-layout 이 없었다 → 가이드를 정본으로 코드·주석을 현행화. */
.dcec-list{width:100%;border-collapse:collapse;}
/* 폭 일정화는 **colgroup 과 짝**으로만 켠다(.dcl-fixed). colgroup 없이 fixed 를 켜면 컬럼이
   균등 분할돼 기존 리스트가 깨진다 — 2026-08-10 W000129 실측: colgroup 미보유 템플릿 20+개,
   전역 적용 후 /peers "활성 개발 세션" 파손을 사용자가 확인. 전환은 테이블 단위로 진행한다. */
.dcec-list.dcl-fixed{table-layout:fixed;}
/* 헤더 행(첫 줄) = 아이템/설명 라벨링 → 주목성: 가운데 정렬 + 큰 폰트 + 배경색으로 데이터행과 차별(지침). */
.dcec-list th{text-align:center;font-size:0.74rem;color:var(--text-primary);font-weight:600;letter-spacing:0.02em;padding:9px 10px;background:var(--bg-elevated);border-bottom:2px solid var(--border-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dcec-list td{padding:8px 10px;font-size:0.78rem;text-align:center;vertical-align:middle;overflow-wrap:anywhere;word-break:break-word;}
.dcec-list td.cell-left{text-align:left;}
/* 시작 여백(지침): 첫 컬럼은 카드/테이블 가장자리에 붙지 않게 약간의 시작 공간. */
.dcec-list th:first-child,.dcec-list td:first-child{padding-left:16px;}
/* 좁은 컬럼(지침): 상태/날짜/버전/유형 등 짧은 메타 = 내용 폭에 맞춰 축소(width:1%+nowrap).
   내용(문자) 컬럼은 지정 안 함 → 자연 폭(길면 넓게). 짧은 값 컬럼을 억지로 넓히지 않음. */
/* cell-narrow = 폭만 좁게(내용맞춤). 정렬은 별도(td 기본 중앙 / cell-left 병기 시 좌측). */
.dcec-list th.cell-narrow,.dcec-list td.cell-narrow{width:1%;white-space:nowrap;}
.dcec-list th.cell-date,.dcec-list td.cell-date{width:1%;white-space:nowrap;color:var(--text-muted);font-size:0.7rem;}
/* 클릭 어포던스(자동, 전역): onclick 속성이 있는(=실제 클릭 가능) 행 또는 .clickable 행만 pointer+hover 선택.
   정적 행(액션 없음)은 자동으로 hover/pointer 없음 → '클릭해도 무반응(오류?)' 오인 방지. 모든 페이지 공통 적용.
   위임 click(JS addEventListener)로만 동작하는 행은 .clickable 을 명시할 것. */
.dcec-list-row{border-bottom:1px solid var(--bg-elevated);transition:background 120ms;}
.dcec-list-row[onclick], .dcec-list-row.clickable{cursor:pointer;}
.dcec-list-row[onclick]:hover, .dcec-list-row.clickable:hover{background:var(--bg-elevated);}
.dcec-list-row.static{cursor:default;}
.dcec-list-row.static:hover{background:transparent;}
/* 리스트 행 액션 버튼 — 폭 통일(항목별 정렬) */
.dcec-list td .btn{min-width:52px;justify-content:center;text-align:center;}
/* 공통 상태 배지 (SSOT: dcec_ui.js DCEC_STATUS) — 전 페이지 일관 색상 */
/* 스타일 가이드(SSOT): 한글은 반드시 Noto Sans KR. monospace(Fira Code)엔 한글 글리프 없어 가독성 저하 →
   한글 포함 라벨/배지는 sans(Fira Sans + Noto Sans KR). 코드/식별자만 monospace(+Noto Sans KR 폴백). */
.dcec-st{font-size:0.68rem;font-weight:600;padding:2px 8px;border-radius:3px;font-family:'Fira Sans','Noto Sans KR',sans-serif;white-space:nowrap;display:inline-block;min-width:44px;text-align:center;max-width:160px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;}
/* 리스트에서 배지가 셀의 유일한 내용이면 컬럼 폭을 채워 컬럼별 폭 통일(권한/상태/이벤트 열) */
.dcec-list td > .dcec-st:only-child{display:block;width:100%;max-width:none;box-sizing:border-box;}
/* 긴 콘텐츠 줄임 유틸 — 버튼/셀 크기 넘기지 말고 title(alt)로 전체 표시 */
.dcec-ellip{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;}
/* 리스트 컬럼 내 버튼 — 폭 통일(min-width로 균일). 좁은 셀에선 max-width:100%가 우선해 오버플로 금지. 긴 라벨 줄임(title) */
.dcec-list td .btn{min-width:58px;max-width:100%;box-sizing:border-box;justify-content:center;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;}
.dcec-st-warn{background:rgba(245,158,11,.16);color:var(--color-warning);}
.dcec-st-ok{background:rgba(34,197,94,.16);color:var(--color-success);}
.dcec-st-muted{background:rgba(148,163,184,.16);color:var(--text-muted);}
.dcec-st-info{background:rgba(37,99,235,.16);color:#60A5FA;}
.dcec-st-crit{background:rgba(239,68,68,.16);color:#ff6b6b;}
.dcec-st-accent{background:rgba(168,85,247,.16);color:#c084fc;}
/* 공통 페이저(dcecPager) — 하단 중앙, 검색과 분리 */
.dcec-pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;}
.dcec-pager-info{font-family:'Fira Code',monospace;font-size:0.72rem;color:var(--text-muted);min-width:56px;text-align:center;}
.dcec-pager-jump{width:56px;background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:0.72rem;padding:4px 6px;text-align:center;font-family:'Fira Code',monospace;}
.dcec-pager-jump:focus{outline:none;border-color:var(--color-primary);}

/* 분석 metric 렌더(.an-*) — dcecRenderMetric(dcec_insights.js) 의존. 호출 페이지 어디서든 스타일 보장 (insights_analyze_detail 인라인 → 정위치 이동, P2-4) */
.an-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.an-src{font-size:0.95rem;font-weight:600;}
.an-day{font-family:'Fira Code',monospace;font-size:0.7rem;color:var(--text-muted);}
.an-agent{font-size:0.6rem;background:rgba(37,99,235,.15);color:#60A5FA;padding:1px 7px;border-radius:3px;font-family:'Fira Code',monospace;}
.an-kv{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0;}
.an-pill{font-family:'Fira Code',monospace;font-size:0.72rem;background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:4px;padding:3px 10px;color:var(--text-secondary);}
.an-pill b{color:var(--text-primary);}
.an-anom{display:inline-block;background:rgba(245,158,11,.14);color:var(--color-warning);border-radius:4px;padding:2px 8px;font-size:0.72rem;}
.an-sum{margin-top:8px;background:var(--bg-elevated);border-radius:4px;padding:7px 9px;font-size:0.72rem;color:var(--text-muted);line-height:1.5;}
.an-bar{display:flex;align-items:center;gap:8px;padding:3px 0;}
.an-bar-name{font-family:'Fira Code',monospace;font-size:0.72rem;min-width:90px;}
.an-bar-fill{height:6px;border-radius:3px;background:var(--color-primary);}
.an-bar-c{font-family:'Fira Code',monospace;font-size:0.66rem;color:var(--text-muted);min-width:36px;text-align:right;}

.dt-rec { background:var(--bg-elevated); border:1px solid var(--border-color); border-left:2px solid var(--color-primary); border-radius:6px; padding:12px 14px; }
.dt-head { display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; font-family:'Fira Code',monospace; font-size:0.7rem; color:var(--text-muted); margin-bottom:4px; }
.dt-kv .k { opacity:0.55; margin-right:4px; }
.dt-kv .v { color:var(--text-primary); }
.dt-kv .v.hl { color:var(--color-primary); font-weight:600; }
.dt-field { margin-top:9px; }
.dt-field .fl { font-size:0.58rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); margin-bottom:3px; }
.dt-field .fv { font-family:'Fira Code',monospace; font-size:0.8rem; line-height:1.6; color:var(--text-primary); white-space:pre-wrap; word-break:break-word; }

/* ── 세부(record detail) — 기술 도시에(dossier) 스타일. frontend-design 적용, 전 페이지 재사용 ── */
@keyframes recFade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.rec-detail { background:var(--bg-elevated); border:1px solid var(--border-color); border-radius:8px; padding:16px 18px 20px; animation:recFade 280ms ease; }
.rec-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-bottom:12px; margin-bottom:4px; border-bottom:1px solid var(--border-color); }
.rec-title { font-family:'Fira Code',monospace; font-size:0.9rem; font-weight:700; color:var(--text-primary); letter-spacing:0.01em; }
.rec-pill { margin-left:auto; font-size:0.62rem; font-weight:700; padding:3px 11px; border-radius:12px; text-transform:uppercase; letter-spacing:0.05em; }
.rec-pill.done { background:rgba(46,204,113,0.14); color:var(--color-success); border:1px solid var(--color-success); }
.rec-pill.blocked, .rec-pill.failed { background:rgba(231,76,60,0.14); color:var(--color-danger); border:1px solid var(--color-danger); }
.rec-pill.in_progress { background:rgba(241,196,15,0.14); color:#e8b923; border:1px solid #e8b923; }
.rec-pill.open { background:var(--bg-card); color:var(--text-muted); border:1px solid var(--border-color); }
.rec-meta { display:flex; flex-wrap:wrap; gap:4px 16px; width:100%; font-family:'Fira Code',monospace; font-size:0.7rem; color:var(--text-muted); margin-top:8px; }
.rec-meta .k { opacity:0.55; margin-right:4px; }
.rec-meta .v { color:var(--text-primary); }
.rec-sec { margin-top:16px; animation:recFade 380ms ease both; }
.rec-sec .rl { display:flex; align-items:center; gap:8px; font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.09em; color:var(--color-primary); margin-bottom:6px; }
.rec-sec .rl::before { content:''; width:3px; height:11px; background:var(--color-primary); border-radius:2px; }
.rec-sec .rv { font-family:'Fira Code',monospace; font-size:0.82rem; line-height:1.65; color:var(--text-primary); white-space:pre-wrap; word-break:break-word; background:var(--bg-card); border:1px solid var(--border-color); border-radius:6px; padding:12px 14px; }