/* ═══════════════════════════════════════════════════════════════
   css/b/shell.css — 셸(설계서 §4)
   소유: 앱 셸(#app-shell = B .main) · topline(#topbar = B .topline) · 검색줄 · 사이드바(#mobile-rail = B .side-nav) ·
        하단 바(#mobile-nav = B .bottom-nav) · 더보기 시트 · 푸터 · 알림 받기 카드 · 안내 알약 위치 · 당겨서 새로고침 · 키보드.
   값은 docs/draft-b/reference.html 그대로다(주석의 B 선택자 참고).
   판정은 B 그대로 — 사이드바 셸 = (orientation: landscape) and (min-width: 760px)(js/config.js SIDEBAR_MQ 와 같은 식).
   그 밖은 전부 컴팩트 셸(하단 바 + topline 더보기).
   ⚠️ 미디어 블록은 파일 맨 끝, B 순서(≥700 → 가로 ≥760 → 가로 ≥1180 → ≤460). 기본 규칙을 그 아래에 두지 말 것.
   ═══════════════════════════════════════════════════════════════ */

/* ── 앱 셸 — B .main{min-height:100vh;padding:26px 18px 100px} / .content{width:min(1180px,100%);margin:0 auto} ── */
#app-shell {
  display: block; min-height: 100vh;
  padding: max(26px, calc(var(--safe-top) + 12px)) max(18px, var(--safe-right)) calc(100px + var(--safe-bottom)) max(18px, var(--safe-left));
}
#app-shell #main-content { width: min(var(--max), 100%); margin-left: auto; margin-right: auto; }
/* ⚠️ 문서가 스크롤한다 — #main-content 를 스크롤 상자로 만들지 않는다.
   overflow 가 visible 이어야 본문 가장자리를 넘는 ⋮ 팝업이 잘리지 않는다. */
#app-shell #main-content { overflow: visible; padding: 0; }
#main-content > .content-section:not(.hidden) { margin-top: 0; }
body.more-panel-open #main-content { overflow: hidden; }

/* ── topline — B .topline{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin:2px 2px 24px}
   B 의 .topline 은 .content 안에서 좌우 2px 를 띄운다 — 여기서는 #topbar 자신이 가운데 정렬 상자라 폭에서 4px 를 뺀다.
   B 처럼 화면에 붙지 않는다(sticky 가 아니다). 오른쪽 묶음(.top-actions)은 B 의 날짜 + 확장 버튼(검색·알림·프로필/더보기). ── */
#app-shell #topbar {
  position: relative; z-index: 40;      /* 검색 스크림(35) 위에 남아야 검색을 조작할 수 있다 */
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  width: calc(min(var(--max), 100%) - 4px); margin: 2px auto 24px;
}
/* 화면 이름은 보조기기용으로만 둔다(base.css .sr-only 와 같은 값 — 마크업 클래스가 빠져도 숨는다). */
#topbar-title {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* B .mobile-brand{font-size:20px;font-weight:700;display:flex;align-items:center;gap:9px}
   · small{display:block;margin-top:4px;font-size:10px;color:#9aa59e;font-weight:500}. 누르면 홈(.brand-home 위임). */
.mobile-brand {
  position: relative; display: flex; align-items: center; gap: 9px; flex: none;
  font-size: 20px; font-weight: 700; color: var(--ink); text-decoration: none;
}
.mobile-brand small { display: block; margin-top: 4px; font-size: 10px; color: var(--t-mbrand-sub); font-weight: 500; }
.mobile-brand::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(100%, 44px); height: max(100%, 44px); }
.top-actions { display: flex; align-items: center; gap: 8px; margin: -7px 0 -11px auto; flex: none; }
.top-actions > button { flex: none; }
/* B .date{font-size:12px;color:#5e6f63;padding-top:4px;white-space:nowrap} — 버튼 줄 가운데에 앉으므로 padding-top 은 0.
   ⚠️ .top-actions 의 위아래 음수 여백(-7/-11)은 36px 버튼 줄을 B 날짜 한 줄(약 18px) 높이로 접어, 버튼 가운데가 B 날짜 자리에 오고
      topline 아래 본문의 시작 높이가 B 와 같게 한다. 지우면 화면 전체가 18px 내려간다. */
