/* ──────────────────────────────────────────────────────────────
   LiveTalking 웹 UI 테마 — GithubDev/Docs 사이트(4351)와 동일한 디자인 토큰.
   출처: Docs/src/styles/global.css

   각 페이지의 인라인 <style> **뒤에** 링크한다. 그래야 같은 특이도에서
   이 파일이 이긴다. 업스트림(lipku/LiveTalking)의 인라인 스타일은 건드리지
   않았으므로, 이 링크 한 줄만 빼면 원래 파란색 글래스 테마로 돌아간다.

   업스트림 테마            → 이 테마
   #4361ee 인디고 그라디언트 → #df6548 테라코타 (--accent)
   반투명 유리 + blur        → 불투명 표면 + 1px 실선 테두리
   #e0eafc 파란 그라디언트 배경 → #faf9f6 웜 오프화이트
   ────────────────────────────────────────────────────────────── */

:root {
  --bg: #faf9f6;
  --surface: #fff;
  --text: #242722;
  --muted: #787c75;
  --line: #e8e8e1;
  --accent: #df6548;
  --accent-light: #fff0e9;
  --green: #477766;
  --green-light: #edf4ee;
  --sidebar: #f7f6f2;
  --danger: #b4432c;
  --danger-light: #fceeea;
  --warn: #b07d33;
  --warn-light: #faf1de;
  --radius: 12px;
  color-scheme: light;

  /* 각 페이지가 자기 이름으로 참조하는 변수들을 같은 값으로 묶어 둔다.
     이름이 제각각이라(--primary · --accent-primary · --primary-color …)
     전부 맞춰 줘야 미처 못 덮은 규칙도 같은 색을 쓴다. */
  --primary: var(--accent);
  --primary-dark: #c9553b;
  --primary-color: var(--accent);
  --secondary-color: var(--primary-dark);
  --accent-color: var(--green);
  --accent-primary: var(--accent);
  --accent-secondary: var(--primary-dark);
  --primary-gradient: var(--accent);
  --card-bg: var(--surface);
  --glass-bg: var(--surface);
  --glass-border: var(--line);
  --background-color: var(--bg);
  --primary-bg: var(--bg);
  --text-dark: var(--text);
  --text-color: var(--text);
  --text-muted: var(--muted);
  --success-color: var(--green);
  --danger-color: var(--danger);
  --border-radius: var(--radius);
  --card-shadow: 0 1px 2px #1c2b2408;
  --box-shadow: 0 1px 2px #1c2b2408;
}

/* ── 밝은 테마로 고정 ────────────────────────────────────────────
   시스템이 다크 모드여도 이 UI 는 밝게 둔다. 그래서 여기에는
   @media (prefers-color-scheme: dark) 블록이 없다 — 있으면 보는 사람의
   OS 설정에 따라 화면이 갈린다. 위 :root 의 color-scheme: light 가
   입력창·스크롤바 같은 브라우저 기본 위젯까지 밝게 잡아 준다.

   아래 블록은 자동으로 켜지지 않는다. 나중에 다크를 되살리고 싶으면
   <html data-theme="dark"> 로 명시하거나, 이 블록을
   @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { … } }
   로 감싸면 예전처럼 시스템 설정을 따라간다. */
:root[data-theme="dark"] {
  --bg: #161a18;
  --surface: #202522;
  --text: #e6eae5;
  --muted: #a0a99f;
  --line: #343b35;
  --accent: #f48d70;
  --accent-light: #332920;
  --green: #89bea5;
  --green-light: #25362d;
  --sidebar: #1b201c;
  --danger: #ef8b74;
  --danger-light: #3a2420;
  --warn: #d8ad66;
  --warn-light: #352d1c;
  --primary-dark: #e07a5c;
  color-scheme: dark;
}

