/* ============================================================
   Samsung SOP 자사몰 타이포그래피 기반
   - SOP 자사몰 템플릿 가이드 (플랫폼기획그룹-UX기획, 2026.04) Type scale 준수
   - 국문: Samsung One Korean 700/400
   - 영문·숫자 디스플레이: Samsung Sharp Sans Bold
   - 규칙: 32px 초과 line-height 1.2, 32px 이하 1.33
   ============================================================ */

@font-face {
    font-family: 'Samsung One Korean';
    src: url('SamsungOneKorean-400.woff2') format('woff2'), url('SamsungOneKoreanOTF 400.otf') format('opentype');   /* 2026-09-29 속도 — 한글 11,172자·영문·기호만 남긴 WOFF2 303KB(원본 OTF 3.3MB, 한자 없음 → 대체 서체) */
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Samsung One Korean';
    src: url('SamsungOneKorean-700.woff2') format('woff2'), url('SamsungOneKoreanOTF 700.otf') format('opentype');   /* WOFF2 318KB(원본 3.3MB) */
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Samsung Sharp Sans';
    src: url('SamsungSharpSans-Bold.woff2') format('woff2'), url('SamsungSharpSans-Bold.ttf') format('truetype');   /* WOFF2 52KB(원본 214KB) */
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* 서체 */
    --sop-font-kr: 'Samsung One Korean', 'Malgun Gothic', '맑은 고딕', sans-serif;
    --sop-font-en: 'Samsung Sharp Sans', 'Samsung One Korean', sans-serif;

    /* 브랜드 컬러 */
    --sop-blue: #1268e9;        /* 가이드 포인트 블루 (GNB바·혜택가·플래그) */
    --sop-blue-dark: #0b50c0;
    --sop-navy: #1428a0;        /* 삼성 브랜드 네이비 */
    --sop-black: #000000;
    --sop-txt: #111111;
    --sop-txt-sub: #555555;
    --sop-txt-light: #999999;
    --sop-line: #e5e5e5;
    --sop-bg-gray: #f7f7f7;

    /* Type scale for PC — Display (Samsung Sharp Sans Bold) */
    --sop-disp1: 80px; --sop-disp1-lh: 96px;   /* lh 1.2 */
    --sop-disp2: 60px; --sop-disp2-lh: 72px;
    --sop-disp3: 48px; --sop-disp3-lh: 58px;
    --sop-disp4: 38px; --sop-disp4-lh: 46px;
    --sop-disp5: 32px; --sop-disp5-lh: 39px;
    --sop-disp6: 24px; --sop-disp6-lh: 32px;   /* lh 1.33 */
    --sop-disp7: 22px; --sop-disp7-lh: 30px;
    --sop-disp8: 16px; --sop-disp8-lh: 22px;

    /* Type scale for PC — Title/Body (Samsung One Korean 700/400, lh 1.33) */
    --sop-title1: 28px; --sop-title1-lh: 38px;
    --sop-title2: 24px; --sop-title2-lh: 32px;
    --sop-title3: 22px; --sop-title3-lh: 30px;
    --sop-body1: 18px;  --sop-body1-lh: 24px;
    --sop-body2: 14px;  --sop-body2-lh: 19px;
    --sop-body3: 12px;  --sop-body3-lh: 16px;
}

/* Type scale for Mobile (가이드 Mobile 표) */
@media (max-width: 768px) {
    :root {
        --sop-disp1: 44px; --sop-disp1-lh: 53px;   /* lh 1.2 */
        --sop-disp2: 36px; --sop-disp2-lh: 44px;
        --sop-disp3: 30px; --sop-disp3-lh: 40px;   /* lh 1.33 */
        --sop-disp4: 26px; --sop-disp4-lh: 35px;
        --sop-disp5: 22px; --sop-disp5-lh: 30px;
        --sop-disp6: 16px; --sop-disp6-lh: 22px;
        --sop-disp7: 12px; --sop-disp7-lh: 16px;
        --sop-disp8: 12px; --sop-disp8-lh: 16px;

        --sop-title1: 22px; --sop-title1-lh: 30px;
        --sop-title2: 20px; --sop-title2-lh: 27px;
        --sop-title3: 18px; --sop-title3-lh: 24px;
        --sop-body1: 14px;  --sop-body1-lh: 19px;
        --sop-body2: 12px;  --sop-body2-lh: 16px;
        --sop-body3: 10px;  --sop-body3-lh: 14px;
    }
}

/* 유틸리티 클래스 */
.sop-kr   { font-family: var(--sop-font-kr); }
.sop-en   { font-family: var(--sop-font-en); font-weight: 700; }
.sop-t1   { font-family: var(--sop-font-kr); font-weight: 700; font-size: var(--sop-title1); line-height: var(--sop-title1-lh); }
.sop-t2   { font-family: var(--sop-font-kr); font-weight: 700; font-size: var(--sop-title2); line-height: var(--sop-title2-lh); }
.sop-t3   { font-family: var(--sop-font-kr); font-weight: 700; font-size: var(--sop-title3); line-height: var(--sop-title3-lh); }
.sop-b1   { font-family: var(--sop-font-kr); font-weight: 400; font-size: var(--sop-body1); line-height: var(--sop-body1-lh); }
.sop-b2   { font-family: var(--sop-font-kr); font-weight: 400; font-size: var(--sop-body2); line-height: var(--sop-body2-lh); }
.sop-b3   { font-family: var(--sop-font-kr); font-weight: 400; font-size: var(--sop-body3); line-height: var(--sop-body3-lh); }