/* 사주학개론 공홈 — 앱과 같은 아트 디렉션.
 *
 * 골격(레이아웃·간격·컴포넌트)은 `C:\ggeuduck` 의 `web/styles.css` 를 그대로 가져왔고,
 * 색과 서체만 우리 것으로 갈아끼웠습니다. 값의 출처는 `apps/mobile/src/theme.ts` 이고,
 * 여기 :root 는 그 **복제본**입니다. 앱을 참조하지 않고 읽어서 베껴 옵니다
 * (끄덕이 자기 앱에 대해 세운 규칙과 같습니다). 앱이 토큰 한 파일로 화면 전체를
 * 갈아입듯, 웹도 이 블록만 바꾸면 전체가 따라옵니다.
 *
 * 핵심은 「낮 판」입니다 (DESIGN §8-19, 2026-09-04 사용자 확정). 바탕은 한지 결의 미색,
 * 글자는 남색, 강조는 태양색 하나. 밤 팔레트(N)는 앱에서도 관계 지도 한 화면에만 남아
 * 있어서 여기 넣지 않습니다. 오행 색(ELEMENT_COLOR)도 안 넣습니다 — 그건 간지 글자가
 * 어느 오행인지 말하는 정보색이라 이 사이트에 쓸 자리가 없습니다.
 *
 * 🔴 태양색이 둘인 이유: 칠(`--accent` #c47a17)과 글자(`--accent-ink` #9c5a0b)가 다릅니다.
 * 종이 위에서 칠 값은 대비가 4.5에 못 미쳐 작은 글씨로 쓰면 안 읽힙니다. **선과 칠에는
 * `--accent`, 글자에는 `--accent-ink`** 를 씁니다. 앱 `theme.ts` 의 seal/sealInk 와 같은 규칙입니다.
 */

