/* ============================================================
   디자인 토큰
   색·타이포·간격·모서리를 여기서만 정의한다.
   컴포넌트 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-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-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 {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 키보드로 옮겨 다니는 사람에게 지금 어디인지 보여준다. */
: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;
  }
}