/* main.css — hero & main page layout */
html{scroll-snap-type:y mandatory;scroll-padding-top:calc(46px + var(--chrome-h,48px))}
.hero,.at,.combo{scroll-snap-align:start}
/* 메인 절대규칙: 카드섹션(래퍼) 단위로 통째 스냅 — 각 섹션 = 한 화면. 내부 블록엔 스냅 금지. */
.at,.combo{height:calc(100vh - 46px - var(--chrome-h,48px));display:flex;flex-direction:column;justify-content:center;overflow:hidden}
/* 핵심 메뉴(#explore)만 다른 배경 톤으로 카드섹션 구분(밝은 남청 + 블루 글로우) */
#explore{background:linear-gradient(180deg,rgba(9,22,52,.40),rgba(8,20,45,.64)),url('../img/bg/sec-explore-pc.webp') center/cover no-repeat,#0f2549}
#explore .dc,#explore .ql{background:transparent}
/* #media는 단색 남색으로 통일해 상단 이음새(색 띠) 제거 */
#media{background:linear-gradient(180deg,rgba(8,17,40,.42),rgba(4,12,26,.66)),url('../img/bg/sec-media-pc.webp') center/cover no-repeat,#0a1b3f}
#media .mt,#media .vg{background:transparent}

/* ===== 카드섹션 ③ 데스크톱: 입학 준비 자료실(ADMISSION HUB) — 가이드라인 2026-07-03 ===== */
.resource-hub{
  --hub-card:rgba(8,29,68,.72); --hub-card-2:rgba(9,32,72,.86);
  --hub-line:rgba(110,170,255,.18); --hub-line-hl:rgba(64,176,255,.5);
  --hub-sub:rgba(255,255,255,.74); --hub-muted:rgba(255,255,255,.5);
  --hub-cyan:#34d9ff; --hub-blue:#256dff; --hub-green:#2ac7aa; --hub-purple:#7e5cff; --hub-gold:#ffd34f;
  width:100%; color:#fff;
}
.resource-hub .hub-inner{width:min(1440px,calc(100% - 96px));margin:0 auto}
/* 헤더 */
.hub-header{margin:0 0 15px}
.hub-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 8px;color:var(--hub-cyan);font-size:15px;font-weight:800;letter-spacing:.14em}
.hub-eyebrow__bar{width:26px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--hub-cyan),var(--hub-blue))}
.hub-header h2{margin:0;font-size:clamp(30px,3.1vw,44px);line-height:1.08;letter-spacing:-.03em;font-weight:800}
.hub-desc{margin:12px 0 0;color:var(--hub-sub);font-size:clamp(14px,1.1vw,17px)}
/* 상단 2열 */
.hub-top{display:grid;grid-template-columns:1fr 1.06fr;gap:20px;align-items:stretch}
.hub-card{position:relative;display:flex;flex-direction:column;padding:18px 20px 15px;border-radius:22px;
  border:1px solid var(--hub-line);background:linear-gradient(180deg,var(--hub-card-2),var(--hub-card));
  box-shadow:0 16px 44px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(8px)}
.hub-card--hl{border-color:var(--hub-line-hl);box-shadow:0 0 0 1px rgba(64,176,255,.16),0 18px 50px rgba(0,0,0,.3),0 0 32px rgba(37,109,255,.14)}
.hub-sec-title{display:flex;align-items:center;gap:11px;margin:0 0 16px}
.hub-sec-title svg{width:22px;height:22px;color:var(--hub-cyan)}
.hub-sec-title h3{margin:0;font-size:21px;font-weight:800;letter-spacing:-.02em}
.hub-sec-title--simple{margin-bottom:14px}
.hub-bar{width:4px;height:20px;border-radius:2px;background:linear-gradient(180deg,var(--hub-cyan),var(--hub-blue))}
/* 다운로드 리스트 */
.hub-dl-list{display:grid;gap:9px}
.hub-dl{display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:center;padding:11px 15px;border-radius:16px;
  border:1px solid rgba(120,170,255,.14);background:rgba(5,21,50,.5);transition:border-color .2s,background .2s}
