/* 몽환 층 (2026-10-12). 가족 화면에서 brand.css 다음에 마지막으로 불러온다.
   움직임은 Lottie 장면(js/dream.js)만 쓰고, 여기서는 장면 자리·빛·여백만 정한다(CSS 키프레임 없음).
   브랜드 기준(BRAND-GUIDE.md) 유지: 먹·한지 바탕, 명조 제목, 먹색 알약 버튼, 위쪽 진한 선의 패널. 연꽃은 불교 테마의 장면에만 나온다. */

/* ── 바탕: 한지 위에 새벽빛이 번진 듯 */
body {
  background:
    radial-gradient(1100px 560px at 12% -8%, rgba(255, 224, 176, .38), transparent 62%),
    radial-gradient(900px 520px at 105% 4%, rgba(var(--glow), .10), transparent 60%),
    radial-gradient(1200px 700px at 50% 115%, rgba(201, 166, 107, .14), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
.card, .modal, .memory-item, .empty-state {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: 0 34px 60px -46px rgba(18, 20, 16, .45), 0 0 0 1px rgba(255, 255, 255, .35) inset;
}

/* ── 장면 자리(공통) */
.dream-stage { position: relative; overflow: hidden; background: var(--dream-poster, none) center / cover no-repeat; }
.dream-stage .dream-live, .dream-stage .dream-live > svg { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.dream-pause { position: absolute; right: 14px; bottom: 14px; z-index: 4; width: auto; min-height: 44px; padding: 0 16px; font-size: 14px; border-radius: 999px;
  background: rgba(18, 20, 16, .62); color: var(--ivory); border: 1px solid rgba(242, 235, 221, .35); backdrop-filter: blur(6px); }
.dream-stage .dream-pause, .dream-stage .dream-pause:not(:disabled):hover { color: #f2ebdd; }
.dream-pause:not(:disabled):hover { background: rgba(18, 20, 16, .82); }
.dream-pause[aria-pressed="true"] { border-color: var(--gold-line); color: #fff; }
.dream-credit { position: absolute; right: 14px; top: 12px; z-index: 4; font-size: 12px; letter-spacing: .02em; color: rgba(242, 235, 221, .86);
  background: rgba(18, 20, 16, .45); padding: 3px 10px; border-radius: 999px; pointer-events: none; }

/* ── 첫 화면: 장면이 판 전체를 채우고 글은 그 위에(먹색 그늘) */
.memorial-hero, .welcome-garden.memorial-hero, .launch .memorial-hero.launch-intro {
  display: block; position: relative; padding: 0; min-height: clamp(400px, 56vh, 540px); background: #0d0e0b; overflow: hidden; isolation: isolate;
  box-shadow: 0 40px 80px -50px rgba(18, 20, 16, .7);
}
.memorial-hero .hero-art { position: absolute; inset: 0; max-width: none; width: auto; aspect-ratio: auto; margin: 0; z-index: 0; justify-self: stretch; align-self: stretch; }
.memorial-hero::before, .welcome-garden.memorial-hero::before { display: none; }
.memorial-hero .hero-art::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 11, 9, .86) 0%, rgba(10, 11, 9, .62) 34%, rgba(10, 11, 9, .12) 64%, transparent 80%),
              linear-gradient(0deg, rgba(10, 11, 9, .55), transparent 40%); }
.memorial-hero .memorial-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-height: inherit;
  max-width: 36em; padding: 48px 44px 64px; }
.memorial-hero h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, .55); }
.memorial-hero p { color: #ddd5c4; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.memorial-hero .dream-pause { z-index: 3; }
.memorial-hero .dream-credit { z-index: 3; }

/* ── 원격 참배: 먹색 액자 + 촛불·향 장면 */
.viewer { position: relative; background: #121410; border: 1px solid #3a3d34; padding: 6px; border-radius: 4px;
  box-shadow: 0 36px 70px -44px rgba(18, 20, 16, .75), inset 0 0 0 1px rgba(201, 166, 107, .22); }
.snapshot { background: #0b0c0a; border-radius: 2px; }
.snapshot .placeholder { color: #cfc6b4; }
.offering-layer { position: absolute; inset: 6px; z-index: 3; pointer-events: none; }
.offering-layer .dream-pause, .offering-layer .dream-credit { pointer-events: auto; }
.offering-layer .dream-credit { top: auto; bottom: 14px; left: 14px; right: auto; }
.viewer .title-card { display: block; z-index: 5; color: #f6e9cc; text-shadow: 0 2px 22px rgba(0, 0, 0, .85), 0 0 34px rgba(255, 210, 150, .55); }
.viewer .title-card[hidden] { display: none; }

/* ── 인공지능 대화: 밤의 작은 성소 */
#view[data-page="chat"] .shrine { position: relative; overflow: hidden; border-radius: 4px; padding: 26px 12px 18px; isolation: isolate;
  background: radial-gradient(120% 80% at 50% 18%, #34322a 0%, #1b1c17 46%, #0f100d 100%); border-top: 1px solid var(--ink); }
.shrine-scene { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.shrine-scene .dream-pause { pointer-events: auto; right: 10px; top: 10px; bottom: auto; min-height: 40px; font-size: 13px; padding: 0 12px; }
#view[data-page="chat"] .shrine-frame { z-index: 2; border-radius: 50% 50% 10px 10px / 34% 34% 10px 10px; padding: 4px; border: 0;
  background: linear-gradient(160deg, #efe1b8 0%, #b8945a 38%, #ead8a8 58%, #9f7c46 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 30px 60px -20px rgba(0, 0, 0, .8); }
#view[data-page="chat"] .shrine-inner { inset: 4px; border-radius: 50% 50% 7px 7px / 34% 34% 7px 7px; background: #1b1c17; }
#view[data-page="chat"] .shrine-inner img { object-fit: cover; object-position: 50% 30%; }
#view[data-page="chat"] .shrine-caption { position: relative; z-index: 4; color: #e9e1cf; }
#view[data-page="chat"] .shrine .voice-tag { color: #cfc6b4; font-size: 13px; }
#view[data-page="chat"] .shrine .live-badge { background: rgba(242, 235, 221, .12); color: #f2ebdd; border: 1px solid rgba(242, 235, 221, .3); font-size: 13px; padding: 3px 12px; border-radius: 999px; }
.shrine.listening .shrine-frame { box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 44px rgba(150, 200, 255, .38); }
.shrine.speaking .shrine-frame { box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 48px rgba(255, 214, 150, .42); }
.shrine.live .shrine-scene { opacity: .35; }
.voice-scene { position: relative; width: 180px; height: 45px; margin: 6px auto 0; }
.voice-scene.dream-stage { background: none; }

/* ── 생중계 반응(합장·촛불·헌화·마음) */
.live-fx, .scr-video .fx { overflow: hidden; }
.dream-reaction { position: absolute; bottom: 0; width: 120px; height: 240px; pointer-events: none; }
.dream-reaction > svg { width: 100% !important; height: 100% !important; }
.dream-reaction.still { width: auto; height: auto; bottom: 30%; font-size: 36px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .6)); }

/* ── 좁은 화면 */
@media (max-width: 720px) {
  .memorial-hero, .welcome-garden.memorial-hero, .launch .memorial-hero.launch-intro { min-height: 480px; }
  .memorial-hero .hero-art::after {
    background: linear-gradient(0deg, rgba(10, 11, 9, .9) 0%, rgba(10, 11, 9, .62) 42%, rgba(10, 11, 9, .08) 74%, transparent 100%); }
  .memorial-hero .memorial-hero-copy { justify-content: flex-end; padding: 120px 22px 72px; }
  .memorial-hero .hero-art { order: 0; max-width: none; margin: 0; }
  .dream-credit { font-size: 11px; right: 10px; top: 10px; }
}