/*
 * CGM beta2 — 디자인 토큰 · 리셋 (계약: team/contracts/beta2-ui.md, 소유: builder-U0)
 *
 *   색 = 시안 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;
}

:root{
  /* ================= 1) 새 토큰 ================= */
  /* ---- 면 (A) ---- */
  --bg:#f6f7f7;            /* 앱 바탕 */
  --panel:#ffffff;         /* 카드·패널·입력 바탕 */
  --fill:#f1f2f3;          /* 눌림·세그먼트 바탕·호버 */
  --fill-2:#e8eaeb;        /* 한 단계 진한 채움(선택된 회색) */
  --scrim:rgba(17,24,28,.42);
  /* ---- 선: 행 구분 헤어라인만. 묶음은 여백·면·그림자로 ---- */
  --line:rgba(17,24,28,.07);
  --line-2:rgba(17,24,28,.12);
  --line-3:rgba(17,24,28,.22);     /* 입력칸 테두리(경계가 분명해야 하는 곳) */
  /* ---- 글: 대비 — ink 18:1 · ink-2 10:1 · ink-3 6:1 (흰 바탕). ink-4 는 글자에 쓰지 않는다(아이콘·비활성·placeholder) ---- */
  --ink:#121619; --ink-2:#3b434a; --ink-3:#5b646c; --ink-4:#8a939a;
  /* ---- 브랜드 색 묶음 (멀티 브랜드 2단계 — js/brand-colors.js · team/plans/multi-brand.html 7-1) ----
     주소별 /brand/brand.css(화면 CSS 뒤)가 이 묶음만 덮는다(brand-colors.js BRAND_VARS). 아래 "상태"·"분류"(뜻 있는 색)는 묶음 밖 — 못 바꿈.
     기본 값 = CGM 청록(지금 색). ②③④ 는 기본이 ①·지금 모양을 가리키는 참조라, 브랜드가 ①만 바꿔도 따라간다.
     화면 CSS 는 브랜드 색을 직접(#hex) 쓰지 않고 이 토큰을 쓴다. 어둡게 묶음(아래 3)도 이 토큰을 모두 다시 정한다(밝게 값이 새지 않게).
     ① 주 색 — 진한 버튼·켜짐·선택 표시·포커스. --accent-glow = 주 버튼 그림자(--sh-brand)의 색 */
  --accent:#0d7a71; --accent-hover:#0a655e; --accent-press:#084f49; --accent-ink:#ffffff;
  --accent-soft:#e6f4f2; --accent-ring:rgba(13,122,113,.32); --accent-glow:rgba(13,122,113,.55);
  /*  ② 보조 — 링크·글자 버튼(.btn.txt)·"이어 보기 ›" 글자(--link·--link-hover) · 고른 칸 테두리(--sel-line) */
  --link:var(--accent); --link-hover:var(--accent-hover); --sel-line:var(--accent);
  /*  ③ 머리·메뉴 바탕(밝게 모드만) — 컴퓨터 위 메뉴 줄(--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); --hl-ink:var(--accent-ink); --hl-soft:var(--accent-soft);
  /* ---- 상태: 글자로 써도 4.5:1 이상인 값 + 옅은 바탕 ---- */
  --ok:#15803d;   --ok-soft:#e7f5ec;
  --warn:#9a5b00; --warn-soft:#fdf2df;
  --dang:#c2362e; --dang-soft:#fcebea;
  --info:#1f69b8; --info-soft:#e8f1fb;
  /* 매장이 만드는 개체 상태의 색(2026-10-14 custom-status — 팔레트 키 violet·teal). 글자 대비 흰 바탕 보라 7.1:1 · 하늘 5.4:1 */
  --violet:#6d28d9; --violet-soft:#f1ebfd;
  --teal:#0e7490;   --teal-soft:#e2f3f7;
  /* 상태 색 "청록"(팔레트 키 accent — 기본 "브리딩중") — 브랜드 주 색과 따로 고정(브랜드가 보라여도 "청록" 상태는 청록) */
  --jade:#0d7a71;   --jade-soft:#e6f4f2;
  --muted-soft:var(--fill);
  --star:#b7791f;          /* 별점 별 */
  /* ---- 분류: 성별(A 팔레트 — ♂ 파랑 · ♀ 빨강 · 미구분 회색) ---- */
  --male:#2c6fa8;   --male-soft:#e6eff8;
  --female:#bf3a4f; --female-soft:#fbe9ec;
  --unknown:#5b646c; --unknown-soft:#eef0f1;
  /* ---- 사진 위 글래스(상태·사진 수 칩) ---- */
  --glass:rgba(255,255,255,.86); --glass-ink:#121619;
  --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 토큰 같은 기계용 문자열에만 */
  /* 스케일 7단 — 14 미만 금지 */
  --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;
  --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;

  /* ---- 라운드 (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;          /* 카드 안 사진 */
  /* (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:12px; --r-btn-in:8px; --r-tag:999px;
  /* 보조 버튼 면(.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(17,24,28,.04), 0 1px 2px rgba(17,24,28,.05), 0 4px 14px -6px rgba(17,24,28,.10);   /* 카드·pill */
  --sh-2:0 0 0 1px rgba(17,24,28,.05), 0 2px 4px rgba(17,24,28,.05), 0 16px 32px -12px rgba(17,24,28,.18); /* 호버 들림 */
  --sh-pop:0 0 0 1px rgba(17,24,28,.06), 0 12px 32px -8px rgba(17,24,28,.22);                              /* 메뉴·다이얼로그 */
  --sh-btn:0 1px 0 rgba(255,255,255,.14) inset, 0 1px 2px rgba(17,24,28,.14);
  --sh-brand:0 10px 24px -10px var(--accent-glow);   /* 주 버튼·+ — 색은 브랜드 묶음(--accent-glow, 어둡게 묶음이 다시 정함) */

  /* ---- 모션 ---- */
  --dur-1:140ms; --dur-2:220ms; --dur-3:340ms;
  --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:#0d1012; --panel:#161a1d; --fill:#1e2327; --fill-2:#272d32; --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:#eef1f3; --ink-2:#cdd3d8; --ink-3:#a2abb2; --ink-4:#6f7a83;
    --accent:#2bb3a6; --accent-hover:#41c4b7; --accent-press:#5fd2c6; --accent-ink:#04201d;
    --accent-soft:rgba(43,179,166,.16); --accent-ring:rgba(43,179,166,.4); --accent-glow:rgba(43,179,166,.45);
    /* 브랜드 묶음 ②③④ — 밝게 값(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);
    --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:#e5a740; --warn-soft:rgba(229,167,64,.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(22,26,29,.82); --glass-ink:#eef1f3; --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:#0d1012; --panel:#161a1d; --fill:#1e2327; --fill-2:#272d32; --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:#eef1f3; --ink-2:#cdd3d8; --ink-3:#a2abb2; --ink-4:#6f7a83;
  --accent:#2bb3a6; --accent-hover:#41c4b7; --accent-press:#5fd2c6; --accent-ink:#04201d;
  --accent-soft:rgba(43,179,166,.16); --accent-ring:rgba(43,179,166,.4); --accent-glow:rgba(43,179,166,.45);
  /* 브랜드 묶음 ②③④ — 위 @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);
  --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:#e5a740; --warn-soft:rgba(229,167,64,.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(22,26,29,.82); --glass-ink:#eef1f3; --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;}
}