@charset "utf-8";
/* 해든네이처 메인(index.php) — 크림·샌드·딥 브라운 밴드를 번갈아 쓰고, 제목의 둘째 줄을 캐러멜로 강조한다.
   색은 css/freshlab-brand.css 의 --fl-* 토큰만 사용한다. */

.hn-home { background: var(--fl-cream); color: var(--fl-ink); }
.hn-home em { font-style: normal; }

/* 섹션 배경 3종 */
.hn-cream, .hn-sand, .hn-dark { padding: var(--fl-sec-pad) 0; }
.hn-cream { background: var(--fl-cream); }
.hn-sand { background: var(--fl-sand); }
.hn-dark { background: var(--fl-dark); color: var(--fl-cream); --fl-focus: var(--fl-white); }

/* 섹션 머리: 라벨(점+영문) / 제목(둘째 줄 캐러멜) / 리드 */
.hn-head { max-width: 760px; margin-bottom: 56px; }
.hn-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.hn-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fl-font-en); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fl-primary); }
.hn-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hn-title { margin-top: 14px; font-size: clamp(28px, 3.2vw, 44px); font-weight: 800; line-height: 1.3; letter-spacing: -0.03em; color: var(--fl-ink); word-break: keep-all; }
.hn-title em { color: var(--fl-primary); }
.hn-lead { margin-top: 18px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.75; color: var(--fl-ink-2); word-break: keep-all; }
.hn-dark .hn-label, .hn-dark .hn-title em { color: var(--fl-mango-on-dark); }
.hn-dark .hn-title { color: var(--fl-white); }
.hn-dark .hn-lead { color: color-mix(in srgb, var(--fl-cream) 78%, transparent); }
.hn-center { margin-top: 48px; text-align: center; }
.hn-center.hn-dark, .hn-cta .hn-center { margin-top: 0; }

/* 알약 태그 (캐러멜 바탕) */
.hn-tag, .hn-chip { display: inline-block; padding: 7px 16px; border-radius: 999px; background: var(--fl-primary); color: var(--fl-white); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.hn-tag { font-family: var(--fl-font-en); text-transform: uppercase; letter-spacing: .12em; }

/* ① 히어로 */
#hn-hero { padding: calc(var(--fl-header-h) + 72px) 0 0; background: var(--fl-cream); overflow: hidden; }
.hn-hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; }
.hn-hero-title { margin-top: 22px; font-size: clamp(36px, 4.6vw, 64px); font-weight: 800; line-height: 1.22; letter-spacing: -0.04em; color: var(--fl-ink); word-break: keep-all; }
.hn-hero-title em { color: var(--fl-primary); }
.hn-hero-lead { margin-top: 24px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.8; color: var(--fl-ink-2); word-break: keep-all; }
.hn-hero-lead strong { color: var(--fl-ink); font-weight: 700; }
.hn-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hn-hero-actions.is-center { justify-content: center; }
.hn-hero-actions .fl-btn { min-width: 150px; }
.hn-hero-actions .fl-btn--line { border-color: var(--fl-ink); }

.hn-hero-visual { position: relative; margin: 0; aspect-ratio: 1 / 1.05; max-width: 560px; justify-self: center; width: 100%; }
.hn-hero-disc { position: absolute; inset: 8% 4% 4%; border-radius: 50%; background: radial-gradient(circle at 50% 45%, var(--fl-white) 0, var(--fl-sand) 70%); }
.hn-bottle { position: absolute; left: 50%; bottom: 4%; width: 68%; transform: translateX(-50%); }
.hn-peanut { position: absolute; width: 11%; filter: drop-shadow(0 6px 8px rgba(42, 26, 16, .15)); }
.hn-peanut.is-a { left: 6%; bottom: 6%; transform: rotate(-38deg); }
.hn-peanut.is-b { left: 17%; bottom: 2%; width: 9%; transform: rotate(24deg); }
.hn-peanut.is-c { right: 8%; bottom: 5%; transform: rotate(62deg); }
.hn-hero-badge { position: absolute; right: 2%; top: 14%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 132px; height: 132px; border-radius: 50%; background: var(--fl-dark); color: var(--fl-cream); text-align: center; box-shadow: var(--fl-shadow-lg); }
.hn-hero-badge b { font-family: var(--fl-font-en); font-size: 22px; font-weight: 800; color: var(--fl-mango-on-dark); letter-spacing: -0.02em; }
.hn-hero-badge span { margin-top: 4px; font-size: 13px; }