.date { font-size: 12px; color: var(--t-date); white-space: nowrap; }
#topline-date { margin-right: 4px; }
#topline-date:empty { display: none; }
/* 컴팩트 셸 상단 프로필 입구 — 아바타(32)를 36 상자에 담는다(사이드바 셸에서는 숨긴다). 누르는 영역은 ::after 44. */
.topline-avatar { position: relative; width: 36px; height: 36px; display: grid; place-items: center; flex: none; padding: 0; border-radius: 50%; background: transparent; }
.topline-avatar::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; }
.topline-avatar .avatar { transition: box-shadow var(--move); }
.topline-avatar:hover .avatar { box-shadow: 0 0 0 2px var(--green-soft); }
.more-trigger.is-active { background: var(--nav-hover); color: var(--green-deep); }

/* ── 검색줄·알림줄 — topline 바로 아래 흐름 안(margin -10px 2px 18px). 열고 닫을 때 0fr→1fr(search.js·notifications.js 가 hidden 을 벗긴 뒤 .open 을 붙인다).
   알림줄은 검색줄과 같은 자리·같은 상자·같은 움직임이다(2026-10-10 사용자 지시). 둘은 동시에 열리지 않는다. ── */
#app-shell :is(#search-bar, #notif-bar) {
  position: relative; z-index: 39; display: grid; grid-template-rows: 0fr; grid-template-columns: minmax(0, 1fr);
  width: calc(min(var(--max), 100%) - 4px); margin: -10px auto 18px; opacity: 0;
  transition: grid-template-rows var(--fade), opacity var(--fade);
}
#app-shell :is(#search-bar, #notif-bar).open { grid-template-rows: 1fr; opacity: 1; }
:is(#search-bar, #notif-bar) > div { overflow: hidden; min-height: 0; min-width: 0; }
/* 입력칸 모양 상자(높이 46 · 모서리 13 · 면 --paper · 테두리 --line). 펼침 상자가 overflow:hidden 이라 그림자는 두지 않는다. */
:is(#search-bar, #notif-bar) .search-bar-inner {
  display: flex; align-items: center; gap: 4px; height: 46px; margin: 0; padding: 0 5px;
  border: 1px solid var(--line); border-radius: var(--r-item); background: var(--paper);
  transition: border-color var(--move);
}
:is(#search-bar, #notif-bar) .search-bar-inner:focus-within { border-color: var(--green); }
:is(#search-bar, #notif-bar) .search-bar-inner > button:not(.notif-read-all) {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-btn);
  color: var(--t-nav); background: transparent; transition: background-color var(--move), color var(--move);
}
:is(#search-bar, #notif-bar) .search-bar-inner > button:not(.notif-read-all):hover { background: var(--nav-hover); color: var(--green-deep); }
#search-bar .search-bar-inner input {
  flex: 1 1 0%; width: 0; min-width: 0; height: 100%; padding: 0 4px; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; outline: none; color: var(--ink);
}
/* 알림줄 안: [종 표시 36 · 알림 · 읽지 않은 수 …… 모두 읽음 · 닫기 36]. 종 표시는 검색줄의 돋보기 자리다(누르는 버튼이 아니다). */
#notif-bar .search-bar-inner { outline: none; }
#notif-bar .notif-bar-mark { width: 36px; height: 36px; flex: none; display: grid; place-items: center; color: var(--t-nav); }
#notif-bar .notif-bar-title { margin: 0 2px 0 4px; flex: none; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: -.03em; color: var(--ink); }
#notif-bar .notif-bar-summary { flex: 1 1 0%; min-width: 0; margin: 0 0 0 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--sage-muted); }
#notif-bar .notif-bar-summary strong { color: var(--sage-accent); font-weight: 760; }
#notif-bar .notif-read-all {
  flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 8px; border: 0; border-radius: var(--r-btn);
  background: transparent; color: var(--sage-accent); font-size: 13px; font-weight: 700; white-space: nowrap;
  transition: background-color var(--move), color var(--move);
}
#notif-bar .notif-read-all .ui-icon { font-size: 17px; }
#notif-bar .notif-read-all:hover:not(:disabled) { background: var(--nav-hover); color: var(--sage-accent-hover); }
#notif-bar .notif-read-all:disabled { opacity: .45; cursor: default; }
#notif-bar button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 419.98px) {
  #notif-bar .notif-summary-long { display: none; }
  #notif-bar .notif-read-all .ui-icon { display: none; }
}

