/* =========================================================
   JTOONE 서브페이지 — 공통 뼈대 + 페이지별 컴포넌트
   main.css 의 토큰(--j2-*)을 그대로 쓴다. main.css 뒤에 로드된다.
   메인 페이지 스타일과 섞이지 않도록 파일을 나눴다 (header.css 와 같은 방식).

   사용법: pages/*.html 을 페이지 편집기 Code Block 에 붙여넣는다.
   ========================================================= */

/* ── 페이지 헤더 ───────────────────────────
   메인 히어로의 축소판. 캔버스 대신 CSS 그리드만 깔아
   서브페이지마다 스크립트가 도는 것을 피한다. */
#top .j2-phead{
  position:relative;
  background:
    radial-gradient(110% 120% at 82% 30%, #0A4C63 0%, transparent 60%),
    linear-gradient(160deg,#052A38 0%,#04222E 60%,#03191F 100%);
  color:var(--j2-deep-ink);
  padding-top:clamp(96px,11vw,150px);
  padding-bottom:clamp(40px,5vw,64px);
  overflow:hidden;
}
#top .j2-phead::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--j2-deep-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--j2-deep-line) 1px,transparent 1px);
  background-size:56px 56px; opacity:.45;
}
/* 우측 하단으로 퍼지는 신호 호(弧) — 메인 히어로 캔버스의 정적 인용 */
#top .j2-phead::after{
  content:""; position:absolute; pointer-events:none;
  right:-140px; bottom:-260px; width:620px; height:620px; border-radius:50%;
  border:1px solid rgba(79,201,169,.20);
  box-shadow:
    0 0 0 60px rgba(79,201,169,.045),
    0 0 0 130px rgba(79,201,169,.03),
    0 0 0 210px rgba(79,201,169,.018);
}
#top .j2-phead .j2-wrap{ position:relative; z-index:1; }

#top .j2-bc{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  font-family:var(--j2-sans); font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--j2-deep-ink-2);
  margin-bottom:22px;
}
#top .j2-bc li{ display:flex; align-items:center; gap:9px; }
#top .j2-bc li + li::before{ content:"/"; opacity:.45; }
#top .j2-bc a:hover{ color:var(--j2-mint); }
#top .j2-bc [aria-current]{ color:var(--j2-mint); }

#top .j2-phead h1{
  font-family:var(--j2-disp);
  font-size:clamp(32px,5.2vw,64px);
  font-weight:900;
  letter-spacing:-.035em; line-height:1.1;
  color:var(--j2-deep-ink);
}
#top .j2-phead__en{
  font-family:var(--j2-sans); font-size:11.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--j2-mint); margin:0 0 14px;
}
#top .j2-phead__sub{
  color:var(--j2-deep-ink-2); font-size:clamp(14px,1.1vw,16px);
  line-height:1.8; max-width:70ch; margin:18px 0 0;
}

/* ── 섹션 제목 (서브페이지용, 메인보다 한 단계 작게) ── */
#top .j2-h3{
  font-family:var(--j2-disp);
  font-size:clamp(23px,2.4vw,32px);
  font-weight:700;
  letter-spacing:-.018em; line-height:1.25;
  color:var(--j2-ink);
}
#top .j2-h3 em{ font-style:normal; color:var(--j2-brand); }

/* 다크 섹션(.j2-beacon) 안에서의 서브 제목 — main.css 가 .j2-h2 만
   다루므로 .j2-h3 도 같은 규칙을 준다. 인라인 색상 대신 여기서 처리. */
#top .j2-beacon .j2-h3{ color:var(--j2-deep-ink); }
#top .j2-beacon .j2-h3 em{ color:var(--j2-mint); }

/* 섹션 사이 얇은 구분 */
#top .j2-sec--tight{ padding-top:clamp(52px,6vw,84px); padding-bottom:clamp(52px,6vw,84px); }
#top .j2-sec + .j2-sec{ border-top:1px solid var(--j2-line-soft); }

/* ── 2단 분할 (설명 + 자료) ────────────── */
#top .j2-split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px); align-items:start;
}
#top .j2-split--wide{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }

/* ── 본문 ──────────────────────────────── */
#top .j2-prose p{ font-size:15.5px; line-height:1.9; color:var(--j2-ink-2); }
#top .j2-prose p + p{ margin-top:16px; }
#top .j2-prose b{ color:var(--j2-ink); font-weight:700; }

