/* HYCU Lecture Generator — Design Tokens
   Admin UI: more modern/experimental
   Slide canvas: faithful to HYCU design system
*/

:root {
  /* HYCU 전용컬러 (UI규정) — 전용1 RGB(0,157,232) · 전용2 RGB(255,169,82) · 전용3 RGB(221,221,221) */
  --hycu-cyan: #009DE8;
  --hycu-cyan-deep: #0079C2;
  --hycu-cyan-soft: rgba(0, 157, 232, 0.12);
  --hycu-cyan-lift: rgba(0, 157, 232, 0.04);
  --hycu-cyan-hover: #008DD6;
  --hycu-cyan-active: #0068A8;
  --hycu-cyan-subtle: rgba(0, 157, 232, 0.06);
  --hycu-blue: #009DE8;
  --hycu-orange: #FFA952;
  --hycu-orange-deep: #C46A12;
  --hycu-orange-soft: rgba(255, 169, 82, 0.16);
  --hycu-gray: #DDDDDD;

  /* Surfaces — slide-system spec */
  --canvas: #FFFFFF;
  --surface-soft: #F5F7FA;
  --hairline: #D5DBE2;
  --hairline-soft: #E9ECF0;
  --header-wash: #FAFBFC;

  /* Text */
  --ink-deep: #0E1116;
  --ink: #1E2530;
  --charcoal: #3F4753;
  --slate: #5A6473;
  --steel: #7A8390;
  --stone: #A6ADB6;

  /* Semantic — softened warm orange */
  --success: #22A06B;
  --attention: #FFA952;
  --warning: #F2C94C;
  --critical: #E5484D;

  /* Admin UI surfaces */
  --admin-bg: #F5F6F7;
  --admin-panel: #FFFFFF;
  --admin-line: #E6E7E9;
  --admin-line-strong: #DDDDDD;
  --admin-ink: #0E1116;
  --admin-muted: #6E7785;
  --admin-faint: #A6ADB6;
  --admin-glass: rgba(255,255,255,0.72);

  /* 8pt spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;
  --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 40px;

  /* Radii — simplified to 2 sizes */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;

  /* Type scale */
  --fs-h1: 26px;
  --fs-h2: 20px;
  --fs-h3: 16px;
  --fs-body: 14px;
  --fs-sm: 13px;
  --fs-caption: 12px;
  --fs-micro: 11px;
}

/* Card padding standardization */
.card { padding: var(--s-4); }
.card.card-lg { padding: var(--s-6); }

/* HYCU font fallbacks — we don't have the real HYCU fonts, so we declare the
   names so the design system is honored where files exist, and fall back to
   neutral system fonts (NOT Pretendard/Noto/Malgun, per spec). The slide
   canvas uses these stacks; any fallback rendering simulates the intent. */
@font-face {
  font-family: 'HYCUGothicM';
  src: local('HYCUGothicM'), local('HY견고딕'), local('HY Gothic M');
  font-display: swap;
}
@font-face {
  font-family: 'HYCUGothicL';
  src: local('HYCUGothicL'), local('HY엽서L'), local('HY Gothic L');
  font-display: swap;
}
@font-face {
  font-family: 'HYCUMyungJoB';
  src: local('HYCUMyungJoB'), local('HY신명조'), local('HY MyungJo B');
  font-display: swap;
}
@font-face {
  font-family: 'HYCUMyungJoL';
  src: local('HYCUMyungJoL'), local('HY명조L'), local('HY MyungJo L');
  font-display: swap;
}

/* Admin UI body: Pretendard. Slide canvas keeps HY fonts (see .slide-canvas rules). */
/* Pretendard는 index.html <link>로 불러옴(@import는 @font-face 뒤라 브라우저가 무시했음) */

.font-gothic-m { font-family: 'HYCUGothicM', 'AppleSDGothicNeo-Medium', '맑은 고딕', sans-serif; font-weight: 500; }
.font-gothic-l { font-family: 'HYCUGothicL', 'AppleSDGothicNeo-Light', '맑은 고딕', sans-serif; font-weight: 300; }
.font-myungjo-b { font-family: 'HYCUMyungJoB', 'AppleMyungjo', 'Batang', serif; font-weight: 700; }
.font-myungjo-l { font-family: 'HYCUMyungJoL', 'AppleMyungjo', 'Batang', serif; font-weight: 300; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--admin-bg);
  color: var(--admin-ink);
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; }

/* App shell */
.app-shell {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  background: #0E1116;
  color: #C9CFD7;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid #1B1F25;
}
.sidebar .brand {
  padding: 24px 22px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #1B1F25;
}
.sidebar .brand .logo {
  width: 42px; height: 42px;
  background: transparent;
  background-image: url('HYCU_MAINSYMBOL_WHITE.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar .brand .title {
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  letter-spacing: -0.015em;
}
.sidebar .brand .sub {
  font-size: 11px;
  color: #6E7785;
}
.sidebar nav {
  padding: 14px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.sidebar .nav-section {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: #4F5763;
  padding: 14px 12px 6px;
  font-weight: 600;
}
.sidebar .nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #9AA2AD;
  font-size: 13px;
  cursor: pointer;
  border: 0;
  background: transparent;
  text-align: left;
  width: 100%;
  transition: all 0.12s ease;
}
.sidebar .nav-item:hover { background: #16191F; color: #fff; }
.sidebar .nav-item.active {
  background: #16191F;
  color: #fff;
}
.sidebar .nav-item.active .dot { background: var(--hycu-cyan); box-shadow: 0 0 0 3px rgba(0,157,232,0.18); }
.sidebar .nav-item .ico { width: 18px; height: 18px; opacity: 0.85; }
.sidebar .nav-item .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #2A2F36;
  margin-left: auto;
}
.sidebar .nav-item .badge {
  margin-left: auto;
  background: #1B1F25;
  color: #9AA2AD;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
}
.sidebar .me {
  margin-top: auto;
  padding: 14px;
  border-top: 1px solid #1B1F25;
  display: flex; align-items: center; gap: 10px;
}
.sidebar .me .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--hycu-cyan);
  color: white; font-weight: 700; font-size: 12px;
  display: grid; place-items: center;
  letter-spacing: -0.02em;
}
.sidebar .me .name { color: #fff; font-size: 12.5px; font-weight: 500; }
.sidebar .me .role { color: #6E7785; font-size: 10.5px; }

/* Main area */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--admin-glass);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--admin-line);
  padding: 14px 32px;
  display: flex; align-items: center; gap: 16px;
}
.topbar .crumbs {
  font-size: 12px;
  color: var(--admin-muted);
  display: flex; align-items: center; gap: 8px;
}
.topbar .crumbs .sep { color: var(--admin-faint); }
.topbar .title {
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-size: 18px; font-weight: 600; color: var(--admin-ink);
  letter-spacing: -0.01em;
}
.topbar .spacer { flex: 1; }
.topbar .search {
  width: 280px;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: var(--admin-bg);
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--admin-muted);
}
.topbar .search input {
  border: 0; background: transparent; outline: none;
  font-family: inherit; font-size: 12.5px; flex: 1;
  color: var(--admin-ink);
}
.topbar .icon-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid var(--admin-line);
  background: white;
  display: grid; place-items: center;
  color: var(--admin-muted);
  position: relative;
}
.topbar .icon-btn:hover { color: var(--admin-ink); }
.topbar .icon-btn .pip {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hycu-cyan);
  border: 1.5px solid white;
}

.content {
  padding: 28px 32px 80px;
  max-width: 1360px;
  width: 100%;
}

/* Buttons */
.btn {
  border: 0;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.15s ease;
  letter-spacing: -0.01em;
}
.btn-primary {
  background: var(--ink-deep);
  color: white;
}
.btn-primary:hover { background: #000; }
.btn-cyan {
  background: var(--hycu-cyan);
  color: white;
  font-weight: 600;
}
.btn-cyan:hover { background: var(--hycu-cyan-hover); }
.btn-cyan:active { background: var(--hycu-cyan-active); }
.btn-ghost {
  background: white;
  color: var(--admin-ink);
  border: 1px solid var(--admin-line-strong);
}
.btn-ghost:hover { background: var(--admin-bg); border-color: var(--admin-muted); }
.btn-quiet {
  background: transparent;
  color: var(--admin-muted);
  padding: 6px 10px;
}
.btn-quiet:hover { color: var(--admin-ink); background: var(--admin-bg); }

/* Card */
.card {
  background: var(--admin-panel);
  border: 1px solid var(--admin-line);
  border-radius: 12px;
}

/* Reusable dark panel for findings / toasts / recommended actions */
.panel-dark {
  background: var(--ink-deep);
  color: white;
  border-radius: 10px;
  padding: 18px;
}
.panel-dark .label-accent {
  font-size: 11px; letter-spacing: 0.14em; font-weight: 700;
  color: #80CDF3; text-transform: uppercase;
}
.panel-dark .meta { font-size: 12px; color: rgba(255,255,255,0.55); }

.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border: 1px solid var(--admin-line-strong);
  border-radius: 4px;
  background: var(--admin-bg);
  font-size: 10.5px;
  color: var(--admin-muted);
  font-family: ui-monospace, SFMono-Regular, monospace;
}

/* Page heading */
.page-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 24px; gap: 24px; flex-wrap: wrap; }
.page-heading h1 {
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-size: 26px; font-weight: 700; letter-spacing: -0.022em;
  margin: 0 0 4px;
  color: var(--admin-ink);
}
.page-heading .sub { color: var(--admin-muted); font-size: 13.5px; letter-spacing: -0.005em; }
.page-heading .actions { display: flex; gap: 8px; }

/* Status pills (legacy) */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.pill.draft { background: #F1F3F6; color: #5A6473; }
.pill.draft .dot { background: #A6ADB6; }
.pill.gen { background: var(--hycu-cyan-soft); color: var(--hycu-cyan-deep); }
.pill.gen .dot { background: var(--hycu-cyan); animation: pulse 1.2s ease-in-out infinite; }
.pill.review { background: #FFF1E0; color: #B86C1A; }
.pill.review .dot { background: var(--attention); }
.pill.published { background: #E2F4EC; color: #166B4A; }
.pill.published .dot { background: var(--success); }

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0,157,232, 0.5); }
  50% { opacity: 0.9; box-shadow: 0 0 0 6px rgba(0,157,232, 0); }
}

/* === Slide canvas (HYCU design system faithful) === */
.slide-canvas {
  width: 1920px;
  height: 1080px;
  background: var(--canvas);
  position: relative;
  transform-origin: top left;
  overflow: hidden;
}

.slide-canvas .header {
  position: absolute; left: 0; top: 0;
  width: 1920px; height: 100px;
  background: var(--header-wash);
  border-bottom: 1px solid var(--hairline-soft);
}
.slide-canvas .logo {
  position: absolute; left: 60px; top: 32px;
  display: flex; align-items: center; gap: 10px;
}
.slide-canvas .logo .mark {
  width: 36px; height: 36px;
  background: var(--hycu-cyan);
  border-radius: 6px;
  display: grid; place-items: center;
  color: white;
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-weight: 700; font-size: 16px;
  letter-spacing: -0.04em;
}
.slide-canvas .logo .name {
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-weight: 600; font-size: 14px;
  color: var(--ink-deep); letter-spacing: -0.01em;
}
.slide-canvas .logo .name .sub { color: var(--steel); font-weight: 400; font-size: 12px; }

.slide-canvas .chapter-indicator {
  position: absolute; left: 200px; top: 38px;
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-size: 14px;
  color: var(--charcoal);
  display: flex; align-items: center; gap: 8px;
}
.slide-canvas .chapter-indicator .ch { color: var(--hycu-cyan); font-weight: 600; }
.slide-canvas .chapter-indicator .arrow { color: var(--steel); }

.slide-canvas .addie {
  position: absolute; right: 60px; top: 36px;
  width: 240px; display: flex; align-items: center; gap: 0;
}
.slide-canvas .addie .stage {
  display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1;
}
.slide-canvas .addie .node {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--hairline);
  background: white;
  z-index: 1;
}
.slide-canvas .addie .stage.active .node { background: var(--hycu-cyan); border-color: var(--hycu-cyan); box-shadow: 0 0 0 3px rgba(0,181,226,0.18); }
.slide-canvas .addie .stage.done .node { background: var(--hycu-cyan); border-color: var(--hycu-cyan); }
.slide-canvas .addie .label {
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-size: 11px;
  color: var(--stone);
}
.slide-canvas .addie .stage.active .label { color: var(--hycu-cyan-deep); font-weight: 600; }
.slide-canvas .addie .conn {
  height: 2px; flex: 0 0 24px;
  background: var(--hairline);
  margin-top: -16px;
  align-self: flex-start;
}
.slide-canvas .addie .conn.done { background: var(--hycu-cyan); }

