/* NSN Prism Web — 공통 스타일. 기존 리포트 디자인과 통일. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  background: #f0f2f5; color: #212121; font-size: 10pt;
}

/* ── 헤더 ── */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  background: #0D47A1; color: white; padding: 10px 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.app-title { font-size: 14pt; font-weight: bold; }
.app-sub { font-size: 10pt; font-weight: normal; opacity: 0.8; margin-left: 6px; }
.engine-status { display: flex; align-items: center; gap: 6px; font-size: 9pt; }
.engine-status .dot { width: 10px; height: 10px; border-radius: 50%; background: #FFB74D; display: inline-block; }
.engine-status.ready .dot { background: #66BB6A; }
.engine-status.busy .dot { background: #42A5F5; animation: pulse 1s infinite; }
.engine-status.error .dot { background: #EF5350; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }

/* ── 탭바 ── */
.tabbar {
  display: flex; gap: 2px; background: #E3F2FD; padding: 0 12px;
  border-bottom: 2px solid #BBDEFB; overflow-x: auto;
}
.tabbar button {
  border: none; background: transparent; padding: 11px 18px; cursor: pointer;
  font-family: inherit; font-size: 10.5pt; color: #555; border-bottom: 3px solid transparent;
  white-space: nowrap; transition: background .12s;
}
.tabbar button:hover { background: #BBDEFB; }
.tabbar button.active { color: #0D47A1; font-weight: bold; border-bottom-color: #1976D2; background: white; }

/* ── 콘텐츠 ── */
.content { padding: 16px; max-width: 1400px; margin: 0 auto; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── 카드/패널 ── */
.card {
  background: white; border: 1px solid #ddd; border-radius: 8px;
  padding: 14px 16px; margin-bottom: 14px;
}
.card-title { font-size: 11pt; font-weight: bold; color: #0D47A1; margin-bottom: 10px;
  padding-bottom: 6px; border-bottom: 1px solid #E3F2FD; }

/* ── 폼 위젯 ── */
.field-row { display: flex; align-items: center; gap: 8px; margin: 7px 0; flex-wrap: wrap; }
.field-row > label.lbl { min-width: 110px; font-size: 9.5pt; color: #444; }
.field-row input[type=text], .field-row input[type=number], .field-row input[type=date], .field-row select {
  padding: 5px 8px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; font-size: 9.5pt;
}
.field-row input[type=text] { min-width: 380px; }
.path-display { flex: 1; min-width: 280px; padding: 5px 8px; background: #f7f7f7;
  border: 1px solid #e0e0e0; border-radius: 4px; font-size: 9pt; color: #555; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.path-display.empty { color: #aaa; font-style: italic; }

.btn {
  padding: 6px 16px; border: 1px solid #1976D2; border-radius: 4px;
  background: #1976D2; color: white; cursor: pointer; font-family: inherit; font-size: 9.5pt;
}
.btn:hover { background: #1565C0; }
.btn.secondary { background: white; color: #1976D2; }
.btn.secondary:hover { background: #E3F2FD; }
.btn:disabled { background: #bbb; border-color: #bbb; cursor: not-allowed; }
.btn-run { padding: 9px 28px; font-size: 11pt; font-weight: bold; }

.opt-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.opt-group label.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px;
  border: 1px solid #ddd; border-radius: 14px; background: #fafafa; cursor: pointer;
  font-size: 9.5pt; user-select: none;
}
.opt-group label.chip:hover { background: #E3F2FD; }
.hint { font-size: 8.5pt; color: #888; margin-top: 4px; }

/* ── 진행/로그 ── */
.progress-wrap { margin: 10px 0; }
.progress-wrap { display: flex; align-items: center; gap: 10px; }
.progress-bar { flex: 1; height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; }
.progress-bar > div { height: 100%; width: 0; background: #1976D2; transition: width .2s; }
.progress-bar.indet > div {
  width: 35% !important; background: linear-gradient(90deg, #64B5F6, #1976D2, #64B5F6);
  animation: indet 1.1s ease-in-out infinite;
}
@keyframes indet { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
.elapsed { font-size: 9pt; color: #1976D2; white-space: nowrap; }
.log-box {
  margin-top: 8px; background: #1e1e1e; color: #d4d4d4; font-family: Consolas, monospace;
  font-size: 8.5pt; padding: 8px 10px; border-radius: 6px; max-height: 160px; overflow-y: auto;
  white-space: pre-wrap;
}
.log-box .ok { color: #81C784; } .log-box .err { color: #EF9A9A; }
.log-box .info { color: #64B5F6; } .log-box .warn { color: #FFB74D; }

/* ── 리포트 출력 ── */
.report-actions { display: flex; gap: 8px; margin: 10px 0 6px; align-items: center; }
.report-frame { width: 100%; height: 78vh; border: 1px solid #ccc; border-radius: 6px; background: white; }

/* ── 부팅 오버레이 ── */
#boot-overlay {
  position: fixed; inset: 0; background: #0D47A1; color: white; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
#boot-overlay.hidden { display: none; }
.boot-card { text-align: center; max-width: 440px; padding: 20px; }
.boot-spinner {
  width: 46px; height: 46px; border: 4px solid rgba(255,255,255,0.25); border-top-color: white;
  border-radius: 50%; margin: 0 auto 18px; animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.boot-title { font-size: 15pt; font-weight: bold; margin-bottom: 8px; }
.boot-stage { font-size: 10.5pt; margin-bottom: 12px; }
.boot-note { font-size: 9pt; opacity: 0.75; line-height: 1.5; }

/* ── 토스트 ── */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: #323232; color: white; padding: 10px 18px; border-radius: 6px; font-size: 9.5pt;
  opacity: 0; transition: all .25s; z-index: 10000; max-width: 80vw;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.err { background: #C62828; } .toast.ok { background: #2E7D32; }

.empty-note { color: #999; font-size: 9.5pt; padding: 30px; text-align: center; }

/* 미리보기 출력 */
.preview-out {
  margin: 8px 0 0; padding: 8px 12px; background: #f7f7f7; border: 1px solid #e0e0e0;
  border-radius: 5px; font-family: Consolas, monospace; font-size: 8.5pt; color: #444;
  white-space: pre-wrap; max-height: 180px; overflow-y: auto;
}