/* ==============================================================================
   CareVerse (Care) - Calm Luxury & Editorial Health Design System
   ============================================================================== */

:root {
  /* Color Palette: Sage Green, Warm Sand, Deep Slate */
  --bg-app: #F7F9F7;
  --bg-card: #FFFFFF;
  --bg-subtle: #EEF2EE;

  --primary: #2D4B3E;
  /* Deep Sage Green */
  --primary-hover: #223A30;
  --primary-light: #E5EDE8;
  --accent-emerald: #438E6E;

  --text-main: #1C2623;
  --text-muted: #5C6E67;
  --text-light: #8E9F98;

  --border-light: #E1E8E3;
  --border-subtle: #EDF2EE;

  /* Status Scale Colors (Calm & Elegant) */
  --scale-1: #3B7A57;
  /* 가뿐해요 - Forest Green */
  --scale-2: #5B8C6E;
  /* 살짝 뻐근해요 - Sage */
  --scale-3: #B38640;
  /* 불편해요 - Muted Ochre */
  --scale-4: #B85D3B;
  /* 꽤 아파요 - Terracotta */
  --scale-5: #A83232;
  /* 쑤셔요 - Wine Red */

  --shadow-sm: 0 2px 8px rgba(28, 38, 35, 0.04);
  --shadow-md: 0 6px 20px rgba(28, 38, 35, 0.07);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Segoe UI", Roboto, sans-serif;
}

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

html,
body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden !important;
  position: fixed;
  inset: 0;
  font-family: var(--font-family);
  background-color: var(--bg-app);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

.app-container {
  width: 100%;
  max-width: 520px;
  height: 100%;
  height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  position: relative;
  background: var(--bg-app);
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.06);
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  box-sizing: border-box;
}

@media (max-width: 540px) {
  .app-container {
    max-width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
  }
}

/* 1. Header & Branding (Ultra-Compact & App-Fitted) */
.app-header {
  padding: 10px 14px 6px;
  padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
  padding-left: max(14px, env(safe-area-inset-left, 0px));
  padding-right: max(14px, env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-app);
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  flex-shrink: 0;
  z-index: 100;
}

.brand-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.brand-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--primary);
  line-height: 1;
}

.brand-sub {
  display: none;
}

.header-room-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 0;
  padding: 3px 8px;
  background: rgba(45, 75, 62, 0.08);
  border: 1px solid rgba(45, 75, 62, 0.16);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

.header-room-badge:hover {
  background: rgba(45, 75, 62, 0.14);
}

.header-room-badge:active {
  transform: scale(0.95);
  background: rgba(45, 75, 62, 0.2);
}

.header-room-badge .room-pill-icon {
  font-size: 10px;
  flex-shrink: 0;
}

.header-room-badge #headerRoomName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 1;
  min-width: 0;
  flex-wrap: nowrap;
}

/* Real-Time Sync Indicator */
.sync-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 12px;
  background: rgba(67, 142, 110, 0.08);
  border: 1px solid rgba(67, 142, 110, 0.2);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent-emerald);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-emerald);
  box-shadow: 0 0 6px rgba(67, 142, 110, 0.6);
  animation: pulse-dot 2s infinite;
}

.sync-badge.connecting {
  background: rgba(179, 134, 64, 0.08);
  border-color: rgba(179, 134, 64, 0.2);
  color: var(--scale-3);
}

.sync-badge.connecting .sync-dot {
  background: var(--scale-3);
  box-shadow: none;
  animation: blink-dot 1s infinite;
}

.sync-badge.disconnected {
  background: rgba(142, 159, 152, 0.1);
  border-color: rgba(142, 159, 152, 0.2);
  color: var(--text-light);
}

.sync-badge.disconnected .sync-dot {
  background: var(--text-light);
  box-shadow: none;
  animation: none;
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

@keyframes blink-dot {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }
}

/* Family Room Chip Button */
.room-chip-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  border-radius: 20px;
  border: 1px solid var(--border-light);
  background: #FFF;
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap !important;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
  transition: all 0.2s;
}

.room-chip-btn:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}

.room-icon {
  font-size: 11px;
}

.user-chip-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 20px;
  border: 1px solid var(--border-light);
  background: #FFF;
  color: var(--text-main);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap !important;
  flex-shrink: 0;
  transition: all 0.2s;
}

.user-chip-btn:hover {
  background: var(--bg-subtle);
  border-color: var(--primary);
}

.avatar-dot-small {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-emerald);
  flex-shrink: 0;
}

.chip-edit-icon {
  font-size: 9px;
  color: var(--text-light);
}

.icon-btn {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: #FFF;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: all 0.2s;
}

.icon-btn svg {
  width: 15px;
  height: 15px;
}

.icon-btn:hover {
  background: var(--bg-subtle);
  color: var(--primary);
}

/* 2. Channel Navigation (Fluid Responsive Carousel & Edge Fade) */
.channel-nav-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-app);
  z-index: 90;
  flex-shrink: 0;
  padding: 4px 10px 8px;
}

/* Left & Right gradient fade masks to hint overflow */
.channel-nav-wrapper::before,
.channel-nav-wrapper::after {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 8px;
  width: 24px;
  pointer-events: none;
  z-index: 95;
  transition: opacity 0.25s ease;
  opacity: 0;
}

.channel-nav-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-app) 20%, rgba(247, 249, 247, 0));
}

.channel-nav-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-app) 20%, rgba(247, 249, 247, 0));
}

.channel-nav-wrapper.can-scroll-left::before {
  opacity: 1;
}

.channel-nav-wrapper.can-scroll-right::after {
  opacity: 1;
}

.channel-scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  z-index: 98;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  line-height: 1;
  padding: 0;
}

.channel-scroll-arrow:hover {
  background: #FFF;
  color: var(--accent-emerald);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.channel-scroll-arrow.left {
  left: 4px;
}

.channel-scroll-arrow.right {
  right: 4px;
}

.channel-nav {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x !important;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  cursor: grab;
  padding: 2px 4px;
}

.channel-nav:active {
  cursor: grabbing;
}

.channel-nav::-webkit-scrollbar {
  display: none;
}

.channel-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  touch-action: pan-x !important;
  width: max-content;
  min-width: 100%;
}

.tab-chip {
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-light);
  background: #FFF;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  touch-action: pan-x !important;
  user-select: none;
  -webkit-user-select: none;
}

.tab-chip * {
  pointer-events: none;
}

.tab-chip .tab-del-btn {
  pointer-events: auto;
}

.tab-chip:hover {
  border-color: var(--accent-emerald);
  background: #FAFDFB;
  transform: translateY(-1px);
}

.tab-chip.active {
  background: var(--primary);
  color: #FFF;
  border-color: var(--primary);
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(45, 75, 62, 0.22);
}

.tab-chip.add-tab {
  background: transparent;
  border-style: dashed;
  color: var(--primary);
  border-color: rgba(45, 75, 62, 0.3);
}

.tab-chip.add-tab:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

/* 3. Main Content (Smooth Native Vertical Scroll & Edge-to-Edge Full Width) */
.main-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  padding: 0 0 40px;
  padding-bottom: max(40px, calc(20px + env(safe-area-inset-bottom)));
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  scrollbar-width: none;
  /* 파이어폭스 스크롤바 트랙 숨김 */
  -ms-overflow-style: none;
  /* IE/엣지 */
}

/* 크롬, 사파리 등 웹킷 브라우저 데스크톱 스크롤바 트랙 완전 제거 (우측 공백 제거) */
.main-content::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Allow text selection only in content elements */
input,
textarea,
p,
.feed-memo,
.comment-text-body,
.aura-status-text {
  user-select: text;
  -webkit-user-select: text;
  touch-action: pan-y;
}

/* Checkin Card (Edge-to-Edge Full Native Width) */
.card {
  background: var(--bg-card);
  border-radius: 0;
  padding: 18px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  border-left: none;
  border-right: none;
  width: 100%;
  box-sizing: border-box;
}

.card.checkin-card {
  background: #F4F7F5;
  border-left: 4px solid var(--primary);
  border-top: 1px solid rgba(45, 75, 62, 0.12);
  border-bottom: 1px solid rgba(45, 75, 62, 0.12);
  border-right: none;
  box-shadow: 0 3px 14px rgba(45, 75, 62, 0.05);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card.checkin-card.is-collapsed {
  background: #FAFCFA;
  padding: 10px 14px;
  border-left: 3px solid var(--accent-emerald);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.card-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-fold-checkin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-fold-checkin:hover {
  background: #FFF;
  color: var(--primary);
  border-color: var(--accent-emerald);
}

.btn-fold-checkin .fold-icon {
  font-size: 9px;
  transition: transform 0.25s ease;
}

.checkin-collapsible-body {
  max-height: 4500px;
  /* 병원 일정 등 확장 시 하단 타임라인과 절대 겹치지 않도록 충분한 높이 확보 */
  opacity: 1;
  overflow: visible;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.checkin-card.is-collapsed {
  padding-bottom: 14px;
}

.checkin-card.is-collapsed .checkin-collapsible-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.checkin-card.is-collapsed .checkin-collapsed-preview {
  display: flex;
}

.checkin-card.is-collapsed .btn-fold-checkin {
  background: var(--primary-light);
  color: var(--primary);
  border-color: rgba(45, 75, 62, 0.25);
}

.badge-channel {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  padding: 3px 10px;
  border-radius: 12px;
}

.checkin-time {
  font-size: 12px;
  color: var(--text-light);
}

.card-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.card-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 18px;
}

/* ==============================================================================
   환부 미등록 시 온보딩 안내 카드 (Checkin Empty Channel Guide)
   ============================================================================== */
.checkin-empty-channel-guide {
  text-align: center;
  padding: 22px 14px 18px;
  background: linear-gradient(180deg, rgba(235, 243, 238, 0.45) 0%, rgba(255, 255, 255, 0.98) 100%);
  border-radius: 16px;
  border: 1px dashed rgba(45, 75, 62, 0.22);
  margin-top: 6px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.guide-hero-icon {
  width: 48px;
  height: 48px;
  line-height: 48px;
  font-size: 24px;
  background: #FFF;
  border-radius: 50%;
  margin: 0 auto 10px;
  box-shadow: 0 4px 14px rgba(45, 75, 62, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-guide-title {
  font-size: 17.5px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}

.empty-guide-desc {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  margin: 0 auto 16px;
  width: 100%;
}

.empty-guide-desc .guide-line {
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 500;
  color: #4A6356;
  line-height: 1.45;
  letter-spacing: -0.3px;
}

.empty-guide-action-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.btn-guide-add-channel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #2D4B3E 0%, #1E382B 100%);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(45, 75, 62, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-guide-add-channel:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(45, 75, 62, 0.3);
}

.btn-guide-add-channel:active {
  transform: scale(0.98);
}

.empty-guide-voice-hint {
  font-size: 12px;
  color: #7A8E83;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  white-space: nowrap;
}

/* Scale Chips */
.scale-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.chip-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-light);
  background: #FFF;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.chip-item .chip-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.chip-item .chip-label {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-main);
}

.chip-item.active {
  border-color: var(--primary);
  background: var(--primary-light);
}

.chip-item.active .chip-num {
  background: var(--primary);
  color: #FFF;
}

/* WebAuthn Biometric Section in Profile Modal */
.biometric-auth-section {
  background: var(--bg-app);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-top: 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bio-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bio-icon {
  font-size: 22px;
}

.bio-title-wrap {
  display: flex;
  flex-direction: column;
}

.bio-title-wrap strong {
  font-size: 13.5px;
  color: var(--text-main);
}

.bio-sub {
  font-size: 11px;
  color: var(--text-light);
}

.bio-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(142, 159, 152, 0.12);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  width: fit-content;
}

.bio-status-badge.registered {
  background: rgba(67, 142, 110, 0.12);
  color: var(--accent-emerald);
}

.bio-status-badge.registered .bio-dot {
  background: var(--accent-emerald);
  box-shadow: 0 0 6px rgba(67, 142, 110, 0.6);
}

.bio-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-light);
}

.btn-biometric {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--accent-emerald);
  background: #FFF;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-biometric:hover {
  background: var(--primary-light);
}

.btn-biometric-verify {
  width: 100%;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-biometric-verify:hover {
  background: var(--bg-subtle);
  color: var(--primary);
}

/* ==============================================================================
     Sleep Check-in Wrap (어젯밤 수면 시간 하루 1회 간편 선택 & 스마트 자동 축소)
     ============================================================================== */
.sleep-checkin-wrap {
  background: #F3F6F4;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 12px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.sleep-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}

.sleep-title-block {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  white-space: nowrap;
}

.sleep-icon-moon {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

.sleep-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.2px;
  white-space: nowrap !important;
  word-break: keep-all;
}

.sleep-hint-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(45, 75, 62, 0.1);
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap !important;
  flex-shrink: 0;
  line-height: 1.2;
}

.btn-toggle-sleep {
  border: none;
  background: rgba(45, 75, 62, 0.08);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  white-space: nowrap !important;
  flex-shrink: 0;
  transition: all 0.18s ease;
}

.btn-toggle-sleep:hover {
  color: #FFFFFF;
  background: var(--primary);
}

.sleep-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #D6E3DC;
  animation: fadeInDown 0.2s ease-out;
}

.sleep-chip {
  flex: 1 1 calc(33.333% - 6px);
  min-width: 80px;
  padding: 7px 10px;
  background: #FFFFFF;
  border: 1.5px solid var(--border-light);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  text-align: center;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.sleep-chip:hover {
  border-color: var(--accent-emerald);
  background: #FAFDFB;
}

.sleep-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(45, 75, 62, 0.25);
}

/* 타임라인 피드 카드 내 수면 뱃지 */
.sleep-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(45, 75, 62, 0.08);
  border: 1px solid rgba(45, 75, 62, 0.15);
  color: #1E3A30;
  font-size: 11.5px;
  font-weight: 700;
}

.sleep-pill-icon {
  font-size: 11.5px;
}

.sleep-pill-text {
  letter-spacing: -0.2px;
}

/* Input Composer Card (Spacious & Clean Layout) */
.input-composer-card {
  background: #FFF;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-light);
  padding: 12px 14px 10px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input-composer-card:focus-within {
  border-color: var(--accent-emerald);
  box-shadow: 0 0 0 3px rgba(67, 142, 110, 0.12);
}

.composer-textarea-wrap {
  width: 100%;
}

.composer-textarea {
  width: 100%;
  min-height: 52px;
  max-height: 180px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-main);
  outline: none;
  resize: none;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  box-sizing: border-box;
  padding: 0;
}

.composer-textarea::placeholder {
  color: var(--text-light);
  font-size: 13.5px;
}

/* Toolbar with Audio & Photo Buttons */
.composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-light);
  background: var(--bg-app);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tool-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--accent-emerald);
}

.tool-btn.active-record {
  background: #A83232 !important;
  color: #FFF !important;
  border-color: #A83232 !important;
  animation: pulse-dot 1.2s infinite;
}

.tool-btn.has-photo {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border-color: var(--accent-emerald) !important;
  font-weight: 700;
}

/* Photo Preview Box (Clean & Beautiful) */
.photo-preview-wrap {
  background: var(--bg-app);
  border-radius: 12px;
  padding: 8px 12px;
  border: 1px dashed var(--accent-emerald);
}

.photo-preview-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.photo-preview-box img {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.photo-preview-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.photo-preview-tag {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-emerald);
}

.photo-preview-sub {
  font-size: 11px;
  color: var(--text-light);
}

.btn-remove-photo {
  position: absolute;
  top: -6px;
  left: 46px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #A83232;
  color: #FFF;
  border: 2px solid #FFF;
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.voice-tip {
  font-size: 12px;
  color: var(--text-light);
}

.btn-text {
  background: none;
  border: none;
  color: var(--accent-emerald);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* Treatment Section & Chips */
.treatment-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.treatment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.treat-chip {
  padding: 6px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-light);
  background: #FFF;
  font-size: 12.5px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.treat-chip.active {
  border-color: var(--accent-emerald);
  background: rgba(67, 142, 110, 0.08);
  color: var(--primary);
  font-weight: 600;
}

.add-tag-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.input-tag {
  flex: 1;
  border: 1px solid var(--border-light);
  background: var(--bg-app);
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 12px;
  outline: none;
}

.input-tag:focus {
  border-color: var(--primary);
  background: #FFF;
}

.btn-tag-add {
  padding: 7px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  background: #FFF;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-tag-add:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}

/* Submit Button */
.btn-submit {
  width: 100%;
  padding: 15px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--primary);
  color: #FFF;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(45, 75, 62, 0.25);
  margin-top: 20px;
  margin-bottom: 8px;
}

.btn-submit:hover {
  background: var(--primary-hover);
}

.btn-submit:active {
  transform: scale(0.98);
}

/* 4. Timeline Feed */
.timeline-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
  /* 기록 완료 버튼과 확실하게 이격 */
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 14px 6px;
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}

.merkle-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-emerald);
  background: rgba(67, 142, 110, 0.1);
  padding: 2px 8px;
  border-radius: 10px;
}

.feed-card {
  background: #FFF;
  border-radius: 0;
  padding: 16px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  border-left: none;
  border-right: none;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feed-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feed-author {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.author-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-emerald);
}

.btn-history-tag {
  font-size: 11px;
  color: var(--text-light);
  border: 1px solid var(--border-light);
  background: var(--bg-app);
  padding: 2px 8px;
  border-radius: 10px;
  cursor: pointer;
}

.pain-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  margin-bottom: 6px;
}

.pain-badge.level-2 {
  background: rgba(91, 140, 110, 0.15);
  color: var(--scale-2);
}

.feed-memo {
  font-size: 14.5px;
  color: var(--text-main);
  line-height: 1.4;
}

.feed-tags {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.feed-tags .tag {
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: 2px 8px;
  border-radius: 8px;
}

/* Reaction Bar - 7종 안심 응원 칩 */
.reaction-chips-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 0 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--border-subtle);
}

.reaction-chips-row::-webkit-scrollbar {
  display: none;
}

.react-chip {
  flex-shrink: 0;
  padding: 6px 11px;
  border-radius: 16px;
  border: 1px solid var(--border-light);
  background: var(--bg-app);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}

.react-chip:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--accent-emerald);
  transform: translateY(-1px);
}

.react-chip.active {
  border-color: var(--accent-emerald);
  background: #EAF3EE;
  color: var(--primary);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(67, 142, 110, 0.15);
}

.react-chip .react-num {
  font-size: 11px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 6px;
  border-radius: 10px;
  color: var(--text-muted);
  margin-left: 2px;
}

.react-chip.active .react-num {
  background: var(--accent-emerald);
  color: #FFF;
}

.feed-timestamp {
  font-size: 11.5px;
  color: var(--text-light);
  font-weight: 500;
}

.feed-relative {
  color: var(--text-muted);
}

.meta-separator {
  color: var(--border-light);
  margin: 0 2px;
}

.feed-comments {
  background: var(--bg-app);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comment-items-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment-item {
  background: #FFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.comment-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
}

.comment-author-badge strong {
  color: var(--primary);
  font-weight: 700;
}

.comment-timestamp {
  color: var(--text-light);
  font-size: 11px;
  margin-left: auto;
  margin-right: 6px;
}

.btn-del-comment {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 3px;
  border-radius: 4px;
  transition: all 0.15s;
}

.btn-del-comment:hover {
  background: #FFEAEA;
  color: #A83232;
}

.comment-text-body {
  font-size: 12.5px;
  color: var(--text-main);
  line-height: 1.4;
  word-break: break-word;
}

/* 5. Audit Drawer Modal */
.drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.drawer-panel {
  width: 100%;
  max-width: 480px;
  background: #FFF;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 24px 20px 30px;
  max-height: 80vh;
  overflow-y: auto;
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.drawer-header h4 {
  font-size: 16px;
  font-weight: 700;
}

.btn-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted);
}

.audit-timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.audit-node {
  padding-left: 14px;
  border-left: 2px solid var(--border-light);
  position: relative;
}

.audit-node.proxy {
  border-left-color: var(--accent-emerald);
}

.audit-time {
  font-size: 11px;
  color: var(--text-light);
  display: block;
  margin-bottom: 2px;
}

.audit-desc strong {
  font-size: 13.5px;
  color: var(--text-main);
}

.proxy-badge {
  font-size: 10.5px;
  background: rgba(67, 142, 110, 0.15);
  color: var(--primary);
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: 4px;
}

.audit-desc p {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.proxy-reason {
  font-size: 11.5px;
  color: var(--accent-emerald);
  display: block;
  margin-top: 2px;
}

.audit-footer {
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

.hash-text {
  font-size: 11px;
  color: var(--text-light);
}

.hash-text code {
  background: var(--bg-subtle);
  padding: 2px 4px;
  border-radius: 4px;
  color: var(--text-muted);
}

/* 6. Empty Feed State */
.empty-feed-card {
  background: #FFF;
  border-radius: 0;
  padding: 36px 14px;
  text-align: center;
  border-top: 1px dashed var(--border-light);
  border-bottom: 1px dashed var(--border-light);
  border-left: none;
  border-right: none;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.empty-icon {
  font-size: 32px;
  margin-bottom: 4px;
}

.empty-feed-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.empty-feed-card p {
  font-size: 13px;
  color: var(--text-light);
}

/* 7. Modal Card & Forms */
.modal-card {
  width: 90%;
  max-width: 420px;
  background: #FFF;
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.form-input,
.form-select {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: var(--bg-app);
  font-size: 13.5px;
  color: var(--text-main);
  outline: none;
  font-family: inherit;
}

.form-input:focus,
.form-select:focus {
  border-color: var(--primary);
  background: #FFF;
}

.checkbox-row {
  margin-top: -4px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-main);
  cursor: pointer;
}

/* 8. Feed Actions & Comments Input */
.feed-actions-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-edit-record {
  font-size: 11px;
  color: var(--text-muted);
  border: 1px solid var(--border-light);
  background: #FFF;
  padding: 2px 7px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-edit-record:hover {
  background: var(--bg-subtle);
  color: var(--primary);
}

.comment-input-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-light);
}

.input-comment {
  flex: 1;
  border: 1px solid var(--border-light);
  background: #FFF;
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 12.5px;
  outline: none;
}

.input-comment:focus {
  border-color: var(--primary);
}

.btn-send-comment {
  padding: 6px 12px;
  border-radius: 14px;
  border: none;
  background: var(--primary);
  color: #FFF;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* 9. Dynamic Tabs & Tab Actions */
.tab-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-light);
  background: #FFF;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tab-chip:hover {
  background: var(--bg-subtle);
  border-color: var(--border-light);
}

.tab-chip.active {
  background: var(--primary);
  color: #FFF;
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(45, 75, 62, 0.18);
  padding: 8px 10px 8px 14px;
}

.tab-chip .tab-sub {
  font-size: 11.5px;
  opacity: 0.85;
  font-weight: 400;
}

/* 탭 내부 우측에 자연스럽게 자리잡는 삭제 버튼 (튀어나오지 않는 캡슐 일체형) */
.tab-del-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  margin-left: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  background: rgba(255, 255, 255, 0.28);
  color: #FFF;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
}

.tab-del-btn:hover {
  background: #E04B4B;
  color: #FFF;
  transform: scale(1.12);
}

/* 10. Doctor Summary Report Modal (Doctor-Ready 1-Page Clean View) */
.doctor-modal {
  max-width: 480px;
  width: 95%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.doctor-report-body {
  overflow-y: auto;
  padding: 10px 2px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 상단 임상 브리핑 헤더 */
.doc-clinical-header {
  background: linear-gradient(135deg, #F2F7F4 0%, #E8F0EC 100%);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doc-header-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.doc-patient-badge {
  font-size: 15px;
  font-weight: 800;
  color: var(--primary);
}

.doc-period-text {
  font-size: 11.5px;
  color: var(--text-light);
}

.doc-merkle-proof {
  font-size: 11px;
  color: var(--accent-emerald);
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  background: rgba(67, 142, 110, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
  word-break: break-all;
}

/* 핵심 임상 3대 지표 카드 그리드 */
.doc-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.doc-metric-card {
  background: #FFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.doc-metric-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.doc-metric-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
}

.doc-metric-sub {
  font-size: 10.5px;
  color: var(--text-light);
}

/* 통증 시계열 SVG 차트 영역 */
.doc-chart-section {
  background: #FFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px 12px;
}

.doc-chart-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.doc-chart-svg {
  width: 100%;
  height: 130px;
  overflow: visible;
}

/* 상세 진료 타임라인 리스트 */
.doc-records-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doc-rec-card {
  background: #FFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.doc-rec-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.doc-rec-date {
  font-weight: 600;
  color: var(--text-main);
}

.doc-rec-level {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

.doc-rec-treats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.doc-rec-tag {
  font-size: 11px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: 4px;
}

.doc-rec-memo {
  font-size: 12.5px;
  color: var(--text-main);
  background: var(--bg-app);
  padding: 5px 8px;
  border-radius: 6px;
  margin-top: 3px;
}

.doctor-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

.btn-doc-action {
  flex: 1;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s;
}

.btn-doc-copy {
  background: var(--bg-app);
  border: 1px solid var(--border-light);
  color: var(--text-main);
}

.btn-doc-copy:hover {
  background: var(--bg-subtle);
}

.btn-doc-print {
  background: var(--primary);
  border: none;
  color: #FFF;
}

.btn-doc-print:hover {
  background: var(--primary-hover);
}

/* 11. Onboarding Intro Guide Modal */
.onboarding-modal {
  max-width: 440px;
  width: 90%;
  padding: 24px 22px;
  text-align: center;
  position: relative;
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(28, 38, 35, 0.18);
  animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPop {
  from {
    transform: scale(0.95);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.onboarding-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.onboarding-badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--primary);
  background: var(--primary-light);
  padding: 4px 12px;
  border-radius: 12px;
}

.onboarding-slides {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.onboarding-slide {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.onboarding-slide.active {
  display: flex;
  animation: fadeInSlide 0.25s ease-out;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-icon {
  font-size: 50px;
  line-height: 1;
  margin-bottom: 6px;
}

.slide-title {
  font-size: 21px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.35;
  margin-bottom: 4px;
}

.slide-desc {
  font-size: 15.5px;
  color: #374741;
  line-height: 1.65;
  max-width: 360px;
  margin: 0 auto;
}

.slide-desc strong {
  color: var(--primary);
  font-weight: 700;
}

.onboarding-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 22px 0 16px;
}

.onboarding-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-light);
  cursor: pointer;
  transition: all 0.2s;
}

.onboarding-dots .dot.active {
  background: var(--primary);
  width: 24px;
  border-radius: 10px;
}

/* 온보딩 버튼 정렬: 1단계는 100% 꽉 채우고, 2단계부터는 이전(100px) + 다음(남은 영역) 완벽 정렬 */
.onboarding-actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 18px !important;
}

.btn-ob-prev {
  flex: 0 0 100px !important;
  width: 100px !important;
  background: #FFFFFF !important;
  border: 1.5px solid var(--border-light) !important;
  color: var(--text-muted) !important;
  padding: 13px 0 !important;
  border-radius: var(--radius-sm) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-ob-prev:hover {
  background: var(--bg-subtle) !important;
  color: var(--text-main) !important;
  border-color: var(--accent-emerald) !important;
}

.btn-ob-next {
  flex: 1 !important;
  width: auto !important;
  background: var(--primary) !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 13px 20px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(45, 75, 62, 0.25) !important;
}

.btn-ob-next:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-1px) !important;
}

.onboarding-bottom-check {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-light);
  display: flex;
  justify-content: center;
}

.onboarding-bottom-check .checkbox-label {
  font-size: 12px;
  color: var(--text-light);
}

/* ==============================================================================
   7. 아바타 활력 오라 & 가족 스트릭 배너 (Vitality Aura & Streak Banner)
   ============================================================================== */
.vitality-aura-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #FFFFFF 0%, #F4F8F5 100%);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.vitality-aura-banner::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(67, 142, 110, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.aura-avatar-glow {
  position: relative;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aura-pulse-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(67, 142, 110, 0.4) 0%, transparent 75%);
  animation: vitalityRingPulse 2.8s infinite ease-in-out;
  pointer-events: none;
}

.aura-avatar-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--accent-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 3px 10px rgba(45, 75, 62, 0.15);
  position: relative;
  z-index: 1;
}

