/* 🧭 The dashboard's frame — design B (Julian 2026-10-18): side menu · top row · phone bars (shell.js).
   Colours, sizes and the font are app.css's design values (one list); this file only places the frame.
   Widths: ≥ 1280 px the menu is open or folded (the person's choice, kept per device); 601–1279 px the folded strip,
   which opens over the page; ≤ 600 px the phone frame (top bar · bottom bar · 메뉴 sheet). */

/* --- no blink when a page loads: the menu stays still, only the page changes (Chrome 126+, Safari 18.2+; others just load).
   The team's pages are all inside the main app since design B step 5 — this still serves the pages that load: the 세무사's
   three (지급신고 · 세금계산서 · 통장 · 카드), a partner's 쇼 ⇄ 내 정보, a space switch, a plain link inside a page. */
@view-transition { navigation: auto; }
.side { view-transition-name: wave-side; }
.shell-bottom { view-transition-name: wave-bottom; }
::view-transition-group(wave-side), ::view-transition-old(wave-side), ::view-transition-new(wave-side),
::view-transition-group(wave-bottom), ::view-transition-old(wave-bottom), ::view-transition-new(wave-bottom) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 90ms; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

.skip-link { position: fixed; z-index: 100; left: 8px; top: -60px; padding: 8px 14px; border-radius: var(--radius-sm); background: var(--ink); color: var(--on-ink); text-decoration: none; }
.skip-link:focus { top: 8px; }
.top__fallback { display: flex; align-items: center; gap: 8px; padding: 8px 16px; }   /* (no menu data: shell.js's plain bar) */
.top__fallback .hello { margin-left: auto; }

/* --- the room for the menu (also before shell.js has run: html.shell-pre is set in <head> by the server's boot line) --- */
.side, .shell-bottom, .shell-sheet, .shell-sheet__back, .shell-pop { display: none; }
@media (min-width: 601px) {
  html:is(.shell, .shell-pre) body { padding-left: var(--side-w); }
  html:is(.shell, .shell-pre).shell-rail body { padding-left: var(--side-rail); }
  html.shell-pre:not(.shell) body::before { content: ''; position: fixed; z-index: 35; inset: 0 auto 0 0; width: var(--side-w); background: var(--side-bg); border-right: 1px solid var(--line); }
  html.shell-pre.shell-rail:not(.shell) body::before { width: var(--side-rail); }
  html.shell .side { display: flex; }
}

/* --- the side menu ---------------------------------------------------------------------------------------------------- */
.side { flex-direction: column; gap: 8px; position: fixed; z-index: 35; inset: 0 auto 0 0; width: var(--side-w); box-sizing: border-box;
  padding: 12px 10px 10px; background: var(--side-bg); border-right: 1px solid var(--line); overflow: hidden; font-size: var(--fs-md); }
.side > * { flex: none; }   /* (only the menu in the middle gives up room on a short window — the top and bottom keep theirs) */
html.shell-rail .side { width: var(--side-rail); padding-inline: 0; gap: 4px; }
html.shell-rail.shell-float .side { width: var(--side-w); padding-inline: 10px; gap: 8px; box-shadow: var(--shadow-pop); }

.side__head { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 0 2px 6px; }
.side__logo { display: flex; align-items: center; flex: none; min-height: 32px; border-radius: var(--radius-sm); }
.side__logo-img { height: 26px; width: auto; }   /* (601 × 171: 26 px high = 91 px wide) */
.side__logo .side__w { display: none; width: 28px; height: auto; }
.side .bell.side__icon { position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; min-height: 32px; padding: 0; margin-left: auto;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; }
.side .bell.side__icon:hover { background: var(--side-hover); color: var(--text); }
.side .bell .bell-count { top: -2px; right: -3px; }

.side__add-wrap { padding: 0 2px; }
.side__add.btn { display: flex; width: 100%; min-height: 36px; justify-content: center; gap: 6px; padding: 6px 12px; font-size: var(--fs-md); border-radius: var(--radius-sm); box-shadow: none; }
.side__add .fab__plus .ic { width: 16px; height: 16px; }
.side__add[hidden] { display: none; }
.side__add .side__label { flex: none; }   /* (the word next to its ＋, on the main app's <button> as on a separate page's <a>) */
html.shell .side__add.fab { box-shadow: none; }

