@charset "utf-8";
/* ==========================================================================
 * HIVE UI v1 — 디자인 토큰 (2026-10-31)
 * 불러오는 순서: vp.css → tokens.css → components.css → (서비스 theme.css / ws-six.css …)
 * 규칙
 *  - 색: 중립 10단계(--hv-n0~n9) + 브랜드 5(--hv-brand/-strong/-soft/-tint/-on) + 의미색 5(ok·warn·danger·info·neutral, 각 -bg)
 *  - 글자 7단계: 12 / 13 / 15 / 17 / 20 / 24 / 32 (14px·소수점 px 쓰지 않음)
 *  - 간격 4px 그리드 8단계, 반지름 4단계, 그림자 3단계, z-index 7단계
 *  - 서비스·프로그램 차이 = 브랜드 토큰 5개(+반지름 1개)만 바꾼다 (§브랜드 오버라이드)
 *  - 옛 변수(vp.css --c-*, ws-six.css --blue·--ink·--fs-* …)는 아래 "호환 매핑"으로 연결 → 뷰·옛 CSS 를 고치지 않아도 값이 한 벌
 *  - 다크: :root[data-theme="dark"] 강제, :root[data-theme="auto"] 이면 OS 설정(prefers-color-scheme) 따름.
 *    (옛 CSS 의 하드코딩 색이 모두 토큰으로 바뀌기 전까지는 자동 적용을 켜지 않는다 — 켜려면 아래 @media 블록의 [data-theme="auto"] 조건만 지우면 됨)
 * ========================================================================== */
:root {
  /* ── 중립 ── */
  --hv-n0: #FFFFFF; --hv-n1: #F7F8FA; --hv-n2: #EEF0F3; --hv-n3: #E1E4E8; --hv-n4: #C9CED6;
  --hv-n5: #9AA3AF; --hv-n6: #6B7280; --hv-n7: #4B5563; --hv-n8: #1F2937; --hv-n9: #111827;
  --hv-bg: var(--hv-n1); --hv-surface: var(--hv-n0); --hv-surface-2: var(--hv-n2);
  --hv-line: var(--hv-n3); --hv-line-2: var(--hv-n2);
  --hv-ink: var(--hv-n9); --hv-ink-2: var(--hv-n7); --hv-ink-3: var(--hv-n6);
  --hv-hover: rgba(17, 24, 39, .06);
  --hv-scrim: rgba(17, 24, 39, .45);
  /* ── 브랜드 (서비스·프로그램이 덮어씀) ── */
  --hv-brand: #0B57D0; --hv-brand-strong: #0842A0; --hv-brand-soft: #D3E3FD; --hv-brand-tint: #E8F0FE; --hv-on-brand: #FFFFFF;
  /* ── 의미색 5 — 모든 서비스 동일 (흰 바탕 대비 4.5:1 이상) ── */
  --hv-ok: #137333;      --hv-ok-bg: #E6F4EA;
  --hv-warn: #8A5300;    --hv-warn-bg: #FEF3DC;
  --hv-danger: #B3261E;  --hv-danger-bg: #FCE8E6;
  --hv-info: #0B57D0;    --hv-info-bg: #E8F0FE;
  --hv-neutral: #4B5563; --hv-neutral-bg: #EEF0F3;
  /* 보조 계열(그래프·아바타 외 장식) — 의미색 5 로 모자랄 때만 */
  --hv-purple: #7E22CE;  --hv-purple-bg: #F3E8FD;
  --hv-teal: #00796B;    --hv-teal-bg: #E0F2F1;
  --hv-honey: #F9AB00;   /* 벌집·꿀 장식 (HIVE CELL·NECTAR 로고 색) — 글자 금지 */
  /* 그래프·막대·점 전용 선명한 값 (글자에는 쓰지 않음 — 글자는 위 의미색) */
  --hv-chart-ok: #1E8E3E; --hv-chart-warn: #E8710A; --hv-chart-danger: #D93025; --hv-chart-info: #1A73E8; --hv-chart-purple: #9334E6; --hv-chart-neutral: #9AA3AF;
  /* ── 글자 7단계 ── */
  --hv-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --hv-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --hv-t-xs: 12px;  --hv-lh-xs: 1.4;
  --hv-t-sm: 13px;  --hv-lh-sm: 1.5;
  --hv-t-md: 15px;  --hv-lh-md: 1.6;
  --hv-t-lg: 17px;  --hv-lh-lg: 1.45;
  --hv-t-xl: 20px;  --hv-lh-xl: 1.4;
  --hv-t-2xl: 24px; --hv-lh-2xl: 1.3;
  --hv-t-3xl: 32px; --hv-lh-3xl: 1.1;
  /* ── 간격 (4px 그리드) ── */
  --hv-s1: 4px; --hv-s2: 8px; --hv-s3: 12px; --hv-s4: 16px; --hv-s5: 24px; --hv-s6: 32px; --hv-s7: 48px; --hv-s8: 64px;
  /* ── 반지름 ── */
  --hv-r-sm: 6px; --hv-r: 10px; --hv-r-lg: 16px; --hv-r-pill: 999px;
  /* ── 그림자 ── */
  --hv-sh-1: 0 1px 2px rgba(17, 24, 39, .06), 0 1px 3px rgba(17, 24, 39, .08);
  --hv-sh-2: 0 4px 12px rgba(17, 24, 39, .10), 0 1px 3px rgba(17, 24, 39, .08);
  --hv-sh-3: 0 16px 40px rgba(17, 24, 39, .18);
  /* ── z-index ── */
  --hv-z-raise: 1; --hv-z-sticky: 20; --hv-z-side: 30; --hv-z-top: 40; --hv-z-pop: 50; --hv-z-modal: 60; --hv-z-toast: 70;
  /* ── 셸 치수 ── */
  --hv-top: 56px; --hv-side: 240px; --hv-side-mini: 64px; --hv-drawer: 280px; --hv-content: 1280px; --hv-content-wide: 1440px;
  --hv-tap: 40px; --hv-tap-m: 44px; --hv-input: 44px;
  /* vp.css 공통 토큰 중 모든 화면에 같아야 하는 것 */
  --font: var(--hv-font); --mono: var(--hv-mono);
}

/* 브랜드에서 파생되는 값 — body 에 선언해야 body.ws-brand--* 의 브랜드색을 따라간다 (:root 에 두면 파랑으로 굳음) */
body {
  --hv-accent: var(--hv-brand);          /* 장식 전용(큰 제목·아이콘) — 본문 글자에 쓰지 않음 */
  --hv-focus: var(--hv-brand);
  --hv-brand-hover: color-mix(in srgb, var(--hv-brand) 8%, transparent);
}

/* ── 호환 매핑: 업무·관리 화면 (홍보 사이트 .site 는 각 theme.css 가 자기 색을 가짐) ── */
body:not(.site) {
  --c-bg: var(--hv-bg); --c-surface: var(--hv-surface); --c-surface-2: var(--hv-surface-2); --c-line: var(--hv-line);
  --c-text: var(--hv-ink); --c-text-2: var(--hv-ink-2); --c-muted: var(--hv-ink-3);
  --c-brand: var(--hv-brand); --c-brand-strong: var(--hv-brand-strong); --c-on-brand: var(--hv-on-brand); --c-accent: var(--hv-accent); --c-focus: var(--hv-focus);
  --c-success: var(--hv-ok); --c-success-bg: var(--hv-ok-bg); --c-warning: var(--hv-warn); --c-warning-bg: var(--hv-warn-bg);
  --c-danger: var(--hv-danger); --c-danger-bg: var(--hv-danger-bg); --c-info: var(--hv-info); --c-info-bg: var(--hv-info-bg);
  --r: var(--hv-r); --r-lg: var(--hv-r-lg); --tap: var(--hv-tap);
  --s-1: var(--hv-s1); --s-2: var(--hv-s2); --s-3: var(--hv-s3); --s-4: var(--hv-s4); --s-5: var(--hv-s5); --s-6: var(--hv-s6); --s-7: var(--hv-s7); --s-8: var(--hv-s8);
  --shadow: var(--hv-sh-2);
  --muted: var(--hv-ink-3); --ink-2: var(--hv-ink-2);
}

