/* ══ NUBI 에디토리얼 디자인 시스템 — 토대 (2026-10-10) ══════════════════════
   editorial.html 만 부른다. 실제 앱(index.html)·서비스(web/)에는 걸리지 않는다 — sync 대상도 아니다.
   순서: style.css → 이 파일(토큰·바탕) → editorial_scale.css(자동 생성: style.css 값을 눈금에 맞춤)
         → editorial_parts.css(부품 규칙). 모든 규칙은 html[data-skin="editorial"] 아래에만 건다.

   원칙
   1. 화면 글자는 고딕(Pretendard). 명조는 읽는 면(책·지문·시험지 — 원래 조판)과 제목·선생님 메시지에만.
   2. 글자는 먹색 세 단(본문·보조·메타). 브랜드색은 '누를 것'과 '지금'에만 — 버튼, 지금 할 단계, 진행.
   3. 바탕은 옅은 종이, 상자는 흰 종이. 무늬는 걷고, 디더 도판은 홈 카드·조각상에만.
   4. 잠긴 것은 흐리게 지우지 않는다. 바탕만 가라앉히고 글은 읽힌다.
   5. 모양은 네 면 테두리(왼쪽 띠 금지). 강조는 위 괘선 3px 하나 또는 브랜드 테두리 1px. 그림자는 두 단만.
   6. 값은 아래 토큰으로만 쓴다. 새 값이 필요하면 토큰을 늘리고 README 표(mock 디자인 시스템 문서)도 고친다. */

