/* ==========================================================================
   Dost11 / Video Scoover — Design Tokens
   ==========================================================================

   Copy-and-paste stylesheet that reproduces the tokens, typography, button,
   modal and animation rules from the production Rails app. Ships both light
   (dost11-light, default) and dark (dost11-dark) themes via [data-theme].

   Font: Pretendard Variable (self-hosted). Icons: Lucide (via CDN).
   ========================================================================== */

/* --- Pretendard (self-hosted variable font) ------------------------------ */
@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("fonts/PretendardVariable.ttf") format("truetype-variations"),
       url("fonts/PretendardVariable.ttf") format("truetype");
}

/* --- Root (shared, light default) --------------------------------------- */
:root,
[data-theme="dost11-light"] {
  color-scheme: light;

  /* surfaces */
  --color-base-100: oklch(98% 0 0);
  --color-base-200: oklch(97% 0 0);
  --color-base-300: oklch(94% 0 0);
  --color-base-content: oklch(0% 0 0);
  --color-base-muted: oklch(55% 0.01 270);
  --color-base-border: oklch(90% 0.01 270);

  /* brand — deep violet */
  --color-primary: oklch(49.7% 0.282 284.81);
  --color-primary-content: oklch(98.07% 0.0169 325.7);
  --color-primary-focus: color-mix(in oklab, var(--color-primary) 90%, black);
  --color-primary-soft: color-mix(in oklab, var(--color-primary) 8%, var(--color-base-100));
  --color-primary-soft-border: color-mix(in oklab, var(--color-primary) 25%, var(--color-base-100));
  --color-primary-ring: color-mix(in oklab, var(--color-primary) 30%, transparent);

  /* brand — magenta */
  --color-secondary: oklch(67.98% 0.2123 304.77);
  --color-secondary-content: oklch(98.07% 0.0169 325.7);
  --color-secondary-focus: color-mix(in oklab, var(--color-secondary) 90%, black);
  --color-secondary-soft: color-mix(in oklab, var(--color-secondary) 8%, var(--color-base-100));
  --color-secondary-soft-border: color-mix(in oklab, var(--color-secondary) 25%, var(--color-base-100));

  /* brand — inky accent */
  --color-accent: oklch(29.39% 0.1542 277.11);
  --color-accent-content: oklch(98.07% 0.0169 325.7);
  --color-accent-focus: color-mix(in oklab, var(--color-accent) 90%, black);
  --color-accent-soft: color-mix(in oklab, var(--color-accent) 8%, var(--color-base-100));
  --color-accent-soft-border: color-mix(in oklab, var(--color-accent) 25%, var(--color-base-100));

  --color-neutral: oklch(14.08% 0.0044 285.82);
  --color-neutral-content: oklch(91.97% 0.004 286.32);
  --color-neutral-soft: color-mix(in oklab, var(--color-neutral) 8%, var(--color-base-100));
  --color-neutral-soft-border: color-mix(in oklab, var(--color-neutral) 25%, var(--color-base-100));

  /* semantic */
  --color-info: oklch(60.72% 0.227 252.05);
  --color-info-content: oklch(12.14% 0.045 252.05);
  --color-info-soft: color-mix(in oklab, var(--color-info) 8%, var(--color-base-100));
  --color-info-soft-border: color-mix(in oklab, var(--color-info) 25%, var(--color-base-100));

  --color-success: oklch(77.84% 0.1884 156.11);
  --color-success-content: oklch(17.14% 0.053 158.53);
  --color-success-soft: color-mix(in oklab, var(--color-success) 8%, var(--color-base-100));
  --color-success-soft-border: color-mix(in oklab, var(--color-success) 25%, var(--color-base-100));

  --color-warning: oklch(86.52% 0.1768 90.38);
  --color-warning-content: oklch(20.24% 0.0429 73.77);
  --color-warning-soft: color-mix(in oklab, var(--color-warning) 8%, var(--color-base-100));
  --color-warning-soft-border: color-mix(in oklab, var(--color-warning) 25%, var(--color-base-100));

  /* Error — destructive actions.
     Darkened from oklch(63% 0.255) → oklch(56% 0.205) so it reads as a
     considered destructive color rather than an alarm, and so white sits
     on top with ~4.8:1 contrast. Content flipped to white accordingly. */
  --color-error: oklch(56% 0.205 27);
  --color-error-content: oklch(99% 0.005 27);
  --color-error-soft: color-mix(in oklab, var(--color-error) 8%, var(--color-base-100));
  --color-error-soft-border: color-mix(in oklab, var(--color-error) 25%, var(--color-base-100));
  --color-error-focus: color-mix(in oklab, var(--color-error) 88%, black);
  --color-error-ring: color-mix(in oklab, var(--color-error) 35%, transparent);

  /* radii */
  --radius-selector: 0.625rem;  /* 10px — buttons, badges */
  --radius-field: 0.75rem;      /* 12px — inputs, cards */
  --radius-box: 1rem;           /* 16px — panels */
  --radius-modal: 1.25rem;      /* 20px — modal shell */

  /* sizing */
  --border: 1px;

  /* sidebar */
  --sidebar-width: 16rem;

  /* z-index scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* font stack */
  --font-sans: "Pretendard Variable", "Pretendard", -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

[data-theme="dost11-dark"] {
  color-scheme: dark;

  --color-base-100: oklch(23.787% 0.019 277.508);
  --color-base-200: oklch(25.805% 0.02 277.508);
  --color-base-300: oklch(30.822% 0.022 277.508);
  --color-base-content: oklch(97.747% 0.007 106.545);
  --color-base-muted: oklch(70% 0.01 270);
  --color-base-border: oklch(38% 0.01 277);

  --color-primary: oklch(67% 0.262 287.71);
  --color-primary-content: oklch(94.85% 0.029 301.883);
  --color-primary-soft: color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100));
  --color-primary-soft-border: color-mix(in oklab, var(--color-primary) 30%, var(--color-base-100));
  --color-primary-ring: color-mix(in oklab, var(--color-primary) 40%, transparent);

  --color-secondary: oklch(72% 0.1978 300.41);
  --color-secondary-content: oklch(94.85% 0.029 301.883);
  --color-secondary-soft: color-mix(in oklab, var(--color-secondary) 12%, var(--color-base-100));
  --color-secondary-soft-border: color-mix(in oklab, var(--color-secondary) 30%, var(--color-base-100));

  --color-accent: oklch(82.53% 0.0804 279.03);
  --color-accent-content: oklch(15% 0.029 301.883);
  --color-accent-soft: color-mix(in oklab, var(--color-accent) 12%, var(--color-base-100));
  --color-accent-soft-border: color-mix(in oklab, var(--color-accent) 30%, var(--color-base-100));

  /* semantics reuse the chroma values with dark soft mix */
  --color-info-soft: color-mix(in oklab, var(--color-info) 12%, var(--color-base-100));
  --color-info-soft-border: color-mix(in oklab, var(--color-info) 30%, var(--color-base-100));
  --color-success-soft: color-mix(in oklab, var(--color-success) 12%, var(--color-base-100));
  --color-success-soft-border: color-mix(in oklab, var(--color-success) 30%, var(--color-base-100));
  --color-warning-soft: color-mix(in oklab, var(--color-warning) 12%, var(--color-base-100));
  --color-warning-soft-border: color-mix(in oklab, var(--color-warning) 30%, var(--color-base-100));
  --color-error-soft: color-mix(in oklab, var(--color-error) 12%, var(--color-base-100));
  --color-error-soft-border: color-mix(in oklab, var(--color-error) 30%, var(--color-base-100));
}

