/* =========================================
       CSS変数 (カラーパレット・テーマ設定)
       ========================================= */
    :root {
      --bg-main: #0f172a;
      --bg-panel: #1e293b;
      --bg-panel-hover: #334155;
      --bg-nav: #020617;
      --text-main: #e2e8f0;
      --text-muted: #94a3b8;
      --border-color: #334155;
      --primary: #2563eb;
      --primary-hover: #1d4ed8;
      --success: #10b981;
      --danger: #ef4444;
      --canvas-bg: #1e293b;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    /* 100vh / 100vw の代わりにはみ出しを完全に防ぐ設定
    */
    html, body {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      overflow: hidden;
      background-color: var(--bg-main);
      color: var(--text-main);
      font-family: 'Helvetica Neue', Arial, sans-serif;
    }
    body {
      display: flex;
      flex-direction: row;
    }
    button { font-family: inherit; }
    .hidden { display: none !important; }

    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.5); }
    ::-webkit-scrollbar-thumb { background: rgba(51, 65, 85, 0.8); border-radius: 10px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(71, 85, 105, 1); }

    /* =========================================
       レイアウト構造
       ========================================= */
    @media (max-width: 768px) {
      body { flex-direction: column; }
    }

    /* モバイルヘッダーの堅牢化 */
    .mobile-header {
      display: none; min-height: 50px; background-color: var(--bg-nav);
      border-bottom: 1px solid var(--border-color);
      flex-direction: column; align-items: stretch; justify-content: flex-start;
      padding: 12px; z-index: 9999; flex-shrink: 0;
      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
      width: 100%;
      gap: 12px;
    }
    @media (max-width: 768px) { .mobile-header { display: flex; } }

    .mobile-header-row1 {
      display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: bold; font-size: 16px;
      width: 100%;
    }
    .mobile-header-row2 {
      display: flex; align-items: center; justify-content: center; gap: 12px;
      width: 100%;
    }
    .mobile-header-row3 {
      display: flex; align-items: center; justify-content: center; gap: 12px;
      width: 100%;
    }

    .icon-btn { background: var(--bg-panel); color: white; border: none; padding: 6px 8px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: bold;}
    .icon-btn.light { background: white; color: black; }
    .icon-btn.primary { background: var(--primary); color: white; }

    /* 編集可能なタイトル */
    .editable-title {
      cursor: text; padding: 2px 4px; border-radius: 4px; border: 1px solid transparent;
      outline: none; transition: background 0.2s, border 0.2s;
      display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      max-width: 100%; /* 親要素を超えない */
      -webkit-user-select: text;
      user-select: text;
    }
    .editable-title:hover { background: rgba(255,255,255,0.1); }
    .editable-title:focus { background: var(--bg-main); border-color: var(--primary); }

    /* サイドバー・ツールパネル */
    .sidebar-container { display: flex; height: 100%; z-index: 9999; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    .sidebar-inner { display: flex; height: 100%; background-color: var(--bg-panel); flex-direction: row; width: 100%; }

    .bottom-sheet-handle {
      display: none; height: 40px; background: var(--bg-panel);
      border-top-left-radius: 16px; border-top-right-radius: 16px;
      align-items: center; justify-content: center; cursor: pointer;
      position: relative; border-bottom: 1px solid var(--border-color); flex-shrink: 0;
    }
    .bottom-sheet-handle::before { content: ''; position: absolute; top: 8px; width: 40px; height: 4px; background: var(--text-muted); border-radius: 2px; }
    .bottom-sheet-title { font-size: 14px; font-weight: bold; color: var(--text-main); margin-top: 8px; }

    @media (max-width: 768px) {
      .sidebar-container {
        position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: 55vh;
        flex-direction: column; box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
        border-top-left-radius: 16px; border-top-right-radius: 16px;
      }
      .sidebar-container.collapsed { transform: translateY(calc(100% - 40px)); }
      .sidebar-inner { flex-direction: column; height: calc(100% - 40px); }
      .bottom-sheet-handle { display: flex; flex-direction: column; }
    }

    /* アイコンナビゲーション */
    .icon-nav {
      width: 64px; background-color: var(--bg-nav); border-right: 1px solid var(--border-color);
      display: flex; flex-direction: column; align-items: center; padding-top: 16px; flex-shrink: 0;
    }
    @media (max-width: 768px) {
      .icon-nav {
        flex-direction: row; width: 100%; height: auto; padding: 8px;
        border-right: none; border-bottom: 1px solid var(--border-color); justify-content: center; gap: 8px;
      }
    }
    .tab-btn {
      background: transparent; border: none; color: var(--text-muted); cursor: pointer;
      padding: 12px; border-radius: 12px; margin-bottom: 8px; transition: all 0.2s; display: flex; align-items: center; justify-content: center;
    }
    @media (max-width: 768px) { .tab-btn { margin-bottom: 0; padding: 8px 16px; } }
    .tab-btn:hover { color: white; background-color: var(--bg-panel); }
    .tab-btn.active { background-color: var(--primary); color: white; }

    /* パネルエリア */
    .panel-area { width: 320px; background-color: var(--bg-panel); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; }
    @media (max-width: 768px) { .panel-area { width: 100%; flex: 1; border-right: none; } }

    .panel-header { padding: 16px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
    @media (max-width: 768px) { .panel-header { display: none; } }
    .panel-title { font-size: 1.125rem; font-weight: bold; background: linear-gradient(to right, #60a5fa, #34d399); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; }

    .panel-content { flex: 1; position: relative; overflow: hidden; }
    .tab-pane { position: absolute; inset: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 16px; }
    .tab-pane.no-pad { padding: 0; }

    /* 検索フォーム */
    .search-form-container { padding: 16px; border-bottom: 1px solid var(--border-color); }
    .search-input-group { display: flex; gap: 8px; margin-bottom: 12px; }
    .search-input { flex: 1; background-color: var(--bg-panel-hover); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 12px; color: white; font-size: 14px; outline: none; width: 100%; }
    .search-input:focus { border-color: var(--primary); }
    .search-btn { background-color: var(--primary); color: white; border: none; padding: 8px 12px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
    .checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); cursor: pointer; }

    .search-results { padding: 16px; flex: 1; overflow-y: auto; }
    .card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

    /* ドラッグ可能アイテム */
    .draggable-item { cursor: grab; transition: transform 0.2s; position: relative; }
    .draggable-item:hover { transform: scale(1.05); }
    .card-item img { width: 100%; border-radius: 4.5%; box-shadow: 0 4px 6px rgba(0,0,0,0.3); pointer-events: none; }
    .mobile-tap-hint { position: absolute; bottom: 4px; right: 4px; background-color: rgba(37, 99, 235, 0.8); color: white; font-size: 10px; padding: 2px 6px; border-radius: 4px; pointer-events: none; }

    .action-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }
    .tool-item-box { padding: 16px; background-color: var(--bg-panel-hover); border: 1px solid var(--border-color); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; }
    .tool-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; }
    .tool-text-lg { font-size: 24px; font-weight: bold; font-family: Georgia, serif; color: white; pointer-events: none; }
    .shape-preview { width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; pointer-events: none; }

    /* =========================================
       メインワークスペース
       ========================================= */
    .main-workspace { flex: 1 1 0%; display: flex; flex-direction: column; position: relative; overflow: hidden; min-width: 0; min-height: 0; }

    .top-bar { height: 56px; background-color: var(--bg-panel); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 1500; }
    @media (max-width: 768px) { .top-bar { display: none; } }
    .top-bar-title { display: flex; align-items: center; gap: 8px; font-weight: bold; }
    .export-btn { background-color: white; color: black; border: none; padding: 8px 16px; border-radius: 8px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 14px; }

    /* フローティングツールバー */
    .floating-toolbar {
      position: absolute; z-index: 1500; background-color: rgba(30, 41, 59, 0.9); backdrop-filter: blur(4px);
      border: 1px solid var(--border-color); border-radius: 8px; padding: 4px; display: flex; align-items: center; gap: 4px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5);
    }
    .floating-toolbar.pos-pc { top: 72px; left: 50%; transform: translateX(-50%); }
    .floating-toolbar.pos-mobile { top: 72px; left: 50%; transform: translateX(-50%); }
    .toolbar-btn { background: transparent; border: none; color: var(--text-main); padding: 6px 12px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 4px; font-size: 14px; }
    .toolbar-btn:hover { background-color: rgba(255, 255, 255, 0.1); }
    .toolbar-btn.danger { color: var(--danger); }
    .toolbar-btn.danger:hover { background-color: rgba(239, 68, 68, 0.2); }
    .divider { width: 1px; height: 24px; background-color: var(--border-color); margin: 0 4px; }

    /* キャンバスエリア */
    .canvas-container {
      flex: 1 1 0%; background-color: var(--bg-main); background-image: url('https://transparenttextures.com/patterns/cubes.png');
      overflow: auto; display: flex; align-items: center; justify-content: center; padding: 48px; touch-action: none; position: relative;
      z-index: 1; min-width: 0; min-height: 0;
    }
    @media (max-width: 768px) { .canvas-container { padding: 16px; padding-bottom: 60px; } }

    #canvas-wrapper-outer { position: relative; transition: width 0.1s, height 0.1s; }
    .canvas-wrapper { transform-origin: top left; transition: transform 0.1s ease-out; position: absolute; top: 0; left: 0; }

    .canvas-board {
      background-color: var(--canvas-bg);
      box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); border: 1px solid var(--border-color); position: relative; overflow: hidden;
      transition: width 0.3s, height 0.3s;
    }

    .canvas-guide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); pointer-events: none; }
    .elements-layer { position: absolute; inset: 0; pointer-events: none; }

    /* キャンバス内要素 */
    .canvas-element {
      position: absolute; cursor: grab; transition: box-shadow 0.2s;
      user-select: none; -webkit-user-select: none; pointer-events: auto;
    }
    .canvas-element.type-card {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    }
    .canvas-element.dragging { cursor: grabbing; transition: none; }
    .canvas-element.selected { box-shadow: 0 0 0 2px var(--primary), 0 8px 16px -4px rgba(0, 0, 0, 0.5); }
    .canvas-element.type-text.selected, .canvas-element.type-shape.selected { box-shadow: 0 0 0 2px var(--primary); }

    .canvas-element img { width: 100%; height: 100%; object-fit: fill; border-radius: 4.5%; pointer-events: none; }
    .canvas-text-el { width: 100%; height: 100%; display: table; }
    .canvas-text-el .text-content {
      font-weight: bold; font-family: Georgia, serif; white-space: pre-wrap; word-wrap: break-word; text-align: center;
      display: table-cell; vertical-align: middle; line-height: 1.5; width: 100%; height: 100%;
    }

    /* テキスト編集モード */
    .canvas-text-el .text-content[contenteditable="true"] {
      user-select: text; -webkit-user-select: text; cursor: text;
      outline: 2px dashed var(--primary); background: rgba(0,0,0,0.5);
      border-radius: 8px;
    }

    .shape-svg { width: 100%; height: 100%; overflow: visible; display: block; pointer-events: none;}

    .resize-handle {
      display: none; position: absolute; width: 16px; height: 16px;
      background-color: var(--primary); border: 2px solid white; border-radius: 50%;
      z-index: 100; touch-action: none;
    }
    .resize-handle.nw { top: -8px; left: -8px; cursor: nw-resize; }
    .resize-handle.ne { top: -8px; right: -8px; cursor: ne-resize; }
    .resize-handle.sw { bottom: -8px; left: -8px; cursor: sw-resize; }
    .resize-handle.se { bottom: -8px; right: -8px; cursor: se-resize; }
    .canvas-element.selected .resize-handle { display: block; }

    #toast {
      position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
      background: var(--success); color: white; padding: 12px 24px; border-radius: 8px;
      font-weight: bold; z-index: 9999; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      opacity: 0; transition: opacity 0.3s; pointer-events: none;
    }
    #toast.show { opacity: 1; }
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 10000; transition: opacity 0.3s; }
.modal-overlay.hidden { display: none !important; }
.modal-content { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 12px; padding: 24px; max-width: 500px; width: 90%; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }