@charset "utf-8";
/* ============================================================
   (주)하람 A안 공통 스킨 — 헤더/푸터 (메인·서브 공용)
   - layout_index.php: /css/main_a.css 앞에 로드 (메인은 헤더를 투명 오버레이로 override)
   - layout_content.php: /css/content.css 뒤에 로드
   - CMS 출력 마크업(#nav, .top_menu)은 구조 변경 없이 스타일만 입힘
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@200;300;400;600;700;800&display=swap');

:root {
	--ha-green: #076633;
	--ha-green-deep: #04351C;
	--ha-green-dark: #17211B; /* 2026-09-10: 구 #14241B — ink와 대비 1.18:1 로 사실상 같은 색이라 ink 로 통합.
	                             기존 참조가 깨지지 않게 토큰은 남겨둠. 새 코드에서는 --ha-ink 사용 */
	--ha-green-mid: #2E7D4F;  /* 2026-09-10 추가 — 밝기 15.8%. green(9.8%)과 gray(18.7%) 사이 공백을 메우는 보조색.
	                             흰 글자 대비 5.0:1 로 글자를 올려도 안전. 주 강조는 계속 --ha-green 을 쓸 것 */
	--ha-lime-ink: #4E6B0F;   /* 밝은 배경용 라임. 원본 라임은 흰 배경 대비 2.1:1 로 글자에 못 씀(이건 5.9:1) */
	--ha-lime: #96C11F;
	--ha-ink: #17211B;
	--ha-gray: #66736C;  /* 2026-09-10: 구 #6E7B74 는 흰 배경 대비 4.42:1 로 기준(4.5) 미달 → 4.96:1 */
	--ha-line: #E3E8E4;
	--ha-bg-soft: #F4F7F3;
}

div#wrap { font-family:'Noto Sans KR','Noto Sans CJK KR','Malgun Gothic',sans-serif; color:var(--ha-ink); letter-spacing:-.02em; -webkit-font-smoothing:antialiased; background:#fff; overflow-x:hidden; }
div#wrap .wrap-in { width:1360px; max-width:94%; margin:0 auto; }
div#wrap img { max-width:100%; }
div#wrap div#separation { display:none; }

