/* ========================================================================== 숭의여자대학교 원격평생교육원 — Design Tokens -------------------------------------------------------------------------- 출처 : Figma / 원평_학습자 › "ㄴ 숭의여대 시안 3종" (node 7319:2061) 시안 1_메인홈 (7319:2062) · 시안 2_메인홈 (7319:2449) · 시안 3_메인홈 (7319:2995) 기준 : 데스크톱 1920px 아트보드 / 모바일 360px 아트보드 추출 : Figma MCP get_design_context 3종 전량 파싱 후 값 빈도 집계 표기 규칙 [F] Figma 시안에서 실제 사용된 값 (괄호 안은 사용 횟수) [B] 브랜드 지정값 — 시안이 아니라 발주 기준으로 정의 [D] 위 값에서 파생·정규화한 값 (램프 보간, 스케일 반올림 등) ※ 아직 컴포넌트 CSS는 작성하지 않았습니다. 이 파일은 토큰 정의만 포함합니다. ========================================================================== */ /* ========================================================================== ⚠ 확정 필요 — 시안과 브랜드 기준이 어긋나는 3가지 -------------------------------------------------------------------------- 1) 네이비 지정 #0B3C86 이지만 시안 실사용 주력은 #00428E / #004A8F 계열. #0B3C86 은 시안 1의 활성 GNB 라벨, 시안 3의 소형 텍스트 단 3곳뿐. → 아래에서는 지정값 #0B3C86 을 --navy-700(브랜드 앵커)로 두고, 시안 실사용값을 램프의 인접 스텝으로 함께 보존했습니다. #00428E 로 통일할지 #0B3C86 으로 교체할지 결정 필요. 2) 오렌지 지정 #EA5414 가 시안 3종 어디에도 없음 (hex 전수 검색 0건). 시안은 네이비-블루 단색 체계이며 강조는 핑크 언더라인이 담당. → --orange-* 램프는 정의만 해두고 미사용 상태로 표시. (히어로 배경이 래스터 이미지라 이미지 내부 색까지는 미검증) 3) 핑크 PANTONE 1895 C 의 sRGB 변환값은 변환 방식마다 달라 임의 기입하지 않았습니다. 시안에 실제 칠해진 핑크는 #F6BED7 (GNB 활성 언더라인). → 인쇄 기준 별도 지정 hex 가 있으면 --pink-400 을 교체하세요. ========================================================================== */ :root { /* ====================================================================== 1. COLOR — PRIMITIVE ====================================================================== */ /* ---- Navy / Primary ------------------------------------------------ */ /* 휘도(상대 명도) 오름차순 정렬. 시안 실사용값을 최대한 그대로 보존. */ --navy-950: #000A45; /* [F] 유틸리티 바 배경, 상담문의 밴드 (2) */ --navy-900: #07174A; /* [F] (2) */ --navy-800: #004072; /* [F] (2) */ --navy-700: #0B3C86; /* [B] 브랜드 지정 네이비 — GNB 활성 라벨 (3) */ --navy-650: #004388; /* [F] (2) */ --navy-600: #00428E; /* [F] ★ 시안 실사용 주력 네이비 — 본문/제목 (22) */ --navy-550: #004A8F; /* [F] 유틸 버튼 보더·텍스트 (8) */ --navy-500: #005394; /* [F] 그라데이션 종점 (2) */ --navy-450: #20599C; /* [F] (2) */ --navy-400: #0663C3; /* [F] CTA 버튼 배경 (8) */ --navy-300: #368BEE; /* [F] 보조 블루 배경·보더 (28) */ --navy-200: #B3D8F2; /* [F] (2) */ --navy-150: #D1D9E5; /* [F] 보더 (2) */ --navy-100: #E1E7F0; /* [F] 카드/구분선 보더 (22) */ --navy-80: #E6E9F0; /* [F] (4) */ --navy-60: #EAEEFF; /* [F] (2) */ --navy-40: #EEF3FA; /* [F] ★ 최다 사용 표면색 — 섹션/카드 배경 (36) */ --navy-20: #F7F9FC; /* [F] 로그인·퀵메뉴 섹션 배경 (2) */ /* ---- Orange / Accent ----------------------------------------------- */ /* [B] 브랜드 지정. 현재 시안 3종에서 사용처 0건 — 정의만 해둔 상태. */ --orange-900: #7A2B0A; /* [D] */ --orange-700: #B33F0F; /* [D] */ --orange-500: #EA5414; /* [B] 브랜드 지정 오렌지 (기준값) */ --orange-400: #F27A45; /* [D] */ --orange-300: #F8A67F; /* [D] */ --orange-200: #FCC2B6; /* [F] 시안 내 주석 스티커에서만 사용 (4) */ --orange-100: #FDD5A7; /* [F] 뱃지 틴트 (2) */ --orange-50: #FDEDE6; /* [D] */ /* ---- Pink / PANTONE 1895 C ----------------------------------------- */ --pink-700: #B5688A; /* [D] */ --pink-500: #E58FB4; /* [D] */ --pink-400: #F6BED7; /* [F] ★ GNB 활성 언더라인 — 1895 C 대응값 (3) */ --pink-200: #FBDEEB; /* [D] */ --pink-100: #FDF0F6; /* [D] */ /* ---- Neutral Gray (중성 회색) --------------------------------------- */ /* 공용 컴포넌트 라이브러리(원평 학습자)에서 상속된 계열. */ --gray-900: #111111; /* [F] (9) */ --gray-850: #131314; /* [F] (8) */ --gray-800: #1B1B1E; /* [F] (4) */ --gray-700: #3F3F44; /* [F] (6) */ --gray-650: #474747; /* [F] (8) */ --gray-600: #595757; /* [F] (6) */ --gray-500: #777777; /* [F] 시안 원본 보조 텍스트 (8) — 4.48:1, 본문엔 부적합 */ --gray-450: #6E6E6E; /* [D] 접근성 대응 — 흰 배경 5.10:1 / #F5F5F4 4.67:1 */ --gray-400: #999999; /* [F] 시안 원본 뮤트 (16) — 2.85:1, 장식용으로만 */ --gray-300: #B0B0B0; /* [F] (6) */ --gray-250: #D5D5D5; /* [F] border/default 변수값 (8) */ --gray-200: #D8D8D8; /* [F] gray/gray-30 변수값 (9) */ --gray-180: #D9D9D9; /* [F] (4) */ --gray-150: #E1E1E1; /* [F] (6) */ --gray-120: #E8E8E8; /* [F] (4) */ --gray-100: #EDEDED; /* [F] 히어로 플레이스홀더 배경 (6) */ --gray-80: #F2F2F2; /* [F] (2) */ --gray-60: #F4F4F4; /* [F] (8) */ --gray-40: #F5F5F5; /* [F] (2) */ /* ---- Blue Gray (청회색) --------------------------------------------- */ /* 숭의여대 시안 고유 계열. 네이비와 같이 쓰이며 중성 회색보다 우선함. */ --bluegray-900: #101828; /* [F] (8) */ --bluegray-850: #171B1F; /* [F] text/strong 변수값 (4) */ --bluegray-800: #252A33; /* [F] ★ 최다 사용 본문 텍스트색 (32) */ --bluegray-750: #2A2E36; /* [F] (6) */ --bluegray-700: #364153; /* [F] (8) */ --bluegray-500: #616974; /* [F] (2) */ --bluegray-400: #757D8A; /* [F] (6) */ --bluegray-350: #5F7180; /* [D] 접근성 대응 뮤트 — 아래 주석 참조 */ --bluegray-300: #899EB0; /* [F] 시안 원본 뮤트 텍스트 (18) */ --bluegray-250: #A8B0BA; /* [F] (4) */ --bluegray-200: #BFC7D4; /* [F] (2) */ /* ⚠ 시안의 뮤트 텍스트 #899EB0(2.77:1) · placeholder #A8B0BA(2.19:1) 는 WCAG AA(4.5:1) 미달입니다. 원본 값은 위에 그대로 보존하고, 본문 텍스트에는 색상각을 유지한 채 명도만 낮춘 --bluegray-350 을 씁니다. #5F7180 → 흰 배경 5.05:1 / #F5F5F4 배경 4.63:1 (둘 다 AA 통과) */ /* ---- Functional / 3rd-party ---------------------------------------- */ --color-price: #FC1C49; /* [F] text/price 변수값 — 수강료 강조 (7) */ --color-success: #008447; /* [F] (4) */ --color-success-bg: #D0E8CB;/* [F] (2) */ --color-danger-bg: #F4D5D1;/* [F] (2) */ --color-info: #2196F3; /* [F] (8) */ --color-kakao: #FEE500; /* [F] (4) */ --color-kakao-alt:#FAE100; /* [F] (2) */ --color-naver: #03C75A; /* [F] (2) */ --color-white: #FFFFFF; --color-black: #000000; /* ====================================================================== 2. COLOR — SEMANTIC --------------------------------------------------------------------- 컴포넌트에서는 primitive 대신 아래 semantic 토큰을 참조하세요. ====================================================================== */ /* ---- Brand ---------------------------------------------------------- */ --color-brand: var(--navy-700); /* 브랜드 지정 #0B3C86 */ --color-brand-strong: var(--navy-950); --color-brand-alt: var(--navy-600); /* 시안 실사용 네이비 #00428E */ --color-brand-accent: var(--pink-400); /* 활성 상태 강조 (언더라인 등) */ --color-brand-secondary: var(--orange-500); /* 지정 오렌지 — 현재 미사용 */ /* ---- Surface -------------------------------------------------------- */ --surface-default: var(--color-white); --surface-subtle: var(--navy-20); /* #F7F9FC — 섹션 배경 */ --surface-muted: var(--navy-40); /* #EEF3FA — 카드·블록 배경 */ --surface-emphasis: var(--navy-100); /* #E1E7F0 */ --surface-inverse: var(--navy-950); /* #000A45 — 상담문의 밴드, 유틸 바 */ --surface-neutral: var(--gray-60); /* #F4F4F4 — 공용 컴포넌트 계열 */ --surface-placeholder:var(--gray-100); /* #EDEDED — 이미지 자리 */ --surface-overlay: rgba(0, 0, 0, 0.4);/* [F] 시안 2 투명 헤더 */ --surface-scrim: rgba(255, 255, 255, 0.8); /* [F] */ /* ---- Text ----------------------------------------------------------- */ --text-strong: var(--bluegray-850); /* #171B1F */ --text-primary: var(--bluegray-800); /* #252A33 — 기본 본문 */ --text-secondary: var(--bluegray-350); /* #5F7180 — AA 대응 (시안 #757D8A) */ --text-muted: var(--bluegray-350); /* #5F7180 — AA 대응 (시안 #899EB0) */ --text-subtle: var(--gray-450); /* #6E6E6E — 중성 계열 보조 텍스트 */ --text-disabled: var(--gray-300); /* #B0B0B0 — 비활성 전용, 본문 금지 */ --text-brand: var(--navy-700); /* #0B3C86 */ --text-link: var(--navy-400); /* #0663C3 */ --text-price: var(--color-price); /* #FC1C49 */ --text-on-brand: var(--color-white); --text-inverse: var(--color-white); /* ---- Border --------------------------------------------------------- */ --border-default: var(--navy-100); /* #E1E7F0 — 카드·구분선 */ --border-subtle: var(--gray-250); /* #D5D5D5 — border/default 변수 */ --border-strong: var(--navy-550); /* #004A8F — 아웃라인 버튼 */ --border-accent: var(--navy-300); /* #368BEE */ --border-muted: var(--gray-200); /* #D8D8D8 */ /* ====================================================================== 3. TYPOGRAPHY --------------------------------------------------------------------- Figma 원본은 Pretendard(213) + Noto Sans KR(58) + Gmarket Sans(8) + Jalnan 2(4) 혼용. Noto Sans KR / Jalnan 2 는 대체용이므로 아래 2트랙으로 통일합니다. 본문·UI → Pretendard (--font-sans) 헤딩·KV → Gmarket Sans (--font-display) ⚠ Noto Sans KR → Pretendard 교체 시 두 폰트의 메트릭(x-height, 어센더)이 달라 Figma의 px 행간을 그대로 옮기면 미세하게 어긋납니다. 그래서 행간은 px 고정이 아니라 unitless 비율로 정규화했습니다. ⚠ Figma의 leading-[normal] (159건) 은 브라우저 기본값(폰트 의존)이라 토큰화가 불가능합니다. 아래 --leading-* 중 하나를 반드시 명시하세요. ====================================================================== */ /* ---- Family --------------------------------------------------------- */ --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; --font-display: 'GmarketSans', 'Gmarket Sans', var(--font-sans); --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; /* ---- Weight --------------------------------------------------------- */ --font-light: 300; /* [F] Pretendard:Light (12) */ --font-regular: 400; /* [F] Pretendard:Regular (31) */ --font-medium: 500; /* [F] Pretendard:Medium (45) */ --font-semibold: 600; /* [F] Pretendard:SemiBold (30) */ --font-bold: 700; /* [F] Pretendard:Bold (49) — 최다 */ --font-extrabold: 800; /* [F] Pretendard:ExtraBold (3) */ /* ---- Size — 6단계 + 히어로 ------------------------------------------- Figma 실측 18종(13·14·15·16·17·18·19·20·22·24·26·28·32·36·40·48·64·100)이 산발적이라 6단계로 수렴했습니다. 상위 2단계는 clamp 로 유동 처리해서 브레이크포인트마다 font-size 를 덮어쓰던 규칙 자체를 없앴습니다. 수렴 매핑 10 · 12 · 13 → --fs-xs 13px 14 · 15 → --fs-sm 15px 16 · 17 → --fs-md 17px 18 · 19 · 20 · 22 → --fs-lg 20px 24 · 26 · 28 · 32 → --fs-xl clamp(22 → 28) 36 · 40 · 48 → --fs-2xl clamp(28 → 48) 64 · 100 → --fs-hero clamp(40 → 100) -------------------------------------------------------------------- */ --fs-xs: 13px; /* 뱃지 · 날짜 · 캡션 */ --fs-sm: 15px; /* 유틸 · 보조 라벨 */ --fs-md: 17px; /* ★ 기본 본문 */ --fs-lg: 20px; /* 카드 제목 · GNB */ --fs-xl: clamp(22px, 2.2vw, 28px); /* 섹션 소제목 */ --fs-2xl: clamp(28px, 3.4vw, 48px); /* 섹션 대제목 */ --fs-hero: clamp(40px, 5.2vw, 100px); /* 히어로 · 키비주얼 */ /* ---- Line height (unitless) ----------------------------------------- */ --leading-none: 1; /* [D] 아이콘·숫자 */ --leading-tight: 1.2; /* [F] Gmarket Sans 36px 헤딩 (2) */ --leading-snug: 1.3; /* [D] 대형 헤드라인 권장 */ --leading-normal: 1.4; /* [F] 1.402(11) / 1.439(42) 정규화 — 제목·라벨 */ --leading-relaxed: 1.5; /* [F] 17px 본문 (9) */ --leading-loose: 1.7; /* [D] 한글 롱폼 본문 권장 */ /* ---- Letter spacing -------------------------------------------------- */ --tracking-tight: -0.4px; /* [F] (9) 16px Light */ --tracking-snug: -0.2px; /* [F] (9+8) -0.18px 포함 정규화 */ --tracking-normal: 0; --tracking-wide: 0.2px; /* [F] (17) GNB·버튼 라벨 */ --tracking-widest: 4px; /* [F] (2) KV 자간 강조 */ /* ---- Composite text styles ------------------------------------------ */ /* font 단축 속성: / */ --type-display: var(--font-bold) var(--fs-hero)/var(--leading-none) var(--font-display); --type-h1: var(--font-bold) var(--fs-2xl)/var(--leading-snug) var(--font-display); --type-h2: var(--font-bold) var(--fs-2xl)/var(--leading-tight) var(--font-display); --type-h3: var(--font-bold) var(--fs-xl)/var(--leading-normal) var(--font-display); --type-h4: var(--font-semibold) var(--fs-xl)/var(--leading-normal) var(--font-sans); --type-h5: var(--font-bold) var(--fs-lg)/var(--leading-normal) var(--font-sans); --type-h6: var(--font-semibold) var(--fs-lg)/var(--leading-normal) var(--font-sans); --type-body-lg: var(--font-regular) var(--fs-md)/var(--leading-relaxed) var(--font-sans); --type-body: var(--font-regular) var(--fs-md)/var(--leading-loose) var(--font-sans); --type-body-sm: var(--font-regular) var(--fs-sm)/var(--leading-relaxed) var(--font-sans); --type-label: var(--font-medium) var(--fs-sm)/var(--leading-normal) var(--font-sans); --type-caption: var(--font-regular) var(--fs-xs)/var(--leading-normal) var(--font-sans); --type-nav: var(--font-bold) var(--fs-md)/var(--leading-normal) var(--font-sans); --type-button: var(--font-semibold) var(--fs-md)/var(--leading-none) var(--font-sans); /* ====================================================================== 4. SPACING --------------------------------------------------------------------- Figma 실측 padding/gap 40여 종을 4px 배수로 정규화. 정규화 매핑: 5→4 · 7→8 · 9→8 · 11→12 · 13→12 · 18→16 · 26→24 · 31→32 35→36 · 54→56 · 57/58→56 ====================================================================== */ --space-0: 0; --space-1: 2px; /* [F] gap (3) */ --space-2: 4px; /* [F] gap (10) */ --space-3: 6px; /* [F] gap (13) */ --space-4: 8px; /* [F] gap/padding (9+20) */ --space-5: 10px; /* [F] padding (18) */ --space-6: 12px; /* [F] gap (19) */ --space-7: 14px; /* [F] gap (18) */ --space-8: 16px; /* [F] ★ gap 최다 (35) */ --space-9: 20px; /* [F] gap/padding (7+11) */ --space-10: 24px; /* [F] ★ 그리드 거터 (12) */ --space-11: 28px; /* [F] padding (1) */ --space-12: 32px; /* [F] padding (14) */ --space-13: 36px; /* [F] gap (5) */ --space-14: 40px; /* [F] gap/padding (3+3) */ --space-15: 48px; /* [F] 헤더 좌우 패딩 (4) */ --space-16: 56px; /* [D] */ --space-17: 64px; /* [F] ★ 섹션 상하 패딩 (2) */ --space-18: 80px; /* [D] */ --space-19: 96px; /* [D] */ --space-20: 120px; /* [D] */ --space-21: 160px; /* [D] */ --space-22: 240px; /* [F] 1920 기준 섹션 좌우 여백 (2) */ /* ---- Section padding ------------------------------------------------ 시안의 섹션 간격은 64 / 66 / 163 / 236px 로 불규칙합니다(좌표 실측). 콘텐츠 섹션은 단일 리듬으로 통일하고, 풀블리드 밴드(상담문의 250px, 푸터)는 고유 높이라 이 리듬에서 제외합니다. */ --section-py: var(--space-18); /* 80px — 1025~ */ --section-py-md: var(--space-16); /* 56px — ~768 */ --section-py-sm: var(--space-14); /* 40px — ~375 */ --section-px: var(--space-22); /* 240px — 1920 기준 좌우 여백 */ --page-px: var(--space-15); /* 48px — 헤더 풀블리드 좌우 패딩 */ --page-px-mobile: var(--space-9); /* 20px — 360 아트보드 실측 */ /* ---- Component padding ---------------------------------------------- */ --card-padding: var(--space-9); /* 20px */ --card-padding-lg: var(--space-10); /* 24px */ --button-padding-y: var(--space-5); /* 10px */ --button-padding-x: var(--space-9); /* 20px */ --input-padding-y: var(--space-6); /* 12px */ --input-padding-x: var(--space-7); /* 14px */ /* ====================================================================== 5. LAYOUT / GRID --------------------------------------------------------------------- 아트보드 1920px 기준. 시안별로 컨테이너 폭이 두 갈래입니다. 시안 1 · 2 → 1440px (좌우 240px 여백) 시안 3 → 1224px (좌우 348px 여백, 실제 배치는 343~356 편차 있음) ====================================================================== */ --artboard-w: 1920px; --artboard-w-mobile: 360px; --container-max: 1440px; /* [F] 시안 1·2 — 콘텐츠 실폭 */ --container-narrow: 1224px; /* [F] 시안 3 */ --container-text: 800px; /* [F] 롱폼 본문 (2) */ /* 래퍼에 적용할 바깥 폭. 좌우 패딩(48)을 포함해서 1920 화면에서 콘텐츠가 정확히 x240~1680 에 놓이도록 합니다. max-width 에 --container-max 를 그대로 쓰면 패딩만큼 안쪽으로 밀립니다. */ --container-outer: calc(1440px + 48px * 2); /* 1536px */ --container-outer-narrow: calc(1224px + 48px * 2); /* 1320px */ --grid-columns: 12; --grid-gap: 24px; /* [F] ★ 기본 거터 (12) */ --grid-gap-lg: 40px; /* [F] 퀵메뉴 4열 (1) */ --grid-gap-sm: 16px; /* [F] */ /* 12컬럼 기준 1컬럼 폭 (거터 24px) */ --grid-col-1440: 98px; /* [D] (1440 - 11×24) ÷ 12 */ --grid-col-1224: 80px; /* [D] (1224 - 11×24) ÷ 12 */ /* 실측 카드 폭 — 4열 그리드 */ --card-w-330: 330px; /* [F] ★ 1440 컨테이너 4열 + gap 40 (49) */ --card-w-343: 343px; /* [F] 1440 컨테이너 4열 + gap 24 (3) */ --card-w-288: 288px; /* [F] 1224 컨테이너 4열 + gap 24 (8) */ --card-w-383: 383px; /* [F] 1224 컨테이너 3열 + gap 24 (3) */ /* 주요 블록 높이 (실측) */ --header-h: 139px; /* [F] 시안 1 (솔리드) */ --header-h-alt: 160px; /* [F] 시안 2 (투명 오버레이) */ --header-utility-h: 56px; /* [F] 55.75px 정규화 */ --hero-h: 811px; /* [F] 3개 시안 공통 */ --footer-h: 224px; /* [F] 3개 시안 공통 */ /* 브레이크포인트 */ --bp-mobile: 360px; --bp-tablet: 768px; --bp-laptop: 1024px; --bp-desktop: 1440px; --bp-wide: 1920px; /* ====================================================================== 6. RADIUS --------------------------------------------------------------------- Figma 실측 29종. 소수점 값(6.964 / 9.285 / 10.712 / 20.87 / 23.212)은 인스턴스 스케일링 부산물이라 정수 스텝으로 흡수했습니다. ====================================================================== */ /* Figma 실측 17종(2·4·6·8·12·14·16·20·24·30·32·500…)을 4단계로 수렴. 수렴 매핑 2 · 4 · 6 · 8 → --r-sm 8px 12 · 14 · 16 → --r-md 14px 20 · 24 · 32 → --r-lg 20px 32(알약) · 500 · full → --r-full ※ 높이 42~46px 요소의 radius 32 는 이미 알약이라 --r-full 과 동일 결과 */ --r-none: 0; --r-sm: 8px; /* 인풋 · 뱃지 · 소형 버튼 */ --r-md: 14px; /* 퀵메뉴 · 공지 카드 */ --r-lg: 20px; /* 과정 카드 · 대형 블록 */ --r-full: 9999px; /* 알약 · 원형 */ /* 상단만 라운드되는 카드 패턴이 반복 사용됨 (26건) */ --r-card-top: var(--r-lg) var(--r-lg) 0 0; /* ====================================================================== 7. SHADOW --------------------------------------------------------------------- Figma 실측 8종 전량 보존. 소수점 반경(8.211 / 16.423 / 5.803)은 반올림. 그림자 색이 순수 검정이 아니라 네이비 틴트(11,23,51 / 20,72,157)인 점이 이 시안의 특징입니다. ====================================================================== */ /* Figma 실측 12종을 3단계 elevation 으로 수렴. 그림자 색이 순수 검정이 아니라 네이비 틴트인 점은 그대로 유지합니다. 수렴 매핑 0 4px 14px .05 · 0 5px 5px .10 · 0 0 16px .08 → --elev-1 0 6px 20px .06 · 0 10px 14px .14 → --elev-2 0 8px 16px .08 (메가패널 · 드로어) → --elev-3 */ --elev-0: none; --elev-1: 0 2px 8px 0 rgba(11, 23, 51, 0.06); /* 카드 기본 */ --elev-2: 0 6px 16px 0 rgba(11, 23, 51, 0.10); /* 호버 · 떠 있는 요소 */ --elev-3: 0 12px 28px 0 rgba(11, 23, 51, 0.14); /* 메가패널 · 오버레이 */ /* 헤더 전용 — 신규 헤더 시안(7323:1271)의 고정값이라 별도 유지 */ --elev-header: 0 3px 7px 0 rgba(11, 23, 51, 0.10); /* 포커스 링 — 시안에 없어 접근성 기준으로 신규 정의 */ --focus-ring: 0 0 0 3px rgba(11, 60, 134, 0.35); /* [D] */ }