.slide-canvas .title-block {
  position: absolute; left: 80px; top: 130px;
  width: 1320px;
}
.slide-canvas .title-block .title {
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-size: 40px; font-weight: 600;
  letter-spacing: -0.015em; line-height: 1.25;
  color: var(--ink-deep); margin: 0;
}
.slide-canvas .title-block .subtitle {
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-size: 22px; font-weight: 300;
  letter-spacing: -0.01em; line-height: 1.4;
  color: var(--charcoal);
  margin: 14px 0 0;
}
.slide-canvas .title-block .accent {
  position: absolute; left: 0; top: 130px;
  width: 64px; height: 4px;
  background: var(--hycu-cyan);
}

.slide-canvas .body { position: absolute; left: 80px; top: 290px; width: 1320px; height: 670px; }
.slide-canvas .body.full { width: 1760px; }

.slide-canvas .instructor-zone {
  position: absolute; right: 20px; bottom: 60px;
  width: 480px; height: 540px;
  border: 2px dashed rgba(0, 181, 226, 0.35);
  border-radius: 12px;
  background: repeating-linear-gradient(45deg, rgba(0,181,226,0.04), rgba(0,181,226,0.04) 12px, rgba(0,181,226,0.08) 12px, rgba(0,181,226,0.08) 24px);
  display: grid; place-items: center;
  pointer-events: none;
}
.slide-canvas .instructor-zone.live {
  background: linear-gradient(180deg, rgba(0,181,226,0.05) 0%, rgba(0,181,226,0.02) 100%);
  border-style: solid; border-color: rgba(0, 181, 226, 0.2);
}
.slide-canvas .instructor-zone .label {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: rgba(0, 145, 184, 0.7);
  text-align: center;
}

.slide-canvas .footer {
  position: absolute; left: 0; bottom: 0;
  width: 1920px; height: 60px;
}
.slide-canvas .footer .track {
  position: absolute; left: 0; top: 0;
  width: 1920px; height: 4px;
  background: var(--hairline-soft);
}
.slide-canvas .footer .progress {
  position: absolute; left: 0; top: 0;
  height: 4px; background: var(--hycu-cyan);
}
.slide-canvas .footer .meta {
  position: absolute; left: 80px; top: 16px;
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-size: 13px; color: var(--steel);
}
.slide-canvas .footer .meta .arrow { color: var(--stone); margin: 0 6px; }
.slide-canvas .footer .pageno {
  position: absolute; right: 80px; top: 16px;
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-size: 13px; color: var(--steel);
}

/* Slide content components */
.slide-canvas .obj-card {
  background: var(--hycu-cyan-soft);
  border-left: 4px solid var(--hycu-cyan);
  border-radius: 16px;
  padding: 24px 28px;
}
.slide-canvas .obj-card .head {
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-size: 22px; color: var(--ink-deep); font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.slide-canvas .obj-card ul { list-style: none; padding: 0; margin: 0; }
.slide-canvas .obj-card li {
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-size: 17px; line-height: 1.55; color: var(--ink);
  padding-left: 18px; position: relative; margin-bottom: 6px;
}
.slide-canvas .obj-card li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--hycu-cyan);
}

.slide-canvas .summary-card {
  background: var(--surface-soft);
  border-radius: 12px;
  padding: 18px 20px;
}
.slide-canvas .summary-card .head {
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-size: 14px; color: var(--hycu-cyan-deep); font-weight: 600;
  letter-spacing: 0.02em; text-transform: uppercase;
  margin-bottom: 8px;
}
.slide-canvas .summary-card .body {
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-size: 15px; line-height: 1.5; color: var(--ink);
}

.slide-canvas .check-card {
  background: white;
  border: 2px dashed var(--hycu-cyan);
  border-radius: 12px;
  padding: 16px 18px;
}
.slide-canvas .check-card .head {
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-size: 14px; color: var(--hycu-cyan-deep); font-weight: 600;
  margin-bottom: 6px;
}
.slide-canvas .check-card .body {
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-size: 15px; color: var(--ink); line-height: 1.5;
}

.slide-canvas .chip {
  display: inline-flex; align-items: center;
  background: var(--surface-soft);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-size: 14px;
  margin: 0 6px 6px 0;
}
.slide-canvas .chip.active {
  background: var(--hycu-cyan-soft);
  color: var(--hycu-cyan-deep);
  font-weight: 600;
}

/* Editor canvas wrapper (scaled slide preview) */
.canvas-frame {
  background: #E4E8EE;
  border-radius: 14px;
  padding: 24px;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.canvas-stage {
  background: white;
  box-shadow: 0 8px 40px rgba(14,17,22,0.08), 0 1px 3px rgba(14,17,22,0.06);
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

/* Editor selection overlays */
.edit-tag {
  position: absolute;
  border: 1.5px solid var(--hycu-cyan);
  border-radius: 4px;
  pointer-events: none;
  box-shadow: 0 0 0 3px rgba(0,157,232,0.12);
}
.edit-tag .label {
  position: absolute; top: -22px; left: -1.5px;
  background: var(--hycu-cyan);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
}

/* Dropzone */
.dropzone {
  border: 2px dashed var(--admin-line-strong);
  border-radius: 14px;
  padding: 56px 24px;
  background: var(--admin-panel);
  text-align: center;
  transition: all 0.18s ease;
  position: relative;
}
.dropzone.over {
  border-color: var(--hycu-cyan);
  background: var(--hycu-cyan-lift);
}

/* Stat tiles */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat {
  background: white;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  padding: 18px 20px;
}
.stat .label { font-size: 11.5px; color: var(--admin-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
.stat .value { font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif; font-size: 28px; font-weight: 600; color: var(--admin-ink); margin-top: 6px; letter-spacing: -0.02em; }
.stat .delta { font-size: 11.5px; margin-top: 4px; }
.stat .delta.up { color: var(--success); }
.stat .delta.down { color: var(--critical); }
.stat .spark { margin-top: 12px; height: 28px; }

/* Lecture cards grid */
.lec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.lec-card {
  background: white;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.16s ease;
  cursor: pointer;
}
.lec-card:hover {
  border-color: var(--admin-line-strong);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(14,17,22,0.06);
}
.lec-card .thumb {
  height: 132px;
  background: linear-gradient(135deg, #F4F7FA, #E8ECF1);
  position: relative;
  overflow: hidden;
}
.lec-card .thumb .mini-slide {
  position: absolute; inset: 12px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(14,17,22,0.06);
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.lec-card .thumb .mini-slide .l { height: 4px; background: var(--hairline-soft); border-radius: 2px; }
.lec-card .thumb .mini-slide .l.t { width: 60%; background: var(--ink-deep); height: 6px; }
.lec-card .thumb .mini-slide .l.a { width: 18%; background: var(--hycu-cyan); height: 3px; margin-top: 2px; }
.lec-card .thumb .mini-slide .l.s { width: 80%; }
.lec-card .thumb .mini-slide .l.s2 { width: 70%; }
.lec-card .thumb .izone {
  position: absolute; right: 18px; bottom: 18px;
  width: 28%; height: 50%;
  border: 1px dashed rgba(0,157,232,0.3);
  border-radius: 3px;
  background: rgba(0,157,232,0.04);
}
.lec-card .meta { padding: 14px 16px; }
.lec-card .meta .ch { font-size: 11px; color: var(--hycu-cyan-deep); font-weight: 600; letter-spacing: 0.04em; }
.lec-card .meta .ti { font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif; font-size: 14.5px; color: var(--ink-deep); margin: 4px 0 8px; font-weight: 600; letter-spacing: -0.01em; }
.lec-card .meta .row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--admin-muted); }

/* Wizard steps */
.steps {
  display: flex; align-items: center; gap: 0;
  background: white;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  padding: 14px 20px;
}
.steps .step { display: flex; align-items: center; gap: 10px; flex: 1; }
.steps .step .num {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--admin-line-strong);
  display: grid; place-items: center;
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif; font-size: 12px; color: var(--admin-muted);
  background: white;
}
.steps .step.done .num { background: var(--hycu-cyan); border-color: var(--hycu-cyan); color: white; }
.steps .step.active .num { background: var(--ink-deep); border-color: var(--ink-deep); color: white; }
.steps .step .lbl { font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif; font-size: 13px; color: var(--admin-muted); font-weight: 500; }
.steps .step.active .lbl, .steps .step.done .lbl { color: var(--admin-ink); }
.steps .conn { flex: 0 0 32px; height: 1px; background: var(--admin-line-strong); margin: 0 8px; }
.steps .conn.done { background: var(--hycu-cyan); }

/* Stream log */
.stream {
  background: #0E1116;
  color: #C9CFD7;
  border-radius: 12px;
  padding: 18px 20px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  line-height: 1.7;
  height: 280px;
  overflow-y: auto;
}
.stream .line { display: flex; gap: 8px; }
.stream .ts { color: #4F5763; flex-shrink: 0; }
.stream .tag { color: var(--hycu-cyan); flex-shrink: 0; min-width: 64px; }
.stream .tag.warn { color: var(--attention); }
.stream .tag.ok { color: var(--success); }
.stream .msg { color: #C9CFD7; }
.stream .caret { display: inline-block; width: 7px; height: 14px; background: var(--hycu-cyan); animation: blink 1s steps(2) infinite; vertical-align: -2px; }
@keyframes blink { to { opacity: 0; } }

/* Editor layout */
.editor {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  gap: 14px;
  height: calc(100vh - 132px);
}
.editor .pane {
  background: white;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.editor .pane-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--admin-line);
  display: flex; align-items: center; justify-content: space-between;
}
.editor .pane-head .label {
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-size: 12px; font-weight: 600; color: var(--admin-ink);
  letter-spacing: -0.01em;
}
.editor .pane-body { flex: 1; overflow-y: auto; padding: 10px; }

/* Slide list */
.slide-list { display: flex; flex-direction: column; gap: 8px; }
.slide-list .item {
  display: flex; gap: 10px;
  padding: 6px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.12s ease;
  position: relative;
}
.slide-list .item:hover { background: var(--admin-bg); }
.slide-list .item.active { border-color: var(--hycu-cyan); background: var(--hycu-cyan-lift); }
.slide-list .item .num {
  font-family: ui-monospace, monospace;
  font-size: 10px; color: var(--admin-muted);
  width: 18px; flex-shrink: 0; text-align: right;
  padding-top: 4px;
}
.slide-list .item .thumb {
  flex: 1;
  aspect-ratio: 16/9;
  background: white;
  border: 1px solid var(--admin-line);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.slide-list .item.active .thumb { border-color: var(--hycu-cyan); }
.slide-list .item .phase {
  position: absolute;
  bottom: 4px; left: 4px;
  font-size: 8px; font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  color: white; background: var(--ink-deep);
  padding: 1px 5px; border-radius: 2px;
  letter-spacing: 0.04em;
}
.slide-list .item .phase.A { background: #6A4FB7; }
.slide-list .item .phase.D { background: #1971C2; }
.slide-list .item .phase.Dv { background: #009DE8; }
.slide-list .item .phase.I { background: #2FA76A; }
.slide-list .item .phase.E { background: #C25C19; }

/* Inspector */
.inspector { display: flex; flex-direction: column; gap: 14px; padding: 4px; }
.insp-section .head {
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-size: 11px; font-weight: 600;
  color: var(--admin-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.insp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.insp-row .lbl { color: var(--admin-muted); width: 60px; flex-shrink: 0; }
.insp-row .val { font-family: ui-monospace, monospace; color: var(--admin-ink); }
.insp input[type=text], .insp textarea, .insp select {
  width: 100%;
  border: 1px solid var(--admin-line);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 12px;
  font-family: inherit;
  background: white;
  outline: none;
  color: var(--admin-ink);
}
.insp input[type=text]:focus, .insp textarea:focus { border-color: var(--hycu-cyan); }
.insp textarea { resize: vertical; min-height: 60px; }

.seg {
  display: flex;
  background: var(--admin-bg);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.seg button {
  flex: 1;
  border: 0; background: transparent;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif; font-weight: 500;
  color: var(--admin-muted);
  cursor: pointer;
}
.seg button.on { background: white; color: var(--admin-ink); box-shadow: 0 1px 2px rgba(14,17,22,0.06); }

/* Toolbar above canvas */
.canvas-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--admin-line);
  background: white;
}
.canvas-toolbar .group { display: flex; gap: 2px; }
.canvas-toolbar button {
  border: 0; background: transparent;
  width: 30px; height: 30px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: var(--admin-muted);
  cursor: pointer;
}
.canvas-toolbar button:hover { background: var(--admin-bg); color: var(--admin-ink); }
.canvas-toolbar button.on { background: var(--hycu-cyan-soft); color: var(--hycu-cyan-deep); }
.canvas-toolbar .div { width: 1px; height: 18px; background: var(--admin-line); }
.canvas-toolbar .zoom {
  font-size: 11.5px;
  color: var(--admin-muted);
  font-family: ui-monospace, monospace;
  display: flex; align-items: center; gap: 6px;
}

/* ADDIE mapping screen */
.addie-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.addie-col {
  background: white;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  padding: 14px;
  min-height: 420px;
  display: flex; flex-direction: column; gap: 10px;
}
.addie-col .col-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--admin-line); margin-bottom: 4px; }
.addie-col .letter {
  width: 28px; height: 28px; border-radius: 6px;
  display: grid; place-items: center;
  color: white;
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif; font-weight: 700; font-size: 14px;
}
.addie-col.A .letter { background: #6A4FB7; }
.addie-col.D .letter { background: #1971C2; }
.addie-col.Dv .letter { background: #009DE8; }
.addie-col.I .letter { background: #2FA76A; }
.addie-col.E .letter { background: #C25C19; }
.addie-col .col-name { font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif; font-size: 13px; font-weight: 600; }
.addie-col .col-name .ko { color: var(--admin-muted); font-weight: 400; font-size: 11px; display: block; margin-top: 2px; }
.addie-col .count { margin-left: auto; font-size: 11px; color: var(--admin-muted); font-family: ui-monospace, monospace; }
.addie-card {
  background: var(--admin-bg);
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  cursor: grab;
}
.addie-card .num { font-size: 10px; color: var(--admin-muted); font-family: ui-monospace, monospace; }
.addie-card .ti { font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif; font-size: 12.5px; color: var(--admin-ink); margin-top: 2px; font-weight: 500; }
.addie-card .du { font-size: 10.5px; color: var(--admin-muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; }

/* Chromakey simulator */
.chroma-sim {
  background: #11141a;
  border-radius: 12px;
  padding: 20px;
  position: relative;
}

.toggle {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
}
.toggle .track {
  width: 32px; height: 18px; border-radius: 999px;
  background: var(--admin-line-strong); position: relative; transition: 0.16s;
}
.toggle .track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: white; transition: 0.16s;
}
.toggle.on .track { background: var(--hycu-cyan); }
.toggle.on .track::after { left: 16px; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(14,17,22,0.5);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
  z-index: 100;
  animation: fadein 0.18s ease;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: white;
  border-radius: 16px;
  width: 720px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 80px);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 80px rgba(14,17,22,0.3);
}
.modal-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--admin-line);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-head h2 {
  font-family: var(--v-font,'Pretendard Variable'), 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  font-size: 17px; font-weight: 600; margin: 0;
}
.modal-body { padding: 24px; overflow-y: auto; }
.modal-foot { padding: 16px 24px; border-top: 1px solid var(--admin-line); display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* Inline editing */
.inline-edit {
  outline: none;
  border-radius: 3px;
  padding: 1px 3px;
  margin: -1px -3px;
}
.inline-edit:hover { background: rgba(0,157,232, 0.06); }
.inline-edit:focus { background: rgba(0,157,232, 0.10); box-shadow: 0 0 0 1.5px rgba(0,157,232,0.5); }

/* 슬라이드 출력물은 교안 디자인 예시 기준 — 기존 팔레트 유지 */
.slide-canvas{--hycu-cyan:#00B5E2;--hycu-cyan-deep:#0091B8;--hycu-cyan-soft:rgba(0,181,226,0.12);--hycu-cyan-lift:rgba(0,181,226,0.04);--hycu-cyan-hover:#00A4CD;--hycu-cyan-active:#007A9A;--hycu-cyan-subtle:rgba(0,181,226,0.06);}