/* 채리의 성장일기 — 디자인 시스템
   ★ 모든 색상/간격/타이포 토큰은 이 파일 :root 한 곳에서만 정의한다.
     컴포넌트/JS에서 색상 하드코딩 금지.
   담당: design-lead 가 토큰 + 기본 컴포넌트 스타일을 채운다. */

/* ============================================================
   토큰 정의: 컬러/타이포/간격/반경/그림자 전부 여기서만.
   컴포넌트 규칙은 반드시 var(--*) 사용 (하드코딩 금지)
   ============================================================ */
:root {
  /* --- 컬러: 밀키 핑크 + 라벤더 파스텔 --- */
  --bg: #FFF8FA;              /* 전체 배경, 아주 옅은 핑크 화이트 */
  --surface: #FFFFFF;         /* 카드/시트 표면 */
  --surface-alt: #FDF1F5;     /* 보조 표면(선택된 셀, 헤더 배경 등) */
  --primary: #F3A8C4;         /* 메인 밀키 핑크 (배경/보더/장식용 — 텍스트에 직접 사용 금지) */
  --primary-soft: #FBDDE8;    /* 연한 핑크(배지/토글 배경) */
  --primary-strong: #C94080;  /* 텍스트/버튼 배경용 진한 핑크 — 흰 배경 대비 4.64:1 (WCAG AA 통과) */
  --accent: #C9B6E4;          /* 라벤더 포인트 (배경/보더/장식용) */
  --accent-soft: #EAE1F7;     /* 연한 라벤더 배경 */
  --accent-strong: #8560B8;   /* 텍스트/버튼 배경용 진한 라벤더 — 흰 배경 대비 4.81:1 */
  --peach: #F7CBA4;           /* 피치 포인트(배지 등 보조) */
  --text: #4A3B45;            /* 본문(딥 모브 브라운, 순검정 금지) */
  --text-sub: #756570;        /* 보조 텍스트 — 흰 배경 대비 5.45:1 */
  --text-muted: #7E6E7E;      /* 흐린 라벨(선택 입력 등) — 흰 배경 대비 4.75:1 */
  --line: #F0DEE6;            /* 얇은 보더 */
  --line-strong: #E3C8D4;     /* 조금 더 진한 보더(포커스 전 단계) */
  --success: #4E9660;
  --warn: #A47A2E;
  --danger: #C13A5C;
  --white: #FFFFFF;

  /* 시술 종류 팔레트 8종 (시간 그리드 블록, 서로 구분되지만 전부 파스텔) */
  --sv-1: #F6B8CE; /* 핑크 */
  --sv-2: #C9B6E4; /* 라벤더 */
  --sv-3: #A9C9E8; /* 스카이블루 */
  --sv-4: #A8DCC6; /* 민트 */
  --sv-5: #F7CBA4; /* 피치 */
  --sv-6: #F3D28A; /* 옐로우 */
  --sv-7: #D8B7A6; /* 코코아 */
  --sv-8: #C7C4E0; /* 그레이라벤더 */

  /* --- 타이포 --- */
  --font: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;

  /* --- 반경/그림자 --- */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-full: 999px;
  --sh-1: 0 2px 8px rgba(216, 150, 176, 0.12);
  --sh-2: 0 6px 20px rgba(216, 150, 176, 0.16);

  /* --- 간격 (8pt 그리드) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* --- 레이아웃 상수 --- */
  --tabbar-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --touch-min: 44px;
}

/* ============================================================
   리셋 & 베이스
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  word-break: keep-all;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100dvh;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   레이아웃
   ============================================================ */
.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  position: relative;
  background: var(--bg);
}

.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.screen-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--line);
}

.screen-header__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text);
}

.screen-header__title::before {
  content: "🌸 ";
}

.screen-body {
  flex: 1;
  padding: var(--sp-4);
  padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-5));
}

.section {
  margin-bottom: var(--sp-5);
}

.section + .section {
  margin-top: var(--sp-5);
}

/* ============================================================
   하단 탭바 (5탭: 일지 / 캘린더 / 고객 / 갤러리 / 통계)
   ============================================================ */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex;
  z-index: 20;
  box-shadow: 0 -4px 16px rgba(216, 150, 176, 0.10);
}

.tabbar__item {
  flex: 1;
  min-height: var(--touch-min);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  padding: var(--sp-1);
}

.tabbar__item-icon {
  font-size: 20px;
  line-height: 1;
}

.tabbar__item--active {
  color: var(--primary-strong);
  font-weight: 700;
}

