:root {
      /* ── Furniture-inspired Light Palette ── */
      --bg:           #EBF0F5;
      --bg-dots:      rgba(27, 90, 120, 0.045);
      --panel:        #FFFFFF;
      --panel-soft:   #F7FAFB;
      --field:        #F1F5F8;
      --field-soft:   #E8EEF3;

      --text:         #1E3445;
      --text-bright:  #0F2232;
      --muted:        #90A8BC;
      --muted-mid:    #6E8FA6;
      --muted-dark:   #4A6A82;

      --line:         rgba(27, 90, 120, 0.09);
      --line-strong:  rgba(27, 90, 120, 0.15);

      /* Teal – main brand from image */
      --primary:        #1B6E8F;
      --primary-dark:   #14546E;
      --primary-light:  #2A88AC;
      --primary-soft:   rgba(27, 110, 143, 0.08);
      --primary-softer: rgba(27, 110, 143, 0.05);
      --primary-border: rgba(27, 110, 143, 0.22);

      /* Accent colors */
      --green:        #1F8A62;
      --green-light:  #26A576;
      --green-soft:   rgba(31, 138, 98, 0.08);
      --green-border: rgba(31, 138, 98, 0.2);

      --amber:        #B8780A;
      --amber-soft:   rgba(184, 120, 10, 0.09);
      --amber-border: rgba(184, 120, 10, 0.22);

      --red:          #C0392B;
      --red-light:    #D94F42;
      --red-soft:     rgba(192, 57, 43, 0.07);
      --red-border:   rgba(192, 57, 43, 0.2);

      --purple:       #7B59A2;
      --purple-soft:  rgba(123, 89, 162, 0.08);
      --orange:       #D4651A;
      --orange-soft:  rgba(212, 101, 26, 0.08);

      /* Shadows – warm and soft */
      --shadow-xs: 0 1px 4px rgba(15, 34, 50, 0.06);
      --shadow-sm: 0 2px 10px rgba(15, 34, 50, 0.08), 0 1px 3px rgba(15, 34, 50, 0.04);
      --shadow:    0 8px 30px rgba(15, 34, 50, 0.10), 0 2px 8px rgba(15, 34, 50, 0.05);
      --shadow-lg: 0 20px 60px rgba(15, 34, 50, 0.14), 0 6px 20px rgba(15, 34, 50, 0.07);
      --shadow-modal: 0 32px 80px rgba(15, 34, 50, 0.18), 0 8px 24px rgba(15, 34, 50, 0.1);

      --radius:    10px;
      --radius-sm: 6px;
      --radius-lg: 14px;
      --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    html[data-theme="black"] {
      color-scheme: dark;
      --bg:           #040609;
      --bg-dots:      rgba(91, 141, 168, 0.06);
      --panel:        #0D1219;
      --panel-soft:   #111822;
      --field:        #080C12;
      --field-soft:   #0C1119;

      --text:         #D3DCE7;
      --text-bright:  #F7FAFC;
      --muted:        #677386;
      --muted-mid:    #9AA8BA;
      --muted-dark:   #C3CEDB;

      --line:         rgba(148, 163, 184, 0.16);
      --line-strong:  rgba(148, 163, 184, 0.28);

      --primary:        #2D8AB3;
      --primary-dark:   #206D8F;
      --primary-light:  #55A6C9;
      --primary-soft:   rgba(45, 138, 179, 0.15);
      --primary-softer: rgba(45, 138, 179, 0.09);
      --primary-border: rgba(85, 166, 201, 0.34);

      --green:        #24966F;
      --green-light:  #3DBB8D;
      --green-soft:   rgba(36, 150, 111, 0.14);
      --green-border: rgba(61, 187, 141, 0.32);

      --amber:        #FBBF24;
      --amber-soft:   rgba(251, 191, 36, 0.13);
      --amber-border: rgba(251, 191, 36, 0.3);

      --red:          #E06565;
      --red-light:    #F09393;
      --red-soft:     rgba(248, 113, 113, 0.13);
      --red-border:   rgba(248, 113, 113, 0.32);

      --purple:       #9F7AEA;
      --purple-soft:  rgba(159, 122, 234, 0.13);
      --orange:       #D97736;
      --orange-soft:  rgba(217, 119, 54, 0.13);

      --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.35);
      --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(148, 163, 184, 0.04);
      --shadow:    0 12px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(148, 163, 184, 0.05);
      --shadow-lg: 0 22px 64px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(148, 163, 184, 0.06);
      --shadow-modal: 0 34px 90px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(148, 163, 184, 0.08);
    }

    html[data-theme="black"] body::after {
      background: linear-gradient(90deg, #206D8F, #24966F, #7C5DC7, #2D8AB3);
    }

    html[data-theme="black"] input,
    html[data-theme="black"] textarea,
    html[data-theme="black"] select {
      background-color: #070B11;
      color: #F5F8FC;
      border-color: var(--line-strong);
    }

    html[data-theme="black"] input::placeholder,
    html[data-theme="black"] textarea::placeholder {
      color: var(--muted);
    }

    html[data-theme="black"] dialog,
    html[data-theme="black"] .calendar-panel,
    html[data-theme="black"] .agenda-panel,
    html[data-theme="black"] .stat-card,
    html[data-theme="black"] .month-tab,
    html[data-theme="black"] .agenda-card,
    html[data-theme="black"] .entry-row {
      background: var(--panel);
      border-color: var(--line);
    }

    html[data-theme="black"] .modal-head,
    html[data-theme="black"] .toolbar,
    html[data-theme="black"] .agenda-head {
      background: #101722;
      border-color: var(--line-strong);
    }

    html[data-theme="black"] h1,
    html[data-theme="black"] .modal-head h2,
    html[data-theme="black"] .month-title h2,
    html[data-theme="black"] .agenda-head h2,
    html[data-theme="black"] .entry-title,
    html[data-theme="black"] label {
      color: #F7FAFC;
    }

    html[data-theme="black"] .annual-entry-item:hover,
    html[data-theme="black"] .memo-list-item:hover,
    html[data-theme="black"] .entry-row:hover,
    html[data-theme="black"] .entry-row.selected {
      border-color: var(--primary-border);
      background: #141C28;
      box-shadow: 0 0 0 1px rgba(85, 166, 201, 0.18), var(--shadow-sm);
    }

    html[data-theme="black"] .month-tab.active,
    html[data-theme="black"] .person-filter-button.active {
      background: linear-gradient(135deg, #247899, #2F9B76);
      color: #F8FBFD;
      border-color: rgba(85, 166, 201, 0.38);
    }

    html[data-theme="black"] .primary-button,
    html[data-theme="black"] .claude-map-button {
      background: rgba(36, 150, 111, 0.18);
      color: #BFECDC;
      border-color: rgba(61, 187, 141, 0.34);
      box-shadow: var(--shadow-xs);
    }

    html[data-theme="black"] .primary-button:hover,
    html[data-theme="black"] .claude-map-button:hover {
      background: rgba(36, 150, 111, 0.26);
      color: #E5FFF5;
    }

    html[data-theme="black"] .danger-button {
      background: rgba(224, 101, 101, 0.12);
      color: #F0A0A0;
      border-color: rgba(224, 101, 101, 0.34);
    }

    html[data-theme="black"] .day-button:hover,
    html[data-theme="black"] .event-card:hover,
    html[data-theme="black"] .agenda-card button:hover {
      background: #121A25;
    }

    html[data-theme="black"] input:focus,
    html[data-theme="black"] textarea:focus,
    html[data-theme="black"] select:focus,
    html[data-theme="black"] button:focus-visible {
      border-color: rgba(85, 166, 201, 0.5);
      box-shadow: 0 0 0 2px rgba(45, 138, 179, 0.13);
    }

    html[data-theme="black"] #scheduleModal .modal-body,
    html[data-theme="black"] .people-editor {
      background: #0B1119;
    }

    html[data-theme="black"] .people-editor,
    html[data-theme="black"] .tag {
      border-color: rgba(148, 163, 184, 0.2);
    }

    html[data-theme="black"] .claude-airspace-legend {
      background: rgba(7, 11, 17, 0.96);
      border-color: rgba(148, 163, 184, 0.32);
      color: #D3DCE7;
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
    }

    html[data-theme="black"] .claude-airspace-legend-item {
      color: #E5EDF5;
    }

    html[data-theme="black"] .claude-airspace-legend-note {
      color: #9AA8BA;
    }

    html[data-theme="black"] .claude-airspace-legend-button.all {
      background: #182232;
      color: #E5EDF5;
      border: 1px solid rgba(148, 163, 184, 0.22);
    }

    html[data-theme="black"] .claude-airspace-legend-button.close {
      background: rgba(224, 101, 101, 0.2);
      color: #F4B6B6;
      border: 1px solid rgba(224, 101, 101, 0.32);
    }

    html[data-theme="black"] .claude-airspace-swatch {
      background: color-mix(in srgb, var(--swatch-color) 42%, #0B1119);
      border-color: color-mix(in srgb, var(--swatch-color) 76%, #D3DCE7);
    }

    html[data-theme="black"] .claude-airspace-swatch.stripe {
      background: linear-gradient(90deg, #8E3F45 0 33%, #617052 33% 66%, #31738D 66% 100%);
      border-color: rgba(211, 220, 231, 0.48);
    }

    html[data-theme="black"] #claudeMapModal .leaflet-control-layers {
      background: rgba(7, 11, 17, 0.94);
      border: 1px solid rgba(148, 163, 184, 0.32);
      color: #E5EDF5;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    }

    html[data-theme="black"] #claudeMapModal .leaflet-control-layers label,
    html[data-theme="black"] #claudeMapModal .leaflet-control-layers label span {
      color: #E5EDF5;
    }

    html[data-theme="black"] .memo-dialog .memo-action-buttons .text-button {
      background: rgba(45, 138, 179, 0.16);
      color: #B9E4F6;
      border-color: rgba(85, 166, 201, 0.34);
    }

    html[data-theme="black"] .memo-dialog .memo-action-buttons .text-button:hover {
      background: rgba(45, 138, 179, 0.24);
      color: #F2FBFF;
      border-color: rgba(85, 166, 201, 0.52);
    }

    html[data-theme="black"] .memo-list-item.active {
      background: #141C28;
      border-color: var(--primary-border);
      box-shadow: 0 0 0 1px rgba(85, 166, 201, 0.18), var(--shadow-sm);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      min-height: 100vh;
      background: var(--bg);
      color: var(--text);
      font-family: "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
      line-height: 1.5;
      font-weight: 400;
    }

    /* Subtle dot texture */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: radial-gradient(circle, var(--bg-dots) 1px, transparent 1px);
      background-size: 28px 28px;
      pointer-events: none;
      z-index: 0;
    }

    /* Top gradient accent */
    body::after {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--primary-dark), var(--primary-light), #4AAFC8, var(--primary));
      z-index: 100;
    }

    button, input, select {
      font: inherit;
      font-family: "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
    }
    button, select { cursor: pointer; }
    h1, h2, h3, p { margin: 0; }

    main {
      position: relative;
      z-index: 1;
      width: min(1400px, calc(100% - 40px));
      margin: 0 auto;
      padding: 14px 0 48px;
    }

    /* ── App Header ─────────────────────────────────────── */

    .app-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--line-strong);
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .header-icon {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      padding: 0;
      border: 0;
      border-radius: 8px;
      background: linear-gradient(135deg, var(--primary), var(--primary-light));
      color: #fff;
      font-size: 15px;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(27, 110, 143, 0.28);
    }

    .header-icon:hover {
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      transform: translateY(-1px);
    }

    .header-title {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .header-title-row {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .header-title-row h1 {
      min-width: 0;
    }

    .title-excel-action {
      display: inline-grid;
      place-items: center;
      position: relative;
      width: 30px;
      height: 30px;
      min-height: 30px;
      padding: 0;
      border: 1px solid var(--primary-border);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--primary);
      font-size: 16px;
      line-height: 1;
      box-shadow: var(--shadow-xs);
      transition: all var(--transition);
      flex-shrink: 0;
    }

    .title-excel-action:hover {
      background: var(--primary-softer);
      border-color: var(--primary);
      transform: translateY(-1px);
    }

    .title-excel-action.is-empty {
      color: var(--muted-mid);
      border-color: var(--line-strong);
      opacity: 0.72;
    }

    .title-excel-action.has-file {
      color: #fff;
      border-color: var(--green-light);
      background: linear-gradient(135deg, var(--green), var(--green-light));
      animation: mail-arrived-glow 1.35s ease-in-out infinite;
    }

    .title-excel-action.has-file::after {
      content: "";
      position: absolute;
      right: 4px;
      top: 4px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #fff4b8;
      box-shadow: 0 0 0 2px rgba(255, 244, 184, 0.36), 0 0 12px rgba(255, 244, 184, 0.9);
      animation: mail-arrived-dot 1.35s ease-in-out infinite;
    }

    @keyframes mail-arrived-glow {
      0%, 100% {
        box-shadow: var(--shadow-xs);
        transform: translateY(0);
      }
      50% {
        box-shadow: 0 0 0 3px rgba(38, 165, 118, 0.18), 0 0 18px rgba(38, 165, 118, 0.44);
        transform: translateY(-1px);
      }
    }

    @keyframes mail-arrived-dot {
      0%, 100% {
        opacity: 0.45;
        transform: scale(0.8);
      }
      50% {
        opacity: 1;
        transform: scale(1.18);
      }
    }

    h1 {
      font-size: clamp(17px, 1.8vw, 20px);
      font-weight: 900;
      letter-spacing: -0.03em;
      color: var(--text-bright);
    }

    h1 span { color: var(--primary); }

    .sub-info {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: flex-end;
      flex-wrap: wrap;
      color: var(--muted-mid);
      font-size: 12px;
      font-weight: 500;
    }

    .sub-info::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green-light);
      box-shadow: 0 0 0 2px var(--green-soft);
      flex-shrink: 0;
    }

    /* ── Stats ──────────────────────────────────────────── */

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

    .stat-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 7px 14px;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      position: relative;
      overflow: hidden;
      transition: box-shadow var(--transition), transform var(--transition);
    }

    .stat-card:hover {
      box-shadow: var(--shadow);
      transform: translateY(-1px);
    }

    /* Colored left accent bar */
    .stat-card::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 4px;
      border-radius: 4px 0 0 4px;
      background: linear-gradient(180deg, var(--primary), var(--primary-light));
    }

    .stat-card:nth-child(2)::before { background: linear-gradient(180deg, var(--purple), #9B79C2); }
    .stat-card:nth-child(3)::before { background: linear-gradient(180deg, var(--green), var(--green-light)); }
    .stat-card:nth-child(4)::before { background: linear-gradient(180deg, var(--orange), #E8803A); }

    .stat-card strong {
      display: block;
      font-size: 20px;
      font-weight: 900;
      line-height: 1;
      color: var(--text-bright);
      letter-spacing: -0.03em;
      font-feature-settings: 'tnum';
    }

    .stat-card span {
      display: block;
      color: var(--muted-mid);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.04em;
      line-height: 1.1;
      text-transform: uppercase;
      text-align: right;
    }

    /* ── Workspace ──────────────────────────────────────── */

    .workspace {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 16px;
      align-items: stretch;
    }

    .calendar-panel, .agenda-panel {
      overflow: hidden;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
    }

    .agenda-panel {
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    /* ── Toolbar ────────────────────────────────────────── */

    .toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 18px;
      background: var(--panel-soft);
      border-bottom: 1px solid var(--line);
    }

    .month-title { display: grid; gap: 2px; }

    .month-title h2 {
      font-size: 19px;
      font-weight: 900;
      letter-spacing: -0.025em;
      color: var(--text-bright);
    }

    .month-title span {
      color: var(--muted-mid);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .portable-html-tools {
      display: none !important;
    }

    .portable-html-status {
      min-width: 48px;
      color: var(--green);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.25;
    }

    .portable-html-busy {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--primary);
      font-size: 11px;
      font-weight: 800;
      line-height: 1.25;
    }

    .portable-html-busy::before {
      content: "";
      width: 14px;
      height: 14px;
      border: 2px solid var(--primary-border);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: portable-spin 0.75s linear infinite;
    }

    @keyframes portable-spin {
      to { transform: rotate(360deg); }
    }

    .portable-html-dialog .modal-body {
      display: grid;
      gap: 10px;
    }

    .portable-html-dialog p {
      color: var(--muted-dark);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.45;
    }

    .portable-html-dialog textarea {
      width: min(84vw, 920px);
      height: min(58vh, 520px);
      resize: vertical;
      font-family: Consolas, "Courier New", monospace;
      font-size: 12px;
      line-height: 1.45;
      white-space: pre;
    }

    .portable-html-dialog-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    .title-excel-dialog {
      width: min(540px, calc(100% - 20px));
    }

    .title-excel-dialog .modal-body {
      display: grid;
      gap: 12px;
    }

    .title-excel-panel {
      display: grid;
      gap: 4px;
      padding: 12px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      background: var(--field);
    }

    .title-excel-name {
      color: var(--text-bright);
      font-size: 14px;
      font-weight: 900;
      word-break: break-all;
    }

    .title-excel-detail,
    .title-excel-status {
      color: var(--muted-dark);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.4;
    }

    .title-excel-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    .backup-restore-dialog {
      width: min(520px, calc(100% - 20px));
    }

    .backup-restore-dialog .modal-body {
      display: grid;
      gap: 12px;
    }

    .backup-restore-summary {
      padding: 12px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      background: var(--field);
      color: var(--muted-dark);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
    }

    .backup-restore-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    .backup-restore-status {
      min-height: 18px;
      color: var(--green);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.4;
    }

    .theme-dialog {
      width: min(440px, calc(100% - 20px));
    }

    .theme-dialog .modal-body {
      display: grid;
      gap: 12px;
    }

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

    .theme-option {
      display: grid;
      gap: 8px;
      padding: 12px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      background: var(--panel);
      color: var(--muted-dark);
      text-align: left;
      box-shadow: var(--shadow-xs);
      transition: all var(--transition);
    }

    .theme-option:hover {
      border-color: var(--primary-border);
      background: var(--primary-softer);
      transform: translateY(-1px);
    }

    .theme-option.active {
      border-color: var(--green-border);
      box-shadow: 0 0 0 3px var(--green-soft), var(--shadow-sm);
    }

    .theme-swatch {
      display: grid;
      grid-template-columns: 1.25fr 0.75fr;
      gap: 4px;
      height: 46px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--panel-soft);
    }

    .theme-swatch span {
      display: block;
      min-width: 0;
    }

    .theme-swatch span:nth-child(1) { background: #EBF0F5; }
    .theme-swatch span:nth-child(2) { background: #FFFFFF; }
    .theme-swatch span:nth-child(3) { background: #1B6E8F; }
    .theme-swatch span:nth-child(4) { background: #1F8A62; }

    .theme-swatch.black span:nth-child(1) { background: #05070B; }
    .theme-swatch.black span:nth-child(2) { background: #10151D; }
    .theme-swatch.black span:nth-child(3) { background: #38BDF8; }
    .theme-swatch.black span:nth-child(4) { background: #34D399; }

    .theme-option strong {
      color: var(--text-bright);
      font-size: 13px;
      font-weight: 900;
    }

    .theme-option small {
      color: var(--muted-dark);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.35;
    }

    /* ── Buttons ────────────────────────────────────────── */

    .icon-button, .text-button, .primary-button, .danger-button {
      min-height: 34px;
      border-radius: var(--radius-sm);
      font-weight: 700;
      font-size: 13px;
      transition: all var(--transition);
      letter-spacing: -0.01em;
    }

    .icon-button {
      display: inline-grid;
      place-items: center;
      width: 34px;
      border: 1px solid var(--line-strong);
      background: var(--panel);
      color: var(--muted-dark);
      font-size: 18px;
      line-height: 1;
      box-shadow: var(--shadow-xs);
    }

    .text-button {
      padding: 6px 12px;
      border: 1px solid var(--line-strong);
      background: var(--panel);
      color: var(--muted-dark);
      box-shadow: var(--shadow-xs);
    }

    .primary-button {
      padding: 6px 16px;
      border: 1px solid var(--primary-border);
      background: linear-gradient(135deg, var(--primary), var(--primary-light));
      color: #fff;
      box-shadow: 0 3px 12px rgba(27, 110, 143, 0.3);
      font-weight: 700;
    }

    .danger-button {
      padding: 6px 12px;
      border: 1px solid var(--red-border);
      background: var(--red-soft);
      color: var(--red);
    }

    .icon-button:hover, .text-button:hover {
      border-color: var(--primary-border);
      background: var(--primary-softer);
      color: var(--primary);
    }

    .primary-button:hover {
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      box-shadow: 0 5px 18px rgba(27, 110, 143, 0.38);
      transform: translateY(-1px);
    }

    .danger-button:hover {
      border-color: rgba(192, 57, 43, 0.35);
      background: rgba(192, 57, 43, 0.12);
      color: var(--red-light);
    }

    .text-button:disabled, .primary-button:disabled, .danger-button:disabled {
      opacity: 0.52;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .month-tab:hover { box-shadow: var(--shadow-sm); }

    /* ── Inputs ─────────────────────────────────────────── */

    select, input, textarea {
      background: var(--panel);
      color: var(--text);
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      transition: border-color var(--transition), box-shadow var(--transition);
    }

    select {
      min-height: 34px;
      padding: 6px 32px 6px 10px;
      font-size: 13px;
      font-weight: 500;
      box-shadow: var(--shadow-xs);
    }

    input {
      width: 100%;
      min-height: 40px;
      padding: 9px 12px;
      font-size: 14px;
    }

    textarea {
      width: 100%;
      min-height: 88px;
      resize: vertical;
      padding: 10px 12px;
      font: inherit;
      line-height: 1.5;
      font-size: 14px;
    }

    input:focus, textarea:focus, select:focus, button:focus-visible {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px var(--primary-soft);
    }

    /* ── Month Tabs ─────────────────────────────────────── */

    .month-tabs {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 5px;
      padding: 10px 14px;
      border-bottom: 1px solid var(--line);
      background: var(--panel-soft);
    }

    .month-tab {
      display: grid;
      gap: 2px;
      min-height: 42px;
      padding: 5px 4px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--text);
      text-align: center;
      box-shadow: var(--shadow-xs);
      transition: all var(--transition);
    }

    .month-tab strong {
      font-size: 11px;
      font-weight: 700;
      line-height: 1.2;
      color: var(--text-bright);
    }

    .month-tab span {
      color: var(--muted);
      font-size: 10px;
      font-weight: 600;
    }

    .month-tab.active {
      border-color: var(--primary-border);
      background: linear-gradient(135deg, var(--primary), var(--primary-light));
      box-shadow: 0 4px 14px rgba(27, 110, 143, 0.28);
    }

    .month-tab.active strong,
    .month-tab.active span {
      color: rgba(255, 255, 255, 0.95);
    }

    /* ── Calendar Grid ──────────────────────────────────── */

    .weekdays, .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .weekdays div {
      padding: 9px 8px;
      border-bottom: 1px solid var(--line);
      color: var(--muted-mid);
      font-size: 11px;
      font-weight: 700;
      text-align: center;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      background: var(--panel-soft);
    }

    .weekdays div:first-child,
    .day-number.sunday,
    .day-number.holiday { color: var(--red); }

    .weekdays div:last-child,
    .day-number.saturday { color: var(--primary); }

    .day-number.saturday.holiday { color: var(--red); }

    .calendar-cell {
      min-height: 122px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--panel);
      transition: background var(--transition);
    }

    .calendar-cell:nth-child(7n) { border-right: 0; }

    .calendar-cell.outside { background: var(--panel-soft); }

    .calendar-cell.duplicate-people-day {
      border-color: var(--amber-border);
      background: rgba(212, 101, 26, 0.18);
    }

    .calendar-cell.duplicate-people-day .day-button:hover,
    .calendar-cell.duplicate-people-day .day-button:focus-visible {
      background: rgba(212, 101, 26, 0.24);
    }

    .calendar-cell.drop-ready {
      outline: 2px solid var(--primary);
      outline-offset: -2px;
      background: var(--primary-softer);
    }

    .day-button {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
      min-height: 122px;
      padding: 8px 7px;
      border: 0;
      background: transparent;
      color: inherit;
      text-align: left;
      transition: background var(--transition);
    }

    .day-button:hover, .day-button:focus-visible {
      outline: none;
      background: var(--primary-softer);
    }

    .day-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 4px;
    }

    .day-flags {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 3px;
      flex-wrap: wrap;
    }

    .day-number {
      font-size: 15px;
      font-weight: 800;
      line-height: 1;
      color: var(--text-bright);
    }

    .count {
      min-width: 20px;
      height: 20px;
      padding: 0 5px;
      border-radius: 999px;
      background: var(--primary);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      line-height: 20px;
      text-align: center;
      box-shadow: 0 2px 6px rgba(27, 110, 143, 0.35);
    }

    .today-mark {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      padding: 2px 7px;
      border-radius: 999px;
      background: var(--amber-soft);
      border: 1px solid var(--amber-border);
      color: var(--amber);
      font-size: 10px;
      font-weight: 700;
    }

    .holiday-mark {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      max-width: 80px;
      padding: 2px 6px;
      border-radius: 999px;
      background: var(--red-soft);
      border: 1px solid var(--red-border);
      color: var(--red);
      font-size: 10px;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .events { display: grid; gap: 4px; min-height: 0; width: 100%; }

    .event {
      display: grid;
      gap: 1px;
      padding: 6px 8px;
      border-left: 3px solid var(--primary);
      border-radius: 0 5px 5px 0;
      background: var(--primary-soft);
      cursor: grab;
      transition: all var(--transition);
    }

    .event:hover {
      background: rgba(27, 110, 143, 0.13);
      box-shadow: var(--shadow-xs);
    }

    .event:active { cursor: grabbing; }
    .event.dragging { opacity: 0.4; }

    .event strong, .event span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .event strong {
      color: var(--text-bright);
      font-size: 11px;
      font-weight: 700;
    }

    .event span {
      color: var(--muted-dark);
      font-size: 10px;
      font-weight: 500;
    }

    .event .event-people {
      color: var(--green);
      font-weight: 700;
      font-size: 10px;
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
      word-break: keep-all;
      overflow-wrap: anywhere;
    }

    .event .people-missing { color: var(--red); }

    .event .event-note {
      color: var(--amber);
      font-weight: 700;
      font-size: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .more {
      color: var(--primary);
      font-size: 10px;
      font-weight: 700;
      padding: 2px 4px;
    }

    /* ── Person Filter ──────────────────────────────────── */

    .person-filter {
      display: grid;
      gap: 8px;
      padding: 10px 16px;
      border-top: 1px solid var(--line);
      background: var(--panel-soft);
    }

    .person-filter-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted-mid);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .person-filter-buttons { display: flex; flex-wrap: wrap; gap: 5px; }

    .person-filter-button {
      min-height: 28px;
      padding: 4px 12px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: var(--panel);
      color: var(--muted-dark);
      font-size: 12px;
      font-weight: 600;
      box-shadow: var(--shadow-xs);
      transition: all var(--transition);
    }

    .person-filter-button:hover {
      border-color: var(--primary-border);
      color: var(--primary);
      background: var(--primary-softer);
    }

    .person-filter-button.active {
      border-color: var(--green-border);
      background: linear-gradient(135deg, var(--green), var(--green-light));
      color: #fff;
      box-shadow: 0 3px 10px rgba(31, 138, 98, 0.28);
    }

    .person-filter-empty {
      color: var(--muted);
      font-size: 12px;
      font-weight: 500;
    }

    /* ── Agenda Panel ───────────────────────────────────── */

    .agenda-head {
      display: grid;
      gap: 12px;
      padding: 18px 18px 14px;
      background: var(--panel-soft);
      border-bottom: 1px solid var(--line);
    }

    .agenda-head h2 {
      font-size: 16px;
      font-weight: 900;
      letter-spacing: -0.02em;
      color: var(--text-bright);
    }

    .agenda-tools {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
      align-items: center;
    }

    .memo-panel {
      display: grid;
      gap: 8px;
      padding: 12px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      background: var(--field);
    }

    .memo-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .memo-status {
      min-height: 18px;
      color: var(--green);
      font-size: 11px;
      font-weight: 700;
    }

    .memo-status[data-type="warn"] {
      color: var(--red);
    }

    .agenda-list {
      display: grid;
      align-content: start;
      grid-auto-rows: max-content;
      gap: 6px;
      flex: 1;
      min-height: 0;
      max-height: none;
      overflow: auto;
      padding: 14px;
      scrollbar-width: thin;
      scrollbar-color: var(--line-strong) transparent;
    }

    .agenda-list::-webkit-scrollbar { width: 4px; }
    .agenda-list::-webkit-scrollbar-track { background: transparent; }
    .agenda-list::-webkit-scrollbar-thumb {
      background: var(--line-strong);
      border-radius: 2px;
    }

    .agenda-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      overflow: hidden;
      box-shadow: var(--shadow-xs);
      transition: all var(--transition);
    }

    .agenda-card:hover {
      border-color: var(--primary-border);
      box-shadow: var(--shadow-sm);
      transform: translateX(2px);
    }

    .agenda-card button {
      display: grid;
      gap: 3px;
      width: 100%;
      padding: 12px 14px;
      border: 0;
      background: transparent;
      color: inherit;
      text-align: left;
      transition: background var(--transition);
    }

    .agenda-card button:hover { background: var(--primary-softer); }

    .agenda-date {
      color: var(--primary);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .agenda-title {
      color: var(--text-bright);
      font-size: 14px;
      font-weight: 700;
    }

    .agenda-meta {
      color: var(--muted-mid);
      font-size: 12px;
      font-weight: 500;
    }

    .empty-state {
      padding: 28px 16px;
      border: 1.5px dashed var(--line-strong);
      border-radius: var(--radius);
      color: var(--muted);
      font-size: 13px;
      font-weight: 500;
      text-align: center;
      background: var(--field);
    }

    /* ── Dialog / Modal ─────────────────────────────────── */

    dialog {
      position: fixed;
      width: min(660px, calc(100% - 28px));
      max-height: calc(100dvh - 28px);
      padding: 0;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-lg);
      background: var(--panel);
      color: var(--text);
      box-shadow: var(--shadow-modal);
      overflow: hidden auto;
      scrollbar-width: thin;
      scrollbar-color: var(--line-strong) transparent;
    }

    dialog.dragged { margin: 0; }
    dialog.is-dragging { user-select: none; }

    dialog::backdrop {
      background: rgba(15, 34, 50, 0.45);
      backdrop-filter: blur(4px);
    }

    dialog.dialog-fallback-open {
      display: block;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 1000;
    }

    body.dialog-fallback-active::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 999;
      background: rgba(15, 34, 50, 0.45);
      backdrop-filter: blur(4px);
    }

    .modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 22px;
      background: var(--panel-soft);
      border-bottom: 1px solid var(--line-strong);
      cursor: move;
      touch-action: none;
      user-select: none;
    }

    .modal-head h2 {
      font-size: 18px;
      font-weight: 900;
      letter-spacing: -0.025em;
      color: var(--text-bright);
    }

    .close-button {
      display: inline-grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--muted-dark);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      touch-action: auto;
      box-shadow: var(--shadow-xs);
      transition: all var(--transition);
    }

    .close-button:hover {
      border-color: var(--red-border);
      color: var(--red);
      background: var(--red-soft);
    }

    .modal-body { padding: 18px 22px 22px; }

    .memo-dialog {
      width: min(980px, calc(100% - 16px));
      max-height: calc(100dvh - 12px);
    }

    .memo-dialog .modal-body {
      display: grid;
      gap: 12px;
      padding: 16px;
    }

    .memo-workspace {
      display: grid;
      grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
      gap: 12px;
      min-height: min(68vh, 620px);
    }

    .memo-sidebar,
    .memo-editor {
      min-width: 0;
      min-height: 0;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      background: var(--field);
      box-shadow: var(--shadow-xs);
    }

    .memo-sidebar {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 10px;
    }

    .memo-search-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 112px;
      gap: 8px;
    }

    .memo-search-row input,
    .memo-search-row select,
    .memo-editor-head input,
    .memo-editor-head select {
      min-height: 34px;
      font-size: 12px;
    }

    .memo-list {
      display: grid;
      gap: 7px;
      overflow: auto;
      padding-right: 2px;
    }

    .memo-list-item {
      display: grid;
      gap: 5px;
      width: 100%;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--text);
      text-align: left;
      cursor: pointer;
      box-shadow: var(--shadow-xs);
      transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
    }

    .memo-list-item:hover,
    .memo-list-item.active {
      border-color: #f8d9ba;
      background: #fff8f0;
      box-shadow: var(--shadow-sm);
    }

    .memo-list-item.pinned {
      border-left: 4px solid var(--primary);
    }

    .memo-list-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
      font-weight: 800;
      color: var(--text-bright);
    }

    .memo-list-preview {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      color: var(--muted-dark);
      font-size: 11px;
      line-height: 1.35;
    }

    .memo-list-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      color: var(--muted-mid);
      font-size: 10px;
      font-weight: 700;
    }

    .memo-empty {
      padding: 18px 10px;
      border: 1px dashed var(--line-strong);
      border-radius: var(--radius-sm);
      color: var(--muted-dark);
      font-size: 12px;
      font-weight: 700;
      text-align: center;
      background: var(--panel);
    }

    .memo-editor {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 12px;
    }

    .memo-editor-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 118px 140px auto;
      gap: 8px;
      align-items: center;
    }

    .memo-pin-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      min-height: 34px;
      padding: 0 10px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--muted-dark);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
      box-shadow: var(--shadow-xs);
      cursor: pointer;
    }

    .memo-pin-label input {
      width: 14px;
      height: 14px;
      min-height: 0;
      margin: 0;
      padding: 0;
      accent-color: var(--primary);
    }

    .memo-dialog #memoInput {
      flex: 1;
      min-height: 360px;
      line-height: 1.6;
    }

    .memo-action-buttons {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    .map-dialog {
      width: min(1180px, calc(100% - 16px));
      max-height: calc(100dvh - 12px);
    }

    .annual-schedule-dialog {
      width: min(760px, calc(100% - 20px));
    }

    .annual-schedule-dialog .modal-body {
      display: grid;
      gap: 12px;
    }

    .annual-schedule-list {
      display: grid;
      gap: 12px;
      max-height: min(68vh, 640px);
      overflow: auto;
      padding-right: 2px;
    }

    .annual-month-section {
      display: grid;
      gap: 7px;
      padding: 10px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      background: var(--field);
    }

    .annual-month-title {
      color: var(--text-bright);
      font-size: 14px;
      font-weight: 900;
    }

    .annual-entry-item {
      display: grid;
      gap: 3px;
      width: 100%;
      padding: 9px 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: inherit;
      font: inherit;
      text-align: left;
      box-shadow: var(--shadow-xs);
      cursor: pointer;
      transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
    }

    .annual-entry-item:hover {
      border-color: #f8d9ba;
      background: #fff8f0;
      box-shadow: var(--shadow-sm);
    }

    .annual-entry-title {
      color: var(--text-bright);
      font-size: 13px;
      font-weight: 800;
    }

    .annual-entry-meta {
      color: var(--muted-dark);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.35;
    }

    .map-dialog .modal-head {
      cursor: default;
      touch-action: auto;
    }

    .map-dialog .modal-body {
      display: grid;
      gap: 12px;
    }

    .map-tools {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 8px;
      align-items: center;
    }

    .map-frame-wrap {
      position: relative;
      height: min(720px, calc(100dvh - 205px));
      min-height: 520px;
      overflow: hidden;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      background: var(--field);
    }

    .map-frame-wrap iframe {
      width: 100%;
      height: 100%;
      border: 0;
    }

    .map-canvas {
      width: 100%;
      height: 100%;
    }

    .map-canvas .leaflet-tooltip {
      border: 1px solid var(--red-border);
      border-radius: 999px;
      background: var(--panel);
      box-shadow: var(--shadow-xs);
      color: var(--text-bright);
      font-size: 12px;
      font-weight: 700;
    }

    .map-canvas .leaflet-tooltip.selected-map-tooltip {
      border-color: var(--red);
      box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.16), var(--shadow-xs);
    }

    .map-dialog.marker-mode .map-canvas {
      cursor: crosshair;
    }

    .leaflet-map-marker {
      background: transparent;
      border: 0;
    }

    .map-click-layer {
      position: absolute;
      inset: 0;
      cursor: crosshair;
      pointer-events: none;
      z-index: 1;
    }

    .map-dialog.marker-mode .map-click-layer {
      pointer-events: auto;
    }

    .map-marker {
      position: absolute;
      display: grid;
      justify-items: center;
      gap: 3px;
      width: max-content;
      max-width: 180px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--text-bright);
      transform: translate(-50%, -100%);
      z-index: 2;
    }

    .map-marker-pin {
      position: relative;
      width: 18px;
      height: 18px;
      border: 3px solid var(--red);
      border-radius: 50% 50% 50% 0;
      background: #fff;
      box-shadow: 0 4px 12px rgba(192, 57, 43, 0.28);
      transform: rotate(-45deg);
    }

    .map-marker-pin::after {
      content: '';
      position: absolute;
      inset: 3px;
      border-radius: 50%;
      background: var(--red);
    }

    .map-marker-label {
      max-width: 180px;
      padding: 3px 7px;
      border: 1px solid var(--red-border);
      border-radius: 999px;
      background: var(--panel);
      box-shadow: var(--shadow-xs);
      color: var(--text-bright);
      font-size: 12px;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .map-marker.selected .map-marker-label {
      border-color: var(--red);
      box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.16), var(--shadow-xs);
    }

    .map-editor {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 8px;
      align-items: center;
    }

    .map-status {
      color: var(--muted-dark);
      font-size: 12px;
      font-weight: 600;
    }

    /* ── Entry List ─────────────────────────────────────── */

    .entry-list { display: grid; gap: 8px; margin-bottom: 18px; }

    .entry-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: var(--shadow-xs);
      transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
    }

    .entry-row:hover {
      background: #fff8f0;
      border-color: #f8d9ba;
      box-shadow: var(--shadow-sm);
    }

    .entry-row.selected {
      background: #fff8f0;
      border-color: var(--red);
      box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.16), var(--shadow-sm);
    }

    .entry-row.empty {
      display: block;
      color: var(--muted);
      font-size: 13px;
      font-weight: 500;
      text-align: center;
      padding: 16px;
      background: var(--field);
    }

    .entry-title {
      margin-bottom: 8px;
      font-size: 15px;
      font-weight: 700;
      color: var(--text-bright);
    }

    .entry-tags { display: flex; flex-wrap: wrap; gap: 5px; }

    .tag {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 3px 9px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
    }

    .tag.site {
      background: var(--primary-soft);
      border: 1px solid var(--primary-border);
      color: var(--primary-dark);
    }

    .tag.people {
      background: var(--green-soft);
      border: 1px solid var(--green-border);
      color: var(--green);
    }

    .tag.people-missing {
      position: relative;
      min-width: 88px;
      overflow: hidden;
      background: var(--red-soft);
      border-color: var(--red-border);
      color: var(--red);
    }

    .tag.people-missing::before,
    .tag.people-missing::after {
      content: "인원 미입력";
      position: absolute;
      top: 50%;
      left: 9px;
      color: var(--red);
      white-space: nowrap;
      transform: translateY(-50%);
      animation: missingPeopleSlide 2.2s linear infinite;
    }

    .tag.people-missing::after {
      animation-delay: -1.1s;
    }

    .tag.people-missing {
      color: transparent;
    }

    @keyframes missingPeopleSlide {
      0% { transform: translate(100%, -50%); }
      100% { transform: translate(-120%, -50%); }
    }

    .modal-people-tag {
      gap: 4px;
      flex-wrap: wrap;
      white-space: normal;
    }

    .modal-person-name {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      white-space: nowrap;
    }

    .schedule-duplicate-badge {
      display: inline-flex;
      align-items: center;
      color: var(--red);
      font-weight: 900;
      animation: scheduleDuplicateBlink 0.75s ease-in-out infinite;
    }

    @keyframes scheduleDuplicateBlink {
      0%, 100% {
        opacity: 1;
        text-shadow: 0 0 0 rgba(192, 57, 43, 0);
      }
      50% {
        opacity: 0.25;
        text-shadow: 0 0 8px rgba(192, 57, 43, 0.55);
      }
    }

    .entry-actions { display: flex; align-items: flex-start; gap: 5px; }

    .clone-dialog {
      width: min(380px, calc(100% - 28px));
    }

    .month-delete-dialog {
      width: min(520px, calc(100% - 28px));
    }

    .month-delete-dialog .modal-body {
      display: grid;
      gap: 14px;
    }

    .month-delete-summary {
      display: grid;
      gap: 5px;
      padding: 12px;
      border: 1px solid var(--red-border);
      border-radius: var(--radius);
      background: var(--red-soft);
      color: var(--red);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.45;
    }

    .month-delete-summary strong {
      color: var(--red-light);
      font-size: 16px;
    }

    .month-delete-list {
      display: grid;
      gap: 7px;
      max-height: min(260px, calc(100dvh - 310px));
      overflow: auto;
      padding-right: 2px;
    }

    .month-delete-item {
      display: grid;
      gap: 3px;
      padding: 9px 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--panel);
      box-shadow: var(--shadow-xs);
    }

    .month-delete-title {
      color: var(--text-bright);
      font-size: 13px;
      font-weight: 800;
    }

    .month-delete-meta {
      color: var(--muted-dark);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.35;
    }

    .duplicate-people-dialog {
      width: min(460px, calc(100% - 28px));
    }

    .duplicate-people-dialog .modal-body {
      display: grid;
      gap: 14px;
    }

    .duplicate-people-summary {
      color: var(--muted-dark);
      font-size: 13px;
      font-weight: 700;
    }

    .duplicate-people-list {
      display: grid;
      gap: 8px;
      max-height: min(420px, calc(100dvh - 230px));
      overflow: auto;
    }

    .duplicate-people-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 4px;
      padding: 10px 12px;
      border: 1px solid var(--red-border);
      border-radius: var(--radius-sm);
      background: var(--red-soft);
    }

    .duplicate-people-info {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .duplicate-people-date {
      color: var(--text-bright);
      font-size: 13px;
      font-weight: 900;
    }

    .duplicate-people-names {
      color: var(--red);
      font-size: 13px;
      font-weight: 800;
    }

    .clone-form {
      display: grid;
      gap: 14px;
    }

    .clone-form label {
      display: grid;
      gap: 6px;
      font-size: 12px;
      font-weight: 700;
      color: var(--muted-dark);
    }

    .small-button {
      min-height: 30px;
      padding: 4px 10px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--muted-dark);
      font-size: 12px;
      font-weight: 600;
      box-shadow: var(--shadow-xs);
      transition: all var(--transition);
    }

    .small-button:hover {
      border-color: var(--primary-border);
      color: var(--primary);
      background: var(--primary-softer);
    }

    /* ── Form ───────────────────────────────────────────── */

    form {
      display: grid;
      gap: 14px;
      padding: 16px;
      border: 1px solid var(--primary);
      border-radius: var(--radius);
      background: var(--primary-softer);
      box-shadow: 0 0 0 2px rgba(27, 110, 143, 0.08);
    }

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

    .people-editor {
      display: grid;
      grid-column: 1 / -1;
      gap: 8px;
      padding: 14px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      background: var(--field);
    }

    .people-editor-head, .person-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .people-editor-head { justify-content: space-between; }

    .people-editor-title {
      color: var(--muted-dark);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    #peopleFields { display: grid; gap: 7px; }
    .person-row input { flex: 1; min-width: 0; }
    .full-field { grid-column: 1 / -1; }

    label {
      display: grid;
      gap: 6px;
      color: var(--muted-dark);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .form-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    .hidden { display: none !important; }

    /* ── Animations ─────────────────────────────────────── */

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes slideIn {
      from { opacity: 0; transform: translateX(-8px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    .stat-card { animation: fadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
    .stat-card:nth-child(1) { animation-delay: 0.05s; }
    .stat-card:nth-child(2) { animation-delay: 0.12s; }
    .stat-card:nth-child(3) { animation-delay: 0.19s; }
    .stat-card:nth-child(4) { animation-delay: 0.26s; }

    .calendar-panel { animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
    .agenda-panel   { animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }

    /* ── Responsive ─────────────────────────────────────── */

    @media (max-width: 1160px) {
      .workspace { grid-template-columns: 1fr; }
      .agenda-list { max-height: none; }
    }

    @media (max-width: 880px) {
      main { width: min(100% - 24px, 1400px); padding-top: 20px; }
      .app-header, .toolbar { align-items: stretch; flex-direction: column; }
      .sub-info { justify-content: flex-start; }
      .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .controls { justify-content: flex-start; }
      .memo-workspace { grid-template-columns: 1fr; min-height: auto; }
      .memo-list { max-height: 220px; }
      .memo-editor-head { grid-template-columns: 1fr; }
      .month-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
      .calendar-cell, .day-button { min-height: 118px; }
      .form-grid, .entry-row { grid-template-columns: 1fr; }
      .entry-actions { justify-content: flex-end; }
    }

    @media (max-width: 560px) {
      .stats, .month-tabs { grid-template-columns: 1fr 1fr; }
      .calendar-panel { overflow-x: auto; }
      .weekdays, .calendar-grid { min-width: 720px; }
    }
    /* ── 클로드지도 Button ──────────────────────────────── */
    .claude-map-button {
      min-height: 34px;
      padding: 6px 12px;
      border: 1px solid rgba(31, 138, 98, 0.3);
      border-radius: var(--radius-sm);
      background: var(--green-soft);
      color: var(--green);
      font-weight: 700;
      font-size: 13px;
      transition: all var(--transition);
      letter-spacing: -0.01em;
      box-shadow: var(--shadow-xs);
    }
    .claude-map-button:hover {
      border-color: var(--green-border);
      background: rgba(31, 138, 98, 0.14);
      color: var(--green-light);
      box-shadow: 0 3px 10px rgba(31, 138, 98, 0.22);
      transform: translateY(-1px);
    }

    /* ── 클로드지도 Modal ────────────────────────────────── */
    #claudeMapModal {
      width: min(calc(100vw - 24px), 2304px);
      max-width: calc(100% - 24px);
      max-height: calc(100dvh - 16px);
    }
    .claude-map-modal-body {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: minmax(0, 1fr) auto;
      gap: 0;
      height: min(calc(100dvh - 72px), 1500px);
      max-height: calc(100dvh - 72px);
      min-height: min(960px, calc(100dvh - 72px));
    }
    .claude-map-container {
      position: relative;
      overflow: hidden;
      min-height: 0;
      border-bottom: 1px solid var(--line);
    }
    #claudeLeafletMap {
      width: 100%;
      height: 100%;
    }
    /* Leaflet popup override (클로드지도) */
    #claudeMapModal .leaflet-popup-content-wrapper {
      border-radius: var(--radius) !important;
      box-shadow: var(--shadow) !important;
      font-family: "Noto Sans KR", system-ui, sans-serif !important;
      border: 1px solid var(--line-strong) !important;
      padding: 0 !important;
    }
    #claudeMapModal .leaflet-popup-content {
      margin: 0 !important;
      min-width: 200px;
    }
    #claudeMapModal .leaflet-popup-tip-container { display: none; }
    #claudeMapModal .leaflet-control-layers {
      font-family: "Noto Sans KR", system-ui, sans-serif;
      font-size: 10px;
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-xs);
      transform: scale(0.72);
      transform-origin: top left;
    }
    #claudeMapModal .leaflet-control-layers-expanded {
      padding: 4px 6px;
    }
    #claudeMapModal .leaflet-control-layers-list,
    #claudeMapModal .leaflet-control-layers-base,
    #claudeMapModal .leaflet-control-layers-overlays {
      margin: 0;
    }
    #claudeMapModal .leaflet-control-layers-separator {
      margin: 3px 0;
    }
    #claudeMapModal .leaflet-control-layers label {
      margin: 1px 0;
      line-height: 1.05;
    }
    #claudeMapModal .leaflet-control-layers label span {
      line-height: 1.05;
      white-space: nowrap;
    }
    #claudeMapModal .leaflet-control-layers-selector {
      width: 12px;
      height: 12px;
      min-height: 0;
      margin: 0 4px 0 0;
      padding: 0;
      border: 0;
      background: transparent;
      vertical-align: -2px;
    }
    .claude-airspace-legend {
      position: absolute;
      left: 12px;
      right: auto;
      bottom: 12px;
      z-index: 1300;
      display: none;
      width: min(168px, calc(100% - 24px));
      max-height: min(50%, calc(100% - 24px));
      overflow: auto;
      padding: 7px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.94);
      box-shadow: var(--shadow-xs);
      backdrop-filter: blur(8px);
      scrollbar-width: thin;
    }
    .claude-airspace-legend.visible {
      display: block;
    }
    .claude-map-zoom-hud {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 1300;
      padding: 6px 10px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      background: rgba(255, 255, 255, 0.94);
      box-shadow: var(--shadow-xs);
      backdrop-filter: blur(8px);
      font-size: 11px;
      font-weight: 700;
      color: var(--text-bright);
      font-feature-settings: "tnum";
      pointer-events: none;
      line-height: 1.2;
      white-space: nowrap;
    }
    html[data-theme="black"] .claude-map-zoom-hud {
      background: rgba(20, 24, 28, 0.92);
      border-color: rgba(255, 255, 255, 0.14);
      color: #f2f4f6;
    }
    #claudeMapModal .leaflet-top.leaflet-left {
      margin-top: 38px;
    }
    .claude-airspace-legend-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
      margin-bottom: 6px;
    }
    .claude-airspace-legend-actions {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .claude-airspace-legend-button {
      min-height: 24px;
      padding: 4px 7px;
      border: 0;
      border-radius: var(--radius-sm);
      color: #fff;
      font: inherit;
      font-size: 10px;
      font-weight: 700;
      box-shadow: var(--shadow-xs);
    }
    .claude-airspace-legend-button.all {
      background: #2F3B48;
    }
    .claude-airspace-legend-button.close {
      background: var(--red-light);
    }
    .claude-airspace-legend-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4px;
    }
    .claude-airspace-legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
      color: var(--text);
      font-size: 10px;
      font-weight: 700;
      line-height: 1.15;
    }
    .claude-airspace-legend-check {
      width: 11px;
      height: 11px;
      min-height: 0;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      flex-shrink: 0;
      accent-color: var(--primary);
    }
    .claude-airspace-swatch {
      width: 14px;
      height: 9px;
      flex-shrink: 0;
      border: 1px solid var(--swatch-color);
      border-radius: 2px;
      background: color-mix(in srgb, var(--swatch-color) 18%, #fff);
    }
    .claude-airspace-swatch.stripe {
      background: linear-gradient(90deg, #f6b0af 0 33%, #c3ceb9 33% 66%, #8fd1e8 66% 100%);
      border-color: #b9c9d4;
    }
    .claude-airspace-legend-note {
      margin-top: 5px;
      color: var(--muted-dark);
      font-size: 9px;
      font-weight: 600;
      line-height: 1.25;
    }
    .claude-map-popup-form {
      padding: 14px;
      display: grid;
      gap: 10px;
    }
    .claude-map-popup-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--muted-dark);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 10px 14px 0;
    }
    .claude-map-popup-input {
      width: 100%;
      min-height: 36px;
      padding: 7px 10px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      background: var(--field);
      color: var(--text);
      font: inherit;
      font-size: 13px;
    }
    .claude-map-popup-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px var(--primary-soft);
    }
    .claude-color-picker { display: grid; gap: 8px; }
    .claude-color-picker > span:first-child { font-size: 11px; font-weight: 600; color: var(--muted-mid); }
    .claude-icon-type-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      width: 100%;
    }
    .claude-icon-type-button {
      width: 44px;
      height: 44px;
      padding: 3px;
      border: 2px solid var(--line-strong);
      border-radius: var(--radius-sm);
      background: var(--panel);
      cursor: pointer;
      transition: all var(--transition);
      flex-shrink: 0;
    }
    .claude-icon-type-button img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      pointer-events: none;
    }
    .claude-icon-type-button:hover { border-color: var(--primary-border); }
    .claude-icon-type-button.selected {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px var(--primary-soft);
    }
    .claude-pin-color-row {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;
    }
    .claude-pin-color-row span { font-size: 11px; font-weight: 600; color: var(--muted-mid); flex-shrink: 0; }
    .claude-color-picker.equipment-selected .claude-pin-color-row { opacity: 0.45; }
    .claude-equipment-marker-icon { background: transparent !important; border: 0 !important; }
    .claude-pending-marker,
    .claude-pending-marker * { pointer-events: none !important; }
    .claude-map-marker-dot.is-equipment {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      background: var(--panel);
      border: 1px solid var(--line);
      overflow: hidden;
      box-shadow: var(--shadow-xs);
      flex-shrink: 0;
    }
    .claude-map-marker-dot.is-equipment.is-wide { width: 44px; }
    .claude-map-marker-dot.is-equipment img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .claude-color-dot {
      width: 20px; height: 20px;
      border-radius: 50%;
      border: 2px solid transparent;
      cursor: pointer;
      transition: transform var(--transition), border-color var(--transition);
    }
    .claude-color-dot:hover { transform: scale(1.2); }
    .claude-color-dot.selected { border-color: var(--text-bright); transform: scale(1.1); }
    .claude-map-popup-actions { display: flex; gap: 6px; }
    .claude-map-popup-save {
      flex: 1; min-height: 34px;
      border: none; border-radius: var(--radius-sm);
      background: linear-gradient(135deg, var(--primary), var(--primary-light));
      color: #fff; font: inherit; font-size: 13px; font-weight: 700;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(27, 110, 143, 0.3);
      transition: all var(--transition);
    }
    .claude-map-popup-save:hover {
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      box-shadow: 0 4px 14px rgba(27, 110, 143, 0.4);
    }
    .claude-map-popup-cancel {
      min-height: 34px; padding: 0 12px;
      border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
      background: var(--panel); color: var(--muted-dark);
      font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
      transition: all var(--transition);
    }
    .claude-map-popup-cancel:hover { border-color: var(--red-border); color: var(--red); }
    /* Marker bottom panel */
    .claude-map-sidebar {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--panel-soft);
      flex-shrink: 0;
      max-height: min(340px, 38vh);
      border-top: 1px solid var(--line-strong);
    }
    .claude-map-sidebar-toolbar {
      display: grid;
      grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
      align-items: stretch;
      flex-shrink: 0;
      border-bottom: 1px solid var(--line);
    }
    .claude-map-sidebar-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 14px;
      background: var(--panel);
      flex-shrink: 0;
      border-right: 1px solid var(--line);
    }
    .claude-map-sidebar-head h3 { font-size: 13px; font-weight: 700; color: var(--text-bright); }
    .claude-map-search {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 7px;
      padding: 10px 12px;
      background: var(--panel-soft);
      flex-shrink: 0;
      align-content: center;
    }
    .claude-map-search-label {
      align-self: center;
      color: var(--muted-mid);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }
    .claude-map-search input {
      min-width: 0;
      min-height: 34px;
      padding: 7px 10px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--text);
      font: inherit;
      font-size: 12px;
      font-weight: 600;
    }
    .claude-map-search button {
      min-height: 34px;
      padding: 6px 10px;
      border: 1px solid var(--primary-border);
      border-radius: var(--radius-sm);
      background: linear-gradient(135deg, var(--primary), var(--primary-light));
      color: #fff;
      font: inherit;
      font-size: 12px;
      font-weight: 700;
      box-shadow: 0 2px 8px rgba(27, 110, 143, 0.22);
    }
    .claude-map-search-status {
      grid-column: 1 / -1;
      min-height: 15px;
      color: var(--muted-dark);
      font-size: 11px;
      font-weight: 600;
      line-height: 1.35;
    }
    .claude-map-marker-search {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 6px;
      align-items: center;
      padding: 8px 12px;
      border-bottom: 1px solid var(--line);
      background: var(--panel);
      flex-shrink: 0;
    }
    .claude-map-marker-search input {
      min-width: 0;
      min-height: 32px;
      padding: 6px 10px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      background: var(--panel-soft);
      color: var(--text);
      font: inherit;
      font-size: 12px;
      font-weight: 600;
    }
    .claude-map-marker-search input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px var(--primary-soft);
    }
    .claude-map-marker-search-clear {
      min-height: 32px;
      padding: 0 10px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      background: var(--panel-soft);
      color: var(--muted-dark);
      font: inherit;
      font-size: 12px;
      font-weight: 700;
    }
    .claude-map-marker-search-clear:hover {
      border-color: var(--primary-border);
      color: var(--primary);
    }
    .claude-map-marker-search-status {
      grid-column: 1 / -1;
      min-height: 14px;
      color: var(--muted-mid);
      font-size: 10px;
      font-weight: 600;
    }
    .claude-map-marker-item.search-hidden { display: none; }
    .claude-map-marker-item.search-match {
      border-color: var(--primary-border);
      box-shadow: 0 0 0 2px var(--primary-soft);
    }
    .claude-map-marker-count {
      display: inline-flex; align-items: center;
      min-width: 22px; height: 22px; padding: 0 6px;
      border-radius: 999px; background: var(--primary);
      color: #fff; font-size: 11px; font-weight: 700; text-align: center;
    }
    .claude-map-marker-list {
      flex: 1;
      min-height: 92px;
      max-height: 148px;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 10px 12px;
      display: flex;
      flex-direction: row;
      gap: 8px;
      align-items: stretch;
      scrollbar-width: thin;
      scrollbar-color: var(--line-strong) transparent;
    }
    .claude-map-marker-empty {
      flex: 1;
      min-width: 100%;
      padding: 20px 12px;
      text-align: center;
      color: var(--muted); font-size: 12px; font-weight: 500;
      border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
      background: var(--field);
    }
    .claude-map-marker-item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      flex: 0 0 min(220px, 42vw);
      width: min(220px, 42vw);
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--panel);
      box-shadow: var(--shadow-xs);
      cursor: pointer;
      transition: all var(--transition);
    }
    .claude-map-marker-item:hover { border-color: var(--primary-border); box-shadow: var(--shadow-sm); }
    .claude-map-marker-dot {
      width: 12px; height: 12px; border-radius: 50%;
      flex-shrink: 0; margin-top: 2px; box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    }
    .claude-map-marker-info { flex: 1; min-width: 0; }
    .claude-map-marker-name {
      font-size: 13px; font-weight: 700; color: var(--text-bright);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .claude-map-marker-coords { font-size: 10px; font-weight: 500; color: var(--muted); font-feature-settings: 'tnum'; }
    .claude-map-marker-delete {
      display: inline-grid; place-items: center;
      width: 24px; height: 24px;
      border: 1px solid transparent; border-radius: 4px;
      background: transparent; color: var(--muted); font-size: 14px;
      cursor: pointer; flex-shrink: 0; transition: all var(--transition);
    }
    .claude-map-marker-delete:hover { border-color: var(--red-border); background: var(--red-soft); color: var(--red); }
    .claude-map-hint {
      display: flex; align-items: center; gap: 6px;
      padding: 10px 14px; border-top: 1px solid var(--line);
      background: var(--field); color: var(--muted-mid);
      font-size: 11px; font-weight: 500; flex-shrink: 0;
    }
    .claude-map-hint::before { content: '💡'; font-size: 13px; flex-shrink: 0; }
    .claude-map-clear-button {
      min-height: 26px; padding: 3px 9px;
      border: 1px solid var(--red-border); border-radius: var(--radius-sm);
      background: var(--red-soft); color: var(--red);
      font-size: 11px; font-weight: 600; cursor: pointer; transition: all var(--transition);
    }
    .claude-map-clear-button:hover { background: rgba(192, 57, 43, 0.14); }
    @media (max-width: 720px) {
      #claudeMapModal {
        width: calc(100% - 12px);
      }
      .claude-map-modal-body {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(360px, 1fr) auto;
        height: calc(100dvh - 56px);
        min-height: 0;
        max-height: calc(100dvh - 56px);
      }
      .claude-map-container { border-bottom: 1px solid var(--line); }
      .claude-map-sidebar-toolbar {
        grid-template-columns: 1fr;
      }
      .claude-map-sidebar-head {
        border-right: none;
        border-bottom: 1px solid var(--line);
      }
      .claude-airspace-legend {
        max-height: 40%;
        padding: 6px;
      }
      .claude-airspace-legend-head {
        align-items: center;
        flex-direction: row;
      }
      .claude-map-sidebar { max-height: min(300px, 42vh); }
      .claude-map-marker-item {
        flex-basis: min(200px, 78vw);
        width: min(200px, 78vw);
      }
    }

    /* ── 일정 ↔ 지도 연동 ───────────────────────────────── */
    .site-field-wrap { display: grid; gap: 6px; }
    .site-field-row {
      display: flex;
      align-items: stretch;
      gap: 6px;
      flex-wrap: wrap;
    }
    .site-field-row input { flex: 1; min-width: 140px; }
    .site-map-button {
      min-height: 36px;
      padding: 0 10px;
      border: 1px solid var(--primary-border);
      border-radius: var(--radius-sm);
      background: var(--primary-soft);
      color: var(--primary);
      font: inherit;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
      transition: all var(--transition);
    }
    .site-map-button:hover {
      border-color: var(--primary);
      background: rgba(27, 110, 143, 0.14);
    }
    .site-map-button.is-linked {
      border-color: var(--green-border);
      background: var(--green-soft);
      color: var(--green);
    }
    .site-marker-status {
      min-height: 16px;
      color: var(--muted-mid);
      font-size: 11px;
      font-weight: 600;
      line-height: 1.35;
      text-transform: none;
      letter-spacing: 0;
    }
    .site-marker-status.linked { color: var(--green); }
    .site-marker-status.unlinked { color: var(--amber); }
    .site-marker-suggestions {
      display: grid;
      gap: 4px;
      max-height: 120px;
      overflow: auto;
    }
    .site-marker-suggest-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 6px 8px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--text);
      font-size: 12px;
      font-weight: 600;
      text-align: left;
      transition: all var(--transition);
    }
    .site-marker-suggest-item:hover {
      border-color: var(--primary-border);
      background: var(--primary-soft);
    }
    .site-marker-suggest-item span:last-child {
      color: var(--muted);
      font-size: 10px;
      font-weight: 600;
      flex-shrink: 0;
    }
    .claude-map-schedule-banner {
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 12px;
      border-bottom: 1px solid var(--amber-border);
      background: var(--amber-soft);
      color: var(--amber);
      font-size: 11px;
      font-weight: 700;
      flex-shrink: 0;
    }
    .claude-map-schedule-banner.visible { display: flex; }
    .claude-map-schedule-banner button {
      min-height: 26px;
      padding: 3px 8px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      background: var(--panel);
      color: var(--muted-dark);
      font: inherit;
      font-size: 11px;
      font-weight: 700;
    }
    .claude-map-marker-item.pick-mode { border-color: var(--primary-border); }
    .claude-map-marker-item.has-schedule { border-left: 3px solid var(--green); }
    .claude-map-marker-meta-row {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 3px;
    }
    .claude-map-marker-schedule-badge {
      display: inline-flex;
      align-items: center;
      min-height: 18px;
      padding: 0 6px;
      border-radius: 999px;
      background: var(--green-soft);
      color: var(--green);
      font-size: 10px;
      font-weight: 700;
    }
    .claude-map-marker-actions {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
      flex-direction: column;
    }
    .claude-map-marker-action {
      min-height: 24px;
      padding: 2px 7px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-sm);
      background: var(--panel-soft);
      color: var(--muted-dark);
      font: inherit;
      font-size: 10px;
      font-weight: 700;
      white-space: nowrap;
    }
    .claude-map-marker-action.primary {
      border-color: var(--primary-border);
      background: var(--primary-soft);
      color: var(--primary);
    }
    .claude-map-marker-action:hover {
      border-color: var(--primary-border);
      color: var(--primary);
    }
    .entry-map-button {
      min-height: 28px;
      padding: 0 8px;
      border: 1px solid var(--green-border);
      border-radius: var(--radius-sm);
      background: var(--green-soft);
      color: var(--green);
      font-size: 11px;
      font-weight: 700;
    }