:root {
  --black: #000000;
  --ink: #ece7dd;
  --muted: #8a8579;
  --gold: #b9c0c7;
  --gold-bright: #e5eaef;
  --gold-deep: #6b7178;
  --champagne: #dfe4e9;
  --platinum: #d8dde0;
  --onyx: #050504;
  --panel: rgba(10, 9, 7, 0.82);
  --panel-deep: rgba(3, 3, 3, 0.92);
  --moon: #d9e2ea;
  --glass: rgba(9, 10, 10, 0.56);
  --hair: rgba(255, 255, 255, 0.07);
  --hair-gold: rgba(203, 212, 220, 0.22);
  --edge-premium: linear-gradient(135deg, rgba(226,232,238,0.5), rgba(255,255,255,0.055) 34%, rgba(107,113,120,0.38) 68%, rgba(217,226,234,0.14));
  /* 저강도 헤어라인 — 본문 카드(archive material) 공통 테두리. --edge-premium 의 조용한 버전 */
  --edge-soft: linear-gradient(135deg, rgba(226,232,238,0.30), rgba(255,255,255,0.045) 38%, rgba(107,113,120,0.17) 70%, rgba(217,226,234,0.06));
  --surface-premium:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.012)) padding-box,
    linear-gradient(180deg, rgba(14,13,11,0.92), rgba(3,3,3,0.88)) padding-box,
    var(--edge-premium) border-box;
  /* 본문 카드 공통 재질 — 상단 하이라이트 + 깊은 하단 + 저강도 헤어라인 */
  --surface-archive:
    linear-gradient(180deg, rgba(255,255,255,0.032), rgba(255,255,255,0.009)) padding-box,
    linear-gradient(180deg, rgba(11,10,8,0.72), rgba(3,3,3,0.55)) padding-box,
    var(--edge-soft) border-box;
  --shadow-premium: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -28px 54px rgba(0,0,0,0.28), 0 28px 90px rgba(0,0,0,0.58), 0 0 38px rgba(203,212,220,0.055);
  --serif: "Cormorant Garamond", "Noto Serif KR", Georgia, serif;
  --serif-ko: "Noto Serif KR", "Cormorant Garamond", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Pretendard", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
*[hidden] { display: none !important; }
button, input, textarea, [role="button"] { touch-action: manipulation; }

html, body {
  height: 100%; min-height: 100dvh;
  background: var(--black);
  color: var(--ink);
  font-family: var(--serif-ko);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 한글은 어절 단위로만 줄바꿈(어절 중간 꺾임 방지), 긴 영문 토큰(receipt id 등)은 넘칠 때 끊어 감싸기 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
::selection { background: rgba(203, 212, 220, 0.25); }

/* 시네마틱 비네팅 + 옅은 상단 온기 */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 11; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(217,226,234,0.035), transparent 18%, transparent 82%, rgba(203,212,220,0.035)),
    linear-gradient(180deg, rgba(203,212,220,0.055), transparent 28%, transparent 68%, rgba(0,0,0,0.68)),
    radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 54%, rgba(0,0,0,0.62) 100%);
}
/* 핀치 줌 허용 + 더블탭 줌 오동작 방지 (오브 회전 드래그는 pointer 이벤트로 처리) */
#scene-canvas { touch-action: manipulation; }

/* ---------------- 인트로 리빌 ---------------- */
.intro {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  background:
    linear-gradient(180deg, #030303 0%, #000 48%, #030302 100%);
  transition: opacity 1.4s ease 0.2s, visibility 1.4s;
}
.intro.gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.72s ease, visibility 0.72s;
}
.intro.gone .intro-spark,
.intro.gone .intro-mark,
.intro.gone .intro-tag {
  animation: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.28s ease, transform 0.38s ease;
}
.intro-spark {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-bright);
  box-shadow:
    0 0 18px 5px rgba(226, 232, 238, 0.72),
    0 0 76px 18px rgba(203, 212, 220, 0.18),
    0 0 0 1px rgba(255,255,255,0.4);
  animation: spark 2.6s ease forwards;
}
@keyframes spark {
  0% { transform: scale(0); opacity: 0; }
  35% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0.85; }
}
.intro-mark {
  font-family: var(--serif); font-weight: 500; font-size: 68px;
  letter-spacing: 0.22em; text-indent: 0.22em; color: var(--ink); opacity: 0;
  text-shadow: 0 0 34px rgba(226,232,238,0.11), 0 0 76px rgba(217,226,234,0.08);
  animation: riseIn 1.8s ease 0.8s forwards;
}
.intro-tag {
  font-size: 14px; letter-spacing: 0.42em; color: rgba(226,232,238,0.86);
  text-indent: 0.42em; opacity: 0;
  animation: riseIn 1.8s ease 1.3s forwards;
}
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ---------------- 최초 로그인 ---------------- */
.auth {
  position: fixed; inset: 0; z-index: 54;
  display: flex; align-items: center; justify-content: center;
  padding: calc(42px + env(safe-area-inset-top)) 22px calc(42px + env(safe-area-inset-bottom));
  background:
    linear-gradient(90deg, rgba(217,226,234,0.035), transparent 18%, transparent 82%, rgba(203,212,220,0.035)),
    radial-gradient(52% 42% at 50% 38%, rgba(203,212,220,0.075), rgba(0,0,0,0) 68%),
    linear-gradient(180deg, #050505 0%, #000 58%, #030303 100%);
  overflow: hidden;
  opacity: 1; visibility: visible;
  transition: opacity 0.45s ease, visibility 0.45s;
}
.auth::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(203,212,220,0.05), rgba(0,0,0,0) 18%, rgba(0,0,0,0) 82%, rgba(217,226,234,0.04)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 124px);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent);
  opacity: 0.34;
}
.auth::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: min(68vw, 560px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 1px solid rgba(203,212,220,0.11); border-radius: 50%;
  box-shadow: 0 0 110px rgba(203,212,220,0.055), inset 0 0 90px rgba(217,226,234,0.035);
  opacity: 0.5; pointer-events: none;
}
.auth[aria-hidden="true"] { opacity: 0; visibility: hidden; pointer-events: none; }
.auth-card {
  position: relative; z-index: 1;
  width: min(440px, 100%);
  max-height: min(92dvh, 720px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  border: 0; border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  animation: authRise 0.8s cubic-bezier(.22,1,.36,1) both;
}
.auth-card::-webkit-scrollbar { width: 0; height: 0; }
.auth-card::before {
  content: ''; display: block; width: 52px; height: 1px;
  margin: 0 auto 30px;
  background: linear-gradient(90deg, transparent, rgba(226,232,238,0.72), transparent);
  box-shadow: 0 0 18px rgba(203,212,220,0.22);
}
@keyframes authRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.auth-handle {
  display: none;
}
.auth-brand {
  display: block;
  margin-bottom: 18px;
  text-align: center;
}
.auth-kicker {
  font-family: var(--serif); font-size: 13px; font-style: italic; letter-spacing: 0.5em;
  color: rgba(226,232,238,0.82); margin-bottom: 9px; text-indent: 0.46em;
}
.auth-title {
  font-family: var(--serif-ko); font-size: 27px; font-weight: 500;
  letter-spacing: 0.03em; text-shadow: 0 0 34px rgba(217,226,234,0.08);
}
.auth-copy {
  color: rgba(236,231,221,0.62); font-size: 13px; line-height: 1.82;
  margin: 0 auto 32px; max-width: 30ch; text-align: center;
  text-wrap: balance;
}
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-method-title {
  display: flex; align-items: center; gap: 13px;
  padding: 0 2px 4px;
}
.auth-method-title > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.auth-method-title strong { font-size: 14px; font-weight: 500; color: rgba(236,231,221,0.9); }
.auth-method-title small { font-size: 10.5px; color: rgba(138,133,121,0.72); }
.auth-method-icon {
  position: relative; display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px;
  border: 1px solid rgba(207,178,102,0.34); border-radius: 50%;
  color: #e8d69f; box-shadow: inset 0 0 16px rgba(207,178,102,0.06), 0 0 22px rgba(207,178,102,0.05);
}
.auth-method-icon b { position: relative; z-index: 1; font-family: var(--serif); font-size: 19px; font-weight: 500; }
.auth-method-icon i::before, .auth-method-icon i::after {
  content: ''; position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #e8d69f;
  box-shadow: 9px 5px 0 rgba(232,214,159,0.7), -8px 7px 0 rgba(232,214,159,0.48);
}
.auth-method-icon i::before { left: 11px; top: 9px; }
.auth-method-icon i::after { right: 10px; bottom: 10px; opacity: 0.55; }
.auth-field { display: flex; flex-direction: column; gap: 8px; }
.auth-field span {
  font-family: var(--serif); font-size: 10px; font-style: italic;
  letter-spacing: 0.28em; color: rgba(138,133,121,0.74);
}
.auth-field input {
  width: 100%; min-height: 56px; border: 0; border-radius: 17px;
  background: rgba(255,255,255,0.032); color: var(--ink);
  padding: 0 18px; font-family: var(--serif-ko); font-size: 15px; outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), inset 0 -1px 0 rgba(203,212,220,0.045);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.auth-field input:focus {
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.052), inset 0 -1px 0 rgba(203,212,220,0.18), 0 0 22px rgba(203,212,220,0.055);
}
.auth-field input::placeholder { color: rgba(138,133,121,0.52); }
.auth-consents {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px;
  color: rgba(236,231,221,0.66);
  font-size: 12px; line-height: 1.45;
}
.auth-consents label {
  display: flex; align-items: center; gap: 9px;
  min-height: 30px;
}
.auth-consents input {
  width: 16px; height: 16px;
  accent-color: var(--gold);
}
.auth-consents a { color: rgba(226,232,238,0.82); text-underline-offset: 3px; }
.auth-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px;
}
.auth-submit, .auth-signup {
  min-height: 50px; border: 0; border-radius: 17px;
  font-family: var(--serif-ko); font-size: 14px; font-weight: 600; letter-spacing: 0.08em;
  cursor: pointer; transition: transform 0.22s, filter 0.22s, background 0.22s, color 0.22s;
}
.auth-submit {
  background: linear-gradient(135deg, rgba(236,231,221,0.96), rgba(138,133,121,0.82));
  color: #090907;
}
.auth-signup {
  background: rgba(255,255,255,0.036);
  color: rgba(236,231,221,0.78);
}
.auth-submit:hover, .auth-signup:hover {
  transform: translateY(-1px); filter: brightness(1.05);
}
.auth-status {
  min-height: 18px; margin: 0; color: rgba(226,232,238,0.62);
  font-size: 11px; line-height: 1.55; text-align: center; word-break: keep-all;
}
.auth-status.is-error { color: rgba(222,154,154,0.86); }
.auth-divider {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 28px; color: rgba(138,133,121,0.56); font-size: 10px;
}
.auth-divider::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226,232,238,0.1) 22%, rgba(226,232,238,0.1) 78%, transparent);
}
.auth-divider span { position: relative; padding: 0 12px; background: #010101; }
.auth-providers { display: flex; flex-direction: column; }
.auth-provider {
  display: grid; grid-template-columns: 38px 1fr 16px; align-items: center; gap: 12px;
  width: 100%; min-height: 62px; padding: 7px 2px;
  border: 0; border-bottom: 1px solid rgba(226,232,238,0.09); border-radius: 0;
  background: transparent; color: rgba(236,231,221,0.88); text-align: left; cursor: pointer;
}
.auth-provider:first-child { border-top: 1px solid rgba(226,232,238,0.09); }
.auth-provider > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.auth-provider b { font-family: var(--serif-ko); font-size: 13px; font-weight: 500; }
.auth-provider small { font-size: 10.5px; color: rgba(138,133,121,0.66); }
.auth-provider > i { color: rgba(226,232,238,0.35); font-size: 19px; font-style: normal; }
.auth-provider-icon {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-family: Arial, sans-serif; font-size: 12px; font-weight: 700;
}
.auth-provider--kakao .auth-provider-icon { background: #fee500; color: #181600; }
.auth-provider--naver .auth-provider-icon { background: #03c75a; color: white; }
.auth-provider:hover { background: rgba(255,255,255,0.018); }
.auth-provider:disabled { opacity: 0.42; cursor: default; }

/* 로그인 상태 유지 (동의 체크박스 톤 재사용) */
.auth-keep {
  display: flex; align-items: center; gap: 9px;
  min-height: 30px; margin-top: 2px;
  color: rgba(236,231,221,0.66); font-size: 12px;
}
.auth-keep input { width: 16px; height: 16px; accent-color: var(--gold); }
/* 내 계정 찾기 안내 한 줄 */
.auth-hint {
  color: rgba(236,231,221,0.6); font-size: 12.5px; line-height: 1.7;
  text-align: center; margin: 2px 0;
}
/* 비밀번호 12자 힌트 */
.auth-field-hint {
  font-family: var(--serif); font-size: 10px; font-style: italic; letter-spacing: 0.06em;
  color: rgba(138,133,121,0.66);
}
/* 로그인 주 버튼(단일 칼럼) */
.auth-actions--single { grid-template-columns: 1fr; }
/* 하단 모드 전환 링크 */
.auth-switch {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 4px;
}
.auth-switch button {
  border: 0; background: none; cursor: pointer;
  color: rgba(203,212,220,0.66);
  font-family: var(--serif-ko); font-size: 12px; letter-spacing: 0.04em;
  padding: 6px 4px;
}
.auth-switch button:hover, .auth-switch button:focus-visible { color: rgba(236,231,221,0.9); }
.auth-switch span { color: rgba(138,133,121,0.5); font-size: 11px; }

body.auth-locked .scene { pointer-events: none; }

/* ---------------- 나의 기억 진입 화면 ---------------- */
.scene {
  position: fixed; inset: 0; z-index: 10; transition: opacity 0.9s ease;
  background:
    linear-gradient(180deg, #040403 0%, #010101 54%, #000 100%);
  box-shadow: inset 0 0 190px rgba(0,0,0,0.9);
}
.scene.dimmed { opacity: 0; pointer-events: none; }
#scene-canvas { position: absolute; inset: 0; display: block; cursor: default; z-index: 0; }
.scene::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 74% 76% at 50% 44%, var(--home-ambient-core, transparent) 0%, var(--home-ambient-soft, transparent) 38%, transparent 76%),
    linear-gradient(180deg, rgba(22,20,16,0.28), rgba(0,0,0,0) 30%, rgba(0,0,0,0.62) 100%),
    linear-gradient(90deg, rgba(217,226,234,0.038), rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(203,212,220,0.04));
}
.scene::after {
  content: '';
  position: absolute;
  top: calc(78px + env(safe-area-inset-top));
  left: 50%;
  z-index: 2;
  width: min(260px, 44vw);
  height: 1px;
  pointer-events: none;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(226,232,238,0), rgba(226,232,238,0.18), rgba(226,232,238,0));
  opacity: 0.74;
}

/* ---------------- 홈 · 대표 기억과 프로필 선택 ---------------- */
.home-scroll {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: calc(96px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom));
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.home-empty {
  margin: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 0 12px;
}
.home-empty[hidden] { display: none; }
.home-empty-kicker {
  font-family: var(--serif); font-size: 11px; letter-spacing: 0.42em; text-indent: 0.42em;
  color: rgba(203,212,220,0.5);
}
.home-empty-copy {
  font-family: var(--serif-ko); font-size: 17px; letter-spacing: 0.04em;
  color: rgba(236,231,221,0.86); line-height: 1.6;
}
.home-empty-btn {
  min-height: 46px; padding: 0 26px; cursor: pointer;
  border: 1px solid transparent; border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(24,21,15,0.82), rgba(4,4,4,0.6)) padding-box,
    linear-gradient(135deg, rgba(226,232,238,0.5), rgba(255,255,255,0.06), rgba(107,113,120,0.27)) border-box;
  color: rgba(226,232,238,0.94);
  font-family: var(--serif-ko); font-size: 13px; letter-spacing: 0.1em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 16px 46px rgba(0,0,0,0.4);
  transition: box-shadow 0.25s;
}
.home-empty-btn:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 24px rgba(203,212,220,0.1); }
.home-list {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%; max-width: 980px;
  min-height: calc(100dvh - 114px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin: 0 auto;
}
.home-list[hidden] { display: none; }
.home-profile {
  align-self: center;
  display: grid;
  grid-template-columns: minmax(180px, 232px) minmax(260px, 390px);
  align-items: center;
  justify-content: center;
  gap: 58px;
  min-height: 0;
  padding: 24px 0 34px;
  animation: home-profile-in 0.58s cubic-bezier(0.2, 0.72, 0.24, 1) both;
}
@keyframes home-profile-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.home-profile-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 38%, var(--profile-aura), rgba(0,0,0,0) 47%) padding-box,
    linear-gradient(160deg, rgba(25,25,23,0.96), rgba(3,3,3,0.98)) padding-box,
    linear-gradient(135deg, rgba(236,231,221,0.42), rgba(255,255,255,0.04) 44%, rgba(107,113,120,0.25)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -44px 70px rgba(0,0,0,0.38),
    0 28px 76px rgba(0,0,0,0.56),
    0 0 48px var(--profile-aura);
  transition: border-color 0.28s, box-shadow 0.28s, transform 0.28s;
}
.home-profile-portrait::after {
  content: '';
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border: 1px solid rgba(236,231,221,0.08);
  border-radius: 2px;
}
.home-profile-portrait:hover,
.home-profile-portrait:focus-visible {
  outline: none;
  border-color: rgba(236,231,221,0.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 32px 82px rgba(0,0,0,0.62), 0 0 56px var(--profile-aura);
  transform: translateY(-2px);
}
.home-profile-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.04);
}
.home-profile-initial {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(236,231,221,0.88);
  font-family: var(--serif-ko);
  font-size: 58px;
  font-weight: 400;
  text-shadow: 0 0 34px var(--profile-aura);
}
.home-profile-info { min-width: 0; }
.home-profile-kicker {
  color: rgba(203,212,220,0.62);
  font-family: var(--serif-ko);
  font-size: 11px;
  letter-spacing: 0.24em;
}
.home-profile-info h1 {
  margin: 12px 0 0;
  overflow-wrap: anywhere;
  color: rgba(244,241,234,0.96);
  font-family: var(--serif-ko);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
}
.home-profile-dates {
  margin-top: 10px;
  color: rgba(138,133,121,0.82);
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.11em;
  line-height: 1.6;
}
.home-profile-epitaph {
  max-width: 370px;
  margin-top: 25px;
  color: rgba(236,231,221,0.76);
  font-family: var(--serif-ko);
  font-size: 16px;
  font-style: italic;
  line-height: 1.75;
}
.home-profile-status {
  margin-top: 14px;
  color: rgba(203,212,220,0.66);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.home-profile-status.is-today { color: rgba(236,231,221,0.94); }
.home-profile-open {
  min-width: 178px;
  min-height: 45px;
  margin-top: 28px;
  padding: 0 23px;
  cursor: pointer;
  border: 1px solid rgba(203,212,220,0.26);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(226,232,238,0.1), rgba(226,232,238,0.025));
  color: rgba(236,231,221,0.9);
  font-family: var(--serif-ko);
  font-size: 13px;
  letter-spacing: 0.12em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 16px 40px rgba(0,0,0,0.3);
  transition: background 0.24s, border-color 0.24s, color 0.24s;
}
.home-profile-open:hover,
.home-profile-open:focus-visible {
  outline: none;
  border-color: rgba(236,231,221,0.48);
  background: rgba(226,232,238,0.11);
  color: #fff;
}
.home-selector {
  min-width: 0;
  padding: 14px 2px 2px;
  border-top: 1px solid rgba(203,212,220,0.12);
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(5,5,5,0.46));
}
.home-selector-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px;
}
.home-selector-head span {
  color: rgba(236,231,221,0.82);
  font-family: var(--serif-ko);
  font-size: 12px;
  letter-spacing: 0.12em;
}
.home-selector-head small {
  color: rgba(138,133,121,0.7);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.home-selector-track {
  display: flex;
  gap: 12px;
  min-width: 0;
  padding: 12px 2px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  touch-action: pan-x;
}
.home-selector-track::-webkit-scrollbar { display: none; }
.home-selector-item {
  flex: 0 0 64px;
  width: 64px;
  padding: 0;
  cursor: pointer;
  scroll-snap-align: center;
  border: 0;
  background: none;
  color: rgba(138,133,121,0.72);
  text-align: center;
}
.home-selector-thumb {
  position: relative;
  display: block;
  width: 46px;
  height: 56px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(203,212,220,0.14);
  border-radius: 3px;
  background: linear-gradient(160deg, rgba(24,24,22,0.94), rgba(3,3,3,0.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 22px rgba(0,0,0,0.36);
  transition: border-color 0.24s, box-shadow 0.24s, transform 0.24s;
}
.home-selector-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.66); }
.home-selector-thumb .home-profile-initial {
  font-size: 18px;
  text-shadow: none;
}
.home-selector-name {
  display: block;
  margin-top: 7px;
  overflow: hidden;
  color: inherit;
  font-family: var(--serif-ko);
  font-size: 10px;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-selector-item:hover .home-selector-thumb,
.home-selector-item:focus-visible .home-selector-thumb,
.home-selector-item[aria-pressed="true"] .home-selector-thumb {
  border-color: rgba(236,231,221,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 9px 24px rgba(0,0,0,0.44), 0 0 20px rgba(203,212,220,0.1);
  transform: translateY(-2px);
}
.home-selector-item:focus-visible { outline: none; }
.home-selector-item[aria-pressed="true"] { color: rgba(236,231,221,0.94); }
.home-selector-item[aria-pressed="true"] .home-selector-thumb::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 1px;
  background: rgba(236,231,221,0.72);
  box-shadow: 0 0 8px rgba(236,231,221,0.3);
}

.scene-top, .mem-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 12;
  display: flex; align-items: center;
  padding: calc(24px + env(safe-area-inset-top)) 26px 24px;
}
.wordmark {
  font-family: var(--serif); font-size: 22px; font-weight: 500;
  letter-spacing: 0.28em; text-indent: 0.28em; color: rgba(236,231,221,0.94); opacity: 0.95;
  text-shadow: 0 0 26px rgba(217,226,234,0.12), 0 0 44px rgba(203,212,220,0.08);
}
.scene-top { justify-content: center; }
.scene-left-tools {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top));
  left: 20px;
  z-index: 13;
  display: flex;
  align-items: center;
  gap: 8px;
}
#family-map-chip { display: none !important; }
.scene-hint {
  position: absolute; bottom: calc(40px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center;
  font-size: 10.5px; letter-spacing: 0.38em; color: rgba(217,226,234,0.34); padding: 0 24px;
  animation: breathe 5s ease-in-out infinite;
}
.return-door:not([hidden]) + .scene-hint {
  visibility: hidden;
  opacity: 0;
  animation: none;
}
@keyframes breathe { 0%,100% { opacity: 0.3; } 50% { opacity: 0.66; } }

.return-door {
  position: absolute;
  left: 50%;
  bottom: calc(72px + env(safe-area-inset-bottom));
  z-index: 12;
  width: min(386px, calc(100vw - 44px));
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  transform: translateX(-50%);
  padding: 12px 12px 12px 18px;
  border: 1px solid transparent;
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 0%, rgba(226,232,238,0.14), rgba(0,0,0,0) 48%) padding-box,
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)) padding-box,
    linear-gradient(180deg, rgba(11,10,8,0.82), rgba(2,2,2,0.64)) padding-box,
    linear-gradient(135deg, rgba(226,232,238,0.3), rgba(217,226,234,0.06), rgba(107,113,120,0.2)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    inset 0 -20px 42px rgba(0,0,0,0.23),
    0 24px 70px rgba(0,0,0,0.38),
    0 0 26px rgba(203,212,220,0.045);
  backdrop-filter: blur(17px) saturate(0.68);
}
.return-door::before {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 8px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(226,232,238,0), rgba(226,232,238,0.18), rgba(217,226,234,0.035), rgba(226,232,238,0));
  opacity: 0.74;
}
.return-door::after {
  content: '';
  position: absolute;
  left: 18px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(226,232,238,0.58);
  box-shadow: 0 0 16px rgba(226,232,238,0.38);
  transform: translateY(-50%);
}
.return-door[hidden] { display: none; }
.return-door > div {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding-left: 12px;
}
.return-door span {
  display: block;
  color: rgba(203,212,220,0.72);
  font-family: var(--serif-ko);
  font-size: 9px;
  letter-spacing: 0.24em;
  white-space: nowrap;
}
.return-door strong {
  display: block;
  margin-top: 3px;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--serif-ko);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.return-door small {
  display: block;
  margin-top: 2px;
  min-width: 0;
  overflow: hidden;
  color: rgba(236,231,221,0.54);
  font-size: 10.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.return-door button {
  position: relative;
  z-index: 1;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(203,212,220,0.2);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(203,212,220,0.05), rgba(203,212,220,0.018));
  color: rgba(226,232,238,0.88);
  font-family: var(--serif-ko);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 0 18px rgba(203,212,220,0.03);
  transition: background 0.2s, box-shadow 0.2s, color 0.2s, border-color 0.2s;
}
.return-door button:hover,
.return-door button:focus-visible {
  outline: none;
  color: var(--gold-bright);
  background: rgba(203,212,220,0.07);
  border-color: rgba(226,232,238,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 18px rgba(203,212,220,0.08);
}

.scene-memory-drawer {
  position: absolute; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); z-index: 12;
  width: min(438px, calc(100vw - 34px)); max-height: min(34dvh, 304px);
  transform: translateX(-50%);
  padding: 15px 15px 13px;
  border: 1px solid transparent; border-radius: 24px;
  background:
    radial-gradient(circle at 18% 0%, rgba(226,232,238,0.045), rgba(0,0,0,0) 48%) padding-box,
    linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.004)) padding-box,
    linear-gradient(180deg, rgba(7,7,6,0.36), rgba(1,1,1,0.22)) padding-box,
    linear-gradient(135deg, rgba(226,232,238,0.14), rgba(255,255,255,0.018), rgba(107,113,120,0.1)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.024), 0 18px 58px rgba(0,0,0,0.22), 0 0 26px rgba(203,212,220,0.015);
  backdrop-filter: blur(10px) saturate(0.64);
}
.scene-memory-drawer[hidden] { display: none; }
.scene-memory-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-bottom: 11px;
}
.scene-memory-head p {
  margin-bottom: 3px;
  color: rgba(203,212,220,0.52);
  font-family: var(--serif); font-size: 10.5px; font-style: italic; letter-spacing: 0.24em;
}
.scene-memory-head strong {
  display: block;
  color: rgba(236,231,221,0.92);
  font-family: var(--serif-ko); font-size: 16px; font-weight: 500; letter-spacing: 0.04em;
}
.scene-memory-head span {
  color: rgba(138,133,121,0.78);
  font-family: var(--serif); font-size: 12px; letter-spacing: 0.12em; white-space: nowrap;
}
.scene-family-tabs {
  display: flex; gap: 7px; margin: 0 -2px 10px; overflow-x: auto; padding: 0 2px 2px;
  scrollbar-width: none;
}
.scene-family-tabs::-webkit-scrollbar { display: none; }
.scene-family-tab {
  flex: 0 0 auto; min-height: 30px; padding: 0 12px;
  border: 1px solid rgba(203,212,220,0.12); border-radius: 999px;
  background: rgba(203,212,220,0.035);
  color: rgba(203,212,220,0.68);
  font-family: var(--serif-ko); font-size: 11px; letter-spacing: 0.06em;
}
.scene-family-tab.is-active {
  border-color: rgba(226,232,238,0.34);
  color: rgba(236,231,221,0.92);
  background: rgba(203,212,220,0.08);
}
.scene-memory-list {
  display: grid; gap: 5px;
  max-height: min(20dvh, 156px);
  overflow-y: auto; padding-right: 2px;
}
.scene-memory-item {
  min-height: 43px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 10px 8px 12px;
  border: 1px solid rgba(203,212,220,0.045); border-radius: 14px;
  background: rgba(255,255,255,0.01);
  color: rgba(236,231,221,0.9);
  text-align: left; font-family: var(--serif-ko);
}
.scene-memory-item b {
  display: block; overflow: hidden;
  color: rgba(236,231,221,0.94);
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.03em;
  text-overflow: ellipsis; white-space: nowrap;
}
.scene-memory-item small {
  display: block; overflow: hidden; margin-top: 2px;
  color: rgba(138,133,121,0.82);
  font-size: 11px; letter-spacing: 0.03em;
  text-overflow: ellipsis; white-space: nowrap;
}
.scene-memory-item i {
  color: rgba(203,212,220,0.54);
  font-family: var(--serif); font-size: 11px; font-style: italic; letter-spacing: 0.12em;
}
.scene-memory-item:hover,
.scene-memory-item:focus-visible,
.scene-memory-item.is-selected {
  border-color: rgba(226,232,238,0.14);
  background: rgba(203,212,220,0.032);
}
.scene-memory-item.is-selected i { color: rgba(226,232,238,0.76); }

