/* ═══════════════════════════════════════════════════════════════════════
   Soo's Jour — sketch v0.2 · IBM Carbon Design System v11 (hand-written tokens)
   light = g10 · dark = g100 · UI Shell (header 48 + side nav 256/48) · 2x grid
   Token values: @carbon/themes 11.79.0 (scss/generated/_themes.scss), fetched 2026-08-16.
   Structure: :root(g10) / @media dark :root:not([data-theme=light]) (g100) / :root[data-theme=dark] (g100)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0. Fonts (local, OFL) ─────────────────────────────────────────────── */
@font-face { font-family: "IBM Plex Sans"; src: url(/static/fonts/IBMPlexSans-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(/static/fonts/IBMPlexSans-SemiBold.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans KR"; src: url(/static/fonts/IBMPlexSansKR-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans KR"; src: url(/static/fonts/IBMPlexSansKR-SemiBold.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/static/fonts/IBMPlexMono-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ── 1. Tokens — light (g10) ───────────────────────────────────────────── */
:root {
  color-scheme: light;
  /* spacing (2x grid) */
  --cds-spacing-01: 0.125rem; --cds-spacing-02: 0.25rem; --cds-spacing-03: 0.5rem; --cds-spacing-04: 0.75rem;
  --cds-spacing-05: 1rem; --cds-spacing-06: 1.5rem; --cds-spacing-07: 2rem; --cds-spacing-08: 2.5rem;
  --cds-spacing-09: 3rem; --cds-spacing-10: 4rem; --cds-spacing-11: 5rem; --cds-spacing-12: 6rem; --cds-spacing-13: 10rem;
  /* type families */
  --cds-font-sans: "IBM Plex Sans", "IBM Plex Sans KR", system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --cds-font-mono: "IBM Plex Mono", Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier, monospace;
  /* background */
  --cds-background: #f4f4f4; --cds-background-hover: rgba(141,141,141,.12); --cds-background-active: rgba(141,141,141,.5);
  --cds-background-selected: rgba(141,141,141,.2); --cds-background-selected-hover: rgba(141,141,141,.32);
  --cds-background-inverse: #393939; --cds-background-inverse-hover: #474747; --cds-background-brand: #0f62fe;
  /* layer */
  --cds-layer-01: #ffffff; --cds-layer-02: #f4f4f4; --cds-layer-03: #ffffff;
  --cds-layer-hover-01: #e8e8e8; --cds-layer-hover-02: #e8e8e8; --cds-layer-hover-03: #e8e8e8;
  --cds-layer-active-01: #c6c6c6; --cds-layer-active-02: #c6c6c6; --cds-layer-active-03: #c6c6c6;
  --cds-layer-selected-01: #e0e0e0; --cds-layer-selected-02: #e0e0e0; --cds-layer-selected-03: #e0e0e0;
  --cds-layer-selected-hover-01: #d1d1d1; --cds-layer-selected-hover-02: #d1d1d1; --cds-layer-selected-hover-03: #d1d1d1;
  --cds-layer-accent-01: #e0e0e0; --cds-layer-accent-02: #e0e0e0; --cds-layer-accent-03: #e0e0e0;
  --cds-layer-accent-hover-01: #d1d1d1; --cds-layer-accent-hover-02: #d1d1d1; --cds-layer-accent-hover-03: #d1d1d1;
  --cds-layer-accent-active-01: #a8a8a8; --cds-layer-accent-active-02: #a8a8a8; --cds-layer-accent-active-03: #a8a8a8;
  --cds-layer-selected-inverse: #161616; --cds-layer-selected-disabled: #8d8d8d;
  /* field */
  --cds-field-01: #ffffff; --cds-field-02: #f4f4f4; --cds-field-03: #ffffff;
  --cds-field-hover-01: #e8e8e8; --cds-field-hover-02: #e8e8e8; --cds-field-hover-03: #e8e8e8;
  /* border */
  --cds-border-subtle-00: #c6c6c6; --cds-border-subtle-01: #e0e0e0; --cds-border-subtle-02: #c6c6c6; --cds-border-subtle-03: #e0e0e0;
  --cds-border-subtle-selected-01: #c6c6c6; --cds-border-subtle-selected-02: #c6c6c6; --cds-border-subtle-selected-03: #c6c6c6;
  --cds-border-strong-01: #8d8d8d; --cds-border-strong-02: #8d8d8d; --cds-border-strong-03: #8d8d8d;
  --cds-border-tile-01: #a8a8a8; --cds-border-tile-02: #c6c6c6; --cds-border-tile-03: #a8a8a8;
  --cds-border-interactive: #0f62fe; --cds-border-inverse: #161616; --cds-border-disabled: #c6c6c6;
  /* text */
  --cds-text-primary: #161616; --cds-text-secondary: #525252; --cds-text-placeholder: rgba(22,22,22,.4); --cds-text-helper: #6f6f6f;
  --cds-text-on-color: #ffffff; --cds-text-on-color-disabled: #8d8d8d; --cds-text-inverse: #ffffff; --cds-text-disabled: rgba(22,22,22,.25); --cds-text-error: #da1e28;
  /* link */
  --cds-link-primary: #0f62fe; --cds-link-primary-hover: #0043ce; --cds-link-secondary: #0043ce; --cds-link-inverse: #78a9ff; --cds-link-visited: #8a3ffc;
  /* icon */
  --cds-icon-primary: #161616; --cds-icon-secondary: #525252; --cds-icon-on-color: #ffffff; --cds-icon-inverse: #ffffff; --cds-icon-disabled: rgba(22,22,22,.25); --cds-icon-interactive: #0f62fe;
  /* support */
  --cds-support-error: #da1e28; --cds-support-success: #24a148; --cds-support-warning: #f1c21b; --cds-support-info: #0043ce;
  --cds-support-error-inverse: #fa4d56; --cds-support-success-inverse: #42be65; --cds-support-warning-inverse: #f1c21b; --cds-support-info-inverse: #4589ff;
  /* misc */
  --cds-focus: #0f62fe; --cds-focus-inset: #ffffff; --cds-focus-inverse: #ffffff; --cds-overlay: rgba(0,0,0,.6); --cds-highlight: #d0e2ff; --cds-shadow: rgba(0,0,0,.3); --cds-interactive: #0f62fe;
  /* component: button */
  --cds-button-primary: #0f62fe; --cds-button-primary-hover: #0050e6; --cds-button-primary-active: #002d9c;
  --cds-button-secondary: #393939; --cds-button-secondary-hover: #474747; --cds-button-secondary-active: #6f6f6f;
  --cds-button-tertiary: #0f62fe; --cds-button-tertiary-hover: #0050e6; --cds-button-tertiary-active: #002d9c;
  --cds-button-danger-primary: #da1e28; --cds-button-danger-secondary: #da1e28; --cds-button-danger-hover: #b81921; --cds-button-danger-active: #750e13;
  --cds-button-disabled: #c6c6c6; --cds-button-separator: #e0e0e0;
  /* component: notification */
  --cds-notification-background-info: #edf5ff; --cds-notification-background-error: #fff1f1; --cds-notification-background-success: #defbe6; --cds-notification-background-warning: #fcf4d6;
  /* component: tag */
  --cds-tag-background-gray: #e0e0e0; --cds-tag-color-gray: #161616; --cds-tag-hover-gray: #d1d1d1; --cds-tag-border-gray: #a8a8a8;
  --cds-tag-background-cool-gray: #dde1e6; --cds-tag-color-cool-gray: #121619; --cds-tag-hover-cool-gray: #cdd3da; --cds-tag-border-cool-gray: #a2a9b0;
  --cds-tag-background-warm-gray: #e5e0df; --cds-tag-color-warm-gray: #171414; --cds-tag-hover-warm-gray: #d8d0cf; --cds-tag-border-warm-gray: #ada8a8;
  --cds-tag-background-blue: #d0e2ff; --cds-tag-color-blue: #0043ce; --cds-tag-hover-blue: #b8d3ff; --cds-tag-border-blue: #78a9ff;
  --cds-tag-background-green: #a7f0ba; --cds-tag-color-green: #0e6027; --cds-tag-hover-green: #74e792; --cds-tag-border-green: #42be65;
  --cds-tag-background-red: #ffd7d9; --cds-tag-color-red: #a2191f; --cds-tag-hover-red: #ffc2c5; --cds-tag-border-red: #ff8389;
  --cds-tag-background-purple: #e8daff; --cds-tag-color-purple: #6929c4; --cds-tag-hover-purple: #dcc7ff; --cds-tag-border-purple: #be95ff;
  --cds-tag-background-teal: #9ef0f0; --cds-tag-color-teal: #005d5d; --cds-tag-hover-teal: #57e5e5; --cds-tag-border-teal: #08bdba;
  /* select chevron (icon-primary) */
  --sj-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23161616'><path d='M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z'/></svg>");
  /* UI Shell header zone = g100 in both themes (Carbon inline theme); declared once here, referenced from .hdr */
  --sj-shell-background: #161616; --sj-shell-background-hover: rgba(141,141,141,.16); --sj-shell-background-active: rgba(141,141,141,.4);
  --sj-shell-text-primary: #f4f4f4; --sj-shell-text-secondary: #c6c6c6; --sj-shell-icon-primary: #f4f4f4; --sj-shell-icon-secondary: #c6c6c6;
  --sj-shell-border-subtle: #393939; --sj-shell-border-interactive: #4589ff; --sj-shell-focus: #ffffff; --sj-shell-link-primary: #78a9ff; --sj-shell-layer: #262626;
}
/* ── 1b. Tokens — dark (g100): OS dark unless data-theme=light ─────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cds-background: #161616; --cds-background-hover: rgba(141,141,141,.16); --cds-background-active: rgba(141,141,141,.4);
    --cds-background-selected: rgba(141,141,141,.24); --cds-background-selected-hover: rgba(141,141,141,.32);
    --cds-background-inverse: #f4f4f4; --cds-background-inverse-hover: #e8e8e8; --cds-background-brand: #0f62fe;
    --cds-layer-01: #262626; --cds-layer-02: #393939; --cds-layer-03: #525252;
    --cds-layer-hover-01: #333333; --cds-layer-hover-02: #474747; --cds-layer-hover-03: #636363;
    --cds-layer-active-01: #525252; --cds-layer-active-02: #6f6f6f; --cds-layer-active-03: #8d8d8d;
    --cds-layer-selected-01: #393939; --cds-layer-selected-02: #525252; --cds-layer-selected-03: #6f6f6f;
    --cds-layer-selected-hover-01: #474747; --cds-layer-selected-hover-02: #636363; --cds-layer-selected-hover-03: #5e5e5e;
    --cds-layer-accent-01: #393939; --cds-layer-accent-02: #525252; --cds-layer-accent-03: #6f6f6f;
    --cds-layer-accent-hover-01: #474747; --cds-layer-accent-hover-02: #636363; --cds-layer-accent-hover-03: #5e5e5e;
    --cds-layer-accent-active-01: #6f6f6f; --cds-layer-accent-active-02: #8d8d8d; --cds-layer-accent-active-03: #393939;
    --cds-layer-selected-inverse: #f4f4f4; --cds-layer-selected-disabled: #a8a8a8;
    --cds-field-01: #262626; --cds-field-02: #393939; --cds-field-03: #525252;
    --cds-field-hover-01: #333333; --cds-field-hover-02: #474747; --cds-field-hover-03: #636363;
    --cds-border-subtle-00: #393939; --cds-border-subtle-01: #525252; --cds-border-subtle-02: #6f6f6f; --cds-border-subtle-03: #6f6f6f;
    --cds-border-subtle-selected-01: #6f6f6f; --cds-border-subtle-selected-02: #8d8d8d; --cds-border-subtle-selected-03: #8d8d8d;
    --cds-border-strong-01: #6f6f6f; --cds-border-strong-02: #8d8d8d; --cds-border-strong-03: #a8a8a8;
    --cds-border-tile-01: #525252; --cds-border-tile-02: #6f6f6f; --cds-border-tile-03: #8d8d8d;
    --cds-border-interactive: #4589ff; --cds-border-inverse: #f4f4f4; --cds-border-disabled: rgba(141,141,141,.5);
    --cds-text-primary: #f4f4f4; --cds-text-secondary: #c6c6c6; --cds-text-placeholder: rgba(244,244,244,.4); --cds-text-helper: #a8a8a8;
    --cds-text-on-color: #ffffff; --cds-text-on-color-disabled: rgba(255,255,255,.25); --cds-text-inverse: #161616; --cds-text-disabled: rgba(244,244,244,.25); --cds-text-error: #ff8389;
    --cds-link-primary: #78a9ff; --cds-link-primary-hover: #a6c8ff; --cds-link-secondary: #a6c8ff; --cds-link-inverse: #0f62fe; --cds-link-visited: #be95ff;
    --cds-icon-primary: #f4f4f4; --cds-icon-secondary: #c6c6c6; --cds-icon-on-color: #ffffff; --cds-icon-inverse: #161616; --cds-icon-disabled: rgba(244,244,244,.25); --cds-icon-interactive: #ffffff;
    --cds-support-error: #fa4d56; --cds-support-success: #42be65; --cds-support-warning: #f1c21b; --cds-support-info: #4589ff;
    --cds-support-error-inverse: #da1e28; --cds-support-success-inverse: #24a148; --cds-support-warning-inverse: #f1c21b; --cds-support-info-inverse: #0043ce;
    --cds-focus: #ffffff; --cds-focus-inset: #161616; --cds-focus-inverse: #0f62fe; --cds-overlay: rgba(0,0,0,.6); --cds-highlight: #001d6c; --cds-shadow: rgba(0,0,0,.8); --cds-interactive: #4589ff;
    --cds-button-primary: #0f62fe; --cds-button-primary-hover: #0050e6; --cds-button-primary-active: #002d9c;
    --cds-button-secondary: #6f6f6f; --cds-button-secondary-hover: #5e5e5e; --cds-button-secondary-active: #393939;
    --cds-button-tertiary: #ffffff; --cds-button-tertiary-hover: #f4f4f4; --cds-button-tertiary-active: #c6c6c6;
    --cds-button-danger-primary: #da1e28; --cds-button-danger-secondary: #fa4d56; --cds-button-danger-hover: #b81921; --cds-button-danger-active: #750e13;
    --cds-button-disabled: rgba(141,141,141,.3); --cds-button-separator: #161616;
    --cds-notification-background-info: #262626; --cds-notification-background-error: #262626; --cds-notification-background-success: #262626; --cds-notification-background-warning: #262626;
    --cds-tag-background-gray: #525252; --cds-tag-color-gray: #f4f4f4; --cds-tag-hover-gray: #636363; --cds-tag-border-gray: #8d8d8d;
    --cds-tag-background-cool-gray: #4d5358; --cds-tag-color-cool-gray: #f2f4f8; --cds-tag-hover-cool-gray: #5d646a; --cds-tag-border-cool-gray: #878d96;
    --cds-tag-background-warm-gray: #565151; --cds-tag-color-warm-gray: #f7f3f2; --cds-tag-hover-warm-gray: #696363; --cds-tag-border-warm-gray: #8f8b8b;
    --cds-tag-background-blue: #0043ce; --cds-tag-color-blue: #d0e2ff; --cds-tag-hover-blue: #0053ff; --cds-tag-border-blue: #4589ff;
    --cds-tag-background-green: #0e6027; --cds-tag-color-green: #a7f0ba; --cds-tag-hover-green: #11742f; --cds-tag-border-green: #24a148;
    --cds-tag-background-red: #a2191f; --cds-tag-color-red: #ffd7d9; --cds-tag-hover-red: #c21e25; --cds-tag-border-red: #fa4d56;
    --cds-tag-background-purple: #6929c4; --cds-tag-color-purple: #e8daff; --cds-tag-hover-purple: #7c3dd6; --cds-tag-border-purple: #a56eff;
    --cds-tag-background-teal: #005d5d; --cds-tag-color-teal: #9ef0f0; --cds-tag-hover-teal: #007070; --cds-tag-border-teal: #009d9a;
    --sj-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f4f4f4'><path d='M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z'/></svg>");
  }
}
/* ── 1c. Tokens — dark (g100): data-theme=dark always ──────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --cds-background: #161616; --cds-background-hover: rgba(141,141,141,.16); --cds-background-active: rgba(141,141,141,.4);
  --cds-background-selected: rgba(141,141,141,.24); --cds-background-selected-hover: rgba(141,141,141,.32);
  --cds-background-inverse: #f4f4f4; --cds-background-inverse-hover: #e8e8e8; --cds-background-brand: #0f62fe;
  --cds-layer-01: #262626; --cds-layer-02: #393939; --cds-layer-03: #525252;
  --cds-layer-hover-01: #333333; --cds-layer-hover-02: #474747; --cds-layer-hover-03: #636363;
  --cds-layer-active-01: #525252; --cds-layer-active-02: #6f6f6f; --cds-layer-active-03: #8d8d8d;
  --cds-layer-selected-01: #393939; --cds-layer-selected-02: #525252; --cds-layer-selected-03: #6f6f6f;
  --cds-layer-selected-hover-01: #474747; --cds-layer-selected-hover-02: #636363; --cds-layer-selected-hover-03: #5e5e5e;
  --cds-layer-accent-01: #393939; --cds-layer-accent-02: #525252; --cds-layer-accent-03: #6f6f6f;
  --cds-layer-accent-hover-01: #474747; --cds-layer-accent-hover-02: #636363; --cds-layer-accent-hover-03: #5e5e5e;
  --cds-layer-accent-active-01: #6f6f6f; --cds-layer-accent-active-02: #8d8d8d; --cds-layer-accent-active-03: #393939;
  --cds-layer-selected-inverse: #f4f4f4; --cds-layer-selected-disabled: #a8a8a8;
  --cds-field-01: #262626; --cds-field-02: #393939; --cds-field-03: #525252;
  --cds-field-hover-01: #333333; --cds-field-hover-02: #474747; --cds-field-hover-03: #636363;
  --cds-border-subtle-00: #393939; --cds-border-subtle-01: #525252; --cds-border-subtle-02: #6f6f6f; --cds-border-subtle-03: #6f6f6f;
  --cds-border-subtle-selected-01: #6f6f6f; --cds-border-subtle-selected-02: #8d8d8d; --cds-border-subtle-selected-03: #8d8d8d;
  --cds-border-strong-01: #6f6f6f; --cds-border-strong-02: #8d8d8d; --cds-border-strong-03: #a8a8a8;
  --cds-border-tile-01: #525252; --cds-border-tile-02: #6f6f6f; --cds-border-tile-03: #8d8d8d;
  --cds-border-interactive: #4589ff; --cds-border-inverse: #f4f4f4; --cds-border-disabled: rgba(141,141,141,.5);
  --cds-text-primary: #f4f4f4; --cds-text-secondary: #c6c6c6; --cds-text-placeholder: rgba(244,244,244,.4); --cds-text-helper: #a8a8a8;
  --cds-text-on-color: #ffffff; --cds-text-on-color-disabled: rgba(255,255,255,.25); --cds-text-inverse: #161616; --cds-text-disabled: rgba(244,244,244,.25); --cds-text-error: #ff8389;
  --cds-link-primary: #78a9ff; --cds-link-primary-hover: #a6c8ff; --cds-link-secondary: #a6c8ff; --cds-link-inverse: #0f62fe; --cds-link-visited: #be95ff;
  --cds-icon-primary: #f4f4f4; --cds-icon-secondary: #c6c6c6; --cds-icon-on-color: #ffffff; --cds-icon-inverse: #161616; --cds-icon-disabled: rgba(244,244,244,.25); --cds-icon-interactive: #ffffff;
  --cds-support-error: #fa4d56; --cds-support-success: #42be65; --cds-support-warning: #f1c21b; --cds-support-info: #4589ff;
  --cds-support-error-inverse: #da1e28; --cds-support-success-inverse: #24a148; --cds-support-warning-inverse: #f1c21b; --cds-support-info-inverse: #0043ce;
  --cds-focus: #ffffff; --cds-focus-inset: #161616; --cds-focus-inverse: #0f62fe; --cds-overlay: rgba(0,0,0,.6); --cds-highlight: #001d6c; --cds-shadow: rgba(0,0,0,.8); --cds-interactive: #4589ff;
  --cds-button-primary: #0f62fe; --cds-button-primary-hover: #0050e6; --cds-button-primary-active: #002d9c;
  --cds-button-secondary: #6f6f6f; --cds-button-secondary-hover: #5e5e5e; --cds-button-secondary-active: #393939;
  --cds-button-tertiary: #ffffff; --cds-button-tertiary-hover: #f4f4f4; --cds-button-tertiary-active: #c6c6c6;
  --cds-button-danger-primary: #da1e28; --cds-button-danger-secondary: #fa4d56; --cds-button-danger-hover: #b81921; --cds-button-danger-active: #750e13;
  --cds-button-disabled: rgba(141,141,141,.3); --cds-button-separator: #161616;
  --cds-notification-background-info: #262626; --cds-notification-background-error: #262626; --cds-notification-background-success: #262626; --cds-notification-background-warning: #262626;
  --cds-tag-background-gray: #525252; --cds-tag-color-gray: #f4f4f4; --cds-tag-hover-gray: #636363; --cds-tag-border-gray: #8d8d8d;
  --cds-tag-background-cool-gray: #4d5358; --cds-tag-color-cool-gray: #f2f4f8; --cds-tag-hover-cool-gray: #5d646a; --cds-tag-border-cool-gray: #878d96;
  --cds-tag-background-warm-gray: #565151; --cds-tag-color-warm-gray: #f7f3f2; --cds-tag-hover-warm-gray: #696363; --cds-tag-border-warm-gray: #8f8b8b;
  --cds-tag-background-blue: #0043ce; --cds-tag-color-blue: #d0e2ff; --cds-tag-hover-blue: #0053ff; --cds-tag-border-blue: #4589ff;
  --cds-tag-background-green: #0e6027; --cds-tag-color-green: #a7f0ba; --cds-tag-hover-green: #11742f; --cds-tag-border-green: #24a148;
  --cds-tag-background-red: #a2191f; --cds-tag-color-red: #ffd7d9; --cds-tag-hover-red: #c21e25; --cds-tag-border-red: #fa4d56;
  --cds-tag-background-purple: #6929c4; --cds-tag-color-purple: #e8daff; --cds-tag-hover-purple: #7c3dd6; --cds-tag-border-purple: #a56eff;
  --cds-tag-background-teal: #005d5d; --cds-tag-color-teal: #9ef0f0; --cds-tag-hover-teal: #007070; --cds-tag-border-teal: #009d9a;
  --sj-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f4f4f4'><path d='M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z'/></svg>");
}

/* ── 2. Contextual layer tokens (Carbon <Layer> model) ─────────────────── */
/* level 1 (page): -01 set; --sj-border-on-layer = border for things painted ON the current $layer (data-table rows) */
:root {
  --cds-layer: var(--cds-layer-01); --cds-layer-hover: var(--cds-layer-hover-01); --cds-layer-active: var(--cds-layer-active-01);
  --cds-layer-selected: var(--cds-layer-selected-01); --cds-layer-selected-hover: var(--cds-layer-selected-hover-01);
  --cds-layer-accent: var(--cds-layer-accent-01); --cds-layer-accent-hover: var(--cds-layer-accent-hover-01); --cds-layer-accent-active: var(--cds-layer-accent-active-01);
  --cds-field: var(--cds-field-01); --cds-field-hover: var(--cds-field-hover-01);
  --cds-border-subtle: var(--cds-border-subtle-00); --cds-border-subtle-selected: var(--cds-border-subtle-selected-01);
  --cds-border-strong: var(--cds-border-strong-01); --cds-border-tile: var(--cds-border-tile-01);
  --sj-border-on-layer: var(--cds-border-subtle-01);
}
/* level 2: children of a level-1 surface (tile / card / language column / original / modal / kanban wrapper / month cell / project card) */
.w > *, .card > *, .lcol > *, .ko > *, .pcard > *, .mbox > *, .mcell > *, .kanban > *, .callout > *, .msg > * {
  --cds-layer: var(--cds-layer-02); --cds-layer-hover: var(--cds-layer-hover-02); --cds-layer-active: var(--cds-layer-active-02);
  --cds-layer-selected: var(--cds-layer-selected-02); --cds-layer-selected-hover: var(--cds-layer-selected-hover-02);
  --cds-layer-accent: var(--cds-layer-accent-02); --cds-layer-accent-hover: var(--cds-layer-accent-hover-02); --cds-layer-accent-active: var(--cds-layer-accent-active-02);
  --cds-field: var(--cds-field-02); --cds-field-hover: var(--cds-field-hover-02);
  --cds-border-subtle: var(--cds-border-subtle-01); --cds-border-subtle-selected: var(--cds-border-subtle-selected-02);
  --cds-border-strong: var(--cds-border-strong-02); --cds-border-tile: var(--cds-border-tile-02);
  --sj-border-on-layer: var(--cds-border-subtle-02);
}
/* level 3: children of a level-2 surface (kanban column → cards; card/pcard nested in a tile) */
.kcol > *, .w .card > *, .w .pcard > *, .card .card > * {
  --cds-layer: var(--cds-layer-03); --cds-layer-hover: var(--cds-layer-hover-03); --cds-layer-active: var(--cds-layer-active-03);
  --cds-layer-selected: var(--cds-layer-selected-03); --cds-layer-selected-hover: var(--cds-layer-selected-hover-03);
  --cds-layer-accent: var(--cds-layer-accent-03); --cds-layer-accent-hover: var(--cds-layer-accent-hover-03); --cds-layer-accent-active: var(--cds-layer-accent-active-03);
  --cds-field: var(--cds-field-03); --cds-field-hover: var(--cds-field-hover-03);
  --cds-border-subtle: var(--cds-border-subtle-02); --cds-border-subtle-selected: var(--cds-border-subtle-selected-03);
  --cds-border-strong: var(--cds-border-strong-03); --cds-border-tile: var(--cds-border-tile-03);
  --sj-border-on-layer: var(--cds-border-subtle-03);
}

/* ── 3. Base / reset / type ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; }
body.jd { margin: 0; background: var(--cds-background); color: var(--cds-text-primary);
  font-family: var(--cds-font-sans); font-size: .875rem; line-height: 1.42857; letter-spacing: .16px; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, ul, ol, pre, figure { margin: 0; }
h1 { font-size: 1.75rem; line-height: 1.28572; font-weight: 400; letter-spacing: 0; }                 /* heading-04 28/36 */
h2 { font-size: 1.25rem; line-height: 1.4; font-weight: 400; letter-spacing: 0; margin: var(--cds-spacing-07) 0 var(--cds-spacing-05); }  /* heading-03 20/28 */
h3 { font-size: 1rem; line-height: 1.375; font-weight: 600; letter-spacing: 0; margin: var(--cds-spacing-06) 0 var(--cds-spacing-03); }   /* heading-compact-02 16/22 */
h4 { font-size: .875rem; line-height: 1.28572; font-weight: 600; letter-spacing: .16px; margin: var(--cds-spacing-06) 0 var(--cds-spacing-03); } /* heading-compact-01 */
h1 .small, h2 .small, h3 .small, h4 .small { font-weight: 400; }
p { margin: var(--cds-spacing-03) 0; }
b, strong { font-weight: 600; color: var(--cds-text-primary); }
.small { font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; color: var(--cds-text-secondary); font-weight: 400; } /* label-01 */
.bad { color: var(--cds-text-error); }
a { color: var(--cds-link-primary); text-decoration: none; }
a:hover { color: var(--cds-link-primary-hover); text-decoration: underline; }
p a, .wl a, .prev a, li.small a { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
a:focus-visible { outline: 1px solid var(--cds-focus); outline-offset: 0; }
code, pre { font-family: var(--cds-font-mono); }
code { font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; background: var(--cds-layer); color: var(--cds-text-primary); padding: 0 var(--cds-spacing-02); }
pre { font-size: .875rem; line-height: 1.42857; letter-spacing: .32px; background: var(--cds-layer); color: var(--cds-text-primary); padding: var(--cds-spacing-05); white-space: pre-wrap; word-break: break-word; margin: var(--cds-spacing-03) 0; overflow-x: auto; }
.hidden { display: none !important; }
ul, ol { padding-inline-start: var(--cds-spacing-06); }
li { margin: var(--cds-spacing-02) 0; }

/* ── 4. UI Shell — header (g100 shell tokens in both themes) ───────────── */
.hdr { position: fixed; top: 0; left: 0; right: 0; height: 3rem; z-index: 8000; display: flex; align-items: center;
  --cds-background: var(--sj-shell-background); --cds-background-hover: var(--sj-shell-background-hover); --cds-background-active: var(--sj-shell-background-active);
  --cds-text-primary: var(--sj-shell-text-primary); --cds-text-secondary: var(--sj-shell-text-secondary); --cds-icon-primary: var(--sj-shell-icon-primary); --cds-icon-secondary: var(--sj-shell-icon-secondary);
  --cds-border-subtle: var(--sj-shell-border-subtle); --cds-border-interactive: var(--sj-shell-border-interactive); --cds-focus: var(--sj-shell-focus); --cds-link-primary: var(--sj-shell-link-primary); --cds-layer: var(--sj-shell-layer);
  background: var(--cds-background); color: var(--cds-text-primary); border-bottom: 1px solid var(--cds-border-subtle); }
.hdr-menu { width: 3rem; height: 3rem; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0;
  background: transparent; border: 1px solid transparent; color: var(--cds-icon-primary); cursor: pointer; }
.hdr-menu svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.hdr-menu:hover { background: var(--cds-background-hover); }
.hdr-menu:active { background: var(--cds-background-active); }
.hdr-menu:focus-visible { outline: none; border-color: var(--cds-focus); }
.hdr-name { display: inline-flex; align-items: center; height: 100%; padding: 0 var(--cds-spacing-07) 0 var(--cds-spacing-03);
  font-size: .875rem; line-height: 1.25rem; font-weight: 600; letter-spacing: .1px; color: var(--cds-text-primary); text-decoration: none; border: 2px solid transparent; white-space: nowrap; }
.hdr-name:hover { color: var(--cds-text-primary); text-decoration: none; }
.hdr-name:focus-visible { outline: none; border-color: var(--cds-focus); }
.hdr-name .tag { margin-left: var(--cds-spacing-03); font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; font-weight: 400; color: var(--cds-text-secondary); }
.hdr-global { margin-left: auto; display: flex; height: 100%; }
.hdr-link { position: relative; display: inline-flex; align-items: center; height: 100%; padding: 0 var(--cds-spacing-05); border: 2px solid transparent;
  font-size: .875rem; line-height: 1.125rem; letter-spacing: .16px; color: var(--cds-text-secondary); text-decoration: none; white-space: nowrap; }
.hdr-link:hover { background: var(--cds-background-hover); color: var(--cds-text-primary); text-decoration: none; }
.hdr-link:active { background: var(--cds-background-active); }
.hdr-link:focus-visible { outline: none; border-color: var(--cds-focus); }
.hdr-link[aria-current="page"] { color: var(--cds-text-primary); }
.hdr-link[aria-current="page"]::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -2px; height: 3px; background: var(--cds-border-interactive); }

/* ── 4b. UI Shell — side nav (256 expanded / 48 rail) ──────────────────── */
.side { position: fixed; top: 3rem; bottom: 0; left: 0; width: 16rem; z-index: 8000; display: flex; flex-direction: column; border-right: 1px solid var(--cds-border-subtle-01);
  background: var(--cds-background); color: var(--cds-text-secondary); padding-top: var(--cds-spacing-05); overflow: hidden;
  transition: width .11s cubic-bezier(.2,0,1,.9); }
html.nav-rail .side { width: 3rem; }
.side-items { list-style: none; margin: 0; padding: 0; }
.side-items li { margin: 0; }
.side-link { position: relative; display: flex; align-items: center; min-height: 2rem; padding: 0 var(--cds-spacing-05); color: var(--cds-text-secondary); text-decoration: none;
  font-size: .875rem; line-height: 1.28572; letter-spacing: .16px; font-weight: 600; white-space: nowrap; outline: 2px solid transparent; outline-offset: -2px; }   /* heading-compact-01 */
.side-link .ic { flex: none; width: 1rem; margin-right: var(--cds-spacing-06); text-align: center; color: var(--cds-icon-secondary); font-size: .875rem; }
.side-link:hover { background: var(--cds-background-hover); color: var(--cds-text-primary); text-decoration: none; }
.side-link:hover .ic { color: var(--cds-icon-primary); }
.side-link:active { background: var(--cds-background-active); }
.side-link.on { background: var(--cds-background-selected); color: var(--cds-text-primary); font-weight: 600; }
.side-link.on .ic { color: var(--cds-icon-primary); }
.side-link.on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cds-border-interactive); }
.side-link:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
html.nav-rail .side-link .ic { margin-right: 0; }
html.nav-rail .side-link .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sfoot { margin-top: auto; padding: var(--cds-spacing-05); white-space: nowrap; }
html.nav-rail .sfoot { display: none; }

/* ── 4c. Content ───────────────────────────────────────────────────────── */
.main { margin-top: 3rem; margin-left: 16rem; min-width: 0; padding: var(--cds-spacing-07) var(--cds-spacing-07) var(--cds-spacing-10); transition: margin-left .11s cubic-bezier(.2,0,1,.9); }
html.nav-rail .main { margin-left: 3rem; }
@media (max-width: 1055px) { .main { padding: var(--cds-spacing-05) var(--cds-spacing-05) var(--cds-spacing-09); } }
@media (max-width: 671px) { .main { margin-left: 3rem; } }   /* expanded nav overlays content below md */

/* ── 5. 2x Grid — 16 columns (lg+) / 8 (md) / 4 (sm) ───────────────────── */
.grid16 { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: var(--cds-spacing-07); align-items: start; }
.col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-8 { grid-column: span 8; }
.col-11 { grid-column: span 11; } .col-16 { grid-column: span 16; }
@media (max-width: 1055px) {
  .grid16 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .col-4, .col-5, .col-6 { grid-column: span 4; } .col-8, .col-11, .col-16 { grid-column: span 8; }
  .dwrap > .col-5, .dwrap > .col-11 { grid-column: span 8; }
}
@media (max-width: 671px) {
  .grid16 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cds-spacing-05); }
  .col-4, .col-5, .col-6, .col-8, .col-11, .col-16, .dwrap > .col-5, .dwrap > .col-11 { grid-column: span 4; }
}
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--cds-spacing-05); align-items: start; }

