/* ============================================================
   QR Tool  v4.0 — qr-tool.css
   Tailwind CDN のカスタム補完のみ記述（アニメ・スライダー等）
   全体デザインは Tailwind CDN ユーティリティで管理
   ============================================================ */

/* ── Root背景（SWELLページ背景が透過しないよう固定） ─── */
#qr-tool-app {
  background: #ffffff !important;
  position: relative;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
}

/* ── メインラッパー（常に縦積み、post_content内に収まる） ─── */
#qr-tool-app #qrt-main-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 0 0 24px !important;
}
/* プレビューを設定より上に表示 */
#qr-tool-app .qrt-preview-col {
  order: -1 !important;
  position: static !important;
}

/* ── カード枠線を少し濃く ─── */
#qr-tool-app .border-stone-200 { border-color: #A8A5A2 !important; }
#qr-tool-app .border-amber-200  { border-color: #F5C97A !important; }

/* ── カード背景（Tailwindのbg-whiteが効かない環境向けフォールバック） ─── */
#qr-tool-app .bg-white    { background-color: #ffffff !important; }
#qr-tool-app .bg-stone-50 { background-color: #fafaf9 !important; }
#qr-tool-app .bg-stone-100 { background-color: #f5f5f4 !important; }
#qr-tool-app .bg-amber-50 { background-color: #fffbeb !important; }
#qr-tool-app .bg-indigo-50 { background-color: #eef2ff !important; }
#qr-tool-app .bg-indigo-700 { background-color: #4338ca !important; }
#qr-tool-app .bg-transparent { background-color: transparent !important; }

/* ── カラーピッカーボタン（position:relativeを確実に） ─── */
#qr-tool-app .qrt-color-btn { position: relative !important; overflow: hidden; }

/* ── ヘッダー ─── */
#qr-tool-app header { background-color: #ffffff !important; }

/* ── レンジスライダー（Tailwindでは制御不可） ─ */
#qr-tool-app input[type=range] {
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 2px; outline: none; cursor: pointer;
  background: #E2E8F0;
}
#qr-tool-app input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #4338CA; cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(67,56,202,.35);
  transition: transform .1s;
}
#qr-tool-app input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* ── カラーピッカー重ね ─────────────────────── */
.qrt-color-btn { position: relative; }
.qrt-color-btn input[type=color] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}

/* ── トグルスイッチの寸法固定（Tailwind任意値フォールバック） ─── */
.qrt-toggle {
  display: inline-block !important;
  position: relative !important;
  width: 38px !important;
  height: 22px !important;
  flex-shrink: 0;
  cursor: pointer;
}
.qrt-toggle input[type=checkbox] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none;
}

/* ── トグルスライダー ─────────────────────── */
.qrt-tslider {
  position: absolute; inset: 0;
  background: #CBD5E1; border-radius: 11px; cursor: pointer; transition: .2s;
}
.qrt-tslider::before {
  content: ''; position: absolute;
  width: 16px; height: 16px; left: 3px; top: 3px;
  background: white; border-radius: 50%;
  transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.qrt-toggle input:checked + .qrt-tslider { background: #4338CA; }
.qrt-toggle input:checked + .qrt-tslider::before { transform: translateX(16px); }

/* ── Tab / Opt active 状態 ───────────────────── */
#qr-tool-app .qrt-type-tab.active {
  background: #fff !important; color: #4338CA !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.09);
}
#qr-tool-app .qrt-style-opt.active {
  border-color: #4338CA !important; background: #EEF2FF !important; color: #4338CA !important;
}
#qr-tool-app .qrt-ec-tab.active,
#qr-tool-app .qrt-frame-opt.active {
  border-color: #4338CA !important; background: #EEF2FF !important; color: #4338CA !important;
}
#qr-tool-app .qrt-ec-tab.active span { color: #4338CA !important; opacity: .8; }
#qr-tool-app .qrt-preset.active {
  outline: 3px solid white;
  box-shadow: 0 0 0 5px #1E1B4B;
}

/* ── コピー・印刷・共有ボタンエリア ─── */
#qr-tool-app #qrt-action-bar {
  display: flex !important;
  margin: 8px !important;
  border: 1.5px solid #A8A5A2 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}
#qr-tool-app #qrt-copy-btn,
#qr-tool-app #qrt-print-btn,
#qr-tool-app #qrt-share-btn {
  flex: 1 !important;
  border: none !important;
  border-right: 1.5px solid #A8A5A2 !important;
  background: #ffffff !important;
  padding: 10px 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #57534E !important;
  cursor: pointer !important;
  transition: background .15s, color .15s !important;
}
#qr-tool-app #qrt-share-btn {
  border-right: none !important;
}
#qr-tool-app #qrt-copy-btn:hover,
#qr-tool-app #qrt-print-btn:hover,
#qr-tool-app #qrt-share-btn:hover {
  color: #4338CA !important;
  background: #EEF2FF !important;
}

/* ── Loading 表示制御 ─────────────────────── */
#qr-tool-app .qrt-loading.show { display: flex !important; }

/* ── タイプタブバー ─── */
#qr-tool-app #qrtTypeTabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  background: #f5f5f4;
  border: 1px solid #E7E5E4;
  border-radius: 12px;
  padding: 3px !important;
  margin-bottom: 16px;
}
#qr-tool-app .qrt-type-tab {
  flex: 1 !important;
  min-width: 54px;
  padding: 7px 5px !important;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: #78716C;
  text-align: center;
  white-space: nowrap;
  line-height: 1.3;
  font-family: inherit;
  transition: all .15s;
}

/* ── コンテンツパネル表示切替（Tailwindが不要） ─── */
#qr-tool-app .qrt-panel         { display: none !important; }
#qr-tool-app .qrt-panel.active  { display: block !important; }

/* ── 共有パネル表示切替 ─── */
#qr-tool-app .qrt-share-panel       { display: none !important; }
#qr-tool-app .qrt-share-panel.show  { display: block !important; }

/* ── ロゴ情報表示切替 ─── */
#qr-tool-app .qrt-logo-info       { display: none !important; }
#qr-tool-app .qrt-logo-info.show  { display: flex !important; }

/* ── カラープリセットグリッド（square必須） ─── */
#qr-tool-app #qrt-presets {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 8px !important;
}
#qr-tool-app .qrt-preset {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  border: none;
}
#qr-tool-app .qrt-preset:hover { transform: scale(1.08); }
#qr-tool-app .qrt-preset-name { display: none !important; }

/* ── スタイルオプショングリッド ─── */
#qr-tool-app #qrt-dot-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
}
#qr-tool-app #qrt-corner-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
}
#qr-tool-app #qrt-frame-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
}
#qr-tool-app .qrt-ec-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
}

/* ── 2カラム入力行 ─── */
#qr-tool-app .qrt-row2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

/* ── 履歴サムネイル（サイズ固定） ─── */
#qr-tool-app .qrt-history-item {
  width: 56px !important;
  height: 56px !important;
  border-radius: 6px;
  overflow: hidden;
  border: 1.5px solid #E2E8F0;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .15s;
}
#qr-tool-app .qrt-history-item:hover { transform: scale(1.06); }
#qr-tool-app .qrt-history-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}

/* ── チェッカー背景（QRプレビュー） ─────────── */
.qrt-canvas-bg {
  background-image: repeating-conic-gradient(#E2E8F0 0% 25%, transparent 0% 50%);
  background-size: 14px 14px;
}

/* ── トースト ─────────────────────────────── */
.qrt-toast {
  position: fixed; bottom: 26px; left: 50%;
  transform: translateX(-50%) translateY(10px);
  opacity: 0; transition: opacity .22s, transform .22s;
  pointer-events: none; z-index: 99999;
}
.qrt-toast.show { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; }

/* ── アニメーション ───────────────────────── */
@keyframes qrtFadeScale {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes qrtSpin { to { transform: rotate(360deg); } }
#qrt-preview-canvas canvas {
  max-width: 100% !important; max-height: 280px !important;
  border-radius: 4px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.14));
  animation: qrtFadeScale .22s ease;
}
.qrt-spin { display: inline-block; animation: qrtSpin .8s linear infinite; }

/* ── レスポンシブ（540px以下） ── */
@media (max-width: 540px) {
  #qr-tool-app .qrt-row2 { grid-template-columns: 1fr !important; }
  #qr-tool-app .qrt-presets-grid { grid-template-columns: repeat(5, 1fr) !important; }
  #qr-tool-app .qrt-style-grid-6 { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── WordPress コンテンツ幅内に収める ─────────── */
#qr-tool-app {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── 印刷 ─────────────────────────────────── */
@media print {
  #qr-tool-app .qrt-settings-col,
  #qr-tool-app header,
  #qr-tool-app .qrt-dl-area,
  #qr-tool-app .qrt-tips,
  #qr-tool-app .qrt-history { display: none !important; }
  #qr-tool-app .qrt-canvas-bg { background: white !important; }
}