/* ===================================
   Tool: inkan-generator
   =================================== */

  /* フォント事前読み込み用（非表示） */
  .font-preload { position: absolute; left: -9999px; visibility: hidden; }
  .font-preload-mincho { font-family: 'Shippori Mincho', serif; }
  .font-preload-gothic { font-family: 'Noto Sans JP', sans-serif; }
  .font-preload-maru { font-family: 'Zen Maru Gothic', sans-serif; }
  .font-preload-tegaki { font-family: 'Zen Kurenaido', cursive; }
  .font-preload-fude { font-family: 'Yuji Boku', cursive; }
  .font-preload-retro { font-family: 'Zen Antique', serif; }
  </style>
  <style>
  .tool-main { padding: var(--space-xl) var(--space-md); padding-top: 100px; max-width: 1100px; margin: 0 auto; }
  @media (max-width: 600px) { .tool-main { padding: var(--space-md) var(--space-sm); padding-top: 80px; } }
  .hero-section { text-align: center; margin-bottom: var(--space-xl); }
  .hero-title { font-size: 1.8rem; margin-bottom: var(--space-md); }
  .hero-desc { font-size: 1rem; color: var(--text-secondary); max-width: 500px; margin: 0 auto var(--space-lg); }
  @media (max-width: 600px) { 
    .hero-section { margin-bottom: var(--space-md); }
    .hero-title { font-size: 1.3rem; margin-bottom: var(--space-sm); }
    .hero-desc { font-size: 0.85rem; margin-bottom: var(--space-md); }
  }
  .feature-badges { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg); justify-content: center; }
  .feature-badge { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); background: var(--green-pale); color: var(--green-main); font-size: 0.75rem; font-weight: 600; border-radius: var(--radius-full); }
  @media (max-width: 600px) { .feature-badges { gap: var(--space-xs); margin-bottom: var(--space-md); } .feature-badge { font-size: 0.7rem; padding: 4px 8px; } }
  
  .generator-layout { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-xl); margin-bottom: var(--space-xl); }
  
  /* モバイル: プレビュー固定 + 設定スクロール */
  @media (max-width: 800px) { 
    .generator-layout { 
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-bottom: var(--space-md);
    }
    
    /* プレビューカード: 上部固定、横並びレイアウト */
    .preview-card { 
      position: sticky;
      top: 60px;
      z-index: 100;
      order: -1;
      padding: var(--space-md);
      border-radius: 0 0 var(--radius-xl) var(--radius-xl);
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
      background: var(--bg-card);
      margin: 0 calc(-1 * var(--space-sm));
      width: calc(100% + var(--space-md));
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--space-md);
    }
    
    /* プレビューエリア: 幅の約半分を使用 */
    .preview-canvas-wrapper { 
      min-height: auto;
      padding: var(--space-md);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0;
      flex: 0 0 calc(50% - var(--space-sm));
      background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%), 
                  linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%);
      background-size: 12px 12px;
      background-position: 0 0, 6px 6px;
      background-color: #fff;
      border-radius: var(--radius-md);
    }
    
    /* プレビューキャンバス: ラッパーに合わせて拡大 */
    .preview-canvas-wrapper #previewCanvas {
      width: 100% !important;
      height: auto !important;
      max-width: 140px;
      max-height: 140px;
    }
    
    /* ダウンロードボタン: 残りの半分を使用 */
    .download-actions { 
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
      min-width: 0;
    }
    
    .download-btn.primary { 
      padding: 12px 16px;
      font-size: 0.85rem;
    }
    
    .small-actions { 
      display: flex;
      gap: 8px;
    }
    
    .small-actions .download-btn { 
      flex: 1;
      padding: 10px 12px;
      font-size: 0.75rem;
    }
    
    .download-note { 
      display: none;
    }
    
    /* 設定カード */
    .settings-card {
      margin-top: var(--space-md);
    }
    
    .settings-section { 
      padding: var(--space-md);
    }
    
    .settings-tabs { 
      gap: 2px;
      padding: 3px;
    }
    
    .settings-tab { 
      padding: var(--space-sm) var(--space-xs);
      font-size: 0.7rem;
      gap: 2px;
    }
  }
  
  /* さらに小さい画面 */
  @media (max-width: 480px) {
    .preview-card {
      top: 56px;
      padding: var(--space-sm);
      gap: var(--space-sm);
    }
    
    .preview-canvas-wrapper {
      padding: var(--space-sm);
      flex: 0 0 calc(50% - var(--space-xs));
    }
    
    .preview-canvas-wrapper #previewCanvas {
      max-width: 120px;
      max-height: 120px;
    }
    
    .download-btn.primary {
      padding: 10px 12px;
      font-size: 0.8rem;
    }
    
    .small-actions .download-btn {
      padding: 8px 10px;
      font-size: 0.7rem;
    }
    
    .settings-tab {
      font-size: 0.65rem;
      padding: var(--space-xs);
    }
  }
  
  /* 極小画面 */
  @media (max-width: 360px) {
    .preview-canvas-wrapper #previewCanvas {
      max-width: 100px;
      max-height: 100px;
    }
    
    .download-btn.primary {
      padding: 8px 10px;
      font-size: 0.75rem;
    }
    
    .small-actions .download-btn {
      padding: 6px 8px;
      font-size: 0.65rem;
    }
  }
  
  .preview-card { background: var(--bg-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: var(--space-lg); position: sticky; top: 80px; }
  .preview-canvas-wrapper { background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%), linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; background-color: #fff; border-radius: var(--radius-lg); padding: var(--space-md); display: flex; align-items: center; justify-content: center; min-height: 140px; margin-bottom: var(--space-md); }
  #previewCanvas { display: block; image-rendering: auto; max-width: 100%; height: auto; }
  
  .download-actions { display: flex; flex-direction: column; gap: var(--space-sm); }
  .download-btn { padding: var(--space-md); font-family: var(--font-main); font-size: 0.9rem; font-weight: 600; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); display: flex; align-items: center; justify-content: center; gap: var(--space-sm); }
  .download-btn.primary { background: linear-gradient(135deg, var(--green-main), var(--teal)); color: white; }
  .download-btn.primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .download-btn.secondary { background: var(--sage-100); color: var(--text-secondary); }
  .download-btn.secondary:hover { background: var(--green-pale); color: var(--green-main); }
  .small-actions { display: flex; gap: var(--space-sm); }
  .small-actions .download-btn { flex: 1; padding: var(--space-sm); font-size: 0.8rem; }
  .download-note { font-size: 0.7rem; color: var(--text-muted); text-align: center; margin-top: var(--space-sm); line-height: 1.4; }
  
  .settings-card { background: var(--bg-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
  
  .settings-section { padding: var(--space-lg); }
  .settings-tabs { display: flex; gap: var(--space-xs); background: var(--sage-100); padding: 4px; border-radius: var(--radius-lg); margin-bottom: var(--space-lg); }
  .settings-tab { flex: 1; padding: var(--space-sm) var(--space-md); font-family: var(--font-main); font-size: 0.85rem; font-weight: 600; color: var(--text-muted); background: transparent; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); display: flex; align-items: center; justify-content: center; gap: var(--space-xs); }
  .settings-tab:hover { color: var(--text-primary); }
  .settings-tab.active { background: white; color: var(--green-main); box-shadow: var(--shadow-sm); }
  .settings-panel { display: none; }
  .settings-panel.active { display: block; animation: fadeIn 0.2s ease; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  
  .form-group { margin-bottom: var(--space-md); }
  .form-group:last-child { margin-bottom: 0; }
  .form-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-xs); }
  .form-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: var(--space-xs); }
  .text-input { width: 100%; padding: var(--space-md) var(--space-lg); font-family: var(--font-main); font-size: 1.2rem; font-weight: 600; text-align: center; color: var(--text-primary); background: var(--sage-50); border: 2px solid var(--border-color); border-radius: var(--radius-lg); transition: all var(--transition-fast); }
  .text-input:focus { outline: none; border-color: var(--green-main); box-shadow: 0 0 0 4px var(--green-pale); }
  .char-counter { text-align: right; font-size: 0.8rem; color: var(--text-muted); margin-top: var(--space-xs); }
  .char-counter.warning { color: #ef4444; }
  
  @media (max-width: 600px) { 
    .form-group { margin-bottom: var(--space-sm); } 
    .form-label { font-size: 0.8rem; }
    .form-hint { font-size: 0.75rem; }
    .text-input { 
      padding: var(--space-sm) var(--space-md);
      font-size: 1rem;
    }
    .char-counter { font-size: 0.75rem; }
  }
  
  .shape-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-sm); }
  @media (max-width: 600px) { .shape-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 400px) { .shape-grid { grid-template-columns: repeat(2, 1fr); } }
  .shape-btn { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-md); background: var(--sage-50); border: 2px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); }
  .shape-btn:hover { background: var(--green-pale); }
  .shape-btn.active { background: var(--green-pale); border-color: var(--green-main); }
  .shape-icon { width: 32px; height: 32px; }
  .shape-icon svg { width: 100%; height: 100%; }
  .shape-label { font-size: 0.75rem; color: var(--text-secondary); }
  .shape-btn.active .shape-label { color: var(--green-main); font-weight: 600; }
  
  .form-select { width: 100%; padding: var(--space-md); font-family: var(--font-main); font-size: 1rem; color: var(--text-primary); background: var(--sage-50); border: 2px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); }
  .form-select:focus { outline: none; border-color: var(--green-main); }
  
  @media (max-width: 600px) {
    .form-select { 
      padding: var(--space-sm);
      font-size: 0.9rem;
    }
  }
  
  .color-picker-row { display: flex; gap: var(--space-md); align-items: center; }
  .color-presets { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; }
  .color-preset { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; transition: all var(--transition-fast); }
  .color-preset:hover { transform: scale(1.1); }
  .color-preset.active { border-color: var(--text-primary); box-shadow: var(--shadow-sm); }
  .color-custom-picker { position: relative; width: 32px; height: 32px; border-radius: var(--radius-sm); border: 2px dashed var(--sage-300); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); overflow: hidden; }
  .color-custom-picker:hover { border-color: var(--green-main); transform: scale(1.1); }
  .color-custom-picker input[type="color"] { position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
  .color-custom-label { font-size: 1.2rem; font-weight: bold; color: var(--sage-400); pointer-events: none; }
  
  @media (max-width: 600px) {
    .color-picker-row { flex-wrap: wrap; gap: var(--space-sm); }
    .color-presets { gap: var(--space-xs); }
    .color-preset { width: 36px; height: 36px; }
    .color-custom-picker { width: 36px; height: 36px; }
  }
  
  .slider-row { display: flex; align-items: center; gap: var(--space-md); }
  .slider-track { flex: 1; -webkit-appearance: none; appearance: none; height: 8px; background: var(--sage-200); border-radius: 4px; cursor: pointer; }
  .slider-track::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: var(--green-main); border-radius: 50%; cursor: pointer; transition: all var(--transition-fast); }
  .slider-track::-webkit-slider-thumb:hover { transform: scale(1.1); }
  .slider-value { min-width: 50px; text-align: center; font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
  .slider-label { font-size: 0.75rem; color: var(--text-muted); min-width: 40px; flex-shrink: 0; }
  
  @media (max-width: 600px) {
    .slider-row { gap: var(--space-sm); }
    .slider-track { height: 10px; }
    .slider-track::-webkit-slider-thumb { width: 24px; height: 24px; }
    .slider-value { min-width: 40px; font-size: 0.8rem; }
    .slider-label { font-size: 0.7rem; min-width: 35px; }
  }
  
  .effect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .effect-item { background: var(--sage-50); border-radius: var(--radius-md); padding: var(--space-md); overflow: hidden; min-width: 0; }
  .effect-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-sm); gap: var(--space-xs); }
  .effect-name { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
  
  /* 効果項目内のスライダー */
  .effect-item .slider-row { gap: var(--space-xs); }
  .effect-item .slider-value { min-width: 36px; font-size: 0.8rem; }
  
  @media (max-width: 600px) { 
    .effect-grid { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
    .effect-item { padding: var(--space-sm); }
    .effect-name { font-size: 0.7rem; }
    .effect-item .slider-row { gap: 4px; }
    .effect-item .slider-value { min-width: 32px; font-size: 0.7rem; }
    .effect-item .slider-track { height: 8px; }
    .effect-item .slider-track::-webkit-slider-thumb { width: 18px; height: 18px; }
  }
  @media (max-width: 480px) { 
    .effect-grid { grid-template-columns: 1fr; } 
    .effect-item { padding: var(--space-sm) var(--space-md); }
    .effect-name { font-size: 0.8rem; }
    .effect-item .slider-value { min-width: 40px; font-size: 0.75rem; }
  }
  
  .toggle-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
  .toggle-switch input { opacity: 0; width: 0; height: 0; }
  .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--sage-300); border-radius: 24px; transition: all var(--transition-fast); }
  .toggle-slider::before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: all var(--transition-fast); }
  .toggle-switch input:checked + .toggle-slider { background: var(--green-main); }
  .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
  
  @media (max-width: 600px) {
    .toggle-switch { width: 38px; height: 22px; }
    .toggle-slider::before { height: 16px; width: 16px; left: 3px; bottom: 3px; }
    .toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }
  }
  
  .size-options { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
  .size-option { padding: var(--space-sm) var(--space-md); font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); background: var(--sage-50); border: 2px solid transparent; border-radius: var(--radius-full); cursor: pointer; transition: all var(--transition-fast); }
  .size-option:hover { background: var(--green-pale); }
  .size-option.active { background: var(--green-pale); border-color: var(--green-main); color: var(--green-main); }
  
  @media (max-width: 600px) {
    .size-options { gap: var(--space-xs); }
    .size-option { 
      padding: var(--space-xs) var(--space-sm);
      font-size: 0.75rem;
    }
  }
  
  .direction-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
  .direction-btn { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-md); background: var(--sage-50); border: 2px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); }
  .direction-btn:hover { background: var(--green-pale); }
  .direction-btn.active { background: var(--green-pale); border-color: var(--green-main); }
  .direction-btn .shape-label { font-size: 0.8rem; }
  .direction-btn.active .shape-label { color: var(--green-main); font-weight: 600; }
  
  .batch-section { background: var(--bg-card); border-radius: var(--radius-xl); padding: var(--space-xl); margin-bottom: var(--space-xl); box-shadow: var(--shadow-sm); }
  .batch-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); }
  .batch-header h3 { font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: var(--space-sm); }
  .batch-input { width: 100%; min-height: 100px; padding: var(--space-md); font-family: var(--font-main); font-size: 1rem; line-height: 1.8; color: var(--text-primary); background: var(--sage-50); border: 2px solid var(--border-color); border-radius: var(--radius-lg); resize: vertical; transition: all var(--transition-fast); }
  .batch-input:focus { outline: none; border-color: var(--green-main); box-shadow: 0 0 0 4px var(--green-pale); }
  .batch-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: var(--space-md); margin-top: var(--space-lg); }
  .batch-preview-item { text-align: center; }
  .batch-preview-item canvas { max-width: 100%; border-radius: var(--radius-sm); margin-bottom: var(--space-xs); }
  .batch-preview-name { font-size: 0.75rem; color: var(--text-muted); }
  .batch-download-btn { width: 100%; padding: var(--space-md) var(--space-lg); margin-top: var(--space-lg); font-family: var(--font-main); font-size: 1rem; font-weight: 600; color: white; background: linear-gradient(135deg, var(--green-main), var(--teal)); border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); display: flex; align-items: center; justify-content: center; gap: var(--space-sm); }
  .batch-download-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .batch-download-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .clear-btn { padding: var(--space-xs) var(--space-md); font-size: 0.8rem; color: var(--text-muted); background: transparent; border: 1px solid var(--border-color); border-radius: var(--radius-full); cursor: pointer; transition: all var(--transition-fast); }
  .clear-btn:hover { background: #fee2e2; border-color: #ef4444; color: #ef4444; }
  
  @media (max-width: 600px) {
    .batch-section { 
      padding: var(--space-md);
      margin-bottom: var(--space-md);
    }
    .batch-header h3 { font-size: 0.9rem; }
    .batch-input { 
      min-height: 80px;
      padding: var(--space-sm);
      font-size: 0.9rem;
    }
    .batch-preview-grid { 
      grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
      gap: var(--space-sm);
      margin-top: var(--space-md);
    }
    .batch-preview-name { font-size: 0.7rem; }
    .batch-download-btn { 
      padding: var(--space-sm) var(--space-md);
      font-size: 0.9rem;
      margin-top: var(--space-md);
    }
  }
  
  .content-section { background: var(--bg-card); border-radius: var(--radius-xl); padding: var(--space-xl); margin-bottom: var(--space-xl); box-shadow: var(--shadow-sm); }
  .content-section h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-lg); display: flex; align-items: center; gap: var(--space-sm); }
  .faq-item { border-bottom: 1px solid var(--border-color); padding: var(--space-md) 0; }
  .faq-item:last-child { border-bottom: none; }
  .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm) 0; font-family: var(--font-main); font-size: 0.95rem; font-weight: 600; color: var(--text-primary); background: transparent; border: none; cursor: pointer; text-align: left; }
  .faq-question:hover { color: var(--green-main); }
  .faq-toggle { font-size: 1.2rem; color: var(--text-muted); transition: transform var(--transition-fast); }
  .faq-item.active .faq-toggle { transform: rotate(45deg); }
  .faq-answer { display: none; padding: var(--space-md) 0; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.8; }
  .faq-item.active .faq-answer { display: block; }
  
  .tips-section { background: linear-gradient(135deg, var(--green-pale), var(--teal-pale)); border-radius: var(--radius-xl); padding: var(--space-xl); margin-bottom: var(--space-xl); }
  .tips-section h3 { font-size: 1.1rem; font-weight: 700; color: var(--dark-forest); margin-bottom: var(--space-lg); display: flex; align-items: center; gap: var(--space-sm); }
  .tips-list { list-style: none; }
  .tips-list li { padding: var(--space-sm) 0; padding-left: var(--space-lg); position: relative; color: var(--sage-700); font-size: 0.95rem; line-height: 1.7; }
  .tips-list li::before { content: '💡'; position: absolute; left: 0; }
  
  @media (max-width: 600px) {
    .content-section { 
      padding: var(--space-md);
      margin-bottom: var(--space-md);
    }
    .content-section h3 { 
      font-size: 0.95rem;
      margin-bottom: var(--space-md);
    }
    .faq-item { padding: var(--space-sm) 0; }
    .faq-question { 
      font-size: 0.85rem;
      gap: var(--space-sm);
    }
    .faq-question span:first-child { flex: 1; }
    .faq-toggle { font-size: 1rem; flex-shrink: 0; }
    .faq-answer { 
      font-size: 0.8rem;
      line-height: 1.7;
      padding: var(--space-sm) 0;
    }
    
    .tips-section { 
      padding: var(--space-md);
      margin-bottom: var(--space-md);
    }
    .tips-section h3 { 
      font-size: 0.95rem;
      margin-bottom: var(--space-md);
    }
    .tips-list li { 
      font-size: 0.85rem;
      line-height: 1.6;
      padding-left: var(--space-md);
    }
  }
  
  /* Toast styles inherited from main style.css */
  .hidden-canvas { position: absolute; left: -9999px; top: -9999px; }