/* =========================
   本文中心の1カラムページ用レイアウト
   public/assets/css/content-page.css
   ========================= */

:root {
  --content-page-width: var(--site-page-width);
  --content-page-bg: rgba(255, 253, 248, 0.72);
  --content-page-shadow: 0 0 28px rgba(80, 55, 30, 0.06);
  --content-page-padding-x: 18px;

  /* 旧変数名は既存ページ向けの互換エイリアス */
  --page-shell-card-width: var(--content-page-width);
  --page-shell-card-bg: var(--content-page-bg);
  --page-shell-card-shadow: var(--content-page-shadow);
  --page-shell-card-padding-x: var(--content-page-padding-x);
}

/* .page-shell-* は移行期間中の互換エイリアス */
body.content-page-body,
body.page-shell-body {
  background: var(--color-bg);
}

.content-page-card,
.page-shell-page-card {
  position: relative;
  width: 100%;
  max-width: var(--content-page-width);
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--content-page-bg);
  box-shadow: var(--content-page-shadow);
}

.content-page-body .content-header,
.page-shell-body .content-header {
  left: 50%;
  right: auto;
  width: 100%;
  max-width: var(--content-page-width);
  transform: translateX(-50%);
  background: var(--content-page-bg);
}

.content-page-main,
.page-shell-main,
.content-page-body .content-wrapper,
.page-shell-body .content-wrapper {
  width: 100%;
  max-width: none;
  padding-left: var(--content-page-padding-x);
  padding-right: var(--content-page-padding-x);
}

/* 本文内カード。既存の .content-card / .page-shell-card も維持する。 */
.content-page-body .page-shell-card:not(.page-shell-page-card),
.page-shell-body .page-shell-card:not(.page-shell-page-card),
.content-page-body .content-card,
.page-shell-body .content-card {
  padding: 18px 0;
  margin-bottom: 0;
  background: transparent;
  border-bottom: 1px solid rgba(228, 216, 200, 0.75);
  border-radius: 0;
  box-shadow: none;
}

.content-page-body .page-shell-card:not(.page-shell-page-card):last-child,
.page-shell-body .page-shell-card:not(.page-shell-page-card):last-child,
.content-page-body .content-card:last-child,
.page-shell-body .content-card:last-child {
  border-bottom: none;
}

.privacy-policy-page .content-card ul {
  margin: 0.75rem 0 1rem 1rem;
  padding-left: 1.3rem;
  list-style-position: outside;
}

.content-page-body .hero-area,
.page-shell-body .hero-area {
  padding: 4px 0 18px;
}

.content-page-actions,
.page-shell-actions,
.content-page-body .hero-actions,
.page-shell-body .hero-actions {
  margin-top: 18px;
}

.content-page-body .hero-actions p,
.page-shell-body .hero-actions p {
  margin-bottom: 8px;
}

.content-page-title,
.page-shell-title {
  margin-bottom: 0.5rem;
}

.content-page-lead,
.page-shell-lead {
  margin-bottom: 1rem;
}

.content-page-body .content-card img,
.page-shell-body .content-card img {
  display: block;
  width: 100%;
  border-radius: 14px;
}

.content-page-body .footer-wrapper,
.page-shell-body .footer-wrapper {
  left: 50%;
  width: 100%;
  max-width: var(--content-page-width);
  transform: translateX(-50%);
}

.profile-setup .profile-description::after {
  display: block;
  margin-top: 6px;
  color: #657b78;
  font-size: 0.82rem;
  line-height: 1.6;
  content: 'ニックネーム・アイコン・遊ぶエリアは、ボドシェア内で他のユーザーにも表示されます。';
}

@media (min-width: 761px) {
  .content-page-card,
  .page-shell-page-card {
    box-shadow: var(--content-page-shadow);
  }
}

@media (max-width: 760px) {
  :root {
    --content-page-width: 100%;
    --content-page-shadow: none;
    --content-page-padding-x: 16px;
  }

  .content-page-card,
  .page-shell-page-card {
    box-shadow: none;
  }
}