/* ── 기술 태그 ─────────────────────────── */
#top .j2-tags{ display:flex; flex-wrap:wrap; gap:8px; }
#top .j2-tags span{
  font-family:var(--j2-sans); font-size:12px; letter-spacing:.04em;
  color:var(--j2-ink-2); background:var(--j2-surface);
  border:1px solid var(--j2-line); border-radius:2px;
  padding:8px 13px;
}

#top .j2-tags > div {
  font-family:var(--j2-sans); font-size:12px; letter-spacing:.04em;
  color:var(--j2-ink-2); background:var(--j2-surface);
  border:1px solid var(--j2-line); border-radius:2px;
  padding:8px 13px;
}

/* ── 세로 타임라인 (연혁 상세) ─────────── */
#top .j2-vtl{ margin-top:clamp(32px,4vw,52px); }
#top .j2-vtl__row{
  display:grid; grid-template-columns:120px minmax(0,1fr);
  gap:clamp(20px,3vw,48px);
  padding:26px 0;
  border-top:1px solid var(--j2-line);
}
#top .j2-vtl__row:last-child{ border-bottom:1px solid var(--j2-line); }
#top .j2-vtl__y{
  font-family:var(--j2-disp); font-size:clamp(28px,3vw,38px);
  font-weight:800; letter-spacing:-.03em;
  color:var(--j2-brand); line-height:1;
  font-variant-numeric:tabular-nums;
}
#top .j2-vtl ul{ display:flex; flex-direction:column; gap:11px; }
#top .j2-vtl li{
  display:grid; grid-template-columns:42px minmax(0,1fr); gap:14px;
  font-size:18px; color:var(--j2-ink-2); line-height:1.65;
  align-items:baseline;
}
#top .j2-vtl li b{
  font-family:var(--j2-sans); font-size:18px; font-weight:600;
  color:var(--j2-ink-3); letter-spacing:.06em;
}
#top .j2-vtl li i{ font-style:normal; color:var(--j2-ink); }

/* ── 인증 카드 ─────────────────────────── */
/* 3열 고정 — auto-fill 로 두면 항목 수에 따라 마지막 줄에
   빈 칸이 남아 배경(--j2-line)이 그대로 드러난다. */
#top .j2-certs{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--j2-line);
  border:1px solid var(--j2-line);
  margin-top:clamp(28px,3.5vw,44px);
}
#top .j2-cert{
  background:var(--j2-surface); padding:24px 22px 26px;
  display:flex; flex-direction:column; gap:10px;
}
#top .j2-cert__y{
  font-family:var(--j2-sans); font-size:11px; font-weight:600; letter-spacing:.14em;
  color:var(--j2-brand);
}
#top .j2-cert h4{ font-size:15.5px; font-weight:700; color:var(--j2-ink); line-height:1.5; }
#top .j2-cert p{ font-size:13px; color:var(--j2-ink-2); line-height:1.7; }

/* ── 납품 실적 (연도별 거래처) ─────────── */
#top .j2-rec{ margin-top:clamp(28px,3.5vw,44px); display:flex; flex-direction:column; gap:1px; background:var(--j2-line); border-top:1px solid var(--j2-line); border-bottom:1px solid var(--j2-line); }
#top .j2-rec__row{
  background:var(--j2-surface);
  display:grid; grid-template-columns:96px minmax(0,1fr);
  gap:clamp(16px,2.5vw,36px); padding:22px 0;
  align-items:baseline;
}
#top .j2-rec__y{
  font-family:var(--j2-disp); font-size:20px; font-weight:700;
  color:var(--j2-brand); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
#top .j2-rec__items{ display:flex; flex-wrap:wrap; gap:7px; }
#top .j2-rec__items span{
  font-size:13px; color:var(--j2-ink-2);
  border:1px solid var(--j2-line-soft); background:var(--j2-ground);
  padding:6px 12px; border-radius:2px;
}

#top .j2-rec__items > div {
font-size:16px; color:var(--j2-ink-2);
  border:1px solid var(--j2-line-soft); background:var(--j2-ground);
  padding:6px 12px; border-radius:2px;
}

