/* ============================================================================
   geumheuk-b2b.com  —  overrides.css
   간격·정렬·크기·모바일 정밀 보정 전용. 기존 인라인 CSS는 불변.
   이 <link> 한 줄만 제거하면 100% 원복됨.
   RTL 대응: 좌우는 전부 margin-inline / padding-inline (논리 속성) 사용.
   2026-10-21
   ============================================================================ */

:root{
  /* 섹션 상하 여백 (8px 그리드) — 한 곳에서 조절 가능 */
  --sec-pad: 144px;   /* PC */
}
@media (max-width:1024px){ :root{ --sec-pad:112px; } }  /* 태블릿 */
@media (max-width:640px){  :root{ --sec-pad:88px;  } }  /* 모바일 */

/* ───────────────────────── A. 간격 체계 (8px 그리드) ───────────────────────── */
section.sec{ padding-top:var(--sec-pad); padding-bottom:var(--sec-pad); }

/* 소제목(kick) → 제목 8px / 제목 → 설명 12px / 설명 → 본문 48px(모바일 32px)
   원본이 .kick·.ttl 여백을 !important로 지정(12·22px / 14·16px) → 여기서도 !important 필요.
   제목 줄간격은 원본 1.3(스펙 1.2~1.3 이내) 유지 */
.kick{ margin-block-end:8px !important; }
.kick + :is(h1,h2,h3,.ttl){ margin-block-start:0 !important; }   /* 흑삼 h2 원본 margin-top 12 상쇄 방지 */
.fp-hd{ row-gap:0 !important; }                                  /* 공장 헤더 flex gap 10이 8에 더해져 18 → 0 (자식은 소제목·제목 2개뿐) */
.ttl{ margin-block-end:12px !important; text-wrap:balance; }
:is(.ttl,section h1,section h2) + :is(.lead,.gs-lead,.gx-lead,.gx-sub){ margin-block-start:0 !important; }
:is(.ttl,section h1,section h2) ~ :is(.lead,.gs-lead,.gx-lead,.gx-sub) + *{ margin-block-start:48px !important; }
@media (max-width:640px){ :is(.ttl,section h1,section h2) ~ :is(.lead,.gs-lead,.gx-lead,.gx-sub) + *{ margin-block-start:32px !important; } }
.sec :is(h1,h2,h3){ text-wrap:balance; }

/* 본문 줄간격 1.7 · 한 줄 최대 ~70자 (글자 크기는 기존 유지) */
.sec p:not(.lead):not(.gs-lead):not(.gx-lead):not(.gx-sub){ line-height:1.7; }
.sec p{ max-inline-size:70ch; }
/* 숫자 자릿수 폭 고정 */
.gs-st strong, .num, .stat, [class*="count"], .gs-kpi strong, .gx-bars em, .gx-yrs span, .kn{ font-variant-numeric: tabular-nums; }

