@font-face {
  font-family: "Nanum Myeongjo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/nanum-myeongjo-400.ttf") format("truetype");
}
@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/cormorant-garamond-500.ttf") format("truetype");
}
@font-face {
  font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("/fonts/cormorant-garamond-500-italic.ttf") format("truetype");
}

:root {
  --bg: #f3efe6;
  --bg-2: #ece5d6;
  --surface: #fffdf8;
  --ink: #2c2a25;
  --muted: #807a6e;
  --line: #e2dac9;
  --accent: #2f5d4f;        /* 깊은 숲 초록 */
  --accent-2: #b08d57;      /* 묵직한 금빛 */
  --accent-soft: #edf1ed;
  --warn-bg: #fbf2e8;
  --warn-line: #e3c39f;
  --warn-ink: #8a4b1f;
  --serif: "Cormorant Garamond", "Nanum Myeongjo", "AppleMyungjo", "Batang", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", sans-serif;
  --verse-ink: #2d3b34;          /* 말씀 본문(깊은 초록 먹색) */
  --card: #ffffff;               /* 카드·버튼 면 */
  --glass: rgba(255,255,255,0.62);   /* 반투명 유리(옅음) */
  --glass2: rgba(255,255,255,0.74);  /* 반투명 유리(짙음) */
  --radius: 18px;
  --shadow: 0 18px 50px -28px rgba(47, 93, 79, 0.45);
}

/* 배경 분위기 전환용 — 등록된 커스텀 속성은 값이 '애니메이션' 가능해 색이 부드럽게 바뀜.
   body에서 transition을 걸면 이 값을 물려받는 .bg-aura·버튼 등도 함께 자연스럽게 전환됨. */
