/* ========================================
   lg-check.css（Leader Guide / Check UI）CLEAN
   - JS連動の状態UI（チェック/ステータス/連続/メッセージ/紙吹雪）
   - 読み込み順：lg.css → lg-check.css（上書き）
   Updated: 2026-02-01
======================================== */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   チェックUI（高さブレ防止：常に領域確保）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.lg-check{
  display:flex;
  align-items:center;
  gap:.7rem;

  margin-top: 1.1rem;
  padding: .85rem 1rem;
  border-radius: 12px;

  background:#f8fafc;
  color: var(--text-light);

  opacity:0;               /* OFF時は非表示 */
  pointer-events:none;     /* OFF時は触れない */
  transform: translateY(-2px);
  transition: .2s ease;

  min-height: 52px;        /* ←これでカード高さが揃う */
}
.lg-check input[type="checkbox"]{
  width:22px; height:22px;
  cursor:pointer;
  accent-color: var(--lg-accent);
}
.lg-check span{ user-select:none; font-weight:600; }

body.is-check-mode .lg-check{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}
body.is-check-mode .lg-check:hover{ background:#f1f5f9; }

/* チェックONカード強調（偶奇背景より優先） */
body.is-check-mode .lg-creed-list li:has(input:checked){
  background: linear-gradient(135deg, var(--lg-check-bg) 0%, var(--emerald-light) 100%) !important;
  border-color: var(--lg-check-border);
  box-shadow: 0 8px 32px rgba(7,132,198,.18), inset 0 1px 0 rgba(255,255,255,.55);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Status（番号の下に「dot + 連続◯ヶ月目」）
   - HTMLは変更せず、表示位置/意味をCSSで整理
   - JSは .lg-status の data-status / data-streak を更新する前提
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ステータスは「小さなユニット」として扱う（ボックス化しない） */
.lg-status{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
}

.lg-status .status-dot{
  display:none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #9ca3af;
  box-shadow: 0 0 0 4px rgba(255,255,255,.65);
}

/* 連続月数：data-streak から生成（初月でも数字が欠けない） */
.lg-status .status-num{
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .02em;
  color: #0b3858;

  margin: 2px 0 4px;
}

/* 0ヶ月・1ヶ月は非表示（初月は「連続」と言わない） */
.lg-status[data-streak="0"] .status-num,
.lg-status[data-streak="1"] .status-num{
  display: none;
}

/* 連続2ヶ月目以上のみ表示 */
.lg-status[data-streak]:not([data-streak="0"]):not([data-streak="1"]) .status-num{
  display: inline;
}

.lg-status[data-streak]:not([data-streak="0"]):not([data-streak="1"]) .status-num::before{
  content: "";
  font-weight: 700;
  color: #64748b;
}

.lg-status[data-streak]:not([data-streak="0"]):not([data-streak="1"]) .status-num::after{
  content: "ヶ月目";
  font-weight: 700;
  color: #64748b;
}

/* 既存互換（万一HTMLに .status-icon がある場合の保険） */


@media (max-width: 640px){
  .lg-status{ gap: .2rem; }
  .lg-status .status-dot{
    width: 12px;
    height: 12px;
    box-shadow: 0 0 0 3px rgba(255,255,255,.65);
  }
  .lg-status .status-num{ font-size: .74rem; }
}

/* data-status による色分け（見た目の意味付け） */
.lg-status[data-status="checked"] .status-dot{ background:#0284c7; }
.lg-status[data-status="keep"] .status-dot{ background:#08699f; }

body.is-check-mode .lg-creed-list li:has(input:checked) .lg-status .status-dot{
  box-shadow: 0 0 0 4px rgba(255,255,255,.75);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Streak Reward（段階アイコン：1〜）
   - 表示位置：連続●ヶ月（.status-num）の「下」
   - SPで欠けない（通常フロー）
   - 表現：
     1=🔥
     2=🔥🔥（縦・余白あり）
     3=🔥🔥🔥（縦・余白あり）
     4=⭐
     5=💎
     6=👑
     7+=🏆
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 共通 */
.lg-status::after{
  content:"";
  display:none;
  margin-top:6px;
  line-height:1.2;   /* ← 縦間隔を広げる */
  font-weight:900;
}

/* 1ヶ月 */
.lg-status[data-streak="1"]::after{
  content:"🔥";
  display:block;
  font-size:22px;
}

/* 2ヶ月（縦2段） */
.lg-status[data-streak="2"]::after{
  content:"🔥\A 🔥";
  white-space:pre;
  display:block;
  font-size:20px;
}

/* 3ヶ月（縦3段） */
.lg-status[data-streak="3"]::after{
  content:"🔥\A 🔥\A 🔥";
  white-space:pre;
  display:block;
  font-size:18px;
}

/* 4ヶ月 */
.lg-status[data-streak="4"]::after{
  content:"⭐";
  display:block;
  font-size:26px;
}

/* 5ヶ月 */
.lg-status[data-streak="5"]::after{
  content:"💎";
  display:block;
  font-size:26px;
}

/* 6ヶ月 */
.lg-status[data-streak="6"]::after{
  content:"👑";
  display:block;
  font-size:26px;
}

/* 7ヶ月以上 */
.lg-status[data-streak]:not([data-streak="0"]):not([data-streak="1"]):not([data-streak="2"]):not([data-streak="3"]):not([data-streak="4"]):not([data-streak="5"]):not([data-streak="6"])::after{
  content:"🏆";
  display:block;
  font-size:28px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Month Message（自己チェックコメント）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#lgMonthMessage{
  margin: 1rem auto 0;
  max-width: 520px;
  padding: .9rem 1rem;
  border-radius: 14px;
  background: linear-gradient(135deg,#0f172a,#020617);
  color: #e5e7eb;
  text-align: center;
  box-shadow: 0 10px 26px rgba(2,6,23,.22);
}

#lgMonthMessage .month-message-text{
  margin: 0;
  font-size: .95rem;
  font-weight: 650;
  line-height: 1.6;
  letter-spacing: .02em;
}

/* 10/10 confetti（JSが body.lg-perfect を付与している前提） */
body.lg-perfect #lgMonthMessage{
  position: relative;
  overflow: hidden;
}
body.lg-perfect #lgMonthMessage::before,
body.lg-perfect #lgMonthMessage::after{
  content: "";
  position: absolute;
  inset: -40px;
  pointer-events: none;
  opacity: .9;
  transform: translateY(-10px);
  animation: lgConfetti 2.8s linear infinite;
}
body.lg-perfect #lgMonthMessage::before{
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 10%, rgba(34,197,94,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 55% 25%, rgba(22,119,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 15%, rgba(234,179,8,.95) 0 2px, transparent 3px);
}
body.lg-perfect #lgMonthMessage::after{
  background:
    radial-gradient(circle at 20% 35%, rgba(255,255,255,.85) 0 3px, transparent 4px),
    radial-gradient(circle at 45% 55%, rgba(34,197,94,.85) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 45%, rgba(22,119,255,.85) 0 3px, transparent 4px);
  animation-duration: 3.6s;
  opacity: .7;
}
@keyframes lgConfetti{
  0%   { transform: translateY(-24px) rotate(0deg); }
  100% { transform: translateY(80px)  rotate(12deg); }
}
@media (prefers-reduced-motion: reduce){
  body.lg-perfect #lgMonthMessage::before,
  body.lg-perfect #lgMonthMessage::after{ animation: none; }
}

/* =========================
   SP最適化：チェック枠はON時だけ
========================= */
@media (max-width: 640px){
  .lg-check{
    min-height: auto;
    padding: .75rem .85rem;
    margin-top: .9rem;

    opacity: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden;
    transform: none;
  }

  body.is-check-mode .lg-check{
    opacity: 1;
    pointer-events: auto;
    height: auto;
    overflow: visible;
  }

  /* SPでStreakアイコンが欠ける対策（overflow/上書き事故を防ぐ） */
  .lg-left{ overflow: visible; }
  .lg-status{ overflow: visible; }

  /* SPで::afterのdisplayが他CSSに負ける場合の保険 */
  .lg-status[data-streak="3"]::after,
  .lg-status[data-streak="4"]::after,
  .lg-status[data-streak]:not([data-streak="0"]):not([data-streak="1"]):not([data-streak="2"]):not([data-streak="3"]):not([data-streak="4"])::after{
    display: grid;
  }


}