@charset "utf-8";
/* ============================================================
   base.css — 리셋 · 디자인 토큰 · 기본 타이포
   전 페이지가 가장 먼저 읽는 파일. 여기에 컴포넌트를 넣지 않는다.
   ============================================================ */

/* ------------------------------------------------------------
   웹폰트 — Pretendard (100~900)
   선언은 9개지만 브라우저는 실제로 쓰는 굵기만 내려받는다.
   이 프로젝트가 쓰는 굵기: 300(구분선) · 400(본문) · 700(강조) · 800·900(제목)
   font-display:swap — 폰트를 받는 동안 대체 폰트로 먼저 보여준다(글자 안 사라짐).
   ------------------------------------------------------------ */
@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
}

/* 시안 폰트(나눔스퀘어=타이틀 / 나눔바른고딕=본문)를 쓰려면
   common/fonts/ 에 woff2 를 넣고 아래 주석을 풀면 된다.
   그러면 스택 앞자리라 Pretendard 보다 먼저 잡힌다.
   ------------------------------------------------------------
@font-face{font-family:"NanumSquare";font-weight:800 900;font-display:swap;
  src:url("../fonts/NanumSquareEB.woff2") format("woff2")}
@font-face{font-family:"NanumBarunGothic";font-weight:400;font-display:swap;
  src:url("../fonts/NanumBarunGothic.woff2") format("woff2")}
@font-face{font-family:"NanumBarunGothic";font-weight:700;font-display:swap;
  src:url("../fonts/NanumBarunGothicBold.woff2") format("woff2")}
------------------------------------------------------------ */

