/* ============================================================
   디자인 토큰
   색·타이포·간격·모서리를 여기서만 정의한다.
   컴포넌트 CSS와 화면 CSS는 이 변수만 쓴다. 색상값을 직접 쓰지 않는다.

   값을 바꿔야 하면 이 파일만 고친다. 화면을 뒤지지 않는다.
   ============================================================ */

:root {
  /* ── 색 ─────────────────────────────────────────────
     데이팅 서비스의 색.
     처음에는 스틸블루로 잡았는데 어학원이나 은행처럼 읽혔다.
     설레는 자리를 만드는 서비스인데 화면이 사무적이면 아무도 안 누른다.

     다만 로즈 한 가지로만 칠하면 촌스러워진다.
     로즈는 행동을 부르는 자리(버튼·가격·강조)에만 쓰고,
     검증·안내는 다른 색으로 남겨 두어야 신뢰 신호가 살아남는다. */
  --c-accent:        #FF4D6D;   /* 로즈 — 버튼과 강조에만 */
  --c-accent-hover:  #E8425F;
  --c-accent-soft:   #FFE8ED;
  --c-accent-text:   #FFFFFF;

  --c-secondary:     #FFB3C1;   /* 연한 로즈 — 장식과 배경 */
  --c-secondary-soft:#FFF0F3;

  --c-plum:          #6B3050;   /* 깊은 자주 — 제목과 대비를 만든다 */
  --c-plum-soft:     #F6ECF2;

  /* 별점. 장식용 연한 로즈(--c-secondary)로 칠했더니 분홍 바탕에 묻혀서
     몇 개가 찼는지 훑어서는 안 보였다. 후기에서 가장 먼저 읽는 것이라
     따로 색을 준다. 검증 배지와 같은 이유다. */
  --c-star:          #E8A317;

  --c-verified:      #2E7D5B;   /* 검증 배지. 로즈로 칠하면 신뢰 신호가 사라진다 */
  --c-verified-soft: #E4F1EA;

  --c-danger:        #C2334B;
  --c-danger-soft:   #FDE8EC;
  --c-warn:          #A66A12;
  --c-warn-soft:     #FDF0DC;

  /* 중립색을 로즈 쪽으로 아주 살짝 기울인다.
     완전한 회색 위에 분홍을 얹으면 색이 따로 논다.
     글자는 자주 기운을 섞어 검정보다 부드럽게 읽히게 했다. */
  --c-bg:        #FFF7F9;
  --c-surface:   #FFFFFF;
  --c-surface-2: #FFF0F3;
  --c-line:      #F2DDE3;
  --c-line-soft: #F9EBEF;
  --c-text:      #2A1D24;
  --c-text-2:    #574450;
  --c-text-mute: #8A7580;
  --c-text-on-dark: #FFF7F9;

  /* 꼬리말은 어두운 바닥이라 본문 색이 그대로 통하지 않는다.
     여기서 한 벌 따로 정해 두고, 어두운 배경 위에서는 이 변수만 쓴다. */
  --c-footer-bg:   #241521;   /* 자주 기운이 도는 먹색. 순검정은 분홍 위에서 차갑다 */
  --c-footer-head: #FFFFFF;
  --c-footer-text: #CBB6C2;
  --c-footer-mute: #9C8492;
  --c-footer-line: rgba(255, 255, 255, .13);

  /* ── 타이포 ─────────────────────────────────────── */
  --f-sans: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   26px;
  --fs-2xl:  34px;

  --lh-tight: 1.3;
  --lh-base:  1.65;

  /* ── 간격 ───────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;

  /* ── 모서리와 그림자 ────────────────────────────── */
  /* 모서리를 한 단계씩 키웠다. 각진 상자는 서류처럼 보인다. */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-full: 999px;

  /* 그림자에도 로즈를 섞는다. 회색 그림자는 분홍 위에서 탁해 보인다. */
  --sh-sm: 0 1px 2px rgba(107,48,80,.06);
  --sh-md: 0 2px 4px rgba(107,48,80,.06), 0 10px 24px -12px rgba(255,77,109,.28);

  /* ── 레이아웃 ───────────────────────────────────── */
  --w-page:    1100px;   /* 관리자 */
  --w-content: 720px;    /* 모바일 웹 본문 */
  --w-header:  1160px;   /* 머리말·꼬리말은 본문보다 넓게 쓴다 */
  --h-header:  64px;
  --h-tabbar:  60px;     /* 모바일 하단 탭 */

  /*
   * 폼 한 줄의 높이.
   *
   * 적는 칸(.gb-input) · 고르는 칸(.gb-select__btn) · 그 옆에 서는 단추가
   * 전부 이 값을 쓴다. 세 곳에 숫자를 따로 적어 두었더니 select 가 38px,
   * input 이 45px, 단추가 31px 로 갈라져 한 줄에 세 가지 높이가 섰다.
   * 라벨까지 들쑥날쑥해 보인 것이 그 때문이다.
   *
   * 숫자를 박지 않고 셈으로 둔다 — 글자 1.5줄 + 위아래 여백 11px + 테두리 1px.
   * 관리자 화면은 글자가 한 단계 작으므로(14px) 이 값도 저절로 작아진다.
   * 45px 이라고 박아 두었더니 손님 화면(15px)에서 칸은 47px, 단추만 45px
   * 로 남아 2px 이 어긋났다.
   */
  --h-field: calc(1.5 * var(--fs-base) + 24px);

  /*
   * 라벨 한 줄 + 라벨과 칸 사이(6px).
   *
   * 라벨이 없는 것(줄 안의 단추)을 옆 칸과 나란히 세우려면 이만큼 내려야 한다.
   * 26px 이라고 박아 두었더니 글자 크기가 다른 화면에서 어긋났다 —
   * 관리자(12.5px)와 손님(13px)이 다르다. 셈으로 둔다.
   */
  --h-label: calc(var(--lh-base) * var(--fs-sm) + 6px);
}

/* 관리자 화면은 밀도가 달라 한 단계 작게 쓴다. */
.gb-admin {
  --fs-base: 14px;
  --fs-sm:   12.5px;
  --s-5: 20px;
  --s-6: 28px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

/* 긴 URL 처럼 한 덩어리가 칸보다 길면 끊어 준다. 이건 어느 언어에나 맞다. */
body, h1, h2, h3, h4, p, li, td, th, label, button, a, span {
  overflow-wrap: break-word;
}

/* 한국어는 단어 중간에서 줄이 바뀌면 안 된다.
   이걸 빠뜨리면 "외국인 / 과 마주 앉는" 처럼 조사가 잘려 넘어간다.

   한국어에만 건다.
   전에는 모든 언어에 걸어 두었는데, 일본어는 띄어쓰기가 없어서 문장
   하나가 통째로 안 끊기는 한 덩어리가 됐다. 그 덩어리가 칸보다 넓으니
   첫 화면이 360px 에서 404px 로 삐져나가 가로 스크롤이 생겼다.
   중국어도 같은 이치인데 문장이 짧아 눈에 안 띄었을 뿐이다. */
:lang(ko) h1, :lang(ko) h2, :lang(ko) h3, :lang(ko) h4,
:lang(ko) p, :lang(ko) li, :lang(ko) td, :lang(ko) th,
:lang(ko) label, :lang(ko) button, :lang(ko) a, :lang(ko) span {
  word-break: keep-all;
}

/* 키보드로 옮겨 다니는 사람에게 지금 어디인지 보여준다. */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

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