/* 나눔캠퍼스 LMS — 공통 스타일 */

/* 접근성: '본문 바로가기' skip 링크 — 평소 화면 밖, 키보드 Tab 포커스 시에만 노출(디자인 영향 없음) */
.skip-link {
  position: fixed; top: -100px; left: 12px; z-index: 9999;
  background: var(--green-700, #15803d); color: #fff;
  padding: 10px 16px; border-radius: 8px; font-weight: 700; font-size: 14px;
  text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; outline: 3px solid #fff; outline-offset: 2px; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink-800);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
img[hidden] { display: none; }  /* 전역 img{display:block}이 [hidden] UA규칙을 덮어 빈 img가 깨져 보이는 문제 복구 */
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── 버튼 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: var(--fw-semibold); font-size: var(--fs-sm);
  padding: 11px 20px; border-radius: var(--radius-full);
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { background: transparent; color: var(--ink-700); }
.btn-ghost:hover { background: var(--ink-100); }
.btn-outline { background: #fff; color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--green-200); }
.btn-news { background: var(--green-50); color: var(--green-800); box-shadow: inset 0 0 0 1.5px var(--green-200); }
.btn-news:hover { background: var(--green-100); box-shadow: inset 0 0 0 1.5px var(--green-300); }
.btn-outline:hover { background: var(--green-50); }
/* 위험(삭제·강등 등) 표준 버튼 — 운영자 콘솔 인라인 빨강 통일 */
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #c93a3f; }
.btn-danger-soft { background: #fff; color: var(--danger); box-shadow: inset 0 0 0 1.5px #f0c4c5; }
.btn-danger-soft:hover { background: #fdf2f2; }
.btn-lg { padding: 15px 30px; font-size: var(--fs-base); }
.btn-block { width: 100%; }

/* ── 헤더 ── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--ink-100);
}
.site-header .container { height: 100%; display: flex; align-items: center; gap: 28px; }
/* 2단 헤더 — 윗줄(로고·계정) + 아랫줄(메뉴 중앙). 운영자 전용이라 구분선 제거·슬림 */
.header-top { height: 52px; }
.header-nav { height: 46px; }
.header-nav .container { justify-content: center; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: var(--fw-extrabold); font-size: var(--fs-xl); color: var(--green-700); letter-spacing: -0.02em; flex: none; }
.brand-logo { height: 42px; width: auto; display: block; flex: none; max-width: none; object-fit: contain; }
.brand .leaf {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--green-500), var(--mint-500));
  display: grid; place-items: center; color: #fff; font-size: 17px;
}
.nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav a { padding: 8px 14px; border-radius: var(--radius-sm); font-weight: var(--fw-medium); color: var(--ink-700); font-size: var(--fs-sm); transition: background .15s, color .15s; }
.nav a:hover { background: var(--green-50); color: var(--green-700); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* ── 헤더 우측: 검색·알림 아이콘 + 계정(로그인/프로필) — B2BAI 동일 UI/UX ── */
.hdr-icon { color: var(--ink-500); display: flex; align-items: center; cursor: pointer; position: relative; transition: color .15s; }
.hdr-icon:hover { color: var(--ink-900); }
.hdr-icon > a, #hdrBellBtn { display: flex; align-items: center; color: inherit; }
.hdr-icon svg { display: block; }
.hdr-account { display: flex; align-items: center; gap: 8px; }
.acct-wrap { position: relative; }
/* 관리자 전용 파란 점 — 사진과 메신저 아이콘 사이. 클릭 시 관리자 새 탭. (최고관리자에게만 렌더) */
.hdr-admin-dot { width: 11px; height: 11px; border-radius: 50%; background: #2563eb; flex: 0 0 auto; cursor: pointer; box-shadow: 0 0 0 0 rgba(37,99,235,.55); animation: hdrAdminPulse 2.4s ease-out infinite; transition: transform .15s; }
.hdr-admin-dot:hover { transform: scale(1.35); animation: none; box-shadow: 0 0 0 5px rgba(37,99,235,.2); }
@keyframes hdrAdminPulse { 0% { box-shadow: 0 0 0 0 rgba(37,99,235,.5); } 70% { box-shadow: 0 0 0 7px rgba(37,99,235,0); } 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); } }
@media (prefers-reduced-motion: reduce) { .hdr-admin-dot { animation: none; } }

/* 로그아웃 상태: 회원가입(아웃라인) + 로그인(블랙) */
.acct-btn { font-size: var(--fs-sm); font-weight: var(--fw-bold); padding: 9px 17px; border-radius: var(--radius-full); white-space: nowrap; transition: background .18s, box-shadow .18s; }
.acct-signup { background: #fff; color: var(--ink-800); box-shadow: inset 0 0 0 1.5px var(--ink-200); }
.acct-signup:hover { background: var(--ink-100); }
.acct-login { background: var(--ink-900); color: #fff; }
.acct-login:hover { background: #000; }

/* 로그인 상태: 프로필 pill */
.profile-pill { display: flex; align-items: center; gap: 9px; padding: 4px 14px 4px 4px; border-radius: var(--radius-full); background: var(--ink-100); border: none; cursor: pointer; font-family: inherit; transition: background .2s; }
.profile-pill:hover { background: var(--ink-200); }
.pill-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; padding: 2px; background: linear-gradient(135deg, var(--green-500), var(--green-800)); }
.pill-av-in { width: 100%; height: 100%; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; box-sizing: border-box; border: 1.5px solid #fff; }
.pill-av-in::before { content: attr(data-i); font-weight: var(--fw-extrabold); font-size: .78rem; color: var(--green-700); }
.pill-av-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pill-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--green-700); max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-arrow { color: var(--green-700); transition: transform .2s; }
.profile-pill.open .pill-arrow { transform: rotate(180deg); }

/* 계정 드롭다운 */
.acct-dd, .bell-dd { position: absolute; right: 0; top: calc(100% + 10px); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--ink-100); z-index: 200; }
.acct-dd[hidden], .bell-dd[hidden] { display: none; }
.acct-dd { width: 262px; padding: 8px 0; overflow: hidden; }
.dd-head { padding: 16px 20px; border-bottom: 1px solid var(--ink-100); }
.dd-name { font-size: 1rem; font-weight: var(--fw-extrabold); color: var(--ink-900); }
.dd-email { font-size: .8rem; color: var(--ink-500); margin-top: 2px; word-break: break-all; }
.dd-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 20px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-700); background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; transition: background .15s; }
.dd-item:hover { background: var(--ink-100); }
.dd-item svg { flex: none; }
.dd-admin { color: #2563eb; }
.dd-logout { color: #ef4444; border-top: 1px solid var(--ink-100); }

/* 알림 벨 */
.bell-dd { width: 300px; overflow: hidden; }
.bell-hd { padding: 14px 18px; font-weight: var(--fw-extrabold); font-size: .95rem; border-bottom: 1px solid var(--ink-100); }
.bell-empty { padding: 30px 16px; text-align: center; color: var(--ink-400); font-size: .85rem; }
.bell-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; background: #ef4444; color: #fff; font-size: 9px; font-weight: 800; line-height: 16px; text-align: center; border-radius: 999px; padding: 0 3px; }
/* 헤더 메신저 패널 — 받은요청·내대화·멤버(온라인) */
.msg-dd { position: absolute; right: 0; top: calc(100% + 10px); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--ink-100); z-index: 200; width: 340px; overflow: hidden; }
.msg-dd[hidden] { display: none; }
.msg-body { max-height: 64vh; overflow-y: auto; }
.msg-sec-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 4px; font-size: 11px; font-weight: 800; color: var(--ink-400); letter-spacing: .02em; }
.msg-sec-h .on-n { color: #16a34a; }
.msg-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; border: 0; background: none; cursor: pointer; text-align: left; font-family: inherit; border-bottom: 1px solid var(--ink-50); }
.msg-row:hover { background: var(--ink-50); }
.msg-av { position: relative; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: var(--green-100, #dcfce7); color: var(--green-800, #166534); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.msg-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; background: var(--ink-300, #cbd5e1); }
.msg-dot.on { background: #22c55e; }
.msg-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.msg-nm { font-size: 13px; font-weight: 700; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-sub { font-size: 11px; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-row.unread .msg-sub { color: var(--ink-800); font-weight: 600; }
.msg-rb { flex: 0 0 auto; background: #e11d48; color: #fff; font-size: 10px; font-weight: 800; border-radius: 9px; padding: 1px 6px; }
.msg-empty2 { padding: 16px 14px; text-align: center; color: var(--ink-400); font-size: 12px; line-height: 1.6; }
.msg-foot { display: block; width: 100%; padding: 10px; font-size: 12px; font-weight: 700; color: var(--green-700, #15803d); background: var(--green-50, #f0fdf4); border: 0; border-top: 1px solid var(--ink-100); cursor: pointer; font-family: inherit; text-align: center; text-decoration: none; }
@media (max-width: 520px) { .msg-dd { width: calc(100vw - 24px); } }

/* 전역 검색 오버레이 */
.gsearch-ov { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9999; display: flex; align-items: flex-start; justify-content: center; padding-top: 80px; opacity: 0; transition: opacity .2s; }
.gsearch-ov.open { opacity: 1; }
.gsearch-box { background: #fff; border-radius: var(--radius-lg); width: 90%; max-width: 560px; box-shadow: var(--shadow-lg); overflow: hidden; }
.gsearch-top { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ink-100); }
.gsearch-top input { flex: 1; border: none; outline: none; font-size: 15px; font-family: inherit; background: transparent; color: var(--ink-900); }
.gsearch-top kbd { padding: 2px 8px; background: var(--ink-100); border-radius: 6px; font-size: 11px; color: var(--ink-400); font-family: inherit; }
.gsearch-results { max-height: 400px; overflow-y: auto; padding: 8px 0; }
.gsearch-results .gs-empty { padding: 24px; text-align: center; color: var(--ink-400); font-size: 13px; }
.gsearch-results a { display: flex; align-items: center; gap: 12px; padding: 12px 20px; transition: background .15s; }
.gsearch-results a:hover { background: var(--ink-100); }
.gsearch-results a .gs-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gsearch-results a .gs-nm { font-size: 14px; font-weight: var(--fw-semibold); color: var(--ink-900); }
.gsearch-results a .gs-ds { font-size: 12px; color: var(--ink-400); }
.icon-btn { width: 40px; height: 40px; border-radius: var(--radius-full); display: grid; place-items: center; color: var(--ink-600); transition: background .15s; }
.icon-btn:hover { background: var(--ink-100); }

/* ── 히어로 ── */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--lime-200), var(--green-300));
  padding: 80px 0 72px;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--green-700);
  background: var(--green-100); padding: 7px 14px; border-radius: var(--radius-full); margin-bottom: 20px;
}
.hero h1, .hero .hero-title { font-size: var(--fs-4xl); line-height: 1.18; letter-spacing: -0.03em; font-weight: var(--fw-extrabold); color: var(--ink-900); margin: 0; }
.hero h1 .hl, .hero .hero-title .hl { color: var(--green-600); }
.hero p.lead { margin-top: 20px; font-size: var(--fs-lg); color: var(--ink-600); max-width: 30em; }
.hero-cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats { margin-top: 40px; display: flex; gap: 36px; }
.hero-stats .stat .n { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); color: var(--green-700); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-stats .stat .l { font-size: var(--fs-sm); color: var(--ink-500); }
.hero-stats .stat .n .dg { display: inline-block; }
.hero-stats .stat .n .dg.spin { filter: blur(0.4px); opacity: 0.7; }
.hero-stats .stat .n .dg.pop { animation: statPop 0.3s ease-out; }
/* 모바일: 통계 2×2 그리드 (4열이 좁아 "15년"이 깨지는 문제 해결) */
@media (max-width: 560px) { .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; margin-top: 32px; } }

/* 최근 진행 교육 (옅은 회색 별개 섹션 · 대면교육 자랑) */
.recent-sec { background: var(--ink-100); padding: 66px 0 60px; border-top: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200); }
.recent-head { text-align: center; max-width: 660px; margin: 0 auto 32px; }
.recent-eyebrow { display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.14em; color: var(--green-600); margin-bottom: 12px; }
.recent-title { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); color: var(--ink-900); letter-spacing: -0.02em; line-height: 1.3; margin: 0 0 10px; }
.recent-title .recent-n { color: var(--green-600); font-weight: var(--fw-extrabold); }
.recent-sub { font-size: var(--fs-base); color: var(--ink-500); margin: 0; }
.recent-clients { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 800px; margin: 0 auto; }
.recent-clients .rc-chip { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-700); text-decoration: none; transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), color .15s var(--ease); }
.recent-clients .rc-chip:hover { transform: translateY(-2px); border-color: var(--green-300); color: var(--green-700); box-shadow: var(--shadow-sm); }
.recent-clients .rc-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-500); flex: 0 0 auto; }
.recent-clients .rc-chip .rc-client { font-weight: var(--fw-semibold); color: var(--ink-800); white-space: nowrap; }
.recent-clients .rc-chip .rc-topic { color: var(--ink-500); font-weight: var(--fw-regular); white-space: nowrap; }
.recent-clients .rc-chip:hover .rc-client { color: var(--green-700); }
.recent-clients .rc-chip:hover .rc-topic { color: var(--green-600); }
.recent-more { text-align: center; margin-top: 26px; }
.recent-more a { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--green-700); text-decoration: none; transition: color .15s var(--ease); }
.recent-more a:hover { color: var(--green-600); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .recent-sec { padding: 48px 0 44px; } .recent-title { font-size: var(--fs-xl); } .recent-clients { gap: 8px; } .recent-clients .rc-chip { padding: 8px 14px; } }
@keyframes statPop { 0% { transform: translateY(-3px) scale(1.45); color: var(--mint-500); } 55% { transform: translateY(0) scale(0.9); } 100% { transform: scale(1); } }
.hero-visual { position: relative; height: 535px; }
.hero-card {
  position: absolute; background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 8px 8px 9px; width: 190px;
  border: 1px solid var(--ink-100); display: block; text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease;
}
.hero-card:hover { transform: scale(1.05) rotate(0deg) !important; box-shadow: 0 22px 48px rgba(20,40,30,.22); z-index: 10; }
.hero-card .thumb { display: block; width: 100%; height: 116px; object-fit: cover; border-radius: var(--radius); }
.hero-card .cap { margin-top: 7px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-700); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-card.c1 { top: 0;     left: 30px;  transform: rotate(-9deg); z-index: 2; }
.hero-card.c2 { top: 44px;  right: 24px; transform: rotate(7deg);  z-index: 1; }
.hero-card.c3 { top: 162px; left: 0;     transform: rotate(4deg);  z-index: 3; }
.hero-card.c4 { top: 214px; right: 6px;  transform: rotate(-7deg); z-index: 2; }
.hero-card.c5 { top: 360px; left: 96px;  transform: rotate(6deg);  z-index: 4; }

/* ── 섹션 공통 ── */
.section { padding: 76px 0; }
#courses { padding-bottom: 40px; }
.collections-sec { background: var(--ink-100); padding-top: 52px; }
.section-head { text-align: center; margin-bottom: 44px; }
.section-head .kk { color: var(--green-600); font-weight: var(--fw-bold); font-size: var(--fs-sm); letter-spacing: 0.04em; }
.section-head h2 { font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); letter-spacing: -0.03em; color: var(--ink-900); margin-top: 8px; }
.section-head p { color: var(--ink-500); margin-top: 12px; font-size: var(--fs-lg); }

