:root {
  --bg-page: #f3ede2;
  --bg-shell: #faf7f2;
  --surface: #fffdf9;
  --surface-warm: #f5efe4;
  --text-main: #2c241d;
  --text-sub: #73675b;
  --text-muted: #9c8f82;
  --border-color: #e6dec8;
  --primary: #7d5f45;
  --primary-dark: #57402d;
  --primary-soft: #f2ebe0;
  --accent-gold: #c89d66;
  --shadow-sm: 0 4px 14px rgba(54, 42, 30, 0.05);
  --shadow-md: 0 10px 26px rgba(54, 42, 30, 0.1);
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  background: linear-gradient(135deg, #f4eee3 0%, #e8dfd1 100%);
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

.app-shell {
  width: 100%;
  max-width: 520px;
  min-height: 100vh;
  background: var(--bg-shell);
  box-shadow: 0 0 50px rgba(54, 42, 30, 0.08);
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 92px;
}

/* 12가지 IRURIRA 시그니처 아이보리 & 웜톤 테마 */
.theme-ivory { background: linear-gradient(145deg, #fffdf9 0%, #f3ece0 100%); color: #2e251e; border: 1px solid #e5dac9; }
.theme-linen { background: linear-gradient(145deg, #f3ede2 0%, #e2d3be 100%); color: #362b22; border: 1px solid #d6c5ae; }
.theme-latte { background: linear-gradient(145deg, #bfa68f 0%, #9b7e64 100%); color: #fffdf9; border: 1px solid #93765c; }
.theme-butter { background: linear-gradient(145deg, #fef9e6 0%, #f5e5b5 100%); color: #423518; border: 1px solid #ead69b; }
.theme-sage { background: linear-gradient(145deg, #e7ede3 0%, #cdd8c6 100%); color: #273323; border: 1px solid #bfccb7; }
.theme-peach { background: linear-gradient(145deg, #fceddf 0%, #f3cbb2 100%); color: #472b22; border: 1px solid #e8bca0; }
.theme-rose { background: linear-gradient(145deg, #f8e3e5 0%, #e7c2c6 100%); color: #472528; border: 1px solid #ddb3b8; }
.theme-lavender { background: linear-gradient(145deg, #ede8f4 0%, #d5cbe4 100%); color: #322840; border: 1px solid #c6bad8; }
.theme-sky { background: linear-gradient(145deg, #e5eff5 0%, #c6dbe8 100%); color: #213544; border: 1px solid #b6cfde; }
.theme-ocean { background: linear-gradient(145deg, #5b8fb9 0%, #3a6b94 100%); color: #fffdf9; border: 1px solid #356287; }
.theme-night { background: linear-gradient(145deg, #3b322b 0%, #241e19 100%); color: #f7f1e5; border: 1px solid #302822; }
.theme-charcoal { background: linear-gradient(145deg, #35393c 0%, #222527 100%); color: #f7f7f7; border: 1px solid #2b2e31; }

/* 1. IRURIRA 시그니처 상단 다이어리 헤더 */
.irurira-header {
  padding: 18px 16px 14px;
  background: linear-gradient(180deg, #f5efe4 0%, #faf7f2 100%);
  border-bottom: 1px solid var(--border-color);
}

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

.brand-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.brand-badge {
  display: inline-flex;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--primary-dark);
}

.today-date-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-sub);
}

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

.pill-action-btn,
.user-pill-btn {
  height: 34px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(54, 42, 30, 0.04);
}

/* 요약 카운트 칩 바 */
.summary-stats-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}

.summary-stats-bar::-webkit-scrollbar {
  display: none;
}

.stat-pill {
  flex-shrink: 0;
  padding: 5px 11px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-sub);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.stat-pill strong {
  color: var(--primary-dark);
  font-weight: 800;
}

/* 상단 고정 스포트라이트 가로 슬라이드 캐러셀 */
.spotlight-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section-Label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2px;
}

.section-mini-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--primary-dark);
}

.section-mini-hint {
  font-size: 0.71rem;
  color: var(--text-muted);
}

.spotlight-carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.spotlight-carousel::-webkit-scrollbar {
  display: none;
}

.spotlight-ticket {
  flex: 0 0 82%;
  max-width: 340px;
  scroll-snap-align: start;
  position: relative;
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-sm);
}

.spotlight-ticket.single-full {
  flex: 0 0 100%;
  max-width: 100%;
}

.spotlight-ticket.has-photo {
  color: #fff !important;
}

.spotlight-ticket.has-photo .card-bg-overlay {
  opacity: 1;
}

.sp-left {
  position: relative;
  z-index: 2;
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sp-cat {
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.85;
  white-space: nowrap;
}

.sp-title {
  font-size: 1.02rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-date {
  font-size: 0.74rem;
  opacity: 0.82;
  white-space: nowrap;
}

.sp-right {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  text-align: right;
  padding: 6px 11px;
  border-radius: 12px;
  background: rgba(255, 253, 249, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(59, 47, 38, 0.08);
}

.spotlight-ticket.has-photo .sp-right,
.theme-latte .sp-right,
.theme-ocean .sp-right,
.theme-night .sp-right,
.theme-charcoal .sp-right {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.18);
}

.sp-count {
  display: block;
  font-size: 1.25rem;
  font-weight: 900;
  white-space: nowrap;
}

.sp-sub {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.88;
  white-space: nowrap;
}

/* 카테고리 필터 탭 */
.category-nav {
  padding: 12px 16px 6px;
}

.category-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.category-tabs::-webkit-scrollbar {
  display: none;
}

.cat-tab {
  flex-shrink: 0;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--text-sub);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
}

.cat-tab.active {
  background: var(--primary-dark);
  color: #fffdf9;
  border-color: var(--primary-dark);
}

/* 검색 & 정렬 바 */
.toolbar {
  display: flex;
  gap: 8px;
  padding: 6px 16px 10px;
  align-items: center;
}

.search-box {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0 11px;
  height: 38px;
}

.search-icon {
  font-size: 0.85rem;
  margin-right: 6px;
  flex-shrink: 0;
}

.search-box input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 0.84rem;
  background: transparent;
  color: var(--text-main);
}

.sort-select {
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--surface);
  padding: 0 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
}

/* 2. IRURIRA 시그니처 모먼트 티켓 카드 (복제 느낌 제로, 독창적 3단 구조) */
.dday-list-container {
  padding: 4px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dday-list-container.view-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.irurira-card {
  position: relative;
  border-radius: 20px;
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.irurira-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.56) 100%);
  opacity: 0;
  pointer-events: none;
}

.irurira-card.has-photo .card-bg-overlay {
  opacity: 1;
}

.irurira-card.has-photo {
  color: #fff !important;
}

/* 카드 1단: 상단 메타 줄 (분류 칩 + 계산 방식 + 원터치 핀 버튼) */
.irc-top-bar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.irc-top-left {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.irc-chip {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.68);
  border: 1px solid rgba(59, 47, 38, 0.08);
  white-space: nowrap;
}

.irurira-card.has-photo .irc-chip,
.theme-latte .irc-chip,
.theme-ocean .irc-chip,
.theme-night .irc-chip,
.theme-charcoal .irc-chip {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.15);
}

.irc-mode-text {
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.78;
  white-space: nowrap;
}

.irc-top-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.irc-story-pill {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.6);
  white-space: nowrap;
}

.irc-pin-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(59, 47, 38, 0.1);
  background: rgba(255, 253, 249, 0.55);
  font-size: 0.68rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s, transform 0.15s;
}

.irc-pin-btn.pinned {
  opacity: 1;
  background: rgba(255, 253, 249, 0.9);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.irc-pin-btn:hover {
  transform: scale(1.08);
}

/* 카드 2단: 메인 타이틀 & 독립 디데이 뱃지 박스 */
.irc-main-row {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.irc-left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.irc-sticker {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 253, 249, 0.68);
  border: 1px solid rgba(59, 47, 38, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.irc-titles {
  flex: 1 1 auto;
  min-width: 0;
}

.irc-title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.irc-date {
  font-size: 0.76rem;
  font-weight: 500;
  opacity: 0.85;
  white-space: nowrap;
}

.irc-memo {
  font-size: 0.73rem;
  opacity: 0.78;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.irc-badge-box {
  flex-shrink: 0;
  text-align: right;
  padding: 7px 12px;
  border-radius: 14px;
  background: rgba(255, 253, 249, 0.68);
  border: 1px solid rgba(59, 47, 38, 0.08);
  min-width: 82px;
}

.irurira-card.has-photo .irc-badge-box,
.theme-latte .irc-badge-box,
.theme-ocean .irc-badge-box,
.theme-night .irc-badge-box,
.theme-charcoal .irc-badge-box {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.16);
}

.irc-count {
  display: block;
  font-size: 1.24rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.irc-sub {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0.86;
  margin-top: 1px;
  white-space: nowrap;
}

/* 카드 3단: 하단 진행률 게이지 & 다음 기념일 미리보기 바 */
.irc-footer-bar {
  position: relative;
  z-index: 2;
  padding-top: 8px;
  border-top: 1px dashed rgba(59, 47, 38, 0.12);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.irurira-card.has-photo .irc-footer-bar,
.theme-latte .irc-footer-bar,
.theme-ocean .irc-footer-bar,
.theme-night .irc-footer-bar,
.theme-charcoal .irc-footer-bar {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.irc-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.71rem;
  font-weight: 600;
  opacity: 0.88;
}

.irc-progress-track {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(59, 47, 38, 0.1);
  overflow: hidden;
}

.irurira-card.has-photo .irc-progress-track,
.theme-latte .irc-progress-track,
.theme-ocean .irc-progress-track,
.theme-night .irc-progress-track,
.theme-charcoal .irc-progress-track {
  background: rgba(255, 255, 255, 0.22);
}

.irc-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.65;
  transition: width 0.3s ease;
}

/* 2열 위젯 그리드 보기 모드 */
.dday-list-container.view-grid .irurira-card {
  padding: 13px;
  gap: 8px;
}

.dday-list-container.view-grid .irc-mode-text,
.dday-list-container.view-grid .irc-memo,
.dday-list-container.view-grid .irc-footer-bar {
  display: none;
}

.dday-list-container.view-grid .irc-main-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.dday-list-container.view-grid .irc-left {
  width: 100%;
}

.dday-list-container.view-grid .irc-badge-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 10px;
}

/* 메인 뷰 2: 다가오는 통합 기념일 레이더 */
.upcoming-view-header {
  padding: 16px 18px 10px;
}

.upcoming-view-header h2 {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 4px;
}

.upcoming-view-header p {
  font-size: 0.79rem;
  color: var(--text-sub);
  line-height: 1.45;
}

.global-upcoming-list {
  padding: 6px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.global-ms-card {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 13px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.global-ms-card.imminent {
  background: var(--primary-soft);
  border-color: #cbb59b;
}

.gms-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.gms-icon {
  font-size: 1.05rem;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gms-info {
  min-width: 0;
}

.gms-title {
  font-size: 0.88rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gms-sub {
  font-size: 0.75rem;
  color: var(--text-sub);
  margin-top: 2px;
}

.gms-right {
  flex-shrink: 0;
  text-align: right;
}

.gms-dday {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--primary-dark);
  color: #fffdf9;
  font-size: 0.8rem;
  font-weight: 800;
}

/* 무료 회원 광고 배너 슬롯 (하단 독 위쪽에 깔끔히 배치) */
.ad-banner-slot {
  margin: 4px 16px 16px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #f3ece1;
  border: 1px dashed #d5c3ab;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ad-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ad-tag {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  background: #e2d5c1;
  color: #5c4b3b;
}

.ad-remove-link {
  border: none;
  background: transparent;
  color: var(--primary-dark);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.ad-content-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ad-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  flex-shrink: 0;
}

.ad-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ad-texts strong {
  font-size: 0.8rem;
  color: var(--text-main);
}

.ad-texts span {
  font-size: 0.72rem;
  color: var(--text-sub);
}

/* 3. 한 손 엄지 조작 하단 내비게이션 독 (Bottom Dock) */
.bottom-dock {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 520px;
  height: 70px;
  background: rgba(255, 253, 249, 0.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-color);
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr 1fr 1fr;
  align-items: center;
  padding: 0 6px;
  z-index: 50;
  box-shadow: 0 -6px 20px rgba(54, 42, 30, 0.06);
}

.dock-item {
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-muted);
  font-family: inherit;
  cursor: pointer;
  height: 100%;
}

.dock-item.active {
  color: var(--primary-dark);
}

.dock-icon {
  font-size: 0.98rem;
  line-height: 1;
}

.dock-label {
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.dock-center-add {
  height: 44px;
  margin: 0 4px;
  border-radius: 13px;
  border: 1px solid #c9b49a;
  background: linear-gradient(135deg, #57402d 0%, #38281c 100%);
  color: #faf7f2;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(56, 40, 28, 0.25);
}

.dock-plus {
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1;
}

.dock-add-label {
  font-size: 0.64rem;
  font-weight: 700;
  white-space: nowrap;
}

/* 빈 상태 */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 42px 20px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-color);
  color: var(--text-sub);
}

.empty-state-icon {
  font-size: 1.65rem;
  margin-bottom: 8px;
}

/* 모달 공통 */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 22, 17, 0.56);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 100;
  animation: fadeIn 0.2s ease;
}

.modal-backdrop.hidden {
  display: none !important;
}

.modal-sheet {
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  background: var(--surface);
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0.5; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 10;
}

.modal-header h2 {
  font-size: 1.08rem;
  font-weight: 800;
}

.close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--primary-soft);
  color: var(--text-sub);
  font-size: 0.95rem;
  cursor: pointer;
}

.modal-body {
  padding: 16px 20px 26px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.preview-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-sub);
  margin-bottom: -8px;
}

.preview-card {
  cursor: default;
}

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

.form-row {
  display: flex;
  gap: 10px;
}

.flex-1 {
  flex: 1;
}

.form-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
}

.form-input {
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text-main);
  background: #faf7f2;
  outline: none;
}

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

.calc-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.calc-type-item {
  text-align: left;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1.5px solid var(--border-color);
  background: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: inherit;
}

.calc-type-item strong {
  font-size: 0.83rem;
  color: var(--text-main);
}

.calc-type-item span {
  font-size: 0.7rem;
  color: var(--text-sub);
}

.calc-type-item.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.sticker-picker {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.sticker-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1.5px solid var(--border-color);
  background: #fff;
  font-size: 1.02rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sticker-btn.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  transform: scale(1.08);
}

.theme-picker {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.theme-swatch {
  height: 34px;
  border-radius: 10px;
  border: 2px solid var(--border-color);
  cursor: pointer;
}

.theme-swatch.active {
  border: 2.5px solid var(--primary-dark);
  transform: scale(1.08);
}

.bg-upload-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.upload-btn {
  flex: 1;
  text-align: center;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px dashed var(--primary);
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.clear-bg-btn {
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: #f2ece1;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.pin-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.pin-check-row input {
  width: 17px;
  height: 17px;
  accent-color: var(--primary-dark);
}

.modal-footer {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.btn-primary,
.btn-secondary {
  flex: 1;
  height: 46px;
  border-radius: 13px;
  font-size: 0.9rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary {
  background: var(--primary-dark);
  color: #fffdf9;
}

.btn-secondary {
  background: var(--primary-soft);
  color: var(--text-main);
}

/* 상세 모달 */
.detail-sheet {
  padding-bottom: 24px;
}

.detail-cover {
  position: relative;
  padding: 18px 20px 24px;
  background-size: cover;
  background-position: center;
  text-align: center;
}

.detail-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.52) 100%);
  opacity: 0;
}

.detail-cover.has-photo .detail-cover-overlay {
  opacity: 1;
}

.detail-cover.has-photo {
  color: #fff !important;
}

.detail-top-bar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.detail-actions {
  display: flex;
  gap: 8px;
}

.circle-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(59, 47, 38, 0.12);
  background: rgba(255, 253, 249, 0.68);
  backdrop-filter: blur(6px);
  color: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.detail-hero-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.detail-sticker {
  font-size: 1.65rem;
}

.detail-cat-chip {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.65);
}

.detail-title {
  font-size: 1.35rem;
  font-weight: 800;
}

.detail-count {
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -0.8px;
}

.detail-date-info {
  font-size: 0.84rem;
  opacity: 0.88;
}

.detail-memo {
  font-size: 0.82rem;
  opacity: 0.85;
  margin-top: 2px;
}

.detail-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 5;
  overflow-x: auto;
  scrollbar-width: none;
}

.detail-tabs::-webkit-scrollbar {
  display: none;
}

.detail-tab {
  flex: 1;
  padding: 12px 7px;
  border: none;
  background: transparent;
  font-size: 0.81rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--text-sub);
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  white-space: nowrap;
}

.detail-tab.active {
  color: var(--primary-dark);
  border-bottom-color: var(--primary-dark);
}

.tab-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  background: var(--primary-soft);
  color: var(--primary-dark);
  margin-left: 3px;
}

.detail-tab-panel {
  padding: 14px 18px;
}

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

.anniv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-radius: 14px;
  background: #faf7f2;
  border: 1px solid var(--border-color);
}

.anniv-row.passed {
  opacity: 0.56;
}

.anniv-row.upcoming-highlight {
  background: var(--primary-soft);
  border-color: #cbb59b;
}

.anniv-label {
  font-weight: 800;
  font-size: 0.9rem;
}

.anniv-right {
  text-align: right;
}

.anniv-date {
  font-size: 0.82rem;
  font-weight: 600;
}

.anniv-dday {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--primary-dark);
}

/* 스토리 타임라인 */
.story-form {
  background: #faf7f2;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.story-form-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.story-date-input {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 0.82rem;
  background: #fff;
}

.story-photo-btn {
  padding: 6px 11px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border-color);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.story-photo-preview-wrap {
  position: relative;
  width: fit-content;
}

.story-photo-preview-wrap img {
  max-height: 130px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

.remove-photo-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.65);
  color: #fff;
  cursor: pointer;
}

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

.story-input-row textarea {
  flex: 1;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.86rem;
  resize: none;
  outline: none;
}

.story-submit-btn {
  padding: 0 15px;
  border-radius: 10px;
  border: none;
  background: var(--primary-dark);
  color: #fffdf9;
  font-weight: 800;
  font-size: 0.84rem;
  cursor: pointer;
}

.story-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.story-item {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 15px;
  padding: 13px;
  box-shadow: var(--shadow-sm);
}

.story-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.story-item-date {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary-dark);
}

.story-delete-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
}

.story-item-photo {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 11px;
  margin-bottom: 8px;
}

.story-item-text {
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* 동기화 & 로그인 모달 */
.sync-notice,
.auth-hero-box {
  background: var(--primary-soft);
  border-radius: 14px;
  padding: 14px;
  font-size: 0.83rem;
  line-height: 1.5;
}

.auth-hero-box {
  text-align: center;
}

.auth-logo {
  font-size: 1.15rem;
  font-weight: 900;
  margin-bottom: 4px;
}

.sync-card {
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.sync-card h3 {
  font-size: 0.92rem;
  font-weight: 800;
}

.sync-card p {
  font-size: 0.8rem;
  color: var(--text-sub);
  line-height: 1.45;
}

.sync-btn-row {
  display: flex;
  gap: 8px;
}

.sync-code-box {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  padding: 9px;
  font-size: 0.78rem;
  font-family: monospace;
  resize: none;
}

.social-login-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.social-btn {
  height: 44px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border-color);
}

.kakao-btn {
  background: #fee500;
  color: #191919;
  border-color: #f2da00;
}

.naver-btn {
  background: #03c75a;
  color: #ffffff;
  border-color: #02b350;
}

.naver-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-weight: 900;
  font-size: 0.82rem;
}

.google-btn {
  background: #ffffff;
  color: #2e2620;
  border-color: #dcd3c6;
}

.social-quick-connect-box {
  background: #fbf5ea;
  border: 1.5px solid #cbb08c;
  border-radius: 15px;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sqc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sqc-head strong {
  font-size: 0.86rem;
  font-weight: 800;
  color: #36271a;
}

.sqc-close-btn {
  border: none;
  background: transparent;
  color: #7c6752;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
}

.sqc-desc {
  font-size: 0.74rem;
  color: #5c4835;
  line-height: 1.4;
}

.sqc-inputs {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cloud-sync-status-card {
  background: linear-gradient(145deg, #fbf6ed 0%, #f1e5d2 100%) !important;
  border: 1.5px solid #cdb28e !important;
}

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

.cloud-sync-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: #2f6b48;
  color: #fffdf9;
  font-size: 0.69rem;
  font-weight: 800;
}

.cssc-desc {
  font-size: 0.76rem;
  color: #54412e;
  line-height: 1.42;
}

.oauth-config-details {
  margin-top: 10px;
  border: 1px dashed #c8b296;
  border-radius: 14px;
  background: #faf6ef;
  padding: 10px 12px;
}

.oauth-config-details summary {
  font-size: 0.76rem;
  font-weight: 800;
  color: #58432e;
  cursor: pointer;
}

.oauth-config-body {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.oauth-config-help {
  font-size: 0.72rem;
  color: #6d5843;
  line-height: 1.4;
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.76rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
}

.auth-divider span {
  padding: 0 10px;
}

.email-auth-form {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.profile-card {
  background: var(--primary-soft);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.profile-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

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

.profile-info strong {
  font-size: 0.96rem;
}

.profile-info span {
  font-size: 0.78rem;
  color: var(--text-sub);
}

.plan-badge {
  display: inline-block;
  margin-top: 3px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid #d5c3ab;
  font-size: 0.72rem !important;
  font-weight: 700;
  color: var(--primary-dark) !important;
  width: fit-content;
}

.pro-preview-card {
  border: 1.5px solid #d5c3ab;
  background: #fffdf9;
  border-radius: 16px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

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

.pro-crown {
  font-size: 1.5rem;
}

.pro-header h3 {
  font-size: 0.9rem;
  font-weight: 800;
}

.pro-header p {
  font-size: 0.76rem;
  color: var(--text-sub);
  margin-top: 2px;
}

.pro-benefit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.81rem;
  padding-left: 4px;
}

.pro-test-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 9px;
  border-top: 1px dashed var(--border-color);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary-dark);
  cursor: pointer;
}

.pro-test-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-dark);
}

/* 비회원 예시 샘플 1초 비우기 안내 배너 */
.sample-clear-banner {
  margin: 0 16px 8px;
  padding: 9px 12px;
  border-radius: 12px;
  background: #f3ece1;
  border: 1px dashed #cbb59b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.sample-clear-banner span {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-sub);
  line-height: 1.35;
}

.clear-samples-btn {
  flex-shrink: 0;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #c9b49a;
  background: var(--surface);
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 0.73rem;
  font-weight: 800;
  cursor: pointer;
}

/* ⚡ 1초 빠른 템플릿 칩 & 빠른 날짜 선택 칩 */
.quick-template-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.quick-template-row::-webkit-scrollbar {
  display: none;
}

.tpl-chip {
  flex-shrink: 0;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: #faf7f2;
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.14s;
}

.tpl-chip:hover,
.tpl-chip:active {
  background: var(--primary-dark);
  color: #fffdf9;
  border-color: var(--primary-dark);
}

.quick-date-row {
  display: flex;
  gap: 6px;
  margin-top: -6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.qdate-btn {
  flex: 1;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--text-sub);
  font-family: inherit;
  font-size: 0.73rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.qdate-btn:active {
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.toast {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(44, 36, 29, 0.94);
  color: #fffdf9;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
  z-index: 200;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.toast-undo-btn {
  border: 1px solid rgba(255, 253, 249, 0.4);
  background: rgba(255, 253, 249, 0.16);
  color: #f5e2a8;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

/* 🔄 카드 순서 직접 이동 버튼 & 띠/나이 칩 */
.irc-order-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 253, 249, 0.52);
  border-radius: 999px;
  padding: 1px 3px;
  border: 1px solid rgba(59, 47, 38, 0.08);
}

.irc-move-btn {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 0.62rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.68;
  border-radius: 50%;
}

.irc-move-btn:hover,
.irc-move-btn:active {
  opacity: 1;
  background: rgba(255, 253, 249, 0.85);
}

.irc-zodiac-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.69rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 7px;
  background: rgba(255, 253, 249, 0.62);
  border: 1px solid rgba(59, 47, 38, 0.08);
  white-space: nowrap;
}

/* 📜 개인정보처리방침 & 이용약관 링크 및 모달 */
.legal-links-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 0 4px;
  flex-wrap: wrap;
}

.legal-link-btn {
  border: none;
  background: transparent;
  color: var(--text-sub);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.legal-dot,
.legal-ver {
  font-size: 0.73rem;
  color: var(--text-muted);
}

.legal-content-box {
  font-size: 0.81rem;
  line-height: 1.6;
  color: var(--text-main);
}

.legal-content-box h3 {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-top: 10px;
  margin-bottom: 4px;
}

.legal-content-box p {
  color: var(--text-sub);
  margin-bottom: 8px;
}

/* 🔔 상단 알림 종 & 빠른 암호 잠금 버튼 */
.noti-bell-btn {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--surface);
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(54, 42, 30, 0.04);
}

.noti-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #b84a39;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 💬 오늘의 이루리라 응원 한줄 문구 바 */
.daily-quote-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.15s;
}

.daily-quote-bar:hover {
  background: #f6f0e6;
}

.quote-sparkle {
  font-size: 0.82rem;
  flex-shrink: 0;
}

.daily-quote-text {
  flex: 1;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quote-refresh {
  font-size: 0.78rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* 🌙 음력 체크박스 */
.lunar-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 11px;
  background: var(--primary-soft);
  border: 1px solid var(--border-color);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary-dark);
  cursor: pointer;
}

.lunar-check-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-dark);
}

/* ☑️ 상세 모달 내 세부 체크리스트 (To-Do) */
.todo-form {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.todo-input {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid var(--border-color);
  background: #faf7f2;
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
}

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

.todo-add-btn {
  padding: 0 15px;
  border-radius: 11px;
  border: none;
  background: var(--primary-dark);
  color: #fffdf9;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.todo-progress-summary {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 8px;
}

.todo-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #faf7f2;
  border: 1px solid var(--border-color);
  cursor: pointer;
}

.todo-item.done {
  opacity: 0.62;
  background: #f3ede2;
}

.todo-left {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
}

.todo-check-box {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-dark);
  flex-shrink: 0;
}

.todo-text {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-main);
  word-break: break-word;
}

