/* =========================================================
   webclips /tools/ 共通スタイル
   - tc- プレフィックスのツールUI用CSS（共通ベースのみ）
   - ツール固有クラスは各投稿の <style> タグで管理
   - カラーはCSS変数(:root)で一元管理（今後のツール追加時もここに追加）
   ========================================================= */

:root {
  /* テキスト */
  --tc-text: #2A495A;
  --tc-text-muted: #486379;
  --tc-placeholder: #b2bdc7;

  /* ボーダー */
  --tc-border: #c8d5df;
  --tc-border-strong: #9ba9b6;

  /* 背景 */
  --tc-bg: #fff;
  --tc-bg-light: #f5f8fa;
  --tc-bg-lighter: #e8eef2;
  --tc-bg-stripe: #f9fbfc;
  --tc-bg-highlight: #f6faf5;

  /* アクセント */
  --tc-accent: #4b7396;

  /* ステータス */
  --tc-warning: #e6a500;
  --tc-danger: #e00;

  /* バー・トラック背景 */
  --tc-track: #e1e1e1;
  --tc-track-alt: #dde3e8;

}

/* ---- iOSズーム対策：フォーム要素は16px固定 ---- */
input,
select,
textarea {
  font-size: 16px;
}

/* ---- リセット ---- */
.tc-wrap *,
.tc-wrap *::before,
.tc-wrap *::after {
  box-sizing: border-box;
}

/* ---- ラッパー ---- */
.tc-wrap {
  max-width: 970px;
  margin: 0 auto;
  font-family: 'YakuHanJPs', 'Noto Sans JP', sans-serif;
  color: var(--tc-text);
}

/* ---- 目標値入力行（文字数カウント等） ---- */
.tc-goal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.tc-goal-row label {
  font-size: 14px;
  font-weight: 700;
  color: var(--tc-text);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.tc-goal-input {
  width: 100px;
  padding: 5px 10px;
  border: 1px solid var(--tc-border-strong);
  border-radius: 4px;
  font-size: 14px;
  font-family: 'Roboto Condensed', sans-serif;
  color: var(--tc-text);
  outline: none;
  transition: border-color 0.2s;
}
.tc-goal-input:focus {
  border-color: var(--tc-text);
}
.tc-goal-input::placeholder {
  color: var(--tc-placeholder);
}
.tc-goal-hint {
  font-size: 13px;
  color: var(--tc-text);
  font-weight: 500;
}

/* ---- エディタ（テキストエリア＋アクションボタン） ---- */
.tc-editor {
  position: relative;
  border: 1px solid var(--tc-border);
  background: var(--tc-bg);
}
.tc-editor__actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 1;
}
.tc-editor__btn {
  padding: 4px 10px;
  border: 1px solid var(--tc-border-strong);
  border-radius: 4px;
  background: var(--tc-bg-light);
  font-size: 11px;
  font-weight: 600;
  color: var(--tc-text);
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.5;
}
.tc-editor__btn:hover {
  border-color: var(--tc-text);
  color: var(--tc-text);
}

/* ---- テキストエリア ---- */
.tc-textarea {
  display: block;
  width: 100%;
  min-height: 280px;
  padding: 14px 110px 14px 14px;
  border: none;
  outline: none;
  resize: vertical;
  font-size: 14px;
  font-family: 'YakuHanJPs', 'Noto Sans JP', sans-serif;
  line-height: 1.8;
  color: var(--tc-text);
  background: transparent;
}
.tc-textarea::placeholder {
  color: var(--tc-text);
  font-size: 13px;
  white-space: pre-line;
}
.tc-textarea--sm {
  min-height: 160px;
}

/* ---- プログレスバー ---- */
.tc-progress-wrap {
  padding: 8px 14px;
  border-top: 1px solid var(--tc-bg-lighter);
  background: var(--tc-bg-light);
  display: none;
}
.tc-progress-wrap.is-visible {
  display: block;
}
.tc-progress-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--tc-text);
  font-family: 'Roboto Condensed', sans-serif;
}
.tc-progress-bar-bg {
  height: 5px;
  background: var(--tc-track);
  border-radius: 3px;
  overflow: hidden;
}
.tc-progress-bar {
  height: 100%;
  background: var(--tc-accent);
  border-radius: 3px;
  transition: width 0.2s, background 0.2s;
  width: 0%;
}
.tc-progress-bar.is-over {
  background: var(--tc-danger);
}

