@charset "UTF-8";
/* ============================================================
   모바일 전체 메뉴 서랍 + 모바일 페이지 헤더 바 (PC 반응형 헤더·모바일 페이지 공용) - 2026-09-06
   - 로직: common/js/kmc_drawer.js (메뉴 데이터도 그 파일)
   - PC(html/layout/header.html)는 media="(max-width: 768px)"로 링크, 모바일 레이아웃은 그대로 링크
   - 색은 사이트 포인트(#da3835)·차콜(#1a1a1a)만, 애니메이션 없음
   ============================================================ */
/* 햄버거 버튼 (PC 헤더는 .header_top .inner 안, 모바일 헤더는 .kmc-mhead 안) */
.kmc-ham, .header_top .inner .kmc-ham, .kmc-mhead .kmc-ham { display: block; flex: none; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; background: none; position: relative; cursor: pointer; }
.kmc-ham span, .header_top .inner .kmc-ham span { position: absolute; left: 9px; right: 9px; height: 2px; background: #1a1a1a; }
.kmc-ham span:nth-child(1) { top: 12px; }
.kmc-ham span:nth-child(2) { top: 19px; }
.kmc-ham span:nth-child(3) { top: 26px; }
/* 서랍 */
.kmc-mmenu.is-open { visibility: visible; }
.kmc-mmenu__dim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.45); opacity: 0; z-index: 1; }
.kmc-mmenu.is-open .kmc-mmenu__dim { opacity: 1; }
.kmc-mmenu__panel { position: absolute; top: 0; left: 0; bottom: 0; width: 300px; max-width: 85vw; background: #fff; overflow-y: auto; transform: translateX(-100%); z-index: 2; } /* 햄버거 쪽(왼쪽)에서 열림 */
.kmc-mmenu.is-open .kmc-mmenu__panel { transform: none; }
.kmc-mmenu__head { display: flex; align-items: center; gap: 6px; padding: 8px 4px 8px 16px; border-bottom: 1px solid #e5e5e5; }
.kmc-mmenu__login { padding: 8px 14px; background: #da3835; color: #fff; font-size: 14px; font-weight: 700; }
.kmc-mmenu__join { padding: 7px 10px; border: 1px solid #ccc; color: #1a1a1a; font-size: 13px; font-weight: 700; white-space: nowrap; }
.kmc-mmenu__user { margin-right: auto; font-size: 14px; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kmc-mmenu__close { margin-left: auto; flex: none; width: 40px; height: 40px; border: 0; background: none; position: relative; cursor: pointer; }
.kmc-mmenu__close::before, .kmc-mmenu__close::after { content: ""; position: absolute; left: 10px; right: 10px; top: 19px; height: 2px; background: #1a1a1a; transform: rotate(45deg); }
.kmc-mmenu__close::after { transform: rotate(-45deg); }
.kmc-mmenu__dep1, .kmc-mmenu__dep1 ul { list-style: none; margin: 0; padding: 0; }
.kmc-mmenu__dep1 > li { position: relative; border-bottom: 1px solid #e5e5e5; }
.kmc-mmenu__dep1 > li > a { display: block; padding: 15px 56px 15px 18px; font-size: 16px; font-weight: 700; color: #1a1a1a; }
.kmc-mmenu__tg { position: absolute; top: 0; right: 0; width: 52px; height: 52px; border: 0; background: none; cursor: pointer; }
.kmc-mmenu__tg::before { content: ""; position: absolute; left: 21px; top: 19px; width: 8px; height: 8px; border-right: 2px solid #5a6472; border-bottom: 2px solid #5a6472; transform: rotate(45deg); }
.kmc-mmenu__dep1 > li.is-open > .kmc-mmenu__tg::before { top: 24px; transform: rotate(-135deg); }
.kmc-mmenu__dep1 > li > ul { display: none; padding: 4px 0 10px; background: #f7f8fa; border-top: 1px solid #e5e5e5; }
.kmc-mmenu__dep1 > li.is-open > ul { display: block; }
.kmc-mmenu__dep1 > li > ul > li a { display: block; padding: 9px 18px 9px 28px; font-size: 14.5px; color: #3a424d; }
.kmc-mmenu__dep1 > li.is-current > a { color: #da3835; }
.kmc-mmenu__dep1 > li > ul > li a.is-active { color: #da3835; font-weight: 700; background: #fff; box-shadow: inset 3px 0 0 #da3835; }
body.kmc-menu-lock { overflow: hidden; }
/* 모바일 레이아웃(mobile/html/css/mobile.css)의 nav 전역 규칙(position:absolute; left:-100%) 무효화 - 서랍 목록이 화면 밖으로 나가던 원인 */
.kmc-mmenu .kmc-mmenu__nav { position: static; left: auto; top: auto; width: auto; height: auto; background: transparent; z-index: auto; }
.kmc-mmenu { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; visibility: hidden; }
.kmc-mmenu.is-open { visibility: visible; }
/* 모바일 페이지 헤더 바 (mobile/html/layout/header.html·m_header.html) - PC 반응형 헤더와 같은 배치: 햄버거 | 로고 | 로그인 */
.kmc-mhead { position: relative; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 8px; background: #fff; border-bottom: 1px solid #e4e4e4; box-sizing: border-box; }
.kmc-mhead .kmc-mhead__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; line-height: 0; }
.kmc-mhead .kmc-mhead__logo img { width: 150px; height: auto; vertical-align: middle; } /* 우측 버튼(아이콘+글자)과 겹침 방지 */
.kmc-mhead .kmc-mhead__btn { display: inline-block; padding: 7px 10px; background: #da3835; color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none; border-radius: 6px; line-height: 20px; }
/* 로그인 버튼 아이콘 - PC 헤더 로그인 버튼과 같은 이미지(login.png). 나의강의실 버튼은 아이콘 없음 */
.kmc-mhead .kmc-mhead__btn--login { padding-left: 8px; }
.kmc-mhead .kmc-mhead__btn--login::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 3px; vertical-align: -5px; background: url(../images/home/login.png) no-repeat 50% 50% / contain; }
@media (max-width: 360px) {
  .kmc-mhead .kmc-mhead__logo img { width: 128px; }
  .kmc-mhead .kmc-mhead__btn { padding: 6px 8px; font-size: 12.5px; } /* 글자 유지(나의강의실은 글자만 있는 버튼) */
  }