/* ==========================================================================
   시안 A — 메인홈 컴포넌트 스타일
   --------------------------------------------------------------------------
   의존: tokens.css → base.css → style.css 순서로 로드
   출처: Figma 시안 1_메인홈 (node 7319:2062)
   ========================================================================== */


/* ==========================================================================
   HEADER  (Figma 7323:1271 기본 / 7323:1311 메가메뉴 열림)
   --------------------------------------------------------------------------
   원본 실측
     전체 높이   141px (유틸 56 + 메인내비 84 + 헤어라인 1)
     그림자      0 3px 7px rgba(11,23,51,.1)
     유틸 바     h56 · bg #000A45 · px 48 · 우측 정렬
       버튼      90×33.75 · 보더 #9CD6F6 · 바깥쪽만 radius 12
                 Pretendard Medium 14px #004A8F
     메인 내비   h84 · bg white · px 48 · space-between
       로고      이미지 201.25×50 + gap 5 + "교육원" Bold 18.75px (tracking -0.0375)
       GNB       gap 72 · 항목 h84 · Bold 16.5px · tracking 0.2
                 활성 #0B3C86 / 비활성 #2A2E36
       utils     gap 20 · all-menu 24×24 · 로그인 89×46 radius 32 보더 #E8E8E8
                 로그인 라벨 SemiBold 16px #777
     헤어라인    1px #E6E9F0
     메가패널    h288 · bg white · 상단 헤어라인 1px #E6E9F0
       컬럼      w120 · 각 GNB 항목 아래 중앙 정렬 · 상단 여백 36
       항목      h42 · Regular 16px #555 · 가운데 정렬

   이전 헤더 대비 변경점
     · 로고 161×40 → 201×50, "교육원" 15px → 19px
     · 유틸 "교직원" → "타 사이트", 보더 #004A8F → #9CD6F6, Light → Medium
     · 로그인 라벨 13px → 16px
     · all-menu(3×3 도트) 버튼 신규
     · GNB 호버 시 텍스트 확대 + 메가패널 오픈
     · 활성 항목의 핑크 언더라인은 신규 시안에 없어 제거

   보정 사항
     · 16.5px → 17px, 18.75px → 19px, 33.75px → 34px 정수 정규화
     · 메가패널 서브메뉴 색 #555 → 토큰 --gray-600(#595757), 육안 차이 없음
     · 좌우 48px 고정 패딩 대신 1536 컨테이너 정렬(다른 섹션과 축 일치)
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--surface-default);
  box-shadow: var(--elev-header);
}

/* ---- 유틸리티 바 ---------------------------------------------------- */
.header__utility {
  background-color: var(--navy-950);          /* #000A45 */
}

.header__utility-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: var(--container-outer);
  height: 56px;
  margin-inline: auto;
  padding-inline: var(--space-15);            /* 48px */
}

.util-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 34px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);                /* 14px */
  font-weight: var(--font-medium);            /* 500 */
  line-height: var(--leading-none);
  color: var(--navy-550);                     /* #004A8F */
  background-color: var(--color-white);
  border: 1px solid var(--navy-200);          /* #B3D8F2 ≈ 시안 #9CD6F6 */
  transition: background-color 0.16s ease, color 0.16s ease;
}

/* 두 버튼이 맞붙어 하나의 알약 형태를 이룸 — 바깥쪽만 라운드 */
.util-btn--first {
  border-radius: var(--r-md) 0 0 var(--r-md);   /* 12px */
}

.util-btn--last {
  border-radius: 0 var(--r-md) var(--r-md) 0;
  border-left-width: 0;                       /* 보더 겹침 제거 */
}

.util-btn:hover {
  color: var(--color-white);
  background-color: var(--navy-550);
}

/* ---- 메인 내비게이션 ------------------------------------------------- */
/* 메가패널보다 위에 쌓여야 서브메뉴가 패널 배경에 가리지 않습니다 */
.header__main {
  position: relative;
  z-index: 2;
  background-color: var(--surface-default);
  border-bottom: 1px solid var(--navy-80);    /* #E6E9F0 헤어라인 */
}

.header__main-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-9);
  width: 100%;
  max-width: var(--container-outer);
  height: 84px;
  margin-inline: auto;
  padding-inline: var(--space-15);            /* 48px */
}

/* ---- 로고 ------------------------------------------------------------ */
.logo {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.logo__mark {
  width: 201px;
  height: 50px;
  object-fit: contain;
}

.logo__suffix {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);                    /* 20px (원본 18.75) */
  font-weight: var(--font-bold);
  letter-spacing: -0.04px;
  color: var(--color-black);
  white-space: nowrap;
}

.logo:hover { color: inherit; }

/* ---- GNB ------------------------------------------------------------- */
.gnb__list {
  display: flex;
  align-items: center;
  gap: 72px;
}

.gnb__item {
  position: relative;
}

.gnb__link {
  display: flex;
  align-items: center;
  height: 84px;
  font-family: var(--font-sans);
  font-size: var(--fs-md);                  /* 17px (원본 16.5) */
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wide);       /* 0.2px */
  line-height: var(--leading-none);
  color: var(--bluegray-750);                 /* #2A2E36 */
  white-space: nowrap;
  /* 호버 시 살짝 확대. transform 이라 이웃 항목 위치가 밀리지 않습니다. */
  transition: color 0.2s ease, transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.gnb__link:hover,
.gnb__item:hover .gnb__link {
  color: var(--color-brand);                  /* #0B3C86 */
  transform: scale(1.08);
}

.gnb__link.is-active {
  color: var(--color-brand);
}

/* ---- 메가메뉴 -------------------------------------------------------- */
/* 배경 패널. 서브메뉴는 각 .gnb__item 안에 있어 자동으로 열 정렬이 맞습니다. */
.header__mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  height: 288px;
  background-color: var(--surface-default);
  box-shadow: var(--elev-3);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s;
}

.header.is-mega-open .header__mega {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.gnb__sub {
  position: absolute;
  top: calc(100% + 1px);                      /* 헤어라인 1px 아래 */
  left: 50%;
  z-index: 3;
  width: 120px;
  margin-left: -60px;
  padding-top: 36px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s;
}

.header.is-mega-open .gnb__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.gnb__sub a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  font-family: var(--font-sans);
  font-size: var(--fs-md);                  /* 16px */
  font-weight: var(--font-regular);
  line-height: var(--leading-none);
  color: var(--gray-600);                     /* #595757 ≈ 시안 #555 */
  white-space: nowrap;
  border-radius: var(--r-sm);
  transition: color 0.16s ease, background-color 0.16s ease;
}

.gnb__sub a:hover {
  color: var(--color-brand);
  background-color: var(--surface-muted);     /* #EEF3FA */
}

/* ---- 우측 액션 ------------------------------------------------------- */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-9);                        /* 20px */
  flex-shrink: 0;
}

.allmenu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-brand);                  /* #0B3C86 */
  transition: color 0.16s ease, transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.allmenu-btn:hover { transform: scale(1.12); }

.allmenu-btn[aria-expanded="true"] {
  color: var(--navy-400);
  transform: rotate(45deg);
}

.login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);                        /* 2px */
  width: 89px;
  height: 46px;
  border: 1px solid var(--gray-120);          /* #E8E8E8 */
  border-radius: var(--r-full);           /* 32px */
  font-family: var(--font-sans);
  font-size: var(--fs-md);                  /* 16px */
  font-weight: var(--font-semibold);
  color: var(--text-subtle);                  /* #6E6E6E — AA 5.10:1 */
  transition: border-color 0.16s ease, color 0.16s ease;
}

.login-btn__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.login-btn:hover {
  color: var(--color-brand);
  border-color: var(--color-brand);
}

/* ---- 모바일 드로어 --------------------------------------------------- */
.mobile-nav {
  position: relative;
  z-index: 3;
  display: none;
  border-top: 1px solid var(--border-default);
  background-color: var(--surface-default);
  box-shadow: var(--elev-3);
}

.mobile-nav:not([hidden]) { display: block; }

.mobile-nav__link {
  display: block;
  padding: var(--space-7) var(--space-9);
  font-family: var(--font-sans);
  font-size: var(--fs-lg);                 /* 18px */
  font-weight: var(--font-bold);
  color: var(--bluegray-750);
  border-bottom: 1px solid var(--navy-80);
}

.mobile-nav__link.is-active {
  color: var(--color-brand);
  box-shadow: inset 3px 0 0 var(--color-brand-accent);
}

