/* =========================================================================
   디지털해결사 — 앱 셸 레이아웃 (헤더 / 메인 / 하단탭)
   추후 코너가 늘어나도 이 셸 안에 페이지만 갈아끼우면 되도록 구성.
   ========================================================================= */

/* 앱 전체 세로 플렉스: 헤더 고정 + 메인 스크롤 */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* --- 헤더 (라임 브랜딩) --- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  background: linear-gradient(135deg, var(--color-main), var(--color-main-dark));
  color: var(--color-on-main);
  box-shadow: var(--shadow);
  padding: 0 var(--space-4);
  /* iOS 상단 안전영역 */
  padding-top: env(safe-area-inset-top);
  height: calc(var(--header-h) + env(safe-area-inset-top));
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* 좁은 폰에서 제목이 2줄로 넘어가지 않게 30% 축소(29px → ≈20px). */
  font-size: calc(var(--fs-title) * 0.7);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
}

.app-header__logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 헤더 우측: 유튜브 채널로 이동 배지 */
.app-header__yt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--color-on-main);
  font-size: var(--fs-small);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.12s ease, background 0.2s ease;
}
.app-header__yt:active {
  transform: scale(0.96);
  background: rgba(255, 255, 255, 0.5);
}
.app-header__yt img { display: block; height: 16px; width: auto; }

/* --- 메인 컨텐츠 영역 --- */
.app-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-7);
}

/* 섹션/카드 — 추후 코너들이 재사용 */
.section {
  margin-bottom: var(--space-6);
}

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
}

.card--soft {
  background: var(--color-bg-soft);
  border-color: transparent;
  box-shadow: none;
}

/* 히어로 환영 영역 */
.hero {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}

.hero__lead {
  font-size: var(--fs-lead);
  color: var(--color-text-soft);
}

/* 홈: 내 정보 카드 — 이름 + 내 소식 한 줄 + ⚙️. (1.56 개편: 인사말·버튼 없이 담백하게) */
.home-hero {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
}
.home-hero__name {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 800;
  line-height: 1.35;
}
/* 시그니처: 이름에 라임 형광펜 밑줄 — "중요한 것에 밑줄 긋기", 브랜드색을 익숙한 물건으로 */
.home-hero__name b {
  background: linear-gradient(transparent 62%, rgba(191, 222, 108, 0.6) 62%);
  padding: 0 2px;
}
.home-hero__rows { margin-top: var(--space-2); }

.home-profile__badge {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 800;
  color: var(--color-on-main);
  background: var(--color-main);
  border-radius: 999px;
  padding: 1px var(--space-3);
  margin-left: var(--space-1);
}
.home-profile__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
/* ⚙️ 내 정보 — 글자 있는 알약 버튼(출석 도장이 이 안에 있어 입구를 또렷하게). 48px 터치 확보. */
.home-profile__gear {
  flex: 0 0 auto;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
  padding: 0 var(--space-4);
}
.home-profile__gear:active { transform: translateY(1px); }
.home-profile__row { display: block; margin-top: var(--space-2); font-weight: 700; color: var(--color-text); }
.home-profile__row--new { color: var(--color-accent2); font-weight: 800; }
/* 내 정보 팝업 — 구역(출석 도장/이름/멤버십)을 구분선으로 나누고, 닫기는 큰 버튼으로 */
.set-divider { border: none; border-top: 1px solid var(--color-border); margin: var(--space-5) 0 0; }
.set-membership { margin: var(--space-2) 0 0; font-weight: 700; }
/* 출석 도장(팝업 안) — 기록은 기기(js/data/attend.js). 1.56 홈 개편으로 여기로 이사 */
.set-attend__done { margin: 0; font-weight: 800; }
.set-attend__done b { /* 연속 일수에 라임 형광펜 — 이름과 같은 시그니처 */
  background: linear-gradient(transparent 62%, rgba(191, 222, 108, 0.6) 62%);
  padding: 0 2px;
}
.set-attend__note {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-small);
  color: var(--color-text-soft);
}
/* 출석 도장 — 홈 밖으로 노출(1.61). 버튼/찍은 상태를 담는 카드. */
.attend-home {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
}

