:root {
  -webkit-tap-highlight-color: transparent;
  /* ============================================================
     먹과 금 (墨金) — 모던 사찰 비주얼 시스템
     배경: 옅은 한지 미색 / 면: 먹색 / 강조: 주홍·청록 / 성취: 금
     ============================================================ */
  /* 바탕 */
  --bg: #FAF8F4;          /* 옅은 한지 미색 (메인 배경) */
  --bg-deep: #F3EFE8;     /* 한지 그림자 톤 */
  --paper: #FFFFFF;       /* L2 흰 카드 */
  --paper-warm: #FBF8F2;  /* L3 미색 종이 카드(읽을거리) */

  /* 먹(墨) — 깊이를 만드는 어두운 면 */
  --ink: #211F1C;         /* 기본 텍스트 / 먹색 면 */
  --ink-2: #2C2926;       /* 먹색 면 그라데이션 끝 */
  --ink-soft: #3A3530;
  --subink: #797269;      /* 보조 텍스트 */
  --subink-dim: #A8A096;  /* 흐린 보조 */
  --on-ink: #F3EEE5;      /* 먹색 면 위 텍스트(밝은) */
  --on-ink-dim: #B7AE9F;  /* 먹색 면 위 흐린 텍스트 */

  /* 경계 */
  --line: #E7E2D9;        /* 카드 테두리(미색조) */
  --line-soft: #F0ECE3;
  --line-ink: #3C3833;    /* 먹색 면 위 경계 */

  /* 청록(녹청) — 진행/보조 (탭 활성색) */
  --teal: #1F8A82;
  --teal-deep: #176B64;
  --teal-tint: #E6F1EF;
  --teal-soft: #B7DED8;

  /* ⚑ 붉은색 전면 폐지: --accent 계열을 금색으로 별칭 처리(누락 안전망).
     화면 어디에도 붉은색이 남지 않도록 값만 금으로 치환한다. */
  --accent: #C9A24B;      /* (구)주홍 → 금색 */
  --accent-deep: #A07E2E; /* → 금 그림자 */
  --accent-tint: #F7EFD9; /* → 금 옅은 면 */
  --accent-soft: #E5D2A0; /* → 금 라인 */

  /* 금(金) — 성취/완료/누적의 주인공 */
  --gold: #C9A24B;        /* 금색 본색 */
  --gold-bright: #E3C36A; /* 금박 하이라이트 */
  --gold-deep: #A07E2E;   /* 금 그림자 */
  --gold-tint: #F7EFD9;   /* 금 옅은 면 */
  --gold-line: #E5D2A0;

  --navy: #2E4C8A;

  /* 그림자 — 2단계(가까운 진한 + 멀리 옅은)로 입체감 */
  --sh-sm: 0 1px 2px rgba(33,31,28,.05), 0 4px 10px rgba(33,31,28,.04);
  --sh-md: 0 2px 6px rgba(33,31,28,.06), 0 10px 24px rgba(33,31,28,.07);
  --sh-ink: 0 6px 16px rgba(33,31,28,.20), 0 18px 40px rgba(33,31,28,.22);
  --sh-gold: 0 3px 10px rgba(160,126,46,.16), 0 12px 28px rgba(160,126,46,.18);

  /* ============================================================
     간격 토큰 — 화면의 리듬 (그룹/섹션 구분)
     ============================================================ */
  --page-x: 20px;       /* 화면 좌우 여백(전 화면 통일) */
  --gap-inline: 8px;    /* 카드 내부 요소 사이 */
  --gap-card: 12px;     /* 같은 묶음 카드끼리 */
  --gap-section: 28px;  /* 다른 섹션 사이 */
}
/* 간격 유틸 (Tailwind mb-* 난립 대체) */
.px-page { padding-left:var(--page-x); padding-right:var(--page-x); }
.mb-card { margin-bottom:var(--gap-card); }
.mt-section { margin-top:var(--gap-section); }
.mb-section { margin-bottom:var(--gap-section); }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  /* 옅은 한지 결 + 위→아래 미세한 따뜻함 */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(243,239,232,.35) 100%),
    url('/static/img/hanji-bg.jpg');
  background-size: cover, 480px;
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, repeat;
  color: var(--ink);
}
.font-serif { font-family: 'Noto Serif KR', serif; }

/* ============================================================
   카드 3단 위계
   L1 = 먹색 히어로 / L2 = 흰 액션 카드 / L3 = 미색 읽을거리
   ============================================================ */
