/* 서체는 셀프호스팅한다 — 외부 요청을 만들지 않기 위해서다.
   Google Fonts를 부르면 안내·방침 페이지를 여는 사람의 IP와 User-Agent가
   제3자에게 전달된다. 그 의존성을 없애려고 필요한 글자만 서브셋해 여기 둔다.

   재생성: python frontend/tools/build-fonts.py
   문구를 크게 바꾸면 다시 돌린다. 서브셋에 없는 글자는 Georgia/시스템 serif로
   폴백하므로 깨지지는 않는다.

   라이선스: 두 서체 모두 SIL OFL 1.1 (fonts/OFL-*.txt). Reserved Font Name 선언이
   없어 서브셋 재배포가 허용된다. */

@font-face {
  font-family: "Noto Serif KR";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/NotoSerifKR-400.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif KR";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/NotoSerifKR-500.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif KR";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/NotoSerifKR-600.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/CormorantGaramond-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/CormorantGaramond-600.woff2") format("woff2");
}

/* 오늘의 영감 — 정적 안내·문서 페이지 (앱 디자인 세트의 크림/골드 톤) */
:root {
  --bg: #F4EADA;
  --surface: #EDDFC6;
  --ink: #2E2A26;
  --muted: #8A7F6F;
  --gold: #B8933A;
  --gold-deep: #96762C;
  --border: rgba(46, 42, 38, 0.28);
  --hairline: rgba(46, 42, 38, 0.16);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #221E1A;
    --surface: #2B2620;
    --ink: #EDE3D2;
    --muted: #A39680;
    --gold: #C9A44E;
    --gold-deep: #C9A44E;
    --border: rgba(237, 227, 210, 0.24);
    --hairline: rgba(237, 227, 210, 0.14);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 15px;
  line-height: 1.85;
}
main {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}
.eyebrow {
  color: var(--gold);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
h1 {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 10px 0 4px;
}
h2 {
  font-size: 17px;
  font-weight: 600;
  margin: 36px 0 8px;
}
p, li { color: var(--ink); }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
a { color: var(--gold-deep); }
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 28px 0;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13.5px;
}
th, td {
  border-bottom: 1px solid var(--hairline);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
th { color: var(--muted); font-weight: 600; }
.box {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 20px 0;
}
.footer-nav {
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 56px;
  padding-top: 20px;
}
.footer-nav a { margin-right: 14px; }
.pill {
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold-deep);
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0.12em;
  margin-top: 20px;
  padding: 13px 30px;
  text-decoration: none;
}
/* index의 카드 뒷면 오너먼트 */
.card-back {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  height: 238px;
  margin: 40px auto 0;
  padding: 10px;
  width: 140px;
}
.card-back .inner {
  align-items: center;
  border: 1px solid var(--gold);
  border-radius: 8px;
  display: flex;
  height: 100%;
  justify-content: center;
  opacity: 0.8;
}
.card-back .circle {
  align-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  height: 64px;
  justify-content: center;
  width: 64px;
}
.card-back .diamond {
  border: 1px solid var(--gold);
  height: 22px;
  transform: rotate(45deg);
  width: 22px;
}
.center { text-align: center; }