.mobile-nav__sub {
  padding: var(--space-4) 0 var(--space-6);
  background-color: var(--surface-subtle);    /* #F7F9FC */
  border-bottom: 1px solid var(--navy-80);
}

.mobile-nav__sub a {
  display: block;
  padding: var(--space-5) var(--space-14);    /* 10 / 40 */
  font-size: var(--fs-md);                  /* 16px */
  color: var(--gray-600);
}

.mobile-nav__sub a:hover { color: var(--color-brand); }

.mobile-nav__util {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-9);
}

.mobile-nav__util a {
  flex: 1;
  padding-block: var(--space-5);
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--font-medium);
  color: var(--navy-550);
  border: 1px solid var(--navy-550);
  border-radius: var(--r-sm);
}


/* ==========================================================================
   HEADER — RESPONSIVE
   --------------------------------------------------------------------------
   1024 이하 : GNB·메가메뉴를 숨기고 all-menu 버튼이 드로어를 엽니다.
               로그인 버튼은 라벨 빼고 46px 원형 아이콘만. 좌우 여백 48 → 24.
    768 이하 : 유틸 바 제거(드로어 하단으로 이동). 내비 높이 84 → 64.
               로고 201 → 150 축소.
    375 이하 : 로고 150 → 124, 좌우 여백 16. "교육원" 접미 텍스트 숨김.
   ========================================================================== */

@media (max-width: 1024px) {
  .header__utility-inner,
  .header__main-inner {
    padding-inline: var(--space-10);          /* 24px */
  }

  /* 메가메뉴는 데스크톱 전용 — 좁은 화면에서는 드로어가 대신합니다 */
  .gnb,
  .header__mega { display: none; }

  .login-btn {
    width: 46px;                              /* 아이콘 전용 원형 */
    padding: 0;
  }
  .login-btn__label { display: none; }

  .allmenu-btn {
    width: 44px;                              /* 터치 타깃 확보 */
    height: 44px;
  }
}

@media (max-width: 768px) {
  .header__utility { display: none; }         /* 드로어 하단으로 이동 */

  .header__main-inner {
    height: 64px;
    padding-inline: var(--space-9);           /* 20px */
  }

  .logo__mark { width: 150px; height: auto; }
  .logo__suffix { font-size: var(--fs-md); }

  .mobile-nav__sub a { padding-inline: var(--space-12); }   /* 32px */
}

@media (max-width: 375px) {
  .header__main-inner { padding-inline: var(--space-8); }  /* 16px */
  .logo__mark { width: 124px; }
  .logo__suffix { display: none; }
  .header__actions { gap: var(--space-6); }
}



/* ==========================================================================
   HERO  (Figma 7319:2093 "hero-image")
   --------------------------------------------------------------------------
   원본 실측 (1920 × 811)
     배경         사진 3장(image 639/642/643) 레이어 합성
                  → 합성 결과와 동일한 단일 원본(1584×672)으로 대체
     워시         사각형 292962 : x 555 (=28.91%) · w 1365 · h 811
                  linearGradient userSpaceOnUse (150.15,405.5)→(1331.3,775.857)
                    #2196F3 α0 → #00FCEF α0.2 @62.32% → #00FCEF α0.5 @100%
                  → CSS 107.41deg / 17.12% · 67.05% · 97.24% 로 정확 변환
     헤드라인     Pretendard Bold 100px white, 2줄
                  박스 x1202 y498 w369 h238 → 행간 119px (=1.19)
     페이지네이션 16px 원 4개 · gap 12 · 하단 30px · 가로 중앙

   보정 사항
     · 헤드라인을 좌표 대신 .container 우측 정렬로 배치 → 하위 섹션과 축 일치
     · 배경 사진 1.53MB PNG → WebP 61KB / JPEG 104KB 로 변환
     · 장식 라인아트(졸업장·대시) 제거 — 요청 반영
   ========================================================================== */

/* 헤더 실제 점유 높이 — 히어로 높이 계산에 사용.
   유틸 바(56) + 메인 내비(84) + 헤어라인(1) = 141px
   (신규 헤더 시안 7323:1271 의 프레임 높이 141 과 일치) */
.hero {
  --header-total: 141px;

  position: relative;
  overflow: hidden;
  background-color: var(--gray-100);          /* 이미지 로드 전 자리 */
  isolation: isolate;

  /* 시안 원본 811px 을 상한으로 두되, 세로가 짧은 화면에서는
     헤더를 제외한 첫 화면에 정확히 맞춥니다. 하한 420px. */
  height: 811px;                                                   /* fallback */
  height: clamp(420px, calc(100dvh - var(--header-total)), 811px);
}

/* ---- 배경 ------------------------------------------------------------ */
.hero__slides,
.hero__slide {
  position: absolute;
  inset: 0;
}

.hero__media,
.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__media img {
  object-fit: cover;
  object-position: center 40%;   /* 인물이 하단에 몰려 크롭될 때 얼굴 우선 */
}

/* ---- 청록 워시 ------------------------------------------------------- */
/* 원본은 좌측 28.91% 지점부터 시작하는 별도 사각형 */
.hero__wash {
  position: absolute;
  inset: 0 0 0 28.91%;
  pointer-events: none;
  background: linear-gradient(
    107.41deg,
    rgba(33, 150, 243, 0) 17.12%,
    rgba(0, 252, 239, 0.2) 67.05%,
    rgba(0, 252, 239, 0.5) 97.24%
  );
}

/* ---- 카피 ------------------------------------------------------------ */
/* 원본 헤드라인은 하단에서 75px 띄운 위치(y 736 / 높이 811)입니다.
   padding-top 퍼센트는 '폭' 기준이라 뷰포트마다 값이 튀므로,
   하단 정렬 + 고정 px 오프셋으로 바꿔 히어로 높이와 무관하게 맞춥니다. */
.hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: 100%;
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--space-15);
  padding-bottom: 75px;
}

.hero__headline {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);           /* GmarketSans */
  font-size: var(--fs-hero);             /* 100px */
  font-weight: var(--font-bold);
  line-height: 1.19;                          /* 실측 238px ÷ 2줄 ÷ 100px */
  color: var(--color-white);
  text-shadow: 0 2px 24px rgba(11, 23, 51, 0.25);
  white-space: nowrap;
}

/* ---- 페이지네이션 ----------------------------------------------------- */
.hero__pagination {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 1;
  display: flex;
  gap: var(--space-6);                        /* 12px */
  transform: translateX(-50%);
}

.hero__dot {
  width: 16px;
  height: 16px;
  border-radius: var(--r-full);
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.8);
  transition: background-color 0.18s ease, transform 0.18s ease;
}

/* 시각 크기는 시안값(16px)을 유지하고 히트 영역만 44px 로 넓힙니다 */
.hero__dot::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.hero__dot { position: relative; }

.hero__dot:hover { transform: scale(1.15); }

.hero__dot.is-active {
  background-color: var(--color-white);
}


/* ==========================================================================
   HERO — RESPONSIVE
   --------------------------------------------------------------------------
   원본 811px 고정 높이를 그대로 두면 좁은 화면에서 세로가 과합니다.
   높이를 뷰포트 비례로 줄이고 헤드라인을 clamp 로 축소합니다.

   1024 이하 : 높이 811 → 560. 헤드라인 100 → 64. 라인아트 숨김.
    768 이하 : 높이 560 → 420. 헤드라인 64 → 48. 카피 우측정렬 → 좌측정렬.
    375 이하 : 높이 420 → 340. 헤드라인 48 → 36. 페이지네이션 dot 16 → 10.
   ========================================================================== */

@media (max-width: 1024px) {
  .hero {
    height: 560px;                                                   /* fallback */
    height: clamp(360px, calc(100dvh - var(--header-total)), 560px);
  }
  .hero__copy { padding-inline: var(--space-10); padding-bottom: 60px; }
  /* 워시가 좁은 화면에서 카피를 덮지 않도록 시작점을 앞당김 */
  .hero__wash { inset: 0 0 0 10%; }
}

@media (max-width: 768px) {
  .hero {
    /* 768 이하는 유틸 바가 숨겨지고 내비 높이도 64px → 헤더 총 65px */
    --header-total: 65px;
    height: 420px;                                                   /* fallback */
    height: clamp(300px, calc(100dvh - var(--header-total)), 420px);
  }
  .hero__copy {
    justify-content: flex-start;
    padding-inline: var(--space-9);
    padding-bottom: 56px;
  }
  /* 좁은 화면에선 사진 위 대비를 더 확보 */
  .hero__headline { text-shadow: 0 2px 20px rgba(11, 23, 51, 0.45); }
  .hero__media img { object-position: 30% 40%; }      /* 인물 쪽으로 크롭 */
  .hero__wash { inset: 0; }
}

