/* DrawTown 랜딩 — 세 페이지(`/`, `/privacy`, `/terms`)가 공유하는 바탕.
 *
 * **왜 파일로 뺐나** — 페이지가 하나였을 때는 `index.html` 안에 인라인으로
 * 두는 것이 제일 단순했다. 셋이 되면 그 단순함이 뒤집힌다: 토큰을 세 벌
 * 두면 색이 갈리고, 갈린 것을 아무도 못 알아챈다(고친 사람은 자기가 고친
 * 페이지만 본다).
 *
 * 값은 전부 `lib/theme/app_colors.dart` 에서 옮긴 것이다. 앱을 받은 사람이
 * 이 페이지를 먼저 보므로 종이색·잉크색이 이어져야 한다. 주석의 이름은 그
 * 파일의 토큰 이름이고, **색을 고칠 일이 생기면 저쪽이 정본이다.**
 */

:root {
  --paper:        #F6F4E3; /* surfaceTertiary — 페이지 바탕 */
  --paper-warm:   #FEF6D8; /* surfaceBrandSecondary */
  --card:         #FFFFFF; /* surfaceCardPaper */
  --cream:        #F5F3E0; /* surfaceCard */
  --brand:        #F9D46D; /* surfacePrimary — 주 버튼 */
  --brand-press:  #E6B94F; /* actionPrimaryPressed */
  --ink:          #18181B; /* borderStrong · grey900 */
  --ink-warm:     #5C4F3A; /* contentPrimary — 본문 잉크 */
  --ink-soft:     #52525B; /* grey600 */
  --ink-mute:     #71717A; /* grey500 */
  --line:         #E0D2B4; /* borderDefault */
  --brown:        #6B491E; /* textBrand */

  --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
          "Pretendard", "Noto Sans KR", system-ui, sans-serif;

  /* 하드 드롭섀도우 — SketchDecoration 의 shadowOffset(2,2) 을 웹에서 크게 쓴
     것. 손으로 오려 붙인 종이처럼 보이게 하는 유일한 장치라 blur 를 절대 넣지
     않는다. */
  --lift:   0 4px 0 var(--ink);
  --lift-l: 0 6px 0 var(--ink);
}

* { box-sizing: border-box; }
html { color-scheme: light; }

body {
  margin: 0;
  /* 페이지가 짧아서(히어로 + 푸터) 화면이 크면 푸터가 허공에 뜬다 —
     푸터를 아래로 밀어 붙인다(`.foot { margin-top: auto }`). */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink-warm);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;

  /* 한국어는 기본값(normal)에서 **글자 아무 데서나** 줄이 끊긴다 —
     「광장 한가/운데」처럼 어절이 쪼개진다. keep-all 이 어절 경계로 묶고,
     그래도 한 어절이 칸보다 길면(긴 URL·영문 단어) break-word 가 받는다.
     둘이 같이 있어야 한다: keep-all 만 두면 좁은 칸에서 넘친다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 종이 결 — 마을 씬 바닥(game/paper_texture.png)을 그대로 깐다. 원본이 거의
   흰 노이즈라 multiply 로 얹어야 크림 바탕이 살아남는다. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url('/assets/paper.webp') repeat;
  background-size: 320px;
  mix-blend-mode: multiply;
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

img { max-width: 100%; }
a { color: var(--brown); }

:focus-visible { outline: 3px solid var(--brown); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ── 푸터 ────────────────────────────────────────────────────────────────── */
.foot {
  margin-top: auto;               /* 짧은 페이지에서 아래로 붙는다 */
  padding: 34px 0 calc(38px + env(safe-area-inset-bottom));
  border-top: 2px dashed var(--line);
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-mute);
  text-align: center;
}
/* 문서 링크(개인정보처리방침·이용약관)는 **알약 버튼이 아니라 텍스트**다
   (2026-09-15 오너 요청). 푸터에서 그만한 덩어리일 필요가 없고, 나머지 푸터
   링크와 같은 줄에 서는 것이 더 조용하다 — `.pill` 은 스토어 버튼 것으로만
   남는다. */

.foot__links { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin-bottom: 10px; }
.foot__links a { font-weight: 700; text-decoration: none; }
.foot__links a:hover { text-decoration: underline; }
/* 지금 보고 있는 문서 — 자기 자신으로 가는 링크는 「여기 있다」는 표시로 바꾼다.
   `aria-current="page"` 가 보조기술에 같은 사실을 말하고, 눌러도 아무 일도
   안 일어나는 링크가 안 남는다. */
