/* =====================================================================
   style.css — メタタグ（OGP）生成 ツール固有の微調整のみ。
   共通スタイルは /_shared/shirugear.css に任せる。
   ここでは入力テキストエリアと生成結果の出力欄のみ定義する。
   ===================================================================== */

/* 補助ラベルを入力直下に詰める */
.sg-field .sg-help {
  margin-top: var(--sg-space-1);
}

/* 区切り線 */
.sg-hr {
  border: none;
  border-top: 1px solid var(--sg-border, rgba(127, 127, 127, 0.25));
  margin: var(--sg-space-4) 0;
}

/* 入力用テキストエリア（説明欄） */
.mt-textarea {
  resize: vertical;
  min-height: 3.2em;
  line-height: 1.5;
}

/* 生成結果の出力欄（読み取り専用・等幅） */
.mt-output {
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--sg-space-2);
  padding: var(--sg-space-3);
  border: 1px solid var(--sg-border, rgba(127, 127, 127, 0.25));
  border-radius: var(--sg-radius, 8px);
  background: var(--sg-surface-2, rgba(127, 127, 127, 0.06));
  color: var(--sg-text, inherit);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
  resize: vertical;
}

.mt-output:focus {
  outline: 2px solid var(--sg-primary, #3b5bdb);
  outline-offset: 1px;
}