@media (max-width: 375px) {
  .hero {
    height: 340px;                                                   /* fallback */
    height: clamp(280px, calc(100dvh - var(--header-total)), 340px);
  }
  .hero__copy { padding-inline: var(--space-8); }
  .hero__pagination { bottom: 16px; gap: var(--space-4); }
  .hero__dot { width: 10px; height: 10px; }
}


/* ==========================================================================
   로그인 + 퀵메뉴  (Figma 7319:2347 "로그인_퀵메뉴_섹션")
   --------------------------------------------------------------------------
   원본 실측 (1920 × 532)
     섹션         bg #F7F9FC · px 240 · py 64  → 내부 1440 × 404
     좌우 배치    login-card 480  +  gap 40  +  quick-grid 920

     [login-card]  480×400 · bg white · 보더 #E1E7F0 · radius 16
                   shadow 0 6px 20px rgba(11,23,51,.06) · px 32 py 28 · gap 18
       제목        20px Bold #252A33 · tracking 0.2
       구분선      1px #E1E7F0
       입력영역    inputs(flex 1, gap 10) + gap 12 + btn-login 116×106
       input       h48 · radius 8 · 보더 #D1D9E5 · px 14
                   placeholder 13.5px #A8B0BA
       btn-login   bg #00428E · radius 8 · 15px Bold white · tracking 0.5
       체크박스    18×18 · radius 4 · 보더 1.4px #BFC7D4 · gap 8
                   라벨 13.5px #757D8A
       회원가입    flex 1 · h44 · radius 8 · 보더 1.2px #00428E
                   14px Bold #20599C · tracking 0.3
       찾기링크    13px #757D8A · 구분자 1×11 #E1E7F0 · gap 10
       간편로그인  라벨 14px Medium #252A33
       카카오 pill h42 · radius 21 · bg #FEE500 · 보더 #E1E7F0 · px 16 · gap 7
                   뱃지 24×24 원 bg #FAE100 · 로고 20.4
                   라벨 13.5px Medium #252A33
       네이버 pill h42 · radius 21 · bg #03C75A · px 16 · gap 7
                   로고 24 (흰 원 + #03C75A N) · 라벨 13.5px Medium white

     [quick-grid]  920×404 · 3열 × 2행 · gap 16
       카드        296×194 · bg white · 보더 #E1E7F0 · radius 14
                   shadow 0 4px 14px rgba(11,23,51,.05) · gap 14 · 중앙정렬
       아이콘칩    52×52 · radius 14 · bg #EEF3FA · 내부 아이콘 30×30
       라벨        15px Medium #252A33

   보정 사항
     · 퀵메뉴 6개를 JS 배열(QUICK_MENU)에서 렌더 — 항목 증감이 마크업 수정 없이 가능
     · 시안의 절대좌표 대신 flex/grid 로 재구성, 좌우 240px 은 .container 정렬로 통일
     · 13.5px → 14px, 1.2px/1.4px 보더 → 1px 정수 정규화
   ========================================================================== */

.quickzone {
  background-color: var(--surface-subtle);    /* #F7F9FC */
  padding-block: var(--section-py);           /* 80px */
}

.quickzone__inner {
  display: flex;
  align-items: stretch;
  gap: var(--space-14);                       /* 40px */
  width: 100%;
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--space-15);            /* 48px */
}

/* ==========================================================================
   로그인 카드
   ========================================================================== */
.login-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);                        /* 18px → 16px 정규화 */
  flex: 0 0 480px;
  padding: 28px var(--space-12);              /* 28 / 32 */
  background-color: var(--surface-default);
  border: 1px solid var(--border-default);    /* #E1E7F0 */
  border-radius: var(--r-md);           /* 16px */
  box-shadow: var(--elev-2);       /* 0 6px 20px rgba(11,23,51,.06) */
}

.login-card__title {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);                 /* 20px */
  font-weight: var(--font-bold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
}

.login-card__rule {
  border-top: 1px solid var(--border-default);
  margin: 0;
}

/* ---- 입력 영역 ------------------------------------------------------- */
.login-form {
  display: flex;
  align-items: stretch;
  gap: var(--space-6);                        /* 12px */
}

.login-form__fields {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-5);                        /* 10px */
  min-width: 0;
}

.field {
  height: 48px;
  padding-inline: var(--space-7);             /* 14px */
  font-family: var(--font-sans);
  font-size: var(--fs-sm);                /* 14px (원본 13.5) */
  color: var(--text-primary);
  background-color: var(--surface-default);
  border: 1px solid var(--navy-150);          /* #D1D9E5 */
  border-radius: var(--r-sm);            /* 8px */
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.field::placeholder { color: var(--text-muted); }      /* #5F7180 — AA 5.05:1 */

.field:focus {
  border-color: var(--navy-600);
  box-shadow: 0 0 0 3px rgba(0, 66, 142, 0.12);
  outline: none;
}

.login-form__submit {
  flex: 0 0 116px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);                  /* 15px */
  font-weight: var(--font-bold);
  letter-spacing: 0.5px;
  color: var(--text-on-brand);
  background-color: var(--navy-600);          /* #00428E */
  border-radius: var(--r-sm);
  transition: background-color 0.16s ease;
}

.login-form__submit:hover { background-color: var(--navy-700); }

/* ---- 체크박스 -------------------------------------------------------- */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);                        /* 8px */
  cursor: pointer;
}

.checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox__box {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: var(--surface-default);
  border: 1px solid var(--navy-200);          /* #BFC7D4 (원본 1.4px) */
  border-radius: var(--r-sm);            /* 4px */
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

.checkbox__box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.16s ease;
}

.checkbox__input:checked + .checkbox__box {
  background-color: var(--navy-600);
  border-color: var(--navy-600);
}

.checkbox__input:checked + .checkbox__box::after { transform: rotate(45deg) scale(1); }

.checkbox__input:focus-visible + .checkbox__box {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.checkbox__label {
  font-size: var(--fs-sm);                /* 14px (원본 13.5) */
  color: var(--text-secondary);               /* #5F7180 — AA 5.05:1 */
}

/* ---- 회원가입 / 찾기 -------------------------------------------------- */
.login-card__join {
  display: flex;
  align-items: center;
  gap: var(--space-8);                        /* 16px */
}

.btn-outline {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  height: 44px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);                /* 14px */
  font-weight: var(--font-bold);
  letter-spacing: 0.3px;
  color: var(--navy-450);                     /* #20599C */
  border: 1px solid var(--navy-600);          /* 원본 1.2px */
  border-radius: var(--r-sm);
  transition: background-color 0.16s ease, color 0.16s ease;
}

.btn-outline:hover {
  color: var(--text-on-brand);
  background-color: var(--navy-600);
}

.login-card__links {
  display: flex;
  align-items: center;
  gap: var(--space-5);                        /* 10px */
  flex-shrink: 0;
  font-size: var(--fs-xs);                  /* 13px */
  color: var(--text-secondary);             /* #5F7180 — AA 5.05:1 */
}

.login-card__links a:hover { color: var(--color-brand); }

.login-card__divider {
  width: 1px;
  height: 11px;
  background-color: var(--border-default);
}

/* ---- 간편 로그인 ------------------------------------------------------ */
.login-card__sns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.login-card__sns-label {
  font-size: var(--fs-sm);                /* 14px */
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.login-card__pills {
  display: flex;
  gap: var(--space-5);                        /* 10px */
}

.sns-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding-inline: var(--space-8);             /* 16px */
  border-radius: var(--r-full);          /* 원본 21 = 높이의 절반 */
  font-size: var(--fs-sm);                /* 14px (원본 13.5) */
  font-weight: var(--font-medium);
  white-space: nowrap;
  transition: filter 0.16s ease;
}

.sns-pill:hover { filter: brightness(0.95); }

.sns-pill--kakao {
  background-color: var(--color-kakao);       /* #FEE500 */
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}

.sns-pill--kakao:hover { color: var(--text-primary); }

.sns-pill__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: var(--color-kakao-alt);   /* #FAE100 */
  border-radius: var(--r-full);
}

.sns-pill__badge img { width: 21px; height: 21px; }

.sns-pill--naver {
  background-color: var(--color-naver);       /* #03C75A */
  color: var(--color-white);
}

.sns-pill--naver:hover { color: var(--color-white); }

.sns-pill__logo { width: 24px; height: 24px; flex-shrink: 0; }

/* ==========================================================================
   퀵메뉴
   ========================================================================== */
