/* L2 공개 화면 디자인 토큰(--sdo-*) — L2 색·글자·간격·모서리·그림자의 한 자리 · L2 셸만 싣는다
   리터럴 색은 이 파일에만 둔다 · L2 디자인을 바꿀 때 먼저 여는 파일
   기준 = 사용자 시안 dosc/요구사항/원본/화면시안_서류신청.jpg(하늘색 강조 · 흰 카드 · 둥근 모서리 · 큰 굵은 제목 · 하단 고정 큰 버튼) */

:root {
    /* 색 — 면 */
    --sdo-bg: #F4F6F8;            /* 화면 바탕 */
    --sdo-surface: #FFFFFF;       /* 카드·상단 바·하단 탭 */
    --sdo-surface-soft: #F9FAFB;  /* 입력 칸·안내 상자 */
    --sdo-hero-from: #E3F2FD;     /* 홈 소개 띠 그라데이션 시작 */
    --sdo-hero-to: #F4F9FE;       /* 홈 소개 띠 그라데이션 끝 */
    --sdo-footer-bg: #191F28;     /* PC 바닥글 */
    --sdo-footer-ink: #B0B8C1;

    /* 색 — 강조(시안의 하늘색 버튼·체크) */
    --sdo-accent: #2F9BE8;
    --sdo-accent-hover: #1E88D4;
    --sdo-accent-soft: #E8F4FD;
    --sdo-accent-line: #A9D6F7;
    --sdo-on-accent: #FFFFFF;

    /* 색 — 글자 */
    --sdo-ink: #191F28;
    --sdo-ink-sub: #4E5968;
    --sdo-ink-muted: #8B95A1;
    --sdo-ink-faint: #B0B8C1;

    /* 색 — 선 */
    --sdo-line: #E5E8EB;
    --sdo-line-soft: #F2F4F6;

    /* 색 — 상태 */
    --sdo-success: #16A34A;
    --sdo-danger: #DC2626;
    --sdo-danger-hover: #B91C1C;

    /* 그림자 · 덮개 */
    --sdo-shadow-card-hover: 0 6px 20px rgba(25, 31, 40, 0.10);   /* 떠 있는 판(모달·팝업)만 — 화면 안 상자·버튼은 그림자 없음(RISK_NOTE 형) */
    --sdo-shadow-bar: 0 1px 0 rgba(25, 31, 40, 0.06);
    --sdo-scrim: rgba(25, 31, 40, 0.45);

    /* 글자 크기 */
    --sdo-fs-xs: 0.75rem;
    --sdo-fs-sm: 0.8125rem;
    --sdo-fs-md: 0.9375rem;
    --sdo-fs-lg: 1.0625rem;
    --sdo-fs-xl: 1.25rem;
    --sdo-fs-2xl: 1.625rem;
    --sdo-fs-3xl: 2.25rem;       /* PC 홈 큰 제목 */
    --sdo-fs-q: 2rem;            /* PC 위저드 단계 질문 */
    --sdo-fw-medium: 500;
    --sdo-fw-bold: 700;
    --sdo-fw-heavy: 800;

    /* 간격 */
    --sdo-sp-4: 4px;
    --sdo-sp-8: 8px;
    --sdo-sp-12: 12px;
    --sdo-sp-16: 16px;
    --sdo-sp-20: 20px;
    --sdo-sp-24: 24px;
    --sdo-sp-32: 32px;
    --sdo-sp-48: 48px;
    --sdo-sp-64: 64px;

    /* 모서리 */
    --sdo-radius: 12px;
    --sdo-radius-lg: 16px;        /* 카드 */
    --sdo-radius-pill: 999px;

    /* 크기 · 배치 */
    --sdo-container: 1200px;      /* PC 내용 폭(띠는 화면 끝까지) */
    --sdo-gutter: 24px;           /* 내용 좌우 여백 */
    --sdo-topbar-h: 64px;         /* PC 상단 바 */
    --sdo-logo-h: 30px;           /* 상단 바 삼호 로고 높이 */
    --sdo-topbar-h-mo: 56px;      /* 모바일 제목줄 */
    --sdo-tab-h: 60px;            /* 모바일 하단 탭 */
    --sdo-btn-h: 48px;
    --sdo-nav-h: 40px;            /* PC 상단 메뉴 알약 */
    --sdo-cta-h: 56px;            /* 하단 고정 큰 버튼 */
    --sdo-input-h: 48px;          /* 알림 팝업 안 입력칸 */
    --sdo-input-h-lg: 64px;       /* 화면 입력칸 PC(위저드·본인 확인) */
    --sdo-input-h-lg-mo: 56px;    /* 화면 입력칸 모바일 */
    /* 위저드 글씨 두 등급(PC · 모바일) — 항목 = 서류 카드 이름 · 체크 항목 · 동의 · 입력칸 글씨 / 글 = 칸 이름 · 설명 · 도움말 · 단위 · 안내 */
    --sdo-fs-wz-item: 1.375rem;
    --sdo-fs-wz-item-mo: 1.125rem;
    --sdo-fs-wz-text: var(--sdo-fs-lg);
    --sdo-fs-wz-text-mo: var(--sdo-fs-md);
    --sdo-check: 22px;

    /* 아이콘 크기 등급 — 버튼 안 · 탭·작은 ⓘ·모바일 그림 칸 · 카드 ⓘ·그림 칸 · 빈 안내·알림 */
    --sdo-ic-sm: 1.125rem;
    --sdo-ic-md: 1.375rem;
    --sdo-ic-lg: 1.75rem;
    --sdo-ic-2xl: 3rem;

    /* 공용 base(L1 과 같은 파일 — u_components)·user_modal.js 아이콘 색이 읽는 토큰을 L2 화면에서만 L2 값으로 덮는다 */
    --u-modal-z: 1000;
    --u-accent: var(--sdo-accent);
    --u-accent-hover: var(--sdo-accent-hover);
    --u-success: var(--sdo-success);
    --u-danger: var(--sdo-danger);
}