/* ============================================================================
Focus Education — design.css
디자인 토큰 (Figma 변수명 그대로 / 값은 Figma export 그대로)
- Primitives = Figma "Default" 모드 (원시 토큰)
- Themes = Figma "Light" 모드 (시맨틱 토큰, Primitives를 alias 참조)
변경 시: 값은 Figma Primitives만 수정 → 시맨틱·컴포넌트로 자동 전파.
============================================================================ */
/* ---------------------------------------------------------------------------
FONT — Pretendard Variable (jsDelivr 다이나믹 서브셋, 로딩속도 최적)
※ @font-face는 여기서 선언하지 않는다. 폰트 CSS는 각 페이지 에서 로드:
- Variable(전 웨이트) + 실제 쓰는 글자만 로드 → 한글 폰트 부담 최소화.
- font-weight 45~920 / font-display: swap (해당 CSS에 포함).
- include 미사용이므로 위 두 줄을 모든 .html 에 직접 넣는다(헤더와 함께 복제).
--------------------------------------------------------------------------- */
/* ============================================================================
PRIMITIVES (Figma "Default" 모드) — 원시 토큰
============================================================================ */
:root {
/* ---------- colors / primary (네이비 블루) ---------- */
--primary-0: #000000;
--primary-10: #062240;
--primary-20: #092B50;
--primary-30: #134579;
--primary-40: #205D9E;
--primary-50: #397DC6;
--primary-60: #6097D2;
--primary-70: #88B1DD;
--primary-80: #B0CBE8;
--primary-90: #D7E5F4;
--primary-95: #EBF2F9;
--primary-99: #FBFCFE;
--primary-100: #FFFFFF;
/* ---------- colors / secondary (골드/브라운) ---------- */
--secondary-0: #000000;
--secondary-10: #231A10;
--secondary-20: #47351F;
--secondary-30: #6A4F2F;
--secondary-40: #8E693E;
--secondary-50: #B1844E;
--secondary-60: #C19C71;
--secondary-70: #D0B595;
--secondary-80: #E0CEB8;
--secondary-90: #EFE6DC;
--secondary-95: #F7F3ED;
--secondary-99: #FDFDFB;
--secondary-100: #FFFFFF;
/* ---------- colors / tertiary (그린) ---------- */
--tertiary-0: #000000;
--tertiary-10: #082B21;
--tertiary-20: #0F5741;
--tertiary-30: #178262;
--tertiary-40: #1FAD83;
--tertiary-50: #26D9A3;
--tertiary-60: #52E0B6;
--tertiary-70: #7DE8C8;
--tertiary-80: #A8F0DA;
--tertiary-90: #D4F7ED;
--tertiary-95: #E9FBF6;
--tertiary-99: #FBFEFD;
--tertiary-100: #FFFFFF;
/* ---------- colors / neutral (웜 그레이) ---------- */
--neutral-0: #000000;
--neutral-4: #0A0A0A;
--neutral-6: #100F0F;
--neutral-10: #1A1A19;
--neutral-12: #1F1F1F;
--neutral-17: #2C2C2C;
--neutral-20: #343434;
--neutral-22: #393939;
--neutral-24: #3E3E3E;
--neutral-87: #DDDFE5;
--neutral-90: #E5E7ED;
--neutral-92: #ECEEF3;
--neutral-94: #F1F3F7;
--neutral-95: #F5F7FA;
--neutral-96: #F8FAFC;
--neutral-98: #FBFCFE;
--neutral-100: #FFFFFF;
/* ---------- colors / neutral-variant ---------- */
--neutral-variant-0: #000000;
--neutral-variant-10: #1A1A1A;
--neutral-variant-20: #333333;
--neutral-variant-30: #4D4D4D;
--neutral-variant-40: #666666;
--neutral-variant-50: #808080;
--neutral-variant-60: #999999;
--neutral-variant-70: #B2B2B2;
--neutral-variant-80: #CCCCCC;
--neutral-variant-90: #E5E5E5;
--neutral-variant-95: #F2F2F2;
--neutral-variant-99: #FCFCFC;
--neutral-variant-100: #FFFFFF;
/* ---------- colors / error ---------- */
--error-0: #000000;
--error-10: #330800;
--error-20: #660F00;
--error-30: #991700;
--error-40: #CC1F00;
--error-50: #FF2600;
--error-60: #FF5233;
--error-70: #FF7D66;
--error-80: #FFA899;
--error-90: #FFD4CC;
--error-95: #FFE9E5;
--error-99: #FFFBFA;
--error-100: #FFFFFF;
/* ---------- colors / lime ---------- */
--lime-0: #000000;
--lime-10: #263300;
--lime-20: #4D6600;
--lime-30: #739900;
--lime-40: #99CC00;
--lime-50: #BFFF00;
--lime-60: #CCFF33;
--lime-70: #D9FF66;
--lime-80: #E5FF99;
--lime-90: #F2FFCC;
--lime-95: #F9FFE5;
--lime-99: #FEFFFA;
--lime-100: #FFFFFF;
/* ---------- spacing (primitive, px) ---------- */
--spacing-0: 0px;
--spacing-2: 2px;
--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-20: 20px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-40: 40px;
--spacing-48: 48px;
--spacing-56: 56px;
--spacing-64: 64px;
--spacing-80: 80px;
--spacing-96: 96px;
/* ---------- radius (primitive, px) — Figma 키=값 매핑 그대로 ---------- */
--radius-0: 4px;
--radius-4: 8px;
--radius-8: 12px;
--radius-12: 16px;
--radius-16: 24px;
--radius-24: 28px;
--radius-full: 9999px;
/* ---------- typography / family ---------- */
--font-sans: 'Pretendard Variable', 'Pretendard';
--font-serif: 'El Messiri';
/* ---------- typography / size (px) ---------- */
--font-size-11: 11px;
--font-size-12: 12px;
--font-size-13: 13px;
--font-size-14: 14px;
--font-size-16: 16px;
--font-size-18: 18px;
--font-size-20: 20px;
--font-size-24: 24px;
--font-size-28: 28px;
--font-size-32: 32px;
--font-size-40: 40px;
--font-size-48: 48px;
/* ---------- typography / weight (Pretendard) ---------- */
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-black: 900; /* 추천 프로그램 카드 제목(Figma program_item = Pretendard 900) */
/* ---------- typography / line-height (unitless = %/100) ---------- */
--line-height-100: 1;
--line-height-120: 1.2;
--line-height-125: 1.25;
--line-height-130: 1.3;
--line-height-150: 1.5;
--line-height-160: 1.6;
/* ---------- typography / letter-spacing (em = %/100) ---------- */
--letter-spacing-0: 0em;
--letter-spacing-5: 0.05em;
--letter-spacing-neg-1: -0.01em;
--letter-spacing-neg-2: -0.02em;
}
/* ============================================================================
THEMES — Light (Figma "Light" 모드) — 시맨틱 토큰 (Primitives alias)
============================================================================ */
:root {
/* ---------- bg ---------- */
--bg-page: var(--neutral-100); /* #FFFFFF (raw) */
--bg-card: var(--neutral-98);
--bg-sunken: var(--neutral-95);
--bg-raised-1: var(--neutral-94);
--bg-raised-2: var(--neutral-92);
--bg-raised-3: var(--neutral-90);
--bg-input: var(--neutral-90);
--bg-inverse: var(--neutral-20);
--bg-hero: #EAF6FF; /* raw (alias 아님) */
/* ---------- text ---------- */
--text-default: var(--neutral-4);
--text-muted: var(--neutral-variant-30);
--text-light-muted: var(--neutral-variant-50);
--text-inverse: var(--neutral-95);
--text-white: var(--neutral-100);
--text-on-accent: var(--neutral-100);
--text-on-accent-soft: var(--primary-20);
--text-on-muted-soft: var(--secondary-70);
--text-on-danger: var(--neutral-100);
--text-on-danger-soft: var(--error-40);
--text-disabled: var(--neutral-variant-70);
--text-on-cta: var(--neutral-100);
--text-on-success: var(--neutral-10);
--text-on-highlight: var(--neutral-10);
--text-on-secondary: var(--neutral-100);
/* ---------- border ---------- */
--border-strong: var(--neutral-variant-60);
--border-subtle: var(--neutral-variant-80);
--border-soft: var(--neutral-variant-90);
/* ---------- accent (= primary 네이비) ---------- */
--accent-solid: var(--primary-20);
--accent-soft: var(--primary-95);
/* ---------- muted ---------- */
--muted-soft: var(--secondary-90);
/* ---------- danger ---------- */
--danger-solid: var(--error-60);
--danger-soft: var(--error-90);
/* ---------- cta ---------- */
--cta-solid: var(--primary-20);
/* ---------- success ---------- */
--success-solid: var(--tertiary-70);
--success-soft: var(--tertiary-95);
/* ---------- highlight ---------- */
--highlight-solid: var(--lime-60);
--highlight-soft: var(--lime-95);
/* ---------- secondary (= 골드) ---------- */
--secondary-solid: var(--secondary-50);
--secondary-border: var(--secondary-50);
/* ---------- spacing (시맨틱) ---------- */
--spacing-xs: var(--spacing-4);
--spacing-base: var(--spacing-8);
--spacing-sm: var(--spacing-12);
--spacing-md: var(--spacing-16);
--spacing-lg: var(--spacing-20);
--spacing-xl: var(--spacing-24);
--spacing-gutter: var(--spacing-16);
--spacing-margin: var(--spacing-20);
/* ---------- radius (시맨틱) ---------- */
--radius-sm: var(--radius-4); /* 8px */
--radius-default: var(--radius-8); /* 12px */
--radius-md: var(--radius-12); /* 16px */
--radius-lg: var(--radius-16); /* 24px */
--radius-xl: var(--radius-24); /* 28px */
/* --radius-full 은 primitive와 동일(9999px) */
}
/* ============================================================================
BASE
============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* scrollbar-gutter: stable 은 데스크톱(클래식 스크롤바)에서 스크롤바 등장/사라짐 시 콘텐츠 좌우 흔들림 방지용.
모바일은 오버레이 스크롤바라 gutter 예약이 우측 빈 여백만 만들고 스크롤 시 스크롤바가 그 자리에 깜빡임 → 데스크톱에만 적용 */
@media (min-width: 1024px) { html { scrollbar-gutter: stable; } }
body {
margin: 0;
overflow-x: clip; /* 추천프로그램 풀블리드 트랙이 모바일에서 가로 오버플로 → 가로 스크롤/레이아웃 폭 왜곡 방지 */
font-family: var(--font-sans), -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
font-size: var(--font-size-16);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-160);
color: var(--text-default);
background: var(--bg-page);
word-break: keep-all; /* 한글: 단어 단위 줄바꿈(단어 잘림 방지) */
overflow-wrap: break-word; /* 이메일 등 긴 토큰은 넘치지 않게 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
/* ============================================================================
TEXT STYLES (Figma 텍스트 스타일 = Themes typography 그대로)
============================================================================ */
.text-headline-xl {
font-size: var(--font-size-28);
font-weight: var(--font-weight-bold); /* Bold */
line-height: var(--line-height-120);
letter-spacing: var(--letter-spacing-neg-2);
}
.text-headline-lg {
font-size: var(--font-size-24);
font-weight: var(--font-weight-semibold); /* Semi Bold */
line-height: var(--line-height-125);
letter-spacing: var(--letter-spacing-neg-1);
}
.text-headline-md {
font-size: var(--font-size-20);
font-weight: var(--font-weight-semibold); /* Semi Bold */
line-height: var(--line-height-130);
letter-spacing: var(--letter-spacing-0);
}
.text-body-lg {
font-size: var(--font-size-16);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-160);
}
.text-body-md {
font-size: var(--font-size-14);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-160);
}
.text-body-sm {
font-size: var(--font-size-13);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-150);
}
.text-label-md {
font-size: var(--font-size-11);
font-weight: var(--font-weight-semibold); /* Semi Bold */
line-height: var(--line-height-100);
letter-spacing: var(--letter-spacing-5);
}
/* ============================================================================
A11Y 유틸 (전 페이지 공통)
============================================================================ */
.skip_nav { position: absolute; top: -9999px; left: 0; }
.skip_nav:focus {
top: 0; z-index: 9999; padding: 8px 16px;
background: var(--accent-solid); color: var(--text-on-accent);
}
.sr_only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ============================================================================
COMPONENTS (Figma 7:9171 "공통컴포넌트" 노드 스펙 그대로 추출)
============================================================================ */
/* ---------------- Button ---------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-sans); font-weight: var(--font-weight-semibold);
border: 1px solid transparent; border-radius: var(--radius-default);
white-space: nowrap; cursor: pointer; text-decoration: none;
transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.btn:disabled, .btn.is-disabled { pointer-events: none; }
/* disabled (Figma 정확값) — solid */
.btn-primary:disabled, .btn-secondary:disabled, .btn-destructive:disabled, .btn-neutral:disabled,
.btn-primary.is-disabled, .btn-secondary.is-disabled, .btn-destructive.is-disabled, .btn-neutral.is-disabled
{ background: var(--bg-sunken); color: var(--text-disabled); } /* #F5F7FA / #B2B2B2 (neutral도 통일) */
.btn-soft:disabled, .btn-soft.is-disabled { background: var(--accent-soft); color: var(--accent-solid); } /* Figma=무변화 */
.btn-ghost:disabled, .btn-ghost.is-disabled { background: transparent; color: var(--text-disabled); }
/* disabled — outline (Figma 미정의 → 일관 규칙 추가): 투명 bg + 회색 테두리 + disabled 텍스트.
outline 색 규칙(.btn-outline.btn-primary, 0,2,0)을 이기려고 변형별 복합선택자(0,3,0) 사용 */
.btn-outline.btn-primary:disabled, .btn-outline.btn-secondary:disabled,
.btn-outline.btn-destructive:disabled, .btn-outline.btn-neutral:disabled,
.btn-outline.btn-primary.is-disabled, .btn-outline.btn-secondary.is-disabled,
.btn-outline.btn-destructive.is-disabled, .btn-outline.btn-neutral.is-disabled
{ background: transparent; border-color: var(--border-subtle); color: var(--text-disabled); }
.btn svg { flex: none; }
/* 버튼 아이콘 크기 (Figma 인스턴스 크기) */
.btn-xs svg { width: 14px; height: 14px; }
.btn-sm svg { width: 16px; height: 16px; }
.btn-md svg { width: 18px; height: 18px; }
.btn-base svg { width: 20px; height: 20px; }
.btn-lg svg { width: 24px; height: 24px; }
.btn-xl svg { width: 28px; height: 28px; }
/* sizes (height·padding·font-size·gap·radius — Figma 추출) */
.btn-xs { height: 24px; padding: 0 8px; font-size: 11px; gap: 4px; border-radius: 8px; }
.btn-sm { height: 32px; padding: 0 16px; font-size: 11px; gap: 6px; border-radius: 8px; }
.btn-md { height: 40px; padding: 0 16px; font-size: 14px; gap: 8px; border-radius: 8px; }
.btn-base { height: 48px; padding: 0 24px; font-size: 14px; gap: 8px; border-radius: 12px; }
.btn-lg { height: 56px; padding: 0 24px; font-size: 16px; gap: 8px; border-radius: 12px; }
.btn-xl { height: 64px; padding: 0 24px; font-size: 18px; gap: 12px; border-radius: 12px; }
/* solid variants */
.btn-primary { background: var(--accent-solid); color: var(--text-on-accent); }
.btn-secondary { background: var(--secondary-solid); color: var(--text-on-secondary); }
.btn-destructive { background: var(--danger-solid); color: var(--text-on-danger); }
.btn-neutral { background: var(--bg-sunken); color: var(--text-muted); }
.btn-soft { background: var(--accent-soft); color: var(--text-on-accent-soft); }
.btn-ghost { background: transparent; color: var(--text-default); }
.btn-kakao-fill { background: #F7E100; color: var(--text-default); } /* 카카오 옐로우(브랜드) */
.btn-kakao-fill:hover { background: #E6D200; }
/* outline variants */
.btn-outline.btn-primary { background: transparent; color: var(--accent-solid); border-color: var(--accent-solid); }
.btn-outline.btn-secondary { background: transparent; color: var(--secondary-solid); border-color: var(--secondary-solid); }
.btn-outline.btn-destructive { background: transparent; color: var(--danger-solid); border-color: var(--danger-solid); }
.btn-outline.btn-neutral { background: transparent; color: var(--text-default); border-color: var(--border-subtle); }
/* SNS 아이콘 버튼: 아이콘 색만 muted(회색)로 — Figma 헤더/푸터 SNS */
.btn-icon.btn-sns { color: var(--text-muted); }
/* hover (Figma: secondary·neutral·ghost는 명시값 그대로 / primary·destructive·soft는
Figma에서 default와 동일해 무변화 → 클릭 피드백 위해 1톤 darken 적용) */
.btn-primary:hover { background: var(--primary-10); } /* Figma=#092B50(동일) → darken */
.btn-secondary:hover { background: var(--secondary-40); } /* Figma=#8E693E */
.btn-destructive:hover { background: var(--error-50); } /* Figma=#FF5233(동일) → darken */
.btn-neutral:hover { background: var(--neutral-92); } /* Figma=#ECEEF3 */
.btn-soft:hover { background: var(--primary-90); } /* Figma=#EBF2F9(동일) → darken */
.btn-ghost:hover { background: rgba(0,0,0,.14); } /* Figma=검정 14% */
.btn-outline.btn-primary:hover { background: var(--accent-soft); }
.btn-outline.btn-secondary:hover { background: var(--secondary-95); }
.btn-outline.btn-destructive:hover { background: var(--danger-soft); }
.btn-outline.btn-neutral:hover { background: var(--bg-sunken); }
/* 원형(rounded) 버튼 — 아이콘 전용 버튼을 원형으로 (size의 radius를 덮어씀) */
.btn-round { border-radius: var(--radius-full); }
/* icon-only (정사각) */
.btn-icon { padding: 0; }
.btn-icon.btn-xs { width: 24px; }
.btn-icon.btn-sm { width: 32px; }
.btn-icon.btn-md { width: 40px; }
.btn-icon.btn-base { width: 48px; }
.btn-icon.btn-lg { width: 56px; }
.btn-icon.btn-xl { width: 64px; }
/* ---------------- Field (Input / Textarea 공통: 라벨 + 박스 + 헬퍼) ---------------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 14px; font-weight: var(--font-weight-semibold); color: var(--text-default); }
.field-help { font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.field.is-error .field-help { color: var(--danger-solid); } /* Figma: 에러 헬퍼텍스트 = #FF5233 (테두리와 동일) */
/* Input box */
/* Figma: Input Box radius 8, 전 상태 border 1px. Initial=#CCCCCC, focus=#092B50, error=#FF5233 */
.input {
display: flex; align-items: center; gap: 8px;
width: 100%; height: 48px; padding: 0 16px;
background: var(--bg-page); color: var(--text-default);
border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
transition: border-color .15s;
}
.input::placeholder { color: var(--text-disabled); } /* Figma Input state=Initial 플레이스홀더 = text/disabled #B2B2B2 */
.input-sm { height: 32px; padding: 0 12px; }
.input-md { height: 40px; }
.input:focus, .input:focus-visible { outline: none; border-color: var(--accent-solid); }
.field.is-error .input { border-color: var(--danger-solid); }
.input:disabled, .field.is-disabled .input {
border-color: var(--border-subtle); background: var(--bg-sunken); color: var(--text-disabled); cursor: not-allowed;
}
/* Textarea (Input과 동일 테두리 규칙) */
.textarea {
width: 100%; min-height: 120px; padding: 12px 16px; resize: vertical;
background: var(--bg-page); color: var(--text-default);
border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
font-family: var(--font-sans); font-size: 14px; line-height: 1.6;
transition: border-color .15s;
}
.textarea::placeholder { color: var(--text-light-muted); }
.textarea:focus, .textarea:focus-visible { outline: none; border-color: var(--accent-solid); }
.field.is-error .textarea { border-color: var(--danger-solid); }
/* ---------------- Chip / Tag (radius full, pad 8/16, fs14 fw500) ---------------- */
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px; border-radius: var(--radius-full);
font-size: 14px; font-weight: var(--font-weight-medium); line-height: 1.5;
}
.chip svg { width: 16px; height: 16px; flex: none; }
.chip-default { background: var(--secondary-95); color: var(--secondary-solid); } /* 골드 soft */
.chip-gold { background: var(--secondary-solid); color: var(--text-on-secondary); }
.chip-navy { background: var(--cta-solid); color: var(--text-on-cta); }
.chip-grey { background: var(--bg-sunken); color: var(--neutral-20); }
.chip-danger { background: var(--danger-solid); color: var(--text-on-danger); } /* 캠프 '마감임박' — Figma #FF5233 / 흰색 */
/* ---------------- Checkbox / Radio (label fs14, gap8 — 네이티브 accent) ---------------- */
/* 마크업:
radio는 .check-mark 대신 */
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--text-default); cursor: pointer; }
.check-box { position: relative; width: 20px; height: 20px; flex: none; }
.check-box input {
appearance: none; -webkit-appearance: none; position: absolute; inset: 0;
width: 100%; height: 100%; margin: 0; background: var(--bg-page);
border: 1.5px solid var(--border-strong); cursor: pointer; /* 미선택 #999999 1.5px */
transition: background .12s, border-color .12s;
}
.check-box input[type="checkbox"] { border-radius: 4px; }
.check-box input[type="radio"] { border-radius: 50%; }
.check-box input:checked { border-color: var(--accent-solid); }
.check-box input[type="checkbox"]:checked { background: var(--accent-solid); } /* 네이비 박스 */
.check-box input[type="radio"]:checked { border-width: 2px; } /* 2px 네이비 링 */
/* 체크 마크(sprites #check, 흰색) / 라디오 점 — input 위에 겹쳐 표시 */
.check-mark, .radio-dot { position: absolute; inset: 0; margin: auto; pointer-events: none; opacity: 0; transition: opacity .12s; }
.check-mark { width: 14px; height: 14px; color: #fff; }
.radio-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-solid); }
.check-box input[type="checkbox"]:checked ~ .check-mark { opacity: 1; }
.check-box input[type="radio"]:checked ~ .radio-dot { opacity: 1; }
/* disabled */
.check-box input:disabled { border-color: var(--border-subtle); background: var(--bg-sunken); cursor: not-allowed; }
.check-box input[type="checkbox"]:checked:disabled { background: var(--text-disabled); border-color: var(--text-disabled); }
.check:has(input:disabled) { color: var(--text-muted); cursor: not-allowed; }
/* ---------------- Toast (H48, radius full, pad 12/16, fs16 fw500) ---------------- */
.toast {
display: inline-flex; align-items: center; gap: 8px;
height: 48px; padding: 12px 16px; border-radius: var(--radius-full);
background: var(--bg-page); color: var(--text-default);
font-size: 16px; font-weight: var(--font-weight-medium); line-height: 1.5;
box-shadow: 0 4px 16px rgba(30,36,48,.16); /* Figma DROP_SHADOW, border 없음 */
}
.toast .toast-ico { width: 24px; height: 24px; flex: none; } /* image/circle-*.svg (자체 색 보유) */
/* ============================================================================
COMPONENTS (추가) — Select / Modal / Datepicker
Figma 공통컴포넌트 프레임엔 없으나 jw에서 기본 사용 → 포커스에듀 토큰으로 구성.
============================================================================ */
/* ---------------- Select (드롭다운) ----------------
시각 스타일은 기존 컴포넌트를 그대로 재사용하고, 동작 훅만 .select-toggle(스타일 없음)로 붙인다.
- 인풋형: