/* ═══════════════════════════════════════════════════════════
   draneko-colorfuda-modal.css  v1.0.0  2026-05-20
   Draねこ 色札型カードモーダル — 共通スタイル
   設計書：仕様書/Draねこ色札型カードモーダル_UI設計_v1.md
   Phase 2：art.html / shindan.html / l3_result.html 共通
   ─────────────────────────────────────────────────────────
   命名規則：
     .cfModal          = colorFuda Modal ルート
     .cfOverlay        = 背景オーバーレイ
     .cfImgWrap        = 上部 60% 画像エリア
     .cfBody           = 下部テキストエリア
     .cfPalette        = 和色チップ行
     .cfShare          = シェアフッター
   ═══════════════════════════════════════════════════════════ */

/* ── オーバーレイ ── */
.cfOverlay {
  position: fixed; inset: 0;
  background: rgba(28, 25, 22, 0.72);
  z-index: 498;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.cfOverlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ── カード本体（縦長 9:16） ── */
.cfModal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%);
  width: min(90vw, 360px);
  height: min(calc(90vw * 16 / 9), 640px);
  max-height: 92svh;
  overflow-y: auto;
  background: #FFFFFF;
  border: 1px solid #E8DFD3;
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 24px 80px rgba(28, 25, 22, 0.32);
  z-index: 499;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
}
@media (max-width: 480px) {
  .cfModal {
    width: 90vw;
    height: calc(90vw * 16 / 9);
    max-height: 92svh;
  }
}
.cfModal.open {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

/* ── 画像エリア（上部 60%） ── */
.cfImgWrap {
  position: relative;
  flex: 0 0 60%;
  min-height: 0;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: #F5F0E8;
}
.cfImgWrap img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

/* ── 閉じるボタン（画像の上に浮かせる） ── */
.cfCloseBtn {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(28, 25, 22, 0.38); border: none;
  cursor: pointer; font-size: 13px; color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
  z-index: 10;
  flex-shrink: 0;
}
.cfCloseBtn:hover { background: rgba(28, 25, 22, 0.62); }

/* ── テキストエリア ── */
.cfBody {
  flex: 1 1 0;
  min-height: 0;
  padding: 14px 18px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: visible;
}

/* ── 主名 ── */
.cfName {
  font-family: -apple-system, "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 20px; font-weight: 500; letter-spacing: 0.06em;
  color: #2C2419;
  line-height: 1.3;
  margin: 0;
}

/* ── 副名 ── */
.cfSubname {
  font-family: -apple-system, "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 13px; font-weight: 400; letter-spacing: 0.04em;
  color: #7A6E5D;
  margin: 0;
}

/* ── 和色パレット（4点） ── */
.cfPalette {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 2px;
}
.cfChip {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #7A6E5D;
  letter-spacing: 0.03em;
}
.cfChip:not(:last-child)::after {
  content: "／";
  margin-left: 4px;
  color: #C4B8A8;
  font-size: 10px;
}
.cfDot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ── L1 コピー ── */
.cfCopy {
  font-size: 11px; line-height: 1.6;
  color: #9A8E7D;
  letter-spacing: 0.03em;
  margin: 0;
  flex: 1 1 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ── シェアフッター ── */
.cfShare {
  display: flex;
  gap: 8px;
  padding: 8px 18px 12px;
  border-top: 1px solid #F0E8DC;
  flex-shrink: 0;
}
.cfShareBtn {
  flex: 1;
  padding: 8px 0;
  border-radius: 8px;
  font-size: 12px; letter-spacing: 0.05em;
  cursor: pointer;
  border: 1px solid #D8CFC4;
  background: #FAFAF8;
  color: #4A3E2E;
  transition: background 0.15s;
  font-family: -apple-system, sans-serif;
}
.cfShareBtn:hover { background: #F0E8DC; }
.cfShareBtn.primary {
  background: #4A3E2E; color: #FFFFFF; border-color: #4A3E2E;
}
.cfShareBtn.primary:hover { background: #2C2419; }

/* ── 二つ名エリア（v1.1.0 追加） ── */
.cfEpithetArea {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 2px 0;
}

/* 未選択：「あなたの二つ名を選ぶ」ボタン */
.cfEpithetBtn {
  display: block;
  width: 100%;
  padding: 9px 0;
  border-radius: 8px;
  border: 1px solid #A09080;
  background: transparent;
  color: #4A3E2E;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-family: -apple-system, "Hiragino Mincho ProN", "Yu Mincho", serif;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.cfEpithetBtn:hover {
  background: #F0E8DC;
  border-color: #4A3E2E;
}

/* 選択済：副名（明朝・主名より小さい） */
.cfEpithetSelectedName {
  font-family: -apple-system, "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #4A3E2E;
  text-align: center;
  line-height: 1.3;
}

/* 選択済：ふりがな */
.cfEpithetSelectedYomi {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #9A8E7D;
  text-align: center;
}

/* 「二つ名を変える」テキストリンク（控えめ） */
.cfEpithetChangeBtn {
  background: none;
  border: none;
  padding: 2px 0;
  color: #9A8E7D;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: -apple-system, sans-serif;
  transition: color 0.15s;
}
.cfEpithetChangeBtn:hover { color: #4A3E2E; }

/* ── 4案閲覧表示（useEpithetView=true・v1.3.0 追加） ── */

/* 区切り線 */
.cfEpithetViewSep {
  width: 100%;
  height: 1px;
  background: #F0E8DC;
  margin: 4px 0 6px;
}

/* カード全体 */
.cfEpithetViewCard {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 0 6px;
  border-bottom: 1px solid #F5F0E8;
}
.cfEpithetViewCard:last-child {
  border-bottom: none;
}

/* ヘッダー行（記号 + 名前ブロック） */
.cfEpithetViewCardHeader {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* い/ろ/は/に バッジ */
.cfEpithetViewBadge {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #EAE4DA;
  color: #4A3E2E;
  font-family: -apple-system, "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  margin-top: 1px;
}

/* 名前ブロック（副名 + ふりがな） */
.cfEpithetViewNameWrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cfEpithetViewName {
  font-family: -apple-system, "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #2C2419;
  line-height: 1.3;
}
.cfEpithetViewYomi {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #9A8E7D;
  line-height: 1.4;
}

/* 説明文 */
.cfEpithetViewDesc {
  padding-left: 30px; /* バッジ + gap 分インデント */
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cfEpithetViewDescLine {
  font-size: 10px;
  line-height: 1.6;
  color: #9A8E7D;
  letter-spacing: 0.03em;
  margin: 0;
}

/* ── art 資料館：シェアボタン非表示（v1.3.1） ──
   useEpithetView=true 時に .cfModal へ付与する .cf-hide-share クラス。
   DOM は保持・display:none のみ（将来表示復活可）。
   border-top も含め #cfShare ごと非表示にする。 */
.cfModal.cf-hide-share #cfShare {
  display: none !important;
}