/* --- Base reset --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-base-100);
  color: var(--color-base-content);
  font-feature-settings: "cv01", "cv02", "cv03", "cv04";
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-weight: 450;
}
/* Korean wrap policy — keep words together, break at word-level only */
* {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
code, pre, kbd, samp, var, textarea, input, select,
[contenteditable="true"], .font-mono {
  word-break: normal;
  overflow-wrap: normal;
}

/* --- Typography utilities (size + weight only, no color) ---------------- */
.type-caption   { font-size: 12px; line-height: 18px; font-weight: 500; }
.type-label     { font-size: 14px; line-height: 20px; font-weight: 500; }
.type-body      { font-size: 16px; line-height: 24px; font-weight: 400; }
.type-dense-body{ font-size: 14px; line-height: 20px; font-weight: 400; }
.type-body-strong { font-size: 18px; line-height: 28px; font-weight: 500; }
.type-title-sm  { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.type-title-md  { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.015em; }
.type-title-lg  { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; }
.type-display   { font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; }
.type-badge     { font-size: 12px; line-height: 18px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--color-base-border);
  border-radius: var(--radius-selector);
  background: var(--color-base-100);
  color: var(--color-base-content);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition-property: background-color, border-color, color, box-shadow, transform;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.btn:hover  { background: color-mix(in oklab, var(--color-base-content) 4%, var(--color-base-100)); border-color: color-mix(in oklab, var(--color-base-content) 16%, var(--color-base-100)); }
.btn:active { transform: translateY(1px); background: color-mix(in oklab, var(--color-base-content) 8%, var(--color-base-100)); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-base-content) 12%, transparent); }
.btn[disabled], .btn.btn-disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary   { background: var(--color-primary);   border-color: var(--color-primary);   color: var(--color-primary-content); }
.btn-primary:hover   { background: var(--color-primary-focus);   border-color: var(--color-primary-focus); }
.btn-primary:focus-visible { box-shadow: 0 0 0 3px var(--color-primary-ring); }

