/* Material hierarchy (2026-10-06, Apple HIG): loaded before components.css and page owners.
   Content layer stays opaque; Liquid Glass is only for floating navigation and controls. */

/* Scroll edge effect above the phone tab bar: content softens as it passes under the bar,
   so the bar reads as a separate layer without a heavy border. */
@media(max-width:600px){
 body.workspace::after{content:"";display:block;position:fixed;left:0;right:0;bottom:0;z-index:calc(var(--layer-navigation) - 1);height:calc(116px + env(safe-area-inset-bottom,0px));pointer-events:none;
  background:linear-gradient(to top,var(--canvas) 0%,color-mix(in srgb,var(--canvas) 72%,transparent) 42%,transparent 100%);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(to top,#000 38%,transparent);mask-image:linear-gradient(to top,#000 38%,transparent)}
 .workspace .mobile-tabbar{outline:0}
}
/* Only the current tab is filled; hover is a faint hint and never looks selected. */
.workspace .mobile-tabbar a:not([aria-current=page]):hover{background:transparent}
@media(hover:hover) and (pointer:fine){.workspace .mobile-tabbar a:not([aria-current=page]):hover{background:color-mix(in srgb,var(--fill-tint) 45%,transparent)}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){body.workspace::after{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(to top,var(--canvas) 55%,transparent)}}

/* Safety news: the count belongs to the list it counts. */
.workspace .news-list>.news-result{margin:0;padding:14px 20px;border-bottom:1px solid var(--rule);font-size:var(--t-footnote);color:var(--ink-2)}
.workspace .news-list>.empty{padding:32px 20px}
.workspace .news-list>.empty h2{margin:0 0 6px;font-family:inherit;font-size:var(--t-title3);font-weight:var(--w-semibold);line-height:var(--lh-title)}
.workspace .news-list>.empty p{margin:0;font-size:var(--t-subhead);color:var(--ink-2)}

/* Tablet (601–1180): one navigation row like iPadOS — logo · tabs · search/profile.
   office.js moves the tab bar into the header row, so it shares the row's centre line on every page. */
@media(min-width:601px) and (max-width:1180px){
 html body.workspace .page-shell>header>.mobile-tabbar{position:relative!important;inset:auto!important;transform:none!important;translate:none!important;z-index:auto;
  display:flex!important;flex:1 1 0;margin-inline:auto;width:auto;max-width:max-content;min-width:0;padding:0!important;gap:2px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;
  background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 html body.workspace .page-shell>header>.mobile-tabbar::-webkit-scrollbar{display:none}
 html body.workspace .page-shell>header>.mobile-tabbar :is(a,button){flex:0 0 auto;flex-direction:row!important;gap:7px;min-height:44px!important;height:44px;min-width:44px;padding:0 12px!important;border-radius:999px}
 html body.workspace .page-shell>header>.mobile-tabbar .nav-text{font-size:14px;font-weight:var(--w-medium)}
 html body.workspace .page-shell>header{min-height:58px}
 html body.workspace .page-shell>main#content{padding-top:var(--portal-main-top-reserve,24px)!important}
 html body.workspace .presentation-library{--library-sticky-top:calc(var(--support-tabs-top,86px) - 2px)}
}
@media(min-width:601px) and (max-width:900px){
 html body.workspace .page-shell>header>.mobile-tabbar>:is(a,button)>.nav-icon{display:none}
 html body.workspace .page-shell>header>.mobile-tabbar :is(a,button){padding:0 10px!important}
}

/* ---------- Liquid Glass control layer (2026-10-06) ----------
   Recipe from production practice: translucent tint + blur 22px + saturate 180%, a gradient rim
   (bright top edge, faint bottom), inner highlight and a soft lifted shadow. Only the floating
   navigation/control layer uses it; cards, lists and tables stay opaque. */
:root{
 /* 2026-10-29 R3: 떠 있는 층의 유리 틴트는 하나(--lg-tint-solid). raised·sheet는 같은 값의 별칭으로 남겨 기존 소유 규칙을 바꾸지 않는다. */
 --lg-tint:rgba(250,253,251,.56);--lg-tint-raised:var(--lg-tint-solid);--lg-tint-sheet:var(--lg-tint-solid);--lg-tint-solid:rgba(250,253,251,.92);
 --lg-rim:linear-gradient(165deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.42) 32%,rgba(255,255,255,.08) 58%,rgba(255,255,255,.55) 100%);
 --lg-inner:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.28),inset 0 -14px 26px -20px rgba(24,52,36,.16);
 --lg-shadow:0 1px 1px rgba(24,52,36,.04),0 10px 28px rgba(24,52,36,.10),0 28px 56px -30px rgba(24,52,36,.22);
 --lg-light:rgba(255,255,255,.55);
 --lg-thumb:rgba(255,255,255,.92);
 --lg-thumb-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(24,52,36,.10),0 6px 14px -6px rgba(24,52,36,.22);
 --lg-spring:cubic-bezier(.34,1.56,.64,1);
 /* Action material (2026-10-25). Opaque faces keep labels readable; a rim,
    top light and short cast shadow distinguish controls without per-row blur.
    Semantic colours resolve through the active light/dark and brand tokens. */
 --control-face:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 88%,var(--fill-tint)));
 --control-hover:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 66%,var(--fill-tint)));
 --control-pressed:linear-gradient(180deg,var(--surface-2),var(--surface));
 --control-line:var(--field-rule);
 --control-quiet-face:linear-gradient(180deg,var(--surface),var(--surface-2));
 --control-quiet-line:var(--rule-strong);
 --control-inner:inset 0 1px 0 var(--glass-highlight),inset 0 -1px 0 var(--shadow-ambient);
 --control-shadow:0 1px 2px var(--shadow-ambient),0 5px 10px -7px var(--shadow-deep);
 --control-shadow-hover:0 2px 3px var(--shadow-ambient),0 7px 14px -8px var(--shadow-deep);
 --control-shadow-pressed:inset 0 2px 3px var(--shadow-key),0 1px 1px var(--shadow-ambient);
 --control-primary-face:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,var(--surface)),var(--accent) 48%,var(--accent-strong));
 --control-primary-hover:linear-gradient(180deg,var(--accent),var(--accent-strong));
 --control-primary-pressed:linear-gradient(180deg,var(--accent-strong),var(--accent));
 --control-selected-face:linear-gradient(180deg,color-mix(in srgb,var(--surface) 40%,var(--fill-tint)),var(--fill-tint));
 --control-selected-hover:linear-gradient(180deg,var(--fill-tint),color-mix(in srgb,var(--fill-tint) 88%,var(--accent)));
 --control-danger-face:linear-gradient(180deg,var(--surface),var(--danger-bg));
 --control-danger-hover:linear-gradient(180deg,color-mix(in srgb,var(--surface) 50%,var(--danger-bg)),var(--danger-bg));
 --control-danger-pressed:linear-gradient(180deg,var(--danger-bg),var(--surface));
}
@media(prefers-color-scheme:dark){:root{
 --lg-tint:rgba(28,38,33,.52);--lg-tint-raised:var(--lg-tint-solid);--lg-tint-sheet:var(--lg-tint-solid);--lg-tint-solid:rgba(28,38,33,.93);
 --lg-rim:linear-gradient(165deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.10) 34%,rgba(255,255,255,.03) 60%,rgba(255,255,255,.14) 100%);
 --lg-inner:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.04),inset 0 -14px 26px -20px rgba(0,0,0,.5);
 --lg-shadow:0 1px 1px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35),0 28px 56px -30px rgba(0,0,0,.6);
 --lg-light:rgba(255,255,255,.16);
 --lg-thumb:rgba(255,255,255,.14);
 --lg-thumb-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.4),0 6px 14px -6px rgba(0,0,0,.6);
}}
/* 신영씨앤디 시연 테스트 모드: 유리 소재의 색조만 푸른 계열로. 두께·블러·테두리 구조는 위와 같다. 값은 design-tokens.css의 같은 이름 테마와 짝이다. */
:root[data-portal-theme="shinyoung"]{
 --lg-tint:rgba(248,251,255,.56);--lg-tint-raised:var(--lg-tint-solid);--lg-tint-sheet:var(--lg-tint-solid);--lg-tint-solid:rgba(248,251,255,.92);
 --lg-inner:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.28),inset 0 -14px 26px -20px rgba(24,48,86,.16);
 --lg-shadow:0 1px 1px rgba(24,48,86,.04),0 10px 28px rgba(24,48,86,.10),0 28px 56px -30px rgba(24,48,86,.22);
 --lg-thumb-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(24,48,86,.10),0 6px 14px -6px rgba(24,48,86,.22);
}
@media(prefers-color-scheme:dark){:root[data-portal-theme="shinyoung"]{
 --lg-tint:rgba(23,32,44,.52);--lg-tint-raised:var(--lg-tint-solid);--lg-tint-sheet:var(--lg-tint-solid);--lg-tint-solid:rgba(23,32,44,.93);
 --lg-inner:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.04),inset 0 -14px 26px -20px rgba(0,0,0,.5);
 --lg-shadow:0 1px 1px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35),0 28px 56px -30px rgba(0,0,0,.6);
 --lg-thumb-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.4),0 6px 14px -6px rgba(0,0,0,.6);
}}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 html body.workspace :is(.sidebar,.page-shell>header),html body.workspace>.mobile-tabbar{
  background:var(--lg-tint-raised)!important;border:0!important;outline:0!important;box-shadow:var(--lg-inner),var(--lg-shadow)!important;
  -webkit-backdrop-filter:blur(22px) saturate(180%)!important;backdrop-filter:blur(22px) saturate(180%)!important;
  transition:background-color var(--dur-state) var(--ease-standard),box-shadow var(--dur-state) var(--ease-standard)}
 /* Scrolled: the bar thickens a little so text under it never competes with its controls. */
 html body.workspace.is-scrolled .page-shell>header{background:var(--lg-tint-solid)!important}
 html body.workspace :is(#office-menu,.office-jump){background:var(--lg-tint-sheet)!important;
  -webkit-backdrop-filter:blur(30px) saturate(170%)!important;backdrop-filter:blur(30px) saturate(170%)!important;box-shadow:var(--lg-inner),var(--lg-shadow)!important}
 html body.workspace #office-menu::backdrop{background:rgba(16,32,24,.22)}
 /* Keep the menu's stronger filter out of reduced/system-colour modes instead
    of making their generic dialog fallback compete with this ID selector. */
 @media(prefers-reduced-transparency:no-preference) and (prefers-contrast:no-preference) and (forced-colors:none){
  html body.workspace #office-menu::backdrop{-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}
 }
}
/* Gradient rim light, drawn as a 1px ring that follows each bar's own radius. */
html body.workspace :is(.sidebar,.page-shell>header,#office-menu),html body.workspace>.mobile-tabbar{isolation:isolate}
html body.workspace :is(.sidebar,.page-shell>header,#office-menu)::before,html body.workspace>.mobile-tabbar::before{
 content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;pointer-events:none;background:var(--lg-rim);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* A soft highlight that follows the pointer on desktop (office.js sets --lx/--ly). */
html body.workspace :is(.sidebar,.page-shell>header)::after,html body.workspace>.mobile-tabbar::after{
 content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
 background:radial-gradient(180px circle at var(--lx,50%) var(--ly,0%),var(--lg-light),transparent 70%);transition:opacity 280ms var(--ease-standard)}
html body.workspace :is(.sidebar,.page-shell>header,.mobile-tabbar).is-lit::after{opacity:1}

/* The header owns the navigation surface; the selected thumb keeps its existing material.
   Keep the track's border width and all layout, but lower only its unselected paint. */
html body.workspace .shell-slot .work-area-nav{
 --work-area-track-fill:transparent;--work-area-track-line:transparent;--work-area-track-ring:none;
 background:var(--work-area-track-fill)!important;border-color:var(--work-area-track-line);box-shadow:var(--work-area-track-ring)!important}
/* Preserve the original track material for contrast/transparency preferences and system colours. */
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more),(forced-colors:active){
 html body.workspace .shell-slot .work-area-nav{
  --work-area-track-fill:color-mix(in srgb,var(--ink) 5%,transparent);--work-area-track-line:var(--rule);
  --work-area-track-ring:inset 0 0 0 .5px color-mix(in srgb,var(--ink) 8%,transparent)}
}

/* Motion: presses compress and spring back; the selected thumb glides between tabs. */
@media(prefers-reduced-motion:no-preference){
 html body.workspace :is(.mobile-tabbar a,.mobile-tabbar button,.work-area-nav a,.shell-action,.ui-icon-button,.hub-button,.office-menu-links>a){
  transition:transform 460ms var(--lg-spring),background-color 200ms var(--ease-standard),box-shadow 200ms var(--ease-standard),color 200ms var(--ease-standard)}
 html body.workspace :is(.mobile-tabbar a,.mobile-tabbar button,.work-area-nav a,.shell-action,.ui-icon-button,.hub-button,.office-menu-links>a):not(:where(:disabled,[aria-disabled="true"],[aria-busy="true"])):active{transform:scale(.94);transition-duration:110ms}
 html body.workspace #office-menu[open]{animation:lg-sheet-in 420ms var(--lg-spring) both}
 html body.workspace #office-menu[open]::backdrop{animation:lg-fade-in 240ms var(--ease-out) both}
}
@keyframes lg-sheet-in{from{opacity:0;transform:translateY(18px) scale(.97)}}
@keyframes lg-fade-in{from{opacity:0}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 :root{
  --control-face:var(--surface);--control-hover:var(--surface-2);--control-pressed:var(--surface-2);
  --control-quiet-face:var(--surface);--control-quiet-line:var(--field-rule);
  --control-primary-face:var(--accent);--control-primary-hover:var(--accent-strong);--control-primary-pressed:var(--accent-strong);
  --control-selected-face:var(--fill-tint);--control-selected-hover:var(--fill-tint);
  --control-danger-face:var(--danger-bg);--control-danger-hover:var(--danger-bg);--control-danger-pressed:var(--danger-bg);
  --control-inner:inset 0 0 0 0 var(--surface);--control-shadow:0 1px 0 var(--rule-strong);
  --control-shadow-hover:0 1px 0 var(--rule-strong);--control-shadow-pressed:inset 0 1px 0 var(--rule-strong);
 }
 html body.workspace :is(.sidebar,.page-shell>header,#office-menu,.office-account-panel,.office-jump),html body.workspace>.mobile-tabbar{background:var(--surface)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 html body.workspace :is(.sidebar,.page-shell>header,.mobile-tabbar)::after{display:none}
}
@media(prefers-contrast:more){:root{--control-line:var(--ink-2);--control-quiet-line:var(--ink-2)}}
@media(forced-colors:active){:root{
 --control-face:ButtonFace;--control-hover:ButtonFace;--control-pressed:ButtonFace;--control-line:ButtonText;
 --control-quiet-face:ButtonFace;--control-quiet-line:ButtonText;
 --control-primary-face:ButtonFace;--control-primary-hover:ButtonFace;--control-primary-pressed:ButtonFace;
 --control-selected-face:Highlight;--control-selected-hover:Highlight;
 --control-danger-face:ButtonFace;--control-danger-hover:ButtonFace;--control-danger-pressed:ButtonFace;
 --control-inner:inset 0 0 0 0 ButtonFace;--control-shadow:0 0 0 0 ButtonFace;
 --control-shadow-hover:0 0 0 0 ButtonFace;--control-shadow-pressed:inset 0 0 0 0 ButtonFace;
}}

/* ---------- One material per layer, site-wide (2026-10-06) ----------
   Replaces 9 card shadow recipes, 4 glass recipes and hard-coded overlay shadows with tokens
   that follow light/dark mode. */
:root{
 --card-line:color-mix(in srgb,var(--rule) 85%,transparent);
 --card-shadow:0 1px 2px var(--shadow-ambient),0 6px 16px -10px var(--shadow-key);
 --card-shadow-lift:0 2px 4px var(--shadow-ambient),0 14px 30px -14px var(--shadow-key);
 --overlay-shadow:0 2px 6px var(--shadow-ambient),0 24px 64px -16px var(--shadow-deep),0 48px 96px -48px var(--shadow-deep);
 --overlay-scrim:color-mix(in srgb,var(--scrim) 80%,transparent);
}

/* Layer 1 · content: opaque surface, one hairline, one soft shadow. */
html body.workspace :is(.card,.hub-panel,.workspace-product,.news-list,.news-article,.calendar-workspace,.feature-card,.table-wrap,.wb-inspector){
 background-color:var(--surface);border:1px solid var(--card-line)!important;box-shadow:var(--card-shadow)!important}
html body.workspace :is(.card,.hub-panel,.news-list,.news-article,.calendar-workspace,.feature-card,.wb-inspector){border-radius:var(--radius-card)!important}
html body.workspace :is(.workspace-product,.table-wrap){border-radius:var(--radius-tile)!important}
/* Tiles: same material, tile radius; only tappable ones lift on hover/press. */
html body.workspace :is(.hub-stats:not(.office-home-metrics)>a,.library-item,.office-launchers>a,.wb-toolbar){background-color:var(--surface);border:1px solid var(--card-line)!important;border-radius:var(--radius-tile)!important;box-shadow:var(--card-shadow)!important;
 transition:box-shadow var(--dur-state) var(--ease-standard),transform 420ms var(--lg-spring),background-color var(--dur-state) var(--ease-standard)}
@media(hover:hover) and (pointer:fine){:where(html body.workspace) :is(.hub-stats:not(.office-home-metrics)>a,.library-item,.office-launchers>a,a.card,.workspace-product>summary):not(:where(:disabled,[aria-disabled="true"],[aria-busy="true"])):hover{box-shadow:var(--card-shadow-lift)}}
@media(prefers-reduced-motion:no-preference){.workspace :is(.hub-stats:where(:not(.office-home-metrics))>a,.library-item,.office-launchers>a,a.card):where(:not(:disabled,[aria-disabled="true"],[aria-busy="true"])):active{transform:scale(.985);transition-duration:110ms}}
/* Nested surfaces never stack shadows: a card inside a card is flat. */
html body.workspace :is(.card,.hub-panel,.news-list,.workspace-product,.calendar-workspace) :is(.card,.hub-panel,.table-wrap){box-shadow:none!important}
html body.workspace .news-list .news-list-item{border-radius:0!important;box-shadow:none!important}

/* Layer 2 · controls floating over content: the same Liquid Glass as the bars. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 /* Keep selectors short and equal in weight so the variants below can override by order. */
 html body.workspace :is(.office-form-actions,.sheet-toolbar-x,.wb-launchbar){
  background:var(--lg-tint-raised)!important;border:0!important;box-shadow:var(--lg-inner),var(--lg-shadow)!important;
  -webkit-backdrop-filter:blur(22px) saturate(180%)!important;backdrop-filter:blur(22px) saturate(180%)!important}
 html body.workspace .mobile-management>:is(summary,nav){
  background:var(--lg-tint-raised)!important;border:0!important;box-shadow:var(--lg-inner),var(--lg-shadow)!important;
  -webkit-backdrop-filter:blur(22px) saturate(180%)!important;backdrop-filter:blur(22px) saturate(180%)!important}
 html body.workspace .library-group>.hub-section-title{background:var(--lg-tint-raised)!important;border:0!important;
  -webkit-backdrop-filter:blur(22px) saturate(180%)!important;backdrop-filter:blur(22px) saturate(180%)!important}
 /* Bars that carry text and several buttons use the thicker (regular) variant so content behind never competes. */
 html body.workspace :is(.wb-launchbar,.office-form-actions){background:var(--lg-tint-solid)!important;-webkit-backdrop-filter:blur(30px) saturate(170%)!important;backdrop-filter:blur(30px) saturate(170%)!important}
 /* Section titles that stick over a list only need the material, not a lifted shadow. */
 html body.workspace .library-group>.hub-section-title{box-shadow:none!important}
}

/* 2026-10-29 R3 저장 띠(양식 아래 저장·취소 줄)는 본문 층: 위 유리 규칙이 읽는 토큰을 이 요소에서만 불투명 2차 배경과 테두리로 바꾼다. */
html body.workspace .office-form-actions{--lg-tint-raised:var(--surface-2);--lg-tint-solid:var(--surface-2);--lg-inner:inset 0 0 0 1px var(--rule-strong);--lg-shadow:0 0 0 0 var(--surface-2)}
/* 강제 색상 모드는 그림자(위 안쪽 1px 경계)를 지운다. 테두리는 유리 규칙이 !important로 0이라 안쪽 윤곽선으로 경계를 그린다. */
@media(forced-colors:active){html body.workspace .office-form-actions{outline:1px solid CanvasText;outline-offset:-1px}}

/* Layer 3 · overlays: one deep shadow, one dimmed and softly blurred backdrop.
   Dialogs with forms stay opaque for legibility; menus and popovers use glass. */
html body.workspace :is(dialog[data-guide],.office-discard-dialog,.calendar-dialog,.cal-detail,.task-assignment-dialog,.wb-download-dialog,.sheet-dialog){
 background-color:var(--surface)!important;border:1px solid var(--card-line)!important;box-shadow:var(--overlay-shadow)!important}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 html body.workspace :is(.pr-manage-menu,.sheet-popover,.office-jump){border:0!important;box-shadow:var(--lg-inner),var(--overlay-shadow)!important;
  background:var(--lg-tint-sheet)!important;-webkit-backdrop-filter:blur(30px) saturate(170%)!important;backdrop-filter:blur(30px) saturate(170%)!important}
}
/* 2026-10-13 유리 위에 유리 금지: 머리 막대(backdrop-filter)가 안쪽 패널의 흐림 기준이 되어, 막대 밖으로
   내려온 계정 메뉴·관리 메뉴는 페이지를 흐리지 못하고 80% 틴트 사이로 뒤 글자가 비쳤다(다크·가로 휴대폰에서 심함).
   막대에서 내려오는 패널은 양식 대화상자처럼 불투명 표면을 쓴다(위 유리 목록에서 계정 패널을 뺐다: :is(#office-menu,…)의
   ID 가중치가 이 규칙을 이겼다). 빠른 이동·전체 메뉴는 최상위(top layer) 대화상자라 흐림이 제대로 걸려 그대로 둔다. */
