/* shell.css — 배치C 껍데기 (2026-09-13 신설)
 *
 * 무엇인가
 *   화면 70개가 공통으로 입는 «옷» 을 배치C 로 바꾼 것이다.
 *   정본(원판) = D:\Agenda_새대시보드\시안\배치C_하우스뷰.html (사용자님 2026-09-12 결정)
 *   조사 = 대시보드디자인/35_배치C_틀교체_조사_20260913.md
 *
 * 무엇을 만드나 — 일곱 조각
 *   ① 띠1  검정 · 로고 · 검색칸 · 밀도 3단 · 명암 · 프로필
 *   ② 띠2  검정 · 화면 26개 (묶음 5개)
 *   ③ 띠3  연회색 · 서브탭 42개 (묶음칩으로 가름)
 *   ④ 판   사이드바 없는 전폭 한 칸 · 폭은 34번 문서의 인베스팅닷컴 사다리
 *   ⑤ 레일 자리 (화면이 채운다 · 여기서는 자리만)
 *   ⑥ 본문 자리 (구역 사이에 선을 긋지 않는다 · 여백 56 만)
 *   ⑦ 발   흰 발 + 검정 발
 *
 * ★ 지킨 것 넷
 *   1. **base.css 를 한 줄도 안 고친다.** 이 파일만 지우면 그대로 되돌아간다.
 *   2. **층 안에만 쓴다.** tokens.css:6 이 선언한 @layer reset, tokens, base, components, utilities
 *      를 따른다. 층 밖 규칙은 모든 층을 이기므로 만들지 않는다.
 *   3. **쌓임 순서를 지어내지 않는다.** tokens.css 의 --z-header/--z-side/--z-scrim 을 그대로 쓴다
 *      (박물관 #230 — z 를 지어내 표가 붙박이 머리를 타고 올라갔다).
 *   4. **이름이 안 겹친다.** 도안은 한글 클래스, base.css 는 영문이라 겹침 0개(실측).
 *      그래서 이 파일의 규칙이 화면 70개의 내용 CSS 를 건드릴 길이 없다.
 *
 * ★ 폭 — 34번 문서의 인베스팅닷컴 실측 사다리
 *      ~1439      창폭 그대로
 *      1440~1791  1440
 *      1792~2047  창폭 − 320
 *      2048~      창폭 − 600
 *   도안은 max-width: 1520 하나였는데, 그 값은 「글칸 1520」을 「상자 1520」으로 잘못 옮긴 것이다.
 *   사용자님이 사진에 빨간 줄을 그어 「인베스팅닷컴보다 넓다」고 하신 근거가 이 사다리다.
 */