body[data-memory-layout="dock"] .scene-memory-drawer {
  bottom: calc(10px + env(safe-area-inset-bottom));
  width: min(430px, calc(100vw - 18px));
  max-height: min(25dvh, 206px);
  padding: 10px 11px 9px;
  border-radius: 21px;
  background:
    radial-gradient(circle at 18% 0%, rgba(226,232,238,0.032), rgba(0,0,0,0) 46%) padding-box,
    linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.003)) padding-box,
    linear-gradient(180deg, rgba(7,7,6,0.24), rgba(1,1,1,0.15)) padding-box,
    linear-gradient(135deg, rgba(226,232,238,0.11), rgba(255,255,255,0.012), rgba(107,113,120,0.08)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.018), 0 12px 44px rgba(0,0,0,0.2);
}
body[data-memory-layout="dock"] .scene-memory-head {
  align-items: center;
  margin-bottom: 7px;
}
body[data-memory-layout="dock"] .scene-memory-head p { display: none; }
body[data-memory-layout="dock"] .scene-memory-head strong { font-size: 14px; }
body[data-memory-layout="dock"] .scene-family-tabs { margin-bottom: 7px; }
body[data-memory-layout="dock"] .scene-family-tab {
  min-height: 27px;
  padding: 0 9px;
  font-size: 10px;
}
body[data-memory-layout="dock"] .scene-memory-list {
  gap: 4px;
  max-height: min(11.5dvh, 92px);
}
body[data-memory-layout="dock"] .scene-memory-item {
  min-height: 38px;
  padding: 7px 8px 7px 10px;
  border-radius: 13px;
  background: rgba(255,255,255,0.006);
}

body[data-memory-layout="strip"] .scene-memory-drawer {
  left: 0;
  right: 0;
  bottom: calc(8px + env(safe-area-inset-bottom));
  width: auto;
  max-height: 74px;
  transform: none;
  margin: 0 8px;
  padding: 8px 0 8px 9px;
  border-color: rgba(226,232,238,0.06);
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(12,12,11,0.15), rgba(1,1,1,0.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.012), 0 8px 30px rgba(0,0,0,0.14);
}
body[data-memory-layout="strip"] .scene-memory-head,
body[data-memory-layout="strip"] .scene-family-tabs { display: none; }
body[data-memory-layout="strip"] .scene-memory-list {
  display: flex;
  gap: 6px;
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 9px 0 0;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
body[data-memory-layout="strip"] .scene-memory-list.is-grabbing { cursor: grabbing; }
body[data-memory-layout="strip"] .scene-memory-list::-webkit-scrollbar { display: none; }
body[data-memory-layout="strip"] .scene-memory-item {
  flex: 0 0 104px;
  min-height: 48px;
  display: block;
  padding: 8px 9px;
  border-radius: 14px;
  background: rgba(255,255,255,0.006);
}
body[data-memory-layout="strip"] .scene-memory-item b { font-size: 12px; }
body[data-memory-layout="strip"] .scene-memory-item small { font-size: 9.5px; }
body[data-memory-layout="strip"] .scene-memory-item i { display: none; }

body[data-memory-layout="sheet"] .scene-memory-drawer {
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: auto;
  max-height: min(46dvh, 360px);
  transform: none;
  padding: 16px 15px 14px;
  border-radius: 26px 26px 22px 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(226,232,238,0.05), rgba(0,0,0,0) 44%) padding-box,
    linear-gradient(180deg, rgba(12,12,11,0.58), rgba(2,2,2,0.36)) padding-box,
    linear-gradient(135deg, rgba(226,232,238,0.16), rgba(255,255,255,0.02), rgba(107,113,120,0.1)) border-box;
}
body[data-memory-layout="sheet"] .scene-memory-list {
  max-height: min(28dvh, 224px);
}

.scene-memory-drawer:not([hidden]) ~ .scene-hint,
.return-door:not([hidden]) ~ .scene-hint {
  display: none;
}

/* 한 점의 빛 — 기억 공간이 정확히 하나일 때의 조용한 두 줄 (헤드/탭 숨김, 레이아웃 무관) */
.scene-memory-drawer.is-solo .scene-memory-head,
.scene-memory-drawer.is-solo .scene-family-tabs { display: none; }
.scene-memory-drawer.is-solo .scene-memory-list {
  display: block; max-height: none; overflow: visible; padding: 2px 6px 3px;
}
.scene-solo-note {
  display: block; width: 100%;
  padding: 4px 8px; border: 0; background: none; text-align: center;
  font-family: var(--serif-ko); color: inherit; cursor: pointer;
}
.scene-solo-note b {
  display: block;
  color: rgba(236,231,221,0.92);
  font-family: var(--serif-ko); font-weight: 500; font-size: 14.5px; letter-spacing: 0.04em;
}
.scene-solo-note small {
  display: block; margin-top: 5px;
  color: rgba(203,212,220,0.5);
  font-family: var(--serif); font-size: 9.5px; font-style: italic; letter-spacing: 0.24em; text-indent: 0.24em;
}

.orb-label {
  position: fixed; z-index: 13; pointer-events: none;
  transform: translate(-50%, -160%); opacity: 0;
  transition: opacity 0.4s ease;
  text-align: center; white-space: nowrap;
}
.orb-label .ol-name { font-family: var(--serif-ko); font-size: 17px; color: var(--ink); }
.orb-label .ol-label { font-size: 10.5px; letter-spacing: 0.28em; color: var(--gold);
  text-transform: uppercase; margin-top: 3px; }