.quickmenu {
  flex: 1 1 auto;
  min-width: 0;
}

.quickmenu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--space-8);                        /* 16px */
  height: 100%;
}

.quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);                        /* 14px */
  height: 100%;
  min-height: 194px;
  background-color: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);                 /* 14px */
  box-shadow: var(--elev-1);             /* 0 4px 14px rgba(11,23,51,.05) */
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.quick-card:hover {
  transform: translateY(-4px);
  border-color: var(--navy-300);
  box-shadow: var(--elev-2);
  color: inherit;
}

.quick-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  background-color: var(--surface-muted);     /* #EEF3FA */
  border-radius: var(--r-md);
}

.quick-card__icon img { width: 30px; height: 30px; }

.quick-card__label {
  font-size: var(--fs-sm);                  /* 15px */
  font-weight: var(--font-medium);
  color: var(--text-primary);
}


/* ==========================================================================
   로그인 + 퀵메뉴 — RESPONSIVE
   --------------------------------------------------------------------------
   1024 이하 : 좌우 2단(480+920) → 세로 1단. 로그인 카드가 위, 퀵메뉴가 아래.
               퀵메뉴는 3열 유지(가로가 아직 넉넉함), 카드 최소높이 194→150.
    768 이하 : 퀵메뉴 3열 → 2열. 로그인 폼의 [입력 2줄 + 우측 버튼] 가로배치를
               세로배치로 전환(버튼이 전폭). 회원가입/찾기링크도 세로 분리.
    375 이하 : 퀵메뉴 2열 유지(1열은 세로가 너무 길어짐). 카드 최소높이 150→120,
               아이콘칩 52→44. 간편로그인 라벨/pill 세로 분리.
   ========================================================================== */

@media (max-width: 1024px) {
  .quickzone__inner {
    flex-direction: column;
    padding-inline: var(--space-10);           /* 24px */
  }

  .login-card { flex: 0 0 auto; }

  .quick-card { min-height: 150px; }
}

@media (max-width: 768px) {
  .quickzone { padding-block: var(--section-py-md); }   /* 56px */

  .quickzone__inner { padding-inline: var(--space-9); } /* 20px */

  /* 입력 2줄 + 우측 세로버튼 → 전부 세로 스택 */
  .login-form { flex-direction: column; }
  .login-form__submit {
    flex: 0 0 48px;
    width: 100%;
  }

  .login-card__join {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
  }
  .login-card__links { justify-content: center; }

  .quickmenu__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 375px) {
  .quickzone { padding-block: var(--section-py-sm); }    /* 40px */
  .quickzone__inner { padding-inline: var(--space-8); } /* 16px */

  .login-card {
    padding: var(--space-9) var(--space-8);            /* 20 / 16 */
    gap: var(--space-7);
  }

  /* 라벨과 pill 이 한 줄에 안 들어감 */
  .login-card__sns {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }
  .login-card__pills { width: 100%; }
  .sns-pill { flex: 1 1 0; justify-content: center; }

  .quick-card {
    min-height: 120px;
    gap: var(--space-5);
  }
  .quick-card__icon { width: 44px; height: 44px; }
  .quick-card__icon img { width: 24px; height: 24px; }
  .quick-card__label { font-size: var(--fs-sm); }
}


/* ==========================================================================
   상담문의 밴드  (Figma 7319:2432 ~ 7319:2447)
   --------------------------------------------------------------------------
   원본 실측 (1920 × 250)
     좌 패널      1240×250 · linear-gradient(to bottom, #101828 → #07174A)
     우 패널      680×250 · #616974  ← 이미지 슬롯(시안은 회색 플레이스홀더)
     "상담문의"   Pretendard Bold 48px white · leading 1.439 · x 253.7
     전화 행      x 513 · gap 27 · 아이콘 46×46 · 번호 Bold 48px white
     분류 pill    417×36 · bg #2196F3 (렌더 픽셀 샘플링으로 확인) · radius 8
                  텍스트 Pretendard Medium 20px #1B1B1E
     운영시간     Pretendard Medium 14px rgba(255,255,255,0.8)

   보정 사항
     · 좌/우 패널 1240:680 비율 유지하되 절대좌표 → flex 로 재구성
     · 좌 패널 내부 콘텐츠를 다른 섹션과 같은 축(좌측 240px)에 맞춤
     · 우측 이미지 슬롯은 시안의 #616974 유지 — 실사진 확보 시 교체
   ========================================================================== */

.contact-band {
  display: flex;
  min-height: 250px;
}

.contact-band__body {
  display: flex;
  align-items: center;
  flex: 1 1 1240px;
  background: linear-gradient(to bottom, var(--bluegray-900), var(--navy-900));

  /* 좌측 여백을 다른 섹션의 컨테이너 축과 정확히 맞춥니다.
     퍼센트는 부모(.contact-band = 전체 폭) 기준으로 해석되므로
     (뷰포트 - 1440) / 2 = 다른 섹션의 좌측 여백과 같은 값이 나옵니다.
       1920 → max(48, 240) = 240   1600 → max(48, 80) = 80
       1440 → max(48,   0) =  48   1200 → max(48, -120) = 48 */
  padding-left: max(var(--space-15), calc((100% - var(--container-max)) / 2));
}

.contact-band__inner {
  display: flex;
  align-items: center;
  gap: 68px;
  width: 100%;
  min-width: 0;
  padding-right: var(--space-9);
}

.contact-band__title {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);              /* 48px */
  font-weight: var(--font-bold);
  line-height: var(--leading-normal);
  color: var(--color-white);
}

.contact-band__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.contact-band__tel {
  display: inline-flex;
  align-items: center;
  gap: 27px;
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);              /* 48px */
  font-weight: var(--font-bold);
  line-height: var(--leading-normal);
  letter-spacing: -0.02em;
  color: var(--color-white);
}

.contact-band__tel:hover { color: var(--navy-300); }

.contact-band__tel img {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}

/* 아이콘(46) + gap(27) = 73px 들여써서 전화번호 글자와 좌측을 맞춥니다. */
.contact-band__scope {
  align-self: flex-start;
  margin-left: 73px;
  padding: var(--space-3) var(--space-9);
  font-family: var(--font-sans);
  font-size: var(--fs-lg);               /* 20px */
  font-weight: var(--font-medium);
  line-height: var(--leading-none);
  color: var(--gray-800);                   /* #1B1B1E */
  background-color: var(--color-info);      /* #2196F3 */
  border-radius: var(--r-sm);          /* 8px */
}

.contact-band__hours {
  margin-left: 73px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);              /* 14px */
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: rgba(255, 255, 255, 0.8);
}

/* ---- 우측 프로모션 배너 -----------------------------------------------
   시안은 #616974 회색 플레이스홀더 상태였습니다. 실사진이 없어 임의 제작한
   CSS 전용 배너로 채웠습니다(추가 이미지 요청 없음).
   좌측 밴드가 어두운 네이비라, 우측은 같은 계열의 밝은 블루 그라데이션으로
   대비를 주되 색상 계열은 브랜드 안에서 유지했습니다.
   ---------------------------------------------------------------------- */
.promo-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-3);
  flex: 1 1 680px;
  min-width: 0;
  padding: var(--space-12) var(--space-14);   /* 32 / 40 */
  overflow: hidden;
  color: var(--color-white);
  background:
    radial-gradient(120% 140% at 88% 12%, rgba(0, 252, 239, 0.38) 0%, rgba(0, 252, 239, 0) 55%),
    linear-gradient(115deg, var(--navy-600) 0%, var(--navy-400) 58%, var(--navy-300) 100%);
  isolation: isolate;
}

/* 장식 원 — 시안의 여백감을 살리는 용도 */
.promo-banner::before,
.promo-banner::after {
  content: "";
  position: absolute;
  border-radius: var(--r-full);
  pointer-events: none;
  z-index: -1;
}

.promo-banner::before {
  right: -60px;
  top: -70px;
  width: 260px;
  height: 260px;
  background: rgba(255, 255, 255, 0.08);
}

.promo-banner::after {
  right: 96px;
  bottom: -110px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.promo-banner__label {
  padding: 5px var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);                  /* 13px */
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  line-height: var(--leading-none);
  color: var(--navy-700);
  background-color: var(--color-white);
  border-radius: var(--r-full);
}

.promo-banner__headline {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);           /* GmarketSans */
  font-size: var(--fs-xl);                 /* 40px */
  font-weight: var(--font-bold);
  line-height: 1.24;
  letter-spacing: -0.01em;
}

.promo-banner__headline em {
  font-style: normal;
  color: var(--color-kakao);                  /* #FEE500 — 할인율 강조 */
}

.promo-banner__period {
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);                /* 14px */
  font-weight: var(--font-medium);
  color: rgba(255, 255, 255, 0.82);
}

.promo-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-9);
  font-family: var(--font-sans);
  font-size: var(--fs-md);                  /* 16px */
  font-weight: var(--font-semibold);
  line-height: var(--leading-none);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--r-full);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.promo-banner__cta svg { transition: transform 0.18s ease; }

.promo-banner:hover { color: var(--color-white); }

.promo-banner:hover .promo-banner__cta {
  color: var(--navy-700);
  background-color: var(--color-white);
  border-color: var(--color-white);
}

.promo-banner:hover .promo-banner__cta svg { transform: translateX(3px); }


/* ==========================================================================
   상담문의 밴드 — RESPONSIVE
   --------------------------------------------------------------------------
   1024 이하 : 우측 이미지 슬롯 제거(정보 없는 장식이라 좁은 화면에선 낭비).
               좌 패널 전폭, 제목/전화 가로배치 → 세로 스택.
    768 이하 : 전화번호 48 → 32. 분류 pill 20 → 16, 들여쓰기 73 → 0.
    375 이하 : 전화번호 32 → 26, 제목 36 → 32.
   ========================================================================== */

@media (max-width: 1024px) {
  /* 배너를 숨기지 않고 밴드 아래로 쌓습니다 (프로모션이라 정보 가치가 있음) */
  .contact-band { flex-direction: column; }

  .contact-band__body { flex: 1 1 auto; }

  .promo-banner {
    flex: 1 1 auto;
    min-height: 200px;
    padding: var(--space-12) var(--space-10);
  }

  /* 세로 스택 구간에서는 좌측 정렬 보정이 필요 없으므로 해제 */
  .contact-band__body { padding-left: 0; }

  .contact-band__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-9);
    max-width: var(--container-outer);
    margin-inline: auto;
    padding-block: var(--space-14);
    padding-inline: var(--space-10);
  }
}

@media (max-width: 768px) {
  .contact-band__inner {
    padding-block: var(--space-12);
    padding-inline: var(--space-9);
  }

  .contact-band__tel { gap: var(--space-7); }
  .contact-band__tel img { width: 36px; height: 36px; }

  .contact-band__scope {
    margin-left: 0;
    font-size: var(--fs-md);                           /* 16px */
    white-space: normal;
  }
  .contact-band__hours { margin-left: 0; }

  .promo-banner {
    padding: var(--space-12) var(--space-9);
    min-height: 180px;
  }
  .promo-banner__headline { font-size: var(--fs-xl); }  /* 28px */
  .promo-banner::after { display: none; }
}

@media (max-width: 375px) {
  .contact-band__title { font-size: var(--fs-xl); }   /* 32px */
  .contact-band__tel img { width: 30px; height: 30px; }
  .contact-band__scope { font-size: var(--fs-sm); }
  .contact-band__hours { font-size: var(--fs-xs); }

  .promo-banner { padding: var(--space-10) var(--space-8); }
  .promo-banner__cta { width: 100%; justify-content: center; }
}


/* ==========================================================================
   모집중인 과정  (Figma 7319:2124 / 2285 / 2288 / 2294)
   --------------------------------------------------------------------------
   원본 실측
     제목        "모집중인 " #131314 + "과정" #00428E · Pretendard Bold 48px
     리드        Pretendard Regular 20px #595757 (강조만 SemiBold)
     더보기      125×42 · radius 32 · bg #364153 · 18px SemiBold #FEFEFE
     카테고리 탭 세로 스택 · gap 12 · h42 · radius 32 · px 20
                 활성 bg #0663C3 / 18px SemiBold #FEFEFE
                 비활성 bg white / #999 · shadow 0 0 16.4px rgba(20,72,157,.08)
     카드 행     gap 40 · 카드 330×365 · shadow 0 5px 5px rgba(0,0,0,.1)
       썸네일    330×230 · radius top 20
       본문      330×135 · bg white · px 32 py 18 · radius bottom 20
       뱃지      radius 6 · bg #368BEE · 13px Medium white
       제목      Pretendard Bold 20px black · leading 1.439
       학습시간  아이콘 16 + 14px #111
       가격      원가 14px line-through #999 / 판매가 14px Bold #FC1C49

   보정 사항
     · 카드 5장을 JS 배열(COURSES)에서 렌더 — 탭 전환 시 데이터만 갈아끼우면 됨
     · 시안의 카드 행은 1810px 로 우측이 잘린 캐러셀 → 가로 스크롤 + 스냅으로 구현
     · 탭은 세로 스택 유지, 1024 이하에서 가로 스크롤 칩으로 전환
   ========================================================================== */

.courses {
  padding-block: var(--section-py);                 /* 80 — 비대칭 제거 */
  background-color: var(--surface-default);
}

.courses__inner {
  width: 100%;
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--space-15);
}

.courses__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-9);
  margin-bottom: var(--space-14);            /* 40px */
}

.courses__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);                       /* 6px */
}

.courses__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);               /* 48px */
  font-weight: var(--font-bold);
  line-height: var(--leading-normal);
  color: var(--gray-850);                    /* #131314 */
}

.courses__title em {
  font-style: normal;
  color: var(--navy-600);                    /* #00428E */
}

.courses__lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);                /* 20px */
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--gray-600);                    /* #595757 */
}

.courses__lead strong { font-weight: var(--font-semibold); }

/* ---- pill 버튼 (더보기) ----------------------------------------------- */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 42px;
  padding-inline: var(--space-9);            /* 20px */
  font-family: var(--font-sans);
  font-size: var(--fs-lg);                /* 18px */
  font-weight: var(--font-semibold);
  line-height: 24px;
  border-radius: var(--r-full);          /* 32px */
  white-space: nowrap;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.btn-pill--dark {
  min-width: 125px;
  color: #FEFEFE;
  background-color: var(--bluegray-700);     /* #364153 */
  box-shadow: var(--elev-1);
}

.btn-pill--dark:hover {
  color: #FFFFFF;
  background-color: var(--bluegray-900);
}

/* ---- 본문 레이아웃 ---------------------------------------------------- */
.courses__body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-14);                      /* 40px */
}

/* ---- 카테고리 탭 ------------------------------------------------------ */
.courses__filters { flex-shrink: 0; }

.course-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                       /* 12px */
}

.course-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  padding-inline: var(--space-9);            /* 20px */
  font-family: var(--font-sans);
  font-size: var(--fs-lg);                /* 18px */
  font-weight: var(--font-semibold);
  line-height: 24px;
  color: var(--text-subtle);                 /* #6E6E6E — AA 5.10:1 (시안 #999) */
  background-color: var(--surface-default);
  border-radius: var(--r-full);          /* 32px */
  box-shadow: var(--elev-1);            /* 0 0 16px rgba(20,72,157,.08) */
  white-space: nowrap;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.course-tab:hover { color: var(--navy-400); }

.course-tab.is-active {
  color: #FEFEFE;
  background-color: var(--navy-400);         /* #0663C3 */
  box-shadow: var(--elev-1);
}

/* ---- 카드 캐러셀 ------------------------------------------------------ */
.courses__carousel {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- 캐러셀 이동 버튼 -------------------------------------------------
   카드 위에 겹쳐 띄웁니다. 스크롤이 끝에 닿으면 disabled 로 흐려집니다.
   ---------------------------------------------------------------------- */
.carousel-btn {
  position: absolute;
  top: 115px;                                /* 썸네일(230) 세로 중앙 */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--bluegray-700);
  background-color: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  box-shadow: var(--elev-1);
  transition: background-color 0.16s ease, color 0.16s ease,
              opacity 0.16s ease, transform 0.16s ease;
}

.carousel-btn--prev { left: -24px; }
.carousel-btn--next { right: -8px; }

.carousel-btn:hover:not(:disabled) {
  color: var(--color-white);
  background-color: var(--navy-400);
  border-color: var(--navy-400);
  transform: scale(1.06);
}

.carousel-btn:disabled {
  opacity: 0;
  pointer-events: none;
}

/* 축소된 브레이크포인트에서도 히트 영역 44px 유지 */
.carousel-btn::after,
.event-zone__page::after,
.section-head__more::after,
.util-btn::after,
.allmenu-btn::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}

.carousel-btn,
.event-zone__page,
.section-head__more,
.util-btn,
.allmenu-btn { position: relative; }

