/*
 * DAISEN Life Design 100 — パスワードゲート専用スタイル
 * daisen-life-design-100/daisen-pw-gate.css
 * Version: 1.0.0
 *
 * daisen-life-design-100.css の CSS変数（--lp-*）を継承
 * ゲート専用コンポーネント（.dpg-*）を定義
 */

/* ============================================================
   0. リセット & ベース
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   1. CSS 変数（LP と同一トークン）
   ============================================================ */
:root {
  --lp-bg:       #01090f;
  --lp-bg2:      #020d1c;
  --lp-gold:     #c4984a;
  --lp-gold-l:   #e8ca78;
  --lp-gold-d:   #8a6428;
  --lp-cyan:     #52d0cb;
  --lp-text:     #c6d2de;
  --lp-dim:      #5a7080;
  --lp-border:   rgba(196,152,74,.18);
  --lp-border-h: rgba(196,152,74,.50);
  --ff-cin:  'Cinzel', 'IM Fell English SC', serif;
  --ff-jp:   'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --ff-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
}

/* ============================================================
   2. body
   ============================================================ */
body.daisen-pw-gate-body {
  background: radial-gradient(ellipse 80% 55% at 50% 0%,
    rgba(2,13,28,.96) 0%, var(--lp-bg) 65%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-jp);
  color: var(--lp-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Cocoon が出力する余分な要素を隠す */
body.daisen-pw-gate-body #header,
body.daisen-pw-gate-body .site-header,
body.daisen-pw-gate-body #breadcrumb,
body.daisen-pw-gate-body #sidebar,
body.daisen-pw-gate-body #footer,
body.daisen-pw-gate-body .site-footer,
body.daisen-pw-gate-body .pager-prev-next,
body.daisen-pw-gate-body .related-entries {
  display: none !important;
}

/* ============================================================
   3. 外側ラッパー
   ============================================================ */
.dpg-wrap {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}

/* ============================================================
   4. 星空装飾（CSS のみ / JS 不要）
   ============================================================ */
.dpg-stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px   1px   at  8% 14%, rgba(232,202,120,.72), transparent 55%),
    radial-gradient(1.5px 1.5px at 23% 67%, rgba(82,208,203,.55),  transparent 55%),
    radial-gradient(1px   1px   at 38% 30%, rgba(232,202,120,.48), transparent 55%),
    radial-gradient(1px   1px   at 55% 82%, rgba(232,202,120,.60), transparent 55%),
    radial-gradient(1.5px 1.5px at 72% 20%, rgba(82,208,203,.45),  transparent 55%),
    radial-gradient(1px   1px   at 85% 55%, rgba(232,202,120,.50), transparent 55%),
    radial-gradient(1px   1px   at 92% 78%, rgba(232,202,120,.40), transparent 55%),
    radial-gradient(1.5px 1.5px at 15% 90%, rgba(82,208,203,.38), transparent 55%),
    radial-gradient(1px   1px   at 62% 45%, rgba(232,202,120,.35), transparent 55%);
}

/* ============================================================
   5. カード本体
   ============================================================ */
.dpg-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  background: linear-gradient(
    160deg,
    rgba(3,14,36,.82) 0%,
    rgba(1,9,15,.88)  100%
  );
  border: 1px solid var(--lp-border);
  border-radius: 4px;
  padding: clamp(40px,8vw,60px) clamp(28px,6vw,52px);
  text-align: center;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 24px 64px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(196,152,74,.06);
}

/* カード上部のゴールドライン */
.dpg-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--lp-gold) 35%,
    var(--lp-cyan) 65%,
    transparent
  );
  opacity: .6;
}

/* ============================================================
   6. アイブロウ（Cinzel 英字ラベル）
   ============================================================ */
.dpg-eyebrow {
  font-family: var(--ff-cin);
  font-size: clamp(.48rem,.9vw,.62rem);
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--lp-cyan);
  opacity: .8;
  margin-bottom: 24px;
}

/* ============================================================
   7. 見出し
   ============================================================ */
.dpg-heading {
  font-family: var(--ff-jp);
  font-weight: 400;
  font-size: clamp(1.2rem,3.5vw,1.65rem);
  line-height: 1.75;
  color: rgba(240,235,220,.93);
  letter-spacing: .05em;
  margin-bottom: 22px;
}

.dpg-heading em {
  font-style: normal;
  color: var(--lp-gold-l);
  text-shadow: 0 0 22px rgba(232,202,120,.35);
}

/* ============================================================
   8. 本文
   ============================================================ */
