/*
 * Dstory — Design Tokens (SSOT)
 * ============================================================================
 * 이 파일이 디자인의 유일한 원본이다. 컴포넌트 CSS 는 **리터럴 값을 쓰지 않는다**.
 * 색·간격·글자·모서리·그림자·층(z)·컨트롤 치수 전부 여기서만 정의한다.
 *
 * ── 구조 ──────────────────────────────────────────────────────────────────
 *   0. 씨앗(SEED)      : 실제 색 리터럴이 존재하는 유일한 곳. 6개.
 *   1. 파생 램프        : 씨앗에서 color-mix 로 자동 계산(50~900).
 *   2. 의미(semantic)   : 화면이 참조하는 역할 이름. 컴포넌트는 여기만 쓴다.
 *   3. 타이포 / 4. 간격 / 5. 모서리 / 6. 그림자 / 7. 흐림 / 8. 모션
 *   9. 층(z-index)      / 10. 컨트롤 치수
 *
 * ── 다른 제품에 이 시스템을 재사용하려면 ────────────────────────────────
 *   §0 의 --dp-primary / --dp-secondary 두 줄만 바꾼다. 버튼·링크·탭·포커스
 *   링·칩·배지·중립 회색의 색조까지 전부 따라 바뀐다. 그 외 리터럴은 없다.
 *
 * ── 규칙 ────────────────────────────────────────────────────────────────
 *   · 새 값이 필요하면 리터럴을 인라인하지 말고 **여기에 토큰을 먼저 추가**한다.
 *   · 반투명이 필요하면 color-mix(in srgb, <토큰> N%, transparent) 를 쓴다.
 *   · 브레이크포인트는 CSS 변수로 media query 에 못 쓰므로 §12 주석을 따른다.
 * ============================================================================
 */

:root {
	/* ============================================================
	 * 0. SEED — 시스템 전체에서 색 리터럴이 있는 **유일한** 지점
	 * ============================================================ */
	--dp-primary:   #2563eb;   /* 브랜드 주색 — 버튼·링크·활성 탭·포커스 */
	--dp-secondary: #7b61ff;   /* 보조 강조 — AI 도우미 계열 */
	--dp-gray:      #6b7280;   /* 중립 기준(주색으로 살짝 물들여 씀 → --dp-gray-tinted) */

	--dp-success:   #10b981;
	--dp-warning:   #f59e0b;
	--dp-danger:    #ef4444;

	--dp-white:     #ffffff;
	--dp-black:     #020617;

	/* 중립을 주색으로 8% 물들여 화면 전체가 한 색조로 묶이게 한다.
	 * (주색을 바꾸면 회색의 색조까지 함께 따라온다 — "전체가 바뀐다"의 핵심) */
	--dp-gray-tinted: color-mix(in srgb, var(--dp-primary) 8%, var(--dp-gray));

	/* ============================================================
	 * 1. 파생 램프 — 씨앗에서 자동 계산. 직접 수정 금지.
	 * ============================================================ */
	--dp-primary-50:  color-mix(in srgb, var(--dp-primary)  6%, var(--dp-white));
	--dp-primary-100: color-mix(in srgb, var(--dp-primary) 14%, var(--dp-white));
	--dp-primary-200: color-mix(in srgb, var(--dp-primary) 26%, var(--dp-white));
	--dp-primary-300: color-mix(in srgb, var(--dp-primary) 44%, var(--dp-white));
	--dp-primary-400: color-mix(in srgb, var(--dp-primary) 68%, var(--dp-white));
	--dp-primary-500: color-mix(in srgb, var(--dp-primary) 86%, var(--dp-white));
	--dp-primary-600: var(--dp-primary);
	--dp-primary-700: color-mix(in srgb, var(--dp-primary) 82%, var(--dp-black));
	--dp-primary-800: color-mix(in srgb, var(--dp-primary) 64%, var(--dp-black));
	--dp-primary-900: color-mix(in srgb, var(--dp-primary) 48%, var(--dp-black));

	--dp-secondary-50:  color-mix(in srgb, var(--dp-secondary)  6%, var(--dp-white));
	--dp-secondary-100: color-mix(in srgb, var(--dp-secondary) 14%, var(--dp-white));
	--dp-secondary-200: color-mix(in srgb, var(--dp-secondary) 26%, var(--dp-white));
	--dp-secondary-400: color-mix(in srgb, var(--dp-secondary) 68%, var(--dp-white));
	--dp-secondary-500: color-mix(in srgb, var(--dp-secondary) 86%, var(--dp-white));
	--dp-secondary-600: var(--dp-secondary);
	--dp-secondary-800: color-mix(in srgb, var(--dp-secondary) 64%, var(--dp-black));
	--dp-secondary-700: color-mix(in srgb, var(--dp-secondary) 82%, var(--dp-black));
	--dp-secondary-900: color-mix(in srgb, var(--dp-secondary) 48%, var(--dp-black));

	--dp-neutral-0:   var(--dp-white);
	--dp-neutral-50:  color-mix(in srgb, var(--dp-gray-tinted)  5%, var(--dp-white));
	--dp-neutral-100: color-mix(in srgb, var(--dp-gray-tinted) 11%, var(--dp-white));
	--dp-neutral-200: color-mix(in srgb, var(--dp-gray-tinted) 22%, var(--dp-white));
	--dp-neutral-300: color-mix(in srgb, var(--dp-gray-tinted) 38%, var(--dp-white));
	--dp-neutral-400: color-mix(in srgb, var(--dp-gray-tinted) 64%, var(--dp-white));
	--dp-neutral-500: var(--dp-gray-tinted);
	--dp-neutral-600: color-mix(in srgb, var(--dp-gray-tinted) 78%, var(--dp-black));
	--dp-neutral-700: color-mix(in srgb, var(--dp-gray-tinted) 56%, var(--dp-black));
	--dp-neutral-800: color-mix(in srgb, var(--dp-gray-tinted) 34%, var(--dp-black));
	--dp-neutral-900: color-mix(in srgb, var(--dp-gray-tinted) 18%, var(--dp-black));
	--dp-neutral-950: var(--dp-black);

	/* 상태색 — 배지·알림이 필요로 하는 5단(연배경 / 테두리 / 기본 / 진하게 / 글자).
	 * 세 상태가 같은 계단을 쓰므로 어느 상태든 같은 무게로 보인다. */
	--dp-success-soft:   color-mix(in srgb, var(--dp-success)  9%, var(--dp-white));
	--dp-success-border: color-mix(in srgb, var(--dp-success) 30%, var(--dp-white));
	--dp-success-500:    var(--dp-success);
	--dp-success-600:    color-mix(in srgb, var(--dp-success) 88%, var(--dp-black));
	--dp-success-700:    color-mix(in srgb, var(--dp-success) 66%, var(--dp-black));
	--dp-warning-soft:   color-mix(in srgb, var(--dp-warning) 14%, var(--dp-white));
	--dp-warning-border: color-mix(in srgb, var(--dp-warning) 38%, var(--dp-white));
	--dp-warning-500:    var(--dp-warning);
	--dp-warning-600:    color-mix(in srgb, var(--dp-warning) 88%, var(--dp-black));
	--dp-warning-700:    color-mix(in srgb, var(--dp-warning) 62%, var(--dp-black));
	--dp-danger-soft:    color-mix(in srgb, var(--dp-danger)  9%, var(--dp-white));
	--dp-danger-border:  color-mix(in srgb, var(--dp-danger) 32%, var(--dp-white));
	--dp-danger-500:     var(--dp-danger);
	--dp-danger-600:     color-mix(in srgb, var(--dp-danger) 86%, var(--dp-black));
	--dp-danger-700:     color-mix(in srgb, var(--dp-danger) 66%, var(--dp-black));

	/* ============================================================
	 * 2. 의미 토큰 — 컴포넌트는 **오직 이 층만** 참조한다
	 * ============================================================ */

	/* 배경·표면 */
	--dp-bg-page:          linear-gradient(180deg,
		color-mix(in srgb, var(--dp-primary) 6%, var(--dp-white)) 0%,
		color-mix(in srgb, var(--dp-primary) 2%, var(--dp-white)) 60%,
		var(--dp-neutral-50) 100%);
	--dp-bg-page-solid:    var(--dp-neutral-50);
	--dp-surface-base:     var(--dp-neutral-0);                                  /* 불투명 카드·패널 */
	--dp-surface-raised:   color-mix(in srgb, var(--dp-white) 72%, transparent);  /* 유리 카드 */
	--dp-surface-elevated: color-mix(in srgb, var(--dp-white) 85%, transparent);  /* 모달·팝오버 */
	--dp-surface-hover:    color-mix(in srgb, var(--dp-white) 92%, transparent);
	--dp-surface-sunken:   var(--dp-neutral-50);                                 /* 입력 안쪽·코드블럭 */
	--dp-surface-overlay:  color-mix(in srgb, var(--dp-neutral-900) 42%, transparent); /* 모달 뒷막 */
	--dp-surface-inverse:  var(--dp-neutral-900);                                /* 어두운 사이드바 */

	/* 테두리 */
	--dp-border-subtle:  color-mix(in srgb, var(--dp-neutral-400) 24%, transparent);
	--dp-border-default: color-mix(in srgb, var(--dp-neutral-400) 40%, transparent);
	--dp-border-strong:  color-mix(in srgb, var(--dp-neutral-600) 55%, transparent);
	--dp-border-focus:   var(--dp-primary-500);

	/* 글자 */
	--dp-text-primary:     var(--dp-neutral-900);
	--dp-text-secondary:   var(--dp-neutral-600);
	--dp-text-muted:       var(--dp-neutral-500);
	--dp-text-disabled:    var(--dp-neutral-400);
	--dp-text-on-primary:  var(--dp-neutral-0);
	--dp-text-on-inverse:  var(--dp-neutral-50);
	--dp-text-link:        var(--dp-primary-600);
	--dp-text-danger:      var(--dp-danger-700);
	--dp-text-success:     var(--dp-success-700);
	--dp-text-warning:     var(--dp-warning-700);

	/* 상호작용(주색) */
	--dp-color-primary:        var(--dp-primary-600);
	--dp-color-primary-hover:  var(--dp-primary-700);
	--dp-color-primary-active: var(--dp-primary-800);
	--dp-color-primary-soft:   var(--dp-primary-100);
	--dp-color-primary-tint:   color-mix(in srgb, var(--dp-primary) 10%, transparent);

	/* 상호작용(보조색 — AI 계열) */
	--dp-color-secondary:       var(--dp-secondary-600);
	--dp-color-secondary-hover: var(--dp-secondary-700);
	--dp-color-secondary-soft:  var(--dp-secondary-100);
	--dp-color-secondary-tint:  color-mix(in srgb, var(--dp-secondary) 10%, transparent);
	--dp-gradient-secondary:    linear-gradient(140deg, var(--dp-secondary-400), var(--dp-secondary-700));

	/* 포커스 링 */
	--dp-ring-focus:  0 0 0 3px color-mix(in srgb, var(--dp-primary) 35%, transparent);
	--dp-ring-danger: 0 0 0 3px color-mix(in srgb, var(--dp-danger)  30%, transparent);

	/* ============================================================
	 * 3. 타이포
	 * ============================================================ */
	--dp-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
		"Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", Roboto, "맑은 고딕", system-ui, sans-serif;
	--dp-font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", "Roboto Mono",
		Consolas, "Liberation Mono", monospace;

	--dp-text-2xs:   0.6875rem;  /* 11px */
	--dp-text-xs:    0.75rem;    /* 12px */
	--dp-text-sm:    0.8125rem;  /* 13px */
	--dp-text-base:  0.875rem;   /* 14px — 기본 본문 */
	--dp-text-md:    0.9375rem;  /* 15px — 입력·소제목 */
	--dp-text-lg:    1rem;       /* 16px */
	--dp-text-xl:    1.125rem;   /* 18px */
	--dp-text-2xl:   1.25rem;    /* 20px */
	--dp-text-3xl:   1.5rem;     /* 24px */
	--dp-text-4xl:   1.875rem;   /* 30px */
	--dp-text-5xl:   2.25rem;    /* 36px — 랜딩 히어로 */
	--dp-text-6xl:   3rem;       /* 48px — 랜딩 디스플레이 */

	--dp-weight-regular:  400;
	--dp-weight-medium:   500;
	--dp-weight-semibold: 600;
	--dp-weight-bold:     700;

	--dp-leading-none:    1;
	--dp-leading-tight:   1.2;
	--dp-leading-snug:    1.35;
	--dp-leading-normal:  1.5;
	--dp-leading-relaxed: 1.65;

	--dp-tracking-tight:  -0.01em;
	--dp-tracking-normal: 0;
	--dp-tracking-wide:   0.025em;

	/* ============================================================
	 * 4. 간격 (4px 기준)
	 * ============================================================ */
	--dp-space-0:   0;
	--dp-space-px:  1px;
	--dp-space-0-5: 0.125rem;  /* 2px */
	--dp-space-1:   0.25rem;   /* 4px */
	--dp-space-1-5: 0.375rem;  /* 6px */
	--dp-space-2:   0.5rem;    /* 8px */
	--dp-space-2-5: 0.625rem;  /* 10px */
	--dp-space-3:   0.75rem;   /* 12px */
	--dp-space-3-5: 0.875rem;  /* 14px */
	--dp-space-4:   1rem;      /* 16px */
	--dp-space-5:   1.25rem;   /* 20px */
	--dp-space-6:   1.5rem;    /* 24px */
	--dp-space-7:   1.75rem;   /* 28px */
	--dp-space-8:   2rem;      /* 32px */
	--dp-space-10:  2.5rem;    /* 40px */
	--dp-space-12:  3rem;      /* 48px */
	--dp-space-16:  4rem;      /* 64px */
	--dp-space-20:  5rem;      /* 80px */
	--dp-space-24:  6rem;      /* 96px */

	/* ============================================================
	 * 5. 모서리
	 * ============================================================ */
	--dp-radius-none: 0;
	--dp-radius-xs:   2px;
	--dp-radius-sm:   4px;
	--dp-radius-md:   6px;
	--dp-radius-lg:   8px;
	--dp-radius-xl:   12px;
	--dp-radius-2xl:  16px;
	--dp-radius-3xl:  24px;
	--dp-radius-full: 9999px;

	/* ============================================================
	 * 6. 그림자 — 중립 900 에서 파생(주색을 바꾸면 그림자 색조도 따라온다)
	 * ============================================================ */
	--dp-shadow-color: var(--dp-neutral-900);
	--dp-shadow-xs:  0 1px 2px color-mix(in srgb, var(--dp-shadow-color) 4%, transparent);
	--dp-shadow-sm:  0 1px 3px color-mix(in srgb, var(--dp-shadow-color) 6%, transparent),
		0 1px 2px color-mix(in srgb, var(--dp-shadow-color) 4%, transparent);
	--dp-shadow-md:  0 4px 12px color-mix(in srgb, var(--dp-shadow-color) 8%, transparent),
		0 2px 4px color-mix(in srgb, var(--dp-shadow-color) 4%, transparent);
	--dp-shadow-lg:  0 10px 24px color-mix(in srgb, var(--dp-shadow-color) 10%, transparent),
		0 4px 8px color-mix(in srgb, var(--dp-shadow-color) 4%, transparent);
	--dp-shadow-xl:  0 20px 40px color-mix(in srgb, var(--dp-shadow-color) 14%, transparent),
		0 8px 16px color-mix(in srgb, var(--dp-shadow-color) 6%, transparent);
	--dp-shadow-2xl: 0 24px 60px color-mix(in srgb, var(--dp-shadow-color) 30%, transparent);
	--dp-shadow-glass: inset 0 1px 0 color-mix(in srgb, var(--dp-white) 60%, transparent),
		0 1px 3px color-mix(in srgb, var(--dp-shadow-color) 6%, transparent);
	/* 우측 슬라이드 패널 — 왼쪽으로 드리우는 그림자 */
	--dp-shadow-panel: -8px 0 28px color-mix(in srgb, var(--dp-shadow-color) 14%, transparent);

	/* ============================================================
	 * 7. 흐림(backdrop)
	 * ============================================================ */
	--dp-blur-sm: 8px;
	--dp-blur-md: 14px;
	--dp-blur-lg: 24px;
	--dp-blur-xl: 40px;

	/* ============================================================
	 * 8. 모션
	 * ============================================================ */
	--dp-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--dp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dp-duration-fast: 120ms;
	--dp-duration-base: 200ms;
	--dp-duration-slow: 320ms;

	/* ============================================================
	 * 9. 층(z-index) — 이 사다리 밖의 숫자를 쓰지 않는다
	 * ============================================================ */
	/* 0~9 는 컴포넌트 **내부** 겹침(자식끼리 순서)용으로 그대로 써도 된다.
	 * 10 이상은 화면 전역 층이므로 반드시 아래 토큰만 쓴다. */
	--dp-z-under:          0;
	--dp-z-base:           1;
	--dp-z-raised:         5;
	--dp-z-sticky:         100;   /* 페이지 안 고정 바(일괄 작업 바 등) */
	--dp-z-header:         300;   /* 상단바 — 콘텐츠 위, 드로어 아래 */
	--dp-z-float:          900;   /* 화면 고정 보조 버튼(전경 토글·공백 추가·툴바) */
	--dp-z-fab:            950;   /* 둥근 런처(AI·수정요청) — 패널보다 아래 */
	--dp-z-dropdown:       1000;
	--dp-z-drawer-backdrop:1099;
	--dp-z-drawer:         1100;  /* 좌측 드로어 */
	--dp-z-panel:          1200;  /* 우측 슬라이드 패널 */
	--dp-z-modal-backdrop: 1300;
	--dp-z-modal:          1310;
	--dp-z-modal-nested:   1320;  /* 모달 위의 모달 */
	--dp-z-popover:        1400;
	--dp-z-toast:          1500;  /* 항상 최상단 */

	/* ============================================================
	 * 10. 컨트롤 치수 — 버튼·입력·칩이 같은 격자에 선다
	 * ============================================================ */
	--dp-control-h-sm: 28px;
	--dp-control-h-md: 36px;
	--dp-control-h-lg: 44px;
	--dp-control-px-sm: var(--dp-space-2);
	--dp-control-px-md: var(--dp-space-3);
	--dp-control-px-lg: var(--dp-space-4);
	--dp-icon-sm: 16px;
	--dp-icon-md: 20px;
	--dp-icon-lg: 24px;
	--dp-iconbtn:  32px;   /* 아이콘 전용 버튼 한 변 */

	/* 레이아웃 상수 */
	--dp-panel-w:   344px;  /* 우측 슬라이드 패널 */
	--dp-drawer-w:  288px;  /* 좌측 드로어 */
	--dp-topbar-h:  56px;


	/* ============================================================
	 * 11. 문진(intake) 팔레트 — 환자용 화면 전용
	 * 환자가 보는 문진 폼은 병원 강조색(--ac, PHP 주입)과 따뜻한 크림 지면을
	 * 쓰는 **브랜드 산출물**이다. SaaS 관리 화면(파랑 중립)과 목적이 달라
	 * 팔레트를 분리해 둔다 — 여기 값을 바꾸면 환자가 보는 화면이 달라진다.
	 * ============================================================ */
	--cm-intake-bg:          #fff9f4;
	--cm-intake-paper:       #fffdfb;
	--cm-intake-line:        #f3e3d6;
	--cm-intake-line-soft:   #eed9c8;
	--cm-intake-line-strong: #d8c6b6;
	--cm-intake-tint:        #fff3e9;
	--cm-intake-tint-strong: #e8c7ac;
	--cm-intake-ink:         #3f3a36;
	--cm-intake-ink-soft:    #8a8078;
	--cm-intake-ink-faint:   #b9ac9f;
	--cm-intake-shadow:      #d49561;

	/* ============================================================
	 * 12. 브레이크포인트 (문서용 — media query 는 변수를 못 읽는다)
	 *   모바일   : @media (max-width: 720px)   ← 기본. 새 규칙은 되도록 여기만.
	 *   태블릿   : @media (max-width: 1024px)  ← 2열→1열 등 레이아웃 전환
	 *   좁은 데스크톱: @media (max-width: 1200px) ← 12열 그리드의 중간 단계에만
	 *   이 셋 외의 폭은 쓰지 않는다(760·767·768·860·1199 등은 위로 흡수했다).
	 * ============================================================ */
}

