/* Monoscale theme token system
   All page, modal, menu, card, table, button, chip and form colors should route
   through these variables. Page HTML may still have legacy local CSS, so this file
   provides high-specificity token bridges without storing theme colors in modules. */

:root {
  --ms-font-sans: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ms-font-display: var(--ms-font-sans);
  --ms-font-mono: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
  --ms-text-xs: 11px;
  --ms-text-sm: 12px;
  --ms-text-md: 14px;
  --ms-text-lg: 16px;
  --ms-text-xl: 22px;
  --ms-title-size: 24px;
  --ms-heading-size: 18px;
  --ms-subheading-size: 15px;
  --ms-label-size: 12px;
  --ms-input-font-size: 14px;
  --ms-button-font-family: var(--ms-font-sans);
  --ms-button-font-size: 14px;
  --ms-table-font-size: 13px;
  --ms-modal-title-size: 24px;
  --ms-font-weight-normal: 500;
  --ms-font-weight-medium: 700;
  --ms-font-weight-strong: 900;
  --ms-button-radius: 13px;
  --ms-button-padding-y: 10px;
  --ms-button-padding-x: 16px;
  --ms-button-bg: var(--ms-soft);
  --ms-button-ink: var(--ms-ink);
  --ms-button-border: var(--ms-line);
  --ms-button-hover-bg: color-mix(in srgb, var(--ms-soft) 82%, var(--ms-accent) 18%);
  --ms-button-primary-bg: var(--ms-accent);
  --ms-button-primary-ink: var(--ms-accent-ink);
  --ms-button-primary-border: var(--ms-accent);
  --ms-button-primary-hover-bg: var(--ms-accent-hover);
  --ms-button-secondary-bg: var(--ms-soft);
  --ms-button-secondary-ink: var(--ms-ink);
  --ms-button-secondary-border: var(--ms-line);
  --ms-button-danger-bg: var(--ms-danger-bg);
  --ms-button-danger-ink: var(--ms-danger);
  --ms-button-danger-border: var(--ms-danger-border);
  --ms-top-action-button-bg: var(--ms-button-bg);
  --ms-top-action-button-ink: var(--ms-button-ink);
  --ms-top-action-button-border: var(--ms-button-border);
  --ms-top-action-button-hover-bg: var(--ms-button-hover-bg);
  --ms-top-action-button-radius: var(--ms-button-radius);
  --ms-page-max: 1180px;
  --ms-radius-sm: 12px;
  --ms-radius-md: 16px;
  --ms-radius-lg: 22px;

  --ms-bg: #f5f5f2;
  --ms-bg-gradient: #f5f5f2;
  --ms-panel: #ffffff;
  --ms-panel-solid: #ffffff;
  --ms-panel-2: #f7f6f2;
  --ms-card: #ffffff;
  --ms-card-solid: #ffffff;
  --ms-card-title-font-family: var(--ms-font-display);
  --ms-card-title-size: var(--ms-subheading-size);
  --ms-card-title-ink: var(--ms-ink);
  --ms-card-desc-font-family: var(--ms-font-sans);
  --ms-card-desc-size: var(--ms-text-sm);
  --ms-card-desc-ink: var(--ms-muted);
  --ms-card-label-font-family: var(--ms-font-sans);
  --ms-card-label-size: var(--ms-label-size);
  --ms-card-label-ink: var(--ms-muted);
  --ms-card-value-font-family: var(--ms-font-sans);
  --ms-card-value-size: var(--ms-input-font-size);
  --ms-card-value-ink: var(--ms-ink);
  --ms-input-bg: #ffffff;
  --ms-input-border: #deded8;
  --ms-toggle-bg: var(--ms-panel-2);
  --ms-toggle-ink: var(--ms-ink);
  --ms-toggle-border: var(--ms-line);
  --ms-checkbox-bg: var(--ms-toggle-bg);
  --ms-checkbox-ink: var(--ms-toggle-ink);
  --ms-checkbox-border: var(--ms-toggle-border);
  --ms-checkbox-box-bg: var(--ms-panel-solid);
  --ms-checkbox-box-border: var(--ms-muted);
  --ms-checkbox-checked-bg: var(--ms-accent);
  --ms-checkbox-checked-ink: var(--ms-accent-ink);
  --ms-checkbox-radius: 14px;
  --ms-checkbox-size: 16px;
  --ms-checkbox-font-size: var(--ms-button-font-size);
  --ms-preview-bg: var(--ms-panel-2);
  --ms-preview-ink: var(--ms-muted);
  --ms-preview-border: var(--ms-line);
  --ms-upload-bg: var(--ms-input-bg);
  --ms-upload-button-bg: var(--ms-soft);
  --ms-upload-button-ink: var(--ms-ink);
  --ms-table-bg: #ffffff;
  --ms-table-head-bg: #f7f6f2;
  --ms-table-row-bg: #ffffff;
  --ms-table-hover-bg: color-mix(in srgb, var(--ms-table-row-bg) 86%, var(--ms-accent) 14%);
  --ms-ink: #1f1f1d;
  --ms-muted: #74746f;
  --ms-line: #deded8;
  --ms-soft: #efeee9;
  --ms-accent: #111111;
  --ms-accent-hover: #000000;
  --ms-accent-ink: #ffffff;
  --ms-brand-blue: #0f4f8a;
  --ms-danger: #a11b1b;
  --ms-danger-bg: #fff1f1;
  --ms-danger-border: #f4b4b4;
  --ms-success: #047857;
  --ms-success-bg: #dff7e8;
  --ms-warning: #b45309;
  --ms-warning-bg: #fff7ed;
  --ms-warning-border: #fed7aa;
  --ms-risk-font-size: var(--ms-text-md);
  --ms-risk-radius: 15px;
  --ms-risk-padding-y: 14px;
  --ms-risk-padding-x: 14px;
  --ms-risk-danger-bg: var(--ms-danger-bg);
  --ms-risk-danger-ink: var(--ms-danger);
  --ms-risk-danger-border: var(--ms-danger-border);
  --ms-risk-warn-bg: var(--ms-warning-bg);
  --ms-risk-warn-ink: var(--ms-warning);
  --ms-risk-warn-border: var(--ms-warning-border);
  --ms-risk-good-bg: var(--ms-success-bg);
  --ms-risk-good-ink: var(--ms-success);
  --ms-risk-good-border: rgba(4, 120, 87, .22);
  --ms-badge-bg: var(--ms-chip-bg);
  --ms-badge-ink: var(--ms-chip-ink);
  --ms-badge-border: var(--ms-chip-border);
  --ms-badge-success-bg: var(--ms-success-bg);
  --ms-badge-success-ink: var(--ms-success);
  --ms-badge-warning-bg: var(--ms-warning-bg);
  --ms-badge-warning-ink: var(--ms-warning);
  --ms-badge-danger-bg: var(--ms-danger-bg);
  --ms-badge-danger-ink: var(--ms-danger);
  --ms-table-row-selected-bg: color-mix(in srgb, var(--ms-table-row-bg) 78%, var(--ms-accent) 22%);
  --ms-table-radius: 16px;
  --ms-empty-bg: var(--ms-preview-bg);
  --ms-empty-ink: var(--ms-preview-ink);
  --ms-empty-border: var(--ms-preview-border);
  --ms-chip-bg: var(--ms-soft);
  --ms-chip-ink: var(--ms-ink);
  --ms-chip-border: var(--ms-line);
  --ms-chip-default-bg: #dff7e8;
  --ms-chip-default-ink: #047857;
  --ms-chip-default-border: transparent;
  --ms-sidebar-bg: var(--ms-panel);
  --ms-sidebar-ink: var(--ms-ink);
  --ms-sidebar-muted: var(--ms-muted);
  --ms-header-bg: var(--ms-panel);
  --ms-header-ink: var(--ms-ink);
  --ms-backdrop-filter: none;
  --ms-shadow-card: 0 18px 48px rgba(15, 23, 42, .06);
  --ms-shadow-soft: 0 10px 28px rgba(15, 23, 42, .05);

  --ms-modal-backdrop: rgba(15, 23, 42, .42);
  --ms-modal-bg: var(--ms-panel-solid);
  --ms-modal-bg-solid: var(--ms-panel-solid);
  --ms-modal-header-bg: var(--ms-panel-2);
  --ms-modal-section-bg: var(--ms-card-solid);
  --ms-modal-card-bg: var(--ms-card-solid);
  --ms-modal-table-bg: var(--ms-table-bg);
  --ms-modal-table-head-bg: var(--ms-table-head-bg);
  --ms-modal-input-bg: var(--ms-input-bg);
  --ms-modal-input-border: var(--ms-input-border);
  --ms-modal-text: var(--ms-ink);
  --ms-modal-muted: var(--ms-muted);
  --ms-modal-border: var(--ms-line);
  --ms-modal-radius: 24px;
  --ms-modal-section-radius: 18px;
  --ms-modal-shadow: 0 28px 90px rgba(15, 23, 42, .18);
  --ms-modal-surface-alpha: 100%;
  --ms-modal-backdrop-alpha: 42%;


  /* Phase 42 shared component tokens */
  --ms-table-border: var(--ms-line);
  --ms-table-cell-ink: var(--ms-ink);
  --ms-table-cell-muted: var(--ms-muted);
  --ms-badge-radius: 999px;
  --ms-badge-padding-y: 4px;
  --ms-badge-padding-x: 10px;
  --ms-badge-info-bg: var(--ms-chip-bg);
  --ms-badge-info-ink: var(--ms-chip-ink);
  --ms-badge-info-border: var(--ms-chip-border);
  --ms-badge-success-border: color-mix(in srgb, var(--ms-success) 32%, transparent);
  --ms-badge-warning-border: color-mix(in srgb, var(--ms-warning) 32%, transparent);
  --ms-badge-danger-border: var(--ms-danger-border);
  --ms-message-bg: var(--ms-empty-bg);
  --ms-message-ink: var(--ms-empty-ink);
  --ms-message-border: var(--ms-empty-border);
  --ms-upload-list-bg: var(--ms-card-solid);
  --ms-upload-list-ink: var(--ms-ink);
  --ms-upload-list-border: var(--ms-line);
  --ms-scrollbar-track: color-mix(in srgb, var(--ms-bg) 85%, #000 15%);
  --ms-scrollbar-thumb: color-mix(in srgb, var(--ms-muted) 55%, transparent);
  --ms-scrollbar-thumb-hover: color-mix(in srgb, var(--ms-muted) 78%, transparent);
  --ms-structural-bg: transparent;
  --ms-structural-border: transparent;

  --bg: var(--ms-bg);
  --panel: var(--ms-panel);
  --ink: var(--ms-ink);
  --muted: var(--ms-muted);
  --line: var(--ms-line);
  --soft: var(--ms-soft);
  --accent: var(--ms-accent);
}

html[data-ms-theme="classic"],
body[data-ms-theme="classic"] {
  --ms-bg: #f5f5f2;
  --ms-bg-gradient: #f5f5f2;
  --ms-panel: #ffffff;
  --ms-panel-solid: #ffffff;
  --ms-panel-2: #f7f6f2;
  --ms-card: #ffffff;
  --ms-card-solid: #ffffff;
  --ms-input-bg: #ffffff;
  --ms-input-border: #deded8;
  --ms-table-bg: #ffffff;
  --ms-table-head-bg: #f7f6f2;
  --ms-table-row-bg: #ffffff;
  --ms-table-hover-bg: color-mix(in srgb, var(--ms-table-row-bg) 86%, var(--ms-accent) 14%);
  --ms-ink: #1f1f1d;
  --ms-muted: #74746f;
  --ms-line: #deded8;
  --ms-soft: #efeee9;
  --ms-accent: #111111;
  --ms-accent-hover: #000000;
  --ms-accent-ink: #ffffff;
  --ms-brand-blue: #0f4f8a;
  --ms-shadow-card: 0 18px 48px rgba(15, 23, 42, .06);
  --ms-shadow-soft: 0 10px 28px rgba(15, 23, 42, .05);
  color-scheme: light;
}

html[data-ms-theme="vrin"],
body[data-ms-theme="vrin"] {
  --ms-bg: #0b1117;
  --ms-bg-gradient: radial-gradient(circle at 18% 8%, rgba(95, 120, 255, .20), transparent 30%), radial-gradient(circle at 84% 10%, rgba(64, 145, 108, .16), transparent 28%), linear-gradient(135deg, #070b10 0%, #101821 45%, #151a1d 100%);
  --ms-panel: rgba(20, 27, 35, .78);
  --ms-panel-solid: #141b23;
  --ms-panel-2: rgba(255, 255, 255, .055);
  --ms-card: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
  --ms-card-solid: #17212b;
  --ms-input-bg: rgba(255,255,255,.075);
  --ms-input-border: rgba(255,255,255,.18);
  --ms-toggle-bg: rgba(255,255,255,.075);
  --ms-toggle-ink: #f8fafc;
  --ms-toggle-border: rgba(255,255,255,.18);
  --ms-checkbox-bg: rgba(255,255,255,.075);
  --ms-checkbox-ink: #f8fafc;
  --ms-checkbox-border: rgba(255,255,255,.18);
  --ms-checkbox-box-bg: #141b23;
  --ms-checkbox-box-border: #b8c2cf;
  --ms-checkbox-checked-bg: #5f78ff;
  --ms-checkbox-checked-ink: #ffffff;
  --ms-preview-bg: #111a23;
  --ms-preview-ink: #b8c2cf;
  --ms-preview-border: rgba(255,255,255,.16);
  --ms-upload-bg: rgba(255,255,255,.075);
  --ms-upload-button-bg: rgba(255,255,255,.12);
  --ms-upload-button-ink: #f8fafc;
  --ms-table-bg: #111a23;
  --ms-table-head-bg: #07101a;
  --ms-table-row-bg: #111a23;
  --ms-table-hover-bg: #1d2a36;
  --ms-ink: #f8fafc;
  --ms-muted: #b8c2cf;
  --ms-line: rgba(255,255,255,.145);
  --ms-soft: rgba(255,255,255,.075);
  --ms-accent: #5f78ff;
  --ms-accent-hover: #6f86ff;
  --ms-accent-2: #93c5fd;
  --ms-accent-ink: #ffffff;
  --ms-brand-blue: #8fb3ff;
  --ms-danger: #ff6b6b;
  --ms-danger-bg: rgba(255,107,107,.16);
  --ms-danger-border: rgba(255,107,107,.35);
  --ms-success: #34d399;
  --ms-success-bg: rgba(52,211,153,.14);
  --ms-warning: #fbbf24;
  --ms-warning-bg: rgba(251,191,36,.16);
  --ms-warning-border: rgba(251,191,36,.36);
  --ms-risk-danger-bg: rgba(255,107,107,.20);
  --ms-risk-danger-ink: #ff9c9c;
  --ms-risk-danger-border: rgba(255,107,107,.48);
  --ms-risk-warn-bg: rgba(251,191,36,.18);
  --ms-risk-warn-ink: #fde68a;
  --ms-risk-warn-border: rgba(251,191,36,.42);
  --ms-risk-good-bg: rgba(52,211,153,.16);
  --ms-risk-good-ink: #a7f3d0;
  --ms-risk-good-border: rgba(52,211,153,.36);
  --ms-empty-bg: #111a23;
  --ms-empty-ink: #b8c2cf;
  --ms-empty-border: rgba(255,255,255,.16);
  /* Phase 42 VRIN shared component tuning */
  --ms-table-border: rgba(255,255,255,.14);
  --ms-table-cell-ink: #f8fafc;
  --ms-table-cell-muted: #b8c2cf;
  --ms-badge-info-bg: rgba(147, 197, 253, .14);
  --ms-badge-info-ink: #bfdbfe;
  --ms-badge-info-border: rgba(147, 197, 253, .34);
  --ms-badge-success-border: rgba(52, 211, 153, .34);
  --ms-badge-warning-border: rgba(251, 191, 36, .36);
  --ms-badge-danger-border: rgba(255, 107, 107, .38);
  --ms-message-bg: rgba(255,255,255,.055);
  --ms-message-ink: #dbeafe;
  --ms-message-border: rgba(255,255,255,.14);
  --ms-upload-list-bg: #111a23;
  --ms-upload-list-ink: #f8fafc;
  --ms-upload-list-border: rgba(255,255,255,.14);
  --ms-scrollbar-track: rgba(255,255,255,.08);
  --ms-scrollbar-thumb: rgba(255,255,255,.32);
  --ms-scrollbar-thumb-hover: rgba(255,255,255,.48);
  --ms-chip-bg: rgba(147,197,253,.13);
  --ms-chip-ink: #bfdbfe;
  --ms-chip-border: rgba(147,197,253,.35);
  --ms-chip-default-bg: rgba(52,211,153,.16);
  --ms-chip-default-ink: #a7f3d0;
  --ms-chip-default-border: rgba(52,211,153,.34);
  --ms-sidebar-bg: rgba(9, 14, 21, .76);
  --ms-sidebar-ink: #eaf2ff;
  --ms-sidebar-muted: #cbd5e1;
  --ms-header-bg: rgba(11, 17, 23, .66);
  --ms-header-ink: #ffffff;
  --ms-backdrop-filter: blur(18px);
  --ms-radius-sm: 14px;
  --ms-radius-md: 18px;
  --ms-radius-lg: 24px;
  --ms-shadow-card: 0 26px 70px rgba(0, 0, 0, .34);
  --ms-shadow-soft: 0 16px 44px rgba(0, 0, 0, .26);
  --ms-modal-backdrop: rgba(3, 7, 12, .72);
  --ms-modal-bg: #0d161f;
  --ms-modal-bg-solid: #0d161f;
  --ms-modal-header-bg: #17212b;
  --ms-modal-section-bg: #17212b;
  --ms-modal-card-bg: #17212b;
  --ms-modal-table-bg: #111a23;
  --ms-modal-table-head-bg: #07101a;
  --ms-modal-input-bg: #26313b;
  --ms-modal-input-border: rgba(255,255,255,.18);
  --ms-modal-text: #f8fafc;
  --ms-modal-muted: #b8c2cf;
  --ms-modal-border: rgba(255,255,255,.16);
  --ms-modal-shadow: 0 28px 90px rgba(0,0,0,.46);
  --ms-modal-surface-alpha: 100%;
  --ms-modal-backdrop-alpha: 72%;
  color-scheme: dark;
}

html[data-ms-theme="graphite"],
body[data-ms-theme="graphite"] {
  --ms-bg: #ecebea;
  --ms-bg-gradient: linear-gradient(135deg, #ecebea 0%, #f5f5f4 58%, #e1e3e6 100%);
  --ms-panel: #ffffff;
  --ms-panel-solid: #ffffff;
  --ms-panel-2: #f1f2f4;
  --ms-card: #ffffff;
  --ms-card-solid: #ffffff;
  --ms-input-bg: #ffffff;
  --ms-input-border: #d7dbe2;
  --ms-table-bg: #ffffff;
  --ms-table-head-bg: #eef0f3;
  --ms-table-row-bg: #ffffff;
  --ms-table-hover-bg: color-mix(in srgb, var(--ms-table-row-bg) 86%, var(--ms-accent) 14%);
  --ms-ink: #111827;
  --ms-muted: #5f6b7b;
  --ms-line: #d7dbe2;
  --ms-soft: #f1f2f4;
  --ms-accent: #293548;
  --ms-accent-hover: #1f2937;
  --ms-accent-ink: #ffffff;
  --ms-brand-blue: #293548;
  --ms-chip-bg: #f4f5f6;
  --ms-chip-ink: #202733;
  --ms-chip-border: #d7dbe2;
  --ms-shadow-card: 0 18px 50px rgba(17, 24, 39, .08);
  color-scheme: light;
}

html[data-ms-theme="grantfinder"],
body[data-ms-theme="grantfinder"] {
  --ms-bg: #f6f8fb;
  --ms-bg-gradient: linear-gradient(135deg, #f6f8fb 0%, #eef4ff 56%, #f7fbff 100%);
  --ms-panel: #ffffff;
  --ms-panel-solid: #ffffff;
  --ms-panel-2: #f3f6fb;
  --ms-card: #ffffff;
  --ms-card-solid: #ffffff;
  --ms-input-bg: #ffffff;
  --ms-input-border: #dce3ee;
  --ms-table-bg: #ffffff;
  --ms-table-head-bg: #eef4ff;
  --ms-table-row-bg: #ffffff;
  --ms-table-hover-bg: color-mix(in srgb, var(--ms-table-row-bg) 86%, var(--ms-accent) 14%);
  --ms-ink: #162033;
  --ms-muted: #697386;
  --ms-line: #dce3ee;
  --ms-soft: #eef4ff;
  --ms-accent: #315efb;
  --ms-accent-hover: #234be0;
  --ms-accent-ink: #ffffff;
  --ms-brand-blue: #315efb;
  --ms-chip-bg: #eef4ff;
  --ms-chip-ink: #24406f;
  --ms-chip-border: #dbe7ff;
  --ms-shadow-card: 0 18px 48px rgba(49, 94, 251, .08);
  color-scheme: light;
}

html[data-ms-theme], body[data-ms-theme] {
  background: var(--ms-bg-gradient) !important;
}

body[data-ms-theme] {
  color: var(--ms-ink);
  font-family: var(--ms-font-sans);
}
body[data-ms-theme] * {
  border-color: var(--ms-line);
}
body[data-ms-theme] .card,
body[data-ms-theme] .panel,
body[data-ms-theme] .section,
body[data-ms-theme] .modal,
body[data-ms-theme] .modal-card,
body[data-ms-theme] .setting-block,
body[data-ms-theme] .list-card,
body[data-ms-theme] .auth-card,
body[data-ms-theme] .ms-portal-card,
body[data-ms-theme] .ms-summary-card,
body[data-ms-theme] .ms-partner-profile-card,
body[data-ms-theme] .ms-portal-status,
body[data-ms-theme] .notice-card,
body[data-ms-theme] .program-card,
body[data-ms-theme] .bid-card,
body[data-ms-theme] .assignment-card,
body[data-ms-theme] .info-card,
body[data-ms-theme] .summary-card,
body[data-ms-theme] .business-notice-card,
body[data-ms-theme] .stat,
body[data-ms-theme] .table-wrap,
body[data-ms-theme] .team-table-scroll,
body[data-ms-theme] .share-member-list,
body[data-ms-theme] .customer-mentoring-list,
body[data-ms-theme] .customer-mentoring-consent,
body[data-ms-theme] .customer-risk-card,
body[data-ms-theme] .quote-view-card,
body[data-ms-theme] .customer-doc-card,
body[data-ms-theme] .customer-spec-card,
body[data-ms-theme] .preview-card,
body[data-ms-theme] .customer-file-card,
body[data-ms-theme] .detail-card,
body[data-ms-theme] .file-card,
body[data-ms-theme] .partner-pdf-host,
body[data-ms-theme] .partner-cad-host,
body[data-ms-theme] .ms-table-scroll,
body[data-ms-theme] .ms-info-table,
body[data-ms-theme] .ms-attachment-card,
body[data-ms-theme] .ms-public-toggle-block,
body[data-ms-theme] .partner-rating-box,
body[data-ms-theme] .customer-footer-links,
body[data-ms-theme] .business-notice-modal-content,
body[data-ms-theme] .profile-modal .modal-card,
body[data-ms-theme] .profile-modal .modal-body,
body[data-ms-theme] .profile-modal .modal-head,
body[data-ms-theme] .modal-head,
body[data-ms-theme] .modal-body,
body[data-ms-theme] .detail-subtabs,
body[data-ms-theme] .prd-application {
  background: var(--ms-card) !important;
  border-color: var(--ms-line) !important;
  color: var(--ms-ink) !important;
  box-shadow: var(--ms-shadow-card);
}
body[data-ms-theme="vrin"] .card,
body[data-ms-theme="vrin"] .panel,
body[data-ms-theme="vrin"] .section,
body[data-ms-theme="vrin"] .setting-block,
body[data-ms-theme="vrin"] .summary-card,
body[data-ms-theme="vrin"] .business-notice-card,
body[data-ms-theme="vrin"] .table-wrap,
body[data-ms-theme="vrin"] .option-manager-card {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
body[data-ms-theme] .ms-app-header,
body[data-ms-theme] .top.ms-app-header,
body[data-ms-theme] .topbar,
body[data-ms-theme] .portal-header,
body[data-ms-theme] header,
body[data-ms-theme] .header {
  background: var(--ms-header-bg) !important;
  color: var(--ms-header-ink) !important;
  border-color: var(--ms-line) !important;
  box-shadow: var(--ms-shadow-soft);
  -webkit-backdrop-filter: var(--ms-backdrop-filter);
  backdrop-filter: var(--ms-backdrop-filter);
}
body[data-ms-theme] aside,
body[data-ms-theme] .sidebar,
body[data-ms-theme] .side,
body[data-ms-theme] nav {
  background: var(--ms-sidebar-bg) !important;
  color: var(--ms-sidebar-ink) !important;
  border-color: var(--ms-line) !important;
  -webkit-backdrop-filter: var(--ms-backdrop-filter);
  backdrop-filter: var(--ms-backdrop-filter);
}
body[data-ms-theme] h1,
body[data-ms-theme] h2,
body[data-ms-theme] h3,
body[data-ms-theme] h4,
body[data-ms-theme] .brand,
body[data-ms-theme] .logo,
body[data-ms-theme] .ms-app-title,
body[data-ms-theme] .ms-app-brand,
body[data-ms-theme] strong,
body[data-ms-theme] b {
  color: var(--ms-ink);
}
body[data-ms-theme] .muted,
body[data-ms-theme] .sub,
body[data-ms-theme] .desc,
body[data-ms-theme] .caption,
body[data-ms-theme] small,
body[data-ms-theme] .ms-portal-sub,
body[data-ms-theme] .empty,
body[data-ms-theme] .access-note,
body[data-ms-theme] .status-text,
body[data-ms-theme] .item-meta {
  color: var(--ms-muted) !important;
}
body[data-ms-theme] input,
body[data-ms-theme] select,
body[data-ms-theme] textarea,
body[data-ms-theme] .input-like,
body[data-ms-theme] .readonly-amount {
  background: var(--ms-input-bg) !important;
  color: var(--ms-ink) !important;
  border-color: var(--ms-input-border) !important;
  box-shadow: none;
}
body[data-ms-theme] input::placeholder,
body[data-ms-theme] textarea::placeholder {
  color: color-mix(in srgb, var(--ms-muted) 66%, transparent);
}
body[data-ms-theme] select option {
  background: var(--ms-panel-solid);
  color: var(--ms-ink);
}
body[data-ms-theme] input:focus,
body[data-ms-theme] select:focus,
body[data-ms-theme] textarea:focus {
  outline: 3px solid color-mix(in srgb, var(--ms-accent) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--ms-accent) 72%, var(--ms-input-border)) !important;
}
body[data-ms-theme] button,
body[data-ms-theme] .btn,
body[data-ms-theme] .ms-app-button,
body[data-ms-theme] .ms-page-btn,
body[data-ms-theme] a.button,
body[data-ms-theme] .secondary,
body[data-ms-theme] .detail-subtab,
body[data-ms-theme] .ms-accordion-toggle,
body[data-ms-theme] .business-apply-btn,
body[data-ms-theme] .business-notice-page-btn,
body[data-ms-theme] .file-actions a {
  background: var(--ms-soft) !important;
  color: var(--ms-ink) !important;
  border-color: var(--ms-line) !important;
  box-shadow: none;
}
body[data-ms-theme] button:hover,
body[data-ms-theme] .btn:hover,
body[data-ms-theme] .ms-page-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ms-soft) 82%, var(--ms-accent) 18%) !important;
}
body[data-ms-theme] .primary,
body[data-ms-theme] button.primary,
body[data-ms-theme] .btn-primary,
body[data-ms-theme] .ms-app-primary,
body[data-ms-theme] .ms-page-btn.active,
body[data-ms-theme] .nav-item.active,
body[data-ms-theme] .nav-item.active:hover,
body[data-ms-theme] .nav-sub-item.active,
body[data-ms-theme] .steps .step.active {
  background: var(--ms-accent) !important;
  color: var(--ms-accent-ink) !important;
  border-color: var(--ms-accent) !important;
}
body[data-ms-theme] .nav-item,
body[data-ms-theme] .nav-sub-item {
  color: var(--ms-sidebar-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
}
body[data-ms-theme] .nav-item:hover,
body[data-ms-theme] .nav-sub-item:hover {
  background: color-mix(in srgb, var(--ms-soft) 74%, transparent) !important;
  color: var(--ms-sidebar-ink) !important;
  border-color: var(--ms-line) !important;
}
body[data-ms-theme] button.danger,
body[data-ms-theme] .danger {
  background: var(--ms-danger-bg) !important;
  color: var(--ms-danger) !important;
  border-color: var(--ms-danger-border) !important;
}
body[data-ms-theme] table,
body[data-ms-theme] tbody,
body[data-ms-theme] tr {
  background: var(--ms-table-row-bg) !important;
  color: var(--ms-ink) !important;
}
body[data-ms-theme] th,
body[data-ms-theme] .ms-info-table th,
body[data-ms-theme] .ms-table-scroll th {
  background: var(--ms-table-head-bg) !important;
  color: var(--ms-ink) !important;
  border-color: var(--ms-line) !important;
}
body[data-ms-theme] td,
body[data-ms-theme] .ms-info-table td,
body[data-ms-theme] .ms-table-scroll td {
  color: var(--ms-ink) !important;
  border-color: var(--ms-line) !important;
}
body[data-ms-theme] .badge,
body[data-ms-theme] .status,
body[data-ms-theme] .pill,
body[data-ms-theme] .tag,
body[data-ms-theme] .risk-category-badge,
body[data-ms-theme] .chip {
  background: var(--ms-chip-bg) !important;
  color: var(--ms-chip-ink) !important;
  border: 1px solid var(--ms-chip-border) !important;
}
body[data-ms-theme] .risk-level-badge {
  background: var(--ms-warning-bg) !important;
  color: var(--ms-warning) !important;
  border: 1px solid color-mix(in srgb, var(--ms-warning) 28%, transparent) !important;
}
body[data-ms-theme] .risk-level-badge.danger,
body[data-ms-theme] .risk-level-badge.high {
  background: var(--ms-danger-bg) !important;
  color: var(--ms-danger) !important;
  border-color: var(--ms-danger-border) !important;
}
body[data-ms-theme] .customer-footer {
  background: var(--ms-panel-solid) !important;
  border-color: var(--ms-line) !important;
}
body[data-ms-theme] a { color: var(--ms-brand-blue); }
body[data-ms-theme] hr { border-color: var(--ms-line) !important; }

/* Shared option/chip management pages */
body[data-ms-theme] .option-manager-card {
  background: var(--ms-card) !important;
  border-color: var(--ms-line) !important;
  color: var(--ms-ink) !important;
}
body[data-ms-theme] .option-pill {
  background: var(--ms-chip-bg) !important;
  border-color: var(--ms-chip-border) !important;
  color: var(--ms-chip-ink) !important;
}
body[data-ms-theme] .option-pill.is-default::after {
  background: var(--ms-chip-default-bg) !important;
  color: var(--ms-chip-default-ink) !important;
  border: 1px solid var(--ms-chip-default-border) !important;
}
body[data-ms-theme] .option-editor-row {
  background: var(--ms-panel-2) !important;
  border-color: var(--ms-line) !important;
  color: var(--ms-ink) !important;
}
body[data-ms-theme] .option-editor-row .check-default { color: var(--ms-muted) !important; }

/* Product Builder active steps share menu active tokens. */
body[data-ms-theme] .steps .step.active,
body[data-ms-theme] aside .steps .step.active {
  background: var(--ms-accent) !important;
  color: var(--ms-accent-ink) !important;
  border-color: color-mix(in srgb, var(--ms-accent) 68%, var(--ms-line)) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ms-accent) 22%, transparent) !important;
}
body[data-ms-theme] .steps .step.done:not(.active),
body[data-ms-theme] aside .steps .step.done:not(.active) {
  background: var(--ms-soft) !important;
  color: var(--ms-ink) !important;
  border-color: var(--ms-line) !important;
}
body[data-ms-theme] .steps .step:not(.active):hover {
  background: color-mix(in srgb, var(--ms-accent) 18%, var(--ms-soft)) !important;
  color: var(--ms-ink) !important;
  border-color: color-mix(in srgb, var(--ms-accent) 42%, var(--ms-line)) !important;
}


/* Card text token bridge
   카드 내부 제목, 설명, 라벨, 값 텍스트를 공통 테마 토큰으로 관리합니다.
   신청서 작성 페이지의 기업현황/주요사항/기능요구사항 카드와 Live PRD Preview 카드가 같은 규칙을 사용합니다. */
body[data-ms-theme] .card h2,
body[data-ms-theme] .card h3,
body[data-ms-theme] .card .card-title,
body[data-ms-theme] .card .section-title,
body[data-ms-theme] .card .field-title,
body[data-ms-theme] .summary-card h2,
body[data-ms-theme] .preview-card h2,
body[data-ms-theme] .business-notice-card h3,
body[data-ms-theme] .program-card h3,
body[data-ms-theme] .info-card h3,
body[data-ms-theme] .detail-card h3,
body[data-ms-theme] .customer-doc-card h3,
body[data-ms-theme] .customer-spec-card h3 {
  font-family: var(--ms-card-title-font-family, var(--ms-font-display)) !important;
  font-size: var(--ms-card-title-size, var(--ms-subheading-size)) !important;
  color: var(--ms-card-title-ink, var(--ms-ink)) !important;
  font-weight: var(--ms-font-weight-strong) !important;
}
body[data-ms-theme] .card .helper,
body[data-ms-theme] .card .desc,
body[data-ms-theme] .card .caption,
body[data-ms-theme] .card .muted,
body[data-ms-theme] .card p.helper,
body[data-ms-theme] .summary-card .helper,
body[data-ms-theme] .preview-card .helper,
body[data-ms-theme] .business-notice-card .meta,
body[data-ms-theme] .program-card .meta,
body[data-ms-theme] .info-card .helper,
body[data-ms-theme] .detail-card .helper,
body[data-ms-theme] .customer-doc-card .helper,
body[data-ms-theme] .customer-spec-card .helper {
  font-family: var(--ms-card-desc-font-family, var(--ms-font-sans)) !important;
  font-size: var(--ms-card-desc-size, var(--ms-text-sm)) !important;
  color: var(--ms-card-desc-ink, var(--ms-muted)) !important;
  font-weight: var(--ms-font-weight-normal) !important;
}
body[data-ms-theme] .card label,
body[data-ms-theme] .card .label,
body[data-ms-theme] .card .field-label,
body[data-ms-theme] .card .meta-label,
body[data-ms-theme] .summary-card label,
body[data-ms-theme] .preview-card label,
body[data-ms-theme] .info-card label,
body[data-ms-theme] .detail-card label,
body[data-ms-theme] .customer-doc-card label,
body[data-ms-theme] .customer-spec-card label {
  font-family: var(--ms-card-label-font-family, var(--ms-font-sans)) !important;
  font-size: var(--ms-card-label-size, var(--ms-label-size)) !important;
  color: var(--ms-card-label-ink, var(--ms-muted)) !important;
  font-weight: var(--ms-font-weight-strong) !important;
}
body[data-ms-theme] .card input,
body[data-ms-theme] .card select,
body[data-ms-theme] .card textarea,
body[data-ms-theme] .card .value,
body[data-ms-theme] .card .field-value,
body[data-ms-theme] .summary-card .value,
body[data-ms-theme] .preview-card .value,
body[data-ms-theme] .info-card .value,
body[data-ms-theme] .detail-card .value,
body[data-ms-theme] .customer-doc-card .value,
body[data-ms-theme] .customer-spec-card .value {
  font-family: var(--ms-card-value-font-family, var(--ms-font-sans)) !important;
  font-size: var(--ms-card-value-size, var(--ms-input-font-size)) !important;
  color: var(--ms-card-value-ink, var(--ms-ink)) !important;
}

