@charset "utf-8";
/* ==========================================================================
   해든네이처 공통 헤더·빠른 메뉴·푸터 — 메인 「식탁과 노트」와 서브 페이지가 같은 모양을 쓴다.
   - 상태 클래스(body.hm-hd-dark / hm-hd-solid)는 메인은 js/hn-home.js, 서브는 js/hn-chrome.js 가 붙인다.
   ========================================================================== */
body {
    --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;
    --c-caramel-text: #875a36;
    --c-amber: #b3977f;
    --c-linen: #ede7df;
    --c-paper: #f6f2ec;
    --hm-ease: cubic-bezier(.22, 1, .36, 1);
    --hm-gutter: 72px;
}
/* 메인은 body 글꼴(Lora·마루부리)을 물려받는다 — 서브의 기본 고딕 대신 같은 서체로 */
body #hd.fl-hd, body .gw-footer-container, body .ft-quick-container { font-family: "Lora", "MaruBuri", serif; letter-spacing: -0.01em; }
@media (max-width: 1024px) { body { --hm-gutter: 40px; } }
@media (max-width: 767px) { body { --hm-gutter: 20px; } }

/* ==========================================================================
   헤더 — 알약 바를 없애고 화면 위에 투명하게 얹는다
   ========================================================================== */
body #hd.fl-hd { transition: transform .7s var(--hm-ease); }
body #hd.fl-hd #hd_wrapper { margin: 0; padding: 0 var(--hm-gutter); border-radius: 0; background: transparent; box-shadow: none; transition: background .4s ease; }
/* 스크롤한 뒤에는 헤더 뒤에 반투명 바탕을 깔아 본문 글자와 겹쳐 보이지 않게 한다(어두운 섹션 위에서는 잉크색) */
body.hm-hd-solid #hd.fl-hd #hd_wrapper { background: rgba(237, 231, 223, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
body.hm-hd-solid.hm-hd-dark #hd.fl-hd #hd_wrapper { background: rgba(57, 42, 31, .82); }
body #hd.fl-hd #logo .light-mode-logo { display: block; opacity: 1 !important; }
body #hd.fl-hd #logo .dark-mode-logo { display: none; }
body.hm-hd-dark #hd.fl-hd #logo .light-mode-logo { display: none; }
body.hm-hd-dark #hd.fl-hd #logo .dark-mode-logo { display: block; }
/* 메뉴: 로고 바로 옆에 영문 대문자만 " / " 로 이어 보이고, 마우스를 올리면 같은 자리에서 한글로 바뀐다(레퍼런스: YOKANKA) */
body #hd.fl-hd #logo { padding-right: 40px; }
body #hd.fl-hd #gnb { flex: 0 1 auto; }
body #hd.fl-hd #gnb .gnb_wrap > ul { display: flex; align-items: center; }
body #hd.fl-hd #gnb .gnb_1dli { flex: none; display: flex; align-items: center; }
body #hd.fl-hd #gnb .gnb_1dli + .gnb_1dli::before { content: "/"; display: block; position: static; width: auto; height: auto; margin: 0 4px; background: none; font-family: "Lora", serif; font-size: 13px; color: var(--c-ink-300); }
body #hd.fl-hd #gnb .gnb_1da { position: relative; display: grid; place-items: center; width: auto; padding: 0 10px !important; color: var(--c-ink) !important; transition: color .3s; }
body #hd.fl-hd .gnb_1da_en,
body #hd.fl-hd .gnb_1da_ko { grid-area: 1 / 1; white-space: nowrap; transition: opacity .35s var(--hm-ease), transform .35s var(--hm-ease); }
body #hd.fl-hd .gnb_1da_en { font-family: "Lora", serif; font-style: normal; font-size: 13px; font-weight: 500; line-height: 1; text-transform: uppercase; letter-spacing: .12em; }
body #hd.fl-hd .gnb_1da_ko { font-family: "MaruBuri", serif; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: -0.038em; color: inherit; opacity: 0; transform: translateY(8px); }
body #hd.fl-hd #gnb .gnb_1dli:hover .gnb_1da_en,
body #hd.fl-hd #gnb .gnb_1da:focus-visible .gnb_1da_en { opacity: 0; transform: translateY(-8px); }
body #hd.fl-hd #gnb .gnb_1dli:hover .gnb_1da_ko,
body #hd.fl-hd #gnb .gnb_1da:focus-visible .gnb_1da_ko { opacity: 1; transform: none; }
/* 현재 페이지 메뉴: 밑줄 */
body #hd.fl-hd #gnb .gnb_1dli.is-current .gnb_1da_en { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
body #hd.fl-hd #gnb .gnb_1dli:hover > .gnb_1da { color: var(--c-caramel-text) !important; }
body.hm-hd-dark #hd.fl-hd #gnb .gnb_1da { color: var(--c-paper) !important; }
body.hm-hd-dark #hd.fl-hd #gnb .gnb_1dli + .gnb_1dli::before { color: rgba(246, 242, 236, .4); }
body.hm-hd-dark #hd.fl-hd #gnb .gnb_1dli:hover > .gnb_1da { color: var(--c-amber) !important; }
/* 오른쪽 네모 문의 버튼 — 전화 CTA 대신 */
body #hd.fl-hd .hd-tel-cta { display: none; }
body #hd.fl-hd .hd-inquiry-cta {
    display: inline-flex; align-items: center; justify-content: center; flex: none; margin-left: auto; min-height: 40px; padding: 0 20px;
    font-family: "MaruBuri", serif; font-size: 14px; font-weight: 600; letter-spacing: -0.038em; text-decoration: none;
    color: var(--c-ink); border: 1px solid var(--c-ink); border-radius: 0; transition: background .3s, color .3s, border-color .3s;
}
body #hd.fl-hd .hd-inquiry-cta:hover { color: var(--c-paper); background: var(--c-ink); }
body.hm-hd-dark #hd.fl-hd .hd-inquiry-cta { color: var(--c-paper); border-color: rgba(246, 242, 236, .7); }
body.hm-hd-dark #hd.fl-hd .hd-inquiry-cta:hover { color: var(--c-ink); background: var(--c-paper); }
@media (max-width: 1280px) {
    body #hd.fl-hd .hd-inquiry-cta { display: none; } /* 햄버거 메뉴가 나오는 폭에서는 메뉴 안의 문의하기로 충분하다 */
}
@media (max-width: 767px) {
}
body #hd.fl-hd .gnb_2dul { background: var(--c-paper); border: 1px solid var(--c-ink-200); border-radius: 0; }
body #hd.fl-hd .gnb_2da { font-family: "MaruBuri", serif; color: var(--c-ink) !important; letter-spacing: -0.038em; }
body #hd.fl-hd .gnb_2da:hover { color: var(--c-caramel-text) !important; }
body #hd.fl-hd #menu-btn { color: var(--c-ink); }
body.hm-hd-dark #hd.fl-hd #menu-btn { color: var(--c-paper); }
body #hd.fl-hd a.hd-tel-cta:link, body #hd.fl-hd a.hd-tel-cta:visited { color: var(--c-ink); }
body.hm-hd-dark #hd.fl-hd a.hd-tel-cta:link, body.hm-hd-dark #hd.fl-hd a.hd-tel-cta:visited { color: var(--c-paper); }