/* ── 과정 카드 ── */
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.course-card {
  background: #fff; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--ink-100); box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  display: flex; flex-direction: column;
}
.course-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.course-thumb { aspect-ratio: 770/539; position: relative; display: grid; place-items: center; color: #fff; background-size: cover; background-position: center; }
.course-thumb .badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--mint-500); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  padding: 5px 11px; border-radius: var(--radius-full);
}
.course-thumb .sale-badge {
  position: absolute; bottom: 12px; left: 12px; z-index: 2;
  background: #dc2626; color: #fff; font-size: var(--fs-xs); font-weight: 800;
  padding: 5px 10px; border-radius: var(--radius-full); box-shadow: 0 2px 10px rgba(220,38,38,.4);
}
.course-thumb .lv { font-size: var(--fs-sm); font-weight: var(--fw-bold); opacity: .85; }
.course-thumb .ttl { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); letter-spacing: -0.02em; text-shadow: 0 2px 12px rgba(0,0,0,.18); }
.course-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.course-body h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ink-900); letter-spacing: -0.02em; line-height: 1.35; }
.course-meta { margin-top: 10px; display: flex; gap: 14px; font-size: var(--fs-sm); color: var(--ink-500); }
.course-inst { margin-top: 9px; display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--ink-600); }
.course-inst .ava { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; background: linear-gradient(135deg, var(--green-500), var(--mint-500)); display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: var(--fw-extrabold); }
.course-price { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ink-100); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.course-price .pct { color: #e5484d; font-weight: var(--fw-extrabold); font-size: var(--fs-lg); }
.course-price .was { color: var(--ink-400); text-decoration: line-through; font-size: var(--fs-sm); }
.course-price .now { color: var(--price); font-weight: var(--fw-extrabold); font-size: var(--fs-xl); }
.course-price .won { font-weight: var(--fw-semibold); }

/* ── 후기 ── */
.reviews { background: var(--green-50); }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review-card { background: #fff; border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm); border: 1px solid var(--ink-100); }
.review-card .stars { color: #ffb020; font-size: var(--fs-base); letter-spacing: 2px; }
.review-card .rt { margin-top: 12px; font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--ink-900); }
.review-card .rb { margin-top: 8px; color: var(--ink-600); font-size: var(--fs-sm); line-height: 1.7; }
.review-card .rf { margin-top: 18px; display: flex; align-items: center; gap: 10px; }
.review-card .who { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-700); }
.review-card .crs { font-size: var(--fs-xs); color: var(--green-700); background: var(--green-100); padding: 3px 9px; border-radius: var(--radius-full); }

/* 담당자·교육생 피드백 페이지 (feedback.html) — 온라인 후기와 구분되는 디자인 */
.fb-logos { margin: 0; }
.fb-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.fb-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-tab { font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-600); background: var(--ink-100); border: 1px solid var(--ink-200); border-radius: var(--radius-full); padding: 9px 16px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.fb-tab b { color: var(--ink-400); font-weight: var(--fw-bold); margin-left: 3px; }
.fb-tab:hover { border-color: var(--ink-400); color: var(--ink-800); }
.fb-tab.active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }   /* 온라인 후기(그린)와 달리 차콜 */
.fb-tab.active b { color: rgba(255,255,255,.78); }
.fb-search { font-family: inherit; font-size: var(--fs-sm); padding: 10px 16px; border: 1px solid var(--ink-200); border-radius: var(--radius-full); flex: 0 1 280px; min-width: 200px; outline: none; transition: border-color .15s; }
.fb-search:focus { border-color: var(--ink-700); }
.fb-count { color: var(--ink-500); font-size: var(--fs-sm); margin: 14px 2px 18px; }
/* 카드: 좌측 컬러 액센트 + 큰 따옴표 + 회사명 헤드라인 (별점 없음) */
.fb-card { position: relative; display: flex; flex-direction: column; background: #fcfdff; border: 1px solid var(--ink-300); border-left: 4px solid var(--green-500); border-radius: 0; padding: 22px 24px; overflow: hidden; transition: box-shadow .2s, transform .2s, border-color .2s; }
.fb-card:hover { box-shadow: 0 14px 30px -12px rgba(20,40,30,.20); transform: translateY(-2px); }
.fb-card-mgr { border-left-color: var(--green-600); }
.fb-card-stu { border-left-color: #4f6ef5; }
/* 따옴표 — 옅은 배경 워터마크 (텍스트 뒤, 연한 색이라 가독성 영향 없음) */
.fb-card::before { content: "\201C"; position: absolute; top: 30px; left: 14px; font-family: Georgia, "Times New Roman", serif; font-size: 128px; line-height: 1; color: var(--green-200); pointer-events: none; z-index: 0; }
.fb-card-stu::before { color: #d3dbff; }
.fb-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; position: relative; z-index: 1; }
.fb-org { font-weight: var(--fw-extrabold); font-size: var(--fs-base); color: var(--ink-900); letter-spacing: -.01em; }
.fb-role { font-size: var(--fs-xs); font-weight: var(--fw-bold); padding: 4px 11px; border-radius: var(--radius-full); white-space: nowrap; flex: none; }
.fb-role-mgr { background: var(--green-100); color: var(--green-700); }
.fb-role-stu { background: #e8edff; color: #3a4fc4; }
.fb-quote { margin: 0; padding-top: 34px; font-size: var(--fs-base); color: var(--ink-700); line-height: 1.68; position: relative; z-index: 1; flex: 1; }
.fb-foot { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fb-train { font-size: var(--fs-xs); color: var(--ink-600); background: var(--ink-100); padding: 4px 10px; border-radius: var(--radius-full); }
.fb-date { font-size: var(--fs-xs); color: var(--ink-400); flex: none; }

/* ── 브랜드 밴드 (하단 CTA) ── */
.brand-band {
  background:
    radial-gradient(560px 320px at 82% -10%, var(--green-600), transparent 60%),
    linear-gradient(135deg, var(--green-800), var(--green-900));
  text-align: center; padding: 90px 0;
}
.brand-band h2 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: #fff; opacity: .82; }
.brand-band h2 b { font-weight: var(--fw-extrabold); color: var(--green-200); }
.brand-band .big { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: var(--fw-extrabold); color: #fff; letter-spacing: -0.03em; margin-top: 10px; line-height: 1.2; }
.brand-band .btn { margin-top: 34px; }
.brand-band .btn-primary { background: #fff; color: var(--green-800); box-shadow: var(--shadow-lg); transition: transform .18s var(--ease), box-shadow .2s var(--ease), background .2s; }
.brand-band .btn-primary:hover { background: var(--green-50); transform: translateY(-2px); box-shadow: 0 18px 38px rgba(0,0,0,.3); }
/* 최종 CTA 강화: 혜택 문구 · 듀얼 버튼 · 신뢰 지표 바 (index 전용 요소) */
.brand-band .bb-benefit { font-size: var(--fs-base); color: rgba(255,255,255,.72); margin-top: 16px; }
.brand-band .bb-benefit b { color: var(--green-200); font-weight: var(--fw-bold); }
.brand-band .bb-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.brand-band .bb-actions .btn { margin-top: 0; }
.brand-band .bb-cta { display: inline-flex; align-items: center; gap: 8px; }
.brand-band .bb-cta svg { width: 18px; height: 18px; transition: transform .18s var(--ease); }
.brand-band .bb-cta:hover svg { transform: translateX(3px); }
.brand-band .bb-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.45); box-shadow: none; }
.brand-band .bb-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; transform: translateY(-2px); }
.brand-band .bb-trust { display: flex; gap: 10px 22px; justify-content: center; flex-wrap: wrap; align-items: center; margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.13); font-size: var(--fs-sm); color: rgba(255,255,255,.72); }
.brand-band .bb-trust b { color: #fff; font-weight: var(--fw-bold); }
.brand-band .bb-trust .sep { color: rgba(255,255,255,.28); }
.brand-band .bb-trust .stars { color: #ffd24a; letter-spacing: 1px; }
@media (max-width: 600px) { .brand-band .bb-trust .sep { display: none; } .brand-band .bb-actions .btn { width: 100%; max-width: 320px; justify-content: center; } }

/* ── 푸터 ── */
.site-footer { background: var(--ink-900); color: var(--ink-300); padding: 24px 0 40px; font-size: var(--fs-sm); }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-brand { font-weight: var(--fw-extrabold); font-size: var(--fs-lg); color: #fff; }
.footer-links { display: flex; gap: 48px; flex-wrap: wrap; }
.footer-links h4 { color: #fff; font-size: var(--fs-sm); margin-bottom: 12px; }
.footer-links a { display: block; padding: 4px 0; color: var(--ink-400); transition: color .15s; }
.footer-links a:hover { color: var(--green-300); }
.footer-cta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 2px 0 22px; }
.footer-cta a, .footer-cta button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 16px; border-radius: 0; font-size: var(--fs-base); font-weight: var(--fw-bold); border: 0; cursor: pointer; font-family: inherit; text-decoration: none; position: relative; overflow: hidden; will-change: transform; transition: transform .32s cubic-bezier(.34,1.56,.64,1), box-shadow .32s ease, filter .32s ease; }
/* 빛 스윕(gleam) — hover 시 한 번 가로지름 */
.footer-cta a::before, .footer-cta button::before { content: ""; position: absolute; top: 0; left: -150%; width: 70%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55) 50%, transparent); transform: skewX(-22deg); pointer-events: none; }
.footer-cta a:hover::before, .footer-cta button:hover::before { animation: fcSweep .7s ease forwards; }
/* hover — 솟아오르며 살짝 커지고 채도 상승 */
.footer-cta a:hover, .footer-cta button:hover { transform: translateY(-7px) scale(1.045); filter: brightness(1.08) saturate(1.15); z-index: 2; }
.footer-cta a:active, .footer-cta button:active { transform: translateY(-2px) scale(.99); transition-duration: .09s; }
/* 버튼별 컬러 글로우 */
.footer-cta .fc-tel { background: var(--green-500); color: #fff; }
.footer-cta .fc-tel:hover { box-shadow: 0 18px 34px -10px rgba(33,184,102,.8), 0 0 0 2px rgba(33,184,102,.3); }
.footer-cta .fc-chat { background: #4f46e5; color: #fff; }
.footer-cta .fc-chat:hover { box-shadow: 0 18px 34px -10px rgba(79,70,229,.85), 0 0 0 2px rgba(79,70,229,.32); }
.footer-cta .fc-share { background: #FEE500; color: #191600; }
.footer-cta .fc-share:hover { box-shadow: 0 18px 34px -10px rgba(254,229,0,.9), 0 0 0 2px rgba(254,229,0,.45); }
/* 아이콘 모션 — 전화:따르릉 / 채팅:통통 / 공유:회전 */
.footer-cta .fc-ico { display: inline-block; font-size: 1.1em; transition: transform .3s ease; }
.footer-cta .fc-tel:hover .fc-ico { animation: fcRing .65s ease; transform-origin: 50% 10%; }
.footer-cta .fc-chat:hover .fc-ico { animation: fcBounce .6s ease; }
.footer-cta .fc-share:hover .fc-ico { animation: fcSpin .6s ease; }
@keyframes fcSweep { from { left: -150%; } to { left: 160%; } }
@keyframes fcRing { 0%,100%{transform:rotate(0)} 15%{transform:rotate(-18deg)} 30%{transform:rotate(15deg)} 45%{transform:rotate(-11deg)} 60%{transform:rotate(7deg)} 75%{transform:rotate(-3deg)} }
@keyframes fcBounce { 0%,100%{transform:translateY(0)} 30%{transform:translateY(-8px)} 55%{transform:translateY(2px)} 75%{transform:translateY(-4px)} }
@keyframes fcSpin { 0%{transform:rotate(0) scale(1)} 55%{transform:rotate(200deg) scale(1.3)} 100%{transform:rotate(360deg) scale(1)} }
@media (prefers-reduced-motion: reduce) {
  .footer-cta a, .footer-cta button { transition: filter .15s; }
  .footer-cta a:hover, .footer-cta button:hover { transform: none; }
  .footer-cta a:hover::before, .footer-cta button:hover::before, .footer-cta .fc-ico { animation: none !important; }
}
@media (max-width: 640px) { .footer-cta { grid-template-columns: 1fr; } }
.footer-menu { display: flex; gap: 28px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-menu a { color: var(--ink-300); font-weight: 600; transition: color .15s; }
.footer-menu a:hover { color: #fff; }
.footer-sns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; padding: 30px 0 6px; }
.footer-sns a { position: relative; width: 40px; height: 40px; display: grid; place-items: center; opacity: .8; transition: opacity .15s, transform .15s; }
.footer-sns a:hover { opacity: 1; transform: translateY(-2px); }
.footer-sns img { width: 30px; height: 30px; }
/* SNS 호버 툴팁 */
.footer-sns a::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--ink-900); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  padding: 5px 10px; border-radius: 6px; white-space: nowrap; letter-spacing: -0.02em;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s var(--ease), transform .18s var(--ease);
  box-shadow: var(--shadow);
}
.footer-sns a:hover::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.footer-biz { margin-top: 22px; color: var(--ink-500); line-height: 1.85; font-size: var(--fs-xs); }
.footer-copy { margin-top: 20px; color: var(--ink-500); font-size: var(--fs-xs); }

/* ── 반응형 ── */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .course-grid, .review-grid { grid-template-columns: repeat(2, 1fr); }
  .nav { display: none; }
}
@media (max-width: 600px) {
  .hero { padding: 56px 0; }
  .hero h1, .hero .hero-title { font-size: var(--fs-3xl); }
  .course-grid, .review-grid { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .header-actions .btn span { display: none; }
}

/* ============================================================
   인프런 컨셉 — 공통 헤더(검색형) · 카탈로그 · 과정 상세
   ============================================================ */

/* ── 헤더(common.js) ── */
.header-inner { height: 100%; display: flex; align-items: center; gap: 20px; }
.gnb-search { flex: 1; max-width: 440px; display: flex; align-items: center; gap: 8px;
  background: var(--ink-100); border-radius: var(--radius-full); padding: 9px 16px; }
.gnb-search .si { color: var(--ink-400); font-size: 14px; }
.gnb-search input { border: none; background: none; outline: none; width: 100%; font-size: var(--fs-sm); color: var(--ink-800); }
.gnb { display: flex; gap: 2px; }
.gnb-link { padding: 8px 14px; border-radius: var(--radius-sm); font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--ink-700); transition: background .15s, color .15s; }
.gnb-link:hover { background: var(--green-50); color: var(--green-700); }
.gnb-link.active { color: var(--green-700); font-weight: var(--fw-bold); }
.btn-sm { padding: 8px 16px; font-size: var(--fs-sm); }
.footer-about p { margin-top: 10px; max-width: 24em; color: var(--ink-400); }

/* ── 코스 카드: 평점/수강생 행 ── */
.course-rating { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-500); }
.course-rating .star { color: #ffb020; font-weight: var(--fw-bold); }
.course-rating .score { color: var(--ink-800); font-weight: var(--fw-bold); }
.course-cat { font-size: var(--fs-xs); color: var(--green-700); font-weight: var(--fw-semibold); }

/* ── 카탈로그 ── */
.page-head { padding: 40px 0 4px; }
.page-head h1 { font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); letter-spacing: -0.03em; color: var(--ink-900); }
.page-head p { color: var(--ink-500); margin-top: 6px; }
.filter-bar { position: sticky; top: var(--header-h); background: rgba(255,255,255,.93); backdrop-filter: blur(8px); z-index: 20; padding: 16px 0; border-bottom: 1px solid var(--ink-100); }
.cat-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius-full);
  background: #fff; border: 1.5px solid var(--ink-200); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-600); cursor: pointer; transition: all .15s; }
.cat-chip:hover { border-color: var(--green-400); color: var(--green-700); }
.cat-chip.active { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.sort-bar { display: flex; justify-content: space-between; align-items: center; margin: 24px 0 18px; }
.sort-bar .count { color: var(--ink-500); font-size: var(--fs-sm); }
.sort-bar .count b { color: var(--ink-900); }
.sort-tabs { display: flex; gap: 4px; }
.sort-tab { padding: 7px 14px; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-500); cursor: pointer; background: none; }
.sort-tab.active { background: var(--ink-100); color: var(--ink-900); }
.catalog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-bottom: 80px; }

