@charset "utf-8";
/* 기업개요 전용 — 공용 바탕·타이포·문의 영역은 hn-page.css. 색은 hn-shell.css 의 --hn-* 토큰만 쓴다.
   레퍼런스: Burlap & Barrel·Momofuku(사진에 겹친 글 카드), Fly By Jing(기울여 붙인 사진), 병 라벨(이중 테두리)
   ① 사진 + 겹친 소개 카드 ② 괘선 노트에 쓴 대표 편지 ③ 잉크 바탕 기업 개요·연혁 (④ 크래프트 문의는 hn-page.css) */

/* ---------- ① 첫 장면: 큰 조리 사진 + 오른쪽에서 겹쳐 올라온 소개 카드 ---------- */
.hn-about .ab-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; padding: 72px var(--ab-gutter) 0; }
.hn-about .ab-intro-photo { grid-column: 1 / 9; grid-row: 1; height: min(82vh, 780px); overflow: hidden; }
.hn-about .ab-intro-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 70%; } /* 팬과 손이 가운데 오게 */
.hn-about .ab-intro-card { position: relative; z-index: 1; grid-column: 7 / 13; grid-row: 1; margin-bottom: -72px; padding: 64px 64px 56px; background: var(--hn-paper); }
.hn-about .ab-intro-card .ab-h1 { margin-top: 12px; }
.hn-about .ab-intro-card .ab-desc { margin-top: 24px; }
.hn-about .ab-intro-meta { display: flex; gap: 16px; align-items: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hn-ink-200); font: italic 14px/1.4 "Lora", serif; color: var(--hn-ink-500); }
.hn-about .ab-intro-meta span + span::before { content: ""; display: inline-block; width: 24px; height: 1px; margin: 0 16px 4px 0; vertical-align: middle; background: var(--hn-ink-300); }

/* ---------- ② 대표 인사말: 괘선 노트 한 장 ---------- */
.hn-about .ab-letter { padding-top: 216px; } /* 위 카드가 72px 내려와 겹친 만큼 */
.hn-about .ab-sheet { position: relative; max-width: 880px; margin: 0 auto; padding: 88px 96px 80px 120px; background: var(--hn-paper); border: 1px solid var(--hn-ink-200); }
/* 노트 왼쪽 여백선 */
.hn-about .ab-sheet::before { content: ""; position: absolute; top: 0; bottom: 0; left: 72px; width: 1px; background: rgba(135, 90, 54, .35); }
.hn-about .ab-sheet .ab-h2 { margin-top: 0; max-width: 11em; }
/* 본문은 괘선(36px) 위에 앉는다 */
.hn-about .ab-sheet-body { margin-top: 40px; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--ab-line) - 1px), rgba(57, 42, 31, .12) calc(var(--ab-line) - 1px), rgba(57, 42, 31, .12) var(--ab-line)); }
.hn-about .ab-sheet-body p { font-size: 17px; line-height: var(--ab-line); color: var(--hn-ink); }
.hn-about .ab-sheet-body p + p { margin-top: var(--ab-line); }
.hn-about .ab-sheet-body p:first-child { font-weight: 600; }
/* 테이프로 붙인 사진 */
.hn-about .ab-sheet-photo { position: absolute; top: -56px; right: -48px; width: 200px; padding: 10px 10px 32px; background: #fff; transform: rotate(4deg); box-shadow: 0 10px 24px rgba(57, 42, 31, .12); }
.hn-about .ab-sheet-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
/* 갈색 포장 테이프 — 위 가운데 한 장, 반듯하게 자른 단색 */
.hn-about .ab-tape { position: absolute; top: -16px; left: 50%; width: 110px; height: 30px; margin-left: -55px; background: rgba(140, 106, 82, .82); box-shadow: 0 1px 2px rgba(57, 42, 31, .18); transform: rotate(-4deg); }
/* 서명 */
.hn-about .ab-sign { display: flex; align-items: flex-end; justify-content: flex-end; gap: 20px; margin-top: 56px; }
.hn-about .ab-sign-deco { font-family: "Homemade Apple", cursive; font-size: 22px; line-height: 1.2; color: var(--hn-caramel); transform: rotate(-4deg); }
.hn-about .ab-sign-who { display: flex; flex-direction: column; align-items: flex-end; }
.hn-about .ab-sign-who small { font-size: 12px; line-height: 1.5; color: var(--hn-ink-700); }
.hn-about .ab-sign-who b { font-size: 24px; line-height: 1.4; font-weight: 600; }

/* ---------- ③ 기업 개요: 잉크 바탕 전폭 — 왼쪽 큰 이탤릭 제목, 오른쪽 2열 정보 칸 ---------- */
.hn-about .ab-overview { color: var(--hn-paper); background: var(--hn-ink); }
.hn-about .ab-ov { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; max-width: 1440px; margin: 0 auto; }
.hn-about .ab-ov-en { font: italic 500 64px/1.05 "Lora", serif; color: var(--hn-amber); }
.hn-about .ab-ov-head .ab-h3 { margin-top: 20px; font-size: 18px; color: var(--hn-paper); }
.hn-about .ab-info { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(246, 242, 236, .5); }
.hn-about .ab-info > div { padding: 28px 24px 28px 0; border-bottom: 1px solid rgba(246, 242, 236, .16); }
.hn-about .ab-info > div:nth-child(even):not(.is-wide) { padding-left: 24px; border-left: 1px solid rgba(246, 242, 236, .16); }
.hn-about .ab-info > div.is-wide { grid-column: 1 / -1; }
.hn-about .ab-info > div.is-wide ~ div:nth-child(n) { padding-left: 0; border-left: 0; }
.hn-about .ab-info > div.is-wide ~ div:nth-child(odd) { padding-left: 24px; border-left: 1px solid rgba(246, 242, 236, .16); }
.hn-about .ab-info dt { font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--hn-amber); }
.hn-about .ab-info dd { margin-top: 8px; font-size: 20px; line-height: 1.45; color: var(--hn-paper); }
.hn-about .ab-info dd [lang="en"], .hn-about .ab-info dd[lang="en"] { font-family: "Lora", serif; }
.hn-about .ab-info a { transition: color .3s; }
.hn-about .ab-info a:hover { color: var(--hn-amber); }

