@charset "utf-8";
/* ==========================================================================
   해든네이처 메인 「식탁과 노트」 — 풀스크린
   - 레이아웃·움직임 참고: KIWA(luci.co.jp) 키 비주얼 확장·원형 열기·십자 표시, Chai Apothecary 고정 제목·여백·떠오르기.
   - 컬러: 로고 잉크 #392a1f 기준. 타이포: 마루부리(한글)·Lora(영문)·Homemade Apple(장식) / 4px 단위 / 한글 자간 -3.8% / 본문 행간 158%.
   - 움직임은 js/hn-home.js 가 html.hm-motion 을 붙였을 때만 켜진다(스크립트가 없거나 움직임 줄이기 설정이면 완성된 화면).
   - 모든 규칙은 .hm-home(메인) 안으로 한정한다. 헤더는 메인에서만 body:has(.hm-home) 로 덮어쓴다.
   ========================================================================== */

/* 마루부리 — 네이버 한글 CDN은 굵기마다 이름이 달라, 한 이름(MaruBuri)에 굵기 400·600·700을 묶어 다시 선언한다 */
@font-face { font-family: "MaruBuri"; font-weight: 400; font-style: normal; font-display: swap; src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2) format("woff2"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff) format("woff"); }
@font-face { font-family: "MaruBuri"; font-weight: 600; font-style: normal; font-display: swap; src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2) format("woff2"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff) format("woff"); }
@font-face { font-family: "MaruBuri"; font-weight: 700; font-style: normal; font-display: swap; src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff2) format("woff2"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff) format("woff"); }

body:has(.hm-home) {
    --c-ink: #392a1f;
    --c-ink-700: #5f5248;
    --c-ink-500: #72665d;
    --c-ink-300: #bdb6af;
    --c-ink-200: #d0cac3;
    --c-ink-100: #dfdad3;
    --c-caramel: #875a36;      /* 메인 컬러(2026-10-01 변경) — 흰 글자 5.92, 린넨 위 글자 4.82 */
    --c-caramel-hover: #6f4a2c;
    --c-caramel-text: #875a36;
    --c-caramel-soft: #ebe3da;  /* 메인 10% — 위의 메인색 글자 4.66 */
    --c-amber: #b3977f;        /* 어두운 바탕 위 강조(메인 #875a36 을 밝힌 모카) — 잉크 바탕 대비 5.02 */
    --c-linen: #ede7df;
    --c-paper: #f6f2ec;
    --c-kraft: #8c6a52;
    --font-base: "Lora", "MaruBuri", serif;
    --font-deco: "Homemade Apple", cursive;
    --hm-ease: cubic-bezier(.22, 1, .36, 1);
    --hm-gutter: 72px; /* 풀 페이지 양옆 여백(PC) — 태블릿 40px, 모바일 20px */
}

/* freshlab-brand.css·gw.css 의 body overflow-x:hidden 은 body 를 스크롤 상자로 만들어 position:sticky 를 깨뜨린다 → 메인에서는 clip 으로 */
body:has(.hm-home) { overflow-x: clip; overflow-y: visible; }
/* Lenis 권장 설정(lenis.css 대신) — gw.css 의 scroll-behavior:smooth 와 겹치지 않게 */
html.lenis, html.lenis body { height: auto; }
html.lenis-smooth { scroll-behavior: auto !important; }
html.lenis-stopped { overflow: hidden; }

/* fl-main.css 의 #fl-home 흰 바탕보다 우선하도록 id 로 한 번 더 지정 */
#fl-home.hm-home, .hm-home {
    --ls-ko: -0.038em;   /* 제목(20px 이상) 자간 */
    --ls-body: -0.01em;  /* 본문 자간 */
    --lh-body: 1.58;
    --fs-display-l: 64px;
    --fs-display-m: 48px;
    --fs-h1: 40px;
    --fs-h2: 32px;
    --fs-h3: 24px;
    --fs-title: 20px;
    --fs-body-l: 20px;
    --fs-body: 16px;
    --fs-caption: 12px;
    --fs-deco: 40px;

    font-family: var(--font-base);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body); /* 본문은 -1% — 마루부리 작은 글자가 뭉개지지 않게 */
    color: var(--c-ink);
    word-break: keep-all;
    overflow-wrap: break-word;
    font-synthesis: none;
    overflow: clip; /* sticky 가 동작하도록 hidden 대신 clip */
    background-color: var(--c-linen); /* 격자 무늬는 눈이 피로해 단색으로 */
}
.hm-home *, .hm-home *::before, .hm-home *::after { box-sizing: border-box; }
/* 초기화는 :where() 로 우선순위를 낮춰 아래 부품의 여백이 이기게 한다 */
.hm-home :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
.hm-home :where(ul, ol) { list-style: none; }
/* gw.css 의 h1~h6 { font-family: NEXON Lv1 Gothic; letter-spacing: -0.75px } 을 메인에서는 끊고 마루부리·한글 자간을 물려받게 한다 */
.hm-home :where(h1, h2, h3, h4, h5, h6) { font-family: inherit; letter-spacing: inherit; }
.hm-home :where(a) { color: inherit; text-decoration: none; }
.hm-home :lang(en) { letter-spacing: 0; }
/* default.css 의 p { word-break: break-all } 이 상속을 끊어 단어 중간에서 줄이 바뀐다 → 메인 안의 글자 요소는 단어 단위로 */
.hm-home :where(p, li, dt, dd, h1, h2, h3, span, a, b, small, time, figcaption) { word-break: keep-all; }
.hm-home img { max-width: 100%; display: block; }
.hm-wide { width: 100%; max-width: none; margin: 0; padding: 0 var(--hm-gutter); }

/* ---------- 타이포 ---------- */
/* 제목 계열만 -3.8% */
.hm-display { font-size: var(--fs-display-l); line-height: 1.2; font-weight: 700; }
.hm-h1 { font-size: var(--fs-display-m); line-height: 1.25; font-weight: 600; }
.hm-h2 { font-size: var(--fs-h2); line-height: 1.35; font-weight: 600; }
.hm-h3 { font-size: var(--fs-title); line-height: 1.5; font-weight: 600; }
.hm-lead, .hm-body-l { font-size: var(--fs-body-l); line-height: var(--lh-body); }
.hm-body-l { color: var(--c-ink); }
.hm-label-en { font-size: var(--fs-caption); line-height: 1.5; font-weight: 600; letter-spacing: .12em !important; text-transform: uppercase; }
.hm-deco { font-family: var(--font-deco); font-weight: 400; font-size: var(--fs-deco); line-height: 1.3; letter-spacing: 0; }
.hm-eyebrow { display: flex; align-items: baseline; gap: 12px; font-size: var(--fs-body); font-weight: 600; }
.hm-note { margin-top: 24px; font-size: var(--fs-caption); line-height: 1.5; color: var(--c-ink-700); }
.hm-link { display: inline-block; font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color .3s; }
.hm-link:hover { color: var(--c-caramel-text); }
.hm-head { margin-bottom: 64px; }
.hm-head .hm-h1 { margin-top: 16px; }
.hm-head.is-center { text-align: center; }
.hm-head-desc { margin-top: 24px; max-width: 32em; color: var(--c-ink); } /* 얇은 획이 끊겨 보이지 않게 본문 잉크색 */

/* 도장 배지 */
.hm-stamp {
    display: inline-block; margin-top: 32px; padding: 4px 12px;
    font-size: var(--fs-caption); line-height: 1.5; font-weight: 600; color: var(--c-caramel-text);
    border: 1.5px solid currentColor; border-radius: 2px; outline: 1px solid currentColor; outline-offset: 2px; transform: rotate(-2deg);
}
.hm-stamp.is-small { margin: 0 0 16px; }
.hm-badge { display: inline-block; padding: 0 8px; font-size: var(--fs-caption); line-height: 20px; font-weight: 600; color: var(--c-caramel-text); background: var(--c-caramel-soft); border-radius: 2px; }

/* 버튼 */
.hm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.hm-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
    font-size: var(--fs-body); line-height: 1.25; font-weight: 600; color: #fff !important;
    background: var(--c-caramel); border: 1.5px solid var(--c-caramel); border-radius: 2px; transition: background .3s, border-color .3s, color .3s;
}
.hm-btn:hover { background: var(--c-caramel-hover); border-color: var(--c-caramel-hover); }
.hm-btn.is-line { color: var(--c-paper) !important; background: transparent; border-color: var(--c-paper); }
.hm-btn.is-line:hover { color: var(--c-ink) !important; background: var(--c-paper); }
.hm-home a:focus-visible { outline: 2px solid var(--c-caramel); outline-offset: 3px; }

/* 사진 자리 */
.hm-photo { width: 100%; height: 100%; object-fit: cover; background: var(--c-paper); }
.hm-photo.is-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background-color: var(--c-paper); border: 1px solid var(--c-ink-100); /* 사진 자리 윤곽 */
}
.hm-photo.is-empty img { width: 72px; opacity: .3; }
.hm-photo.is-empty small { font-size: var(--fs-caption); line-height: 1.5; color: var(--c-ink-500); }
.hm-media { position: relative; display: block; overflow: hidden; }
.hm-media-in { position: absolute; left: 0; right: 0; top: -8%; height: 116%; will-change: transform; }