/* ---------------- 추모 공간 ---------------- */
.memorial {
  position: fixed; inset: 0; z-index: 20;
  background: linear-gradient(180deg, #020202 0%, #000 52%, #020201 100%);
  opacity: 0; visibility: hidden; transition: opacity 0.9s ease, visibility 0.9s;
}
.memorial[aria-hidden="false"] { opacity: 1; visibility: visible; }
.mem-top { justify-content: space-between; z-index: 22; }
.memorial .mem-top { isolation: isolate; }
.memorial .mem-top::before {
  content: ''; position: absolute; inset: 0 0 -42px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.86), rgba(0,0,0,0.52) 58%, rgba(0,0,0,0));
  backdrop-filter: blur(5px);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
}
.back-btn, .settings-open {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(12,12,11,0.78), rgba(3,3,3,0.64)) padding-box,
    linear-gradient(135deg, rgba(226,232,238,0.24), rgba(255,255,255,0.045), rgba(217,226,234,0.08)) border-box;
  color: var(--muted); cursor: pointer; transition: all 0.25s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 46px rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);
}
.back-btn { font-size: 18px; }
.back-btn:hover, .settings-open:hover { color: var(--gold); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 24px rgba(203,212,220,0.11); }
.mem-background-edit {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.24s, text-shadow 0.24s, opacity 0.24s;
}
.mem-background-edit:hover,
.mem-background-edit:focus-visible {
  color: rgba(226,232,238,0.82);
  text-shadow: 0 0 18px rgba(203,212,220,0.13);
}
.mem-background-edit:disabled { opacity: 0.36; cursor: wait; }
.mem-tools { display: flex; align-items: center; gap: 10px; }
.settings-open {
  width: 38px; height: 38px; font-size: 18px; line-height: 1;
  display: grid; place-items: center;
}
/* 우상단 계정 모노그램 — 내 정보 진입 */
.account-monogram {
  position: absolute; top: calc(20px + env(safe-area-inset-top)); right: 20px; z-index: 13;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(12,12,11,0.78), rgba(3,3,3,0.64)) padding-box,
    linear-gradient(135deg, rgba(226,232,238,0.28), rgba(255,255,255,0.05), rgba(217,226,234,0.1)) border-box;
  color: rgba(236,231,221,0.9); cursor: pointer;
  font-family: var(--serif); font-size: 15px; letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 40px rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);
  transition: color 0.22s, box-shadow 0.22s;
}
.account-monogram:hover,
.account-monogram:focus-visible {
  color: var(--gold); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 24px rgba(203,212,220,0.12);
}

.mem-scroll {
  position: absolute; inset: 0; overflow-y: auto;
  padding: calc(104px + env(safe-area-inset-top)) 24px calc(144px + env(safe-area-inset-bottom));
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent;
  -webkit-overflow-scrolling: touch;
}
.mem-scroll::-webkit-scrollbar { width: 6px; }
.mem-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.mem-hero { text-align: center; max-width: 640px; margin: 0 auto 8px; }
.portrait {
  width: 132px; height: 132px; border-radius: 50%; margin: 0 auto 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  background:
    radial-gradient(circle at 50% 38%, rgba(203,212,220,0.18), rgba(0,0,0,0) 60%) padding-box,
    radial-gradient(circle at 50% 50%, #15120c, #050505 70%) padding-box,
    var(--edge-premium) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 0 34px rgba(0,0,0,0.72),
    0 0 54px rgba(203, 212, 220, 0.16),
    0 22px 64px rgba(0,0,0,0.38);
  position: relative;
}
.portrait::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid rgba(203,212,220,0.09);
  box-shadow: 0 0 0 1px rgba(203,212,220,0.08), 0 0 46px rgba(203,212,220,0.09);
  animation: haloPulse 5s ease-in-out infinite;
}
@keyframes haloPulse { 0%,100%{opacity:.4} 50%{opacity:1} }
#portrait-initial { font-family: var(--serif); font-size: 54px; font-weight: 500;
  color: var(--gold-bright); text-shadow: 0 0 24px rgba(226,232,238,0.4); }

.mem-label { font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px; }
.mem-name { font-family: var(--serif-ko); font-weight: 500; font-size: 40px;
  letter-spacing: 0.045em; line-height: 1.1;
  text-shadow: 0 0 34px rgba(217,226,234,0.08);
}
.mem-dates { font-family: var(--serif); font-size: 19px; color: var(--muted);
  letter-spacing: 0.08em; margin-top: 12px; }
.mem-epitaph { font-style: italic; font-family: var(--serif); font-size: 19px;
  color: rgba(236,231,221,0.78); margin: 24px auto 0; max-width: 480px; line-height: 1.72; }

.candle-wrap { text-align: center; margin: 58px 0 8px; }
.candle {
  position: relative; width: 84px; height: 84px; margin: 0 auto;
  background: none; border: none; cursor: pointer; display: block;
}

/* 헤일로 — 점등 시 넓고 은은한 문실버 배광 + 브레스 (low-stim/reduced-motion에서 정지) */
.candle-glow {
  position: absolute; top: 50%; left: 50%; z-index: 1;
  transform: translate(-50%, -50%) scale(0.62); opacity: 0;
  width: 210px; height: 210px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle,
    rgba(217,226,234,0.2) 0%, rgba(203,212,220,0.1) 28%,
    rgba(203,212,220,0.03) 50%, rgba(203,212,220,0) 70%);
  transition: transform 1s ease, opacity 1s ease;
}
.candle.lit .candle-glow {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
  animation: glowBreathe 5s ease-in-out infinite;
}
@keyframes glowBreathe { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }

/* 베젤 링 — 티타늄 그라데이션 림(1.5px), 내부 딥블랙 */
.candle-body {
  position: absolute; inset: 0; z-index: 2; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, #070809 0%, #040404 60%, #0b0d0f 100%) padding-box,
    conic-gradient(from 208deg,
      rgba(226,232,238,0.92), rgba(107,113,120,0.34) 24%,
      rgba(203,212,220,0.78) 50%, rgba(90,96,103,0.3) 73%,
      rgba(226,232,238,0.88) 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 0 24px rgba(0,0,0,0.82),
    0 6px 24px rgba(0,0,0,0.5);
}

/* 코어 — 중앙 문실버 발광점 (미점등: 꺼진 잉걸불, 점등: 밝은 블룸) */
.candle-flame {
  position: absolute; top: 50%; left: 50%; z-index: 4;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle,
    #ffffff 0%, var(--moon) 44%, rgba(217,226,234,0.18) 74%, rgba(217,226,234,0) 100%);
  opacity: 0.42; filter: blur(0.4px);
  transition: width 0.7s ease, height 0.7s ease, opacity 0.7s ease, box-shadow 0.7s ease;
}
.candle.lit .candle-flame {
  width: 22px; height: 22px; opacity: 1;
  box-shadow:
    0 0 18px 4px rgba(217,226,234,0.5),
    0 0 44px 13px rgba(203,212,220,0.22);
}
.candle-cta { margin-top: 16px; font-size: 12px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gold); transition: color 0.3s; }
.candle.lit ~ .candle-cta { color: var(--muted); }

/* 섹션 공통 */
.section { max-width: 640px; margin: 66px auto 0; }
.section-head {
  display: flex; align-items: end; justify-content: space-between; gap: 18px;
  padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(203,212,220,0.44), rgba(255,255,255,0.048), transparent) 1;
}
.section-kicker {
  font-family: var(--serif); font-style: italic; font-size: 12px; letter-spacing: 0.3em;
  color: rgba(203,212,220,0.78); margin-bottom: 7px;
}
.section-title {
  font-family: var(--serif-ko); font-size: 23px; font-weight: 400; letter-spacing: 0.04em;
  color: rgba(236,231,221,0.92);
}
.section-count {
  flex: 0 0 auto; color: rgba(107,113,120,0.82);
  font-family: var(--serif-ko); font-size: 12px; letter-spacing: 0.14em;
  white-space: nowrap; padding-bottom: 3px;
}
.muted-count { color: var(--gold-deep); letter-spacing: 0.1em; }

/* 카운터 라벨("한 문장", 숫자 카운터 등)이 좁은 flex 폭에서 "한 문/장"처럼 세로로 꺾이지 않도록.
   섹션 헤더 카운트(.section-count)는 Phase 2에서 별도 처리하므로 제외 */
[id$="-count"]:not(.section-count) { white-space: nowrap; flex-shrink: 0; }

/* 타임라인 */
.timeline { display: grid; gap: 12px; scroll-margin-top: 118px; }
.tl-item {
  position: relative; display: grid; grid-template-columns: 88px 1fr; gap: 18px; align-items: start;
  min-height: 94px; overflow: hidden; padding: 18px 20px 18px 18px;
  border: 1px solid transparent; border-radius: 18px;
  background:
    radial-gradient(110% 160% at 0% 0%, rgba(203,212,220,0.075), rgba(0,0,0,0) 42%) padding-box,
    linear-gradient(180deg, rgba(255,255,255,0.026), rgba(255,255,255,0.009)) padding-box,
    linear-gradient(180deg, rgba(9,9,8,0.62), rgba(3,3,3,0.46)) padding-box,
    linear-gradient(135deg, rgba(203,212,220,0.16), rgba(255,255,255,0.028), rgba(217,226,234,0.04)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.038), 0 18px 42px rgba(0,0,0,0.18);
}
.tl-item::before {
  content: var(--chapter-index); position: absolute; right: 18px; top: 9px;
  font-family: var(--serif); font-size: 46px; line-height: 1; letter-spacing: 0.06em;
  color: rgba(203,212,220,0.045); pointer-events: none;
}
.tl-item::after {
  content: ''; position: absolute; left: 88px; top: 18px; bottom: 18px; width: 1px;
  background: linear-gradient(180deg, rgba(203,212,220,0.42), rgba(203,212,220,0.055), transparent);
}
.tl-date {
  font-family: var(--serif); font-size: 20px; color: var(--gold); letter-spacing: 0.08em;
  padding-top: 2px; text-align: center;
}
.tl-copy { position: relative; z-index: 1; min-width: 0; padding-left: 2px; }
.tl-title {
  font-family: var(--serif-ko); font-size: 17px; color: var(--ink);
  margin-bottom: 8px; font-weight: 500; letter-spacing: 0.02em;
}
.tl-desc { font-size: 13.5px; color: rgba(236,231,221,0.58); line-height: 1.72; }

/* 갤러리 */
.gallery-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.gallery-add {
  flex: 0 0 auto; min-height: 32px; padding: 6px 10px; border: 1px solid rgba(226,232,238,0.14);
  border-radius: 16px; background: rgba(255,255,255,0.025); color: rgba(236,231,221,0.76);
  font-family: var(--serif-ko); font-size: 10.5px; cursor: pointer;
}
.gallery-add span { margin-right: 3px; color: var(--gold); font-size: 13px; }
.gallery-add:disabled { opacity: 0.46; cursor: default; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; scroll-margin-top: 118px; }
.ph { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 11px;
  appearance: none; padding: 0; font: inherit; color: inherit;
  border: 1px solid rgba(255,255,255,0.04);
  background: #0c0c0c; cursor: pointer; animation: phIn 0.6s backwards;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 16px 36px rgba(0,0,0,0.24);
}
/* 액자 느낌 — 사진 위 골드 헤어라인 이너 프레임 (img 위에 올려 보이도록 ::after 사용) */
.ph:not(.is-archive-door)::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(226,232,238,0.14);
  transition: box-shadow 0.3s ease;
}
.ph:not(.is-archive-door):hover::after { box-shadow: inset 0 0 0 1px rgba(226,232,238,0.26); }
.ph.is-featured {
  grid-column: span 2; grid-row: span 2; border-radius: 18px 11px 11px 18px;
  border-color: rgba(203,212,220,0.16);
}
.ph.is-featured::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 48%, rgba(0,0,0,0.34));
  pointer-events: none;
}
.ph img { width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity 0.6s ease, transform 0.5s ease; filter: grayscale(0.14) contrast(1.03) saturate(0.88); }
.ph img.loaded { opacity: 0.9; }
.ph:hover img { transform: scale(1.06); opacity: 1; }
@keyframes phIn { from { opacity: 0; transform: scale(0.97); } }
/* 보관실 문 — 딥블랙 글라스 + 실버 헤어라인 (조용한 초대, 셀당 1개) */
.ph.is-archive-door {
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  border-color: transparent;
  background:
    radial-gradient(120% 96% at 50% 42%, rgba(203,212,220,0.05), rgba(0,0,0,0) 62%) padding-box,
    linear-gradient(180deg, #0b0b0b, #060606) padding-box,
    var(--edge-soft) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 16px 34px rgba(0,0,0,0.26);
  transition: box-shadow 0.35s ease, filter 0.35s ease;
}
.ph.is-archive-door b {
  font-family: var(--serif-ko); font-weight: 500;
  font-size: 21px; line-height: 1;
  letter-spacing: 0.01em;
  color: rgba(226,232,238,0.9);
}
.ph.is-archive-door i {
  font-style: normal;
  font-size: 9px; line-height: 1;
  letter-spacing: 0.22em; text-indent: 0.22em;
  color: rgba(217,226,234,0.42);
}
.ph.is-archive-door:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.075), 0 18px 40px rgba(0,0,0,0.32), 0 0 18px rgba(203,212,220,0.05);
  filter: brightness(1.05);
}

/* 하이드레이션 로딩 — 문실버 저광도 셰이드 셀 (은은한 펄스, reduced-motion/low-stim에서 정지) */
.ph.is-shade {
  cursor: default;
  border-color: rgba(203,212,220,0.06);
  background: linear-gradient(135deg, rgba(203,212,220,0.05), rgba(203,212,220,0.015));
  animation: shadePulse 2.2s ease-in-out infinite;
}
.tl-item.is-shade {
  display: block; min-height: 0;
  animation: shadePulse 2.2s ease-in-out infinite;
}
.tl-item.is-shade::before,
.tl-item.is-shade::after { content: none; }
.tl-shade {
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(203,212,220,0.09), rgba(203,212,220,0.03));
}
.tl-shade-date { width: 46px; height: 11px; margin-bottom: 12px; }
.tl-shade-title { width: 60%; height: 13px; }
@keyframes shadePulse {
  0%, 100% { opacity: 0.34; }
  50% { opacity: 0.62; }
}
body.is-low-stimulation .tl-item.is-shade { animation: none !important; }
body.is-low-stimulation .ph.is-shade { animation: none !important; }

/* 하이드레이션 실패 — 조용한 재시도 한 줄 */
.section-retry {
  grid-column: 1 / -1;
  display: block; width: 100%;
  padding: 14px 10px; border: 0; background: none;
  color: rgba(203,212,220,0.62);
  font-family: var(--serif-ko); font-size: 12.5px; letter-spacing: 0.04em;
  text-align: center; cursor: pointer;
}
.section-retry:hover,
.section-retry:focus-visible { color: rgba(226,232,238,0.86); }

body.is-low-stimulation {
  --shadow-premium: inset 0 1px 0 rgba(255,255,255,0.045), inset 0 -18px 38px rgba(0,0,0,0.22), 0 18px 64px rgba(0,0,0,0.5), 0 0 18px rgba(203,212,220,0.028);
}
body.is-low-stimulation #scene-canvas,
body.is-low-stimulation .mem-bg,
body.is-low-stimulation .ph img,
body.is-low-stimulation .export-stage,
body.is-low-stimulation .portrait {
  filter: saturate(0.72) brightness(0.78) contrast(0.96);
}
body.is-low-stimulation .scene::before {
  background:
    linear-gradient(180deg, rgba(10,10,9,0.58), rgba(0,0,0,0) 34%, rgba(0,0,0,0.72) 100%),
    linear-gradient(90deg, rgba(217,226,234,0.026), rgba(0,0,0,0) 24%, rgba(0,0,0,0) 76%, rgba(203,212,220,0.026));
}
body.is-low-stimulation .intro-spark,
body.is-low-stimulation .return-door,
body.is-low-stimulation .portrait,
body.is-low-stimulation .sound-toggle.on {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 14px 42px rgba(0,0,0,0.34);
}
body.is-low-stimulation .scene-hint,
body.is-low-stimulation .intro-spark,
body.is-low-stimulation .portrait::after,
body.is-low-stimulation .sound-toggle.on .snd-ic,
body.is-low-stimulation .grain,
body.is-low-stimulation .bloom.flash,
body.is-low-stimulation .ph,
body.is-low-stimulation .candle.lit .candle-glow {
  animation: none !important;
}
body.is-low-stimulation .grain { opacity: 0.018; }
body.is-low-stimulation .scene-hint,
body.is-low-stimulation .return-door small,
body.is-low-stimulation .mem-epitaph {
  opacity: 0.72;
}
body.is-low-stimulation .mem-bg.on { opacity: 0.64; }
body.is-low-stimulation .ph img.loaded { opacity: 0.76; }
body.is-low-stimulation .bloom.flash { opacity: 0.22; }
body.is-low-stimulation * {
  transition-duration: 0.16s !important;
}

.mem-foot { text-align: center; font-size: 11px; letter-spacing: 0.22em; color: var(--muted);
  margin: 56px auto 0; opacity: 0.6; }

/* ---------------- 플랜 토글 (데모) ---------------- */
.plan-toggle {
  position: fixed; bottom: calc(18px + env(safe-area-inset-bottom)); right: 18px; z-index: 30;
  display: none; align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 12px; border-radius: 999px; border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(8,8,7,0.48), rgba(1,1,1,0.42)) padding-box,
    linear-gradient(135deg, rgba(226,232,238,0.11), rgba(255,255,255,0.026), rgba(217,226,234,0.04)) border-box;
  backdrop-filter: blur(12px) saturate(0.72);
  font-size: 9.5px; letter-spacing: 0.22em; color: rgba(138,133,121,0.58);
  opacity: 0.46; transition: opacity 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.is-debug-mode .plan-toggle { display: none; }
.plan-toggle:hover { opacity: 0.82; box-shadow: 0 0 20px rgba(203,212,220,0.055); }
.plan-toggle::before { content: '보관'; font-size: 7.5px; color: rgba(107,113,120,0.72); letter-spacing: 0.2em; }
.plan-state { color: rgba(203,212,220,0.74); }

/* ---------------- 계정 / 멤버십 / 보존 설정 ---------------- */
.settings {
  position: fixed; inset: 0; z-index: 54;
  display: block;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 0%, rgba(203,212,220,0.055), transparent 38%),
    linear-gradient(180deg, rgba(7,7,7,0.98), #000 64%);
  opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s;
}
.settings[aria-hidden="false"] { opacity: 1; visibility: visible; }
.settings-card {
  position: relative; width: min(500px, calc(100vw - 44px)); min-height: 100dvh;
  margin: 0 auto;
  padding: calc(76px + env(safe-area-inset-top)) 0 calc(40px + env(safe-area-inset-bottom));
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: translateY(10px); transition: transform 0.42s cubic-bezier(0.22,1,0.36,1);
}
.settings-card::before, .upsell-card::before, .export-card::before, .create-card::before, .pcrop-card::before {
  content: ''; position: absolute; left: 32px; right: 32px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226,232,238,0.62), transparent);
  opacity: 0.72; pointer-events: none;
}
.settings-card::before { display: none; }
.settings[aria-hidden="false"] .settings-card { transform: translateY(0); }
.settings-close, .settings-back {
  position: fixed; top: calc(22px + env(safe-area-inset-top)); width: 36px; height: 36px; border-radius: 50%;
  z-index: 2; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.24); color: rgba(203,212,220,0.58); cursor: pointer; font-size: 13px;
}
.settings-close { right: 24px; }
.settings-back { left: 24px; font-size: 17px; }
.settings-back[hidden] { display: none; }
.settings-title {
  font-family: var(--serif-ko); font-weight: 500; font-size: 24px; text-align: center; margin-bottom: 8px;
  text-shadow: 0 0 28px rgba(217,226,234,0.08);
}
.settings-identity {
  text-align: center;
  margin: 0 auto 6px;
}
.settings-identity-name {
  color: var(--ink); font-size: 13.5px; font-weight: 500; letter-spacing: 0.04em;
}
.settings-identity-meta {
  color: var(--muted); font-size: 11.5px; letter-spacing: 0.05em; margin-top: 3px;
}
.settings-view[hidden] { display: none; }
.settings-menu { margin-top: 26px; border-top: 1px solid rgba(226,232,238,0.1); }
.settings-menu button {
  width: 100%; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 2px; border: 0; border-bottom: 1px solid rgba(226,232,238,0.08);
  background: none; color: var(--ink); text-align: left; cursor: pointer;
}
.settings-menu button > span { display: grid; gap: 5px; font-family: var(--serif-ko); font-size: 15px; }
.settings-menu button small { color: rgba(138,133,121,0.68); font-family: var(--sans); font-size: 10.5px; font-weight: 400; }
.settings-menu button i { color: rgba(203,212,220,0.48); font-family: var(--serif); font-size: 25px; font-style: normal; }
.settings-menu button:focus-visible { outline: 1px solid rgba(203,212,220,0.45); outline-offset: 3px; }
/* 헤어라인 목록 — 카드는 보관 증서 하나만, 나머지 설정은 이 행으로 평평하게 */
.settings-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 18px 2px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(226,232,238,0.13), rgba(217,226,234,0.04), transparent) 1;
}
.settings-row-text { flex: 1 1 200px; min-width: 0; }
.settings-row-action {
  flex: 0 1 auto; margin-left: auto;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; flex-wrap: wrap;
}
.settings-row-title {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px;
  color: var(--ink); font-size: 15.5px; font-weight: 500; letter-spacing: 0.03em; margin-bottom: 5px;
}
.settings-row-desc {
  color: rgba(236,231,221,0.6); font-size: 12.5px; line-height: 1.6; word-break: keep-all;
}
.settings-row-status {
  font-family: var(--serif-ko); font-size: 11px; font-weight: 400; letter-spacing: 0.1em; color: var(--gold);
}
.settings-row--stack .settings-row-text { flex: 1 1 100%; }
.settings-card .preserve-card { margin: 10px 0 4px; }
.settings-membership-certificate {
  margin-top: 28px; padding: 28px 24px; border: 1px solid rgba(226,232,238,0.12); border-radius: 6px;
  background: rgba(14,14,14,0.32); text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 18px 46px rgba(0,0,0,0.2);
  -webkit-backdrop-filter: blur(16px) saturate(0.7); backdrop-filter: blur(16px) saturate(0.7);
}
.settings-membership-certificate span { display: block; color: rgba(138,133,121,0.66); font-size: 10px; letter-spacing: 0.2em; }
.settings-membership-certificate strong { display: block; margin-top: 12px; color: var(--ink); font-family: var(--serif-ko); font-size: 22px; font-weight: 500; }
.settings-membership-certificate p { margin-top: 8px; color: rgba(236,231,221,0.55); font-size: 11.5px; }
.settings-membership { padding: 22px 0; border-bottom: 1px solid rgba(226,232,238,0.06); }
.settings-membership-button {
  width: 100%; min-height: 62px; display: grid; place-items: center; align-content: center; gap: 5px;
  padding: 12px 18px; border: 1px solid rgba(226,232,238,0.12); border-radius: 6px;
  background: rgba(18,18,18,0.42); color: rgba(236,231,221,0.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 14px 36px rgba(0,0,0,0.2);
  -webkit-backdrop-filter: blur(14px) saturate(0.72); backdrop-filter: blur(14px) saturate(0.72);
  font-family: var(--serif-ko); cursor: pointer;
}
.settings-membership-button span { font-size: 14px; }
.settings-membership-button small { color: rgba(138,133,121,0.66); font-size: 10px; font-weight: 400; }
.settings-membership-button small b { color: rgba(203,212,220,0.72); font-weight: 400; }
.settings-membership-button:focus-visible { outline: 1px solid rgba(203,212,220,0.5); outline-offset: 3px; }
.settings-membership-note { color: rgba(236,231,221,0.5); font-size: 11.5px; line-height: 1.7; text-align: center; }
.settings-section-intro { margin-top: 42px; padding: 0 2px 16px; }
.settings-section-intro span { color: rgba(138,133,121,0.68); font-size: 10px; letter-spacing: 0.18em; }
.settings-section-intro h4 { margin-top: 9px; color: var(--ink); font-family: var(--serif-ko); font-size: 19px; font-weight: 500; }
.settings-section-intro p { margin-top: 7px; color: rgba(236,231,221,0.54); font-size: 11.5px; line-height: 1.65; word-break: keep-all; }
.settings-legal {
  display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 24px 2px 8px;
  border-top: 1px solid rgba(226,232,238,0.08);
}
.settings-legal :is(a, button) {
  padding: 0; border: 0; background: none; color: rgba(138,133,121,0.68);
  font: inherit; font-size: 10.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.settings-legal .settings-legal-danger { color: rgba(190,135,135,0.72); }
/* 내 정보 — 계정 사실 행 (헤어라인) */
.settings-facts { margin: 22px 0 0; border-top: 1px solid rgba(226,232,238,0.1); }
.settings-fact {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 48px; padding: 0 2px;
  border: 0; border-bottom: 1px solid rgba(226,232,238,0.07);
  background: none; text-align: left; font: inherit;
}
.settings-fact > span { flex: 0 0 auto; color: rgba(138,133,121,0.72); font-size: 11px; letter-spacing: 0.04em; }
.settings-fact > b {
  min-width: 0; margin-left: auto; color: rgba(236,231,221,0.82); font-weight: 400; font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.settings-fact--action { cursor: pointer; }
.settings-fact--action > i {
  flex: 0 0 auto; color: rgba(203,212,220,0.48); font-family: var(--serif); font-size: 20px; font-style: normal;
}
.settings-fact--action:focus-visible { outline: 1px solid rgba(203,212,220,0.45); outline-offset: 3px; }
/* 계정 액션 — 로그아웃(일반) / 계정 삭제(분리, 저채도 danger) */
.settings-account-actions {
  display: flex; padding: 18px 2px 2px; border-top: 1px solid rgba(226,232,238,0.08);
}
.settings-account-actions button {
  padding: 0; border: 0; background: none; color: rgba(236,231,221,0.7);
  font: inherit; font-family: var(--serif-ko); font-size: 13px; cursor: pointer;
}
.settings-account-actions button:hover,
.settings-account-actions button:focus-visible { color: rgba(236,231,221,0.92); }
.settings-danger { padding: 14px 2px 2px; }
.settings-danger button {
  padding: 0; border: 0; background: none; color: rgba(190,135,135,0.6);
  font: inherit; font-size: 10.5px; letter-spacing: 0.04em; cursor: pointer;
}
.settings-danger button:hover,
.settings-danger button:focus-visible { color: rgba(190,135,135,0.84); }
/* 푸터 — 브랜드 한 줄 + 극소형 버전 */
.settings-foot {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(226,232,238,0.06);
  text-align: center; color: rgba(138,133,121,0.6); font-size: 11px; letter-spacing: 0.06em;
}
.settings-foot small {
  display: block; margin-top: 6px; color: rgba(138,133,121,0.42);
  font-size: 9px; letter-spacing: 0.14em;
}
/* 보관 현황 — 조용한 가로 나열 (0인 항목은 JS에서 숨김) */
.settings-storage {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin: 14px 0 2px; padding: 14px 2px;
  border-top: 1px solid rgba(226,232,238,0.08);
  border-bottom: 1px solid rgba(226,232,238,0.08);
  color: rgba(236,231,221,0.78);
  font-family: var(--serif-ko); font-size: 12px; letter-spacing: 0.04em;
}
.settings-storage[hidden] { display: none !important; }
.settings-storage-sep { color: rgba(138,133,121,0.5); }
.settings-storage-item { white-space: nowrap; }
/* 대화와 AI 원칙 뷰 — 정적 세리프 본문 */
.settings-ai-copy { margin-top: 22px; display: grid; gap: 18px; }
.settings-ai-copy p {
  color: rgba(236,231,221,0.72);
  font-family: var(--serif-ko); font-size: 13.5px; line-height: 1.9; letter-spacing: 0.01em;
  word-break: keep-all;
}
.app-notice {
  position: fixed; z-index: 90; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  width: min(420px, calc(100vw - 32px)); transform: translate(-50%, 14px);
  padding: 12px 16px; border: 1px solid rgba(226,232,238,0.13); border-radius: 8px;
  background: rgba(10,10,10,0.92); color: rgba(236,231,221,0.88);
  box-shadow: 0 16px 48px rgba(0,0,0,0.42); font-size: 12px; line-height: 1.55; text-align: center;
  opacity: 0; visibility: hidden; transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.app-notice[aria-hidden="false"] { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.app-notice.is-error { border-color: rgba(198,104,104,0.28); color: rgba(235,189,189,0.92); }
.sensory-toggle {
  min-width: 74px;
  min-height: 40px;
  border: 1px solid rgba(217,226,234,0.12);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.032), rgba(255,255,255,0.01)),
    rgba(0,0,0,0.18);
  color: rgba(236,231,221,0.62);
  font-family: var(--serif-ko);
  font-size: 12px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
}
.sensory-toggle.is-on {
  border-color: rgba(203,212,220,0.38);
  background: rgba(203,212,220,0.09);
  color: var(--gold-bright);
  box-shadow: 0 0 22px rgba(203,212,220,0.1);
}
.sensory-toggle:hover,
.sensory-toggle:focus-visible {
  outline: none;
  border-color: rgba(203,212,220,0.34);
  color: var(--gold);
}
/* ---------------- 프리미엄 시트 ---------------- */
.upsell {
  position: fixed; inset: 0; z-index: 58; display: flex; align-items: center; justify-content: center;
  padding: calc(22px + env(safe-area-inset-top)) 16px calc(22px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 28%, rgba(226,232,238,0.075), rgba(0,0,0,0) 34%),
    linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.88)),
    rgba(0,0,0,0.6);
  backdrop-filter: blur(9px);
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s;
}
.upsell[aria-hidden="false"] { opacity: 1; visibility: visible; }
.upsell-card {
  position: relative; width: min(468px, 92vw); max-height: calc(100dvh - 44px); margin: 0;
  overflow-x: hidden; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.14) transparent;
  background:
    radial-gradient(118% 92% at 50% 0%, rgba(226,232,238,0.13), rgba(0,0,0,0) 46%) padding-box,
    radial-gradient(90% 85% at 100% 100%, rgba(217,226,234,0.05), rgba(0,0,0,0) 54%) padding-box,
    var(--surface-premium);
  border: 1px solid transparent;
  border-radius: 28px; padding: 42px 32px 40px;
  box-shadow: var(--shadow-premium);
  transform: translateY(14px) scale(0.985); transition: transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.upsell-card::after {
  content: ''; position: absolute; inset: 18px; border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.03); pointer-events: none;
}
.upsell[aria-hidden="false"] .upsell-card { transform: translateY(0) scale(1); }
.upsell-close { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid var(--hair); background: none; color: var(--muted);
  cursor: pointer; font-size: 13px; z-index: 2; }
.upsell-kicker {
  position: relative; z-index: 1;
  font-family: var(--serif-ko);
  font-size: 11.5px;
  font-style: normal;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-align: center;
}
.upsell-title {
  position: relative; z-index: 1;
  max-width: 390px; margin: 12px auto 10px;
  font-family: var(--serif-ko); font-weight: 500; font-size: 27px; line-height: 1.35;
  text-align: center; text-shadow: 0 0 30px rgba(217,226,234,0.08);
  word-break: keep-all;
}
.upsell-copy {
  position: relative; z-index: 1;
  max-width: 352px; margin: 0 auto 22px;
  color: rgba(180,176,166,0.86); font-size: 12.5px; line-height: 1.7; text-align: center;
}
.upsell-membership {
  position: relative; z-index: 1;
  display: grid; gap: 5px; justify-items: center;
  margin: 0 0 16px; padding: 40px 20px 18px;
  border: 1px solid transparent; border-radius: 20px;
  background:
    radial-gradient(circle at 50% 9%, rgba(226,232,238,0.12), rgba(0,0,0,0) 30%) padding-box,
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)) padding-box,
    linear-gradient(180deg, rgba(10,9,7,0.68), rgba(0,0,0,0.42)) padding-box,
    linear-gradient(135deg, rgba(226,232,238,0.24), rgba(255,255,255,0.035), rgba(107,113,120,0.16), rgba(217,226,234,0.055)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    inset 0 -20px 44px rgba(0,0,0,0.22),
    0 14px 38px rgba(0,0,0,0.2);
  overflow: hidden;
}
/* 증서 더블 헤어라인 — 외곽 1px(테두리) + 안쪽 오프셋 라인 */
.upsell-membership::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(226,232,238,0.11);
  border-radius: 16px;
  box-shadow: inset 0 0 0 3px rgba(226,232,238,0.028);
  pointer-events: none;
}
/* 상단 중앙 씰 마크 — Lumora 모노그램(L) */
.upsell-membership::after {
  content: 'L';
  position: absolute;
  top: 12px;
  left: 50%;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(226,232,238,0.4);
  background:
    radial-gradient(circle at 50% 30%, rgba(226,232,238,0.22), rgba(10,8,4,0.44));
  color: rgba(226,232,238,0.94);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-indent: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 0 16px rgba(226,232,238,0.22);
  transform: translateX(-50%);
  pointer-events: none;
}
.upsell-membership span {
  position: relative;
  color: rgba(203,212,220,0.82);
  font-family: var(--serif-ko);
  font-size: 10.5px;
  letter-spacing: 0.22em;
}
.upsell-membership b {
  position: relative;
  color: var(--ink); font-family: var(--serif-ko); font-size: 27px; font-weight: 500; letter-spacing: 0.08em;
  text-shadow: 0 0 26px rgba(226,232,238,0.08);
  word-break: keep-all;
}
.upsell-membership i {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  color: rgba(236,231,221,0.52);
  font-family: var(--serif-ko);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.06em;
}
.upsell-membership em {
  display: inline-block;
  padding: 6px 16px 7px;
  border: 1px solid rgba(236,231,221,0.26);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(236,231,221,0.12), rgba(236,231,221,0.035)),
    rgba(0,0,0,0.2);
  color: rgba(255,247,224,0.95);
  font-family: var(--serif-ko);
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22), inset 0 0 18px rgba(236,231,221,0.04);
}
.upsell-membership small {
  color: rgba(236,231,221,0.54);
  font-family: var(--serif-ko);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  word-break: keep-all;
}
/* 증서 패널 내부 하단 각주 — 남는 권리 2열 (박스 없이 조용히) */
.upsell-certificate {
  position: relative; z-index: 1;
  width: 100%;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin: 13px 0 0; padding-top: 13px;
  border-top: 1px solid rgba(226,232,238,0.13);
}
.upsell-certificate span {
  min-width: 0; padding: 0;
  border: none; border-radius: 0; background: none;
  text-align: center;
}
.upsell-certificate i {
  display: block;
  color: rgba(203,212,220,0.58);
  font-family: var(--serif-ko);
  font-size: 9.5px;
  font-style: normal;
  letter-spacing: 0.16em;
  margin-bottom: 3px;
}
.upsell-certificate b {
  display: block;
  color: rgba(236,231,221,0.74);
  font-family: var(--serif-ko);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.4;
  word-break: keep-all;
}
/* 혜택 3행 — 박스 나열 대신 구분 hairline만 있는 조용한 리스트 */
.upsell-ledger {
  position: relative; z-index: 1;
  display: grid; gap: 0; margin-bottom: 18px;
  border-top: 1px solid rgba(226,232,238,0.1);
}
.upsell-ledger span {
  display: grid; grid-template-columns: minmax(84px, auto) 1fr; align-items: baseline; gap: 14px;
  min-width: 0; padding: 13px 4px;
  border: none; border-radius: 0;
  border-bottom: 1px solid rgba(226,232,238,0.08);
  background: none;
}
.upsell-ledger b {
  color: rgba(226,232,238,0.9); font-family: var(--serif); font-size: 14px; font-weight: 500; letter-spacing: 0.05em;
  line-height: 1.3; word-break: keep-all;
}
.upsell-ledger i {
  color: rgba(236,231,221,0.66); font-style: normal; font-size: 11.5px; line-height: 1.5;
}
.upsell-go, .create-next, .export-save, .mini-btn.solid, .pcrop-go {
  position: relative; z-index: 1;
  width: 100%; padding: 16px; border-radius: 14px; border: none; cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0) 28%),
    linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: #1a1206; font-family: var(--serif-ko); font-weight: 600; font-size: 15px; letter-spacing: 0.04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 18px 44px rgba(107,113,120,0.16);
  transition: filter 0.25s, transform 0.25s; }
