@charset "utf-8";
/* 사업 영역 전용 — 공용 바탕·타이포·문의 영역은 hn-page.css. 색은 hn-shell.css 의 --hn-* 토큰만 쓴다.
   '세 식탁': ① 큰 제목 + 세 식탁 목차 ② 왼쪽 사진 액자는 화면에 머물며 바뀌고 오른쪽에 집·주방·매장 이야기가 지나간다
   ③ 잉크 바탕 — 큰 번호를 손그림 화살표로 잇는 함께하는 방법 ④ 문의. 1024px 이하는 장마다 사진이 위에 붙는다. */

/* ---------- ① 도입 ---------- */
.hn-biz .bz-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 64px; padding: 120px var(--ab-gutter) 120px; }
.hn-biz .bz-intro-title { margin-top: 12px; font-family: var(--hn-serif); font-size: clamp(36px, 4.2vw, 60px); line-height: 1.25; white-space: nowrap; font-weight: 600; letter-spacing: -.045em; color: var(--hn-ink); }
.hn-biz .bz-intro-title em { font-style: normal; color: var(--hn-caramel); }
.hn-biz .bz-intro-desc { max-width: 28em; margin-top: 32px; font-size: 18px; line-height: 1.8; color: var(--hn-ink-700); }
/* 목차 */
.hn-biz .bz-index { border-top: 1px solid var(--hn-ink); }
.hn-biz .bz-index a { display: grid; grid-template-columns: 44px 1fr auto 24px; align-items: baseline; gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--hn-ink-200); transition: padding .4s var(--hn-ease), color .3s; }
.hn-biz .bz-index-no { font: italic 500 18px/1 "Lora", serif; color: var(--hn-caramel); }
.hn-biz .bz-index-label { font-family: var(--hn-serif); font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -.038em; }
.hn-biz .bz-index-en { font: italic 14px/1 "Lora", serif; color: var(--hn-ink-500); }
.hn-biz .bz-index i { font-style: normal; color: var(--hn-ink-500); transition: transform .4s var(--hn-ease), color .3s; }
.hn-biz .bz-index a:hover { padding-left: 12px; color: var(--hn-caramel); }
.hn-biz .bz-index a:hover i { color: var(--hn-caramel); transform: translateY(4px); }

/* ---------- ② 세 식탁 ---------- */
.hn-biz .bz-tables { display: grid; grid-template-columns: 1fr 1fr; background: var(--hn-paper); }
.hn-biz .bz-frame { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--hn-ink); }
.hn-biz .bz-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1s var(--hn-ease), transform 1.6s var(--hn-ease); }
.hn-biz .bz-frame img.is-on { opacity: 1; transform: none; }
.hn-biz .bz-frame::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(57, 42, 31, .5)); pointer-events: none; }
.hn-biz .bz-table { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding: 120px clamp(40px, 6vw, 112px); }
.hn-biz .bz-table-photo { display: none; }
.hn-biz .bz-table-label { display: flex; align-items: baseline; gap: 12px; font-size: 15px; font-weight: 600; color: var(--hn-caramel); }
.hn-biz .bz-table-label span { font: italic 500 18px/1 "Lora", serif; }
.hn-biz .bz-table-title { margin-top: 20px; font-family: var(--hn-serif); font-size: clamp(30px, 3vw, 44px); line-height: 1.3; font-weight: 600; letter-spacing: -.04em; color: var(--hn-ink); }
.hn-biz .bz-table-desc { max-width: 30em; margin-top: 24px; font-size: 17px; line-height: 1.85; color: var(--hn-ink-700); }
.hn-biz .bz-table-cta { display: inline-flex; align-self: flex-start; align-items: center; gap: 40px; height: 56px; margin-top: 40px; padding: 0 24px; font-weight: 600; color: var(--hn-ink); border: 1px solid var(--hn-ink); transition: background .3s, color .3s; }
.hn-biz .bz-table-cta i { font-style: normal; transition: transform .4s var(--hn-ease); }
.hn-biz .bz-table-cta:hover { color: var(--hn-paper); background: var(--hn-ink); }
.hn-biz .bz-table-cta:hover i { transform: translateX(6px); }
.fl-reveal-on .hn-biz .bz-table .bz-table-title { transition-delay: .08s; }
.fl-reveal-on .hn-biz .bz-table .bz-table-desc { transition-delay: .16s; }
.fl-reveal-on .hn-biz .bz-table .bz-table-cta { transition-delay: .24s; }

