/* AiNex CUE — foundation styles (docs/UI_DESIGN.md). No build step, no external resources.
   Look (2026-10-29): a modern AI-video studio — off-white page, white rounded cards, near-black
   primary buttons, one bright cyan brand colour and a soft "prism" gradient (pink → cyan → green)
   used only as decoration (header ring, brand mark, accent rules, page glow).
   No progress bars, no percentages and no ETA: status is shown as labels only (planning doc 8-4).

   Sections: 1 tokens · 2 base · 3 shell (header, language switch, step nav, main, footer)
             4 page header + breadcrumbs · 5 panels / cards / sections · 6 tables · 7 badges
             8 buttons · 9 forms · 10 alerts, empty state, key-value · 11 admin + login (Phase 5)
             12 utilities · 13 responsive */

/* ==== 1. tokens ============================================================================== */
:root {
  /* brand */
  --cue-brand: #00C4FF;          /* bright cyan: brand fills only (always with --cue-brand-ink text) */
  --cue-brand-ink: #00141A;      /* text on cyan, 9.3:1 */
  --cue-brand-hover: #33D0FF;
  --cue-prism: linear-gradient(127deg, #F3A6FF 12%, #00C4FF 70%, #35C838 89%);
  --cue-prism-soft: linear-gradient(110deg, #00C4FF 0%, #95AAFE 50%, #F3A6FF 100%);

  /* accessible accent: links, "you are here", outlines (5.3:1 on white) */
  --cue-primary: #0072A3;
  --cue-primary-hover: #005E87;
  --cue-primary-press: #004D6E;
  --cue-primary-50: #EEFBFF;
  --cue-primary-100: #DDF6FF;
  --cue-primary-200: #A6E6FA;
  --cue-primary-ring: rgba(0, 196, 255, .38);

  /* action (primary buttons): near-black, as in modern video tools */
  --cue-action: #19191A;
  --cue-action-hover: #343A46;
  --cue-action-press: #000000;

  /* surfaces + text */
  --cue-heading: #19191A;
  --cue-background: #F7F8FA;
  --cue-panel: #FFFFFF;
  --cue-border: #E2E3E6;
  --cue-text: #232833;
  --cue-text-2: #4A5160;        /* secondary body text, 8.0:1 on white */
  --cue-muted: #626A7A;         /* captions, meta — 5.4:1 on white, 5.1:1 on the background */
  --cue-subtle: #818999;        /* disabled text and decoration only (3.5:1) */
  --cue-surface-2: #F7F8FA;     /* table heads, inset areas */
  --cue-surface-3: #F0F1F4;     /* hover / pressed neutrals, segmented-control tracks */
  --cue-border-soft: #EEEFF2;   /* row separators */
  --cue-border-strong: #CDCED2; /* outlines that must be seen */
  --cue-input-border: #8A909C;  /* form control boundary, 3.2:1 on white */
  --cue-ink: #0D0E0F;           /* video / log backgrounds */

  /* status tones: text / background / border (text >= 4.5:1 on its background) */
  --cue-ok: #1E7A3C;      --cue-ok-bg: #EAF8EF;      --cue-ok-border: #B9E4C6;
  --cue-warn: #9A5B00;    --cue-warn-bg: #FFF4DE;    --cue-warn-border: #F0CF8F;
  --cue-danger: #B42318;  --cue-danger-bg: #FDEDEB;  --cue-danger-border: #F4C3BD;
  --cue-active: #006C9C;  --cue-active-bg: #E8FBFF;  --cue-active-border: #A6E6FA;
  --cue-waiting: #5B3FB8; --cue-waiting-bg: #F5F0FF; --cue-waiting-border: #DDD0FB;
  --cue-neutral: #4A5160; --cue-neutral-bg: #F2F3F5; --cue-neutral-border: #DDDFE3;

  /* spacing scale (4 px grid) */
  --cue-space-1: 4px;  --cue-space-2: 8px;  --cue-space-3: 12px; --cue-space-4: 16px;
  --cue-space-5: 20px; --cue-space-6: 24px; --cue-space-8: 32px; --cue-space-10: 40px; --cue-space-12: 48px;
  --cue-gap: 20px;      /* between panels */

  /* radii */
  --cue-radius-sm: 8px;
  --cue-radius: 12px;   /* controls, inner boxes (page CSS uses this one) */
  --cue-radius-btn: 10px;
  --cue-radius-lg: 20px;/* panels */
  --cue-radius-pill: 999px;

  /* shadows (neutral, very soft) */
  --cue-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --cue-shadow: 0 2px 15px -3px rgba(0, 0, 0, .06), 0 10px 20px -2px rgba(0, 0, 0, .03);
  --cue-shadow-lg: 0 10px 40px -10px rgba(0, 0, 0, .16), 0 2px 10px -2px rgba(0, 0, 0, .05);
  --cue-focus: 0 0 0 3px var(--cue-primary-ring);

  /* type */
  --cue-font: "Pretendard", "Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  --cue-mono: "SF Mono", Menlo, Consolas, "D2Coding", "Noto Sans Mono CJK KR", monospace;
  --cue-fs-xs: 12px; --cue-fs-sm: 13px; --cue-fs-md: 14px; --cue-fs-base: 15px;
  --cue-fs-lg: 17px; --cue-fs-xl: 20px; --cue-fs-2xl: 28px;

  /* layout */
  --cue-shell: 1200px;         /* content width incl. side padding */
  --cue-shell-pad: 24px;
  --cue-shell-inner: calc(var(--cue-shell) - 2 * var(--cue-shell-pad));
}

/* ==== 2. base ================================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--cue-background); }
html, body {
  margin: 0;
  color: var(--cue-text);
  font-family: var(--cue-font);
  font-size: var(--cue-fs-base);
  line-height: 1.6;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  word-break: keep-all;          /* Korean: break between words, not inside them */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  /* a faint prism glow behind the top of every page */
  background:
    radial-gradient(520px 340px at 100% -60px, rgba(243, 166, 255, .20), rgba(243, 166, 255, 0) 70%),
    radial-gradient(560px 360px at 82% -120px, rgba(0, 196, 255, .14), rgba(0, 196, 255, 0) 70%),
    radial-gradient(480px 300px at -40px -80px, rgba(53, 200, 56, .07), rgba(53, 200, 56, 0) 70%),
    var(--cue-background);
  background-repeat: no-repeat;
}

a { color: var(--cue-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cue-primary-hover); text-decoration-thickness: 2px; }

h1, h2, h3, h4 { color: var(--cue-heading); margin: 0 0 var(--cue-space-3); line-height: 1.3; letter-spacing: -0.02em; }
h1 { font-size: var(--cue-fs-2xl); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: 19px; font-weight: 800; }
h3 { font-size: 16px; font-weight: 700; }
h4 { font-size: var(--cue-fs-base); font-weight: 700; }
p { margin: 0 0 var(--cue-space-3); }
ul, ol { margin: 0 0 var(--cue-space-3); }
strong, b { font-weight: 700; }
small { font-size: var(--cue-fs-sm); }

code, kbd, samp, pre { font-family: var(--cue-mono); font-size: 0.88em; }
code { overflow-wrap: anywhere; }
pre { overflow-x: auto; }
hr { border: 0; border-top: 1px solid var(--cue-border); margin: var(--cue-space-5) 0; }

img, video, audio, canvas, svg { max-width: 100%; }
video { height: auto; }

details > summary { cursor: pointer; }

::selection { background: var(--cue-primary-100); color: var(--cue-heading); }

/* Focus: one visible ring everywhere (keyboard only). */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--cue-primary); outline-offset: 2px; }
:where(input, select, textarea):focus-visible { outline: none; border-color: var(--cue-primary); box-shadow: var(--cue-focus); }
.cue-main:focus { outline: none; }

