/* ============================================================
   모바일 메인 개편 테스트 — HP-IM-261103-034 (2026-11-03)
   /2025/test/HP-IM-261103-034.asp 전용. 운영 index.asp · main.css 는 건드리지 않는다.
   사이트 모바일 기준(responsive.css .mo-show = max-width:1280px)에서만 켜지고 PC 는 변경 없음.
   ============================================================ */
.mv3-mo{display:none;}

/* 새 카드의 NEW 배지 — PC·모바일 공통 (2026-11-04 요청자 확인: PC 에도 카드 추가) */
.mv3 .mainAi-thumb{position:relative;}
.mv3-ai-badge{position:absolute;top:10px;left:10px;z-index:2;
	padding:3px 9px;border-radius:999px;background:#ff4d4f;color:#fff;
	font-size:11px;font-weight:800;line-height:1.4;font-style:normal;letter-spacing:.02em;}

@media (max-width:1280px){
	.mv3-mo{display:block;}

	/* 이 페이지에서만 기존 모바일 퀵메뉴 · 커리큘럼 탭 · 하단 고정바를 숨기고 v3 로 대체 */
	.mv3 #mainQuick{display:none !important;}
	.mv3 .main-lesson{display:none !important;}
	.mv3 .btn-bottom.fix{display:none !important;}
	/* 하단 고정바(≈70px)가 마지막 내용을 가리지 않게 */
	.mv3{padding-bottom:84px;}

	/* ---------- 공통 카드 + 누를 때 효과 (학과 카드 · 퀵메뉴 · 과정 카드) ---------- */
	.mv3-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
		background:#26282d;border:1px solid #33363c;border-radius:14px;color:#fff;text-decoration:none;
		-webkit-tap-highlight-color:transparent;will-change:transform;
		transition:transform .22s cubic-bezier(.34,1.56,.64,1),border-color .22s ease,box-shadow .22s ease;}
	.mv3-card.is-touch{transform:translateY(-5px) scale(1.06);border-color:#1fd0e6;z-index:2;
		box-shadow:0 0 0 1px rgba(31,208,230,.35),0 10px 24px rgba(31,208,230,.28);}
	.mv3-card.is-y.is-touch{border-color:#ffd84d;
		box-shadow:0 0 0 1px rgba(255,216,77,.35),0 10px 24px rgba(255,216,77,.24);}
	/* 빛줄기: 카드는 배지가 걸쳐야 해서 overflow 를 열어 두고, 안쪽 레이어에서만 자른다 */
	.mv3-shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;}
	.mv3-shine::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:36%;opacity:0;
		background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
		transform:translateX(-160%) skewX(-18deg);}
	.mv3-card.is-touch .mv3-shine::after{animation:mv3-shine .7s ease-out forwards;}
	/* 아이콘: 1.35배까지 튀었다가 살짝 기울며 빛남 */
	.mv3-fx-ico{transition:transform .22s ease;}
	.mv3-card.is-touch .mv3-fx-ico{animation:mv3-pop .55s cubic-bezier(.34,1.56,.64,1) forwards;
		filter:drop-shadow(0 0 6px rgba(31,208,230,.9));}
	.mv3-card.is-y.is-touch .mv3-fx-ico{filter:drop-shadow(0 0 6px rgba(255,216,77,.9));}
	@media (hover:hover){
		.mv3-card:hover{transform:translateY(-5px) scale(1.06);border-color:#1fd0e6;z-index:2;
			box-shadow:0 0 0 1px rgba(31,208,230,.35),0 10px 24px rgba(31,208,230,.28);}
		.mv3-card.is-y:hover{border-color:#ffd84d;
			box-shadow:0 0 0 1px rgba(255,216,77,.35),0 10px 24px rgba(255,216,77,.24);}
		.mv3-card:hover .mv3-shine::after{animation:mv3-shine .7s ease-out forwards;}
		.mv3-card:hover .mv3-fx-ico{animation:mv3-pop .55s cubic-bezier(.34,1.56,.64,1) forwards;
			filter:drop-shadow(0 0 6px rgba(31,208,230,.9));}
		.mv3-card.is-y:hover .mv3-fx-ico{filter:drop-shadow(0 0 6px rgba(255,216,77,.9));}
		.mv3-course:hover .mv3-course-img img{transform:scale(1.07);}
	}
	@keyframes mv3-shine{0%{transform:translateX(-160%) skewX(-18deg);opacity:0}15%{opacity:1}100%{transform:translateX(440%) skewX(-18deg);opacity:0}}
	@keyframes mv3-pop{0%{transform:scale(1) rotate(0)}45%{transform:scale(1.35) rotate(0)}75%{transform:scale(1.15) rotate(-8deg)}100%{transform:scale(1.12) rotate(-4deg)}}

	/* 배지: 카드 오른쪽 위에 걸치게 */
	.mv3-badge{position:absolute;top:-7px;right:-5px;z-index:3;padding:2px 7px;border-radius:999px;
		font-family:'Manrope','NEXON Lv2 Gothic',sans-serif;font-size:9.5px;font-weight:800;line-height:1.3;letter-spacing:.02em;font-style:normal;}
	.mv3-badge.hot{background:#ff4d4f;color:#fff;}
	.mv3-badge.new{background:#1fd0e6;color:#111;}

	/* ---------- 2. 학과 바로가기 ---------- */
	.mv3-dept{padding-top:6px;}
	.mv3-dept-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-bottom:10px;}
	.mv3-dept-tit{margin:0;font-family:'NEXON Lv2 Gothic Bold';font-size:19px;line-height:1.3;letter-spacing:-0.05em;color:#fff;white-space:nowrap;}
	.mv3-dept-tit em{font-style:normal;color:#1fd0e6;}
	/* 말풍선: 문구 4개를 같은 칸에 겹쳐 두고(grid) 가장 긴 문구 폭으로 크기를 잡는다 */
	.mv3-bubble{position:relative;display:grid;align-items:center;flex:0 0 auto;max-width:100%;
		border:1px solid #1fd0e6;border-radius:10px;background:rgba(31,208,230,.12);
		font-size:10px;line-height:1.4;letter-spacing:-0.03em;color:#dfe3e8;}
	.mv3-bubble p{grid-area:1/1;margin:0;padding:5px 8px;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease;}
	.mv3-bubble p.is-on{opacity:1;transform:none;}
	.mv3-bubble p b{color:#1fd0e6;font-weight:800;font-size:11px;}
	/* 꼬리: 제목 쪽(왼쪽). 제목 아래로 내려가면(.is-below, JS 판정) 위쪽을 향한다 */
	.mv3-bubble::before,.mv3-bubble::after{content:"";position:absolute;top:50%;left:-7px;margin-top:-6px;border:6px solid transparent;border-left:0;border-right-color:#1fd0e6;}
	.mv3-bubble::after{left:-5.5px;border-right-color:#1d343a;}
	.mv3-bubble.is-below::before,.mv3-bubble.is-below::after{top:-7px;left:14px;margin-top:0;border:6px solid transparent;border-top:0;border-bottom-color:#1fd0e6;}
	.mv3-bubble.is-below::after{top:-5.5px;border-bottom-color:#1d343a;}

	.mv3-dept-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none;}
	.mv3-dept-grid li{min-width:0;}
	/* 시안 개정: 첫 화면(390x844)에 학과메뉴·퀵메뉴가 다 들어가도록 카드를 낮췄다 */
	.mv3-dept-card{height:66px;padding:5px 3px;gap:6px;border-radius:12px;border-color:transparent;background:#25272d;}
	.mv3-ico{display:flex;align-items:center;justify-content:center;width:22px;height:22px;color:#1fd0e6;}
	.mv3-ico svg{display:block;width:22px;height:22px;}
	.is-y .mv3-ico{color:#ffd84d;}
	.mv3-dept-card .mv3-card-txt{font-family:'NEXON Lv2 Gothic Bold';font-size:12.5px;line-height:1.2;letter-spacing:-0.03em;text-align:center;color:#fff;}

	/* ---------- 3. 퀵메뉴 ---------- */
	/* 시안 개정: 버튼 4개를 하나의 트레이로 묶는다(얇은 하늘색 테두리 + 칸 사이 구분선) */
	.mv3-quick{margin-top:18px;}
	.mv3-qp{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:4px 0;border-radius:14px;
		background:linear-gradient(180deg,#31353d,#2a2d34);border:1px solid rgba(31,208,230,.3);
		box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 16px rgba(0,0,0,.3);
		transition:border-color .2s ease,box-shadow .2s ease;}
	/* 트레이 안에서는 카드 자체의 테두리·배경을 쓰지 않는다 */
	.mv3-qp-item{height:56px;gap:5px;padding:0 2px;border:0;background:transparent;border-radius:12px;color:#e9ebef;}
	.mv3-qp-item+.mv3-qp-item::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:1px;background:#3d414a;}
	/* 뜬 칸 양옆의 구분선은 숨긴다 */
	.mv3-qp-item.is-touch::before,.mv3-qp-item.is-touch+.mv3-qp-item::before{opacity:0;}
	.mv3-qp-item.is-touch{background:linear-gradient(160deg,rgba(31,208,230,.36),rgba(31,208,230,.08)),#2c2f36;color:#fff;}
	.mv3-qp-item.is-kakao.is-touch{background:linear-gradient(160deg,rgba(255,225,0,.3),rgba(255,225,0,.06)),#2c2f36;
		border-color:#ffe100;box-shadow:0 0 0 1px rgba(255,225,0,.45),0 10px 24px rgba(255,225,0,.24);}
	.mv3-qp-item.is-kakao.is-touch .mv3-fx-ico{filter:drop-shadow(0 0 6px rgba(255,225,0,.9));}
	.mv3-qp-ico{display:flex;align-items:center;justify-content:center;width:21px;height:21px;color:#1fd0e6;}
	.mv3-qp-ico svg{display:block;width:21px;height:21px;}
	.mv3-qp-item .mv3-card-txt{font-family:'NEXON Lv2 Gothic Bold';font-size:12px;font-weight:700;line-height:1.2;
		letter-spacing:-0.05em;white-space:nowrap;font-style:normal;}
	@media (hover:hover){
		.mv3-qp:hover{border-color:rgba(31,208,230,.6);
			box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 3px rgba(31,208,230,.1),0 8px 20px rgba(0,0,0,.35);}
		.mv3-qp-item:hover{background:linear-gradient(160deg,rgba(31,208,230,.36),rgba(31,208,230,.08)),#2c2f36;color:#fff;}
		.mv3-qp-item:hover::before,.mv3-qp-item:hover+.mv3-qp-item::before{opacity:0;}
		.mv3-qp-item.is-kakao:hover{background:linear-gradient(160deg,rgba(255,225,0,.3),rgba(255,225,0,.06)),#2c2f36;
			border-color:#ffe100;box-shadow:0 0 0 1px rgba(255,225,0,.45),0 10px 24px rgba(255,225,0,.24);}
		.mv3-qp-item.is-kakao:hover .mv3-fx-ico{filter:drop-shadow(0 0 6px rgba(255,225,0,.9));}
	}

	/* ---------- 4. 지금 많이 찾는 과정 ---------- */
	.mv3-lesson{margin-top:18px;}
	.mv3-lesson-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:8px;}
	.mv3-lesson-head h3{margin:0;font-family:'NEXON Lv2 Gothic Bold';font-size:19px;line-height:1.3;letter-spacing:-0.05em;color:#fff;}
	.mv3-lesson-head p{margin:4px 0 0;font-size:12px;line-height:1.4;color:#9aa0a6;letter-spacing:-0.02em;}
	.mv3-lesson-ctrl{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-bottom:3px;}
	.mv3-lesson-ctrl button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0 0 2px;border-radius:50%;
		border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-size:18px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;}
	.mv3-lesson-ctrl button:active{background:#1fd0e6;border-color:#1fd0e6;color:#121418;}
	.mv3-all{margin-left:4px;font-size:12px;font-weight:700;color:#1fd0e6;white-space:nowrap;text-decoration:none;}
	.mv3-track-wrap{margin:0 -20px;padding:6px 20px 12px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;}
	.mv3-track{display:flex;gap:10px;width:max-content;margin:0;padding:0;list-style:none;will-change:transform;}
	.mv3-track li{flex:0 0 150px;width:150px;}
	.mv3-course{display:block;width:150px;}
	/* span 은 기본이 인라인이라 display 를 주지 않으면 height 140px 이 먹지 않아
	   이미지가 원본 비율 그대로 늘어난다 */
	.mv3-course-img{display:block;position:relative;height:140px;overflow:hidden;border-radius:13px 13px 0 0;background:#1b1d21;}
	.mv3-course-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;-webkit-user-drag:none;}
	.mv3-course.is-touch .mv3-course-img img{transform:scale(1.07);}
	.mv3-course .mv3-badge{top:8px;right:8px;}
	.mv3-course-body{display:block;padding:10px 10px 12px;}
	.mv3-course-dept{display:block;font-size:10.5px;font-weight:700;letter-spacing:-0.02em;color:#1fd0e6;}
	.mv3-course-name{display:block;margin-top:3px;font-family:'NEXON Lv2 Gothic Bold';font-size:15px;line-height:1.25;letter-spacing:-0.03em;color:#fff;}
	.mv3-course-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:5px;min-height:2.8em;
		font-size:11.5px;line-height:1.4;letter-spacing:-0.02em;color:#9aa0a6;}

	/* ---------- 5. 하단 고정바 ---------- */
	.mv3-bar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;justify-content:space-between;
		padding:12px 12px calc(constant(safe-area-inset-bottom) + 10px);padding:12px 12px calc(env(safe-area-inset-bottom) + 10px);
		background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 30%,#fff 60%);transform:translateZ(0);}
	.mv3-bar a{position:relative;display:flex;align-items:center;justify-content:center;width:49%;height:48px;border-radius:8px;
		font-family:'NEXON Lv2 Gothic Bold';font-size:14px;letter-spacing:-0.02em;text-decoration:none;}
	.mv3-bar-tuition{background:#08cee8;color:#282828;}
	.mv3-bar-call{background:#282828;color:#fff;}
	/* '최대 40% 할인' 배지: 버튼 오른쪽 위 모서리에 걸치고 글자를 가리지 않는다 */
	.mv3-bar-badge{position:absolute;top:-10px;right:-4px;padding:3px 8px;border-radius:999px;background:#ff4d4f;color:#fff;
		font-size:11px;font-weight:800;line-height:1.3;font-style:normal;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.18);}

	/* ---------- 5-1. 맨 아래에서 퀵메뉴 4개로 전환 (2026-11-04 추가 요청) ---------- */
	/* 푸터가 보이기 시작하면 2버튼 바가 내려가고 같은 자리에서 퀵메뉴 바가 올라온다.
	   두 바 모두 고정이라, 보이는 쪽만 손가락이 닿게 visibility 로 번갈아 끈다 */
	.mv3-bar,.mv3-qbar{transition:transform .35s cubic-bezier(.32,.72,0,1),visibility 0s linear 0s;}
	.mv3-qbar{position:fixed;left:0;right:0;bottom:0;z-index:10;
		padding:10px 12px calc(constant(safe-area-inset-bottom) + 12px);
		padding:10px 12px calc(env(safe-area-inset-bottom) + 12px);
		background:rgba(20,21,24,.94);border-top:1px solid rgba(31,208,230,.45);
		transform:translateY(110%);visibility:hidden;transition-delay:0s,.35s;}
	.mv3-barwrap.at-footer .mv3-bar{transform:translateY(130%);visibility:hidden;transition-delay:0s,.35s;}
	.mv3-barwrap.at-footer .mv3-qbar{transform:translateY(0);visibility:visible;transition-delay:0s,0s;}
	/* 트레이 모양은 메인 퀵메뉴와 같게 둔다 */
	.mv3-qbar .mv3-qp{background:linear-gradient(180deg,#31353d,#2a2d34);}
	.mv3-qbar .mv3-qp-item{height:54px;}
	/* 수강료조회 위 작은 빨강 태그 */
	.mv3-qbar-tag{position:absolute;top:-7px;left:50%;transform:translateX(-50%);z-index:3;
		padding:1px 7px;border-radius:999px;background:#ff4d4f;color:#fff;
		font-size:9.5px;font-weight:800;line-height:1.4;font-style:normal;white-space:nowrap;}
	/* 푸터 글자가 바에 가리지 않게 */
	.mv3 #footer{padding-bottom:90px;}
	@media (prefers-reduced-motion:reduce){.mv3-bar,.mv3-qbar{transition:none;}}

	/* ---------- 6. 'AI 크리에이터로 성장' 가로 슬라이드 (2026-11-04 추가 요청) ---------- */
	/* 카드 5개가 세로로 쌓여 영역이 1,700px 가까이 되던 것을 한 줄 가로 밀기로 바꾼다.
	   카드 폭은 화면의 78%, 다음 카드가 오른쪽에 살짝 보여 밀 수 있다는 것을 알린다 */
	.mv3 .mainAi-list{display:flex;grid-template-columns:none;gap:12px;
		margin:0;padding:2px 0 2px 20px;list-style:none;
		overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
		scroll-snap-type:x mandatory;scrollbar-width:none;}
	.mv3 .mainAi-list::-webkit-scrollbar{display:none;}
	/* 마지막 카드도 왼쪽에 붙게 오른쪽 여백을 가짜 칸으로 만든다 */
	.mv3 .mainAi-list::after{content:"";flex:0 0 8px;}
	.mv3 .mainAi-item{flex:0 0 78vw;max-width:360px;scroll-snap-align:start;}
	.mv3 .mainAi-item > a{height:100%;padding-bottom:18px;}
	.mv3 .mainAi-name{margin-top:14px;}
	.mv3 .mainAi-desc{margin-top:6px;}
	.mv3 .mainAi-more{margin-top:10px;}
	/* 위치 표시 점 */
	.mv3-ai-dots{display:flex;justify-content:center;gap:7px;margin-top:14px;}
	.mv3-ai-dots i{display:block;width:7px;height:7px;border-radius:50%;background:#4a4f57;
		transition:background .2s ease,width .2s ease;}
	.mv3-ai-dots i.on{width:18px;border-radius:999px;background:#1fd0e6;}
}

/* PC(1281px 이상) — 2026-11-04 요청자 확인으로 새 카드를 PC 에도 보인다.
   4칸 + 한 장만 다음 줄로 떨어지는 모습을 피해 한 줄 5칸으로 늘린다(간격은 기존 20px 유지). */
@media (min-width:1281px){
	.mv3 .mainAi-list{grid-template-columns:repeat(5, 1fr);}
	.mv3 .mainAi-name{font-size:18px;margin-left:18px;margin-right:18px;}
	.mv3 .mainAi-desc{font-size:14px;margin-left:18px;margin-right:18px;}
	.mv3 .mainAi-more{margin-left:18px;margin-right:18px;}
}