@charset "utf-8";
/* 「식탁과 노트」 편집형 서브 페이지 공용 바탕 — 기업개요(about)·비전(vision)이 함께 쓴다.
   색은 hn-shell.css 의 --hn-* 토큰만 쓴다. ab-* 는 공용 편집 컴포넌트(라벨·제목·섹션·문의 영역) 이름이다.
   페이지 고유 섹션은 각 페이지 css(about.css, vision.css)에 둔다. */

#container > [id].hn-page { padding-bottom: 0; } /* gw.css 의 서브 하단 여백(170px) 대신 문의 영역이 푸터에 바로 붙는다 */
.hn-page { --ab-gutter: 72px; --ab-line: 36px; color: var(--hn-ink); background: var(--hn-linen); font-family: var(--hn-serif); font-size: 16px; line-height: 1.58; letter-spacing: -.01em; overflow: clip; }
.hn-page *, .hn-page *::before, .hn-page *::after { box-sizing: border-box; }
.hn-page :where(h2, h3, h4, p, dl, dd, ol, ul, figure) { margin: 0; padding: 0; }
.hn-page :where(ol, ul) { list-style: none; }
.hn-page :where(p, li, dt, dd, h2, h3, h4) { word-break: keep-all; overflow-wrap: break-word; }
.hn-page a { color: inherit; text-decoration: none; }
.hn-page [lang="en"] { letter-spacing: 0; }

/* 공통 타이포 */
.hn-page .ab-label { font: 600 12px/1.5 "Lora", serif; letter-spacing: .12em; text-transform: uppercase; color: var(--hn-caramel); }
.hn-page .ab-h1 { font-family: var(--hn-serif); font-size: 44px; line-height: 1.3; font-weight: 600; letter-spacing: -.038em; color: var(--hn-ink); }
.hn-page .ab-h2 { font-family: var(--hn-serif); font-size: 36px; line-height: 1.35; font-weight: 600; letter-spacing: -.038em; color: var(--hn-ink); }
.hn-page .ab-h3 { font-family: var(--hn-serif); font-size: 24px; line-height: 1.4; font-weight: 600; letter-spacing: -.038em; color: var(--hn-ink); }
.hn-page .ab-desc { font-size: 18px; line-height: 1.75; color: var(--hn-ink); }
.hn-page .ab-deco { font-family: "Homemade Apple", cursive; font-size: 32px; line-height: 1.3; letter-spacing: 0; color: var(--hn-caramel); }
.hn-page .ab-sec { padding: 144px var(--ab-gutter); }

/* ---------- 문의: 메인 문의 영역의 축소판(크래프트 + 손그림) ---------- */
.hn-page .ab-contact { position: relative; overflow: hidden; text-align: center; color: var(--hn-paper); background: var(--hn-kraft); }
.hn-page .ab-contact-draw { position: absolute; inset: 0; pointer-events: none; }
.hn-page .ab-contact-draw img { position: absolute; height: auto; max-width: none; opacity: .16; }
.hn-page .ab-contact-draw .is-pan { left: 4vw; bottom: 40px; width: clamp(200px, 18vw, 340px); transform: rotate(-12deg); }
.hn-page .ab-contact-draw .is-spatula { right: 10vw; top: 48px; width: clamp(60px, 5vw, 100px); transform: rotate(28deg); }
.hn-page .ab-contact-in { position: relative; }
.hn-page .ab-contact .ab-deco { color: var(--hn-linen); }
.hn-page .ab-contact .ab-h2 { color: var(--hn-paper); }
.hn-page .ab-contact-sub { margin-top: 16px; font-size: 16px; line-height: 1.7; color: var(--hn-linen); }
.hn-page .ab-contact-cta { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 40px; }
.hn-page .ab-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 48px; min-width: 220px; height: 56px; padding: 0 24px; font-weight: 600; color: var(--hn-ink); background: var(--hn-paper); transition: background .3s, color .3s; }
.hn-page .ab-btn i { font-style: normal; transition: transform .4s var(--hn-ease); }
.hn-page .ab-btn:hover { color: var(--hn-paper); background: var(--hn-ink); }
.hn-page .ab-btn:hover i { transform: translateX(6px); }
.hn-page .ab-link { padding-bottom: 2px; font-weight: 600; border-bottom: 1px solid currentColor; }
.hn-page .ab-link:hover { color: var(--hn-linen); }
.hn-page .ab-contact a:focus-visible { outline-color: var(--hn-paper); }

/* 나타나기 — fl-sub.js 가 html.fl-reveal-on 을 붙인다 */
.fl-reveal-on .hn-page [data-fl-reveal] { transition: opacity .9s var(--hn-ease), transform .9s var(--hn-ease); }
.fl-reveal-on .hn-page [data-fl-reveal]:not(.is-in) { opacity: 0; transform: translateY(32px); }

@media (max-width: 1024px) {
    .hn-page { --ab-gutter: 40px; }
    .hn-page .ab-sec { padding-top: 112px; padding-bottom: 112px; }
}
@media (max-width: 767px) {
    .hn-page { --ab-gutter: 20px; --ab-line: 30px; font-size: 15px; }
    .hn-page .ab-sec { padding-top: 88px; padding-bottom: 88px; }
    .hn-page .ab-h1 { font-size: 30px; }
    .hn-page .ab-h2 { font-size: 26px; }
    .hn-page .ab-desc { font-size: 16px; }
    .hn-page .ab-deco { font-size: 24px; }
    .hn-page .ab-contact-sub { font-size: 15px; }
    .hn-page .ab-contact-draw .is-pan { width: 160px; left: -30px; bottom: 20px; }
    .hn-page .ab-contact-draw .is-spatula { width: 48px; right: 20px; top: 28px; }
    .hn-page .ab-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .hn-page [data-fl-reveal] { opacity: 1 !important; transform: none !important; }
}