/* 요즘이야기 V4 디자인 토큰(운영자 확정 시안, 2026-10-13).
   색·글꼴·글자 크기·간격·모서리·그림자 값은 이 파일에서만 정한다. 다른 CSS는 var(--ui-*)만 쓴다.
   밝게(:root)를 기본으로 두고, 조금 어둡게(dim)·아주 어둡게(dark)는 달라지는 색만 다시 정한다.
   ::backdrop에도 같은 값을 둔다(대화상자 뒤 가림막이 토큰을 물려받지 못하는 옛 브라우저 대비).
   [data-theme]을 단 칸은 그 안만 해당 테마가 된다(부품 진열 /admin/ui가 세 테마를 나란히 보여 줄 때 쓴다).
   규칙과 쓰임: docs/DESIGN_SYSTEM_LINT.md */
@font-face{font-family:Pretendard;src:url('/static/fonts/PretendardVariable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}

:root,::backdrop,[data-theme="light"]{color-scheme:light;
/* 글꼴 */
--ui-font:Pretendard,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
--ui-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
/* 글자 크기 11단계(반 픽셀 없음). 46 PC 첫 화면 제목 · 30 1위 말풍선·키워드 이름 · 25 모바일 첫 화면 제목 · 22 2·3위 말풍선·1~3위 번호
   21 PC 구역 제목·지표 숫자 · 19 모바일 구역 제목·지표 문장 · 16 1~3위 글 제목·기간 탭 · 15 글 제목·키워드 칩
   14 해시태그·관련 글 제목 · 13 순위 배지·보조 숫자 · 12 알약 숫자·N 표시(가장 작은 글자) */
--ui-fs-12:12px;--ui-fs-13:13px;--ui-fs-14:14px;--ui-fs-15:15px;--ui-fs-16:16px;--ui-fs-19:19px;
--ui-fs-21:21px;--ui-fs-22:22px;--ui-fs-25:25px;--ui-fs-30:30px;--ui-fs-46:46px;
/* 간격: 4px 격자 9단계 */
--ui-sp-4:4px;--ui-sp-8:8px;--ui-sp-12:12px;--ui-sp-16:16px;--ui-sp-20:20px;--ui-sp-24:24px;--ui-sp-32:32px;--ui-sp-40:40px;--ui-sp-56:56px;
/* 모서리 4단계: 파비콘·작은 표시 · 버튼 덩어리 · 카드 · 알약·말풍선·탭 */
--ui-r-fav:4px;--ui-r-box:14px;--ui-r-card:20px;--ui-r-pill:999px;
/* 폭: 홈 · 읽는 페이지 · 표·차트가 많은 관리자 화면 */
--ui-max:1200px;--ui-read:880px;--ui-max-wide:1320px;
/* 바탕·글자 */
--ui-page:#f2f3f5;--ui-card:#ffffff;--ui-ink:#15171a;--ui-ink-2:#3b3f46;--ui-muted:#686d76;--ui-line:#ecedf0;--ui-pill:#f2f3f5;
--ui-accent:#1e3fd8;--ui-on-accent:#ffffff;--ui-sel:#eef2ff;
/* 첫 화면(파스텔) */
--ui-hero:#f7f8fc;--ui-hero-ink:#15171a;--ui-hero-dim:#686d76;--ui-hero-line:rgba(110,100,200,.16);--ui-hero-tile:#ffffff;--ui-ring:#15171a;
--ui-bub:#ffffff;--ui-bub-ink:#15171a;--ui-bub-shadow:rgba(40,40,90,.12);
/* 1위·순위·상태 */
--ui-hot:#ff5b45;--ui-hot-strong:#d9392a;--ui-on-hot:#ffffff;--ui-rank-hot:#d9392a;
--ui-rank-1:#c2382b;--ui-rank-2:#b0584e;--ui-rank-rest:#686d76;
--ui-up:#e5402f;--ui-up-bg:#fdeceb;--ui-new:#1e3fd8;--ui-on-new:#ffffff;
--ui-skel:#e7e9ed;--ui-mark:#fff2b8;
/* 알림·상태 배지(소개 페이지 이용 조건, 관리자 화면) */
--ui-ok:#0b7a55;--ui-ok-bg:#e3f5ec;--ui-warn:#8a4b00;--ui-warn-bg:#fff1d6;--ui-danger:#c2271f;--ui-danger-bg:#fdeceb;
/* 그림자·가림막 */
--ui-shadow:rgba(16,24,40,.08);--ui-shadow-soft:rgba(16,24,40,.05);--ui-scrim:rgba(16,18,24,.42);
/* 말풍선 파스텔 7색(4위부터 이 순서로 돌려 쓴다) */
--ui-p1-bg:#dff5ea;--ui-p1-fg:#116b45;--ui-p2-bg:#ece6ff;--ui-p2-fg:#5a3cc0;--ui-p3-bg:#ffe9dd;--ui-p3-fg:#a0461b;--ui-p4-bg:#e0f0ff;--ui-p4-fg:#1d5ea6;
--ui-p5-bg:#fff2c7;--ui-p5-fg:#7d5a00;--ui-p6-bg:#fde4f0;--ui-p6-fg:#a8336d;--ui-p7-bg:#e2f6f6;--ui-p7-fg:#16706f;
/* 묶음(위 색을 조합) */
--ui-shadow-card:0 1px 2px var(--ui-shadow-soft),0 12px 32px var(--ui-shadow);
--ui-shadow-pop:0 16px 40px var(--ui-shadow),0 2px 6px var(--ui-shadow-soft)}

[data-theme="dim"],[data-theme="dim"] ::backdrop{color-scheme:dark;
--ui-page:#1e2329;--ui-card:#2a3038;--ui-ink:#e1e6ec;--ui-ink-2:#c7cfd9;--ui-muted:#adb6c2;--ui-line:#3a424d;--ui-pill:#313842;
--ui-accent:#86b6ff;--ui-on-accent:#10161f;--ui-sel:#2b3a55;
--ui-hero:#1a2442;--ui-hero-ink:#ffffff;--ui-hero-dim:rgba(225,231,255,.72);--ui-hero-line:rgba(140,160,255,.24);--ui-hero-tile:rgba(255,255,255,.1);--ui-ring:#ffffff;
--ui-bub:#f4f6ff;--ui-bub-ink:#15171a;--ui-bub-shadow:rgba(0,0,0,.35);
--ui-hot:#f2553f;--ui-rank-hot:#c93222;
--ui-rank-1:#ff9a82;--ui-rank-2:#e0a39b;--ui-rank-rest:#adb6c2;
--ui-up:#ff9a82;--ui-up-bg:#43302c;--ui-new:#3d63f0;--ui-skel:#313842;--ui-mark:#5a4a12;
--ui-ok:#55d6a3;--ui-ok-bg:#1c3b32;--ui-warn:#f3b650;--ui-warn-bg:#3e3320;--ui-danger:#ff8a80;--ui-danger-bg:#41262b;
--ui-shadow:rgba(0,0,0,.3);--ui-shadow-soft:rgba(0,0,0,.2);--ui-scrim:rgba(0,0,0,.55)}

[data-theme="dark"],[data-theme="dark"] ::backdrop{color-scheme:dark;
--ui-page:#0e0f11;--ui-card:#17191c;--ui-ink:#eceef1;--ui-ink-2:#c9ccd2;--ui-muted:#9ba0a8;--ui-line:#25282d;--ui-pill:#22252a;
--ui-accent:#9db4ff;--ui-on-accent:#0b0e14;--ui-sel:#1d2540;
--ui-hero:#0d1433;--ui-hero-ink:#ffffff;--ui-hero-dim:rgba(225,231,255,.66);--ui-hero-line:rgba(140,160,255,.24);--ui-hero-tile:rgba(255,255,255,.08);--ui-ring:#ffffff;
--ui-bub:#f4f6ff;--ui-bub-ink:#15171a;--ui-bub-shadow:rgba(0,0,0,.4);
--ui-hot:#f2553f;--ui-rank-hot:#c93222;
--ui-rank-1:#ff8a7a;--ui-rank-2:#e0a39b;--ui-rank-rest:#9ba0a8;
--ui-up:#ff8f75;--ui-up-bg:#3a2220;--ui-new:#3d63f0;--ui-skel:#24272c;--ui-mark:#4a3d10;
--ui-ok:#55d6a3;--ui-ok-bg:#102a23;--ui-warn:#f3b650;--ui-warn-bg:#2e2616;--ui-danger:#ff8a80;--ui-danger-bg:#331d21;
--ui-shadow:rgba(0,0,0,.5);--ui-shadow-soft:rgba(0,0,0,.3);--ui-scrim:rgba(0,0,0,.6)}