/* =========================================================
   Image Studio — Design Tokens
   Dark-only · Minimal · Pretendard + IBM Plex Mono
   ========================================================= */

/* Pretendard Variable — 로컬 호스팅 (네트워크 독립 + 단일 요청) */
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('/static/fonts/PretendardVariable.woff2') format('woff2-variations');
}
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ——— Blacks (6 steps) ——— */
  --c-bg-0: #050505;   /* deepest — behind cards */
  --c-bg-1: #0a0a0a;   /* app background */
  --c-bg-2: #0f0f0f;   /* sidebar */
  --c-bg-3: #161616;   /* card */
  --c-bg-4: #1f1f1f;   /* card hover / input */
  --c-bg-5: #262626;   /* elevated */
  --c-bg-6: #2e2e2e;   /* top elevation */

  /* ——— Borders ——— */
  --c-line-1: rgba(255,255,255,0.06);   /* subtle separator */
  --c-line-2: rgba(255,255,255,0.09);   /* card border */
  --c-line-3: rgba(255,255,255,0.14);   /* hover border */
  --c-line-4: rgba(255,255,255,0.22);   /* focused / strong */

  /* ——— Text ——— */
  --c-fg-1: #f5f5f5;   /* primary */
  --c-fg-2: #a3a3a3;   /* secondary */
  --c-fg-3: #737373;   /* tertiary */
  --c-fg-4: #525252;   /* quaternary */
  --c-fg-5: #363636;   /* disabled */

  /* ——— Provider accents (5) ——— */
  --c-ltx: #22c55e;      /* LTX local */
  --c-kling: #a855f7;    /* Kling */
  --c-veo: #3b82f6;      /* Veo */
  --c-seedance: #ef4444; /* Seedance */
  --c-gemini: #eab308;   /* Gemini (image) / warn */
  --c-openai: #10a37f;   /* OpenAI / Codex image */

  --c-ltx-soft: color-mix(in oklab, var(--c-ltx) 18%, var(--c-bg-3));
  --c-kling-soft: color-mix(in oklab, var(--c-kling) 18%, var(--c-bg-3));
  --c-veo-soft: color-mix(in oklab, var(--c-veo) 18%, var(--c-bg-3));
  --c-seedance-soft: color-mix(in oklab, var(--c-seedance) 18%, var(--c-bg-3));
  --c-gemini-soft: color-mix(in oklab, var(--c-gemini) 18%, var(--c-bg-3));
  --c-openai-soft: color-mix(in oklab, var(--c-openai) 18%, var(--c-bg-3));

  /* ——— Semantic ——— */
  --c-success: #22c55e;
  --c-warn: #eab308;
  --c-danger: #ef4444;
  --c-info: #3b82f6;

  /* ——— Typography ——— */
  --f-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'system-ui', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (fluid, compact) */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --fs-4xl: 40px;
  --fs-5xl: 56px;

  /* Weight */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ——— Spacing ——— */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ——— Radius ——— */
  --r-xs: 4px;
  --r-sm: 6px;   /* buttons */
  --r-md: 8px;   /* inputs */
  --r-lg: 12px;  /* cards */
  --r-xl: 16px;
  --r-full: 999px;

  /* ——— Motion ——— */
  --e-out: cubic-bezier(.16,.84,.44,1);
  --e-in-out: cubic-bezier(.65,0,.35,1);
  --d-fast: 120ms;
  --d-base: 200ms;
  --d-slow: 360ms;

  /* Sidebar widths */
  --sb-full: 224px;
  --sb-rail: 60px;

  /* Shadow — we avoid, but keep one subtle overlay */
  --sh-overlay: 0 24px 80px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
}

/* ——— Base reset ——— */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg-1);
  color: var(--c-fg-1);
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'ss02';
  letter-spacing: -0.005em;
  /* Korean — avoid character-level breaks inside words */
  word-break: keep-all;
  overflow-wrap: break-word;
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* text-wrap for headers */
h1, h2, h3, h4 { text-wrap: balance; font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: 0; }

/* mono utility */
.mono { font-family: var(--f-mono); font-feature-settings: 'zero'; letter-spacing: 0; }
.tabular { font-variant-numeric: tabular-nums; }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-bg-5); border-radius: 8px; border: 2px solid var(--c-bg-1); }
::-webkit-scrollbar-thumb:hover { background: var(--c-bg-6); }

/* selection */
::selection { background: rgba(245,245,245,0.16); color: var(--c-fg-1); }

/* focus ring */
:focus-visible { outline: 1px solid var(--c-line-4); outline-offset: 2px; }

/* utility — dotted hairline used sparingly for art-gallery feel */
.hairline {
  height: 1px;
  background: var(--c-line-2);
}

/* ——— Shared Components ——— */
.card {
  background: var(--c-bg-3);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
}
.card-flat {
  background: transparent;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--c-fg-1);
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: all var(--d-fast) var(--e-out);
}
.btn:hover { background: var(--c-bg-4); }
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: var(--c-bg-6);
  color: var(--c-fg-1);
  border: 1px solid var(--c-line-3);
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--c-bg-7, #2a2a2a);
  border-color: var(--c-line-4);
}
.btn-primary:disabled { background: var(--c-bg-4); color: var(--c-fg-4); border-color: var(--c-line-2); font-weight: 400; }

