/* 옵스원 테마 스타일(스킨) — 기본 디자인은 :root(tokens.css) 그대로, data-skin 선택 시에만 토큰 오버라이드.
   라이트 모드 한정([data-theme="dark"] 제외) — 다크는 기존 프리미엄 다크 팔레트를 그대로 쓴다.
   출처 시안: design-samples/ (2026-08-30 디자인 시안 트랙). 값은 각 벤치마크 실측·시안 확정값. */

/* ── 고요 (calm) — Things 3 계열: 순백에 가까운 바탕·차분한 파랑·그림자 최소 ── */
html[data-skin="calm"]:not([data-theme="dark"]) {
  --bg: #F8F8F7;
  --surface: #FFFFFF;
  --surface-2: #F3F3F1;
  --surface-3: #EDEDEA;
  --primary: #3478F6;
  --primary-strong: #2361D4;
  --primary-soft: #EAF1FE;
  --primary-softer: #F4F8FF;
  --ai: #3478F6;
  --ai-strong: #2361D4;
  --ai-soft: #EAF1FE;
  --info: #3478F6;
  --info-soft: #EAF1FE;
  --text-strong: #1C1C1E;
  --text: #3A3A3C;
  --text-muted: #77777B;
  --text-faint: #A8A8AC;
  --border: #ECECEA;
  --border-2: #E0E0DD;
  --shadow-xs: 0 1px 1px rgba(28,28,30,.03);
  --shadow-sm: 0 1px 3px rgba(28,28,30,.04);
  --shadow-md: 0 6px 20px rgba(28,28,30,.06);
  --shadow-lg: 0 14px 40px rgba(28,28,30,.10);
}

/* ── 온화 (toss) — 토스 계열: 회백 바탕·토스블루·큰 라운딩·부드러운 회색 위계 ── */
html[data-skin="toss"]:not([data-theme="dark"]) {
  --bg: #F2F4F6;
  --surface: #FFFFFF;
  --surface-2: #F2F4F6;
  --surface-3: #E5E8EB;
  --primary: #3182F6;
  --primary-strong: #1B64DA;
  --primary-soft: #E8F3FF;
  --primary-softer: #F2F8FF;
  --ai: #3182F6;
  --ai-strong: #1B64DA;
  --ai-soft: #E8F3FF;
  --success: #02A262;
  --success-soft: #E5F6EE;
  --warning: #C76A00;
  --warning-soft: #FFF3E0;
  --danger: #F04452;
  --danger-soft: #FDEDEE;
  --info: #3182F6;
  --info-soft: #E8F3FF;
  --text-strong: #191F28;
  --text: #333D4B;
  --text-muted: #6B7684;
  --text-faint: #8B95A1;
  --border: #EBEEF1;
  --border-2: #E5E8EB;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --shadow-xs: 0 1px 2px rgba(25,31,40,.03);
  --shadow-sm: 0 1px 4px rgba(25,31,40,.04);
  --shadow-md: 0 8px 24px rgba(25,31,40,.06);
  --shadow-lg: 0 16px 44px rgba(25,31,40,.10);
}

/* ── 경쾌 (solapi) — 솔라피 계열: 흰 바탕·#4541FF·파스텔 틴트 타일 (solapi.com CSS 실측) ── */
html[data-skin="solapi"]:not([data-theme="dark"]) {
  --bg: #F7F7FA;
  --surface: #FFFFFF;
  --surface-2: #F2F4F6;
  --surface-3: #ECEEF3;
  --primary: #4541FF;
  --primary-strong: #332FE0;
  --primary-soft: #EDECFF;
  --primary-softer: #F5F5FF;
  --ai: #4541FF;
  --ai-strong: #332FE0;
  --ai-soft: #EDECFF;
  --info: #4541FF;
  --info-soft: #E6F0FF;
  --text-strong: #222222;
  --text: #3D4149;
  --text-muted: #71757D;
  --text-faint: #9DA1A8;
  --border: #EAECF0;
  --border-2: #E0E3E8;
  /* 파스텔 틴트 타일 — 솔라피 시그니처(연블루·피치·옐로·그린·바이올렛) */
  --tile-blue-bg: #D4E6FF;  --tile-blue-fg: #1D5DC4;
  --tile-red-bg: #FFE9DC;   --tile-red-fg: #C1401A;
  --tile-green-bg: #DFEEDD; --tile-green-fg: #2E6B33;
  --tile-amber-bg: #FFF4CC; --tile-amber-fg: #8A6C1B;
  --tile-purple-bg: #E9E7FF; --tile-purple-fg: #4541FF;
}

