/* =============================================================
 * Class101 Design System — classin-live build
 * Dropped at: public/static/c101-tokens.css
 * Included in every page head AFTER tailwind CDN (see c101-head snippet)
 *
 * Sections:
 *   1. Tokens (CSS variables)
 *   2. Base font override
 *   3. Legacy Tailwind utility reskin (rose/indigo/blue/violet/purple → orange/red)
 *   4. Radius + shadow flattening
 *   5. Class101 primitives
 *   6. Phase 2 — Chrome primitives (banner, GNB, fixed CTA, card)
 *   7. Phase 2 — Conflict audit overrides (0-D findings)
 * ============================================================ */

/* Pretendard Variable */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* ---------- 1. TOKENS ----------------------------------------- */
:root {
  /* Surfaces */
  --c101-bg:            #0C0C0C;
  --c101-bg-light:      #FFFFFF;
  --c101-surface-2:     #F3F3F3;
  --c101-surface-3:     #202020;

  /* Translucent fills */
  --c101-fill-weak-on-dark:    rgba(255,255,255,0.06);
  --c101-fill-weak-on-light:   rgba(0,0,0,0.03);
  --c101-fill-medium-on-dark:  rgba(255,255,255,0.12);
  --c101-fill-medium-on-light: rgba(0,0,0,0.08);

  /* Text */
  --c101-text-primary:     #0C0C0C;
  --c101-text-secondary:   rgba(55,55,55,0.8);
  --c101-text-tertiary:    #949494;
  --c101-divider:          rgba(0,0,0,0.10);
  --c101-text-primary-d:   #FFFFFF;
  --c101-text-secondary-d: rgba(255,255,255,0.72);
  --c101-text-tertiary-d:  rgba(255,255,255,0.48);
  --c101-divider-d:        rgba(255,255,255,0.12);

  /* Accents */
  --c101-red:         #E30F32;
  --c101-red-hover:   #C90D2C;
  --c101-orange:      #FF5D00;
  --c101-orange-hover:#E65400;
  --c101-yellow:      #FACC15;

  /* Radii */
  --c101-radius-none: 0;
  --c101-radius-sm:   4px;
  --c101-radius-md:   8px;
  --c101-radius-lg:   12px;
  --c101-radius-pill: 9999px;

  /* Typography */
  --c101-font-sans: "Pretendard Variable", "Pretendard JP Variable",
                    Pretendard, -apple-system, BlinkMacSystemFont,
                    system-ui, "Apple SD Gothic Neo", "Noto Sans KR",
                    sans-serif;
}

/* ---------- 2. BASE FONT OVERRIDE ----------------------------- */
/* Text body only — exclude icon fonts and monospace to prevent glyph breakage */
*:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class*="fa-"]):not(code):not(pre):not(kbd):not(samp):not(.font-mono) {
  font-family: var(--c101-font-sans) !important;
}
/* FontAwesome — preserve its own font-family so glyphs render */
.fa, .fas, .far, .fab, .fal, .fad, [class^="fa-"], [class*=" fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
}
.fab, [class*="fab "] { font-family: "Font Awesome 6 Brands", "FontAwesome" !important; }

code, pre, kbd, samp, .font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace !important;
}