/* ==== 3. shell =============================================================================== */
.cue-skip {
  position: absolute; left: var(--cue-space-4); top: -60px; z-index: 100;
  padding: 8px 14px; border-radius: var(--cue-radius);
  background: var(--cue-panel); color: var(--cue-primary); font-weight: 700; box-shadow: var(--cue-shadow-lg);
}
.cue-skip:focus, .cue-skip:focus-visible { top: var(--cue-space-3); }

/* --- header: a floating white bar with a thin prism ring ------------------------------------- */
.cue-header { padding: 14px var(--cue-shell-pad) 0; }
.cue-header-inner {
  max-width: var(--cue-shell-inner);
  margin: 0 auto;
  padding: 9px 12px 9px 18px;
  min-height: 60px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cue-space-3) var(--cue-space-4);
  border: 1.5px solid transparent;
  border-radius: var(--cue-radius-lg);
  background: linear-gradient(var(--cue-panel), var(--cue-panel)) padding-box, var(--cue-prism) border-box;
  box-shadow: var(--cue-shadow);
}
.cue-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--cue-heading); font-weight: 800; font-size: 18px; letter-spacing: -0.03em;
  text-decoration: none; white-space: nowrap;
}
.cue-brand:hover { color: var(--cue-heading); text-decoration: none; }
.cue-brand-mark {
  /* the cue mark drawn in CSS: a black tile with a prism "play" wedge */
  flex: none; position: relative; width: 30px; height: 30px; border-radius: 9px;
  background: var(--cue-action);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.cue-brand-mark::after {
  content: ""; position: absolute; inset: 0;
  background: var(--cue-prism-soft);
  clip-path: polygon(38% 27%, 38% 73%, 75% 50%);
}
.cue-brand-ko {
  color: var(--cue-muted); font-weight: 600; font-size: var(--cue-fs-sm); letter-spacing: 0;
  padding: 1px 8px; border-radius: var(--cue-radius-pill); background: var(--cue-surface-3); margin-left: 2px;
}

.cue-header-actions {
  margin-left: auto;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--cue-space-2) var(--cue-space-3);
}
/* old flat-header rules relied on margin-left:auto; inside the action group they line up instead */
.cue-header-actions > * { margin-left: 0; margin-right: 0; }