/* ── 오시는 길 / 연락 정보 ─────────────── */
#top .j2-info{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px; background:var(--j2-line);
  border:1px solid var(--j2-line);
  margin-top:clamp(28px,3.5vw,44px);
}
#top .j2-info > div{ background:var(--j2-surface); padding:26px 24px 28px; }
#top .j2-info h4{
  font-family:var(--j2-sans); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--j2-ink-3); margin:0 0 12px; font-weight:600;
}
#top .j2-info p{ font-size:15px; color:var(--j2-ink); line-height:1.7; }
#top .j2-info a:hover{ color:var(--j2-brand); }
#top .j2-info strong{
  display:block; font-family:var(--j2-disp); font-size:24px; font-weight:700; color:var(--j2-ink); letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}

/* ── 큰 수치 강조 (개요 지표) ──────────── */
/* 2×2 고정. 분할 컬럼(약 600px) 안에 들어가므로 auto-fit 을 쓰면
   3열이 잡혀 4번째 항목이 혼자 떨어지고 빈 셀에 배경(--j2-line)이
   그대로 드러난다. .j2-certs 와 같은 문제. */
#top .j2-stats{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--j2-line);
  border:1px solid var(--j2-line);
  margin-top:clamp(28px,3.5vw,44px);
}
#top .j2-stats > div{ background:var(--j2-surface); padding:24px 22px 26px; }
#top .j2-stats b{
  display:block; font-family:var(--j2-disp);
  font-size:clamp(26px,2.8vw,36px); font-weight:700;
  color:var(--j2-ink); letter-spacing:-.025em; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
#top .j2-stats b small{
  font-size:.48em; font-weight:500; color:var(--j2-brand);
  margin-left:5px; letter-spacing:0;
}
#top .j2-stats span{ display:block; font-size:13px; color:var(--j2-ink-2); margin-top:8px; }

/* ── 정의 블록 (용어 설명) ─────────────── */
#top .j2-def{
  border-left:2px solid var(--j2-mint);
  padding:4px 0 4px 22px;
  margin-top:26px;
}
#top .j2-def dt{
  font-family:var(--j2-disp); font-size:19px; font-weight:700;
  color:var(--j2-ink); letter-spacing:-.015em; margin-bottom:8px;
}
#top .j2-def dd{ margin:0; font-size:15px; line-height:1.85; color:var(--j2-ink-2); }

/* ── 이용 조건 체크리스트 ──────────────── */
#top .j2-reqs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin-top:clamp(24px,3vw,36px);
}
#top .j2-reqs li{
  border:1px solid var(--j2-line); background:var(--j2-surface);
  border-radius:3px; padding:18px 20px;
  display:flex; gap:12px; align-items:flex-start;
  font-size:14px; color:var(--j2-ink-2); line-height:1.65;
}
#top .j2-reqs li::before{
  content:"✓"; flex:none;
  color:var(--j2-mint); font-weight:700; font-size:15px; line-height:1.5;
}
#top .j2-reqs b{ display:block; color:var(--j2-ink); font-weight:700; margin-bottom:3px; }

/* ── 적용 사례 ─────────────────────────── */
#top .j2-cases{
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
  margin-top:clamp(28px,3.5vw,44px);
}
#top .j2-case{
  border:1px solid var(--j2-line); background:var(--j2-surface);
  border-radius:3px; padding:30px 28px 32px;
  display:flex; flex-direction:column; gap:12px;
  position:relative; overflow:hidden;
  transition:border-color .3s ease, transform .3s cubic-bezier(.2,.8,.3,1);
}
#top .j2-case:hover{ border-color:var(--j2-brand); transform:translateY(-3px); }
#top .j2-case__n{
  font-family:var(--j2-sans); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--j2-brand);
}
#top .j2-case h4{
  font-family:var(--j2-disp); font-size:19px; font-weight:700;
  color:var(--j2-ink); letter-spacing:-.015em; line-height:1.4;
}
#top .j2-case p{ font-size:14.5px; color:var(--j2-ink-2); line-height:1.8; }

