/* ━━━ 헤더 · 전체 메뉴 · 모바일 시트 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   헤더 = 로고 · 메뉴 · 로그인만(GNB · 메가 드롭다운 없음).
   메뉴 → #gmenu 전체 메뉴(풀스크린) / 1023 이하 → #msheet 모바일 시트(좌 카테고리 탭 · 우 아코디언)
   열기 · 닫기 · 시트 탭은 ne-ai-portal 그대로, 메뉴 구성은 Confluence 'NE Flow 전체 메뉴 구성안 (261014) v1.0'.
   폭은 .container 규칙(1440 · 좌우 40)을 따른다.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 헤더 뒷배경 = neflow.ai(.site-chrome::before)와 같은 그라데이션 블러 — 흰 막 + 블러 7 이 헤더 높이까지 덮고 그 아래 --hd-fade 동안 투명해진다.
   스크롤 24 를 넘으면(.solid) 나타나고, 맨 위 히어로에서는 투명하다 */
.hd { position: fixed; inset: 0 0 auto; z-index: var(--z-header); height: var(--hd-h);
  --hd-fade: calc(var(--hd-h) * .7);   /* 80 → 56 · 64 → 45 · 56 → 39 (neflow.ai 57) */
  --hd-mask: linear-gradient(180deg, #000 var(--hd-h), rgb(0 0 0 / .996) calc(var(--hd-h) + var(--hd-fade) * .0381), rgb(0 0 0 / .942) calc(var(--hd-h) + var(--hd-fade) * .1464), rgb(0 0 0 / .773) calc(var(--hd-h) + var(--hd-fade) * .3087), rgb(0 0 0 / .5) calc(var(--hd-h) + var(--hd-fade) * .5), rgb(0 0 0 / .227) calc(var(--hd-h) + var(--hd-fade) * .6913), rgb(0 0 0 / .058) calc(var(--hd-h) + var(--hd-fade) * .8536), rgb(0 0 0 / .004) calc(var(--hd-h) + var(--hd-fade) * .9619), rgb(0 0 0 / 0)); }   /* 막 두 장이 같이 쓰는 마스크 — 곡선을 고칠 곳은 여기 하나. 9단계 = 불투명도 1 - smoothstep(t), 지점 t = (1 - cos(kπ/8)) / 2 (k = 0~8) */
.hd::before, .hd::after { content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: -1; height: calc(var(--hd-h) + var(--hd-fade)); pointer-events: none;
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  -webkit-mask-image: var(--hd-mask); mask-image: var(--hd-mask);
  opacity: 0; transition: opacity .24s ease; }
.hd::before { background: rgb(var(--white-rgb) / .72); }   /* neflow.ai 는 62 — 채도 높은 카드 · 표지가 헤더 밑을 지날 때 레드 로고가 묻혀 72 로 올렸다 */
.hd::after { background: rgb(var(--dark-rgb) / .5); }   /* 어두운 밴드 위(.is-inverse) 막 — neflow.ai 의 네이비 50% 를 --dark 50% 로 */
.hd.solid::before { opacity: 1; }
/* 어두운 밴드 위 — 헤더 가운데 줄이 .sec--dark 안에 들면 header.js 가 .is-inverse 를 붙인다: 흰 막 → 어두운 막, 로고 · 아이콘 · 라벨은 밝게 */
.hd.solid.is-inverse::before { opacity: 0; }
.hd.solid.is-inverse::after { opacity: 1; }
.hd.is-inverse .hd-logo img { filter: brightness(0) invert(1); }
.hd.is-inverse .hd-act { color: rgb(var(--white-rgb) / .78); }
.hd.is-inverse .hd-ic { color: var(--white); }
.hd-in { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.hd-logo img { width: 130px; height: auto; transition: filter .24s ease; }

.gm-new, .gm-st { display: inline-flex; align-items: center; height: 22px; padding: 1px 8px 0; border: 1px solid var(--ink); border-radius: var(--r-pill); background: var(--ink); color: var(--white); font-size: var(--fs-11); font-weight: 600; line-height: 19px; letter-spacing: var(--ls-badge); white-space: nowrap; margin-left: 6px; vertical-align: 1px; }   /* 상태 뱃지 S(교재 패널 .bp-badge 와 같은 규격) — 줄 높이 19 + 위 1px = 한글이 세로 가운데(실측) */
/* 상태 뱃지 4가지 · 모두 채움(doc/03_디자인_토큰.md '뱃지'): NEW(.gm-new) = 레드 · 11월 중 오픈(.gm-st.is-month) = 블루 · 오픈 예정 · 리뉴얼 예정(.gm-st) = 블랙 */
.gm-new { border-color: var(--red); background: var(--red); color: var(--white); }
.gm-st.is-month { border-color: var(--blue); background: var(--blue); }

/* 우측 액션: 아이콘 + 라벨 (시안) */
.hd-actions { display: flex; align-items: center; gap: 21px; }   /* 시안: 아이콘 자리 42 · 간격 21. 순서 = 로그인(로그아웃) → 전체 보기(메뉴가 맨 오른쪽 · 모바일 햄버거와 같은 자리) */
.hd-act { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 42px; font-size: var(--fs-12); font-weight: 700; color: var(--muted); transition: color .24s ease; }
/* 아이콘 = 인라인 SVG(currentColor) — color 로 색이 바뀐다(평소 잉크 · 어두운 밴드 위 흰색) */
.hd-ic { width: 28px; height: 28px; color: var(--ink); transition: color .24s ease; }
/* 오버 = 아이콘 · 글자 레드, 어두운 밴드 위에서는 --red-on-dark. 마우스 기기만 — 터치에서 탭한 뒤 레드가 남지 않게 */
@media (hover: hover) {
  .hd-act:hover, .hd-act:hover .hd-ic { color: var(--red); }
  .hd.is-inverse .hd-act:hover, .hd.is-inverse .hd-act:hover .hd-ic { color: var(--red-on-dark); }
}
.hd-burger { display: none; }
/* 로그인 상태 = html.is-login(목업은 주소 뒤 ?login=1, 실서비스는 세션) — 헤더 로그인 → 로그아웃, 모바일 메뉴 '로그인하세요 ›' → 인사,
   로그인 · 회원가입 → 로그아웃 한 칸. 1023 이하 헤더에는 로그아웃을 두지 않는다(메뉴 안에서) */
.hd-logout, .msheet-hello, .msheet-acct .logout { display: none; }
html.is-login .hd-login, html.is-login .msheet-loginhint, html.is-login .msheet-acct .login, html.is-login .msheet-acct .signup { display: none; }
html.is-login .hd-logout { display: flex; }
html.is-login .msheet-hello { display: block; }
html.is-login .msheet-acct { grid-template-columns: 1fr; }
html.is-login .msheet-acct .logout { display: grid; }

/* ── 전체 메뉴 (#gmenu) ── */
.gmenu { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--white); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.gmenu.open { opacity: 1; visibility: visible; }
.gmenu-top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; height: var(--hd-h); background: var(--white); }
.gmenu-top .t { font-size: var(--fs-16); font-weight: 700; }
/* 닫기 — ne-ai-portal 닫기와 같은 46 원 · 아이콘만(글자 '닫기'는 font-size 0, 이름은 aria-label). 위치만 이 페이지 폭 규칙(콘텐츠 오른쪽 끝 · 띠 세로 가운데) */
.gmenu-close { position: absolute; right: max(var(--pad-x), calc((100vw - var(--maxw)) / 2 + var(--pad-x))); top: 50%; z-index: 5; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; background: var(--gray-bg); color: var(--ink); font-size: 0; transform: translateY(-50%); transition: background .15s; }
.gmenu-close:hover { background: var(--line); }
.gmenu-close svg { width: 22px; height: 22px; }
.gmenu-in { max-width: var(--maxw); margin: 0 auto; padding: 24px var(--pad-x) 80px; }
.gmcols { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0 var(--gutter); }   /* 페이지와 같은 10컬럼 그리드 */
.gmsec { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; }   /* 두 칸 제목 줄 높이를 같게(subgrid) — 좁은 폭에서 한 칸 제목만 두 줄이 돼도 아래 선이 같은 높이 */
/* 대상별 2칸 — 선생님 1~6컬럼(묶음 하나 = 2컬럼) · 학생·학부모 7~10컬럼. 두 칸 사이 = 거터 2(margin-left 로 하나 더) — 묶음 사이(거터 1)보다 한 단계 넓게.
   선생님 묶음은 아래 브랜드 사이트 5칸(칸당 2컬럼)과 세로선이 맞는다 */
.gmsec--tf { grid-column: 1 / span 6; }
.gmsec--lf { grid-column: 7 / span 4; margin-left: var(--gutter); }
.gmgrps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gutter); }
/* 글자 위계 — 칸 제목 28 · 800 → 묶음 이름 20 · 800 → 메뉴 16 · 500. 묶음 이름 ~ 첫 메뉴 14 — 묶음 이름이 메뉴 줄에 붙어 보이지 않게 */
.gmsec h3, .gmbrand-head2 { padding-bottom: 18px; margin-bottom: 22px; border-bottom: 2px solid var(--ink); font-size: var(--fs-28); font-weight: 800; line-height: 1.3; letter-spacing: -.02em; }
.gmsec h3 { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; align-self: end; }
.gmsec h3 span { font-size: var(--fs-16); font-weight: 600; letter-spacing: var(--ls-body); color: var(--muted); }   /* 대상(선생님 · 학생·학부모) — 칸 제목 오른쪽 */
.gmbrand-head2 { border-bottom: 1px solid var(--line); }
.gmgrp h4 { margin-bottom: 14px; font-size: var(--fs-20); font-weight: 800; line-height: 1.4; letter-spacing: var(--ls-title); color: var(--ink); }
.gmgrp a, .gm-off { display: block; padding: 8px 0; font-size: var(--fs-16); font-weight: 500; line-height: 1.5; color: var(--ink); }
.gmgrp a:hover { color: var(--red); }
/* 오픈 전(비활성) = 링크 아닌 div · 탭 순서 밖 — a href="#" 로 바꾸면 키보드로 잡히는 빈 링크가 된다. 상태는 뱃지로만 알린다 */
.gm-off { color: var(--weak); cursor: default; }
.gmbrand-sep { height: 1px; margin: 40px 0 32px; }   /* 간격만 — 선은 그리지 않는다 */
/* 브랜드 사이트 10곳 — 같은 크기 박스 안에 로고만 가운데, 한 줄 설명은 박스 아래(링크 = 박스 + 설명) */
.gm-brand-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px var(--gutter); }   /* 칸 사이 = 거터 → 한 칸 = 10컬럼 중 2컬럼(위 묶음과 세로선 일치) */
.gm-brand-grid a { display: flex; flex-direction: column; gap: 10px; }
.gm-blogo { display: grid; place-items: center; height: 92px; padding: 0 20px; border-radius: var(--r-20); background-color: var(--surface); transition: background-color .2s; }
.gm-brand-grid img { max-width: 100%; max-height: 26px; width: auto; transition: filter .2s; }   /* 긴 로고(Build & Grow · 주니어랩)가 좁은 폭(1024)에서 박스 끝에 닿지 않게 박스 좌우 20 안쪽 */
.gm-bdesc { font-size: var(--fs-14); line-height: 1.4; color: var(--muted); text-align: center; word-break: keep-all; transition: color .2s; }
/* 오버 · 포커스 = 박스 레드 · 로고 흰 단색(헤더 반전과 같은 filter) · 설명 잉크.
   :hover 와 :focus-visible 을 한 셀렉터 목록에 두지 않는다 — 모르는 브라우저(iOS 15.0~15.3 · Safari 15.3 이하)는 목록 전체를 버려 :hover 까지 사라진다 */