.cue-check-link {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 7px 16px; border-radius: var(--cue-radius-btn);
  background: var(--cue-brand); color: var(--cue-brand-ink);
  font-weight: 700; font-size: var(--cue-fs-md); text-decoration: none; white-space: nowrap;
  transition: background-color .12s, box-shadow .12s;
}
.cue-check-link::before {     /* a small sparkle drawn in CSS */
  content: ""; width: 12px; height: 12px; flex: none; background: currentColor;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.cue-check-link:hover { background: var(--cue-brand-hover); color: var(--cue-brand-ink); text-decoration: none; box-shadow: 0 0 20px rgba(0, 195, 255, .30); }
.cue-check-link ~ .cue-user { margin-left: 0; }

.cue-user { display: flex; align-items: center; gap: var(--cue-space-2); color: var(--cue-muted); font-size: var(--cue-fs-md); }
.cue-user a { color: var(--cue-heading); font-weight: 600; text-decoration: none; padding: 6px 10px; border-radius: var(--cue-radius-btn); }
.cue-user a:hover { color: var(--cue-heading); background: var(--cue-surface-3); }
.cue-logout { display: inline; margin: 0; }

.badge-fake { background: #FFF3CD; border-color: #E0B400; color: #6B4F00; letter-spacing: 0.04em; }
.cue-header .badge-fake::before { display: none; }

/* --- language switch: a two-option segmented control ----------------------------------------- */
.cue-lang {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: var(--cue-radius-pill);
  background: var(--cue-surface-3);
  font-size: var(--cue-fs-sm); white-space: nowrap;
}
.cue-user ~ .cue-lang { margin-left: 0; }
.cue-lang a {
  display: inline-block; padding: 4px 12px; border-radius: var(--cue-radius-pill);
  color: var(--cue-muted); text-decoration: none; font-weight: 600;
}
.cue-lang a:hover { color: var(--cue-heading); }
.cue-lang a.is-current, .cue-lang a.is-current:hover { background: var(--cue-panel); color: var(--cue-heading); font-weight: 700; box-shadow: var(--cue-shadow-sm), 0 0 0 1px var(--cue-border); }
.cue-lang-sep { display: none; }

/* --- nav: generic tab bar (admin pages override the block with their own list) --------------- */
.cue-nav { padding: 0 var(--cue-shell-pad); }
.cue-nav > ul {
  list-style: none; margin: 12px auto 0; padding: 5px;
  max-width: var(--cue-shell-inner);
  display: flex; flex-wrap: wrap; gap: 2px;
  background: var(--cue-panel); border: 1px solid var(--cue-border); border-radius: 16px; box-shadow: var(--cue-shadow-sm);
}
.cue-nav li > a, .cue-nav li > span {
  display: inline-block; padding: 7px 14px; text-decoration: none; border-radius: var(--cue-radius-btn);
  font-size: var(--cue-fs-md); font-weight: 600;
}
.cue-nav li > a { color: var(--cue-text-2); }
.cue-nav li > a:hover { color: var(--cue-heading); background: var(--cue-surface-3); }
.cue-nav li.is-active > a, .cue-nav li.is-active > a:hover { color: #FFFFFF; background: var(--cue-action); }
.cue-nav .is-disabled { color: var(--cue-subtle); cursor: default; }

/* --- nav: the lesson workflow as an ordered step bar (position only, never completion) -------- */
.cue-nav > .cue-steps-list {
  list-style: none; margin: 12px auto 0; padding: 5px 10px 5px 5px;
  max-width: var(--cue-shell-inner);
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0;
  background: var(--cue-panel); border: 1px solid var(--cue-border); border-radius: var(--cue-radius-pill); box-shadow: var(--cue-shadow-sm);
  counter-reset: cue-step;
}
.cue-step {
  counter-increment: cue-step;
  display: flex; align-items: center;
  flex: 1 1 auto; min-width: 0;
}
.cue-step::after {            /* connector line to the next step */
  content: ""; flex: 1 1 auto; min-width: 6px; height: 1px; margin: 0 4px;
  background: var(--cue-border);
}
.cue-step:last-child { flex: 0 0 auto; }
.cue-step:last-child::after { display: none; }
.cue-nav .cue-step > .cue-step-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px; border: 0; border-radius: var(--cue-radius-pill);
  font-size: var(--cue-fs-md); font-weight: 600; line-height: 1.3;
  color: var(--cue-text-2); text-decoration: none; white-space: nowrap;
  transition: background-color .12s, color .12s;
}
.cue-step-link::before {      /* the step number */
  content: counter(cue-step);
  flex: none; display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--cue-surface-3);
  color: var(--cue-muted); font-size: var(--cue-fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.cue-nav .cue-step > a.cue-step-link:hover { color: var(--cue-heading); background: var(--cue-surface-3); }
.cue-nav .cue-step > a.cue-step-link:hover::before { background: var(--cue-panel); color: var(--cue-heading); }
.cue-nav .cue-step.is-active > .cue-step-link,
.cue-nav .cue-step.is-active > a.cue-step-link:hover { color: #FFFFFF; background: var(--cue-action); font-weight: 700; }
.cue-step.is-active > .cue-step-link::before,
.cue-nav .cue-step.is-active > a.cue-step-link:hover::before { background: var(--cue-brand); color: var(--cue-brand-ink); }
.cue-nav .cue-step > .cue-step-link.is-disabled { color: var(--cue-subtle); font-weight: 500; }
.cue-step-link.is-disabled::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--cue-border-strong); color: var(--cue-subtle); }
/* no lesson in context: a slim, quiet line without the card (it only says where the lesson steps will be) */
.cue-steps-idle > .cue-steps-list { background: transparent; border-color: transparent; box-shadow: none; padding-top: 2px; padding-bottom: 0; }
.cue-nav.cue-steps-idle .cue-step > .cue-step-link { padding: 4px 8px 4px 4px; font-size: var(--cue-fs-sm); }
.cue-steps-idle .cue-step-link::before { width: 20px; height: 20px; font-size: 11px; }

/* --- main + footer ---------------------------------------------------------------------------- */
.cue-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--cue-shell);
  margin: 0 auto;
  padding: var(--cue-space-8) var(--cue-shell-pad) var(--cue-space-4);
}
.cue-footer { width: 100%; max-width: var(--cue-shell); margin: 0 auto; padding: var(--cue-space-4) var(--cue-shell-pad) var(--cue-space-10); }
.cue-footer-inner { border-top: 1px solid var(--cue-border); padding-top: var(--cue-space-5); }