/* ---------- 섹션 공통 ---------- */
.hm-sec { position: relative; padding: clamp(104px, 16vh, 176px) 0; }
.hm-sec.is-full { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.hm-sec.is-paper { background: var(--c-paper); }
.hm-sec.is-ink { background: var(--c-ink); color: var(--c-paper); }
.hm-sec.is-kraft {
    color: #fff;
    background-color: var(--c-kraft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .16 0 0 0 0 .12 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hm-sec.is-kraft a:focus-visible, .hm-sec.is-ink a:focus-visible { outline-color: #fff; }

/* 왼쪽 제목 고정 + 오른쪽 내용 */
.hm-sticky-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
.hm-sticky-head { position: sticky; top: 140px; }
.hm-sticky-head.is-static { position: static; } /* 제품 섹션 제목은 스크롤과 함께 움직인다 */

/* ==========================================================================
   ① 키 비주얼
   - 병(.hm-kv-product)의 css 위치는 '스크롤을 다 한 뒤' 자리(오른쪽). 처음 자리(가운데, 화면 아래로 반쯤 걸친 곳)는
     js 가 --hm-start-* 값을 읽어 transform 으로 옮겨 놓는다. 1단계 올라오기 → 2단계 오른쪽으로.
   - 갈색 판(.hm-kv-panel)은 병이 올라오는 동안 투명도로 서서히 나타난다.
   ========================================================================== */
#hm-kv { position: relative; height: 240vh; }
.hm-kv-stage {
    --hm-start-h: 94;  /* 처음 병 높이(vh, 단위 없이) — 크게 시작해 올라오며 작아진다 */
    --hm-start-y: 106; /* 처음 병 중심 세로 위치(%) — 화면 아래로 반쯤 걸친다 */
    --hm-end-rot: 12;  /* 자리를 잡은 뒤에도 남겨 두는 기울기(°) */
    --hm-mid-y: 52;    /* 다 올라왔을 때 병 중심(%) */
    --hm-end-h: 74vh;  /* 다 옮긴 뒤 병 높이 */
    --hm-end-right: max(13vw, calc(var(--hm-end-h) * .2 + 24px)); /* 기울어진 병 윗부분(높이의 약 19%)이 오른쪽으로 넘어가지 않게 */
    --hm-end-top: calc(50% - var(--hm-end-h) / 2 + 2vh);
    --hm-move: 0;
    position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
}
.hm-kv-bg { position: absolute; inset: 0; pointer-events: none; will-change: transform, opacity; }
.hm-kv-bg img { position: absolute; height: 92vh; width: auto; max-width: none; opacity: .09; }
.hm-kv-bg .is-a { left: -6vw; top: -18vh; transform: rotate(-24deg); }
.hm-kv-bg .is-b { right: -10vw; bottom: -30vh; transform: rotate(150deg); }

.hm-kv-logo { position: absolute; left: 0; right: 0; top: 18vh; z-index: 2; margin: 0 auto; width: max-content; text-align: center; will-change: opacity, transform; }
.hm-kv-logo img { width: clamp(150px, 15vw, 220px); height: auto; margin: 0 auto; }
.hm-kv-panel { position: absolute; inset: 0; z-index: 1; background: var(--c-ink); will-change: opacity; }
.hm-kv-panel .hm-photo { position: absolute; inset: 0; }
.hm-kv-panel:has(.hm-photo)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(57, 42, 31, .82) 0%, rgba(57, 42, 31, .35) 60%, rgba(57, 42, 31, .1) 100%); }
.hm-kv-art { position: absolute; right: calc(var(--hm-end-right) - 8vw); top: 50%; height: 84vh; width: auto; max-width: none; transform: translateY(-50%) rotate(8deg); opacity: .14; }

/* 제품 병 */
.hm-kv-product { position: absolute; z-index: 2; right: var(--hm-end-right); top: var(--hm-end-top); height: var(--hm-end-h); margin: 0; transform-origin: 50% 50%; will-change: transform; pointer-events: none; }
/* 기울기(js: 스크롤 단계·스크롤 속도·마우스) → 그 안에서 천천히 떠 있는 움직임(css) */
.hm-kv-tilt { position: relative; display: block; height: 100%; transform-origin: 50% 90%; will-change: transform; }
.hm-kv-bottle { position: relative; display: block; height: 100%; }
.hm-motion #hm-kv.is-loaded .hm-kv-stage:not(.is-open) .hm-kv-bottle picture { animation: hm-float 6s ease-in-out 2s infinite; } /* 자리를 잡으면 멈춘다 */
@keyframes hm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.hm-kv-bottle picture, .hm-kv-bottle img { display: block; height: 100%; width: auto; max-width: none; }
/* 굴리는 라벨(js 가 만든 캔버스) — 원본 라벨 띠 위에 겹친다 */
.hm-kv-roll { position: absolute; display: block; pointer-events: none; }
/* 짙은 병의 윤곽 — 가는 테두리 빛 한 줄과 바닥 그림자만 */
.hm-kv-bottle img { filter: drop-shadow(0 0 1px rgba(246, 220, 180, .35)) drop-shadow(0 32px 32px rgba(0, 0, 0, .3)); }

/* 카피 — 판 위(병보다 앞) */
.hm-kv-copy { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; padding-top: 64px; color: var(--c-paper); pointer-events: none; }
.hm-kv-copy a { pointer-events: auto; }
.hm-kv-copy .hm-eyebrow { color: var(--c-amber); }
.hm-kv-copy .hm-eyebrow .hm-label-en { color: var(--c-ink-200); }
/* 대제목: 가로형 로고 + 슬로건(Lora 이탤릭) */
.hm-kv-title { margin: 0; }
.hm-kv-title img { display: block; width: clamp(300px, 30vw, 500px); height: auto; } /* 심볼 없는 워드마크 */
.hm-kv-slogan { margin-top: 20px; font-family: "Lora", serif; font-style: italic; font-weight: 400; font-size: 32px; line-height: 1.3; letter-spacing: 0; color: var(--c-amber); }
.hm-wipe { display: block; }
.hm-wipe > span { display: inline-block; }
.hm-wipe.is-accent { color: var(--c-amber); }
.hm-kv-sub { max-width: 34em; }
.hm-kv-br-s { display: none; } /* 좁은 모바일(479px 이하)에서만 뜻 단위로 줄을 나눈다 */
@media (max-width: 479px) { .hm-kv-br-s { display: inline; } }
/* 브랜드 특성 설명 — 최대 2줄 */
.hm-kv-brand { margin-top: 28px; font-size: var(--fs-body-l); line-height: var(--lh-body); color: var(--c-ink-100); }
.hm-kv-sub .hm-stamp { color: var(--c-amber); }


/* 움직임: 처음 들어올 때 */
.hm-motion .hm-kv-bg img { filter: blur(18px); opacity: 0; transition: filter 2.2s var(--hm-ease), opacity 2.2s var(--hm-ease); }
.hm-motion #hm-kv.is-loaded .hm-kv-bg img { filter: blur(0); opacity: .09; }
.hm-motion .hm-kv-bottle { opacity: 0; translate: 0 32px; transition: opacity 1.4s var(--hm-ease) .3s, translate 1.6s var(--hm-ease) .3s; }
.hm-motion #hm-kv.is-loaded .hm-kv-bottle { opacity: 1; translate: 0 0; }
.hm-motion .hm-kv-logo > * { opacity: 0; transform: translateY(16px); transition: opacity 1.2s var(--hm-ease) .2s, transform 1.2s var(--hm-ease) .2s; }
.hm-motion .hm-kv-logo > p { transition-delay: .5s; }
.hm-motion #hm-kv.is-loaded .hm-kv-logo > * { opacity: 1; transform: none; }
.hm-motion .hm-kv-panel { opacity: 0; }
/* 움직임: 병이 자리를 잡으면(.is-open) 카피가 왼쪽부터 드러난다 */
.hm-motion .hm-wipe > span { clip-path: inset(0 100% 0 0); transform: translateX(-24px); transition: clip-path 1s var(--hm-ease), transform 1s var(--hm-ease); }
.hm-motion .hm-wipe:nth-child(2) > span { transition-delay: .15s; }
.hm-motion .hm-wipe:nth-child(3) > span { transition-delay: .3s; }
.hm-motion .is-open .hm-wipe > span { clip-path: inset(0 0 0 0); transform: none; }
.hm-motion .hm-kv-copy .hm-eyebrow, .hm-motion .hm-kv-sub { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--hm-ease) .45s, transform 1s var(--hm-ease) .45s; }
.hm-motion .hm-kv-copy .hm-eyebrow { transition-delay: 0s; }
.hm-motion .is-open .hm-kv-copy .hm-eyebrow, .hm-motion .is-open .hm-kv-sub { opacity: 1; transform: none; }
.hm-motion .hm-kv-copy a { pointer-events: none; }
.hm-motion .is-open .hm-kv-copy a { pointer-events: auto; }
.hm-motion .hm-kv-art { opacity: 0; transition: opacity 2s var(--hm-ease) .3s; }
.hm-motion .is-open .hm-kv-art { opacity: .14; }
/* 스크립트가 없거나 움직임 줄이기: 다 옮긴 뒤 화면(잉크 바탕·오른쪽 병·카피)을 바로 보여 준다 */
html:not(.hm-motion) #hm-kv { height: auto; }
html:not(.hm-motion) .hm-kv-stage { position: relative; }
html:not(.hm-motion) .hm-kv-bg, html:not(.hm-motion) .hm-kv-logo { display: none; }

/* ==========================================================================
   ② 제품
   ========================================================================== */
.hm-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(24px, 3vw, 56px); }
.hm-product:nth-child(even) { margin-top: 160px; }
.hm-product a { display: block; }
.hm-product .hm-media { aspect-ratio: 3 / 4; } /* 세로 3:4 — 정사각 원본(1000×1000)의 좌우를 잘라 병을 가운데에 */
/* 제품 사진은 스크롤에 따라 움직이지 않고, 마우스를 올리면 천천히 확대만 된다 */
.hm-product .hm-media-in { top: 0; height: 100%; }
.hm-product .hm-photo { transition: transform 1s var(--hm-ease); }
.hm-product a:hover .hm-photo, .hm-product a:focus-visible .hm-photo { transform: scale(1.06); }
.hm-product-info { display: block; margin-top: 24px; }
.hm-product-name { display: block; margin-top: 12px; font-size: var(--fs-h3); line-height: 1.4; font-weight: 600; }
.hm-product-name span { font-weight: 400; color: var(--c-ink-700); }
.hm-product-desc { display: block; margin-top: 8px; color: var(--c-ink); }
.hm-product-more { display: inline-flex; gap: 8px; margin-top: 16px; font-size: var(--fs-caption); line-height: 1.5; font-weight: 600; color: var(--c-caramel-text); }
.hm-product-more i { font-style: normal; transition: transform .4s var(--hm-ease); }
.hm-product a:hover .hm-product-more i { transform: translateX(6px); }
.hm-product-note { grid-column: 1 / -1; }

/* ==========================================================================
   ③ 기름 비교 — 왼쪽 제품 사진, 오른쪽 제목 + 용도별 비교표(우리 열만 잉크색)
   ========================================================================== */
/* 한 화면 안에 사진과 표가 모두 보이게: 섹션 높이 = 화면, 사진 높이 = 화면 - 위아래 여백(헤더 포함) */
#hm-gap { background: var(--c-paper); min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 120px 0 104px; }
.hm-vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 120px); align-items: center; }
/* 사진 원본 비율(9:10)을 지키며 화면 높이 안에 들어가게 — 폭은 칸 폭과 (가능한 높이 × 0.9) 중 작은 값. 위아래가 잘리지 않는다 */
.hm-vs-photo { --hm-ph: calc(100svh - 224px); margin: 0; width: min(100%, calc(var(--hm-ph) * .9), 864px); aspect-ratio: 9 / 10; justify-self: center; overflow: hidden; }
.hm-vs-photo .hm-photo { width: 100%; height: 100%; object-fit: cover; }
.hm-vs-body .hm-h1 { margin-top: 16px; }
/* 제품명 영문 + 한글 읽기 */
.hm-h1 [lang=en] { font-family: "Lora", serif; font-weight: 500; letter-spacing: 0; }
.hm-h1-sub { display: block; margin-top: 8px; font-size: var(--fs-title); font-weight: 400; color: var(--c-ink-500); }
.hm-product-name [lang=en] { font-family: "Lora", serif; font-weight: 500; letter-spacing: 0; color: var(--c-ink); }
/* 노트 한 장 — 괘선, 손으로 그린 ◎○△, 우리 열은 캐러멜색 표시 */
.hm-vs-table { margin-top: 48px; }
.hm-vs-table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.hm-vs-table th, .hm-vs-table td { padding: 0 12px; height: 60px; text-align: center; vertical-align: middle; border-bottom: 1px dashed var(--c-ink-300); }
.hm-vs-table thead th { height: 72px; font-size: var(--fs-body); font-weight: 600; color: var(--c-ink-700); border-bottom: 1px solid var(--c-ink); }
.hm-vs-table tbody th { text-align: left; padding-left: 0; font-size: var(--fs-body); font-weight: 400; color: var(--c-ink); }
.hm-vs-table th:first-child { width: 32%; }
.hm-vs-table thead .is-ours { color: var(--c-caramel-text); } /* 우리 열은 이름과 표시 색으로만 구분 */
/* 손으로 그린 표시 */
.hm-fit { display: inline-block; width: 22px; height: 22px; vertical-align: middle; background: var(--c-ink-500); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.hm-fit.is-2 { -webkit-mask-image: url("../img/hn/mark-best.svg"); mask-image: url("../img/hn/mark-best.svg"); }
.hm-fit.is-1 { -webkit-mask-image: url("../img/hn/mark-good.svg"); mask-image: url("../img/hn/mark-good.svg"); }
.hm-fit.is-0 { -webkit-mask-image: url("../img/hn/mark-fair.svg"); mask-image: url("../img/hn/mark-fair.svg"); background: var(--c-ink-300); }
.hm-vs-table .is-ours .hm-fit { background: var(--c-caramel); width: 26px; height: 26px; }
.hm-vs-legend { display: flex; gap: 24px; margin-top: 20px; font-size: var(--fs-caption); line-height: 1.5; color: var(--c-ink-500); }
.hm-vs-legend span { display: inline-flex; align-items: center; gap: 8px; }
/* 높이가 낮은 화면(노트북 등)에서도 한 화면에 들어가게 표와 여백을 줄인다 */
@media (min-width: 768px) and (max-height: 960px) {
    #hm-gap { padding: 104px 0 80px; }
    .hm-vs-photo { --hm-ph: calc(100svh - 184px); }
    .hm-vs-body .hm-h1 { font-size: 40px; }
    .hm-vs-body .hm-head-desc { margin-top: 16px; }
    .hm-vs-table { margin-top: 24px; }
    .hm-vs-table th, .hm-vs-table td { height: 48px; }
    .hm-vs-table thead th { height: 52px; }
    .hm-vs-legend { margin-top: 12px; }
}
@media (min-width: 768px) and (max-height: 800px) {
    #hm-gap { padding-bottom: 64px; }
    .hm-vs-photo { --hm-ph: calc(100svh - 168px); }
    .hm-vs-body .hm-h1 { font-size: 36px; }
    .hm-vs-table th, .hm-vs-table td { height: 44px; }
}
.hm-vs-legend .hm-fit { width: 14px; height: 14px; }
.hm-motion .hm-vs-table .hm-fit { opacity: 0; transform: scale(.6) rotate(-12deg); transition: opacity .5s var(--hm-ease), transform .6s var(--hm-ease); }
.hm-motion .hm-vs-table.is-in .hm-fit { opacity: 1; transform: none; }
.hm-motion .hm-vs-table tbody tr:nth-child(2) .hm-fit { transition-delay: .1s; }
.hm-motion .hm-vs-table tbody tr:nth-child(3) .hm-fit { transition-delay: .2s; }
.hm-motion .hm-vs-table tbody tr:nth-child(4) .hm-fit { transition-delay: .3s; }
.hm-motion .hm-vs-table tbody tr:nth-child(5) .hm-fit { transition-delay: .4s; }

/* ==========================================================================
   ④ 이렇게 씁니다 — 화면 높이 3장면
   ========================================================================== */
.hm-scenes { display: flex; height: 100vh; height: 100svh; background: var(--c-ink); }
.hm-scenes > li { position: relative; flex: 1 1 0; overflow: hidden; transition: flex-grow .9s var(--hm-ease); }
.hm-scenes > li + li { border-left: 1px solid rgba(246, 242, 236, .2); }
.hm-scenes .hm-photo { position: absolute; inset: 0; transition: transform 1.4s var(--hm-ease); }
.hm-scenes > li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(57, 42, 31, 0) 35%, rgba(57, 42, 31, .86) 100%); pointer-events: none; }
.hm-scene-txt { position: absolute; left: clamp(20px, 3vw, 48px); right: clamp(20px, 3vw, 48px); bottom: clamp(32px, 7vh, 72px); z-index: 1; color: var(--c-paper); }
.hm-scene-txt .hm-h2 { margin-top: 0; }
.hm-scene-txt p:last-child { margin-top: 12px; max-width: 22em; color: var(--c-ink-100); }
@media (hover: hover) and (min-width: 1025px) {
    .hm-scenes:hover > li { flex-grow: .8; }
    .hm-scenes > li:hover { flex-grow: 1.6; }
    .hm-scenes > li:hover .hm-photo { transform: scale(1.04); }
}

/* ==========================================================================
   ⑤ 노트에서 — 가운데 땅콩 가지 일러스트, 네 모서리에 번호 설명과 일러스트 쪽으로 향하는 가는 지시선
   ========================================================================== */
#hm-note .hm-head-desc { color: var(--c-ink-100); margin-left: auto; margin-right: auto; }
/* 일러스트를 가운데 세우고, 설명은 그림의 해당 부위 높이(--t)에 좌우 번갈아 둔다. 지시선이 그림 가장자리까지 닿는다 */
/* 착즙 연출 트랙: 연출이 켜져 있으면 트랙을 지나는 동안(--pin-len) 제목·그림(.hm-note-pin, 화면 높이)이 화면에 고정된 채 진행된다(hn-home.js 5).
   고정된 한 화면에 제목과 그림이 다 들어가도록 그림 높이를 줄인다 */
.hm-plate-track { --art-h: min(64vh, 600px); --pin-len: 160vh; }
.hm-motion #hm-note { padding-top: 0; }
.hm-motion .hm-plate-track { --art-h: min(56vh, 560px); height: calc(100vh + var(--pin-len)); height: calc(100svh + var(--pin-len)); } /* sticky 는 부모의 콘텐츠 영역 안에서만 움직이므로 padding 이 아닌 높이로 잡는다 */
.hm-motion .hm-note-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.hm-motion #hm-note .hm-head { margin-bottom: 40px; }
.hm-note-pin > .hm-plate { width: 100%; } /* flex 안에서 margin:auto 때문에 내용 폭으로 줄지 않게 */
/* --call-gap: 그림 가장자리~설명 사이(지시선 자리), --call-fs: 단계 이름 글자 크기(지시선 높이를 맞춘다), --call-max: 설명 최대 폭 */
.hm-plate { --art-w: calc(var(--art-h) * .265); --call-gap: 80px; --call-fs: var(--fs-title); --call-max: 300px; position: relative; height: var(--art-h); max-width: 1280px; margin: 0 auto; }
.hm-plate-art { position: absolute; left: calc(50% - var(--art-w) / 2); top: 0; height: 100%; width: var(--art-w); max-width: none; opacity: .9; }
.hm-press { aspect-ratio: 175.4 / 662.39; overflow: visible; } /* 인라인 svg — 깔때기로 떨어지는 땅콩이 틀 밖으로 잘리지 않게 */
.hm-calls { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.hm-call { position: absolute; top: var(--t); width: min(var(--call-max), calc(50% - var(--art-w) / 2 - var(--call-gap))); }
.hm-call.is-l { right: calc(50% + var(--art-w) / 2 + var(--call-gap)); text-align: right; }
.hm-call.is-r { left: calc(50% + var(--art-w) / 2 + var(--call-gap)); }
.hm-call .hm-h3 { margin-top: 0; font-size: var(--call-fs); color: var(--c-paper); }
.hm-call p { margin-top: 6px; color: var(--c-ink-100); }
/* 지시선 — 번호 높이에서 그림 가장자리까지 */
/* 지시선: 설명 끝에서 8px 띄워 그림 쪽으로, 점은 그림 가장자리 — 높이는 단계 이름 한 줄의 가운데 */
.hm-call::after { content: ""; position: absolute; top: calc(var(--call-fs) * .75); width: calc(var(--call-gap) - 16px); height: 1px; background: rgba(246, 242, 236, .45); }
.hm-call.is-l::after { right: calc(8px - var(--call-gap)); }
.hm-call.is-r::after { left: calc(8px - var(--call-gap)); }
.hm-call::before { content: ""; position: absolute; top: calc(var(--call-fs) * .75 - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--c-amber); }
.hm-call.is-l::before { right: calc(4px - var(--call-gap)); }
.hm-call.is-r::before { left: calc(4px - var(--call-gap)); }
.hm-motion .hm-calls .hm-call:nth-child(2) { transition-delay: .12s; }
.hm-motion .hm-calls .hm-call:nth-child(3) { transition-delay: .24s; }
.hm-motion .hm-calls .hm-call:nth-child(4) { transition-delay: .36s; }
/* 고정 화면의 단계 설명: 연출 진행에 맞춰 js 가 .is-on 을 붙이면 차례로 나타난다(hn-home.js 5) */
.hm-motion .hm-calls .hm-call { opacity: 0; transform: translateY(16px); transition: opacity 1.4s var(--hm-ease), transform 1.4s var(--hm-ease); transition-delay: 0s; }
.hm-motion .hm-calls .hm-call.is-on { opacity: 1; transform: none; }

/* ==========================================================================
   ⑦ 일지와 소식
   ========================================================================== */
#hm-news .hm-sticky-head .hm-link { margin-top: 32px; }
.hm-news { border-top: 1.5px solid var(--c-ink); }
.hm-news a { display: grid; grid-template-columns: 120px 1fr 32px; gap: 16px; align-items: baseline; padding: 32px 0; border-bottom: 1px solid var(--c-ink-200); transition: color .3s, padding .5s var(--hm-ease); }
.hm-news a:hover { color: var(--c-caramel-text); padding-left: 12px; }
.hm-news time { font-size: var(--fs-caption); line-height: 1.5; font-style: italic; color: var(--c-ink-500); }
.hm-news span { font-size: var(--fs-h3); line-height: 1.4; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-news i { font-style: normal; text-align: right; }
.hm-empty { padding: 48px 0; border-top: 1.5px solid var(--c-ink); border-bottom: 1px solid var(--c-ink-200); color: var(--c-ink-700); }

/* ==========================================================================
   ⑧ 누가 만드나 — 반쪽 화면 사진
   ========================================================================== */
#hm-maker { background: #e1d2c5; /* 사진 속 벽·타일(#b9967c)을 밝힌 톤 — 본문 대비 9.33 */ display: grid; grid-template-columns: auto 1fr; min-height: 100vh; min-height: 100svh; }
/* 사진은 원본 비율(4:5) 그대로 화면 높이에 맞춘다 — 폭이 비율을 따라가므로 병 위아래가 잘리지 않는다 */
.hm-maker-photo { position: relative; overflow: hidden; height: 100svh; aspect-ratio: 4 / 5; max-width: 50vw; }
.hm-maker-photo .hm-media-in { top: 0; height: 100%; } /* 스크롤에 따라 움직이지 않게 */
.hm-maker-photo .hm-photo { object-position: 62% 50%; } /* 병이 오른쪽에 있어 잘릴 때 병 쪽을 남긴다 */
.hm-maker-copy { display: flex; flex-direction: column; justify-content: center; padding: 120px clamp(24px, 6vw, 120px); }
.hm-maker-copy .hm-h1 { margin-top: 16px; }
.hm-maker-copy .hm-head-desc { margin-top: 24px; }
.hm-sign { display: flex; align-items: baseline; gap: 12px; margin: 32px 0 24px; }
.hm-sign span { font-size: var(--fs-caption); line-height: 1.5; color: var(--c-ink-700); } /* 모래색 바탕에서도 대비 5.86 */
.hm-sign b { font-size: var(--fs-h3); line-height: 1.4; font-weight: 600; }
.hm-maker-copy .hm-link { align-self: flex-start; }

/* ==========================================================================
   ⑨ 문의 — 크래프트 풀스크린
   ========================================================================== */
.hm-contact .hm-deco { font-size: clamp(40px, 4.4vw, 72px); line-height: 1.2; color: #fff; transform: rotate(-4deg); transform-origin: center; padding-left: .3em; /* 손글씨 첫 획이 왼쪽 여백 밖으로 나가지 않게 */ }
.hm-contact .hm-h2 { margin-top: 24px; max-width: 20em; }
.hm-contact-desc { margin-top: 16px; font-size: var(--fs-body-l); line-height: var(--lh-body); }
/* 문의 — 종이색 버튼 하나 + 구분선 + 작은 라벨이 붙은 이메일 */
/* 문의 배경 드로잉 — 프라이팬·주걱·땅콩을 가운데 글을 피해 가장자리에 옅게 흩어 둔다 */
#fl-inquiry { overflow: hidden; }
.hm-contact-draw { position: absolute; inset: 0; pointer-events: none; }
.hm-contact-draw img { position: absolute; height: auto; max-width: none; opacity: .16; }
.hm-contact-draw .is-pan { left: 4vw; bottom: 8vh; width: clamp(240px, 22vw, 420px); transform: rotate(-12deg); }
.hm-contact-draw .is-spatula { right: 9vw; top: 6vh; width: clamp(70px, 6vw, 120px); transform: rotate(28deg); }
.hm-contact-draw .is-peanut { left: 12vw; top: 10vh; width: clamp(90px, 8vw, 150px); transform: rotate(-30deg); }
.hm-contact-draw .is-open { right: 6vw; bottom: 12vh; width: clamp(120px, 11vw, 200px); transform: rotate(14deg); }
#fl-inquiry > .hm-wide { position: relative; z-index: 1; }
.hm-contact { text-align: center; }
.hm-contact .hm-deco { display: inline-block; }
.hm-contact .hm-h2 { margin-left: auto; margin-right: auto; }
.hm-contact-cta { display: flex; justify-content: center; margin-top: 48px; }
/* 이메일·전화 — 버튼 아래 한 줄 */
.hm-contact-info { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 40px; margin: 28px 0 0; padding: 0; list-style: none; }
.hm-contact-info li { display: flex; flex-direction: column; align-items: center; gap: 4px; } /* 라벨 아래 주소 */
.hm-contact-info small { font-size: var(--fs-caption); line-height: 1.5; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.hm-contact-info a { font-family: "Lora", serif; font-size: var(--fs-body); letter-spacing: 0; color: #fff !important; }
.hm-contact-info a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hm-contact-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 48px; min-width: 220px; height: 56px; padding: 0 24px; font-size: var(--fs-body); font-weight: 600; color: var(--c-ink) !important; background: var(--c-paper); transition: background .3s, color .3s; }
.hm-contact-btn i { font-style: normal; transition: transform .4s var(--hm-ease); }
.hm-contact-btn:hover { background: var(--c-ink); color: var(--c-paper) !important; }
.hm-contact-btn:hover i { transform: translateX(6px); }

/* ==========================================================================
   나타나기(공통) — html.hm-motion 일 때만
   ========================================================================== */
.hm-motion [data-hm-reveal]:not([data-hm-reveal="stagger"]):not([data-hm-reveal="circle"]) { opacity: 0; transform: translateY(40px); transition: opacity 1.2s var(--hm-ease), transform 1.2s var(--hm-ease); }
.hm-motion [data-hm-reveal].is-in:not([data-hm-reveal="stagger"]):not([data-hm-reveal="circle"]) { opacity: 1; transform: none; }
.hm-motion [data-hm-reveal="stagger"] > * { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--hm-ease), transform 1s var(--hm-ease); transition-delay: calc(var(--hm-i, 0) * .12s + .2s); }
.hm-motion [data-hm-reveal="stagger"].is-in > * { opacity: 1; transform: none; }

/* 헤더·빠른 메뉴·푸터는 모든 페이지가 같이 쓰도록 css/hn-chrome.css 로 옮겼다 */
@media (max-width: 767px) {
    .hm-contact-draw .is-pan { width: 180px; left: -30px; bottom: 24px; }
    .hm-contact-draw .is-spatula { width: 56px; right: 24px; top: 32px; }
    .hm-contact-draw .is-peanut { width: 70px; left: 20px; top: 40px; }
    .hm-contact-draw .is-open { width: 100px; right: -10px; bottom: 120px; }
    .hm-contact-btn { width: 100%; }
}

/* ==========================================================================
   태블릿
   ========================================================================== */
@media (max-width: 1199px) {
    body:has(.hm-home) { --hm-gutter: 40px; }
    #fl-home.hm-home, .hm-home { --fs-display-l: 48px; --fs-display-m: 40px; --fs-h1: 32px; --fs-h2: 28px; --fs-h3: 24px; --fs-deco: 32px; }
    .hm-kv-stage { --hm-end-h: 64vh; --hm-end-right: calc(var(--hm-end-h) * .2 + 24px); }
    .hm-kv-slogan { font-size: 28px; }
}
@media (max-width: 1024px) {
    .hm-sticky-wrap { grid-template-columns: 1fr; }
    .hm-sticky-head { position: static; }
    /* 태블릿·모바일도 PC 와 같은 배치(그림 양옆 지시선) — 그림·지시선·글자를 줄인다 */
    .hm-plate-track { --art-h: 420px; }
    .hm-motion .hm-plate-track { --art-h: min(420px, 50svh); }
    .hm-plate { --call-gap: 48px; --call-fs: 18px; --call-max: 260px; }
    .hm-call p { font-size: 15px; }
    .hm-scenes { flex-direction: column; height: auto; }
    .hm-scenes > li { flex: none; height: 72vh; height: 72svh; }
    .hm-scenes > li + li { border-left: 0; border-top: 1px solid rgba(246, 242, 236, .2); }
    #hm-maker { grid-template-columns: 1fr; }
    .hm-maker-photo { height: auto; width: 100%; max-width: none; } /* 전체 폭, 사진 비율(4:5) 그대로 높이가 늘어난다 */
    .hm-maker-copy { padding: 96px var(--hm-gutter); }
}

/* ==========================================================================
   모바일
   ========================================================================== */
@media (max-width: 767px) {
    body:has(.hm-home) { --hm-gutter: 20px; }
    #fl-home.hm-home, .hm-home { --fs-display-l: 32px; --fs-display-m: 28px; --fs-h1: 28px; --fs-h2: 24px; --fs-h3: 20px; --fs-body-l: 16px; --fs-deco: 28px; }
    .hm-head { margin-bottom: 48px; }
    #hm-kv { height: 260vh; }
    .hm-kv-logo { top: 16vh; }
    .hm-kv-bg img { height: 64vh; }
    .hm-kv-logo { top: 19vh; }
    .hm-kv-stage { --hm-start-h: 66; --hm-start-y: 104; --hm-mid-y: 50; --hm-end-rot: 10; --hm-end-h: 34vh; --hm-end-right: 12vw; --hm-end-top: calc(50% + (var(--fl-hd-total, 72px) + 32px) / 2 - var(--hm-end-h) / 2); } /* 병 중심을 카피(헤더 아래 영역의 세로 중앙)에 맞춘다 */
    /* 카피는 오른쪽 병(기울어진 폭이 높이의 약 40%) 왼쪽 칸에만 놓고, 좁은 폭에서는 글자·버튼을 그 칸에 맞춰 줄인다 */
    .hm-kv-copy .hm-wide { padding-right: calc(var(--hm-end-right) + var(--hm-end-h) * .3 + 8px); }
    .hm-kv-sub .hm-actions { flex-wrap: nowrap; gap: 8px; }
    .hm-kv-sub .hm-actions .hm-btn { flex: 0 1 auto; min-width: 0; min-height: 44px; padding: 0 clamp(10px, 4.6vw, 18px); font-size: clamp(13px, 4vw, 14px); white-space: nowrap; }
    .hm-kv-art { display: none; }
    .hm-kv-title img { width: min(220px, 100%); }
    .hm-kv-slogan { margin-top: 12px; font-size: clamp(14px, 4.4vw, var(--fs-title)); white-space: nowrap; }
    .hm-kv-brand { margin-top: 20px; font-size: clamp(14px, 4.2vw, var(--fs-body)); }
    .hm-kv-copy { justify-content: flex-start; padding-top: calc(var(--fl-hd-total, 72px) + 32px); }
    .hm-kv-sub .hm-stamp { margin-top: 24px; }
    .hm-kv-sub .hm-actions { margin-top: 28px; }
    .hm-actions .hm-btn { flex: 1 1 100%; }
    .hm-products { grid-template-columns: 1fr; }
    .hm-product:nth-child(even) { margin-top: 0; }
    .hm-head-desc br { display: none; } /* 모바일은 자연 줄바꿈 */
    /* 모바일: 사진 위, 표 아래 */
    .hm-vs { grid-template-columns: 1fr; }
    #hm-gap { min-height: 0; display: block; padding: 72px 0; }
    .hm-vs-photo { width: 100%; } /* 사진 원본 비율 — 병이 잘리지 않게 */
    .hm-vs-table { margin-top: 32px; }
    .hm-vs-table th, .hm-vs-table td { height: 52px; padding: 0 4px; }
    .hm-vs-table thead th { height: 64px; font-size: var(--fs-caption); }
    .hm-vs-table tbody th { font-size: 14px; }
    .hm-fit { width: 18px; height: 18px; }
    .hm-vs-table .is-ours .hm-fit { width: 22px; height: 22px; }
    .hm-plate-track { --art-h: 340px; }
    /* 좁은 화면: 지시선을 짧게, 글자를 작게, 양옆 여백 일부까지 설명 칸으로 쓴다 */
    .hm-plate { --call-gap: 28px; --call-fs: 14px; margin-left: calc(8px - var(--hm-gutter)); margin-right: calc(8px - var(--hm-gutter)); }
    .hm-note-pin > .hm-plate { width: auto; }
    .hm-call p { margin-top: 4px; font-size: 12px; line-height: 1.5; }
    .hm-motion .hm-plate-track { --art-h: min(340px, 46svh); }
    .hm-motion #hm-note .hm-head { margin-bottom: 28px; }
    .hm-news a { grid-template-columns: 1fr 24px; row-gap: 4px; padding: 24px 0; }
    .hm-news time { grid-column: 1 / -1; }
    .hm-news span { font-size: var(--fs-body); white-space: normal; }
}
/* 높이가 짧은 가로 화면에서는 착즙 설명을 화면에 고정하지 않고 자연스럽게 읽게 한다. */
@media (max-height: 500px) {
    .hm-motion .hm-plate-track { height: auto; --art-h: 340px; }
    .hm-motion .hm-note-pin { position: relative; height: auto; padding-top: 64px; }
    .hm-motion .hm-note-pin > .hm-plate { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hm-home *, .hm-home *::before, .hm-home *::after { transition: none !important; animation: none !important; }
}

/* 제품 묶음(넛오일·넛스프레드): 묶음마다 왼쪽 제목·설명, 오른쪽 제품 2종 — 두 묶음 사이는 넉넉한 간격으로만 나눈다 */
.hm-product-group + .hm-product-group { margin-top: clamp(120px, 12vw, 200px); }