/* ==========================================================================
   빠른 메뉴(문의·맨 위로) — 둥근 알약 대신 각진 잉크·종이 버튼
   ========================================================================== */
/* 48px 정사각 — 아이콘 아래 작은 글자 */
body { --fl-quick-w: 48px; }
body ul.ft-quick-container { right: var(--hm-gutter); } /* 콘텐츠 오른쪽 끝선과 같은 세로줄 */
body .ft-quick-container { gap: 8px; --fl-quick-top-offset: 56px; } /* 48px + 간격 8px */
body .ft-quick-container > li { width: 48px; height: auto; box-shadow: none; }
body .ft-quick-container > li.quick-top { width: 48px; height: 48px; }
body .ft-quick-container > li.quick-panel { padding: 0; gap: 0; }
body .ft-quick-container .quick-panel-item { width: 46px; min-height: 46px; gap: 2px; }
body .ft-quick-container .quick-panel-item .fl-ico { width: 18px; height: 18px; }
body .ft-quick-container .quick-panel-label { font-size: 10px; line-height: 1; letter-spacing: -0.02em; } /* 아이콘 아래 작은 "문의" */
body .ft-quick-container > li.quick-panel { padding: 0; border-radius: 2px; background: var(--c-ink); border: 1px solid rgba(246, 242, 236, .32); }
body .ft-quick-container > li.quick-panel:hover { border-color: var(--c-amber); }
body .ft-quick-container .quick-panel-item { border-radius: 2px; font-family: "MaruBuri", serif; font-weight: 600; letter-spacing: -0.038em; }
body .ft-quick-container .quick-panel-item, body .ft-quick-container .quick-panel-item:link, body .ft-quick-container .quick-panel-item:visited { color: var(--c-paper); }
body .ft-quick-container > li.quick-top { border-radius: 2px; background: var(--c-paper); border: 1px solid var(--c-ink-300); }
body .ft-quick-container > li.quick-top:hover { background: var(--c-ink) !important; border-color: var(--c-ink); }
body .ft-quick-container > li.quick-top #gw-top_btn, body .ft-quick-container > li.quick-top #gw-top_btn i { color: var(--c-ink); }
body .ft-quick-container > li.quick-top:hover #gw-top_btn, body .ft-quick-container > li.quick-top:hover #gw-top_btn i { color: var(--c-paper); }
body .ft-quick-container > li.quick-panel--admin { background: var(--c-paper); border-color: var(--c-ink-300); }
body .ft-quick-container > li.quick-panel--admin .quick-panel-item { color: var(--c-ink); }

