/* =============================================================================
   RepurposeKit — アプリ固有スタイル（base.css の上に重ねる）
   accent は blue 系。base.css のトークンを上書きするだけで全UIが再テーマされる。
   ========================================================================== */

:root {
  --accent: 222 89% 58%;
  --accent-strong: 222 86% 50%;
  --accent-soft: 222 92% 96%;
  --accent-ink: 0 0% 100%;
  --accent-ring: 222 89% 58% / 0.35;
}
[data-theme="dark"] { --accent-soft: 222 55% 18%; }

/* ---- ランディング: ヒーロー ---------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70%;
  background: radial-gradient(60% 80% at 70% 0%, hsl(var(--accent) / 0.10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 5px 12px; border-radius: var(--r-full);
  background: hsl(var(--accent-soft)); color: hsl(var(--accent-strong));
  font-size: var(--text-xs); font-weight: 650; letter-spacing: .01em;
  border: 1px solid hsl(var(--accent) / 0.18);
}
.hero h1 {
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  line-height: 1.08; letter-spacing: -0.03em; font-weight: 760;
  max-width: 16ch;
}
.hero .lead { max-width: 52ch; }
.hero-accent { color: hsl(var(--accent-strong)); }

/* 2カラム→1カラム（モバイル）に確実に畳むレイアウト */
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: var(--s-10); align-items: center;
}
.split-2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-10); align-items: center;
}
/* グリッド子の min-width:auto による はみ出しを防ぐ */
.hero-grid > *, .split-2 > * { min-width: 0; }
@media (max-width: 880px) {
  .hero-grid, .split-2 { grid-template-columns: 1fr; gap: var(--s-8); }
}

/* 入力→5SNS のビジュアル */
.flow-viz {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-5);
  align-items: center;
}
.flow-cards { display: flex; flex-direction: column; gap: var(--s-2); }
.flow-pill {
  display: flex; align-items: center; gap: .55rem;
  padding: 9px 12px; border-radius: var(--r-md);
  border: 1px solid hsl(var(--border)); background: hsl(var(--surface));
  font-size: var(--text-sm); font-weight: 600; box-shadow: var(--shadow-xs);
}
.flow-pill svg { width: 16px; height: 16px; }
.flow-arrow { color: hsl(var(--ink-4)); display: grid; place-items: center; }
@media (max-width: 760px) {
  .flow-viz { grid-template-columns: 1fr; }
  .flow-arrow { transform: rotate(90deg); justify-self: center; }
}

/* 信頼バー */
.trust-row {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  color: hsl(var(--ink-3)); font-size: var(--text-sm);
}
.trust-row .row { gap: .4rem; }
.trust-row svg { width: 16px; height: 16px; color: hsl(var(--green)); }

/* 機能セクション */
.feature-card { padding: var(--s-6); }
.feature-ico {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: var(--r-md); background: hsl(var(--accent-soft));
  color: hsl(var(--accent-strong)); margin-bottom: var(--s-3);
}
.feature-ico svg { width: 22px; height: 22px; }

/* 料金カード */
.price-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .price-grid { grid-template-columns: 1fr; } }
.price-card { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6); position: relative; }
.price-card.featured { border-color: hsl(var(--accent) / 0.5); box-shadow: var(--shadow-md); }
.price-amount { font-size: var(--text-4xl); font-weight: 760; letter-spacing: -0.02em; }
.price-amount small { font-size: var(--text-md); font-weight: 500; color: hsl(var(--ink-3)); }
.price-feat { display: flex; flex-direction: column; gap: var(--s-2); }
.price-feat li { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--text-md); color: hsl(var(--ink-2)); }
.price-feat svg { width: 17px; height: 17px; color: hsl(var(--accent-strong)); flex: none; margin-top: 2px; }
.price-ribbon {
  position: absolute; top: -11px; right: var(--s-5);
  padding: 3px 10px; border-radius: var(--r-full);
  background: hsl(var(--accent)); color: hsl(var(--accent-ink));
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em;
}

/* セクション共通 */
.section { padding: clamp(3rem, 6vw, 5rem) 0; }
.section-head { max-width: 56ch; margin-bottom: var(--s-8); }

/* サイトヘッダ／フッタ */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky, 50);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-3) 0;
  background: hsl(var(--surface) / 0.82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid hsl(var(--border));
}
.site-footer { border-top: 1px solid hsl(var(--border)); background: hsl(var(--surface-2)); margin-top: var(--s-8); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-6); padding: var(--s-12) 0 var(--s-8); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
.footer-grid h4 { font-size: var(--text-sm); color: hsl(var(--ink-3)); font-weight: 650; margin-bottom: var(--s-3); }
.footer-grid a { display: block; padding: 3px 0; color: hsl(var(--ink-2)); font-size: var(--text-md); }
.footer-grid a:hover { color: hsl(var(--accent-strong)); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; align-items: center; padding: var(--s-4) 0; border-top: 1px solid hsl(var(--border)); color: hsl(var(--ink-3)); font-size: var(--text-sm); }

/* ---- アプリシェル: デスクトップではスクリムをグリッドから除外 -------------
   base.css ではスクリムが 880px 超で position:static のままグリッド項目に
   なり、2カラム目を占有して .main が潰れる。デスクトップでは非表示にする。 */