.hub-dl:hover{border-color:rgba(120,170,255,.34);background:rgba(7,26,60,.62)}
.hub-file{display:inline-flex;align-items:center;justify-content:center;width:50px;height:60px;border-radius:10px;
  background:linear-gradient(180deg,#fff,#eef2f8);box-shadow:0 6px 14px rgba(0,0,0,.28)}
.hub-file b{color:#e4494b;font-size:14px;font-weight:900;letter-spacing:.02em}
.hub-dl__body{min-width:0}
.hub-dl__top{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.hub-dl__top h4{margin:0;font-size:17px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-tag{flex:0 0 auto;display:inline-flex;align-items:center;min-height:23px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:800}
.hub-tag--required{background:rgba(37,109,255,.22);color:#79b8ff}
.hub-tag--info{background:rgba(42,199,170,.18);color:#5fe3c6}
.hub-tag--recommend{background:rgba(126,92,255,.2);color:#a891ff}
.hub-dl__body p{margin:0 0 6px;color:var(--hub-sub);font-size:13.5px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-meta{color:var(--hub-muted);font-size:12.5px}
.hub-dl__act{display:flex;gap:8px;flex:0 0 auto}
.hub-foot-note{display:flex;align-items:center;gap:6px;margin:12px 0 0;color:var(--hub-muted);font-size:12.5px}
/* 버튼 시스템 */
.hub-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:11px;min-height:40px;padding:0 15px;
  text-decoration:none;font-size:13.5px;font-weight:700;color:#fff;white-space:nowrap;transition:transform .18s,box-shadow .18s,border-color .2s}
.hub-btn svg{width:16px;height:16px}
.hub-btn:hover{transform:translateY(-1px)}
.hub-btn--primary{background:linear-gradient(135deg,var(--hub-cyan),var(--hub-blue));box-shadow:0 10px 22px rgba(37,109,255,.24)}
.hub-btn--primary:hover{box-shadow:0 14px 30px rgba(37,109,255,.34)}
.hub-btn--line{border:1px solid rgba(120,170,255,.24);background:rgba(255,255,255,.04)}
.hub-btn--line:hover{border-color:rgba(120,170,255,.5)}
.hub-btn--lg{min-height:52px;font-size:16px;padding:0 24px;border-radius:13px}
.hub-btn--md{min-height:44px;font-size:14px}
/* 입학 준비 패널 */
.hub-sched{padding:15px 17px;border-radius:16px;border:1px solid rgba(120,170,255,.15);background:rgba(5,21,50,.45)}
.hub-sched h4{display:flex;align-items:center;gap:8px;margin:0 0 11px;font-size:16px;font-weight:800}
.hub-sched h4 svg{width:17px;height:17px;color:var(--hub-cyan)}
.hub-sched__list{list-style:none;margin:0;padding:0}
.hub-sched__list li{display:grid;grid-template-columns:16px 92px 1fr;align-items:center;gap:13px;min-height:46px;border-top:1px solid rgba(255,255,255,.07)}
.hub-sched__list li:first-child{border-top:0}
.hub-sched__list strong{font-size:14.5px;font-weight:700;white-space:nowrap}
.hub-sched__date{color:var(--hub-sub);font-size:13.5px;text-align:right;letter-spacing:-.01em}
.hub-dot{width:12px;height:12px;border-radius:50%;background:rgba(37,109,255,.85);box-shadow:0 0 14px rgba(37,109,255,.4)}
.hub-sched__list li.is-active .hub-dot{background:#fff;box-shadow:0 0 0 3px var(--hub-cyan),0 0 16px rgba(52,217,255,.6)}
.hub-sched__list li.is-active strong{color:var(--hub-cyan)}
.hub-sched__note{display:flex;align-items:flex-start;gap:6px;margin:10px 0 0;color:var(--hub-muted);font-size:12px;line-height:1.45}
.hub-cta{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;margin-top:14px;padding:15px 18px;border-radius:16px;
  border:1px solid rgba(120,170,255,.16);background:rgba(5,21,50,.45)}
.hub-cta__info{display:flex;align-items:center;gap:13px;min-width:0}
.hub-cta__ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;color:var(--hub-cyan);background:rgba(52,217,255,.12);border:1px solid rgba(52,217,255,.3)}
.hub-cta__ic svg{width:22px;height:22px}
.hub-cta__info h4{margin:0 0 3px;font-size:17px;font-weight:800}
.hub-cta__info p{margin:0;color:var(--hub-sub);font-size:13px}
.hub-cta__btns{display:grid;gap:9px;min-width:230px}
/* 빠른 바로가기 */
.hub-quick{margin-top:13px}
.hub-quick__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}
.hub-quick__card{display:flex;align-items:center;gap:12px;min-height:74px;padding:13px 14px;border-radius:16px;cursor:pointer;
  text-decoration:none;color:#fff;text-align:left;border:1px solid rgba(120,170,255,.14);font:inherit;
  background:linear-gradient(180deg,rgba(8,28,64,.86),rgba(6,22,52,.9));transition:transform .18s,border-color .2s}
.hub-quick__card:hover{transform:translateY(-2px);border-color:rgba(120,170,255,.34)}
.hub-quick__ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;color:var(--hub-cyan);background:rgba(52,217,255,.1);border:1px solid rgba(120,170,255,.16)}
.hub-quick__ic svg{width:21px;height:21px}
.hub-quick__ic--helper{color:#8fb6ff;background:rgba(64,120,255,.14)}
.hub-quick__ic--diagnosis{color:#79b8ff;background:rgba(37,109,255,.12)}
.hub-quick__ic--scholarship{color:#5fe3c6;background:rgba(42,199,170,.12)}
.hub-quick__ic--campus{color:var(--hub-cyan);background:rgba(52,217,255,.12)}
.hub-quick__ic--docs{color:#a891ff;background:rgba(126,92,255,.14)}
.hub-quick__ic--contact{color:var(--hub-gold);background:rgba(255,211,79,.12)}
.hub-quick__ic--faq{color:#79c6ff;background:rgba(52,150,255,.12)}
.hub-quick__tx{min-width:0;flex:1 1 auto}
.hub-quick__tx strong{display:block;font-size:15px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-quick__tx span{display:block;margin-top:3px;color:var(--hub-sub);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-quick__go{flex:0 0 auto;color:var(--hub-muted)}
.hub-quick__go svg{width:17px;height:17px}
.hub-quick__card:hover .hub-quick__go{color:var(--hub-cyan)}
/* 태블릿: 상단 1열 · 퀵 3열 */
@media (max-width:1024px) and (min-width:768px){
  .hub-top{grid-template-columns:1fr}
  .hub-quick__grid{grid-template-columns:repeat(3,1fr)}
}

@media (prefers-reduced-motion: reduce){ html{scroll-snap-type:none} .hub-btn:hover,.hub-quick__card:hover{transform:none} }
/* 관리자 "메인 편집" 미리보기 모드 — iframe 임베드 시 편집 섹션 강조/타 섹션 흐림 */
body.is-preview .at,body.is-preview .combo{transition:opacity .3s ease,box-shadow .3s ease,outline-color .3s ease;outline:3px solid transparent;outline-offset:-3px}
body.is-preview.dim-others .at:not(.is-edit),body.is-preview.dim-others .combo:not(.is-edit){opacity:.32}
body.is-preview .at.is-edit,body.is-preview .combo.is-edit{outline-color:#5fd0ff;box-shadow:inset 0 0 0 3px rgba(95,208,255,.4),0 0 60px rgba(95,208,255,.25)}
.sitechrome{top:46px} /* 메인 한정: 고정 NOTICE 배너 아래에 위치 */

.hero{position:relative;min-height:calc(100vh - 46px - var(--chrome-h,48px));overflow:hidden;color:#fff}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg[data-fallback="true"]{background:linear-gradient(135deg,var(--navy-2),var(--navy))}
.hero__video{width:100%;height:100%;object-fit:cover}
.hero__yt{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh;border:0;pointer-events:none}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,rgba(10,27,63,.35),rgba(7,16,36,.7))}
.hero__center{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center}
.hero__sub{margin:0;font-size:13px;letter-spacing:4px;color:var(--energy-soft);opacity:.85}
.hero__slogan{margin:0;font-size:clamp(34px,7vw,72px);font-weight:800;
  letter-spacing:-1px;font-style:italic;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.hero__state{margin-top:18px;display:inline-flex;align-items:center;gap:10px;
  align-self:center;padding:8px 16px;border-radius:999px;
  background:rgba(10,27,63,.55);border:1px solid rgba(95,208,255,.28);
  font-size:15px;color:#dfe9ff}
.hero__dlabel{font-weight:600;letter-spacing:.5px}
.hero__dday{font-weight:800;font-size:20px;color:#5fd0ff;text-shadow:0 0 14px rgba(95,208,255,.5)}
.hero__state--period .hero__dday{color:#7ee6b8;text-shadow:0 0 14px rgba(126,230,184,.5)}
/* 재생/정지 버튼: 화면 우측하단 챗봇 런처 바로 왼쪽에 고정 (챗봇 폭 ≈173px + 여백) */
.hero__toggle{position:fixed;right:208px;bottom:24px;z-index:1201;width:46px;height:46px;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.5);
  background:rgba(10,20,38,.55);backdrop-filter:blur(6px);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.35);transition:background .2s,transform .2s}
.hero__toggle:hover{background:rgba(20,40,70,.72);transform:translateY(-2px)}

/* ===== ④ 상단 띠배너 ===== */
.topbanner{position:sticky;top:0;left:0;right:0;height:46px;z-index:61;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(90deg,var(--navy),var(--brand));color:#fff;
  font-size:14px;text-decoration:none;padding:0 16px}
.topbanner-tag{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);
  font-size:11px;font-weight:700;letter-spacing:1px;padding:3px 9px;border-radius:20px}
.topbanner-text{font-weight:600}
.topbanner-go{opacity:.8;transition:transform .2s}
.topbanner:hover .topbanner-go{transform:translateX(4px)}
/* 배너·chrome은 흐름상 hero 위에 있어 별도 상단 패딩 불필요(높이에서 이미 차감) */

/* ===== Scroll 힌트 ===== */
.hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;color:#fff;text-decoration:none;opacity:.92}
.hero__scroll-label{font-size:11px;letter-spacing:2px}
.hero__scroll-chev{font-size:20px;line-height:.5;margin-top:-2px;animation:hero-chev 1.7s ease-in-out infinite}
@keyframes hero-chev{0%,100%{transform:translateY(0);opacity:.65}50%{transform:translateY(4px);opacity:1}}
@media (prefers-reduced-motion: reduce){ .hero__scroll-chev{animation:none} }
/* 마우스 스크롤 인디케이터 */
.hero__mouse{width:24px;height:38px;border:2px solid rgba(255,255,255,.85);border-radius:13px;
  position:relative;display:block}
.hero__mouse-dot{position:absolute;left:50%;top:7px;width:3.5px;height:7px;border-radius:2px;
  background:#fff;transform:translateX(-50%);animation:hero-mouse 1.7s cubic-bezier(.4,0,.2,1) infinite}
@keyframes hero-mouse{0%{opacity:0;transform:translate(-50%,0)}25%{opacity:1}55%{opacity:1;transform:translate(-50%,12px)}100%{opacity:0;transform:translate(-50%,12px)}}
@media (prefers-reduced-motion: reduce){ .hero__mouse-dot{animation:none;top:9px} }

/* ===== ⑥ 메인 컨텐츠 섹션 ===== */
.ms-wrap{position:relative;z-index:1;background:#fff}
.ms{min-height:100vh;display:flex;align-items:center;padding:80px 0}
.ms:nth-child(even){background:#f4f7fc}
.ms-inner{max-width:960px;margin:0 auto;padding:0 28px;width:100%}
.ms-kicker{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:3px;color:var(--brand)}
.ms-title{margin:0;font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-.5px;color:var(--ink-strong)}
.ms-lead{margin:14px 0 0;font-size:16px;color:var(--ink)}
.ms-kpis{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px}
.ms-kpi{flex:1;min-width:150px;background:var(--navy);color:#fff;border-radius:16px;padding:26px 18px;text-align:center}
.ms-kpi-n{font-size:42px;font-weight:800;color:var(--energy-soft);line-height:1}
.ms-kpi-l{font-size:13px;opacity:.85;margin-top:7px}
.ms-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.ms-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:28px 22px;text-decoration:none;color:var(--ink-strong);transition:transform .2s,box-shadow .2s}
.ms-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(23,70,162,.16)}
.ms-card h3{margin:0 0 8px;font-size:19px;font-weight:800}
.ms-card p{margin:0;font-size:14px;color:var(--ink)}
.ms-card-go{position:absolute;top:22px;right:22px;color:var(--brand);font-size:18px}
.ms-list{list-style:none;margin:28px 0 0;padding:0}
.ms-list li{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 4px;border-bottom:1px solid var(--line)}
.ms-list-t{font-weight:600;color:var(--ink-strong)}
.ms-list-d{color:#8a97a8;font-size:13px;white-space:nowrap}
.ms-twin{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.ms-twin-card{position:relative;border-radius:18px;padding:28px 26px;text-decoration:none;color:#fff;overflow:hidden;
  min-height:190px;display:flex;flex-direction:column;justify-content:flex-end;
  background-size:cover;background-position:center;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.ms-twin-card:first-child{background-color:#0d2f6b;background-image:linear-gradient(120deg,var(--brand),#0d2f6b)}
.ms-twin-card:last-child{background-color:#076046;background-image:linear-gradient(120deg,var(--green),#076046)}
.ms-twin-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(7,16,36,.32)}
/* 실제 배너 이미지: 좌측 어둡게 깔아 흰 텍스트 가독성 확보 */
.ms-twin-card.has-img::before{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg, rgba(7,16,36,.72) 0%, rgba(7,16,36,.42) 34%, rgba(7,16,36,.05) 60%, transparent 78%)}
.ms-twin-card h3{position:relative;z-index:1;margin:0 0 10px;font-size:22px;font-weight:800}
.ms-twin-card p{position:relative;z-index:1;margin:0;font-size:14px;opacity:.95;max-width:62%}
.ms-twin-card .ms-card-go{z-index:1}
.ms-cta{display:inline-flex;align-items:center;margin-top:28px;background:linear-gradient(135deg,var(--accent),var(--brand));
  color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:13px 24px;border-radius:26px}

/* ===== ⑥ 우측 섹션-진행 네비 (액션 퀵독 좌측에 배치) ===== */
.secnav{position:fixed;top:50%;right:calc(var(--quick-w) + 22px);transform:translateY(-50%);
  z-index:44;display:flex;flex-direction:column;align-items:center;gap:14px}
.secnav-title{font-size:9px;font-weight:800;letter-spacing:1.5px;color:#9aa7bd;
  text-align:center;line-height:1.3;margin-bottom:2px}
.secnav-dot{position:relative;width:11px;height:11px;border-radius:50%;
  background:#aab6c9;transition:all .25s var(--ease)}
.secnav-dot.is-active{background:var(--accent);box-shadow:0 0 0 4px rgba(42,109,240,.22);transform:scale(1.3)}
.secnav-label{position:absolute;right:22px;top:50%;transform:translateY(-50%);
  background:rgba(7,16,36,.92);color:#fff;font-size:12px;white-space:nowrap;padding:5px 10px;
  border-radius:7px;opacity:0;pointer-events:none;transition:opacity .2s}
.secnav-dot:hover .secnav-label{opacity:1}

/* ===== ⑦ 최신 공지(NOTICE) + 빠른 메뉴(Quick Links) — 다크 테마 ===== */
.mx-wrap{position:relative;z-index:1}
.mx{min-height:100vh;display:flex;align-items:center;padding:80px 0;color:#fff}
.mx--notice{background:linear-gradient(160deg,var(--navy-2,#0a1b3f),var(--navy,#071024))}
.mx--quick{background:linear-gradient(160deg,var(--navy,#071024),#04101f)}
.mx-inner{max-width:960px;margin:0 auto;padding:0 28px;width:100%}
.mx-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.mx-kicker{margin:0;font-size:12px;font-weight:700;letter-spacing:3px;color:var(--energy-soft)}
.mx-title{margin:0;font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-.5px;color:#fff}
.mx-more{margin-left:auto;color:var(--energy-soft);text-decoration:none;font-size:14px;font-weight:600;transition:opacity .2s}
.mx-more:hover{opacity:.75}

/* 공지 리스트 */
.mx-notices{margin-top:30px;border-top:1px solid rgba(255,255,255,.12)}
.mx-notice{display:flex;align-items:center;gap:14px;padding:18px 6px;text-decoration:none;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.12);transition:background .2s,padding-left .2s}
.mx-notice:hover{background:rgba(255,255,255,.06);padding-left:12px}
.mx-notice__date{font-size:13px;color:#9fb2cf;white-space:nowrap;min-width:84px}
.mx-notice__chip{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.5px;
  padding:3px 10px;border-radius:20px;background:rgba(255,255,255,.12);color:#cfe0f5}
.mx-notice__chip.is-new{background:var(--accent,#2a6df0);color:#fff}
.mx-notice__t{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 빠른 메뉴 카드 */
.mx-quicks{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:30px}
.mx-quick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:30px 14px;border-radius:16px;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  transition:transform .2s var(--ease),background .2s,box-shadow .2s}
.mx-quick:hover{transform:translateY(-3px);background:rgba(255,255,255,.1);box-shadow:0 14px 30px rgba(0,0,0,.3)}
.mx-quick__ic{width:30px;height:30px;color:var(--energy-soft)}
.mx-quick__ic svg{width:30px;height:30px}
.mx-quick__label{font-size:14px;font-weight:700}

/* 모집요강 미리보기/다운로드 배너 */
.mx-banner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:30px;padding:26px 30px;border-radius:18px;
  background:linear-gradient(135deg,rgba(42,109,240,.20),rgba(95,208,255,.10));
  border:1px solid rgba(255,255,255,.14)}
.mx-banner__kicker{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:2.5px;color:var(--energy-soft)}
.mx-banner__title{margin:0;font-size:clamp(20px,3vw,28px);font-weight:800;letter-spacing:-.5px;color:#fff}
.mx-banner__sub{margin:8px 0 0;font-size:14px;color:#c4d4ec;line-height:1.5}
.mx-banner__actions{display:flex;gap:12px;flex-wrap:wrap}
.mx-banner__btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:12px;
  font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;
  color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  transition:transform .2s var(--ease),background .2s,box-shadow .2s}
.mx-banner__btn--primary{background:linear-gradient(135deg,var(--accent),var(--brand));border-color:transparent}
.mx-banner__btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.16);box-shadow:0 12px 26px rgba(0,0,0,.3)}
.mx-banner__btn--primary:hover{background:linear-gradient(135deg,var(--accent),var(--brand));box-shadow:0 12px 26px rgba(42,109,240,.4)}
.mx-banner__ic{display:inline-flex;width:18px;height:18px}
.mx-banner__ic svg{width:18px;height:18px}

@media (prefers-reduced-motion: reduce){
  .mx-notice,.mx-quick,.mx-more,.mx-banner__btn{transition:none}
  .mx-banner__btn:hover{transform:none}
}

@media (max-width:1023px){
  .hero__toggle{right:14px;bottom:84px} /* 모바일: 우측 챗봇 아이콘 위로 세로 스택 + 하단 퀵바 회피 */
  .hero__scroll{bottom:96px}
  .hero__slogan{padding:0 16px}
  .secnav{display:none} /* 모바일은 하단 퀵바만 */
  .ms-cards{grid-template-columns:1fr}
  .ms-twin{grid-template-columns:1fr}
  .mx{min-height:auto;padding:64px 0}
  .mx-quicks{grid-template-columns:repeat(2,1fr)}
  .mx-notice__t{white-space:normal}
  .mx-banner{flex-direction:column;align-items:flex-start;padding:22px}
  .mx-banner__actions{width:100%}
  .mx-banner__btn{flex:1 1 auto;justify-content:center}
}

/* === ② 전형 안내 (admissionTypes) === */
.at{padding:clamp(32px,5vh,72px) clamp(28px,4.5vw,88px);background:linear-gradient(180deg,rgba(8,17,36,.42),rgba(6,13,30,.66)),url('../img/bg/sec-types-pc.webp') center/cover no-repeat,#0a1b3f}
.at-inner{max-width:min(1560px,94vw);width:100%;margin:0 auto}
.at-kicker{font-size:13px;letter-spacing:.2em;color:#5fd0ff;font-weight:800;margin:0}
.at-title{font-size:clamp(28px,3vw,40px);line-height:1.15;color:#fff;margin:8px 0 26px}
.at-zero{display:flex;align-items:center;gap:20px;margin:0 0 30px;padding:20px 28px;border-radius:20px;background:linear-gradient(100deg,rgba(126,230,184,.14),rgba(95,208,255,.05));border:1px solid rgba(126,230,184,.32)}
.at-zero-ic{flex-shrink:0;width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:15px;color:#7ee6b8;background:rgba(126,230,184,.14);border:1px solid rgba(126,230,184,.4)}
.at-zero-ic svg{width:32px;height:32px}
.at-zero-main{flex:1;min-width:0}
.at-zero-h{margin:0;font-size:22px;font-weight:700;color:#eaf3ff}.at-zero-h b{color:#7ee6b8;font-weight:900}
.at-zero-s{margin:4px 0 0;font-size:15px;color:#9fb4d8}
.at-zero-tags{display:flex;gap:8px;flex-shrink:0}
.at-zero-tags span{font-size:14px;font-weight:800;color:#06231a;background:#7ee6b8;padding:7px 16px;border-radius:999px}
.at-zero-tags span::before{content:"✓ "}
@media(max-width:560px){.at-zero-tags{display:none}}
.at-pickrow{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:22px}
.at-pickwrap{flex:1 1 auto;min-width:0}
.at-pick{margin:0 0 10px;font-size:15px;color:#cfe0ff;font-weight:700}
.at-chips{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:0}
.at-chip{cursor:pointer;font:inherit;font-size:15px;font-weight:700;color:#cfe0ff;background:rgba(19,41,75,.7);border:1px solid rgba(159,191,255,.28);padding:12px 22px;border-radius:999px;transition:.2s}
.at-chip:hover{border-color:#5fd0ff;transform:translateY(-1px)}
.at-chip.on{background:linear-gradient(135deg,#2a6df0,#1d4fd0);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(42,109,240,.5)}
.at-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:760px){.at-cards{grid-template-columns:1fr}}
.at-card{cursor:pointer;position:relative;min-height:230px;display:flex;flex-direction:column;border-radius:20px;padding:24px 26px;background:radial-gradient(120% 80% at 100% 0%,color-mix(in srgb,var(--ac) 16%,transparent),transparent 58%),rgba(13,28,56,.86);border:1px solid rgba(159,191,255,.16);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.at-card--img{background-image:linear-gradient(180deg,rgba(9,17,36,0) 42%,rgba(9,17,36,.6)),var(--bg);background-size:cover;background-position:center}
.at-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.at-bar{position:absolute;left:0;top:0;height:4px;width:100%;background:var(--ac);transition:height .25s}
.at-card.hl{border-color:var(--ac);box-shadow:0 0 0 2px var(--ac),0 18px 44px rgba(0,0,0,.45);transform:translateY(-4px)}
.at-card.hl .at-bar{height:7px}
.at-rec{position:absolute;top:11px;right:11px;opacity:0;font-size:10.5px;font-weight:800;color:#06231a;background:#7ee6b8;padding:3px 8px;border-radius:7px;transition:.25s;transform:scale(.85)}
.at-card.hl .at-rec{opacity:1;transform:scale(1)}
.at-nm{font-size:18px;font-weight:800;color:#fff;margin:8px 0 4px}
.at-quota{font-size:34px;font-weight:900;color:#fff}.at-quota small{font-size:15px;color:#c5d4ef;font-weight:600}
.at-mtd{font-size:14px;color:#dbe8ff;margin:10px 0;line-height:1.5}
.at-more{max-height:0;overflow:hidden;transition:max-height .35s;display:flex;flex-wrap:wrap;gap:7px}
.at-card.open .at-more{max-height:220px;border-top:1px dashed rgba(159,191,255,.24);margin-top:10px;padding-top:12px}
.at-step{font-size:12.5px;color:#eaf3ff;background:color-mix(in srgb,var(--ac) 20%,rgba(19,41,75,.55));border:1px solid color-mix(in srgb,var(--ac) 55%,transparent);border-radius:9px;padding:6px 11px;line-height:1.35}
.at-foot{margin-top:auto;padding-top:12px}
.at-stat{display:flex;justify-content:space-between;font-size:13px;color:#e8eefc;border-top:1px dashed rgba(159,191,255,.28);padding-top:10px}
.at-stat b{color:#ffd24a}
.at-exp{font-size:12.5px;color:#5fd0ff;font-weight:700;margin-top:8px}
.at-timeline{display:flex;gap:8px;align-items:stretch;color:#e8eefc;margin:42px 0 0;width:100%}
.at-node{position:relative;flex:1 1 0;display:flex;flex-direction:column;justify-content:center;gap:2px;text-align:center;white-space:nowrap;background:rgba(95,208,255,.1);border:1px solid rgba(95,208,255,.28);border-radius:10px;padding:8px 6px;transition:.2s}
.at-node-date{font-size:11px;font-weight:700;color:#9fb8dc;letter-spacing:.01em}
.at-node-label{font-size:12.5px;font-weight:600}
.at-node--done{opacity:.5}
.at-node--done .at-node-date{color:#7f96bd}
.at-node--now{background:rgba(126,230,184,.22);border-color:#7ee6b8;animation:atnodepulse 1.9s infinite}
.at-node--now .at-node-label{color:#eafff5;font-weight:800}
.at-node--now .at-node-date{color:#bff3d8}
.at-node-tag{position:absolute;left:50%;top:-30px;transform:translateX(-50%);background:#7ee6b8;color:#06231a;font-size:10.5px;font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 12px rgba(126,230,184,.45)}
.at-node-tag::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#7ee6b8}
@keyframes atnodepulse{0%{box-shadow:0 0 0 0 rgba(126,230,184,.55)}70%{box-shadow:0 0 0 7px rgba(126,230,184,0)}100%{box-shadow:0 0 0 0 rgba(126,230,184,0)}}
.at-ar{color:#3f5680;flex:0 0 auto;align-self:center;font-size:14px}
.at-ar.is-done{color:#7ee6b8}
.at-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;flex:0 0 auto}
.at-btn{cursor:pointer;font:inherit;font-size:16px;font-weight:700;padding:16px 28px;border-radius:14px;border:1px solid rgba(159,191,255,.3);color:#e8eefc;background:rgba(19,41,75,.55);text-decoration:none}
.at-btn--primary{background:linear-gradient(135deg,#2a6df0,#1d4fd0);border-color:transparent;color:#fff;position:relative}
.at-btn--primary::after{content:"";position:absolute;inset:0;border-radius:12px;animation:atpulse 2.2s infinite}
@keyframes atpulse{0%{box-shadow:0 0 0 0 rgba(95,208,255,.5)}70%{box-shadow:0 0 0 12px rgba(95,208,255,0)}100%{box-shadow:0 0 0 0 rgba(95,208,255,0)}}
@media(prefers-reduced-motion:reduce){.at-btn--primary::after,.at-node--now{animation:none}.at-card,.at-chip,.at-more,.at-bar,.at-node{transition:none}.at-card:hover{transform:none}}

/* 전형 섹션 추가 요소: 서브타이틀 · 칩 아이콘 · 카드 배지/태그 (레퍼런스 정리) */
.at-title2{margin:2px 0 26px;font-size:clamp(23px,2.3vw,32px);font-weight:900;color:#eaf3ff;line-height:1.12}
.at-title2 .at-em{color:#5fd0ff}
.at-chip{display:inline-flex;align-items:center;gap:8px}
.at-chip .at-ic{flex:0 0 auto;color:#7fb0ff}
.at-chip.on .at-ic{color:#fff}
.at-nmrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 4px}
.at-nmrow .at-nm{margin:0}
.at-badge{flex:0 0 auto;font-size:12.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#2a6df0,#1d4fd0);padding:4px 12px;border-radius:8px;letter-spacing:.02em}
/* 카드 헤더 인라인 정원(숫자+칩) — 데스크톱은 큰 .at-quota 블록을 쓰므로 숨김, 모바일에서 노출 */
.at-qty,.at-note-chip{display:none}
.at-tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.at-tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#dbe8ff;background:rgba(19,41,75,.6);border:1px solid rgba(159,191,255,.24);padding:7px 13px;border-radius:999px}
.at-tag .at-ic{color:#5fd0ff;flex:0 0 auto}
/* === ④ 지원유형 진단 === */
.dg-banner{padding:54px 20px;background:radial-gradient(700px 300px at 20% 0%,rgba(95,208,255,.18),transparent 60%),linear-gradient(120deg,#13294b,#0a1b3f)}
.dg-banner-inner{max-width:760px;margin:0 auto;text-align:center}
.dg-banner-kicker{font-size:12px;letter-spacing:.18em;color:#5fd0ff;font-weight:800;margin:0}
.dg-banner-title{font-size:25px;color:#fff;margin:8px 0 6px}
.dg-banner-sub{font-size:14px;color:#c5d4ef;margin:0 0 18px}
.dg-banner-btn{cursor:pointer;font:inherit;font-size:15px;font-weight:800;color:#fff;background:linear-gradient(135deg,#2a6df0,#1d4fd0);border:none;padding:14px 30px;border-radius:14px;position:relative}
.dg-banner-btn::after{content:"";position:absolute;inset:0;border-radius:14px;animation:atpulse 2.2s infinite}
.dg-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(4,10,26,.66);backdrop-filter:blur(4px)}
.dg-card{position:relative;width:100%;max-width:440px;background:#0d1c38;border:1px solid rgba(159,191,255,.2);border-radius:18px;padding:26px;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.dg-close{position:absolute;top:12px;right:12px;background:none;border:none;color:#9fb4d8;cursor:pointer}
.dg-prog{font-size:12px;color:#5fd0ff;font-weight:700}
.dg-q{font-size:19px;color:#fff;margin:8px 0 16px}
.dg-opts{display:flex;flex-direction:column;gap:10px}
.dg-opt{cursor:pointer;font:inherit;font-size:14.5px;font-weight:600;text-align:left;color:#e8eefc;background:rgba(19,41,75,.7);border:1px solid rgba(159,191,255,.24);padding:14px 16px;border-radius:12px;transition:.18s}
.dg-opt:hover{border-color:#5fd0ff;transform:translateX(3px);background:rgba(28,56,99,.8)}
.dg-badge{display:inline-block;font-size:11.5px;font-weight:800;color:#06231a;background:#7ee6b8;padding:4px 11px;border-radius:999px}
.dg-rtitle{font-size:21px;color:#fff;margin:10px 0 6px}
.dg-why{font-size:13.5px;color:#c5d4ef;margin:0 0 14px}
.dg-benlabel{font-size:12px;color:#9fb4d8;font-weight:700;margin-bottom:6px}
.dg-bens{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:7px}
.dg-bens li{font-size:13.5px;color:#e8eefc;padding-left:24px;position:relative}
.dg-bens li::before{content:"";position:absolute;left:0;top:6px;width:13px;height:8px;border-left:2px solid #7ee6b8;border-bottom:2px solid #7ee6b8;transform:rotate(-45deg)}
.dg-ractions{display:flex;gap:10px;flex-wrap:wrap}
.dg-btn{font:inherit;font-size:13.5px;font-weight:700;padding:12px 18px;border-radius:11px;text-decoration:none;color:#e8eefc;background:rgba(19,41,75,.6);border:1px solid rgba(159,191,255,.3)}
.dg-btn--primary{background:linear-gradient(135deg,#2a6df0,#1d4fd0);border-color:transparent;color:#fff}
.dg-note{font-size:11.5px;color:#8fa6cc;margin:14px 0 0}
@media(prefers-reduced-motion:reduce){.dg-banner-btn::after{animation:none}.dg-modal{backdrop-filter:none}.dg-opt{transition:none}}
/* === ③ 핵심 퀵메뉴(유혹형) === */
.ql{padding:clamp(12px,2.2vh,24px) clamp(28px,4.5vw,88px);background:#0a1b3f}
.ql-inner{max-width:min(1560px,94vw);width:100%;margin:0 auto}
.ql-title{font-size:clamp(22px,2.4vw,30px);color:#fff;margin:0 0 14px}
.ql-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.ql-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ql-grid{grid-template-columns:1fr}}
.ql-card{position:relative;min-height:clamp(130px,20vh,168px);border-radius:16px;overflow:hidden;border:1px solid rgba(159,191,255,.16);text-decoration:none;display:flex;align-items:flex-end;transition:transform .25s,box-shadow .25s,border-color .25s}
.ql-card:hover{transform:translateY(-4px);border-color:#5fd0ff;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.ql-card--primary{border-color:rgba(95,208,255,.5)}
.ql-card-bg{position:absolute;inset:0;background:var(--bg) center/cover no-repeat,#13294b;transition:transform .4s;z-index:0}
.ql-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,27,63,.1),rgba(10,27,63,.92));z-index:1}
.ql-card:hover .ql-card-bg{transform:scale(1.08)}
.ql-card-body{position:relative;z-index:2;padding:16px 18px}
.ql-card-t{font-size:17px;color:#fff;margin:0 0 4px}
.ql-card-l{font-size:12.5px;color:#c5d4ef;margin:0 0 6px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.ql-card-go{font-size:12px;color:#5fd0ff;font-weight:700;opacity:0;transform:translateY(6px);transition:.25s}
.ql-card:hover .ql-card-go{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.ql-card,.ql-card-bg,.ql-card-go{transition:none}.ql-card:hover,.ql-card:hover .ql-card-bg{transform:none}}
/* === ⑤ 캠퍼스에서 만나요 (③과 한 화면) === */
.mt{padding:clamp(12px,2.2vh,24px) clamp(28px,4.5vw,88px);background:linear-gradient(180deg,#0c2148,#0a1b3f)}
.mt-inner{max-width:min(1560px,94vw);width:100%;margin:0 auto}
.mt-kicker{font-size:12.5px;letter-spacing:.2em;color:#5fd0ff;font-weight:800;margin:0}
.mt-title{font-size:clamp(22px,2.4vw,30px);color:#fff;margin:6px 0 4px}
.mt-lead{font-size:14px;color:#c5d4ef;margin:0 0 14px}
.mt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:760px){.mt-grid{grid-template-columns:1fr}}
.mt-card{position:relative;min-height:clamp(150px,22vh,200px);border-radius:16px;overflow:hidden;text-decoration:none;display:flex;align-items:flex-end;background:#13294b center/cover no-repeat;background-clip:padding-box;border:1px solid rgba(159,191,255,.16);transition:transform .25s,box-shadow .25s}
.mt-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,27,63,.05) 0%,rgba(10,27,63,.45) 45%,rgba(10,27,63,.86) 74%,#0a1b3f 100%)}
.mt-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.mt-card-in{position:relative;z-index:1;padding:18px 20px}
.mt-card-t{font-size:18px;color:#fff;margin:0 0 4px}
.mt-card-d{font-size:13px;color:#cdd9f0;margin:0 0 8px;line-height:1.5}
.mt-card-meta{display:inline-block;font-size:11px;font-weight:700;color:#bcd2ff;background:rgba(42,109,240,.2);border:1px solid rgba(42,109,240,.4);padding:3px 9px;border-radius:999px;margin-right:8px}
.mt-card-go{font-size:12px;color:#5fd0ff;font-weight:700}
@media(prefers-reduced-motion:reduce){.mt-card{transition:none}}
/* === ⑥ KENTECH 영상 (⑦과 한 화면, 3개 캐러셀) === */
.vg{padding:clamp(12px,2.2vh,24px) clamp(28px,4.5vw,88px);background:#0a1b3f}
.vg-inner{max-width:min(1560px,94vw);width:100%;margin:0 auto}
.vg-head{display:flex;justify-content:space-between;align-items:flex-end;margin:0 0 14px;gap:12px}
.vg-kicker{font-size:12.5px;letter-spacing:.2em;color:#5fd0ff;font-weight:800;margin:0}
.vg-title{font-size:clamp(22px,2.4vw,30px);color:#fff;margin:6px 0 0}
.vg-nav{display:none;gap:8px;flex-shrink:0}
.vg--paged .vg-nav{display:flex}
.vg-arrow{cursor:pointer;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:10px;color:#cfe0ff;background:rgba(19,41,75,.7);border:1px solid rgba(159,191,255,.28);transition:.18s}
.vg-arrow:hover{border-color:#5fd0ff;color:#fff}
.vg-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 44px)/3);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.vg-track::-webkit-scrollbar{display:none}
@media(max-width:760px){.vg-track{grid-auto-columns:calc((100% - 22px)/2)}}
@media(max-width:520px){.vg-track{grid-auto-columns:88%}}
.vg-card{cursor:pointer;background:none;border:none;padding:0;text-align:left;scroll-snap-align:start}
.vg-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:13px;background:#13294b center/cover no-repeat;overflow:hidden;border:1px solid rgba(159,191,255,.16)}
.vg-play{position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-40%,-50%);border-left:20px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.vg-len{position:absolute;right:8px;bottom:8px;font-size:11px;font-weight:700;color:#fff;background:rgba(4,10,26,.8);padding:2px 7px;border-radius:6px}
.vg-name{display:block;font-size:13.5px;color:#e8eefc;font-weight:600;margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vg-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(4,10,26,.85)}
.vg-frame{width:100%;max-width:880px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.vg-frame iframe{width:100%;height:100%;border:0;display:block}
.vg-close{position:absolute;top:18px;right:18px;background:none;border:none;color:#fff;cursor:pointer}
/* === ⑦ 다운로드 센터 (⑥과 한 화면) === */
/* 자료 다운로드 — #explore 상단 블록 */
.dc{padding:clamp(12px,2.2vh,24px) clamp(28px,4.5vw,88px);background:#0a1b3f}
.dc-inner{max-width:min(1560px,94vw);width:100%;margin:0 auto}
.dc-kicker{font-size:12.5px;letter-spacing:.2em;color:#5fd0ff;font-weight:800;margin:0}
.dc-title{font-size:clamp(19px,2vw,24px);color:#fff;margin:6px 0 12px}
.dc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.dc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.dc-grid{grid-template-columns:1fr}}
.dc-card{display:flex;align-items:center;gap:13px;padding:15px 16px;border-radius:13px;background:rgba(13,28,56,.7);border:1px solid rgba(159,191,255,.16);text-decoration:none;transition:border-color .2s,transform .2s}
.dc-card:hover{border-color:#5fd0ff;transform:translateY(-2px)}
.dc-ic{flex-shrink:0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:11px;color:#5fd0ff;background:rgba(95,208,255,.12);border:1px solid rgba(95,208,255,.28)}
.dc-meta{display:flex;flex-direction:column;min-width:0}
.dc-name{font-size:14.5px;color:#fff;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-type{font-size:12px;color:#9fb4d8}
@media(prefers-reduced-motion:reduce){.dc-card{transition:none}}

/* 허브 우측 퀵독 레일은 모바일에서 상단 퀵시트로 대체 → 숨김 */
@media (max-width:767px){
  .quickdock{display:none}
}

/* 모바일: 카드섹션 단위로 "한 번에 하나씩" 페이징(사용자 요청). 100dvh로 기기별 대응.
   ⛔ CSS scroll-snap(mandatory/proximity)은 이 레이아웃에서 스크롤을 섹션2에 가둔다(실기기 확인).
   → CSS 스냅을 완전히 끄고(scroll-snap-type:none) JS 페이저(main.js bootMobilePager)가
   뷰포트 높이만큼 이동을 전담한다. 스킬 kentech-mobile LAW 1 참조.
   가로 오버플로는 절대 금지(문서가 옆으로 드래그되는 버그 방지). */
@media (max-width:767px){
  html{scroll-snap-type:none;scroll-padding-top:calc(46px + var(--chrome-h,48px))}
  /* overflow-x:clip은 hidden과 달리 스크롤 컨테이너를 만들지 않음 →
     body가 스크롤러가 되어 html의 스냅을 삼키던 버그 해소(가로 오버플로는 계속 차단) */
  html,body{overflow-x:clip;max-width:100%}
  /* 페이저 단위 = 한 화면(사용자 절대 유지 요청 2026-07-03): 히어로 · #types(.m-adm-section) · #explore · #media.
     세로가 한 화면을 넘으면 사용자가 직접 콘텐츠를 덜어내 편집점을 잡음 → 스크롤 방식(스냅)은 변경 금지. */
  .hero,.at,.combo,.m-adm-section{
    min-height:calc(100dvh - 46px - var(--chrome-h,48px));
    scroll-snap-align:none}
  .at{height:auto;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;
    padding:24px 20px 24px 44px}
  .at-inner{flex:1 1 auto;width:100%;display:flex;flex-direction:column;
    justify-content:flex-start;gap:0}
  /* 콤보(#explore·#media): 두 하위 블록을 세로로 통합, 한 화면 안에서 상단정렬 */
  .combo{height:auto;display:flex;flex-direction:column;justify-content:flex-start;
    gap:clamp(16px,3vh,26px);overflow:visible;scroll-snap-align:none;
    padding:22px 20px 24px}
  .combo > section{padding:0;min-height:0;height:auto;overflow:visible;display:block;background:transparent}
  .combo .dc-inner,.combo .ql-inner,.combo .mt-inner,.combo .vg-inner{
    width:100%;max-width:none;display:block}
  .ms,.mx{min-height:auto}
  /* 전형 타임라인이 넓어도 문서를 밀지 않도록 자체 가로 스크롤 */
  .at-timeline{overflow-x:auto;scrollbar-width:none;margin-top:18px}
  .at-timeline::-webkit-scrollbar{display:none}
}

/* 모바일 종합 개선(mobile-responsiveness 스킬 적용): 한글 단어 중간 줄바꿈 방지 + 유동 타이포 */
@media (max-width:767px){
  /* 한글 문장이 "모집합니/다"처럼 어절 중간에서 끊기지 않도록 */
  .at-title,.at-kicker,.at-zero-h,.at-zero-s,.at-pick,.hero__title,.hero h1{word-break:keep-all;overflow-wrap:break-word}
  /* 제목: 각 문구 1줄 (제목 / 서브타이틀) */
  .at-title{font-size:clamp(23px,6.6vw,32px);line-height:1.15;margin:6px 0 4px;white-space:nowrap}
  /* 서브타이틀(110명 · 전원 전액장학) = 칩(pill) 형태 (사용자 요청) */
  .at-title2{display:inline-flex;align-items:center;align-self:flex-start;
    font-size:13.5px;font-weight:800;padding:8px 14px;border-radius:999px;
    white-space:nowrap;margin:2px 0 0;color:#dbe8ff;
    background:color-mix(in srgb,var(--ac) 15%,transparent);
    border:1px solid color-mix(in srgb,var(--ac) 40%,transparent)}
  .at-title2 .at-em{color:var(--ac);font-weight:900;margin-right:1px}
  .at-zero{gap:12px;padding:15px 16px}
  .at-zero-h{font-size:16px}
  .at-zero-s{font-size:13px}
  /* 성향 칩: 짧은 라벨 3개 한 줄에 (넘치면 가로 스크롤) */
  .at-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:8px;-webkit-overflow-scrolling:touch}
  .at-chips::-webkit-scrollbar{display:none}
  .at-chip{flex:0 0 auto;font-size:13px;padding:10px 13px;gap:6px}
  .at-chip .at-ic{width:15px;height:15px}
  /* CTA 버튼 풀폭 2개 나란히 */
  .at-pickrow{gap:14px;margin-bottom:14px}
  .at-ctas{width:100%}
  .at-btn{flex:1 1 0;justify-content:center;text-align:center;font-size:14px;padding:14px 12px;white-space:nowrap}
  /* 한 화면에 담기 위해 '수능최저학력기준 없음' 배너 카드는 모바일에서 숨김 */
  .at-zero{display:none}
  /* 사용자 시안(2026-07-03): 110명 칩 삭제 · '내 성향을 골라보세요' 성향선택 기능 삭제 ·
     진단하기 삭제(모집요강만) · 얇은 타임라인 → 전형 일정 캘린더로 교체 */
  .at-title2{display:none}
  .at-pickwrap{display:none}
  #at-diagnose{display:none}
  .at-timeline{display:none}
  /* 상단 그룹(키커·제목·모집요강) 서로 붙이기 */
  .at-kicker{margin:0}
  .at-title{margin:4px 0 0}
  .at-pickrow{margin:11px 0 0}
  .at-ctas{width:100%}
  .at-cards{margin-top:16px}
  .at-cal{margin-top:16px}
  /* 전형 카드 = 가로 스와이프 캐러셀(한 화면에 담되 카드 높이는 크게).
     한 장 + 다음 장 살짝 보이도록 flex-basis 84% */
  .at-cards{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-left:44px;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin-right:-20px;padding-right:20px;touch-action:pan-x}
  /* 가로 스크롤 컨테이너 위에서 세로로 밀면 페이지(세로 스냅)로 제스처가 넘어가도록.
     pan-x 없으면 가로 스크롤러가 세로 터치를 삼켜 "아래로 안 내려가는" 버그 발생 */
  .at-chips,.at-timeline{touch-action:pan-x}
  .at-cards::-webkit-scrollbar{display:none}
  /* 카드 면: 헤더(배지+이름+정원+구분칩) + 태그 + 선발방식(steps) + 하단 통계로 꽉 채움(사용자 피드백) */
  .at-card{flex:0 0 84%;min-height:222px;padding:20px 18px;scroll-snap-align:start;scroll-snap-stop:always}
  .at-nm{font-size:16px;flex:1 1 auto;min-width:0}
  .at-quota,.at-mtd{display:none}
  /* 선발 방식(steps): 모바일에선 항상 펼쳐 카드 본문을 채움. 앞 2개만·1줄(말줄임)로 압축 */
  .at-more{display:flex;max-height:none;overflow:visible;flex-direction:column;gap:6px;
    margin-top:12px;padding-top:11px;border-top:1px dashed rgba(159,191,255,.2)}
  .at-step{font-size:11.5px;line-height:1.3;padding:6px 10px;width:100%;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .at-step:nth-child(n+3){display:none}
  /* 하단 통계 푸터 살리기(내신·경쟁률) — 카드 하단 채움 */
  .at-foot{display:block;margin-top:auto;padding-top:0}
  .at-exp{display:none}
  .at-stat{font-size:12.5px;padding-top:11px;border-top:1px solid rgba(159,191,255,.16)}
  .at-stat b{color:var(--ac)}
  /* 이름 우측: 모집인원 숫자 + 정원 내/외·군외 칩 */
  .at-nmrow{gap:8px}
  .at-qty{display:inline-flex;align-items:baseline;flex:0 0 auto;margin-left:auto;font-size:14px;color:#cfe0ff;white-space:nowrap}
  .at-qty b{font-size:22px;font-weight:900;color:var(--ac);margin-right:2px}
  .at-note-chip{display:inline-flex;align-items:center;flex:0 0 auto;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;color:#e4eeff;background:color-mix(in srgb,var(--ac) 16%,transparent);border:1px solid color-mix(in srgb,var(--ac) 38%,transparent)}
  .at-tags{margin:12px 0 0}
  .at-tag{font-size:12px;padding:6px 11px}
}

/* 전형 일정 캘린더: 데스크톱은 얇은 타임라인 유지 → 캘린더는 모바일 전용 */
.at-cal{display:none}
@media (max-width:767px){
  .at-cal{display:flex;flex-direction:column;gap:11px;margin-top:2px;
    background:linear-gradient(180deg,rgba(14,32,64,.92),rgba(9,22,46,.92));
    border:1px solid rgba(120,170,255,.3);border-radius:18px;padding:15px 16px 14px}
  .at-cal-head{display:flex;align-items:center;gap:8px}
  .at-cal-head h3{font-size:16px;color:#fff;margin:0;font-weight:800;letter-spacing:-.01em}
  .at-cal-ic{display:inline-flex;color:#5fd0ff}
  .at-cal-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
  .at-cal-row{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:11px}
  .at-cal-dot{width:9px;height:9px;border-radius:50%;background:rgba(159,191,255,.42)}
  .at-cal-row.is-done .at-cal-dot{background:#4ea3ff}
  .at-cal-row.is-now .at-cal-dot{background:#2ccfff;box-shadow:0 0 0 4px rgba(44,207,255,.2)}
  .at-cal-lb{font-size:14px;color:#dbe8ff;font-weight:600}
  .at-cal-row.is-now .at-cal-lb{color:#fff;font-weight:800}
  .at-cal-dt{font-size:13px;color:#9fb4d8;font-weight:600;white-space:nowrap}
  .at-cal-row.is-now .at-cal-dt{color:#bfe6ff}
  .at-cal-cta{display:flex;flex-direction:column;gap:9px;margin-top:5px}
  .at-cal-apply{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:13px;
    font-size:15px;font-weight:800;color:#fff;text-decoration:none;
    background:linear-gradient(135deg,#2b83ff,#1348a6);border:1px solid rgba(120,190,255,.42);
    box-shadow:0 10px 26px rgba(36,107,255,.32)}
  .at-cal-apply span{font-size:17px}
  .at-cal-all{text-align:center;font-size:13px;color:#9fc2ff;text-decoration:none;font-weight:700}
}

/* NOTICE 배너: 모바일에서 길면 …로 1줄 처리 */
@media (max-width:767px){
  .topbanner{display:flex;align-items:center;gap:8px}
  .topbanner-tag,.topbanner-go{flex:0 0 auto}
  .topbanner-text{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* 모바일: 히어로 영상 재생/정지 버튼 숨김(사용자 요청 — 첫 화면 밖에선 영상 무의미).
   영상은 heroVideo.js의 IntersectionObserver가 히어로 이탈 시 자동 정지. */
@media (max-width:767px){
  .hero__toggle{display:none !important}
  /* 배경 영상(YouTube iframe/video)은 터치를 삼켜 섹션 페이저가 세로 드래그를 못 잡음
     → pointer-events 해제로 제스처가 섹션으로 통과되게 함(영상은 배경 장식일 뿐). */
  .hero__yt,.hero__video{pointer-events:none}
}

/* === 3번째 카드섹션(#explore) 모바일: 다운로드 리스트 + 정보 CTA 카드 (가이드라인 반영) === */
/* 섹션 타이틀 아이콘 (데스크톱·모바일 공통) */
.dc-title-ic,.ql-title-ic{display:inline-flex;vertical-align:-3px;margin-right:9px;color:#5fd0ff}
.dc-title-ic svg,.ql-title-ic svg{width:1em;height:1em;display:block}
.ql-title-ic{color:#3b82f6}
/* 데스크톱: 카드 아이콘/화살표·다운로드 화살표 숨김('자세히 →' 유지) */
.dc-go,.ql-card-ic,.ql-card-arrow{display:none}
/* 만남/영상 섹션: 아이콘·액션랩·영상 설명·도트는 모바일 전용 */
.mt-card-ic,.vg-desc,.vg-dots{display:none}
.mt-card-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

@media (max-width:767px){
  /* #explore 콤보 배경(자료+퀵 통합 한 화면) */
  #explore.combo{background:linear-gradient(180deg,rgba(9,22,52,.5),rgba(8,20,45,.72)),url('../img/bg/sec-explore-mob.webp') center/cover no-repeat,linear-gradient(180deg,#0a1c40,#081633)}
  /* --- 자료 다운로드: 카드 3개를 한 줄에(3-up) 압축 --- */
  .dc-kicker{display:none}
  .dc-title{font-size:19px;margin:0 0 11px}
  .dc-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .dc-card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:9px;min-height:0;padding:13px 11px;border-radius:14px;background:rgba(13,28,56,.72)}
  /* 자료다운로드 전용 배경(학부=캠퍼스+책 / 대학원=연구실 / 브로슈어=캠퍼스 야경) — 좌측 어둡게 오버레이로 텍스트 가독성 유지 */
  .dc-card::before{content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;
    background:linear-gradient(110deg,rgba(9,20,42,.86) 0%,rgba(9,20,42,.6) 52%,rgba(9,20,42,.42) 100%),var(--dc-bg,none) center/cover no-repeat}
  .dc-card>*{position:relative;z-index:1}
  .dc-card:nth-child(1){--dc-bg:url('../img/bg/dc-undergrad.webp')}
  .dc-card:nth-child(2){--dc-bg:url('../img/bg/dc-grad.webp')}
  .dc-card:nth-child(3){--dc-bg:url('../img/bg/dc-brochure.webp')}
  .dc-ic{width:34px;height:34px;border-radius:9px}
  .dc-ic svg{width:18px;height:18px}
  .dc-meta{flex-direction:column;align-items:flex-start;gap:3px;width:100%}
  .dc-name{font-size:12.5px;line-height:1.24;white-space:normal;word-break:keep-all;font-weight:700}
  .dc-type{font-size:10.5px;color:#9fb4d8}
  .dc-go{display:none}
  /* --- 어떤 정보가 필요하세요?: 세로 압축 3줄(가로형 카드) · 아이콘 제거로 공간 확보 --- */
  .ql-title{font-size:19px;margin:0 0 11px}
  .ql-grid{grid-template-columns:1fr;gap:7px}
  .ql-card{min-height:62px;align-items:center;border-radius:14px}
  .ql-card-bg{background-position:right center}
  .ql-card::after{background:linear-gradient(90deg,rgba(4,14,34,.95) 0%,rgba(4,14,34,.6) 58%,rgba(4,14,34,.12) 100%)}
  .ql-card-body{align-self:center;padding:11px 56px 11px 16px;display:flex;flex-direction:column;gap:2px}
  .ql-card-ic{display:none}
  .ql-card-t{font-size:16px;margin:0}
  .ql-card-l{font-size:12px;-webkit-line-clamp:1;min-height:auto;color:rgba(255,255,255,.72);margin:0}
  .ql-card-go{display:none}
  /* 화살표: 우측 중앙 원형(작게) */
  .ql-card-arrow{display:grid;place-items:center;position:absolute;z-index:3;right:12px;bottom:auto;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;font-size:20px;line-height:1;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(120,190,255,.4)}
}

/* === 4번째 카드섹션(#media): 캠퍼스에서 만나요 + 영상으로 보는 KENTECH — 한 화면 통합(모바일 시안) === */
@media (max-width:767px){
  /* #media 콤보 배경(캠퍼스+영상 통합 한 화면) */
  #media.combo{background:linear-gradient(180deg,rgba(8,17,40,.5),rgba(4,12,26,.72)),url('../img/bg/sec-media-mob.webp') center/cover no-repeat,linear-gradient(180deg,#061735,#020c1e)}
  /* --- MEET: 아이콘 제거 · 리드 삭제 · 카드 2개 나란히 압축 --- */
  .mt-kicker{font-size:12px;letter-spacing:.26em;color:#39d9ff;margin:0}
  .mt-title{font-size:clamp(21px,5.8vw,26px);letter-spacing:-.02em;margin:4px 0 11px}
  .mt-lead{display:none}                         /* "KENTECH를 직접 경험하는 두 가지 방법" 삭제 */
  .mt-grid{grid-template-columns:1fr 1fr;gap:10px}
  /* 모바일 재구성(내용 패리티·대칭): 제목 2줄 예약 → 두 카드의 칩·버튼 위치/크기 완전 통일 */
  .mt-card{min-height:138px;border-radius:16px;align-items:stretch;
    border:1px solid rgba(120,190,255,.26);background-position:center}
  .mt-card::after{background:linear-gradient(180deg,rgba(3,14,34,.30) 0%,rgba(3,14,34,.66) 52%,rgba(3,14,34,.93) 100%)}
  .mt-card-in{flex:1 1 auto;width:100%;padding:13px 11px 12px;display:flex;flex-direction:column;align-items:flex-start;
    text-align:left;height:100%;gap:9px}
  .mt-card-ic{display:none}                       /* 아이콘 제거 */
  /* 제목 항상 2줄 높이 확보(1줄이어도 동일) → 아래 칩/버튼이 두 카드에서 같은 위치에 정렬 */
  .mt-card-t{width:100%;min-height:2.6em;font-size:15px;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.3;color:#fff;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mt-card-d{display:none}                         /* 압축: 상세 설명은 상세페이지에서 */
  .mt-card-meta{align-self:flex-start;font-size:11.5px;font-weight:800;padding:5px 12px;margin:0;border-radius:999px;color:#fff;
    background:linear-gradient(135deg,#247bff,#1447a8);border:1px solid rgba(120,190,255,.30);white-space:nowrap}
  /* align-self:stretch → 두 카드 버튼 너비를 카드 내부 폭으로 동일하게 강제(≈140px) */
  .mt-card-go{margin-top:auto;align-self:stretch;width:auto;display:flex;align-items:center;
    justify-content:center;gap:5px;min-height:28px;font-size:12.5px;font-weight:800;color:#fff;padding:0 12px;
    border-radius:9px;border:0;background:linear-gradient(135deg,#2f8bff,#1a5fd0);box-shadow:0 5px 13px rgba(31,110,255,.26)}
  .mt-card-go>span{font-size:13px;line-height:1}

  /* --- WATCH: 키커(WATCH) 삭제 · 1줄 압축 썸네일 슬라이더(1장씩) --- */
  .vg-kicker{display:none}                         /* WATCH 삭제 */
  .vg-title{font-size:clamp(18px,5vw,22px);letter-spacing:-.02em;margin:0;white-space:nowrap}  /* 1줄 */
  .vg-head{margin:0 0 10px;align-items:center}
  .vg-nav{display:flex;gap:8px;flex-shrink:0}
  .vg-arrow{width:36px;height:36px;border-radius:50%;font-size:18px;background:rgba(255,255,255,.06);border:1px solid rgba(150,190,230,.26)}
  .vg-track{grid-auto-columns:100%;gap:14px;touch-action:pan-x}
  .vg-thumb{border-radius:16px;border:1px solid rgba(120,190,255,.24)}
  .vg-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.28))}
  .vg-play{width:60px;height:60px;left:50%;top:50%;transform:translate(-50%,-50%);border:0;border-radius:50%;
    background:rgba(255,255,255,.95);box-shadow:0 12px 32px rgba(0,0,0,.34);animation:vgPulse 2.4s ease-in-out infinite}
  .vg-play::before{content:"";position:absolute;left:25px;top:20px;width:0;height:0;
    border-left:16px solid #246bff;border-top:10px solid transparent;border-bottom:10px solid transparent}
  .vg-len{right:12px;bottom:12px;min-width:48px;height:27px;display:inline-flex;align-items:center;justify-content:center;
    font-size:12.5px;border-radius:7px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
  .vg-name{font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:normal;margin-top:10px;line-height:1.28;overflow:visible;
    display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical}
  .vg-desc{display:none}                            /* 압축: 설명 숨김 */
  .vg-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
  .vg-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.34)}
  .vg-dots button.is-active{width:11px;height:11px;background:#2ccfff;box-shadow:0 0 12px rgba(44,207,255,.5)}
}
@keyframes vgPulse{0%,100%{box-shadow:0 16px 42px rgba(0,0,0,.36)}50%{box-shadow:0 16px 48px rgba(36,107,255,.45)}}
@media (prefers-reduced-motion:reduce){.vg-play{animation:none}}

/* === 4번째 카드섹션 모바일 대체: 소식·미디어 통합 캐러셀(뉴스+영상+매거진, 옆으로 넘김) — 모바일 전용 === */
@media (max-width:767px){
  .mc-inner{width:100%}
  .mc-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px}
  .mc-kicker{display:none}
  .mc-title{font-size:clamp(19px,5.2vw,23px);color:#fff;margin:0;letter-spacing:-.02em}
  .mc-nav{display:flex;gap:8px;flex-shrink:0}
  .mc-arrow{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    color:#cfe0ff;background:rgba(255,255,255,.06);border:1px solid rgba(150,190,230,.26)}
  .mc-track{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-right:-20px;padding-right:20px;touch-action:pan-x}
  .mc-track::-webkit-scrollbar{display:none}
  .mc-card{scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;
    text-decoration:none;text-align:left;background:none;border:0;padding:0;cursor:pointer}
  .mc-thumb{position:relative;display:block;width:100%;aspect-ratio:16/11;border-radius:16px;overflow:hidden;
    background:#13294b center/cover no-repeat;border:1px solid rgba(120,190,255,.22)}
  .mc-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 40%,rgba(2,9,22,.62) 100%)}
  .mc-thumb--mag{display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle at 30% 25%,rgba(74,120,255,.4),rgba(21,42,90,.6)),linear-gradient(135deg,#12305f,#0a1c40)}
  .mc-magic{position:relative;z-index:1;color:#bcd7ff}
  .mc-tag{position:absolute;top:10px;left:10px;z-index:2;font-size:10.5px;font-weight:800;letter-spacing:.04em;
    color:#00152e;background:rgba(150,215,255,.94);padding:3px 9px;border-radius:20px}
  .mc-tag--hot{background:#ff7a7a;color:#2a0000}
  .mc-len{position:absolute;right:10px;bottom:10px;z-index:2;font-size:11.5px;font-weight:700;color:#fff;
    background:rgba(0,0,0,.6);padding:2px 7px;border-radius:6px;backdrop-filter:blur(4px)}
  .mc-play{position:absolute;left:50%;top:50%;z-index:2;width:52px;height:52px;transform:translate(-50%,-50%);
    border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 10px 26px rgba(0,0,0,.32)}
  .mc-play::before{content:"";position:absolute;left:21px;top:16px;width:0;height:0;
    border-left:16px solid #246bff;border-top:10px solid transparent;border-bottom:10px solid transparent}
  .mc-body{padding:11px 4px 2px;display:flex;flex-direction:column;gap:4px}
  .mc-t{font-size:15px;font-weight:700;color:#eaf3ff;line-height:1.3;letter-spacing:-.01em;
    display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mc-d{font-size:12.5px;color:rgba(207,224,255,.72);line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mc-go{font-size:12px;font-weight:800;color:#5fd0ff;margin-top:1px}
  .mc-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
  .mc-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.32)}
  .mc-dots button.is-active{width:10px;height:10px;background:#2ccfff;box-shadow:0 0 12px rgba(44,207,255,.5)}
}
