/* Header styles from the homepage, scoped to the public board pages. */
@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/playfair-600-latin.woff2") format("woff2");
}
.board-page {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    font-size: 16px;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.hdr, .mnav {
    --ink: #0b1510;
    --forest: #1e3d2a;
    --leaf: #2d5a3d;
    --text: #142019;
    --on-dark: #eef1ea;
    --on-dark-2: rgba(238, 241, 234, 0.7);
    --gold: #c4a35a;
    --gold-2: #d8bd7c;
    --gold-soft: #ece0bd;
    --font-brand: "Playfair Display", Georgia, "Times New Roman", serif;
    --gutter: clamp(16px, 4vw, 56px);
    --maxw: 1320px;
    --hdr-h: 72px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
    line-height: 1.65;
}
.hdr a, .mnav a { text-decoration: none; color: inherit; }
.hdr ul, .mnav ul { margin: 0; padding: 0; list-style: none; }
.hdr svg, .mnav svg { display: block; fill: currentColor; }
.hdr .ico, .mnav .ico { width: 1.25em; height: 1.25em; flex: none; }
.hdr button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.hdr .btn, .mnav .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
    background: var(--gold); color: #15180f;
    font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap;
    box-shadow: 0 12px 30px -14px rgba(196, 163, 90, 0.8);
    transition: background-color 0.35s var(--ease);
}
.hdr .btn--sm { height: 42px; padding: 0 18px; font-size: 0.9375rem; }
.hdr .btn:hover, .mnav .btn:hover { background: var(--gold-2); }
/* ---------- header ---------- */
.hdr {
    position: fixed; inset: 0 0 auto; z-index: 60;
    color: var(--on-dark);
    transition: transform 0.5s var(--ease), color 0.4s, background-color 0.4s;
}
.hdr::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgba(11, 21, 16, 0.62);
    backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    opacity: 0; transition: opacity 0.4s, background-color 0.4s;
}
.hdr.is-solid::before { opacity: 1; }
.hdr[data-tone="light"] { color: var(--text); }
.hdr[data-tone="light"]::before { background: rgba(246, 247, 242, 0.82); }
.hdr.is-hidden { transform: translateY(-100%); }
.hdr__in {
    display: flex; align-items: center; gap: 28px;
    height: var(--hdr-h);
    width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto;
}
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand__mark {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
    background: linear-gradient(135deg, var(--leaf), var(--forest)); color: var(--gold-soft);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.brand__mark .ico { width: 21px; height: 21px; }
.brand__word { font-family: var(--font-brand); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.gnb { margin-left: auto; }
.gnb ul { display: flex; gap: clamp(18px, 2vw, 32px); }
.gnb a { position: relative; font-size: 0.9375rem; font-weight: 550; opacity: 0.86; transition: opacity 0.25s; white-space: nowrap; }
.gnb a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease); }
.gnb a:hover { opacity: 1; }
.gnb a:hover::after { transform: scaleX(1); transform-origin: left; }
.hdr__cta { flex: none; }
.hdr__burger { display: none; width: 44px; height: 44px; margin-left: auto; position: relative; }
.hdr__burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform 0.45s var(--ease), top 0.45s var(--ease); }
.hdr__burger span:first-child { top: 17px; }
.hdr__burger span:last-child { top: 26px; }
.menu-open .hdr__burger span:first-child { top: 21.5px; transform: rotate(45deg); }
.menu-open .hdr__burger span:last-child { top: 21.5px; transform: rotate(-45deg); }
.hdr__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.hdr__progress span { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; }