/* ============================================================
   카드 / 섹션
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  padding: var(--sp-4);
}

.card + .card {
  margin-top: var(--sp-3);
}

.card__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ============================================================
   폼 요소
   ============================================================ */
.field {
  margin-bottom: var(--sp-4);
}

.field__label {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--text-sub);
  margin-bottom: var(--sp-2);
  font-weight: 600;
}

.field__label--required::after {
  /* 배지: 옅은 채움 대신 흰 배경+보더로 대비 확보(WCAG AA, 4.64:1) */
  content: "필수";
  font-size: 10px;
  font-weight: 700;
  color: var(--primary-strong);
  background: var(--surface);
  border: 1px solid var(--primary-strong);
  border-radius: var(--r-full);
  padding: 1px 6px;
  margin-left: 2px;
}

.field__label--optional {
  color: var(--text-muted);
  font-weight: 500;
}

.field__label--optional::after {
  content: "선택";
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  padding: 1px 6px;
  margin-left: 2px;
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

.field__error {
  font-size: var(--fs-xs);
  color: var(--danger);
  margin-top: var(--sp-1);
  display: flex;
  align-items: center;
  gap: 4px;
}

.field__error::before {
  content: "⚠";
}

.input,
.textarea,
.select {
  width: 100%;
  min-height: var(--touch-min);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-3);
  font-size: var(--fs-base); /* 16px 미만이면 iOS 자동확대되므로 고정 */
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-muted);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(243, 168, 196, 0.25);
}

.input[disabled],
.textarea[disabled],
.select[disabled] {
  background: var(--surface-alt);
  color: var(--text-muted);
  border-color: var(--line);
}

.input--error,
.textarea--error {
  border-color: var(--danger);
}

.textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.5;
}

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-sub) 50%),
    linear-gradient(135deg, var(--text-sub) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--sp-6);
}

/* 스핀박스: [ - ] 값 [ + ] */
.spinbox {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  overflow: hidden;
}

.spinbox__btn {
  width: var(--touch-min);
  height: var(--touch-min);
  border: none;
  background: var(--surface); /* 흰 배경으로 대비 4.64:1 확보 */
  color: var(--primary-strong);
  font-size: var(--fs-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinbox__btn:active {
  background: var(--primary-soft);
}

.spinbox__value {
  min-width: 48px;
  text-align: center;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text);
}

/* 칩 토글 (보수여부·멤버십 등) */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min); /* 44px 터치 타깃 기준 */
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--text-sub);
  font-size: var(--fs-sm);
  font-weight: 600;
  gap: 4px;
}

.chip--on {
  /* 선택 상태는 흰 텍스트+진한 배경으로 대비 확보(WCAG AA, 4.64:1) */
  background: var(--primary-strong);
  border-color: var(--primary-strong);
  color: var(--white);
}

/* 스위치 */
.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  min-width: 46px;
}

.switch input {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.switch__track {
  position: absolute;
  inset: 0;
  background: var(--line-strong);
  border-radius: var(--r-full);
  transition: background 0.15s ease;
}

.switch__thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: var(--sh-1);
  transition: transform 0.15s ease;
}

.switch input:checked ~ .switch__track {
  background: var(--primary);
}

.switch input:checked ~ .switch__thumb {
  transform: translateX(20px);
}

/* ============================================================
   버튼
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  padding: 0 var(--sp-5);
  border-radius: var(--r-full);
  border: 1.5px solid transparent;
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease, transform 0.05s ease;
}

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

.btn--primary {
  /* 흰 텍스트 대비 확보를 위해 --primary(장식용 파스텔) 대신 --primary-strong 사용(4.64:1) */
  background: var(--primary-strong);
  color: var(--white);
  box-shadow: var(--sh-1);
}

.btn--primary:active {
  filter: brightness(0.92);
}

.btn--ghost {
  background: var(--surface);
  color: var(--primary-strong);
  border-color: var(--primary-soft);
}

.btn--ghost:active {
  background: var(--primary-soft);
}

.btn--sm {
  min-height: 40px; /* 보조 액션 전용 축소형. WCAG 24px 바닥선은 충족, 주요 액션엔 사용 금지 */
  padding: 0 var(--sp-4);
  font-size: var(--fs-sm);
}

.btn--full {
  display: flex;
  width: 100%;
}

/* AI 평가/분석 버튼: 은은한 그라데이션 (양끝 모두 흰 텍스트 대비 4.6:1+ 확보) */
.btn--ai {
  background: linear-gradient(120deg, var(--primary-strong) 0%, var(--accent-strong) 100%);
  color: var(--white);
  box-shadow: var(--sh-2);
}