/* ── 바탕 ───────────────────────────────────────────────────── */

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
    'Noto Sans KR', sans-serif;
  /* 업스트림은 body 에 linear-gradient 를 건다. background 를 통째로 덮어야
     background-image 까지 같이 지워진다 (avatar 페이지의 radial-gradient 점무늬). */
  background: var(--bg);
  color: var(--text);
  letter-spacing: -0.12px;
}

/* ── 상단 바 ────────────────────────────────────────────────────
   Docs 의 .topbar 를 따른다 — 색 띠가 아니라 바탕과 같은 색에 밑줄 하나.
   index 계열 3개는 <nav> 에 인라인 style 로 그라디언트가 박혀 있어
   거기서도 직접 지웠다. 여기 !important 는 혹시 남은 인라인용이다. */

.navbar {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--line);
  box-shadow: none !important;
  min-height: 64px;
  padding: 0 12px;
}

.navbar .navbar-brand,
.navbar-dark .navbar-brand {
  color: var(--text) !important;
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -0.5px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* 브랜드 아이콘을 Docs 의 .brand-mark(둥근 사각형 안 흰 아이콘)처럼 만든다 */
.navbar .navbar-brand > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  margin: 0 !important;
}

.navbar .text-white-50,
.navbar-dark .text-white-50 {
  color: var(--muted) !important;
}

.header-title {
  color: var(--text);
  letter-spacing: -0.8px;
  font-weight: 720;
}

.header-title i {
  color: var(--accent);
}

/* ── 카드 ───────────────────────────────────────────────────── */

.glass-card,
.card,
.session-card,
.dashboard-container > .card {
  background: var(--surface);
  backdrop-filter: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  margin-bottom: 20px;
}

.glass-card:hover {
  box-shadow: none;
  transform: none;
}

/* 링크로 감싼 카드(첫 화면 바로가기)만 Docs 의 .guide-card 처럼 반응한다 */
.quick-link .glass-card {
  transition: transform 0.15s, border-color 0.15s;
}

.quick-link:hover .glass-card {
  transform: translateY(-3px);
  border-color: #d5a28e;
  box-shadow: none;
}

.card-header,
.session-header {
  background: transparent;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-weight: 650;
  font-size: 14px;
  letter-spacing: -0.4px;
  padding: 15px 20px;
}

.card-header i {
  color: var(--accent);
}

.card-body {
  padding: 20px;
}

/* 반투명 회색(rgba(241,245,249,.5) 류)으로 깔린 속상자들. 반투명이라
   어두운 배경 위에서는 뿌연 회색으로 뜬다 — 불투명 토큰으로 바꾼다. */
.param-group,
.asr-container,
.config-section {
  background: var(--sidebar);
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* ── 버튼 ────────────────────────────────────────────────────────
   업스트림은 전부 linear-gradient 다. Docs 의 .button-primary 는 단색 +
   hover 시 brightness 만 낮춘다. 그쪽을 따른다. */

.btn-primary-custom,
.btn-submit,
.btn-primary,
.dashboard-container .btn-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  transition: filter 0.15s;
}

.btn-primary-custom:hover,
.btn-submit:hover,
.btn-primary:hover {
  background: var(--accent);
  filter: brightness(0.93);
  transform: none;
  box-shadow: none;
  color: #fff;
}

.btn-success-custom {
  background: var(--green);
  border: 1px solid var(--green);
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
}

.btn-success-custom:hover {
  filter: brightness(0.93);
  transform: none;
  box-shadow: none;
}

.btn-danger-custom,
.btn-stop {
  background: var(--danger);
  border: 1px solid var(--danger);
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
}

.btn-danger-custom:hover,
.btn-stop:hover {
  background: var(--danger);
  filter: brightness(0.93);
  transform: none;
  box-shadow: none;
}

.btn-warning-custom {
  background: var(--warn);
  border: 1px solid var(--warn);
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
}

.btn-warning-custom:hover {
  filter: brightness(0.93);
  transform: none;
  box-shadow: none;
}

