/* ============================================================
   EqualEdu — style.css
   PC: 1400px max / 28px padding / 1344px / 3col / 30px gap
   Tablet: 1199px~768px / 27px / 2col
   Mobile: 767px~ / 16px / 1col / min 320px
============================================================ */

/* ────────────────────────────────────────
   0. CSS 변수
──────────────────────────────────────── */
:root {
  --c-primary:      #233D95;
  --c-primary-dk:   #1a2e72;
  --c-accent:       #F5BA1C;
  --c-accent-dk:    #d9a418;
  --c-text-900:     #111111;
  --c-text-600:     #333333;
  --c-text-400:     #6c6c6c;
  --c-border:       #e8e8e8;
  --c-bg:           #ffffff;
  --c-section-bg:   #f8f9fb;

  --font: 'LineSeed', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;

  /* 레이아웃 */
  --inner-max:      1400px;
  --pad-pc:         28px;
  --pad-tb:         27px;
  --pad-mo:         16px;
  --col-gap:        30px;
  --gnb-h:          100px;
  --gnb-offset: 0px;

  /* 반경 */
  --r-card:         16px;
  --r-pill:         100px;
  --r-modal:        16px;
  --r-input:        8px;

  /* 전환 */
  --ease:           0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-fast:      0.15s ease;

  /* 그림자 */
  --shadow-card:    0 2px 20px rgba(0,0,0,.07);
  --shadow-card-hv: 0 8px 32px rgba(0,0,0,.13);
  --shadow-dp:      0 16px 48px rgba(0,0,0,.11);
  --shadow-modal:   0 24px 64px rgba(0,0,0,.16);
}
/* 폰트 */
@font-face {font-family: 'LineSeed'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/LINESeedKR-Th.woff2') format('woff2'); font-weight: 100; font-display: swap;}
@font-face {font-family: 'LineSeed'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/LINESeedKR-Rg.woff2') format('woff2'); font-weight: 400; font-display: swap;}
@font-face {font-family: 'LineSeed'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/LINESeedKR-Bd.woff2') format('woff2'); font-weight: 700; font-display: swap;}

/* 서브 텍스트하단 점 */

/* ────────────────────────────────────────
   1. Reset / 기본
──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; word-break: keep-all;}

html {scroll-behavior: smooth; -webkit-text-size-adjust: 100%;}

body {font-family: var(--font); font-size: 15px; line-height: 1.65; color: var(--c-text-900); background: var(--c-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;}
body.no-scroll { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; background: none; border: none; font-family: inherit; }
address { font-style: normal; }

.reveal {opacity: 0; transform: translateY(40px); transition: all 1.5s ease;}
.reveal.is-revealed {opacity: 1; transform: translateY(0);}
.reveal:nth-child(1) { transition-delay: 0.1s; }
.reveal:nth-child(2) { transition-delay: 0.2s; }
.reveal:nth-child(3) { transition-delay: 0.3s; }
.reveal:nth-child(4) { transition-delay: 0.4s; }
.reveal:nth-child(5) { transition-delay: 0.5s; }
.reveal:nth-child(6) { transition-delay: 0.6s; }
.reveal:nth-child(7) { transition-delay: 0.7s; }
.reveal:nth-child(8) { transition-delay: 0.8s; }
.reveal:nth-child(9) { transition-delay: 0.9s; }
.reveal:nth-child(10) { transition-delay: 1.0s; }


/* ────────────────────────────────────────
   2. 컨테이너
──────────────────────────────────────── */
.inner {max-width: var(--inner-max); margin: 0 auto; padding: 0 var(--pad-pc); width: 100%;}
.inner hr {border: none; border-top: 1px solid var(--c-border); margin: 80px 0;}

/* ────────────────────────────────────────
   3. GNB
──────────────────────────────────────── */
.gnb {position: fixed; inset: 0 0 auto 0; z-index: 1000; height: var(--gnb-h); background: #fff; transform: translateY(0); transition: transform .35s cubic-bezier(.22,.61,.36,1); will-change: transform;}
.gnb.gnb--hidden {opacity: 0; visibility: hidden; pointer-events: none; transform: none;}
.sub-tabs.is-stuck {top: 0; box-shadow: 0 2px 16px rgba(0,0,0,.1);}

/* 히어로 위: 투명 */
.gnb--transparent {background: transparent;}

/* 스크롤 후: 흰 배경 */
.gnb--white {background: #fff; box-shadow: 0 1px 0 var(--c-border);}
.gnb__inner {display: flex; align-items: center; height: var(--gnb-h);}

/* ── 로고 */
.gnb__logo {display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-right: auto;}
.gnb__logo-img {width: clamp(110px, 24vw, 160px); height: auto; display: block;}
.gnb__logo-img2 {width: clamp(140px, 24vw, 200px); height: auto; display: block;}

/* ── PC 네비 */
.gnb__nav-pc {display: flex; align-items: center; margin-right: 45px;}
.gnb__products-wrap {transform: none !important; position: static; }
.gnb__products-btn {position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 8px; font-size: 18px; font-weight: 500; color: var(--c-text-900); transition: background var(--ease), color var(--ease); white-space: nowrap;}
.gnb--transparent .gnb__products-btn { color: #fff; }

/* 활성 시 노란 점 */
.gnb__products-dot {position: absolute; top: 4PX; right: 0px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); opacity: 0; transform: scale(0); transition: opacity var(--ease), transform var(--ease); flex-shrink: 0;}
.gnb__products-btn[aria-expanded="true"] .gnb__products-dot {opacity: 1; transform: scale(1);}

/* ── 드롭다운 */
.gnb__dropdown {
   position: fixed;
  top: var(--gnb-h);
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  width: min(1344px, calc(100vw - 40px));
  max-width: 100%;
  background: #fff;
  border-radius: 30px;
  padding: clamp(28px, 4vw, 50px);
  box-shadow: var(--shadow-dp);
  z-index: 1500 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ease), visibility var(--ease), transform var(--ease);
}

.gnb__dropdown.is-open {opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto;}
.gnb__dropdown-inner {display: flex; flex-direction: column; gap: 40px;}

/* 그룹 */
.gnb__dropdown-group {display: flex; gap: 5px; flex-direction: column;}

/* 카테고리 */
.gnb__dropdown-cat {min-width: 160px; font-size: 20px; font-weight: 700; color: #233D95;}

/* 4열 그리드 */
.gnb__dropdown-row {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 40px; flex: 1;}

.gnb__item {list-style: none; position: relative;}

/* 세로 구분선 */
.gnb__item:not(:last-child)::after {content: ""; position: absolute; right: -20px; top: 0; width: 1px; height: 100%; background: #eee;}
.gnb__item:nth-child(3n)::after {width: 0px; height: 0px; background: #fff;}

/* 링크 구조 */
.gnb__item a {display: flex; flex-direction: column; gap: 6px; text-decoration: none;}

/* 소제목 */
.gnb__title {font-size: 16px; font-weight: 700; color: #233D95;}
.gnb__item:hover .gnb__title {color: #4A64C8;}
.gnb__dropdown-link:hover {color: inherit;}

/* 설명 */
.gnb__desc {font-size: 13px; color: #666; line-height: 1.4;}

/* ── Join us 버튼 */
.btn-joinus {
  display: inline-flex;
  align-items: center;
  gap: 27px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font);
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid #DADADA;
  color: #333;
  position: relative;
  overflow: hidden;
  background: #fff;
  background: linear-gradient(to right, #05279B 50%, #fff 50%);
  background-size: 200% 102%;
  background-position: right;
  transition: background-position 0.4s ease, color 0.3s ease, border-color 0.3s ease;
}

/* hover */
.btn-joinus:hover {background-position: left; color: #fff; border-color: #05279B;}

.btn-joinus:hover::before {transform: translateX(0);}

/* ── 투명 GNB 위 */
.gnb--transparent .btn-joinus {border: 2px solid #fff; color: #fff; background: linear-gradient(to right, #05279B 50%, transparent 50%); background-size: 200% 102%; background-position: right;}

/* 투명 상태 hover */
.gnb--transparent .btn-joinus:hover {background-position: left; color: #fff; border-color: #05279B;}

/* 아이콘 */
.btn-joinus__icon {flex-shrink: 0;}

/* ── 모바일 컨트롤 */
.gnb__mobile-controls {display: none; align-items: center; gap: 10px;}
.gnb__joinus-mobile { padding: 8px 14px; font-size: 13px; }

/* ── 모바일 메뉴 링크 (서브페이지 대응) */
.mobile-menu__link {font-size: 16px; font-weight: 400; color: rgba(255,255,255,.75); transition: color var(--ease); text-decoration: none;}
.mobile-menu__link:hover, .mobile-menu__link--active { color: #fff; font-weight: 700; }

.gnb__hamburger {display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 7px; border-radius: 50px; transition: background var(--ease);}
.gnb__hamburger span {display: block; width: 100%; height: 2px; background: var(--c-text-600); border-radius: 2px; transition: background var(--ease);}

.gnb--transparent .gnb__hamburger span { background: #fff; }
.gnb__hamburger:hover { background: rgba(0,0,0,.06); }
.gnb--transparent .gnb__hamburger:hover { background: rgba(255,255,255,.12); }

/* ────────────────────────────────────────
   4. 모바일/태블릿 전체 메뉴 오버레이
──────────────────────────────────────── */
.mobile-menu {position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility .35s ease;}
.mobile-menu.is-open {opacity: 1; visibility: visible; pointer-events: auto;}
.mobile-menu__backdrop {position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.mobile-menu__close {position: absolute; top: 20px; right: 22px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.1); transition: background var(--ease); z-index: 1;}
.mobile-menu__close:hover { background: rgba(255,255,255,.2); }
.mobile-menu__nav {position: relative; z-index: 1; display: flex; gap: 64px; padding: 20px; text-align: left;}
.mobile-menu__cat {display: block; font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 18px; letter-spacing: -0.02em;}
.mobile-menu__group ul {display: flex; flex-direction: column; gap: 14px;}
.mobile-menu__group ul li a {font-size: 16px; font-weight: 400; color: rgba(255,255,255,.75); transition: color var(--ease);}
.mobile-menu__group ul li a:hover { color: #fff; }

/* ────────────────────────────────────────
   5. 히어로 슬라이더
──────────────────────────────────────── */
.hero {position: relative; width: 100%; height: 960px; overflow: hidden;}

/* 슬라이드 */
.hero__slides { position: absolute; inset: 0; }

.hero__slide {position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1); transition: opacity .9s ease; will-change: opacity, transform;}
.hero__slide.is-active {opacity: 1; animation: heroZoom 5s ease-out forwards;}

@keyframes heroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* 오버레이 그라데이션 */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,.05) 35%,
    rgba(0,0,0,.35) 65%,
    rgba(0,0,0,.58) 100%
  );
  z-index: 1;
}

/* 텍스트 콘텐츠 */
.hero__content {position: absolute; inset: 0 0 auto 0; top: 40%; transform: translateY(-10%); z-index: 2;}
.hero__title {font-size: clamp(30px, 4vw, 62px); font-weight: 700; color: #fff; line-height: 1.2; letter-spacing: -0.03em; margin-bottom: 16px; text-shadow: 0 2px 12px rgba(0,0,0,.2); transition: opacity .4s ease, transform .4s ease;}
.hero__desc {font-size: clamp(18px, 1.4vw, 24px); color: rgba(255,255,255,.85); font-weight: 400; transition: opacity .4s ease .06s, transform .4s ease .06s;}

/* 텍스트 전환 중 페이드아웃 */
.hero__title.is-fading, .hero__desc.is-fading {opacity: 0; transform: translateY(8px);}

/* 슬라이더 네비게이션 */
.hero__nav-wrap { position: relative; z-index: 2; margin-top: 120px; }

.hero__nav {display: flex; align-items: center; gap: 14px;}

/* 슬라이드 번호 버튼 (01·02·03 공통) */
.hero__nav-num {font-size: 15px; font-weight: 400; color: rgba(255,255,255,.45); font-family: var(--font); font-variant-numeric: tabular-nums; transition: color var(--ease), font-weight var(--ease); flex-shrink: 0;}
.hero__nav-num.is-active {color: #fff; font-weight: 700;}
.hero__nav-num:not(.is-active):hover {color: rgba(255,255,255,.8);}

/* 타임바 트랙 */
.hero__nav-line {width: 72px; height: 2px; background: rgba(255,255,255,.28); border-radius: 2px; overflow: hidden; flex-shrink: 0;}
.hero__nav-bar-fill {height: 100%; width: 0%; background: #fff; border-radius: 2px;}

/* Prev / Next */
.hero__nav-arrows {display: flex; gap: 6px; margin-left: 2px;}
.hero__nav-arrow {width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background var(--ease), border-color var(--ease);}
.hero__nav-arrow:hover {background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.65);}

/* ────────────────────────────────────────
   6. 섹션 공통
──────────────────────────────────────── */
.section {padding-top: 130px; scroll-margin-top: calc(var(--gnb-h) + 80px);}
.section__title {font-size: clamp(32px, 4vw, 48px); font-weight: 700; color: var(--c-text-900); text-align: center; margin-bottom: 52px; letter-spacing: -0.025em;}
.section__curriculum {position: relative; padding-top: 130px; padding-bottom: 250px; display: block;}
.section__curriculum::before {content: ""; position: absolute; bottom: 330px; right: 0; width: 980px; height: 975px; background: url("/images/main/bg_section.png") no-repeat; background-size: contain; pointer-events: none; z-index: 0;}
.section__curriculum > * {position: relative; z-index: 1;}

/* 콘텐츠 위로 */
.section__curriculum .inner {position: relative; z-index: 1;}

/* CORE / COLLEGE 간격 */
.section__curriculum .inner + .inner {margin-top: 120px;}

/* Core Curriculum 섹션 배경 장식 */
.section__core {position: relative;}
.section__deco {position: absolute; right: -120px; bottom: -60px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle at center, rgba(240,150,100,.1) 0%, transparent 65%); pointer-events: none;}
.section__core .inner { position: relative; z-index: 1; }
.section__college { padding-bottom: 250px;}

/* ────────────────────────────────────────
   7. 카드 그리드
──────────────────────────────────────── */
.card-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap);}

/* ────────────────────────────────────────
   8. 카드
──────────────────────────────────────── */
.card {background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--ease), transform var(--ease); border: 1px solid rgba(0,0,0,.04); cursor: pointer;}
.card:hover {box-shadow: var(--shadow-card-hv); transform: translateY(-5px);}
.card__img-wrap {overflow: hidden; flex-shrink: 0;}
.card__img {width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease;}
.card:hover .card__img { transform: scale(1.05); }
.card__body {padding: 30px 30px 40px; display: flex; flex-direction: column; flex: 1;}
.card__name {font-size: 22px; font-weight: 800; letter-spacing: -0.01em;}

.card__name--blue  { color: var(--c-primary); }
.card__name--yellow { color: var(--c-accent); }

.card__desc {font-size: 16px; color: var(--c-text-600); line-height: 1.6; margin-bottom: 14px; flex: 1;}
.card__tags {display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 40px;}

.tag {display: inline-block; font-size: 14px; color: var(--c-text-400); background: #f3f4f6; padding: 2px 12px; border-radius: 100px;}
.tag_yellow { background: #FEF9E9; color: #EEB00B;}
.tag_blue { background: #E9ECF5; color: #233D95;}

/* 자세히 보기 버튼 */
.btn-detail {display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px 10px; border-radius: var(--r-pill); font-size: 16px; font-weight: 500; align-self: flex-start; transition: opacity var(--ease), transform var(--ease-fast);}
.btn-detail--blue   { background: var(--c-primary); color: #fff; }
.btn-detail--yellow { background: var(--c-accent); color: #fff; }

.card--static {cursor: default;}
.card--static:hover {transform: none; box-shadow: var(--shadow-card);}
.card--static .card__body {padding-bottom: 28px;}
.card--static .card__tags {margin-bottom: 20px;}
.card--static2 {margin-bottom: 100px;}

/* ────────────────────────────────────────
   9. 푸터
──────────────────────────────────────── */
.footer {background: #1a1a1a; padding: 64px 0 36px;}
.footer__grid {display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-bottom: 44px; align-items: start;}

/* 브랜드 */
.footer__logo {display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; color: #fff;}
.footer__logo img {width: 160px; height: auto; display: block;}
.footer__logo span {font-size: 18px; font-weight: 800; letter-spacing: -0.025em;}

.footer__info dl {display: flex; flex-direction: column; gap: 7px;}
.footer__info div {display: flex; gap: 8px; font-size: 14px;}
.footer__info dt {color: #fff; font-weight: 700; flex-shrink: 0; white-space: nowrap;}
.footer__info dd {color: rgba(255,255,255,.5); font-weight: 400;}

/* 네비 */
.footer__nav-wrap {display: flex; gap: 64px;}
.footer__nav-title {display: block; font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 18px; letter-spacing: -.01em;}
.footer__nav-list {display: flex; flex-direction: column; gap: 10px;}
.footer__nav-list a, .footer__nav-list button {font-size: 14px; color: #888; transition: color var(--ease);}
.footer__nav-list a:hover, .footer__nav-list button:hover { color: #fff; }
.footer__nav-list button {background: none; border: none; cursor: pointer; text-align: left; padding: 0;}

/* 카피라이트 */
.footer__bottom {border-top: 1px solid #2a2a2a; padding-top: 24px;}
.footer__bottom p {font-size: 12px; color: #444;}

/* ────────────────────────────────────────
   10. 모달 오버레이
──────────────────────────────────────── */
.modal-overlay {position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 40px 20px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s ease, visibility .28s ease;}
.modal-overlay.is-open {opacity: 1; visibility: visible; pointer-events: auto;}

/* 내부 모달 (개인정보): z-index 더 높게 */
.modal-overlay--inner { z-index: 2100; }
.modal-overlay__backdrop {position: absolute; inset: 0; background: rgba(0,0,0,.52); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);}
.modal-overlay__wrap {position: relative; width: 100%; max-width: 500px; max-height: calc(100vh - 200px); min-height: 400px; display: flex; justify-content: center; 
  border-radius: 30px; overflow: hidden; transform: scale(.96) translateY(10px); transition: transform .28s cubic-bezier(0.34, 1.2, 0.64, 1);}
.modal-overlay.is-open .modal-overlay__wrap {transform: scale(1) translateY(0);}

.modal {background: #fff; border-radius: var(--r-modal); box-shadow: var(--shadow-modal); overflow-x: hidden; overflow-y: auto; max-height: 100%; width: 100%;}

/* ── 모달 헤더 */
.modal__header {display: flex; align-items: center; justify-content: space-between; padding: 40px 35px 20px; position: sticky; top: 0; background: #fff; z-index: 10; border-bottom: 1px solid var(--c-border);}
.modal__title {font-size: 24px; font-weight: 700; color: var(--c-text-900); letter-spacing: -0.025em;}
.modal__title--sm { font-size: 20px; }

.modal__close-btn {width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 100px; flex-shrink: 0; transition: background var(--ease-fast);}
.modal__close-btn svg {width: 23px; height: 23px; transform: scale(1.2);}
.modal__close-btn:hover { background: #f0f0f0; }

/* ── 모달 바디 */
.modal__body { padding: 20px 35px 30px; background: #fff;}

/* ────────────────────────────────────────
   11. 폼 요소
──────────────────────────────────────── */
.form-group { margin-bottom: 20px; }
.form-label {display: block; font-size: 18px; font-weight: 700; color: var(--c-text-900); margin-bottom: 4px;}
.form-hint {font-size: 14px; font-weight: 400; color: var(--c-text-400);}
.form-input, .form-textarea { width: 100%; padding: 12px 10px; border: 1.5px solid var(--c-border); border-radius: var(--r-input); font-size: 16px; font-family: var(--font); color: var(--c-text-900); outline: none; transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
  background: #fff;}
.form-input:focus, .form-textarea:focus {border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(35,61,149,.1);}
.form-textarea {resize: vertical; min-height: 100px;}

/* 체크박스 그리드 */
.checkbox-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;}
.check-label {display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--c-text-600); cursor: pointer; line-height: 1.4;}
.check-label input[type="checkbox"] {width: 18px; height: 18px; accent-color: var(--c-primary); cursor: pointer; flex-shrink: 0;}

/* 개인정보 동의 행 */
.form-privacy-row {display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; justify-content: center;}
.privacy-link-btn {font-size: 16px; color: var(--c-primary); font-weight: 600; text-decoration: underline; font-family: var(--font); cursor: pointer; transition: opacity var(--ease-fast);}
.privacy-link-btn:hover { opacity: .75; }

/* 제출 버튼 */
.btn-submit {display: block; width: 100%; padding: 14px; background: var(--c-primary); color: #fff; border-radius: var(--r-pill); font-size: 16px; font-weight: 700; font-family: var(--font); text-align: center; transition: background var(--ease), transform var(--ease-fast);
  cursor: pointer; border: none;}
.btn-submit:hover {background: var(--c-primary-dk); transform: translateY(-1px);}

/* ────────────────────────────────────────
   12. 개인정보 모달 본문
──────────────────────────────────────── */
.privacy-intro {font-size: 15px; color: var(--c-text-600); margin-bottom: 16px; line-height: 1.65;}
.privacy-content {background-color: #F5F5F5; border-radius: 10px; padding: 25px; margin-bottom: 26px; max-height: 290px; overflow-y: auto;}
.privacy-item { margin-bottom: 13px; }
.privacy-item:last-child { margin-bottom: 0; }
.privacy-item strong {display: block; font-size: 15px; font-weight: 700; color: var(--c-text-900);}
.privacy-item p {font-size: 15px; color: var(--c-text-600);}

.btn-agree {display: block; width: 100%; padding: 14px; background: var(--c-primary); color: #fff; border-radius: var(--r-pill); font-size: 16px; font-weight: 700; font-family: var(--font); cursor: pointer; border: none; transition: background var(--ease);}
.btn-agree:hover { background: var(--c-primary-dk); }

/* ────────────────────────────────────────
   13. 반응형 — 태블릿 (768px ~ 1199px)
──────────────────────────────────────── */
@media (max-width: 1199px) {

  .inner { padding: 0 var(--pad-tb); }

  /* GNB */
  .gnb__nav-pc { display: none; }
  .gnb__joinus-pc { display: none; }
  .gnb__mobile-controls { display: flex; }

  /* 드롭다운 없으니 숨김 유지 */
  .gnb__dropdown { display: none; }

  /* 카드 2컬럼 */
  .card-grid { grid-template-columns: repeat(2, 1fr); }

  /* 섹션 패딩 */
  .section { padding: 80px 0; }
  .section__title { margin-bottom: 40px; }

  /* 히어로 */
  .hero { height: 700px; }
  .hero__content { transform: translateY(-5%); }

  .section__curriculum::before {display: none;}

  /* 서브페이지 히어로 */
  .sub-hero {
    height: 700px;
  }
  .sub-hero__desc   { font-size: 16px; margin-bottom: 40px; }

  /* 서브 탭 */
  .sub-tabs__inner { height: 64px; }
  .sub-tabs__btn   { font-size: 15px; }

  /* 서브 섹션 */
  .sub-section { padding: 100px 0; }

  /* SAT 섹션 */
  .sat-section--navy { padding: 100px 0; }
  .sat-stats { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .sat-stat  { padding: 50px 20px 40px; border-right: none; border-bottom: none; }

  .map-stats { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .map-stat  { padding: 50px 20px 40px; border-right: none; border-bottom: none; }

  /* CTA 배너 버튼 */
  .btn-outline-white  { padding: 14px 24px; font-size: 16px; gap: 16px; }
  .btn-primary-pink    { padding: 14px 24px; font-size: 16px; gap: 16px; }
  .btn-primary-ora    { padding: 14px 24px; font-size: 16px; gap: 16px; }
  .btn-primary-blue   { padding: 14px 24px; font-size: 16px; gap: 16px; }
  .btn-primary-green    { padding: 14px 24px; font-size: 16px; gap: 16px; }
  .btn-primary-lgreen    { padding: 14px 24px; font-size: 16px; gap: 16px; }
  .btn-primary-ygreen    { padding: 14px 24px; font-size: 16px; gap: 16px; }
  .btn-primary-purple    { padding: 14px 24px; font-size: 16px; gap: 16px; }

  .footer__grid {grid-template-columns: minmax(0, 2fr) minmax(0, 0fr) minmax(0, 0fr); gap: 0;}
  .footer__products { display: none;}
  .footer__support { display: none;}
}

/* ────────────────────────────────────────
   14. 반응형 — 모바일 (~ 767px)
──────────────────────────────────────── */
@media (max-width: 767px) {
  :root {
    --gnb-h: 60px;
  }

  /* ── GNB ── */
  .gnb__inner { gap: 8px; }
  .gnb__mobile-controls { gap: 6px; flex-shrink: 0; }
  .btn-joinus {padding: 7px 13px; font-size: 13px; gap: 6px;}
  .btn-joinus svg { width: 11px; height: 11px; }
  .gnb__hamburger {width: 40px; height: 40px; flex-shrink: 0;}
  .inner { padding: 0 var(--pad-mo); }
  .card__body { padding: 20px 20px 35px;}

  /* ── 카드 1컬럼 ── */
  .card-grid { grid-template-columns: 1fr; }

  /* ── 메인 섹션 ── */
  .section { padding: 64px 0 96px; }
  .section__title { font-size: clamp(22px, 6vw, 30px); margin-bottom: 32px; }

  /* ── 히어로 ── */
  .hero { height: 480px; }
  .hero__content { transform: none; }
  .hero__nav-wrap { bottom: 24px; margin-top: 60px; }

  /* ── 서브페이지 히어로 ── */
  .sub-hero {height: auto; min-height: 420px; padding: 110px 0 56px; align-items: flex-end;}
  .sub-hero__badge {padding: 0 25px;}
  .sub-hero__title  { font-size: clamp(22px, 6vw, 30px); }
  .sub-hero__brand  { font-size: clamp(22px, 6vw, 30px); }
  .sub-hero__desc   { font-size: 14px; line-height: 1.7; margin-bottom: 28px; }
  .sub-hero__cta    { flex-direction: column; align-items: stretch; gap: 10px; }

  /* ── CTA 버튼 모바일 ── */
  .btn-outline-white, .btn-primary-ora, .btn-primary-blue, 
  .btn-primary-red, .btn-primary-green, .btn-primary-lgreen, 
  .btn-primary-pink, .btn-primary-ygreen, .btn-primary-purple, 
  .btn-primary-dblue 
  {width: 100%; justify-content: center;
    padding: 14px 20px !important;
    font-size: 16px !important;
    gap: 10px;
  }

  .btn-outline-white img { width: 18px; height: 18px; }

  /* ── 서브 탭 ── */
  .sub-tabs__inner { height: 50px; }
  .sub-tabs__btn   { font-size: 13px; font-weight: 500; }

  /* ── 공통 서브 섹션 ── */
  .sub-section { padding: 64px 0; }
  .dot-accent { margin: 0 auto 32px; }
  .sub-section__subtitle {
    margin-bottom: 36px;
    line-height: 1.6;
  }

  /* ── SAT — 공통 ── */
  .sat-section--navy { padding: 64px 0; }

  /* SAT about */
  .sat-about     { font-size: clamp(14px, 3.8vw, 17px); margin-bottom: 40px; }
  .sat-sub-title { font-size: clamp(15px, 4.2vw, 19px); }
  .sat-sub-desc  { font-size: clamp(13px, 3.5vw, 15px); margin-bottom: 24px; }
  .sat-table-note { margin-top: 48px; }
  .sat-table-note p { font-size: clamp(14px, 3.8vw, 17px); }
  .inner hr { margin: 48px 0; }

  /* SAT 착각 카드 */
  .effect-cards { gap: 14px; }

  /* SAT 프로그램 */
  .sat-video-grid    { grid-template-columns: 1fr; }
  .sat-video-meta    { margin-top: 12px; margin-bottom: 20px !important; }
  .sat-badge         { font-size: 12px; padding: 4px 10px; }
  .sat-video-meta__title { font-size: 16px; }

  .sat-feature-cards { grid-template-columns: 1fr; gap: 14px; }
  .sat-feature-card__body  { padding: 18px 18px 22px !important; }
  .sat-feature-card__title { font-size: 16px; }
  .sat-feature-card__text  { font-size: 14px; }

  .kgr12-video-grid { grid-template-columns: repeat(2, 1fr); display: grid;}
  .kgr12-video-meta    { margin-top: 12px; margin-bottom: 20px !important; }
  .kgr12-badge         { font-size: 12px; padding: 4px 10px; }
  .kgr12-video-meta__title { font-size: 16px; }

  /* AP 프로그램 */
  .ap-video-grid    { grid-template-columns: 1fr; }
  .ap-video-meta    { margin-top: 12px; margin-bottom: 20px !important; }
  .ap-badge         { font-size: 12px; padding: 4px 10px; }
  .ap-video-meta__title { font-size: 16px; }

  .ap-feature-cards { grid-template-columns: 1fr; gap: 14px; }
  .ap-feature-card__body  { padding: 18px 18px 22px !important; }
  .ap-feature-card__title { font-size: 16px; }
  .ap-feature-card__text  { font-size: 14px; }

  /* SAT 통계 카드 */
  .sat-stats { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .sat-stat  { padding: 36px 20px 28px; border-bottom: 1px solid var(--c-border); }
  .sat-stat:last-child { border-bottom: none; }
  .sat-stat__num   { font-size: clamp(38px, 10vw, 52px); margin-bottom: 14px; }
  .sat-stat__unit  { font-size: clamp(20px, 5vw, 28px); }
  .sat-stat__title { font-size: 16px; margin-bottom: 10px; }
  .sat-stat__text  { font-size: 14px; }
  
  /* map 통계 카드 */
  .map-stats { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .map-stat  { padding: 36px 20px 28px; border-bottom: 1px solid var(--c-border); }
  .map-stat:last-child { border-bottom: none; }
  .map-stat__num   { font-size: clamp(38px, 10vw, 52px); margin-bottom: 14px; }
  .map-stat__unit  { font-size: clamp(20px, 5vw, 28px); }
  .map-stat__title { font-size: 16px; margin-bottom: 10px; }
  .map-stat__text  { font-size: 14px; }

  /* SAT CTA 배너 */
  .sat-cta-banner { padding: 60px 0; min-height: 0; }
  .sat-cta-banner__title { font-size: clamp(17px, 4.8vw, 24px); }
  .sat-cta-banner__sub   { font-size: 13px; margin-bottom: 24px; }
  .sat-cta-banner .btn-primary-blue {
    width: 100%; max-width: 320px; justify-content: center;
    margin: 0 auto; display: flex;
  }

  /* ── 모바일 메뉴 ── */
  .mobile-menu__nav {
    flex-direction: column;
    gap: 32px;
    padding: 70px 32px 40px;
    width: 100%;
    text-align: center;
    align-items: center;
  }
  .mobile-menu__group { width: 100%; }
  .mobile-menu__cat { text-align: center; }
  .mobile-menu__group ul { align-items: center; gap: 14px; }
  .mobile-menu__group ul li a { font-size: 17px; }

  /* ── 모달 (바텀시트 + 스크롤) ── */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  /* 핵심: 92vh 이내에서 내용 스크롤 */
  .modal-overlay__wrap {
    width: 100%;
    max-width: 100%;
    border-radius: var(--r-modal) var(--r-modal) 0 0;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #fff;
  }

  /* overflow:hidden 해제 → wrap의 scroll이 동작함 */
  .modal {
    width: 100%;
    border-radius: var(--r-modal) var(--r-modal) 0 0;
    overflow-y: auto;
  }
  .modal--inner { max-width: 100%; }

  .modal__header { position: sticky; top: 0; z-index: 10; padding: 18px 18px 12px; }
  .modal__title  { font-size: 19px; }
  .modal__body   { padding: 10px 18px 32px; }

  .form-label    { font-size: 15px; }
  .form-input,
  .form-textarea { font-size: 15px; padding: 10px 10px; }
  .check-label   { font-size: 15px; }
  .checkbox-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .btn-submit    { font-size: 16px; padding: 14px; }

  /* ── 푸터 ── */
  .footer__products { display: none; }
  .footer__support  { display: none; }
}

/* ────────────────────────────────────────
   15. 최소 너비 320px
──────────────────────────────────────── */
@media (max-width: 360px) {
  .checkbox-grid { grid-template-columns: 1fr; }
  .hero__title { font-size: 22px; }
}

/* ────────────────────────────────────────
   16. 태블릿 메뉴 레이아웃 (768~1199 특정)
──────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1199px) {
  .mobile-menu__nav {gap: 56px;}
}

/* ────────────────────────────────────────
   17. 접근성 / 포커스
──────────────────────────────────────── */
:focus-visible {outline: 2px solid var(--c-primary); outline-offset: 3px; border-radius: 4px;}

/* 스크롤바 커스텀 (WebKit) */
.privacy-content::-webkit-scrollbar,
.modal-overlay__wrap::-webkit-scrollbar {
  width: 4px;
}
.privacy-content::-webkit-scrollbar-track,
.modal-overlay__wrap::-webkit-scrollbar-track {
  background: transparent;
}
.privacy-content::-webkit-scrollbar-thumb,
.modal-overlay__wrap::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

/* ────────────────────────────────────────
   18. 스크롤 리빌 애니메이션
──────────────────────────────────────── */
.will-reveal {opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease;}
.will-reveal.is-revealed {opacity: 1; transform: none;}

/* 카드 순차 딜레이 */
.card.will-reveal:nth-child(1) { transition-delay: 0s; }
.card.will-reveal:nth-child(2) { transition-delay: 0.1s; }
.card.will-reveal:nth-child(3) { transition-delay: 0.2s; }
.card.will-reveal:nth-child(4) { transition-delay: 0.3s; }
.card.will-reveal:nth-child(5) { transition-delay: 0.4s; }

/* ────────────────────────────────────────
   19. 히어로 슬라이드 전환 개선
──────────────────────────────────────── */
.hero__slide {transition: opacity 0.8s ease;}

/* ────────────────────────────────────────
   20. 폼 에러 상태
──────────────────────────────────────── */
.form-input.is-error, .form-textarea.is-error {border-color: #e53e3e; background-color: #fff5f5;}
.form-error {display: none; color: #e53e3e; font-size: 12px; margin-top: 4px;}

/* 개인정보 에러 */
.form-error--privacy { margin-top: -8px; margin-bottom: 8px; }

/* ────────────────────────────────────────
   S0. GNB 숨김 상태 (탭 고정 시)
──────────────────────────────────────── */

/* 서브페이지 GNB 로고 오버라이드 */
.gnb__logo--twig {text-decoration: none; display: flex; align-items: center; font-size: 18px;}
.gnb__logo--mypath {max-width: 140px;}

/* 드롭다운 현재 페이지 링크 */
.gnb__dropdown-link.is-current {color: var(--c-primary); font-weight: 700;}

/* ────────────────────────────────────────
   S1. 서브페이지 히어로
──────────────────────────────────────── */
.sub-hero {  position: relative; width: 100%; height: 962px; display: flex; align-items: center; overflow: hidden;}
.sub-hero__bg {position: absolute; inset: 0; z-index: 0;}
.sub-hero__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transform: scale(1);}

.sub-hero__content {position: relative; z-index: 1; max-width: 1400px; text-align: center;}

.sub-hero__badge {display: inline-block; font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; color: #fff; margin-bottom: 24px;}
.sub-hero__badge_pink{background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,18,109,1) 100%); background-clip: text; -webkit-background-clip: text; color: transparent;}
.sub-hero__badge_yellow{background: linear-gradient(90deg, rgba(254,231,187,1) 0%, rgba(238,186,87,1) 100%); background-clip: text; -webkit-background-clip: text; color: transparent;}
.sub-hero__badge_lblue{color: #22D3EE;}

.sub-hero__title {font-size: clamp(34px, 4vw, 56px); font-weight: 400; color: #fff; line-height: 1.2;}
.sub-hero__title_mypath {font-size: clamp(24px, 3.6vw, 48px); font-weight: 400; color: #fff; line-height: 1.2; text-shadow: 0 0px 20px rgba(0,0,0,1);}

.sub-hero__brand {font-size: clamp(34px, 4vw, 56px); font-weight: 700; color: #fff; margin-bottom: 18px; line-height: 1.4; display: inline-block;}
.sub-hero__brand_pink {background: linear-gradient(90deg, rgba(255,18,109,1) 0%, rgba(245,186,27,1) 22%, rgba(255,255,255,1) 55%); background-clip: text; -webkit-background-clip: text; color: transparent;}
.sub-hero__brand_lblue {background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(34,211,238,1) 65%, rgba(20,89,255,1) 100%); background-clip: text; -webkit-background-clip: text; color: transparent;}
.sub-hero__brand_green {background: linear-gradient(90deg, rgba(243,193,73,1) 0%, rgba(255,255,255,1) 70%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.sub-hero__brand_lgreen {background: linear-gradient(-90deg, rgba(150,201,80,1) 0%, rgba(61,184,174,1) 70%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.sub-hero__brand_purple {background: linear-gradient(-90deg, rgba(249,75,156,1) 0%, rgba(167,139,250,1) 70%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.sub-hero__brand_red {background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(238,186,87,1) 55%, rgba(122,8,12,1) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

.sub-hero__desc {font-size: clamp(16px, 1.2vw, 18px); color: rgba(255,255,255,.8); line-height: 1.6; margin-bottom: 60px;}

.sub-hero__desc strong {color: #fff;}

.sub-hero__cta {display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center;}

/* 흰색 아웃라인 버튼 */
.btn-outline-white {display: inline-flex; align-items: center; gap: 24px; padding: 18px 30px; font-size: 18px; font-weight: 400; color: #fff; border: 2px solid rgba(255,255,255,.65); border-radius: 100px; cursor: pointer; transition: filter var(--ease), transform var(--ease);}
.btn-outline-white:hover {background: rgba(255,255,255,.05); border-color: #fff;}
.btn-outline-white img {width: 22px; height: 22px;}

/* 핑크 CTA 버튼 */
.btn-primary-pink {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 18px 30px;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  background: #FF126D;
  border-radius: 100px;
  border: 2px solid #FF126D;
  cursor: pointer;
  transition: filter var(--ease), transform var(--ease);
}
.btn-primary-pink:hover {
  background: rgba(255,18,109,0.9);
}
/* 남색 CTA 버튼 */
.btn-primary-dblue {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 18px 30px;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  background: #1459FF;
  border-radius: 100px;
  border: 2px solid #1459FF;
  cursor: pointer;
  transition: filter var(--ease), transform var(--ease);
}
.btn-primary-dblue:hover {
  background: rgba(20, 89, 255, 0.9);
}
/* 빨간 CTA 버튼 */
.btn-primary-red {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 18px 30px;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  background: #A8000F;
  border-radius: 100px;
  border: 2px solid #A8000F;
  cursor: pointer;
  transition: filter var(--ease), transform var(--ease);
}
.btn-primary-red:hover {
  background: rgba(168,0,15,0.9);
}
/* 초록 CTA 버튼 */
.btn-primary-green {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 18px 30px;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  background: #004C44;
  border-radius: 100px;
  border: 2px solid #004C44;
  cursor: pointer;
  transition: filter var(--ease), transform var(--ease);
}
.btn-primary-green:hover {background: rgba(0, 76, 68, 0.9);}
/* ap 초록 CTA 버튼 */
.btn-primary-lgreen {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 18px 30px;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  background: #14532D;
  border-radius: 100px;
  border: 2px solid #14532D;
  cursor: pointer;
  transition: filter var(--ease), transform var(--ease);
}
.btn-primary-lgreen:hover {background: rgba(20, 83, 45, 0.9);}
/* 보라 CTA 버튼 */
.btn-primary-purple {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 18px 30px;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  background: #3B0764;
  border-radius: 100px;
  border: 2px solid #3B0764;
  cursor: pointer;
  transition: filter var(--ease), transform var(--ease);
}
.btn-primary-purple:hover {background: rgba(59, 7, 100, 0.9);}
/* 주황 CTA 버튼 */
.btn-primary-ora {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 18px 30px;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  background: #E8531A;
  border-radius: 100px;
  border: 2px solid #E8531A;
  cursor: pointer;
  transition: filter var(--ease), transform var(--ease);
}
.btn-primary-ora:hover {background: rgba(232,83,26,0.9);}
/* 연두색 CTA 버튼 */
.btn-primary-ygreen {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 18px 30px;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  background: #3AB54A;
  border-radius: 100px;
  border: 2px solid #3AB54A;
  cursor: pointer;
  transition: filter var(--ease), transform var(--ease);
}
.btn-primary-ygreen:hover {background: rgba(58, 181, 74, 0.9);}
/* 파란 CTA 버튼 */
.btn-primary-blue {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 18px 30px;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  background: #0A1F44;
  border-radius: 100px;
  border: 2px solid #0A1F44;
  cursor: pointer;
  transition: filter var(--ease), transform var(--ease);
}
.btn-primary-blue:hover {background: rgba(10, 31, 68, 0.9);}
/* ────────────────────────────────────────
   S2. 탭 네비게이션
──────────────────────────────────────── */
#subTabSentinel {height: 0; overflow: hidden;}

.sub-tabs {position: sticky; top: 0; z-index: 900; background: #fff; border-bottom: 1px solid #e0e0e0; transition: top .35s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease;}
.sub-tabs__inner {display: flex; align-items: stretch; gap: 0; height: 80px; max-width: 1400px; width: 100%; margin: 0 auto;}

.sub-tabs__btn {position: relative; flex: 1; padding: 0; font-size: 18px; font-weight: 500; color: var(--c-text-400); background: none; border: none; cursor: pointer; white-space: nowrap; transition: color var(--ease), font-weight var(--ease); text-align: center;}
.sub-tabs__btn::after {content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: #e8245a; border-radius: 3px 3px 0 0; transform: scaleX(0); transition: transform .25s ease;}
.sub-tabs--sat .sub-tabs__btn::after {background: var(--sat-orange);}
.sub-tabs--mypath .sub-tabs__btn::after {background: #0D5F56;}
.sub-tabs--ap .sub-tabs__btn::after {background: #14532D;}
.sub-tabs--pci .sub-tabs__btn::after {background: #A8000F;}
.sub-tabs--mapgrowth .sub-tabs__btn::after {background: #3AB54A;}
.sub-tabs--kgr12 .sub-tabs__btn::after {background: #3B0764;}
.sub-tabs--american .sub-tabs__btn::after {background: #1459FF;}

.sub-tabs__btn.is-active {color: var(--c-text); font-weight: 700;}
.sub-tabs__btn.is-active::after {transform: scaleX(1);}
.sub-tabs__btn:hover:not(.is-active) {color: var(--c-text);}

/* 도입문의 — 기본 검은 글씨, 활성 시 동일하게 볼드+분홍줄 */
.sub-tabs__btn--inquiry {color: var(--c-text-400); font-weight: 500;}
.sub-tabs__btn--inquiry:hover { color: var(--c-text); }

/* ────────────────────────────────────────
   S3. 공통 섹션
──────────────────────────────────────── */
.sub-section {padding: 140px 0;}
.sub-section__title { font-size: clamp(30px, 3vw, 48px); font-weight: 700; color: var(--c-text); text-align: center; letter-spacing: -.02em; margin-bottom: 20px;}
.dot-accent { width: 10px; height: 10px; border-radius: 50%; background: var(--c-primary); margin: 0 auto 60px;}
.pink-dot {background: #e8245a;}
.ora-dot {background: #E8531A;}
.gold-dot {background: #F5BA1C;}
.green-dot {background: #0D5F56;}
.lgreen-dot {background: #14532D;}
.purple-dot {background: #3B0764;}
.red-dot {background: #A8000F;}
.ygreen-dot {background: #3AB54A;}
.lblue-dot {background: #1459FF;}

.sub-section__subtitle {font-size: clamp(22px, 2.4vw, 30px); color: #333; font-weight: 700; text-align: center; margin-bottom: 60px;}
.sub-section__subtitle2 {font-size: clamp(22px, 2.4vw, 30px); color: #333; font-weight: 700; text-align: center;}
.sub-section__subtitle3 {font-size: clamp(18px, 2.0vw, 24px); color: #fff; font-weight: 700; text-align: center; margin-bottom: 180px;}
.sub-section__desc {font-size: clamp(18px, 2.0vw, 26px); color: var(--c-text-400); text-align: center; margin-bottom: 80px;}
.sub-section__desc2 {font-size: clamp(18px, 2.0vw, 24px); color: var(--c-text-400); text-align: center; margin-bottom: 80px;}

/* ────────────────────────────────────────
   S4. 중분류 카테고리 1번째 섹션
──────────────────────────────────────── */
.sub-section-science01 {position: relative; overflow: hidden;}
.sub-section-science01::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 979px;
  background: linear-gradient(to bottom, rgba(255,255,255,1), transparent), url("/images/twig/bg_section.png") center bottom / cover no-repeat; z-index: 0;}

.sub-section-science01 .inner {position: relative; z-index: 1;}

.science-intro {display: grid; grid-template-columns: 1fr 420px; gap: 60px; align-items: center; margin-bottom: 160px;}
.science-intro__accent {font-size: clamp(20px, 1.6vw, 30px); font-weight: 700; color: #333; line-height: 1.4; margin-bottom: 30px;}
.science-intro__body { font-size: clamp(16px, 1.6vw, 20px); color: var(--c-text-400); line-height: 1.6; margin-bottom: 12px;}
.science-intro__img-wrap {border-radius: 20px; overflow: hidden; aspect-ratio: 3/4;}
.science-intro__img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; padding: 0 35px 30px;}
.science-intro__img-wrap:hover .science-intro__img {transform: scale(1.04);}

/* pci */
.pci-about__accent {text-align: center; font-size: clamp(20px, 1.6vw, 30px); font-weight: 700; color: #111; line-height: 1.4; margin-bottom: 20px;}
.pci-about__body {text-align: center; font-size: clamp(16px, 1.6vw, 20px); color: var(--c-text-400); line-height: 1.6; margin-bottom: 120px;}
.pci-intro_ri {display: grid; grid-template-columns: 570px 1fr; gap: 60px; align-items: center; margin-bottom: 80px;}
.pci-intro {display: grid; grid-template-columns: 1fr 570px; gap: 60px; align-items: center; margin-bottom: 80px;}
.pci-intro__accent {font-size: clamp(20px, 1.6vw, 30px); font-weight: 700; color: #333; line-height: 1.4; margin-bottom: 30px;}
.pci-intro__body { font-size: clamp(16px, 1.6vw, 20px); color: var(--c-text-400); line-height: 1.6; margin-bottom: 12px;}
.pci-intro__img-wrap {border-radius: 20px; overflow: hidden;}
.pci-intro__img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; border-radius: 30px;}
.pci-intro__img-wrap:hover .pci-intro__img {transform: scale(1.04);}
.pci-intro__step {font-size: 24px; color: #22D3EE; font-weight: 700;}
.pci-intro__text_ct {text-align: center;}


/* american */
.amr-compare {display: grid; grid-template-columns: 1fr 540px; gap: 60px; align-items: stretch; margin-top: 60px; margin-bottom: 180px;}
.amr-compare__text {display: flex; flex-direction: column; justify-content: center;}
.amr-compare__img img {width: 100%; border-radius: 30px; display: block; transition: transform 0.5s ease;}
.amr-compare__img:hover img {transform: scale(1.05);}

.sub-section-amr {position: relative; overflow: hidden;}
.sub-section-amr::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 979px;
  background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(34,211,238,0.10) 100%); z-index: 0;}
.sub-section-amr .inner {position: relative; z-index: 1;}
.amr-about__accent {text-align: left; font-size: clamp(20px, 1.6vw, 30px); font-weight: 700; color: #111; line-height: 1.4;}
.amr-about__accent2 {text-align: center; font-size: clamp(20px, 1.6vw, 30px); font-weight: 400; color: #111; line-height: 1.4;}
.amr-about__body {text-align: left; font-size: clamp(16px, 1.6vw, 20px); color: var(--c-text-400); line-height: 1.6; margin-bottom: 20px;}
.amr-about__desc {text-align: center; font-size: clamp(14px, 1.2vw, 16px); color: var(--c-text-400); margin-bottom: 60px;}
.amr-intro {display: grid; grid-template-columns: 1fr 570px; gap: 60px; align-items: center; margin-bottom: 40px;}
.amr-intro_ri {display: grid; grid-template-columns: 570px 1fr; gap: 60px; align-items: center; margin-bottom: 40px;}
.amr-intro__accent {font-size: clamp(20px, 2vw, 30px); font-weight: 700; color: #333; line-height: 1.2; margin-bottom: 30px;}
.amr-intro__body { font-size: clamp(16px, 1.6vw, 20px); color: var(--c-text-400); line-height: 1.6; margin-bottom: 12px;}
.amr-intro__img-wrap {width: 100%; max-width: 700px; border-radius: 30px; overflow: hidden;}
.amr-intro__img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; border-radius: 30px;}
.amr-intro__img-wrap:hover .amr-intro__img {transform: scale(1.04);}
.amr-intro__step {font-size: 20px; color: #22D3EE; font-weight: 700;}
.amr-intro__text_ct {text-align: center;}
.amr-intro__text {width: 100%;}
.amr-intro2 {display: flex; flex-direction: column; gap: 50px; align-items: center; margin-top: 70px;}
.amr-intro2__text_ct {text-align: center;}
.amr-intro2__step {font-size: 20px; color: #22D3EE; font-weight: 700;}
.amr-intro2__accent {font-size: clamp(20px, 2vw, 30px); font-weight: 700; color: #333; line-height: 1.2; margin-bottom: 30px;}
.amr-intro2__body { font-size: clamp(16px, 1.6vw, 20px); color: var(--c-text-400); line-height: 1.6; margin-bottom: 12px;}

.table-section {display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-bottom: 100px; width: 100%;}
.table-card {background: #fff; border-radius: 30px; padding: 40px; box-shadow: 0 10px 40px rgba(0,0,0,.08); border: 1px solid #eee; box-sizing: border-box;}
.table-subtitle {font-size: 15px; font-weight: 600; color: #777; margin-bottom: 10px; letter-spacing: .04em; text-transform: uppercase;}
.table-title {font-size: 34px; font-weight: 800; margin-bottom: 10px; color: #111;}
.table-box {border-top: 2px solid #111;}
.table-row {display: flex; align-items: center; align-items: baseline; gap: 10px; padding: 18px 0; border-bottom: 1px solid #e5e5e5;}
.table-row .en {font-size: 22px; font-weight: 700; color: #111; line-height: 1.2;}
.table-row .kr {font-size: 15px; color: #777; white-space: nowrap;}

/* ap */
.sub-section-ap {position: relative; overflow: hidden;}
.sub-section-ap::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 979px;
  background: linear-gradient(to top, rgba(149,200,80,0.1), transparent); z-index: 0;}

.sub-section-ap .inner {position: relative; z-index: 1;}

.ap-intro {display: grid; grid-template-columns: 1fr 540px; gap: 60px; align-items: center; margin-bottom: 180px;}
.ap-intro__accent {font-size: clamp(20px, 1.6vw, 30px); font-weight: 700; color: #333; line-height: 1.4; margin-bottom: 10px;}
.ap-intro__body {font-size: clamp(16px, 1.6vw, 20px); color: var(--c-text-400); line-height: 1.6;}
.ap-intro__img-wrap {border-radius: 20px; overflow: hidden;}
.ap-intro__img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; border-radius: 30px;}
.ap-intro__img-wrap:hover .ap-intro__img {transform: scale(1.04);}

.ap-band__headline {font-size: clamp(26px, 2.4vw, 38px); font-weight: 700; color: var(--c-text); text-align: center; margin-bottom: 40px;}

/* ap */
.sub-section-kgr12 {position: relative; overflow: hidden; background: #FFF6FA;}
.sub-section-kgr12 .inner {position: relative; z-index: 1;}

.kgr12-intro {display: grid; grid-template-columns: 540px 1fr; gap: 60px; align-items: center; margin-bottom: 130px;}
.kgr12-intro__accent {font-size: clamp(20px, 1.6vw, 30px); font-weight: 700; color: #3B0764; line-height: 1.4;}
.kgr12-intro__body {font-size: clamp(16px, 1.6vw, 20px); color: var(--c-text-400); line-height: 1.6; margin-bottom: 12px;}
.kgr12-intro__img-wrap {border-radius: 20px; overflow: hidden;}
.kgr12-intro__img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; border-radius: 30px;}
.kgr12-intro__img-wrap:hover .kgr12-intro__img {transform: scale(1.04);}

.kgr12-sub-title {font-size: clamp(20px, 1.6vw, 30px); font-weight: 800; color: var(--c-text); text-align: center; letter-spacing: -.02em; margin-bottom: 10px;}
.kgr12-sub-desc {font-size: clamp(16px, 1.6vw, 20px); color: var(--c-text-400); text-align: center; line-height: 1.7; margin-bottom: 40px;}

.kgr12-table-note {text-align: center; margin-top: 40px;}
.kgr12-table-note p {font-size: clamp(18px, 1.8vw, 24px); color: var(--c-text-600); line-height: 1.4;}
.kgr12-table-note strong { color: var(--c-text); }



/* mypath */
.sub-section-mypath01 {position: relative; overflow: hidden;}
.sub-section-mypath01::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 979px;
  background: linear-gradient(to top, rgba(243,193,73,0.2), transparent); z-index: 0;}

.sub-section-mypath01 .inner {position: relative; z-index: 1;}

.mypath-intro {display: grid; grid-template-columns: 540px 1fr; gap: 60px; align-items: center; margin-bottom: 180px;}
.mypath-intro__accent {font-size: clamp(20px, 1.6vw, 30px); font-weight: 700; color: #333; line-height: 1.4; margin-bottom: 30px;}
.mypath-intro__body {font-size: clamp(16px, 1.6vw, 20px); color: var(--c-text-400); line-height: 1.6;}
.mypath-intro__img-wrap {border-radius: 20px; overflow: hidden;}
.mypath-intro__img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; border-radius: 30px;}
.mypath-intro__img-wrap:hover .mypath-intro__img {transform: scale(1.04);}

.mypath-band__headline {font-size: clamp(26px, 2.4vw, 38px); font-weight: 700; color: var(--c-text); text-align: center; margin-bottom: 40px;}

/* 동영상 밴드 */
.science-video-band__brand {text-align: center; margin-bottom: 40px; display: flex; justify-content: center;}
.science-video-band__brand img { max-width: 280px; height: auto;}

.science-video-band__headline {font-size: clamp(20px, 2.4vw, 38px); font-weight: 700; color: var(--c-text); text-align: center; margin-bottom: 5px;}
.science-video-band__sub {font-size: clamp(16px, 1.6vw, 20px); color: var(--c-text-400); text-align: center; margin-bottom: 55px;}

.video-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 24px;}
.video-wrap {position: relative; padding-bottom: 56.25%;/* 16:9 */ border-radius: 30px; overflow: hidden; background: #000; box-shadow: 0 8px 32px rgba(0,0,0,.15);}

.video-grid2 {display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-bottom: 100px;}
.video-wrap2 {position: relative; flex: 0 1 calc(50% - 12px); aspect-ratio: 16 / 9; border-radius: 30px; overflow: hidden; background: #000; box-shadow: 0 8px 32px rgba(0,0,0,.15);}

.video-wrap iframe {position: absolute; inset: 0; width: 100%; height: 100%; border: none;}
.video-wrap2 iframe {position: absolute; inset: 0; width: 100%; height: 100%; border: none;}

.science-video-band__caption {text-align: center; margin: 70px 0 60px;}
.science-video-band__caption p {font-size: clamp(18px, 1.8vw, 24px); color: var(--c-text-600); line-height: 1.6;}

/* ────────────────────────────────────────
   S5. 프로그램 안내
──────────────────────────────────────── */
.prog-item {display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 80px 0; border-top: 1px solid var(--c-border);}

.prog-item:first-of-type {border-top: none; padding-top: 0;}

.prog-item__left {position: sticky; top: 120px; align-self: start; display: grid; grid-auto-flow: column; justify-content: start; gap: 15px;}
.prog-item__right {display: flex; flex-direction: column; gap: 20px;}
.prog-item__right img {display: block; margin: 0 auto; max-width: 100%; width: 600px; height: auto;}
.prog-item__num {display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #e8245a; color: #fff; font-size: 14px; font-weight: 800; margin-bottom: 20px;}
.prog-item__num_mypath {background: #0D5F56 !important;}
.prog-item__title {font-size: clamp(20px, 2.5vw, 32px); font-weight: 700; color: var(--c-text); line-height: 1.3; display: inline-block;}
.prog-item__body {font-size: clamp(16px, 2vw, 20px); color: var(--c-text-200); line-height: 1.6; margin-bottom: 26px;}
.prog-item__note {font-size: clamp(14px, 2vw, 16px); color: var(--c-text-400); line-height: 1.6; margin-bottom: 26px;}

/* 에듀테크 로고 밴드 */
.edutech-band {padding: 100px 0 0; border-top: 1px solid var(--c-border); text-align: center;}
.edutech-band__logos {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 35px; margin-top: 45px;}
.edutech-logo {height: 140px; width: auto; object-fit: contain; transition: opacity .3s ease, transform .3s ease;}

.edutech-band2 {padding: 100px 0 0; border-top: 1px solid var(--c-border); text-align: center;}
.edutech-band2__logos {display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 35px; margin-top: 45px;}
.edutech-logo2 {height: 140px; width: auto; object-fit: contain; transition: opacity .3s ease, transform .3s ease;}
.edutech-item {display: flex; flex-direction: column; align-items: center; max-width: 220px;}
.edutech-text {margin-top: 14px; font-size: 16px; line-height: 1.5; text-align: center; color: #666;}

/* ────────────────────────────────────────
   S6. 도입 효과 카드
──────────────────────────────────────── */
.sub-section--pink {background: #FFF5F9;}
.sub-section--red {background: #F8EBEC;}
.sub-section--blue {background: #F8FAFC;}
.sub-section--green {background: #E7EFEF;}
.sub-section--lgreen {background: #EDF2EF;}
.sub-section--ygreen {background: #ECF8ED;}
.sub-section--purple {background: #F7F4FF;}
.sub-section--dblue {background: #EFF4FF;}

.effect-cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
.effect-cards2 {display: grid; grid-template-columns: repeat(2, 2fr); gap: 24px;}
.effect-card {position: relative; border-radius: 30px; overflow: hidden; background: #fff; padding: 35px 35px 35px 60px; box-shadow: 0 4px 24px rgba(0,0,0,.07);}
.effect-card:hover {transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,.12);}
.effect-card-01 {position: relative; border-radius: 30px; overflow: hidden; background: #fff; padding: 35px; box-shadow: 0 4px 24px rgba(0,0,0,.07); margin-bottom: 35px;}
.effect-card-01:hover {transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,.12);}
.effect-card-01 img {height: 70px; padding-bottom: 25px;}

.effect-card-twig::before {content: ""; position: absolute; top: 0; left: 0; width: 30px; height: 100%;
  background: linear-gradient(180deg, #0674F5 0%, #FF126D 100%);}
.effect-card-pci::before {content: ""; position: absolute; top: 0; left: 0; width: 30px; height: 100%;
  background: linear-gradient(180deg, #F5BA1C 0%, #A8000F 100%);}
.effect-card-sat::before {content: ""; position: absolute; top: 0; left: 0; width: 30px; height: 100%;
  background: linear-gradient(180deg, #0A1F44 0%, #E8531A 100%);}
.effect-card-map::before {content: ""; position: absolute; top: 0; left: 0; width: 30px; height: 100%;
  background: linear-gradient(180deg, #F5BA1C 0%, #3AB54A 100%);}
.effect-card-ap::before {content: ""; position: absolute; top: 0; left: 0; width: 30px; height: 100%;
  background: linear-gradient(180deg, #96C950 0%, #00ADEF 100%);}
.effect-card-mypath::before {content: ""; position: absolute; top: 0; left: 0; width: 30px; height: 100%;
  background: linear-gradient(180deg, #F3C149 0%, #0D5F56 100%);}
.effect-card-kgr12::before {content: ""; position: absolute; top: 0; left: 0; width: 30px; height: 100%;
  background: linear-gradient(180deg, #FF4D9D 0%, #3B0764 100%);}
.effect-card-american::before {content: ""; position: absolute; top: 0; left: 0; width: 30px; height: 100%;
  background: linear-gradient(180deg, #22D3EE 0%, #1459FF 100%);}

.effect-card__title {font-size: clamp(18px, 2vw, 22px); font-weight: 700; color: var(--c-text);
  line-height: 1.4; margin-bottom: 16px; letter-spacing: -.02em;}
.effect-card__text { font-size: clamp(16px, 2vw, 18px); color: var(--c-text-400); line-height: 1.6;}

/* ────────────────────────────────────────
   S7. 서브페이지 반응형 — 태블릿
──────────────────────────────────────── */
@media (max-width: 1199px) {

  .sub-hero { height: 560px; }

  .science-intro { grid-template-columns: 1fr 350px;  gap: 40px;}
  .mypath-intro { grid-template-columns: 400px 1fr;  gap: 40px;}
  .pci-intro_ri { grid-template-columns: 400px 1fr;  gap: 40px;}
  .pci-intro { grid-template-columns: 1fr 400px;  gap: 40px;}

  .prog-item { grid-template-columns: 1fr 1fr; gap: 40px;}

  .effect-cards {grid-template-columns: 1fr; max-width: 540px; margin: 0 auto;}
.effect-card-01 {margin-bottom: 0;}

  .video-grid {grid-template-columns: 1fr; max-width: 680px; margin: 0 auto;}
  .video-grid2 {display: grid; grid-template-columns: 1fr; max-width: 680px; margin: 0 auto 100px;}
  .sub-hero__badge {margin-bottom: 20px;}
  .sub-hero__desc {margin-bottom: 30px;}
  .mypath-intro__accent {margin-bottom: 10px;}
  .ap-video-meta {margin-bottom: 60px !important;}

}

/* ────────────────────────────────────────
   S8. 서브페이지 반응형 — 모바일
──────────────────────────────────────── */
@media (max-width: 767px) {
  #tab-program {padding: 100px 0;}
  .sub-hero { height: auto; padding: 140px 0 60px; }
  .sub-hero__content { max-width: 100%; padding-bottom: 35px;}

  .sub-tabs__inner {height: 60px;}
  .sub-tabs__btn { font-size: 14px; }

  .sub-section { padding: 80px 0; }
  .sub-section__subtitle { margin-bottom: 40px; }
  .science-intro { grid-template-columns: 1fr; gap: 32px; margin-bottom: 0; }
  .science-intro__text   { order: 2; }

  .mypath-intro { grid-template-columns: 1fr; gap: 32px; margin-bottom: 0; }
  .mypath-intro__text   { order: 2; }

  .pci-about__body {margin-bottom: 60px;}
  .pci-intro_ri{ grid-template-columns: 1fr; gap: 32px; margin-bottom: 50px; }
  .pci-intro{display: flex; flex-direction: column-reverse; grid-template-columns: 1fr; gap: 32px; margin-bottom: 50px; }
  .pci-intro_ri:last-child {margin-bottom: 0;}
  .pci-intro__accent{margin-bottom: 10px;}

  .kgr12-intro {grid-template-columns: 1fr; gap: 32px; margin-bottom: 0; }
  .kgr12-intro__text   { order: 2; }
  .kgr12-intro__accent {margin-bottom: 80px;} 

  .science-video-band { padding: 52px 0 60px; }
  .science-video-band__headline { margin-bottom: 8px; }

  .amr-compare { grid-template-columns: 1fr; gap: 32px; margin-bottom: 100px; }
  .amr-compare__text {order: 2;}
  .amr-about__desc {margin-bottom: 30px;}

  .ap-intro { grid-template-columns: 1fr; gap: 32px; margin-bottom: 0; }
  .ap-intro__text   { order: 2; }

  .prog-item { grid-template-columns: 1fr; gap: 28px; padding: 40px 0;  }
  .prog-item:last-child { padding-bottom:0;  }

  .prog-item__left { position: static; top: auto; }

  .prog-item__img-wrap { aspect-ratio: 16/10; }

  .effect-cards { max-width: 100%; grid-template-columns: 1fr;}
  .effect-cards2 {grid-template-columns: 1fr; max-width: 540px; margin: 0 auto;}

  .sub-hero__cta { flex-direction: column; align-items: flex-start; }
  .table-section {grid-template-columns: 1fr;}
  .mypath-intro__body {margin-bottom: 100px;}
  .ap-intro__body {margin-bottom: 100px;}
  .ap-video-meta {margin-bottom: 25px !important;}
    .amr-intro, .amr-intro_ri { grid-template-columns: 1fr;  gap: 28px;  margin-bottom: 50px;}
  .amr-intro__text { order: 1;}
  .amr-intro__img-wrap { order: 2;}
  .amr-intro__accent { margin-bottom: 16px; text-align: left;}
  .amr-intro__step { font-size: 18px; text-align: left;}
  .amr-intro__img { border-radius: 24px; }
  .amr-intro__body {text-align: left;}

  .table-section {grid-template-columns: 1fr; gap: 20px; margin-top: 36px; margin-bottom: 70px;}
  .table-card {padding: 24px 20px; border-radius: 24px;}
  .table-subtitle {font-size: 12px; margin-bottom: 6px;}
  .table-title {font-size: 24px; line-height: 1.3; margin-bottom: 14px;}
  .table-row {flex-direction: column; align-items: flex-start;gap: 4px; padding: 14px 0;}
  .table-row .en { font-size: 17px; line-height: 1.35; }
  .table-row .kr { font-size: 13px;  white-space: normal; line-height: 1.45;  }

}
.science-intro__body {padding-bottom: 80px;}
.science-video-band__brand {margin-bottom: 30px;}
.science-video-band__brand img {max-width: 180px;}
.science-video-band__caption {margin: 40px 0 0;}
.prog-item__body {margin-bottom: 8px;}
.edutech-band__logos {gap: 10px; justify-content:space-around; align-content: space-around;}
.effect-card-01 {margin-bottom: 0;}

/* ap 프로그램안내 */
.ap-video-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 16px;}
.ap-video-meta {margin-top: 20px; margin-bottom: 120px;}
.ap-badge {display: inline-block; padding: 5px 12px 4px; border-radius: 100px; background: #14532D; color: #fff; font-size: 16px; font-weight: 700; flex-shrink: 0; margin-bottom: 10px;}
.ap-video-meta__title {font-size: clamp(20px, 3vw, 22px); font-weight: 400; color: #333;}

.kgr12-video-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 120px;}
.kgr12-video-meta {margin-top: 20px; margin-bottom: 40px;}
.kgr12-badge {display: inline-block; padding: 5px 12px 4px; border-radius: 100px; background: #3B0764; color: #fff; font-size: 16px; font-weight: 700; flex-shrink: 0; margin-bottom: 10px;}
.kgr12-video-meta__title {font-size: clamp(20px, 3vw, 22px); font-weight: 400; color: #333;}

.ap-feature-cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.ap-feature-card {background: var(--c-bg); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.07);}

.ap-feature-card__img-wrap {aspect-ratio: 16/6; overflow: hidden;}
.ap-feature-card__img-wrap img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease;}

.ap-feature-card__body { padding: 30px 35px 35px; }
.ap-feature-card__title {font-size: clamp(18px, 2vw, 22px); font-weight: 700; color:  var(--c-text-600); margin-bottom: 10px;}
.ap-feature-card__text { font-size: clamp(16px, 2vw, 18px); color:  var(--c-text-400); line-height: 1.6;}

/* ════════════════════════════════════════════════════════════


/* ════════════════════════════════════════════════════════════
   SUB-PAGE — SAT (Edgenuity)
   포인트 컬러: --sat-orange: #E8531A  /  --sat-navy: #0E1B3D
   ════════════════════════════════════════════════════════════ */

:root {
  --sat-orange   : #E8531A;
  --sat-orange-dk: #c94415;
  --sat-navy     : #0E1B3D;
  --sat-navy-lt  : #162547;
}

.sat-brand {font-size: clamp(22px, 3.5vw, 50px); font-weight: 900; color: #fff; line-height: 1.2; letter-spacing: -.02em; margin-bottom: 18px;}
.sat-brand span { color: var(--sat-orange); }

.btn-primary-sat {display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; font-size: 14px; font-weight: 700; color: #fff; background: var(--sat-orange); border-radius: 100px;
  border: 2px solid var(--sat-orange); cursor: pointer; font-family: var(--font); transition: filter .2s ease, transform .2s ease; text-decoration: none;}
.btn-primary-sat:hover {filter: brightness(1.1); transform: translateY(-2px);}

/* ── SAT 탭 오렌지 언더라인 ── */

/* ── SAT 섹션 공통 ── */
.sat-section--navy  { padding: 140px 0; background: var(--sat-navy); }
.sat-dot-accent--orange { background: var(--sat-orange); }
.sat-title--white       { color: #fff; }
.sat-subtitle--orange   { color: var(--sat-orange); }

.pci-section--red {padding: 140px 0; background: linear-gradient(to bottom, #660009 0%, #420006 100%);}
.pci-cards {display: grid; grid-template-columns: repeat(2, auto); gap: 24px; justify-content: center; align-items: center; margin-bottom: 35px;}
.pci-cards img {border-radius: 30px; max-height: 390px; width: auto; display: block;}

.pci-title {display: flex; align-items: center; justify-content: center; gap: 16px; text-align: center; margin-bottom: 50px;}
.pci-title img {width: 56px; height: auto; flex-shrink: 0;}
.pci-title-txt {margin: 0; color: #fff; font-weight: 700; line-height: 1.4; font-size: clamp(26px, 2.2vw, 36px);}

.pci-feature-cards {display: flex; justify-content: center; gap: 24px; flex-wrap: wrap;}
.pci-feature-card {background: #2F0004; border: 1px solid #2A0004; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); border-radius: 30px; padding: 60px 30px; max-width: 460px; width: 100%; text-align: center;}
.pci-feature-card__body {display: flex; flex-direction: column; gap: 16px;}
.pci-feature-card__title {margin: 0; color: #fff; font-size: clamp(20px, 1.5vw, 24px); font-weight: 700; line-height: 1.4;}
.pci-feature-card__text {margin: 0; color: rgba(255, 255, 255, 0.8); font-size: clamp(16px, 1.2vw, 20px); font-weight: 400; line-height: 1.7;}

/* ── SAT란? ── */
.sat-about{font-size: clamp(20px, 1.4vw, 24px); color: var(--c-text-200); line-height: 1.6; text-align: center; margin: 0 auto 72px;}
.sat-about strong { color: var(--c-text); }

.sat-sub-title {font-size: clamp(18px, 1.7vw, 22px); font-weight: 800; color: var(--c-text); text-align: center; letter-spacing: -.02em; margin-bottom: 10px;}
.sat-sub-desc {font-size: clamp(16px, 1.7vw, 18px); color: var(--c-text-400); text-align: center; line-height: 1.7; margin-bottom: 40px;}

.sat-sub-img {display: block; margin: 0 auto; max-width: 800px; height: auto;}

.sat-table-note {text-align: center; margin-top: 80px;}
.sat-table-note p {font-size: clamp(18px, 1.8vw, 24px); color: var(--c-text-600); line-height: 1.4;}
.sat-table-note strong { color: var(--c-text); }

/* ── SAT 준비의 착각 카드 ── */
.sat-trap-cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px;}
.sat-trap-card {background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.07); transition: transform .3s ease, box-shadow .3s ease;}
.sat-trap-card:hover {transform: translateY(-6px); box-shadow: 0 12px 36px rgba(0,0,0,.13);}
.sat-trap-card__bar {height: 5px; background: var(--sat-orange);}
.sat-trap-card__body { padding: 28px 24px 32px; }
.sat-trap-card__title {font-size: 18px; font-weight: 800; color: var(--c-text); margin-bottom: 12px; letter-spacing: -.01em;}
.sat-trap-card__text {font-size: 14px; color: var(--c-text-200); line-height: 1.85;}

/* ── 프로그램 (네이비) ── */
.sat-program__subtitle {font-size: clamp(15px, 1.4vw, 18px); color: rgba(255,255,255,.75); text-align: center; line-height: 1.7; margin-bottom: 56px;}
.sat-program__subtitle strong { color: #fff; }

.sat-video-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 16px;}

.sat-video-meta {margin-top: 20px; margin-bottom: 120px;}

.sat-badge {display: inline-block; padding: 5px 12px 4px; border-radius: 100px; background: var(--sat-orange); color: #fff; font-size: 16px; font-weight: 700; flex-shrink: 0; margin-bottom: 10px;}

.sat-video-meta__title {font-size: clamp(20px, 3vw, 22px); font-weight: 400; color: rgba(255,255,255,1);}

.sat-feature-cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.sat-feature-card {background: var(--c-bg); border-radius: 16px; overflow: hidden;}

.sat-feature-card__img-wrap {aspect-ratio: 16/6; overflow: hidden;}
.sat-feature-card__img-wrap img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease;}

.sat-feature-card__body { padding: 30px 35px 35px; }
.sat-feature-card__title {font-size: clamp(18px, 2vw, 22px); font-weight: 700; color:  var(--c-text-600); margin-bottom: 10px;}
.sat-feature-card__text { font-size: clamp(16px, 2vw, 18px); color:  var(--c-text-400); line-height: 1.6;}

/* ── Edgenuity 통계 (카운터) ── */
.sat-stats {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; /* 카드 사이 여백 */ margin-top: 48px;}
.map-stats {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; /* 카드 사이 여백 */ margin-top: 48px;}

/* 카드 */
.sat-stat {
  background: #fff;
  border-radius: 30px;
  padding: 70px 30px 50px;
  text-align: center;

  /* 그림자 */
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.06),
    0 2px 10px rgba(0, 0, 0, 0.04);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.map-stat {
  background: #fff;
  border-radius: 30px;
  padding: 70px 30px 50px;
  text-align: center;

  /* 그림자 */
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.06),
    0 2px 10px rgba(0, 0, 0, 0.04);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

/* 숫자 카운트 */
.sat-stat__num {font-size: clamp(48px, 5vw, 72px); font-weight: 900; color: var(--sat-orange); line-height: 1; margin-bottom: 25px; letter-spacing: -0.04em;}
.sat-stat__unit {font-size: clamp(24px, 2.4vw, 38px);}
.sat-stat__title {font-size: 22px; font-weight: 700; color: var(--c-text); margin-bottom: 14px; line-height: 1.4;}
.sat-stat__text {font-size: 18px; line-height: 1.6; color: var(--c-text-400);}

.map-stat__num {font-size: clamp(48px, 5vw, 68px); font-weight: 900; color: #3AB54A; line-height: 1; margin-bottom: 25px; letter-spacing: -0.04em;}
.map-stat__unit {font-size: clamp(24px, 2.4vw, 38px);}
.map-stat__title {font-size: 22px; font-weight: 700; color: var(--c-text); margin-bottom: 14px; line-height: 1.4;}
.map-stat__text {font-size: 18px; line-height: 1.6; color: var(--c-text-400);}

.map-about{font-size: clamp(18px, 2vw, 24px); color: var(--c-text-200); line-height: 1.6; text-align: center;}
.map-about strong { color: var(--c-text); }
.map-sub-img {display: block; margin: 0 auto; max-width: 560px; height: auto; padding: 20px 0 80px;}

.school-lists {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; /* 카드 사이 여백 */ margin-top: 48px; margin-bottom: 35px;}
.school-list {background: #fff; border-radius: 30px; padding: 70px 30px 50px; text-align: center;
  /* 그림자 */
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.06),
    0 2px 10px rgba(0, 0, 0, 0.04);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}
.school_title {font-size: 22px; font-weight: 700; color: var(--c-text); margin-bottom: 14px; line-height: 1.4;}
.school_area {font-size: 18px; font-weight: 700; color: #3AB54A; margin-bottom: 8px;}
.school {font-size: 16px; line-height: 1.6; color: var(--c-text-400);}
.school_desc {font-size: 18px; color: var(--c-text-400); text-align: center;}

/* ── CTA 오렌지 배너 ── */
.sat-cta-banner {
  position: relative;
  overflow: hidden;
  background-image: url('/images/sat/bg_bnr.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  min-height: 700px;
  display: flex;
  align-items: center;
  text-align: center;
}

/* 내부 컨텐츠 */
.sat-cta-banner .inner {position: relative; z-index: 2;}
.sat-cta-banner__title {font-size: clamp(24px, 3vw, 48px); font-weight: 400; color: #fff; line-height: 1.4; letter-spacing: -.02em; margin-bottom: 16px;}
.sat-cta-banner__title em {font-style: normal; background: #0A1F44; padding: 10px 12px 4px; font-weight: 700;}
.sat-cta-banner__title strong {color: #0A1F44;}
.sat-cta-banner__sub {font-size: clamp(18px, 2vw, 20px); color: #fff; margin-bottom: 40px;}

.sat-cta-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  background: var(--sat-navy);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  font-family: var(--font);

  transition:
    background .2s ease,
    transform .2s ease;
}

.sat-cta-banner__btn:hover {background: #0a1428; transform: translateY(-2px);}

/* ── SAT 반응형 — 태블릿 ── */
@media (max-width: 1199px) {
  .sat-trap-cards    { grid-template-columns: 1fr; max-width: 560px; margin: 8px auto 0; }
  .sat-video-grid    { grid-template-columns: 1fr; max-width: 680px; margin: 0 auto 16px; }
  .sat-feature-cards { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .sat-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .sat-stat {
    padding: 48px 16px 36px;
    border-right: none;
    border-bottom: none;
  }
  .sat-stat:last-child { border-bottom: none; }
  .sat-stat__title { font-size: 18px; }
  .sat-stat__text  { font-size: 15px; }

    .map-stats, .school-lists {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .map-stat {
    padding: 48px 16px 36px;
    border-right: none;
    border-bottom: none;
  }
  .map-stat:last-child { border-bottom: none; }
  .map-stat__title { font-size: 18px; }
  .map-stat__text  { font-size: 15px; }

  .sat-section--navy { padding: 100px 0; }

  .sat-compare-table th,
  .sat-compare-table td { padding: 12px 14px; font-size: 13px; }

  .ap-video-grid    { grid-template-columns: 1fr; max-width: 680px; margin: 0 auto 16px; }
  .ap-feature-cards { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }

  .kgr12-video-grid    { grid-template-columns: 1fr; max-width: 680px; margin: 0 auto 100px; }
}

/* ── SAT 반응형 — 모바일 ── */
@media (max-width: 767px) {
  .sat-section,
  .sat-section--light,
  .sat-section--navy { padding: 80px 0; }

  .sat-block { padding: 24px 16px; }

  .sat-compare-table th,
  .sat-compare-table td { padding: 10px; font-size: 12px; }
  .sat-compare-table tbody th { width: 72px; }

  .pci-section--red {padding: 100px 0;}
  .pci-cards {gap: 12px;}

  /* 모바일에서 통계는 1컬럼으로 전환 */
  .sat-stats , .map-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .sat-stat, .map-stat { padding: 36px 20px 28px; border-bottom: 1px solid var(--c-border); }
  .sat-stat:last-child, .map-stat:last-child { border-bottom: none; }

  .effect-card-sat { padding: 24px 24px 24px 50px;}
  .effect-card {padding: 24px 24px 24px 50px;}
  .map-sub-img {padding: 20px 35px 60px;}

  .map-stats, .school-lists {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .edutech-band2__logos {margin-top: 75px;}
}

/* 키보드 아래로 버튼 포커스 제거 */
.sub-tabs__btn, .modal__close-btn {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.sub-tabs__btn:focus, .modal__close-btn:focus {
  outline: none;
  box-shadow: none;
}