/* ============================================================
   marketing.css — マーケサイト専用 ライト基調レイヤー (インク・ミニマル).
   スコープは .mkt 配下のみ. 公開 LP (lp.css / .lp-page) には一切影響しない.
   ⚠️ .mkt の付かない裸の .lp-page / .lp-section / --color-* セレクタを
      絶対に書かないこと (原則B = 公開LPユーザーカラー不侵食).
   SSOT: docs/design/2026-06-01-design-language.md
   2026-06-06: dark (near-black ink-950) → light に反転 (MKT-LIGHT-D03).
     token 名 (--ink-*) は据え置き、値だけ意味反転で marketing.css 全体は無修正で動く.
     エディタはダーク継続 (globals.css の ink-* は dark のまま不変).
   ============================================================ */
.mkt {
  /* ink 9 段 (light に意味反転、token 名据え置き)
     950 = page bg (最も淡い off-white)、0 = 見出し near-black 文字 */
  --ink-950: #fafafa; /* page bg (off-white) */
  --ink-900: #ffffff; /* card / section surface (white) */
  --ink-800: #f3f4f6; /* hover / 交互 surface */
  --ink-700: #e5e7eb; /* hairline / border */
  --ink-600: #cbd5e1; /* subdued border */
  --ink-500: #6b7280; /* muted text (footnote 等) */
  --ink-400: #94a3b8; /* very muted */
  --ink-300: #475569; /* body text (暗灰、AA 達成) */
  --ink-100: #334155; /* secondary heading */
  --ink-0: #0f172a; /* heading text (near-black、AA AAA 達成) */
  --accent: #a07d3e; /* 真鍮 (light bg 上 4.5:1 AA 達成、旧 #c9a86a は 2.3:1 で AA 未達) */
  --accent-strong: #7a5e2b; /* hover / 強調 (より暗い、6.5:1) */
  --accent-soft: #a07d3e1f; /* background tint (12% alpha) */
  --positive: #16a34a;
  --danger: #dc2626;
  --mkt-font-display: "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --mkt-font-sans: "Hiragino Kaku Gothic ProN", "Yu Gothic UI", system-ui, sans-serif;
  /* ライト面用に影を上品に淡く再定義 (tokens.css --shadow-md/lg と整合) */
  --mkt-shadow-md: 0 1px 2px rgba(20, 22, 28, 0.04), 0 4px 10px -2px rgba(20, 22, 28, 0.08);
  --mkt-shadow-lg: 0 2px 4px rgba(20, 22, 28, 0.04), 0 12px 28px -8px rgba(20, 22, 28, 0.14);
  /* 2026-06-06 MKT-LIGHT-A06: 角丸 3 種 SSOT (design-language §6)。
     カード = 12px、ボタン = 8px、pill = 999px。全マーケサイトでこの 3 種に統一。 */
  --mkt-radius-card: 12px;
  --mkt-radius-btn: 8px;
  --mkt-radius-pill: 999px;
  /* 2026-06-06 D-CROSS-07: コンテナ幅 SSOT (2 種に統一).
     lg = 1140px (3 カラム以上のグリッド), md = 768px (本文中心の縦長 page).
     全マーケサイトで個別宣言を撤去しこの 2 種を参照する。 */
  --container-lg: 1140px;
  --container-md: 768px;

  background-color: var(--ink-950);
  color: var(--ink-0);
  font-family: var(--mkt-font-sans);
  color-scheme: light;
}

/* タイポ階層 (明朝見出し + ゴシック本文) */
.mkt h1,
.mkt h2,
.mkt h3 {
  font-family: var(--mkt-font-display);
  font-weight: 600;
  color: var(--ink-0);
}
/* 2026-06-06 D-GAL-03 / D-CROSS-05: マーケサイト h1 SSOT.
   gallery / pricing / company / roadmap / legal の個別 font-size 宣言を撤去し
   ここに集約。Hero (.mkt h1.hero-h1 / .mkt .hero__headline) のみ別途上書き可。 */
.mkt h1 {
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}
.mkt h2 {
  letter-spacing: -0.005em;
}
.mkt p {
  color: var(--ink-300);
  line-height: 1.7;
}

/* セクション (ゆとり余白 + 交互 surface) */
.mkt-section {
  padding-block: var(--space-16, 4rem);
  background-color: var(--ink-950);
}
.mkt-section--surface {
  background-color: var(--ink-900);
}
@media (min-width: 768px) {
  .mkt-section {
    padding-block: var(--space-24, 6rem);
  }
}

/* コンテナ */
.mkt-container {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--space-4, 1rem);
}

/* カード (A06: radius SSOT = --mkt-radius-card 12px に統一) */
.mkt-card {
  background-color: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: var(--mkt-radius-card);
  padding: var(--space-6, 1.5rem);
  box-shadow: var(--mkt-shadow-md);
}

/* ボタン (primary = 真鍮塗 + 白文字, light 基調 design-language §6 反転版)
   A06: radius SSOT = --mkt-radius-btn 8px に統一 */
.mkt-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: var(--mkt-radius-btn);
  padding: 0.875rem 1.75rem;
  font-weight: 600;
  min-height: 44px;
  text-decoration: none;
  transition:
    background-color 250ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mkt-btn-primary:hover,
.mkt-btn-primary:focus-visible {
  background-color: var(--accent-strong);
  box-shadow: 0 6px 18px -4px rgba(160, 125, 62, 0.4);
}
/* UX-P29: スマホ全幅 CTA modifier */
.mkt-btn-primary--block {
  display: flex;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}
@media (max-width: 480px) {
  .mkt-btn-primary--block {
    max-width: 100%;
  }
}
.mkt-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--ink-0);
  border: 1px solid var(--accent);
  border-radius: var(--mkt-radius-btn);
  padding: 0.875rem 1.75rem;
  min-height: 44px;
  text-decoration: none;
  transition:
    background-color 250ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mkt-btn-secondary:hover,
.mkt-btn-secondary:focus-visible {
  background-color: var(--accent-soft);
  box-shadow: 0 6px 18px -4px rgba(160, 125, 62, 0.3);
}

/* リンク / フォーカスリング (真鍮, a11y 必須).
   ボタン類 (.mkt-btn-*, .hero__cta, .cta__button) は除外 — これらは白ボタン等
   独自の前景色を持つため汎用リンク真鍮を被せない (白ボタン上の真鍮文字は AA 未達)。
   /pricing の plan CTA / 最終 CTA (白ボタン) も同様に除外 (Task 15, 2026-06-02)。 */
/* 汎用リンク色 (a) は真鍮 accent。ただしボタン類は除外 (前景色をボタン定義で確定するため)。
   2026-06-06 MKT-LIGHT-A03: light 化に伴い「真鍮塗 + 白文字」CTA 全部を exclusion に追加。 */
.mkt
  a:not(.mkt-btn-primary):not(.mkt-btn-secondary):not(.hero__cta):not(.cta__button):not(
    .plan__cta
  ):not(.pricing-final-cta__cta):not(.pricing-free-banner__cta):not(.company-cta-button):not(
    .cta-primary
  ):not(.cta-secondary):not(.marketing-nav__cta) {
  color: var(--accent);
}
.mkt
  a:not(.mkt-btn-primary):not(.mkt-btn-secondary):not(.pricing-free-banner__cta):not(
    .company-cta-button
  ):not(.cta-primary):not(.marketing-nav__cta):hover {
  color: var(--accent-strong);
}
.mkt :focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--ink-950),
    0 0 0 4px var(--accent);
}