/* 그림자 잘림 방지 --------------------------------------------------------
   overflow-x: auto 를 지정하면 CSS 사양상 overflow-y 의 visible 이 auto 로
   계산되어 세로 방향도 클리핑됩니다. 그래서 카드의 drop-shadow 와
   hover 시 translateY(-6px) 가 위아래로 잘렸습니다.

   스크롤포트 안쪽에 그림자만큼 패딩을 만들고, 같은 크기의 음수 마진으로
   상쇄해 시각 위치는 그대로 유지합니다.
     위쪽  : hover 이동 6px + (blur 14 - offset 10) 4px = 10px → 16px 확보
     아래쪽 : offset 10 + blur 14 = 24px            → 30px 확보
     왼쪽  : blur 14px                              → 16px 확보
   scroll-padding-left 는 padding-left 와 맞춰야 첫 카드가 scrollLeft:0 에서
   정확히 스냅됩니다.
   ------------------------------------------------------------------------ */
.course-list {
  display: flex;
  gap: var(--space-14);                      /* 40px */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;

  padding-block: 16px 30px;
  margin-block: -16px -30px;
  padding-left: 16px;
  margin-left: -16px;
  padding-right: var(--space-15);            /* 마지막 카드 뒤 여백 (상쇄 안 함) */

  cursor: grab;
}

.course-list::-webkit-scrollbar { display: none; }

/* ---- 마우스 드래그로 넘기기 -------------------------------------------
   터치는 네이티브 스크롤을 그대로 쓰고, 마우스일 때만 JS 로 처리합니다.
   드래그 중에는 스냅을 꺼야 scrollLeft 직접 조작이 튀지 않습니다.
   ---------------------------------------------------------------------- */
.course-list.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

/* 이미지·링크의 네이티브 드래그(고스트 이미지)를 막습니다 */
.course-list img,
.course-card__link {
  -webkit-user-drag: none;
  user-select: none;
}

.course-card {
  flex: 0 0 330px;
  scroll-snap-align: start;
}

.course-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--surface-default);
  border-radius: var(--r-lg);          /* 20px */
  box-shadow: var(--elev-1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.course-card__link:hover {
  transform: translateY(-6px);
  box-shadow: var(--elev-2);
  color: inherit;
}

.course-card__thumb {
  height: 230px;
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.course-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);                       /* 12px */
  min-height: 135px;
  padding: var(--space-8) var(--space-12);   /* 16 / 32 */
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.course-badge {
  display: inline-flex;
  align-items: center;
  height: 23px;
  padding-inline: var(--space-4);
  font-size: var(--fs-xs);                 /* 13px */
  font-weight: var(--font-medium);
  color: var(--color-white);
  border-radius: var(--r-sm);           /* 6px */
  white-space: nowrap;
}

.course-badge--online { background-color: var(--navy-300); }   /* #368BEE */
.course-badge--type   { background-color: var(--navy-600); }

.course-card__title {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);                /* 20px */
  font-weight: var(--font-bold);
  line-height: var(--leading-normal);
  color: var(--color-black);
}

.course-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  margin-top: auto;
}

.course-card__hours {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);                       /* 4px */
  font-size: var(--fs-sm);               /* 14px */
  color: var(--gray-900);                    /* #111 */
}

.course-card__price {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);                       /* 6px */
  font-size: var(--fs-sm);
  white-space: nowrap;
}

/* 취소선 원가 — 판매가(#FC1C49) 대비 충분히 뒤로 물러나면서 AA 유지 */
.course-card__price del { color: var(--text-subtle); }       /* #6E6E6E — 5.10:1 */

.course-card__price strong {
  font-weight: var(--font-bold);
  color: var(--text-price);                  /* #FC1C49 */
}


/* ==========================================================================
   모집중인 과정 — RESPONSIVE
   --------------------------------------------------------------------------
   1024 이하 : 좌측 세로 탭 → 상단 가로 스크롤 칩. 제목 48 → 36.
               카드는 캐러셀 유지(330px 고정).
    768 이하 : 제목 36 → 28. 더보기 버튼을 제목 우측 → 아래 좌측으로.
               카드 330 → 280, 썸네일 230 → 196.
    375 이하 : 카드 280 → 260, 썸네일 196 → 180, 본문 padding 32 → 16.
   ========================================================================== */

@media (max-width: 1024px) {
  .courses { padding-block: var(--section-py-md); }
  .courses__inner { padding-inline: var(--space-10); }

  .courses__lead { font-size: var(--fs-lg); }           /* 18px */

  .courses__body { flex-direction: column; gap: var(--space-10); }

  .courses__filters { width: 100%; }

  .course-tabs {
    flex-direction: row;
    gap: var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .course-tabs::-webkit-scrollbar { display: none; }

  .course-tab {
    width: auto;
    height: 38px;
    font-size: var(--fs-md);                             /* 16px */
  }

  .courses__carousel { width: 100%; }
  .course-list { padding-right: var(--space-10); }

  /* 좌우 여백이 없어 밖으로 못 빼므로 카드 위로 들여서 배치 */
  .carousel-btn--prev { left: 4px; }
  .carousel-btn--next { right: 4px; }
}

@media (max-width: 768px) {
  .courses { padding-block: var(--section-py-md); }
  .courses__inner { padding-inline: var(--space-9); }

  .courses__head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
    margin-bottom: var(--space-10);
  }

  .courses__title { font-size: var(--fs-xl); }          /* 28px */
  .courses__lead { font-size: var(--fs-md); }            /* 16px */

  .btn-pill--dark { order: 1; align-self: flex-start; }

  .course-card { flex-basis: 280px; }
  .course-card__thumb { height: 196px; }
  .course-card__body { padding: var(--space-8) var(--space-9); }
  .course-list { gap: var(--space-10); padding-right: var(--space-9); }

  /* 터치 스와이프가 주 조작이라 버튼은 축소 */
  .carousel-btn { width: 40px; height: 40px; top: 98px; }
}

@media (max-width: 375px) {
  .courses { padding-block: var(--section-py-sm); }      /* 40px */
  .courses__inner { padding-inline: var(--space-8); }

  .course-card { flex-basis: 260px; }
  .course-card__thumb { height: 180px; }
  .course-card__body { padding: var(--space-7) var(--space-8); gap: var(--space-5); }
  .course-card__title { font-size: var(--fs-lg); }      /* 18px */
  .course-list { gap: var(--space-8); padding-right: var(--space-8); }

  /* 375에서는 카드 폭이 좁아 버튼이 콘텐츠를 가림 → 스와이프만 사용 */
  .carousel-btn { display: none; }
}


/* ==========================================================================
   공지사항 + Event Zone  (Figma 7319:2295 "Frame 2147221496")
   --------------------------------------------------------------------------
   원본 실측 (1440 × 630)
     좌 컬럼      800 wide  (공지 카드 2×2)
     우 컬럼      597.18 wide, x 842.82  → 컬럼 간격 42.82
     헤더
       "Notice"   Pretendard Medium 14.4px #00428E
       "공지사항"  Pretendard Bold 48px #101828
       장식 원    64×64 #364153 (픽셀 샘플링 확인) @ x726
       "Event Zone"  Bold 48px — "Event" #131314 + " Zone" #00428E
     공지 카드    382.83 × 239.49 · bg #F5F5F4 · radius 10.712
       내부       x37.8 y41.39 · w309 · gap 16
       제목       Pretendard SemiBold 22.5px #111 · leading 1.402
       본문       Pretendard Regular 16.25px #555 · 2줄 클램프
       날짜       Pretendard Regular 16.25px #555
       열 간격 24 / 행 간격 46.5
     Event 배너   597.18 × 519.54 · 우하단 노치가 파인 형태
       카피       "2026 새학기" 48px / "신규 개강" 66px · GmarketSans Bold
                  세로 그라데이션 흰색 → #2196F3 / #005394 · tracking 4px
       페이저     48×48 · radius 32 · bg #364153 · 18px Bold white

   보정 사항
     · 공지 4건을 JS 배열(NOTICES)에서 렌더, Event 배너는 EVENT_SLIDES 로 슬라이드
     · 22.5→22, 16.25→16, 14.4→14, radius 10.712→12, 행 간격 46.5→48 정규화
     · 카드 제목/본문에 -webkit-line-clamp 2줄 적용 (원본은 고정 높이 + ellipsis)
   ========================================================================== */

.notice-zone {
  padding-block: var(--section-py);           /* 80px */
  background-color: var(--surface-default);
}

.notice-zone__inner {
  display: grid;
  grid-template-columns: minmax(0, 800fr) minmax(0, 597fr);
  gap: 43px;
  width: 100%;
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--space-15);
}

