@charset "utf-8";

/* ===== SUB DETAIL PAGE ===== */
.sub-detail-wrap { padding: 60px 0 120px; background: #fff; }
.sub-detail-inner { margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }

/* ===== 좌측 ===== */
.sd-left { display: flex; flex-direction: column; gap: 28px; }

/* 영상 썸네일 */
.sd-video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #1a1a1a; cursor: pointer; }
.sd-video-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.sd-video-wrap:hover .sd-video-thumb { transform: scale(1.03); }
.sd-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: none; border: none; cursor: pointer; padding: 0; transition: transform 0.2s; }
.sd-play-btn:hover { transform: translate(-50%, -50%) scale(1.1); }
.sd-play-btn svg { width: 64px; height: 64px; }

/* 클래스 정보 */
.sd-class-info { display: flex; flex-direction: column; gap: 12px; }
.sd-category { color: #035272; letter-spacing: 0.03em; }
.sd-title { color: #1a1a1a; line-height: 1.4; letter-spacing: -0.02em; word-break: keep-all; }
.sd-desc { color: #555; line-height: 1.8; word-break: keep-all; }

/* 커리큘럼 */
.sd-curriculum { border: 1px solid #e8e8e8; border-radius: 10px; overflow: hidden; }
.sd-curriculum-head { padding: 16px 20px; background: #f8f8f8; border-bottom: 1px solid #e8e8e8; }
.sd-curriculum-list { list-style: none; }
.sd-curriculum-item { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #f0f0f0; transition: background 0.18s; }
.sd-curriculum-item:last-child { border-bottom: none; }
.sd-curriculum-item:hover { background: #fafafa; }
.sd-play-icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; }
.sd-play-icon svg { width: 20px; height: 20px; }
.sd-curriculum-title { flex: 1; color: #333; }
.sd-curriculum-time { flex-shrink: 0; color: #999; letter-spacing: 0.04em; }

/* ===== 우측 ===== */
.sd-right { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 100px; }

/* 가격 카드 */
.sd-price-card { border: 1px solid #e0e0e0; border-radius: 14px; padding: 28px 24px; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.07); display: flex; flex-direction: column; gap: 0; }
.sd-price-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sd-discount-rate { color: #035272; line-height: 1; }
.sd-price-final { display: flex; align-items: baseline; gap: 4px; }
.sd-price-unit { color: #888; margin-right: 2px; }
.sd-price-num { color: #1a1a1a; letter-spacing: -0.02em; }
.sd-price-divider { width: 100%; height: 1px; background: #efefef; margin-bottom: 16px; }
.sd-price-table { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.sd-price-row { display: flex; align-items: center; justify-content: space-between; }
.sd-price-label { color: #888; }
.sd-price-val { color: #555; }
.sd-price-row-final { padding-top: 10px; border-top: 1px solid #f0f0f0; margin-top: 4px; }
.sd-price-row-final .sd-price-label { color: #333; }
.sd-price-row-final .sd-price-val { color: #1a1a1a; }
.sd-watch-btn { display: block; width: 100%; padding: 14px 0; background: #3d5fc0; border-radius: 8px; color: #fff; text-align: center; text-decoration: none; letter-spacing: 0.04em; transition: background 0.2s; margin-bottom: 10px; }
.sd-watch-btn:hover { background: #2e4aaa; }
.sd-auth-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.sd-auth-btn { display: block; padding: 12px 0; border-radius: 8px; text-align: center; text-decoration: none; letter-spacing: 0.02em; transition: opacity 0.2s; }
.sd-join-btn { background: #222; color: #fff; }
.sd-login-btn { background: #3d5fc0; color: #fff; }
.sd-join-btn:hover, .sd-login-btn:hover { opacity: 0.85; }
.sd-price-note { color: #aaa; text-align: center; line-height: 1.5; }

/* 제품별 인기 클래스 */
.sd-related { display: flex; flex-direction: column; gap: 14px; }
.sd-related-title { color: #1a1a1a; }
.sd-related-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.sd-tab { padding: 4px 10px; height: 26px; color: #888; background: none; border: 1px solid #ddd; border-radius: 20px; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.sd-tab:hover { border-color: #035272; color: #035272; }
.sd-tab.active { background: #222; border-color: #222; color: #fff; }
.sd-related-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
.sd-related-item { border-bottom: 1px solid #f0f0f0; }
.sd-related-item:last-child { border-bottom: none; }
.sd-related-link { display: flex; align-items: center; gap: 12px; padding: 12px 0; text-decoration: none; transition: opacity 0.2s; }
.sd-related-link:hover { opacity: 0.75; }
.sd-related-thumb { width: 72px; height: 52px; border-radius: 6px; overflow: hidden; background: #ebebeb; flex-shrink: 0; }
.sd-related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sd-related-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sd-related-name { color: #222; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }
.sd-related-desc { color: #aaa; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== BEST CLASS SECTION ===== */
.best-class-section { padding: 120px 0; background: #fff; }
.best-class-inner { margin: 0 auto; padding: 0 40px; }
.section-label { display: block; color: #035272; letter-spacing: 0.02em; margin-bottom: 10px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.section-title { color: #222; letter-spacing: -0.02em; }
.class-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tab-btn { padding: 6px 14px; height: 32px; color: #666; background: none; border: 1px solid #ddd; border-radius: 20px; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.tab-btn:hover { border-color: #035272; color: #035272; }
.tab-btn.active { background: #222; border-color: #222; color: #fff; }
.class-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px; }
.class-card { display: flex; flex-direction: column; cursor: pointer; }
.class-card:hover .class-thumb-img { transform: scale(1.04); }
.class-thumb { width: 100%; aspect-ratio: 322 / 224; border-radius: 8px; overflow: hidden; background: #f0f0f0; margin-bottom: 12px; position: relative; }
.class-thumb img { width: 100%; height: 100%; object-fit: cover; }
.class-thumb-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.thumb-placeholder { width: 100%; height: 100%; background: #e8e8e8; display: flex; align-items: center; justify-content: center; }
.thumb-placeholder svg { width: 36px; height: 36px; opacity: 0.35; }
.class-info { padding: 0 2px; }
.class-title { color: #222; line-height: 1.4; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }
.class-desc { color: #999; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.guide-card-wrap { display: flex; flex-direction: column; cursor: pointer; }
.guide-card-wrap:hover .guide-badge { background: #024460; }
.class-card-guide { display: flex; cursor: pointer; border-radius: 8px; overflow: hidden; background: #f5f5f5; margin-bottom: 12px; aspect-ratio: 4 / 3; }
.guide-badge { flex-shrink: 0; width: 48%; background: #035272; display: flex; flex-direction: column; justify-content: center; padding: 16px 14px; gap: 6px; }
.guide-category { color: #fff; line-height: 1.3; }
.guide-seq { color: rgba(255,255,255,0.7); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }
.guide-num { color: rgba(255,255,255,0.2); line-height: 1; margin-top: 4px; }
.guide-thumb { flex: 1; overflow: hidden; position: relative; }
.guide-thumb-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.guide-placeholder { width: 100%; height: 100%; background: #ddd; display: flex; align-items: center; justify-content: center; }
.guide-placeholder svg { width: 28px; height: 28px; opacity: 0.35; }


.sub-layout {
    padding-bottom: 0;
	background:#fff;
}

.sub-layout .title-wrap {
    text-align: center;
    padding: 0 clamp(6rem,8.3vw,12rem) 5rem;
}

/* ===== SEC01 - 고정 배경 이미지 ===== */
#sec01 { position: relative; width: 100%; }
#sec01 .img-container { position: relative; width: 100%; height: 60vh; background-image: url('/assets/images/sub/info_01_bg1.jpg'); background-attachment: fixed; background-size: cover; background-position: center center; background-repeat: no-repeat; }
#sec01 .img-container::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.25); z-index: 1; }
#sec01 .img-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; text-align: center; color: #fff; white-space: nowrap; }
#sec01 .img-text .en { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 18px; font-weight: 300; letter-spacing: 0.15em; color: rgba(255,255,255,0.75); margin-bottom: 10px; }

#sec01 .img-container2 { background-image: url('/assets/images/sub/info_02_bg1.jpg');  }

.sec-about { width: 100%; }

/* 상단 인트로 */
.sa-intro { padding: 0px 20px 100px; background: #fff; }
.sa-intro-line { width: 1px; height: 100px; background: #ccc; margin: 0 auto 44px; }
.sa-intro p { color: #333; line-height: 1.6; }

/* 패널 래퍼 */
.sa-panels { display: flex; }

/* 개별 패널 */
.sa-panel { position: relative; flex: 1; aspect-ratio: 1 / 0.8; overflow: hidden; }
.sa-panel-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform 0.7s ease; }
.sa-panel:hover .sa-panel-bg { transform: scale(1.05); }
.sa-panel-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.32); z-index: 1; }

/* 패널 텍스트 */
.sa-panel-content { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); z-index: 2; padding: 0 40px; color: #fff; }
.sa-panel-title { font-family: 'Montserrat', sans-serif; font-size: 62px; font-weight: 700; color: #fff; line-height: 1; letter-spacing: -0.02em; margin-bottom: 30px; }
.sa-panel-desc { color: rgba(255,255,255,0.85); line-height: 1.9; }

/* ===== SEC VIDEO ===== */
.sec-video { padding: 140px 0; background: #fff; }
.sv-head { margin-bottom: 32px; }
.sv-title { color: #1a1a1a; line-height: 1.4; margin-bottom: 12px; }
.sv-desc {  line-height: 1.6; }
.sv-video-wrap { max-width: 1200px; margin: 0 auto;  }
.sv-video-wrap iframe{border-radius:30px}

/* ===== SEC04 ===== */
#sec04 { width: 100%; position: relative; }
.sec04-swiper { width: 100%; height: 100vh; position: relative; overflow: hidden; cursor: grab; }
.sec04-swiper:active { cursor: grabbing; }
 
/* 슬라이드 */
.sec04-slide-inner { width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; }
.sec04-slide-inner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0) 100%); }
 
/* 텍스트 오버레이 */
.sec04-cont-text { position: absolute; top: 48%; left: 8%; transform: translateY(-50%); z-index: 10; color: #fff; max-width: 1200px; transition: opacity 0.4s ease, transform 0.4s ease; }
.sec04-cont-text.is-changing { opacity: 0; transform: translateY(calc(-50% + 12px)); }
 
/* 번호 */
.sec04-num { display: block; color: rgba(255,255,255,0.55); letter-spacing: 0.2em; margin-bottom: 16px; }
 
/* 한글 타이틀 */
.sec04-ko-tit { color: #fff; line-height: 1.2; margin-bottom: 8px; word-break: keep-all; }
 
/* 영문 타이틀 */
.sec04-en-tit { font-family: 'Cormorant Garamond', serif; font-style: italic; color: rgba(255,255,255,0.75); letter-spacing: 0.04em; margin-bottom: 44px; }
 
/* 불릿 리스트 */
.sec04-list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.sec04-list li { position: relative; padding-left: 16px; color: rgba(255,255,255,0.8); line-height: 1.8; word-break: keep-all; }
.sec04-list li::before { content: '·'; position: absolute; left: 0; top: 0; color: rgba(255,255,255,0.6); font-size: 20px; line-height: 1.55; }
 
/* 네비게이션 */
.sec04-nav { position: absolute; bottom: 50px; z-index: 10; display: flex; align-items: center; gap: 14px; background: none; border: none; cursor: pointer; padding: 0; color: #fff; }
.sec04-nav--prev { left: 8%; }
.sec04-nav--next { right: 8%; }
.sec04-nav-arrow { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.2s, background 0.2s; }
.sec04-nav:hover .sec04-nav-arrow { border-color: #fff; background: rgba(255,255,255,0.15); }
.sec04-nav-tit { color: rgba(255,255,255,0.6); letter-spacing: 0.06em; transition: color 0.2s; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.sec04-nav:hover .sec04-nav-tit { color: #fff; }
 
/* ===== HISTORY TAB ===== */
.history-tab { padding: 140px 0; background: #fafafa; }
.history-wrap { margin: 0 auto; padding: 0 40px; display: flex; gap: 80px; align-items: flex-start; }
.history-title { flex-shrink: 0; width: 40%; color: #111; line-height: 1.5; letter-spacing: -0.02em; word-break: keep-all; position: sticky; top: 120px; align-self: flex-start; } 

/* 우측 컨텐츠 */
.tab-content { flex: 1; min-width: 0; }
 
/* 세로 바 */
.history-bar { position: relative; padding-left: 28px; }
.history-bar::before { content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: #e8e8e8; }
.history-actbar { position: absolute; left: 0; top: 0; width: 2px; height: 0; background: #035272; transition: height 0.2s ease; z-index: 1; }
 
/* 컨테이너 */
.history-container { display: flex; flex-direction: column; gap: 0; }
.history-cont-wrap { display: flex; flex-direction: column; gap: 0; padding-bottom: 60px; }
.history-cont { display: flex; flex-direction: column; gap: 0; padding-bottom: 40px; }
.history-cont:last-child { padding-bottom: 0; }
 
/* 연도 */
.history-cont-year { color: #111; line-height: 1; margin-bottom: 20px; letter-spacing: -0.02em; opacity: 0.2; transition: opacity 0.4s ease, color 0.4s ease; position: relative; }
.history-cont-year::before { content: ''; position: absolute; left: -52px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: #e8e8e8; border: 2px solid #e8e8e8; transition: background 0.3s, border-color 0.3s; }
.history-cont-year.act { opacity: 1; color: #035272; }
.history-cont-year.act::before { background: #035272; border-color: #035272; }
 
/* 항목 */
.history-cont-txt { display: flex; align-items: flex-start; gap: 0; padding: 10px 0; border-bottom: 1px solid #f0f0f0; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; }
.history-cont-txt:last-child { border-bottom: none; }
.history-cont-txt.act { opacity: 1; transform: translateY(0); }
.history-cont-txt .txt { color: #444; line-height: 1.7; word-break: keep-all; }
 

/* ===== ROADMAP SECTION ===== */
.roadmap-section { padding: 100px 0; background: #fff; }
.roadmap-wrap { max-width: 1400px; margin: 0 auto; padding: 0 40px; overflow-x: auto; }
.roadmap-inner { display: flex; align-items: stretch; min-width: 620px; gap: 0; }

/* 개별 그룹 */
.roadmap-group { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 20px; }

/* 상단 헤드 */
.roadmap-head { padding-bottom: 14px; min-height: 106px; }
.roadmap-icon-wrap { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.roadmap-icon-wrap.amber { background: #FAEEDA; }
.roadmap-icon-wrap.blue { background: #E6F1FB; }

/* 화살표 행 */
.roadmap-arrow-row { display: flex; align-items: center; margin-bottom: 12px; }
.roadmap-arrow-line { flex: 1; height: 1.5px; background: #222; position: relative; }
.roadmap-arrow-line::after {content: '';position: absolute;right: -10px;top: 50%;transform: translateY(-50%);border: 7px solid transparent;border-left: 13px solid #222;}

/* 항목 박스 */
.roadmap-box { border-radius: 8px; padding: 16px 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; flex: 1; }
.roadmap-box.amber { background: #FAEEDA; border: 1.5px solid #EF9F27; }
.roadmap-box.blue { background: #E6F1FB; border: 1.5px solid #378ADD; }

/* 개별 항목 */
.roadmap-item { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px;  color: #333; text-align: center; line-height: 1.4; word-break: keep-all; }

/* 섹션 간 연결선 */
.roadmap-conn { display: flex; align-items: center; padding-top: 106px; width: 28px; flex-shrink: 0; }
.roadmap-conn-line { width: 100%; height: 1.5px; background: #222; position: relative; }
.roadmap-conn-line::after { content: ''; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-left: 7px solid #222; }


.best-class-nav { display: flex; align-items: center; gap: 8px; }
.best-class-prev, .best-class-next { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1.5px solid #ddd; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #333; flex-shrink: 0; transition: all 0.2s; }
.best-class-prev:hover, .best-class-next:hover { background: #222; border-color: #222; color: #fff; }
.best-class-prev.swiper-button-disabled, .best-class-next.swiper-button-disabled { opacity: 0.35; cursor: default; pointer-events: none; }
/* ===== BEST CLASS SWIPER ===== */
.best-class-swiper { overflow: visible; }
.best-class-swiper .swiper-wrapper { align-items: stretch; }
.best-class-swiper .class-card { height: auto; }

/* 우측 페이드 아웃 */
.best-class-inner { position: relative; }


/* ===========================================
   SUB PAGE MEDIA QUERIES
=========================================== */

/* ===== 1024px ===== */
@media (max-width: 1024px) {
  .sub-detail-inner { grid-template-columns: 1fr 300px; gap: 30px; }

  .sa-panel-title { font-size: 44px; }
  .sa-panel-content { padding: 0 28px; }

  .history-wrap { gap: 50px; }
  .history-title { font-size: 48px !important; width: auto; }

  .sec04-cont-text { left: 6%; max-width: 480px; }
  .sec04-ko-tit { font-size: 36px !important; }
  .sec04-en-tit { font-size: 28px !important; margin-bottom: 28px; }
}

/* ===== 768px ===== */
@media (max-width: 768px) {
  /* 서브 레이아웃 */
  .sub-layout .title-wrap { padding: 0 24px 3rem; }

  /* 클래스 뷰 페이지 */
  .sub-detail-wrap { padding: 40px 0 80px; }
  .sub-detail-inner { grid-template-columns: 1fr; padding: 0 20px; gap: 24px; }
  .sd-right { position: static; }
  .sd-price-card { padding: 22px 18px; }
  .sd-play-btn svg { width: 52px; height: 52px; }

  /* sec01 고정 배경 */
  #sec01 .img-container { background-attachment: scroll; height: 50vh; }
  #sec01 .img-text { white-space: normal; width: calc(100% - 48px); text-align: center; }
  #sec01 .img-text .en { font-size: 15px; }

  /* sec-about 패널 */
  .sa-panels { flex-direction: column; }
  .sa-panel { aspect-ratio: 4 / 3; }
  .sa-panel-title { font-size: 36px; margin-bottom: 16px; }
  .sa-panel-desc { font-size: 14px !important; line-height: 1.7; }
  .sa-panel-content { padding: 0 24px; }

  /* sa-intro */
  .sa-intro { padding: 0 20px 60px; }
  .sa-intro-line { height: 60px; margin-bottom: 28px; }

  /* sec-video */
  .sec-video { padding: 60px 0; }
  .sv-head { padding: 0 20px; }
  .sv-title { font-size: 26px !important; }
  .sv-desc { font-size: 15px !important; }
  .sv-video-wrap { padding: 0 20px; }
  .sv-video-wrap iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 16px; }

  /* history-tab */
  .history-tab { padding: 60px 0; }
  .history-wrap { flex-direction: column; gap: 32px; padding: 0 20px; }
  .history-title { width: 100%; position: static; font-size: 36px !important; }
  .history-cont-year { font-size: 28px !important; }
  .history-cont-year::before { left: -36px; width: 14px; height: 14px; }
  .history-bar { padding-left: 20px; }
  .history-cont-txt .txt { font-size: 14px !important; }

  /* sec04 슬라이드 */
  .sec04-swiper { height: 55svh; }
  .sec04-cont-text { left: 24px; right: 24px; max-width: 100%; top: auto; bottom: 120px; transform: none; }
  .sec04-cont-text.is-changing { transform: translateY(12px); }
  .sec04-ko-tit { font-size: 28px !important; margin-bottom: 6px; }
  .sec04-en-tit { font-size: 20px !important; margin-bottom: 20px; }
  .sec04-list { gap: 10px; }
  .sec04-list li { font-size: 13px !important; line-height: 1.6; }
  .sec04-nav--prev { left: 24px; bottom: 36px; }
  .sec04-nav--next { right: 24px; bottom: 36px; }
  .sec04-nav-tit { display: none; }
  .sec04-nav-arrow { width: 34px; height: 34px; }

  /* roadmap */
  .roadmap-section { padding: 60px 0; }
  .roadmap-wrap { padding: 0 20px; }
  .roadmap-inner { flex-direction: column; min-width: 0; }
  .roadmap-conn { display: none; }
  .roadmap-group { padding: 14px 0; }
  .roadmap-head { min-height: auto; margin-bottom: 8px; }
  .roadmap-q { font-size: 18px !important; }
  .roadmap-box { min-height: 60px; }
  .roadmap-item { font-size: 14px !important; padding: 6px 10px; }

  /* best-class 서브 */
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .class-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ===== 480px ===== */
@media (max-width: 480px) {
  /* 서브 레이아웃 타이틀 */
  .sub-layout .title-wrap h2 { font-size: 28px !important; }
  .sub-layout .title-wrap p { font-size: 15px !important; }

  /* 클래스 뷰 */
  .sub-detail-inner { padding: 0 16px; }
  .sd-play-btn svg { width: 44px; height: 44px; }
  .sd-title { font-size: 20px !important; }
  .sd-desc { font-size: 13px !important; }
  .sd-curriculum-item { padding: 12px 14px; gap: 8px; }
  .sd-curriculum-title { font-size: 13px !important; }
  .sd-price-top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sd-discount-rate { font-size: 28px !important; }
  .sd-price-num { font-size: 24px !important; }
  .sd-auth-btns { grid-template-columns: 1fr; }
  .sd-related-tabs { gap: 4px; }

  /* sec01 */
  #sec01 .img-container { height: 40vh; }
  #sec01 .img-text p { font-size: 15px !important; line-height: 1.7; }

  /* sa-about */
  .sa-panel { aspect-ratio: 3 / 2; }
  .sa-panel-title { font-size: 28px; margin-bottom: 12px; }
  .sa-panel-desc { font-size: 13px !important; }
  .sa-intro p { font-size: 16px !important; }

  /* sec-video */
  .sv-title { font-size: 22px !important; }

  /* history */
  .history-tab { padding: 48px 0; }
  .history-wrap { padding: 0 16px; }
  .history-title { font-size: 28px !important; }
  .history-cont-year { font-size: 22px !important; }
  .history-cont-year::before { left: -28px; width: 10px; height: 10px; }

  /* sec04 */
  .sec04-ko-tit { font-size: 22px !important; }
  .sec04-en-tit { font-size: 16px !important; margin-bottom: 16px; }
  .sec04-list li { font-size: 12px !important; }
  .sec04-cont-text { bottom: 100px; left: 16px; right: 16px; }

  /* roadmap */
  .roadmap-section { padding: 48px 0; }
  .roadmap-wrap { padding: 0 16px; }
  .roadmap-q { font-size: 16px !important; }
  .roadmap-item { font-size: 13px !important; padding: 5px 8px; }

  /* best-class 서브 */
  .best-class-section { padding: 48px 0; }
  .best-class-inner { padding: 0 16px; }
  .class-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .class-title { font-size: 13px !important; }
  .class-desc { font-size: 11px !important; }
  .section-title { font-size: 24px !important; }
  .class-tabs { gap: 4px; }
  .tab-btn { padding: 4px 8px; font-size: 11px !important; height: 28px; }
}