.btn-outline-custom,
.btn-outline-primary {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  border-radius: 6px;
  padding: 8px 16px;
  transition: border-color 0.15s, color 0.15s;
}

.btn-outline-custom:hover,
.btn-outline-primary:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
  transform: none;
}

/* 키보드 초점은 Docs 와 같은 굵은 외곽선으로 통일한다 */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
video:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  box-shadow: none;
}

/* ── 입력 ───────────────────────────────────────────────────── */

/* background 단축 속성을 쓰면 안 된다 — .form-select 의 드롭다운 화살표는
   부트스트랩이 background-image 로 그리는데, 단축 속성이 그걸 같이 지운다.
   화살표가 사라지면 선택 상자가 텍스트 입력처럼 보인다. background-color 만 건드린다. */
.form-control,
.form-select,
input[type='text'],
input[type='number'],
textarea,
select {
  background-color: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
select:focus {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--accent);
  box-shadow: none;
}

/* 화살표 색을 테마의 --muted 로 맞춘다 (부트스트랩 기본은 진한 회색 #343a40).
   SVG 를 data URI 로 직접 넣는다 — currentColor 가 background-image 안에서는 안 먹는다. */
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23787c75' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* optgroup 라벨(로케일 이름)이 음성 목록에서 구분되게 */
optgroup {
  color: var(--muted);
  font-size: 0.85em;
}

optgroup option {
  color: var(--text);
}

label {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.9rem;
}

.param-hint,
.text-muted,
.small.text-muted {
  color: var(--muted) !important;
}

::placeholder {
  color: var(--muted) !important;
  opacity: 0.75;
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-check-input:focus {
  border-color: var(--accent);
  box-shadow: none;
}

/* ── 상태 표시 ───────────────────────────────────────────────── */

.session-badge,
.badge-status {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 600;
}

.connected,
.badge-speaking,
.status-completed,
.status-speaking {
  background: var(--green-light);
  color: var(--green);
}

/* 실제 오류·녹화 중처럼 주의를 끌어야 하는 것만 붉게 둔다 */
.badge-recording,
.status-failed {
  background: var(--danger-light);
  color: var(--danger);
}

/* "Disconnected" 는 오류가 아니라 평상시 상태다. 칩은 중립색으로 두고
   점(.status-dot.off)만 붉게 남겨 구분한다 — 붉은 칩을 쓰면 테라코타
   강조색과 뒤엉켜 무엇이 경고인지 안 읽힌다. */
.disconnected,
.badge-silent,
.status-silent,
.status-pending {
  background: var(--sidebar);
  color: var(--muted);
}

.status-running {
  background: var(--accent-light);
  color: var(--accent);
}

.status-dot.on,
.status-indicator.status-connected {
  background: var(--green);
}

.status-dot.off,
.status-indicator.status-disconnected {
  background: var(--danger);
}

.status-indicator.status-connecting {
  background: var(--accent);
}

.recording-indicator {
  background-color: var(--danger);
}

/* ── 표 ─────────────────────────────────────────────────────── */

.config-table th,
.table th {
  color: var(--muted);
  background: var(--sidebar);
  font-size: 10px;
  font-weight: 650;
  border-bottom: 1px solid var(--line);
}

.config-table td,
.table td {
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

.session-detail-item strong {
  color: var(--text);
}

.session-id {
  color: var(--accent);
  font-family: 'SFMono-Regular', Consolas, monospace;
}

/* ── 그 외 ──────────────────────────────────────────────────── */

video {
  border-radius: 8px;
  background: #0f2732;
}

/* Docs 는 본문 링크만 초록으로 칠한다. 링크색은 아래 "링크" 절에서 한 번에
   다루고, 여기서는 카드를 통째로 감싼 링크가 초록으로 물드는 것만 막는다 —
   안 막으면 첫 화면 바로가기 카드 제목이 전부 초록이 된다. */
.quick-link,
.quick-link:hover {
  color: inherit;
  text-decoration: none;
}

.quick-link .fw-bold {
  color: var(--text);
}

.progress {
  background: var(--sidebar);
}

.progress-bar {
  background: var(--accent);
}

.task-item {
  border-bottom: 1px solid var(--line);
}

.user-message {
  background: var(--accent-light);
  color: var(--text);
}

.system-message {
  background: var(--green-light);
  border-left: 3px solid var(--green);
  color: var(--text);
}

.asr-text {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
}

.empty-state,
.empty-state i,
.refresh-spinner {
  color: var(--muted);
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--sidebar) 25%,
    var(--line) 50%,
    var(--sidebar) 75%
  );
}