.foot__links a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  pointer-events: none;
}
.foot p { margin: 0; }
.foot__fine { max-width: 44em; margin: 10px auto 0 !important; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── 문서 페이지 (/privacy · /terms) ─────────────────────────────────────
   본문이 글뿐인 페이지 둘이 공유한다. 랜딩과 같은 종이·잉크를 쓰되 마을 띠
   같은 장식은 없다 — 여기 오는 사람은 읽으러 온 것이다. */
.doc__top {
  padding: clamp(24px, 5vw, 44px) 0 0;
  text-align: center;
}
.doc__top a { display: inline-block; }
.doc__mark { width: clamp(132px, 26vw, 176px); height: auto; display: block; }

.doc {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 44px) 20px clamp(48px, 8vw, 72px);
}
.doc h1 {
  margin: 0 0 6px;
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--ink);
}
.doc__meta { margin: 0 0 clamp(24px, 4vw, 34px); font-size: 13px; color: var(--ink-mute); }

/* 본문 종이 — 카드 한 장 위에 글이 앉는다. */
.doc__body {
  padding: clamp(22px, 4vw, 34px) clamp(18px, 4vw, 32px);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--lift);
  color: var(--ink-warm);
  font-size: 15.5px;
  line-height: 1.8;
}
.doc__body h2 {
  margin: 28px 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}
.doc__body h2:first-child { margin-top: 0; }
.doc__body h3 {
  margin: 20px 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.doc__body p, .doc__body ul, .doc__body ol { margin: 0 0 14px; }
.doc__body ul, .doc__body ol { padding-left: 1.2em; }
.doc__body li { margin: 0 0 6px; }
.doc__body a { text-underline-offset: 2px; }

/* 「한눈에 보기」 같은 강조 상자. **하드 그림자를 안 얹는다** — 이미 그림자를
   든 `.doc__body` 카드 **안**이라, 안쪽에 또 그리면 종이 두 장이 겹친 게
   아니라 테두리가 두꺼워진 것으로 읽힌다(걷어낸 `.doc__todo` 도 같은 이유로
   그림자가 없었다). 대신 바탕색으로 갈라 준다. */
.doc__body .card {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: var(--paper-warm);
  border: 2px solid var(--ink);
  border-radius: 14px;
}

/* 목차 — 항목이 15~18개라 한 줄로 세우면 본문 첫 문장이 화면에서 밀려난다.
   좁은 화면에서는 단을 하나로 접는다. */
.doc__body .toc {
  margin: 0 0 20px;
  font-size: 14px;
}
.doc__body .toc ol {
  margin: 0;
  padding-left: 1.6em;
  columns: 2;
  column-gap: 24px;
}
@media (max-width: 520px) {
  .doc__body .toc ol { columns: 1; }
}

/* 표는 **자기 스크롤 상자를 끼고** 있다 — 3열 표에 머리글이 `nowrap` 이라
   좁은 화면에서 본문 폭을 넘는데, 그때 페이지가 가로로 흔들리면 안 된다.
   테두리·라운드는 상자가 든다: 표 자신에 `overflow: hidden` 을 걸어 모서리를
   깎는 수법은 브라우저마다 갈리고, 스크롤하면 테두리가 같이 밀려 나간다. */
.doc__body .table-wrap {
  margin: 0 0 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 2px solid var(--ink);
  border-radius: 12px;
}
.doc__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.doc__body th, .doc__body td {
  padding: 9px 11px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.doc__body th {
  background: var(--cream);
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}
.doc__body tr:last-child td { border-bottom: 0; }

/* 곁말 — 본문보다 한 톤 옅게. */
.doc__body .note { font-size: 13.5px; color: var(--ink-soft); }

/* 마지막 요소의 아래 여백만 없앤다. **이 줄은 이 블록 맨 끝에 있어야 한다** —
   위 규칙들과 특이도가 같아서(클래스 둘) 순서가 승자를 정하고, 앞에 두면
   본문 끝 표·카드가 카드 아래에 여백을 남긴다. */
.doc__body :last-child { margin-bottom: 0; }

.language-links {
  padding: 16px 20px;
  text-align: right;
  font-size: 14px;
}
.language-links a { color: inherit; }
.language-links [aria-current="true"] { font-weight: 700; }