/* =====================================================================
   제목용 서체 — 본명조(Noto Serif KR) Medium 500, 굵기 1개
   SIL OFL. 셀프호스팅 (CSP font-src 'self' 유지, 외부 CDN 0건).

   ★ 파일이 둘인 건 크기 때문이 아니라 커버리지 때문이다.
     Google Fonts 의 한글 세리프(나눔명조·고운바탕 등)에는 사주 한자가 한 자도 없다.
     본명조는 한자를 갖고 있어 본체 하나로도 되지만, 한자 61자를 따로 떼면
     첫 로드에서 10KB만 더 받고 preload 는 본체 하나만 걸 수 있다.
   ★ 굵기는 500 하나뿐이다. 리드 인용구에서 더 단단해 보여야 할 때는
     파일을 늘리지 않고 자간(letter-spacing)으로 처리한다.
   ===================================================================== */
@font-face {
  font-family: 'Anchak Display';
  src: url('./fonts/anchak-display.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Anchak Display';
  src: url('./fonts/anchak-display-hanja.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+4E00-9FFF;      /* 사주 한자만 — 안 쓰는 화면에선 안 받는다 */
}

/* =====================================================================
   안착 — 디자인 토큰 (단일 소스)

   "볕이 온다" — 늦은 오후 햇살이 드는 할머니 방.
   화면에 쓰이는 모든 값은 여기서 나온다. 다른 파일에 리터럴을 두지 않는다.

   ★ 되돌리기: index.html 에서 이 파일 <link> 를 빼면 app.css 의 폴백으로 돌아간다.
   ★ 외부 리소스 0건 — 폰트는 /assets/fonts 에 셀프호스팅한다 (CSP font-src 'self').
   ★ 색은 rgb 채널로 둔다. 그래야 테두리·그림자를 새 색을 만들지 않고
     같은 잉크의 투명도로 뽑아 쓸 수 있다 → 색 개수가 안 늘어난다.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. 색 — 12개
      배경 3 (base·paper·raised) · 잉크 3 (strong·body·muted)
      볕 2 (sun-1·sun-2) · 의미 4 (rise·fall·turn·anchak)
   ★ 의미색은 규칙이다: 상승 빨강 / 하락 파랑 / 전환점 회색 / 안착 먹.
     이 넷은 톤 조정 대상이 아니다.
   --------------------------------------------------------------- */
:root {
  --c-bg-base:    255 252 245;   /* 종이 바탕 — 크림에 살구 한 방울 */
  --c-bg-paper:   251 245 234;   /* 살짝 어두운 종이 — 데이터 면 */
  --c-bg-raised:  253 242 227;   /* 볕이 드는 면 — 배지·말풍선 */

  --c-ink-strong:  33  26  17;   /* 제목·강조 */
  --c-ink-body:    60  50  38;   /* 본문 */
  --c-ink-muted:  102  88  68;   /* 보조 정보 */

  --c-sun-1:      168  90  28;   /* 볕 — 강조선·표식 */
  --c-sun-2:      240 164  78;   /* 볕 — 광원·그라디언트 */

  --c-rise:       200  55  74;   /* 상승 (불변) */
  --c-fall:        55  99 182;   /* 하락 (불변) */
  --c-turn:       139 133 120;   /* 전환점 (불변) */
  --c-anchak:      33  26  17;   /* 안착 점선 (불변) */

  /* 쓰기 편한 solid 별칭 — 새 색이 아니라 위 열두 개를 그대로 편다 */
  --bg-base:   rgb(var(--c-bg-base));
  --bg-paper:  rgb(var(--c-bg-paper));
  --bg-raised: rgb(var(--c-bg-raised));
  --ink-strong: rgb(var(--c-ink-strong));
  --ink-body:   rgb(var(--c-ink-body));
  --ink-muted:  rgb(var(--c-ink-muted));
  --sun-1: rgb(var(--c-sun-1));
  --sun-2: rgb(var(--c-sun-2));
  --rise: rgb(var(--c-rise));
  --fall: rgb(var(--c-fall));
  --turn: rgb(var(--c-turn));
  --anchak: rgb(var(--c-anchak));

  /* 선 — 새 색이 아니라 잉크의 투명도다 */
  --line-hair:   rgb(var(--c-ink-muted) / .14);
  --line-solid:  rgb(var(--c-ink-muted) / .26);
  --line-accent: rgb(var(--c-sun-1) / .55);

  /* ---------------------------------------------------------------
     2. 타이포 — 5단계
        display 26 / lead 19 / body 16 / small 14 / caption 13
     ★ 본문 16px, 행간 1.75. 13px 아래로는 어떤 글자도 내려가지 않는다.
     --------------------------------------------------------------- */
  --fs-display: 26px;  --lh-display: 1.42;
  --fs-lead:    19px;  --lh-lead:    1.55;
  --fs-body:    16px;  --lh-body:    1.75;
  --fs-small:   14px;  --lh-small:   1.7;
  --fs-caption: 13px;  --lh-caption: 1.65;

  /* 굵기도 단계다 — 400/700 둘만 쓴다. 800 남발이 위계를 죽였다 */
  --fw-normal: 400;
  --fw-bold:   700;
  /* 제목 서체는 500 한 굵기만 있다. 여기에 700 을 주면 브라우저가 가짜 볼드를 만든다 */
  --fw-display: 500;

  /* 서체
     ★ 제목용은 셀프호스팅 1종 1굵기 (선택 대기 — /assets/fonts).
       폴백에 명조를 강제하지 않는다. 안드로이드에서 억지 명조를 찾다 실패하면
       기기마다 다른 글꼴이 나온다. 그냥 산세리프로 자연스럽게 떨어뜨린다. */
  --font-display: 'Anchak Display', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --font-body: -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;

  /* ---------------------------------------------------------------
     3. 간격 — 4·8·12·16·24·32·48·64
     --------------------------------------------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;

  /* ---------------------------------------------------------------
     4. 라운드 — 2단계
        r-1 작은 것(칩·입력·막대) / r-2 면(카드·말풍선)
     ★ pill(999px)을 없앴다. 알약이 다섯 군데서 반복되면 그게 균질화다.
       원(50%)은 라운드 단계가 아니라 도형이라 오행 아이콘에만 남긴다.
     --------------------------------------------------------------- */
  /* 웹뷰 실측 높이 — src/platform.js 가 채운다 (SPEC §7) */
  --app-vh: 1vh;

  --r-1: 12px;
  --r-2: 22px;

  /* ---------------------------------------------------------------
     5. 그림자 — 2단계, 따뜻한 갈색 저투명도
     --------------------------------------------------------------- */
  --sh-1: 0 1px 3px rgb(var(--c-sun-1) / .07);
  --sh-2: 0 3px 14px rgb(var(--c-sun-1) / .10);

  /* --- app.css 가 아직 쓰는 옛 이름들을 새 토큰으로 잇는다 (리터럴 0개 유지) --- */
  --bg: var(--bg-base);
  --card: var(--bg-base);
  --surface: var(--bg-paper);
  --warm: var(--bg-raised);
  --warm-edge: var(--line-solid);
  --border: var(--line-hair);
  --border-strong: var(--line-solid);
  --divider: var(--line-hair);
  --ink: var(--ink-strong);
  --sub: var(--ink-body);
  --muted: var(--ink-muted);
  --faint: var(--ink-muted);
  --gold: var(--sun-1);
  --deep: var(--ink-strong);
  --up: var(--rise);
  --down: var(--fall);
  --up-bg: rgb(var(--c-rise) / .07);
  --down-bg: rgb(var(--c-fall) / .07);
  --sun: rgb(var(--c-sun-2) / .30);
  --shadow-warm: var(--sh-2);
  --r-xs: var(--r-1);
  --r-sm: var(--r-1);
  --r-md: var(--r-1);
  --r-lg: var(--r-2);
  --serif: var(--font-display);
}

/* =====================================================================
   토큰 적용 — 여기부터는 리터럴 대신 위 토큰만 쓴다
   ===================================================================== */

/* --- 바탕: 한지 질감. 색은 볕 토큰의 투명도로만 만든다 --- */
body {
  background-color: var(--bg-base);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background-image:
    radial-gradient(circle at 18% 12%, rgb(var(--c-sun-1) / .05) 0 1.2px, transparent 1.3px),
    radial-gradient(circle at 67% 43%, rgb(var(--c-sun-1) / .04) 0 1.1px, transparent 1.2px),
    radial-gradient(circle at 41% 77%, rgb(var(--c-sun-1) / .045) 0 1.2px, transparent 1.3px),
    repeating-linear-gradient(90deg, rgb(var(--c-sun-1) / .026) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg, rgb(var(--c-sun-1) / .02) 0 1px, transparent 1px 6px);
}

/* --- 타이포 5단계를 실제 요소에 --- */
.summary-line { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-bold); }
.ask, .brand-name { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: var(--fw-bold); }
.block p.lead-quote, .my-strength { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: var(--fw-bold); }
.block p, .detail p, .half p, .chat-bubble p, .todo-text, .says-body, .pillar-line,
.premium-month p, .summary-note, .chat-choice, .cta,
.answer, .ask-line, .gran-line,
.field > input[type="text"], .turn > input[type="text"] {
  font-size: var(--fs-body); line-height: var(--lh-body);
}
.turning-note, .ask-sub, .greet, .block.foot li, .ctext, .half-label,
.seg-btn, .hp-syl, .me-label, .linkbtn, .more-btn, .cta.small {
  font-size: var(--fs-small); line-height: var(--lh-small);
}
/* ★ 감사 항목 — 10~14px 텍스트 40여 곳을 caption(13px) 바닥 위로 올린다 */
.hint, .chat-note, .my-note, .share-note, .locked-note, .guide-line, .life-tip p,
.fineprint, .block-title, .chart-label, .opt, .err, .pb-level, .pb-hint, .half-tag,
.todo-tag, .lt-tag, .my-chip, .my-chip b, .mb-ko, .mb-num, .hp-info, .hp-chip .hp-hun,
.hp-chip i, .hp-chip b, .brand-umbrella, .brand-slogan, .brand-hanja, .pillar-key,
.locked-remain, .premium-label, .cc-label, .cc-note, .crisis-foot,
.loading-text, .hanja-more, .stamp, .share-hint, .hanja-syl, .my-elem i, .notice {
  font-size: var(--fs-caption); line-height: var(--lh-caption);
}
/* 위 묶음에서 예외로 커야 하는 것들 */
.cc-number { font-size: var(--fs-display); line-height: var(--lh-display); }
.stamp { font-size: var(--fs-lead); }
.crisis-title { font-size: var(--fs-lead); }
.my-elem i { font-size: var(--fs-small); }
.mb-ko { font-size: var(--fs-caption); }

/* 굵기 — 800을 걷어낸다 */
h1, h2, h3, h4, strong, b,
.summary-line, .ask, .brand-name, .my-strength, .block-title, .block p.lead-quote,
.answer, .ask-line, .cta, .chat-choice, .hp-chip b, .stamp, .cc-number, .crisis-title, .todo-tag,
.half-label, .my-chip, .lt-tag, .pillar-key, .mb-ko, .pb-level, .greet {
  font-weight: var(--fw-bold);
}
.summary-note, .turning-note, .hint, .my-note, .share-note, .locked-note,
.block p, .detail p, .half p, .chat-bubble p, .block.foot li {
  font-weight: var(--fw-normal);
}

/* --- 라운드 2단계로 수렴 (pill 제거) --- */
/* ★ 2단계에서 .chat-choice · .life-tip · .more-btn 을 뺐다.
   상자 모양을 걷어냈는데 라운드·그림자가 남아 있으면 카드 윤곽만 흐릿하게 남는다.
   ★ 4단계에서 .chip(고민 카드 그리드)이 없어졌고, .seg-btn 은 .talk 안에서
     라운드를 쓰지 않는다 (밑줄로 고른다). 여기 남은 건 다른 화면 몫이다. */
.seg-btn, .hp-chip, .hp-chip.more, .chart-line, .my-chip,
.mb-track, .mb-fill, .field input[type="text"], .cta, .cta.small, .stamp,
.precision, .notice, .crisis-call {
  border-radius: var(--r-1);
}
/* ★ .graph-wrap 은 3단계에서 뺐다. 그림에 상자를 두르면 아래 ④ 문장과 끊긴다. */
.myeong, .chat-bubble, .bubble, .crisis-card, .pillar-list,
.locked-note, .todo {
  border-radius: var(--r-2);
}
/* 원은 라운드 단계가 아니라 도형이다 — 오행 아이콘에만 남긴다 */
.my-elem i { border-radius: 50%; }

/* --- 그림자 2단계 --- */
.chart-line, .my-chip { box-shadow: var(--sh-1); }
.myeong, .chat-bubble, .bubble { box-shadow: var(--sh-2); }
.crisis-card { box-shadow: none; }        /* 안전 장치는 그대로 둔다 */

/* --- 면 톤 교차: 밝은 종이 / 살짝 어두운 종이 / 볕이 드는 면 --- */
.block.data { background-color: var(--bg-paper); }
.block.data + .block.data { background-color: rgb(var(--c-bg-paper) / .55); }
.block.sun { background-color: var(--bg-raised); }
.myeong, .chat-row.from-me .chat-bubble { background: var(--bg-raised); }

/* --- 볕: 강조선과 광원 --- */
.block p.lead-quote::before {
  background: linear-gradient(180deg, var(--sun-2), rgb(var(--c-sun-1) / .22));
  width: var(--sp-1);
}
.block-title::before {
  border-color: var(--ink-strong);
  background: linear-gradient(45deg, transparent 46%, var(--ink-strong) 46%, var(--ink-strong) 54%, transparent 54%);
}
/* 볕 광원 — 두 곳뿐이다: 안착 시점 카드(③)와 이번 달 섹션(⑤).
   최상단에 있던 광원은 뺐다. 볕은 "언제 드는지"를 말하는 자리에만 있어야
   모티프가 되고, 화면 열자마자 있으면 그냥 배경이 된다. 모양은 app.css. */

/* --- 캐릭터: 리드에서만 크게, 나머지는 작게 --- */
.gran { width: var(--sp-7); height: var(--sp-7); }
.gran.lg { width: var(--sp-8); height: var(--sp-8); }
.chat-row .gran { width: var(--sp-6); height: var(--sp-6); }
.says { gap: var(--sp-3); }
.scene { width: calc(var(--sp-8) * 3); }

/* --- 간격 스케일 적용 --- */
main { padding-left: var(--sp-5); padding-right: var(--sp-5); }
/* 섹션 여백은 성격마다 다르다 — 이야기는 넉넉히 숨 쉬고, 데이터는 촘촘히 붙는다.
   ★ 여백 2종(32/22)뿐이라 모든 섹션이 같은 리듬으로 읽히던 걸 셋으로 갈랐다 (감사 10번) */
.block { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
.block.story { padding-top: var(--sp-7); padding-bottom: var(--sp-6); }
.block.data { padding-top: var(--sp-6); padding-bottom: var(--sp-5); }
.block.sun { padding-top: var(--sp-7); padding-bottom: var(--sp-6); }
.block.foot { padding-top: var(--sp-6); padding-bottom: var(--sp-4); }
.block p { margin: 0 0 var(--sp-3); }
.detail p { margin: 0 0 var(--sp-3); }
.myeong { padding: var(--sp-4); margin: var(--sp-3) 0 0; }
.chat-bubble { padding: var(--sp-3) var(--sp-4); }
.half { padding: var(--sp-4) 0; }
.pillar-list li { padding: var(--sp-4); }

/* 낙관은 상승 빨강 그대로 (색 규칙) */
.stamp { background: rgb(var(--c-rise) / .06); border-color: var(--rise); color: var(--rise); }

/* --- 본명조를 쓰는 자리 (2단계에서 좁혔다) ---
   ★ 규칙 하나: 본명조는 **위로 헌장 여섯 문장**의 활자다. 다른 글에 쓰면 희석된다.
     예전엔 헤드라인·섹션 리드·강약 라벨·제목까지 열여섯 자리가 같은 서체였고,
     그래서 여섯 문장이 "그냥 또 하나의 큰 글씨"로 읽혔다.
   ★ 예외는 글이 아니라 **한자**다. 한자가 들어가는 자리에서 본명조를 빼면
     시스템 폰트로 떨어지는데, 안드로이드 산세리프에는 사주 한자가 없다
     (docs/design-notes.md 1절 — 확인된 사실). 그래서 표식 자리만 남긴다.
   --------------------------------------------------------------- */
.comfort, .block p.comfort,
.brand-name, .brand-hanja, .stamp, .chart-line,
.hp-syl, .hp-chip b, .mb-ko, .my-elem i {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
}
/* 여섯 문장은 SemiBold 처럼 보여야 한다 — 파일을 늘리는 대신 자간을 좁힌다 */
.comfort, .block p.comfort { letter-spacing: -0.01em; }