/* ---- 統計グリッド ---- */
.tc-stats {
  border: 1px solid var(--tc-border);
  border-top: none;
}
.tc-stats-row {
  display: grid;
  gap: 1px;
  background: var(--tc-border);
}
.tc-stats-row--2 {
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--tc-border);
}
.tc-stats-row--3 {
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--tc-border);
}
.tc-stats-row--4 {
  grid-template-columns: repeat(4, 1fr);
}
.tc-stats-row--4b {
  grid-template-columns: repeat(4, 1fr);
}
.tc-stat {
  background: var(--tc-bg-light);
  padding: 16px 18px;
}
.tc-stat--main {
  background: var(--tc-bg-highlight);
}
.tc-stat__num {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 42px;
  font-weight: 500;
  color: var(--tc-text);
  line-height: 1;
  letter-spacing: -0.02em;
}
.tc-stat--sub .tc-stat__num {
  font-size: 30px;
}
.tc-stat--type .tc-stat__num {
  font-size: 26px;
}
.tc-stat__label {
  font-size: 13px;
  color: var(--tc-text);
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.tc-stat__bar-bg {
  height: 3px;
  background: var(--tc-track-alt);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 7px;
}
.tc-stat__bar {
  height: 100%;
  background: var(--tc-border-strong);
  border-radius: 2px;
  transition: width 0.3s;
}
.tc-stat__pct {
  font-size: 12px;
  color: var(--tc-text);
  font-family: 'Roboto Condensed', sans-serif;
  margin-top: 3px;
}
.tc-row-label {
  background: var(--tc-bg-lighter);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tc-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 1px solid var(--tc-border);
}

/* ---- ツールボタン群 ---- */
.tc-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0 0;
  margin-bottom: 10px;
}
.tc-tools__label {
  font-size: 13px;
  color: var(--tc-text);
  align-self: center;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.tc-tools__btn {
  padding: 6px 14px;
  border: 1px solid var(--tc-border-strong);
  border-radius: 4px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-text);
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.5;
}
.tc-tools__btn:hover {
  border-color: var(--tc-text);
  color: var(--tc-text);
  background: var(--tc-bg-light);
}
.tc-tools__btn--primary {
  background: var(--tc-text);
  color: var(--tc-bg);
  border-color: var(--tc-text);
}
.tc-tools__btn--primary:hover {
  background: var(--tc-text);
  border-color: var(--tc-text);
  color: var(--tc-bg);
}
.tc-tools__btn.is-active {
  background: var(--tc-text);
  color: var(--tc-bg);
  border-color: var(--tc-text);
}
.tc-tools__btn.is-active:hover {
  background: var(--tc-text);
  border-color: var(--tc-text);
  color: var(--tc-bg);
}

/* ---- セーフティ表示 ---- */
.tc-safe {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--tc-text);
}
.tc-safe i {
  font-size: 13px;
}

/* ---- FAQ（tc-faq系：ツール本体内のアコーディオン用） ---- */
.tc-faq {
  margin: 16px 0;
}
.tc-faq__item {
  border-bottom: 1px dotted var(--tc-border);
}
.tc-faq__item:first-child {
  border-top: 1px dotted var(--tc-border);
}
.tc-faq__q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--tc-text);
  line-height: 1.6;
  transition: color 0.2s;
}
.tc-faq__q::-webkit-details-marker {
  display: none;
}
.tc-faq__q:hover {
  color: var(--tc-accent);
}
.tc-faq__q-mark {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--tc-accent);
  flex-shrink: 0;
  line-height: 1.4;
}
.tc-faq__q-text {
  flex: 1;
}
.tc-faq__icon {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 16px;
  color: var(--tc-border-strong);
  transition: transform 0.25s;
}
details[open] .tc-faq__icon {
  transform: rotate(180deg);
}
.tc-faq__a {
  padding: 0 4px 18px 34px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--tc-text-muted);
}
.tc-faq__a-mark {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #c84b31;
  margin-right: 8px;
}

