/* ── 쉬운 화면 셸·머리줄 꼴 한 벌(#6158 · PM #5837 열두째 «머리줄 덩어리 10 → 6» · 구도 대조 10-24) ──────────────
   정본 = airepo/sr/easy-screen-1023/v2d_group/대표님_쉬운화면_시안_v2_완성본_1024.html <style> .pc·.rail·.ri·.hdr·.kbar·.hb·.bd·.pht
   ★값은 시안 그대로 — 고친 것은 «이름»(ezh- 접두)과 «틀 기준점»(시안 .pc 고정 틀 → 앱 셸 .app)뿐.
   ★셸 꼴은 전부 켬 표지(body.ex-easy-shell · lib/easy-shell.js 가 단다) 아래에서만 — 꺼짐 = 표지 0 = 지금 셸 글자·폭 그대로.
   ★머리줄 칸(.ezh-hdr)은 쉬운 머리줄(EasyAppHeader)에만 붙는다 · 토큰 = .ezh(easy-home.css) 그대로 씀.
   ★이 파일은 lib/easy-shell.js(EX_EASY_SHELL.ensureCss)가 한 번 싣는다(index.html <link> 0) — 켬일 때 셸이 부르고,
     작은 메뉴(EasyMenu · 아래 .ezm- 절)는 그릴 때 직접 부른다(그래서 꺼짐에서도 실릴 수 있다). */

/* ── 셸 짜임: 시안 .pc = 레일 58 | 나머지 · 머리 54 가 2단 위를 가로지름(구현은 2단이 y=0 부터 섰다) ──
   .main-col 을 풀어(display:contents) 머리·본문을 .app 격자에 바로 놓는다 · 대화·달력·결재(머리 없는 전폭) = 격자 0 */
body.ex-easy-shell .app:has(> .main-col){display:grid;grid-template-columns:auto auto minmax(0,1fr);
  grid-template-rows:auto auto auto minmax(0,1fr);background:var(--screen-bg-page)}
body.ex-easy-shell .app:has(> .main-col) > *{grid-column:2/-1;grid-row:4;min-width:0;min-height:0}
body.ex-easy-shell .app:has(> .main-col) > .side-rail{grid-column:1;grid-row:1/-1}
body.ex-easy-shell .app:has(> .main-col) > .side-rail + div:not(.main-col){grid-column:2;grid-row:3/5;height:auto!important}
body.ex-easy-shell .app > .main-col{display:contents!important}
body.ex-easy-shell .app > .main-col > *{grid-column:3;grid-row:4;min-width:0;min-height:0}
body.ex-easy-shell .app > .main-col > :first-child:not(header){grid-column:2/-1;grid-row:1}
body.ex-easy-shell .app > .main-col > header.page-hd{grid-column:2/-1;grid-row:2}
body.ex-easy-shell .app > .main-col > header.page-hd + :not(.page-body){grid-row:3}
/* 쉬운 2단(이슈 214px)이 들어오면 바깥 자리(256px 고정)를 2단 폭에 맞춘다 — 42px 빈 띠 0 */
body.ex-easy-shell .app > .side-rail + div:has([data-easy-nav]) > div:first-child{width:auto!important}

/* ── 레일: 시안 .rail 58 · padding 10 · .ri 46 · 6px 0 · 글 10px ── */
body.ex-easy-shell .side-rail{width:58px;padding:10px 0}
body.ex-easy-shell .side-rail > div:first-child{margin-bottom:14px!important}
body.ex-easy-shell .side-rail > div:nth-child(2){gap:6px;align-items:center}
body.ex-easy-shell .side-rail .rail-item{width:46px;height:auto;min-height:0;flex-direction:column;gap:1px;padding:6px 0;
  border-radius:9px;flex-shrink:0}
body.ex-easy-shell .side-rail .rail-item > svg{width:19px;height:19px;flex:0 0 auto}
body.ex-easy-shell .side-rail .rail-label{font-size:var(--fs-tiny);font-weight:700;line-height:15px}
body.ex-easy-shell .side-rail .rail-badge{right:4px}
/* 사진 14(대표 #7187) — 칸 사이 = 6 하나(인라인 1px 덧 0) · 묶음 사이 = 46px 선 하나(위아래 6 · 빈칸 0) · 마지막 묶음(HELP)·보기(눈) = 맨 아래 */
body.ex-easy-shell .side-rail > div:nth-child(2) > .rail-item{margin:0!important}
body.ex-easy-shell .side-rail > div:nth-child(2) > div{align-self:stretch;flex-shrink:0;margin:0 6px!important}
body.ex-easy-shell .side-rail > div:nth-child(2) > div:not(:has(~ div)){margin-top:auto!important}
body.ex-easy-shell .side-rail > div:nth-child(3){width:46px!important;padding-top:6px!important}

