/* ============================================================================
   AJOU MBA — 퍼블 style.css 보정/추가 규칙
   ---------------------------------------------------------------------------
   퍼블 납품본(style.css)은 원본 그대로 유지하고,
   CI 연동 과정에서 필요한 규칙만 이 파일에 모은다.
============================================================================ */

/* ---------- 전공 칩을 링크(<a>)로 쓸 때 ---------- */
/* .major 는 원래 <span> 기준이라 링크 기본 스타일(밑줄)을 제거해야 한다.
   색상은 .major--blue 등 변형 클래스가 지정하므로 inherit 하지 않는다. */
a.major{
  text-decoration:none;
  cursor:pointer;
}
a.major:hover,
a.major:focus-visible{
  text-decoration:none;
}
/* 키보드 포커스 표시 — 마우스 hover 와 동일한 들어올림 + 링 */
a.major:focus-visible{
  outline:3px solid var(--gold-400);
  outline-offset:3px;
  transform:translateY(-4px);
}

/* ---------- 스크린리더 전용 텍스트 ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- GNB 우측 버튼 묶음 (브로슈어 다운로드 + 상담 신청) ---------- */
/* .btn--sm 이 .btn--ghost 보다 뒤에 선언돼 있어 padding·font-size 는 sm 기준으로 맞춰진다. */
.gnb__actions{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}
@media (max-width:1024px){
  .gnb__actions{display:none}
  /* 드로어 안에서는 두 버튼을 세로로 쌓는다 */
  .gnb__nav .gnb__cta-mobile + .gnb__cta-mobile{margin-top:4px}
}

/* ---------- 히어로 좌우 비중 조정 ---------- */
/* 왼쪽 "Your NEXT" 가 너무 커서 시선이 쏠린다 → 슬로건을 한 단계 줄이고,
   오른쪽 N 마크(KV)는 오른쪽 여백을 넓혀 화면 가운데 쪽으로 당긴다. */
@media (min-width:1501px){
  .hero__inner{padding-right:clamp(20px,11vw,220px)}
  .hero__slogan{font-size:clamp(76px,7.8vw,150px);gap:38px}
}
/* 노트북 구간도 같은 비율로 슬로건만 살짝 줄인다 (KV 위치는 기존 보정 유지) */
@media (min-width:1241px) and (max-width:1500px){
  .hero__slogan{font-size:clamp(62px,7vw,130px)}
}

/* ---------- 히어로 카피 — 리드 강조 + 모집 일정 카드 ---------- */
.hero__lead strong{font-weight:700;color:var(--ink)}

.hero__recruit{
  display:inline-block;max-width:100%;margin-top:28px;
  padding:22px 28px 26px;
  background:#fff;border:1px solid #E7DFCE;border-radius:20px;
  box-shadow:0 12px 28px rgba(42,31,7,.07);
}
.hero__recruit-badge{
  display:inline-block;padding:8px 18px;border-radius:40px;
  background:var(--blue-600);color:#fff;
  font-size:15px;font-weight:700;line-height:1.4;
}
.hero__recruit-list{display:flex;flex-wrap:wrap;align-items:center;margin-top:18px}
.hero__recruit-item{display:flex;align-items:baseline;gap:14px}
.hero__recruit-item + .hero__recruit-item{
  margin-left:28px;padding-left:28px;border-left:1px solid var(--line-cream);
}
.hero__recruit-item dt{font-size:15px;font-weight:700;color:var(--blue-600);white-space:nowrap}
.hero__recruit-item dd{margin:0;font-size:19px;font-weight:700;color:var(--ink);white-space:nowrap;letter-spacing:-.01em}

.hero__recruit + .hero__cta{margin-top:24px}
.hero__cta + .hero__chips{margin-top:32px}

/* 좁은 화면 — 두 일정을 세로로 쌓는다 */
@media (max-width:768px){
  .hero__recruit{display:block;padding:18px 20px 20px}
  .hero__recruit-badge{font-size:13px;padding:7px 14px}
  .hero__recruit-list{flex-direction:column;align-items:flex-start;gap:10px;margin-top:14px}
  .hero__recruit-item + .hero__recruit-item{margin-left:0;padding-left:0;border-left:0}
  .hero__recruit-item dt{font-size:14px}
  .hero__recruit-item dd{font-size:16px}
  .hero__recruit + .hero__cta{margin-top:20px}
  .hero__cta + .hero__chips{margin-top:24px}
}

/* ---------- 원우 인터뷰 — 사진 없는 카드 / 6개 이하 그리드 / 7개 이상 슬라이드 ---------- */
/* 사진이 없어도 썸네일 영역은 같은 높이로 잡아 둔다.
   한 행에 사진 있는 카드와 없는 카드가 섞여도 카드 구조가 어긋나지 않고,
   본문과 이름 사이에 큰 빈 공간이 생기는 것을 막는다.
   → 카드 색에 맞춘 그라데이션 배경 + 가운데 학교 로고 */
