@extends('layouts.setup')
@section('title', 'メール送信用ドメイン')
@section('page-title', 'メール送信用ドメイン')

@push('styles')
@include('account.partials.dkim-mail-domain-styles')
<style>
.cdm-page { max-width: 920px; }
.cdm-lead { font-size: 0.95rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 1.25rem; }
.cdm-precautions {
  background: #f8f9fa;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.65;
}
.cdm-precautions h2 { font-size: 0.8rem; font-weight: 700; margin: 0 0 10px; letter-spacing: 0.06em; }
.cdm-precautions ol { margin: 0; padding-left: 1.2rem; }
.cdm-precautions li { margin-bottom: 6px; }
.cdm-glossary {
  border: 1px solid var(--border-soft); border-radius: 12px;
  padding: 6px 16px; margin-bottom: 1.25rem; background: #fff;
}
.cdm-glossary > summary.cdm-gl-head {
  font-weight: 700; font-size: 0.86rem; color: var(--text-muted);
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
  cursor: pointer; list-style: none;
}
.cdm-glossary > summary.cdm-gl-head::-webkit-details-marker { display: none; }
.cdm-gl-info { margin-left: auto; color: #9aa2b1; cursor: help; display: inline-flex; }
.cdm-gl-info:hover { color: #274b8f; }
.cdm-gl-outer-chev { color: #9aa2b1; transition: transform 0.2s; }
.cdm-glossary[open] > summary .cdm-gl-outer-chev { transform: rotate(180deg); }
.cdm-gl-body { padding-bottom: 6px; }
.cdm-gl-item { border-top: 1px solid var(--border-soft); }
.cdm-gl-item > summary {
  list-style: none; cursor: pointer; padding: 10px 2px;
  font-weight: 700; font-size: 0.88rem; color: #274b8f;
  display: flex; align-items: center; gap: 8px;
}
.cdm-gl-item > summary::-webkit-details-marker { display: none; }
.cdm-gl-item > summary .gl-chev { margin-left: auto; color: #9aa2b1; transition: transform 0.2s; }
.cdm-gl-item[open] > summary .gl-chev { transform: rotate(180deg); }
.cdm-gl-content { padding: 0 2px 12px; font-size: 0.83rem; color: var(--text-muted); line-height: 1.55; }
.cdm-gl-row { margin-bottom: 5px; }
.cdm-gl-row:last-child { margin-bottom: 0; }
.cdm-gl-k {
  display: inline-block; font-weight: 700; font-size: 0.72rem;
  color: #274b8f; background: #eef4ff; border-radius: 5px;
  padding: 1px 7px; margin-right: 7px; vertical-align: 1px;
}
.cdm-gl-k--merit { color: #146c43; background: #e6f4ec; }
</style>
@endpush

@section('setup_body')
<div class="cdm-page">
  <details class="cdm-glossary">
    <summary class="cdm-gl-head"><i class="bi bi-book" aria-hidden="true"></i> はじめての方へ：用語の説明（クリックで開きます）<span class="cdm-gl-info" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="left" data-bs-custom-class="mail-delivery-tab-tooltip" tabindex="0" role="button" aria-label="用語集の説明" data-bs-title="本ページ内で表示する単語の用語集になります。<br>不明点ある場合はここでチェックしてください。<br>尚、はじめての方はまず確認頂くことをお勧めします"><i class="bi bi-info-circle" aria-hidden="true"></i></span><i class="bi bi-chevron-down cdm-gl-outer-chev" aria-hidden="true"></i></summary>
    <div class="cdm-gl-body">

    <details class="cdm-gl-item">
      <summary>ドメイン <i class="bi bi-chevron-down gl-chev" aria-hidden="true"></i></summary>
      <div class="cdm-gl-content">
        <div class="cdm-gl-row"><span class="cdm-gl-k">説明</span>メールアドレスの「@」の後ろの部分です。あなたの独自ドメインを登録します。</div>
        <div class="cdm-gl-row"><span class="cdm-gl-k">例</span>Yahooは <code>@yahoo.co.jp</code>、Gmailは <code>@gmail.com</code>、あなたは <code>@yourshop.com</code>。</div>
        <div class="cdm-gl-row"><span class="cdm-gl-k cdm-gl-k--merit">メリット</span>独自ドメインで送ると「どこの誰から来たメールか」が伝わり、受け取る人に信頼されやすくなります。</div>
      </div>
    </details>

    <details class="cdm-gl-item">
      <summary>DNS（ディーエヌエス） <i class="bi bi-chevron-down gl-chev" aria-hidden="true"></i></summary>
      <div class="cdm-gl-content">
        <div class="cdm-gl-row"><span class="cdm-gl-k">説明</span>ドメインの「住所録」のような設定画面です。ドメインを借りている会社のサイトにあります。</div>
        <div class="cdm-gl-row"><span class="cdm-gl-k">例</span>お名前.com・ムームードメイン・エックスサーバー等の管理画面にある「DNS」「DNSレコード」ページ。</div>
        <div class="cdm-gl-row"><span class="cdm-gl-k cdm-gl-k--merit">メリット</span>ここに決められた文字を追加すると、あなたのメールが本物だと証明でき、迷惑メール扱いされにくくなります。</div>
      </div>
    </details>

    <details class="cdm-gl-item">
      <summary>レコード（DNSレコード） <i class="bi bi-chevron-down gl-chev" aria-hidden="true"></i></summary>
      <div class="cdm-gl-content">
        <div class="cdm-gl-row"><span class="cdm-gl-k">説明</span>DNSに書き足す「1行の設定」のことです。今回は3種類を追加します。</div>
        <div class="cdm-gl-row"><span class="cdm-gl-k">例</span>DKIM（CNAME）、SPF（TXT）、DMARC（TXT）の3行。すべてこのページにコピー用で表示されます。</div>
        <div class="cdm-gl-row"><span class="cdm-gl-k cdm-gl-k--merit">メリット</span>この3行を入れることでなりすまし対策が有効になり、メールの到達率（届く確率）が上がります。</div>
      </div>
    </details>

    <details class="cdm-gl-item">
      <summary>DKIM・SPF・DMARC <i class="bi bi-chevron-down gl-chev" aria-hidden="true"></i></summary>
      <div class="cdm-gl-content">
        <div class="cdm-gl-row"><span class="cdm-gl-k">説明</span>メールが「なりすましではない本物」だと示す3つの仕組みです。</div>
        <div class="cdm-gl-row"><span class="cdm-gl-k">例</span>SPF＝「このサーバーから送ってOK」の宣言、DKIM＝「改ざんされていない」証明、DMARC＝「なりすましメールをどう扱うか」の方針。</div>
        <div class="cdm-gl-row"><span class="cdm-gl-k cdm-gl-k--merit">メリット</span>設定すると迷惑メールフォルダに入りにくくなり、開封されやすくなります。意味を覚える必要はなく、<strong>出た文字をそのまま貼ればOK</strong>です。</div>
      </div>
    </details>

    <details class="cdm-gl-item">
      <summary>設定確認 <i class="bi bi-chevron-down gl-chev" aria-hidden="true"></i></summary>
      <div class="cdm-gl-content">
        <div class="cdm-gl-row"><span class="cdm-gl-k">説明</span>追加した文字がちゃんと反映されたかをチェックするボタンです。</div>
        <div class="cdm-gl-row"><span class="cdm-gl-k">例</span>3行を追加して保存したあと、このページの「設定確認」を押す（反映まで時間がかかることがあります）。</div>
        <div class="cdm-gl-row"><span class="cdm-gl-k cdm-gl-k--merit">メリット</span>緑になれば設定完了。うまくいっているか自分で確認できるので、送信前に安心できます。</div>
      </div>
    </details>
    </div>
  </details>

  <div class="cdm-precautions">
    <h2>■ やることは3つ（番号の順に）</h2>
    <ol>
      <li>このページで、送りたいドメイン（例：<code>yourshop.com</code>）を <strong>「追加」</strong></li>
      <li>出てきた<strong>コピー用の文字</strong>を、ドメイン会社の <strong>「DNS」画面</strong> に貼り付けて保存</li>
      <li>10分〜1日ほど待って <strong>「設定確認」</strong> → 緑になればOK。最後に <strong>テスト送信</strong>で届くか確認</li>
    </ol>
  </div>

  @include('account.partials.dkim-mail-domain-panel', ['fromSetup' => true])
</div>
@endsection

@push('scripts')
@include('account.partials.dkim-mail-domain-scripts')
@endpush