/* PDF warning: verbatim, always visible — a caution callout with an icon drawn in CSS */
.pdf-warning {
  margin: 0;
  padding: 13px 18px 13px 46px;
  border: 1px solid var(--cue-warn-border);
  border-radius: 14px;
  background: #FFF8E8 no-repeat 16px 14px / 18px 18px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23B26A00' d='M12 2.5 1.6 20.5h20.8L12 2.5Zm0 4.6 6.9 11.9H5.1L12 7.1Zm-1 4v4.2h2v-4.2h-2Zm0 5.4v2h2v-2h-2Z'/%3E%3C/svg%3E");
  color: var(--cue-heading);
  font-size: var(--cue-fs-md);
  font-weight: 600;
  line-height: 1.55;
}
.pdf-warning:has(+ .pdf-warning-en) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.pdf-warning-en,
.pdf-warning + .pdf-warning-en {
  margin-top: 0;
  padding-top: 2px;
  border-top: 0;
  border-top-left-radius: 0; border-top-right-radius: 0;
  background-image: none;
  font-size: var(--cue-fs-md);
  font-weight: 500;
  color: var(--cue-text-2);
}

/* ==== 4. page header + breadcrumbs =========================================================== */
.breadcrumbs, .core-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0;
  margin: 0 0 var(--cue-space-3); font-size: var(--cue-fs-sm); color: var(--cue-muted);
}
.breadcrumbs a, .core-crumbs a { color: var(--cue-muted); text-decoration: none; font-weight: 500; }
.breadcrumbs a:hover, .core-crumbs a:hover { color: var(--cue-heading); text-decoration: underline; }
.breadcrumbs > span:last-child, .core-crumbs > span:last-child { color: var(--cue-heading); font-weight: 700; }
.breadcrumb-sep, .core-crumb-sep { margin: 0 8px; color: var(--cue-subtle); }

.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--cue-space-3) var(--cue-space-4); margin: 0 0 var(--cue-space-6);
}
.page-head h1, .page-title { margin: 0; font-size: var(--cue-fs-2xl); font-weight: 800; letter-spacing: -0.03em; }
.page-head-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.page-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--cue-muted); font-size: var(--cue-fs-md); }
p.page-head-meta { margin: 0; }
/* the course list (home) gets a larger, display-style title */
.page-hero { margin-bottom: var(--cue-space-8); }
.page-hero h1 { font-size: 40px; line-height: 1.15; letter-spacing: -0.04em; }
.page-hero .page-head-meta { font-size: var(--cue-fs-base); }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--cue-space-2); align-items: center; }
/* a small pill above a page title ("eyebrow"), e.g. the screen group */
.page-eyebrow {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 6px; border-radius: var(--cue-radius-sm);
  background: var(--cue-panel); border: 1px solid var(--cue-border);
  font-size: var(--cue-fs-sm); font-weight: 600; color: var(--cue-heading);
}
.page-eyebrow::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--cue-prism-soft); }

/* lesson/course top bar (partials/core_layout.html, partials/lesson_topbar.html): breadcrumbs left,
   course screens right as a small segmented switch */
.core-topbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--cue-space-2) var(--cue-space-4); margin: 0 0 var(--cue-space-4);
}
.core-topbar > .core-crumbs { margin: 0; }
.core-course-links {
  display: inline-flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 3px;
  background: var(--cue-surface-3); border: 0; border-radius: var(--cue-radius);
}
.core-course-links .btn.btn-secondary {
  min-height: 30px; padding: 4px 13px; border-color: transparent; background: transparent;
  color: var(--cue-text-2); box-shadow: none; border-radius: 9px; font-weight: 600;
}
.core-course-links .btn.btn-secondary:hover { background: rgba(255, 255, 255, .7); color: var(--cue-heading); border-color: transparent; }
.core-course-links .btn.btn-secondary.is-current {
  background: var(--cue-panel); color: var(--cue-heading); border-color: transparent; box-shadow: var(--cue-shadow-sm), 0 0 0 1px var(--cue-border);
}

