/* 20260913-visual01: appearance only. Existing visibility, table layouts,
   semantic states, permissions, calculations and print/export styles stay intact. */
@font-face {
  font-family: "3S Pretendard";
  src: url("/demolition/design-assets/PretendardVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@media screen {
  body[data-appearance] {
    --suite-ink: #163153;
    --suite-muted: #61738b;
    --suite-line: #dce5f0;
    --suite-blue: #086af0;
    --suite-shadow: 0 4px 18px rgba(27, 57, 94, .045);
    background: #f4f7fc;
  }
  /* Keep the calculator canvas/export font environment unchanged. */
  body[data-appearance]:not([data-appearance="pricing"]) { font-family: "3S Pretendard", "Malgun Gothic", sans-serif; }
  [data-appearance] :is(button, input, select, textarea):focus-visible { outline: 2px solid #2879ef; outline-offset: 2px; }

  /* Native login form, with decorative background artwork only. */
  [data-appearance="suite"] #loginScreen { min-height: 100vh; grid-template-columns: minmax(0, 57.6fr) minmax(0, 42.4fr); background: #fff; }
  [data-appearance="suite"]:not(.embed-mode) #loginScreen .login-art {
    display: block; position: relative; min-width: 0; padding: 54px 6.3%; color: #fff; border-radius: 0; overflow: hidden;
    background: #062846 url("/design-assets/login-city-20260913.webp") center calc(100% + 60px) / cover no-repeat;
  }
  [data-appearance="suite"] #loginScreen .login-art::before,
  [data-appearance="suite"] #loginScreen .login-art::after { content: none; }
  [data-appearance="suite"] .login-brand { display: flex; align-items: center; gap: 25px; font-size: 32px; font-weight: 750; letter-spacing: -.04em; }
  [data-appearance="suite"] .login-brand .brand-mark { width: 57px; height: 57px; flex: 0 0 57px; border-radius: 13px; background: #ddf35c; color: #113346; font-size: 25px; box-shadow: 0 4px 10px rgba(0,0,0,.12); }
  [data-appearance="suite"] .login-story { margin: clamp(82px, 11.7vh, 120px) 5.2% 0; }
  [data-appearance="suite"] #loginScreen .login-story h2 { margin: 0; font-size: clamp(37px, 5.47vw, 84px); line-height: 1.08; letter-spacing: -.045em; font-weight: 760; }
  [data-appearance="suite"] .login-story h2 em { color: #53b4ff; font-style: normal; }
  [data-appearance="suite"] #loginScreen .login-story p { margin: 30px 0 0; color: #c8d8eb; font-size: clamp(17px, 1.65vw, 26px); line-height: 1.65; font-weight: 450; letter-spacing: -.025em; }
  [data-appearance="suite"] .login-brand-footer { position: absolute; left: 6.3%; bottom: 37px; color: #a8c2dd; font-size: 12px; line-height: 1.8; letter-spacing: .015em; }
  [data-appearance="suite"] #loginScreen .login-card { display: flex; flex-direction: column; justify-content: center; min-width: 0; width: auto; margin: 0; padding: 70px clamp(30px, 6vw, 92px) 70px clamp(30px, 7.8vw, 120px); border: 0; border-radius: 0; background: #fff; box-shadow: none; }
  [data-appearance="suite"] #loginScreen .login-card .eyebrow { color: #547291; font-size: 13px; font-weight: 750; letter-spacing: .14em; }
  [data-appearance="suite"] #loginScreen .login-card h1 { margin: 17px 0; color: #132e50; font-size: clamp(36px, 3.4vw, 52px); line-height: 1.2; font-weight: 760; letter-spacing: -.055em; }
  [data-appearance="suite"] #loginScreen .login-description { margin: 0 0 38px; max-width: none; color: #66788e; font-size: 18px; line-height: 1.75; word-break: keep-all; }
  [data-appearance="suite"] #loginScreen form { width: 100%; max-width: none; gap: 11px; }
  [data-appearance="suite"] #loginScreen label { color: #243d5a; font-size: 14px; font-weight: 650; }
  [data-appearance="suite"] #loginScreen input { width: 100%; min-height: 54px; border: 1px solid #d6e0ec; border-radius: 9px; background: #fbfcfe; color: #182f4c; font-size: 16px; }
  [data-appearance="suite"] #loginScreen input:focus { border-color: #3987f8; box-shadow: 0 0 0 3px #eaf2ff; }
  [data-appearance="suite"] #loginScreen label[for="password"] { margin-top: 12px; }
  [data-appearance="suite"] #loginScreen button[type="submit"] { margin-top: 18px; min-height: 58px; border-radius: 9px; color: #fff; background: #086af0; border-color: #086af0; box-shadow: 0 5px 14px rgba(8,106,240,.15); font-size: 17px; font-weight: 700; }
  [data-appearance="suite"] #loginScreen button[type="submit"]:hover:not(:disabled) { background: #005cd9; }
  [data-appearance="suite"] #loginScreen button[type="submit"] > span:first-child { flex: 1; text-align: center; }
  [data-appearance="suite"] #loginScreen .password-visibility-toggle { color: #6a7f97; }
  [data-appearance="suite"] #loginScreen .login-footnote { color: #788ba1; font-size: 12px; line-height: 1.8; margin-top: 21px; word-break: keep-all; }
  [data-appearance="suite"] #loginScreen .form-error { font-size: 13px; line-height: 1.6; margin: 9px 0 0; }

  /* Shared navigation: no route, width, expansion or permission-rule changes. */
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-primary-sidebar { background: #102d4c; border-right-color: #1d3e61; box-shadow: 4px 0 18px rgba(16,45,76,.06); }
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-primary-item { color: #bbcee3; border-radius: 9px; }
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-primary-icon { color: #d8e6f4; background: #193958; }
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-primary-icon { position: relative; font-size: 0; }
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-primary-icon::after { content: ""; position: absolute; inset: 10px; background: #d8e6f4; mask: var(--suite-nav-icon) center / contain no-repeat; }
  [data-appearance="suite"] [data-service-primary="floor"] { --suite-nav-icon: url("/demolition/design-assets/home.svg"); }
  [data-appearance="suite"] [data-service-primary="demolition"] { --suite-nav-icon: url("/demolition/design-assets/file-text.svg"); }
  [data-appearance="suite"] [data-service-primary="well"] { --suite-nav-icon: url("/demolition/design-assets/truck.svg"); }
  [data-appearance="suite"] [data-service-primary="ssdam"] { --suite-nav-icon: url("/demolition/design-assets/leaf.svg"); }
  [data-appearance="suite"] [data-service-primary="dongbohaeng"] { --suite-nav-icon: url("/demolition/design-assets/users.svg"); }
  [data-appearance="suite"] [data-service-primary="mapOverview"] { --suite-nav-icon: url("/demolition/design-assets/map-pin.svg"); }
  [data-appearance="suite"] [data-service-primary="intake"] { --suite-nav-icon: url("/demolition/design-assets/file-plus.svg"); }
  [data-appearance="suite"] [data-service-primary="calculator"] { --suite-nav-icon: url("/demolition/design-assets/calculator.svg"); }
  [data-appearance="suite"] [data-service-primary="facilities"] { --suite-nav-icon: url("/demolition/design-assets/recycle.svg"); }
  [data-appearance="suite"] [data-service-primary="audit"] { --suite-nav-icon: url("/demolition/design-assets/clock.svg"); }
  [data-appearance="suite"] [data-service-primary="staff"] { --suite-nav-icon: url("/demolition/design-assets/users-group.svg"); }
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-primary-copy strong { color: inherit; }
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-primary-copy small { color: #90abc4; }
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-primary-item.active { color: #fff; background: #214970; box-shadow: inset 3px 0 #55b8ff; }
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-primary-item.active .service-primary-icon { color: #fff; background: #2a5b8b; }
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-workbar { background: #fff; color: #25476e; border-bottom: 1px solid #d9e6f5; box-shadow: 0 3px 15px rgba(26,65,105,.035); }
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-top-item { color: #456184; background: transparent; border-color: transparent; border-radius: 8px; }
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-top-item.active { color: #0965da; background: #eaf3ff; border-color: #cfdef4; }
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-top-session { color: #536b88; }
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-top-session > span,
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-sync-main small { color: #59718e; }
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) #serviceTopLogout { color: #3b5e89; border-color: #d5e2f3; background: #fff; }
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-sync-retry { color: #86600d !important; border-color: #ead7ac !important; background: #fff9ec; }
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-sync-progress > i { background: #e6edf5; }
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-sync-progress > i > b { background: #188166; }
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-sync-progress > span { color: #536b88; }
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) #integratedSyncButton { color: #fff !important; background: #086af0 !important; border-color: #086af0 !important; }
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-top-logout { color: #3b5e89; border-color: #d5e2f3; background: #fff; }
  [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .workspace { background: #f4f7fc; }

  /* Existing collection, facility, audit, staff and hub/map panels. */
  [data-appearance="suite"] #appShell:not(.demolition-content-active) :is(.panel, .stat-card) { border-color: #dce5f0; border-radius: 12px; box-shadow: var(--suite-shadow); }
  [data-appearance="suite"] #appShell:not(.demolition-content-active) :is(h1, h2, .page-title) { color: #17375b; }
  [data-appearance="suite"] #appShell:not(.demolition-content-active) .eyebrow { color: #617d9e; letter-spacing: .11em; }
  [data-appearance="suite"] #appShell:not(.demolition-content-active) :is(.primary, .button-primary) { background: #086af0; border-color: #086af0; color: #fff; box-shadow: 0 3px 8px rgba(8,106,240,.1); }
  [data-appearance="suite"] #appShell:not(.demolition-content-active) :is(.secondary, .button-secondary) { background: #f2f6fc; border-color: #d8e3f1; color: #34577f; }
  [data-appearance="suite"] #appShell:not(.demolition-content-active) .stat-card.accent { background: #13395f; border-color: #13395f; color: #fff; }
  [data-appearance="suite"] #appShell:not(.demolition-content-active) .stat-card.accent::after { content: none; }
  [data-appearance="suite"] #appShell:not(.demolition-content-active) .panel-heading { border-bottom-color: #e3ebf5; }
  [data-appearance="suite"] #appShell:not(.demolition-content-active) .bar-track { background: #eef3fa; }
  [data-appearance="suite"] #appShell:not(.demolition-content-active) .bar-fill { background: #4989db; }
  [data-appearance="suite"] #appShell:not(.demolition-content-active) .bar-row:nth-child(2n) .bar-fill { background: #74a4e3; }
  [data-appearance="suite"] #appShell:not(.demolition-content-active) .count-pill { color: #285f9f; background: #ebf3fd; }

  /* Floor: six counters, all columns and worker tray dimensions stay unchanged. */
  [data-appearance="floor"] :is(.floor-header, .dashboard-panel, .dashboard-preview-panel, .reception-ranking, .action-toolbar, .partners-panel, .workers-panel) { border-color: #dce5f0; border-radius: 12px; background-color: #fff; box-shadow: var(--suite-shadow); }
  [data-appearance="floor"] :is(h1, h2, h3) { color: #17375b; }
  [data-appearance="floor"] .eyebrow { color: #617d9e; }
  [data-appearance="floor"] .floor-header::before { background: #2678e4; }
  [data-appearance="floor"] .system-banner { background-color: #f8faff; border-color: #dce5f0; }
  [data-appearance="floor"] .dashboard-stat-grid article { border-color: #dce5f0; border-radius: 12px; box-shadow: var(--suite-shadow); }
  [data-appearance="floor"] .dashboard-stat-grid article.accent { background: #13395f; border-color: #13395f; }
  [data-appearance="floor"] .dashboard-period-toggle button.active { background: #086af0; color: #fff; }
  [data-appearance="floor"] .dashboard-bar-row progress { accent-color: #4389dc; }
  [data-appearance="floor"] .dashboard-bar-row progress::-webkit-progress-bar { background: #edf3fa; }
  [data-appearance="floor"] .dashboard-bar-row progress::-webkit-progress-value { background: #4389dc; }
  [data-appearance="floor"] .dashboard-bar-row progress::-moz-progress-bar { background: #4389dc; }
  [data-appearance="floor"] :is(.dashboard-panel, .dashboard-preview-panel) > header { border-bottom-color: #e4ecf6; }
  [data-appearance="floor"] :is(.primary, .button.primary) { background: #086af0; border-color: #086af0; color: #fff; }

  /* Agency: retain consent/protection colours and completion-date rules. */
  [data-appearance="agency"] :is(.app-header, .panel, .section-heading, .dashboard-stat-grid article) { border-color: #dce5f0; border-radius: 12px; box-shadow: var(--suite-shadow); }
  [data-appearance="agency"] :is(h1, h2, h3) { color: #17375b; }
  [data-appearance="agency"] .eyebrow { color: #617d9e; }
  [data-appearance="agency"] .dashboard-stat-grid article.accent { background: #13395f; border-color: #13395f; }
  [data-appearance="agency"] .system-banner { border-color: #dce5f0; background: #f8faff; }

  /* Reception: every current tab and control remains in place. */
  [data-appearance="intake"] { --brand: #1268d7; --brand-dark: #085abc; --brand-soft: #eaf2ff; --shadow-soft: 0 4px 18px rgba(27,57,94,.045); }
  [data-appearance="intake"] .topbar { background: #133554; border-color: #244565; box-shadow: var(--suite-shadow); border-radius: 12px; }
  [data-appearance="intake"] .panel { border-color: #dce5f0; border-radius: 12px; box-shadow: var(--suite-shadow); }
  [data-appearance="intake"] .panel-head { border-bottom-color: #e1eaf5; }
  [data-appearance="intake"] :is(.tab.is-active, .btn.primary) { color: #fff; background: #086af0; border-color: #086af0; }

  /* Calculator chrome only, not statement canvas, assets or output typography. */
  [data-appearance="pricing"] > :is(.app-header, .app-shell) { font-family: "3S Pretendard", "Malgun Gothic", sans-serif; }
  [data-appearance="pricing"] > .app-header { background: #fff; border-color: #dce5f0; box-shadow: 0 3px 15px rgba(27,57,94,.04); }
  [data-appearance="pricing"] > .app-shell .panel { border-color: #dce5f0; border-radius: 12px; box-shadow: var(--suite-shadow); }
  [data-appearance="pricing"] > .app-shell .panel-head { border-bottom-color: #e1eaf5; }
  [data-appearance="pricing"] > :is(.app-header, .app-shell) button.raised { box-shadow: 0 3px 8px rgba(8,106,240,.12); }
  [data-appearance="pricing"] > :is(.app-header, .app-shell) button.primary { background: #086af0; }

  @media (prefers-reduced-motion: no-preference) {
    [data-appearance] button { transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease; }
  }
  @media (max-width: 900px) {
    [data-appearance="suite"] #loginScreen { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); }
    [data-appearance="suite"] #loginScreen .login-art { padding: 32px 24px; }
    [data-appearance="suite"] .login-brand { font-size: 18px; gap: 10px; }
    [data-appearance="suite"] .login-brand .brand-mark { width: 44px; height: 44px; flex-basis: 44px; font-size: 21px; }
    [data-appearance="suite"] .login-story { margin: 90px 0 0; }
    [data-appearance="suite"] #loginScreen .login-story h2 { font-size: 37px; }
    [data-appearance="suite"] #loginScreen .login-card { padding: 44px 32px; }
  }
  /* Constrain the mobile shell, while keeping existing tables/nav scrollable. */
  @media (max-width: 760px) {
    [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) { grid-template-columns: minmax(0, 1fr) !important; width: 100%; min-width: 0; }
    [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-primary-sidebar { min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; }
    [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-primary-sidebar nav { width: 100%; min-width: 0; }
    [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-workbar { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  }
  @media (max-width: 640px) {
    [data-appearance="suite"] .integrated-test-shell:not(.demolition-content-active) .service-primary-icon::after { inset: 6px; }
    [data-appearance="suite"] #loginScreen { grid-template-columns: minmax(0, 1fr); }
    [data-appearance="suite"] #loginScreen .login-art { min-height: 188px; padding: 25px 26px; background-position: center 78%; }
    [data-appearance="suite"] .login-story { margin: 20px 0 0; }
    [data-appearance="suite"] #loginScreen .login-story h2 { font-size: 27px; line-height: 1.35; }
    [data-appearance="suite"] #loginScreen .login-story p { font-size: 13px; margin-top: 12px; }
    [data-appearance="suite"] .login-brand-footer { position: static; margin-top: 18px; font-size: 10px; }
    [data-appearance="suite"] #loginScreen .login-card { padding: 32px 26px 36px; justify-content: flex-start; }
    [data-appearance="suite"] #loginScreen .login-card h1 { font-size: 34px; margin: 12px 0; }
    [data-appearance="suite"] #loginScreen .login-description { margin-bottom: 24px; font-size: 14px; }
    [data-appearance="suite"] #loginScreen .login-footnote { margin-top: 12px; }
  }
  body.embed-mode[data-appearance="suite"] #loginScreen { grid-template-columns: minmax(0, 1fr); }
  body.embed-mode[data-appearance="suite"] #loginScreen .login-card { max-width: 560px; margin: auto; }
}