/* 출석 달력(⚙️ 내 정보 팝업 안) — 도장 찍은 날에 ✅ */
.cal__summary { margin: 0 0 var(--space-3); font-weight: 700; }
.cal__summary b { color: var(--color-main-dark); }
.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.cal__title { font-size: var(--fs-lead); font-weight: 800; }
.cal__nav {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-lead);
  color: var(--color-text);
}
.cal__nav:disabled { opacity: 0.3; cursor: default; }
.cal__nav:active:not(:disabled) { transform: translateY(1px); }
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
}
.cal__dow {
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-text-soft);
  padding-bottom: var(--space-1);
}
.cal__dow--sun { color: var(--color-accent2); }        /* 일요일 빨강(익숙한 달력) */
.cal__dow--sat { color: #2b6cb0; }                     /* 토요일 파랑 */
.cal__cell {
  display: grid;
  place-items: center;
  min-height: 42px;
}
.cal__day {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: var(--fs-body);
  font-weight: 700;
}
.cal__day.is-stamped { background: rgba(191, 222, 108, 0.35); } /* 도장 자국(라임 번짐) 위에 ✅ */
.cal__cell.is-today .cal__day { box-shadow: 0 0 0 2px var(--color-accent1); } /* 오늘 = 노랑 테두리 */
.set-close { margin-top: var(--space-5); }
.home-name-msg { margin: var(--space-2) 0 0; color: var(--color-accent2); font-weight: 700; }
.home-name-msg.is-ok { color: var(--color-main-dark); }

/* 홈: 도움 주신 이웃 — 두 갈래(고맙습니다 / 답변 수) */
.home-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-4) var(--space-5);
}
.helper-group + .helper-group { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.helper-group__title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-2); font-weight: 800; }

/* ※ 작은 글씨 부가 설명(.sect-sub 등)은 1.58에서 전면 삭제 —
   의미는 제목·버튼(큰 글씨)이 담고, 맥락은 내용 자체로 안다. */

/* 화면 가운데 뜨는 안내/설정 팝업 */
.info-pop {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;                /* 오버레이 자체는 안 움직임 */
  overscroll-behavior: contain;    /* 스크롤이 뒤 배경(홈)으로 새지 않게 */
}
.info-pop__card {
  width: 100%; max-width: 360px;
  max-height: 100%;                /* 내용이 화면보다 길면 카드 안에서 스크롤 */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
}
.info-pop__title { margin: 0 0 var(--space-3); font-size: var(--fs-lead); font-weight: 800; }
.info-pop__text { margin: 0 0 var(--space-5); line-height: var(--lh-base); }

/* '준비 중' 오버레이 — 홈·질문방을 살짝 덮어 클릭 차단(뒤 화면은 예고처럼 비침).
   z-index 9 = 하단 탭바(10)보다 아래 → 탭으로 다른 화면 이동은 계속 된다. */
.coming-soon {
  position: fixed; inset: 0; z-index: 9;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  /* 뒤 화면은 '형상만' — 글자를 알아볼 수 없게 강한 블러(내용 오해 방지) */
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.coming-soon__badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: rgba(31, 31, 31, 0.82);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  font-size: var(--fs-lead); font-weight: 800;
  box-shadow: var(--shadow);
}
.coming-soon__icon { font-size: 1.3em; line-height: 1; }

/* AI 명령모음 '📖 사용법' 안내창 — 숫자 동그라미 + 큰 글씨 한 단계씩 */
.howto {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.howto__step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.howto__num {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: var(--fs-lead);
  color: var(--color-on-main);
  background: var(--color-main);
  border-radius: 50%;
}
.howto__text {
  font-size: var(--fs-lead);
  line-height: 1.5;
  padding-top: 3px;
}

/* 홈: 도움 많이 준 이웃 순위 */
.helper-list { /* home-card 안에 들어가므로 자체 박스 스타일 없음 */
  list-style: none;
  margin: 0;
  padding: 0;
}
.helper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
}
.helper:first-child { border-top: none; }
.helper__rank {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: var(--fs-small);
  color: var(--color-on-main);
  background: var(--color-main);
  border-radius: 50%;
}
.helper__name { flex: 1 1 auto; font-weight: 700; min-width: 0; }
.helper__stat { flex: 0 0 auto; color: var(--color-text-soft); font-weight: 700; }

/* 홈: 이번 주 영상 — 썸네일+링크(임베드 없이 가볍게). 내용은 js/data/weekly.js */
.weekly-card {
  display: block;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  color: var(--color-text);
  text-decoration: none;
}
.weekly-card:active { transform: translateY(1px); }
.weekly-card__thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--color-bg-soft); }
.weekly-card__body { padding: var(--space-4) var(--space-5); }
.weekly-card__title { margin: 0; font-size: var(--fs-lead); font-weight: 800; line-height: 1.4; }
.weekly-card__go { margin: var(--space-2) 0 0; font-size: var(--fs-small); font-weight: 800; color: var(--color-main-dark); }
.weekly-ask { margin-top: var(--space-3); }

/* 설치 안내 배너 (별도 버튼, 강제 X) */
.install-banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  text-align: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow);
  padding: var(--space-6) var(--space-5);
  margin-bottom: var(--space-6);
}

