/* 끄덕 웹 — 앱과 같은 아트 디렉션.
 *
 * 값의 출처는 DailyCheckApp/mobile/src/theme.ts입니다(읽기 전용 참조, 그 프로젝트는
 * 건드리지 않습니다). 앱이 토큰 한 파일로 화면 전체를 갈아입듯, 웹도 이 :root 블록만
 * 바꾸면 전체가 따라옵니다.
 *
 * 핵심은 액센트가 아니라 골격입니다. 2026-08-14에 무채색 골격이 꿀 기운의 크림으로
 * 옮겨왔습니다 — "포인트가 아니라 전체가 브랜드색이면 좋겠다". 앰버를 점으로만 찍으면
 * 끄덕처럼 보이지 않고, 종이 자체가 따뜻해야 합니다. 채도는 낮게 유지 — 바탕이 노랗게
 * '칠해진' 것이 아니라 종이가 따뜻한 것으로 읽혀야 합니다.
 *
 * 앱의 메인 컬러 7종(청둥·물빛·연잎·코랄·붓꽃·벚꽃)은 여기 넣지 않습니다. 나중에 다른
 * 색이 필요한 자리가 생겼을 때 쓰려고 남겨둔 것이고, 기본 컬러는 앱과 동일한 꿀뿐입니다.
 */

/* 서체 — 둘 다 SIL OFL 1.1이라 웹 사용에 제약이 없습니다.
 * 제목·이름은 Jua(둥근체), 읽는 글은 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=Jua&display=swap');

:root {
  /* 크림 램프 — 모든 표면·테두리·글자가 여기서 나옵니다 */
  --n-0: #fffefb;
  --n-25: #fdfaf3;
  --n-50: #f9f4e9;
  --n-100: #f1eadb;
  --n-200: #e7ddc9;
  --n-300: #d6c9ad;
  --n-400: #ada387;
  --n-500: #7d7259;
  --n-600: #5c533e;
  --n-700: #3f382a;
  --n-900: #1d180e;

  --bg: var(--n-50);
  --surface: var(--n-0);
  --surface-sunken: var(--n-100);

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

  --text: var(--n-900);
  --text-muted: var(--n-500);
  --text-faint: var(--n-400);
  --text-on-ink: var(--n-0);

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

  /* 꿀 앰버 — 브랜드색이자 유일한 액센트. 오리 부리의 색입니다.
   * 주황으로 기운 노랑을 유지할 것: 포스트잇의 카나리아 옐로우와 뚜렷이 달라야 하고,
   * 종이 톤과 함께 쓰는 만큼 이 거리가 특히 중요합니다. */
  --accent: #eea93f;
  --accent-tint: #f9ead0;
  --accent-border: #e9cf9a;

  --danger: #b91c1c;

  /* 2026-08-14에 한 단계씩 올린 값(6/8/12/16 → 8/11/16/20). "조금만 더 동글게" */
  --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(92, 83, 62, 0.08);
  --shadow-raised: 0 4px 14px rgba(92, 83, 62, 0.1);

  --font-display: 'Jua', 'Pretendard Variable', sans-serif;
  --font-body: 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  /* 앱의 모든 선은 같은 굵기입니다 — 아이콘 획, 체크박스, 손잡이. 굵기가 섞이면
   * 아이콘 한 벌이 세 벌처럼 보입니다. */
  --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);
  /* 앱은 14.5dp지만 웹은 읽는 거리가 멀고 긴 글이 본체라 16px로 올렸습니다.
   * 위계(제목-본문-보조)의 비율은 앱과 같게 유지합니다. */
  font-size: 16px;
  line-height: 1.7;
  /* 한글은 단어 중간에서 끊지 않습니다 */
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* ── 타이포 ─────────────────────────────────────────────────────────
 * Jua는 단일 굵기(400)인데 획이 굵어 그 자체로 볼드처럼 읽힙니다. 그래서
 * font-weight를 얹지 않습니다 — 합성 볼드는 획을 뭉갭니다.
 * Jua는 같은 크기에서 Pretendard보다 작아 보여 크기를 조금씩 얹었습니다. */

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  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-xl);
}

.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 nav {
  display: flex;
  gap: var(--space-lg);
  font-size: 14.5px;
  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) 56px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 14px;
}

.site-footer .wrap {
  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-lg);
}

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

.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);
}

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

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

/* 크림 종이는 이 사이트의 정체라, 기기가 어둡게 설정돼 있어도 배경을 넘기지
 * 않습니다. 앱도 지금은 라이트 전용입니다(다크 팔레트 값이 아직 없음).
 * 앱에 다크가 생기면 그 램프를 그대로 여기 옮기면 됩니다. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
  }
}