/* ==========================================================================
   디자인 토큰 · 브레이크포인트 — 리디자인 공통 기반

   결제 선택 화면(MyPage/PaymentCheckout.css)과 로그인(Account/Auth.css)에서
   확정된 디자인 언어를 전역 토큰으로 끌어올린 것이다. 새로 만든 값이 아니라
   이미 검토를 거친 값을 한 곳에 모은 것이므로, 이후 페이지는 이 파일만 참조한다.

   이 파일은 값만 선언한다. 실제로 무언가를 그리지 않으므로 단독으로 로드해도
   기존 화면에 영향이 없다.

   로드 순서: bundle.css -> css.css -> tokens.css -> responsive-base.css -> 페이지별 CSS
   ========================================================================== */

:root {
    /* ---- 색 ---- */
    --mc-ink: #0b1220;          /* 제목 */
    --mc-body: #4a5468;         /* 본문 */
    --mc-muted: #7c87a0;        /* 보조 설명 */
    --mc-blue: #2b5bff;         /* 주 강조 */
    --mc-violet: #7c3aed;       /* 보조 강조 (그라데이션 끝) */
    --mc-green: #00c73c;        /* 성공 */
    --mc-red: #e5484d;          /* 경고 · 파괴적 동작 */
    --mc-border: #e7ebf5;
    --mc-tint: #f4f7fe;         /* 옅은 배경 */
    --mc-surface: #fff;
    --mc-grad: linear-gradient(96deg, var(--mc-blue) 8%, var(--mc-violet) 92%);

    /* 주 행동(CTA) — 기능 화면 전용.
       검수 결과 마이페이지·결제·쿠폰·가입·로그인의 주 버튼이 파랑→보라
       그라디언트, 같은 성격의 '결제하기' 가 페이지마다 다른 색이었다.
       기능 화면에서는 누르는 것을 잉크 하나로 모은다.

       콘텐츠 랜딩(광고솔루션 소개·기능·요금, 광고대행 /Ads/*)에는 쓰지 않는다 —
       각 콘텐츠가 제 디자인을 갖고 있고, --mc-grad 는 그쪽에서 계속 쓰인다.
       장식용 그라디언트(원형 아이콘 배지, 박스 장식)도 건드리지 않는다. */
    --mc-cta: #111;
    --mc-cta-hover: #000;

    /* ---- 모서리 ----
       제품 랜딩이 각자 정해 쓰던 값(8·10·11·12·14·16·20·28)을 다섯 단으로 모은 것이다.
       실측에서 가장 많이 쓰이던 값을 단으로 삼았으므로 대부분은 값이 그대로 남는다.
       pill 은 999px · 9999px 두 표기가 섞여 있던 것을 하나로 정한 것이다.
       원(50%)은 스케일에 넣지 않는다 — 상자 크기가 정하는 값이다. */
    --mc-radius-xs: 6px;
    --mc-radius-sm: 10px;
    --mc-radius: 16px;
    --mc-radius-lg: 20px;
    --mc-radius-xl: 28px;
    --mc-radius-pill: 999px;

    /* ---- 그림자 ----
       역할은 네 개다. 경계선 대용(xs) · 카드(card) · 떠오른 카드(sm) · 모달(기본).
       card 는 새로 만든 값이 아니라 실측에서 가장 많이 쓰이던 값
       (지마켓 광고관리의 --gma-shadow-soft, 14개 화면)을 끌어올린 것이다.
       제품 강조색이 들어간 발광 그림자(--ab-shadow-lift 등)는 그 제품의
       아이덴티티라 여기 모으지 않는다. */
    --mc-shadow-xs: 0 1px 2px rgba(11, 18, 32, .05);
    --mc-shadow-card: 0 8px 24px -8px rgba(25, 31, 40, .08);
    --mc-shadow-sm: 0 8px 24px -12px rgba(11, 18, 32, .18);
    --mc-shadow: 0 24px 60px -28px rgba(11, 18, 32, .22);

    /* 포커스 링. 키보드로 옮겨 다닐 때 지금 어디에 있는지 보이게 하는 것이라
       면을 띄우는 그림자와 역할이 다르다. */
    --mc-ring: 0 0 0 3px rgba(43, 91, 255, .18);

    /* ---- 간격 ---- 4px 배수 */
    --mc-gap-xs: 4px;
    --mc-gap-sm: 8px;
    --mc-gap: 16px;
    --mc-gap-lg: 24px;
    --mc-gap-xl: 40px;

    /* ---- 타이포 ---- */
    --mc-font: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui,
               'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    --mc-tracking: -.02em;

    /* 글자 크기는 변수로 두지 않는다. px 값 자체가 뜻이라
       var(--mc-text-sm) 보다 14px 가 바로 읽힌다. 아래 브레이크포인트처럼
       표로만 정해 둔다. — 스케일은 파일 끝 주석 참조 */

    /* ---- 레이아웃 ---- */
    /* 2026-09-11 1080 → 1200. 데스크톱 본문이 좁다는 판단.
       레거시(1080) · 자동입찰/지마켓(1132) · 순위추적(1072) 로 네 값이
       흩어져 있던 것을 이 한 값으로 모은다. 1280 노트북에서도 좌우 40px 이 남는다. */
    --mc-content: 1200px;

    /* 페이지 거터. 폭이 바뀌어도 같은 값을 쓴다.
       화면마다 20/16/14 로 달랐더니 페이지를 넘나들 때 텍스트 시작 위치가
       계속 움직였다(실측 14/24/27/28/44). 기준선은 하나여야 한다. */
    --mc-pad: 16px;

    /* 카드·섹션 안쪽 패딩. 거터와 같은 값으로 두어 카드 안 텍스트가
       항상 거터 + 16 = 32 에 오게 한다. */
    --mc-pad-in: 16px;

    /* ---- 세로 리듬 ---- 섹션 사이 / 카드 사이 */
    --mc-rhythm: 24px;
    --mc-rhythm-sm: 12px;

    /* ---- 헤더가 덮는 높이 ----
       헤더는 position:sticky; top:0; z-index:2000 이라 스크롤 중 화면 상단을
       계속 덮는다. 그 아래에 붙어야 하는 sticky 요소는 이 값을 기준으로 삼는다.
       실측값이다 — 높이를 정하는 규칙이 CSS 에 없고 내용이 정한다.
         1025 이상  .header_bar 37 + .header_wrap 70 + 경계선 1 = 108
         1024 이하  .header_wrap 44 + 1 = 45  (유틸 바는 햄버거 안으로 들어간다)
       헤더 구성이 바뀌면 이 값도 같이 봐야 한다.

       113 -> 108 : 유틸 메뉴에서 회색 통띠를 걷으면서(css/common/header-bar.css)
       .header_bar 가 42 -> 37 로 줄었는데 이 값을 같이 내리지 않았다.
       그래서 이 값을 기준으로 붙는 것들이 전부 헤더 아래 5px 떠 있었다
       (실측 1440: 헤더 0~108, 탭 top 113 — 그 틈으로 본문이 지나갔다). */
    --mc-header-h: 108px;
}