.gm-brand-grid a:hover .gm-blogo { background-color: var(--red); }
.gm-brand-grid a:focus-visible .gm-blogo { background-color: var(--red); }
.gm-brand-grid a:hover img { filter: brightness(0) invert(1); }
.gm-brand-grid a:focus-visible img { filter: brightness(0) invert(1); }
.gm-brand-grid a:hover .gm-bdesc { color: var(--ink); }
.gm-brand-grid a:focus-visible .gm-bdesc { color: var(--ink); }

/* ── 모바일 시트 (#msheet) ── */
.msheet { position: fixed; inset: 0; z-index: var(--z-sheet); background: rgb(var(--shadow-rgb) / .4); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.msheet.open { opacity: 1; visibility: visible; }
.msheet-in { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--white); transform: translateX(100%); transition: transform .3s var(--ease-out); }
.msheet.open .msheet-in { transform: none; }
.msheet-top { display: flex; align-items: center; justify-content: space-between; height: var(--hd-h); padding: 0 var(--pad-x); }   /* 헤더와 같은 높이 · 여백 — X 가 햄버거 자리에 온다 */
/* 시트 맨 위 줄 = '로그인하세요 ›'(로그인 상태 = 인사) + X */
.msheet-loginhint, .msheet-hello { font-size: var(--fs-16); font-weight: 700; }
.msheet-hello { color: var(--text-2); font-weight: 600; }
.msheet-name { color: var(--ink); font-weight: 700; }
.mlh-chev { color: var(--muted); margin-left: 4px; }
.mclose { display: grid; place-items: center; width: 42px; height: 42px; margin-right: -7px; color: var(--ink); }   /* 42 상자 · 28 아이콘 — 오른쪽으로 7 내밀어 가운데가 햄버거(28) 가운데와 같다 */
.mclose svg { width: 28px; height: 28px; }
.msheet-acct { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 20px 18px; border-bottom: 1px solid var(--line); }
.msheet-acct a { display: grid; place-items: center; height: 48px; border-radius: var(--r-12); border: 1px solid var(--line); font-size: var(--fs-14); font-weight: 700; }
.msheet-acct .signup { background: var(--ink); border-color: var(--ink); color: var(--white); }
.msheet-md { flex: 1; min-height: 0; display: grid; grid-template-columns: 40% 1fr; }
.msheet-cats { position: relative; display: flex; flex-direction: column; background: var(--surface); }   /* 그레이 면으로 메뉴 칸과 나뉜다(세로선 없음). 위 여백 없음 — 첫 탭 알약이 면 맨 위에 붙는다 */
.mcat { position: relative; z-index: 2; height: 56px; padding: 0 20px; text-align: left; font-size: var(--fs-16); font-weight: 500; color: var(--muted); transition: color .3s var(--ease-out); }
.mcat.on { color: var(--white); font-weight: 700; }
/* 고른 탭 = 레드 알약 하나(Figma 사이트 350:10981) — 오른쪽만 둥글고 그레이 칸보다 14 넓게 메뉴 칸 위로 내민다.
   header.js 가 --pill-i(탭 순번)를 주면 그 자리로 미끄러진다(스크립트 전 = 0 · 첫 탭). 탭 글자(z 2) > 알약(z 1) > 메뉴 칸 */
