/*
 * TASK:T1268 — 헤더 우측 UI 를 새 CTA/글쓰기/프로필(mah_render_header_actions(), style.css
 * .mah-header-actions/.mah-nav-footer)로 완전히 교체했다. T1255/T1260 이 만들었던 구버전
 * 인라인 인증 바 배치 로직(모바일 오버레이 스크롤 여백 계산 포함, 이제 style.css 의 새
 * @media(max-width:1180px) .mah-nav 규칙이 그 역할을 대신함)은 더 이상 화면에 쓰이지 않아
 * 제거했다. render_member_bar() 호출 자체(.mah-header-auth)는 header.php 가 로그인 모달
 * 마크업/nonce 를 얻기 위해 여전히 유지하므로, 여기서는 그 안의 구버전 인라인 바(안내
 * 문구+버튼 한 줄)만 화면에서 완전히 숨긴다 — 모달(.mk-auth-modal-overlay, 아래)은
 * position:fixed 형제라 이 규칙의 영향을 받지 않는다. 플러그인 클래스(.mk-auth-*) 자체는
 * 손대지 않았다.
 */
.mah-header-auth{display:none}

/*
 * 로그인/가입 모달(.mk-auth-modal-overlay 등) — 이 테마 어디에도 스타일이 없어(옛 toolly
 * 테마 CSS 도 이식하지 않았으므로) 열면 레이아웃 없는 원시 폼으로 보였다. 최소한의 오버레이
 * 배치·타이포만 이 테마 토큰으로 준다 — 시각 다듬기는 Pane 4 몫이라 색·간격 기본형만.
 */

/*
 * 로그인/가입 모달(.mk-auth-modal-overlay 등) — 이 테마 어디에도 스타일이 없어(옛 toolly
 * 테마 CSS 도 이식하지 않았으므로) 열면 레이아웃 없는 원시 폼으로 보였다. 최소한의 오버레이
 * 배치·타이포만 이 테마 토큰으로 준다 — 시각 다듬기는 Pane 4 몫이라 색·간격 기본형만.
 */
.mk-auth-modal-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:rgba(2,7,12,.72);padding:var(--pad)}
.mk-auth-modal-overlay[hidden]{display:none}
.mk-auth-modal{position:relative;width:min(420px,100%);max-height:86vh;overflow-y:auto;background:var(--paper2);color:#0a151e;border-radius:20px;padding:36px}
.mk-auth-modal__close{position:absolute;top:14px;right:14px;width:32px;height:32px;border:0;border-radius:50%;background:rgba(7,17,28,.06);color:#0a151e;font-size:18px;cursor:pointer}
.mk-auth-tabs{display:flex;gap:6px;margin-bottom:22px;border-bottom:1px solid #d9dfe0}
.mk-auth-tab{flex:1;padding:10px 0;border:0;background:transparent;color:#78909c;font-size:var(--mah-text-small,14px);font-weight:800;cursor:pointer;border-bottom:2px solid transparent}
.mk-auth-tab.is-active{color:#0a151e;border-color:var(--blue-on-paper)}
.mk-auth-panel{display:none}
.mk-auth-panel.is-active{display:block}
.mk-auth-panel__title{margin:0 0 18px;font-size:20px}
.mk-auth-field{display:block;margin-bottom:14px;font-size:var(--mah-text-small,14px);font-weight:700;color:#334750}
.mk-auth-field span{display:block;margin-bottom:6px}
.mk-auth-field input{width:100%;padding:12px 14px;border:1px solid #d9dfe0;border-radius:10px;background:#fff;font:inherit;font-size:14px;color:#0a151e}
.mk-auth-error{padding:12px 14px;border-radius:10px;background:rgba(239,68,68,.1);color:#b3413f;font-size:var(--mah-text-small,14px);margin-bottom:16px}
.mk-auth-btn--block{display:flex;width:100%;justify-content:center;color:#07111c;background:#fff}

/*
 * TASK:T1331 — 주 메뉴에 '유튜브' 카테고리가 한 항목 늘면서, 데스크톱 내비가 살아
 * 있는 가장 좁은 구간(1181~1280px)에서 브랜드명이 두 줄로 접혔다(1181px 실측: strong
 * 높이 14px→29px. 1280px 이상은 변화 없음). 그 구간에서만 항목 간격을 줄여 되돌린다 —
 * .mah-nav 기본 gap 은 clamp(28px,2.2vw,32px) 라 이 폭에서 하한 28px 에 고정돼 있었다.
 * 1180px 이하는 모바일 드로어라 이 규칙이 닿지 않는다.
 */
@media(min-width:1181px) and (max-width:1280px){
  .mah-nav{gap:20px}
}

/* ── GNB 드롭다운 ───────────────────────────────────────
 * 2026-09-18 — 학습/채널 2단 드롭다운 신설. 이전에는 style.css 에서 데스크톱은
 * display:none/flex 호버 토글, 모바일은 display:flex!important(항상 펼침)였다.
 * display 는 전환이 안 되고 모바일은 아코디언이 아니었으므로 둘 다 여기서 다시 짠다.
 * 열림 상태는 JS 가 부모 li 에 .is-open 을 붙여 표시한다(호버는 데스크톱 CSS 가 병행).
 */

/* 부모 항목: 링크(또는 role=button) + ▾ 를 한 줄에 */
.mah-nav .menu-item-has-children > a{gap:6px}
.mah-nav-caret{display:inline-block;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease)}
.mah-nav .menu-item-has-children.is-open > a .mah-nav-caret{transform:translateY(1px) rotate(-135deg)}
/* href="#" 부모는 JS 가 role=button 으로 바꾼다 — 밑줄 호버 효과는 링크가 아니므로 끈다 */
.mah-nav .menu-item-has-children > [role="button"]{cursor:pointer}
.mah-nav .menu-item-has-children > [role="button"]::after{display:none}

@media(min-width:1181px){
	.mah-nav .sub-menu{position:absolute;left:-18px;top:34px;min-width:190px;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:10px;border:1px solid var(--line);border-radius:15px;background:rgba(5,13,21,.96);box-shadow:0 20px 60px rgba(0,0,0,.3);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
	.mah-nav .menu-item-has-children:hover > .sub-menu,
	.mah-nav .menu-item-has-children.is-open > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
	/* 호버로 내려갈 때 커서가 빈틈을 지나며 닫히지 않게 부모 아래를 메운다 */
	.mah-nav .menu-item-has-children::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
	.mah-nav .sub-menu a{white-space:nowrap}
}

@media(max-width:1180px){
	/* 모바일: 아코디언.
	   grid-template-rows:0fr 기법은 그리드 아이템이 하나일 때만 접힌다 — 여기는 li 가
	   3개라 암시적 행이 생겨 첫 행만 0fr 이 되고 나머지는 auto 로 펼쳐진 채 남는다
	   (닫힘 상태 실측 93px). 항목 수가 적고 고정이라 max-height 로 간다. */
	.mah-nav .sub-menu{position:static;display:block;max-height:0;overflow:hidden;padding:0 0 0 18px;border:0;background:transparent;box-shadow:none;opacity:0;visibility:visible;transition:max-height .3s var(--ease),opacity .25s var(--ease)}
	.mah-nav .menu-item-has-children.is-open > .sub-menu{max-height:60vh;opacity:1}
	.mah-nav .sub-menu li{width:100%}
	.mah-nav .sub-menu li:first-child a{padding-top:4px}
	.mah-nav .sub-menu li:last-child a{padding-bottom:14px}
	.mah-nav-caret{width:11px;height:11px;border-width:2.5px}
}