@charset "utf-8";
/* 브랜드 스토리 전용 — 공용 바탕·타이포·문의 영역은 hn-page.css. 색은 hn-shell.css 의 --hn-* 토큰만 쓴다.
   '사진 이야기': 표지(잉크) → 화면 높이의 네 장(반쪽 사진 + 이야기, 좌우 번갈아)이 아래로 이어진다
   → 햇볕 사진 위 맺음 문장 → 문의. */

/* ---------- 넘김 영역 ---------- */
.hn-story .bs-reel { position: relative; background: var(--hn-paper); }
.hn-story .bs-stage { position: relative; }
.hn-story .bs-track { display: flex; flex-direction: column; }
.hn-story .bs-panel { position: relative; }


/* 표지 — 잉크 바탕 큰 질문 */
.hn-story .bs-panel.is-cover { display: flex; align-items: center; padding: 96px var(--ab-gutter) 120px; color: var(--hn-paper); background: var(--hn-ink); }
.hn-story .bs-panel.is-cover { justify-content: space-between; gap: 64px; }
.hn-story .bs-cover-in { max-width: 880px; }
/* 표지 오른쪽 — 부엌 사진을 폴라로이드로, 위에 갈색 테이프 */
.hn-story .bs-cover-photos { position: relative; flex: none; width: clamp(360px, 38vw, 560px); height: clamp(380px, 36vw, 520px); margin-right: 2vw; }
.hn-story .bs-cover-photo { position: absolute; margin: 0; background: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.hn-story .bs-cover-photo img { display: block; width: 100%; object-fit: cover; }
/* 뒤: 부엌 사진 왼쪽 위로 기울여 / 앞: 식탁 사진 오른쪽 아래에 겹쳐 — 둘 다 정사각 */
.hn-story .bs-cover-photo.is-back { left: 0; top: 0; width: 56%; padding: 12px 12px 44px; transform: rotate(-6deg); }
.hn-story .bs-cover-photo.is-back img { aspect-ratio: 1; object-position: 40% 50%; }
.hn-story .bs-cover-photo.is-front { right: 0; bottom: 0; z-index: 1; width: 64%; padding: 14px 14px 52px; transform: rotate(4deg); }
.hn-story .bs-cover-photo.is-front img { aspect-ratio: 1; }
.hn-story .bs-tape { position: absolute; top: -18px; left: 50%; width: 130px; height: 34px; margin-left: -65px; background: rgba(140, 106, 82, .85); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transform: rotate(-4deg); }
.fl-reveal-on .hn-story .bs-cover-photos[data-fl-reveal]:not(.is-in) { transform: none; }
.fl-reveal-on .hn-story .bs-cover-photos .bs-cover-photo { transition: transform 1.1s var(--hn-ease), opacity .9s var(--hn-ease); }
.fl-reveal-on .hn-story .bs-cover-photos:not(.is-in) .is-back { opacity: 0; transform: rotate(-14deg) translate(-30px, 30px); }
.fl-reveal-on .hn-story .bs-cover-photos:not(.is-in) .is-front { opacity: 0; transform: rotate(12deg) translate(30px, 40px); }
.fl-reveal-on .hn-story .bs-cover-photos.is-in .is-front { transition-delay: .25s; }
.hn-story .bs-cover-in .ab-deco { color: var(--hn-amber); }
.hn-story .bs-cover-title { margin-top: 12px; font-family: var(--hn-serif); font-size: clamp(40px, 5vw, 68px); line-height: 1.25; font-weight: 600; letter-spacing: -.04em; color: var(--hn-paper); }
.hn-story .bs-cover-title em { font-style: normal; color: var(--hn-amber); }
.hn-story .bs-cover-lead { margin-top: 32px; font-size: 18px; line-height: 1.8; color: var(--hn-ink-100); }

/* 챕터 — 반쪽 사진 + 이야기, 장마다 좌우 번갈아 */
.hn-story .bs-panel.is-chapter { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; background: var(--hn-paper); }
.hn-story .bs-panel.is-chapter:nth-child(odd) { background: var(--hn-linen); }
.hn-story .bs-panel-photo { position: relative; overflow: hidden; margin: 0; min-height: 360px; }
.hn-story .bs-panel-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hn-story .bs-panel.is-flip .bs-panel-photo { order: 2; }
.hn-story .bs-panel-text { display: flex; flex-direction: column; justify-content: center; padding: 120px clamp(40px, 6vw, 112px) 140px; }
.hn-story .bs-panel-no { font: italic 500 16px/1.4 "Lora", serif; color: var(--hn-ink-500); }
.hn-story .bs-panel-no span { margin-right: 10px; font-size: 48px; line-height: 1; vertical-align: -6px; color: var(--hn-caramel); }
.hn-story .bs-panel-title { margin-top: 20px; font-family: var(--hn-serif); font-size: clamp(30px, 3vw, 42px); line-height: 1.3; font-weight: 600; letter-spacing: -.038em; color: var(--hn-ink); }
.hn-story .bs-panel-text > p:not(.bs-panel-no) { max-width: 30em; margin-top: 24px; font-size: 17px; line-height: 1.85; color: var(--hn-ink); }
.hn-story .bs-panel-text > p + p:not(.bs-note) { margin-top: 16px; }
.hn-story .bs-panel-text b { font-weight: 600; color: var(--hn-caramel); }
.hn-story .bs-panel-text strong { font-weight: 700; color: var(--hn-ink); }
/* 부엌에서 겪는 장면 — 장식 없이 글자만, 한 줄씩 */
.hn-story .bs-scenes { margin-top: 32px; }
.hn-story .bs-scenes li { font-family: var(--hn-serif); font-size: 19px; line-height: 1.6; font-weight: 600; letter-spacing: -.03em; color: var(--hn-ink); }
.hn-story .bs-scenes li + li { margin-top: 12px; }
.hn-story .bs-panel-text > .bs-question { font-family: var(--hn-serif); font-size: 20px !important; font-weight: 600; color: var(--hn-caramel) !important; }
.hn-story .bs-panel-text > .bs-note { margin-top: 20px; font-size: 14px !important; color: var(--hn-ink-500) !important; }
.hn-story .bs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 32px; }
.hn-story .bs-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 48px; min-width: 200px; height: 56px; padding: 0 24px; font-weight: 600; color: var(--hn-ink); background: transparent; border: 1px solid var(--hn-ink); transition: background .3s, color .3s; } /* 라인 버튼 */
.hn-story .bs-btn i { font-style: normal; transition: transform .4s var(--hn-ease); }
.hn-story .bs-btn:hover { color: var(--hn-paper); background: var(--hn-ink); }
.hn-story .bs-btn:hover i { transform: translateX(6px); }
.hn-story .bs-link:hover { color: var(--hn-caramel); }

