/* ========================================================================== Daily 틈새메디컬 · 디자인 토큰 (05 · 2026-10-29 · 1차안) - 기준: 운영 현황 10-28 판(S1~S32). 문서끼리 다르면 운영 현황이 우선(S29). - 분야 탭마다 배경색과 주색이 다르다(10-29 운영자 요청). 고른 분야 수 n 에 맞춰 1번 탭 = 살구 → 가운데 = 노랑 → n번 탭 = 파랑, 세 기준색 사이를 고르게 나눈다. 분야 고정색 아님. 값은 아래 「분야 색 공식」으로 계산해 그 호를 여는 순간 :root 에 덮어쓴다. - 외부 글꼴 · 패키지 없음(운영 현황 §6). - 밝은 테마가 :root 기본. 어두운 테마는 data-theme="dark" 또는 기기 설정. - 읽기 설정 3가지(§3-7)는 . ========================================================================== */ :root{ /* ── 색: 바탕과 글 ─────────────────────────────── */ --c-paper:#FDF6F2; /* 화면 바탕. 분야 화면에서는 그 탭의 bg 로 바뀐다 */ --c-surface:#FFFFFF; /* 시트 · 상자 · 재생기 */ --c-sunk:#F2EBE7; /* 표 머리 칸 · 눌린 바탕 */ --c-ink:#1A1F24; /* 본문 글 — 분야 색을 타지 않게 무채에 가깝게 */ --c-ink-2:#4D5660; /* 보조 글(서지 · 날짜) — 바탕 대비 6.4:1 */ --c-ink-3:#646E78; /* 가장 옅은 글(힌트) — 4.6:1 */ --c-line:#D8DDE2; /* 가는 선 */ --c-line-strong:#B5BDC5; /* 단추 테두리 */ /* ── 색: 강조 ────────────────────────────────── */ /* 주색 — 아래 값은 분야 밖 화면(첫 화면 · 가입)의 기본 = 따뜻한 끝(1번 탭)과 같다 */ --c-accent:#6F4425; /* 글 · 선 강조(절 제목 선 · ①②③ · 링크) */ --c-accent-ink:#FFFFFF; --c-accent-soft:#F9E3D5; /* 강조 옅은 바탕 */ --c-accent-fill:#6F4425; /* 채운 단추 · 층 단추 · 재생 단추 바탕 */ --c-accent-fill-ink:#FFFFFF; --c-mark:#97611C; /* 보관함에 담긴 ★ (호박색, 쓰는 곳은 이것 하나) */ --c-kakao:#FEE500; --c-kakao-ink:#191600; /* 카카오 단추만 */ --c-scrim:rgba(14,18,22,.44); /* 시트 뒤 어둡게 */ --c-figure-plate:#FFFFFF; /* 원고 그림은 흰 바탕 — 판을 그대로 둔다 */ --figure-filter:none; /* ── 이름 표시(S20 · §3-3) ────────────────────── */ --wm-ink:#1A1F24; --wm-opacity:.065; /* 10-29 확정 「기본」(어두운 화면 .075). 설정값으로 둔다 — 옅게 .045 · 진하게 .09 */ /* ── 분야 색 공식(OKLCH) ─────────────────────── i = 탭 순서(0부터), n = 고른 분야 수, t = n>1 ? i/(n-1) : 0 세 기준색(색상각°, 채도 배율): 살구(55, 1.0) · 노랑(95, 1.3) · 파랑(250, 1.0) t ≤ .5 이면 살구→노랑, t > .5 이면 노랑→파랑 구간. 구간 안에서는 OKLab 의 a·b 를 직선으로 잇는다 (색상각을 돌리지 않으므로 초록 · 민트를 지나지 않는다. 노랑과 파랑 사이는 차분한 회녹 · 청회가 된다). 밝기 L 이 .8 보다 큰 역할(탭 · 머리 · 바탕 · 옅은 주색)은 노랑의 채도 배율을 1.9 로 — 노랑이 탁해지지 않게. 밝은(L, C) 어두운(L, C) tab 탭 색 .885, .045 .33, .035 wash 호 머리 .952, .022 .235, .022 bg 화면 바탕 .977, .009 .19, .011 → --c-paper accent 주색(글) .43, .075 .80, .05 → --c-accent fill 주색(바탕) .43, .075 .42, .05 → --c-accent-fill soft 옅은 주색 .93, .03 .27, .025 → --c-accent-soft sunk 눌린 바탕 .945, .01 .25, .012 → --c-sunk surface(어두운만) .225, .01 → --c-surface a = C·배율·cos(h), b = C·배율·sin(h). 대비: 주색 글/바탕 7.5:1 이상, 채운 바탕/글 6.9:1 이상(n=3·7·10 실측). 구현은 목업의 paletteFor(i,n,dark) 를 그대로 옮긴다. */ --tab-edge:#B3BCC4; /* 탭 테두리 */ /* ── 글꼴 ───────────────────────────────────── 시스템 글꼴만. Pretendard 는 기기에 깔려 있을 때만 쓰인다(내려받지 않음). */ --font-sans:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","Segoe UI",Roboto,sans-serif; --font-cite:Georgia,"Times New Roman","Apple SD Gothic Neo","Noto Serif KR",serif; /* 저널명 기울임에만 */ /* 크기 단계(약 1.2배). 본문은 읽기 설정이 정한다 */ --fs-xs:12px; /* 맺음 고지 · 탭 아래 작은 글 */ --fs-s:13.5px; /* 서지 줄 · 날짜 · 메뉴 보조 */ --fs-ui:15px; /* 단추 · 탭 */ --fs-body:16.5px; /* 본문(읽기 설정 '기본') */ --fs-title:19px; /* 편 제목 */ --fs-h2:23px; /* 시트 제목 */ --fs-mast:29px; /* 「Daily 비만대사」 */ --lh-body:1.78; /* 읽기 설정 '기본' */ --lh-ui:1.45; --w-reg:400; --w-mid:600; --w-bold:800; --track-mast:-.02em; /* ── 간격 · 모양 ─────────────────────────────── */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --gutter:20px; /* 폰 좌우 여백 */ --col:680px; /* 데스크톱 읽기 칸 */ --measure:40em; /* 본문 한 줄 최대 길이 */ --r-ctl:8px; --r-box:10px; --r-sheet:18px; --r-pill:999px; --r-tab:9px 13px 0 0; /* 서류철 인덱스 탭 */ --top-h:52px; --bnav-h:58px; --mini-h:60px; --shadow-sheet:0 -10px 30px -12px rgba(13,21,18,.28); --shadow-float:0 8px 22px -10px rgba(13,21,18,.32); /* ── 움직임: 누른 것에 답할 때만 ───────────────── */ --t-fast:140ms; --t-reveal:240ms; --ease:cubic-bezier(.2,.7,.2,1); } /* 읽기 설정 — 글자 크기 4단 · 줄 간격 3단 (§3-7) */ :root[data-fs="s"] {--fs-body:15px; --fs-title:17.5px} :root[data-fs="m"] {--fs-body:16.5px;--fs-title:19px} :root[data-fs="l"] {--fs-body:18.5px;--fs-title:21px} :root[data-fs="xl"] {--fs-body:21px; --fs-title:23.5px} :root[data-lh="tight"]{--lh-body:1.6} :root[data-lh="base"] {--lh-body:1.78} :root[data-lh="loose"]{--lh-body:1.98} /* ── 어두운 테마 ───────────────────────────────── */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --c-paper:#18130F; --c-surface:#201B17; --c-sunk:#26201C; --c-ink:#E4E8EC; --c-ink-2:#AAB3BC; --c-ink-3:#8E98A2; --c-line:#2A3037; --c-line-strong:#3E4650; --c-accent:#D8B6A0; --c-accent-ink:#18130F; --c-accent-soft:#30231B; --c-accent-fill:#634632; --c-accent-fill-ink:#E6ECE8; /* 어두운 화면: 채운 바탕은 낮은 밝기 + 옅은 글 */ --c-mark:#E2B46C; --c-scrim:rgba(0,0,0,.6); --c-figure-plate:#F2F4F2; --figure-filter:brightness(.9); --wm-ink:#E4E8EC; --wm-opacity:.075; --tab-edge:#353D45; --shadow-sheet:0 -10px 30px -12px rgba(0,0,0,.7); --shadow-float:0 8px 22px -10px rgba(0,0,0,.7); } } :root[data-theme="dark"]{ color-scheme:dark; --c-paper:#18130F; --c-surface:#201B17; --c-sunk:#26201C; --c-ink:#E4E8EC; --c-ink-2:#AAB3BC; --c-ink-3:#8E98A2; --c-line:#2A3037; --c-line-strong:#3E4650; --c-accent:#D8B6A0; --c-accent-ink:#18130F; --c-accent-soft:#30231B; --c-accent-fill:#634632; --c-accent-fill-ink:#E6ECE8; /* 어두운 화면: 채운 바탕은 낮은 밝기 + 옅은 글 */ --c-mark:#E2B46C; --c-scrim:rgba(0,0,0,.6); --c-figure-plate:#F2F4F2; --figure-filter:brightness(.9); --wm-ink:#E4E8EC; --wm-opacity:.075; --tab-edge:#353D45; --shadow-sheet:0 -10px 30px -12px rgba(0,0,0,.7); --shadow-float:0 8px 22px -10px rgba(0,0,0,.7); }