@charset "UTF-8";

/* ======================================================
   CMS곳간 Common Style (Reset + Design System)
   Figma "02컴포넌트" 실측값 기준
   ====================================================== */

/* Pretendard 폰트 임포트 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
    /* -----------------------------------------------
       Color Palette — Figma 02컴포넌트 실제값
       gray/900~50, BK(검정), WT(흰색)
    ----------------------------------------------- */
    --cms-bk:          #000000;   /* BK  */
    --cms-wt:          #FFFFFF;   /* WT  */
    --cms-gray-900:    #121212;   /* 900 */
    --cms-gray-800:    #1F1F1F;   /* 800 */
    --cms-gray-700:    #2D2D2D;   /* 700 */
    --cms-gray-500:    #656565;   /* 500 */
    --cms-gray-400:    #A6A6A6;   /* 400 */
    --cms-gray-300:    #CECECE;   /* 300 */
    --cms-gray-200:    #E4E4E4;   /* 200 */
    --cms-gray-100:    #F2F2F2;   /* 100 */
    --cms-gray-50:     #FAFAFA;   /* 50  */

    /* Point Color — Figma "point: #0051FF" */
    --cms-primary:       #0051FF;
    --cms-primary-light: #F2F6FF; /* 포인트 연 배경 */
    --cms-primary-hover: #0040CC;

    /* -----------------------------------------------
       Typography — Figma 02컴포넌트 폰트 스펙
       T: Title,  B: Body
       숫자: 스케일,  _b/sb/m/r: weight
    ----------------------------------------------- */
    /* Title 계열 */
    --cms-fs-t5: 44px;  /* T5 */
    --cms-fs-t4: 32px;  /* T4 */
    --cms-fs-t3: 28px;  /* T3 — 추정 */
    --cms-fs-t2: 24px;  /* T2 */
    --cms-fs-t1: 20px;  /* T1 */

    /* Body 계열 */
    --cms-fs-b5: 18px;  /* B5 */
    --cms-fs-b4: 14px;  /* B4 */
    --cms-fs-b3: 13px;  /* B3 */
    --cms-fs-b2: 12px;  /* B2 */
    --cms-fs-b1: 11px;  /* B1 */

    /* 자주 쓰는 별칭 */
    --cms-fs-base:  14px;   /* B4 — 기본 본문 */
    --cms-fs-label: 13px;   /* B3 — 레이블, 보조 */
    --cms-fs-small: 11px;   /* B1 — 캡션 */

    /* Line-height */
    --cms-lh-t4: 44px;
    --cms-lh-t1: 30px;
    --cms-lh-b5: 26px;
    --cms-lh-b4: 22px;
    --cms-lh-b3: 20px;
    --cms-lh-b2: 18px;
    --cms-lh-b1: 16px;

    /* Letter-spacing (Figma 값: tracking -2% → px 환산) */
    --cms-ls-t4: -0.64px;
    --cms-ls-b5: -0.32px;
    --cms-ls-b4: -0.28px;
    --cms-ls-b3: -0.26px;
    --cms-ls-b1: -0.22px;

    /* -----------------------------------------------
       Border Radius
    ----------------------------------------------- */
    --cms-radius-xl:  20px;   /* 카드, 모달 큰 것 */
    --cms-radius-lg:  16px;   /* 카드 */
    --cms-radius-md:  12px;   /* 중간 박스 */
    --cms-radius-sm:   8px;   /* 인풋, 버튼 */
    --cms-radius-xs:   6px;   /* 소형 버튼, 배지 */
    --cms-radius-tag:  4px;   /* 체크박스, 태그 */

    /* -----------------------------------------------
       Spacing
    ----------------------------------------------- */
    --cms-gap-xl:  32px;
    --cms-gap-lg:  24px;
    --cms-gap-md:  16px;
    --cms-gap-sm:  12px;
    --cms-gap-xs:   8px;
    --cms-gap-xxs:  4px;
}