/* ── 6. Page header ────────────────────────────────────────────────────── */
.ph { display: flex; align-items: center; gap: var(--cds-spacing-05); flex-wrap: wrap; margin-bottom: var(--cds-spacing-06); }
.ph h1 { margin: 0; }
.ph .wd { font-size: 1.25rem; line-height: 1.4; color: var(--cds-text-secondary); font-weight: 400; }
.ph form { margin: 0; }

/* ── 7. Buttons (Carbon Button: primary / secondary / ghost / danger-ghost; lg 48 · md 40) ── */
.btn { display: inline-flex; align-items: center; justify-content: space-between; text-align: start; vertical-align: middle;
  height: 3rem; max-width: 20rem; padding: 0 calc(var(--cds-spacing-10) - 1px) 0 calc(var(--cds-spacing-05) - 1px); margin: 0;
  border: 1px solid transparent; border-radius: 0; font-family: inherit; font-size: .875rem; line-height: 1.28572; letter-spacing: .16px; font-weight: 400;
  text-decoration: none; cursor: pointer; white-space: nowrap; outline: none;
  background: var(--cds-button-secondary); color: var(--cds-text-on-color);
  transition: background-color 70ms cubic-bezier(0,0,.38,.9), box-shadow 70ms cubic-bezier(0,0,.38,.9), border-color 70ms cubic-bezier(0,0,.38,.9); }
