/* 숫자·라벨용 모노 글꼴. 회사소개 계열 페이지는 본문 글꼴만 불러오고 있어
   여기서 함께 챙긴다. (메인 페이지는 자기 <head> 에서 이미 부른다) */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

/* ============================================================
   회사소개 섹션 모바일 전용 스타일 (≤768px)
   aboutUs.do · license_kr.do · awards.do · technicalSupport.do 가 함께 쓴다.

   원칙
   - PC 레이아웃은 .gm-pc 를 달아 두면 폰에서 통째로 감춘다.
   - 폰에서는 .gm 블록만 보인다. 두 벌을 한 문서에 담고 화면 폭으로 고른다.
   - 색(네이비·골드)·글꼴(Noto Sans KR / Inter / JetBrains Mono)은
     각 페이지가 이미 쓰는 :root 토큰을 그대로 따른다. 아래 기본값은
     토큰이 없는 페이지를 위한 보험이다.
     이 파일은 페이지 인라인 <style> 보다 뒤에 실리므로, 그냥 :root 로 쓰면
     기본값이 페이지 색을 덮어쓴다. :where() 로 감싸 가중치를 0 으로 만들어
     페이지가 값을 정해 두었다면 언제나 페이지 쪽이 이기게 한다.
   - 서브탭은 화면 전환이 아니라 기존 .do 주소로 가는 링크다.
     주소·SEO·컨트롤러를 건드리지 않기 위해서다.
   ============================================================ */

:where(:root) {
  --navy-900: #0a1f3d;
  --ink-900: #14213d;
  --ink-700: #344056;
  --ink-500: #677488;
  --ink-400: #8a94a6;
  --ink-300: #b6bdc9;
  --line: #e3e7ee;
  --line-soft: #eef1f6;
  --bg: #ffffff;
  --bg-soft: #f6f8fb;
  --accent: #c4823f;
  --gold: #d4a55c;
  /* 공통 헤더 높이 — header_kr.jsp 와 같은 값 */
  --gm-hh: 56px;
}

/* 폰 전용 조각은 기본이 '숨김'이다. 아래 미디어쿼리에서만 켠다.
   셋 다 여기 적어 둘 것 — 하나라도 빠지면 PC 에서 날것으로 새어 나온다. */
.gm,
.gm-subtabs,
.gm-tabs { display: none; }

@media (max-width: 768px) {

  /* ---- 여백 자 ----
     화면 폭에 따라 늘리지 않는다. 폰 어느 크기에서나 같은 값을 쓴다. */
  :root {
    --gm-pad-x:  20px;   /* 화면 좌우 */
    --gm-sec-y:  26px;   /* 섹션 위아래 */
    --gm-card-y: 20px;   /* 카드 안쪽 위아래 */
    --gm-card-x: 14px;   /* 카드 안쪽 좌우 */
    --gm-gap:    10px;   /* 카드 사이 */
  }

  .gm-pc { display: none !important; }
  .gm { display: block; }

  .gm * { box-sizing: border-box; }
  .gm {
    font-family: "Noto Sans KR", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ink-900);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    text-wrap: pretty;
    word-break: keep-all;
  }
  .gm img { max-width: 100%; }
  .gm a { text-decoration: none; color: inherit; }
  .gm p { margin: 0; }

  /* ---- 서브탭 : 회사소개 / 라이선스 / 수상실적 / 기술지원 ----
     가로 스크롤 알약. 활성 탭만 네이비로 채운다.
     nowrap 이 없으면 "회사소개"가 두 줄로 접힌다. */
  .gm-subtabs {
    position: sticky;
    top: var(--gm-hh);
    z-index: 900;
    display: flex;
    gap: 6px;
    padding: 12px 18px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gm-subtabs::-webkit-scrollbar { display: none; }
  .gm-subtabs a {
    flex: none;
    display: inline-flex; align-items: center;
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-500);
    font-size: 11.5px; font-weight: 500;
    white-space: nowrap;
  }
  .gm-subtabs a.on {
    background: var(--navy-900);
    border-color: var(--navy-900);
    color: #fff;
  }

  /* 상단 배너(.page-header)는 폰에서도 PC 것을 그대로 쓴다.
     제품소개 페이지와 같은 형식 — 가운데 정렬, 금색 라벨에 좌우 선, 큰 제목.
     크기는 각 페이지가 이미 가진 모바일 규칙이 줄여 준다. */

  /* ---- 섹션 ---- */
  .gm-sec { padding: 26px 20px 28px; }
  .gm-sec.alt {
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .gm-sec.flush { padding-left: 0; padding-right: 0; }
  .gm-label {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9.5px; font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--accent);
    margin-bottom: 10px;
  }
  .gm-h2 {
    margin: 0 0 10px;
    font-size: 18px; font-weight: 700; line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--navy-900);
  }
  /* 선택자 앞에 .gm 을 하나 더 붙여 둔다 — 위쪽 .gm p { margin:0 } 이
     가중치에서 이겨 아래 margin-bottom 을 지워 버리기 때문이다.
     이게 없으면 리드 문장이 바로 다음 요소(연혁 지표의 윗선, 카드)에 붙는다. */
  .gm .gm-lead {
    font-size: 12px; font-weight: 300; line-height: 1.75;
    color: var(--ink-500);
    margin-bottom: 16px;
  }

  /* ---- 1px 라인 격자 : 흰 칸을 선 위에 얹는 방식 ---- */
  .gm-stats {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }
  .gm-stats.c2 { grid-template-columns: 1fr 1fr; }
  .gm-stats.c3 { grid-template-columns: 1fr 1fr 1fr; }
  .gm-stats > div { background: #fff; padding: 20px 12px 22px; }
  .gm-stats .v {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 22px; font-weight: 500; line-height: 1;
    letter-spacing: -0.03em;
    color: var(--navy-900);
    margin-bottom: 8px;
  }
  /* 숫자에 붙는 단위(년·억)는 한 급 낮춰야 숫자가 먼저 읽힌다 */
  .gm-stats .v .u {
    font-size: 12px; font-weight: 400;
    letter-spacing: 0;
  }
  .gm-stats .l { font-size: 9.5px; line-height: 1.4; color: var(--ink-500); }

  /* 아이콘 + 이름 + 영문 부제 2열 라인 격자 (기술지원 서비스 · 사업분야) */
  .gm-grid2 {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }
  .gm-grid2 > div { background: #fff; padding: 18px 13px 20px; }
  /* 아이콘은 PC 쪽과 같은 인라인 SVG 를 그대로 쓴다 */
  .gm-grid2 .ico { width: 22px; height: 22px; margin-bottom: 12px; }
  .gm-grid2 .ico svg {
    width: 100%; height: 100%;
    display: block;
    fill: none;
    stroke: var(--navy-700, #1a3f6b);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .gm-grid2 .ko {
    font-size: 12.5px; font-weight: 500; line-height: 1.35;
    color: var(--navy-900);
    margin-bottom: 5px;
  }
  .gm-grid2 .en {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 8.5px; font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--ink-400);
  }

  /* ---- 가로 카드 (ISO 인증 · 면허 및 등록증 · 수상실적) ----
         왼쪽에 증서 썸네일, 오른쪽에 이름 + 발급처를 한 줄씩. --- */
  .gm-hcards { display: flex; flex-direction: column; gap: 10px; }
  .gm-hcard {
    display: flex; gap: 13px; align-items: center;
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 13px;
    background: #fff;
  }
  .gm-hcard .thumb {
    width: 56px; height: 74px; flex: none;
    border-radius: 6px;
    background: var(--bg-soft);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .gm-hcard .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
  /* 썸네일 옆 글 묶음 — 남는 폭을 다 쓰고, 긴 이름이 칸을 밀지 않게 한다 */
  .gm-hcard > :last-child { flex: 1; min-width: 0; }
  .gm-hcard .name {
    display: block;
    font-size: 13.5px; font-weight: 500; line-height: 1.4;
    color: var(--navy-900);
    margin-bottom: 7px;
  }
  .gm-hcard .code {
    display: block;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10.5px; font-weight: 500;
    color: var(--accent);
  }
  /* 탭하면 원본이 크게 열린다 (기존 확대 팝업 재사용) */
  .gm-lightbox { cursor: zoom-in; }

  /* ---- 로고 + 역할 + 화살표 한 줄 (공식 파트너십) ---- */
  .gm-rows { display: flex; flex-direction: column; gap: 10px; }
  .gm-rows a, .gm-rows > div {
    display: flex; align-items: center; gap: 12px;
    min-height: 66px; padding: 16px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
  }
  .gm-rows .logo {
    flex: none;
    width: 74px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .gm-rows .logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .gm-rows .role {
    flex: 1;
    font-size: 12.5px; font-weight: 500;
    color: var(--navy-900);
  }
  .gm-rows .arw {
    font-family: "Inter", sans-serif;
    font-size: 15px; color: var(--ink-300);
  }

  /* ---- 큰 따옴표 + 인사말 ---- */
  .gm-quote {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 40px; font-weight: 300; line-height: 1;
    color: var(--line);
    margin-bottom: 2px;
  }
  .gm-greet-title {
    margin: 0 0 5px;
    font-size: 19px; font-weight: 700; line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--navy-900);
  }
  /* 한글 사명 아래 영문 사명 한 줄 — 제목 한 줄이 허전해 보이지 않게 받쳐 준다 */
  .gm-greet-en {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9.5px; font-weight: 400; line-height: 1.5;
    letter-spacing: 0.12em;
    color: var(--ink-400);
    margin-bottom: 14px;
  }
  /* 폰에서 같은 크기 문단이 셋 이어지면 글 벽으로 읽힌다.
     첫 문단만 키워 리드로 세우고, 마지막 문단은 아래 .gm-more 로 접는다. */
  .gm-greet p {
    margin: 0 0 12px;
    font-size: 12.5px; font-weight: 300; line-height: 1.85;
    color: var(--ink-500);
  }
  .gm-greet p.lead {
    font-size: 13.5px; font-weight: 400; line-height: 1.75;
    color: var(--ink-900);
  }
  .gm-greet p:last-child { margin-bottom: 0; }

  /* ---- 라벨 오른쪽으로 뻗는 실선 ---- */
  .gm-label.rule { display: flex; align-items: center; gap: 10px; }
  .gm-label.rule::after {
    content: "";
    flex: 1; height: 1px;
    background: #eadfd0;
  }

  /* ---- 산업 분야 칩 ----
     쉼표로 길게 나열하던 분야를 끊어 담는다. 줄바꿈은 칩 단위로만 일어난다. */
  .gm-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 14px;
  }
  .gm-chips span {
    padding: 5px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 11px; font-weight: 400; line-height: 1.5;
    color: var(--ink-700);
    white-space: nowrap;
  }

  /* ---- 더보기 : <details> 라 스크립트가 없다 ---- */
  .gm-more { margin-top: 14px; }
  .gm-more summary {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    font-size: 12px; font-weight: 500;
    color: var(--ink-700);
    cursor: pointer;
    list-style: none;                 /* 파이어폭스 삼각형 */
    -webkit-tap-highlight-color: transparent;
  }
  .gm-more summary::-webkit-details-marker { display: none; }
  .gm-more summary .ico {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 13px; line-height: 1;
    color: var(--ink-400);
  }
  .gm-more summary .ico::after { content: "+"; }
  .gm-more[open] summary .ico::after { content: "\2212"; }
  .gm-more .t-close { display: none; }
  .gm-more[open] .t-open { display: none; }
  .gm-more[open] .t-close { display: inline; }
  .gm-more p {
    margin: 14px 0 0;
    font-size: 12.5px; font-weight: 300; line-height: 1.85;
    color: var(--ink-500);
  }

  /* ---- 사업 영역 더보기 : 펼치는 버튼이 아니라 적용분야 페이지로 가는 링크 ----
     생김새는 위 .gm-more summary 와 같게 두고 기호만 + 에서 화살표로 바꾼다.
     누르면 페이지가 넘어간다는 것을 기호로 미리 알린다. */
  /* .gm 을 앞에 붙인다 — 위 .gm a { color: inherit } 에 색이 밀린다 */
  .gm .gm-morelink {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 42px;
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    font-size: 12px; font-weight: 500;
    color: var(--ink-700);
    -webkit-tap-highlight-color: transparent;
  }
  .gm-morelink .ico {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 13px; line-height: 1;
    color: var(--ink-400);
  }
  .gm-morelink .ico::after { content: "\2192"; }

  /* ---- 전면 사진 띠 ---- */
  .gm-photo {
    position: relative;
    height: 140px;
    overflow: hidden;
    background: var(--bg-soft);
  }
  .gm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* 사진 아래를 네이비 띠로 덮어 인사말과 요약 사이의 매듭으로 쓴다 */
  .gm-photo .cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 9px var(--gm-pad-x);
    background: var(--navy-900);
    color: rgba(255,255,255,0.72);
    font-size: 11px; font-weight: 300; line-height: 1.5;
    letter-spacing: 0.02em;
  }

  /* ---- 조직도 ---- */
  .gm-ceo {
    display: flex; align-items: center; gap: 10px;
    padding: 15px 14px;
    background: var(--navy-900);
    color: #fff;
    border-radius: 12px;
    margin-bottom: 8px;
  }
  .gm-ceo .n { font-size: 14px; font-weight: 500; }
  .gm-ceo .r {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9.5px; font-weight: 500;
    color: var(--gold);
  }
  /* ---- 조직도 : 성격별로 묶은 1px 선 목록 ----
     7개를 2열로 깔면 홀수라서 마지막 하나가 혼자 남는다. 성격별로 묶어
     세로 목록으로 세우면 개수를 신경 쓸 필요가 없고, 좁은 폭에서 팀 이름이
     줄바꿈될 여지도 사라진다. 선 리듬은 아래 연혁 섹션과 같다. */
  .gm-orggrp {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9.5px; font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--ink-400);
    margin: 16px 0 8px;
  }
  .gm-orgs {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 11px;
    overflow: hidden;
  }
  .gm-orgs > div {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    background: #fff;
    padding: 13px var(--gm-card-x);
  }
  .gm-orgs .ko {
    font-size: 12.5px; font-weight: 500; line-height: 1.3;
    color: var(--navy-900);
  }
  .gm-orgs .en {
    flex: none;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 8.5px; font-weight: 500;
    letter-spacing: 0.06em;
    text-align: right;
    color: var(--ink-400);
  }
  /* 해외 법인 한 줄만 금색으로 — 국내 조직과 성격이 다르다는 표시 */
  .gm-orgs > div.vn .en { color: var(--accent); }

  /* ---- 네이비 밴드 ----
     앞뒤가 모두 흰 섹션일 때 한 구간만 어둡게 눌러 스크롤에 매듭을 만든다.
     PC 의 .gec-history-band 와 같은 성격. 안에 들어가는 공통 조각
     (.gm-label / .gm-h2 / .gm-lead)의 색만 뒤집어 준다. */
  .gm-sec.dark {
    position: relative;
    overflow: hidden;
    background: var(--navy-900);
  }
  /* 오른쪽 위 금빛 번짐 — PC 밴드의 ::after 를 폰 크기로 줄인 것 */
  .gm-sec.dark::after {
    content: "";
    position: absolute; right: -90px; top: -70px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(196,130,63,0.22), transparent 62%);
    pointer-events: none;
  }
  .gm-sec.dark > * { position: relative; z-index: 1; }
  .gm-sec.dark .gm-label { color: var(--gold); }
  .gm-sec.dark .gm-h2 { color: #fff; }
  .gm-sec.dark .gm-h2 .light { font-weight: 300; color: rgba(255,255,255,0.42); }
  .gm-sec.dark .gm-lead { color: rgba(255,255,255,0.62); }

  /* ---- 연혁 지표 : 26년 / 11건 ---- */
  .gm-hist-meta {
    display: flex;
    gap: 16px;
    margin: 0 0 20px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.14);
  }
  .gm-hist-meta > div { flex: 1; }
  .gm-hist-meta .num {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 24px; font-weight: 500; line-height: 1;
    letter-spacing: -0.02em;
    color: var(--gold);
  }
  .gm-hist-meta .lbl {
    margin-top: 5px;
    font-size: 10px; letter-spacing: 0.08em;
    color: rgba(255,255,255,0.55);
  }

  /* ---- 연혁 : 세로 레일 + 연도 아래 카드 ----
     마크업은 그대로 두고 배치만 세로로 바꾼다.
     .gm-hist-row = 한 해 · .items = 그 해 카드 · .items > span = 한 건.
     왼쪽 1px 레일은 .gm-hist::before 로 긋고, 각 해의 점은 row::before.
     레일을 border-left 로 긋지 않는 이유 — 첫 점 위·끝 점 아래를 잘라내야
     선이 카드 밖으로 비어져 나가지 않는다. */
  .gm-hist {
    position: relative;
    padding-left: 18px;
  }
  .gm-hist::before {
    content: "";
    position: absolute; left: 0; top: 5px; bottom: 5px;
    width: 1px;
    background: rgba(255,255,255,0.16);
  }
  .gm-hist-row {
    position: relative;
    padding: 0 0 16px;
  }
  .gm-hist-row:last-child { padding-bottom: 0; }
  /* 점의 테두리는 밴드 배경색으로 — 레일을 덮어 점만 떠 보이게 한다 */
  .gm-hist-row::before {
    content: "";
    position: absolute; left: -22.5px; top: 4px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,0.32);
    box-shadow: 0 0 0 3px var(--navy-900);
  }
  /* 맨 위(최근)와 맨 아래(창업)만 금색 — 축의 양 끝 표시 */
  .gm-hist-row:first-child::before,
  .gm-hist-row:last-child::before { background: var(--gold); }
  .gm-hist-row .y {
    display: block;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 16px; font-weight: 500; line-height: 1;
    letter-spacing: 0.04em;
    color: #fff;
  }
  .gm-hist-row .items {
    display: block;
    margin-top: 9px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
  }
  .gm-hist-row .items span {
    display: block;
    font-size: 12.5px; line-height: 1.6;
    color: rgba(255,255,255,0.90);
  }
  /* 한 해에 두 건 이상이면 그 사이만 실선으로 끊는다 */
  .gm-hist-row .items span + span {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.10);
  }
  .gm-hist-row .items .mo {
    display: block;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-style: normal;
    font-size: 10px; font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--gold);
    margin: 0 0 3px;
  }

  /* ---- 오시는 길 ----
     주소를 한 덩어리로 쌓지 않고 '주소 · 지하철 · 전화' 세 줄로 갈라
     각 줄 앞에 뜻을 알려 주는 아이콘을 세운다. 폰에서 눈이 훑고 지나갈 때
     어디가 무엇인지 라벨 없이도 구분된다.
     맨 아래 길찾기·전화는 44px 짜리 버튼이다 — 손가락으로 누르는 것이
     이 섹션의 목적이므로, 글자 링크로 두지 않는다. */
  .gm-loc { display: flex; flex-direction: column; gap: 9px; }
  .gm-loc > div {
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 16px 15px;
  }
  .gm-loc .head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
  }
  .gm-loc .tag {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9px; font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--ink-400);
  }
  /* 번호는 제목 줄에서 떼어 내 오른쪽 금색 배지로 — 01/02 라는 순서만 전한다 */
  .gm-loc .no {
    flex: none;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9px; font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--accent);
    /* 아래 한 줄은 color-mix 를 모르는 구형 브라우저용 대비값이다 */
    border: 1px solid #ecd9c0;
    border-color: color-mix(in srgb, var(--accent) 28%, #fff);
    border-radius: 20px;
    padding: 3px 8px;
  }
  .gm-loc .title {
    font-size: 15px; font-weight: 500; line-height: 1.35;
    color: var(--navy-900);
    margin-bottom: 12px;
  }
  /* 이름은 .row 가 아니라 .locrow 다 — 부트스트랩이 .row 와 .row > * 를
     그리드로 잡고 있어서, 그 이름을 쓰면 아이콘과 글이 두 줄로 갈라진다 */
  .gm-loc .locrow {
    display: flex; gap: 9px;
    font-size: 11.5px; font-weight: 300; line-height: 1.7;
    color: var(--ink-500);
  }
  .gm-loc .locrow + .locrow { margin-top: 7px; }
  .gm-loc .locrow svg {
    flex: none;
    width: 14px; height: 14px;
    margin-top: 3px;
    color: var(--ink-300);
  }
  .gm-loc .locrow .tel {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px; font-weight: 500;
    color: var(--navy-900);
  }
  /* 두 개면 반씩, 하나뿐이면(공장) 저절로 전폭이 된다 */
  .gm-loc .acts { display: flex; gap: 8px; margin-top: 15px; }
  /* 이 파일 아래쪽에 이미 전폭 CTA 인 .gm-btn 이 있다. 이름이 겹치면
     나중에 선언된 그쪽이 이겨서 두 개가 세로로 늘어지므로 .gm-act 로 둔다 */
  .gm-act {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    min-height: 42px;
    border-radius: 9px;
    font-size: 12px; font-weight: 500;
    text-decoration: none;
  }
  .gm-act.solid { background: var(--navy-900); color: #fff; }
  .gm-act.ghost {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--navy-900);
  }
  .gm-link {
    display: inline-block;
    margin-top: 12px;
    min-height: 24px;
    font-size: 11.5px; font-weight: 500;
    color: var(--accent);
  }

  /* ---- 연락처 카드 ---- */
  .gm-contacts { display: flex; flex-direction: column; gap: 9px; }
  .gm-contact {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 16px 15px;
  }
  .gm-contact .top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
  }
  .gm-contact .title {
    font-size: 13.5px; font-weight: 500; line-height: 1.35;
    color: var(--navy-900);
  }
  .gm-contact .region {
    flex: none;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9px; font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--accent);
  }
  .gm-contact .person { font-size: 11.5px; font-weight: 500; line-height: 1.6; color: var(--ink-700); }
  .gm-contact .addr { font-size: 11px; font-weight: 300; line-height: 1.7; color: var(--ink-400); margin-top: 4px; }
  .gm-contact .acts { display: flex; gap: 8px; margin-top: 12px; }
  .gm-contact .acts a {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 12px 6px;
    border-radius: 10px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .gm-contact .acts .tel { background: var(--navy-900); color: #fff; }
  .gm-contact .acts .mail { border: 1px solid var(--line); color: var(--navy-900); font-size: 10px; }

  /* ---- 문의 유도 카드 · 버튼 ---- */
  .gm-cta-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px 18px;
  }
  .gm-cta-card .t {
    font-size: 16px; font-weight: 500; line-height: 1.4;
    color: var(--navy-900);
    margin-bottom: 8px;
  }
  .gm-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 15px 0;
    border: 0;
    border-radius: 12px;
    background: var(--navy-900);
    color: #fff;
    font-family: inherit;
    font-size: 12.5px; font-weight: 500;
  }

  /* ---- 문의 폼 ---- */
  .gm-form { display: flex; flex-direction: column; gap: 16px; }
  .gm-field { display: flex; flex-direction: column; gap: 8px; }
  .gm-field > .lb { font-size: 11.5px; font-weight: 500; color: var(--navy-900); }
  .gm-field > .lb .req { color: var(--accent); }
  .gm-input, .gm-textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--ink-900);
    background: #fff;
    outline: none;
  }
  .gm-input:focus, .gm-textarea:focus { border-color: var(--navy-900); }
  .gm-textarea { height: 120px; resize: none; line-height: 1.7; }
  .gm-count {
    align-self: flex-end;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px; font-weight: 500;
    color: var(--ink-400);
  }
  .gm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .gm-chip {
    cursor: pointer;
    min-height: 38px;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-500);
    font-family: inherit;
    font-size: 11.5px; font-weight: 500;
    white-space: nowrap;
  }
  .gm-chip.on {
    background: var(--navy-900);
    border-color: var(--navy-900);
    color: #fff;
  }
  .gm-drop {
    border: 1px dashed var(--ink-300);
    border-radius: 12px;
    padding: 22px 14px;
    text-align: center;
    background: var(--bg-soft);
    font-size: 11px; line-height: 1.6;
    color: var(--ink-400);
    cursor: pointer;
  }
  .gm-drop.has { border-style: solid; border-color: var(--navy-900); color: var(--navy-900); }
  .gm-privacy {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
  }
  .gm-privacy .hd {
    padding: 13px 14px;
    background: var(--bg-soft);
    font-size: 11.5px; font-weight: 500;
    color: var(--navy-900);
  }
  .gm-privacy .rw {
    display: flex; gap: 10px;
    padding: 11px 14px;
    border-top: 1px solid var(--line-soft);
  }
  .gm-privacy .rw .k { width: 62px; flex: none; font-size: 10.5px; font-weight: 500; line-height: 1.6; color: var(--ink-400); }
  .gm-privacy .rw .v { flex: 1; font-size: 10.5px; font-weight: 300; line-height: 1.6; color: var(--ink-700); }
  .gm-agree {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px;
    font-size: 11.5px; line-height: 1.5;
    color: var(--ink-700);
    cursor: pointer;
  }
  .gm-agree input { position: absolute; opacity: 0; width: 0; height: 0; }
  .gm-agree .box {
    width: 20px; height: 20px; flex: none;
    border: 1px solid var(--ink-300);
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px; font-weight: 600;
    color: transparent;
  }
  .gm-agree input:checked + .box {
    background: var(--navy-900);
    border-color: var(--navy-900);
    color: #fff;
  }
  .gm-submit {
    padding: 17px 0;
    border: 0;
    border-radius: 12px;
    background: var(--ink-300);
    color: #fff;
    font-family: inherit;
    font-size: 13.5px; font-weight: 500;
    cursor: not-allowed;
  }
  .gm-submit.ready { background: var(--navy-900); cursor: pointer; }

  /* ---- 하단 탭 5개 ---- */
  body { padding-bottom: 68px; }
  .gm-tabs {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 1000;
    background: rgba(255,255,255,0.97);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding: 8px 6px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .gm-tabs a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 6px 0;
    text-decoration: none;
  }
  .gm-tabs i { display: block; width: 18px; height: 18px; background: var(--ink-300); }
  .gm-tabs span {
    font-size: 9.5px; font-weight: 500; line-height: 1;
    color: var(--ink-400);
    white-space: nowrap;
  }
  .gm-tabs a.on i { background: var(--navy-900); }
  .gm-tabs a.on span { color: var(--navy-900); }

  .ic-tab-home {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5'/><path d='M5.5 9.5V20h13V9.5'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5'/><path d='M5.5 9.5V20h13V9.5'/></svg>") center/contain no-repeat;
  }
  .ic-tab-about {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='1.5'/><path d='M8 7h3M13 7h3M8 11h3M13 11h3M8 15h3M13 15h3'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='1.5'/><path d='M8 7h3M13 7h3M8 11h3M13 11h3M8 15h3M13 15h3'/></svg>") center/contain no-repeat;
  }
  .ic-tab-product {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/><path d='M4 7.5l8 4.5 8-4.5M12 12v9'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/><path d='M4 7.5l8 4.5 8-4.5M12 12v9'/></svg>") center/contain no-repeat;
  }
  .ic-tab-field {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'><rect x='3.5' y='3.5' width='7' height='7' rx='1'/><rect x='13.5' y='3.5' width='7' height='7' rx='1'/><rect x='3.5' y='13.5' width='7' height='7' rx='1'/><rect x='13.5' y='13.5' width='7' height='7' rx='1'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'><rect x='3.5' y='3.5' width='7' height='7' rx='1'/><rect x='13.5' y='3.5' width='7' height='7' rx='1'/><rect x='3.5' y='13.5' width='7' height='7' rx='1'/><rect x='13.5' y='13.5' width='7' height='7' rx='1'/></svg>") center/contain no-repeat;
  }
  .ic-tab-record {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'><path d='M8 5h11M8 12h11M8 19h11'/><circle cx='4' cy='5' r='1.2' fill='black' stroke='none'/><circle cx='4' cy='12' r='1.2' fill='black' stroke='none'/><circle cx='4' cy='19' r='1.2' fill='black' stroke='none'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'><path d='M8 5h11M8 12h11M8 19h11'/><circle cx='4' cy='5' r='1.2' fill='black' stroke='none'/><circle cx='4' cy='12' r='1.2' fill='black' stroke='none'/><circle cx='4' cy='19' r='1.2' fill='black' stroke='none'/></svg>") center/contain no-repeat;
  }
}

/* 소형 단말(≤360px) — 3칸 통계와 카드 제목만 한 단계 낮춘다 */
@media (max-width: 360px) {
  .gm-stats.c3 .v { font-size: 19px; }
  .gm-stats.c3 .l { font-size: 9px; }
  .gm-hcard .thumb { width: 50px; height: 66px; }
  .gm-hcard .name { font-size: 12.5px; }
}