/* result-version switch in the page head (results, 영상 검수, 수정 요청): one compact segmented style */
.core-versions {
  display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 4px;
  background: var(--cue-surface-3); border: 0; border-radius: var(--cue-radius);
}
.core-version {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px;
  border: 1px solid transparent; border-radius: 9px; text-decoration: none; color: var(--cue-text-2); font-size: var(--cue-fs-md);
}
.core-version:hover { background: rgba(255, 255, 255, .7); color: var(--cue-heading); text-decoration: none; }
.core-version.is-current { border-color: var(--cue-border); background: var(--cue-panel); color: var(--cue-heading); box-shadow: var(--cue-shadow-sm); }
.core-version-no { font-weight: 800; }
.core-version.is-current .core-version-no { color: var(--cue-heading); }

/* ==== 5. panels / cards / sections =========================================================== */
.panel, .card {
  background: var(--cue-panel);
  border: 1px solid var(--cue-border);
  border-radius: var(--cue-radius-lg);
  box-shadow: var(--cue-shadow);
  padding: var(--cue-space-6) 28px;
  margin-bottom: var(--cue-gap);
}
.panel > :last-child, .card > :last-child { margin-bottom: 0; }
.panel > h1:first-child, .panel > h2:first-child, .card > h2:first-child { margin-top: 0; }
.panel h2, .card h2 { font-size: 19px; }
.panel-flat { box-shadow: none; }
.panel-inset { background: var(--cue-surface-2); box-shadow: none; }
/* accent: a thin prism rule along the top edge (painted as a background, so the corners stay round) */
.panel-accent {
  background:
    var(--cue-prism) top left / 100% 4px no-repeat,
    var(--cue-panel);
  padding-top: 30px;
}
.panel-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--cue-space-2) var(--cue-space-4); margin: 0 0 var(--cue-space-4);
}
.panel-head > h1, .panel-head > h2, .panel-head > h3 { margin: 0; }
.panel-foot { margin-top: var(--cue-space-5); padding-top: var(--cue-space-4); border-top: 1px solid var(--cue-border-soft);
  display: flex; flex-wrap: wrap; gap: var(--cue-space-2); align-items: center; }

.section-title { font-size: var(--cue-fs-base); font-weight: 800; color: var(--cue-heading); margin: var(--cue-space-6) 0 var(--cue-space-3); letter-spacing: -0.01em; }
.section-title:first-child { margin-top: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin: var(--cue-space-6) 0 var(--cue-space-3); }
.section-head > * { margin: 0; }
.section-sub { color: var(--cue-muted); font-size: var(--cue-fs-md); margin: -6px 0 var(--cue-space-3); }

.cue-grid { display: grid; gap: var(--cue-gap); }
.cue-grid-2 { display: grid; gap: var(--cue-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cue-grid-3 { display: grid; gap: var(--cue-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cue-grid > .panel, .cue-grid-2 > .panel, .cue-grid-3 > .panel { margin-bottom: 0; }

/* ==== 6. tables ============================================================================= */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
/* edge shadows show that a wide table scrolls sideways (they appear only when there is more to see) */
.table-scroll, .cue-scroll-shadow {
  background:
    linear-gradient(to right, var(--cue-panel) 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--cue-panel) 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0)) right center / 14px 100% no-repeat scroll;
}
.table-scroll > .cue-table { min-width: 640px; }
.cue-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--cue-fs-md); }
.cue-table th, .cue-table td {
  padding: 11px 14px; border-bottom: 1px solid var(--cue-border-soft);
  text-align: left; vertical-align: top;
}
.cue-table thead th, .cue-table > tr:first-child > th {
  color: var(--cue-muted); font-weight: 600; font-size: var(--cue-fs-sm);
  background: var(--cue-surface-2); border-bottom: 0;
  white-space: nowrap;
}
.cue-table th { color: var(--cue-heading); font-weight: 600; background: var(--cue-surface-2); }
.cue-table tbody th { background: transparent; }
.cue-table thead th:first-child { border-top-left-radius: var(--cue-radius-btn); border-bottom-left-radius: var(--cue-radius-btn); }
.cue-table thead th:last-child { border-top-right-radius: var(--cue-radius-btn); border-bottom-right-radius: var(--cue-radius-btn); }
.cue-table tbody tr:hover > td { background: #FAFBFC; }
.cue-table tbody tr:last-child > td { border-bottom: 0; }
.cue-table .num, .cue-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cue-table tr.is-selected > td { background: var(--cue-primary-50); }
.cue-table td.actions, .cue-table th.actions { text-align: right; white-space: nowrap; }
.cue-table-compact th, .cue-table-compact td { padding: 7px 10px; }
.cue-table .badge, .cue-table td.cue-nowrap, .cue-table .cue-nowrap { white-space: nowrap; }
.cue-table caption { text-align: left; color: var(--cue-muted); font-size: var(--cue-fs-sm); padding: 0 0 8px; }

/* ==== 7. badges (status labels only; never a percentage) ===================================== */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: var(--cue-radius-pill);
  border: 1px solid var(--cue-neutral-border);
  background: var(--cue-neutral-bg); color: var(--cue-neutral);
  font-size: 12.5px; font-weight: 600; line-height: 1.5; vertical-align: middle;
  white-space: normal; word-break: keep-all;
}
.badge::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.badge-lg, .core-badge-lg { font-size: var(--cue-fs-md); padding: 4px 14px; }
.badge-plain::before { display: none; }