/* ── 사이드바 — B .side-nav{position:fixed;inset:0 auto 0 0;width:var(--nav-size);padding:28px 18px 24px;
   background:rgba(249,251,247,.9);border-right:1px solid var(--line);backdrop-filter:blur(14px);display:none;z-index:20}
   안은 세로 flex(설계서 §4.4) — 브랜드·프로필은 고정, 펼친 목록이 길어지면 .rail-scroll 이 넘침을 먹는다. ── */
#mobile-rail {
  position: fixed; inset: 0 auto 0 0; z-index: 20; width: var(--nav-size);
  display: none; flex-direction: column;
  padding: max(28px, var(--safe-top)) 18px max(24px, var(--safe-bottom)) max(18px, var(--safe-left));
  background: var(--side-bg); border-right: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
/* B .brand{padding:8px 10px 24px} · .brand-title{font-size:23px;font-weight:700;line-height:1} · .brand-sub{margin-top:8px;font-size:11px;color:#a2ada5} */
.brand { display: block; flex: none; padding: 8px 10px 24px; color: var(--ink); text-decoration: none; }
/* CSA와 같은 원본 SVG. 일반 글꼴로 로고를 다시 그리거나 CSS로 색을 바꾸지 않는다. */
.rail-logo { display: block; width: 109px; max-width: 100%; height: auto; }
.mobile-brand .brand-wordmark { width: 120px; }
.rail-profile { display: flex; align-items: center; gap: 8px; flex: none; width: 100%; min-height: 56px; margin-bottom: 12px; padding: 6px; border-radius: var(--r-item); background: transparent; text-align: left; }
.rail-profile:hover { background: var(--nav-hover); }
.rail-profile .avatar { flex: none; width: 32px; height: 32px; }
.rail-profile-copy { display: grid; gap: 3px; min-width: 0; }
.rail-profile-copy > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rail-profile-name { font-size: 13px; font-weight: 650; }
#rail-profile-sub { font-size: 11px; color: var(--t-nav); }
.brand-sub { display: block; margin-top: 8px; font-size: 11px; color: var(--t-brand-sub); }
/* B .side-links{display:grid;gap:10px;margin-top:4px} — 다섯 메뉴 + 더보기 + 인라인 확장 목록. 넘침은 이 스크롤러가 먹는다. */
.rail-scroll {
  display: grid; gap: 10px; align-content: start; margin-top: 4px; min-height: 0; flex: 0 1 auto;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}
.rail-scroll::-webkit-scrollbar { display: none; }
.rail-fill { flex: 1; min-height: 0; }
/* B .nav-item{width:100%;min-height:46px;padding:0 14px;border-radius:13px;display:flex;align-items:center;gap:11px;
   color:#728077;font-size:14px;font-weight:500;text-align:left;transition:.18s ease} · svg{19×19;stroke-width:1.65}
   hover{background:#eef4eb;color:var(--green-deep)} · active{background:#dfeedd;color:#41614a;font-weight:650}
   ⚠️ 복제된 확장 항목(buildRailExtras)은 .nav-item 이 없는 .mnav-item 이다 — 그래서 선택자를 #mobile-rail .mnav-item 으로 쓴다. */
#mobile-rail .mnav-item, #mobile-rail .rail-more {
  width: 100%; min-height: 46px; padding: 0 14px; border-radius: var(--r-item);
  display: flex; align-items: center; gap: 11px; background: transparent;
  color: var(--t-nav); font-size: 14px; font-weight: 500; text-align: left; text-decoration: none;
  transition: background-color var(--move), color var(--move);
}
#mobile-rail .mnav-item .ui-icon, #mobile-rail .rail-more .ui-icon { font-size: 19px; stroke-width: 1.65; color: inherit; }
#mobile-rail .mnav-item:hover, #mobile-rail .rail-more:hover { background: var(--nav-hover); color: var(--green-deep); }
#mobile-rail .mnav-item.is-active { background: var(--green-soft); color: var(--t-nav-active); font-weight: 650; }
#mobile-rail .mnav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* B 메뉴 아이콘 5종(b_*)은 원문에 linecap/linejoin 이 없다(기본 butt/miter). */
.b-icon { stroke-linecap: butt; stroke-linejoin: miter; }
/* 더보기 — 팝업이 아니라 인라인 확장이다(.more-trigger·aria-haspopup 을 붙이지 않는다). 셰브런은 끝, 펼치면 뒤집힌다. */
#mobile-rail .rail-more { flex: none; }
.rail-more-label { flex: 1; min-width: 0; }
#mobile-rail .rail-more .rail-more-chev { font-size: 16px; transition: rotate var(--move); }
.rail-more[aria-expanded="true"] .rail-more-chev { rotate: 180deg; }
/* 펼침 — 격자 행 0fr↔1fr(항목 수가 역할마다 달라 max-height 상수를 쓸 수 없다). 접힘에는 JS 가 inert 를 건다.
   ⚠️ 안쪽 overflow:hidden · min-height:0 을 지우지 말 것 — 없으면 0fr 이 아무 일도 안 한다. */
.rail-extra { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--fade); }
.rail-extra-inner { overflow: hidden; min-height: 0; display: grid; gap: 10px; }
#mobile-rail.is-expanded .rail-extra { grid-template-rows: 1fr; }
#mobile-rail.is-expanded .rail-scroll { scrollbar-width: thin; }
/* ── 하단 바 — B .bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:9px max(10px,safe-right) calc(9px + safe-bottom) max(10px,safe-left);
   background:rgba(251,252,249,.94);border-top:1px solid var(--line);backdrop-filter:blur(18px);display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
   ⚠️ 칸 수는 아래 grid-template-columns 에 적혀 있다 — 항목 수를 바꾸면 함께 고칠 것(tools/check.sh 가 대조한다). ── */
#mobile-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px;
  padding: 9px max(10px, var(--safe-right)) calc(9px + var(--safe-bottom)) max(10px, var(--safe-left));
  background: var(--bar-bg); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  transition: transform var(--fade);
}
/* B .bottom-nav .nav-item{display:grid;place-items:center;gap:4px;min-height:56px;padding:4px;border-radius:13px;text-align:center;font-size:10px;position:relative}
   svg 20×20 · hover 는 B .nav-item:hover 그대로 · 활성{background:transparent;color:#4f7458} + ::after 18×2 막대(bottom 3px)
   · 활성 굵기 650(B .nav-item.active 가 하단 바에도 걸린다) */
#mobile-nav .mnav-item {
  position: relative; min-width: 0; min-height: 56px; padding: 4px; border-radius: var(--r-item);
  display: grid; place-items: center; align-content: center; gap: 4px; background: transparent;
  color: var(--t-nav); font-size: 10px; font-weight: 500; text-align: center;
  transition: background-color var(--move), color var(--move);
}
#mobile-nav .mnav-item .ui-icon { font-size: 20px; stroke-width: 1.65; color: inherit; }
#mobile-nav .mnav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mobile-nav .mnav-item:hover { background: var(--nav-hover); color: var(--green-deep); }
#mobile-nav .mnav-item.is-active { background: transparent; color: var(--t-bottom-active); font-weight: 650; }
#mobile-nav .mnav-item.is-active::after {
  content: ''; position: absolute; left: 50%; bottom: 3px; width: 18px; height: 2px; margin-left: -9px;
  border-radius: var(--r-bar); background: var(--green);
}
/* 화면 키보드가 열린 동안 하단 바를 접는다(main.js 가 html.keyboard-open 을 붙인다). */
html.keyboard-open #mobile-nav { transform: translateY(100%); pointer-events: none; }