/* ================================================================
 * 다크 프리셋 — <html data-dp-theme="dark"> 로 활성화.
 * 씨앗은 그대로 두고 의미 토큰만 뒤집는다.
 * ================================================================ */
[data-dp-theme="dark"] {
	--dp-bg-page: linear-gradient(180deg,
		color-mix(in srgb, var(--dp-primary) 10%, var(--dp-black)) 0%,
		var(--dp-neutral-900) 60%,
		var(--dp-black) 100%);
	--dp-bg-page-solid:    var(--dp-black);
	--dp-surface-base:     var(--dp-neutral-800);
	--dp-surface-raised:   color-mix(in srgb, var(--dp-neutral-800) 65%, transparent);
	--dp-surface-elevated: color-mix(in srgb, var(--dp-neutral-800) 85%, transparent);
	--dp-surface-hover:    color-mix(in srgb, var(--dp-neutral-700) 72%, transparent);
	--dp-surface-sunken:   var(--dp-neutral-900);
	--dp-surface-overlay:  color-mix(in srgb, var(--dp-black) 62%, transparent);
	--dp-surface-inverse:  var(--dp-neutral-50);

	--dp-border-subtle:  color-mix(in srgb, var(--dp-neutral-400) 16%, transparent);
	--dp-border-default: color-mix(in srgb, var(--dp-neutral-400) 28%, transparent);
	--dp-border-strong:  color-mix(in srgb, var(--dp-neutral-300) 45%, transparent);

	--dp-text-primary:     var(--dp-neutral-50);
	--dp-text-secondary:   var(--dp-neutral-300);
	--dp-text-muted:       var(--dp-neutral-400);
	--dp-text-on-inverse:  var(--dp-neutral-900);
	--dp-text-link:        var(--dp-primary-400);
	--dp-text-danger:      var(--dp-danger-500);

	--dp-color-primary-soft: color-mix(in srgb, var(--dp-primary) 18%, transparent);
	--dp-shadow-color:       #000000;
	--dp-shadow-glass: inset 0 1px 0 color-mix(in srgb, var(--dp-white) 6%, transparent),
		0 1px 3px color-mix(in srgb, #000000 40%, transparent);
}

/* ============================================================================
 * 레거시 변수 브리지
 * 이 테마가 예전에 쓰던 두 벌의 변수(--cm-* / 무접두)를 전부 dp 토큰으로 잇는다.
 * 기존 CSS 는 한 줄도 안 고쳐도 브랜드가 즉시 통일되고, 앞으로 --dp-* 만 쓰면
 * 이 블록은 자연히 사라진다. **새 코드에서 아래 이름을 쓰지 말 것.**
 * ============================================================================ */
:root {
	/* 간격 */
	--space-4: var(--dp-space-1);   --cm-space-4: var(--dp-space-1);
	--space-8: var(--dp-space-2);   --cm-space-8: var(--dp-space-2);
	--space-12: var(--dp-space-3);  --cm-space-12: var(--dp-space-3);
	--space-16: var(--dp-space-4);  --cm-space-16: var(--dp-space-4);
	--space-24: var(--dp-space-6);  --cm-space-24: var(--dp-space-6);
	--space-32: var(--dp-space-8);  --cm-space-32: var(--dp-space-8);
	--cm-space-48: var(--dp-space-12);

	/* 모서리 */
	--radius-8: var(--dp-radius-lg);   --cm-radius-4: var(--dp-radius-sm);
	--radius-12: var(--dp-radius-xl);  --cm-radius-8: var(--dp-radius-lg);
	--radius-16: var(--dp-radius-2xl); --cm-radius-12: var(--dp-radius-xl);

	/* 색 */
	--background: var(--dp-neutral-0);
	--foreground: var(--dp-text-primary);
	--color-primary: var(--dp-color-primary);            --cm-color-primary: var(--dp-color-primary);
	--color-primary-hover: var(--dp-color-primary-hover); --cm-color-primary-hover: var(--dp-color-primary-hover);
	--color-error: var(--dp-danger-500);                 --cm-color-error: var(--dp-danger-600);
	--color-success: var(--dp-success-500);              --cm-color-success: var(--dp-success-500);
	--color-warning: var(--dp-warning-500);              --cm-color-warning: var(--dp-warning-500);
	--color-muted: var(--dp-text-muted);                 --cm-color-muted: var(--dp-text-muted);
	--color-border: var(--dp-neutral-200);               --cm-color-border: var(--dp-neutral-200);
	--color-border-strong: var(--dp-neutral-300);
	--color-bg-soft: var(--dp-neutral-100);              --cm-color-bg-soft: var(--dp-neutral-50);
	--cm-color-bg-white: var(--dp-neutral-0);
	--cm-color-text: var(--dp-text-primary);
	--cm-color-text-light: var(--dp-text-muted);
	--ac: var(--dp-color-primary);
	--sub: var(--dp-text-muted);
	--line: var(--dp-border-subtle);

	/* 표면·그림자·글꼴 */
	--cm-page: var(--dp-bg-page);
	--cm-surface: var(--dp-surface-raised);
	--cm-font: var(--dp-font-sans);
	--cm-font-sans: var(--dp-font-sans);
	--cm-font-mono: var(--dp-font-mono);
	--shadow-sm: var(--dp-shadow-sm);   --cm-shadow-sm: var(--dp-shadow-sm);
	--shadow-md: var(--dp-shadow-md);   --cm-shadow-md: var(--dp-shadow-md);
	--shadow-lg: var(--dp-shadow-lg);   --cm-shadow-lg: var(--dp-shadow-lg);
}

/* ================================================================
 * color-mix 미지원 브라우저(2023 이전) 대비 — 파생 램프를 고정값으로.
 * 여기 값은 씨앗 기본값(#2563eb / #7b61ff / #6b7280)으로 계산한 결과다.
 * 씨앗을 바꾸면 이 블록은 따라오지 않지만, 해당 브라우저에서만 구 팔레트로
 * 보일 뿐 레이아웃·대비는 유지된다.
 * ================================================================ */
@supports not (color: color-mix(in srgb, red, blue)) {
	:root {
		--dp-gray-tinted: #667389;
		--dp-primary-50:  #f4f8fe; --dp-primary-100: #e4edfc; --dp-primary-200: #ccdefa;
		--dp-primary-300: #a6c5f6; --dp-primary-400: #6f9df1; --dp-primary-500: #3d7aed;
		--dp-primary-700: #1f52c2; --dp-primary-800: #18409a; --dp-primary-900: #123072;
		--dp-secondary-50:  #f9f8ff; --dp-secondary-100: #efecff; --dp-secondary-200: #ded9ff;
		--dp-secondary-400: #a48fff; --dp-secondary-700: #6650d3; --dp-secondary-900: #3d3080;
		--dp-neutral-50:  #f9fafb; --dp-neutral-100: #f2f4f6; --dp-neutral-200: #e4e7ec;
		--dp-neutral-300: #cfd4dc; --dp-neutral-400: #a6aebb; --dp-neutral-500: #667389;
		--dp-neutral-600: #505b6c; --dp-neutral-700: #3a424f; --dp-neutral-800: #232932;
		--dp-neutral-900: #131820;
		--dp-success-soft: #eefaf5; --dp-success-border: #b5e8d5; --dp-success-600: #0ea372; --dp-success-700: #0c7c56;
		--dp-warning-soft: #fef6e4; --dp-warning-border: #fbd99b; --dp-warning-600: #d98c0a; --dp-warning-700: #9a6408;
		--dp-danger-soft:  #fef0f0; --dp-danger-border:  #f8bcbc; --dp-danger-600:  #d33c3c; --dp-danger-700:  #9e2f2f;
		--dp-secondary-500: #8d76ff; --dp-secondary-800: #4f3fa4;
		--dp-bg-page: linear-gradient(180deg, #f0f6ff 0%, #f7f9fc 60%, #f9fafb 100%);
		--dp-surface-raised:   rgba(255, 255, 255, 0.72);
		--dp-surface-elevated: rgba(255, 255, 255, 0.85);
		--dp-surface-hover:    rgba(255, 255, 255, 0.92);
		--dp-surface-overlay:  rgba(19, 24, 32, 0.42);
		--dp-border-subtle:  rgba(166, 174, 187, 0.24);
		--dp-border-default: rgba(166, 174, 187, 0.40);
		--dp-border-strong:  rgba(80, 91, 108, 0.55);
		--dp-color-primary-tint: rgba(37, 99, 235, 0.10);
		--dp-ring-focus:  0 0 0 3px rgba(37, 99, 235, 0.35);
		--dp-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.30);
	}
}

/* ================================================================
 * 모션 최소화 존중
 * ================================================================ */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dp-duration-fast: 1ms;
		--dp-duration-base: 1ms;
		--dp-duration-slow: 1ms;
	}
}