/* 서체 — 둘 다 SIL OFL 1.1이라 웹 사용에 제약이 없습니다.
 * 제목은 명조(나눔명조), 읽는 글은 Pretendard.
 *
 * 끄덕은 제목에 Jua(둥근체)를 씁니다. 우리는 명조로 바꿉니다 — 앱 `theme.ts` 의 `F.hanja`
 * 가 간지 한 글자에 명조 계열(바탕·Apple Myungjo)을 지정해 두었고, 종이·먹·낙관이라는
 * 컨셉에서 둥근체는 다른 말을 합니다. 제목-본문의 서체 대비를 두는 구조 자체는 끄덕과
 * 같게 유지했습니다. 되돌리려면 `--font-display` 한 줄입니다.
 *
 * 명조는 긴 글에서 눈이 빨리 피로하므로 **제목까지만** 씁니다. 설명·안내·약관 문장은
 * Pretendard입니다. 끄덕이 둥근체에 대해 세운 규칙과 같은 이유입니다. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700&display=swap');

:root {
  /* 종이 램프 (따뜻한 미색) — 표면과 테두리가 여기서 나옵니다 */
  --n-0: #fbf9f4;    /* theme.ts C.card */
  --n-25: #f7f4ec;   /* 보간 */
  --n-50: #f3efe6;   /* C.paper — 한지 결의 미색. 순백 아님 */
  --n-100: #ece7dc;  /* C.cardMuted */
  --n-200: #d9d2c3;  /* C.rule */
  --n-300: #c6bda9;  /* 보간 — 진한 테두리 */

  /* 먹 램프 (남색) — 글자가 여기서 나옵니다. 끄덕은 한 계열이지만 우리는 종이가 따뜻하고
   * 글자가 찬 두 계열입니다. 앱 theme.ts 가 그렇게 되어 있습니다 (rule 은 따뜻, ink3 은 찹니다). */
  --n-400: #a9aebf;  /* C.faint — ⛔ 글자 금지. 종이 위 대비 1.93 이라 획·장식에만 */
  --n-500: #7a819d;  /* C.ink3 — ⛔ 글자 금지. 종이 위 3.36 */
  --n-600: #46507a;  /* C.ink2 — 보조 글자는 여기서부터. 종이 위 6.81 */
  --n-700: #2b3559;  /* 보간 */
  --n-900: #1d2540;  /* C.ink */

  --bg: var(--n-50);
  --surface: var(--n-0);
  --surface-sunken: var(--n-100);
  /* 부적 눈금 종이. 앱에서는 각인에만 쓰지만 여기서는 인용·보조 칸의 바탕입니다 */
  --sheet: #f1ebdd;  /* C.sheet */

  --border: var(--n-200);
  --border-strong: var(--n-300);
  --border-subtle: var(--n-100);

  --text: var(--n-900);

  /* 🔴 보조 글자는 앱 램프에서 **한 단씩 내려** 씁니다 (2026-09-09 실측).
   *
   * 끄덕은 muted=n-500, faint=n-400 인데 그 자리에 우리 값을 그대로 넣으면
   * 종이 위 대비가 3.36 과 1.93 이 되어 13~15px 글자가 안 읽힙니다. DESIGN §8-19 가
   * 오행 색에 대해 이미 「종이 대비 전부 4.5 이상」을 못박았고(2026-09-04 에 토 색을
   * 그 이유로 고쳤습니다), 여기는 방침·약관이 본체라 그 규칙이 더 세게 걸립니다.
   *
   * 실측(WCAG, 종이 #f3efe6 / 카드 #fbf9f4):
   *   ink3  #7a819d  3.36 / 3.66   미달
   *   ink2  #46507a  6.81 / 7.42   통과  → --text-muted
   *   faint #a9aebf  1.93 / 2.10   미달
   *   #666c83        4.53 / 4.94   통과  → --text-faint (ink3 를 어둡게 한 값)
   *
   * ⚠️ `#666c83` 은 **앱에 없는 값**입니다. 앱 화면에서도 ink3 가 보조 글자로 쓰이는
   * 자리가 있다면 같은 미달이 있을 수 있습니다. 앱 쪽은 따로 봐야 합니다. */
  --text-muted: var(--n-600);
  --text-faint: #666c83;
  --text-on-ink: var(--n-0);  /* C.onInk */

  /* 먹색 — 주된 동작. 브랜드색이 아니라 잉크입니다. 컨트롤이 많은 화면이
   * 색상표가 되지 않게 하는 규칙입니다. */
  --ink: var(--n-900);
  --ink-soft: var(--n-700);

  /* 태양 — 앱의 유일한 강조색입니다 (theme.ts 규칙 2: "강조색은 태양 하나").
   * 선·칠에 씁니다. 글자에 쓰지 마세요 — 종이 위 대비가 모자랍니다. */
  --accent: #c47a17;         /* C.seal */
  /* 태양 — 글자용. 종이 위에서 4.5 이상 읽히는 값입니다 */
  --accent-ink: #9c5a0b;     /* C.sealInk */
  --accent-tint: #fbe6c4;    /* C.sealSoft. ⚠️ 이 바탕 위에 --accent-ink 글자를 올리지
                              * 마세요 — 대비 4.44 로 미달입니다. 틴트 위 글자는 --ink-soft */
  --accent-border: #e5c78d;  /* 보간 */

  /* 인주(낙관). 앱에서는 각인에만 허용된 색이라 여기서도 **머리글의 도장 하나**에만
   * 씁니다. 번지면 앱의 규칙 3이 무너집니다. */
  --stamp: #b8432a;          /* C.stamp */

  --danger: #a8392a;         /* C.dangerInk — 종이 위에서 읽히는 붉은색 */

  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-xxl: 28px;

  /* 그림자는 색이 먼저이고 세기는 나중입니다. 끄덕은 크림 램프에서 나온 따뜻한 갈색을
   * 썼습니다. 우리 램프의 어두운 끝은 남색이라 남색 그림자입니다 — 갈색을 쓰면 종이와
   * 같은 계열이라 그림자가 얼룩처럼 보입니다. */
  --shadow-card: 0 2px 5px rgba(45, 52, 78, 0.08);
  --shadow-raised: 0 4px 14px rgba(45, 52, 78, 0.11);

  --font-display: 'Nanum Myeongjo', Batang, BatangChe, 'Apple Myungjo',
    'Noto Serif KR', serif;
  --font-body: 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  /* 숫자·간지는 고정폭. 앱 theme.ts F.mono 와 같은 스택입니다 — 고정폭 글꼴은 CJK 를
   * 안 가지므로 그 다음 글꼴을 명시해 줍니다 (2026-09-04 실측: 안 하면 Chrome 이
   * SimSun 류로 떨어져 획이 얇아집니다). */
  --font-mono: Consolas, Menlo, 'Malgun Gothic', 'Apple SD Gothic Neo', monospace;

  --stroke: 1.8;

  --measure: 680px;
}

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  /* 웹은 읽는 거리가 멀고 긴 글이 본체라 16px입니다. 앱보다 한 단 큽니다.
   * 위계(제목-본문-보조)의 비율은 앱과 같게 유지합니다. */
  font-size: 16px;
  line-height: 1.7;
  /* 한글은 단어 중간에서 끊지 않습니다 */
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* ── 타이포 ─────────────────────────────────────────────────────────
 * 나눔명조는 400과 700 둘을 싣습니다. 제목에 700을 쓰는 것은 명조의 가는 획이
 * 큰 글자에서 힘을 잃기 때문입니다. 합성 볼드는 쓰지 않습니다 — 획을 뭉갭니다.
 * 명조는 같은 크기에서 Pretendard보다 작아 보여 크기를 조금씩 얹었습니다. */

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(30px, 6vw, 42px);
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 17px;
}