/* ── 더보기 시트(컴팩트 셸) — .hidden 이 아니라 .open + transform 으로 여닫는다(전환이 걸려야 한다).
   main.js setMorePanelOpen 이 inert·aria-hidden·포커스 왕복을 맡는다. 재질은 B 하단 바 결(반투명 + blur 18). ── */
#more-scrim {
  position: fixed; inset: 0; z-index: 55; background: var(--scrim);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; touch-action: none; transition: opacity var(--fade);
}
#more-scrim.open { opacity: 1; pointer-events: auto; }
#more-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: block;
  max-height: min(78vh, 680px, calc(var(--visual-viewport-height) - 12px)); overflow-y: auto; overscroll-behavior: contain;
  padding: 10px max(14px, var(--safe-right)) calc(14px + var(--safe-bottom)) max(14px, var(--safe-left));
  background: rgba(251, 252, 249, .97); border-top: 1px solid var(--line); border-radius: var(--r-card) var(--r-card) 0 0;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--shadow-modal);
  transform: translateY(100%); pointer-events: none; transition: transform .26s ease;
}
#more-panel.open { transform: none; pointer-events: auto; visibility: visible; }
/* 닫혀 있는 동안은 그림자를 끈다 — 화면 밖으로 밀어 둔 시트의 그림자가 화면 아래 끝에 번져 보였다. */
#more-panel:not(.open) { box-shadow: none; visibility: hidden; }
.more-handle { width: 36px; height: 4px; margin: 0 auto 10px; border-radius: var(--r-bar); background: var(--line-strong); }
.mobile-profile { display: flex; align-items: center; gap: 11px; padding: 4px 4px 12px; border-bottom: 1px solid var(--line); }
.more-profile {
  display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; min-height: 46px; padding: 0 6px; margin-left: -6px;
  border-radius: var(--r-item); background: transparent; text-align: left; transition: background-color var(--move);
}
.more-profile:hover { background: var(--nav-hover); }
.more-profile .avatar { width: 36px; height: 36px; }
#more-menu.more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-top: 10px; }
/* 더보기 항목 — B .nav-item 모양(아이콘 19 + 글자 14/500). 활성 = B .nav-item.active */
.more-link {
  min-height: 46px; padding: 0 14px; border-radius: var(--r-item); display: flex; align-items: center; gap: 11px;
  color: var(--t-nav); font-size: 14px; font-weight: 500; text-decoration: none; background: transparent;
  transition: background-color var(--move), color var(--move);
}
.more-link .ui-icon { font-size: 19px; }
.more-link:hover { background: var(--nav-hover); color: var(--green-deep); }
.more-link.nav-link-active { background: var(--green-soft); color: var(--t-nav-active); font-weight: 650; }

/* ── 푸터 — padding 40px 0 8px · 가운데 · 11px · --t-brand-sub. 불편 신고는 B .more(components.css) ── */
#app-shell #site-footer { margin: 0; padding: 40px 0 8px; text-align: center; font-size: 11px; color: var(--t-brand-sub); }
#site-footer .footer-line { margin: 0; }
#site-footer .footer-brand { color: var(--t-brand-sub); text-decoration: none; font-weight: 650; }
#site-footer .footer-brand:hover { color: var(--green-deep); }
#site-footer #btn-site-feedback { margin-top: 10px; }
#site-footer .footer-copy { margin: 14px 0 0; }

/* ── 알림 받기 카드(#setup-card — 홈·설정 맨 아래, 규칙은 push.js). 모양은 B .card.card-pad(components.css) ── */
#main-content #setup-card { margin-top: 20px; }
#setup-card .section-title { margin-bottom: 6px; }
.setup-card-desc { margin: 0 0 6px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
/* 줄 — B .notice-row 결(줄 사이 선 --rule-3) */
.setup-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; font-size: 13px; }
#setup-card .setup-row:not(.hidden) ~ .setup-row:not(.hidden) { border-top: 1px solid var(--rule-3); }
.setup-row-icon { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: var(--r-cell); background: var(--icon-bg); color: var(--t-icon); }
.setup-row-icon .ui-icon { font-size: 17px; }
.setup-row-copy { flex: 1; min-width: 0; }
.setup-row-title { margin: 0; font-size: 13px; font-weight: 560; color: var(--ink); }
.setup-row-hint { margin: 2px 0 0; font-size: 11px; color: var(--muted); }
.setup-row-hint:empty { display: none; }
/* 작은 주 버튼 — B .pill-btn 결 */
.setup-row-btn {
  position: relative; flex: none; padding: 7px 12px; border-radius: var(--r-cell); background: var(--action); color: #fff;
  font-size: 12px; font-weight: 650; box-shadow: var(--action-shadow); transition: background-color var(--move);
}
.setup-row-btn::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(100%, 44px); height: 44px; }
.setup-row-btn:hover { background: var(--action-hover); }
.setup-row.is-waiting { opacity: .55; }
html.demo-mode #setup-card { display: none !important; }

/* ── 안내 알약 — '연결 중'(#net-note) · 선택과목 경고(#tt-note) · 데모(#demo-pill). 하단 바 위에 뜬다 ── */
#net-note, #tt-note {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-clear) + 64px + var(--safe-bottom));
  display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 24px); min-height: 40px; padding: 0 14px;
  border-radius: var(--r-item); font-size: 12px; font-weight: 650; text-align: left; box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
#net-note { z-index: 46; background: rgba(237, 245, 233, .96); border: 1px solid var(--green-soft); color: var(--green-deep); }
#tt-note { z-index: 45; padding-right: 4px; background: var(--cream); border: 1px solid var(--warn-line); color: var(--warn); }
#tt-note .icon-btn { width: 32px; height: 32px; color: inherit; }
/* 연결 안내가 떠 있으면 선택과목 경고를 감춘다(같은 자리 · 통신이 없을 때는 판단 자체가 미덥지 않다). */
#net-note:not(.hidden) ~ #tt-note { display: none; }
#demo-pill {
  position: fixed; right: 16px; bottom: calc(var(--nav-clear) + 16px + var(--safe-bottom)); z-index: 47;
  display: inline-flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 6px 6px 6px 12px;
  border: 1px solid var(--line); border-radius: var(--r-item); background: var(--bar-bg); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  color: var(--text-2); font-size: 12px; font-weight: 560; transition: opacity var(--move);
}
#demo-pill > .ui-icon { color: var(--green-deep); font-size: 16px; }
.demo-pill-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-pill-short { display: none; white-space: nowrap; }
.demo-pill-btn { position: relative; flex: none; padding: 7px 12px; border-radius: var(--r-cell); background: var(--action); color: #fff; font-size: 12px; font-weight: 650; white-space: nowrap; }
.demo-pill-btn::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(100%, 44px); height: 44px; }
/* 토스트가 뜨는 동안 알약은 비켜 준다(마크업에서 #sys-toast 가 #demo-pill 보다 앞 형제다). */
#sys-toast.sys-toast-show ~ #demo-pill { opacity: 0; pointer-events: none; }

/* ── 당겨서 새로고침(두 번 당겨야 돈다 — js/pullrefresh.js 가 위치·회전·문구를 맡는다) ── */
#pull-refresh { position: fixed; top: 0; left: 50%; z-index: 58; transform: translate(-50%, -64px); pointer-events: none; opacity: 0; }
#pull-refresh.settling { transition: transform .3s ease, opacity .22s ease; }
.pull-refresh-pill {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-width: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 22px; background: var(--paper); color: var(--green-deep); box-shadow: var(--shadow);
  transition: padding var(--move);
}
.pull-refresh-pill.has-text { padding: 0 14px 0 10px; }
#pull-refresh.armed .pull-refresh-pill { box-shadow: 0 0 0 2px rgba(143, 185, 154, .5), var(--shadow); }
.pull-refresh-hint { font-size: 12px; font-weight: 650; color: var(--ink); white-space: nowrap; }
.pull-refresh-hint:empty { display: none; }
#pull-refresh.refreshing .ui-icon { animation: pull-spin .9s linear infinite; }
@keyframes pull-spin { to { transform: rotate(360deg); } }
#main-content.pull-settling { transition: transform .3s ease; }

