/**
* おたより modal — 構造層
*
* D3 仕分け (2026-07-14 Phase 3-8): 残置 = dialog の UA リセット / サイズ制約 /
* grid・flex 骨格 / SVG mask アイコン / フォーカス可視化 / 表示切替。
* 意匠 (配色・グラデ・影・角丸・タイポ・padding・gap・hover 効果・アニメ) は
* テーマ側 css/seijuji.css Part AQ が持つ (仕分け表: designs/theme.md)。
*
* D4: テーマ具体色は直書きしない。フォーカス枠だけ a11y のためここに残すが
* var(--seijuji-otayori-*, fallback) で参照する (トークン定義は Part AQ)。
* アイコンの background-color: #fff は「mask のインク」= これが無いと
* アイコン自体が描画されないため構造層の一部として残置する。
*/
/* ===========================================================
ルート dialog 要素 — UA デフォルトのリセット
=========================================================== */
.seijuji-otayori-modal {
border: none; /* ブラウザデフォルトの border を消す */
padding: 0; /* デフォルト 16px をリセット */
background: transparent; /* 背景は __panel が持つ */
max-width: 100%; /* 小画面で溢れないように */
max-height: 100%; /* iOS で表示が切れないように */
overflow: visible; /* 影が見切れないように */
}
/* ===========================================================
パネル（カードボディ）
=========================================================== */
.seijuji-otayori-modal__panel {
width: 100%;
max-width: 560px; /* 横並びカード 2 枚が収まる幅 */
position: relative; /* close ボタンの絶対配置の基準 */
}
/* ===========================================================
閉じるボタン（右上）
=========================================================== */
.seijuji-otayori-modal__close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
border: none; /* UA リセット */
background: transparent; /* UA リセット */
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.seijuji-otayori-modal__close:focus-visible {
outline: 2px solid var(--seijuji-otayori-sky, #6CA8DC);
outline-offset: 2px;
}
/* × の SVG（stroke 系、色は theme の color を currentColor で継承） */
.seijuji-otayori-modal__close svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ===========================================================
カードグリッド (PC: 2 列 / SP: 1 列)
=========================================================== */
.seijuji-otayori-modal__cards {
display: grid;
grid-template-columns: 1fr 1fr;
}
.seijuji-otayori-modal__card {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none; /* UA リセット（a 要素） */
position: relative;
}
.seijuji-otayori-modal__card--main:focus-visible {
outline: 2px solid var(--seijuji-otayori-sky, #6CA8DC);
outline-offset: 2px;
}
.seijuji-otayori-modal__card--sub:focus-visible {
outline: 2px solid var(--seijuji-otayori-forest, #4C8B6C);
outline-offset: 2px;
}
/* 説明文が伸びて CTA が下端に揃うように */
.seijuji-otayori-modal__card-desc {
flex: 1;
}
/* ===========================================================
カード内のアイコン円 + SVG mask アイコン
=========================================================== */
.seijuji-otayori-modal__card-mark {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
}
/* mask アイコン本体（共通）。background-color = mask のインク色 */
.seijuji-otayori-modal__card-mark .seijuji-otayori-modal__card-icon--bird,
.seijuji-otayori-modal__card-mark .seijuji-otayori-modal__card-icon--sprout {
display: inline-block;
width: 36px;
height: 36px;
background-color: #fff;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* 鳥（Phosphor bird fill, MIT） */
.seijuji-otayori-modal__card-mark .seijuji-otayori-modal__card-icon--bird {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* 双葉（Lucide sprout, ISC, stroke 系） */
.seijuji-otayori-modal__card-mark .seijuji-otayori-modal__card-icon--sprout {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* ===========================================================
CTA（テキスト + 矢印を横並び）
=========================================================== */
.seijuji-otayori-modal__card-cta {
display: inline-flex;
align-items: center;
}
/* ===========================================================
レスポンシブ（SP: 640px 以下）— 列数の切替のみ
=========================================================== */
@media (max-width: 640px) {
.seijuji-otayori-modal__cards {
grid-template-columns: 1fr;
}
}