/* ── 신뢰 (stripe) — 스트라이프 계열: 은청 바탕·인디고·작은 라운딩·정갈한 보더 ── */
html[data-skin="stripe"]:not([data-theme="dark"]) {
  --bg: #F6F8FA;
  --surface: #FFFFFF;
  --surface-2: #F0F3F6;
  --surface-3: #E9EDF1;
  --primary: #635BFF;
  --primary-strong: #5851E8;
  --primary-soft: #EFEEFF;
  --primary-softer: #F7F6FF;
  --ai: #635BFF;
  --ai-strong: #5851E8;
  --ai-soft: #EFEEFF;
  --success: #217A4B;
  --success-soft: #E4F5EB;
  --warning: #C84801;
  --warning-soft: #FCEDDC;
  --danger: #DF1B41;
  --danger-soft: #FCEDF0;
  --info: #0570DE;
  --info-soft: #E7F1FC;
  --text-strong: #1A1F36;
  --text: #404452;
  --text-muted: #6A7383;
  --text-faint: #A3ACBA;
  --border: #E3E8EE;
  --border-2: #D5DBE1;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --shadow-xs: 0 1px 1px rgba(26,31,54,.04);
  --shadow-sm: 0 1px 1px rgba(26,31,54,.04), 0 2px 5px rgba(26,31,54,.05);
  --shadow-md: 0 6px 18px rgba(26,31,54,.08);
  --shadow-lg: 0 15px 35px rgba(26,31,54,.12);
}

/* ── 잉크 (ink) — 미니멀 에디토리얼 계열: 웜본 바탕·잉크 블랙 액센트·평면 ── */
html[data-skin="ink"]:not([data-theme="dark"]) {
  --bg: #FBFBFA;
  --surface: #FFFFFF;
  --surface-2: #F7F6F3;
  --surface-3: #F1F0EC;
  --primary: #26282B;
  --primary-strong: #000000;
  --primary-soft: #EEEDEA;
  --primary-softer: #F6F5F2;
  --ai: #26282B;
  --ai-strong: #000000;
  --ai-soft: #EEEDEA;
  --success: #346538;
  --success-soft: #EDF3EC;
  --warning: #956400;
  --warning-soft: #FBF3DB;
  --danger: #9F2F2D;
  --danger-soft: #FDEBEC;
  --info: #1F6C9F;
  --info-soft: #E1F3FE;
  --text-strong: #191B1D;
  --text: #2F3437;
  --text-muted: #787774;
  --text-faint: #A8A5A0;
  --border: #EAEAEA;
  --border-2: #DDDAD4;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 12px;
  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.03);
  --shadow-md: 0 2px 8px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.09);
}

/* ── 스킨별 하드코딩 보정 — .btn-primary 그림자가 코그 파랑(45,91,255) 고정이라 스킨 색으로 맞춘다 ── */
html[data-skin="calm"]:not([data-theme="dark"]) .btn-primary { box-shadow: 0 8px 18px rgba(52,120,246,.20); }
html[data-skin="toss"]:not([data-theme="dark"]) .btn-primary { box-shadow: 0 8px 18px rgba(49,130,246,.22); }
html[data-skin="solapi"]:not([data-theme="dark"]) .btn-primary { box-shadow: 0 8px 18px rgba(69,65,255,.24); }
html[data-skin="stripe"]:not([data-theme="dark"]) .btn-primary { box-shadow: 0 8px 18px rgba(99,91,255,.22); }
html[data-skin="ink"]:not([data-theme="dark"]) .btn-primary { box-shadow: 0 6px 16px rgba(0,0,0,.16); }

/* ════ 2차 확장 (부장님 2026-08-30 "나머지 스킨도 모두") — 라이트 6종 + 다크 전용 2종 ════ */

/* ── 산뜻 (google) — 구글 M3·워크스페이스 계열: 토널 블루 서피스·4색 상태 ── */
html[data-skin="google"]:not([data-theme="dark"]) {
  --bg: #F8FAFD;
  --surface: #FFFFFF;
  --surface-2: #EAF1FB;
  --surface-3: #E1E9F5;
  --primary: #1A73E8;
  --primary-strong: #185ABC;
  --primary-soft: #D3E3FD;
  --primary-softer: #EAF3FE;
  --ai: #1A73E8; --ai-strong: #185ABC; --ai-soft: #D3E3FD;
  --success: #188038; --success-soft: #E6F4EA;
  --warning: #B26A00; --warning-soft: #FEF7E0;
  --danger: #D93025;  --danger-soft: #FCE8E6;
  --info: #1A73E8;    --info-soft: #D3E3FD;
  --text-strong: #1F1F1F; --text: #444746; --text-muted: #5F6368; --text-faint: #9AA0A6;
  --border: #E1E3E1; --border-2: #D3D6D3;
  --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px;
  --shadow-xs: 0 1px 2px rgba(60,64,67,.10);
  --shadow-sm: 0 1px 2px rgba(60,64,67,.12);
  --shadow-md: 0 4px 12px rgba(60,64,67,.15);
  --shadow-lg: 0 8px 28px rgba(60,64,67,.22);
}