/* ── 제품군 카드 (센서 라인업) ─────────── */
#top .j2-prods{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--j2-line); border:1px solid var(--j2-line);
  margin-top:clamp(28px,3.5vw,44px);
}
#top .j2-prod{
  background:var(--j2-surface); padding:clamp(26px,2.6vw,36px);
  display:flex; flex-direction:column; gap:14px;
}
#top .j2-prod__en{
  font-family:var(--j2-sans); font-size:10.5px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--j2-brand);
}
#top .j2-prod h3{
  font-family:var(--j2-disp); font-size:21px; font-weight:700;
  color:var(--j2-ink); letter-spacing:-.015em;
}
#top .j2-prod > p{ font-size:14.5px; color:var(--j2-ink-2); line-height:1.8; }
#top .j2-prod__spec{
  margin-top:auto; padding-top:16px;
  border-top:1px solid var(--j2-line-soft);
  display:flex; flex-direction:column; gap:9px;
}
#top .j2-prod__spec li{
  display:grid; grid-template-columns:92px minmax(0,1fr); gap:14px;
  font-size:13px; line-height:1.6; align-items:baseline;
}
#top .j2-prod__spec b{
  font-family:var(--j2-sans); font-size:10.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--j2-ink-3);
}
#top .j2-prod__spec span{ color:var(--j2-ink); }

/* ── 산업혁명 단계 (센서 도입 배경) ────── */
#top .j2-era{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; margin-top:clamp(28px,3.5vw,44px);
  border-top:1px solid var(--j2-line);
}
#top .j2-era li{
  padding:22px 20px 24px 0; position:relative;
  border-right:1px solid var(--j2-line-soft);
  padding-right:20px;
}

#top .j2-era li::marker {
  content: '';
}

#top .j2-era li:last-child{ border-right:0; }
#top .j2-era li::before{
  content:""; position:absolute; top:-1px; left:0;
  width:34px; height:2px; background:var(--j2-mint);
}
#top .j2-era b{
  display:block; font-family:var(--j2-disp);
  font-size:15px; font-weight:700; letter-spacing:.04em;
  color:var(--j2-brand); margin-bottom:9px;
}
#top .j2-era span{ font-size:13px; color:var(--j2-ink-2); line-height:1.65; }
#top .j2-era li:last-child b{ color:var(--j2-ink); }

/* main.css 의 .j2-flow 는 5단계 기준. 4단계짜리 변형.
   인라인 style 로 열 수를 주면 미디어쿼리를 이겨 모바일에서
   접히지 않으므로, 반드시 이 클래스를 쓴다. */
#top .j2-flow--4{ grid-template-columns:repeat(4,1fr); }

/* ── 문제점 카드 (근태 페이지) ─────────── */
#top .j2-probs{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--j2-line); border:1px solid var(--j2-line);
  margin-top:clamp(28px,3.5vw,44px);
}
#top .j2-prob{
  background:var(--j2-surface); padding:clamp(26px,2.6vw,34px);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px;
  align-items:start;
}
#top .j2-prob__n{
  font-family:var(--j2-disp); font-size:34px; font-weight:800;
  line-height:1; letter-spacing:-.04em;
  color:var(--j2-line); font-variant-numeric:tabular-nums;
}
#top .j2-prob h4{ font-size:16.5px; font-weight:700; color:var(--j2-ink); letter-spacing:-.01em; }
#top .j2-prob p{ margin:9px 0 0; font-size:14px; color:var(--j2-ink-2); line-height:1.8; }

/* ── 솔루션 행 (문제 → 해결) ───────────── */
#top .j2-sols{
  margin-top:clamp(28px,3.5vw,44px);
  border-top:1px solid var(--j2-line);
}
#top .j2-sol{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:20px; padding:24px 0;
  border-bottom:1px solid var(--j2-line-soft);
  align-items:start;
}
#top .j2-sol__ico{
  flex:none; width:34px; height:34px; border-radius:50%;
  background:var(--j2-mint); color:#03252C;
  display:grid; place-items:center;
  font-weight:700; font-size:15px; line-height:1;
}
#top .j2-sol h4{ font-size:16.5px; font-weight:700; color:var(--j2-ink); letter-spacing:-.01em; }
#top .j2-sol p{ margin:8px 0 0; font-size:14.5px; color:var(--j2-ink-2); line-height:1.8; }

