@charset "utf-8";

/* 해든네이처 공통 셸 — 메인 「식탁과 노트」의 종이·잉크 편집 디자인을 서브까지 잇는다. */
@font-face { font-family: "MaruBuri"; font-weight: 400; font-style: normal; font-display: swap; src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2) format("woff2"); }
@font-face { font-family: "MaruBuri"; font-weight: 600; font-style: normal; font-display: swap; src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2) format("woff2"); }
@font-face { font-family: "MaruBuri"; font-weight: 700; font-style: normal; font-display: swap; src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff2) format("woff2"); }

:root {
    --hn-ink: #392a1f;
    --hn-ink-700: #5f5248;
    --hn-ink-500: #72665d;
    --hn-ink-300: #bdb6af;
    --hn-ink-200: #d0cac3;
    --hn-ink-100: #dfdad3;
    --hn-caramel: #875a36;
    --hn-caramel-hover: #6f4a2c;
    --hn-caramel-soft: #ebe3da;
    --hn-amber: #b3977f;
    --hn-linen: #ede7df;
    --hn-paper: #f6f2ec;
    --hn-kraft: #8c6a52;
    --hn-serif: "Lora", "MaruBuri", serif;
    --hn-ease: cubic-bezier(.22, 1, .36, 1);
    --hn-gutter: clamp(20px, 5vw, 72px);
}

body:not(:has(.hm-home)) { overflow-x: clip; color: var(--hn-ink); background: var(--hn-linen); }
body:not(:has(.hm-home)) :where(h1, h2, h3, h4, h5, h6) { font-family: var(--hn-serif); letter-spacing: -.038em; word-break: keep-all; }
body:not(:has(.hm-home)) :where(p, li, dt, dd, a, span) { word-break: keep-all; }
body:not(:has(.hm-home)) :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--hn-caramel); outline-offset: 3px; }

/* 헤더·빠른 메뉴·푸터는 css/hn-chrome.css(메인과 공통) */

