:root {
      --bg: #f5f7fb;
      --card: #ffffff;
      --text: #172033;
      --muted: #667085;
      --line: #e5e7eb;
      --blue: #2563eb;
      --green: #16a34a;
      --orange: #f97316;
      --red: #ef4444;
      --purple: #7c3aed;
      --ink: #0f172a;
      --soft-blue: #eff6ff;
      --soft-green: #ecfdf5;
      --shadow: 0 10px 25px rgba(15, 23, 42, .07);
      --radius: 18px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      min-height: 100%;
      overflow-y: scroll;
      scrollbar-gutter: stable;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", Arial, sans-serif;
      color: var(--text);
      background: linear-gradient(180deg, #eef4ff 0%, var(--bg) 320px);
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button {
      border: 0;
      cursor: pointer;
    }

    .wrap {
      width: min(1180px, 100%);
      margin: 0 auto;
      padding: 28px 20px 60px;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 18px;
      margin-bottom: 22px;
    }

    .brand h1 {
      margin: 0;
      font-size: clamp(29px, 4vw, 38px);
      letter-spacing: 0;
    }

    .brand p {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.55;
    }


    .mode-btn {
      min-height: 36px;
      border-radius: 999px;
      background: #fff;
      color: #334155;
      border: 1px solid var(--line);
      padding: 0 13px;
      font-weight: 900;
      box-shadow: 0 3px 10px rgba(15, 23, 42, .05);
    }

    .mode-btn.active {
      background: var(--blue);
      color: #fff;
      border-color: var(--blue);
    }

    .auth-area {
      display: grid;
      justify-items: end;
      gap: 10px;
      min-width: 170px;
    }

    .auth-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      padding: 6px 8px 6px 13px;
      box-shadow: 0 3px 10px rgba(15, 23, 42, .05);
    }

    .auth-status span {
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #334155;
      font-size: 13px;
      font-weight: 900;
    }

    .login-window {
      width: min(460px, 100%);
    }

    .login-form {
      display: grid;
      gap: 12px;
      margin-top: 14px;
    }

    .login-error {
      min-height: 20px;
      margin: 0;
      color: var(--red);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.45;
    }

    body.resident-view .admin-only {
      display: none !important;
    }

    body.admin-view .resident-only,
    body.resident-view .admin-org-tab {
      display: none !important;
    }

    .hero {
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(239, 246, 255, .9)),
        radial-gradient(circle at 85% 20%, rgba(20, 184, 166, .18), transparent 32%);
      border: 1px solid rgba(191, 219, 254, .9);
      border-radius: 22px;
      padding: 30px;
      box-shadow: var(--shadow);
      display: grid;
      grid-template-columns: 1.35fr .9fr;
      gap: 22px;
      margin-bottom: 18px;
    }

    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      color: var(--blue);
      font-size: 13px;
      font-weight: 900;
    }

    .apartment-name-main {
      display: block;
      margin: 0 0 8px;
      color: var(--ink);
      font-size: clamp(30px, 5vw, 48px);
      line-height: 1.1;
      font-weight: 950;
      letter-spacing: 0;
      word-break: keep-all;
    }

    .hero h2 {
      font-size: clamp(18px, 2.5vw, 24px);
      margin: 0 0 12px;
      letter-spacing: 0;
    }

    .hero p {
      color: var(--muted);
      line-height: 1.7;
      margin: 0;
    }

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

    .quick div {
      background: rgba(255, 255, 255, .86);
      border: 1px solid rgba(191, 219, 254, .75);
      border-radius: 16px;
      padding: 15px;
      box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
    }

    .quick strong {
      display: block;
      font-size: 25px;
      margin-bottom: 4px;
      color: var(--ink);
    }

    .quick span {
      color: var(--muted);
      font-size: 13px;
    }

    .overview-board {
      display: grid;
      gap: 14px;
    }

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

    .overview-block {
      border: 1px solid var(--line);
      background: #f8fafc;
      border-radius: 14px;
      padding: 14px;
    }

    .overview-block h4 {
      margin: 0 0 10px;
      font-size: 15px;
    }

    .resident-office-card {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
      border: 1px solid #bfdbfe;
      background: #eff6ff;
      border-radius: 14px;
      padding: 14px;
    }

    .resident-office-card strong {
      display: block;
      color: var(--ink);
      font-size: 15px;
      margin-bottom: 6px;
    }

    .resident-office-card span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    .overview-item {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 4px;
      width: 100%;
      padding: 10px 0;
      border-top: 1px solid var(--line);
      border-left: 0;
      border-right: 0;
      border-bottom: 0;
      background: transparent;
      text-align: left;
      cursor: pointer;
    }

    .overview-item:first-of-type {
      border-top: 0;
      padding-top: 0;
    }

    div.overview-item {
      cursor: default;
    }

    .overview-item strong {
      display: block;
      font-size: 14px;
      color: var(--ink);
    }

    .overview-item span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .click-label {
      color: var(--blue);
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    /* 선거관리위원회 투표결과 제목 및 결과 배지 */
.vote-result-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-bottom: 4px;
}

.vote-result-title-row strong {
  min-width: 0;
  margin: 0;
  line-height: 1.45;
  word-break: keep-all;
}

/* 선거관리위원회 투표결과 제목 및 결과 배지 */
.vote-result-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-bottom: 4px;
}

.vote-result-title-row strong {
  min-width: 0;
  margin: 0;
  line-height: 1.45;
  word-break: keep-all;
}

/*
 * .info span보다 우선순위를 높여
 * 배지 글자색과 크기가 덮어써지지 않게 한다.
 */
.info .vote-outcome-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 50px;
  height: 28px;
  padding: 0 12px;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;

  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.14);
}

/* 가결: 선명한 초록 + 흰 글자 */
.info .vote-outcome-badge.approved {
  background: #22c55e;
  color: #ffffff;
}

/* 부결: 선명한 빨강 + 흰 글자 */
.info .vote-outcome-badge.rejected {
  background: #ef4444;
  color: #ffffff;
}