.mcat-pill { position: absolute; top: 0; left: 0; z-index: 1; width: calc(100% + 14px); height: 56px; border-radius: 0 999px 999px 0; background: var(--red); pointer-events: none;
  transform: translateY(calc(var(--pill-i, 0) * 100%)); transition: transform .35s var(--ease-out); }
.msheet-panels { overflow-y: auto; padding: 0 0 40px 4px; }   /* 왼쪽 4 + 글자 안쪽 20 = 시안 안쪽 여백 24 — 14 내민 알약과 글자가 10 떨어진다. 위 0 = 첫 묶음 이름 줄이 첫 탭과 나란히 */
.mpanel { display: none; }
.mpanel.on { display: block; }
.mpanel > a, .mpanel > .gm-off { display: block; padding: 14px 20px; font-size: var(--fs-16); font-weight: 500; }
.mpanel > a:first-child, .mpanel > .gm-off:first-child { padding-top: 18.5px; }   /* 첫 줄 시작선 = 선생님 탭 '교재 찾기' 글자 위(56 줄 가운데 → 18.5) */
/* 선생님 묶음(교재 찾기 · 수업 준비 · 평가·출제) = 아코디언(엔이티처 모바일 메뉴 형태) — 처음엔 모두 열림, 묶음 이름을 누르면 header.js 가 접고 편다.
   선은 묶음 사이에만, 글자 좌우 끝(20)에 맞춘다 */