.notice-zone__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);                       /* 40px */
  min-width: 0;
}

/* ---- 섹션 헤더 -------------------------------------------------------- */
.section-head {
  position: relative;
  display: flex;
  flex-direction: column;
}

.section-head__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);                /* 14px (원본 14.4) */
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: var(--navy-600);                     /* #00428E */
}

.section-head__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);                /* 48px */
  font-weight: var(--font-bold);
  line-height: var(--leading-normal);
  color: var(--bluegray-900);                 /* #101828 */
}

/* Event Zone 헤더에는 "Notice" 같은 eyebrow 가 없어서 제목이 위로 붙습니다.
   eyebrow 한 줄 높이(14px × 1.4)만큼 내려 공지사항 제목과 축을 맞춥니다. */
.section-head--event {
  padding-top: calc(var(--fs-sm) * var(--leading-normal));   /* 19.6px */
}

.section-head--event .section-head__title { color: var(--navy-600); }
.section-head--event .section-head__title span { color: var(--gray-850); }

/* 더보기 버튼 — 시안의 Ellipse 156 (64×64 #364153) 안에 + 아이콘 */
.section-head__more {
  position: absolute;
  right: 10px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  color: var(--color-white);
  background-color: var(--bluegray-700);      /* #364153 */
  border-radius: var(--r-full);
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.section-head__more svg { transition: transform 0.25s ease; }

.section-head__more:hover {
  color: var(--color-white);
  background-color: var(--navy-600);
  transform: scale(1.06);
}

.section-head__more:hover svg { transform: rotate(90deg); }

/* ---- 공지 카드 -------------------------------------------------------- */
.notice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-10);                /* 24px */
  row-gap: var(--space-15);                   /* 48px (원본 46.5) */
}

.notice-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);                        /* 16px */
  height: 100%;
  min-height: 240px;
  padding: 40px 38px;
  background-color: var(--gray-40);           /* #F5F5F4 */
  border-radius: var(--r-md);            /* 12px (원본 10.712) */
  transition: background-color 0.18s ease, transform 0.18s ease,
              box-shadow 0.18s ease;
}

.notice-card__link:hover {
  transform: translateY(-3px);
  background-color: var(--surface-muted);     /* #EEF3FA */
  box-shadow: var(--elev-1);
  color: inherit;
}

.notice-card__title {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);                 /* 22px (원본 22.5) */
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);         /* 1.402 → 1.4 */
  color: var(--gray-900);                     /* #111 */

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notice-card__excerpt {
  font-family: var(--font-sans);
  font-size: var(--fs-md);                  /* 16px (원본 16.25) */
  font-weight: var(--font-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-subtle);                  /* #6E6E6E — #F5F5F4 위 4.67:1 */

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notice-card__date {
  margin-top: auto;
  font-family: var(--font-sans);
  font-size: var(--fs-md);                  /* 16px */
  color: var(--text-subtle);
}

/* ---- Event Zone ------------------------------------------------------- */
/* flex: 1 로 늘리면 그리드 행 높이에 맞춰 .event-zone 이 배너보다 커지고,
   inset:0 으로 잡힌 페이저의 top(%) 이 배너 기준에서 벗어납니다.
   높이를 배너(aspect-ratio)에만 맡겨야 페이저가 노치에 정확히 들어갑니다. */
.event-zone {
  position: relative;
  flex: 0 0 auto;
}

.event-zone__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* 뷰포트에 클리핑 마스크를 걸어 어떤 슬라이드가 들어와도 같은 형태로 잘립니다.
   (시안의 우하단 계단형 노치는 이미지 자체가 아니라 마스크입니다) */
.event-zone__viewport {
  position: relative;
  overflow: hidden;
  aspect-ratio: 597 / 520;                    /* 597.18 : 519.544 */
  container-type: inline-size;
  clip-path: url(#eventZoneClip);
  /* clip-path 미지원 시 최소한 라운드 처리라도 되도록 */
  border-radius: var(--r-lg);
}

/* 슬라이드 트랙 — translateX 로 통째로 밀어 이동 */
.event-zone__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 마우스 드래그 */
.event-zone__viewport { cursor: grab; }

.event-zone__viewport.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.event-zone__viewport img,
.event-slide {
  -webkit-user-drag: none;
  user-select: none;
}

.event-slide {
  position: relative;
  flex: 0 0 100%;
  display: flex;
  overflow: hidden;
}

.event-slide__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;                /* 스카이라인이 하단에 오도록 */
}

/* 02번은 예시로 추가한 CSS 배너 (시안엔 아트워크 없음) */
.event-slide--gradient {
  background:
    radial-gradient(90% 120% at 15% 100%, rgba(0, 252, 239, 0.35) 0%, rgba(0, 252, 239, 0) 60%),
    linear-gradient(160deg, var(--navy-300) 0%, var(--navy-400) 52%, var(--navy-700) 100%);
}

.event-slide__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  margin: 9.5% 0 0 25.8%;                     /* 원본 x154.18 / y52.54 */
  font-family: var(--font-display);           /* GmarketSans */
  font-weight: var(--font-bold);
  line-height: 1.1;
}

/* 흰색 → 브랜드 블루 세로 그라데이션을 글자에 클리핑.
   background-clip 미지원 브라우저에서는 아래 color 가 그대로 보입니다. */
.event-slide__line {
  color: var(--color-white);
  background-clip: text;
  -webkit-background-clip: text;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .event-slide--image .event-slide__line { color: transparent; }
}

.event-slide__line--top {
  font-size: clamp(24px, 8cqw, 48px);
  background-image: linear-gradient(180deg, #FFFFFF 10%, var(--color-info) 130%);
}

.event-slide__line--bottom {
  font-size: clamp(32px, 11cqw, 66px);
  letter-spacing: var(--tracking-widest);     /* 4px */
  background-image: linear-gradient(180deg, #FFFFFF 10%, var(--navy-500) 120%);
}

.event-slide--gradient .event-slide__line {
  color: var(--color-white);
  background-image: none;
}

/* ---- Event Zone 페이저 -------------------------------------------------
   마스크로 파인 우하단 노치 안에 01 / 02 가 놓입니다.
   노치 영역(배너 비율 기준) x 0.592~1.0 · y 0.812~1.0
   버튼 위치            01 left 0.6296 · 02 left 0.9196 · top 0.8679
   ------------------------------------------------------------------------ */
.event-zone__pager {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.event-zone__page {
  position: absolute;
  top: 86.79%;
  pointer-events: auto;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-family: var(--font-sans);
  font-size: var(--fs-lg);                 /* 18px */
  font-weight: var(--font-bold);
  color: var(--color-white);
  background-color: var(--bluegray-700);      /* #364153 */
  border-radius: var(--r-full);

  opacity: 0.45;
  transform: scale(0.9);
  /* ease-out-quart — 오버슈트 없이 빠르게 붙었다 부드럽게 감속.
     기관 사이트 톤에 바운스/일래스틱은 과합니다. */
  transition: opacity 0.28s ease, background-color 0.28s ease,
              transform 0.28s cubic-bezier(0.25, 1, 0.5, 1);
}

.event-zone__page[data-index="0"] { left: 62.96%; }
.event-zone__page[data-index="1"] { left: 91.96%; }

.event-zone__page.is-active {
  opacity: 1;
  transform: scale(1);
  background-color: var(--navy-600);
}

.event-zone__page:hover { opacity: 0.85; transform: scale(1.04); }
.event-zone__page.is-active:hover { transform: scale(1.06); }

/* ---- 01 ↔ 02 진행 라인 ------------------------------------------------
   두 버튼 사이(01 오른쪽 끝 ~ 02 왼쪽 끝)를 잇고, 슬라이드 진행도를
   --progress(0~1) 로 받아 scaleX 로 채웁니다. transform 만 움직이므로
   컴포지터에서 처리되고, 드래그 중에는 손가락을 실시간으로 따라갑니다.
   ------------------------------------------------------------------------ */
.event-zone__progress {
  position: absolute;
  top: 86.79%;
  left: calc(62.96% + 48px + 14px);          /* 01 버튼 오른쪽 + 여백 */
  right: calc(100% - 91.96% + 14px);         /* 02 버튼 왼쪽 - 여백 */
  height: 2px;
  margin-top: 23px;                          /* 버튼(48) 세로 중앙 */
  border-radius: 1px;
  background-color: rgba(54, 65, 83, 0.22);  /* #364153 22% */
  overflow: hidden;
}

.event-zone__progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: var(--navy-600);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 드래그 중에는 전환을 꺼서 손가락 움직임에 즉시 붙습니다 */
.event-zone__viewport.is-dragging ~ .event-zone__pager .event-zone__progress-fill {
  transition: none;
}


/* ==========================================================================
   공지사항 + Event Zone — RESPONSIVE
   --------------------------------------------------------------------------
   1024 이하 : 2컬럼(공지 800 / 배너 597) → 세로 1단. 공지가 위, 배너가 아래.
               공지 카드는 2열 유지. 제목 48 → 36, 장식 원 숨김(여백 부족).
    768 이하 : 공지 카드 2열 → 1열. 카드 padding 40/38 → 28/24.
               배너 페이저 간격 125 → 화면 비례로 축소.
    375 이하 : 제목 36 → 28, 카드 제목 22 → 18. 페이저 48 → 40.
   ========================================================================== */

@media (max-width: 1024px) {
  .notice-zone__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-18);                     /* 80px */
    padding-inline: var(--space-10);
  }

  .notice-zone__col { gap: var(--space-10); }

  /* 세로 1단이 되면 제목 옆 여백이 없어 더보기 버튼을 축소해 붙입니다 */
  .section-head__more { width: 48px; height: 48px; right: 0; bottom: 4px; }

  /* 세로 1단이 되면 배너가 과하게 커지므로 폭을 제한 */
  .event-zone { max-width: 597px; }
}

@media (max-width: 768px) {
  .notice-zone { padding-block: var(--section-py-md); }

  .notice-zone__inner {
    gap: var(--space-14);
    padding-inline: var(--space-9);
  }

  .notice-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-10);                 /* 24px */
  }

  .notice-card__link {
    min-height: 0;
    padding: var(--space-11) var(--space-10); /* 28 / 24 */
  }

  /* 배너 폭이 줄어드는 만큼 페이저도 축소·재배치 */
  .event-zone__page { width: 42px; height: 42px; font-size: var(--fs-md); }
  .event-zone__page[data-index="0"] { left: 63.5%; }
  .event-zone__page[data-index="1"] { left: 88%; }

  .event-zone__progress {
    left: calc(63.5% + 42px + 10px);
    right: calc(100% - 88% + 10px);
    margin-top: 20px;
  }
}