.sidebar-scrim { display: none; }
@media (max-width: 880px) {
  .sidebar-scrim { display: block; }
}

/* ---- アプリ本体: ワークスペース 2カラム ---------------------------------- */
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-5); align-items: start; }
@media (max-width: 980px) { .workspace { grid-template-columns: 1fr; } }

.editor-panel, .output-panel { display: flex; flex-direction: column; min-width: 0; }
.editor-area {
  width: 100%; min-height: 320px; resize: vertical;
  font-size: var(--text-base); line-height: 1.7;
}
@media (max-width: 980px) { .editor-area { min-height: 220px; } }

.editor-toolbar { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.char-readout { font-variant-numeric: tabular-nums; color: hsl(var(--ink-3)); font-size: var(--text-sm); }

/* 出力タブ */
.out-tabs { display: flex; gap: var(--s-1); flex-wrap: wrap; border-bottom: 1px solid hsl(var(--border)); }
.out-tab {
  position: relative; display: inline-flex; align-items: center; gap: .45rem;
  padding: var(--s-3) var(--s-3); font-size: var(--text-md); font-weight: 560;
  color: hsl(var(--ink-3)); transition: color var(--dur-2) var(--ease);
}
.out-tab svg { width: 16px; height: 16px; }
.out-tab::after {
  content: ""; position: absolute; left: var(--s-2); right: var(--s-2); bottom: -1px;
  height: 2px; background: hsl(var(--accent)); border-radius: 2px 2px 0 0;
  transform: scaleX(0); transition: transform var(--dur-2) var(--ease);
}
.out-tab:hover { color: hsl(var(--ink)); }
.out-tab[aria-selected="true"] { color: hsl(var(--ink)); }
.out-tab[aria-selected="true"]::after { transform: scaleX(1); }
.out-tab .tab-warn { color: hsl(var(--red)); }

/* ルール説明バッジ */
.rule-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: 4px 9px; border-radius: var(--r-sm);
  background: hsl(var(--bg-muted)); color: hsl(var(--ink-2));
  font-size: var(--text-xs); font-weight: 550; font-variant-numeric: tabular-nums;
}
.rule-badge svg { width: 13px; height: 13px; color: hsl(var(--ink-3)); }

/* 出力カード（X はスレッド複数） */
.post-card {
  border: 1px solid hsl(var(--border)); border-radius: var(--r-md);
  background: hsl(var(--surface)); padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.post-card + .post-card { margin-top: var(--s-3); }
.post-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.post-body {
  white-space: pre-wrap; word-break: break-word; line-height: 1.7;
  font-size: var(--text-base); color: hsl(var(--ink));
}
.count-pill {
  font-variant-numeric: tabular-nums; font-size: var(--text-xs); font-weight: 650;
  padding: 3px 9px; border-radius: var(--r-full);
  background: hsl(var(--bg-muted)); color: hsl(var(--ink-2));
}
.count-pill.over { background: hsl(var(--red-soft)); color: hsl(var(--red)); }
.count-pill.warn { background: hsl(var(--amber-soft)); color: hsl(38 80% 38%); }

/* 残回数メーター */
.quota-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: 5px 11px; border-radius: var(--r-full);
  background: hsl(var(--bg-muted)); font-size: var(--text-sm); font-weight: 600;
  color: hsl(var(--ink-2));
}
.quota-chip svg { width: 15px; height: 15px; color: hsl(var(--accent-strong)); }
.quota-chip.empty { background: hsl(var(--amber-soft)); color: hsl(38 80% 38%); }

/* AI 語調セグメント行 */
.tone-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* 法務ページ */
.legal-body { max-width: 760px; }
.legal-body h2 { font-size: var(--text-xl); margin-top: var(--s-8); margin-bottom: var(--s-3); letter-spacing: -0.01em; }
.legal-body h3 { font-size: var(--text-base); font-weight: 650; margin-top: var(--s-5); margin-bottom: var(--s-2); }
.legal-body p, .legal-body li { line-height: 1.85; color: hsl(var(--ink-2)); }
.legal-body ul { padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--s-1); }
.legal-body ul li { list-style: disc; }
.legal-table { width: 100%; border-collapse: collapse; margin: var(--s-3) 0; }
.legal-table th, .legal-table td { text-align: left; padding: var(--s-3) var(--s-4); border: 1px solid hsl(var(--border)); vertical-align: top; font-size: var(--text-md); }
.legal-table th { background: hsl(var(--surface-2)); width: 32%; font-weight: 600; color: hsl(var(--ink-2)); }

/* 小さめモバイル微調整 */
@media (max-width: 480px) {
  .hero h1 { max-width: none; }
  .editor-toolbar { gap: var(--s-1); }
}

/* リンク（インライン文中） */
.link { color: hsl(var(--accent-strong)); text-decoration: underline; text-underline-offset: 2px; }
.link:hover { color: hsl(var(--accent)); }

/* レスポンシブ表示ユーティリティ（base.css に無い分を補う） */
.show-mobile { display: none; }
@media (max-width: 880px) {
  .show-mobile { display: inline-flex; }
  .hide-sm { display: none !important; }
}

/* プリント/印刷では装飾背景を消す */
@media print { .hero::before { display: none; } }