/* ── 1. 색 — 역할 이름. 밝은 화면 ─────────────────────── */
:root[data-skin="editorial"] {
  --c-page: #f7f4ed;            /* 화면 바탕 — 옅은 종이 */
  --c-surface: #ffffff;         /* 상자·입력칸 — 흰 종이 */
  --c-sunk: #f1ede4;            /* 가라앉은 면 — 잠긴 줄, 번호 원, 권 칸 */
  --c-tint: rgba(29,27,24,.035);/* 머무름·고름 채움 */
  --c-ink: #1d1b18;             /* 본문 글자 — 먹색 */
  --c-ink-2: #57524a;           /* 보조 글자 — 설명, 꼬리말 */
  --c-ink-3: #6b655c;           /* 메타 — 시간, 잠김 사유 (가라앉은 면 위 4.9:1, 흰 바탕 5.8:1) */
  --c-line: rgba(29,27,24,.15); /* 상자 테두리 */
  --c-line-soft: rgba(29,27,24,.09);
  --c-line-strong: rgba(29,27,24,.30);
  --c-field-line: rgba(29,27,24,.48); /* 입력칸·고스트 단추 테두리 — 조작 요소라 3:1 (흰 바탕 3.1:1) */
  --c-brand: #00462a;           /* 이화그린 — 채운 단추, 지금 할 것 */
  --c-brand-hover: #00331f;
  --c-brand-soft: #e7efe9;      /* 마친 것 채움 */
  --c-brand-ink: #1d6b4f;       /* 마친 것 글자 */
  --c-on-brand: #ffffff;
  --c-gold: #a8853f;            /* 아주 작은 자리만 — 지금 메뉴 밑줄, 상태 점 */
  --c-alert: #a4552f;           /* 테라코타 — 제출 뒤에 열린 것(시험지 해설) */
  --c-mark: rgba(0,70,42,.10);  /* 표시한 문단 */
  --c-page-rgb: 247,244,237; --c-brand-rgb: 0,70,42;
  --e-1: 0 1px 2px rgba(40,32,20,.05), 0 8px 22px -10px rgba(40,32,20,.22);
  --e-2: 0 12px 32px rgba(40,32,20,.16);
}
/* 어두운 화면 — 원칙은 그대로(흑백, 색반전 아님): 숯 바탕 · 상아 글자 · 상아 채움 · 금색 조금 */
@media (prefers-color-scheme: dark) {
  :root[data-skin="editorial"]:not([data-theme="light"]):not([data-theme="contrast"]) {
    --c-page: #0f0f0e; --c-surface: #171716; --c-sunk: #141413; --c-tint: rgba(232,227,216,.05);
    --c-ink: #e8e3d8; --c-ink-2: rgba(232,227,216,.72); --c-ink-3: rgba(232,227,216,.54);
    --c-line: rgba(232,227,216,.20); --c-line-soft: rgba(232,227,216,.12); --c-line-strong: rgba(232,227,216,.34); --c-field-line: rgba(232,227,216,.42);
    --c-brand: #e8e3d8; --c-brand-hover: #ffffff; --c-brand-soft: rgba(232,227,216,.14); --c-brand-ink: #d9d4c9; --c-on-brand: #111110;
    --c-gold: #c2a05a; --c-alert: #d98a5e; --c-mark: rgba(232,227,216,.16);
    --c-page-rgb: 15,15,14; --c-brand-rgb: 232,227,216;
    --e-1: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -10px rgba(0,0,0,.6); --e-2: 0 12px 32px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
:root[data-skin="editorial"][data-theme="dark"] {
  --c-page: #0f0f0e; --c-surface: #171716; --c-sunk: #141413; --c-tint: rgba(232,227,216,.05);
  --c-ink: #e8e3d8; --c-ink-2: rgba(232,227,216,.72); --c-ink-3: rgba(232,227,216,.54);
  --c-line: rgba(232,227,216,.20); --c-line-soft: rgba(232,227,216,.12); --c-line-strong: rgba(232,227,216,.34); --c-field-line: rgba(232,227,216,.42);
  --c-brand: #e8e3d8; --c-brand-hover: #ffffff; --c-brand-soft: rgba(232,227,216,.14); --c-brand-ink: #d9d4c9; --c-on-brand: #111110;
  --c-gold: #c2a05a; --c-alert: #d98a5e; --c-mark: rgba(232,227,216,.16);
  --c-page-rgb: 15,15,14; --c-brand-rgb: 232,227,216;
  --e-1: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -10px rgba(0,0,0,.6); --e-2: 0 12px 32px rgba(0,0,0,.55);
  color-scheme: dark;
}
/* 흰 바탕 모드 — 흰 종이 · 검은 글자 · 회색 보조 */
:root[data-skin="editorial"][data-theme="contrast"] {
  --c-page: #ffffff; --c-surface: #ffffff; --c-sunk: #f2f2f2; --c-tint: rgba(0,0,0,.04);
  --c-ink: #000000; --c-ink-2: #333333; --c-ink-3: #555555;
  --c-line: rgba(0,0,0,.35); --c-line-soft: rgba(0,0,0,.2); --c-line-strong: rgba(0,0,0,.6); --c-field-line: rgba(0,0,0,.45);
  --c-brand: #111111; --c-brand-hover: #000000; --c-brand-soft: #e8e8e8; --c-brand-ink: #111111; --c-on-brand: #ffffff;
  --c-gold: #8a6a2a; --c-alert: #8a3a1a; --c-mark: rgba(0,0,0,.10);
  --c-page-rgb: 255,255,255; --c-brand-rgb: 0,0,0;
  color-scheme: light;
}

/* style.css 가 쓰는 옛 이름을 역할에 잇는다 — style.css 의 규칙은 손대지 않고 따라온다.
   (테마마다 다시 적지 않는다: 역할 값이 테마를 따라 바뀐다)
   선택자에 [data-skin] 을 겹쳐 쓴 까닭: style.css 의 기기 다크 블록 :root:not(..):not(..) 은 힘이 (0,3,0) 이다.
   그보다 세야 기기 설정이 다크일 때도 이 연결이 이긴다. */
:root[data-skin="editorial"][data-skin][data-skin] {
  --ewha: var(--c-brand); --ewha-deep: var(--c-brand-hover); --on-ewha: var(--c-on-brand);
  --paper: var(--c-page); --card: var(--c-surface); --field: var(--c-surface);
  --ink: var(--c-ink); --ink-soft: var(--c-ink-2); --ink-body: var(--c-ink);
  --line: var(--c-line); --line-soft: var(--c-line-soft);
  --soft: var(--c-tint); --mid: var(--c-brand-ink); --lock: var(--c-ink-3);
  --mark: var(--c-mark); --mark-line: var(--c-brand); --ok: var(--c-brand); --bad: var(--c-brand);
  --paper-bar: rgba(var(--c-page-rgb), .94); --paper-white: var(--c-surface); --paper-warm: var(--c-surface); --paper-cream: var(--c-surface);
  --rule-warm: var(--c-line); --badge-bg: var(--c-brand-soft); --badge-ink: var(--c-brand-ink);
  --paper-rgb: var(--c-page-rgb); --ewha-rgb: var(--c-brand-rgb);
  --gold: var(--c-gold);
}

/* ── 2. 글자 ─────────────────────────────────────────── */
:root[data-skin="editorial"] {
  --ff-ui: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --ff-display: "ChosunilboMJ", "Noto Serif KR", "Batang", serif;
  --sans: var(--ff-ui); --serif: var(--ff-display);
  /* 크기 아홉 단 — 이름은 쓰임이다 */
  --fs-display: 30px;   /* 화면 제목 (명조) */
  --fs-headline: 23px;  /* 트랙·과정 이름 (명조) */
  --fs-title: 19px;     /* 구역 제목 — 과제 순서, 상자 제목 큰 것 */
  --fs-subtitle: 17px;  /* 줄 제목 — 할 일 줄, 카드 제목 */
  --fs-body-lg: 16px;   /* 읽는 글 — 선생님 메시지, 안내 본문 */
  --fs-body: 15px;      /* 화면 글 — 설명, 문단 */
  --fs-label: 14px;     /* 단추·메뉴·이름표 */
  --fs-caption: 13px;   /* 메타 — 시간, 잠김 사유, 각주 */
  --fs-micro: 12px;     /* 빽빽한 부품만 — 권 칸, 목차 시간 */
  --lh-tight: 1.3; --lh-snug: 1.5; --lh-body: 1.7; --lh-read: 1.85;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
}
@media (max-width: 480px) {
  :root[data-skin="editorial"] { --fs-display: 25px; --fs-headline: 21px; --fs-title: 18px; }
}

/* ── 3. 간격·모서리·움직임·폭 ────────────────────────── */
:root[data-skin="editorial"] {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-14: 56px;
  --r-sm: 6px;     /* 작은 부품 — 권 칸, 목차 줄, 칩 */
  --r-md: 8px;     /* 누르는 것 — 단추, 입력칸, 메뉴 */
  --r-lg: 12px;    /* 상자 — 카드, 할 일 줄, 안내 */
  --r-pill: 999px; /* 떠 있는 단추 */
  --m-fast: .15s ease;
  --w-text: 860px; --w-wide: 1180px; --w-side: 360px;
}

/* ── 4. 바탕 ─────────────────────────────────────────── */
html[data-skin="editorial"] body {
  background: var(--c-page); background-image: none !important; color: var(--c-ink);
  font-family: var(--ff-ui); line-height: var(--lh-body);
  letter-spacing: -0.005em; -webkit-font-smoothing: antialiased;
}
html[data-skin="editorial"] a { text-decoration-color: rgba(var(--c-brand-rgb), .45); }
html[data-skin="editorial"] :focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }