/* =============================================================
 * 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");
/* Phase Fix-D: 썸네일 세부조정용 한국어 웹폰트 */
@import url("https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gowun+Dodum&family=Jua&family=Noto+Serif+KR:wght@500;700&display=swap");

/* ---------- 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 -------------------- */

/* Phase Fix-D: 썸네일 메타 오버레이 — cqw (container query units) 기준점 */
.thumb-meta-overlay {
  container-type: inline-size;
}

/* 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. */

/* ---------- 8. PDP PRIMITIVES (Class101-fidelity, isC101 only) ---------- */
/* PDP /class/:slug/101test 라우트 전용. 기존 운영 페이지 영향 없음 — 모든 클래스가
   .c101-pdp-* 로 스코프되어 있고, body[data-c101-preview="1"] 시에만 마크업이 사용됨. */

/* 8-1) Layout shell — replaces inline :root --cta-orange/--sidebar-width/etc */
.c101-pdp-wrap   { max-width: 1232px; margin: 0 auto; padding: 0 40px; }
.c101-pdp-row    { display: flex; gap: 60px; align-items: flex-start; }
.c101-pdp-main   { flex: 1; min-width: 0; max-width: 772px; }
.c101-pdp-aside  { width: 400px; flex-shrink: 0; }
@media (max-width: 767px) {
  .c101-pdp-wrap  { padding: 0 16px; }
  .c101-pdp-row   { flex-direction: column; gap: 24px; }
  .c101-pdp-aside { width: 100%; }
  .c101-pdp-main  { max-width: 100%; }
}

/* 8-2) Hero carousel — replaces inline .hero-carousel-wrap/.hero-carousel/etc */
.c101-pdp-hero          { position: relative; overflow: hidden; border-radius: var(--c101-radius-lg);
                          background: var(--c101-surface-2); user-select: none; max-width: 728px; margin: 0 auto; }
.c101-pdp-hero.has-peek { max-width: 100%; }
.c101-pdp-hero-track    { display: flex; gap: 12px; transition: transform .3s ease; will-change: transform; justify-content: center; }
.c101-pdp-hero-track.has-peek { justify-content: flex-start;
                                padding-left: calc((100% - 728px) / 2);
                                padding-right: calc((100% - 728px) / 2); }