.itv__photo--empty{
  display:flex;align-items:center;justify-content:center;padding:0 20px;
}
.itv__logo{display:inline-flex;align-items:center;gap:12px;max-width:100%;opacity:.85}
/* .itv__photo img(사진용 100% 채움·hover 확대) 규칙보다 우선하도록 선택자를 한 단계 구체화 */
.itv__photo .itv__logo-mark{width:150px;height:34px;object-fit:contain;object-position:left center;flex:none;transform:none}
.itv__logo-bar{width:1px;height:18px;background:rgba(51,51,51,.3);flex:none}
.itv__logo-name{font-size:17px;font-weight:500;letter-spacing:-.4px;color:var(--ink);white-space:nowrap}
@media (max-width:480px){
  .itv__logo{gap:9px}
  .itv__photo .itv__logo-mark{width:118px;height:27px}
  .itv__logo-bar{height:15px}
  .itv__logo-name{font-size:14px}
}
.itv--blue   .itv__photo--empty{background:linear-gradient(135deg,#EEF5FC 0%,#D9E7F6 100%)}
.itv--yellow .itv__photo--empty{background:linear-gradient(135deg,#FEF6EE 0%,#FADFC4 100%)}
.itv--gold   .itv__photo--empty{background:linear-gradient(135deg,#FCF6E3 0%,#F0E1B4 100%)}

/* ---------- 영상 카드 — 썸네일 없는 경우 ---------- */
/* .vid__thumb 는 높이 252px 가 고정이라 이미지가 없어도 영역은 유지된다.
   기본 크림색 대신 카드 색 그라데이션을 깔아 인터뷰 카드와 톤을 맞춘다. */
.vid--nothumb.vid--blue   .vid__thumb{background:linear-gradient(135deg,#EEF5FC 0%,#D9E7F6 100%)}
.vid--nothumb.vid--yellow .vid__thumb{background:linear-gradient(135deg,#FEF6EE 0%,#FADFC4 100%)}
.vid--nothumb.vid--gold   .vid__thumb{background:linear-gradient(135deg,#FCF6E3 0%,#F0E1B4 100%)}
/* 영상 링크가 없는 카드 — 누를 수 있는 것처럼 보이지 않게 한다 */
.vid__thumb--nolink{cursor:default}
.vid__thumb--nolink .vid__play{opacity:.55}
.vid__thumb--nolink:hover .vid__play{transform:translate(-50%,-50%)}

/* 재생 가능한 영상 카드 — 카드 전체가 클릭 대상이다 */
.vid[data-modal-video]{cursor:pointer; -webkit-tap-highlight-color:transparent}
.vid[data-modal-video]:hover .vid__play{transform:translate(-50%,-50%) scale(1.1)}
.vid[data-modal-video]:focus-visible{outline:3px solid var(--blue-600); outline-offset:3px}

/* style.css 의 태블릿 규칙(.itv:last-child / .vid:last-child 전폭·가로형)은
   홀수 개(3개)일 때만 필요하다. 짝수 개(6개) 그리드와 슬라이드에서는 원래 세로 카드로 되돌린다. */
@media (max-width:1240px){
  .itv-grid .itv:last-child:nth-child(even),
  .vid-grid .vid:last-child:nth-child(even),
  .cards-slider .itv:last-child,
  .cards-slider .vid:last-child{grid-column:auto}
}
@media (min-width:769px) and (max-width:1024px){
  .itv-grid .itv:last-child:nth-child(even),
  .itv-slider .itv:last-child{flex-direction:column;gap:0}
  .itv-grid .itv:last-child:nth-child(even) .itv__photo,
  .itv-slider .itv:last-child .itv__photo{flex:none;height:250px;min-height:0}
  .itv-grid .itv:last-child:nth-child(even) .itv__body,
  .itv-slider .itv:last-child .itv__body{padding:28px 18px 20px}
}

/* 슬라이드 — 가로 스크롤 + 스냅.
   한 페이지 = 3열 × 2행 = 6장(데스크톱) / 2열(태블릿) / 카드 1장씩(모바일).
   페이지 래퍼(.cards-slider__page)로 감싸 01 02 03 / 04 05 06 읽기 순서를 유지한다. */
.cards-slider{--cards-gap:24px;--cards-cols:3;margin-top:60px}
.cards-slider__viewport{margin:-14px -14px 0;overflow:hidden}
.cards-slider__track{
  display:flex;gap:var(--cards-gap);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* 카드 hover 들림·그림자가 잘리지 않도록 여백을 두고 바깥 음수 마진으로 상쇄 */
  padding:14px 14px 36px;scroll-padding-inline:14px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.cards-slider__track::-webkit-scrollbar{display:none}
/* 페이지 한 장이 보이는 영역을 꽉 채운다.
   align-content:start 가 핵심 — 이게 없으면 카드가 덜 찬 페이지(예: 7장 중 마지막 1장)에서
   행이 페이지 높이만큼 늘어나 카드 한 장이 세로로 길쭉해진다.
   내용 높이로 고정해 카드가 원래 크기 그대로 위에서부터 채워지게 한다. */
.cards-slider__page{
  flex:0 0 100%;
  scroll-snap-align:start;
  display:grid;
  grid-template-columns:repeat(var(--cards-cols),1fr);
  gap:var(--cards-gap);
  align-content:start;   /* 행을 늘리지 않는다 */
  align-items:stretch;   /* 같은 행 안에서는 카드 높이를 맞춘다 */
}
.cards-slider__nav{display:flex;justify-content:center;gap:12px;margin-top:6px}
.cards-slider__btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:#fff;border:1px solid #E7DFCE;color:var(--ink);cursor:pointer;
  transition:border-color .2s, color .2s, box-shadow .2s, opacity .2s;
}
.cards-slider__btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cards-slider__btn:hover:not(:disabled){border-color:var(--blue-600);color:var(--blue-600);box-shadow:0 10px 22px rgba(42,31,7,.1)}
.cards-slider__btn:focus-visible{outline:2px solid var(--blue-600);outline-offset:3px}
.cards-slider__btn:disabled{opacity:.35;cursor:default}

@media (max-width:1240px){ .cards-slider{--cards-cols:2} }
@media (max-width:768px){
  .cards-slider{--cards-gap:16px}
  /* 모바일에서 6장 한 페이지는 세로로 너무 길어진다.
     display:contents 로 페이지 묶음을 풀어 카드가 트랙의 직접 flex 아이템이 되게 하고,
     한 장씩 넘기도록 되돌린다. */
  .cards-slider__page{display:contents}
  /* 페이지 래퍼 안에 있어 자식 선택자(>)가 닿지 않으므로 하위 선택자로 지정한다 */
  .cards-slider .itv,
  .cards-slider .vid{
    flex:0 0 86%;          /* 다음 카드가 살짝 보이게 해서 넘길 수 있다는 걸 알린다 */
    scroll-snap-align:start;
  }
  .cards-slider__btn{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){ .cards-slider__track{scroll-behavior:auto} }

/* ---------- 전공 칩 위 안내 말풍선 ---------- */
/* 칩이 링크라는 걸 알려 주는 말풍선. 아래 꼬리가 칩 쪽을 가리키고, 살짝 떠 있는 모션으로 시선을 끈다. */
.majors__hint{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  margin-bottom:22px;padding:10px 26px 10px 12px;
  background:#fff;border:1px solid #D6E3F1;border-radius:40px;
  box-shadow:0 10px 26px rgba(10,92,168,.1);
  font-size:15px;line-height:1.4;color:var(--blue-600);
}
/* 꼬리 — 테두리 색 삼각형 위에 흰 삼각형을 1px 겹친다 */
.majors__hint::before,
.majors__hint::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  border:9px solid transparent;border-bottom:0;
}
.majors__hint::before{top:100%;border-top-color:#D6E3F1}
.majors__hint::after{top:calc(100% - 1px);border-top-color:#fff}
.majors__hint strong{font-weight:700}
.majors__hint-ico{
  width:18px;height:18px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.majors__hint-sub{font-size:13px;font-weight:500;color:var(--silver)}

/* 모션 (2.6초 주기):
   ① 말풍선이 통통 두 번 튀어 오르고  ② 동시에 테두리에서 파란 물결이 퍼져 나가며
   ③ 손 아이콘(파란 원 배지)이 톡톡 두 번 누른다 */
.majors__hint{animation:majorsHintBounce 2.6s cubic-bezier(.3,.7,.4,1) infinite, majorsHintRing 2.6s ease-out infinite}
@keyframes majorsHintBounce{
  0%,48%,100%{transform:translateY(0)}
  12%{transform:translateY(-12px)}
  24%{transform:translateY(0)}
  33%{transform:translateY(-5px)}
  41%{transform:translateY(0)}
}
@keyframes majorsHintRing{
  0%  {box-shadow:0 10px 26px rgba(10,92,168,.1), 0 0 0 0 rgba(10,92,168,.35)}
  45% {box-shadow:0 10px 26px rgba(10,92,168,.1), 0 0 0 14px rgba(10,92,168,0)}
  100%{box-shadow:0 10px 26px rgba(10,92,168,.1), 0 0 0 0 rgba(10,92,168,0)}
}

/* 손 아이콘 — 파란 원 배지 + 탭 모션 */
.majors__hint-ico{
  width:30px;height:30px;padding:6px;border-radius:50%;
  background:var(--blue-600);stroke:#fff;
  transform-origin:50% 80%;animation:majorsHintTap 2.6s ease-in-out infinite;
}
@keyframes majorsHintTap{
  0%,44%,100%{transform:none}
  8%{transform:translateY(3px) rotate(-18deg) scale(.86)}
  16%{transform:none}
  26%{transform:translateY(3px) rotate(-18deg) scale(.86)}
  34%{transform:none}
}
@media (prefers-reduced-motion:reduce){ .majors__hint,.majors__hint-ico{animation:none} }

@media (max-width:768px){
  .majors__hint{flex-wrap:wrap;justify-content:center;gap:4px 8px;padding:12px 20px;font-size:14px;text-align:center;margin-bottom:14px}
  .majors__hint-sub{font-size:12px}
}

/* ---------- 퀵 메뉴 — AI 컨설턴트 버튼 ---------- */
/* 상담 신청(네이비)과 구분되도록 브랜드 오렌지 계열. 흰 글자 대비를 위해 한 톤 깊게 */
.quick__btn--ai{background:linear-gradient(145deg,#F0902A 0%,#D9650F 100%)}
/* 나머지 두 버튼도 같은 방향(좌상 밝음 → 우하 깊음)의 은은한 그라데이션 */
.quick__btn--gold{background:linear-gradient(145deg,#D9AC1C 0%,#AE8200 100%)}
.quick__btn--navy{background:linear-gradient(145deg,#0C4C86 0%,#042748 100%)}

/* ---------- 히어로 — N 드로잉 후 유튜브 영상으로 전환 ---------- */
/* 순서: N 드로잉(약 1.9초) → 잠시 유지 → N 이 작아지며 사라지고 영상 카드가 떠오른다 (main.js initHeroVideo) */
.hero__kv.has-video .kv__svg,
.hero__kv.has-video .kv__pin{
  transition:opacity .6s var(--ease), transform .7s var(--ease);
}
.hero__kv.is-video .kv__svg,
.hero__kv.is-video .kv__pin{opacity:0;transform:scale(.94);pointer-events:none}

.hero__video{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(24px) scale(.97);
  transition:opacity .7s var(--ease) .25s, transform .8s var(--ease) .25s, visibility 0s linear 1s;
}
.hero__kv.is-video .hero__video{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .7s var(--ease) .25s, transform .8s var(--ease) .25s, visibility 0s;
}
.hero__video-frame{
  position:relative;width:100%;aspect-ratio:16 / 9;
  border-radius:22px;overflow:hidden;background:#111;
  box-shadow:0 26px 60px rgba(42,31,7,.22), 0 6px 16px rgba(42,31,7,.1);
}
.hero__video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media (max-width:768px){
  .hero__video-frame{border-radius:16px}
}

/* 모집 일정 — 폭이 좁아 두 일정이 줄바꿈될 때 구분선이 새 줄 앞에 남지 않게.
   모든 항목에 왼쪽 구분선을 두고, 목록을 왼쪽으로 당긴 뒤 그만큼 잘라낸다 (각 줄 첫 항목의 선이 가려짐) */
@media (min-width:769px){
  .hero__recruit-list{row-gap:10px;margin-left:-57px;clip-path:inset(0 0 0 57px)}
  .hero__recruit-item,
  .hero__recruit-item + .hero__recruit-item{margin-left:28px;padding-left:28px;border-left:1px solid var(--line-cream)}
}

/* ---------- 커리어 성장 진단 배너 — 대화 말풍선 + 안내 ---------- */
/* 좌: 말풍선 대화 / 가운데: 세로 구분선 / 우: 제목·설명·버튼 */
.banner__inner--chat{
  display:grid;grid-template-columns:minmax(0,620px) 1px minmax(0,1fr);
  align-items:center;gap:clamp(32px,4.4vw,64px);
  padding-block:clamp(64px,6vw,96px);flex-wrap:nowrap;
}
.banner__divider{align-self:stretch;margin-block:clamp(48px,5.5vw,84px);background:rgba(90,48,5,.22)}
.banner__side .banner__desc{margin-top:14px}
.banner__side .banner__btn{margin-top:36px}

.bchat{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.bchat__from{margin:0 0 2px 10px;font-size:15px;font-weight:800;color:#331A00;letter-spacing:-.2px}
.bchat__group{align-self:stretch;display:flex;flex-direction:column;align-items:flex-end;gap:10px;margin-block:10px}
.bchat__msg{
  margin:0;max-width:100%;padding:14px 22px;
  font-size:17px;font-weight:700;line-height:1.5;letter-spacing:-.3px;
  border-radius:20px;
}
/* 받는 말풍선(왼쪽) — 왼쪽 아래 모서리를 각지게 */
.bchat__msg--in{background:#fff;color:#331A00;border-bottom-left-radius:6px}
/* 보내는 말풍선(오른쪽) — 오른쪽 아래 모서리를 각지게 */
.bchat__msg--out{color:#fff;border-bottom-right-radius:6px}
.bchat__msg--blue{background:var(--blue-600)}
.bchat__msg--navy{background:var(--blue-900)}
.bchat__op{font-style:normal;margin-inline:6px;color:#F5B25F}
/* 마지막 대답 — 강조 */
.bchat__msg--answer{
  margin-top:4px;padding:18px 28px;font-size:22px;color:var(--blue-600);
  box-shadow:0 18px 36px rgba(90,48,5,.22);
}

/* 등장 — 화면에 들어오면(.is-in) 말풍선이 차례로 떠오른다 */
.bchat .bchat__from,
.bchat .bchat__msg{opacity:0;transform:translateY(14px) scale(.96)}
.bchat.is-in .bchat__from,
.bchat.is-in .bchat__msg{animation:bchatPop .5s var(--ease) forwards}
.bchat__msg--in{transform-origin:left bottom}
.bchat__msg--out{transform-origin:right bottom}
.bchat.is-in .bchat__from{animation-delay:.1s}
.bchat.is-in > .bchat__msg--in:not(.bchat__msg--answer){animation-delay:.2s}
.bchat.is-in .bchat__group .bchat__msg:nth-child(1){animation-delay:.65s}
.bchat.is-in .bchat__group .bchat__msg:nth-child(2){animation-delay:1.05s}
.bchat.is-in .bchat__group .bchat__msg:nth-child(3){animation-delay:1.45s}
.bchat.is-in .bchat__msg--answer{animation-delay:2s}
@keyframes bchatPop{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .bchat .bchat__from,.bchat .bchat__msg{opacity:1;transform:none;animation:none}
}

/* 태블릿 이하 — 말풍선 위, 안내 아래로 쌓는다 */
@media (max-width:1024px){
  .banner__inner--chat{grid-template-columns:1fr;gap:40px}
  .banner__divider{display:none}
  .bchat{max-width:620px}
}
@media (max-width:768px){
  .bchat__msg{font-size:15px;padding:12px 18px}
  .bchat__msg--answer{font-size:18px;padding:15px 22px}
  .banner__side .banner__btn{margin-top:28px}
}

/* ---------- 히어로 상단 여백 축소 ---------- */
/* 원본은 min-height:880px + 세로 가운데 정렬이라 위쪽이 많이 비었다 → 높이와 위 패딩을 줄인다 */
@media (min-width:1241px){
  /* 헤더 아래 ~ 카피 첫 줄까지 정확히 80px: 세로 가운데 정렬 대신 위쪽 정렬 */
  .hero__inner{min-height:0;align-items:flex-start;padding-top:80px;padding-bottom:80px}
}

/* ---------- 히어로 「NEXT」 글자 모션 ---------- */
/* 4초마다 한 번, 글자가 순서대로 12px 들렸다 내려오는 잔잔한 물결 (첫 물결은 로딩 1.2초 뒤) */
.hero__slogan-next > span{
  display:inline-block;
  animation:nextWave 4s ease-in-out 1.2s infinite;
}
.hero__slogan-next .c-n{animation-delay:1.2s}
.hero__slogan-next .c-e{animation-delay:1.32s}
.hero__slogan-next .c-x{animation-delay:1.44s}
.hero__slogan-next .c-t{animation-delay:1.56s}

/* 4초 중 앞 0.8초만 움직이고 나머지는 정지 */
@keyframes nextWave{
  0%,20%,100%{transform:none}
  10%{transform:translateY(-12px)}
}
@media (prefers-reduced-motion:reduce){
  .hero__slogan-next > span{animation:none}
}

/* ============================================================================
   반응형 보정 (태블릿 · 모바일)
============================================================================ */

/* 히어로 영상 — 태블릿 이하에서는 KV 박스가 N 비율(612:666)이라 영상(16:9) 위아래가 비었다.
   영상으로 전환되면 박스를 16:9 로 접어 여백을 자동으로 없앤다 */
@media (max-width:1024px){
  .hero__kv.has-video.is-video{aspect-ratio:16 / 9;width:min(720px,100%)}
  .hero__kv.is-video .kv__svg,
  .hero__kv.is-video .kv__pin{visibility:hidden}
  /* 숨긴 N 그림이 원래 높이를 차지하지 않도록 흐름에서 뺀다 */
  .hero__kv.is-video .kv__svg{position:absolute;inset:0}
}

/* 카드류 — 태블릿에서 한 줄 1개로 길게 늘어지던 것을 2개씩 */
@media (min-width:601px) and (max-width:1024px){
  .theme-grid{grid-template-columns:repeat(2,1fr)}
  .theme{flex-direction:column;gap:18px;padding:28px}
}
@media (min-width:601px) and (max-width:768px){
  .itv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .itv__photo{height:200px}
  /* 카드가 좁아 로고가 넘치지 않게 축소 */
  .itv__photo .itv__logo-mark{width:112px;height:26px}
  .itv__logo{gap:8px}
  .itv__logo-bar{height:14px}
  .itv__logo-name{font-size:13px}
  .itv__quote-text{font-size:18px}
  .schol-grid{grid-template-columns:repeat(2,1fr)}
}

/* 커리어 진단 배너 — 태블릿·모바일에서 말풍선이 절반 폭에 멈추지 않고 전체 폭 사용 */
@media (max-width:1024px){
  .bchat{max-width:none}
}

/* 입학 절차 1~4 카드 — 태블릿·모바일(≤768) 모두 한 줄에 2개, 폰에서는 카드를 작게 */
@media (max-width:768px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (max-width:600px){
  .steps{gap:10px}
  .step{padding:22px 12px;border-radius:20px}
  .step__num{width:52px;height:52px;font-size:22px}
  .step__title{margin-top:14px;font-size:17px}
  .step__date{margin-top:6px;font-size:13px;letter-spacing:-.3px}
}
@media (max-width:374px){
  .step{padding:18px 8px}
  .step__num{width:46px;height:46px;font-size:19px}
  .step__title{font-size:16px}
  .step__date{font-size:12px}
}

/* 「Your NEXT」 — 768 이하에서 두 줄로 쌓이던 것을 한 줄로. 화면 폭에 비례해 글자 크기 조정 */
@media (max-width:768px){
  .hero__slogan{flex-direction:row;align-items:baseline;flex-wrap:nowrap;gap:.24em;font-size:clamp(44px,16.5vw,112px)}
}

/* 전공 태그 — 768 이하에서 줄이 넘칠 때 한 개만 덩그러니 남지 않도록
   각 줄(5·5·4 / NEW 3)을 인라인 흐름으로 바꾸고 text-wrap:balance 로 줄마다 개수를 고르게 나눈다
   (예: 5개가 4+1 이 아니라 3+2 로) */
@media (max-width:768px){
  .majors{gap:0}
  .majors__row{display:block;text-align:center;text-wrap:balance;margin:0 -4px}
  .majors__row .major{margin:4px}
  .majors__row:last-child{margin-top:6px}
  .major{padding:11px 15px;font-size:15px;border-radius:12px;vertical-align:middle}
  .major .badge{font-size:10px;padding:3px 7px}
}
@media (max-width:374px){
  .majors__row .major{margin:3px}
  .major{padding:10px 12px;font-size:14px}
}

/* 인터뷰 카드 — 작은 화면(≤600)에서는 본문을 숨겨 카드 길이를 줄인다 (인용 문구 · 이름만 노출) */
@media (max-width:600px){
  .itv__text{display:none}
  .itv__quote-text{margin-bottom:18px}
}

/* 푸터 — 작은 화면(≤600)에서 세로 여백이 과해 길게 늘어지던 것을 촘촘하게 정리 */
@media (max-width:600px){
  .footer{padding:40px 0 28px}
  .footer__top{gap:28px}
  .footer .logo-sig__mark{width:128px;height:28px}
  .footer .logo-sig__name{font-size:15px}
  .footer .logo-sig{gap:10px}
  .footer .logo-sig__bar{height:16px}
  .footer__addr{margin-top:14px;font-size:14px;line-height:1.6}
  .footer__h{font-size:14px}

  /* 연락처: 2열 유지 + 항목 간격 축소 */
  .tel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;margin-top:8px}
  .tel{padding-block:7px;gap:2px}
  .tel dt{font-size:12px}
  .tel dd{font-size:15px}

  /* SNS: 한 줄 1개 → 2열 */
  .sns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;margin-top:8px}
  .sns a{padding-block:7px;font-size:14px;gap:8px}
  .sns svg{width:16px;height:16px}

  .footer__bottom{margin-top:28px;padding-top:20px;gap:8px}
  .footer__copy,.footer__links a{font-size:12px}
}
@media (max-width:359px){
  .sns{gap:0 8px}
  .sns a{font-size:12px;gap:6px;white-space:nowrap}
  .sns svg{width:14px;height:14px}
  .tel dd{font-size:14px}
}

/* ==========================================================================
   공통 팝업(모달) — 원우 인터뷰 상세 / 영상 재생
   기존 ghcareer.co.kr 과 같은 동작: 배경 딤 + 중앙 패널, ESC·배경 클릭으로 닫기
   ========================================================================== */
.modal{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,48px);
}
.modal.is-open{display:flex}
.modal__dim{
  position:absolute; inset:0;
  background:rgba(23,18,8,.58); backdrop-filter:blur(2px);
  animation:modalDim .2s ease both;
}
.modal__panel{
  position:relative; z-index:1;
  width:min(760px,100%); max-height:calc(100vh - clamp(32px,8vw,96px));
  display:flex; flex-direction:column;
  background:#fff; border-radius:24px; overflow:hidden;
  box-shadow:0 30px 80px rgba(23,18,8,.32);
  animation:modalPop .26s cubic-bezier(.16,1,.3,1) both;
}
.modal__close{
  position:absolute; right:14px; top:14px; z-index:2;
  width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--ink);
  display:grid; place-items:center;
  box-shadow:0 4px 14px rgba(23,18,8,.16);
  transition:background .2s, transform .2s;
}
.modal__close svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.modal__close:hover{background:#fff; transform:rotate(90deg)}
.modal__close:focus-visible{outline:2px solid var(--blue-600); outline-offset:2px}

/* 상단 미디어 — 영상 iframe 또는 인터뷰 사진 */
.modal__media{flex:none; background:#0d1b2a; line-height:0}
.modal__media iframe{display:block; width:100%; aspect-ratio:16/9; border:0}
.modal__media img{display:block; width:100%; max-height:340px; object-fit:cover}

.modal__head{padding:clamp(22px,3vw,30px) clamp(22px,3.4vw,36px) 0}
.modal__eyebrow{
  margin:0 0 8px; font-size:12.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blue-600);
}
.modal__eyebrow:empty{display:none}
.modal__title{
  margin:0; font-size:clamp(20px,2.2vw,26px); line-height:1.4;
  letter-spacing:-.04em; color:var(--ink); font-weight:700;
}
.modal__sub{margin:8px 0 0; font-size:14px; color:var(--silver)}

.modal__body{
  padding:clamp(16px,2.2vw,22px) clamp(22px,3.4vw,36px) clamp(24px,3.4vw,36px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  font-size:15.5px; line-height:1.8; color:var(--gray-600);
}
.modal__body:empty{display:none}
/* 에디터로 작성한 본문 — 태그별 기본 리듬 */
.modal__body > :first-child{margin-top:0}
.modal__body p{margin:0 0 14px}
.modal__body h2,.modal__body h3{
  margin:24px 0 10px; color:var(--ink); letter-spacing:-.03em; line-height:1.45;
}
.modal__body h2{font-size:19px}
.modal__body h3{font-size:17px}
.modal__body strong,.modal__body b{color:var(--ink); font-weight:700}
.modal__body ul,.modal__body ol{margin:0 0 14px; padding-left:20px}
.modal__body ul{list-style:disc}
.modal__body ol{list-style:decimal}
.modal__body li{margin-bottom:6px}
.modal__body a{color:var(--blue-600); text-decoration:underline}
.modal__body blockquote{
  margin:16px 0; padding:14px 18px;
  background:var(--cream-3); border-radius:12px; color:var(--ink);
}
.modal__body img{max-width:100%; height:auto; border-radius:12px}

/* 영상 재생 — 플레이어만 보여 준다.
   제목·부제·본문 영역을 감추고 패널을 16:9 에 맞춰 넓게 쓴다. */
.modal--media-only .modal__panel{
  width:min(1000px,100%); background:transparent; box-shadow:none; border-radius:16px;
  /* 기본 패널의 overflow:hidden 이 패널 밖에 둔 닫기 버튼을 잘라내므로 해제한다 */
  overflow:visible;
}
.modal--media-only .modal__head,
.modal--media-only .modal__body{display:none}
.modal--media-only .modal__media{
  background:#000; border-radius:16px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
/* 영상 위로 겹치지 않도록 닫기 버튼을 패널 바깥 위쪽으로 뺀다.
   딤 배경 위에서도 확실히 보이도록 어두운 원 + 흰 아이콘으로 대비를 준다. */
.modal--media-only .modal__close{
  right:0; top:-54px;
  width:42px; height:42px;
  background:rgba(0,0,0,.55); color:#fff;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.modal--media-only .modal__close svg{stroke-width:2.2}
.modal--media-only .modal__close:hover{background:rgba(0,0,0,.8); border-color:rgba(255,255,255,.6)}
@media (max-width:640px){
  .modal--media-only .modal__panel{border-radius:0}
  .modal--media-only .modal__media{border-radius:0}
  .modal--media-only .modal__close{right:10px; top:-50px}
}

/* 배경 스크롤 잠금 */
body.is-modal{overflow:hidden}

@keyframes modalDim{from{opacity:0}to{opacity:1}}
@keyframes modalPop{from{opacity:0; transform:translateY(16px) scale(.98)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .modal__dim,.modal__panel{animation:none}
  .modal__close:hover{transform:none}
}
@media (max-width:640px){
  .modal{padding:0}
  .modal__panel{width:100%; max-height:100vh; border-radius:0}
}

/* 팝업으로 열리는 카드 — 카드 전체가 클릭 대상이다 */
.itv[data-modal-interview]{cursor:pointer}
.itv[data-modal-interview]:hover .itv__arrow{transform:translate(4px,-4px)}
.itv[data-modal-interview] .itv__arrow{opacity:1}
.itv[data-modal-interview]:focus-visible{
  outline:3px solid var(--blue-600); outline-offset:3px;
}
/* 카드 안의 텍스트가 드래그 선택되어 클릭을 방해하지 않도록 */
.itv[data-modal-interview]{-webkit-tap-highlight-color:transparent}

/* 팝업 본문 끝의 외부 링크 */
.modal__more{margin-top:20px}
.modal__more a{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 18px; border-radius:999px;
  background:var(--blue-600); color:#fff; font-weight:600; font-size:14px;
  text-decoration:none;
}
.modal__more a:hover{background:#0a4f93}

/* ---------- 푸터 SNS 아이콘 — 브랜드 색 배지 이미지 ---------- */
/* 아이콘 파일(assets/img/sns/*.svg)에 색과 원형 배경이 모두 들어 있으므로
   여기서는 크기와 hover 동작만 다룬다. style.css 의 .sns svg 규칙은 해당 없음. */
.sns__ico{
  width:26px; height:26px; flex:none;
  border-radius:50%;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.sns a:hover .sns__ico{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
@media (prefers-reduced-motion:reduce){
  .sns__ico{transition:none}
  .sns a:hover .sns__ico{transform:none}
}

/* ---------- 공식 홈페이지 방문 버튼 (GNB 우측 · 퀵 메뉴 맨 위) ---------- */
/* 퀵 메뉴: 다른 세 버튼(색 채움)과 구분되게 흰 바탕 + 네이비 글자 */
.quick__btn--home{background:#fff;color:#0A3C6E;box-shadow:0 6px 18px rgba(5,46,84,.14),inset 0 0 0 1px #DCD3C3}
.quick__btn--home:hover{filter:none;background:#F6F9FD}
@media (max-width:1679px){
  /* 하단 바: 위쪽·오른쪽 경계선으로 칸 구분 */
  .quick__btn--home{box-shadow:inset 0 1px 0 #E6DECF,inset -1px 0 0 #E6DECF}
  .quick__btn--home:hover{box-shadow:inset 0 1px 0 #E6DECF,inset -1px 0 0 #E6DECF}
}
/* GNB 폭이 부족한 구간 — 로고가 눌리거나 메뉴와 겹치지 않도록 단계적으로 줄인다 */
.logo-sig{flex-shrink:0}
.gnb__menu a{white-space:nowrap}
.gnb__actions .btn{white-space:nowrap}
@media (min-width:1025px) and (max-width:1599px){
  /* 공식 홈페이지 버튼은 지구본 아이콘만 (마우스를 올리면 안내 문구) */
  .gnb__cta--home{width:56px;height:56px;padding:0;justify-content:center}
  .gnb__cta--home .gnb__cta-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .gnb__cta--home .ico{width:20px;height:20px}
}
@media (min-width:1025px) and (max-width:1299px){
  .gnb__inner{padding-inline:28px;gap:16px}
  .gnb__menu{gap:20px}
  .gnb__menu a{font-size:15px}
  .gnb__actions{gap:8px}
  .gnb__actions .btn--sm{padding:12px 18px;font-size:15px;gap:6px}
  .gnb__actions .gnb__cta--home{width:50px;height:50px;padding:0}
}

/* ---------- 최상단 배너 (메뉴바 위) — 커리어 성장 진단 · AI 입학 컨설턴트 ---------- */
/* 높이 = 메뉴바의 2배. 본문 위에 덮이지 않고 아래로 밀어내며, 스크롤하면 위로 지나간다 */
.tb{
  position:relative;z-index:101;overflow:hidden;
  height:calc(var(--gnb-h) * 2);
  background:
    radial-gradient(420px 260px at 92% 0%, rgba(255,211,107,.2), rgba(255,211,107,0) 70%),
    radial-gradient(480px 300px at 0% 100%, rgba(229,154,28,.18), rgba(229,154,28,0) 70%),
    linear-gradient(120deg,#0C4C86 0%,#063463 55%,#042748 100%);
  color:#fff;
  transition:height .45s var(--ease,ease), opacity .3s;
}
.tb.is-closing{height:0 !important;opacity:.4}
.tb[hidden]{display:none}
.tb__in{
  max-width:1920px;height:100%;margin:0 auto;padding-inline:clamp(20px,6.25vw,120px);
  display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);
}
.tb__msg{flex:1 1 auto;min-width:0}
.tb__badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.13);font-size:11px;font-weight:800;letter-spacing:.14em;white-space:nowrap}
.tb__badge i{width:6px;height:6px;border-radius:50%;background:#FFD36B;box-shadow:0 0 0 3px rgba(255,211,107,.22)}
.tb__title{margin:6px 0 0;font-size:clamp(22px,1.9vw,32px);line-height:1.3;font-weight:800;letter-spacing:-.03em}
.tb__title em{font-style:normal;color:#FFD36B}
.tb__lead{margin:6px 0 0;font-size:15px;color:rgba(255,255,255,.78);line-height:1.5}
.tb__ctas{flex:0 0 auto;display:flex;gap:10px}
.tb__cta{
  display:flex;align-items:center;gap:12px;min-width:0;padding:16px 22px 16px 14px;border-radius:18px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);color:#fff;text-align:left;
  transition:background .2s, transform .15s;
}
.tb__cta:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}
.tb__ico{flex:none;width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.tb__ico svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tb__cta--career .tb__ico{background:linear-gradient(145deg,#D9AC1C,#AE8200)}
.tb__cta--ai .tb__ico{background:linear-gradient(145deg,#F0902A,#D9650F)}
.tb__cta b{display:flex;align-items:center;gap:5px;font-size:18px;font-weight:800;letter-spacing:-.3px;white-space:nowrap}
.tb__cta b svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.tb__cta small{display:block;margin-top:2px;font-size:13.5px;font-weight:600;white-space:nowrap}
.tb__cta--career small{color:#FFD98A}
.tb__cta--ai small{color:#FFC08C}
.tb__ctrl{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.tb__ctrl button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;color:rgba(255,255,255,.85);white-space:nowrap;transition:background .2s,color .2s}
.tb__ctrl button:hover{background:rgba(255,255,255,.12);color:#fff}
.tb__today::before{content:"";width:14px;height:14px;border-radius:4px;border:1.5px solid rgba(255,255,255,.6)}
.tb__close svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.tb :focus-visible{outline:3px solid #FFB54A;outline-offset:2px}

@media (max-width:1280px){
  .tb__title{font-size:22px}
  .tb__cta{padding:12px 18px 12px 12px}
  .tb__ico{width:44px;height:44px}
  .tb__cta b{font-size:16px}
}
@media (max-width:1100px){ .tb__lead{display:none} }

/* 태블릿·휴대폰 — 위: 제목 + 닫기 / 아래: 버튼 2개 */
@media (max-width:1024px){
  .tb__in{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:center;gap:8px 10px;padding-inline:16px}
  .tb__msg{grid-column:1;grid-row:1}
  .tb__ctas{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .tb__ctrl{grid-column:2;grid-row:1;flex-direction:row;align-items:center;gap:2px}
  .tb__ctrl button{height:28px;padding:0 8px;font-size:12px}
  .tb__badge{display:none}
  .tb__title{margin:0;font-size:15px;line-height:1.35}
  .tb__title br,.tb__title .tb__long{display:none}
  .tb__cta{padding:8px 10px 8px 8px;gap:9px;border-radius:12px}
  .tb__ico{width:34px;height:34px;border-radius:10px}
  .tb__ico svg{width:18px;height:18px}
  .tb__cta b{font-size:14px}
  .tb__cta small{font-size:11.5px}
  .tb__cta > span{min-width:0}
  .tb__cta b,.tb__cta small{overflow:hidden;text-overflow:ellipsis}
}
/* 태블릿 — 같은 2줄 구성에서 글자·버튼을 한 단계 크게 */
@media (min-width:561px) and (max-width:1024px){
  .tb__in{padding-inline:clamp(20px,4vw,40px);gap:12px 16px}
  .tb__title{font-size:19px}
  .tb__ctas{gap:12px}
  .tb__cta{padding:12px 16px 12px 12px;gap:12px}
  .tb__ico{width:42px;height:42px;border-radius:12px}
  .tb__ico svg{width:21px;height:21px}
  .tb__cta b{font-size:16px}
  .tb__cta small{font-size:12.5px}
  .tb__ctrl button{height:30px;font-size:13px;padding:0 10px}
}
@media (max-width:340px){
  .tb__ico{display:none}
  .tb__cta{padding:8px 10px}
}
@media (max-width:400px){
  .tb__ctrl .tb__today{font-size:0;gap:0;padding:0 6px}
  .tb__ctrl .tb__today::after{content:"오늘 그만";font-size:11.5px;margin-left:4px}
  .tb__cta{gap:7px}
  .tb__cta b{font-size:13px}
  .tb__cta b svg{display:none}
}
@media (prefers-reduced-motion:reduce){ .tb{transition:none} }
@media print{ .tb{display:none} }