/* ==========================================================
   ZeroTrip Design Tokens - theme.css
   Figma Design System 자동 변환 (design-tokens_tokens.json 기반)
   ========================================================== */

/* 가변 폰트(variable font) 1개 파일로 45~920 전체 굵기(현재 프로젝트에서 쓰는
   400/500/600/700/800 포함)를 다 커버함 — 굵기별로 파일을 따로 두지 않음.
   로컬 self-host (assets/fonts/), 원본: github.com/orioncactus/pretendard v1.3.9 */
@font-face {
  font-family: 'Pretendard';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('../assets/fonts/PretendardVariable.woff2') format('woff2-variations');
}

:root {

  /* ---- Primitive Colors ---- */
  --color-teal-100: #e1f2ee;
  --color-teal-200: #84d1bf;
  --color-teal-300: #219dc5;
  --color-teal-400: #015975;
  --color-teal-500: #0f4d4c;
  --color-teal-600: #033744;
  --color-orange-50: #fff5ef; /* 후기 작성 플로우의 헤더 단계 배지·경고 배너 배경 등에서 반복 사용 */
  --color-orange-100: #fdf1ea;
  --color-orange-200: #f2e5dd;
  --color-orange-300: #ffc19f;
  --color-orange-400: #ff9257;
  --color-orange-500: #ff5b04;
  --color-orange-600: #f84124;
  --color-orange-550: #e55938; /* Figma 변수 "3" — 프로모 배너 배경, 랭킹 카드 할인율 텍스트 등에 쓰이는 별도 오렌지 */
  --color-yellow-100: #f7f6f1;
  --color-yellow-200: #ffebb4;
  --color-yellow-300: #ffdf84;
  --color-yellow-400: #facd4d;
  --color-yellow-500: #f6bf22;
  --color-red-500: #ff4848; /* 알림 뱃지 등 unread 상태 표시 */
  --color-green-100: #f3f7e8;
  --color-green-200: #e1edbf;
  --color-green-300: #c6db88;
  --color-green-400: #a9c555;

  /* ---- black ---- */
  --color-black-100: #000000;
  --color-black-a35: #00000059;
  --color-black-a75: #000000bf;
  --color-black-a25: #00000040;
  --color-black-a10: #0000001a;
  --color-black-a15: #00000026;
  --color-black-a20: #00000033;
  --color-black-a85: #000000d9;
  --color-black-a45: #00000073;
  --color-black-a55: #0000008c;
  --color-black-a5: #0000000d;
  --color-black-a95: #000000f2;
  --color-black-a65: #000000a6;

  /* ---- white ---- */
  --color-white-100: #ffffff;
  --color-white-a25: #ffffff40;
  --color-white-a35: #ffffff59;
  --color-white-a45: #ffffff73;
  --color-white-a75: #ffffffbf;
  --color-white-a65: #ffffffa6;
  --color-white-a55: #ffffff8c;
  --color-white-a15: #ffffff26;
  --color-white-a85: #ffffffd9;
  --color-white-a95: #fffffff2;
  --color-white-color: #ffffff;
  --color-white-a5: #ffffff0d;
  --color-white-a10: #ffffff1a;

  /* ---- grayscale ---- */
  --color-gray-50: #fbfbfb;
  --color-gray-90: #f5f5f6; /* 지역 탭 등 비활성 배경 */
  --color-gray-100: #f4f4f4;
  --color-gray-200: #ededed;
  --color-gray-300: #e1e1e1;
  --color-gray-400: #d5d5d5;
  --color-gray-500: #b1b1b1;
  --color-gray-600: #909090;
  --color-gray-700: #6c6c6c;
  --color-gray-800: #464646;
  --color-gray-900: #222222;
  --color-gray-1000: #101214;

  /* ---- Effects ---- */
  --shadow-navi: 0px -2px 4px #0000000a;
  --shadow-toast: 0px 3px 3px #0000001f;
  --shadow-sheet: 0px -10px 20px var(--color-black-a15); /* 바텀시트 상단 그림자 */

  /* ---- Font Family ---- */
  --font-family-base: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Semantic Colors ---- */
  --color-primary: var(--color-teal-600);
  --color-accent: var(--color-orange-500);
  --color-text-default: var(--color-gray-900);
}