/* ── 머리줄: 시안 .hdr · .kbar · kbd · .hb(.ai .plus) · .bd · .me ── */
.ezh-hdr.page-hd{height:54px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;
  padding:0 14px;min-width:0;position:relative;z-index:32;font-size:var(--fs-body);line-height:1.5}
.ezh-hdr .ezh-cosel{display:flex;align-items:center;min-width:0;flex-shrink:1;overflow:hidden}
.ezh-hdr .ezh-kbar{flex:1;max-width:440px;margin:0 auto;display:flex;align-items:center;gap:8px;border:1px solid var(--line);
  background:var(--sub);border-radius:10px;padding:7px 10px;color:var(--t3);font-size:var(--fs-tiny);text-align:left;cursor:pointer;font-family:inherit}
.ezh-hdr .ezh-kbar svg{width:16px;height:16px;color:var(--brand);flex-shrink:0}
.ezh-hdr .ezh-kbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ezh-hdr kbd{margin-left:auto;font-family:inherit;font-size:var(--fs-tiny);border:1px solid var(--line);background:var(--surface);border-radius:5px;
  padding:0 6px;color:var(--t2)}
.ezh-hdr .ezh-hb{border:1px solid var(--line);background:var(--surface);border-radius:9px;height:32px;min-width:32px;padding:0 9px;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:var(--fs-tiny);font-weight:700;color:var(--t2);position:relative;
  white-space:nowrap;cursor:pointer;font-family:inherit}
.ezh-hdr .ezh-hb svg{width:16px;height:16px}
.ezh-hdr .ezh-hb.ai{background:var(--violet-bg);border-color:var(--violet-line);color:var(--violet)}
.ezh-hdr .ezh-hb.plus{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-size:var(--fs-h3);font-weight:800}
/* 사진 10 — [＋ 빠른 추가 ▾] 글자 = 옆 단추 글 크기 · [대화] = 운영 💬 단추(HeaderChatDrawer) 그대로에 옆 단추 테두리만 */
.ezh-hdr .ezh-hb.plus > span{font-size:var(--fs-tiny);font-weight:700}
.ezh-hdr [data-easy-act="hdr-chat"] > div > .btn-icon{border:1px solid var(--line);background:var(--surface);border-radius:9px}
.ezh-hdr [data-easy-act="hdr-chat"] > div > .btn-icon svg{width:16px;height:16px}
.ezh-hdr .ezh-hb .bd{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;border-radius:999px;font-size:var(--fs-tiny);font-weight:900;
  padding:0 5px;line-height:16px}
