@charset "utf-8";
/* ============================================================
   (주)하람 A안 — 반응형 (2026-09-11 작성, 적용 대기 상태)

   ★ 이 파일은 지금 "아무 일도 하지 않습니다".
     layout_index.php / layout_content.php 의 viewport 가
       width=device-width, initial-scale=0.1
     이라 모바일에서도 레이아웃 뷰포트가 ~3750px 이 되어 아래 미디어쿼리가 하나도 발동하지 않습니다.

   ★ 켜는 방법 (고객 승인 시)
     두 레이아웃의 viewport 를 아래로 바꾸면 끝입니다.
       <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
     되돌리려면 원래 값으로 복구하면 즉시 데스크탑 전용으로 돌아갑니다.
     (전환 스크립트: /_tools/responsive_switch.sh)

   ★ 담당 범위
     기존 각 파일(main_a/sub_a/각 뷰)의 미디어쿼리는 그대로 두고,
     여기서는 "그 파일들이 다루지 않은 구조적 문제"만 처리합니다.
       1) 데스크탑 가로 메뉴가 모바일에서 안 숨겨지는 문제  ← 가장 치명적
       2) CMS 모바일 메뉴(햄버거·슬라이드 패널)의 A안 스타일
       3) 서브페이지 좌측메뉴를 상단 가로 탭으로 전환
       4) 표·폼이 화면을 넘치는 문제
       5) 플로팅 버튼(견적함·상담) 겹침
       6) 터치 타깃 최소 크기
   ============================================================ */


/* ==========================================================
   1. 헤더 · 내비게이션          ~1280px (CMS 햄버거 등장 지점)
   ========================================================== */
@media screen and (max-width:1280px) {

	/* ★ 핵심: 데스크탑 가로 메뉴를 감춘다.
	   CMS 반응형 CSS(responsive_common.css)는 햄버거만 띄우고 #nav 는 건드리지 않아,
	   이게 없으면 모바일에서 가로 메뉴와 햄버거가 동시에 나오고 메뉴가 줄바꿈되어 깨진다. */
	div#wrap div#header div#nav { display:none; }
	div#wrap div#header div.util-bar { display:none; }

	div#wrap div#header div.header-in { background:var(--ha-green-deep); border-bottom:none; }
	div#wrap div#header div.header-row { height:64px; }
	div#wrap div#header h1 img { width:120px; }

	/* 메인은 헤더가 히어로 위 투명 오버레이라 로고만 떠 있게 된다 → 배경을 준다 */
	div#wrap div#header { background:var(--ha-green-deep); position:relative; }

	/* 햄버거 버튼 — CMS 기본은 남색(#20355a) 막대라 딥그린 헤더 위에서 안 보인다 */
	.btn-mobile-menu { top:22px; right:18px; width:26px; height:20px; }
	.btn-mobile-menu span { background:#fff; height:2px; }
	.btn-mobile-menu.active span { background:#fff; }
	.btn-mobile-menu.active .middle { opacity:0; }

	/* 슬라이드 메뉴 패널 — CMS(responsive_common.css) 기본값(파란 하이라이트 #03a8e3,
	   li 자체 패딩, 회색 하위배경)을 전부 덮어 A안 톤으로 통일한다 */
	.site-menus { width:300px; right:-300px; padding:70px 0 40px; background:#fff; box-shadow:-8px 0 30px rgba(4,40,22,.18); }
	.site-menus .top-add-menu { padding:0 24px 16px; border-bottom:1px solid var(--ha-line); margin-bottom:8px; }
	.site-menus .top-add-menu a { display:inline-block; margin-right:14px; font-size:13px; font-weight:700; color:var(--ha-green); text-decoration:none; }
	.site-menus > ul { margin:0; padding:0; list-style:none; }
	.site-menus > ul > li { border-bottom:1px solid var(--ha-line); }
	.site-menus > ul > li:nth-child(1) { border-top:none; }
	.site-menus > ul > li > div { padding:0; }
	.site-menus > ul > li.on { background:none; color:inherit; }
	.site-menus > ul > li > div > a,
	.site-menus > ul > li > a { display:block; padding:15px 24px; font-size:16px; font-weight:700; color:var(--ha-ink); text-decoration:none; }
	.site-menus > ul > li.on > div a { color:var(--ha-green); }
	.site-menus > ul > li > ul { margin:0; padding:4px 0 10px; list-style:none; background:var(--ha-bg-soft); }
	.site-menus > ul > li ul li { padding:0; background:none; border-top:none; }
	.site-menus > ul > li ul li div { padding:0; }
	.site-menus > ul > li > ul > li a { display:block; padding:10px 24px 10px 36px; font-size:14.5px; color:var(--ha-gray); text-decoration:none; margin:0; }
	.site-menus > ul > li > ul > li a strong { color:var(--ha-green); font-weight:700; }
	.site-menus > ul > li span { top:16px; right:20px; }
	.bg-dimdown { background:rgba(4,40,22,.55); }
}


/* ==========================================================
   2. 서브페이지 레이아웃         ~1280px
   좌측메뉴(220px)를 본문 위 가로 스크롤 탭으로 바꾼다
   ★ CMS(responsive_content.css)가 1280 이하에서 left_menu 를
     display:none 으로 숨기므로 여기서 되살린다 (이 파일이 나중에 로드되어 이긴다)
   ========================================================== */
@media screen and (max-width:1280px) {

	/* CMS(responsive_content.css)가 #section 을 width:100% 로 풀어버려 본문이 화면 가장자리에 붙는다 → 공통 좌우 여백 */
	div#wrap div#container div#section { padding:0 18px; box-sizing:border-box; }

	div#wrap div#container div#section div.left_menu {
		display:block; width:100%; float:none; padding:0 0 22px; margin:0;
	}
	div#wrap div#container div#section div.left_menu h2 {
		padding:16px 18px; font-size:17px; border-radius:4px 4px 0 0;
	}
	/* 세로 목록 → 가로 스크롤 탭 */
	div#wrap div#container div#section div.left_menu > ul {
		display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch;
		border-top:none; border-bottom:1px solid var(--ha-line); padding:0;
		scrollbar-width:none;
	}
	div#wrap div#container div#section div.left_menu > ul::-webkit-scrollbar { display:none; }
	div#wrap div#container div#section div.left_menu > ul > li {
		flex:none; border-bottom:none; border-left:none !important; background:none !important;
	}
	div#wrap div#container div#section div.left_menu > ul > li > a {
		padding:13px 16px !important; font-size:14.5px; white-space:nowrap; border-bottom:2px solid transparent;
	}
	div#wrap div#container div#section div.left_menu > ul > li:has(> a > strong) > a {
		border-bottom-color:var(--ha-green);
	}
	/* 2차 하위메뉴는 가로 탭에 담기 어려워 감춘다 (본문에서 이동 가능) */
	div#wrap div#container div#section div.left_menu > ul > li > ul { display:none; }

	div#wrap div#container div#section div.right_content {
		width:100%; float:none; border-left:none; padding-left:0; padding-right:0;
	}
}