.aura-info-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.aura-status-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.aura-status-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.35;
}

.aura-streak-badge {
  font-size: 11px;
  font-weight: 700;
  color: #B45309;
  background: #FEF3C7;
  padding: 4px 8px;
  border-radius: 20px;
  border: 1px solid #FDE68A;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

@keyframes vitalityRingPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.18);
    opacity: 0.15;
  }

  100% {
    transform: scale(0.9);
    opacity: 0.6;
  }
}

/* ==============================================================================
   8. 정밀 줌인 드릴다운 & 스마트 인체 검색 (CareVerse Precision Anatomy Engine)
   ============================================================================== */
.modal-drilldown-card {
  max-width: 540px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 22px 20px;
  border-radius: 20px;
}

.bm-modal-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.3px;
  margin: 0;
}

.bm-modal-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 3px 0 0;
}

/* 5. Minimal Channel Creation Modal Styles (v5.8 Luxury Redesign) */
.channel-modal-section {
  margin-bottom: 12px;
}

.modal-sec-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}

/* 1-Touch Patient Selector Pills */
.patient-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.btn-patient-pill {
  background: #FFFFFF;
  border: 1.5px solid var(--border-light);
  border-radius: 18px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-patient-pill:hover {
  border-color: var(--accent-emerald);
  background: #FAFDFB;
  color: var(--primary);
}

.btn-patient-pill.active {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(45, 75, 62, 0.25);
}

.btn-patient-pill.custom {
  background: transparent;
  border-style: dashed;
  color: var(--text-muted);
}

.custom-patient-inline {
  margin-top: 8px;
}

/* Quick Representative Body Part Presets */
.quick-preset-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

@media (max-width: 440px) {
  .quick-preset-chips {
    grid-template-columns: repeat(2, 1fr);
  }
}

.preset-chip {
  background: #FFFFFF;
  border: 1.5px solid var(--border-light);
  border-radius: 12px;
  padding: 8px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.preset-chip:hover {
  border-color: var(--accent-emerald);
  background: #FAFDFB;
  transform: translateY(-1px);
}

.preset-chip.active {
  background: var(--primary-light);
  border-color: var(--accent-emerald);
  color: var(--primary);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(67, 142, 110, 0.2);
}

/* Input with Icon Picker */
.input-with-icon-picker {
  display: flex;
  gap: 8px;
}

.icon-select {
  width: auto !important;
  min-width: 110px;
  font-size: 13.5px;
  background-color: #FFFFFF;
  font-weight: 600;
}

/* Anatomy Accordion */
.anatomy-accordion-section {
  margin-top: 14px;
  margin-bottom: 14px;
}

.btn-toggle-anatomy-accordion {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #F4F7F5;
  border: 1px dashed var(--border-light);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-toggle-anatomy-accordion:hover {
  background: #EBF2ED;
  color: var(--primary);
  border-color: var(--accent-emerald);
}

.btn-toggle-anatomy-accordion .accordion-arrow {
  font-size: 11px;
  color: var(--accent-emerald);
}

.anatomy-collapsible-body {
  margin-top: 10px;
  animation: fadeInDown 0.25s ease-out;
}

/* 스마트 부위 실시간 검색 바 */
.bm-search-box {
  position: relative;
  margin-bottom: 12px;
}

.bm-search-input-wrap {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1.5px solid var(--border-light);
  border-radius: 14px;
  padding: 9px 12px;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.bm-search-input-wrap:focus-within {
  border-color: var(--accent-emerald);
  box-shadow: 0 0 0 3px rgba(67, 142, 110, 0.15);
}

.bm-search-input-wrap .search-icon {
  font-size: 16px;
  opacity: 0.7;
}

.bm-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 13.5px;
  color: var(--text-main);
  background: transparent;
}

.btn-clear-search {
  border: none;
  background: rgba(0, 0, 0, 0.08);
  color: #555;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-clear-search:hover {
  background: rgba(0, 0, 0, 0.16);
}

.search-results-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1.5px solid var(--border-light);
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  max-height: 240px;
  overflow-y: auto;
  z-index: 50;
  padding: 6px;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.search-result-item:hover {
  background: var(--bg-subtle);
}

.search-result-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.search-result-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.search-result-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.search-result-sub {
  font-size: 11px;
  color: var(--text-muted);
}

/* 7대 신체 구역 탭 바 (가림 없이 한눈에 쏙 들어오는 캡슐 래핑) */
.region-tabs-wrapper {
  margin-bottom: 12px;
}

.region-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.region-tab {
  background: #FFFFFF;
  border: 1.5px solid var(--border-light);
  border-radius: 20px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  user-select: none;
}

.region-tab:hover {
  border-color: var(--accent-emerald);
  transform: translateY(-1px);
}

.region-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 3px 10px rgba(45, 75, 62, 0.22);
}

.region-tab .tab-emoji {
  font-size: 14px;
}

.region-tab .tab-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}

.region-tab.active .tab-name {
  color: #FFFFFF;
}

/* 정밀 미세 부위 드릴다운 스테이지 */
.precision-drilldown-stage {
  background: linear-gradient(180deg, #F8FAFA 0%, #EEF4F1 100%);
  border: 1.5px solid var(--border-light);
  border-radius: 18px;
  padding: 14px 12px;
  margin-bottom: 12px;
}

.stage-section-header {
  margin-bottom: 10px;
}

.stage-guide {
  font-size: 12px;
  color: #355345;
  line-height: 1.35;
}

.stage-guide strong {
  color: var(--primary);
}

/* 드릴다운 카드 2열 반응형 그리드 */
.drilldown-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 440px) {
  .drilldown-cards-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.drilldown-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid #D5E5DC;
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.drilldown-card:hover {
  background: #FFFFFF;
  border-color: var(--accent-emerald);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(67, 142, 110, 0.18);
}

.drilldown-card.active {
  background: #FFFFFF;
  border-color: var(--accent-emerald);
  box-shadow: 0 0 0 2px var(--accent-emerald), 0 4px 14px rgba(67, 142, 110, 0.22);
}

.drilldown-card .dc-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.drilldown-card .dc-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.drilldown-card .dc-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.3;
}

.drilldown-card .dc-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.35;
}

/* 2단계: [🌿 친절한 스마트 증상 문진] 컨테이너 */
.symptom-consult-card,
.symptom-compact-wrap,
#symptomConsultCard {
  background: linear-gradient(135deg, #F2F8F4 0%, #E7F2EB 100%);
  border: 1.5px solid #BED8CA;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  animation: fadeInDown 0.2s ease-out;
}

/* 동적 생성 세부 증상 칩 그리드 */
.symptom-chips-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-bottom: 6px;
}

@media (min-width: 440px) {
  .symptom-chips-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.symptom-chip {
  background: #FFFFFF;
  border: 1.5px solid #CFE0D6;
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.symptom-chip:hover {
  background: #F7FAF8;
  border-color: var(--accent-emerald);
  transform: translateY(-1px);
}

.symptom-chip.active {
  background: var(--primary);
  color: #FFFFFF !important;
  border-color: var(--primary);
  box-shadow: 0 3px 10px rgba(45, 75, 62, 0.25);
}

.symptom-chip.active .chip-sub {
  color: rgba(255, 255, 255, 0.85);
}

.symptom-chip .chip-main {
  font-weight: 700;
  font-size: 12.5px;
}

.symptom-chip .chip-sub {
  font-size: 10.5px;
  color: var(--text-muted);
}

/* 추천 케어 팁 박스 */
.consult-care-tip {
  margin-top: 10px;
  background: #FFFFFF;
  border: 1px solid #D5E5DC;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #2F4D3F;
  animation: fadeInDown 0.2s ease-out;
}

.consult-care-tip .tip-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.consult-care-tip .tip-content strong {
  color: var(--primary);
  margin-right: 4px;
}

/* 채널명 레이블 행 & 뱃지 */
.input-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.input-label-row label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

.input-target-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 3px 8px;
  border-radius: 12px;
  border: 1px solid #C5DCD0;
}

.btn-submit-luxury {
  background: linear-gradient(135deg, var(--primary) 0%, #1A362B 100%);
  padding: 13px;
  font-size: 14.5px;
  font-weight: 800;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(45, 75, 62, 0.25);
  margin-top: 10px;
  transition: all 0.2s ease;
  width: 100%;
  color: #FFFFFF;
  border: none;
  cursor: pointer;
}

.btn-submit-luxury:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(45, 75, 62, 0.32);
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dotPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
  }

  100% {
    transform: scale(0.9);
    opacity: 0.6;
  }
}

/* ==============================================================================
   9. 7대 가족 안심 반응 칩 바 (Reactions 7-Pack Bar)
   ============================================================================== */
.reaction-chips-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 0 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.reaction-chips-row::-webkit-scrollbar {
  display: none;
}

.reaction-chip-v2 {
  flex-shrink: 0;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}

.reaction-chip-v2:hover {
  background: #E5EDE8;
  color: var(--primary);
  border-color: #CBD8D2;
}

.reaction-chip-v2.active {
  background: #EAF3EE;
  color: var(--primary);
  border-color: var(--accent-emerald);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(67, 142, 110, 0.15);
}

.reaction-chip-v2 .rc-count {
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 5px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
}

.reaction-chip-v2.active .rc-count {
  background: var(--accent-emerald);
  color: #FFFFFF;
}

/* 진료 리포트 인쇄 전용 스타일 (@media print) */
@media print {
  body * {
    visibility: hidden;
  }

  #modalDoctorSummary,
  #modalDoctorSummary * {
    visibility: visible;
  }

  #modalDoctorSummary {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: #FFF !important;
  }

  .doctor-modal {
    max-width: 100% !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
  }

  .btn-close,
  .doctor-modal-actions {
    display: none !important;
  }
}

/* Room Modal Styles */
.room-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.room-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.input-with-action {
  display: flex;
  gap: 8px;
}

.input-with-action input {
  flex: 1;
}

.btn-sub-action {
  padding: 0 16px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.room-share-box {
  background: var(--bg-subtle);
  padding: 14px;
  border-radius: 12px;
  border: 1px dashed var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.share-url-row {
  display: flex;
  gap: 8px;
}

.share-url-row input {
  flex: 1;
  font-size: 12px;
  background: #fff;
}

.btn-copy-link {
  margin: 0;
  padding: 8px 14px;
  font-size: 13px;
  white-space: nowrap;
}

.share-hint {
  font-size: 11.5px;
  color: var(--text-light);
}

/* Real-Time Live Toast Notification (Apple Dynamic Island Capsule & Modern Card) */
.toast-container {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 54px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  width: calc(100% - 24px);
  max-width: 440px;
  padding: 0;
  box-sizing: border-box;
}

.toast-item {
  background: rgba(20, 36, 28, 0.96);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: #FFFFFF;
  padding: 10px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
  animation: toast-spring-down 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  width: 100%;
  box-sizing: border-box;
  letter-spacing: -0.2px;
}

.toast-item.leave {
  animation: toast-spring-up 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font-size: 15px;
  flex-shrink: 0;
}

.toast-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.toast-text {
  line-height: 1.45;
  white-space: normal;
  word-break: keep-all;
  color: #FFFFFF;
  font-size: 13px;
}

.toast-text strong {
  color: #8CE0B8;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 2px;
}

@keyframes toast-spring-down {
  0% {
    opacity: 0;
    transform: translateY(-24px) scale(0.92);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toast-spring-up {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-18px) scale(0.92);
  }
}

/* Feed Timeline Record Photo */
.record-photo-box {
  margin-top: 12px;
  border-radius: 14px;
  overflow: hidden;
  max-width: 320px;
  cursor: pointer;
  position: relative;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.record-photo-box:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}

.record-photo-box img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  display: block;
}

.record-photo-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Lightbox Modal */
.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(10px);
}

.lightbox-content {
  position: relative;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10001;
  animation: zoomIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-content img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
  margin-top: 12px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  background: rgba(255, 255, 255, 0.15);
  padding: 6px 16px;
  border-radius: 20px;
}

.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: none;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.4);
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}



/* ==============================================================================
   14. Feed Luxury Polish: Author Badges, Region Hero, & Threaded Replies
   ============================================================================== */

/* 피드 작성자 & 대상자 정밀 뱃지 */
.feed-author-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.author-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.author-pill.is-me {
  background: rgba(45, 75, 62, 0.1);
  color: var(--primary);
  border: 1px solid rgba(45, 75, 62, 0.2);
}

.author-pill.is-family {
  background: rgba(199, 134, 45, 0.12);
  color: #8C5511;
  border: 1px solid rgba(199, 134, 45, 0.28);
}

.author-pill .author-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.patient-pill {
  font-size: 11px;
  font-weight: 500;
  color: #666;
  background: #F0F2F0;
  padding: 2px 7px;
  border-radius: 8px;
}

/* 어디가 아픈지 (채널/부위명) + 통증 히어로 헤더 */
.feed-region-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(248, 250, 248, 0.95), rgba(240, 245, 241, 0.95));
  border: 1px solid rgba(45, 75, 62, 0.12);
  border-radius: 14px;
}

.region-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.region-badge-pill .region-icon {
  font-size: 18px;
}

.region-badge-pill .region-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.3px;
}

.feed-region-hero .pain-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}

/* 댓글 & 대댓글(스레드) 아키텍처 */
.comment-thread-wrap {
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding-bottom: 8px;
}

.comment-thread-wrap:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.comment-item {
  position: relative;
  padding: 8px 10px;
  background: #FAFBFA;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.comment-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11.5px;
  margin-bottom: 4px;
}

.comment-author-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.comment-author-badge strong.my-name {
  color: var(--primary);
  font-weight: 700;
}

.comment-author-badge strong.family-name {
  color: #B45309;
  font-weight: 700;
}

.badge-mini-me {
  font-size: 10px;
  background: var(--primary);
  color: #FFF;
  padding: 1px 4px;
  border-radius: 4px;
}

.comment-timestamp {
  color: #888;
  font-size: 11px;
  flex: 1;
  margin-left: 4px;
}

.edited-tag {
  color: #999;
  font-size: 10.5px;
}

.comment-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-comment-action {
  background: none;
  border: none;
  font-size: 11px;
  color: #777;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.btn-comment-action:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--primary);
}

.btn-comment-action.btn-del-comment:hover {
  color: #DC2626;
}

.comment-text-body {
  font-size: 13px;
  line-height: 1.45;
  color: #222;
  word-break: break-word;
  white-space: pre-wrap;
}

/* 인라인 댓글/답글 수정 */
.comment-inline-edit {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.input-inline-edit {
  flex: 1;
  border: 1px solid var(--primary);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12.5px;
  outline: none;
}

.inline-edit-btns {
  display: flex;
  gap: 4px;
}

.btn-inline-save {
  background: var(--primary);
  color: #FFF;
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.btn-inline-cancel {
  background: #E5E7EB;
  color: #374151;
  border: none;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  cursor: pointer;
}

/* 대댓글(답글) 스레드 */
.comment-replies-list {
  margin-left: 20px;
  margin-top: 6px;
  padding-left: 10px;
  border-left: 2px solid rgba(45, 75, 62, 0.18);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.comment-reply-item {
  background: #F4F7F4;
  border-radius: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(45, 75, 62, 0.08);
}

.reply-curve-icon {
  color: #888;
  font-weight: 700;
  margin-right: 2px;
}

.reply-composer-wrap {
  margin-left: 20px;
  margin-top: 6px;
  display: flex;
  gap: 6px;
  padding-left: 10px;
  border-left: 2px solid rgba(45, 75, 62, 0.25);
}

.input-reply {
  flex: 1;
  border: 1px solid rgba(45, 75, 62, 0.3);
  background: #FFF;
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 12px;
  outline: none;
}

.input-reply:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(45, 75, 62, 0.1);
}

.btn-send-reply {
  background: var(--primary);
  color: #FFF;
  border: none;
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

/* WebAuthn 앱 화면 보안 잠금 (App Privacy Lock) */
.app-lock-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 30, 25, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lock-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 32px 24px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  animation: zoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lock-shield-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 16px;
  background: rgba(45, 75, 62, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--primary);
  box-shadow: 0 0 0 8px rgba(45, 75, 62, 0.04);
}

.lock-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
}

.lock-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 24px;
}

.btn-unlock-app {
  width: 100%;
  padding: 14px;
  border-radius: 16px;
  border: none;
  background: var(--primary);
  color: #FFF;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(45, 75, 62, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.15s ease;
}

.btn-unlock-app:active {
  transform: scale(0.97);
}

.lock-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(45, 75, 62, 0.05);
  border-radius: 12px;
  font-size: 13px;
}

/* 시스템 알림 버튼 & PWA 가이드 */
.noti-chip-btn {
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
}

.noti-chip-btn:hover {
  background: rgba(45, 75, 62, 0.12);
}

.noti-chip-btn:active {
  transform: scale(0.92);
}

.btn-notification-perm {
  width: 100%;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid var(--primary);
  background: #FFF;
  color: var(--primary);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-notification-perm:hover {
  background: var(--primary);
  color: #FFF;
}

/* ==============================================================================
   11-B. 6번 스마트 주기별 안부 챙김 알림 (Smart Periodic Care Nudge)
   ============================================================================== */
.care-reminder-section {
  background: linear-gradient(135deg, #F5FAF7 0%, #EEF6F1 100%);
  border: 1.5px solid #CDE2D6;
  border-radius: 16px;
  padding: 14px;
  margin-top: 14px;
}

.reminder-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 10px 12px;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid rgba(45, 75, 62, 0.12);
}

.reminder-switch-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

/* iOS 스타일 스위치 토글 */
.switch-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-round {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #D1D5DB;
  transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 24px;
}

.slider-round:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.switch-toggle input:checked+.slider-round {
  background-color: var(--primary);
}

.switch-toggle input:checked+.slider-round:before {
  transform: translateX(20px);
}

.reminder-body-wrap {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reminder-sec-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: -0.2px;
}

/* 주기 선택 칩 그리드 */
.reminder-schedule-pills {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

@media (min-width: 440px) {
  .reminder-schedule-pills {
    grid-template-columns: 1fr 1fr;
  }
}

.btn-schedule-pill {
  background: #FFFFFF;
  border: 1.5px solid #D5E5DC;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-schedule-pill:hover {
  border-color: var(--accent-emerald);
  background: #F8FBF9;
  transform: translateY(-1px);
}

.btn-schedule-pill.active {
  background: #EAF3EE;
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(45, 75, 62, 0.15);
}

.btn-schedule-pill .pill-main {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-main);
}

.btn-schedule-pill.active .pill-main {
  color: var(--primary);
}

.btn-schedule-pill .pill-sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* 절제/스마트 안내 팁 박스 */
.reminder-info-box {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px dashed #CBDCD2;
  border-radius: 10px;
  padding: 8px 11px;
  font-size: 11.5px;
  color: #3C5A4C;
  line-height: 1.4;
}

.reminder-info-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.reminder-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.reminder-next-badge {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(45, 75, 62, 0.08);
  padding: 4px 10px;
  border-radius: 20px;
}

.btn-test-reminder {
  background: #FFFFFF;
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-test-reminder:hover {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(45, 75, 62, 0.2);
}

/* ==============================================================================
   12. Responsive Modern Web App Viewport (Tablet & Desktop PC)
   ============================================================================== */
@media (min-width: 640px) {
  body {
    background-color: #E6EDE8;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .app-container {
    max-width: 680px;
    height: calc(100dvh - 36px);
    margin: 18px auto;
    border-radius: 26px;
    box-shadow: 0 16px 48px rgba(28, 38, 35, 0.12);
    border: 1px solid rgba(225, 232, 227, 0.9);
  }

  .app-header {
    border-top-left-radius: 26px;
    border-top-right-radius: 26px;
    padding: 14px 22px 10px;
  }

  .channel-nav-wrapper {
    padding: 6px 18px 10px;
  }

  .channel-scroll-arrow {
    display: flex !important;
  }

  .main-content {
    padding: 8px 22px 48px;
    gap: 18px;
  }

  .tab-chip {
    padding: 8px 16px;
    font-size: 13px;
  }
}

@media (min-width: 1024px) {
  .app-container {
    max-width: 760px;
  }
}

/* ==============================================================================
   15. Checkin Folded Single Compact Banner
   ============================================================================== */
.checkin-card.is-collapsed .card-header {
  display: none !important;
}

.checkin-card.is-collapsed .checkin-collapsed-preview {
  display: flex !important;
}

.checkin-card.is-collapsed .checkin-empty-channel-guide {
  display: none !important;
}

.checkin-collapsed-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 15px;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.checkin-collapsed-preview:hover {
  background: #FCFDFD;
  border-color: rgba(45, 75, 62, 0.25);
}

.checkin-collapsed-preview:active {
  transform: scale(0.985);
  background: var(--bg-subtle);
}

.collapsed-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.collapsed-channel-badge {
  background: rgba(45, 75, 62, 0.08);
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}

.collapsed-msg {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
  letter-spacing: -0.2px;
}

.collapsed-cta {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-emerald);
  background: rgba(67, 142, 110, 0.08);
  padding: 3px 9px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 6px;
  letter-spacing: -0.2px;
}

/* ==============================================================================
   16. Native App Settings & Subpage Navigation Stack (2번 요구사항)
   ============================================================================== */
.native-settings-card {
  display: flex;
  flex-direction: column;
}

.settings-page-view {
  display: flex;
  flex-direction: column;
  animation: fadeInSubpage 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInSubpage {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.native-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.native-header h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

.native-sub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.native-sub-header h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
  text-align: center;
  flex: 1;
}

.btn-back-nav {
  background: none;
  border: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-emerald);
  cursor: pointer;
  padding: 6px 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: opacity 0.15s;
}

.btn-back-nav:active {
  opacity: 0.6;
}

.native-settings-list {
  background: var(--bg-app);
  border-radius: 16px;
  border: 1px solid var(--border-light);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.native-settings-row {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: #FFFFFF;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
  min-height: 58px;
}

.native-settings-row:last-child {
  border-bottom: none;
}

.native-settings-row:active {
  background: rgba(45, 75, 62, 0.05);
}

.ns-icon {
  font-size: 22px;
  margin-right: 12px;
  flex-shrink: 0;
}

.ns-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ns-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.ns-desc {
  font-size: 11.5px;
  color: var(--text-muted);
}

.ns-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-emerald);
  margin-right: 6px;
}

.ns-arrow {
  font-size: 18px;
  color: #B5C4BC;
  font-weight: 400;
}

/* ==============================================================================
   17. Mobile Native Fullscreen Modal (1번 요구사항: 모든 모달 전체화면)
   ============================================================================== */
@media (max-width: 639px) {
  .drawer-backdrop {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    z-index: 10000 !important;
    overflow: hidden !important;
  }

  .drawer-panel,
  .modal-card,
  .doctor-modal,
  .native-settings-card,
  .onboarding-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
    box-shadow: none !important;
    border: none !important;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: #FFFFFF !important;
  }

  .modal-form {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .doctor-report-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==============================================================================
   18. Vertical-First Mobile Luxury Feed Card Layout (5번 요구사항: 세로형 정돈 피드)
   ============================================================================== */
.feed-card-luxury {
  background: #FFFFFF;
  border-radius: 0;
  border-top: 1px solid rgba(45, 75, 62, 0.08);
  border-bottom: 1px solid rgba(45, 75, 62, 0.08);
  border-left: none;
  border-right: none;
  padding: 16px 14px;
  box-shadow: 0 1px 4px rgba(28, 38, 35, 0.02);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.feed-header-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.feed-author-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.feed-author-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
}

.feed-author-badge.is-me {
  background: #EAF3EE;
  color: var(--primary);
}

.feed-author-badge.is-family {
  background: #F4EFEA;
  color: #7D4F23;
}

.feed-time-text {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 500;
}

.feed-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-feed-edit {
  background: none;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-feed-edit:hover {
  background: var(--bg-subtle);
  color: var(--primary);
}

/* 세로 친화적 상태 카드 (부위 + 통증 레벨) */
.feed-status-card {
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid transparent;
}

.feed-status-card.level-1 {
  background: linear-gradient(135deg, rgba(67, 142, 110, 0.12), rgba(67, 142, 110, 0.04));
  border-color: rgba(67, 142, 110, 0.25);
}

.feed-status-card.level-2 {
  background: linear-gradient(135deg, rgba(100, 168, 137, 0.12), rgba(100, 168, 137, 0.04));
  border-color: rgba(100, 168, 137, 0.25);
}

.feed-status-card.level-3 {
  background: linear-gradient(135deg, rgba(230, 154, 60, 0.12), rgba(230, 154, 60, 0.04));
  border-color: rgba(230, 154, 60, 0.25);
}

.feed-status-card.level-4 {
  background: linear-gradient(135deg, rgba(224, 98, 76, 0.14), rgba(224, 98, 76, 0.04));
  border-color: rgba(224, 98, 76, 0.28);
}

.feed-status-card.level-5 {
  background: linear-gradient(135deg, rgba(168, 50, 50, 0.16), rgba(168, 50, 50, 0.05));
  border-color: rgba(168, 50, 50, 0.32);
}

.feed-status-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.feed-pain-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-main);
}

.feed-pain-icon {
  font-size: 18px;
}

.feed-channel-pill {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 메타 태그 라인 (수면 시간 + 케어 조치들) */
.feed-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.feed-sleep-badge {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #4C5D70;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.feed-tag-pill {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
}

/* 메모 쿼트 박스 (음성 / 텍스트 기록 강조) */
.feed-memo-box {
  background: #F7FAF8;
  border-left: 3.5px solid var(--accent-emerald);
  border-radius: 0 12px 12px 0;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-main);
  word-break: break-word;
}

/* 가족 안심 반응 바 */
.feed-reaction-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.feed-reaction-bar::-webkit-scrollbar {
  display: none;
}

/* ==============================================================================
   19. Compact Indicator Dot & Focus Jump Animation (4번 & 2번 요구사항)
   ============================================================================== */
.sync-dot-btn {
  background: rgba(67, 142, 110, 0.1);
  border: 1px solid rgba(67, 142, 110, 0.22);
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  margin: 0;
}

.sync-dot-btn:active {
  transform: scale(0.9);
  background: rgba(67, 142, 110, 0.2);
}

.sync-dot-btn .sync-dot {
  width: 7.5px;
  height: 7.5px;
  border-radius: 50%;
  background: var(--accent-emerald);
  box-shadow: 0 0 6px rgba(67, 142, 110, 0.6);
  animation: syncPulseDot 2s infinite ease-in-out;
}

@keyframes syncPulseDot {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
    box-shadow: 0 0 12px rgba(67, 142, 110, 0.9);
  }

  100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

/* 알림 클릭 시 해당 기록/댓글로 점프했을 때 펄스 하이라이트 */
.record-focus-pulse {
  animation: targetFocusPulse 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: relative;
}

@keyframes targetFocusPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(67, 142, 110, 0.6);
    border-color: var(--accent-emerald);
    transform: scale(1.015);
  }

  30% {
    box-shadow: 0 0 0 10px rgba(67, 142, 110, 0.2);
    border-color: var(--accent-emerald);
  }

  100% {
    box-shadow: 0 4px 16px rgba(28, 38, 35, 0.04);
    transform: scale(1);
  }
}

/* ==============================================================================
   CareVerse v6.6 - Member Tabs, Bottom Sheet, Voice Channel, Timeline Cockpit UI
   ============================================================================== */

/* 1. Timeline Section Header & Divider */
.timeline-section-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 2px 14px;
  border-bottom: 2px solid var(--border-light);
  margin-bottom: 14px;
}

.timeline-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.timeline-section-divider .section-title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--primary);
  margin: 0;
}

.feed-count-badge {
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  color: var(--accent-emerald);
  padding: 2px 8px;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

/* Feed card channel member tag (가족 구별 태그) */
.feed-channel-pill .member-tag {
  font-weight: 800;
  color: var(--primary);
  margin-right: 3px;
  padding: 1px 5px;
  background: rgba(45, 75, 62, 0.08);
  border-radius: 6px;
  font-size: 11px;
}

/* 2. Compact Member Tabs */
.tab-chip.member-tab {
  padding: 7px 12px;
  font-weight: 600;
}

.tab-chip.member-tab.active {
  background: var(--primary);
  color: #FFF;
  border-color: var(--primary);
  box-shadow: 0 3px 10px rgba(45, 75, 62, 0.25);
}

.tab-chip.member-tab .member-sub-count {
  font-size: 10px;
  opacity: 0.85;
  background: rgba(0, 0, 0, 0.12);
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 2px;
}

.tab-chip.member-tab.active .member-sub-count {
  background: rgba(255, 255, 255, 0.25);
  color: #FFF;
}

/* 3. Member Parts Bottom Sheet Modal */
.modal-bottom-sheet {
  max-width: 520px;
  width: 100%;
  border-radius: 24px 24px 0 0 !important;
  margin-top: auto !important;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: #FFF;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
  animation: slideUpSheet 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUpSheet {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.sheet-drag-handle {
  width: 38px;
  height: 4px;
  background: var(--border-light);
  border-radius: 3px;
  margin: 10px auto 2px;
  flex-shrink: 0;
}

.sheet-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--primary);
  margin: 0;
}

.sheet-subtitle {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 2px;
}

.member-parts-list {
  padding: 12px 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.member-part-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #FAFCFA;
  border: 1.5px solid var(--border-light);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.member-part-card:hover {
  background: #FFF;
  border-color: var(--accent-emerald);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(67, 142, 110, 0.12);
}

.member-part-card.active {
  background: var(--primary-light);
  border-color: var(--primary);
  box-shadow: 0 3px 10px rgba(45, 75, 62, 0.15);
}

.part-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.part-card-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.part-card-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.part-card-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.part-card-meta {
  font-size: 11.5px;
  color: var(--text-light);
  margin-top: 2px;
}

.part-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-part-del {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: #FFF;
  color: var(--text-light);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-part-del:hover {
  background: #A83232;
  color: #FFF;
  border-color: #A83232;
}

.sheet-footer {
  padding: 12px 16px 24px;
  border-top: 1px solid var(--border-subtle);
  background: #FFF;
}

.btn-sheet-add {
  width: 100%;
  padding: 13px;
  background: var(--bg-subtle);
  border: 1.5px dashed var(--accent-emerald);
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-sheet-add:hover {
  background: var(--primary-light);
  border-style: solid;
}

/* 4. Voice-First Add Channel Modal */
.modal-voice-channel-card {
  max-width: 480px;
  width: 100%;
  border-radius: 20px;
  background: #FFF;
  padding-bottom: 18px;
}

.voice-reg-author-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 6px 10px;
  background: var(--bg-app);
  border-radius: 10px;
}

.voice-reg-author-row .reg-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.voice-reg-author-row .reg-author-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}

.voice-channel-deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: linear-gradient(180deg, #F4F8F5 0%, #EBF3EE 100%);
  border: 2px solid rgba(67, 142, 110, 0.25);
  border-radius: 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.btn-big-mic {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2D4B3E 0%, #438E6E 100%);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(45, 75, 62, 0.35);
  position: relative;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-big-mic:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 26px rgba(45, 75, 62, 0.45);
}

.btn-big-mic .mic-emoji {
  font-size: 32px;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.btn-big-mic.is-recording {
  background: linear-gradient(135deg, #A83232 0%, #D9534F 100%);
  box-shadow: 0 6px 24px rgba(168, 50, 50, 0.5);
  animation: micPulse 1.2s infinite ease-in-out;
}

@keyframes micPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

.btn-big-mic.is-recording .mic-wave-ring {
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 50%;
  border: 2px solid rgba(168, 50, 50, 0.6);
  animation: waveOut 1.5s infinite linear;
}

.btn-big-mic.is-recording .mic-wave-ring.outer {
  animation-delay: 0.75s;
}

@keyframes waveOut {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.voice-status-msg {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary);
  margin-top: 14px;
}

.voice-hint-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
}

.voice-edit-hint {
  font-size: 11px;
  color: var(--accent-emerald);
  font-weight: 600;
}

.form-input-native {
  width: 100%;
  padding: 13px 15px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 14px;
  border: 1.5px solid var(--border-light);
  background: #FFF;
  color: var(--text-main);
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-input-native:focus {
  outline: none;
  border-color: var(--accent-emerald);
  box-shadow: 0 0 0 3px rgba(67, 142, 110, 0.15);
  background: #FAFDFB;
}

/* 0. Member Onboarding Bottom Sheet */
.modal-member-onboarding {
  padding-bottom: 24px;
}

.ob-sheet-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary);
  margin: 0;
}

.ob-sheet-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.ob-sheet-body {
  padding: 14px 18px 8px;
}

.onboarding-member-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.btn-ob-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  background: #FAFCFA;
  border: 1.5px solid var(--border-light);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  gap: 6px;
}

.btn-ob-member:hover {
  background: #FFF;
  border-color: var(--accent-emerald);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(67, 142, 110, 0.12);
}

.btn-ob-member.active {
  background: var(--primary-light);
  border-color: var(--primary);
  box-shadow: 0 3px 10px rgba(45, 75, 62, 0.18);
}

.btn-ob-member .ob-emoji {
  font-size: 26px;
}

.btn-ob-member .ob-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
}

.btn-ob-member.active .ob-name {
  color: var(--primary);
}

/* ==============================================================================
   Gateway Lobby: Welcome & Multi-Tenant Isolation
   ============================================================================== */
.gateway-lobby-overlay {
  position: fixed;
  inset: 0;
  z-index: 99997;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeInGateway 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInGateway {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.gateway-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card, #ffffff);
  border-radius: 26px;
  padding: 32px 24px 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  border: 1px solid rgba(226, 232, 240, 0.85);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.gateway-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 14px;
}

.gateway-icon-badge {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(45, 75, 62, 0.14) 0%, rgba(45, 75, 62, 0.04) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 12px;
  border: 1px solid rgba(45, 75, 62, 0.2);
  box-shadow: 0 8px 16px rgba(45, 75, 62, 0.08);
}

.gateway-title {
  font-size: 25px;
  font-weight: 800;
  color: var(--text-main, #1e293b);
  letter-spacing: -0.6px;
  margin: 0 0 4px 0;
}

.gateway-subtitle {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-light, #64748b);
  margin: 0 0 10px 0;
}

.gateway-secure-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.09);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.gateway-desc {
  font-size: 13px;
  color: var(--text-muted, #475569);
  line-height: 1.55;
  margin: 0 0 20px 0;
  word-break: keep-all;
}

.gateway-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.btn-gateway-create {
  width: 100%;
  background: linear-gradient(135deg, var(--primary, #2d4b3e) 0%, #1f362c 100%);
  color: #ffffff;
  border-radius: 18px;
  padding: 15px 18px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 10px 22px rgba(45, 75, 62, 0.24);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-gateway-create:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 14px 28px rgba(45, 75, 62, 0.32);
}

.btn-gateway-create:active {
  transform: scale(0.985);
}

.btn-gateway-content {
  display: flex;
  align-items: center;
  gap: 13px;
}

.btn-gateway-icon {
  font-size: 24px;
  line-height: 1;
}

.btn-gateway-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.btn-gateway-main-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #ffffff;
}

.btn-gateway-sub-title {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}

.btn-gateway-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  transition: transform 0.2s ease;
}

.btn-gateway-create:hover .btn-gateway-arrow {
  transform: translateX(3px);
}

.gateway-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 2px 0;
}

.gateway-divider::before,
.gateway-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}

.gateway-divider span {
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-light, #94a3b8);
}

.gateway-join-box {
  background: var(--bg-surface, #f8fafc);
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 18px;
  padding: 14px 16px;
}

.gateway-join-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main, #334155);
  margin-bottom: 8px;
}

.gateway-join-label .join-icon {
  font-size: 13px;
}

.gateway-join-input-row {
  display: flex;
  gap: 8px;
}

.gateway-join-input-row .form-input {
  flex: 1;
  padding: 10px 13px;
  font-size: 13px;
  border-radius: 12px;
  border: 1px solid rgba(203, 213, 225, 0.85);
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gateway-join-input-row .form-input:focus {
  border-color: var(--primary, #2d4b3e);
  box-shadow: 0 0 0 3px rgba(45, 75, 62, 0.12);
  outline: none;
}

.btn-gateway-join {
  background: #334155;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
  white-space: nowrap;
}

.btn-gateway-join:hover {
  background: #1e293b;
}

.btn-gateway-join:active {
  transform: scale(0.96);
}

.gateway-join-hint {
  font-size: 10.5px;
  color: var(--text-light, #94a3b8);
  margin: 6px 0 0 0;
  line-height: 1.4;
}

/* ==============================================================================
   Family 4-Digit PIN Security Gate Overlay
   ============================================================================== */
.family-pin-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 30, 25, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.pin-auth-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 26px 20px 20px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: zoomIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.pin-shield-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  background: rgba(45, 75, 62, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--primary);
  box-shadow: 0 0 0 6px rgba(45, 75, 62, 0.04);
}

.pin-auth-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
}

.pin-auth-desc {
  font-size: 12.5px;
  color: #666;
  line-height: 1.45;
  margin-bottom: 8px;
}

.pin-room-badge {
  display: inline-block;
  background: rgba(45, 75, 62, 0.08);
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 12px;
}

.pin-dots-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 6px 0 10px;
  transition: transform 0.2s ease;
}

.pin-dots-row.shake {
  animation: pinShake 0.4s ease;
}

@keyframes pinShake {

  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-10px);
  }

  40%,
  80% {
    transform: translateX(10px);
  }
}

.pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #D1D5DB;
  background: #FFF;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.pin-dot.filled {
  background: var(--primary);
  border-color: var(--primary);
  transform: scale(1.15);
  box-shadow: 0 0 10px rgba(45, 75, 62, 0.35);
}

.pin-error-msg {
  font-size: 12px;
  color: #DC2626;
  font-weight: 600;
  min-height: 18px;
  margin-bottom: 8px;
}

.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 246px;
  margin: 0 auto 12px;
}

.pin-key {
  width: 66px;
  height: 52px;
  margin: 0 auto;
  border-radius: 14px;
  border: 1.5px solid #E5E7EB;
  background: #F9FAFB;
  font-size: 21px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, transform 0.1s ease;
}

.pin-key:active {
  transform: scale(0.92);
  background: #E5E7EB;
}

.pin-key-backspace {
  font-size: 19px;
  color: #6B7280;
}

.pin-key-empty {
  visibility: hidden;
  pointer-events: none;
}

.pin-footer-info {
  font-size: 11px;
  color: #888;
  line-height: 1.4;
  margin-top: 4px;
}

.btn-copy-link-secondary {
  background: rgba(45, 75, 62, 0.08) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(45, 75, 62, 0.2) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

.btn-copy-link-secondary:hover {
  background: rgba(45, 75, 62, 0.14) !important;
}

/* ==============================================================================
   Owner-Only Safe Data Reset Modal
   ============================================================================== */
.reset-confirm-card {
  max-width: 380px;
  width: 100%;
}

.reset-confirm-body {
  padding: 16px 20px 20px;
}

.reset-authority-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.2);
  color: #C0392B;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 12px;
  margin-bottom: 12px;
}

.reset-warning-desc {
  font-size: 13.5px;
  color: var(--text-main);
  line-height: 1.55;
  margin-bottom: 16px;
}

.reset-warning-desc .safe-note {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #2D4B3E;
  background: rgba(45, 75, 62, 0.06);
  padding: 8px 10px;
  border-radius: 8px;
  line-height: 1.45;
}

.reset-input-box {
  margin-bottom: 20px;
  text-align: left;
}

.reset-input-box label {
  display: block;
  font-size: 12.5px;
  color: #555;
  margin-bottom: 6px;
}

.reset-input-box input {
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  border-color: #E6B0AA;
}

.reset-input-box input:focus {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

.reset-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-danger-reset {
  width: 100%;
  padding: 13px;
  border-radius: 14px;
  border: none;
  background: #C0392B;
  color: #FFF;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(192, 57, 43, 0.25);
  transition: all 0.2s ease;
}

.btn-danger-reset:disabled {
  background: #E5E7EB;
  color: #9CA3AF;
  box-shadow: none;
  cursor: not-allowed;
}

.btn-cancel-reset {
  width: 100%;
  padding: 11px;
  border-radius: 14px;
  border: 1px solid #E5E7EB;
  background: #FFF;
  color: #666;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ==============================================================================
   주간 통증 추이 & 임상 지표 인터랙티브 카드 (Weekly Trend Chart Card)
   ============================================================================== */
.weekly-trend-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.trend-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.trend-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.trend-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.2px;
}

.trend-badge-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
}

.trend-badge-pill.improving {
  background: rgba(67, 142, 110, 0.12);
  color: var(--accent-emerald);
  border: 1px solid rgba(67, 142, 110, 0.25);
}

.trend-badge-pill.warning {
  background: rgba(184, 93, 59, 0.12);
  color: var(--scale-4);
  border: 1px solid rgba(184, 93, 59, 0.25);
}

.trend-badge-pill.stable {
  background: rgba(45, 75, 62, 0.08);
  color: var(--text-muted);
  border: 1px solid rgba(45, 75, 62, 0.18);
}

.btn-fold-trend {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--text-light);
  cursor: pointer;
  padding: 2px 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
  border-radius: 6px;
}

.btn-fold-trend:hover {
  color: var(--text-main);
  background: rgba(0, 0, 0, 0.04);
}

.trend-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.trend-metric-item {
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.trend-metric-lbl {
  font-size: 10px;
  color: var(--text-light);
  margin-bottom: 1px;
  font-weight: 500;
}

.trend-metric-val {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trend-metric-sub {
  font-size: 9px;
  color: var(--text-light);
  margin-top: 1px;
}

.trend-svg-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 2px;
}

.trend-chart-svg {
  width: 100%;
  height: 105px;
  display: block;
  overflow: visible;
}

.trend-collapsed-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px;
  cursor: pointer;
}

.trend-collapsed-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}

.trend-collapsed-right {
  font-size: 11px;
  color: var(--primary);
  font-weight: 600;
}

/* ==============================================================================
   2단계: 어르신(시니어) 큰글씨 간편 모드 (Senior Accessibility Mode)
   ============================================================================== */
body.senior-mode {
  font-size: 16px !important;
}

body.senior-mode .brand-title {
  font-size: 20px !important;
}

body.senior-mode .header-room-badge {
  font-size: 12px !important;
  padding: 3px 10px !important;
}

body.senior-mode .card-title {
  font-size: 19px !important;
}

body.senior-mode .card-sub {
  font-size: 14.5px !important;
  color: #222 !important;
}

body.senior-mode .chip-item {
  padding: 12px 10px !important;
  min-height: 68px !important;
}

body.senior-mode .chip-num {
  font-size: 24px !important;
}

body.senior-mode .chip-label {
  font-size: 13.5px !important;
  font-weight: 700 !important;
}

body.senior-mode .composer-textarea {
  font-size: 16.5px !important;
  line-height: 1.6 !important;
}

body.senior-mode .btn-voice-record {
  padding: 12px 16px !important;
  font-size: 15px !important;
}

body.senior-mode .btn-submit {
  padding: 16px 20px !important;
  font-size: 17.5px !important;
  border-radius: 18px !important;
  font-weight: 800 !important;
}

body.senior-mode .feed-card-main {
  padding: 16px 18px !important;
}

body.senior-mode .record-memo {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: #111 !important;
}

body.senior-mode .comment-text-body {
  font-size: 15.5px !important;
}

body.senior-mode .reaction-chip {
  padding: 8px 12px !important;
  font-size: 13.5px !important;
}

body.senior-mode .member-tab {
  padding: 8px 14px !important;
  font-size: 15px !important;
}

body.senior-mode .trend-card-title {
  font-size: 15px !important;
}

body.senior-mode .trend-metric-val {
  font-size: 15px !important;
}

/* ==============================================================================
   3단계: 가족 구성원 관리 화면 (Family Members Management)
   ============================================================================== */
.family-room-summary-card {
  background: var(--bg-app);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.summary-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.summary-room-label {
  font-size: 11px;
  color: var(--text-light);
  font-weight: 600;
}

.summary-room-code {
  font-size: 15px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.2px;
}

.summary-count-badge {
  background: rgba(45, 75, 62, 0.1);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

.family-list-section {
  margin-bottom: 16px;
}

.family-list-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-left: 2px;
}

.family-members-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.family-member-card {
  background: #FFF;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.family-member-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.family-member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(45, 75, 62, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.family-member-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.member-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.member-card-name {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text-main);
}

.badge-owner {
  background: rgba(199, 134, 45, 0.14);
  color: #8C5511;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
}

.badge-me {
  background: rgba(67, 142, 110, 0.12);
  color: var(--accent-emerald);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
}

.member-card-meta {
  font-size: 11.5px;
  color: var(--text-light);
}

.family-member-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-delegate-owner {
  background: none;
  border: 1px solid rgba(199, 134, 45, 0.3);
  color: #8C5511;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-delegate-owner:hover {
  background: rgba(199, 134, 45, 0.1);
}

.btn-kick-member {
  background: none;
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #dc3545;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-kick-member:hover {
  background: rgba(220, 53, 69, 0.1);
}

.family-invite-cta-card {
  background: linear-gradient(135deg, rgba(45, 75, 62, 0.05), rgba(67, 142, 110, 0.08));
  border: 1px dashed rgba(45, 75, 62, 0.25);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.invite-cta-text strong {
  font-size: 13.5px;
  color: var(--primary);
  display: block;
  margin-bottom: 2px;
}

.invite-cta-text p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}

/* ==============================================================================
   🏥 다음 병원 내원 일정 예약 & 상단 핀 배너 & 피드 카드 스타일
   ============================================================================== */
.hospital-visit-section {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  /* 아이폰 등 모바일에서 우측 삐져나감 100% 방지 */
  background: #FFFFFF;
  border: 1.5px solid rgba(45, 75, 62, 0.16);
  border-radius: 20px;
  padding: 20px 18px;
  margin-top: 22px;
  margin-bottom: 26px;
  box-shadow: 0 4px 20px rgba(45, 75, 62, 0.06);
}

.hospital-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap !important;
  width: 100%;
}

.hospital-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 0;
}

.hospital-icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.hospital-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.3px;
  white-space: nowrap !important;
}

.hospital-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

/* 상단 음성 등록 버튼 */
.btn-voice-hospital-all {
  background: var(--primary);
  color: #FFFFFF;
  border: none;
  border-radius: 9px;
  padding: 0 12px;
  height: 31px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 3px rgba(45, 75, 62, 0.14);
  transition: all 0.2s ease;
}

.btn-voice-hospital-all:hover {
  background: #1A3127;
  transform: translateY(-0.5px);
}

.btn-voice-hospital-all.is-recording {
  background: #C0392B !important;
  animation: pulse-mic 1s infinite alternate;
}

/* 상단 일정 등록/닫기 토글 버튼 */
.btn-toggle-hospital {
  background: #FFFFFF;
  border: 1px solid rgba(45, 75, 62, 0.22);
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 600;
  padding: 0 11px;
  height: 31px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(45, 75, 62, 0.04);
}

.btn-toggle-hospital:hover {
  background: #F3F7F4;
  border-color: var(--primary);
}

/* 폼 컨테이너: 넉넉하고 시원한 수직 레이아웃 */
.hospital-inputs-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid rgba(45, 75, 62, 0.1);
  display: flex;
  flex-direction: column;
}

.fav-hosp-chips-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 0 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(45, 75, 62, 0.08);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.fav-hosp-chips-bar::-webkit-scrollbar {
  display: none;
}

.fav-hosp-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #5A7568;
  white-space: nowrap;
}

.fav-hosp-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.fav-hosp-chip {
  background: #FFFFFF;
  border: 1px solid rgba(45, 75, 62, 0.18);
  color: var(--primary);
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
  box-shadow: 0 1px 2px rgba(45, 75, 62, 0.03);
}

.fav-hosp-chip:hover {
  background: #F0F6F2;
  border-color: var(--primary);
}

/* 각 필드 그룹: 위/아래 요소 간 넉넉하고 시원한 품격 여백 + 절제된 헤어라인 구분선 */
.hospital-field-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-top: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(45, 75, 62, 0.08);
}

.hospital-field-group:first-of-type {
  padding-top: 8px;
}

.hospital-field-group:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

.hospital-field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
  padding: 0 1px;
}

.field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.field-label-row label {
  margin-bottom: 0 !important;
  font-size: 11.5px;
  font-weight: 600;
  color: #4A6B5B;
}

.btn-address-action {
  height: 24px !important;
  font-size: 11px !important;
  padding: 0 8px !important;
  border-radius: 6px !important;
}

.hospital-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: #1E382B;
  letter-spacing: -0.3px;
  margin: 0;
  cursor: pointer;
}

.label-icon {
  color: #4A6B5B;
  flex-shrink: 0;
}

.field-subtext {
  font-size: 11px;
  color: #7A9084;
  font-weight: 500;
  letter-spacing: -0.2px;
}

/* 통일된 고품격 콰이어트 럭셔리 액션 버튼 (주소 검색, 음성 입력, 지도 확인) */
.btn-field-action {
  background: #FFFFFF !important;
  border: 1px solid rgba(45, 75, 62, 0.22) !important;
  color: #2D4B3E !important;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  padding: 0 10px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.18s ease;
  box-shadow: 0 1px 2px rgba(45, 75, 62, 0.04);
}

.btn-field-action svg {
  color: #3D5A4C !important;
  flex-shrink: 0;
  transition: color 0.18s ease;
}

.btn-field-action:hover {
  background: #EBF3EE !important;
  border-color: #2D4B3E !important;
  color: #1E382B !important;
  transform: translateY(-0.5px);
}

.btn-field-action:hover svg {
  color: #1E382B !important;
}

.btn-field-action:active {
  transform: scale(0.98);
}

.btn-field-action.is-recording {
  background: #C0392B !important;
  border-color: #A93226 !important;
  color: #FFFFFF !important;
  animation: pulse-mic 1s infinite alternate;
}

.btn-field-action.is-recording svg {
  color: #FFFFFF !important;
}

.hospital-row-fields {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.input-hospital-full {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* 🗺️ 인앱 오픈스트릿 지도 뷰어 모달 (Leaflet OSM) */
.map-viewer-modal {
  width: 95%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
}

.map-modal-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.map-modal-title-block h4 {
  font-size: 15px;
  font-weight: 800;
  color: var(--primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-modal-addr {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.osm-map-container {
  width: 100%;
  height: 280px;
  border-radius: 12px;
  border: 1.5px solid var(--border-light);
  background: #E8ECE9;
  z-index: 10;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.06);
}

.map-modal-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-external-nav {
  flex: 1;
  min-width: 110px;
  padding: 9px 6px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.btn-kakao-nav {
  background: #FEE500;
  color: #191919;
  border: 1px solid #E6CF00;
}

.btn-naver-nav {
  background: #03C75A;
  color: #FFFFFF;
  border: 1px solid #02B350;
}

.btn-osm-nav {
  background: #EAF3EE;
  color: var(--primary);
  border: 1px solid rgba(45, 75, 62, 0.25);
}

/* 🔍 Daum(카카오) 우편번호 주소 검색 전용 레이어 모달 */
.postcode-layer-card {
  width: 95%;
  max-width: 500px;
  height: 580px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
}

.postcode-embed-wrap {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 440px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #E1EBE5;
  margin-top: 12px;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.postcode-embed-wrap iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}

/* 구버전 음성 버튼 충돌 스타일 정리 완료 (btn-field-action으로 단일 통합) */

.hospital-voice-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: #FFF4F2;
  border: 1px solid #FFD3CE;
  border-radius: 12px;
  font-size: 12px;
  color: #C0392B;
}

.voice-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D9381E;
  flex-shrink: 0;
  animation: pulse-dot 0.8s infinite alternate;
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }

  100% {
    transform: scale(1.3);
    opacity: 1;
  }
}

.form-group-sm {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.form-group-sm label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
}

/* 여유롭고 품격 있는 입력 필드 (아이폰 오버플로우 방지 보장) */
.input-hospital {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 13px 15px;
  /* 편안한 터치와 시원한 여백 */
  border: 1.2px solid #D4E1D8;
  border-radius: 11px;
  font-size: 13.5px;
  background: #FFFFFF;
  color: #1E382B;
  box-sizing: border-box;
  outline: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(45, 75, 62, 0.03);
}

.input-hospital::placeholder {
  color: #92A399;
  font-size: 13px;
}

/* 아이폰 iOS Safari datetime-local 전용 오버플로우 해결 */
input[type="datetime-local"].input-hospital {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  padding: 0;
  min-height: 1.3em;
}

.input-hospital:focus {
  border-color: #2D4B3E;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(45, 75, 62, 0.09);
}

.dept-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
  margin-bottom: 2px;
}

.chip-quick-dept {
  background: #F4F8F5;
  border: 1px solid #D5E2DA;
  border-radius: 14px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 600;
  color: #315141;
  cursor: pointer;
  transition: all 0.18s ease;
}

.chip-quick-dept:hover {
  background: #2D4B3E;
  color: #FFFFFF;
  border-color: #2D4B3E;
  transform: translateY(-1px);
}

/* 🏥 상단 핀된 우리 가족 다음 병원 내원 일정 배너 */
.pinned-hospital-card {
  background: linear-gradient(135deg, #F0F7F4 0%, #E6F2EC 100%);
  border: 1.5px solid rgba(67, 142, 110, 0.35);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 18px;
  box-shadow: 0 3px 12px rgba(45, 75, 62, 0.08);
}

.pinned-hospital-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.pinned-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pinned-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E74C3C;
  animation: pulse-dday 1.5s infinite;
}

@keyframes pulse-dday {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
  }

  100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
}