@media (max-width: 375px) {
  .notice-zone { padding-block: var(--section-py-sm); }  /* 40px */
  .notice-zone__inner { padding-inline: var(--space-8); }

  .section-head__title { font-size: var(--fs-xl); }   /* 28px */

  .notice-card__link { padding: var(--space-10) var(--space-9); }
  .notice-card__title { font-size: var(--fs-lg); }    /* 18px */
  .notice-card__excerpt,
  .notice-card__date { font-size: var(--fs-sm); }    /* 14px */

  /* 배너가 작아지면 48px 버튼이 노치를 넘치므로 축소하고 위치를 재보정 */
  .event-zone__page {
    width: 36px;
    height: 36px;
    top: 87.5%;
    font-size: var(--fs-sm);
  }
  .event-zone__page[data-index="0"] { left: 64%; }
  .event-zone__page[data-index="1"] { left: 84%; }

  .event-zone__progress {
    top: 87.5%;
    left: calc(64% + 36px + 8px);
    right: calc(100% - 84% + 8px);
    margin-top: 17px;
  }

  .section-head__more { width: 42px; height: 42px; }
}


/* ==========================================================================
   FOOTER  (Figma 7319:3122 — 시안 3 footer)
   --------------------------------------------------------------------------
   원본 실측 (1920 × 224)
     정책 링크 바   h64 · bg #111 · 하단 보더 1px #999 · 가운데 정렬
       버튼         px 31 · py 9 · radius 6
                    Pretendard Light 16px #999 · tracking -0.4px
     본문           bg #111 · 내부 content 폭 1280 · py 40
       2grid        flex · gap 24
       로고         Exclude 34.1 + 워드마크 147.9×31.3 + "교육원" 18px SemiBold
                    (교육원은 rgba(255,255,255,0.5))
       정보 블록    w954 · flex column · gap 24
                    Pretendard Regular 17px #899EB0 · leading 1.5
                    · 주소 1줄
                    · 발신번호 / 고객센터 / 팩스 / 메일
                    · 운영시간 / 사업자등록번호 / 통신판매업신고

   보정 사항
     · 본문 컨테이너는 시안 3 기준 1280px — 다른 섹션(1440)과 달라 그대로 유지
     · 로고 락업(마크+워드마크+교육원)을 단일 PNG 로 export
     · 정보 줄의 " | " 구분자를 <span> 으로 분리해 스크린리더가 읽지 않도록 처리
     · 전화·메일은 tel: / mailto: 링크로 전환 (시안은 단순 텍스트)
     · 원본 정보 블록 h80 은 3줄이 들어가지 않는 클리핑 값이라 자연 흐름으로 대체
   ========================================================================== */

.footer {
  background-color: var(--gray-900);          /* #111 */
}

/* ---- 정책 링크 바 ------------------------------------------------------ */
.footer__links {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  border-bottom: 1px solid var(--gray-400);   /* #999 */
}

.footer__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) 31px;
  font-family: var(--font-sans);
  font-size: var(--fs-md);                  /* 16px */
  font-weight: var(--font-light);             /* 300 */
  letter-spacing: var(--tracking-tight);      /* -0.4px */
  line-height: var(--leading-none);
  color: var(--gray-400);                     /* #999 */
  border-radius: var(--r-sm);            /* 6px */
  white-space: nowrap;
  transition: color 0.16s ease, background-color 0.16s ease;
}

.footer__link:hover {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.08);
}

/* ---- 기관 정보 --------------------------------------------------------- */
.footer__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);                       /* 24px */
  width: 100%;
  /* 시안 3 푸터는 1280 컨테이너 (본문 섹션 1440 과 다름) */
  max-width: calc(1280px + var(--space-15) * 2);
  margin-inline: auto;
  padding: var(--space-14) var(--space-15);   /* 40 / 48 */
}

.footer__brand {
  flex-shrink: 0;
}

.footer__brand img {
  width: 374px;
  height: auto;
}

.footer__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);                       /* 24px */
  min-width: 0;
}

.footer__line {
  font-family: var(--font-sans);
  font-size: var(--fs-md);                  /* 17px */
  font-weight: var(--font-regular);
  line-height: var(--leading-relaxed);        /* 1.5 */
  color: var(--text-muted);                   /* #5F7180 — AA 5.05:1 */
}

.footer__line a { color: inherit; }
.footer__line a:hover { color: var(--color-white); text-decoration: underline; }

.footer__sep {
  display: inline-block;
  margin-inline: var(--space-2);
  color: rgba(137, 158, 176, 0.45);
}


/* ==========================================================================
   FOOTER — RESPONSIVE
   --------------------------------------------------------------------------
   1024 이하 : 로고 + 정보 가로배치 → 세로 스택. 로고 374 → 300.
    768 이하 : 정책 링크 3개가 한 줄에 안 들어가므로 줄바꿈 허용, 패딩 축소.
               정보 줄 간격 24 → 16, 폰트 17 → 15.
    375 이하 : 로고 300 → 240. 정책 링크 16 → 14, 좌우 패딩 31 → 14.
               " | " 구분자를 숨기고 각 항목을 줄바꿈해 가독성 확보.
   ========================================================================== */

@media (max-width: 1024px) {
  .footer__inner {
    flex-direction: column;
    gap: var(--space-12);                     /* 32px */
    padding-inline: var(--space-10);
  }

  .footer__brand img { width: 300px; }
}

@media (max-width: 768px) {
  .footer__links {
    flex-wrap: wrap;
    padding-block: var(--space-4);
  }

  .footer__link { padding-inline: var(--space-9); }

  .footer__inner {
    gap: var(--space-10);
    padding: var(--space-12) var(--space-9);
  }

  .footer__info { gap: var(--space-8); }      /* 16px */

  .footer__line { font-size: var(--fs-sm); }  /* 15px */
}

@media (max-width: 375px) {
  .footer__link {
    padding-inline: var(--space-7);           /* 14px */
    font-size: var(--fs-sm);              /* 14px */
  }

  .footer__inner { padding-inline: var(--space-8); }

  .footer__brand img { width: 240px; }


  /* 한 줄에 다 넣으면 잘게 끊겨 읽기 어려워 항목별로 줄바꿈 */
  .footer__sep {
    display: block;
    margin: 0;
    font-size: 0;
    line-height: 0;
    color: transparent;
  }
}