.upsell-go:hover, .create-next:hover, .export-save:hover, .mini-btn.solid:hover, .pcrop-go:hover { filter: brightness(1.08); transform: translateY(-1px); }
.upsell-go:disabled {
  cursor: default;
  opacity: 0.58;
  filter: saturate(0.82);
}
.upsell-go:disabled:hover {
  transform: none;
  filter: saturate(0.82);
}

/* ---------------- 새 기억 버튼 (기억 선택 헤더로 통합) ---------------- */
.home-selector-headtext { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.home-selector-add {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px 6px 9px; border-radius: 999px;
  border: 1px solid rgba(226,232,238,0.18);
  background: rgba(203,212,220,0.05);
  color: rgba(236,231,221,0.86);
  font-family: var(--serif-ko); font-size: 11px; letter-spacing: 0.08em; cursor: pointer;
  transition: color 0.22s, border-color 0.22s, background 0.22s;
}
.home-selector-add span { font-family: var(--serif); font-size: 15px; line-height: 1; }
.home-selector-add:hover,
.home-selector-add:focus-visible {
  color: rgba(236,231,221,0.98); border-color: rgba(226,232,238,0.32); background: rgba(203,212,220,0.09);
}

/* ---------------- 기념일 배너 ---------------- */
.occasion {
  margin: 26px auto 0; max-width: 460px; padding: 14px 22px;
  border: 1px solid transparent; border-radius: 999px;
  background:
    radial-gradient(circle at 50% 0%, rgba(203,212,220,0.14), rgba(0,0,0,0) 80%) padding-box,
    linear-gradient(135deg, rgba(226,232,238,0.36), rgba(255,255,255,0.045), rgba(107,113,120,0.2)) border-box;
  font-size: 14px; color: var(--gold-bright); letter-spacing: 0.04em;
  animation: glowBreathe 3.5s ease-in-out infinite;
}
.occasion.upcoming {
  border-color: var(--hair); color: var(--muted); background: none; animation: none;
  font-size: 12.5px; letter-spacing: 0.16em;
}

/* ---------------- 보관 영상 트리거 ---------------- */
.export-trigger {
  margin-top: 26px; padding: 11px 22px; border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.026), rgba(255,255,255,0.008)) padding-box,
    linear-gradient(135deg, rgba(203,212,220,0.18), rgba(255,255,255,0.035), rgba(217,226,234,0.06)) border-box;
  color: var(--muted);
  font-family: var(--serif-ko); font-size: 12.5px; letter-spacing: 0.14em; cursor: pointer;
  transition: all 0.25s;
}
.export-trigger:hover { color: var(--gold); box-shadow: 0 0 24px rgba(203,212,220,0.1); }

/* ---------------- 보관 영상 / create 공통 오버레이 ---------------- */
.export, .create {
  position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.66), rgba(0,0,0,0.88)),
    rgba(0,0,0,0.78);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s;
}
.export[aria-hidden="false"], .create[aria-hidden="false"] { opacity: 1; visibility: visible; }
.export-card, .create-card {
  position: relative; width: min(440px, 92vw);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.14) transparent;
  background: var(--surface-premium);
  border: 1px solid transparent; border-radius: 24px; padding: 32px 30px 30px;
  box-shadow: var(--shadow-premium);
  transform: translateY(18px); transition: transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.export[aria-hidden="false"] .export-card, .create[aria-hidden="false"] .create-card { transform: translateY(0); }
.export-close, .create-close {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.075); background: rgba(0,0,0,0.18); color: var(--muted); cursor: pointer; font-size: 13px; z-index: 2;
}
.export-kicker, .create-kicker {
  font-family: var(--serif); font-style: italic; font-size: 13px; letter-spacing: 0.2em;
  color: var(--gold); text-align: center; margin-bottom: 18px;
}
.create-kicker {
  font-family: var(--serif-ko);
  font-size: 11.5px;
  font-style: normal;
  letter-spacing: 0.24em;
}

/* 보관 영상 스테이지 */
.export-card { width: min(462px, 92vw); }
.export-title {
  margin: 0 auto 9px;
  text-align: center;
  font-family: var(--serif-ko);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-shadow: 0 0 28px rgba(226,232,238,0.1);
}
.export-copy {
  max-width: 330px;
  margin: 0 auto 22px;
  text-align: center;
  color: rgba(180,176,166,0.88);
  font-size: 12.5px;
  line-height: 1.7;
}
.export-stage {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 auto 20px;
}
.export-stage::before,
.export-stage::after {
  content: '';
  position: absolute;
  inset: 50%;
  width: 318px;
  height: 318px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}
.export-stage::before {
  border: 1px solid rgba(226,232,238,0.12);
  box-shadow: 0 0 76px rgba(203,212,220,0.12), inset 0 0 42px rgba(0,0,0,0.58);
}
.export-stage::after {
  width: 268px;
  height: 268px;
  border: 1px solid rgba(217,226,234,0.045);
}
#export-canvas {
  position: relative;
  z-index: 1;
  width: 292px;
  height: 292px;
  border-radius: 50%;
  border: 1px solid transparent;
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(135deg, rgba(226,232,238,0.32), rgba(217,226,234,0.07), rgba(107,113,120,0.2)) border-box;
  box-shadow:
    inset 0 0 48px rgba(0,0,0,0.72),
    0 0 70px rgba(203,212,220,0.13),
    0 22px 58px rgba(0,0,0,0.52);
}
.export-summary {
  position: relative;
  display: grid;
  gap: 7px;
  margin: 0 0 15px;
  padding: 13px 15px;
  border: 1px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.032), rgba(255,255,255,0.01)) padding-box,
    linear-gradient(135deg, rgba(226,232,238,0.22), rgba(217,226,234,0.055), rgba(107,113,120,0.16)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.export-summary span:first-child {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}
.export-summary span:last-child {
  color: rgba(203,212,220,0.78);
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.export-status {
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
  min-height: 24px;
}
.export-actions { display: flex; gap: 10px; margin-top: 16px; }
.export-save, .export-img {
  width: auto; flex: 1; padding: 14px; border-radius: 13px; cursor: pointer;
  font-family: var(--serif-ko); font-size: 14px; letter-spacing: 0.04em; transition: filter 0.2s, opacity 0.2s;
}
.export-save { border: none; background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep)); color: #1a1206; font-weight: 600; }
.export-save:hover { filter: brightness(1.08); }
.export-save:disabled { opacity: 0.5; cursor: default; }
.export-img { border: 1px solid rgba(203,212,220,0.26); background: rgba(203,212,220,0.035); color: var(--gold); }

/* ---------------- 새 공간 만들기 ---------------- */
.create-title { font-family: var(--serif-ko); font-weight: 500; font-size: 24px; text-align: center; margin-bottom: 14px; }
.create-step { animation: riseIn 0.5s ease; }
.create-choice-copy {
  max-width: 330px;
  margin: 0 auto 22px;
  color: rgba(236,231,221,0.58);
  font-size: 12.5px;
  line-height: 1.74;
  text-align: center;
  word-break: keep-all;
}
.type-grid { display: grid; grid-template-columns: minmax(0, 280px); justify-content: center; gap: 14px; }
.type-card {
  position: relative;
  min-height: 156px;
  isolation: isolate;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; padding: 31px 15px 27px;
  border: 1px solid transparent; border-radius: 20px;
  background:
    radial-gradient(90% 76% at 50% 10%, rgba(226,232,238,0.13), rgba(0,0,0,0) 54%) padding-box,
    radial-gradient(80% 100% at 50% 110%, rgba(217,226,234,0.038), rgba(0,0,0,0) 60%) padding-box,
    linear-gradient(180deg, rgba(255,255,255,0.036), rgba(255,255,255,0.008)) padding-box,
    linear-gradient(180deg, rgba(12,11,9,0.75), rgba(3,3,3,0.62)) padding-box,
    linear-gradient(145deg, rgba(226,232,238,0.24), rgba(255,255,255,0.035), rgba(217,226,234,0.065), rgba(107,113,120,0.18)) border-box;
  color: var(--ink); font-family: var(--serif-ko); font-size: 15px; cursor: pointer; transition: all 0.25s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.052),
    inset 0 -30px 46px rgba(0,0,0,0.22),
    0 18px 46px rgba(0,0,0,0.22);
}
.type-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 25px;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(226,232,238,0.2) 0 18%, rgba(203,212,220,0.075) 42%, rgba(0,0,0,0) 72%);
  filter: blur(1px);
  opacity: 0.88;
}
.type-card::after {
  content: '';
  position: absolute; inset: 10px; border-radius: 15px;
  border: 1px solid rgba(226,232,238,0.04);
  background:
    linear-gradient(90deg, rgba(0,0,0,0), rgba(226,232,238,0.13), rgba(0,0,0,0)) 50% 0 / 62% 1px no-repeat;
  pointer-events: none;
}
.type-card:hover, .type-card:focus-visible, .type-card.sel {
  outline: none;
  transform: translateY(-2px);
  background:
    radial-gradient(90% 76% at 50% 8%, rgba(226,232,238,0.18), rgba(0,0,0,0) 56%) padding-box,
    linear-gradient(180deg, rgba(203,212,220,0.115), rgba(255,255,255,0.012)) padding-box,
    linear-gradient(180deg, rgba(17,14,9,0.78), rgba(4,4,4,0.62)) padding-box,
    var(--edge-premium) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 22px 54px rgba(0,0,0,0.34), 0 0 30px rgba(203,212,220,0.11);
}
.type-card:hover::before, .type-card:focus-visible::before, .type-card.sel::before { opacity: 1; transform: translateX(-50%) scale(1.07); }
.type-ic {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 14px rgba(203,212,220,0.18));
}
.type-title {
  color: var(--ink);
  font-size: 15.5px;
  letter-spacing: 0.06em;
}
.type-card small {
  max-width: 128px;
  color: rgba(236,231,221,0.58);
  font-size: 11.5px;
  line-height: 1.55;
  word-break: keep-all;
}
.type-emoji { font-size: 30px; }

.create-comfort {
  margin: -6px 0 18px;
  color: rgba(236,231,221,0.62);
  font-family: var(--serif-ko);
  font-size: 12.5px;
  line-height: 1.65;
  text-align: center;
}
.fld { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin-bottom: 14px; }
.fld > span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.fld > span em {
  flex: none;
  font-style: normal;
  letter-spacing: 0.12em;
  color: rgba(203,212,220,0.72);
}
.fld input {
  width: 100%; min-width: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.032), rgba(255,255,255,0.012)),
    rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.075); border-radius: 12px;
  padding: 13px 15px; color: var(--ink); font-family: var(--serif-ko); font-size: 15px; outline: none; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.fld input:focus { border-color: rgba(203,212,220,0.36); box-shadow: 0 0 0 3px rgba(203,212,220,0.06); }
.fld input::placeholder { color: #5a564d; }
.fld-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.create-field-note {
  position: relative;
  margin: -2px 0 16px;
  padding-left: 14px;
  color: rgba(236,231,221,0.52);
  font-size: 11.5px;
  line-height: 1.65;
}
.create-field-note::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  bottom: 0.45em;
  width: 1px;
  background: linear-gradient(180deg, rgba(226,232,238,0.5), rgba(107,113,120,0.06));
}
.create-prompt-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 2px 0 4px;
}
.link-copy {
  margin: -6px 0 16px; color: rgba(236,231,221,0.64);
  font-size: 12.5px; line-height: 1.65; text-align: center;
}
.family-choice-list {
  display: grid; gap: 9px; max-height: min(34dvh, 260px);
  overflow-y: auto; padding-right: 2px; scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.14) transparent;
}
.family-choice {
  width: 100%; min-width: 0; min-height: 58px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  border: 1px solid transparent; border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.01)) padding-box,
    linear-gradient(180deg, rgba(9,9,8,0.66), rgba(3,3,3,0.54)) padding-box,
    linear-gradient(135deg, rgba(203,212,220,0.15), rgba(255,255,255,0.028), rgba(217,226,234,0.05)) border-box;
  color: var(--ink);
  padding: 12px 14px; text-align: left; cursor: pointer;
  font-family: var(--serif-ko); transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.family-choice:hover, .family-choice.is-active {
  background:
    linear-gradient(180deg, rgba(203,212,220,0.1), rgba(255,255,255,0.012)) padding-box,
    linear-gradient(180deg, rgba(17,14,9,0.74), rgba(4,4,4,0.58)) padding-box,
    var(--edge-premium) border-box;
}
.family-choice.is-active { transform: translateY(-1px); }
.family-choice b {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
}
.family-choice small {
  display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: rgba(236,231,221,0.5); font-size: 11px; line-height: 1.35;
}
.family-choice i {
  font-style: normal; color: var(--gold); font-size: 11px; letter-spacing: 0.12em;
}
.family-name-field { margin-top: 13px; }

.create-summary {
  position: relative;
  margin: -2px 0 16px;
  padding: 22px 18px 20px;
  border: 1px solid transparent;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(203,212,220,0.14), transparent 46%) padding-box,
    linear-gradient(180deg, rgba(255,255,255,0.038), rgba(255,255,255,0.01)) padding-box,
    linear-gradient(180deg, rgba(8,7,6,0.74), rgba(2,2,2,0.58)) padding-box,
    var(--edge-premium) border-box;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 24px 70px rgba(0,0,0,0.28);
}
.create-summary-kicker {
  margin-bottom: 8px;
  color: var(--gold);
  font-family: var(--serif-ko);
  font-size: 11.5px;
  font-style: normal;
  letter-spacing: 0.22em;
}
.create-summary strong {
  display: block;
  color: var(--ink);
  font-family: var(--serif-ko);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.create-summary p {
  margin-top: 8px;
  color: rgba(236,231,221,0.55);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
#create-summary-family { color: rgba(203,212,220,0.68); }
.create-summary q {
  display: block;
  margin-top: 15px;
  color: rgba(236,231,221,0.78);
  font-family: var(--serif-ko);
  font-size: 14px;
  line-height: 1.65;
  quotes: none;
  overflow-wrap: anywhere;
}
.upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 36px 0; border: 1px dashed rgba(203,212,220,0.28); border-radius: 16px; cursor: pointer;
  background: rgba(255,255,255,0.012);
  color: var(--gold); transition: background 0.2s, box-shadow 0.2s;
}
.upload:hover { background: rgba(203,212,220,0.05); box-shadow: inset 0 0 0 1px rgba(226,232,238,0.05); }
.upload-plus { font-size: 28px; }
.upload-text { font-size: 13px; letter-spacing: 0.1em; }
.upload-preview { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 14px; }
.upload-preview img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.upload-note {
  max-width: 320px;
  margin: 14px auto 0;
  color: rgba(236,231,221,0.5);
  font-size: 11.5px;
  line-height: 1.6;
  text-align: center;
}

.create-nav { display: flex; gap: 10px; margin-top: 24px; }
.create-back { padding: 14px 22px; border-radius: 13px; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.12); color: var(--muted);
  font-family: var(--serif-ko); font-size: 14px; cursor: pointer; }
.create-next { flex: 1; padding: 14px; border-radius: 13px; }