/* ==========================================================
   Typography Classes
   사용법: <p class="text-heading-h1-medium">텍스트</p>
   ========================================================== */

.text-heading-display-medium {
  font-family: var(--font-family-base);
  font-size: 48px;
  font-weight: 500;
  line-height: 56px;
  letter-spacing: -1.5px;
}

.text-heading-h1-medium {
  font-family: var(--font-family-base);
  font-size: 44px;
  font-weight: 500;
  line-height: 52px;
  letter-spacing: -1px;
}

.text-heading-h2-medium {
  font-family: var(--font-family-base);
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -0.8px;
}

.text-heading-h3-semibold {
  font-family: var(--font-family-base);
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: -0.8px;
}

.text-heading-h3-medium {
  font-family: var(--font-family-base);
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -0.8px;
}

.text-heading-h4-medium {
  font-family: var(--font-family-base);
  font-size: 26px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.5px;
}

.text-heading-h5-bold {
  font-family: var(--font-family-base);
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.24px;
}

.text-heading-h5-semibold {
  font-family: var(--font-family-base);
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.24px;
}

.text-heading-h5-medium {
  font-family: var(--font-family-base);
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: -0.5px;
}

.text-heading-h6-bold {
  font-family: var(--font-family-base);
  font-size: 22px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: -0.22px;
}

.text-heading-h6-semibold {
  font-family: var(--font-family-base);
  font-size: 22px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.22px;
}

.text-heading-h6-medium {
  font-family: var(--font-family-base);
  font-size: 22px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: -0.1px;
}

.text-heading-h7-semibold {
  font-family: var(--font-family-base);
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.2px;
}

.text-heading-h7-medium {
  font-family: var(--font-family-base);
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.1px;
}

.text-heading-h7-bold {
  font-family: var(--font-family-base);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.2px;
}

.text-body-xl-bold {
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.18px;
}

.text-body-xl-semibold {
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.18px;
}

.text-body-xl-medium {
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.2px;
}

.text-body-xl-regular {
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.2px;
}

.text-body-lg-medium {
  font-family: var(--font-family-base);
  font-size: 17px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.2px;
}

.text-body-lg-regular {
  font-family: var(--font-family-base);
  font-size: 17px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.2px;
}

.text-body-md-regular {
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.1px;
}

.text-body-md-semibold {
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.16px;
}

.text-body-md-bold {
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.16px;
}

.text-body-sm-regular {
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.1px;
}

.text-label-md-medium {
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.1px;
}

.text-label-sm-semibold {
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.4px;
}

.text-label-sm-medium {
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.1px;
}

.text-label-sm-regular {
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.15px;
}

.text-caption-md-semibold {
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: -0.14px;
}

.text-caption-md-regular {
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.14px;
}

.text-caption-md-medium {
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.14px;
}

.text-caption-sm-medium {
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: -0.1px;
}

.text-caption-sm-regular {
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.1px;
}

.text-caption-sm-semibold {
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: -0.13px;
}

.text-caption-sm-bold {
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: -0.13px;
}

.text-caption-xs-regular {
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: -0.12px;
}

.text-caption-xs-medium {
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: -0.12px;
}

.text-caption-xs-semibold {
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: -0.12px;
}

.text-caption-xs-bold {
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: -0.12px;
}

.text-caption-xxs-bold {
  font-family: var(--font-family-base);
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0px;
}

.text-button-lg-medium {
  font-family: var(--font-family-base);
  font-size: 17px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: -0.2px;
}

.text-button-md-medium {
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: -0.1px;
}

.text-button-sm-regular {
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: -0.1px;
}