/* -----------------------------------------------
   1. CSS Reset
----------------------------------------------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body {
    height: 100%;
    width: 100%;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    font-size: var(--cms-fs-base);
    color: var(--cms-gray-900);
    line-height: var(--cms-lh-b4);
    background-color: var(--cms-wt);
}

ul, ol, li   { list-style: none; }
a            { text-decoration: none; color: inherit; transition: color .2s, opacity .2s; }
img          { max-width: 100%; height: auto; }
button       { background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; }
table        { border-collapse: collapse; border-spacing: 0; }
fieldset     { border: none; }

/* -----------------------------------------------
   2. 공통 폼 요소
----------------------------------------------- */
input, select, textarea {
    font-family: inherit;
    font-size: var(--cms-fs-base);
    color: var(--cms-gray-900);
    letter-spacing: var(--cms-ls-b4);
    background-color: var(--cms-gray-50);
    border: 1px solid transparent;
    border-radius: var(--cms-radius-sm);
    padding: 7px 16px;
    height: auto;
    width: 100%;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

textarea { height: auto; resize: vertical; min-height: 80px; }

input:focus, select:focus, textarea:focus {
    border-color: var(--cms-primary);
    box-shadow: 0 0 0 3px rgba(0, 81, 255, .12);
    background-color: var(--cms-wt);
}

::placeholder { color: var(--cms-gray-400); }

/* -----------------------------------------------
   3. 공통 버튼
----------------------------------------------- */
/* Base */
.cms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .2s, background-color .15s, border-color .15s;
}

.cms-btn:hover { opacity: .82; }

/* 크기 */
.cms-btn--lg {
    font-size: var(--cms-fs-b5);
    letter-spacing: var(--cms-ls-b5);
    line-height: var(--cms-lh-b5);
    padding: 8px 20px;
    border-radius: var(--cms-radius-sm);
    min-width: 120px;
}

.cms-btn--md {
    font-size: var(--cms-fs-base);
    letter-spacing: var(--cms-ls-b4);
    line-height: var(--cms-lh-b4);
    padding: 7px 16px;
    height: 36px;
    border-radius: var(--cms-radius-xs);
}

.cms-btn--sm {
    font-size: var(--cms-fs-label);
    letter-spacing: var(--cms-ls-b3);
    line-height: var(--cms-lh-b3);
    padding: 4px 12px;
    height: 30px;
    border-radius: var(--cms-radius-xs);
}

/* 스타일 */
.cms-btn-solid  { background: var(--cms-gray-800); color: var(--cms-wt); }
.cms-btn-solid:hover { background: var(--cms-gray-900); opacity: 1; }

.cms-btn-outline {
    background: var(--cms-wt);
    border: 1px solid var(--cms-gray-300);
    color: var(--cms-gray-800);
}
.cms-btn-outline:hover { background: var(--cms-gray-50); opacity: 1; }

.cms-btn-primary { background: var(--cms-primary); color: var(--cms-wt); }
.cms-btn-primary:hover { background: var(--cms-primary-hover); opacity: 1; }

/* -----------------------------------------------
   4. 공통 유틸리티
----------------------------------------------- */
/* 컨테이너 */
.cms-container {
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
    padding: 0 200px;
}

/* 타이포그래피 헬퍼 */
.cms-t4-b  { font-size: var(--cms-fs-t4); font-weight: 700; line-height: var(--cms-lh-t4); letter-spacing: var(--cms-ls-t4); }
.cms-t4-sb { font-size: var(--cms-fs-t4); font-weight: 600; line-height: var(--cms-lh-t4); letter-spacing: var(--cms-ls-t4); }
.cms-b5-sb { font-size: var(--cms-fs-b5); font-weight: 600; line-height: var(--cms-lh-b5); letter-spacing: var(--cms-ls-b5); }
.cms-b5-m  { font-size: var(--cms-fs-b5); font-weight: 500; line-height: var(--cms-lh-b5); letter-spacing: var(--cms-ls-b5); }
.cms-b4-sb { font-size: var(--cms-fs-base); font-weight: 600; line-height: var(--cms-lh-b4); letter-spacing: var(--cms-ls-b4); }
.cms-b4-m  { font-size: var(--cms-fs-base); font-weight: 500; line-height: var(--cms-lh-b4); letter-spacing: var(--cms-ls-b4); }
.cms-b4-r  { font-size: var(--cms-fs-base); font-weight: 400; line-height: var(--cms-lh-b4); letter-spacing: var(--cms-ls-b4); }
.cms-b3-m  { font-size: var(--cms-fs-label); font-weight: 500; line-height: var(--cms-lh-b3); letter-spacing: var(--cms-ls-b3); }
.cms-b3-r  { font-size: var(--cms-fs-label); font-weight: 400; line-height: var(--cms-lh-b3); letter-spacing: var(--cms-ls-b3); }
.cms-b1-r  { font-size: var(--cms-fs-small); font-weight: 400; line-height: var(--cms-lh-b1); letter-spacing: var(--cms-ls-b1); }

/* 색상 헬퍼 */
.cms-text-primary { color: var(--cms-primary); }
.cms-text-muted   { color: var(--cms-gray-400); }
.cms-text-sub     { color: var(--cms-gray-500); }
.cms-bg-light     { background: var(--cms-gray-50); }
.cms-bg-point     { background: var(--cms-primary-light); }