.btn--ai::before {
  content: "✨ ";
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.spinner--dark {
  border: 2px solid var(--primary-soft);
  border-top-color: var(--primary-strong);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   시간 그리드 (04시 → 익일 03시, 10분 눈금 6칸)
   ============================================================ */
.timegrid {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  touch-action: pan-y; /* 세로 스크롤은 허용, 드래그 제스처는 JS가 preventDefault */
}

.timegrid__hour {
  display: flex;
  align-items: stretch;
  min-height: 40px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.timegrid__hour:last-child {
  border-bottom: none;
}

.timegrid__hour-label {
  width: 44px;
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: var(--surface-alt);
  border-right: 1px solid var(--line);
}

.timegrid__cells {
  flex: 1;
  display: flex;
  position: relative;
}

.timegrid__cell {
  flex: 1;
  min-width: 0;
  border-right: 1px dashed var(--line);
  touch-action: none; /* 셀 위 드래그 시작 시 페이지 스크롤 방지 */
}

.timegrid__cell:last-child {
  border-right: none;
}

.timegrid__block {
  position: absolute;
  left: 2px;
  right: 2px;
  border-radius: 8px;
  background: var(--sv-block, var(--primary-soft));
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  font-size: var(--fs-xs);
  color: var(--text);
  overflow: hidden;
  box-shadow: var(--sh-1);
  touch-action: none;
}

.timegrid__block--dragging {
  opacity: 0.85;
  box-shadow: var(--sh-2);
  z-index: 5;
}

/* ============================================================
   캘린더
   ============================================================ */
.cal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--sh-1);
}

.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.cal__nav {
  width: var(--touch-min);
  height: var(--touch-min);
  border: none;
  background: none;
  color: var(--primary-strong);
  font-size: var(--fs-lg);
}

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal__weekday {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: 4px 0 var(--sp-2);
}

.cal__day {
  aspect-ratio: 1 / 1;
  min-height: var(--touch-min); /* 날짜 탭 = 실제 선택 액션이므로 44px 확보 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text);
  background: transparent;
  border: none;
}

.cal__day--today {
  border: 1.5px solid var(--primary);
  font-weight: 700;
}

.cal__day--has {
  background: var(--surface-alt);
}

.cal__day--selected {
  /* 흰 텍스트 대비 확보(4.64:1) — 장식용 --primary 대신 --primary-strong */
  background: var(--primary-strong);
  color: var(--white);
  font-weight: 700;
}

.cal__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary-strong);
}

/* ============================================================
   진행 게이지 (0 - 50 - 100)
   ============================================================ */
.progress {
  position: relative;
  padding-top: var(--sp-2);
}

.progress__control {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--touch-min);
}

.progress__track {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: var(--r-full);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--primary-soft), var(--primary));
  transition: width 0.25s ease;
}

/* 네이티브 range는 트랙을 투명화하고 썸(핸들)만 커스텀해 progress__track 위에 오버레이 — 이중 바 방지 */
.progress__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.progress__range:focus {
  outline: none;
}
.progress__range::-webkit-slider-runnable-track {
  background: transparent;
  height: 100%;
}
.progress__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  margin-top: -5px;
  cursor: pointer;
}
.progress__range::-moz-range-track {
  background: transparent;
  height: 100%;
  border: none;
}
.progress__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  cursor: pointer;
}

.progress__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ============================================================
   D-day (아웃라인 숫자 느낌)
   ============================================================ */
.dday {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--surface);
  /* 큰 텍스트(28px) 기준 3:1 이상 필요 — primary-strong으로 대비 4.4:1 확보 */
  -webkit-text-stroke: 1.5px var(--primary-strong);
  letter-spacing: 0.5px;
}

.dday__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--primary-strong);
  -webkit-text-stroke: 0;
}

/* ============================================================
   고객 / 갤러리
   ============================================================ */
.search-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  padding: 0 var(--sp-3);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-full);
}

.search-bar input {
  flex: 1;
  border: none;
  background: none;
  font-size: var(--fs-base);
  min-height: var(--touch-min);
  color: var(--text);
}

.search-bar input:focus {
  outline: none;
}

.list-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-3);
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}

.list-item + .list-item {
  margin-top: var(--sp-2);
}

.list-item__body {
  flex: 1;
  min-width: 0;
}

.list-item__title {
  font-weight: 700;
  color: var(--text);
  font-size: var(--fs-md);
}

.list-item__sub {
  font-size: var(--fs-xs);
  color: var(--text-sub);
  margin-top: 2px;
}

.avatar {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--white);
  /* 흰 이니셜 텍스트 대비 확보(4.6:1+) — 장식용 --primary/--accent 대신 strong 톤 */
  background: linear-gradient(135deg, var(--primary-strong), var(--accent-strong));
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}