html body.workspace .page-shell>header :is(.office-account-panel,.mobile-management>nav){
 background:var(--surface)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
 border:1px solid var(--card-line)!important;box-shadow:var(--overlay-shadow)!important}
html body.workspace dialog::backdrop{background:var(--overlay-scrim)!important;-webkit-backdrop-filter:blur(4px) saturate(115%);backdrop-filter:blur(4px) saturate(115%)}
/* Notifications float above everything with the same overlay depth. */
html body.workspace :is(.office-navigation-status,.cal-feedback,.task-assignment-notice,.pr-toast){box-shadow:var(--overlay-shadow)!important}

@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 html body.workspace .library-group>.hub-section-title{background:var(--surface)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 html body.workspace :is(.office-form-actions,.sheet-toolbar-x,.wb-launchbar,.mobile-management summary,.mobile-management nav,.pr-manage-menu,.sheet-popover){background:var(--surface)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more),(forced-colors:active){html body.workspace dialog::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(forced-colors:active){html body.workspace dialog::backdrop{--overlay-scrim:Canvas}}
@media(forced-colors:active){html body.workspace :is(.card,.hub-panel,.workspace-product,.news-list,.table-wrap,.hub-stats>a,.library-item){box-shadow:none!important;border:1px solid CanvasText!important}}

/* ---------- Page transitions without ghosting (frame-measured 2026-10-06) ----------
   Capturing the sidebar, header and tab bar as their own view-transition snapshots drew the old
   and new copies on top of each other (both with animation:none) for the whole transition, and
   snapshots lose live backdrop blur. The frame stays live instead; only the selection indicator
   cross-fades while it glides. */
html body.workspace :is(.sidebar,.page-shell>header,.mobile-tabbar){view-transition-name:none!important}
::view-transition-group(office-nav-current),::view-transition-group(office-tab-current),::view-transition-group(office-segment-current){animation-duration:300ms;animation-timing-function:cubic-bezier(.32,.72,0,1)}
::view-transition-old(office-nav-current),::view-transition-old(office-tab-current),::view-transition-old(office-segment-current){animation:lg-vt-out 160ms ease-out both;mix-blend-mode:normal;height:100%}
::view-transition-new(office-nav-current),::view-transition-new(office-tab-current),::view-transition-new(office-segment-current){animation:lg-vt-in 220ms ease-out both;mix-blend-mode:normal;height:100%}
@keyframes lg-vt-out{to{opacity:0}}
@keyframes lg-vt-in{from{opacity:0}}

/* ---------- One frame geometry on every page ----------
   The calendar used its own header/sidebar sizes, and wide screens wrapped the area switcher onto a
   second row, so the bar grew and shrank between pages. */
@media(min-width:1181px){
 html body.workspace>.sidebar,html body.workspace.is-calendar-workspace>.sidebar{inset:14px auto 14px 14px!important;width:232px!important;border-radius:28px!important}
 /* The calendar pinned its page frame to 256px; every page uses sidebar + 42px (side margins come from system.css). */
 html body.workspace.is-calendar-workspace:not(.office-nav-collapsed) .page-shell{margin-left:calc(var(--native-sidebar) + 42px)!important}
 html body.workspace .page-shell>header,html body.workspace.is-calendar-workspace .page-shell>header{position:sticky!important;top:14px!important;margin-top:14px!important;margin-bottom:0!important;
  padding:10px 14px!important;height:auto!important;min-height:64px!important;flex-wrap:nowrap!important;row-gap:0!important;border-radius:30px!important}
 /* The area switcher keeps the same centre whether or not the page has an action button. */
 html body.workspace .page-shell>header .shell-slot,html body.workspace.is-calendar-workspace .page-shell>header .shell-slot{order:0!important;flex:1 1 auto!important;display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;min-width:0}
 html body.workspace .page-shell>header .shell-slot>.work-area-nav{grid-column:2;width:auto!important;max-width:100%}
 html body.workspace .page-shell>header .shell-slot>.shell-action{grid-column:3;justify-self:end}
 /* Workspace destinations reserve 32px artwork inside real 44px targets.
    The 46px border-box track includes a 1px border above/below; the PC rule below removes block padding. */
 html body.workspace .page-shell>header .work-area-nav{box-sizing:border-box;padding:4px!important;min-height:0!important;height:46px;align-items:center}
 html body.workspace .page-shell>header .work-area-nav a{box-sizing:border-box;min-height:44px!important;height:44px;padding-block:0!important}
}
/* The account menu is a <details>; the portal's default details margin (18px) made the bar 100px tall
   on every page except the calendar, which forced 64px. */
html body.workspace .page-shell>header>*{margin-block:0!important}
/* Tablet and phone: Home (dashboard.css) and the calendar had their own header margins, padding and
   heights. One set for every page; side margins stay with system.css. */
@media(min-width:601px) and (max-width:1180px){
 html body.workspace .page-shell>header,html body.workspace.is-calendar-workspace .page-shell>header,html body.workspace:has(.office-dashboard) .page-shell>header{
  height:auto!important;min-height:64px!important;padding:10px 12px!important;margin-top:10px!important;border-radius:26px!important;width:auto!important;max-width:none!important}
 html body.workspace.is-calendar-workspace .page-shell>header{flex-wrap:wrap!important}
 /* Second row: the switcher keeps its own width and stays centred; the action sits at the right edge. */
 html body.workspace .page-shell>header .shell-slot:has(.work-area-nav){display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
 html body.workspace .page-shell>header .shell-slot>.work-area-nav{grid-column:2;width:auto!important;flex:none!important}
 html body.workspace .page-shell>header .shell-slot>.work-area-nav a{flex:0 0 auto!important}
 html body.workspace .page-shell>header .shell-slot>.shell-action{grid-column:3;justify-self:end}
}
@media(max-width:600px){
 html body.workspace .page-shell>header,html body.workspace.is-calendar-workspace .page-shell>header,html body.workspace:has(.office-dashboard) .page-shell>header{
  height:auto!important;min-height:58px!important;padding:8px 9px!important;margin-top:8px!important;width:auto!important;max-width:none!important}
 /* The action slot (44px) is always reserved, so the switcher is the same width on every page. */
 html body.workspace .page-shell>header .shell-slot:has(.work-area-nav){display:grid!important;grid-template-columns:minmax(0,1fr) 44px;gap:8px;align-items:center}
 html body.workspace .page-shell>header .shell-slot>.work-area-nav{grid-column:1;min-width:0}
 /* 2026-10-13 대표 요청: 휴대폰에서 탭 줄 옆에 단추가 없으면(캘린더 '새 일정' 단추가 있는 화면만 제외) 비워 둔 44px 자리까지 탭 줄이 쓴다.
    머리 카드 폭을 다 써서 탭이 모두 보이고, 발주서 탭이 더해진 여섯 개도 360px에서 스크롤 없이 들어간다. */
 html body.workspace .page-shell>header .shell-slot>.work-area-nav:only-child{grid-column:1/-1}
 html body.workspace .page-shell>header .shell-slot>.shell-action{grid-column:2}
}

/* ---------- Review fixes (Codex tablet/desktop pass, 2026-10-06) ---------- */
/* Selection indicator (office.js placeIndicators): only this layer moves; links keep their text in place. */
html body.workspace :is(.sidebar nav,.work-area-nav){position:relative!important}
html body.workspace :is(.sidebar nav,.mobile-tabbar,.work-area-nav) a{position:relative;z-index:1}
/* One selection glide per activation: pressing the link must not shrink its label and icon first. */
html body.workspace :is(.sidebar nav,.mobile-tabbar,.work-area-nav) a:active{transform:none}
html body.workspace :is(.sidebar nav,.mobile-tabbar,.work-area-nav) a[aria-current=page]{background:transparent!important;box-shadow:none!important;view-transition-name:none!important}
html body.workspace .nav-indicator{position:absolute;left:0;top:0;z-index:0;pointer-events:none;opacity:0;
 transition:transform 340ms cubic-bezier(.32,.72,0,1),width 340ms cubic-bezier(.32,.72,0,1),height 340ms cubic-bezier(.32,.72,0,1),opacity 160ms ease-out}
html body.workspace .nav-indicator.is-on{opacity:1}
html body.workspace .sidebar .nav-indicator{background:var(--fill-tint)}
html body.workspace :is(.mobile-tabbar,.work-area-nav) .nav-indicator{background:var(--lg-thumb);box-shadow:var(--lg-thumb-shadow)}
@media(prefers-reduced-motion:reduce){html body.workspace .nav-indicator{transition:none}}

/* The phone-only bottom edge effect must not appear where tabs sit at the top (tablet). */
@media(min-width:601px){html body.workspace::after{display:none!important;content:none!important}}
/* 601–800px is a tablet: keep tablet radii (cards 24, tiles 20, controls 16). */
@media(min-width:601px) and (max-width:800px){:root{--radius-card:24px;--radius-tile:20px;--radius-control:16px}}

/* Calendar month: rows fit the available height instead of 176px each; date links are 44px targets on touch. */
@media(max-width:1180px){
 html body.workspace .calendar-workspace .hub-calendar.month{grid-auto-rows:minmax(96px,auto)}
 html body.workspace .calendar-workspace .hub-calendar.month .hub-day{min-height:96px}
}
@media(pointer:coarse){html body.workspace .hub-calendar.month .hub-day>h2>a:first-child{min-height:44px!important}}

/* Sticky bottom bars never hide the last content: leave room to scroll it above the bar. */
:where(html body.workspace) .presentation-library:where(:has(.wb-launchbar):not(.wb)){padding-bottom:120px}
html body.workspace form:has(>.office-form-actions){padding-bottom:24px}
html body.workspace form:has(>.office-form-actions) .office-form-actions{margin-top:24px}

/* ---------- 2026-10-06 review3: earlier Codex findings ----------
   Selected links no longer carry a view-transition name: the indicator glides on its own
   (office.js placeIndicators), so text and icons stay put instead of sliding over neighbours. */
html body.workspace :is(.sidebar nav a,.mobile-tabbar a,.work-area-nav a)[aria-current=page]{view-transition-name:none!important}
/* The new page is drawn opaque at once; a fade-in let the canvas show through the cards. */
::view-transition-new(office-content){animation:none!important;opacity:1!important}
/* 2026-10-08 nav motion (frame-measured): a named #content became its own transition group, painted
   above the root snapshot that holds the header, sidebar and tab bar. For the whole transition (~300ms)
   the page slid from its old box over the bars (phone tab bar always; header whenever the page was
   scrolled), hiding the selection indicator, which then reappeared at its end point — the "snap at the
   end". With old content hidden and new content shown at once, the group only added that slide. The
   page now swaps in place and the bars stay on top, so the indicator is visible for its whole glide. */
html body.workspace #content{view-transition-name:none!important}
/* Two-row bars full of labels and buttons stay almost opaque on phones (HIG regular variant). */
@media(max-width:600px){html body.workspace .page-shell>header:has(.work-area-nav){background:var(--lg-tint-solid)!important}}
/* The segmented switch keeps its 34px capsule but receives taps across the whole 44px track. */
html body.workspace .page-shell>header .work-area-nav a{position:relative}
/* Placeholder text meets 4.5:1 in both appearances. */
html body.workspace :is(input,textarea)::placeholder{color:var(--ink-3);opacity:1}
/* Narrow bar: the page action collapses to a 44px "+" (office.js fitShellAction) so it never covers
   the centred area switcher; its label stays for screen readers and as a tooltip. */
html body.workspace .page-shell>header .shell-slot.is-tight>.shell-action{width:44px!important;min-width:44px!important;height:44px;min-height:44px!important;padding:0!important;gap:0!important;justify-content:center;border-radius:999px!important}
html body.workspace .page-shell>header .shell-slot.is-tight>.shell-action .shell-action-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html body.workspace .page-shell>header .shell-slot.is-tight>.shell-action kbd{display:none}
/* Last resort if even the "+" does not fit: the switcher shifts left rather than being covered. */
@media(min-width:601px){html body.workspace .page-shell>header .shell-slot:has(.work-area-nav){grid-template-columns:minmax(0,1fr) auto minmax(min-content,1fr)!important}}
/* system.css centres the switcher with position:absolute;left:50% once the bar is ≥1060px. Since the
   indicator needs the switcher position:relative, that left:50% shifted it 272px right at ≥1400px.
   The grid above already centres it at every width, so the old offsets are cleared. */
html body.workspace .page-shell>header .shell-slot>.work-area-nav{left:auto!important;top:auto!important;right:auto!important;translate:none!important}
html body.workspace .page-shell>header .shell-slot.is-compact>.work-area-nav .nav-icon{display:none}

/* ---------- Tablet header balance (2026-10-06) ----------
   Top-level tabs share the first flex row with the logo, search and profile. The zero basis lets them
   reserve the remaining width before wrapped work-area rows are collected; the natural-content cap
   and auto margins keep shorter menus centred. Preserve type, selected paint and touch targets. */
@media(min-width:601px) and (max-width:1180px){
 html body.workspace .page-shell>header>.mobile-tabbar{height:44px!important;min-height:0!important;flex-direction:row!important;align-items:center!important}
 html body.workspace .page-shell>header>.mobile-tabbar :is(a,button){color:var(--ink-2)!important;font-size:15px!important;font-weight:var(--w-medium)!important;padding:0 12px!important}
 html body.workspace .page-shell>header>.mobile-tabbar :is(a,button) .nav-text{font-size:15px!important;font-weight:inherit!important;line-height:1.2}
 html body.workspace .page-shell>header>.mobile-tabbar a[aria-current=page]{color:var(--accent)!important;font-weight:var(--w-semibold)!important}
 html body.workspace .page-shell>header>.mobile-tabbar .nav-indicator{background:var(--fill-tint);box-shadow:none}
 html body.workspace .page-shell>header .work-area-nav a{font-size:15px!important}
}
/* Narrow tablets: both rows drop their icons together so they keep the same visual weight. */
@media(min-width:601px) and (max-width:720px){
 html body.workspace .page-shell>header .work-area-nav .nav-icon{display:none}
}
@media(min-width:721px) and (max-width:900px){
 html body.workspace .page-shell>header>.mobile-tabbar>:is(a,button)>.nav-icon{display:inline-block!important}
}
/* 2026-10-13 휴대폰 업무 공간 탭(이전 규칙: 375px에서 285px가 271px 줄을 넘어 탭 여백 4px로 줄였던 것을 대신함): 360·375px에서 다섯 개(277px)가 256/271px 줄을 넘어 '견적서'가 잘리고,
   견적서 화면만 21px 밀려 있었다. 탭 사이 간격을 없애고(탭 최소 폭 44px은 유지) 탭 줄과 + 단추 사이를 6px로,
   375px 이상은 13px, 그보다 좁으면 12px(탭 라벨 크기)로 해 360·375px에서도 6~8px 여유를 두고 다섯 개가 들어간다.
   남는 폭은 탭이 나눠 갖는다. 더 많아지면(발주서 등) 가로 스크롤 + 넘친 쪽 끝 흐림(office.js data-more-start/end). */
@media(max-width:400px){
 html body.workspace .page-shell>header .shell-slot:has(.work-area-nav){column-gap:6px}
 html body.workspace .page-shell>header .shell-slot .work-area-nav{gap:0!important}
 html body.workspace .page-shell>header .shell-slot .work-area-nav a{flex:1 0 auto!important;padding-inline:3px!important;font-size:13px!important}
}
@media(max-width:374px){html body.workspace .page-shell>header .shell-slot .work-area-nav a{padding-inline:2px!important;font-size:12px!important}}
/* A short fade hints at neighbouring destinations without hiding whole links.
   workspace-nav.js keeps the current/focused destination outside these 20px edges. */
:where(.workspace) .work-area-nav:where([data-draggable],[data-more-start],[data-more-end]){--work-area-mask-start:0px;--work-area-mask-end:0px;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to right,transparent,var(--ink) var(--work-area-mask-start),var(--ink) calc(100% - var(--work-area-mask-end)),transparent);mask-image:linear-gradient(to right,transparent,var(--ink) var(--work-area-mask-start),var(--ink) calc(100% - var(--work-area-mask-end)),transparent)}
:where(.workspace) .work-area-nav[data-more-start]{--work-area-mask-start:20px}
:where(.workspace) .work-area-nav[data-more-end]{--work-area-mask-end:20px}
@media(forced-colors:active){:where(.workspace) .work-area-nav:where([data-draggable],[data-more-start],[data-more-end]){-webkit-mask-image:none;mask-image:none}}

/* 2026-10-13 스크롤 막대를 숨긴 화면(scroll-surfaces.css)에서 잘린 내용이 있음을 알린다.
   PC 사이드바: 아래에 메뉴가 더 있으면(office.js data-more-end) 보이는 아래 끝을 흐린다. 마지막 메뉴가 보이면 사라진다.
   붙박이 기준이 사이드바 안쪽 여백(20px) 안이라 bottom을 -20px로 해 아래 끝까지 덮는다. */
html body.workspace>.sidebar>nav::after{content:"";display:none;position:sticky;bottom:-20px;z-index:2;flex:none;height:64px;margin:-64px -14px 0;pointer-events:none;
 background:linear-gradient(to bottom,transparent,var(--lg-tint-solid) 78%)}
html body.workspace>.sidebar[data-more-end]>nav::after{display:block}
/* 휴대폰 '전체' 메뉴: 길게 스크롤해도 제목과 닫기(×)가 위에 남는다. 뒤로 지나가는 메뉴는 흐려 보인다.
   붙박이 기준이 대화상자 안쪽 여백(office.css: 800px 이하 20px, 그 위 24px) 안이라 그만큼 음수로 해 위 끝에 붙인다.
   아래 10px은 지나가는 메뉴와의 틈이며 음수 여백으로 상쇄해 처음 배치는 그대로다. */
html body.workspace #office-menu>.hub-section-title{position:sticky;top:-24px;z-index:2;margin:-24px -24px -10px;padding:24px 24px 10px;
 background:var(--lg-tint-solid);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
@media(max-width:800px){html body.workspace #office-menu>.hub-section-title{top:-20px;margin:-20px -20px -10px;padding:20px 20px 10px}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 html body.workspace>.sidebar>nav::after{background:linear-gradient(to bottom,transparent,var(--surface) 78%)}
 html body.workspace #office-menu>.hub-section-title{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(forced-colors:active){html body.workspace>.sidebar>nav::after{display:none!important}}

/* PC: the switcher's segments are real 44px targets (site QA contract), filling the 44px track.
   The thumb and hover fill stay a 34px capsule, drawn 5px in from the top and bottom. */
@media(min-width:1181px){
 html body.workspace .page-shell>header .work-area-nav{padding-block:0!important}
 html body.workspace .page-shell>header .work-area-nav a{min-height:44px!important;height:44px}
}
@media(min-width:1181px){
 html body.workspace .page-shell>header .work-area-nav a:not([aria-current=page]):hover{background:transparent!important;color:var(--ink)}
 html body.workspace .page-shell>header .work-area-nav .nav-indicator{background:none!important;box-shadow:none!important}
 html body.workspace .page-shell>header .work-area-nav .nav-indicator::before{content:"";position:absolute;inset:5px 0;border-radius:inherit;background:var(--lg-thumb);box-shadow:var(--lg-thumb-shadow)}
}
/* Sidebar toggle on PC: calendar-only rules (system.css display:block!important, office.css margin 256px)
   outranked the collapsed state, so the button did nothing on the calendar. */
@media(min-width:1181px){
 html body.workspace.office-nav-collapsed>.sidebar,html body.workspace.office-nav-collapsed.is-calendar-workspace>.sidebar{display:none!important}
 html body.workspace.office-nav-collapsed .page-shell,html body.workspace.office-nav-collapsed.is-calendar-workspace .page-shell{margin-left:0!important}
}
/* 팀 업무: 업무 배정은 머리 막대가 아니라 검색창 바로 왼쪽에(같은 묶음으로 오른쪽 끝). */
html body.workspace .hub-toolbar>.hub-toolbar-end{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0}
html body.workspace .hub-toolbar-end>.hub-toolbar-search{margin:0!important}
html body.workspace .hub-toolbar-assign{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;white-space:nowrap}
html body.workspace .hub-toolbar-assign .symbol{width:18px;height:18px}
/* Same condition as the stacked toolbar in system.css (phones, and phones held sideways): one full-width row,
   the search box takes what the button leaves instead of its own 100% width. */
@media(max-width:600px),(max-height:500px) and (max-width:950px){
 html body.workspace .hub-toolbar>.hub-toolbar-end{order:1;width:100%;margin-left:0;align-self:stretch}
 html body.workspace .hub-toolbar-end>.hub-toolbar-search{flex:1 1 auto;width:auto!important;max-width:none;min-width:0}
}
@media(max-width:380px){
 html body.workspace .hub-toolbar-assign{width:44px;padding:0;justify-content:center}
 html body.workspace .hub-toolbar-assign>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* Small phones keep readable labels; allow a second line rather than shrinking type. */
@media(max-width:340px){:where(.workspace .mobile-tabbar) .nav-text{font-size:12px;white-space:normal;overflow-wrap:anywhere}}

/* 2026-10-13: 휴대폰에서 업무 공간 탭이 다 들어가지 않을 때(사내 드라이브·발주서 등으로 탭이 늘어날 때)만
   하단 탭과 같은 짧은 이름으로 바꿔 모든 탭이 보이게 한다(office.js fitAreaLabels가 .is-short를 붙임). 링크 글자는 그대로라 화면 읽기 프로그램은 전체 이름을 읽는다. */
html body.workspace .work-area-nav.is-short a[data-short]>.nav-text{display:none}
html body.workspace .work-area-nav.is-short a[data-short]::after{content:attr(data-short);white-space:nowrap}

/* 2026-10-13 발주서 탭(일곱째)을 더하며: 휴대폰(≤600px) 캘린더의 '새 일정' 단추는 머리 탭 줄 옆이 아니라
   하단 탭 위에 떠 있는 둥근 단추(메일 쓰기 .mail-fab 방식)로 옮긴다. 머리 탭 줄은 단추 자리 없이 카드 폭을 다 쓴다.
   머리 막대는 backdrop-filter라 그 안의 고정 위치 자식이 화면에 붙지 않으므로 단추는 캘린더 본문에 따로 둔다(calendar.html). */
html body.workspace .calendar-fab{display:none}
@media(max-width:600px){
 html body.workspace .page-shell>header .shell-slot>.shell-action{display:none!important}
 html body.workspace .page-shell>header .shell-slot:has(>.shell-action){grid-template-columns:minmax(0,1fr)!important}
 html body.workspace .page-shell>header .shell-slot>.work-area-nav{grid-column:1/-1}
 /* 평소에는 hidden(office.css의 .workspace [hidden]이 !important로 숨김) → 휴대폰 화면에서만 그보다 구체적인 규칙으로 보인다 */
 html body.workspace .calendar-fab[hidden]{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 84px);z-index:31;
  display:inline-flex!important;align-items:center;gap:8px;min-height:56px!important;margin:0;padding:0 22px;border:0;border-radius:18px;
  background:var(--accent);color:var(--on-accent,#fff);font-weight:700;box-shadow:0 6px 18px rgb(0 0 0/.18)}
 html body.workspace .calendar-fab .symbol{width:22px;height:22px}
 /* 가로로 눕힌 휴대폰: 하단 탭이 낮아진다(office.css max-height:500px) */
 @media(max-height:500px){html body.workspace .calendar-fab[hidden]{bottom:calc(env(safe-area-inset-bottom,0px) + 64px);min-height:48px!important}}
}
/* 360px 휴대폰: 일곱 탭 × 최소 44px(누르는 곳) = 308px가 탭 줄 안쪽(300px)보다 9px 넓어 마지막 탭이 잘렸다.
   374px 이하에서만 탭 줄이 머리 카드 안쪽 여백 5px씩을 더 쓰고 탭 줄 안쪽 여백을 3px로 해 312px를 확보한다(첫 줄 로고·단추 자리는 그대로). */
@media(max-width:374px){
 html body.workspace .page-shell>header .shell-slot:has(.work-area-nav){margin-inline:-5px}
 html body.workspace .page-shell>header .shell-slot .work-area-nav{padding:3px!important}
}