:root {
    /* 레이아웃 */
    --inner: 1200px;
    /* 본문 그리드 폭 — 시안이 1920 안에 1200 으로 잡혀 있다 */
    --header-h: 80px;
    /* 스크롤을 따라 위에 붙었을 때의 헤더 높이. 넓은 화면에서는 제자리와 같고,
       좁은 화면에서는 아래(1023 이하)에서 60px 로 줄인다 — 세로가 아쉬운 쪽에서
       80px 을 상시로 내주기는 아깝고, 붙었을 때 필요한 건 로고와 메뉴 단추뿐이다.
       위에 붙는 다른 것들(과정 상세의 탭 띠 · 구매 박스)이 이 값을 기준으로
       자기 자리를 잡으므로, 헤더 높이를 바꾸면 여기만 고치면 된다. */
    --header-fix-h: 80px;

    /* 색 — 시안에서 그대로 뽑은 값 */
    --ink: #222222;
    /* 제목 · 본문 강조 */
    --body: #757575;
    /* 본문 */
    --mute: #9E9E9E;
    /* 보조 정보 */
    --placeholder: #B0B0B0;
    --hair: #DDDDDD;
    /* 입력요소 · 칩 테두리 */
    --hair-hover: #BDBDBD;
    /* 위 테두리의 hover — 한 단계만 진하게 */
    --line: #E5E7E8;
    /* 패널 · 카드 구획선 */
    --line-soft: #F0F0F0;
    /* 패널 안쪽 행 구분선 */
    --line-card: #E2E3E4;
    /* 카드 안쪽 구분선 */
    --surf: #F5F6F7;
    /* 서피스(히어로 밴드 · 목록 영역) */
    --white: #FFFFFF;
    --acc: #4D64D4;
    /* 액센트 — 활성 탭 · 선택 칩 · 현재 페이지 */
    --acc-tint: rgba(77,100,212,.08);
    --price-old: #A9A9A9;
    /* 정가(할인 전) */
    --sale: #D61A4D;
    /* 할인율 — 1단계 배지(--step1 #E94874)와 색상·채도가 같고
     명도만 내렸다. 원색은 알약 바탕에서 3.29:1 이라 13px 글자로 못 쓴다.
     4.5:1 을 넘기는 선에서 가장 밝은 값이 이것이다 (알약 바탕 4.51:1) */
    --sale-tint: rgba(233,72,116,.10);
    --btn-line: #CCCCCC;
    /* 서브 버튼 테두리 */
    --btn-text: #B5B5B5;
    /* 서브 버튼 글자 */

    /* 단계 배지 4색 */
    --step1: #E94874;
    --step2: #F3AE20;
    --step3: #0BBF77;
    --step4: #476FCC;

    /* 기본 자간 — 본문·컴포넌트가 공유한다.
     제목(-.04em) · 단계배지(-.03em) · GNB(-.08em) 처럼 일부러 다르게 준 곳은 예외다. */
    --ls-base: -.06em;

    /* 라운드 */
    --r-card: 12px;
    --r-btn: 8px;

    /* 폰트 스택 */
    /* Roboto 가 맨 앞 — 한글 글리프가 없어서 영문·숫자만 Roboto 로 그려진다.
     그다음 Pretendard 는 한글도 갖고 있어서, 설치돼 있으면 본문 한글을 여기서 받는다.
     (즉 나눔바른고딕은 Pretendard 가 없을 때 쓰이는 대비책이 된다) */
    --font-body: "Roboto","Pretendard","NanumBarunGothic","나눔바른고딕","Malgun Gothic","맑은 고딕",sans-serif;
    /* 제목도 Pretendard 를 받침으로 둔다. 나눔스퀘어가 없으면 맑은고딕으로 떨어지는데
     맑은고딕엔 800·900 얼굴이 없어서 제목 굵기가 본문과 같아져 버린다. */
    --font-title: "NanumSquare","나눔스퀘어","Pretendard","Malgun Gothic","맑은 고딕",sans-serif;
    /* 헤더도 본문(나눔바른고딕)을 그대로 쓴다 — 별도 GNB 폰트 토큰은 두지 않는다 */
    --font-num: "Roboto","Helvetica Neue",Arial,sans-serif;
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}
/* address 는 브라우저 기본이 italic 이라 반드시 목록에 있어야 한다 (font:inherit 로 눕는다) */
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
em,
img,
strong,
i,
ol,
ul,
li,
form,
label,
legend,
table,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
address,
figure,
figcaption,
blockquote,
dl,
dt,
dd,
fieldset,
footer,
header,
main,
nav,
section {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}
article,
aside,
figure,
footer,
header,
main,
nav,
section {
    display: block;
}
ol,
ul {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
img {
    max-width: 100%;
    vertical-align: top;
}
button {
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
/* 폼 요소는 위 리셋 목록에 없어서 브라우저 기본 마진이 남는다.
   특히 체크박스/라디오는 크롬이 margin:3px 3px 3px 4px 를 준다 —
   flex 의 gap 위에 얹혀 간격이 어긋나므로 여기서 0 으로 눕힌다. */
input,
select,
textarea,
button {
    margin: 0;
    font-family: inherit;
}
a {
    color: inherit;
    text-decoration: none;
}
legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

html {
    -webkit-text-size-adjust: 100%;
    /* 모바일에서 링크·버튼을 누를 때 뜨는 기본 하늘색 사각형을 없앤다.
       모서리가 둥근 카드나 칩 위에서 네모로 씌워져 시안과 어긋나 보인다.
       webkit 계열(iOS Safari · Android Chrome)에만 있는 동작이고 상속되므로
       여기 한 번만 적으면 된다. */
    -webkit-tap-highlight-color: transparent;
}
body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: var(--ls-base);
    color: var(--body);
    background: var(--white);
    word-break: keep-all;
}

/* 움직임을 줄이도록 설정한 사용자에게는 모든 전환을 끈다 (OS 접근성 설정) */
@media (prefers-reduced-motion:reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ---------- 공통 유틸 ---------- */
/* 화면 폭에 따라 줄어드는 컨테이너.
   창이 1240 이상이면 안쪽 내용은 정확히 1200 — 시안 그대로다.
   (--inner 1200 + 좌우 여백 20 = 1240. 1200 에 딱 맞추면 글자가 화면 끝에 붙는다)
   box-sizing 은 base.css 위쪽에서 전역으로 border-box 라 padding 이 폭을 안 늘린다. */
.inner {
    width: 100%;
    max-width: calc(var(--inner) + 40px);
    margin: 0 auto;
    padding: 0 20px;
}
@media (max-width: 767px) {
    .inner {
        padding: 0 16px;
    }
}
/* 메뉴가 서랍으로 바뀌는 폭부터는 붙은 헤더를 얇게 쓴다 (위 --header-fix-h 참고) */
@media (max-width: 1023px) {
    :root {
        --header-fix-h: 60px;
    }
}
/* 1200 그리드 */
.num {
    font-family: var(--font-num);
    letter-spacing: -.025em;
}
.blind {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}