@layer tokens {
  :root {
    /* 배치C 껍데기 전용 — 도안 <style> 의 실측 hex 그대로.
       agenda 토큰과 섞지 않으려고 이름을 --껍데기- 로 뗀다. */
    /* 2026-10-04 사용자님 «아젠다 검정은 칙칙하다 · 시킹알파는 광이 나는 검정» → 시킹알파 black-98(#04080B)
       — 옛 #181c21 은 흰 글자 대비 17.1:1(밝기 약 11%) 로 «숯빛 회색» 으로 읽혔다. 지금 20.1:1. */
    --껍데기-머리바탕: #04080b;
    --껍데기-머리글자: #ffffff;
    --껍데기-머리흐림: #9aa3ad;   /* 검정 위 보조 글자 — #04080b 대비 7.9:1 (옛 #181c21 6.6:1) */
    --껍데기-로고주황: #ff6b00;
    --껍데기-검색바탕: #ffffff;
    --껍데기-검색글자: #232526;

    /* 띠3 — 도안 실측색 그대로. 2026-09-13 에 어두운 판을 버렸으므로 토큰에 맡길 이유가
       없어졌다(전에는 명암 전환 때 이 띠만 하얗게 남는 것을 막으려고 토큰을 썼다). */
    /* 2026-10-04 사용자님 «세 번째 띠를 시킹알파 노랑으로 · 그 안 글자는 Claim Offer 처럼 검정으로 · 아젠다의 모든 띠3».
       시킹알파 --yellow-100(#fec20f · Claim Offer 단추 실측 같은 값) · 글자 #000 대비 12.9:1. 옛 연회색 #f1f2f3. */
    --껍데기-띠3바탕: #fec20f;
    --껍데기-띠3테: #e0a800;     /* 노랑보다 한 단 짙은 경계(옛 #d9dcdf) */
    --껍데기-띠3글자: #000000;

    /* 판 — 사다리. 아래 미디어쿼리가 이 둘만 바꾼다. */
    --껍데기-판최대: 1440px;
    --껍데기-판여백: auto;
    --껍데기-머리안여백: 32px;   /* 규칙 5 — 머리가 본문보다 8px 넓다 */
    --껍데기-본문여백: 40px;
    --껍데기-구역사이: 56px;
    /* 띠3 두께 — 1440 실측 38px (위아래 테 1 + 안쪽 4 + 링크 28). 본문 위 틈도 이 값을 쓴다(2026-09-13 사용자님). */
    --껍데기-띠3두께: 38px;
    /* ★ 고정 틀(2026-10-06 사용자님 «아젠다 전체 화면의 상단 띠와 그 폭 · 그 간격을 일괄 통일 · 좁은 화면도 같이»).
       위에서부터 검은 머리 → 노란 띠 → 군청 띠 0.3cm → 아이보리 바탕 0.3cm → 본문. 모든 화면 · 모든 폭이 같다.
       (옛: 넓은 화면만 군청 76px · 좁은 화면은 군청 없음 · 본문 위 틈 38px · 하위탭 없는 화면은 노란 띠 없음 → 화면마다 본문이 27~64px 달랐다) */
    --껍데기-군청띠: #3f485c;            /* 10-05 사용자님 시안 2 실측색 */
    --껍데기-군청띠두께: var(--sp-3);    /* 0.3cm = 12px */
    --껍데기-본문위틈: var(--sp-3);      /* 0.3cm = 12px — 군청 띠 아래 아이보리 바탕 */
    --껍데기-띠3높이: 25px;              /* 노란 띠 안쪽 줄(테 위아래 1px 은 따로) — 링크 한 줄. 하위탭이 없어도 이 높이 */
    /* 사이드바(2026-10-05) — 폭 220(사용자님) · 접으면 48(시킹알파 접은 폭) · 바탕 = 시킹알파 왼쪽 메뉴 #000 */
    --껍데기-사이드폭: 220px;
    --껍데기-사이드바탕: #000000;
    --껍데기-사이드선: #2e2e2e;
    /* 페이지 바탕 = 아이보리(2026-10-05 사용자님 «띠가 아니라 바탕화면 색으로» · 시킹알파 body-bg #F5F2F1 · 카드는 흰색).
       ★ --surface-0 토큰은 바꾸지 않는다 — 입력칸·표 등 «흰 면» 이 같은 토큰을 쓴다. 페이지 바탕(body)에만 칠한다. */
    --껍데기-아이보리: #f5f2f1;
  }

  /* 좁아지면 여백을 «토큰에서» 줄인다. padding 을 직접 덮어쓰지 않는 까닭은
     .판 안에서 --gutter 가 이 토큰을 따라가야 하기 때문이다(아래 .판 주석 참조). */
  @media (width <= 1023px) {
    :root { --껍데기-머리안여백: 16px; --껍데기-본문여백: 16px; }
  }
  @media (width <= 639px) {
    :root { --껍데기-머리안여백: 12px; --껍데기-본문여백: 12px; --껍데기-구역사이: 40px; }
  }
}