.c101-pdp-hero-slide    { flex: 0 0 728px; max-width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.c101-pdp-hero-slide > img,
.c101-pdp-hero-slide > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.c101-pdp-hero-nav      { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
                          background: #fff; border: 1px solid var(--c101-divider); border-radius: 9999px;
                          display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10;
                          box-shadow: 0 2px 8px rgba(0,0,0,.08); color: var(--c101-text-primary); }
.c101-pdp-hero-nav:hover { background: var(--c101-surface-2); }
.c101-pdp-hero-nav.prev  { left: 12px; }
.c101-pdp-hero-nav.next  { right: 12px; }
.c101-pdp-hero-nav:disabled { opacity: .35; pointer-events: none; }
.c101-pdp-hero-counter  { position: absolute; top: 12px; right: 12px;
                          background: rgba(0,0,0,0.72);
                          color: #fff; font-size: 12px; font-weight: 700;
                          line-height: 1; padding: 6px 12px;
                          border-radius: var(--c101-radius-pill); z-index: 10;
                          pointer-events: none; letter-spacing: 0.02em; }
@media (max-width: 820px) {
  .c101-pdp-hero        { border-radius: 0; max-width: 100%; }
  .c101-pdp-hero-nav    { display: none; }
  .c101-pdp-hero-track,
  .c101-pdp-hero-track.has-peek {
    justify-content: flex-start; padding-left: 0; padding-right: 0;
  }
  .c101-pdp-hero-slide  { flex: 0 0 100%; }
}

/* 8-3) Sticky tab nav — replaces inline .tab-link */
.c101-pdp-tabs   { background: #fff; border-bottom: 1px solid var(--c101-divider);
                   position: sticky; z-index: 40; top: 72px; }
.c101-pdp-tab    { padding: 0; height: 47px; display: inline-flex; align-items: center;
                   font-size: 15px; font-weight: 500; color: var(--c101-text-tertiary);
                   border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
                   text-decoration: none; white-space: nowrap; }
.c101-pdp-tab:hover  { color: var(--c101-text-primary); }
.c101-pdp-tab.active { color: var(--c101-red); font-weight: 700; border-bottom-color: var(--c101-red); }

/* 8-4) Detail card — replaces bg-white rounded-2xl border-gray-100 p-6 */
.c101-pdp-card   { background: #fff; border: 1px solid var(--c101-divider);
                   border-radius: var(--c101-radius-lg); padding: 24px; }
.c101-pdp-card-h { font-size: 18px; font-weight: 700; color: var(--c101-text-primary);
                   margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }

/* 8-5) Curriculum chapter & lesson row */
.c101-pdp-chapter        { border: 1px solid var(--c101-divider); border-radius: var(--c101-radius-md);
                           overflow: hidden; }
.c101-pdp-chapter-head   { width: 100%; display: flex; align-items: center; justify-content: space-between;
                           padding: 14px 16px; background: var(--c101-surface-2); cursor: pointer;
                           transition: background .12s; border: 0; }
.c101-pdp-chapter-head:hover { background: rgba(0,0,0,0.05); }
.c101-pdp-lesson-row     { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
                           border-top: 1px solid var(--c101-divider); cursor: pointer;
                           transition: background .12s; }
.c101-pdp-lesson-row:hover { background: rgba(255,93,0,0.04); }
.c101-pdp-lesson-num     { font-size: 12px; color: var(--c101-text-tertiary); width: 20px; text-align: center; }

/* 8-6) Sidebar card */
.c101-pdp-sidebar          { background: #fff; border: 1px solid var(--c101-divider);
                             border-radius: var(--c101-radius-lg); padding: 20px;
                             box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.c101-pdp-price            { display: flex; align-items: baseline; gap: 8px; }
.c101-pdp-price-discount   { font-size: 22px; font-weight: 800; color: var(--c101-orange); }
.c101-pdp-price-now        { font-size: 26px; font-weight: 800; color: var(--c101-text-primary); }
.c101-pdp-price-was        { font-size: 13px; color: var(--c101-text-tertiary); text-decoration: line-through; margin: 0; }
.c101-pdp-progress         { flex: 1; background: var(--c101-surface-2);
                             border-radius: 9999px; height: 6px; overflow: hidden; }
.c101-pdp-progress-bar     { background: var(--c101-orange); height: 100%; border-radius: 9999px;
                             transition: width .3s ease; }
.c101-pdp-pay-tabs         { display: flex; gap: 4px; padding: 4px; background: var(--c101-surface-2);
                             border-radius: var(--c101-radius-md); margin-bottom: 12px; }
.c101-pdp-pay-tab          { flex: 1; padding: 8px; font-size: 13px; font-weight: 600;
                             border-radius: var(--c101-radius-sm); background: transparent;
                             color: var(--c101-text-tertiary); border: 0; cursor: pointer;
                             transition: all .12s; }
.c101-pdp-pay-tab.active   { background: #fff; color: var(--c101-text-primary);
                             box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.c101-pdp-cta              { width: 100%; height: 52px; font-size: 16px; font-weight: 700;
                             border-radius: var(--c101-radius-md); margin-bottom: 8px;
                             background: var(--c101-orange); color: #fff; border: 0; cursor: pointer;
                             transition: background .12s;
                             display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.c101-pdp-cta:hover        { background: var(--c101-orange-hover); }
.c101-pdp-cta-ghost        { width: 100%; height: 44px; font-size: 14px; font-weight: 600;
                             border-radius: var(--c101-radius-md); background: #fff;
                             color: var(--c101-text-primary); border: 1px solid var(--c101-divider);
                             cursor: pointer; transition: background .12s;
                             display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.c101-pdp-cta-ghost:hover  { background: var(--c101-surface-2); }
.c101-pdp-meta-grid        { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
                             padding-top: 16px; margin-top: 16px;
                             border-top: 1px solid var(--c101-divider); text-align: center; }
.c101-pdp-meta-grid p:first-child { font-size: 12px; color: var(--c101-text-tertiary); margin: 0 0 4px; }
.c101-pdp-meta-grid p:last-child  { font-size: 14px; font-weight: 700; color: var(--c101-text-primary); margin: 0; }

/* 8-7) Review distribution — 디자인 철학 박스 카드 강조 */
.c101-pdp-review-summary  {
  display: flex; gap: 32px; align-items: center;
  padding: 24px;
  background: var(--c101-fill-weak-on-light);
  border-radius: var(--c101-radius-lg);
  margin-bottom: 16px;
}
.c101-pdp-review-score    {
  font-size: 56px; font-weight: 900; line-height: 1;
  color: var(--c101-text-primary); letter-spacing: -0.02em;
}
.c101-pdp-review-stars    {
  color: var(--c101-yellow); font-size: 18px;
  margin-top: 6px; letter-spacing: 2px; line-height: 1;
}
.c101-pdp-review-bars     { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.c101-pdp-review-bar      { display: flex; align-items: center; gap: 8px;
                            font-size: 12px; color: var(--c101-text-tertiary); }
.c101-pdp-review-bar-fill { flex: 1; height: 8px; background: var(--c101-surface-2);
                            border-radius: 9999px; overflow: hidden; }
.c101-pdp-review-bar-fill > span { display: block; height: 100%; background: var(--c101-yellow); border-radius: 9999px; }

/* 8-8) Section anchor offset */
.c101-pdp-anchor { scroll-margin-top: calc(72px + 47px + 16px); }

/* 8-9) Scroll hide */
.c101-scroll-hide::-webkit-scrollbar { display: none; }
.c101-scroll-hide { scrollbar-width: none; }

/* 8-10) Review/bio clamp utilities (PDP only) */
.c101-pdp-review-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
                         overflow: hidden; }
.c101-pdp-bio-clamp    { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
                         overflow: hidden; }

/* ---------- 9. PDP DARK SKIN (Phase D — dark-only) ---------------- */
/* /class/:slug 강의 상세 페이지는 다크 전용. body bg 는 SSR 측 bg-[#0C0C0C] 로 처리.
   GNB/배너/푸터/모달 등 페이지 외부는 라이트 유지. PDP primitives (.c101-pdp-*)
   원본 정의(섹션 5)는 라이트값으로 남아있으나, 아래 동일 셀렉터 룰이 source
   order 상 뒤에 위치해 다크값으로 덮어씀(specificity 동일). */

/* 9-1) Hero / nav (counter 는 Section 5 강화안 그대로 유지 — 어떤 이미지 위에서도 가독성 보장) */
.c101-pdp-hero          { background: var(--c101-surface-3); }
.c101-pdp-hero-nav      { background: var(--c101-surface-3);
                          border-color: var(--c101-divider-d);
                          color: var(--c101-text-primary-d); }
.c101-pdp-hero-nav:hover { background: rgba(255,255,255,0.12); }

/* 9-2) Cards / chapters / lessons */
.c101-pdp-card,
.c101-pdp-sidebar {
  background: var(--c101-surface-3);
  border-color: var(--c101-divider-d);
  color: var(--c101-text-primary-d);
}
.c101-pdp-card-h        { color: var(--c101-text-primary-d); }
.c101-pdp-chapter       { border-color: var(--c101-divider-d); }
.c101-pdp-chapter-head  { background: rgba(255,255,255,0.04); color: var(--c101-text-primary-d); }
.c101-pdp-chapter-head:hover { background: rgba(255,255,255,0.08); }
.c101-pdp-lesson-row    { border-top-color: var(--c101-divider-d); color: var(--c101-text-primary-d); }
.c101-pdp-lesson-row:hover { background: rgba(255,93,0,0.08); }
.c101-pdp-lesson-num    { color: var(--c101-text-tertiary-d); }

/* 9-3) Tabs */
.c101-pdp-tabs {
  background: var(--c101-bg);
  border-bottom-color: var(--c101-divider-d);
}
.c101-pdp-tab           { color: var(--c101-text-tertiary-d); }
.c101-pdp-tab:hover     { color: var(--c101-text-primary-d); }
.c101-pdp-tab.active    { color: var(--c101-red); border-bottom-color: var(--c101-red); }

/* 9-4) Sidebar — price / progress / pay tabs / CTA / meta */
.c101-pdp-price-now     { color: var(--c101-text-primary-d); }
.c101-pdp-price-was     { color: var(--c101-text-tertiary-d); }
.c101-pdp-progress      { background: rgba(255,255,255,0.08); }
.c101-pdp-pay-tabs      { background: rgba(255,255,255,0.04); }
.c101-pdp-pay-tab       { color: var(--c101-text-tertiary-d); }
.c101-pdp-pay-tab.active {
  background: var(--c101-surface-3); color: var(--c101-text-primary-d); box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.c101-pdp-cta-ghost     {
  background: var(--c101-surface-3); color: var(--c101-text-primary-d); border-color: var(--c101-divider-d);
}
.c101-pdp-cta-ghost:hover { background: rgba(255,255,255,0.08); }
.c101-pdp-meta-grid     { border-top-color: var(--c101-divider-d); }
.c101-pdp-meta-grid p:first-child { color: var(--c101-text-tertiary-d); }
.c101-pdp-meta-grid p:last-child  { color: var(--c101-text-primary-d); }

/* 9-5) Review distribution — 다크 박스 배경 */
.c101-pdp-review-summary  {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--c101-divider-d);
}
.c101-pdp-review-score    { color: var(--c101-text-primary-d); }
.c101-pdp-review-bar      { color: var(--c101-text-tertiary-d); }
.c101-pdp-review-bar-fill { background: rgba(255,255,255,0.08); }

/* 9-6) Tailwind 라이트 전용 텍스트 — PDP 본문 전체 스코프에서 다크 보정 */
.c101-pdp-wrap .text-dark-900,
.c101-pdp-wrap .text-dark-800,
.c101-pdp-wrap .text-dark-700,
.c101-pdp-wrap .text-black {
  color: var(--c101-text-primary-d);
}
.c101-pdp-wrap .text-gray-700,
.c101-pdp-wrap .text-gray-600 {
  color: var(--c101-text-secondary-d);
}
.c101-pdp-wrap .text-gray-500,
.c101-pdp-wrap .text-gray-400,
.c101-pdp-wrap .text-gray-300 {
  color: var(--c101-text-tertiary-d);
}

/* 9-7) 본문 외 직접 보이는 텍스트 (breadcrumb, 제목, 부제목) */
.c101-pdp-main h1,
.c101-pdp-main > nav { color: var(--c101-text-primary-d); }
.c101-pdp-main > p   { color: var(--c101-text-tertiary-d); }

/* 9-8) Pill / state 다크 보정 */
.c101-pdp-wrap .c101-pill {
  background: rgba(255,255,255,0.08); color: var(--c101-text-primary-d);
}
.c101-pdp-wrap .c101-state-upcoming {
  background: rgba(148,163,184,0.16); color: rgba(255,255,255,0.72);
}
.c101-pdp-wrap .c101-state-ready {
  background: rgba(148,163,184,0.24); color: rgba(255,255,255,0.85);
}
.c101-pdp-wrap .c101-state-ended {
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5);
}

/* 9-9) 입력 필드 */
.c101-pdp-card input,
.c101-pdp-card textarea,
.c101-pdp-card select {
  background: rgba(255,255,255,0.04);
  color: var(--c101-text-primary-d);
  border-color: var(--c101-divider-d);
}
.c101-pdp-card input::placeholder,
.c101-pdp-card textarea::placeholder {
  color: var(--c101-text-tertiary-d);
}

/* 9-10) PDP 본문 내 라이트 배경/보더 — 다크 토큰으로 리스킨 */
.c101-pdp-wrap .bg-white {
  background-color: var(--c101-surface-3);
}
.c101-pdp-wrap .bg-gray-50,
.c101-pdp-wrap .bg-gray-100 {
  background-color: rgba(255,255,255,0.04);
}
.c101-pdp-wrap .border-gray-100,
.c101-pdp-wrap .border-gray-200,
.c101-pdp-wrap .border-gray-300 {
  border-color: var(--c101-divider-d);
}
/* 9-10b) c101-tokens 라이트 surface (#F3F3F3) 도 다크로 리스킨 — Hero 강사 카드,
   사이드바 미니 카드, 라이브 일정 박스 등 PDP 본문 곳곳에서 사용. */
.c101-pdp-wrap .bg-c101-surface,
.c101-pdp-wrap .bg-c101-surface-2 {
  background-color: var(--c101-surface-3);
}

/* 9-11) PDP 본문 내 hover 라이트 보정 (탭/버튼/링크) */
.c101-pdp-wrap .hover\:text-dark-900:hover,
.c101-pdp-wrap .hover\:text-dark-800:hover {
  color: var(--c101-text-primary-d);
}
.c101-pdp-wrap .hover\:bg-gray-50:hover,
.c101-pdp-wrap .hover\:bg-gray-100:hover,
.c101-pdp-wrap .hover\:bg-c101-surface:hover {
  background-color: rgba(255,255,255,0.06);
}

/* 9-12) 향후 라이트 잔재 발견 시 이 블록에 추가. PDP 는 다크 전용. */

/* 9-13) c101 ink 토큰 (#0C0C0C 검정) → PDP 본문 안에서는 흰색으로 리스킨.
   Tailwind config 의 c101.ink = #0C0C0C 가 다크 BG 위에서 안 보이는 것을 보정.
   적용처: Hero 강사 카드, 사이드바 강사·h2 제목, 평점 숫자, 리뷰 카드, 챕터 헤더,
   브레드크럼 현재 페이지명 등. */
.c101-pdp-wrap .text-c101-ink,
.c101-pdp-wrap .hover\:text-c101-ink:hover {
  color: var(--c101-text-primary-d);
}

/* 9-14) "오픈 기념가" 등 promo 칩 — 라이트 cream/amber → 다크 친화 yellow-soft */
.c101-pdp-wrap .c101-pdp-title-chip.promo {
  background: rgba(250, 204, 21, 0.12);
  color: var(--c101-yellow);
}

/* 9-15) 비교 카드 (c101-pdp-rec-*) 다크 리스킨 — Section 10-9 의 직접 CSS
   (background: #fff, color: text-primary 검정) 가 Section 9 의 Tailwind 셀렉터로
   안 잡히기 때문에 별도 명시 오버라이드 필요. */
.c101-pdp-wrap .c101-pdp-rec-card {
  background: var(--c101-surface-3);
  border-color: var(--c101-divider-d);
}
.c101-pdp-wrap .c101-pdp-rec-card:hover {
  background: rgba(255,255,255,0.04);
  box-shadow: 0 4px 16px rgba(0,0,0,0.32);
}
.c101-pdp-wrap .c101-pdp-rec-card-thumb {
  background: rgba(255,255,255,0.06);
}
.c101-pdp-wrap .c101-pdp-rec-card-title,
.c101-pdp-wrap .c101-pdp-rec-card-stats b {
  color: var(--c101-text-primary-d);
}
.c101-pdp-wrap .c101-pdp-rec-card-author,
.c101-pdp-wrap .c101-pdp-rec-card-stats span {
  color: var(--c101-text-tertiary-d);
}
.c101-pdp-wrap .c101-pdp-rec-card-rank {
  color: var(--c101-yellow);
}

/* ---------- 10. AFTER-BOLD PDP MARKETING PRIMITIVES (Phase E) ---------- */
/* claude_design/class101 inner design/screens/after-bold.jsx 시안 1:1.
   /class/:slug/101test 라우트 전용. 모든 클래스 .c101-pdp-* 스코프. */

/* 10-1) Top promo ticker bar (검정 배경 + 노랑 숫자 박스) */
.c101-pdp-promo-bar {
  background: #0F0F0F; color: #fff;
  padding: 10px 32px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 13px; font-weight: 600;
}
.c101-pdp-promo-bar[data-expired="1"] { display: none; }
.c101-pdp-promo-ticker {
  display: inline-flex; gap: 4px; align-items: center;
  font-variant-numeric: tabular-nums; font-weight: 800;
}
.c101-pdp-promo-ticker > span.tick {
  background: #1F1F1F; color: #fff;
  padding: 2px 6px; border-radius: 4px; font-size: 12px;
}

/* 10-2) Hero overlay badges */
.c101-pdp-hero-badges {
  position: absolute; top: 16px; left: 16px;
  display: flex; gap: 6px; z-index: 11;
}
.c101-pdp-hero-badge {
  font-size: 11px; font-weight: 800;
  padding: 4px 10px; border-radius: 6px;
}
.c101-pdp-hero-badge.live    { background: var(--c101-red); color: #fff; }
.c101-pdp-hero-badge.cat     { background: rgba(0,0,0,0.7); color: #fff; }
.c101-pdp-hero-badge.rank    { background: var(--c101-yellow); color: #0C0C0C; }
.c101-pdp-hero-preview {
  position: absolute; bottom: 16px; right: 16px;
  background: rgba(0,0,0,0.7); color: #fff;
  padding: 6px 12px; border-radius: 9999px;
  font-size: 12px; font-weight: 700; z-index: 11;
}

/* 10-3) Title chips row (BEST · 오픈기념가 · 카테고리) */
.c101-pdp-title-chips {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.c101-pdp-title-chip {
  font-size: 11px; font-weight: 800;
  padding: 4px 10px; border-radius: 6px;
  white-space: nowrap;
}
.c101-pdp-title-chip.best   { background: var(--c101-yellow); color: #0C0C0C; }
.c101-pdp-title-chip.promo  { background: #FFFBEB; color: #A16207; }
.c101-pdp-title-chip.muted  { background: transparent; color: var(--c101-text-tertiary); padding: 4px 0; }

/* 10-4) Highlight underline on H1 */
.c101-pdp-h1-mark {
  background: linear-gradient(180deg, transparent 60%, #FFE066 60%);
  padding: 0 2px;
}

/* 10-5) "이런 걸 배울 거예요" 2x2 체크 그리드 */
.c101-pdp-learn-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 600px) {
  .c101-pdp-learn-grid { grid-template-columns: 1fr; }
}
.c101-pdp-learn-item {
  display: flex; gap: 12px; padding: 16px;
  background: var(--c101-surface-2); border-radius: 10px;
}
.c101-pdp-learn-check {
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--c101-yellow); color: #0C0C0C;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; flex-shrink: 0; font-size: 14px;
}
.c101-pdp-learn-title { font-weight: 700; color: var(--c101-text-primary); margin: 0 0 4px; font-size: 14px; }
.c101-pdp-learn-desc  { font-size: 13px; color: var(--c101-text-tertiary); margin: 0; line-height: 1.5; }

/* 10-6) Intro hero quote (검정 배경 인용 카드) */
.c101-pdp-intro-hero {
  background: #0F0F0F; color: #fff; border-radius: 12px;
  padding: 28px; margin-bottom: 20px; text-align: center;
}
.c101-pdp-intro-hero-q   { font-size: 14px; opacity: .7; margin: 0 0 8px; }
.c101-pdp-intro-hero-a   { font-size: 22px; font-weight: 800; line-height: 1.4; margin: 0; }
.c101-pdp-intro-hero-a em { color: var(--c101-yellow); font-style: normal; }

/* 10-7) Audience grid (3-칸) */
.c101-pdp-audience-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  .c101-pdp-audience-grid { grid-template-columns: 1fr; }
}
.c101-pdp-audience-card {
  background: #FFFBEB; border-radius: 10px;
  padding: 16px; text-align: center;
}
.c101-pdp-audience-icon  { font-size: 28px; line-height: 1; margin-bottom: 6px; }
.c101-pdp-audience-label { font-weight: 700; margin: 6px 0 4px; color: var(--c101-text-primary); font-size: 14px; }
.c101-pdp-audience-desc  { font-size: 12px; color: rgba(0,0,0,0.65); margin: 0; }

/* 10-8) Prep grid + 노랑 체크리스트 줄 */
.c101-pdp-prep-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
}
@media (max-width: 600px) {
  .c101-pdp-prep-grid { grid-template-columns: 1fr; }
}
.c101-pdp-prep-card {
  background: var(--c101-surface-2); border-radius: 10px;
  padding: 16px; text-align: center;
}
.c101-pdp-prep-icon  { font-size: 32px; line-height: 1; }
.c101-pdp-prep-label { font-weight: 700; margin: 8px 0 2px; color: var(--c101-text-primary); font-size: 14px; }
.c101-pdp-prep-note  { font-size: 12px; color: var(--c101-text-tertiary); margin: 0; }
.c101-pdp-prep-checklist {
  margin-top: 16px; padding: 16px;
  background: #FFFBEB; border: 1px solid var(--c101-yellow);
  border-radius: 10px;
  font-size: 13px; color: rgba(0,0,0,0.85);
  line-height: 1.6;
}

/* 10-9) 비교 카드 4-칸 슬라이더 */
.c101-pdp-rec-slider-4 {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 900px) {
  .c101-pdp-rec-slider-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .c101-pdp-rec-slider-4 { grid-template-columns: 1fr; }
}
.c101-pdp-rec-card {
  border: 1px solid var(--c101-divider); border-radius: 12px; overflow: hidden;
  background: #fff; text-decoration: none; color: inherit;
  transition: transform .12s, box-shadow .12s;
  display: flex; flex-direction: column;
}
.c101-pdp-rec-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.c101-pdp-rec-card-thumb {
  height: 110px; background: var(--c101-surface-2);
  position: relative; overflow: hidden;
}
.c101-pdp-rec-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c101-pdp-rec-card-tag {
  position: absolute; top: 8px; left: 8px;
  background: var(--c101-red); color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 2px 6px; border-radius: 4px;
}
.c101-pdp-rec-card-body { padding: 12px; }
.c101-pdp-rec-card-rank { font-size: 10px; color: #A16207; font-weight: 800; margin: 0 0 4px; }
.c101-pdp-rec-card-title { font-weight: 700; font-size: 13px; line-height: 1.3; margin: 0; color: var(--c101-text-primary); }
.c101-pdp-rec-card-author { font-size: 11px; color: var(--c101-text-tertiary); margin: 4px 0 0; }
.c101-pdp-rec-card-stats { font-size: 11px; margin: 4px 0 0; }
.c101-pdp-rec-card-stats b { color: var(--c101-text-primary); }
.c101-pdp-rec-card-stats span { color: var(--c101-text-tertiary); }

/* 10-10) Creator quote box */
.c101-pdp-creator-badges {
  display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;
}
.c101-pdp-creator-badge {
  background: var(--c101-surface-2); font-size: 11px;
  padding: 3px 8px; border-radius: 4px; font-weight: 600;
  color: var(--c101-text-primary);
}
.c101-pdp-creator-quote {
  background: var(--c101-surface-2); border-radius: 12px;
  padding: 24px; color: rgba(0,0,0,0.78); line-height: 1.8;
  margin-top: 20px;
}
.c101-pdp-creator-quote::before {
  content: "\201C"; display: block;
  font-size: 32px; color: var(--c101-yellow); line-height: 1; margin-bottom: 8px;
}

/* 10-11) Review event box (노랑 dashed) */
.c101-pdp-review-event {
  margin-top: 20px; padding: 32px; text-align: center;
  border: 2px dashed var(--c101-yellow); border-radius: 12px;
  background: #FFFBEB;
}
.c101-pdp-review-event-h { font-size: 14px; font-weight: 800; margin: 0 0 4px; color: var(--c101-text-primary); }
.c101-pdp-review-event-d { font-size: 13px; color: rgba(0,0,0,0.78); margin: 0; }

/* 10-12) Sidebar timer band */
.c101-pdp-side-timer {
  background: #0F0F0F; color: #fff;
  padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between;
  margin: -20px -20px 16px;
  border-radius: var(--c101-radius-lg) var(--c101-radius-lg) 0 0;
}
.c101-pdp-side-timer[data-expired="1"] { display: none; }
.c101-pdp-side-timer-label { font-size: 12px; font-weight: 700; }
.c101-pdp-side-timer .c101-pdp-promo-ticker > span.tick {
  background: var(--c101-yellow); color: #0C0C0C;
}
.c101-pdp-side-timer .c101-pdp-promo-ticker > span.sep { color: var(--c101-yellow); }

/* 10-13) Coupon card (노랑 dashed) */
.c101-pdp-coupon {
  background: #FFF3B0; border: 1px dashed #A16207;
  border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
}
.c101-pdp-coupon-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.c101-pdp-coupon-label { font-size: 11px; color: #A16207; font-weight: 800; margin: 0; }
.c101-pdp-coupon-value { font-size: 16px; font-weight: 900; margin: 2px 0 0; color: var(--c101-text-primary); }
.c101-pdp-coupon-claim {
  background: #0F0F0F; color: #fff; border: 0;
  border-radius: 8px; padding: 8px 14px;
  font-size: 12px; font-weight: 800; cursor: pointer;
}
.c101-pdp-coupon-claim:hover { background: #1F1F1F; }
.c101-pdp-coupon-final { font-size: 11px; color: #A16207; margin: 8px 0 0; }
.c101-pdp-coupon-final b { color: var(--c101-text-primary); }

/* 10-14) Progress bar danger gradient (정원 마감 임박) */
.c101-pdp-progress-bar.danger {
  background: linear-gradient(90deg, var(--c101-yellow), var(--c101-red));
}

/* 10-15) Admin FAB (PDP 우상단 플로팅 편집 버튼) */
.c101-admin-fab {
  position: fixed; top: 80px; right: 24px; z-index: 100;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: #0F0F0F; color: #fff;
  border-radius: 9999px; font-size: 14px; font-weight: 700;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  text-decoration: none;
  transition: transform .12s, background .12s;
}
.c101-admin-fab:hover { background: #2A2A2A; transform: translateY(-1px); color: #fff; }
.c101-admin-fab i { font-size: 13px; }
@media (max-width: 767px) {
  .c101-admin-fab {
    top: auto;
    bottom: calc(86px + env(safe-area-inset-bottom));
    right: 16px;
  }
}

/* 10-16) Editor split layout (좌·폼/우·프리뷰) — /admin/classes/:id/edit */
.c101-editor-shell {
  display: grid; grid-template-columns: 1fr 1fr;
  height: calc(100vh - 56px);
  overflow: hidden;
}
@media (max-width: 1100px) {
  .c101-editor-shell { grid-template-columns: 1fr; height: auto; }
}
.c101-editor-form-pane {
  overflow-y: auto; padding: 24px 28px;
  border-right: 1px solid var(--c101-divider);
  background: #FFFFFF;
}
.c101-editor-preview-pane {
  background: #0A0A0A; overflow: hidden;
  display: flex; flex-direction: column;
}
.c101-editor-preview-head {
  background: #141414; border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 10px 16px; display: flex; align-items: center; gap: 8px;
  flex-shrink: 0; color: rgba(255,255,255,0.7); font-size: 11px; font-weight: 600;
}
.c101-editor-preview-iframe {
  flex: 1; width: 100%; border: 0; background: #FAFAFA;
}
.c101-editor-section {
  padding-bottom: 12px; margin-bottom: 24px;
  border-bottom: 1px solid var(--c101-divider);
}
.c101-editor-section-h {
  font-size: 16px; font-weight: 800; margin: 0 0 4px;
  color: var(--c101-text-primary); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.c101-editor-section-tbl {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; color: #0EA5E9; background: #E0F2FE;
  padding: 2px 7px; border-radius: 4px; font-weight: 700;
}
.c101-editor-section-desc { font-size: 12px; color: var(--c101-text-tertiary); margin: 0 0 16px; }
.c101-editor-field { margin-bottom: 16px; }
.c101-editor-label {
  display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; flex-wrap: wrap;
  font-size: 13px; font-weight: 700; color: var(--c101-text-primary);
}
.c101-editor-coltag {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; color: #6366F1; background: #EEF2FF;
  padding: 2px 6px; border-radius: 4px; font-weight: 600;
}
.c101-editor-required { color: var(--c101-red); font-size: 11px; }
.c101-editor-hint { font-size: 11px; color: var(--c101-text-tertiary); font-weight: 400; }
.c101-editor-input {
  width: 100%; padding: 9px 12px;
  border: 1px solid #D4D4D4; border-radius: 6px;
  font-size: 13px; color: var(--c101-text-primary);
  background: #fff; outline: none;
  transition: border-color .15s; box-sizing: border-box;
}
.c101-editor-input:focus { border-color: #0F0F0F; }
.c101-editor-array-row {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 12px; background: #FAFAFA;
  border-radius: 6px; border: 1px solid var(--c101-divider);
  margin-bottom: 8px;
}
.c101-editor-array-row > .num {
  font-size: 11px; color: var(--c101-text-tertiary);
  font-weight: 700; margin-top: 8px; width: 18px; flex-shrink: 0;
}
.c101-editor-array-row > .body { flex: 1; }
.c101-editor-array-row > .del {
  background: transparent; border: 0;
  color: var(--c101-text-tertiary); cursor: pointer;
  font-size: 14px; padding: 6px;
}
.c101-editor-array-add {
  width: 100%; padding: 10px 12px;
  border: 1px dashed #D4D4D4; background: #FFFFFF;
  color: var(--c101-text-tertiary); border-radius: 6px;
  font-size: 13px; cursor: pointer; font-weight: 600;
}
.c101-editor-array-add:hover { background: #FAFAFA; color: var(--c101-text-primary); }
.c101-editor-toolbar {
  background: #FFFFFF; border-bottom: 1px solid var(--c101-divider);
  padding: 10px 24px; display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.c101-editor-toolbar .spacer { flex: 1; }
.c101-editor-btn {
  padding: 8px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid var(--c101-divider);
  background: #fff; color: var(--c101-text-primary); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.c101-editor-btn:hover { background: #FAFAFA; }
.c101-editor-btn.primary { background: #0F0F0F; color: #fff; border-color: #0F0F0F; }
.c101-editor-btn.primary:hover { background: #2A2A2A; }
.c101-editor-btn.primary[disabled] { background: #D4D4D4; border-color: #D4D4D4; cursor: not-allowed; }
.c101-editor-warn {
  background: #FEF3C7; border-bottom: 1px solid #FDE68A;
  padding: 8px 24px; font-size: 12px; color: #78350F;
  display: flex; align-items: center; gap: 8px;
}
.c101-editor-warn code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: rgba(120,53,15,0.1); padding: 2px 6px; border-radius: 3px;
}
.c101-editor-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #0F0F0F; color: #fff; padding: 12px 20px;
  border-radius: 8px; font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2); z-index: 200;
  opacity: 0; transition: opacity .2s;
  pointer-events: none;
}
.c101-editor-toast.show { opacity: 1; }

/* ============================================================
 * 11. DARK CORRECTIONS — After-Bold PDP + Tailwind tints + Editor
 * ============================================================
 * Plan: /Users/arbeit/.claude/plans/witty-moseying-hellman.md
 *
 * §9 가 베이스 PDP primitive 를 다크화했지만, §10 (After-Bold 마케팅)
 * 과 §10-16 (Editor) 은 라이트 정의를 그대로 유지하고 있다.
 * 또한 PDP 본문이 Tailwind color-{50,100,200} 유틸리티를 직접 쓰는
 * 영역이 다크 캔버스에서 박혀 보인다. 이 섹션은 그 모든 잔존
 * 라이트 색을 다크 토큰으로 환원한다.
 * 스코프 분리:
 *   §11-A/B/C → .c101-pdp-wrap (학생용 PDP 만)
 *   §11-D     → body.admin-class-editor (에디터 전용 — admin-page 공유 X)
 * ============================================================ */

/* ---------- 11-A. After-Bold 마케팅 프리미티브 다크 보정 ---------- */
.c101-pdp-wrap .c101-pdp-audience-card {
  background: rgba(250,204,21,0.08);
  border: 1px solid rgba(250,204,21,0.18);
}
.c101-pdp-wrap .c101-pdp-audience-label { color: var(--c101-text-primary-d); }
.c101-pdp-wrap .c101-pdp-audience-desc  { color: var(--c101-text-secondary-d); }

.c101-pdp-wrap .c101-pdp-prep-card  { background: rgba(255,255,255,0.04); }
.c101-pdp-wrap .c101-pdp-prep-label { color: var(--c101-text-primary-d); }
.c101-pdp-wrap .c101-pdp-prep-note  { color: var(--c101-text-tertiary-d); }
.c101-pdp-wrap .c101-pdp-prep-checklist {
  background: rgba(250,204,21,0.08);
  border-color: rgba(250,204,21,0.5);
  color: var(--c101-text-secondary-d);
}

.c101-pdp-wrap .c101-pdp-rec-card {
  background: rgba(255,255,255,0.04);
  border-color: var(--c101-divider-d);
}
.c101-pdp-wrap .c101-pdp-rec-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.c101-pdp-wrap .c101-pdp-rec-card-thumb { background: rgba(255,255,255,0.06); }
.c101-pdp-wrap .c101-pdp-rec-card-title  { color: var(--c101-text-primary-d); }
.c101-pdp-wrap .c101-pdp-rec-card-author { color: var(--c101-text-tertiary-d); }
.c101-pdp-wrap .c101-pdp-rec-card-rank   { color: #F4D35E; }
.c101-pdp-wrap .c101-pdp-rec-card-stats b    { color: var(--c101-text-primary-d); }
.c101-pdp-wrap .c101-pdp-rec-card-stats span { color: var(--c101-text-tertiary-d); }

.c101-pdp-wrap .c101-pdp-creator-badge {
  background: rgba(255,255,255,0.08);
  color: var(--c101-text-primary-d);
}
.c101-pdp-wrap .c101-pdp-creator-quote {
  background: rgba(255,255,255,0.04);
  color: var(--c101-text-secondary-d);
}

.c101-pdp-wrap .c101-pdp-review-event {
  background: rgba(250,204,21,0.08);
}
.c101-pdp-wrap .c101-pdp-review-event-h { color: var(--c101-text-primary-d); }
.c101-pdp-wrap .c101-pdp-review-event-d { color: var(--c101-text-secondary-d); }

.c101-pdp-wrap .c101-pdp-coupon {
  background: rgba(250,204,21,0.12);
  border: 1px dashed rgba(250,204,21,0.6);
}
.c101-pdp-wrap .c101-pdp-coupon-label { color: #F4D35E; }
.c101-pdp-wrap .c101-pdp-coupon-value { color: var(--c101-text-primary-d); }
.c101-pdp-wrap .c101-pdp-coupon-final { color: #F4D35E; }
.c101-pdp-wrap .c101-pdp-coupon-final b { color: var(--c101-text-primary-d); }
.c101-pdp-wrap .c101-pdp-coupon-claim:hover {
  background: var(--c101-yellow); color: #0C0C0C;
}

.c101-pdp-wrap .c101-pdp-title-chip.promo {
  background: rgba(250,204,21,0.12);
  color: #F4D35E;
}
.c101-pdp-wrap .c101-pdp-title-chip.muted { color: var(--c101-text-tertiary-d); }

.c101-pdp-wrap .c101-pdp-learn-item  { background: rgba(255,255,255,0.04); }
.c101-pdp-wrap .c101-pdp-learn-title { color: var(--c101-text-primary-d); }
.c101-pdp-wrap .c101-pdp-learn-desc  { color: var(--c101-text-tertiary-d); }

/* ---------- 11-B. Tailwind 컬러 유틸리티(50/100/200) 다크 틴트 ---------- */
/* 동일 hue 유지 + 알파 틴트로 다크 표면 위에 자연스럽게 얹힘 */
.c101-pdp-wrap .bg-purple-50,
.c101-pdp-wrap .hover\:bg-purple-50:hover { background-color: rgba(168,85,247,0.10); }
.c101-pdp-wrap .bg-purple-100             { background-color: rgba(168,85,247,0.16); }
.c101-pdp-wrap .border-purple-200,
.c101-pdp-wrap .hover\:border-purple-300:hover { border-color: rgba(168,85,247,0.30); }
.c101-pdp-wrap .text-purple-500,
.c101-pdp-wrap .text-purple-600,
.c101-pdp-wrap .text-purple-700,
.c101-pdp-wrap .group-hover\:text-purple-700,
.c101-pdp-wrap .group-hover\:text-purple-400 { color: #C4A8FF; }

.c101-pdp-wrap .bg-red-50           { background-color: rgba(227,15,50,0.10); }
.c101-pdp-wrap .border-red-200      { border-color: rgba(227,15,50,0.30); }
.c101-pdp-wrap .text-red-400,
.c101-pdp-wrap .text-red-500,
.c101-pdp-wrap .text-red-600,
.c101-pdp-wrap .text-red-700        { color: #FF6B7A; }

.c101-pdp-wrap .bg-blue-50          { background-color: rgba(59,130,246,0.10); }
.c101-pdp-wrap .bg-blue-100         { background-color: rgba(59,130,246,0.16); }
.c101-pdp-wrap .border-blue-100,
.c101-pdp-wrap .border-blue-200     { border-color: rgba(59,130,246,0.30); }
.c101-pdp-wrap .text-blue-400,
.c101-pdp-wrap .text-blue-500,
.c101-pdp-wrap .text-blue-600,
.c101-pdp-wrap .text-blue-700,
.c101-pdp-wrap .text-blue-800       { color: #93C5FD; }

.c101-pdp-wrap .bg-green-100        { background-color: rgba(16,185,129,0.16); }
.c101-pdp-wrap .text-green-500,
.c101-pdp-wrap .text-green-600,
.c101-pdp-wrap .text-green-700      { color: #6EE7B7; }

.c101-pdp-wrap .bg-indigo-100       { background-color: rgba(99,102,241,0.16); }
.c101-pdp-wrap .text-indigo-500,
.c101-pdp-wrap .text-indigo-600,
.c101-pdp-wrap .text-indigo-700     { color: #A5B4FC; }

.c101-pdp-wrap .bg-amber-50,
.c101-pdp-wrap .bg-amber-100        { background-color: rgba(245,158,11,0.12); }
.c101-pdp-wrap .text-amber-500,
.c101-pdp-wrap .text-amber-600,
.c101-pdp-wrap .text-amber-700      { color: #FCD34D; }
.c101-pdp-wrap .text-yellow-400     { color: var(--c101-yellow); }

.c101-pdp-wrap .bg-gray-200,
.c101-pdp-wrap .bg-gray-300         { background-color: rgba(255,255,255,0.10); }
.c101-pdp-wrap .text-gray-200       { color: rgba(255,255,255,0.18); }

.c101-pdp-wrap .border-gray-50      { border-color: var(--c101-divider-d); }

/* ---------- 11-C. 미결제 비활성 버튼 명도 보강 ---------- */
/* 11-B 의 .bg-gray-300 + 기존 §9-6 의 .text-gray-500 조합으로 자동 처리됨.
   추가 룰 불필요. */

/* ---------- 11-D. 어드민 강의 등록/편집 폼 다크화 ---------- */
/* 스코프: body.admin-class-editor 전용 (admin-page 공유 X — 8곳 어드민에 영향 X) */
body.admin-class-editor {
  background: #0C0C0C !important;
  color: var(--c101-text-primary-d);
  color-scheme: dark;
}

body.admin-class-editor .c101-editor-toolbar {
  background: #141414;
  border-bottom-color: var(--c101-divider-d);
  color: var(--c101-text-primary-d);
}
body.admin-class-editor .c101-editor-toolbar strong { color: var(--c101-text-primary-d); }
body.admin-class-editor .c101-editor-toolbar [style*="color:#6B7280"],
body.admin-class-editor .c101-editor-toolbar [style*="color: #6B7280"] {
  color: var(--c101-text-tertiary-d) !important;
}
body.admin-class-editor .c101-editor-toolbar [style*="color:#374151"],
body.admin-class-editor .c101-editor-toolbar [style*="color: #374151"] {
  color: var(--c101-text-secondary-d) !important;
}
body.admin-class-editor #editorStatusDot[style*="background:#9CA3AF"],
body.admin-class-editor #editorStatusDot[style*="background: #9CA3AF"] {
  background: rgba(255,255,255,0.36) !important;
}

body.admin-class-editor .c101-editor-form-pane {
  background: #0C0C0C;
  border-right-color: var(--c101-divider-d);
}
body.admin-class-editor .c101-editor-section { border-bottom-color: var(--c101-divider-d); }
body.admin-class-editor .c101-editor-section-h    { color: var(--c101-text-primary-d); }
body.admin-class-editor .c101-editor-section-desc { color: var(--c101-text-tertiary-d); }
body.admin-class-editor .c101-editor-section-tbl {
  color: #93C5FD;
  background: rgba(14,165,233,0.16);
}
body.admin-class-editor .c101-editor-coltag {
  color: #A5B4FC;
  background: rgba(99,102,241,0.18);
}
body.admin-class-editor .c101-editor-label { color: var(--c101-text-primary-d); }
body.admin-class-editor .c101-editor-hint  { color: var(--c101-text-tertiary-d); }

body.admin-class-editor .c101-editor-input {
  border: 1px solid var(--c101-divider-d);
  background: rgba(255,255,255,0.04);
  color: var(--c101-text-primary-d);
}
body.admin-class-editor .c101-editor-input::placeholder { color: var(--c101-text-tertiary-d); }
body.admin-class-editor .c101-editor-input:focus {
  border-color: var(--c101-yellow);
  box-shadow: 0 0 0 2px rgba(250,204,21,0.18);
}
body.admin-class-editor select.c101-editor-input option {
  background: #202020;
  color: var(--c101-text-primary-d);
}

body.admin-class-editor .c101-editor-array-row {
  background: rgba(255,255,255,0.04);
  border-color: var(--c101-divider-d);
}
body.admin-class-editor .c101-editor-array-row > .num { color: var(--c101-text-tertiary-d); }
body.admin-class-editor .c101-editor-array-row > .del { color: var(--c101-text-tertiary-d); }
body.admin-class-editor .c101-editor-array-row > .del:hover { color: var(--c101-text-primary-d); }
body.admin-class-editor .c101-editor-array-add {
  background: transparent;
  border: 1px dashed var(--c101-divider-d);
  color: var(--c101-text-tertiary-d);
}
body.admin-class-editor .c101-editor-array-add:hover {
  background: rgba(255,255,255,0.04);
  color: var(--c101-text-primary-d);
}

body.admin-class-editor .c101-editor-btn {
  background: rgba(255,255,255,0.04);
  border-color: var(--c101-divider-d);
  color: var(--c101-text-primary-d);
}
body.admin-class-editor .c101-editor-btn:hover { background: rgba(255,255,255,0.08); }
body.admin-class-editor .c101-editor-btn.primary {
  background: var(--c101-yellow);
  color: #0C0C0C;
  border-color: var(--c101-yellow);
}
body.admin-class-editor .c101-editor-btn.primary:hover { background: #FFD84D; }
body.admin-class-editor .c101-editor-btn.primary[disabled] {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.4);
  border-color: transparent;
}

body.admin-class-editor .c101-editor-warn {
  background: rgba(250,204,21,0.10);
  border-bottom-color: rgba(250,204,21,0.4);
  color: #FDE68A;
}
body.admin-class-editor .c101-editor-warn code {
  background: rgba(250,204,21,0.18);
  color: #FDE68A;
}

body.admin-class-editor label { color: var(--c101-text-secondary-d); }
body.admin-class-editor input[type="checkbox"] { accent-color: var(--c101-yellow); }

/* ---------- 11. OUTER DESIGN TOKENS (Phase F) ----------
   claude_design/class101 outer design/01-tokens/tokens.css 의 토큰을
   기존 --c101-* 와 alias 로 등록 — 네임스페이스 충돌 회피, 점진적 도입.
   이 섹션 자체는 변수만 등록하므로 시각 변화 없음. */
:root {
  /* === outer color: brand === */
  --color-brand-red:    #FF2C57;  /* 라이브/긴급 — c101-red(#E30F32) 와 다른 핀크 톤 */
  --color-brand-orange: #FF8038;  /* 프로모/하이라이트 — c101-orange(#FF5D00) 와 다른 살색 톤 */

  /* === outer color: background (dark) === */
  --color-bg:          #0A0A0A;
  --color-bg-elevated: #141414;
  --color-bg-raised:   #1C1C1C;
  --color-bg-soft:     #1A1A1A;
  --color-bg-soft-2:   #222222;
  --color-bg-footer:   #050505;

  /* === outer color: foreground === */
  --color-fg:           #F4F4F4;
  --color-fg-secondary: #D6D6D6;
  --color-fg-meta:      #9A9A9A;
  --color-fg-disabled:  #5A5A5A;

  /* === outer color: line === */
  --color-line:        #262626;
  --color-line-strong: #3A3A3A;

  /* === outer color: semantic === */
  --color-rating: #FFC23A;
  --color-info:   #7C9CF0;

  /* === layout === */
  --layout-max:        1232px;
  --layout-gnb-height: 64px;
}

/* ---------- 12. OUTER DESIGN COMPONENTS (Phase F-3) ----------
   v4-final-dark.html 픽셀 참조. body[data-page-theme="dark"] 또는
   기본값(다크) 환경에서 메인페이지 + 카테고리 페이지가 사용. */

/* 12-1) Brand stack — 로고 + "고교학점제 비교과 전문 교육플랫폼" 라벨 (Phase F-3.2.1) */
.c101-brand-stack {
  display: flex; flex-direction: column; gap: 2px;
  line-height: 1; flex-shrink: 0;
}
.c101-brand-stack > a.logo,
.c101-brand-stack > .logo { gap: 6px; }
.c101-brand-mark {
  display: block;
  width: 32px; height: 28px;
  flex-shrink: 0;
}
.c101-brand-tagline {
  font-size: 12px; font-weight: 500;
  color: var(--color-fg-meta);
  letter-spacing: -0.012em;
  user-select: none; pointer-events: none;
  white-space: nowrap;
  margin-left: 36px; /* 로고 마크(28px) + gap(8px) 정렬 */
}
@media (max-width: 480px) {
  .c101-brand-tagline { font-size: 11px; margin-left: 32px; }
}

/* 12-2) Pill strip — 프로모션 알약 칩 가로 띠 */
.c101-pillstrip {
  max-width: var(--layout-max); margin: 32px auto 0; padding: 0 16px;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
}
.c101-pillstrip::-webkit-scrollbar { display: none; }
.c101-pill-item {
  flex: 0 0 auto; padding: 10px 16px;
  background: var(--color-bg-soft); border: 1px solid var(--color-line);
  border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--color-fg-secondary); white-space: nowrap; cursor: pointer;
  text-decoration: none; transition: all .15s;
}
.c101-pill-item:hover {
  background: var(--color-bg-soft-2); color: var(--color-fg);
  border-color: var(--color-line-strong);
}
.c101-pill-item.is-hot {
  background: rgba(255,128,56,.12); color: var(--color-brand-orange);
  border-color: rgba(255,128,56,.3);
}
.c101-pill-item.is-hot::before { content: "🔥 "; }

/* 12-3) Mini banner row — 2분할 그라디언트 프로모 */
.c101-banner-row {
  max-width: var(--layout-max); margin: 24px auto 0; padding: 0 16px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 600px) { .c101-banner-row { grid-template-columns: 1fr; } }
.c101-mini-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 28px; border-radius: 14px; cursor: pointer;
  min-height: 120px; color: #0F0F0F; text-decoration: none;
  transition: transform .15s;
}
.c101-mini-banner:hover { transform: translateY(-2px); }
.c101-mini-banner.variant-orange { background: linear-gradient(135deg,#FFB678,#FF8038); }
.c101-mini-banner.variant-blue   { background: linear-gradient(135deg,#7C8FFF,#3464E5); color: #FFF; }
.c101-mini-banner.variant-blue .mb-eyebrow { color: rgba(255,255,255,.7); }
.c101-mini-banner.variant-blue .mb-title   { color: #FFF; }
.c101-mini-banner.variant-blue .mb-arr     { background: rgba(255,255,255,.2); color: #FFF; }
.c101-mini-banner .mb-eyebrow { font-size: 12px; font-weight: 700; color: rgba(0,0,0,.6); }
.c101-mini-banner .mb-title {
  font-size: 18px; font-weight: 800; line-height: 1.35; letter-spacing: -0.02em;
  margin: 4px 0 0;
}
.c101-mini-banner .mb-arr {
  width: 32px; height: 32px; border-radius: 999px;
  background: rgba(0,0,0,.12); display: grid; place-items: center;
  font-size: 12px; flex-shrink: 0;
}

/* 12-4) Category icon row — 10-up 그리드 */
.c101-cat-row {
  max-width: var(--layout-max); margin: 32px auto 0; padding: 0 16px;
}
.c101-cat-row-inner {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px;
}
@media (max-width: 900px) { .c101-cat-row-inner { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 480px) { .c101-cat-row-inner { grid-template-columns: repeat(4, 1fr); } }
.c101-cat-cell {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 12px 4px; border-radius: 10px; cursor: pointer;
  text-decoration: none; transition: background .15s;
}
.c101-cat-cell:hover { background: var(--color-bg-soft); }
.c101-cat-cell .ic-circle {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; font-size: 20px;
  background: rgba(255,128,56,.12); color: var(--color-brand-orange);
  transition: all .15s;
}
.c101-cat-cell:hover .ic-circle { background: rgba(255,128,56,.2); }
.c101-cat-cell .label {
  font-size: 13px; color: var(--color-fg-secondary); font-weight: 500;
}

/* 12-5) Section (모듈 섹션 컨테이너) */
.c101-section {
  max-width: var(--layout-max); margin: 64px auto 0; padding: 0 16px; position: relative;
}
.c101-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 16px;
}
.c101-sec-head h2 {
  margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 8px; color: var(--color-fg);
}
.c101-sec-head h2 .chev {
  font-size: 18px; color: var(--color-fg-meta); font-weight: 600;
}
.c101-sec-head .sub {
  font-size: 13px; color: var(--color-fg-meta); margin-top: 4px;
}
.c101-sec-head .controls { display: flex; align-items: center; gap: 8px; }
.c101-sec-head .more {
  font-size: 13px; color: var(--color-fg-secondary); font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 12px; border-radius: 8px; text-decoration: none;
}
.c101-sec-head .more:hover {
  background: var(--color-bg-soft); color: var(--color-fg);
}
.c101-sec-head .nav-btn {
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--color-bg-soft); border: 1px solid var(--color-line);
  display: grid; place-items: center; font-size: 12px; color: var(--color-fg-secondary);
  cursor: pointer;
}
.c101-sec-head .nav-btn:hover {
  background: var(--color-bg-soft-2); color: var(--color-fg);
  border-color: var(--color-line-strong);
}

/* 12-6) Track — 5-up 가로 스크롤 카드 */
.c101-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 64px)/5);
  gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 8px;
}
.c101-track::-webkit-scrollbar { display: none; }
.c101-track > .c101-out-card { scroll-snap-align: start; }
@media (max-width: 1100px) { .c101-track { grid-auto-columns: calc((100% - 48px)/4); } }
@media (max-width: 800px)  { .c101-track { grid-auto-columns: calc((100% - 32px)/3); } }
@media (max-width: 600px)  { .c101-track { grid-auto-columns: calc((100% - 16px)/2); } }

/* 12-6b) Grid 5×2 — Phase F-fix Issue 3: layout=grid-2x5 섹션 (가로 스크롤 없음, 최대 10 카드) */
.c101-grid-2x5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px 16px;     /* row 20px, column 16px */
  padding-bottom: 8px;
}
@media (max-width: 1100px) { .c101-grid-2x5 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 800px)  { .c101-grid-2x5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .c101-grid-2x5 { grid-template-columns: repeat(2, 1fr); } }

/* 12-6c) Phase F-feed: 메인 하단 무한 스크롤 피드 그리드 + 카드 */
.c101-feed-section { margin-top: 32px; }
.c101-grid-feed {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px 16px;
  padding-bottom: 8px;
}
@media (max-width: 1280px) { .c101-grid-feed { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .c101-grid-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .c101-grid-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } }
@media (max-width: 420px)  { .c101-grid-feed { grid-template-columns: repeat(1, minmax(0, 1fr)); } }

.c101-feed-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform .15s ease;
}
.c101-feed-card:hover { transform: translateY(-2px); }
.c101-feed-thumb {
  position: relative; width: 100%; aspect-ratio: 234/131;
  border-radius: 6px; overflow: hidden;
  background: var(--color-bg-soft, #1a1a1a);
}
.c101-feed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c101-feed-thumb-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 12px; text-align: center;
  font-size: 13px; line-height: 1.35; color: var(--color-fg, #f5f5f5);
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
}
.c101-feed-card:hover .c101-feed-thumb {
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.c101-feed-card-body {
  padding: 10px 2px 0;
  display: flex; flex-direction: column; gap: 4px;
}
.c101-feed-card-title {
  font-size: 14px; font-weight: 600; line-height: 1.4;
  color: var(--color-fg, #f5f5f5);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.c101-feed-card-meta {
  font-size: 12px; color: var(--color-fg-muted, #999);
}
.c101-feed-card-rating {
  font-size: 12px; color: var(--color-fg-muted, #aaa);
}
.c101-feed-card-rating .star { color: #ffb400; }
.c101-feed-card-rating .op { opacity: .6; }
.c101-feed-card-price {
  font-size: 14px; font-weight: 700;
  color: var(--color-fg, #f5f5f5);
  margin-top: 2px;
}

.c101-feed-sentinel { width: 100%; height: 1px; }
.c101-feed-skeleton,
.c101-feed-end {
  text-align: center;
  padding: 28px 16px;
  color: var(--color-fg-muted, #999);
  font-size: 14px;
}
.c101-feed-skeleton .fa-spinner { margin-right: 6px; }
[hidden].c101-feed-skeleton,
[hidden].c101-feed-end { display: none !important; }

/* 12-7) Outer card (메인 카드 — c101-pdp-* 와 분리된 outer 스코프) */
.c101-out-card {
  display: flex; flex-direction: column; cursor: pointer;
  text-decoration: none; transition: transform .15s;
}
.c101-out-card:hover { transform: translateY(-2px); }
.c101-out-thumb {
  position: relative; width: 100%; aspect-ratio: 234/131;
  border-radius: 6px; overflow: hidden; background: var(--color-bg-soft);
}
.c101-out-card:hover .c101-out-thumb {
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.c101-out-thumb img,
.c101-out-thumb video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.c101-out-thumb .ph-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 12px; text-align: center; font-size: 13px; font-weight: 700;
  color: #fff; line-height: 1.35; text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.c101-out-thumb .live-pill {
  position: absolute; top: 8px; right: 8px;
  background: var(--color-brand-red); color: #fff;
  font-size: 10px; font-weight: 800; padding: 3px 6px;
  border-radius: 3px; letter-spacing: 0.06em;
  display: inline-flex; align-items: center; gap: 4px;
}
.c101-out-thumb .live-pill .dot {
  width: 5px; height: 5px; background: #fff; border-radius: 999px;
  animation: c101-pulse2 1.4s infinite;
}
@keyframes c101-pulse2 { 50% { opacity: .4; } }
.c101-out-thumb .upcoming {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,.65); backdrop-filter: blur(6px);
  color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 7px; border-radius: 3px;
}
.c101-out-card-body {
  padding: 10px 0 0; display: flex; flex-direction: column; gap: 3px;
}
.c101-out-card-title {
  font-size: 14px; font-weight: 600; color: var(--color-fg);
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em;
}
.c101-out-card-meta {
  font-size: 12px; color: var(--color-fg-meta);
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
}
.c101-out-card-meta .div { opacity: .4; }
.c101-out-card-rating {
  font-size: 12px; color: var(--color-fg-meta);
  display: flex; align-items: center; gap: 4px; margin-top: 2px;
}
.c101-out-card-rating .star { color: var(--color-rating); }
.c101-out-card-tag {
  font-size: 12px; font-weight: 700; color: var(--color-rating);
  margin-top: 4px; display: flex; align-items: center; gap: 4px;
}
.c101-out-card-rank {
  font-size: 12px; font-weight: 700; color: var(--color-brand-red);
  margin-top: 2px;
}

/* 12-8) Live free box — 다크 그라디언트 + 4 카드 */
.c101-live-box-wrap {
  max-width: var(--layout-max); margin: 72px auto 0; padding: 0 16px;
}
.c101-live-box {
  background: linear-gradient(135deg, #2A1408 0%, #3B1F0E 50%, #4A1C2A 100%);
  border-radius: 16px; padding: 32px;
  border: 1px solid rgba(255,128,56,.2);
}
.c101-live-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 24px; gap: 16px;
}
.c101-live-head .eyebrow {
  font-size: 13px; color: var(--color-brand-orange); font-weight: 700;
  display: block; margin-bottom: 6px;
}
.c101-live-head h2 {
  margin: 0; font-size: 26px; font-weight: 800; line-height: 1.2;
  display: flex; align-items: center; gap: 8px; letter-spacing: -0.02em; color: #FFF;
}
.c101-live-head h2 .accent { color: var(--color-brand-red); }
.c101-live-head h2 .chev { font-size: 18px; color: rgba(255,255,255,.5); }
.c101-live-head .more {
  color: rgba(255,255,255,.7); text-decoration: none; font-size: 13px;
  padding: 8px 12px; border-radius: 8px;
}
.c101-live-head .more:hover { color: #FFF; background: rgba(255,255,255,.06); }
.c101-live-list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 900px) { .c101-live-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .c101-live-list { grid-template-columns: 1fr; } }
.c101-live-card {
  background: rgba(20,20,20,.7); backdrop-filter: blur(8px);
  border-radius: 12px;
  /* 썸네일이 모서리까지 차지하도록 padding 0 — 본문 element 들이 좌우 padding 부담 */
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
  cursor: pointer; border: 1px solid rgba(255,255,255,.08);
  transition: all .15s; text-decoration: none;
}
.c101-live-card:hover {
  border-color: var(--color-brand-orange);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255,128,56,.15);
  background: rgba(28,28,28,.85);
}
/* 카드 상단 썸네일 슬롯 (16:9) + when 라벨 좌상단 오버레이 */
.c101-live-thumb {
  position: relative; width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #2A1408, #4A1C2A);
  overflow: hidden;
}
.c101-live-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.c101-live-thumb-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 12px; text-align: center;
  font-size: 13px; font-weight: 700; line-height: 1.35;
  color: #FFF;
}
.c101-live-thumb .when {
  position: absolute; top: 8px; left: 8px;
  padding: 4px 8px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px);
  font-size: 11px; font-weight: 700; color: #FFF;
  display: flex; align-items: center; gap: 5px;
  z-index: 1;
}
.c101-live-thumb .when.countdown { color: var(--color-brand-orange); }
.c101-live-thumb .when .dot {
  width: 5px; height: 5px; background: currentColor; border-radius: 999px;
}
.c101-live-card h3 {
  margin: 12px 14px 0; font-size: 15px; font-weight: 700; color: #F4F4F4;
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.8em;
}
.c101-live-card .by {
  margin: 6px 14px 0; font-size: 12px; color: var(--color-fg-meta);
  margin-top: 6px;
}
.c101-live-card .by .div { opacity: .4; margin: 0 6px; }
.c101-live-card .join {
  margin: 10px 14px 14px; padding: 9px 12px;
  background: #FFF; color: #0A0A0A;
  border-radius: 8px; font-size: 13px; font-weight: 700;
  text-align: center; transition: all .15s;
}
.c101-live-card:hover .join {
  background: var(--color-brand-red); color: #FFF;
}

/* ---------- 13. DARK THEME GLOBAL (Phase F-3.4) ----------
   body[data-page-theme="dark"] 또는 body 기본값에 다크 적용.
   기존 라이트 컴포넌트(PDP, 카테고리, 마이페이지) 에 다크 오버라이드. */

body[data-page-theme="dark"] {
  background: var(--color-bg);
  color: var(--color-fg);
}

/* PDP c101-pdp-* 컴포넌트 — Phase E 라이트 기본값을 다크로 오버라이드.
   이미 Section 9 에 body[data-c101-pdp-theme="dark"] 분기가 있으므로,
   data-page-theme="dark" 시 자동으로 c101-pdp-theme="dark" 처럼 동작하게 alias. */
body[data-page-theme="dark"]:not([data-c101-pdp-theme]) .c101-pdp-card,
body[data-page-theme="dark"]:not([data-c101-pdp-theme]) .c101-pdp-sidebar {
  background: var(--color-bg-elevated);
  border-color: var(--color-line);
  color: var(--color-fg);
}
body[data-page-theme="dark"]:not([data-c101-pdp-theme]) .c101-pdp-tabs {
  background: var(--color-bg);
  border-bottom-color: var(--color-line);
}
body[data-page-theme="dark"]:not([data-c101-pdp-theme]) .c101-pdp-card-h,
body[data-page-theme="dark"]:not([data-c101-pdp-theme]) .c101-pdp-price-now {
  color: var(--color-fg);
}
body[data-page-theme="dark"]:not([data-c101-pdp-theme]) .c101-pdp-tab {
  color: var(--color-fg-meta);
}
body[data-page-theme="dark"]:not([data-c101-pdp-theme]) .c101-pdp-tab.active {
  color: var(--color-fg);
  border-bottom-color: var(--color-fg);
}

/* GNB 다크 오버라이드 — body 기본 + admin 외 페이지 */
body[data-page-theme="dark"] nav.c101-gnb,
body[data-page-theme="dark"] .c101-gnb {
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-line);
}
body[data-page-theme="dark"] .c101-gnb a { color: var(--color-fg); }
body[data-page-theme="dark"] .c101-gnb input { color: var(--color-fg); background: transparent; }
body[data-page-theme="dark"] .c101-gnb input::placeholder { color: var(--color-fg-meta); }

/* Footer 다크 */
body[data-page-theme="dark"] footer {
  background: var(--color-bg-footer);
  border-top: 1px solid var(--color-line);
  color: var(--color-fg-meta);
}
body[data-page-theme="dark"] footer h4 { color: var(--color-fg); }
body[data-page-theme="dark"] footer a { color: var(--color-fg-meta); }
body[data-page-theme="dark"] footer a:hover { color: var(--color-fg); }

/* Tailwind 라이트 유틸리티 다크 오버라이드 (메인페이지 안에서만) */
body[data-page-theme="dark"] .bg-white { background-color: var(--color-bg-elevated); }
body[data-page-theme="dark"] .bg-gray-50 { background-color: var(--color-bg-soft); }
body[data-page-theme="dark"] .bg-gray-100 { background-color: var(--color-bg-soft-2); }
body[data-page-theme="dark"] .bg-gray-200 { background-color: var(--color-bg-soft-2); }
body[data-page-theme="dark"] .border-gray-100,
body[data-page-theme="dark"] .border-gray-200,
body[data-page-theme="dark"] .border-gray-300 { border-color: var(--color-line); }

/* 텍스트 다크 오버라이드 — 보고서 기반 (Phase F-fix Step 5) */
body[data-page-theme="dark"] .text-dark-900 { color: var(--color-fg); }
body[data-page-theme="dark"] .text-dark-800 { color: var(--color-fg); }
body[data-page-theme="dark"] .text-dark-700 { color: var(--color-fg-secondary); }
body[data-page-theme="dark"] .text-dark-600 { color: var(--color-fg-meta); }
body[data-page-theme="dark"] .text-gray-900 { color: var(--color-fg); }
body[data-page-theme="dark"] .text-gray-800 { color: var(--color-fg); }
body[data-page-theme="dark"] .text-gray-700 { color: var(--color-fg-secondary); }
body[data-page-theme="dark"] .text-gray-600 { color: var(--color-fg-secondary); }
body[data-page-theme="dark"] .text-gray-500 { color: var(--color-fg-meta); }
body[data-page-theme="dark"] .text-gray-400 { color: var(--color-fg-meta); }
body[data-page-theme="dark"] .text-gray-300 { color: var(--color-fg-meta); }
body[data-page-theme="dark"] .text-black     { color: var(--color-fg); }

/* c101 Tailwind 컬러 다크 오버라이드 — text-c101-ink 가 #0C0C0C(검정) 인데
   다크 배경 위에 그대로 검정 글씨로 출력되어 가독 불가. 가장 심각한 이슈. */
body[data-page-theme="dark"] .text-c101-ink   { color: var(--color-fg); }
body[data-page-theme="dark"] .text-c101-meta  { color: var(--color-fg-meta); }
body[data-page-theme="dark"] .bg-c101-surface { background-color: var(--color-bg-soft); }

/* placeholder 다크 보정 */
body[data-page-theme="dark"] input::placeholder,
body[data-page-theme="dark"] textarea::placeholder {
  color: var(--color-fg-meta); opacity: .8;
}

/* select 폼 다크 (categories 페이지의 정렬·수준 드롭다운 등) */
body[data-page-theme="dark"]:not(.admin-page) select {
  background-color: var(--color-bg-soft);
  color: var(--color-fg-secondary);
  border-color: var(--color-line);
}

/* 모달 / 라이트 유지 영역 — data-keep-light 가드
   bg-white 글로벌 다크 오버라이드가 모달 내부까지 침범하지 않도록 명시적 opt-out.
   모달은 의도적 라이트 유지 (회원가입/로그인/결제/장바구니/Q&A·리뷰 작성). */
body[data-page-theme="dark"] [data-keep-light] {
  background-color: #FFFFFF !important;
  color: var(--c101-text-primary) !important;
}
body[data-page-theme="dark"] [data-keep-light] .bg-white,
body[data-page-theme="dark"] [data-keep-light] .bg-gray-50,
body[data-page-theme="dark"] [data-keep-light] .bg-gray-100 {
  background-color: revert !important;
}
body[data-page-theme="dark"] [data-keep-light] .text-dark-900,
body[data-page-theme="dark"] [data-keep-light] .text-dark-800,
body[data-page-theme="dark"] [data-keep-light] .text-dark-700,
body[data-page-theme="dark"] [data-keep-light] .text-dark-600,
body[data-page-theme="dark"] [data-keep-light] .text-gray-900,
body[data-page-theme="dark"] [data-keep-light] .text-gray-800,
body[data-page-theme="dark"] [data-keep-light] .text-gray-700,
body[data-page-theme="dark"] [data-keep-light] .text-gray-600,
body[data-page-theme="dark"] [data-keep-light] .text-gray-500,
body[data-page-theme="dark"] [data-keep-light] .text-gray-400,
body[data-page-theme="dark"] [data-keep-light] .text-c101-ink,
body[data-page-theme="dark"] [data-keep-light] .text-c101-meta {
  color: revert !important;
}
body[data-page-theme="dark"] [data-keep-light] select {
  background-color: #FFFFFF !important;
  color: revert !important;
  border-color: revert !important;
}
body[data-page-theme="dark"] [data-keep-light] input::placeholder,
body[data-page-theme="dark"] [data-keep-light] textarea::placeholder {
  color: revert !important; opacity: revert !important;
}

/* 캐러셀 페이지네이션 (히어로 슬라이더 하단 "01 | 02") — 보고서 패턴 4 */
body[data-page-theme="dark"] #heroCurrent { color: var(--color-fg); }
body[data-page-theme="dark"] #heroTotal   { color: var(--color-fg-meta); }

/* 카테고리 탭 버튼 (categories 페이지) — 보고서 패턴 5 */
body[data-page-theme="dark"] .cat-tab:not(.bg-dark-900):not(.bg-c101-orange) {
  background-color: var(--color-bg-soft);
  color: var(--color-fg-secondary);
  border-color: var(--color-line);
}

/* 노랑/오렌지 알림 박스 다크 보정 — 라이트 톤이라 다크 배경에서 가독성 떨어짐 */
body[data-page-theme="dark"] .bg-yellow-50,
body[data-page-theme="dark"] .bg-yellow-100 {
  background-color: rgba(255,194,58,.12) !important;
  color: var(--color-rating);
}
body[data-page-theme="dark"] .bg-orange-50,
body[data-page-theme="dark"] .bg-orange-100 {
  background-color: rgba(255,128,56,.12) !important;
  color: var(--color-brand-orange);
}

/* fixed CTA 다크 */
body[data-page-theme="dark"] .c101-fixed-cta {
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-line);
}

/* admin-page 는 다크 적용 제외 (관리자는 기존 라이트 유지) */
body.admin-page[data-page-theme="dark"] {
  background: #f3f4f6;
  color: var(--c101-text-primary);
}

/* ---------- 14. SECTIONS EDITOR PREVIEW (Phase F-fix Step 9) ----------
   /admin/homepage-sections 의 미리보기 4 단계 시스템 전용 클래스.
   라이트 페이지(어드민)에서도 동작 — body[data-page-theme] 의존하지 않음. */

/* 14-1) 좌측 섹션 row — kind SVG 아이콘 (24×24) */
.c101-secedit-kind-icon {
  width: 24px; height: 24px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; background: #1A1A1A;
  color: #F4F4F4;
}
.c101-secedit-kind-icon svg { width: 18px; height: 12px; }

/* 14-2) 폼 상단 — 인라인 미리보기 (검정 배경 + 실제 메인 c101-* 클래스) — Phase F-fix Issue 1: sticky + 접기 */
.c101-secedit-section-preview {
  background: #0A0A0A;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid #262626;
  /* sticky 고정 — 폼 패널이 자체 스크롤이라 부모 기준 sticky */
  position: sticky;
  top: 0;
  z-index: 10;
  max-height: 45vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: max-height .2s ease;
}

/* collapsed — 헤더만 보이고 본문 hide */
.c101-secedit-section-preview.is-collapsed {
  max-height: 36px;
  padding: 8px 12px;
  overflow: hidden;
}
.c101-secedit-section-preview.is-collapsed > .preview-body { display: none; }
.c101-secedit-section-preview.is-collapsed .c101-secedit-section-preview-head { margin-bottom: 0; }

/* 헤더 (제목 + 토글 버튼) */
.c101-secedit-section-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase; letter-spacing: 0.05em;
  user-select: none;
}
.c101-secedit-section-preview-head i { margin-right: 4px; }
.c101-secedit-section-preview-toggle {
  background: rgba(255,255,255,0.08); border: 0;
  color: rgba(255,255,255,0.7);
  width: 24px; height: 20px; border-radius: 4px;
  font-size: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.c101-secedit-section-preview-toggle:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* 모바일 (< 1100px) — secedit-shell 단일 컬럼이라 viewport 기준 sticky */
@media (max-width: 1100px) {
  .c101-secedit-section-preview { top: 56px; max-height: 35vh; }
}
.c101-secedit-section-preview .c101-pillstrip,
.c101-secedit-section-preview .c101-banner-row,
.c101-secedit-section-preview .c101-cat-row,
.c101-secedit-section-preview .c101-section,
.c101-secedit-section-preview .c101-live-box-wrap {
  margin: 0; padding: 0; max-width: none;
}
.c101-secedit-section-preview .c101-track {
  grid-auto-columns: calc((100% - 48px)/4);
}
.c101-secedit-section-preview .c101-cat-row-inner {
  grid-template-columns: repeat(5, 1fr);
}
.c101-secedit-section-preview .c101-banner-row {
  grid-template-columns: 1fr 1fr;
}
.c101-secedit-section-preview .c101-mini-banner {
  padding: 14px 16px; min-height: 70px;
}
.c101-secedit-section-preview .c101-mini-banner .mb-title {
  font-size: 13px;
}
.c101-secedit-section-preview .c101-live-box {
  padding: 16px;
}
.c101-secedit-section-preview .c101-live-list {
  grid-template-columns: repeat(2, 1fr);
}
.c101-secedit-section-preview .c101-sec-head h2 {
  font-size: 16px;
}
.c101-secedit-section-preview .c101-out-card-title {
  font-size: 12px;
}
.c101-secedit-section-preview-empty {
  color: rgba(255,255,255,0.5); padding: 32px 16px;
  text-align: center; font-size: 12px;
}

/* 14-3) Item row 좌측 thumbnail (96×54) */
.c101-secedit-item-thumb {
  width: 96px; height: 54px; flex-shrink: 0;
  border-radius: 4px; overflow: hidden;
  background: #1A1A1A; position: relative;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #262626;
}
.c101-secedit-item-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.c101-secedit-item-thumb .ph-text {
  font-size: 9px; font-weight: 700;
  color: #fff; text-align: center; padding: 4px;
  line-height: 1.2; text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.c101-secedit-item-thumb .live-dot {
  position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #FF2C57;
}
.c101-secedit-item-thumb .badge-mini {
  position: absolute; top: 4px; left: 4px;
  background: rgba(0,0,0,0.7); color: #fff;
  font-size: 8px; padding: 2px 4px; border-radius: 2px;
}
.c101-secedit-item-thumb-pill {
  width: auto; min-width: 80px; height: 24px;
  border-radius: 999px;
  background: #1A1A1A; border: 1px solid #262626;
  color: #D6D6D6; padding: 0 10px;
  font-size: 10px; font-weight: 600;
}
.c101-secedit-item-thumb-pill.is-hot {
  background: rgba(255,128,56,.12);
  color: #FF8038; border-color: rgba(255,128,56,.3);
}

/* 14-4) Item row layout — thumbnail + 입력 영역 + 삭제 */
.c101-secedit-item-row {
  display: flex; gap: 10px;
  padding: 10px;
  background: #f9fafb; border: 1px solid #e5e7eb;
  border-radius: 6px; margin-bottom: 8px;
  position: relative;
}
.c101-secedit-item-row .body { flex: 1; min-width: 0; }
.c101-secedit-item-row .del {
  position: absolute; right: 8px; top: 8px;
  background: transparent; border: 0;
  color: #ef4444; cursor: pointer; font-size: 14px;
}

/* 14-5) 강의 연결 모드 자동 채움 패널 */
.c101-secedit-class-fill {
  background: #EFF6FF; border: 1px solid #BFDBFE;
  border-radius: 6px; padding: 10px;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.c101-secedit-class-fill img {
  width: 60px; height: 36px; border-radius: 3px;
  object-fit: cover; flex-shrink: 0; background: #1A1A1A;
}
.c101-secedit-class-fill .info { flex: 1; min-width: 0; }
.c101-secedit-class-fill .title {
  font-size: 12px; font-weight: 600; color: #1E40AF;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.c101-secedit-class-fill .meta {
  font-size: 11px; color: #3B82F6; margin-top: 2px;
}

/* 14-6) 모드 토글 */
.c101-secedit-mode-toggle {
  display: flex; gap: 0; margin-bottom: 10px;
  font-size: 12px; font-weight: 600;
}
.c101-secedit-mode-toggle label {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 10px; background: #fff;
  border: 1px solid #d1d5db;
  cursor: pointer; flex: 1;
}
.c101-secedit-mode-toggle label:first-child {
  border-radius: 6px 0 0 6px;
}
.c101-secedit-mode-toggle label:last-child {
  border-radius: 0 6px 6px 0;
  border-left: 0;
}
.c101-secedit-mode-toggle label.active {
  background: #FF5D00; color: #fff; border-color: #FF5D00;
}
.c101-secedit-mode-toggle input { display: none; }

/* 14-7) 도움말 툴팁 아이콘 */
.c101-secedit-help {
  color: #9CA3AF; cursor: help;
  margin-left: 4px; font-size: 11px;
}
.c101-secedit-help:hover { color: #FF5D00; }

/* 14-7b) 운영자 친화 — kind 안내 박스 + 한 줄 안내 + href 셀렉트 래퍼 */
.c101-secedit-kind-intro {
  display: flex; gap: 12px; align-items: center;
  padding: 14px 16px; margin-bottom: 16px;
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px;
}
.c101-secedit-kind-intro .c101-secedit-kind-icon {
  width: 36px; height: 18px; flex-shrink: 0;
}
.c101-secedit-kind-intro strong {
  display: block; font-size: 14px; color: #9a3412; line-height: 1.2;
}
.c101-secedit-kind-intro p {
  margin: 4px 0 0; font-size: 12px; color: #6b7280; line-height: 1.45;
}
.c101-secedit-help-line {
  display: block; font-size: 11px; color: #6b7280; font-weight: 400;
  margin-top: 2px; line-height: 1.4;
}
.c101-secedit-href-select { display: block; }
.c101-secedit-href-select select { width: 100%; }
.c101-secedit-href-select input[type="text"] { width: 100%; }

/* 14-8) Field group collapsible */
.c101-secedit-fgroup { margin-bottom: 10px; }
.c101-secedit-fgroup-head {
  font-size: 12px; font-weight: 600; color: #374151;
  cursor: pointer; user-select: none; padding: 6px 0;
  display: flex; align-items: center; gap: 4px;
}
.c101-secedit-fgroup-head::before {
  content: "▼"; font-size: 9px; color: #9CA3AF;
}
.c101-secedit-fgroup.collapsed .c101-secedit-fgroup-head::before {
  content: "▶";
}
.c101-secedit-fgroup.collapsed .c101-secedit-fgroup-body {
  display: none;
}
.c101-secedit-fgroup-body { padding-left: 4px; }