.btn:hover { background: var(--cds-button-secondary-hover); color: var(--cds-text-on-color); text-decoration: none; }
.btn:active { background: var(--cds-button-secondary-active); }
.btn:focus-visible { border-color: var(--cds-focus); box-shadow: inset 0 0 0 1px var(--cds-focus), inset 0 0 0 2px var(--cds-background); outline: none; }
.btn.primary { background: var(--cds-button-primary); color: var(--cds-text-on-color); }
.btn.primary:hover { background: var(--cds-button-primary-hover); }
.btn.primary:active { background: var(--cds-button-primary-active); }
.btn.sm { height: 2.5rem; }
.btn.sm:not(.primary) { background: transparent; color: var(--cds-link-primary); padding: 0 calc(var(--cds-spacing-05) - 1px); }   /* ghost md */
.btn.sm:not(.primary):hover { background: var(--cds-background-hover); color: var(--cds-link-primary-hover); }
.btn.sm:not(.primary):active { background: var(--cds-background-active); }
.btn.danger-ghost { background: transparent; color: var(--cds-button-danger-secondary); padding: 0 calc(var(--cds-spacing-05) - 1px); }
.btn.danger-ghost:hover { background: var(--cds-button-danger-hover); color: var(--cds-text-on-color); }
.btn.danger-ghost:active { background: var(--cds-button-danger-active); color: var(--cds-text-on-color); }
.btn:disabled, .btn.primary:disabled { background: var(--cds-button-disabled); border-color: var(--cds-button-disabled); color: var(--cds-text-on-color-disabled); cursor: not-allowed; box-shadow: none; }
.btn.sm:not(.primary):disabled, .btn.danger-ghost:disabled { background: transparent; border-color: transparent; color: var(--cds-text-disabled); }
form { margin: 0; }
p .btn, li .btn, h3 .btn { margin: 0 var(--cds-spacing-02); }

/* ── 8. Tags (Carbon Tag: md 24 · sm 18, pill 16px, label-01) ──────────── */
.chip, .k, .pj, .mchip { --tag-bg: var(--cds-tag-background-gray); --tag-fg: var(--cds-tag-color-gray); --tag-hover: var(--cds-tag-hover-gray); --tag-border: var(--cds-tag-border-gray);
  display: inline-flex; align-items: center; justify-content: center; height: 1.5rem; min-width: 2rem; max-width: 13rem; padding: 0 var(--cds-spacing-03);
  border-radius: 1rem; border: 1px solid transparent; background: var(--tag-bg); color: var(--tag-fg);
  font-family: inherit; font-size: .75rem; line-height: 1rem; letter-spacing: .32px; font-weight: 400; white-space: nowrap; vertical-align: middle; cursor: default; text-decoration: none; }
.chip.good, .chip.active { --tag-bg: var(--cds-tag-background-green); --tag-fg: var(--cds-tag-color-green); --tag-hover: var(--cds-tag-hover-green); --tag-border: var(--cds-tag-border-green); }
.chip.maintain, .k.goal, .mchip.plan { --tag-bg: var(--cds-tag-background-blue); --tag-fg: var(--cds-tag-color-blue); --tag-hover: var(--cds-tag-hover-blue); --tag-border: var(--cds-tag-border-blue); }
.chip.warn, .chip.observe, .mchip.due { --tag-bg: var(--cds-tag-background-purple); --tag-fg: var(--cds-tag-color-purple); --tag-hover: var(--cds-tag-hover-purple); --tag-border: var(--cds-tag-border-purple); }
.chip.bad { --tag-bg: var(--cds-tag-background-red); --tag-fg: var(--cds-tag-color-red); --tag-hover: var(--cds-tag-hover-red); --tag-border: var(--cds-tag-border-red); }
.chip.card-only { --tag-bg: var(--cds-tag-background-cool-gray); --tag-fg: var(--cds-tag-color-cool-gray); --tag-hover: var(--cds-tag-hover-cool-gray); --tag-border: var(--cds-tag-border-cool-gray); }
.pj { --tag-bg: var(--cds-tag-background-teal); --tag-fg: var(--cds-tag-color-teal); --tag-hover: var(--cds-tag-hover-teal); --tag-border: var(--cds-tag-border-teal); }
.mchip.done { --tag-bg: var(--cds-tag-background-green); --tag-fg: var(--cds-tag-color-green); --tag-hover: var(--cds-tag-hover-green); --tag-border: var(--cds-tag-border-green); }
.chip.dim, .mchip.dn { opacity: .5; }
/* interactive (operational) tags: status cycle button, language selector links */
.chip.asbtn, a.chip { border-color: var(--tag-border); cursor: pointer; }
.chip.asbtn:hover, a.chip:hover { background: var(--tag-hover); color: var(--tag-fg); text-decoration: none; }
.chip.asbtn:focus-visible, a.chip:focus-visible, .mchip:focus-visible { outline: none; border-color: var(--cds-focus); box-shadow: inset 0 0 0 1px var(--cds-focus); }
a.chip.sel { --tag-bg: var(--cds-background-inverse); --tag-fg: var(--cds-text-inverse); --tag-hover: var(--cds-background-inverse-hover); --tag-border: transparent; }   /* high-contrast tag */
.chip.off { --tag-bg: var(--cds-layer); --tag-fg: var(--cds-text-disabled); border-color: transparent; cursor: default; }
.k, .pj { height: 1.125rem; min-width: 0; margin-left: var(--cds-spacing-02); }
.mchip { display: block; width: fit-content; height: 1.125rem; max-width: 100%; margin-top: var(--cds-spacing-02); overflow: hidden; text-overflow: ellipsis; text-align: start; }
.mchip:hover { background: var(--tag-hover); color: var(--tag-fg); text-decoration: none; }

/* ── 9. Tabs (contained, 48px) + toolbar ───────────────────────────────── */
.seg { display: inline-flex; align-items: center; flex-wrap: wrap; }
.seg .lbl { font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; color: var(--cds-text-secondary); margin: 0 var(--cds-spacing-03) 0 0; }
.tab { display: inline-flex; align-items: center; height: 3rem; padding: 0 var(--cds-spacing-05); background: var(--cds-layer-accent); color: var(--cds-text-secondary);
  border: 0; border-right: 1px solid var(--cds-border-strong); font-family: inherit; font-size: .875rem; line-height: 1.28572; letter-spacing: .16px; font-weight: 400;
  text-decoration: none; cursor: pointer; white-space: nowrap; outline: 2px solid transparent; outline-offset: -2px; }
.tab:last-child { border-right: 0; }
.tab:hover { background: var(--cds-layer-accent-hover); color: var(--cds-text-primary); text-decoration: none; }
.tab.on { background: var(--cds-layer); color: var(--cds-text-primary); font-weight: 600; box-shadow: inset 0 2px 0 0 var(--cds-border-interactive); }
.tab:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.tbar { display: flex; align-items: center; gap: var(--cds-spacing-05); flex-wrap: wrap; padding-bottom: var(--cds-spacing-05); margin-bottom: var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-subtle); }
.tbar .right { margin-left: auto; }
.tbar .seg .btn + .btn { margin-left: 0; }
.tbar .btn { height: 3rem; }   /* lg buttons beside 48px contained tabs */
.tbar .seg .chip { margin: 0; }

/* ── 10. Inline notification / callout ─────────────────────────────────── */
.msg, .callout { position: relative; display: block; min-height: 3rem; margin: 0 0 var(--cds-spacing-05);
  padding: var(--cds-spacing-04) var(--cds-spacing-05) var(--cds-spacing-04) var(--cds-spacing-09); background: var(--cds-notification-background-info); color: var(--cds-text-primary);
  border-left: 3px solid var(--cds-support-info); font-size: .875rem; line-height: 1.28572; letter-spacing: .16px; }
.msg::before, .callout::before { content: ""; position: absolute; left: var(--cds-spacing-05); top: calc(var(--cds-spacing-04) + 1px); width: 1rem; height: 1rem; background: var(--cds-support-info);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1a9 9 0 1 0 9 9 9 9 0 0 0-9-9zm-.75 4h1.5v1.5h-1.5zm2.25 10h-3v-1h1v-4h-1V9h2v5h1z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1a9 9 0 1 0 9 9 9 9 0 0 0-9-9zm-.75 4h1.5v1.5h-1.5zm2.25 10h-3v-1h1v-4h-1V9h2v5h1z'/></svg>") center / contain no-repeat; }
.msg::after, .callout::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--cds-support-info); border-left: 0; opacity: .4; pointer-events: none; }
.callout { margin-top: var(--cds-spacing-05); line-height: 1.42857; }
.callout code { background: var(--cds-layer-01); }

/* ── 11. Tiles (board widgets, cards, project cards) ───────────────────── */
.w, .card { background: var(--cds-layer); color: var(--cds-text-primary); padding: var(--cds-spacing-05); min-height: 4rem; min-width: 0; }
.card { margin: var(--cds-spacing-05) 0; }
.grid2 > .card { margin: 0; }
.w h3, .card h3 { display: flex; align-items: center; gap: var(--cds-spacing-03); flex-wrap: wrap; margin: 0 0 var(--cds-spacing-03); }
.w h3 .btn, .card h3 .btn { margin: 0; }
.w ul, .w ol { margin: var(--cds-spacing-03) 0 0; padding-inline-start: var(--cds-spacing-06); }
.w ul.todo, .w ul.wl { list-style: none; padding: 0; }                                            /* structured list (condensed) */
.w ul.todo > li, .w ul.wl > li { padding: var(--cds-spacing-03) 0; margin: 0; border-bottom: 1px solid var(--cds-border-subtle); }
.w ul.todo > li:last-child, .w ul.wl > li:last-child { border-bottom: 0; }
.w p { margin: var(--cds-spacing-03) 0; }
.todo li, .wl li { color: var(--cds-text-primary); }
.prev { color: var(--cds-text-secondary); }
.board .w.wide { grid-column: 1 / -1; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--cds-spacing-05); }
.pcard { display: block; background: var(--cds-layer); color: var(--cds-text-secondary); padding: var(--cds-spacing-05); min-height: 4rem; text-decoration: none;
  outline: 2px solid transparent; outline-offset: -2px; }
.pcard:hover { background: var(--cds-layer-hover); color: var(--cds-text-secondary); text-decoration: none; }
.pcard:focus-visible { outline: 2px solid var(--cds-focus); }
.pcard .pn { font-size: 1rem; line-height: 1.375; font-weight: 600; color: var(--cds-text-primary); }
.pcard .pk { font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; color: var(--cds-text-secondary); }
.pcard .ps { font-size: .875rem; line-height: 1.28572; margin-top: var(--cds-spacing-03); }

/* ── 12. Data tables (48 lg / 40 md; header $layer-accent; no zebra) ───── */
.tbl, .wkscroll { overflow-x: auto; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
th, td { text-align: start; vertical-align: middle; padding: var(--cds-spacing-03) var(--cds-spacing-05); }
th { background: var(--cds-layer-accent); color: var(--cds-text-primary); font-size: .875rem; line-height: 1.28572; letter-spacing: .16px; font-weight: 600; height: 3rem; }
td { background: var(--cds-layer); color: var(--cds-text-secondary); font-size: .875rem; line-height: 1.28572; letter-spacing: .16px; height: 3rem;
  border-bottom: 1px solid var(--sj-border-on-layer); }
tbody tr:hover td { background: var(--cds-layer-hover); color: var(--cds-text-primary); }
td.small { font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; }
td.prev { max-width: 37.5rem; }
table.align th, table.align td { height: 2.5rem; }
table.align td, table.align th { vertical-align: top; }
table.align .lane { min-width: 13rem; }
table.align td .mchip { display: block; width: fit-content; }
table.wk { min-width: 1500px; }
table.wk .tcol { min-width: 270px; max-width: 270px; width: 270px; position: sticky; left: 0; z-index: 2; }
table.wk .scol { min-width: 4rem; width: 4rem; position: sticky; left: 270px; z-index: 2; }
table.wk .dcol2 { min-width: 84px; width: 84px; position: sticky; left: 334px; z-index: 2; box-shadow: 1px 0 0 var(--sj-border-on-layer); }
table.wk .dcol { width: 3rem; min-width: 3rem; padding: 0; text-align: center; }
table.wk th.dcol { padding: var(--cds-spacing-02) 0; line-height: 1.28572; }
table.wk th.dcol .small { color: var(--cds-text-secondary); }
table.wk th.dcol:not(.cur) { color: var(--cds-text-secondary); }
table.wk th.today, table.wk th.today .small { color: var(--cds-link-primary); }
table.wk td.today { background: var(--cds-layer-selected); }
table.wk th.wkend, table.wk td.wkend { background-image: linear-gradient(var(--cds-background-hover), var(--cds-background-hover)); }
table.wk tr.grp td, table.align tr.grp td { background: var(--cds-layer-accent); color: var(--cds-text-primary); font-weight: 600; }   /* 그룹 헤더(구 tr.area 승계, 2026-08-20) — 주간·정렬 */
table.wk tr.grp td .small, table.align tr.grp td .small { font-weight: 400; }
table.wk tbody tr.grp:hover td, table.align tbody tr.grp:hover td { background: var(--cds-layer-accent-hover); }
table.wk tr.donerow > td > * { opacity: .5; }
table.wk td.tcol, table.wk td.scol { padding: var(--cds-spacing-02) var(--cds-spacing-05); }
.tt { min-width: 180px; color: var(--cds-text-primary); }
.tt .k, .tt .pj { vertical-align: top; }                                                                                   /* tag inside the 18px title line (no line-box inflation) */
.tt .small { display: block; margin-top: var(--cds-spacing-01); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* one line → row stays 48 (lg); title+tag wrap → 63 */
.tt.d1 { padding-left: var(--cds-spacing-05); } .tt.d2 { padding-left: var(--cds-spacing-07); } .tt.d3 { padding-left: var(--cds-spacing-09); }
.tt.d1::before, .tt.d2::before, .tt.d3::before { content: "└ "; color: var(--cds-text-helper); }
.tlink { color: var(--cds-text-primary); text-decoration: none; }
.tlink:hover { color: var(--cds-link-primary-hover); text-decoration: underline; }
/* plan cell: 32px ghost icon button */
.pl { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; margin: 0; background: transparent; border: 1px solid transparent;
  color: var(--cds-text-placeholder); font-family: inherit; font-size: .875rem; line-height: 1; cursor: pointer; }
.pl.plan { color: var(--cds-link-primary); font-weight: 600; }
.pl.done { color: var(--cds-support-success); font-weight: 600; }
.pl.skip { color: var(--cds-text-secondary); }
.pl:hover { background: var(--cds-background-hover); }
.pl:active { background: var(--cds-background-active); }
.pl:focus-visible { outline: none; border-color: var(--cds-focus); box-shadow: inset 0 0 0 1px var(--cds-focus); }
.wkscroll + .small { display: block; margin-top: var(--cds-spacing-03); }
.tbl + .small { display: block; margin-top: var(--cds-spacing-03); }
.asbtn { font-family: inherit; }

/* ── 13. Forms (Carbon text input / select / textarea: $field + 1px $border-strong bottom, 40px) ── */
label { display: block; font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; color: var(--cds-text-secondary); }
label > input, label > select, label > textarea { display: block; margin-top: var(--cds-spacing-03); width: 100%; }
input[type=text], input[type=date], input[type=search], select, textarea { font-family: inherit; font-size: .875rem; line-height: 1.28572; letter-spacing: .16px; color: var(--cds-text-primary);
  background: var(--cds-field); border: 0; border-bottom: 1px solid var(--cds-border-strong); border-radius: 0; height: 2.5rem; padding: 0 var(--cds-spacing-05); width: 100%; margin: 0;
  outline: 2px solid transparent; outline-offset: -2px; }
textarea { height: auto; min-height: 4rem; padding: var(--cds-spacing-04) var(--cds-spacing-05); resize: vertical; line-height: 1.42857; }
input::placeholder, textarea::placeholder { color: var(--cds-text-placeholder); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
select { appearance: none; -webkit-appearance: none; padding-right: var(--cds-spacing-09); background-image: var(--sj-chevron); background-repeat: no-repeat; background-position: right var(--cds-spacing-05) center; background-size: 1rem; cursor: pointer; }
select:hover { background-color: var(--cds-field-hover); }
input:disabled, select:disabled, textarea:disabled { color: var(--cds-text-disabled); border-bottom-color: transparent; cursor: not-allowed; }
.row { display: flex; gap: var(--cds-spacing-05); align-items: flex-end; }
.row.wrap { flex-wrap: wrap; }
.row > label { flex: 1 1 8rem; margin: 0; }
.row > input[type=text] { flex: 1 1 8rem; }
.form > label, .form > .row, .mdl-body > label, .mdl-body > .row { margin-bottom: var(--cds-spacing-06); }
.form > .row:last-child { margin-bottom: 0; align-items: center; }
.form.narrow { max-width: 52rem; }
.form.narrow .row label { flex: 0 1 auto; }
form.row .btn { flex: none; }

/* ── 14. Modal (Carbon Modal md: 48% ≥1312 · 60% ≥1056 · 84% ≥672 · 100%) ── */
.modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: var(--cds-overlay); }
.mbox { display: flex; flex-direction: column; width: 48%; max-height: 84vh; margin: 0; background: var(--cds-layer); color: var(--cds-text-primary); border: 1px solid var(--cds-border-subtle); }
@media (max-width: 1311px) { .mbox { width: 60%; } }
@media (max-width: 1055px) { .mbox { width: 84%; } }
@media (max-width: 671px) { .mbox { width: 100%; max-height: 100vh; } }
.mdl-head { position: relative; flex: none; padding: var(--cds-spacing-05) var(--cds-spacing-09) var(--cds-spacing-03) var(--cds-spacing-05); margin-bottom: var(--cds-spacing-03); }
.mdl-head h3 { margin: 0; font-size: 1.25rem; line-height: 1.4; font-weight: 400; letter-spacing: 0; color: var(--cds-text-primary); }
.mdl-close { position: absolute; top: 0; right: 0; width: 3rem; height: 3rem; padding: var(--cds-spacing-04); display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 2px solid transparent; color: var(--cds-icon-primary); cursor: pointer; }
.mdl-close svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.mdl-close:hover { background: var(--cds-layer-hover); }
.mdl-close:focus-visible { outline: none; border-color: var(--cds-focus); }
.mdl-body { flex: 1 1 auto; overflow: auto; padding: 0 var(--cds-spacing-05); margin-bottom: var(--cds-spacing-09); }
.mdl-body > label:last-child, .mdl-body > .row:last-child { margin-bottom: 0; }
.mdl-foot { flex: none; display: flex; justify-content: flex-end; height: 4rem; margin-top: auto; }
.mdl-foot .btn { height: 4rem; flex: 0 1 50%; max-width: none; align-items: baseline; padding-top: calc(var(--cds-spacing-05) - 2px); padding-bottom: var(--cds-spacing-07); margin: 0; }
.mdl-foot .btn.danger-ghost { padding-left: calc(var(--cds-spacing-05) - 1px); }
.mdl-foot .btn:focus-visible { box-shadow: inset 0 0 0 1px var(--cds-focus), inset 0 0 0 2px var(--cds-layer-01); }

/* ── 15. Diary — list / editor / detail (original span 5 | languages span 11) ── */
.dwrap { margin-top: var(--cds-spacing-05); }
.ko { position: sticky; top: calc(3rem + var(--cds-spacing-07)); max-height: calc(100vh - 3rem - var(--cds-spacing-07) * 2); overflow: auto;
  background: var(--cds-layer); color: var(--cds-text-primary); padding: var(--cds-spacing-05); }
.ko .kohead { display: flex; align-items: baseline; gap: var(--cds-spacing-03); flex-wrap: wrap; font-size: 1rem; line-height: 1.375; font-weight: 600; margin-bottom: var(--cds-spacing-03); }
.ko p { font-size: 1rem; line-height: 1.5; letter-spacing: 0; color: var(--cds-text-primary); margin: var(--cds-spacing-05) 0 0; }   /* body-02 */
.ko p:first-of-type { margin-top: var(--cds-spacing-03); }
.langs { min-width: 0; }
.lbar { display: flex; align-items: center; gap: var(--cds-spacing-03); flex-wrap: wrap; margin-bottom: var(--cds-spacing-05); }
.lbar .btn { margin: 0; }
.lcols { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: var(--cds-spacing-05); align-items: start; }
.lcol { background: var(--cds-layer); color: var(--cds-text-primary); padding: var(--cds-spacing-05); min-width: 0; }
.lcol header { display: flex; align-items: center; gap: var(--cds-spacing-03); flex-wrap: wrap; padding-bottom: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-subtle); }
.lcol header .btn { margin: 0 0 0 auto; }
.lcol header .small { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* english name: one line (title= has the full text) → headers of equal height */
.lcols[style*="--n:3"] .lcol header::after, .lcols[style*="--n:4"] .lcol header::after { content: ""; flex: 0 0 100%; height: 0; order: 1; }   /* line break: button always on its own row */
.lcols[style*="--n:3"] .lcol header .btn, .lcols[style*="--n:4"] .lcol header .btn { order: 2; margin: 0; }
.lcol .lname { font-size: 1rem; line-height: 1.375; font-weight: 600; letter-spacing: 0; }
.lcol .tr p.tp { font-size: 1rem; line-height: 1.5; letter-spacing: 0; color: var(--cds-text-primary); margin: 0 0 var(--cds-spacing-02); }   /* body-02 */
.lcol .tr p.pk, .lcol .pk2 { font-size: .875rem; line-height: 1.28572; letter-spacing: .16px; color: var(--cds-text-helper); }        /* helper-text-02 (옅은 줄) */
.lcol .tr p.pk { margin: 0 0 var(--cds-spacing-05); }
.lcol h4 { margin: var(--cds-spacing-06) 0 var(--cds-spacing-02); }
.lcol ul.phr { list-style: none; padding: 0; margin: 0; }                                        /* structured list (condensed) */
.lcol ul.phr li { padding: var(--cds-spacing-03) 0; margin: 0; border-bottom: 1px solid var(--cds-border-subtle); }
.lcol ul.phr li:last-child { border-bottom: 0; }
.lcol .ex { font-size: .875rem; line-height: 1.28572; font-weight: 600; color: var(--cds-text-primary); }
.lcol .mn { font-size: .875rem; line-height: 1.28572; color: var(--cds-text-secondary); }
.lcol ol.qs { padding-inline-start: var(--cds-spacing-06); margin: 0; }
.lcol ol.qs li { color: var(--cds-text-primary); margin: var(--cds-spacing-02) 0; }
details.gen { margin-top: var(--cds-spacing-07); }
details.gen summary { cursor: pointer; color: var(--cds-text-secondary); padding: var(--cds-spacing-03) 0; }
details.gen summary .chip { margin: 0 var(--cds-spacing-02); }
details.gen .grid2 { margin-top: var(--cds-spacing-05); }
details.gen .card form, details.gen > form { margin-top: var(--cds-spacing-03); }
details.gen .card textarea { margin: var(--cds-spacing-03) 0; }
@media (max-width: 1055px) { .ko { position: static; max-height: none; } .lcols { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
@media (max-width: 671px) { .lcols { grid-template-columns: 1fr; } }

/* ── 16. Tasks — month / day / kanban ──────────────────────────────────── */
.mtitle { margin: 0 0 var(--cds-spacing-05); }
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--cds-border-subtle); border: 1px solid var(--cds-border-subtle); }
.mhead { background: var(--cds-layer-accent); color: var(--cds-text-secondary); text-align: center; padding: var(--cds-spacing-03) 0; font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; }
.mcell { min-height: 6rem; background: var(--cds-layer); padding: var(--cds-spacing-03); min-width: 0; font-size: .75rem; }
.mcell.other .mday a { color: var(--cds-text-disabled); }
.mcell.other .mchip { --tag-bg: var(--cds-layer); --tag-fg: var(--cds-text-disabled); }
.mcell.wkend { background-image: linear-gradient(var(--cds-background-hover), var(--cds-background-hover)); }
.mcell.today { background: var(--cds-layer-selected); box-shadow: inset 0 2px 0 0 var(--cds-border-interactive); }
.mday a { font-size: .875rem; line-height: 1.28572; font-weight: 600; color: var(--cds-text-secondary); text-decoration: none; }
.mday a:hover { color: var(--cds-link-primary-hover); }
.month + .small { display: block; margin-top: var(--cds-spacing-03); }
.daylist, .card ul { padding: 0; }
.daylist { list-style: none; }
.daylist li { display: flex; align-items: center; gap: var(--cds-spacing-03); flex-wrap: wrap; padding: var(--cds-spacing-03) 0; margin: 0; border-bottom: 1px solid var(--cds-border-subtle); }
.daylist li form { display: inline-flex; }
.card > ul { list-style: none; }
.card > ul > li { padding: var(--cds-spacing-03) 0; margin: 0; border-bottom: 1px solid var(--cds-border-subtle); }
.card > ul > li:last-child, .daylist li:last-child { border-bottom: 0; }
/* 조망 발행 경보(2026-08-26) — 상태 줄·위젯 본문의 [다시 발행] + 진행 표시(#wstat) */
.wpub { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cds-spacing-03); margin-top: var(--cds-spacing-03); }
.wpub form { display: inline-flex; margin: 0; }
.wpub .chip { margin: 0; }
.card form.row { margin-top: var(--cds-spacing-05); }
.kanban { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-05); align-items: stretch; background: var(--cds-layer); padding: var(--cds-spacing-05); }   /* flex — 버킷 숨김 시 남은 열이 폭을 나눠 가짐 */
.w .kanban { background: transparent; padding: 0; }
.kcol { background: var(--cds-layer); padding: var(--cds-spacing-05); min-height: var(--cds-spacing-13); min-width: 0; flex: 1 1 12rem; }
.kcol[hidden] { display: none; }
.kcol h3 { margin: 0 0 var(--cds-spacing-03); }
.kcard { background: var(--cds-layer); color: var(--cds-text-primary); padding: var(--cds-spacing-05); margin-top: var(--cds-spacing-03); cursor: grab; }
.kcard:hover { background: var(--cds-layer-hover); }
.kcard:active { cursor: grabbing; }
.kcard a { color: var(--cds-text-primary); text-decoration: none; font-weight: 600; }
.kcard a:hover { color: var(--cds-link-primary-hover); text-decoration: underline; }
.kanban + .small { display: block; margin-top: var(--cds-spacing-03); }
@media (max-width: 1055px) { .kcol { flex-basis: 16rem; } }
@media (max-width: 671px) { .kcol { flex-basis: 100%; } .month { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* ── 17. 지식(위키) 페이지: 마크다운 본문 ───────────────────────────── */
.card blockquote { margin: var(--cds-spacing-05) 0; padding: var(--cds-spacing-03) var(--cds-spacing-05); border-left: 3px solid var(--cds-border-interactive); color: var(--cds-text-secondary); background: var(--cds-layer); }
.card hr { border: 0; border-top: 1px solid var(--cds-border-subtle); margin: var(--cds-spacing-06) 0; }
.card > p + h2, .card > p + h3, .card > ul + h2, .card > ul + h3 { margin-top: var(--cds-spacing-06); }
.wl-miss { color: var(--cds-text-disabled); border-bottom: 1px dashed var(--cds-border-strong); }

/* ── 18. Diary attachments (Notion 이관 이미지) ── */
.dimg { margin: var(--cds-spacing-05) 0; }
.dimg img, .dimg-inline { max-width: 100%; height: auto; display: block; background: var(--cds-layer-accent); }
.dimg-inline { display: inline-block; max-height: 12rem; vertical-align: middle; }

/* ── keys 층 (키보드 UX) ── */
/* 키캡 · 힌트 바 · 포커스 링 · 스트립 · "?" 시트 · Esc 시스템 메뉴. 토큰만 사용(새 hex 금지). */
:root { --sj-kbar-h: 2.5rem; }
.k-key { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 var(--cds-spacing-02);
  background: var(--cds-layer-accent-01); color: var(--cds-text-primary); border: 1px solid var(--cds-border-subtle-02);
  border-bottom: 2px solid var(--cds-border-strong-01);   /* 물리 키 질감 */
  font-family: var(--cds-font-mono); font-size: .75rem; line-height: 1; letter-spacing: .32px; white-space: nowrap; }
/* 힌트 바 — 하단 고정, 화면별 hint 키 + 우측 "? 전체" */
#kbar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--sj-kbar-h); z-index: 8500; display: flex; align-items: center;
  gap: var(--cds-spacing-05); padding: 0 var(--cds-spacing-05); background: var(--cds-layer-01); border-top: 1px solid var(--cds-border-subtle-01); overflow: hidden; }
#kbar .kbar-item { display: inline-flex; align-items: center; gap: var(--cds-spacing-02); white-space: nowrap; }
#kbar .kbar-lbl { font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; color: var(--cds-text-secondary); margin-left: var(--cds-spacing-01); }
#kbar .kbar-help { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: var(--cds-spacing-02); height: 1.5rem; padding: 0 var(--cds-spacing-03);
  background: transparent; border: 1px solid transparent; color: var(--cds-link-primary); font-family: inherit; font-size: .75rem; letter-spacing: .32px; cursor: pointer; }
#kbar .kbar-help:hover { background: var(--cds-background-hover); color: var(--cds-link-primary-hover); }
#kbar .kbar-help:focus-visible { outline: none; border-color: var(--cds-focus); }
body.jd.haskbar { padding-bottom: var(--sj-kbar-h); }   /* 본문 가림 방지 */
body.jd.haskbar .side { bottom: var(--sj-kbar-h); }
/* 포커스 링 — 프로그램 포커스에도 보이게(:focus-visible 비의존) */
.kfocus { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
/* 실행 피드백 스트립 — 우하단 · 동시 1개 · 1.6초 */
#kstrip { position: fixed; right: var(--cds-spacing-05); bottom: calc(var(--sj-kbar-h) + var(--cds-spacing-05)); z-index: 9700;
  display: flex; align-items: center; gap: var(--cds-spacing-03); padding: var(--cds-spacing-03) var(--cds-spacing-05);
  background: var(--cds-background-inverse); color: var(--cds-text-inverse); box-shadow: 0 2px 6px var(--cds-shadow);
  font-size: .875rem; line-height: 1.28572; letter-spacing: .16px; }