/* ── 문의 방법 카드 ────────────────────── */
#top .j2-cways{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  margin-top:clamp(28px,3.5vw,44px);
}
#top .j2-cway{
  border:1px solid var(--j2-line); background:var(--j2-surface);
  border-radius:3px; padding:32px 28px 34px;
  display:flex; flex-direction:column; gap:12px;
  transition:border-color .3s ease, transform .3s cubic-bezier(.2,.8,.3,1);
}
#top .j2-cway:hover{ border-color:var(--j2-brand); transform:translateY(-3px); }
#top .j2-cway svg{ width:32px; height:32px; stroke:var(--j2-brand); fill:none; stroke-width:1.4; }
#top .j2-cway h4{
  font-family:var(--j2-sans); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--j2-ink-3); font-weight:500;
}
#top .j2-cway strong{
  font-family:var(--j2-disp); font-size:clamp(20px,2vw,26px);
  font-weight:700; color:var(--j2-ink);
  letter-spacing:-.015em; font-variant-numeric:tabular-nums;
  word-break:break-all;
}
#top .j2-cway a:hover strong{ color:var(--j2-brand); }
#top .j2-cway p{ font-size:13.5px; color:var(--j2-ink-2); line-height:1.75; margin-top:auto; padding-top:8px; }

/* ══ 문의 폼 (Contact Form 7) ══════════════════════════════
   CF7 이 실제로 뱉는 마크업을 전제로 한다.

     <p>
       <label> 라벨텍스트
         <span class="wpcf7-form-control-wrap" data-name="...">
           <input class="wpcf7-form-control wpcf7-text ..." size="40">
         </span>
       </label>
     </p>

   - 필드마다 <p> 로 감싸이고, <label> 이 입력창까지 품는다.
     그래서 label 에 margin-bottom 을 주면 라벨과 입력창 사이가 아니라
     필드 전체 아래에 붙는다. 간격은 .wpcf7-form-control-wrap 에 준다.
   - input 에 size="40" 이 붙어 폭이 고정되므로 width:100% 로 덮는다.
   - Enfold 도 #top input[type=...] 를 스타일하므로, 여기서는
     .j2-formbox 를 앞에 붙여 명시도를 한 단계 높였다.
   ═══════════════════════════════════════════════════════════ */
#top .j2-formbox{
  border:1px solid var(--j2-line); background:var(--j2-surface);
  border-radius:3px; padding:clamp(26px,3.5vw,44px);
  margin-top:clamp(28px,3.5vw,44px);
}

/* 필드 사이 간격은 gap 으로만 만든다 (p 마진은 죽인다) */
#top .j2-formbox .wpcf7-form,
#top .j2-formbox .j2-form{
  display:flex; flex-direction:column; gap:20px;
}
#top .j2-formbox .wpcf7-form p{ margin:0; }
#top .j2-formbox .wpcf7-form p:empty{ display:none; }
/* CF7 자동 서식이 끼워넣는 줄바꿈 제거.
   .wpcf7-form-control-wrap 이 이미 display:block 이라 <br> 은
   여백만 더한다. 기본 템플릿(label 안에 <br>)에도 적용된다. */
#top .j2-formbox .j2-form br,
#top .j2-formbox label br{ display:none; }

/* 성함 + 이메일 나란히 (개선 템플릿에서만 쓰임) */
#top .j2-formbox .j2-form__row{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}

/* ── 라벨 ── */
#top .j2-formbox label,
#top .j2-formbox .j2-field__label{
  display:block; font-size:13.5px; font-weight:700;
  color:var(--j2-ink); letter-spacing:-.005em;
}
#top .j2-formbox .j2-req{
  color:var(--j2-danger); font-weight:700; margin-left:2px;
}

/* ── 입력창 ── */
#top .j2-formbox .wpcf7-form-control-wrap{ display:block; margin-top:8px; }

#top .j2-formbox input[type="text"],
#top .j2-formbox input[type="email"],
#top .j2-formbox input[type="tel"],
#top .j2-formbox input[type="url"],
#top .j2-formbox input[type="number"],
#top .j2-formbox select,
#top .j2-formbox textarea{
  width:100%; max-width:100%;
  font-family:var(--j2-sans); font-size:15px; line-height:1.6;
  color:var(--j2-ink); background:var(--j2-ground);
  border:1px solid var(--j2-line); border-radius:2px;
  padding:13px 15px;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#top .j2-formbox textarea{ min-height:170px; resize:vertical; display:block; }