/* ---------------- 모바일 (안드로이드/iOS) ---------------- */
@media (max-width: 560px) {
  .intro-mark { font-size: 46px; letter-spacing: 0.18em; text-indent: 0.18em; }
  .intro-tag { font-size: 13px; letter-spacing: 0.34em; text-indent: 0.34em; }
  .wordmark { font-size: 19px; letter-spacing: 0.2em; }
  .auth {
    align-items: center;
    padding: calc(34px + env(safe-area-inset-top)) 20px calc(34px + env(safe-area-inset-bottom));
  }
  .auth-card { width: min(100%, 430px); max-height: 88dvh; }
  .auth-brand { margin-bottom: 15px; }
  .auth-title { font-size: 22px; }
  .auth-copy { font-size: 13px; }
  .auth-field input { min-height: 54px; }
  .auth-submit, .auth-signup { min-height: 48px; }
  .scene-left-tools {
    top: calc(20px + env(safe-area-inset-top));
    left: 18px;
    gap: 7px;
  }
  .scene-left-tools .sound-toggle,
  body[data-memory-layout="strip"] .scene-left-tools .sound-toggle {
    width: 36px;
    height: 36px;
  }
  .home-scroll {
    padding: calc(86px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom));
  }
  .home-list {
    min-height: calc(100dvh - 98px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .home-profile {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 17px;
    padding: 10px 0 22px;
  }
  .home-profile-portrait { width: min(43vw, 176px); }
  .home-profile-info { width: min(100%, 360px); text-align: center; }
  .home-profile-kicker { font-size: 10px; }
  .home-profile-info h1 { margin-top: 8px; font-size: 31px; }
  .home-profile-dates { margin-top: 7px; font-size: 10.5px; }
  .home-profile-epitaph {
    max-width: 330px;
    margin: 15px auto 0;
    font-size: 14px;
    line-height: 1.65;
  }
  .home-profile-status { margin-top: 10px; }
  .home-profile-open { min-width: 164px; min-height: 42px; margin-top: 17px; font-size: 12px; }
  .home-selector { padding-top: 12px; }
  .home-selector-track { margin-right: -14px; padding-right: 16px; }
  .return-door {
    width: min(350px, calc(100vw - 40px));
    min-height: 62px;
    bottom: calc(74px + env(safe-area-inset-bottom));
    gap: 10px;
    padding: 11px 11px 11px 15px;
  }
  .return-door span { font-size: 9px; letter-spacing: 0.2em; }
  .return-door strong { font-size: 13.5px; }
  .return-door small { display: none; }
  .return-door button { min-height: 38px; padding: 0 12px; font-size: 11px; }
  .scene-memory-drawer {
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: min(372px, calc(100vw - 26px));
    max-height: 32dvh;
    transform: translateX(-50%);
    padding: 13px 13px 12px;
    border-radius: 22px;
  }
  .scene-memory-head { margin-bottom: 9px; }
  .scene-memory-head strong { font-size: 14.5px; }
  .scene-family-tab { min-height: 29px; padding: 0 10px; font-size: 10.5px; }
  .scene-memory-list { max-height: 17dvh; }
  .scene-memory-item { min-height: 41px; padding: 8px 9px 8px 11px; }
  .scene-memory-item b { font-size: 13px; }
  .scene-memory-item small { font-size: 10.5px; }
  .mem-background-edit { font-size: 9.5px; letter-spacing: 0.24em; }
  .settings-card {
    width: min(500px, calc(100vw - 36px));
    max-width: calc(100vw - 28px);
    min-height: 100dvh;
    padding: calc(72px + env(safe-area-inset-top)) 0 calc(28px + env(safe-area-inset-bottom));
  }
  .settings-card::before, .upsell-card::before, .export-card::before, .create-card::before, .pcrop-card::before {
    left: 22px;
    right: 22px;
  }
  .sensory-toggle { width: auto; min-width: 66px; }
  .settings-row-action { width: 100%; margin-left: 0; justify-content: flex-start; }

  .portrait { width: 112px; height: 112px; margin-bottom: 22px; }
  #portrait-initial { font-size: 46px; }
  .mem-label { font-size: 10.5px; letter-spacing: 0.3em; }
  .mem-name { font-size: 32px; }
  .mem-dates { font-size: 17px; }
  .mem-hero { max-width: calc(100vw - 40px); }
  .mem-epitaph { font-size: 17px; max-width: 100%; overflow-wrap: break-word; }
  .occasion { font-size: 13px; padding: 12px 18px; }

  .section { margin-top: 46px; }
  .chat-row { width: min(388px, calc(100vw - 28px)); }
  .chat-row-title { font-size: 13.5px; }
  .chat-group { max-width: 88%; }
  /* 좁은 폭에서 제목과 카운트가 한 줄 경쟁하면 카운트를 우측 정렬로 다음 줄에 흘려보냄 */
  .section-head { align-items: start; gap: 6px 10px; flex-wrap: wrap; }
  .section-head > div { flex: 1 1 auto; min-width: 0; }
  .section-title { font-size: 20px; }
  .section-count { font-size: 11px; letter-spacing: 0.1em; margin-left: auto; }
  .tl-item { grid-template-columns: 68px 1fr; gap: 14px; min-height: 88px; padding: 16px 16px 16px 14px; }
  .tl-item::after { left: 68px; top: 16px; bottom: 16px; }
  .tl-date { font-size: 17px; }
  .tl-title { font-size: 15.5px; }
  .tl-desc { font-size: 12.5px; }
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .ph.is-featured { border-radius: 16px 10px 10px 16px; }
  .preserve-card { grid-template-columns: 1fr; align-items: stretch; }
  .preserve-card .mini-btn { width: 100%; }
  .successor-form { grid-template-columns: 1fr; }
  .admin-actions { flex-direction: column; }

  .export-card, .create-card, .upsell-card {
    width: min(440px, calc(100vw - 28px));
    max-width: calc(100vw - 28px);
    padding: 30px 22px 26px;
  }
  .fld-row { grid-template-columns: 1fr; gap: 0; }
  .family-choice { grid-template-columns: 1fr; gap: 6px; }
  .family-choice i { justify-self: start; }
  .export-stage::before {
    width: min(258px, calc(100vw - 84px));
    height: min(258px, calc(100vw - 84px));
  }
  .export-stage::after {
    width: min(214px, calc(100vw - 124px));
    height: min(214px, calc(100vw - 124px));
  }
  #export-canvas {
    width: min(230px, calc(100vw - 112px));
    height: min(230px, calc(100vw - 112px));
  }
  .export-status { overflow-wrap: break-word; }
  .export-actions { flex-direction: column; }
  .type-card { min-height: 146px; padding: 25px 12px 23px; }
  .create-choice-copy { margin-bottom: 18px; font-size: 12px; }
  .upsell-title, .create-title { font-size: 23px; }
  .upsell-copy { font-size: 12px; }
  .upsell-membership { padding: 38px 15px 16px; }
  .upsell-membership b { font-size: 22px; line-height: 1.35; }
  .upsell-membership i { font-size: 10.5px; line-height: 1.55; text-align: center; }
  .upsell-membership em { font-size: 16px; padding: 6px 14px 7px; }
  .upsell-membership small { font-size: 10.5px; }
  .upsell-certificate b { font-size: 10.5px; line-height: 1.4; letter-spacing: normal; text-shadow: none; }
  .upsell-certificate i { font-size: 9.5px; letter-spacing: 0.16em; }
  .upsell-certificate { gap: 10px; }
  .upsell-ledger span { grid-template-columns: minmax(76px, auto) 1fr; gap: 11px; padding: 12px 3px; }
}

/* 가로 회전 시 패널 스크롤 보장 */
@media (max-height: 520px) {
  .mem-scroll { padding-top: 80px; }
}

@media (max-height: 680px) {
  .export-card {
    padding: 24px 28px 22px;
  }
  .export-kicker { margin-bottom: 10px; }
  .export-title {
    font-size: 22px;
    margin-bottom: 6px;
  }
  .export-copy {
    max-width: 360px;
    margin-bottom: 14px;
    font-size: 12px;
  }
  .export-stage { margin-bottom: 14px; }
  .export-stage::before {
    width: min(266px, calc(100vw - 84px));
    height: min(266px, calc(100vw - 84px));
  }
  .export-stage::after {
    width: min(224px, calc(100vw - 124px));
    height: min(224px, calc(100vw - 124px));
  }
  #export-canvas {
    width: min(244px, calc(100vw - 112px));
    height: min(244px, calc(100vw - 112px));
  }
  .export-summary {
    margin-bottom: 10px;
    padding: 10px 12px;
  }
  .export-status { min-height: 20px; }
  .export-actions { margin-top: 10px; }
  .export-save, .export-img { padding: 12px; }
}
@keyframes ldotB { 0%,100% { opacity: .4; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }
.lmore { font-size: 11px; letter-spacing: .1em; color: var(--gold-deep); margin-left: 3px; }
.memorial .is-guided {
  animation: guidedArchiveGlow 1.7s ease;
}
@keyframes guidedArchiveGlow {
  0%, 100% { outline: 1px solid rgba(226,232,238,0); outline-offset: 0; }
  18% { outline: 1px solid rgba(226,232,238,0.42); outline-offset: 5px; }
  58% { outline: 1px solid rgba(226,232,238,0.18); outline-offset: 2px; }
}

/* ---------------- 비공개 기억 기록 ---------------- */
.private-memory {
  position: relative;
  max-width: 640px;
  margin: 44px auto 0;
  padding: 27px 24px 24px;
  border: 1px solid transparent;
  border-radius: 24px;
  background:
    radial-gradient(105% 112% at 50% -16%, rgba(226,232,238,0.13), rgba(0,0,0,0) 44%) padding-box,
    radial-gradient(120% 90% at 100% 100%, rgba(217,226,234,0.035), rgba(0,0,0,0) 46%) padding-box,
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)) padding-box,
    linear-gradient(180deg, rgba(9,9,8,0.72), rgba(2,2,2,0.58)) padding-box,
    var(--edge-soft) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -28px 48px rgba(0,0,0,0.2),
    0 28px 78px rgba(0,0,0,0.34);
}
.private-memory::before {
  content: ''; position: absolute; left: 22px; right: 22px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226,232,238,0.52), transparent);
  opacity: 0.58;
}
.private-memory::after {
  content: ''; position: absolute; inset: 18px; border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.028);
  pointer-events: none;
}
.private-memory.has-archive {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    inset 0 -28px 48px rgba(0,0,0,0.2),
    0 30px 84px rgba(0,0,0,0.38),
    0 0 38px rgba(203,212,220,0.052);
}
.private-memory-head { position: relative; z-index: 1; text-align: center; margin-bottom: 17px; }
.private-memory-kicker {
  font-family: var(--serif); font-style: italic; font-size: 11px;
  letter-spacing: 0.28em; color: rgba(203,212,220,0.82); margin-bottom: 7px;
}
.private-memory h3 {
  font-family: var(--serif-ko); font-size: 18px; font-weight: 500;
  letter-spacing: 0.04em; color: rgba(236,231,221,0.9);
}
.private-memory-copy {
  max-width: 400px;
  margin: 9px auto 0;
  color: rgba(180,176,166,0.82);
  font-size: 12.5px;
  line-height: 1.65;
}
.memory-archive-strip {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 17px;
  overflow: hidden;
  border: 1px solid rgba(226,232,238,0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}
.memory-archive-strip span {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 12px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.022), rgba(0,0,0,0.08)),
    rgba(0,0,0,0.2);
  text-align: center;
}
.memory-archive-strip b {
  min-width: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memory-archive-strip i {
  color: rgba(138,133,121,0.86);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.14em;
}
.memory-field { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 9px; }
.memory-field span {
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(217,226,234,0.42);
}
.memory-field textarea {
  width: 100%; min-height: 104px; resize: none;
  border: 1px solid transparent; border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.026), rgba(255,255,255,0.008)) padding-box,
    linear-gradient(180deg, rgba(2,2,2,0.76), rgba(0,0,0,0.42)) padding-box,
    linear-gradient(135deg, rgba(226,232,238,0.14), rgba(217,226,234,0.045), rgba(107,113,120,0.1)) border-box;
  color: var(--ink);
  padding: 16px 17px;
  font-family: var(--serif-ko); font-size: 14.5px; line-height: 1.65;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), inset 0 -18px 28px rgba(0,0,0,0.14);
}
.memory-field textarea:focus {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    inset 0 -18px 28px rgba(0,0,0,0.14),
    0 0 0 3px rgba(203,212,220,0.06),
    0 0 34px rgba(203,212,220,0.055);
}
.memory-field textarea::placeholder { color: rgba(138,133,121,0.66); }
.create-prompt-row button {
  min-height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid rgba(203,212,220,0.14);
  background:
    linear-gradient(180deg, rgba(203,212,220,0.045), rgba(255,255,255,0.006)),
    rgba(0,0,0,0.2);
  color: rgba(203,212,220,0.76);
  font-family: var(--serif-ko); font-size: 11.5px; letter-spacing: 0.06em;
  cursor: pointer; transition: border-color .2s, color .2s, background .2s, transform .2s;
}
.create-prompt-row button:hover {
  color: var(--gold-bright);
  border-color: rgba(203,212,220,0.3);
  background: rgba(203,212,220,0.065);
  transform: translateY(-1px);
}
.create-prompt-row button:focus-visible {
  outline: 2px solid rgba(203,212,220,0.34);
  outline-offset: 3px;
}
.create-prompt-row button:active {
  transform: translateY(0);
  border-color: rgba(203,212,220,0.46);
  background: rgba(203,212,220,0.11);
  color: var(--gold-bright);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.28);
}
.memory-actions {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 12px;
}
.memory-buttons {
  display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap;
}
.memory-count {
  font-family: var(--serif); font-size: 12px; letter-spacing: 0.12em;
  color: rgba(138,133,121,0.78);
}
.memory-save {
  min-height: 38px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--serif-ko); font-size: 12.5px; letter-spacing: 0.08em;
  cursor: pointer; transition: transform .22s, box-shadow .22s, opacity .22s, background .22s;
}
.memory-save {
  background:
    linear-gradient(180deg, rgba(203,212,220,0.11), rgba(255,255,255,0.01)) padding-box,
    linear-gradient(135deg, rgba(226,232,238,0.38), rgba(255,255,255,0.045), rgba(107,113,120,0.24)) border-box;
  color: var(--gold-bright);
}
.memory-save:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(203,212,220,0.1);
}
.memory-save:disabled { opacity: 0.42; cursor: default; }
.memory-list { position: relative; z-index: 1; display: grid; gap: 11px; margin-top: 20px; }
.memory-item {
  position: relative;
  display: grid; gap: 8px;
  padding: 15px 16px 16px 18px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 17px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.024), rgba(255,255,255,0.007)) padding-box,
    linear-gradient(180deg, rgba(5,5,4,0.56), rgba(0,0,0,0.34)) padding-box,
    linear-gradient(135deg, rgba(226,232,238,0.13), rgba(255,255,255,0.025), rgba(217,226,234,0.04)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.032);
}
.memory-item::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(226,232,238,0.54), transparent);
}
.memory-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.memory-item-controls {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.memory-visibility-toggle,
.memory-delete-toggle {
  flex: 0 0 auto;
  min-height: 26px;
  max-width: 168px;
  padding: 5px 10px;
  border: 1px solid rgba(217,226,234,0.1);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018), rgba(0,0,0,0.08)),
    rgba(0,0,0,0.22);
  color: rgba(138,133,121,0.82);
  font-family: var(--serif-ko);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color .22s, border-color .22s, background .22s, box-shadow .22s;
}
.memory-visibility-toggle:hover:not(:disabled),
.memory-delete-toggle:hover {
  color: rgba(226,232,238,0.84);
  border-color: rgba(203,212,220,0.28);
  background: rgba(203,212,220,0.055);
}
.memory-visibility-toggle.is-ready {
  color: rgba(226,232,238,0.88);
  border-color: rgba(226,232,238,0.24);
  background:
    radial-gradient(120% 170% at 50% 0%, rgba(203,212,220,0.11), rgba(0,0,0,0) 62%),
    rgba(203,212,220,0.045);
  box-shadow: 0 0 20px rgba(203,212,220,0.055);
}
.memory-visibility-toggle:disabled {
  cursor: default;
  opacity: 0.82;
}
.memory-delete-toggle {
  max-width: 132px;
  color: rgba(138,133,121,0.66);
  border-color: rgba(217,226,234,0.075);
  background: rgba(255,255,255,0.012);
}
.memory-delete-toggle.is-confirming {
  color: rgba(226,232,238,0.86);
  border-color: rgba(226,232,238,0.24);
  background: rgba(203,212,220,0.052);
}
.memory-item span {
  font-family: var(--serif); font-size: 12px; letter-spacing: 0.16em;
  color: rgba(203,212,220,0.68);
}
.memory-item i {
  flex: 0 0 auto;
  color: rgba(138,133,121,0.66);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.16em;
}
.memory-item p {
  color: rgba(236,231,221,0.74); font-size: 14px; line-height: 1.75;
  overflow-wrap: anywhere;
}
.memory-empty {
  position: relative; z-index: 1;
  margin-top: 18px; text-align: center;
  color: rgba(138,133,121,0.72); font-size: 12px; letter-spacing: 0.1em;
}
@media (max-width: 560px) {
  .private-memory {
    max-width: calc(100vw - 40px);
    margin-top: 38px;
    padding: 22px 18px 20px;
  }
  .private-memory h3 { font-size: 17px; }
  .private-memory-copy { font-size: 12px; }
  .memory-archive-strip b { font-size: 15px; }
  .memory-archive-strip i { font-size: 9px; letter-spacing: 0.1em; }
  .memory-field textarea {
    min-height: 86px;
    font-size: 14px;
    padding: 14px 15px;
  }
  .memory-actions { align-items: stretch; flex-direction: column; gap: 10px; }
  .memory-buttons { width: 100%; justify-content: flex-end; flex-wrap: nowrap; }
  .memory-save { flex: 1 1 0; min-width: 0; padding: 0 14px; }
  .memory-item-meta { align-items: flex-start; flex-direction: column; gap: 4px; }
  .memory-item-controls { justify-content: flex-start; width: 100%; }
  .memory-visibility-toggle { max-width: 100%; }
  .memory-delete-toggle { max-width: 100%; }
}