/* 共通セクション補助 (新セクションで使う) */
.mkt-grid-3 {
  display: grid;
  gap: var(--space-6, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .mkt-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
.mkt-stat {
  font-family: var(--mkt-font-display);
  font-size: var(--fs-2xl, 1.75rem);
  color: var(--ink-0);
}
.mkt-footnote {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--ink-500);
  margin-top: var(--space-4, 1rem);
}

/* Task 13: 新セクション (N1/N3/N5/N6/N8) 用 */
/* h2 の下にゆとり + センタリング */
.mkt-section h2 {
  text-align: center;
  margin-bottom: var(--space-12, 3rem);
}
/* DESIGN-05: 見出し直下に accent ライン。h2 を「段落見出し」から
   「セクションの顔」へ。視覚的重量を上げ、プロのサービス感を出す。 */
.mkt-section h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin: 0.75rem auto 0;
  background: var(--accent);
  border-radius: 2px;
}
.mkt-card h3 {
  margin-top: 0;
  margin-bottom: var(--space-3, 0.75rem);
}
/* 使い方ステップ (N5) */
.mkt-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .mkt-steps {
    grid-template-columns: repeat(4, 1fr);
  }
  /* DESIGN-06: デスクトップでステップ間を accent グラデで繋ぎ「流れ」を可視化。
     番号丸の高さに合わせ、最後のステップ以外の右側にコネクターを出す。 */
  .mkt-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1rem;
    right: calc(var(--space-6, 1.5rem) / -2);
    width: var(--space-6, 1.5rem);
    height: 1px;
    background: linear-gradient(90deg, var(--accent), transparent);
    transform: translateX(-50%);
  }
}
.mkt-steps li {
  position: relative;
}
.mkt-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--accent);
  color: var(--ink-950);
  font-family: var(--mkt-font-display);
  font-weight: 600;
  margin-bottom: var(--space-3, 0.75rem);
}
/* 料金の価値訴求 (N6) / 安心材料 (N8) はセンタリング */
.mkt-value-prop,
.mkt-assurance {
  text-align: center;
}
.mkt-value-prop p {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-6, 1.5rem);
}
/* UX-P29: N8 安心材料直下の全幅 CTA ラッパー */
.mkt-assurance__cta {
  margin-top: var(--space-8, 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}
.mkt-assurance__microcopy {
  font-size: 0.8125rem;
  color: var(--ink-400);
  margin: 0;
}

/* ============================================================
   Puck セクション (.lp-page 内) は lp.css default (light) に委譲.
   2026-06-06 MKT-LIGHT-D02: dark override を撤去し lp.css の light 色をそのまま使う.
   公開 LP と同一 light スタイルで描画されるため、white カード白浮きは BUG-098 修正で解消済.
   交互 surface (旧 .mkt .lp-page .lp-section:nth-of-type(even) ink-900) も廃止 = lp.css default.
   ============================================================ */

/* ============================================================
   Hero (hero.css 本体は無改修、.mkt スコープ上書きのみ。公開 LP の Hero は不変)。
   2026-06-06 MKT-LIGHT-D05: light overlay + accent 真鍮塗 CTA + 装飾 (DESIGN-01/02/17 + THEME-A) は維持.
   StaticHero (astro 先行描画) と PresetRender の両 Hero に届く。
   詳細度: .mkt .hero--fullbleed .hero__overlay = (0,3,0) で hero.css の
      .hero--fullbleed .hero__overlay (0,2,0) を上書きできる。
   ============================================================ */
/* fullbleed 背景画像上で light に見せるため白寄りのグラデで読みやすさ確保。
   下端ほど薄白く重ね、見出しを ink-0 (near-black) で読ませる。
   D-TOP-10 (2026-06-06): 上端 alpha を 0.4 → 0.6 に上げて見出しのコントラストを確保。 */
.mkt .hero--fullbleed .hero__overlay {
  background: linear-gradient(180deg, rgba(250, 250, 250, 0.6) 0%, rgba(250, 250, 250, 0.85) 100%);
}
/* light fullbleed の base color: 全要素 ink-0 で読ませる。 */
.mkt .hero--fullbleed {
  color: var(--ink-0);
}
.mkt .hero--fullbleed .hero__sub {
  color: var(--ink-0);
}
/* DESIGN-01: Hero H1 のビジュアルインパクト強化。
   clamp で 375px (2.75rem=44px) → vw 連動 → 1200px 以上で 5.5rem=88px。
   letter-spacing -0.03em で凝縮感、line-height 1.1 で迫力。
   hero.css の .hero--fullbleed .hero__headline { font-size: var(--fs-4xl)/--fs-6xl } を
   .mkt スコープで上書き (詳細度 .mkt .hero--fullbleed .hero__headline = 0,3,0 > 0,2,0)。
   375px で fs-4xl(2.25rem) → 2.75rem になるため既存 375px 対応を強化。 */
.mkt .hero__headline {
  font-family: var(--mkt-font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink-0);
}
.mkt .hero--fullbleed .hero__headline {
  font-size: clamp(2.75rem, 7vw, 5.5rem);
}
.mkt .hero__category {
  color: var(--accent);
}
.mkt .hero__sub {
  color: var(--ink-300);
}
/* DESIGN-17: 安心バッジを「埋もれた dark on dark」から脱却。
   accent-soft 背景 + accent 寄りの枠 + ink-0 文字でコントラスト確保、
   check アイコンを accent 真鍮にして Hero の accent と呼応させる。 */
.mkt .hero__badge {
  background-color: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--ink-0);
}
.mkt .hero__badge-icon svg {
  stroke: var(--accent);
}
/* DESIGN-02: 白 CTA ボタンに shine アニメーション。
   lp.css の @keyframes cta-shine (公開LP用) とは別 keyframe 名 mkt-shine で原則B遵守。
   gradient overlay を background-image で重ね background-size:200% で position 移動。
   overflow:hidden は hero.css の .hero__cta に未設定のため .mkt スコープで追加。
   --secondary はアウトライン薄色ボタンのため除外 (:not(.hero__cta--secondary))。 */