/* ==========================================================
   3. 표 · 폼                     ~768px
   ========================================================== */
@media screen and (max-width:768px) {

	/* 넓은 표는 표 자체를 가로 스크롤 영역으로 (마크업에 래퍼를 못 넣으므로) */
	.pdb .pdb-vspec {
		display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap;
	}
	/* 중앙연구소 개요·연구분야 표는 th|td 2칸이라 스크롤보다 줄바꿈이 낫다 (주소가 잘려 보였음) */
	div#wrap .crh .crh-profile th, div#wrap .crh .crh-rnd th { width:84px; padding:12px 10px; white-space:normal; }
	div#wrap .crh .crh-profile td, div#wrap .crh .crh-rnd td { padding:12px 10px; }

	/* 부서별 연락처 표(contact_us) — 래퍼 .table-responsive 는 어디에도 정의가 없어 여기서 처리 */
	.cth .table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; }
	.cth .cth-dept { min-width:640px; }

	/* CMS 폼(1:1 문의·게시판 글쓰기)은 th|td 2단 표라 좁은 화면에서 th 가 뭉개진다 → 세로 스택 */
	div#wrap div#container div.boardWriteContainer table,
	div#wrap div#container div.online_inquiry table { display:block; width:100%; }
	div#wrap div#container div.boardWriteContainer table colgroup,
	div#wrap div#container div.online_inquiry table colgroup { display:none; }
	div#wrap div#container div.boardWriteContainer table tbody,
	div#wrap div#container div.boardWriteContainer table tr,
	div#wrap div#container div.online_inquiry table tbody,
	div#wrap div#container div.online_inquiry table tr { display:block; width:100%; }
	div#wrap div#container div.boardWriteContainer table th,
	div#wrap div#container div.boardWriteContainer table td,
	div#wrap div#container div.online_inquiry table th,
	div#wrap div#container div.online_inquiry table td {
		display:block; width:100% !important; text-align:left; border:none;
	}
	div#wrap div#container div.boardWriteContainer table th,
	div#wrap div#container div.online_inquiry table th {
		padding:14px 0 6px; background:none; font-size:13.5px; font-weight:700; color:var(--ha-green);
	}
	div#wrap div#container div.boardWriteContainer table td,
	div#wrap div#container div.online_inquiry table td { padding:0 0 14px; border-bottom:1px solid var(--ha-line); }

	/* 회원 폼(회원정보 수정 .member_form — 회원가입 공용 / 회원탈퇴 .withdrawContainer)도 같은 세로 스택 */
	div#wrap div#container div.member_form table,
	div#wrap div#container div.withdrawContainer table { display:block; width:100%; }
	div#wrap div#container div.member_form table caption,
	div#wrap div#container div.member_form table colgroup,
	div#wrap div#container div.withdrawContainer table colgroup { display:none; }
	div#wrap div#container div.member_form table tbody,
	div#wrap div#container div.member_form table tr,
	div#wrap div#container div.withdrawContainer table tbody,
	div#wrap div#container div.withdrawContainer table tr { display:block; width:100%; }
	div#wrap div#container div.member_form table th,
	div#wrap div#container div.member_form table td,
	div#wrap div#container div.withdrawContainer table th,
	div#wrap div#container div.withdrawContainer table td {
		display:block; width:100% !important; text-align:left; border:none; box-sizing:border-box;
	}
	div#wrap div#container div.member_form table th,
	div#wrap div#container div.withdrawContainer table th {
		padding:14px 0 6px; background:none; font-size:13.5px; font-weight:700; color:var(--ha-green);
	}
	div#wrap div#container div.member_form table td,
	div#wrap div#container div.withdrawContainer table td { padding:0 0 14px; border-bottom:1px solid var(--ha-line); }
	div#wrap div#container div.withdrawContainer .captcha_cell img { max-width:100%; height:auto; } /*캡차 이미지 넘침 방지*/
	div#wrap div#container div.member_form .bottom_button input,
	div#wrap div#container div.withdrawContainer .bottom_button input,
	div#wrap div#container div.withdrawContainer .bottom_button a { width:100%; margin:0 0 8px; box-sizing:border-box; text-align:center; }

	/* 입력 요소는 화면 폭에 맞춘다 (CMS 가 size 속성으로 폭을 잡아둔 곳이 많다) */
	div#wrap div#container input[type="text"],
	div#wrap div#container input[type="password"],
	div#wrap div#container input[type="email"],
	div#wrap div#container input[type="tel"],
	div#wrap div#container select,
	div#wrap div#container textarea { max-width:100%; width:100%; box-sizing:border-box; }
	div#wrap div#container input[type="checkbox"],
	div#wrap div#container input[type="radio"] { width:auto; }
}