/* 히어로 아래 스펙 4칸 (벤치: 원재료·첨가물·재배방식·인증 줄) */
.hn-spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 64px; margin-bottom: 0; border-top: 2px solid var(--fl-ink); }
.hn-spec li { padding: 26px 24px 30px; border-right: 1px solid var(--fl-line); list-style: none; }
.hn-spec li:last-child { border-right: 0; }
.hn-spec-label { display: block; font-size: 13px; font-weight: 700; color: var(--fl-primary); }
.hn-spec strong { display: block; margin-top: 8px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; letter-spacing: -0.02em; color: var(--fl-ink); }
.hn-spec small { display: block; margin-top: 6px; font-size: 14px; color: var(--fl-ink-3); }

/* ② 01·02·03 */
.hn-num-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.hn-num-list li { padding: 36px 32px 40px; border: 1px solid rgba(248, 242, 235, .14); border-radius: var(--fl-radius); background: rgba(248, 242, 235, .03); }
.hn-num { display: block; font-family: var(--fl-font-en); font-size: 56px; font-weight: 800; line-height: 1; color: var(--fl-mango-on-dark); }
.hn-num-list .hn-chip { margin-top: 20px; }
.hn-num-list h3 { margin-top: 16px; font-size: 21px; font-weight: 800; color: var(--fl-white); word-break: keep-all; }
.hn-num-list p { margin-top: 12px; font-size: 15px; line-height: 1.75; color: color-mix(in srgb, var(--fl-cream) 72%, transparent); word-break: keep-all; }

/* ③ 비교표 */
.hn-table-wrap { overflow-x: auto; border-radius: var(--fl-radius); background: var(--fl-white); box-shadow: var(--fl-shadow); }
.hn-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; }
.hn-table th, .hn-table td { padding: 20px 22px; border-bottom: 1px solid var(--fl-line); text-align: left; vertical-align: middle; word-break: keep-all; }
.hn-table thead th { font-size: 15px; font-weight: 800; color: var(--fl-ink); background: var(--fl-ice); }
.hn-table thead th small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--fl-ink-3); }
.hn-table tbody th { width: 16%; font-weight: 700; color: var(--fl-ink-2); }
.hn-table td { color: var(--fl-ink-2); }
.hn-table .is-ours { background: var(--fl-dark); color: var(--fl-cream); font-weight: 700; }
.hn-table thead .is-ours { color: var(--fl-mango-on-dark); }
.hn-table thead .is-ours small { color: color-mix(in srgb, var(--fl-cream) 70%, transparent); }
.hn-table tbody tr:last-child th, .hn-table tbody tr:last-child td { border-bottom: 0; }
.hn-table td.is-ours { border-bottom-color: rgba(248, 242, 235, .12); }
.hn-note { margin-top: 18px; font-size: 13px; line-height: 1.7; color: var(--fl-ink-3); word-break: keep-all; }

/* ④ 조리온도 막대 */
.hn-temp-bar { display: grid; grid-template-columns: 1fr 1.6fr 1fr; overflow: hidden; border-radius: var(--fl-radius); box-shadow: var(--fl-shadow); }
.hn-temp-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 190px; padding: 24px 16px; text-align: center; }
.hn-temp-zone b { font-family: var(--fl-font-en); font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; }
.hn-temp-zone span { margin-top: 8px; font-size: 17px; font-weight: 700; }
.hn-temp-zone small { margin-top: 6px; font-size: 14px; opacity: .8; }
.hn-temp-zone.is-low { background: var(--fl-sand); color: var(--fl-ink-2); }
.hn-temp-zone.is-mid { position: relative; background: linear-gradient(90deg, var(--fl-mango), var(--fl-primary-dark)); color: var(--fl-white); }
.hn-temp-zone.is-mid::before { content: "HAEDEN NATURE"; position: absolute; top: 16px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-family: var(--fl-font-en); font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.hn-temp-zone.is-high { background: var(--fl-dark); color: var(--fl-cream); }

/* ⑤ 공정 4단계 */
.hn-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.hn-steps li { position: relative; padding: 32px 26px 34px; border-radius: var(--fl-radius); background: rgba(248, 242, 235, .05); border: 1px solid rgba(248, 242, 235, .12); }
.hn-steps li + li::before { content: ""; position: absolute; left: -16px; top: 50%; width: 12px; height: 12px; border-top: 2px solid var(--fl-mango-on-dark); border-right: 2px solid var(--fl-mango-on-dark); transform: translateY(-50%) rotate(45deg); }
.hn-step-no { font-family: var(--fl-font-en); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fl-mango-on-dark); }
.hn-steps svg { display: block; width: 48px; height: 48px; margin-top: 18px; color: var(--fl-cream); }
.hn-steps h3 { margin-top: 18px; font-size: 19px; font-weight: 800; color: var(--fl-white); }
.hn-steps p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: color-mix(in srgb, var(--fl-cream) 70%, transparent); word-break: keep-all; }