/* 보류: 지정한 노랑 + 진한 갈색 글자 */
.info .vote-outcome-badge.deferred {
  background: #ffad00;
  color: #3b2600;
}
    .tabs {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin: 18px 0 22px;
      padding: 0;
      overflow: visible;
    }

    .tab {
      background: #fff;
      color: #334155;
      padding: 11px 16px;
      border-radius: 999px;
      box-shadow: 0 3px 10px rgba(15, 23, 42, .06);
      white-space: nowrap;
      font-weight: 800;
    }

    .tab.active {
      background: var(--blue);
      color: #fff;
    }

    .tools {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 10px;
      margin-bottom: 20px;
    }

    .tools input {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      color: var(--text);
      padding: 12px 13px;
      outline: none;
      box-shadow: 0 3px 10px rgba(15, 23, 42, .04);
    }

    .tools .search-action-btn {
      min-width: 88px;
      min-height: 46px;
    }

    /* 검색이 적용된 현재 섹션 강조 */
    .panel.search-result-wave {
      position: relative;
      overflow: hidden;
      animation: search-result-pulse 0.8s ease-out;
    }

    /* 섹션 위를 지나가는 반짝이는 물결 */
    .panel.search-result-wave::after {
      content: "";
      position: absolute;
      top: -40%;
      bottom: -40%;
      left: -70%;
      width: 55%;
      z-index: 20;
      pointer-events: none;

      background: linear-gradient(110deg,
          transparent 0%,
          rgba(59, 130, 246, 0.04) 28%,
          rgba(255, 255, 255, 0.7) 50%,
          rgba(59, 130, 246, 0.12) 65%,
          transparent 100%);

      transform: skewX(-18deg);
      animation: search-result-wave 0.8s ease-out forwards;
    }

    @keyframes search-result-wave {
      from {
        left: -70%;
        opacity: 0;
      }

      20% {
        opacity: 1;
      }

      to {
        left: 125%;
        opacity: 0;
      }
    }

    @keyframes search-result-pulse {
      0% {
        box-shadow: inherit;
      }

      35% {
        box-shadow:
          0 0 0 2px rgba(59, 130, 246, 0.14),
          0 14px 34px rgba(59, 130, 246, 0.14);
      }

      100% {
        box-shadow: inherit;
      }
    }

    .stamp-tools {
      display: inline-grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 12px;
      margin: -6px 0 18px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255, 255, 255, .82);
      box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
    }

    .stamp-tools strong {
      display: block;
      color: var(--ink);
      font-size: 14px;
    }

    .stamp-tools span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-top: 3px;
    }

    .primary {
      background: var(--blue);
      color: #fff;
      border-radius: 14px;
      padding: 0 16px;
      min-height: 46px;
      font-weight: 900;
      white-space: nowrap;
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
    }

    .grid.focused {
      grid-template-columns: 1fr;
    }

    .grid:not(.focused)>section,
    .grid:not(.focused)>aside,
    .grid.focused>section,
    .grid.focused>aside {
      display: contents;
    }

    .grid.focused {
      grid-template-columns: 1fr;
    }

    .grid.focused .panel {
      max-width: none;
    }

    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 20px;
      box-shadow: var(--shadow);
      margin-bottom: 20px;
    }

    .card h3 {
      margin: 0 0 16px;
      font-size: 20px;
      letter-spacing: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

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

    .panel-title {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      min-width: 0;
    }

    .panel-register-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;

      min-height: 38px;
      margin-left: auto;
      padding: 0 14px;

      border: 1px solid #99f6e4;
      border-radius: 11px;

      background: #ecfdf5;
      color: #0f766e;

      font-size: 13px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;

      box-shadow: 0 4px 12px rgba(15, 118, 110, 0.1);

      transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
    }

    .panel-register-btn::before {
      content: "+";
      margin-right: 5px;
      font-size: 17px;
      font-weight: 900;
      line-height: 1;
    }

    .panel-register-btn:hover {
      border-color: #5eead4;
      background: #ccfbf1;
      color: #115e59;
      transform: translateY(-1px);
      box-shadow: 0 7px 16px rgba(15, 118, 110, 0.16);
    }

    .panel-register-btn:active {
      transform: translateY(0);
    }

    .panel-register-btn:focus-visible {
      outline: 3px solid rgba(20, 184, 166, 0.2);
      outline-offset: 2px;
    }

    .month {
      display: grid;
      grid-template-columns: 78px 1fr;
      gap: 16px;
      padding: 15px 0;
      border-top: 1px solid var(--line);
    }

    .month:first-of-type {
      border-top: none;
      padding-top: 0;
    }

    .month b {
      font-size: 18px;
      color: #1e40af;
    }

    .schedule-toolbar {
      display: grid;
      grid-template-columns: minmax(190px, 1fr) auto minmax(220px, 1fr);
      align-items: center;
      gap: 10px;
      margin: -4px 0 16px;
    }

    .schedule-filters {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }

    .dong-filter,
    .year-filter {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 800;
      color: var(--muted);
    }

    .dong-filter select,
    .year-filter select {
      min-width: 104px;
      height: 38px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 0 10px;
      background: #fff;
      color: var(--text);
      font-weight: 800;
    }

    .month-switcher,
    .view-switcher {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .month-switcher {
      justify-self: start;
    }

    .view-switcher {
      justify-self: center;
    }

    .schedule-toolbar .month-switcher.hidden {
      display: flex !important;
      visibility: hidden;
      pointer-events: none;
    }

    .month-switcher strong {
      min-width: 120px;
      text-align: center;
      color: var(--ink);
    }

    .icon-btn,
    .view-btn {
      min-height: 34px;
      border-radius: 10px;
      background: #f1f5f9;
      color: #334155;
      font-weight: 900;
      padding: 0 11px;
    }

    .icon-btn {
      width: 36px;
      padding: 0;
    }

    .view-btn.active {
      background: var(--blue);
      color: #fff;
    }

    .subtabs {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin: -4px 0 16px;
      padding-bottom: 2px;
      overflow: visible;
    }

    .subtab {
      min-height: 36px;
      border-radius: 999px;
      background: #f1f5f9;
      color: #334155;
      padding: 0 14px;
      font-weight: 900;
      white-space: nowrap;
    }

    .subtab.active {
      background: var(--blue);
      color: #fff;
    }

    .org-shell {
      display: grid;
      gap: 16px;
    }

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

    .org-unit {
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 12px;
      padding: 13px;
      text-align: left;
      cursor: pointer;
    }

    .org-unit strong {
      display: block;
      font-size: 15px;
      margin-bottom: 5px;
    }

    .org-unit span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .org-unit.active {
      border-color: #93c5fd;
      background: #eff6ff;
    }

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

    .member-card {
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 12px;
      padding: 12px;
    }

    .member-card strong {
      display: block;
      margin-bottom: 5px;
    }

    .member-card span,
    .attendance-summary span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .attendance-checks {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin: 10px 0 4px;
    }

    .attendance-checks label {
      display: flex;
      align-items: center;
      gap: 7px;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 9px;
      font-weight: 800;
      background: #fff;
    }

    .attendance-summary {
      display: grid;
      gap: 5px;
      border: 1px solid #bfdbfe;
      background: #eff6ff;
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 12px;
    }

    .admin-member-box {
      border: 1px solid var(--line);
      background: #f8fafc;
      border-radius: 14px;
      padding: 14px;
      margin-bottom: 14px;
    }

    .member-editor {
      display: grid;
      gap: 10px;
    }

    .member-editor-row {
      display: grid;
      grid-template-columns: 90px 120px minmax(0, 1fr) 130px 130px auto;
      gap: 8px;
      align-items: end;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 12px;
      padding: 10px;
    }

    .member-editor-row label {
      display: grid;
      gap: 5px;
      font-size: 12px;
      font-weight: 800;
      color: var(--muted);
    }

    .member-editor-row input,
    .member-editor-row select {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 9px 10px;
      color: var(--text);
      background: #fff;
    }

    .member-editor-row .check-label {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text);
      padding-bottom: 9px;
    }

    .building-config {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto auto;
      gap: 10px;
      align-items: end;
    }

    .building-config label {
      display: grid;
      gap: 7px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .building-config input {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 11px 12px;
      color: var(--text);
    }

    .building-editor-list {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 2px;
    }

    .building-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 999px;
      padding: 6px 8px 6px 11px;
      font-size: 13px;
      font-weight: 900;
    }

    .building-chip input {
      width: 86px;
      border: 0;
      padding: 3px 2px;
      font-weight: 900;
    }

    .building-chip button {
      width: 22px;
      height: 22px;
      border: 0;
      border-radius: 50%;
      background: #fee2e2;
      color: #991b1b;
      font-weight: 900;
      cursor: pointer;
    }

    .building-settings {
      width: 100%;
      box-sizing: border-box;
      grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) auto;
    }

    .building-settings>div:first-child {
      min-width: 0;
    }

    .building-settings>div:first-child strong,
    .building-settings>div:first-child span {
      white-space: normal;
      word-break: keep-all;
    }

    .building-settings.collapsed {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .building-settings.collapsed .building-config {
      display: none;
    }

    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 8px;
      align-items: stretch;
    }

    .weekday {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      text-align: center;
      padding: 4px 0;
    }

    .weekday.sunday,
    .day.sunday .day-num {
      color: #dc2626;
    }

    .weekday.saturday,
    .day.saturday .day-num {
      color: #2563eb;
    }

    .day.sunday {
      background: #fff8f8;
      border-color: #f4dede;
    }

    .day.saturday {
      background: #f7faff;
      border-color: #dce7f7;
    }

    .day.sunday.muted {
      background: #fdf7f7;
    }

    .day.saturday.muted {
      background: #f5f8fc;
    }

    .day {
      min-height: 132px;
      height: 100%;
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      padding: 8px;
      overflow: hidden;
    }

    .day.has-events {
      cursor: pointer;
    }

    .day.has-events:hover,
    .day.has-events:focus-visible {
      border-color: #9db5f2;
      background: #f8faff;
      box-shadow: 0 8px 20px rgba(49, 91, 232, .10);
      outline: none;
    }

    .day-events {
      min-width: 0;
    }

    .mobile-calendar-list {
      display: none;
    }

    .day.muted {
      background: #f8fafc;
      color: #98a2b3;
    }

    .day-num {
      display: block;
      font-size: 12px;
      font-weight: 900;
      margin-bottom: 6px;
    }

    .day-event {
      display: block;
      width: 100%;
      appearance: none;
      border: 0;
      border-radius: 8px;
      background: var(--soft-blue);
      color: #1e3a8a;
      padding: 5px 6px;
      margin-top: 5px;
      text-align: left;
      font-size: 11px;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }

    .calendar-legend {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 7px 12px;
      flex-wrap: wrap;
      margin: -7px 0 12px;
      color: #64748b;
      font-size: 11px;
      font-weight: 800;
    }

    .calendar-legend.hidden {
      display: none;
    }

    .calendar-legend>span {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }

    .calendar-legend-title {
      color: #334155;
      font-size: 11px;
      font-weight: 950;
      white-space: nowrap;
    }

    .vote-calendar-legend {
      justify-content: flex-start;
      align-items: flex-start;
      margin-top: -5px;
      padding: 9px 11px;
      border: 1px solid #e9d5ff;
      border-radius: 10px;
      background: #faf5ff;
    }

    .vote-calendar-legend>span {
      align-items: flex-start;
      max-width: min(320px, 100%);
      white-space: normal;
    }

    .vote-calendar-legend em {
      color: #475569;
      font-size: 10px;
      font-style: normal;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .legend-line {
      flex: 0 0 26px;
      width: 26px;
      height: 5px;
      margin-top: 5px;
      border-radius: 999px;
      background: var(--legend-line);
    }

    .legend-dot {
      width: 9px;
      height: 9px;
      border-radius: 3px;
    }

    .legend-dot.tone-schedule {
      background: #2853c7;
    }

    .legend-dot.tone-project {
      background: #d97706;
    }

    .legend-dot.tone-meeting {
      background: #16a34a;
    }

    .legend-dot.tone-vote {
      background: #9333ea;
    }

    .compact-schedule .schedule-toolbar {
      display: none;
    }

    .focused .calendar-grid {
      gap: 10px;
    }

    .focused .day {
      min-height: 148px;
    }

    .event {
      display: flex;
      gap: 10px;
      margin: 0 0 10px;
      align-items: flex-start;
    }

    button.event {
      width: 100%;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
      padding: 0;
    }

    .notice-row {
      width: 100%;
      display: grid;
      gap: 5px;
      padding: 14px 0;
      border: 0;
      border-top: 1px solid var(--line);
      background: transparent;
      color: inherit;
      text-align: left;
      cursor: pointer;
    }

    .notice-row:first-of-type {
      border-top: none;
      padding-top: 0;
    }

    .notice-row strong {
      color: var(--ink);
      font-size: 15px;
    }

    .notice-row span {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }

    .event:last-child {
      margin-bottom: 0;
    }

    .dot {
      width: 9px;
      height: 9px;
      border-radius: 99px;
      background: var(--blue);
      margin-top: 8px;
      flex: 0 0 auto;
    }

    .event strong {
      display: block;
      font-size: 15px;
    }

    .event small {
      display: block;
      color: var(--muted);
      margin-top: 2px;
      line-height: 1.45;
    }

    .contract,
    .decision,
    .archive-row {
      padding: 14px 0;
      border-top: 1px solid var(--line);
    }

    .contract:first-of-type,
    .decision:first-of-type,
    .archive-row:first-of-type {
      border-top: none;
      padding-top: 0;
    }

    .contract {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      width: 100%;
      background: transparent;
      color: var(--text);
      text-align: left;
    }


    button.contract {
      cursor: pointer;
    }

    button.contract:hover strong {
      color: var(--blue);
    }

/*
 * 공통 pill
 * 별도 상태 클래스가 없는 일반 정보 배지는 파란색
 */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: max-content;
  padding: 6px 10px;

  border: 1px solid #bfdbfe;
  border-radius: 999px;

  background: #eff6ff;
  color: #1d4ed8;

  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

/* 검토중 */
.pill.gray {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #475569;
}

/* 계약중 및 완료 계열 */
.pill.green {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

/* 계약예정 및 주의 계열 */
.pill.orange {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

/* 계약만료예정 및 긴급 계열 */
.pill.red {
  border-color: #fecaca;
  background: #fef2f2;
  color: #dc2626;
}

    .contract p,
    .project p,
    .decision span,
    .archive-row span {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

    .amount {
      font-weight: 900;
      color: var(--ink);
    }

    .file-note {
      color: #94a3b8;
      font-size: 13px;
      margin-top: 6px;
    }

    .alert-note {
      color: #c2410c;
      font-size: 13px;
      font-weight: 900;
      margin-top: 6px;
    }

    .contract-flow {
      display: grid;
      gap: 10px;
      margin: 14px 0;
    }

    .case-flow-action-row {
      display: flex;
      justify-content: flex-end;
      margin: 2px 0 -4px;
    }

    .flow-record {
      display: grid;
      grid-template-columns: 112px 1fr;
      gap: 12px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      padding: 12px;
    }

    .flow-record time {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      line-height: 1.45;
    }

    .flow-record strong {
      display: block;
      color: var(--ink);
      margin-bottom: 5px;
    }

    .flow-record span,
    .flow-record p {
      display: block;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
      margin: 0;
    }

    .flow-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }

    .flow-stats span {
      border-radius: 999px;
      background: #f1f5f9;
      color: #334155;
      padding: 5px 8px;
      font-size: 12px;
      font-weight: 800;
    }

    .project {
      width: 100%;
      padding: 14px 0;
      border-top: 1px solid var(--line);
      border-left: 0;
      border-right: 0;
      border-bottom: 0;
      background: transparent;
      color: inherit;
      text-align: left;
      cursor: pointer;
    }

    .project:first-of-type {
      border-top: none;
      padding-top: 0;
    }

    .project-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
    }

    .status {
      font-size: 12px;
      font-weight: 900;
      border-radius: 999px;
      padding: 5px 9px;
      background: var(--soft-green);
      color: #15803d;
      white-space: nowrap;
    }

    .status.orange {
      background: #fff7ed;
      color: #c2410c;
    }

    .status.purple {
      background: #f5f3ff;
      color: #6d28d9;
    }

    .progress {
      height: 9px;
      background: #e5e7eb;
      border-radius: 99px;
      overflow: hidden;
      margin-top: 10px;
    }

    .bar {
      height: 100%;
      background: var(--green);
      border-radius: 99px;
    }

    .decision strong,
    .archive-row strong {
      display: block;
    }

    .info-list {
      display: grid;
      gap: 10px;
    }

    .info {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      background: #f8fafc;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 13px;
    }

    .guide-item {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 14px;
      text-align: left;
      color: var(--text);
      margin-bottom: 10px;
    }

    .guide-item strong {
      display: block;
      font-size: 16px;
      margin-bottom: 5px;
    }

    .guide-item em {
      color: var(--muted);
      font-size: 13px;
      font-style: normal;
      line-height: 1.45;
    }

    .info span {
      color: var(--muted);
      font-size: 14px;
      white-space: nowrap;
    }

    .guide-detail {
      display: none;
      border-top: 1px solid var(--line);
      margin-top: 16px;
      padding-top: 18px;
    }

    .guide-detail.open {
      display: block;
    }

    .guide-detail h4 {
      margin: 0 0 12px;
      font-size: 24px;
      color: var(--ink);
    }

    .guide-detail p {
      margin: 0;
      color: #344054;
      font-size: 16px;
      line-height: 1.85;
      white-space: pre-line;
    }

    .guide-detail-meta {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin: 12px 0 16px;
    }

    .public-note {
      background: var(--ink);
      color: #fff;
      border-radius: 20px;
      padding: 20px;
      line-height: 1.7;
    }

    .public-note h3 {
      margin: 0 0 8px;
      color: #fff;
    }

    .public-note p {
      margin: 0;
      color: #cbd5e1;
    }

    .admin {
      display: none;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 20px;
    }

    .admin.open {
      display: grid;
    }

    label {
      display: grid;
      gap: 7px;
      color: #344054;
      font-size: 13px;
      font-weight: 800;
    }

    label.full,
    .admin>.full {
      grid-column: 1 / -1;
    }

    .admin input,
    .admin select,
    .admin textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      padding: 11px 12px;
      outline: none;
    }

    .admin textarea {
      min-height: 82px;
      resize: vertical;
    }

    .time-pair {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .file-list {
      grid-column: 1 / -1;
      display: grid;
      gap: 8px;
      color: var(--muted);
      font-size: 13px;
    }

    .pending-file-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid #dbe5f3;
      border-radius: 11px;
      background: #f8fbff;
    }

    .pending-file-row strong {
      min-width: 0;
      overflow-wrap: anywhere;
      color: var(--ink);
    }

    .pending-file-row span {
      flex: 0 0 auto;
    }

    .attachment-block {
      display: grid;
      gap: 9px;
      color: var(--ink);
    }

    .attachment-block>strong {
      font-size: 13px;
      font-weight: 900;
    }

    .attachment-links {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 8px;
    }

    .attachment-link {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 9px;
      padding: 10px 12px;
      border: 1px solid #d7e3f5;
      border-radius: 11px;
      background: #f8fbff;
      color: #1d4ed8;
      text-decoration: none;
      transition: border-color .16s ease, background .16s ease, transform .16s ease;
    }

    .attachment-link:hover {
      border-color: #7aa7f8;
      background: #eef5ff;
      transform: translateY(-1px);
    }

    .attachment-name {
      min-width: 0;
      overflow-wrap: anywhere;
      font-weight: 800;
    }

    .attachment-link small {
      color: #64748b;
      font-size: 11px;
      white-space: nowrap;
    }

    .attachment-link em {
      padding: 4px 7px;
      border-radius: 7px;
      background: #2563eb;
      color: #fff;
      font-size: 11px;
      font-style: normal;
      font-weight: 900;
      white-space: nowrap;
    }

    .attachment-link.is-unavailable {
      border-style: dashed;
      background: #f8fafc;
      color: #64748b;
      cursor: default;
    }

    .attachment-link.is-unavailable em {
      background: #94a3b8;
    }

    @media (max-width: 520px) {
      .attachment-links {
        grid-template-columns: minmax(0, 1fr);
      }

      .attachment-link {
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .attachment-link small {
        grid-column: 1;
      }

      .attachment-link em {
        grid-column: 2;
        grid-row: 1 / span 2;
      }
    }

    .submit-row {
      grid-column: 1 / -1;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    .meeting-workspace {
      display: grid;
      gap: 18px;
      margin-bottom: 18px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--line);
    }

    .upcoming-meetings {
      display: grid;
      gap: 10px;
      margin-bottom: 16px;
    }

    .meeting-card-button {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
      text-align: left;
      background: #f8fafc;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 13px;
      color: var(--text);
    }

    .meeting-card-button.active {
      border-color: #93c5fd;
      background: #eff6ff;
    }

    .meeting-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: flex-end;
      flex-wrap: wrap;
    }

    .upcoming-agenda {
      grid-column: 1 / -1;
      display: none;
      border-top: 1px solid var(--line);
      margin-top: 2px;
      padding-top: 12px;
    }

    .meeting-card-button.open .upcoming-agenda {
      display: grid;
      gap: 10px;
    }

    .agenda-preview {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
      display: grid;
      gap: 6px;
    }

    .agenda-preview strong {
      color: var(--ink);
    }

    .detail-head,
    .detail-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .detail-actions {
      justify-content: flex-end;
      margin-top: 14px;
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(15, 23, 42, .46);
      z-index: 80;
    }

    .modal-backdrop.open {
      display: flex;
    }

    .entry-modal-window {
      width: min(980px, 100%);
    }

    #entryModal .admin {
      display: grid;
      margin: 16px 0 0;
      padding: 0;
      border: 0;
      box-shadow: none;
      background: transparent;
    }

    #entryModal .admin.open {
      display: grid;
    }

    #entryModal .card {
      box-shadow: none;
    }

    .modal-window {
      width: min(720px, 100%);
      max-height: min(760px, calc(100vh - 48px));
      overflow: auto;
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
      padding: 22px;
      border: 1px solid rgba(255, 255, 255, .65);
    }

    .modal-window p {
      line-height: 1.7;
      color: var(--text);
      white-space: pre-line;
    }

    .modal-window label {
      display: grid;
      gap: 7px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      margin: 12px 0;
    }

    .modal-window input,
    .modal-window textarea,
    .modal-window select {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 11px 12px;
      color: var(--text);
      background: #fff;
      box-sizing: border-box;
    }

    .workspace-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }

    .workspace-head h4 {
      margin: 0 0 5px;
      font-size: 17px;
    }

    .workspace-head p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }

    .meeting-form {
      display: grid;
      grid-template-columns: 1fr 180px;
      gap: 12px;
    }

    .agenda-table {
      display: grid;
      gap: 10px;
    }

    .agenda-row {
      display: grid;
      grid-template-columns: 54px 1fr 1fr;
      gap: 10px;
      align-items: start;
      background: #f8fafc;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px;
    }

    .agenda-no {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: var(--soft-blue);
      color: #1d4ed8;
      font-weight: 900;
    }

    .agenda-row input,
    .agenda-row textarea,
    .agenda-row select,
    .meeting-form input {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      padding: 10px 11px;
      outline: none;
    }

    .agenda-row textarea {
      min-height: 78px;
      resize: vertical;
    }

    .contract-linked-box {
      grid-column: 1 / -1;
      border: 1px solid #bfdbfe;
      background: #eff6ff;
      border-radius: 14px;
      padding: 12px;
      display: grid;
      gap: 10px;
    }

    .contract-linked-box strong {
      color: var(--ink);
      font-size: 14px;
    }

    .contract-final-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .vote-request-box {
      grid-column: 1 / -1;
      border: 1px solid #bfdbfe;
      background: #eff6ff;
      border-radius: 14px;
      padding: 12px;
      display: grid;
      gap: 10px;
    }

    .vote-request-list {
      display: grid;
      gap: 8px;
    }

    .vote-request-card {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      padding: 10px 11px;
      color: var(--text);
      text-align: left;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
    }

    .vote-request-card strong {
      display: block;
      color: var(--ink);
      font-size: 14px;
      margin-bottom: 4px;
    }

    .vote-request-card span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .plan-list {
      display: grid;
      gap: 8px;
    }

    .plan-button {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
      width: 100%;
      text-align: left;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      padding: 12px;
      color: var(--text);
    }

    .meeting-result-modal-window {
      width: min(1080px, 100%);
    }

    .meeting-result-modal-window #decisionRows {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }

    .meeting-result-publish {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-top: 20px;
      padding: 16px 18px;
      border: 2px solid #2563eb;
      border-radius: 16px;
      background: #eff6ff;
    }

    .meeting-result-publish div {
      display: grid;
      gap: 4px;
    }

    .meeting-result-publish strong {
      color: #1d4ed8;
      font-size: 16px;
    }

    .meeting-result-publish span {
      color: #475569;
      font-size: 13px;
    }

    .meeting-result-publish label {
      min-width: 190px;
      margin: 0;
    }

    .decision-row {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px;
      display: grid;
      gap: 8px;
    }

    .election-section {
      background: #f8fafc;
    }

    .election-card {
      margin-top: 15px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      padding: 13px 14px;
      color: var(--text);
      text-align: left;
    }

    .election-card strong {
      display: block;
      margin-bottom: 5px;
      color: var(--ink);
      font-size: 15px;
    }

    .election-card span,
    .election-card em {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-style: normal;
      line-height: 1.45;
    }

    .election-card .click-label {
      align-self: center;
    }

    .election-section .archive-row {
      background: #fff;
    }

    .decision-row textarea,
    .decision-row select,
    .decision-row input {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 11px;
      background: #fff;
    }

    .vote-request-toggle {
      width: 100%;
      min-height: 44px;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      background: #f8fafc;
      color: #334155;
      font-weight: 900;
    }

    .vote-request-toggle.active {
      border-color: #7c3aed;
      background: #7c3aed;
      color: #fff;
    }

    .returned-vote-note {
      display: grid;
      gap: 5px;
      border: 1px solid #c4b5fd;
      border-radius: 12px;
      background: #f5f3ff;
      padding: 11px 12px;
    }

    .returned-vote-note strong {
      color: #5b21b6;
    }

    .returned-vote-note span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .secondary {
      background: #f1f5f9;
      color: #334155;
      border-radius: 14px;
      padding: 0 16px;
      min-height: 44px;
      font-weight: 900;
    }

    .hidden {
      display: none !important;
    }

    .meeting-register {
      grid-column: 1 / -1;
      display: none;
      gap: 14px;
      padding: 14px;
      border: 1px solid #bfdbfe;
      border-radius: 16px;
      background: #eff6ff;
    }

    .admin.meeting-mode .standard-field {
      display: none;
    }

    .admin.meeting-mode label:has(#entryStartHour) {
      display: grid;
    }

    .meeting-only-field {
      display: none !important;
    }

    .representative-member-actions {
      display: flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
      flex-wrap: wrap;
    }

    .representative-member-actions button {
      min-height: 32px;
      padding: 6px 9px;
      font-size: 11px;
      white-space: nowrap;
    }

    /* Keep meeting registration flat: no nested workspace/card frame. */
    #entryModal #meetingRegisterFields {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      overflow: visible;
    }

    #entryModal #completedVoteBox {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      padding: 0 0 14px;
      border: 0;
      border-bottom: 1px solid #dbe7f5;
      border-radius: 0;
      background: transparent;
      box-sizing: border-box;
    }

    .admin.meeting-mode .meeting-only-field {
      display: grid !important;
    }

    .admin.guide-mode .meeting-only-field {
      display: none !important;
    }

    .admin.meeting-mode .meeting-register {
      display: grid;
    }

    .meeting-agenda-list {
      display: grid;
      gap: 7px;
      margin-top: 10px;
    }

    .meeting-agenda-item {
      display: grid;
      grid-template-columns: 68px 1fr;
      gap: 10px;
      align-items: start;
      padding: 8px 10px;
      border-radius: 10px;
      background: #f8fafc;
      color: #334155;
    }

    .meeting-agenda-item b {
      color: #1d4ed8;
    }

    .meeting-content-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin: 16px 0 20px;
      padding: 16px;
      border: 1px solid #bfdbfe;
      border-radius: 16px;
      background: #eff6ff;
    }

    .meeting-content-fields .full {
      grid-column: 1 / -1;
    }

    @media (max-width: 700px) {
      .calendar-legend {
        justify-content: flex-start;
        gap: 6px 9px;
        margin-top: -3px;
        font-size: 10px;
      }

      .meeting-content-fields {
        grid-template-columns: 1fr;
      }

      .meeting-content-fields .full {
        grid-column: auto;
      }
    }

    .guide-register {
      grid-column: 1 / -1;
      display: none;
      gap: 12px;
      padding: 14px;
      border: 1px solid #d8b4fe;
      border-radius: 16px;
      background: #faf5ff;
    }

    .office-register {
      display: none;
      padding: 14px;
      border: 1px solid #bfdbfe;
      border-radius: 14px;
      background: #eff6ff;
    }

    .admin.office-mode .office-register {
      display: grid;
    }

    .admin.guide-mode .standard-field,
    .admin.guide-mode .meeting-register {
      display: none;
    }

    .admin.guide-mode .guide-register {
      display: grid;
    }

    #guideBody {
      min-height: 260px;
      line-height: 1.65;
      resize: vertical;
    }

    #editGuideBody {
      min-height: 320px;
      line-height: 1.65;
      resize: vertical;
    }

    .contract-register,
    .vote-register,
    .building-register {
      grid-column: 1 / -1;
      display: none;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #f8fafc;
    }

    .contract-register {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: end;
    }

    .contract-register label.full {
      grid-column: 1 / -1;
    }

    .contract-register textarea {
      min-height: 96px;
    }

    .vote-register {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: end;
    }

    .vote-register label.full {
      grid-column: 1 / -1;
    }

    .vote-section-field {
      display: none !important;
    }

    .admin.vote-mode>.vote-section-field {
      display: grid !important;
    }

    .admin.contract-mode .standard-field,
    .admin.contract-mode .date-field,
    .admin.contract-mode .meeting-register,
    .admin.contract-mode .guide-register {
      display: none;
    }

    .admin.guide-mode .date-field {
      display: none;
    }

    .admin.vote-mode .standard-field,
    .admin.vote-mode .date-field,
    .admin.vote-mode .meeting-register,
    .admin.vote-mode .guide-register {
      display: none;
    }

    .admin.contract-mode .contract-register,
    .admin.vote-mode .vote-register,
    .admin.schedule-mode .building-register,
    .admin.project-mode .building-register,
    .admin.office-project-mode .building-register {
      display: grid;
    }

    .admin:not(.project-mode):not(.office-project-mode) .project-vendor-fields,
    .reminder-field,
    .vote-result-field {
      display: none;
    }

    .schedule-register-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    #buildingRows {
      display: grid;
      gap: 10px;
    }

    .building-schedule-modes {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 0 0 12px;
    }

    .building-schedule-modes label {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      gap: 7px;
      min-width: 120px;
      padding: 10px 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      cursor: pointer;
    }

    .day-event.tone-schedule,
    .calendar-day-modal-badge.tone-schedule {
      background: #eaf1ff;
      color: #2853c7;
    }

    .day-event.tone-project,
    .calendar-day-modal-badge.tone-project {
      background: #fff0df;
      color: #b45309;
    }

    .day-event.tone-contract,
    .calendar-day-modal-badge.tone-contract {
      background: #ede9fe;
      color: #5b3cc4;
    }

    .day-event.tone-result,
    .calendar-day-modal-badge.tone-result {
      background: #dcf8e9;
      color: #087a4a;
    }

    .day-event.tone-meeting,
    .calendar-day-modal-badge.tone-meeting {
      background: #dcfce7;
      color: #15803d;
    }

    .day-event.tone-vote,
    .calendar-day-modal-badge.tone-vote {
      background: #f3e8ff;
      color: #7e22ce;
    }

    .day-event.tone-office,
    .calendar-day-modal-badge.tone-office {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .day-event.tone-case,
    .calendar-day-modal-badge.tone-case {
      background: #ffe8e8;
      color: #b83737;
    }

    .day-event.tone-notice,
    .calendar-day-modal-badge.tone-notice {
      background: #e3f5ff;
      color: #116f9f;
    }

    .day-event.tone-life,
    .calendar-day-modal-badge.tone-life {
      background: #ddf8f3;
      color: #087b69;
    }

    .day-event.tone-closed,
    .calendar-day-modal-badge.tone-closed {
      background: #edf0f4;
      color: #667085;
    }

    .day-more {
      display: none;
    }

    .building-schedule-modes input {
      width: 16px;
      height: 16px;
      margin: 0;
    }

    .project-time-settings {
      display: none;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
    }

    .admin.project-mode .project-time-settings,
    .admin.office-project-mode .project-time-settings {
      display: grid;
    }

    .project-time-heading {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .project-time-heading span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .project-time-modes {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .project-time-modes label {
      display: inline-flex;
      grid-template-columns: none;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      min-width: 150px;
      padding: 11px 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #f8fafc;
      cursor: pointer;
    }

    .project-time-modes input {
      width: 16px;
      height: 16px;
      margin: 0;
    }


    .building-row {
      display: grid;
      grid-template-columns: minmax(90px, .6fr) repeat(2, minmax(150px, 1fr));
      gap: 12px;
      align-items: center;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
    }

    .building-row.with-time {
      grid-template-columns: minmax(90px, .55fr) repeat(4, minmax(130px, 1fr));
    }

    .building-row-name {
      padding: 10px 12px;
      border-radius: 10px;
      background: #eef5ff;
      color: var(--blue);
      text-align: center;
      white-space: nowrap;
    }

    .building-row>div:first-child {
      grid-column: 1 / -1;
      min-width: 0;
    }

    .building-row>div:first-child>div:first-child {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
    }

    .building-row>div:first-child strong {
      flex: 0 0 auto;
      white-space: nowrap;
      word-break: keep-all;
    }

    .building-row [data-toggle-all-buildings] {
      flex: 0 0 auto;
      min-width: 92px;
      min-height: 36px;
      padding: 0 13px;
      border-radius: 999px;
      white-space: nowrap;
      word-break: keep-all;
    }

    .building-checks {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .building-checks label {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 78px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      font-size: 12px;
      font-weight: 900;
      line-height: 1.15;
      white-space: nowrap;
      word-break: keep-all;
    }

    .building-checks input {
      width: 14px;
      height: 14px;
      flex: 0 0 auto;
      margin: 0;
    }

    .building-row>label {
      min-width: 0;
    }

    .building-row>label input,
    .building-row>label select {
      min-width: 0;
    }

    .building-row>button {
      min-height: 42px;
      padding: 0 18px;
      white-space: nowrap;
      word-break: keep-all;
    }

    .building-row>button[data-copy-building] {
      grid-column: 3 / 4;
      justify-self: end;
      min-width: 86px;
    }

    .building-row>button[data-remove-building] {
      grid-column: 4 / 5;
      justify-self: end;
      min-width: 86px;
    }

    footer {
      color: var(--muted);
      text-align: center;
      margin-top: 26px;
      font-size: 13px;
      line-height: 1.55;
    }

    @media (max-width: 900px) {
      header {
        display: block;
      }

      .auth-area {
        justify-items: start;
        margin-top: 14px;
      }

      .hero,
      .grid,
      .admin {
        grid-template-columns: 1fr;
      }

      .contract-register {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .tools {
        grid-template-columns: 1fr;
      }

      .stamp-tools {
        display: grid;
        grid-template-columns: 1fr;
      }

      .building-settings,
      .building-settings.collapsed {
        grid-template-columns: 1fr;
      }

      .quick {
        grid-template-columns: 1fr 1fr;
      }

      .schedule-register-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .org-units {
        grid-template-columns: 1fr;
      }

      .member-grid,
      .attendance-checks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .member-editor-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }


    }

    @media (max-width: 560px) {
      .wrap {
        padding: 20px 14px 44px;
      }

      .hero,
      .card {
        padding: 16px;
        border-radius: 16px;
      }

      .card h3 {
        align-items: flex-start;
      }

      .panel-title {
        padding-top: 8px;
      }

      .panel-register-btn {
        min-height: 36px;
        padding: 0 11px;
        font-size: 12px;
      }

      .tabs {
        gap: 7px;
        margin: 14px 0 18px;
      }

      .tab {
        min-height: 42px;
        padding: 9px 12px;
        font-size: 13px;
      }

      .subtabs {
        gap: 7px;
      }

      .subtab {
        min-height: 40px;
        padding: 0 12px;
        font-size: 13px;
      }

      .quick {
        grid-template-columns: 1fr;
      }

      .month {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .contract {
        grid-template-columns: 1fr;
      }

      .building-row {
        grid-template-columns: 1fr;
      }

      .building-row>div:first-child {
        grid-column: 1 / -1;
      }

      .building-row>div:first-child>div:first-child {
        align-items: flex-start;
        flex-direction: column;
      }

      .building-row [data-toggle-all-buildings] {
        width: 100%;
      }

      .building-checks label {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
      }

      .building-row>button[data-copy-building],
      .building-row>button[data-remove-building] {
        grid-column: auto;
        justify-self: stretch;
        width: 100%;
      }

      .member-grid,
      .attendance-checks {
        grid-template-columns: 1fr;
      }

      .member-editor-row {
        grid-template-columns: 1fr;
      }


      .flow-record {
        grid-template-columns: 1fr;
      }

      .calendar-grid {
        min-width: 720px;
      }

      #scheduleList {
        overflow-x: auto;
      }
    }

    .entry-kind-switch {
      grid-column: 1 / -1;
      display: none;
      align-items: center;
      gap: 8px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #f8fafc;
    }

    .admin.schedule-mode .entry-kind-switch,
    .admin.project-mode .entry-kind-switch {
      display: flex;
    }

    .entry-kind-btn {
      min-height: 38px;
      border-radius: 999px;
      background: #fff;
      color: #334155;
      border: 1px solid var(--line);
      padding: 0 15px;
      font-weight: 900;
      box-shadow: 0 3px 10px rgba(15, 23, 42, .04);
    }

    .entry-kind-btn.active {
      background: var(--blue);
      color: #fff;
      border-color: var(--blue);
    }

    #registerAgendaRows {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
      align-items: start;
    }

    #registerAgendaRows .agenda-row {
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 8px 10px;
      height: 100%;
    }

    #registerAgendaRows .agenda-row>label,
    #registerAgendaRows .agenda-row>.file-note {
      grid-column: 2;
      min-width: 0;
    }

    #registerAgendaRows .contract-linked-box {
      grid-column: 1 / -1;
    }

    .agenda-add-row {
      display: flex;
      justify-content: flex-end;
      padding-top: 12px;
      border-top: 1px solid #dbe7f5;
    }

    .agenda-add-row .secondary {
      min-height: 38px;
      padding: 0 14px;
    }

    #registerAgendaRows .agenda-actions {
      grid-column: 2 / -1;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: nowrap;
      margin-top: -4px;
    }

    #registerAgendaRows .agenda-actions button {
      width: auto !important;
      min-width: 96px;
      height: 38px;
      padding: 0 14px;
      border-radius: 11px;
      font-size: 13px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
      writing-mode: horizontal-tb !important;
      text-orientation: mixed !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    #registerAgendaRows .agenda-contract-btn {
      background: #2563eb;
      border: 1px solid #2563eb;
      color: #fff;
      box-shadow: 0 6px 14px rgba(37, 99, 235, .18);
    }

    #registerAgendaRows .agenda-contract-btn:hover {
      background: #1d4ed8;
      border-color: #1d4ed8;
    }

    #registerAgendaRows .agenda-delete-btn {
      background: #fff1f2;
      border: 1px solid #fecdd3;
      color: #e11d48;
    }

    #registerAgendaRows .agenda-delete-btn:hover {
      background: #ffe4e6;
      border-color: #fda4af;
    }

    #adminForm.case-mode label:has(#entryStatus),
    #adminForm.case-mode label:has(#entryParty),
    #adminForm.case-mode label:has(#entryAmount),
    #adminForm.case-mode label:has(#entryStartHour),
    #adminForm.case-mode label:has(#entryEnd),
    #adminForm.case-mode label:has(#entryEndHour),
    #adminForm.case-mode label:has(#entryReminderDays) {
      display: none !important;
    }

    #adminForm.office-mode label:has(#entryParty),
    #adminForm.office-mode label:has(#entryAmount),
    #adminForm.office-mode label:has(#entryStatus),
    #adminForm.office-mode label:has(#entryStartHour),
    #adminForm.office-mode label:has(#entryEndHour),
    #adminForm.office-mode label:has(#entryReminderDays),
    #adminForm.office-mode label:has(#scheduleKind),
    #adminForm.office-life-mode label:has(#entryStart),
    #adminForm.office-life-mode label:has(#entryEnd),
    #adminForm.office-project-mode label:has(#entryStart),
    #adminForm.office-project-mode label:has(#entryEnd) {
      display: none !important;
    }

    .office-card {
      width: 100%;
      border: 1px solid #e2e8f0;
      background: #fff;
      border-radius: 18px;
      padding: 18px;
      text-align: left;
      display: grid;
      gap: 10px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
    }

    .office-card:hover {
      border-color: #93c5fd;
      box-shadow: 0 12px 28px rgba(37, 99, 235, .10);
    }

    .office-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .office-card-badges {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .office-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 26px;
      padding: 0 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
    }

    .office-badge.notice {
      background: #eff6ff;
      color: #2563eb;
    }

    .office-badge.project {
      background: #fff7ed;
      color: #ea580c;
    }

    .office-badge.project-status.upcoming {
      background: #fef3c7;
      color: #b45309;
    }

    .office-badge.project-status.active {
      background: #dcfce7;
      color: #15803d;
    }

    .office-badge.project-status.closed {
      background: #e2e8f0;
      color: #475569;
    }

    .office-date {
      color: #64748b;
      font-size: 13px;
      font-weight: 800;
    }

    .office-card strong {
      color: #0f172a;
      font-size: 16px;
      font-weight: 950;
    }

    .office-card p {
      margin: 0;
      color: #334155;
      font-size: 14px;
      line-height: 1.55;
    }

    .office-meta {
      color: #64748b;
      font-size: 12px;
      line-height: 1.45;
    }

    #adminForm.office-project-mode .project-vendor-fields {
      display: grid !important;
    }

    .date-time-pair {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(180px, .75fr);
      align-items: center;
      gap: 10px;
    }

    .date-time-pair>input {
      width: 100%;
    }

    .danger-btn {
      min-height: 38px;
      padding: 0 13px;
      border: 1px solid #b91c1c;
      border-radius: 10px;
      background: var(--red);
      color: #fff;
      font-weight: 900;
      white-space: nowrap;
    }

    .danger-btn:hover {
      background: #b91c1c;
    }

    .danger-btn:active {
      transform: translateY(1px);
    }

    .case-lifecycle {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 12px;
      align-items: stretch;
      margin: 14px 0 20px;
      padding: 14px;
      border: 1px solid #bfdbfe;
      border-radius: 14px;
      background: #eff6ff;
    }

    .case-lifecycle-date {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      padding: 10px 12px;
      border-radius: 10px;
      background: #fff;
    }

    .case-lifecycle-date span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

    @media (max-width: 700px) {
      .date-time-pair {
        grid-template-columns: 1fr;
      }

      .case-lifecycle {
        grid-template-columns: 1fr;
        align-items: stretch;
      }
    }

    /* 메인 카드 높이와 더보기 동작을 일정하게 유지 */
    .resident-view .resident-today-grid {
      align-items: stretch;
    }

    .resident-view .resident-today-grid>.overview-block {
      min-width: 0;
      height: 380px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .resident-view .resident-today-grid>.overview-tone-guide {
      height: 230px;
    }

    .overview-block-head {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 14px;
    }

    .resident-today-grid .overview-block-head>h4 {
      min-width: 0;
      margin: 0;
    }

    .overview-more-btn {
      flex: 0 0 auto;
      min-height: 30px;
      padding: 5px 9px;
      border: 0;
      border-radius: 8px;
      background: var(--overview-soft, #f1f5f9);
      color: var(--overview-dark, #475569);
      font-size: 11px;
      font-weight: 900;
      box-shadow: none;
    }

    .overview-more-btn:hover {
      background: var(--overview-tone, #3b82f6);
      color: #fff;
    }

    .overview-more-btn>span {
      margin-left: 2px;
      color: inherit;
      font-size: 10px;
      font-weight: 950;
    }

    .resident-view .resident-today-grid>.overview-block .overview-item {
      flex: 0 0 auto;
    }

    @media (max-width: 700px) {

      .resident-view .resident-today-grid>.overview-block,
      .resident-view .resident-today-grid>.weather-overview-block,
      .resident-view .resident-today-grid>.overview-tone-notice {
        height: auto;
        min-height: 0;
        overflow: visible;
      }

      .overview-block-head {
        margin-bottom: 11px;
      }
    }

    /* Wide modal layout */
    .modal-backdrop {
      padding: 16px;
    }

    .modal-window {
      width: min(1240px, calc(100vw - 32px));
      min-width: min(920px, calc(100vw - 32px));
      max-height: calc(100dvh - 32px);
      padding: 28px;
      border-radius: 28px;
    }

    .entry-modal-window {
      width: min(1500px, calc(100vw - 32px));
    }

    #scheduleModal .modal-window {
      width: min(900px, calc(100vw - 32px));
      min-width: 0;
    }

    .meeting-result-modal-window {
      width: min(1560px, calc(100vw - 32px));
    }

    .login-window {
      width: min(480px, calc(100vw - 32px));
      min-width: 0;
    }

    .modal-window>.detail-head,
    #scheduleModalBody>.detail-head,
    .meeting-result-modal-window>.workspace-head {
      position: sticky;
      top: -28px;
      z-index: 12;
      margin: -28px -28px 22px;
      padding: 22px 28px 16px;
      border-bottom: 1px solid #e4ebf4;
      background: rgba(255, 255, 255, .95);
      backdrop-filter: blur(14px);
    }

    #scheduleModalBody>.detail-head {
      width: calc(100% + 56px);
      max-width: none;
    }

    .modal-window .detail-head h4,
    .meeting-result-modal-window>.workspace-head h4 {
      margin: 0;
      color: var(--ink);
      font-size: clamp(19px, 2vw, 24px);
      letter-spacing: -.025em;
    }

    #entryModal .admin {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 15px 16px;
      margin-top: 0;
    }

    #entryModal #adminForm>.workspace-head {
      padding: 0 0 12px;
      border-bottom: 1px solid #e5ecf5;
    }

    #entryModal #adminForm>.workspace-head h4 {
      display: none;
    }

    #entryModal .admin label,
    #scheduleModalBody label,
    .meeting-result-modal-window label {
      margin: 0;
    }

    #entryModal .admin>label:has(#entryTitle) {
      grid-column: span 1;
    }

    /* 선관위 등록: 양식을 결정하는 업무 구분을 제목보다 먼저 배치 */
    #entryModal #adminForm.vote-mode>.vote-section-field {
      grid-column: span 1;
    }

    #entryModal #adminForm.vote-mode>label:has(#entryTitle) {
      grid-column: span 3;
    }

    /* 공지: 제목 / 분류 / 게시 시작 / 게시 종료를 한 줄에 배치 */
    #entryModal #adminForm.office-notice-mode>label:has(#entryTitle),
    #entryModal #adminForm.office-notice-mode>.office-register,
    #entryModal #adminForm.office-notice-mode>label:has(#entryStart),
    #entryModal #adminForm.office-notice-mode>label:has(#entryEnd) {
      grid-column: span 1;
    }

    /* 회의: 회의명 / 회의일 / 장소를 한 줄에 배치 */
    #entryModal #adminForm.meeting-mode>label:has(#entryTitle) {
      grid-column: span 2;
    }

    #entryModal #adminForm.meeting-mode>label:has(#entryStart),
    #entryModal #adminForm.meeting-mode>.meeting-only-field {
      grid-column: span 1;
    }

    /* 사건: 사건명과 시작일을 한 줄에 배치 */
    #entryModal #adminForm.case-mode>label:has(#entryTitle) {
      grid-column: span 3;
    }

    #entryModal #adminForm.case-mode>label:has(#entryStart) {
      grid-column: span 1;
    }

    #entryModal .admin>.office-register {
      grid-column: span 1;
      align-self: end;
      padding: 0;
      border: 0;
      background: transparent;
    }

    #entryModal .admin>label:has(#entryDescription),
    #entryModal .admin>label:has(#entryFiles),
    #entryModal .admin>.file-list,
    #entryModal .admin>.submit-row,
    #entryModal .admin>.workspace-head,
    #entryModal .admin>.entry-kind-switch,
    #entryModal .admin>.meeting-register,
    #entryModal .admin>.guide-register,
    #entryModal .admin>.contract-register,
    #entryModal .admin>.vote-register,
    #entryModal .admin>.building-register {
      grid-column: 1 / -1;
    }

    #entryModal .admin>label:has(#entryDescription) textarea {
      min-height: 132px;
    }

    #entryModal .contract-register,
    #entryModal .schedule-register-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px 16px;
    }

    #entryModal .building-register,
    #entryModal .contract-register,
    #entryModal .vote-register,
    #entryModal .guide-register,
    #entryModal .meeting-register {
      padding: 18px;
      border-radius: 18px;
    }

    #entryModal .building-row.with-time {
      grid-template-columns: minmax(90px, .5fr) repeat(4, minmax(150px, 1fr));
    }

    #scheduleModalBody {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px 16px;
      align-items: start;
    }

    #scheduleModalBody>.detail-head,
    #scheduleModalBody>div,
    #scheduleModalBody>p,
    #scheduleModalBody>.file-note,
    #scheduleModalBody>.submit-row,
    #scheduleModalBody>button,
    #scheduleModalBody>form {
      grid-column: 1 / -1;
    }

    #scheduleModalBody>label {
      grid-column: span 1;
      min-width: 0;
      margin: 0;
    }

    #scheduleModalBody>label:has(textarea),
    #scheduleModalBody>label:has(input[type="file"]),
    #scheduleModalBody>label.full {
      grid-column: 1 / -1;
    }

    #scheduleModalBody>label:has(input[id$="Title"]),
    #scheduleModalBody>label:has(input[id$="NameInput"]) {
      grid-column: span 2;
    }

    #scheduleModalBody>.decision-row {
      grid-column: 1 / -1;
      width: 100%;
      height: 100%;
    }

    #scheduleModalBody>.decision-row:has(p),
    #scheduleModalBody>.attendance-summary,
    #scheduleModalBody>.case-lifecycle {
      grid-column: 1 / -1;
    }

    #scheduleModalBody>label:has(textarea) textarea {
      min-height: 150px;
    }

    #scheduleModalBody .meeting-content-fields {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px 16px;
    }

    #scheduleModalBody .meeting-content-fields .full,
    #scheduleModalBody .meeting-content-fields label:has(textarea) {
      grid-column: 1 / -1;
    }

    #scheduleModalBody .member-editor-row {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      align-items: end;
    }

    .meeting-result-modal-window #decisionRows {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
    }

    .meeting-result-modal-window #decisionRows>.attendance-summary,
    .meeting-result-modal-window #decisionRows>.attendance-checks {
      grid-column: 1 / -1;
    }

    .meeting-result-modal-window #decisionRows>.decision-row {
      height: 100%;
      padding: 16px;
    }

    .meeting-attendance-dashboard {
      display: grid;
      gap: 14px;
    }

    .attendance-dashboard-head,
    .attendance-page-controls {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
    }

    .attendance-dashboard-head>div {
      display: grid;
      gap: 5px;
    }

    .attendance-dashboard-head>div>strong {
      font-size: 18px;
    }

    .attendance-dashboard-head>div>span,
    .attendance-page-controls>span {
      color: var(--muted);
      font-size: 12px;
    }

    .attendance-dashboard-head label {
      min-width: 130px;
    }

    .attendance-page-controls>div {
      display: flex;
      gap: 7px;
    }

    .attendance-page-controls button {
      min-height: 34px;
      padding: 0 12px;
    }

    .attendance-table-wrap {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 16px;
    }

    .attendance-history-table {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      background: #fff;
    }

    .attendance-history-table th,
    .attendance-history-table td {
      height: 76px;
      padding: 9px 7px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      text-align: center;
      vertical-align: middle;
    }

    .attendance-history-table tr> :first-child {
      width: 150px;
      text-align: left;
    }

    .attendance-history-table tr> :last-child {
      width: 105px;
      border-right: 0;
    }

    .attendance-history-table thead th,
    .attendance-history-table tfoot th,
    .attendance-history-table tfoot td {
      height: 64px;
      background: #f8fafc;
    }

    .attendance-history-table thead th time,
    .attendance-history-table thead th span,
    .attendance-history-table tbody th strong,
    .attendance-history-table tbody th span,
    .attendance-rate strong,
    .attendance-rate span {
      display: block;
    }

    .attendance-history-table thead th time,
    .attendance-history-table tbody th span,
    .attendance-history-table td small,
    .attendance-rate span {
      margin-top: 4px;
      color: var(--muted);
      font-size: 10px;
    }

    .attendance-history-table thead th span {
      margin-top: 5px;
      overflow: hidden;
      font-size: 11px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .attendance-mark {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      margin: 0 auto;
      border-radius: 50%;
      font-weight: 900;
    }

    .attendance-mark.present {
      background: #d1fae5;
      color: #047857;
    }

    .attendance-mark.absent {
      background: #fee2e2;
      color: #dc2626;
    }

    .attendance-mark.excluded {
      background: #f1f5f9;
      color: #94a3b8;
    }

    .attendance-absence-text {
      display: block;
      max-width: 100%;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .attendance-mobile {
      display: none;
    }

    @media (max-width: 900px) {
      .attendance-desktop {
        display: none;
      }

      .attendance-mobile {
        display: grid;
        gap: 12px;
      }

      .attendance-dashboard-head {
        align-items: stretch;
        flex-direction: column;
      }

      .attendance-dashboard-head label {
        width: 100%;
      }

      .attendance-mobile-view {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 5px;
        border-radius: 12px;
        background: #f1f5f9;
      }

      .attendance-mobile-view button {
        min-height: 36px;
        border-radius: 9px;
        background: transparent;
        color: #475569;
        font-weight: 900;
      }

      .attendance-mobile-view button.active {
        background: #fff;
        color: var(--blue);
        box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
      }

      .attendance-mobile-select {
        display: grid;
        gap: 6px;
      }

      .attendance-mobile-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px;
        border: 1px solid #bfdbfe;
        border-radius: 14px;
        background: #eff6ff;
      }

      .attendance-mobile-summary span {
        color: #2563eb;
        font-size: 12px;
        font-weight: 900;
      }

      .attendance-mobile-list {
        display: grid;
        gap: 7px;
      }

      .attendance-person-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
      }

      .attendance-person-row>div {
        min-width: 0;
      }

      .attendance-person-row strong,
      .attendance-person-row span {
        display: block;
      }

      .attendance-person-row>div>span {
        margin-top: 3px;
        color: var(--muted);
        font-size: 11px;
      }

      .attendance-person-row>div>.attendance-mobile-reason {
        margin-top: 5px;
        color: #dc2626;
        font-weight: 800;
      }

      .attendance-status {
        flex: 0 0 auto;
        padding: 5px 9px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 900;
      }

      .attendance-status.present {
        background: #d1fae5;
        color: #047857;
      }

      .attendance-status.absent {
        background: #fee2e2;
        color: #dc2626;
      }
    }

    .modal-window textarea {
      min-height: 300px;
      line-height: 1.65;
    }

    .calendar-day-modal-list {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      width: 100%;
      gap: 12px;
    }

    .calendar-day-modal-item {
      width: 100%;
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 16px;
      border: 1px solid #dfe7f1;
      border-radius: 16px;
      background: #fff;
      color: var(--text);
      text-align: left;
    }

    .calendar-day-modal-item:hover {
      border-color: #9db5f2;
      background: #f7faff;
      box-shadow: 0 10px 24px rgba(49, 91, 232, .09);
      transform: translateY(-1px);
    }

    .calendar-day-modal-item>div {
      min-width: 0;
    }

    .calendar-day-modal-item strong,
    .calendar-day-modal-item small {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .calendar-day-modal-item strong {
      color: var(--ink);
      font-size: 15px;
      font-weight: 950;
    }

    .calendar-day-modal-item small {
      margin-top: 5px;
      color: var(--muted);
      font-size: 12px;
    }

    .calendar-day-modal-badge {
      padding: 6px 9px;
      border-radius: 999px;
      background: #edf3ff;
      color: #315be8;
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap;
    }

    @media (max-width: 1180px) {

      .modal-window,
      .entry-modal-window,
      #scheduleModal .modal-window,
      .meeting-result-modal-window {
        width: calc(100vw - 24px);
        min-width: 0;
      }

      #entryModal .admin,
      #entryModal .contract-register,
      #entryModal .schedule-register-grid,
      #scheduleModalBody,
      #scheduleModalBody .meeting-content-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #entryModal .admin>label:has(#entryTitle) {
        grid-column: span 1;
      }

      #scheduleModalBody .member-editor-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      #entryModal .building-row.with-time {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #entryModal .building-row.with-time .building-row-name {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 760px) {
      .modal-backdrop {
        align-items: flex-end;
        padding: 0;
      }

      .modal-window,
      .entry-modal-window,
      #scheduleModal .modal-window,
      .meeting-result-modal-window,
      .login-window {
        width: 100%;
        max-height: calc(100dvh - 8px);
        min-width: 0;
        padding: 18px 16px 24px;
        border-radius: 22px 22px 0 0;
      }

      .modal-window>.detail-head,
      #scheduleModalBody>.detail-head,
      .meeting-result-modal-window>.workspace-head {
        top: -18px;
        margin: -18px -16px 18px;
        padding: 16px;
      }

      #scheduleModalBody>.detail-head {
        width: calc(100% + 32px);
      }

      #entryModal .admin,
      #entryModal .contract-register,
      #entryModal .schedule-register-grid,
      #scheduleModalBody,
      #scheduleModalBody .meeting-content-fields,
      #scheduleModalBody .member-editor-row,
      .meeting-result-modal-window #decisionRows {
        grid-template-columns: 1fr;
      }

      #entryModal .admin>label:has(#entryTitle),
      #entryModal .admin>.office-register,
      #scheduleModalBody>label,
      #scheduleModalBody>label:has(input[id$="Title"]),
      #scheduleModalBody>label:has(input[id$="NameInput"]),
      #scheduleModalBody>.decision-row,
      #scheduleModalBody .meeting-content-fields .full,
      .meeting-result-modal-window #decisionRows>.attendance-summary,
      .meeting-result-modal-window #decisionRows>.attendance-checks {
        grid-column: 1 / -1;
      }

      #entryModal .building-row.with-time {
        grid-template-columns: 1fr;
      }

      #entryModal .building-row.with-time .building-row-name {
        grid-column: auto;
      }

      .calendar-day-modal-list {
        grid-template-columns: 1fr;
      }

      .calendar-day-modal-item {
        grid-template-columns: auto minmax(0, 1fr);
      }

      .calendar-day-modal-item>.click-label {
        display: none;
      }
    }

    /* 선관위 등록: 넓은 화면에서는 관련 필드를 한 줄에 밀도 있게 배치 */
    @media (min-width: 761px) {
      #entryModal #adminForm.vote-mode {
        grid-template-columns: minmax(260px, 1fr) minmax(420px, 3fr);
      }

      #entryModal #adminForm.vote-mode>.vote-section-field {
        grid-column: span 1;
      }

      #entryModal #adminForm.vote-mode>label:has(#entryTitle) {
        grid-column: span 1;
      }

      #entryModal #adminForm.vote-mode>.vote-register,
      #entryModal #adminForm.vote-mode>label:has(#entryFiles),
      #entryModal #adminForm.vote-mode>.file-list,
      #entryModal #adminForm.vote-mode>.submit-row {
        grid-column: 1 / -1;
      }

      #entryModal #adminForm.vote-mode>.vote-register {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: end;
      }

      #entryModal #adminForm.vote-mode .vote-register>.vote-request-box,
      #entryModal #adminForm.vote-mode .vote-register>label:has(#voteNotice) {
        grid-column: 1 / -1;
      }

      #entryModal #adminForm.vote-mode .vote-register>.candidate-period-field {
        grid-column: span 6;
      }

      #entryModal #adminForm.vote-mode .vote-register>.vote-period-field:has(#voteMethod) {
        grid-column: span 2;
      }

      #entryModal #adminForm.vote-mode .vote-register>.vote-period-field:has(#voteStart),
      #entryModal #adminForm.vote-mode .vote-register>.vote-period-field:has(#voteEnd) {
        grid-column: span 5;
      }
    }

    /* 대표회의 등록: 회의 기본정보는 공간이 충분할 때 한 줄로 유지 */
    @media (min-width: 901px) {
      #entryModal #adminForm.meeting-mode {
        grid-template-columns: repeat(12, minmax(0, 1fr));
      }

      #entryModal #adminForm.meeting-mode>label:has(#entryTitle) {
        grid-column: span 4;
      }

      #entryModal #adminForm.meeting-mode>label:has(#entryStart) {
        grid-column: span 2;
      }

      #entryModal #adminForm.meeting-mode>label:has(#entryStartHour) {
        grid-column: span 3;
      }

      #entryModal #adminForm.meeting-mode>.meeting-only-field {
        grid-column: span 3;
      }

      #entryModal #adminForm.meeting-mode>.meeting-register,
      #entryModal #adminForm.meeting-mode>label:has(#entryFiles),
      #entryModal #adminForm.meeting-mode>.file-list,
      #entryModal #adminForm.meeting-mode>.submit-row {
        grid-column: 1 / -1;
      }
    }

    @media (min-width: 761px) and (max-width: 900px) {

      #entryModal #adminForm.meeting-mode>label:has(#entryTitle),
      #entryModal #adminForm.meeting-mode>.meeting-only-field,
      #entryModal #adminForm.meeting-mode>.meeting-register,
      #entryModal #adminForm.meeting-mode>label:has(#entryFiles),
      #entryModal #adminForm.meeting-mode>.file-list,
      #entryModal #adminForm.meeting-mode>.submit-row {
        grid-column: 1 / -1;
      }

      #entryModal #adminForm.meeting-mode>label:has(#entryStart),
      #entryModal #adminForm.meeting-mode>label:has(#entryStartHour) {
        grid-column: span 1;
      }
    }

    /* 2026 visual refresh */
    :root {
      --bg: #f3f6fb;
      --card: #ffffff;
      --text: #172033;
      --muted: #6b7890;
      --line: #dfe7f1;
      --blue: #315be8;
      --green: #12a66a;
      --orange: #f28a30;
      --red: #e94f64;
      --purple: #7656e8;
      --ink: #111c33;
      --soft-blue: #edf3ff;
      --soft-green: #eafaf3;
      --shadow: 0 18px 48px rgba(30, 51, 89, .08);
      --radius: 22px;
    }

    body {
      background:
        radial-gradient(circle at 8% 0%, rgba(72, 112, 255, .10), transparent 28rem),
        radial-gradient(circle at 96% 14%, rgba(26, 183, 156, .08), transparent 24rem),
        var(--bg);
    }

    button,
    input,
    select,
    textarea {
      transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
    }

    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 3px solid rgba(49, 91, 232, .18);
      outline-offset: 2px;
    }

    .wrap {
      width: min(1240px, 100%);
      padding: 30px 24px 72px;
    }

    header {
      align-items: center;
      margin-bottom: 24px;
      padding: 0 4px;
    }

    .brand h1 {
      color: var(--ink);
      font-size: clamp(28px, 3.5vw, 40px);
      font-weight: 950;
      letter-spacing: -.045em;
    }

    .brand p {
      color: #718096;
      font-size: 14px;
    }

    .mode-btn,
    .auth-status {
      border: 1px solid rgba(207, 218, 234, .9);
      background: rgba(255, 255, 255, .82);
      box-shadow: 0 8px 24px rgba(36, 54, 86, .07);
      backdrop-filter: blur(12px);
    }

    .mode-btn:hover {
      border-color: #b8c9e8;
      background: #fff;
      transform: translateY(-1px);
    }

    .hero {
      position: relative;
      overflow: hidden;
      grid-template-columns: 1.25fr .9fr;
      min-height: 250px;
      padding: 36px;
      border: 0;
      border-radius: 30px;
      color: #fff;
      background:
        radial-gradient(circle at 90% 8%, rgba(79, 209, 197, .32), transparent 32%),
        radial-gradient(circle at 55% 120%, rgba(91, 118, 255, .32), transparent 42%),
        linear-gradient(135deg, #14213d 0%, #1f3d7a 55%, #2459b8 100%);
      box-shadow: 0 28px 70px rgba(20, 45, 92, .22);
    }

    .hero::after {
      content: "";
      position: absolute;
      right: -70px;
      bottom: -100px;
      width: 280px;
      height: 280px;
      border: 1px solid rgba(255, 255, 255, .13);
      border-radius: 50%;
      box-shadow: 0 0 0 35px rgba(255, 255, 255, .035), 0 0 0 70px rgba(255, 255, 255, .025);
      pointer-events: none;
    }

    .hero>* {
      position: relative;
      z-index: 1;
    }

    .hero-kicker {
      color: #a9d8ff;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .apartment-name-main,
    .hero h2 {
      color: #fff;
    }

    .hero p {
      max-width: 700px;
      color: rgba(235, 243, 255, .80);
    }

    .quick {
      gap: 10px;
    }

    .quick>div {
      border: 1px solid rgba(255, 255, 255, .13);
      background: rgba(255, 255, 255, .09);
      box-shadow: none;
      backdrop-filter: blur(10px);
    }

    .quick strong {
      color: #fff;
    }

    .quick span {
      color: rgba(230, 240, 255, .72);
    }

    .tabs {
      width: fit-content;
      max-width: 100%;
      margin: 20px auto 22px;
      padding: 9px;
      border: 1px solid rgba(214, 224, 238, .88);
      border-radius: 24px;
      background: rgba(255, 255, 255, .78);
      box-shadow: 0 12px 34px rgba(38, 55, 88, .08);
      backdrop-filter: blur(14px);
    }

    .tab {
      min-height: 42px;
      padding: 10px 15px;
      border: 1px solid transparent;
      background: transparent;
      box-shadow: none;
      color: #53627a;
    }

    .tab:hover {
      background: #edf3ff;
      color: #244fcf;
    }

    .tab.active {
      border-color: rgba(255, 255, 255, .30);
      background: linear-gradient(135deg, #315be8, #4977ef);
      box-shadow: 0 8px 18px rgba(49, 91, 232, .24);
      color: #fff;
    }

    .tools {
      padding: 12px;
      border: 1px solid rgba(218, 227, 239, .9);
      border-radius: 20px;
      background: rgba(255, 255, 255, .82);
      box-shadow: 0 10px 30px rgba(37, 53, 84, .055);
      backdrop-filter: blur(12px);
    }

    .tools input,
    .tools select,
    .admin input,
    .admin select,
    .admin textarea,
    .modal-window input,
    .modal-window select,
    .modal-window textarea {
      border-color: #dce5f0;
      background: #fbfcfe;
    }

    .tools input:focus,
    .tools select:focus,
    .admin input:focus,
    .admin select:focus,
    .admin textarea:focus,
    .modal-window input:focus,
    .modal-window select:focus,
    .modal-window textarea:focus {
      border-color: #7c9cf3;
      background: #fff;
      box-shadow: 0 0 0 4px rgba(49, 91, 232, .10);
    }

    .primary {
      border: 1px solid rgba(255, 255, 255, .2);
      background: linear-gradient(135deg, #315be8, #4876ef);
      box-shadow: 0 10px 20px rgba(49, 91, 232, .20);
    }

    .primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 13px 26px rgba(49, 91, 232, .27);
    }

    .secondary {
      border-color: #dce5f0;
      background: #f5f8fc;
      color: #40516c;
    }

    .secondary:hover {
      border-color: #bfcdea;
      background: #edf3ff;
      color: #244fcf;
    }

    .card {
      border-color: rgba(218, 227, 239, .92);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .card h3 {
      color: var(--ink);
      font-size: 21px;
      font-weight: 950;
      letter-spacing: -.025em;
    }

    .section-label {
      border-radius: 999px;
      background: #edf3ff;
      color: #315be8;
      padding: 5px 10px;
      font-size: 12px;
    }

    .admin {
      border-color: #cedbf0;
      background: linear-gradient(180deg, #ffffff, #f9fbff);
      box-shadow: 0 24px 65px rgba(30, 51, 89, .13);
    }

    .workspace-head {
      padding-bottom: 13px;
      border-bottom: 1px solid #e6ecf4;
    }

    .workspace-head h4 {
      color: var(--ink);
      font-size: 18px;
      letter-spacing: -.02em;
    }

    .workspace-head p {
      color: #718096;
    }

    .contract-register,
    .vote-register,
    .building-register,
    .guide-register,
    .office-register {
      border-color: #dce6f3;
      background: #f7faff;
    }

    .building-schedule-modes label,
    .project-time-modes label {
      border-color: #dce5f0;
      background: #fff;
      box-shadow: 0 4px 12px rgba(39, 57, 90, .04);
    }

    .building-schedule-modes label:has(input:checked),
    .project-time-modes label:has(input:checked) {
      border-color: #7c9cf3;
      background: #edf3ff;
      color: #244fcf;
      box-shadow: 0 0 0 3px rgba(49, 91, 232, .09);
    }

    .project-time-settings,
    .building-row {
      border-color: #dce6f3;
      box-shadow: 0 7px 18px rgba(40, 58, 91, .045);
    }

    .building-row-name {
      background: linear-gradient(135deg, #e9f1ff, #f1f5ff);
      color: #315be8;
    }

    .subtab {
      border: 1px solid transparent;
      background: #f1f4f9;
      color: #596980;
    }

    .subtab:hover {
      border-color: #d4dff0;
      background: #edf3ff;
      color: #315be8;
    }

    .subtab.active {
      border-color: #c7d7ff;
      background: #e8f0ff;
      color: #2853d8;
      box-shadow: inset 0 0 0 1px rgba(49, 91, 232, .05);
    }

    .overview-item,
    .notice-row,
    .event,
    .project,
    .info,
    .office-card,
    .contract,
    .archive-row {
      border-color: #e3eaf3;
    }

    .overview-item:hover,
    .notice-row:hover,
    .event:hover,
    .project:hover,
    .info:hover,
    .office-card:hover {
      border-color: #aac0f5;
      background: #f8faff;
      box-shadow: 0 10px 24px rgba(49, 91, 232, .08);
      transform: translateY(-1px);
    }

    .office-card {
      margin-top: 15px;
      border-radius: 20px;
      box-shadow: 0 10px 26px rgba(32, 51, 85, .055);
    }

    .office-category-tabs {
      margin-bottom: 18px;
      padding-bottom: 14px;
      border-bottom: 1px solid #e2e8f0;
    }

    .office-status-tabs {
      gap: 6px;
      margin: 0 0 16px;
      padding: 10px 12px;
      border: 1px solid #dfe7f1;
      border-radius: 14px;
      background: #f7f9fc;
    }

    .office-status-label {
      margin-right: 4px;
      color: #64748b;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .office-status-tabs .subtab {
      min-height: 32px;
      padding: 0 12px;
      border: 1px solid #dce4ef;
      background: #fff;
      color: #526178;
      font-size: 12px;
    }

    .office-status-tabs .subtab.active {
      border-color: #334155;
      background: #334155;
      color: #fff;
      box-shadow: none;
    }

    .edit-attachment-box {
      display: grid;
      gap: 10px;
      padding: 14px;
      border: 1px solid #dbe5f1;
      border-radius: 14px;
      background: #f8fafc;
    }

    .edit-existing-files {
      display: grid;
      gap: 6px;
    }

    .edit-existing-file {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 9px 11px;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      background: #fff;
    }

    .edit-existing-file>span:first-child {
      min-width: 0;
      overflow-wrap: anywhere;
      font-weight: 800;
    }

    .attachment-remove-btn {
      flex: 0 0 auto;
      min-height: 36px;
      padding: 7px 12px;
      border: 1px solid #fecaca;
      border-radius: 9px;
      background: #fff1f2;
      color: #dc2626;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
      cursor: pointer;
    }

    .attachment-remove-btn:hover {
      border-color: #fb7185;
      background: #ffe4e6;
    }

    .attachment-remove-btn.is-marked {
      border-color: #dc2626;
      background: #dc2626;
      color: #fff;
    }

    .edit-existing-file:has(.attachment-remove-btn.is-marked) {
      border-color: #fda4af;
      background: #fff1f2;
    }

    .edit-existing-file:has(.attachment-remove-btn.is-marked)>span:first-child {
      color: #9f1239;
      text-decoration: line-through;
    }

    .edit-file-picker {
      display: grid;
      gap: 7px;
      font-weight: 900;
    }

    .status,
    .pill,
    .office-badge {
      letter-spacing: -.01em;
    }

    .modal-backdrop {
      background: rgba(13, 24, 44, .58);
      backdrop-filter: blur(7px);
    }

    .modal-window {
      border: 1px solid rgba(255, 255, 255, .72);
      border-radius: 26px;
      box-shadow: 0 32px 90px rgba(10, 25, 55, .32);
    }

    .submit-row {
      padding-top: 14px;
      border-top: 1px solid #e5ecf5;
    }

    @media (max-width: 900px) {
      .wrap {
        padding: 22px 18px 60px;
      }

      .hero {
        min-height: 0;
        padding: 28px;
        border-radius: 26px;
      }

      .tabs {
        width: 100%;
      }

      .building-row.with-time {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .building-row.with-time .building-row-name {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 560px) {
      .wrap {
        padding: 16px 12px 48px;
      }

      header {
        align-items: flex-start;
        padding: 0 2px;
      }

      .brand h1 {
        font-size: 28px;
      }

      .hero {
        padding: 22px 18px;
        border-radius: 22px;
        box-shadow: 0 18px 45px rgba(20, 45, 92, .20);
      }

      .hero p {
        font-size: 14px;
        line-height: 1.65;
      }

      .tabs {
        padding: 7px;
        border-radius: 20px;
      }

      .tab {
        flex: 1 1 auto;
        min-width: calc(33.333% - 7px);
        padding: 9px 8px;
        text-align: center;
      }

      .tools,
      .card,
      .admin,
      .modal-window {
        border-radius: 18px;
      }

      .card {
        padding: 17px;
      }

      .card h3 {
        font-size: 19px;
      }

      .building-schedule-modes,
      .project-time-modes {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .project-time-modes {
        grid-template-columns: 1fr;
      }

      .building-schedule-modes label,
      .project-time-modes label {
        min-width: 0;
        justify-content: center;
        padding: 10px;
      }

      .building-row.with-time {
        grid-template-columns: 1fr;
      }

      .building-row.with-time .building-row-name {
        grid-column: auto;
      }

      .submit-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .submit-row button {
        width: 100%;
      }
    }

    @media (max-width: 700px) {
      .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 3px;
        min-width: 0;
      }

      #scheduleList {
        overflow-x: visible;
      }

      .mobile-calendar-list {
        display: none;
      }

      .calendar-grid .weekday {
        padding: 3px 0;
        font-size: 9px;
      }

      .calendar-grid .day {
        min-height: 82px;
        padding: 4px 3px;
        border-radius: 8px;
      }

      .calendar-grid .day-num {
        margin-bottom: 3px;
        font-size: 10px;
      }

      .calendar-grid .day-event {
        min-height: 0;
        margin-top: 2px;
        padding: 3px 2px;
        border-radius: 5px;
        font-size: clamp(7px, 2.05vw, 10px);
        line-height: 1.2;
        white-space: nowrap;
      }

      .calendar-grid .day-events .day-event:nth-child(n + 3) {
        display: none;
      }

      .calendar-grid .day-more {
        display: block;
        margin-top: 2px;
        color: #64748b;
        font-size: 8px;
        font-weight: 900;
        line-height: 1;
      }

      .mobile-calendar-day {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 10px;
        align-items: stretch;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff;
      }

      .mobile-day-label {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: #eff6ff;
        color: var(--blue);
      }

      .mobile-day-label strong {
        font-size: 20px;
        line-height: 1.1;
      }

      .mobile-day-label span {
        margin-top: 3px;
        font-size: 12px;
        font-weight: 900;
      }

      .mobile-day-events {
        display: grid;
        gap: 6px;
        min-width: 0;
      }

      .mobile-day-events .day-event {
        min-height: 36px;
        margin: 0;
        padding: 8px 10px;
        white-space: normal;
        line-height: 1.35;
      }

      .meeting-result-publish {
        align-items: stretch;
        flex-direction: column;
      }

      .meeting-result-publish label {
        min-width: 0;
      }
    }

    @media (max-width: 430px) {

      html,
      body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }

      .wrap {
        width: 100%;
        max-width: 100%;
        padding-left: 8px;
        padding-right: 8px;
        overflow-x: clip;
      }

      .panel[data-panel="schedule"] {
        min-width: 0;
        padding-left: 8px;
        padding-right: 8px;
      }

      .panel[data-panel="schedule"] .schedule-toolbar,
      .panel[data-panel="schedule"] .month-switcher,
      .panel[data-panel="schedule"] .view-switcher,
      .panel[data-panel="schedule"] .schedule-filters {
        min-width: 0;
        max-width: 100%;
        flex-wrap: wrap;
      }

      .panel[data-panel="schedule"] .schedule-toolbar>*,
      .panel[data-panel="schedule"] .schedule-filters>*,
      .panel[data-panel="schedule"] select,
      .panel[data-panel="schedule"] button {
        min-width: 0;
        max-width: 100%;
      }

      #scheduleList {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden !important;
      }

      #scheduleList .calendar-grid,
      .focused #scheduleList .calendar-grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 2px;
        overflow: hidden;
      }

      #scheduleList .calendar-grid>*,
      #scheduleList .day,
      #scheduleList .day-events,
      #scheduleList .day-event {
        min-width: 0;
        max-width: 100%;
      }

      #scheduleList .calendar-grid .day {
        width: 100%;
        min-height: 78px;
        padding: 3px 1px;
        border-radius: 6px;
      }

      #scheduleList .calendar-grid .weekday {
        padding: 2px 0;
        font-size: 8px;
      }

      #scheduleList .calendar-grid .day-num {
        margin-bottom: 2px;
        font-size: 9px;
      }

      #scheduleList .calendar-grid .day-event {
        width: 100%;
        margin-top: 2px;
        padding: 3px 1px;
        border-radius: 4px;
        font-size: clamp(7px, 1.95vw, 8px);
        line-height: 1.15;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    /* Entry modal must collapse by the modal viewport, not retain desktop form tracks. */
    @media (max-width: 760px) {

      #entryModal,
      #entryModal .entry-modal-window {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      #entryModalFormMount,
      #entryModal #adminForm {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      #entryModal #adminForm {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px;
      }

      #entryModal #adminForm>* {
        grid-column: 1 / -1 !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
      }

      #entryModal .meeting-register {
        grid-template-columns: minmax(0, 1fr);
        overflow: hidden;
      }

      #entryModal .meeting-register>*,
      #entryModal .vote-request-box,
      #entryModal .vote-request-list,
      #entryModal .agenda-table {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
      }

      #entryModal .meeting-register>.workspace-head {
        display: block;
      }

      #entryModal .vote-request-box {
        padding: 10px;
      }

      #entryModal .vote-request-box>span {
        font-size: 12px;
        line-height: 1.55;
        word-break: keep-all;
        overflow-wrap: anywhere;
      }

      #completedVoteList .vote-request-card {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 8px;
        padding: 10px;
      }

      #completedVoteList .vote-request-card>div,
      #completedVoteList .vote-request-card strong,
      #completedVoteList .vote-request-card span {
        min-width: 0;
        max-width: 100%;
        word-break: keep-all;
        overflow-wrap: anywhere;
      }

      #completedVoteList .vote-request-card .click-label {
        justify-self: start;
        white-space: normal;
      }

      #entryModal .meeting-register .agenda-add-row {
        width: 100%;
      }
    }

    /* Mobile layout guardrails: keep page chrome compact and let modal content scroll alone. */
    html.modal-open,
    body.modal-open {
      overflow: hidden !important;
      overscroll-behavior: none;
    }

    body.modal-open {
      position: fixed;
      left: 0;
      right: 0;
      width: 100%;
    }

    .modal-window {
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    @media (max-width: 700px) {

      html,
      body {
        max-width: 100%;
        overflow-x: hidden;
      }

      .hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
        min-height: 0;
        height: auto;
        gap: 16px;
        padding: 20px 16px;
        border-radius: 20px;
      }

      .hero>* {
        min-width: 0;
        max-width: 100%;
      }


      .apartment-name-main {
        max-width: 100%;
        margin-bottom: 8px;
        font-size: clamp(24px, 7.4vw, 30px);
        line-height: 1.2;
        letter-spacing: -.035em;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
      }

      .hero h2 {
        max-width: 100%;
        margin-bottom: 10px;
        font-size: clamp(16px, 4.6vw, 19px);
        line-height: 1.45;
        word-break: keep-all;
        overflow-wrap: anywhere;
      }

      .hero p {
        max-width: 100%;
        font-size: 13px;
        line-height: 1.62;
        word-break: keep-all;
        overflow-wrap: anywhere;
      }

      .hero .quick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
      }

      .hero .quick>div {
        min-width: 0;
        padding: 10px;
        border-radius: 12px;
      }

      .hero .quick strong {
        margin-bottom: 2px;
        border-top: 0;
        font-size: 18px;
        line-height: 1.25;
      }

      .hero .quick span {
        display: block;
        font-size: 11px;
        line-height: 1.4;
        word-break: keep-all;
        overflow-wrap: anywhere;
      }

      .overview-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
      }

      .office-status-tabs {
        display: grid;
        grid-template-columns: auto repeat(2, minmax(0, 1fr));
        align-items: center;
        width: 100%;
      }

      .office-status-tabs .subtab {
        width: 100%;
        min-width: 0;
        padding: 0 8px;
      }

      :is(#registerAgendaRows, #meetingAgendaEditRows) .agenda-row {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 8px 10px;
        padding: 10px;
      }

      :is(#registerAgendaRows, #meetingAgendaEditRows) .agenda-no {
        width: 36px;
        height: 36px;
      }

      :is(#registerAgendaRows, #meetingAgendaEditRows) .agenda-row>label,
      :is(#registerAgendaRows, #meetingAgendaEditRows) .agenda-row>.file-note {
        grid-column: 2;
        min-width: 0;
      }

      :is(#registerAgendaRows, #meetingAgendaEditRows) .agenda-row>.meeting-actions {
        grid-column: 2;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        gap: 6px;
        margin: 0;
      }

      :is(#registerAgendaRows, #meetingAgendaEditRows) .agenda-row>.meeting-actions button {
        width: auto !important;
        min-width: 0 !important;
        min-height: 32px;
        height: 32px;
        padding: 0 10px;
        border-radius: 9px;
        font-size: 12px;
        line-height: 1;
        white-space: nowrap;
      }

      :is(#registerAgendaRows, #meetingAgendaEditRows) .contract-linked-box {
        grid-column: 1 / -1;
      }

      #entryModal .meeting-register {
        gap: 12px;
        padding: 12px;
      }

      #registerAgendaRows {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
      }

      .agenda-add-row {
        padding-top: 10px;
      }

      .agenda-add-row .secondary {
        width: 100%;
      }

      .overview-block {
        min-width: 0;
        padding: 12px;
      }

      .overview-item {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
      }

      .overview-item>*,
      .resident-office-card>* {
        min-width: 0;
      }

      .overview-item strong,
      .overview-item span,
      .resident-office-card strong,
      .resident-office-card span {
        overflow-wrap: anywhere;
        word-break: keep-all;
      }

      .overview-item .click-label {
        align-self: center;
        white-space: nowrap;
        word-break: normal;
      }

      .resident-office-card {
        grid-template-columns: minmax(0, 1fr);
      }

      main,
      section,
      .card,
      .panel,
      .grid>*,
      .event>*,
      .contract>*,
      .project-head>*,
      .info>*,
      .meeting-card-button>*,
      .guide-item>*,
      .office-card-top>* {
        min-width: 0;
      }

      .info,
      .office-card-top {
        align-items: flex-start;
        flex-wrap: wrap;
      }

      .meeting-card-button {
        grid-template-columns: minmax(0, 1fr);
      }

      .meeting-card-button .meeting-actions {
        justify-content: flex-start;
      }

      .event strong,
      .event small,
      .contract strong,
      .contract p,
      .project-head strong,
      .info strong,
      .info span,
      .meeting-card-button strong,
      .meeting-card-button span,
      .guide-item strong,
      .guide-item em {
        overflow-wrap: anywhere;
        word-break: keep-all;
      }

      .info span {
        white-space: normal;
      }

      .panel[data-panel="schedule"]>h3 {
        flex-wrap: nowrap;
        gap: 7px;
        font-size: clamp(16px, 5vw, 19px);
        white-space: nowrap;
      }

      .panel[data-panel="schedule"]>h3 .section-label {
        flex: 0 0 auto;
        margin-left: auto;
      }

      .panel[data-panel="schedule"] .schedule-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        gap: 8px;
        margin: 0 0 12px;
      }

      .panel[data-panel="schedule"] .month-switcher {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        align-items: center;
        justify-self: stretch;
        width: 100%;
        gap: 6px;
      }

      .panel[data-panel="schedule"] .month-switcher strong {
        min-width: 0;
        text-align: center;
        white-space: nowrap;
      }

      .panel[data-panel="schedule"] .month-switcher .icon-btn {
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        padding: 0;
      }

      .panel[data-panel="schedule"] .view-switcher {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-self: stretch;
        width: 100%;
        gap: 6px;
      }

      .panel[data-panel="schedule"] .view-btn {
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 38px;
        padding: 0 8px;
        white-space: nowrap;
        word-break: normal;
        writing-mode: horizontal-tb;
      }

      .panel[data-panel="schedule"] .schedule-filters {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-self: stretch;
        width: 100%;
        gap: 6px;
      }

      .panel[data-panel="schedule"] .dong-filter,
      .panel[data-panel="schedule"] .year-filter {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        width: 100%;
        gap: 8px;
        white-space: nowrap;
      }

      .panel[data-panel="schedule"] .dong-filter select,
      .panel[data-panel="schedule"] .year-filter select {
        width: 100%;
        min-width: 0;
        max-width: none;
      }

      .modal-backdrop {
        overflow: hidden;
        overscroll-behavior: none;
      }

      .modal-window,
      .entry-modal-window,
      #scheduleModal .modal-window,
      .meeting-result-modal-window,
      .login-window {
        max-width: 100%;
        max-height: calc(100dvh - 8px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
      }

      .modal-window>.detail-head,
      #scheduleModalBody>.detail-head {
        flex-wrap: nowrap;
        gap: 8px;
      }

      .modal-window .detail-head h4,
      #scheduleModalBody .detail-head h4 {
        min-width: 0;
        margin: 0;
        font-size: 17px;
        line-height: 1.35;
        overflow-wrap: anywhere;
        word-break: keep-all;
      }

      .modal-window .detail-head button,
      #scheduleModalBody .detail-head button {
        flex: 0 0 auto;
        white-space: nowrap;
      }

      .modal-window .guide-detail-meta,
      #scheduleModalBody .guide-detail-meta {
        gap: 6px;
        margin: 10px 0 14px;
      }

      .modal-window .pill,
      #scheduleModalBody .pill {
        max-width: 100%;
        padding: 5px 8px;
        font-size: 11px;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .modal-window p,
      #scheduleModalBody p {
        font-size: 14px;
        line-height: 1.65;
        overflow-wrap: anywhere;
        word-break: keep-all;
      }

      .detail-actions,
      .meeting-actions,
      .workspace-actions {
        width: 100%;
        flex-wrap: wrap;
      }
    }

    @media (max-width: 430px) {
      .hero {
        gap: 14px;
        padding: 18px 14px;
      }

      .hero::after {
        right: -130px;
        bottom: -150px;
      }

      .panel[data-panel="schedule"] .schedule-toolbar>*,
      .panel[data-panel="schedule"] .schedule-filters>* {
        min-width: 0;
        max-width: none;
      }

      .panel[data-panel="schedule"] button.view-btn {
        max-width: none;
      }
    }

    .agenda-table-head {
      display: none;
    }

    #registerAgendaRows .agenda-contract-btn.linked {
      border-color: #16a36a;
      background: #16a36a;
      color: #fff;
      box-shadow: 0 6px 14px rgba(22, 163, 106, .2);
    }

    #registerAgendaRows .agenda-contract-btn.linked:hover {
      border-color: #128457;
      background: #128457;
    }

    #scheduleModal.agenda-contract-linking {
      z-index: 110;
    }

    #scheduleModal.agenda-contract-linking .modal-window {
      width: min(520px, calc(100vw - 24px));
      min-width: 0;
      max-width: 520px;
    }

    #scheduleModal.agenda-contract-linking #scheduleModalBody {
      grid-template-columns: minmax(0, 1fr);
    }

    .agenda-contract-modal-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
    }

    .agenda-contract-modal-form .detail-actions {
      width: 100%;
      margin-top: 0;
    }

    .agenda-unlink-btn {
      margin-right: auto;
    }

    @media (min-width: 761px) {
      .agenda-table-head {
        display: block;
        margin: 2px 0 -2px 42px;
        color: #334155;
        font-size: 13px;
        font-weight: 900;
      }

      #registerAgendaRows {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
      }

      #registerAgendaRows .agenda-row {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
        height: auto;
        padding: 7px 0;
        border: 0;
        border-bottom: 1px solid #e3eaf3;
        border-radius: 0;
        background: transparent;
      }

      #registerAgendaRows .agenda-no {
        width: 32px;
        height: 38px;
        border-radius: 0;
        background: transparent;
        color: #0f172a;
        font-size: 16px;
      }

      #registerAgendaRows .agenda-row>label {
        grid-column: 2;
        grid-row: 1;
        gap: 0;
        margin: 0;
        font-size: 0;
      }

      #registerAgendaRows .agenda-row>label input {
        height: 40px;
        font-size: 14px;
      }

      #registerAgendaRows .agenda-row>.file-note {
        grid-column: 2;
        grid-row: 2;
      }

      #registerAgendaRows .agenda-row>.agenda-actions {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
        width: auto;
        margin: 0;
      }

      #registerAgendaRows .agenda-actions button {
        min-width: 96px;
      }
    }

    @media (max-width: 760px) {
      .agenda-table-head {
        display: none;
      }

      #registerAgendaRows .agenda-row>label {
        font-size: 13px;
      }

      #scheduleModal.agenda-contract-linking .modal-window {
        width: 100%;
        max-width: 100%;
      }
    }

    #entryModal #completedVoteBox {
      padding: 14px;
      border: 1px solid #bfd8ff;
      border-radius: 16px;
      background: #eef5ff;
    }

    #entryModal #completedVoteList {
      padding: 10px;
      border: 1px solid #c8eadc;
      border-radius: 13px;
      background: #eaf8f2;
    }

    @media (max-width: 760px) {
      #entryModal #completedVoteBox {
        padding: 12px;
      }

      #entryModal #completedVoteList {
        padding: 8px;
      }
    }

    #completedVoteList .vote-request-card>div,
    #completedVoteList .vote-request-card strong,
    #completedVoteList .vote-request-card span {
      max-width: 100%;
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
      word-break: keep-all;
      overflow-wrap: anywhere;
    }

    .info.guide-item {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
      width: 100%;
      min-width: 0;
      padding: 16px 16px 54px;
    }

    .info.guide-item>div {
      width: 100%;
      min-width: 0;
    }

    .info.guide-item strong,
    .info.guide-item em,
    .info.guide-item .file-note {
      display: block;
      width: 100%;
      max-width: 100%;
      white-space: normal;
      word-break: keep-all;
      overflow-wrap: anywhere;
    }

    .info.guide-item .click-label {
      position: absolute;
      right: 14px;
      bottom: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 32px;
      padding: 0 12px;
      border: 1px solid #315be8;
      border-radius: 10px;
      background: #315be8;
      color: #fff;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      box-shadow: 0 6px 14px rgba(49, 91, 232, .2);
    }

    .info.guide-item:hover .click-label {
      border-color: #244fcf;
      background: #244fcf;
      transform: translateY(-1px);
    }

    /* 목록 상세 진입 액션은 카드 본문과 분리해 우측 하단으로 통일 */
    :is(button.info.guide-item,
      button.election-card,
      button.project,
      button.notice-row,
      button.overview-item,
      button.vote-request-card,
      button.office-card,
      button.contract,
      button.event,
      button.calendar-day-modal-item):has(.click-label) {
      position: relative;
      padding-bottom: 54px;
    }

    :is(button.info.guide-item,
      button.election-card,
      button.project,
      button.notice-row,
      button.overview-item,
      button.vote-request-card,
      button.office-card,
      button.contract,
      button.event,
      button.calendar-day-modal-item) .click-label {
      position: absolute;
      right: 14px;
      bottom: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 32px;
      padding: 0 12px;
      border: 1px solid #315be8;
      border-radius: 10px;
      background: #315be8;
      color: #fff;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
      box-shadow: 0 6px 14px rgba(49, 91, 232, .2);
    }

    :is(button.info.guide-item,
      button.election-card,
      button.project,
      button.notice-row,
      button.overview-item,
      button.vote-request-card,
      button.office-card,
      button.contract,
      button.event,
      button.calendar-day-modal-item):hover .click-label {
      border-color: #244fcf;
      background: #244fcf;
      transform: translateY(-1px);
    }

    .contract-expiry-line {
      margin-top: 7px;
      color: #2563eb;
      font-size: 12px;
      font-weight: 900;
    }

    .contract-expiry-line.due {
      color: #c2410c;
    }

    /* 전체 타이포그래피 위계: 제목과 핵심값은 강하게, 설명은 차분하게 */
    body {
      line-height: 1.5;
      letter-spacing: -.008em;
    }

    .brand h1,
    .apartment-name-main,
    .card h3,
    .modal-window .detail-head h4,
    .meeting-result-modal-window>.workspace-head h4 {
      color: #0b1324;
      letter-spacing: -.035em;
    }

    .card h3 {
      font-size: clamp(19px, 1.7vw, 22px);
      font-weight: 950;
    }

    .section-label {
      font-size: 12px;
      font-weight: 850;
      letter-spacing: -.01em;
    }

    :is(.event,
      .contract,
      .project,
      .info,
      .office-card,
      .notice-row,
      .election-card,
      .meeting-card-button,
      .calendar-day-modal-item) strong,
    .overview-item strong {
      color: #101828;
      font-size: clamp(14px, 1.25vw, 16px);
      font-weight: 900;
      line-height: 1.35;
      letter-spacing: -.018em;
    }

    :is(.event small,
      .contract p,
      .contract .file-note,
      .project p,
      .info em,
      .info .file-note,
      .office-card p,
      .office-meta,
      .notice-row > span,
      .election-card em,
      .election-card span:not(.click-label),
      .meeting-card-button span,
      .overview-item > div > span) {
      color: #667085;
      font-size: 12.5px;
      font-weight: 550;
      line-height: 1.55;
      letter-spacing: -.006em;
    }

    .quick strong,
    .amount,
    .attendance-rate strong,
    .attendance-mobile-summary strong {
      color: #0f172a;
      font-weight: 950;
      letter-spacing: -.025em;
    }

    .contract-expiry-line {
      font-size: 13px;
      font-weight: 900;
      letter-spacing: -.012em;
    }

    :is(.workspace-head h4,
      .attendance-summary > strong,
      .decision-row > strong,
      .vote-request-box > strong,
      .project-time-heading > strong,
      .attendance-dashboard-head > div > strong) {
      color: #111827;
      font-size: 16px;
      font-weight: 900;
      line-height: 1.4;
      letter-spacing: -.02em;
    }

    #entryModal .admin label,
    #scheduleModalBody label,
    .meeting-result-modal-window label {
      color: #475467;
      font-size: 12.5px;
      font-weight: 800;
      letter-spacing: -.008em;
    }

    input,
    select,
    textarea {
      color: #182230;
      font-weight: 650;
    }

    input::placeholder,
    textarea::placeholder {
      color: #98a2b3;
      font-weight: 500;
    }

    .pill,
    .status,
    .subtab,
    .click-label {
      font-weight: 850;
      letter-spacing: -.01em;
    }

    /* 상단 중복 브랜드 제거 후 인증 영역만 우측에 유지 */
    header {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 14px;
      padding: 0 4px;
    }

    header .auth-area {
      justify-items: end;
      margin-top: 0;
    }

    /* 대시보드 바로 아래 관리사무소 기본정보 */
    .resident-office-summary {
      margin: 16px 0 18px;
    }

    .resident-office-summary:empty {
      display: none;
    }

    .resident-office-summary .resident-office-card {
      position: relative;
      overflow: hidden;
      min-height: 104px;
      padding: 20px 22px 20px 26px;
      border: 1px solid #bfd7ff;
      border-radius: 18px;
      background:
        radial-gradient(circle at 92% 20%, rgba(59, 130, 246, .13), transparent 28%),
        linear-gradient(135deg, #f6faff 0%, #eaf3ff 100%);
      box-shadow: 0 12px 30px rgba(37, 99, 235, .08);
    }

    .resident-office-summary .resident-office-card::before {
      content: "";
      position: absolute;
      inset: 18px auto 18px 0;
      width: 4px;
      border-radius: 0 999px 999px 0;
      background: linear-gradient(180deg, #2563eb, #60a5fa);
    }

    .resident-office-summary .resident-office-card strong {
      margin-bottom: 8px;
      color: var(--ink);
      font-size: 17px;
      font-weight: 950;
      letter-spacing: -.025em;
    }

    .resident-office-summary .resident-office-card span:not(.pill) {
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.65;
    }

    @media (max-width: 900px) {
      header {
        display: flex;
        justify-content: flex-end;
      }

      header .auth-area {
        justify-items: end;
        margin-top: 0;
      }
    }

    @media (max-width: 560px) {
      .resident-office-summary {
        margin: 12px 0 14px;
      }

      .resident-office-summary .resident-office-card {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding: 16px 16px 16px 20px;
      }

    }

    .resident-today-grid .overview-block {
      padding: 18px;
      border-color: #dce6f3;
      background: #fff;
      box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
    }

    .resident-today-grid .overview-block h4 {
      position: relative;
      margin: 0 0 14px;
      padding-left: 11px;
      color: var(--ink);
      font-size: 18px;
      font-weight: 950;
      line-height: 1.35;
      letter-spacing: -.028em;
    }

    .resident-today-grid .overview-block h4::before {
      content: "";
      position: absolute;
      left: 0;
      top: 3px;
      bottom: 3px;
      width: 4px;
      border-radius: 999px;
      background: #3b82f6;
    }

    .resident-today-grid .overview-block:last-child {
      grid-column: 1 / -1;
      border-color: #c7d2fe;
      background: linear-gradient(135deg, #f8faff, #f5f3ff);
    }

    .weather-state {
      display: flex;
      align-items: center;
      gap: 14px;
      min-height: 66px;
    }

    .weather-icon {
      flex: 0 0 auto;
      font-size: 38px;
      line-height: 1;
    }

    .weather-state div {
      display: grid;
      gap: 4px;
    }

    .weather-state strong {
      color: var(--ink);
      font-size: 17px;
      font-weight: 950;
    }

    .weather-state div span {
      color: var(--muted);
      font-size: 12.5px;
    }

    @media (max-width: 700px) {
      .resident-today-grid .overview-block:last-child {
        grid-column: auto;
      }

      .resident-today-grid .overview-block {
        padding: 15px;
      }

      .resident-today-grid .overview-block h4 {
        font-size: 17px;
      }
    }

    @media (max-width: 760px) {
      #entryModal .vote-register {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 12px;
        box-sizing: border-box;
        overflow: hidden;
      }

      #entryModal .vote-register>*,
      #entryModal .vote-register label,
      #entryModal .vote-register .vote-request-box,
      #entryModal .vote-register .vote-request-list {
        grid-column: 1 / -1 !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
      }

      #entryModal .vote-register .vote-request-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
      }

      #entryModal .vote-register .vote-request-card .click-label {
        justify-self: start;
        white-space: normal;
      }

      .info.guide-item {
        padding: 14px 14px 52px;
      }
    }

    .panel[data-panel="schedule"] .month-switcher {
      display: inline-grid;
      grid-template-columns: 36px auto 36px;
      align-items: center;
      justify-self: center;
      width: max-content;
      max-width: 100%;
      gap: 3px;
    }

    .panel[data-panel="schedule"] .month-switcher strong {
      min-width: 104px;
      padding: 0 4px;
      text-align: center;
      white-space: nowrap;
    }

    .panel[data-panel="schedule"] .month-switcher .icon-btn {
      width: 36px;
      min-width: 36px;
      max-width: 36px;
      padding: 0;
    }

    /* Agenda rows always stay vertical; actions wrap only when the row itself is narrow. */
    #registerAgendaRows {
      container-name: register-agenda-list;
      container-type: inline-size;
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
    }

    #registerAgendaRows .agenda-row {
      grid-template-columns: 32px minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      height: auto;
      padding: 7px 0;
      border: 0;
      border-bottom: 1px solid #e3eaf3;
      border-radius: 0;
      background: transparent;
    }

    #registerAgendaRows .agenda-row>label {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
      margin: 0;
    }

    #registerAgendaRows .agenda-row>.agenda-actions {
      grid-column: 3;
      grid-row: 1;
      align-self: center;
      justify-content: flex-end;
      width: auto;
      margin: 0;
    }

    #registerAgendaRows .agenda-row>.file-note {
      grid-column: 2;
      grid-row: 2;
    }

    @container register-agenda-list (max-width: 620px) {
      #registerAgendaRows .agenda-row {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 8px 10px;
        align-items: start;
        padding: 10px 0;
      }

      #registerAgendaRows .agenda-no {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--soft-blue);
        color: #1d4ed8;
        font-size: 14px;
      }

      #registerAgendaRows .agenda-row>label,
      #registerAgendaRows .agenda-row>.file-note {
        grid-column: 2;
      }

      #registerAgendaRows .agenda-row>.agenda-actions {
        grid-column: 2;
        grid-row: auto;
        justify-content: flex-start;
        width: 100%;
        gap: 6px;
      }

      #registerAgendaRows .agenda-actions button {
        width: auto !important;
        min-width: 0 !important;
        height: 32px;
        min-height: 32px;
        padding: 0 10px;
        font-size: 12px;
      }
    }

    #meetingAgendaEditRows {
      container-name: meeting-agenda-edit-list;
      container-type: inline-size;
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
    }

    #meetingAgendaEditRows .agenda-row {
      grid-template-columns: 32px minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      height: auto;
      padding: 7px 0;
      border: 0;
      border-bottom: 1px solid #e3eaf3;
      border-radius: 0;
      background: transparent;
    }

    #meetingAgendaEditRows .agenda-row>label {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
      margin: 0;
    }

    #meetingAgendaEditRows .agenda-row>.agenda-actions {
      grid-column: 3;
      grid-row: 1;
      align-self: center;
      justify-content: flex-end;
      width: auto;
      margin: 0;
    }

    #meetingAgendaEditRows .agenda-row>.file-note {
      grid-column: 2;
      grid-row: 2;
    }

    #meetingAgendaEditRows .agenda-actions button {
      width: auto;
      min-width: 96px;
      height: 38px;
      padding: 0 14px;
      border-radius: 11px;
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }

    #meetingAgendaEditRows .agenda-contract-btn {
      border: 1px solid #2563eb;
      background: #2563eb;
      color: #fff;
      box-shadow: 0 6px 14px rgba(37, 99, 235, .18);
    }

    #meetingAgendaEditRows .agenda-contract-btn.linked {
      border-color: #16a36a;
      background: #16a36a;
      color: #fff;
      box-shadow: 0 6px 14px rgba(22, 163, 106, .2);
    }

    #meetingAgendaEditRows .agenda-delete-btn {
      border: 1px solid #fecdd3;
      background: #fff1f2;
      color: #e11d48;
    }

    @container meeting-agenda-edit-list (max-width: 620px) {
      #meetingAgendaEditRows .agenda-row {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 8px 10px;
        align-items: start;
        padding: 10px 0;
      }

      #meetingAgendaEditRows .agenda-no {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--soft-blue);
        color: #1d4ed8;
        font-size: 14px;
      }

      #meetingAgendaEditRows .agenda-row>label,
      #meetingAgendaEditRows .agenda-row>.file-note {
        grid-column: 2;
      }

      #meetingAgendaEditRows .agenda-row>.agenda-actions {
        grid-column: 2;
        grid-row: auto;
        justify-content: flex-start;
        width: 100%;
        gap: 6px;
      }

      #meetingAgendaEditRows .agenda-actions button {
        min-width: 0;
        height: 32px;
        min-height: 32px;
        padding: 0 10px;
        font-size: 12px;
      }
    }

    .meeting-result-modal-window .attendance-checks {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 5px;
      margin: 8px 0 4px;
    }

    .meeting-result-modal-window .attendance-checks label {
      display: flex !important;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 5px;
      min-width: 0;
      min-height: 30px;
      margin: 0;
      padding: 5px 7px;
      border-radius: 8px;
      font-size: 11px;
      line-height: 1.25;
      white-space: normal;
      word-break: keep-all;
    }

    .meeting-result-modal-window .attendance-member-entry {
      display: grid;
      min-width: 0;
      gap: 4px;
      padding: 5px;
      border: 1px solid transparent;
      border-radius: 9px;
    }

    .meeting-result-modal-window .attendance-member-entry:has(.attendance-member-check input:disabled) {
      border-color: #fed7aa;
      background: #fff7ed;
    }

    .meeting-result-modal-window .attendance-member-entry>label {
      width: 100%;
    }

    .meeting-result-modal-window .attendance-absence-input {
      width: 100%;
      min-width: 0;
      height: 29px;
      min-height: 29px;
      padding: 4px 7px;
      border-color: #fecaca;
      border-radius: 7px;
      background: #fffafa;
      font-size: 10px;
    }

    .meeting-result-modal-window .attendance-member-name {
      width: 100%;
      min-width: 0;
      height: 29px;
      min-height: 29px;
      padding: 4px 7px;
      border-radius: 7px;
      font-size: 11px;
    }

    .meeting-attendance-term-row {
      display: grid;
      grid-template-columns: minmax(210px, 420px);
      gap: 8px 12px;
      align-items: end;
      padding: 10px;
      border: 1px solid #bfdbfe;
      border-radius: 10px;
      background: #eff6ff;
    }

    .meeting-attendance-term-row label {
      display: grid;
      gap: 5px;
    }

    .attendance-name-warning {
      padding: 9px 11px;
      border: 1px solid #fdba74;
      border-radius: 9px;
      background: #fff7ed;
      color: #c2410c;
      font-size: 12px;
      font-weight: 850;
    }

    #decisionRows.attendance-incomplete>.decision-row:not(:first-child) {
      opacity: .42;
      pointer-events: none;
      user-select: none;
    }

    .meeting-result-modal-window .attendance-checks input[type="checkbox"] {
      flex: 0 0 auto;
      width: 14px;
      height: 14px;
      margin: 0;
    }

    .meeting-result-modal-window .decision-row:has(> .attendance-checks) {
      grid-column: 1 / -1;
      gap: 6px;
      padding: 12px;
    }

    .meeting-result-modal-window #attendancePreview {
      margin-top: 3px;
      font-size: 11px;
    }

    @media (max-width: 760px) {
      .meeting-result-modal-window .attendance-checks {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 4px;
      }

      .meeting-result-modal-window .attendance-checks label {
        padding: 4px 5px;
        font-size: 10px;
      }

      .meeting-attendance-term-row {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    /* 히어로의 어두운 배경에서는 핵심 명칭과 수치를 밝게 유지 */
    .hero .apartment-name-main,
    .hero .quick strong {
      color: #ffffff;
    }

    /* 2026 대시보드 콘셉트: 아파트 이미지 히어로 */
    .hero {
      position: relative;
      overflow: hidden;
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
      gap: 26px;
      min-height: 350px;
      padding: clamp(38px, 5vw, 64px);
      border: 0;
      border-radius: 24px;
      background-color: #12387e;
      background-image: url("https://res.cloudinary.com/dy7hzszme/image/upload/v1784526810/ntvm0ibwt3iaffdjdnkw.png");
      background-repeat: no-repeat;
      background-position: center right;
      background-size: cover;
      box-shadow: 0 24px 60px rgba(28, 75, 155, .22);
    }

    .hero::before {
      content: "";
      position: absolute;
      z-index: 0;
      right: 1.5%;
      bottom: -6%;
      width: 31%;
      height: 84%;
      opacity: .18;
      clip-path: polygon(23% 16%, 76% 0, 100% 13%, 100% 100%, 0 100%, 0 31%);
      background:
        repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, .38) 22px 28px),
        repeating-linear-gradient(0deg, rgba(4, 25, 72, .3) 0 16px, rgba(255, 255, 255, .22) 16px 21px),
        linear-gradient(145deg, rgba(255, 255, 255, .75), rgba(7, 35, 92, .55));
      pointer-events: none;
    }

    .hero::after {
      right: -40px;
      bottom: -140px;
      width: 360px;
      height: 360px;
      border-color: rgba(255, 255, 255, .12);
    }


    .hero .apartment-name-main {
      display: block;
      width: 100%;
      max-width: 100%;
      margin-bottom: 14px;
      color: #0b4fc4;
      font-size: clamp(36px, 3.6vw, 58px);
      font-weight: 950;
      line-height: 1.12;
      letter-spacing: -.055em;
      white-space: normal;
      word-break: keep-all;
      overflow-wrap: anywhere;
    }

    .hero>div:first-child {
      position: relative;
      z-index: 2;
      min-width: 0;
    }

    .hero h2 {
      margin: 0 0 16px;
      color: #2d8ac4;
      font-size: clamp(21px, 2vw, 29px);
      font-weight: 900;
      letter-spacing: -.035em;
    }

    .hero p {
      max-width: 620px;
      margin: 0;
      color: #000000;
      font-size: 15px;
      font-weight: 550;
      line-height: 1.8;
    }

    .hero .quick {
      position: relative;
      z-index: 2;
      width: 100%;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .hero .quick>.quick-card {
      min-width: 0;
      min-height: 100px;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 20px;
      border: 1px solid rgba(255, 255, 255, .78);
      border-radius: 18px;
      background: rgba(255, 255, 255, .96);
      box-shadow: 0 14px 30px rgba(9, 35, 86, .16);
      backdrop-filter: blur(12px);
    }

    .quick-icon {
      width: 58px;
      height: 58px;
      flex: 0 0 58px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #edf4ff;
      color: #2563eb !important;
      font-size: 29px !important;
      font-weight: 800;
      line-height: 1;
    }

    .quick-copy {
      min-width: 0;
      display: grid !important;
      gap: 5px;
    }

    .hero .quick .quick-copy>strong {
      margin: 0;
      color: #2563eb;
      font-size: 28px;
      font-weight: 950;
      line-height: 1;
    }

    .hero .quick .quick-copy>span {
      color: #64748b;
      font-size: 13px;
      font-weight: 750;
      line-height: 1.4;
    }

    .quick-contract .quick-icon {
      background: #eafaf5;
      color: #059669 !important;
    }

    .hero .quick .quick-contract strong {
      color: #059669;
    }

    .quick-project .quick-icon {
      background: #fff7e8;
      color: #f59e0b !important;
    }

    .hero .quick .quick-project strong {
      color: #f59e0b;
    }

    .quick-meeting .quick-icon {
      background: #f3efff;
      color: #7c3aed !important;
    }

    .hero .quick .quick-meeting strong {
      color: #7c3aed;
    }

    .tabs {
      position: relative;
      width: 100%;
      margin: 26px 0 24px;
      padding: 0 18px;
      display: flex;
      justify-content: space-around;
      gap: 2px 0px;
      border: 1px solid #dbe5f1;
      border-radius: 20px;
      background: rgba(255, 255, 255, .96);
      box-shadow: 0 12px 32px rgba(30, 64, 120, .08);
      overflow: visible;
    }

    .tabs .tab {
      position: relative;
      min-height: 72px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 12px 16px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #526178;
      font-size: 14px;
      font-weight: 850;
      box-shadow: none;
    }

    .tab-icon {
      color: #7b8aa2;
      font-size: 20px;
      font-weight: 500;
      line-height: 1;
    }

    .tabs .tab:hover {
      background: transparent;
      color: #2563eb;
    }

    .tabs .tab.active {
      border: 0;
      background: transparent;
      color: #2563eb;
      box-shadow: none;
    }

    .tabs .tab.active .tab-icon {
      color: #2563eb;
    }

    .tabs .tab.active::after {
      content: "";
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: -1px;
      height: 3px;
      border-radius: 999px 999px 0 0;
      background: #2563eb;
      box-shadow: 0 -3px 10px rgba(37, 99, 235, .25);
    }

    .resident-view .resident-today-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .resident-view .panel[data-panel="overview"] {
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .resident-view .panel[data-panel="overview"]>h3 {
      display: none;
    }

    .resident-view .resident-today-grid .weather-overview-block {
      order: 1;
      grid-column: 1 / -1;
    }

    .resident-view .resident-today-grid .overview-tone-notice {
      order: 2;
    }

    .resident-view .resident-today-grid .overview-tone-schedule {
      order: 3;
    }

    .resident-view .resident-today-grid .overview-tone-guide {
      order: 4;
      grid-column: auto;
    }

    .resident-view .resident-today-grid .overview-tone-life {
      order: 5;
      grid-column: 1 / -1;
    }

    @media (max-width: 1100px) {
      .hero {
        grid-template-columns: minmax(0, 1fr) minmax(390px, .9fr);
        gap: 28px;
        padding: 38px;
      }

      .hero .quick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      .hero .quick>.quick-card {
        min-height: 108px;
        padding: 16px;
      }

      .quick-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        font-size: 24px !important;
      }

      .tabs {
        justify-content: center;
        flex-wrap: wrap;
      }

      .tabs .tab {
        min-height: 58px;
      }

      .resident-view .resident-today-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .resident-view .resident-today-grid .overview-tone-guide {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 700px) {
      .hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        min-height: 0;
        padding: 24px 18px;
        border-radius: 20px;
      }

      .hero::before {
        width: 60%;
        opacity: .1;
      }

      .hero .apartment-name-main {
        font-size: clamp(27px, 8vw, 34px);
      }

      .hero h2 {
        font-size: 18px;
      }

      .hero p {
        font-size: 13px;
        line-height: 1.65;
      }

      .hero .quick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .hero .quick>.quick-card {
        min-height: 88px;
        gap: 9px;
        padding: 11px;
        border-radius: 13px;
      }

      .quick-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 18px !important;
      }

      .hero .quick .quick-copy>strong {
        font-size: 20px;
      }

      .hero .quick .quick-copy>span {
        font-size: 10px;
      }

      .tabs {
        margin: 14px 0 16px;
        padding: 5px;
        justify-content: center;
        gap: 3px;
        border-radius: 16px;
      }

      .tabs .tab {
        flex: 1 1 calc(33.333% - 6px);
        min-width: 92px;
        min-height: 48px;
        gap: 5px;
        padding: 8px 6px;
        font-size: 11px;
      }

      .tab-icon {
        font-size: 15px;
      }

      .resident-view .resident-today-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
      }

      .resident-view .resident-today-grid>.overview-block {
        grid-column: 1 !important;
      }
    }

    /* 오늘의 아파트 섹션별 시각 구분 */
    .resident-today-grid .overview-block {
      --overview-tone: #3b82f6;
      --overview-dark: #1d4ed8;
      --overview-soft: #eff6ff;
      border-top: 4px solid var(--overview-tone);
    }

    .resident-today-grid .overview-tone-schedule {
      --overview-tone: #3b82f6;
      --overview-dark: #1d4ed8;
      --overview-soft: #eff6ff;
      border-color: #bfdbfe;
      border-top-color: var(--overview-tone);
    }

    .resident-today-grid .overview-tone-notice {
      --overview-tone: #f97316;
      --overview-dark: #c2410c;
      --overview-soft: #fff7ed;
      border-color: #fed7aa;
      border-top-color: var(--overview-tone);
    }

    .resident-today-grid .overview-tone-life {
      --overview-tone: #10b981;
      --overview-dark: #047857;
      --overview-soft: #ecfdf5;
      border-color: #a7f3d0;
      border-top-color: var(--overview-tone);
    }

    .resident-today-grid .overview-tone-guide {
      --overview-tone: #8b5cf6;
      --overview-dark: #6d28d9;
      --overview-soft: #f5f3ff;
      border-color: #ddd6fe;
      border-top-color: var(--overview-tone);
      background: linear-gradient(135deg, #fff, #faf8ff);
    }

    .resident-today-grid .overview-tone-weather {
      --overview-tone: #0ea5e9;
      --overview-dark: #0369a1;
      --overview-soft: #f0f9ff;
      border-color: #bae6fd;
      border-top-color: var(--overview-tone);
    }

    .resident-today-grid .overview-block h4 {
      padding-left: 0;
    }

    .resident-today-grid .overview-block h4::before {
      display: none;
    }

    .resident-today-grid .overview-block h4>span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 11px;
      border-radius: 10px;
      background: var(--overview-soft);
      color: var(--overview-dark);
      font-size: 15px;
      font-weight: 950;
      letter-spacing: -.02em;
    }

    .resident-today-grid .overview-block h4>span::before {
      content: "";
      width: 7px;
      height: 7px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--overview-tone);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--overview-tone) 14%, transparent);
    }

    .resident-today-grid .overview-block .overview-item {
      padding-left: 12px;
      border-left: 3px solid var(--overview-tone);
    }

    .resident-today-grid .overview-block .overview-item:first-of-type {
      padding-top: 8px;
    }

    .resident-today-grid .overview-block button.overview-item:hover {
      background: linear-gradient(90deg, var(--overview-soft), transparent 78%);
    }

    .resident-today-grid .overview-block .overview-item>div>strong,
    .resident-today-grid .overview-block .overview-title-line>strong {
      color: #0f172a;
      font-size: 16px;
    }

    .overview-title-line {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
    }

    .overview-title-line>strong {
      min-width: 0;
      color: #0f172a;
      font-size: 15px;
      font-weight: 950;
      line-height: 1.35;
      letter-spacing: -.018em;
    }

    .overview-item span.overview-item-badge {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 23px;
      padding: 3px 8px;
      border: 1px solid transparent;
      border-radius: 7px;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      letter-spacing: -.02em;
    }

    .overview-item-badge.badge-notice {
      border-color: #fed7aa;
      background: #fff7ed;
      color: #c2410c;
    }

    .overview-item-badge.badge-life {
      border-color: #a7f3d0;
      background: #ecfdf5;
      color: #047857;
    }

    .overview-item-badge.badge-meeting,
    .overview-item-badge.badge-schedule {
      border-color: #bfdbfe;
      background: #eff6ff;
      color: #1d4ed8;
    }

    .overview-item-badge.badge-guide {
      border-color: #ddd6fe;
      background: #f5f3ff;
      color: #6d28d9;
    }

    .overview-item-badge.badge-project {
      border-color: #fde68a;
      background: #fffbeb;
      color: #b45309;
    }

    .overview-item-badge.badge-contract {
      border-color: #c7d2fe;
      background: #eef2ff;
      color: #4338ca;
    }

    .overview-item-badge.badge-case {
      border-color: #fecaca;
      background: #fef2f2;
      color: #b91c1c;
    }

    .overview-item-badge.badge-vote {
      border-color: #a5f3fc;
      background: #ecfeff;
      color: #0e7490;
    }

    .resident-today-grid .overview-block .click-label {
      padding: 8px 12px;
      border-radius: 10px;
      background: var(--overview-tone);
      color: #fff;
      box-shadow: 0 6px 14px color-mix(in srgb, var(--overview-tone) 24%, transparent);
    }

    @media (max-width: 700px) {
      .resident-today-grid .overview-block h4>span {
        padding: 6px 10px;
        font-size: 14px;
      }

      .resident-today-grid .overview-block .overview-item {
        padding-left: 10px;
      }

      .resident-today-grid .overview-block .overview-item>div>strong,
      .resident-today-grid .overview-block .overview-title-line>strong {
        font-size: 15px;
      }

      .overview-title-line {
        gap: 6px;
      }

      .overview-item span.overview-item-badge {
        min-height: 21px;
        padding: 3px 7px;
        font-size: 9px;
      }
    }

    /* 시간별 날씨 대시보드 */
    .resident-today-grid .weather-overview-block {
      grid-column: 1 / -1;
    }

    .weather-dashboard {
      min-width: 0;
    }

    .weather-current-panel {
      position: relative;
      display: grid;
      justify-items: center;
      padding: 2px 12px 18px;
      border-bottom: 1px solid #e5eaf2;
      text-align: center;
    }

    .weather-location-row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 4px;
      color: #64748b;
      font-size: 12px;
      font-weight: 750;
    }

    .weather-location-row em {
      padding: 5px 9px;
      border: 1px solid #e2e8f0;
      border-radius: 999px;
      background: #fff;
      color: #64748b;
      font-size: 10px;
      font-style: normal;
      font-weight: 850;
    }

    .weather-current-main {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      margin-top: 4px;
    }

    .weather-current-icon {
      margin-right: -10px;
      font-size: 56px;
      line-height: 1;
      filter: drop-shadow(0 5px 8px rgba(15, 23, 42, .10));
    }

    .weather-current-main>strong {
      color: #111827;
      font-size: clamp(48px, 7vw, 68px);
      font-weight: 950;
      line-height: 1;
      letter-spacing: -.065em;
    }

    .weather-current-condition {
      margin-top: 5px;
      color: #1e293b;
      font-size: 18px;
      font-weight: 900;
    }

    .weather-comparison {
      margin-top: 4px;
      color: #475569;
      font-size: 13px;
      font-weight: 700;
    }

    .weather-current-meta {
      display: flex;
      justify-content: center;
      gap: 6px 16px;
      margin-top: 8px;
      flex-wrap: wrap;
      color: #64748b;
      font-size: 12px;
    }

    .weather-current-meta strong {
      color: #1e293b;
      font-weight: 900;
    }

    .weather-dashboard>.weather-state {
      padding: 2px 2px 16px;
      border-bottom: 1px solid #e5eaf2;
    }

    .weather-forecast-scroll {
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 2px 0 7px;
      overscroll-behavior-inline: contain;
      scrollbar-width: thin;
      scrollbar-color: #cbd5e1 transparent;
    }

    .weather-forecast-chart {
      min-width: 100%;
      padding: 0 8px;
    }

    .weather-trend {
      position: relative;
      height: 82px;
    }

    .weather-trend svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 78px;
      overflow: visible;
    }

    .weather-trend-value {
      position: absolute;
      z-index: 1;
      transform: translateX(-50%);
      color: #334155;
      font-size: 11px;
      font-weight: 850;
      line-height: 1;
      white-space: nowrap;
    }

    .weather-hour-grid {
      display: grid;
      align-items: start;
    }

    .weather-hour-item {
      position: relative;
      min-width: 0;
      display: grid;
      justify-items: center;
      gap: 5px;
      color: #64748b;
    }

    .weather-hour-icon {
      font-size: 24px;
      line-height: 1.1;
      filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .08));
    }

    .weather-hour-item strong {
      color: #64748b;
      font-size: 11px;
      font-weight: 750;
    }

    .weather-hour-item:first-child strong {
      color: #4f46e5;
      font-weight: 950;
    }

    .weather-hour-item em {
      position: absolute;
      top: -5px;
      right: 1px;
      padding: 2px 5px;
      border: 1px solid #c4b5fd;
      border-radius: 999px;
      background: #fff;
      color: #7c3aed;
      font-size: 9px;
      font-style: normal;
      font-weight: 900;
    }

    @media (max-width: 700px) {
      .weather-current-panel {
        padding-inline: 2px;
      }

      .weather-current-icon {
        font-size: 46px;
      }

      .weather-current-main>strong {
        font-size: 50px;
      }

      .weather-current-condition {
        font-size: 16px;
      }

      .weather-dashboard>.weather-state {
        align-items: flex-start;
      }

      .weather-dashboard .weather-icon {
        font-size: 32px;
      }

      .weather-dashboard .weather-state strong {
        font-size: 16px;
      }

      .weather-forecast-chart {
        padding-inline: 2px;
      }
    }

    /* 공개 콘텐츠 상세보기: 등록 폼의 넓은 4열 규칙과 분리 */
    #scheduleModal .modal-window:has(.published-detail-view) {
      width: min(900px, calc(100vw - 32px));
    }

    #scheduleModalBody:has(> .published-detail-view) {
      display: block;
    }

    .published-detail-view {
      width: 100%;
      max-width: 960px;
      margin: 0 auto;
      display: grid;
      gap: 18px;
      color: #1e293b;
    }

    .published-detail-view>.detail-head {
      margin: -4px 0 0;
      padding: 0 0 18px;
      border-bottom: 1px solid #e2e8f0;
    }

    .published-detail-view>.detail-head h4 {
      color: #0f172a;
      font-size: clamp(22px, 2.4vw, 30px);
      font-weight: 950;
      line-height: 1.25;
      letter-spacing: -.035em;
    }

    .published-detail-view>.guide-detail-meta {
      margin: -2px 0 0;
      gap: 8px;
    }

    .published-detail-view .pill {
      padding: 7px 11px;
      border: 1px solid #dbeafe;
      background: #eff6ff;
      color: #2563eb;
      font-size: 12px;
      font-weight: 850;
    }

    .published-detail-view>.building-schedule-note {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: start;
      gap: 10px 14px;
      padding: 15px 17px;
      border: 1px solid #bfdbfe;
      border-left: 4px solid #2563eb;
      border-radius: 13px;
      background: #eff6ff;
      color: #1e3a5f;
      font-size: 14px;
      font-weight: 750;
      line-height: 1.7;
    }

    .building-schedule-note>strong {
      padding: 3px 8px;
      border-radius: 7px;
      background: #2563eb;
      color: #fff;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .building-schedule-note>span {
      min-width: 0;
      overflow-wrap: anywhere;
      word-break: keep-all;
    }

    @media (max-width: 520px) {
      .published-detail-view>.building-schedule-note {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 13px 14px;
        font-size: 13px;
      }

      .building-schedule-note>strong {
        width: max-content;
      }
    }

    .published-detail-section {
      padding: 22px 24px;
      border: 1px solid #dfe7f1;
      border-radius: 18px;
      background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
      box-shadow: 0 10px 28px rgba(30, 64, 175, .055);
    }

    .published-detail-section h5,
    .published-detail-section-head h5 {
      margin: 0;
      color: #0f172a;
      font-size: 17px;
      font-weight: 950;
      letter-spacing: -.025em;
    }

    .published-detail-copy p {
      margin: 14px 0 0;
      color: #334155;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.85;
      letter-spacing: -.012em;
      white-space: pre-wrap;
      word-break: keep-all;
      overflow-wrap: anywhere;
    }

    .auto-link {
      color: #2563eb;
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 3px;
      overflow-wrap: anywhere;
    }

    .auto-link:hover {
      color: #1d4ed8;
    }

    .saving-backdrop {
      z-index: 200;
      cursor: wait;
    }

    .saving-window {
      width: min(360px, calc(100vw - 40px));
      padding: 32px 28px;
      border: 1px solid rgba(255, 255, 255, .8);
      border-radius: 24px;
      background: #fff;
      box-shadow: 0 28px 80px rgba(10, 25, 55, .35);
      text-align: center;
    }

    .saving-window strong {
      display: block;
      margin-top: 18px;
      color: #0f172a;
      font-size: 20px;
    }

    .saving-window p {
      margin: 8px 0 0;
      color: #64748b;
      font-size: 14px;
    }

    .saving-spinner {
      display: inline-block;
      width: 42px;
      height: 42px;
      border: 4px solid #dbeafe;
      border-top-color: #2563eb;
      border-radius: 50%;
      animation: saving-spin .75s linear infinite;
    }

    @keyframes saving-spin {
      to {
        transform: rotate(360deg);
      }
    }

    body.is-saving {
      overflow: hidden;
    }

    .published-detail-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }

    .published-detail-section-head>span {
      color: #2563eb;
      font-size: 13px;
      font-weight: 900;
    }

    .published-agenda-list {
      margin: 0;
      padding: 0;
      list-style: none;
      counter-reset: published-agenda;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
    }

    .published-agenda-list li {
      counter-increment: published-agenda;
      min-width: 0;
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      min-height: 52px;
      padding: 10px 14px 10px 10px;
      border: 1px solid #e2e8f0;
      border-radius: 13px;
      background: #fff;
      color: #1e293b;
      font-size: 14px;
      font-weight: 750;
      line-height: 1.45;
    }

    .published-agenda-list li::before {
      content: counter(published-agenda);
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      background: #eaf2ff;
      color: #2563eb;
      font-size: 12px;
      font-weight: 950;
    }

    .meeting-published-detail {
      grid-template-columns: minmax(0, 1fr);
    }

    .meeting-published-detail>.detail-head,
    .meeting-published-detail>.guide-detail-meta,
    .meeting-published-detail>.attendance-summary,
    .meeting-published-detail>.file-note,
    .meeting-published-detail>.detail-actions {
      grid-column: 1 / -1;
    }

    .meeting-published-detail>.decision-row {
      min-width: 0;
      padding: 20px;
      border-color: #dfe7f1;
      border-radius: 17px;
      background: #fff;
      box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
    }

    .meeting-published-detail>.decision-row strong {
      color: #0f172a;
      font-size: 16px;
      font-weight: 950;
      line-height: 1.4;
    }

    .meeting-published-detail>.decision-row p {
      margin: 6px 0 0;
      color: #475569;
      font-size: 14px;
      line-height: 1.7;
    }

    .overview-item>div {
      min-width: 0;
      display: grid;
      gap: 5px;
    }

    .overview-item>div>strong {
      font-size: 15px;
      font-weight: 950;
      line-height: 1.35;
    }

    .overview-item>div>span {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      color: #64748b;
      font-size: 12px;
      line-height: 1.5;
    }

    @media (max-width: 700px) {
      #scheduleModal .modal-window:has(.published-detail-view) {
        width: calc(100vw - 12px);
      }

      .published-detail-view {
        gap: 14px;
      }

      .published-detail-view>.detail-head {
        padding-bottom: 14px;
      }

      .published-detail-view>.detail-head h4 {
        font-size: 20px;
      }

      .published-detail-section {
        padding: 17px;
        border-radius: 15px;
      }

      .published-detail-copy p {
        font-size: 14px;
        line-height: 1.75;
      }

      .published-agenda-list,
      .meeting-published-detail {
        grid-template-columns: 1fr;
      }

      .meeting-published-detail>* {
        grid-column: 1 !important;
      }
    }

    /* 압축형 메인 배치: 날씨/공지, 일정/생활/상식 */
    .resident-view .resident-today-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      align-items: start;
    }

    .resident-view .resident-today-grid>.weather-overview-block {
      order: 1;
      grid-column: span 3;
    }

    .resident-view .resident-today-grid>.overview-tone-notice {
      order: 2;
      grid-column: span 3;
    }

    .resident-view .resident-today-grid>.overview-tone-schedule {
      order: 3;
      grid-column: span 3;
    }

    .resident-view .resident-today-grid>.overview-tone-life {
      order: 4;
      grid-column: span 3;
    }

    .resident-view .resident-today-grid>.overview-tone-guide {
      order: 5;
      grid-column: 1 / -1;
    }

    .weather-overview-block .weather-current-panel {
      display: grid;
      justify-items: stretch;
      padding: 0 0 10px;
    }

    .weather-overview-block .weather-current-main {
      justify-content: flex-start;
      gap: 10px;
      margin: 0;
    }

    .weather-overview-block .weather-current-icon {
      margin: 0;
      font-size: 42px;
    }

    .weather-current-copy {
      min-width: 0;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 2px 9px;
      text-align: left;
    }

    .weather-current-copy>strong {
      color: #0f172a;
      font-size: 30px;
      font-weight: 950;
      line-height: 1;
      letter-spacing: -.045em;
    }

    .weather-current-copy>span {
      color: #334155;
      font-size: 14px;
      font-weight: 900;
    }

    .weather-current-copy>em {
      grid-column: 1 / -1;
      color: #64748b;
      font-size: 11px;
      font-style: normal;
      font-weight: 700;
    }

    .weather-overview-block .weather-current-meta {
      justify-content: flex-start;
      gap: 5px 12px;
      margin-top: 7px;
      font-size: 11px;
    }

    .weather-overview-block .weather-forecast-scroll {
      overflow: hidden;
      padding: 3px 0 0;
    }

    .weather-overview-block .weather-forecast-chart {
      width: 100% !important;
      min-width: 0;
      padding: 0;
    }

    .weather-overview-block .weather-trend {
      height: 72px;
    }

    .weather-overview-block .weather-hour-icon {
      font-size: 20px;
    }

    .weather-overview-block .weather-hour-item {
      gap: 3px;
    }

    .weather-overview-block .weather-hour-item strong {
      font-size: 10px;
    }

    @media (max-width: 1100px) {
      .resident-view .resident-today-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .resident-view .resident-today-grid>.weather-overview-block,
      .resident-view .resident-today-grid>.overview-tone-notice,
      .resident-view .resident-today-grid>.overview-tone-schedule,
      .resident-view .resident-today-grid>.overview-tone-life {
        grid-column: span 1;
      }

      .resident-view .resident-today-grid>.overview-tone-guide {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 700px) {
      .resident-view .resident-today-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .resident-view .resident-today-grid>.overview-block {
        grid-column: 1;
      }

      .weather-overview-block .weather-current-icon {
        font-size: 38px;
      }

      .weather-current-copy>strong {
        font-size: 27px;
      }

      .weather-overview-block .weather-current-meta {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, auto));
        justify-content: start;
        gap: 6px 10px;
      }
    }

    .resident-view .resident-today-grid {
      align-items: stretch;
    }

    .resident-today-grid .overview-block .overview-block-head>h4 {
      margin: 0;
    }

    .representative-term-editor {
      display: grid;
      gap: 8px;
      padding: 14px;
      border: 1px solid #bfdbfe;
      border-radius: 14px;
      background: #eff6ff;
    }

    .representative-term-toolbar {
      display: grid;
      grid-template-columns: minmax(180px, 1.2fr) 90px repeat(2, minmax(150px, .8fr)) auto auto auto;
      gap: 10px;
      align-items: end;
    }

    .representative-term-toolbar label {
      display: grid;
      gap: 5px;
      min-width: 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
    }

    .representative-term-toolbar input,
    .representative-term-toolbar select {
      width: 100%;
    }

    .vote-notice-edit-grid {
      display: grid;
      grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
      gap: 14px 16px;
    }

    .vote-notice-edit-grid>label,
    .vote-edit-period>label {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .vote-notice-edit-grid .full,
    .vote-edit-period {
      grid-column: 1 / -1;
    }

    .vote-edit-period {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .candidate-edit-period {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vote-notice-edit-grid textarea {
      min-height: 170px;
    }

    @media (max-width: 1100px) {
      .representative-term-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 600px) {
      .representative-term-toolbar {
        grid-template-columns: minmax(0, 1fr);
      }

      .vote-notice-edit-grid,
      .vote-edit-period,
      .candidate-edit-period {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    /* 월간 달력: 선관위의 동일 안건은 동일한 보더 색으로 연결 */
    .calendar-grid .day-event.event-identified {
      border: 0;
      border-top: 5px solid var(--event-border);
      background: #f3e8ff;
      color: #7e22ce;
      box-shadow: 0 2px 5px rgba(15, 23, 42, .09);
    }

    .calendar-grid .day-event.event-identified.calendar-segment-start {
      border-radius: 9px 3px 3px 9px;
    }

    .calendar-grid .day-event.event-identified.calendar-segment-middle {
      border-radius: 3px;
    }

    .calendar-grid .day-event.event-identified.calendar-segment-end {
      border-radius: 3px 9px 9px 3px;
    }

    .calendar-grid .day-event.event-identified.calendar-segment-single {
      border-radius: 9px;
    }

    .calendar-expand-btn.active {
      border-color: #315be8;
      background: #315be8;
      color: #fff;
    }

    /* 펼치기: 개수 및 말줄임 제한을 없애고 주 단위 셀 높이를 내용만큼 확장 */
    .calendar-grid.calendar-expanded {
      align-items: stretch;
    }

    .calendar-grid.calendar-expanded .day,
    #scheduleList .calendar-grid.calendar-expanded .day {
      height: auto;
      min-height: 132px;
      overflow: visible;
    }

    .calendar-grid.calendar-expanded .day-events {
      overflow: visible;
    }

    .calendar-grid.calendar-expanded .day-event,
    #scheduleList .calendar-grid.calendar-expanded .day-event {
      display: block;
      width: 100%;
      max-width: 100%;
      min-height: 0;
      height: auto;
      padding: 5px 6px;
      font-size: 11px;
      line-height: 1.4;
      overflow: visible;
      overflow-wrap: anywhere;
      text-overflow: clip;
      white-space: normal;
    }

    .calendar-grid.calendar-expanded .day-events .day-event:nth-child(n + 3) {
      display: block;
    }

    .calendar-grid.calendar-expanded .day-more {
      display: none;
    }

    @media (max-width: 700px) {
      .calendar-grid .day-event.event-identified {
        border: 0;
        border-top: 3px solid var(--event-border);
      }

      .calendar-grid.calendar-expanded .day,
      #scheduleList .calendar-grid.calendar-expanded .day {
        min-height: 96px;
        padding: 4px 3px;
        overflow: visible;
      }

      .calendar-grid.calendar-expanded .day-event,
      #scheduleList .calendar-grid.calendar-expanded .day-event {
        margin-top: 3px;
        padding: 4px 3px;
        font-size: clamp(8px, 2.2vw, 10px);
        line-height: 1.35;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
      }
    }

    /* 모바일 일정 선택 모달: 제목/기간을 먼저 전체 폭으로, 분류와 액션은 아래로 분리 */
    @media (max-width: 700px) {
      .calendar-day-modal-item {
        display: block;
        position: relative;
        min-width: 0;
        padding: 14px 14px 62px;
      }

      .calendar-day-modal-item>div {
        width: 100%;
        min-width: 0;
      }

      .calendar-day-modal-item strong,
      .calendar-day-modal-item small {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        overflow-wrap: anywhere;
        text-overflow: clip;
        white-space: normal;
      }

      .calendar-day-modal-item .calendar-day-modal-badge {
        position: absolute;
        left: 14px;
        bottom: 14px;
        display: inline-flex;
        align-items: center;
        max-width: calc(100% - 120px);
      }

      .calendar-day-modal-item .click-label {
        right: 14px;
        bottom: 12px;
      }
    }

    /* 이전·다음 달 영역은 현재 달보다 명확히 뒤로 물림 */
    .calendar-grid .day.muted,
    .calendar-grid .day.sunday.muted,
    .calendar-grid .day.saturday.muted {
      background: #f4f6f9;
      border-color: #e5e9f0;
    }

    .calendar-grid .day.muted .day-num,
    .calendar-grid .day.sunday.muted .day-num,
    .calendar-grid .day.saturday.muted .day-num {
      color: #aeb8c8;
    }

    .calendar-grid .day.muted .day-events {
      opacity: .42;
      filter: saturate(.45);
    }

    /* =========================================================
   Modal layout audit: final sizing and overflow guardrails
   ========================================================= */
    .modal-backdrop {
      box-sizing: border-box;
      max-width: 100vw;
      overflow: hidden;
    }

    .modal-window,
    .entry-modal-window,
    .meeting-result-modal-window {
      box-sizing: border-box;
      min-width: 0;
      max-width: calc(100vw - 32px);
      max-height: calc(100dvh - 32px);
      overflow-x: hidden;
      overflow-y: auto;
    }

    #scheduleModal .modal-window {
      width: min(980px, calc(100vw - 32px));
    }

    #entryModal .entry-modal-window {
      width: min(1500px, calc(100vw - 32px));
    }

    #meetingSession .meeting-result-modal-window {
      width: min(1560px, calc(100vw - 32px));
    }

    #scheduleModal .modal-window:has(#representativeEditorModal) {
      width: min(1500px, calc(100vw - 32px));
    }

    #scheduleModal .modal-window:has(#electionCommitteeEditorModal) {
      width: min(1240px, calc(100vw - 32px));
    }

    #scheduleModal .modal-window:has(#meetingAgendaEditRows) {
      width: min(1380px, calc(100vw - 32px));
    }

    #scheduleModal .modal-window:has(.vote-notice-edit-grid),
    #scheduleModal .modal-window:has(#editContractTitle) {
      width: min(1260px, calc(100vw - 32px));
    }

    #scheduleModal .modal-window:has(#apartmentBuildingListModal),
    #scheduleModal .modal-window:has(#editCaseTitle) {
      width: min(1080px, calc(100vw - 32px));
    }

    #scheduleModal .modal-window:has(#voteResultPublishInput) {
      width: min(1180px, calc(100vw - 32px));
    }

    #scheduleModal .modal-window:has(#apartmentNameInput),
    #scheduleModal .modal-window:has(#contractFlowDate),
    #scheduleModal .modal-window:has(#caseFlowDate) {
      width: min(900px, calc(100vw - 32px));
    }

    #scheduleModal .modal-window:has(#meetingAgendaContractForm),
    #scheduleModal .modal-window:has(#agendaContractModalForm) {
      width: min(760px, calc(100vw - 32px));
    }

    #scheduleModalBody,
    #scheduleModalBody>*,
    #entryModalFormMount,
    #entryModal #adminForm,
    .meeting-result-modal-window #decisionRows,
    .representative-term-editor,
    .representative-term-toolbar,
    .representative-term-fields,
    .representative-term-actions,
    .member-editor,
    .member-editor-row {
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }

    .modal-window h4,
    .modal-window h5,
    .modal-window p,
    .modal-window strong,
    .modal-window span,
    .modal-window label {
      word-break: keep-all;
      overflow-wrap: anywhere;
    }

    .modal-window button {
      max-width: 100%;
      writing-mode: horizontal-tb;
      word-break: keep-all;
      overflow-wrap: normal;
    }

    .modal-window input,
    .modal-window select,
    .modal-window textarea {
      min-width: 0;
      max-width: 100%;
    }

    /* 입주자대표회의 기수·구성원 관리 */
    #representativeEditorModal {
      container-type: inline-size;
    }

    .representative-term-toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
    }

    .representative-term-fields {
      display: grid;
      grid-template-columns: minmax(260px, 1.45fr) 100px minmax(170px, .8fr) minmax(170px, .8fr);
      gap: 12px;
      align-items: end;
    }

    .representative-term-fields label {
      min-width: 0;
      margin: 0;
    }

    .representative-term-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    .representative-term-actions button,
    .representative-member-actions button {
      flex: 0 0 auto;
      min-width: max-content;
      white-space: nowrap;
    }

    #scheduleModalBody .representative-member-row {
      display: grid;
      grid-template-columns: 82px 135px minmax(180px, 1fr) 160px 160px minmax(175px, auto);
      gap: 10px;
      align-items: end;
      width: 100%;
    }

    #scheduleModalBody .representative-member-row>label,
    #scheduleModalBody .representative-member-row>.representative-member-actions {
      min-width: 0;
      margin: 0;
    }

    #scheduleModalBody .representative-member-building {
      display: flex;
      align-self: center;
      justify-self: start;
      align-items: center;
      width: max-content;
      gap: 8px;
      padding-bottom: 0;
      white-space: nowrap;
    }

    #scheduleModalBody .representative-member-actions {
      justify-content: flex-end;
      align-self: end;
      min-height: 42px;
    }

    /* 선거관리위원회 구성원 관리 */
    #scheduleModalBody .election-member-row {
      display: grid;
      grid-template-columns: 82px 145px minmax(180px, 1fr) 170px 170px auto;
      gap: 10px;
      align-items: end;
      width: 100%;
    }

    #scheduleModalBody .election-member-row>* {
      min-width: 0;
      margin: 0;
    }

    #scheduleModalBody .election-member-row>button {
      min-width: 76px;
      white-space: nowrap;
    }

    @container (max-width: 1040px) {
      .representative-term-fields {
        grid-template-columns: minmax(220px, 1.4fr) 90px minmax(150px, 1fr) minmax(150px, 1fr);
      }

      #scheduleModalBody .representative-member-row {
        grid-template-columns: 82px 130px minmax(180px, 1fr) minmax(150px, .8fr) minmax(150px, .8fr);
      }

      #scheduleModalBody .representative-member-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
      }
    }

    @container (max-width: 820px) {
      #scheduleModalBody .representative-member-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 13px;
      }

      #scheduleModalBody .representative-member-name {
        grid-column: 1 / -1;
      }

      #scheduleModalBody .representative-member-start,
      #scheduleModalBody .representative-member-end {
        grid-column: span 1;
      }

      #scheduleModalBody .representative-member-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
      }

      #scheduleModalBody .representative-member-actions button {
        flex: 0 0 auto;
        min-width: 0;
      }
    }

    @media (max-width: 1100px) {
      #scheduleModalBody .election-member-row {
        grid-template-columns: 82px 135px minmax(180px, 1fr) minmax(150px, .8fr) minmax(150px, .8fr);
      }

      #scheduleModalBody .election-member-row>button {
        grid-column: 1 / -1;
        justify-self: end;
      }
    }

    @media (max-width: 900px) {
      #scheduleModalBody .election-member-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 13px;
      }

      #scheduleModalBody .election-member-row>label:nth-child(3),
      #scheduleModalBody .election-member-row>button {
        grid-column: 1 / -1;
      }

      #scheduleModalBody .election-member-row>button {
        justify-self: stretch;
      }

      #scheduleModalBody .building-config {
        grid-template-columns: minmax(0, 1fr) minmax(130px, .45fr);
      }

      #scheduleModalBody .building-config>label:first-child,
      #scheduleModalBody .building-config>.building-editor-list {
        grid-column: 1 / -1;
      }

      #scheduleModalBody .agenda-row {
        grid-template-columns: 48px minmax(0, 1fr);
      }

      #scheduleModalBody .agenda-row> :not(.agenda-no) {
        grid-column: 2;
      }

      #scheduleModalBody .vote-notice-edit-grid,
      #scheduleModalBody .vote-edit-period,
      #scheduleModalBody .candidate-edit-period {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    @media (max-width: 760px) {

      .modal-window,
      .entry-modal-window,
      #scheduleModal .modal-window,
      #entryModal .entry-modal-window,
      #meetingSession .meeting-result-modal-window,
      #scheduleModal .modal-window:has(#representativeEditorModal),
      #scheduleModal .modal-window:has(#electionCommitteeEditorModal),
      #scheduleModal .modal-window:has(#meetingAgendaEditRows),
      #scheduleModal .modal-window:has(.vote-notice-edit-grid),
      #scheduleModal .modal-window:has(#editContractTitle),
      #scheduleModal .modal-window:has(#apartmentBuildingListModal),
      #scheduleModal .modal-window:has(#editCaseTitle),
      #scheduleModal .modal-window:has(#voteResultPublishInput),
      #scheduleModal .modal-window:has(#apartmentNameInput),
      #scheduleModal .modal-window:has(#contractFlowDate),
      #scheduleModal .modal-window:has(#caseFlowDate),
      #scheduleModal .modal-window:has(#meetingAgendaContractForm),
      #scheduleModal .modal-window:has(#agendaContractModalForm) {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 6px);
      }

      .modal-window>.detail-head,
      #scheduleModalBody>.detail-head,
      .meeting-result-modal-window>.workspace-head {
        flex-wrap: wrap;
      }

      .modal-window>.detail-head>h4,
      #scheduleModalBody>.detail-head>h4 {
        flex: 1 1 220px;
        min-width: 0;
      }

      .detail-head>.meeting-actions:has(button + button) {
        width: 100%;
        justify-content: flex-end;
      }

      .modal-window>.detail-head>.detail-actions,
      #scheduleModalBody>.detail-head>.detail-actions,
      .modal-window>.workspace-head>.workspace-actions,
      .meeting-result-modal-window>.workspace-head>.workspace-actions {
        flex: 1 1 100%;
        width: 100%;
        justify-content: flex-end;
      }

      #scheduleModalBody .building-config,
      #scheduleModalBody .agenda-row,
      #scheduleModalBody .meeting-form,
      #scheduleModalBody .contract-final-grid,
      #scheduleModalBody .date-time-pair {
        grid-template-columns: minmax(0, 1fr);
      }

      #scheduleModalBody .building-config>*,
      #scheduleModalBody .agenda-row>*,
      #scheduleModalBody .meeting-form>* {
        grid-column: 1 / -1 !important;
      }

      #scheduleModalBody .agenda-no {
        justify-self: start;
      }

      .representative-term-fields {
        grid-template-columns: minmax(0, 1fr) minmax(92px, .35fr);
      }

      .representative-term-fields label:first-child,
      .representative-term-fields label:nth-child(3),
      .representative-term-fields label:nth-child(4) {
        grid-column: 1 / -1;
      }

      .representative-term-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .representative-term-actions button {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        white-space: normal;
      }

      .representative-term-actions #deleteRepresentativeTerm {
        grid-column: 1 / -1;
      }

      #scheduleModalBody .representative-member-row,
      #scheduleModalBody .election-member-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 13px;
      }

      #scheduleModalBody .representative-member-name,
      #scheduleModalBody .election-member-row>label:nth-child(3) {
        grid-column: 1 / -1;
      }

      #scheduleModalBody .representative-member-start,
      #scheduleModalBody .representative-member-end,
      #scheduleModalBody .election-member-row>label:nth-child(4),
      #scheduleModalBody .election-member-row>label:nth-child(5) {
        grid-column: span 1;
      }

      #scheduleModalBody .representative-member-actions,
      #scheduleModalBody .election-member-row>button {
        grid-column: 1 / -1;
        justify-self: stretch;
      }

      #scheduleModalBody .representative-member-actions {
        justify-content: stretch;
      }

      #scheduleModalBody .representative-member-actions button,
      #scheduleModalBody .election-member-row>button {
        flex: 1 1 auto;
        min-width: 0;
      }
    }

    @media (max-width: 430px) {

      .representative-term-fields,
      .representative-term-actions,
      #scheduleModalBody .representative-member-row,
      #scheduleModalBody .election-member-row {
        grid-template-columns: minmax(0, 1fr);
      }

      .representative-term-fields>*,
      .representative-term-actions>*,
      #scheduleModalBody .representative-member-row>*,
      #scheduleModalBody .election-member-row>* {
        grid-column: 1 / -1 !important;
      }

      #scheduleModalBody .representative-member-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
      }

      .modal-window button,
      .entry-modal-window button,
      .meeting-result-modal-window button {
        min-width: 0;
        white-space: normal;
        line-height: 1.35;
      }
    }

    /* =========================================================
   모달 헤더·닫기·저장 버튼 최종 통일
   ========================================================= */

    .modal-window>.detail-head,
    #scheduleModalBody>.detail-head,
    .meeting-result-modal-window>.workspace-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: nowrap;
    }

    .modal-window>.detail-head>h4,
    #scheduleModalBody>.detail-head>h4,
    .modal-window>.detail-head>div:first-child,
    #scheduleModalBody>.detail-head>div:first-child,
    .meeting-result-modal-window>.workspace-head>div:first-child {
      flex: 1 1 auto;
      min-width: 0;
      margin: 0;
    }

    .detail-head>.meeting-actions,
    .detail-head>.modal-head-actions {
      width: auto !important;
      margin-left: auto;
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: nowrap;
    }

    /* 상단 닫기 버튼만 빨간색 */
    .detail-head button[id^="close"],
    .detail-head button[id^="cancel"],
    .detail-head button[id$="Close"],
    .meeting-result-modal-window>.workspace-head button[id^="close"] {
      flex: 0 0 auto;
      margin-left: auto;
      min-height: 40px;
      padding: 0 14px;
      border: 1px solid #dc2626;
      border-radius: 11px;
      background: #ef4444;
      color: #fff;
      font-weight: 900;
      box-shadow: 0 7px 16px rgba(239, 68, 68, 0.2);
    }

    .detail-head button[id^="close"]:hover,
    .detail-head button[id^="cancel"]:hover,
    .detail-head button[id$="Close"]:hover,
    .meeting-result-modal-window>.workspace-head button[id^="close"]:hover {
      border-color: #b91c1c;
      background: #dc2626;
      color: #fff;
    }

    /* 입력폼 하단은 저장 버튼 우측 정렬 */
    .submit-row {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
    }

    .submit-row>.primary:last-child {
      min-width: 140px;
    }

    @media (max-width: 760px) {

      .modal-window>.detail-head,
      #scheduleModalBody>.detail-head,
      .meeting-result-modal-window>.workspace-head {
        flex-wrap: wrap;
      }

      .detail-head>.meeting-actions,
      .detail-head>.modal-head-actions {
        width: 100% !important;
        flex: 1 1 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
      }

      .submit-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
      }

      .submit-row>.primary:last-child {
        width: 100%;
        min-width: 0;
      }
    }
    /* 회의결과 수정 화면 - 과거 안건 계약 사후 연동 */
