/* ═══ EMBER 테마 정본 V2 — 모든 OS가 읽는 한 파일 (결정 529 · 532 · 2026-10-03 · 개발저장소/49_테마_정본_V2.md)
   값은 관리자 OS 초안2 체계(47번 §6·§8 · 모서리는 결정 525) · 화면 파일에는 낱값을 쓰지 않고 이 이름표만 쓴다.
   ★ 테마 셋(결정 532 → 536 → 542 → 546): White/Black(기본 · 지금 관리자 OS) · Glass(납품사 V1 글래스) · Black/Blue(첨부 화면의 검정 회색 세 단 + 파랑 포인트) — <html data-테마="glass"> 처럼 붙이면 「색」 덩이만 갈아 끼워진다 · Blue/Gray는 546으로 뺌.
     쟁반·선·유리·그림자는 먹·흰·면에서 섞어 만들어 색 덩이를 바꾸면 따라 바뀐다 · 그림자만은 「그늘」(어두운 테마에서는 검정)에서 만든다.
     Blue/Gray·Black/Blue는 관리자가 준 색에서 글씨·면·상태 색을 개발 측이 맞춰 넣었다(537: 둘 다 유리 판 · Black/Blue는 첨부 체계 응용) — 색을 더 주면 그 덩이만 바꾼다.
   이름표 둘 벌: 초안2 이름(--먹 --불씨 --r …)이 정본 · 「지금 납품사 OS 이름」(--글진함 --포인트 …)은 옮긴 화면이 그대로 돌게 잇는 다리 */