/* 서브 머리: 거대한 장식 배너 대신 페이지 문맥을 읽히는 제목판 */
body:not(:has(.hm-home)) .fl-subhead { height: auto !important; margin-top: 0; padding: 0 !important; background: var(--hn-ink) !important; border: 0; }
body:not(:has(.hm-home)) .fl-subhead::before,
body:not(:has(.hm-home)) .fl-subhead-visual::before { display: none !important; }
body:not(:has(.hm-home)) .fl-subhead-visual { position: relative; display: flex; align-items: flex-end; justify-content: flex-start; width: 100%; height: 360px !important; min-height: 360px; padding: 140px var(--hn-gutter) 56px; overflow: hidden; border: 0; border-radius: 0; background-color: var(--hn-ink) !important; background-image: none !important; }
body:not(:has(.hm-home)) .fl-subhead-visual::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(57, 42, 31, .84) 0%, rgba(57, 42, 31, .68) 46%, rgba(57, 42, 31, .46) 100%); pointer-events: none; }
/* 테마관리에서 등록한 서브 배너를 시각 원본으로 사용한다. 이미지가 없으면 head.php의 기본 일러스트(.fl-subhead-art)가 같은 자리를 채운다. */
body:not(:has(.hm-home)) .fl-subhead-bg { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; animation: none; }
body:not(:has(.hm-home)) .fl-subhead-art { overflow: hidden; }
body:not(:has(.hm-home)) .fl-subhead-text { position: relative; inset: auto; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: none; margin: 0; padding: 0; text-align: left; transform: none; }
body:not(:has(.hm-home)) .fl-subhead-en { order: 0; margin: 0 0 14px; color: var(--hn-amber); font: 600 12px/1.5 "Lora", serif; letter-spacing: .14em; text-transform: uppercase; }
body:not(:has(.hm-home)) .fl-subhead-title { order: 1; margin: 0; color: var(--hn-paper); font: 600 clamp(36px, 5vw, 64px)/1.14 var(--hn-serif); letter-spacing: -.045em; text-shadow: none; }
/* 현재 위치(브레드크럼) — 제목판과 본문 사이, 왼쪽에 작게. 단계마다 같은 단계의 메뉴를 펼친다 */
body:not(:has(.hm-home)) .fl-subhead { position: relative; z-index: 5; }
body:not(:has(.hm-home)) .fl-crumb { position: relative; z-index: 3; padding: 12px var(--hn-gutter); background: transparent; } /* 바탕은 아래 본문 첫 색을 따른다(tail.php 가 #container_title 에 칠함) */
body:not(:has(.hm-home)) .fl-crumb ol { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
body:not(:has(.hm-home)) .fl-crumb ol > li { position: relative; display: flex; align-items: center; }
body:not(:has(.hm-home)) .fl-crumb ol > li + li::before { content: ""; width: 1px; height: 12px; margin: 0 14px; background: var(--hn-ink-300); }
body:not(:has(.hm-home)) .fl-crumb-home { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 32px; color: var(--hn-ink); transition: color .25s; }
body:not(:has(.hm-home)) .fl-crumb-btn, body:not(:has(.hm-home)) .fl-crumb .is-current > span { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0; color: var(--hn-ink-500); background: none; border: 0; font: 600 14px/1 "MaruBuri", serif; letter-spacing: -.038em; cursor: pointer; transition: color .25s; }
body:not(:has(.hm-home)) .fl-crumb .is-current .fl-crumb-btn, body:not(:has(.hm-home)) .fl-crumb .is-current > span { color: var(--hn-ink); }
body:not(:has(.hm-home)) .fl-crumb-btn svg { transition: transform .3s var(--hn-ease); }
body:not(:has(.hm-home)) .fl-crumb-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
body:not(:has(.hm-home)) .fl-crumb-home:hover, body:not(:has(.hm-home)) .fl-crumb-btn:hover { color: var(--hn-caramel); }
body:not(:has(.hm-home)) .fl-crumb-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 160px; margin: 0; padding: 8px 0; list-style: none; background: var(--hn-paper); border: 1px solid var(--hn-ink-200); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .3s var(--hn-ease), visibility .25s; }
body:not(:has(.hm-home)) .fl-crumb-btn[aria-expanded="true"] + .fl-crumb-menu { opacity: 1; visibility: visible; transform: none; }
body:not(:has(.hm-home)) .fl-crumb-menu a { display: block; padding: 10px 20px; color: var(--hn-ink); font: 600 14px/1.4 "MaruBuri", serif; letter-spacing: -.038em; white-space: nowrap; transition: color .2s, background .2s; }
body:not(:has(.hm-home)) .fl-crumb-menu a:hover { color: var(--hn-caramel); background: var(--hn-linen); }
body:not(:has(.hm-home)) .fl-crumb-menu a[aria-current] { color: var(--hn-caramel); }
/* 본문이 어두운 바탕으로 시작하는 페이지(tail.php 가 .is-dark) */
body:not(:has(.hm-home)) .fl-crumb.is-dark ol > li + li::before { background: rgba(246, 242, 236, .3); }
body:not(:has(.hm-home)) .fl-crumb.is-dark .fl-crumb-home, body:not(:has(.hm-home)) .fl-crumb.is-dark .is-current .fl-crumb-btn, body:not(:has(.hm-home)) .fl-crumb.is-dark .is-current > span { color: var(--hn-paper); }
body:not(:has(.hm-home)) .fl-crumb.is-dark .fl-crumb-btn { color: rgba(246, 242, 236, .65); }
body:not(:has(.hm-home)) .fl-crumb.is-dark .fl-crumb-home:hover, body:not(:has(.hm-home)) .fl-crumb.is-dark .fl-crumb-btn:hover { color: var(--hn-amber); }
body:not(:has(.hm-home)) #container { width: 100%; margin: 0; padding: 0; }

@media (max-width: 1024px) {
    body:not(:has(.hm-home)) .fl-subhead-visual { height: 320px !important; min-height: 320px; }
}
@media (max-width: 767px) {
    body:not(:has(.hm-home)) .fl-crumb { padding-top: 8px; padding-bottom: 8px; }
    body:not(:has(.hm-home)) .fl-subhead-visual { height: 260px !important; min-height: 260px; padding-top: 100px; padding-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    body:not(:has(.hm-home)) *, body:not(:has(.hm-home)) *::before, body:not(:has(.hm-home)) *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}