/* ── 과정 상세: 다크 히어로 ── */
.course-hero { background: linear-gradient(180deg, var(--green-900), var(--ink-900)); color: #fff; padding: 46px 0 40px; }
.course-hero .container { display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px; align-items: center; }
.breadcrumb { font-size: var(--fs-sm); color: rgba(255,255,255,.6); margin-bottom: 14px; }
.breadcrumb a:hover { color: #fff; }
.hero-badge { display: inline-block; background: var(--mint-500); color: #06281f; font-weight: var(--fw-extrabold); font-size: var(--fs-xs); padding: 5px 12px; border-radius: var(--radius-full); margin-bottom: 14px; }
.course-hero h1 { font-size: 2.05rem; font-weight: var(--fw-extrabold); letter-spacing: -0.03em; line-height: 1.25; }
.course-hero .sub { margin-top: 12px; color: rgba(255,255,255,.82); font-size: var(--fs-lg); }
.hero-stats2 { margin-top: 20px; display: flex; align-items: center; gap: 18px; font-size: var(--fs-sm); color: rgba(255,255,255,.85); flex-wrap: wrap; }
.hero-stats2 .star { color: #ffd05b; font-weight: var(--fw-bold); }
.hero-stats2 .who b { color: #fff; }
.hero-tags { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.hero-tags span { background: rgba(255,255,255,.12); padding: 5px 12px; border-radius: var(--radius-full); font-size: var(--fs-xs); }
.preview-box { background: #0b3a26; border-radius: var(--radius); aspect-ratio: 770/539; position: relative; display: grid; place-items: center; overflow: hidden; box-shadow: var(--shadow-lg); }
.preview-box .pv-grad { position: absolute; inset: 0; opacity: 1; background-size: cover !important; background-position: center !important; }
.preview-play { position: relative; background: rgba(255,255,255,.96); color: var(--ink-900); font-weight: var(--fw-bold); padding: 12px 22px; border-radius: var(--radius-full); display: inline-flex; gap: 8px; }

/* ── 과정 상세: 본문 + sticky 사이드바 ── */
.detail-wrap { display: grid; grid-template-columns: 1fr 360px; gap: 44px; align-items: start; padding-bottom: 80px; }
.tab-nav { position: sticky; top: var(--header-h); background: #fff; z-index: 15; display: flex; gap: 4px; border-bottom: 1px solid var(--ink-200); }
.tab-nav a { padding: 16px 14px; font-weight: var(--fw-bold); color: var(--ink-500); border-bottom: 2px solid transparent; font-size: var(--fs-sm); }
.tab-nav a.active, .tab-nav a:hover { color: var(--green-700); border-bottom-color: var(--green-600); }
.detail-section { padding: 38px 0; border-bottom: 1px solid var(--ink-100); }
.detail-section > h2 { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); letter-spacing: -0.02em; margin-bottom: 22px; }
.learn-box { background: var(--green-50); border: 1px solid var(--green-200); border-radius: var(--radius); padding: 26px; }
.learn-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.learn-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-700); font-size: var(--fs-sm); }
.learn-list .ck { color: var(--green-600); font-weight: var(--fw-extrabold); }

/* 커리큘럼 아코디언 */
.curriculum .meta-line { color: var(--ink-500); font-size: var(--fs-sm); margin-bottom: 16px; }
.curriculum .sec { border: 1px solid var(--ink-200); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.curriculum .sec-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; background: var(--green-50); border-left: 4px solid var(--green-500); color: var(--ink-900); font-weight: var(--fw-bold); font-size: var(--fs-lg); cursor: pointer; }
.curriculum .sec-head .cnt { color: var(--green-700); font-weight: var(--fw-semibold); font-size: var(--fs-sm); white-space: nowrap; }
.curriculum .les { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-top: 1px solid var(--ink-100); font-size: var(--fs-sm); color: var(--ink-700); }
.curriculum .les .ttl { display: flex; gap: 10px; align-items: center; }
.curriculum .les .ico { color: var(--ink-400); }
.curriculum .free { color: var(--green-700); font-weight: var(--fw-bold); font-size: var(--fs-xs); border: 1px solid var(--green-300); padding: 2px 7px; border-radius: 6px; }
.curriculum .dur { color: var(--ink-400); }
.curriculum .sec[data-open="0"] .sec-body { display: none; }
.curriculum .sec[data-open="0"] .sec-head .cnt { opacity: .7; }

/* 강사 카드 */
.instructor-card { display: flex; gap: 18px; align-items: center; }
.instructor-card .ava { width: 76px; height: 76px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--green-500), var(--mint-500)); display: grid; place-items: center; color: #fff; font-size: 30px; font-weight: var(--fw-extrabold); }
.instructor-card .nm { font-size: var(--fs-lg); font-weight: var(--fw-extrabold); }
.instructor-card .tt { color: var(--ink-500); font-size: var(--fs-sm); margin-top: 3px; }
.ref-logos { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.ref-logos span { background: var(--ink-100); color: var(--ink-600); font-size: var(--fs-xs); padding: 6px 13px; border-radius: var(--radius-full); }

/* 후기(상세) */
.rev-item { padding: 20px 0; border-bottom: 1px solid var(--ink-100); }
.rev-item .top { display: flex; justify-content: space-between; align-items: center; }
.rev-item .stars { color: #ffb020; letter-spacing: 1px; }
.rev-item .pct { color: var(--ink-400); font-size: var(--fs-xs); }
.rev-item .rtitle { font-weight: var(--fw-bold); margin-top: 8px; color: var(--ink-900); }
.rev-item .rbody { color: var(--ink-600); margin-top: 6px; font-size: var(--fs-sm); line-height: 1.7; }
.rev-item .rwho { color: var(--ink-400); font-size: var(--fs-xs); margin-top: 8px; }

/* sticky 구매 사이드바 */
.buy-card { position: sticky; top: 92px; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; z-index: 10; }
.detail-wrap { margin-top: 32px; }
.buy-banner { background: var(--green-600); color: #fff; text-align: center; padding: 10px; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.buy-sale { background: #dc2626; color: #fff; text-align: center; padding: 9px; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.buy-sale b { font-weight: 800; }
.buy-body { padding: 24px; }
.buy-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.buy-price .pct { color: #e5484d; font-weight: var(--fw-extrabold); font-size: var(--fs-xl); }
.buy-price .now { font-weight: var(--fw-extrabold); font-size: var(--fs-3xl); color: var(--ink-900); letter-spacing: -0.02em; }
.buy-price .was { color: var(--ink-400); text-decoration: line-through; font-size: var(--fs-sm); width: 100%; }
.buy-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.buy-meta { margin-top: 22px; border-top: 1px solid var(--ink-100); padding-top: 16px; }
.buy-meta .row { display: flex; justify-content: space-between; padding: 7px 0; font-size: var(--fs-sm); }
.buy-meta .row .k { color: var(--ink-500); }
.buy-meta .row .v { color: var(--ink-800); font-weight: var(--fw-semibold); }

@media (max-width: 980px) {
  .gnb-search { display: none; }
  .course-hero .container { grid-template-columns: 1fr; }
  .detail-wrap { grid-template-columns: 1fr; }
  .buy-card { position: static; margin-top: 24px; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .learn-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .catalog-grid { grid-template-columns: 1fr; }
  .gnb { display: none; }
}

/* ============================================================
   인증 · 마이페이지 · 강사소개 · 게시판
   ============================================================ */

/* ── 로그인/회원가입 ── */
.auth-wrap { min-height: calc(100vh - var(--header-h)); display: grid; place-items: center; padding: 48px 20px; background: var(--green-50); }
.auth-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--ink-100); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 40px 36px; }
.auth-card .a-logo { text-align: center; font-size: var(--fs-xl); font-weight: var(--fw-extrabold); color: var(--green-700); margin-bottom: 4px; }
.auth-card h1 { text-align: center; font-size: var(--fs-xl); font-weight: var(--fw-extrabold); margin-bottom: 26px; letter-spacing: -0.02em; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-700); margin-bottom: 7px; }
.field input { width: 100%; padding: 13px 15px; border: 1.5px solid var(--ink-200); border-radius: var(--radius-sm); font-size: var(--fs-base); font-family: inherit; transition: border-color .15s; }
.field input:focus { outline: none; border-color: var(--green-500); }

/* a11y: 키보드 포커스는 항상 보이게(마우스 클릭엔 영향 없음). !important로 곳곳의 outline:none 위에 우선 적용. */
:focus-visible { outline: 2px solid var(--green-600, #16a34a); outline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 2px solid var(--green-600, #16a34a) !important; outline-offset: 2px; }

.auth-msg { font-size: var(--fs-sm); padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; display: none; }
.auth-msg.err { display: block; background: #fdecec; color: #c0341a; }
.auth-msg.ok { display: block; background: var(--green-100); color: var(--green-700); }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--ink-400); font-size: var(--fs-sm); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--ink-200); }
.social-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border: 1.5px solid var(--ink-200); border-radius: var(--radius-sm); background: #fff; font-weight: var(--fw-semibold); font-size: var(--fs-sm); cursor: pointer; transition: background .15s; }
.social-btn:hover { background: var(--ink-100); }
.auth-foot { text-align: center; margin-top: 22px; font-size: var(--fs-sm); color: var(--ink-500); }
.auth-foot a { color: var(--green-700); font-weight: var(--fw-semibold); }

/* ── 페이지 히어로(공통) ── */
/* 위치 표시 띠(breadcrumb) — 헤더 아래·히어로 위, 모든 페이지 공통 */
.site-crumb { background: var(--ink-100); border-bottom: 1px solid var(--ink-200); }
.site-crumb .container { display: flex; align-items: center; gap: 7px; padding: 10px 0; font-size: var(--fs-sm); color: var(--ink-500); flex-wrap: wrap; }
.site-crumb a { color: var(--ink-600); }
.site-crumb a:hover { color: var(--green-700); }
.site-crumb .sc-cur { color: var(--ink-900); font-weight: var(--fw-bold); }
.site-crumb .sc-sep { font-style: normal; color: var(--ink-300); }

.page-hero { background: radial-gradient(620px 300px at 88% -20%, var(--green-600), transparent 60%), linear-gradient(135deg, var(--green-800), var(--green-900)); color: #fff; padding: 46px 0; }
.page-hero .kk { color: var(--green-300); margin-bottom: 7px; }
.page-hero h1 { font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); letter-spacing: -0.02em; line-height: 1.25; word-break: keep-all; }
.page-hero p { color: rgba(255,255,255,.85); margin-top: 10px; font-size: var(--fs-lg); line-height: 1.6; word-break: keep-all; }

/* 진행 프로세스(이렇게 진행됩니다) — business.html·index.html 공용 */
.biz-process { display: flex; align-items: flex-start; gap: 4px; position: relative; }
.biz-process::before { content: ""; position: absolute; top: 38px; left: 9%; right: 9%; height: 2px; background: repeating-linear-gradient(90deg, rgba(127,224,173,.45) 0 5px, transparent 5px 11px); }
.bp-step { flex: 1; text-align: center; position: relative; z-index: 1; padding: 0 4px; }
.bp-node { width: 76px; height: 76px; border-radius: 50%; background: var(--green-800); border: 1.5px solid rgba(127,224,173,.55); display: flex; align-items: center; justify-content: center; color: #7fe0ad; margin: 0 auto 16px; position: relative; transition: transform .28s var(--ease), background .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease); }
.bp-node svg { width: 32px; height: 32px; transition: transform .28s var(--ease); }
.bp-num { position: absolute; top: -2px; right: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--green-600); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; border: 2px solid var(--green-900); transition: transform .28s var(--ease), background .28s var(--ease); }
.bp-step:hover .bp-node { transform: translateY(-4px) scale(1.1); background: var(--green-600); border-color: var(--mint-400); color: #fff; box-shadow: 0 0 0 6px rgba(33,184,102,.16), 0 14px 32px rgba(20,196,160,.38); }
.bp-step:hover .bp-node svg { transform: scale(1.08); }
.bp-step:hover .bp-num { transform: scale(1.18); background: var(--mint-500); border-color: var(--green-800); }
.bp-step h4 { font-size: var(--fs-base); font-weight: var(--fw-extrabold); color: #fff; margin: 0 0 5px; transition: color .25s var(--ease); }
.bp-step:hover h4 { color: var(--mint-400); }
.bp-step p { font-size: var(--fs-xs); color: rgba(255,255,255,.62); margin: 0; line-height: 1.5; }
#bizProcess .section-head h2 { color: #fff; }
#bizProcess .section-head .kk { color: var(--green-300); }
@media (max-width: 820px) { .biz-process { flex-direction: column; align-items: center; gap: 26px; } .biz-process::before { display: none; } .bp-step { width: 100%; max-width: 340px; } }
/* 후기 목록 행 — 개별 글 페이지(/post/{code})로 이동하는 링크 */
.ref-row { display: flex; align-items: center; gap: 14px; padding: 17px 8px; border-bottom: 1px solid var(--ink-100); color: var(--ink-800); transition: background .12s; }
.ref-row:hover { background: var(--green-50); }
.ref-row .acc-title { flex: 1; font-weight: var(--fw-medium); font-size: var(--fs-base); }
.ref-row .acc-meta { color: var(--ink-400); font-size: var(--fs-sm); white-space: nowrap; }
.ref-row .acc-ar { color: var(--ink-300); font-size: 1.2rem; transform: none; }
/* 글 하단 목록 (post 페이지) */
.post-list { margin-top: 52px; }
.post-list h2 { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--green-100); }
.ref-row.cur { background: var(--green-50); font-weight: var(--fw-bold); pointer-events: none; }
.ref-row.cur .acc-title { color: var(--green-700); }
.ref-row.cur .acc-ar { display: none; }
/* 좌측 연·월 타임라인 라벨 (월이 바뀔 때만 표시, 크고 옅게) */
.ref-row .ref-ym { flex: 0 0 62px; text-align: right; color: var(--ink-300); font-weight: var(--fw-extrabold); letter-spacing: -0.02em; line-height: 1.04; align-self: center; font-variant-numeric: tabular-nums; }
.ref-row .ref-ym b { display: block; font-size: 1.6rem; }
.ref-row.cur .ref-ym { color: var(--green-300); }
@media (max-width: 560px) { .ref-row .ref-ym { flex-basis: 42px; } .ref-row .ref-ym b { font-size: 1.05rem; } .ref-row { gap: 9px; } }

/* ── 마이페이지(내 강의실) ── */
.my-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ink-200); margin: 28px 0 24px; }
.my-tab { padding: 12px 18px; font-weight: var(--fw-bold); color: var(--ink-500); border-bottom: 2px solid transparent; cursor: pointer; background: none; font-size: var(--fs-sm); }
.my-tab.active { color: var(--green-700); border-bottom-color: var(--green-600); }
.my-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding-bottom: 60px; }
.my-card { background: #fff; border: 1px solid var(--ink-100); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.my-card .thumb { aspect-ratio: 770/539; display: grid; place-items: center; color: #fff; text-align: center; font-weight: var(--fw-bold); padding: 0 16px; background-size: cover; background-position: center; }
.my-card .body { padding: 18px; }
.my-card h3 { font-size: var(--fs-base); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.my-card .prog { margin-top: 14px; }
.my-card .prog .lbl { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--ink-500); margin-bottom: 6px; }
.my-card .prog .lbl b { color: var(--green-600); }
.progress-bar { height: 8px; background: var(--ink-100); border-radius: 99px; overflow: hidden; }
.progress-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--green-500), var(--mint-500)); border-radius: 99px; }
.empty-state { text-align: center; padding: 80px 20px; color: var(--ink-500); }
.empty-state .ico { font-size: 44px; }

/* ── 강사소개 (b2bai.kr 구조) ── */
.inst-wrap { max-width: 1120px; margin: 0 auto; padding: 44px 24px 24px; }
.inst-top { display: flex; gap: 32px; margin-bottom: 36px; align-items: center; }
.inst-photo { flex-shrink: 0; width: 260px; border-radius: var(--radius-lg); overflow: hidden;
  background: #fff; border: 1px solid var(--ink-200); box-shadow: var(--shadow-sm); }
.inst-photo img { width: 100%; display: block; }
.inst-info { flex: 1; min-width: 0; }
.inst-info .nm { font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); letter-spacing: -0.02em; }
.inst-info .tag { font-size: var(--fs-lg); color: var(--ink-500); margin: 8px 0 24px; }
.inst-stats3 { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.inst-stats3 .s { flex: 1; min-width: 100px; background: var(--green-50); border: 1px solid var(--green-100); border-radius: var(--radius); padding: 18px 12px; text-align: center; }
.inst-stats3 .s .n { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); color: var(--green-700); letter-spacing: -0.02em; }
.inst-stats3 .s .l { font-size: var(--fs-xs); color: var(--ink-500); font-weight: var(--fw-semibold); margin-top: 4px; }
.inst-clients .ct { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-400); margin-bottom: 10px; }
.inst-clients .chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inst-clients .chips span { padding: 6px 15px; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-800); }
.inst-clients .chips span.more { background: transparent; border-style: dashed; border-color: var(--ink-300); color: var(--ink-400); font-weight: var(--fw-semibold); }
.inst-fields { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.inst-fields span { font-size: var(--fs-xs); font-weight: var(--fw-bold); padding: 5px 12px; border-radius: var(--radius-full); background: var(--green-50); color: var(--green-800); border: 1px solid var(--green-100); }
.ip-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ip-chips span { padding: 8px 16px; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-800); }
.ip-chips span.more { background: var(--green-50); border-color: var(--green-200); color: var(--green-700); font-weight: var(--fw-semibold); }
.inst-sec { margin-bottom: 22px; }
.inst-sec h3 { font-size: var(--fs-base); font-weight: var(--fw-bold); margin-bottom: 12px; padding: 11px 18px; background: linear-gradient(135deg, var(--green-800), var(--green-600)); color: #fff; border-radius: var(--radius); }
/* 섹션 아이콘 — 진한 초록 헤딩 위 밝은 골드 라인 아이콘(배경 없음) */
.inst-sec h3 .ish-ic { display: inline-flex; align-items: center; margin-right: 8px; vertical-align: -.2em; color: #FCD34D; }
.inst-sec h3 .ish-ic svg { width: 1.18em; height: 1.18em; display: block; }
.inst-sec ul { list-style: none; }
.inst-sec li { padding: 9px 2px; font-size: var(--fs-sm); color: var(--ink-700); border-bottom: 1px solid var(--ink-100); line-height: 1.6; }
.inst-sec li::before { content: '✓ '; color: var(--green-600); font-weight: var(--fw-bold); }
.inst-courses-head { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); letter-spacing: -0.02em; margin: 40px 0 18px; }
.inst-cta { text-align: center; margin: 36px 0 8px; }

@media (max-width: 820px) {
  .inst-top { flex-direction: column; align-items: center; text-align: center; }
  .inst-photo { width: 220px; }
  .inst-clients .chips { justify-content: center; }
}

/* ── 게시판 ── */
.board-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ink-200); margin-top: 28px; }
.board-tab { padding: 12px 18px; font-weight: var(--fw-bold); color: var(--ink-500); border-bottom: 2px solid transparent; cursor: pointer; background: none; }
.board-tab.active { color: var(--green-700); border-bottom-color: var(--green-600); }
.board-list { padding: 8px 0 80px; }
.board-row { display: flex; align-items: center; gap: 16px; padding: 20px 8px; border-bottom: 1px solid var(--ink-100); }
.board-row .num { color: var(--ink-400); font-weight: var(--fw-bold); width: 28px; text-align: center; }
.board-row .bt { flex: 1; }
.board-row .bt .t { font-weight: var(--fw-semibold); color: var(--ink-900); }
.board-row .bt .m { font-size: var(--fs-sm); color: var(--ink-400); margin-top: 4px; }
.board-row .date { color: var(--ink-400); font-size: var(--fs-sm); white-space: nowrap; }
.pin { color: var(--green-700); font-weight: var(--fw-bold); font-size: var(--fs-xs); border: 1px solid var(--green-300); padding: 2px 7px; border-radius: 6px; margin-right: 8px; }
.board-row.board-click { cursor: pointer; transition: background .15s; border-radius: var(--radius-sm); }
.board-row.board-click:hover { background: var(--green-50); }
.board-row .board-arrow { color: var(--ink-400); font-size: var(--fs-sm); white-space: nowrap; }
.board-row.board-click:hover .board-arrow { color: var(--green-700); }