.btn-secondary { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-secondary-content); }
.btn-secondary:hover { background: var(--color-secondary-focus); border-color: var(--color-secondary-focus); }

.btn-accent    { background: var(--color-accent);    border-color: var(--color-accent);    color: var(--color-accent-content); }
.btn-error     { background: var(--color-error);     border-color: var(--color-error);     color: var(--color-error-content); }
.btn-error:hover     { background: var(--color-error-focus);     border-color: var(--color-error-focus); }
.btn-error:focus-visible { box-shadow: 0 0 0 3px var(--color-error-ring); }
.btn-outline.btn-error:hover { background: color-mix(in oklab, var(--color-error) 14%, var(--color-base-100)); }

.btn-outline {
  background: color-mix(in oklab, var(--color-base-content) 2%, var(--color-base-100));
  border-color: color-mix(in oklab, var(--color-base-content) 10%, var(--color-base-100));
  color: var(--color-base-content);
}
.btn-outline.btn-primary   { background: var(--color-primary-soft);   border-color: var(--color-primary-soft-border);   color: var(--color-primary); }
.btn-outline.btn-secondary { background: var(--color-secondary-soft); border-color: var(--color-secondary-soft-border); color: var(--color-secondary); }
.btn-outline.btn-error     { background: var(--color-error-soft);     border-color: var(--color-error-soft-border);     color: var(--color-error); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--color-base-content); }
.btn-ghost:hover { background: color-mix(in oklab, var(--color-base-content) 6%, transparent); }

.btn-elevated {
  --_s: var(--color-base-content);
  box-shadow: 0 10px 24px -16px color-mix(in oklab, var(--_s) 65%, black);
}
.btn-elevated:hover  { transform: translateY(-1px); box-shadow: 0 16px 30px -18px color-mix(in oklab, var(--_s) 72%, black); }
.btn-elevated:active { transform: translateY(0);    box-shadow: 0  8px 18px -16px color-mix(in oklab, var(--_s) 62%, black); }
.btn-primary.btn-elevated   { --_s: var(--color-primary); }
.btn-secondary.btn-elevated { --_s: var(--color-secondary); }

.btn-xs { height: 24px; min-height: 24px; padding: 0 8px;  font-size: 12px; line-height: 18px; }
.btn-sm { height: 32px; min-height: 32px; padding: 0 12px; font-size: 14px; line-height: 20px; }
.btn-lg { height: 48px; min-height: 48px; padding: 0 20px; font-size: 16px; line-height: 24px; }

