/* ===========================================================================
   醸誌 KAMOSHI — キャラクター図鑑（フル版）
   出典: Claude Design で作成した「醸誌 キャラクター図鑑 (制作中).html」を移植
   =========================================================================== */

/* ── HERO ──────────────────────────────────────────── */
.char-hero {
  background: var(--washi); border-bottom: 1px solid var(--washi-deep);
  padding: calc(59px + clamp(56px,8vw,96px)) 0 clamp(56px,7vw,88px);
  text-align: center;
}
.char-hero h1 {
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: clamp(2.4rem,4.6vw,3.6rem); line-height: 1.3; letter-spacing: 0.03em; color: var(--ai-deep);
}
.char-hero .lede {
  margin: var(--space-5) auto 0; max-width: 720px;
  font-size: var(--fs-lead); line-height: var(--lh-body);
}

/* ── CARD GRID（一覧。クリックで詳細ダイアログ） ───────── */
/* .wrap と併用しているので padding は上下だけ指定する（shorthand だと左右の余白が消える） */
.char-grid-wrap { padding-top: clamp(48px,6vw,80px); padding-bottom: clamp(72px,9vw,112px); }
.char-grid { --gap: clamp(16px,2.4vw,28px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.char-card {
  width: calc((100% - var(--gap) * 2) / 3); display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--shiro); border: 1px solid var(--line-washi); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.char-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--accent); }
.char-card-art {
  position: relative; aspect-ratio: 1; display: grid; place-items: center;
  background: var(--washi-soft); border-bottom: 1px solid var(--line-washi);
}
.char-card-art img { width: 66%; filter: drop-shadow(0 16px 30px rgba(16,39,81,0.16)); transition: transform var(--dur-base) var(--ease-out); }
.char-card:hover .char-card-art img { transform: scale(1.04); }
.char-card-no { position: absolute; left: 18px; top: 14px; font-family: var(--font-latin); font-style: italic; font-size: 1.6rem; line-height: 1; color: var(--washi-deep); }
.char-card-body { padding: clamp(16px,2vw,22px); text-align: center; }
.char-card-name { display: block; font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: 0.05em; color: var(--ai-deep); }
.char-card-motif { display: block; margin-top: 6px; font-size: var(--fs-caption); letter-spacing: 0.05em; color: var(--ai-mid); }

/* ── 詳細ダイアログ ─────────────────────────────────── */
body.char-modal-open { overflow: hidden; }
.char-dialog {
  border: 0; padding: 0; margin: auto; background: transparent; color: inherit;
  width: min(1000px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); overflow: auto;
}
.char-dialog::backdrop { background: rgba(16,39,81,0.55); }
.char-close {
  position: absolute; z-index: 2; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--shiro); border: 1px solid var(--line-washi); color: var(--ai-mid);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.char-close:hover { background: var(--ai-deep); color: #fff; }
.char-close svg { width: 18px; height: 18px; stroke-width: 1.6; }

/* ── PROFILE（ダイアログの中身） ───────────────────── */
.char-profile {
  position: relative; display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: stretch;
  background: var(--shiro); border: 1px solid var(--line-washi); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.char-p-art {
  position: relative; display: grid; place-items: center; background: var(--washi-soft);
  border-right: 1px solid var(--line-washi); padding: clamp(28px,4vw,52px); min-height: 340px;
}
.char-p-art img { width: min(76%,280px); position: relative; z-index: 1; filter: drop-shadow(0 20px 38px rgba(16,39,81,0.18)); }
.char-p-no { position: absolute; left: 24px; top: 20px; font-family: var(--font-latin); font-style: italic; font-size: 2.1rem; line-height: 1; color: var(--washi-deep); }
.char-p-body { padding: clamp(26px,3.4vw,52px); }
.char-p-name { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.char-p-name h2 { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: var(--fw-semibold); letter-spacing: 0.05em; color: var(--ai-deep); }
.char-p-name .latin { font-family: var(--font-latin); font-style: italic; font-size: var(--fs-body); letter-spacing: 0.12em; color: var(--suna); }
.char-p-motif { margin-top: 10px; font-size: var(--fs-small); letter-spacing: 0.05em; color: var(--ai-mid); }
.char-p-bio { margin-top: var(--space-5); max-width: 560px; font-size: var(--fs-body); line-height: var(--lh-body); }
.char-p-specs { margin-top: var(--space-6); }
.char-p-specs div { display: grid; grid-template-columns: 104px 1fr; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line-washi); align-items: baseline; }
.char-p-specs dt { font-size: var(--fs-micro); letter-spacing: 0.18em; color: var(--suna); }
.char-p-specs dd { font-size: var(--fs-caption); line-height: 1.8; letter-spacing: 0.03em; color: var(--sumi); }

@media (max-width: 900px) {
  .char-card { width: calc((100% - var(--gap)) / 2); }
  .char-profile { grid-template-columns: 1fr; }
  .char-p-art { border-right: none; border-bottom: 1px solid var(--line-washi); min-height: 200px; }
}