/**
 * contextBio 공용 디자인 시스템 — 세 서비스가 이 파일 하나를 함께 쓴다.
 *
 * 기준은 PepDesigner 대시보드의 디자인 언어다(밝은 회색 배경 · 흰 패널 · 파란 강조 ·
 * 시스템 산세리프 · 작은 라운드). 회사 사이트와 BioWrit 은 각자 다른 토큰 이름을 쓰고
 * 있었으므로, **이름을 바꾸지 않고** 여기서 같은 값으로 다시 정의한다. 그래서 각 앱의
 * 기존 CSS·인라인 스타일을 고치지 않아도 색이 함께 따라온다.
 *
 * 읽는 순서가 중요하다:
 *   회사 사이트 — 이 파일을 styles.css **앞**에 둔다(구조는 styles.css 가 결정).
 *   하위 서비스 — 각 페이지의 인라인 <style> **뒤**에 붙인다(build_subapp.py 가 주입).
 *     같은 :root 선언은 나중에 온 쪽이 이기므로 토큰만 갈아탄다.
 *
 * BioWrit 의 다크 모드(:root[data-theme="dark"])는 선택자 우선순위가 더 높아 그대로
 * 살아 있다 — 사용자가 켠 테마를 이 파일이 뒤집지 않는다.
 */

:root {
  /* ── 바탕·텍스트 ─────────────────────────────────────────── */
  --bg: #f7f8fa;          /* 페이지 배경 (옅은 회색) */
  --panel: #ffffff;       /* 카드·패널 */
  --ink: #0f1a2e;         /* 본문·제목 (짙은 네이비) */
  --muted: #62738a;       /* 흐린 텍스트 */
  --faint: #a4b3c6;       /* 더 흐린 텍스트 — 모노 라벨(eyebrow) */
  --line: #e2e5ea;        /* 경계선 */

  /* 강조 — 로고가 파랑이므로 브랜드 파랑을 그대로 둔다(링크·포커스·활성).
     참조 디자인의 민트는 어두운 섹션 위에서만 쓴다(밝은 바탕에선 대비가 안 나온다). */
  --accent: #2c7be5;
  --accent-dk: #1a56b8;
  --mint: #7fd1cd;

  /* 짙은 강조면(CTA 밴드·계정 머리말)과 주 버튼은 --ink 를 쓰면 안 된다 —
     --ink 는 '글자색' 이라 어두운 테마에서 밝아지고, 그러면 그 면이 통째로
     하얘지면서 위에 얹힌 흰 글자가 사라진다. 면은 면대로 따로 정한다. */
  --surface-ink: #0f1a2e;   /* 두 테마 모두에서 어두운 면 */
  --on-ink: #ffffff;        /* 그 면 위의 글자 */
  --btn-bg: #0f1a2e;        /* 주 버튼 */
  --btn-bg-hover: #1c2c47;
  --btn-fg: #ffffff;

  --ok: #12876f;
  --fail: #da2424;
  --warn: #b7791f;
  --queued: #a4b3c6;
  --hero1: #0f1a2e;       /* 어두운 섹션 — 그라데이션이 아니라 단색이다 */
  --hero2: #0f1a2e;

  /* 참조 디자인의 각짐: 버튼·칩은 4~5px, 카드는 10px. 그림자는 거의 쓰지 않는다 */
  --radius: 10px;
  --radius-sm: 4px;
  --shadow: 0 1px 2px rgba(15, 26, 46, .04);
  --shadow-lg: 0 4px 16px rgba(15, 26, 46, .06);

  /* ── 타이포 — 제목은 명조, 본문은 고딕 ───────────────────────
     라틴/한글 모두 같은 갈래로 맞춘다: 제목 Newsreader+나눔명조(세리프),
     본문 Inter+본고딕(산세리프). 각 목록에서 앞의 라틴 폰트에는 한글 글리프가
     없으므로, 한글은 뒤에 둔 한글 폰트가 자연스럽게 받는다. */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Noto Sans KR", "Pretendard", "Apple SD Gothic Neo", sans-serif;
  --font-display: "Newsreader", "Nanum Myeongjo", Georgia, "Times New Roman", serif;
  /* 뒤에 한글 고딕을 반드시 둔다 — 모노 폰트에는 한글 글리프가 없어서,
     빼면 라벨·칩의 한글이 통째로 두부(□)가 된다. */
  --font-mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, "DejaVu Sans Mono",
               "Noto Sans KR", monospace;

  /* ── BioWrit 이 쓰는 이름 (인라인 <style> 을 고치지 않기 위한 별칭) ── */
  --brand: var(--accent);
  --brand-soft: #eaf1fc;
  --chip: var(--bg);

  /* ── 회사 사이트가 쓰는 이름 ───────────────────────────── */
  --bg-soft: #f7f8fa;     /* 교차 섹션 */
  --bg-elev: var(--panel);/* 카드 */
  --navy-deep: #f7f8fa;   /* 풋터 — 참조 디자인처럼 밝게 */
  --slate: var(--muted);  /* 보조 텍스트 */

  /* 이름은 teal 이지만 값은 브랜드 파랑이다 (세 레포의 사용처를 다 고치지 않으려고
     이름은 두고 값만 맞춘다). */
  --teal: var(--accent);
  --teal-light: #5b9bef;
  --teal-deep: var(--accent-dk);
  --cyan: var(--mint);

  /* 참조 디자인엔 그라데이션이 없다 — 이 이름을 쓰던 자리는 단색 네이비가 된다 */
  --grad: var(--ink);
  --glow: 0 0 0 1px rgba(15, 26, 46, .08);

  --font-serif: var(--font-display);
}

/* ── 어두운 테마 ────────────────────────────────────────────────
   세 서비스가 함께 쓴다. 규약은 BioWrit 이 이미 쓰던 것을 그대로 따른다 —
   <html data-theme="dark">. 그래서 BioWrit 의 기존 다크 규칙이 그대로 살아 있고,
   여기서는 공용 토큰만 갈아 끼운다.

   '시스템에 맞춤' 은 별도 값이 아니라 **속성을 light/dark 중 하나로 확정**해서
   표현한다(static/js/theme.js 가 판단한다). 미디어 쿼리로 갈라 두면 사용자가
   고른 값과 OS 설정이 어긋날 때 어느 쪽이 이기는지가 규칙 두 곳에 흩어진다. */
:root[data-theme="dark"] {
  --bg: #0d1420;
  --panel: #141c2b;
  --ink: #e8edf5;
  --muted: #93a1b5;
  --faint: #64748b;
  --line: #263244;

  --accent: #5b9bef;      /* 어두운 바탕에서는 밝은 파랑이라야 읽힌다 */
  --accent-dk: #7fb3f5;
  --mint: #7fd1cd;

  --ok: #34d399;
  --fail: #f87171;
  --warn: #fbbf24;
  --queued: #64748b;
  --hero1: #0a1018;
  --hero2: #0a1018;

  --shadow: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .55);

  --brand-soft: #16233a;
  --chip: #1b2436;

  --bg-soft: #101828;
  --bg-elev: var(--panel);
  --navy-deep: #0a1018;
  --slate: var(--muted);

  --teal: var(--accent);
  --teal-light: #8ec1f8;
  --teal-deep: var(--accent-dk);
  --cyan: var(--mint);

  --grad: var(--panel);
  --glow: 0 0 0 1px rgba(255, 255, 255, .08);

  /* 어두운 면은 더 어둡게 유지하고, 주 버튼은 뒤집는다 —
     어두운 바탕에서 '꽉 찬 짙은 버튼' 은 배경에 묻혀 버린다. */
  --surface-ink: #0a1018;
  --on-ink: #ffffff;
  --btn-bg: #e8edf5;
  --btn-bg-hover: #ffffff;
  --btn-fg: #0d1420;
}

/* 어두운 테마에서 밝은 면을 전제로 칠해 둔 자리들 — 회사 사이트가 쓰는 값이다 */
:root[data-theme="dark"] body { background: var(--bg); color: var(--ink); }

/* ── 상단 헤더 — BioWrit 스타일로 통일 ────────────────────────
   세 서비스가 모두 <header> 엘리먼트를 쓴다(회사 사이트 .site-header,
   BioWrit 은 맨 <header>, PepDesigner 는 .hero). BioWrit 의 헤더 — 흰 패널 +
   아래 경계선 + 어두운 제목 + 파란 링크 — 를 공통값으로 삼는다.

   PepDesigner 의 .hero 는 네이비 그라데이션에 흰 글자를 하드코딩해 두었으므로,
   배경만 밝게 바꾸면 글자가 사라진다. 그래서 그 안의 글자색까지 함께 되돌린다
   (이 파일이 앱 스타일시트 뒤에 오므로 같은 특이도면 이쪽이 이긴다). */
header, header.hero {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
header h1, header h2, header strong { color: var(--ink); }
/* 앱 제목도 사이트의 제품 이름과 같은 세리프로 — 굵은 산세리프로 두면 같은 이름이
   화면마다 다른 얼굴로 보인다. (본문 글꼴은 건드리지 않는다) */
header h1, header h2 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em;
}
header a { color: var(--accent); }
header a:hover { color: var(--accent-dk); }
/* 부제·보조 문구 — BioWrit 의 .sub, PepDesigner 의 .tag/.lede */
header .sub, header .muted { color: var(--muted); }
header .brand .tag, header .lede { color: var(--muted); }

/* ── 공통 바탕 ───────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

/* ── 버튼 — 세 서비스에서 같은 모양이 되도록 색·굵기·라운드만 맞춘다.
   크기·여백은 각 앱이 정하던 값을 그대로 둔다(레이아웃을 흔들지 않기 위해). ── */
.btn, .btn-primary, .btn-ghost {
  font-family: var(--font-sans);
  border-radius: var(--radius-sm);
  font-weight: 500;
}
/* 주 버튼은 회사 사이트와 같은 짙은 네이비다 — 파란 채움은 링크·활성 표시에만 남긴다 */
.btn-primary {
  background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  color: var(--btn-fg);
}
.btn-primary:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.btn-ghost {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ── 입력 ────────────────────────────────────────────────────── */
input, select, textarea {
  font-family: var(--font-sans);
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(44, 123, 229, .15);
}

/* ── 카드·표 ─────────────────────────────────────────────────── */
.card, .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
table { border-color: var(--line); }
th { color: var(--muted); }
code, pre, kbd, samp { font-family: var(--font-mono); }
