@charset "UTF-8";
/* 브랜드 페이지 — 시안 기준 1920 폭 (main.css 와 같은 규칙).
   세로(top)는 시안 px 그대로, 가로는 % 로 환산한다.
     262 → 13.6458%   1114 → 58.0208%   1020 → 53.125%   830 → 43.2292%
   메인과 달리 좌우 여백이 262 다 (콘텐츠 1396). */

/* ============================================================
   1. 인트로
   ============================================================ */
.brand-intro { height: 758px; background: #fff; }

.brand-headline {
    position: absolute;
    top: 200px;
    left: 13.8021%;         /* 265 / 1920 */
    width: 40.625%;         /* 780 / 1920 */
    font-size: 40px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--ink);
}

/* 緞 雅 露 — 글자마다 아래에 뜻풀이가 붙는다 */
.brand-hanja {
    position: absolute;
    top: 448px;
    left: 58.0208%;         /* 1114 / 1920 */
    width: 32.4479%;        /* 623 / 1920 */
    height: 210px;
}

.brand-hanja-glyph {
    position: absolute;
    top: 0;
    width: 73px;
    height: auto;
}
.brand-hanja-glyph--1 { left: 2px; }     /* 1116 - 1114 */
.brand-hanja-glyph--2 { left: 157px; }   /* 1271 - 1114 */
.brand-hanja-glyph--3 { left: 314px; }   /* 1428 - 1114 */

.brand-hanja-label {
    position: absolute;
    top: 90px;              /* 538 - 448 */
    width: 80px;
    margin-left: -40px;     /* 글자 중심에 맞춰 가운데 정렬 */
    text-align: center;
    font-size: 16px;
    line-height: 1.8;
    color: var(--body);
}
.brand-hanja-label--1 { left: 39px; }    /* 글자 중심 1152.6 - 1114 */
.brand-hanja-label--2 { left: 194px; }   /* 1308 - 1114 */
.brand-hanja-label--3 { left: 351px; }   /* 1464.5 - 1114 */

.brand-hanja-desc {
    position: absolute;
    top: 152px;             /* 600 - 448 */
    left: 0;
    width: 100%;
    font-size: 16px;
    line-height: 1.8;
    color: var(--body);
}

/* ============================================================
   2. 비주얼 밴드 — 스크롤에 맞춰 양옆으로 열림
   ------------------------------------------------------------
   .brand-visual-pin 이 스크롤 트랙(200vh)이고 그 안의 sticky 가 화면에 붙는다.
   밴드는 645 로 낮아서 화면 세로 가운데에 놓고 그 자리에서 연다.
   이미지는 처음부터 전체 폭에 놓여 있고 clip-path 만 벌어진다 — 이미지는
   한 픽셀도 움직이지 않는다.
     시작 inset  (1920 - 544) / 2 / 1920 = 35.8333%
   ============================================================ */
.brand-visual-pin { position: relative; height: 200vh; }

.brand-visual-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 645px;
    display: flex;
    align-items: center;
    background: #fff;
}

.brand-visual { width: 100%; height: 645px; }

.brand-visual-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: clip-path;
}
/* 닫힌 상태(가운데 544px)는 JS 가 걸어 준다.
   JS 가 안 돌거나 모션을 줄이는 설정이면 처음부터 다 열린 채로 남는다. */

/* ============================================================
   3. 브랜드 스토리 / EMortal
   ============================================================ */
