/*
 * 디자인 토큰. 색은 민트 안(teal), 글꼴은 Pretendard로 확정했다(2026-10-08, docs/mockup-approval.md).
 * 탈락한 로즈 안(rose)의 값은 docs/DESIGN-NOTES.md 에만 기록으로 남긴다.
 * 색은 요양원 로고(사용자 제공)의 색에서 규칙으로 뽑았다. 근거·계산은 docs/DESIGN-NOTES.md.
 *   로고 sRGB 값: 민트 #59D1C9 · 로즈 #ED5484 · 회청 #A9BDC4
 *   primary        = 로고 민트에 검정을 1%씩 섞어 처음으로 흰 바탕 5.0:1 이상이 되는 값
 *   primary-strong = 같은 방법으로 8.0:1 이상
 *   primary-tint   = 로고 민트 14% + 흰색 86%
 *   accent         = 로고 로즈 그대로(진한 글자를 올린다), accent-strong = 로즈를 같은 규칙(5.0:1)으로 어둡게 한 값
 *   회색           = 로고 회청색의 색상(H 195.6)·채도 12%, 밝기 97/88/62/34/13%
 *
 * 대비(WCAG 2.x 상대 휘도 공식). 글자 4.5:1, 비텍스트(경계·포커스) 3:1 이상만 쓴다. 전체 표는 3단계 contrast.md.
 *   흰 바탕 위: primary #347975 5.08 · strong #255854 8.07 · gray-700 6.97 · gray-900 15.92
 *   primary-tint 위 primary-strong 글자: 7.43 · gray-700 글자: 6.42
 *   ※ 주의: primary-tint 위에 primary 글자는 4.67로 여유가 거의 없다. 옅은 띠(제목 띠·소개 띠) 위 글자는
 *     primary-strong 이나 gray-700/900 을 쓴다. primary 는 굵은 큰 글자나 장식에만 쓴다.
 *     (탈락한 로즈 안은 같은 조합이 4.35로 미달이었다. 색을 바꾸면 이 조합부터 다시 잰다.)
 *   gray-50 위 gray-700 글자: 6.54 · gray-200 위 gray-700(자리표시 설명): 5.34
 *   accent 위 글자는 --color-on-accent(gray-900): 4.70 · 마우스 올림 accent-hover: 5.26
 *   accent 위 흰 글자 → 금지: 3.39. 흰 글자가 필요하면 accent-strong 바탕(5.13)
 *   gray-400(2.59)은 장식 전용, 글자·조작 요소 경계 금지.
 *   danger #B42318 흰 바탕 위: 6.57 · gray-50 위: 6.17 (오류 안내 글자)
 *   입력칸 경계 --input-border(gray-700) 흰 바탕 위: 6.97
 * 포커스 표시(비텍스트 3:1 기준):
 *   accent-strong 고리: 흰 5.13 · primary-tint 위 4.72 · gray-50 위 4.81
 *   어두운 바탕(주색 띠, 히어로, 푸터 gray-900)에서는 --focus-ring-on-dark(흰색):
 *     primary 5.08 · primary-strong 8.07 · gray-900 15.92
 *   accent-strong 고리를 gray-900(푸터) 위에 쓰면 3.10 → 여유가 적어 쓰지 않는다
 */

:root,
[data-theme-color="teal"] {
  --color-primary: #347975;
  --color-primary-strong: #255854; /* 눌림·호버, 진한 제목, 옅은 띠 위 글자 */
  --color-primary-tint: #E8F9F7;   /* 옅은 띠 배경. 이 위 글자는 primary-strong (위 주의 참고) */
  --color-accent: #ED5484;         /* 강조 버튼·전화 (진한 글자) */
  --color-accent-hover: #EF6590;   /* 강조 버튼 마우스 올림 */
  --color-accent-strong: #BB4268;  /* 흰 글자·필수 표시·포커스 고리 */
}

:root {
  /* 회색 5단계: 로고의 회청색 쪽으로 기울였다 */
  --gray-50: #F6F8F8;
  --gray-200: #DDE2E4;
  --gray-400: #92A4AA;
  --gray-700: #4C5C61;
  --gray-900: #1D2325;

  /* 공통 색 */
  --color-danger: #B42318;         /* 오류 안내 글자. 로즈 강조색과 색상이 가까워 색만으로 구분되지 않으므로
                                      오류 안내에는 항상 경고 아이콘(Lucide circle-alert)과 글자를 함께 쓴다 */
  --color-on-primary: #FFFFFF;
  --color-on-accent: var(--gray-900);
  --color-bg: #FFFFFF;
  --color-surface: var(--gray-50);
  --color-border: var(--gray-200);
  --color-text: var(--gray-900);
  --color-text-muted: var(--gray-700);
  --color-link: var(--color-primary);
  --color-placeholder: var(--gray-200); /* 사진 자리표시 블록 */
  --color-overlay: rgba(0, 0, 0, 0.55);  /* 사진 위 글자 대비용 */
  --color-overlay-label: rgba(0, 0, 0, 0.45);   /* 사진 위 작은 이름표 바탕 */
  --placeholder-stripe: rgba(255, 255, 255, 0.35); /* 자리표시 빗금 */
  --input-border: var(--gray-700);  /* 입력칸 경계: gray-400 은 비텍스트 3:1 미달 */
  --surface-frosted: rgba(255, 255, 255, 0.96); /* 아래 고정 띠 바탕 */

  /* 어두운 바탕(주색 띠·히어로·푸터) 위 선·채움 */
  --on-dark-line: rgba(255, 255, 255, 0.3);
  --on-dark-line-soft: rgba(255, 255, 255, 0.15);
  --on-dark-fill: rgba(255, 255, 255, 0.14);
  --on-dark-border: rgba(255, 255, 255, 0.85);

  /* 글꼴 */
  --font-fallback: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-body: "Pretendard", var(--font-fallback); /* 확정. 글꼴 바꾸기 속성은 없앴다 */
  --font-size-body: 17px;
  --line-height-body: 1.7;
  --font-size-sm: 15px;
  --font-size-lg: 20px;
  --font-size-h3: 22px;
  --font-size-h2: 28px;
  --font-size-h1: 36px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-heading: 1.35;

  /* 레이아웃 */
  --max-width: 1200px;
  --gutter: 16px;          /* 모바일 좌우 여백 */
  --breakpoint-md: 768px;  /* 참고값: 미디어 쿼리에는 변수를 못 쓰므로 768px 을 직접 적는다 */

  /* 간격(4px 기반) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* 모서리·그림자 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 10px 28px rgba(0, 0, 0, 0.1);
  --shadow-dropdown: 0 12px 24px rgba(0, 0, 0, 0.1);
  --shadow-raised: 0 16px 40px rgba(0, 0, 0, 0.18);
  --shadow-callbar: 0 -4px 16px rgba(0, 0, 0, 0.08);

  /* 움직임 */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* 머리글·아래 고정 띠 높이. callbar 높이 = 단추 높이 + 위아래 여백 + 윗선 1px (안전 영역은 쓰는 곳에서 더한다) */
  --header-height: 64px;
  --callbar-button-height: 52px;
  --callbar-padding-block: var(--space-2);
  --callbar-height: calc(var(--callbar-button-height) + var(--callbar-padding-block) * 2 + 1px);

  /* 포커스 표시 */
  --focus-ring-color: var(--color-accent-strong);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-on-dark: #FFFFFF;   /* 어두운 바탕 위 포커스 고리 */
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px; /* PC 좌우 여백 */
    --header-height: 80px;
  }
}