/* Preview cards use the same token map as the runtime themes. */
.ms-theme-preview-card[data-preview-theme="classic"]{--ms-bg:#f5f5f2;--ms-panel:#ffffff;--ms-accent:#111111;--ms-line:#deded8;--ms-muted:#74746f;--ms-ink:#1f1f1d}
.ms-theme-preview-card[data-preview-theme="vrin"]{--ms-bg:#0b1117;--ms-panel:#17202a;--ms-accent:#5f78ff;--ms-line:rgba(255,255,255,.18);--ms-muted:#b8c2cf;--ms-ink:#f8fafc;color:#f8fafc}
.ms-theme-preview-card[data-preview-theme="graphite"]{--ms-bg:#ecebea;--ms-panel:#ffffff;--ms-accent:#293548;--ms-line:#d7dbe2;--ms-muted:#5f6b7b;--ms-ink:#111827}
.ms-theme-preview-card[data-preview-theme="grantfinder"]{--ms-bg:#f6f8fb;--ms-panel:#ffffff;--ms-accent:#315efb;--ms-line:#dce3ee;--ms-muted:#697386;--ms-ink:#162033}

/* Runtime theme editor */
.theme-editor-shell {
  background: var(--ms-card) !important;
  border: 1px solid var(--ms-line);
  color: var(--ms-ink);
  border-radius: var(--ms-radius-lg);
  padding: 18px;
  box-shadow: var(--ms-shadow-card);
}
.theme-token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.theme-token-field {
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-md);
  padding: 12px;
  background: var(--ms-panel-2);
}
.theme-token-field label {
  display: block;
  font-size: 12px;
  font-weight: 900;
  color: var(--ms-muted);
  margin-bottom: 8px;
}
.theme-token-field input[type="color"] {
  width: 44px;
  height: 38px;
  padding: 0;
}
.theme-token-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.theme-token-row input[type="text"] { flex: 1; min-width: 0; }
.theme-preview-surface {
  border: 1px solid var(--ms-line);
  background: var(--ms-card);
  border-radius: var(--ms-radius-lg);
  padding: 16px;
}
.theme-preview-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--ms-line);
  height: 64px;
}
.theme-preview-strip span:nth-child(1){background:var(--ms-bg)}
.theme-preview-strip span:nth-child(2){background:var(--ms-panel-solid)}
.theme-preview-strip span:nth-child(3){background:var(--ms-card-solid)}
.theme-preview-strip span:nth-child(4){background:var(--ms-input-bg)}
.theme-preview-strip span:nth-child(5){background:var(--ms-accent)}


/* Theme token coverage pass
   Settings/upload/preview areas that used to keep hard-coded white surfaces now use shared theme tokens. */
body[data-ms-theme] .setting-block,
body[data-ms-theme] .settings-grid .setting-block,
body[data-ms-theme] .metric,
body[data-ms-theme] .mail-item,
body[data-ms-theme] .admin-file-card,
body[data-ms-theme] .admin-sketch-file-card,
body[data-ms-theme] .seal-upload-card,
body[data-ms-theme] .upload-box,
body[data-ms-theme] .file-preview,
body[data-ms-theme] .preview,
body[data-ms-theme] .request-preview,
body[data-ms-theme] .theme-editor-side,
body[data-ms-theme] .theme-token-group,
body[data-ms-theme] .theme-token-field,
body[data-ms-theme] .theme-preview-surface {
  background: var(--ms-card) !important;
  color: var(--ms-ink) !important;
  border-color: var(--ms-line) !important;
  box-shadow: var(--ms-shadow-card);
}

body[data-ms-theme] .notice-toggle-box,
body[data-ms-theme] .toggle-row,
body[data-ms-theme] .toggle,
body[data-ms-theme] .ms-public-toggle-card,
body[data-ms-theme] label.toggle,
body[data-ms-theme] label.notice-toggle-box {
  background: var(--ms-toggle-bg) !important;
  color: var(--ms-toggle-ink) !important;
  border-color: var(--ms-toggle-border) !important;
}

body[data-ms-theme] .notice-image-preview,
body[data-ms-theme] .notice-image-preview:empty,
body[data-ms-theme] .admin-sketch-preview,
body[data-ms-theme] .empty-preview,
body[data-ms-theme] .image-preview,
body[data-ms-theme] .logo-preview,
body[data-ms-theme] .file-empty,
body[data-ms-theme] .seal-preview,
body[data-ms-theme] .preview-empty,
body[data-ms-theme] .upload-preview {
  background: var(--ms-preview-bg) !important;
  color: var(--ms-preview-ink) !important;
  border-color: var(--ms-preview-border) !important;
}

body[data-ms-theme] .notice-image-preview img,
body[data-ms-theme] .admin-sketch-preview img,
body[data-ms-theme] .image-preview img,
body[data-ms-theme] .logo-preview img,
body[data-ms-theme] .upload-preview img {
  background: var(--ms-preview-bg) !important;
}

body[data-ms-theme] input[type="file"] {
  background: var(--ms-upload-bg) !important;
  color: var(--ms-muted) !important;
  border-color: var(--ms-input-border) !important;
}
body[data-ms-theme] input[type="file"]::file-selector-button {
  min-height: 34px;
  margin-right: 10px;
  border: 1px solid var(--ms-line);
  border-radius: 10px;
  background: var(--ms-upload-button-bg);
  color: var(--ms-upload-button-ink);
  font-weight: 900;
  cursor: pointer;
}
body[data-ms-theme] input[type="file"]::-webkit-file-upload-button {
  min-height: 34px;
  margin-right: 10px;
  border: 1px solid var(--ms-line);
  border-radius: 10px;
  background: var(--ms-upload-button-bg);
  color: var(--ms-upload-button-ink);
  font-weight: 900;
  cursor: pointer;
}

body[data-ms-theme] input[type="checkbox"],
body[data-ms-theme] input[type="radio"] {
  accent-color: var(--ms-accent) !important;
}

body[data-ms-theme] .footer-link-row {
  background: transparent !important;
  color: var(--ms-ink) !important;
}

body[data-ms-theme] .theme-token-editor-block iframe,
body[data-ms-theme] #themeEditorFrame {
  background: transparent !important;
}


/* Modal opacity token bridge
   모달의 과한 반투명 차이를 막기 위해 모달 표면/백드롭 투명도를 공통 토큰으로 통일합니다.
   페이지별 CSS가 rgba 배경을 직접 갖고 있어도 이 토큰 레이어가 최종 표면 투명도를 맞춥니다. */
body[data-ms-theme] {
  --ms-modal-surface-bg: color-mix(in srgb, var(--ms-modal-bg-solid) var(--ms-modal-surface-alpha, 100%), transparent);
  --ms-modal-section-surface-bg: color-mix(in srgb, var(--ms-modal-section-bg) var(--ms-modal-surface-alpha, 100%), transparent);
  --ms-modal-card-surface-bg: color-mix(in srgb, var(--ms-modal-card-bg) var(--ms-modal-surface-alpha, 100%), transparent);
  --ms-modal-header-surface-bg: color-mix(in srgb, var(--ms-modal-header-bg) var(--ms-modal-surface-alpha, 100%), transparent);
  --ms-modal-backdrop-surface: color-mix(in srgb, #000000 var(--ms-modal-backdrop-alpha, 42%), transparent);
}
body[data-ms-theme] .modal-backdrop,
body[data-ms-theme] .modal-overlay,
body[data-ms-theme] .template-modal,
body[data-ms-theme] .preview-modal {
  background: var(--ms-modal-backdrop-surface) !important;
}
body[data-ms-theme] .modal,
body[data-ms-theme] .modal-card,
body[data-ms-theme] .template-panel,
body[data-ms-theme] .preview-dialog,
body[data-ms-theme] .business-notice-modal .modal-card,
body[data-ms-theme] .customer-mentoring-modal .modal-card,
body[data-ms-theme] .customer-mentoring-view .modal-card,
body[data-ms-theme] .customer-mentoring-print-preview .modal-card,
body[data-ms-theme] .company-detail-modal .modal,
body[data-ms-theme] .program-modal .modal,
body[data-ms-theme] .support-notice-editor-modal .modal,
body[data-ms-theme] .quote-modal .modal,
body[data-ms-theme] .requirements-modal .modal,
body[data-ms-theme] .partner-match-modal .modal,
body[data-ms-theme] .partner-search-modal .modal,
body[data-ms-theme] .mentoring-modal .modal,
body[data-ms-theme] .mentoring-editor-modal .modal,
body[data-ms-theme] .attachment-modal .modal,
body[data-ms-theme] .partner-admin-form-modal,
body[data-ms-theme] .user-add-modal,
body[data-ms-theme] .profile-modal .modal-card,
body[data-ms-theme] .profile-modal .modal-body,
body[data-ms-theme] .partner-rating-modal .modal {
  background: var(--ms-modal-surface-bg) !important;
  border-color: var(--ms-modal-border) !important;
  box-shadow: var(--ms-modal-shadow) !important;
}
body[data-ms-theme] .modal-head,
body[data-ms-theme] .modal-header,
body[data-ms-theme] .template-head,
body[data-ms-theme] .template-footer,
body[data-ms-theme] .profile-modal .modal-head {
  background: var(--ms-modal-header-surface-bg) !important;
  border-color: var(--ms-modal-border) !important;
}
body[data-ms-theme] .modal-body,
body[data-ms-theme] .template-body,
body[data-ms-theme] .modal-actions,
body[data-ms-theme] .modal-footer,
body[data-ms-theme] .business-notice-modal-content,
body[data-ms-theme] .customer-mentoring-print-preview .modal-body,
body[data-ms-theme] .quote-summary-box,
body[data-ms-theme] .quote-total-table,
body[data-ms-theme] .requirements-card,
body[data-ms-theme] .requirements-table-wrap,
body[data-ms-theme] .spec-card,
body[data-ms-theme] .partner-match-card,
body[data-ms-theme] .partner-draft-row,
body[data-ms-theme] .partner-assignment-list,
body[data-ms-theme] .partner-search-list,
body[data-ms-theme] .partner-search-row,
body[data-ms-theme] .partner-picker-card,
body[data-ms-theme] .partner-quote-item-box,
body[data-ms-theme] .setting-block,
body[data-ms-theme] .modal-card .card,
body[data-ms-theme] .template-list-row,
body[data-ms-theme] .item-row,
body[data-ms-theme] .attachment-table-wrap,
body[data-ms-theme] .attachment-uploaded-file,
body[data-ms-theme] .preview-card {
  background: var(--ms-modal-section-surface-bg) !important;
  border-color: var(--ms-modal-border) !important;
}
body[data-ms-theme="vrin"] .modal,
body[data-ms-theme="vrin"] .modal-card,
body[data-ms-theme="vrin"] .template-panel,
body[data-ms-theme="vrin"] .preview-dialog {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Admin dashboard login screen: shared theme-token bridge
   Keep login page colors routed through common theme tokens instead of hardcoded local CSS. */
body[data-ms-theme] .dashboard-login-screen {
  background: var(--ms-bg-gradient) !important;
  color: var(--ms-ink) !important;
}

body[data-ms-theme] .dashboard-login-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--ms-accent) 14%, transparent), transparent 34%);
  opacity: .55;
}

body[data-ms-theme] .login-card {
  position: relative;
  z-index: 1;
  background: var(--ms-panel-solid) !important;
  color: var(--ms-ink) !important;
  border-color: var(--ms-line) !important;
  box-shadow: var(--ms-modal-shadow, var(--ms-shadow-card)) !important;
}

body[data-ms-theme] .login-logo,
body[data-ms-theme] .login-form label {
  color: var(--ms-ink) !important;
}

body[data-ms-theme] .login-desc,
body[data-ms-theme] .login-hint {
  color: var(--ms-muted) !important;
}

body[data-ms-theme] .login-card input {
  background: var(--ms-input-bg) !important;
  color: var(--ms-ink) !important;
  border-color: var(--ms-input-border) !important;
}

body[data-ms-theme] .login-card input::placeholder {
  color: color-mix(in srgb, var(--ms-muted) 68%, transparent) !important;
}

body[data-ms-theme] .login-card button {
  background: var(--ms-accent) !important;
  color: var(--ms-accent-ink) !important;
  border: 1px solid color-mix(in srgb, var(--ms-accent) 80%, var(--ms-line)) !important;
}

body[data-ms-theme] .login-card button:hover {
  background: var(--ms-accent-hover, var(--ms-accent)) !important;
}

body[data-ms-theme] .login-hint {
  background: var(--ms-panel-2) !important;
  border-color: var(--ms-line) !important;
}

body[data-ms-theme] .login-error {
  background: var(--ms-danger-bg) !important;
  color: var(--ms-danger) !important;
  border-color: var(--ms-danger-border) !important;
}


/* Typography and button token bridge
   Font family, font size and button styles are now controlled by shared theme tokens,
   so each page/module should avoid hard-coded font and button values. */
html[data-ms-theme],
body[data-ms-theme] {
  font-family: var(--ms-font-sans) !important;
  font-size: var(--ms-text-md);
  font-weight: var(--ms-font-weight-normal);
}
body[data-ms-theme] h1,
body[data-ms-theme] .page-title,
body[data-ms-theme] .admin-title,
body[data-ms-theme] .login-logo {
  font-family: var(--ms-font-display) !important;
  font-size: var(--ms-title-size) !important;
  font-weight: var(--ms-font-weight-strong) !important;
  letter-spacing: -0.04em;
}
body[data-ms-theme] h2,
body[data-ms-theme] .section-title,
body[data-ms-theme] .modal-title,
body[data-ms-theme] .modal-head h2,
body[data-ms-theme] .modal-header h2,
body[data-ms-theme] .template-head h2 {
  font-family: var(--ms-font-display) !important;
  font-size: var(--ms-heading-size) !important;
  font-weight: var(--ms-font-weight-strong) !important;
  letter-spacing: -0.03em;
}
body[data-ms-theme] h3,
body[data-ms-theme] h4,
body[data-ms-theme] .card-title,
body[data-ms-theme] .field-title,
body[data-ms-theme] .theme-editor-head h3,
body[data-ms-theme] .theme-token-group h4 {
  font-family: var(--ms-font-display) !important;
  font-size: var(--ms-subheading-size) !important;
  font-weight: var(--ms-font-weight-strong) !important;
}
body[data-ms-theme] p,
body[data-ms-theme] .muted,
body[data-ms-theme] .hint,
body[data-ms-theme] .desc,
body[data-ms-theme] .small,
body[data-ms-theme] .caption {
  font-size: var(--ms-text-sm) !important;
  line-height: 1.55;
}
body[data-ms-theme] label,
body[data-ms-theme] th,
body[data-ms-theme] .label,
body[data-ms-theme] .field-label,
body[data-ms-theme] .meta-label {
  font-size: var(--ms-label-size) !important;
  font-weight: var(--ms-font-weight-strong) !important;
}
body[data-ms-theme] input,
body[data-ms-theme] select,
body[data-ms-theme] textarea {
  font-family: var(--ms-font-sans) !important;
  font-size: var(--ms-input-font-size) !important;
  font-weight: var(--ms-font-weight-medium) !important;
}
body[data-ms-theme] table,
body[data-ms-theme] td,
body[data-ms-theme] .table,
body[data-ms-theme] .ms-info-table,
body[data-ms-theme] .ms-table-scroll {
  font-size: var(--ms-table-font-size) !important;
}
body[data-ms-theme] code,
body[data-ms-theme] pre,
body[data-ms-theme] .mono,
body[data-ms-theme] .quote-no,
body[data-ms-theme] .spec-id {
  font-family: var(--ms-font-mono) !important;
}
body[data-ms-theme] .modal-head h2,
body[data-ms-theme] .modal-header h2,
body[data-ms-theme] .template-head h2,
body[data-ms-theme] .requirements-modal h2,
body[data-ms-theme] .quote-modal h2,
body[data-ms-theme] .partner-match-modal h2 {
  font-size: var(--ms-modal-title-size) !important;
}
body[data-ms-theme] button,
body[data-ms-theme] .btn,
body[data-ms-theme] .ms-app-button,
body[data-ms-theme] .ms-page-btn,
body[data-ms-theme] a.button,
body[data-ms-theme] .secondary,
body[data-ms-theme] .detail-subtab,
body[data-ms-theme] .ms-accordion-toggle,
body[data-ms-theme] .business-apply-btn,
body[data-ms-theme] .business-notice-page-btn,
body[data-ms-theme] .file-actions a,
body[data-ms-theme] input[type="file"]::file-selector-button,
body[data-ms-theme] input[type="file"]::-webkit-file-upload-button {
  font-family: var(--ms-button-font-family, var(--ms-font-sans)) !important;
  font-size: var(--ms-button-font-size) !important;
  font-weight: var(--ms-font-weight-strong) !important;
  border-radius: var(--ms-button-radius) !important;
  padding: var(--ms-button-padding-y) var(--ms-button-padding-x) !important;
  background: var(--ms-button-bg) !important;
  color: var(--ms-button-ink) !important;
  border-color: var(--ms-button-border) !important;
}
body[data-ms-theme] button:hover,
body[data-ms-theme] .btn:hover,
body[data-ms-theme] .ms-page-btn:hover:not(:disabled),
body[data-ms-theme] a.button:hover,
body[data-ms-theme] .secondary:hover,
body[data-ms-theme] .detail-subtab:hover,
body[data-ms-theme] .ms-accordion-toggle:hover,
body[data-ms-theme] .business-apply-btn:hover,
body[data-ms-theme] .business-notice-page-btn:hover,
body[data-ms-theme] .file-actions a:hover {
  background: var(--ms-button-hover-bg) !important;
}
body[data-ms-theme] .primary,
body[data-ms-theme] button.primary,
body[data-ms-theme] .btn-primary,
body[data-ms-theme] .ms-app-primary,
body[data-ms-theme] .ms-page-btn.active,
body[data-ms-theme] .nav-item.active,
body[data-ms-theme] .nav-item.active:hover,
body[data-ms-theme] .nav-sub-item.active,
body[data-ms-theme] .steps .step.active,
body[data-ms-theme] .login-card button {
  background: var(--ms-button-primary-bg) !important;
  color: var(--ms-button-primary-ink) !important;
  border-color: var(--ms-button-primary-border) !important;
}
body[data-ms-theme] .primary:hover,
body[data-ms-theme] button.primary:hover,
body[data-ms-theme] .btn-primary:hover,
body[data-ms-theme] .ms-app-primary:hover,
body[data-ms-theme] .login-card button:hover {
  background: var(--ms-button-primary-hover-bg) !important;
}
body[data-ms-theme] .secondary,
body[data-ms-theme] button.secondary,
body[data-ms-theme] .btn-secondary,
body[data-ms-theme] .soft,
body[data-ms-theme] button.soft {
  background: var(--ms-button-secondary-bg) !important;
  color: var(--ms-button-secondary-ink) !important;
  border-color: var(--ms-button-secondary-border) !important;
}
body[data-ms-theme] button.danger,
body[data-ms-theme] .danger,
body[data-ms-theme] .btn-danger,
body[data-ms-theme] .delete-btn,
body[data-ms-theme] .remove-btn {
  background: var(--ms-button-danger-bg) !important;
  color: var(--ms-button-danger-ink) !important;
  border-color: var(--ms-button-danger-border) !important;
}

/* Phase 6: Admin dashboard token coverage for recent activity and request row actions. */
body[data-ms-theme] .activity-item,
body[data-ms-theme] #recentActivityList .activity-item {
  background: var(--ms-card-solid) !important;
  color: var(--ms-ink) !important;
  border: 1px solid var(--ms-line) !important;
  box-shadow: var(--ms-shadow-soft) !important;
}
body[data-ms-theme] .activity-item strong,
body[data-ms-theme] #recentActivityList .activity-item strong {
  color: var(--ms-ink) !important;
  font-family: var(--ms-font-display) !important;
  font-size: var(--ms-text-sm) !important;
  font-weight: var(--ms-font-weight-strong) !important;
}
body[data-ms-theme] .activity-item .muted,
body[data-ms-theme] #recentActivityList .activity-item .muted {
  color: var(--ms-muted) !important;
}
body[data-ms-theme] .request-table .admin-row-actions button,
body[data-ms-theme] .admin-row-actions .small-detail-btn,
body[data-ms-theme] .admin-row-actions .small-quote-btn,
body[data-ms-theme] .admin-row-actions .small-requirements-btn,
body[data-ms-theme] .admin-row-actions .small-spec-btn,
body[data-ms-theme] .admin-row-actions .small-partner-btn,
body[data-ms-theme] .admin-row-actions .small-attachment-btn,
body[data-ms-theme] .admin-row-actions .small-mentoring-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: calc(var(--ms-button-padding-y) - 2px) calc(var(--ms-button-padding-x) - 2px) !important;
  border-radius: var(--ms-button-radius) !important;
  background: var(--ms-button-bg) !important;
  color: var(--ms-button-ink) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: var(--ms-button-font-family, var(--ms-font-sans)) !important;
  font-size: var(--ms-button-font-size) !important;
  font-weight: var(--ms-font-weight-strong) !important;
  white-space: nowrap !important;
}
body[data-ms-theme] .request-table .admin-row-actions button:hover,
body[data-ms-theme] .admin-row-actions .small-detail-btn:hover,
body[data-ms-theme] .admin-row-actions .small-quote-btn:hover,
body[data-ms-theme] .admin-row-actions .small-requirements-btn:hover,
body[data-ms-theme] .admin-row-actions .small-spec-btn:hover,
body[data-ms-theme] .admin-row-actions .small-partner-btn:hover,
body[data-ms-theme] .admin-row-actions .small-attachment-btn:hover,
body[data-ms-theme] .admin-row-actions .small-mentoring-btn:hover {
  background: var(--ms-button-hover-bg) !important;
  color: var(--ms-button-ink) !important;
  border-color: transparent !important;
}
body[data-ms-theme] .admin-row-actions .small-spec-btn:disabled,
body[data-ms-theme] .request-table .admin-row-actions button:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
  filter: grayscale(.16) !important;
}


/* Phase 7: Button typography must use one shared token, including legacy clickable classes. */
body[data-ms-theme] .blue,
body[data-ms-theme] .icon-btn,
body[data-ms-theme] .partner-admin-tab,
body[data-ms-theme] .support-notice-btn,
body[data-ms-theme] .option-pill,
body[data-ms-theme] .option-manager-card .secondary,
body[data-ms-theme] .template-list-row .actions button,
body[data-ms-theme] .mini-actions button,
body[data-ms-theme] .actions button {
  font-family: var(--ms-button-font-family, var(--ms-font-sans)) !important;
  font-size: var(--ms-button-font-size) !important;
  font-weight: var(--ms-font-weight-strong) !important;
}


/* Phase 8: Customer portal token coverage for request tables, shared requests, popup notices and notice dates. */
body[data-ms-theme] .table-scroll,
body[data-ms-theme] .team-table-scroll,
body[data-ms-theme] .shared-card .table-scroll {
  background: var(--ms-table-bg) !important;
  border-color: var(--ms-line) !important;
}
body[data-ms-theme] table,
body[data-ms-theme] .team-table,
body[data-ms-theme] .customer-doc-table,
body[data-ms-theme] .quote-view-table {
  background: var(--ms-table-bg) !important;
  color: var(--ms-ink) !important;
}
body[data-ms-theme] th,
body[data-ms-theme] .team-table th,
body[data-ms-theme] .customer-doc-table th,
body[data-ms-theme] .quote-view-table th {
  background: var(--ms-table-head-bg) !important;
  color: var(--ms-ink) !important;
  border-color: var(--ms-line) !important;
}
body[data-ms-theme] td,
body[data-ms-theme] .team-table td,
body[data-ms-theme] .customer-doc-table td,
body[data-ms-theme] .quote-view-table td {
  background: var(--ms-table-row-bg) !important;
  color: var(--ms-ink) !important;
  border-color: var(--ms-line) !important;
}
body[data-ms-theme] tbody tr:hover td,
body[data-ms-theme] tr:hover td,
body[data-ms-theme] #requestRows tr:hover td,
body[data-ms-theme] #sharedRequestRows tr:hover td,
body[data-ms-theme] .team-table tbody tr:hover td {
  background: var(--ms-table-hover-bg) !important;
  color: var(--ms-ink) !important;
}
body[data-ms-theme] .empty,
body[data-ms-theme] #sharedEmptyState,
body[data-ms-theme] .shared-card .empty {
  background: var(--ms-preview-bg) !important;
  color: var(--ms-preview-ink) !important;
  border-color: var(--ms-preview-border) !important;
}
body[data-ms-theme] .customer-notice-card {
  background: var(--ms-modal-bg-solid) !important;
  color: var(--ms-modal-text) !important;
  border: 1px solid var(--ms-modal-border) !important;
  box-shadow: var(--ms-modal-shadow) !important;
}
body[data-ms-theme] .customer-notice-image {
  background: var(--ms-preview-bg) !important;
}
body[data-ms-theme] .customer-notice-text,
body[data-ms-theme] .customer-notice-text h2,
body[data-ms-theme] .customer-notice-text div {
  color: var(--ms-modal-text) !important;
}
body[data-ms-theme] .customer-notice-bottom {
  background: var(--ms-modal-header-bg) !important;
  color: var(--ms-modal-text) !important;
  border-top: 1px solid var(--ms-modal-border) !important;
}
body[data-ms-theme] .customer-notice-check,
body[data-ms-theme] .customer-notice-check span {
  color: var(--ms-modal-text) !important;
}
body[data-ms-theme] .customer-notice-close {
  background: var(--ms-button-bg) !important;
  color: var(--ms-button-ink) !important;
  border-color: var(--ms-button-border) !important;
}
body[data-ms-theme] .business-notice-dates {
  color: var(--ms-muted) !important;
}
body[data-ms-theme="vrin"] .business-notice-dates,
body[data-ms-theme="vrin"] .business-notice-dates div {
  color: #f8fafc !important;
}

/* Phase 9: Shared card/surface coverage for customer portal and PRD builder.
   Cards in the application-writing page, live PRD preview, shared-request empty blocks,
   popup notices, and generated preview cards now route through common theme tokens. */
body[data-ms-theme] {
  --ms-card-surface-bg: var(--ms-card-solid);
  --ms-card-muted-bg: var(--ms-panel-2);
}

/* Customer portal application list + shared list hover/empty states */
body[data-ms-theme] #requestRows tr,
body[data-ms-theme] #sharedRequestRows tr,
body[data-ms-theme] .team-table tbody tr,
body[data-ms-theme] .request-table tbody tr {
  background: var(--ms-table-row-bg) !important;
  color: var(--ms-ink) !important;
}
body[data-ms-theme] #requestRows tr:hover,
body[data-ms-theme] #sharedRequestRows tr:hover,
body[data-ms-theme] .team-table tbody tr:hover,
body[data-ms-theme] .request-table tbody tr:hover {
  background: var(--ms-table-hover-bg) !important;
}
body[data-ms-theme] #requestRows tr:hover td,
body[data-ms-theme] #sharedRequestRows tr:hover td,
body[data-ms-theme] .team-table tbody tr:hover td,
body[data-ms-theme] .request-table tbody tr:hover td {
  background: var(--ms-table-hover-bg) !important;
  color: var(--ms-ink) !important;
}
body[data-ms-theme] .shared-card,
body[data-ms-theme] .shared-card .empty,
body[data-ms-theme] #sharedEmptyState,
body[data-ms-theme] .empty-row,
body[data-ms-theme] .empty-state {
  background: var(--ms-card-solid) !important;
  color: var(--ms-muted) !important;
  border-color: var(--ms-line) !important;
  box-shadow: var(--ms-shadow-soft) !important;
}

/* Customer popup notice must share modal tokens, including text and bottom bar. */
body[data-ms-theme] .customer-notice-modal .customer-notice-card {
  background: var(--ms-modal-bg-solid) !important;
  color: var(--ms-modal-text) !important;
  border-color: var(--ms-modal-border) !important;
  box-shadow: var(--ms-modal-shadow) !important;
}
body[data-ms-theme] .customer-notice-modal .customer-notice-text,
body[data-ms-theme] .customer-notice-modal .customer-notice-text h2,
body[data-ms-theme] .customer-notice-modal .customer-notice-text div {
  background: var(--ms-modal-bg-solid) !important;
  color: var(--ms-modal-text) !important;
}
body[data-ms-theme] .customer-notice-modal .customer-notice-bottom {
  background: var(--ms-modal-header-bg) !important;
  color: var(--ms-modal-text) !important;
  border-color: var(--ms-modal-border) !important;
}

/* Business notice cards/date color. */
body[data-ms-theme] .business-notice-card,
body[data-ms-theme] .business-notice-page-btn,
body[data-ms-theme] .business-apply-btn {
  background: var(--ms-card-solid) !important;
  color: var(--ms-ink) !important;
  border-color: var(--ms-line) !important;
}
body[data-ms-theme] .business-notice-name,
body[data-ms-theme] .business-notice-title,
body[data-ms-theme] .business-notice-more {
  color: var(--ms-ink) !important;
}
body[data-ms-theme] .business-notice-dates,
body[data-ms-theme] .business-notice-dates * {
  color: var(--ms-muted) !important;
}
body[data-ms-theme="vrin"] .business-notice-dates,
body[data-ms-theme="vrin"] .business-notice-dates * {
  color: #f8fafc !important;
}

/* PRD application-writing page: every card-like box routes through shared card tokens. */
body[data-ms-theme] .preview,
body[data-ms-theme] .doc,
body[data-ms-theme] .output-card,
body[data-ms-theme] .conditional,
body[data-ms-theme] .manual-date-box,
body[data-ms-theme] .check-item,
body[data-ms-theme] .upload-box,
body[data-ms-theme] .file-preview,
body[data-ms-theme] .requirements-table,
body[data-ms-theme] .priority-note,
body[data-ms-theme] .budget-panel,
body[data-ms-theme] .budget-table,
body[data-ms-theme] .feature-requirement-card,
body[data-ms-theme] .feature-admin-field-box,
body[data-ms-theme] .feature-requirement-empty,
body[data-ms-theme] .request-preview,
body[data-ms-theme] .sketch-thumb {
  background: var(--ms-card-solid) !important;
  color: var(--ms-ink) !important;
  border-color: var(--ms-line) !important;
  box-shadow: var(--ms-shadow-soft) !important;
}
body[data-ms-theme] .preview {
  background: var(--ms-panel-solid) !important;
}
body[data-ms-theme] .doc,
body[data-ms-theme] .request-preview {
  background: var(--ms-preview-bg) !important;
  color: var(--ms-ink) !important;
}
body[data-ms-theme] .requirements-table th,
body[data-ms-theme] .budget-table th,
body[data-ms-theme] .mini-table th,
body[data-ms-theme] .requirements-table td,
body[data-ms-theme] .budget-table td,
body[data-ms-theme] .mini-table td {
  border-color: var(--ms-line) !important;
  color: var(--ms-ink) !important;
}
body[data-ms-theme] .requirements-table th,
body[data-ms-theme] .budget-table th,
body[data-ms-theme] .mini-table th,
body[data-ms-theme] .budget-table td:first-child {
  background: var(--ms-table-head-bg) !important;
  color: var(--ms-ink) !important;
}
body[data-ms-theme] .requirements-table td,
body[data-ms-theme] .budget-table td,
body[data-ms-theme] .mini-table td {
  background: var(--ms-table-row-bg) !important;
}
body[data-ms-theme] .check-item input {
  accent-color: var(--ms-accent) !important;
}

/* Live PRD preview iframe/module: box/card/list-item surfaces should not keep hard-coded light colors. */
body[data-ms-theme] .subtabs,
body[data-ms-theme] .box,
body[data-ms-theme] .list-item,
body[data-ms-theme] .print-doc,
body[data-ms-theme] .viewer,
body[data-ms-theme] .prd-lines,
body[data-ms-theme] .customer-doc-box,
body[data-ms-theme] .quote-view-box,
body[data-ms-theme] .quote-view-totals,
body[data-ms-theme] .quote-view-total-row,
body[data-ms-theme] .customer-spec-head,
body[data-ms-theme] .customer-spec-field,
body[data-ms-theme] .customer-spec-id,
body[data-ms-theme] .prd-paper,
body[data-ms-theme] .admin-like-preview,
body[data-ms-theme] .admin-like-doc {
  background: var(--ms-card-solid) !important;
  color: var(--ms-ink) !important;
  border-color: var(--ms-line) !important;
}
body[data-ms-theme] .box strong,
body[data-ms-theme] .customer-doc-box span,
body[data-ms-theme] .quote-view-box span,
body[data-ms-theme] .customer-spec-field span,
body[data-ms-theme] .file-card .muted {
  color: var(--ms-muted) !important;
}
body[data-ms-theme] .info-table,
body[data-ms-theme] .info-table th,
body[data-ms-theme] .info-table td,
body[data-ms-theme] .customer-doc-table,
body[data-ms-theme] .customer-doc-table th,
body[data-ms-theme] .customer-doc-table td,
body[data-ms-theme] .quote-view-table,
body[data-ms-theme] .quote-view-table th,
body[data-ms-theme] .quote-view-table td {
  border-color: var(--ms-line) !important;
  color: var(--ms-ink) !important;
}
body[data-ms-theme] .info-table th,
body[data-ms-theme] .customer-doc-table th,
body[data-ms-theme] .quote-view-table th {
  background: var(--ms-table-head-bg) !important;
}
body[data-ms-theme] .info-table td,
body[data-ms-theme] .customer-doc-table td,
body[data-ms-theme] .quote-view-table td {
  background: var(--ms-table-row-bg) !important;
}

/* Keep all button typography consistent; default token remains 14px. */
:root { --ms-button-font-size: 14px; }
body[data-ms-theme] button,
body[data-ms-theme] .btn,
body[data-ms-theme] .secondary,
body[data-ms-theme] .primary,
body[data-ms-theme] .danger,
body[data-ms-theme] .business-apply-btn,
body[data-ms-theme] .business-notice-page-btn,
body[data-ms-theme] .tab,
body[data-ms-theme] .file-actions a,
body[data-ms-theme] .small-btn {
  font-family: var(--ms-button-font-family, var(--ms-font-sans)) !important;
  font-size: var(--ms-button-font-size, 14px) !important;
}


/* Phase 11 - Common checkbox/toggle and status-management token coverage
   공개/활성화/권한/기본선택 등 체크박스 UI는 기타 첨부의 공개 토글을 기준으로 통일합니다. */
body[data-ms-theme] :where(
  .ms-public-toggle,
  label.ms-public-toggle,
  .quote-public-wrap,
  .toggle-row,
  .toggle,
  .notice-toggle-box,
  .checkbox-pill,
  .checkbox-row,
  .checkbox-item,
  .check-item,
  .check-default,
  .package-item,
  .feature-option,
  .cad-enable-line,
  .terms-row,
  .partner-access-grid label,
  .access-field-grid label,
  .permission-grid label,
  label.notice-toggle-box
) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--ms-checkbox-border) !important;
  border-radius: var(--ms-checkbox-radius) !important;
  background: var(--ms-checkbox-bg) !important;
  color: var(--ms-checkbox-ink) !important;
  font-family: var(--ms-button-font-family) !important;
  font-size: var(--ms-checkbox-font-size) !important;
  font-weight: var(--ms-font-weight-strong) !important;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
}

body[data-ms-theme] :where(
  .ms-public-toggle,
  label.ms-public-toggle,
  .quote-public-wrap,
  .toggle-row,
  .toggle,
  .notice-toggle-box,
  .checkbox-pill,
  .checkbox-row,
  .checkbox-item,
  .check-item,
  .check-default,
  .package-item,
  .feature-option,
  .cad-enable-line,
  .terms-row,
  .partner-access-grid label,
  .access-field-grid label,
  .permission-grid label,
  label.notice-toggle-box
) input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: var(--ms-checkbox-size) !important;
  height: var(--ms-checkbox-size) !important;
  min-width: var(--ms-checkbox-size) !important;
  margin: 0 !important;
  border: 1.5px solid var(--ms-checkbox-box-border) !important;
  border-radius: 4px !important;
  background: var(--ms-checkbox-box-bg) !important;
  accent-color: var(--ms-checkbox-checked-bg) !important;
  display: inline-grid;
  place-content: center;
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
}

body[data-ms-theme] :where(
  .ms-public-toggle,
  label.ms-public-toggle,
  .quote-public-wrap,
  .toggle-row,
  .toggle,
  .notice-toggle-box,
  .checkbox-pill,
  .checkbox-row,
  .checkbox-item,
  .check-item,
  .check-default,
  .package-item,
  .feature-option,
  .cad-enable-line,
  .terms-row,
  .partner-access-grid label,
  .access-field-grid label,
  .permission-grid label,
  label.notice-toggle-box
) input[type="checkbox"]:checked {
  background: var(--ms-checkbox-checked-bg) !important;
  border-color: var(--ms-checkbox-checked-bg) !important;
}

body[data-ms-theme] :where(
  .ms-public-toggle,
  label.ms-public-toggle,
  .quote-public-wrap,
  .toggle-row,
  .toggle,
  .notice-toggle-box,
  .checkbox-pill,
  .checkbox-row,
  .checkbox-item,
  .check-item,
  .check-default,
  .package-item,
  .feature-option,
  .cad-enable-line,
  .terms-row,
  .partner-access-grid label,
  .access-field-grid label,
  .permission-grid label,
  label.notice-toggle-box
) input[type="checkbox"]:checked::after {
  content: "";
  width: calc(var(--ms-checkbox-size) * .36);
  height: calc(var(--ms-checkbox-size) * .62);
  border: solid var(--ms-checkbox-checked-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

body[data-ms-theme] :where(.ms-public-toggle, .quote-public-wrap, .toggle-row, .toggle, .checkbox-pill):has(input[type="checkbox"]:disabled),
body[data-ms-theme] :where(.ms-public-toggle, .quote-public-wrap, .toggle-row, .toggle, .checkbox-pill).disabled,
body[data-ms-theme] :where(.ms-public-toggle, .quote-public-wrap, .toggle-row, .toggle, .checkbox-pill).is-disabled {
  opacity: .58;
  cursor: not-allowed;
}

body[data-ms-theme] :where(.ms-public-toggle-hint, .quote-public-hint) {
  color: var(--ms-muted) !important;
  font-family: var(--ms-card-desc-font-family) !important;
  font-size: var(--ms-card-desc-size) !important;
}

/* 상태 관리 칸반 */
body[data-ms-theme] #section-status .card,
body[data-ms-theme] #statusKanban,
body[data-ms-theme] .kanban-col,
body[data-ms-theme] .kanban-card {
  color: var(--ms-ink) !important;
}

body[data-ms-theme] .kanban-col {
  background: var(--ms-card) !important;
  border-color: var(--ms-line) !important;
  box-shadow: var(--ms-shadow-soft);
}

body[data-ms-theme] .kanban-card {
  background: var(--ms-card-solid) !important;
  border-color: var(--ms-line) !important;
  box-shadow: var(--ms-shadow-soft);
  font-family: var(--ms-font-sans) !important;
  font-size: var(--ms-table-font-size) !important;
}

body[data-ms-theme] .kanban-col h3,
body[data-ms-theme] .kanban-card strong {
  color: var(--ms-card-title-ink) !important;
  font-family: var(--ms-card-title-font-family) !important;
}

body[data-ms-theme] .kanban-card .muted,
body[data-ms-theme] .kanban-col .muted {
  color: var(--ms-muted) !important;
}

body[data-ms-theme] .kanban-actions button {
  font-family: var(--ms-button-font-family) !important;
  font-size: var(--ms-button-font-size) !important;
  border-radius: var(--ms-button-radius) !important;
  background: var(--ms-button-secondary-bg) !important;
  color: var(--ms-button-secondary-ink) !important;
  border-color: var(--ms-button-secondary-border) !important;
}


/* Phase 12: Risk checker, badge/table/empty-state token coverage.
   Risk Checker and remaining card-like utility surfaces now route through common tokens. */
body[data-ms-theme] :where(.risk, .risk-item, .risk-alert, .risk-check-item) {
  border: 1px solid var(--ms-risk-warn-border) !important;
  border-radius: var(--ms-risk-radius) !important;
  background: var(--ms-risk-warn-bg) !important;
  color: var(--ms-risk-warn-ink) !important;
  padding: var(--ms-risk-padding-y) var(--ms-risk-padding-x) !important;
  font-family: var(--ms-card-desc-font-family) !important;
  font-size: var(--ms-risk-font-size) !important;
  font-weight: var(--ms-font-weight-medium) !important;
  line-height: 1.55 !important;
  box-shadow: none !important;
}

body[data-ms-theme] :where(.risk.danger, .risk-card.danger, .risk-alert.danger, .risk-item.danger) {
  background: var(--ms-risk-danger-bg) !important;
  color: var(--ms-risk-danger-ink) !important;
  border-color: var(--ms-risk-danger-border) !important;
}

body[data-ms-theme] :where(.risk.warn, .risk-card.warn, .risk-alert.warn, .risk-item.warn) {
  background: var(--ms-risk-warn-bg) !important;
  color: var(--ms-risk-warn-ink) !important;
  border-color: var(--ms-risk-warn-border) !important;
}

body[data-ms-theme] :where(.risk.good, .risk.ok, .risk-card.ok, .risk-alert.good, .risk-item.good) {
  background: var(--ms-risk-good-bg) !important;
  color: var(--ms-risk-good-ink) !important;
  border-color: var(--ms-risk-good-border) !important;
}

body[data-ms-theme] :where(.risk strong, .risk-card strong, .risk-alert strong) {
  color: inherit !important;
}

body[data-ms-theme] :where(.risk-card) {
  background: var(--ms-card-solid) !important;
  color: var(--ms-ink) !important;
  border-color: var(--ms-line) !important;
  box-shadow: var(--ms-shadow-soft) !important;
}

body[data-ms-theme] :where(.risk-card-head, .risk-preview-title) {
  color: var(--ms-card-title-ink) !important;
  font-family: var(--ms-card-title-font-family) !important;
  font-size: var(--ms-card-title-size) !important;
}

body[data-ms-theme] :where(.risk-category-badge, .risk-level-badge) {
  background: var(--ms-badge-bg) !important;
  color: var(--ms-badge-ink) !important;
  border: 1px solid var(--ms-badge-border) !important;
  font-family: var(--ms-button-font-family) !important;
  font-size: var(--ms-text-xs) !important;
  font-weight: var(--ms-font-weight-strong) !important;
}

body[data-ms-theme] :where(.risk-level-badge.danger) {
  background: var(--ms-badge-danger-bg) !important;
  color: var(--ms-badge-danger-ink) !important;
  border-color: var(--ms-risk-danger-border) !important;
}

body[data-ms-theme] :where(.risk-level-badge.warn) {
  background: var(--ms-badge-warning-bg) !important;
  color: var(--ms-badge-warning-ink) !important;
  border-color: var(--ms-risk-warn-border) !important;
}

body[data-ms-theme] :where(.risk-level-badge.ok, .risk-level-badge.good) {
  background: var(--ms-badge-success-bg) !important;
  color: var(--ms-badge-success-ink) !important;
  border-color: var(--ms-risk-good-border) !important;
}

body[data-ms-theme] :where(.risk-editor-panel, .risk-editor-row) {
  background: var(--ms-card-solid) !important;
  border-color: var(--ms-line) !important;
  color: var(--ms-ink) !important;
}

body[data-ms-theme] :where(.risk-editor-row select, .risk-editor-row input, .risk-editor-row textarea) {
  background: var(--ms-input-bg) !important;
  color: var(--ms-card-value-ink) !important;
  border-color: var(--ms-input-border) !important;
  font-family: var(--ms-card-value-font-family) !important;
  font-size: var(--ms-card-value-size) !important;
}

body[data-ms-theme] :where(.status-badge, .badge, .pill, .tag, .state-pill) {
  background: var(--ms-badge-bg) !important;
  color: var(--ms-badge-ink) !important;
  border-color: var(--ms-badge-border) !important;
}

body[data-ms-theme] :where(.status-badge.success, .badge.success, .pill.success, .tag.success, .state-pill.success, .status-success) {
  background: var(--ms-badge-success-bg) !important;
  color: var(--ms-badge-success-ink) !important;
}

body[data-ms-theme] :where(.status-badge.warning, .badge.warning, .pill.warning, .tag.warning, .state-pill.warning, .status-warning, .deadline-badge) {
  background: var(--ms-badge-warning-bg) !important;
  color: var(--ms-badge-warning-ink) !important;
}

body[data-ms-theme] :where(.status-badge.danger, .badge.danger, .pill.danger, .tag.danger, .state-pill.danger, .status-danger) {
  background: var(--ms-badge-danger-bg) !important;
  color: var(--ms-badge-danger-ink) !important;
}

body[data-ms-theme] :where(table, .mini-table, .data-table, .request-table, .admin-table) {
  background: var(--ms-table-bg) !important;
  color: var(--ms-ink) !important;
  font-family: var(--ms-font-sans) !important;
  font-size: var(--ms-table-font-size) !important;
}

body[data-ms-theme] :where(table th, .mini-table th, .data-table th, .request-table th, .admin-table th) {
  background: var(--ms-table-head-bg) !important;
  color: var(--ms-ink) !important;
  border-color: var(--ms-line) !important;
}

body[data-ms-theme] :where(table td, .mini-table td, .data-table td, .request-table td, .admin-table td) {
  color: var(--ms-ink) !important;
  border-color: var(--ms-line) !important;
}

body[data-ms-theme] :where(table tr:hover, .data-table tr:hover, .request-table tr:hover, .admin-table tr:hover) td {
  background: var(--ms-table-hover-bg) !important;
}

body[data-ms-theme] :where(.empty, .empty-state, .empty-box, .no-data, .no-result, .preview-empty, .file-empty, .shared-empty, .activity-empty) {
  background: var(--ms-empty-bg) !important;
  color: var(--ms-empty-ink) !important;
  border: 1px solid var(--ms-empty-border) !important;
}

/* Phase 13: Section header, capsule/ID pill and progress-bar token coverage.
   Removes unintended header-box surfaces and routes small rounded ID/status capsules
   plus builder progress bars through editable theme tokens. */
:root {
  --ms-section-header-bg: transparent;
  --ms-section-header-ink: var(--ms-ink);
  --ms-section-header-desc-ink: var(--ms-muted);
  --ms-capsule-bg: var(--ms-chip-bg);
  --ms-capsule-ink: var(--ms-chip-ink);
  --ms-capsule-border: var(--ms-chip-border);
  --ms-capsule-radius: 999px;
  --ms-capsule-padding-y: 6px;
  --ms-capsule-padding-x: 12px;
  --ms-capsule-font-size: var(--ms-text-sm);
  --ms-progress-track-bg: var(--ms-soft);
  --ms-progress-fill-bg: var(--ms-accent);
  --ms-progress-height: 10px;
  --ms-progress-radius: 999px;
  --ms-progress-shadow: 0 0 0 1px var(--ms-line), 0 8px 22px color-mix(in srgb, var(--ms-accent) 18%, transparent);
  --ms-schedule-table-bg: var(--ms-table-bg);
  --ms-schedule-table-head-bg: var(--ms-table-head-bg);
  --ms-schedule-table-line: var(--ms-line);
  --ms-schedule-table-ink: var(--ms-ink);
  --ms-schedule-table-muted: var(--ms-muted);
  --ms-schedule-bar-bg: #d7d7d1;
  --ms-schedule-bar-border: #b9b9b2;
  --ms-schedule-bar-active-bg: var(--ms-accent);
  --ms-schedule-bar-active-border: var(--ms-accent);
  --ms-schedule-bar-height: 14px;
  --ms-schedule-bar-radius: 999px;
}

html[data-ms-theme="vrin"],
body[data-ms-theme="vrin"] {
  --ms-section-header-bg: transparent;
  --ms-section-header-ink: #f8fafc;
  --ms-section-header-desc-ink: #b8c2cf;
  --ms-capsule-bg: rgba(255,255,255,.075);
  --ms-capsule-ink: #f8fafc;
  --ms-capsule-border: rgba(255,255,255,.18);
  --ms-progress-track-bg: rgba(255,255,255,.18);
  --ms-progress-fill-bg: #5f78ff;
  --ms-progress-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 8px 26px rgba(95,120,255,.28);
  --ms-schedule-table-bg: #111a23;
  --ms-schedule-table-head-bg: #07101a;
  --ms-schedule-table-line: rgba(255,255,255,.16);
  --ms-schedule-table-ink: #f8fafc;
  --ms-schedule-table-muted: #b8c2cf;
  --ms-schedule-bar-bg: rgba(255,255,255,.09);
  --ms-schedule-bar-border: rgba(255,255,255,.10);
  --ms-schedule-bar-active-bg: #5f78ff;
  --ms-schedule-bar-active-border: #6f86ff;
  --ms-schedule-bar-height: 14px;
  --ms-schedule-bar-radius: 999px;
}

/* Section/page headers should not become extra dark or light boxes unless the token explicitly says so. */
body[data-ms-theme] :where(.topbar, .section-head, .page-head, .admin-section > .section-head, .builder-section-head) {
  background: var(--ms-section-header-bg) !important;
  color: var(--ms-section-header-ink) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body[data-ms-theme] :where(.topbar h1, .section-head h1, .section-head h2, .page-head h1, .page-head h2) {
  color: var(--ms-section-header-ink) !important;
}
body[data-ms-theme] :where(.topbar .desc, .section-head .muted, .section-head .desc, .page-head .muted, .page-head .desc) {
  color: var(--ms-section-header-desc-ink) !important;
}

/* Small rounded ID/name/status capsules, including requirement specification IDs. */
body[data-ms-theme] :where(.spec-card-id, .spec-id, .customer-spec-id, .id-pill, .round-pill, .capsule, .program-status-pill, .notice-pill, .default-badge) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: var(--ms-capsule-padding-y) var(--ms-capsule-padding-x) !important;
  border-radius: var(--ms-capsule-radius) !important;
  background: var(--ms-capsule-bg) !important;
  color: var(--ms-capsule-ink) !important;
  border: 1px solid var(--ms-capsule-border) !important;
  font-family: var(--ms-font-mono) !important;
  font-size: var(--ms-capsule-font-size) !important;
  font-weight: var(--ms-font-weight-strong) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}
body[data-ms-theme] .spec-card-title :where(strong, .spec-card-id),
body[data-ms-theme] .customer-spec-head :where(strong, .customer-spec-id) {
  flex: 0 0 auto;
}

/* Support-program status/manager surfaces that were still keeping light backgrounds. */
body[data-ms-theme] :where(.program-manager-toolbar, .program-card, .metric, .program-bars, .support-program-editor-table, .support-program-editor-table tbody, .support-program-editor-table tr) {
  background: var(--ms-card-solid) !important;
  color: var(--ms-ink) !important;
  border-color: var(--ms-line) !important;
  box-shadow: var(--ms-shadow-soft) !important;
}
body[data-ms-theme] :where(.program-card h3, .program-manager-toolbar strong, .metric strong) {
  color: var(--ms-card-title-ink) !important;
}
body[data-ms-theme] :where(.program-card .muted, .program-manager-toolbar .muted, .metric span) {
  color: var(--ms-card-desc-ink) !important;
}
body[data-ms-theme] :where(.support-program-editor-table input, .support-program-editor-table textarea, .support-program-editor-table select) {
  background: var(--ms-input-bg) !important;
  color: var(--ms-card-value-ink) !important;
  border-color: var(--ms-input-border) !important;
}

/* Builder progress bar and upload/save progress variants. */
body[data-ms-theme] :where(.progress, .progress-track, .cad-save-progress-bar, .cad-progress-bar) {
  height: var(--ms-progress-height) !important;
  border-radius: var(--ms-progress-radius) !important;
  background: var(--ms-progress-track-bg) !important;
  border: 1px solid color-mix(in srgb, var(--ms-line) 70%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ms-line) 40%, transparent) !important;
  overflow: hidden !important;
}
body[data-ms-theme] .progress > div,
body[data-ms-theme] :where(.progress-fill, #progressBar, .cad-save-progress-bar > div, .cad-progress-bar > div) {
  height: 100% !important;
  border-radius: inherit !important;
  background: var(--ms-progress-fill-bg) !important;
  box-shadow: var(--ms-progress-shadow) !important;
}

/* Legacy document section labels should stay text-only, not boxed. */
body[data-ms-theme] :where(.prd-application .section-title, .section-title) {
  background: transparent !important;
  color: var(--ms-card-title-ink) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}


/* Phase 19: schedule timeline tokens.
   Timeline table and date/week bars are intentionally separated from the general progress bar. */
body[data-ms-theme] :where(.timeline-card .table-wrap, #timelineWrap) {
  background: var(--ms-schedule-table-bg) !important;
  border-color: var(--ms-schedule-table-line) !important;
}
body[data-ms-theme] :where(.timeline-table, .timeline-table tbody, .timeline-table tr, .timeline-table td) {
  background: var(--ms-schedule-table-bg) !important;
  color: var(--ms-schedule-table-ink) !important;
  border-color: var(--ms-schedule-table-line) !important;
}
body[data-ms-theme] .timeline-table th {
  background: var(--ms-schedule-table-head-bg) !important;
  color: var(--ms-schedule-table-ink) !important;
  border-color: var(--ms-schedule-table-line) !important;
}
body[data-ms-theme] .timeline-table :where(.timeline-md, .timeline-task) {
  color: var(--ms-schedule-table-ink) !important;
}
body[data-ms-theme] .timeline-table .week-cell {
  background: var(--ms-schedule-table-bg) !important;
}
body[data-ms-theme] .timeline-table .bar {
  height: var(--ms-schedule-bar-height) !important;
  border-radius: var(--ms-schedule-bar-radius) !important;
  background: var(--ms-schedule-bar-bg) !important;
  border: 1px solid var(--ms-schedule-bar-border) !important;
  display: block !important;
}
body[data-ms-theme] .timeline-table .bar.active {
  background: var(--ms-schedule-bar-active-bg) !important;
  border-color: var(--ms-schedule-bar-active-border) !important;
}


/* Phase 14: product-builder text-only header cleanup and viewer-preserve token defaults. */
:root {
  --ms-viewer-shell-bg: var(--ms-card-solid);
  --ms-viewer-shell-border: var(--ms-line);
  --ms-viewer-toolbar-bg: var(--ms-panel-solid);
  --ms-viewer-toolbar-ink: var(--ms-ink);
  --ms-viewer-preserve-bg: #ffffff;
  --ms-viewer-preserve-ink: #111827;
  --ms-viewer-preserve-border: #d1d5db;
}

html[data-ms-theme="vrin"],
body[data-ms-theme="vrin"] {
  --ms-viewer-shell-bg: var(--ms-card-solid);
  --ms-viewer-shell-border: rgba(255,255,255,.14);
  --ms-viewer-toolbar-bg: var(--ms-panel-solid);
  --ms-viewer-toolbar-ink: #f8fafc;
  --ms-viewer-preserve-bg: #ffffff;
  --ms-viewer-preserve-ink: #111827;
  --ms-viewer-preserve-border: #d1d5db;
}

/* Product Builder top title area is informational text, not a card/header block. */
body.product-builder-page[data-ms-theme] :where(main.product-builder-main > .topbar, .builder-page-head) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  color: var(--ms-section-header-ink) !important;
}
body.product-builder-page[data-ms-theme] :where(main.product-builder-main > .topbar > div, .builder-page-head > div, #pageTitle, #pageDesc) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.product-builder-page[data-ms-theme] #pageTitle {
  color: var(--ms-section-header-ink) !important;
}
body.product-builder-page[data-ms-theme] #pageDesc {
  color: var(--ms-section-header-desc-ink) !important;
}