hr {
  border-color: var(--line);
  opacity: 1;
}

/* ── virtualcam.html 전용 ────────────────────────────────────────
   이 페이지만 #4361ee 를 변수 없이 직접 박아 둔 규칙이 몇 개 있다.
   변수 재정의로는 안 잡히므로 선택자를 그대로 다시 쓴다. */

.config-section h6 {
  color: var(--accent);
}

/* 이 페이지는 원래 짙은 남색 그라디언트 배경이라 제목이 흰 글씨였다.
   배경이 밝아졌으므로 Docs 의 .doc-header 처럼 되돌린다. */
.page-title {
  color: var(--text);
  text-align: left;
  max-width: 1320px;
  margin: 28px auto 24px;
  padding: 0 12px 22px;
  border-bottom: 1px solid var(--line);
}

.page-title h1 {
  font-size: 34px;
  letter-spacing: -1.4px;
  font-weight: 750;
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-title h1 > i {
  color: var(--accent);
}

.page-title p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

textarea:focus,
.form-select:focus,
.form-control:focus {
  border-color: var(--accent);
  box-shadow: none;
}

.quick-btn {
  background: var(--accent-light);
  color: var(--accent);
}

.quick-btn:hover {
  background: var(--accent);
  color: #fff;
}

.history-item {
  background: var(--sidebar);
  border: 1px solid var(--line);
}

/* ── 링크 ────────────────────────────────────────────────────────
   부트스트랩의 기본 링크색(#0d6efd)이 클래스 붙은 링크에 남는다
   (avatar 의 .text-decoration-none 접기 링크). 카드를 감싼 링크와
   버튼 역할 링크는 빼고 칠한다. */

a:not([class]),
a.text-decoration-none,
a.link-primary {
  color: var(--green);
}

a:not([class]):hover,
a.text-decoration-none:hover {
  color: var(--green);
  filter: brightness(0.85);
}

/* ── 부트스트랩 색상 유틸리티 ────────────────────────────────────
   .text-primary · .bg-primary · .btn-danger 류는 부트스트랩이 !important 로
   선언하므로 여기서도 !important 가 있어야 이긴다. 안 덮으면 카드 제목 옆
   아이콘과 배지에 부트스트랩 기본 파랑(#0d6efd)이 그대로 남는다. */

.text-primary {
  color: var(--accent) !important;
}

.text-success,
.text-info {
  color: var(--green) !important;
}

.text-danger {
  color: var(--danger) !important;
}

.text-warning {
  color: var(--warn) !important;
}

.text-secondary {
  color: var(--muted) !important;
}

.bg-primary {
  background-color: var(--accent) !important;
  color: #fff !important;
}

.bg-success {
  background-color: var(--green) !important;
  color: #fff !important;
}

.bg-danger {
  background-color: var(--danger) !important;
  color: #fff !important;
}

.bg-secondary {
  background-color: var(--muted) !important;
  color: #fff !important;
}

.btn-success {
  background-color: var(--green);
  border-color: var(--green);
  color: #fff;
}

.btn-danger {
  background-color: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.btn-warning {
  background-color: var(--warn);
  border-color: var(--warn);
  color: #fff;
}

.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover {
  filter: brightness(0.93);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}