.dpg-body {
  font-family: var(--ff-jp);
  font-size: clamp(.82rem,1.5vw,.9rem);
  line-height: 2.1;
  color: rgba(198,210,222,.65);
  margin-bottom: 22px;
}

.dpg-body strong {
  color: rgba(232,202,120,.92);
}

/* ============================================================
   9. 鍵アイコン + 案内文
   ============================================================ */
.dpg-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  max-width: 400px;
  margin: 0 auto 28px;
  font-family: var(--ff-sans);
  font-size: clamp(.72rem,1.2vw,.78rem);
  color: rgba(198,210,222,.48);
  line-height: 1.9;
  text-align: left;
}

.dpg-note-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  color: rgba(196,152,74,.55);
}

/* ============================================================
   10. エラーメッセージ
   ============================================================ */
.dpg-error {
  margin: 0 auto 18px;
  padding: 10px 18px;
  background: rgba(232,134,154,.08);
  border: 1px solid rgba(232,134,154,.30);
  border-radius: 3px;
  font-family: var(--ff-sans);
  font-size: .78rem;
  color: rgba(232,134,154,.85);
  letter-spacing: .02em;
}

/* ============================================================
   11. フォーム
   ============================================================ */
.dpg-form {
  margin-bottom: 24px;
}

.dpg-form-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.dpg-label {
  font-family: var(--ff-cin);
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--lp-gold);
  opacity: .75;
  display: block;
  text-align: left;
  width: 100%;
  max-width: 420px;
}

.dpg-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 420px;
}

.dpg-input {
  flex: 1;
  min-width: 180px;
  padding: 14px 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--lp-border);
  border-radius: 2px;
  color: var(--lp-text);
  font-family: var(--ff-jp);
  font-size: .9rem;
  letter-spacing: .08em;
  transition: border-color .3s ease, box-shadow .3s ease;
  outline: none;
}

.dpg-input::placeholder {
  color: rgba(198,210,222,.28);
  font-size: .82rem;
}

.dpg-input:focus {
  border-color: rgba(196,152,74,.55);
  box-shadow: 0 0 0 3px rgba(196,152,74,.08);
}

.dpg-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: transparent;
  border: 1px solid var(--lp-border-h);
  border-radius: 2px;
  color: var(--lp-gold-l);
  font-family: var(--ff-cin);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease, transform .25s ease;
  white-space: nowrap;
}

.dpg-submit:hover {
  background: rgba(196,152,74,.10);
  border-color: var(--lp-gold-l);
  transform: translateY(-2px);
}

.dpg-submit svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* フォーカス可視（アクセシビリティ） */
.dpg-input:focus-visible {
  outline: 2px solid var(--lp-gold);
  outline-offset: 2px;
}

.dpg-submit:focus-visible {
  outline: 2px solid var(--lp-cyan);
  outline-offset: 3px;
}

/* ============================================================
   12. SNS ボタン
   ============================================================ */
.dpg-sns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.dpg-sns-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border: 1px solid rgba(196,152,74,.28);
  border-radius: 40px;
  color: var(--lp-gold-l);
  text-decoration: none;
  font-family: var(--ff-cin);
  font-size: .6rem;
  letter-spacing: .1em;
  transition: border-color .3s, background .3s, transform .3s;
}

.dpg-sns-btn:hover {
  border-color: rgba(196,152,74,.65);
  background: rgba(196,152,74,.08);
  transform: translateY(-2px);
}

.dpg-sns-btn svg {
  width: 15px;
  height: 15px;
}

/* ============================================================
   13. 戻るリンク
   ============================================================ */
.dpg-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--lp-dim);
  text-decoration: none;
  font-family: var(--ff-sans);
  font-size: .75rem;
  letter-spacing: .04em;
  transition: color .3s ease;
}

.dpg-back:hover {
  color: var(--lp-gold-l);
}

.dpg-back svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.dpg-back:focus-visible {
  outline: 2px solid var(--lp-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   14. レスポンシブ
   ============================================================ */
@media (max-width: 560px) {
  .dpg-wrap {
    padding: 40px 16px;
    align-items: flex-start;
  }
  .dpg-card {
    padding: 36px 22px 32px;
  }
  .dpg-row {
    flex-direction: column;
  }
  .dpg-input {
    min-width: 0;
    width: 100%;
  }
  .dpg-submit {
    width: 100%;
    justify-content: center;
  }
  .dpg-note {
    text-align: center;
    align-items: center;
    font-size: .7rem;
  }
  .dpg-note-icon {
    display: none;
  }
}

/* ============================================================
   15. 減光モード対応
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:  0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}