/* ---- トースト通知 ---- */
.tc-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--tc-text);
  color: #f0f0e9;
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 13px;
  opacity: 0;
  transition: all 0.25s;
  pointer-events: none;
  z-index: 10010; /* .tc-tool.is-fullscreen(9999)/.tc-tool-close(10000)より前面 */
}
.tc-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---- レスポンシブ ---- */
@media (max-width: 600px) {
  .tc-stats-row--4,
  .tc-stats-row--4b {
    grid-template-columns: repeat(2, 1fr);
  }
  .tc-stat__num {
    font-size: 34px;
  }
  .tc-stat--sub .tc-stat__num {
    font-size: 26px;
  }
  .tc-stat--type .tc-stat__num {
    font-size: 22px;
  }
}

/* =========================================================
   モーダル展開（フルスクリーン）共通スタイル
   /tools/ モーダル展開UI仕様書 v1.1 準拠
   対象：②-A modal(共有) / ②-B modal(専用) のツール
   - .tc-tool は記事内の「ツール本体」だけを囲むラッパー
     （.tc-wrap＝記事全体ラッパーとは別レイヤー。
      ヒーロー画像・目次・本文・FAQ等は対象外）
   - パターン②-Bの「遅延初期化」ロジック自体は各ツールのJSで実装する
     （WebGLコンテキストの生成/破棄など）
   ========================================================= */

.tc-tool {
  position: relative;
}

/* 「フルスクリーンで開く」ボタンの配置行
   ボタン自体（tools_link）の装飾はテーマ側のスタイルに準拠 */
.tc-tool-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

/* 閉じる（×）ボタン：通常時は非表示、展開時のみ表示 */
.tc-tool-close {
  display: none;
  position: fixed;
  top: 14px;
  right: 38px;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tc-border-strong);
  border-radius: 50%;
  background: var(--tc-bg);
  color: var(--tc-text);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  z-index: 10000;
  transition: all 0.15s;
}
.tc-tool-close:hover {
  background: var(--tc-text);
  color: var(--tc-bg);
  border-color: var(--tc-text);
}

/* ライト/ダーク切替トグルスイッチ：通常時は非表示、展開時のみ表示
   閉じるボタンの左隣に配置（right: 14+36+10 = 60px） */
.tc-tool-theme-toggle {
  display: none;
  align-items: center;
  position: fixed;
  top: 14px;
  right: 75px;
  width: 60px;
  height: 30px;
  padding: 3px;
  border: 1px solid var(--tc-border-strong);
  border-radius: 999px;
  background: var(--tc-bg-lighter);
  cursor: pointer;
  z-index: 10000;
  transition: background 0.2s, border-color 0.2s;
}

/* つまみ */
.tc-tool-theme-knob {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tc-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--tc-text);
}

/* SVGアイコン共通 */
.tc-theme-icon {
  width: 14px;
  height: 14px;
  position: absolute;
}

/* ライト時：太陽表示・月非表示 */
.tc-theme-icon--sun  { display: block; }
.tc-theme-icon--moon { display: none;  }

/* ダーク時：月表示・太陽非表示 */
.tc-tool-theme-toggle.is-dark .tc-theme-icon--sun  { display: none;  }
.tc-tool-theme-toggle.is-dark .tc-theme-icon--moon { display: block; }

/* ダーク時：つまみを右へ */
.tc-tool-theme-toggle.is-dark .tc-tool-theme-knob {
  transform: translateX(26px);
  background: #1e1e1e;
  color: #f0f0f0;
}
.tc-tool-theme-toggle.is-dark {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
}

/* 展開時に表示 */
.tc-tool.is-fullscreen .tc-tool-close,
.tc-tool.is-fullscreen .tc-tool-theme-toggle {
  display: flex;
}

/* 展開状態（基本＝②-A：Wideサイズ・ライト継承） */
.tc-tool.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;   /* フォールバック */
  height: 100dvh;  /* iOS Safari対策。後勝ちで上書き */
  overflow-y: auto;
  background: var(--tc-bg);
  color: var(--tc-text);
  padding: 56px 24px 24px;
}
.tc-tool.is-fullscreen .tc-tool-bar {
  display: none;
}
.tc-tool.is-fullscreen .tc-tool-close,
.tc-tool.is-fullscreen .tc-tool-theme-toggle {
  display: flex;
}


