/* ==========================================================================
   v7-skin.css — Detail Localizer Design System(v7) 리스킨 (㉠ 방식)
   --------------------------------------------------------------------------
   기존 화면 구조/클래스(.btn .tool-* .modal 등)는 그대로 두고, 비주얼만
   v7 토큰(design-system-v7.css)으로 입힌다. 색·버튼·카드·입력·간격·그림자.
   끄려면 index.html 의 이 파일 <link> 한 줄만 제거 = 즉시 원복.
   로드 순서상 가장 마지막 = 기존 app.css 보다 우선.
   ========================================================================== */

/* ── 1. 기존 --color-* 토큰을 v7 팔레트로 리매핑 (전역 색감 즉시 전환) ── */
:root {
  --color-primary:        var(--v7-color-brand);        /* #346aff 쿠팡 블루 */
  --color-primary-hover:  var(--v7-color-brand-strong);
  --color-primary-dark:   var(--v7-color-brand-strong);
  --color-primary-light:  var(--v7-color-brand-soft);
  --color-primary-soft:   var(--v7-color-brand-tint);
  --color-accent:         var(--v7-color-accent);
  --color-accent-hover:   var(--v7-color-brand-strong);
  --color-accent-light:   var(--v7-color-brand-soft);

  --color-bg:        var(--v7-bg-page);
  --color-bg-app:    var(--v7-bg-page);
  --color-bg-card:   var(--v7-surface);
  --color-bg-section:var(--v7-surface-sub);
  --color-bg-input:  var(--v7-surface);
  --color-bg-sidebar:var(--v7-surface);
  --color-bg-subtle: var(--v7-surface-sub);
  --color-surface:   var(--v7-surface);

  --color-border:        var(--v7-border);
  --color-border-focus:  var(--v7-color-brand);
  --color-border-danger: var(--v7-color-danger);

  --color-text-primary:   var(--v7-text-strong);
  --color-text:           var(--v7-text);
  --color-text-secondary: var(--v7-text);
  --color-text-muted:     var(--v7-text-muted);
  --color-text-inverse:   var(--v7-text-on-brand);
  --color-text-accent:    var(--v7-color-brand);

  --color-success: var(--v7-color-success);
  --color-danger:  var(--v7-color-danger);
  --color-warning: var(--v7-color-warn);
  --color-info:    var(--v7-color-accent);

  --color-section-empty:      var(--v7-section-empty);
  --color-section-generating: var(--v7-section-generating);
  --color-section-done:       var(--v7-section-done);
  --color-section-locked:     var(--v7-section-locked);
  --color-banned-bg:   var(--v7-banned-bg);
  --color-banned-text: var(--v7-banned-text);

  --radius-sm:  var(--v7-radius-sm);
  --radius-md:  var(--v7-radius-md);
  --radius-lg:  var(--v7-radius-lg);
  --radius-xl:  var(--v7-radius-xl);
  --radius-2xl: var(--v7-radius-xl);
  --radius-full:var(--v7-radius-full);

  --shadow-sm: var(--v7-shadow-sm);
  --shadow-md: var(--v7-shadow-md);
  --shadow-lg: var(--v7-shadow-lg);
  --shadow-xl: var(--v7-shadow-modal);
  --shadow-focus: var(--v7-shadow-focus);

  --font-primary: var(--v7-font-sans);
}

/* ── 2. 바탕/타이포 ── */
body {
  background: var(--v7-bg-page);
  font-family: var(--v7-font-sans);
  color: var(--v7-text);
}

