/* 헤더의 관문 이름표 — `QBOOK │ [III] Board 전문의 자격시험` 의 오른쪽 부분 (260909)
 *
 * 🔴 **KMLE 를 포함한 모든 화면에 실린다.** `line.css` 와 다른 점이 이것이다.
 *    세 관문이 같은 문법을 갖는다 — 🔴 260915 대표님 결정으로 **바뀌었다**(아래 '사이트 목록' 블록) —
 *      QBOOK 로고  → 그 사이트 홈(`/home`)
 *      이름표      → 사이트 목록 펼치기(세 사이트 + 전체 사이트 보기 = 현관)
 *    (260909 에는 로고 → 현관 · 이름표 → 홈 이었다. 되돌린 이유는 element/lineMark.ejs 머리말.)
 *    KMLE 에도 `[I] KMLE 의사국가고시` 가 붙어야 이 규칙이 성립한다.
 *    ⚠️ **KMLE 에 이름표가 없으면 현관에 갈 길이 사라진다** — 목록이 그 길이다.
 *
 * 🔴🔴 **치수를 rem 으로 쓰지 마라. px 로 쓴다.**
 *    부트스트랩 3 이 `html{font-size:10px}` 을 건다. `line.css` 는 `html{font-size:16px}` 로
 *    되돌리지만 **그 파일은 라인에서만 실린다.** 이 파일은 KMLE 에도 실리므로 rem 을 쓰면
 *    KMLE 에서만 글자가 62.5% 로 쪼그라든다. 260907 에 라인 쪽에서 실제로 겪은 함정이다.
 *
 * 색은 두 벌이다 — 기본은 **밝은 헤더(KMLE)**, `.is-line` 이 붙으면 **어두운 헤더**로 덮는다.
 * 어두운 쪽 변수(--gold 등)는 `line.css` 가 정의한다(라인에서만 실리므로 그것으로 충분하다).
 */

/* 로고와 나란히 세운다.
 * ⚠️ 이름표는 마크업상 `.navbar-header` **안**에 있다(element/lineMark.ejs).
 *    밖에 두면 모바일에서 로고 아래 둘째 줄로 떨어진다 — `.myNavBar .container` 가
 *    좁은 폭에서 `flex-direction:column` 이 되기 때문이다(260907 실측).
 * ⚠️ 로고(`.navbar-brand`)는 `float:left` 인데 부모가 flex 가 되면 float 은 무시되고
 *    flex 아이템이 된다. 보이는 위치는 같다(음수 margin-left 는 그대로 산다). */
.navbar.myNavBar .navbar-header { display: flex; align-items: center; }

/* 🔴 로고를 세로 가운데로 맞춘다.
 *    실측(260909) — 로고 이미지 중심 y=40.1 인데 이름표·메뉴는 33.5 였다. **6.6px 아래**로
 *    내려가 있었다. `.navbar-brand` 의 위아래 패딩이 17px/15px 로 비대칭이고 그 안에서
 *    이미지가 아래로 밀린 탓이다. 옆에 이름표가 생기면서 눈에 띄게 됐다(대표님 지적).
 *    ⚠️ **KMLE 로고도 약 6px 위로 올라간다.** 원래 자기 메뉴와도 어긋나 있던 것이라
 *       고치는 쪽이 맞다고 봤다. 되돌리려면 이 두 줄만 지우면 된다. */
.navbar.myNavBar .navbar-brand { display: flex; align-items: center; }
.navbar.myNavBar .navbar-brand { padding-top: 0; padding-bottom: 0; }

/* ⚠️ 음수 margin 을 쓰는 이유 — 왼쪽 여백이 `.navbar-brand` 의 `padding-right:30px` 에서
 *    오는데 그건 base.css(KMLE 공용)라 안 건드린다. 실측으로 로고~구분선 33px,
 *    구분선~배지 19px 이라 **한쪽으로 치우쳐** 있었다. 양쪽을 20px 안팎으로 맞춘다. */
/* ══ 간격 — **시안 값 그대로** ═══════════════════════════════════════
 * 🔴 실제 헤더가 시안과 가장 크게 달랐던 것이 **간격**이다(260909 대표님 지적).
 *    원인은 `base.css:5059` 의 `.myNavBar .container{justify-content:space-between}` 이다.
 *    그러면 [로고][메뉴][우측] **세 덩어리를 균등하게 벌린다** — 로고와 메뉴 사이가 크게 뜬다.
 *    시안(`.lh-in`)은 그렇지 않다 —
 *      왼쪽 묶음(로고+이름표+메뉴)은 **붙어 있고**, 우측만 `margin-left:auto` 로 끝에 간다.
 *
 * 시안 값 (docs/mockup/line-design-all-v1.html)
 *    .lh-in     display:flex · **align-items:center** · **gap 1.4rem = 22.4px** · height 62px
 *    .lh-brand  gap .75rem = **12px**   로고 ↔ 구분선
 *    .lh-line   gap .45rem = **7.2px**  구분선 ↔ 배지 ↔ 이름 ↔ 부제
 *    .lh-nav    margin-left .5rem = **8px**, flex:1   → 부제 ↔ 메뉴 = 22.4 + 8 = **30.4px**
 *    .lh-right  margin-left:auto                      우측만 끝으로
 * ⚠️ 이 값을 '보기 좋게' 바꾸지 마라. 시안과 어긋나면 또 지적이 온다.
 * ⚠️ 🔴 **`gap:1.4rem` 을 빼먹으면 부제와 메뉴가 붙어 보인다**(260909 에 그랬다).
 *    `.lh-nav{margin-left:.5rem}` 만 보고 8px 로 잡으면 안 된다. **둘을 더해야 한다.** */