#kstrip b { font-weight: 600; color: var(--cds-text-inverse); }
#kstrip .k-key { background: transparent; color: var(--cds-text-inverse); border-color: var(--cds-text-inverse); opacity: .8; }
/* "?" 단축키 시트 — 오버레이 + 스코프 카드 그리드 */
.ksheet { position: fixed; inset: 0; z-index: 9600; display: flex; align-items: center; justify-content: center; background: var(--cds-overlay); padding: var(--cds-spacing-07); }
.ksheet-card { display: flex; flex-direction: column; width: 100%; max-width: 66rem; max-height: 88vh; background: var(--cds-layer-01); color: var(--cds-text-primary);
  border: 1px solid var(--cds-border-subtle-01); outline: none; }
.ksheet-hd { flex: none; display: flex; align-items: center; gap: var(--cds-spacing-03); padding: var(--cds-spacing-05) var(--cds-spacing-05) var(--cds-spacing-03); }
.ksheet-hd h3 { margin: 0; }
.ksheet-hd .small { margin-left: auto; }
.ksheet-body { flex: 1 1 auto; overflow: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--cds-spacing-05);
  align-items: start; padding: 0 var(--cds-spacing-05) var(--cds-spacing-05); }
.ksheet-grp { background: var(--cds-layer-02); border: 1px solid var(--cds-border-subtle-01); padding: var(--cds-spacing-05); }
.ksheet-grp.now { box-shadow: inset 0 2px 0 0 var(--cds-border-interactive); }
.ksheet-grp-hd { display: flex; align-items: center; gap: var(--cds-spacing-03); font-size: .875rem; line-height: 1.28572; font-weight: 600; margin-bottom: var(--cds-spacing-03); }
.ksheet-row { display: flex; align-items: baseline; gap: var(--cds-spacing-03); padding: var(--cds-spacing-02) 0; border-bottom: 1px solid var(--cds-border-subtle-01); }
.ksheet-row:last-child { border-bottom: 0; }
.ksheet-row .keys { flex: none; display: inline-flex; flex-wrap: wrap; gap: var(--cds-spacing-02); min-width: 7rem; }
.ksheet-row .lbl { font-size: .875rem; line-height: 1.28572; letter-spacing: .16px; color: var(--cds-text-secondary); }
.ksheet-row.b .k-key { border-style: dashed; background: transparent; color: var(--cds-text-helper); }   /* phase B = 점선 + 병기 */
.ksheet-row.b .lbl { color: var(--cds-text-helper); }
.ksheet-ft { flex: none; display: flex; align-items: center; gap: var(--cds-spacing-05); flex-wrap: wrap; padding: var(--cds-spacing-03) var(--cds-spacing-05);
  border-top: 1px solid var(--cds-border-subtle-01); font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; color: var(--cds-text-secondary); }
.ksheet-ft .ksheet-close { margin-left: auto; color: var(--cds-text-helper); }
/* Esc 시스템 메뉴 — 게임식 중앙 카드 */
.kmenu { position: fixed; inset: 0; z-index: 9600; display: flex; align-items: center; justify-content: center; background: var(--cds-overlay); }
.kmenu-card { width: 20rem; max-width: 90vw; background: var(--cds-layer-01); color: var(--cds-text-primary); border: 1px solid var(--cds-border-subtle-01);
  padding: var(--cds-spacing-03) 0 var(--cds-spacing-03); outline: none; }
.kmenu-hd { padding: var(--cds-spacing-03) var(--cds-spacing-05); font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; color: var(--cds-text-secondary); }
.kmenu-item { position: relative; display: flex; width: 100%; align-items: center; gap: var(--cds-spacing-03); height: 3rem; padding: 0 var(--cds-spacing-05);
  background: transparent; border: 0; font-family: inherit; font-size: .875rem; line-height: 1.28572; letter-spacing: .16px; color: var(--cds-text-primary);
  text-align: start; cursor: pointer; outline: none; }
.kmenu-item.sel { background: var(--cds-background-selected); }
.kmenu-item.sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .25rem; background: var(--cds-border-interactive); }
.kmenu-ft { padding: var(--cds-spacing-03) var(--cds-spacing-05) 0; font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; color: var(--cds-text-helper); }

/* ── 일기 에디터·로그인·확인 대화상자 ── */
/* .editor(쓰기 화면) · .mdv(SJ-MD v1 콘텐츠 — 상세 원문·미리보기 공용) · .login-card · .kdlg(kconfirm). 토큰만 사용(새 hex 금지). */
.editor { max-width: 75rem; margin: 0 auto;
  --ed-face: 400 15px/1.9 "IBM Plex Sans KR", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }   /* 원고 감각 — 에디터 전용(원문칸·라이브 블록 공통, 2026-08-26) */
.editor .ed-head { display: flex; align-items: baseline; gap: var(--cds-spacing-03); flex-wrap: wrap; margin: 0 0 var(--cds-spacing-03);
  font-size: 2rem; line-height: 1.25; font-weight: 400; letter-spacing: 0; color: var(--cds-text-primary); }   /* heading-05 32/40 */
.editor .ed-head h1 { font-size: 2rem; line-height: 1.25; font-weight: 400; letter-spacing: 0; margin: 0; }
.editor .ed-head .wd, .editor .ed-head .small { font-size: 1.25rem; line-height: 1.4; letter-spacing: 0; font-weight: 400; color: var(--cds-text-helper); }   /* 요일 옅게 */
.editor .ed-meta { display: flex; align-items: flex-end; gap: var(--cds-spacing-05); flex-wrap: wrap; margin: 0 0 var(--cds-spacing-05); }
.editor .ed-meta label { margin: 0; flex: 0 1 11rem; }
.editor .ed-meta label:last-child { flex: 1 1 16rem; }   /* 태그 줄이 남은 폭을 차지 */
.editor .ed-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cds-spacing-05); align-items: stretch; }
#ed-src { width: 100%; min-height: 62vh; resize: vertical;
  font: var(--ed-face); letter-spacing: 0; color: var(--cds-text-primary); background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01); border-bottom-color: var(--cds-border-strong-01);
  padding: var(--cds-spacing-06); }
#ed-view.mdv { min-height: 62vh; max-height: 80vh; overflow: auto; padding: var(--cds-spacing-06);
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); color: var(--cds-text-primary); }
.editor .ed-foot { display: flex; align-items: center; gap: var(--cds-spacing-05); flex-wrap: wrap; margin-top: var(--cds-spacing-03);
  font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; color: var(--cds-text-secondary); }
.editor .ed-foot #ed-draft { color: var(--cds-text-helper); }
.editor .ed-foot .edr { background: transparent; border: 0; padding: 0; margin: 0; font: inherit; color: var(--cds-link-primary); text-decoration: underline; cursor: pointer; }
.editor .ed-foot .edr:hover { color: var(--cds-link-primary-hover); }
.editor .ed-foot > :last-child { margin-left: auto; text-align: end; color: var(--cds-text-helper); }   /* md 힌트 한 줄 — 우측 */
.editor .ed-foot code { background: transparent; padding: 0; color: inherit; }
@media (max-width: 1055px) { .editor .ed-split { grid-template-columns: 1fr; } #ed-view.mdv { min-height: 0; max-height: none; } }   /* 1056px 미만 1열 — 미리보기 아래 */
/* 라이브 프리뷰(블록) — 2026-08-26: 한 창 쓰기(옵시디언 Live Preview 방식, 사용자 결정 "노션처럼 실시간 적용").
   #ed-src(마크다운 원문)는 그대로 폼 필드(SoT)로 남고 화면만 #ed-live 의 블록이 대신한다 — 저장 형식 불변.
   비활성 블록 = renderMd 결과(.mdv) · 활성 블록 = .ed-bt(자동 성장 textarea) + 첫 줄 접두 서체(.is-*). */
.editor .ed-split[hidden], .ed-live[hidden] { display: none; }   /* display:grid 가 hidden 속성을 이기므로 명시한다 */
html.edm-live .editor .ed-split { display: none; }               /* ui_diary 인라인 한 줄이 붙이는 클래스 — JS 초기화 전 첫 프레임부터 고른 쪽만(FOUC 방지) */
html.edm-live .ed-live { display: block; }
.ed-live { max-width: 46rem; margin: 0 auto; min-height: 62vh; padding: var(--cds-spacing-06);
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); cursor: text; outline: none; }
.ed-live.mdv p, .ed-live.mdv li, .ed-live.mdv blockquote { font: var(--ed-face); }   /* 렌더된 글도 원고 서체 — 활성/비활성 사이 글자 크기가 튀지 않게 */
/* 라이브에서는 줄 = 자리다 — 요소 자체 여백을 0 으로 두고 간격은 오직 "빈 줄 블록"이 만든다.
   원문에 빈 줄이 없으면 화면에도 붙어 나온다(원문 ↔ 화면 줄이 1:1 로 맞는다 — 옵시디언 Live Preview 와 같은 몸짓). */
.ed-live.mdv h3, .ed-live.mdv h4, .ed-live.mdv h5, .ed-live.mdv ul, .ed-live.mdv ol,
.ed-live.mdv blockquote, .ed-live.mdv pre, .ed-live.mdv hr, .ed-live.mdv figure { margin-top: 0; margin-bottom: 0; }
.ed-live:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.ed-block { margin: 0; }                                         /* 줄 하나 = 블록 하나 — 여백은 안쪽 .mdv 요소가 갖는다(2026-08-26 v2) */
.ed-block.tight > p { margin: 0; }                               /* 본문 줄 — 읽기 화면의 <p>a<br>b</p> 와 같은 모양 */
.ed-block.empty { font: var(--ed-face); height: 1.9em; }         /* 빈 줄 = 한 줄 자리(= 문단 사이 간격) */
.ed-live > :last-child { margin-bottom: 0; }
.ed-bt { display: block; box-sizing: border-box; width: 100%; min-height: 0; resize: none; overflow: hidden;   /* min-height:0 = 폼 textarea 기본 4rem 해제(높이는 내용만큼) */
  margin: 0; padding: 0 var(--cds-spacing-02); border: 0; outline: none;
  background: var(--cds-layer-hover-01); color: var(--cds-text-primary);
  font: var(--ed-face); letter-spacing: 0; }                     /* 테두리 없이 배경만 살짝 — "지금 이 블록" 표시 */
.ed-block > .ed-bt:focus, .ed-block > .ed-bt:focus-visible { outline: none; }   /* 캐럿 + 옅은 배경이 곧 초점 표시 — 블록마다 파란 테두리가 뜨면 글 읽기를 방해한다 */
.ed-block.is-h1 > .ed-bt { font-size: 1.25rem; line-height: 1.4; font-weight: 600; }                              /* "# " — .mdv h3 와 같은 크기 */
.ed-block.is-h2 > .ed-bt { font-size: 1rem; line-height: 1.375; font-weight: 600; }                               /* "## " — .mdv h4 */
.ed-block.is-h3 > .ed-bt { font-size: .875rem; line-height: 1.28572; font-weight: 600; letter-spacing: .16px; }   /* "### " — .mdv h5 */
.ed-block.is-list > .ed-bt { padding-inline-start: var(--cds-spacing-06); }
.ed-block.is-quote > .ed-bt { border-left: 3px solid var(--cds-border-interactive); padding-inline-start: var(--cds-spacing-05); color: var(--cds-text-secondary); }
.ed-block.is-code > .ed-bt { font-family: var(--cds-font-mono); font-size: .875rem; line-height: 1.6; background: var(--cds-layer-02); padding: var(--cds-spacing-05); }
.editor .ed-foot .ed-mode { margin-left: var(--cds-spacing-03); }
@media (max-width: 1055px) { .ed-live { min-height: 0; padding: var(--cds-spacing-05); } }
/* .mdv — SJ-MD v1 콘텐츠(일기가 "읽고 싶은 글"처럼) */
.mdv { color: var(--cds-text-primary); }
.mdv p { font-size: 1rem; line-height: 1.8; letter-spacing: 0; color: var(--cds-text-primary); margin: 0 0 var(--cds-spacing-05); }   /* body-02 + 여유 행간 */
.mdv p:first-of-type { margin-top: 0; }
.mdv h3 { font-size: 1.25rem; line-height: 1.4; font-weight: 600; letter-spacing: 0; margin: var(--cds-spacing-06) 0 var(--cds-spacing-03); }
.mdv h4 { font-size: 1rem; line-height: 1.375; font-weight: 600; letter-spacing: 0; margin: var(--cds-spacing-06) 0 var(--cds-spacing-02); }
.mdv h5 { font-size: .875rem; line-height: 1.28572; font-weight: 600; letter-spacing: .16px; margin: var(--cds-spacing-05) 0 var(--cds-spacing-02); color: var(--cds-text-primary); }
.mdv h3:first-child, .mdv h4:first-child, .mdv h5:first-child { margin-top: 0; }
.mdv ul, .mdv ol { margin: 0 0 var(--cds-spacing-05); padding-inline-start: var(--cds-spacing-06); }
.mdv li { margin: var(--cds-spacing-02) 0; font-size: 1rem; line-height: 1.7; letter-spacing: 0; color: var(--cds-text-primary); }
.mdv blockquote { margin: var(--cds-spacing-05) 0; padding: var(--cds-spacing-04) var(--cds-spacing-05);
  border-left: 3px solid var(--cds-border-interactive); background: var(--cds-background-hover);
  font-size: 1rem; line-height: 1.7; letter-spacing: 0; color: var(--cds-text-secondary); }
.mdv pre { font-size: .875rem; line-height: 1.6; background: var(--cds-layer-02); padding: var(--cds-spacing-05); margin: 0 0 var(--cds-spacing-05); }
.mdv code { font-size: .875rem; letter-spacing: 0; background: var(--cds-layer-02); padding: 0 var(--cds-spacing-02); }
.mdv hr { border: 0; border-top: 1px solid var(--cds-border-subtle-01); margin: var(--cds-spacing-06) 0; }
.mdv strong { font-weight: 600; }
.mdv em { font-style: italic; }
.mdv a { text-decoration: underline; }
.mdv > :last-child { margin-bottom: 0; }
/* 로그인 — 정중앙 카드(400~420px) */
body.jd.login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--cds-spacing-05); }
body.jd.login #kbar, body.jd.login #kstrip { display: none; }   /* keys 층이 로드돼도 숨김 */
.login-card { width: 100%; max-width: 26rem; margin: auto; padding: var(--cds-spacing-07);
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); }
.login-title { font-size: 2rem; line-height: 1.25; font-weight: 400; letter-spacing: 0; color: var(--cds-text-primary); margin: 0 0 var(--cds-spacing-02); }
.login-sub { display: block; font-size: .875rem; line-height: 1.42857; letter-spacing: .16px; color: var(--cds-text-secondary); margin: 0 0 var(--cds-spacing-07); }
.login-card label { margin: 0 0 var(--cds-spacing-05); }
.login-card input[type=password], .login-card input[type=text] { display: block; width: 100%; height: 3rem; margin: 0 0 var(--cds-spacing-05);
  padding: 0 var(--cds-spacing-05); font-family: inherit; font-size: .875rem; line-height: 1.28572; letter-spacing: .16px; color: var(--cds-text-primary);
  background: var(--cds-field-02); border: 0; border-bottom: 1px solid var(--cds-border-strong-01); border-radius: 0;
  outline: 2px solid transparent; outline-offset: -2px; }