@media (max-width: 1024px) {
    :root {
        --mc-header-h: 45px;
    }
}

@media (max-width: 768px) {
    :root {
        --mc-gap-xl: 28px;
    }
}

@media (max-width: 480px) {
    :root {
        /* 폰에서는 카드가 화면폭을 거의 다 쓰므로 모서리를 한 단 줄인다.
           lg · xl 은 그대로 둔다 — 그 값을 쓰는 곳(지마켓 히어로 카드 등)은
           폰에서도 크게 남아 있어 같이 줄이면 형태가 무너진다. */
        --mc-radius: 12px;
    }
}

/* ==========================================================================
   브레이크포인트 — 페이지별 CSS 에서 아래 네 개만 쓴다.
   CSS 변수는 미디어쿼리 조건에 쓸 수 없어 값으로 직접 적어야 하므로,
   임의의 폭을 새로 만들지 말고 이 표를 따른다.

     1280px 이하   와이드 -> 기본. 사이드 여백 축소
     1024px 이하   태블릿 가로. 3단 -> 2단
      768px 이하   태블릿 세로 · 큰 폰. 2단 -> 1단, 표는 가로 스크롤
      480px 이하   폰. 버튼 전체폭, 폰트 한 단계 축소

   예)
     @media (max-width: 768px) { ... }
   ========================================================================== */

/* ==========================================================================
   글자 크기 — 본문·UI 는 아래 아홉 단만 쓴다.

     10px   배지 · 단위 · 각주
     12px   보조 설명 · 표 머리
     14px   본문 작은 것 · 버튼 · 표 값
     16px   본문
     18px   본문 큰 것 · 카드 제목
     20px   절 제목 작은 것
     24px   절 제목
     28px   섹션 제목
     32px   화면 제목

   32px 초과는 화면마다 다른 히어로 제목이라 이 표에 없다.
   그 자리는 그 화면의 연출이므로 페이지별 CSS 가 정한다.

   2026-09-15 — 이 표를 세우면서 리뉴얼 CSS 의 23갈래를 9단으로 모았다.
   (9·11·12.5·13·13.5·14.5·15·15.5·17·19·21·22·23·25·26·27·29·30 등 519선언)
   레거시 번들(Content/css)은 아직 그대로다 — 2,128선언.
   ========================================================================== */