/* ツールの見出し（xmediadownload.css と同じ） */
.tool-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding-top: var(--space-2);
}
.tool-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-accent-200);
  color: var(--color-accent-800);
}
.tool-head h1 { font-size: 28px; margin: 0; }
/* 狭い画面では語の途中ではなく「X（Twitter）」の後ろで折り返す */
.nowrap { display: inline-block; }
.lead { margin: 0; color: var(--color-neutral-800); }

/* 入力欄 */
.tool-body { margin-top: var(--space-6); }
.input-label { display: block; margin-bottom: var(--space-1); font-size: 13px; color: var(--color-neutral-800); }
#text, #output {
  display: block;
  min-height: 96px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: 16px; /* 16px未満だとiOSでズームされる */
  line-height: 1.6;
  overflow-wrap: anywhere;
}
#text { resize: vertical; }

/* 装飾ボタン（xtextdecoration.js がグループごとに作る） */
.style-group { margin-top: var(--space-6); }
.style-group h2 { font-size: 20px; margin: 0; }
.style-group .note { margin: var(--space-1) 0 0; color: var(--color-neutral-700); font-size: 13px; }
.style-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.deco-btn {
  min-width: 0;
  min-height: 48px;
  border-color: transparent;
  background: var(--color-surface);
  /* 装飾した文字を見せるので、見出し用の書体ではなく本文の書体で表示する */
  font-family: var(--font-body);
  font-size: 16px;
}
.deco-btn:hover { background: var(--color-accent-100); }
.deco-btn[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-200); color: var(--color-accent-900); }
.deco-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* 装飾後のテキスト */
.result { margin-top: var(--space-8); scroll-margin-top: 88px; /* sticky ヘッダーの下に隠れないように */ }
.result h2 { font-size: 24px; margin: 0; }
#status { margin: var(--space-2) 0; min-height: 1.55em; color: var(--color-neutral-700); }
#status.error { color: var(--color-accent-700); font-weight: 600; }
#output { resize: none; overflow: hidden; /* 高さは xtextdecoration.js で中身に合わせる */ }
.result .btn { min-height: 48px; font-size: 15px; white-space: nowrap; }
.actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.actions .btn { flex: 1; min-width: 0; }
/* 装飾前の「Xを開く」（href なし）は押せない見た目にする */
.actions a.btn:not([href]) { opacity: 0.45; cursor: not-allowed; }
#copyBtn.copied { border-color: var(--color-accent-2); background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.hint { margin: var(--space-3) 0 0; color: var(--color-neutral-700); font-size: 13px; }
.back-link { min-height: 44px; margin-top: var(--space-4); color: var(--color-accent-700); }

/* 使い方・FAQ（検索エンジン向けの説明コンテンツ。xmediadownload.css と同じ） */
.guide { margin-top: var(--space-8); }
.guide h2 { font-size: 24px; margin: var(--space-8) 0 var(--space-3); }
.guide h3 { font-size: 17px; margin: var(--space-4) 0 var(--space-1); }
.guide p { margin: 0; }
.guide ol { margin: 0; padding-left: 1.4em; }
.guide li + li { margin-top: var(--space-2); }
.guide details {
  margin-top: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.guide summary {
  padding: var(--space-3) var(--space-4); /* タップしやすい高さを確保 */
  font-weight: 600;
  cursor: pointer;
}
.guide summary:hover { color: var(--color-accent-700); }
.guide details p { padding: 0 var(--space-4) var(--space-3); color: var(--color-neutral-800); }