*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── 크림베이지 베이스 ── */
  --bg-page:    #F0EDE8;
  --bg-card:    #FDFCFA;
  --bg-input:   #F7F4F0;
  --bd-card:    #E8E2D9;
  --bd-input:   #DDD7CE;

  /* ── 캐릭터 보라 포인트 ── */
  --purple:     #9B8EC4;
  --purple-dk:  #6B5FA0;
  --purple-lt:  #C8C0E8;
  --purple-bg:  #EEEAF8;

  /* ── 텍스트 ── */
  --text-primary:   #3D3450;
  --text-secondary: #8A7FA8;
  --text-muted:     #BCB4D0;

  /* ── 시맨틱 ── */
  --red:        #E07070;
  --red-bg:     #FDF0F0;
  --green:      #72B48A;
  --green-bg:   #EEF8F2;
  --blue:       #7AAED4;
  --blue-bg:    #EEF5FB;
  --amber:      #D4A056;
  --amber-bg:   #FBF4E8;

  --shadow-sm:  0 2px 8px rgba(100,80,150,0.07);
  --shadow-md:  0 4px 16px rgba(100,80,150,0.10);
  --radius-card: 20px;
  --radius-btn:  14px;
  --radius-input:14px;
}

html, body {
  height: 100%; width: 100%;
  font-family: 'Noto Sans KR', sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  overflow: hidden;
}

.page { display: none; flex-direction: column; height: 100dvh; }
.page.active { display: flex; }

/* ══════════════════════════════
   로그인
══════════════════════════════ */
#page-login {
  background: linear-gradient(160deg, #F0EDE8 0%, #EAE4F0 60%, #F0EDE8 100%);
  align-items: center; justify-content: center; overflow-y: auto;
}
.login-body {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 320px; padding: 40px 24px 32px; gap: 10px;
}
.login-logo { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 24px; }
.login-logo-icon {
  width: 88px; height: 88px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 12px rgba(155,142,196,0.3));
}
.login-logo-icon img { width: 100%; height: 100%; object-fit: contain; }
.login-logo-text { font-size: 20px; font-weight: 500; color: var(--text-primary); letter-spacing: -0.3px; }
.login-logo-sub  { font-size: 12px; color: var(--text-muted); }

.input-field {
  width: 100%; border: 1.5px solid var(--bd-input); border-radius: var(--radius-input);
  padding: 13px 16px; font-size: 14px; font-family: inherit;
  color: var(--text-primary); background: var(--bg-input); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input-field:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(155,142,196,0.15); background: white; }
.input-field::placeholder { color: var(--text-muted); }

.login-btn {
  width: 100%; padding: 14px; border-radius: var(--radius-btn);
  font-size: 15px; font-weight: 500; cursor: pointer; border: none;
  font-family: inherit; margin-top: 4px;
  transition: opacity 0.15s, transform 0.1s;
}
.lb-main {
  background: var(--purple-dk); color: white;
  box-shadow: 0 4px 14px rgba(107,95,160,0.3);
}
.lb-main:active { opacity: 0.88; transform: scale(0.98); }