@property --bg      { syntax: "<color>"; inherits: true; initial-value: #f3efe6; }
@property --bg-2    { syntax: "<color>"; inherits: true; initial-value: #ece5d6; }
@property --aura-a  { syntax: "<color>"; inherits: true; initial-value: rgba(176,141,87,0.10); }
@property --aura-b  { syntax: "<color>"; inherits: true; initial-value: rgba(47,93,79,0.09); }
@property --accent  { syntax: "<color>"; inherits: true; initial-value: #2f5d4f; }
@property --accent-2{ syntax: "<color>"; inherits: true; initial-value: #b08d57; }

/* 현자별 분위기 (선택 시 body[data-guide]로 적용). 색감 + 은은한 빛(aura)이 그 현자에 맞게 전환. */
body[data-guide="christianity"] { --bg:#f7f0e2; --bg-2:#efe4cb; --aura-a:rgba(222,180,104,0.20); --aura-b:rgba(80,140,110,0.12); --accent:#2f5d4f; --accent-2:#b78a45; --accent-soft:#eef0e2; }
body[data-guide="buddha"]       { --bg:#f2f0e6; --bg-2:#e6ece4; --aura-a:rgba(214,150,66,0.18); --aura-b:rgba(70,158,150,0.14); --accent:#2f6f63; --accent-2:#c8923c; --accent-soft:#e6f0ec; }
body[data-guide="krishna"]      { --bg:#eeeaf0; --bg-2:#e3e1ee; --aura-a:rgba(86,104,196,0.18); --aura-b:rgba(206,166,82,0.14); --accent:#3b4aa0; --accent-2:#c2a14e; --accent-soft:#eae9f6; }
body[data-guide="laozi"]        { --bg:#eef1ee; --bg-2:#e2e8e4; --aura-a:rgba(120,150,140,0.16); --aura-b:rgba(96,128,128,0.12); --accent:#4c6b62; --accent-2:#8f9a8e; --accent-soft:#e9efea; }
body[data-guide="confucius"]    { --bg:#f3f1e5; --bg-2:#e9ead7; --aura-a:rgba(132,160,92,0.16); --aura-b:rgba(190,158,86,0.14); --accent:#5b6e3a; --accent-2:#b0894f; --accent-soft:#eef0e2; }
body[data-guide="marcus"]       { --bg:#edeef0; --bg-2:#e0e4e8; --aura-a:rgba(110,128,148,0.16); --aura-b:rgba(86,108,132,0.12); --accent:#46566a; --accent-2:#8a94a0; --accent-soft:#e9ecf0; }

* { box-sizing: border-box; }

html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.75;
  background:
    radial-gradient(1200px 600px at 50% -10%, #fbf8f1 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  /* 현자 전환 시 색감·빛이 부드럽게 (물려받는 자식 요소도 함께 전환됨) */
  transition: --bg 1.1s ease, --bg-2 1.1s ease, --aura-a 1.1s ease, --aura-b 1.1s ease, --accent 1.1s ease, --accent-2 1.1s ease;
}

/* 은은한 빛 번짐 */
.bg-aura {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px 380px at 80% 12%, var(--aura-a), transparent 70%),
    radial-gradient(620px 460px at 12% 78%, var(--aura-b), transparent 70%);
  animation: auraDrift 24s ease-in-out infinite; /* 느린 자연스러운 흐름 (시선 안정) */
}
@keyframes auraDrift {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.08) translateY(-1.4%); }
}
@media (prefers-reduced-motion: reduce) { .bg-aura { animation: none; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.hidden { display: none !important; }

/* ---------- 헤더 ---------- */
.site-header { max-width: 680px; margin: 0 auto; padding: 30px 22px 6px; text-align: center; }
.topbar { display: flex; align-items: center; gap: 8px; }
.mark { color: var(--accent-2); font-size: 1.1rem; opacity: 0.8; margin-right: auto; }
.lang-select {
  font-family: var(--sans); font-size: 0.85rem; color: var(--muted);
  background: var(--glass); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px; cursor: pointer; appearance: none;
}
.lang-select:hover { border-color: var(--accent-2); }

/* 계정/로그인 위젯 (M0) */
.auth-area { display: flex; align-items: center; gap: 8px; }
.auth-name { font-family: var(--sans); font-size: 0.82rem; color: var(--accent); max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-btn {
  font-family: var(--sans); font-size: 0.82rem; color: var(--muted);
  background: var(--glass); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px; cursor: pointer;
}
.auth-btn:hover { border-color: var(--accent-2); color: var(--accent); }
/* ── 비주얼 현자 카드 (안내자 선택을 '얼굴 있는 의식'으로 · 2026-07-03) ── */
.guide-cards {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: 10px; max-width: 620px; margin: 4px auto 0; padding: 0 12px;
}
.sage-card {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px;
  width: 90px; padding: 13px 4px 11px; border-radius: 16px;
  background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.14);
  cursor: pointer;
  transition: transform 0.28s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.sage-card:hover { transform: translateY(-3px); background: rgba(255,255,255,0.10); }
.sage-card.on {
  background: rgba(255,255,255,0.13);
  border-color: rgba(240,222,180,0.72);
  box-shadow: 0 0 22px rgba(240,222,180,0.20);
}
.sage-card.on .sage-glyph { box-shadow: 0 0 14px rgba(240,222,180,0.45); }
.sage-glyph {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.35rem; line-height: 1;
  color: #f7f3e8; border: 1px solid rgba(255,255,255,0.28);
  transition: box-shadow 0.3s ease;
}
.g-christianity { background: linear-gradient(150deg, #35604f 20%, #a8823f); }
.g-buddha       { background: linear-gradient(150deg, #2f6f63 20%, #b98a38); }
.g-krishna      { background: linear-gradient(150deg, #3b4aa0 20%, #b2934a); }
.g-laozi        { background: linear-gradient(150deg, #46655c 20%, #86938a); }
.g-confucius    { background: linear-gradient(150deg, #59692f 20%, #a5824c); }
.g-marcus       { background: linear-gradient(150deg, #414f63 20%, #8792a0); }
.sage-name { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.02em; color: rgba(247,243,232,0.92); text-align: center; line-height: 1.3; }
/* 현자 pill — 묵상 탭의 현재 현자 라벨로 사용(누르면 오늘 탭) */
.sage-current {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px 7px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(240,222,180,0.5);
  cursor: pointer; transition: background 0.25s ease;
}
.sage-current:hover { background: rgba(255,255,255,0.13); }
.sage-current .sage-glyph { width: 34px; height: 34px; font-size: 1.05rem; }
.sage-current .sage-name { font-size: 0.85rem; }
.sc-caret { color: rgba(247,243,232,0.65); font-size: 0.72rem; }
/* 말씀 카드 머리줄 — 현자 칩(좌) + 카드 제목(우). 묵상 탭과 같은 시각 언어 (2026-07-19) */
.daily-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.daily-head .reflect-guide { margin: 0; }
.daily-head .daily-eyebrow { margin: 0; }
.daily-veiled .daily-head { align-self: flex-start; }
/* 묵상 탭 라벨은 밝은 배경 위 — 색 보정 */
.reflect-guide { display: inline-flex; margin: 0 0 10px; background: var(--card); border-color: var(--line); }
.reflect-guide .sage-name { color: var(--ink); }
.reflect-guide:hover { background: var(--accent-soft); }

/* 말씀 받기 — 하루를 여는 조용한 초대 (누르기 전의 오늘 카드) */
.daily-veiled { display: flex; flex-direction: column; align-items: center; padding: 18px 18px 26px; }
.daily-reveal {
  background: none; border: 1px solid var(--accent-2); border-radius: 999px;
  color: var(--accent); font-family: var(--serif); font-size: 1.02rem; font-weight: 600;
  padding: 14px 30px; cursor: pointer;
  box-shadow: 0 0 18px rgba(212,170,90,0.18);
  transition: box-shadow 0.25s ease, background 0.25s ease;
  animation: reveal-breathe 3.2s ease-in-out infinite;
}
.daily-reveal:hover { background: var(--accent-soft); box-shadow: 0 0 26px rgba(212,170,90,0.4); }
@keyframes reveal-breathe {
  0%, 100% { box-shadow: 0 0 12px rgba(212,170,90,0.15); }
  50% { box-shadow: 0 0 26px rgba(212,170,90,0.38); }
}

/* ---------- 입장 의식(스플래시) ---------- */
.splash {
  position: fixed; inset: 0; z-index: 300; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 32%, #1c2440 0%, #0b0f1e 72%);
  opacity: 1; transition: opacity 0.75s ease;
}
.splash.out { opacity: 0; pointer-events: none; }
.splash canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.splash-inner { position: relative; text-align: center; animation: splash-in 1.2s ease both; padding: 0 24px; }
@keyframes splash-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
.splash-mark {
  margin: 0 0 12px; font-size: 3rem; line-height: 1; color: #e9cf98;
  animation: splash-glow 2.6s ease-in-out infinite;
}
@keyframes splash-glow {
  0%, 100% { text-shadow: 0 0 16px rgba(233,207,152,0.45); }
  50% { text-shadow: 0 0 44px rgba(233,207,152,0.95), 0 0 80px rgba(233,207,152,0.35); }
}
.splash-title {
  margin: 0; font-family: var(--serif); font-weight: 600;
  color: #f4edda; font-size: 1.75rem; letter-spacing: 0.34em; text-indent: 0.34em;
}
/* 글자가 하나씩 — 위에서 반짝이며 내려앉고, 닿는 순간 금빛 섬광 */
.sp-ch {
  display: inline-block; opacity: 0;
  animation: sp-ch-in 0.9s cubic-bezier(0.2, 0.7, 0.3, 1.1) both;
}
@keyframes sp-ch-in {
  0%   { opacity: 0; transform: translateY(-26px) scale(1.6); filter: blur(6px); text-shadow: 0 0 24px rgba(233,207,152,0); }
  55%  { opacity: 1; transform: translateY(2px) scale(1.02); filter: blur(0);
         text-shadow: 0 0 26px rgba(233,207,152,0.95), 0 0 60px rgba(233,207,152,0.5); color: #ffe9b8; }
  100% { opacity: 1; transform: none; filter: none; text-shadow: 0 0 8px rgba(233,207,152,0.25); color: #f4edda; }
}
.splash-line {
  margin: 14px 0 0; font-family: var(--serif); color: rgba(240,232,210,0.72); font-size: 0.92rem;
  opacity: 0; animation: sp-line-in 1s ease 1.7s both; /* 글자들이 자리 잡은 뒤 등장 */
}
@keyframes sp-line-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .splash-inner, .splash-mark, .daily-reveal, .sp-ch, .splash-line { animation: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sage-card, .sage-card:hover { transition: none; transform: none; }
}
/* 카드가 주 UI — 드롭다운은 같은 상태를 공유하는 숨은 원본 */
.guide-select { display: none; }

/* 회원탈퇴 — 푸터 법적 링크 줄에만(로그인 시), 확인 대기(armed) 상태에선 경고 톤 */
.footer-del {
  background: none; border: none; padding: 0; margin-left: 4px;
  font: inherit; font-size: inherit; color: var(--muted); opacity: 0.75;
  text-decoration: underline; cursor: pointer;
}
.footer-del::before { content: "· "; text-decoration: none; display: inline-block; margin-right: 4px; }
.footer-del:hover { color: var(--accent); opacity: 1; }
.footer-del.armed { color: #a4453b; opacity: 1; font-weight: 600; }

/* 스트리밍 중인 묵상 — 끝에 은은히 깜빡이는 붓끝 */
.med-streaming::after {
  content: "✎"; display: inline-block; margin-left: 4px;
  color: var(--accent-2); animation: medCaret 1.1s ease-in-out infinite;
}
@keyframes medCaret { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) { .med-streaming::after { animation: none; } }

/* 컴포저 헤더 — 입력창에 '말 거는' 한 줄 (첫 사용자 이해도) */
.composer-lead {
  margin: 0 4px 10px; font-family: var(--serif); font-size: 0.98rem;
  color: var(--accent); line-height: 1.6;
}
/* FAB로 도착했을 때 입력창이 살짝 빛나며 시선을 붙듦 */
.composer.glow { animation: composerGlow 2.2s ease-out; border-radius: 20px; }
@keyframes composerGlow {
  0% { box-shadow: 0 0 0 rgba(216,189,134,0); }
  25% { box-shadow: 0 0 0 4px rgba(216,189,134,0.45), 0 0 34px rgba(216,189,134,0.35); }
  100% { box-shadow: 0 0 0 rgba(216,189,134,0); }
}
@media (prefers-reduced-motion: reduce) { .composer.glow { animation: none; } }

/* 묵상 쓰기 FAB — 모바일에서 하단 바 위에 떠 있는 주 행동 버튼 (트위터 글쓰기 문법) */
.compose-fab {
  display: none; /* 데스크톱: 컴포저가 바로 보이므로 숨김 */
  position: fixed; right: 16px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 59;
  width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(240,222,180,0.55);
  background: linear-gradient(150deg, var(--accent) 30%, #b78a45);
  color: #f7f3e8; cursor: pointer;
  box-shadow: 0 6px 22px rgba(30,50,40,0.35), 0 0 16px rgba(216,189,134,0.25);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.compose-fab svg { width: 25px; height: 25px; display: block; margin: 0 auto; }
.compose-fab:active { transform: scale(0.94); }
@media (max-width: 640px) { .compose-fab { display: block; } }

/* 존재의 공감 — 헤더 하단의 은은한 한 줄 */
.presence-line {
  margin: 10px auto 0; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 0.82rem;
  color: rgba(231,223,202,0.78); text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ── 별 교환 (M3 공감) ── */
.star-send { margin-top: 14px; text-align: center; }
.star-send > button {
  font-family: var(--sans); font-size: 0.88rem; color: var(--accent);
  background: var(--glass); border: 1px dashed var(--accent-2);
  border-radius: 999px; padding: 9px 18px; cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.star-send > button:hover { background: var(--card); box-shadow: 0 0 14px rgba(200,170,100,0.25); }
.star-send > button:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
.star-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.sp-lead { width: 100%; margin: 0 0 2px; font-size: 0.84rem; color: var(--muted); }
.sp-chip {
  border: 1px solid var(--line); background: var(--glass2);
  border-radius: 999px; padding: 8px 15px; cursor: pointer;
  font-family: var(--sans); font-size: 0.85rem; color: var(--ink);
}
.sp-chip:hover { border-color: var(--accent-2); color: var(--accent); }
.sp-chip:disabled { opacity: 0.5; cursor: default; }

.star-banner {
  position: relative; max-width: 640px; margin: 16px auto 0; padding: 15px 42px 15px 20px;
  border-radius: 16px; border: 1px solid rgba(200,170,100,0.42);
  background: linear-gradient(150deg, rgba(240,222,180,0.30), rgba(255,255,255,0.78));
  box-shadow: 0 4px 22px rgba(180,150,80,0.10);
}
.sb-head { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--accent); }
.sb-msg { margin: 7px 0 0; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink); }
.sb-reply {
  margin-top: 11px; font-family: var(--sans); font-size: 0.84rem; color: var(--accent);
  background: var(--glass2); border: 1px solid var(--accent-2);
  border-radius: 999px; padding: 7px 15px; cursor: pointer;
}
.sb-reply:hover { background: var(--card); }
.sb-reply:disabled { opacity: 0.5; cursor: default; }
.sb-close { position: absolute; top: 9px; right: 11px; background: none; border: none; color: var(--muted); font-size: 0.95rem; cursor: pointer; }

/* ── 별빛 광장 ── */
.plaza { max-width: 640px; margin: 0 auto; padding: 0 16px 24px; }
.pz-tabs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pz-lang { margin-left: auto; } /* 🌐 언어 토글 — 탭 줄 오른끝 */
.pz-tab {
  border: 1px solid var(--line); background: none; border-radius: 999px;
  padding: 5px 14px; font-size: 0.8rem; color: var(--muted); cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.pz-tab:hover { border-color: var(--accent-2); color: var(--accent-2); }
.pz-tab.active { border-color: var(--accent-2); color: var(--accent-2); background: var(--accent-soft, #eef0e2); font-weight: 600; }
.plaza-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.pz-card {
  background: var(--glass2); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px 18px 12px;
  box-shadow: 0 3px 16px rgba(90,80,50,0.06);
}
.pz-head { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 0.8rem; color: var(--muted); }
.pz-glyph {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-family: var(--serif); font-size: 0.82rem;
  color: #f7f3e8; border: 1px solid rgba(255,255,255,0.3);
}
.pz-alias { font-family: var(--serif); color: var(--accent-2); font-weight: 600; }
.pz-date { margin-left: auto; font-size: 0.74rem; }
.pz-verse { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.02rem; line-height: 1.8; color: var(--ink); }
.pz-ref { margin: 3px 0 8px; font-size: 0.78rem; color: var(--muted); }
.pz-med { margin: 0; font-size: 0.92rem; line-height: 1.85; color: var(--ink); white-space: pre-wrap; }
.pz-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.pz-sp { flex: 1; }
/* 별(✦) 리액션 — 평소엔 은은한 윤곽선, 누르면 금빛으로 켜지며 반짝 */
.pz-react {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); background: var(--glass2); border-radius: 999px;
  padding: 5px 12px; cursor: pointer; font-size: 0.8rem; color: var(--muted);
  transition: border-color 0.2s, color 0.2s, transform 0.15s;
}
.pz-react svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round;
  transition: fill 0.25s, stroke 0.25s;
}
.pz-react span:empty { display: none; }
.pz-react:hover { border-color: var(--accent-2); color: var(--accent-2); }
.pz-react.on { border-color: var(--accent-2); color: var(--accent-2); background: var(--accent-soft, #eef0e2); }
.pz-react.on svg { fill: var(--accent-2); stroke: var(--accent-2); filter: drop-shadow(0 0 3px rgba(212,170,90,0.55)); }
.pz-react:active { transform: scale(1.12); }
/* 받은 별 수에 따라 점점 빛남 — 빛무리(glow) = 사랑받은 정도, 속이 참(fill) = 내가 누름.
   단계 기준(3/10/30)은 app.js starTier와 한 몸. ⚠️초기 규모 기준 — 커지면 상향 조정 */
.pz-react.t2 svg { stroke: var(--accent-2); filter: drop-shadow(0 0 3px rgba(224,180,90,0.55)); }
.pz-react.t3 svg { stroke: var(--accent-2); filter: drop-shadow(0 0 6px rgba(224,180,90,0.8)); }
.pz-react.t4 svg { width: 17px; height: 17px; stroke: var(--accent-2); filter: drop-shadow(0 0 10px rgba(232,192,104,0.95)); }
.pz-react.lit svg { animation: pz-star-lit 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.35); }
@keyframes pz-star-lit {
  0%   { transform: scale(0.3) rotate(-35deg); }
  55%  { transform: scale(1.55) rotate(10deg); filter: drop-shadow(0 0 9px rgba(235,195,105,0.95)); }
  100% { transform: scale(1) rotate(0deg); }
}
.pz-report, .pz-retract {
  background: none; border: none; color: var(--muted); opacity: 0.6;
  font-size: 0.8rem; cursor: pointer; padding: 4px 6px;
}
.pz-report:hover, .pz-retract:hover { opacity: 1; color: var(--accent); }
.pz-report.armed, .pz-retract.armed { opacity: 1; color: #a4453b; font-size: 0.74rem; max-width: 15rem; text-align: right; }
.plaza-more { display: block; margin: 16px auto 0; }
.ji-plaza {
  background: var(--card); color: var(--accent); border: 1px dashed var(--accent-2);
  border-radius: 999px; padding: 6px 13px; margin-left: 8px; margin-top: 6px;
  font-family: var(--sans); font-size: 0.8rem; cursor: pointer;
}
.ji-plaza.armed { border-style: solid; color: #7a5c22; background: #fdf6e5; white-space: normal; line-height: 1.4; }
.ji-plaza:disabled { opacity: 0.6; cursor: default; }

/* ⓘ 정보 버튼(상단) + 정보 시트 */
.info-btn { padding: 6px 10px; font-size: 0.9rem; line-height: 1; opacity: 0.85; }
.info-card { text-align: center; }
.info-vision { font-family: var(--serif); font-style: italic; color: var(--ink); opacity: 0.9; line-height: 1.9; margin: 10px 0 14px; }
.info-links { margin-top: 16px; font-size: 0.85rem; }
.info-links a { color: var(--accent); }
.login-card { text-align: center; }
.login-btn {
  display: block; width: 100%; box-sizing: border-box;
  margin: 10px 0 0; padding: 13px 16px; border-radius: 12px;
  font-family: var(--sans); font-size: 0.98rem; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
.login-kakao { background: #fee500; color: #181600; }
.login-kakao:hover { filter: brightness(0.97); }
.login-google { background: #ffffff; /*브랜드 고정*/ color: #2b2b2b; border-color: var(--line); }
.login-google:hover { border-color: var(--accent-2); }
/* 동의 전 로그인 버튼 비활성(M6) — 체크 2개 완료 시 해제 */
/* 민감정보 동의 체크(로그인 모달·기존 가입자 시트 공용) */
.consent-box { margin: 14px 0 4px; text-align: left; }
.consent-item {
  display: flex; align-items: flex-start; gap: 8px;
  font-family: var(--sans); font-size: 0.82rem; line-height: 1.55;
  color: var(--muted); margin: 8px 0; cursor: pointer;
}
.consent-item input { margin-top: 3px; accent-color: var(--accent-2); flex: none; }
.consent-item a { color: var(--accent); }
.consent-agree { background: var(--accent-soft, rgba(240,222,180,0.18)); color: var(--accent); border-color: var(--accent-2); }
.consent-agree:disabled { opacity: 0.45; cursor: not-allowed; }
.consent-later { margin-top: 10px; }

.site-header h1 {
  font-family: var(--serif);
  font-size: 2.5rem; font-weight: 500; letter-spacing: 0.01em;
  margin: 18px 0 6px; color: var(--accent);
}
.guide-row { margin: 2px 0 10px; }
.guide-select {
  font-family: var(--serif); font-size: 1.05rem; color: var(--accent);
  background: var(--glass2); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 18px; cursor: pointer; appearance: none;
  text-align: center; text-align-last: center;
}
.guide-select:hover { border-color: var(--accent-2); }
.intro { color: var(--muted); margin: 0 auto; max-width: 30em; }

/* ---------- 밤하늘 히어로 (마음 우주 배경) — sky-on일 때만 ---------- */
.site-header { position: relative; }
.sky-bg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; z-index: 0; display: none; }
body.sky-on { overflow-x: hidden; }
body.sky-on .sky-bg { display: block; }
body.sky-on .site-header { padding-bottom: 54px; }
/* 상단 바를 화면 양끝까지 펼침 → 좌(✦상태)·우(언어/로그인) 코너 대칭 */
body.sky-on .topbar { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); padding: 0 24px; box-sizing: border-box; }
/* 하단을 양피지로 부드럽게 페이드(현재 배경색 var(--bg)로) */
body.sky-on .site-header::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 100vw; height: 120px; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(20,26,51,0), var(--bg));
}
/* 히어로 콘텐츠를 하늘 위로(로그인 오버레이는 제외) */
body.sky-on .topbar, body.sky-on #appTitle, body.sky-on .guide-row,
body.sky-on #guidePanel, body.sky-on #recommendWrap, body.sky-on .intro { position: relative; z-index: 1; }
/* 밝은 톤(밤하늘 위 가독성) */
body.sky-on #appTitle { color: #f5edd6; text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 2px 24px rgba(0,0,0,0.5); }
body.sky-on .intro { color: #ece4cc; text-shadow: 0 1px 8px rgba(0,0,0,0.55); }
body.sky-on .mark { color: rgba(243,234,208,0.75); }
body.sky-on .lang-select, body.sky-on .auth-btn, body.sky-on .guide-select, body.sky-on .recommend-toggle {
  background: rgba(14,19,38,0.5); color: #f3ead0; border-color: rgba(243,234,208,0.4);
}
body.sky-on .auth-name { color: #f3ead0; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
/* 온기 단계 배지 — 당근 '아이디 옆 온도' 느낌(작고 은은한 금빛) */
.warmth-badge { font-family: var(--serif); font-size: 0.78rem; color: var(--accent-2); white-space: nowrap; }
.warmth-badge:empty { display: none; }
body.sky-on .warmth-badge { color: #e6c879; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.warmth-badge.pulse { animation: skyCapPulse 1.6s ease-out; display: inline-block; }
/* 위젯(2026-07-19 박철순 확정 B안): 이름 + "✦ 단계 · N일째" + 6칸 단계 게이지.
   우상단 컨트롤(언어·로그아웃)과 같은 높이의 좌상단 — 앱바처럼 좌우 균형.
   게이지는 채운 칸일수록 금빛이 진해짐(여정의 깊어짐). 도트형은 페이지 넘김으로 오독되어 폐기. */
.sky-caption { position: absolute; top: 76px; left: calc(50% - 50vw + 24px); z-index: 1; display: flex; flex-direction: column; gap: 1px; align-items: flex-start; text-align: left; max-width: 46vw; } /* top은 좌상단 ❁ 워드마크(하단 ~64px) 아래로 */
.sky-name { font-family: var(--serif); font-size: 0.98rem; font-weight: 500; color: #f3ead0; text-shadow: 0 1px 5px rgba(0,0,0,0.6); margin-bottom: 1px; }
.sky-name:empty { display: none; }
.sky-stage { font-family: var(--serif); font-size: 0.94rem; font-weight: 600; color: #e6c879; letter-spacing: 0.06em; text-shadow: 0 1px 4px rgba(0,0,0,0.65); }
.sky-segs { display: flex; gap: 3px; margin-top: 4px; }
.sky-segs[hidden] { display: none; }
.sky-segs .seg { width: 12px; height: 3px; border-radius: 2px; background: rgba(243,234,208,0.22); }
/* 채운 칸의 금빛 램프 — 뒤 칸일수록 진하고 밝게 */
.sky-segs .seg.on:nth-child(1) { background: #c9a45f; }
.sky-segs .seg.on:nth-child(2) { background: #d3ae63; }
.sky-segs .seg.on:nth-child(3) { background: #ddb867; }
.sky-segs .seg.on:nth-child(4) { background: #e6c26b; }
.sky-segs .seg.on:nth-child(5) { background: #f0cd70; }
.sky-segs .seg.on:nth-child(6) { background: #fad875; }
.sky-segs .seg.now { box-shadow: 0 0 7px rgba(230,200,121,0.95); }
/* 색 적응(2026-07-19 박철순): 줄이 어두운 하늘을 벗어나면(전환 안개 구간 포함) app.js가 .on-light를 붙임
   → 어두운 먹색·브론즈 + 옅은 밝은 halo — 안개 구간의 중간톤 배경에서도 또렷함
   (게이지는 하늘 깊숙이 있어 제외 — 평시 미발동 안전망은 글줄에만) */
.sky-name.on-light { color: #46412f; text-shadow: 0 1px 6px rgba(255,252,240,0.7); }
.sky-stage.on-light { color: #6d5416; text-shadow: 0 1px 6px rgba(255,252,240,0.7); }
/* 다크 테마에선 하늘 밖도 어두운 배경 → 원래의 밝은 글자 유지 */
html[data-theme="dark"] .sky-name.on-light { color: #f3ead0; text-shadow: 0 1px 5px rgba(0,0,0,0.6); }
html[data-theme="dark"] .sky-stage.on-light { color: #e6c879; text-shadow: 0 1px 4px rgba(0,0,0,0.65); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .sky-name.on-light { color: #f3ead0; text-shadow: 0 1px 5px rgba(0,0,0,0.6); }
  html:not([data-theme="light"]) .sky-stage.on-light { color: #e6c879; text-shadow: 0 1px 4px rgba(0,0,0,0.65); }
}
/* 비로그인 문구는 곧 로그인 초대 — 눌러서 바로 로그인 (app.js가 .tappable 부여) */
.sky-caption.tappable { cursor: pointer; }
.sky-caption.tappable:hover .sky-stage { text-shadow: 0 0 10px rgba(230,200,121,0.6); }
/* 모바일: 좌상단 플로팅이 언어/로그인·오늘/일기 버튼과 겹침 → 내비 아래 중앙의 제 흐름으로.
   ⚠️static이면 z-index가 무효라 밤하늘 캔버스(absolute)가 글자를 덮음 → relative로 흐름 유지+z-index 활성 */
@media (max-width: 640px) {
  .sky-caption {
    position: relative; top: 0; left: 0; margin: 12px auto 0; max-width: 88vw;
    align-items: center; text-align: center;
  }
}
.sky-caption.pulse { animation: skyCapPulse 1.9s ease-out; }
@keyframes skyCapPulse { 0% { opacity: 0.3; transform: translateY(6px); } 30% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .sky-caption.pulse { animation: none; } }

main { max-width: 680px; margin: 0 auto; padding: 22px 22px 40px; }

/* ---------- 입력 ---------- */
.composer {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
}
textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  padding: 15px; font-family: var(--sans); font-size: 1rem; line-height: 1.7;
  resize: vertical; background: var(--card); color: var(--ink); min-height: 130px;
}
textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.composer-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.char-count { color: var(--muted); font-size: 0.8rem; }

button { font-family: var(--sans); font: inherit; cursor: pointer; border: 0; }
button.primary {
  background: var(--accent); color: #fdfbf4; border-radius: 999px;
  padding: 12px 26px; font-weight: 600; letter-spacing: 0.01em;
  transition: transform 0.08s ease, filter 0.15s ease;
}
button.primary:hover { filter: brightness(1.08); }
button.primary:active { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: default; }
button.ghost { background: transparent; color: var(--muted); padding: 6px 10px; }
button.ghost:hover { color: var(--accent); }

/* ---------- 결과 ---------- */
.result {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 28px; margin-top: 22px;
  box-shadow: var(--shadow);
  animation: rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.block-label {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-2); font-weight: 700; margin: 0 0 10px;
}
.med-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.meditation {
  font-family: var(--serif); font-size: 1.42rem; line-height: 1.75;
  white-space: pre-wrap; margin: 0 0 26px; color: var(--ink); letter-spacing: 0.01em; /* 하드코딩 #322f28 → 테마변수(다크모드에서 안 보이던 버그) */
}

.verse {
  position: relative; background: var(--accent-soft);
  border-left: 3px solid var(--accent-2); border-radius: 6px 12px 12px 6px;
  padding: 18px 20px; margin: 0 0 26px;
}
.verse .verse-text { font-family: var(--serif); font-size: 1.18rem; font-style: italic; margin: 0 0 8px; color: var(--verse-ink); }
.verse .verse-ref { color: var(--muted); font-size: 0.9rem; margin: 0; }
.practice { margin: 0 0 22px; }

.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); margin: 8px 0 18px; }

/* 마음날씨 + 별점 (저장 전 선택) */
.mood-panel { margin: 2px 0 18px; }
.mood-prompt { color: var(--muted); font-size: 0.85rem; margin: 0 0 8px; }
.mood-prompt.rate-prompt { margin-top: 14px; }
.mood-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mood-btn {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  width: 46px; height: 46px; font-size: 1.35rem; line-height: 1; cursor: pointer;
  transition: border-color 0.15s, transform 0.1s, background 0.15s;
}
.mood-btn:hover { border-color: var(--accent-2); }
.mood-btn.sel { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
/* '마음에 담기' 토글 (별점 대신 — 위로를 점수화하지 않음) */
.keep-btn {
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 18px; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--muted);
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.keep-btn:hover { border-color: var(--accent-2); }
.keep-btn .keep-heart { font-size: 1.1rem; line-height: 1; color: var(--accent-2); }
.keep-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.result-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.result-actions button {
  background: var(--card); color: var(--accent); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 18px; font-weight: 600; transition: border-color 0.15s;
}
.result-actions button:hover { border-color: var(--accent); }
/* 액션 정리(2026-07-21): 주 동선=저장 하나만 크게, 숨고르기·별보내기는 ⋯ 뒤로 */
.result-actions .ra-primary { background: var(--accent); color: #fff; border-color: var(--accent); flex: 1 1 auto; }
.result-actions .ra-primary:hover { filter: brightness(1.06); }
.result-actions #moreBtn { padding: 9px 14px; letter-spacing: 1px; }
.result-actions #moreBtn.on { background: var(--accent-soft); border-color: var(--accent); }
.more-actions { margin-top: 10px; animation: rise 0.25s ease both; }
.new-reflect-row { margin-top: 14px; text-align: center; }
.new-reflect {
  background: none; color: var(--muted); border: 1px dashed var(--line);
  border-radius: 999px; padding: 8px 20px; font-size: 0.88rem; font-weight: 600;
}
.new-reflect:hover { color: var(--accent); border-color: var(--accent); }
/* 저장 배너 속 '광장에 놓아두기' — 저장 직후가 나누고 싶은 순간 */
.sb-plaza {
  display: block; margin: 8px auto 0; background: none; color: var(--accent);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px;
  font-size: 0.85rem; font-weight: 600;
}
.sb-plaza:hover { border-color: var(--accent); }
.sb-plaza.armed { border-color: var(--accent); background: var(--accent-soft); font-size: 0.8rem; }
.sb-plaza:disabled { opacity: 0.65; }

/* 되물음 — 묵상 아래 조용한 한 줄 (묵상당 1회) */
.fu-area { margin-top: 14px; }
.fu-open {
  background: none; border: none; padding: 4px 0;
  color: var(--accent); font-size: 0.88rem; font-weight: 600;
}
.fu-open:hover { text-decoration: underline; }
.fu-box { margin-top: 8px; }
.fu-box .fu-input { margin-bottom: 8px; }
.fu-send {
  background: var(--card); color: var(--accent); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 18px; font-size: 0.88rem; font-weight: 600;
}
.fu-send:hover { border-color: var(--accent); }
.fu-q { color: var(--muted); font-size: 0.88rem; margin: 6px 0 6px; }
.fu-q::before { content: "💬 "; }
.fu-reply {
  border-left: 3px solid var(--accent-soft); padding-left: 12px;
  line-height: 1.75; white-space: pre-wrap;
}

/* 듣기 버튼 (묵상 옆) */
.listen-btn {
  background: var(--card); color: var(--accent); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px; font-size: 0.85rem; font-weight: 600;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.listen-btn:hover { border-color: var(--accent-2); }
.listen-btn.playing { background: var(--accent); color: #fff; border-color: var(--accent); }

.disclaimer { color: var(--muted); font-size: 0.82rem; text-align: center; }
.result .disclaimer { text-align: left; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- 위기 안내 ---------- */
.crisis { background: var(--warn-bg); border: 1px solid var(--warn-line); }
.crisis h2 { font-family: var(--serif); font-size: 1.5rem; margin: 0 0 10px; color: var(--warn-ink); }
.crisis .lines { list-style: none; padding: 0; margin: 16px 0; }
.crisis .lines li { padding: 10px 0; border-top: 1px dashed var(--warn-line); }
.crisis .num { font-weight: 700; font-size: 1.2rem; color: var(--warn-ink); }
.crisis .extra { color: var(--muted); font-size: 0.88rem; }

/* ---------- 마음 우주 (내 마음 하늘) ---------- */
.my-sky { margin: 38px 0 8px; text-align: center; }
.my-sky-title { font-family: var(--serif); font-size: 1.32rem; font-weight: 500; color: var(--accent); margin: 0 0 12px; }
.my-sky-canvas { width: 100%; height: 220px; border-radius: 18px; display: block; box-shadow: var(--shadow); }
.my-sky-stage { font-family: var(--serif); font-size: 1.16rem; color: var(--accent-2); margin: 14px 0 4px; }
.my-sky-line { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* ---------- 일기 ---------- */
.journal { margin-top: 42px; }
.journal-head { display: flex; align-items: center; justify-content: space-between; }
.journal-head h2 { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; margin: 0; color: var(--accent); }
.journal-note { color: var(--muted); font-size: 0.8rem; margin: 4px 0 14px; }
.journal-list { list-style: none; padding: 0; margin: 0; }
.journal-item { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; }
.journal-item .ji-date { color: var(--accent-2); font-size: 0.76rem; letter-spacing: 0.05em; }
.journal-item .ji-mood { margin-left: 8px; font-size: 0.95rem; vertical-align: middle; }
.journal-item .ji-keep { margin-left: 6px; font-size: 0.85rem; color: var(--accent-2); vertical-align: middle; }
.journal-item .ji-text { font-family: var(--serif); font-size: 1.08rem; margin: 6px 0 4px; }
.journal-empty { color: var(--muted); }

/* 마음날씨 달력 */
.mood-cal { margin: 4px 0 18px; }
.cal-head { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 10px; }
.cal-title { font-family: var(--serif); font-size: 1.1rem; color: var(--accent); min-width: 9em; text-align: center; }
.cal-nav {
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  width: 30px; height: 30px; color: var(--accent); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.cal-nav:hover { border-color: var(--accent); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { margin-bottom: 4px; }
.cal-wdname { text-align: center; font-size: 0.72rem; color: var(--muted); padding: 2px 0; }
.cal-cell {
  aspect-ratio: 1 / 1; border: 1px solid transparent; border-radius: 10px; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0;
}
.cal-cell.empty { border: none; }
.cal-cell .cal-day { font-size: 0.7rem; color: var(--muted); }
.cal-cell .cal-mood { font-size: 1rem; line-height: 1; min-height: 1em; }
.cal-cell.has { background: var(--surface); border-color: var(--line); cursor: pointer; transition: border-color 0.15s, transform 0.1s; }
.cal-cell.has:hover { border-color: var(--accent-2); transform: translateY(-1px); }
.cal-cell.today .cal-day { color: var(--accent); font-weight: 700; }
.cal-cell.sel { border-color: var(--accent); background: var(--accent-soft); }

/* 일기 도구 (검색 · 회상 · 필터해제) */
.journal-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.journal-search {
  flex: 1 1 180px; min-width: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 0.9rem; color: var(--ink);
}
.journal-search:focus { outline: none; border-color: var(--accent); }
.recall-btn, .filter-clear, .insight-btn { font-size: 0.85rem; white-space: nowrap; }
.recall-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.insight-btn { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; color: var(--accent); }
.insight-btn:hover { border-color: var(--accent); }

/* AI 패턴 비추기 패널 */
.insight-box {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px; margin: 4px 0 16px; box-shadow: var(--shadow);
}
.insight-box .ins-label { color: var(--accent-2); font-size: 0.74rem; letter-spacing: 0.06em; margin: 12px 0 4px; }
.insight-box .ins-label:first-of-type { margin-top: 0; }
.insight-box .ins-text { font-family: var(--serif); font-size: 1.06rem; line-height: 1.7; margin: 0; }
.insight-box .ins-foot { color: var(--muted); font-size: 0.76rem; margin: 14px 0 0; text-align: right; }
.insight-box .ins-loading { color: var(--muted); margin: 0; text-align: center; }
.insight-close {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  color: var(--muted); font-size: 1rem; cursor: pointer; padding: 4px;
}
.insight-close:hover { color: var(--accent); }

.site-footer { max-width: 680px; margin: 0 auto; padding: 8px 22px 52px; }

.loading { color: var(--muted); text-align: center; padding: 14px 0; font-family: var(--serif); font-style: italic; font-size: 1.1rem; }
.error { color: #a23; }

@media (max-width: 560px) {
  .site-header h1 { font-size: 2.05rem; }
  .meditation { font-size: 1.28rem; }
  .result { padding: 24px 20px; }
}

/* ---------- 평안 호흡 시각화 (코히런트 호흡 5-5, 분당 6회) ---------- */
/* 근거: 차가운 색(파랑·초록)=심박·혈압↓, 자연감 그라데이션=스트레스 완화(ART/SRT),
   확장·수축 원(breathing orb)=호흡 페이스 유지에 효과적, 느린 동작=인지부하↓ */
.breathe-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 78px 0 28px; overflow-y: auto;
  /* 기본(중립) 몽환 팔레트 — 현자 선택 시 body[data-guide]로 덮어씀 */
  --br-c: 196, 238, 228;            /* 빛무리·링·강조 색(rgb) */
  --br-sky1: #0e2030; --br-sky2: #14303d; --br-sky3: #1b3a44;
  --br-radial: rgba(64,110,128,0.35);
  background:
    radial-gradient(900px 700px at 50% 30%, var(--br-radial), transparent 70%),
    linear-gradient(165deg, var(--br-sky1) 0%, var(--br-sky2) 50%, var(--br-sky3) 100%);
  color: #eaf3ef; animation: fadeIn 0.6s ease both;
}
/* 현자별 호흡 분위기 (어두운 몽환 버전 — 본 화면 테마와 결을 맞춤) */
body[data-guide="christianity"] .breathe-overlay { --br-c: 226,202,150; --br-sky1:#0c2620; --br-sky2:#143a2e; --br-sky3:#1d4a38; --br-radial: rgba(150,170,110,0.30); }
body[data-guide="buddha"] .breathe-overlay       { --br-c: 224,196,140; --br-sky1:#0c2630; --br-sky2:#143a3a; --br-sky3:#1b4a44; --br-radial: rgba(150,200,190,0.30); }
body[data-guide="krishna"] .breathe-overlay      { --br-c: 222,200,150; --br-sky1:#10153a; --br-sky2:#1a2150; --br-sky3:#232a5e; --br-radial: rgba(140,150,220,0.30); }
body[data-guide="laozi"] .breathe-overlay        { --br-c: 178,210,196; --br-sky1:#14201d; --br-sky2:#20302b; --br-sky3:#2a3d36; --br-radial: rgba(160,190,175,0.26); }
body[data-guide="confucius"] .breathe-overlay    { --br-c: 200,212,150; --br-sky1:#16210f; --br-sky2:#24321a; --br-sky3:#2e3d22; --br-radial: rgba(180,195,120,0.26); }
body[data-guide="marcus"] .breathe-overlay       { --br-c: 180,200,220; --br-sky1:#111e2a; --br-sky2:#1b2c3a; --br-sky3:#243648; --br-radial: rgba(150,175,205,0.30); }
/* 상단 바 — 플렉스 배치(겹침 원천 차단). 좌 [소리·목소리] · 우 [닫기] */
.breathe-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
.bt-left { display: flex; gap: 10px; }
.breathe-iconbtn {
  width: 42px; height: 42px; border: none; border-radius: 999px;
  background: rgba(255,255,255,0.10); color: #eaf3ef; font-size: 1.05rem;
  transition: background 0.18s, opacity 0.3s;
}
.breathe-iconbtn:hover { background: rgba(255,255,255,0.22); }
.breathe-iconbtn.off { opacity: 0.55; }
/* 세션 중에는 상단 바가 은은하게 물러남 (Headspace/Calm — 세션 화면 미니멀 원칙) */
.breathe-overlay:not(.prep) .breathe-top { opacity: 0.72; }
/* 준비 화면 낭독 토글 (라벨형) */
.breathe-narrate {
  background: rgba(255,255,255,0.08); color: #d9ece6;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 999px;
  padding: 9px 18px; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: background 0.18s, border-color 0.18s, opacity 0.18s;
}
.breathe-narrate:hover { background: rgba(255,255,255,0.16); }
.breathe-narrate.on { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.4); }
.breathe-narrate:not(.on) { opacity: 0.72; }

/* 호흡법 선택 (5·5 / 4·4·4·4 / 4·7·8) — 준비 화면 안의 칩 (세션 중엔 결정 요소 없음) */
.breathe-techs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tech-btn {
  background: rgba(255,255,255,0.08); color: #d9ece6; border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px; padding: 7px 14px; font-size: 0.85rem; letter-spacing: 0.04em;
  transition: background 0.18s, border-color 0.18s;
}
.tech-btn:hover { background: rgba(255,255,255,0.16); }
.tech-btn.active { background: rgba(var(--br-c), 0.92); color: #15302b; border-color: transparent; font-weight: 600; }

/* 세션 길이 선택 (준비 화면) */
.breathe-durations { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.dur-btn {
  background: rgba(255,255,255,0.08); color: #d9ece6; border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px; padding: 8px 16px; font-size: 0.9rem; transition: background 0.18s, border-color 0.18s;
}
.dur-btn:hover { border-color: rgba(var(--br-c), 0.7); }
.dur-btn.active { background: rgba(var(--br-c), 0.92); color: #15302b; border-color: transparent; font-weight: 600; }
.breathe-tech-desc {
  margin: -8px 0 0; max-width: 22em; text-align: center; white-space: normal;
  font-size: 0.82rem; color: rgba(234,243,239,0.7); letter-spacing: 0.02em; min-height: 2.4em;
}

/* 준비 안내 화면 (시작 전). 진행 중에는 숨고 stage가 보임 */
.breathe-prep { display: none; flex-direction: column; align-items: center; gap: 18px; max-width: 24em; padding: 0 26px; text-align: center; }
.breathe-overlay.prep .breathe-prep { display: flex; }
.breathe-overlay.prep .breathe-stage,
.breathe-overlay.prep #breathePhase,
.breathe-overlay.prep #breatheVerse { display: none; }
.breathe-prep-icon { font-size: 2.4rem; margin: 0; opacity: 0.9; }
.breathe-prep-text { font-family: var(--serif); font-size: 1.18rem; line-height: 1.85; opacity: 0.92; margin: 0; }
.breathe-start {
  background: rgba(var(--br-c), 0.92); color: #15302b; border-radius: 999px;
  padding: 13px 36px; font-size: 1rem; font-weight: 600; letter-spacing: 0.02em;
  transition: filter 0.15s, transform 0.08s;
}
.breathe-start:hover { filter: brightness(1.06); }
.breathe-start:active { transform: translateY(1px); }

.breathe-stage { display: flex; align-items: center; justify-content: center; }
.breathe-orbwrap { position: relative; width: 280px; height: 280px; display: flex; align-items: center; justify-content: center; }
.breathe-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); z-index: 1; }
.ring-track { fill: none; stroke: rgba(255,255,255,0.10); stroke-width: 3; }
.ring-prog {
  fill: none; stroke: rgba(var(--br-c), 0.9); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 703.717; stroke-dashoffset: 703.717;
  filter: drop-shadow(0 0 6px rgba(var(--br-c), 0.5));
}
/* 호흡 빛무리(aura) — 실루엣 뒤에서 호흡에 맞춰 커지고 작아짐 */
.breathe-orb {
  position: absolute; left: 50%; top: 50%; margin: -120px 0 0 -120px;
  width: 240px; height: 240px; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle at 50% 46%,
    rgba(var(--br-c), 0.5), rgba(var(--br-c), 0.2) 50%, transparent 72%);
  box-shadow: 0 0 80px 30px rgba(var(--br-c), 0.18);
  filter: blur(5px);
  transform: scale(0.55);
}
/* 가부좌·눈 감은 명상 실루엣 (미니멀 벡터, 자체 제작) — 호흡 빛무리 위에 은은히 */
.breathe-figure {
  position: absolute; left: 50%; top: 50%; width: 156px; height: 142px;
  transform: translate(-50%, -46%); z-index: 2;
  color: rgba(238,250,246,0.92);
  filter: drop-shadow(0 0 12px rgba(var(--br-c), 0.55));
}
.breathe-phase {
  margin: 26px 0 0; padding: 0 26px;
  font-family: var(--serif); font-size: 1.4rem; letter-spacing: 0.02em; white-space: nowrap;
  opacity: 0.95; transition: opacity 0.45s ease; text-align: center;
  text-shadow: 0 1px 14px rgba(0,0,0,0.35);
}

/* ---------- 몽환 배경 장면 (별빛 · 안개 · 먼 산) ---------- */
.breathe-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* 콘텐츠는 장면 위에. 절대배치 요소(techs·tech-desc)는 position을 유지하고 z-index만 부여 */
.breathe-prep, .breathe-stage, .breathe-phase, .breathe-verse { position: relative; z-index: 1; }
.breathe-techs, .breathe-tech-desc { z-index: 2; }
.breathe-orbwrap { z-index: 1; }

/* 잔잔히 반짝이는 별빛 (작은 점 패턴, 합성) */
.scene-stars {
  position: absolute; inset: -10%;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.5px 1.5px at 70% 18%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 40% 12%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 85% 40%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 55% 8%, rgba(255,255,255,0.75), transparent),
    radial-gradient(1px 1px at 12% 55%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 90% 22%, rgba(255,255,255,0.7), transparent);
  opacity: 0.55; animation: twinkle 6s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.7; } }

/* 느리게 흐르는 안개 띠 */
.scene-mist {
  position: absolute; left: -20%; right: -20%; height: 280px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--br-c), 0.14), transparent 70%);
  filter: blur(24px);
}
.scene-mist-1 { top: 34%; animation: mistDrift 26s ease-in-out infinite; }
.scene-mist-2 { top: 52%; background: radial-gradient(closest-side, rgba(var(--br-c), 0.11), transparent 70%); animation: mistDrift 34s ease-in-out infinite reverse; }
@keyframes mistDrift { 0%, 100% { transform: translateX(-4%) scale(1); } 50% { transform: translateX(5%) scale(1.08); } }

/* 먼 산 실루엣 (깊이감) */
.scene-hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; }
.scene-hills .hill-back { fill: rgba(10,28,38,0.55); }
.scene-hills .hill-front { fill: rgba(6,20,28,0.8); }
.breathe-verse {
  margin: 22px 0 0; max-width: 30em; padding: 0 26px;
  text-align: center; font-family: var(--serif); font-style: italic; opacity: 0.62; font-size: 1.02rem;
  line-height: 1.7;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .breathe-orb { transform: scale(0.8) !important; transition: none !important; }
  .ring-prog { transition: none !important; }
  .scene-stars, .scene-mist { animation: none !important; }
}

/* ---------- 현자 소개 패널 ---------- */
.guide-panel {
  max-width: 30em; margin: 4px auto 12px; padding: 14px 18px;
  /* 밤하늘 히어로 위에서도 글씨가 또렷하도록 충분히 밝고 불투명한 카드 + 은은한 블러 */
  background: rgba(252,250,244,0.82); border: 1px solid rgba(255,255,255,0.5);
  border-radius: 16px; text-align: center; backdrop-filter: blur(7px);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,0.5);
  animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.gp-title { font-family: var(--serif); font-size: 1.16rem; color: var(--accent); margin: 0 0 5px; }
.gp-desc { color: #33302a; font-size: 0.95rem; line-height: 1.65; margin: 0 0 9px; }
.gp-best { color: #56503f; font-size: 0.86rem; margin: 0; line-height: 1.6; }
.gp-best-label {
  display: inline-block; font-size: 0.7rem; letter-spacing: 0.06em; font-weight: 700;
  color: #8a6a2f; background: rgba(176,141,87,0.16); border-radius: 999px;
  padding: 1px 9px; margin-right: 6px;
}
/* 밤하늘 켜졌을 때도 카드 배경을 밝게 유지(글씨 대비 확보) */
body.sky-on #guidePanel { background: rgba(252,250,244,0.86); }

/* ---------- 추천 도우미 ---------- */
/* ── 온보딩 몰입 모드 — 밤하늘+질문+기분 칩만, 나머지 전부 숨김 (2026-07-21 박철순: 스플래시 문법의 연장) ── */
body.onb-solo .topbar,
body.onb-solo #viewNav,
body.onb-solo #appTitle,
body.onb-solo #skyCaption,
body.onb-solo #appIntro,
body.onb-solo #presenceLine,
body.onb-solo #composeFab,
body.onb-solo .site-footer { display: none !important; }
/* 숨긴 만큼 하늘을 넓혀 질문이 밤하늘 가운데 떠 있게 */
body.onb-solo .onb-area { padding-top: 16vh; padding-bottom: 10vh; }

/* ── 신규 3단계 온보딩 의식 — 한 화면에 하나씩 (2026-07-21 박철순) ── */
.onb-area {
  width: min(30em, calc(100vw - 44px)); min-width: 0;
  margin: 6px auto 16px; text-align: center;
}
.onb-area > * { animation: rise 0.45s ease both; }
.onb-area > *:nth-child(2) { animation-delay: 0.12s; }
.onb-area > *:nth-child(3) { animation-delay: 0.24s; }
.onb-area > *:nth-child(4) { animation-delay: 0.36s; }
/* 온보딩은 밤하늘(항상 어두움) 위에 얹힘 — 글자는 별빛 톤으로 */
.onb-q {
  font-family: var(--serif, serif); font-size: 1.18rem; color: #f0e9d5;
  margin: 4px 0 14px; letter-spacing: 0.01em;
  text-shadow: 0 1px 10px rgba(10, 14, 30, 0.65);
}
.mood-chips.onb-chips {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%; margin-bottom: 6px;
}
.onb-chips .mood-chip {
  width: 100%; min-width: 0; padding-inline: 10px;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.4;
}
.onb-suggest {
  color: rgba(240, 233, 213, 0.82); font-size: 0.92rem; margin: 2px 0 12px;
  text-shadow: 0 1px 8px rgba(10, 14, 30, 0.6);
}
.onb-card {
  display: inline-block; padding: 20px 34px; margin-bottom: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 2px 14px rgba(120, 110, 80, 0.08);
}
.onb-card .sage-glyph { width: 60px; height: 60px; font-size: 1.7rem; margin: 0 auto 10px; }
.onb-name { font-family: var(--serif, serif); font-size: 1.12rem; margin: 0 0 4px; }
.onb-title { color: var(--muted); font-size: 0.9rem; margin: 0; }
.onb-start {
  display: block; margin: 0 auto 10px; background: var(--accent); color: #fdfbf4;
  border-radius: 999px; padding: 11px 26px; font-weight: 600; font-size: 0.95rem;
}
.onb-start:hover { filter: brightness(1.06); }
.onb-link {
  display: block; margin: 0 auto; background: none; border: none;
  color: rgba(240, 233, 213, 0.66); font-size: 0.85rem; padding: 6px; text-decoration: underline;
  text-underline-offset: 3px; text-shadow: 0 1px 8px rgba(10, 14, 30, 0.6);
}
.onb-link:hover { color: #f0e9d5; }

.recommend-wrap { max-width: 30em; margin: 2px auto 12px; text-align: center; }
.recommend-toggle {
  background: var(--glass); color: var(--accent); border: 1px dashed var(--line);
  border-radius: 999px; padding: 8px 16px; font-size: 0.9rem; font-weight: 600;
}
.recommend-toggle:hover { border-color: var(--accent-2); }
.recommend-box {
  margin-top: 12px; padding: 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  animation: rise 0.4s ease both; text-align: center;
}
.rec-lead { color: var(--muted); font-size: 0.88rem; margin: 0 0 12px; }
.mood-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mood-chip {
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 14px; font-size: 0.9rem;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.mood-chip:hover { border-color: var(--accent-2); }
.mood-chip.active { background: var(--accent); color: #fdfbf4; border-color: var(--accent); }
.rec-suggest { margin-top: 14px; display: grid; gap: 10px; }
.rec-suggest:empty { margin: 0; }
.rec-suggest-lead {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-2); font-weight: 700; margin: 0;
}
.rec-card {
  text-align: left; background: var(--accent-soft); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px;
}
.rc-title { font-family: var(--serif); font-size: 1.05rem; color: var(--accent); margin: 0 0 4px; }
.rc-desc { color: var(--ink); font-size: 0.9rem; line-height: 1.6; margin: 0 0 10px; }
.rc-pick {
  background: var(--accent); color: #fdfbf4; border-radius: 999px;
  padding: 8px 16px; font-size: 0.88rem; font-weight: 600;
}
.rc-pick:hover { filter: brightness(1.08); }

/* ---------- 오늘의 한 말씀 ---------- */
.daily {
  background: linear-gradient(165deg, var(--surface) 0%, var(--accent-soft) 140%);
  border: 1px solid var(--line); border-left: 3px solid var(--accent-2);
  border-radius: var(--radius); padding: 24px 26px; margin-bottom: 22px;
  box-shadow: var(--shadow);
  animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.daily-eyebrow {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-2); font-weight: 700; margin: 0 0 12px;
}
/* 특정일·생일 안내 배지 */
.daily-occasion {
  background: var(--accent-soft); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px; margin: 0 0 16px;
}
.occ-name { font-weight: 700; color: var(--accent); margin: 0 0 3px; font-size: 0.95rem; }
.occ-msg { color: var(--ink); font-size: 0.9rem; line-height: 1.6; margin: 0; }

/* 생일 설정 바 */
.birthday-bar { max-width: 680px; margin: -8px auto 0; padding: 0 4px; text-align: center; }
.bday-link {
  background: transparent; color: var(--muted); border: 0; font-size: 0.82rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px;
}
.bday-link:hover { color: var(--accent); }
.bday-form { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.bday-form select {
  font-family: var(--sans); font-size: 0.88rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px;
}
.bday-save, .bday-clear {
  border-radius: 999px; padding: 6px 14px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.bday-save { background: var(--accent); color: #fdfbf4; border: 0; }
.bday-clear { background: var(--card); color: var(--muted); border: 1px solid var(--line); }
.bday-note { color: var(--muted); font-size: 0.74rem; margin: 8px 0 0; }
.daily-verse {
  font-family: var(--serif); font-size: 1.32rem; font-style: italic; line-height: 1.7;
  color: var(--verse-ink); margin: 0 0 6px;
}
.daily-ref { color: var(--muted); font-size: 0.9rem; margin: 0 0 18px; }
.daily-block { margin: 0 0 14px; }
.daily-block:last-of-type { margin-bottom: 18px; }
.daily-label {
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin: 0 0 5px; opacity: 0.85;
}
.daily-text { margin: 0; color: var(--ink); line-height: 1.75; }
/* 6현자 칩 — 오늘의 말씀 넘겨보기(프리미엄 "6현자 전체" · 무료는 내 현자 외 잠금 표시) */
.daily-sages { display: flex; gap: 8px; justify-content: center; margin: 2px 0 14px; flex-wrap: wrap; }
.daily-sage {
  width: 34px; height: 34px; border-radius: 50%; color: #f4ecd8; font-size: 0.95rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid transparent; opacity: 0.7; position: relative;
}
.daily-sage.active { border-color: var(--accent-2); opacity: 1; box-shadow: 0 0 10px rgba(240,222,180,0.35); }
.daily-sage.locked { opacity: 0.45; }
.daily-sage.locked::after { content: "🔒"; position: absolute; right: -5px; bottom: -5px; font-size: 0.62rem; }

.daily-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.daily-actions #dailyShareBtn { display: inline-flex; align-items: center; gap: 6px; }
.daily-actions button {
  background: var(--card); color: var(--accent); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 18px; font-weight: 600; transition: border-color 0.15s;
}
.daily-actions button:hover { border-color: var(--accent); }
/* 아침 말씀 알림 진입 — 재방문 루프의 핵심이라 조용한 링크 → 금테 필 버튼으로 승격(2026-07-06) */
.daily-push {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; margin: 14px 0 0; padding: 11px 16px;
  background: var(--accent-soft, #eef0e2); border: 1px solid var(--accent-2); border-radius: 999px;
  color: var(--accent); font-size: 0.9rem; font-weight: 600;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.daily-push:hover { box-shadow: 0 0 12px rgba(212,170,90,0.3); }
@media (max-width: 560px) {
  .daily { padding: 20px 18px; }
  .daily-verse { font-size: 1.2rem; }
}

/* ---------- 아침 문안 알림 설정 시트 ---------- */
.push-note { margin: 0 0 12px; color: var(--muted); line-height: 1.65; font-size: 0.92rem; }
.push-strong { color: var(--ink); font-weight: 700; }
.push-row {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 16px;
}
.push-row label { color: var(--muted); font-size: 0.9rem; }
.push-plan { margin: 10px 0 4px; color: var(--muted); font-size: 0.9rem; }
/* 알림 현자 선택 — 오늘의 한 말씀 카드의 현자 칩과 같은 문법 */
.push-label { margin: 0 0 8px; color: var(--muted); font-size: 0.9rem; }
.push-sages { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.push-sage {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-family: var(--serif); font-size: 1rem;
  color: #f7f3e8; border: 2px solid transparent; opacity: 0.65; transition: opacity 0.15s, border-color 0.15s;
}
.push-sage:hover { opacity: 1; }
.push-sage.active { border-color: var(--accent-2); opacity: 1; box-shadow: 0 0 10px rgba(240,222,180,0.35); }
.push-sagename { margin: 0 0 14px; font-family: var(--serif); color: var(--accent-2); font-weight: 600; font-size: 0.92rem; }
/* 수신 동의 토글 — 공감 알림 · 주간 인기 소식 */
.push-consent {
  display: flex; align-items: center; gap: 8px; margin: 8px auto 0;
  max-width: 21rem; text-align: left; color: var(--muted); font-size: 0.85rem; cursor: pointer;
}
.push-consent input { accent-color: var(--accent-2); width: 16px; height: 16px; flex: none; }
.push-linkbtn {
  background: none; border: none; color: var(--accent); font-size: 0.9rem;
  text-decoration: underline; padding: 2px; cursor: pointer;
}

/* ---------- 결제 (M5) ---------- */
.upgrade-cta-year {
  margin-top: 8px; background: var(--card); color: var(--accent);
  border: 1px solid var(--accent);
}
.journal-locked { list-style: none; text-align: center; padding: 6px 0 2px; }
.journal-locked button {
  background: none; border: 1px dashed var(--line); border-radius: 999px;
  color: var(--muted); font-size: 0.85rem; padding: 8px 16px; transition: border-color 0.15s, color 0.15s;
}
.journal-locked button:hover { border-color: var(--accent); color: var(--accent); }

/* 로그인 버튼의 '최근 사용' 배지 — 같은 사람이 실수로 다른 계정을 만드는 것 예방 */
.last-used {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
  background: var(--accent-soft); color: var(--accent); vertical-align: 1px;
}

/* 기록 펼침 안의 말씀 인용 — 묵상 결과의 .verse와 같은 결 (출처만 있던 것에 본문 추가) */
.ji-verse {
  font-family: var(--serif); font-style: italic; color: var(--verse-ink);
  background: var(--accent-soft); border-left: 3px solid var(--accent-2);
  border-radius: 6px 10px 10px 6px; padding: 12px 14px; margin: 10px 0; line-height: 1.7;
}
.ji-verse .ji-vref { display: block; font-style: normal; font-family: inherit; color: var(--muted); font-size: 0.85rem; margin-top: 6px; }

/* 마음 돌아보기 설명 한 줄(도구줄 아래) */
.tools-hint { color: var(--muted); font-size: 0.82rem; margin: -8px 0 14px; }

/* 저장 '후' 마음날씨 한 줄 (UX 단순화 — 묵상 결과의 패널 대체) */
.mood-after { margin: 12px 0 4px; animation: rise 0.4s ease both; }
.mood-after .mood-done { color: var(--accent); font-weight: 600; }

/* 기록 안 ♥ 마음에 담기 토글 (묵상 결과에서 이동) */
.ji-keepbtn {
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: 0.85rem; color: var(--muted); margin-right: 6px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ji-keepbtn:hover { border-color: var(--accent-2); }
.ji-keepbtn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
/* ⋯ 더보기 — 광장 놓기·지우기를 접어두는 토글 */
.ji-more {
  background: none; border: none; color: var(--muted); opacity: 0.55;
  font-size: 1rem; padding: 7px 10px; cursor: pointer;
}
.ji-more:hover, .ji-more.on { opacity: 1; }
.ji-extra { display: inline-flex; align-items: center; gap: 6px; }
.ji-extra.hidden { display: none; }
/* 기록 한 건 지우기 — 눈에 띄지 않게(파괴적 동작), 확정 단계에서만 경고색 */
.ji-del {
  background: none; border: none; color: var(--muted); opacity: 0.55;
  font-size: 0.8rem; padding: 7px 8px; cursor: pointer; margin-left: 2px;
}
.ji-del:hover { opacity: 1; }
.ji-del.armed { opacity: 1; color: #a4453b; }
.push-row select {
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 12px; font-size: 1rem;
}

/* ---------- 구독 안내 모달 (무료 한도 도달 시) ---------- */
.upgrade-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(20,30,26,0.5); backdrop-filter: blur(3px);
  overflow-y: auto; animation: fadeIn 0.25s ease both;
}
.upgrade-card {
  position: relative; width: 100%; max-width: 24em; margin: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow); padding: 30px 26px 22px; text-align: center;
  animation: rise 0.4s cubic-bezier(0.2,0.7,0.2,1) both;
}
.upgrade-close {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  border-radius: 999px; background: rgba(0,0,0,0.05); color: var(--muted); font-size: 0.95rem;
}
.upgrade-close:hover { background: rgba(0,0,0,0.1); }
.upgrade-icon { font-size: 2rem; margin: 0 0 6px; }
.upgrade-title { font-family: var(--serif); font-size: 1.32rem; color: var(--accent); margin: 0 0 8px; line-height: 1.4; }
.upgrade-limit { color: var(--muted); font-size: 0.9rem; line-height: 1.6; margin: 0 0 14px; }
.upgrade-sub { color: var(--ink); font-size: 0.98rem; font-weight: 600; margin: 0 0 14px; }
.upgrade-benefits { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 9px; text-align: left; }
.upgrade-benefits li { position: relative; padding-left: 26px; font-size: 0.92rem; color: var(--ink); line-height: 1.5; }
.upgrade-benefits li::before { content: "✓"; position: absolute; left: 6px; color: var(--accent-2); font-weight: 700; }
.upgrade-price {
  display: flex; flex-direction: column; gap: 3px; margin: 0 0 16px;
  padding: 13px; background: var(--accent-soft); border-radius: 14px;
}
.up-price-main { font-size: 1.16rem; font-weight: 700; color: var(--accent); }
.up-price-sub { font-size: 0.82rem; color: var(--muted); }
.upgrade-cta {
  width: 100%; background: var(--accent); color: #fdfbf4; border-radius: 999px;
  padding: 13px 20px; font-size: 0.98rem; font-weight: 600; margin-bottom: 10px;
}
.upgrade-cta:disabled { opacity: 0.5; cursor: not-allowed; }
/* Threads에 올리기 — 보조 버튼(주 동선=보내기 아래, 텍스트+링크 인텐트) */
.share-threads {
  width: 100%; background: none; color: var(--accent); border: 1px solid var(--line);
  border-radius: 999px; padding: 11px 20px; font-size: 0.92rem; font-weight: 600; margin-bottom: 10px;
}
.share-threads:hover { border-color: var(--accent); }
.upgrade-breathe {
  width: 100%; background: var(--glass); color: var(--accent);
  border: 1px solid var(--line); border-radius: 999px; padding: 11px 20px;
  font-size: 0.95rem; font-weight: 600; margin-bottom: 6px;
}
.upgrade-breathe:hover { border-color: var(--accent-2); }
.upgrade-later { background: none; color: var(--muted); font-size: 0.86rem; padding: 6px; }
.upgrade-later:hover { color: var(--ink); }

/* 구독 안내 모달은 다른 시트(공유 등, z 60) 위에서도 항상 보이게 — 잠긴 기능 탭 → 안내 흐름 */
#upgradeOverlay { z-index: 70; }

/* 잠긴 호흡법 버튼 — 눌러볼 순 있게 두되 잠금이 보이게(누르면 구독 안내) */
.tech-btn.locked { opacity: 0.55; }

/* ---------- 말씀 공유 시트 ---------- */
.share-card { max-width: 25em; }
.share-card .upgrade-title { margin-bottom: 14px; }
.share-preview { width: 272px; height: 272px; margin: 0 auto 16px; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); background: var(--accent); }
.share-preview canvas { width: 100%; height: 100%; display: block; }
.share-toggles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.share-toggle {
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 15px; font-size: 0.9rem; transition: all 0.15s;
}
.share-toggle::before { content: "○ "; color: var(--muted); }
.share-toggle.on { background: var(--accent); color: #fdfbf4; border-color: var(--accent); }
.share-toggle.on::before { content: "✓ "; color: #fdfbf4; }
/* 꾸미기 카드 테마 스와치 */
.share-skin-label { color: var(--muted); font-size: 0.8rem; margin: 0 0 8px; text-align: center; }
.share-skins { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 16px; }
.skin-swatch {
  width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid var(--line); box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
  position: relative; transition: transform 0.1s, border-color 0.15s;
}
.skin-swatch:hover { transform: translateY(-1px); }
.skin-swatch.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), inset 0 1px 3px rgba(0,0,0,0.25); }
.skin-swatch.locked::after {
  content: "🔒"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; background: rgba(0,0,0,0.28); border-radius: 50%;
}
.share-input {
  width: 100%; box-sizing: border-box; margin-bottom: 9px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 12px; font-size: 0.95rem; font-family: var(--sans);
  background: var(--surface); color: var(--ink);
}
.share-input:focus { outline: none; border-color: var(--accent-2); }
.share-hint { color: var(--muted); font-size: 0.8rem; margin: 2px 0 14px; }

/* 안내 토스트 (다운로드 폴백 등) */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  z-index: 80; max-width: 88%; text-align: center;
  background: rgba(30, 42, 36, 0.96); color: #fdfbf4;
  padding: 12px 20px; border-radius: 999px; font-size: 0.9rem; line-height: 1.4;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 서비스 비전 (푸터 소개글) */
.vision {
  max-width: 30em; margin: 0 auto 14px; padding: 0 18px;
  font-family: var(--serif); font-style: italic; font-size: 1.02rem; line-height: 1.75;
  color: var(--accent); opacity: 0.92;
}

/* ---------- 받은 사람 착지 카드 ---------- */
.land-card { max-width: 24em; }
.land-eyebrow { color: var(--accent-2); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.04em; margin: 6px 0 16px; }
.land-verse { font-family: var(--serif); font-size: 1.5rem; line-height: 1.6; color: var(--accent); margin: 0 0 12px; }
.land-ref { color: var(--muted); font-size: 0.92rem; margin: 0 0 16px; }
.land-note { font-family: var(--serif); font-style: italic; color: var(--ink); font-size: 1.02rem; line-height: 1.6; margin: 0 0 20px; }
.land-card .upgrade-cta { margin-bottom: 10px; }

/* ============================================================
   화면 전환(오늘 ↔ 일기) · 일기 접기 · 저장 별 안착  (2026-07 UI 정돈)
   ============================================================ */

/* --- 세그먼트 내비 --- */
.view-nav {
  position: relative; z-index: 2;
  display: inline-flex; gap: 4px; margin: 14px auto 0; padding: 4px;
  border-radius: 999px; background: rgba(255,255,255,0.55);
  border: 1px solid var(--line); backdrop-filter: blur(6px);
}
.view-tab {
  font-family: var(--sans); font-size: 0.9rem; font-weight: 600; color: var(--muted);
  background: transparent; border: none; border-radius: 999px; padding: 7px 22px;
  cursor: pointer; transition: color 0.15s, background 0.15s;
}
.view-tab:hover { color: var(--accent); }
.view-tab.active { background: var(--accent); color: #fff; }
.vt-ic { display: none; } /* 아이콘은 모바일 하단 바에서만 */
body.sky-on .view-nav { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); }
body.sky-on .view-tab { color: #e7dfca; }
body.sky-on .view-tab.active { background: var(--card); color: var(--accent); }

/* ── 모바일: 하단 고정 반투명 탭바 (인스타·유튜브 모바일 문법) ──
   ⚠️ 위 body.sky-on 규칙들을 이겨야 하므로 반드시 이 위치(그 아래)에 둘 것 */
@media (max-width: 640px) {
  .view-nav,
  body.sky-on .view-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    display: flex; justify-content: space-around; align-items: center;
    margin: 0; padding: 6px 12px calc(7px + env(safe-area-inset-bottom));
    border-radius: 0; border: none; border-top: 1px solid rgba(60,54,40,0.08);
    /* 인스타처럼 더 투명하게 — 블러를 세게 걸어 가독성은 유지 (2026-07-04 박철순) */
    background: rgba(250,248,242,0.62);
    backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
  }
  .view-tab, body.sky-on .view-tab {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    flex: 1; max-width: 160px; padding: 6px 8px; border-radius: 14px;
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em; color: #97917f;
    transition: color 0.15s, background 0.15s;
  }
  /* 켜진 탭이 또렷하게: 은은한 초록 알약 + 진한 색 + 굵은 아이콘 */
  .view-tab.active, body.sky-on .view-tab.active {
    background: rgba(47,93,79,0.13); color: var(--accent); font-weight: 800;
  }
  .vt-ic { display: block; width: 23px; height: 23px; }
  .view-tab.active .vt-ic { stroke-width: 2.5; }
  /* 하단 바에 가리지 않도록 본문·푸터에 숨 쉴 공간 */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* 온기 캡션 — 작게·차분하게 + 위(언어·로그인 줄)와 아래(제목) 사이 정중앙 (박철순 피드백 ×2) */
  .sky-caption { margin: 18px auto 0; gap: 0; }
  .sky-name { font-size: 0.84rem; }
  .sky-stage { font-size: 0.74rem; }
  .sky-segs { margin-top: 3px; }
  .sky-segs .seg { width: 10px; }

  /* 결과·오늘의말씀 액션 3버튼(공유·숨 고르기·저장)을 한 줄에 (2026-07-04 박철순) */
  .result-actions, .daily-actions { flex-wrap: nowrap; gap: 6px; }
  .result-actions button, .daily-actions button {
    padding: 8px 10px; font-size: 0.8rem; white-space: nowrap;
    flex: 0 1 auto; min-width: 0;
  }
}

/* --- 뷰별 표시/숨김 (한 번에 한 화면: 오늘 · 마음 기록 · 광장) --- */
body:not([data-view="today"]) #appTitle,
body:not([data-view="today"]) #guidePanel,
body:not([data-view="today"]) #recommendWrap,
body:not([data-view="today"]) #appIntro,
body:not([data-view="today"]) #presenceLine,
body:not([data-view="today"]) #daily,
body:not([data-view="today"]) #birthdayBar,
body:not([data-view="today"]) #starBanner { display: none !important; }
/* 현자 선택(6카드)은 오늘 화면에서만 — 묵상 탭엔 현재 현자 라벨(reflect-guide)만 */
body:not([data-view="today"]) .guide-row { display: none !important; }
/* 나의 하늘(온기)도 오늘+묵상에서 — 묵상(행동)과 하늘(보상)의 연결이 보이게 (2026-07-06 박철순) */
/* 위젯은 4탭 공통 노출(2026-07-19 박철순: "하나만 보이거나 전부 보이거나" → 전부) */
/* 4탭 밤하늘 높이 통일 — 탭 전환 시 화면이 출렁이지 않고, 위젯이 항상 어두운 하늘 위에 놓임.
   250→200px(2026-07-19 박철순: 상단이 화면 1/3 차지는 과다 → 축소. 현자 배지가 카드로 내려가 여유 생김).
   오늘 온보딩(미선택 그리드)만 내용만큼 자연 확장 */
.site-header { min-height: 200px; }
/* 묵상 쓰기(입력·결과)는 묵상 탭 전용 (2026-07-06 UI 재검토 §A — 수신과 작성의 분리) */
body:not([data-view="reflect"]) .composer,
body:not([data-view="reflect"]) #result { display: none !important; }
body[data-view="reflect"] .compose-fab { display: none !important; } /* 묵상 화면에선 FAB 중복 */
body[data-view="reflect"] .composer { margin-top: 8px; }
body:not([data-view="journal"]) .journal { display: none !important; }
body:not([data-view="plaza"]) .plaza { display: none !important; }
/* 기록/광장 화면에선 밤하늘 히어로 여백을 줄여 담백하게 */
body:not([data-view="today"]).sky-on .site-header { padding-bottom: 10px; }
body[data-view="journal"] .journal { margin-top: 8px; }
body[data-view="plaza"] .plaza { margin-top: 8px; }

/* --- 공유 버튼: 호흡·저장과 같은 알약(pill)으로 통일 --- */
.share-cta, .ji-share {
  background: var(--card); color: var(--accent); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 18px; font: inherit; font-weight: 600;
  cursor: pointer; transition: border-color 0.15s;
}
.share-cta:hover, .ji-share:hover { border-color: var(--accent); }
/* 공유 곡선 화살표 아이콘 (이모지 대신 · 라벨과 정렬) */
.ic-share { vertical-align: -2px; margin-right: 6px; }

/* --- 달력 접기 토글 --- */
.cal-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--glass); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 0.86rem; font-weight: 600;
  color: var(--accent); cursor: pointer; margin: 2px 0 14px; transition: border-color 0.15s;
}
.cal-toggle:hover { border-color: var(--accent-2); }
.cal-toggle .ct-caret { color: var(--muted); transition: transform 0.2s; }
.cal-toggle[aria-expanded="true"] .ct-caret { transform: rotate(180deg); }

/* --- 일기 항목: 한 줄 요약 → 클릭 시 펼침(아코디언) --- */
.journal-item { padding: 0; overflow: hidden; } /* 안쪽 요약/본문이 여백을 담당 */
.ji-summary {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: transparent; border: none; padding: 15px 18px; cursor: pointer;
  text-align: left; font: inherit;
}
.ji-summary .ji-date { flex: none; color: var(--accent-2); font-size: 0.76rem; letter-spacing: 0.05em; }
.ji-summary .ji-mood { flex: none; font-size: 1rem; }
.ji-summary .ji-keep { flex: none; font-size: 0.85rem; color: var(--accent-2); }
.ji-summary .ji-preview {
  flex: 1; min-width: 0; color: var(--ink); font-family: var(--serif); font-size: 1.02rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ji-summary .ji-caret { flex: none; color: var(--muted); font-size: 0.85rem; transition: transform 0.2s; }
.journal-item:not(.collapsed) .ji-caret { transform: rotate(180deg); }
.ji-body { padding: 0 18px 16px; }
.ji-body .ji-text { font-family: var(--serif); font-size: 1.08rem; line-height: 1.7; margin: 2px 0 6px; }
.ji-body .verse-ref { color: var(--muted); font-size: 0.9rem; margin: 0 0 14px; }

/* --- 저장 → 별 안착 --- */
/* 저장 확인 배너 (결과 카드 아래, 일기로 잇는 링크) */
.save-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 2px; padding: 12px 16px; border-radius: 14px;
  background: var(--accent-soft); border: 1px solid var(--line);
  font-size: 0.9rem; color: var(--accent); animation: bannerIn 0.4s ease;
}
@keyframes bannerIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.save-banner .sb-star { color: var(--accent-2); }
.save-banner .sb-link {
  background: none; border: none; padding: 0; font: inherit; font-weight: 700;
  color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
/* 버튼에서 피어오르는 작은 별 */
.save-star {
  position: fixed; z-index: 90; pointer-events: none;
  font-size: 1.3rem; color: var(--accent-2);
  animation: starRise 1.1s ease-out forwards;
}
@keyframes starRise {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  25%  { opacity: 1; transform: translate(-50%, -14px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(0.9); }
}
@media (prefers-reduced-motion: reduce) { .save-star { display: none; } }
/* 방금 저장한 오늘 칸 반짝임 */
.cal-cell.just-saved { animation: cellGlow 2.4s ease-out; }
@keyframes cellGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176,141,87,0); }
  30%      { box-shadow: 0 0 0 3px rgba(176,141,87,0.55); }
}
@media (prefers-reduced-motion: reduce) { .cal-cell.just-saved { animation: none; } }

/* ══════════════════════════════════════════════════════════════
   다크모드 (2026-07-04) — 시스템 자동 추종 + 상단 🌓 수동 토글(html[data-theme])
   따뜻한 숯색 밤 팔레트: 헤더의 밤하늘이 본문까지 이어지는 느낌.
   ⚠️ 토큰 재정의는 body 레벨(현자별 body[data-guide] 규칙을 이기려면 파일 끝 + 동급 특이도 필요)
   ══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] body, html[data-theme="dark"] body[data-guide="christianity"], html[data-theme="dark"] body[data-guide="buddha"], html[data-theme="dark"] body[data-guide="krishna"], html[data-theme="dark"] body[data-guide="laozi"], html[data-theme="dark"] body[data-guide="confucius"], html[data-theme="dark"] body[data-guide="marcus"] {
  --bg: #15181a; --bg-2: #0e1113;
  --surface: #1e2321; --card: #242a27;
  --glass: rgba(36,42,39,0.55); --glass2: rgba(36,42,39,0.72);
  --ink: #e6e1d3; --muted: #9d978a; --line: #3a403b; --verse-ink: #cfe3d6;
  --accent: #9ec7b4; --accent-2: #d3b071; --accent-soft: rgba(120,160,140,0.16);
  --warn-bg: #2f2417; --warn-line: #6b5230; --warn-ink: #e0b183;
  --shadow: 0 18px 50px -28px rgba(0,0,0,0.85);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body, html:not([data-theme="light"]) body[data-guide="christianity"], html:not([data-theme="light"]) body[data-guide="buddha"], html:not([data-theme="light"]) body[data-guide="krishna"], html:not([data-theme="light"]) body[data-guide="laozi"], html:not([data-theme="light"]) body[data-guide="confucius"], html:not([data-theme="light"]) body[data-guide="marcus"] {
    --bg: #15181a; --bg-2: #0e1113;
    --surface: #1e2321; --card: #242a27;
    --glass: rgba(36,42,39,0.55); --glass2: rgba(36,42,39,0.72);
    --ink: #e6e1d3; --muted: #9d978a; --line: #3a403b; --verse-ink: #cfe3d6;
    --accent: #9ec7b4; --accent-2: #d3b071; --accent-soft: rgba(120,160,140,0.16);
    --warn-bg: #2f2417; --warn-line: #6b5230; --warn-ink: #e0b183;
    --shadow: 0 18px 50px -28px rgba(0,0,0,0.85);
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    background-attachment: fixed;
  }
}

/* 다크에서 '연초록 accent 배경 + 흰 글씨' 조합의 대비 복구(글씨를 깊은 밤색으로) */
html[data-theme="dark"] .primary, html[data-theme="dark"] .view-tab.active, html[data-theme="dark"] .mood-chip.active,
html[data-theme="dark"] .bday-save, html[data-theme="dark"] .share-toggle.on, html[data-theme="dark"] .upgrade-cta,
html[data-theme="dark"] .listen-btn.playing, html[data-theme="dark"] .land-card .upgrade-cta { color: #16211b; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .primary, html:not([data-theme="light"]) .view-tab.active, html:not([data-theme="light"]) .mood-chip.active,
  html:not([data-theme="light"]) .bday-save, html:not([data-theme="light"]) .share-toggle.on, html:not([data-theme="light"]) .upgrade-cta,
  html:not([data-theme="light"]) .listen-btn.playing, html:not([data-theme="light"]) .land-card .upgrade-cta { color: #16211b; }
}

/* 다크 전용 컴포넌트 보정 — 하단 탭바·별 배너·기록에저장(광장) 버튼·컴포저 글로우 */
@media (max-width: 640px) {
  html[data-theme="dark"] .view-nav, html[data-theme="dark"] body.sky-on .view-nav {
    background: rgba(16,19,18,0.6); border-top-color: rgba(255,255,255,0.08);
  }
  html[data-theme="dark"] .view-tab, html[data-theme="dark"] body.sky-on .view-tab { color: #7d786c; }
  html[data-theme="dark"] .view-tab.active, html[data-theme="dark"] body.sky-on .view-tab.active {
    background: rgba(158,199,180,0.14); color: var(--accent);
  }
}
@media (max-width: 640px) and (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .view-nav, html:not([data-theme="light"]) body.sky-on .view-nav {
    background: rgba(16,19,18,0.6); border-top-color: rgba(255,255,255,0.08);
  }
  html:not([data-theme="light"]) .view-tab, html:not([data-theme="light"]) body.sky-on .view-tab { color: #7d786c; }
  html:not([data-theme="light"]) .view-tab.active, html:not([data-theme="light"]) body.sky-on .view-tab.active {
    background: rgba(158,199,180,0.14); color: var(--accent);
  }
}
html[data-theme="dark"] .star-banner { background: linear-gradient(150deg, rgba(90,74,40,0.35), rgba(36,42,39,0.85)); border-color: rgba(211,176,113,0.4); }
html[data-theme="dark"] .ji-plaza, html[data-theme="dark"] .star-send > button:hover, html[data-theme="dark"] .sb-reply:hover { background: var(--card); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .star-banner { background: linear-gradient(150deg, rgba(90,74,40,0.35), rgba(36,42,39,0.85)); border-color: rgba(211,176,113,0.4); }
  html:not([data-theme="light"]) .ji-plaza, html:not([data-theme="light"]) .star-send > button:hover, html:not([data-theme="light"]) .sb-reply:hover { background: var(--card); }
}

/* 다크: 상단 필 활성 탭(데스크톱) + 현자 소개 패널 대비 복구 */
html[data-theme="dark"] body.sky-on .view-tab.active, html[data-theme="dark"] .view-tab.active {
  background: #e9e4d4; color: #1c2a23;
}
html[data-theme="dark"] body.sky-on #guidePanel, html[data-theme="dark"] .guide-panel {
  background: rgba(30,35,32,0.9); border-color: rgba(255,255,255,0.14);
}
html[data-theme="dark"] .guide-panel .gp-title { color: var(--accent-2); }
html[data-theme="dark"] .guide-panel .gp-desc { color: var(--ink); }
html[data-theme="dark"] .guide-panel .gp-best { color: var(--muted); }
html[data-theme="dark"] .guide-panel .gp-best-label { background: rgba(211,176,113,0.18); color: var(--accent-2); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body.sky-on .view-tab.active, html:not([data-theme="light"]) .view-tab.active {
    background: #e9e4d4; color: #1c2a23;
  }
  html:not([data-theme="light"]) body.sky-on #guidePanel, html:not([data-theme="light"]) .guide-panel {
    background: rgba(30,35,32,0.9); border-color: rgba(255,255,255,0.14);
  }
  html:not([data-theme="light"]) .guide-panel .gp-title { color: var(--accent-2); }
  html:not([data-theme="light"]) .guide-panel .gp-desc { color: var(--ink); }
  html:not([data-theme="light"]) .guide-panel .gp-best { color: var(--muted); }
  html:not([data-theme="light"]) .guide-panel .gp-best-label { background: rgba(211,176,113,0.18); color: var(--accent-2); }
}
/* 다크(모바일): 하단 바 활성 알약은 위 규칙보다 우선 */
@media (max-width: 640px) {
  html[data-theme="dark"] body.sky-on .view-tab.active, html[data-theme="dark"] .view-tab.active {
    background: rgba(158,199,180,0.14); color: var(--accent);
  }
}
@media (max-width: 640px) and (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body.sky-on .view-tab.active, html:not([data-theme="light"]) .view-tab.active {
    background: rgba(158,199,180,0.14); color: var(--accent);
  }
}