/* ==========================================================
   4. 플로팅 버튼 · 터치 타깃     ~640px
   ========================================================== */
@media screen and (max-width:640px) {

	/* 상담(.ha-float)과 견적함(.pqc)이 같은 모서리에 쌓여 화면을 가린다 → 가로로 편다 */
	.ha-float { right:12px; bottom:12px; display:flex; flex-direction:row-reverse; gap:8px; }
	.ha-float a { width:50px; height:50px; margin-top:0; }
	.ha-float a i { font-size:15px; }
	.ha-float a span { font-size:9px; }
	.pqc { right:12px; bottom:72px; width:50px; height:50px; line-height:50px; font-size:17px; }
	.pqc-panel { right:12px; left:12px; bottom:132px; width:auto; }

	/* 터치 타깃 최소 44px — 작은 링크·버튼이 눌리지 않는 것을 막는다 */
	div#wrap div#container .boardPageNav a,
	div#wrap div#container .pdb-paging a,
	div#wrap div#container .pdb-paging strong { min-width:44px; min-height:44px; line-height:44px; padding:0; }
	div#wrap div#footer .ft-top a { display:inline-block; padding:8px 0; }

	/* 가로 스크롤 유발 방지 (긴 URL·이메일 등) */
	div#wrap { overflow-x:hidden; }
	div#wrap div#container { word-break:keep-all; overflow-wrap:anywhere; }
}


/* ==========================================================
   5. 미디어쿼리가 없던 페이지 보강
   location.php / online_inquiry.php / partners_view.php
   (location 의 .way/.con_bx 는 정의된 스타일이 없는 일반 블록이라
    원래부터 세로 스택 — 넘치는 것은 탭 스트립뿐이다)
   ========================================================== */
@media screen and (max-width:640px) {
	/* 오시는길 상단 탭 — padding 12px 40px 고정이라 375px 에서 넘친다 */
	.location_tab { flex-wrap:wrap; gap:8px; }
	.location_tab li { padding:10px 20px; font-size:14px; }

	/* 파트너 상세 로고 박스 */
	.ptn-detail .ptn-detail-logo { display:block; padding:20px; text-align:center; }
	.ptn-detail .ptn-detail-logo img { max-width:100%; }

	.online_inquiry .bottom_button .btn { width:100%; margin:0 0 8px; }
}


/* ==========================================================
   6. 인쇄 (미팅 자료·견적서 출력 대비)
   ========================================================== */
@media print {
	div#wrap div#header, div#wrap div#footer,
	.ha-float, .pqc, .pqc-panel, div#wrap div.quick,
	.btn-mobile-menu, .site-menus, .bg-dimdown { display:none !important; }
	div#wrap div#container { width:100% !important; padding:0 !important; }
	a[href]:after { content:""; }
}