.macc { margin: 0 20px; }
.macc + .macc { border-top: 1px solid var(--ink); }
/* 묶음 이름 줄 높이 56 = 왼쪽 탭(.mcat)과 같다 — 첫 줄 '교재 찾기'가 '선생님' 탭과 나란하고, 다 접으면 줄마다 선 사이 가운데에 선다 */
.mgrp { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0; text-align: left; font-size: var(--fs-16); font-weight: 800; color: var(--ink); }
.mgrp-list::after { content: ""; display: block; height: 10px; }   /* 묶음 끝 여백 10(마지막 메뉴 아래 14 + 10 = 24)은 padding 이 아니라 빈 칸 — padding 이면 접을 때 높이가 10 에서 멈췄다가 끝에 툭 떨어진다 */
.mgrp-list.is-moving { overflow: hidden; transition: height .3s var(--ease-out), opacity .3s var(--ease-out); }   /* 접고 펴는 동안만(header.js) — 멈춰 있을 때 잘리지 않게 */
.mgrp-list.is-shut { opacity: 0; }
.mgrp-chev { flex: none; width: 20px; height: 20px; color: var(--muted); transition: transform .3s var(--ease-out); }
.mgrp[aria-expanded="false"] .mgrp-chev { transform: rotate(180deg); }
.mgrp-list > a, .mgrp-list > .gm-off { display: block; padding: 14px 0; font-size: var(--fs-16); font-weight: 500; }
/* 뱃지 항목(평가·출제 — Quick Quiz · 어휘 문제 마법사 · 문법 문제 출제 서비스) — 칸(.mgrp-list = 컨테이너 mlist)이 모자라면 뱃지를 이름 위로, 들여쓰기 없이 왼쪽에 붙인다.
   아래로 떨어지면 margin-left 6 만큼 들여 써지고 다음 메뉴와 붙어 보인다. 교재 패널 서비스 행(.bp-row__name · sections.css)과 같은 방식 · 같은 간격 6.
   기준 219 = 가장 긴 '문법 문제 출제 서비스 + 11월 중 오픈'이 한 줄에 드는 폭(실측 213.45 · 16px 500) + 글자 렌더링 여유 약 5 — 세 항목이 같이 바뀐다(폭 438 이하 = 휴대폰).
   한 줄에 들 때는 손대지 않는다(인라인 · margin-left 6 그대로). 이름 · 뱃지 문구 · 글자 크기가 바뀌면 다시 잰다 */