/* ---------------- 보존 / 승계의 자리 ---------------- */
.preserve-section, .admin-section { max-width: 640px; margin-left: auto; margin-right: auto; }
.preserve-card {
  border: 1px solid transparent; border-radius: 18px;
  background:
    radial-gradient(110% 120% at 0% 0%, rgba(203,212,220,0.09), rgba(0,0,0,0) 42%) padding-box,
    var(--surface-archive);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}
.invite-code-line {
  margin-top: 10px;
  color: var(--gold-bright);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: 0.12em;
  word-break: break-all;
}
.invite-code-line:empty { display: none; }
.invite-status {
  min-height: 18px; margin-top: 10px; color: var(--muted);
  font-size: 12px; line-height: 1.55;
}
.preserve-card {
  position: relative;
  display: grid; grid-template-columns: 1fr; gap: 16px;
  overflow: hidden;
  padding: 22px 20px 20px;
  background:
    radial-gradient(92% 128% at 0% 0%, rgba(226,232,238,0.105), rgba(0,0,0,0) 44%) padding-box,
    radial-gradient(78% 100% at 100% 100%, rgba(217,226,234,0.048), rgba(0,0,0,0) 58%) padding-box,
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)) padding-box,
    linear-gradient(180deg, rgba(10,9,7,0.72), rgba(3,3,3,0.54)) padding-box,
    var(--edge-soft) border-box;
}
.preserve-card::before {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  top: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226,232,238,0.44), rgba(217,226,234,0.16), transparent);
  opacity: 0.76;
}
.preserve-title {
  position: relative;
  z-index: 1;
  font-size: 16px; font-weight: 500; letter-spacing: 0.03em; color: var(--ink); margin-bottom: 7px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.preserve-copy {
  position: relative;
  z-index: 1;
  font-size: 12.5px; line-height: 1.68; color: rgba(236,231,221,0.6);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.archive-ledger {
  position: relative;
  z-index: 1;
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: 13px;
}
.archive-ledger span {
  min-height: 28px;
  display: inline-flex; align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(203,212,220,0.115);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.006)),
    rgba(203,212,220,0.038);
  color: rgba(226,232,238,0.76);
  font-size: 11px; letter-spacing: 0.07em;
}
.archive-status {
  position: relative;
  z-index: 1;
  min-height: 18px;
  margin-top: 12px;
  color: rgba(138,133,121,0.9);
  font-size: 11.5px; line-height: 1.55;
  letter-spacing: 0.035em;
}
.preserve-card .mini-btn {
  position: relative;
  z-index: 1;
  width: 100%;
}
.admin-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.admin-row span {
  font-size: 11px; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase;
}
.admin-row :is(b, .admin-value-button) {
  min-width: 0; text-align: right; color: var(--ink); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-value-button { padding: 0; border: 0; background: none; font: inherit; }
.admin-value-button:disabled { opacity: 1; cursor: default; }
.admin-value-button.is-action {
  color: var(--gold-bright); cursor: pointer; text-decoration: underline; text-underline-offset: 4px;
}
.successor-form {
  display: grid; grid-template-columns: 0.75fr 1fr; gap: 10px; margin-top: 16px;
}
.successor-form input {
  min-width: 0; border: 1px solid rgba(255,255,255,0.075); border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.032), rgba(255,255,255,0.012)),
    rgba(0,0,0,0.32);
  color: var(--ink);
  padding: 12px 13px; font-family: var(--serif-ko); font-size: 14px; outline: none;
}
.successor-form input:focus { border-color: rgba(203,212,220,0.36); box-shadow: 0 0 0 3px rgba(203,212,220,0.06); }
.successor-form input::placeholder { color: #5a564d; }
.admin-actions { display: flex; gap: 10px; margin-top: 12px; }
.mini-btn {
  min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(203,212,220,0.045), rgba(255,255,255,0.008)) padding-box,
    linear-gradient(135deg, rgba(203,212,220,0.26), rgba(255,255,255,0.035), rgba(107,113,120,0.18)) border-box;
  color: var(--gold);
  font-family: var(--serif-ko); font-size: 12.5px; letter-spacing: 0.08em; cursor: pointer;
  transition: background 0.2s, filter 0.2s, box-shadow 0.2s;
}
.mini-btn:not(.solid):hover {
  background:
    linear-gradient(180deg, rgba(203,212,220,0.1), rgba(255,255,255,0.014)) padding-box,
    linear-gradient(135deg, rgba(226,232,238,0.44), rgba(255,255,255,0.05), rgba(107,113,120,0.28)) border-box;
  box-shadow: 0 0 22px rgba(203,212,220,0.1);
}
.mini-btn:disabled {
  opacity: 0.42; cursor: default; filter: grayscale(0.3);
}
.mini-btn:not(.solid):disabled:hover {
  background:
    linear-gradient(180deg, rgba(203,212,220,0.045), rgba(255,255,255,0.008)) padding-box,
    linear-gradient(135deg, rgba(203,212,220,0.26), rgba(255,255,255,0.035), rgba(107,113,120,0.18)) border-box;
  box-shadow: none;
}
.mini-btn.solid {
  width: auto; min-height: 42px; padding: 0 17px; border: none;
  color: #1a1206; font-weight: 600; white-space: nowrap;
}
.mini-btn.solid:disabled { background: rgba(255,255,255,0.08); color: var(--muted); }
.admin-status {
  min-height: 34px; margin-top: 13px; color: var(--muted);
  font-size: 12px; line-height: 1.55;
}
.successor-form input:disabled { opacity: 0.45; cursor: default; }

/* ---------------- 고인 기억 사진 ---------------- */
.portrait { cursor: pointer; overflow: visible; transition: border-color .24s, transform .24s, box-shadow .24s; }
.portrait:hover, .portrait:focus-visible {
  border-color: rgba(226,232,238,.46);
  transform: translateY(-1px);
  outline: none;
}
#portrait-img { display: none; position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover; filter: grayscale(.08) contrast(1.02); }
.portrait.has-photo #portrait-img { display: block; }
.portrait.has-photo #portrait-initial { display: none; }
.portrait-edit { position: absolute; bottom: 0; right: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(10,9,6,0.42), rgba(3,3,3,0.3)) padding-box,
    linear-gradient(135deg, rgba(217,226,234,0.16), rgba(255,255,255,0.03), rgba(107,113,120,0.14)) border-box;
  backdrop-filter: blur(6px);
  color: rgba(217,226,234,0.5); font-size: 17px; line-height: 1; cursor: pointer; z-index: 3;
  display: grid; place-items: center;
  transition: color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease; }
.portrait-edit:hover,
.portrait-edit:focus-visible {
  color: var(--gold-bright);
  background:
    linear-gradient(180deg, rgba(24,18,8,0.6), rgba(6,5,3,0.44)) padding-box,
    var(--edge-premium) border-box;
  box-shadow: 0 0 18px rgba(203,212,220,0.18);
  transform: scale(1.06); }

/* ---------------- 추모 공간 배경 (설정한 사진이 은은히 · 테두리는 검정으로) ---------------- */
.mem-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center 38%; background-repeat: no-repeat;
  opacity: 0; transition: opacity 1.6s ease; will-change: opacity; }
.mem-bg.on { opacity: 1; }
/* 가운데만 살짝 비치고 가장자리는 완전히 검정으로 페이드아웃 */
.mem-bg::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(110% 78% at 50% 34%,
    rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.78) 42%, rgba(0,0,0,0.94) 70%, #000 100%); }

/* 앰비언트 컬러: 초상에서 추출한 그 사람의 톤이 어둠에 배어들게 (히어로 뒤 넓은 글로우 + 하단 미세 반사) */
.mem-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease; will-change: opacity;
  background:
    radial-gradient(150% 96% at 50% 20%, var(--ambient-glow, transparent), transparent 82%),
    radial-gradient(140% 48% at 50% 106%, var(--ambient-soft, transparent), transparent 76%); }
.mem-ambient.on { opacity: 1; }
body.is-low-stimulation .mem-ambient { transition: none; }
@media (prefers-reduced-motion: reduce) { .mem-ambient { transition: none; } }

/* ---------------- 모바일 하단 AI 대화 진입 ---------------- */
.chat-row {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 29;
  transform: translateX(-50%);
  display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 11px;
  width: min(420px, calc(100vw - 32px)); min-height: 60px; margin: 0; padding: 8px 13px 8px 10px;
  cursor: pointer; text-align: left;
  border: 1px solid transparent; border-radius: 8px;
  background:
    radial-gradient(circle at 14% 0%, rgba(226,232,238,0.08), transparent 54%) padding-box,
    linear-gradient(180deg, rgba(13,13,12,0.86), rgba(3,3,3,0.82)) padding-box,
    linear-gradient(135deg, rgba(226,232,238,0.28), rgba(255,255,255,0.04), rgba(107,113,120,0.2)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 18px 52px rgba(0,0,0,0.48);
  -webkit-backdrop-filter: blur(18px) saturate(0.72); backdrop-filter: blur(18px) saturate(0.72);
  transition: opacity 0.2s, border-color 0.2s;
}
.chat-row:hover { opacity: 0.86; }
.chat-row:focus-visible { outline: 1px solid rgba(226,232,238,0.5); outline-offset: 3px; }
.chat-row-main { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.chat-row-kicker {
  font-family: var(--sans); font-size: 9px; letter-spacing: 0.18em;
  color: rgba(203,212,220,0.6);
}
.chat-row-title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--serif-ko); font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
  color: rgba(236,231,221,0.92);
}
.chat-row-state {
  font-family: var(--serif-ko); font-size: 9.5px; letter-spacing: 0.08em; color: var(--gold-deep);
}

/* 프로필 정보 구조 초안: ?draft=profile-tabs 에서만 활성화 */
body.is-profile-tabs-draft .mem-scroll {
  display: flex;
  flex-direction: column;
}
body.is-profile-tabs-draft .mem-hero { order: 1; }
body.is-profile-tabs-draft .mem-profile-tabs { order: 3; }
body.is-profile-tabs-draft .legacy-section,
body.is-profile-tabs-draft .gallery-section,
body.is-profile-tabs-draft .private-memory,
body.is-profile-tabs-draft .mem-profile-chat { order: 4; width: min(640px, 100%); }
body.is-profile-tabs-draft .mem-foot { order: 5; }
body.is-profile-tabs-draft .chat-row { display: none; }
body.is-profile-tabs-draft .legacy-section { margin-top: 34px; }

body.is-profile-tabs-draft .legacy-section .section-head {
  margin-bottom: 6px;
  padding-bottom: 14px;
}
body.is-profile-tabs-draft .legacy-section .timeline { gap: 0; }
body.is-profile-tabs-draft .legacy-section .tl-item {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  padding: 15px 0;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid rgba(226,232,238,0.08);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.is-profile-tabs-draft .legacy-section .tl-item::before { display: none; }
body.is-profile-tabs-draft .legacy-section .tl-item::after {
  left: 64px;
  top: 15px;
  bottom: 15px;
  opacity: 0.55;
}
body.is-profile-tabs-draft .legacy-section .tl-date {
  padding-top: 1px;
  text-align: left;
  font-size: 16px;
  color: rgba(203,212,220,0.76);
}
body.is-profile-tabs-draft .legacy-section .tl-title {
  margin-bottom: 4px;
  font-size: 15px;
}
body.is-profile-tabs-draft .legacy-section .tl-desc {
  font-size: 12px;
  line-height: 1.58;
}

.mem-profile-tabs {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 30;
  transform: translateX(-50%);
  width: min(640px, 100%);
  margin: 0;
  padding: 0 0 env(safe-area-inset-bottom);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(226,232,238,0.12);
  background: rgba(2,2,2,0.88);
  box-shadow: 0 -18px 42px rgba(0,0,0,0.38);
  -webkit-backdrop-filter: blur(22px) saturate(0.76);
  backdrop-filter: blur(22px) saturate(0.76);
}
.mem-profile-tabs button {
  position: relative;
  min-width: 0;
  min-height: 52px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: rgba(180,176,166,0.65);
  font-family: var(--serif-ko);
  font-size: 13px;
  letter-spacing: 0;
  cursor: pointer;
}
.mem-profile-tabs button::after {
  content: '';
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: -1px;
  height: 1px;
  background: transparent;
}
.mem-profile-tabs button[aria-selected="true"] { color: rgba(236,231,221,0.96); }
.mem-profile-tabs button[aria-selected="true"]::after {
  background: linear-gradient(90deg, transparent, rgba(226,232,238,0.9), transparent);
  box-shadow: 0 0 12px rgba(203,212,220,0.28);
}
.mem-profile-tabs button:focus-visible { outline: 1px solid rgba(226,232,238,0.44); outline-offset: -5px; }

body.is-profile-tabs-draft .gallery-section { margin-top: 34px; }
body.is-profile-tabs-draft .private-memory {
  margin-top: 34px;
  border-color: transparent;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 72%);
  box-shadow: none;
}
body.is-profile-tabs-draft .private-memory::before { opacity: 0.24; }
body.is-profile-tabs-draft .private-memory::after { display: none; }

.mem-profile-chat {
  width: min(640px, 100%);
  margin: 34px auto 0;
  padding: 38px 8px 14px;
  text-align: center;
  border-top: 1px solid rgba(226,232,238,0.09);
}
.mem-profile-chat-kicker {
  margin-bottom: 9px;
  color: rgba(203,212,220,0.62);
  font-family: var(--serif);
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.26em;
}
.mem-profile-chat h3 {
  color: rgba(236,231,221,0.94);
  font-family: var(--serif-ko);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.mem-profile-chat > p:not(.mem-profile-chat-kicker) {
  max-width: 390px;
  margin: 12px auto 0;
  color: rgba(180,176,166,0.68);
  font-size: 12.5px;
  line-height: 1.7;
}
.mem-profile-chat button {
  min-width: 180px;
  min-height: 46px;
  margin-top: 24px;
  padding: 0 22px;
  border: 1px solid rgba(226,232,238,0.2);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(226,232,238,0.12), rgba(226,232,238,0.035));
  color: rgba(236,231,221,0.92);
  font-family: var(--serif-ko);
  font-size: 13px;
  letter-spacing: 0;
  cursor: pointer;
}
.mem-profile-chat button:focus-visible { outline: 1px solid rgba(226,232,238,0.5); outline-offset: 3px; }

@media (max-width: 560px) {
  body.is-profile-tabs-draft .mem-scroll {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }
  body.is-profile-tabs-draft .legacy-section { margin-top: 34px; }
  .mem-profile-tabs button { min-height: 58px; font-size: 12px; }
  body.is-profile-tabs-draft .legacy-section,
  body.is-profile-tabs-draft .gallery-section,
  body.is-profile-tabs-draft .private-memory,
  body.is-profile-tabs-draft .mem-profile-chat { max-width: 100%; }
}
.chat-row.is-resting .chat-row-title { color: rgba(236,231,221,0.6); }
.chat-row-seal {
  grid-column: 1; grid-row: 1; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.006)) padding-box,
    linear-gradient(135deg, rgba(226,232,238,0.46), rgba(255,255,255,0.05), rgba(107,113,120,0.24)) border-box;
  font-family: var(--serif); font-size: 11px; letter-spacing: 0.08em; color: rgba(203,212,220,0.82);
}