.card { background:linear-gradient(180deg,#FFFFFF 0%, var(--paper-warm) 100%); border:1px solid var(--line); border-radius:20px; box-shadow:var(--sh-sm); }
.card-soft { background:linear-gradient(180deg,#FFFFFF 0%, var(--paper-warm) 100%); border:1px solid var(--line); border-radius:20px; box-shadow:var(--sh-md); }

/* L1 — 먹색 히어로 카드 */
.card-ink {
  background:linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
  border:1px solid var(--line-ink); border-radius:22px;
  box-shadow:var(--sh-ink); color:var(--on-ink); position:relative; overflow:hidden;
}
.card-ink::after { /* 옅은 금 헤어라인 */
  content:''; position:absolute; inset:0; border-radius:22px;
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.14); pointer-events:none;
}
/* 다크 카드 텍스처: 금빛 보케 글로우 + 미세 그레인 + 대각 금 시인(작업 2-10) */
.card-textured::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(48px 48px at 84% 16%, rgba(227,195,106,.20), transparent 70%),
    radial-gradient(34px 34px at 18% 78%, rgba(201,162,75,.14), transparent 70%),
    radial-gradient(80px 80px at 50% 120%, rgba(160,126,46,.16), transparent 72%),
    linear-gradient(120deg, transparent 52%, rgba(227,195,106,.07) 66%, transparent 74%);
}
.card-textured > * { position:relative; z-index:1; }
.card-ink .hero-wm { position:absolute; right:-16px; bottom:-20px; width:128px; height:128px; object-fit:contain; opacity:.13; pointer-events:none; z-index:0; filter:brightness(0) saturate(100%) invert(82%) sepia(38%) saturate(560%) hue-rotate(2deg) brightness(95%); }
.on-ink { color:var(--on-ink); }
.on-ink-dim { color:var(--on-ink-dim); }

/* L3 — 미색 읽을거리 카드 */
.card-paper { background:var(--paper-warm); border:1px solid var(--line-soft); border-radius:18px; box-shadow:var(--sh-sm); }

/* 완료된 수행 카드 — 옅은 금빛 톤으로 성취 표시 */
.card-done { background:linear-gradient(180deg,var(--gold-tint) 0%, var(--paper) 70%); border-color:var(--gold-line); }

/* 금색 성취 카드 */
.card-gold {
  background:linear-gradient(135deg, var(--gold-tint) 0%, #FFFDF6 100%);
  border:1px solid var(--gold-line); border-radius:20px; box-shadow:var(--sh-gold);
}

/* ============================================================
   칩 / 배지
   ============================================================ */
/* 칩: 톤다운(작업 3-15) — 비활성은 가는 테두리만, 활성은 먹 면 */
.chip { border:1px solid var(--line); border-radius:999px; padding:5.5px 14px; font-size:12.5px; font-weight:500; transition:.18s ease; background:transparent; color:var(--subink); }
.chip:active { transform:scale(.97); }
.chip.active { background:var(--ink); color:var(--on-ink); border-color:var(--ink); font-weight:600; box-shadow:0 2px 8px rgba(33,31,28,.16); }
.chip-gold.active { background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
/* 라인 액션 아이콘(작업 3-13): 평소 흐린 라인, 누르면 금빛 */
.lib-act, .card-act { color:var(--subink); opacity:.5; transition:.15s ease; }
.lib-act:hover, .card-act:hover, .lib-act:active, .card-act:active { opacity:1; color:var(--gold-deep); }

/* 배지: 채움 → 아웃라인 톤다운(작업 3-15). 면색 경쟁 없이 가는 테두리로 */
.badge { display:inline-flex; align-items:center; font-size:11.5px; font-weight:600; padding:2.5px 9px; border-radius:999px; line-height:1.2; background:transparent; border:1px solid transparent; }
.badge-teal { color:var(--teal-deep); border-color:var(--teal-soft); background:var(--teal-tint); }
.badge-gold { color:var(--gold-deep); border-color:var(--gold-line); background:transparent; }
.badge-accent { color:var(--gold-deep); border-color:var(--gold-line); background:transparent; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-4 { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

/* ============================================================
   버튼
   ============================================================ */
.btn { border-radius:14px; font-weight:600; transition:.15s; }
.btn-primary { background:var(--ink); color:var(--on-ink); }
.btn-primary:active { transform:scale(.98); }
.btn-gold { background:linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 45%, var(--gold-deep) 100%); color:#fff; box-shadow:0 4px 14px rgba(160,126,46,.28); } /* 주 강조 = 금 그라데이션 */
.btn-gold:active { background:linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); transform:scale(.98); }
.btn-teal { background:var(--teal); color:#fff; }
.btn-teal:active { background:var(--teal-deep); transform:scale(.98); }
.btn-goldreal { background:linear-gradient(135deg, var(--gold-bright), var(--gold-deep)); color:#fff; box-shadow:var(--sh-gold); } /* 성취 버튼 = 금 */
.btn-ghost { background:var(--paper); border:1px solid var(--line); color:var(--ink); }
.btn-ghost:active { background:var(--bg-deep); }
/* 먹색 면 위의 버튼 */
.btn-on-ink { background:rgba(255,255,255,.10); border:1px solid rgba(201,162,75,.35); color:var(--on-ink); }
.btn-on-ink:active { background:rgba(255,255,255,.18); }

/* ============================================================
   탭바
   ============================================================ */
/* iOS 홈 인디케이터(노치) 영역만큼 하단 여백 확보 — viewport-fit=cover 대응.
   ※ 일부 안드로이드(삼성 One UI 등)는 시스템 네비게이션 바 영역까지 safe-area 로
      과하게 보고해 탭바 아래 큰 빈칸이 생긴다. min() 으로 최대 10px 만 적용해 방지. */
#tabbar { padding-bottom: min(env(safe-area-inset-bottom, 0px), 10px); }
.tab-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 0 8px; color:var(--subink-dim); font-size:11px; transition:.18s; }
.tab-item.active { color:var(--ink); }
.tab-item.active .tab-ico { color:var(--teal); transform:translateY(-1px); }
.tab-item.active { color:var(--teal-deep); }
.tab-ico { font-size:19px; transition:.18s; }
.tab-item .tab-ico { transition:transform .2s ease, color .2s ease; }

/* ============================================================
   진행바 (청록 = 보조 진행)
   ============================================================ */
.progress-track { background:var(--gold-tint); border-radius:999px; overflow:hidden; box-shadow:inset 0 1px 2px rgba(33,31,28,.06); }
/* 진행바: 청록→금 그라데 + 상단 광택 하이라이트 + 은은한 금빛 글로우 (카드는 금·먹만이나 바는 청록→금 흐름 허용) */
.progress-fill { position:relative; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--teal) 0%, var(--gold) 58%, var(--gold-bright) 100%);
  box-shadow:0 0 8px rgba(201,162,75,.45), inset 0 1px 0 rgba(255,255,255,.4);
  transition:width .8s cubic-bezier(.22,1,.36,1); }
.progress-fill::after { content:''; position:absolute; inset:0 0 auto 0; height:45%; border-radius:999px 999px 0 0; background:linear-gradient(180deg,rgba(255,255,255,.45),transparent); pointer-events:none; }
/* 먹색 면 위 진행바 */
.progress-track-ink { background:rgba(255,255,255,.12); border-radius:999px; overflow:hidden; }
.progress-fill-gold { position:relative; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--gold-deep) 0%, var(--gold) 45%, var(--gold-bright) 100%);
  box-shadow:0 0 10px rgba(227,195,106,.55), inset 0 1px 0 rgba(255,255,255,.35);
  transition:width .8s cubic-bezier(.22,1,.36,1); }
.progress-fill-gold::after { content:''; position:absolute; inset:0 0 auto 0; height:45%; border-radius:999px 999px 0 0; background:linear-gradient(180deg,rgba(255,255,255,.4),transparent); pointer-events:none; }

/* ============================================================
   빠른 입력 버튼
   ============================================================ */
.qbtn { border:1px solid var(--line); background:var(--paper); border-radius:12px; padding:8px 0; font-weight:600; font-size:14px; color:var(--ink); transition:.12s; }
.qbtn:active { background:var(--teal-tint); transform:scale(.94); }
.qbtn-ghost { border:1px dashed #D8D2C7; background:#FAF8F3; border-radius:12px; padding:8px 0; font-weight:600; font-size:14px; color:var(--subink); }
.qbtn-ghost:active { background:#F2EFE8; }
.qbtn-accent { border:1px solid var(--teal-soft); background:var(--teal-tint); border-radius:12px; padding:8px 0; font-weight:600; font-size:14px; color:var(--teal-deep); transition:.12s; }
.qbtn-accent:active { transform:scale(.94); }

/* ============================================================
   모션 / 애니메이션
   ============================================================ */
.fade-in { animation:fade .3s ease both; }
@keyframes fade { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.fade-in-soft { animation:fadeSoft .4s ease both; }
@keyframes fadeSoft { from{opacity:0;} to{opacity:1;} }
.rise-in { animation:rise .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes rise { from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
/* 스태거 페이드(작업 4-18): 목록 카드가 위→아래로 순차 등장. JS가 style="--i:n" 부여 */
.stagger { animation:rise .5s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--i, 0) * 60ms); }
/* 탭 활성 인디케이터: 아이콘 위 금 점 + 부드러운 확대 */
.tab-item { position:relative; transition:color .2s ease, transform .15s ease; }
.tab-item::after { content:''; position:absolute; top:-3px; left:50%; transform:translateX(-50%) scale(0); width:5px; height:5px; border-radius:999px; background:var(--gold); box-shadow:0 0 6px rgba(201,162,75,.7); transition:transform .28s cubic-bezier(.34,1.56,.64,1); }
.tab-item.active::after { transform:translateX(-50%) scale(1); }
.tab-item.active i { transform:translateY(-1px) scale(1.08); }
/* 버튼 금 리플(작업 4-18): 클릭 지점에서 퍼지는 금빛 파문 */
.btn-gold, .btn-goldreal, .btn-primary { position:relative; overflow:hidden; }
.gold-ripple { position:absolute; border-radius:999px; background:rgba(255,246,220,.55); transform:translate(-50%,-50%) scale(0); animation:goldRipple .6s ease-out forwards; pointer-events:none; }
@keyframes goldRipple { to { transform:translate(-50%,-50%) scale(1); opacity:0; } }
/* 숫자 카운트업 동안 살짝 떠오름 */
.count-up { display:inline-block; }
/* 진행 링 채움(작업 4-18): 빈 링(dashoffset=둘레)에서 목표치까지 그려짐 */
.ring-fill { animation:ringFill 1.1s cubic-bezier(.22,1,.36,1) both; }
@keyframes ringFill {
  from { stroke-dashoffset:var(--ring-circ); }
  to   { stroke-dashoffset:var(--ring-off); }
}
@media (prefers-reduced-motion: reduce) {
  .stagger, .count-up, .ring-fill { animation:none !important; }
}

/* 체크 완료 팝 */
.pop { animation:pop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop { 0%{transform:scale(1);} 45%{transform:scale(1.22);} 100%{transform:scale(1);} }

/* 빛 번짐 (독송/완료) */
.glow-pulse { animation:glowPulse .9s ease; }
@keyframes glowPulse {
  0%{box-shadow:0 0 0 0 rgba(201,162,75,.55);}
  100%{box-shadow:0 0 0 16px rgba(201,162,75,0);}
}

/* 인장 찍힘 */
.stamp-in { animation:stampIn .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes stampIn {
  0%{opacity:0; transform:scale(1.6) rotate(-8deg);}
  60%{opacity:1; transform:scale(.92) rotate(-3deg);}
  100%{opacity:1; transform:scale(1) rotate(-4deg);}
}

/* 연꽃 만개 */
.bloom { animation:bloom .8s cubic-bezier(.22,1,.36,1) both; transform-origin:center bottom; }
@keyframes bloom { 0%{transform:scale(.6); opacity:0;} 100%{transform:scale(1); opacity:1;} }

/* 잔물결 */
.ripple-fx { position:relative; }
.ripple-fx::after {
  content:''; position:absolute; left:50%; top:50%; width:10px; height:10px;
  border:2px solid var(--accent); border-radius:50%; transform:translate(-50%,-50%);
  animation:rippleOut .7s ease-out; pointer-events:none;
}
@keyframes rippleOut { from{opacity:.6; width:10px; height:10px;} to{opacity:0; width:120px; height:120px;} }

/* 등불 켜짐 */
@keyframes lampLit { 0%{filter:brightness(.7);} 50%{filter:brightness(1.25);} 100%{filter:brightness(1);} }
.lamp-lit { animation:lampLit 1.4s ease; }

/* 진행 링 채워짐 (SVG stroke-dashoffset 트랜지션) */
.ring-fill { transition:stroke-dashoffset 1s cubic-bezier(.22,1,.36,1); }

/* ============================================================
   모달
   ============================================================ */
.modal-bg { position:fixed; inset:0; background:rgba(28,25,22,.5); backdrop-filter:blur(2px); display:flex; align-items:flex-end; justify-content:center; z-index:60; animation:fadeSoft .2s ease; }
.modal-card { background:var(--paper); width:100%; max-width:28rem; border-radius:24px 24px 0 0; max-height:90vh; overflow-y:auto; animation:slideup .32s cubic-bezier(.22,1,.36,1); box-shadow:0 -10px 40px rgba(28,25,22,.2); }
@keyframes slideup { from{transform:translateY(100%);} to{transform:none;} }

.divider-dot::before { content:'·'; margin:0 6px; color:var(--subink); }
textarea, input, select { font-family:inherit; }
.passage-text { font-family:'Noto Serif KR',serif; line-height:1.9; }

/* 장식 디바이더(작업 3-14): 가는 금선 + 가운데 다이아몬드 */
.ornament { display:flex; align-items:center; justify-content:center; gap:9px; margin:14px 0; color:var(--gold-deep); }
.ornament::before, .ornament::after { content:''; height:1px; flex:1; max-width:64px;
  background:linear-gradient(90deg,transparent,var(--gold-line),transparent); }
.ornament i { font-size:7px; transform:rotate(45deg); color:var(--gold); }
.ornament-mini { display:inline-flex; align-items:center; gap:5px; color:var(--gold); font-size:7px; }
.ornament-mini::before, .ornament-mini::after { content:'◆'; font-size:5px; opacity:.6; }

/* 숫자 위계 유틸(작업 3-11·12): 큰 수=세리프+금 고대비, 단위는 작고 흐리게 */
.num { font-family:'Noto Serif KR',serif; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums lining-nums; }
.num-gold { color:var(--gold-deep); }
.num-ink  { color:var(--ink); }
.unit { font-size:.62em; font-weight:600; opacity:.7; margin-left:1px; letter-spacing:0; }

/* 상단 念 인장 */
.seal { width:32px;height:32px;border:1.5px solid var(--accent);border-radius:9px;color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:'Noto Serif KR',serif;background:var(--paper);transition:.15s; }
.seal:active { background:var(--accent-tint); transform:scale(.95); }
/* 먹색 면 위 인장 */
.seal-on-ink { width:34px;height:34px;border:1.5px solid var(--gold);border-radius:9px;color:var(--gold-bright);display:flex;align-items:center;justify-content:center;font-family:'Noto Serif KR',serif;background:rgba(201,162,75,.08); }

/* 회향 전각 인장 (먹+금 도장) */
.dedication-seal {
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:10px;
  background:linear-gradient(150deg,var(--ink),#0E0D0C); color:var(--gold-bright); font-family:'Noto Serif KR',serif; font-size:24px; font-weight:700;
  box-shadow:0 4px 14px rgba(33,31,28,.35), inset 0 0 0 2px rgba(227,195,106,.35);
  transform:rotate(-4deg);
}

/* 인포그래픽 차트 영역 */
.chart-box { position:relative; height:180px; width:100%; }
.chart-donut { position:relative; width:120px; height:120px; }
.legend-dot { display:inline-block; width:9px; height:9px; border-radius:50%; flex:none; }

/* 로딩 스켈레톤 — 비동기 주입 영역 점프 방지 */
.grade-skel { border:1px solid var(--gold-line); }
.skel-line, .skel-box { display:inline-block; background:linear-gradient(100deg, rgba(160,126,46,.10) 30%, rgba(201,162,75,.22) 50%, rgba(160,126,46,.10) 70%); background-size:200% 100%; border-radius:5px; animation:skel-shimmer 1.3s ease-in-out infinite; vertical-align:middle; }
.grade-skel-dark .skel-line, .grade-skel-dark .skel-box { background:linear-gradient(100deg, rgba(243,238,229,.06) 30%, rgba(227,195,106,.18) 50%, rgba(243,238,229,.06) 70%); background-size:200% 100%; }
@keyframes skel-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* 회향 완료 도장 오버레이 — 화면 중앙 잠깐 표시 */
.ded-stamp-overlay {
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  pointer-events:none; background:rgba(33,31,28,.06); transition:opacity .35s;
}
.ded-stamp-overlay .dedication-seal {
  width:120px; height:120px; border-radius:18px; font-size:38px; letter-spacing:2px;
  flex-direction:row; line-height:1;
}
.ded-stamp-overlay.ded-stamp-out { opacity:0; }

/* ── 회향 완료 축하 오버레이 (연꽃·빛무리·입자 + 대상별 문구 + 누적 인포그래픽) ── */
.dc-overlay {
  position:fixed; inset:0; z-index:10000; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .5s ease;
  background:#08070A;
}
.dc-overlay.show { opacity:1; }
.dc-overlay.dc-out { opacity:0; }
.dc-bg {
  position:absolute; inset:0;
  background:url('/static/img/ded-bg.webp') center top / cover no-repeat;
  opacity:0; transform:scale(1.08);
  animation:dcBgIn 1.4s ease .1s forwards;
}
@keyframes dcBgIn { to { opacity:.5; transform:scale(1); } }
.dc-veil {
  position:absolute; inset:0;
  background:radial-gradient(120% 70% at 50% 26%, rgba(8,7,10,0) 0%, rgba(8,7,10,.55) 58%, rgba(8,7,10,.92) 100%);
}
/* 떠오르는 빛 입자 */
.dc-particles { position:absolute; inset:0; pointer-events:none; }
.dc-particle {
  position:absolute; bottom:-12px; border-radius:50%;
  background:radial-gradient(circle, var(--gold-bright), rgba(227,195,106,0));
  opacity:0; animation-name:dcFloat; animation-timing-function:ease-out;
  animation-iteration-count:infinite;
}
@keyframes dcFloat {
  0% { transform:translateY(0) scale(.7); opacity:0; }
  18% { opacity:.85; }
  100% { transform:translateY(-78vh) scale(1.05); opacity:0; }
}
.dc-content {
  position:relative; z-index:2; width:min(86vw, 380px);
  text-align:center; padding:8px 4px;
  display:flex; flex-direction:column; align-items:center; gap:0;
}
/* 연꽃 + 동심원 빛무리 */
.dc-lotus { position:relative; width:128px; height:128px; margin-bottom:14px; display:flex; align-items:center; justify-content:center; }
.dc-lotus-icon {
  font-size:52px; color:var(--gold-bright);
  text-shadow:0 0 22px rgba(227,195,106,.7), 0 0 46px rgba(201,162,75,.45);
  transform:scale(0); opacity:0;
  animation:dcLotusIn .9s cubic-bezier(.34,1.56,.64,1) .25s forwards;
}
@keyframes dcLotusIn { to { transform:scale(1); opacity:1; } }
.dc-ring {
  position:absolute; left:50%; top:50%; border-radius:50%;
  border:1.5px solid rgba(227,195,106,.55); width:60px; height:60px;
  transform:translate(-50%,-50%) scale(.4); opacity:0;
}
.dc-ring1 { animation:dcRing 2.6s ease-out .5s infinite; }
.dc-ring2 { animation:dcRing 2.6s ease-out 1.05s infinite; }
.dc-ring3 { animation:dcRing 2.6s ease-out 1.6s infinite; }
@keyframes dcRing {
  0% { transform:translate(-50%,-50%) scale(.4); opacity:.75; }
  100% { transform:translate(-50%,-50%) scale(2.7); opacity:0; }
}
/* 텍스트 — 순차 페이드업 */
.dc-content > *:not(.dc-lotus) { opacity:0; transform:translateY(10px); animation:dcUp .6s ease forwards; }
.dc-head    { animation-delay:.6s !important; font-family:'Noto Serif KR',serif; font-size:22px; font-weight:800; color:#F5EFE2; letter-spacing:.5px; }
.dc-target  { animation-delay:.78s !important; margin-top:8px; font-size:13px; color:var(--gold-bright); font-weight:600; }
.dc-target i { font-size:10px; margin-right:3px; opacity:.7; }
.dc-phrase  { animation-delay:.95s !important; margin-top:16px; font-family:'Noto Serif KR',serif; font-size:15.5px; line-height:1.7; color:#EDE6D6; word-break:keep-all; padding:0 6px; }
.dc-summary { animation-delay:1.12s !important; margin-top:14px; font-size:12px; color:#C9C0AE; }
.dc-summary i { color:var(--gold); margin-right:5px; font-size:11px; }
.dc-stats   { animation-delay:1.3s !important; margin-top:18px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.dc-stat {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:84px; padding:12px 16px; border-radius:16px;
  background:linear-gradient(160deg, rgba(227,195,106,.14), rgba(201,162,75,.06));
  border:1px solid rgba(227,195,106,.28);
}
.dc-stat i { font-size:15px; color:var(--gold-bright); margin-bottom:2px; }
.dc-stat b { font-size:24px; font-weight:800; color:#F5EFE2; line-height:1; font-family:'Noto Serif KR',serif; }
.dc-stat span { font-size:10.5px; color:#B7AD99; }
.dc-closer  { animation-delay:1.5s !important; margin-top:20px; font-size:12px; line-height:1.6; color:#9A917F; word-break:keep-all; padding:0 10px; }
.dc-close {
  animation-delay:1.75s !important; margin-top:24px;
  padding:11px 26px; border-radius:999px; cursor:pointer;
  background:linear-gradient(135deg, var(--gold-bright), var(--gold));
  color:#0A0A0F; font-size:13.5px; font-weight:700; border:none;
  box-shadow:0 6px 18px rgba(201,162,75,.3);
}
.dc-close:active { transform:scale(.96); }
@keyframes dcUp { to { opacity:1; transform:translateY(0); } }

/* 빈 상태 일러스트 */
.empty-illust { width:188px; height:auto; max-height:140px; object-fit:contain; opacity:.9; margin:0 auto .4rem; display:block; }
.empty-wrap { text-align:center; padding:1.6rem 1rem; }
/* 빈상태 비대칭 구성(작업 3-17): 라인아트 좌측 + 텍스트 우측, 약간 기울인 일러스트 */
.empty-asym { display:flex; align-items:center; gap:14px; text-align:left; padding:1.3rem 1.1rem; }
.empty-asym .empty-illust { width:104px; max-height:104px; margin:0; flex-shrink:0; transform:rotate(-5deg); transform-origin:bottom left; }
.empty-asym .empty-body { flex:1; min-width:0; }
.empty-asym .empty-body .btn { margin-top:.7rem; }

/* ─────────────────────────────────────────────────────────────
   통일 빈상태(.empty-state) — 목업 기준.
   좌측: 안내 텍스트 + 발원·수행·회향 흐름칩 + CTA
   우측: 경전더미·연꽃 선화 일러스트(카드 높이를 가득 채우는 큰 그래픽)
   ───────────────────────────────────────────────────────────── */
.empty-state {
  position:relative;
  display:flex; align-items:center; gap:6px;
  min-height:172px;
  padding:1.5rem 1.15rem;
  overflow:hidden;
}
.empty-state-body { flex:1 1 56%; min-width:0; position:relative; z-index:2; }
/* flow 칩이 들어가면 본문이 넓어야 하므로 일러스트는 배경 워터마크처럼 우측에 배치 */
.empty-state:has(.empty-flow) { gap:0; }
.empty-state:has(.empty-flow) .empty-state-body { flex-basis:100%; }
.empty-state:has(.empty-flow) .empty-state-art {
  position:absolute; right:-8px; bottom:-6px;
  flex:none; width:150px; max-width:150px; max-height:135px;
  opacity:.5; align-self:auto; z-index:1;
}
.empty-state-title {
  font-family:'Nanum Myeongjo', serif;
  font-size:16px; font-weight:800; color:var(--ink);
  letter-spacing:-.02em; line-height:1.32;
  word-break:keep-all;
}
.empty-state-desc {
  font-size:13px; color:var(--subink); line-height:1.65; margin-top:.45rem;
  word-break:keep-all;
}
/* 발원 · 수행 · 회향 흐름 안내칩 — 한 줄 유지 */
.empty-flow {
  display:flex; align-items:center; flex-wrap:nowrap; gap:5px;
  margin-top:.85rem;
}
.empty-flow .ef-step {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11.5px; font-weight:700; color:var(--gold-deep);
  background:var(--gold-tint);
  border:1px solid var(--gold-line);
  border-radius:999px; padding:3.5px 9px;
  white-space:nowrap;
}
.empty-flow .ef-step i { font-size:10px; }
.empty-flow .ef-arr { font-size:8px; color:var(--gold); opacity:.7; }
/* 우측 풍성한 일러스트 — 카드 높이를 거의 가득 채운다 */
.empty-state-art {
  flex:0 0 44%;
  width:44%; max-width:184px;
  height:auto; max-height:170px;
  object-fit:contain; object-position:center;
  align-self:center;
  opacity:.96;
  pointer-events:none;
}
@media (max-width:360px){
  .empty-state-art { flex-basis:40%; width:40%; max-height:144px; }
  .empty-state-title { font-size:15px; }
}

/* 섹션 라벨(작은 머리글) */
.eyebrow { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:none; }
.eyebrow-teal { color:var(--teal-deep); }
.eyebrow-gold { color:var(--gold-deep); }
.eyebrow-accent { color:var(--gold-deep); }
.eyebrow-sub { color:var(--subink); }

/* 탭별 헤더 워터마크(은은한 한자/모티프) */
.tab-head { position:relative; }
.tab-head .wm {
  position:absolute; right:14px; top:-2px; font-family:'Noto Serif KR',serif;
  font-size:64px; font-weight:700; line-height:1; color:var(--ink); opacity:.04; pointer-events:none; user-select:none;
}

/* ============================================================
   인증 랜딩 / 로그인 / 회원가입
   ============================================================ */
.landing{max-width:28rem;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2.2rem 1.3rem 2.5rem;}
.landing-top{text-align:center;margin-top:1rem}
.brand-seal{width:60px;height:60px;border-radius:16px;background:linear-gradient(160deg,var(--ink),var(--ink-2));color:var(--gold-bright);font-family:'Noto Serif KR',serif;font-size:32px;display:flex;align-items:center;justify-content:center;margin:0 auto .7rem;box-shadow:var(--sh-ink), inset 0 0 0 1px rgba(201,162,75,.3)}
.brand-seal.sm{width:46px;height:46px;font-size:24px;border-radius:12px}
.landing-title{font-family:'Noto Serif KR',serif;font-size:1.75rem;font-weight:700;color:var(--ink)}
.landing-sub{color:var(--subink);font-size:.9rem;margin-top:.3rem}
.preview-wrap{width:100%;margin:1.6rem 0 1.3rem}
.preview-frame{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:1rem;box-shadow:var(--sh-md);min-height:280px}
.pv-fade{animation:pvFade .5s ease}
@keyframes pvFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pv-screen{display:flex;flex-direction:column;gap:.55rem}
.pv-eyebrow{color:var(--accent);font-size:.7rem;font-weight:700;letter-spacing:.05em}
.pv-h{font-family:'Noto Serif KR',serif;font-size:1.15rem;font-weight:700;color:var(--ink);margin-bottom:.2rem}
.pv-card{background:var(--paper-warm);border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem}
.pv-label{font-size:.68rem;color:var(--subink);font-weight:600;margin-bottom:.25rem}
.pv-line{font-size:.85rem;color:var(--ink)}
.pv-quote{font-family:'Noto Serif KR',serif;font-size:.9rem;color:var(--ink);font-style:italic}
.pv-sub{font-size:.7rem;color:var(--subink);margin-top:.3rem}
.pv-big{font-family:'Noto Serif KR',serif;font-size:1.6rem;font-weight:700;color:var(--accent)}
.pv-row{display:flex;gap:.4rem;flex-wrap:wrap}
.pv-chip{display:inline-block;font-size:.72rem;padding:.25rem .6rem;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--subink);margin:.15rem .15rem 0 0}
.pv-chip.done{background:var(--accent);border-color:var(--accent);color:#fff}
.pv-bar{height:7px;background:var(--line);border-radius:999px;margin-top:.4rem;overflow:hidden}
.pv-bar>span{display:block;height:100%;background:var(--teal);border-radius:999px}
.pv-dots{display:flex;gap:.5rem;justify-content:center;margin-top:.2rem}
.pv-dots>span{width:7px;height:7px;border-radius:999px;background:var(--line);display:inline-block}
.pv-dots>span.on{background:var(--accent)}
.preview-dots{display:flex;gap:.45rem;justify-content:center;margin-top:.9rem}
.pv-dot{width:8px;height:8px;border-radius:999px;background:var(--line);border:none;padding:0;cursor:pointer}
.pv-dot.on{background:var(--accent);width:20px;border-radius:999px}
.preview-cap{text-align:center;color:var(--subink);font-size:.78rem;margin-top:.6rem}
.landing-cta{width:100%;display:flex;flex-direction:column;gap:.6rem;margin-top:.5rem}
.btn-primary{width:100%;padding:.95rem;border-radius:14px;background:linear-gradient(160deg,var(--ink),var(--ink-2));color:var(--on-ink);font-weight:700;font-size:1rem;border:none;cursor:pointer;box-shadow:var(--sh-ink)}
.btn-primary:disabled{opacity:.6}
.btn-text{background:none;border:none;color:var(--subink);font-size:.86rem;cursor:pointer;padding:.4rem}
.btn-text.dim{color:var(--subink-dim);font-size:.8rem}
.landing-foot{margin-top:auto;padding-top:1.5rem;color:var(--subink-dim);font-size:.75rem}
.auth-card{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:1.6rem 1.3rem;box-shadow:var(--sh-md);text-align:center;margin-top:2rem}
.auth-h{font-family:'Noto Serif KR',serif;font-size:1.4rem;font-weight:700;color:var(--ink);margin-top:.5rem}
.auth-sub{color:var(--subink);font-size:.85rem;margin:.3rem 0 1.2rem}
.auth-form{display:flex;flex-direction:column;gap:.8rem;text-align:left}
.auth-label{font-size:.8rem;color:var(--ink);font-weight:600;display:flex;flex-direction:column;gap:.3rem}
.auth-label .opt{color:var(--subink-dim);font-weight:400}
.auth-input{padding:.75rem .85rem;border:1px solid var(--line);border-radius:11px;font-size:.95rem;background:#FCFAF6;color:var(--ink);outline:none}
.auth-input:focus{border-color:var(--accent);background:var(--paper)}
.auth-err{color:var(--accent);font-size:.8rem;min-height:1rem;margin:0}
.auth-form .btn-primary{margin-top:.3rem}

/* ============================================================
   풍부화 컴포넌트 — 섹션 헤더 / 컬러풀 카드 / 타입 색상
   ============================================================ */

/* ── 카드 위계 3단계 ──────────────────────────────────────
   card-hero  : 주인공 (먹/금 면, 크게·진하게) — 화면당 1~2개
   card-rich  : 일반 (흰 면 + 색 띠/옅은 톤, 그림자 중간)
   card-list  : 목록 (컴팩트·얇은 띠·그림자 약하게)
   색 규칙: 먹·금 = 주역, 청록 = 보조, 붉은(accent) = 최소(포인트/경고만)
   ──────────────────────────────────────────────────────── */

/* L2 일반 색 카드 */
.card-rich { background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:var(--sh-md); position:relative; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease; }
/* ⚑ 좌측선(rail)은 단조로움 방지를 위해 기본 제거. '오늘의 발원 3카드'처럼
   .has-rail 을 명시한 카드에만 금/먹 띠를 표시한다. */
.card-rich::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; display:none; }
.card-rich.has-rail::before { display:block; }
/* ⚑ 카드 면색 = 금+먹(블랙)만. 청록(teal) 카드 면을 금 계열로 별칭 → 청록 카드 전면 폐지(안전망).
   청록은 면이 아닌 '포인트'(탭/카테고리 라벨/그래프)로만 살린다. */
.card-rich.tone-teal::before    { background:linear-gradient(var(--gold-bright),var(--gold-deep)); }
.card-rich.tone-gold::before    { background:linear-gradient(var(--gold-bright),var(--gold-deep)); }
.card-rich.tone-accent::before  { background:linear-gradient(var(--gold-bright),var(--gold-deep)); }
.card-rich.tone-ink::before     { background:linear-gradient(var(--ink),#0E0D0C); }
.card-rich.tone-inkgold::before { background:linear-gradient(var(--gold-bright) 0%, var(--gold-deep) 45%, var(--ink) 100%); width:5px; }
.card-rich.tone-teal    { background:linear-gradient(135deg,var(--gold-tint) 0%, var(--paper) 56%); }
.card-rich.tone-gold    { background:linear-gradient(135deg,var(--gold-tint) 0%, var(--paper) 56%); }
.card-rich.tone-accent  { background:linear-gradient(135deg,var(--gold-tint) 0%, var(--paper) 56%); }
.card-rich.tone-ink     { background:linear-gradient(135deg,#F4F1EB 0%, var(--paper) 50%); }
.card-rich.tone-inkgold { background:linear-gradient(135deg,var(--gold-tint) 0%, var(--paper) 60%); }
.card-rich:active { transform:scale(.992); }

/* L3 목록 카드 — 컴팩트, 그림자 약하게 */
/* ⚑ 좌측선(rail)은 단조로움 방지를 위해 기본 제거. .has-rail 명시 카드에만 표시. */
.card-list { background:var(--paper); border:1px solid var(--line); border-radius:13px; box-shadow:0 1px 2px rgba(33,31,28,.04); position:relative; overflow:hidden; transition:transform .15s ease; }
.card-list::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; display:none; }
.card-list.has-rail::before { display:block; }
.card-list.tone-teal::before    { background:var(--gold); }
.card-list.tone-gold::before    { background:var(--gold); }
.card-list.tone-accent::before  { background:var(--gold); }
.card-list.tone-ink::before     { background:linear-gradient(var(--ink),var(--gold-deep)); }
.card-list:active { transform:scale(.99); }

/* 연화노트 피드 카드: 좌측 라인 대신 썸네일로 종류 표현(작업 2·3) */
.lib-card { border-color:var(--line); }
.lib-card::before { display:none; }            /* 좌측 포인트 라인 제거 */
.lib-thumb {
  width:66px; flex-shrink:0; border-radius:9px;
  align-self:stretch;            /* 카드 콘텐츠 높이를 따라 늘어난다(목업) */
  min-height:80px;
  object-fit:cover; object-position:center;
  border:1px solid var(--gold-line); background:var(--ivory);
  box-shadow:0 1px 3px rgba(33,31,28,.08), 0 6px 14px rgba(33,31,28,.06);
}
.lib-act { color:var(--subink); opacity:.55; font-size:13px; transition:.12s; }
.lib-act:active { opacity:1; }

/* ─────────────────────────────────────────────────────────────
   목업 통일(B): 카드마다 그라데이션 + 선화(line-art) + 일반 썸네일
   ───────────────────────────────────────────────────────────── */

/* ───────────────────────────────────────────────────────────────
   탭 전환 스켈레톤 — 캐시 없는 탭으로 갈 때 '목적지 탭' 뼈대를 즉시 깔아
   이전 탭 화면이 한 프레임도 남지 않게 한다(잔상 차단). 은은한 금빛 쉬머.
   ─────────────────────────────────────────────────────────────── */
@keyframes sk-shimmer { 0%{background-position:-180px 0} 100%{background-position:340px 0} }
.sk-eyebrow, .sk-title, .sk-card, .sk-line {
  border-radius:8px;
  background:linear-gradient(90deg, #efe9dd 0%, #f7f1e4 40%, #efe9dd 80%);
  background-size:340px 100%;
  animation:sk-shimmer 1.15s ease-in-out infinite;
}
.sk-eyebrow { width:84px; height:11px; border-radius:6px; margin-bottom:12px; }
.sk-title   { width:62%;  height:26px; border-radius:8px; margin-bottom:18px; }
.sk-card    { width:100%; height:140px; border-radius:18px; }
.sk-card .sk-line { height:12px; margin:14px 16px 0; animation-delay:.1s; }
@media (prefers-reduced-motion: reduce) { .sk-eyebrow,.sk-title,.sk-card,.sk-line { animation:none; } }

/* (B-1) 선화 워터마크 — 밝은 금 카드(card-rich)용. la-*.png 라인아트를
   금색으로 틴트해 우하단에 은은히 깔아 단조로움을 없앤다. */
.card-art {
  position:absolute; right:2px; bottom:0px;
  width:138px; height:138px; object-fit:contain; opacity:.34;
  pointer-events:none; z-index:0;
  /* ⚑ 금색 배경 위 금색 선화는 같은 색조라 묻힌다. → '먹(짙은 갈색)' 선화로 명확히 대비.
     카드면=금 + 선화=먹 → GOLD+BLACK 조합 유지하며 또렷하게 보인다.
     선화는 굵은 먹선 PNG(투명배경)으로 교체 → 작아도 또렷하게 보인다. */
  filter:brightness(0) saturate(100%) invert(11%) sepia(34%) saturate(820%) hue-rotate(2deg) brightness(92%);
}
.card-art.art-sm { width:112px; height:112px; bottom:2px; right:4px; opacity:.30; }
/* card-art 가 있는 카드는 내부 콘텐츠를 워터마크 위로 올린다 */
.has-art > *:not(.card-art) { position:relative; z-index:1; }

/* (B-2) 일반 썸네일 — 수행/항목 카드용. 종류별 th-*.png. 크기 최적화. */
.card-thumb {
  width:74px; flex-shrink:0; border-radius:12px;
  align-self:stretch;            /* 카드 높이에 맞춰 늘어난다(목업) */
  min-height:74px;
  object-fit:cover; object-position:center;
  border:1px solid var(--gold-line); background:var(--ivory);
  box-shadow:0 2px 5px rgba(33,31,28,.10), 0 8px 18px rgba(33,31,28,.07);
}
.card-thumb.thumb-sm { width:62px; border-radius:10px; min-height:66px; }

/* ───────────────────────────────────────────────────────────────
   (목업 정합) 카드 좌측 대형 일러스트 썸네일 — '오늘의 발원/법문/발원문'.
   워터마크(card-art)가 아니라, 목업처럼 카드 왼쪽에 또렷한 컬러 그림을 박는다.
   .has-figure 카드는 내부를 가로 flex로 두고, .card-figure 가 좌측 컬럼이 된다.
   ─────────────────────────────────────────────────────────────── */
/* 목업 정합: 좌측 썸네일이 우측 텍스트 컬럼과 '같은 높이'가 되도록 stretch.
   · align-items:stretch 로 두 컬럼 높이를 일치시켜, 썸네일 밑으로 글씨가 흐르거나
     썸네일 옆에 빈 공간이 생기는 현상을 없앤다. */
.has-figure { display:flex; align-items:stretch; gap:14px; }
.card-figure {
  /* 테두리/그림자 없는 '프레임리스' 대형 일러스트. 카드 좌측 컬럼을 꽉 채운다. */
  flex:none; width:96px; align-self:stretch; min-height:108px;
  border-radius:12px; overflow:hidden;
  background:transparent; border:0; box-shadow:none;
  position:relative; z-index:1;
}
.card-figure img {
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  /* 밝은 금 카드: 일러스트의 아이보리 배경을 카드 면에 곱하기로 녹여 프레임처럼 보이지 않게 */
  mix-blend-mode:multiply;
}
/* 먹(다크) 카드 위 썸네일: 검은 배경 일러스트는 그대로(블렌드 없이) 카드에 녹아든다 */
.card-ink .card-figure { background:transparent; }
.card-ink .card-figure img { mix-blend-mode:normal; }
.card-figure-body { flex:1 1 auto; min-width:0; position:relative; z-index:1; }

/* L1 주인공 카드 — 먹 면 + 금 디테일 (오늘의 정진/등급 류) */
.card-hero { position:relative; border-radius:22px; overflow:hidden; box-shadow:0 10px 28px rgba(33,31,28,.18); }
.card-hero.hero-ink { background:linear-gradient(145deg,#2C2926 0%, var(--ink) 55%, #141312 100%); color:var(--on-ink); border:1px solid var(--line-ink); }
.card-hero.hero-gold { background:linear-gradient(140deg,#FBF3DC 0%, var(--gold-tint) 45%, #FFFDF6 100%); border:1px solid var(--gold-line); }
/* 주인공 카드 금박 광택 라인 */
.card-hero.hero-ink::after { content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent 55%, rgba(227,195,106,.10) 72%, transparent 80%); pointer-events:none; }
.card-hero .hero-frame { position:absolute; inset:7px; border:1px solid rgba(201,162,75,.28); border-radius:16px; pointer-events:none; }
/* 주인공 카드 배경 워터마크 일러스트(작업 3·4) — 한자 대신 기능 상징 라인아트 */
.card-hero .hero-wm { position:absolute; right:-14px; bottom:-18px; width:138px; height:138px; object-fit:contain; opacity:.12; pointer-events:none; z-index:1; filter:saturate(0) brightness(2.2); }

/* 섹션 헤더(아이콘 칩 + 라벨) */
.sec-head { display:flex; align-items:center; gap:8px; }
.sec-ico { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:13px; flex:none; }
.sec-ico.ico-teal { background:var(--teal-tint); color:var(--teal-deep); }
.sec-ico.ico-gold { background:var(--gold-tint); color:var(--gold-deep); }
.sec-ico.ico-accent { background:var(--accent-tint); color:var(--accent-deep); }
.sec-ico.ico-ink { background:linear-gradient(140deg,var(--ink),#0E0D0C); color:var(--gold-bright); }
.sec-ico.ico-inkgold { background:linear-gradient(140deg,var(--gold-deep),var(--ink)); color:var(--gold-bright); box-shadow:inset 0 0 0 1px rgba(227,195,106,.35); }

/* 컬러풀 통계 카드 */
.stat-rich { border-radius:16px; padding:14px; position:relative; overflow:hidden; border:1px solid transparent; }
.stat-rich .stat-ico { font-size:15px; opacity:.9; position:relative; z-index:2; }
.stat-rich .stat-wm { position:absolute; right:-12px; bottom:-14px; width:66px; height:66px; object-fit:contain; opacity:.16; pointer-events:none; z-index:1; }
/* 먹 면(ink·inkgold) 위 워터마크는 금빛으로 띄워 보이게 */
.stat-ink .stat-wm, .stat-inkgold .stat-wm { opacity:.22; filter:brightness(0) saturate(100%) invert(82%) sepia(38%) saturate(560%) hue-rotate(2deg) brightness(95%); }
.stat-rich .stat-val, .stat-rich .stat-lbl { position:relative; z-index:2; }
.stat-rich .stat-val { font-family:'Noto Serif KR',serif; font-size:26px; font-weight:700; line-height:1.05; margin-top:7px; letter-spacing:-.01em; font-variant-numeric:tabular-nums lining-nums; }
.stat-rich .stat-lbl { font-size:11.5px; margin-top:2px; }
/* ⚑ stat-teal 면을 청록→중립 아이보리로 (카드는 금+먹만). 숫자/아이콘은 먹+금톤. */
.stat-teal { background:linear-gradient(140deg,#F6F2EA,#FFFDF8); border-color:var(--line); }
.stat-teal .stat-ico,.stat-teal .stat-val { color:var(--ink); }
.stat-teal .stat-lbl { color:var(--subink); opacity:.9; }
.stat-gold { background:linear-gradient(140deg,var(--gold-tint),#FFFDF6); border-color:var(--gold-line); }
.stat-gold .stat-ico,.stat-gold .stat-val { color:var(--gold-deep); }
.stat-gold .stat-lbl { color:var(--gold-deep); opacity:.85; }
.stat-accent { background:linear-gradient(140deg,var(--accent-tint),#FDF3F0); border-color:var(--accent-soft); }
.stat-accent .stat-ico,.stat-accent .stat-val { color:var(--accent-deep); }
.stat-accent .stat-lbl { color:var(--accent-deep); opacity:.85; }
.stat-ink { background:linear-gradient(140deg,var(--ink),var(--ink-2)); border-color:var(--line-ink); }
.stat-ink .stat-ico { color:var(--gold-bright); }
.stat-ink .stat-val { color:var(--on-ink); }
.stat-ink .stat-lbl { color:var(--on-ink-dim); }
/* 먹+금 그라데이션 통계(가장 강조) */
.stat-inkgold { background:linear-gradient(140deg,#1A1916 0%, var(--ink) 50%, #322A19 100%); border-color:var(--gold-deep); box-shadow:inset 0 0 0 1px rgba(227,195,106,.22); }
.stat-inkgold .stat-ico { color:var(--gold-bright); }
.stat-inkgold .stat-val { color:var(--gold-bright); }
.stat-inkgold .stat-lbl { color:var(--on-ink-dim); }

/* 수행 타입별 색상 칩 (염불/절/독송/묵상 등) */
.ptype { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:8px; line-height:1; }
.ptype i { font-size:11px; opacity:.9; }
/* 붉은색 최소화: 염불(chant)은 먹·금 톤으로 변경 */
.ptype-chant { background:var(--gold-tint); color:var(--gold-deep); }
.ptype-bow { background:var(--gold-tint); color:var(--gold-deep); }
.ptype-recite { background:var(--teal-tint); color:var(--teal-deep); }
.ptype-medit { background:var(--gold-tint); color:var(--gold-deep); }
.ptype-etc { background:var(--bg-deep); color:var(--subink); }
.ptype-ink { background:var(--ink); color:var(--gold-bright); }
/* 붉은 포인트(꼭 필요한 강조/오늘의 발원에만) */
.ptype-accent { background:var(--accent-tint); color:var(--accent-deep); }

/* 수행 항목 미니 진행 링 (작은 도넛) */
.mini-ring { width:42px; height:42px; flex:none; }

/* 큰 페이지 헤더(워터마크 한자 포함) */
.page-head { position:relative; padding:26px 20px 10px; overflow:hidden; }
.page-head .wm { position:absolute; right:6px; top:2px; font-family:'Noto Serif KR',serif; font-size:96px; font-weight:800; color:var(--ink); opacity:.04; line-height:1; pointer-events:none; user-select:none; }
.page-head .ph-title { font-family:'Noto Serif KR',serif; font-size:24px; font-weight:700; color:var(--ink); position:relative; z-index:1; }
.page-head .ph-sub { font-size:13px; color:var(--subink); margin-top:3px; position:relative; z-index:1; }
.page-head .ph-eyebrow { position:relative; z-index:1; }

/* 통계 시작 안내(빈 차트 대신) */
.empty-chart { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:22px 12px; color:var(--subink); text-align:center; }
.empty-chart .ec-ico { width:48px; height:48px; border-radius:14px; background:var(--bg-deep); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--teal); }

/* ============================================================
   공유 (1차 MVP) — 바텀시트 토글·미리보기. 금+먹 톤만, 빨강 없음.
   ============================================================ */
.share-seal { width:26px; height:26px; border-radius:8px; background:var(--ink); color:var(--gold-bright);
  display:inline-flex; align-items:center; justify-content:center; font-family:serif; font-size:15px; flex:none; }
.share-toggles { display:flex; flex-direction:column; gap:2px; border:1px solid var(--line); border-radius:14px; padding:4px 12px; background:var(--paper-warm); }
.share-toggle { display:flex; align-items:center; justify-content:space-between; padding:8px 0; cursor:pointer; }
.share-toggle + .share-toggle { border-top:1px solid var(--line-soft); }
.share-toggle-label { font-size:13.5px; color:var(--ink); }
.share-toggle input { position:absolute; opacity:0; width:0; height:0; }
.share-switch { position:relative; width:40px; height:23px; border-radius:999px; background:var(--line); transition:background .2s ease; flex:none; }
.share-switch::after { content:''; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(33,31,28,.25); transition:transform .2s ease; }
.share-toggle input:checked + .share-switch { background:var(--gold); }
.share-toggle input:checked + .share-switch::after { transform:translateX(17px); }
.share-toggle input:focus-visible + .share-switch { outline:2px solid var(--gold-deep); outline-offset:2px; }
.share-preview { white-space:pre-wrap; word-break:break-word; font-size:12.5px; line-height:1.7; color:var(--ink-soft);
  background:var(--bg-deep); border:1px solid var(--line); border-radius:14px; padding:14px; max-height:34vh; overflow-y:auto;
  font-family:inherit; margin:0; }
/* 기록/오늘 카드의 작은 공유 버튼 */
.share-btn-sm { font-size:12px; color:var(--gold-deep); }

/* 히어로 카드 내 수월암 입장 버튼 (G0) — 검은 배경 · 금색 글자 · 빛나는 금색 이모지 */
.hero-samadhi-btn {
  width: 100%; margin-top: 16px; padding: 14px 17px; border-radius: 14px;
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: linear-gradient(135deg, #14110b 0%, #1d1810 55%, #0e0c08 100%);
  border: 1px solid rgba(214,176,98,.55);
  color: #F4D479;
  font-family: 'Noto Serif KR', serif; font-size: 15px; font-weight: 700;
  letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(244,212,121,.12), 0 4px 14px rgba(0,0,0,.35);
  transition: all .24s ease; -webkit-tap-highlight-color: transparent;
}
.hero-samadhi-btn:hover, .hero-samadhi-btn:active {
  background: linear-gradient(135deg, #1b160d 0%, #271f12 55%, #14110a 100%);
  border-color: rgba(244,212,121,.85);
  color: #FFE49C;
  box-shadow: inset 0 1px 0 rgba(244,212,121,.2), 0 0 26px rgba(214,176,98,.38);
}
/* 빛나는 금색 수월암(연꽃) 이모지 — glow 애니메이션 */
.hero-samadhi-btn .fa-spa {
  font-size: 18px;
  color: #FFD96B;
  text-shadow: 0 0 8px rgba(255,217,107,.85), 0 0 16px rgba(214,176,98,.5);
  animation: hsbGlow 2.6s ease-in-out infinite;
}
@keyframes hsbGlow {
  0%, 100% { text-shadow: 0 0 6px rgba(255,217,107,.6), 0 0 12px rgba(214,176,98,.35); opacity: .92; }
  50%      { text-shadow: 0 0 12px rgba(255,217,107,1), 0 0 24px rgba(255,210,90,.7); opacity: 1; }
}
.hero-samadhi-btn .hsb-txt { flex: 1; text-align: left; }
.hero-samadhi-btn .hsb-arrow { font-size: 13px; color: #D6B062; opacity: .85; }

/* ─────────────────────────────────────────────
   온보딩 · 수월암 소개 단계
   AI 생성 동양화풍 '물 위에 비친 달' 이미지 + 하단 페이드 + 금빛 입자
   ───────────────────────────────────────────── */
.ob-samadhi {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  padding: 0;
  min-height: 470px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
  background: #0A0A0F;
  box-shadow: inset 0 0 0 1px rgba(197,160,89,.3), 0 12px 34px rgba(0,0,0,.35);
}
/* 생성 이미지 — 카드 전면을 채우는 밤하늘+달+물 반영 */
.ob-samadhi-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('/static/img/ob-samadhi-moon.webp');
  background-size: cover; background-position: center 18%;
  animation: obBgDrift 18s ease-in-out infinite alternate;
}
@keyframes obBgDrift {
  0%   { transform: scale(1.02) translateY(0); }
  100% { transform: scale(1.08) translateY(-6px); }
}
/* 하단 어둠 오버레이 — 텍스트 가독성 확보 */
.ob-samadhi-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10,10,15,0) 30%,
    rgba(10,10,15,.55) 58%,
    rgba(10,10,15,.92) 86%,
    #0A0A0F 100%);
}
/* 텍스트 블록 (하단 정렬) */
.ob-samadhi-text { position: relative; z-index: 3; padding: 0 24px 30px; }
.ob-samadhi-title { font-size: 27px; font-weight: 700; color: #FFDF8C;
  letter-spacing: 2px; margin-bottom: 5px; text-shadow: 0 2px 18px rgba(0,0,0,.7), 0 0 16px rgba(214,176,98,.45); }
.ob-samadhi-sub { font-size: 12px; color: #D6B97A;
  letter-spacing: 2.5px; margin-bottom: 16px; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.ob-samadhi-desc { font-size: 13.5px; line-height: 1.7;
  color: #ECE6D8; max-width: 310px; margin-left: auto; margin-right: auto;
  text-shadow: 0 1px 8px rgba(0,0,0,.85); }
.ob-samadhi-desc + .ob-samadhi-desc { margin-top: 10px; }
.ob-samadhi-desc .em { color: #FFDF8C; font-weight: 600; }
/* 떠다니는 금빛 입자 */
.ob-particles { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.ob-particle {
  position: absolute; bottom: -8px; width: 3px; height: 3px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,223,140,.9), rgba(255,223,140,0));
  opacity: 0; animation: obFloat linear infinite;
}
@keyframes obFloat {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  12%  { opacity: .6; }
  88%  { opacity: .45; }
  100% { transform: translateY(-420px) translateX(14px); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════
   오늘 탭 — 발원·법문 / 정진(수행) 영역 시각 구분
   · 두 영역을 옅은 톤·라벨로 나누되, 앱 전체 금/아이보리 톤을 유지.
   ════════════════════════════════════════════════════════════ */
.today-section { position: relative; padding-top: 4px; padding-bottom: 6px; }
/* 영역 구분 라벨(가는 금선 + 가운데 라벨) */
.section-label {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 20px 12px; user-select: none;
}
.section-label .sl-line {
  flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
.section-label .sl-text {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Noto Serif KR', serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; color: var(--gold-deep);
  padding: 3px 12px; border-radius: 999px;
  background: var(--gold-tint); border: 1px solid var(--gold-line);
  box-shadow: 0 1px 3px rgba(160,126,46,.10);
}
.section-label .sl-text i { font-size: 11px; color: var(--gold); }
/* 발원·법문 영역: 아주 옅은 따뜻한 종이 배경으로 묶어 한 덩어리처럼 */
.today-section.sec-vow {
  background: linear-gradient(180deg, rgba(247,239,217,.42) 0%, rgba(247,239,217,0) 96%);
  border-radius: 22px; margin: 6px 8px 2px; padding-bottom: 10px;
}
.today-section.sec-practice { padding-bottom: 10px; }

/* ════════════════════════════════════════════════════════════
   완료(회향 전) 수행 카드 — '마쳤지만 아직 회향 전' 상태 강조
   ════════════════════════════════════════════════════════════ */
.card-rich.done-await {
  background: linear-gradient(135deg, var(--gold-tint) 0%, #FFFDF6 62%);
  border-color: var(--gold-line);
  box-shadow: 0 2px 10px rgba(160,126,46,.14), inset 0 0 0 1px rgba(227,195,106,.35);
}
.card-rich.done-await.has-rail::before,
.card-rich.done-await::before {
  display: block; width: 5px;
  background: linear-gradient(var(--gold-bright), var(--gold-deep));
}
/* 완료 리본: 카드 상단에 '회향 전' 배지 + 격려 문구 */
.done-ribbon {
  display: flex; align-items: center; gap: 8px;
  margin: -2px 0 10px; padding-bottom: 9px;
  border-bottom: 1px dashed var(--gold-line);
  font-family: 'Noto Serif KR', serif;
}
.done-ribbon > i.fa-circle-check { color: var(--gold-deep); font-size: 15px; flex: none; }
.done-ribbon .dr-main {
  flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 700;
  color: var(--gold-deep); letter-spacing: -.01em;
}
.done-ribbon .dr-badge {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  color: #fff; padding: 3px 9px; border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  box-shadow: 0 1px 4px rgba(160,126,46,.3);
}
.done-ribbon .dr-badge i { font-size: 9px; }
/* 완료 카드 본문 살짝 차분하게(완료 후 휴지 느낌) */
.card-rich.done-await h4 { color: var(--gold-deep); }

/* ════════════════════════════════════════════════════════════════════
   🏮 연등의 밤 (Lantern Night) — html[data-theme="night"]
   적용 시간(미래): 19:00~04:00. 지금은 강제 적용 + 테스트 토글.
   컨셉: 밤 사찰 마당 · 연등 · 발원 · 고요한 수행.
   단순 검정+금색 아님 → 연등의 따뜻한 금빛이 UI 안에서 은은히 번진다.
   ════════════════════════════════════════════════════════════════════ */
html[data-theme="night"] {
  /* 바탕 */
  --bg: #1E1618;            /* 전체 배경(밤사찰) */
  --bg-deep: #160F11;
  --paper: #2B201B;         /* 메인 카드 */
  --paper-warm: #3A2A1F;    /* 보조 카드(읽을거리) */

  /* 면(먹→밤) */
  --ink: #2B201B;           /* 어두운 히어로 면(카드와 통일) */
  --ink-2: #221915;
  --ink-soft: #3A2A1F;
  --subink: #B9A995;        /* 보조 텍스트 */
  --subink-dim: #8C7E6C;    /* 흐린 보조 */
  --on-ink: #FFF3DD;        /* 면 위 밝은 텍스트(촛불 아이보리) */
  --on-ink-dim: #B9A995;

  /* 경계(그을린 황동) */
  --line: #5A4328;
  --line-soft: #45331F;
  --line-ink: #5A4328;

  /* 청록 → 올리브 골드(평온/완료) 로 대체 */
  --teal: #8A7A45;
  --teal-deep: #8A7A45;
  --teal-tint: rgba(138,122,69,.16);
  --teal-soft: rgba(138,122,69,.45);

  /* 보조 포인트(주홍갈색) */
  --accent: #D79A3A;
  --accent-deep: #9C4B32;
  --accent-tint: rgba(215,154,58,.14);
  --accent-soft: rgba(215,154,58,.40);

  /* 금(연등 금빛) — 메인 포인트 */
  --gold: #D79A3A;
  --gold-bright: #F0C064;
  --gold-deep: #9C6A22;
  --gold-tint: rgba(215,154,58,.12);
  --gold-line: #5A4328;

  /* 그림자 — 어둠 위 깊이 + 은은한 금빛 */
  --sh-sm: 0 1px 2px rgba(0,0,0,.40), 0 4px 12px rgba(0,0,0,.32);
  --sh-md: 0 2px 8px rgba(0,0,0,.42), 0 12px 28px rgba(0,0,0,.36);
  --sh-ink: 0 8px 22px rgba(0,0,0,.55), 0 20px 46px rgba(0,0,0,.45);
  --sh-gold: 0 3px 14px rgba(215,154,58,.30), 0 14px 32px rgba(156,106,34,.22);

  --ink-text: #FFF3DD;
  color: #FFF3DD;
}

/* ── 본문 배경: 미리 흐림 처리한 밤 사찰 이미지(실시간 blur·fixed 제거: 성능)
   ⚠️ background-attachment:fixed + filter:blur 는 모바일에서 스크롤마다 전화면
      리페인트를 일으켜 심각한 버벅임/멈춤을 유발 → 정적 배경 + 미리 구운 blur 사용. ── */
html[data-theme="night"] body {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(215,154,58,.12) 0%, transparent 55%),
    linear-gradient(180deg, rgba(30,22,24,.82) 0%, rgba(22,15,17,.92) 100%),
    var(--bg);
  color: #FFF3DD;
}
/* 흐린 배경 사진: 고정 레이어 1장(애니메이션·실시간 blur 없음, GPU 부담 최소) */
html[data-theme="night"] body::before {
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:url('/static/img/night-temple-bg-blur.webp') center top / cover no-repeat;
  opacity:.16;                 /* 10~20% */
}

/* ── 카드: 메인/보조 면 + 그을린 황동 테두리 ── */
html[data-theme="night"] .card,
html[data-theme="night"] .card-soft {
  background:linear-gradient(180deg, #32251E 0%, var(--paper) 100%);
  border:1px solid var(--line);
}
html[data-theme="night"] .card-paper {
  background:linear-gradient(180deg, var(--paper-warm) 0%, #322317 100%);
  border:1px solid var(--line-soft);
}
html[data-theme="night"] .card-done {
  background:linear-gradient(180deg, rgba(138,122,69,.20) 0%, var(--paper) 70%);
  border-color: var(--teal-soft);
}
html[data-theme="night"] .card-gold {
  background:linear-gradient(135deg, rgba(215,154,58,.18) 0%, var(--paper) 100%);
  border:1px solid var(--gold-line); box-shadow:var(--sh-gold);
}

/* ── 히어로(먹) 카드 → 밤 면 + 연등 금빛 테두리 숨쉬기 ── */
html[data-theme="night"] .card-ink {
  background:linear-gradient(160deg, #34261E 0%, #241A15 100%);
  border:1px solid var(--gold-line);
}
html[data-theme="night"] .card-ink::after {
  box-shadow:
    inset 0 0 0 1px rgba(215,154,58,.30),
    inset 0 0 22px rgba(215,154,58,.10);
  animation: nightHeroPulse 5s ease-in-out infinite;
}
@keyframes nightHeroPulse {
  0%,100% { box-shadow: inset 0 0 0 1px rgba(215,154,58,.22), inset 0 0 16px rgba(215,154,58,.06); }
  50%     { box-shadow: inset 0 0 0 1px rgba(240,192,100,.42), inset 0 0 30px rgba(215,154,58,.16); }
}
/* 다크 카드 보케 글로우: 연등 톤으로 */
html[data-theme="night"] .card-textured::before {
  background:
    radial-gradient(60px 60px at 84% 14%, rgba(240,192,100,.26), transparent 70%),
    radial-gradient(44px 44px at 16% 80%, rgba(215,154,58,.18), transparent 70%),
    radial-gradient(100px 100px at 50% 122%, rgba(156,106,34,.20), transparent 72%),
    linear-gradient(120deg, transparent 52%, rgba(240,192,100,.06) 66%, transparent 74%);
  animation: nightBokeh 7s ease-in-out infinite;
}
@keyframes nightBokeh {
  0%,100% { opacity:.85; } 50% { opacity:1; }
}

/* ── 칩 / 배지 ── */
html[data-theme="night"] .chip { border-color:var(--line); color:var(--subink); }
html[data-theme="night"] .chip.active,
html[data-theme="night"] .chip-gold.active {
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color:#1E1618; border-color:var(--gold-bright);
  box-shadow:0 0 12px rgba(215,154,58,.40);
}
html[data-theme="night"] .badge-teal { color:#C8B86E; border-color:var(--teal-soft); background:var(--teal-tint); }
html[data-theme="night"] .badge-gold,
html[data-theme="night"] .badge-accent { color:var(--gold-bright); border-color:var(--gold-line); }

/* ── 버튼: CTA 안쪽 금빛 흐름 ── */
html[data-theme="night"] .btn-primary { background:linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); color:#1E1618; }
html[data-theme="night"] .btn-ghost { background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--on-ink); }
html[data-theme="night"] .btn-ghost:active { background:rgba(255,255,255,.08); }
html[data-theme="night"] .btn-on-ink { background:rgba(215,154,58,.12); border:1px solid rgba(215,154,58,.40); color:var(--on-ink); }
html[data-theme="night"] .btn-gold,
html[data-theme="night"] .btn-goldreal {
  position:relative; overflow:hidden; color:#241A10;
  background:linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 45%, var(--gold-deep) 100%);
  box-shadow:0 4px 18px rgba(215,154,58,.36), inset 0 0 0 1px rgba(240,192,100,.4);
}
/* CTA 안쪽 금빛 천천히 흐름 */
html[data-theme="night"] .btn-gold::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg, transparent 30%, rgba(255,240,200,.45) 50%, transparent 70%);
  transform:translateX(-120%);
  animation: nightCtaFlow 4.5s ease-in-out infinite;
}
@keyframes nightCtaFlow { 0%{transform:translateX(-120%);} 60%,100%{transform:translateX(120%);} }

/* ── 탭바: 활성 = 연등 금빛 글로우 ── */
html[data-theme="night"] #tabbar {
  background:rgba(30,22,24,.92) !important;
  border-top:1px solid var(--line) !important;
  backdrop-filter:blur(12px);
}
html[data-theme="night"] .tab-item { color:var(--subink-dim); }
html[data-theme="night"] .tab-item.active { color:var(--gold-bright); }
html[data-theme="night"] .tab-item.active .tab-ico {
  color:var(--gold); text-shadow:0 0 10px rgba(215,154,58,.6);
  animation: nightTabGlow 4s ease-in-out infinite;
}
@keyframes nightTabGlow {
  0%,100% { text-shadow:0 0 8px rgba(215,154,58,.45); }
  50%     { text-shadow:0 0 16px rgba(240,192,100,.75); }
}

/* ── 진행바: 올리브골드→연등금빛, 은은한 글로우 ── */
html[data-theme="night"] .progress-track { background:rgba(215,154,58,.12); box-shadow:inset 0 1px 2px rgba(0,0,0,.4); }
html[data-theme="night"] .progress-fill {
  background:linear-gradient(90deg, var(--teal) 0%, var(--gold) 58%, var(--gold-bright) 100%);
  box-shadow:0 0 12px rgba(215,154,58,.55), inset 0 1px 0 rgba(255,240,200,.3);
}
html[data-theme="night"] .progress-track-ink { background:rgba(255,255,255,.08); }

/* ── 진행 염주(bead) 노드: 순차 미세 반짝임 ── */
html[data-theme="night"] .bead-node {
  box-shadow:0 0 0 1px rgba(215,154,58,.3);
  animation: nightBead 3s ease-in-out infinite;
}
html[data-theme="night"] .bead-node:nth-child(2n)  { animation-delay:.5s; }
html[data-theme="night"] .bead-node:nth-child(3n)  { animation-delay:1s; }
html[data-theme="night"] .bead-node:nth-child(4n)  { animation-delay:1.5s; }
html[data-theme="night"] .bead-node:nth-child(5n)  { animation-delay:2s; }
@keyframes nightBead {
  0%,100% { box-shadow:0 0 0 1px rgba(215,154,58,.25); }
  50%     { box-shadow:0 0 8px 1px rgba(240,192,100,.6); }
}

/* ── 텍스트 가독성: 카드 안쪽 어두운 그라데 오버레이(WCAG AA) ── */
html[data-theme="night"] .text-ink,
html[data-theme="night"] h1, html[data-theme="night"] h2,
html[data-theme="night"] h3, html[data-theme="night"] h4 { color:var(--on-ink); }
html[data-theme="night"] .text-subink { color:var(--subink); }

/* ── 라인 아이콘 ── */
html[data-theme="night"] .lib-act, html[data-theme="night"] .card-act { color:var(--subink); }
html[data-theme="night"] .lib-act:active, html[data-theme="night"] .card-act:active,
html[data-theme="night"] .lib-act:hover, html[data-theme="night"] .card-act:hover { color:var(--gold-bright); }

/* ── 카드 figure(연등/경전/염주) 일러스트 ── */
.night-fig {
  position:absolute; right:-8px; bottom:-10px; width:96px; height:96px;
  object-fit:contain; opacity:0; pointer-events:none; z-index:0;
  filter:drop-shadow(0 0 12px rgba(215,154,58,.45));
  transition:opacity .4s ease;
}
html[data-theme="night"] .night-fig {
  opacity:.82; animation: nightFigBreath 6s ease-in-out infinite;
}
@keyframes nightFigBreath {
  0%,100% { opacity:.74; filter:drop-shadow(0 0 8px rgba(215,154,58,.35)); }
  50%     { opacity:.9;  filter:drop-shadow(0 0 18px rgba(240,192,100,.6)); }
}

/* ── 모달/입력도 밤 톤으로 ── */
html[data-theme="night"] input, html[data-theme="night"] textarea, html[data-theme="night"] select {
  background:#241A15; border-color:var(--line); color:var(--on-ink);
}
html[data-theme="night"] .qbtn { background:#241A15; border-color:var(--line); color:var(--on-ink); }
html[data-theme="night"] .qbtn:active { background:rgba(215,154,58,.15); }
html[data-theme="night"] .qbtn-ghost { background:rgba(255,255,255,.03); border-color:var(--line); color:var(--subink); }

/* ── 테마 토글 버튼(테스트용) ── */
#theme-toggle {
  position:fixed; right:14px; top:calc(env(safe-area-inset-top,0px) + 10px);
  z-index:60; width:38px; height:38px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; font-size:16px;
  background:rgba(43,32,27,.85); color:#F0C064; border:1px solid #5A4328;
  box-shadow:0 2px 10px rgba(0,0,0,.4); backdrop-filter:blur(6px);
}
html:not([data-theme="night"]) #theme-toggle { background:rgba(255,255,255,.9); color:#A07E2E; border-color:#E5D2A0; }

/* ── 모션 줄이기 환경: 모든 야간 애니메이션 정지(속도 작업 보호) ── */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="night"] body::before,
  html[data-theme="night"] body::after,
  html[data-theme="night"] .card-ink::after,
  html[data-theme="night"] .card-textured::before,
  html[data-theme="night"] .btn-gold::before,
  html[data-theme="night"] .tab-item.active .tab-ico,
  html[data-theme="night"] .bead-node,
  html[data-theme="night"] .night-fig { animation:none !important; }
}

/* ── 야간: Tailwind 정적 색 토큰 보정(static hex 라 CSS 변수로 안 바뀜) ── */
html[data-theme="night"] .bg-paper { background-color:#2B201B !important; }
html[data-theme="night"] .bg-paperwarm { background-color:#3A2A1F !important; }
html[data-theme="night"] .bg-bgdeep { background-color:#160F11 !important; }
html[data-theme="night"] .text-ink { color:#FFF3DD !important; }
html[data-theme="night"] .text-subink, html[data-theme="night"] .text-subink\/70 { color:#B9A995 !important; }
html[data-theme="night"] .border-line { border-color:#5A4328 !important; }
html[data-theme="night"] .text-golddeep { color:#F0C064 !important; }
html[data-theme="night"] .text-gold { color:#D79A3A !important; }
html[data-theme="night"] .hover\:bg-bgdeep:hover { background-color:#241A15 !important; }
/* 노트 쓰기 버튼 = 보조 면 + 황동 테두리 */
html[data-theme="night"] .bg-paper.text-ink { background-color:#32251E !important; }

/* ════════════════════════════════════════════════════════════════════
   🏮 연등의 밤 — 가독성 보정 (긴급)
   문제: 야간엔 --ink 를 "카드 면색(#2B201B)"으로 바꿨는데,
        많은 텍스트가 color:var(--ink) 라서 어두운 글자가 어두운 배경에 묻힘.
   해결: 텍스트로 --ink 를 쓰던 요소들을 아이보리로 강제 오버라이드.
   ════════════════════════════════════════════════════════════════════ */
/* 페이지 헤더(발원/수행/자료함/도량 상단 제목) */
html[data-theme="night"] .page-head .ph-title { color:#FFF3DD; }
html[data-theme="night"] .page-head .ph-sub   { color:#B9A995; }
html[data-theme="night"] .page-head .wm        { color:#D79A3A; opacity:.10; }
html[data-theme="night"] .tab-head .wm         { color:#D79A3A; opacity:.10; }
/* 빈 상태 카드 */
html[data-theme="night"] .empty-state-title { color:#FFF3DD; }
html[data-theme="night"] .empty-state-desc  { color:#B9A995; }
html[data-theme="night"] .empty-illust,
html[data-theme="night"] .empty-state-art img { filter:brightness(1.15) saturate(1.05); }
/* 발원/수행 카드 제목·본문 */
html[data-theme="night"] .card-rich h1,
html[data-theme="night"] .card-rich h2,
html[data-theme="night"] .card-rich h3,
html[data-theme="night"] .card-rich h4,
html[data-theme="night"] .font-serif { color:#FFF3DD; }
/* section 헤더 제목 */
html[data-theme="night"] .sec-head h4 { color:#FFF3DD; }
html[data-theme="night"] .sec-head .text-golddeep { color:#F0C064; }
/* ptype 칩(대상/주제/기간 등) — 야간 가독성 */
html[data-theme="night"] .ptype { color:#FFF3DD; background:rgba(215,154,58,.14); border:1px solid rgba(215,154,58,.28); }
html[data-theme="night"] .ptype .opacity-55 { opacity:.7; color:#B9A995; }
/* eyebrow 작은 라벨 */
html[data-theme="night"] .eyebrow-gold,
html[data-theme="night"] .eyebrow-accent { color:#E6B45A; }
html[data-theme="night"] .eyebrow-sub { color:#B9A995; }
/* 일반 본문 텍스트 색 유틸(Tailwind 정적값) */
html[data-theme="night"] .text-ink, html[data-theme="night"] .text-ink2 { color:#FFF3DD !important; }
html[data-theme="night"] [class*="text-subink"] { color:#B9A995 !important; }
html[data-theme="night"] .text-golddeep { color:#F0C064 !important; }
/* card-rich tone 배경: 야간엔 너무 밝지 않게(금빛 살짝만) */
html[data-theme="night"] .card-rich { background:linear-gradient(135deg,#32251E 0%, var(--paper) 60%); border-color:var(--line); box-shadow:var(--sh-md); }
html[data-theme="night"] .card-rich.tone-gold,
html[data-theme="night"] .card-rich.tone-inkgold,
html[data-theme="night"] .card-rich.tone-teal,
html[data-theme="night"] .card-rich.tone-accent {
  background:linear-gradient(135deg, rgba(215,154,58,.14) 0%, var(--paper) 58%);
}
/* sec-ico(아이콘 배지) 야간 */
html[data-theme="night"] .sec-ico { color:#F0C064; }

/* ── 스켈레톤(흰 박스 → 야간 어두운 톤) ── */
html[data-theme="night"] .sk-eyebrow,
html[data-theme="night"] .sk-title,
html[data-theme="night"] .sk-card,
html[data-theme="night"] .sk-line {
  background:linear-gradient(90deg, #2B201B 0%, #3A2A1F 40%, #2B201B 80%);
  background-size:340px 100%;
}

/* ── 모달/시트도 야간 면색(밝은 모달 잔상 방지) ── */
html[data-theme="night"] .card,
html[data-theme="night"] .modal-sheet,
html[data-theme="night"] #modal-root .card { color:#FFF3DD; }

/* ════════════════════════════════════════════════════════════════════
   🏮 연등의 밤 — 성능 보정 (스크롤 버벅임/멈춤 해결)
   box-shadow·filter 를 매 프레임 애니메이션하면 리페인트 폭주 → 멈춤.
   상시 글로우는 '정적'으로 두고, 무거운 키프레임만 끈다.
   (opacity/transform 만 쓰는 가벼운 모션은 유지)
   ════════════════════════════════════════════════════════════════════ */
/* 히어로 테두리 펄스: box-shadow 애니메이션 → 정적 글로우로 */
html[data-theme="night"] .card-ink::after {
  animation: none !important;
  box-shadow: inset 0 0 0 1px rgba(215,154,58,.30), inset 0 0 22px rgba(215,154,58,.10) !important;
}
/* 보케: opacity만 쓰지만 큰 영역 → 정지(정적 유지) */
html[data-theme="night"] .card-textured::before { animation: none !important; }
/* figure 호흡: filter:drop-shadow 애니메이션(가장 비쌈) → 정적 그림자로 */
html[data-theme="night"] .night-fig {
  animation: none !important;
  filter: drop-shadow(0 0 10px rgba(215,154,58,.40)) !important;
  opacity:.82 !important;
}
/* 탭 글로우: text-shadow 애니메이션 → 정적 */
html[data-theme="night"] .tab-item.active .tab-ico {
  animation: none !important;
  text-shadow: 0 0 10px rgba(215,154,58,.55) !important;
}
/* 염주 노드 글린트(box-shadow 반복) → 끔 */
html[data-theme="night"] .bead-node { animation: none !important; }
/* CTA 금빛 흐름: transform 만 쓰지만 항상 돌아 부담 → 매우 느리게(부담↓) */
html[data-theme="night"] .btn-gold::before { animation-duration: 9s !important; }

/* ════════════════════════════════════════════════════════════
   야간 가독성/레이아웃 정리 (사용자 피드백 반영)
   ════════════════════════════════════════════════════════════ */

/* [문제2,4,6] night-fig 썸네일(사진형) 전면 제거 — 버튼 가림/깨짐/테마 부조화 */
.night-fig { display: none !important; }

/* [문제3] '발원과 법문' 섹션 회색 배경 카드 제거 + 상단 카드와 좌우 폭(mx-5=20px) 정렬 */
.today-section.sec-vow {
  background: none;
  margin: 6px 0 2px;       /* 좌우 margin 제거 → 내부 카드의 mx-5 와 폭 일치 */
  border-radius: 0;
  padding-bottom: 4px;
}
html[data-theme="night"] .today-section.sec-vow { background: none; }
/* 섹션 라벨 칩: 야간엔 밝은 종이배경(--gold-tint)이 회색으로 보임 → 어두운 금빛 칩 */
html[data-theme="night"] .section-label .sl-text {
  color: #E6B45A;
  background: rgba(215,154,58,.12);
  border-color: rgba(215,154,58,.34);
  box-shadow: none;
}
html[data-theme="night"] .section-label .sl-text i { color: #E6B45A; }
html[data-theme="night"] .section-label .sl-line {
  background: linear-gradient(90deg, transparent, rgba(215,154,58,.35), transparent);
}

/* [문제5] '평생 누적 X회' 청록(text-tealdeep/bg-tealtint) → 야간 금빛으로 보정 */
html[data-theme="night"] .bg-tealtint { background-color: rgba(215,154,58,.12) !important; }
html[data-theme="night"] .text-tealdeep,
html[data-theme="night"] .text-tealdeep b { color: #E6B45A !important; }

/* [문제4 추가] 미완료 '독송 체크하기' 등 버튼이 밝은 종이색(bg-goldtint)이라 야간에 회색빛 → 어두운 금빛 톤 */
html[data-theme="night"] .bg-goldtint,
html[data-theme="night"] .bg-goldtint\/50,
html[data-theme="night"] .bg-goldtint\/40 {
  background-color: rgba(215,154,58,.12) !important;
}
html[data-theme="night"] .hover\:bg-goldtint:hover { background-color: rgba(215,154,58,.16) !important; }
/* 미완료 버튼 글자/테두리도 잘 보이는 금빛으로 */
html[data-theme="night"] .text-golddeep { color: #E6B45A !important; }
html[data-theme="night"] .border-goldline { border-color: rgba(215,154,58,.40) !important; }
html[data-theme="night"] .border-goldline\/40 { border-color: rgba(215,154,58,.28) !important; }

/* [문제1] 회원가입 캐러셀(앱 미리보기) 야간 가독성 — pv-* 가 --ink/--paper 재사용으로 안 보임 */
html[data-theme="night"] .preview-frame {
  background: #2B201B;
  border-color: #5A4328;
}
html[data-theme="night"] .pv-h { color: #FFF3DD; }
html[data-theme="night"] .pv-card {
  background: #3A2A1F;
  border-color: #5A4328;
}
html[data-theme="night"] .pv-label { color: #C9B79E; }
html[data-theme="night"] .pv-line,
html[data-theme="night"] .pv-quote,
html[data-theme="night"] .pv-big { color: #FFF3DD; }
html[data-theme="night"] .pv-sub { color: #B9A995; }
html[data-theme="night"] .pv-eyebrow { color: #E6B45A; }
html[data-theme="night"] .pv-chip {
  background: rgba(255,255,255,.04);
  border-color: #5A4328;
  color: #C9B79E;
}
html[data-theme="night"] .pv-chip.done {
  background: rgba(215,154,58,.85);
  border-color: rgba(215,154,58,.85);
  color: #221A12;
}
html[data-theme="night"] .pv-bar { background: rgba(255,255,255,.08); }
html[data-theme="night"] .pv-bar > span { background: #D79A3A; }
html[data-theme="night"] .preview-cap { color: #B9A995; }
html[data-theme="night"] .pv-dots span { background: rgba(255,255,255,.12); }
html[data-theme="night"] .pv-dots span.on { background: rgba(215,154,58,.7); }

/* [문제d] 리포트 통계 카드 야간 가독성 — stat-gold/stat-teal/stat-accent 가
   밝은 그라데이션(흰색)이라 야간에 글자가 묻힘. 어두운 먹·금 면 + 밝은 글자로 오버라이드. */
html[data-theme="night"] .stat-gold {
  background: linear-gradient(140deg, #2E2118 0%, #241B16 55%, #3A2A18 100%);
  border-color: #5A4328;
  box-shadow: inset 0 0 0 1px rgba(215,154,58,.16);
}
html[data-theme="night"] .stat-gold .stat-ico,
html[data-theme="night"] .stat-gold .stat-val { color: #F0C064; }
html[data-theme="night"] .stat-gold .stat-lbl { color: #C9B79E; opacity: 1; }

html[data-theme="night"] .stat-teal {
  background: linear-gradient(140deg, #29211C 0%, #221B17 100%);
  border-color: #5A4328;
}
html[data-theme="night"] .stat-teal .stat-ico,
html[data-theme="night"] .stat-teal .stat-val { color: #FFF3DD; }
html[data-theme="night"] .stat-teal .stat-lbl { color: #B9A995; opacity: 1; }

html[data-theme="night"] .stat-accent {
  background: linear-gradient(140deg, #2E2118 0%, #241B16 100%);
  border-color: #5A4328;
}
html[data-theme="night"] .stat-accent .stat-ico,
html[data-theme="night"] .stat-accent .stat-val { color: #F0C064; }
html[data-theme="night"] .stat-accent .stat-lbl { color: #C9B79E; opacity: 1; }

/* 워터마크(la-temple 등)도 야간엔 금빛으로 띄워 보이게 — 밝은 카드용 보정 무효화 */
html[data-theme="night"] .stat-gold .stat-wm,
html[data-theme="night"] .stat-teal .stat-wm,
html[data-theme="night"] .stat-accent .stat-wm {
  opacity: .20;
  filter: brightness(0) saturate(100%) invert(82%) sepia(38%) saturate(560%) hue-rotate(2deg) brightness(95%);
}

/* 수행법 상세 모달 안 작은 통계 카드(.card) 도 야간 점검 — text-gold/text-ink 토큰은 별도 정의됨 */

/* [문제a] 좌측 썸네일을 연등의 밤 컨셉 어두운 일러스트로 재생성함.
   밝은 카드(card-rich)의 mix-blend-mode:multiply는 어두운 이미지를 거의 검게 만들므로
   야간 테마에선 블렌드를 끄고 원본 그대로 카드에 녹아들게 한다. */
html[data-theme="night"] .card-figure img { mix-blend-mode: normal; }

/* [수행 카드 썸네일 야간] th-* 를 연등의 밤 어두운 톤으로 교체함.
   기본 .card-thumb 의 흰 배경(--ivory)·밝은 금 테두리·밝은 그림자가 야간에 튀므로 어둡게. */
html[data-theme="night"] .card-thumb {
  background: #1E1618;
  border-color: #5A4328;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* [발원 더보기 펼침] othersHtml 펼침 영역 — 기존 Tailwind 유틸(bg-ivory/text-ink/border-line)이
   야간 테마에서 밝은 아이보리 박스로 떠서 글자가 묻히고 깨져 보이던 문제 해결.
   라이트=기존과 동일한 미색 카드, 야간=다크 톤 전용 색으로 칠한다. */
.intent-other-card { border-color: var(--line); background: rgba(250,247,240,.6); }
.intent-other-title { color: var(--ink); }
.intent-other-meta { color: var(--subink); }
.intent-other-sep { color: var(--subink); opacity: .4; }
.intent-other-prayer { color: var(--subink); }
.intent-other-prayer i { color: var(--gold); opacity: .7; margin-right: .25rem; }
.intent-other-prayer--empty { opacity: .55; }
.intent-other-prayer--empty i { color: var(--subink); opacity: 1; }
.intent-other-btn { color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: transparent; }
.intent-others-collapse { color: var(--subink); opacity: .7; }

html[data-theme="night"] .intent-other-card {
  background: #3A2A1F;
  border-color: #5A4328;
}
html[data-theme="night"] .intent-other-title { color: #FFF3DD; }
html[data-theme="night"] .intent-other-meta { color: #B9A995; }
html[data-theme="night"] .intent-other-prayer { color: #B9A995; }
html[data-theme="night"] .intent-other-prayer i { color: #E6B45A; }
html[data-theme="night"] .intent-other-prayer--empty i { color: #B9A995; }
html[data-theme="night"] .intent-other-btn {
  color: #F0C064;
  border-color: #5A4328;
  background: rgba(240,192,100,.06);
}
html[data-theme="night"] .intent-other-btn:hover { background: rgba(240,192,100,.12); }
html[data-theme="night"] .intent-others-collapse { color: #B9A995; }

/* [통계 개선] '이번 주 수행 횟수' 행 — 칩만 외롭게 떠 빈약하던 것을 미니 서브카드로 정돈.
   왼쪽 칩(수행 종류) / 오른쪽 큰 누적 숫자 + 하루 평균. */
.stat-countrow {
  background: rgba(255,255,255,.5);
  border: 1px solid var(--gold-line, #E7E2D9);
}
.stat-countrow-val { color: var(--gold-deep, #A07E2E); }
.stat-countrow-unit { color: var(--subink); }
.stat-countrow-avg { color: var(--subink); opacity: .8; margin-top: 1px; }

html[data-theme="night"] .stat-countrow {
  background: #3A2A1F;
  border-color: #5A4328;
}
html[data-theme="night"] .stat-countrow-val { color: #F0C064; }
html[data-theme="night"] .stat-countrow-unit { color: #B9A995; }
html[data-theme="night"] .stat-countrow-avg { color: #B9A995; }

/* 수월암 정진 흐름 막대 (정진흐름 스타일) */
.sam-flow { display:flex; align-items:flex-end; gap:6px; padding:6px 2px 2px; overflow-x:auto; }
.sam-flow-col { display:flex; flex-direction:column; align-items:center; gap:4px; flex:0 0 auto; min-width:26px; }
.sam-flow-bar { width:14px; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg, var(--gold-deep,#A07E2E), var(--gold,#C9A24B)); display:block; transition:height .4s ease; }
.sam-flow-lbl { font-size:9px; color:var(--subink); white-space:nowrap; }
html[data-theme="night"] .sam-flow-bar { background:linear-gradient(180deg, #F0C064, #D79A3A); box-shadow:0 0 8px rgba(240,192,100,.35); }
html[data-theme="night"] .sam-flow-lbl { color:#B9A995; }

/* 발원 통계 — 순위 칩 (이름 + 횟수 배지) */
.rank-chip { display:inline-flex; align-items:center; gap:0; padding:0; border-radius:999px; overflow:hidden; border:1px solid var(--gold-line,#E7E2D9); background:rgba(255,255,255,.55); line-height:1; }
.rank-chip .rank-name { padding:6px 10px; font-size:12.5px; font-weight:700; color:var(--ink); }
.rank-chip .rank-count { padding:6px 9px; font-size:11.5px; font-weight:800; font-family:'Noto Serif KR',serif; color:#fff; background:var(--gold-deep,#A07E2E); }
.rank-chip.rank-deity .rank-count { background:var(--teal-deep,#1F8A82); }
.rank-chip.rank-top { border-color:var(--gold,#C9A24B); box-shadow:0 1px 6px rgba(201,162,75,.18); }
.rank-chip .rank-crown { font-size:10px; color:#E0A93B; margin:0 0 0 8px; }
.rank-empty { font-size:13px; color:var(--subink); padding:4px 2px; }
html[data-theme="night"] .rank-chip { background:#3A2A1F; border-color:#5A4328; }
html[data-theme="night"] .rank-chip .rank-name { color:#FFF3DD; }
html[data-theme="night"] .rank-chip .rank-count { background:#D79A3A; color:#1E1618; }
html[data-theme="night"] .rank-chip.rank-deity .rank-count { background:#2FA39A; color:#0E1413; }
html[data-theme="night"] .rank-chip.rank-top { border-color:#F0C064; box-shadow:0 0 8px rgba(240,192,100,.22); }
html[data-theme="night"] .rank-chip .rank-crown { color:#F0C064; }
html[data-theme="night"] .rank-empty { color:#B9A995; }

/* ───────────────────────────────────────────────
   🏮 연등의 밤 — 온보딩 오버레이 가독성 (긴급)
   온보딩은 .bg-ivory(고정 밝은색) 배경 위에 text-subink/text-ink 등
   어두운 글자를 전제로 만들어졌는데, night 테마에서 subink/ink 가 밝은색이라
   "밝은 배경 + 밝은 글자"가 되어 보이지 않았다 → 온보딩 전체를 밤 톤으로 보정.
   ─────────────────────────────────────────────── */
html[data-theme="night"] .onboarding-overlay.bg-ivory {
  background: #1E1618 !important;
}
html[data-theme="night"] .onboarding-overlay {
  color: #FFF3DD;
}
/* 제목/본문 글자: 밤 배경 위에서 또렷하게 */
html[data-theme="night"] .onboarding-overlay h2 { color: #FFF3DD; }
html[data-theme="night"] .onboarding-overlay .text-subink { color: #C9BAA6; }
html[data-theme="night"] .onboarding-overlay .text-gold { color: #F0C064; }
html[data-theme="night"] .onboarding-overlay .text-golddeep { color: #E6B45A; }
html[data-theme="night"] .onboarding-overlay .text-line { color: #5A4328; }
/* 진행 점(상단 막대): 미완료 칸이 밤 배경에서 보이도록 */
html[data-theme="night"] .onboarding-overlay .bg-line { background: #45331F; }
html[data-theme="night"] .onboarding-overlay .bg-gold { background: #D79A3A; }
/* 인장(行/日/蓮): 밤 톤 카드 위에서 보이게 */
html[data-theme="night"] .onboarding-overlay .seal {
  background: #211F1C; color: #E6B45A; border-color: #5A4328;
}
/* 선택 카드(수행 항목): 밝은 카드 → 밤 카드 */
html[data-theme="night"] .onboarding-overlay .card {
  background: #2B201B; border-color: #5A4328; color: #FFF3DD;
}
html[data-theme="night"] .onboarding-overlay .card.border-gold { border-color: #F0C064; }
html[data-theme="night"] .onboarding-overlay .card b { color: #FFF3DD; }