.mgrp-list { container: mlist / inline-size; }
@container mlist (max-width: 219px) {
  .mgrp-list > a { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
  .mgrp-list .gm-new, .mgrp-list .gm-st { margin-left: 0; }
}
@supports not (container-type: inline-size) {   /* 컨테이너 쿼리를 모르는 브라우저의 대체 — 넘칠 때만 뱃지가 위 줄로(wrap-reverse), 들여쓰기 없이 */
  .mgrp-list > a { display: flex; flex-wrap: wrap-reverse; align-items: center; gap: 6px; }
  .mgrp-list .gm-new, .mgrp-list .gm-st { margin-left: 0; }
}
/* 브랜드 사이트(MO) — 같은 크기 칸 1열 · 설명 생략(구성안). 2열이면 칸이 약 91 로 좁아 긴 로고가 작아진다 */
.mbrand-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18.5px 20px 6px; }   /* 위 18.5 = 다른 두 탭 첫 줄과 같은 시작선 · 좌우 20 = 선생님 메뉴와 같게(알약 끝과 로고 칸이 10 떨어진다) */
.mbrand-grid a { display: grid; place-items: center; height: 56px; border-radius: var(--r-14); background: var(--surface); }   /* 높이 56 = 왼쪽 탭 줄과 같다(390 × 844 에서 10칸이 한 화면에) */
.mbrand-grid img { max-width: 80%; max-height: 20px; width: auto; }
.mbrand-grid img[src$="/i-challenge.svg"], .mbrand-grid img[src$="/ne-teacher.svg"] { max-height: 28px; }   /* 아이챌린지 · 엔이티처 = 로고 안 글자가 작아 20 이면 작아 보인다 */

/* 브레이크포인트: 1023 이하 = 모바일 시트용 메뉴 버튼으로 교체 */
@media (max-width: 1023px) {
  /* 헤더 뒷배경 = 블러 · 번짐 없는 흰 단색, 헤더 높이에서 끊는다. 어두운 밴드 위에서도 반전하지 않는다(header.js — 흰 헤더 그대로).
     블러를 되살리지 않는다 — 번짐 띠가 바로 밑 카드 · 칩을 늘 뭉개 보이게 하고, 스크롤마다 블러를 다시 계산한다 */
  .hd::before, .hd::after { height: var(--hd-h); -webkit-mask-image: none; mask-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hd::before { background: var(--white); }
  #gham { display: none; }
  .hd-burger { display: flex; }
  html.is-login .hd-logout { display: none; }   /* 모바일 헤더 = 햄버거만 — 잘못 눌러 로그아웃되지 않게(로그아웃은 메뉴 안에서) */
  .hd-logo img { width: 112px; }
  .hd-actions { gap: 16px; }   /* 아이콘만(라벨 숨김) — 자리 28 · 사이 16. 햄버거 오른쪽 끝 = 콘텐츠 오른쪽 끝 */
  .hd-act { min-width: 28px; }
  .hd-act span { display: none; }
  /* 전체 메뉴는 1023 이하에서 열 수 없다(버튼 교체) — 열린 채로 폭이 줄었을 때만 쓰는 대비 */
  .gmcols, .gmgrps { grid-template-columns: minmax(0, 1fr); }
  .gmsec--tf, .gmsec--lf { grid-column: auto; }
  .gmsec--lf { margin-left: 0; }
  .gm-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}