.btn-square  { width: 40px; padding: 0; }
.btn-square.btn-sm { width: 32px; }
.btn-square.btn-lg { width: 48px; }
.btn-circle  { width: 40px; padding: 0; border-radius: 9999px; }
.btn-circle.btn-sm { width: 32px; }
.btn-circle.btn-lg { width: 48px; }
.btn-block   { width: 100%; }

/* --- Inputs ------------------------------------------------------------- */
.input, .select, .textarea {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font: inherit;
  font-size: 16px;
  background: var(--color-base-100);
  color: var(--color-base-content);
  border: 1px solid var(--color-base-border);
  border-radius: var(--radius-field);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--color-base-muted); }
.input:focus, .select:focus, .textarea:focus {
  border-color: color-mix(in oklab, var(--color-primary) 40%, var(--color-base-border));
  box-shadow: 0 0 0 3px var(--color-primary-ring);
}
.input-filled { background: var(--color-base-200); border-color: transparent; box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-base-content) 4%, transparent); }
.input-sm { height: 32px; font-size: 14px; padding: 0 10px; }
.input-lg { height: 48px; font-size: 18px; padding: 0 16px; }

.label { display: block; font-size: 14px; font-weight: 500; color: color-mix(in oklab, var(--color-base-content) 80%, transparent); margin-bottom: 6px; }

/* --- Badges ------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--color-base-border);
  background: var(--color-base-200);
  color: var(--color-base-content);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}
.badge-primary { background: var(--color-primary-soft); border-color: var(--color-primary-soft-border); color: var(--color-primary); }
.badge-secondary { background: var(--color-secondary-soft); border-color: var(--color-secondary-soft-border); color: var(--color-secondary); }
.badge-info    { background: var(--color-info-soft);    border-color: var(--color-info-soft-border);    color: var(--color-info); }
.badge-success { background: var(--color-success-soft); border-color: var(--color-success-soft-border); color: var(--color-success); }
.badge-warning { background: var(--color-warning-soft); border-color: var(--color-warning-soft-border); color: var(--color-warning); }
.badge-error   { background: var(--color-error-soft);   border-color: var(--color-error-soft-border);   color: var(--color-error); }

/* --- Alerts ------------------------------------------------------------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-field);
  border: 1px solid var(--color-base-border);
  background: var(--color-base-200);
  color: var(--color-base-content);
}
.alert-info    { background: var(--color-info-soft);    border-color: var(--color-info-soft-border);    color: var(--color-info); }
.alert-success { background: var(--color-success-soft); border-color: var(--color-success-soft-border); color: var(--color-success); }
.alert-warning { background: var(--color-warning-soft); border-color: var(--color-warning-soft-border); color: var(--color-warning); }
.alert-error   { background: var(--color-error-soft);   border-color: var(--color-error-soft-border);   color: var(--color-error); }

/* --- Cards & modal ------------------------------------------------------ */
.card {
  background: var(--color-base-100);
  border: 1px solid var(--color-base-border);
  border-radius: var(--radius-box);
  padding: 20px;
}
.card-muted { background: var(--color-base-200); border-color: transparent; }

.modal-panel {
  background: var(--color-base-100);
  color: var(--color-base-content);
  border-radius: var(--radius-modal);
  box-shadow: 0 24px 60px color-mix(in oklab, var(--color-neutral) 12%, transparent);
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-panel-header  { padding: 20px 24px 12px; }
.modal-panel-content { padding: 4px 24px 24px; flex: 1 1 auto; overflow-y: auto; }
.modal-panel-footer  { padding: 12px 24px 24px; display: flex; justify-content: flex-end; gap: 8px; }
.modal-panel-title   { font-size: 18px; font-weight: 600; margin: 0; }
.modal-panel-description { font-size: 14px; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); margin: 4px 0 0; max-width: 52ch; }

/* --- Animations --------------------------------------------------------- */
@keyframes highlight-fade {
  from { background-color: oklch(from var(--color-primary) l c h / 0.2); }
  to   { background-color: transparent; }
}
@keyframes pulse-ring {
  0%, 100% { outline: 2px solid transparent; }
  50%      { outline: 2px solid oklch(from var(--color-primary) l c h / 0.5); }
}
@keyframes hero-slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes tooltip-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}