/* 🔴 이 네 줄에는 `.is-line` 을 붙이지 않는다 — **KMLE 에도 걸려야 한다**(260910 대표님 지적).
 *    처음엔 `.is-line` 으로 묶어 두었는데, 그러면 `line==='kmle'` 일 때 클래스가 안 붙어
 *    **KMLE 만 이름표와 메뉴가 붙은 채로 남았다.** 세 라인 다 같은 헤더 골격이어야 한다.
 * 🔑 색과 간격을 갈라 놓은 것이 요점이다 —
 *      간격·정렬  세 라인 공통  → 여기(`.navbar.myNavBar`)
 *      어두운 색  라인 전용     → 아래 `.is-line` 블록과 line.css
 *    색까지 공통으로 만들면 KMLE 헤더가 까맣게 된다. 가르는 선을 지우지 마라. */
.navbar.myNavBar .container { justify-content: flex-start; }
/* 🔴 세로 가운데. base.css 의 `.myNavBar .container` 는 `align-items` 가 주석 처리돼 있어
 *    기본값 `stretch` 다 → 메뉴 글자가 **위로 붙는다**(260909 대표님 지적).
 * ⚠️ 768px 이하는 제외한다 — 거기서는 이 상자가 세로(column) 배치라
 *    `center` 를 주면 가로 가운데로 몰린다. */
@media (min-width: 769px) {
    .navbar.myNavBar .container { align-items: center; }
}
/* 메뉴는 로고 묶음 옆에 30.4px 띄우고 남는 폭을 차지한다(시안 `.lh-in` gap + `.lh-nav`).
 * ⚠️ `flex:1` 을 빼지 마라 — base.css 의 `#navButtons{width:100%}` 가 살아 있어
 *    폭 100% + 왼쪽 여백 30.4px 이 되어 헤더가 그만큼 넘친다. */
.navbar.myNavBar .navButtons#navButtons { margin-left: 30.4px; flex: 1; }
/* 우측(알림·프로필·구독)만 끝으로 민다 */
.navbar.myNavBar #userInfoInMobile { margin-left: auto; }

/* 🔴 260914 — 769~792px 에서 KMLE 메뉴가 두 줄로 접히는 버그(대표님 실측 769~792,
 *    770·771 에서도 재확인).
 *    원인 — 메뉴(`#navbar`, 로그인 상태에 따라 400~402px)가 담길 자리가
 *    `container 폭 - 로고묶음(120.9px) - 우측상자(200px) - 이 여백(30.4px)` 인데,
 *    769px 근처에서는 그 계산이 400px 를 못 채운다.
 *    ⚠️ **처음엔 389px 로 계산해 margin-left:10px 만 줬다가 여전히 접혔다** —
 *    `scripts/dev_header_shots.js` 확인용 하네스가 `__("Notice")` 를 실제 번역 없이
 *    영어 그대로("Notice") 돌려줘서, "공지사항"(85.2px)을 "Notice"(73.8px)로
 *    **11.4px 더 좁게** 재고 있었다. 실제 페이지로 다시 재서 0 으로 낮춘다.
 *    로고와 메뉴 사이 30.4px 은 넓은 화면 기준의 여유값이라, 이 좁은 구간만 줄인다. */
@media (min-width: 769px) and (max-width: 792px) {
    .navbar.myNavBar .navButtons#navButtons { margin-left: 0; }
}

/* 🔴 KMLE 메뉴 항목 높이는 **일부러 라인과 다르게 둔다**(260910 대표님 결정).
 *      Board  학습하기  75.99 x 37.59   padding 8.8px 11.5px   (line.css:88)
 *      KMLE   학습하기  85.20 x 65      padding 22.5px 15px    (base.css:5046)
 *    한 줄일 때는 로고 묶음(61px)이 헤더 높이를 정해서 68 : 67 로 거의 같고,
 *    관리자 메뉴가 두 줄로 접히는 폭(약 1360px)에서만 131 : 76 으로 벌어진다.
 *
 * 🔑 260910 에 `padding: 8.8px` 로 맞췄다가 **되돌렸다**(커밋 c2f8b835 → 이 주석).
 *    맞추면 KMLE 메뉴의 회색 hover 배경이 헤더를 꽉 채우지 않고 37.6px 알약이 되는데,
 *    대표님 판단은 **"KMLE 는 구조가 달라 나중에 디자인으로 바꾸는 편이 낫다"** 였다.
 *    ⚠️ 높이가 다른 것을 보고 "버그" 로 여겨 다시 맞추지 마라. 알고 둔 것이다. */