.login-card input[type=password]:focus, .login-card input[type=text]:focus { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.login-card .btn { width: 100%; max-width: none; height: 3rem; justify-content: center; margin: var(--cds-spacing-03) 0 0; }
.login-err { color: var(--cds-text-error); font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; margin: 0 0 var(--cds-spacing-05); }
.login-card .callout { margin-top: var(--cds-spacing-05); }
/* kconfirm 확인 대화상자 — keys.js window.kconfirm */
.kdlg { position: fixed; inset: 0; z-index: 9650; display: flex; align-items: center; justify-content: center; background: var(--cds-overlay); }
.kdlg-card { width: 27rem; max-width: 90vw; background: var(--cds-layer-01); color: var(--cds-text-primary); border: 1px solid var(--cds-border-subtle-01); outline: none; }
.kdlg-title { margin: 0; padding: var(--cds-spacing-05) var(--cds-spacing-05) var(--cds-spacing-02); font-size: 1.25rem; line-height: 1.4; font-weight: 400; letter-spacing: 0; }
.kdlg-body { margin: 0; padding: 0 var(--cds-spacing-05) var(--cds-spacing-06); font-size: .875rem; line-height: 1.42857; letter-spacing: .16px; color: var(--cds-text-secondary); }
.kdlg-btns { display: flex; justify-content: flex-end; gap: var(--cds-spacing-03); padding: 0 var(--cds-spacing-05) var(--cds-spacing-05); }
.kdlg-btns .btn { margin: 0; padding: 0 var(--cds-spacing-07); justify-content: center; }
.kdlg-btns .btn.danger { background: var(--cds-button-danger-primary); color: var(--cds-text-on-color); }
.kdlg-btns .btn.danger:hover { background: var(--cds-button-danger-hover); }
.kdlg-btns .btn.danger:active { background: var(--cds-button-danger-active); }
.kdlg-btns .btn:focus { border-color: var(--cds-focus); box-shadow: inset 0 0 0 1px var(--cds-focus), inset 0 0 0 2px var(--cds-layer-01); }   /* 프로그램 포커스에도 링 */
/* 일기 상세 헤더의 삭제 버튼 — 계약 마크업 btn sm danger(고스트 danger) */
.btn.sm.danger { color: var(--cds-button-danger-secondary); }
.btn.sm.danger:hover { background: var(--cds-button-danger-hover); color: var(--cds-text-on-color); }
.btn.sm.danger:active { background: var(--cds-button-danger-active); color: var(--cds-text-on-color); }

/* ── 대시보드 편집·접기·필드 ── */
/* .fold(접기 고스트 버튼 ▾/▸) · tr.grp fold 간격 · .fbar/.fcol(필드 칩) · .ksec(칸반 열 안 섹션)
   · .w.folded(위젯 본문 숨김) · body.bedit(위젯 편집 모드)+.wdel+#wpal. 토큰만 사용(새 hex 금지). */
button.fold { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; flex: none; padding: 0; margin: 0;
  background: transparent; border: 1px solid transparent; color: var(--cds-icon-secondary);
  font-family: inherit; font-size: .75rem; line-height: 1; cursor: pointer; vertical-align: middle; }
button.fold:hover { background: var(--cds-background-hover); color: var(--cds-icon-primary); }
button.fold:active { background: var(--cds-background-active); }
button.fold:focus-visible { outline: none; border-color: var(--cds-focus); }
tr.grp .fold, .tt .fold { margin-right: var(--cds-spacing-02); }
/* 위젯 접기 — h3 제목 클릭 토글(keys.js), 접히면 본문 숨김 */
.w > h3:has(.fold) { cursor: pointer; user-select: none; }
.w.folded > :not(h3) { display: none; }
.w.folded > h3 { margin-bottom: 0; }
/* 필드 열(주간·정렬 표) · 필터 칩 바(툴바 아래 한 줄) */
th.fcol, td.fcol { min-width: 8rem; }
.fcol .chip, .fbar .chip { height: 1.125rem; min-width: 0; padding: 0 var(--cds-spacing-03); }
.fcol .chip { max-width: 9rem; overflow: hidden; margin: 0 var(--cds-spacing-02) var(--cds-spacing-01) 0; }
.fbar { display: flex; align-items: center; gap: var(--cds-spacing-03); flex-wrap: wrap; margin: 0 0 var(--cds-spacing-05);
  font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; color: var(--cds-text-secondary); }
/* 칸반 열 안 프로젝트 섹션 — 옅은 헤더 + 본문 */
.ksec { margin-top: var(--cds-spacing-03); }
.ksec-h { display: flex; align-items: center; gap: var(--cds-spacing-02); padding: var(--cds-spacing-02) 0;
  border-bottom: 1px solid var(--cds-border-subtle); color: var(--cds-text-secondary);
  font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; cursor: pointer; user-select: none; }
.ksec-h .small { margin-left: auto; }
.ksec-b { padding-bottom: var(--cds-spacing-02); }
/* 칸반 카드의 프로젝트·필드 칩 소형화 */
.kcard .chip, .kcard .pj { height: 1.125rem; min-width: 0; max-width: 9rem; overflow: hidden; padding: 0 var(--cds-spacing-03);
  margin: var(--cds-spacing-02) var(--cds-spacing-02) 0 0; }
/* 위젯 편집 모드(body.bedit) — board.js: 점선 외곽 + grab 커서 + ✕ + 하단 팔레트 */
body.bedit .board > .w { position: relative; outline: 1px dashed var(--cds-border-strong-01); outline-offset: -1px; cursor: grab; }
body.bedit .board > .w:active { cursor: grabbing; }
body.bedit .board > .w.dragging { opacity: .5; outline-style: solid; outline-color: var(--cds-border-interactive); }
.wdel { display: none; }
body.bedit .wdel { position: absolute; top: 0; right: 0; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; margin: 0; background: transparent; border: 1px solid transparent; color: var(--cds-icon-secondary);
  font-family: inherit; font-size: .875rem; line-height: 1; cursor: pointer; }
body.bedit .wdel:hover { background: var(--cds-button-danger-hover); color: var(--cds-text-on-color); }
body.bedit .wdel:focus-visible { outline: none; border-color: var(--cds-focus); }
#wpal { display: none; }
body.bedit #wpal { position: fixed; left: 16rem; right: 0; bottom: 0; z-index: 8600; display: flex; align-items: center; gap: var(--cds-spacing-03);
  flex-wrap: wrap; padding: var(--cds-spacing-03) var(--cds-spacing-05); background: var(--cds-layer-01); border-top: 1px solid var(--cds-border-subtle-01);
  font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; color: var(--cds-text-secondary); }
html.nav-rail body.bedit #wpal { left: 3rem; }
@media (max-width: 671px) { body.bedit #wpal { left: 3rem; } }
body.bedit #wpal .btn.sm { height: 2rem; margin: 0; }
body.bedit.haskbar #wpal { bottom: var(--sj-kbar-h); }   /* 힌트 바 위로 */

/* ── 칸반 버킷(전체·숨기기) · 리스트 뷰 ── */
/* .kall(전체 열) · .khide(버킷 숨김 버튼) · .krestore(복원 칩 줄) · table.lst(엑셀형 리스트)
   · .lgrip(행 드래그 그립) · td.editing(셀 인라인 편집) · tr.ladd(빠른 추가 행). 토큰만 사용(새 hex 금지). */
.kcol h3 .khide { margin-left: auto; }
button.khide { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; flex: none; padding: 0; margin: 0;
  background: transparent; border: 1px solid transparent; color: var(--cds-icon-secondary); font-family: inherit; font-size: .875rem; line-height: 1; cursor: pointer; }
button.khide:hover { background: var(--cds-background-hover); color: var(--cds-icon-primary); }
button.khide:active { background: var(--cds-background-active); }
button.khide:focus-visible { outline: none; border-color: var(--cds-focus); }
.krestore { display: flex; align-items: center; gap: var(--cds-spacing-03); flex-wrap: wrap; margin: 0 0 var(--cds-spacing-03); }
.krestore[hidden] { display: none; }   /* display:flex가 UA [hidden]을 이기므로 명시 */
.krestore .chip { cursor: pointer; border-color: var(--tag-border); }
.krestore .chip:hover { background: var(--tag-hover); }
.kcard .kst { margin-right: var(--cds-spacing-02); }
/* 리스트 뷰 표 — md(40px) 밀도, 셀이 곧 편집 단위 */
table.lst th, table.lst td { height: 2.5rem; padding: var(--cds-spacing-02) var(--cds-spacing-04); }
table.lst .tcol { min-width: 300px; }
table.lst .scol { width: 5.5rem; }
table.lst .pcol2 { width: 3.5rem; text-align: center; }
table.lst .dcol2 { width: 8rem; }
table.lst .pjcol { min-width: 10rem; }
table.lst .ncol { min-width: 12rem; max-width: 22rem; }
table.lst tr.grp td { background: var(--cds-layer-accent); color: var(--cds-text-primary); font-weight: 600; }
table.lst tr.grp td .small { font-weight: 400; }
table.lst tbody tr.grp:hover td { background: var(--cds-layer-accent-hover); }
table.lst tr.donerow > td > * { opacity: .5; }
.lst-note { display: block; max-width: 22rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dim2 { color: var(--cds-text-helper); }
.lgrip { display: inline-block; margin-right: var(--cds-spacing-02); color: var(--cds-text-placeholder); cursor: grab; user-select: none; }
tr.lrow:hover .lgrip { color: var(--cds-icon-secondary); }
.lgrip:active { cursor: grabbing; }
tr.lrow.ldrag > td { opacity: .5; }
tr.lrow.drop-above > td { box-shadow: inset 0 2px 0 0 var(--cds-border-interactive); }
tr.lrow.drop-below > td { box-shadow: inset 0 -2px 0 0 var(--cds-border-interactive); }
tr.grp.drop-into > td { box-shadow: inset 0 0 0 2px var(--cds-border-interactive); }
button.lst-pri { min-width: 2rem; height: 1.5rem; padding: 0 var(--cds-spacing-02); background: transparent; border: 1px solid transparent;
  color: var(--cds-text-secondary); font-family: inherit; font-size: .875rem; line-height: 1; cursor: pointer; }
button.lst-pri:hover { background: var(--cds-background-hover); color: var(--cds-text-primary); }
button.lst-pri:focus-visible { outline: none; border-color: var(--cds-focus); box-shadow: inset 0 0 0 1px var(--cds-focus); }
table.lst td.editing { padding: 0; }
table.lst td.editing input, table.lst td.editing select { height: 2.5rem; width: 100%; min-width: 6rem; }
tr.ladd td { background: var(--cds-layer); }
.lst-add { background: transparent; border-bottom-color: var(--cds-border-subtle-01); color: var(--cds-text-secondary); height: 2rem; }
.lst-add:focus { color: var(--cds-text-primary); }

/* ── 프로젝트 탭(포트폴리오) ─────────────────────────────────────────── */
.ph-sum { margin-left: auto; }
.pcard .pn .chip { margin-left: var(--cds-spacing-03); }
.pbar { height: .375rem; margin-top: var(--cds-spacing-04); background: var(--cds-layer-accent); overflow: hidden; }
.pbar > i { display: block; height: 100%; background: var(--cds-support-success); }
.pcard .pbar + .pk { margin-top: var(--cds-spacing-02); }
.prow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-spacing-02); margin-top: var(--cds-spacing-03); }
.prow .chip, .prow .k, .prow .pj { margin: 0; }
details#pdone > summary { color: var(--cds-text-secondary); }
details#pdone .pgrid { margin-top: var(--cds-spacing-05); }
.pst { display: flex; align-items: center; gap: var(--cds-spacing-03); }
.pst select { width: auto; min-width: 7rem; }
.ptree > li.ptask { display: flex; align-items: flex-start; gap: var(--cds-spacing-03); }
.ptree > li.ptask > form { flex: none; margin: 0; }
.ptree > li.ptask > .tt { flex: 1 1 auto; min-width: 0; }
.ptree .pdue { display: inline; margin-left: var(--cds-spacing-03); }
.padd { margin-top: var(--cds-spacing-05); }
.padd > input[type=text] { flex: 1 1 8rem; }

/* ── 지식 탭(넣기·묻기·검색) ────────────────────────────────────────── */
.ph .wsearch { display: flex; align-items: center; gap: var(--cds-spacing-03); flex: 1 1 18rem; max-width: 30rem; margin: 0; }
.ph .wsearch input[type=search] { flex: 1 1 auto; }
.ph .wsearch .btn { flex: none; }
.wask-card h3 .chip { margin: 0; }
form.wask { align-items: center; margin-top: var(--cds-spacing-03); }
form.wask > input[type=text] { flex: 1 1 18rem; }
form.wask .btn { flex: none; }
ul.wsr { list-style: none; padding: 0; margin: var(--cds-spacing-05) 0 0; }
ul.wsr > li { padding: var(--cds-spacing-03) 0; margin: 0; border-bottom: 1px solid var(--cds-border-subtle); }
ul.wsr > li:last-child { border-bottom: 0; }
ul.wsr .wsr-snip { display: block; font-size: .875rem; line-height: 1.28572; letter-spacing: .16px; color: var(--cds-text-secondary); }
ul.wsr .wsr-path { display: block; color: var(--cds-text-helper); }
ol.wguide { padding-inline-start: var(--cds-spacing-06); margin: 0; }
ol.wguide > li { margin: var(--cds-spacing-04) 0; line-height: 1.42857; color: var(--cds-text-primary); }
.grid16.wrecent { margin-top: var(--cds-spacing-05); }
.wsrc th, td.wact { white-space: nowrap; }
td.wact form { margin: 0; }
td.wact .btn { margin: 0; }

/* ── 메모 위젯(스프레드시트) ── */
/* .sj-memo(대시보드 위젯 · /memo 풀페이지 공통 루트) · .mtab(시트·글 탭) · .mbar(서식 툴바 —
   스와치 견본색은 서버가 인라인 style로 준다) · .mwrap > table.mgrid(고정 레이아웃 격자,
   헤더 sticky) · td.msel/.mcur(선택 범위·활성 셀) · td.spill(오른쪽 빈 칸으로 흘러넘침) ·
   input.mg-edit(셀을 채우는 편집기). 토큰만 사용 — 셀 색·스와치 색은 전부 인라인(hex 금지). */
.sj-memo { min-width: 0; }
.sj-memo .mtab { display: inline-flex; align-items: center; height: 2rem; padding: 0 var(--cds-spacing-05);
  margin: 0 var(--cds-spacing-02) var(--cds-spacing-03) 0; background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--cds-text-secondary); font-family: inherit; font-size: .875rem; line-height: 1.28572; letter-spacing: .16px; cursor: pointer; }
.sj-memo .mtab:hover { background: var(--cds-background-hover); color: var(--cds-text-primary); }
.sj-memo .mtab.on { color: var(--cds-text-primary); border-bottom-color: var(--cds-border-interactive); font-weight: 600; }
.sj-memo .mtab:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
/* 서식 툴바 */
.sj-memo .mbar { display: flex; align-items: center; gap: var(--cds-spacing-02); flex-wrap: wrap; margin: 0 0 var(--cds-spacing-03); }
.sj-memo .mbar[hidden] { display: none; }   /* display:flex가 UA [hidden]을 이기므로 명시 */
.sj-memo .mbar button { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem;
  padding: 0 var(--cds-spacing-03); margin: 0; background: var(--cds-layer); border: 1px solid var(--cds-border-subtle);
  color: var(--cds-text-secondary); font-family: inherit; font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; cursor: pointer; }
.sj-memo .mbar button:hover { background: var(--cds-layer-hover); color: var(--cds-text-primary); }
.sj-memo .mbar button:active { background: var(--cds-layer-active); }
.sj-memo .mbar button:focus-visible { outline: none; border-color: var(--cds-focus); box-shadow: inset 0 0 0 1px var(--cds-focus); }
.sj-memo .mbar button[data-mb] { font-size: .875rem; font-weight: 600; }
.sj-memo .mbar button[data-mink], .sj-memo .mbar button[data-mfill] { min-width: 1.5rem; height: 1.5rem; padding: 0 var(--cds-spacing-02);
  border-color: var(--cds-border-strong); }   /* 스와치 — 견본색은 인라인 */
.sj-memo .mbar .msep { flex: none; width: 1px; height: 1.5rem; margin: 0 var(--cds-spacing-02); background: var(--cds-border-subtle); }
.sj-memo .mbar .small { margin-left: auto; }
/* 격자 — 스크롤 상자(위젯 26rem · 풀페이지 제한 없음) */
.sj-memo .mwrap { overflow: auto; background: var(--cds-layer); border: 1px solid var(--cds-border-subtle); }
.w .sj-memo .mwrap { max-height: 26rem; }
/* 표 폭은 memo.js 가 인라인 px 로 준다(colgroup 의 모든 col 폭 합) — width:max-content 는 쓰지 않는다:
   내재 키워드는 표의 사용 폭을 "셀 내용의 max-content"로 만들고, 남는 폭이 열에 분배돼
   table-layout:fixed 와 col 지정 폭이 무력화된다(2026-08-22 실측: 긴 글 한 칸이 열을 1560px 로 늘림). */
table.mgrid { table-layout: fixed; border-collapse: separate; border-spacing: 0;
  user-select: none; -webkit-user-select: none; outline: none; }
table.mgrid th, table.mgrid td { width: 6rem; height: 2rem; padding: 0 var(--cds-spacing-03); vertical-align: middle;
  border: 0; border-right: 1px solid var(--cds-border-subtle); border-bottom: 1px solid var(--cds-border-subtle);
  font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; white-space: nowrap; overflow: hidden; }