/* ── 곡선 (oneui) — 삼성 One UI 계열: 연회백 바탕·스쿼클 대라운딩·삼성 블루 ── */
html[data-skin="oneui"]:not([data-theme="dark"]) {
  --bg: #F2F2F7;
  --surface: #FFFFFF;
  --surface-2: #F7F7FA;
  --surface-3: #ECECF0;
  --primary: #0381FE;
  --primary-strong: #0263D1;
  --primary-soft: #E6F1FE;
  --primary-softer: #F2F8FF;
  --ai: #0381FE; --ai-strong: #0263D1; --ai-soft: #E6F1FE;
  --success: #23A566; --success-soft: #E8F7EF;
  --warning: #C4660A; --warning-soft: #FDF1E2;
  --danger: #E4373A;  --danger-soft: #FEECEC;
  --info: #0381FE;    --info-soft: #E6F1FE;
  --text-strong: #010101; --text: #3D3D40; --text-muted: #79797D; --text-faint: #ABABB0;
  --border: #EDEDF0; --border-2: #E0E0E4;
  --r-sm: 14px; --r-md: 18px; --r-lg: 22px; --r-xl: 26px;
  --shadow-xs: 0 1px 3px rgba(0,0,0,.03);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.04);
  --shadow-md: 0 6px 20px rgba(0,0,0,.07);
  --shadow-lg: 0 14px 40px rgba(0,0,0,.12);
}

/* ── 초록 (naver) — 네이버 실무 계열: 화이트·네이버그린·각진 실무 라운딩 ── */
html[data-skin="naver"]:not([data-theme="dark"]) {
  --bg: #FAFBFC;
  --surface: #FFFFFF;
  --surface-2: #F5F6F8;
  --surface-3: #EEF0F2;
  --primary: #03AA4F;
  --primary-strong: #029546;
  --primary-soft: #EAF9F1;
  --primary-softer: #F4FCF7;
  --ai: #03AA4F; --ai-strong: #029546; --ai-soft: #EAF9F1;
  --success: #0EA05E; --success-soft: #E7F6EE;
  --warning: #C76B0C; --warning-soft: #FCF1E1;
  --danger: #E5493A;  --danger-soft: #FDEEEC;
  --info: #3462D8;    --info-soft: #EBF0FC;
  --text-strong: #202124; --text: #404248; --text-muted: #71737A; --text-faint: #A5A8AF;
  --border: #E4E8EB; --border-2: #D6DADF;
  --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 14px;
  --shadow-xs: 0 1px 2px rgba(32,33,36,.03);
  --shadow-sm: 0 1px 3px rgba(32,33,36,.05);
  --shadow-md: 0 5px 16px rgba(32,33,36,.08);
  --shadow-lg: 0 12px 32px rgba(32,33,36,.12);
}

/* ── 노랑 (kakao) — 카카오 계열: 잉크 블랙 버튼 + 카카오옐로 소프트(활성·칩 배경) ── */
html[data-skin="kakao"]:not([data-theme="dark"]) {
  --bg: #F9F9FA;
  --surface: #FFFFFF;
  --surface-2: #F4F4F6;
  --surface-3: #ECECEF;
  --primary: #1A1A1A;
  --primary-strong: #000000;
  --primary-soft: #FFF3B8;
  --primary-softer: #FFF9DC;
  --ai: #1A1A1A; --ai-strong: #000000; --ai-soft: #FFF3B8;
  --success: #22A06B; --success-soft: #E8F6EF;
  --warning: #C87A0A; --warning-soft: #FBF2DF;
  --danger: #E8464C;  --danger-soft: #FDEDEE;
  --info: #3D6AF2;    --info-soft: #ECF1FE;
  --text-strong: #191919; --text: #43464D; --text-muted: #7B7F87; --text-faint: #AEB1B7;
  --border: #EBECEF; --border-2: #DFE1E5;
  --r-sm: 12px; --r-md: 16px; --r-lg: 18px; --r-xl: 20px;
  --shadow-xs: 0 1px 2px rgba(25,25,25,.03);
  --shadow-sm: 0 1px 3px rgba(25,25,25,.05);
  --shadow-md: 0 6px 18px rgba(25,25,25,.07);
  --shadow-lg: 0 14px 36px rgba(25,25,25,.12);
}