/* ── 3. 버튼 ── */
.btn {
  border-radius: var(--v7-radius-md);
  font-weight: var(--v7-fw-semibold);
  transition: background var(--v7-dur-fast) var(--v7-ease),
              border-color var(--v7-dur-fast) var(--v7-ease),
              color var(--v7-dur-fast) var(--v7-ease),
              transform var(--v7-dur-fast) var(--v7-ease),
              box-shadow var(--v7-dur-fast) var(--v7-ease);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary {
  background: var(--v7-color-brand);
  border-color: var(--v7-color-brand);
  color: var(--v7-text-on-brand);
}
.btn-primary:hover:not(:disabled) {
  background: var(--v7-color-brand-strong);
  border-color: var(--v7-color-brand-strong);
}
.btn-secondary, .btn-outline {
  background: var(--v7-surface);
  border-color: var(--v7-border-strong);
  color: var(--v7-text);
}
.btn-secondary:hover:not(:disabled), .btn-outline:hover:not(:disabled) {
  background: var(--v7-surface-hover);
  border-color: var(--v7-border-strong);
}
.btn-ghost { color: var(--v7-text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--v7-surface-hover); color: var(--v7-text); }
.btn-danger  { background: var(--v7-color-danger);  border-color: var(--v7-color-danger);  color: #fff; }
.btn-success { background: var(--v7-color-success); border-color: var(--v7-color-success); color: #fff; }

/* ── 4. 입력 ── */
input[type="text"], input[type="search"], input[type="url"], input[type="number"],
input[type="password"], input[type="email"], textarea, select {
  border-radius: var(--v7-radius-md);
  border: 1.5px solid var(--v7-border-strong);
  background: var(--v7-surface);
  color: var(--v7-text);
  transition: border-color var(--v7-dur-fast) var(--v7-ease), box-shadow var(--v7-dur-fast) var(--v7-ease);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--v7-color-brand);
  box-shadow: var(--v7-shadow-focus);
}
input::placeholder, textarea::placeholder { color: var(--v7-text-faint); }

/* ── 5. 패널 / 카드 / 모달 ── */
.tool-panel {
  background: var(--v7-surface);
  border: 1px solid var(--v7-border);
  border-radius: var(--v7-radius-lg);
  box-shadow: var(--v7-shadow-sm);
}
.tool-screen-head {
  background: var(--v7-surface);
  border-bottom: 1px solid var(--v7-border);
}
.tool-preset-card {
  border: 1.5px solid var(--v7-border);
  border-radius: var(--v7-radius-lg);
  background: var(--v7-surface);
  transition: border-color var(--v7-dur-fast) var(--v7-ease), background var(--v7-dur-fast) var(--v7-ease);
}
.tool-preset-card:hover { border-color: var(--v7-border-strong); }
.tool-preset-card.active, .tool-preset-card.is-default {
  border-color: var(--v7-color-brand);
  background: var(--v7-color-brand-soft);
}
.modal, .modal-fullscreen {
  background: var(--v7-surface);
  border-radius: var(--v7-radius-xl);
  box-shadow: var(--v7-shadow-modal);
}
.modal-overlay { background: var(--v7-scrim); backdrop-filter: blur(2px); }
.chip {
  border-radius: var(--v7-radius-full);
  border: 1.5px solid var(--v7-border-strong);
  background: var(--v7-surface);
  transition: border-color var(--v7-dur-fast) var(--v7-ease), background var(--v7-dur-fast) var(--v7-ease);
}
.chip:hover, .chip.is-active, .chip.active {
  border-color: var(--v7-color-brand);
  background: var(--v7-color-brand-soft);
  color: var(--v7-color-brand-strong);
}

/* ── 6. 단계 인디케이터(스텝퍼) ── */
.tool-step-num {
  background: var(--v7-border-strong);
  color: #fff;
  border-radius: var(--v7-radius-full);
  font-weight: var(--v7-fw-bold);
}
.tool-step[data-state="active"] .tool-step-num { background: var(--v7-color-brand); }
.tool-step[data-state="done"] .tool-step-num   { background: var(--v7-color-success); }
.tool-step[data-state="active"] .tool-step-label { color: var(--v7-text-strong); font-weight: var(--v7-fw-semibold); }

/* ── 7. 진행바 (생성 진행률) ── */
.progress-bar-fill, .tool-progress-fill, [class*="progress"][class*="fill"] {
  background: linear-gradient(90deg, var(--v7-color-brand), var(--v7-color-accent));
}

/* ── 8. 상단바 = 원래 다크 헤더 계약 복원 (2026-06-10 topbar 깨짐 fix) ──
   원인: 위 §1에서 --color-bg-sidebar 를 v7-surface(#fff) 로,
   --color-text-inverse 를 v7-text-on-brand(#fff) 로 리매핑 → topbar 가
   '흰 배경 + 흰 글자' 가 되어 안 보임. .topbar / .btn-ghost / project-title
   는 전부 '다크 배경 + 흰 글자' 전제로 설계됨(app.css). 따라서 topbar 의
   로컬 계약(다크 #1E293B + 흰 글자)만 복원 = 최소변경·회귀無.
   (codex gpt-5.5 합의: 옵션A + #1E293B, 흰헤더 재정의보다 안전) */
.topbar {
  background: #1E293B;
  color: var(--v7-text-on-brand);
}