table.mgrid th { background: var(--cds-layer-accent); color: var(--cds-text-secondary); font-weight: 400; text-align: center; }
table.mgrid thead th { position: sticky; top: 0; z-index: 3; }
table.mgrid th.mrh { position: sticky; left: 0; z-index: 2; }
table.mgrid th.mgc, table.mgrid th.mrh { width: 3rem; }
table.mgrid th.mgc { left: 0; z-index: 4; }
table.mgrid td { position: relative; background: var(--cds-layer); color: var(--cds-text-primary); }
table.mgrid tbody tr:hover td { background: var(--cds-layer); color: var(--cds-text-primary); }   /* 격자엔 행 하이라이트 없음 */
table.mgrid td.mnum { text-align: end; }
table.mgrid td.spill { overflow: visible; z-index: 1; }   /* 오른쪽이 비면 엑셀처럼 흘러넘침(있으면 위 규칙대로 클립) */
/* 여러 줄 셀(⌥Enter) — 줄바꿈대로 보이고 행 높이가 내용만큼 자란다(표 셀의 height 는 최소값).
   가로는 열 폭 안에서 접는다(스필 없음) — 열 폭은 어떤 경우에도 내용이 바꾸지 않는다. */
table.mgrid td.mml { white-space: pre-wrap; overflow-wrap: break-word; vertical-align: top;
  padding: var(--cds-spacing-03); }
table.mgrid td.msel { background: var(--cds-highlight); box-shadow: inset 0 0 0 1px var(--cds-border-interactive); }
table.mgrid td.mcur { box-shadow: inset 0 0 0 2px var(--cds-focus); }
table.mgrid td.mediting { padding: 0; }
/* 셀 편집기 = textarea 하나(⌥Enter 줄바꿈) — 높이는 memo.js 가 scrollHeight 로 키운다.
   절대 배치라 셀 밖으로 자라도 열 폭·행 높이는 그대로다(좁은 열에서도 읽히게 min-width). */
table.mgrid textarea.mg-edit { position: absolute; left: 0; top: 0; z-index: 5;
  width: 100%; min-width: 8rem; height: 2rem; min-height: 2rem; margin: 0; padding: var(--cds-spacing-03);
  background: var(--cds-field); border: 0; color: var(--cds-text-primary);
  font-family: inherit; font-size: .75rem; line-height: 1.33333; letter-spacing: .32px;
  white-space: pre-wrap; overflow: hidden; resize: none;
  outline: 2px solid var(--cds-focus); outline-offset: -2px; }
table.mgrid:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
/* [글] 탭 */
.sj-memo .mtext { display: block; width: 100%; min-height: 18rem; resize: vertical; }
.sj-memo .mtext[hidden] { display: none; }
/* 줌(표·글 공통) — 엑셀 우하단 컨셉. 배율은 memo.js 가 .mwrap·.mtext 에 인라인 zoom 으로 준다(메모별 기억). */
.sj-memo .mzoom { display: flex; align-items: center; justify-content: flex-end; gap: var(--cds-spacing-02);
  margin-top: var(--cds-spacing-03); }
.sj-memo .mzoom button { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.5rem;
  padding: 0 var(--cds-spacing-02); margin: 0; background: var(--cds-layer); border: 1px solid var(--cds-border-subtle);
  color: var(--cds-text-secondary); font-family: inherit; font-size: .75rem; line-height: 1.33333; letter-spacing: .32px;
  cursor: pointer; }
.sj-memo .mzoom button:hover { background: var(--cds-layer-hover); color: var(--cds-text-primary); }
.sj-memo .mzoom button:focus-visible { outline: none; border-color: var(--cds-focus); box-shadow: inset 0 0 0 1px var(--cds-focus); }
.sj-memo .mzoom .mzpct { min-width: 3.25rem; font-variant-numeric: tabular-nums; }
.sj-memo .mzoom[hidden] { display: none; }   /* display:flex가 UA [hidden]을 이기므로 명시 */

/* ── 리스트 행 삭제 버튼(✕) — 행 호버·포커스 시 표시 ── */
table.lst td.ncol { position: relative; padding-right: 2.25rem; }
.lst-del { position: absolute; right: var(--cds-spacing-02); top: 50%; transform: translateY(-50%);
  width: 1.5rem; height: 1.5rem; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; color: var(--cds-text-placeholder);
  font-family: inherit; font-size: .75rem; line-height: 1; cursor: pointer; visibility: hidden; }
tr.lrow:hover .lst-del, .lst-del:focus-visible { visibility: visible; }
.lst-del:hover { background: var(--cds-button-danger-hover); color: var(--cds-text-on-color); }
.lst-del:focus-visible { outline: none; border-color: var(--cds-focus); color: var(--cds-button-danger-secondary); }

/* ── 메모 목록(멀티 문서) ── */
/* .sj-memo = [.mside 문서 목록 12rem] + [.mmain 본문] 2열(671px 미만 세로 적층).
   .mitem = 문서 한 줄(side-link 관례: 현재 항목 배경 selected + 좌측 4px interactive) ·
   .mact(✎·✕) 는 호버·포커스에서만 · input.mren = 그 자리 이름 바꾸기 · .mnone/.mvoid = 빈 안내.
   토큰만 쓴다(hex 0) — 셀 색은 memo.js 가 인라인으로 준다. */
.sj-memo:has(> .mside) { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--cds-spacing-05); }
.sj-memo > .mside { flex: 0 0 12rem; min-width: 0; align-self: stretch; overflow: auto; max-height: 32rem;
  background: var(--cds-layer); border: 1px solid var(--cds-border-subtle); }
.w .sj-memo > .mside { max-height: 26rem; }
.sj-memo > .mmain { flex: 1 1 20rem; min-width: 0; }
@media (max-width: 671px) {
  .sj-memo:has(> .mside) { flex-direction: column; }   /* 671px 미만 = 세로 적층 */
  .sj-memo > .mside { flex: none; width: 100%; max-height: 12rem; }
}
/* 목록 접기(«) — 접으면 목록을 감추고 얇은 손잡이(»)만. 그리드는 플렉스라 남는 폭을 그대로 가져간다.
   상태는 memo.js 가 localStorage 에 기억한다(문서 전환과 무관한 화면 설정). */
.sj-memo .mside-top { display: flex; justify-content: flex-end; padding: var(--cds-spacing-02);
  border-bottom: 1px solid var(--cds-border-subtle); }
.sj-memo .mside-fold, .sj-memo > .mside-open { display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0; background: transparent; border: 1px solid transparent; color: var(--cds-text-secondary);
  font-family: inherit; font-size: .75rem; line-height: 1.33333; cursor: pointer; }
.sj-memo .mside-fold { width: 1.5rem; height: 1.5rem; }
.sj-memo .mside-fold:hover, .sj-memo > .mside-open:hover { background: var(--cds-layer-hover); color: var(--cds-text-primary); }
.sj-memo .mside-fold:focus-visible, .sj-memo > .mside-open:focus-visible { outline: none; border-color: var(--cds-focus); color: var(--cds-text-primary); }
.sj-memo > .mside-open { display: none; }
.sj-memo.side-folded > .mside { display: none; }
.sj-memo.side-folded > .mside-open { display: flex; flex: none; align-self: stretch; align-items: flex-start;
  width: 1.25rem; padding: var(--cds-spacing-03) 0; background: var(--cds-layer); border-color: var(--cds-border-subtle); }
@media (max-width: 671px) {
  .sj-memo.side-folded > .mside-open { align-self: auto; align-items: center; width: 100%; height: 1.5rem; padding: 0; }
}
/* 문서 한 줄 — div[role=button][tabindex=0](중첩 button 금지) · [.mico ▤¶][.mttl 제목][.small MM-DD] */
.sj-memo .mitem { position: relative; display: flex; align-items: center; gap: var(--cds-spacing-03);
  width: 100%; min-height: 2.5rem;
  padding: var(--cds-spacing-03) var(--cds-spacing-05); margin: 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--cds-border-subtle);
  color: var(--cds-text-secondary); font-family: inherit; font-size: .875rem; line-height: 1.28572; letter-spacing: .16px;
  text-align: start; cursor: pointer; }
.sj-memo .mitem:hover { background: var(--cds-background-hover); color: var(--cds-text-primary); }
.sj-memo .mitem:active { background: var(--cds-background-active); }
.sj-memo .mitem[aria-current]:not([aria-current="false"]) { background: var(--cds-background-selected); color: var(--cds-text-primary); font-weight: 600; }
.sj-memo .mitem[aria-current]:not([aria-current="false"])::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--cds-border-interactive); }
.sj-memo .mitem:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.sj-memo .mitem .mico { flex: none; width: 1rem; text-align: center; color: var(--cds-icon-secondary); font-weight: 400; }
.sj-memo .mitem .mttl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-memo .mitem .small { flex: none; color: var(--cds-text-helper); font-weight: 400; }
/* 항목 동작(✎ 이름 · ✕ 삭제) — 호버·포커스에서만(그 동안 갱신일은 감춘다) */
.sj-memo .mact { position: absolute; right: var(--cds-spacing-02); top: 50%; transform: translateY(-50%);
  display: flex; gap: var(--cds-spacing-01); visibility: hidden; }
.sj-memo .mitem:hover .small, .sj-memo .mitem:focus-within .small, .sj-memo .mitem:focus-visible .small { visibility: hidden; }
.sj-memo .mitem:hover .mact, .sj-memo .mitem:focus-within .mact,
.sj-memo .mitem:focus-visible .mact, .sj-memo .mact:focus-within { visibility: visible; }
.sj-memo .mact button { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
  padding: 0; margin: 0; background: transparent; border: 1px solid transparent; color: var(--cds-text-placeholder);
  font-family: inherit; font-size: .75rem; line-height: 1; cursor: pointer; }
.sj-memo .mact button:hover { background: var(--cds-layer-hover); color: var(--cds-text-primary); }
.sj-memo .mact button[data-mdel]:hover { background: var(--cds-button-danger-hover); color: var(--cds-text-on-color); }
.sj-memo .mact button:focus-visible { outline: none; border-color: var(--cds-focus); color: var(--cds-text-primary); }
/* 그 자리 이름 바꾸기 */
.sj-memo input.mren { display: block; width: 100%; height: 1.5rem; padding: 0 var(--cds-spacing-02); margin: 0;
  background: var(--cds-field); border: 0; color: var(--cds-text-primary);
  font-family: inherit; font-size: .875rem; line-height: 1.28572; letter-spacing: .16px;
  outline: 2px solid var(--cds-focus); outline-offset: -2px; }
/* 클립보드 프록시 — ⌘C/⌘X/⌘V 순간에만 포커스를 빌리는 화면 밖 textarea(memo.js가 만든다).
   display:none·크기 0 은 포커스·선택이 안 되므로 1px + opacity 0 으로 숨긴다. */
.sj-memo .mclip { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0;
  border: 0; opacity: 0; pointer-events: none; resize: none; }
/* 새 메모(＋ 표·글) · 빈 안내 */
.sj-memo .mnew { display: flex; gap: var(--cds-spacing-02); padding: var(--cds-spacing-03); }
.sj-memo .mnew [data-mnew] { flex: 1 1 auto; }
.sj-memo .mside > [data-mnew] { margin: var(--cds-spacing-03); }
.sj-memo .mnone { margin: var(--cds-spacing-05); color: var(--cds-text-helper); }
.sj-memo .mvoid { margin: 0 0 var(--cds-spacing-05); color: var(--cds-text-helper); }

/* ── 메모 v3(상태줄·메뉴·리사이즈·찾기) ── */
/* .mstat = 선택 합계 한 줄(.mwrap 바로 아래, 2셀 이상일 때만) · .mmenu = 우클릭 행·열 메뉴
   (kdlg/kmenu 관례의 레이어 카드 — 위치는 memo.js 가 인라인으로 준다) · .mrs = 열 헤더 오른쪽
   5px 리사이즈 존 · .mfind = 찾기 바 한 줄(input 유동) + .mfother(다른 메모 결과) ·
   td.mfhit/.mfhit-cur = 매치 표시. 토큰만 쓴다(hex 0 — lint_css). */
.sj-memo .mstat { display: block; margin-top: var(--cds-spacing-02); color: var(--cds-text-helper);
  text-align: end; font-variant-numeric: tabular-nums; }
.sj-memo .mstat[hidden] { display: none; }   /* display:block이 UA [hidden]을 이기므로 명시 */
/* 우클릭 메뉴 — 위치·표시는 memo.js(.sj-memo 안에 붙어 keys.js 라우터가 양보한다) */
.sj-memo .mmenu { position: fixed; left: 0; top: 0; z-index: 9600; min-width: 12rem;
  padding: var(--cds-spacing-02) 0; background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01); box-shadow: 0 2px 6px var(--cds-shadow); }
.sj-memo .mmi { display: flex; width: 100%; align-items: center; height: 2rem;
  padding: 0 var(--cds-spacing-05); margin: 0; background: transparent; border: 0;
  color: var(--cds-text-primary); font-family: inherit; font-size: .875rem; line-height: 1.28572;
  letter-spacing: .16px; text-align: start; white-space: nowrap; cursor: pointer; }
.sj-memo .mmi:hover { background: var(--cds-layer-hover); }
.sj-memo .mmi:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.sj-memo .mmi.sep { border-top: 1px solid var(--cds-border-subtle); }
/* 열 너비 리사이즈 존 — 헤더(sticky = 위치 기준)의 오른쪽 가장자리 */
table.mgrid th.mch .mrs { position: absolute; right: 0; top: 0; bottom: 0; width: 5px;
  cursor: col-resize; user-select: none; -webkit-user-select: none; }
table.mgrid th.mch .mrs:hover { background: var(--cds-border-interactive); }
body.mresizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }
/* 찾기 바 */
.sj-memo .mfind { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cds-spacing-02);
  margin: 0 0 var(--cds-spacing-03); }
.sj-memo .mfind[hidden] { display: none; }   /* display:flex가 UA [hidden]을 이기므로 명시 */
.sj-memo .mfind input.mfq { flex: 1 1 12rem; min-width: 0; height: 2rem; padding: 0 var(--cds-spacing-03);
  margin: 0; background: var(--cds-field); border: 0; border-bottom: 1px solid var(--cds-border-strong);
  color: var(--cds-text-primary); font-family: inherit; font-size: .875rem; line-height: 1.28572; letter-spacing: .16px;
  -webkit-appearance: none; appearance: none; }   /* type=search 기본 둥근 모서리 제거(WKWebView) */