/* ── 담백 (apple) — 애플 HIG 계열: 애플 그레이·시스템 블루·절제 그림자 ── */
html[data-skin="apple"]:not([data-theme="dark"]) {
  --bg: #F5F5F7;
  --surface: #FFFFFF;
  --surface-2: #F2F2F4;
  --surface-3: #E8E8ED;
  --primary: #007AFF;
  --primary-strong: #0062CC;
  --primary-soft: #E5F1FF;
  --primary-softer: #F2F8FF;
  --ai: #007AFF; --ai-strong: #0062CC; --ai-soft: #E5F1FF;
  --success: #248A3D; --success-soft: #E9F6EE;
  --warning: #B36B00; --warning-soft: #FFF3E0;
  --danger: #D93A30;  --danger-soft: #FDEDEB;
  --info: #007AFF;    --info-soft: #E5F1FF;
  --text-strong: #1D1D1F; --text: #3A3A3C; --text-muted: #6E6E73; --text-faint: #AEAEB2;
  --border: #E5E5EA; --border-2: #D8D8DE;
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 20px;
  --shadow-xs: 0 1px 2px rgba(29,29,31,.04);
  --shadow-sm: 0 2px 6px rgba(29,29,31,.05);
  --shadow-md: 0 8px 24px rgba(29,29,31,.08);
  --shadow-lg: 0 16px 44px rgba(29,29,31,.14);
}

/* ════════════════════════════════════════════════════════════════════
   Refero 실측 소싱 1차 (2026-09-13, 부장님 "ㄱㄱ") — 5종 후보. 값은 refero_get_style 실측(마케팅 페이지 기준).
   "실측"이라 적힌 값은 Refero가 준 그대로, "파생"은 실측 두 값 사이·톤을 맞춘 값. 순흑 #000000은 §8로 피했다.
   theme.js SKINS 목록에 아직 없어 라이브에서는 선택되지 않는다(부장님이 고른 뒤 등록).
   출처 UUID·이유는 _plans/2026-09-13_Refero_스킨소싱/PLAN.md.
   ════════════════════════════════════════════════════════════════════ */

/* ── 정밀 (vercel) — vercel.com: 흑백 모노크롬·검정 CTA·전기파랑 한 점·1px 링 그림자 ── */
html[data-skin="vercel"]:not([data-theme="dark"]) {
  --bg: #FAFAFA;              /* 실측 Cloud Canvas */
  --surface: #FFFFFF;         /* 실측 Elevated Surface */
  --surface-2: #F5F5F5;       /* 파생 */
  --surface-3: #EBEBEB;       /* 실측 Border Light 톤 */
  --primary: #171717;         /* 실측 Text Primary = 검정 버튼 */
  --primary-strong: #0A0A0A;  /* 파생(순흑 회피) */
  --primary-soft: #F2F2F2;
  --primary-softer: #FAFAFA;
  --ai: #0070F3; --ai-strong: #0059C2; --ai-soft: #EAF3FF;   /* 실측 Electric Blue — 활성·링크 한정 */
  --info: #0070F3;    --info-soft: #EAF3FF;
  --danger: #E5484D;  --danger-soft: #FCEAEA;                /* 실측 Vivid Crimson(=KOG 기본과 동일) */
  --text-strong: #171717; --text: #4D4D4D; --text-muted: #7D7D7D; --text-faint: #A3A3A3;   /* 앞 셋 실측, faint 파생 */
  --border: #EBEBEB; --border-2: #DEDEDE;                    /* border 실측, border-2 파생 */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 12px;      /* 실측 default 6 · large 12 */
  --shadow-xs: 0 0 0 1px rgba(0,0,0,.08);
  --shadow-sm: 0 0 0 1px rgba(0,0,0,.08), 0 2px 2px rgba(0,0,0,.04);                       /* 실측 Content Card */
  --shadow-md: 0 0 0 1px rgba(0,0,0,.08), 0 2px 2px rgba(0,0,0,.04), 0 8px 8px -8px rgba(0,0,0,.04); /* 실측 Hover */
  --shadow-lg: 0 0 0 1px rgba(0,0,0,.08), 0 16px 32px rgba(0,0,0,.08);
}