.session-contract-linker {
  display: grid;
  gap: 9px;
  margin: 4px 0 12px;
  padding: 12px;
  border: 1px dashed #93c5fd;
  border-radius: 12px;
  background: #eff6ff;
}

.session-contract-link-open {
  justify-self: start;
  min-height: 38px;
  color: #1d4ed8;
  border-color: #bfdbfe;
  background: #ffffff;
}

.session-contract-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.session-contract-picker select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #ffffff;
  color: #172033;
  font-weight: 800;
}

.session-contract-picker .primary {
  min-height: 42px;
}

.session-contract-linked-notice {
  color: #166534;
  font-weight: 900;
}

@media (max-width: 680px) {
  .session-contract-picker {
    grid-template-columns: 1fr;
  }

  .session-contract-picker .primary {
    width: 100%;
  }
}

/* ─────────────────────────────
   회의별 동대표 출석현황
───────────────────────────── */

.attendance-table-wrap {
  overflow-x: auto;
}

.attendance-meeting-table {
  min-width: 1050px;
}

.attendance-meeting-table tr > :first-child {
  width: 110px;
  min-width: 110px;
}

.attendance-meeting-table tr > :last-child {
  width: auto;
}

.attendance-meeting-table th,
.attendance-meeting-table td {
  height: auto;
  min-width: 150px;
  padding: 12px 10px;
  vertical-align: top;
}