/* tones (use on .badge, or on any element for text + tint) */
.tone-neutral, .badge-queued   { background: var(--cue-neutral-bg); border-color: var(--cue-neutral-border); color: var(--cue-neutral); }
.tone-active,  .badge-running  { background: var(--cue-active-bg);  border-color: var(--cue-active-border);  color: var(--cue-active); }
.tone-waiting, .badge-waiting  { background: var(--cue-waiting-bg); border-color: var(--cue-waiting-border); color: var(--cue-waiting); }
.tone-ok,      .badge-done     { background: var(--cue-ok-bg);      border-color: var(--cue-ok-border);      color: var(--cue-ok); }
.tone-warn,    .badge-warn     { background: var(--cue-warn-bg);    border-color: var(--cue-warn-border);    color: var(--cue-warn); }
.tone-danger,  .badge-failed   { background: var(--cue-danger-bg);  border-color: var(--cue-danger-border);  color: var(--cue-danger); }
.badge-cancelled { background: var(--cue-panel); border-color: var(--cue-neutral-border); border-style: dashed; color: var(--cue-muted); }
.badge-cancelled::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.badge-running::before { background: var(--cue-brand); opacity: 1; box-shadow: 0 0 0 3px rgba(0, 196, 255, .22); }
/* a result version that is ready to look at (검수 가능, 재제작 완료) is not a busy machine:
   outline style, no running halo. Running jobs keep the filled tint + halo. */
.badge-version.badge-running { background: var(--cue-panel); border-color: var(--cue-primary-200); }
.badge-version.badge-running::before { background: currentColor; box-shadow: none; }

/* ==== 8. buttons ============================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 18px;
  border: 1px solid var(--cue-action); border-radius: var(--cue-radius-btn);
  background: var(--cue-action); color: #FFFFFF;
  font: inherit; font-size: var(--cue-fs-md); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: var(--cue-shadow-sm);
  transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s;
}
.btn:hover { background: var(--cue-action-hover); border-color: var(--cue-action-hover); color: #FFFFFF; text-decoration: none; }
.btn:active { background: var(--cue-action-press); border-color: var(--cue-action-press); }
.btn:focus-visible { outline: 2px solid var(--cue-primary); outline-offset: 2px; box-shadow: var(--cue-focus); }
.btn-primary { /* = .btn default */ }

/* brand: bright cyan with dark text — for the one "make something" action of a screen */
.btn-brand { background: var(--cue-brand); border-color: var(--cue-brand); color: var(--cue-brand-ink); }
.btn-brand:hover { background: var(--cue-brand-hover); border-color: var(--cue-brand-hover); color: var(--cue-brand-ink); box-shadow: 0 0 20px rgba(0, 195, 255, .30); }
.btn-brand:active { background: #00B0E6; border-color: #00B0E6; }

.btn-secondary { background: var(--cue-panel); color: var(--cue-heading); border-color: var(--cue-border-strong); }
.btn-secondary:hover { background: var(--cue-surface-3); color: var(--cue-heading); border-color: var(--cue-input-border); }
.btn-secondary:active { background: #E6E8EC; color: var(--cue-heading); }

.btn-ghost { background: transparent; color: var(--cue-heading); border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--cue-surface-3); color: var(--cue-heading); border-color: transparent; }

.btn-danger { background: var(--cue-danger); border-color: var(--cue-danger); color: #FFFFFF; }
.btn-danger:hover { background: #95190F; border-color: #95190F; color: #FFFFFF; }
.btn-danger:active { background: #7D140C; border-color: #7D140C; }
.btn-danger.btn-secondary, .btn-danger-outline { background: var(--cue-panel); color: var(--cue-danger); border-color: var(--cue-danger-border); }
.btn-danger.btn-secondary:hover, .btn-danger-outline:hover { background: var(--cue-danger-bg); color: #95190F; border-color: var(--cue-danger); }

.btn-small, .cue-user .btn-small, .admin-actions .btn-small { min-height: 32px; padding: 4px 12px; font-size: var(--cue-fs-sm); border-radius: 9px; }
.btn-large { min-height: 48px; padding: 12px 24px; font-size: 16px; border-radius: 12px; }
.btn-icon { width: 40px; padding: 0; }
.btn-icon.btn-small { width: 32px; }
.btn-block { display: flex; width: 100%; }

.btn[disabled], .btn.is-disabled, .btn[aria-disabled="true"],
.btn[disabled]:hover, .btn.is-disabled:hover {
  background: var(--cue-surface-3); border-color: var(--cue-border); color: var(--cue-subtle);
  box-shadow: none; cursor: not-allowed; opacity: 1;
}
.btn-group { display: inline-flex; flex-wrap: wrap; gap: var(--cue-space-2); align-items: center; }

/* ==== 9. forms ============================================================================== */
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"], [type="submit"], [type="button"], [type="image"]), select, textarea) {
  font: inherit; font-size: var(--cue-fs-md); color: var(--cue-text);
  min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--cue-input-border); border-radius: var(--cue-radius-btn);
  background: var(--cue-panel);
  max-width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
:where(textarea) { min-height: 88px; line-height: 1.55; resize: vertical; }
:where(select) { padding-right: 30px; cursor: pointer; }
:where(input, select, textarea):hover { border-color: #6C7381; }
:where(input, select, textarea)::placeholder { color: var(--cue-subtle); opacity: 1; }
:where(input, select, textarea):disabled { background: var(--cue-surface-3); color: var(--cue-subtle); cursor: not-allowed; }
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--cue-action); width: 16px; height: 16px; margin: 0 6px 0 0; vertical-align: -3px; cursor: pointer; }
:where(input[type="file"]) { font: inherit; font-size: var(--cue-fs-md); color: var(--cue-text-2); max-width: 100%; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 700; margin-right: 10px; padding: 7px 14px; cursor: pointer;
  border: 1px solid var(--cue-border-strong); border-radius: var(--cue-radius-btn); background: var(--cue-panel); color: var(--cue-heading);
}
input[type="file"]::file-selector-button:hover { background: var(--cue-surface-3); border-color: var(--cue-input-border); }
:where(fieldset) { border: 1px solid var(--cue-border); border-radius: var(--cue-radius); padding: 10px 14px 14px; margin: 0 0 var(--cue-space-4); min-width: 0; }
:where(legend) { padding: 0 6px; color: var(--cue-heading); font-weight: 700; font-size: var(--cue-fs-md); }
:where(label) { color: var(--cue-text); max-width: 100%; }

.cue-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--cue-space-4); min-width: 0; }
.cue-field > :where(input, select, textarea) { width: 100%; }
.cue-label { font-size: var(--cue-fs-md); font-weight: 700; color: var(--cue-heading); }
.cue-label .cue-optional, .cue-optional { font-weight: 500; color: var(--cue-muted); }
.cue-help { font-size: var(--cue-fs-sm); color: var(--cue-muted); margin: 0; }
.cue-field-error { font-size: var(--cue-fs-sm); color: var(--cue-danger); font-weight: 600; margin: 0; }
.cue-field.has-error :where(input, select, textarea), :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--cue-danger); }
.cue-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--cue-space-5); }
.cue-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--cue-space-2) var(--cue-space-3); }
.cue-inline-form > .cue-field { margin-bottom: 0; }
.cue-checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.cue-checkbox > input { margin: 0; }
.cue-form-actions { display: flex; flex-wrap: wrap; gap: var(--cue-space-2); align-items: center; margin-top: var(--cue-space-4); }