/* ── 종이 (dropbox) — dropbox.com: 크림 캔버스·아몬드 표면·로열블루·그림자 대신 배경 톤 차 ── */
html[data-skin="dropbox"]:not([data-theme="dark"]) {
  --bg: #F7F5F2;              /* 실측 Off-White Canvas */
  --surface: #FFFFFF;         /* 실측 Cloud White */
  --surface-2: #F7F5F2;
  --surface-3: #EEE9E2;       /* 실측 Almond Dust */
  --primary: #0061FE;         /* 실측 Royal Blue */
  --primary-strong: #0052D6;  /* 파생 */
  --primary-soft: #E6EEFF;
  --primary-softer: #F2F6FF;
  --ai: #0061FE; --ai-strong: #0052D6; --ai-soft: #E6EEFF;
  --info: #0061FE;    --info-soft: #E6EEFF;
  --text-strong: #1E1919; --text: #3B3634; --text-muted: #716B61; --text-faint: #A39E97;   /* strong·muted 실측, 나머지 파생 */
  --border: #E8E3DC; --border-2: #C6C4C3;                    /* border 파생, border-2 실측 Ash Border */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;     /* 실측 default 8 · nav 12 · buttons 16 · large 20 */
  --shadow-xs: 0 1px 2px rgba(30,25,25,.04);
  --shadow-sm: 0 1px 3px rgba(30,25,25,.05);
  --shadow-md: 0 6px 20px rgba(30,25,25,.06);
  --shadow-lg: 0 14px 40px rgba(30,25,25,.10);
}

/* ── 산호 (airbnb) — airbnb.com: 산호 한 색이 서명·카본 텍스트·20px 카드·3겹 옅은 그림자 ── */
html[data-skin="airbnb"]:not([data-theme="dark"]) {
  --bg: #F7F7F7;              /* 실측 Fog */
  --surface: #FFFFFF;         /* 실측 Cloud */
  --surface-2: #F7F7F7;
  --surface-3: #EBEBEB;       /* 실측 Mist */
  --primary: #FF385C;         /* 실측 Rausch Coral */
  --primary-strong: #E00B41;  /* 실측 Rausch Deep */
  --primary-soft: #FFE8EC;    /* 파생 */
  --primary-softer: #FFF4F6;
  --ai: #FF385C; --ai-strong: #E00B41; --ai-soft: #FFE8EC;
  --danger: #C13515;  --danger-soft: #FBE9E4;                /* 산호와 겹치지 않게 — 에어비앤비 공식 팔레트 Arches */
  --info: #222222;    --info-soft: #EBEBEB;                  /* 정보는 무채색(산호는 브랜드 한 점) */
  --text-strong: #222222; --text: #3A3A3A; --text-muted: #6A6A6A; --text-faint: #B0B0B0;   /* strong·muted·faint 실측 */
  --border: #EBEBEB; --border-2: #DDDDDD;                    /* 실측 Mist · Pebble */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 20px;     /* 실측 buttons 8 · inputs 14 · cards 20 */
  --shadow-xs: 0 0 0 1px rgba(0,0,0,.02), 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 0 0 1px rgba(0,0,0,.02), 0 2px 6px rgba(0,0,0,.04);
  --shadow-md: 0 0 0 1px rgba(0,0,0,.02), 0 2px 6px rgba(0,0,0,.04), 0 4px 8px rgba(0,0,0,.10);  /* 실측 Search Bar / Popover */
  --shadow-lg: 0 0 0 1px rgba(0,0,0,.02), 0 8px 16px rgba(0,0,0,.12);
}

/* ── 안개 (chatgpt) — chatgpt.com: 안개 회색 사이드바·검정 버튼·링크 파랑·그림자 0(배경 톤 차로 깊이) ── */
html[data-skin="chatgpt"]:not([data-theme="dark"]) {
  --bg: #F9F9F9;              /* 실측 Fog */
  --surface: #FFFFFF;         /* 실측 Snow */
  --surface-2: #F9F9F9;
  --surface-3: #ECECEC;       /* 실측 Arctic Mist */
  --primary: #0D0D0D;         /* 실측 Carbon = 검정 버튼 */
  --primary-strong: #2A2A2A;  /* 파생(검정 버튼의 hover는 밝아진다) */
  --primary-soft: #ECECEC;
  --primary-softer: #F9F9F9;
  --ai: #0D0D0D; --ai-strong: #2A2A2A; --ai-soft: #ECECEC;
  --info: #007AFF;    --info-soft: #E5F1FF;                  /* 실측 Link Blue */
  --text-strong: #0D0D0D; --text: #2F2F2F; --text-muted: #5D5D5D; --text-faint: #8F8F8F;   /* strong·muted(Pewter)·faint(Stone) 실측 */
  --border: #ECECEC; --border-2: #E0E0E0;                    /* border 실측, border-2 파생 */
  --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;    /* 실측 buttons/default 10 · input 28 */
  --shadow-xs: 0 0 0 1px rgba(13,13,13,.04);
  --shadow-sm: 0 0 0 1px rgba(13,13,13,.05);
  --shadow-md: 0 0 0 1px rgba(13,13,13,.06), 0 4px 12px rgba(13,13,13,.04);
  --shadow-lg: 0 12px 32px rgba(13,13,13,.10);
}

/* ── 사무 (microsoft) — microsoft.com: Segoe UI·직각(0~2px)·마이크로소프트 블루·2겹 카탈로그 그림자 ── */
html[data-skin="microsoft"]:not([data-theme="dark"]) {
  --bg: #F2F2F2;              /* 실측 Fog */
  --surface: #FFFFFF;
  --surface-2: #F2F2F2;
  --surface-3: #E6E6E6;       /* 파생 */
  --primary: #0067B8;         /* 실측 Microsoft Blue */
  --primary-strong: #004A7F;  /* 실측 Deep Azure */
  --primary-soft: #E6F0F8;    /* 파생 */
  --primary-softer: #F2F7FB;
  --ai: #0067B8; --ai-strong: #004A7F; --ai-soft: #E6F0F8;
  --info: #0078D4;    --info-soft: #E6F2FB;                  /* 실측 Fluent Icon Blue */
  --warning-soft: #FFF4CC;                                   /* 실측 Amber Badge #FFB900 의 옅은 판 */
  --text-strong: #171717; --text: #262626; --text-muted: #616161; --text-faint: #8A8A8A;   /* Graphite·Charcoal·Slate 실측(Void #000 회피), faint 파생 */
  --border: #E5E5E5; --border-2: #D6D6D6;                    /* 파생 */
  --r-sm: 2px; --r-md: 2px; --r-lg: 2px; --r-xl: 2px;        /* 실측 buttons/inputs 2 · cards 0 */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.11);
  --shadow-sm: 0 2px 4px rgba(0,0,0,.11);
  --shadow-md: 0 3px 7px rgba(0,0,0,.13), 0 1px 2px rgba(0,0,0,.11);   /* 실측 Elevated Card 2겹 */
  --shadow-lg: 0 6px 14px rgba(0,0,0,.13), 0 1px 2px rgba(0,0,0,.11);
  --font: "Segoe UI", "Malgun Gothic", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;   /* 실측 단일 서체 */
}

/* ════════════════════════════════════════════════════════════════════
   스킨 2.0 — 딥 체인지 (부장님 2026-08-30 "스킨을 누르면 전혀 다른 디자인으로")
   토큰을 넘어 셸(사이드바·탑바)·홈 히어로·패널·버튼의 형태와 질감까지 바꾼다.
   1차 대상 4종: 관제·유리·장부·온화. 기본 스킨은 여전히 무변경.
   ════════════════════════════════════════════════════════════════════ */