.todo-item.done .todo-text {
  text-decoration: line-through;
}

.todo-del-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  flex-shrink: 0;
}

/* 📸 인스타·카톡 공유용 인증샷 버튼 & 모달 */
.share-pill-btn {
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(59, 47, 38, 0.14);
  background: rgba(255, 253, 249, 0.85);
  backdrop-filter: blur(6px);
  color: #2e251e;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.share-guide-text {
  font-size: 0.8rem;
  color: var(--text-sub);
  text-align: center;
}

.share-canvas-wrap {
  display: flex;
  justify-content: center;
  background: #f3ece0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border-color);
}

.share-canvas-wrap img {
  width: 100%;
  max-width: 320px;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}

/* 🔔 알림 센터 리스트 */
.noti-center-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 🔒 4자리 PIN 암호 잠금 전체화면 */
.pin-lock-screen {
  position: fixed;
  inset: 0;
  background: linear-gradient(145deg, #faf7f2 0%, #ede3d3 100%);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pin-lock-box {
  width: 100%;
  max-width: 340px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.pin-brand {
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--primary-dark);
}

.pin-lock-box h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
}

.pin-lock-box p {
  font-size: 0.8rem;
  color: var(--text-sub);
}

.pin-dots {
  display: flex;
  gap: 14px;
  margin: 12px 0 18px;
}