.pinned-title {
  font-size: 12.5px;
  color: var(--primary);
  font-weight: 800;
  letter-spacing: -0.2px;
}

.pinned-dday-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
}

.pinned-dday-badge.d-urgent,
.pinned-dday-badge.d-today {
  background: #E74C3C;
  color: #FFFFFF;
}

.pinned-dday-badge.d-future {
  background: var(--primary);
  color: #FFFFFF;
}

.pinned-dday-badge.d-past {
  background: #95A5A6;
  color: #FFFFFF;
}

.pinned-main-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.pinned-date-text {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
}

.pinned-patient-badge {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-emerald);
  background: rgba(67, 142, 110, 0.14);
  padding: 1px 6px;
  border-radius: 6px;
}

.pinned-clinic-row {
  font-size: 12.5px;
  color: #495057;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.pinned-dept-pill {
  background: #FFFFFF;
  border: 1px solid rgba(45, 75, 62, 0.2);
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
}

.pinned-note-text {
  font-size: 12px;
  color: #6C757D;
}

/* 🏥 피드 카드 내부의 다음 병원 내원 일정 블록 */
.card-hospital-visit {
  background: #F8FAF9;
  border: 1.5px solid rgba(45, 75, 62, 0.18);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 10px;
  margin-bottom: 6px;
}

.card-hospital-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.hospital-sub-badge {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--primary);
}

.hospital-dday-pill {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 8px;
}

.hospital-dday-pill.d-urgent,
.hospital-dday-pill.d-today {
  background: rgba(231, 76, 60, 0.15);
  color: #C0392B;
}

.hospital-dday-pill.d-future {
  background: rgba(45, 75, 62, 0.12);
  color: var(--primary);
}

.hospital-dday-pill.d-past {
  background: #ECEFF1;
  color: #78909C;
}

.card-visit-datetime {
  font-size: 13.5px;
  color: var(--text-main);
  margin-bottom: 2px;
}

.card-visit-meta {
  font-size: 12px;
  color: #555;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.visit-note-snippet {
  color: #777;
  font-style: italic;
}

/* 🎯 토스트 클릭 가능 스타일 및 펄스 포커스 애니메이션 */
.toast-item.is-clickable {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.toast-item.is-clickable:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.toast-item.is-clickable:active {
  transform: scale(0.98);
}

.toast-action-hint {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #72D5A3;
  margin-top: 2px;
  letter-spacing: 0.2px;
}

.record-focus-pulse {
  animation: targetRecordPulse 2.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes targetRecordPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(67, 142, 110, 0.6);
    border-color: var(--accent-emerald) !important;
    background-color: rgba(67, 142, 110, 0.08);
  }

  30% {
    box-shadow: 0 0 0 10px rgba(67, 142, 110, 0);
    border-color: var(--accent-emerald) !important;
    background-color: rgba(67, 142, 110, 0.05);
  }

  60% {
    box-shadow: 0 0 0 6px rgba(67, 142, 110, 0);
    border-color: var(--accent-emerald) !important;
  }

  100% {
    box-shadow: none;
    background-color: transparent;
  }
}

/* ==============================================================================
   4단계 & 5단계: 모바일 최적화 & 위/아래 영역 명확한 시각적 분리 (피로감 해소)
   ============================================================================== */
.checkin-card {
  margin-bottom: 22px !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(45, 75, 62, 0.05) !important;
}

.checkin-card.is-collapsed {
  margin-bottom: 18px !important;
}

.checkin-collapsed-preview {
  margin-top: 0 !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
}

.timeline-section-divider {
  margin-bottom: 14px !important;
  padding: 4px 2px !important;
}

.weekly-trend-card {
  margin-bottom: 20px !important;
  border-radius: 16px !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

.pinned-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-pinned-map,
.btn-feed-hosp-map {
  background: #FFFFFF;
  color: var(--primary);
  border: 1px solid rgba(45, 75, 62, 0.25);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: all 0.15s ease;
}

.btn-pinned-map:hover,
.btn-feed-hosp-map:hover {
  background: var(--primary);
  color: #FFFFFF;
}

.hospital-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 🏥 자주 가는 병원 관리 서브페이지 스타일 */
.fav-hosp-settings-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}

.fav-hosp-form-card {
  background: #F8FAF9;
  border: 1px solid rgba(45, 75, 62, 0.15);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-card-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
  margin: 0 0 2px 0;
}

.btn-add-fav-hosp {
  background: var(--primary);
  color: #FFFFFF;
  border: none;
  padding: 10px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.2s ease;
}

.btn-add-fav-hosp:hover {
  background: #1B332A;
}

.fav-hosp-list-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fav-hosp-list-header {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-dark);
}

.fav-hosp-list-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fav-hosp-item-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.fav-hosp-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.fav-hosp-item-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
}

.fav-hosp-item-dept {
  font-size: 11px;
  font-weight: 700;
  background: #EAF3EE;
  color: var(--primary);
  padding: 1px 6px;
  border-radius: 6px;
}

.fav-hosp-item-address {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fav-hosp-item-note {
  font-size: 11px;
  color: #6C757D;
}

.fav-hosp-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.btn-fav-osm-map {
  background: #EAF3EE;
  color: var(--primary);
  border: 1px solid rgba(45, 75, 62, 0.25);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-fav-osm-map:hover {
  background: var(--primary);
  color: #FFFFFF;
}

.btn-edit-fav-item {
  background: #F0F4F8;
  color: #2B4C7E;
  border: 1px solid #D0DBE5;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-edit-fav-item:hover {
  background: #2B4C7E;
  color: #FFFFFF;
}

.btn-del-fav-item {
  background: transparent;
  color: #C0392B;
  border: 1px solid #F5C6CB;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn-del-fav-item:hover {
  background: #FDF2E9;
}

/* --- 자주 가는 병원 가이드 배너 (Calm Luxury Design) --- */
.fav-hosp-guide-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, #F4F7F5 0%, #EBF1EE 100%);
  border: 1px solid #DCE6E1;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.guide-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--primary);
  color: #FFFFFF;
  flex-shrink: 0;
  margin-top: 1px;
}

.guide-banner-content h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}

.guide-banner-content p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
  letter-spacing: -0.2px;
}

/* --- 병원 리스트 카드 고급화 (SVG 아이콘 및 정렬) --- */
.fav-hosp-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(45, 75, 62, 0.08);
  color: var(--primary);
  flex-shrink: 0;
}

.meta-svg-icon {
  flex-shrink: 0;
  color: var(--text-light);
  margin-top: 2px;
}

.fav-hosp-item-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.fav-hosp-item-address,
.fav-hosp-item-note {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 3px;
}

.btn-fav-osm-map,
.btn-edit-fav-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* --- 100% Full-Bleed 지도 뷰어 모달 (좌우 여백 0, 가독성 극대화) --- */
.map-viewer-modal {
  width: 100% !important;
  max-width: 640px !important;
  padding: 0 !important;
  background: #FFFFFF !important;
  border-radius: 20px 20px 0 0 !important;
  overflow: hidden !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
}

@media (min-width: 640px) {
  .map-viewer-modal {
    border-radius: 20px !important;
    margin: 20px auto !important;
  }
}

.map-viewer-modal .drawer-header {
  padding: 16px 20px 14px 20px !important;
  margin: 0 !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.map-modal-title-block h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  margin-bottom: 2px !important;
}

.map-modal-addr {
  font-size: 12px !important;
  color: var(--text-muted) !important;
}

.map-modal-body {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 지도 영역: 좌우 여백 0, 100% 풀 와이드 */
.osm-map-container {
  width: 100% !important;
  height: 60vh !important;
  min-height: 380px !important;
  max-height: 540px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

/* 하단 길찾기 액션 바 (카카오 / 네이버 반반 균형 배치) */
.map-modal-actions {
  display: flex !important;
  gap: 10px !important;
  padding: 14px 16px 18px 16px !important;
  background: #FFFFFF !important;
  border-top: 1px solid var(--border-light) !important;
  width: 100% !important;
}

.btn-external-nav {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: transform 0.15s ease, opacity 0.15s ease !important;
}

.btn-external-nav:active {
  transform: scale(0.98);
}

.btn-kakao-nav {
  background: #FEE500 !important;
  color: #191919 !important;
}

.btn-naver-nav {
  background: #03C75A !important;
  color: #FFFFFF !important;
}

.feed-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.feed-card-luxury {
  border-radius: 16px !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
  margin-bottom: 0 !important;
}

/* ==============================================================================
   스마트폰 전용 100% 풀스크린 엣지-투-엣지 피드 (Social Care Feed Experience)
   ============================================================================== */
@media (max-width: 520px) {
  .app-header {
    padding: 8px 10px 6px !important;
    padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
    gap: 4px;
  }

  .header-room-badge {
    max-width: 120px !important;
    padding: 2px 7px !important;
    font-size: 10px !important;
  }

  .channel-nav-wrapper {
    padding: 0 4px !important;
  }
}

/* 실제 모바일 터치 기기(아이폰 노치/다이내믹 아일랜드 및 PWA 홈 화면 앱) 전용 노치 보정 */
html.ios-standalone .app-header {
  padding-top: max(46px, env(safe-area-inset-top, 46px)) !important;
}

@media (max-width: 520px) and (hover: none) and (pointer: coarse) and (display-mode: standalone) {
  .app-header {
    padding-top: max(46px, env(safe-area-inset-top, 46px)) !important;
  }
}

.main-content {
  padding: 6px 8px 32px !important;
}

.card.checkin-card {
  padding: 12px 10px !important;
  border-radius: 14px !important;
  margin-bottom: 18px !important;
}

.checkin-collapsed-preview {
  padding: 8px 10px !important;
  border-radius: 12px !important;
}

.collapsed-channel-badge {
  padding: 2px 7px !important;
  font-size: 11px !important;
  max-width: 105px !important;
}

.collapsed-msg {
  font-size: 12px !important;
}

.collapsed-cta {
  padding: 2px 7px !important;
  font-size: 11px !important;
}

.checkin-empty-channel-guide {
  padding: 18px 10px 16px !important;
}

.empty-guide-desc .guide-line {
  font-size: 13px !important;
  letter-spacing: -0.35px !important;
}

.empty-guide-voice-hint {
  font-size: 11.5px !important;
  letter-spacing: -0.2px !important;
}

/* 💡 타임라인 피드: 모바일 좌우 여백을 100% 채워 진짜 SNS 피드처럼 시원하게 전환 */
.timeline-section {
  margin-left: -8px !important;
  margin-right: -8px !important;
  width: calc(100% + 16px) !important;
}

.timeline-section-divider {
  padding: 0 12px 10px !important;
}

.pinned-hospital-card {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.weekly-trend-card {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.feed-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
}

/* 양옆 테두리 없이 100% 전폭 사용 & 8px 세련된 구분 바 */
.feed-card-luxury {
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: 1px solid rgba(45, 75, 62, 0.08) !important;
  border-bottom: 8px solid #F0F4F2 !important;
  padding: 16px 14px !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.feed-status-card {
  padding: 12px 12px !important;
  border-radius: 12px !important;
}

.feed-comments {
  padding: 10px 10px !important;
  border-radius: 12px !important;
}

.comment-input-row {
  gap: 5px;
}

.input-comment {
  padding: 9px 10px;
  font-size: 13px;
}

/* 💡 초소형 모바일(아이폰 미니 385px 이하) 강제 1줄 피팅 & 제로 줄바꿈 보장 */
@media (max-width: 390px) {
  .empty-guide-desc .guide-line {
    font-size: 12.2px !important;
    letter-spacing: -0.45px !important;
  }

  .empty-guide-voice-hint {
    font-size: 11px !important;
    letter-spacing: -0.3px !important;
  }

  .btn-guide-add-channel {
    padding: 9px 20px !important;
    font-size: 13.5px !important;
  }
}

/* ==============================================================================
   CareVerse - Operations Master Console (Developer Admin Styling)
   ============================================================================== */
.admin-auth-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(10, 15, 12, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-auth-backdrop[style*="display: none"],
.admin-dashboard-overlay[style*="display: none"] {
  display: none !important;
}

.admin-auth-card {
  background: #141C18;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 26px 22px;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  color: #E8ECE9;
  box-sizing: border-box;
}

.admin-auth-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.admin-auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #D4A373;
  background: rgba(212, 163, 115, 0.1);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(212, 163, 115, 0.25);
}

.admin-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38B000;
  box-shadow: 0 0 8px #38B000;
  animation: adminPulse 1.8s infinite;
}

@keyframes adminPulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

.btn-admin-close {
  background: none;
  border: none;
  color: #8C9992;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
}

.admin-auth-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #FFFFFF;
  margin-bottom: 6px;
}

.admin-auth-desc {
  font-size: 13px;
  color: #9AA6A0;
  line-height: 1.5;
  margin-bottom: 20px;
}

.admin-input-group {
  display: flex;
  gap: 8px;
}

.admin-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #FFFFFF;
  padding: 11px 14px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.admin-input:focus {
  border-color: #D4A373;
}

.btn-admin-primary {
  background: #2D4B3E;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  padding: 0 18px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-admin-primary:hover {
  background: #3B6150;
}

.admin-error-text {
  font-size: 12px;
  color: #FF6B6B;
  margin-top: 8px;
  min-height: 16px;
}

/* --- 대시보드 풀스크린 콘솔 --- */
.admin-dashboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #0E1411;
  color: #E8ECE9;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  font-family: inherit;
}

.admin-dashboard-container {
  width: 100%;
  max-width: 920px;
  min-height: 100vh;
  padding: 28px 24px 60px 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.admin-top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: 12px;
}

.admin-brand-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.admin-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  letter-spacing: 0.5px;
  color: #FFFFFF;
}