/* =====================================================
   ダークテーマ：ユーザーが任意に切替可能（全②モーダルツール共通）
   --tc-* 変数をこのスコープ内だけ上書きすることで、
   tc-/sg-/ez- 等すべての既存・将来のツールCSSが
   個別対応なしで自動的にダーク表示になる。
   配色は既存シェーダーツール(fluted-glass-domainwarp)を
   ベースに、本文用途向けにコントラストを強めに調整。
   ===================================================== */
.tc-tool.is-fullscreen.is-dark {
  --tc-text: #f0f0f0;
  --tc-text-muted: #9a9a9a;
  --tc-placeholder: #6b6b6b;
  --tc-border: rgba(255,255,255,0.10);
  --tc-border-strong: rgba(255,255,255,0.22);
  --tc-bg: #0a0a0a;
  --tc-bg-light: #141414;
  --tc-bg-lighter: #1e1e1e;
  --tc-bg-stripe: #161616;
  --tc-bg-highlight: #182018;
  --tc-accent: #6fa0c9;
  --tc-track: #2a2a2a;
  --tc-track-alt: #333;
}

@media (max-width: 680px) {
  .tc-tool.is-fullscreen {
    padding: 56px 16px 16px;
  }
}

/* 背景スクロール防止（body側） */
body.tc-modal-open {
  overflow: hidden;
}

/* =========================================================
   ここから下：tools-sg.css（CSSジェネレーター系 共通スタイル）
   ========================================================= */

/* ---- タブ（ボックス型・2段ラベル） ---- */
.sg-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.sg-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 20px;
  border: 1px solid var(--tc-border);
  border-radius: 6px;
  background: var(--tc-bg-light);
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  min-width: 110px;
}
.sg-tab__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--tc-text-muted);
  line-height: 1;
}
.sg-tab__sub {
  font-size: 10px;
  font-family: 'Roboto Mono', 'Courier New', monospace;
  color: var(--tc-placeholder);
  line-height: 1;
}
.sg-tab.is-active {
  background: var(--tc-text);
  border-color: var(--tc-text);
}
.sg-tab.is-active .sg-tab__label {
  color: #fff;
}
.sg-tab.is-active .sg-tab__sub {
  color: rgba(255,255,255,0.6);
}
.sg-tab:not(.is-active):hover {
  border-color: var(--tc-border-strong);
}
.sg-tab:not(.is-active):hover .sg-tab__label {
  color: var(--tc-text);
}

/* ---- 2カラムレイアウト ---- */
.sg-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 660px) {
  .sg-layout {
    grid-template-columns: 1fr;
  }
}

/* ---- コントロール列 ---- */
.sg-ctrl-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--tc-bg-light);
  border: 1px solid var(--tc-border);
  border-radius: 6px;
}
.sg-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tc-text-muted);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--tc-border);
  margin-top: 6px;
}
.sg-ctrl-col > .sg-section-label:first-child {
  margin-top: 0;
}

/* ---- 外側・内側トグル ---- */
.sg-inset-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--tc-border-strong);
  border-radius: 4px;
  overflow: hidden;
}
.sg-inset-btn {
  flex: 1;
  padding: 7px 10px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-text-muted);
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}
.sg-inset-btn.is-active {
  background: var(--tc-text);
  color: var(--tc-bg);
}
.sg-inset-btn + .sg-inset-btn {
  border-left: 1px solid var(--tc-border-strong);
}

/* ---- スライダー ---- */
.sg-slider-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sg-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sg-lbl {
  width: 72px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--tc-text);
  font-weight: 500;
}
.sg-range {
  flex: 1;
  min-width: 0;
  accent-color: var(--tc-accent);
  cursor: pointer;
}
.sg-num {
  width: 46px;
  padding: 3px 5px;
  border: 1px solid var(--tc-border-strong);
  border-radius: 4px;
  font-size: 12px;
  font-family: 'Roboto Condensed', sans-serif;
  color: var(--tc-text);
  text-align: right;
  outline: none;
  -moz-appearance: textfield;
  background: var(--tc-bg);
}
.sg-num::-webkit-inner-spin-button,
.sg-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sg-num:focus { border-color: var(--tc-text); }
.sg-unit {
  width: 18px;
  font-size: 11px;
  color: var(--tc-text-muted);
  flex-shrink: 0;
}

