/* =========================================================
   🚨 [마스터 디자인 토큰 & 브랜드 아이덴티티 설정]
   ---------------------------------------------------------
   브랜드 색상, 로고, 폰트는 이 파일의 :root 변수에서 통제합니다.
   나중에 상호명이나 테마 색상을 변경할 경우 이 파일의 변수값만 수정하십시오.
   ========================================================= */

@import url('../modules/typography/typography.css');

:root {
  /* [1. 테마 핵심 컬러 - brand.json과 동기화 가능] */
  --primary-navy: #172A46;       /* 메인 컬러 (헤더, 타이틀, 푸터) */
  --sub-blue: #4DA3D9;          /* 보조 컬러 (카테고리 칩, 뱃지) */
  --accent-orange: #F29B38;     /* 포인트 CTA 컬러 (예약/상담) */
  --accent-orange-hover: #e08a27;

  /* [2. 모던 클린 배경 및 텍스트] */
  --bg-white: #FFFFFF;
  --bg-soft-gray: #F8FAFC;
  --bg-card: #FFFFFF;

  --text-dark: #0F172A;
  --text-sub: #334155;
  --text-muted: #64748B;

  /* [2-1. 밝은 해안 팔레트 — 메인 풀블리드 첫 화면(2026-09-30 확정 시안)] */
  --coast-foam: #F2FAF7;        /* 밝은 바다 거품 배경 */
  --coast-sea: #397D80;         /* 태그·보조 강조 */
  --coast-sea-soft: #BFE9E5;    /* 어두운 사진 위 보조 문구 */
  --coast-ink: #12233A;         /* 본문 제목 */
  --coast-muted: #5C6F7C;       /* 본문 보조 */
  --coast-line: #E9EFEC;        /* 카드 안 구분선 */
  --coast-shade: 10, 43, 55;    /* 사진 위 글자 쪽 그림자 rgb — rgba(var(--coast-shade), a) */

  /* [3. 초슬림 무경계 & 럭셔리 섀도우] */
  --border-light: rgba(226, 232, 240, 0.8);
  --border-subtle: rgba(23, 42, 70, 0.06);

  --shadow-sm: 0 4px 12px rgba(23, 42, 70, 0.04);
  --shadow-md: 0 12px 28px rgba(23, 42, 70, 0.08);
  --shadow-lg: 0 24px 48px rgba(23, 42, 70, 0.12);

  /* [4. 곡률 및 폰트] */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 50px;

  --font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================
   [마스터 CTA & 필 버튼 유틸리티]
   ========================================================= */

.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.9rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-smooth);
  text-decoration: none;
}

.pill-btn-primary {
  background: var(--accent-orange);
  color: #ffffff;
  border-color: var(--accent-orange);
}

.pill-btn-primary:hover {
  background: var(--accent-orange-hover);
  box-shadow: 0 6px 18px rgba(242, 155, 56, 0.35);
}

.pill-btn-outline {
  background: transparent;
  color: var(--primary-navy);
  border-color: var(--primary-navy);
}

.pill-btn-outline:hover {
  background: var(--primary-navy);
  color: #ffffff;
}

.pill-btn-orange-outline {
  background: var(--bg-card);
  color: var(--accent-orange);
  border-color: var(--accent-orange);
}

.pill-btn-orange-outline:hover {
  background: var(--accent-orange);
  color: #fff;
}

/* 밝은 해안 첫 화면용 — 짙은 남색 채움과 흰 채움 두 가지. */
.pill-btn-navy {
  background: var(--primary-navy);
  color: #ffffff;
  border-color: var(--primary-navy);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

.pill-btn-navy:hover {
  background: #0f1e33;
  border-color: #0f1e33;
}

.pill-btn-light {
  background: #ffffff;
  color: var(--primary-navy);
  border-color: rgba(255, 255, 255, 0.4);
}

.pill-btn-light:hover {
  background: var(--coast-foam);
}