@font-face { font-family: "Paperlogy"; src: url("/글꼴/Paperlogy-4Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Paperlogy"; src: url("/글꼴/Paperlogy-5Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Paperlogy"; src: url("/글꼴/Paperlogy-6SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Paperlogy"; src: url("/글꼴/Paperlogy-7Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Paperlogy"; src: url("/글꼴/Paperlogy-8ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }

/* ── 색 — White/Black(기본 · 지금 관리자 OS · 은회색 Clean Structural) · 테마가 바꾸는 덩이는 이것뿐 ── */
:root {
  color-scheme: light;
  --바탕: #e9eaee; --바탕2: #dcdee3; --바탕빛: #eef0f3; --면: #fbfbfc; --면2: #f3f4f6; --흰: #ffffff; --검정: #000000; --짙은판: #1b1d23;
  --먹: #15171c; --먹2: #3b3f47; --먹3: #5b6069; --먹4: #646972;
  --그늘: var(--먹);                                   /* 그림자의 바탕색 — 어두운 테마는 검정 */
  --불씨: #E78966; --불씨진: #d4714d; --불씨옅: rgba(231, 137, 102, .14); --불씨빛: rgba(231, 137, 102, .28);
  --빨: #a62c38; --빨옅: rgba(196, 54, 70, .11); --노: #7a5009; --노옅: rgba(214, 160, 40, .17); --초: #1c6a44; --초옅: rgba(31, 122, 77, .12); --주: #bd500a; --주옅: rgba(214, 120, 40, .15); --파: #2c5893; --파옅: rgba(43, 90, 154, .11);
  /* 진행 단계 — 6단·Swing 속(면)은 36번 정본(관리자 OS 초안2 값) · 선(테두리·글)은 같은 계열 짙은 색 */
  --단1: #dcdde2; --단2: #f2c6d6; --단3: #f6cfae; --단4: #d8cbee; --단5: #efdc96; --단6: #bfe0cc; --스2: #f3df93; --스3: #f5c597; --스4: #c9dbf2;
  --s1선: #5d5d61; --s2선: #a82157; --s3선: #94450f; --s4선: #6036a3; --s5선: #6e4f04; --s6선: #125134; --w2선: #9c7b06; --w3선: #c55f08; --w4선: #1558a8;
  /* 바탕 위 떠다니는 구 셋(soft §5D) — 테마마다 색만 */
  --구1: color-mix(in srgb, var(--흰) 90%, transparent); --구2: color-mix(in srgb, var(--불씨) 16%, transparent); --구3: color-mix(in srgb, var(--먹4) 22%, transparent);
  --유리테: color-mix(in srgb, var(--흰) 72%, transparent);
  --표머리: var(--면);
  --칩글: #15171c;                                     /* 36번 파스텔 면(6단·Swing·상태 칩) 위 글씨 — 테마가 바꾸지 않는다(결정 537 · 어두운 테마에서 흰 글씨가 안 보이던 것) */
  --짙글: #f2f3f5;                                     /* 짙은 판(--짙은판) 위 글씨·숫자 — 테마가 바꾸지 않는다(결정 542 · 어두운 테마에서 숫자가 안 보이던 것) */
  --번짐: block;                                       /* 바탕 번짐(구·그물) 보임 — 어두운 두 테마는 none(결정 542) */
}

/* ── Glass (결정 536 · 납품사 OS Version 1 글래스 그대로 — 38번 §1 글래스 열 · 보관/공통_V1/공통.css :root) — 색 번짐 바탕 위 전부 유리 ── */
:root[data-테마="glass"] {
  --바탕: #eceef7; --바탕2: #e4e7f3; --바탕빛: #f4f5fb; --면: rgba(255, 255, 255, .34); --면2: rgba(255, 255, 255, .56); --표머리: #f4f5fb;
  --먹: #20212b; --먹2: #3f4150; --먹3: #5d6070; --먹4: #6f7488;
  --불씨: #4a63d8; --불씨진: #3a50bb; --불씨옅: rgba(74, 99, 216, .14); --불씨빛: rgba(74, 99, 216, .28);
  --선옅: rgba(32, 33, 43, .12); --선진: rgba(32, 33, 43, .22); --유리테: rgba(255, 255, 255, .62);
  --유리흐림: blur(14px) saturate(1.4);
  --구1: rgba(246, 201, 220, .9); --구2: rgba(198, 207, 248, .9); --구3: rgba(182, 200, 242, .9);   /* V1 번짐 — 분홍 · 연보라 · 연파랑 (결정 351) */
}
:root[data-테마="glass"] :is(.유리.구역, .유리.무대, .베젤속, dialog, .묻는속, .창속) { backdrop-filter: var(--유리흐림); -webkit-backdrop-filter: var(--유리흐림); }

/* ── Black/Blue (결정 536 → 542 · 첨부된 화면 그대로 — 검정에 가까운 회색 세 단(#1e1f22 · #2b2d31 · #313338) + 파랑 포인트 #5865f2 · 글씨 #dbdee1(순백 아님) · 옅은 글씨 #949ba4 · 번짐 없음) ── */
:root[data-테마="blackblue"] {
  color-scheme: dark;
  --바탕: #1e1f22; --바탕2: #1a1b1e; --바탕빛: #232428; --면: #2b2d31; --면2: #313338; --표머리: #2b2d31; --흰: #383a40; --짙은판: #111214;
  --먹: #dbdee1; --먹2: #b5bac1; --먹3: #949ba4; --먹4: #80848e; --그늘: #000000;
  --불씨: #5865f2; --불씨진: #4752c4; --불씨옅: rgba(88, 101, 242, .24); --불씨빛: rgba(88, 101, 242, .42);
  --빨: #fa777c; --노: #f0b232; --초: #4fc27a; --주: #f79a54; --파: #5ea1ff;
  --유리: rgba(43, 45, 49, .9); --유리진: rgba(43, 45, 49, .96); --유리테: rgba(255, 255, 255, .08);
  --번짐: none;
}

/* ── 섞어 만든 색 — 색 덩이에서 따라 나온다 (테마는 건드릴 필요 없음) ── */
:root {
  --쟁반: color-mix(in srgb, var(--먹) 4.5%, transparent); --쟁반링: color-mix(in srgb, var(--먹) 5%, transparent);
  --선옅: color-mix(in srgb, var(--먹) 7%, transparent); --선진: color-mix(in srgb, var(--먹) 12%, transparent);
  --올림: color-mix(in srgb, var(--먹) 5%, transparent); --올림진: color-mix(in srgb, var(--먹) 9%, transparent);
  --유리: color-mix(in srgb, var(--면) 64%, transparent); --유리진: color-mix(in srgb, var(--면) 82%, transparent);
  --유리빛: inset 0 1px 0 color-mix(in srgb, var(--흰) 90%, transparent); --속빛: inset 0 1px 1px color-mix(in srgb, var(--흰) 95%, transparent);
  --창쟁반: color-mix(in srgb, var(--흰) 46%, transparent);   /* 떠 있는 창(확인 창·서브페이지 창·로그인 카드)의 겉 쟁반 — 흐린 유리 */
  --그림자: 0 20px 60px -15px color-mix(in srgb, var(--그늘) 7%, transparent); --그림자뜸: 0 30px 80px -20px color-mix(in srgb, var(--그늘) 18%, transparent);
  --그림자짙: 0 14px 34px -14px color-mix(in srgb, var(--그늘) 28%, transparent); --그림자짙뜸: 0 20px 44px -16px color-mix(in srgb, var(--그늘) 32%, transparent);
  --그림자고름: 0 4px 14px -6px color-mix(in srgb, var(--그늘) 22%, transparent); --그림자알약: 0 6px 18px -10px color-mix(in srgb, var(--그늘) 25%, transparent);

  /* 지금 납품사 OS 이름 (옮긴 화면 파일이 쓰는 이름 — 하나도 빠짐없이) */
  --유리진함: var(--유리진); --유리선: var(--유리테); --줄선: var(--선옅); --선: var(--선진); --깊은: var(--올림);
  --글진함: var(--먹); --글보통: var(--먹2); --글옅음: var(--먹3);
  --포인트: var(--먹); --포인트진함: var(--먹2); --포인트둘: var(--먹2); --포인트옅음: var(--불씨옅); --포인트반: color-mix(in srgb, var(--먹) 40%, transparent);
  --무채색: var(--먹3); --무채색진함: var(--먹2);
  --빨강: var(--빨); --빨강옅음: var(--빨옅); --빨강글: var(--빨); --노랑: var(--노); --노랑옅음: var(--노옅); --초록: var(--초); --초록옅음: var(--초옅);
  --s1: var(--단1); --s2: var(--단2); --s3: var(--단3); --s4: var(--단4); --s5: var(--단5); --s6: var(--단6); --w2: var(--스2); --w3: var(--스3); --w4: var(--스4);
  --유리28: color-mix(in srgb, var(--흰) 28%, transparent); --유리40: color-mix(in srgb, var(--흰) 40%, transparent); --유리45: color-mix(in srgb, var(--흰) 45%, transparent);
  --유리55: color-mix(in srgb, var(--흰) 55%, transparent); --유리70: color-mix(in srgb, var(--흰) 70%, transparent); --유리72: color-mix(in srgb, var(--흰) 72%, transparent); --유리85: color-mix(in srgb, var(--흰) 85%, transparent);
}

/* ── 모양 · 글자 · 간격 · 움직임 (색 아님 · 테마와 무관) ── */
:root {
  /* 모서리 — 결정 525: 완전 사각(2px · 결정 347)과 초안2 둥근형의 딱 중간 · 이 여덟 말고 다른 값 금지 */
  --r: 17px;        /* 바깥 판·베젤 · 떠 있는 레일 · 머리줄 알약 */
  --r속: 11px;      /* 베젤 안쪽 판 = 17 − 6(쟁반 폭) — 동심 */
  --r카드: 11px;    /* 카드 · 떠 있는 작은 판(미리보기·내림판·거름판) */
  --r칸: 8px;       /* 칸 · 입력 · 메뉴 줄 · 레일 아이콘 칸 · 표 줄 */
  --r작: 6px;
  --r알약: 10px;    /* 예전에 둥근 끝이던 단추 전부 · 고르기 · 찾기 칸 · 알림 띠 */
  --r칩: 7px;       /* 칩 · 딱지 · 수 딱지(높이 26 이하) */
  --r원: 8px;       /* 24~40px 기능 동그라미 — 단추 속 화살 칸 · 아이콘 단추 · 확인 동그라미 */
  --r점: 50%;       /* 참 동그라미는 여기만 — 12px 이하 상태 점 · 바탕 구 · EMBER 마크와 둘레빛 · 도는 표시 */
  --r막대: 3px;     /* 진행 막대 끝 · Swing 네모 표시(○ 6단과 구별) */
  --모서리: var(--r); --단추모서리: var(--r칸);   /* 지금 납품사 OS 이름 */

  /* 글자 — 결정 517: 큰 글자는 줄이고 자리는 정보에 · 24px 넘는 글자 없음(큰수.아주 28만 예외) */
  --font-sans: "Paperlogy", system-ui, sans-serif;
  --글12: 12px; --글13: 13px; --글14: 14px; --글15: 15px; --글16: 16px; --글18: 18px; --글20: 20px;
  --글제목: 20px; --글큰: 24px; --글아주: 28px;
  --글28: var(--글제목); --글40: var(--글큰); --글56: var(--글아주);   /* 관리자 초안2 쪽 파일의 옛 이름 */

  /* 간격 · 자리 */
  --간격: clamp(10px, 1vw, 14px); --안: clamp(14px, 1.3vw, 20px);
  --쟁반폭: 6px;                       /* 더블 베젤의 겉 쟁반 폭 */
  --레일왼: 16px; --레일폭: 46px; --레일칸: 46px; --레일자리: 74px; --막대자리: 52px;   /* 왼쪽 단추 기둥(로고·찾기·알림·계정 · 결정 533) 여백 · 폭 · 아이콘 칸 · 작업 자리가 비켜 앉는 폭 */
  --유리흐림: blur(18px) saturate(1.3); --판흐림: blur(24px) saturate(1.3); --창흐림: blur(18px) saturate(1.2);   /* 결정 544 — 흐림 반지름을 줄임(64·30 → 24·18): 흐림은 뒤가 움직일 때마다 다시 그려 끊김의 큰 원인 */

  /* 움직임 — 곡선 하나 · 바뀌는 성질만 이름으로(all 아님) */
  --곡선: cubic-bezier(.16, 1, .3, 1);
  --움직임: transform .5s var(--곡선), translate .5s var(--곡선), rotate .5s var(--곡선), scale .5s var(--곡선), opacity .5s var(--곡선),
    background-color .5s var(--곡선), color .5s var(--곡선), border-color .5s var(--곡선);   /* 결정 544 — filter·box-shadow·outline 전환은 뺌(합성기가 못 맡아 매 프레임 다시 그림) · 그림자 전환이 필요한 자리만 따로 */

  /* 쌓임 — 탐색 40 · 덮개 50 · 결 60 */
  --층탐색: 40; --층덮개: 50; --층결: 60;
}
@media (max-width: 1100px) { :root { --글제목: 18px; --글큰: 22px; --레일왼: 12px; --레일폭: 40px; --레일칸: 40px; --레일자리: 62px; } }

body { font-family: var(--font-sans); }