/* ═══════════════════════════════════════════════════════════════
   LINCHPIN — 앱 다크 스킨 (Abyss & Ice) · 2026-07-18
   body.app-dark 로 옵트인. _shared-v5.css의 라이트 토큰을 다크로
   재정의해서, 토큰을 쓰는 페이지는 클래스 하나로 전환된다.
   (원시 #fff / #hex 는 페이지별로 토큰 치환 필요)
   적용: dashboard(자체 CSS) → upload → setting → …
   ═══════════════════════════════════════════════════════════════ */
body.app-dark {
  color-scheme: dark;

  /* 표면 */
  --canvas-white:  #0d1424;                    /* 카드 표면 */
  --mist-gray:     rgba(238,243,249,.06);      /* 서브 표면 */
  --surface-page:  #07090f;
  --surface-card:  #0d1424;
  --surface-subtle:rgba(238,243,249,.05);

  /* 텍스트 */
  --coal-black:    #eef3f9;
  --ink-black:     #dbe4ee;
  --slate-gray:    rgba(238,243,249,.74);
  --ash-gray:      rgba(238,243,249,.68);
  --text-primary:  #eef3f9;
  --text-secondary:#dbe4ee;
  --text-tertiary: rgba(238,243,249,.74);
  --text-muted:    rgba(238,243,249,.68);
  --text-inverse:  #0a1220;                    /* ice 버튼 위 텍스트 */

  /* 보더 */
  --fog-gray:      rgba(238,243,249,.14);
  --border-strong: rgba(238,243,249,.60);
  --border-default:rgba(238,243,249,.14);
  --border-subtle: rgba(238,243,249,.08);

  /* 액센트 — 블루 → 아이스 */
  --action-blue:   #a9cbee;
  --outline-blue:  #c8def5;
  --sky-wash:      rgba(169,203,238,.14);
  --gradient-sky:  radial-gradient(50% 50% at 75.6% 50%, rgba(169,203,238,.14) 0%, #0d1424 100%);

  /* 페이지 캔버스 */
  --app-main-bg:
    radial-gradient(90% 55% at 62% -10%, #101a2c 0%, transparent 60%),
    linear-gradient(180deg, #090d16 0%, #07090f 34%);

  background: var(--app-main-bg);
  background-attachment: fixed;
  color: var(--text-primary);
}
body.app-dark .app-main { background: var(--app-main-bg); }

/* 키보드 포커스 — 다크에서 확실히 보이는 ice 링 */
body.app-dark a:focus-visible,
body.app-dark button:focus-visible,
body.app-dark [tabindex]:focus-visible,
body.app-dark input:focus-visible,
body.app-dark select:focus-visible,
body.app-dark textarea:focus-visible { outline: 2px solid #a9cbee; outline-offset: 2px; }

body.app-dark ::selection { background: #a9cbee; color: #0a1220; }

/* 폼 요소 — 다크 기본값 보정 */
body.app-dark input, body.app-dark select, body.app-dark textarea {
  color: var(--text-primary);
}
body.app-dark input::placeholder, body.app-dark textarea::placeholder {
  color: rgba(238,243,249,.58);
}

/* 라이트 전용 그림자 완화 (흰 카드 그림자가 다크에선 과함) */
body.app-dark [class*="card"], body.app-dark [class*="box"] {
  box-shadow: none;
}

/* ═══ 반전 섬(라이트 카드) 내부 텍스트 보정 — 2026-07-19 ═══
   coal-black/ink-black 배경 요소는 다크 모드에서 밝게 반전되는데,
   그 안의 하드코딩 흰 텍스트(rgba 255)는 그대로 남아 안 보이는 문제. */

/* 상단 유리 내비게이션 (upload/setting/processing .up-nav)
   — history-detail의 클래스 없는 <nav>는 해당 페이지 내부에서 보정 */
body.app-dark .up-nav { background: rgba(9,13,22,.85) !important; }

/* 결제 수단 선택 카드(.on)의 설명 텍스트 */
body.app-dark .co-pm.on .co-pm-d,
body.app-dark .yt-co-pm.on .d,
body.app-dark .pm-opt.on .pm-d { color: rgba(10,18,32,.62) !important; }

/* setting 비용 카드(.cost-box) 내부 캡션 */
body.app-dark .cost-detail { color: rgba(10,18,32,.72); }
body.app-dark .cost-remain { color: rgba(10,18,32,.55); }

/* processing 방식 pill 내부 라벨 */
body.app-dark .pill.pill-ai .pill-label,
body.app-dark .pill.pill-review .pill-label { color: rgba(10,18,32,.72); }

/* youtube 결제 바 인라인 상세(#bar-price-detail — 인라인 스타일 우선순위 극복) */
body.app-dark #bar-price-detail { color: rgba(10,18,32,.62) !important; }