.sj-memo .mfind input.mfq:focus { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.sj-memo .mfind .mfcnt { flex: none; min-width: 3rem; text-align: end; color: var(--cds-text-helper);
  font-variant-numeric: tabular-nums; }
.sj-memo .mfind .btn { flex: none; height: 2rem; margin: 0; }
/* 다른 메모 결과 — 줄바꿈해 아래로(제목 — n건) */
.sj-memo .mfother { flex: 1 1 100%; display: flex; align-items: center; flex-wrap: wrap; gap: var(--cds-spacing-02); }
.sj-memo .mfother:empty { display: none; }
.sj-memo .mfother .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 매치 표시 — 선택(msel/mcur의 inset box-shadow)과 겹쳐도 보이게 outline으로 */
table.mgrid td.mfhit { outline: 1px solid var(--cds-border-interactive); outline-offset: -1px; }
table.mgrid td.mfhit-cur { outline: 2px solid var(--cds-border-interactive); outline-offset: -2px;
  background: var(--cds-highlight); }

/* ── 일기 필터·검색 ── */
/* .dsearch(제목 줄 안 한 줄 검색 폼) · .fbar.dcnt(결과 건수 줄) · mark(검색 매치 — 토큰만) */
.ph .dsearch { display: flex; align-items: center; gap: var(--cds-spacing-03); flex: 1 1 16rem; max-width: 28rem; margin: 0; }
.ph .dsearch input[type=search] { flex: 1 1 auto; min-width: 0;
  -webkit-appearance: none; appearance: none; }   /* type=search 기본 둥근 모서리 제거(WKWebView) */
.ph .dsearch .btn { flex: none; }
.fbar.dcnt { color: var(--cds-text-primary); }
.fbar:has(+ .fbar) { margin-bottom: var(--cds-spacing-03); }   /* 연도 → 월 → 건수 줄은 촘촘하게 */
td.prev mark, .prev mark { background: var(--cds-highlight); color: var(--cds-text-primary); }
td.prev .chip { margin: 0 0 0 var(--cds-spacing-02); vertical-align: baseline; }

/* ── 할일 v0.5(2026-08-22): 2단 탭 · 그룹/카드 그립 · 월 기간 막대 · 주 기간 띠 · 모달 세그·필드 칩 ── */
/* .tbar.sub(하위 탭 줄) · .pgrip(프로젝트 순서 그립) · .kdrag/.drop-*(드롭 표시 — 역학은 tasks_dnd.js)
   · .cbars/.cbar(달력 기간 막대 — 2026-08-26 .cbar→.cbar 개명: 메모 툴바 .mbar와 충돌) · td.rng(주 뷰 기간 띠) · .mseg(종류 세그) · .fchips(필드 칩).
   토큰만 사용(새 hex 금지). */
.tbar.sub { gap: var(--cds-spacing-05); padding-bottom: var(--cds-spacing-03); margin-top: calc(var(--cds-spacing-05) * -1); }
.seg.subtabs .tab.sm { height: 2rem; padding: 0 var(--cds-spacing-04); background: transparent; color: var(--cds-text-secondary);
  border-right: 0; font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; }
.seg.subtabs .tab.sm:hover { background: var(--cds-background-hover); color: var(--cds-text-primary); }
.seg.subtabs .tab.sm.on { background: var(--cds-layer-selected); color: var(--cds-text-primary); font-weight: 600; box-shadow: inset 0 -2px 0 0 var(--cds-border-interactive); }

/* 그립 — 리스트 행(.lgrip)과 같은 몸짓, 프로젝트 그룹 머리에서 쓰는 것이 .pgrip */
.pgrip { display: inline-block; margin-right: var(--cds-spacing-02); color: var(--cds-text-placeholder); cursor: grab; user-select: none; }
tr.grp:hover .pgrip, .ksec-h:hover .pgrip { color: var(--cds-icon-secondary); }
.pgrip:active { cursor: grabbing; }
.sub-ar { color: var(--cds-text-helper); }

/* 드롭 표시 — 표 행(리스트·주)·프로젝트 그룹 행·칸반 카드/섹션. 끄는 중 = .ldrag(행)·.kdrag(카드) */
tr.grp.ldrag > td, tr.wrow.ldrag > td { opacity: .5; }
tr.wrow.drop-above > td, tr.grp.drop-above > td { box-shadow: inset 0 2px 0 0 var(--cds-border-interactive); }
tr.wrow.drop-below > td, tr.grp.drop-below > td { box-shadow: inset 0 -2px 0 0 var(--cds-border-interactive); }
.kcard.kdrag, .ksec.kdrag { opacity: .5; }
.kcard.drop-above { box-shadow: inset 0 2px 0 0 var(--cds-border-interactive); }
.kcard.drop-below { box-shadow: inset 0 -2px 0 0 var(--cds-border-interactive); }
.kcard.drop-into, .ksec.drop-into, .kcol.drop-into { outline: 2px solid var(--cds-border-interactive); outline-offset: -2px; }
/* 섹션 순서(.pgrip 드래그)는 tasks_dnd.js가 .ksec 자체에 표시를 건다 — 헤더 셀렉터와 함께 둔다 */
.ksec-h.drop-above, .ksec.drop-above { box-shadow: inset 0 2px 0 0 var(--cds-border-interactive); }
.ksec-h.drop-below, .ksec.drop-below { box-shadow: inset 0 -2px 0 0 var(--cds-border-interactive); }
.kcard .kpar { color: var(--cds-text-helper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 월 뷰 기간 막대 — 시작 칸 안에서 --span 칸만큼 뻗는다(격자 gap 1px 보정). 레인 = 겹칠 때 아래로 */
.mcell { position: relative; }
.cbars { height: calc(var(--lanes, 0) * 1.5rem); pointer-events: none; }
.cbar { position: absolute; left: 0; z-index: 1; display: flex; align-items: center; gap: var(--cds-spacing-02);
  top: calc(1.75rem + var(--lane, 0) * 1.5rem); height: 1.25rem; pointer-events: auto;
  width: calc(var(--span, 1) * 100% + (var(--span, 1) - 1) * var(--mgap, 1px));
  padding: 0 var(--cds-spacing-03); background: var(--cds-tag-background-gray); color: var(--cds-tag-color-gray);
  font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; text-decoration: none; overflow: hidden; }
.cbar.range { background: var(--cds-tag-background-blue); color: var(--cds-tag-color-blue); }
.cbar.run { background: var(--cds-tag-background-teal); color: var(--cds-tag-color-teal); }
.cbar:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--cds-border-interactive); }
.cbar:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--cds-focus); }
.cbar.dn { opacity: .5; }
.cbar.cont-l { border-left: 2px dashed var(--cds-border-strong); }     /* 지난 주에서 이어짐 */
.cbar.cont-r { border-right: 2px dashed var(--cds-border-strong); }    /* 다음 주로 이어짐 */
.mbt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
/* 점은 날짜 칸마다 하나 — 막대 폭을 --span 등분한 격자에 깔아 "그날 아래" 자리에 놓는다(끝에 뭉치지 않게) */
.mks { position: absolute; left: 0; right: 0; bottom: .125rem; display: grid; grid-template-columns: repeat(var(--span, 1), minmax(0, 1fr));
  justify-items: center; align-items: center; margin: 0; pointer-events: none; }
.mk { display: block; width: .25rem; height: .25rem; background: currentColor; opacity: .25; }
.mk.plan { opacity: .7; }
.mk.done { opacity: 1; height: .375rem; width: .375rem; }
.mcell.other .cbar { opacity: .6; }

/* 주 뷰 기간 띠 — [시작, 종료] 사이 날짜 칸을 옅게 잇는다 */
table.wk td.dcol.rng { background-image: linear-gradient(var(--cds-highlight), var(--cds-highlight)); }
table.wk td.dcol.rng-s { box-shadow: inset 2px 0 0 0 var(--cds-border-interactive); }
table.wk td.dcol.rng-e { box-shadow: inset -2px 0 0 0 var(--cds-border-interactive); }

/* 모달 — 종류 세그(Task/Subtask) · 필드 칩 */
.row[hidden] { display: none; }   /* display:flex가 UA [hidden]을 이기므로 명시(Subtask일 때만 보이는 상위 Task 줄) */
.mseg { padding: 0; margin: 0 0 var(--cds-spacing-06); border: 0; }
.mseg > legend { padding: 0; color: var(--cds-text-secondary); font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; }
.mseg-o { display: inline-flex; align-items: center; gap: var(--cds-spacing-02); height: 2.5rem; margin-right: var(--cds-spacing-05);
  color: var(--cds-text-primary); font-size: .875rem; line-height: 1.28572; letter-spacing: .16px; }
.mseg-o input { width: 1rem; height: 1rem; margin: 0; }
.mdl-body > .mfield { margin-bottom: var(--cds-spacing-06); }
.mflab { display: block; margin-bottom: var(--cds-spacing-03); color: var(--cds-text-secondary); font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; }
.fchips { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cds-spacing-02); min-height: 2.5rem;
  padding: var(--cds-spacing-02); background: var(--cds-field); border-bottom: 1px solid var(--cds-border-strong); }
.fchips .fchip { border-color: var(--tag-border); cursor: pointer; }
.fchips .fchip:hover { background: var(--tag-hover); }
.fchips .fchip.sel { --tag-bg: var(--cds-background-inverse); --tag-fg: var(--cds-text-inverse); --tag-hover: var(--cds-background-inverse-hover); --tag-border: transparent; }
.fchips .fchip:focus-visible { outline: none; border-color: var(--cds-focus); box-shadow: inset 0 0 0 1px var(--cds-focus); }
.fchips .fnew { flex: 1 1 8rem; min-width: 6rem; height: 1.5rem; padding: 0 var(--cds-spacing-02); margin: 0;
  background: transparent; border: 0; color: var(--cds-text-primary); font-family: inherit; font-size: .75rem; line-height: 1.33333; }
.fchips .fnew:focus { outline: 1px solid var(--cds-focus); outline-offset: -1px; }
#f_project:disabled + #pj_hint, .row #pj_hint { color: var(--cds-text-helper); }

/* ── 21. 모바일 1차 — 폰(≤671px)·터치 (2026-08-26) ──────────────────────
   왜 = 아이폰 홈 화면 앱(PWA)에서 쓰려면 넷이 막힌다.
   ① iOS 는 16px 미만 입력에 포커스하면 화면을 확대해 버린다(되돌아오지 않는다)
   ② 노치·홈 인디케이터가 고정 요소(헤더·하단바)를 먹는다 — viewport-fit=cover 전제 safe-area
   ③ 좌측 레일 48px + 하단 힌트바 40px 가 390px 화면을 갉아먹는다(힌트바는 물리 키보드가 없으면 무용)
   ④ 32px 짜리 상태 칩·계획 버튼은 손가락 최소 44px 에 못 미친다.
   방법 = 토큰 + 미디어쿼리만. 마크업(NAV_ITEMS 7개·.side>.side-items>li>.side-link)은 그대로 두고
   데스크톱 규칙은 건드리지 않는다(env() 는 데스크톱에서 0px 이라 계산값이 같다).
   범위(사용자 확정) = 열람 + 일기 쓰기 + 할일 체크. 메모 그리드·칸반 끌기는 폰에서 열람 위주(배지). */
:root {
  --sj-safe-t: env(safe-area-inset-top, 0px); --sj-safe-b: env(safe-area-inset-bottom, 0px);
  --sj-safe-l: env(safe-area-inset-left, 0px); --sj-safe-r: env(safe-area-inset-right, 0px);
  --sj-tabbar-h: 3.5rem;   /* 하단 탭바 — 아이콘+라벨 2줄, 44px 타깃 확보 */
}
/* safe-area — 모든 폭에 걸지만 데스크톱에서는 env()=0 이라 무변화(스크린샷 회귀 0) */
.hdr { height: calc(3rem + var(--sj-safe-t)); padding-top: var(--sj-safe-t); padding-left: var(--sj-safe-l); padding-right: var(--sj-safe-r); }
.side { top: calc(3rem + var(--sj-safe-t)); }
.main { margin-top: calc(3rem + var(--sj-safe-t)); }

/* 터치 기기 — 키 힌트 바·실행 스트립은 자리만 차지한다(KEYMAP 선언은 그대로, keys.js 가 렌더를 건너뛴다) */
@media (pointer: coarse) {
  #kbar, #kstrip { display: none; }
  body.jd.haskbar { padding-bottom: 0; }
  body.jd.haskbar .side { bottom: 0; }
}

@media (max-width: 671px) {
  /* (1) 입력 16px — iOS 자동 확대 차단 */
  input[type=text], input[type=date], input[type=search], input[type=password], select, textarea,
  .login-card input[type=password], .login-card input[type=text] { font-size: 1rem; line-height: 1.5; }
  input[type=text], input[type=date], input[type=search], input[type=password], select { height: 2.75rem; }
  .editor { --ed-face: 400 16px/1.9 "IBM Plex Sans KR", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }   /* 원고 서체 15px → 16px(#ed-src·.ed-bt 공용) */
  .fchips .fnew { font-size: 1rem; height: 2rem; }

  /* (2) 힌트 바 자리 회수 — 좁은 창에서는 탭바와 겹친다(데스크톱 폭에서는 그대로 뜬다) */
  #kbar { display: none; }
  #kstrip { bottom: calc(var(--sj-tabbar-h) + var(--sj-safe-b) + var(--cds-spacing-05)); right: max(var(--cds-spacing-05), var(--sj-safe-r)); }

  /* (3) 좌측 레일 → 하단 탭바. 기본(레일)은 5개(대시보드·메모·일기·할일·조망),
        헤더 ☰ 를 누르면(= nav-rail 해제) 프로젝트·지식까지 7개가 한 줄에 펼쳐진다. */
  .side, html.nav-rail .side {
    top: auto; bottom: 0; left: 0; right: 0; width: auto;
    height: calc(var(--sj-tabbar-h) + var(--sj-safe-b));
    flex-direction: row; align-items: stretch;
    padding: 0 var(--sj-safe-r) var(--sj-safe-b) var(--sj-safe-l);
    border-right: 0; border-top: 1px solid var(--cds-border-subtle-01); transition: none; }
  body.jd.haskbar .side { bottom: 0; }
  .side-items { display: flex; width: 100%; height: 100%; }
  .side-items li { flex: 1 1 0; min-width: 0; }
  html.nav-rail .side-items li:nth-child(5), html.nav-rail .side-items li:nth-child(6) { display: none; }
  .side-link, html.nav-rail .side-link {
    flex-direction: column; justify-content: center; gap: var(--cds-spacing-01);
    height: 100%; min-height: var(--sj-tabbar-h); padding: 0 var(--cds-spacing-02);
    font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; font-weight: 400; overflow: hidden; }
  .side-link .lbl, html.nav-rail .side-link .lbl {
    position: static; width: auto; max-width: 100%; height: auto; overflow: hidden;
    clip: auto; clip-path: none; text-overflow: ellipsis; }
  .side-link .ic, html.nav-rail .side-link .ic { margin-right: 0; font-size: 1rem; line-height: 1; }
  .side-link.on::before { top: 0; right: 0; bottom: auto; left: 0; width: auto; height: 3px; }
  .sfoot, html.nav-rail .sfoot { display: none; }
  .main, html.nav-rail .main {
    margin-left: 0;
    padding-left: max(var(--cds-spacing-05), var(--sj-safe-l));
    padding-right: max(var(--cds-spacing-05), var(--sj-safe-r)); }
  body.jd:not(.login) { padding-bottom: calc(var(--sj-tabbar-h) + var(--sj-safe-b)); }   /* 탭바에 본문이 가리지 않게 */
  body.jd.login { padding: max(var(--cds-spacing-05), var(--sj-safe-t)) max(var(--cds-spacing-05), var(--sj-safe-r)) max(var(--cds-spacing-05), var(--sj-safe-b)) max(var(--cds-spacing-05), var(--sj-safe-l)); }

  /* (4) 손가락 타깃 44px — 칩·계획 버튼은 보이는 크기를 지키고 히트 영역만 넓힌다(가짜 padding) */
  .btn.sm { height: 2.75rem; }
  .pl { position: relative; }
  .pl::after { content: ""; position: absolute; top: -0.375rem; right: -0.375rem; bottom: -0.375rem; left: -0.375rem; }
  .chip.asbtn, a.chip, .mchip, .lst-st, .lst-pri { position: relative; }
  .chip.asbtn::after, a.chip::after, .mchip::after, .lst-st::after, .lst-pri::after {
    content: ""; position: absolute; top: -0.625rem; right: -0.25rem; bottom: -0.625rem; left: -0.25rem; }
  .fold, .khide, .lst-del, .mside-fold { min-width: 2.75rem; min-height: 2.75rem; }

  /* (5) 넓은 표 = 가로 스크롤 격리 + 한 줄 안내(스크롤해도 왼쪽에 붙어 남는다) */
  .tbl, .wkscroll { -webkit-overflow-scrolling: touch; }
  .wkscroll::before, .tbl:has(> table.lst)::before {
    content: "옆으로 넘겨 보세요 →"; display: block; position: sticky; left: 0;
    padding-bottom: var(--cds-spacing-02);
    font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; color: var(--cds-text-helper); }

  /* (6) 메모 — 세로 적층일 때 칸을 화면 폭에 맞춘다.
        align-items:flex-start 그대로면 세로 방향의 가로 크기가 max-content 가 되어
        서식 툴바(.mbar)가 줄바꿈하지 못하고 본문 전체가 1256px 로 부푼다(폰에서 페이지가 옆으로 밀림). */
  .sj-memo:has(> .mside) { align-items: stretch; }
  .sj-memo > .mmain { width: 100%; }

  /* 폰에서는 열람 위주 — 메모 셀 편집·칸반 카드 끌기는 데스크톱에서 */
  .sj-memo:has(> .mside)::before, .kanban::before {
    content: "폰에서는 열람 위주 — 편집·끌기는 데스크톱에서"; flex: 1 1 100%;
    font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; color: var(--cds-text-helper); }

  /* (7) 일기 라이브 에디터·모달 — 좁은 폭에서 넘치지 않게 */
  .ed-live { max-width: none; padding: var(--cds-spacing-05); }
  .editor .ed-head, .editor .ed-head h1 { font-size: 1.75rem; line-height: 1.28572; }
  .editor .ed-meta label, .editor .ed-meta label:last-child { flex: 1 1 100%; }
  .mdl-foot .btn { max-width: none; }
  .login-wrap { flex: 1 1 auto; width: 100%; }   /* body.jd.login(flex) 안에서 main 이 내용 폭(269px)으로 쪼그라든다 — 폰에서는 남는 폭을 다 쓴다 */
}