/* ---- カラー行 ---- */
.sg-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sg-picker-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.sg-picker-wrap input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
}
.sg-swatch {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: 1px solid var(--tc-border-strong);
  pointer-events: none;
  flex-shrink: 0;
}
.sg-hex {
  flex: 1;
  min-width: 0;
  padding: 4px 7px;
  border: 1px solid var(--tc-border-strong);
  border-radius: 4px;
  font-size: 12px;
  font-family: 'Roboto Mono', 'Courier New', monospace;
  color: var(--tc-text);
  outline: none;
  text-transform: uppercase;
  background: var(--tc-bg);
}
.sg-hex:focus { border-color: var(--tc-text); }

/* ---- プリセット ---- */
.sg-preset-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.sg-preset-btn {
  padding: 4px 12px;
  border: 1px solid var(--tc-border-strong);
  border-radius: 20px;
  background: var(--tc-bg);
  font-size: 11px;
  font-weight: 700;
  color: var(--tc-text);
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.5;
}
.sg-preset-btn:hover {
  background: var(--tc-text);
  color: var(--tc-bg);
  border-color: var(--tc-text);
}

/* ---- プレビュー列 ---- */
.sg-preview-col {
  display: flex;
  flex-direction: column;
}
.sg-canvas {
  flex: 1;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid var(--tc-border);
  border-radius: 6px 6px 0 0;
  transition: background 0.2s;
  overflow: hidden;
}
@media (max-width: 660px) {
  .sg-canvas { min-height: 180px; }
}

/* ---- BOX プレビュー要素 ---- */
.sg-preview-box {
  width: 160px;
  height: 90px;
  background: #ffffff;
  border-radius: 8px;
  transition: box-shadow 0.12s, background 0.12s, border-radius 0.12s;
}

/* ---- DROP アップロード ---- */
.sg-drop-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 300px;
  cursor: pointer;
  transition: background 0.15s;
}
@media (max-width: 660px) {
  .sg-drop-upload { min-height: 180px; }
}
.sg-drop-upload.is-dragover { background: var(--tc-bg-lighter); }
.sg-drop-upload__icon svg {
  width: 36px;
  height: 36px;
  color: var(--tc-border-strong);
}
.sg-drop-upload__text {
  font-size: 13px;
  color: var(--tc-text-muted);
  text-align: center;
  line-height: 1.6;
}
.sg-drop-upload__text span {
  font-size: 11px;
  color: var(--tc-placeholder);
}
.sg-drop-result {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  width: 100%;
  height: 100%;
  min-height: 300px;
}
@media (max-width: 660px) {
  .sg-drop-result { min-height: 180px; }
}
.sg-drop-result img {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  display: block;
}
.sg-reset-btn {
  padding: 4px 14px;
  border: 1px solid var(--tc-border-strong);
  border-radius: 4px;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  color: var(--tc-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.sg-reset-btn:hover { border-color: var(--tc-text); color: var(--tc-text); }

/* ---- TEXT プレビュー ---- */
.sg-preview-text {
  font-weight: 900;
  letter-spacing: -0.02em;
  transition: text-shadow 0.12s, color 0.12s, font-size 0.12s;
  user-select: none;
  padding: 20px;
  text-align: center;
  word-break: break-all;
}

/* ---- テキスト入力オプション ---- */
.sg-text-input {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--tc-border-strong);
  border-radius: 4px;
  font-size: 13px;
  color: var(--tc-text);
  outline: none;
  background: var(--tc-bg);
}
.sg-text-input:focus { border-color: var(--tc-text); }

/* ---- コード出力 ---- */
.sg-code-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--tc-bg-light);
  border: 1px solid var(--tc-border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  flex-wrap: wrap;
}
.sg-code {
  flex: 1;
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-size: 12px;
  color: var(--tc-text);
  word-break: break-all;
  min-width: 0;
}
.sg-copy-btn {
  padding: 5px 16px;
  border: 1px solid var(--tc-border-strong);
  border-radius: 4px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-text);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
}
.sg-copy-btn:hover {
  background: var(--tc-text);
  color: var(--tc-bg);
  border-color: var(--tc-text);
}
/* モーダル展開時：sg-layoutを100dvh化 */
.tc-tool.is-fullscreen .sg-layout {
  height: calc(100dvh - 120px);
  align-items: stretch;
}
.tc-tool.is-fullscreen .sg-preview-col {
  height: 100%;
  min-height: unset;
}
.tc-tool.is-fullscreen .sg-canvas {
  height: 100%;
  min-height: unset;
}