.pin-dots span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--primary-dark);
  background: transparent;
  transition: background 0.15s, transform 0.15s;
}

.pin-dots span.filled {
  background: var(--primary-dark);
  transform: scale(1.12);
}

.pin-keypad {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.pin-key {
  height: 58px;
  border-radius: 18px;
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--text-main);
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.1s, background 0.1s;
}

.pin-key:active {
  transform: scale(0.95);
  background: var(--primary-soft);
}

.pin-key.sub-key {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-sub);
  background: #f3ede2;
}

/* 👶 아기 출생 모먼트 홈 카드 한줄 발달 브리핑 & 상세 발달·육아팁 탭 스타일 */
.irc-baby-banner {
  position: relative;
  z-index: 2;
  margin-top: 2px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 252, 245, 0.78);
  border: 1px solid rgba(139, 109, 76, 0.22);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.irurira-card.has-photo .irc-baby-banner {
  background: rgba(32, 26, 20, 0.56);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fffdf9;
}

.irc-baby-summary {
  font-size: 0.73rem;
  font-weight: 700;
  color: #4a3a2a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.irurira-card.has-photo .irc-baby-summary {
  color: #fff6e8;
}

.irc-baby-cta {
  flex-shrink: 0;
  font-size: 0.69rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: #6b5238;
  color: #fffdf9;
}