/* ==========================================================================
   푸터 — 잉크 바탕, 왼쪽 땅콩 잎 일러스트 + 세로 로고 + 슬로건 / 링크·SNS / 선 / 회사 정보·저작권
   (레퍼런스: Hoegaarden 공식 사이트 푸터)
   ========================================================================== */
body .fl-ft-inner { position: relative; overflow: hidden; padding: 96px var(--hm-gutter) 48px; border-radius: 0; background: var(--c-ink); color: var(--c-paper); font-family: var(--font-base); letter-spacing: -0.038em; }
body .fl-ft-inner > * { position: relative; max-width: none; margin-left: 0; margin-right: 0; }
body .hn-ft-brand { position: static; display: flex; align-items: center; gap: 40px; min-height: 220px; }
body .hn-ft-art { position: absolute; right: -40px; top: -40px; width: clamp(260px, 26vw, 420px); height: auto; opacity: .16; transform: rotate(14deg) scaleX(-1); pointer-events: none; } /* 오른쪽 위 가장자리 */
body .hn-ft-logo img { display: block; width: 150px; height: auto; }
/* 링크·SNS 줄 */
body .fl-ft-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 64px; padding-bottom: 16px; border-bottom: 1px solid rgba(246, 242, 236, .24); }
body .fl-ft-links { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; padding: 0; list-style: none; }
body .fl-ft-links a { font-size: 14px; font-weight: 400; color: var(--c-ink-100); text-decoration: none; transition: color .3s; }
body .fl-ft-links a.is-strong { font-weight: 600; color: var(--c-paper); }
body .fl-ft-links a:hover { color: var(--c-amber); }
body .fl-ft-sns-list { display: flex; align-items: center; gap: 12px; }
/* 인스타 버튼 — 오른쪽 빠른 메뉴와 같은 48px 정사각. 아이콘(i)은 fl-footer.css 가 크림색으로 고정해 호버 때 사라져서 색을 물려받게 한다 */
body .fl-ft-sns { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid rgba(246, 242, 236, .5); border-radius: 2px; background: none; color: var(--c-paper); font-size: 20px; transition: background .3s, color .3s, border-color .3s; }
body .fl-ft-sns i { color: inherit; font-size: 20px; }
body .fl-ft-sns:hover { background: var(--c-paper); border-color: var(--c-paper); color: var(--c-ink); }
/* 회사 정보·저작권 */
body .fl-ft-info { display: block; margin-top: 20px; padding-top: 0; }
body .fl-ft-info::before { display: none; } /* 위 링크 줄의 선과 겹치지 않게 */
/* 기존 푸터의 퀵 버튼 자리 여백 대신 양쪽 여백을 같게 */
body .fl-ft-top, body .fl-ft-info, body .fl-ft-copy { padding-left: 0; padding-right: 0; }
body .fl-ft-row { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 6px; }
body .fl-ft-row > div { display: flex; flex-direction: row; gap: 6px; }
body .fl-ft-row dt, body .fl-ft-row dd { margin: 0; font-size: 12px; line-height: 1.6; color: var(--c-ink-200); }
body .fl-ft-row dt { color: var(--c-ink-300); }
body .fl-ft-row a { color: inherit; }
body .fl-ft-copy { margin-top: 24px; font-family: "Lora", serif; font-size: 12px; letter-spacing: 0; text-align: right; color: var(--c-ink-200); }

