/*
 * CGM beta2 — 디자인 토큰 · 리셋 (계약: team/contracts/beta2-ui.md, 소유: builder-U0)
 *
 *   (v3.0 도마도 — team/plans/domado-v3.md §2) 색·글꼴·상자 = 디자이너 안(ref/design_v2 — 주 색 #ff9280 · 옅음 #ffac9e · 글 #0c0c0c/#393939 ·
 *   바탕 #fbfbfa · 상자 모서리 17px · 제목 글꼴 Cafe24 써라운드). 원칙 0(디자이너 안 우선) — 산호 위 흰 글자(약 2.2:1)는 그림대로.
 *   뜻 있는 색(수컷·암컷·위험·완료·상태 색·별점)은 그대로. 어둡게 묶음은 산호에 맞춰 대충 맞춤(디자이너 확인 전).
 *   (v2.x 까지) 색 = 시안 A "Clear"(design/beta2-proposals/A-clear/tokens.css) · 레이아웃 = 시안 B "Terrarium"
 *   사용성 원칙(40대 이상, 디지털 비친숙): 본문 16px↑(모바일 17px), 보조 글자도 14px↑,
 *   본문 대비 7:1 목표(최소 4.5:1), 누르는 곳 48px↑(주요 버튼 52~56px).
 *
 *  1) 새 토큰(정식 이름)      — 화면 CSS 는 이것만 쓴다.
 *  2) (구 토큰 별칭은 전 화면 이전 후 2026-10-06 제거 — 계약 §3 치환표)
 *  3) 다크                    — html.dark-ok 인 화면에서만(하드코딩 색을 걷어낸 화면이 opt-in).
 *                                시스템 설정(prefers-color-scheme) 자동 + 수동 선택(localStorage "cgm_theme",
 *                                device.js 가 첫 페인트 전에 html[data-theme] 로 반영).
 *  화면마다 :root 를 다시 정의하지 않는다.
 */

@font-face{
  font-family:"Pretendard Variable";
  src:url("../vendor/pretendard/PretendardVariable.woff2") format("woff2-variations");
  font-weight:45 920; font-style:normal; font-display:swap;
}
/* (v3.0 도마도) 제목·큰 숫자·앱 이름 글꼴 — Cafe24 써라운드(굵은 한 벌 · 서버에 둠 — vendor/cafe24-ssurround, 라이선스 PDF 같이). 본문은 Pretendard 그대로 */
@font-face{
  font-family:"Cafe24 Ssurround";
  src:url("../vendor/cafe24-ssurround/Cafe24Ssurround-v2.0.woff2") format("woff2");
  font-weight:400 900; font-style:normal; font-display:swap;
}