.baby-guide-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.baby-status-hero {
  background: linear-gradient(135deg, #f8f1e5 0%, #efe2cd 100%);
  border: 1px solid #dcc7ab;
  border-radius: 16px;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

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

.baby-current-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #5c4632;
  color: #fffdf9;
  font-size: 0.72rem;
  font-weight: 800;
}

.baby-age-detail {
  font-size: 0.76rem;
  font-weight: 700;
  color: #6b533b;
}

.baby-status-title {
  font-size: 0.96rem;
  font-weight: 800;
  color: #2f241b;
}

.baby-status-sub {
  font-size: 0.78rem;
  color: #5c4938;
  line-height: 1.42;
}

.baby-wonder-alert {
  margin-top: 3px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fffdf9;
  border: 1px dashed #c89d66;
  font-size: 0.75rem;
  color: #4f3b27;
  line-height: 1.4;
}

.baby-wonder-alert strong {
  color: #9e5816;
  font-weight: 800;
}

.baby-stage-selector-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.baby-stage-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-sub);
}

.baby-stage-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.baby-stage-tabs::-webkit-scrollbar {
  display: none;
}

.baby-stage-chip {
  flex-shrink: 0;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: #faf6ef;
  color: var(--text-sub);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.14s;
}

.baby-stage-chip.current-stage {
  border-color: #b58d5d;
  background: #f3e6d3;
  color: #4a3520;
}

.baby-stage-chip.active {
  background: var(--primary-dark);
  color: #fffdf9;
  border-color: var(--primary-dark);
  box-shadow: 0 3px 8px rgba(74, 55, 40, 0.18);
}

.baby-now-dot {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  background: #d97724;
  color: #fff;
}

.baby-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.baby-metric-box {
  background: #faf6ef;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 9px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.baby-metric-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
}

.baby-metric-val {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.25;
}

.baby-info-card {
  background: #fffdf9;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.baby-info-card.highlight-tip {
  background: #fbf6ec;
  border-color: #dcc6a8;
}

.baby-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.baby-card-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #3a2d21;
  display: flex;
  align-items: center;
  gap: 5px;
}

.baby-bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  margin: 0;
}

.baby-bullet-list li {
  font-size: 0.79rem;
  color: #433529;
  line-height: 1.46;
  padding-left: 14px;
  position: relative;
}

.baby-bullet-list li::before {
  content: "•";
  position: absolute;
  left: 2px;
  top: 0;
  color: #9c7447;
  font-weight: 900;
}

.baby-add-todos-btn {
  margin-top: 4px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid #bda07c;
  background: #f3e8d8;
  color: #463320;
  font-family: inherit;
  font-size: 0.77rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.14s;
}

.baby-add-todos-btn:hover,
.baby-add-todos-btn:active {
  background: #5c4632;
  color: #fffdf9;
  border-color: #5c4632;
}

/* ⚡ 홈 화면 상단 아기 · 커플 · 습관 원터치 빠른 등록 바 */
.cat-quick-entry-bar {
  display: flex;
  gap: 6px;
  padding: 6px 16px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.cat-quick-entry-bar::-webkit-scrollbar {
  display: none;
}

.cqe-chip {
  flex-shrink: 0;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid #d5c1a7;
  background: #fffcf6;
  color: #4a3726;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 5px rgba(59, 47, 38, 0.05);
  transition: all 0.14s;
}

.cqe-chip.baby {
  background: #fbf1e1;
  border-color: #caa472;
  color: #4f361b;
}

.cqe-chip:hover,
.cqe-chip:active {
  background: var(--primary-dark);
  color: #fffdf9;
  border-color: var(--primary-dark);
}

/* 👶 등록 모달 내 아기 탄생 프로필 빠른 입력 박스 (태어난 시간·몸무게·키·사진) */
.baby-profile-fields {
  background: linear-gradient(145deg, #fbf5ea 0%, #f3e7d3 100%);
  border: 1.5px solid #cbb08c;
  border-radius: 16px;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bpf-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bpf-header strong {
  font-size: 0.85rem;
  font-weight: 800;
  color: #3b2b1d;
}

.bpf-header span {
  font-size: 0.72rem;
  color: #6b533b;
}

.bpf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.bpf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bpf-field label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #4f3b27;
}

.bpf-input {
  padding: 8px 10px !important;
  font-size: 0.8rem !important;
  background: #fffdf9 !important;
}

.bpf-photo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px dashed #d4bc9c;
}

.bpf-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 10px;
  background: #5c4632;
  color: #fffdf9;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
}

.bpf-photo-status {
  font-size: 0.72rem;
  font-weight: 700;
  color: #6b533b;
}