.admin-env-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #D4A373;
  background: rgba(212, 163, 115, 0.12);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(212, 163, 115, 0.25);
  white-space: nowrap;
}

.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-admin-refresh {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #C8D3CD;
  font-size: 12px;
  font-weight: 600;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-admin-refresh:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.btn-admin-exit {
  background: rgba(220, 53, 69, 0.12);
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #FF8585;
  font-size: 12px;
  font-weight: 600;
  height: 34px;
  padding: 0 13px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-admin-exit:hover {
  background: rgba(220, 53, 69, 0.22);
}

/* --- 상단 지표 요약 바 --- */
.admin-stats-summary-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.admin-metric-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.metric-label {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #A3B2A9;
  line-height: 1.2;
}

.metric-value {
  font-size: 22px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  line-height: 1.15;
}

.metric-value.live-highlight {
  color: #48CAE4;
}

/* --- 서브 탭 네비게이션 --- */
.admin-subnav-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
}

.admin-nav-tab {
  flex: 1;
  background: none;
  border: none;
  color: #8C9992;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 8px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  text-align: center;
  white-space: nowrap;
}

.admin-nav-tab:hover {
  color: #FFFFFF;
}

.admin-nav-tab.active {
  color: #D4A373;
  font-weight: 700;
}

.admin-nav-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 10%;
  right: 10%;
  height: 2.5px;
  background: #D4A373;
  border-radius: 2px 2px 0 0;
}

/* --- 패널 & 카드 그리드 --- */
.admin-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.admin-panel-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.panel-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 10px;
}

.panel-title {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
}

.panel-sub {
  font-size: 11px;
  color: #798680;
}

/* 실시간 클라이언트 행 */
.admin-live-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.live-user-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.live-user-name strong {
  font-size: 14px;
  color: #FFFFFF;
}

.admin-role-badge {
  font-size: 10px;
  font-weight: 700;
  color: #48CAE4;
  background: rgba(72, 202, 228, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
}

.admin-room-pill {
  font-size: 10px;
  color: #9AA6A0;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}

.live-meta-line {
  font-size: 11.5px;
  color: #798680;
}

/* 접속 통계 필터 및 헤더 */
.panel-header-filter {
  display: flex;
  align-items: center;
}

.admin-select-sm {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #E8ECE9;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  max-width: 140px;
}

.admin-select-sm option {
  background: #141715;
  color: #FFFFFF;
}

/* 레거시 family_home 병합 안내 배너 */
.admin-legacy-banner {
  background: rgba(212, 163, 115, 0.09);
  border: 1px solid rgba(212, 163, 115, 0.25);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.legacy-banner-text {
  font-size: 11.5px;
  color: #D4A373;
  line-height: 1.35;
}

.legacy-banner-text strong {
  color: #FFFFFF;
}

.btn-admin-sub-accent {
  background: rgba(212, 163, 115, 0.2);
  border: 1px solid rgba(212, 163, 115, 0.4);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  flex-shrink: 0;
}

.btn-admin-sub-accent:hover {
  background: rgba(212, 163, 115, 0.35);
}

/* 접속 통계 카드 */
.admin-stat-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  margin-bottom: 8px;
  gap: 10px;
}

.stat-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  flex-wrap: wrap;
}

.stat-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #FFFFFF;
}

.stat-room-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: #8C9992;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.stat-time-meta {
  font-size: 11px;
  color: #6C7A74;
}

.stat-card-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.stat-count-wrap {
  text-align: right;
}

.stat-count-num {
  font-size: 16px;
  font-weight: 800;
  color: #D4A373;
}

.stat-count-label {
  font-size: 11px;
  color: #798680;
}

.btn-stat-del {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #6C7A74;
  font-size: 11.5px;
  cursor: pointer;
  padding: 4px 7px;
  border-radius: 5px;
  transition: all 0.2s;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-stat-del:hover {
  color: #FF6B6B;
  background: rgba(255, 107, 107, 0.12);
  border-color: rgba(255, 107, 107, 0.3);
}

/* --- 방 및 채널 관리 탭 스타일 --- */
.admin-room-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.room-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 14px;
}

.room-title-line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 4px;
}

.room-name {
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
}

.admin-badge-current {
  font-size: 10px;
  font-weight: 700;
  color: #38B000;
  background: rgba(56, 176, 0, 0.12);
  padding: 2px 7px;
  border-radius: 4px;
}

.room-code-meta {
  font-size: 12px;
  color: #798680;
}

.room-code-meta code {
  color: #D4A373;
  font-weight: 700;
}

.room-header-counts {
  display: flex;
  gap: 6px;
}

.room-stat-pill {
  font-size: 11px;
  color: #9AA6A0;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
}

.section-title-line {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #8C9992;
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* 멤버 칩 그리드 */
.admin-members-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 5px 10px;
  border-radius: 8px;
}

.chip-name {
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
}

.chip-owner-tag {
  font-size: 9.5px;
  font-weight: 700;
  color: #D4A373;
  background: rgba(212, 163, 115, 0.15);
  padding: 1px 5px;
  border-radius: 4px;
}

.btn-admin-danger-text {
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.22);
  color: #FF8585;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 7px;
  border-radius: 4px;
  transition: all 0.2s;
  line-height: 1.1;
}

.btn-admin-danger-text:hover {
  background: rgba(255, 107, 107, 0.25);
  color: #FFFFFF;
}

/* 채널 테이블 행 */
.admin-channels-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-channel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.admin-channel-row.is-suspended {
  border-color: rgba(255, 107, 107, 0.25);
  background: rgba(255, 107, 107, 0.04);
}

.channel-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.channel-status-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.badge-active {
  color: #38B000;
  background: rgba(56, 176, 0, 0.12);
}

.badge-suspended {
  color: #FF6B6B;
  background: rgba(255, 107, 107, 0.15);
}

.channel-name-txt {
  font-size: 13px;
  color: #FFFFFF;
}

.channel-patient-txt {
  font-size: 11.5px;
  color: #798680;
}

.btn-admin-sub {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #C8D3CD;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-admin-sub:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.btn-admin-danger-solid {
  width: 100%;
  background: rgba(220, 53, 69, 0.12);
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #FF8585;
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.btn-admin-danger-solid:hover {
  background: rgba(220, 53, 69, 0.22);
  border-color: rgba(220, 53, 69, 0.45);
  color: #FFA3A3;
}

.admin-empty-state,
.admin-sub-empty {
  font-size: 12.5px;
  color: #6C7A74;
  padding: 16px 0;
  text-align: center;
}

/* ==========================================================================
   관리자 콘솔 모바일 풀스크린 뷰 (전체페이지 전환 및 노치/상태바 겹침 방지 안전 여백)
   ========================================================================== */
@media (max-width: 639px) {
  /* 1. 관리자 인증 모달 -> 모바일 네이티브 100% 전체페이지(Fullscreen) 전환 */
  .admin-auth-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: #0E1411 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 10001 !important;
  }

  .admin-auth-card {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    min-height: 100dvh !important;
    height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: #0E1411 !important;
    padding: calc(18px + env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)) !important;
    padding-top: max(56px, calc(18px + env(safe-area-inset-top, 0px))) !important;
    padding-bottom: max(36px, calc(20px + env(safe-area-inset-bottom, 0px))) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  .admin-auth-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 28px !important;
    width: 100% !important;
    flex-shrink: 0 !important;
  }

  .admin-auth-badge {
    font-size: 11px !important;
    padding: 5px 12px !important;
    gap: 8px !important;
  }

  .btn-admin-close {
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 50% !important;
    color: #C8D3CD !important;
    font-size: 16px !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    flex-shrink: 0 !important;
  }

  .btn-admin-close:hover,
  .btn-admin-close:active {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #FFFFFF !important;
  }

  .admin-auth-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    justify-content: flex-start !important;
    padding-top: 6px !important;
  }

  .admin-auth-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: -0.4px !important;
    margin-bottom: 8px !important;
  }

  .admin-auth-desc {
    font-size: 13.5px !important;
    color: #9AA6A0 !important;
    line-height: 1.55 !important;
    margin-bottom: 24px !important;
  }

  .admin-input-group {
    display: flex !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .admin-input {
    flex: 1 !important;
    height: 48px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #FFFFFF !important;
    box-sizing: border-box !important;
  }

  .btn-admin-primary {
    height: 48px !important;
    padding: 0 22px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
  }

  .admin-error-text {
    font-size: 13px !important;
    color: #FF6B6B !important;
    margin-top: 10px !important;
    min-height: 20px !important;
  }
}

/* 실제 모바일 터치 기기(아이폰 노치/다이내믹 아일랜드 및 PWA 단독 앱) 전용 노치 보정 */
html.ios-standalone .admin-auth-card,
@media (max-width: 639px) and (hover: none) and (pointer: coarse) and (display-mode: standalone) {
  .admin-auth-card {
    padding-top: max(60px, calc(18px + env(safe-area-inset-top, 46px))) !important;
  }
}

/* ==========================================================================
   관리자 대시보드 모바일 및 초소형 기기 반응형 완벽 피팅
   ========================================================================== */
@media (max-width: 720px) {
  .admin-stats-summary-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-panel-grid {
    grid-template-columns: 1fr;
  }

  .admin-dashboard-container {
    padding: 20px 16px 40px 16px;
    padding-top: max(56px, calc(18px + env(safe-area-inset-top, 0px))) !important;
    padding-bottom: max(40px, calc(24px + env(safe-area-inset-bottom, 0px))) !important;
  }
}

@media (max-width: 480px) {
  .admin-dashboard-container {
    padding: 16px 14px 40px 14px;
    padding-top: max(56px, calc(16px + env(safe-area-inset-top, 0px))) !important;
    padding-bottom: max(40px, calc(24px + env(safe-area-inset-bottom, 0px))) !important;
    padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
    gap: 16px;
  }

  .admin-top-header {
    padding-bottom: 12px;
  }

  .admin-brand-logo {
    font-size: 13.5px;
    gap: 7px;
  }

  .admin-env-pill {
    font-size: 9.5px;
    padding: 2px 6px;
  }

  .btn-admin-refresh,
  .btn-admin-exit {
    height: 32px;
    padding: 0 10px;
    font-size: 11.5px;
  }

  .admin-stats-summary-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
  }

  .admin-metric-card {
    padding: 12px 13px;
    border-radius: 12px;
    gap: 5px;
  }

  .metric-label {
    font-size: 12.5px;
  }

  .metric-value {
    font-size: 20px;
  }

  .admin-nav-tab {
    font-size: 13px;
    padding: 10px 4px;
  }

  .admin-room-card {
    padding: 16px 14px;
    border-radius: 14px;
    gap: 14px;
  }
}

@media (max-width: 395px) {
  /* 아이폰 미니(가로 385px 이하) 전용 초정밀 피팅 */
  .admin-dashboard-container {
    padding: 14px 10px 36px 10px;
    padding-top: max(52px, calc(14px + env(safe-area-inset-top, 0px))) !important;
    padding-bottom: max(36px, calc(20px + env(safe-area-inset-bottom, 0px))) !important;
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
    gap: 14px;
  }

  .admin-brand-logo {
    font-size: 12.5px;
    gap: 6px;
  }

  .admin-env-pill {
    display: none;
    /* 협소한 가로 폭에서 텍스트 충돌 방지 */
  }

  .btn-admin-refresh,
  .btn-admin-exit {
    height: 30px;
    padding: 0 8px;
    font-size: 11px;
  }

  .admin-stats-summary-bar {
    gap: 8px;
  }

  .admin-metric-card {
    padding: 11px 11px;
  }

  .metric-label {
    font-size: 12px;
  }

  .metric-value {
    font-size: 19px;
  }

  .admin-nav-tab {
    font-size: 12px;
    padding: 9px 2px;
  }
}

/* 관리자 대시보드 아이폰 노치/다이내믹 아일랜드 PWA 단독 앱 보정 */
html.ios-standalone .admin-dashboard-container,
@media (max-width: 639px) and (hover: none) and (pointer: coarse) and (display-mode: standalone) {
  .admin-dashboard-container {
    padding-top: max(60px, calc(16px + env(safe-area-inset-top, 46px))) !important;
  }
}