@charset "utf-8";
/* ============================================================
   m_gas.css — 모바일 가스관련자료(m_sub_52~59) 공용 스타일
   - 기존 각 페이지 인라인 <style> 을 한 곳으로 통합
   - 색상은 /css/common.css 토큰 사용 (모바일 헤더에서 로드)
   - 표 헤더 격자무늬는 모바일이 sub_02_05_common.css 미로드 → 자체 포함
   ============================================================ */

/* ----- 래퍼 / 페이지 제목 ----- */
.m-gas{ text-align:left; padding:0 1cqw 8cqw; }
.m-gas-title{ margin:0 0 5cqw; font-size:7cqw; font-weight:800; color:var(--green-light); letter-spacing:-0.2cqw; }

/* ----- 섹션 (sub_52 환산표 / sub_54 기술자료) ----- */
.m-gas-sec{ margin-bottom:7cqw; }
.m-gas-sec-h{ margin:0 0 1cqw; font-size:4.2cqw; font-weight:bold; color:var(--text-title); position:relative; padding-left:3cqw; }
.m-gas-sec-h::before{ content:''; position:absolute; left:0; top:0.7cqw; width:1.4cqw; height:3.6cqw; background:var(--blue); border-radius:0.3cqw; }

/* ----- 제품 블록 (사진+표 — sub_53/55/56) ----- */
.m-rb{ margin-bottom:9cqw; }
.m-rb-title{ margin:0 0 1cqw; font-size:3.9cqw; font-weight:bold; color:#3a9d5d; padding-bottom:2cqw; border-bottom:2px solid #e3ebf3; line-height:1.45; }
/* 표 등으로 끝난 앞 블록과 다음 섹션 제목이 붙어 보이지 않도록 — 두 번째 블록부터 제목 위 간격(padding은 margin 상쇄 영향 없음) */
.m-rb + .m-rb > .m-rb-title{ padding-top:7cqw; }
.m-rb-title .warn{ display:block; margin-top:1cqw; color:#d2453f; font-size:3cqw; font-weight:600; }
.m-rb-sub{ margin:4cqw 0 1cqw; font-size:3.6cqw; font-weight:bold; color:var(--text-title); }
.m-rb-photo{ text-align:center; margin:0 0 2cqw; }
.m-rb-photo img{ max-width:60%; height:auto; }
.m-rb-photo.full img{ max-width:100%; width:100%; }
.m-rb-note{ margin-top:1.5cqw; font-size:2.9cqw; color:#444; line-height:1.6; }
.m-rb-desc p{ margin:0 0 3cqw; font-size:3.3cqw; line-height:1.7; color:var(--text-basic); word-break:keep-all; }
.m-rb-desc ul{ list-style:none; margin:0 0 4cqw; padding:0; }
.m-rb-desc li{ position:relative; padding-left:3cqw; margin:1.2cqw 0; font-size:3.1cqw; line-height:1.55; color:var(--text-basic); word-break:keep-all; }
.m-rb-desc li::before{ content:'·'; position:absolute; left:0.8cqw; font-weight:bold; }

/* ----- 표 공통 ----- */
.m-gd{ width:100%; border-collapse:collapse; table-layout:fixed; font-size:2.6cqw; }
.m-gd th,.m-gd td{ border:1px solid var(--line); padding:1.5cqw 0.5cqw; text-align:center; vertical-align:middle; color:var(--text-basic); line-height:1.4; word-break:keep-all; }
.m-gd thead th{ color:var(--blue-dark); font-weight:bold; background-color:#b2c5e3; background-image:repeating-linear-gradient(45deg,transparent 0,transparent 1cqw,rgba(0,0,0,.045) 1cqw,rgba(0,0,0,.045) 1.5cqw); }
.m-gd thead th.sub{ background-color:#c8d6ed; font-weight:600; }
.m-gd tbody th{ color:var(--text-title); font-weight:bold; background:#eef2f8; }
.m-gd tbody td{ background:#f8f8f8; font-weight:500; }
.m-gd tbody th.colh{ background:#d2ddee; color:var(--blue-dark); }
.m-gd .compo{ line-height:1.55; }
.m-gd .conn{ line-height:1.7; }
.m-gd .grp{ display:block; }
.m-gd .grp + .grp{ margin-top:1.3cqw; padding-top:1.3cqw; border-top:1px dashed #d4d9e2; }
.m-gd .tox{ color:#d2453f; font-weight:700; }
.m-gd .note{ color:var(--text-light); }
.m-gd small{ display:block; font-weight:500; font-size:0.83em; color:var(--text-mid); margin-top:0.4cqw; }
.m-gd sub,.m-gd sup{ font-size:0.72em; }
/* 열 많은 표 — 폰트/패딩 축소 */
.m-gd.c6{ font-size:2.3cqw; } .m-gd.c6 th,.m-gd.c6 td{ padding:1.2cqw 0.3cqw; }
.m-gd.c7{ font-size:2.15cqw; } .m-gd.c7 th,.m-gd.c7 td{ padding:1.1cqw 0.3cqw; }
.m-gd.c8{ font-size:1.95cqw; } .m-gd.c8 th,.m-gd.c8 td{ padding:0.9cqw 0.2cqw; }
/* sub_52 제원표 전용 (도색 칸 — 색이름 숨기고 아이콘만) */
.m-gd.spec{ font-size:2.35cqw; } .m-gd.spec th,.m-gd.spec td{ padding:1.4cqw 0.4cqw; }
.m-gd.spec .nm{ display:none; }
.m-gd.spec .m-cyl{ width:4.5cqw; height:6.5cqw; margin-top:1.5cqw; }

/* ----- 용기 색상 아이콘 (sub_52 도색) ----- */
.m-chip{ display:inline-flex; flex-direction:column; align-items:center; gap:0.8cqw; line-height:1; }
.m-cyl{ position:relative; width:5cqw; height:7.5cqw; margin-top:1.8cqw; border-radius:1.8cqw 1.8cqw 0.8cqw 0.8cqw; border:1px solid rgba(0,0,0,.22); box-shadow:inset 0 -1.4cqw 1.8cqw rgba(0,0,0,.2); }
.m-cyl::before{ content:''; position:absolute; left:0.3cqw; right:0.3cqw; top:0; height:1.5cqw; border-radius:1.6cqw 1.6cqw 0 0; background:rgba(0,0,0,.17); }
.m-cyl::after{ content:''; position:absolute; top:-1.5cqw; left:50%; transform:translateX(-50%); width:2cqw; height:1.7cqw; background:linear-gradient(#3c4c7d,#232f54); border:1px solid rgba(0,0,0,.3); border-radius:0.6cqw 0.6cqw 0.2cqw 0.2cqw; }
.m-chip .nm{ font-size:2.4cqw; color:var(--text-mid); font-weight:600; white-space:nowrap; }
.c-green{background:#2f9e4e;}.c-gray{background:#cfd3d9;}.c-orange{background:#ef7d18;}.c-white{background:#fff;border-color:rgba(0,0,0,.28);}.c-blue{background:#2f74cf;}.c-yellow{background:#f3c40f;}

/* ----- 텍스트형 (sub_57 재검사 / sub_58 신고 / sub_59 충전기한) ----- */
.m-reg{ text-align:left; padding:0 1cqw 8cqw; }
.m-reg-title{ margin:0 0 5cqw; font-size:7cqw; font-weight:800; color:var(--green-light); letter-spacing:-0.2cqw; }
.m-reg-num{ margin:6cqw 0 3cqw; font-size:4.4cqw; font-weight:bold; color:#6e7480; line-height:1.35; }
.m-reg-num:first-child{ margin-top:0; }
.m-reg-qa{ margin:5cqw 0 2cqw; font-size:4cqw; font-weight:bold; color:#6e7480; }
.m-reg p{ margin:0 0 3.5cqw; font-size:3.6cqw; line-height:1.75; color:var(--text-basic); word-break:keep-all; }
.m-reg p:last-child{ margin-bottom:0; }

/* ----- 강조 (공통) ----- */
.hl{ color:#4a90c4; font-weight:700; }

/* ----- 찾아오시는길 (sub_61) ----- */
.m-map{ width:100%; overflow:hidden; margin:0 0 6cqw; }
.m-map .root_daum_roughmap.root_daum_roughmap_landing{ width:100% !important; max-width:100% !important; margin:0 auto; }
.m-map .root_daum_roughmap .map_border,
.m-map .root_daum_roughmap .map_container{ max-width:100% !important; box-sizing:border-box; }
.m-contact{ width:100%; border-collapse:collapse; border-top:1px solid #6a91cc; border-bottom:1px solid #6a91cc; background:#f7fafd; font-size:3.4cqw; }
.m-contact tr{ border-bottom:1px solid #dce5f2; }
.m-contact tr:last-child{ border-bottom:0; }
.m-contact th{ width:22cqw; padding:3cqw 2cqw; color:#6a91cc; font-weight:bold; text-align:center; white-space:nowrap; vertical-align:middle; }
.m-contact td{ padding:3cqw 3cqw; color:#555; text-align:left; vertical-align:middle; word-break:keep-all; line-height:1.5; }
.m-contact td a{ color:#555; text-decoration:none; }
.m-contact .sep{ display:inline-block; margin:0 2cqw; color:#c5d3e8; }