.notice-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 22px;
      align-items: start;
    }

    .notice-view-tabs {
      display: inline-flex;
      gap: 6px;
      margin: 4px 0 18px;
      padding: 5px;
      border: 1px solid #dce4f1;
      border-radius: 13px;
      background: #eef3fb;
    }

    .notice-view-tab {
      min-height: 40px;
      padding: 0 16px;
      border: 0;
      border-radius: 9px;
      color: #667085;
      background: transparent;
      font: inherit;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
    }

    .notice-view-tab.active {
      color: #175cd3;
      background: #fff;
      box-shadow: 0 2px 7px rgba(52, 64, 84, 0.08);
    }

    .notice-attached-tabs {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 4px;
      margin: 8px 0 -1px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    .notice-attached-tabs .notice-view-tab {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 0 18px;
      border: 1px solid transparent;
      border-bottom: 0;
      border-radius: 13px 13px 0 0;
      color: #475467;
      background: #e8eef7;
      font-size: 13px;
      line-height: 1.2;
      white-space: nowrap;
      box-shadow: none;
    }

    .notice-attached-tabs .notice-view-tab.active {
      z-index: 3;
      color: var(--primary);
      border-color: var(--line);
      background: var(--surface-soft);
      box-shadow: none;
    }

    .notice-attached-tabs .notice-view-tab.active::before,
    .notice-attached-tabs .notice-view-tab.active::after {
      position: absolute;
      bottom: 0;
      width: 16px;
      height: 16px;
      pointer-events: none;
      content: "";
    }

    .notice-attached-tabs .notice-view-tab.active::before {
      left: -16px;
      border-bottom-right-radius: 16px;
      box-shadow: 8px 8px 0 7px var(--surface-soft);
    }

    .notice-attached-tabs .notice-view-tab:first-child.active::before {
      display: none;
    }

    .notice-attached-tabs .notice-view-tab.active::after {
      right: -16px;
      border-bottom-left-radius: 16px;
      box-shadow: -8px 8px 0 7px var(--surface-soft);
    }

    .notice-attached-tabs + .notice-layout .notice-panel {
      border-top-left-radius: 0;
    }

    .notice-panel {
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: var(--surface-soft);
    }

    .notice-panel[hidden] {
      display: none;
    }

    .notice-panel h2 {
      margin: 0 0 6px;
      font-size: 19px;
    }

    .notice-help {
      margin: 0 0 20px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

    .notice-form {
      display: grid;
      gap: 16px;
    }

    .notice-form-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .notice-content-input {
      min-height: 150px;
      resize: vertical;
    }

    .notice-template-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: -4px;
    }

    .notice-template-button {
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid #c9d7ee;
      border-radius: 9px;
      color: #175cd3;
      background: #eef4ff;
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .notice-template-button:hover {
      border-color: #9eb8e7;
      background: #e2ecff;
    }

    .notice-target-box {
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid #d9e3f2;
      border-radius: 13px;
      background: #fff;
    }

    .notice-target-title {
      margin: 0;
      font-size: 14px;
      font-weight: 900;
    }

    .notice-target-grid {
      display: grid;
      grid-template-columns: 1.2fr repeat(7, minmax(0, 1fr));
      gap: 10px;
    }

    .notice-target-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .notice-target-status {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .notice-target-list {
      display: grid;
      max-height: 430px;
      overflow-y: auto;
      gap: 9px;
      padding-right: 3px;
    }

    .notice-target-empty {
      padding: 17px 12px;
      border: 1px dashed #cbd5e1;
      border-radius: 11px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      text-align: center;
    }

    .notice-target-building {
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      overflow: hidden;
      background: #fbfcfe;
    }

    .notice-target-building-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      border-bottom: 1px solid #e7edf6;
      background: #f5f8ff;
    }

    .notice-check-label {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: 8px;
      color: #344054;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }

    .notice-check-label span {
      overflow: hidden;
      min-width: 0;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .notice-check-label input {
      width: 16px;
      min-height: 16px;
      margin: 0;
      flex: 0 0 auto;
    }

    .notice-target-building-count {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
    }

    .notice-target-units {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
      gap: 7px;
      padding: 10px;
    }

    .notice-target-unit {
      min-height: 40px;
      padding: 7px 9px;
      border: 1px solid #e7edf6;
      border-radius: 9px;
      background: #fff;
    }

    .notice-target-unit.active {
      border-color: #175cd3;
      background: #eef4ff;
      box-shadow: inset 3px 0 #175cd3;
    }

    .notice-target-detail {
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid #c7d7fe;
      border-radius: 13px;
      background: #f8fbff;
    }

    .notice-target-detail[hidden] {
      display: none;
    }

    .notice-target-detail h4 {
      margin: 0;
      font-size: 15px;
    }

    .notice-target-detail-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .notice-target-detail-item {
      min-width: 0;
      padding: 10px;
      border: 1px solid #e0e7f5;
      border-radius: 10px;
      background: #fff;
    }

    .notice-target-detail-label {
      display: block;
      margin-bottom: 4px;
      color: #667085;
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .notice-target-detail-value {
      color: #101828;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.45;
      white-space: pre-wrap;
    }

    .notice-target-history {
      max-height: 280px;
      overflow: auto;
      border: 1px solid #e0e7f5;
      border-radius: 10px;
      background: #fff;
    }

    .notice-target-history table {
      min-width: 760px;
      font-size: 12px;
    }

    .notice-target-history-empty {
      margin: 0;
      padding: 16px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      text-align: center;
    }

    .notice-submit {
      min-height: 50px;
      border: 0;
      border-radius: 12px;
      color: #fff;
      background: var(--primary);
      font: inherit;
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
    }

    .notice-submit:disabled {
      cursor: wait;
      opacity: 0.65;
    }

    .notice-message {
      min-height: 20px;
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .notice-message.success {
      color: var(--success);
    }

    .notice-message.error {
      color: var(--danger);
    }

    .optional-label {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .notice-image-control {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
    }

    .notice-image-input {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
    }

    .notice-image-upload {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 14px;
      border: 1px solid #b7dca7;
      border-radius: 10px;
      color: #356e20;
      background: #f4fbef;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }

    .notice-image-upload:hover {
      background: #e8f5e2;
    }

    .notice-image-clear {
      min-height: 38px;
      padding: 0 12px;
      border: 0;
      border-radius: 9px;
      color: #b42318;
      background: #fee4e2;
      font: inherit;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }

    .notice-image-status {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .notice-image-preview {
      margin-top: 10px;
      overflow: hidden;
      border: 1px solid #dce4f1;
      border-radius: 12px;
      background: #f8fafc;
    }

    .notice-image-preview[hidden],
    .notice-image-clear[hidden] {
      display: none;
    }

    .notice-image-preview img {
      display: block;
      width: 100%;
      max-height: 260px;
      object-fit: contain;
      background: #eef3fb;
    }

    .notice-list-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .notice-list-header h2 {
      margin: 0;
    }

    .notice-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .notice-list-empty {
      padding: 35px 20px;
      border: 1px dashed #cbd5e1;
      border-radius: 14px;
      color: var(--muted);
      text-align: center;
    }

    .operator-notice-card {
      padding: 13px;
      border: 1px solid #dce4f1;
      border-radius: 12px;
      background: #fff;
      cursor: pointer;
    }

    .operator-notice-card:hover {
      border-color: #b7c7e5;
      background: #f8fbff;
    }

    .operator-notice-top,
    .operator-notice-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .operator-notice-badge {
      display: inline-flex;
      padding: 5px 8px;
      border-radius: 999px;
      color: #175cd3;
      background: #eaf1ff;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .operator-notice-badge.warning {
      color: #b42318;
      background: #fee4e2;
    }

    .operator-notice-badge.advice {
      color: #067647;
      background: #dcfae6;
    }

    .operator-notice-office {
      overflow: hidden;
      color: #667085;
      font-size: 11px;
      font-weight: 800;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .operator-notice-title {
      margin: 12px 0 7px;
      font-size: 14px;
    }

    .operator-notice-body {
      margin: 0;
      color: #4b5565;
      font-size: 12px;
      line-height: 1.65;
      white-space: pre-wrap;
    }

    .operator-notice-card .operator-notice-body {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .operator-notice-image {
      display: block;
      width: 100%;
      max-height: 220px;
      margin: 10px 0 0;
      object-fit: contain;
      border-radius: 10px;
      background: #eef3fb;
    }

    .operator-notice-footer {
      margin-top: 13px;
      padding-top: 11px;
      border-top: 1px solid #edf1f6;
      color: #7b8494;
      font-size: 10px;
      font-weight: 800;
    }

    .notice-detail-dialog {
      width: min(92vw, 720px);
      max-height: 86vh;
      padding: 0;
      overflow: auto;
      border: 0;
      border-radius: 16px;
      color: var(--text);
      background: #fff;
      box-shadow: 0 30px 80px rgba(17, 24, 39, 0.28);
    }

    .notice-detail-dialog::backdrop {
      background: rgba(15, 23, 42, 0.48);
      backdrop-filter: blur(3px);
    }

    .notice-detail-body {
      padding: 24px;
    }

    .notice-detail-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin: 12px 0 18px;
    }

    .notice-meta-pill {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      color: #356e20;
      background: #eefad8;
      font-size: 12px;
      font-weight: 900;
    }

    .notice-detail-text {
      margin: 0;
      color: #344054;
      font-size: 14px;
      line-height: 1.7;
      white-space: pre-wrap;
    }

    .notice-detail-image {
      display: block;
      width: 100%;
      max-height: 420px;
      margin-bottom: 18px;
      object-fit: contain;
      border-radius: 14px;
      background: #eef3fb;
    }

    .notice-detail-image[hidden] {
      display: none;
    }