@layer base {
  /* ══ 판 — 사이드바가 사라진 전폭 한 칸 ══════════════════════════════════
     옛 껍데기는 .app-main { margin-left: 240px } 였다. 그 240 이 없어져
     1280·1440 에서 글칸이 208px 넓어진다(실측). 표가 가장 큰 블록이라 그대로 이득이다. */
  .판 {
    max-width: var(--껍데기-판최대);
    margin-inline: var(--껍데기-판여백);
    padding-inline: var(--껍데기-본문여백);

    /* ★ 판 «안» 에서 --gutter 를 이 여백으로 다시 맞춘다 (2026-09-13 실측으로 잡았다).
       화면들은 「가장자리까지 넓히기」를 `margin-inline: calc(-1 * var(--gutter))` 로 한다
       (shared/_glance.html:31). --gutter 는 24/14 인데 새 판 여백은 40/16/12 라,
       그대로 두면 360px 에서 한눈 표가 2px 삐져나왔다(실측).
       여기서 한 줄로 맞추면 그 관례가 화면을 안 고치고도 정확히 맞는다. */
    --gutter: var(--껍데기-본문여백);
  }
  .머리안 {
    max-width: var(--껍데기-판최대);
    margin-inline: var(--껍데기-판여백);
    padding-inline: var(--껍데기-머리안여백);
  }

  /* 사다리 — 창폭에 따라 «상자» 가 달라진다 */
  @media (width <= 1439px) {
    .판, .머리안 { max-width: none; }
  }
  @media (width >= 1792px) {
    .판, .머리안 { max-width: none; margin-inline: 160px; }   /* 창폭 − 320 */
  }
  @media (width >= 2048px) {
    .판, .머리안 { margin-inline: 300px; }                     /* 창폭 − 600 */
  }

  /* 본문 — 구역 사이에 «선을 긋지 않는다». 여백뿐(도안 규칙 1). */
  .본문 { min-width: 0; display: flex; flex-direction: column; gap: var(--껍데기-구역사이); }
  /* ★ 2026-09-13 사용자님 — 본문은 머리에서 «세 번째 띠 두께» 만큼 떨어져 시작한다.
     세 번째 띠가 없는 화면(하위탭 없음)이면 두 번째 띠에서 같은 두께만큼 떨어진다 — 머리 끝에서 재므로 저절로 그렇다.
     틈을 판 «안» 의 위 여백으로 두는 까닭 — 스크롤하면 내용과 함께 올라가 붙박이 머리(띠) 밑으로 흘러 들어간다.
     ★ .본문 이 아니라 .판 에 준다 — 넥서스는 상단 띠(.te-band · 레일)가 본문 «옆» 형제로 판 맨 위에 와서,
       본문에 주면 레일은 머리에 붙은 채 틈이 레일 아래로 갔다(1440 실측: 머리 끝 162 · 레일 162 · 본문 735).
     폰도 같은 두께다(규칙 하나). */
  .판 { padding-block-start: var(--껍데기-본문위틈); }
  /* ★ 2026-09-13 폰 수리 — 폰에서는 «구역 사이 틈» 을 걷고 보통 흐름(block)으로 되돌린다.
     까닭(402 실측) — 옛 화면들은 구역 상자 없이 제목·설명·표를 본문에 «바로» 늘어놓는다. 그래서 틈 40px 이
     요소마다 끼고, flex 안에서는 여백이 겹쳐 줄지도 않아 블록 사이가 48~92px 로 벌어졌다
     (발굴 메인: 검수종목→성적 62 · 성적→숫자 74 · 숫자→요약 80 · 요약→제목 92).
     보통 흐름에서는 옛 화면이 설계된 대로 위아래 여백이 겹쳐 하나로 준다. 넓은 화면은 그대로 둔다. */
  @media (width <= 639px) {
    .본문 { display: block; }
  }
}