.login-divider { display: flex; align-items: center; gap: 10px; width: 100%; margin: 6px 0; }
.divider-line  { flex: 1; height: 1px; background: var(--bd-card); }
.divider-text  { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

.social-full {
  width: 100%; padding: 13px 16px; border-radius: var(--radius-btn);
  font-size: 14px; font-weight: 500; font-family: inherit;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 10px; border: none; transition: opacity 0.15s, transform 0.1s;
}
.social-full:active { opacity: 0.85; transform: scale(0.98); }
.google-btn { background: white; color: #3C4043; border: 1.5px solid #DADCE0; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.kakao-btn  { background: #FFE812; color: #3C1E1E; }
.naver-btn  { background: #03C75A; color: white; }

.login-switch { font-size: 13px; color: var(--text-muted); margin-top: 8px; }
.login-switch span { color: var(--purple-dk); cursor: pointer; font-weight: 500; }
.auth-msg { font-size: 12px; min-height: 16px; color: var(--red); text-align: center; width: 100%; }
.auth-msg.success { color: var(--green); }

/* ══════════════════════════════
   앱 레이아웃
══════════════════════════════ */
#page-app {
  background: var(--bg-page);
  max-width: 480px; margin: 0 auto; width: 100%;
  display: flex; flex-direction: column; height: 100dvh;
}

/* 탑바 */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 10px;
  background: var(--bg-card);
  border-bottom: 1.5px solid var(--bd-card);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.topbar-left { display: flex; align-items: center; gap: 8px; }
.topbar-mascot {
  width: 28px; height: 28px;
  filter: drop-shadow(0 1px 3px rgba(155,142,196,0.25));
}
.topbar-mascot img { width: 100%; height: 100%; object-fit: contain; }
.topbar-title { font-size: 17px; font-weight: 500; color: var(--text-primary); }
.av {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--purple-bg); color: var(--purple-dk);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500;
}

/* 스크롤 */
.app-main { flex: 1; overflow-y: auto; padding: 14px 12px 76px; display: flex; flex-direction: column; gap: 12px; }
.app-main::-webkit-scrollbar { display: none; }
.tab-content { display: none; flex-direction: column; gap: 12px; }
.tab-content.active { display: flex; }

/* ── 카드 ── */
.card {
  background: var(--bg-card);
  border: 1.5px solid var(--bd-card);
  border-radius: var(--radius-card);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.write-card { background: linear-gradient(135deg, #FDFCFA 0%, #F5F1FC 100%); }
.sec { font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }

/* ── 스토리 ── */
.story-row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 2px; }
.story-row::-webkit-scrollbar { display: none; }
.story-item { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; cursor: pointer; }
.story-ring {
  width: 56px; height: 56px; border-radius: 50%;
  border: 2.5px solid var(--purple-lt);
  display: flex; align-items: center; justify-content: center;
}
.story-ring.seen { border-color: var(--bd-card); opacity: 0.6; }
.story-ring.add-ring { border-style: dashed; border-color: var(--purple-lt); }
.story-av {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--purple-bg); color: var(--purple-dk);
  font-size: 14px; font-weight: 500; overflow: hidden;
}
.add-av { background: var(--bg-page); }
.story-av img { width: 100%; height: 100%; object-fit: contain; }
.story-name { font-size: 10px; color: var(--text-muted); max-width: 56px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-emotion { font-size: 9px; padding: 1px 6px; border-radius: 8px; }

/* ── 일기 작성 카드 ── */
.write-hint { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
.write-fake-input {
  border: 1.5px solid var(--bd-input); border-radius: var(--radius-input);
  padding: 12px 14px; font-size: 13px; color: var(--text-muted);
  background: var(--bg-input); min-height: 64px; cursor: pointer; line-height: 1.5;
}
.write-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.irow { display: flex; gap: 6px; }
.ibtn {
  display: flex; align-items: center; gap: 4px; padding: 6px 11px;
  border: 1.5px solid var(--bd-input); border-radius: 10px;
  font-size: 11px; color: var(--text-secondary); background: var(--bg-input);
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.ibtn:active { background: var(--purple-bg); border-color: var(--purple-lt); }
.ibtn i { font-size: 13px; }
.abtn {
  padding: 7px 16px; border-radius: 10px; border: none;
  background: var(--purple-dk); font-size: 12px; font-weight: 500;
  color: white; cursor: pointer; font-family: inherit;
  box-shadow: 0 2px 8px rgba(107,95,160,0.25);
}

/* ── 미니 차트 ── */
.chart-mini { display: flex; align-items: flex-end; gap: 6px; height: 60px; }
.bc { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; }
.bar { width: 100%; border-radius: 6px 6px 0 0; }
.bday { font-size: 9px; color: var(--text-muted); }

/* ── 일기 카드 ── */
.diary-card {
  background: var(--bg-card); border: 1.5px solid var(--bd-card);
  border-radius: 18px; padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform 0.15s; position: relative;
}
.diary-card:active { transform: scale(0.98); }
.diary-card-actions { position: absolute; right: 12px; top: 12px; }
.btn-card-delete {
  width: 28px; height: 28px; border-radius: 8px;
  border: 1.5px solid #F0D0D0; background: #FDF5F5;
  color: var(--red); font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.drow { display: flex; justify-content: space-between; align-items: center; padding-right: 36px; }
.ddate { font-size: 11px; color: var(--text-muted); }
.tag { font-size: 10px; padding: 2px 9px; border-radius: 10px; font-weight: 500; }
.tg { background: var(--purple-bg); color: var(--purple-dk); }
.tf { background: var(--blue-bg);   color: var(--blue); }
.tc { background: var(--green-bg);  color: var(--green); }
.dbody { display: flex; gap: 10px; align-items: flex-start; }
.dtext { font-size: 13px; color: #666; line-height: 1.6; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dimg { width: 48px; height: 48px; border-radius: 12px; background: var(--bg-page); border: 1.5px solid var(--bd-card); flex-shrink: 0; overflow: hidden; }
.dimg img { width: 100%; height: 100%; object-fit: cover; }
.dfoot { display: flex; align-items: center; }
.gauge-w { display: flex; align-items: center; gap: 7px; }
.gauge { width: 56px; height: 5px; background: var(--bg-page); border-radius: 3px; overflow: hidden; }
.gf { height: 100%; border-radius: 3px; }

/* ── 배지 ── */
.badge { padding: 2px 9px; border-radius: 10px; font-size: 10px; font-weight: 500; }
.ej { background: var(--amber-bg); color: var(--amber); }
.es { background: var(--blue-bg);  color: var(--blue); }
.ec { background: var(--green-bg); color: var(--green); }
.ea { background: var(--red-bg);   color: var(--red); }
.ep { background: var(--purple-bg);color: var(--purple-dk); }

/* ── 날짜 인풋 ── */
.date-input {
  font-size: 12px; border: 1.5px solid var(--bd-input); border-radius: 10px;
  padding: 5px 10px; background: var(--bg-input); color: var(--text-primary);
  font-family: inherit; outline: none;
}

/* ── 하단 네비 ── */
.bnav {
  display: flex; justify-content: space-around; align-items: center;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  border-top: 1.5px solid var(--bd-card);
  background: var(--bg-card);
  box-shadow: 0 -2px 10px rgba(100,80,150,0.07);
  position: fixed; bottom: 0; left: 0; right: 0;
  max-width: 480px; margin: 0 auto; z-index: 100;
}
.ni { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9px; color: var(--text-muted); cursor: pointer; padding: 2px 12px; transition: color 0.15s; }
.ni.on { color: var(--purple-dk); }
.ni i { font-size: 22px; }

/* ── 그룹 ── */
.gp-list { display: flex; flex-direction: column; gap: 10px; }
.gp-card { background: var(--bg-card); border: 1.5px solid var(--bd-card); border-radius: 18px; padding: 14px; cursor: pointer; box-shadow: var(--shadow-sm); }
.gp-top { display: flex; align-items: center; gap: 12px; }
.gp-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--purple-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gp-info { flex: 1; }
.gp-name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.gp-members { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ── 프로필 ── */
.profile-hero { background: var(--bg-card); border: 1.5px solid var(--bd-card); border-radius: 20px; padding: 18px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-sm); }
.profile-av-wrap { position: relative; flex-shrink: 0; }
.profile-av { width: 56px; height: 56px; border-radius: 50%; background: var(--purple-bg); color: var(--purple-dk); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 500; }
.profile-mascot-badge {
  position: absolute; bottom: -2px; right: -2px;
  width: 24px; height: 24px; background: white; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(155,142,196,0.25);
}
.profile-mascot-badge img { width: 18px; height: 18px; object-fit: contain; }
.profile-name { font-size: 16px; font-weight: 500; color: var(--text-primary); margin-bottom: 3px; }
.profile-email { font-size: 12px; color: var(--text-muted); }

.friend-section { background: var(--bg-card); border: 1.5px solid var(--bd-card); border-radius: 18px; padding: 14px; box-shadow: var(--shadow-sm); }
.friend-sec-title { font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.friend-search { display: flex; gap: 6px; margin-bottom: 8px; }
.friend-search .input-field { flex: 1; }
.search-btn { padding: 0 14px; border-radius: 12px; border: none; background: var(--purple-dk); color: white; font-size: 13px; font-family: inherit; cursor: pointer; }
.friend-card { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--bg-page); }
.friend-card:last-child { border-bottom: none; }
.friend-info { display: flex; align-items: center; gap: 10px; }
.friend-av { width: 36px; height: 36px; border-radius: 50%; background: var(--purple-bg); color: var(--purple-dk); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; }
.friend-name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.btn-accept { padding: 6px 13px; border-radius: 9px; border: none; background: var(--purple-dk); color: white; font-size: 12px; font-family: inherit; cursor: pointer; }
.btn-remove { padding: 6px 13px; border-radius: 9px; border: 1.5px solid #F0D0D0; background: transparent; color: var(--red); font-size: 12px; font-family: inherit; cursor: pointer; }
.btn-add    { padding: 6px 13px; border-radius: 9px; border: none; background: var(--purple-dk); color: white; font-size: 12px; font-family: inherit; cursor: pointer; }
.btn-logout { display: block; width: 100%; padding: 13px; border-radius: var(--radius-btn); border: 1.5px solid var(--bd-card); background: transparent; color: var(--text-muted); font-size: 14px; font-family: inherit; cursor: pointer; margin-top: 4px; }

/* ── 분석 ── */
.analysis-card { background: var(--bg-card); border: 1.5px solid var(--bd-card); border-radius: 20px; padding: 18px; box-shadow: var(--shadow-sm); }
.analysis-title { font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }
.donut-wrap { display: flex; align-items: center; gap: 18px; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.legend-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #666; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── 모달 바텀시트 ── */
.modal-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(30,20,50,0.3); align-items: flex-end; justify-content: center; backdrop-filter: blur(2px); }
.modal-overlay.open { display: flex; }
.modal-sheet {
  background: var(--bg-card); border-radius: 28px 28px 0 0;
  padding: 20px 18px 40px; width: 100%; max-width: 480px;
  max-height: 88dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  animation: slideUp 0.28s cubic-bezier(0.34,1.56,0.64,1);
  position: relative; box-shadow: 0 -4px 24px rgba(100,80,150,0.12);
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-handle { width: 36px; height: 4px; background: var(--bd-card); border-radius: 2px; margin: 0 auto 6px; }
.sheet-title { font-size: 16px; font-weight: 500; color: var(--text-primary); }
.sheet-close { position: absolute; right: 16px; top: 18px; background: var(--bg-page); border: none; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 13px; color: var(--text-secondary); }

.diary-textarea {
  width: 100%; min-height: 140px; padding: 13px 14px;
  border: 1.5px solid var(--bd-input); border-radius: var(--radius-input);
  font-size: 14px; font-family: inherit; line-height: 1.65;
  resize: none; outline: none; color: var(--text-primary); background: var(--bg-input);
}
.diary-textarea:focus { border-color: var(--purple); background: white; }
.write-opts { display: flex; flex-direction: column; gap: 9px; }
.write-preview-img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 12px; }
.vis-select {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-input);
  border: 1.5px solid var(--bd-input); background: var(--bg-input);
  font-family: inherit; font-size: 14px; color: var(--text-primary); outline: none;
}

/* ── 상세 모달 ── */
.detail-content { font-size: 14px; line-height: 1.8; color: #666; white-space: pre-wrap; }
.detail-image { width: 100%; border-radius: 14px; }
.emotion-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.emo-row { display: flex; align-items: center; gap: 8px; }
.emo-label { font-size: 12px; width: 40px; flex-shrink: 0; color: var(--text-secondary); }
.emo-bar-bg { flex: 1; height: 6px; background: var(--bg-page); border-radius: 3px; overflow: hidden; }
.emo-bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.emo-score { font-size: 11px; color: var(--text-muted); width: 32px; text-align: right; }

/* ── 삭제 버튼 ── */
.btn-delete-diary {
  width: 100%; margin-top: 4px; padding: 12px;
  border: 1.5px solid #F0D0D0; border-radius: var(--radius-btn);
  background: var(--red-bg); color: var(--red);
  font-size: 14px; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-delete-diary:active { opacity: 0.7; }

/* ── 스토리 중앙 모달 ── */
.modal-center-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(30,20,50,0.35); backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
}
.modal-center-overlay.open { display: flex; }
.modal-center-sheet {
  background: var(--bg-card); border-radius: 24px;
  padding: 24px 20px; width: calc(100% - 40px); max-width: 420px;
  max-height: 80dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  animation: popIn 0.22s cubic-bezier(0.34,1.56,0.64,1);
  position: relative; box-shadow: 0 8px 40px rgba(100,80,150,0.18);
}
@keyframes popIn { from { transform: scale(0.88); opacity:0; } to { transform: scale(1); opacity:1; } }
.story-modal-header { display: flex; align-items: center; gap: 10px; }
.story-modal-av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; flex-shrink: 0; }
.story-modal-name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.story-modal-date { font-size: 11px; color: var(--text-muted); }
.story-modal-content { font-size: 14px; line-height: 1.8; color: #666; white-space: pre-wrap; }
.story-modal-image { width: 100%; border-radius: 14px; }

/* ── 빈 상태 / 토스트 ── */
.empty { text-align: center; padding: 36px 0; color: var(--text-muted); font-size: 13px; }
.empty i { font-size: 34px; display: block; margin-bottom: 10px; }
.toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--text-primary); color: white; padding: 11px 22px;
  border-radius: 22px; font-size: 13px; opacity: 0; pointer-events: none;
  z-index: 300; white-space: nowrap; transition: all 0.25s;
  box-shadow: 0 4px 16px rgba(60,40,100,0.2);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.tab-page-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 2px; }
.tab-page-title { font-size: 17px; font-weight: 500; color: var(--text-primary); }

/* ── 로그인 화면일 때 하단 네비 숨김 ── */
#page-app:not(.active) .bnav { display: none !important; }

/* ── 그룹 상세 ── */
.group-detail-desc { font-size: 13px; color: var(--text-secondary); padding: 4px 0 8px; }
.group-member-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--bg-page);
}
.group-member-row:last-child { border-bottom: none; }
.group-member-info { display: flex; align-items: center; gap: 10px; }
.group-member-av { width: 34px; height: 34px; border-radius: 50%; background: var(--purple-bg); color: var(--purple-dk); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; }
.group-member-name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.group-member-role { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.group-friend-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--bg-page);
}
.group-friend-row:last-child { border-bottom: none; }
.btn-invite { padding: 5px 12px; border-radius: 9px; border: none; background: var(--purple-dk); color: white; font-size: 12px; font-family: inherit; cursor: pointer; }
.btn-invite:disabled { background: var(--text-muted); cursor: default; }

/* ── 스토리 조회자 ── */
.story-viewers {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bd-card);
}
.viewers-title {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.viewers-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 150px;
  overflow-y: auto;
}
.viewer-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.viewer-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--purple-bg);
  color: var(--purple-dk);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.viewer-name {
  font-size: 13px;
  color: var(--text-primary);
  flex: 1;
}
.viewer-time {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── 스토리 만료 시간 ── */
.story-expire {
  font-size: 11px;
  color: var(--purple);
  margin-top: 2px;
  font-weight: 500;
}

/* ── 그룹 개선 ── */
.gp-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}