/* ══ 반응형(B 순서) ══════════════════════════════════════════════════ */
/* 더보기 시트 격자 — 좁은 휴대폰 2열, 그 위 3열(설계서 §4.6) */
@media (min-width: 460px) {
  #more-menu.more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* B (min-width:700px){.main{padding:30px 30px 104px}} */
@media (min-width: 700px) {
  #app-shell { padding: max(30px, calc(var(--safe-top) + 12px)) max(30px, var(--safe-right)) calc(104px + var(--safe-bottom)) max(30px, var(--safe-left)); }
}
/* 사이드바 셸 — B: .side-nav{display:block} · .bottom-nav{display:none} · .main{padding:34px 34px 48px calc(var(--nav-size) + 36px)} ·
   .mobile-brand{display:none} · .topline{justify-content:flex-end;margin-bottom:18px} */
@media (orientation: landscape) and (min-width: 760px) {
  #mobile-rail { display: flex; }
  #mobile-nav { display: none; }
  #app-shell { padding: max(34px, var(--safe-top)) max(34px, var(--safe-right)) calc(48px + var(--safe-bottom)) calc(var(--nav-size) + 36px); }
  #app-shell #topbar { justify-content: flex-end; margin-bottom: 18px; }
  #topbar-logo, #btn-topbar-more, #more-panel, #more-scrim { display: none; }
  .topline-avatar { display: none; }
  /* 화면 가운데에 뜨는 알약은 본문 가운데에 맞춘다(tools/pull.js 가 잰다). */
  #pull-refresh, #net-note, #tt-note { left: calc(50% + var(--nav-size) / 2); }
  #net-note, #tt-note { max-width: calc(100vw - var(--nav-size) - 24px); }
}
/* B (orientation:landscape) and (min-width:1180px){:root{--nav-size:176px} .side-nav{padding-left:28px;padding-right:22px}
   .brand{padding-left:6px} .main{padding-left:calc(var(--nav-size) + 48px);padding-right:48px}}
   로고·프로필·설정은 사용자 최종 조정으로 추가한 부분이다. */
@media (orientation: landscape) and (min-width: 1180px) {
  #mobile-rail { padding-left: max(28px, var(--safe-left)); padding-right: 22px; }
  .brand { padding-left: 6px; }
  #app-shell { padding-left: calc(var(--nav-size) + 48px); padding-right: max(48px, var(--safe-right)); }
}
/* 짧은 가로 화면은 사이드바 간격을 줄이고 메뉴 스크롤로 모든 항목에 접근한다. 누르는 영역은 44px 이상. */
@media (max-height: 560px) {
  #mobile-rail { padding-top: max(16px, var(--safe-top)); padding-bottom: max(12px, var(--safe-bottom)); }
  .brand { padding-bottom: 12px; }
  .rail-scroll, .rail-extra-inner { gap: 4px; }
  .rail-scroll { margin-top: 0; }
  #mobile-rail .mnav-item, #mobile-rail .rail-more { min-height: 44px; }
}
/* B (max-width:460px){.main{padding:18px 12px 88px} .topline{margin-bottom:16px}} */
@media (max-width: 460px) {
  #app-shell { padding: max(18px, calc(var(--safe-top) + 10px)) max(12px, var(--safe-right)) calc(88px + var(--safe-bottom)) max(12px, var(--safe-left)); }
  #app-shell #topbar { margin-bottom: 16px; gap: 12px; }
  #demo-pill { right: 12px; }
  .demo-pill-text { display: none; }
  .demo-pill-short { display: inline; }
}

/* 긴 서비스 브랜드와 검색·알림·프로필·더보기 버튼을 함께 보존한다. 비대화형 날짜만 접는다. */
@media (max-width: 420px) { #topline-date { display: none; } }
@media (max-width: 360px) { .mobile-brand .brand-wordmark { width: 110px; } }