/* ── 온화 (toss) 딥 체인지 — 큰 인사·보더리스 셸·필 버튼·떠 있는 카드 ── */
html[data-skin="toss"]:not([data-theme="dark"]) .sidebar {
  background: var(--bg); border-right: none;
}
html[data-skin="toss"]:not([data-theme="dark"]) .nav-item { border-radius: 14px; font-weight: 600; }
html[data-skin="toss"]:not([data-theme="dark"]) .nav-item.active {
  background: #FFFFFF; color: var(--primary); box-shadow: 0 1px 4px rgba(25,31,40,.06);
}
html[data-skin="toss"]:not([data-theme="dark"]) .sidebar-toggle { border: none; box-shadow: 0 2px 8px rgba(25,31,40,.10); }
html[data-skin="toss"]:not([data-theme="dark"]) .home-greet h1 {
  font-size: clamp(27px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.025em; line-height: 1.35;
}
html[data-skin="toss"]:not([data-theme="dark"]) .panel {
  border: none; box-shadow: 0 1px 4px rgba(25,31,40,.05);
}
html[data-skin="toss"]:not([data-theme="dark"]) .btn,
html[data-skin="toss"]:not([data-theme="dark"]) .home-chip { border-radius: 999px; }
html[data-skin="toss"]:not([data-theme="dark"]) .btn { border-color: transparent; background: var(--surface-3); }
html[data-skin="toss"]:not([data-theme="dark"]) .btn-primary { background: var(--primary); }
html[data-skin="toss"]:not([data-theme="dark"]) .home-composer {
  border: none; border-radius: 24px; box-shadow: 0 2px 12px rgba(25,31,40,.07);
}

/* ════ 딥 체인지 2차 (부장님 2026-08-30 "ㄱㄱ") — 검증 9종 전부 셸 수준 변화 ════
   각 사 공식 문법의 형태 요소만 가져온다(색은 위 토큰 블록). 기본 스킨은 무변경. */

/* ── 고요(calm) 딥 — Things: 이펙트 없는 정적, 순백 사이드바, 절제된 위계 ── */
html[data-skin="calm"]:not([data-theme="dark"]) .greet-aura,
html[data-skin="calm"]:not([data-theme="dark"]) .gsparkle,
html[data-skin="calm"]:not([data-theme="dark"]) .composer-aura,
html[data-skin="calm"]:not([data-theme="dark"]) .composer-glint-clip { display: none !important; }
html[data-skin="calm"]:not([data-theme="dark"]) .sidebar { background: #FFFFFF; }
html[data-skin="calm"]:not([data-theme="dark"]) .nav-item { border-radius: 8px; }
html[data-skin="calm"]:not([data-theme="dark"]) .home-composer {
  border: 1px solid var(--border-2); box-shadow: var(--shadow-xs); border-radius: 14px;
}
html[data-skin="calm"]:not([data-theme="dark"]) .home-composer:focus-within {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(52,120,246,.10);
}
html[data-skin="calm"]:not([data-theme="dark"]) .home-greet h1 { font-weight: 700; letter-spacing: -.015em; }

/* ── 경쾌(solapi) 딥 — 필 버튼·흰 컴포저 필·파스텔 칩 ── */
html[data-skin="solapi"]:not([data-theme="dark"]) .btn,
html[data-skin="solapi"]:not([data-theme="dark"]) .home-chip { border-radius: 999px; }
html[data-skin="solapi"]:not([data-theme="dark"]) .nav-item { border-radius: 10px; }
html[data-skin="solapi"]:not([data-theme="dark"]) .home-composer {
  border: 1.5px solid var(--text-strong); border-radius: 26px; box-shadow: none; background: #FFFFFF;
}
html[data-skin="solapi"]:not([data-theme="dark"]) .home-composer:focus-within {
  border-color: var(--primary); box-shadow: 0 0 0 4px rgba(69,65,255,.10);
}
html[data-skin="solapi"]:not([data-theme="dark"]) .home-chip { background: var(--primary-softer); border-color: transparent; }

/* ── 신뢰(stripe) 딥 — 정갈·차분, 이펙트 제거, 컴팩트 라운딩 ── */
html[data-skin="stripe"]:not([data-theme="dark"]) .greet-aura,
html[data-skin="stripe"]:not([data-theme="dark"]) .gsparkle,
html[data-skin="stripe"]:not([data-theme="dark"]) .composer-aura,
html[data-skin="stripe"]:not([data-theme="dark"]) .composer-glint-clip { display: none !important; }
html[data-skin="stripe"]:not([data-theme="dark"]) .nav-item { border-radius: 7px; }
html[data-skin="stripe"]:not([data-theme="dark"]) .home-greet h1 { font-size: clamp(22px, 2vw, 26px); font-weight: 700; }
html[data-skin="stripe"]:not([data-theme="dark"]) .home-composer {
  border: 1px solid var(--border-2); border-radius: 10px;
  box-shadow: 0 1px 1px rgba(26,31,54,.04), 0 2px 5px rgba(26,31,54,.05);
}
html[data-skin="stripe"]:not([data-theme="dark"]) .home-composer:focus-within {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,91,255,.12);
}
html[data-skin="stripe"]:not([data-theme="dark"]) .btn { box-shadow: 0 1px 1px rgba(26,31,54,.06); }

/* ── 잉크(ink) 딥 — 노션 계열: 이펙트 없음·사각 절제·문서 감성 ── */
html[data-skin="ink"]:not([data-theme="dark"]) .greet-aura,
html[data-skin="ink"]:not([data-theme="dark"]) .gsparkle,
html[data-skin="ink"]:not([data-theme="dark"]) .composer-aura,
html[data-skin="ink"]:not([data-theme="dark"]) .composer-glint-clip { display: none !important; }
html[data-skin="ink"]:not([data-theme="dark"]) .sidebar { background: var(--surface-2); border-right: 1px solid var(--border); }
html[data-skin="ink"]:not([data-theme="dark"]) .nav-item { border-radius: 6px; }
html[data-skin="ink"]:not([data-theme="dark"]) .nav-item.active { background: rgba(0,0,0,.055); color: var(--text-strong); }
html[data-skin="ink"]:not([data-theme="dark"]) .btn,
html[data-skin="ink"]:not([data-theme="dark"]) .home-chip { border-radius: 6px; }
html[data-skin="ink"]:not([data-theme="dark"]) .home-composer {
  border: 1px solid var(--border); border-radius: 10px; box-shadow: none;
}
html[data-skin="ink"]:not([data-theme="dark"]) .home-composer:focus-within { border-color: #C9C5BE; }
html[data-skin="ink"]:not([data-theme="dark"]) .home-greet h1 { font-weight: 700; }

/* ── 산뜻(google) 딥 — M3: 풀 필 내비·토널 컴포저·필 버튼 ── */
html[data-skin="google"]:not([data-theme="dark"]) .nav-item { border-radius: 999px; }
html[data-skin="google"]:not([data-theme="dark"]) .nav-item.active { background: #C2E7FF; color: #001D35; }
html[data-skin="google"]:not([data-theme="dark"]) .btn,
html[data-skin="google"]:not([data-theme="dark"]) .home-chip { border-radius: 999px; }
html[data-skin="google"]:not([data-theme="dark"]) .home-composer {
  background: var(--surface-2); border: none; border-radius: 26px; box-shadow: none;
}
html[data-skin="google"]:not([data-theme="dark"]) .home-composer:focus-within {
  background: #FFFFFF; box-shadow: 0 1px 3px rgba(60,64,67,.3);
}
html[data-skin="google"]:not([data-theme="dark"]) .home-greet h1 { font-weight: 500; }
html[data-skin="google"]:not([data-theme="dark"]) .home-greet h1 b { font-weight: 700; }

/* ── 곡선(oneui) 딥 — One UI: 스쿼클 대라운딩·필 버튼·중앙 상단 여백 ── */
html[data-skin="oneui"]:not([data-theme="dark"]) .btn,
html[data-skin="oneui"]:not([data-theme="dark"]) .home-chip { border-radius: 999px; }
html[data-skin="oneui"]:not([data-theme="dark"]) .nav-item { border-radius: 16px; }
html[data-skin="oneui"]:not([data-theme="dark"]) .home-composer { border: none; border-radius: 26px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
html[data-skin="oneui"]:not([data-theme="dark"]) .home-composer:focus-within { box-shadow: 0 0 0 3px rgba(3,129,254,.15); }
html[data-skin="oneui"]:not([data-theme="dark"]) .home-greet h1 { font-weight: 700; letter-spacing: -.02em; }

/* ── 초록(naver) 딥 — 실무 각짐·그린 포커스 링·플랫 ── */
html[data-skin="naver"]:not([data-theme="dark"]) .greet-aura,
html[data-skin="naver"]:not([data-theme="dark"]) .gsparkle,
html[data-skin="naver"]:not([data-theme="dark"]) .composer-glint-clip { display: none !important; }
html[data-skin="naver"]:not([data-theme="dark"]) .nav-item { border-radius: 6px; }
html[data-skin="naver"]:not([data-theme="dark"]) .btn { border-radius: 8px; }
html[data-skin="naver"]:not([data-theme="dark"]) .home-composer {
  border: 1px solid var(--border-2); border-radius: 10px; box-shadow: none;
}
html[data-skin="naver"]:not([data-theme="dark"]) .home-composer:focus-within {
  border-color: var(--primary); box-shadow: 0 0 0 1.5px var(--primary);
}
html[data-skin="naver"]:not([data-theme="dark"]) .panel { box-shadow: none; }

/* ── 노랑(kakao) 딥 — 말풍선 라운딩·옐로 포커스·블랙 CTA ── */
html[data-skin="kakao"]:not([data-theme="dark"]) .nav-item { border-radius: 12px; }
html[data-skin="kakao"]:not([data-theme="dark"]) .btn,
html[data-skin="kakao"]:not([data-theme="dark"]) .home-chip { border-radius: 999px; }
html[data-skin="kakao"]:not([data-theme="dark"]) .home-composer {
  border: 1.5px solid var(--border-2); border-radius: 24px; box-shadow: none;
}
html[data-skin="kakao"]:not([data-theme="dark"]) .home-composer:focus-within {
  border-color: var(--text-strong); box-shadow: 0 0 0 4px rgba(254,229,0,.25);
}
html[data-skin="kakao"]:not([data-theme="dark"]) .home-chip { background: #FFF9DC; border-color: transparent; }

/* ── 담백(apple) 딥 — 반투명 사이드바(맥OS 문법)·이펙트 절제·시스템 라운딩 ── */
html[data-skin="apple"]:not([data-theme="dark"]) .greet-aura,
html[data-skin="apple"]:not([data-theme="dark"]) .gsparkle,
html[data-skin="apple"]:not([data-theme="dark"]) .composer-aura,
html[data-skin="apple"]:not([data-theme="dark"]) .composer-glint-clip { display: none !important; }
html[data-skin="apple"]:not([data-theme="dark"]) .sidebar {
  background: rgba(245,245,247,.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
html[data-skin="apple"]:not([data-theme="dark"]) .nav-item { border-radius: 9px; }
html[data-skin="apple"]:not([data-theme="dark"]) .btn { border-radius: 11px; }
html[data-skin="apple"]:not([data-theme="dark"]) .home-composer {
  border: 1px solid var(--border-2); border-radius: 14px; box-shadow: var(--shadow-xs);
}
html[data-skin="apple"]:not([data-theme="dark"]) .home-composer:focus-within {
  border-color: var(--primary); box-shadow: 0 0 0 3.5px rgba(0,122,255,.18);
}