/* 리플 디자인 토큰(docs/디자인_시스템.md). 색 단계는 토스 TDS, 색 이름 규칙(글자 fg / 바탕 bg / 선 stroke × 진하게 solid / 약하게 weak)과
   간격·모서리·그림자는 당근 SEED를 따른다. 화면 CSS는 아래 "쓰임새 토큰"만 쓴다(단계 값을 바로 쓰지 않는다). 다크 값도 여기서만 바꾼다.
   글자 대비: fg-* 토큰은 bg-layer-default·bg-layer-basement 위에서 4.5:1 이상(test/design-tokens.test.js가 확인). 4.5 미만인 회색은 placeholder·disabled에만. */
@import url(/static/fonts/pretendard.css);
:root{
 /* 단계 값: 회색은 TDS grey, 보라는 리플 #bb00f0을 500으로(2026-10-18 파랑 #2458ed에서 바꿈) */
 --grey-50:#f9fafb;--grey-100:#f2f4f6;--grey-200:#e5e8eb;--grey-300:#d1d6db;--grey-400:#b0b8c1;--grey-500:#8b95a1;--grey-600:#6b7684;--grey-700:#4e5968;--grey-800:#333d4b;--grey-900:#191f28;
 --purple-50:#f9edff;--purple-100:#f1d6ff;--purple-200:#e3a8ff;--purple-300:#d374ff;--purple-400:#c740ff;--purple-500:#bb00f0;--purple-600:#a300d1;--purple-700:#8600ad;--purple-800:#6b008a;--purple-900:#53006b;
 --red-50:#ffeeee;--red-600:#e42939;--red-700:#d22030;--green-50:#f0faf6;--green-900:#027648;--orange-50:#fff3e0;--orange-900:#b34d00;
 /* TDS에 없는 사이 값: 회색 바탕(grey-100) 위 흐린 글자가 4.5:1을 넘도록 600과 700 사이 */
 --grey-650:#646f7c;

 /* 쓰임새 토큰: 바탕 */
 --bg-layer-basement:var(--grey-50);   /* 관리 화면 바탕(카드 아래) */
 --bg-layer-default:#fff;              /* 카드·시트·공개 화면 바탕 */
 --bg-layer-sunken:var(--grey-50);     /* 카드 안 묶음(안내 상자, 고르기 칸) */
 --bg-field:var(--grey-100);           /* 입력칸 */
 --bg-neutral-weak:var(--grey-100);    /* 회색 버튼·분할 버튼·칩 */
 --bg-neutral-weak-pressed:var(--grey-200);
 --bg-neutral-solid:var(--grey-900);   /* 고른 칩, 토스트 */
 --bg-brand-solid:var(--purple-500);     /* 화면의 가장 중요한 행동 하나 */
 --bg-brand-solid-pressed:var(--purple-600);
 --bg-brand-weak:var(--purple-50);
 --bg-positive-weak:var(--green-50);
 --bg-warning-weak:var(--orange-50);
 --bg-critical-solid:var(--red-700);
 --bg-critical-weak:var(--red-50);
 /* 글자 */
 --fg-default:var(--grey-900);         /* 제목·중요한 글 */
 --fg-body:var(--grey-800);            /* 본문 */
 --fg-muted:var(--grey-700);           /* 보조 설명 */
 --fg-subtle:var(--grey-650);          /* 가장 흐린 글(날짜, 개수). 이보다 흐리면 대비 기준 미달 */
 --fg-placeholder:var(--grey-400);     /* 입력칸 예시 글, 꺼진 아이콘(대비 예외) */
 --fg-neutral-inverted:#fff;           /* bg-neutral-solid 위 */
 --fg-brand:var(--purple-500);
 --fg-brand-contrast:var(--purple-700);  /* bg-brand-weak 위 */
 --fg-positive:var(--green-900);
 --fg-warning:var(--orange-900);
 --fg-critical:var(--red-700);
 /* 선 */
 --stroke-neutral-weak:var(--grey-200);
 --stroke-neutral-subtle:var(--grey-100);
 --stroke-neutral-strong:var(--grey-300);
 --stroke-brand-weak:var(--purple-200);

 /* 글자 크기(TDS 단계) */
 --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
 --t1:30px;--t2:26px;--t3:22px;--t4:20px;--t5:17px;--t6:15px;--t7:13px;--t8:12px;
 /* 모서리(SEED) */
 --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-2xl:24px;--r-full:9999px;
 /* 그림자(SEED s1~s3): 떠 있는 것에만 */
 --s1:0 1px 4px #00000014;--s2:0 2px 10px #0000001a;--s3:0 4px 16px #0000001f;
 --gutter:20px;
 color-scheme:light
}
/* 다크: TDS 문서에 다크 값이 없어 직접 정함. 글자는 위와 같은 대비 기준을 지킨다.
   회색은 파란 기 대신 아주 옅은 보라 기(2026-10-18 대표색 보라에 맞춤, 밝기는 예전 값 그대로) */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
 --grey-50:#211e22;--grey-100:#2a262b;--grey-200:#363237;--grey-300:#454046;--grey-400:#6a636c;--grey-500:#88828a;--grey-600:#a49da6;--grey-700:#bfb9c1;--grey-800:#dad7db;--grey-900:#f2f0f2;
 --purple-50:#2a1535;--purple-200:#5c2a78;--purple-500:#c740ff;--purple-600:#bb00f0;--purple-700:#e7b5ff;
 --red-50:#3a1e23;--red-700:#ff8a92;--green-50:#14302a;--green-900:#4fdca0;--orange-50:#3a2a14;--orange-900:#ffb04a;--grey-650:#afa9b1;
 --bg-layer-basement:#141215;--bg-layer-default:#211e22;--bg-layer-sunken:#2a262b;--bg-field:#2e2a2f;--bg-neutral-weak:#322e33;--bg-neutral-weak-pressed:#3e393f;
 --bg-critical-solid:#c93a40;--bg-brand-solid:#bb00f0;--bg-brand-solid-pressed:#a300d1;--fg-brand:#d98cff;--fg-neutral-inverted:#141215;
 --s1:0 1px 4px #0006;--s2:0 2px 10px #0007;--s3:0 4px 16px #0008;
 color-scheme:dark}}
:root[data-theme=dark]{
 --grey-50:#211e22;--grey-100:#2a262b;--grey-200:#363237;--grey-300:#454046;--grey-400:#6a636c;--grey-500:#88828a;--grey-600:#a49da6;--grey-700:#bfb9c1;--grey-800:#dad7db;--grey-900:#f2f0f2;
 --purple-50:#2a1535;--purple-200:#5c2a78;--purple-500:#c740ff;--purple-600:#bb00f0;--purple-700:#e7b5ff;
 --red-50:#3a1e23;--red-700:#ff8a92;--green-50:#14302a;--green-900:#4fdca0;--orange-50:#3a2a14;--orange-900:#ffb04a;--grey-650:#afa9b1;
 --bg-layer-basement:#141215;--bg-layer-default:#211e22;--bg-layer-sunken:#2a262b;--bg-field:#2e2a2f;--bg-neutral-weak:#322e33;--bg-neutral-weak-pressed:#3e393f;
 --bg-critical-solid:#c93a40;--bg-brand-solid:#bb00f0;--bg-brand-solid-pressed:#a300d1;--fg-brand:#d98cff;--fg-neutral-inverted:#141215;
 --s1:0 1px 4px #0006;--s2:0 2px 10px #0007;--s3:0 4px 16px #0008;
 color-scheme:dark}