/*  🏛 **바이오링크 모바일 — 머리 정본** (2026-09-21 · 형님 확정)
 *
 *  형님: *"모바일 웹 화면마다 다르게 모바일 웹 화면을 만드는거에요?
 *         **동일하게 하지 않고?**"* ·
 *        *"그렇게 해요. 어차피 앞으로 **모바일 화면이 정해지면** 좋을테니까"* ·
 *        *"**기준은 왕국탭의 로고와 제품명**이에요"*
 *
 *  ## ⛔ 왜 이 파일이 생겼나
 *
 *  다섯 화면(`biolinc_app*.html`)이 **저마다 제 `<style>` 안에** 같은 규칙을
 *  따로 적고 있었다. 실측:
 *
 *      홈      `.top`(12/16/4) · `.brandrow` **CSS 없음** · `span.brand`
 *      기록    `.top`(0/18/0)  · `.brandrow`
 *      비추기  `.top`(9/16/7)  · **`.logo`** (이름부터 다름)
 *      왕국    `.topbar`(12/18/4) · `.brand`   ← ⭐ 형님이 고르신 기준
 *      설정    왕국과 같음
 *
 *  🛑 그래서 한 곳을 고치면 다른 곳이 어긋났다. 2026-09-21 에 내가 **세 번**
 *     헛돌았다(구조 고치기 → flex-wrap → 음수 마진). 근본은 **사본이 다섯**인 것.
 *
 *      이전안  화면마다 제 머리 CSS 를 따로 적는다
 *      변경안  **이 파일 하나**를 다섯이 같이 링크한다
 *      사유    ⭐ 형님이 정하신 「왕국 기준」을 **한 번만** 적는다.
 *              ⛔ 다섯 벌이면 다음에 또 벌어진다 — 오늘 실제로 그랬다.
 *
 *  ## ⚠️ 왕국 것을 그대로 옮기지 **않은** 한 가지
 *
 *      왕국   `margin:-16px -16px 0`  ← 부모 `.scroll{padding:16px}` 을 상쇄하려는 것
 *
 *  🛑 그 짝이 **화면마다 다르다**(홈·기록은 계산값 0, 비추기는 `.scroll` 자체가 없다).
 *     ⛔ 음수 마진은 **짝이 되는 패딩이 있을 때만** 뜻이 있다 — 없으면 화면 밖으로 나간다
 *        (실측: 로고 x=2 vs 왕국 x=18).
 *  ⭐ 그래서 **부모에 기대지 않는다**: 음수 마진을 쓰지 않고, 머리가 스스로
 *     화면 폭을 쓰게 한다. 결과는 왕국과 **같은 모양**이다.
 *
 *  ## 🛑 고칠 때
 *
 *  ⛔ 화면 HTML 안에서 `.topbar`·`.brand`·`.right`·`.ic` 를 **다시 적지 마라.**
 *     적는 순간 사본이 둘이 되고, 그게 오늘의 병이다.
 *  ✅ 검사: `node tests/header_canon_selftest.mjs`
 */

/*  머리 — ⭐ 화면 맨 위에 붙어 따라온다 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  /*  [!] 형님 — 「헤더 안의 모든 것을 **조금 더 위로**」
      [!!] 테두리(높이)는 **건드리지 않는다**(형님 지시) —
         그래서 padding 이 아니라 **세로 정렬**을 바꾼다.
      이전안  center — 남는 자리의 **가운데**에 선다
      변경안  flex-start — 위에 붙는다. 높이는 그대로. */
  align-items: center;   /* [!!] HDRALIGN-2026-09-21 되돌림 - 이전안 flex-start(위에 붙임) / 변경안 center(가운데). 사유 형님 - 판 번호를 붙여 새 정본이 처음 폰에 닿자 「갑자기 위로 올라갔다」. 형님이 좋다 보시던 것은 **가운데**였다. */
  /*  ⛔ 음수 마진을 쓰지 않는다(위 §주의). 대신 화면 폭을 스스로 쓴다 */
  margin: 0;
  /*  [!!] HDR-RAISE-2026-09-21 — **안의 것을 위로** (형님 「3/5 정도로」)
      이전안  12px 18px 4px — 위 12 · 아래 4 → 내용이 아래쪽에 쏠렸다
      변경안  8px 18px 14px — 위 8 · 아래 14
      사유    위:아래 ≒ 2:3.5 → 내용이 아래에서 **3/5** 자리에 선다. */
  /*  [!] 형님 「3/5」에 더 붙인다 — 실측 0.54 -> 목표 0.60
      위:아래 = 5:19 → 내용 중심이 아래에서 약 0.60 */
  /*  [!] 형님 「위쪽으로 조금 더」 — 5/19 -> 2/24
      내용 중심이 아래에서 0.60 -> 약 0.68 로 올라간다 */
  /*  [!!] 형님 — 부제(「교감이 시작돼요」)가 **테두리에 너무 가깝다**.
      이전안  2px 18px 24px — 위를 줄였더니 글이 위로 붙었다
      변경안  4px 18px 16px — 아래 여백을 **늘려** 글과 테두리를 벌린다
      사유    [x] 내용을 올리는 것과 **글이 테두리에 닿는 것**은 다른 축이다.
             내용은 padding 비율로, 여유는 **아래 여백**으로 준다. */
  /*  [!] 형님 — 「0.59 라면 **0.7 까지** 올려봐요」
      이전안  4px 18px 16px -> 아래에서 0.59
      변경안  0px 18px 24px -> 아래에서 약 0.70
      [x] 위를 0 으로 해도 부제~테두리는 **24px** 이라
         「테두리에 가깝다」 문제는 안 난다(종전 16px 보다 넓다). */
  /*  [!] 형님 — 「**조금 더 위로**」 (0.67 -> 약 0.75)
      이전안  0 18px 24px
      변경안  0 18px 34px — 아래 여백을 늘려 **묶음 전체를 위로** 민다
      [!] 로고·제품명·부제·아이콘이 **같이** 올라간다(한 줄 묶음이다).
         [x] 부제만 따로 올리는 것이 아니다. */
  /*  [!] 형님 — 부제(「비추면, 교감이 시작돼요」)와 **아래 테두리를 더 벌린다**
      이전안  0 18px 34px
      변경안  0 18px 42px
      [*] 내용은 그대로 위(0.7대)에 있고 **아래 숨 쉴 자리**만 넓힌다. */
  /*  [!] HDRPAD-2026-09-21 — 형님 「헤더」(아래 빈 자리가 크다)
      이전안  42px / 변경안 **20px** — 한 걸음만.
      사유    형님이 보시고 더 갈지 정하신다. */
  /*  [!!] CENTERISH-2026-09-21 - 형님 「중앙의 **약간 위**」(10번째)
      실측  머리66 · 머리중심 33 · **로고중심 17** -> 16px 이나 위였다
      까닭  위 0 / 아래 20 이라 내용이 위로 쏠렸다.
           align-items:center 는 **패딩 상자** 안 가운데다.
      이전안  padding: 0 18px 20px   -> 로고중심 17
      변경안  padding: 6px 18px 14px -> 로고중심 **29**
      사유  [*] 위+아래 합이 20 그대로라 **높이는 안 변한다**.
           중앙 33 보다 4px 위 = 형님 「약간 위」. */
  padding: 6px 18px 14px;
  background: linear-gradient(180deg, #1d3b27, #27432e);
  border-radius: 0 0 22px 22px;
}

/*  로고 + 제품명 + 부제 — ⭐ 세로로 쌓되 왼쪽 맞춤 */
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  font-family: 'Gowun Batang', serif;
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: .01em;
  color: #f4efe2;
}

/*  로고와 제품명은 **한 줄** */
.brand-row { display: flex; align-items: center; gap: 6px; }

/*  부제(「비추면, 교감이 시작돼요」) */
.brand-sub { line-height: 1.1; }

/*  ⚠️ 홈·기록에 있던 겹 한 벌 — 남아 있어도 **한 줄로** 펴 둔다.
 *     ⛔ 지우려면 HTML 을 건드려야 해서 그건 따로 한다. */
.brandrow { display: flex; align-items: center; width: 100%; }

/*  오른쪽 아이콘 묶음 — ⭐ `margin-left:auto` 가 끝으로 민다 */
.right { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/*  아이콘 하나 — 🔍 검색 · 📚 지식센터 · 👤 내 프로필 */
.ic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  display: grid;
  place-items: center;
  font-size: 1rem;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  color: inherit;
}

/*  알림 점 — ⚠️ 지금은 쓰는 화면이 없다. 되살릴 때를 위해 남긴다 */
/*  [!!] DOTSCOPE-2026-09-21 — **정본이 남의 이름을 덮쳤다**
    기록 화면의 `.dot` 은 **여정 단계 번호**다. 정본의 알림 점이
    그걸 덮쳐 **화면 오른쪽 최상단으로 튕겨냈다**(형님 지적).
    이전안  `.dot { position:absolute … }` — 화면 아무 데나 닿는다
    변경안  `.ic .dot` — **아이콘 안에서만**
    사유    정본은 머리 안을 다스린다. 이름이 같다고 남의 화면에
           닿으면 안 된다 — 범위를 좁히는 것이 정본의 의무다.
    [x] 이 규칙은 「쓰는 화면이 없다」고 적어 둔 것이었다.
       **안 쓰는 규칙이 쓰는 화면을 깨뜨렸다.** */
.ic .dot {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clay, #c8a15a);
}

/*  [!!] HDR-GAP-2026-09-21 — **머리 아래 첫 글까지 7px** (형님 지시)
    형님: "테두리 아래 글은 **왕국의 내 아이들과 같은 간격**으로 모든 탭에"
    이전안  왕국만 7px(그 화면 h1 의 margin) · 나머지 넷은 0
    변경안  정본이 `.topbar + *` 에 7px 을 준다
    사유    [!] 각 화면 첫 요소에 주면 **또 다섯 벌**이 된다.
           [*] 머리 바로 뒤에 주면 **무엇이 오든** 같은 간격이다. */
.topbar + * { margin-top: 7px; }

/*  [!!] LEAD-2026-09-21 - **화면 머리말을 왕국 기준으로** (형님 지시)

    실측   탭     머리~첫글자   좌 여백    첫 글자
           왕국     7px        **16px**   22.4px   <- 기준
           홈       4px        **0**      15.2px   [x]
           기록     7px        **0**      **32px** [x]

    이전안  위 간격 7px 만 줬다 - 좌우는 손대지 않았다
    변경안  머리 묶음 안에 남은 본문에 **좌우 16px** · h1 을 1.4rem
    사유    [*] 왕국에는 `.hdrwrap` 이 **없다**(머리가 .scroll 직계).
              그래서 이 규칙은 **왕국에 닿지 않는다** - 기준을 안 건드린다.
           [x] 화면마다 주면 또 다섯 벌이 된다 - 정본 한 곳에 둔다. */
/*  [!!] SIDE16-2026-09-21 - **좌우가 두 겹이었다**(형님 「조금 더 줄여」)
    실측  홈·기록 **32px** · 왕국·설정 16px
    이전안  여기서 16px 을 더 줬다 - 스크롤 칸이 이미 16px 을 준다
    변경안  **0** - 스크롤 칸의 16px 만 쓴다
    사유    16px 은 모바일 앱의 흔한 좌우 여백이다(당근 등).
           [x] 겹치면 32px 이 되어 화면이 좁아 보인다. */
.hdrwrap > :not(.topbar) {
  margin-left: 16px;
  margin-right: 16px;
}

/*  머리말 제목 - 왕국의 「내 아이들의 왕국」과 **같은 크기**
    이전안  기록 32px(2rem) - 왕국보다 10px 크다
    변경안  1.4rem(=22.4px)
    사유    형님 - 「왕국과 거의 맞는 것 같은데 글자 크기가 너무 크고」 */
/*  [!!] H1SCALE-2026-09-23 — 큰 제목을 **20.8px** 로 (형님 「5개 탭 … 벼리가 수정해요」)
 *     이전안  1.4rem(22.4) — 2026-09-21 에 형님과 머리를 맞추며 정한 값
 *     변경안  1.3rem(20.8) — 다른 탭의 큰 제목과 **같은 층**
 *     사유    ⭐ 다섯 탭 글자를 여덟 층으로 모으는 중이다.
 *            ⛔ 형님이 되돌리라 하시면 **이 줄만** 1.4rem 으로 돌린다. */
.hdrwrap > h1 {
  font-size: 1.3rem;
}

/*  [!!] HDRWIDE-2026-09-21 — **홈·기록만 머리가 32px 좁았다** (형님 지적)

    실측(360px)  홈 **328** · 기록 **328** · 비추기 360 · **왕국 360** · 설정 360

    까닭   홈·기록의 `.scroll` 이 **좌우 16px 패딩**을 갖는다.
           머리가 그 안에 있어 360-32 = 328 이 된다.
           왕국·설정은 `.scroll{padding:0 0 70px}` 이라 머리가 온폭이다.

    이전안  화면마다 따로 손봤다 → **되돌아왔다**(형님 「아까 했던 건데 또」)
    변경안  정본에 한 줄 — 머리에 좌우 -16px
    사유    [*] `.scroll` 의 16px 을 정확히 상쇄한다. 머리만 온폭이 되고
              본문은 그대로다 — 본문까지 건드리면 또 튄다.
           [!] 이 값은 `.scroll{padding:… 16px …}` 과 **짝**이다.
              한쪽을 고치면 **둘 다** 고친다.
           [x] 왕국·설정·비추기에는 `.hdrwrap` 이 **없어** 닿지 않는다 —
              기준을 건드리지 않는다. */
.hdrwrap > .topbar {
  /*  [x] SIDE-STRUCT-2026-09-21 음수 마진 걷어냄 — 스크롤 칸의
      좌우 패딩을 0 으로 바꿔 **상쇄할 것이 없다**. */
  margin-left: 0;
  margin-right: 0;
  /*  [!!] 음수 마진만으로는 **안 늘어난다** — 이 머리는 클래스가
       이고  가 부모(328)의
      100% 로 폭을 **박는다**. auto 로 풀어야 360 을 채운다.
      [x] 실측으로 잡았다 — ml=-16px 인데 w=328 그대로였다. */
  width: auto;
  /*  [!!] TOPFLUSH-2026-09-21 - 형님 「헤더가 모바일 웹 페이지
      **상단에 닿게**」. 홈·기록은 머리가 .scroll 안에 있고
      그 칸이 위쪽 16px 패딩을 갖는다 -> 머리 위에 **틈**이 생겼다.
      실측  홈·기록 위틈 16px · 비추기/왕국/설정 **0**
      [!] 좌우 -16px 과 **같은 짝**이다. .scroll 패딩을 고치면
         여기 셋(위·좌·우)을 **같이** 고친다. */
}

/*  [!!] HDRWRAP-TOP-2026-09-21 - 형님 「헤더가 상단에 **닿게**」
    이전안  
            [x] **안 먹었다** - 머리는 position:sticky 라 음수 마진이
               제 자리를 안 옮긴다(실측: 위틈 16px 그대로).
    변경안  **묶음 자체**를 올린다 - 
    사유    묶음은 보통 블록이라 마진이 그대로 듣는다.
           [!]  과 **짝**이다 - 한쪽을 고치면
              둘 다 고친다. */
/*  [x] 걷어냄(FLUSH-2026-09-21) — 묶음만 올라가고 **머리는 그대로**였다.
    까닭은 sticky 의 기준이 스크롤 칸의 **패딩 상자**이기 때문. */

/*  [!!] SIDE-STRUCT-2026-09-21 — **본문 좌우는 16px 한 겹** (형님 「조금 더 줄여」)

    실측 전  홈·기록 카드 **32px** · 왕국·설정 16px
    까닭     홈·기록은 스크롤 칸이 16px 을 주는데 카드도 제 마진 16px 을
             가져 **두 겹**이 됐다.
    변경안   스크롤 칸 좌우 **0** + 자식에 16px — 왕국과 **같은 구조**
    사유     [*] 16px 은 모바일 앱의 흔한 좌우 여백이다(당근 등).
            [x] 상쇄로 맞추면 겹이 남아 다음 사람이 또 헷갈린다. */
/*  [x] SIDE-STRUCT 규칙 삭제(2026-09-21) — 중간 칸이 있으면
    **손자에게 또 걸려** 32px 이 됐다. 카드들은 이미
    제 마진을 갖고 있다 — 정본이 끼어들 자리가 아니다. */

/*  [!!] STICKY-2026-09-21 — **머리가 스크롤과 함께 사라졌다**(형님 지적)

    실측  홈 **-842px** · 기록 -794px · 왕국·설정은 **0**(붙어 있다)

    까닭  `position:sticky` 는 **부모 영역을 못 벗어난다.**
          홈·기록만 머리가 `.hdrwrap` 묶음 안에 있어 묶음이 나가면 같이 나간다.

    이전안  `.hdrwrap` 이 레이아웃 상자를 만든다
    변경안  `display: contents` — 묶음이 **레이아웃에서 사라진다**
    사유    [*] 자식이 `.scroll` 직계처럼 배치되어 sticky 기준이 `.scroll` 이 된다.
           [*] 선택자는 DOM 기준이라 `.hdrwrap > …` 규칙은 **그대로** 먹는다.
           [x] HTML 구조를 옮기지 않는다 — 오늘 그 위험을 이미 겪었다. */
.hdrwrap {
  display: contents;
}