/* ── 호환 매핑: ws-six.css · buzz.css · keeper.css · menu.css · pay.css 가 쓰는 변수 전부 (옛 body.ws-six 토큰 블록 대체) ── */
body.ws-six {
  --bg: var(--hv-bg); --surface: var(--hv-surface); --surface-2: var(--hv-surface-2); --tonal: var(--hv-n2);
  --ink: var(--hv-ink); --ink2: var(--hv-ink-2); --muted: var(--hv-ink-3); --faint: var(--hv-n6);
  --line: var(--hv-line); --line2: var(--hv-line-2); --outline: var(--hv-n4); --border: var(--hv-line);
  --blue: var(--hv-brand); --blue-d: var(--hv-brand-strong); --blue-s: var(--hv-brand-soft); --blue-xs: var(--hv-brand-tint); --blue-50: var(--hv-brand-tint); --on-blue-s: var(--hv-brand-strong);
  --fab: var(--hv-brand-soft); --on-fab: var(--hv-brand-strong);
  --green-s: var(--hv-ok-bg); --green-t: var(--hv-ok); --teal: var(--hv-teal); --teal-s: var(--hv-teal-bg); --teal-t: var(--hv-teal);
  --purple: var(--hv-purple); --purple-s: var(--hv-purple-bg);
  --orange-s: var(--hv-warn-bg); --orange-t: var(--hv-warn); --red-s: var(--hv-danger-bg); --red-t: var(--hv-danger); --danger: var(--hv-danger);
  --hover: var(--hv-hover);
  --side: var(--hv-side); --side-mini: var(--hv-side-mini); --top: var(--hv-top);
  --shadow-1: var(--hv-sh-1); --shadow-2: var(--hv-sh-2);
  --font-g: var(--hv-font);
  /* 글자 (옛 --fs-* 8종 → 7단계로: note 14→13, card 18→17, page 28→24) */
  --fs-xs: var(--hv-t-xs); --fs-sm: var(--hv-t-sm); --fs-note: var(--hv-t-sm); --fs-body: var(--hv-t-md); --fs-table: var(--hv-t-md);
  --fs-card: var(--hv-t-lg); --fs-page: var(--hv-t-2xl); --fs-kpi: var(--hv-t-3xl);
  --lh-body: var(--hv-lh-md); --lh-table: var(--hv-lh-sm); --lh-title: var(--hv-lh-2xl);
  --sp-card: var(--hv-s5); --sp-section: var(--hv-s5);
}