@keyframes mkt-shine {
  0% {
    background-position: 200% center;
  }
  40% {
    background-position: -100% center;
  }
  100% {
    background-position: -100% center;
  }
}
.mkt .hero__cta:not(.hero__cta--secondary) {
  /* 2026-06-06 light 反転: 白ボタン on 白背景を避けるため accent 真鍮塗 + 白文字に。
     shine の highlight は白光で「磨き上げた真鍮」感を出す。 */
  background-color: var(--accent);
  background-image: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  background-position: 200% center;
  color: #ffffff;
  overflow: hidden;
  animation: mkt-shine 3s ease-in-out infinite;
}
.mkt .hero__cta:not(.hero__cta--secondary):hover,
.mkt .hero__cta:not(.hero__cta--secondary):focus-visible {
  background-color: var(--accent-strong);
  box-shadow: 0 6px 18px -4px rgba(160, 125, 62, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .mkt .hero__cta:not(.hero__cta--secondary) {
    animation: none;
    background-image: none;
  }
}

/* ------------------------------------------------------------------
   THEME-A (2026-06-03 UX 監査 RICE 18.0): Hero の 2 CTA レイアウト.
   primary「無料で試す」(白ボタン) + secondary「登録せずに試す」(アウトライン).
   未ログインで `/editor?preset=` を直接試せる導線 = お手軽さの最大訴求.
   375px では縦積み (折り返し)、タップ域は .hero__cta の min-height 52px を継承.
   ------------------------------------------------------------------ */
.mkt .hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.mkt .hero__cta--secondary {
  /* cta__button の gradient/白を打ち消し、真鍮アウトラインで「第2の選択肢」を表現 */
  background-color: transparent;
  background-image: none;
  color: var(--ink-0);
  border: 1px solid var(--accent);
}
.mkt .hero__cta--secondary:hover,
.mkt .hero__cta--secondary:focus-visible {
  background-color: var(--accent-soft);
  box-shadow: 0 6px 18px -4px rgba(160, 125, 62, 0.3);
}
@media (max-width: 480px) {
  .mkt .hero__cta-group {
    flex-direction: column;
    align-items: stretch;
  }
  .mkt .hero__cta-group .hero__cta {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------------------------------ */
/* TicketExhaustedModal (BL-007 Q3 3 択モーダル)               */
/* ------------------------------------------------------------ */
.ticket-exhausted-modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 480px;
  width: calc(100% - 32px);
  border-radius: 12px;
}
.ticket-exhausted-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.ticket-exhausted-modal__body {
  background: var(--ink-900, #fff);
  color: var(--ink-0, #1a1a1a);
  padding: 24px;
  border-radius: 12px;
  box-shadow: var(--mkt-shadow-lg);
}
.ticket-exhausted-modal__heading {
  font-size: 1.25rem;
  margin: 0 0 12px;
  font-weight: 700;
}
.ticket-exhausted-modal__desc {
  margin: 0 0 20px;
  color: var(--ink-300, #555);
  line-height: 1.6;
  font-size: 0.9375rem;
}
.ticket-exhausted-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ticket-exhausted-modal__btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ticket-exhausted-modal__btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.ticket-exhausted-modal__btn--primary {
  background: var(--accent);
  color: var(--ink-950, #1a1a1a);
  border-color: var(--accent);
}
.ticket-exhausted-modal__btn--primary:not(:disabled):hover {
  background: var(--accent-strong, #8a6a32);
  border-color: var(--accent-strong, #8a6a32);
}
.ticket-exhausted-modal__btn--secondary {
  background: transparent;
  color: var(--ink-0);
  border-color: var(--ink-300, #ccc);
}
.ticket-exhausted-modal__btn--secondary:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.ticket-exhausted-modal__btn--tertiary {
  background: transparent;
  color: var(--ink-300, #555);
  border-color: transparent;
  text-decoration: underline;
}
.ticket-exhausted-modal__btn--tertiary:hover {
  color: var(--ink-0);
}

/* ------------------------------------------------------------ */
/* ExitIntentPopup (BL-GROWTH-015)                              */
/*  - desktop 専用 (mobile では React 側で出さない)            */
/*  - backdrop fixed full screen + dialog 中央配置             */
/*  - mkt-shadow-lg / accent / ink-* token のみ利用            */
/* ------------------------------------------------------------ */
.exit-intent-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.exit-intent-dialog {
  position: relative;
  background: var(--ink-900, #15181d);
  color: var(--ink-0, #fafafa);
  padding: 28px 24px;
  border-radius: 14px;
  box-shadow: var(--mkt-shadow-lg);
  max-width: 420px;
  width: 100%;
  outline: none;
}
.exit-intent-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--ink-300, #878d96);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.exit-intent-close:hover,
.exit-intent-close:focus-visible {
  color: var(--ink-0);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
.exit-intent-headline {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.4;
}
.exit-intent-body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-200, #c5c8cd);
  margin: 0 0 20px;
}
.exit-intent-cta {
  display: block;
  text-align: center;
  background: var(--accent);
  color: var(--ink-950, #1a1a1a);
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s;
}
.exit-intent-cta:hover,
.exit-intent-cta:focus-visible {
  background: var(--accent-strong, #8a6a32);
  outline: none;
}
.exit-intent-secondary {
  display: block;
  width: 100%;
  margin-top: 8px;
  background: transparent;
  color: var(--ink-300, #878d96);
  border: none;
  padding: 10px;
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: 6px;
  text-decoration: underline;
}
.exit-intent-secondary:hover,
.exit-intent-secondary:focus-visible {
  color: var(--ink-0);
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .exit-intent-cta {
    transition: none;
  }
}