body {
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- 3. LEGACY → CLASS101 UTILITY RESKIN --------------- */

/* Primary CTA family (was rose/indigo/blue/violet/purple) */
.bg-rose-500, .bg-rose-600, .bg-rose-700,
.bg-indigo-500, .bg-indigo-600, .bg-indigo-700,
.bg-blue-500, .bg-blue-600, .bg-blue-700,
.bg-violet-500, .bg-violet-600, .bg-violet-700,
.bg-purple-500, .bg-purple-600, .bg-purple-700 {
  background-color: var(--c101-orange) !important;
  color: #FFFFFF !important;
}
.hover\:bg-rose-600:hover, .hover\:bg-rose-700:hover,
.hover\:bg-indigo-600:hover, .hover\:bg-indigo-700:hover,
.hover\:bg-blue-600:hover, .hover\:bg-blue-700:hover,
.hover\:bg-violet-600:hover, .hover\:bg-violet-700:hover,
.hover\:bg-purple-600:hover, .hover\:bg-purple-700:hover,
.active\:bg-rose-600:active, .active\:bg-rose-700:active,
.active\:bg-indigo-600:active, .active\:bg-indigo-700:active,
.active\:bg-blue-600:active, .active\:bg-blue-700:active {
  background-color: var(--c101-orange-hover) !important;
}

/* Text in brand color */
.text-rose-400, .text-rose-500, .text-rose-600,
.text-indigo-500, .text-indigo-600, .text-indigo-700,
.text-blue-500, .text-blue-600, .text-blue-700,
.text-violet-500, .text-violet-600, .text-violet-700,
.text-purple-500, .text-purple-600, .text-purple-700 {
  color: var(--c101-red) !important;
}

/* Borders */
.border-rose-500, .border-rose-600,
.border-indigo-500, .border-indigo-600,
.border-blue-500, .border-blue-600,
.border-violet-500, .border-violet-600 {
  border-color: var(--c101-orange) !important;
}

/* Low-emphasis brand fills */
.bg-rose-50, .bg-rose-100,
.bg-indigo-50, .bg-indigo-100,
.bg-blue-50,  .bg-blue-100,
.bg-violet-50, .bg-violet-100 {
  background-color: rgba(255, 93, 0, 0.08) !important;
  color: #7A2C00 !important;
}

/* Focus ring (inputs + buttons) */
.focus\:ring-rose-500:focus,
.focus\:ring-indigo-500:focus,
.focus\:ring-blue-500:focus,
.focus\:ring-violet-500:focus {
  --tw-ring-color: var(--c101-orange) !important;
  box-shadow: 0 0 0 2px rgba(255, 93, 0, 0.4) !important;
}
.focus\:border-rose-500:focus,
.focus\:border-indigo-500:focus,
.focus\:border-blue-500:focus {
  border-color: var(--c101-orange) !important;
}

/* Gradient stops */
.from-rose-500, .from-rose-600,
.from-indigo-500, .from-indigo-600,
.from-blue-500, .from-blue-600,
.from-violet-500, .from-violet-600 {
  --tw-gradient-from: var(--c101-orange) !important;
  --tw-gradient-to:   rgba(255, 93, 0, 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-rose-500, .to-rose-600,
.to-indigo-500, .to-indigo-600,
.to-blue-500, .to-blue-600,
.to-violet-500, .to-violet-600,
.to-pink-500, .to-pink-600 {
  --tw-gradient-to: var(--c101-red) !important;
}

/* ---------- 4. RADII + SHADOWS (FLAT) --------------------------- */
.rounded-2xl { border-radius: var(--c101-radius-lg) !important; }
.rounded-3xl { border-radius: var(--c101-radius-lg) !important; }

.shadow-2xl { box-shadow: 0 8px 32px rgba(0,0,0,0.24) !important; }
.shadow-xl  { box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important; }
.shadow-lg  { box-shadow: 0 2px 8px rgba(0,0,0,0.08)  !important; }

/* ---------- 5. CLASS101 PRIMITIVES ---------------------------- */
.c101-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  background: var(--c101-orange); color: #fff;
  padding: 10px 20px; font-size: 16px; font-weight: 700;
  line-height: 1.2;
  border-radius: var(--c101-radius-md); border: 0; cursor: pointer;
  transition: background 120ms cubic-bezier(.2,.7,.2,1);
  text-decoration: none;
  box-sizing: border-box;
}
.c101-btn-primary:hover { background: var(--c101-orange-hover); color: #fff; }
/* GNB 등 작은 버튼에서 h-[38px] 를 쓸 때 세로 padding 충돌 없이 height 가 유지되도록. */
.c101-btn-primary[class*="h-["] { padding-top: 0; padding-bottom: 0; }

.c101-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  background: var(--c101-fill-weak-on-light);
  color: var(--c101-text-primary);
  padding: 10px 14px; font-size: 14px; font-weight: 600;
  border-radius: var(--c101-radius-md); border: 0; cursor: pointer;
}
.c101-btn-ghost:hover { background: var(--c101-fill-medium-on-light); }

.c101-badge-live {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--c101-red); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 6px; border-radius: var(--c101-radius-sm);
}
.c101-badge-live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; animation: c101-pulse 1.2s infinite;
}
@keyframes c101-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.c101-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--c101-fill-weak-on-light);
  color: var(--c101-text-primary);
  font-size: 13px; font-weight: 500;
  padding: 7px 14px; border-radius: var(--c101-radius-pill);
}

:focus-visible {
  outline: 2px solid var(--c101-orange);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 6. PHASE 2 — CHROME PRIMITIVES -------------------- */

/* Promotional announce bar */
.c101-announce-bar { transition: transform 200ms ease; }
.c101-announce-bar[data-hidden="true"] { transform: translateY(-100%); }

/* GNB */
.c101-gnb { background: #FFFFFF; }

/* Fixed bottom CTA */
.c101-fixed-cta { padding-bottom: env(safe-area-inset-bottom); }

/* Fixed CTA overlap 방지 — 공개 페이지 body 에 하단 여백 확보 (74px + safe-area).
   관리자 페이지는 admin-page 클래스로 제외. */
body:not(.admin-page) {
  padding-bottom: calc(74px + env(safe-area-inset-bottom));
}
/* 사용자가 dismissCta 쿠키로 닫으면 Fixed CTA 가 display:none 되지만,
   body padding 은 JS 로 제거하기 복잡하므로 유지 (하단 여백이 약간 있어도 UX 저하 없음). */

/* Card primitives */
.c101-card { display: block; }
.c101-card-thumb { border-radius: 0; overflow: hidden; }

/* Category quicklink chip */
.c101-cat-chip { transition: opacity 120ms ease; }
.c101-cat-chip:hover { opacity: 0.7; }

/* Section title accent */
.c101-section-title-accent { color: var(--c101-red); }

/* ---------- 7. CONFLICT AUDIT OVERRIDES (0-D findings) -------- */

/* 0-D-1: card-hover flattening — keep the class to avoid breaking
   existing markup references, but remove the translateY + heavy shadow. */
.card-hover { transition: opacity 120ms ease !important; }
.card-hover:hover {
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.85;
}

/* 0-D-4: Override hardcoded input/select focus pink (public pages only).
   Admin pages keep Tailwind-native focus so they can use gray/info colors
   without fighting this !important override. */
body:not(.admin-page) input:focus,
body:not(.admin-page) select:focus,
body:not(.admin-page) textarea:focus {
  border-color: var(--c101-orange) !important;
  box-shadow: 0 0 0 3px rgba(255, 93, 0, 0.2) !important;
  outline: none !important;
}

/* 0-D-5: Semantic state classes (prevent bg-blue-500 reskin from
   stealing meaning on status badges for "ready" / "upcoming" lessons) */
.c101-state-upcoming { background: rgba(100,116,139,0.12); color: #475569; }
.c101-state-ready    { background: rgba(100,116,139,0.16); color: #334155; }
.c101-state-live     { background: var(--c101-red); color: #fff; }
.c101-state-ended    { background: rgba(0,0,0,0.03); color: #64748B; }

/* 0-D-6: max-w-7xl global override — migrate 1280px → 1232px on public
   pages. Admin pages get <body class="admin-page"> to preserve width. */
body:not(.admin-page) .max-w-7xl {
  max-width: 1232px !important;
}

/* 0-D-7: Hero carousel retention — gh-* utilities are not color-related
   so no interaction with reskin rules. No override needed here. */