.brand-story { height: 1076px; background: #fff; }

.brand-story-eyebrow,
.brand-story-title,
.brand-story-text,
.brand-story-img { position: absolute; left: 13.6458%; }   /* 262 / 1920 */

/* 사진은 <picture> 라 바깥이 자리를 잡고 안쪽 <img> 가 그 안을 채운다
   (모바일에서 다른 크롭을 쓰려고 <source> 를 달았다) */
.brand-story-img,
.brand-delivery-img,
.brand-balance-chart { display: block; }
.brand-story-img img,
.brand-delivery-img img { width: 100%; height: 100%; object-fit: cover; }
.brand-balance-chart img { width: 100%; height: auto; }

.brand-story-eyebrow { top: 100px; }
.brand-story-title   { top: 138px; font-size: 40px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.brand-story-text    { top: 222px; font-size: 16px; line-height: 1.8; color: var(--body); }
.brand-story-text--2 { top: 298px; }
.brand-story-text b  { font-weight: 700; color: var(--ink); }

/* 원료 표시 주석 — 심의 문구라 본문보다 작고 흐리게 */
.brand-story-note,
.brand-emortal-note,
.brand-balance-note,
.brand-balance-foot { font-size: 14px; line-height: 1.8; color: #999; }

.brand-story-note { position: absolute; left: 13.6458%; top: 366px; }

.brand-story-img {
    top: 596px;             /* 1999 - 1403 */
    width: 35.5729%;        /* 683 / 1920 */
    height: 400px;
}

.brand-emortal-eyebrow,
.brand-emortal-title,
.brand-emortal-text,
.brand-emortal-note { position: absolute; left: 58.0208%; }  /* 1114 / 1920 */

.brand-emortal-eyebrow { top: 661px; }
.brand-emortal-title   { top: 699px; font-size: 40px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.brand-emortal-text    { top: 783px; font-size: 16px; line-height: 1.8; color: var(--body); }
.brand-emortal-note    { top: 880px; }
.brand-emortal-note--2 { top: 907px; width: 25.5729%; }   /* 491 / 1920 */

/* ============================================================
   4. Key Ingredients — 좌우 화살표 캐러셀
   ------------------------------------------------------------
   카드 줄은 콘텐츠 폭(1396)보다 넓어서 오른쪽으로 흘러나간다.
   화살표로 한 칸(카드 402 + 간격 24 = 426)씩 밀어 본다.
   ============================================================ */
.brand-ingredients { height: 717px; background: #fff; }

.brand-ing-head {
    position: absolute;
    top: 0;
    left: 13.6458%;
    width: 72.7083%;        /* 1396 / 1920 */
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand-ing-title { font-size: 30px; font-weight: 700; line-height: 1.6; color: var(--ink); }

.brand-ing-nav { display: flex; gap: 12px; }
.brand-ing-btn {
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: opacity .2s ease;
}
.brand-ing-btn:hover { opacity: .6; }
.brand-ing-btn:disabled { opacity: .25; cursor: default; }
.brand-ing-btn img { width: 52px; height: 52px; }

.brand-ing-track {
    position: absolute;
    top: 112px;             /* 2591 - 2479 — 원이 카드 위로 걸쳐 나온 만큼 위에서 시작한다 */
    left: 13.6458%;
    right: 0;               /* 오른쪽으로 흘러나가는 것이 시안이다 */
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.brand-ing-track::-webkit-scrollbar { display: none; }

.brand-ing-list { display: flex; gap: 24px; }

/* 성분 사진(원)이 카드 위로 걸쳐 나온다 — 카드는 원 아래에서 시작한다 */
.brand-ing-card {
    position: relative;
    flex: 0 0 402px;
    padding-top: 95px;      /* 원 140 중 카드 위로 나온 부분 */
}

/* ⚠️ 피그마에서 내보낸 원은 모서리가 흰색으로 채워져 나온다(알파 255).
   그대로 얹으면 카드 회색 위에 흰 네모가 비친다 — CSS 로 둥글게 자른다.
   그래서 파일도 투명이 필요 없는 JPG 로 둔다(장당 96KB → 20KB). */
.brand-ing-thumb {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    transform: translateX(-50%);
}

.brand-ing-body {
    position: relative;
    height: 270px;
    background: #f7f6f7;
    text-align: center;
}

.brand-ing-name,
.brand-ing-desc,
.brand-ing-tag { position: absolute; left: 0; width: 100%; }
.brand-ing-name { top: 75px;  font-size: 24px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.brand-ing-desc { top: 125px; font-size: 16px; line-height: 1.8; color: var(--body); }
.brand-ing-tag  { top: 195px; font-size: 16px; font-weight: 600; line-height: 1.8; color: var(--body); }

/* ============================================================
   5. 5 Balance System
   ============================================================ */
.brand-balance { height: 1047px; background: #fff; }

.brand-balance-eyebrow,
.brand-balance-title,
.brand-balance-chart { position: absolute; left: 13.6458%; }

.brand-balance-eyebrow { top: 0; }
.brand-balance-title   { top: 38px; font-size: 40px; font-weight: 700; line-height: 1.6; color: var(--ink); }

.brand-balance-chart {
    top: 142px;             /* 3338 - 3196 */
    width: 26.0417%;        /* 500 / 1920 */
    height: auto;
}

.brand-balance-list {
    position: absolute;
    top: 142px;
    left: 43.2292%;         /* 830 / 1920 */
    width: 43.125%;         /* 828 / 1920 */
    display: flex;
    flex-direction: column;
    gap: 11px;
}

/* 시안: 행 내용 101, 구분선 y129, 다음 행 +141.
   ⚠️ box-sizing:border-box 라 height 에 padding 이 포함된다 —
   내용 101 을 남기려면 130(=101+28+선1) 로 잡아야 한다. */
.brand-balance-row {
    position: relative;
    height: 130px;
    padding-bottom: 29px;
    border-bottom: 1px solid #ddd;
}

/* 05 밸런스 행 안의 상표 주석 */
.brand-balance-note { position: absolute; top: 64px; left: 284px; }

/* 목록 아래 전체 주석 — 오른쪽 끝에 붙는다 */
.brand-balance-foot {
    position: absolute;
    top: 846px;             /* 4042 - 3196 */
    left: 13.6458%;
    width: 72.7083%;
    text-align: right;
}

.brand-balance-no,
.brand-balance-name {
    position: absolute;
    top: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--ink);
    white-space: nowrap;
}
.brand-balance-no   { left: 0; }
.brand-balance-name { left: 74px; }

.brand-balance-desc,
.brand-balance-ing {
    position: absolute;
    left: 284px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--body);
}
.brand-balance-desc { top: 0; }
.brand-balance-ing  { top: 31px; }
.brand-balance-ing b { margin-right: 4px; font-weight: 700; }   /* 시안의 라벨-값 간격 */

/* ============================================================
   6. 전달 기술
   ============================================================ */
.brand-delivery { height: 720px; background: #fff; }

.brand-delivery-img {
    position: absolute;
    top: 0;                 /* 4117 */
    left: 50.78125%;        /* 975 / 1920 */
    width: 35.5729%;        /* 683 / 1920 */
    height: 400px;
}

.brand-delivery-eyebrow,
.brand-delivery-title,
.brand-delivery-text { position: absolute; left: 13.6458%; }

.brand-delivery-eyebrow { top: 0; }
.brand-delivery-title   { top: 38px; font-size: 40px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.brand-delivery-text    { top: 122px; font-size: 16px; line-height: 1.8; color: var(--body); }

/* ============================================================
   7. 클로징
   ============================================================ */
.brand-closing { height: 475px; background: #fff; }

.brand-closing-text {
    position: absolute;
    top: 0;                 /* 4677 */
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 24px;
    line-height: 1.6;
    color: var(--ink);
}

.brand-closing-mark {
    position: absolute;
    top: 88.55px;           /* 4925.55 - 4837 */
    left: 38.6557%;         /* 742.19 / 1920 */
    width: 22.6614%;        /* 435.10 / 1920 */
    height: auto;
}

/* ============================================================
   모바일 (≤768) — 시안 228:4384 기준 390 폭, 좌우 여백 20
   ------------------------------------------------------------
   PC 와 마크업이 같고 좌표만 갈아끼운다. 세로는 시안 px 그대로.
   블록 높이: 인트로 581 · 비주얼밴드 320 · 스토리/EMortal 1052 ·
   Key Ingredients 322 · 5 Balance(내용 따라) · 전달기술 685 ·
   클로징 244 · 푸터 760
   ============================================================ */
@media (max-width: 768px) {

    /* ---------- 1. 인트로 ---------- */
    .brand-intro { height: 581px; }

    .brand-headline {
        top: 100px;
        left: 20px;
        width: 292px;
        font-size: 32px;
        line-height: 1.5;
    }

    /* 緞 雅 露 — 글자 51, 글자 사이 33.
       ⚠️ 시안은 이 덩어리를 x=114 에 두는데(설명글은 112~361), 그러면
       왼쪽에 112px 짜리 빈 칸이 생겨 화면이 오른쪽으로 쏠려 보이고
       390 보다 좁은 폰(360·375)에서는 설명글 오른쪽이 잘린다.
       그래서 좌표를 박지 않고 화면 가운데에 놓는다. */
    .brand-hanja {
        top: 304px;
        left: 50%;
        transform: translateX(-50%);
        width: 219px;
        height: auto;
    }
    .brand-hanja-glyph { width: 51px; }
    .brand-hanja-glyph--1 { left: 0; }
    .brand-hanja-glyph--2 { left: 84px; }
    .brand-hanja-glyph--3 { left: 168px; }

    .brand-hanja-label { top: 67px; }        /* 371 - 304 */
    .brand-hanja-label--1 { left: 26px; }    /* 글자 중심 */
    .brand-hanja-label--2 { left: 110px; }
    .brand-hanja-label--3 { left: 194px; }

    .brand-hanja-desc {
        top: 120px;             /* 424 - 304 */
        left: 50%;
        transform: translateX(-50%);
        width: 249px;
        max-width: calc(100vw - 40px);   /* 좁은 폰에서는 잘리지 말고 흐르게 */
    }
    .brand-hanja-desc br { display: none; }  /* 좁은 폭에 맞게 다시 흐르게 둔다 */

    /* ---------- 2. 비주얼 밴드 — 모바일은 고정 이미지 ----------
       열림 효과 없이 320 짜리 띠 하나로 둔다. JS 도 이 폭에서는 쉰다. */
    .brand-visual-pin { height: auto; }
    .brand-visual-sticky {
        position: static;
        display: block;
        height: auto;
        min-height: 0;
    }
    .brand-visual { height: 320px; }
    .brand-visual-img { clip-path: none !important; }

    /* ---------- 3. 브랜드 스토리 / EMortal ---------- */
    .brand-story { height: 1177px; }

    .brand-story-eyebrow,
    .brand-story-title,
    .brand-story-text,
    .brand-story-note,
    .brand-story-img,
    .brand-emortal-eyebrow,
    .brand-emortal-title,
    .brand-emortal-text,
    .brand-emortal-note { left: 20px; }

    .brand-story-eyebrow { top: 40px; }
    .brand-story-title   { top: 79px; width: 295px; font-size: 32px; line-height: 1.5; }
    .brand-story-text    { top: 195px; width: 295px; }
    .brand-story-text br { display: none; }
    .brand-story-text--2 { top: 298px; width: 320px; }
    .brand-story-text--2 br { display: none; }
    .brand-story-note    { top: 401px; }

    /* PC 는 스토리 옆 사진, 모바일은 EMortal 위의 사진 — 같은 그림이라 자리만 옮긴다 */
    .brand-story-img { top: 496px; right: 20px; width: auto; height: 205px; }

    .brand-emortal-eyebrow { top: 741px; }
    .brand-emortal-title   { top: 780px; right: 20px; width: auto; font-size: 32px; line-height: 1.5; }
    .brand-emortal-text    { top: 896px; width: 312px; }
    .brand-emortal-text br { display: none; }
    .brand-emortal-note    { top: 1028px; }
    .brand-emortal-note--2 { top: 1057px; width: 275px; }

    /* ---------- 4. Key Ingredients ---------- */
    .brand-ingredients { height: 442px; }

    .brand-ing-head {
        left: 20px;
        width: auto;
        right: 20px;
        height: 42px;
    }
    .brand-ing-title { font-size: 26px; }

    .brand-ing-nav { gap: 12px; }
    .brand-ing-btn,
    .brand-ing-btn img { width: 40px; height: 40px; }

    .brand-ing-track {
        top: 82px;          /* 2160 - 2078 */
        left: 20px;
        scroll-snap-type: x mandatory;   /* 손가락으로 넘겨도 카드에 딱 맞게 선다 */
    }
    .brand-ing-list { gap: 16px; }
    .brand-ing-card {
        flex: 0 0 270px;
        padding-top: 80px;      /* 원 110 중 카드 위로 나온 부분 */
        scroll-snap-align: start;
    }

    .brand-ing-thumb { width: 110px; height: 110px; }
    .brand-ing-body { height: 210px; }
    .brand-ing-name { top: 51px;  font-size: 20px; }
    .brand-ing-desc { top: 91px;  font-size: 16px; }
    .brand-ing-tag  { top: 153px; font-size: 16px; }

    /* ---------- 5. 5 Balance System ----------
       목록 길이가 글자 수에 따라 달라져서 이 블록만 흐름 배치로 둔다. */
    .brand-balance {
        height: auto;
        padding: 0 20px 70px;
    }
    .brand-balance-foot {
        position: static;
        width: auto;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #ddd;
    }
    .brand-balance-eyebrow,
    .brand-balance-title,
    .brand-balance-chart,
    .brand-balance-list {
        position: static;
        left: auto;
        top: auto;
        width: auto;
    }
    .brand-balance-title  { margin-top: 13px; font-size: 32px; line-height: 1.5; }
    .brand-balance-chart  { margin-top: 30px; }
    .brand-balance-list   { margin-top: 40px; gap: 20px; }

    /* 한 줄: 번호·이름이 위, 설명·성분이 74 안쪽에서 흐른다 */
    .brand-balance-row {
        height: auto;
        padding: 47px 0 20px 74px;
    }
    .brand-balance-row--last { padding-bottom: 0; }
    .brand-balance-note { position: static; margin-top: 4px; }

    .brand-balance-no,
    .brand-balance-name { font-size: 22px; }
    .brand-balance-name { left: 74px; }

    .brand-balance-desc,
    .brand-balance-ing { position: static; left: auto; top: auto; }
    .brand-balance-ing { margin-top: 4px; }

    /* ---------- 6. 전달 기술 ---------- */
    .brand-delivery { height: 685px; }

    .brand-delivery-eyebrow,
    .brand-delivery-title,
    .brand-delivery-text,
    .brand-delivery-img { left: 20px; }

    .brand-delivery-eyebrow { top: 0; }
    .brand-delivery-title   { top: 39px; right: 20px; width: auto; font-size: 32px; line-height: 1.5; }
    .brand-delivery-text    { top: 155px; width: 311px; }
    .brand-delivery-text br { display: none; }
    .brand-delivery-img     { top: 340px; right: 20px; width: auto; height: 205px; }

    /* ---------- 7. 클로징 ---------- */
    .brand-closing { height: 307px; }

    .brand-closing-text { font-size: 16px; line-height: 1.8; }
    .brand-closing-mark {
        top: 59px;              /* 4377 - 4318 */
        left: 50%;
        transform: translateX(-50%);
        width: 294.81px;
        max-width: calc(100% - 40px);
    }
}