/* 회사 정보(왼쪽)와 저작권(오른쪽)을 한 줄 높이에 맞춘다 — 저작권은 마지막 정보 줄(개인정보관리책임자)과 같은 선 */
@media (min-width: 768px) {
    body .fl-ft-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; }
    body .fl-ft-inner > .hn-ft-brand, body .fl-ft-inner > .fl-ft-top { grid-column: 1 / -1; width: 100%; }
    body .fl-ft-inner > .fl-ft-info { grid-column: 1; margin-left: 0; margin-right: 0; }
    body .fl-ft-inner > .fl-ft-copy { grid-column: 2; align-self: end; margin: 0 0 6px; line-height: 1.6; }
}
@media (max-width: 1024px) {
    body .hn-ft-brand { flex-wrap: wrap; gap: 24px; min-height: 0; }
    body .hn-ft-art { right: -40px; top: -60px; width: 220px; }
}
@media (max-width: 767px) {
    body .fl-ft-inner { padding-top: 72px; }
    body .hn-ft-logo img { width: 120px; }
    body .fl-ft-top { flex-direction: column; align-items: flex-start; margin-top: 56px; }
    body .fl-ft-copy { text-align: left; }
}


/* 전체 메뉴 패널(햄버거, 1280px 이하): 메인·기업개요와 같은 서체(영문 Lora·한글 마루부리)와 각진 모서리 */
@media (max-width: 1280px) {
    body #hd.fl-hd #mob-gnb .mob-1d-en { font-family: "Lora", serif; font-size: 13px; font-weight: 500; letter-spacing: .12em; color: var(--c-caramel-text); }
    body #hd.fl-hd #mob-gnb .mob-1d-ko { font-family: "MaruBuri", serif; font-weight: 700; letter-spacing: -0.038em; color: var(--c-ink); }
    /* 펼침 표시: +/− 상자 대신 손그림 땅콩 — 닫히면 껍질째, 펼치면 껍질이 열린 땅콩. 하위 메뉴 없이 바로 가는 항목은 화살표 그대로 */
    body #hd.fl-hd #mob-gnb .mob-1d-ico { border: 0; border-radius: 0; background: url(../img/hn/draw/peanut.svg) center / 30px auto no-repeat; color: var(--c-ink); transition: transform .4s ease; }
    body #hd.fl-hd #mob-gnb .mob-1d-ico .xi-plus, body #hd.fl-hd #mob-gnb .mob-1d-ico .xi-minus { display: none !important; }
    body #hd.fl-hd #mob-gnb .menu-list > ul > li.open .mob-1d-ico { background-image: url(../img/hn/draw/peanut-open.svg); background-size: 36px auto; }
    body #hd.fl-hd #mob-gnb .mob-1d-ico:has(.xi-plus) { filter: grayscale(1); opacity: .35; transition: transform .4s ease, opacity .3s ease; } /* 연한 회색 — 펼침 표시는 남기되 눈에 덜 띄게 */
    body #hd.fl-hd #mob-gnb .dep01:hover .mob-1d-ico { transform: rotate(-12deg); }
    body #hd.fl-hd #mob-gnb .dep01:hover .mob-1d-ico:has(.xi-plus), body #hd.fl-hd #mob-gnb .menu-list > ul > li.open .mob-1d-ico { opacity: .6; }
    body #hd.fl-hd #mob-gnb .mob-1d-ico:has(.xi-arrow-right) { background: none; }
    body #hd.fl-hd #mob-gnb .dep02 { border-radius: 0; }
    body #hd.fl-hd #mob-gnb .dep02 > li > a { border-radius: 0; font-family: "MaruBuri", serif; font-weight: 600; letter-spacing: -0.038em; }
    body #hd.fl-hd #mob-gnb .dep02 > li.is-current > a { font-weight: 700; }
    body #hd.fl-hd #mob-gnb .mob-gnb-foot { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } /* 전화번호가 없으면 문의 버튼 하나가 한 줄을 다 쓴다 */
    body #hd.fl-hd #mob-gnb .mob-gnb-foot a { border-radius: 0; font-family: "MaruBuri", serif; font-weight: 600; letter-spacing: -0.038em; }
    body #hd.fl-hd #mob-gnb a.mob-gnb-tel { font-family: "Lora", serif; letter-spacing: 0; background: var(--c-ink); }
    body #hd.fl-hd #mob-gnb a.mob-gnb-inquiry { border: 1px solid var(--c-ink); color: var(--c-ink) !important; }
    body #hd.fl-hd #mob-gnb a.mob-gnb-inquiry:hover { background: var(--c-ink); color: var(--c-paper) !important; }
}