/* 공통 타이포 */
.ha-eye { font-size:13px; letter-spacing:.22em; color:var(--ha-lime); font-weight:700; margin-bottom:18px; }
.ha-eye.c { text-align:center; }
.ha-h2 { font-size:42px; line-height:1.34; font-weight:300; color:var(--ha-ink); }
.ha-h2 b { font-weight:800; }
.ha-h2.w { color:#fff; }
.ha-h2.c { text-align:center; }
.ha-h3 { font-size:26px; font-weight:800; margin:0; }
.ha-more { margin-top:34px; font-size:15px; font-weight:700; color:var(--ha-green); border-bottom:2px solid var(--ha-green); display:inline-block; padding-bottom:6px; text-decoration:none; }
.ha-more.w { color:#fff; border-color:var(--ha-lime); }
.ha-sec { padding:118px 0; }

/* ============================== header ============================== */
div#wrap div#header { position:relative; width:auto; margin:0; float:none; background:var(--ha-green-deep); z-index:50; }
div#wrap div#header hr { display:none; }

/* 유틸바 (top_menu = CMS GNB) */
div#wrap div#header div.util-bar { height:40px; background:var(--ha-green-deep); border-bottom:1px solid rgba(255,255,255,.10); }
div#wrap div#header div.top_menu { float:none; width:auto; display:flex; justify-content:flex-end; align-items:center; height:40px; }
div#wrap div#header div.top_menu ul { float:none; margin:0; padding:0; display:flex; }
div#wrap div#header div.top_menu ul li { float:none; margin:0 0 0 26px; }
div#wrap div#header div.top_menu ul li a { font-size:12.5px; color:rgba(255,255,255,.62); letter-spacing:.02em; text-decoration:none; }
div#wrap div#header div.top_menu ul li a:hover,
div#wrap div#header div.top_menu ul li a strong { color:#fff; font-weight:700; }

/* 로고 + 주메뉴 */
div#wrap div#header div.header-in { border-bottom:1px solid rgba(255,255,255,.18); }
div#wrap div#header div.header-row { display:flex; align-items:center; height:92px; position:relative; }
div#wrap div#header h1 { float:none; margin:0; line-height:0; }
div#wrap div#header h1 img { width:158px; height:auto; }

/* 주메뉴 (#nav = CMS LNB) */
div#wrap div#header div#nav { float:none; margin:0 0 0 88px; padding:0; flex:1; }
div#wrap div#header div#nav > ul { float:none; margin:0; padding:0; display:flex; }
div#wrap div#header div#nav > ul > li { float:none; list-style:none; border:none; margin:0; padding:0 40px 0 0; position:relative; }
div#wrap div#header div#nav > ul > li > div > a { display:block; line-height:92px; font-size:16.5px; font-weight:600; color:#fff; text-decoration:none; }
div#wrap div#header div#nav > ul > li > div > a:hover,
div#wrap div#header div#nav > ul > li > div > a strong { color:var(--ha-lime); }
/* 드롭다운 */
div#wrap div#header div#nav > ul > li > ul { display:none; position:absolute; top:92px; left:-24px; float:none; min-width:190px; margin:0; padding:14px 0; background:#fff; border-top:3px solid var(--ha-lime); box-shadow:0 14px 34px rgba(4,40,22,.16); z-index:60; }
div#wrap div#header div#nav > ul > li > ul > li { float:none; list-style:none; border:none; padding:0; margin:0; }
div#wrap div#header div#nav > ul > li > ul > li a { display:block; padding:9px 24px; font-size:14.5px; color:#3d4a42; text-decoration:none; white-space:nowrap; }
div#wrap div#header div#nav > ul > li > ul > li a:hover,
div#wrap div#header div#nav > ul > li > ul > li a strong { color:var(--ha-green); font-weight:700; }

/* ============================== footer ============================== */
div#wrap div#footer { clear:both; padding:0; background:var(--ha-green-dark); }
div#wrap div#footer .ft-top { border-bottom:1px solid rgba(255,255,255,.13); padding:22px 0; overflow:hidden; }
div#wrap div#footer .ft-top a { font-size:13.5px; color:rgba(255,255,255,.62); margin-right:30px; text-decoration:none; font-weight:normal; }
div#wrap div#footer .ft-top a:hover { color:#fff; }
div#wrap div#footer .ft-top a.ft-b { color:#fff; font-weight:800; }
div#wrap div#footer .ft-r { display:flex; padding:48px 0 60px; }
div#wrap div#footer .ft-l { width:330px; }
div#wrap div#footer .ft-l img { width:148px; display:block; opacity:.9; }
div#wrap div#footer .ft-slog { margin-top:18px; font-size:12.5px; color:rgba(255,255,255,.45); }
div#wrap div#footer div.copyright { width:auto; margin:0; padding-top:4px; line-height:normal; }
div#wrap div#footer div.copyright .ft-c { font-size:14px; color:rgba(255,255,255,.86); font-weight:700; margin-bottom:14px; }
div#wrap div#footer div.copyright .ft-a { font-size:13px; color:rgba(255,255,255,.55); line-height:2.0; }
div#wrap div#footer div.copyright .ft-cp { margin-top:22px; font-size:12.5px; color:rgba(255,255,255,.42); letter-spacing:.02em; }

/* ============================== [자료 확인 중] 표기 일괄 숨김 ==============================
   고객 지시로 전 페이지의 자료 대기 표기를 숨김 처리.
   자료 확보 후 해당 페이지 문구를 교체하고 나면 이 블록은 제거해도 됨. */
.abh-tbd, .crh-tbd, .fsl-tbd, .cth-tbd, .loc_tbd { display:none !important; }
.fsl-note { display:none !important; } /* 식품 솔루션 CAPA 안내문(자료 대기 내용뿐) */

/* ============================== 플로팅 상담 버튼 ============================== */
.ha-float { position:fixed; right:24px; bottom:24px; z-index:1400; }
.ha-float a { display:flex; flex-direction:column; align-items:center; justify-content:center; width:62px; height:62px; border-radius:50%; text-decoration:none; text-align:center; margin-top:10px; box-shadow:0 8px 22px rgba(4,40,22,.28); }
.ha-float a i { font-size:17px; }
.ha-float a span { display:block; font-size:10px; font-weight:800; line-height:1.2; margin-top:3px; }
.ha-float .ha-fk { background:#FEE500; color:#3C1E1E; }
.ha-float .ha-fk:hover { background:#f5d900; }
.ha-float .ha-fo { background:var(--ha-green); color:#fff; }
.ha-float .ha-fo:hover { background:var(--ha-green-deep); }

/* ============================== responsive ============================== */
@media screen and (max-width:1024px) {
	div#wrap div#header div.util-bar { display:none; }
	div#wrap div#header div.header-in { background:var(--ha-green-deep); border-bottom:none; }
	.ha-sec { padding:80px 0; }
	.ha-h2 { font-size:32px; }
	div#wrap div#footer .ft-r { flex-wrap:wrap; }
	div#wrap div#footer .ft-l { width:100%; margin-bottom:32px; }
}

@media screen and (max-width:640px) {
	/* 모바일 공통 좌우 여백 — max-width 94% 는 390px 화면에서 12px 뿐이라 가장자리에 붙어 보인다 */
	div#wrap .wrap-in { max-width:100%; padding-left:18px; padding-right:18px; box-sizing:border-box; }
	.ha-h2 { font-size:26px; }
	.ha-h2 br { display:none; }
	div#wrap div#footer .ft-top a { margin-right:16px; }
}

/* ============================== 라임 글자 대비 보정 (2026-09-10) ==============================
   --ha-lime(#96C11F)은 명도 45%라 흰 배경 위 글자로 쓰면 대비 2.1:1 — 기준(4.5:1) 미달이라
   13px 자간 넓은 라벨이 실제로 잘 안 읽힌다. 밝은 배경에 올라가는 라벨·강조 텍스트만
   --ha-lime-ink(5.9:1)로 바꾸고, 어두운 배경(히어로·중앙연구소·스마트파인더 섹션·헤더·푸터)은 그대로 둔다.
   ※ 각 페이지 <style> 블록이 뒤에 오므로 div#wrap 접두사로 우선순위를 올린다. */
div#wrap .ha-eye,
div#wrap .crh .crh-fn, div#wrap .crh .crh-ps em,
div#wrap .abh .abh-stn em, div#wrap .abh .abh-ev2 p span, div#wrap .abh .abh-ctn,
div#wrap .abh .abh-vd b, div#wrap .abh .abh-gonav a em,
div#wrap .fsl .fsl-st em, div#wrap .fsl .fsl-pc em, div#wrap .fsl .fsl-cn,
div#wrap .sfd .sfd-ptx em, div#wrap .sfd .sfd-all a em, div#wrap .sfd .sfd-rh i,
div#wrap .pdb .pdb-vh em, div#wrap .pdc .pdc-tx em,
div#wrap .ptn .ptn-fi.on, div#wrap .ptn .ptn-pc em,
div#wrap .cth .cth-cate, div#wrap .cth .cth-mi i, div#wrap .cth .cth-b i,
div#wrap div.sec-about .st-n em,
div#wrap div.sec-pd .pd-scap em, div#wrap div.sec-pd .pd-scap:before,
div#wrap div.sec-fd .fd-ctx em { color:var(--ha-lime-ink); }

/* 어두운 배경 위에서는 원래 라임을 유지 (여기서 대비는 충분하다)
   ※ 배경이 어두운 섹션을 여기에 빠짐없이 넣어야 한다. sec-fd 를 빠뜨려 SMART FINDER 라벨이
      대비 1.21:1 로 안 보였던 적 있음(2026-09-10). 어두운 섹션을 새로 만들면 반드시 여기 추가할 것. */
div#wrap div.sec-rd .ha-eye,
div#wrap div.hero .ha-eye,
div#wrap div.hero .hero-eye,
div#wrap div.sec-bf .ha-eye, /* 브랜드 필름(다크 밴드) 2026-11-03 */
div#wrap div#footer .ha-eye { color:var(--ha-lime); }

/* 스마트파인더 섹션(중간톤 #2E7D4F)은 라임으로 4.5:1 을 만들 수 없다
   — 가장 밝은 라임(#EAF7CE)도 4.49 라 사실상 흰색이 되어버린다. 그래서 흰색으로 간다.
   이 섹션의 라임 포인트는 [찾아보기] 버튼(라임 배경)이 담당한다. */
div#wrap div.sec-fd .ha-eye { color:#fff; }

/* ============================== 2026-09-11 레퍼런스 채택 A5 — 각진 버튼 (서브페이지·게시판) ==============================
   메인 버튼은 main_a.css. 각 페이지 <style> 이 뒤에 오므로 div#wrap 접두사로 이긴다 */
div#wrap .crh .crh-more, div#wrap .abh .abh-more a,
div#wrap .pdb .pdb-btn-list, div#wrap .pdb .pdb-b-view, div#wrap .pdb .pdb-vbtn a,
div#wrap div#container .btn { border-radius:0; }