.gallery__item {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--line);
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   통계
   ============================================================ */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--sh-1);
}

.stat-card__value {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--primary-strong);
}

.stat-card__label {
  font-size: var(--fs-xs);
  color: var(--text-sub);
  margin-top: 2px;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  height: 140px;
  padding-top: var(--sp-3);
}

.bar {
  flex: 1;
  min-width: 0;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--accent), var(--primary));
  position: relative;
}

.bar__label {
  position: absolute;
  bottom: -20px;
  left: 0; right: 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-sub);
}

.legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sv-1);
}

/* ============================================================
   상태 표시 (빈 상태 / 토스트 / 바텀시트)
   ============================================================ */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--text-sub);
}

.empty__icon {
  font-size: 40px;
}

.empty__title {
  font-weight: 700;
  color: var(--text);
}

.empty__desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-4));
  transform: translateX(-50%);
  background: var(--text);
  color: var(--white);
  font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-full);
  box-shadow: var(--sh-2);
  z-index: 100;
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(74, 59, 69, 0.35);
  z-index: 50;
}

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--sh-2);
  padding: var(--sp-5) var(--sp-4) calc(var(--sp-5) + var(--safe-bottom));
  z-index: 51;
  max-height: 85dvh;
  overflow-y: auto;
}

.sheet__handle {
  width: 40px;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--line-strong);
  margin: 0 auto var(--sp-4);
}

/* ============================================================
   유틸리티
   ============================================================ */
.row { display: flex; flex-direction: row; align-items: center; }
.col { display: flex; flex-direction: column; }

.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.gap-6 { gap: var(--sp-6); }

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

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  background: var(--surface-alt);
  color: var(--text-sub);
}

.badge--repair {
  background: var(--accent-soft);
  color: #6B4E9B; /* accent-soft 배경 대비 5.21:1 */
}

.badge--membership {
  background: var(--primary-soft);
  color: var(--primary-strong);
}

/* ============================================================
   2단계 추가: 채팅 / 매뉴얼 / 도움말 / 옵션 애니메이션
   기존 토큰만 사용, 새 색상 하드코딩 금지
   ============================================================ */

/* 세그먼트 토글(매뉴얼 채리/참고 전환) */
.segment {
  display: flex;
  background: var(--surface-alt);
  border-radius: var(--r-full);
  padding: 3px;
  gap: 3px;
}

.segment__item {
  flex: 1;
  min-height: 40px;
  border: none;
  background: none;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-sub);
  padding: 0 var(--sp-2);
}

.segment__item--on {
  background: var(--surface);
  color: var(--primary-strong);
  box-shadow: var(--sh-1);
}

/* 채팅 */
.chat-body {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 56px - var(--tabbar-h) - var(--safe-bottom));
}

.chat-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  overflow-y: auto;
}

.chat-row {
  display: flex;
}

.chat-row--mine {
  justify-content: flex-end;
}

.chat-row--ai {
  justify-content: flex-start;
}

.chat-bubble {
  max-width: 78%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-bubble--mine {
  background: var(--primary-strong);
  color: var(--white);
  border-bottom-right-radius: var(--r-sm);
}

.chat-bubble--ai {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  border-bottom-left-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.chat-composer {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  padding-top: var(--sp-3);
}

/* 매뉴얼 아코디언 */
.accordion {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.accordion__head {
  width: 100%;
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: none;
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--text);
}

.accordion__caret {
  transition: transform 0.2s ease;
  color: var(--text-muted);
}

.accordion--open .accordion__caret {
  transform: rotate(180deg);
}

.accordion__body {
  max-height: 0;
  overflow: hidden;
  padding: 0 var(--sp-3);
  transition: max-height 0.25s ease, padding 0.2s ease;
}

.accordion--open .accordion__body {
  max-height: 2000px;
  padding: 0 var(--sp-3) var(--sp-3);
}

.accordion__row--highlight {
  outline: 2px solid var(--primary-strong);
  outline-offset: -2px;
}

.ref-manual-body {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.7;
}

.ref-manual-body img { max-width: 100%; border-radius: var(--r-sm); }

/* 도움말 물음표 아이콘 */
.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  margin-left: 6px;
  cursor: pointer;
}

.help-icon:active {
  background: var(--primary-soft);
  color: var(--primary-strong);
}

/* 시술 옵션(이달의 아트 가격 칩) 펼침 애니메이션 */
.option-reveal {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}

.option-reveal--open {
  max-height: 200px;
  opacity: 1;
}