:root{
  /* ================= 1) 새 토큰 ================= */
  /* ---- 면 (A) ---- */
  --bg:#fbfbfa;            /* 앱 바탕(도마도 #fbfbfa) */
  --panel:#ffffff;         /* 카드·패널·입력 바탕 */
  --fill:#f3f3f2;          /* 눌림·세그먼트 바탕·호버 */
  --fill-2:#eaeae9;        /* 한 단계 진한 채움(선택된 회색) */
  --scrim:rgba(12,12,12,.36);
  /* ---- 선: 행 구분 헤어라인만. 묶음은 여백·면·그림자로 ---- */
  --line:rgba(12,12,12,.07);
  --line-2:rgba(12,12,12,.12);
  --line-3:rgba(12,12,12,.22);     /* 입력칸 테두리(경계가 분명해야 하는 곳) */
  /* ---- 글: 대비 — ink 19:1 · ink-2 11:1 · ink-3 6.3:1 (도마도 바탕). ink-4 는 글자에 쓰지 않는다(아이콘·비활성·placeholder) ---- */
  --ink:#0c0c0c; --ink-2:#393939; --ink-3:#5e5e5d; --ink-4:#8f8f8d;
  /* ---- 브랜드 색 묶음 (멀티 브랜드 2단계 — js/brand-colors.js · team/plans/multi-brand.html 7-1) ----
     주소별 /brand/brand.css(화면 CSS 뒤)가 이 묶음만 덮는다(brand-colors.js BRAND_VARS). 아래 "상태"·"분류"(뜻 있는 색)는 묶음 밖 — 못 바꿈.
     기본 값 = 도마도 산호(v3.0 — 그 전 CGM 청록 #0d7a71). 기본의 ②(링크 글자)·④(개수 숫자)는 글자로 읽히게 진한 산호(디자이너 큰 숫자 색 #cb5e4c 계열) —
     브랜드 brand.css 는 ②④ 를 늘 다시 쓰므로(brand-colors.js brandCss) 브랜드가 ①만 바꿔도 따라간다.
     화면 CSS 는 브랜드 색을 직접(#hex) 쓰지 않고 이 토큰을 쓴다. 어둡게 묶음(아래 3)도 이 토큰을 모두 다시 정한다(밝게 값이 새지 않게).
     ① 주 색 — 진한 버튼·켜짐·선택 표시·포커스. --accent-glow = 주 버튼 그림자(--sh-brand)의 색 */
  --accent:#ff9280; --accent-hover:#f7806c; --accent-press:#ea6d59; --accent-ink:#ffffff;
  --accent-soft:#ffe8e3; --accent-ring:rgba(255,146,128,.45); --accent-glow:rgba(255,146,128,.6);
  /*  ② 보조 — 링크·글자 버튼(.btn.txt)·"이어 보기 ›" 글자(--link·--link-hover) · 고른 칸 테두리(--sel-line) */
  --link:#8b3224; --link-hover:#6e2519; --sel-line:var(--accent);   /* (v3.0 2차-P — 2차-Q 요청 1) 값은 여기 · --accent-text 가 이것을 따름(브랜드 ② 를 바꾸면 진한 산호 글자도 같이) */
  /*  ③ 머리·메뉴 바탕(밝게 모드만) — 컴퓨터 위 메뉴 줄(--head-bg) · 휴대폰 아래 탭 줄(--tab-bg) · 메뉴 글자(--head-ink) ·
        고른/올린 메뉴 글자(--head-ink-on) · 메뉴 아이콘·탭 글자(--head-ink-3) · 올림(--head-hover) · 고른 표시 밑줄·아이콘(--head-on) ·
        가로 로고 filter(--head-logo — 진한 바탕이면 흰색으로) · 탭 줄 가운데 [추가] 그림자(--fab-sh — 탭 줄과 주 색이 비슷하면 테두리) */
  --head-bg:color-mix(in srgb,var(--bg) 86%,transparent); --tab-bg:var(--panel);
  --head-ink:var(--ink-2); --head-ink-on:var(--ink); --head-ink-3:var(--ink-3); --head-hover:var(--fill); --head-on:var(--accent); --head-logo:none; --fab-sh:var(--sh-1);
  /*  ④ 강조 — 강조 딱지(태그·표시 알약) 바탕 --hl-soft·글자 --hl · 개수 숫자 · 진한 개수 딱지(--hl 바탕 + --hl-ink 글자) */
  --hl:var(--accent-text); --hl-ink:#ffffff; --hl-soft:var(--accent-soft);
  /* (v3.0 도마도) 주 색 옅음 — 둘째 상자 바탕·[EDIT] 같은 옅은 진한 칸(디자이너 #ffac9e). 브랜드 묶음 밖 — 주 색에서 섞어 만든다(브랜드가 ①을 바꾸면 따라감) */
  --accent-2:color-mix(in srgb,var(--accent) 76%,#ffffff);
  /* (v3.0 2026-11-11 — 사용자 "새로 추가된 버튼은 우리 디자이너의 버튼 추가 스타일을 따라라. 기존 규칙은 이제 없다." · 계약 domado-ui.md §4)
     새 단추 꼴 = css/ui.css .btn-dz(글자) · .btn-dz.ic(그림). 그림 1(ref/design_v2/1.png) 대시보드 위 [QR]·[사진]·[EDIT] 에서 잼:
     글자 단추 바탕 #ffac9e(= 주 색 76% + 흰 — 브랜드 ①을 따라감) + 흰 글자 · 그림 단추 바탕 #ff9280(= 주 색) + 흰 그림 ·
     보이는 높이 73 ÷ 3 × k = 33.6 · 모서리 --r-btn-sm 7 · 사이 17 ÷ 3 × k ≈ 8 · 누름은 44(::after 투명 넓힘).
     글자 = Pretendard 600 17(그림 EDIT 은 19.9 영문 — 한글은 같은 눈 높이가 17~18 · 16 하한보다 디자이너 꼴이 이김 · 좁은 화면 16 · 15 아래로는 줄이지 않음).
     어둡게도 산호 그대로 + 흰 글자(어둡게 묶음이 --accent 만 바꾸고 이 토큰은 그것을 따라감 — 따로 다시 정하지 않음) */
  --btn-dz-h:33.6px; --fs-btn-dz:17px;
  --btn-dz-bg:color-mix(in srgb,var(--accent) 76%,#ffffff); --btn-dz-bg-hover:color-mix(in srgb,var(--accent) 90%,#ffffff); --btn-dz-bg-press:var(--accent);
  --btn-dz-ic:var(--accent); --btn-dz-ic-hover:color-mix(in srgb,var(--accent) 88%,#000000); --btn-dz-ic-press:color-mix(in srgb,var(--accent) 78%,#000000);
  --btn-dz-ink:#ffffff;
  /* (v3.0 1차 고침 — team/contracts/domado-ui.md §3) 진한 산호 글자 — 22px 미만 글자에 산호를 쓸 때는 늘 이것(링크·딱지·작은 강조 · --link·--hl 도 이것).
     대비: 흰 8.1 · 바탕 #fbfbfa 7.9 · 안내 띠 #fee2df 6.7 · 옅은 산호 칸 #ffe8e3 6.9 · 옅은 산호 상자 #ffac9e 4.5 : 1. 산호 #ff9280 자체는 채움·테두리·그림·22px↑ 글자만 */
  --accent-text:var(--link); --accent-text-hover:var(--link-hover);   /* 기본 = 진한 산호 #8b3224(--link) — 브랜드 묶음(brand.css ②)을 따라감 */
  --num-big:#cb5e4c;                 /* 흰 상자 큰 숫자(디자이너 화소 — 28px 큰 글자만, 흰 4 : 1) */
  --ink-sub:#696c70;                 /* 보조 글("최근 기록순" — 흰 5.3 · 바탕 5.1 : 1) */
  --band-bg:#fee2df;                 /* 안내 띠 바탕 */
  /* 칩 켜짐 · [확인] 그라데이션(디자이너 #fa917f→#f8765f · #fb8e7b→#fa7c65 — 주 색에서 섞어 브랜드 색을 따라감) · 켜기 단추 켜짐(#f9826d) */
  --chip-on-bg:linear-gradient(180deg,color-mix(in srgb,var(--accent) 96%,#e05a40),color-mix(in srgb,var(--accent) 66%,#ee4a2c));
  --ok-btn-bg:linear-gradient(180deg,color-mix(in srgb,var(--accent) 97%,#e05a40),color-mix(in srgb,var(--accent) 74%,#ee4a2c));
  --switch-on:color-mix(in srgb,var(--accent) 80%,#ee4a2c);
  --fab-scrim:rgba(0,0,0,.31);       /* [+] 메뉴 어둡게 */
  /* (v3.0 2차-P) 흰 칸 가장자리 — 찾기 칸·QR·머리 단추·흰 칩·흰 상자(그림 #efeeee 옅은 테두리 + 아래 번짐) · 흰 상자 그림자(그림 카드 #f2f2f2 + 약한 번짐) */
  --sh-ctl:inset 0 0 0 1.4px var(--line),0 1px 3px rgba(12,12,12,.05);
  --sh-card:inset 0 0 0 1px var(--line),0 1px 4px rgba(12,12,12,.05);
  /* ---- 상태: 글자로 써도 4.5:1 이상인 값 + 옅은 바탕 ---- */
  --ok:#147a3a;   --ok-soft:#e7f5ec;   /* (v3.0 1차 고침) #15803d → #147a3a — 옅은 초록 바탕 위 4.82:1(전 4.46) */
  /* 주의(--warn) = 붉은색(v2.35.12 디자이너 A0110 "겨자색 → 붉은색" — 위험 --dang 과 같은 값 · 흰 바탕 5.4:1 · 옅은 바탕 4.7:1).
     주의와 위험은 글·그림으로 가른다(알림 '꼭 확인해 주세요' 등). 옛 겨자색 #9a5b00·#fdf2df 는 쓰지 않는다.
     (v3.0) 도마도 산호(#ff9280 — 채움·그림)·진한 산호 글자(#8b3224)와는 밝기가 달라 따로 보인다 — 빨강은 v2 와 같은 값 */
  --warn:#c2362e; --warn-soft:#fcebea;
  --dang:#c2362e; --dang-soft:#fcebea;
  --info:#1f69b8; --info-soft:#e8f1fb;
  /* 매장이 만드는 개체 상태의 색(2026-10-14 custom-status — 팔레트 키 violet·teal). 글자 대비 흰 바탕 보라 7.1:1 · 하늘 5.4:1 */
  /* 분류 색 "주황"(A0110 — 주의 색이 붉게 바뀐 뒤에도 "빨강"과 다르게 따로 둔 주황 · 흰 바탕 5.2:1 · 옅은 바탕 4.7:1 · 겨자색 아님).
     쓰는 곳 = 매장 상태 팔레트 키 warn "주황"(css/ui.css — 상태 표시에서만 --warn 을 이 값으로) · 체중 기록 그림 바탕(js/gecko-history.js — 상태 기록 빨강과 겹치지 않게) */
  --orange:#c2410c; --orange-soft:#fff1e6;
  --violet:#6d28d9; --violet-soft:#f1ebfd;
  --teal:#0e7490;   --teal-soft:#e2f3f7;
  /* 상태 색 "청록"(팔레트 키 accent — 기본 "브리딩중") — 브랜드 주 색과 따로 고정(브랜드가 보라여도 "청록" 상태는 청록) */
  --jade:#0d7a71;   --jade-soft:#e6f4f2;
  --muted-soft:var(--fill);
  --star:#9c6210;          /* 별점 별 — (v3.0 2차-P) #b7791f → #9c6210: 작은 별(14 — 카드 별점 알약)도 흰 5.0 · 알약 #f7f7f7 4.7 : 1 */
  /* ---- 분류: 성별(A 팔레트 — ♂ 파랑 · ♀ 빨강 · 미구분 회색) ---- */
  --male:#2c6fa8;   --male-soft:#e6eff8;
  --female:#bf3a4f; --female-soft:#fbe9ec;
  --unknown:#5b646c; --unknown-soft:#eef0f1;
  /* ---- 사진 위 글래스(상태·사진 수 칩) ---- */
  --glass:rgba(255,255,255,.86); --glass-ink:#0c0c0c;
  --glass-dark:rgba(12,15,17,.55); --glass-dark-ink:#ffffff;

  /* ---- 타이포 ---- */
  --font:"Pretendard Variable","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono Variable",ui-monospace,Consolas,monospace;   /* 고유 ID(CG-…)·QR 토큰 같은 기계용 문자열에만 */
  /* (v3.0 도마도) 제목·큰 숫자·앱 이름 — 둥글고 굵은 글꼴. 굵기는 한 벌뿐이라 font-weight 를 따로 주지 않아도 된다 */
  --font-display:"Cafe24 Ssurround",var(--font);
  /* (v3.0 1차 고침 — domado-ui.md §2 글자 역할 · 그림 ÷ 3 × k 1.364) 써라운드는 앱 이름·홈 상자 제목·큰 숫자·단위 넷에만 */
  --fs-title:31.6px;   /* 쪽 제목("개체"·"MAIN") — Pretendard 700 */
  --fs-brand:24.9px;   /* 앱·브랜드 이름(머리) — 써라운드 */
  --fs-box-t:22.7px;   /* 홈 상자 제목 — 써라운드 */
  --fs-num:28.1px;     /* 큰 숫자 — 써라운드 */
  --fs-unit:19px;      /* 단위("개"·"마리") — 써라운드 */
  --fs-menu:19.9px;    /* [+] 메뉴 줄 · 작은 단추(EDIT) — Pretendard 500 */
  --fs-count:17.5px;   /* 개수 줄("162마리") — Pretendard 600 */
  --fs-chip:15px;      /* 칩 · 알약 · 탭 글자 · 안내 띠 · 보조 글(기본 하한 14 — 디자이너 안이 더 작게 주면 디자이너 안 · CLAUDE.md 원칙 0) */
  /* (v3.0 — v2.35.11 합침 · 디자이너 A0137·A0147·A0154 "폰트 줄이기") 디자이너가 말한 자리만 14 — 개체 목록 상태 칩 줄 · 휴대폰 도구 칸([태그]·[골라 보기]·[정렬]…
     · 개수 줄 [정렬 ▾]) · 구역 칸 수('13/16칸') · 휴대폰 상태·단계 칩 줄(계약서·도매 기록·경매 출품·알 단계·메이팅 결과). 그 밖의 칩·탭·안내 띠·보조 글은 --fs-chip 15 그대로.
     값 = 그림(ref/design_v2/3.png · 1080 폭) 칩 30.3~31.5 · 도구 칸 31.5~32.2 ÷ 3 × k 1.364(위 글자 역할과 같은 셈) = 13.8~14.6 → 14(계약 §2 칩 14~15 안) · 줄이는 건 글자만(칸 높이·폭 그대로) */
  --fs-chip-s:14px;
  /* 스케일 7단 — 기본 하한 14. 디자이너 안이 더 작게 주면 디자이너 안을 따른다(CLAUDE.md 원칙 0 · 사용자 2026-11-10 "디자이너 >>>>>> 우리 룰") */
  --t-xs:14px;    /* 보조·캡션 */
  --t-sm:15px;    /* 표 보조 줄 */
  --t-md:16px;    /* 본문(데스크톱) — 모바일은 --t-body 17 */
  --t-lg:18px;    /* 카드 제목·강조 본문 */
  --t-xl:22px;    /* 섹션 제목 */
  --t-2xl:28px;   /* 모바일 화면 제목 · 큰 숫자 */
  --t-3xl:36px;   /* 데스크톱 화면 제목(B hero) */
  --t-4xl:44px;   /* 상세 히어로 이름 */
  --t-body:16px;
  /* (v2.35.11 디자이너 A0137·A0147·A0154 — "폰트 줄이기") 휴대폰 상태 칩([전체·사육중만·보관함])·휴대폰 도구 칸([골라 보기]·[정렬]…)·구역 칸 수('13/16칸') 글자.
     디자이너가 숫자를 주지 않아 그림(ref/design_v2/3.png · 1080 폭 = 휴대폰 360 × 3)에서 잼: 본문 35.2px · 칩 30.3~31.5px · 도구 칸 31.5~32.2px
     → 칩 0.86~0.89배 · 도구 칸 0.90~0.91배 × 우리 본문 16px = 13.8~14.6 → 14px(칩 16·도구 칸 15 에서 내림). 줄이는 건 글자만 — 누름 칸 높이·폭은 그대로 */
  --t-chip:var(--fs-chip-s);   /* (v3.0) v2 이름 — 합친 v2 규칙(m02·계약서·도매·경매·m04·메이팅·구역 칸 수)이 그대로 쓰게 위 --fs-chip-s 와 같은 값 */
  --lh-tight:1.25; --lh:1.55;
  --w-reg:450; --w-med:550; --w-semi:600; --w-bold:700; --w-black:800;
  --track-tight:-0.022em;

  /* ---- 간격: 4px 그리드 ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;
  /* (v3.0 1차 고침 — domado-ui.md §1·§4) 휴대폰 가로 = 화면 폭 비율: 바깥 여백 하나(그림 46~51 → 폭의 4.63% · 360 에서 16.7) ·
     칸 사이 하나(찾기↔QR·도구 칸·칩·카드·홈 상자 — 그림 19~21 → 폭의 1.8%) · 세로 덩어리 사이 하나(그림 32~42 → 14.5) */
  /* (v3.0 2차-P — domado-ui.md §7 극단 화면) 폭 비율 값은 위·아래를 막는다(280 폭 → 12 · 넓은 창 → 24) · --m-col = 넓은 창에서 휴대폰 화면을 모으는 가운데 기둥 폭 */
  --page-x:clamp(12px,4.63vw,24px); --gap-x:clamp(5px,1.8vw,10px); --gap-block:14.5px;
  --m-col:600px;

  /* ---- 라운드 (B 의 큰 라운드, A 톤) ---- */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-2xl:32px; --r-full:999px;
  --r-photo:18px;          /* 카드 안 사진 */
  /* (v3.0 1차 고침 — domado-ui.md §4 모서리 · 그림 ÷ 3 × k) */
  --r-box:23px;            /* 홈 상자 */
  --r-card:18.6px;         /* 개체 사진 카드(카드 속 사진 = 카드 모서리 − 안쪽 여백) */
  --r-ctl:15px;            /* 칩 · 찾기 칸 · 필터 칸 · 안내 띠 · 보기 바꾸기 단추 */
  --r-btn-sm:7px;          /* 홈 작은 단추([EDIT]) */
  --r-menu:14.5px;         /* [+] 메뉴 줄 */
  --bw:2.7px;              /* 테두리 굵기 하나(그림 5~6 ÷ 3 × k) */
  --r-img:8px;             /* (2026-10-22 사용자 "너무 네모면 쫌") 정사각 로고·그림 넣는 칸 미리 보기 기본 모서리 — 조금만. 작은 그림은 폭 비율로 더 작게(ui.css .r-img) */
  /* (2026-10-14 UI 정돈 — team/contracts/ui-declutter.md §1 "모양 = 뜻")
     누르는 것(버튼·입력·필터·옵션·목록 행) = --r-btn 12px 둥근 네모 · 그 안에 들어간 것(세그먼트 칸·탭) = --r-btn-in 8px ·
     표시만 하는 것(상태·딱지·배지·토스트·개수) = --r-tag 알약. <button> 에 --r-tag/--r-full 을 쓰지 않는다. */
  --r-btn:15px; --r-btn-in:10px; --r-tag:999px;   /* (v3.0 2차-P) 누르는 것 모서리 = 칩·찾기 칸과 같은 한 값(--r-ctl 15 — 계약 §4) · 안에 든 칸 = 15 − 안쪽 여백 */
  /* 보조 버튼 면(.btn 기본) = 흰 면(--panel) + 그림자(--sh-1), 호버 = 들림(--sh-2) — UI 정돈 전 색으로 되돌림
     (2026-10-15 긴급패치, 사용자 "회색 버튼 못생겼다. 색상은 예전이 나음"). 모양(12px·크기·위계)은 정돈 뒤 그대로.
     회색 채움(B4b #d5d9db / 다크 #353c42)은 폐기. 회색 면(--fill·--fill-2) 위에서는 ui.css 가 흰 바탕 + 1.5px 테두리로 바꾼다.
     다크도 옛 .btn 과 같게 --panel + --sh-1(참조라 다크 값이 저절로 따라감 — 아래 다크 두 곳에도 같은 줄). */
  --btn2:var(--panel);
  --btn2-hover:var(--panel);
  --btn2-sh:var(--sh-1);
  --btn2-sh-hover:var(--sh-2);

  /* ---- 그림자 (A 의 중립 회색 확산) ---- */
  --sh-1:0 0 0 1px rgba(12,12,12,.045), 0 1px 2px rgba(12,12,12,.04), 0 4px 14px -6px rgba(12,12,12,.09);   /* 카드·pill */
  --sh-2:0 0 0 1px rgba(12,12,12,.05), 0 2px 4px rgba(12,12,12,.05), 0 16px 32px -12px rgba(12,12,12,.16); /* 호버 들림 */
  --sh-pop:0 0 0 1px rgba(12,12,12,.06), 0 12px 32px -8px rgba(12,12,12,.2);                              /* 메뉴·다이얼로그 */
  --sh-btn:0 1px 0 rgba(255,255,255,.14) inset, 0 1px 2px rgba(12,12,12,.12);
  --sh-brand:0 10px 24px -10px var(--accent-glow);   /* 주 버튼·+ — 색은 브랜드 묶음(--accent-glow, 어둡게 묶음이 다시 정함) */

  /* ---- 모션 ---- */
  --dur-1:140ms; --dur-2:220ms; --dur-3:340ms;
  --dur-page:180ms;   /* (v3.0 3차-F2) 쪽 이동 — 가운데 내용만 옅어졌다 나타남(team/plans/domado-motion.md §3 · 아래 끝 "쪽 이동 화면 전환") */
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.4,0,1,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --lift:translateY(-2px);
  --stagger:32ms;

  /* ---- 크기 ---- */
  --ctl:48px;        /* 버튼·입력 기본 */
  --ctl-lg:56px;     /* 화면의 주 행동 */
  --ctl-sm:44px;     /* 표 행 안 보조 버튼 등 좁은 곳(최소 — 누르는 곳 44 미만 금지, 2026-10-06) */
  --touch:48px;
  --row:64px;        /* 표 행 */
  --nav-h:76px;      /* 데스크톱 상단 내비 */
  --tabbar-h:68px;   /* 모바일 하단 탭바 */
  --page-max:1320px; /* 데스크톱 본문 최대 폭 */

  /* ---- 스크롤바(아래 "스크롤바 스킨") — 다크는 참조한 토큰(--line·--ink-*)이 바뀌므로 따로 정의하지 않는다 ---- */
  --sb-page:12px;    /* 페이지(창) 스크롤바 폭 */
  --sb-in:10px;      /* 안쪽 스크롤 칸(표·모달·메뉴·패널) 폭 */
  --sb-track:var(--line);                                        /* 옅은 홈 — 반투명이라 바탕·카드 어느 면 위에서나 어울린다 */
  --sb-thumb:color-mix(in srgb,var(--ink-4) 60%,var(--ink-3));   /* 손잡이(중간 톤) — 홈 대비 밝게 3.2:1↑ · 어둡게 4.3:1↑ */
  --sb-thumb-hover:var(--ink-3);                                 /* 마우스 올림 — 밝게 4.9:1↑ */
  --sb-thumb-active:var(--ink-2);                                /* 끄는 중 */

  color-scheme:light;
}

/* ================= 3) 다크 — html.dark-ok 화면만 (시스템 자동 · 수동 선택) ================= */
@media (prefers-color-scheme:dark){
  :root.dark-ok:not([data-theme=light]){
    --bg:#111111; --panel:#1b1b1b; --fill:#242424; --fill-2:#2e2e2e; --scrim:rgba(0,0,0,.6);
    --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12); --line-3:rgba(255,255,255,.24);
    --ink:#f3f3f2; --ink-2:#d4d4d2; --ink-3:#a9a9a7; --ink-4:#767674;
    --accent:#ff9a89; --accent-hover:#ffab9d; --accent-press:#ffbcb1; --accent-ink:#2a0f0a;
    --accent-soft:rgba(255,154,137,.16); --accent-ring:rgba(255,154,137,.4); --accent-glow:rgba(255,154,137,.45);
    --accent-2:color-mix(in srgb,var(--accent) 34%,var(--panel));
    /* 브랜드 묶음 ②③④ — 밝게 값(brand.css :root)이 어둡게로 새지 않게 기본 참조를 다시 정한다. ③ 머리 바탕은 어둡게 면 그대로 */
    --link:var(--accent); --link-hover:var(--accent-hover); --sel-line:var(--accent);
    --hl:var(--accent); --hl-ink:var(--accent-ink); --hl-soft:var(--accent-soft);
    --accent-text:var(--accent); --accent-text-hover:var(--accent-hover); --num-big:var(--accent); --ink-sub:var(--ink-3); --band-bg:var(--accent-soft); --fab-scrim:rgba(0,0,0,.55);
    --head-bg:color-mix(in srgb,var(--bg) 86%,transparent); --tab-bg:var(--panel);
    --head-ink:var(--ink-2); --head-ink-on:var(--ink); --head-ink-3:var(--ink-3); --head-hover:var(--fill); --head-on:var(--accent); --head-logo:none; --fab-sh:var(--sh-1);
    --ok:#4cc27a; --ok-soft:rgba(76,194,122,.15); --warn:#f07a72; --warn-soft:rgba(240,122,114,.15); --orange:#f0883e; --orange-soft:rgba(240,136,62,.15);
    --dang:#f07a72; --dang-soft:rgba(240,122,114,.15); --info:#6aa8eb; --info-soft:rgba(106,168,235,.15);
    --violet:#b69cf6; --violet-soft:rgba(182,156,246,.16); --teal:#4cc3db; --teal-soft:rgba(76,195,219,.15);
    --jade:#2bb3a6; --jade-soft:rgba(43,179,166,.16);
    --male:#7fb3e6; --male-soft:rgba(127,179,230,.16); --female:#f08a9a; --female-soft:rgba(240,138,154,.16);
    --unknown:#a2abb2; --unknown-soft:rgba(255,255,255,.08); --star:#e3b04b;
    --glass:rgba(27,27,27,.82); --glass-ink:#f3f3f2; --glass-dark:rgba(0,0,0,.6);
    --sh-1:0 0 0 1px rgba(255,255,255,.06); --sh-2:0 0 0 1px rgba(255,255,255,.09), 0 16px 32px -12px rgba(0,0,0,.6);
    --sh-pop:0 0 0 1px rgba(255,255,255,.09), 0 16px 40px -8px rgba(0,0,0,.65); --sh-btn:none;
    --btn2:var(--panel); --btn2-hover:var(--panel); --btn2-sh:var(--sh-1); --btn2-sh-hover:var(--sh-2);
    color-scheme:dark;
  }
}
:root.dark-ok[data-theme=dark]{
  --bg:#111111; --panel:#1b1b1b; --fill:#242424; --fill-2:#2e2e2e; --scrim:rgba(0,0,0,.6);
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12); --line-3:rgba(255,255,255,.24);
  --ink:#f3f3f2; --ink-2:#d4d4d2; --ink-3:#a9a9a7; --ink-4:#767674;
  --accent:#ff9a89; --accent-hover:#ffab9d; --accent-press:#ffbcb1; --accent-ink:#2a0f0a;
  --accent-soft:rgba(255,154,137,.16); --accent-ring:rgba(255,154,137,.4); --accent-glow:rgba(255,154,137,.45);
  --accent-2:color-mix(in srgb,var(--accent) 34%,var(--panel));
  /* 브랜드 묶음 ②③④ — 위 @media 묶음과 같다 */
  --link:var(--accent); --link-hover:var(--accent-hover); --sel-line:var(--accent);
  --hl:var(--accent); --hl-ink:var(--accent-ink); --hl-soft:var(--accent-soft);
  --accent-text:var(--accent); --accent-text-hover:var(--accent-hover); --num-big:var(--accent); --ink-sub:var(--ink-3); --band-bg:var(--accent-soft); --fab-scrim:rgba(0,0,0,.55);
  --head-bg:color-mix(in srgb,var(--bg) 86%,transparent); --tab-bg:var(--panel);
  --head-ink:var(--ink-2); --head-ink-on:var(--ink); --head-ink-3:var(--ink-3); --head-hover:var(--fill); --head-on:var(--accent); --head-logo:none; --fab-sh:var(--sh-1);
  --ok:#4cc27a; --ok-soft:rgba(76,194,122,.15); --warn:#f07a72; --warn-soft:rgba(240,122,114,.15); --orange:#f0883e; --orange-soft:rgba(240,136,62,.15);
  --dang:#f07a72; --dang-soft:rgba(240,122,114,.15); --info:#6aa8eb; --info-soft:rgba(106,168,235,.15);
  --violet:#b69cf6; --violet-soft:rgba(182,156,246,.16); --teal:#4cc3db; --teal-soft:rgba(76,195,219,.15);
  --jade:#2bb3a6; --jade-soft:rgba(43,179,166,.16);
  --male:#7fb3e6; --male-soft:rgba(127,179,230,.16); --female:#f08a9a; --female-soft:rgba(240,138,154,.16);
  --unknown:#a2abb2; --unknown-soft:rgba(255,255,255,.08); --star:#e3b04b;
  --glass:rgba(27,27,27,.82); --glass-ink:#f3f3f2; --glass-dark:rgba(0,0,0,.6);
  --sh-1:0 0 0 1px rgba(255,255,255,.06); --sh-2:0 0 0 1px rgba(255,255,255,.09), 0 16px 32px -12px rgba(0,0,0,.6);
  --sh-pop:0 0 0 1px rgba(255,255,255,.09), 0 16px 40px -8px rgba(0,0,0,.65); --sh-btn:none;
  --btn2:var(--panel); --btn2-hover:var(--panel); --btn2-sh:var(--sh-1); --btn2-sh-hover:var(--sh-2);
  color-scheme:dark;
}

/* ================= 리셋 · 기본 ================= */
*{box-sizing:border-box;}
/* hidden 속성은 항상 숨김 — .btn·.actbar 처럼 display 를 주는 규칙이 [hidden] 을 덮지 않게 전역으로 강제(모든 화면이 로드).
   화면별 개별 [hidden] 규칙은 두지 않는다. */
[hidden]{display:none!important;}
body{margin:0;background:var(--bg);color:var(--ink-2);
  font-family:var(--font);font-size:var(--t-body);line-height:var(--lh);font-weight:var(--w-reg);
  word-break:keep-all;overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;}
a{color:var(--link);text-decoration:none;} a:hover{color:var(--link-hover);}   /* ② 보조 색(브랜드) */
/* mono 는 고유 ID 같은 기계용 문자열에만(계약 §2-4). 숫자·날짜·일련번호는 Pretendard tabular-nums 로 충분. */
.mono{font-family:var(--mono);letter-spacing:-.01em;}
:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px;}
::selection{background:var(--accent-soft);}
@media print{ :root{color-scheme:light;} }

/* ================= 스크롤바 스킨 (사용자 지시 2026-10-14 "기본 스크롤이 못생겼다 — 어울리는 스킨") =================
   모든 화면이 이 파일을 부르므로 여기 한 곳에서만 칠한다. 화면 CSS·JS 주입 스타일은 스크롤바를 다시 칠하지 않는다(숨김 display:none 만 예외).
   모양: 옅은 둥근 홈(--sb-track) 안에 2px 여백을 둔 둥근 손잡이(--sb-thumb). 마우스를 올리면 진하고 조금 굵게, 끄는 중엔 더 진하게.
   폭(40대+ — 너무 가늘면 잡기 어렵다): 페이지 12px(손잡이 8 → 올리면 10) · 안쪽 칸 10px(6 → 8). 손잡이 최소 길이 48px.
   - 크롬·엣지·사파리 = ::-webkit-scrollbar — 마우스 쓰는 화면(hover:hover + pointer:fine)에서만.
     휴대폰·태블릿은 OS 오버레이 스크롤 그대로(웹킷 규칙이 자리를 차지하는 굵은 막대를 만들지 않게).
   - 파이어폭스 = 표준 scrollbar-color(색만 — 폭은 OS 기본 auto 유지, thin 은 너무 가늘다). 색만 바꾸고 폭·오버레이는 그대로라
     기기 조건 없이 준다(마우스 판정을 못 하는 환경에서도 같은 색).
     크롬 121+ 는 scrollbar-color/width 가 있으면 ::-webkit-scrollbar 를 무시하므로 표준 속성은 웹킷 의사 요소를 모르는 브라우저에만 준다.
   - screen 한정 — 인쇄엔 영향 없음. 폭이 기본(약 15px)보다 좁아질 뿐이라 가로 넘침이 새로 생기지 않는다. */
@media screen{
  @supports not selector(::-webkit-scrollbar){
    :root{scrollbar-color:var(--sb-thumb) var(--sb-track);}
  }
}
@media screen and (hover:hover) and (pointer:fine){
  ::-webkit-scrollbar{width:var(--sb-in);height:var(--sb-in);background:transparent;}
  /* 페이지(창) 스크롤바 — 크롬은 창 스크롤바 모양을 body 에서 먼저 찾고 없으면 html 에서 찾으므로 둘 다 준다 */
  html::-webkit-scrollbar,body::-webkit-scrollbar{width:var(--sb-page);height:var(--sb-page);}
  ::-webkit-scrollbar-track{background:var(--sb-track);border-radius:var(--r-full);}
  /* 안쪽 칸은 홈 양끝을 10px 띄운다 — 둥근 상자(메뉴·팝오버·표 상자, 모서리 24px 까지) 모서리에 홈·손잡이 끝이 잘리지 않게 */
  ::-webkit-scrollbar-track:vertical{margin:10px 0;}
  ::-webkit-scrollbar-track:horizontal{margin:0 10px;}
  html::-webkit-scrollbar-track:vertical,body::-webkit-scrollbar-track:vertical{margin:2px 0;}
  html::-webkit-scrollbar-track:horizontal,body::-webkit-scrollbar-track:horizontal{margin:0 2px;}
  ::-webkit-scrollbar-thumb{background-color:var(--sb-thumb);background-clip:padding-box;border:2px solid transparent;border-radius:var(--r-full);}
  ::-webkit-scrollbar-thumb:vertical{min-height:48px;}
  ::-webkit-scrollbar-thumb:horizontal{min-width:48px;}
  ::-webkit-scrollbar-thumb:hover{background-color:var(--sb-thumb-hover);border-width:1px;}
  ::-webkit-scrollbar-thumb:active{background-color:var(--sb-thumb-active);border-width:1px;}
  ::-webkit-scrollbar-corner{background:transparent;}
}

/* ==================== (v3.0 3차-F2 — team/plans/domado-motion.md §3 · 사용자 2026-11-04 "(가) 옅어졌다 나타나기") 쪽 이동 화면 전환 ====================
   문서 사이 View Transitions — 앞 쪽과 새 쪽 **둘 다** 이 규칙이 있어야 돈다 → 모든 쪽이 부르는 tokens.css 에 둔다(앱 틀·입력·공개 쪽 포함 — "모든 쪽 같음").
   · 가운데 내용(root)만 옅어졌다 나타남 0.18초(--dur-page · --ease) — 위아래 미끄러짐 없음(옛 transitions.css 의 6px 는 뺌).
   · 머리·아래 탭·[+](css/m-shell.css 끝)·컴퓨터 메뉴 줄(css/shell-desktop.css 끝)은 이름이 있어 앞뒤 쪽에서 이어짐 = 제자리(같은 그림이면 가만히).
     화면 밖으로 굴러가 있던 머리·열린 창 위의 탭 줄은 이름을 빼고 넘김(미끄러져 내려오지 않게 — js/m-shell-paint.js pageswap·pagereveal).
   · 동작 줄이기 설정이면 전환 자체를 켜지 않음(바로 바뀜) · 모르는 브라우저(파이어폭스·옛 사파리)는 이 줄을 건너뜀 = 지금처럼 바로 바뀜.
   · 새 쪽이 4초 안에 안 그려지면 브라우저가 전환을 건너뜀(망가지지 않음). 전환 중(0.18초) 누름은 막힘 — 그래서 짧게.
   · 이름 짓기(나중 §10 — 카드 미끄러짐·사진 이어 커지기 등이 같은 틀을 씀): 틀 이름 = ms-head·ms-tabbar·ms-fab·cg-side·cg-top(이 다섯은 예약 — 다른 데 쓰지 않음).
     새 이름은 `cg-<무엇>`(예: cg-photo-<개체 id>) · 한 쪽에 같은 이름 둘이면 브라우저가 전환을 통째로 건너뜀 → 앞 쪽은 누른 그 하나에만 이름을 달고, 새 쪽도 하나만.
     입장 움직임 끄기 = [data-cg-seen](css/transitions.css) · 움직임마다 길이는 --dur-* 토큰(이 파일 위) 만. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto;}
}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
  animation-duration:var(--dur-page,180ms);animation-timing-function:var(--ease,cubic-bezier(.2,.7,.2,1));}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;}
}