/* ══════ Map Editor — サイト共通デザイン準拠 ══════ */
    .map-sidebar {
      width: 260px;
      background: var(--surface);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      flex-shrink: 0;
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
    }

    .map-sidebar::-webkit-scrollbar {
      width: 5px;
    }

    .map-sidebar::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 4px;
    }

    .map-section {
      padding: 14px 16px;
      border-bottom: 1px solid var(--border-light);
    }

    .map-section-hd {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-mid);
      letter-spacing: .8px;
      text-transform: uppercase;
      margin-bottom: 10px;
      cursor: pointer;
      user-select: none;
    }

    .map-section-hd i {
      font-size: 10px;
      color: var(--accent);
    }

    .map-section-hd .caret {
      margin-left: auto;
      transition: transform .2s;
      font-size: 9px;
      color: var(--text-light);
    }

    .map-section.collapsed .map-section-body {
      display: none;
    }

    .map-section.collapsed .caret {
      transform: rotate(-90deg);
    }

    .map-terrain-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 4px;
    }

    .map-terrain-swatch {
      position: relative;
      aspect-ratio: 1;
      border-radius: var(--radius);
      border: 2px solid var(--border);
      cursor: pointer;
      transition: all .15s;
      overflow: hidden;
    }

    .map-terrain-swatch:hover {
      border-color: var(--accent-light);
      transform: scale(1.06);
    }

    .map-terrain-swatch.active {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px var(--accent-muted);
    }

    .map-terrain-swatch .t-label {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(45, 37, 35, 0.7);
      color: #fff;
      font-size: 8px;
      text-align: center;
      padding: 1px 0;
      font-weight: 600;
      letter-spacing: .5px;
    }

    .map-stamp-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 5px;
    }

    .map-stamp-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      padding: 8px 4px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-mid);
      font-size: 10px;
      cursor: pointer;
      transition: all .15s;
      font-family: 'Noto Sans JP', sans-serif;
    }

    .map-stamp-btn:hover {
      background: var(--surface2);
      border-color: var(--accent-light);
      color: var(--text);
    }

    .map-stamp-btn.active {
      background: var(--accent-muted);
      border-color: var(--accent);
      color: var(--accent);
    }

    .map-stamp-btn i {
      font-size: 16px;
    }

    .map-tool-btn2 {
      display: flex;
      align-items: center;
      gap: 7px;
      width: 100%;
      padding: 8px 12px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-mid);
      font-size: 12px;
      cursor: pointer;
      transition: all .15s;
      font-family: 'Noto Sans JP', sans-serif;
      text-align: left;
    }

    .map-tool-btn2:hover {
      background: var(--surface2);
      border-color: var(--accent-light);
      color: var(--text);
    }

    .map-tool-btn2.active {
      background: var(--accent-muted) !important;
      border-color: var(--accent) !important;
      color: var(--accent) !important;
      font-weight: 600;
    }

    .map-tool-btn2 i {
      width: 16px;
      text-align: center;
      font-size: 12px;
    }

    .map-canvas-area {
      flex: 1;
      background: var(--surface2);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .map-zoom-badge {
      position: absolute;
      bottom: 14px;
      left: 14px;
      background: var(--surface);
      color: var(--text-mid);
      font-size: 11px;
      padding: 4px 10px;
      border-radius: 20px;
      pointer-events: none;
      font-family: monospace;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
    }

    .map-zoom-controls {
      position: absolute;
      bottom: 14px;
      right: 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      z-index: 10;
    }

    .map-zoom-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-mid);
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .15s;
      box-shadow: var(--shadow-sm);
    }

    .map-zoom-btn:hover {
      background: var(--accent-muted);
      border-color: var(--accent);
      color: var(--accent);
    }

    .map-editor-header {
      display: flex;
      align-items: center;
      padding: 0 20px;
      height: 68px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      gap: 10px;
      flex-shrink: 0;
    }

    .map-editor-header h2 {
      flex: 1;
      font-family: 'Zen Maru Gothic', sans-serif;
      font-size: 17px;
      color: var(--navy);
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .map-editor-header h2 i {
      color: var(--accent);
      font-size: 15px;
    }

    .map-hdr-btn {
      padding: 8px 14px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-mid);
      font-size: 12px;
      cursor: pointer;
      font-family: 'Noto Sans JP', sans-serif;
      transition: all .15s;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .map-hdr-btn:hover {
      background: var(--surface2);
      border-color: var(--accent-light);
      color: var(--text);
    }

    .map-hdr-btn.primary {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--on-accent);
      font-weight: 600;
    }

    .map-hdr-btn.primary:hover {
      background: var(--accent-light);
      border-color: var(--accent-light);
      color: var(--on-accent);
      box-shadow: 0 2px 10px rgba(217, 106, 75, 0.25);
    }

    .map-slider-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
    }

    .map-slider-row label {
      font-size: 10px;
      color: var(--text-light);
      white-space: nowrap;
    }

    .map-slider-row input[type=range] {
      flex: 1;
      accent-color: var(--accent);
      height: 4px;
    }

    .map-slider-row .sz-val {
      font-size: 11px;
      color: var(--accent);
      font-weight: 600;
      min-width: 22px;
      text-align: right;
      font-family: monospace;
    }

    #mapBrushPreview {
      display: none;
      position: absolute;
      border: 2px solid var(--accent);
      border-radius: 50%;
      pointer-events: none;
      z-index: 99;
      background: rgba(217, 106, 75, 0.1);
    }

    .map-fab {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-mid);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      cursor: pointer;
      box-shadow: var(--shadow-sm);
    }

    .map-fab:hover {
      background: var(--accent-muted);
      color: var(--accent);
      border-color: var(--accent);
    }

    .map-floating-actions {
      position: absolute;
      bottom: 60px;
      right: 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      z-index: 10;
    }

    /* 危険操作ボタン（全消去・削除） */
    .map-tool-btn2.danger,
    .map-tool-btn2.danger:hover {
      color: #C03030;
      border-color: #FFBBBB;
      background: #FFF5F5;
    }

    .map-tool-btn2.danger:hover {
      background: #FFEBEB;
      border-color: #E88A8A;
    }

    @media(max-width:768px) {
      #mapEditorLayout {
        flex-direction: column-reverse !important;
      }

      .map-sidebar {
        width: 100% !important;
        height: 38vh !important;
        max-height: 38vh !important;
        border-right: none !important;
        border-top: 1px solid var(--border);
        overflow-y: auto !important;
      }

      .map-editor-header {
        padding: 0 12px !important;
        height: 52px;
      }

      .map-editor-header .hdr-desktop {
        display: none !important;
      }

      .map-editor-header h2 {
        font-size: 14px;
      }
    }

    @media(min-width:769px) {
      .map-floating-actions {
        display: none
      }
    }