#top .j2-formbox input::placeholder,
#top .j2-formbox textarea::placeholder{ color:var(--j2-ink-3); opacity:1; }

#top .j2-formbox input:hover,
#top .j2-formbox textarea:hover,
#top .j2-formbox select:hover{ border-color:var(--j2-ink-3); }

#top .j2-formbox input:focus,
#top .j2-formbox select:focus,
#top .j2-formbox textarea:focus{
  outline:none; background:var(--j2-surface);
  border-color:var(--j2-brand);
  box-shadow:0 0 0 3px rgba(0,110,142,.14);
}

/* ── 검증 실패 ──
   .wpcf7-not-valid 만으로는 위의 input[type=...] 규칙(클래스2+속성1)에
   명시도가 밀린다. CF7 은 항상 wpcf7-form-control 을 함께 붙이므로
   두 클래스를 겹쳐 명시도를 올린다. */
#top .j2-formbox .wpcf7-form-control.wpcf7-not-valid{
  border-color:var(--j2-danger);
  background:var(--j2-danger-bg);
}
#top .j2-formbox .wpcf7-form-control.wpcf7-not-valid:focus{
  border-color:var(--j2-danger);
  background:var(--j2-danger-bg);
  box-shadow:0 0 0 3px rgba(198,69,60,.16);
}
#top .j2-formbox .wpcf7-not-valid-tip{
  display:block; margin-top:7px;
  font-size:12.5px; font-weight:500; color:var(--j2-danger);
}
#top .j2-formbox .wpcf7-not-valid-tip::before{
  content:"!"; display:inline-grid; place-items:center;
  width:14px; height:14px; margin-right:6px;
  border-radius:50%; background:var(--j2-danger); color:#fff;
  font-size:10px; font-weight:700; vertical-align:-2px;
}

/* ── 제출 버튼 ── */
#top .j2-formbox .j2-form__submit{ margin-top:4px; }
#top .j2-formbox input[type="submit"],
#top .j2-formbox input.wpcf7-submit,
#top .j2-formbox button[type="submit"]{
  width:auto;
  font-family:var(--j2-sans); font-size:15px; font-weight:700;
  letter-spacing:-.005em;
  background:var(--j2-brand); color:#fff;
  border:0; border-radius:2px;
  padding:15px 38px; cursor:pointer;
  transition:filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
#top .j2-formbox input[type="submit"]:hover,
#top .j2-formbox input.wpcf7-submit:hover,
#top .j2-formbox button[type="submit"]:hover{
  filter:brightness(1.12); transform:translateY(-1px);
  box-shadow:0 6px 18px -8px rgba(0,110,142,.6);
}
#top .j2-formbox input[type="submit"]:disabled{
  opacity:.55; cursor:not-allowed; transform:none; box-shadow:none;
}

/* 전송 중 스피너 */
#top .j2-formbox .wpcf7-spinner{
  margin-left:14px; vertical-align:middle;
  background-color:var(--j2-mint);
}

/* ── 전송 결과 메시지 ──
   CF7 은 결과에 따라 <form> 에 sent / invalid / failed 클래스를 붙인다. */
/* 아직 제출 전이면 빈 박스가 회색 띠로 보이므로 숨긴다.
   CF7 자체 CSS 도 .init/.resetting/.submitting 에서 숨기지만,
   그 스타일시트 로드 여부에 기대지 않고 여기서도 같은 조건을 준다.

   ※ [aria-hidden="true"] 로 숨기면 안 된다.
     CF7 6.x 는 메시지를 띄울 때 innerText 만 채우고 aria-hidden 은
     그대로 두기 때문에, 그 선택자를 쓰면 성공·실패 메시지가 영원히
     안 보인다. 실제로 그 버그를 냈었다.
     비어 있는지 여부(:empty)로 판단하는 것이 안전하다. */
#top .j2-formbox .wpcf7-form.init .wpcf7-response-output,
#top .j2-formbox .wpcf7-form.resetting .wpcf7-response-output,
#top .j2-formbox .wpcf7-form.submitting .wpcf7-response-output,
#top .j2-formbox .wpcf7-response-output:empty{ display:none; }

