/* 이상형 산책 — 글꼴. 산책 화면과 안내 페이지가 모두 이 파일 하나를 따른다. 다른 스타일시트보다 뒤에 읽는다.

   사용 위치           글꼴          굵기
   서비스 타이틀        마루부리       Medium
   에피소드 제목        마루부리       Medium
   감성 문구           마루부리       Regular
   상대방 메시지        Pretendard    Regular
   선택지             Pretendard    Medium
   버튼·날짜·정보       Pretendard    Regular

   - 마루부리에는 Medium 굵기가 없다(ExtraLight · Light · Regular · SemiBold · Bold). Regular 바로 위인 SemiBold 를 Medium 자리에 쓴다.
   - Pretendard 는 각 HTML 의 <head> 에서 jsDelivr 의 스타일시트로 읽는다(쓰는 글자 묶음만 나눠 받는다).
   - 여기서는 글꼴과 굵기만 정한다. 크기와 줄 간격은 각 화면의 스타일시트에 있다.
   - 결과 카드를 그림으로 내보내는 js/app.js 의 drawCard 도 같은 표를 따른다. */

@font-face {
  font-family: 'MaruBuri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2) format('woff2'),
       url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff) format('woff');
}

@font-face {
  font-family: 'MaruBuri';
  font-style: normal;
  font-weight: 500 700;          /* Medium 으로 부르면 SemiBold 가 나온다 */
  font-display: swap;
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2) format('woff2'),
       url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff) format('woff');
}

:root {
  --serif: 'MaruBuri', 'Nanum Myeongjo', 'Apple SD Gothic Neo', 'Malgun Gothic', serif;
  --sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;

  --w-title: 500;        /* 서비스 타이틀 · 에피소드 제목 */
  --w-copy: 400;         /* 감성 문구 */
  --w-message: 400;      /* 상대방 메시지 */
  --w-choice: 500;       /* 선택지 */
  --w-ui: 400;           /* 버튼 · 날짜 · 정보 */
  --w-label: 500;        /* 표에 없는 이름표와 본문 강조: Pretendard 안에서는 Medium 이 가장 굵다 */
}

/* 기본값: 버튼 · 날짜 · 정보 — Pretendard Regular */
body,
button,
input,
textarea {
  font-family: var(--sans);
  font-weight: var(--w-ui);
}

/* ───────────── 서비스 타이틀 — 마루부리 Medium ───────────── */

.intro h1,
.card-brand,
.site-brand,
.top-brand,
.foot-brand {
  font-family: var(--serif);
  font-weight: var(--w-title);
}

.card-brand span { font-weight: var(--w-copy); }       /* [walk to meet you] */

/* ───────────── 에피소드 제목 — 마루부리 Medium ───────────── */

.card-head,
.card h2,
.card-cta-head,
.sheet-title,
.doc h1,
.doc h2,
.doc .cards b {
  font-family: var(--serif);
  font-weight: var(--w-title);
}

/* ───────────── 감성 문구 — 마루부리 Regular ───────────── */

.intro-sub,
.card-sub,
.card-taste,
.site-tagline,
.foot-tagline,
.doc-lead {
  font-family: var(--serif);
  font-weight: var(--w-copy);
}

/* ───────────── 상대방 메시지 — Pretendard Regular ───────────── */
/* 메신저의 말풍선, 알림에 뜬 첫 메시지, 만나서 건네는 말, 카드에 적힌 상대의 말 */

.bubble,
.banner-text,
.line p,
.card-quote {
  font-family: var(--sans);
  font-weight: var(--w-message);
}

/* ───────────── 선택지 — Pretendard Medium ───────────── */

.chip {
  font-family: var(--sans);
  font-weight: var(--w-choice);
}

/* ───────────── 버튼 · 날짜 · 정보 — Pretendard Regular ───────────── */

/* 버튼 */
.start,
.me-opt,
.card-actions button,
.peek,
.sheet-close,
.menu-btn,
.btn,
.top-go,
.kind span,
/* 날짜 */
.intro-date,
.note,
.msg time,
.banner-head time,
.card-stamp,
/* 정보 */
.chat-title span,
.typing-bar,
.toast,
.me-pick-label,
.site-links a,
.menu nav a,
.foot-links a,
.card-ai,
.card-line,
.card-tags,
.card-cta-sub,
.doc,
.doc h3 small {
  font-family: var(--sans);
  font-weight: var(--w-ui);
}

/* ───────────── 표에 없는 것: 이름표와 본문 강조 — Pretendard Medium ───────────── */

.chat-title strong,
.banner-head b,
.card-label,
.card-match-label,
.card-match-head,
.doc-kicker,
.doc h3,
.doc strong,
.doc b,
.doc th,
.faq dt,
.form legend,
.form label.field,
.mail-address,
.steps > li::before,
.foot-links a[aria-current="page"] {
  font-family: var(--sans);
  font-weight: var(--w-label);
}

/* 안내 페이지의 카드 제목(네 사람, 사계절)은 제목이다: 위의 .doc b 보다 뒤에 둔다 */
.doc .cards b {
  font-family: var(--serif);
  font-weight: var(--w-title);
}