/* 홈 카드에 표시되는 아기 출생 정보(시간·몸무게·키·태명) 캡슐 줄 */
.irc-baby-specs-row {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.irc-spec-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 251, 243, 0.88);
  border: 1px solid rgba(139, 109, 76, 0.25);
  color: #463423;
  font-size: 0.69rem;
  font-weight: 800;
}

.irurira-card.has-photo .irc-spec-pill {
  background: rgba(28, 22, 17, 0.62);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff8ec;
}

/* 상세 화면 내 우리 아기 탄생 프로필 & 빠른 성장 일기 입력 카드 */
.baby-birth-profile-card {
  background: #fffdf9;
  border: 1.5px solid #d5be9e;
  border-radius: 15px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

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

.bbp-top h4 {
  font-size: 0.85rem;
  font-weight: 800;
  color: #3a2b1d;
}

.bbp-edit-btn {
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid #c6ad8b;
  background: #f6ede0;
  color: #4b3724;
  font-family: inherit;
  font-size: 0.71rem;
  font-weight: 800;
  cursor: pointer;
}

.bbp-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.bbp-spec-item {
  background: #faf5ec;
  border: 1px solid #eadbc7;
  border-radius: 10px;
  padding: 7px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
}

.bbp-spec-item span {
  color: #78624c;
  font-weight: 700;
}

.bbp-spec-item strong {
  color: #2f2319;
  font-weight: 800;
}

.bbp-quick-record-btn {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px dashed #b89870;
  background: #fdf9f2;
  color: #543d26;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
}

/* 스토리(육아 일기) 탭의 몸무게·키 빠른 입력 줄 */
.story-baby-metrics-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 6px;
}

.sbm-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #faf5ec;
  border: 1px solid #dfd0bc;
  border-radius: 10px;
  padding: 6px 10px;
}

.sbm-item span {
  font-size: 0.73rem;
  font-weight: 800;
  color: #523d29;
  white-space: nowrap;
}

.sbm-item input {
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  color: #2e241b;
  outline: none;
  text-align: right;
}

.sbm-item small {
  font-size: 0.71rem;
  font-weight: 700;
  color: #7d6752;
}

.story-growth-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 5px;
}

.story-growth-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #efe3d0;
  color: #493521;
  font-size: 0.71rem;
  font-weight: 800;
}

/* 📲 상단 헤더 앱설치·즐겨찾기 버튼 & 홈 프로모션 배너 & 설치 안내 모달 */
.install-pill-btn {
  background: linear-gradient(135deg, #4a3525 0%, #6b4e35 100%) !important;
  color: #fffdf9 !important;
  border-color: #4a3525 !important;
  box-shadow: 0 3px 10px rgba(74, 53, 37, 0.2);
}

.install-pill-btn:hover {
  opacity: 0.94;
}

.install-promo-banner {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fffcf6 0%, #f5ead8 100%);
  border: 1.5px solid #dcc5a6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(90, 68, 44, 0.08);
}

.ipb-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ipb-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  border: 1px solid #d5bfa2;
}

.ipb-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ipb-texts strong {
  font-size: 0.8rem;
  font-weight: 800;
  color: #36271b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ipb-texts span {
  font-size: 0.71rem;
  color: #6e5946;
  line-height: 1.25;
}

.ipb-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ipb-install-btn {
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  background: #4a3525;
  color: #fffdf9;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(74, 53, 37, 0.2);
}

.ipb-close-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(90, 68, 44, 0.1);
  color: #6e5946;
  font-size: 0.75rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.install-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.install-hero-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #faf4ea 0%, #efe1cc 100%);
  border: 1px solid #dcc6a8;
}

.install-hero-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  border: 1px solid #cdb392;
  flex-shrink: 0;
}

.install-hero-texts strong {
  display: block;
  font-size: 0.96rem;
  font-weight: 900;
  color: #36271b;
  margin-bottom: 3px;
}

.install-hero-texts p {
  font-size: 0.78rem;
  color: #624e3b;
  line-height: 1.4;
}

.install-action-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.install-main-cta {
  width: 100%;
  padding: 13px 16px;
  border-radius: 16px;
  border: none;
  background: linear-gradient(135deg, #4a3525 0%, #6d4f36 100%);
  color: #fffdf9;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(74, 53, 37, 0.22);
  text-align: left;
}

.install-main-cta span {
  font-size: 1.4rem;
}

.install-main-cta strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
}

.install-main-cta small {
  display: block;
  font-size: 0.72rem;
  color: rgba(255, 253, 249, 0.82);
  margin-top: 2px;
}

.install-guide-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.install-guide-item {
  padding: 12px 14px;
  border-radius: 14px;
  background: #fdfaf4;
  border: 1px solid #e5d8c5;
}

.install-guide-item.active-device {
  border: 2px solid #8c6642;
  background: #fff9ee;
}

.igi-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eadbc6;
  color: #463220;
  font-size: 0.74rem;
  font-weight: 800;
  margin-bottom: 7px;
}

.install-guide-item ol {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.install-guide-item li {
  font-size: 0.77rem;
  color: #4e3d2e;
  line-height: 1.45;
}

.install-guide-item kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 5px;
  background: #eee4d5;
  border: 1px solid #cbb79c;
  font-size: 0.72rem;
  font-weight: 800;
  color: #36271b;
}

/* 📱 모바일 입력창 가로 넘침 방지 */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.app-shell,
.modal-sheet,
.modal-body,
.detail-tab-panel {
  max-width: 100%;
  overflow-x: hidden;
}

.modal-sheet {
  max-width: min(520px, 100vw);
}

input,
select,
textarea,
.form-input {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.form-input {
  width: 100%;
}

input[type="date"] {
  display: block;
  -webkit-appearance: none;
  appearance: none;
}

.form-group,
.form-row > *,
.flex-1,
.bpf-field,
.sbm-item,
.calc-type-item {
  min-width: 0;
}

.bpf-grid,
.story-baby-metrics-row,
.calc-type-grid,
.bbp-specs-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.theme-picker {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.sbm-item input {
  flex: 1;
  min-width: 0;
}

.todo-input,
.story-input-row textarea {
  min-width: 0;
  width: 100%;
}

.story-date-input {
  flex: 1;
  min-width: 0;
}

.story-photo-btn,
.todo-add-btn,
.story-submit-btn {
  flex-shrink: 0;
}

.header-right-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.sort-select {
  max-width: 42%;
}

@media (max-width: 380px) {
  .form-row {
    flex-direction: column;
  }
  .install-pill-btn span {
    font-size: 0.7rem;
  }
}

/* 모달 안 요소가 눌려서 잘리지 않도록 (미리보기 카드 등) */
.modal-body > * {
  flex-shrink: 0;
}

.preview-card {
  min-height: 96px;
}

/* 아기 출생 정보 2×2 입력 */
.bpf-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.bpf-input {
  height: 40px;
}

/* 🧩 위젯 (1×1 · 2×1 · 1×2 · 2×2 · 4×1 · 4×2) */
.wg {
  --c: var(--cell, 76px);
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--c) * 0.24);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.wg.has-photo {
  color: #fff !important;
}

.wg.has-photo .card-bg-overlay {
  opacity: 1;
}

.wg-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: calc(var(--c) * 0.13);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(var(--c) * 0.04);
  min-width: 0;
}

.wg-sticker {
  font-size: calc(var(--c) * 0.26);
  line-height: 1;
  flex-shrink: 0;
}

.wg-title {
  font-size: calc(var(--c) * 0.17);
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}

.wg-count {
  font-size: calc(var(--c) * 0.3);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.wg-sub,
.wg-date,
.wg-cat {
  font-size: calc(var(--c) * 0.13);
  font-weight: 600;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.wg-texts {
  display: flex;
  flex-direction: column;
  gap: calc(var(--c) * 0.03);
  flex: 1;
  min-width: 0;
}

.wg-top,
.wg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.wg-row {
  align-items: baseline;
}

.wg-bar {
  height: calc(var(--c) * 0.06);
  border-radius: 999px;
  background: rgba(59, 47, 38, 0.12);
  overflow: hidden;
}

.wg-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  opacity: 0.6;
}

.wg-1x1 .wg-inner {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--c) * 0.08);
}

.wg-1x1 .wg-count {
  font-size: calc(var(--c) * 0.21);
}

.wg-2x1 .wg-inner,
.wg-4x1 .wg-inner {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: calc(var(--c) * 0.1);
}

.wg-2x1 .wg-count {
  font-size: calc(var(--c) * 0.25);
}

.wg-4x1 .wg-count {
  font-size: calc(var(--c) * 0.36);
  margin-left: auto;
  flex-shrink: 0;
  max-width: 45%;
}