.install-banner__icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: var(--space-1);
}

/* 제목·설명 줄 없음(1.58) — 버튼("홈 화면에 추가하기")이 곧 제목이자 설명 */

/* 핵심 행동 버튼 — 은은한 맥박으로 "여길 누르세요" (핵심 1곳만) */
.install-banner__btn {
  margin-top: var(--space-3);
  animation: ds-pulse-cta 2.6s ease-in-out infinite;
}

/* 무한 반복 애니는 화면에 딱 하나만(산만 방지) — 설치 버튼의 은은한 맥박 */
@keyframes ds-pulse-cta {
  0%, 100% { box-shadow: 0 4px 0 #d99a00; }
  50%      { box-shadow: 0 4px 0 #d99a00, 0 0 0 6px rgba(252, 180, 8, 0.18); }
}

/* --- 유튜브 채널 카드 --- */
.channel-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow);
  padding: var(--space-4) var(--space-5);
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.channel-card:active {
  transform: scale(0.99);
  box-shadow: var(--shadow-strong);
}
.channel-card__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.channel-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.channel-card__name {
  font-size: var(--fs-lead);
  font-weight: 800;
}
.channel-card__sub {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text-soft);
}
.channel-card__yt { display: block; height: 16px; width: auto; }
.channel-card__go {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text-soft);
  flex: 0 0 auto;
}

/* 크롬 가드 버튼의 크롬 로고 — 흰 동그라미 위에 또렷하게 */
.guard__chrome {
  display: block;
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50%;
  padding: 1px;
}

/* 향후 코너 진입 버튼이 들어갈 그리드(플레이스홀더) */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.menu-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 128px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--color-text-soft);
  text-align: center;
  padding: var(--space-4) var(--space-3);
}

/* 이모지를 동그란 칩에 담아 앱 아이콘처럼 — 세련된 디테일 */
.menu-grid__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  font-size: 28px;
  line-height: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    0 2px 6px rgba(16, 24, 40, 0.06);
}
.menu-grid__label {
  font-size: var(--fs-body);
  line-height: 1.3;
}

/* --- 하단 탭 바 (항상 보이도록 화면 아래 고정) --- */
.app-tabbar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.5) blur(8px);
  -webkit-backdrop-filter: saturate(1.5) blur(8px);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 20px rgba(16, 24, 40, 0.05);
  padding-bottom: env(safe-area-inset-bottom);
}

.app-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  margin: 6px 4px;
  border-radius: 14px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: color 0.2s ease, background 0.25s ease;
}

/* 탭 아이콘(이모지) — 활성 탭에서 통통 튀어오르게 */
.app-tabbar__icon {
  font-size: 22px;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.app-tabbar__item[aria-current="page"] {
  color: var(--color-on-main);
  background: var(--color-main);
}

.app-tabbar__item[aria-current="page"] .app-tabbar__icon {
  transform: translateY(-2px) scale(1.18);
}

.app-tabbar__item:active .app-tabbar__icon {
  transform: scale(0.9);
}

/* --- 배포 버전 표시 (사장님 확인용, 작고 옅게) --- */
.app-version {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-soft);
  opacity: 0.65;
  margin: 0;
  padding: var(--space-2);
  letter-spacing: 0.02em;
}

/* 로딩 표시 — 누른 즉시 "작동 중"을 보여줌(빈 화면 대신) */
.route-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-4);
  color: var(--color-text-soft);
  font-weight: 700;
}
.spinner {
  width: 36px;
  height: 36px;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-main-dark);
  border-radius: 50%;
  animation: ds-spin 0.8s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* 큰 화면에서도 본문 폭 유지 */
