@charset "UTF-8";
/* =============================================================================
   m_drawer.css — 모바일 헤더 메뉴를 "오른쪽 슬라이드 드로어"로 재정의
   -----------------------------------------------------------------------------
   · 대상: main.html 의 .m_menu_area (웹/앱 헤더 공통 — 한 페이지에 하나만 렌더).
   · styles.css 의 .m_menu_area(드롭다운) 위에 덮어쓴다(이 파일은 styles.css 뒤에 로드).
   · 데스크탑은 styles.css 가 .m_header/.m_menu_area 를 display:none!important 처리 → 미노출.
   · 토글: common_hl.js 가 .ham_btn 클릭 시 .m_menu_area 에 .is-open 부여.
   · 메뉴 마크업/아이콘은 _m_drawer.php 참조.
   ============================================================================= */

/* 오버레이(딤) — 화면 전체. 닫힘 상태: 투명 + 클릭통과 */
.m_menu_area {
	display: block;            /* ★ styles.css 의 .m_menu_area{display:none} 덮기 (없으면 is-open 줘도 안 보임) */
	position: fixed; inset: 0; width: auto; height: auto;
	z-index: 99999; border: 0;
	background: rgba(0,0,0,.45);
	opacity: 0; pointer-events: none;
	overflow: visible;
	transition: opacity .25s ease;
}
.m_menu_area.is-open { opacity: 1; pointer-events: auto; }

/* 우측 패널 */
.md-panel {
	position: absolute; top: 0; right: 0;
	width: 300px; max-width: 84vw;
	height: 100%; height: 100dvh;
	background: #fff;
	display: flex; flex-direction: column;
	transform: translateX(100%);
	transition: transform .28s ease;
	box-shadow: -8px 0 30px rgba(0,0,0,.18);
}
.m_menu_area.is-open .md-panel { transform: translateX(0); }

/* 상단: 로고 + 닫기(X) */
.md-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; flex: 0 0 auto; }
.md-head .md-logo { display: inline-flex; }
.md-head .md-logo img { height: 22px; display: block; }
.md-close { border: 0; background: transparent; font-size: 28px; line-height: 1; color: #2a2740; cursor: pointer; padding: 2px 6px; }

/* 강조 CTA 버튼 (운명한권 / 미래 배우자) */
.md-cta { display: flex; flex-direction: column; gap: 10px; padding: 6px 16px 14px; flex: 0 0 auto; }
.md-cta .md-btn {
	display: flex; align-items: center; justify-content: center;
	height: 48px; border-radius: 12px;
	font-size: 16px; font-weight: 700; color: #fff; text-decoration: none;
}
.md-btn-destiny { background: linear-gradient(90deg, #6b5bff, #7d6bff); }
.md-btn-spouse  { background: linear-gradient(90deg, #ff4d79, #ff6f91); }

/* 중간 메뉴(넘치면 스크롤) */
.md-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 10px; border-top: 1px solid #f0f0f3; }
.md-item {
	display: flex; align-items: center; gap: 14px;
	padding: 13px 12px; border-radius: 10px;
	color: #2a2740; text-decoration: none; font-size: 16px; font-weight: 600;
}
.md-item:active { background: #f3f4f6; }
.md-ico { width: 26px; height: 26px; flex: 0 0 26px; object-fit: contain; }
svg.md-ico { width: 24px; height: 24px; flex-basis: 24px; stroke: #5c5a6e; fill: none; }
.md-item.is-active { background: #fff6dd; color: #b8860b; }      /* 운세구독 하이라이트 */
.md-item.is-active svg.md-ico { stroke: #d9a534; }

/* 하단 고정 (마이페이지 / 로그아웃) */
.md-bottom { flex: 0 0 auto; border-top: 1px solid #f0f0f3; padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
.md-bottom .md-item { color: #5c5a6e; }