.side__navwrap { position: relative; flex: 1 1 auto !important; min-height: 0; display: flex; }
.side__nav { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 2px 0 6px; overflow: hidden auto; scrollbar-width: none;
  --fade-t: 0px; --fade-b: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-t), #000 calc(100% - var(--fade-b)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-t), #000 calc(100% - var(--fade-b)), transparent 100%); }
.side__nav::-webkit-scrollbar { display: none; }
.side--more-up .side__nav { --fade-t: 28px; }
.side--more-down .side__nav { --fade-b: 28px; }
.side__more { position: absolute; left: 50%; z-index: 1; display: none; place-items: center; width: 36px; height: 20px; padding: 0; transform: translateX(-50%);
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--muted); cursor: pointer; box-shadow: var(--shadow); }
.side__more .ic { width: 14px; height: 14px; }
.side__more--up { top: 0; }
.side__more--up .ic { transform: rotate(180deg); }
.side__more--down { bottom: 2px; }
.side--more-up .side__more--up, .side--more-down .side__more--down { display: grid; }

.side__spacetitle { padding: 2px 10px 0; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.side__group { display: flex; flex-direction: column; gap: 1px; }
.side__item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; box-sizing: border-box; padding: 0 10px; margin: 0;
  border: 0; border-radius: 7px; background: none; color: var(--side-text); text-decoration: none; font: inherit; font-size: var(--fs-md); text-align: left; cursor: pointer; }
.side__item:hover { background: var(--side-hover); color: var(--text); }
.side__item:focus-visible, .side__group > summary:focus-visible, .side__logo:focus-visible { outline: none; box-shadow: var(--ring); }
.side__item .ic { width: 17px; height: 17px; flex: none; color: var(--muted); }
.side__item[aria-current="page"] { background: var(--side-on); color: var(--text); font-weight: 600; }
.side__item[aria-current="page"] .ic { color: var(--orange); }
.side__label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side__count { flex: none; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.side__count--red { color: var(--red); }
.side__count[hidden] { display: none; }
.side__item .side__ext { width: 12px; height: 12px; opacity: .7; transform: rotate(-45deg); }
/* a titled group folds on its title (like Notion): ⌄ open, › folded */
.side__group > summary.side__title { display: flex; align-items: center; gap: 4px; list-style: none; cursor: pointer; user-select: none; border-radius: 6px; padding: 3px 10px; margin-bottom: 1px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.side__group > summary.side__title::-webkit-details-marker { display: none; }
.side__group > summary.side__title:hover { background: var(--side-hover); color: var(--text); }
.side__group > summary.side__title .ic { width: 12px; height: 12px; color: var(--muted); transition: transform .15s; }
.side__group:not([open]) > summary.side__title .ic { transform: rotate(-90deg); }

.side__foot { display: flex; flex-direction: column; gap: 1px; width: 100%; padding-top: 8px; border-top: 1px solid var(--line); }
.side__space .side__spaceimg { width: 18px; height: auto; flex: none; }
.side__emoji { font-size: var(--fs-md); line-height: 16px; width: 17px; text-align: center; flex: none; }
.side__item .side__updown { width: 14px; height: 14px; }
.side__me { position: static; width: 100%; }
.side__me > summary { list-style: none; }
.side__me > summary::-webkit-details-marker { display: none; }
.side__me .usermenu__face { width: 22px; height: 22px; margin-left: -2px; flex: none; }
.side__me .hello { color: inherit; font-size: var(--fs-md); }
.side__me .usermenu__menu { position: fixed; z-index: 60; top: auto; right: auto; }
.side__toggle { color: var(--muted); }
.side__toggle .side__tg-rail { display: none; }
.side__tg-open, .side__tg-rail { display: inline-flex; }

/* folded: one column of identical 44 × 36 boxes on the strip's centre line; the words as tooltips */
html.shell-rail:not(.shell-float) .side__head { flex-direction: column; gap: 4px; padding: 0; }
html.shell-rail:not(.shell-float) .side__logo-img { display: none !important; }
html.shell-rail:not(.shell-float) .side__logo .side__w { display: block; }
html.shell-rail:not(.shell-float) .side__logo { justify-content: center; width: 44px; height: 36px; }
html.shell-rail:not(.shell-float) .side .bell.side__icon { margin: 0 auto; width: 44px; height: 36px; }
html.shell-rail:not(.shell-float) .side__add-wrap { display: flex; justify-content: center; padding: 0; }
html.shell-rail:not(.shell-float) .side__add.btn { width: 44px; min-height: 36px; padding: 0; }
html.shell-rail:not(.shell-float) .side__add .fab__label { display: none; }
html.shell-rail:not(.shell-float) .side__nav { gap: 6px; align-items: center; }
html.shell-rail:not(.shell-float) .side__group { align-items: center; width: 100%; }
html.shell-rail:not(.shell-float) .side .side__item { width: 44px; height: 36px; min-height: 36px; padding: 0; margin: 0 auto; gap: 0; justify-content: center; }
html.shell-rail:not(.shell-float) .side__foot { align-items: center; padding-top: 6px; }
html.shell-rail:not(.shell-float) .side__me { width: auto; }
html.shell-rail:not(.shell-float) :is(.side__label, .side__updown, .side__ext, .side__spacetitle) { display: none; }
html.shell-rail:not(.shell-float) .side__me .usermenu__face { margin: 0; }
html.shell-rail:not(.shell-float) .side__me > summary > .ic:first-child:not([style*="none"]) { margin: 0; }
html.shell-rail:not(.shell-float) .side__group > summary.side__title { font-size: 0; width: 28px; height: 1px; min-height: 0; margin: 3px auto 4px; padding: 0; background: var(--line); pointer-events: none; }
html.shell-rail:not(.shell-float) .side__group > summary.side__title .ic { display: none; }
html.shell-rail:not(.shell-float) .side__count { position: absolute; top: 6px; right: 8px; width: 7px; height: 7px; padding: 0; border-radius: 50%; background: var(--muted); font-size: 0; }
html.shell-rail:not(.shell-float) .side__count--red { background: var(--red); }
html.shell-rail:not(.shell-float) .side .bell .bell-count { top: 2px; right: 4px; }
html.shell-rail:not(.shell-float) .side__toggle .side__tg-open { display: none; }
html.shell-rail:not(.shell-float) .side__toggle .side__tg-rail { display: inline-flex; }

/* --- the space switch (and the phone's W ⌄): a small menu, like 🔔 --------------------------------------------------------- */
html.shell .shell-pop:not([hidden]) { display: grid; }
.shell-pop { position: fixed; z-index: 70; min-width: 240px; max-width: calc(100vw - 20px); gap: 1px; padding: 6px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.shell-pop__title { padding: 6px 10px 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.shell-pop__item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text);
  font: inherit; font-size: var(--fs-md); text-align: left; cursor: pointer; }
.shell-pop__item:hover { background: var(--side-hover); }
.shell-pop__item:focus-visible { outline: none; box-shadow: var(--ring); }
.shell-pop__item[aria-current="true"] { font-weight: 600; background: var(--side-bg); }
.shell-pop__label { flex: 1 1 auto; }
.shell-pop__item img { width: 18px; height: auto; flex: none; }
.shell-pop__item .ic { width: 16px; height: 16px; color: var(--muted); flex: none; }
.shell-pop__item[aria-current="true"] .ic:last-child { color: var(--orange); }
.shell-pop__wip { font-size: 11px; font-weight: 400; color: var(--muted); }

/* --- the page's top row: page name · its own tabs · (🕘 🟢) ❓ 사용법 · 🔍 search — one height on every page ---------------- */
html.shell .top { display: flex; align-items: stretch; gap: 0; min-height: var(--top-row); padding: env(safe-area-inset-top) 20px 0 28px; margin: 0;
  background: var(--bg); border-bottom: 1px solid var(--line); backdrop-filter: none; }
html.shell .top > .preview-bar { flex: 1 1 100%; order: -1; margin: 0 -20px 0 -28px; }
/* (the row only wraps on a phone: on a computer the 👁 bar sat in the row beside the page name, covered it and pushed the
   row off the right edge — 2026-10-23. Its own line on top; the tabs take what's left of the row below it, as before.) */
@media (min-width: 601px) { html.shell body.is-preview .top { flex-wrap: wrap; } html.shell body.is-preview .top__tabs { flex-basis: 1px; }   /* (1px, not 0: a 0-wide row still "fits" beside the bar on a page with no name) */
  html.shell .top > .preview-bar { flex-basis: calc(100% + 48px); } }   /* (+ its −48px margins = the whole line: nothing else fits beside it) */
.top__space { display: none; }
.top__crumb { flex: none; display: flex; align-items: center; gap: 6px; height: var(--top-row); padding-right: 14px; font-size: var(--fs-md); color: var(--muted); white-space: nowrap; }
.top__crumb b, .top__crumb .top__title { color: var(--text); font-weight: 600; }
.top__crumb .top__title { margin: 0; font: inherit; font-weight: 600; text-wrap: nowrap; }   /* (the page's heading — styled as the row) */
.top__crumb-sep { color: var(--line-strong); }
.top__crumb:not([hidden]) + .top__tabs > nav.tabs:not([hidden]):not(.tabs--covered):not(:empty),
.top__crumb:not([hidden]) + .top__tabs > nav.top__pagetabs { border-left: 1px solid var(--line); }
.top__tabs { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; }
.top__tabs > nav.tabs { flex: 1 1 auto; min-width: 0; max-width: none; height: var(--top-row); margin: 8px 0; height: calc(var(--top-row) - 16px); padding: 0 0 0 10px;
  display: flex; align-items: stretch; gap: 2px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; border-bottom: 0; scrollbar-width: none; }
.top__tabs > nav.tabs::-webkit-scrollbar { display: none; }
.top__tabs > nav.tabs.tabs--covered, .top__tabs > nav.tabs.tabs--solo { display: none; }
/* a row with more tabs than room: a fade at its end says so (it scrolls sideways; the open tab is kept in view) */
.top__tabs > nav.tabs.tabs--more { -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent); mask-image: linear-gradient(to right, black calc(100% - 40px), transparent); }
/* a narrower window: the 🟢 faces fold away and the search box gets smaller, so the tabs keep their room */
@media (min-width: 601px) and (max-width: 1100px) { html.shell .top .presence { display: none; } .top__search .search { width: 180px; } }
.top__tabs > nav.top__hub:not([hidden]) + nav.tabs:not([hidden]):not(.tabs--solo):not(.tabs--covered):not(:empty) { flex: 0 1 auto; }
.top__tabs > nav.tabs + nav.top__pagetabs:not(.tabs--solo) { border-left: 1px solid var(--line); margin-left: 6px; }
.top__tabs > nav.tabs > :is(a, button, .tab) { flex: none; display: flex; align-items: center; gap: 6px; height: auto; margin: -8px 0; padding: 0 10px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); font-size: var(--fs-md); white-space: nowrap; text-decoration: none; }
.top__tabs > nav.tabs > :is(a, button, .tab):hover { color: var(--text); }
.top__tabs > nav.tabs > [aria-current="page"], .top__tabs > nav.tabs > [aria-current="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--orange); background: none; }
.top__tabs > nav.tabs > [data-usage-tab] { display: none; }   /* (a page's own 사용법 tab: the ❓ 사용법 at the end of the row opens it) */
.top__tabs .count { margin-left: 2px; }
.top__end { flex: none; display: flex; align-items: center; gap: 6px; margin-left: auto; padding-left: 12px; }
.top__help { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--radius-sm); color: var(--muted); font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; }
.top__help .ic { width: 16px; height: 16px; }
.top__help:hover { background: var(--side-hover); color: var(--text); }
.top__help[aria-current] { color: var(--text); font-weight: 600; background: var(--side-on); }
.top__help:focus-visible { outline: none; box-shadow: var(--ring); }
.top__search { display: flex; align-items: center; }
.top__search .search { width: clamp(200px, 20vw, 300px); flex: none; margin: 0; }
.top__search .search .input { width: 100%; min-height: 32px; height: 32px; padding: 4px 10px; font-size: var(--fs-sm); }
.top__find, .top__bellspot, .top__add { display: none; }
.top__chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--radius-sm); color: var(--muted); font-size: var(--fs-sm); cursor: pointer; list-style: none; white-space: nowrap; }
.top__chip::-webkit-details-marker { display: none; }
.top__chip:hover { background: var(--side-hover); color: var(--text); }
.top__chip .ic { width: 15px; height: 15px; }
html.shell .seoulclock > summary::before { content: none; }
html.shell .top .presence { align-self: center; }