.btn-secondary {
  border-color: var(--c-line-3);
}
.btn-secondary:hover { border-color: var(--c-line-4); background: var(--c-bg-4); }

.btn-ghost { color: var(--c-fg-2); }
.btn-ghost:hover { color: var(--c-fg-1); background: var(--c-bg-4); }

.btn-sm { height: 26px; padding: 0 8px; font-size: var(--fs-sm); gap: 4px; }
.btn-lg { height: 40px; padding: 0 16px; font-size: var(--fs-base); }
.btn-xl { height: 48px; padding: 0 20px; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }

.btn-icon {
  width: 32px;
  padding: 0;
}

.input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  background: var(--c-bg-4);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  color: var(--c-fg-1);
  transition: border-color var(--d-fast) var(--e-out);
}
.input:hover { border-color: var(--c-line-3); }
.input:focus { outline: none; border-color: var(--c-line-4); background: var(--c-bg-4); }
.input::placeholder { color: var(--c-fg-4); }

textarea.input { height: auto; padding: 10px; line-height: 1.6; resize: vertical; min-height: 90px; }

.label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-fg-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--f-mono);
  font-weight: var(--fw-medium);
  margin-bottom: 6px;
  white-space: nowrap;
}

/* Toggle group (pill tab) */
.seg {
  display: inline-flex;
  padding: 2px;
  gap: 0;
  background: var(--c-bg-4);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
}
.seg-item {
  padding: 4px 10px;
  font-size: var(--fs-sm);
  color: var(--c-fg-3);
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--d-fast) var(--e-out);
  border: none;
  background: transparent;
  white-space: nowrap;
}
.seg-item:hover { color: var(--c-fg-1); }
.seg-item[aria-selected="true"] {
  background: var(--c-bg-6);
  color: var(--c-fg-1);
}

/* Chip / badge */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  font-family: var(--f-mono);
  background: var(--c-bg-4);
  border: 1px solid var(--c-line-2);
  color: var(--c-fg-2);
  height: 20px;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Provider glyph — 24x24 boxed letter logo used as brand mark */
.glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-family: var(--f-mono);
  font-weight: var(--fw-semibold);
  font-size: 10px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  color: #050505;
}
.glyph-lg { width: 28px; height: 28px; border-radius: 7px; font-size: 12px; }
.glyph-xl { width: 40px; height: 40px; border-radius: 10px; font-size: 16px; }

.glyph[data-p="ltx"]      { background: var(--c-ltx); }
.glyph[data-p="kling"]    { background: var(--c-kling); color: #fff; }
.glyph[data-p="veo"]      { background: var(--c-veo); color: #fff; }
.glyph[data-p="seedance"] { background: var(--c-seedance); color: #fff; }
.glyph[data-p="gemini"]   { background: var(--c-gemini); }
.glyph[data-p="openai"]   { background: var(--c-openai); color: #fff; }
.glyph[data-p="replicate"] { background: var(--c-fg-1); }

/* Animated "generating" surface — subtle water/noise shimmer */
@keyframes shimmer-flow {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-25%, -25%); }
}

.shimmer {
  position: relative;
  overflow: hidden;
  background: var(--c-bg-3);
}
.shimmer::before {
  content: '';
  position: absolute;
  inset: -50%;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(168,85,247,0.10), transparent 50%),
    radial-gradient(900px 500px at 80% 70%, rgba(59,130,246,0.08), transparent 50%),
    radial-gradient(600px 400px at 50% 50%, rgba(34,197,94,0.06), transparent 50%);
  filter: blur(30px);
  animation: shimmer-flow 14s linear infinite alternate;
}
.shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.02) 0,
      rgba(255,255,255,0.02) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Noise dot overlay */
.noise {
  position: relative;
}
.noise::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}

/* Progress bar */
.progress {
  height: 3px;
  background: var(--c-bg-5);
  border-radius: var(--r-full);
  overflow: hidden;
  position: relative;
}
.progress-fill {
  height: 100%;
  background: var(--c-fg-1);
  border-radius: inherit;
  transition: width var(--d-base) var(--e-out);
}
.progress[data-p="ltx"] .progress-fill      { background: var(--c-ltx); }
.progress[data-p="kling"] .progress-fill    { background: var(--c-kling); }
.progress[data-p="veo"] .progress-fill      { background: var(--c-veo); }
.progress[data-p="seedance"] .progress-fill { background: var(--c-seedance); }
.progress[data-p="gemini"] .progress-fill   { background: var(--c-gemini); }
.progress[data-p="openai"] .progress-fill   { background: var(--c-openai); }

/* Tooltip */
.tooltip {
  position: relative;
}
.tooltip[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-bg-6);
  color: var(--c-fg-1);
  padding: 4px 8px;
  border-radius: var(--r-xs);
  white-space: nowrap;
  font-size: var(--fs-xs);
  border: 1px solid var(--c-line-2);
  pointer-events: none;
  z-index: 100;
}

/* Placeholder surface used instead of illustrations */
.ph {
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.02),
    rgba(255,255,255,0.02) 8px,
    transparent 8px,
    transparent 16px
  ),
  var(--c-bg-3);
  border: 1px dashed var(--c-line-2);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-fg-4);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
}