/* ==== 10. alerts, empty state, key-value lists, messages ===================================== */
.cue-alert {
  margin: 0 0 var(--cue-space-4); padding: 13px 16px;
  border: 1px solid var(--cue-active-border); border-left-width: 4px; border-radius: var(--cue-radius);
  background: var(--cue-active-bg); color: var(--cue-heading); font-size: var(--cue-fs-md);
}
.cue-alert > :last-child { margin-bottom: 0; }
.cue-alert-title { display: block; font-weight: 700; margin-bottom: 2px; }
.cue-alert-info   { border-color: var(--cue-active-border);  border-left-color: var(--cue-brand);   background: var(--cue-active-bg); }
.cue-alert-ok     { border-color: var(--cue-ok-border);      border-left-color: var(--cue-ok);      background: var(--cue-ok-bg); }
.cue-alert-warn   { border-color: var(--cue-warn-border);    border-left-color: #B26A00;            background: var(--cue-warn-bg); }
.cue-alert-danger { border-color: var(--cue-danger-border);  border-left-color: var(--cue-danger);  background: var(--cue-danger-bg); }
.cue-alert-danger .cue-alert-title { color: var(--cue-danger); }
.cue-alert-neutral { border-color: var(--cue-border); border-left-color: var(--cue-border-strong); background: var(--cue-surface-2); color: var(--cue-text-2); }

.cue-empty {
  padding: var(--cue-space-8) var(--cue-space-5); text-align: center;
  border: 1.5px dashed var(--cue-border-strong); border-radius: var(--cue-radius);
  background: var(--cue-surface-2); color: var(--cue-muted);
}
.cue-empty > :last-child { margin-bottom: 0; }
.cue-empty strong { display: block; color: var(--cue-heading); font-size: var(--cue-fs-base); margin-bottom: 4px; }

.cue-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 0; font-size: var(--cue-fs-md); }
.cue-kv > dt { color: var(--cue-muted); font-weight: 500; }
.cue-kv > dd { margin: 0; color: var(--cue-heading); min-width: 0; }
.cue-kv-stacked { grid-template-columns: 1fr; gap: 2px; }
.cue-kv-stacked > dd { margin-bottom: 10px; }

.error-message { color: var(--cue-danger); font-weight: 600; }
.log-tail {
  margin: 0;
  background: var(--cue-ink);
  color: #E4E7EC;
  padding: 14px 16px;
  border-radius: var(--cue-radius);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  font-family: var(--cue-mono);
  font-size: 12.5px;
  line-height: 1.65;
}