/* 🔔 its list opens next to the menu (computer) or under the bar (phone) */
html.shell .bell-panel { top: 12px; left: calc(var(--side-w) + 8px); right: auto; }
html.shell.shell-rail .bell-panel { left: calc(var(--side-rail) + 8px); }
html.shell.shell-rail.shell-float .bell-panel { left: calc(var(--side-w) + 8px); }
/* the name in the open menu at every width (app.css hides .hello on narrow windows for the old header) */
html.shell:not(.shell-rail) .side__me .hello, html.shell.shell-float .side__me .hello { display: block; }
/* a panel open over the page: the page holds still (iOS 15 scrolls it otherwise) */
html.shell-locked, html.shell-locked body { overflow: hidden; }
html.shell-locked body { position: fixed; left: 0; right: 0; }

/* every page uses the width next to the menu (Julian: never capped below the old header; wider when it needs it) */
html.shell main, html.shell .app-foot, html.shell :is(.pt, .us, .tm, .fr, .hub-wrap) { max-width: none; }
html.shell main { padding-left: 28px; padding-right: 28px; }
@media (max-width: 1279px) { html.shell main { padding-left: 20px; padding-right: 20px; } }   /* (the folded strip's width: the page keeps its room) */
html.shell .wip-banner { width: auto; max-width: none; margin: 12px 28px 0; }
@media (min-width: 601px) and (max-width: 1279px) { html.shell .wip-banner { margin-inline: 20px; } }
html.shell .sheet-page { width: auto; margin-left: 0; }
html.shell main:is(.pt.bk, .pt.cd), html.shell main:has(.sheet-page) { padding-left: 16px; padding-right: 16px; }

/* --- phones ------------------------------------------------------------------------------------------------------------ */
@media (max-width: 600px) {
  html.shell .top { flex-wrap: wrap; align-items: center; padding: env(safe-area-inset-top) 4px 0 8px; min-height: 0; }
  html.shell .top > .preview-bar { margin: 0 -4px 0 -8px; }
  .top__space { order: 0; display: flex; align-items: center; gap: 2px; height: 44px; margin: 4px 2px 4px 0; padding: 0 4px 0 6px; border: 0; border-radius: 10px; background: none; color: var(--text); cursor: pointer; }
  .top__space[aria-expanded="true"] { background: var(--side-on); }
  .top__space img { width: 26px; height: auto; display: block; }
  .top__space .top__space-chev { width: 14px; height: 14px; }
  .top__crumb { order: 1; flex: 1 1 0; min-width: 0; height: 52px; padding: 0 0 0 4px; font-size: 18px; }
  .top__crumb :is(.top__crumb-part, .top__crumb-sep) { display: none; }
  .top__crumb b, .top__crumb .top__title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; min-width: 0; }   /* (a long name — a show's section, 「통장 · 카드 (세무사 화면)」 — ran under 🔍 🔔) */
  .top__end { display: contents; }
  .top__help, html.shell .top .presence, html.shell .seoulclock { display: none; }
  .top__find { order: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; color: var(--text); cursor: pointer; }
  .top__find[aria-expanded="true"] { background: var(--side-on); }
  .top__find[hidden] { display: none; }
  .top__bellspot { order: 3; display: flex; }
  /* ＋ 문의 추가 / ＋ 일 등록 at the right end, after 🔍 · 🔔 (Julian 2026-10-18): a small ink square; the tap area is 44 px */
  /* (8 px more before it: the square is wider than the icons, so the same spacing looked tighter next to 🔔 — Julian 2026-10-18) */
  .top__add { order: 4; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 2px 0 8px; padding: 5px; border: 0; border-radius: 14px;
    background: var(--ink); background-clip: content-box; color: var(--on-ink); cursor: pointer; }
  .top__add .ic { width: 20px; height: 20px; }
  .top__bellspot .bell { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--text); }
  .top__bellspot .bell .bell-count { top: 6px; right: 4px; }
  .top__search { order: 5; flex: 1 1 100%; padding: 0 4px 8px 0; }
  .top:not(.top--find-open) .top__search { display: none; }
  .top__search .search { width: 100%; }
  .top__search .search .input { height: 40px; min-height: 40px; font-size: 16px; }   /* (16 px: iPhones don't zoom in) */
  .top__tabs { order: 4; flex: 1 1 100%; margin: 0 -4px 0 -8px; border-top: 1px solid var(--line); }
  .top__tabs.top__tabs--empty { display: none; }   /* (set by shell.js — :has() isn't in iOS 15) */
  .top__tabs { flex-direction: column; }   /* (현황's tabs and a page's own: one row each) */
  .top__tabs > nav.tabs + nav.tabs:not(.tabs--solo) { border-left: 0; margin-left: 0; border-top: 1px solid var(--line); }
  .top__crumb:not([hidden]) + .top__tabs > nav.tabs:not([hidden]) { border-left: 0; }
  /* phones: the page's tabs wrap (고정 · 전체 · 보드 stay in sight — 2026-10-09), 44 px tall to tap */
  .top__tabs > nav.tabs { height: auto; flex-wrap: wrap; overflow: visible; margin: 0; padding: 0 8px; -webkit-mask-image: none; mask-image: none; }
  .top__tabs > nav.tabs > :is(a, button, .tab) { min-height: 44px; margin: 0; padding: 0 10px; font-size: var(--fs-md); }
  .top__tabs > nav.tabs > [data-usage-tab] { display: flex; }   /* (phones: the page's own 사용법 stays a tab — no ❓ in the bar) */

  html.shell .shell-bottom:not([hidden]) { display: grid; }
  .shell-bottom { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: calc(60px + env(safe-area-inset-bottom));
    padding: 0 2px env(safe-area-inset-bottom); background: var(--bg); border-top: 1px solid var(--line); }
  .shell-bottom__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 0; border: 0;
    background: none; color: var(--muted); font: inherit; font-size: 11px; text-decoration: none; cursor: pointer; }
  .shell-bottom__item > span:not(.side__count) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shell-bottom__item .ic { width: 22px; height: 22px; }
  .shell-bottom__item[aria-current="page"], .shell-bottom__menu[data-on] { color: var(--text); font-weight: 600; box-shadow: inset 0 2px 0 var(--orange); }
  .shell-bottom__item[aria-current="page"] .ic, .shell-bottom__menu[data-on] .ic { color: var(--orange); }
  .shell-bottom .side__count { position: absolute; top: 5px; left: calc(50% + 8px); min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: var(--radius-sm);
    background: var(--text); color: var(--bg); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
  .shell-bottom .side__count--red { background: var(--badge-red); color: var(--on-badge); }
  .shell-bottom__menucount { width: 9px !important; min-width: 0 !important; height: 9px !important; padding: 0 !important; top: 8px !important; }
  html.shell main { padding: 12px 12px calc(84px + env(safe-area-inset-bottom)); }
  html.shell .app-foot { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  html.shell .wip-banner { margin: 10px 12px 0; }
  html.shell .bell-panel { top: calc(56px + env(safe-area-inset-top)); left: 8px; right: 8px; width: auto; }

  /* 메뉴: a sheet from the bottom — every group as tiles, numbers as badges (red when something is late, as in the side menu), it scrolls (no 더보기 — Julian 2026-10-18) */
  html.shell .shell-sheet:not([hidden]) { display: flex; }
  html.shell .shell-sheet__back:not([hidden]) { display: block; }
  .shell-sheet__back { position: fixed; inset: 0; z-index: 80; background: var(--backdrop); }
  .shell-sheet { position: fixed; z-index: 81; left: 0; right: 0; bottom: 0; top: calc(48px + env(safe-area-inset-top)); flex-direction: column; background: var(--surface);
    border-radius: 16px 16px 0 0; box-shadow: var(--shadow-pop); padding-bottom: env(safe-area-inset-bottom); }
  .shell-sheet__grip { align-self: center; width: 36px; height: 4px; margin-top: 8px; border-radius: 2px; background: var(--line-strong); }
  .shell-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 4px 18px; }
  .shell-sheet__head img { height: 22px; width: auto; }
  .shell-sheet__close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; color: var(--muted); }
  .shell-sheet__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 16px 12px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }
  .shell-sheet__group h2 { margin: 0 0 6px; padding: 0 2px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
  .shell-sheet__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .shell-sheet__tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 68px; padding: 6px 4px;
    border-radius: 10px; background: var(--surface-2); color: var(--text); font-size: var(--fs-sm); font-weight: 500; line-height: 1.25; text-align: center; text-decoration: none; word-break: keep-all; }
  .shell-sheet__tile .ic { width: 22px; height: 22px; color: var(--side-text); }
  .shell-sheet__tile[aria-current="page"] { background: var(--orange-soft); font-weight: 700; }
  .shell-sheet__tile[aria-current="page"] .ic { color: var(--orange); }
  .shell-sheet__tile .side__count { position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px;
    background: var(--text); color: var(--bg); font-size: 11px; font-weight: 700; line-height: 18px; }
  .shell-sheet__tile .side__count--red { background: var(--badge-red); color: var(--on-badge); }
  .shell-sheet__clock { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-sm); color: var(--muted); }
  .shell-sheet__clock .ic { width: 15px; height: 15px; }
  .shell-sheet__person { display: flex; align-items: center; gap: 4px; padding: 8px 12px 4px; border-top: 1px solid var(--line); }
  .shell-sheet__me { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 6px; color: var(--text); text-decoration: none; min-width: 0; }
  .shell-sheet__me > span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
  .shell-sheet__me small { color: var(--muted); font-size: var(--fs-xs); }
  .shell-sheet__face { width: 32px; height: 32px; }
  .shell-sheet__help { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--side-text); text-decoration: none; }
  .shell-sheet__actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 12px; }
  .shell-sheet__actions button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
    color: var(--text); font: inherit; font-size: var(--fs-md); }
  .shell-sheet__actions .ic { width: 16px; height: 16px; color: var(--muted); }
  html.shell-sheet-open body { overflow: hidden; }
}