/* Other text-only page headers should not get a synthetic card surface. */
body[data-ms-theme] :where(.text-only-header, .plain-section-header, .builder-page-head, .section-intro, .form-page-title) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}


/* Phase 14B: flash-free theme boot and stronger text-only builder header cleanup. */
html.ms-theme-resolving body {
  visibility: hidden !important;
}

/* The Product Builder page title area is text-only. It must not inherit generic topbar/card surfaces. */
html[data-ms-theme] body.product-builder-page main.product-builder-main,
body.product-builder-page[data-ms-theme] main.product-builder-main {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-ms-theme] body.product-builder-page main.product-builder-main > .topbar.builder-page-head,
body.product-builder-page[data-ms-theme] main.product-builder-main > .topbar.builder-page-head {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  color: var(--ms-section-header-ink) !important;
}
html[data-ms-theme] body.product-builder-page main.product-builder-main > .topbar.builder-page-head::before,
html[data-ms-theme] body.product-builder-page main.product-builder-main > .topbar.builder-page-head::after,
body.product-builder-page[data-ms-theme] main.product-builder-main > .topbar.builder-page-head::before,
body.product-builder-page[data-ms-theme] main.product-builder-main > .topbar.builder-page-head::after {
  content: none !important;
  display: none !important;
}
html[data-ms-theme] body.product-builder-page main.product-builder-main > .topbar.builder-page-head > div:first-child,
body.product-builder-page[data-ms-theme] main.product-builder-main > .topbar.builder-page-head > div:first-child,
html[data-ms-theme] body.product-builder-page main.product-builder-main > .topbar.builder-page-head #pageTitle,
html[data-ms-theme] body.product-builder-page main.product-builder-main > .topbar.builder-page-head #pageDesc,
body.product-builder-page[data-ms-theme] main.product-builder-main > .topbar.builder-page-head #pageTitle,
body.product-builder-page[data-ms-theme] main.product-builder-main > .topbar.builder-page-head #pageDesc {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-ms-theme] body.product-builder-page main.product-builder-main > .topbar.builder-page-head #pageTitle,
body.product-builder-page[data-ms-theme] main.product-builder-main > .topbar.builder-page-head #pageTitle {
  color: var(--ms-section-header-ink) !important;
}
html[data-ms-theme] body.product-builder-page main.product-builder-main > .topbar.builder-page-head #pageDesc,
body.product-builder-page[data-ms-theme] main.product-builder-main > .topbar.builder-page-head #pageDesc {
  color: var(--ms-section-header-desc-ink) !important;
}

/* Viewer shells follow the theme, but actual file preview content can preserve its native/default surface. */
body[data-ms-theme] :where(
  .admin-file-card,
  .customer-file-card,
  .file-preview-card,
  .attachment-preview-card,
  .cad-drawing-panel,
  .viewer-shell,
  .pdf-viewer-shell,
  .cad-viewer-shell
) {
  background: var(--ms-viewer-shell-bg) !important;
  color: var(--ms-ink) !important;
  border-color: var(--ms-viewer-shell-border) !important;
}
body[data-ms-theme] :where(
  .admin-sketch-pdf,
  .customer-sketch-pdf,
  .pdf-preview,
  .pdf-preview-frame,
  object[type="application/pdf"],
  iframe[src$=".pdf"],
  iframe[src*=".pdf#"],
  .ms-theme-preserve.pdf-surface
) {
  color-scheme: light !important;
  background: var(--ms-viewer-preserve-bg) !important;
  color: var(--ms-viewer-preserve-ink) !important;
  border-color: var(--ms-viewer-preserve-border) !important;
}
body[data-ms-theme] :where(
  .admin-cad-viewer,
  .customer-cad-viewer,
  .cad-viewer-preserve,
  .cad-drawing-body,
  .cad-viewport-preserve
) {
  color-scheme: dark !important;
  background: radial-gradient(circle at 50% 0%, #121a2b 0, #070b12 55%) !important;
  border-color: rgba(255,255,255,.16) !important;
}
body[data-ms-theme] :where(
  .admin-cad-viewer canvas,
  .customer-cad-viewer canvas,
  .cad-viewer-preserve canvas,
  #adminCadViewerCanvas,
  #customerCadViewerCanvas,
  #cadViewport,
  canvas[data-cad-url]
) {
  background: transparent !important;
  color-scheme: dark !important;
}

/* Phase 16: Unified portal login/signup theme bridge.
   The integrated portal login page had legacy local variables and white notice/agreement boxes.
   Scope token bridges to body.portal-login-page so signup, notices and lower help boxes follow the active theme. */
body.portal-login-page[data-ms-theme] {
  background: var(--ms-bg-gradient) !important;
  color: var(--ms-ink) !important;
  font-family: var(--ms-font-sans) !important;
}

body.portal-login-page[data-ms-theme] .wrap {
  background: transparent !important;
}

body.portal-login-page[data-ms-theme] > .wrap > .card {
  background: var(--ms-panel-solid) !important;
  border-color: var(--ms-line) !important;
  color: var(--ms-ink) !important;
  box-shadow: var(--ms-modal-shadow, var(--ms-shadow-card)) !important;
}

body.portal-login-page[data-ms-theme] .hero {
  background: var(--ms-sidebar-bg, var(--ms-panel-solid)) !important;
  color: var(--ms-sidebar-ink, var(--ms-ink)) !important;
  border-right: 1px solid var(--ms-line) !important;
}

body.portal-login-page[data-ms-theme] .hero h1,
body.portal-login-page[data-ms-theme] .panel h2,
body.portal-login-page[data-ms-theme] .modal-head h2,
body.portal-login-page[data-ms-theme] .agreement-title {
  color: var(--ms-ink) !important;
  font-family: var(--ms-font-display) !important;
}

body.portal-login-page[data-ms-theme] .hero p,
body.portal-login-page[data-ms-theme] .muted,
body.portal-login-page[data-ms-theme] .agreement-card .agreement-desc,
body.portal-login-page[data-ms-theme] .field-help {
  color: var(--ms-muted) !important;
}

body.portal-login-page[data-ms-theme] .badge {
  background: var(--ms-chip-bg) !important;
  color: var(--ms-chip-ink) !important;
  border-color: var(--ms-chip-border) !important;
}

body.portal-login-page[data-ms-theme] .panel {
  background: var(--ms-card-solid) !important;
  color: var(--ms-ink) !important;
}

body.portal-login-page[data-ms-theme] label,
body.portal-login-page[data-ms-theme] .agreement-card label,
body.portal-login-page[data-ms-theme] .check-line label {
  color: var(--ms-card-label-ink, var(--ms-ink)) !important;
  font-family: var(--ms-card-label-font-family, var(--ms-font-sans)) !important;
  font-size: var(--ms-card-label-size, var(--ms-label-size)) !important;
}

body.portal-login-page[data-ms-theme] input,
body.portal-login-page[data-ms-theme] select,
body.portal-login-page[data-ms-theme] textarea {
  background: var(--ms-input-bg) !important;
  color: var(--ms-ink) !important;
  border-color: var(--ms-input-border) !important;
  font-family: var(--ms-font-sans) !important;
  font-size: var(--ms-input-font-size) !important;
}

body.portal-login-page[data-ms-theme] input::placeholder,
body.portal-login-page[data-ms-theme] textarea::placeholder {
  color: color-mix(in srgb, var(--ms-muted) 72%, transparent) !important;
}

body.portal-login-page[data-ms-theme] input[readonly],
body.portal-login-page[data-ms-theme] input:disabled,
body.portal-login-page[data-ms-theme] select:disabled,
body.portal-login-page[data-ms-theme] textarea:disabled {
  background: color-mix(in srgb, var(--ms-input-bg) 82%, var(--ms-panel-solid) 18%) !important;
  color: var(--ms-muted) !important;
}

body.portal-login-page[data-ms-theme] button,
body.portal-login-page[data-ms-theme] .button {
  font-family: var(--ms-button-font-family, var(--ms-font-sans)) !important;
  font-size: var(--ms-button-font-size, 14px) !important;
  border-radius: var(--ms-button-radius) !important;
}

body.portal-login-page[data-ms-theme] button.primary {
  background: var(--ms-button-primary-bg) !important;
  color: var(--ms-button-primary-ink) !important;
  border: 1px solid var(--ms-button-primary-border) !important;
}

body.portal-login-page[data-ms-theme] button.primary:hover {
  background: var(--ms-button-primary-hover-bg) !important;
}

body.portal-login-page[data-ms-theme] button.secondary,
body.portal-login-page[data-ms-theme] button.icon-btn {
  background: var(--ms-button-secondary-bg) !important;
  color: var(--ms-button-secondary-ink) !important;
  border: 1px solid var(--ms-button-secondary-border) !important;
}

body.portal-login-page[data-ms-theme] a,
body.portal-login-page[data-ms-theme] .actions a {
  color: var(--ms-muted) !important;
}
body.portal-login-page[data-ms-theme] a:hover,
body.portal-login-page[data-ms-theme] .actions a:hover {
  color: var(--ms-ink) !important;
}

body.portal-login-page[data-ms-theme] .notice,
body.portal-login-page[data-ms-theme] #message,
body.portal-login-page[data-ms-theme] #signupMessage {
  background: var(--ms-empty-bg, var(--ms-panel-2)) !important;
  color: var(--ms-empty-ink, var(--ms-ink)) !important;
  border-color: var(--ms-empty-border, var(--ms-line)) !important;
}