@media (min-width: 760px) {
  .menu-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 활성화된(준비된) 메뉴 항목 — 링크지만 밑줄 없이, 브랜드색 강조 */
.menu-grid__item--ready {
  text-decoration: none;
  color: var(--color-on-main);
  background: linear-gradient(165deg, #d2ea88, var(--color-main));
  border-color: rgba(164, 201, 74, 0.55);
  font-weight: 800;
}

/* =========================================================================
   AI 프롬프트 코너 (4단계)
   ========================================================================= */
.cat-title {
  display: inline-block;
  margin: var(--space-5) 0 var(--space-3);
  padding-bottom: var(--space-1);
  border-bottom: 3px solid var(--color-main);
}

/* AI 명령모음 제목 줄 — 제목(왼쪽) + 작은 '사용법' 버튼(오른쪽) */
.pr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.pr-head h2 { margin: 0; }
.pr-howto-btn {
  flex: 0 0 auto;
  min-height: auto;
  font-size: var(--fs-small);
  font-weight: 800;
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
}

/* AI 명령모음 첫 안내 — '복사 → 붙여넣기' 흐름 한 줄(첫 방문자 길잡이) */
.pr-flow {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-soft);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  font-weight: 700;
  text-align: center;
}

.pcards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pcard {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
}

.pcard__title {
  font-size: var(--fs-lead);
  font-weight: 800;
  margin: 0 0 var(--space-1);
  word-break: keep-all; /* 한글 제목이 어절 중간에서 끊기지 않게(답변 정확도 / 올리기) */
}

/* 복사할 프롬프트 본문(미리보기) — 읽기 쉽게, 줄바꿈 유지 */
.pcard__text {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.55;
  background: var(--color-bg-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin: var(--space-3) 0 0;
}

/* 복사하기 = 카드의 주행동. 크고 눈에 띄게(꽉 찬 강조 버튼) — 첫 방문자가 뭘 누를지 바로 안다. */
.pcard__copy {
  font-size: var(--fs-btn);
  padding: var(--space-4);
  margin-top: var(--space-1);
}
/* 제목 + 미리보기를 한 줄에 — 미리보기는 제목 오른쪽 작은 보조 버튼 */
.pcard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.pcard__head .pcard__title { flex: 1 1 auto; margin: 0; }
/* 내용 미리보기 = 보조. 제목 오른쪽 작은 텍스트 버튼(복사와 위계를 벌린다). */
.pcard__peek {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--color-text-soft);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
}
.pcard__peek:active { opacity: 0.6; }

.pcard__copy.is-done {
  background: var(--color-main);
  color: var(--color-on-main);
  /* 라임으로 바뀔 때 입체 그림자도 라임으로 — 주황 띠가 남던 어색함 제거 */
  box-shadow: 0 4px 0 var(--color-main-dark), 0 6px 14px rgba(164, 201, 74, 0.28);
}

/* 멤버십 전용(잠금) 카드 */
.pcard--locked {
  background: var(--color-bg-soft);
  border-style: dashed;
  opacity: 0.85;
}
.pcard__lock {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 800;
  color: var(--color-accent1);
  background: #fff6e0;
  border-radius: 999px;
  padding: 2px var(--space-3);
  margin-bottom: var(--space-2);
}

/* =========================================================================
   멤버십 인증 안내창(모달) — 4단계
   .guard 오버레이와 같은 결, 코드 입력 폼이 있는 버전.
   ========================================================================= */
.mship {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(20, 30, 0, 0.6);
  backdrop-filter: blur(2px);
}

.mship__card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
  border-top: 8px solid var(--color-main);
  padding: var(--space-6) var(--space-5) var(--space-5);
  text-align: center;
}

.mship__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-soft);
  cursor: pointer;
}

.mship__icon {
  font-size: 52px;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.mship__title {
  font-size: var(--fs-title);
  font-weight: 800;
  margin: 0 0 var(--space-3);
}

.mship__desc {
  font-size: var(--fs-body);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

.mship__input {
  width: 100%;
  min-height: var(--btn-min-h);
  font-family: inherit;
  font-size: var(--fs-lead);
  text-align: center;
  color: var(--color-text);
  background: var(--color-bg-soft);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.mship__input:focus-visible {
  outline: 3px solid var(--color-accent1);
  outline-offset: 1px;
  border-color: var(--color-main-dark);
}

.mship__error {
  color: var(--color-accent2);
  font-weight: 700;
  margin: 0 0 var(--space-3);
}

.mship__submit {
  margin-bottom: var(--space-4);
}

/* 잠금 카드의 코드 입력 버튼 — 카드 본문과 살짝 띄움 */
.pcard__unlock {
  margin-top: var(--space-2);
}

/* =========================================================================
   브라우저 가드 오버레이 (2단계) — 크롬 유도 안전 안내
   ========================================================================= */
.guard {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(20, 30, 0, 0.6);
  backdrop-filter: blur(2px);
}

.guard__card {
  width: 100%;
  max-width: 420px;
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
  padding: var(--space-6) var(--space-5) var(--space-5);
  text-align: center;
  /* 상단에 라임 띠로 브랜드/신뢰감 */
  border-top: 8px solid var(--color-main);
}

.guard__shield {
  font-size: 56px;
  line-height: 1;
  margin-bottom: var(--space-3);
}
/* 크롬 로고(브라우저 가드 상단) — '크롬 맞춤'을 담백하게 알리는 시각 신호 */
.guard__logo {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-3);
}

.guard__title {
  font-size: var(--fs-title);
  font-weight: 800;
  margin: 0 0 var(--space-3);
  line-height: 1.35;
}

.guard__desc {
  font-size: var(--fs-body);
  color: var(--color-text);
  margin: 0 0 var(--space-5);
}

.guard__cta {
  /* 핵심 행동: 노랑 강조 버튼을 더 크고 눈에 띄게 */
  min-height: 60px;
  font-size: var(--fs-lead);
  box-shadow: 0 4px 0 #d99a00;
}

.guard__badges {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-text-soft);
}

/* =========================================================================
   움직임 & 촉감 (UI 폴리시)
   원칙: 부드럽고 차분하게. 화면을 어지럽히지 않는 선에서 "살아있는" 느낌만.
   (움직임 줄이기 설정 시 base.css 에서 전부 비활성화됨)
   ========================================================================= */

/* 스크롤 등장: 화면에 들어오면 살짝 떠오르며 나타난다(js/reveal.js가 .is-revealed 부여) */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-revealed {
  opacity: 1;
  transform: none;
}
/* 움직임 최소화 설정이면 처음부터 보이게(깜빡임/지연 없이) */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* 페이지가 그려질 때 콘텐츠가 한 칸씩 스르륵 떠오른다 */
@keyframes ds-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.app-main > .section {
  animation: ds-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.app-main > .section:nth-child(1) { animation-delay: 0.02s; }
.app-main > .section:nth-child(2) { animation-delay: 0.09s; }
.app-main > .section:nth-child(3) { animation-delay: 0.16s; }
.app-main > .section:nth-child(4) { animation-delay: 0.23s; }
.app-main > .section:nth-child(5) { animation-delay: 0.30s; }
.app-main > .section:nth-child(n + 6) { animation-delay: 0.36s; }

/* 카드·타일: 누르면 살짝 들어가는 촉감 + 부드러운 그림자 전환 */
.pcard,
.menu-grid__item {
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.pcard:active {
  transform: scale(0.99);
}

/* 진입 가능한 타일(AI 프롬프트) — 입체감 + 누르는 반응으로 "여길 눌러요" 유도 */
.menu-grid__item--ready {
  box-shadow: var(--shadow);
}
.menu-grid__item--ready:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-strong);
}

/* 손 흔드는 인사 👋 */
@keyframes ds-wave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10%, 30%      { transform: rotate(16deg); }
  20%, 40%      { transform: rotate(-8deg); }
}
.wave {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: ds-wave 2.4s ease-in-out 0.4s infinite;
}

/* 안내창(모달)이 살짝 떠오르며 팝업되는 효과 */
@keyframes ds-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ds-pop-in {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mship,
.guard {
  animation: ds-fade-in 0.2s ease both;
}
.mship__card,
.guard__card {
  animation: ds-pop-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* =========================================================================
   커뮤니티 (집단지성 곳간) — 목록 / 상세 / 글쓰기
   ========================================================================= */

/* 섹션 제목(라임 밑줄) */
.cm-secttl {
  display: inline-block;
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-1);
  border-bottom: 3px solid var(--color-main);
  font-weight: 800;
}

/* 종류 필터(칩) — 전체/물어봐요/조심하세요/알려드려요. 스크롤해도 헤더 밑에 붙어 따라온다 */
.cm-tabs {
  position: sticky;
  top: calc(var(--header-h) + env(safe-area-inset-top));
  z-index: 5;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  margin-bottom: var(--space-2);
  background: var(--color-app-bg);
  box-shadow: 0 8px 8px -8px rgba(16, 24, 40, 0.12);
}
.cm-filter {
  flex: 1;
  min-height: 48px;
  padding: var(--space-2) var(--space-1);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-text);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.05s ease;
}
.cm-filter:active { transform: translateY(2px); }
.cm-filter.is-on {
  background: var(--color-main);
  color: var(--color-on-main);
  border-color: var(--color-main-dark);
}

/* --- 글 목록 카드 --- */
.cm-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.cm-post {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.15s ease;
}
.cm-post:active { transform: translateY(2px); box-shadow: var(--shadow-strong); }
.cm-post__top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.cm-post__title {
  font-size: var(--fs-lead);
  font-weight: 800;
  margin: 0 0 var(--space-1);
}
.cm-post__preview {
  margin: 0 0 var(--space-2);
  color: var(--color-text-soft);
}
.cm-post__meta {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text-soft);
}

/* 주제 배지 */
.cm-badge {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 800;
  padding: 2px var(--space-3);
  border-radius: 999px;
  background: var(--color-bg-soft);
  color: var(--color-text);
}
.cm-badge--scam    { background: #fde8ea; color: var(--color-accent2); }    /* 🚨 안전(사기 의심 질문) */
.cm-badge--ask     { background: #eef5da; color: #5a7a00; }                 /* 🙋 물어봐요 — 라임 */
.cm-badge--caution { background: #fde8ea; color: var(--color-accent2); }    /* 🚨 조심하세요 — 빨강(경고에만) */
.cm-badge--share   { background: #fff1d6; color: var(--color-on-accent1); } /* 💡 알려드려요 — 노랑 */
/* 옛 홈 캐시(1.48 이전 저장분) 호환 — 다음 버전에서 제거 가능 */
.cm-badge--neighbor { background: #eef5da; color: #5a7a00; }
.cm-badge--solver   { background: #fff1d6; color: var(--color-on-accent1); }
.cm-badge--new { background: var(--color-accent2); color: #fff; } /* 안 본 새 답글 — 솔리드 빨강 */
.cm-post--new { border-left: 4px solid var(--color-accent2); }
.cm-badge--mine { background: var(--color-main); color: var(--color-on-main); } /* 내가 쓴 글 */
.cm-badge--solved { background: #eef5da; color: #5a7a00; } /* ✅ 해결됐어요(상세 질문 카드) */
.cm-post--mine { border-left: 4px solid var(--color-main); }
.cm-comment__text a { color: #1a5fb4; font-weight: 700; text-decoration: underline; word-break: break-all; } /* 운영자 공식답변 링크만 활성 */

/* 목록 카드 '답변 상태' — 조회수·답변수 숫자 대신. 색은 기존 라임 팔레트 안에서만. */
.cm-status { font-size: var(--fs-small); font-weight: 800; }
.cm-status--done { color: #2e8b57; }   /* 차분한 초록 — 답변이 달렸어요 */
.cm-status--solved {                    /* ✅ 해결됐어요 — 제일 좋은 소식이라 라임 칩으로 또렷하게 */
  display: inline-block;
  padding: 1px var(--space-3);
  border-radius: 999px;
  background: #eef5da;
  color: #5a7a00;
}
.cm-status--wait {                      /* 미답변 — 따뜻하게 눈에 띄는 연주황 칩(경고 빨강은 안 씀) */
  display: inline-block;
  padding: 1px var(--space-3);
  border-radius: 999px;
  background: #fff1d6;
  color: var(--color-on-accent1);
}
.cm-status--metoo { color: var(--color-text-soft); font-weight: 700; } /* 공감 — 조용히 작게 */

.cm-empty {
  color: var(--color-text-soft);
  text-align: center;
  padding: var(--space-5) 0;
}

/* --- 뒤로가기 버튼 --- */
.cm-back {
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.cm-back:active { transform: translateY(2px); }

/* 상세 상단 줄 — 뒤로(왼쪽) + 글자 크기 3단(오른쪽) */
.cm-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
/* 글자 크기 가/가/가 — 버튼 자체의 글자 크기가 곧 설명(작은 글씨 설명 없이 직관). */
.cm-fontbar { display: flex; gap: var(--space-2); }
.cm-fontbar__btn {
  min-width: 48px;
  min-height: 48px;
  padding: 0 var(--space-2);
  font-family: inherit;
  font-weight: 800;
  color: var(--color-text);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.cm-fontbar__btn--1 { font-size: 16px; }
.cm-fontbar__btn--2 { font-size: 21px; }
.cm-fontbar__btn--3 { font-size: 26px; }
.cm-fontbar__btn.is-on {
  border-color: var(--color-main-dark);
  background: #f6fbe8; /* 운영자 답변 배경과 같은 라임 톤 */
}
.cm-fontbar__btn:active { opacity: 0.7; }

/* 단계별 본문·답글 확대 — 1단(보통)은 기본값 그대로, 클래스 없음 */
.cm-read--2 .cm-q__body { font-size: 33px; }
.cm-read--2 .cm-comment__text,
.cm-read--2 .cm-notice { font-size: 24px; }
.cm-read--3 .cm-q__body { font-size: 38px; line-height: 1.5; }
.cm-read--3 .cm-comment__text,
.cm-read--3 .cm-notice { font-size: 28px; }

/* --- 글 상세 --- */
.cm-detail__title {
  font-size: var(--fs-title);
  font-weight: 800;
  margin: var(--space-2) 0 var(--space-1);
}
.cm-detail__meta {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-small);
  color: var(--color-text-soft);
}
.cm-detail__body {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  line-height: 1.65;
}

/* AI 답변 카드 — 본문과 확실히 구분(옅은 배경 + 라임 띠) */
.cm-ai {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-main-dark);
  border-left: 6px solid var(--color-main);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.cm-ai__head {
  font-weight: 800;
  margin: 0 0 var(--space-2);
}
.cm-ai__body {
  margin: 0 0 var(--space-3);
  line-height: 1.65;
}
.cm-ai__ask {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text-soft);
}
.cm-ai__vote { font-size: var(--fs-lead); letter-spacing: 4px; margin-left: var(--space-2); }

/* 댓글(이웃들의 경험) */
.cm-comments {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cm-comment {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
}
/* '덕분에 해결했어요'로 지정된 해결 답변 — 노랑 강조(트로피 느낌, 운영자 라임과 구분) */
.cm-comment--solution {
  border-color: var(--color-accent1);
  background: #fffaf0;
}
/* 운영자 공식 답변 — 라임 강조 */
.cm-comment--official {
  border-color: var(--color-main-dark);
  background: #f6fbe8;
}
.cm-official {
  display: inline-block;
  font-weight: 800;
  color: var(--color-on-main);
  background: var(--color-main);
  border-radius: 999px;
  padding: 1px var(--space-3);
}
.cm-comment__meta {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text-soft);
}
/* 해결 답변 맨 위 알림표 "🏆 이 답변 덕분에 해결됐어요!" — 노랑 칩 */
.cm-solution-tag {
  display: inline-block;
  font-weight: 800;
  color: var(--color-on-accent1);
  background: var(--color-accent1);
  border-radius: 999px;
  padding: 1px var(--space-3);
  margin: 0 0 var(--space-2);
}
/* '덕분에 해결했어요' 버튼 — 질문자 본인에게만 보임(해결 전). 누르기 쉽게 넓게. */
.cm-solve {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: var(--space-3);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 800;
  color: var(--color-on-accent1);
  background: #fff7e6;
  border: 2px solid var(--color-accent1);
  border-radius: 999px;
  cursor: pointer;
}
.cm-solve:active { transform: translateY(1px); }
/* 구역 제목줄: 제목 + 오른쪽 작은 이동 링크(해결 모음 등) — 세로 공간 절약 */
.cm-secthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}
.cm-secthead .cm-secttl { margin: 0; }
.cm-morelink {
  flex: 0 0 auto;
  min-height: 44px;
  padding: var(--space-1) var(--space-3);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 800;
  color: #5a7a00;
  background: #eef5da;
  border: 1.5px solid var(--color-main-dark);
  border-radius: 999px;
  cursor: pointer;
}
.cm-morelink:active { transform: translateY(1px); }
/* 해결 모음 머리줄 — "지금까지 N개 해결" */
.cm-solved-count { margin: 0 0 var(--space-3); font-weight: 800; }
.cm-solved-count b { color: #5a7a00; }
.cm-comment__text { margin: 0 0 var(--space-2); line-height: 1.6; }
.cm-comment__foot {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text-soft);
}

/* 댓글 입력 줄 */
.cm-reply {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
}
.cm-reply .cm-input { margin: 0; }
.cm-reply .btn { white-space: nowrap; }

/* 참여 버튼: 🙋 나도 궁금해요(질문) / 👍 고맙습니다(답변). 비추천 없음(절대원칙 5). */
.cm-metoo, .cm-thanks {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-family: inherit;
  font-weight: 800;
  color: var(--color-text);
  background: var(--color-bg-soft);
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
}
.cm-thanks { font-size: var(--fs-small); padding: var(--space-2) var(--space-4); }
.cm-metoo {
  font-size: var(--fs-body);
  padding: var(--space-3) var(--space-5);
  margin-top: var(--space-4);
}
.cm-metoo.is-on, .cm-thanks.is-on {
  background: var(--color-main);
  border-color: var(--color-main-dark);
  color: var(--color-on-main);
}
.cm-metoo:active, .cm-thanks:active { transform: translateY(1px); }

/* 신고 — 작고 옅게(실수로 안 누르게). 답변은 고맙습니다 옆, 질문은 아래. */
.cm-report {
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--fs-small);
  color: var(--color-text-soft);
  text-decoration: underline;
  cursor: pointer;
  padding: var(--space-2);
  margin-left: var(--space-2);
}

/* 카드 상단 줄: 왼쪽 작성자/배지, 오른쪽 신고(우측 상단 통일) */
.cm-rowhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.cm-rowhead .cm-comment__meta,
.cm-rowhead .cm-post__top { margin-bottom: 0; }
.cm-rowhead .cm-report { margin-left: 0; flex: 0 0 auto; }

/* 질문 카드 — 본문(질문)이 주인공: 크게·강조. 답변은 이 아래에 가볍게. */
.cm-q {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-main);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
}
.cm-q__body {
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.45;
  margin: var(--space-2) 0 var(--space-3);
}
.cm-q__meta {
  font-size: var(--fs-small);
  color: var(--color-text-soft);
  margin: 0 0 var(--space-3);
}
.cm-q__actions { display: flex; align-items: center; gap: var(--space-2); }

/* 답변 달기 — '답글' 느낌(질문보다 가볍게, 새 글 작성처럼 안 보이게) */
.cm-reply2 {
  background: var(--color-bg-soft);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.cm-reply2__title { font-weight: 800; margin: 0 0 var(--space-3); }
.cm-reply2 .cm-input { margin-bottom: var(--space-3); }

/* 안전 안내(건강/사기) — 명세 7장 */
.cm-notice {
  background: var(--color-bg-soft);
  border-left: 4px solid var(--color-main-dark);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-3);
  line-height: 1.55;
}
.cm-notice--warn {
  background: #fde8ea;
  border-left-color: var(--color-accent2);
}

/* --- 글쓰기 폼 --- */
.cm-label {
  margin: var(--space-5) 0 var(--space-2);
  font-weight: 800;
}
.cm-pickrow { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cm-pick {
  min-height: 52px;
  padding: var(--space-2) var(--space-5);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}
.cm-pick:active { transform: translateY(2px); }
.cm-pick.is-on {
  background: var(--color-main);
  color: var(--color-on-main);
  border-color: var(--color-main-dark);
}

/* 입력칸 공통(제목/내용/댓글) — 크고 또렷하게 */
.cm-input {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-3);
}
.cm-input:focus-visible {
  outline: none;
  border-color: var(--color-main-dark);
}
textarea.cm-input { resize: vertical; }

/* 글쓰기 — 두 갈래 선택(궁금해요 메인 크게 / 알려드려요) */
.cm-choose {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  text-align: left;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.15s ease;
}
.cm-choose:active { transform: translateY(2px); }
.cm-choose__big { font-size: var(--fs-lead); font-weight: 800; }
/* 궁금해요 = 메인: 더 크고 라임 강조 */
.cm-choose--main {
  background: linear-gradient(165deg, #d2ea88, var(--color-main));
  border-color: rgba(164, 201, 74, 0.55);
  padding: var(--space-5);
  box-shadow: var(--shadow);
}
.cm-choose--main .cm-choose__big { font-size: var(--fs-title); color: var(--color-on-main); }

/* =========================================================================
   멤버십 차별화 — "편의성만"(신분 표시 X)
   상단 올리기(이웃 방, 노랑 = 편의 강조) / 받은 고맙습니다(명예, 라임 = 더 돋보이게)
   ========================================================================= */

/* 상단 올리기(본인 이웃 질문 상세) — 버튼은 공통 .btn--brand(라임 입체)로 통일 */
.cm-bumparea { margin-top: var(--space-3); }
.cm-bump-note {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-text-soft);
  background: var(--color-bg-soft);
  border-radius: var(--radius-sm);
}

/* 목록 카드의 '🔼 올림' 뱃지(본인에게만 보임) */
.cm-badge--bump { background: #fff1d6; color: var(--color-on-accent1); }


/* =========================================================================
   공통 토스트 / 안내·확인 모달 (js/ui.js) — 브라우저 기본 alert/confirm 대체
   라임 테마로 통일해 '제대로 만든 앱' 느낌 유지.
   ========================================================================= */
.ui-toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom)); /* 하단 탭바 위에 */
  transform: translate(-50%, 16px);
  z-index: 1200;
  max-width: 88%;
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  color: #fff;
  background: #2b2b2b;
  box-shadow: var(--shadow-strong);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ui-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.ui-toast--ok   { background: var(--color-main-dark); color: var(--color-on-main); }
.ui-toast--warn { background: var(--color-accent2); color: #fff; }

.ui-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(20, 30, 0, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ui-modal.is-on { opacity: 1; }
.ui-modal__card {
  width: 100%;
  max-width: 360px;
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
  border-top: 8px solid var(--color-main);
  padding: var(--space-6) var(--space-5) var(--space-5);
  text-align: center;
  transform: translateY(16px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.ui-modal.is-on .ui-modal__card { transform: none; }
.ui-modal__icon { font-size: 46px; line-height: 1; margin-bottom: var(--space-2); }
.ui-modal__title { font-size: var(--fs-lead); font-weight: 800; margin: 0 0 var(--space-2); }
.ui-modal__text { margin: 0 0 var(--space-5); color: var(--color-text); line-height: var(--lh-base); }
.ui-modal__actions { display: flex; gap: var(--space-3); }
.ui-modal__btn { flex: 1; }
@media (prefers-reduced-motion: reduce) {
  .ui-toast, .ui-modal, .ui-modal__card { transition: none; }
}