@charset "utf-8";
/* ============================================================
   common.css  —  삼죽특수가스 공통 디자인 토큰 (CSS 변수)
   ------------------------------------------------------------
   사이트 전체 색상/간격을 여기 한 곳에서 관리한다.
   PC(inc/dtd.php) + 모바일(mobile/inc/header.php) 양쪽에서 로드됨.
   → 색을 바꾸려면 아래 :root 값만 고치면 전 페이지에 반영된다.

   사용법:  color:var(--text-basic);   background:var(--blue);
   ------------------------------------------------------------
   글씨색   --text-basic  기본 본문 글씨
            --text-dark   진한 본문 글씨
            --text-title  제목·진한 글씨
            --text-mid    중간 회색(설명 본문 등)
            --text-light  흐린 글씨(주석 등)
   강조색   --blue / --blue-dark / --blue-light / --blue-pale
            --green / --green-dark / --green-deep / --green-light
            --teal / --teal-light
   기타     --line  구분선   --bg-light  옅은 배경   --white  흰색
   ============================================================ */
:root{
	/* 색상 */
	--blue:#5e80bf;          /* 메인 블루 */
	--blue-dark:#3a67ab;     /* 진한 블루 */
	--blue-light:#6a91cc;    /* 연한 블루 */
	--blue-pale:#aebfd6;     /* 파스텔 블루 (제목 등 은은한 글씨) */
	--blue-bar:#025ba6;      /* 메인 하단 띠 */
	--teal:#3982ab;          /* 청록 (조직도 경리부 등) */
	--teal-light:#6badcd;    /* 연청록 */
	--green:#8cc63e;         /* 포인트 그린 */
	--green-dark:#7cb342;    /* 진한 그린 */
	--green-deep:#649b3e;    /* 더 진한 초록 (조직도 대표 상단) */
	--green-light:#a1c982;   /* 연한 초록 (조직도 대표 하단) */
	--text-title:#333333;    /* 제목·진한 글씨 */
	--text-dark:#444444;     /* 진한 본문 글씨 */
	--text-basic:#5a5a5a;    /* 기본 본문 글씨 */
	--text-mid:#858585;      /* 중간 회색 (제품설명 본문 등, 원본 이미지색) */
	--text-light:#8a8a8a;    /* 흐린 글씨 */
	--line:#d6d6d6;          /* 보더 라인 */
	--bg-light:#f4f6f9;      /* 옅은 배경 */
	--white:#ffffff;

	/* 레이아웃 */
	--wrap:1200px;           /* 콘텐츠 최대 폭 */
	--pad:20px;              /* 컨테이너 좌우 여백 */
	--gnb-height:42px;       /* GNB 높이 (원본 #gnb 42px 기준) */

	/* 타이포 */
	--font:'Pretendard','Noto Sans KR','Nanum Gothic',sans-serif;
}

/* ===== SEO 숨김 텍스트(.description) — 전역 공용 =====
   사이트 전체에서 .description 은 검색 키워드용 숨김 블록(흰글씨·z-index:-9999)으로만 쓰임(보이는 콘텐츠 없음).
   position:absolute 가 본문 위에 겹쳐 보이거나 가로스크롤을 만드는 것을 방지하기 위해
   DOM 엔 남겨 크롤러는 읽되 화면엔 절대 안 보이게 visually-hidden 으로 고정. (인라인 style 을 !important 로 덮음) */
.description{
	position:absolute !important; width:1px !important; height:1px !important;
	min-width:0 !important; max-width:none !important;
	margin:-1px !important; padding:0 !important; border:0 !important;
	overflow:hidden !important; clip:rect(0,0,0,0) !important; clip-path:inset(50%) !important;
	white-space:nowrap !important;
}