/* Inbound — 법적 페이지.
 *
 * ★**값은 전부 앱에서 가져온다** (`lib/ui/theme.dart`). 예쁘게 만들려고
 *  새 색을 고르면 그 순간 「앱과 다른 것」이 된다 — 이 저장소가 스토어
 *  문구에서 이미 겪은 실패다. 여기 있는 hex 는 하나도 새로 지은 게 없다.
 *
 *  Tone.light / Tone.dark 의 bg·surface·bubble·text·dim·accent·line,
 *  AppText 의 크기·굵기·자간·행간, Gap 의 여백 척도가 그대로 옮겨져 있다.
 */

@font-face {
  font-family: 'Pretendard';
  /* 가변 축 45~930 하나로 400/600/700 을 다 쓴다. 쓰는 글자만 남긴
     86KB 서브셋이다 — `site/build_font.py`. 제3자 CDN 을 쓰지 않는
     이유는 이 페이지가 하는 말 그대로다. */
  /* `woff2-variations` 는 구형 문법이라 안 받는 브라우저가 있다.
     지금 브라우저는 전부 평범한 `woff2` 로 가변 축을 읽는다. */
  src: url('pretendard-subset.woff2') format('woff2');
  font-weight: 45 930;
  font-display: swap;
}

:root {
  /* Tone.light */
  --bg: #efede7;          /* 차가운 회색이 아니라 따뜻한 본 */
  --surface: #fffdf9;     /* 배경 위에 확실히 떠 있는 종이 */
  --bubble: #e6e2da;
  --fg: #1b1917;
  --dim: #6b665f;         /* 본 배경에서 5.0:1 */
  --preview: #56524d;
  --accent: #2e2c29;      /* 거의 무채색에 가까운 잉크 */
  --on-accent: #fffdf9;
  --line: rgba(0, 0, 0, .08);   /* 그린 선이 아니라 비치는 선 */
  --unread: #2e6b57;
  --grain: .028;

  --edge: 20px;
  --radius: 20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Tone.dark */
    --bg: #121110;
    --surface: #211f1b;
    --bubble: #2d2a25;
    --fg: #f4f1eb;
    --dim: #9b958b;
    --preview: #beb8ae;
    --accent: #eae5dc;
    --on-accent: #1b1917;
    --line: rgba(255, 255, 255, .10);  /* 다크에서는 흰빛이 비친다 */
    --unread: #63a783;
    --grain: .05;   /* 어두운 면이 '칠한 색'으로 보이는 게 더 심하다 */
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  /* 서체는 Pretendard 하나. 대체 서체는 글리프가 빠졌을 때
     글자 단위로 받아준다 — 서브셋을 다시 안 만들어도 안 깨진다. */
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Apple SD Gothic Neo', 'Malgun Gothic', Roboto, sans-serif;
  font-size: 15.5px;      /* AppText.body */
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── 재질 ──────────────────────────────────────────────
 * 앱은 프래그먼트 셰이더로 아주 얕은 입자를 한 겹 얹는다
 * (`lib/ui/grain.dart`). 단색으로 칠한 면은 '칠한 색'으로 보이고,
 * 어두운 화면에서 특히 심하다. **검정 알파만 쌓는다** — 색을 안
 * 칠하므로 팔레트를 안 건드린다. **눈에 띄면 실패다.**
 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.wrap {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--edge);   /* Gap.edge */
}

/* ── 머리·바닥 바 ─────────────────────────────────────
 * 브랜드만 둔다. 예전에는 머리 한 줄에 **언어 전환과 법적 링크가
 * 나란히** 있었는데, 성격이 다른 둘이 같은 칩으로 보여서 「Privacy」가
 * 언어처럼 읽혔다. 그리고 첫 화면은 그 링크가 본문에 또 있어 **같은
 * 링크가 위아래 두 번** 나왔다. 법적 링크는 바닥에만 둔다.
 */

.bar {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.bar-inner {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding-top: 0;
  padding-bottom: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16.5px;                  /* AppText.name */
  font-weight: 600;
  letter-spacing: -.25px;
  color: var(--fg);
  text-decoration: none;
}

.brand img { width: 28px; height: 28px; border-radius: 7px; display: block; }

/* ── 본문 ────────────────────────────────────────────── */

h1 {
  font-size: 34px;                    /* AppText.display */
  font-weight: 680;
  line-height: 1.18;
  letter-spacing: -.9px;
  margin: 0 0 6px;
}

h2 {
  font-size: 21px;                    /* AppText.displaySm */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.5px;
  margin: 40px 0 10px;                /* Gap.xxl */
}

p, li { margin: 0 0 12px; }
strong { font-weight: 600; }

.meta {
  font-size: 12.5px;                  /* AppText.label */
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 28px;                /* Gap.xl */
}

.dim { color: var(--dim); }

ul { padding-left: 20px; margin: 0 0 12px; }
li { margin: 0 0 6px; }

a { color: var(--fg); text-underline-offset: 3px; text-decoration-color: var(--line); }
a:hover { text-decoration-color: currentColor; }

/* 여백은 한 척도로만 준다. 예전에는 `.doc` 이 위쪽 48px 을 주고
   `hr` 은 아래쪽 여백이 **0** 이어서, 영어 절은 헤더에서 48px 떨어져
   시작하는데 한국어 절은 구분선에 그대로 붙었다. 같은 모양의 두 절이
   위쪽만 다르게 생겼던 것이다.

   그래서 **절마다** 위 여백을 주고, 구분선은 위쪽만 벌린다. 두 절이
   자기 위에 똑같은 공간을 갖는다. */
.doc { padding-bottom: 8px; }

.doc > section { padding-top: 52px; }

/* 언어 전환은 **그 문서의 제목 위**에 둔다. 문서의 언어를 바꾸는
   장치라, 다른 문서로 가는 링크와 같은 줄에 두면 안 된다.
   버튼은 알약이고, 칩은 테두리 없이 면으로만 구분한다. */
.langbar {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bubble);
  border-radius: 999px;
  margin-bottom: 24px;
}