/* 걸어온 길 — 연혁 게시판 연동(글이 있을 때만, 관리자는 항상) */
.hn-about .ab-history { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; max-width: 1440px; margin: 120px auto 0; }
.hn-about .ab-history .ab-label { color: var(--hn-amber); }
.hn-about .ab-history .ab-h3 { margin-top: 8px; color: var(--hn-paper); }
.hn-about .ab-history-body { grid-column: 2; }
.hn-about .ab-history > :not(.ab-history-body) { grid-column: 1; }
.hn-about .ab-timeline { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(246, 242, 236, .5); }
.hn-about .ab-timeline li { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid rgba(246, 242, 236, .16); }
.hn-about .ab-tl-year { font: italic 500 24px/1.3 "Lora", serif; color: var(--hn-amber); }
.hn-about .ab-timeline p { padding-top: 4px; color: var(--hn-paper); }
.hn-about .ab-tl-month { margin-right: 8px; color: var(--hn-ink-200); }
.hn-about .ab-tl-desc { display: block; margin-top: 4px; color: var(--hn-ink-200); }
.hn-about .ab-tl-admin { margin-top: 20px; font-size: 14px; color: var(--hn-ink-200); }
.hn-about .ab-tl-admin a { font-weight: 600; color: var(--hn-amber); border-bottom: 1px solid currentColor; }
.hn-about .ab-tl-admin span { font-size: 12px; color: var(--hn-ink-300); }


.fl-reveal-on .hn-about .ab-intro-card[data-fl-reveal] { transition-delay: .15s; }
.fl-reveal-on .hn-about .ab-intro-photo[data-fl-reveal]:not(.is-in) { transform: none; }

@media (max-width: 1024px) {
    .hn-about .ab-intro { grid-template-columns: 1fr; padding-top: 48px; }
    /* 사진 오른쪽을 비우고 카드는 오른쪽 끝까지 — 두 면의 오른쪽 끝선이 엇갈리게 */
    .hn-about .ab-intro-photo { grid-column: 1; height: auto; aspect-ratio: 4 / 3; margin-right: 40px; }
    .hn-about .ab-intro-card { grid-column: 1; grid-row: 2; width: calc(100% - 64px); margin: -96px 0 0 auto; padding: 48px; }
    .hn-about .ab-letter { padding-top: 160px; }
    .hn-about .ab-sheet { padding: 72px 56px 64px 88px; }
    .hn-about .ab-sheet::before { left: 48px; }
    .hn-about .ab-sheet-photo { right: -16px; width: 160px; }
    .hn-about .ab-ov, .hn-about .ab-history { grid-template-columns: 1fr; gap: 40px; }
    .hn-about .ab-history-body, .hn-about .ab-history > :not(.ab-history-body) { grid-column: auto; }
    .hn-about .ab-ov-en { font-size: 48px; }
    .hn-about .ab-ov-head .ab-h3 { margin-top: 12px; }
}
@media (max-width: 767px) {
    .hn-about .ab-intro { padding-top: 24px; }
    /* 모바일은 사진 오른쪽 여백만 줄임 */
    .hn-about .ab-intro-photo { aspect-ratio: 4 / 5; margin-right: 32px; }
    .hn-about .ab-intro-card { width: calc(100% - 20px); margin-top: -64px; padding: 32px 20px; }
    /* 첫 장면 제목은 화면 폭 따라 줄여 320px에서도 두 줄 유지 */
    .hn-about .ab-intro-card .ab-h1 { font-size: clamp(22px, 7vw, 30px); }
    .hn-about .ab-intro-meta { margin-top: 28px; }
    .hn-about .ab-letter { padding-top: 120px; }
    .hn-about .ab-sheet { padding: 96px 20px 48px 40px; }
    .hn-about .ab-sheet::before { left: 24px; }
    .hn-about .ab-sheet-photo { top: -56px; right: -6px; width: 104px; padding: 6px 6px 18px; }
    .hn-about .ab-tape { width: 72px; height: 22px; margin-left: -36px; top: -12px; }
    .hn-about .ab-sheet .ab-h2 { max-width: none; }
    .hn-about .ab-sheet-body p { font-size: 15px; }
    .hn-about .ab-sign { margin-top: 40px; }
    .hn-about .ab-ov-en { font-size: 40px; }
    .hn-about .ab-info { grid-template-columns: 1fr; }
    .hn-about .ab-info > div, .hn-about .ab-info > div:nth-child(n) { padding: 20px 0; border-left: 0 !important; padding-left: 0 !important; }
    .hn-about .ab-info dd { font-size: 17px; }
    .hn-about .ab-history { margin-top: 72px; }
    .hn-about .ab-history, .hn-about .ab-history-body, .hn-about .ab-history > :not(.ab-history-body) { grid-column: auto; }
    .hn-about .ab-timeline li { grid-template-columns: 80px 1fr; gap: 12px; }
}