.wg-1x2 .wg-inner {
  align-items: center;
  text-align: center;
}

.wg-1x2 .wg-title {
  font-size: calc(var(--c) * 0.15);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.wg-1x2 .wg-count {
  font-size: calc(var(--c) * 0.23);
}

.wg-2x2 .wg-count {
  font-size: calc(var(--c) * 0.48);
}

.wg-4x2 .wg-title {
  font-size: calc(var(--c) * 0.24);
}

.wg-4x2 .wg-count {
  font-size: calc(var(--c) * 0.58);
}

/* 홈 위젯 보기 */
.dday-list-container.view-widget {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: var(--cell, 76px);
  grid-auto-flow: dense;
  gap: 8px;
}

.view-widget .wg-1x1 { grid-column: span 1; grid-row: span 1; }
.view-widget .wg-2x1 { grid-column: span 2; grid-row: span 1; }
.view-widget .wg-1x2 { grid-column: span 1; grid-row: span 2; }
.view-widget .wg-2x2 { grid-column: span 2; grid-row: span 2; }
.view-widget .wg-4x1 { grid-column: span 4; grid-row: span 1; }
.view-widget .wg-4x2 { grid-column: span 4; grid-row: span 2; }

/* 위젯 모달 */
.widget-size-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.wsz-btn {
  min-width: 0;
  padding: 10px 6px;
  border-radius: 12px;
  border: 1.5px solid var(--border-color);
  background: #fff;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--text-main);
}

.wsz-btn.active {
  border-color: var(--primary-dark);
  background: var(--primary-soft);
}

.wsz-shape-box {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wsz-shape {
  display: block;
  border-radius: 3px;
  background: var(--primary);
  opacity: 0.75;
}

.wsz-btn strong {
  font-size: 0.82rem;
  font-weight: 800;
}

.wsz-btn small {
  font-size: 0.68rem;
  color: var(--text-sub);
}

.widget-preview-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 190px;
  padding: 16px;
  border-radius: 18px;
  background: #f3ece0;
  border: 1px solid var(--border-color);
}

.widget-help {
  font-size: 0.76rem;
  color: var(--text-sub);
  line-height: 1.45;
}

/* 단독 위젯 창 */
body.widget-mode {
  background: #faf7f2;
  min-height: 100vh;
  align-items: center;
  overflow: hidden;
}

body.widget-mode .app-shell {
  display: none;
}

#widget-root .wg {
  box-shadow: none;
}

.hidden {
  display: none !important;
}