body.portal-login-page[data-ms-theme] .notice.error,
body.portal-login-page[data-ms-theme] #message.error,
body.portal-login-page[data-ms-theme] #signupMessage.error {
  background: var(--ms-danger-bg) !important;
  color: var(--ms-danger) !important;
  border-color: var(--ms-danger-border, var(--ms-danger)) !important;
}

body.portal-login-page[data-ms-theme] .notice.ok,
body.portal-login-page[data-ms-theme] #message.ok,
body.portal-login-page[data-ms-theme] #signupMessage.ok,
body.portal-login-page[data-ms-theme] .field-help.ok {
  background: var(--ms-success-bg) !important;
  color: var(--ms-success) !important;
  border-color: color-mix(in srgb, var(--ms-success) 42%, transparent) !important;
}

body.portal-login-page[data-ms-theme] .field-help.error {
  color: var(--ms-danger) !important;
}

body.portal-login-page[data-ms-theme] .modal-backdrop {
  background: color-mix(in srgb, #000 var(--ms-modal-backdrop-alpha, 42%), transparent) !important;
}

body.portal-login-page[data-ms-theme] .modal-card {
  background: var(--ms-modal-bg-solid, var(--ms-modal-bg)) !important;
  color: var(--ms-modal-text, var(--ms-ink)) !important;
  border-color: var(--ms-modal-border, var(--ms-line)) !important;
  box-shadow: var(--ms-modal-shadow) !important;
}

body.portal-login-page[data-ms-theme] .modal-head,
body.portal-login-page[data-ms-theme] .modal-body {
  background: transparent !important;
  color: var(--ms-modal-text, var(--ms-ink)) !important;
}

body.portal-login-page[data-ms-theme] .check-line,
body.portal-login-page[data-ms-theme] .agreement-card {
  background: var(--ms-checkbox-bg) !important;
  color: var(--ms-checkbox-ink) !important;
  border-color: var(--ms-checkbox-border) !important;
}

body.portal-login-page[data-ms-theme] .agreement-card.required {
  background: color-mix(in srgb, var(--ms-warning-bg) 44%, var(--ms-checkbox-bg) 56%) !important;
  border-color: color-mix(in srgb, var(--ms-warning-border, var(--ms-line)) 60%, var(--ms-line) 40%) !important;
}

body.portal-login-page[data-ms-theme] .required-mark,
body.portal-login-page[data-ms-theme] .optional-mark {
  color: var(--ms-accent) !important;
}

body.portal-login-page[data-ms-theme] input[type="checkbox"] {
  accent-color: var(--ms-checkbox-checked-bg, var(--ms-accent));
}

/* Phase 17 - Admin function requirements / partner management theme bridge */
body[data-ms-theme] #section-features .card,
body[data-ms-theme] #section-features .table-wrap,
body[data-ms-theme] #section-partners .card,
body[data-ms-theme] #section-partners .table-wrap,
body[data-ms-theme] .partner-admin-panel.card,
body[data-ms-theme] .partner-admin-form-modal,
body[data-ms-theme] .partner-admin-form,
body[data-ms-theme] .company-detail-modal .modal,
body[data-ms-theme] .company-detail-modal .modal-body {
  background: var(--ms-card-solid) !important;
  color: var(--ms-ink) !important;
  border-color: var(--ms-line) !important;
}

body[data-ms-theme] #section-features .muted,
body[data-ms-theme] #section-partners .muted,
body[data-ms-theme] .partner-admin-status,
body[data-ms-theme] .partner-admin-panel .muted {
  color: var(--ms-muted) !important;
}

body[data-ms-theme] #section-features table,
body[data-ms-theme] #section-partners table,
body[data-ms-theme] #section-features tbody,
body[data-ms-theme] #section-partners tbody,
body[data-ms-theme] #section-features tr,
body[data-ms-theme] #section-partners tr,
body[data-ms-theme] #section-features td,
body[data-ms-theme] #section-partners td {
  background: var(--ms-table-row-bg) !important;
  color: var(--ms-table-cell-ink, var(--ms-ink)) !important;
  border-color: var(--ms-table-border, var(--ms-line)) !important;
}

body[data-ms-theme] #section-features thead th,
body[data-ms-theme] #section-partners thead th {
  background: var(--ms-table-head-bg) !important;
  color: var(--ms-table-head-ink, var(--ms-ink)) !important;
  border-color: var(--ms-table-border, var(--ms-line)) !important;
}

body[data-ms-theme] #section-features tr:hover td,
body[data-ms-theme] #section-partners tr:hover td {
  background: var(--ms-table-row-hover-bg) !important;
}

body[data-ms-theme] #section-features input,
body[data-ms-theme] #section-features select,
body[data-ms-theme] #section-features textarea,
body[data-ms-theme] #section-partners input,
body[data-ms-theme] #section-partners select,
body[data-ms-theme] #section-partners textarea,
body[data-ms-theme] .partner-admin-form input,
body[data-ms-theme] .partner-admin-form select,
body[data-ms-theme] .partner-admin-form textarea {
  background: var(--ms-input-bg) !important;
  color: var(--ms-ink) !important;
  border-color: var(--ms-input-border, var(--ms-line)) !important;
  box-shadow: none !important;
}

body[data-ms-theme] #section-features input::placeholder,
body[data-ms-theme] #section-partners input::placeholder,
body[data-ms-theme] #section-partners textarea::placeholder,
body[data-ms-theme] .partner-admin-form input::placeholder,
body[data-ms-theme] .partner-admin-form textarea::placeholder {
  color: var(--ms-placeholder, var(--ms-muted)) !important;
}

body[data-ms-theme] #section-features label,
body[data-ms-theme] #section-partners label,
body[data-ms-theme] .partner-admin-form label {
  color: var(--ms-card-label-ink, var(--ms-muted)) !important;
  font-family: var(--ms-card-label-font-family, var(--ms-font-sans)) !important;
  font-size: var(--ms-card-label-size, var(--ms-label-size)) !important;
}

body[data-ms-theme] .feature-field-card,
body[data-ms-theme] #section-features td > div[style*="background:#fffefb"],
body[data-ms-theme] #section-features td > div[style*="background: #fffefb"] {
  background: var(--ms-card-bg) !important;
  color: var(--ms-ink) !important;
  border-color: var(--ms-line) !important;
  box-shadow: none !important;
}

body[data-ms-theme] .feature-field-card {
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-card-radius, 12px);
  padding: 10px;
  margin: 8px 0;
}

body[data-ms-theme] .partner-admin-status {
  background: var(--ms-empty-bg, var(--ms-card-bg)) !important;
  color: var(--ms-empty-ink, var(--ms-ink)) !important;
  border: 1px solid var(--ms-empty-border, var(--ms-line)) !important;
  border-radius: var(--ms-empty-radius, 14px) !important;
}

body[data-ms-theme] .partner-admin-tab {
  background: var(--ms-button-secondary-bg) !important;
  color: var(--ms-button-secondary-ink) !important;
  border-color: var(--ms-button-secondary-border) !important;
  font-family: var(--ms-button-font-family, var(--ms-font-sans)) !important;
  font-size: var(--ms-button-font-size, 14px) !important;
}

body[data-ms-theme] .partner-admin-tab.active {
  background: var(--ms-button-bg, var(--ms-accent)) !important;
  color: var(--ms-button-ink, var(--ms-accent-ink)) !important;
  border-color: var(--ms-button-border, var(--ms-accent)) !important;
}

body[data-ms-theme] .partner-pill {
  background: var(--ms-badge-bg) !important;
  color: var(--ms-badge-ink) !important;
  border-color: var(--ms-badge-border) !important;
}
body[data-ms-theme] .partner-pill.ok { background: var(--ms-badge-success-bg, var(--ms-success-bg)) !important; color: var(--ms-badge-success-ink, var(--ms-success)) !important; border-color: var(--ms-success-border, var(--ms-badge-border)) !important; }
body[data-ms-theme] .partner-pill.wait { background: var(--ms-badge-warning-bg, var(--ms-warning-bg)) !important; color: var(--ms-badge-warning-ink, var(--ms-warning)) !important; border-color: var(--ms-warning-border, var(--ms-badge-border)) !important; }
body[data-ms-theme] .partner-pill.stop { background: var(--ms-badge-danger-bg, var(--ms-danger-bg)) !important; color: var(--ms-badge-danger-ink, var(--ms-danger)) !important; border-color: var(--ms-danger-border, var(--ms-badge-border)) !important; }

/* Phase 18 - Supplier matching draft controls token coverage
   공급사 매칭 신규 배정 영역의 권한 체크박스/메모/입력 박스를 공통 테마 토큰으로 연결합니다. */
body[data-ms-theme] .partner-match-modal .partner-draft-row {
  background: var(--ms-modal-section-surface-bg) !important;
  color: var(--ms-ink) !important;
  border-color: var(--ms-modal-border) !important;
}

body[data-ms-theme] .partner-match-modal .partner-draft-row label,
body[data-ms-theme] .partner-match-modal .partner-draft-row-head strong,
body[data-ms-theme] .partner-match-modal .partner-draft-row .muted {
  color: var(--ms-card-label-ink, var(--ms-muted)) !important;
}

body[data-ms-theme] .partner-match-modal .partner-draft-row input:not([type="checkbox"]),
body[data-ms-theme] .partner-match-modal .partner-draft-row textarea,
body[data-ms-theme] .partner-match-modal .partner-draft-row select,
body[data-ms-theme] .partner-match-modal .partner-picker-card,
body[data-ms-theme] .partner-match-modal .partner-quote-item-box {
  background: var(--ms-input-bg) !important;
  color: var(--ms-input-ink, var(--ms-ink)) !important;
  border-color: var(--ms-input-border) !important;
  font-family: var(--ms-font-sans) !important;
  font-size: var(--ms-input-size) !important;
}

body[data-ms-theme] .partner-match-modal .partner-draft-row textarea::placeholder,
body[data-ms-theme] .partner-match-modal .partner-draft-row input::placeholder {
  color: var(--ms-muted) !important;
  opacity: .72;
}

body[data-ms-theme] .partner-match-modal .partner-access-checks label,
body[data-ms-theme] :where(.partner-access-checks label) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid var(--ms-checkbox-border) !important;
  border-radius: var(--ms-checkbox-radius) !important;
  background: var(--ms-checkbox-bg) !important;
  color: var(--ms-checkbox-ink) !important;
  font-family: var(--ms-button-font-family) !important;
  font-size: var(--ms-checkbox-font-size) !important;
  font-weight: var(--ms-font-weight-strong) !important;
  line-height: 1 !important;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
}

body[data-ms-theme] .partner-match-modal .partner-access-checks label input[type="checkbox"],
body[data-ms-theme] :where(.partner-access-checks label) input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: var(--ms-checkbox-size) !important;
  height: var(--ms-checkbox-size) !important;
  min-width: var(--ms-checkbox-size) !important;
  margin: 0 !important;
  border: 1.5px solid var(--ms-checkbox-box-border) !important;
  border-radius: 4px !important;
  background: var(--ms-checkbox-box-bg) !important;
  accent-color: var(--ms-checkbox-checked-bg) !important;
  display: inline-grid !important;
  place-content: center !important;
  position: relative !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

body[data-ms-theme] .partner-match-modal .partner-access-checks label input[type="checkbox"]:checked,
body[data-ms-theme] :where(.partner-access-checks label) input[type="checkbox"]:checked {
  background: var(--ms-checkbox-checked-bg) !important;
  border-color: var(--ms-checkbox-checked-bg) !important;
}

body[data-ms-theme] .partner-match-modal .partner-access-checks label input[type="checkbox"]:checked::after,
body[data-ms-theme] :where(.partner-access-checks label) input[type="checkbox"]:checked::after {
  content: "";
  width: calc(var(--ms-checkbox-size) * .36);
  height: calc(var(--ms-checkbox-size) * .62);
  border: solid var(--ms-checkbox-checked-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

body[data-ms-theme] .partner-match-modal .partner-access-checks label:has(input[type="checkbox"]:checked) {
  border-color: color-mix(in srgb, var(--ms-checkbox-checked-bg) 76%, var(--ms-checkbox-border) 24%) !important;
  background: color-mix(in srgb, var(--ms-checkbox-checked-bg) 12%, var(--ms-checkbox-bg) 88%) !important;
}

body[data-ms-theme] .partner-match-modal .partner-access-checks {
  gap: 10px !important;
}

/* Phase 20: support-program summary progress bars.
   The dashboard support-program aggregation bars now share the common progress tokens,
   instead of using the older local .bar-track/.bar colors. Scoped to .program-bars so
   timeline schedule bars and third-party bars remain independent. */
body[data-ms-theme] .program-bars {
  background: transparent !important;
  box-shadow: none !important;
}
body[data-ms-theme] .program-bars .bar-row {
  color: var(--ms-table-cell-ink, var(--ms-ink)) !important;
  font-family: var(--ms-font-sans) !important;
  font-size: var(--ms-table-font-size, var(--ms-text-sm)) !important;
}
body[data-ms-theme] .program-bars .bar-row span,
body[data-ms-theme] .program-bars .bar-row strong {
  color: var(--ms-table-cell-ink, var(--ms-ink)) !important;
}
body[data-ms-theme] .program-bars .bar-track {
  height: var(--ms-progress-height) !important;
  border-radius: var(--ms-progress-radius) !important;
  background: var(--ms-progress-track-bg) !important;
  border: 1px solid color-mix(in srgb, var(--ms-line) 70%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ms-line) 40%, transparent) !important;
  overflow: hidden !important;
}
body[data-ms-theme] .program-bars .bar-track > .bar {
  height: 100% !important;
  border-radius: inherit !important;
  background: var(--ms-progress-fill-bg) !important;
  box-shadow: var(--ms-progress-shadow) !important;
}


/* Phase 22: admin text-only title bars and top action buttons.
   The admin dashboard page title is informational text, not a surface block. */
html[data-ms-theme] body main > .topbar,
body[data-ms-theme] main > .topbar,
body[data-ms-theme].dashboard-locked main > .topbar {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-ms-theme] body main > .topbar > div:first-child,
body[data-ms-theme] main > .topbar > div:first-child,
html[data-ms-theme] body main > .topbar h1,
body[data-ms-theme] main > .topbar h1,
html[data-ms-theme] body main > .topbar .desc,
body[data-ms-theme] main > .topbar .desc {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-ms-theme] body main > .topbar h1,
body[data-ms-theme] main > .topbar h1 {
  color: var(--ms-section-header-ink, var(--ms-ink)) !important;
}
html[data-ms-theme] body main > .topbar .desc,
body[data-ms-theme] main > .topbar .desc {
  color: var(--ms-section-header-desc-ink, var(--ms-muted)) !important;
}
body[data-ms-theme] :where(.top-actions, .header-actions, .admin-top-actions) button,
body[data-ms-theme] :where(.top-actions, .header-actions, .admin-top-actions) .btn,
body[data-ms-theme] :where(.top-actions, .header-actions, .admin-top-actions) a.btn {
  background: var(--ms-top-action-button-bg) !important;
  color: var(--ms-top-action-button-ink) !important;
  border: 1px solid var(--ms-top-action-button-border) !important;
  border-radius: var(--ms-top-action-button-radius) !important;
  box-shadow: var(--ms-shadow-soft) !important;
}
body[data-ms-theme] :where(.top-actions, .header-actions, .admin-top-actions) button:hover,
body[data-ms-theme] :where(.top-actions, .header-actions, .admin-top-actions) .btn:hover,
body[data-ms-theme] :where(.top-actions, .header-actions, .admin-top-actions) a.btn:hover {
  background: var(--ms-top-action-button-hover-bg) !important;
}
html[data-ms-theme="classic"],
body[data-ms-theme="classic"] {
  --ms-top-action-button-bg: #1f1f1d;
  --ms-top-action-button-ink: #ffffff;
  --ms-top-action-button-border: #1f1f1d;
  --ms-top-action-button-hover-bg: #000000;
}
html[data-ms-theme="vrin"],
body[data-ms-theme="vrin"] {
  --ms-top-action-button-bg: rgba(255,255,255,.09);
  --ms-top-action-button-ink: #f8fafc;
  --ms-top-action-button-border: rgba(255,255,255,.16);
  --ms-top-action-button-hover-bg: rgba(95,120,255,.28);
}
html[data-ms-theme="graphite"],
body[data-ms-theme="graphite"] {
  --ms-top-action-button-bg: #2f343a;
  --ms-top-action-button-ink: #ffffff;
  --ms-top-action-button-border: #2f343a;
  --ms-top-action-button-hover-bg: #1f2328;
}
html[data-ms-theme="grantfinder"],
body[data-ms-theme="grantfinder"] {
  --ms-top-action-button-bg: #315efb;
  --ms-top-action-button-ink: #ffffff;
  --ms-top-action-button-border: #315efb;
  --ms-top-action-button-hover-bg: #2548d8;
}

/* Phase 33: Detail-view text headers must not inherit card/panel backgrounds.
   상세보기 내부의 섹션 제목은 문서 구조를 구분하는 텍스트이므로 별도 박스처럼 보이지 않게 유지합니다. */
body[data-ms-theme] :where(
  .detail-subsection,
  .detail-subsection.active,
  #detailPrintable,
  #adminPreviewContainer,
  .detail-module .panel,
  .detail-module .panel.active
) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body[data-ms-theme] :where(
  .detail-subsection > h2,
  #detailTab-product > h2,
  #detailTab-major > h2,
  #detailTab-features > h2,
  #detailTab-design > h2,
  #detailTab-manufacturing > h2,
  #detailTab-risk > h2,
  #detailTab-package > h2,
  #detailTab-schedule > h2,
  .detail-module .panel > h2,
  .detail-module .section-card > h2
) {
  display: block !important;
  width: auto !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ms-section-header-ink, var(--ms-ink)) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body[data-ms-theme] :where(
  .detail-subsection > h2::before,
  .detail-subsection > h2::after,
  .detail-module .panel > h2::before,
  .detail-module .panel > h2::after,
  .detail-module .section-card > h2::before,
  .detail-module .section-card > h2::after
) {
  display: none !important;
  content: none !important;
}

body[data-ms-theme] :where(.detail-subsection .detail-info-table, .detail-subsection .detail-list, .detail-subsection .detail-chip-list) {
  margin-top: 0 !important;
}

/* Phase 38: 상세보기 내부의 구조용 래퍼는 시각적 카드가 아니므로 배경/테두리를 제거합니다. */
body[data-ms-theme] :where(
  #detailModal #detailPrintable,
  #detailModal #adminPreviewContainer,
  #detailModal .detail-subsection,
  #detailModal .detail-grid,
  #detailModal .summary-grid,
  #detailModal .panel,
  #detailModal .panel.active,
  .detail-module .panel,
  .detail-module .panel.active,
  .detail-module .summary-grid,
  .detail-module .wrap
) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body[data-ms-theme] :where(
  #detailModal .detail-subsection > h2,
  #detailModal .detail-subsection > h3,
  .detail-module .panel > h1,
  .detail-module .panel > h2,
  .detail-module .section-title
) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Phase 40: 상세보기 구조 래퍼/섹션 카드 배경 완전 제거
   실제 정보 카드(.detail-box)와 표(.detail-info-table/.info-table)는 유지하고,
   그 밖의 섹션 래퍼와 제목 주변에 보이던 의미 없는 배경 박스만 제거합니다. */
html[data-ms-theme] :where(
  #detailModal #detailPrintable,
  #detailModal #adminPreviewContainer,
  #detailModal .detail-subsection,
  #detailModal .detail-subsection.active,
  #detailModal .detail-grid,
  #detailModal .summary-grid,
  #detailModal .panel,
  #detailModal .panel.active,
  #detailModal .detail-subsection > .section-card,
  #detailModal .detail-subsection > .section-card.active,
  .detail-module .panel,
  .detail-module .panel.active,
  .detail-module .summary-grid,
  .detail-module .wrap,
  .detail-module .panel > .section-card,
  .detail-module .section-card
),
body[data-ms-theme] :where(
  #detailModal #detailPrintable,
  #detailModal #adminPreviewContainer,
  #detailModal .detail-subsection,
  #detailModal .detail-subsection.active,
  #detailModal .detail-grid,
  #detailModal .summary-grid,
  #detailModal .panel,
  #detailModal .panel.active,
  #detailModal .detail-subsection > .section-card,
  #detailModal .detail-subsection > .section-card.active,
  .detail-module .panel,
  .detail-module .panel.active,
  .detail-module .summary-grid,
  .detail-module .wrap,
  .detail-module .panel > .section-card,
  .detail-module .section-card
) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-ms-theme] :where(
  #detailModal .detail-subsection > .section-card,
  .detail-module .panel > .section-card,
  .detail-module .section-card
),
body[data-ms-theme] :where(
  #detailModal .detail-subsection > .section-card,
  .detail-module .panel > .section-card,
  .detail-module .section-card
) {
  padding: 0 !important;
  margin: 0 0 18px !important;
  border-radius: 0 !important;
}