/* 나타나기 — 장 자체는 제자리, 사진은 확대가 풀리고 글은 차례로 떠오른다(fl-sub.js 가 .is-in) */
.fl-reveal-on .hn-story .bs-panel[data-fl-reveal]:not(.is-in) { opacity: 1; transform: none; }
.fl-reveal-on .hn-story .bs-panel-photo img { transform: scale(1.1); transition: transform 1.6s var(--hn-ease); }
.fl-reveal-on .hn-story .bs-panel.is-in .bs-panel-photo img { transform: none; }
.fl-reveal-on .hn-story .bs-panel-text > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--hn-ease), transform .7s var(--hn-ease); }
.fl-reveal-on .hn-story .bs-panel.is-in .bs-panel-text > * { opacity: 1; transform: none; }
.fl-reveal-on .hn-story .bs-panel.is-in .bs-panel-text > :nth-child(2) { transition-delay: .1s; }
.fl-reveal-on .hn-story .bs-panel.is-in .bs-panel-text > :nth-child(3) { transition-delay: .2s; }
.fl-reveal-on .hn-story .bs-panel.is-in .bs-panel-text > :nth-child(4) { transition-delay: .3s; }
.fl-reveal-on .hn-story .bs-panel.is-in .bs-panel-text > :nth-child(5) { transition-delay: .4s; }


/* ---------- 맺음 문장: 햇볕 사진 위 ---------- */
.hn-story .bs-closing { position: relative; display: flex; align-items: center; justify-content: center; min-height: 72vh; padding: 144px var(--ab-gutter); overflow: hidden; text-align: center; background: var(--hn-ink); }
.hn-story .bs-closing-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.hn-story .bs-closing::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(57, 42, 31, .55), rgba(57, 42, 31, .75)); }
.hn-story .bs-closing-quote { position: relative; z-index: 1; font-family: var(--hn-serif); font-size: clamp(30px, 3.8vw, 52px); line-height: 1.45; font-weight: 600; letter-spacing: -.038em; color: var(--hn-paper); }
.hn-story .bs-closing-quote em { font-style: normal; color: var(--hn-amber); }

@media (max-width: 1024px) {
    .hn-story .bs-panel.is-cover { padding-top: 80px; padding-bottom: 96px; }
    .hn-story .bs-panel.is-chapter { min-height: 0; }
    .hn-story .bs-panel.is-chapter { grid-template-columns: 1fr; }
    .hn-story .bs-panel.is-flip .bs-panel-photo { order: 0; }
    .hn-story .bs-panel-photo { aspect-ratio: 4 / 3; min-height: 0; }
    .hn-story .bs-panel-text { padding: 72px var(--ab-gutter) 96px; }
}
@media (max-width: 767px) {
    .hn-story .bs-br { display: none; }
    .hn-story .bs-panel.is-cover { flex-direction: column; align-items: flex-start; gap: 56px; padding: 64px var(--ab-gutter) 88px; }
    .hn-story .bs-cover-photos { width: 100%; height: 340px; margin: 0; }
    .hn-story .bs-cover-photo.is-back { padding: 8px 8px 30px; }
    .hn-story .bs-cover-photo.is-front { padding: 10px 10px 36px; }
    .hn-story .bs-tape { width: 90px; height: 26px; margin-left: -45px; top: -13px; }
    .hn-story .bs-cover-title { font-size: 32px; }
    .hn-story .bs-cover-lead { font-size: 15px; }
    .hn-story .bs-panel-text { padding: 56px var(--ab-gutter) 72px; }
    .hn-story .bs-panel-no span { font-size: 36px; }
    .hn-story .bs-panel-title { font-size: 26px; }
    .hn-story .bs-panel-text > p:not(.bs-panel-no) { font-size: 15px; }
    .hn-story .bs-scenes li { font-size: 16px; }
    .hn-story .bs-btn { width: 100%; }
    .hn-story .bs-closing { min-height: 0; padding: 112px var(--ab-gutter); }
    .hn-story .bs-closing-quote { font-size: 24px; }
}