/* ⑥ 목표 고객 카드 */
.hn-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.hn-cards li { padding: 34px 30px 38px; border-radius: var(--fl-radius); background: var(--fl-white); border: 1px solid var(--fl-line); border-top: 4px solid var(--fl-primary); }
.hn-card-tag { font-family: var(--fl-font-en); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fl-primary); }
.hn-cards h3 { margin-top: 12px; font-size: 21px; font-weight: 800; color: var(--fl-ink); }
.hn-cards p { margin-top: 12px; font-size: 15px; line-height: 1.75; color: var(--fl-ink-2); word-break: keep-all; }

/* ⑦ 소식 — fl-main.css 의 fl-news 를 쓰되 머리 선만 브라운으로 */
.hn-home #fl-news { background: var(--fl-sand); }

/* ⑧ FAQ */
.hn-faq-layout { display: grid; grid-template-columns: 360px 1fr; gap: 64px; align-items: start; }
.hn-faq-layout .hn-head { margin-bottom: 0; }
.hn-faq-list { border-top: 2px solid var(--fl-ink); }
.hn-faq-list details { border-bottom: 1px solid var(--fl-line); }
.hn-faq-list summary { position: relative; display: flex; gap: 12px; padding: 24px 48px 24px 4px; font-size: 18px; font-weight: 700; color: var(--fl-ink); cursor: pointer; list-style: none; word-break: keep-all; }
.hn-faq-list summary::-webkit-details-marker { display: none; }
.hn-faq-list summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 400; color: var(--fl-primary); }
.hn-faq-list details[open] summary::after { content: "−"; }
.hn-q { font-family: var(--fl-font-en); font-weight: 800; color: var(--fl-primary); }
.hn-faq-list details p { padding: 0 48px 26px 34px; font-size: 16px; line-height: 1.8; color: var(--fl-ink-2); word-break: keep-all; }

/* ⑨ 문의 CTA */
.hn-cta { position: relative; overflow: hidden; }
.hn-cta .hn-title { margin-left: auto; margin-right: auto; }
.hn-cta .hn-hero-actions { margin-top: 36px; }
.hn-cta .hn-peanut { width: 90px; opacity: .9; }
.hn-peanut.is-cta-a { left: 8%; top: 22%; transform: rotate(-30deg); }
.hn-peanut.is-cta-b { right: 9%; bottom: 18%; width: 72px; transform: rotate(40deg); }

/* 반응형 */
@media (max-width: 1024px) {
    .hn-hero-inner { grid-template-columns: 1fr; }
    .hn-hero-visual { max-width: 460px; }
    .hn-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hn-spec li:nth-child(2) { border-right: 0; }
    .hn-spec li:nth-child(-n+2) { border-bottom: 1px solid var(--fl-line); }
    .hn-num-list, .hn-cards { grid-template-columns: 1fr; }
    .hn-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hn-steps li + li::before { display: none; }
    .hn-faq-layout { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 576px) {
    #hn-hero { padding-top: calc(var(--fl-header-h) + 40px); }
    .hn-head { margin-bottom: 36px; }
    .hn-hero-actions .fl-btn { flex: 1 1 0; min-width: 0; }
    .hn-hero-badge { width: 104px; height: 104px; }
    .hn-hero-badge b { font-size: 18px; }
    .hn-spec li { padding: 20px 14px 22px; }
    .hn-num { font-size: 44px; }
    .hn-num-list li, .hn-cards li { padding: 28px 22px 30px; }
    .hn-temp-bar { grid-template-columns: 1fr; }
    .hn-temp-zone { min-height: 130px; }
    .hn-temp-zone.is-mid { min-height: 170px; padding-top: 48px; }
    .hn-steps { grid-template-columns: 1fr; }
    .hn-faq-list summary { font-size: 16px; padding-right: 40px; }
    .hn-faq-list details p { padding: 0 8px 22px 30px; font-size: 15px; }
    .hn-cta .hn-peanut { width: 56px; }
    .hn-peanut.is-cta-a { top: 6%; left: 4%; }
    .hn-peanut.is-cta-b { bottom: 4%; right: 4%; width: 48px; }
}