a {
  color: inherit;
  text-decoration-color: var(--accent-border);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--accent);
}

strong {
  font-weight: 600;
}

/* 작은 머리글. 자간을 넓게 벌리는 것은 로마자의 관용이라 한글에는 얕게만 줍니다 —
 * 자모가 성기게 벌어지면 한 글자가 두 덩어리로 보입니다. */
.label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  text-transform: uppercase;
}

.muted {
  color: var(--text-muted);
  font-size: 14px;
}

.lead {
  font-size: 17px;
  color: var(--ink-soft);
}

/* ── 레이아웃 ───────────────────────────────────────────────────── */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: var(--space-xl);
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: var(--space-lg);
  top: var(--space-lg);
  z-index: 10;
  background: var(--surface);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
}

/* ── 헤더 ───────────────────────────────────────────────────────── */

/* 머리와 본문 사이에 선을 하나 긋습니다. 종이 위의 종이라 선이 없으면 메뉴가
 * 본문 첫 줄처럼 읽힙니다. 카드에는 테두리를 두르지 않는다는
 * 규칙과 어긋나지 않습니다 — 여기서 선이 하는 일은 상자를 만드는 것이 아니라
 * 페이지의 층을 나누는 것입니다. */
.site-header {
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
  /* 스크롤해도 메뉴가 따라옵니다. 랜딩이 길어져서 아래쪽에서 고객센터로 가려면
   * 맨 위까지 올라와야 했습니다. 반투명 위에 blur를 얹으면 한지 바탕이 유지된
   * 채로 밑의 내용이 비칩니다. */
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
}

/* backdrop-filter를 모르는 브라우저에서는 반투명 배경만 남아 글이 겹쳐 보입니다.
 * 그런 곳에서는 불투명한 종이로 되돌립니다. */
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--bg); }
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.wordmark {
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: -0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

/* 머리의 이름은 한 단 크게 세우고 왼쪽에 마크를 답니다. 글자만 있으면 머리가
 * 허전하고, 앱을 이미 쓰는 사람에게 여기가 같은 곳임을 알리는 것도 그림입니다.
 * 푸터의 이름은 그대로 둡니다 — 거기서는 물러나 있는 것이 제 역할입니다. */
.site-header .wordmark {
  font-size: 25px;
}

/* 앱의 그림과 같은 도형입니다. 1년을 24칸으로 나눈 절기 고리이고, 앱에서는
 * 로그인 화면이 이것을 그립니다(`components/Ring.tsx`). 파일은 파비콘을 그대로
 * 씁니다(`favicon.svg`). 배경으로 부르는 이유는 다섯 페이지가 저마다 머리글을
 * 들고 있어서입니다 — CSS 한 줄이면 다섯 장이 함께 바뀝니다.
 *
 * 틴트 타일은 두르지 않습니다. 파비콘은 브라우저 탭의 회색 위에 놓이니 자기
 * 바탕이 필요하지만, 여기는 이미 한지 바탕이라 타일을 얹으면 종이 위에 종이가
 * 한 겹 더 앉습니다. 획만 남기는 편이 머리글이 가벼워집니다. */
.site-header .wordmark::before {
  content: '';
  flex: none;
  /* 2026-09-09 사용자: "고리가 아주 매력적인데 조금만 더 크게". 26 → 34.
   * 이름(25px)보다 커지지만 그게 맞습니다 — 고리가 이 브랜드의 그림이고
   * 글자는 그 옆에 섭니다. 더 키우면 머리글 높이가 늘어 본문이 밀립니다. */
  width: 34px;
  height: 34px;
  background: url('/favicon.svg') center / contain no-repeat;
}

/* 이름을 키우고 마크를 달면서 메뉴도 한 단 내렸습니다(14.5 → 13). 셋이 같은
 * 무게로 서면 머리글에서 무엇이 먼저인지 보이지 않고, 좁은 화면에서는 세 항목이
 * 이름을 밀어냅니다. */
.site-header nav {
  display: flex;
  gap: var(--space-lg);
  font-size: 13px;
  color: var(--text-muted);
}

.site-header nav a {
  text-decoration: none;
}

.site-header nav a:hover {
  color: var(--text);
}

/* ── 카드 ───────────────────────────────────────────────────────────
 * 테두리도 그림자도 거의 없습니다. 한지 바탕 위의 밝은 면은 명도 차이만으로 이미
 * 카드로 섭니다. 선까지 그으면 한 화면에 테두리가 3겹이 되고(카드 → 구분선 →
 * 안쪽 칸) 정보가 적어도 조잡해집니다. */

.card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-xl) var(--space-xxl);
}

