/* =========================================================
   KU AI Academy · v2 레이어
   이미지 기반 카드 · 히어로 슬라이더 · 대상별 섹션 · 와이드 배너
   ========================================================= */

/* ---- 상단 프로모션 띠 ---- */
.promo-band{
  background:linear-gradient(90deg,#1b1f4b,#2b2378 40%,#3d2a86 70%,#1f3a8a);
  color:#fff;overflow:hidden;position:relative;
}
.promo-band .wrap{display:flex;align-items:center;gap:16px;height:54px}
.promo-band .pb-tag{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);border-radius:999px;
  padding:4px 12px;font-size:11.5px;font-weight:800;letter-spacing:.03em;flex-shrink:0}
.promo-band .pb-txt{font-size:15px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.promo-band .pb-txt b{color:#ffd98a}
.promo-band .pb-go{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:#fff;color:#1e2a6b;
  border:none;border-radius:999px;height:32px;padding:0 16px;font-size:12.8px;font-weight:800;cursor:pointer;
  transition:.18s var(--ease);flex-shrink:0}
.promo-band .pb-go:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.28)}

/* ---- 히어로 v2 : 좌측 카테고리 레일 + 슬라이더 ---- */
.hero2{background:#fff;border-bottom:1px solid var(--border)}
.hero2-grid{display:grid;grid-template-columns:212px 1fr;padding:22px 0 26px}
.hcat{border-right:1px solid var(--border);padding-right:16px}
.hcat h4{font-size:13px;color:var(--muted);font-weight:800;padding:6px 10px 10px;letter-spacing:.02em}
.hcat a{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:650;
  color:var(--text-2);cursor:pointer;transition:.15s var(--ease)}
.hcat a:hover{background:var(--brand-50);color:var(--brand-700);transform:translateX(3px)}
.hcat a .hi{color:var(--muted-2);display:flex}
.hcat a:hover .hi{color:var(--brand-600)}
.hcat-cta{margin-top:14px;padding:14px;border-radius:14px;background:linear-gradient(150deg,#182a54,#2c2063);color:#fff}
.hcat-cta b{display:block;font-size:13.6px;line-height:1.45}
.hcat-cta span{display:block;font-size:11.5px;color:#a9bddf;margin-top:5px}
.hcat-cta button{margin-top:11px;width:100%;height:32px;border-radius:9px;border:none;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;font-size:12.2px;font-weight:800;transition:.16s var(--ease)}
.hcat-cta button:hover{background:rgba(255,255,255,.3)}

.hslider{position:relative;padding-left:24px;min-width:0}
.hslide{position:relative;border-radius:20px;overflow:hidden;height:372px;display:none;
  box-shadow:0 18px 44px rgba(15,23,42,.16)}
.hslide.on{display:block;animation:hsIn .5s var(--ease)}
@keyframes hsIn{from{opacity:0;transform:scale(.995)}to{opacity:1;transform:none}}
.hslide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hslide .sh{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(9,14,32,.94) 0%,rgba(12,20,46,.82) 34%,rgba(12,20,46,.25) 62%,rgba(12,20,46,.05) 100%)}
.hs-in{position:relative;z-index:2;padding:44px 46px;max-width:600px;color:#fff;height:100%;
  display:flex;flex-direction:column;justify-content:center}
.hs-tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:6px 13px;font-size:12.2px;font-weight:700;color:#dbe6ff}
.hslide h2{font-size:38px;line-height:1.22;margin-top:16px;letter-spacing:-.04em}
.hslide h2 .g{background:linear-gradient(100deg,#8fd0ff,#b7a2ff 55%,#ffd08a);-webkit-background-clip:text;background-clip:text;color:transparent}
.hslide p{margin-top:14px;font-size:15.2px;color:#c6d4ef;line-height:1.7}
.hs-cta{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.hs-nav{position:absolute;right:22px;bottom:22px;z-index:3;display:flex;align-items:center;gap:8px}
.hs-nav button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(10,16,34,.45);
  color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px);transition:.16s var(--ease)}
.hs-nav button:hover{background:rgba(255,255,255,.22)}
.hs-nav .cnt{font-size:12.5px;color:#dbe6ff;font-weight:700;padding:0 4px;font-variant-numeric:tabular-nums}
.hs-dots{position:absolute;left:46px;bottom:26px;z-index:3;display:flex;gap:7px}
.hs-dots i{width:26px;height:4px;border-radius:99px;background:rgba(255,255,255,.32);cursor:pointer;transition:.2s var(--ease)}
.hs-dots i.on{background:#fff;width:40px}

/* ---- 퀵 진입 타일 ---- */
.qtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.qtile{display:flex;align-items:center;gap:13px;padding:16px 18px;background:#fff;border:1px solid var(--border);
  border-radius:16px;cursor:pointer;transition:.2s var(--ease);box-shadow:var(--sh-1);text-align:left;width:100%}
.qtile:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--brand-200)}
.qtile .qi{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex-shrink:0}
.qtile b{display:block;font-size:14.6px}
.qtile span{display:block;font-size:12.2px;color:var(--muted);margin-top:2px}
.qtile .qarrow{margin-left:auto;color:var(--muted-2);transition:.18s var(--ease)}
.qtile:hover .qarrow{color:var(--brand-600);transform:translateX(3px)}

/* ---- 대상별 섹션 : 좌 프로모 패널 + 우 카드 ---- */
.catsec{display:grid;grid-template-columns:282px 1fr;gap:24px;align-items:start}
.cat-promo{border-radius:20px;overflow:hidden;position:relative;color:#fff;min-height:436px;display:flex;
  flex-direction:column;justify-content:flex-end;box-shadow:var(--sh-2)}
.cat-promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cp-sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,38,.18) 0%,rgba(10,16,38,.62) 52%,rgba(10,16,38,.94) 100%)}
.cp-in{position:relative;z-index:2;padding:24px}
.cp-k{font-size:11.6px;font-weight:900;color:#9fc4ff;letter-spacing:.06em}
.cat-promo h3{font-size:22px;margin:8px 0;letter-spacing:-.03em}
.cat-promo p{font-size:13.2px;color:#c7d5ee;line-height:1.65}
.cp-stats{display:flex;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18)}
.cp-stats div b{display:block;font-size:18px;font-weight:900}
.cp-stats div span{font-size:11.4px;color:#a9bddf}
.cp-go{margin-top:16px;width:100%;height:40px;border-radius:11px;border:none;cursor:pointer;
  background:#fff;color:#14224a;font-size:13.6px;font-weight:800;transition:.18s var(--ease)}
.cp-go:hover{background:var(--brand-50);transform:translateY(-1px)}
.cat-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}

/* ---- 과정 카드 v2 (실제 이미지) ---- */
.cc-thumb{height:152px;padding:0}
.cc-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.45s var(--ease)}
.ccard:hover .cc-thumb img{transform:scale(1.06)}
.cc-thumb::after{background:linear-gradient(180deg,rgba(8,14,32,.04) 0%,rgba(8,14,32,.10) 52%,rgba(8,14,32,.70) 100%)}
.cc-thumb .tags{position:absolute;left:12px;bottom:11px;z-index:3}
.cc-badge{position:absolute;left:12px;top:11px;z-index:3;display:flex;gap:5px}
.cc-badge span{border-radius:6px;padding:3px 8px;font-size:10.8px;font-weight:900;letter-spacing:.02em;color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.22)}
.b-best{background:#dc2f4b}.b-new{background:#0f9d6e}.b-hot{background:#c9992c}.b-lic{background:#6d3fef}

/* ---- 와이드 프로모션 배너 ---- */
.wbanner{position:relative;border-radius:22px;overflow:hidden;min-height:290px;display:flex;align-items:center;color:#fff;
  box-shadow:0 18px 44px rgba(15,23,42,.16)}
.wbanner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wb-sh{position:absolute;inset:0}
.wbanner.blue .wb-sh{background:linear-gradient(95deg,rgba(9,16,40,.95) 0%,rgba(14,24,58,.86) 40%,rgba(14,24,58,.22) 78%,transparent 100%)}
.wbanner.gold .wb-sh{background:linear-gradient(95deg,rgba(46,32,6,.94) 0%,rgba(66,46,10,.84) 40%,rgba(66,46,10,.2) 78%,transparent 100%)}
.wbanner.ai  .wb-sh{background:linear-gradient(95deg,rgba(30,12,66,.95) 0%,rgba(40,18,86,.85) 40%,rgba(40,18,86,.2) 78%,transparent 100%)}
.wb-in{position:relative;z-index:2;padding:36px 42px;max-width:640px}
.wb-k{font-size:11.8px;font-weight:900;letter-spacing:.06em;color:#9fc4ff}
.wbanner.gold .wb-k{color:#ffd98a}
.wbanner.ai .wb-k{color:#cbb6ff}
.wbanner h3{font-size:29px;margin:10px 0 12px;letter-spacing:-.035em;line-height:1.3}
.wbanner p{font-size:14.6px;color:#c6d4ef;line-height:1.72}
.wbanner.gold p{color:#ede0c4}
.wb-stats{display:flex;gap:26px;margin-top:20px;flex-wrap:wrap}
.wb-stats div b{display:block;font-size:23px;font-weight:900;letter-spacing:-.03em}
.wb-stats div span{font-size:12px;color:#a9bddf}
.wbanner.gold .wb-stats div span{color:#cbb88c}
.wb-cta{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}

/* ---- 페이지 히어로 배경 이미지 ---- */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.42}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,rgba(9,16,40,.95) 0%,rgba(13,22,54,.84) 45%,rgba(20,16,58,.58) 100%)}

/* ---- 학습화면 영상 썸네일 ---- */
.video-mock img.vm-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.52}

/* ---- 섹션 헤더 더보기 ---- */
.sec-more{display:inline-flex;align-items:center;gap:5px;font-size:13.4px;font-weight:700;color:var(--muted);
  cursor:pointer;transition:.16s var(--ease)}
.sec-more:hover{color:var(--brand-600)}

/* ---- 이미지 카드 (AI 실습 / 강사) ---- */
.imgcard{position:relative;border-radius:18px;overflow:hidden;min-height:210px;display:flex;align-items:flex-end;color:#fff;
  box-shadow:var(--sh-2);cursor:pointer;transition:.22s var(--ease)}
.imgcard:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.imgcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.45s var(--ease)}
.imgcard:hover img{transform:scale(1.05)}
.imgcard .ic-sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,38,.1),rgba(10,16,38,.88))}
.imgcard .ic-in{position:relative;z-index:2;padding:20px}
.imgcard h4{font-size:17px}
.imgcard p{font-size:13px;color:#c7d5ee;margin-top:6px;line-height:1.6}

/* ---- 반응형 v2 ---- */
@media (max-width:1180px){
  .catsec{grid-template-columns:244px 1fr}
  .hero2-grid{grid-template-columns:190px 1fr}
  .hslide h2{font-size:31px}
}
@media (max-width:1024px){
  .hero2-grid{grid-template-columns:1fr}
  .hcat{display:none}
  .hslider{padding-left:0}
  .hslide{height:334px}
  .qtiles{grid-template-columns:repeat(2,1fr)}
  .catsec{grid-template-columns:1fr}
  .cat-promo{min-height:210px}
  .wbanner .wb-sh{background:linear-gradient(180deg,rgba(9,16,40,.7),rgba(12,20,50,.95))!important}
  .wb-in{max-width:none}
}
@media (max-width:860px){
  .promo-band .wrap{height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;gap:9px}
  .promo-band .pb-txt{font-size:13.2px;white-space:normal}
  .promo-band .pb-go{margin-left:0}
  .hslide{height:308px}
  .hs-in{padding:26px 24px}
  .hslide h2{font-size:25px}
  .hslide p{font-size:13.6px}
  .hs-dots{left:24px;bottom:18px}
  .hs-nav{right:16px;bottom:16px}
  .wbanner h3{font-size:22px}
  .wb-in{padding:26px 22px}
}
@media (max-width:600px){
  .qtiles{grid-template-columns:1fr}
}

/* ---- 고정 헤더 레이어 승격 (스크롤 중 리페인트 아티팩트 방지) ---- */
#demo-bar,#topnav{transform:translateZ(0);backface-visibility:hidden;will-change:transform}
#topnav{background:rgba(255,255,255,.94)}
.hslide img,.wbanner img,.cat-promo img,.cc-thumb img{backface-visibility:hidden}

/* ---- 강사 사진 ---- */
.inst-photo{width:56px;height:56px;border-radius:16px;object-fit:cover;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand-600),var(--ai-600));box-shadow:var(--sh-1)}
.inst-photo.lg{width:84px;height:84px;border-radius:22px;box-shadow:var(--sh-2)}
.inst-photo.sm{width:34px;height:34px;border-radius:11px}
.ccard .inst-photo.sm{border:2px solid #fff}
.cc-inst{display:flex;align-items:center;gap:7px}
.cc-inst span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 데모 안내 바 제거에 따른 상단 여백 정리 */
:root{--bar-h:0px}
@media (max-width:600px){ :root{--bar-h:0px} }

/* ===== 오류·개선 제안 플로팅 버튼 (모든 페이지 공통) ===== */
.report-fab{position:fixed;right:22px;bottom:22px;z-index:200;display:flex;align-items:center;gap:9px;
  height:48px;padding:0 20px;border:none;border-radius:999px;cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:700;color:#fff;background:linear-gradient(135deg,#6d6dff,#4f46e5);
  box-shadow:0 12px 28px rgba(79,70,229,.34);transition:transform .16s ease,box-shadow .16s ease}
.report-fab:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(79,70,229,.42)}
.report-fab .ico{font-size:16px;line-height:1}
.report-fab .dot{width:7px;height:7px;border-radius:50%;background:#ff5a5a;margin-left:2px;
  box-shadow:0 0 0 3px rgba(255,90,90,.25)}
@media (max-width:640px){
  .report-fab{right:14px;bottom:14px;height:46px;padding:0 16px}
  .report-fab .txt{display:none}
}
@media print{ .report-fab{display:none!important} }

/* ===== 강사 지원 ===== */
.apply-cta{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  border-radius:22px;padding:34px 36px;color:#fff;
  background:linear-gradient(135deg,#1e1b4b 0%,#312e81 45%,#4f46e5 100%);
  box-shadow:0 18px 44px rgba(49,46,129,.28)}
.apply-cta h3{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:6px 0 10px}
.apply-cta p{font-size:14.4px;line-height:1.8;color:rgba(255,255,255,.82);max-width:620px}
.apply-points{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;
  font-size:13px;color:rgba(255,255,255,.72)}
.btn.light{background:#fff;color:#312e81;border-color:#fff;flex-shrink:0}
.btn.light:hover{background:#eef2ff;color:#312e81;border-color:#eef2ff}
@media (max-width:760px){
  .apply-cta{padding:26px 22px;gap:18px}
  .apply-cta h3{font-size:20px}
  .btn.light{width:100%;justify-content:center}
}

/* 강사 사진이 없을 때의 대체 표시 */
.inst-ph{display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px}

/* 지원 폼 — 사진 미리보기 · 동의 체크 */
.ins-photo-box{width:74px;height:74px;border-radius:18px;flex-shrink:0;overflow:hidden;
  display:grid;place-items:center;color:var(--text-3);
  background:var(--surface-2);border:1px solid var(--border)}
.ins-photo-box img{width:100%;height:100%;object-fit:cover;display:block}
.agree-row{display:flex;gap:9px;align-items:flex-start;margin-top:6px;cursor:pointer;
  font-size:13px;line-height:1.7;color:var(--text-2)}
.agree-row input{width:17px;height:17px;margin-top:2px;flex-shrink:0;accent-color:var(--brand-600)}

/* ===== 과정 이미지가 없을 때: 대상별 그라디언트 + 과정명 첫 글자 ===== */
.cc-letter{position:absolute;right:14px;top:6px;z-index:1;font-size:74px;font-weight:900;line-height:1;color:rgba(255,255,255,.26);
  letter-spacing:-.04em;pointer-events:none;user-select:none}
.cc-thumb img{z-index:1}
.cc-thumb::after{z-index:2}
.cc-thumb .cc-badge{z-index:3}
.cd-hero.noimg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,14,32,.35),rgba(8,14,32,.55))}
.stat-strip{display:flex;flex-wrap:wrap;overflow:hidden}
.stat-strip>div{padding:22px 40px;flex:0 1 auto;min-width:160px}
.stat-strip>div+div{border-left:1px solid var(--border)}
@media (max-width:720px){
  .stat-strip>div{flex:1 1 50%;padding:18px 20px;min-width:0}
  .stat-strip>div+div{border-left:0}
  .stat-strip>div:nth-child(even){border-left:1px solid var(--border)}
}

/* ===== 상단 메뉴 로그인 상태 ===== */
.nav-me{display:inline-flex;align-items:center;gap:6px;font-size:13.4px;color:var(--text-2);white-space:nowrap;max-width:180px}
.nav-me .nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
.nav-me b{color:var(--text);font-weight:800}
.nav-right .btn{white-space:nowrap}
.nav-m-auth{display:none}
@media (max-width:1180px){ .nav-right .nav-inq{display:none} }
@media (max-width:860px){
  .nav-me{display:none}
  .nav-menu .nav-m-auth{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;padding:12px 4px 4px;border-top:1px solid var(--border)}
  .nav-menu .nav-m-auth .btn{padding:0 14px;height:38px;font-size:13.6px;border-radius:10px;color:inherit}
  .nav-menu .nav-m-auth .btn:not(.ghost){color:#fff}
  .nav-menu .nav-m-auth .nm-me{flex-basis:100%;display:flex;align-items:center;gap:6px;font-size:13.6px;color:var(--text-2);padding:0 4px 2px}
  .nav-menu .nav-m-auth .nm-me b{color:var(--text)}
}

/* ===== 과정 카드 · 신청 카드 가격 ===== */
.cc-price.free,.buy-price.free{color:var(--ok)}
.cc-price.group{font-size:14px;font-weight:800;color:var(--text-2)}
.cc-access{display:inline-flex;align-items:center;gap:4px;font-size:11.8px;color:var(--muted);font-weight:600;white-space:nowrap}
.buy-price.group{font-size:21px}
.buy-closed{display:flex;gap:10px;align-items:flex-start;padding:13px 14px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);font-size:13px;line-height:1.6}
.buy-closed .ico{flex-shrink:0;margin-top:2px;color:var(--brand-600)}
.buy-closed b{display:block;color:var(--text);font-size:14px;margin-bottom:2px}
.buy-test{display:flex;align-items:center;gap:6px;justify-content:center;padding:10px 16px 14px;margin-top:-6px;
  font-size:12px;color:var(--muted)}

/* ===== 하단 사업자 정보 · 정책 링크 ===== */
.ft-legal{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.09);font-size:12.4px;line-height:1.8}
.ft-policy{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:10px}
.ft-policy a{color:#c3d2ec;font-size:13px}
.ft-policy a:hover{color:#fff}
.ft-policy b{color:#fff;font-weight:800}
.ft-biz{display:flex;flex-wrap:wrap;gap:0 14px}
.ft-bi{white-space:nowrap}
.ft-bi em{font-style:normal;color:#6f81a3;margin-right:3px}
.ft-bi a{color:inherit}
.ft-bi a:hover{color:#fff}
.ft-copy{margin-top:8px;color:#6f81a3}
@media (max-width:600px){ .ft-bi{white-space:normal} }