.ezh-hdr .ezh-me{display:flex;align-items:center;gap:8px;font-size:var(--fs-tiny);white-space:nowrap;line-height:1.25;padding:0 0 0 4px;flex-shrink:0}
/* 컷 5 머리 톤(#23485) — 보조 글자(찾기 줄·위치 글) = 정본 #667085 · 밝은 판 PC 만(다크·폰 틀 제 값) · 자 font-pc-7926 H1 */
:root:not([data-theme="dark"]) .ezh-hdr:not(.m-app-frame *) :is(.ezh-kbar,.ezh-cosel > .ezh-small){color:#667085}
.ezh-hdr .ezh-mm{margin-left:0}
.ezh-hdr .ezh-pop{top:calc(100% + 6px);right:0}
/* 덧(시안 «+» = 만들기 창 한 길 — 여기는 지금 «빠른 추가» 셋을 그대로 보존): 새 TO-DO 칸 · 알림 인박스 팝(지금 종 팝 값 그대로) */
.ezh-hdr .ezh-hdr-todo{width:360px;padding:8px 10px 10px}
.ezh-hdr .ezh-hdr-tdrow{display:flex;align-items:center;gap:8px;margin:6px 0 8px}
.ezh-hdr .ezh-hdr-tdrow textarea{flex:1;min-width:0;min-height:36px;padding:6px 10px;border:1px solid var(--brand);border-radius:9px;font:inherit;
  font-size:var(--fs-tiny);line-height:1.4;max-height:calc(7em + 14px);color:var(--t1);background:var(--surface);outline:none}
.ezh-hdr .ezh-hdr-todo .ezh-btns{align-items:center}
.ezh-hdr .ezh-hdr-todo label{display:flex;align-items:center;gap:5px;font-size:var(--fs-tiny);color:var(--t2);margin-right:auto}
.ezh-hdr-scrim{position:fixed;inset:0;z-index:2900}
.ezh-hdr .ezh-hdr-inbox{position:absolute;top:100%;right:0;z-index:2901;width:min(480px,94vw);height:min(72vh,660px);display:flex;
  flex-direction:column;background:var(--surface-base);border:1px solid var(--border-default);border-radius:var(--r-md);
  box-shadow:0 12px 40px rgba(0,0,0,.18);margin-top:6px;overflow:hidden}

/* 작은 메뉴 공통 꼴(EasyMenu · components/shared/EasyMenu.jsx · 기획 #14969·#14974·#15011) — 시안 메뉴팝업 1025 .hd·.ff·.sep·.ni.off
   상자 = 부품 안 style(시안 .pop 값) · 토큰 = 둘러싼 .ezh / .exd 뿌리 · 싣기 = 부품이 EX_EASY_SHELL.ensureCss()(표지 없이도 실림 · 쉬운 화면 어디서나)
   줄 = [data-easy-menu] 아래로 묶음(뿌리 «button{font:inherit}»보다 앞섬) · 쓰는 곳 = 쉬운 머리 [＋] · 현황판 «보는 범위»
   · 쉬운 대화 «거르기 · 정리» 다섯 줄(사진 3 · EasyChat.jsx PaneFilter) */
.ezm-h{display:flex;align-items:center;gap:6px;min-height:30px;padding:2px 2px 6px 10px;margin-bottom:4px;border-bottom:1px solid var(--line2);
  font-size:var(--fs-tiny);font-weight:800;color:var(--t2);line-height:1.3}
[data-easy-menu] > .ezm-h > button{margin-left:auto;min-width:28px;height:28px;font-size:var(--fs-tiny);color:var(--t3)}
[data-easy-menu] > .ezm-i{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;border:0;background:none;border-radius:8px;padding:6px 10px;
  font:inherit;font-size:var(--fs-tiny);font-weight:600;line-height:1.3;text-align:left;color:var(--t1);cursor:pointer}
[data-easy-menu] > .ezm-i:hover{background:var(--sub)}
[data-easy-menu] > .ezm-i:active{background:var(--row-h)}
[data-easy-menu] > .ezm-i:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.ezm-ic{flex:0 0 18px;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--t3)}
.ezm-ic svg{width:15px;height:15px}
.ezm-ck{flex:0 0 14px;width:14px;text-align:center;font-weight:900;color:var(--brand-ink)}
.ezm-t{margin-left:auto;padding-left:12px;flex-shrink:0;font-size:var(--fs-tiny);font-weight:500;color:var(--t3);white-space:nowrap}
.ezm-sep{height:1px;background:var(--line2);margin:4px 6px}
[data-easy-menu] > .ezm-i.danger,.ezm-i.danger .ezm-ic{color:var(--red)}
[data-easy-menu] > .ezm-i.danger:hover{background:var(--red-bg)}
[data-easy-menu] > .ezm-i.off{opacity:.5;cursor:not-allowed}
[data-easy-menu] > .ezm-i.off:hover,[data-easy-menu] > .ezm-i.off:active{background:none}
/* 아이콘 단추 꼴(.ezb · 켜짐 .ezb.on · 기획 #15127 · 사진 16) — 쓰는 곳 = 새 이슈 카드 머리 아이콘 넷 · 쉬운 이슈 퀵뷰 ☆
   · 쉬운 대화 목록↔본문 손잡이(사진 17 · EasyChat.jsx EasyChatPane · 아이콘만 · 이름표 = title/aria-label · 화살표 fill none)
   높이 = 옆 글자 단추(.ezh-hb 32px)와 같음 · 아이콘 18px(한 단계 큼) · 진한 색(흐림 0)
   이름표 = 아이콘 옆 글(부르는 쪽 · 지금 aria-label 글) — 아이콘·글 사이 = .ezh-hb 와 같은 gap */