/* ---------- ③ 함께하는 방법: 잉크 바탕 ---------- */
.hn-biz .bz-how { color: var(--hn-paper); background: var(--hn-ink); }
.hn-biz .bz-how-head { max-width: 1440px; margin: 0 auto; }
.hn-biz .bz-how-head .ab-deco { color: var(--hn-amber); }
.hn-biz .bz-how-title { margin-top: 8px; font-family: var(--hn-serif); font-size: clamp(30px, 3.4vw, 46px); line-height: 1.3; font-weight: 600; letter-spacing: -.038em; color: var(--hn-paper); }
.hn-biz .bz-how-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; max-width: 1440px; margin: 80px auto 0; }
.hn-biz .bz-how-steps li { position: relative; }
/* 속이 빈 큰 번호 */
.hn-biz .bz-how-no { display: block; font: italic 500 120px/1 "Lora", serif; color: transparent; -webkit-text-stroke: 1px var(--hn-amber); }
.hn-biz .bz-how-arrow { position: absolute; top: 44px; left: 96px; width: calc(100% - 72px); height: 30px; overflow: visible; }
.hn-biz .bz-how-arrow path { fill: none; stroke: var(--hn-amber); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 140; stroke-dashoffset: 0; }
.hn-biz .bz-how-steps b { display: block; margin-top: 28px; font-family: var(--hn-serif); font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -.038em; color: var(--hn-paper); }
.hn-biz .bz-how-steps p { margin-top: 12px; font-size: 15px; line-height: 1.75; color: var(--hn-ink-100); }
/* 나타나기 — 번호가 차례로, 화살표는 그려진다 */
.fl-reveal-on .hn-biz .bz-how-steps[data-fl-reveal]:not(.is-in) { opacity: 1; transform: none; }
.fl-reveal-on .hn-biz .bz-how-steps li { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--hn-ease), transform .8s var(--hn-ease); }
.fl-reveal-on .hn-biz .bz-how-steps.is-in li { opacity: 1; transform: none; }
.fl-reveal-on .hn-biz .bz-how-steps.is-in li:nth-child(2) { transition-delay: .35s; }
.fl-reveal-on .hn-biz .bz-how-steps.is-in li:nth-child(3) { transition-delay: .7s; }
.fl-reveal-on .hn-biz .bz-how-steps.is-in li:nth-child(4) { transition-delay: 1.05s; }
.fl-reveal-on .hn-biz .bz-how-arrow path { stroke-dashoffset: 140; transition: stroke-dashoffset .9s var(--hn-ease); }
.fl-reveal-on .hn-biz .bz-how-steps.is-in li:nth-child(1) .bz-how-arrow path { stroke-dashoffset: 0; transition-delay: .3s; }
.fl-reveal-on .hn-biz .bz-how-steps.is-in li:nth-child(2) .bz-how-arrow path { stroke-dashoffset: 0; transition-delay: .65s; }
.fl-reveal-on .hn-biz .bz-how-steps.is-in li:nth-child(3) .bz-how-arrow path { stroke-dashoffset: 0; transition-delay: 1s; }

/* 작은 노트북 폭에서도 제목이 오른쪽 목차 열로 넘치지 않도록 크기만 조정한다. */
@media (min-width: 1025px) and (max-width: 1366px) {
    .hn-biz .bz-intro-title { font-size: clamp(32px, 3.8vw, 52px); }
}

@media (max-width: 1024px) {
    .hn-biz .bz-intro { grid-template-columns: 1fr; gap: 56px; padding-top: 96px; padding-bottom: 96px; }
    .hn-biz .bz-tables { grid-template-columns: 1fr; }
    .hn-biz .bz-frame { display: none; }
    .hn-biz .bz-table { min-height: 0; padding: 0 0 96px; }
    .hn-biz .bz-table > :not(.bz-table-photo) { margin-left: var(--ab-gutter); margin-right: var(--ab-gutter); }
    .hn-biz .bz-table-photo { display: block; margin: 0 0 48px; aspect-ratio: 16 / 10; overflow: hidden; }
    .hn-biz .bz-table-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .hn-biz .bz-table-cta { margin-left: var(--ab-gutter); }
    .hn-biz .bz-how-steps { grid-template-columns: 1fr 1fr; row-gap: 64px; }
    .hn-biz .bz-how-steps li:nth-child(2) .bz-how-arrow { display: none; }
}
@media (max-width: 767px) {
    .hn-biz .bz-intro { padding-top: 72px; padding-bottom: 72px; gap: 40px; }
    .hn-biz .bz-intro-title { font-size: 28px; white-space: normal; }
    .hn-biz .bz-br { display: none; }
    .hn-biz .bz-intro-desc { font-size: 16px; margin-top: 24px; }
    .hn-biz .bz-index-label { font-size: 18px; }
    .hn-biz .bz-table { padding-bottom: 72px; }
    .hn-biz .bz-table-photo { aspect-ratio: 4 / 3; margin-bottom: 36px; }
    .hn-biz .bz-table-title { font-size: 26px; }
    .hn-biz .bz-table-desc { font-size: 15px; }
    .hn-biz .bz-how-steps { grid-template-columns: 1fr; gap: 40px; margin-top: 48px; }
    .hn-biz .bz-how-steps li { display: grid; grid-template-columns: 72px 1fr; column-gap: 16px; }
    .hn-biz .bz-how-no { grid-row: span 2; font-size: 72px; }
    .hn-biz .bz-how-steps b { margin-top: 8px; font-size: 20px; }
    .hn-biz .bz-how-arrow { display: none; }
}