.mnav {
    position: fixed; inset: 0; z-index: 55;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: calc(var(--hdr-h) + 24px) var(--gutter) calc(28px + env(safe-area-inset-bottom));
    background: var(--ink); color: var(--on-dark);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.7s var(--ease);
    visibility: hidden;
}
.menu-open .mnav { clip-path: inset(0 0 0 0); visibility: visible; }
.mnav li { overflow: hidden; }
.mnav li a { display: block; padding: 10px 0; font-size: clamp(1.6rem, 7vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em; transform: translateY(110%); transition: transform 0.7s var(--ease); }
.menu-open .mnav li a { transform: none; }
.menu-open .mnav li:nth-child(2) a { transition-delay: 0.04s; }
.menu-open .mnav li:nth-child(3) a { transition-delay: 0.08s; }
.menu-open .mnav li:nth-child(4) a { transition-delay: 0.12s; }
.menu-open .mnav li:nth-child(5) a { transition-delay: 0.16s; }
.menu-open .mnav li:nth-child(6) a { transition-delay: 0.2s; }
.menu-open .mnav li:nth-child(7) a { transition-delay: 0.24s; }
.mnav__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.mnav__tel { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.05rem; color: var(--on-dark-2); }
.mnav__tel .ico { width: 20px; height: 20px; }


.gnb a[aria-current="page"] { opacity: 1; font-weight: 700; }
.gnb a[aria-current="page"]::after { transform: scaleX(1); background: var(--gold); }
.hdr :focus-visible, .mnav :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.board-page.menu-open { overflow: hidden; }
.board-page.menu-open .hdr { color: #eef1ea; }
.board-page.menu-open .hdr::before { background: #0b1510; }
.board-page .review-meta, .board-page .post-meta, .board-page .post-date, .board-page .footer-bottom p { font-size: 14px; }
.board-page .search-box button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; flex: none; }
.board-page .search-box input { min-width: 0; }
@media (max-width: 1180px) {
    .gnb { display: none; }
    .hdr__cta { margin-left: auto; }
    .hdr__burger { display: block; margin-left: 4px; }
}
@media (max-width: 640px) {
    .hdr, .mnav { --hdr-h: 60px; }
    .brand__word { font-size: 1.22rem; }
    .brand__mark { width: 32px; height: 32px; border-radius: 10px; }
    .hdr .hdr__cta { display: none; }
    .hdr__burger { margin-left: auto; }
}
@media (max-height: 700px) {
    .mnav { overflow-y: auto; gap: 20px; }
    .mnav li a { font-size: 24px; padding: 6px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hdr, .mnav, .mnav li a { transition: none; }
}

/* Public boards use the same charcoal, cream and gold palette as the homepage. */
.board-page {
    --board-ink: #0b1510;
    --board-ink-2: #102018;
    --board-paper: #f6f7f2;
    --board-bone: #eef1ea;
    --board-gold: #c4a35a;
    --board-gold-soft: #ece0bd;
    --board-line: rgba(20, 32, 25, 0.12);
    --primary: var(--board-gold);
    --primary-light: #d8bd7c;
    --primary-dark: #b3934c;
    --accent: var(--board-gold);
    --text-dark: #142019;
    --text-medium: #55635a;
    --text-light: #657168;
    --bg-light: var(--board-paper);
    --bg-cream: var(--board-bone);
    --white: #fcfcfa;
    background: var(--board-paper);
    color: var(--text-dark);
}
.board-page .hdr[data-tone="light"]::before { background: rgba(246, 247, 242, 0.97); }
.board-page.menu-open .hdr[data-tone="light"]::before { background: var(--board-ink); }
.board-page .page-header {
    background: var(--board-ink);
    border-bottom: 1px solid rgba(196, 163, 90, 0.28);
    color: var(--board-bone);
}
.board-page .page-header h1 { letter-spacing: -0.035em; text-wrap: balance; }
.board-page .page-header h1::after {
    content: ""; display: block; width: 36px; height: 2px;
    margin: 20px auto; background: var(--board-gold);
}
.board-page .page-header p { color: rgba(238, 241, 234, 0.76); text-wrap: balance; }
.board-page .review-thumb-placeholder {
    background: var(--board-ink-2);
    color: #d8bd7c;
}
.board-page .review-card, .board-page .post-list, .board-page .article, .board-page .post-nav a {
    border: 1px solid var(--board-line);
    box-shadow: 0 14px 32px -24px rgba(11, 30, 19, 0.35);
}
.board-page .search-box button,
.board-page .category-btn:is(.active, :hover),
.board-page .page-btn:is(.active, :hover),
.board-page .back-btn {
    background: var(--board-gold);
    border-color: var(--board-gold);
    color: #15180f;
}
.board-page .search-box button:hover, .board-page .back-btn:hover { background: #d8bd7c; }
.board-page .post-badge, .board-page .article-badge {
    background: var(--board-gold-soft);
    color: #665025;
    font-size: 14px;
}
.board-page .post-badge.pin { background: var(--board-gold); color: #15180f; }
.board-page .post-title { color: var(--text-dark); }
.board-page .article-title { text-wrap: balance; }
.board-page .post-item:hover .post-title, .board-page .breadcrumb a:hover { color: #80652e; }
.board-page .post-item:hover { background: #f3efdf; }
.board-page .article-content .file-download:hover {
    background: var(--board-gold-soft);
    border-color: var(--board-gold);
    color: var(--board-ink);
}
.board-page .attachment-list a:hover { color: #80652e; }
.board-page .review-date, .board-page .post-views, .board-page .post-nav-label { font-size: 14px; }
.board-page .article-body { font-size: 16px; line-height: 1.8; }
.board-page .footer { background: var(--board-ink); color: var(--board-bone); }
.board-page .footer .logo-icon { background: #15281e; color: #d8bd7c; }
.board-page .footer-social a:hover { background: var(--board-gold); color: #15180f; }
.board-page :is(input, select):focus-visible {
    outline: 2px solid var(--board-gold); outline-offset: 2px; border-color: var(--board-gold);
}