@charset "UTF-8";
/* 단아로 공통 — 리셋 · 토큰 · 레이아웃 · 버튼
   시안 기준 폭 1920px, 좌우 여백 120px → 콘텐츠 1680px (= 87.5%).
   .inner 를 87.5% 로 두면 1920 에서 시안과 정확히 일치하고,
   더 좁은 화면에서는 같은 비율로 함께 줄어든다. */

/* ---------- 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: #fff;
    color: var(--ink);
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, dl, dd { margin: 0; }
img { display: block; max-width: 100%; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ---------- 토큰 ---------- */
:root {
    /* color */
    --ink:        #111;   /* 본문 제목 */
    --ink-2:      #222;   /* 섹션 제목(밝은 배경) */
    --body:       #444;   /* 본문 */
    --muted:      #777;   /* 영문 라벨 */
    --muted-2:    #979797;
    --navy-deep:  #00041e; /* 이모탈 섹션 배경 */
    --navy-btn:   #162131; /* 구매하기 버튼 */
    --navy-step:  #355076; /* 루틴 스텝 */
    --btn-light:  #f5f5f7;
    --white:      #fff;

    /* layout */
    --gutter: 87.5%;      /* 1680 / 1920 */
    --content: 1680px;
}

/* ---------- 레이아웃 ---------- */
.inner {
    position: relative;
    width: var(--gutter);
    max-width: var(--content);
    margin: 0 auto;
}

/* 전면 배경 섹션 — 높이는 시안 그대로 고정하고 배경만 cover 로 채운다 */
.section { position: relative; overflow: hidden; }
.section-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- 섹션 헤더(영문 라벨 + 제목) ---------- */
.eyebrow {
    font-size: 16px;
    line-height: 1.6;
    color: var(--muted);
}
.section-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--ink);
}

/* ---------- 버튼 ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 140px;
    height: 44px;
    border: 0;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    transition: gap .2s ease, background-color .2s ease;
}
.btn--light { background: var(--btn-light); color: var(--ink-2); }
.btn--navy  { background: var(--navy-btn);  color: var(--white); }

/* 화살표는 평소 숨겨두고 hover 에서만 펼친다 (btn / btn_hover 두 상태) */
.btn-arrow {
    width: 20px;
    height: 20px;
    margin-right: -20px;
    opacity: 0;
    transition: opacity .2s ease, margin-right .2s ease;
}
.btn:hover .btn-arrow { opacity: 1; margin-right: 0; }

/* icon_arrow.svg 는 #222 짜리 어두운 화살표라 밝은 버튼(.btn--light)에 맞다.
   네이비 버튼 위에서는 안 보이니 흰색으로 뒤집는다 — 흰 화살표 파일을 따로
   만들어 CDN 에 올리지 않으려는 것이다(GNB 로고를 invert 로 쓰는 것과 같다).
   brightness(0) 로 일단 검게 만든 뒤 invert(1) 이라, 원본 색이 뭐든 순백이 된다. */
.btn--navy .btn-arrow { filter: brightness(0) invert(1); }

/* ============================================================
   모바일 (≤768) — 시안 390 폭, 좌우 여백 20
   ============================================================ */
@media (max-width: 768px) {
    .inner { width: 100%; max-width: none; padding: 0 20px; }

    /* 한글이 단어 중간에서 끊기지 않게 — 좁은 화면에서 줄바꿈이 지저분해진다 */
    body { word-break: keep-all; }

    /* 섹션 제목 크기 — 시안 32px */
    .section-title { font-size: 32px; line-height: 1.5; }
}

/* 모바일에서만 줄을 나눈다.
   ⚠️ 감추는 쪽을 PC 미디어쿼리에 넣는다 — <br> 에 display 를 다시 주면
   (inline 이든 block 이든) 줄이 나뉘지 않는다. 모바일에서는 손대지 않는 게 답. */
@media (min-width: 769px) {
    .br-mo { display: none; }
}

/* 반대로 PC 에서만 줄을 나눈다. 감추는 쪽을 모바일 미디어쿼리에 넣는 것도 같은 이유다. */
@media (max-width: 768px) {
    .br-pc { display: none; }
}

/* <picture> 로 감싼 전면 이미지도 같은 규칙으로 채운다 */
picture.section-bg { display: block; }
.section-bg img { width: 100%; height: 100%; object-fit: cover; }