/* ── 브랜드 오버라이드 — 바꾸는 것은 이 다섯 개(+반지름·장식색)만 (03-ui-ux.md §4.4) ── */
/* 통합 관리자(admin)·기본: 파랑 (:root 값) */
body.ws-brand--admin   { --hv-brand: #0B57D0; --hv-brand-strong: #0842A0; --hv-brand-soft: #D3E3FD; --hv-brand-tint: #E8F0FE; }
/* HIVE KEEPER: 진홍 (위험색 #B3261E 와 구분, 2026-10-31 #B3261E → #9F1239) */
body.ws-brand--bm      { --hv-brand: #9F1239; --hv-brand-strong: #881337; --hv-brand-soft: #FCE7F3; --hv-brand-tint: #FDF2F8; }
/* HIVE SIX: 청록 */
body.ws-brand--six     { --hv-brand: #00796B; --hv-brand-strong: #00695C; --hv-brand-soft: #B2DFDB; --hv-brand-tint: #E0F2F1; }
/* HIVE CELL(업무 lounge + 홍보 사이트 th-cell): 공개·계정 화면(cell/assets/theme.css --c-brand)과 같은 보라 #7C3AED 하나로 (6차수, 2026-11-01 — 옛 #7E22CE)
   대비: 흰 바탕 글자 5.7:1 · strong 7.1:1 · tint 바탕 위 brand 5.2:1 · soft 바탕 위 strong 6.0:1 (WCAG AA 4.5:1) */
body.ws-brand--lounge,
body.th-cell           { --hv-brand: #7C3AED; --hv-brand-strong: #6D28D9; --hv-brand-soft: #EDE9FE; --hv-brand-tint: #F5F3FF; --hv-accent: #F9AB00; --hv-r: 12px; }
/* HIVE BUZZ: 앰버 (주의색과 가까워 주의 배지는 글자색 #8A5300 그대로) */
body.ws-brand--seller  { --hv-brand: #A04A06; --hv-brand-strong: #7A3504; --hv-brand-soft: #FDE9C8; --hv-brand-tint: #FFF6E8; }
/* HIVE NECTAR(공급사 supplier + 사이트 th-nectar): 분홍 */
body.ws-brand--supplier,
body.th-nectar         { --hv-brand: #C2185B; --hv-brand-strong: #A3134B; --hv-brand-soft: #FAD4E3; --hv-brand-tint: #FDF0F5; --hv-accent: #F9AB00; }
body.th-nectar.site    { --hv-bg: #FFFAF2; }
/* 언에이징: 초록 + 네온 장식 */
body.th-unaging        { --hv-brand: #00873D; --hv-brand-strong: #006B30; --hv-brand-soft: #C9F0D6; --hv-brand-tint: #EEF6F0; --hv-accent: #3CE07F; }
/* 링크 인 바이오: 주황 (반지름 14 → 12, 허용 상한) */
body.th-linkinbio      { --hv-brand: #CF450F; --hv-brand-strong: #B23A0C; --hv-brand-soft: #FFDCCB; --hv-brand-tint: #FFF3EC; --hv-accent: #FF5B1A; --hv-r: 12px; }
/* 모두의커머스: 파랑 */
body.th-modoo          { --hv-brand: #0064E0; --hv-brand-strong: #0052BA; --hv-brand-soft: #D6E6FB; --hv-brand-tint: #EEF4FD; --hv-r: 8px; }
/* 배네타 홈페이지·계정 화면(사이트): 브론즈 + 아이보리 바탕 (업무 화면 th-vaneta.ws-six 는 중립) */
body.th-vaneta.site    { --hv-brand: #7E6445; --hv-brand-strong: #5E4A33; --hv-brand-soft: #EFE2D7; --hv-brand-tint: #FBF5EF; --hv-bg: #FBF5EF; --hv-r: 8px; }

/* ── 다크 ── 강제(data-theme="dark") · OS 따름(data-theme="auto" 일 때만, 위 머리말 참고). 홍보 사이트(.site)·공유 화면은 라이트 고정 */
:root[data-theme="dark"] body:not(.site):not(.share-body) {
  --hv-bg: #0F131A; --hv-surface: #161B24; --hv-surface-2: #1E2532; --hv-line: #2A3240; --hv-line-2: #232B38;
  --hv-n0: #161B24; --hv-n1: #0F131A; --hv-n2: #1E2532; --hv-n3: #2A3240; --hv-n4: #3B4455; --hv-n5: #6B7280; --hv-n6: #9AA3AF; --hv-n7: #C9CED6; --hv-n8: #E5E7EB; --hv-n9: #F3F4F6;
  --hv-ink: #F3F4F6; --hv-ink-2: #C9CED6; --hv-ink-3: #9AA3AF; --hv-hover: rgba(255, 255, 255, .07); --hv-scrim: rgba(0, 0, 0, .6);
  --hv-ok: #6FCF8E; --hv-ok-bg: #12331D; --hv-warn: #F2C04C; --hv-warn-bg: #3A2A08; --hv-danger: #F28B82; --hv-danger-bg: #3B1512;
  --hv-info: #8AB4F8; --hv-info-bg: #0F2446; --hv-neutral: #C9CED6; --hv-neutral-bg: #1E2532;
  --hv-purple: #C4A1F0; --hv-purple-bg: #2A1A3D; --hv-teal: #6FD1C4; --hv-teal-bg: #0E2B28;
  --hv-brand-soft: color-mix(in srgb, var(--hv-brand) 28%, #161B24); --hv-brand-tint: color-mix(in srgb, var(--hv-brand) 14%, #161B24);
  --hv-sh-1: 0 1px 2px rgba(0, 0, 0, .4); --hv-sh-2: 0 4px 12px rgba(0, 0, 0, .5); --hv-sh-3: 0 16px 40px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] body:not(.site):not(.share-body) {
    --hv-bg: #0F131A; --hv-surface: #161B24; --hv-surface-2: #1E2532; --hv-line: #2A3240; --hv-line-2: #232B38;
    --hv-n0: #161B24; --hv-n1: #0F131A; --hv-n2: #1E2532; --hv-n3: #2A3240; --hv-n4: #3B4455; --hv-n5: #6B7280; --hv-n6: #9AA3AF; --hv-n7: #C9CED6; --hv-n8: #E5E7EB; --hv-n9: #F3F4F6;
    --hv-ink: #F3F4F6; --hv-ink-2: #C9CED6; --hv-ink-3: #9AA3AF; --hv-hover: rgba(255, 255, 255, .07); --hv-scrim: rgba(0, 0, 0, .6);
    --hv-ok: #6FCF8E; --hv-ok-bg: #12331D; --hv-warn: #F2C04C; --hv-warn-bg: #3A2A08; --hv-danger: #F28B82; --hv-danger-bg: #3B1512;
    --hv-info: #8AB4F8; --hv-info-bg: #0F2446; --hv-neutral: #C9CED6; --hv-neutral-bg: #1E2532;
    --hv-purple: #C4A1F0; --hv-purple-bg: #2A1A3D; --hv-teal: #6FD1C4; --hv-teal-bg: #0E2B28;
    --hv-brand-soft: color-mix(in srgb, var(--hv-brand) 28%, #161B24); --hv-brand-tint: color-mix(in srgb, var(--hv-brand) 14%, #161B24);
    --hv-sh-1: 0 1px 2px rgba(0, 0, 0, .4); --hv-sh-2: 0 4px 12px rgba(0, 0, 0, .5); --hv-sh-3: 0 16px 40px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}