/* ---------------- 대화(채팅) 표면 ---------------- */
.chat {
  position: fixed; inset: 0; z-index: 56;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #060606, #000 68%);
  opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s;
}
.chat[aria-hidden="false"] { opacity: 1; visibility: visible; }
.chat-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% 0%, var(--chat-ambient-soft, transparent), transparent 64%),
    radial-gradient(140% 44% at 50% 108%, var(--chat-ambient-soft, transparent), transparent 78%);
}
.chat-top {
  position: relative; z-index: 7; flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: calc(16px + env(safe-area-inset-top)) 18px 12px;
}
.chat-back {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.075); background: rgba(0,0,0,0.2);
  color: rgba(226,232,238,0.86); font-size: 17px; cursor: pointer;
}
.chat-who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.chat-who-portrait {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(226,232,238,0.2); background: rgba(203,212,220,0.08);
  background-size: cover; background-position: center;
  font-family: var(--serif); font-size: 14px; color: rgba(226,232,238,0.8); overflow: hidden;
}
.chat-who-portrait.has-img { border-color: var(--chat-ambient-line, rgba(226,232,238,0.24)); }
.chat-who-name {
  font-family: var(--serif-ko); font-size: 16px; font-weight: 500; letter-spacing: 0.03em;
  color: rgba(236,231,221,0.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-tools { position: relative; flex: 0 0 auto; }
.chat-menu-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.075); background: rgba(0,0,0,0.2);
  color: var(--muted); font-size: 15px; cursor: pointer;
}
.chat-menu {
  position: absolute; top: 44px; right: 0; z-index: 6; min-width: 168px;
  display: flex; flex-direction: column;
  padding: 6px; border: 1px solid transparent; border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(16,15,13,0.98), rgba(4,4,4,0.96)) padding-box,
    linear-gradient(135deg, rgba(226,232,238,0.4), rgba(107,113,120,0.2)) border-box;
  box-shadow: 0 22px 60px rgba(0,0,0,0.6);
}
.chat-menu button {
  padding: 11px 12px; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--serif-ko); font-size: 13.5px; letter-spacing: 0.03em; color: rgba(236,231,221,0.86);
  border-radius: 8px; transition: background 0.2s;
}
.chat-menu button:hover { background: rgba(255,255,255,0.045); }
.chat-menu #chat-menu-clear { color: rgba(210,168,168,0.82); }

.chat-scroll {
  position: relative; z-index: 2; flex: 1 1 auto; overflow-y: auto;
  padding: 22px 18px 10px;
}
.chat-scroll::-webkit-scrollbar { width: 6px; }
.chat-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.chat-thread {
  display: flex; flex-direction: column; gap: 16px;
  width: 100%; max-width: 620px; margin: 0 auto;
}
.chat-group { display: flex; flex-direction: column; gap: 6px; max-width: 82%; }
.chat-group--me { align-self: flex-end; align-items: flex-end; }
.chat-group--them { align-self: flex-start; align-items: flex-start; }
.chat-bubble {
  padding: 11px 15px; border-radius: 16px;
  font-family: var(--serif-ko); font-size: 14.5px; line-height: 1.62; letter-spacing: 0.01em;
  word-break: keep-all; white-space: pre-wrap;
}
.chat-group--them .chat-bubble {
  border: 1px solid var(--chat-ambient-line, rgba(226,232,238,0.16));
  border-bottom-left-radius: 5px;
  background: linear-gradient(180deg, rgba(20,21,23,0.72), rgba(8,8,9,0.72));
  color: rgba(236,231,221,0.9);
  backdrop-filter: blur(8px);
}
.chat-group--me .chat-bubble {
  border: 1px solid rgba(226,232,238,0.2);
  border-bottom-right-radius: 5px;
  background: linear-gradient(180deg, rgba(215,221,224,0.14), rgba(160,168,175,0.08));
  color: rgba(240,243,246,0.95);
}
.chat-time {
  font-family: var(--serif-ko); font-size: 10px; letter-spacing: 0.1em; color: rgba(107,113,120,0.7);
  padding: 0 4px;
}
.chat-preview-label {
  align-self: center; margin: 2px 0;
  font-family: var(--serif-ko); font-size: 10.5px; letter-spacing: 0.08em; color: rgba(138,133,121,0.62);
}

/* 타이핑 인디케이터 */
.chat-typing { display: flex; align-items: center; gap: 5px; padding: 14px 16px; }
.chat-typing span {
  width: 5px; height: 5px; border-radius: 50%; background: rgba(217,226,234,0.55);
  animation: chatDot 1.2s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.18s; }
.chat-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes chatDot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 0.9; transform: translateY(-2px); } }
body.is-low-stimulation .chat-typing span { animation: none; opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .chat-typing span { animation: none; opacity: 0.6; } }

/* 위기 안내 카드 */
.chat-crisis {
  align-self: stretch; max-width: 620px; margin: 4px auto; padding: 18px 20px;
  border: 1px solid transparent; border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008)) padding-box,
    linear-gradient(135deg, rgba(226,232,238,0.42), rgba(255,255,255,0.05), rgba(217,226,234,0.1)) border-box;
  text-align: center;
}
.chat-crisis-title {
  font-family: var(--serif-ko); font-size: 16px; font-weight: 500; letter-spacing: 0.02em;
  color: rgba(236,231,221,0.94); margin-bottom: 8px;
}
.chat-crisis-line {
  font-family: var(--serif-ko); font-size: 12.5px; line-height: 1.6; letter-spacing: 0.02em;
  color: rgba(217,226,234,0.72); word-break: keep-all; margin-bottom: 14px;
}
.chat-crisis-call {
  display: inline-block; padding: 11px 24px; border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 30%),
    linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: #1a1206; font-family: var(--serif-ko); font-weight: 600; font-size: 13.5px;
  letter-spacing: 0.04em; text-decoration: none;
}

/* 입력바 */
.chat-input {
  position: relative; z-index: 3; flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(203,212,220,0.16), transparent) 1;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.4));
}
.chat-input-field {
  flex: 1 1 auto; min-width: 0; padding: 12px 16px; border-radius: 999px;
  border: 1px solid rgba(226,232,238,0.16); background: rgba(255,255,255,0.03);
  color: var(--ink); font-family: var(--serif-ko); font-size: 14px; letter-spacing: 0.01em;
}
.chat-input-field::placeholder { color: rgba(138,133,121,0.6); }
.chat-input-field:focus { outline: none; border-color: rgba(226,232,238,0.34); background: rgba(255,255,255,0.05); }
.chat-input-field:disabled { opacity: 0.5; }
.chat-send {
  flex: 0 0 auto; padding: 11px 18px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0) 30%),
    linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: #1a1206; font-family: var(--serif-ko); font-weight: 600; font-size: 13.5px; letter-spacing: 0.06em;
  transition: filter 0.25s, opacity 0.25s;
}
.chat-send:hover { filter: brightness(1.08); }
.chat-send:disabled { opacity: 0.5; cursor: default; filter: saturate(0.8); }

/* 대화 하위 시트 (온보딩 · 쉬어가기) */
.chat-onboard, .chat-rest-confirm {
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center; padding: 28px;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(6px);
}
.chat-onboard-card, .chat-rest-card {
  width: min(420px, 100%); max-height: min(760px, calc(100dvh - 56px)); overflow-y: auto;
  padding: 30px 26px; border-radius: 8px;
  border: 1px solid transparent; text-align: center;
  background:
    linear-gradient(180deg, rgba(16,15,13,0.98), rgba(4,4,4,0.97)) padding-box,
    linear-gradient(135deg, rgba(226,232,238,0.44), rgba(255,255,255,0.05), rgba(107,113,120,0.24)) border-box;
  box-shadow: 0 30px 90px rgba(0,0,0,0.62);
}
.chat-onboard-kicker {
  font-family: var(--serif); font-style: italic; font-size: 12px; letter-spacing: 0.3em;
  color: rgba(203,212,220,0.78); margin-bottom: 10px;
}
.chat-onboard-title, .chat-rest-title {
  font-family: var(--serif-ko); font-size: 21px; font-weight: 500; letter-spacing: 0.02em;
  color: rgba(236,231,221,0.95); margin-bottom: 12px;
}
.chat-onboard-copy, .chat-rest-copy {
  font-family: var(--serif-ko); font-size: 13px; line-height: 1.72; letter-spacing: 0.01em;
  color: rgba(217,226,234,0.72); word-break: keep-all; margin-bottom: 16px;
}
.chat-memory-form { display: grid; gap: 10px; margin-bottom: 18px; text-align: left; }
.chat-memory-file-pick {
  width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border: 1px solid rgba(226,232,238,0.16); border-radius: 6px;
  background: rgba(255,255,255,0.025); color: rgba(236,231,221,0.9); cursor: pointer; text-align: left;
}
.chat-memory-file-pick span { font-family: var(--serif-ko); font-size: 13px; }
.chat-memory-file-pick small { flex: 0 0 auto; color: rgba(138,133,121,0.68); font-size: 9.5px; }
.chat-memory-file-state { min-height: 18px; color: rgba(203,212,220,0.58); font-size: 10.5px; line-height: 1.55; }
.chat-memory-analysis-state {
  padding: 10px 12px; border-left: 1px solid rgba(216,190,123,0.42);
  background: linear-gradient(90deg, rgba(216,190,123,0.06), transparent);
  color: rgba(226,214,183,0.78); font-family: var(--serif-ko); font-size: 10.5px; line-height: 1.65;
}
.chat-memory-subject { display: grid; gap: 7px; }
.chat-memory-subject > span { color: rgba(203,212,220,0.72); font-family: var(--serif-ko); font-size: 11px; }
.chat-memory-subject > span small, .chat-memory-subject > small { color: rgba(138,133,121,0.58); font-size: 9px; line-height: 1.5; }
.chat-memory-subject input {
  width: 100%; min-height: 44px; padding: 0 13px;
  border: 1px solid rgba(226,232,238,0.14); border-radius: 6px; outline: none;
  background: rgba(255,255,255,0.025); color: rgba(236,231,221,0.9);
  font-family: var(--serif-ko); font-size: 12.5px;
}
.chat-memory-subject input:focus { border-color: rgba(226,232,238,0.34); }
.chat-memory-subject input::placeholder { color: rgba(138,133,121,0.56); }
.chat-memory-note { display: grid; gap: 7px; }
.chat-memory-note > span { color: rgba(203,212,220,0.72); font-family: var(--serif-ko); font-size: 11px; }
.chat-memory-note > span small { margin-left: 5px; color: rgba(138,133,121,0.58); font-size: 9px; }
.chat-memory-note textarea {
  width: 100%; min-height: 94px; resize: vertical; padding: 12px 13px;
  border: 1px solid rgba(226,232,238,0.14); border-radius: 6px; outline: none;
  background: rgba(255,255,255,0.025); color: rgba(236,231,221,0.9);
  font-family: var(--serif-ko); font-size: 12.5px; line-height: 1.65;
}
.chat-memory-note textarea:focus { border-color: rgba(226,232,238,0.34); }
.chat-memory-note textarea::placeholder { color: rgba(138,133,121,0.56); }
.chat-memory-privacy { color: rgba(138,133,121,0.66); font-size: 9.5px; line-height: 1.55; word-break: keep-all; }
.chat-memory-clear {
  justify-self: start; padding: 4px 0; border: 0; background: none; cursor: pointer;
  color: rgba(197,145,145,0.72); font-family: var(--serif-ko); font-size: 10.5px;
}
.chat-onboard-actions, .chat-rest-actions { display: flex; flex-direction: column; gap: 10px; }
.chat-onboard-start, .chat-rest-yes {
  width: 100%; padding: 14px; border-radius: 14px; border: none; cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0) 28%),
    linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: #1a1206; font-family: var(--serif-ko); font-weight: 600; font-size: 14.5px; letter-spacing: 0.04em;
}
.chat-onboard-start:disabled { opacity: 0.42; cursor: default; filter: saturate(0.7); }
.chat-onboard-later, .chat-rest-no {
  width: 100%; padding: 12px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(226,232,238,0.14); background: none;
  color: rgba(217,226,234,0.68); font-family: var(--serif-ko); font-size: 13px; letter-spacing: 0.04em;
}

/* ---------------- 사진 라이트박스 ---------------- */
.lightbox { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, rgba(0,0,0,.86), rgba(0,0,0,.96)),
    rgba(0,0,0,.93);
  backdrop-filter: blur(7px); padding: 32px;
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.lightbox[aria-hidden="false"] { opacity: 1; visibility: visible; }
.lightbox img { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: 4px;
  box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 0 1px var(--hair-gold); filter: grayscale(.1) contrast(1.02);
  transform: scale(.96); transition: transform .45s cubic-bezier(.22,1,.36,1); }
.lightbox[aria-hidden="false"] img { transform: scale(1); }
.lightbox-close { position: absolute; top: calc(18px + env(safe-area-inset-top)); right: 20px;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hair);
  background: rgba(0,0,0,.46); color: var(--ink); font-size: 15px; cursor: pointer; z-index: 2; }
.lightbox-download {
  position: absolute; right: 20px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 8px 13px;
  border: 1px solid rgba(226,232,238,.16); border-radius: 19px; background: rgba(0,0,0,.56);
  color: rgba(236,231,221,.82); font-family: var(--serif-ko); font-size: 11px; text-decoration: none;
}
.lightbox-download[hidden] { display: none; }

/* ---------------- 빛 번짐 (점등 순간) ---------------- */
.bloom { position: fixed; inset: 0; z-index: 25; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 60%, rgba(255,212,132,.34), rgba(255,182,92,.08) 38%, transparent 66%); }
.bloom.flash { animation: bloomF 1.7s ease-out; }
@keyframes bloomF { 0% { opacity: 0; } 16% { opacity: 1; } 100% { opacity: 0; } }

/* ---------------- 고요한 소리 토글 ---------------- */
.sound-toggle { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom)); left: 18px; z-index: 30;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  border: 1px solid transparent;
  background:
    radial-gradient(circle at 50% 0%, rgba(226,232,238,.055), rgba(0,0,0,0) 58%) padding-box,
    linear-gradient(180deg, rgba(8,8,7,.52), rgba(2,2,2,.44)) padding-box,
    linear-gradient(135deg, rgba(226,232,238,.12), rgba(255,255,255,.03), rgba(217,226,234,.045)) border-box;
  backdrop-filter: blur(12px) saturate(.72);
  color: rgba(138,133,121,.66); font-size: 13px; opacity: .62; transition: all .25s; }
body[data-memory-layout="strip"] .sound-toggle {
  top: calc(20px + env(safe-area-inset-top));
  bottom: auto;
  left: 66px;
  width: 34px;
  height: 34px;
  font-size: 12px;
  opacity: .5;
}
.scene-left-tools .sound-toggle,
body[data-memory-layout="strip"] .scene-left-tools .sound-toggle {
  position: static;
  inset: auto;
  width: 38px;
  height: 38px;
  z-index: auto;
}
.sound-toggle:hover { opacity: .86; color: rgba(203,212,220,.78); box-shadow: 0 0 18px rgba(203,212,220,.07); }
.sound-toggle.on { opacity: .9; color: rgba(226,232,238,.86); box-shadow: 0 0 18px rgba(203,212,220,.16); }
.sound-toggle.on .snd-ic { animation: sndP 2.4s ease-in-out infinite; }
@keyframes sndP { 0%,100% { opacity: .7; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.12s !important;
  }
  .scene-hint,
  .grain,
  .sound-toggle.on .snd-ic,
  .portrait::after,
  .candle.lit .candle-glow {
    animation: none !important;
  }
}

/* ---------------- 필름 그레인 ---------------- */
.grain { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px; animation: grain 1.1s steps(2) infinite; }
@keyframes grain { 0% { background-position: 0 0; } 50% { background-position: -70px 40px; } 100% { background-position: 50px -60px; } }

/* ---------------- 기억 사진 크롭 ---------------- */
.pcrop { position: fixed; inset: 0; z-index: 56; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.82); backdrop-filter: blur(6px); padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
.pcrop[aria-hidden="false"] { opacity: 1; visibility: visible; }
.pcrop-card { position: relative; width: min(360px, 92vw); background: var(--surface-premium);
  border: 1px solid transparent; border-radius: 22px; padding: 26px 24px; text-align: center;
  box-shadow: var(--shadow-premium); }
.pcrop-title { font-family: var(--serif-ko); font-size: 18px; color: var(--ink); margin-bottom: 18px; letter-spacing: .04em; }
.pcrop-stage { width: 220px; height: 220px; margin: 0 auto; border-radius: 50%; overflow: hidden; position: relative;
  background: #15120c; border: 1px solid var(--hair-gold); box-shadow: 0 0 40px rgba(203,212,220,.12); cursor: grab; touch-action: none; }
.pcrop-stage:active { cursor: grabbing; }
.pcrop-stage img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  image-rendering: auto; user-select: none; -webkit-user-drag: none; }
.pcrop-zoom { width: 100%; margin: 18px 0 6px; accent-color: var(--gold); }
.pcrop-hint { font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.pcrop-actions { display: flex; gap: 12px; margin-top: 18px; }
.pcrop-cancel, .pcrop-go { flex: 1; padding: 13px; border-radius: 12px; font-family: var(--serif-ko); font-size: 14px; cursor: pointer; }
.pcrop-cancel { border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.12); color: var(--muted); }
.pcrop-go { width: auto; border: none; color: #1a1206; font-weight: 600; }

/* ---------- DEV: 화면 식별 라벨 ---------- */
/* 우측 상단 빨간 박스 — 현재 화면이 앱_화면 폴더 중 어디인지 표시. 클릭 통과 */
/* 검수 배지 — 시야를 가리지 않게: 배경·테두리 없이 반투명 텍스트만 (클릭은 원래 통과) */
.screen-tag {
  position: fixed; top: 7px; right: 12px; z-index: 9999;
  font-family: var(--serif-ko);
  font-size: 9px; line-height: 1.5; letter-spacing: 0.05em;
  color: rgba(226,232,238,0.42);
  pointer-events: none; text-align: right; max-width: 62%;
}
.screen-tag::before { content: '검수 · '; }
.screen-tag b { font-weight: 500; font-size: 9px; letter-spacing: 0.05em; }
.screen-tag span { color: rgba(226,232,238,0.28); }
.screen-tag span::before { content: ' · '; }
.screen-tag.off { display: none; }