/*
  base.css
  ------------------------------------------------------------
  전역 디자인 토큰(색상/폰트/여백 규칙)과 리셋 스타일입니다.
  다른 모든 css/*.css 파일은 여기서 정의한 CSS 변수(--ink, --sea 등)를
  가져다 씁니다. 브랜드 컬러를 바꾸고 싶으면 :root 안의 값만 수정하세요.

  * 반응형 기준(breakpoint) 두 가지를 프로젝트 전체에서 통일해서 씁니다.
    - 920px : 헤더 내비게이션이 햄버거 메뉴로 바뀌는 기준
    - 640px : 폰 사이즈 화면(히어로 여백, 예약 패널이 바텀시트로 전환 등)
*/

:root{
  /* 브랜드 컬러 */
  --ink:#393120;
  --sea:#7DC2B6;
  --sea-deep:#4F8478;
  --sea-light:#8FE2D4;
  --sand:#F5EEDC;
  --foam:#FFFAF0;
  --brass:#8FE2D4;
  --brass-light:#C9F3EA;
  --text:#393120;
  --line: rgba(57,49,32,0.14);

  /* Book 버튼 등 포인트로 쓰는 정확한 민트 컬러 (브랜드 가이드 원본 값) */
  --accent-mint:#7DC2B6;

  /* 애니메이션 easing 값 (전 컴포넌트 공통) */
  --ease: cubic-bezier(.22,.61,.36,1);

  /* 폰트 스택 */
  --font-kr:'KoPub Dotum', sans-serif;
  --font-en-main:'haboro-contrast-normal', 'Helvetica Neue', Arial, sans-serif;
  --font-en-sub:'Libre Baskerville', serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-kr);
  background:var(--foam);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}

/* 한국어 헤드라인/본문에 쓰는 공통 클래스 */
.serif{font-family:var(--font-kr);}

/* 영문 브랜딩 라벨(대문자, 자간 넓힘)에 쓰는 공통 클래스 */
.eyebrow{
  font-family:var(--font-en-main);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:700; color:var(--ink);
}

/* 배너 카드 그레인 텍스처에서 재사용하는 SVG 필터 정의용 컨테이너 */
.defs{position:absolute; width:0; height:0; overflow:hidden;}
.grain{
  position:absolute; inset:0; opacity:.18; mix-blend-mode:overlay; pointer-events:none;
}