/* ==========================================================================
   빌다 메이커스 — 브랜드 토큰
   --------------------------------------------------------------------------
   1층 원시(primitive) : 값 그 자체. 램프와 눈금. 화면에서 직접 쓰지 않는다.
   2층 의미(semantic)  : 역할 이름. 화면 CSS는 여기만 쓴다.
   3층 별칭(alias)     : 예전 이름. 새로 쓰지 않는다.

   이 블록이 유일한 원본이다. /admin → 브랜드 탭이 이 값을 읽어 그린다.
   값을 바꾸면 관리자 화면과 문서가 함께 움직인다.
   ========================================================================== */
:root {
  /* ---------------------------------------------------------------- */
  /* 1. 원시 — 중립 램프                                               */
  /* 흰 바탕에 거의 검은 글. 사이에 있는 회색은 전부 이 20단계 안에 있다. */
  /* ---------------------------------------------------------------- */
  --gray-0: #ffffff;
  --gray-25: #fafbfc;
  --gray-50: #f7f8f9;
  --gray-100: #f4f5f7;
  --gray-150: #eef0f3;
  --gray-200: #e6e8ec;
  --gray-250: #dfe2e6;
  --gray-300: #d5d8dd;
  --gray-400: #c9cdd4;
  --gray-450: #b7bdc7;
  --gray-500: #9aa0aa;
  --gray-550: #8a9098;
  --gray-600: #6b7280;
  --gray-650: #5b616a;
  --gray-700: #4f5660;
  --gray-750: #3f434c;
  --gray-800: #2f3339;
  --gray-850: #202329;
  --gray-900: #16181d;
  --gray-950: #111317;

  /* 1.1 원시 — 브랜드 주황 */
  --orange-50: #fffaf4;
  --orange-100: #fff0e3;
  --orange-200: #f0d9c4;
  --orange-300: #ffc693;
  --orange-500: #ff7700;
  --orange-600: #e96d00;
  --orange-700: #d65f00;
  --orange-800: #c65d00;
  --orange-900: #b45309;

  /* 1.2 원시 — 상태색 */
  --red-50: #fdf4f2;
  --red-100: #f0c7c1;
  --red-200: #d9aaa6;
  --red-500: #d63c3c;
  --red-600: #c0392b;
  --red-700: #b42318;
  --red-800: #a33a32;
  --red-900: #8a4a46;

  --green-50: #eaf8f0;
  --green-100: #e4f5eb;
  --green-500: #24a05a;
  --green-600: #2f8f5b;
  --green-700: #1d7a4c;

  --amber-50: #fff6df;
  --amber-500: #f59e0b;
  --amber-800: #9a5b13;
  --amber-900: #8a6200;

  --blue-50: #f6f9ff;
  --blue-100: #eef2ff;
  --blue-200: #dde6f5;
  --blue-700: #4857a6;

  /* 1.3 원시 — 분야 아이콘 팔레트 (홈 분야 줄 전용, 본문·버튼 금지) */
  --cat-brand: #3b82f6;
  --cat-professional: #6366f1;
  --cat-platform: #14b8a6;
  --cat-shop: #f43f5e;
  --cat-landing: #f59e0b;
  --cat-portfolio: #a855f7;
  --cat-renewal: #22c55e;

  /* 1.4 원시 — 외부 브랜드 (유튜브 등, 우리 팔레트가 아니다) */
  --external-youtube: #ff0000;

  /* ---------------------------------------------------------------- */
  /* 2. 의미 — 면                                                      */
  /* ---------------------------------------------------------------- */
  --surface: var(--gray-0);          /* 페이지 바탕 */
  --surface-raised: var(--gray-25);  /* 카드 안쪽, 살짝 뜬 판 */
  --surface-sunken: var(--gray-50);  /* 호버 배경, 이야기 카드 */
  --surface-chip: var(--gray-100);   /* 칩·뱃지·빈 얼굴 */
  --surface-slot: var(--gray-150);   /* 빈 배너·빈 슬롯·선택된 탭 */
  --surface-muted: var(--gray-200);  /* 진한 칩, 차트 바탕 */
  --surface-deep: var(--gray-400);   /* 비활성 막대, 회색 마크 */
  --surface-dark: var(--gray-850);   /* 어두운 배너 */
  --surface-dark-soft: var(--gray-800);
  --surface-ink: var(--gray-950);    /* 영상·이미지 뒷면 */
  --surface-ink-veil: rgba(17, 19, 23, .84); /* 사진 위 라벨 */
  --scrim: rgba(22, 24, 29, .4);     /* 다이얼로그 뒷면 */
  --scrim-strong: rgba(22, 24, 29, .72);
  --scrim-mask: rgba(0, 0, 0, .45);  /* 크롭 바깥 가림막 */
  --veil: rgba(255, 255, 255, .94);  /* 반투명 바(헤더·독·토스트) */
  --veil-soft: rgba(255, 255, 255, .78); /* 사진 위 알약 */
  --guide-line: rgba(255, 255, 255, .7); /* 크롭 3분할 안내선 */
  --overlay-photo: linear-gradient(transparent, rgba(22, 24, 29, .75)); /* 사진 아래쪽 그늘 — 위 글자를 읽히게 */
  --border-on-image: rgba(255, 255, 255, .65); /* 사진 위 컨트롤 테두리 */

  /* 2.1 의미 — 글자 */
  --text: var(--gray-900);           /* 본문·제목·로고 */
  --text-body: var(--gray-750);      /* 긴 글 본문 (제목보다 한 톤 옅다) */
  --text-body-soft: var(--gray-650); /* 짧은 설명, 카드 요약 */
  --text-muted: var(--gray-600);     /* 보조 글, 비활성 메뉴 */
  --text-faint: var(--gray-550);     /* 더 옅은 보조, 수치 라벨 */
  --text-placeholder: var(--gray-500); /* 플레이스홀더, 아이콘 회색 */
  --text-disabled: var(--gray-450);
  --text-on-fill: var(--gray-0);     /* 색 면 위 글자 */
  --text-on-image: rgba(255, 255, 255, .72); /* 사진 위 보조 글 */

  /* 2.2 의미 — 선 */
  --border: var(--gray-200);         /* 기본 테두리·구분선 */
  --border-soft: var(--gray-150);    /* 행 사이 옅은 선 */
  --border-strong: var(--gray-250);  /* 인풋·토스트 테두리 */
  --border-muted: var(--gray-300);   /* 조금 더 진한 구분 */
  --border-hover: var(--gray-400);   /* 컨트롤 호버 */
  --border-focus: var(--gray-500);   /* 입력 포커스 */
  --border-selected: var(--text);    /* 선택된 옵션 */
  --selected-fill: var(--text);      /* 선택된 칩·체크의 채움 */
  --selected-text: var(--text-on-fill);

  /* 2.3 의미 — 행동(주황). 행동과 브랜드 표시에만 쓴다. */
  --action: var(--orange-500);
  --action-hover: var(--orange-600);
  --action-text: var(--orange-800);  /* 밝은 바탕 위 주황 글자 */
  --action-border: var(--orange-200);
  --action-border-hover: var(--orange-300);
  --action-surface: var(--orange-100);
  --action-surface-soft: var(--orange-50);
  --ring-action: 0 0 0 2px rgba(255, 119, 0, .18);
  --action-tint: rgba(255, 119, 0, .06);   /* 편집 중인 행 바탕 */
  --price: var(--red-500);           /* 가격 숫자. 위험이 아니다. */

  /* 2.3.1 의미 — 버튼. 기본은 중립, primary만 행동색을 쓴다. */
  --button-surface: var(--surface-slot);
  --button-surface-hover: var(--surface-muted);
  --button-border: var(--surface-slot);
  --button-border-hover: var(--surface-muted);
  --button-text: var(--text-body);
  --button-text-hover: var(--text);
  --button-primary-surface: var(--action);
  --button-primary-surface-hover: var(--action-hover);
  --button-primary-text: var(--text-on-fill);

  /* 2.4 의미 — 상태 */
  --danger: var(--red-800);
  --danger-strong: var(--red-700);
  --danger-hover: var(--red-600);
  --notification-dot: #ff3b30;
  --danger-border: var(--red-100);
  --danger-border-strong: var(--red-200);
  --danger-surface: var(--red-50);
  --danger-quiet: var(--red-900);    /* 로그아웃·주의 문구 */
  --success: var(--green-700);
  --success-bright: var(--green-500);  /* 라이브 점, 진행 막대 */
  --success-surface: var(--green-50);
  --warning: var(--amber-800);
  --warning-strong: var(--orange-900);
  --attention: var(--amber-500);   /* 편집 중·확인 필요 표시 */
  --attention-tint: rgba(245, 180, 0, .06);
  --warning-surface: var(--amber-50);
  --info: var(--blue-700);
  --info-surface: var(--blue-100);
  --info-surface-soft: var(--blue-50);
  --info-border: var(--blue-200);

  /* ---------------------------------------------------------------- */
  /* 3. 글자                                                           */
  /* ---------------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo",
    "Malgun Gothic", system-ui, sans-serif;
  --font-logo: Inter, "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: Inter, ui-monospace, SFMono-Regular, monospace;

  /* 3.1 크기 — 이름이 곧 쓰임새다 */
  --type-tiny: 9px;        /* 검색 제안 라벨, 사이드바 각주 */
  --type-micro: 10px;      /* 뱃지, 통계 수치 라벨 */
  --type-mini: 11px;       /* 칩, 스튜디오명, 캡션 강조 */
  --type-caption: 12px;    /* 보조 문구, 프로모 바, 더보기 */
  --type-ui: 13px;         /* 메뉴, 버튼, 섹션 설명 */
  --type-body-sm: 14px;    /* 검색 인풋, 카드 제목 */
  --type-body: 15px;  /* 페이지 기본 */
  --type-lead: 16px;       /* 로고, 소제목, 강조 본문 */
  --type-subtitle: 18px;   /* 카드 제목, 블록 제목 */
  --type-title-sm: 20px;   /* 다이얼로그 제목 */
  --type-title: 22px;      /* 큰 제목, 통계 숫자 */
  --type-headline: 26px;   /* 섹션 h2 */
  --type-display: 28px;    /* 배너 한 줄 소개, 페이지 h1 */
  --type-hero: 38px;       /* 이니셜 대문자, 히어로 */

  /* 3.1.1 유동 크기 — 창 너비를 따라 늘어난다. 고정 눈금으로 못 잡는 자리만. */
  --type-fluid-hero: clamp(36px, 5vw, 58px);   /* 히어로 제목, 이니셜 대문자 */
  --type-fluid-title: clamp(34px, 4vw, 48px);  /* 문서 페이지 h1 */
  --type-fluid-name: clamp(15px, 1.8vw, 22px); /* 사진 없는 카드의 이름표 */
  --type-fluid-name-md: clamp(14px, 1.6vw, 20px);
  --type-fluid-name-sm: clamp(11px, 1.25vw, 16px);

  /* 3.2 행간 */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-title: 1.35;
  --leading-ui: 1.4;
  --leading-normal: 1.45;
  --leading-relaxed: 1.55;
  --leading-body: 1.65;
  --leading-prose: 1.8;

  /* 3.3 자간 — 한글은 크게 조일수록 좋다. 큰 글자일수록 더 조인다. */
  --tracking-hero: -.05em;
  --tracking-tighter: -.04em;
  --tracking-title: -.035em;
  --tracking-tight: -.03em;
  --tracking-snug: -.025em;
  --tracking-plain: -.02em;
  --tracking-slight: -.01em;
  --tracking-none: 0;
  --tracking-wide: .02em;
  --tracking-wider: .04em;
  --tracking-eyebrow: .08em;  /* 대문자 라벨 */
  --tracking-widest: .12em;

  /* 3.4 두께 */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;  /* 현재 메뉴, primary 버튼, 선택 칩 */
  --weight-strong: 650;    /* 캡션 강조, 의뢰 버튼 */
  --weight-bold: 700;      /* 로고 */
  --weight-heavy: 750;     /* 배너 소개 문장 */

  /* 3.5 로고 */
  --logo-size: 16px;
  --logo-weight: var(--weight-bold);
  --logo-tracking: var(--tracking-slight);

  /* ---------------------------------------------------------------- */
  /* 4. 여백 — 2px 격자. 홀수 값은 쓰지 않는다.                          */
  /* ---------------------------------------------------------------- */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;     /* 모바일 홈 섹션 하단 */
  --space-80: 80px;
  --space-96: 96px;
  --space-100: 100px;

  /* ---------------------------------------------------------------- */
  /* 5. 모서리                                                         */
  /* ---------------------------------------------------------------- */
  --radius-hair: 2px;     /* 막대, 진행바 */
  --radius-xs: 6px;       /* 태그, 뱃지, 작은 썸네일 */
  --radius-sm: 8px;       /* 작은 버튼, 탭, 포폴 썸 */
  --radius-md: 10px;      /* 기본 버튼, 검색창, 기본 카드 */
  --radius-lg: 12px;      /* 프로필 사진, 이야기 카드, 패널 */
  --radius-xl: 14px;      /* 작품 캡처 타일, 사이드 카드 */
  --radius-2xl: 18px;     /* 홈 배너, 큰 슬롯, 하단 독 */
  --radius-pill: 999px;   /* 알약 — 칩, 계정 버튼, 신규 뱃지 */
  --radius-circle: 50%;

  /* ---------------------------------------------------------------- */
  /* 6. 깊이 — 경계는 선으로. 그림자는 진짜로 떠 있는 것에만.            */
  /* ---------------------------------------------------------------- */
  --shadow-hairline: 0 1px 3px rgba(22, 24, 29, .08);
  --shadow-popover: 0 8px 24px rgba(22, 24, 29, .08);   /* 계정 메뉴 */
  --shadow-overlay: 0 14px 38px rgba(22, 24, 29, .12);  /* 검색 제안, 저장 바 */
  --shadow-dialog: 0 20px 50px rgba(22, 24, 29, .14);   /* 다이얼로그 */
  --shadow-modal: 0 24px 70px rgba(22, 24, 29, .22);    /* 최상단 모달 */
  --shadow-sheet: 0 -16px 48px rgba(22, 24, 29, .16);   /* 아래에서 올라오는 시트 */
  --shadow-drawer: 20px 0 40px rgba(22, 24, 29, .08);   /* 왼쪽 서랍 */
  --shadow-focus: 0 0 0 3px rgba(255, 119, 0, .12);     /* 주황 포커스 링 */
  --shadow-focus-quiet: 0 0 0 3px rgba(33, 37, 41, .06);
  --shadow-selected: inset 0 0 0 1px var(--text);       /* 선택된 옵션 테두리 */
  --shadow-text: 0 2px 10px rgba(0, 0, 0, .35);         /* 사진 위 아이콘·글자 */

  /* ---------------------------------------------------------------- */
  /* 7. 모션 — 짧고 단순하게. ease 하나만 쓴다.                          */
  /* ---------------------------------------------------------------- */
  --ease: ease;
  --duration-instant: .15s;  /* 색·테두리 */
  --duration-fast: .2s;      /* 작은 이동, 시트 */
  --duration-base: .28s;     /* 헤더 숨김 */
  --duration-slow: .4s;      /* 이미지 확대 */
  --duration-carousel: .7s;  /* 배너 슬라이드 */
  --hover-scale: 1.025;      /* 카드 이미지 호버 */
  --carousel-interval: 3600ms; /* 배너 자동 넘김 (JS가 읽는다) */

  /* ---------------------------------------------------------------- */
  /* 8. 컨트롤 높이                                                    */
  /* ---------------------------------------------------------------- */
  --control-xs: 28px;   /* 배너 ‹ ›, 아바타 */
  --control-sm: 32px;   /* 헤더 계정 알약, 필터 열기 */
  --control-md: 36px;   /* 홈 의뢰 버튼, 모달 닫기 */
  --control-lg: 42px;   /* 폼 기준 높이 */
  --control-xl: 46px;   /* 헤더 검색 */
  --bar-sm: 48px;
  --bar-md: 56px;       /* 관리자 상단바 */
  --bar-lg: 62px;       /* 문서 상단바 */

  /* ---------------------------------------------------------------- */
  /* 9. 레이아웃                                                       */
  /* ---------------------------------------------------------------- */
  --wrap-read: 760px;    /* 긴 글 */
  --wrap-form: 820px;    /* 폼 */
  --wrap-default: 880px; /* 리스트·문서 기본 */
  --wrap-app: 980px;     /* 제작자 대시보드 */
  --wrap-admin: 1120px;  /* 관리자 */
  --wrap-wide: 1240px;   /* 홈·헤더 */
  --wrap-profile: 1280px;/* 제작자 상세 */
  --wrap-pad: 20px;
  --wrap-pad-sm: 16px;
  --section-y: 76px;     /* 홈 섹션 위 */
  --section-y-end: 84px; /* 홈 섹션 아래 */
  --section-y-sm: 58px;
  --section-y-end-sm: 62px;

  /* 9.1 비율 */
  --ratio-square: 1 / 1;   /* 사람 사진 */
  --ratio-site: 16 / 9;    /* 사이트 캡처, 유튜브 */
  --ratio-wide: 16 / 10;   /* 홈 작품 줄 */
  --ratio-vertical: 9 / 16;/* 쇼츠 */

  /* 9.2 반응형 분기 — @media는 var를 못 읽는다. 여기 적힌 값이 기준이다. */
  --bp-xl: 1000px;  /* 상세 1열, 카드 3열 */
  --bp-lg: 820px;   /* 홈 그리드 접힘 */
  --bp-md: 760px;   /* 필터 시트, 관리/대시보드 */
  --bp-sm: 720px;   /* 헤더 2층, 하단 독 */
  --bp-xs: 600px;   /* 작은 폼 */
  --bp-2xs: 560px;  /* 홈 2열 */

  /* ---------------------------------------------------------------- */
  /* 10. 별칭 — 옛 이름. 새 코드에서 쓰지 않는다.                        */
  /* ---------------------------------------------------------------- */
  --bg: var(--surface);
  --fg: var(--text);
  --muted: var(--text-muted);
  --line: var(--border);
  --accent: var(--text);
  --primary: var(--action);
  --primary-hover: var(--action-hover);
  --chip: var(--surface-chip);
  --surface-subtle: var(--surface-sunken);
  --nav-active: var(--surface-slot);
  --control-height: var(--control-lg);
  --radius: var(--radius-md);
  --max: var(--wrap-default);
}