.attendance-meeting-table tbody th {
  background: #f8fafc;
  vertical-align: middle;
}

.attendance-term-cell {
  vertical-align: middle !important;
}

.attendance-term-cell strong {
  font-size: 15px;
}

.attendance-meeting-members {
  display: grid;
  gap: 7px;
}

.attendance-meeting-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  padding: 8px;

  border: 1px solid var(--line);
  border-radius: 10px;

  background: #fff;
  text-align: left;
}

.attendance-meeting-member-info {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.attendance-meeting-member-info strong {
  font-size: 12px;
}

.attendance-meeting-member-info span,
.attendance-meeting-member-info small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.attendance-meeting-member-info small {
  color: #dc2626;
}

.attendance-meeting-member-status {
  flex: 0 0 auto;

  padding: 4px 7px;

  border-radius: 999px;

  font-size: 10px;
  font-weight: 900;
}

.attendance-meeting-member.is-present
.attendance-meeting-member-status {
  background: #d1fae5;
  color: #047857;
}

.attendance-meeting-member.is-absent
.attendance-meeting-member-status {
  background: #fee2e2;
  color: #dc2626;
}

.attendance-meeting-empty {
  color: var(--muted);
  font-size: 11px;
}

/* 같은 동 안의 후임 차수 표시 */
#scheduleModalBody .representative-successor-order {
  min-width: 0;
  align-self: center;
  color: var(--blue);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

#scheduleModalBody .representative-successor-spacer {
  min-width: 0;
}

#scheduleModalBody [data-representative-start][readonly] {
  background: #f1f5f9;
  color: #475569;
  cursor: default;
}

@container (max-width: 820px) {
  #scheduleModalBody .representative-successor-spacer {
    display: none;
  }

  #scheduleModalBody .representative-successor-order {
    grid-column: 1 / -1;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
  }
}
/* 동대표 차수 범위가 기수 전체 기간을 채우지 못한 경계 */
#scheduleModalBody input.representative-range-warning {
  border-color: #ef4444 !important;
  background: #fff7f7;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.14);
}
/* 출석현황 공석 표시 */
.attendance-meeting-member.is-vacant,
.attendance-person-row.is-vacant {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.attendance-meeting-member.is-vacant
.attendance-meeting-member-status,
.attendance-status.vacant {
  background: #e2e8f0;
  color: #475569;
}
/* 회의 결과 작성 화면: 참석 / 공석 분리 */
.meeting-result-modal-window
.attendance-member-choice-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
}

.meeting-result-modal-window
.attendance-member-choice-row
.attendance-member-check {
  min-width: 0;
}

.meeting-result-modal-window
.attendance-vacant-check {
  width: auto !important;
  min-width: 58px !important;
  justify-content: center !important;

  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;

  font-weight: 850;
  white-space: nowrap !important;
}

.meeting-result-modal-window
.attendance-vacant-check:has(input:checked) {
  border-color: #94a3b8;
  background: #e2e8f0;
  color: #334155;
}

.meeting-result-modal-window
.attendance-member-entry.is-vacant {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
}

.meeting-result-modal-window
.attendance-member-entry.is-vacant
.attendance-member-check {
  opacity: 0.58;
}

@media (max-width: 760px) {
  .meeting-result-modal-window
  .attendance-member-choice-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}