/* ============================================================
   www 리뉴얼 (2026-07) — GNB 6개 카테고리 재편 + 상단 CTA
   PDF: 홈페이지 리뉴얼 - 260718 기준
   기존 레거시 /components/bower/css 위에 얹는 보강 스타일
   ============================================================ */

/* 상단 CTA 버튼 2종 (레벨테스트 예약 / 가맹 상담 신청) */
.header_top_buttons ul { display: flex; gap: 8px; align-items: center; }
.header_top_buttons .cta {
    display: inline-block; padding: 7px 16px; border-radius: 4px;
    font-size: 13px; font-weight: 700; color: #fff !important; line-height: 1.2;
    letter-spacing: -0.02em; white-space: nowrap;
}
.header_top_buttons .cta-leveltest { background-color: #96183d; }
.header_top_buttons .cta-leveltest:hover { background-color: #7d1333; }
.header_top_buttons .cta-consult { background-color: #1f5fb2; }
.header_top_buttons .cta-consult:hover { background-color: #184c8f; }

/* ===== 메인 비주얼 리뉴얼 (section0) — PDF 메인 3종 자동 전환 ===== */
.main-visual-item .main-visual-pc-img.mv-hero1 { background: #f4f6f8 url(/images/mainRenew1.png) no-repeat 50% 50%; }
.main-visual-item .main-visual-pc-img.mv-hero2 { background: #f4f6f8 url(/images/mainRenew2.png) no-repeat 50% 50%; }
.main-visual-item .main-visual-pc-img.mv-hero3 { background: #4a0d18 url(/images/mainRenew3.jpg) no-repeat 50% 50%; }

.mv-caption-wrap { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mv-caption { max-width: 1280px; height: 100%; margin: 0 auto; position: relative; padding: 0 24px; }
.mv-caption-inner { position: absolute; top: 50%; left: 24px; transform: translateY(-50%); }
/* 기본 글씨는 얇게, 강조 단어(em)만 두껍게 — PDF 동일 */
.mv-title { font-size: 60px; font-weight: 400; line-height: 1.28; letter-spacing: -1.5px; margin-bottom: 26px; }
.mv-title em { font-weight: 900; font-style: normal; }
.mv-desc { font-size: 21px; font-weight: 500; line-height: 1.6; letter-spacing: -0.5px; }

/* 밝은 배경(표현영어·AI CLASS): 진한 글씨 + 빨강 강조 */
.mv-dark .mv-title { color: #1E293B; }
.mv-dark .mv-title em { color: #C8102E; }
.mv-dark .mv-desc { color: #475569; }
/* 어두운 배경(말하기대회): 흰 글씨 */
.mv-light .mv-title { color: #fff; }
.mv-light .mv-title em { color: #fff; }
.mv-light .mv-desc { color: rgba(255,255,255,0.9); }

@media all and (max-width: 1280px) {
	.mv-title { font-size: 48px; }
	.mv-desc { font-size: 18px; }
}
/* 태블릿: 텍스트 뒤에 반투명 박스(어두운 글씨=밝게, 흰 글씨=어둡게) — 인물과 겹쳐도 가독 유지 */
@media all and (max-width: 1080px) {
	.mv-title { font-size: 40px; }
	.mv-desc { font-size: 16px; }
	.mv-caption-inner { max-width: 62%; padding: 22px 26px; border-radius: 14px; }
	.mv-caption-inner.mv-dark { background: rgba(255,255,255,0.78); backdrop-filter: blur(2px); }
	.mv-caption-inner.mv-light { background: rgba(25,6,13,0.6); backdrop-filter: blur(2px); }
}
/* 모바일: 텍스트를 하단 스크림(가독성 배경) 위에 배치, 인물이 보이도록 우측 정렬 */
@media all and (max-width: 800px) {
	.mv-caption { padding: 0; }
	.mv-caption-inner {
		left: 0; right: 0; bottom: 0; top: auto; transform: none; max-width: none;
		padding: 56px 20px 30px; box-sizing: border-box; text-align: left; border-radius: 0;
	}
	.mv-caption-inner.mv-dark { background: linear-gradient(to top, rgba(255,255,255,0.97) 72%, rgba(255,255,255,0)); backdrop-filter: none; }
	.mv-caption-inner.mv-light { background: linear-gradient(to top, rgba(25,6,13,0.94) 72%, rgba(25,6,13,0)); backdrop-filter: none; }
	.mv-title { font-size: 26px; margin-bottom: 10px; line-height: 1.32; letter-spacing: -0.5px; }
	.mv-desc { font-size: 13px; line-height: 1.55; }
	.main-visual-item .main-visual-pc-img.mv-hero1,
	.main-visual-item .main-visual-pc-img.mv-hero2,
	.main-visual-item .main-visual-pc-img.mv-hero3 { background-position: 72% 28% !important; }
}
@media all and (max-width: 480px) {
	.mv-title { font-size: 22px; }
	.mv-desc { font-size: 12px; }
	.mv-caption-inner { padding: 34px 16px 24px; }
}

/* GNB 6개 카테고리 — 항목 폭 축소(6개가 한 줄에 들어가도록)
   레거시는 5개 기준 padding 0 44px → 6개에선 넘쳐서 마지막(커뮤니티)이 줄바꿈됨 */
#gnb .gnb-wrapper > li > a { padding: 0 26px; }
@media all and (max-width: 1440px) { #gnb .gnb-wrapper > li > a { padding: 0 20px; } }
@media all and (max-width: 1200px) { #gnb .gnb-wrapper > li > a { padding: 0 14px; font-size: 18px; } }

/* 서브페이지 GNB(sub-menu 모드) 드롭다운 — 레거시 5개 기준 위치별 고정폭
   (nth-child 300/610px, last-child 90px)이 6개 구조와 안 맞아 커뮤니티(마지막)가
   90px로 눌려 세로로 접힘 → 항목 수에 맞춰 자동 폭 + 한 줄 유지, 가장자리 정렬 보정 */
#gnb.sub-menu .gnb-wrapper > li .gnb-2dep {
	width: auto !important;
	left: 50% !important;
	margin-left: 0 !important;
	transform: translateX(-50%);
	white-space: nowrap;
}
#gnb.sub-menu .gnb-wrapper > li .gnb-2dep ul li { float: none; display: inline-block; }
#gnb.sub-menu .gnb-wrapper > li:first-child .gnb-2dep { left: 0 !important; transform: none; }
#gnb.sub-menu .gnb-wrapper > li:last-child .gnb-2dep { left: auto !important; right: 0; transform: none; }

/* 전국 캠퍼스 찾기 — 위치기반 검색 + 지도 (레거시 introduce + leveltest/index 통합) */
.lt-search { margin-bottom: 16px; }
.lt-search-row { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; width: 100%; box-sizing: border-box; }
.lt-search select, .lt-search input[type="text"] {
	height: 42px; padding: 0 10px; border: 1px solid #E2E8F0; border-radius: 6px;
	font-size: 14px; background: #fff; box-sizing: border-box;
}
/* 폭 비율(flex-basis:0 기준): 시/도·시군구는 좁게(1), 캠퍼스명은 넓게(6) */
.lt-search select { flex: 1 1 0; min-width: 88px; }
.lt-search input[type="text"] { flex: 6 1 0; min-width: 0; }
/* 버튼은 글자수 차이('검색' 2자 vs '현재위치 기반' 6자)로 폭이 두 배 가까이 벌어진다.
   최소폭을 맞춰 나란히 놓았을 때 한쪽만 유난히 작아 보이지 않게 한다 */
.lt-search .lt-btn-search, .lt-search .lt-btn-locate { flex: 0 0 auto; white-space: nowrap; min-width: 96px; }
/* 좁은 화면에서는 줄바꿈 허용 */
@media all and (max-width: 760px) {
	.lt-search-row { flex-wrap: wrap; }
	.lt-search select { flex: 1 1 30%; }
	.lt-search input[type="text"] { flex: 1 1 100%; }
	/* 두 버튼이 마지막 줄을 절반씩 나눠 쓴다 — 자연폭으로 두면 오른쪽에 빈 공간이 남는다 */
	.lt-search .lt-btn-search, .lt-search .lt-btn-locate { flex: 1 1 0; min-width: 0; padding: 0 10px; }
}
.lt-btn-search, .lt-btn-locate {
	height: 42px; padding: 0 18px; border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer; border: 0;
}
.lt-btn-search { background: #7B2D3B; color: #fff; }
.lt-btn-search:hover { background: #5A1F2B; }
.lt-btn-locate { background: #fff; color: #7B2D3B; border: 1px solid #7B2D3B; }
.lt-btn-locate:hover { background: #F5E6E8; }

.lt-body { display: flex; gap: 16px; height: calc(100vh - 360px); min-height: 480px; }
.lt-map { flex: 1; position: relative; border-radius: 8px; overflow: hidden; border: 1px solid #E2E8F0; min-height: 480px; }
.lt-map #map { width: 100%; height: 100%; min-height: 480px; }
.lt-map-close { display: none; }
.lt-list { width: 380px; overflow-y: auto; border: 1px solid #E2E8F0; border-radius: 8px; }
.lt-list ul { padding: 0; margin: 0; list-style: none; }
.lt-item { display: flex; align-items: center; gap: 10px; padding: 16px; border-bottom: 1px solid #EEF2F6; }
.lt-item:last-child { border-bottom: 0; }
.lt-item-info { flex: 1; cursor: pointer; }
.lt-item-name { font-size: 16px; font-weight: 700; color: #1E293B; margin-bottom: 6px; }
.lt-btn-map { display: none; font-size: 12px; color: #7B2D3B; margin-left: 6px; text-decoration: underline; }
.lt-item-addr { font-size: 13px; color: #64748B; line-height: 1.5; margin-bottom: 4px; }
.lt-item-tel a { font-size: 13px; color: #7B2D3B; font-weight: 600; }
.lt-item-btn .lt-btn-reserve {
	display: inline-block; white-space: nowrap; padding: 10px 14px; border-radius: 6px;
	background: #7B2D3B; color: #fff; font-size: 13px; font-weight: 700;
}
.lt-item-btn .lt-btn-reserve:hover { background: #5A1F2B; }
.lt-empty { padding: 40px 20px; text-align: center; color: #94A3B8; }

/* 모바일: 지도는 기본 숨김, '지도보기' 클릭 시 전체 오버레이 */
@media all and (max-width: 1000px) {
	.lt-body { display: block; height: auto; }
	.lt-list { width: 100%; }
	.lt-btn-map { display: inline; }
	.lt-map { display: none; position: fixed; inset: 0; z-index: 9999; border-radius: 0; border: 0; height: 100vh; }
	.lt-map.active { display: block; }
	.lt-map-close {
		display: block; position: absolute; top: 12px; right: 12px; z-index: 10; height: 40px; padding: 0 16px;
		background: rgba(0,0,0,0.7); color: #fff; border: 0; border-radius: 6px; font-size: 14px; cursor: pointer;
	}
}

/* 폰 — '레벨테스트 예약'(7자)이 nowrap 이라 360px 화면에서 가로의 1/3을 가져간다.
   캠퍼스명·주소가 밀리므로 버튼을 아래로 내려 한 줄을 다 쓰게 한다 (누르기도 쉬워진다) */
@media all and (max-width: 560px) {
	.lt-item { display: block; padding: 14px 16px; }
	.lt-item-btn { margin-top: 10px; }
	.lt-item-btn .lt-btn-reserve { display: block; padding: 11px 0; text-align: center; }
}

/* ===== 메인 : EiE 교육 철학 섹션 (언어는 공부가 아니라 습득) ===== */
.philo-section { background: #fff; padding: 90px 0 100px; }
.philo-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; text-align: center; }
.philo-eyebrow { font-size: 15px; font-weight: 700; letter-spacing: 2px; color: #96183d; text-transform: uppercase; margin-bottom: 14px; }
.philo-title { font-size: 40px; font-weight: 400; color: #1E293B; letter-spacing: -1px; margin-bottom: 16px; }
.philo-title em { font-style: normal; font-weight: 900; }
.philo-title em:last-child { color: #96183d; }
.philo-lead { font-size: 18px; color: #64748B; margin-bottom: 50px; }
.philo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: left; }
.philo-card {
	background: #F8FAFC; border: 1px solid #EEF2F6; border-radius: 14px; padding: 30px 26px;
	transition: transform .25s, box-shadow .25s, border-color .25s;
}
.philo-card:hover { transform: translateY(-6px); border-color: #96183d33; box-shadow: 0 14px 30px rgba(150,24,61,0.10); }
.philo-num { display: inline-block; font-size: 15px; font-weight: 800; color: #96183d; letter-spacing: 1px; margin-bottom: 14px; }
.philo-card h4 { font-size: 19px; font-weight: 800; color: #1E293B; margin-bottom: 12px; line-height: 1.35; letter-spacing: -0.5px; }
.philo-card p { font-size: 14.5px; color: #64748B; line-height: 1.65; letter-spacing: -0.3px; }
.philo-bridge { margin-top: 46px; font-size: 19px; color: #475569; }
.philo-bridge strong { color: #96183d; font-weight: 900; }
@media all and (max-width: 1080px) {
	.philo-grid { grid-template-columns: repeat(2, 1fr); }
	.philo-title { font-size: 32px; }
}
@media all and (max-width: 620px) {
	.philo-section { padding: 60px 0 70px; }
	.philo-grid { grid-template-columns: 1fr; }
	.philo-title { font-size: 25px; }
	.philo-lead { font-size: 15px; margin-bottom: 30px; }
	.philo-bridge { font-size: 15px; margin-top: 30px; }
}

/* 말하기대회 서브 비주얼 (수상갤러리·대회영상) — 메인 히어로 3(말하기대회) 이미지·텍스트 재사용
   주의: #header가 fixed(160px)로 상단을 덮으므로 레거시 #visual(640px)처럼 높이 확보 + 텍스트를 헤더 아래로 */
#visual.speech-hero {
	position: relative; height: 640px; overflow: hidden;
	background: #490a15;
}
/* 배경 이미지는 전용 레이어가 들고 있다 — 표현영어(.visual-img-con)와 같은 구조라
   줌인을 transform 으로 처리할 수 있다 (background-size 애니메이션보다 매끄럽다) */
#visual.speech-hero .speech-hero-bg {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	background-repeat: no-repeat; background-position: 50% 28%; background-size: cover;
	background-image: url(/images/mainRenew3.jpg);   /* 페이지 클래스(sp-*)가 덮어쓴다 */
}
#visual.speech-hero .speech-hero-inner {
	position: relative; z-index: 1;                  /* 배경 레이어 위로 */
	max-width: 1280px; height: 100%; margin: 0 auto; padding: 240px 24px 0;
	display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;
}
#visual.speech-hero .mv-title { font-size: 44px; margin-bottom: 14px; color: #fff; }
#visual.speech-hero .mv-title em { color: #fff; }
#visual.speech-hero .mv-desc { font-size: 17px; color: rgba(255,255,255,0.9); }

/* 진입 모션 — 표현영어와 동일한 규칙·타이밍 (sub.js 가 #visual 에 .active 를 붙인다).
   기존 모션은 .visual-img-con / .visual-tit / .visual-sub-txt 를 겨냥해서
   새 구조(speech-hero)에는 하나도 걸리지 않아 정지 화면이었다 */
#visual.speech-hero .speech-hero-bg {
	transform: scale(1.1, 1.1);
	transition: transform 5000ms ease-in-out;
}
#visual.speech-hero.active .speech-hero-bg {
	transform: scale(1, 1) rotate(0.002deg);         /* rotate 0.002deg — 축소 시 계단현상 완화(레거시 동일) */
}
#visual.speech-hero .mv-title,
#visual.speech-hero .mv-desc {
	opacity: 0; transform: translateY(30px);
	transition: opacity 1s, transform 1s;
}
#visual.speech-hero .mv-title { transition-delay: 0.3s; }
#visual.speech-hero .mv-desc  { transition-delay: 0.5s; }
#visual.speech-hero.active .mv-title,
#visual.speech-hero.active .mv-desc { opacity: 1; transform: translateY(0); }

/* 모션 최소화를 원하는 사용자에게는 움직임 없이 바로 보여준다 */
@media (prefers-reduced-motion: reduce) {
	#visual.speech-hero .speech-hero-bg,
	#visual.speech-hero .mv-title,
	#visual.speech-hero .mv-desc { transition: none; }
	#visual.speech-hero .speech-hero-bg { transform: none; }
	#visual.speech-hero .mv-title,
	#visual.speech-hero .mv-desc { opacity: 1; transform: none; }
}
@media all and (max-width: 1080px) {
	#visual.speech-hero { height: 520px; }
	#visual.speech-hero .speech-hero-inner { padding-top: 200px; }
	#visual.speech-hero .mv-title { font-size: 34px; }
	#visual.speech-hero .mv-desc { font-size: 15px; }
}
@media all and (max-width: 800px) {
	#visual.speech-hero { height: 320px; }
	#visual.speech-hero .speech-hero-bg { background-position: 50% 32%; }
	#visual.speech-hero .speech-hero-inner { padding: 70px 16px 0; }
	#visual.speech-hero .mv-title { font-size: 24px; margin-bottom: 8px; }
	#visual.speech-hero .mv-desc { font-size: 12px; }
}
/* 폰 구간 — 높이를 모바일 컷 비율(750x416 = 1.80:1)에 맞춰 잡으면 잘리는 곳 없이 다 보인다.
   320px 로 두면 390px 폭에서 화면비가 1.22:1 이 되어 좌우 32% 가 잘린다.
   56vw ≈ 1/1.80 — 폭이 얼마든 이미지와 같은 비율이 된다 (타이틀·설명은 상단 70px 여백 아래로 충분히 들어간다) */
@media all and (max-width: 560px) {
	#visual.speech-hero { height: 56vw; min-height: 180px; }
	#visual.speech-hero .speech-hero-bg { background-position: 50% 50%; }
}

/* 대회 영상 (/speech/video) — 유튜브형 썸네일 그리드 + 레이어 재생 */
.sv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 20px; }
.sv-item { cursor: pointer; }
.sv-thumb { position: relative; border-radius: 10px; overflow: hidden; background: #000; aspect-ratio: 16/9; }
.sv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.sv-item:hover .sv-thumb img { transform: scale(1.05); }
.sv-play {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: #fff; background: rgba(0,0,0,0.18); opacity: 0; transition: opacity .2s;
}
.sv-item:hover .sv-play { opacity: 1; }
.sv-subject { margin-top: 10px; font-size: 15px; font-weight: 600; color: #1E293B; line-height: 1.45;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media all and (max-width: 1000px) { .sv-grid { grid-template-columns: repeat(2, 1fr); } }
@media all and (max-width: 560px) { .sv-grid { grid-template-columns: 1fr; } }

/* 재생 레이어 */
.sv-layer {
	display: none; position: fixed; inset: 0; z-index: 10000;
	background: rgba(0,0,0,0.82); align-items: center; justify-content: center; padding: 20px;
}
.sv-layer.active { display: flex; }
.sv-layer-inner { width: min(960px, 96vw); position: relative; }
.sv-layer-close {
	position: absolute; top: -46px; right: 0; background: none; border: 0; color: #fff; cursor: pointer; padding: 6px;
}
.sv-layer-close:hover { color: #F5E6E8; }
.sv-layer-title { color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 10px; padding-right: 50px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-layer-player { aspect-ratio: 16/9; background: #000; border-radius: 8px; overflow: hidden; }
.sv-layer-player iframe { width: 100%; height: 100%; border: 0; }

/* 준비중(stage3 미개발) 메뉴 항목 표시 */
#gnb .gnb-2dep a.prep,
#gnbM .gnb-2dep a.prep { position: relative; }
#gnb .gnb-2dep a.prep span,
#gnbM .gnb-2dep a.prep span { opacity: 0.55; }
#gnb .gnb-2dep a.prep::after,
#gnbM .gnb-2dep a.prep::after {
    content: '준비중'; margin-left: 6px; font-size: 10px; font-weight: 600;
    color: #96183d; background: #f6e7eb; border-radius: 3px; padding: 1px 5px;
    vertical-align: middle; letter-spacing: -0.03em;
}

/* ============================================================
 * 표현영어 서브 상단 비주얼 — 페이지별 이미지 (2026-09 시안 교체)
 *   기존 공용 subVisual01.png(layout.css .sub-visual-company)을 페이지 클래스로 덮어쓴다.
 *   원본 1918x820 — 640px 비주얼 영역에 cover 로 채운다 (모바일 포함).
 * ============================================================ */
#visual[class*="ev-"] .visual-img-con { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; }
#visual.ev-main .visual-img-con    { background-image: url(/images/expression/main.png); }
#visual.ev-lesson .visual-img-con  { background-image: url(/images/expression/lesson.png); }
#visual.ev-online .visual-img-con  { background-image: url(/images/expression/online.png); }
#visual.ev-step .visual-img-con    { background-image: url(/images/expression/step.png); }
#visual.ev-rookies .visual-img-con { background-image: url(/images/expression/rookies.png); }
#visual.ev-leaders .visual-img-con { background-image: url(/images/expression/leaders.png); }
#visual.ev-mec .visual-img-con     { background-image: url(/images/expression/mec.png); }
#visual.ev-global .visual-img-con  { background-image: url(/images/expression/global.png); }

/* 새 시안 배경이 밝은 톤(노랑·크림)이라 기존 흰 텍스트가 묻힌다 — 표현영어 비주얼은 어두운 텍스트 */
#visual[class*="ev-"] .visual-txt-con,
#visual[class*="ev-"] .visual-tit,
#visual[class*="ev-"] .visual-sub-txt {
	color: #1F2430;
	text-shadow: 0 1px 10px rgba(255, 255, 255, .45);   /* 배경 사진 위 가독 보강 */
}

/* 사진 디테일과 텍스트가 겹칠 때를 대비한 가독 스크림 —
   왼쪽(타이틀 영역)과 상단(GNB 영역)에 밝은 그라데이션을 깔아 어떤 이미지든 글자가 묻히지 않게 한다 */
#visual[class*="ev-"] .visual-img-con::after {
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .72) 0, rgba(255, 255, 255, 0) 130px),
		linear-gradient(90deg, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, .5) 34%, rgba(255, 255, 255, 0) 62%);
}

/* 캐치프레이즈 서체 — 기본(KoPubWorld돋움 weight 100)이 배너에서 얇고 약해 보여
   사이트 제목용 서체 NanumSquare ExtraBold 로 교체 (layout.css 에서 이미 로드됨) */
#visual[class*="ev-"] .visual-sub-txt {
	font-family: 'NanumSquare', 'KoPubWorldDotum', Dotum, sans-serif;
	font-weight: 800;
	font-size: 46px;
	line-height: 1.45;
	letter-spacing: -0.5px;
}

/* 말하기대회 상단 비주얼 — 페이지별 이미지 (2026-09 시안 교체)
   원본 1920x640, 어두운 톤이라 기존 흰 텍스트 유지. 공용 배경(mainRenew3.jpg)을 페이지 클래스로 덮어쓴다.
   이미지는 기존 말하기대회 자산과 같은 /images/speaking/ 에 둔다 */
#visual.speech-hero.sp-intro   .speech-hero-bg { background-image: url(/images/speaking/intro.png); }
#visual.speech-hero.sp-gallery .speech-hero-bg { background-image: url(/images/speaking/gallery.png); }
#visual.speech-hero.sp-video   .speech-hero-bg { background-image: url(/images/speaking/video.png); }

/* 모바일 컷 (750x416) — 표현영어와 같은 이유로 800px 이하에서 갈아 끼운다.
   원본 3.00:1 을 좁은 화면에 cover 로 채우면 좌우가 크게 잘린다 */
@media all and (max-width: 800px) {
	#visual.speech-hero.sp-intro   .speech-hero-bg { background-image: url(/images/speaking/intro_m.png); }
	#visual.speech-hero.sp-gallery .speech-hero-bg { background-image: url(/images/speaking/gallery_m.png); }
	#visual.speech-hero.sp-video   .speech-hero-bg { background-image: url(/images/speaking/video_m.png); }
}

/* 어두운 상단 비주얼 페이지(body.dark-hero — 말하기대회 등) — GNB 2차 메뉴를 흰 텍스트로.
   밝은 비주얼 페이지(표현영어)는 기존 어두운 텍스트 + 상단 스크림 그대로 쓴다 */
body.dark-hero #gnb.sub-menu .gnb-wrapper > li .gnb-2dep ul li a { color: rgba(255, 255, 255, .8); text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
body.dark-hero #gnb.sub-menu .gnb-wrapper > li .gnb-2dep ul li a:hover,
body.dark-hero #gnb.sub-menu .gnb-wrapper > li .gnb-2dep ul li.on a { color: #fff; font-weight: 600; }
body.dark-hero #gnb.sub-menu .gnb-wrapper > li .gnb-2dep ul li a:hover span:before,
body.dark-hero #gnb.sub-menu .gnb-wrapper > li .gnb-2dep ul li.on a span:before { background-color: #fff; }

/* 캠퍼스 찾기 상단 비주얼 (2026-09 시안 — 밝은 톤이라 ev- 공통 처리(어두운 텍스트·스크림·서체) 재사용)
   신규 캠퍼스 소식 페이지용 이미지는 /images/campus/news.png 준비됨 — 페이지 구현 시 ev-news 클래스로 사용 */
#visual.ev-find .visual-img-con { background-image: url(/images/campus/find.png); }
#visual.ev-news .visual-img-con { background-image: url(/images/campus/news.png); }

/* 가맹 안내 상단 비주얼 (2026-09 시안 — 개설 안내·가맹 상담 신청만, EiE 가맹 안내(info)는 별도 랜딩 유지) */
#visual.ev-pt-process .visual-img-con { background-image: url(/images/partners/process.png); }
#visual.ev-pt-qna .visual-img-con     { background-image: url(/images/partners/qna.png); }

/* 커뮤니티 상단 비주얼 (2026-09 시안 — 공지사항·행사일정만, 나머지 커뮤니티 페이지는 기존 공용 비주얼 유지) */
#visual.ev-comm-notice .visual-img-con   { background-image: url(/images/community/notice.png); }
#visual.ev-comm-schedule .visual-img-con { background-image: url(/images/community/schedule.png); }

/* ============================================================
 * 상단 비주얼 — 모바일 대응
 *
 * 원본은 1920x600(3.20:1)인데 폰에서는 비주얼 영역이 208px 높이라
 * (layout_responsive.css, 1000px 이하) 화면 비율이 1.7~1.9:1 이 된다.
 * cover 로 채우면 좌우 46% 가 잘려 오른쪽 피사체가 반토막 난다.
 *
 * → 레거시가 subVisual01m.png 를 두던 방식 그대로, 페이지마다
 *   750x416(1.80:1) 모바일 컷(_m.png)을 두고 갈아 끼운다.
 *   원본에서 오른쪽 1082x600 을 잘라 축소한 것이라 피사체가 온전히 들어오고
 *   왼쪽에 타이틀용 여백이 남는다. 용량도 1MB 대 → 140KB 대로 준다.
 *
 * 교체 시점을 560px 로 잡은 이유:
 *   화면비(폭/208)가 이미지 원본비(3.20)보다 작아질수록 원본은 좌우가 잘리고,
 *   모바일 컷(1.80)보다 커질수록 모바일 컷은 위아래가 잘린다.
 *   두 손해가 같아지는 지점이 폭 500px 부근 — 그보다 좁으면 모바일 컷이 유리하다.
 *   (560px 이상 태블릿 구간은 원본이 더 잘 맞으므로 그대로 둔다)
 * ============================================================ */
@media all and (max-width: 560px) {
	#visual.ev-main .visual-img-con    { background-image: url(/images/expression/main_m.png); }
	#visual.ev-lesson .visual-img-con  { background-image: url(/images/expression/lesson_m.png); }
	#visual.ev-online .visual-img-con  { background-image: url(/images/expression/online_m.png); }
	#visual.ev-step .visual-img-con    { background-image: url(/images/expression/step_m.png); }
	#visual.ev-rookies .visual-img-con { background-image: url(/images/expression/rookies_m.png); }
	#visual.ev-leaders .visual-img-con { background-image: url(/images/expression/leaders_m.png); }
	#visual.ev-mec .visual-img-con     { background-image: url(/images/expression/mec_m.png); }
	#visual.ev-global .visual-img-con  { background-image: url(/images/expression/global_m.png); }
	#visual.ev-find .visual-img-con    { background-image: url(/images/campus/find_m.png); }
	#visual.ev-news .visual-img-con    { background-image: url(/images/campus/news_m.png); }
	#visual.ev-pt-process .visual-img-con    { background-image: url(/images/partners/process_m.png); }
	#visual.ev-pt-qna .visual-img-con        { background-image: url(/images/partners/qna_m.png); }
	#visual.ev-comm-notice .visual-img-con   { background-image: url(/images/community/notice_m.png); }
	#visual.ev-comm-schedule .visual-img-con { background-image: url(/images/community/schedule_m.png); }
}

/* 캐치프레이즈 크기 — 위 46px 규칙이 #visual[class*="ev-"] 로 특정도가 높아
   레거시의 모바일 값(24px)을 덮어써서 폰에서도 46px 로 나왔다.
   비주얼이 208px 로 줄어드는 1000px 이하에서 화면 폭에 맞춰 줄인다.
   clamp 하한 18px — 가장 긴 문구('토의·토론과 에세이로 완성하는' 15자)가
   360px 폭에서도 한 줄에 들어간다 */
@media all and (max-width: 1000px) {
	#visual[class*="ev-"] .visual-sub-txt {
		font-size: clamp(18px, 5.6vw, 30px);
		line-height: 1.35;
	}
}

/* ===== 가맹 상담 신청 (/partners/qna) — 휴대폰·인증번호 입력 ===== */
/* 입력칸(.wi50)이 좁은 화면에서 width:100% 가 되어 버튼이 다음 줄로 밀려났다.
   td 자체를 flex 로 만들면 board_responsive 의 `.table--block td { display:block }` 이
   특정도로 이겨버리므로, 안쪽 래퍼를 하나 두고 그걸 flex 로 쓴다 */
.cert-row { display: flex; align-items: center; gap: 6px; }
.cert-row > input { flex: 1 1 auto; width: auto; min-width: 0; }
.cert-row > .zipcode { flex: 0 0 auto; margin-left: 0; white-space: nowrap; }
/* 인증 결과 문구는 입력줄 아래로 */
.certify-info { display: block; margin-top: 4px; }

/* ============================================================
 * 행사일정 (/community/schedule) — 모바일
 *   달력 CSS(style.css)는 전부 데스크톱 전용이라 폰에서 그대로 나온다.
 *   툴바가 한 줄(이전·다음·오늘 + 년월 + 범례 5개)이라 넘치고,
 *   7열 × 높이 160px 셀에 시간·제목까지 들어가 글자가 뭉갠다.
 *   → 툴바는 접고, 달력은 '색 막대'만 남긴 요약으로 쓴다.
 *      행사 내용은 달력 아래 목록(list)에 같은 달치가 그대로 있으므로 정보 손실이 없다.
 * ============================================================ */
@media all and (max-width: 768px) {
	/* 툴바 — 1줄: 이동 버튼 + 년월 / 2줄: 분류 범례(가로 스크롤) */
	.full-calendar .calendar-toolbar { flex-wrap: wrap; padding: 10px; gap: 8px 0; }
	.full-calendar .calendar-toolbar .center-box { padding: 0 10px; font-size: 17px; }
	.full-calendar .btn-ix { height: 32px; padding: 0 10px; font-size: 13px; }
	.full-calendar .calendar-toolbar .right-box { flex: 1 1 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.schedule-help { float: none; margin-top: 0; display: flex; gap: 12px; white-space: nowrap; }
	.schedule-help p { margin-left: 0; font-size: 12px; }
	.schedule-help img { width: 14px; height: auto; vertical-align: middle; }

	/* 달력 — 셀을 낮추고 날짜는 작게 */
	.full-calendar .tb-calendar th { padding: 7px 2px; font-size: 12px; }
	.full-calendar .tb-calendar tbody td { height: 62px; padding: 2px; }
	.full-calendar .tb-calendar td .day { font-size: 11px; padding: 1px 2px; }

	/* 행사는 색 막대로만 — 46px 폭에 시간·제목을 넣으면 어차피 읽을 수 없다.
	   어떤 행사인지는 아래 목록에서 확인한다 (막대도 눌러서 상세로 갈 수 있게 높이를 확보) */
	.full-calendar .event-box { height: 10px; border-radius: 2px; padding: 0; font-size: 0; }
	.full-calendar .event-box .time,
	.full-calendar .event-box .title { display: none; }
	.full-calendar .event-box ~ .event-box { margin-top: 3px; }

	/* 목록 — 예약 버튼이 좁은 칸에서 눌리지 않게 */
	.schedule-list-con .result-btn1 { display: inline-block; padding: 6px 12px; white-space: nowrap; }
}

/* ============================================================
 * 강사채용 (/partners/recruit) — 지원 버튼 2개를 항상 나란히
 *   레거시는 inline-block + min-width(PC 310 / 모바일 210)라
 *   폭이 모자라면 두 번째 버튼이 아래로 떨어졌다 — 폰(360px)에서는 항상 세로였다.
 *   → 두 버튼이 flex 로 폭을 반씩 나눠 갖게 하고, 좁아지면 글자만 줄인다.
 * ============================================================ */
.teacher-banner-area > div { display: flex; justify-content: center; align-items: stretch; gap: 10px; }
.teacher-banner-area > div a {
	flex: 1 1 0; min-width: 0; max-width: 380px; margin: 0;
	display: flex; align-items: center;
}
.teacher-banner-area > div a > div { width: 100%; }
/* 영문 버튼은 문구가 길어 한 단계 작게 (예전엔 인라인 style 로 박혀 있었다) */
.teacher-banner-area > div a p.txt.tb-en { font-size: 20px; }
.teacher-banner-area > div a p.txt.tb-en strong { font-size: 16px; }

@media all and (max-width: 620px) {
	.teacher-banner-area > div { gap: 6px; }
	.teacher-banner-area > div a { padding: 12px 8px; }
	/* 좁은 화면에서는 'go' 원을 빼고 문구에 폭을 다 준다 */
	.teacher-banner-area > div a p.go { display: none; }
	.teacher-banner-area > div a p.txt,
	.teacher-banner-area > div a p.txt.tb-en { width: 100%; font-size: 14px; word-break: keep-all; line-height: 1.35; }
	.teacher-banner-area > div a p.txt strong,
	.teacher-banner-area > div a p.txt.tb-en strong { font-size: 12px; margin-top: 4px; }
}
@media all and (max-width: 400px) {
	.teacher-banner-area > div a p.txt,
	.teacher-banner-area > div a p.txt.tb-en { font-size: 12.5px; }
	.teacher-banner-area > div a p.txt strong,
	.teacher-banner-area > div a p.txt.tb-en strong { font-size: 11px; }
}


/* ── 레벨테스트 예약 레이어 (campus/_leveltest-layer.html) — 캠퍼스 찾기와 같은 팔레트(#7B2D3B) ── */
body.ltr-open { overflow: hidden; }
.ltr-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(15, 23, 42, .55); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ltr-modal { width: 100%; max-width: 920px; background: #fff; border-radius: 12px; box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .45); display: flex; flex-direction: column; max-height: calc(100vh - 80px); }
.ltr-head { display: flex; align-items: flex-start; gap: 16px; padding: 22px 26px 16px; border-bottom: 1px solid #E2E8F0; }
.ltr-head-txt { flex: 1; min-width: 0; }
.ltr-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #7B2D3B; margin: 0 0 4px; }
.ltr-head h4 { font-size: 22px; font-weight: 700; color: #1E293B; margin: 0; line-height: 1.3; }
.ltr-campus { font-size: 14px; color: #64748B; margin: 4px 0 0; }
.ltr-tabs { display: flex; gap: 6px; background: #F1F5F9; padding: 4px; border-radius: 8px; align-self: center; }
.ltr-tabs button { border: 0; background: transparent; padding: 8px 14px; border-radius: 6px; font-size: 14px; font-weight: 600; color: #64748B; cursor: pointer; white-space: nowrap; }
.ltr-tabs button.on { background: #fff; color: #7B2D3B; box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.ltr-close { border: 0; background: transparent; color: #94A3B8; cursor: pointer; padding: 4px; line-height: 1; align-self: center; }
.ltr-close:hover { color: #1E293B; }
.ltr-body { overflow-y: auto; padding: 22px 26px 26px; }
.ltr-panel-narrow { max-width: 520px; margin: 0 auto; }

.ltr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.ltr-h { font-size: 15px; font-weight: 700; color: #1E293B; margin: 22px 0 10px; padding-left: 10px; border-left: 3px solid #7B2D3B; line-height: 1.2; }
.ltr-h:first-child { margin-top: 0; }
.ltr-help { font-size: 12.5px; color: #94A3B8; margin: 8px 0 0; line-height: 1.5; }
.ltr-notice { font-size: 13px; color: #7B2D3B; background: #F5E6E8; border-radius: 6px; padding: 10px 12px; margin: 10px 0 0; line-height: 1.5; white-space: pre-line; }
.ltr-picked { font-size: 13px; font-weight: 700; color: #7B2D3B; margin: 10px 0 0; }

/* 달력 — bootstrap-datepicker inline */
.ltr-cal { border: 1px solid #E2E8F0; border-radius: 8px; padding: 6px; display: flex; justify-content: center; }
.ltr-cal .datepicker-inline { width: 100%; }
.ltr-cal .datepicker table { width: 100%; }
.ltr-cal .datepicker table tr td, .ltr-cal .datepicker table tr th { height: 36px; border-radius: 6px; font-size: 13px; }
.ltr-cal .datepicker table tr td.active, .ltr-cal .datepicker table tr td.active:hover,
.ltr-cal .datepicker table tr td.active.active { background: #7B2D3B; background-image: none; color: #fff; text-shadow: none; }
.ltr-cal .datepicker table tr td.today { background: #F5E6E8; background-image: none; color: #7B2D3B; }
.ltr-cal .datepicker table tr td.disabled, .ltr-cal .datepicker table tr td.disabled:hover { color: #CBD5E1; }
.ltr-cal .datepicker .datepicker-switch, .ltr-cal .datepicker .prev, .ltr-cal .datepicker .next { font-weight: 700; color: #1E293B; }

.ltr-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ltr-time { border: 1px solid #E2E8F0; background: #fff; border-radius: 6px; padding: 9px 0; font-size: 13px; font-weight: 600; color: #1E293B; cursor: pointer; }
.ltr-time:hover { border-color: #7B2D3B; color: #7B2D3B; }
.ltr-time.on { background: #7B2D3B; border-color: #7B2D3B; color: #fff; }

.ltr-field { margin-bottom: 8px; }
.ltr-field input[type="text"], .ltr-field input[type="tel"], .ltr-field input[type="email"], .ltr-field select {
	width: 100%; height: 42px; border: 1px solid #E2E8F0; border-radius: 6px; padding: 0 12px; font-size: 14px; color: #1E293B; background: #fff; box-sizing: border-box;
}
.ltr-field input:focus, .ltr-field select:focus { outline: none; border-color: #7B2D3B; box-shadow: 0 0 0 3px rgba(123, 45, 59, .12); }
.ltr-field input[readonly] { background: #F8FAFC; color: #64748B; }
.ltr-row { display: flex; gap: 8px; }
.ltr-row input { flex: 1; min-width: 0; }
.ltr-row-2 select { flex: 0 0 120px; }
.ltr-btn-line { flex: 0 0 auto; height: 42px; padding: 0 14px; border: 1px solid #7B2D3B; background: #fff; color: #7B2D3B; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ltr-btn-line:hover { background: #F5E6E8; }
.ltr-btn-line:disabled { border-color: #E2E8F0; color: #94A3B8; background: #F8FAFC; cursor: default; }
.ltr-cert-ok { font-size: 13px; color: #15803D; margin: -2px 0 8px; }

.ltr-agree { list-style: none; margin: 0; padding: 0; }
.ltr-agree li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid #F1F5F9; }
.ltr-agree li:last-child { border-bottom: 0; }
.ltr-check { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #1E293B; cursor: pointer; min-width: 0; }
.ltr-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.ltr-check span { flex: 0 0 18px; width: 18px; height: 18px; border: 1.5px solid #CBD5E1; border-radius: 4px; background: #fff; position: relative; }
.ltr-check input:checked + span { background: #7B2D3B; border-color: #7B2D3B; }
.ltr-check input:checked + span::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ltr-check input:focus-visible + span { box-shadow: 0 0 0 3px rgba(123, 45, 59, .2); }
.ltr-check em { font-style: normal; font-weight: 700; color: #7B2D3B; }
.ltr-check em.opt { color: #94A3B8; }
.ltr-agree-more { border: 0; background: transparent; font-size: 12px; color: #64748B; text-decoration: underline; cursor: pointer; padding: 0; }
.ltr-agree-text { flex-basis: 100%; background: #F8FAFC; border-radius: 6px; padding: 12px 14px; font-size: 12.5px; color: #475569; line-height: 1.6; max-height: 220px; overflow-y: auto; }
.ltr-agree-text h6 { font-size: 12.5px; font-weight: 700; color: #1E293B; margin: 8px 0 4px; }
.ltr-agree-text h6:first-child { margin-top: 0; }
.ltr-agree-text p { margin: 0 0 6px; }

.ltr-error { font-size: 13px; color: #B91C1C; background: #FEF2F2; border-radius: 6px; padding: 10px 12px; margin: 18px 0 0; }
.ltr-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #E2E8F0; }
.ltr-btn-main, .ltr-btn-sub { height: 44px; padding: 0 22px; border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer; }
.ltr-btn-main { border: 0; background: #7B2D3B; color: #fff; }
.ltr-btn-main:hover { background: #5A1F2B; }
.ltr-btn-main:disabled { background: #CBD5E1; cursor: default; }
.ltr-btn-sub { border: 1px solid #E2E8F0; background: #fff; color: #64748B; }
.ltr-btn-sub:hover { background: #F8FAFC; }

/* 결과 */
.ltr-result-lead { font-size: 15px; font-weight: 700; color: #1E293B; margin: 0 0 16px; }
.ltr-result-campus { background: #F8FAFC; border-radius: 8px; padding: 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
.ltr-result-campus strong { font-size: 16px; color: #1E293B; }
.ltr-result-campus span { font-size: 13px; color: #64748B; }
.ltr-result-campus a { font-size: 13px; color: #7B2D3B; font-weight: 600; }
.ltr-result-list { display: grid; grid-template-columns: 90px 1fr; gap: 10px 12px; margin: 0; font-size: 14px; }
.ltr-result-list dt { color: #94A3B8; font-weight: 600; }
.ltr-result-list dd { margin: 0; color: #1E293B; }

/* 캠퍼스 찾기 — 예약확인 링크 */
.lt-confirm-link { display: inline-block; margin: 8px 0 0; font-size: 13px; color: #7B2D3B; font-weight: 600; text-decoration: underline; cursor: pointer; }

@media all and (max-width: 760px) {
	.ltr-overlay { padding: 0; align-items: stretch; }
	.ltr-modal { max-width: none; min-height: 100%; max-height: none; border-radius: 0; }
	.ltr-head { flex-wrap: wrap; padding: 16px 16px 12px; }
	.ltr-head h4 { font-size: 19px; }
	.ltr-tabs { order: 3; width: 100%; }
	.ltr-tabs button { flex: 1; }
	.ltr-body { padding: 16px 16px 24px; }
	.ltr-cols { grid-template-columns: 1fr; gap: 8px; }
	.ltr-times { grid-template-columns: repeat(3, 1fr); }
	.ltr-foot { flex-direction: column-reverse; }
	.ltr-btn-main, .ltr-btn-sub { width: 100%; }
}
/* hidden 속성이 위의 display:flex 를 이기도록 — 레이어·인증번호 행 등 */
.ltr-overlay[hidden], .ltr-overlay [hidden] { display: none !important; }
/* 날짜 선택 전 시간 자리 안내 */
.ltr-times-wait { grid-column: 1 / -1; margin: 0; padding: 14px 12px; border: 1px dashed #E2E8F0; border-radius: 6px; font-size: 13px; color: #94A3B8; text-align: center; line-height: 1.5; }
.ltr-times-wait i { color: #7B2D3B; margin-right: 4px; }