#top .j2-formbox .wpcf7-response-output{
  margin:20px 0 0; padding:14px 18px;
  border:1px solid var(--j2-line); border-left-width:3px;
  border-radius:2px;
  font-size:14px; line-height:1.7; color:var(--j2-ink-2);
  background:var(--j2-ground);
}
#top .j2-formbox .sent .wpcf7-response-output{
  border-color:var(--j2-ok); background:var(--j2-ok-bg); color:var(--j2-ok);
}
#top .j2-formbox .invalid .wpcf7-response-output,
#top .j2-formbox .unaccepted .wpcf7-response-output,
#top .j2-formbox .payment-required .wpcf7-response-output,
#top .j2-formbox .failed .wpcf7-response-output,
#top .j2-formbox .aborted .wpcf7-response-output,
#top .j2-formbox .spam .wpcf7-response-output{
  border-color:var(--j2-danger); background:var(--j2-danger-bg); color:var(--j2-danger);
}

/* 개인정보 동의 등 체크박스 한 줄 */
#top .j2-formbox .wpcf7-acceptance .wpcf7-list-item{ margin:0; }
#top .j2-formbox .wpcf7-acceptance label{
  display:flex; align-items:flex-start; gap:9px;
  font-size:13.5px; font-weight:500; color:var(--j2-ink-2); line-height:1.6;
}
#top .j2-formbox .wpcf7-acceptance input[type="checkbox"]{
  width:auto; margin:2px 0 0; flex:none; accent-color:var(--j2-brand);
}

@media (max-width:640px){
  #top .j2-formbox .j2-form__row{ grid-template-columns:1fr; }
  #top .j2-formbox input[type="submit"],
  #top .j2-formbox input.wpcf7-submit{ width:100%; }
}

/* 폼 플러그인 숏코드를 아직 안 넣었을 때 보이는 안내 */
#top .j2-formbox__todo{
  border:1px dashed var(--j2-line); border-radius:3px;
  padding:36px 28px; text-align:center;
  color:var(--j2-ink-3); font-size:14px; line-height:1.8;
}
#top .j2-formbox__todo code{
  font-family:var(--j2-sans); font-size:13px;
  background:var(--j2-ground); color:var(--j2-brand);
  padding:3px 8px; border-radius:2px;
}

/* ── 지도 자리 ─────────────────────────── */
#top .j2-mapbox{
  margin-top:clamp(28px,3.5vw,44px);
  border:1px solid var(--j2-line); border-radius:3px;
  overflow:hidden; background:var(--j2-surface-2);
}
#top .j2-mapbox iframe,
#top .j2-mapbox > div[id]{ display:block; width:100%; height:clamp(280px,38vw,440px); border:0; }
#top .j2-mapbox__todo{
  height:clamp(220px,28vw,320px);
  display:grid; place-items:center; text-align:center;
  color:var(--j2-ink-3); font-size:14px; line-height:1.8; padding:24px;
}

/* ── 반응형 ────────────────────────────── */
@media (max-width:1080px){
  #top .j2-split,
  #top .j2-split--wide{ grid-template-columns:1fr; }
  #top .j2-certs{ grid-template-columns:1fr 1fr; }
  #top .j2-era{ grid-template-columns:1fr 1fr; }
  #top .j2-era li:nth-child(2n){ border-right:0; }
}
@media (max-width:860px){
  #top .j2-reqs{ grid-template-columns:1fr; }
  #top .j2-prods{ grid-template-columns:1fr; }
  #top .j2-cases{ grid-template-columns:1fr; }
  #top .j2-probs{ grid-template-columns:1fr; }
  #top .j2-flow--4{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  #top .j2-vtl__row{ grid-template-columns:1fr; gap:14px; }
  #top .j2-rec__row{ grid-template-columns:1fr; gap:12px; }
  #top .j2-certs{ grid-template-columns:1fr; }
  #top .j2-era{ grid-template-columns:1fr; }
  #top .j2-era li{ border-right:0; border-bottom:1px solid var(--j2-line-soft); }
  #top .j2-era li:last-child{ border-bottom:0; }
  #top .j2-prod__spec li{ grid-template-columns:1fr; gap:2px; }
  #top .j2-cways{ grid-template-columns:1fr; }
  #top .j2-flow--4{ grid-template-columns:1fr; }
}