/* casty-brand.css — medikit 브랜드 색을 casty 마젠타로 재정의 (medikit.css 바로 뒤에 포함)
 *
 * 기준: casty static/css/v4.css (F-1, 2026-09-10) 라이트 토큰
 *   --pri #F43F8E · --pri-tint 8% · --pri-tint-2 15% · --pri-border 45%
 * medikit 은 불투명 단계색(100/300/500)을 쓰므로, casty 틴트 비율로 흰 바탕에 섞은 불투명값을 넣는다.
 * --ms-success, --ms-border-focus 는 medikit 안에서 var(--ms-primary) 를 참조하므로 자동으로 따라온다.
 *
 * 다크 모드는 아래 :root[data-theme="dark"] 블록이 맡는다(2026-10-15 결정, 인수인계 02-tokens.md ②).
 * medikit 에는 다크 토큰이 없어서, medikit 변수를 캐스티 v4.css 의 다크 토큰에 대응시킨다.
 * 새 색은 짓지 않는다. 캐스티에 대응 토큰이 없는 연한 단계만 기본 색을 투명하게 섞어 만든다.
 * medikit 이 공식 다크 토큰을 내면 이 블록을 그것으로 바꾼다.
 */
:root {
  --ms-primary:        #F43F8E;                 /* = casty --pri. 메인 액션, 선택 상태, 활성 텍스트 */
  --ms-primary-100:    #FEF0F6;                 /* 8%  = --pri-tint.   선택 배경, 열림/hover 바탕 */
  --ms-primary-300:    #FDE2EE;                 /* 15% = --pri-tint-2. 중간 배경 */
  --ms-primary-500:    #FAA9CC;                 /* 45% = --pri-border. hover 테두리, 보조 강조 */
  --ms-primary-shadow: rgba(244, 63, 142, 0.3); /* 포커스 그림자 */
}

:root[data-theme="dark"] {
  /* 바탕과 글자. --ms-black 은 medikit 이 rgb(var(--ms-black) / 알파) 로 쓰는 세 숫자라
     var() 로 못 잇는다. 값은 v4.css 다크 --text-1(#E8EAED)과 같다 */
  --ms-white: var(--card);
  --ms-black: 232 234 237;
  --ms-overlay: var(--ink-82);

  /* 회색 단계. 연한 쪽은 캐스티 다크의 흰색 알파 표면(--w-03~24)을 카드 위에 얹은 겉보기와
     같다. 메뉴, 팝오버, 툴팁처럼 겹치는 표면 바탕에도 쓰여서 뒤가 비치지 않게 불투명으로 섞는다.
     진한 쪽은 글자 위계 */
  --ms-gray-100: color-mix(in srgb, var(--white) 3%, var(--card));
  --ms-gray-200: color-mix(in srgb, var(--white) 8%, var(--card));
  --ms-gray-300: color-mix(in srgb, var(--white) 12%, var(--card));
  --ms-gray-400: color-mix(in srgb, var(--white) 16%, var(--card));
  --ms-gray-500: color-mix(in srgb, var(--white) 24%, var(--card));
  --ms-gray-600: var(--text-muted);
  --ms-gray-700: var(--text-3);
  --ms-gray-800: var(--text-2);

  /* 브랜드. v4.css 다크 마젠타(#FF66A8)와 그 틴트 */
  --ms-primary:        var(--pri);
  --ms-primary-100:    var(--pri-tint);
  --ms-primary-300:    var(--pri-tint-2);
  --ms-primary-500:    var(--pri-border);
  --ms-primary-shadow: var(--b-25);

  /* 상태색 */
  --ms-red:        var(--danger);
  --ms-red-100:    var(--danger-a08);
  --ms-red-300:    color-mix(in srgb, var(--danger) 15%, transparent);
  --ms-red-500:    var(--danger-a40);
  --ms-red-shadow: var(--danger-a40);
  --ms-yellow:        var(--warning);
  --ms-yellow-100:    color-mix(in srgb, var(--warning) 8%, transparent);
  --ms-yellow-300:    color-mix(in srgb, var(--warning) 15%, transparent);
  --ms-yellow-500:    color-mix(in srgb, var(--warning) 45%, transparent);
  --ms-yellow-shadow: color-mix(in srgb, var(--warning) 20%, transparent);
  --ms-purple-100:    color-mix(in srgb, var(--ms-purple) 8%, transparent);
  --ms-purple-500:    color-mix(in srgb, var(--ms-purple) 45%, transparent);
}

/* 다이얼로그 가림막은 검정 80% 를 쓴다. 다크에서 --ms-black 을 밝게 뒤집으면 가림막이
   하얘지므로, 캐스티 모달 가림막(.modal-back)과 같은 --ink-82 로 둔다 */
:root[data-theme="dark"] .mk .bg-ms-black\/80 { background-color: var(--ink-82); }

/* 포커스 링 둘레색. 생성 CSS 가 흰색(#fff)으로 박아 두어 다크에서 흰 띠가 보인다 */
:root[data-theme="dark"] .mk,
:root[data-theme="dark"] .mk * { --tw-ring-offset-color: var(--ms-white); }

/* 생성 CSS 에 색이 직접 박힌 클래스. 라이트에서는 원본대로 두고, 다크에서만 토큰으로 돌린다.
   카카오 노랑(#fee500)은 남의 브랜드 색이라 다크에서도 그대로 둔다 */
:root[data-theme="dark"] .mk .bg-white,
:root[data-theme="dark"] .mk .hover\:bg-white:hover { background-color: var(--ms-white); }
:root[data-theme="dark"] .mk .bg-\[\#fff7ec\] { background-color: var(--ms-yellow-100); }
:root[data-theme="dark"] .mk .bg-\[\#f0fdf4\] { background-color: color-mix(in srgb, var(--ok) 8%, transparent); }
:root[data-theme="dark"] .mk .text-\[\#15803d\] { color: var(--ok); }
:root[data-theme="dark"] .mk .text-\[\#3E3E3E\] { color: var(--ms-gray-800); }
:root[data-theme="dark"] .mk .text-\[\#fd9400\] { color: var(--ms-yellow); }
:root[data-theme="dark"] .mk .shadow-pop-over { --tw-shadow: 0 0 4px 0 var(--shadow-menu); }

/* medikit.css(casty-handoff v1.5.0)에 빠진 규칙 넷 — 예제 마크업(Table, SummaryPanel)에는 있는 클래스다.
   재생성하면 medikit.css 가 덮이므로 여기에 둔다(2026-10-16, 보내기 카드에서 발견). */
.mk .\[\&\>tr\]\:h-\[50px\] > tr { height: 50px; }
.mk .\[\&\>tr\]\:h-\[52px\] > tr { height: 52px; }
.mk .\[\&\>tr\:hover\]\:bg-ms-gray-100 > tr:hover { background-color: var(--ms-gray-100); }
.mk .\[\&\>\*\:last-child\]\:border-b-0 > *:last-child { border-bottom-width: 0; }