.langbar a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.1px;
  text-decoration: none;
  color: var(--dim);
  border-radius: 999px;
  padding: 5px 14px;
}

.langbar a[aria-current] {
  background: var(--surface);
  color: var(--fg);
}

/* ── 카드 ──────────────────────────────────────────────
 * `Tone.card()` 하나로만 그린다 — 면의 명도 차이 + 헤어라인 한 줄.
 * **그림자는 쓰지 않는다.** 문단마다 두르지도 않는다 — 화면이 상자
 * 격자가 되고 서식처럼 보인다. 「읽고 넘어가면 안 되는 것」에만 쓴다.
 */
.note {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--edge);
  margin: 20px 0 28px;
}

.note p:last-child { margin-bottom: 0; }

/* 언어가 갈리는 자리. 선은 그리지 않고 비친다.
   아래쪽 여백은 0 이다 — 다음 절이 자기 몫(52px)을 갖고 있다. */
hr { border: 0; border-top: 1px solid var(--line); margin: 72px 0 0; }

/* ── 바닥 ────────────────────────────────────────────── */

footer.bar { border-bottom: 0; border-top: 1px solid var(--line); margin-top: 72px; }

.foot { padding-top: 32px; padding-bottom: 56px; }

.foot-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.foot-links a {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.1px;
  text-decoration: none;
  color: var(--fg);
}

.foot-links a:hover { color: var(--dim); }

.foot-note {
  font-size: 13.5px;                  /* AppText.caption */
  line-height: 1.45;
  color: var(--dim);
  margin: 0 0 6px;
  max-width: 54ch;
}

.foot-note a { color: var(--dim); }

/* ── 첫 화면 ──────────────────────────────────────────
 * 글과 폰이 **같은 칸 안에** 있어야 한다. 예전에는 글은 680px 칼럼에,
 * 폰은 화면 전체 기준으로 가운데 있어서 둘이 따로 놀았다.
 */

.hero {
  overflow: hidden;
  padding-top: 80px;
}

/* 첫 화면에서는 폰이 바닥선에 닿아야 한다 — 그 사이를 벌리면
   잘린 단면이 허공에 뜬다. */
.hero + footer.bar { margin-top: 0; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: end;
  width: 100%;
}

.hero-copy { padding-bottom: 92px; }

.hero h1 { margin-bottom: 16px; }

.hero .sub strong { color: var(--fg); font-weight: 600; }

.hero .sub {
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--preview);
  max-width: 42ch;
  margin: 0;
}

/* 폰이 아래에서 올라와 바닥에서 잘린다 — 화면이 이어진다는 느낌.
   그림은 앱이 실제로 렌더한 것이다. */
.phone {
  width: 300px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 42px 42px 0 0;
  padding: 9px 9px 0;
  background: var(--surface);
  /* 바닥을 **히어로 바닥에 딱 맞춘다**. 잘린 단면이 그대로 바닥
     구분선이 되어 화면이 아래로 이어지는 것처럼 읽힌다. 음수 여백으로
     밀어내는 방법도 있지만 그건 브라우저마다 잘리는 양이 흔들린다. */
  margin-bottom: 0;
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 34px 34px 0 0;
}

/* ── 좁은 화면 ────────────────────────────────────────── */

@media (max-width: 520px) {
  :root { --edge: 16px; }
  .hero { padding-top: 40px; }
  .hero-grid { grid-template-columns: 1fr; gap: 0; justify-items: center; }
  .hero-copy { padding-bottom: 36px; }
  .hero h1, .hero .sub { text-align: center; }
  .hero .sub { margin: 0 auto; }
  .doc > section { padding-top: 36px; }
  h1 { font-size: 28px; letter-spacing: -.7px; }
  h2 { font-size: 19px; margin-top: 32px; }
  .hero .sub { font-size: 15.5px; }
  .phone { width: 248px; }
  .hero-copy { padding-bottom: 32px; }
  footer.bar { margin-top: 56px; }
}

/* 사업자 정보 — 이름표와 값이 짝을 이룬다.
 *
 * ★**좁은 화면에서는 두 칸을 포기한다.** 「통신판매업신고번호」처럼 긴
 *  이름표가 붙는 자리라, 폭을 고정하면 이름표가 줄바꿈되어 값과 어긋난다.
 *  520px 아래에서는 이름표를 값 위로 올린다.
 * ★새 색을 고르지 않는다 — 이름표는 `--dim`, 값은 `--fg` 로 본문과 같다.
 */
dl.biz {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  margin: 14px 0 0;
}
dl.biz dt {
  color: var(--dim);
  font-size: 13.5px;                  /* AppText.caption */
  line-height: 1.5;
}
dl.biz dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
}

@media (max-width: 520px) {
  dl.biz { grid-template-columns: 1fr; gap: 2px; }
  dl.biz dd { margin-bottom: 10px; }
}

/* 움직임을 줄여달라고 한 사람에게는 전환도 없다. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}