@media (max-width: 920px) {
  .my-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .my-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   수강 플레이어
   ============================================================ */
.player-top { background: var(--ink-900); color: #fff; height: 60px; display: flex; align-items: center; padding: 0 20px; gap: 16px; position: sticky; top: 0; z-index: 30; }
.player-top a.back { color: rgba(255,255,255,.8); font-size: var(--fs-sm); display: inline-flex; gap: 6px; align-items: center; }
.player-top a.back:hover { color: #fff; }
.player-top .ptitle { font-weight: var(--fw-bold); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-top .pprog { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: rgba(255,255,255,.85); white-space: nowrap; }
.player-top .pprog .bar { width: 120px; height: 6px; background: rgba(255,255,255,.2); border-radius: 99px; overflow: hidden; }
.player-top .pprog .bar > i { display: block; height: 100%; background: var(--mint-500); transition: width .3s; }
.player-grid { display: grid; grid-template-columns: 1fr 360px; min-height: calc(100vh - 60px); }
.player-main { background: #0b0f0d; }
.player-video { width: 100%; aspect-ratio: 16/9; background: #000; position: relative; }
.player-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-novideo { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.55); text-align: center; padding: 20px; }
.player-info { padding: 24px 28px; color: #e7ece9; }
.player-info h1 { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); }
.player-info .pmeta { color: #9bb0a6; font-size: var(--fs-sm); margin-top: 6px; }
.player-tabs { display: flex; gap: 4px; border-bottom: 1px solid rgba(255,255,255,.1); margin-top: 20px; }
.player-tabs button { padding: 12px 14px; color: #9bb0a6; font-weight: var(--fw-bold); font-size: var(--fs-sm); border-bottom: 2px solid transparent; background: none; }
.player-tabs button.active { color: #fff; border-bottom-color: var(--mint-500); }
.player-tabbody { padding: 22px 2px; color: #c3ccc6; line-height: 1.8; font-size: var(--fs-sm); }
.player-side { background: #fff; border-left: 1px solid var(--ink-200); overflow-y: auto; max-height: calc(100vh - 60px); }
.player-side .ps-head { padding: 18px 20px; border-bottom: 1px solid var(--ink-100); font-weight: var(--fw-extrabold); position: sticky; top: 0; background: #fff; }
.player-side .ps-head .sub { font-weight: var(--fw-regular); color: var(--ink-500); font-size: var(--fs-xs); margin-top: 4px; }
.player-side .ps-sec { padding: 16px 20px 6px; font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--ink-600); background: var(--ink-100); }
.player-side .ps-les { display: flex; gap: 10px; align-items: center; padding: 13px 20px; cursor: pointer; font-size: var(--fs-sm); border-left: 3px solid transparent; border-bottom: 1px solid var(--ink-100); }
.player-side .ps-les:hover { background: var(--green-50); }
.player-side .ps-les.active { background: var(--green-50); border-left-color: var(--green-600); font-weight: var(--fw-bold); }
.player-side .ps-les .ico { color: var(--ink-400); flex: 0 0 auto; }
.player-side .ps-les.active .ico { color: var(--green-600); }
.player-side .ps-les .t { flex: 1; color: var(--ink-800); }
.player-side .ps-les .d { color: var(--ink-400); font-size: var(--fs-xs); }
.player-side .ps-les .free { color: var(--green-700); font-weight: var(--fw-bold); font-size: 10px; border: 1px solid var(--green-300); padding: 1px 5px; border-radius: 4px; }
.player-side .ps-les .lock { color: var(--ink-300); }
@media (max-width: 920px) {
  .player-grid { grid-template-columns: 1fr; }
  .player-side { max-height: none; border-left: 0; border-top: 1px solid var(--ink-200); }
}

/* ============================================================
   운영자 콘솔 (admin)
   ============================================================ */
/* 상단 바: 대분류 메뉴 (한 줄, 넘치면 가로 스크롤) */
.admin-bar { background: var(--ink-900); color: #fff; height: 60px; position: sticky; top: 0; z-index: 40; }
.admin-bar-inner { height: 100%; display: flex; align-items: center; gap: 18px; padding: 0 24px; }
.abrand { font-weight: var(--fw-extrabold); color: #fff; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; }
.abrand span { font-size: var(--fs-xs); background: var(--green-600); padding: 2px 8px; border-radius: 6px; margin-left: 6px; }
.amain-nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.amain-nav::-webkit-scrollbar { display: none; }
.amain { display: inline-flex; align-items: center; gap: 3px; padding: 8px 14px; border-radius: var(--radius-sm); color: rgba(255,255,255,.75); font-weight: var(--fw-semibold); font-size: var(--fs-sm); white-space: nowrap; background: none; border: none; cursor: pointer; font-family: inherit; }
.amain i { font-style: normal; font-size: 10px; opacity: .55; }
.amain:hover { background: rgba(255,255,255,.1); color: #fff; }
.amain.active { background: var(--green-600); color: #fff; }
.nbadge { display: inline-block; min-width: 16px; height: 16px; line-height: 16px; text-align: center; background: #dc2626; color: #fff; font-size: 10px; font-weight: 800; border-radius: 9px; padding: 0 4px; margin-left: 5px; vertical-align: middle; }
.aside-link .nbadge { margin-left: 6px; }
.aright { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: var(--fs-sm); color: rgba(255,255,255,.8); flex-shrink: 0; position: relative; }
/* 운영자 알림센터(🔔) */
.anotif-btn { position: relative; border: 0; background: transparent; border-radius: 8px; width: 32px; height: 32px; font-size: 17px; cursor: pointer; line-height: 1; color: rgba(255,255,255,.82); padding: 0; flex-shrink: 0; transition: background .12s, color .12s; }
.anotif-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.anotif-btn:focus { outline: none; }
.anotif-btn:focus-visible { outline: 2px solid rgba(255,255,255,.45); outline-offset: 2px; }
.anotif-badge { position: absolute; top: 0; right: 0; background: #ef4444; color: #fff; font-size: 9px; font-weight: 700; min-width: 13px; height: 13px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; box-shadow: 0 0 0 1.5px #12281c; }
.anotif-panel { position: absolute; top: 46px; right: 0; width: 290px; background: #fff; border: 1px solid var(--ink-100); border-radius: 14px; box-shadow: 0 14px 44px rgba(0,0,0,.22); z-index: 300; overflow: hidden; padding: 6px; }
.anotif-head { font-size: 12px; font-weight: 800; color: var(--ink-500); padding: 9px 10px 5px; }
.anotif-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 9px; text-decoration: none; color: var(--ink-700); }
.anotif-row:hover { background: var(--ink-50); color: var(--ink-700); }
.anotif-row .ico { font-size: 16px; }
.anotif-row .lbl { flex: 1; font-size: 13px; font-weight: 600; }
.anotif-row .cnt { font-size: 12px; font-weight: 800; color: var(--ink-300); min-width: 22px; text-align: center; }
.anotif-row .cnt.on { background: #fee2e2; color: #b91c1c; border-radius: 999px; padding: 1px 8px; }
.anotif-empty { font-size: 12px; color: var(--ink-400); padding: 12px 10px; text-align: center; }
.aright a:hover { color: #fff; }
.aright .acf-link { background: #f6821f; color: #fff !important; padding: 5px 12px; border-radius: var(--radius-sm); font-weight: var(--fw-bold); white-space: nowrap; }
.aright .acf-link:hover { background: #d96d12; }
.awho { color: rgba(255,255,255,.55); font-size: var(--fs-xs); white-space: nowrap; }

/* 좌측 사이드바: 대분류 클릭 시 서브메뉴 표시 (서브 없는 메뉴에선 숨김) */
.admin-side { display: none; position: fixed; left: 0; top: 60px; bottom: 0; width: 230px; background: #fff; border-right: 1px solid var(--ink-100); overflow-y: auto; z-index: 30; padding: 20px 0; }
body.admin-has-side .admin-side { display: block; }
.aside-title { font-size: var(--fs-xs); font-weight: var(--fw-extrabold); color: var(--ink-400); letter-spacing: 0.06em; padding: 0 22px 14px; }
.aside-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.aside-link { padding: 11px 14px; border-radius: var(--radius-sm); color: var(--ink-700); font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; }
.aside-link:hover { background: var(--green-50); color: var(--green-700); }
.aside-link.active { background: var(--green-100); color: var(--green-700); }
.admin-backdrop { display: none; }

/* 본문: 사이드바 있을 때 그만큼 밀어준다 */
.admin-main { padding: 32px 0 100px; }
body.admin-has-side .admin-main { margin: 0 0 0 230px; max-width: 1240px; padding-left: 40px; padding-right: 40px; }
.ahamburger { display: none; background: none; border: 0; color: #fff; font-size: 21px; line-height: 1; cursor: pointer; padding: 4px 10px 4px 2px; margin-right: 2px; }
.admin-main h1 { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); letter-spacing: -0.02em; }
.admin-sub { color: var(--ink-500); margin-top: 4px; }
.admin-head-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; }

.admin-gate { position: fixed; inset: 0; background: rgba(12,20,16,.55); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 100; }
.gate-card { background: #fff; border-radius: var(--radius-lg); padding: 40px; width: 360px; text-align: center; box-shadow: var(--shadow-lg); }

.admin-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin: 24px 0; }
.astat { background: #fff; border: 1px solid var(--ink-100); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.astat .n { font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); color: var(--green-700); letter-spacing: -0.02em; }
.astat .l { color: var(--ink-500); font-size: var(--fs-sm); margin-top: 4px; }
.admin-card { background: #fff; border: 1px solid var(--ink-100); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm); margin-bottom: 20px; }
.admin-card h2 { font-size: var(--fs-lg); font-weight: var(--fw-extrabold); margin-bottom: 8px; }

.atable { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--ink-100); }
.atable th { text-align: left; padding: 14px 16px; background: var(--ink-100); font-size: var(--fs-sm); color: var(--ink-600); font-weight: var(--fw-bold); }
.atable td { padding: 12px 16px; border-top: 1px solid var(--ink-100); font-size: var(--fs-sm); vertical-align: middle; }
.atable tr:hover td { background: var(--green-50); }
.atable .thumbm { width: 64px; height: 38px; border-radius: 6px; }
.badge-status { font-size: var(--fs-xs); font-weight: var(--fw-bold); padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.badge-status.published { background: var(--green-100); color: var(--green-700); }
.badge-status.draft { background: var(--ink-100); color: var(--ink-500); }

/* ── 운영자 공통 테마(동일 디자인 컨셉) — 배경 틴트 + 카드/표 입체화. .admin-bar 있는 페이지에만 적용(:has) ── */
body:has(.admin-bar) { background: #e9efeb; }
body:has(.admin-bar) .astat,
body:has(.admin-bar) .admin-card,
body:has(.admin-bar) .admin-form { border-color: #dde6e0; box-shadow: 0 1px 2px rgba(18,40,28,.04), 0 5px 16px rgba(18,40,28,.06); }
body:has(.admin-bar) .astat { border-radius: 16px; }
body:has(.admin-bar) .admin-card, body:has(.admin-bar) .admin-form { border-radius: 18px; }
body:has(.admin-bar) .atable { border-color: #dde6e0; box-shadow: 0 1px 2px rgba(18,40,28,.04), 0 4px 14px rgba(18,40,28,.05); border-radius: 14px; }
body:has(.admin-bar) .atable th { background: #f1f5f3; color: var(--ink-500); border-bottom: 1px solid #e2e8e4; }
body:has(.admin-bar) .atable tr:hover td { background: #f3f8f5; }

.admin-form { background: #fff; border: 1px solid var(--ink-100); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.admin-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.admin-form .full { grid-column: 1 / -1; }
.admin-form label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-700); margin-bottom: 6px; }
.admin-form input, .admin-form select, .admin-form textarea { width: 100%; padding: 11px 13px; border: 1.5px solid var(--ink-200); border-radius: var(--radius-sm); font-family: inherit; font-size: var(--fs-sm); background: #fff; }
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus { outline: none; border-color: var(--green-500); }
.admin-form .hint { font-size: var(--fs-xs); color: var(--ink-400); margin-top: 4px; }
.form-section-title { font-weight: var(--fw-extrabold); font-size: var(--fs-lg); margin: 28px 0 14px; padding-top: 22px; border-top: 1px solid var(--ink-100); }

.curr-sec { border: 1px solid var(--ink-200); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.curr-sec-head { display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: var(--ink-100); }
.curr-sec-head input { flex: 1; font-weight: var(--fw-bold); }
.curr-les { display: grid; grid-template-columns: 1fr 96px 1.2fr 70px 34px; gap: 8px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--ink-100); }
.curr-les .chk { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--ink-600); justify-content: center; }
.icon-x { width: 32px; height: 32px; border-radius: 6px; background: #fdecec; color: #c0341a; font-weight: var(--fw-bold); }
.icon-x:hover { background: #fbd9d9; }
.btn-add { background: var(--green-50); color: var(--green-700); border: 1px dashed var(--green-300); padding: 9px 14px; border-radius: var(--radius-sm); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.btn-add:hover { background: var(--green-100); }
.save-bar { position: sticky; bottom: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--ink-200); padding: 16px 0; margin-top: 24px; display: flex; gap: 10px; justify-content: flex-end; z-index: 30; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink-900); color: #fff; padding: 12px 22px; border-radius: var(--radius-full); font-size: var(--fs-sm); z-index: 200; box-shadow: var(--shadow-lg); }

/* 모바일: 사이드바를 드로어로 (대분류 누르면 슬라이드 인, 백드롭 클릭 시 닫힘) */
@media (max-width: 980px) {
  body.admin-has-side .admin-main { margin: 0; padding-left: 20px; padding-right: 20px; }
  .admin-side { transform: translateX(-100%); transition: transform .25s var(--ease); z-index: 45; box-shadow: var(--shadow-lg); }
  body.admin-side-open .admin-side { transform: translateX(0); }
  .admin-backdrop { position: fixed; inset: 60px 0 0; background: rgba(12,20,16,.4); z-index: 44; }
  body.admin-side-open .admin-backdrop { display: block; }
  body.admin-has-side .ahamburger { display: inline-flex; align-items: center; }
}
@media (max-width: 820px) {
  .admin-stats { grid-template-columns: repeat(2,1fr); }
  .admin-form .form-grid { grid-template-columns: 1fr; }
  .curr-les { grid-template-columns: 1fr; gap: 6px; }
}

/* ── 수료증 ── */
.cert-page { background: var(--ink-100); min-height: 100vh; padding: 36px 16px 80px; }
.cert-toolbar { max-width: 960px; margin: 0 auto 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cert-toolbar .t { font-weight: var(--fw-extrabold); color: var(--ink-800); }
.cert-paper { max-width: 960px; margin: 0 auto; background: #fff; aspect-ratio: 1.414 / 1; box-shadow: var(--shadow-lg); position: relative; }
.cert-border { position: absolute; inset: 20px; border: 3px double var(--green-600); }
.cert-inner { position: absolute; inset: 54px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cert-logo { height: 46px; }
.cert-h1 { font-size: clamp(2.2rem,5vw,3.4rem); font-weight: var(--fw-extrabold); letter-spacing: 0.35em; color: var(--green-800); margin: 20px 0 4px; padding-left: 0.35em; }
.cert-no { color: var(--ink-400); font-size: var(--fs-sm); letter-spacing: 0.05em; }
.cert-name { font-size: clamp(1.6rem,4vw,2.2rem); font-weight: var(--fw-extrabold); color: var(--ink-900); margin-top: 34px; border-bottom: 2px solid var(--ink-300); padding: 0 26px 8px; }
.cert-statement { margin-top: 26px; font-size: clamp(1rem,2vw,1.18rem); line-height: 2.1; color: var(--ink-700); max-width: 34em; }
.cert-statement b { color: var(--green-700); font-weight: var(--fw-bold); }
.cert-bottom { margin-top: auto; width: 100%; }
.cert-date { font-size: var(--fs-lg); color: var(--ink-700); }
.cert-issuer { margin-top: 14px; font-size: clamp(1.1rem,2.4vw,1.5rem); font-weight: var(--fw-extrabold); color: var(--ink-900); display: inline-flex; align-items: center; gap: 14px; }
.cert-seal { width: 62px; height: 62px; border: 2px solid #c0341a; color: #c0341a; border-radius: 50%; display: grid; place-items: center; font-weight: var(--fw-bold); font-size: 12px; line-height: 1.2; transform: rotate(-8deg); opacity: .85; }
@media (max-width: 720px) { .cert-inner { inset: 26px; } .cert-name { margin-top: 18px; } .cert-statement { margin-top: 16px; line-height: 1.9; } }

/* ============================================================
   상세페이지(홍보 랜딩) — 홈 내 섹션 (POP 시안 기반)
   ============================================================ */

/* 교육 파트너(신뢰 밴드) */
.partners { padding: 54px 0; background: #fff; border-bottom: 1px solid var(--ink-100); }
.partners-head { text-align: center; margin-bottom: 28px; }
.partners-head .kk { color: var(--green-600); font-weight: var(--fw-bold); font-size: var(--fs-sm); letter-spacing: 0.08em; }
.partners-head h2 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--ink-800); margin-top: 8px; letter-spacing: -0.02em; }
.partners-head h2 b { color: var(--green-700); font-weight: var(--fw-extrabold); }
.partner-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.partner-chips span { background: var(--ink-100); color: var(--ink-700); font-weight: var(--fw-semibold); font-size: var(--fs-base); padding: 11px 22px; border-radius: var(--radius-full); }
.partner-chips span.more { background: var(--green-600); color: #fff; }

/* 다크 프로모 섹션 공통 (Problem · Benefit) */
.promo-dark { color: #fff; padding: 84px 0;
  background:
    radial-gradient(620px 360px at 82% -4%, var(--green-700), transparent 60%),
    linear-gradient(165deg, var(--green-900) 0%, var(--ink-900) 100%); }
.promo-eyebrow { text-align: center; color: var(--green-300); font-weight: var(--fw-bold); letter-spacing: 0.12em; font-size: var(--fs-base); }
.promo-title { text-align: center; font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); letter-spacing: -0.03em; line-height: 1.25; margin-top: 12px; }
.promo-title b { color: var(--green-300); }

/* Problem */
.problem-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.pcard { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); padding: 30px 26px; }
.pcard .pno { color: var(--green-300); font-weight: var(--fw-extrabold); font-size: var(--fs-sm); }
.pcard h3 { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); margin-top: 10px; letter-spacing: -0.02em; }
.pcard > p { color: rgba(255,255,255,.62); font-size: var(--fs-sm); margin-top: 8px; }
.pcard .quote { margin-top: 20px; background: rgba(0,0,0,.25); border-radius: var(--radius); padding: 14px 16px; color: var(--green-100); font-size: var(--fs-sm); }
/* Problem 섹션 경각심: 레드 경고 톤 — 강화판 */
@keyframes warn-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,80,85,.0); border-color: rgba(255,80,85,.4); } 50% { box-shadow: 0 0 16px 1px rgba(255,80,85,.55); border-color: rgba(255,90,95,.85); } }
@keyframes pico-throb { 0%,100% { box-shadow: 0 0 18px 2px rgba(255,80,85,.45); } 50% { box-shadow: 0 0 30px 6px rgba(255,80,85,.85); } }
.problem-sec { background:
    radial-gradient(680px 320px at 50% -6%, rgba(255,60,65,.16), transparent 62%),
    radial-gradient(620px 360px at 82% -4%, var(--green-800), transparent 60%),
    linear-gradient(165deg, var(--green-900) 0%, var(--ink-900) 100%); }
.problem-sec .promo-eyebrow { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 0 auto; color: #ff5a5e; font-size: var(--fs-sm); font-weight: var(--fw-extrabold); letter-spacing: .16em; padding: 7px 18px; border-radius: var(--radius-full); background: rgba(255,60,65,.14); border: 1px solid rgba(255,80,85,.4); animation: warn-pulse 1.8s ease-in-out infinite; }
.problem-sec .promo-title { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin-top: 18px; }
.problem-sec .promo-title b { color: #ff5a5e; text-shadow: 0 0 38px rgba(255,80,85,.7); }
.problem-sec .promo-sub { text-align: center; color: rgba(255,255,255,.68); font-size: var(--fs-base); margin-top: 14px; }
.problem-sec .problem-cards { margin-top: 46px; }
.pico { width: 56px; height: 56px; border-radius: 15px; background: rgba(255,60,65,.26); color: #ff7a7d; border: 1px solid rgba(255,80,85,.4); box-shadow: 0 0 0 0 rgba(255,80,85,0); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; transition: transform .25s var(--ease), background .25s, box-shadow .25s, color .25s, border-color .25s; }
.pico svg { width: 28px; height: 28px; }
.problem-sec .pcard { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255,55,60,.11), rgba(255,55,60,.035)); border-color: rgba(255,80,85,.42); transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease), background .24s; }
.problem-sec .pcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #ff3a3e, #ff8a8c); transform: scaleX(.35); transform-origin: left; opacity: .8; transition: transform .32s var(--ease), opacity .32s, box-shadow .32s; }
.problem-sec .pcard:hover { transform: translateY(-12px) scale(1.035); box-shadow: 0 30px 70px rgba(229,40,50,.5), 0 0 0 1px rgba(255,90,95,.65) inset; border-color: #ff4a4e; background: linear-gradient(180deg, rgba(255,55,60,.22), rgba(255,55,60,.08)); }
.problem-sec .pcard:hover::before { transform: scaleX(1); opacity: 1; box-shadow: 0 0 16px rgba(255,80,85,.9); }
.problem-sec .pcard:hover .pico { transform: scale(1.28) rotate(-8deg); background: #ff3a3e; color: #fff; border-color: #ff8a8c; animation: pico-throb 1.1s ease-in-out infinite; }
.problem-sec .pcard:hover h3 { color: #ffb0b2; }
.problem-sec .pcard:hover .pno { color: #ff8a8c; }
.problem-sec .pcard h3 { transition: color .24s var(--ease); }
.problem-sec .pcard .pno { color: #ff6b6e; font-size: var(--fs-xs); letter-spacing: .1em; transition: color .24s var(--ease); }
.problem-sec .pcard .quote { margin-top: 22px; background: rgba(200,30,35,.2); border-left: 4px solid #ff4a4e; border-radius: 0 var(--radius) var(--radius) 0; color: #ffd0d1; font-size: var(--fs-sm); font-weight: var(--fw-medium); transition: border-color .24s, background .24s, transform .24s var(--ease); }
.problem-sec .pcard:hover .quote { background: rgba(220,40,45,.32); border-left-color: #ff8a8c; transform: translateX(3px); }

/* Solution — 옅은 배경 + 흰 카드 리디자인 (상단 그린 액센트 바 · 라인 아이콘 · 문제↔해결 배지 · 숫자 근거) */
.promo-solution { background: #f3f8f5; }
.solution-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.spoint { position: relative; overflow: hidden; text-align: left; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius-lg); padding: 26px 24px 24px; box-shadow: var(--shadow-sm); transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease); }
.spoint::before { content: ""; position: absolute; top: 0; left: 0; width: 42%; height: 3px; background: linear-gradient(90deg, var(--green-500), var(--green-300)); transition: width .32s var(--ease); }
.spoint:hover { transform: translateY(-8px); box-shadow: 0 22px 48px rgba(20,180,120,.22); border-color: var(--green-300); }
.spoint:hover::before { width: 100%; }
.spoint .sp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.spoint .sico { width: 56px; height: 56px; margin: 0; border-radius: 15px; background: var(--green-100); display: grid; place-items: center; color: var(--green-700); transition: transform .26s var(--ease), background .26s var(--ease), color .26s var(--ease), box-shadow .26s var(--ease); }
.spoint .sico svg { width: 28px; height: 28px; }
.spoint:hover .sico { background: var(--green-600); color: #fff; transform: scale(1.1) rotate(-6deg); box-shadow: 0 8px 20px rgba(33,184,102,.4); }
.spoint .sp-badge { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: #cf3a3d; background: #fdebeb; padding: 4px 10px; border-radius: var(--radius-full); white-space: nowrap; flex: 0 0 auto; }
.spoint h3 { font-size: var(--fs-lg); font-weight: var(--fw-extrabold); color: var(--ink-900); }
.spoint > p { color: var(--ink-500); font-size: var(--fs-sm); margin-top: 8px; line-height: 1.6; }
.spoint .sp-stat { display: flex; align-items: baseline; gap: 6px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--ink-100); }
.spoint .sp-stat .num { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); color: var(--green-600); line-height: 1; }
.spoint .sp-stat .lbl { font-size: var(--fs-xs); color: var(--ink-500); }

/* Before / After — 딥그린 다크 배경 + 큰 볼드 텍스트 (적 고통 → 그린 성취) */
.promo-ba { background: radial-gradient(720px 340px at 50% -10%, rgba(33,184,102,.2), transparent 62%), linear-gradient(165deg, var(--green-900) 0%, #06231a 100%); }
.promo-ba .kk { color: var(--green-300); }
.promo-ba .section-head h2 { color: #fff; }
.promo-ba .section-head p { color: rgba(255,255,255,.72); }
.ba-rows { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.ba-colhead, .ba-row { display: grid; grid-template-columns: 1fr 68px 1fr; align-items: center; }
.ba-colhead { margin-bottom: 4px; }
.ba-h { justify-self: center; font-size: var(--fs-base); font-weight: var(--fw-extrabold); padding: 6px 20px; border-radius: var(--radius-full); }
.ba-h-before { color: #ffb3b1; background: rgba(192,68,63,.24); }
.ba-h-after { color: #fff; background: var(--green-600); box-shadow: 0 4px 16px rgba(22,163,90,.55); }
.ba-item { display: flex; align-items: center; gap: 16px; border-radius: var(--radius-lg); padding: 22px 26px; min-height: 84px; font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.4; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.ba-ico { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background .22s var(--ease), transform .22s var(--ease); }
.ba-ico svg { width: 22px; height: 22px; }
.ba-item.before { background: #fbeeed; border: 1px solid rgba(192,68,63,.2); color: #7a5755; }
.ba-item.before .ba-ico { background: #f6d4d3; color: #c0443f; }
/* Before hover: ✗ 아이콘 흔들림 + 카드 들림·빨강 보더 강조 (문제 강조) */
@keyframes ba-x-shake { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 45% { transform: rotate(11deg); } 70% { transform: rotate(-7deg); } 88% { transform: rotate(4deg); } }
.ba-item.before:hover { transform: translateY(-3px); border-color: rgba(192,68,63,.55); box-shadow: 0 12px 30px rgba(80,26,26,.32); }
.ba-item.before:hover .ba-ico { background: #f3c0bf; animation: ba-x-shake .5s var(--ease) infinite; }
.ba-item.after { background: linear-gradient(150deg, var(--green-500), var(--green-600)); color: #fff; font-weight: var(--fw-extrabold); box-shadow: 0 0 46px rgba(33,184,102,.4), 0 16px 34px rgba(0,0,0,.32); }
.ba-item.after .ba-ico { background: #fff; color: var(--green-600); }
.ba-conv { justify-self: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #34d27f, var(--green-500)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 26px rgba(33,184,102,.65); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.ba-conv svg { width: 25px; height: 25px; }
.ba-row:hover .ba-item.after { transform: translateY(-4px); box-shadow: 0 0 56px rgba(33,184,102,.55), 0 22px 44px rgba(0,0,0,.4); }
.ba-row:hover .ba-conv { transform: scale(1.12) translateX(2px); box-shadow: 0 0 34px rgba(33,184,102,.85); }
@media (max-width: 640px) {
  .ba-colhead { display: none; }
  .ba-row { grid-template-columns: 1fr; gap: 9px; margin-bottom: 18px; }
  .ba-conv { transform: rotate(90deg); margin: 3px auto; }
  .ba-row:hover .ba-conv { transform: rotate(90deg) scale(1.12); }
  .ba-item { min-height: 0; padding: 18px 20px; font-size: var(--fs-base); }
}

@media (max-width: 920px) {
  .problem-cards, .solution-points { grid-template-columns: 1fr; }
}

/* ============================================================
   우하단 플로팅 CTA (전화·채팅) — nanumcon.com 방식
   ============================================================ */
.bp-floating-cta { position: fixed; bottom: 24px; right: 24px; z-index: 9998; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.bp-floating-cta .bp-cta-btn {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.18); cursor: pointer; border: none; outline: none; position: relative; padding: 0;
  transition: transform .3s cubic-bezier(.25,.46,.45,.94), background .2s, box-shadow .2s;
}
.bp-floating-cta .bp-cta-btn:hover { transform: scale(1.08); }
.bp-floating-cta .bp-cta-btn:active { transform: scale(.95); }
.bp-floating-cta .bp-cta-btn svg { width: 26px; height: 26px; fill: #fff; display: block; }
.bp-floating-cta .bp-call-btn { background: var(--green-600); box-shadow: 0 4px 16px rgba(22,163,90,.4); }
.bp-floating-cta .bp-call-btn:hover { background: var(--green-700); box-shadow: 0 6px 24px rgba(22,163,90,.5); }
.bp-floating-cta .bp-chat-btn { background: #2563eb; box-shadow: 0 4px 16px rgba(37,99,235,.4); }
.bp-floating-cta .bp-chat-btn:hover { background: #1d4ed8; box-shadow: 0 6px 24px rgba(37,99,235,.5); }
/* 호버 시 좌측으로 펼쳐지는 툴팁 */
.bp-floating-cta .bp-cta-btn::after {
  content: attr(data-tooltip); position: absolute; right: 66px; top: 50%; transform: translateY(-50%) translateX(6px);
  background: rgba(12,20,16,.9); color: #fff; font-size: 13px; font-weight: var(--fw-medium); padding: 7px 13px;
  border-radius: 8px; white-space: nowrap; letter-spacing: -0.02em; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease); box-shadow: var(--shadow);
}
.bp-floating-cta .bp-cta-btn::before {
  content: ''; position: absolute; right: 60px; top: 50%; transform: translateY(-50%);
  border: 5px solid transparent; border-left-color: rgba(12,20,16,.9); opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease); pointer-events: none;
}
.bp-floating-cta .bp-cta-btn:hover::after { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
.bp-floating-cta .bp-cta-btn:hover::before { opacity: 1; visibility: visible; }

/* 모바일 스티키 전환 CTA (홈) — 데스크톱 숨김 / 모바일 하단 고정 */
.home-cta-bar { display: none; }
@media (max-width: 768px) {
  .home-cta-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; padding: 9px 14px calc(9px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--ink-200); box-shadow: 0 -4px 18px rgba(12,20,16,.10); }
  .home-cta-bar .btn { width: 100%; }
  .page-home .bp-floating-cta { bottom: 82px; }     /* 스티키 바 위로 */
  .page-home .site-footer { padding-bottom: 86px; } /* 푸터가 바에 가리지 않게 */
}
@media (max-width: 768px) {
  .bp-floating-cta { bottom: 20px; right: 16px; gap: 10px; }
  .bp-floating-cta .bp-cta-btn { width: 50px; height: 50px; }
  .bp-floating-cta .bp-cta-btn svg { width: 22px; height: 22px; }
  .bp-floating-cta .bp-cta-btn::after, .bp-floating-cta .bp-cta-btn::before { display: none; }
}

/* ============================================================
   AI 상담 챗봇 — 우하단 FAB(AI 버튼) + 패널 (ai-chat.js 지연로드)
   ============================================================ */
/* 크기·위치는 나머지 CTA(.bp-cta-btn 56px·아이콘 26px·모바일 50px)와 동일 — 차별화는 색·애니메이션만 */
.bp-floating-cta .bp-ai-btn { background: linear-gradient(135deg, #16a34a 0%, #0891b2 100%); box-shadow: 0 6px 20px rgba(8,145,178,.45); animation: bpAiBob 3.6s ease-in-out infinite; }
.bp-floating-cta .bp-ai-btn:hover { animation: none; box-shadow: 0 9px 28px rgba(8,145,178,.6); }
.bp-floating-cta .bp-ai-btn:active { animation: none; }
.bp-floating-cta .bp-ai-btn svg { animation: bpAiTwinkle 3.6s ease-in-out infinite; }
/* 주기적 '주목' 바운스 — 평소 정지, 3.6s마다 콩콩 두 번(hover/active 시 멈춤) */
@keyframes bpAiBob { 0%, 60%, 100% { transform: translateY(0) scale(1); } 68% { transform: translateY(-9px) scale(1.06); } 76% { transform: translateY(0) scale(1); } 84% { transform: translateY(-4px) scale(1.03); } 92% { transform: translateY(0) scale(1); } }
/* 아이콘(스파클) 반짝임 — 바운스와 동기 */
@keyframes bpAiTwinkle { 0%, 58%, 100% { transform: scale(1) rotate(0); } 68% { transform: scale(1.22) rotate(10deg); } 80% { transform: scale(1) rotate(0); } }
/* 이중 레이더 펄스 링 — 1.1s 엇갈려 연속 파동(더 또렷) */
.bp-ai-ping, .bp-ai-ping::after { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; animation: bpAiPing 2.2s ease-out infinite; }
.bp-ai-ping::after { content: ''; animation-delay: 1.1s; }
@keyframes bpAiPing { 0% { box-shadow: 0 0 0 0 rgba(8,145,178,.6); } 70% { box-shadow: 0 0 0 20px rgba(8,145,178,0); } 100% { box-shadow: 0 0 0 0 rgba(8,145,178,0); } }

.ai-chat-panel {
  position: fixed; right: 24px; bottom: 24px; z-index: 9999;
  width: 380px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 104px);
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 18px; box-shadow: 0 18px 60px rgba(12,20,16,.28);
  opacity: 0; visibility: hidden; transform: translateY(18px) scale(.97);
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.ai-chat-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.aic-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: linear-gradient(135deg, #16a34a 0%, #0891b2 100%); color: #fff; }
.aic-id { display: flex; align-items: center; gap: 10px; }
.aic-avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.aic-title { font-size: 15px; font-weight: var(--fw-bold); letter-spacing: -.02em; }
.aic-sub { font-size: 12px; opacity: .92; margin-top: 1px; }
.aic-close { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; opacity: .9; }
.aic-close:hover { opacity: 1; }
.aic-msgs { flex: 1; overflow-y: auto; padding: 16px; background: var(--ink-50, #f7f9f8); display: flex; flex-direction: column; gap: 10px; }
.aic-msg { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.55; word-break: break-word; }
.aic-msg.bot { align-self: flex-start; background: #fff; color: var(--ink-800); border: 1px solid var(--ink-100); border-bottom-left-radius: 5px; }
.aic-msg.user { align-self: flex-end; background: var(--green-600); color: #fff; border-bottom-right-radius: 5px; }
.aic-msg.bot a { color: var(--green-700); font-weight: var(--fw-semibold); text-decoration: underline; }
.aic-dots { display: inline-flex; gap: 4px; padding: 2px 0; }
.aic-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-300, #c3ccc8); animation: aicBlink 1.2s infinite ease-in-out; }
.aic-dots i:nth-child(2) { animation-delay: .2s; } .aic-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes aicBlink { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.aic-quickies { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.aic-chip { background: #fff; border: 1px solid var(--green-200); color: var(--green-700); font-size: 13px; font-weight: var(--fw-medium); padding: 7px 12px; border-radius: 999px; cursor: pointer; transition: background .15s; }
.aic-chip:hover { background: var(--green-50); }
.aic-chips-label { flex-basis: 100%; font-size: 11px; font-weight: var(--fw-medium); color: var(--ink-400, #93a199); margin: 2px 0 0; }
.aic-foot { padding: 10px 12px 12px; border-top: 1px solid var(--ink-100); background: #fff; }
.aic-inrow { display: flex; gap: 8px; align-items: flex-end; }
.aic-input { flex: 1; min-height: 42px; max-height: 96px; border: 1.5px solid var(--ink-200); border-radius: 21px; padding: 10px 16px; font-size: 14px; line-height: 1.4; font-family: inherit; outline: none; resize: none; overflow-y: auto; }
.aic-input:focus { border-color: var(--green-500); }
.aic-send { width: 42px; height: 42px; flex: 0 0 42px; border: 0; border-radius: 50%; background: var(--green-600); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.aic-send:hover { background: var(--green-700); }
/* 상담 신청 CTA — 밝은 노랑(사이트 '온라인강의' 강조색)으로 시선 유도 + 펄스 글로우/샤인 스윕 */
.aic-leadbtn { position: relative; overflow: hidden; width: 100%; margin-top: 8px; background: linear-gradient(135deg, #FDE047, #FACC15); border: 1px solid #EAB308; color: #1f2a24; font-size: 13px; font-weight: var(--fw-bold); padding: 10px; border-radius: 10px; cursor: pointer; box-shadow: 0 2px 8px rgba(250, 204, 21, .4); animation: aicLeadPulse 2s ease-in-out infinite; transition: transform .15s, box-shadow .15s, background .15s; }
.aic-leadbtn::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: aicLeadShine 3.4s ease-in-out infinite; pointer-events: none; }
.aic-leadbtn:hover { background: linear-gradient(135deg, #FACC15, #EAB308); transform: translateY(-1px); box-shadow: 0 5px 16px rgba(234, 179, 8, .55); animation: none; }
@keyframes aicLeadPulse { 0%, 100% { box-shadow: 0 2px 8px rgba(250, 204, 21, .4); } 50% { box-shadow: 0 3px 18px rgba(250, 204, 21, .85); } }
@keyframes aicLeadShine { 0% { left: -70%; } 38%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .aic-leadbtn, .aic-leadbtn::after { animation: none; } }
.aic-lead { background: #fff; border: 1px solid var(--green-200); border-radius: 14px; padding: 14px; align-self: stretch; }
.aic-lead-h { font-size: 14px; font-weight: var(--fw-bold); color: var(--ink-900); }
.aic-lead-desc { font-size: 12.5px; color: var(--ink-500); margin: 3px 0 10px; line-height: 1.5; }
.aic-field { margin-bottom: 8px; }
.aic-field label { display: block; font-size: 12px; font-weight: var(--fw-semibold); color: var(--ink-600); margin-bottom: 3px; }
.aic-field label span { color: #e5484d; }
.aic-field input, .aic-field textarea { width: 100%; border: 1.5px solid var(--ink-200); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; outline: none; box-sizing: border-box; }
.aic-field input:focus, .aic-field textarea:focus { border-color: var(--green-500); }
.aic-field textarea { resize: vertical; }
.aic-consent { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--ink-700); margin: 6px 0; line-height: 1.4; cursor: pointer; }
.aic-consent input { margin-top: 2px; flex: 0 0 auto; }
.aic-consent em { color: var(--ink-400); font-style: normal; }
.aic-consent a { color: var(--green-700); text-decoration: underline; }
.aic-cap { margin: 8px 0; }
.aic-lead-msg { font-size: 12.5px; padding: 7px 10px; border-radius: 7px; margin-bottom: 8px; }
.aic-lead-msg.err { background: #fdecec; color: #c0322f; }
.aic-lead-msg.ok { background: var(--green-50); color: var(--green-700); }
.aic-lead-actions { display: flex; gap: 8px; }
.aic-lead-cancel { flex: 0 0 auto; background: #fff; border: 1px solid var(--ink-200); color: var(--ink-600); font-size: 13px; padding: 9px 14px; border-radius: 8px; cursor: pointer; }
.aic-lead-submit { flex: 1; background: var(--green-600); border: 0; color: #fff; font-size: 14px; font-weight: var(--fw-bold); padding: 9px; border-radius: 8px; cursor: pointer; }
.aic-lead-submit:hover { background: var(--green-700); }
.aic-lead-submit:disabled { opacity: .6; cursor: default; }
.aic-lead-done { font-size: 14px; color: var(--ink-800); line-height: 1.6; text-align: center; padding: 10px 4px; }
/* ── 챗봇 고도화 추가 요소 ── */
.aic-head-btns { display: flex; align-items: center; gap: 2px; }
.aic-reset { background: none; border: 0; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; opacity: .85; padding: 3px 6px; border-radius: 7px; }
.aic-reset:hover { opacity: 1; background: rgba(255,255,255,.16); }
.aic-typing-hint { font-size: 12px; color: var(--ink-400, #93a199); margin-left: 8px; }
.aic-divider { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-400, #93a199); margin: 4px 2px; }
.aic-divider::before, .aic-divider::after { content: ""; flex: 1; height: 1px; background: var(--ink-200, #e5eae7); }
.aic-jump { position: absolute; left: 50%; transform: translateX(-50%); bottom: 150px; z-index: 3; background: var(--green-700, #15803d); color: #fff; border: 0; border-radius: 999px; font-size: 12px; font-weight: var(--fw-medium); padding: 6px 13px; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.aic-jump[hidden] { display: none; }
.aic-toast { position: absolute; left: 50%; bottom: 96px; transform: translate(-50%, 8px); z-index: 5; background: rgba(31, 42, 36, .92); color: #fff; font-size: 12.5px; font-weight: var(--fw-medium); padding: 8px 14px; border-radius: 999px; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; white-space: nowrap; }
.aic-toast.on { opacity: 1; transform: translate(-50%, 0); }
.aic-chip-link { text-decoration: none; display: inline-block; }
.aic-fb { display: flex; align-items: center; gap: 6px; margin: 2px 2px 0; font-size: 12px; color: var(--ink-400, #93a199); }
.aic-fb button { background: none; border: 1px solid var(--ink-200, #e5eae7); border-radius: 999px; padding: 1px 8px; cursor: pointer; font-size: 13px; line-height: 1.5; }
.aic-fb button:hover { background: var(--ink-50, #f7f9f8); }
.aic-human { width: 100%; margin-top: 6px; background: none; border: 0; color: var(--green-700, #15803d); font-size: 12.5px; font-weight: var(--fw-medium); cursor: pointer; padding: 5px; text-decoration: underline; text-underline-offset: 2px; }
.aic-human:hover { color: var(--green-800, #166534); }
.aic-lead-trust { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.aic-lead-trust span { background: var(--green-50, #f0fdf4); color: var(--green-700, #15803d); font-size: 11px; border-radius: 6px; padding: 2px 7px; }
.aic-done-ic { font-size: 30px; line-height: 1; }
.aic-lead-done b { display: block; margin: 6px 0 2px; }
.aic-done-sub { font-size: 12px; color: var(--ink-500, #6b7a72); margin-top: 8px; line-height: 1.5; }
.aic-lead-done code { background: var(--ink-100, #eef2f0); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
/* 추천 과정·강사 카드(#1·3) */
.aic-cards { display: flex; flex-direction: column; gap: 8px; margin: 2px 0; }
.aic-card { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--ink-100, #eef2f0); border-radius: 12px; padding: 9px 10px; }
.aic-card-thumb { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 9px; object-fit: cover; background: var(--green-50, #f0fdf4); }
.aic-card-ico { display: flex; align-items: center; justify-content: center; font-size: 22px; }
.aic-card-body { flex: 1; min-width: 0; }
.aic-card-badge { display: inline-block; font-size: 10px; font-weight: var(--fw-bold); color: var(--green-700, #15803d); background: var(--green-50, #f0fdf4); border-radius: 5px; padding: 1px 6px; margin-bottom: 2px; }
.aic-card-title { display: block; font-size: 13.5px; font-weight: var(--fw-bold); color: var(--ink-900, #1f2a24); text-decoration: none; line-height: 1.35; }
.aic-card-title:hover { text-decoration: underline; color: var(--green-700, #15803d); }
.aic-card-meta { font-size: 11.5px; color: var(--ink-500, #6b7a72); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-card-cta { flex: 0 0 auto; align-self: stretch; background: var(--green-600, #16a34a); color: #fff; border: 0; border-radius: 8px; font-size: 12px; font-weight: var(--fw-bold); padding: 0 11px; cursor: pointer; white-space: nowrap; }
.aic-card-cta:hover { background: var(--green-700, #15803d); }
/* 프로액티브 티저(#19) */
.bp-teaser { position: fixed; right: 88px; bottom: 150px; z-index: 998; max-width: 244px; background: #fff; border: 1px solid var(--ink-100, #eef2f0); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.16); padding: 13px 16px; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; cursor: pointer; }
.bp-teaser.on { opacity: 1; transform: translateY(0); }
.bp-teaser-msg { font-size: 13.5px; line-height: 1.5; color: var(--ink-800, #2b3a33); font-weight: var(--fw-medium); }
.bp-teaser-x { position: absolute; top: 3px; right: 7px; background: none; border: 0; font-size: 18px; color: var(--ink-400, #93a199); cursor: pointer; line-height: 1; }
.bp-teaser::after { content: ""; position: absolute; right: -7px; bottom: 20px; width: 13px; height: 13px; background: #fff; border-right: 1px solid var(--ink-100, #eef2f0); border-bottom: 1px solid var(--ink-100, #eef2f0); transform: rotate(-45deg); }
@media (max-width: 480px) {
  .aic-jump { bottom: 160px; }
  .bp-teaser { right: 74px; bottom: 140px; max-width: 200px; }
  .ai-chat-panel { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .bp-ai-ping, .bp-ai-ping::after, .bp-floating-cta .bp-ai-btn, .bp-floating-cta .bp-ai-btn svg, .aic-dots i { animation: none; } }

/* ============================================================
   약관 / 정책 문서 (이용약관·개인정보처리방침·환불규정)
   ============================================================ */
.legal { max-width: 820px; margin: 0 auto; padding: 48px 24px 80px; color: var(--ink-700); line-height: 1.9; }
.legal .updated { color: var(--ink-400); font-size: var(--fs-sm); margin-bottom: 26px; }
.legal h2 { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); color: var(--ink-900); margin: 34px 0 12px; letter-spacing: -0.02em; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--ink-800); margin: 20px 0 8px; }
.legal p { margin: 8px 0; }
.legal ul, .legal ol { margin: 8px 0; padding-left: 22px; }
.legal li { margin: 5px 0; list-style: disc; }
.legal ol li { list-style: decimal; }
.legal a { color: var(--green-700); font-weight: var(--fw-semibold); }
.legal table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: var(--fs-sm); }
.legal th, .legal td { border: 1px solid var(--ink-200); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal th { background: var(--green-50); font-weight: var(--fw-bold); color: var(--ink-800); }
.legal .legal-box { margin-top: 32px; padding: 22px 24px; background: var(--green-50); border: 1px solid var(--green-200); border-radius: var(--radius); line-height: 2; color: var(--ink-700); }
.legal ol.lvl2 { margin-left: 14px; }
.legal ol.lvl2 > li { list-style: lower-alpha; }

/* ============================================================
   과정 카드 hover 팝오버 (인프런 방식)
   ============================================================ */
.course-card { cursor: pointer; }
.course-pop {
  position: fixed; z-index: 1000; width: 322px; background: #fffbea;
  border: 1px solid #f3e3a0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 20px 22px; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s var(--ease), transform .18s var(--ease); pointer-events: none; display: none;
}
.course-pop.show { opacity: 1; visibility: visible; transform: translateY(0); }
.course-pop .cp-cat { font-size: var(--fs-xs); color: var(--green-700); font-weight: var(--fw-bold); }
.course-pop .cp-title { font-size: var(--fs-lg); font-weight: var(--fw-extrabold); color: var(--ink-900); margin-top: 4px; letter-spacing: -0.02em; line-height: 1.3; }
.course-pop .cp-sum { font-size: var(--fs-sm); color: var(--ink-600); margin-top: 10px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.course-pop .cp-learn { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.course-pop .cp-learn li { font-size: var(--fs-sm); color: var(--ink-700); padding-left: 20px; position: relative; line-height: 1.45; }
.course-pop .cp-learn li::before { content: "✓"; position: absolute; left: 0; color: var(--green-600); font-weight: var(--fw-bold); }
.course-pop .cp-meta { margin-top: 12px; display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--ink-500); }
.course-pop .cp-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ink-100); display: flex; align-items: center; justify-content: space-between; }
.course-pop .cp-price .pct { color: #e5484d; font-weight: var(--fw-extrabold); margin-right: 6px; }
.course-pop .cp-price .now { font-weight: var(--fw-extrabold); color: var(--price); font-size: var(--fs-lg); }
.course-pop .cp-go { font-size: var(--fs-xs); color: var(--green-700); font-weight: var(--fw-bold); }
@media (max-width: 768px) { .course-pop { display: none !important; } }

/* ============================================================
   후기 마퀴(좌우 자동 슬라이드)
   ============================================================ */
.review-marquee { overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.review-track { display: flex; gap: 22px; width: max-content; animation: review-scroll 38s linear infinite; }
.review-marquee:hover .review-track { animation-play-state: paused; }
.review-track .review-card { width: 360px; flex: 0 0 auto; }
@keyframes review-scroll { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .review-track { animation: none; } }

/* 강사진 마퀴 (사진+핵심이력 · 오른쪽 → 왼쪽) */
.instr-sec { background: var(--green-50); }
.instr-marquee { overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.instr-track { display: flex; gap: 18px; width: max-content; animation: instr-scroll 120s linear infinite; }
.instr-marquee:hover .instr-track { animation-play-state: paused; }
.instr-card { flex: 0 0 auto; width: 344px; display: flex; align-items: center; gap: 15px; padding: 16px 18px; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.instr-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -14px rgba(12,20,16,.28); border-color: var(--green-200); }
.instr-photo { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex: none; background: var(--ink-100); }
/* 사진은 얼굴인식으로 미리 정사각 헤드샷(/img/instructors/sq/)으로 크롭됨 → 그대로 채움 */
.instr-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.instr-info { display: flex; flex-direction: column; min-width: 0; }
.instr-name { font-weight: var(--fw-bold); color: var(--ink-900); font-size: var(--fs-base); }
.instr-card:hover .instr-name { color: var(--green-600); }
.instr-tag { color: var(--ink-500); font-size: var(--fs-sm); line-height: 1.4; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes instr-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .instr-track { animation: none; } }
@media (max-width: 640px) { .instr-card { width: 286px; padding: 14px 15px; gap: 12px; } .instr-track { gap: 14px; animation-duration: 95s; } .instr-photo { width: 56px; height: 56px; } }

/* 인삿말 프로필 사진 */
.greet-photo { float: right; width: 244px; margin: 4px 0 20px 30px; border-radius: var(--radius-lg); box-shadow: var(--shadow); background: linear-gradient(180deg, var(--green-100), var(--green-200)); }
@media (max-width: 600px) { .greet-photo { float: none; display: block; width: 200px; margin: 0 auto 24px; } }

/* ============================================================
   게시판 아코디언 · 찜 · 최근 본 과정 · 큐레이션 · 로드맵
   ============================================================ */
/* 게시판 아코디언 펼침 */
.board-item { border-bottom: 1px solid var(--ink-100); }
.board-item .board-row { border-bottom: none; }
.board-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.board-item.open .board-detail { grid-template-rows: 1fr; }
.board-detail > .bd-inner { overflow: hidden; }
.board-detail .bd-pad { padding: 6px 12px 26px; color: var(--ink-700); line-height: 1.95; white-space: pre-wrap; font-size: var(--fs-base); border-top: 1px dashed var(--ink-200); margin-top: 2px; padding-top: 18px; }
.board-row .board-arrow .ar { display: inline-block; transition: transform .25s var(--ease); }
.board-item.open .board-row .board-arrow .ar { transform: rotate(180deg); }

/* 찜 ♥ 버튼 (썸네일 우상단) */
.course-thumb .wish-btn {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--ink-300); font-size: 17px; line-height: 1; display: grid; place-items: center;
  box-shadow: var(--shadow-sm); transition: transform .15s, color .15s; cursor: pointer;
}
.course-thumb .wish-btn:hover { transform: scale(1.12); color: #e5484d; }
.course-thumb .wish-btn.on { color: #e5484d; }

/* 최근 본 과정 (가로 스크롤) */
.recent-row { display: flex; gap: 22px; overflow-x: auto; padding: 4px 2px 14px; scrollbar-width: thin; }
.recent-row .course-card { width: 290px; flex: 0 0 auto; }

/* 큐레이션 기획전 */
.curation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cur-card { border-radius: var(--radius-lg); padding: 30px 28px; color: #fff; min-height: 196px; display: flex; flex-direction: column;
  position: relative; overflow: hidden; box-shadow: var(--shadow); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.cur-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.cur-card .ct { font-size: var(--fs-xs); font-weight: var(--fw-bold); opacity: .92; letter-spacing: .04em; }
.cur-card h3 { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); margin-top: 8px; line-height: 1.3; letter-spacing: -0.02em; }
.cur-card .meta { font-size: var(--fs-sm); opacity: .92; margin-top: auto; padding-top: 18px; }
.cur-card .go { margin-top: 8px; font-weight: var(--fw-bold); font-size: var(--fs-sm); display: flex; align-items: center; gap: 5px; transition: transform .2s var(--ease); }
/* COLLECTIONS 카드 개선: 아이콘 · 배지 · 호버 반응 */
.cur-card { position: relative; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.cur-ico { position: absolute; top: 22px; right: 22px; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; color: #fff; transition: transform .25s var(--ease); }
.cur-ico svg { width: 22px; height: 22px; }
.cur-card:hover .cur-ico { transform: scale(1.12) rotate(-4deg); }
.cur-badge { align-self: flex-start; margin-top: 13px; background: rgba(255,255,255,.18); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: 4px 12px; border-radius: var(--radius-full); }
.cur-card:hover .go { transform: translateX(5px); }

/* 학습 로드맵 */
.roadmap-steps { display: flex; align-items: stretch; }
.rstep { flex: 1; background: #fff; border: 1px solid var(--ink-100); border-radius: var(--radius-lg); padding: 26px 24px; position: relative; box-shadow: var(--shadow-sm); }
.rstep + .rstep { margin-left: 40px; }
.rstep + .rstep::before { content: "→"; position: absolute; left: -32px; top: 50%; transform: translateY(-50%); color: var(--green-400); font-size: 24px; font-weight: var(--fw-bold); }
.rstep .lvl { display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-extrabold); color: var(--green-700); background: var(--green-100); padding: 4px 12px; border-radius: var(--radius-full); }
.rstep h3 { font-size: var(--fs-lg); font-weight: var(--fw-extrabold); margin-top: 12px; letter-spacing: -0.02em; }
.rstep p { color: var(--ink-500); font-size: var(--fs-sm); margin-top: 8px; line-height: 1.6; }
.rstep .rgo { margin-top: 14px; display: inline-block; color: var(--green-700); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
@media (max-width: 920px) { .curation-grid { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .roadmap-steps { flex-direction: column; }
  .rstep + .rstep { margin-left: 0; margin-top: 32px; }
  .rstep + .rstep::before { content: "↓"; left: 50%; top: -28px; transform: translateX(-50%); }
}

/* ════════════ 통합: 홈 두 갈래 분기(기업교육 / 온라인강의) ════════════ */
.branch-sec { padding: 60px 0 64px; }
.branch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.branch-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 32px 30px; border-radius: var(--radius-lg); overflow: hidden; min-height: 300px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.branch-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.branch-card .bc-tag { font-size: var(--fs-xs); font-weight: var(--fw-extrabold); letter-spacing: .06em; }
.branch-card h3 { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); letter-spacing: -0.02em; }
.branch-card .bc-go { margin-top: auto; font-weight: var(--fw-bold); }
.bc-btn { align-self: flex-start; padding: 12px 20px; border-radius: var(--radius-full); font-size: var(--fs-sm); transition: transform .15s var(--ease), box-shadow .2s var(--ease); }
.branch-card:hover .bc-btn { box-shadow: var(--shadow); }

/* 왼쪽: 기업 — 딥그린 + 출강 현장 사진(은은히) */
.branch-card.biz { background: linear-gradient(150deg, var(--green-700), var(--green-900)); color: #fff; }
.bc-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s var(--ease); pointer-events: none; }
.bc-bg.on { opacity: .22; }
.branch-card.biz > *:not(.bc-bg) { position: relative; z-index: 1; }
.branch-card.biz .bc-tag { color: rgba(255,255,255,.72); }
.bc-trust { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.16); color: var(--green-100); font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: 6px 13px; border-radius: var(--radius-full); backdrop-filter: blur(2px); }
.bc-benefits { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 8px; }
.bc-benefits li { font-size: var(--fs-sm); color: rgba(255,255,255,.93); display: flex; align-items: center; gap: 9px; }
.bc-benefits li::before { content: "✓"; color: var(--green-300); font-weight: var(--fw-extrabold); flex: 0 0 auto; }
.branch-card.biz .bc-btn { background: #fff; color: var(--green-800); }

/* 오른쪽: 개인 — 밝은 카드 + 강의 썸네일 미리보기 */
.branch-card.edu { background: var(--white); border: 1px solid var(--ink-200); color: var(--ink-700); }
.branch-card.edu .bc-tag { color: var(--green-700); }
.branch-card.edu h3 { color: var(--ink-900); }
.bc-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); background: var(--ink-100) center 30%/cover no-repeat; overflow: hidden; margin-bottom: 4px; display: flex; align-items: center; justify-content: center; }
.bc-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,58,38,.12) 35%, rgba(11,58,38,.62)); pointer-events: none; }
.bc-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
.bc-loading { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: var(--ink-100); color: var(--ink-500); font-size: var(--fs-sm); }
.bc-play { position: relative; z-index: 1; }
.bc-prev { z-index: 1; }
.bc-play { width: 56px; height: 56px; border-radius: 50%; background: rgba(22,163,90,.94); color: #fff; border: 0; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(10,46,29,.35); transition: transform .2s var(--ease); }
.bc-play svg { margin-left: 3px; }
.branch-card.edu:hover .bc-play { transform: scale(1.09); }
.bc-prev { position: absolute; right: 9px; bottom: 9px; background: rgba(10,46,29,.82); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-medium); padding: 3px 9px; border-radius: var(--radius-sm); }
.bc-meta { font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.5; }
.bc-meta .star { color: var(--warning); font-weight: var(--fw-bold); }
.bc-meta b { color: var(--ink-900); font-weight: var(--fw-bold); }
.branch-card.edu .bc-btn { background: var(--green-600); color: #fff; }

@media (max-width: 820px) { .branch-grid { grid-template-columns: 1fr; } }

/* 기업 대면교육 커리큘럼 다양성 섹션 */
.curriculum-sec { background: linear-gradient(135deg, #2a82a6, #14546c 70%, #103f52); }
.curriculum-sec .kk { color: #7fd4ea; }
.curriculum-sec .section-head h2 { color: #fff; }
.curriculum-sec .section-head p { color: rgba(255,255,255,.82); }
.curriculum-sec .section-head b { color: #8fdcf0; font-weight: var(--fw-extrabold); }
.curriculum-sec .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.curriculum-sec .btn-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.curri-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 12px; grid-auto-rows: 1fr; }
.curri-card { display: flex; gap: 12px; align-items: flex-start; background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease); }
.curri-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--green-300); }
.curri-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: var(--green-50); display: flex; align-items: center; justify-content: center; font-size: 21px; }
.curri-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.curri-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.curri-name { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--ink-900); }
.curri-cnt { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--green-700); background: var(--green-100); padding: 2px 9px; border-radius: var(--radius-full); white-space: nowrap; }
.curri-courses { font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 600px) {
  .curri-grid { grid-template-columns: 1fr 1fr; gap: 9px; align-items: start; grid-auto-rows: auto; }
  .curri-card { flex-direction: column; gap: 8px; padding: 13px 12px; }
  .curri-ico { width: 38px; height: 38px; font-size: 20px; }
  .curri-body { display: block; flex: none; }
  .curri-courses { display: none; }
}

/* ════════════ 통합: AI 도구 허브(tools.html, B2BAI 흡수) ════════════ */
.tool-cat-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 32px; }
.tool-chip { padding: 8px 16px; border-radius: var(--radius-full); border: 1px solid var(--ink-200); background: #fff; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-600); cursor: pointer; transition: all .15s; }
.tool-chip:hover { border-color: var(--green-300); color: var(--ink-800); }
.tool-chip.active { background: var(--green-600); color: #fff; border-color: var(--green-600); }
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tool-card { display: flex; gap: 14px; align-items: flex-start; padding: 22px; border: 1px solid var(--ink-200); border-radius: var(--radius); background: #fff; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.tool-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.tool-ico { width: 52px; height: 52px; flex-shrink: 0; display: grid; place-items: center; font-size: 28px; border-radius: 14px; transition: transform .28s var(--ease), box-shadow .25s var(--ease); }
.tool-card:hover .tool-ico { transform: scale(1.2) rotate(-8deg); box-shadow: 0 8px 20px rgba(0,0,0,.14); }
/* 도구별 컬러 타일 (이모지 강조) + 호버 컬러 glow */
.tool-grid .tool-card:nth-child(1) .tool-ico { background: linear-gradient(135deg,#c3f0d6,#9fe1c4); }
.tool-grid .tool-card:nth-child(2) .tool-ico { background: linear-gradient(135deg,#cfe3fb,#aacdf4); }
.tool-grid .tool-card:nth-child(3) .tool-ico { background: linear-gradient(135deg,#ddd7fb,#c2baf2); }
.tool-grid .tool-card:nth-child(4) .tool-ico { background: linear-gradient(135deg,#fbe6c2,#f6cf95); }
.tool-grid .tool-card:nth-child(5) .tool-ico { background: linear-gradient(135deg,#c4f0e6,#9fe1d0); }
.tool-grid .tool-card:nth-child(6) .tool-ico { background: linear-gradient(135deg,#fbd2e1,#f4b0c8); }
.tool-grid .tool-card:nth-child(1):hover { border-color: #21b866; box-shadow: 0 18px 36px rgba(33,184,102,.3); }
.tool-grid .tool-card:nth-child(2):hover { border-color: #3d92e0; box-shadow: 0 18px 36px rgba(61,146,224,.3); }
.tool-grid .tool-card:nth-child(3):hover { border-color: #8b7ff0; box-shadow: 0 18px 36px rgba(139,127,240,.3); }
.tool-grid .tool-card:nth-child(4):hover { border-color: #f0a33a; box-shadow: 0 18px 36px rgba(240,163,58,.3); }
.tool-grid .tool-card:nth-child(5):hover { border-color: #1fb89a; box-shadow: 0 18px 36px rgba(31,184,154,.3); }
.tool-grid .tool-card:nth-child(6):hover { border-color: #e06b94; box-shadow: 0 18px 36px rgba(224,107,148,.3); }
.tool-card h3 { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--ink-900); letter-spacing: -0.01em; }
.tool-card p { font-size: var(--fs-sm); color: var(--ink-500); margin-top: 5px; line-height: 1.5; }
.tool-card .tool-go { font-size: var(--fs-xs); color: var(--green-700); font-weight: var(--fw-bold); margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; transition: transform .2s var(--ease); }
.tool-card:hover .tool-go { transform: translateX(4px); }
@media (max-width: 920px) { .tool-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .tool-grid { grid-template-columns: 1fr; } }

/* ════════════ 통합: 교육후기·칼럼(nanumcon 게시판 이관) ════════════ */
.post-toolbar { display: flex; gap: 12px; justify-content: center; margin-bottom: 32px; flex-wrap: wrap; }
.post-search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius-full); padding: 10px 18px; min-width: 300px; }
.post-search input { border: none; outline: none; flex: 1; font-size: var(--fs-base); font-family: inherit; background: transparent; }
/* 교육후기 갤러리 */
.ref-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ref-card { display: flex; flex-direction: column; border: 1px solid var(--ink-200); border-radius: var(--radius); overflow: hidden; background: #fff; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.ref-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.ref-thumb { aspect-ratio: 4 / 3; background: var(--green-50) center/cover no-repeat; }
.ref-body { padding: 14px 16px; }
.ref-body h3 { font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1.45; color: var(--ink-900); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ref-date { font-size: var(--fs-xs); color: var(--ink-400); margin-top: 8px; }
/* 칼럼 리스트 */
.col-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.col-card { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--ink-200); border-radius: var(--radius); background: #fff; padding: 16px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.col-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.col-thumb { width: 124px; height: 92px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--green-50) center/cover no-repeat; }
.col-card h3 { font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.4; color: var(--ink-900); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.col-card p { font-size: var(--fs-sm); color: var(--ink-500); margin-top: 6px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 글 상세 */
.post-detail { max-width: 820px; margin: 0 auto; }
.post-detail .pd-head h1 { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); letter-spacing: -0.02em; line-height: 1.32; margin-top: 6px; }
.post-detail .pd-meta { color: var(--ink-400); font-size: var(--fs-sm); margin-top: 12px; padding-bottom: 22px; border-bottom: 1px solid var(--ink-200); }
.post-body { margin-top: 26px; font-size: var(--fs-base); line-height: 1.8; color: var(--ink-700); word-break: keep-all; overflow-wrap: anywhere; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 12px 0; }
.post-body p { margin: 14px 0; }
.post-body a { color: var(--green-700); text-decoration: underline; }
@media (max-width: 920px) { .ref-grid { grid-template-columns: repeat(3, 1fr); } .col-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .ref-grid { grid-template-columns: repeat(2, 1fr); } .col-thumb { width: 92px; height: 70px; } }

/* ════════════ 통합 나브: 드롭다운(PC hover) + 모바일 드로어 ════════════ */
.gnb { display: flex; gap: 3px; align-items: center; }
.gnb-item { position: relative; }
.gnb-link { display: inline-flex; align-items: center; gap: 4px; padding: 11px 16px; border-radius: var(--radius-sm); font-weight: var(--fw-semibold); font-size: 1.25rem; color: var(--ink-800); white-space: nowrap; transition: background .15s, color .15s; }
.gnb-link:hover { background: var(--green-50); color: var(--green-700); }
.gnb-link.active { color: var(--green-700); font-weight: var(--fw-bold); }
.gnb-item.open > .gnb-link { background: var(--green-50); color: var(--green-700); }
/* 온라인강의 = 신규 강조: 밝은 노란 배경 */
.gnb-link[data-nav="online"] { background: #FDE047; color: var(--ink-900); }
.gnb-link[data-nav="online"]:hover, .gnb-item.open > .gnb-link[data-nav="online"] { background: #FACC15; color: var(--ink-900); }
.gd-top[data-nav="online"] { background: #FDE047; color: var(--ink-900); border-radius: var(--radius-sm); }
/* 칼럼 │ 글연재 사이 얇은 구분선(1px 헤어라인 + 좌우 여백) */
.nav-sep { display: inline-block; width: 1px; height: 0.72em; margin: 0 6px; background: currentColor; opacity: .3; vertical-align: middle; }
.gnb-caret { font-size: 20px; font-style: normal; color: #dc2626; opacity: 1; transition: transform .2s var(--ease); }
.gnb-item.open .gnb-caret { transform: rotate(180deg); opacity: 1; }
.gnb-badge { display: inline-block; background: #e2483d; color: #fff; font-size: .56rem; font-weight: 800; line-height: 1; padding: 2px 4px; border-radius: 4px; margin-left: 2px; vertical-align: super; letter-spacing: .02em; }
/* 드롭다운: 트리거와 메뉴 사이 투명 브릿지(::before)로 hover 연속성 확보 + JS .open 지연닫힘 */
.gnb-sub { position: absolute; top: 100%; left: 0; margin-top: 10px; min-width: 210px; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s var(--ease), transform .16s var(--ease); z-index: 200; }
.gnb-sub::before { content: ''; position: absolute; bottom: 100%; left: 0; right: 0; height: 12px; }
.gnb-item:hover .gnb-sub, .gnb-item.open .gnb-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.gnb-sublink { display: block; padding: 11px 14px; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-700); white-space: nowrap; }
.gnb-sublink:hover { background: var(--green-50); color: var(--green-700); }

/* ── 과정 메가 플라이아웃 (분류 → 과정 트리, nanumcon.com/23 방식) ── */
.gnb-mega { left: 0; padding: 0; min-width: 0; width: 700px; max-width: 94vw; display: flex; overflow: hidden; }
.gnb-mega .cm-loading { padding: 22px; color: var(--ink-400); font-size: var(--fs-sm); }
.cm-cats { width: 246px; flex: none; background: var(--green-50); padding: 8px; border-right: 1px solid var(--ink-100); max-height: 468px; overflow-y: auto; }
.cm-cat { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 9px 10px; border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer; color: var(--ink-700); font-size: .92rem; font-weight: var(--fw-medium); transition: background .12s, color .12s; }
.cm-cat:hover, .cm-cat.on { background: #fff; color: var(--green-700); font-weight: var(--fw-semibold); box-shadow: var(--shadow-sm); }
.cm-ic { font-size: 1.05rem; flex: none; line-height: 1; }
.cm-lb { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-ct { flex: none; font-size: .72rem; color: var(--ink-500); background: var(--ink-100); border-radius: var(--radius-full); padding: 1px 8px; }
.cm-cat.on .cm-ct { background: var(--green-100); color: var(--green-700); }
.cm-right { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cm-courses { flex: 1; padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; max-height: 420px; overflow-y: auto; align-content: start; }
.cm-course { display: block; padding: 8px 10px; border-radius: var(--radius-sm); min-width: 0; }
.cm-course:hover { background: var(--green-50); }
.cm-course b { display: block; font-weight: var(--fw-semibold); font-size: .85rem; color: var(--ink-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-course:hover b { color: var(--green-700); }
.cm-course span { display: block; font-size: .72rem; color: var(--ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.cm-all { display: block; padding: 12px 14px; border-top: 1px solid var(--ink-100); font-size: .85rem; font-weight: var(--fw-semibold); color: var(--green-700); background: var(--green-50); text-align: center; }
.cm-all:hover { background: var(--green-100); }
/* 강사 메가 — 전체 강사 그리드 */
.gnb-mega-inst { display: block; width: 600px; }
.im-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; padding: 10px; max-height: 462px; overflow-y: auto; }
.im-cell { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: var(--radius-sm); min-width: 0; }
.im-cell:hover { background: var(--green-50); }
.im-cell img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; background: var(--green-50); }
.im-cell span { font-size: .85rem; font-weight: var(--fw-semibold); color: var(--ink-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-cell:hover span { color: var(--green-700); }
@media (max-width: 760px) { .gnb-mega { display: none; } }
/* 모바일 드로어 — 과정 분류 아코디언 */
.gnb-drawer .gd-cat > summary { list-style: none; padding: 11px 22px 11px 34px; color: var(--ink-700); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gnb-drawer .gd-cat > summary::-webkit-details-marker { display: none; }
.gnb-drawer .gd-cat > summary i { font-style: normal; font-size: .72rem; color: var(--ink-400); flex: none; }
.gnb-drawer .gd-cat[open] > summary { color: var(--green-700); font-weight: var(--fw-semibold); }
.gnb-drawer .gd-course { display: block; padding: 8px 22px 8px 46px; color: var(--ink-500); font-size: .85rem; }

.gnb-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 9px; margin-left: auto; }
.gnb-burger span { width: 22px; height: 2px; background: var(--ink-700); border-radius: 2px; transition: .25s var(--ease); transform-origin: center; }
.gnb-burger.on span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gnb-burger.on span:nth-child(2) { opacity: 0; }
.gnb-burger.on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.gnb-drawer { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--ink-200); box-shadow: var(--shadow-lg); max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.gnb-drawer.open { max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
.gnb-drawer .gd-group { border-bottom: 1px solid var(--ink-100); padding: 4px 0 8px; }
.gnb-drawer .gd-top { display: block; padding: 13px 22px 8px; font-weight: var(--fw-bold); color: var(--ink-900); font-size: var(--fs-sm); }
.gnb-drawer .gd-sub { display: block; padding: 9px 34px; color: var(--ink-600); font-size: var(--fs-sm); }
.gnb-drawer .gd-solo { padding: 15px 22px; border-bottom: 1px solid var(--ink-100); font-weight: var(--fw-bold); color: var(--ink-900); }
.gnb-drawer a:hover { background: var(--green-50); color: var(--green-700); }

/* 전역 상단 프로그레스 바 (업로드 진행 — 왼→오) */
.top-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10000; opacity: 0; pointer-events: none; transition: opacity .25s; }
.top-progress.on { opacity: 1; }
.top-progress.done { opacity: 1; }
.top-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--green-400), var(--green-600)); box-shadow: 0 0 10px var(--green-500), 0 0 4px var(--green-400); border-radius: 0 3px 3px 0; transition: width .25s ease; }
@media (max-width: 940px) {
  .header-nav, .header-actions { display: none; }
  .gnb-burger { display: flex; }
  .gnb-drawer { display: block; }
  :root { --header-h: 52px; }
}

/* ════════════ 강사진 로스터 ════════════ */
.inst-roster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 6px; }
.inst-rcard { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--ink-200); border-radius: var(--radius); background: #fff; transition: box-shadow .2s, border-color .2s; }
.inst-rcard:hover { box-shadow: var(--shadow-sm); border-color: var(--green-200); }
.inst-rcard .av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--green-500), var(--mint-500)); color: #fff; display: grid; place-items: center; font-weight: var(--fw-bold); font-size: var(--fs-base); flex-shrink: 0; }
.inst-rcard .rn { font-weight: var(--fw-bold); color: var(--ink-900); font-size: var(--fs-base); }
.inst-rcard .rt { font-size: var(--fs-xs); color: var(--ink-400); margin-top: 2px; }
@media (max-width: 820px) { .inst-roster { grid-template-columns: repeat(2, 1fr); } }

/* ════════════ 강사 명단 표 (상단) ════════════ */
.inst-roster-top { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--ink-200); border-left: 1px solid var(--ink-200); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 36px; }
.irt-cell { display: block; padding: 15px 10px; text-align: center; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-700); border-right: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200); background: #fff; text-decoration: none; transition: background .15s, color .15s; }
a.irt-cell:hover { background: var(--green-50); color: var(--green-700); }
.irt-cell.active { background: linear-gradient(135deg, var(--green-700), var(--green-600)); color: #fff; font-weight: var(--fw-bold); }
.irt-empty { background: var(--ink-100); }
@media (max-width: 720px) { .inst-roster-top { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .inst-roster-top { grid-template-columns: repeat(2, 1fr); } }

/* 강사 디렉토리 (얼굴 카드 + 분야 필터) — 카드=sq 헤드샷, 모바일 자동 카드화 */
.inst-dir { margin-bottom: 42px; }
.inst-dir-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.inst-dir-head h2 { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); }
.inst-dir-head h2 span { color: var(--ink-400); font-weight: var(--fw-bold); font-size: var(--fs-md); margin-left: 4px; }
.inst-dir-head input { padding: 10px 16px; border: 1px solid var(--ink-200); border-radius: var(--radius-full); font-size: var(--fs-sm); min-width: 210px; }
.inst-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.inst-filter button { padding: 7px 14px; font-size: var(--fs-sm); font-weight: var(--fw-bold); border: 1px solid var(--ink-200); background: #fff; color: var(--ink-600); border-radius: var(--radius-full); cursor: pointer; }
.inst-filter button.on { background: var(--green-700); color: #fff; border-color: var(--green-700); }
.inst-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 12px; }
.inst-cards .irt-cell { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: 18px 12px; border: 1px solid var(--ink-200); border-radius: var(--radius-lg); background: #fff; text-decoration: none; color: inherit; position: relative; transition: box-shadow .15s, border-color .15s, transform .15s; }
.inst-cards a.irt-cell:hover { box-shadow: var(--shadow-md); border-color: var(--green-300); transform: translateY(-2px); }
.inst-cards .irt-photo img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: center; background: var(--green-50); }
.inst-cards .irt-name { font-size: var(--fs-md); font-weight: var(--fw-extrabold); color: var(--ink-800); }
.inst-cards .irt-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.inst-cards .irt-chips span { font-size: 10px; font-weight: var(--fw-bold); padding: 2px 8px; border-radius: var(--radius-full); background: var(--green-50); color: var(--green-700); }
.inst-empty-msg { grid-column: 1 / -1; text-align: center; color: var(--ink-400); padding: 30px 0; }

/* ════════════ 교육후기 아코디언 ════════════ */
.acc-list { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--ink-200); }
.acc-item { border-bottom: 1px solid var(--ink-200); }
.acc-head { width: 100%; display: flex; align-items: center; gap: 14px; padding: 18px 8px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; transition: background .15s var(--ease); }
.acc-head:hover { background: var(--green-50); }
.acc-title { flex: 1; font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--ink-900); line-height: 1.5; word-break: keep-all; }
.acc-meta { font-size: var(--fs-xs); color: var(--ink-400); flex-shrink: 0; }
.acc-ar { font-size: 18px; line-height: 1; color: var(--ink-400); flex-shrink: 0; transition: transform .3s var(--ease); }
.acc-item.open .acc-ar { transform: rotate(180deg); color: var(--green-600); }
.acc-item.open .acc-title { color: var(--green-700); }
.acc-panel { display: none; }
.acc-item.open .acc-panel { display: block; animation: accIn .26s var(--ease); }
@keyframes accIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.acc-inner .post-body { margin: 0 8px; padding: 4px 0 26px; }
.acc-loading { padding: 16px 8px 26px; color: var(--ink-400); font-size: var(--fs-sm); }

/* ════════════ 과정 상세 (course-detail) ════════════ */
.cd-hero { background: radial-gradient(620px 320px at 84% -10%, var(--green-600), transparent 60%), linear-gradient(155deg, var(--green-900), var(--ink-900)); color: #fff; padding: 40px 0 48px; }
.cd-hero .container { max-width: 920px; }
.cd-bc { font-size: var(--fs-sm); color: rgba(255,255,255,.66); margin-bottom: 18px; }
.cd-bc a { color: rgba(255,255,255,.82); text-decoration: none; }
.cd-bc a:hover { color: #fff; text-decoration: underline; }
.cd-eyebrow { display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .04em; color: var(--green-900); background: var(--green-300); padding: 4px 12px; border-radius: var(--radius-full); }
.cd-hero h1 { font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); letter-spacing: -0.03em; line-height: 1.25; margin: 16px 0 0; word-break: keep-all; }
.cd-tagline { color: var(--green-200); font-size: var(--fs-lg); margin-top: 12px; line-height: 1.6; word-break: keep-all; }
.cd-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.cd-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-medium); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); padding: 8px 14px; border-radius: var(--radius-full); }
.cd-hero .cd-cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.cd-wrap { max-width: 920px; }
.cd-intro { font-size: var(--fs-lg); line-height: 1.8; color: var(--ink-700); word-break: keep-all; background: var(--green-50); border-left: 4px solid var(--green-500); border-radius: 0 var(--radius) var(--radius) 0; padding: 22px 26px; margin-bottom: 40px; }
.cd-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 44px; }
.cd-card { border: 1px solid var(--ink-200); border-radius: var(--radius-lg); padding: 24px 26px; background: #fff; }
.cd-card h3 { font-size: var(--fs-lg); font-weight: var(--fw-extrabold); color: var(--ink-900); display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.cd-card h3::before { content: ''; width: 6px; height: 20px; background: var(--green-500); border-radius: 3px; }
.cd-card ul { list-style: none; }
.cd-card li { position: relative; padding: 7px 0 7px 24px; font-size: var(--fs-base); color: var(--ink-700); line-height: 1.6; word-break: keep-all; }
.cd-card li::before { content: '✓'; position: absolute; left: 0; color: var(--green-600); font-weight: var(--fw-bold); }
.cd-sech { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); letter-spacing: -0.02em; margin: 0 0 20px; }
.cd-modules { display: flex; flex-direction: column; gap: 14px; margin-bottom: 44px; }
.cd-mod { border: 1px solid var(--ink-200); border-radius: var(--radius-lg); overflow: hidden; }
.cd-mod-h { display: flex; align-items: center; gap: 12px; padding: 16px 22px; background: var(--green-50); border-bottom: 1px solid var(--green-100); }
.cd-mod-n { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--green-600), var(--green-500)); color: #fff; display: grid; place-items: center; font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.cd-mod-h h4 { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--ink-900); word-break: keep-all; }
.cd-mod ul { list-style: none; padding: 14px 22px; }
.cd-mod li { position: relative; padding: 6px 0 6px 18px; font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.6; word-break: keep-all; }
.cd-mod li::before { content: '·'; position: absolute; left: 4px; color: var(--green-500); font-weight: var(--fw-bold); }
.cd-clients { background: var(--green-50); border-radius: var(--radius-lg); padding: 26px 28px; margin-bottom: 44px; }
.cd-clients h3 { font-size: var(--fs-lg); font-weight: var(--fw-extrabold); margin-bottom: 14px; }
.cd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cd-chips span { font-size: var(--fs-sm); color: var(--ink-700); background: #fff; border: 1px solid var(--green-200); padding: 6px 13px; border-radius: var(--radius-full); }
.cd-faq { max-width: 920px; }
.cd-empty { text-align: center; padding: 80px 0; color: var(--ink-400); }
@media (max-width: 720px) { .cd-2col { grid-template-columns: 1fr; } .cd-hero h1 { font-size: var(--fs-2xl); } }

/* ════════════ 강사 상세 (instructor) ════════════ */
.id-hero { background: linear-gradient(135deg, var(--green-50), #fff); padding: 40px 0 10px; }
.id-card { display: flex; gap: 34px; align-items: center; max-width: 980px; margin: 0 auto; flex-wrap: wrap; }
.id-photo { width: 360px; max-width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--ink-200); background: #fff; box-shadow: var(--shadow-sm); }
.id-info { flex: 1; min-width: 260px; }
.id-info .nm { font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); letter-spacing: -0.02em; color: var(--ink-900); }
.id-info .tg { font-size: var(--fs-lg); color: var(--ink-600); margin-top: 12px; line-height: 1.6; word-break: keep-all; }
.id-info .id-cta { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; }
.id-roster { max-width: 980px; margin: 36px auto 0; }
.id-roster .rl { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-500); margin-bottom: 12px; }
.id-roster-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--ink-200); border-left: 1px solid var(--ink-200); border-radius: var(--radius-sm); overflow: hidden; }
.id-rc { padding: 13px 8px; text-align: center; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-700); border-right: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200); background: #fff; text-decoration: none; transition: background .15s; }
.id-rc:hover { background: var(--green-50); color: var(--green-700); }
.id-rc.active { background: linear-gradient(135deg, var(--green-700), var(--green-600)); color: #fff; }
@media (max-width: 820px) { .id-roster-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .id-roster-grid { grid-template-columns: repeat(3, 1fr); } }

/* ════════════ 홈 히어로 (B2BAI 스타일 다크) ════════════ */
.cc-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%); min-height: 540px; display: flex; align-items: center; }
.cc-hero-inner { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 64px 24px 84px; position: relative; z-index: 2; }
.cc-hero-badge { display: inline-flex; align-items: center; gap: 10px; font-size: 0.82rem; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: #3b82f6; margin-bottom: 26px; }
.cc-hero-badge::before { content: ''; display: block; width: 32px; height: 2px; background: #3b82f6; }
.cc-hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.03em; color: #fff; max-width: 660px; }
.cc-hero h1 .highlight { background: linear-gradient(90deg, #60a5fa, #a78bfa, #c084fc, #60a5fa); background-size: 300% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradient-flow 4s ease infinite; filter: drop-shadow(0 0 28px rgba(139,92,246,0.5)); }
@keyframes gradient-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.cc-hero-desc { margin-top: 24px; font-size: 1.08rem; line-height: 1.7; color: rgba(255,255,255,0.58); max-width: 460px; word-break: keep-all; }
.cc-hero-cta { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }
.cc-hero-cta .btn-ghost-light { background: rgba(255,255,255,0.1); color: #fff; border: 1.5px solid rgba(255,255,255,0.25); }
.cc-hero-cta .btn-ghost-light:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.45); }
.cc-hero-photo { position: absolute; right: 96px; bottom: 0; width: 44%; max-width: 470px; display: none; z-index: 1; pointer-events: none; }
.cc-hero-photo img { width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 50px rgba(0,0,0,0.4)); }
.cc-hero-photo .cc-name { position: absolute; top: 33%; left: 4%; color: #fff; font-weight: 800; font-size: 1.18rem; letter-spacing: 0.04em; text-shadow: 0 2px 12px rgba(0,0,0,0.7), 0 0 3px rgba(0,0,0,0.6); white-space: nowrap; }
@media (min-width: 900px) { .cc-hero-photo { display: block; } }
/* 모바일·태블릿: 인물 컷아웃을 텍스트 아래 중앙에 세워 온기 부여 */
@media (max-width: 899px) {
  .cc-hero { display: block; }
  .cc-hero-inner { padding: 50px 22px 0; }
  .cc-hero-photo { display: block; position: relative; right: auto; bottom: auto; width: 74%; max-width: 270px; margin: 18px auto -2px; }
  .cc-hero-photo .cc-name { display: none; }
}
.cc-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 72% 55%, rgba(37,99,235,0.18), transparent 60%); pointer-events: none; }
/* 히어로 하단 통계 바 */
.cc-stats { background: var(--ink-900); }
.cc-stats-inner { max-width: var(--maxw); margin: 0 auto; padding: 24px; display: flex; gap: 56px; flex-wrap: wrap; }
.cc-stats .st .n { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); color: #fff; line-height: 1; }
.cc-stats .st .n span { color: #60a5fa; }
.cc-stats .st .l { font-size: var(--fs-sm); color: rgba(255,255,255,0.55); margin-top: 7px; }
@media (max-width: 560px) { .cc-stats-inner { gap: 28px; } .cc-hero h1 { font-size: clamp(2rem, 8vw, 2.6rem); } }


/* ════════════ 과정 상세(course-detail + 프리렌더 /course/{id}) 공통 ════════════ */
/* 히어로 바로 아래 본문 상단 여백 축소 (히어로↔요약 간격) */
    .cd-hero + .section { padding-top: 28px; }
    /* 요약 박스 (4칸 직답) */
    .cd-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 30px; }
    .cd-sumitem { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-sm); }
    .cd-sumitem .k { display: block; font-size: var(--fs-xs); color: var(--ink-500); font-weight: var(--fw-semibold); }
    .cd-sumitem .v { display: block; font-size: var(--fs-lg); font-weight: var(--fw-extrabold); color: var(--ink-900); margin-top: 6px; line-height: 1.4; word-break: keep-all; }
    /* GEO 자족 요약 한 문단 */
    .cd-overview { font-size: var(--fs-lg); line-height: 1.85; color: var(--ink-700); padding: 18px 22px; background: var(--green-50); border-left: 4px solid var(--green-500); border-radius: 0 var(--radius) var(--radius) 0; }
    /* 질문형 섹션 */
    .cd-qa { margin-top: 42px; }
    .cd-qa > h2 { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); letter-spacing: -0.02em; color: var(--ink-900); margin-bottom: 16px; }
    .cd-qa > p { font-size: var(--fs-base); line-height: 1.85; color: var(--ink-700); word-break: keep-all; }
    .cd-goals { list-style: none; display: grid; gap: 11px; }
    .cd-goals li { position: relative; padding-left: 28px; font-size: var(--fs-base); line-height: 1.6; color: var(--ink-700); word-break: keep-all; }
    .cd-goals li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green-600); font-weight: var(--fw-extrabold); }
    /* 커리큘럼 — 모듈 블록 (헤더 바 + 글머리) */
    .cd-curri { display: grid; gap: 26px; }
    .cd-mhead { background: var(--green-50); color: var(--ink-900); font-weight: var(--fw-bold); font-size: var(--fs-lg); padding: 13px 18px; border-radius: var(--radius-sm); border-left: 4px solid var(--green-500); word-break: keep-all; }
    .cd-mlist { list-style: none; margin: 16px 0 0; padding: 0 6px; display: grid; gap: 11px; }
    .cd-mlist li { position: relative; padding-left: 20px; font-size: var(--fs-base); line-height: 1.7; color: var(--ink-700); word-break: keep-all; }
    .cd-mlist li::before { content: "•"; position: absolute; left: 4px; top: 0; color: var(--green-600); font-weight: var(--fw-bold); }
    /* 강사 소개 카드 */
    .cd-instr { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--ink-200); border-radius: var(--radius-lg); background: #fff; transition: box-shadow .2s, border-color .2s; }
    a.cd-instr:hover { box-shadow: var(--shadow); border-color: var(--green-200); }
    .cd-instr img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; background: var(--green-50); }
    .cd-instr-t b { display: block; font-size: var(--fs-lg); font-weight: var(--fw-extrabold); color: var(--ink-900); }
    .cd-instr-t span { display: block; font-size: var(--fs-sm); color: var(--ink-500); margin-top: 3px; line-height: 1.5; }
    .cd-instr-t .cd-instr-more { color: var(--green-700); font-weight: var(--fw-semibold); margin-top: 6px; }
    /* 닫는 CTA */
    .cd-cta2 { margin-top: 50px; text-align: center; background: radial-gradient(560px 300px at 80% -10%, var(--green-700), transparent 60%), linear-gradient(160deg, var(--green-900), var(--ink-900)); color: #fff; border-radius: var(--radius-lg); padding: 46px 24px; }
    .cd-cta2 h2 { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); }
    .cd-cta2 p { color: rgba(255,255,255,.82); margin-top: 10px; }
    .cd-cta-btns { margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
    .cd-cta2 .btn-outline { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
    .cd-cta2 .btn-outline:hover { background: rgba(255,255,255,.1); }
    /* 대표 이미지 갤러리 */
    .cd-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
    .cd-gitem { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--ink-200); background: var(--ink-100); aspect-ratio: 4 / 3; }
    .cd-gitem img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .cd-del { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; }
    .cd-del:hover { background: #dc2626; }
    /* 히어로 2단: 텍스트 좌 · 대표 이미지 우 */
    .cd-hero-inner { display: flex; gap: 36px; align-items: center; }
    .cd-hero-text { flex: 1 1 0; min-width: 0; }
    .cd-hero-media { flex: 0 0 40%; max-width: 40%; }
    .cd-hero-media:empty { display: none; }
    .cd-hgrid { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .cd-hgrid.multi { grid-template-columns: 1fr 1fr; }
    .cd-hero-media .cd-gitem { aspect-ratio: auto; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.05); box-shadow: 0 10px 30px rgba(0,0,0,.32); }
    .cd-hero-media .cd-gitem img { height: auto; object-fit: contain; cursor: zoom-in; }
    .cd-hero-media .cd-admin-row { margin-top: 12px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); }
    .cd-hero-media .cd-media-empty { color: rgba(255,255,255,.65); margin-bottom: 10px; }
    .cd-hero-media .btn-outline { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
    .cd-hero-media .btn-outline:hover { background: rgba(255,255,255,.1); }
    .cd-hero-media .cd-up-status { color: #fff; }
    /* 영상 샘플 — 풀폭 大 (초록 바 크기에 맞춤) */
    .cd-videos { display: grid; grid-template-columns: 1fr; gap: 18px; }
    .cd-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; border: 1px solid var(--ink-200); }
    .cd-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
    .cd-del-vid { position: static; width: auto; height: auto; border-radius: var(--radius-sm); padding: 6px 12px; margin-top: 8px; font-size: var(--fs-sm); background: var(--ink-100); color: var(--ink-600); }
    .cd-del-vid:hover { background: #fee2e2; color: #dc2626; }
    /* 관리자 컨트롤 */
    .cd-admin-row { margin-top: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px; border: 1px dashed var(--green-300); border-radius: var(--radius); background: var(--green-50); }
    .cd-yt-input { flex: 1; min-width: 220px; padding: 10px 13px; border: 1.5px solid var(--ink-200); border-radius: var(--radius-sm); font-family: inherit; font-size: var(--fs-sm); }
    .cd-yt-input:focus { outline: none; border-color: var(--green-500); }
    .cd-up-status { font-size: var(--fs-sm); color: var(--green-700); font-weight: var(--fw-semibold); }
    .cd-admin-hint { font-size: var(--fs-xs); color: var(--ink-400); }
    .cd-media-empty { color: var(--ink-400); font-size: var(--fs-sm); }
    /* 자동 저장 확인 토스트 */
    .cd-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px); background: var(--green-700); color: #fff; padding: 11px 22px; border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: var(--fw-semibold); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 10001; }
    .cd-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
    /* 이미지 라이트박스(클릭 시 크게) */
    .cd-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; padding: 28px; z-index: 10002; opacity: 0; visibility: hidden; transition: opacity .2s; cursor: zoom-out; }
    .cd-lightbox.on { opacity: 1; visibility: visible; }
    .cd-lightbox img { max-width: 96%; max-height: 92%; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
    .cd-lb-close { position: fixed; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 19px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
    .cd-lb-close:hover { background: rgba(255,255,255,.32); }
    /* 영상 추가(영상 없을 때 관리자 컴팩트 컨트롤) */
    .cd-vid-add-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--green-700); }
    @media (max-width: 760px) { .cd-summary { grid-template-columns: repeat(2, 1fr); } .cd-videos { grid-template-columns: 1fr; } .cd-hero-inner { flex-direction: column; align-items: stretch; gap: 22px; } .cd-hero-media { flex-basis: auto; max-width: 100%; } }

/* ════════════ 고객사 로고 마퀴 (홈, 오른쪽→왼쪽 흐름) ════════════ */
.logo-marquee { overflow: hidden; background: #fff; padding: 26px 0; border-bottom: 1px solid var(--ink-100); position: relative; }
.logo-marquee::before, .logo-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
.logo-marquee::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.logo-marquee::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
.lm-track { display: flex; align-items: center; gap: 56px; width: max-content; animation: lm-scroll 112s linear infinite; }
.logo-marquee:hover .lm-track { animation-play-state: paused; }
.lm-item { flex: none; height: 54px; display: flex; align-items: center; }
.lm-item img { height: 100%; width: auto; max-width: 185px; object-fit: contain; }
@keyframes lm-scroll { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 640px) { .lm-track { gap: 36px; animation-duration: 82s; } .lm-item { height: 40px; } .logo-marquee { padding: 18px 0; } .logo-marquee::before, .logo-marquee::after { width: 48px; } }
@media (prefers-reduced-motion: reduce) { .lm-track { animation: none; } }

/* ════════════ 교육후기 소셜 — 조회·좋아요·공유·댓글 ════════════ */
#reviewSocial { margin-top: 40px; }
.rs-bar { display: flex; align-items: center; gap: 10px; padding: 16px 0; border-top: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); }
.rs-stat { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-500); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.rs-stat b { color: var(--ink-700); }
.rs-bar .rs-ic { font-size: 1.05em; line-height: 1; }
.rs-like, .rs-share { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ink-200); background: #fff; border-radius: 999px; padding: 8px 16px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-600); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.rs-like:hover, .rs-share:hover { border-color: var(--green-300); color: var(--green-700); }
.rs-like .rs-ic { color: var(--ink-300); transition: color .15s; }
.rs-like.on { border-color: #e2483d; background: #fff5f4; color: #e2483d; }
.rs-like.on .rs-ic { color: #e2483d; }
.rs-share { margin-left: auto; }
.rs-comments { margin-top: 34px; }
.rs-c-title { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); color: var(--ink-800); margin-bottom: 16px; }
.rs-c-title b { color: var(--green-600); }
.rs-c-form { background: var(--green-50); border: 1px solid var(--ink-100); border-radius: 12px; padding: 14px; margin-bottom: 22px; }
.rs-c-row { display: flex; gap: 8px; margin-bottom: 8px; }
.rs-c-name, .rs-c-pw { flex: 1; min-width: 0; }
.rs-c-form input, .rs-c-form textarea { width: 100%; border: 1px solid var(--ink-200); border-radius: 8px; padding: 10px 12px; font: inherit; font-size: var(--fs-sm); background: #fff; box-sizing: border-box; }
.rs-c-form textarea { resize: vertical; line-height: 1.6; }
.rs-c-form input:focus, .rs-c-form textarea:focus { outline: none; border-color: var(--green-400); }
.rs-c-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.rs-c-hint { font-size: var(--fs-xs); color: var(--ink-400); }
.rs-c-btn { border: 0; background: var(--green-600); color: #fff; border-radius: 8px; padding: 9px 24px; font-weight: var(--fw-bold); font-size: var(--fs-sm); cursor: pointer; flex: none; }
.rs-c-btn:hover { background: var(--green-700); }
.rs-c-btn:disabled { opacity: .5; cursor: default; }
.rs-c-emoji-wrap { position: relative; display: inline-flex; }
.rs-c-emoji { border: 1px solid var(--ink-200); background: #fff; font-size: 16px; line-height: 1; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; flex: none; }
.rs-c-emoji:hover { background: var(--green-50); border-color: var(--green-300); }
.rs-c-emoji-pop { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 5; background: #fff; border: 1px solid var(--ink-200); border-radius: 10px; padding: 8px; box-shadow: 0 8px 24px -8px rgba(0,0,0,.3); display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; width: 296px; max-width: calc(100vw - 56px); }
.rs-c-emoji-pop[hidden] { display: none; }
.rs-c-emoji-pop button { border: 0; background: transparent; font-size: 19px; line-height: 1; padding: 5px; cursor: pointer; border-radius: 6px; }
.rs-c-emoji-pop button:hover { background: var(--green-50); }
.rs-c-list { display: flex; flex-direction: column; }
.rs-c-item { padding: 14px 2px; border-bottom: 1px solid var(--ink-100); }
.rs-c-item.hid { opacity: .5; }
.rs-c-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: var(--fs-xs); color: var(--ink-400); }
.rs-c-meta b { color: var(--ink-700); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.rs-c-rep { color: #e2483d; font-weight: var(--fw-bold); }
.rs-c-hid { background: var(--ink-100); color: var(--ink-500); border-radius: 4px; padding: 1px 6px; font-size: 11px; }
.rs-c-text { font-size: var(--fs-sm); color: var(--ink-700); line-height: 1.65; word-break: break-word; }
.rs-c-act { margin-top: 6px; display: flex; gap: 14px; }
.rs-c-act button { border: 0; background: none; color: var(--ink-400); font-size: var(--fs-xs); cursor: pointer; padding: 0; }
.rs-c-act button:hover { color: var(--ink-600); text-decoration: underline; }
.rs-c-act button:disabled { color: var(--ink-300); cursor: default; text-decoration: none; }
.rs-c-empty { text-align: center; color: var(--ink-400); padding: 24px 0; font-size: var(--fs-sm); }
.rs-toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(20,30,25,.92); color: #fff; padding: 11px 22px; border-radius: 999px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); z-index: 10050; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.rs-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 520px) { .rs-bar { flex-wrap: wrap; } .rs-share { padding: 8px 13px; } }

/* ── 번호 페이지네이션 (교육후기 목록 + 게시물 하단 공용) ── */
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 40px; }
.pg-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--ink-200); background: #fff; color: var(--ink-700); border-radius: 10px; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s; }
.pg-btn:hover:not(:disabled):not(.on):not([aria-disabled="true"]) { background: var(--ink-50, #f4f6f4); border-color: var(--ink-300, #c9d1cb); }
.pg-btn.on { background: var(--green-700, #1f6f43); color: #fff; border-color: var(--green-700, #1f6f43); font-weight: var(--fw-bold); cursor: default; }
.pg-btn:disabled, .pg-btn[aria-disabled="true"] { opacity: .35; cursor: default; pointer-events: none; }
.pg-gap { padding: 0 2px; color: var(--ink-300, #b8c0ba); user-select: none; }
.pg-jump { display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; color: var(--ink-400); font-size: var(--fs-sm); white-space: nowrap; }
.pg-jump input { width: 52px; height: 40px; border: 1px solid var(--ink-200); border-radius: 10px; padding: 0 8px; font: inherit; text-align: center; }
@media (max-width: 560px) { .pg-btn { min-width: 36px; height: 36px; padding: 0 9px; } .pg-jump { width: 100%; justify-content: center; margin: 12px 0 0; } }

/* ── 토크 글 상세(/talk/{id}) — 동적 talk-post.html + 정적 프리렌더 공유 ── */
.tp-badge { display:inline-block; font-size:var(--fs-xs); font-weight:var(--fw-bold); padding:3px 11px; border-radius:var(--radius-full); background:var(--green-50); color:var(--green-800); }
.tp-title { font-size:var(--fs-2xl); font-weight:var(--fw-extrabold); letter-spacing:-.02em; margin:12px 0 8px; color:var(--ink-800); word-break:keep-all; }
.tp-meta { font-size:var(--fs-sm); color:var(--ink-400); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tp-meta b { color:var(--ink-600); font-weight:var(--fw-bold); }
.tp-owner { margin-left:auto; display:flex; gap:6px; }
.tp-owner button { font-size:var(--fs-xs); font-weight:var(--fw-bold); padding:5px 12px; border-radius:var(--radius-full); border:1px solid var(--ink-200); background:#fff; color:var(--ink-600); cursor:pointer; }
.tp-dm { font-size:var(--fs-xs); font-weight:var(--fw-bold); padding:5px 12px; border-radius:var(--radius-full); border:1px solid var(--green-300,#86efac); background:var(--green-50,#f0fdf4); color:var(--green-700,#15803d); cursor:pointer; }
.tp-dm:hover { background:var(--green-100,#dcfce7); }
.tp-body { font-size:var(--fs-md); line-height:1.85; color:var(--ink-700); margin:22px 0 8px; word-break:break-word; white-space:normal; }
.tp-divider { border:0; border-top:1px solid var(--ink-200); margin:26px 0; }
.tp-back { display:inline-block; margin-top:8px; font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--green-700); text-decoration:none; }
.tp-edit input, .tp-edit textarea { width:100%; padding:11px 14px; border:1px solid var(--ink-200); border-radius:var(--radius); font-size:var(--fs-sm); font-family:inherit; margin-bottom:12px; }
.tp-edit textarea { min-height:200px; resize:vertical; line-height:1.7; }
.tp-cat-pick { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.tp-cat-pick button { padding:7px 13px; font-size:var(--fs-sm); font-weight:var(--fw-bold); border:1px solid var(--ink-200); background:#fff; border-radius:var(--radius-full); cursor:pointer; color:var(--ink-600); }
.tp-cat-pick button.on { color:#fff; background:var(--green-700); border-color:var(--green-700); }