/* Approved infinity / sprout / heart identity */
.brand-badge{gap:7px;letter-spacing:0;flex-shrink:0}.brand-symbol{width:44px;height:44px;object-fit:contain;border-radius:12px}.brand-wordmark{display:flex;flex-direction:column;font-size:20px;font-weight:850;line-height:1.15;white-space:nowrap;color:#60432e}.brand-wordmark small{font-size:8px;letter-spacing:3px;margin-top:4px}.brand-wrap{min-width:0}.brand-full{display:block;width:200px;max-width:100%;height:auto;margin:auto}.pin-brand{margin-bottom:0}.auth-brand-logo{display:block;width:180px;height:180px;object-fit:contain;margin:-18px auto -6px}.header-top-row{flex-wrap:wrap}@media(max-width:380px){.brand-symbol{width:36px;height:36px}.brand-wordmark{font-size:18px}.header-right-actions{gap:4px}.pill-action-btn{padding:0 8px}}

.admin-entry-link{text-decoration:none;display:inline-flex;align-items:center}.legal-links-box{flex-wrap:wrap}

/* Keep detail hero intact and use one scroll container per modal. */
.modal-sheet{max-height:calc(100dvh - 20px);isolation:isolate;overscroll-behavior:contain;animation:modalEnter .18s ease-out}
.modal-sheet>*{flex-shrink:0}
.modal-body,.detail-tab-panel{flex:0 0 auto;overflow:visible}
.modal-header,.detail-cover,.detail-tabs{flex-shrink:0}
.detail-cover{min-height:250px}
.detail-top-bar{flex-wrap:wrap;gap:8px}
.detail-actions{flex-wrap:wrap;justify-content:flex-end}
#modal-widget{z-index:120}
#modal-widget .modal-sheet{background:var(--surface)}
.widget-photo-buttons{display:flex;flex-wrap:wrap;gap:8px}
.widget-photo-buttons button{flex:1 1 100px;font-size:.8rem;padding:10px 8px;min-height:40px}
.widget-photo-controls{padding:12px;border:1px solid var(--border-color);border-radius:14px;background:var(--surface-warm)}
.wg.has-photo .wg-inner{text-shadow:0 1px 5px rgba(0,0,0,.5)}
@keyframes modalEnter{from{transform:translateY(20px)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.modal-sheet{animation:none}}

body:has(.modal-backdrop:not(.hidden)){overflow-y:hidden}


#modal-share-card{z-index:125}.share-guide-text{line-height:1.6}button:disabled{cursor:default;opacity:.55}


.baby-section-share-btn,.story-share-btn{border:1px solid #c9b292;background:#faf6ee;color:#65472f;border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:700;margin-top:10px}.baby-section-share-btn{width:100%}.baby-section-share-btn:disabled,.story-share-btn:disabled{opacity:.5}


#share-caption{width:100%;box-sizing:border-box;min-height:110px;padding:12px;border:1px solid #c9b292;border-radius:10px;background:var(--surface);color:var(--text);font:inherit}.sync-btn-row a.btn-secondary{text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center}


.share-caption-header{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0 8px}.share-caption-header label{font-weight:700}.share-caption-header button{padding:8px 12px}.share-caption-header select{border:1px solid #c9b292;border-radius:8px;padding:8px;background:var(--surface);color:var(--text)}


.share-image-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}.share-image-choice{display:grid;grid-template-columns:auto 1fr;gap:8px;border:1px solid #c9b292;border-radius:12px;padding:10px;cursor:pointer}.share-image-choice img{width:100%;height:150px;object-fit:contain;grid-column:1 / -1;background:#f5efe4}.share-image-choice input{width:20px;height:20px;accent-color:#65472f}.share-image-choice:has(input:checked){border:2px solid #87966b;background:#f1f5eb}.share-image-choice span{font-size:.85rem;font-weight:700}#share-final-caption{width:100%;box-sizing:border-box;padding:12px;border:1px solid #c9b292;border-radius:10px;background:#faf6ee;color:#453c33;font:inherit;margin:8px 0}


.share-caption-header #btn-add-caption-page{flex:0 0 30px;width:30px;height:30px;min-height:30px;padding:0;border-radius:8px;font-size:18px}.caption-page-nav{display:inline-flex;align-items:center;gap:2px}.caption-page-nav button{flex:none;width:28px;height:30px;min-height:30px;padding:0;border:0;border-radius:6px;background:#f3ece0;color:#65472f;font-size:18px;cursor:pointer}.caption-page-nav button:disabled{opacity:.35;cursor:default}.caption-page-nav #share-caption-page{width:30px;height:30px;min-width:0;padding:0;border:0;background:transparent;text-align:center;color:var(--text);font:inherit;appearance:textfield}.caption-page-nav input::-webkit-inner-spin-button,.caption-page-nav input::-webkit-outer-spin-button{appearance:none;margin:0}.share-caption-header #btn-save-caption-page{flex:0 0 auto;padding:8px 12px;min-height:32px}


#share-card-preview-img{max-height:420px;width:100%;object-fit:contain}


.share-image-choices{display:flex;overflow-x:auto;overflow-y:hidden;gap:12px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:4px 0 10px;position:relative;scrollbar-width:thin}.share-image-choice{flex:0 0 calc(100% - 24px);box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always;min-width:0}.share-image-choice img{height:250px;pointer-events:none}.share-carousel-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:12px}.share-carousel-nav button{width:34px;height:34px;border:1px solid #c9b292;border-radius:50%;background:#f3ece0;color:#65472f;font-size:20px;cursor:pointer}.share-carousel-nav button:disabled{opacity:.3;cursor:default}#share-image-position{font-size:.85rem;font-weight:700}


#share-destinations #btn-device-share-png{display:block;width:100%;box-sizing:border-box;min-height:46px;padding:12px;text-align:center;margin:10px 0;border:1px solid #c9b292;border-radius:12px;font-weight:700}.instagram-send-panel{padding:12px;border:1px solid #e5c5bd;border-radius:12px;background:#fff7f2;display:flex;flex-wrap:wrap;gap:8px}.instagram-send-panel button{flex:1 1 145px;min-height:44px}.instagram-send-panel p{flex-basis:100%;margin:0}


.admin-entry-link[hidden]{display:none!important}

.calendar-connect-card{margin-top:16px}.calendar-connect-card p{font-size:.8rem;line-height:1.6;overflow-wrap:anywhere}.calendar-actions{display:flex;gap:8px;flex-wrap:wrap}.calendar-actions button{flex:1;min-width:100px}.calendar-actions [hidden]{display:none!important}.calendar-connect-card details{font-size:.8rem;margin-top:12px;line-height:1.6}

.social-connections-card{margin-top:16px}.social-connections-card p{font-size:.8rem;line-height:1.6}.social-account-row{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:8px 0;overflow-wrap:anywhere}.social-account-row button{flex:0 0 auto;min-height:34px;padding:6px 10px}.social-targets{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.social-targets label{display:flex;align-items:center;gap:5px;background:#f3ede2;padding:8px 10px;border-radius:12px;font-size:.8rem}.social-targets input{width:16px;height:16px;margin:0}.threads-send-panel{border-top:1px solid #e7d8c4;padding-top:12px;margin-top:12px}.social-connections-card h4,.threads-send-panel h4{margin:12px 0 6px}
.social-publish-preview{width:min(620px,calc(100vw - 24px));max-height:90dvh;box-sizing:border-box;border:1px solid #d8c6b0;border-radius:20px;padding:22px;background:#fffdf9;color:#392c22;overflow:auto;box-shadow:0 20px 80px #0005}.social-publish-preview::backdrop{background:#0008}.social-publish-preview h2{font-size:1.25rem;margin:0 0 12px}.social-preview-gallery{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory}.social-preview-gallery img{width:100%;max-height:46dvh;object-fit:contain;flex:0 0 100%;scroll-snap-align:center;border-radius:12px;background:#faf6ee}.social-preview-caption{white-space:pre-wrap;overflow-wrap:anywhere;padding:14px;background:#f4eee4;border-radius:12px}.social-preview-actions{display:flex;gap:10px;position:sticky;bottom:-22px;padding:12px 0;background:#fffdf9}.social-preview-actions button{flex:1}

.social-publish-preview label{display:block;font-weight:700;margin:14px 0}.social-publish-preview select{display:block;width:100%;padding:12px;border:1px solid #d8c6b0;border-radius:10px;background:#fffdf9;color:#392c22;margin-top:8px}.social-publish-preview textarea{display:block;box-sizing:border-box;width:100%;font:inherit;font-weight:400;resize:vertical;border:1px solid #d8c6b0}

.view-size-select{width:70px;min-width:64px;padding:8px 4px;border:1px solid #dfd7cc;border-radius:18px;background:#fffdf9;color:#493726;font:inherit;font-size:12px}.widget-size-medium .wg,.widget-size-large .wg{min-width:0}

.view-size-picker{position:relative;flex-shrink:0}.view-size-picker #view-size-toggle{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid #e7e1d9;border-radius:50%;background:#fffdf9;color:#6d6b71;font-size:23px;box-shadow:0 2px 7px #4433220d}.view-size-menu{position:absolute;right:0;top:46px;width:184px;padding:14px 8px;border:1px solid #ece7e1;border-radius:23px;background:#fffefc;box-shadow:0 8px 26px #342a2526;z-index:100}.view-menu-title{display:block;padding:2px 16px 9px;color:#918b87;font-size:11px}.view-size-menu button{display:flex;align-items:center;gap:14px;width:100%;padding:12px 8px;border:0;border-radius:12px;background:transparent;color:#55555f;font-size:14px;text-align:left}.view-size-menu button:hover,.view-size-menu button:focus-visible{background:#f6f0e8}.view-check{width:17px;color:#e37d8b;font-weight:700}.view-size-menu button>span:nth-child(2){font-size:20px;width:23px}

.card-frame-picker h3{margin:12px 0 6px}.card-frame-picker p{font-size:12px;color:#8a7a68}.card-frame-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.card-frame-option{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 3px;border:1px solid #e4dace;border-radius:12px;background:#fffdf9;color:#554435;font-size:10px;cursor:pointer}.card-frame-option[aria-pressed=true]{border:2px solid #826c51;background:#f4eddf}.card-frame-swatch{display:grid;place-items:center;width:45px;height:58px;border:5px solid;border-radius:8px;font-weight:900;font-size:15px;box-shadow:inset 0 0 0 1px #ffffff80}.card-frame-option:focus-visible{outline:3px solid #b69c76}

.card-frame-swatch{width:100%;height:auto;aspect-ratio:4/5;border:0;overflow:hidden;display:block;border-radius:5px}.card-frame-swatch img{width:100%;height:100%;object-fit:contain;display:block}.card-frame-option{padding:6px}.card-frame-option>span:last-child{min-height:26px;display:flex;align-items:center;text-align:center}

.affiliate-banner{grid-column:1/-1;grid-row:span 1;min-width:0;padding:12px;border:1px solid #e8dfd3;border-radius:16px;background:#fcf8f1;margin:12px 0;align-self:start}.view-widget>.affiliate-banner{grid-row:span 2}.affiliate-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:12px}.affiliate-head button{width:28px;height:28px;border:1px solid #e2d7c9;border-radius:50%;background:white;margin-left:4px}.affiliate-track{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}.affiliate-card{flex:0 0 calc((100% - 32px)/5);min-width:0;text-decoration:none;color:#514335;scroll-snap-align:start}.affiliate-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;background:#eee5d9}.affiliate-card span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:10px;line-height:1.4;margin-top:5px}.affiliate-banner small{display:block;color:#978a7b;font-size:10px;margin-top:8px}.affiliate-card[hidden]{display:none}
/* Affiliate recommendations stay compact and secondary to personal records. */
.bottom-dock{grid-template-columns:1fr 1fr 1.15fr 1fr 1fr;padding-bottom:env(safe-area-inset-bottom,0px);height:calc(70px + env(safe-area-inset-bottom,0px))}.bottom-dock .dock-label{font-size:10px;white-space:nowrap}
.affiliate-banner,.view-widget>.affiliate-banner{grid-column:1/-1;grid-row:auto;min-width:0;align-self:start;margin:10px 0;padding:9px 11px;border:1px solid #e9e1d7;border-radius:12px;background:#fbf8f2;box-shadow:none}
.affiliate-head{margin-bottom:5px;font-size:11px;color:#776653;gap:6px}.affiliate-head strong{font-weight:600}.affiliate-badge{font-size:9px;border:1px solid #dfd6ca;border-radius:4px;padding:0 4px;color:#9b8c7b}
.affiliate-track{display:grid;grid-template-columns:1fr;gap:7px;overflow:visible}.affiliate-card{display:flex;gap:9px;align-items:center;min-width:0;min-height:44px;color:#5d4d3d;text-decoration:none}.affiliate-card img{flex:0 0 44px;width:44px;height:44px;aspect-ratio:1;object-fit:cover;border-radius:7px}.affiliate-card span{font-size:12px;line-height:1.4;margin:0;-webkit-line-clamp:2;word-break:keep-all}.affiliate-banner small{font-size:9px;line-height:1.3;margin-top:5px;color:#a19280}
.affiliate-baby .affiliate-track,.affiliate-checklist .affiliate-track{grid-template-columns:repeat(3,minmax(0,1fr))}.affiliate-baby .affiliate-card,.affiliate-checklist .affiliate-card{gap:5px;align-items:center}.affiliate-baby .affiliate-card img,.affiliate-checklist .affiliate-card img{flex-basis:30px;width:30px;height:36px}.affiliate-baby .affiliate-card span,.affiliate-checklist .affiliate-card span{font-size:10px}
.affiliate-gifts .affiliate-track{gap:0}.affiliate-gifts .affiliate-card{padding:10px 0;border-bottom:1px solid #e9e1d7}.affiliate-gifts .affiliate-card:last-child{border-bottom:0}.affiliate-intro,.affiliate-empty{font-size:13px;color:#94816c;padding:12px}.affiliate-card:focus-visible{outline:2px solid #9b8060;outline-offset:3px}
@media(max-width:360px){.affiliate-baby .affiliate-card,.affiliate-checklist .affiliate-card{flex-direction:column;align-items:flex-start}.affiliate-baby .affiliate-card img,.affiliate-checklist .affiliate-card img{height:28px;width:28px;flex-basis:28px}}
.view-widget>.affiliate-home{grid-row:span 1;max-height:calc(var(--cell,76px) - 4px);margin:2px 0;padding:6px 9px;overflow:hidden}.view-widget>.affiliate-home .affiliate-head{display:none}.view-widget>.affiliate-home .affiliate-card{min-height:28px}.view-widget>.affiliate-home .affiliate-card img{flex-basis:28px;width:28px;height:28px}.view-widget>.affiliate-home .affiliate-card span{font-size:11px}.view-widget>.affiliate-home small{font-size:8px;margin-top:3px}

.admin-entry-link[hidden]{display:none!important}.admin-entry-top{display:block;text-align:center;text-decoration:none;margin-bottom:12px;padding:11px;border:1px solid var(--border-color);border-radius:12px}

.public-intro{padding:4px 4px 12px}.public-intro h1{font-size:14px;line-height:1.5;margin:4px 0;color:var(--text-main)}.public-intro p{font-size:12px;color:var(--text-muted);margin:3px 0 6px}.public-intro nav{display:flex;flex-wrap:wrap;gap:12px}.public-intro a{font-size:11px;color:#897258;text-underline-offset:3px}
.app-shell{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.app-footer{margin-top:auto;padding:28px 20px 16px;border-top:1px solid var(--border-color);background:var(--bg-shell)}
.footer-brand{font-size:10px;letter-spacing:1.8px;color:#9a866e;font-weight:700}
.app-footer h1{margin:9px 0 5px;font-size:13px;font-weight:600}
.app-footer nav{margin-top:14px;gap:8px 16px;align-items:center}
.app-footer nav>a,.app-footer nav>button{display:inline-flex;align-items:center;min-height:32px}
.mypage-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:16px 20px 4px}
.mypage-tools>button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 10px;border:1px solid #e6dbce;border-radius:15px;background:#f8f3eb;color:#5b4632;font:inherit;text-align:left;cursor:pointer;min-width:0}
.mypage-tools>button:hover,.mypage-tools>button:focus-visible{background:#efe5d6;border-color:#a18a6c}
.mypage-tools>button>span{font-size:23px}.mypage-tools strong{font-size:12px;line-height:1.5}.mypage-tools small{font-size:10px;line-height:1.5;color:#97836a;word-break:keep-all}
.instagram-help{margin-top:16px;border-top:1px solid #e7dac9;padding-top:14px;font-size:13px;line-height:1.8;scroll-margin-top:82px}
.instagram-help summary{font-weight:700;cursor:pointer;color:#69503a;padding:5px 0}
.instagram-help ol{padding-left:21px}.instagram-help li{margin:12px 0}.instagram-help a{color:#64784f;text-underline-offset:4px}
.instagram-help .guide-status{border-left:3px solid #b39b72;background:#f5eee2;padding:10px 12px;color:#785f42;line-height:1.7}
@media(max-width:360px){.mypage-tools{padding-inline:14px;gap:6px}.mypage-tools>button{padding:12px 8px}.mypage-tools small{font-size:9px}}
.affiliate-viewport{overflow:hidden;min-width:0}.affiliate-banner .affiliate-track{display:flex;gap:0;overflow:visible;transition:transform .35s ease;align-items:stretch}.affiliate-page{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:repeat(var(--ad-columns,1),minmax(0,1fr));gap:8px}.affiliate-controls{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin:3px 0 0}.affiliate-controls[hidden]{display:none}.affiliate-controls button{height:24px;min-width:26px;padding:0 5px;border:1px solid #e6dccf;background:#fffdf9;color:#7b6650;border-radius:7px;font-size:15px;cursor:pointer}.affiliate-counter{font-size:9px;color:#9b8b78;min-width:30px;text-align:center}.affiliate-card img{object-fit:contain;background:#fff}.affiliate-gifts .affiliate-card{border:0;padding:0}.view-widget>.affiliate-home{grid-row:span 2;max-height:none}.affiliate-baby .affiliate-page .affiliate-card,.affiliate-checklist .affiliate-page .affiliate-card,.affiliate-gifts .affiliate-page .affiliate-card{gap:5px}.ad-month-range{display:flex;gap:12px}.ad-month-range[hidden]{display:none}.ad-month-range label{flex:1}.ad-month-range input{max-width:130px}
@media(prefers-reduced-motion:reduce){.affiliate-banner .affiliate-track{transition:none}}
/* Beginner tour */
.public-intro nav>button{border:0;background:none;padding:0;font:inherit;font-size:11px;color:#897258;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.tutorial-sheet{max-width:470px;width:100%;padding:24px!important;border-radius:24px!important;background:#fffdf8!important}.tutorial-top{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#9a876e;font-size:11px}.tutorial-top button{border:0;background:none;color:#96846c;text-decoration:underline;font-size:12px;padding:8px;cursor:pointer}.tutorial-illustration{min-height:175px;margin:15px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px;background:linear-gradient(135deg,#f3eadc,#eef1e5);border:1px solid #e6dece;border-radius:20px;color:#665239}.tutorial-illustration>strong{font-size:18px}.tutorial-illustration>span{font-size:12px;color:#948168}.tutorial-brand{font-size:48px}.tutorial-example{display:flex;flex-direction:column;align-items:center;gap:9px;background:#fffdf8;border:1px solid #e5d6c2;padding:16px 22px;border-radius:14px;max-width:100%;text-align:center;font-size:13px}.tutorial-example small{font-size:10px;color:#a08a6c}.tutorial-example span{font-size:12px;color:#948168}.tutorial-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.tutorial-chips span{border:1px solid #e1d4c0;border-radius:18px;padding:6px 10px;background:#fffdf8;font-size:11px}.tutorial-plus{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#756045;color:white;font-size:26px}.tutorial-devices{font-size:36px}.tutorial-progress{font-size:11px;letter-spacing:2px;color:#a18d72;margin:10px 0}.tutorial-sheet h2{font-size:20px;line-height:1.5;margin:6px 0;color:#58432e}.tutorial-sheet h2:focus{outline:0}.tutorial-description{font-size:14px;line-height:1.9;color:#897259;min-height:90px;word-break:keep-all}.tutorial-actions{display:flex;gap:10px;margin-top:18px}.tutorial-actions button{flex:1}.tutorial-actions button:disabled{opacity:.35}.tutorial-note{font-size:10px;color:#aa9984;text-align:center;margin:13px 0 0}@media(max-height:680px){.tutorial-illustration{min-height:110px;margin:8px 0;padding:12px}.tutorial-sheet{padding:18px!important}.tutorial-description{min-height:0}}

/* Compact affiliate banners; shopping product cards and details use separate styles. */
.affiliate-banner,.view-widget>.affiliate-banner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;padding:8px 10px;overflow:visible}
.affiliate-banner .affiliate-head{grid-column:1;grid-row:1;display:flex;min-width:0;margin:0;font-size:11px;line-height:1.4}
.affiliate-head strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.affiliate-banner .affiliate-badge{flex:none;font-size:10px;color:#75624d;border-color:#d4c8b8}
.affiliate-banner .affiliate-viewport{grid-column:1/-1;grid-row:2}
.affiliate-banner .affiliate-controls{grid-column:2;grid-row:1;margin:0;gap:3px}
.affiliate-banner .affiliate-controls button{height:26px;min-width:28px}.affiliate-banner .affiliate-counter{font-size:10px;min-width:30px;color:#75624d}
.affiliate-banner .affiliate-page .affiliate-card{display:flex;flex-direction:row;align-items:center;gap:10px;min-width:0;min-height:64px;padding:0;border:0}
.affiliate-banner .affiliate-page .affiliate-card img{width:64px;height:64px;flex:0 0 64px;aspect-ratio:1;max-height:64px;object-fit:contain;background:#fff;border-radius:8px}
.affiliate-banner .affiliate-product-details{min-width:0;flex:1}
.affiliate-banner .affiliate-product-details>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:36px;font-size:12px;line-height:18px;word-break:break-word;margin:0;color:#514335}
.affiliate-product-meta{display:flex;align-items:baseline;gap:6px;min-width:0;margin-top:4px;white-space:nowrap}
.affiliate-banner .affiliate-product-meta em{flex:none;margin:0;font-size:11px;line-height:16px;font-style:normal;color:#78634c}
.affiliate-banner .affiliate-product-meta b{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;margin:0;font-size:12px;line-height:16px;color:#59432e}
.affiliate-banner>small,.view-widget>.affiliate-home>small{grid-column:1/-1;grid-row:3;display:block;overflow:visible;margin:0;color:#776958;font-size:11px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.view-widget>.affiliate-home{grid-row:span 3;max-height:none;margin:2px 0;align-self:start}