button.ezb{display:inline-flex;align-items:center;justify-content:center;height:32px;min-width:32px;padding:0 7px;flex-shrink:0;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--t1);cursor:pointer;gap:5px}
button.ezb svg{width:18px;height:18px}
button.ezb:hover{background:var(--sub);border-color:var(--t3)}
button.ezb:active{background:var(--row-h)}
button.ezb:disabled{opacity:.5;cursor:not-allowed}
button.ezb.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink)}
button.ezb.on svg{fill:currentColor}

/* ── 폰 아래 탭 줄: 시안 .pht padding 6px 0 14px(구현 54+1 → 시안 61.5) ── */
body.ex-easy-shell [data-mtabbar="1"]{padding:6px 0 max(14px, env(safe-area-inset-bottom, 0px))!important}
body.ex-easy-shell [data-mtabbar="1"] > button{min-height:0!important}

/* ── 쉬운 폰 다섯 탭 바탕 한 색(대표 #7925 · R-371 · 시안 airepo/pm/mock_easy_bg_1031.html 안 ⓒ · 컷 1) ──
   ★표지(body.ex-easy-shell) ∧ 폰 틀(.m-app-frame) 안에서만 — PC·쉬운 판 꺼진 폰은 값 무변 · 색 값 정본 = tokens.css --screen-bg-shell(·-line).
   ★--border-subtle(머리 선·고객 줄 선·구분 칸 테두리 = 바탕 선)은 컷 2 고칠 1 로 공통 층(tokens.css :root)에 올랐다 — 여기서 다시 주지 않는다.
   ★--screen-bg-seg = 구분 칸(MAppSeg) 한 자리만 읽는다 — 밝은 쉬운 폰만 값 · 없으면 종전 움푹 칸(옛 폰·다크 무변 · 검수5 #22091·#22102).
   ★쉬운 뿌리 토큰·기본 바탕·보조 글자 = 컷 2 로 공통 층(tokens.css · components.css 끝)에 올랐다 — 여기는 폰 틀 전용 칸만 남는다.
   자 = web/client/scripts/easy-phone-bg-7925.test.mjs · screen-bg-pc-7925.test.mjs */
:root:not([data-theme="dark"]) body.ex-easy-shell .m-app-frame{--screen-bg-seg:var(--screen-bg-shell)}
/* ── 폰 글자 크기 표(이희성 대표 #7926 · 규율 R-2026-09-04-372 · 컷 4) ──────────────
   폰 틀(.m-app-frame) 안에서만 위 규칙의 글자 크기를 폰 표 단계(tokens.css --fs-m-*)로 덮는다 — PC 무변.
   위 규칙과 같은 차례·같은 무게(+틀 한 칸)로 한 줄씩 옮겨 겹침 순서를 지킨다 · 18.5 넘는 큰 글자는 제 값 그대로. */
body.ex-easy-shell .m-app-frame .side-rail .rail-label{font-size:var(--fs-m-sub)}
.m-app-frame .ezh-hdr.page-hd{font-size:var(--fs-m-section)}
.m-app-frame .ezh-hdr .ezh-kbar{font-size:var(--fs-m-row)}
.m-app-frame .ezh-hdr kbd{font-size:var(--fs-m-sub)}
.m-app-frame .ezh-hdr .ezh-hb{font-size:var(--fs-m-body)}
.m-app-frame .ezh-hdr .ezh-hb.plus{font-size:var(--fs-m-title)}
.m-app-frame .ezh-hdr .ezh-hb.plus > span{font-size:var(--fs-m-body)}
.m-app-frame .ezh-hdr .ezh-hb .bd{font-size:var(--fs-m-sub)}
.m-app-frame .ezh-hdr .ezh-me{font-size:var(--fs-m-body)}
.m-app-frame .ezh-hdr .ezh-hdr-tdrow textarea{font-size:var(--fs-m-row)}
.m-app-frame .ezh-hdr .ezh-hdr-todo label{font-size:var(--fs-m-body)}
.m-app-frame .ezm-h{font-size:var(--fs-m-body)}
.m-app-frame [data-easy-menu] > .ezm-h > button{font-size:var(--fs-m-row)}
.m-app-frame [data-easy-menu] > .ezm-i{font-size:var(--fs-m-body)}
.m-app-frame .ezm-t{font-size:var(--fs-m-sub)}