/* ── 버튼 ───────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: 16px;
  padding: 12px var(--space-xl);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-primary {
  background: var(--ink);
  color: var(--text-on-ink);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-raised);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}

.btn-secondary:hover {
  border-color: var(--accent-border);
  background: var(--accent-tint);
}

/* 출시 전 상태 표시 */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-border);
  color: var(--n-600);
  font-size: 13px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

.pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── 푸터 ───────────────────────────────────────────────────────── */

/* 푸터는 톤을 한 단 낮춥니다. 본문이 끝났다는 것을 선 하나로만 알리면, 사업자
 * 정보처럼 글자가 작고 줄이 많은 덩어리가 본문의 마지막 문단처럼 읽힙니다. */
.site-footer {
  margin-top: 72px;
  padding-block: var(--space-xxl) 44px;
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 14px;
}

.site-footer .wrap {
  display: grid;
  gap: var(--space-lg);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  align-items: center;
  justify-content: space-between;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
}

.site-footer nav a { text-decoration: none; }
.site-footer nav a:hover { color: var(--text); text-decoration: underline; }

/* 개인정보처리방침은 법정 고지라 다른 링크보다 눈에 띄게 둡니다 — 국내 사이트의
 * 관례이고, 스토어 심사자가 찾는 링크이기도 합니다. */
.site-footer nav a.strong { color: var(--ink-soft); font-weight: 600; }

/* ── 사업자 정보 ────────────────────────────────────────────────────
 * 전자상거래법이 요구하는 표시 사항입니다. 값이 아직 없는 항목은 아예 적지
 * 않습니다 — 비워 둔 자리를 남기는 것보다 없는 편이 낫고, 틀린 값을 임시로
 * 채워 두면 그대로 굳습니다. 값이 생기면 `<li>`를 늘리면 됩니다. */
.biz {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-md);
  font-size: 13px;
  color: var(--text-faint);
  line-height: 1.6;
}

.biz li { display: flex; gap: 5px; }
.biz b { font-weight: 600; color: var(--text-muted); }
.biz a { color: inherit; }

.copyright {
  font-size: 13px;
  color: var(--text-faint);
}

/* ── 본문 문서(개인정보처리방침·문의) ───────────────────────────── */

.doc {
  padding-block: var(--space-xl) 0;
}

.doc h1 {
  font-size: clamp(26px, 5vw, 32px);
  margin-bottom: var(--space-xs);
}

.doc .meta {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: var(--space-xxl);
}

.doc .lead {
  margin-bottom: var(--space-xxl);
}

.doc section {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-xl) var(--space-xxl);
  margin-bottom: var(--space-md);
}

.doc section h2 {
  font-size: 18px;
  margin-bottom: var(--space-md);
}

.doc section h3 {
  font-size: 15.5px;
  margin: var(--space-lg) 0 var(--space-xs);
  color: var(--ink-soft);
}

.doc p {
  margin-bottom: var(--space-sm);
}

.doc ul {
  padding-left: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.doc li {
  margin-bottom: var(--space-xs);
}

.doc li::marker {
  color: var(--accent);
}

/* 방침의 표 — 개인정보 국외 이전 고지(2026-08-19). 법이 요구하는 항목이 다섯이라
 * 줄글로 적으면 무엇이 무엇에 대응하는지 읽히지 않습니다.
 *
 * 폭이 좁은 화면에서는 표만 옆으로 넘깁니다. 표를 줄이면 글자가 뭉개지고,
 * 페이지 전체가 가로로 밀리면 본문을 읽을 수가 없습니다. */
.doc .table-scroll {
  overflow-x: auto;
  margin-bottom: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.doc table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  font-size: 14px;
}

.doc thead th {
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-sunken);
  white-space: nowrap;
}