/* ==== 11. Phase 5: login, admin pages ========================================================= */
.login-panel { max-width: 420px; margin: 48px auto; }
.login-form input { width: 100%; padding: 8px 12px; border: 1px solid var(--cue-input-border); border-radius: var(--cue-radius-btn); font: inherit; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--cue-gap); align-items: start; margin-bottom: var(--cue-gap); }
.admin-grid > .panel { margin-bottom: 0; }
.admin-filters { display: flex; flex-wrap: wrap; gap: var(--cue-space-3); align-items: flex-end; margin-bottom: var(--cue-space-4); }
.admin-filters label { display: flex; flex-direction: column; gap: 4px; font-size: var(--cue-fs-sm); font-weight: 600; color: var(--cue-text-2); }
.admin-actions { display: flex; gap: var(--cue-space-2); flex-wrap: wrap; align-items: center; }
.admin-actions form { display: inline; margin: 0; }
.fact-pending { color: var(--cue-warn); font-weight: 600; }
.fact-ok { color: var(--cue-ok); font-weight: 600; }
.fact-other { color: var(--cue-danger); font-weight: 600; }
.admin-json {
  white-space: pre-wrap; word-break: break-all; font-family: var(--cue-mono); font-size: 12.5px;
  background: var(--cue-surface-2); border: 1px solid var(--cue-border); border-radius: var(--cue-radius);
  padding: 12px; max-height: 360px; overflow: auto;
}
.warn-box { border-left: 4px solid #B26A00; padding: 12px 16px; background: var(--cue-warn-bg); }
.panel.warn-box { border-left: 4px solid #B26A00; background: var(--cue-warn-bg); }

/* ==== 12. utilities ========================================================================= */
.muted { color: var(--cue-muted); }
.cue-mono { font-family: var(--cue-mono); font-size: 0.9em; }
.cue-path { font-family: var(--cue-mono); font-size: var(--cue-fs-sm); word-break: break-all; color: var(--cue-text-2); }
.cue-nowrap { white-space: nowrap; }
.cue-small { font-size: var(--cue-fs-sm); }
.cue-stack { display: flex; flex-direction: column; gap: var(--cue-space-3); }
.cue-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cue-space-2) var(--cue-space-3); }
.cue-spacer { flex: 1 1 auto; }
.cue-gradient-text {
  background: var(--cue-prism-soft); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==== 13. responsive ======================================================================== */
@media (max-width: 1080px) {
  /* the step bar becomes a 5 + 4 grid (3 x 3 on phones): still numbered, still in order */
  .cue-nav > .cue-steps-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px var(--cue-space-2); padding: 5px; border-radius: 16px; }
  .cue-step::after { display: none; }
  .cue-nav .cue-step > .cue-step-link { width: 100%; white-space: normal; }
}

@media (max-width: 720px) {
  :root { --cue-shell-pad: 12px; --cue-gap: 14px; --cue-fs-2xl: 22px; }
  html, body { font-size: 15px; }
  h1, .page-head h1, .page-title, .page-hero h1 { font-size: var(--cue-fs-2xl); }
  h2, .panel h2 { font-size: 17px; }

  .cue-header { padding-top: 10px; }
  .cue-header-inner { padding: 10px 12px; gap: 10px 12px; border-radius: 16px; }
  .cue-header-actions { margin-left: 0; width: 100%; justify-content: space-between; gap: 8px 10px; }
  .cue-check-link { min-height: 34px; padding: 5px 12px; }

  .cue-nav > .cue-steps-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 4px; padding: 4px; align-items: stretch; }
  .cue-nav .cue-step > .cue-step-link {
    flex-direction: column; justify-content: flex-start; gap: 4px; width: 100%; padding: 6px 2px;
    border-radius: var(--cue-radius);
    font-size: var(--cue-fs-xs); line-height: 1.25; text-align: center; min-height: 58px;
  }
  .cue-steps-idle { display: none; }

  .core-topbar { flex-direction: column; align-items: stretch; }
  .core-course-links { align-self: flex-start; }
  .page-head > .core-versions { width: 100%; }
  .cue-nav > ul { overflow-x: auto; flex-wrap: nowrap; }

  .cue-main { padding-top: var(--cue-space-5); }
  .panel, .card { padding: var(--cue-space-4); border-radius: 16px; }
  .panel-accent { padding-top: 22px; }
  .page-head { margin-bottom: var(--cue-space-4); }

  /* wide tables scroll inside themselves, never the page */
  .cue-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .cue-table:not(.table-scroll > .cue-table) {
    background:
      linear-gradient(to right, var(--cue-panel) 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
      linear-gradient(to left, var(--cue-panel) 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0)) left center / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0)) right center / 14px 100% no-repeat scroll;
  }
  .cue-table th, .cue-table td { padding: 8px 10px; }
  .table-scroll > .cue-table { display: table; }

  .cue-grid-2, .cue-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .cue-kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cue-kv > dd { margin-bottom: 10px; }

  .btn { white-space: normal; }
  .pdf-warning { font-size: var(--cue-fs-sm); }
}

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

@media print {
  .cue-header, .cue-nav, .cue-skip { display: none; }
  body { background: #FFFFFF; }
  .panel { box-shadow: none; break-inside: avoid; }
}