/* --- 🔎 search of everything (searchall.js): ⌘K / Ctrl+K, the 「⌘K」 key in the page's search box, 🔍 on phones -------------- */
.find, .find__back { display: none; }
html.find-open .find:not([hidden]) { display: flex; }
html.find-open .find__back:not([hidden]) { display: block; }
html.find-open body { overflow: hidden; }
.find__back { position: fixed; inset: 0; z-index: 90; background: var(--backdrop); }
.find { position: fixed; z-index: 91; top: 10vh; left: 50%; transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); max-height: 76vh; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); overflow: hidden; }
.find__bar { display: flex; align-items: center; gap: 10px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); }
.find__bar > .ic { width: 18px; height: 18px; color: var(--muted); flex: none; }
.find__input { flex: 1 1 auto; min-width: 0; height: 52px; border: 0; outline: none; background: none; color: var(--text); font: inherit; font-size: 16px; }
.find__input::-webkit-search-cancel-button { display: none; }
.find__kbd { flex: none; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font: inherit; font-size: 11px; }
.find__close { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; }
.find__close:hover { background: var(--side-hover); color: var(--text); }
.find__tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.find__tabs::-webkit-scrollbar { display: none; }
.find__tabs[hidden] { display: none; }
.find__tab { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--muted); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.find__tab[aria-selected="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--orange); }
.find__n { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }
.find__list { overflow: auto; padding: 6px; overscroll-behavior: contain; }
.find__group { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.find__all { font-weight: 500; color: var(--muted); text-decoration: none; }
.find__all:hover { color: var(--text); text-decoration: underline; }
.find__item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.find__item[aria-selected="true"] { background: var(--side-on); }
.find__item > .ic { width: 16px; height: 16px; color: var(--muted); flex: none; }
.find__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.find__text b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find__text small { color: var(--muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find mark { background: var(--orange-soft); color: inherit; font-weight: 700; border-radius: 2px; box-shadow: inset 0 -2px 0 var(--orange); }   /* (dark mode: the soft fill alone hardly showed) */
.find__note { margin: 0; padding: 16px; color: var(--muted); font-size: var(--fs-md); }
.find__note[hidden] { display: none; }
/* the 「⌘K」 key at the end of the page's search box */
.search.search--find { position: relative; }
.search--find .input { padding-right: 52px; }
.find-key { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 22px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; }
.find-key:hover { color: var(--text); border-color: var(--line-strong); }
@media (max-width: 600px) {
  /* (the part of the screen above the keyboard — dialogs.js --vvt / --vvh: the lower results went under it) */
  .find { top: var(--vvt, 0px); left: 0; right: 0; bottom: auto; height: var(--vvh, 100%); width: auto; max-height: none; transform: none; border-radius: 0; border: 0;
    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .find__close { width: 44px; height: 44px; }
  .find__tab { height: 44px; }
  .find__all { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
  .find__kbd { display: none; }
  .shell-pop__item { min-height: 44px; }
  .find-key { display: none; }
  .search--find .input { padding-right: 10px; }
}