/* ===== Reset / Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: 16px;
  color: #0a0a0a;
  background: #ffffff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, li { list-style: none; margin: 0; padding: 0; }
button { border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit; }
input { font: inherit; }

/* 헤더와 콘텐츠 섹션이 공유하는 컨테이너 폭 (헤더 로고~로그인 정렬 기준) */
:root {
  --container-width: 1418px;   /* 헤더 컨테이너 max-width */
  --container-pad-left: 13px;  /* = 헤더 로고 아이콘 왼쪽 끝 (컨테이너 좌측 + 13px) */
  --container-pad-right: 31px; /* = 헤더 로그인 오른쪽 끝 (컨테이너 우측 - 31px) */
}

/* Page wrapper - Figma is 1920px wide */
.page {
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
  background: #ffffff;
  overflow-x: clip;
}
body { overflow-x: hidden; }

/* ===== Header (97:130 — 1920×167) ===== */
.site-header {
  height: 167px;
  border-bottom: 1px solid #e5e5e5;
  /* Figma 시안 헤더 전용 폰트 (다른 섹션은 Pretendard 유지) */
  font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
  letter-spacing: 0;
}
.site-header .header-container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* --- top row: logo / search / login --- */
.site-header .header-top {
  display: flex;
  align-items: center;
  height: 73px;          /* 31px top offset + 42px row */
  padding-top: 31px;
}
/* 로고 — Figma 노드 실측값 (아이콘 111:117, 텍스트 111:116 / header_top 콘텐츠 좌표) */
.site-header .brand {
  display: flex;
  align-items: center;   /* 행 중심 52px = 텍스트 잉크 세로중심 52.0 (실측 일치) */
  gap: 0;                /* 간격은 시안의 박스 구조 그대로 span 마진/폭으로 재현 */
  width: 220px;          /* search-form starts at 220px from content-left (Figma) */
  flex-shrink: 0;
}
.site-header .brand img {
  width: 35.32px;        /* 실측 35.321 × 35.321 */
  height: 35.32px;
  margin-left: -7px;     /* 아이콘 박스 x:-7 — 콘텐츠 좌측보다 7px 왼쪽 (실측) */
  position: relative;
  top: 0.34px;           /* 아이콘 세로중심 52.34 = 행 중심 52 + 0.34px (실측) */
  flex-shrink: 0;
}
.site-header .brand span {
  margin-left: -8.625px; /* 텍스트 박스 x:19.696 − 아이콘 우측끝 28.321 (실측, 박스 겹침) */
  width: 128px;          /* Figma 텍스트 박스 폭 128 고정 */
  text-align: center;    /* textAlignHorizontal: CENTER — 글리프 잉크 x≈29.94 안착 */
  font-size: 24px;       /* Noto Sans KR Bold 700 (실측) */
  font-weight: 700;
  line-height: 26.4px;   /* 실측 26.4px */
  letter-spacing: 0;     /* 실측 0% */
  color: #1b2a46;        /* 실측 #1B2A46 */
  white-space: nowrap;
}
.site-header .search-form {
  display: flex;
  align-items: center;
  gap: 6px;                     /* icon 13px in → input starts at 37px (Figma) */
  width: 300px;
  flex-shrink: 0;
  padding: 9px 13px;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  background: #f5f5f5;
}
.site-header .search-form button {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-header .search-form button img {
  width: 18px;
  height: 18px;
}
.site-header .search-form input {
  flex: 1;
  min-width: 0;
  height: 24px;
  line-height: 24px;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: #1b2a46;
}
.site-header .search-form input::placeholder { color: #9a9a9a; }

.site-header .header-nav {
  margin-left: auto;
  margin-right: 11px;    /* 로그인 글자 우측 끝이 콘텐츠 우측에서 11px 안쪽 (Figma) */
  flex-shrink: 0;
}
.site-header .header-nav a {
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  color: #1b2a46;
}
.site-header .header-nav a:hover { opacity: 0.65; }

/* --- bottom row: GNB menu --- */
.site-header .gnb {
  display: flex;
  align-items: center;
  margin-top: 35px;      /* 73 + 35 = 108px (menu row top) */
  height: 58px;
  font-size: 14px;
}
.site-header .gnb a {
  font-weight: 700;
  line-height: 14px;
  color: #1b2a46;
  flex-shrink: 0;
}
/* 고정 슬롯 폭으로 각 메뉴의 좌측 끝을 시안 좌표(0/118/220/297)에 정확히 고정 */
.site-header .gnb a:nth-child(1) { width: 118px; }   /* 회사소개 0 → 전자책 118 */
.site-header .gnb a:nth-child(2) { width: 102px; }   /* 전자책 118 → 강의 220 */
.site-header .gnb a:nth-child(3) { width: 77px; }    /* 강의 220 → 고객센터 297 */
.site-header .gnb a:hover { color: #1b2a46; }    /* 히든클래스 메인 네이비 (로고 색과 동일) */
.site-header .gnb a.active { color: #1b2a46; }   /* 현재 페이지 메뉴 */

/* ===== Hero (top:166, 1920×550) ===== */
.hero {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1920 / 550;     /* 시안 프레임 비율 */
  max-height: 550px;
  /* 슬라이드를 배경에 cover로 한 겹 더 깔아 좌측 빈 공간을 슬라이드 자신의 회색(질감 포함)으로 메움
     → 매끈한 그라데이션보다 질감이 이어져 경계가 덜 보임 */
  background: #efefef url('../figma-assets/live-card-1.png') left center / cover no-repeat;
}
.hero .hero-slide {
  display: block;
  height: 100%;
  width: auto;                  /* 네이티브 비율 유지 → 우측이 프레임 밖으로 크롭됨 */
  max-width: none;              /* 전역 img max-width:100% 무효화 (가로 찌그러짐 방지) */
  /* 시안 슬라이드 시작 x24(=1.25%)에서 헤더(회사소개/로그인)와의 정렬을 위해 약 +28px 오른쪽으로 */
  margin-left: 2.7%;
}

/* ===== Quick Links (top:716, left:516, 840×119) ===== */
.quick-links {
  display: flex;
  justify-content: center;
  padding: 24px 0 0;
}
.quick-links ul {
  display: flex;
  align-items: center;
  gap: 75px;
}
.quick-links a {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 72px;
  text-decoration: none;
}
.quick-links .icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 8px;
}
.quick-links .icon-wrap img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.quick-links .label {
  font-family: 'Noto Sans KR', sans-serif;   /* 시안 폰트 (퀵메뉴는 Noto Sans KR Medium) */
  font-size: 13px;
  font-weight: 500;
  color: #333;
  line-height: 15.6px;
  letter-spacing: 0;          /* 시안: letterSpacing 0 */
}
/* 퀵메뉴 호버: 아이콘+문구가 통째로 살짝 떠오르는 효과 — 마우스 환경(PC)에서만, 터치 기기 제외 */
@media (hover: hover) and (pointer: fine) {
  .quick-links a { transition: transform 0.3s ease; }
  .quick-links a:hover { transform: translateY(-6px); }
}

/* ===== Main sections wrapper — 헤더와 동일 컨테이너 폭, 로고~로그인 정렬 ===== */
.main-wrap {
  width: 100%;
  max-width: var(--container-width);
  margin: 71px auto 0;
  padding-left: var(--container-pad-left);   /* 카드/제목 왼쪽 = 헤더 로고 왼쪽 끝 */
  padding-right: var(--container-pad-right);  /* 화살표 오른쪽 = 헤더 로그인 오른쪽 끝 */
}

/* ===== Section common ===== */
.section {
  margin-top: 160px;
}
.section:first-child { margin-top: 0; }

.section-head {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  margin-bottom: 16px;
}
.section-head .title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-head .section-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-head .section-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.section-head h2 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.72px;
  line-height: 43.2px;
  color: #0a0a0a;
  margin: 0;
  white-space: nowrap;
}
.section-head .sub-group {
  display: flex;
  align-items: center;
  gap: 24px;
}
.section-head .sub-divider {
  width: 1px;
  height: 48px;
  background: #e5e5e5;
}
.section-head .sub-en {
  font-size: 18px;
  letter-spacing: -0.36px;
  line-height: 27px;
  color: #a1a1a1;
  font-weight: 400;
  white-space: nowrap;
}
.section-head .more {
  margin-left: auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.section-head .more img { width: 24px; height: 24px; }
.section-divider {
  height: 1px;
  background: #e5e5e5;
  width: 100%;
  margin-bottom: 32px;
}

/* ===== Cards common: detail-view button with notch ===== */
.thumb {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #f5f5f5;
}
.thumb > img.cover {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.detail-view {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 112px;
  height: 54px;
  display: grid;
  grid-template-columns: 56px 56px;
  grid-template-rows: 6px 48px;
}
.detail-view .dot-1 {
  grid-column: 2; grid-row: 1;
  align-self: end; justify-self: end;
  width: 6px; height: 6px;
}
.detail-view .dot-2 {
  grid-column: 1; grid-row: 2;
  align-self: end; justify-self: end;
  width: 6px; height: 6px;
}
.detail-view .dot-1 img,
.detail-view .dot-2 img {
  width: 6px; height: 6px;
  display: block;
}
.detail-view .btn-bg {
  grid-column: 2; grid-row: 2;
  width: 56px; height: 48px;
  background: #ffffff;
  border-top-left-radius: 22px;
  padding: 6px 0 0 6px;
}
.detail-view .btn-grad {
  width: 50px; height: 42px;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(55deg, rgb(102,102,102) 12.7%, rgba(102,102,102,0) 44.05%, #000 92.22%);
}
.detail-view .btn-inner {
  width: 48px; height: 40px;
  background: #fff;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.detail-view .btn-inner img {
  width: 20px; height: 20px;
}

/* ===== Badges ===== */
.badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: -0.16px;
  border-radius: 4px;
  white-space: nowrap;
}
.badge.best {
  padding: 4px 8px;
  color: #fff;
  background: linear-gradient(54.39deg, #a0100f 10%, #ff6666 50%, #a0100f 90%);
}
.badge.hot {
  padding: 5px 9px;
  color: red;
  background: #fff;
  border: 1px solid red;
}

/* ===== Section: 핵심 전자책 — book swiper ===== */
/* 화살표는 컨테이너 우측(=헤더 로그인 오른쪽 끝)에 정렬 → 별도 인셋 없음 */
/* 시안: 책 카드 한 권만 — 슬라이더/가로 스크롤 없음 */
.ebook-swiper {
  width: 100%;
}
.ebook-track {
  display: flex;
}
.ebook-card {
  width: 307.27px;
  flex: 0 0 auto;
}
.ebook-card .thumb {
  width: 307.27px;
  height: 460.89px;
  background: #f5f5f5;
}
.ebook-card .info {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ebook-card .title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  line-height: 27px;
  color: #171717;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Section: VOD / LIVE — wider cards ===== */
.class-swiper {
  width: 100%;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
}
.class-swiper::-webkit-scrollbar { height: 6px; }
.class-swiper::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 3px; }
.class-track {
  display: flex;
  gap: 21px;
  padding-bottom: 12px;
  padding-right: 180px; /* right-fade space */
}
.class-card {
  width: 449.56px;
  flex: 0 0 auto;
}
.class-card .thumb {
  width: 449.56px;
  height: 252.88px;
  background: #f5f5f5;
}
.class-card .info {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.class-card .title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  line-height: 27px;
  color: #171717;
  margin: 0;
}
.class-card .meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  line-height: 24px;
  color: #404040;
}
.class-card .meta .dot {
  width: 1px;
  height: 6px;
  background: #e5e5e5;
}
.class-swiper-wrap {
  position: relative;
}
.class-swiper-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 180px;
  height: calc(100% - 12px);
  pointer-events: none;
  background: linear-gradient(to left, #ffffff 0%, rgba(255,255,255,0) 100%);
}

/* ===== VOD 섹션 전용: 시안대로 카드 2개만 — 슬라이더/우측 페이드 없음 (화살표는 공유 컨테이너 우측=로그인 정렬) ===== */
.section-vod .class-swiper { overflow: visible; }            /* 슬라이더 제거 */
.section-vod .class-track { flex-wrap: wrap; padding-right: 0; }  /* 카드 2개, 좁으면 줄바꿈(반응형) */
.section-vod .class-swiper-wrap::after { display: none; }    /* 우측 페이드 제거 */

/* ===== LIVE 섹션 전용: 시안대로 카드 1개만 — 슬라이더/우측 페이드 없음 (화살표는 공유 컨테이너 우측=로그인 정렬) ===== */
.section-live .class-swiper { overflow: visible; }
.section-live .class-track { flex-wrap: wrap; padding-right: 0; }
.section-live .class-swiper-wrap::after { display: none; }

/* ===== Section: 수강생 수익화 사례 (dark) ===== */
.stories-section {
  background: #1b1b1b;          /* 검은 배경은 화면 전체(100%) 폭 유지 */
  width: 100%;
  margin-top: 160px;
  padding: 80px 0;             /* 상하 80px, 좌우 패딩 없음 (콘텐츠는 컨테이너가 담당) */
}
.stories-section .stories-container {
  width: 100%;
  max-width: var(--container-width);   /* 헤더와 동일 컨테이너 폭, 중앙 정렬 */
  margin: 0 auto;
  padding-left: var(--container-pad-left);   /* 제목/리스트 왼쪽 = 헤더 로고 왼쪽 끝 */
  padding-right: var(--container-pad-right);  /* 화살표 오른쪽 = 헤더 로그인 오른쪽 끝 */
}
.stories-section .section-head h2 { color: #ffffff; }
.stories-section .section-head .sub-en { color: #a1a1a1; }
.stories-section .section-head .sub-divider { background: #525252; }
.stories-section .section-divider { background: #525252; margin-bottom: 0; }

.stories-list {
  width: 100%;
}
/* 수익화 사례 → 네이버 블로그 링크: display:contents 로 li의 flex 레이아웃에 영향 없음 (렌더링 동일) */
.stories-list .story-link { display: contents; }
.stories-list li {
  display: flex;
  align-items: flex-start;     /* 시안: 제목/이름 상단 정렬 */
  gap: 12px;
  height: 78px;
  padding: 20px 20px 21px;     /* 시안 pt-20 pb-21 px-20 */
  border-bottom: 1px solid #525252;
}
.stories-list .story-title {
  flex: 1;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.56px;
  line-height: 36.4px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stories-list .story-title .short { display: none; }   /* 모바일 전용 축약 문구 — PC에선 숨김(렌더링 동일) */
.stories-list .story-author {
  font-size: 18px;
  font-weight: 500;            /* 시안: Pretendard Medium */
  letter-spacing: -0.36px;
  line-height: 27px;
  color: #a1a1a1;
  white-space: nowrap;
}
.stories-list .story-author b {
  color: #a1a1a1;
  font-weight: 700;
}

/* ===== 카카오톡 상담 플로팅 버튼 (전 페이지 공통, 우측 하단 고정)
   Figma 5627:627 실측: 32×32 원형 #F9DB00, 말풍선 #3E1918 + TALK ===== */
.kakao-float {
  position: fixed;
  right: 24px;
  bottom: 40px;
  z-index: 1000;
  width: 60px;
  height: 60px;
  display: block;
}
.kakao-float img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===== Footer (top:3609, 1920×289) ===== */
.site-footer {
  border-top: 1px solid #dcdcdc;
  width: 100%;
  height: 289px;
  background: #171717;            /* full-width 배경 (시안 컬럼 좌우 끝색과 동일) */
  font-family: 'Pretendard', sans-serif;   /* 시안 푸터 폰트 (헤더와 달리 Pretendard) */
}
.site-footer .footer-grid {
  display: grid;
  /* 1920에서 정확히 753/687/480, 그보다 좁으면 비율로 축소 (col3 잘림 방지) */
  grid-template-columns: 753fr 687fr 480fr;
  grid-template-rows: 288px;     /* 시안 행 높이 고정 (콘텐츠는 안에 들어맞음) */
  height: 288px;
  width: 100%;
  max-width: 1920px;             /* 콘텐츠 컨테이너 (배경은 100%, 콘텐츠는 1920 중앙) */
  margin: 0 auto;
}

/* Footer col 1: company info */
.footer-info {
  background: #171717;
  border-left: 1px solid #737373;
  border-top: 1px solid #737373;
  padding: 55px 40px 40px 52px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-info .info-row {
  display: flex;
  gap: 40px;
}
.footer-info .info-col {
  display: flex;
  flex-direction: column;
}
.footer-info p {
  margin: 0;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: -0.32px;
  color: #737373;
  white-space: nowrap;
}

/* Footer col 2: help card */
.footer-help {
  background: #262626;
  border-left: 1px solid #737373;
  border-top: 1px solid #737373;
  padding: 49px 40px 60px 41px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.footer-help .help-title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.72px;
  line-height: 43.2px;
  color: #d4d4d4;
}
.footer-help .help-desc {
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.4px;
  color: #737373;
  padding-bottom: 11px;     /* 시안: 설명 아래 11px 여백 (p.typo-body-xl pb-11) */
}
.footer-help .help-desc p { margin: 0; }
.footer-help .inquiry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 8px 17px;
  border-bottom: 1px solid #737373;
}
.footer-help .inquiry span {
  font-size: 20px;
  letter-spacing: -0.16px;
  line-height: 30px;
  color: #d4d4d4;
}
.footer-help .inquiry .arrow {
  width: 12px;
  height: 20px;
}
.footer-help .inquiry .arrow img {
  width: 12px;
  height: 20px;
}

/* Footer col 3: ABOUT/BLOG/CAREERS */
.footer-links {
  background: #171717;
  border-left: 1px solid #737373;
  border-top: 1px solid #737373;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 0;
}
.footer-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 40px 24px 24px;
  border-bottom: 1px solid #737373;
  height: 90px;
}
.footer-links a:last-child {
  height: 84px;
}
.footer-links a .label {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.64px;
  line-height: 41.6px;
  color: #d4d4d4;
}
.footer-links a .arrow {
  width: 12px;
  height: 20px;
}
.footer-links a .arrow img {
  width: 12px;
  height: 20px;
}

/* ===== Responsive (still keep Figma proportions on desktop, simplify below 1280) ===== */
@media (max-width: 1500px) {
  /* main-wrap는 헤더와 동일한 max-width(--container-width) 유지 → 폭 override 제거 */
  .ebook-card,
  .ebook-card .thumb { width: 280px; }
  .ebook-card .thumb { height: 420px; }
}
@media (max-width: 1280px) {
  /* 헤더 패딩(20px)을 유지해 섹션과 정렬 일관성 유지 (override 제거) */
  .stories-section { padding: 64px 0; }
}

/* ===== 푸터 태블릿 배치 (768~1365): 상단 2칸(도움말 | 링크) + 하단 회사정보 풀폭 =====
   1366 이상은 PC 3칸(753fr/687fr/480fr), 767 이하는 모바일 세로 3칸 그대로 */
@media (min-width: 768px) and (max-width: 1365px) {
  .site-footer { height: auto; }
  .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    height: auto;
  }
  .footer-help  { grid-column: 1; grid-row: 1; }       /* 좌상: 도움이 필요하신가요? */
  .footer-links { grid-column: 2; grid-row: 1; }       /* 우상: ABOUT / BLOG / CAREERS */
  /* 상단 2칸 아래 구분선: 두 칸의 셀 하단에 연속된 풀폭 한 줄로 통일
     (CAREERS 자체 보더는 셀 중앙정렬 여백 탓에 15px 위에 떠서 제거) */
  .footer-help,
  .footer-links { border-bottom: 1px solid #737373; }
  .footer-links a:last-child { border-bottom: 0; }
  /* 링크 3행: gap·고정높이(90/84) 해제 → 셀 높이를 정확히 1/3씩 균등 분할,
     문구는 flex align-items:center(공통 규칙)로 각 행 상하 중앙 */
  .footer-links { gap: 0; }
  .footer-links a,
  .footer-links a:last-child {
    height: auto;
    flex: 1 1 0;
  }
  .footer-info  {
    grid-column: 1 / -1;                               /* 하단 풀폭: 회사정보 */
    grid-row: 2;
    border-top: 0;            /* 상단 2칸 아래 구분선 2개 중 아래쪽 제거 — CAREERS 행 하단 선만 유지 */
  }
  /* 좁은 끝단(768 부근)에서 nowrap 회사정보 줄이 겹치지 않게 컬럼 줄바꿈 허용 */
  .footer-info .info-row { flex-wrap: wrap; }
}
/* ===== 모바일 브레이크포인트 (767px) — 768 이상은 PC 디자인 ===== */
@media (max-width: 767px) {

  /* ===== 모바일 헤더 (시안 99:290 — Figma 실측 375) ===== */
  .site-header { height: auto; padding-bottom: 0; }    /* 하단 border 1px #e5e5e5 유지(실측) */
  .site-header .header-container { padding: 0 20px; }   /* 콘텐츠 x20~355 */

  /* 상단 행: 로고(좌) · 로그인 버튼(우) — 검색 아이콘은 시안에 없어 숨김 */
  .site-header .header-top {
    height: auto;
    padding-top: 17px;          /* 로그인 버튼 top y17 (실측) */
    padding-bottom: 0;
    align-items: center;
  }
  /* 로고 — Figma 모바일 노드 실측 (아이콘 110:110, 텍스트 110:108 / header_top 콘텐츠 좌표) */
  .site-header .brand { width: auto; gap: 0; }
  .site-header .brand img {
    width: 24px;                /* 실측 24×24 */
    height: 24px;
    margin-left: -3px;          /* 아이콘 박스 x:-3 — 콘텐츠 좌측보다 3px 왼쪽 (실측) */
    top: 0.5px;                 /* 수동 조정: 보이는 큐브 밑단 ≈ 글자 밑단 (PNG 투명여백 탓에 육안 보정, 1~2px씩 조정 중) */
  }
  .site-header .brand span {
    margin-left: -9px;          /* 텍스트 박스 x:12 − 아이콘 우측끝 21 (실측, 박스 겹침) */
    width: 89px;                /* Figma 텍스트 박스 폭 89 고정(가운데정렬) — 글리프 잉크 x≈21.6 안착 */
    font-size: 16px;            /* Noto Sans KR Bold 700 (실측) */
    line-height: 25px;          /* 실측 25px */
    letter-spacing: -0.48px;    /* 실측 -0.48px (PIXELS) */
  }

  /* 검색: 시안 btn_search 프레임에 아이콘 없음 → 숨김 */
  .site-header .search-form { display: none; }

  /* 로그인: 56×26.4, padding 4/10/5.39/10, border 1px #bdbdbd, radius 8, Regular 12px #615858 lh14.4 */
  .site-header .header-nav { display: flex; align-items: center; margin-left: auto; margin-right: 0; }   /* 우측 끝 x355.9, inline 여백 제거 */
  .site-header .header-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 1px;                   /* 수동 조정: 로그인 버튼 1px 내림 (육안 맞춤) */
    padding: 4px 10px 5.39px;
    border: 1px solid #bdbdbd;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 14.4px;
    color: #615858;
  }

  /* 하단 행: GNB y57.7, gap 9.4, 항목 padding 14/0, 전자책·강의 pl 9.99, 고객센터 앞 빈칸(ml 9.4) */
  .site-header .gnb {
    margin-top: 14.9px;         /* header_top 하단(≈42.8) → gnb top y57.7 */
    height: 42px;
    gap: 9.4px;
    font-size: 14px;
    align-items: flex-start;
  }
  .site-header .gnb a { width: auto; padding: 14px 0; line-height: 14px; }   /* 텍스트 y71.7 */
  .site-header .gnb a:nth-child(1),
  .site-header .gnb a:nth-child(2),
  .site-header .gnb a:nth-child(3) { width: auto; }
  .site-header .gnb a:nth-child(2),
  .site-header .gnb a:nth-child(3) { padding-left: 9.99px; }
  .site-header .gnb a:nth-child(4) { margin-left: 9.4px; }

  /* ===== 모바일 히어로 배너 (시안 110:102 — Figma 실측 375) ===== */
  /* 단일 배너 이미지: x0 y100, 397×191 (cornerRadius 0, 이미지 FILL). 모바일 전용 배너로 교체, PC 슬라이드 숨김 */
  .hero {
    height: 191px;                  /* 시안 배너 높이 191 (실측) */
    aspect-ratio: auto;             /* PC의 1920/550 비율 해제 */
    max-height: none;
    background: url('../figma-assets/hero-mobile.png') left center / cover no-repeat;
  }                                 /* cover+left: 375폭에서 좌측 정렬·우측 크롭 = 시안(397폭 중 좌 375) 동일 */
  .hero .hero-slide { display: none; }

  /* ===== 모바일 퀵메뉴 (시안 91:912 "start" — Figma 실측 375) ===== */
  /* start 프레임 x27 y291 320×123. 아이콘박스 60×60 radius14 #f5f5f5(박스간격 ~22.5), 라벨 Noto Sans KR Medium 12 */
  .quick-links { padding: 20px 0 21px; }              /* 아이콘 y311 = 히어로 하단(291)+20, 섹션 123 높이 */
  .quick-links ul { gap: 22.5px; }
  .quick-links a { width: 60px; }
  .quick-links .icon-wrap { width: 60px; height: 60px; border-radius: 14px; margin-bottom: 8px; }
  .quick-links li:nth-child(1) .icon-wrap img { width: 32px; height: 32px; }   /* 회사소개 */
  .quick-links li:nth-child(2) .icon-wrap img { width: 30px; height: 30px; }   /* 전자책 */
  .quick-links li:nth-child(3) .icon-wrap img { width: 32px; height: 32px; }   /* 강의 */
  .quick-links li:nth-child(4) .icon-wrap img { width: 25px; height: 24px; }   /* 고객센터 */
  .quick-links .label { font-size: 12px; line-height: 14.4px; }                /* Noto Sans KR Medium #333 (실측) */

  /* ===== 모바일 핵심 전자책 (시안 93:105 — Figma 실측 375) ===== */
  /* 콘텐츠 x20~355(335). main-wrap 패딩(13/31) 상쇄 후 좌우 20 */
  /* .section.section-ebook = 특정도(0,2,0)로 PC `.section:first-child{margin-top:0}` 이김 */
  .section.section-ebook {
    margin-top: 80px;                                       /* 퀵 하단(y414) → 헤더 y494 = 80px (main-wrap 40과 margin collapse → 80) */
    margin-left: calc(-1 * var(--container-pad-left));      /* -13 → 섹션 좌측 x0 */
    margin-right: calc(-1 * var(--container-pad-right));     /* -31 → 섹션 우측 x375 */
    padding-left: 20px;
    padding-right: 20px;
  }
  /* 헤더: 아이콘 32×32, 제목 24/lh28.8/ls-0.24 #0a0a0a, 화살표 24, E-BOOK 서브 없음 */
  .section-ebook .section-head { gap: 24px; margin-bottom: 16px; }
  .section-ebook .section-icon,
  .section-ebook .section-icon img { width: 32px; height: 32px; }
  .section-ebook .section-head h2 { font-size: 24px; line-height: 28.8px; letter-spacing: -0.24px; }
  .section-ebook .section-head .sub-group { display: none; }   /* 모바일 시안에 E-BOOK 없음 */
  .section-ebook .section-divider { margin-bottom: 32px; }     /* 구분선 → 스와이퍼 32px */

  /* 카드: 219.3 폭, 썸네일 219.3×329 radius6, 카드 간격 12 */
  .section-ebook .ebook-track { gap: 12px; }
  .section-ebook .ebook-card,
  .section-ebook .ebook-card .thumb { width: 219.3px; }
  .section-ebook .ebook-card .thumb { height: 329px; }
  .section-ebook .detail-view { display: none; }              /* 점·버튼은 모바일 시안에 없음 */
  /* (시안의 빨강 오버레이 div.absolute는 node opacity:0 → 투명이라 미적용) */
  /* 제목: Pretendard Medium 16/lh24/ls-0.16 #171717 (1줄 클립) */
  .section-ebook .ebook-card .title { font-size: 16px; line-height: 24px; letter-spacing: -0.16px; }

  /* ===== 모바일 편집 VOD 강의 (시안 93:182 — Figma 실측 375) ===== */
  /* 콘텐츠 x20~355. main-wrap 패딩(13/31) 상쇄 후 좌우 20 */
  .section-vod {
    margin-left: calc(-1 * var(--container-pad-left));
    margin-right: calc(-1 * var(--container-pad-right));
    padding-left: 20px;
    padding-right: 20px;
  }
  /* 헤더: 아이콘 32×32, 제목 24/lh28.8/ls-0.24, CLASS 서브 없음 (ebook과 동일) */
  .section-vod .section-icon,
  .section-vod .section-icon img { width: 32px; height: 32px; }
  .section-vod .section-head h2 { font-size: 24px; line-height: 28.8px; letter-spacing: -0.24px; }
  .section-vod .section-head .sub-group { display: none; }   /* 모바일 시안에 CLASS 없음 */
  .section-vod .section-divider { margin-bottom: 32px; }

  /* 스와이퍼: 가로 스크롤(카드1 + 카드2 살짝 보임), 카드 간격 12 — PC의 wrap/visible 복원 */
  /* 시안엔 스크롤바 없음 → 스크롤은 유지하되 바만 숨김 */
  .section-vod .class-swiper {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* IE/Edge */
  }
  .section-vod .class-swiper::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
  .section-vod .class-track { flex-wrap: nowrap; gap: 12px; padding-right: 0; padding-bottom: 0; }
  /* 카드: 277.2 폭, 썸네일 277.2×155.9 radius6 (가로형) */
  .section-vod .class-card,
  .section-vod .class-card .thumb { width: 277.2px; }
  .section-vod .class-card .thumb { height: 155.9px; }
  .section-vod .detail-view { display: none; }              /* 점·버튼 모바일 시안에 없음 */
  /* 뱃지: HOT 흰배경+빨강 1px 테두리 padding4/8, BEST 그라데이션(공통) */
  .section-vod .badge.hot { padding: 4px 8px; }
  /* 제목: Pretendard Medium 16/lh24/ls-0.16 #171717 */
  .section-vod .class-card .title { font-size: 16px; line-height: 24px; letter-spacing: -0.16px; }
  /* 메타: Pretendard Medium 14/lh21/ls-0.14 #404040 */
  .section-vod .class-card .meta { font-size: 14px; line-height: 21px; letter-spacing: -0.14px; }

  /* ===== 모바일 라이브 강의 (시안 93:667 헤더 / 93:120 스와이퍼 — Figma 실측 375) ===== */
  /* VOD 스와이퍼 하단(y1443.9) → 라이브 헤더(y1523.9) = 80px. inline margin-top:160px 덮어쓰기 */
  .live-wrap { margin-top: 80px !important; }
  /* 콘텐츠 x20~355(335). main-wrap 패딩(13/31) 상쇄 후 좌우 20 */
  .section-live {
    margin-left: calc(-1 * var(--container-pad-left));
    margin-right: calc(-1 * var(--container-pad-right));
    padding-left: 20px;
    padding-right: 20px;
  }
  /* 헤더: 아이콘 32×32, 제목 24/lh28.8/ls-0.24 #0a0a0a, 화살표 24(공통), LIVE CLASS 서브 없음 */
  .section-live .section-icon,
  .section-live .section-icon img { width: 32px; height: 32px; }
  .section-live .section-head h2 { font-size: 24px; line-height: 28.8px; letter-spacing: -0.24px; }
  .section-live .section-head .sub-group { display: none; }   /* 모바일 시안에 LIVE CLASS 없음 */
  .section-live .section-divider { margin-bottom: 32px; }     /* 구분선 → 스와이퍼 32px (시안 y81) */

  /* 스와이퍼: 가로 스크롤(다음 슬롯 살짝 보임), 카드 간격 12 — PC의 wrap/visible 복원, 스크롤바 숨김 */
  .section-live .class-swiper {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* IE/Edge */
  }
  .section-live .class-swiper::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
  .section-live .class-track { flex-wrap: nowrap; gap: 12px; padding-right: 0; padding-bottom: 0; }
  /* 카드: 277.2 폭, 썸네일 277.2×155.9 radius6 / 썸네일→info 12, info 내부 gap 12 (PC 공통과 동일) */
  .section-live .class-card,
  .section-live .class-card .thumb { width: 277.2px; }
  .section-live .class-card .thumb { height: 155.9px; }
  .section-live .detail-view { display: none; }               /* 점·버튼 모바일 시안에 없음 */
  /* 뱃지: HOT 43×26 (Figma stroke inside → padding4/8+border1), BEST 4/8 그라데이션(공통, 24h) */
  .section-live .badge.hot { padding: 4px 8px; }
  /* 제목: Pretendard Medium 18/lh27/ls-0.36 #171717 — PC 공통값과 동일 (시안 실측) */
  .section-live .class-card .title { font-size: 18px; line-height: 27px; letter-spacing: -0.36px; }
  /* 메타: Pretendard Medium 14/lh21/ls-0.14 #404040, 구분점 1×6 #e5e5e5 gap6 (공통) */
  .section-live .class-card .meta { font-size: 14px; line-height: 21px; letter-spacing: -0.14px; }

  /* ===== 본문 (기존 유지 — 건드리지 않음) ===== */
  .main-wrap { margin-top: 40px; }
  .section { margin-top: 80px; }
  .section-head h2 { font-size: 24px; line-height: 1.3; }
  .section-head .sub-divider { height: 24px; }
  .section-head .sub-en { font-size: 14px; }
  .class-card,
  .class-card .thumb { width: 320px; }
  .class-card .thumb { height: 180px; }

  /* ===== 모바일 수강생 수익화 사례 (시안 93:452 — Figma 실측 375) ===== */
  /* 풀폭 다크(#1b1b1b) 섹션: py 80 (시안 py-20), 콘텐츠 좌우 20 (시안 px-20) */
  .stories-section { margin-top: 80px; padding: 80px 0; }
  .stories-section .stories-container { padding-left: 20px; padding-right: 20px; }
  /* 헤더: 아이콘 32×32, 제목 24/lh28.8/ls-0.24 white, 화살표 24(공통), SUCCESS STORIES 서브 없음 */
  .stories-section .section-icon,
  .stories-section .section-icon img { width: 32px; height: 32px; }
  .stories-section .section-head h2 { font-size: 24px; line-height: 28.8px; letter-spacing: -0.24px; }
  .stories-section .section-head .sub-group { display: none; }   /* 모바일 시안에 SUCCESS STORIES 없음 */
  /* 구분선(#525252, margin-bottom:0)은 PC 공통 그대로 — 시안도 구분선 바로 아래 리스트(y49) */
  /* 행: 67h = pt20 + 제목26 + pb20 + border1 (Figma stroke inside), px20, border-b #525252(공통) */
  /* gap 0: 시안은 양끝 정렬(행별 잔여 간격 0~12) — 월400 행은 222+73=295 꽉 참, gap12면 끝자리 잘림 */
  .stories-list li { height: auto; padding-bottom: 20px; gap: 0; }
  /* 제목: Pretendard Medium 20/lh26/ls-0.2 white — 시안 축약 문구 그대로, … 없이 클립(시안 overflow-clip) */
  .stories-list .story-title { font-size: 20px; line-height: 26px; letter-spacing: -0.2px; text-overflow: clip; }
  .stories-list .story-title .full { display: none; }     /* PC 전문 숨김 */
  .stories-list .story-title .short { display: inline; }  /* 모바일 시안 문구 표시 */
  /* 작성자: Medium 16/lh24/ls-0.16 #a1a1a1, 이름은 모두 Bold (모바일 시안 — PC는 바나클·무롱만) */
  .stories-list .story-author { font-size: 16px; line-height: 24px; letter-spacing: -0.16px; }
  .stories-list .story-author .name { font-weight: 700; }

  /* ===== 모바일 푸터 (시안 93:559/577/624 — Figma 실측 375) ===== */
  /* 단일 컬럼 + 순서: 도움말 → ABOUT/BLOG/CAREERS → 회사정보 */
  .site-footer { height: auto; }
  .site-footer .footer-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .footer-help { order: 1; }   /* 도움이 필요하신가요? */
  .footer-links { order: 2; }  /* ABOUT / BLOG / CAREERS */
  .footer-info { order: 3; }   /* 회사정보 */

  /* 도움말: padding 48/40/59.97/40, 문의 행 padding 16/8 (실측) */
  .footer-help { padding: 48px 40px 59.97px 40px; }
  .footer-help .inquiry { padding: 16px 8px; }

  /* ABOUT/BLOG/CAREERS: 행 padding 23.5/40/23.5/24, 높이 89.6(막내 84/pb21), 텍스트 2칸 들여쓰기 */
  .footer-links a { padding: 23.5px 40px 23.5px 24px; height: 89.6px; }
  .footer-links a:last-child { height: 84px; padding-bottom: 21px; }
  .footer-links a .label { padding-left: 13px; }

  /* 회사정보: padding 44/40/36/51, 두 컬럼 → 단일 컬럼 (카피라이트는 마크업에서 제거됨) */
  .footer-info { padding: 44px 40px 36px 51px; }
  .footer-info .info-row { flex-direction: column; gap: 0; }
}