/* 작은 글씨 최소 13px (예외: 그래프 숫자 .gx-bars em · .gx-yrs = 11.5px 허용, 아이콘 글리프 ▾ ❚❚, 장바구니 숫자배지) */
.totop, .heroV .scrl span, .heroV .loc, .heroV .hcert span, .heroV ol > li > button > span,
.clip .ctx em, .drawer .dh small, .fmt-t small, .fpl-hd b, .gs-cards .gs-chips span, .gs-card > em,
.inq .direct .dl small, .pgcap em, .pgal .play, .pcat, .gz-roots b, .bdg a span, .cgrid .cfr small,
.gs-kpi small, .gs-th, .gx-unit, .gx-cty b em, .gs-stages small, .ceo-ph figcaption span, .gs-src,
.fp-rail em, .ftr3 small, .ftr3 small .lnk, main ul > li > p > small, .lsel select, .lsel option{ font-size:13px !important; }
/* 히어로 칩("공장 전경" 등) : 원본이 더 구체적인 선택자 + !important로 12px → :is(#…)로 우선순위 확보 */
:is(.heroV, #__gh) ol > li > button > span{ font-size:13px !important; }

/* ───────── [대표 지적 #1] 홈 검정 카드 : 두 줄 왼쪽맞춤 + 간격 10px ───────── */
.gs-tz .gs-st{ gap:0; }
.gs-tz .gs-st strong{
  display:block;
  margin-block-end:10px;        /* 두 줄 사이 8~12px */
  line-height:1.15;
  letter-spacing:-0.01em;
}
/* 큰 숫자 광학 보정 : "R" 좌측 여백 0.0889em(36px에서 3.2px) − 작은글씨 여백 0.6px → 잉크 시작선 0px 일치.
   큰 숫자는 반응형 크기라 em 기반. RTL은 시작 글자가 달라 제외 */
html:not([dir="rtl"]) .gs-tz .gs-st strong{ margin-inline-start:calc(-0.089em + 0.6px); }
.gs-tz .gs-st small{ display:block; margin-inline-start:0; }

/* 세 카드(홍삼·흑삼·검정) 동일 안쪽여백 + 세로 중앙 정렬 (높이는 grid stretch로 이미 동일) */
.gs-tzrow{ align-items:stretch; gap:24px; }
.gs-tzrow > .gs-sw, .gs-tzrow > .gs-st{ padding:24px; }
.gs-tzrow > .gs-st{ display:flex; flex-direction:column; justify-content:center; }
@media (max-width:640px){ .gs-tzrow{ gap:16px; } .gs-tzrow > .gs-sw, .gs-tzrow > .gs-st{ padding:24px; } }

/* 인증서 그리드 제목·캡션 : 원본 2줄 말줄임 + 단어중간 끊기(break-all) → 잘린 글자 0, 단어 단위 줄바꿈 */
.cgrid .cfr b, .cgrid .cfr small{
  -webkit-line-clamp:unset !important; line-clamp:none; display:block !important;
  overflow:visible !important; max-height:none !important;
  word-break:normal !important; overflow-wrap:break-word !important;
}

/* 제품 카드(69개) 안쪽 여백 18/14 → 16, 메타 13.5/10/2 → 12/8/4 (8px 그리드)
   ※ 카드 안쪽 32/24px 규칙의 예외: 모바일 2열 타일(약 170px)에서 24px면 본문 폭 120px로 제품명이 무너짐 */
.pcard .lu-body{ padding:16px !important; }
.pcard .lu-meta{ margin-block-end:12px !important; padding-block-start:8px !important; gap:4px !important; }

/* 제품 카드 제품명 : 원본 2줄 말줄임 → 모바일에서 "…홍삼농축액골드 100g/240g" 용량이 잘려 구분 불가 → 전체 표시 */
.pcard h3{ -webkit-line-clamp:unset !important; line-clamp:none; display:block !important; overflow:visible !important; max-height:none !important; }

/* 수출 지도(회사소개) : 1024px 미만에선 지도는 축소되고 라벨만 키워져(SVG 단위 13→35) 라벨끼리 겹침
   (사우디⨯두바이, 중국⨯한국, 유럽 7개국⨯튀르키예) → 지도 1000px(축척 1.0) 가로 스와이프 + 라벨을
   데스크톱과 같은 13단위(=실제 13px)로 → 데스크톱과 동일 비율이라 겹침 0. 좌우 여백 20px */
@media (max-width:1023px){
  .gx-map{ overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
           margin-inline:-20px; padding-inline:20px; }
  .gx-map::-webkit-scrollbar{ display:none; }
  .gx-map > svg{ min-inline-size:1000px; }
  .gx-map > svg text{ font-size:13px !important; }
}

/* 수출 지도 라벨 : "Saudi Arabia/Saudi-Arabien/サウジアラビア/ซาอุดีอาระเบีย"가 길어 바로 옆 "Dubai"와 겹침
   (한국어 "사우디"는 짧아 무관) → 좌→우 언어에서만 사우디 라벨을 점 왼쪽으로 (RTL은 원래 반대 방향이라 제외) */
html:not([dir="rtl"]) .gx-map > svg text:nth-of-type(6){ text-anchor:end; transform:translateX(-16px); }

/* 히어로 세로 "SCROLL" 표시 : right:28px 고정이라 아랍어·페르시아어·우르두어(RTL)에선 오른쪽 정렬 제목 끝과 겹침 → 반전 */
[dir="rtl"] .heroV .scrl{ right:auto !important; left:28px !important; }

/* 히어로 칩 줄 : 원본 padding:0 24px 0 0(물리) → RTL에서 시작선 44px로 밀림 → 논리 속성으로 */
.heroV ol{ padding-inline:0 24px !important; }
/* 공장 단계 레일 : 원본 scroll-padding-left:20px(물리) → RTL에서 첫 카드가 0px에 붙음 → 양쪽 20px */
.fp-rail{ scroll-padding-inline:20px !important; }

/* 홈 GAP/PROCESS 카드 설명 : 2줄 제한 → 독일어·태국어·아랍어 모바일에서 잘림 → 전체 표시 */
.clips .ctx > span{ -webkit-line-clamp:unset !important; line-clamp:none; overflow:visible !important; display:block !important; max-height:none !important; }

/* ───────────────────────── D. 폼 (견적 문의) ───────────────────────── */
/* 견적 문의 페이지 : 폼 카드·연락처 칸이 위 배너와 아래 푸터에 0px로 붙어 있음
   (다른 하위 페이지는 첫 섹션 자체 여백이 있어 해당 없음) → 이 페이지만 위아래 여백 */
.pgbody > .wrap > .inq{ padding-block:64px; }
@media (max-width:1024px){ .pgbody > .wrap > .inq{ padding-block:48px; } }
@media (max-width:640px){  .pgbody > .wrap > .inq{ padding-block:32px; } }
.iform label{ margin-block-end:8px; }                 /* 라벨 → 입력칸 8px */
.iform input:not([type="checkbox"]):not([type="radio"]),
.iform select, .iform textarea{
  min-height:52px; border-radius:10px; font-size:16px;  /* 높이 52 · 모서리 10 · iOS 확대방지(16px) */
}
.iform textarea{ min-height:142px; }
.iform select{ border-radius:10px; }
/* 포커스 표시 또렷 : 사이트 링크·버튼과 같은 3px #84641F (흰 바탕 대비 3:1 이상) */
.iform input:focus-visible, .iform select:focus-visible, .iform textarea:focus-visible{
  outline:3px solid #84641F; outline-offset:2px;
}
/* 문의 유형 칩 : 실제 라디오가 투명이라 키보드 포커스가 안 보임 → 칩 자체에 표시 */
.iform .chips .chip input:focus-visible + span{ outline:3px solid #84641F; outline-offset:2px; }
/* 오류 상태 */
.iform .ferr{ margin-block-start:8px; color:#c0392b; font-size:14px; }
.iform input[aria-invalid="true"], .iform .invalid{ border-color:#c0392b !important; }

/* 문의 유형 칩 : 높이 44 · 간격 8 · 줄바꿈 때도 상하 간격 8 일정 */
.iform .chips{ display:flex; flex-wrap:wrap; gap:8px; }
.iform .chips .chip > span{ display:inline-flex; align-items:center; min-height:44px; padding-block:0; }

/* ──────── [대표 지적 #2] 동의 체크박스 줄 + [문의 보내기] 버튼 ──────── */
.agree-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  min-height:44px;              /* 줄 전체 터치영역 44px+ */
  margin-block-end:24px;        /* 버튼과 24px 이상 */
}
.agree{ display:flex; align-items:center; gap:8px; min-height:44px; }
.agree input[type="checkbox"]{ inline-size:20px; block-size:20px; margin:0; flex:0 0 auto; }
.agree > span{ line-height:1.4; }
.iform .fact > button[type="submit"], .iform .btn.big[type="submit"]{
  min-height:52px; border-radius:10px;   /* 버튼 높이 52 */
}

/* ───────────────────────── E. 버튼 / 터치 영역 ───────────────────────── */
.btn{ border-radius:10px; }
.btn.big{ min-height:52px; }                                   /* 주요 52 */
.hdr .btn, .hdr .hcta, nav .btn{ min-height:44px; }            /* 헤더 44 */
a.btn, button.btn{ min-block-size:44px; }                      /* 모든 터치영역 44+ */
.burger{ min-inline-size:44px; min-block-size:44px; }

/* ───────────────────────── F. 모바일 최적화 ───────────────────────── */
html, body{ overflow-x:clip; }                   /* 가로 스크롤 0 (clip: sticky 헤더 유지) */
img, video{ max-width:100%; height:auto; }        /* 비율 유지 (CLS 방지) */

/* 노치·하단바: 원본이 이미 처리(viewport-fit=cover, body safe-area 패딩,
   .mbar calc(10px+safe-area), body 하단 76px) → 중복 규칙 넣지 않음 */

/* 메뉴 열렸을 때 뒤 화면 스크롤 잠금 (원본에 없던 것. 기존 JS가 body.menu-open 부여) */
html:has(body.menu-open), body.menu-open{ overflow:hidden; }
/* 방어 규칙: 헤더가 hdr-hide(스크롤로 숨김) 상태일 때 메뉴가 열리면 닫기(X)가 안 보임 → 메뉴 열림 중엔 헤더 고정 노출
   (스크립트로 만든 상태에서 확인, 실제 손가락 스크롤 경로에선 재현 안 됨) */
body.menu-open .hdr{ transform:none !important; visibility:visible !important; opacity:1 !important; }

@media (max-width:640px){
  /* iOS: 16px 미만 입력칸은 탭할 때 화면이 확대됨 → 모바일 입력류 전부 16px */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea, .lsel select{ font-size:16px !important; }

  /* 햄버거 메뉴 항목 56px+ (현재 63px) */
  .mnav a:not(.btn){ min-height:56px; display:flex; align-items:center; }
}

/* 모바일 메뉴 안 언어 선택 패널 3열 (데스크톱 드롭다운은 원본 4열 유지) */
.mnav .lsw-menu{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:4px; }
.mnav .lsw-menu > button{ min-inline-size:0; white-space:normal !important; padding-inline:8px !important; text-align:start; }
.mnav .lsw-menu > button > *{ white-space:normal !important; overflow-wrap:break-word; }
/* 언어 영문 부제 11.5px → 최소 13px */
.lsw-menu .lse{ font-size:13px !important; }

/* ───────────────────────── G. 다국어 / RTL ─────────────────────────
   위 모든 좌우 보정은 margin-inline / padding-inline 논리 속성이라
   아랍어(dir=rtl)에서 자동으로 오른쪽 기준으로 반전됨. 추가 규칙 불필요. */