.doc th,
.doc td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  vertical-align: top;
}

.doc tbody tr:last-child th,
.doc tbody tr:last-child td {
  border-bottom: 0;
}

.doc section > *:last-child {
  margin-bottom: 0;
}

@media (max-width: 560px) {
  .card,
  .doc section {
    padding: var(--space-lg) var(--space-xl);
  }
}

/* ── 앱 안에서 열릴 때 ────────────────────────────────────────────────
 * 사주학개론 앱은 공지사항·개인정보처리방침·이용약관·고객센터를 자기 사본 없이 이
 * 페이지들로 보여 줍니다(`apps/mobile/src/lib/site.ts`). 그때 주소에 `?embed=1`이 붙고, 앱이 이미 제목과
 * 뒤로가기를 그리고 있으므로 사이트의 머리글과 푸터는 감춥니다 — 앱 화면 안에
 * 홈페이지 한 장이 통째로 들어앉으면 화면에 머리가 둘이 됩니다.
 *
 * 감추는 일은 이 클래스가 하고, 클래스는 각 페이지의 짧은 스크립트가 붙입니다.
 * 스크립트가 막혀도 페이지는 그냥 평소대로 보일 뿐이라 깨지지 않습니다. */
.embedded .site-header,
.embedded .site-footer {
  display: none;
}

/* 앱 화면은 이미 위아래 여백을 갖고 있어, 문서가 자기 여백을 또 얹으면 첫 줄이
 * 화면 한참 아래에서 시작합니다. */
.embedded .doc {
  padding-top: var(--space-sm);
}

/* ── 접히는 항목 ────────────────────────────────────────────────────
 * 공지사항과 자주 묻는 질문은 제목만 세우고 본문을 접습니다. 목록이 길어지면 무엇이 있는지부터 한눈에 보여야 하고, 앱이 이 페이지를
 * 웹뷰로 그리는 지금은 화면이 좁아 더 그렇습니다.
 *
 * `<details>`를 씁니다 — 자바스크립트가 필요 없어서, `public/`에 빌드 단계를 두지
 * 않는다는 원칙과 어긋나지 않습니다. 스크립트가 막힌 환경에서도 열립니다. */

.doc details {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg) var(--space-xxl);
  margin-bottom: var(--space-md);
}

.doc details > summary {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  cursor: pointer;
  /* 기본 삼각형을 지웁니다. 브라우저마다 모양이 달라 우리 화살표로 통일합니다. */
  list-style: none;
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -0.02em;
}

.doc details > summary::-webkit-details-marker {
  display: none;
}

/* 오른쪽 끝의 홑화살표. 두 변만 남긴 사각형을 돌린 것이라 아이콘 파일이 필요
 * 없고, 굵기는 --stroke 를 따릅니다. */
.doc details > summary::after {
  content: '';
  flex: none;
  margin-left: auto;
  width: 8px;
  height: 8px;
  /* `--stroke`는 단위 없이 둔 숫자라(1.8) 그대로 쓰면 border가 무효가 됩니다.
     px를 곱해 씁니다. */
  border-right: calc(var(--stroke) * 1px) solid var(--text-faint);
  border-bottom: calc(var(--stroke) * 1px) solid var(--text-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
}

.doc details[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.doc details > summary:hover::after {
  border-color: var(--accent);
}

/* 접힌 것이 열릴 때 제목과 본문이 붙지 않도록. */
.doc details[open] > summary {
  margin-bottom: var(--space-md);
}

.doc details > *:last-child {
  margin-bottom: 0;
}

/* 제목 옆의 날짜. 제목보다 뒤로 물러나되 같은 줄에 섭니다. */
.doc .notice-date {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  /* 글자라 칠 값(--accent)이 아니라 --accent-ink 입니다. 종이 위 대비 규칙 */
  color: var(--accent-ink);
  flex: none;
}

@media (max-width: 560px) {
  .doc details { padding: var(--space-md) var(--space-xl); }
  .doc details > summary { font-size: 16px; gap: var(--space-sm); }
}

/* 한지 바탕은 이 사이트의 정체라, 기기가 어둡게 설정돼 있어도 배경을 넘기지
 * 않습니다. 앱도 낮 판 전용입니다 — 밤 팔레트(theme.ts 의 N)는 관계 지도 한 화면에만
 * 남아 있고 그건 읽는 화면이 아니라 보는 화면입니다(DESIGN §8-19).
 * 앱 전체에 다크가 생기면 그 램프를 그대로 여기 옮기면 됩니다. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
  }
}