@layer components {
  /* ══ ① 띠1 — 로고 · 검색 · 도구 ═══════════════════════════════════════ */
  .머리 {
    position: sticky; top: 0; z-index: var(--z-header);
    background: var(--껍데기-머리바탕); color: var(--껍데기-머리글자);
    font-family: var(--font-head);   /* 10-04 · 힌팅 있는 맑은 고딕 — tokens.css --font-head */
  }
  .띠1 { display: flex; align-items: center; gap: var(--sp-4); height: 42px; }

  .로고 {
    font: var(--fw-bold) var(--fs-22)/1 inherit;
    letter-spacing: -0.5px; white-space: nowrap;
  }
  .로고 a { color: inherit; text-decoration: none; }
  .로고 i { color: var(--껍데기-로고주황); font-style: normal; }  /* 강조는 점 하나만 */

  /* 검색칸 — 인베스팅닷컴 실측(34번 문서 · 5폭에서 0px 차이로 맞춘 값)
       폭 1280→621 · 1440→717 · 1536→813 · 1600·1920→877
     위 여백 사다리 md:mx-8(32) · md2:mx-12(48) · lg:mx-20(80) 과 함께 쓴다.
     상한이 없으면 1440 에서 1,050px 까지 늘어나 저쪽보다 훨씬 넓어진다(실측). */
  .검색 { flex: 1; min-width: 0; margin-inline: var(--sp-8); max-width: 877px; }
  /* ★ 사다리는 «데스크톱» 값이다. 좁은 폭에 걸면 calc 가 음수가 되어 검색칸이
     실오라기처럼 찌그러진다(402px 에서 실측). 그래서 1024 아래에는 상한을 두지 않는다. */
  @media (width >= 1024px) and (width <= 1439px) { .검색 { max-width: calc(100vw - 659px); } }
  @media (width >= 1440px) and (width <= 1791px) { .검색 { max-width: calc(100vw - 723px); } }
  /* 상한을 두면 오른쪽에 틈이 생긴다 — 도구를 오른쪽 끝으로 민다(.머리도구 margin-left:auto) */
  .검색 input {
    width: 100%; border: 0; border-radius: var(--radius-sm);
    padding: 0 10px; background: var(--껍데기-검색바탕); color: var(--껍데기-검색글자);
    /* ★ 16px 미만이면 iOS 가 화면을 확대한다 — 05B §3-2. 도안의 14 를 쓰지 않는다. */
    font-size: var(--fs-16); min-height: 24px;
  }
  @media (width <= 1023px) { .검색 input { min-height: 38px; } }

  /* ══ 종목 찾기 후보 목록 (2026-09-18 사용자님 지시) ══════════════════════
     ★ 왜 .검색 에 층을 주나 — 머리 안에서 띠2·띠3 이 띠1 «뒤에» 그려진다. 그냥 두면
       입력칸 아래로 떨어진 목록이 그 띠들의 바탕에 덮인다. 머리(--z-header)가 이미
       한 층을 만들고 있으므로 **그 안에서 1 이면 충분하다** — 페이지 층 번호를 새로
       지어내지 않는다(05B 「z 순서 지어내지 않기」).
     ★ 목록은 검은 띠가 아니라 흰 본문 위로 떨어지므로 본문 색을 쓴다.
       모양은 집에 이미 있는 「더보기」 목록과 같게 맞췄다(base.css .subnav-more .more-panel). */
  .검색 { position: relative; z-index: 1; }
  .검색후보 {
    position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 1;
    margin: 0; padding: var(--sp-1); list-style: none;
    max-height: 60vh; overflow-y: auto;
    background: var(--surface-1);
    border: 1px solid var(--border-default); border-radius: var(--radius);
    box-shadow: var(--shadow-float);
  }
  .검색후보 li {
    display: flex; align-items: center; gap: var(--sp-2);
    /* 44px = 손가락 표적(05B 접근성). */
    min-height: 44px; padding: 0 var(--sp-2);
    border-radius: var(--radius-sm); cursor: pointer;
    color: var(--ink-1); font-size: var(--fs-14);
  }
  .검색후보 li[aria-selected="true"] { background: var(--accent-bg); color: var(--accent-c); }
  /* 이름은 «한 줄» 로 둔다 — 폰(402px)에서 목록이 173px 로 좁아지자 「삼양컴/텍」처럼
     낱말 가운데가 잘려 두 줄이 됐다(2026-09-18 실측). 넘치면 말줄임표로 끊는다. */
  .검색후보 .이름 {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .검색후보 .코드 {
    margin-left: auto; font-family: var(--font-mono);
    font-size: var(--fs-13); color: var(--ink-2); font-variant-numeric: tabular-nums;
  }
  .검색후보 .장 { font-size: var(--fs-11); color: var(--ink-2); white-space: nowrap; }
  /* 폰에서는 목록이 좁다 — 시장 이름(KOSPI/KOSDAQ)을 걷어 이름과 코드에 자리를 준다.
     둘 중 하나를 버려야 한다면 버릴 것은 시장이다(코드만 있으면 종목이 정해진다). */
  @media (width <= 639px) { .검색후보 .장 { display: none; } }
  /* 알림 줄 — 머리에는 글을 놓을 자리가 없다. 눈에서만 감추고 스크린리더는 읽게 한다.
     ★ display:none 이나 visibility:hidden 은 **읽어 주지도 않는다** — 그러면 「10개 찾았다」가
       아무에게도 안 간다. 그래서 잘라내기(clip-path)로 감춘다.
     ★ 아젠다 CSS 에는 «화면에서만 숨기는» 유틸리티가 없다(base.html 172행이 그렇게 적어 두었다).
       없는 클래스를 쓰면 글이 그냥 보이므로 여기서 직접 쓴다. */
  .검색알림 {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  .머리도구 { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
  .프로필 {
    width: 26px; height: 26px; border-radius: var(--radius-full); background: #7a3fb5;
    display: grid; place-items: center; font-size: var(--fs-12); font-weight: var(--fw-bold);
    color: #fff; flex: none;
  }

  /* 햄버거 — 좁은 폭에서만 나온다 */
  .햄버거 {
    display: none; width: 38px; height: 38px; flex: none;
    align-items: center; justify-content: center;
    background: none; border: 0; color: var(--껍데기-머리글자); cursor: pointer;
    border-radius: var(--radius-sm);
  }
  .햄버거 svg { width: 22px; height: 22px; }

  /* ══ ②③ 띠2·띠3 을 한 덩이로 — 좁은 폭에서 이 덩이가 통째로 서랍이 된다 ══
     ★ 서랍용 markup 을 «따로 만들지 않는다». 복사하면 ADMIN_ONLY 표식이 두 벌이 되고,
       strip_admin_block() 은 첫 표식 하나만 지우므로 뒤엣것이 유료 손님에게 노출된다
       (auth_core.py:75~87 · 박물관 #262 와 같은 종류). */
  .머리메뉴 { display: block; }

  /* ── ② 띠2 — 화면 26개 · 검정 ── */
  .띠2바깥 { background: var(--껍데기-머리바탕); }
  .띠2 {
    display: flex; flex-wrap: wrap; align-items: center;
    padding-block: var(--sp-1);
  }
  /* ★ 지시(2026-09-13) — 「칸이 넘쳐도 위·아래로 다 집어넣는다. 나중에 빼거나 가린다.」
     그래서 도안의 가로 스크롤 대신 줄바꿈을 쓴다. 아무것도 감추지 않는다. */
  .띠2 a {
    padding: var(--sp-2) 13px; font-weight: var(--fw-bold); font-size: var(--fs-14);
    white-space: nowrap; color: var(--껍데기-머리글자); text-decoration: none;
    border-radius: var(--radius-sm);
  }
  .띠2 a:hover { background: #fff; color: #232526; text-decoration: none; }
  .띠2 a.on {
    color: var(--껍데기-로고주황);
    /* 10-04 사용자님 «탭을 눌러 들어가면 이름 밑에 생기는 줄이 나타날 필요가 없다» — 밑줄 걷음 · 주황 글자만 */
  }
  /* ★ 2026-09-13 사용자님 — 탭 앞 분류 단어(판정·리서치·발굴·검증·시스템)와 묶음 구분선을 걷었다.
     탭은 한 줄로 이어 붙이고, 탭과 탭 사이는 칸 안 여백(좌우 13) + 틈 4px 로 띄운다. */
  .띠2 { column-gap: var(--sp-1); }
  /* ★ 2026-10-02 사용자님 — «소비자 화면 탭이 끝나고 관리자 화면이 시작되는 곳에 표식».
     관리자에게만 그려진다(base.html 의 ADMIN_ONLY 안). 세로 막대 + «관리자» 글자 — 색 «단독» 으로 알리지 않는다. */
  .띠2-경계 {
    margin-inline-start: var(--sp-2); padding: 2px var(--sp-2);
    border-inline-start: 2px solid var(--껍데기-로고주황);
    color: var(--껍데기-로고주황); font-size: var(--fs-12); font-weight: var(--fw-bold);
    white-space: nowrap; user-select: none;
  }

  /* ── ③ 띠3 — 서브탭 42개 · 연회색 (위 두 줄과 반대) ── */
  .띠3바깥 {
    background: var(--껍데기-띠3바탕);
    border-block: 1px solid var(--껍데기-띠3테);
  }
  .띠3 {
    display: flex; flex-wrap: nowrap; align-items: center;
    padding-block: 0; color: var(--껍데기-띠3글자);   /* 10-04 «폭을 3분의 1 줄여라» 41 → 27px */
    /* 높이 고정(10-06) — 하위탭 수가 화면마다 달라(0 ~ 16개) 줄바꿈하면 노란 띠가 1~2줄로 바뀌어 아래 본문이 들썩였다.
       한 줄로 두고 넘치면 가로로 민다(막대 숨김 · 키보드로 가면 브라우저가 보이게 굴린다). */
    height: var(--껍데기-띠3높이); overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  }
  .띠3::-webkit-scrollbar { display: none; }
  /* 넘친 쪽 끝을 흐리게(base.html 이 .is-l · .is-r 을 단다) — «하위탭이 더 있다» 를 막대 없이 알린다(10-06). 노란 바탕이 비쳐 보인다 */
  .띠3.is-l, .띠3.is-r {
    --l: 0px; --r: 0px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--l), #000 calc(100% - var(--r)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--l), #000 calc(100% - var(--r)), transparent 100%);
  }
  .띠3.is-l { --l: 32px; }
  .띠3.is-r { --r: 32px; }
  .띠3.is-l.is-r { --l: 32px; --r: 32px; }
  /* 글자 = Claim Offer 와 같은 «14px 굵은 검정»(10-04 · 옛 12px 파랑) */
  .띠3 a {
    flex: none; padding: 2px var(--sp-2); font-size: var(--fs-14); font-weight: var(--fw-bold); white-space: nowrap;
    color: inherit; text-decoration: none; border-radius: var(--radius-sm);
  }
  .띠3 a:hover { background: #ffffff; color: var(--껍데기-띠3글자); text-decoration: none; }
  /* 지금 화면 표시 없음 — 10-04 사용자님 «이름 밑에 줄이 나타날 필요가 없다»(밑줄 걷음). 읽개용 aria-current 는 남는다. */
  .띠3 a.on { color: var(--껍데기-띠3글자); }
  /* ★ 2026-09-13 사용자님 — 묶음칩(넥서스·심층분석·발굴·리서치)을 걷었다.
     띠3 에는 켜진 띠2 탭의 하위탭만 그려지므로(shell_nav.py) 어느 화면 것인지 가를 필요가 없다.
     하위탭이 없는 화면에도 노란 띠는 «빈 채로» 늘 그린다(10-06 사용자님 «하위탭은 나중에 만들어진다» · 고정 틀). */

  /* 군청 띠 — 모든 화면 · 모든 폭(10-06). 10-15 부터 머리(.머리 · 붙박이) 안 맨 끝이라 굴려도 머리줄·노란 띠와 함께 붙어 있다. 꾸밈이라 읽개는 건너뛴다. */
  .머리아래띠 { display: block; height: var(--껍데기-군청띠두께); background: var(--껍데기-군청띠); }

  /* ══ ⑤ 레일 자리 — 배치C 의 «눕힌 레일». 지금은 자리만 만든다 ═══════════
     화면이 {% block 레일 %} 을 채우지 않으면 아무것도 그리지 않는다. */
  .레일 { display: block; }
  .레일패널 {
    box-shadow: var(--shadow-card);   /* 구역 카드 번짐(10-06 사용자님 · 시그널파워와 같은 한 겹) */
    width: 100%; background: var(--surface-1);
    border: 1px solid var(--border-default); border-radius: var(--radius);
    display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-8);
    padding: var(--sp-5) var(--sp-6);
  }
  @media (width <= 1023px) { .레일패널 { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } }

  /* ══ ⑦ 발 — 페이지에서 «구역 사이» 에 긋는 단 하나의 괘선 ═══════════════ */
  .발 { margin-top: var(--껍데기-구역사이); border-top: 1px solid var(--border-subtle); }
  .발안 {
    max-width: var(--껍데기-판최대); margin-inline: var(--껍데기-판여백);
    padding: var(--sp-8) var(--껍데기-본문여백);
    color: var(--text-1); font-size: var(--fs-13);
  }
  .발링크 { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-bottom: var(--sp-4); }
  .발검정 {
    /* ★ 도안은 #798187 이지만 검정 발 위에서 4.32:1 로 AA 미달이다(axe 가 잡았다 · 2026-09-13).
       색조·채도는 그대로 두고 밝기만 한 단 올린 #7d858b = 4.56:1 을 쓴다(대비 도구가 계산). */
    background: var(--껍데기-머리바탕); color: #7d858b; font-size: var(--fs-12);
    padding-block: var(--sp-6);
  }
  .발검정 .안 {
    max-width: var(--껍데기-판최대); margin-inline: var(--껍데기-판여백);
    padding-inline: var(--껍데기-본문여백);
  }
  @media (width >= 1792px) { .발안, .발검정 .안 { max-width: none; margin-inline: 160px; } }
  @media (width >= 2048px) { .발안, .발검정 .안 { margin-inline: 300px; } }
  @media (width <= 1439px) { .발안, .발검정 .안 { max-width: none; } }
}

@layer components {
  /* ══ 좁은 폭 — 띠2·띠3 덩이가 통째로 서랍이 된다 ═══════════════════════
     05B §5-2 (NN/g n=179) — 전부 숨기면 발견성 −20%·과업시간 +15%.
     그래서 «핵심(띠1)은 드러내고 나머지는 서랍» 이다. 서랍 안에서는 68칸이 모두 보인다. */
  @media (width <= 1023px) {
    .햄버거 { display: inline-flex; }
    .검색 { margin-inline: var(--sp-3); }

    .머리메뉴 {
      position: fixed; inset-block: 0; left: 0; z-index: var(--z-side);
      width: min(320px, 88vw); overflow-y: auto;
      background: var(--껍데기-머리바탕);
      padding-top: calc(42px + var(--sp-3));
      padding-bottom: calc(var(--sp-12) + var(--safe-b));
      transform: translateX(-100%); transition: transform .22s ease;
    }
    body.drawer-open .머리메뉴 { transform: none; }

    /* 서랍 안에서는 세로로 쌓는다 — 가로 줄바꿈은 좁은 폭에서 읽기 어렵다 */
    .띠2 { flex-direction: column; align-items: stretch; padding-inline: var(--sp-3); }
    .띠2 a, .띠2-잠금 { padding-block: 10px; min-height: 44px; display: flex; align-items: center; }
    /* 노란 띠는 서랍이 아니라 머리 안에 한 줄로(10-06 · 고정 틀 · 좁은 화면도 같은 순서) — 손가락 표적 44px */
    :root { --껍데기-띠3높이: 44px; }
    .띠3 a { display: flex; align-items: center; min-height: 44px; }
    .띠2 a, .띠2-잠금 { gap: 10px; }
    /* 서랍에서는 경계를 가로줄로 — 세로 막대는 세로 목록에서 안 보인다 */
    .띠2-경계 { margin: var(--sp-2) 0 0; padding: var(--sp-2) 13px 0;
               border-inline-start: 0; border-top: 2px solid var(--껍데기-로고주황); }
    /* 노란 띠 — 서랍 밖 머리 안(10-06). 옛: 서랍 안 노란 덩이(margin-top 8 · 세로 목록) */
    .띠3바깥 { border-inline: 0; }

  }

  @media (prefers-reduced-motion: reduce) {
    .머리메뉴 { transition: none; }
  }

  @media (width <= 639px) {
    .로고 { font-size: var(--fs-16); }
  }

  @media print {
    .머리, .머리메뉴, .발검정, .머리아래띠 { display: none !important; }
    .판 { max-width: none; margin: 0; padding: 0; }
  }
}

@layer components {
  /* ══ ⑥ 사이드바 — 띠2 를 왼쪽 검은 세로 메뉴로 (2026-10-05 사용자님 · 시킹알파 왼쪽 메뉴 벤치마킹) ══
     ① 위에 남는 띠 = 띠1(로고·검색) + 띠3(노란 하위탭) ② 띠2 → 사이드바 ③ 사이드바 탭을 누르면 띠3 에 그 하위탭
     ④ 손님 탭 위 · «관리자» 경계 아래 관리자 전용 ⑤ 폭 220 · 맨 위 띠 높이까지 ⑥ 지금 화면 = 주황 글자(밑줄 없음)
     ⑦ 접기 단추 ⑧ 1023 이하는 예전처럼 서랍(이 절은 1024 이상에만 걸린다) ⑨ 머리 아래 본문 위 틈 약 2cm(76px).
     ★ markup 을 둘로 만들지 않는다 — 같은 띠2바깥 덩이를 CSS 만으로 세운다(ADMIN_ONLY 표식이 두 벌이 되면 손님에게 샌다).
     ★ 층 번호를 새로 짓지 않는다 — 사이드바는 머리(.머리 · --z-header) 안의 붙박이라 머리와 같은 층에서 본문 위에 뜬다. */
  .사이드접기 { display: none; }
  /* 비공개 화면 잠금 메뉴(손님) — 띠2 링크와 같은 칸 · 흐린 글자 + 자물쇠 · 눌러도 이동 없음 */
  .띠2-잠금 {
    display: inline-flex; align-items: center; gap: 6px;
    padding: var(--sp-2) 13px; border: 0; background: none; cursor: not-allowed;
    font: var(--fw-bold) var(--fs-14)/var(--lh-ui) var(--font-head); color: var(--껍데기-머리흐림);
    white-space: nowrap; border-radius: var(--radius-sm); text-align: left;
  }
  .띠2-잠금 svg { width: 12px; height: 12px; flex: none; margin-inline: 2px; }
  .띠2-아이콘 { width: 16px; height: 16px; flex: none; opacity: .9; }
  .띠2 a.on .띠2-아이콘 { opacity: 1; }
  .띠2-잠금:hover { background: rgba(255, 255, 255, .08); }
  .띠2-잠금:focus-visible { outline: 2px solid var(--껍데기-로고주황); outline-offset: -2px; }
  .잠금안내 {
    margin: 2px var(--sp-2) var(--sp-2); padding: 6px 10px; border-radius: var(--radius-sm);
    background: #fff; color: #000; font: var(--fw-bold) var(--fs-13)/var(--lh-ui) var(--font-head);
  }
  body { background: var(--껍데기-아이보리); }
  /* 맨 아래 띠(발)는 늘 화면 바닥에 — 내용이 짧은 화면(메인 등)에서 발이 화면 중간에 떠 있었다(10-05 사용자님 «검은 띠는 계속 밑으로»).
     ★ 판은 margin-inline auto 를 쓰므로 세로 flex 안에서 폭이 내용만큼 줄어든다 — width 100% 로 못 박는다. */
  body { display: flex; flex-direction: column; min-height: 100vh; }
  .판 { flex: 1 0 auto; width: 100%; box-sizing: border-box; }

  @media (width >= 1024px) {
    /* ── 2026-10-05 사용자님 시안 2 (사진 실측: 군청 #3F485C · 아이보리 #F5F2F1 = 시킹알파 black-6) ──
       ① 머리 아래 76px(약 2cm) 틈을 군청 띠로 채운다(스크롤하면 함께 올라간다) · 본문은 그 아래 12px 에서 시작
       ② 사이드바 옆에 아이보리 띠(= 본문 왼쪽 여백 40px 자리) ③ 본문을 가운데가 아니라 왼쪽(아이보리 띠)에 붙이고 오른쪽 빈자리는 그대로
       ④ 검색칸·띠3 탭 이름도 본문과 같은 왼쪽 줄로 민다. */
    :root { --껍데기-본문왼틈: 15px; }   /* 군청 띠 색·두께 · 본문 위 틈은 맨 위 토큰(모든 폭 공통 · 10-06) */   /* 10-05 «사이드바에서 전체 화면이 0.4cm 만 벌어지게» — 0.4cm × 37.8 = 15px (전: 아이보리 40 + 0.7cm 26 = 66) */
    body {
      background: linear-gradient(to right,
        var(--껍데기-사이드바탕) 0 calc(var(--껍데기-사이드폭) - 1px),
        var(--껍데기-사이드선) calc(var(--껍데기-사이드폭) - 1px) var(--껍데기-사이드폭),
        var(--껍데기-아이보리) var(--껍데기-사이드폭));
    }
    .판, .머리안, .발안, .발검정 .안 { max-width: var(--껍데기-판최대); margin-inline: 0 auto; }
    /* 본문 왼쪽 줄 = 사이드바 + 15px(0.4cm) — 판·발·머리(검색칸·띠3 이름) 모두 같은 줄. 오른쪽 여백은 그대로 */
    .판, .발안, .발검정 .안, .머리안 { padding-inline-start: var(--껍데기-본문왼틈); }
    .검색 { margin-inline-start: 0; }
    :root[data-side="folded"] { --껍데기-사이드폭: 48px; }
    body { padding-left: var(--껍데기-사이드폭); }

    /* 10-05 «메뉴를 굴리면 로고 위로 겹쳐 올라간다» — 굴러가는 상자를 로고 칸(42) 아래부터 시작한다.
       세로 경계선은 사이드바가 아니라 바탕 그라디언트가 위아래 끝까지 긋는다(로고 줄에도 선이 이어진다). */
    .띠2바깥 {
      position: fixed; inset-block: 42px 0; left: 0; width: var(--껍데기-사이드폭);
      overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
      scrollbar-color: #444 transparent;
      background: var(--껍데기-사이드바탕);
    }
    .띠2바깥 .머리안 { max-width: none; margin: 0; padding: var(--sp-2) var(--sp-2) var(--sp-8); }
    .띠2 {
      flex-direction: column; flex-wrap: nowrap; align-items: stretch;
      column-gap: 0; row-gap: 0; padding-block: 0;
      border-top: 1px solid var(--껍데기-사이드선); padding-top: var(--sp-2);
    }
    /* 10-05 사용자님 «시킹알파 사이드바가 깔끔·단정 — 우리는 글씨가 두껍고 줄 간격이 넓다 · 앞에 작은 아이콘»
       실측(사진): 글자 높이 같음(13) · 획 3.0 → 2.2 · 줄 간격 41 → 30. 그래서 보통 굵기 · 줄 30 · 16px 선 아이콘.
       지금 화면만 굵게 + 주황(글자·아이콘 함께). */
    .띠2 a, .띠2-잠금 {
      display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
      padding: 4.5px var(--sp-3); white-space: normal; font-weight: var(--fw-normal); line-height: var(--lh-ui);   /* 21 + 9 = 줄 30 */
    }
    .띠2 a.on { font-weight: var(--fw-bold); }
    .띠2 a.on { background: none; }
    .띠2 a.on:hover { background: #fff; }
    /* 관리자 경계 = 가로선 + 주황 이름표(세로 목록에서는 세로 막대가 안 보인다) */
    /* 묶음 이름 = 시킹알파처럼 작은 회색 글씨(«관리자» · «비공개 화면») */
    .띠2-경계 {
      margin: var(--sp-3) 0 var(--sp-1); padding: var(--sp-3) var(--sp-3) 2px;
      border-inline-start: 0; border-top: 1px solid var(--껍데기-사이드선);
      color: var(--껍데기-머리흐림); font-size: var(--fs-12); font-weight: var(--fw-normal);
    }

    /* 로고 — 사이드바 맨 위 칸(띠1 줄과 같은 높이)에 세운다.
       ★ 폭은 접기 단추 앞까지만 — 붙박이(fixed) 사이드바는 제 층을 따로 만들어, 단추에 층 번호를 줘도
         사이드바 «밖» 의 로고보다 위로 못 올라간다(10-05 실측: 단추 자리를 로고가 덮어 눌러도 안 접혔다). */
    .로고 {
      position: fixed; top: 0; left: 0; z-index: 1;
      width: calc(var(--껍데기-사이드폭) - 40px); height: 42px; box-sizing: border-box;
      display: flex; align-items: center; padding-left: var(--sp-5);
      background: var(--껍데기-사이드바탕);
    }
    .사이드접기 {
      display: grid; place-items: center; position: fixed; top: 9px;
      left: calc(var(--껍데기-사이드폭) - 32px);
      width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-sm);
      background: #3a3a3a; color: #fff; cursor: pointer;
      font: var(--fw-bold) var(--fs-16)/1 var(--font-head);
    }
    .사이드접기:hover { background: #5a5a5a; }
    .사이드접기:focus-visible { outline: 2px solid var(--껍데기-로고주황); outline-offset: 2px; }

    /* 접힘 — 48px 줄에 펼치기 단추만 남긴다(아젠다 탭에는 아이콘이 없어 글자 없는 줄이 된다) */
    :root[data-side="folded"] .띠2바깥 .머리안 { visibility: hidden; }
    :root[data-side="folded"] .로고 { display: none; }
    :root[data-side="folded"] .사이드접기 { left: 12px; }
  }
}