.lineMark {
    display: flex; align-items: center; gap: 7.2px;
    flex: none; padding-left: 0;
    /* 로고 ↔ 구분선 12px. `.navbar-brand` 의 `padding-right:30px`(base.css)에서 18px 을 뺀다.
     * ⚠️ 그 패딩은 KMLE 공용이라 안 건드린다. 여기서 음수 여백으로 맞춘다. */
    margin-left: -18px;
    text-decoration: none; cursor: pointer;
    position: relative;              /* 아래 툴팁의 기준점 */
}
.lineMark:hover, .lineMark:focus { text-decoration: none; }
/* 🔴 구분선 **양옆을 12px 로 맞춘다**(260910 대표님 지시 — "로고↔| 만큼 |↔이름도 넓혀라").
 *    왼쪽 12px 은 `.navbar-brand` 패딩(30px)에서 위 `margin-left:-18px` 을 뺀 값이고,
 *    오른쪽은 `.lineMark` 의 `gap:7.2px` 뿐이라 **7.2px 밖에 안 됐다.** 눈에 띄게 붙어 보였다.
 * 🔑 `gap` 을 12px 로 올리면 안 된다 — 그 gap 은 배지↔이름↔부제에도 걸려서
 *    시안값(.lh-line gap .45rem = 7.2px)이 통째로 틀어진다. **구분선에만** 4.8px 을 더한다.
 *    7.2 + 4.8 = 12px. */
.lineMark-sep  { width: 1px; height: 18px; background: #e0e0e0; margin-right: 4.8px; }

/* 🔴 툴팁을 **아래로** 띄운다.
 *    브라우저 기본 툴팁(`title`)은 위로 떠서 **헤더 밖에서 잘렸다**(260909 대표님 지적).
 *    위치를 정할 방법이 없어서 직접 만든다.
 *    ⚠️ `pointer-events:none` 이 없으면 툴팁이 마우스를 가로채 깜빡인다. */
.lineMark::after {
    content: attr(data-tip);
    position: absolute; top: calc(100% + 9px); left: 0;
    padding: 5px 9px; border-radius: 3px; white-space: nowrap;
    font-size: 11px; font-weight: 500; letter-spacing: 0;
    background: #2b2823; color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    opacity: 0; visibility: hidden; transform: translateY(-3px);
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
    pointer-events: none; z-index: 30;
}
.lineMark:hover::after, .lineMark:focus::after {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .15s ease, transform .15s ease;
}
@media (prefers-reduced-motion: reduce) { .lineMark::after { transition: none; } }
.lineMark-num  {
    font-family: Cinzel, serif;
    font-size: 10px; font-weight: 700; line-height: 1.35;
    color: #2a9d7f; border: 1px solid #b8e6d6; background: #f2faf7;
    border-radius: 2px; padding: 2px 5px;
}
/* 🔴 시안은 **Cinzel 세리프 · 대문자**다(`.lh-name`). 글꼴은 head 에서 싣는다.
 *    안 실으면 산세리프로 떨어져 **시안과 전혀 다른 얼굴**이 된다(260909 에 그랬다). */
.lineMark-name {
    font-family: Cinzel, "Nanum Myeongjo", serif;
    font-weight: 700; font-size: 16px; letter-spacing: .1em;
    text-transform: uppercase; color: #222; white-space: nowrap;
    /* 🔴 260914 — 로고 이미지와 수직 가운데가 안 맞는다는 지적(스크린샷 2026-09-14
     * 오후 1.43.29). line-height 를 안 정해 둬서 **body 의 1.75 를 그대로 물려받았고**,
     * Cinzel 은 그 넓은 줄 상자 안에서 글자가 위쪽으로 쏠려 그려진다(실측 — 로고 중심
     * cy=33.5 인데 KMLE 글자는 눈으로 몇 px 위였다. getBoundingClientRect 로는 상자가
     * 정확히 같은 자리에서 센터링되어 안 잡히는 함정이었다 — 상자는 맞는데 그 안의
     * 잉크가 안 맞았다). 줄 상자를 글자 크기에 맞게 좁히면 flex 센터링이 잉크의
     * 실제 중심에 훨씬 가까워진다. */
    line-height: 1;
}
.lineMark-ko   { font-size: 12px; color: #888; white-space: nowrap; }
.lineMark:hover .lineMark-name { color: #000; }
.lineMark:hover .lineMark-num  { border-color: #3ad49a; background: #e6f8f1; }

/* 🔴 관리자 미리보기 배지 — `?line=board` 처럼 **호스트와 다른 관문**을 보고 있을 때만 나온다.
 *    260907 에 대표님이 주소에 `?line=` 이 남은 KMLE 화면을 보시고 "KMLE 디자인이 바뀌었다" 고
 *    하셨다. 화면에 표시가 없어서 구분할 방법이 없었다. 그래서 붙인 것이다.
 *    ⚠️ 좁은 화면에서도 **숨기지 않는다.** 숨기면 이 배지를 만든 이유가 사라진다.
 * 🔴 260911 — **흐름에서 뺐다**(position:absolute). 예전에는 이름표 옆에 글자 칸으로 끼어들어
 *    이름표가 넓어졌고, 그만큼 메뉴가 밀려 **배지가 있을 때만 헤더 배치가 달라졌다**
 *    (대표님 — "디자인이 깨지잖아 너비가 안 맞고"). 지금은 이름표 왼쪽 위 모서리에 걸친
 *    작은 꼬리표라 배지가 있든 없든 헤더 폭·메뉴 위치가 같다(350·768·1280 실측).
 *    ⚠️ 기준점은 `.lineMark` 의 `position:relative` 다(아래로 뜨는 툴팁과 같은 기준점).
 *    ⚠️ 오른쪽이 아니라 **왼쪽**에 붙인 이유 — 769~1023 에서는 이름표가 로마 숫자 하나(24px)라
 *       배지가 더 넓다. 오른쪽에 맞추면 남는 폭이 왼쪽으로 삐져 로고를 덮는다.
 *       왼쪽에 맞추면 남는 폭이 메뉴 앞 빈자리 쪽으로 간다. */
.lineMark-preview {
    position: absolute; left: 0; top: -11px; z-index: 2;
    font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: .02em;
    color: #fff; background: #2a9d7f;
    border-radius: 2px; padding: 2px 4px; white-space: nowrap;
}

/* ══ 사이트 목록 — 이름표를 누르면 펼쳐진다 (260915 대표님, 시안 header-site-switch-v1 안 2) ══
 * 🔑 **되돌린 판단이다.** 260909 에는 로고 → 현관 · 이름표 → 홈 이었다. 지금은
 *      로고 → 그 사이트 홈(element/brandLogo.ejs) · 이름표 → 이 목록(세 사이트 + 전체 사이트 보기 = 현관)
 *    ⚠️ 목록을 없애려면 로고를 현관으로 되돌려라. 둘 다 없으면 현관에 갈 길이 사라진다.
 * ⚠️ 이름표는 이제 `<button>` 이다. 브라우저 기본 버튼 모양(회색 바탕·테두리·글꼴)을 지운다. */
.lineSw { position: relative; display: flex; align-items: center; flex: none; }
button.lineMark { background: none; border: 0; padding: 0; font: inherit; color: inherit; line-height: inherit; }
button.lineMark:focus { outline: none; }
button.lineMark:focus-visible { outline: 2px solid #2a9d7f; outline-offset: 4px; border-radius: 2px; }
.lineSw.is-open .lineMark::after { display: none; }    /* 목록이 열려 있으면 툴팁은 가린다 */

/* ▾ 동그라미 — **이름 오른쪽**이다. 모든 폭에서 그렇다.
 * ⚠️ 시안 v1 은 좁은 폭에서 배지 **아래**에 두었는데 대표님이 "우측에 들어가야지, 아래 들어가면 안 된다" 고
 *    하셨다(260915). 그만큼 폭(22px + 간격)을 쓰므로 아래 '좁아질 때' 에서 보정한다. 모양은 시안 안 1 의 동그라미. */
.lineMark-caret {
    display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box;
    width: 22px; height: 22px; margin-left: -1px;
    border: 1px solid #e2e2e2; border-radius: 50%; background: #fff; color: #777;
}
.lineMark-caret svg { display: block; width: 10px; height: 10px; }
@media (prefers-reduced-motion: no-preference) { .lineMark-caret svg { transition: transform .15s ease; } }
.lineMark:hover .lineMark-caret,
.lineSw.is-open .lineMark-caret { color: #222; border-color: #b8e6d6; background: #f2faf7; }
.lineSw.is-open .lineMark-caret svg { transform: rotate(180deg); }

/* 목록 — 기본은 접힘. 이름표 아래로 연다.
 * ⚠️ 여기도 px 만 쓴다(KMLE 에 실리는 파일 — 위 머리말). */
.lineSw-menu {
    display: none; position: absolute; top: calc(100% + 12px); left: 0; z-index: 1060;
    width: 292px; padding: 6px; box-sizing: border-box; text-align: left; letter-spacing: 0; line-height: 1.2;
    background: #fff; border: 1px solid #e4e4e4; border-radius: 6px; box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
.lineSw.is-open .lineSw-menu { display: block; }
/* 🔴 좁은 폭(500 이하)만 전체 너비로 연다 — 이름표 기준으로 292px 을 열면 **창 밖으로 잘린다**
 *    (260915 390px 실측 — '홈으로' 가 잘렸다). 헤더 첫 줄(`.navbar-header`) 폭에 맞춰 양옆 8px 만 띄운다.
 * ⚠️ 처음엔 768 이하 전체에 걸었다가 대표님 지적 — "500px 이상은 769px 과 같이 버튼 아래에".
 *    501~768 은 이 블록을 안 타서 넓은 화면과 똑같이 이름표 아래 292px 로 열린다(501px 에서도 창 안에 든다).
 * ⚠️ `top` 을 따로 준다. 기준 상자가 이름표(22px)가 아니라 헤더 첫 줄(최소 65px)이라 `100% + 12px` 를 그대로 두면
 *    **목록이 한참 아래서 펼쳐졌다**(대표님 지적). 첫 줄은 세로 가운데 정렬이므로 이름표 아래 끝은 `50% + 11px`,
 *    거기에 넓은 화면과 같은 틈 12px 을 더한다. */
@media (max-width: 500px) {
    .navbar.myNavBar .navbar-header { position: relative; }
    .lineSw { position: static; }
    .lineSw-menu { width: auto; left: 8px; right: 8px; top: calc(50% + 23px); }
}
.lineSw-head { padding: 7px 10px 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #9a9a9a; }
.lineSw-item {
    display: flex; align-items: center; gap: 7px; padding: 9px 10px; border-radius: 4px;
    color: #222; text-decoration: none; white-space: nowrap;
}
a.lineSw-item:hover, a.lineSw-item:focus { background: #f2f8f6; color: #000; text-decoration: none; }
.lineSw-n {
    font-family: Cinzel, serif; font-size: 10px; font-weight: 700; line-height: 1.35;
    min-width: 26px; box-sizing: border-box; text-align: center; padding: 2px 4px; border-radius: 2px;
    color: #2a9d7f; border: 1px solid #b8e6d6; background: #f2faf7;
}
.lineSw-t { font-family: Cinzel, "Nanum Myeongjo", serif; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.lineSw-k { font-size: 12px; color: #888; }
.lineSw-tag { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #999; }
.lineSw-item.is-here { background: #f2faf7; }
.lineSw-item.is-here .lineSw-tag { color: #2a9d7f; font-weight: 700; }
/* 닫힌 사이트 — 일반 회원은 누를 수 없다(is-closed). 관리자·저자·편집자·디자이너는 링크지만 흐리게(is-shut) */
.lineSw-item.is-closed { color: #b3b3b3; cursor: default; }
.lineSw-item.is-closed .lineSw-n { color: #b3b3b3; border-color: #e3e3e3; background: #fafafa; }
.lineSw-item.is-closed .lineSw-k { color: #c2c2c2; }
.lineSw-item.is-shut .lineSw-t, .lineSw-item.is-shut .lineSw-k { opacity: .6; }
.lineSw-all {
    display: flex; align-items: baseline; gap: 6px; margin-top: 5px; padding: 11px 10px 8px;
    border-top: 1px solid #eee; color: #333; font-size: 13px; font-weight: 700; text-decoration: none;
}
.lineSw-all small { font-size: 11px; font-weight: 400; color: #999; }
.lineSw-all b { margin-left: auto; font-weight: 400; color: #999; }
.lineSw-all:hover, .lineSw-all:focus { color: #2a9d7f; text-decoration: none; }
.lineSw-all:hover b { color: #2a9d7f; }

/* 어두운 헤더 — 변수는 line.css 가 정의한다(라인에서만 실리므로 `.is-line` 안에서만 쓴다) */
.is-line .lineMark-caret { background: none; border-color: var(--rule); color: var(--parch-dim); }
.is-line .lineMark:hover .lineMark-caret,
.is-line .lineSw.is-open .lineMark-caret { color: var(--gold-lit); border-color: var(--gold); background: rgba(201,162,39,.10); }
.is-line button.lineMark:focus-visible { outline-color: var(--gold-lit); }
.is-line .lineSw-menu { background: var(--ink-2); border-color: rgba(201,162,39,.28); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.is-line .lineSw-head { color: var(--parch-dim); }
.is-line .lineSw-item { color: var(--parch); }
.is-line a.lineSw-item:hover, .is-line a.lineSw-item:focus { background: rgba(201,162,39,.10); color: #fff; }
.is-line .lineSw-n { color: var(--gold-lit); border-color: var(--rule); background: none; }
.is-line .lineSw-k { color: var(--parch-dim); }
.is-line .lineSw-item.is-here { background: rgba(201,162,39,.08); }
.is-line .lineSw-item.is-here .lineSw-tag { color: var(--gold-lit); }
.is-line .lineSw-item.is-closed,
.is-line .lineSw-item.is-closed .lineSw-k { color: #5d5b55; }
.is-line .lineSw-item.is-closed .lineSw-n { color: #5d5b55; border-color: #2a3144; background: none; }
.is-line .lineSw-all { color: var(--parch); border-top-color: rgba(201,162,39,.18); }
.is-line .lineSw-all:hover, .is-line .lineSw-all:hover b { color: var(--gold-lit); }

/* ── 어두운 헤더(전공의·전문의) ─────────────────────────────────────
 * `.is-line` 이 `.lineMark` 보다 구체적이라 파일 순서와 상관없이 이긴다. */
.is-line .lineMark-sep  { background: var(--rule); }
.is-line .lineMark-num  { color: var(--gold-lit); border-color: var(--rule); background: none; }
.is-line .lineMark-name { color: var(--gold-lit); }
.is-line .lineMark-ko   { color: var(--parch-dim); }
.is-line .lineMark:hover .lineMark-name,
.is-line .lineMark:hover .lineMark-ko  { color: #fff; }
.is-line .lineMark:hover .lineMark-num { border-color: var(--gold); background: rgba(201,162,39,.12); }
.is-line .lineMark-preview { color: var(--ink); background: var(--gold-lit); }
.is-line .lineMark::after { background: var(--gold-lit); color: var(--ink); box-shadow: 0 2px 10px rgba(0,0,0,.45); }

/* ── 좁아질 때 ────────────────────────────────────────────────────
 * 🔴 폭 예산이 빠듯하다. 260907 실측값이고 **KMLE 도 같은 예산**이다 —
 *      메뉴 5개 합 401px(고정) · 로고 105px · 로그인칸 200px
 *      이름표에 남는 폭 —  1024px 226 · 900px 97 · 800px 63 · **769px 33**
 *    "III Board" 는 98px, "III Resident" 는 약 130px 이라 769px 에서는 둘 다 안 들어간다.
 *    넘치면 메뉴 마지막 항목이 2줄로 접히고, 그러면 헤더가 65px → **130px** 이 되면서
 *    로고가 메뉴 아래로 내려간다(실제로 그렇게 났다).
 *    ⚠️ 이 기준을 내리려면 900px 에서 헤더 높이가 65px 인지 **재고** 내려라. */
@media (min-width: 769px) {
    /* 안 주면 로고 칸이 눌린다 — 메뉴 상자가 남는 폭을 다 가져가면서
     * 144px 필요한 칸이 87px 로 줄었고 이름표가 메뉴 글자 **위에 겹쳐** 그려졌다. */
    .navbar.myNavBar .navbar-header { flex: none; }
}
/* 🔴 기준이 1024 가 아니라 **1199** 인 이유 — 부트스트랩 `.container` 는
 *    1200px 미만에서 **970px 로 고정**이고 1200 부터 1170px 이 된다. 즉 창이 1024 든 1100 이든
 *    쓸 수 있는 폭은 똑같이 970px 다. 1024 에서만 부제를 버리면 1100 에서 다시 나타나
 *    **같은 970px 안에서 메뉴가 두 줄로 접힌다**(260910 실측 — 이름표 113 → 200px).
 * 🔑 접는 기준은 창 너비가 아니라 **container 가 바뀌는 지점**에 맞춘다. */
@media (max-width: 1199px) {
    .lineMark-ko  { display: none; }   /* 한글 부제부터 버린다 */
}
@media (min-width: 769px) and (max-width: 1023px) {
    /* 33px 밖에 없다. 로마 숫자 배지(24px) 말고는 아무것도 못 들어간다. */
    .lineMark-name { display: none; }
    .lineMark-sep  { display: none; }
    .lineMark      { padding-left: 0; gap: 0; }
    .lineMark-caret { margin-left: 5px; }   /* gap 이 0 이라 배지에 붙지 않게 */

    /* 🔴 260915 — ▾ 동그라미(27px)가 들어갈 자리를 만든다. 없으면 **KMLE 메뉴가 두 줄로 접힌다**
     *    (시안 안 1 실측 — KMLE 비로그인 800px 에서 남는 폭이 7.5px 뿐이었다).
     *    세 가지를 함께 건다. 하나라도 빼면 아래 경우가 다시 접힌다(260915 실측, 폭 769·800).
     *    ① 오른쪽 상자의 최소폭 200px(base.css)을 내용만큼으로 푼다 — 비로그인은 '로그인' 한 단어라 150px 가까이 빈다.
     *    ② KMLE 구독자의 'N일 남음' 을 이 폭에서만 숨긴다 — 이것이 오른쪽 상자 폭을 정한다. 날짜('…까지')는 남는다.
     *       라인 헤더는 line.css 가 폭과 상관없이 이미 숨긴다(같은 결정).
     *    ③ 아래 793~1023 블록 — 이름표와 메뉴 사이 30.4px 을 16px 로. */
    .navbar.myNavBar #userInfoInMobile { min-width: 0; }
    .navbar.myNavBar #userInfoInMobile .subscriptionInfo .greyColor { display: none; }
}
@media (min-width: 793px) and (max-width: 1023px) {
    .navbar.myNavBar .navButtons#navButtons { margin-left: 16px; }
}
/* 🔴 음수 여백을 여기서 되돌린다 — **992px 이하에서 배지가 로고를 파고들었다**(260910).
 *    위쪽 `.lineMark{margin-left:-18px}` 은 `.navbar-brand{padding-right:30px}` 을
 *    깎으려고 준 값인데, base.css:5557 의 `@media (max-width:992px)` 안에서
 *    그 패딩이 **0 이 된다.** 뺄 것이 없는데 18px 을 빼니 로고 위에 겹쳐 그려졌다.
 * ⚠️ `.navbar-brand` 의 패딩을 고쳐서 맞추면 안 된다 — KMLE 92개 화면이 함께 쓴다. */
@media (max-width: 992px) {
    .lineMark { margin-left: 0; }
}

/* ══ 좁은 폭 — **목업이 접는 값을 그대로 쓴다** ═══════════════════════════════
 * `docs/mockup/line-design-all-v1.html` 머리말 —
 *   "@container 로 썼지만 **실제 구현은 @media** 로 쓴다. 접히는 값은 그대로다 — 899 / 619 / 399."
 * 목업이 좁아질 때 버리는 순서도 거기 적혀 있다 —
 *   899  구분선을 지운다(.lh-sep), 메뉴는 서랍으로
 *   619  한글 부제를 지운다, 구독 기한을 서랍으로. **라인 이름(III Board)은 끝까지 남긴다**
 *   399  헤더를 52px 로, 라인 이름을 줄인다
 * ⚠️ 실제 사이트에는 서랍이 없다. 부트스트랩이 768 이하에서 메뉴를 **아랫줄**로 내리는데,
 *    목업의 서랍과 목적이 같아 그대로 둔다. 서랍을 새로 만들지 않는다. */

/* 🔴🔴 **768 이하에서 헤더가 창보다 넓어지고 있었다**(260910 실측 — 창 350, 문서 380).
 *    base.css:5630 의 `@media (max-width:768px)` 가 `.container` 를 **세로(column)** 로 바꾼다.
 *    그러면 위쪽 `.navButtons#navButtons{flex:1}` 이 **가로가 아니라 세로**에 걸리고,
 *    base.css:5086 의 `#navButtons{width:100%}` 가 살아나
 *    **폭 100% + 왼쪽 여백 30.4px = 창 + 30.4px** 이 된다. 가로 스크롤이 생긴다.
 * 🔑 좁은 폭에서는 메뉴가 아랫줄을 통째로 쓰므로 로고와의 간격(30.4px)이 애초에 필요 없다.
 * ⚠️ 위 규칙에서 `flex:1` 을 빼는 방향으로 고치지 마라 — 769 이상에서 메뉴가 안 늘어난다. */
@media (max-width: 768px) {
    .navbar.myNavBar .navButtons#navButtons { margin-left: 0; }
    /* base.css:5102 의 `min-width:200px` 은 넓은 화면 값이다. 좁은 폭에서 이 상자는
     * `position:absolute`(base.css:5696) 로 오른쪽 위에 붙는데, 200px 을 고집하면
     * 왼쪽으로 삐져나와 **이름표 위에 겹친다.** 내용만큼만 차지하게 둔다. */
    .navbar.myNavBar #userInfoInMobile { min-width: 0; }
}

/* 목업 899 — 구분선을 지운다. 기존 769~1023 규칙을 1023 이하 전체로 넓힌 것이다.
 * (900~1023 은 이미 지우고 있었고, 768 이하만 남아 있었다.) */
@media (max-width: 1023px) {
    .lineMark-sep { display: none; }
}

/* 목업 619 — 구독 기한을 서랍으로 보낸다. 우리는 서랍이 없지만
 * **프로필 드롭다운 안에 '구독' 항목이 이미 있어** 가는 길은 그대로 남는다.
 * ⚠️ 라인에만 건다. KMLE 는 이 상자가 `display:block` 이라 배지가 **둘째 줄로 내려가**
 *    이름표와 겹치지 않는다(350px 실측). 라인은 `display:flex` 라 한 줄에 몰려 겹친다.
 *    안 겹치는 것을 굳이 숨기면 KMLE 만 정보가 사라진다. */
@media (max-width: 619px) {
    /* ⚠️ 구독 배지를 감추는 규칙은 **line.css 로 옮겼다**(260910).
     *    여기 두었더니, 나중에 실리는 line.css 가 그 배지에 `display:inline-flex` 를 주면서
     *    **감춘 것이 도로 나타났다.** 특정도가 같아 나중 파일이 이긴다.
     *    같은 요소를 두 파일에서 만지지 않는다 — 배지 규칙은 line.css 한곳에 모았다. */
    /* 🔴 이름을 지우고 **아바타 원만** 남긴다. 목업의 우측은 원래 `.lh-me` 원 하나뿐이다.
     *    이것이 없으면 350px 에서 우측 덩어리가 178px 이나 돼
     *    이름표(`III BOARD`)를 **38px 파고든다**(실측). 종이 D 위에 얹혀 그려졌다.
     * 🔑 이름을 지워도 누구인지는 아바타로 알 수 있고, 눌러서 여는 메뉴는 그대로다.
     * ⚠️ 라인에만 건다 — KMLE 는 아래에서 따로 본다. */
    .navbar.myNavBar.is-line #userInfoInMobile .userNameBtn,
    .navbar.myNavBar.is-line #userInfoInMobile .user_dropdown .caret { display: none; }
    /* 🔴 구독 중 표시(체크 동그라미)는 **KMLE 까지 함께** 내린다.
     *    19px 짜리인데, 350px 에서 이것 하나 때문에 이름표를 파고들었다 —
     *    실측으로 `II RESIDENT` 가 19px, `I KMLE`(구독자)가 9px 겹쳤다.
     * 🔑 없앤다고 정보가 사라지지 않는다 —
     *      KMLE  `구독권: … 남음` 배지가 바로 아랫줄에 그대로 있다(이 상자가 block 이라 접힌다).
     *      라인   목업의 좁은 폭 우측은 원래 **아바타 하나뿐**이다(`.lh-sub` 를 서랍으로 보낸다).
     * ⚠️ 여기만 `.is-line` 을 빼는 것은 실수가 아니다. 겹침이 KMLE 에서도 났다.
     * ⚠️ **라인은 line.css 에서 폭에 상관없이 감춘다**(260910 대표님 지시 — 배지가 이미
     *    '구독 …까지' 라고 말하므로). 그래서 이 규칙이 실제로 일하는 것은 **KMLE 뿐**이다. */
    .navbar.myNavBar #userInfoInMobile .xi-check-circle { display: none; }
}

/* 목업 399 — 제일 좁은 구간. 라인 이름은 **끝까지 남기되 줄인다**(목업 `.lh-name{font-size:.9rem}`).
 * ⚠️ 이름을 지우지 마라. 목업 주석에 "라인 이름(III Board)은 끝까지 남긴다" 고 적혀 있다.
 *    로고는 base.css:198 의 `@media (max-width:480px)` 가 이미 90px 로 줄인다 — 거기 맡긴다. */
@media (max-width: 399px) {
    .lineMark-name { font-size: 14.4px; letter-spacing: .06em; }
    .lineMark      { gap: 5px; }
}

/* 🔴 375 이하에서는 **라인 이름을 빼고 로마숫자만 남긴다**(260910 대표님 지시 —
 *    "375px 이하에서는 RESIDENT, BOARD 그 부분 빼고 II, III 이것만 두는 걸로 해야 할 듯하다.
 *     공간이 부족하다").
 * ⚠️ 목업 주석에는 "라인 이름(III Board)은 끝까지 남긴다" 고 적혀 있다.
 *    **일부러 목업과 다르게 가는 것이다.** 실제 헤더에는 목업에 없는 것들이 더 있어서
 *    (구독 배지 · 알림 종 · 프로필) 375px 에서는 이름까지 넣을 자리가 없다.
 *    목업과 달라 보인다고 되돌리지 마라.
 * 🔑 769~1199 에서 이미 같은 이유로 이름을 숨기고 있다. 그 아래 끝에서 한 번 더 숨기는 것이다.
 *
 * 🔴 260914 — **처음엔 `.is-line` 만(전공의·전문의) 걸었다.** "KMLE 는 이름이 짧고
 *    우측 구성도 달라서 그대로 둔다" 고 판단했었는데, 실제 350px 화면(구독자, 스크린샷
 *    2026-09-14 오후 1.44.20)에서 `KMLE` 글자가 알림 종에 바짝 붙어 겹칠 뻔했다.
 *    우측을 밀어붙이는 것(구독 배지·알림 종·프로필)은 KMLE 도 라인과 똑같이 달고
 *    있어서 "이름이 짧으니 괜찮다" 는 가정이 틀렸다. `.is-line` 을 떼어 KMLE 도
 *    같은 기준(375px)으로 맞춘다.
 *
 * 🔴 260915 — **KMLE 는 420px 까지** 숨긴다(대표님 지시). ▾ 동그라미가 `KMLE` 오른쪽에 붙으면서
 *    420 이하에서 오른쪽 둘째 줄 '구독권: 2027-08-10까지' 가 동그라미 밑까지 파고들었다.
 *    ⚠️ 내 폭 측정은 이름표와 **같은 높이**에 있는 것만 겹침으로 셌는데, 구독권 줄은 이름표보다 아래에서
 *       시작해 그 셈에서 빠졌다. 그래서 "20px 떨어져 있다" 고 잘못 봤다. 둘째 줄까지 보고 판단해야 한다.
 *    ⚠️ KMLE 오른쪽(프로필·종·구독권)은 아직 라인처럼 정리되지 않았다. 그쪽을 고치면 이 기준을 다시 잰다.
 *    라인은 아래 440px 규칙이 먼저 덮는다. */
@media (max-width: 420px) {
    .navbar.myNavBar .lineMark-name { display: none; }
}
/* 🔴 260915 — **라인 헤더는 440px 까지** 이름을 숨긴다(▾ 동그라미가 이름 오른쪽에 붙으면서).
 *    실측 — 전공의 일반회원 400px 에서 동그라미가 '구독하기' 배지를 24px 파고들었다(414px 10px, 전문의 400px 0.3px).
 *    430 으로 두었을 때 431px 전공의가 7px 로 빠듯해 440 으로 올렸다(441px 부터는 16px 이상).
 *    라인 오른쪽 덩어리는 구독 배지·테두리 있는 알림 종이 한 줄에 서서 KMLE 보다 넓다.
 *    ⚠️ KMLE 는 위 420px 규칙을 따른다. */
@media (max-width: 440px) {
    .navbar.myNavBar.is-line .lineMark-name { display: none; }
}