/*
 * haru 정적 안내 페이지 공통 스타일.
 *
 * 색은 앱의 디자인 토큰(apps/mobile/lib/core/design_system/tokens.dart)에서 그대로 가져온다 —
 * 브랜드 코랄 #E8735A, 따뜻한 오프화이트 배경, 라이트/다크 두 벌. 앱에서 링크를 눌러 들어온
 * 사용자가 같은 색을 보게 하는 것이 목적이므로, 여기 값을 바꾸기 전에 그 파일을 먼저 본다.
 *
 * 네 페이지가 한 파일을 공유한다. 같은 블록을 페이지마다 <style>로 복사해 두면 한 곳만 고치는
 * 사고가 반드시 나므로 파일 하나로 묶었다(Cloudflare Pages는 정적 자산을 그대로 서빙한다).
 *
 * JavaScript는 쓰지 않는다. 약관·개인정보·계정 삭제는 스크립트 없이도 완전히 읽혀야 하고,
 * _headers의 CSP가 script-src를 'none'으로 잠근다.
 */

:root {
  color-scheme: light dark;

  --bg: #fff9f6;
  --card: #ffffff;
  --surface-alt: #fdeee8;
  --outline: #f1e3dc;
  --text-strong: #2b2b2b;
  --text-weak: #8a8079;
  --primary: #e8735a;
  --primary-dark: #d65a42;
  --primary-soft: rgba(232, 115, 90, 0.14);
  --accent-text: #a65e12;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17120f;
    --card: #221c18;
    --surface-alt: #2a211c;
    --outline: #3a2f29;
    --text-strong: #f4ece8;
    --text-weak: #b6a9a1;
    --primary: #f08a72;
    --primary-dark: #e8735a;
    --primary-soft: rgba(232, 115, 90, 0.2);
    --accent-text: #eea23c;
  }
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text-strong);
  font-family: "Noto Sans KR", system-ui, -apple-system, "Apple SD Gothic Neo",
    "Malgun Gothic", sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  /* 한글은 단어 중간에서 끊기면 읽기 나빠진다 — 어절 단위로 접는다. */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

/* 머리 — 모든 페이지가 같은 자리에 같은 크기로 둔다. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-strong);
  text-decoration: none;
}

.brand .dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

h1 {
  margin: 0 0 0.5rem;
  font-size: 1.7rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

h2 {
  margin: 2.5rem 0 0.5rem;
  font-size: 1.2rem;
  line-height: 1.45;
}

h3 {
  margin: 1.75rem 0 0.25rem;
  font-size: 1.02rem;
}

p,
li {
  margin: 0.5rem 0;
}

ul,
ol {
  padding-left: 1.2rem;
}

a {
  color: var(--primary-dark);
  text-underline-offset: 0.2em;
}

@media (prefers-color-scheme: dark) {
  a {
    color: var(--primary);
  }
}

strong {
  font-weight: 700;
}

.lead {
  color: var(--text-weak);
  font-size: 1.02rem;
}

.meta {
  margin: 0.75rem 0 0;
  color: var(--text-weak);
  font-size: 0.88rem;
}

/* 법률 검토 전 초안 배너. 눈에 띄지 않으면 배너가 아니다. */
.draft {
  margin: 1.5rem 0 2rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--primary);
  border-left-width: 4px;
  border-radius: 0.9rem;
  background: var(--primary-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}

.draft b {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--primary-dark);
}

@media (prefers-color-scheme: dark) {
  .draft b {
    color: var(--primary);
  }
}

/* 자리표시자(support@oksbridge.com 등). 치환하지 않고 배포하면 바로 보이게 표시한다. */
.ph {
  padding: 0 0.2em;
  border-radius: 0.3rem;
  background: var(--surface-alt);
  color: var(--accent-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  white-space: nowrap;
}

.card {
  margin: 1.25rem 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--outline);
  border-radius: 1.1rem;
  background: var(--card);
}

.note {
  margin-top: 2.5rem;
  padding: 0.85rem 1.1rem;
  border-left: 3px solid var(--outline);
  color: var(--text-weak);
  font-size: 0.9rem;
}

/* 링크 목록(랜딩의 약관·개인정보·문의). 터치 영역을 앱과 같은 48px 이상으로 둔다. */
.links {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.links li {
  margin: 0;
}

.links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding: 0.85rem 1.1rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--outline);
  border-radius: 1.1rem;
  background: var(--card);
  color: var(--text-strong);
  font-weight: 500;
  text-decoration: none;
}

.links a:hover,
.links a:focus-visible {
  border-color: var(--primary);
}

.links .arrow {
  color: var(--primary);
  font-weight: 700;
}

/* 표는 좁은 화면에서 가로로만 스크롤한다 — 본문이 옆으로 밀리지 않게 한다. */
.table-scroll {
  overflow-x: auto;
  margin: 1rem 0;
  border: 1px solid var(--outline);
  border-radius: 1.1rem;
  background: var(--card);
}

table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: 0.92rem;
}

th,
td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--outline);
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--surface-alt);
  font-weight: 700;
  white-space: nowrap;
}

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

footer {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--outline);
  color: var(--text-weak);
  font-size: 0.88rem;
}

footer a {
  margin-right: 0.9rem;
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}