/* ===== 엔푸드시스템 반응형 테마 ===== */
:root{
  --nf-green:#6d9a2f; --nf-green-d:#557d1f; --nf-ink:#222; --nf-gray:#666;
  --nf-line:#e6e6e6; --nf-bg:#f6f7f4; --nf-max:1200px;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Noto Sans KR','맑은 고딕',Malgun Gothic,sans-serif;color:var(--nf-ink);background:#fff;line-height:1.6;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;vertical-align:middle}
h1,h2,h3,p,ul{margin:0;padding:0}
li{list-style:none}
#hd_login_msg{position:fixed;left:-9999px}

/* ===== 헤더 ===== */
#hd{border-bottom:1px solid var(--nf-line);background:#fff;position:sticky;top:0;z-index:1000}
.hd_inner{max-width:var(--nf-max);margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:24px;min-height:74px;flex-wrap:wrap}
#logo{flex:0 0 auto}
#logo img{height:44px;width:auto}
.nf_nav_toggle{display:none}
.nf_ham{display:none;margin-left:auto;font-size:24px;color:var(--nf-ink);cursor:pointer;padding:8px}

#gnb{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;gap:28px}
.gnb_1{display:flex;gap:6px}
.gnb_1>li{position:relative}
.gnb_1>li>a{display:block;padding:26px 16px;font-weight:700;font-size:17px;color:var(--nf-ink)}
.gnb_1>li>a:hover{color:var(--nf-green)}
.gnb_2{position:absolute;top:100%;left:0;min-width:170px;background:#fff;border:1px solid var(--nf-line);box-shadow:0 8px 20px rgba(0,0,0,.08);padding:8px 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s}
.gnb_1>li:hover .gnb_2{opacity:1;visibility:visible;transform:translateY(0)}
.gnb_2 li a{display:block;padding:9px 18px;font-size:15px;color:#444}
.gnb_2 li a:hover{background:var(--nf-bg);color:var(--nf-green)}
.gnb_2_grid{display:grid;grid-template-columns:repeat(3,1fr);min-width:430px}
.gnb_util{display:flex;gap:14px;font-size:14px;color:var(--nf-gray)}
.gnb_util a:hover{color:var(--nf-green)}
.gnb_util .util_adm{color:var(--nf-green);font-weight:700}

/* ===== 본문 래퍼 ===== */
#wrapper{min-height:50vh}
#container_wr{max-width:var(--nf-max);margin:0 auto;padding:0 20px}
#container{padding:34px 0 60px}
#container_title{font-size:26px;font-weight:800;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid var(--nf-ink)}

/* ===== 메인 히어로 ===== */
.nf-hero{max-width:var(--nf-max);margin:0 auto;padding:48px 20px;display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.nf-hero-txt{flex:1 1 320px}
.nf-hero-sub{color:var(--nf-green);font-weight:700;letter-spacing:.02em;margin-bottom:10px}
.nf-hero-tit{font-size:clamp(30px,5vw,46px);font-weight:900;line-height:1.15;margin-bottom:16px}
.nf-hero-desc{color:var(--nf-gray);font-size:17px;margin-bottom:26px;max-width:460px}
.nf-hero-btn{display:inline-block;background:var(--nf-green);color:#fff;font-weight:700;padding:14px 30px;border-radius:40px}
.nf-hero-btn:hover{background:var(--nf-green-d)}
.nf-hero-img{flex:1 1 320px;text-align:center}
.nf-hero-img img{border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.10)}

/* ===== 섹션 공통 ===== */
.nf-sec{max-width:var(--nf-max);margin:0 auto;padding:56px 20px}
.nf-sec-tit{font-size:clamp(22px,3vw,30px);font-weight:800;text-align:center}
.nf-sec-tit a:hover{color:var(--nf-green)}
.nf-sec-desc{text-align:center;color:var(--nf-gray);margin:10px 0 32px}

/* ===== 카테고리 그리드 ===== */
.nf-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.nf-cat-grid li a{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;height:120px;border:1px solid var(--nf-line);border-radius:12px;background:var(--nf-bg);transition:.16s}
.nf-cat-grid li a:hover{background:var(--nf-green);border-color:var(--nf-green);transform:translateY(-3px)}
.nf-cat-name{font-weight:700;font-size:17px}
.nf-cat-go{font-size:13px;color:var(--nf-gray)}
.nf-cat-grid li a:hover .nf-cat-name,.nf-cat-grid li a:hover .nf-cat-go{color:#fff}

/* ===== 최신글 2열 ===== */
.nf-latest-row{max-width:var(--nf-max);margin:0 auto;padding:0 20px 64px;display:grid;grid-template-columns:1fr 1fr;gap:30px}
.nf-latest{border:1px solid var(--nf-line);border-radius:12px;padding:22px 24px}
.nf-latest .nf-sec-tit{text-align:left;margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid var(--nf-green)}

/* ===== 제품 상세 스펙표 ===== */
.nf-spec{width:100%;border-collapse:collapse;margin-top:16px}
.nf-spec th,.nf-spec td{border:1px solid var(--nf-line);padding:11px 14px;text-align:left;vertical-align:top;font-size:15px}
.nf-spec th{background:var(--nf-bg);width:130px;white-space:nowrap;font-weight:700;color:#333}

/* ===== 그누보드 기본 요소 대비/여백 보정 ===== */
#container a:hover{color:var(--nf-green)}
.pg_wrap{clear:both;text-align:center;margin:24px 0}

/* ===== 푸터 ===== */
#ft{background:#2c2f26;color:#c9ccc2;margin-top:40px}
.ft_inner{max-width:var(--nf-max);margin:0 auto;padding:34px 20px;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.ft_links{display:flex;gap:18px;flex-wrap:wrap}
.ft_links a{color:#e7e9e3;font-weight:600}
.ft_links a:hover{color:#fff}
.ft_company strong{color:#fff;font-size:16px;display:block;margin-bottom:8px}
.ft_company p{font-size:13px;line-height:1.8}
.ft_copy{margin-top:10px;color:#8b8f83;font-size:12px}
#top_btn{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border:0;border-radius:50%;background:var(--nf-green);color:#fff;font-size:18px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.2);z-index:900}
#top_btn:hover{background:var(--nf-green-d)}

/* ===== 반응형 ===== */
@media (max-width:1024px){
  .nf-cat-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
  .nf_ham{display:block}
  #gnb{position:fixed;top:0;right:-100%;width:78%;max-width:320px;height:100vh;background:#fff;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;padding:70px 0 20px;box-shadow:-6px 0 24px rgba(0,0,0,.18);transition:right .25s;overflow-y:auto;z-index:1200}
  .nf_nav_toggle:checked ~ #gnb{right:0}
  .gnb_1{flex-direction:column;gap:0}
  .gnb_1>li>a{padding:15px 22px;border-bottom:1px solid var(--nf-line)}
  .gnb_2{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-bottom:1px solid var(--nf-line);padding:0;background:var(--nf-bg);display:block}
  .gnb_2_grid{min-width:0;grid-template-columns:repeat(2,1fr)}
  .gnb_2 li a{padding:11px 34px}
  .gnb_util{padding:16px 22px;justify-content:flex-start}
  .nf-cat-grid{grid-template-columns:repeat(2,1fr)}
  .nf-latest-row{grid-template-columns:1fr}
  .nf-hero{padding:32px 20px;gap:24px}
  #container_title{font-size:22px}
}
@media (max-width:420px){
  .nf-cat-grid{grid-template-columns:1fr 1fr;gap:10px}
  .nf-hero-btn{width:100%;text-align:center}
}

/* ================= V4 보강 : 그누보드 기본 유틸 누락분 + 최신글/본문 보정 ================= */
/* 화면에서 숨겨야 하는 접근성 텍스트(인기글·새글·댓글·더보기라벨 등)가 노출되던 문제 해결 */
.sound_only, .sr-only{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 게시판 본문/첨부 이미지 반응형 (레시피 720px 이미지가 모바일에서 넘치지 않도록) */
#bo_v_con img, #bo_v_atc img, .view_content img{max-width:100% !important;height:auto}

/* 메인 최신글 박스: 테마 색·간격에 맞춘 보정 */
.nf-latest .lat{margin-bottom:0;background:transparent}
.nf-latest .lat_title{line-height:1.3;font-size:20px;font-weight:800;color:var(--nf-ink);padding-bottom:12px;border-bottom:2px solid var(--nf-green);margin-bottom:6px}
.nf-latest .lat_title a{color:var(--nf-ink)}
.nf-latest .lat_title a:hover{color:var(--nf-green)}
.nf-latest .lt_more{top:2px;right:0;width:auto;white-space:nowrap;color:var(--nf-green)}
.nf-latest .lat li a:hover{color:var(--nf-green)}
.nf-latest .lat li .hot_icon{background:#ffe1e1;color:#e74c3c;width:auto;padding:0 5px}

/* 페이지네이션 여백 보정 */
.pg_wrap{clear:both;text-align:center;margin:26px 0}