@charset "utf-8";

/* ==========================================================================
   해든네이처 게시판 통합 레이어 — 공지사항·보도자료·조리 팁·제품 등 게시판 화면을 메인 「식탁과 노트」에 맞춘다.
   - 프레쉬랩 시절 게시판 스킨(css/fl-board.css, skin/board/<skin>/style.css)의 알약·둥근 카드·그림자·남색을 걷어내고
     메인과 같은 잉크·캐러멜 색, 린넨·종이 바탕, 2px 각, 1px 선, 마루부리 서체로 바꾼다.
   - 구조(마크업·배치)는 그대로 두고 스킨 css 뒤에 불러와 덮어쓴다(head.sub.php 우선순위 22).
   ========================================================================== */

/* 게시판 루트: 목록(.fl-gal·.fl-nt·.fl-menu-cat·.fl-rv·.fl-iqa) · 글 보기(.fl-galv·.fl-mv·.fl-iqv) · 글쓰기(.fl-bw) · 푸터 약관 모달(.fl-ft-modal, 문의 글쓰기 개인정보 모달과 같은 모양) */
:is(.fl-gal, .fl-nt, .fl-rv, .fl-galv, .fl-menu-cat, .fl-mv, .fl-iqa, .fl-iqv, .fl-iq, .fl-bw, .fl-ft-modal) {
    --fl-primary: var(--hn-caramel);
    --fl-primary-dark: var(--hn-caramel-hover);
    --fl-primary-soft: var(--hn-caramel-soft);
    --fl-mango: var(--hn-caramel);
    --fl-dark: var(--hn-ink);
    --fl-ink: var(--hn-ink);
    --fl-ink-2: var(--hn-ink-700);
    --fl-ink-3: var(--hn-ink-500);
    --fl-line: var(--hn-ink-200);
    --fl-cream: var(--hn-linen);
    --fl-white: var(--hn-paper);
    --fl-ice: var(--hn-linen);
    --fl-font: var(--hn-serif);
    --fl-font-en: "Lora", "MaruBuri", serif;
    --fl-font-display: "Lora", "MaruBuri", serif;
    --fl-radius: 2px;
    --fl-radius-sm: 2px;
    --fl-shadow: none;
    --fl-shadow-lg: none;
    font-family: var(--hn-serif);
    letter-spacing: -.038em;
    color: var(--hn-ink);
}
:is(.fl-gal, .fl-nt, .fl-rv, .fl-galv, .fl-menu-cat, .fl-mv, .fl-iqa, .fl-iqv, .fl-iq, .fl-bw, .fl-ft-modal) :is(input, button, select, textarea, [class*="NotoKr"]) { font-family: inherit; letter-spacing: inherit; }