html[data-ms-theme] :where(
  #detailModal .detail-subsection > h1,
  #detailModal .detail-subsection > h2,
  #detailModal .detail-subsection > h3,
  #detailModal .detail-subsection > .section-card > h1,
  #detailModal .detail-subsection > .section-card > h2,
  #detailModal .detail-subsection > .section-card > h3,
  .detail-module .panel > h1,
  .detail-module .panel > h2,
  .detail-module .panel > h3,
  .detail-module .section-card > h1,
  .detail-module .section-card > h2,
  .detail-module .section-card > h3
),
body[data-ms-theme] :where(
  #detailModal .detail-subsection > h1,
  #detailModal .detail-subsection > h2,
  #detailModal .detail-subsection > h3,
  #detailModal .detail-subsection > .section-card > h1,
  #detailModal .detail-subsection > .section-card > h2,
  #detailModal .detail-subsection > .section-card > h3,
  .detail-module .panel > h1,
  .detail-module .panel > h2,
  .detail-module .panel > h3,
  .detail-module .section-card > h1,
  .detail-module .section-card > h2,
  .detail-module .section-card > h3
) {
  display: block !important;
  width: auto !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: var(--ms-section-header-ink, var(--ms-ink)) !important;
}

html[data-ms-theme] :where(
  #detailModal .detail-subsection > h1::before,
  #detailModal .detail-subsection > h1::after,
  #detailModal .detail-subsection > h2::before,
  #detailModal .detail-subsection > h2::after,
  #detailModal .detail-subsection > h3::before,
  #detailModal .detail-subsection > h3::after,
  .detail-module .panel > h1::before,
  .detail-module .panel > h1::after,
  .detail-module .panel > h2::before,
  .detail-module .panel > h2::after,
  .detail-module .section-card > h2::before,
  .detail-module .section-card > h2::after
),
body[data-ms-theme] :where(
  #detailModal .detail-subsection > h1::before,
  #detailModal .detail-subsection > h1::after,
  #detailModal .detail-subsection > h2::before,
  #detailModal .detail-subsection > h2::after,
  #detailModal .detail-subsection > h3::before,
  #detailModal .detail-subsection > h3::after,
  .detail-module .panel > h1::before,
  .detail-module .panel > h1::after,
  .detail-module .panel > h2::before,
  .detail-module .panel > h2::after,
  .detail-module .section-card > h2::before,
  .detail-module .section-card > h2::after
) {
  display: none !important;
  content: none !important;
}


/* Phase 41: 상세보기 구조/표 외부 래퍼 공통 보정
   시각 요소가 아닌 wrapper는 투명 처리하고, 표 자체만 테마 토큰을 따르게 합니다. */
html[data-ms-theme] :where(
  #detailModal #detailPrintable,
  #detailModal #adminPreviewContainer,
  #detailModal .detail-subsection,
  #detailModal .detail-subsection.active,
  #detailModal .detail-grid,
  #detailModal .summary-grid,
  #detailModal .section-card,
  #detailModal .detail-info-table,
  #detailModal .detail-list,
  #detailModal .detail-chip-list,
  .detail-module .panel,
  .detail-module .panel.active,
  .detail-module .section-card,
  .detail-module .summary-grid,
  .detail-module .wrap
),
body[data-ms-theme] :where(
  #detailModal #detailPrintable,
  #detailModal #adminPreviewContainer,
  #detailModal .detail-subsection,
  #detailModal .detail-subsection.active,
  #detailModal .detail-grid,
  #detailModal .summary-grid,
  #detailModal .section-card,
  #detailModal .detail-info-table,
  #detailModal .detail-list,
  #detailModal .detail-chip-list,
  .detail-module .panel,
  .detail-module .panel.active,
  .detail-module .section-card,
  .detail-module .summary-grid,
  .detail-module .wrap
) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-ms-theme] :where(#detailModal .detail-info-table),
body[data-ms-theme] :where(#detailModal .detail-info-table) {
  padding: 0 !important;
  margin: 0 0 18px !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

html[data-ms-theme] :where(#detailModal .detail-info-table table),
body[data-ms-theme] :where(#detailModal .detail-info-table table) {
  border: 1px solid var(--ms-table-border, var(--ms-line)) !important;
  border-radius: var(--ms-table-radius, 18px) !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--ms-table-bg, var(--ms-card-solid)) !important;
}

html[data-ms-theme] :where(
  #detailModal .detail-subsection > h1,
  #detailModal .detail-subsection > h2,
  #detailModal .detail-subsection > h3,
  #detailModal .section-card > h1,
  #detailModal .section-card > h2,
  #detailModal .section-card > h3,
  .detail-module .panel > h1,
  .detail-module .panel > h2,
  .detail-module .panel > h3,
  .detail-module .section-card > h1,
  .detail-module .section-card > h2,
  .detail-module .section-card > h3
),
body[data-ms-theme] :where(
  #detailModal .detail-subsection > h1,
  #detailModal .detail-subsection > h2,
  #detailModal .detail-subsection > h3,
  #detailModal .section-card > h1,
  #detailModal .section-card > h2,
  #detailModal .section-card > h3,
  .detail-module .panel > h1,
  .detail-module .panel > h2,
  .detail-module .panel > h3,
  .detail-module .section-card > h1,
  .detail-module .section-card > h2,
  .detail-module .section-card > h3
) {
  display: block !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: var(--ms-section-header-ink, var(--ms-ink)) !important;
}


/* Phase 42: residual shared CSS coverage
   Page-specific HTML should handle layout only. Reusable visual surfaces below are routed to tokens. */
html[data-ms-theme],
body[data-ms-theme] {
  scrollbar-color: var(--ms-scrollbar-thumb) var(--ms-scrollbar-track);
}
html[data-ms-theme] ::-webkit-scrollbar,
body[data-ms-theme] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[data-ms-theme] ::-webkit-scrollbar-track,
body[data-ms-theme] ::-webkit-scrollbar-track { background: var(--ms-scrollbar-track); }
html[data-ms-theme] ::-webkit-scrollbar-thumb,
body[data-ms-theme] ::-webkit-scrollbar-thumb { background: var(--ms-scrollbar-thumb); border-radius: 999px; border: 3px solid var(--ms-scrollbar-track); }
html[data-ms-theme] ::-webkit-scrollbar-thumb:hover,
body[data-ms-theme] ::-webkit-scrollbar-thumb:hover { background: var(--ms-scrollbar-thumb-hover); }

body[data-ms-theme] :where(
  .ms-table,
  .data-table,
  .request-table,
  .team-table,
  .partner-table,
  .customer-table,
  .status-table,
  .program-table,
  .feature-table,
  .requirements-table,
  .quote-table,
  .spec-table,
  .mentoring-table,
  .admin-table,
  .table,
  .table-wrap table,
  .ms-table-scroll table
):not(.ms-theme-preserve *):not(.report-paper):not(.report-paper *) {
  background: var(--ms-table-bg) !important;
  color: var(--ms-table-cell-ink) !important;
  border-color: var(--ms-table-border) !important;
  border-radius: var(--ms-table-radius) !important;
}
body[data-ms-theme] :where(
  .ms-table th,
  .data-table th,
  .request-table th,
  .team-table th,
  .partner-table th,
  .customer-table th,
  .status-table th,
  .program-table th,
  .feature-table th,
  .requirements-table th,
  .quote-table th,
  .spec-table th,
  .mentoring-table th,
  .admin-table th,
  .table th,
  .table-wrap th,
  .ms-table-scroll th
):not(.ms-theme-preserve *):not(.report-paper *) {
  background: var(--ms-table-head-bg) !important;
  color: var(--ms-table-cell-ink) !important;
  border-color: var(--ms-table-border) !important;
}
body[data-ms-theme] :where(
  .ms-table td,
  .data-table td,
  .request-table td,
  .team-table td,
  .partner-table td,
  .customer-table td,
  .status-table td,
  .program-table td,
  .feature-table td,
  .requirements-table td,
  .quote-table td,
  .spec-table td,
  .mentoring-table td,
  .admin-table td,
  .table td,
  .table-wrap td,
  .ms-table-scroll td
):not(.ms-theme-preserve *):not(.report-paper *) {
  color: var(--ms-table-cell-ink) !important;
  border-color: var(--ms-table-border) !important;
}
body[data-ms-theme] :where(
  .ms-table tbody tr:hover,
  .data-table tbody tr:hover,
  .request-table tbody tr:hover,
  .team-table tbody tr:hover,
  .partner-table tbody tr:hover,
  .customer-table tbody tr:hover,
  .status-table tbody tr:hover,
  .program-table tbody tr:hover,
  .admin-table tbody tr:hover,
  .table-wrap tbody tr:hover
):not(.ms-theme-preserve *):not(.report-paper *) {
  background: var(--ms-table-hover-bg) !important;
}
body[data-ms-theme] :where(.is-selected, .selected, tr.selected, tr.is-selected) {
  background: var(--ms-table-row-selected-bg) !important;
}

body[data-ms-theme] :where(
  .badge,
  .status,
  .status-badge,
  .state-badge,
  .shared-badge,
  .pill,
  .tag,
  .chip,
  .count-chip,
  .role-badge,
  .access-badge
):not(.ms-theme-preserve *):not(.report-paper *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: var(--ms-badge-padding-y) var(--ms-badge-padding-x) !important;
  border-radius: var(--ms-badge-radius) !important;
  background: var(--ms-badge-bg) !important;
  color: var(--ms-badge-ink) !important;
  border: 1px solid var(--ms-badge-border) !important;
  font-weight: 900;
  line-height: 1;
}
body[data-ms-theme] :where(.badge.success, .status.success, .status-badge.success, .state-badge.success, .is-success, [data-status="active"], [data-status="approved"]) {
  background: var(--ms-badge-success-bg) !important;
  color: var(--ms-badge-success-ink) !important;
  border-color: var(--ms-badge-success-border) !important;
}
body[data-ms-theme] :where(.badge.warning, .status.warning, .status-badge.warning, .state-badge.warning, .is-warning, [data-status="pending"], [data-status="review"]) {
  background: var(--ms-badge-warning-bg) !important;
  color: var(--ms-badge-warning-ink) !important;
  border-color: var(--ms-badge-warning-border) !important;
}
body[data-ms-theme] :where(.badge.danger, .status.danger, .status-badge.danger, .state-badge.danger, .is-danger, [data-status="rejected"], [data-status="closed"]) {
  background: var(--ms-badge-danger-bg) !important;
  color: var(--ms-badge-danger-ink) !important;
  border-color: var(--ms-badge-danger-border) !important;
}
body[data-ms-theme] :where(.badge.info, .status.info, .status-badge.info, .state-badge.info, .is-info) {
  background: var(--ms-badge-info-bg) !important;
  color: var(--ms-badge-info-ink) !important;
  border-color: var(--ms-badge-info-border) !important;
}

body[data-ms-theme] :where(
  .empty,
  .empty-state,
  .no-data,
  .notice-empty,
  .file-empty,
  .preview-empty,
  .empty-preview,
  .message-box,
  .info-message,
  .notice-message,
  .status-message,
  .save-message,
  .result-message,
  .help-box,
  .hint-box,
  .alert-box
):not(.ms-theme-preserve *):not(.report-paper *) {
  background: var(--ms-message-bg) !important;
  color: var(--ms-message-ink) !important;
  border-color: var(--ms-message-border) !important;
}
body[data-ms-theme] :where(
  .file-list,
  .attachment-list,
  .upload-list,
  .stored-template-list,
  .selected-file-list,
  .file-row,
  .attachment-row,
  .template-row
):not(.ms-theme-preserve *):not(.report-paper *) {
  background: var(--ms-upload-list-bg) !important;
  color: var(--ms-upload-list-ink) !important;
  border-color: var(--ms-upload-list-border) !important;
}

body[data-ms-theme] :where(
  .structural,
  .ms-structural,
  .layout-shell,
  .section-wrap,
  .content-wrap,
  .detail-structural,
  .detail-section-wrap,
  .detail-layout,
  .detail-content-wrap
) {
  background: var(--ms-structural-bg) !important;
  background-image: none !important;
  border-color: var(--ms-structural-border) !important;
  box-shadow: none !important;
}

body[data-ms-theme] .ms-theme-preserve,
body[data-ms-theme] .ms-theme-preserve *,
body[data-ms-theme] .report-paper,
body[data-ms-theme] .report-paper *,
body[data-ms-theme] .print-page,
body[data-ms-theme] .print-page *,
body[data-ms-theme] .document-page,
body[data-ms-theme] .document-page * {
  color-scheme: light;
}


/* Phase261: shared reusable file-input component. */
body[data-ms-theme] .ms-file-input{
  box-sizing:border-box;
  height:42px;
  padding:4px 8px;
  font-size:12px;
  line-height:32px;
}
body[data-ms-theme] .ms-file-input::file-selector-button,
body[data-ms-theme] .ms-file-input::-webkit-file-upload-button{
  height:32px;
  min-height:32px;
  padding:0 12px;
  font-size:12px;
  line-height:30px;
  vertical-align:middle;
}