/* ============================================================
   CFM base.css — reset, tokens, typography
============================================================ */

/* --- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    /* height: 100% 제거 — body 가 스크롤 컨테이너가 되어 window.scrollY 가
       0 으로 고정되던 문제 해결 (2026-04-25). */
}
body {
    font-family: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo',
                 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--cfm-ink);
    background: var(--cfm-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;                /* 빈 페이지도 뷰포트 채우게 */
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;        /* 긴 영문 단어·URL 줄바꿈 */
    word-wrap: break-word;            /* legacy fallback */
    /* body 의 overflow-x 는 제거 — html 하나에서만 가로 스크롤 차단.
       body 에 overflow-x:hidden 있으면 body 가 스크롤 컨테이너가 되어
       네비 스크롤 감지(window scroll)가 깨짐. */
}
/* 모바일 가로 오버플로우: main 레벨에서 한 번 더 클립.
   clip 은 sticky 를 깨뜨리지 않음 (hidden 과 차이). */
main { overflow-x: clip; max-width: 100vw; }
@supports not (overflow-x: clip) {
    main { overflow-x: hidden; }
}
img, svg, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }

/* --- Design tokens ---------------------------------------- */
:root {
    /* Orange palette */
    --cfm-orange:        #F15A24;  /* primary */
    --cfm-orange-dark:   #D1481A;
    --cfm-orange-light:  #FF7A40;

    /* Neutrals */
    --cfm-ink:           #111216;
    --cfm-ink-2:         #2B2D33;
    --cfm-muted:         #6B6E76;
    --cfm-line:          #E7E8EC;
    --cfm-bg:            #FFFFFF;
    --cfm-bg-soft:       #F7F7F8;
    --cfm-bg-dark:       #0B0C0F;

    /* Layout */
    --nav-h:             92px;
    --container:         1320px;

    /* Motion */
    --ease:              cubic-bezier(.22,.61,.36,1);
    --dur:               .6s;

    /* Shadow */
    --shadow-md:         0 10px 30px rgba(0,0,0,.08);
    --shadow-lg:         0 20px 60px rgba(0,0,0,.14);
}

/* --- Typography ------------------------------------------- */
h1, h2, h3, h4 {
    font-weight: 700; line-height: 1.2; letter-spacing: -.02em;
    color: var(--cfm-ink);
    word-break: keep-all;         /* 한글 단어 중간 깨짐 방지 */
    overflow-wrap: break-word;
}
h1 { font-size: clamp(2.4rem, 5vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p  { color: var(--cfm-ink-2); }

.kicker {
    display: inline-block;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .22em;
    color: var(--cfm-orange);
    text-transform: uppercase;
}

/* --- Utility ---------------------------------------------- */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
}
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 28px;
    font-weight: 600; font-size: .95rem;
    border-radius: 999px;
    transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
    border: 1px solid transparent;
}
.btn--primary { background: var(--cfm-orange); color: #fff; }
.btn--primary:hover { background: var(--cfm-orange-dark); transform: translateY(-2px); }
.btn--ghost-light { border-color: rgba(255,255,255,.7); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--cfm-ink); }
.btn--ghost-dark { border-color: var(--cfm-ink); color: var(--cfm-ink); }
.btn--ghost-dark:hover { background: var(--cfm-ink); color: #fff; }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.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;
}