/* 바탕: 서브 페이지와 같은 린넨 */
body:has(:is(.fl-gal, .fl-nt, .fl-rv, .fl-galv, .fl-menu-cat, .fl-mv, .fl-iqa, .fl-iqv, .fl-iq, .fl-bw)),
body:has(:is(.fl-gal, .fl-nt, .fl-rv, .fl-galv, .fl-menu-cat, .fl-mv, .fl-iqa, .fl-iqv, .fl-iq, .fl-bw)) :is(#container_wr, #container, .gw-footer-container) { background: var(--hn-linen) !important; }

/* 모서리·그림자: 메인과 같은 2px 각, 그림자와 떠오르는 움직임 없음 */
:is(.fl-gal, .fl-nt, .fl-rv, .fl-galv, .fl-menu-cat, .fl-mv, .fl-iqa, .fl-iqv, .fl-iq, .fl-bw, .fl-ft-modal),
:is(.fl-gal, .fl-nt, .fl-rv, .fl-galv, .fl-menu-cat, .fl-mv, .fl-iqa, .fl-iqv, .fl-iq, .fl-bw, .fl-ft-modal) *,
:is(.fl-gal, .fl-nt, .fl-rv, .fl-galv, .fl-menu-cat, .fl-mv, .fl-iqa, .fl-iqv, .fl-iq, .fl-bw, .fl-ft-modal) *::before,
:is(.fl-gal, .fl-nt, .fl-rv, .fl-galv, .fl-menu-cat, .fl-mv, .fl-iqa, .fl-iqv, .fl-iq, .fl-bw, .fl-ft-modal) *::after { border-radius: 2px !important; box-shadow: none !important; }
:is(.fl-gal, .fl-nt, .fl-rv, .fl-galv, .fl-menu-cat, .fl-mv, .fl-iqa, .fl-iqv, .fl-iq, .fl-bw) img { border-radius: 0 !important; }

/* 굵기: 마루부리는 400·600·700만 있으므로 800 제목을 메인처럼 600으로 */
:is(.fl-gal, .fl-nt, .fl-rv, .fl-galv, .fl-menu-cat, .fl-mv, .fl-iqa, .fl-iqv, .fl-iq, .fl-bw, .fl-ft-modal) :is(strong, b, h1, h2, h3, h4, dt, [class*="title"], [class*="name"], [class*="-sub"]) { font-weight: 600; }

/* 목록 폭: 가운데 1280px 상자 대신 서브 페이지처럼 화면 양옆 여백(--hn-gutter)에 맞춰 — 검색창·목록 왼쪽 끝이 제목·현재 위치와 같은 선에 온다 */
:is(.fl-gal, .fl-nt, .fl-rv, .fl-menu-cat, .fl-iqa).gw-bbs-con { width: auto; max-width: none; margin: 0; padding: 0 var(--hn-gutter); }
/* 문의 접수함은 분류 막대보다 상태 요약 카드가 먼저 오므로, 다른 목록이 막대 위에 두는 윗여백을 카드 위로 옮기고 막대는 카드 바로 아래에 붙인다 */
.fl-iqa.gw-bbs-con { padding-top: clamp(64px, 6vw, 96px); padding-bottom: clamp(72px, 7vw, 112px); }
.fl-iqa .fl-iqa-bar { padding: 28px 0 20px; }
@media screen and (max-width: 768px) {
    .fl-iqa.gw-bbs-con { padding-top: 72px; }
    .fl-iqa .fl-iqa-bar { padding: 20px 0 16px; }
}

/* ---------- 분류 탭 · 검색 ---------- */
.fl-gal-cate a { min-height: 44px; padding: 0 20px; border-width: 1px; font-size: 15px; font-weight: 600; }
.fl-gal-cate a:hover { border-color: var(--hn-ink); color: var(--hn-ink); }
.fl-gal-search { height: 48px; padding: 0 0 0 18px; border-width: 1px; }
.fl-gal-search button { width: 46px; height: 46px; margin-right: 0; transition: background .25s; }
.fl-gal-search button:hover { background: var(--hn-caramel); }

/* ---------- 페이지 번호: 네모 칸 ---------- */
.fl-gal-pages .pg_page, .fl-gal-pages .pg_current { font-family: "Lora", serif; }
.fl-gal-pages .pg_page:hover { background: var(--hn-paper); }

/* ---------- 줄 목록(.fl-nt, 공지사항): 둥근 카드 대신 위 잉크 선 + 가는 구분선의 기록표 ---------- */
.fl-nt-list { gap: 0; border-top: 0; }
.fl-nt-link { min-height: 92px; border: 0; border-bottom: 1px solid var(--hn-ink-200); background: transparent; transition: background .25s ease; }
.fl-nt-link:hover, .fl-nt-link:focus-visible { border-color: var(--hn-ink-200); background: var(--hn-paper); transform: none; }
.fl-nt-item.is-current .fl-nt-link { border-color: var(--hn-ink-200); background: var(--hn-paper); }
.fl-nt-cat, .fl-nt-item:not(.is-notice) .fl-nt-cat[style] { padding: 0 8px; font-size: 13px; line-height: 24px; font-weight: 600; color: var(--hn-caramel); background: var(--hn-caramel-soft); }
.fl-nt-item.is-notice .fl-nt-cat { background: none; color: var(--hn-caramel); }
.fl-nt-title { font-size: 18px; font-weight: 600; color: var(--hn-ink); }
.fl-nt-new { font-family: "Lora", serif; font-size: 12px; letter-spacing: .1em; color: var(--hn-caramel); }
.fl-nt-date { font-family: "Lora", serif; color: var(--hn-ink-500); }
.fl-nt-arrow { width: 44px; height: 44px; border: 1px solid var(--hn-ink-200); }
.fl-nt-link:hover .fl-nt-arrow { border-color: var(--hn-ink); background: var(--hn-ink); color: var(--hn-paper); }
@media screen and (max-width: 768px) {
    .fl-nt-link { padding: 18px 4px; }
    .fl-nt-cat, .fl-nt-item:not(.is-notice) .fl-nt-cat[style] { padding: 0 6px; font-size: 12px; line-height: 22px; }
}

/* ---------- 카드 목록(.fl-gal, 보도자료·조리 팁) ---------- */
.fl-gal-link { border-color: var(--hn-ink-200); background: var(--hn-paper); transition: border-color .25s ease; }
.fl-gal-link:hover, .fl-gal-link:focus-visible { border-color: var(--hn-ink); }
.fl-gal-cat, .fl-gal-cat[style] { padding: 0 8px; font-size: 13px; line-height: 24px; font-weight: 600; color: var(--hn-caramel); background: var(--hn-caramel-soft); }
.fl-gal-cat.is-notice { color: var(--hn-paper); background: var(--hn-ink); }
.fl-gal-title { font-size: 18px; font-weight: 600; }
.fl-gal-date { font-family: "Lora", serif; color: var(--hn-ink-500); }

/* ---------- 제품 목록·보기(.fl-menu-cat · .fl-mv) ---------- */
.fl-menu-cat .fl-menu-group-title, .fl-mv .fl-mv-title { letter-spacing: -.045em; }
.fl-menu-cat .fl-menu-group-en, .fl-menu-cat .fl-menu-cat-count, .fl-mv .fl-mv-en { font-family: "Lora", serif; font-size: 12px; letter-spacing: .14em; color: var(--hn-caramel); }
.fl-menu-cat .fl-menu-item-img, .fl-mv .fl-mv-photo { border: 1px solid var(--hn-ink-200); }
.fl-menu-cat .fl-chip, .fl-mv .fl-chip { font-family: "Lora", "MaruBuri", serif; }

/* ---------- 빈 목록 안내(lib/fl_board_empty.php): 점선·광원 대신 종이 카드 + 네모 아이콘 ---------- */
.fl-bo-empty { border: 1px solid var(--hn-ink-200); background: var(--hn-paper); background-image: none; }
.fl-bo-empty-ico { width: 72px; height: 72px; border: 0; background: transparent; color: var(--hn-caramel); font-size: 30px; }
.fl-bo-empty-title { font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.045em; }
.fl-bo-empty-desc { color: var(--hn-ink-700); }

/* ---------- 버튼: 메인 .hm-btn 과 같은 2px 각 — 주 버튼은 캐러멜, 보조는 잉크 선 ---------- */
:is(.fl-gal, .fl-nt, .fl-rv, .fl-galv, .fl-menu-cat, .fl-mv, .fl-iqa, .fl-iqv, .fl-iq, .fl-bw) .fl-btn { min-height: 52px; padding: 0 28px; border-width: 1.5px; font-family: inherit; font-weight: 600; }
:is(.fl-gal, .fl-nt, .fl-rv, .fl-galv, .fl-menu-cat, .fl-mv, .fl-iqa, .fl-iqv, .fl-iq, .fl-bw) .fl-btn:hover { transform: none; }
:is(.fl-gal, .fl-nt, .fl-rv, .fl-galv, .fl-menu-cat, .fl-mv, .fl-iqa, .fl-iqv, .fl-iq, .fl-bw) :is(.fl-btn--primary, .fl-btn-primary) { border-color: var(--hn-caramel); background: var(--hn-caramel); color: var(--hn-paper); }
:is(.fl-gal, .fl-nt, .fl-rv, .fl-galv, .fl-menu-cat, .fl-mv, .fl-iqa, .fl-iqv, .fl-iq, .fl-bw) :is(.fl-btn--primary, .fl-btn-primary):hover { border-color: var(--hn-caramel-hover); background: var(--hn-caramel-hover); }
:is(.fl-gal, .fl-nt, .fl-rv, .fl-galv, .fl-menu-cat, .fl-mv, .fl-iqa, .fl-iqv) .btn_bo_user .gw-btn01 { height: 48px; padding: 0 22px; border-width: 1px !important; font-weight: 600; }
:is(.fl-gal, .fl-nt, .fl-rv, .fl-galv, .fl-menu-cat, .fl-mv, .fl-iqa, .fl-iqv) .btn_bo_user .gw-btn01[title="글쓰기"] { border-color: var(--hn-caramel) !important; background: var(--hn-caramel) !important; color: var(--hn-paper) !important; }
:is(.fl-gal, .fl-nt, .fl-rv, .fl-galv, .fl-menu-cat, .fl-mv, .fl-iqa, .fl-iqv) .btn_bo_user .gw-btn01[title="글쓰기"]:hover { border-color: var(--hn-caramel-hover) !important; background: var(--hn-caramel-hover) !important; }
:is(.fl-gal, .fl-nt, .fl-rv, .fl-galv, .fl-menu-cat, .fl-mv, .fl-iqa, .fl-iqv) .more_opt { border-color: var(--hn-ink-200); }

/* ---------- 글 보기(.fl-galv) ---------- */
.fl-galv-cate { padding: 0 8px; font-size: 13px; line-height: 24px; font-weight: 600; background: var(--hn-caramel-soft); }
.fl-galv-cate:link, .fl-galv-cate:visited { color: var(--hn-caramel); }
.fl-galv-title { font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; line-height: 1.3; letter-spacing: -.045em; }
.fl-galv-date { font-family: "Lora", serif; color: var(--hn-ink-500); }
.fl-galv-head { padding-bottom: clamp(24px, 2.4vw, 32px); border-bottom: 1px solid var(--hn-ink); }
.fl-galv-body #bo_v_con { font-size: 17px; line-height: 1.85; letter-spacing: -.02em; }
.fl-galv-nav { border-top-color: var(--hn-ink); }
.fl-galv-nav a strong { font-weight: 600; }
.fl-galv-nav-list { height: 48px; border-width: 1px; background: transparent; font-weight: 600; }

/* ---------- 글쓰기(.fl-bw) ---------- */
.fl-bw-en { font-family: "Lora", serif; font-size: 12px; letter-spacing: .14em; color: var(--hn-caramel); }
.fl-bw-title { font-weight: 600; letter-spacing: -.045em; }
#gw-bo-w.fl-bw form#fwrite { border: 1px solid var(--hn-ink-200); }
#gw-bo-w.fl-bw .NotoKr_B { font-weight: 600; }
#gw-bo-w.fl-bw :is(input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="url"], textarea, .sel-wrap > select, .file-name, #captcha_key) { border-width: 1px !important; }
#gw-bo-w.fl-bw .gw-btn-wrap .gw-btn0102 { background: var(--hn-caramel) !important; font-weight: 600; }
#gw-bo-w.fl-bw .gw-btn-wrap .gw-btn0102:hover { background: var(--hn-caramel-hover) !important; }
#gw-bo-w.fl-bw .gw-btn-wrap .gw-btn01 { border-width: 1px !important; font-weight: 600; }
#gw-bo-w.fl-bw .gw-file-input-button { font-weight: 600; }
#gw-bo-w.fl-bw .gw-file-input-button:hover { background: var(--hn-caramel); }

/* ---------- 글 보기 목록 버튼: 점 9개 대신 가는 선 목록 아이콘 + '목록' 글자의 네모 버튼(제품 상세·공지사항 등 공통) ---------- */
.fl-mv-nav-list { flex-direction: row !important; gap: 8px !important; height: 48px; min-height: 48px; padding: 0 22px 0 18px; border: 1px solid var(--hn-ink-200); background: transparent; color: var(--hn-ink); transition: border-color .25s, background .25s, color .25s; }
.fl-mv-nav a.fl-mv-nav-list span { font-size: 15px; font-weight: 600; color: inherit; }
:is(.fl-mv-nav-list, .fl-galv-nav-list) .fl-ico, :is(.fl-mv-nav-list, .fl-galv-nav-list):hover .fl-ico { width: 20px; height: 20px; color: inherit; }
.fl-mv-nav-list:hover { border-color: var(--hn-ink); background: var(--hn-ink); color: var(--hn-paper); }
/* 관리 펼침 메뉴(수정·삭제·복사·이동): 글자·아이콘을 잉크 한 색으로(기본 스킨의 파랑·주황 링크색 덮기) */
#gw-bo-v .more_opt li :is(a, button), #gw-bo-v .more_opt li :is(a, button):is(:link, :visited), #gw-bo-list .more_opt li :is(a, button), #gw-bo-list .more_opt li :is(a, button):is(:link, :visited) { color: var(--hn-ink) !important; }
#gw-bo-v .more_opt li i, #gw-bo-list .more_opt li i { color: var(--hn-ink-500) !important; }
/* 제품 상세: 영문명을 한글 이름 위 작은 머리글로 */
.fl-mv .fl-mv-en { margin: 0; }
.fl-mv .fl-mv-en + .fl-mv-title { margin-top: 6px; }

/* 문의 글쓰기 자동등록방지: 숫자 그림 상자 빈 곳은 흰색(그림 바탕과 같게), 듣기·새로고침 버튼은 옆 입력칸과 같은 52px */
#gw-bo-w.fl-iq #captcha #captcha_img { background: #fff; }
#gw-bo-w.fl-iq #captcha :is(#captcha_mp3, #captcha_reload) { width: 52px; height: 52px; }