/* =========================================================
   JTOONE 메인 페이지 — 섹션 스타일
   회사소개서(2024) 기반. 모든 선택자는 .j2- 네임스페이스에
   격리되어 있어 Enfold 본체 스타일과 충돌하지 않는다.
   Enfold가 #top ID 선택자를 쓰므로 우선순위가 필요한 곳은
   #top 을 앞에 붙였다 (header.css 와 같은 방식).

   사용법: 페이지 편집기의 Code Block 에 sections/*.html 을
   붙여넣는다. 각 섹션 최상위에 .j2 클래스가 있어야 한다.
   ========================================================= */

/* ── 토큰 ─────────────────────────────────
   브랜드 색은 회사소개서 PDF에서 직접 추출한 값. */
:root{
  --j2-brand:      #006E8E;
  --j2-brand-deep: #04384A;
  --j2-brand-mid:  #0C7B9D;
  --j2-cyan:       #009EAE;
  --j2-mint:       #4FC9A9;

  --j2-ground:     #F4F7F8;
  --j2-surface:    #FFFFFF;
  --j2-surface-2:  #E8F0F3;
  --j2-ink:        #0A2430;
  --j2-ink-2:      #4C6874;
  --j2-ink-3:      #7C949E;
  --j2-line:       #D3E0E5;
  --j2-line-soft:  #E3ECEF;

  /* 상태 색 — 폼 검증/전송 결과 전용. 브랜드 액센트와 역할이 다르므로
     따로 둔다. 청록 계열 페이지 위에서 튀도록 채도를 조금 낮췄다. */
  --j2-danger:     #C6453C;
  --j2-danger-bg:  #FCF0EF;
  --j2-ok:         #12805C;
  --j2-ok-bg:      #EAF7F2;

  /* 히어로 / 스펙시트 / 푸터의 딥 페트롤 — 의도적 단일 세계 */
  --j2-deep:       #04222E;
  --j2-deep-ink:   #E8F3F6;
  --j2-deep-ink-2: #8FB3C0;
  --j2-deep-line:  rgba(140,205,222,.16);

  --j2-maxw: 1240px;
  --j2-gut:  clamp(20px, 5vw, 64px);

  /* 폰트는 Pretendard 하나뿐이다. 본문 · 제목 · 라벨 · 수치 전부.
     위계는 웨이트와 자간으로만 만든다.

     이전에는 세 가지를 썼다 — Gothic A1(국문) + Archivo(영문 디스플레이)
     + IBM Plex Mono(라벨·수치). 셋 다 걷어냈으므로 --j2-mono 는 없다.
     --j2-disp 는 별칭으로 남겨뒀다. 나중에 제목만 다른 폰트로 바꾸고
     싶어지면 이 한 줄만 고치면 되기 때문이다.

     라벨의 "계측기" 느낌은 폰트가 아니라 대문자 + 넓은 자간이 만든다.
     수치 정렬은 font-variant-numeric:tabular-nums 가 유지한다. */
  --j2-sans: "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --j2-disp: var(--j2-sans);
}

 #main main {
    padding-top: 0;
    padding-bottom: 0;
  }

@media (min-width: 767px) {

  #header_main {
    padding-top: 30px;
}

    #header_main .main_menu {
      left: 50%;
      transform: translateX(-50%);  
      width: 100%;
  }

  #header_main .main_menu .av-main-nav-wrap {
        width: 100%;
      display: flex;
      justify-content: center;
  }

  #header_main .logo {
    z-index: 101;
  }

  .header_color .main_menu .menu ul li a {
    color: #000 !important;
  }

}

/* ── 사이트 전역 폰트 ─────────────────────
   .j2- 섹션뿐 아니라 Enfold 본문 · 메뉴 · 푸터까지 Pretendard 로 통일한다.

   주의: span, i, * 같은 범용 선택자를 쓰면 아이콘 폰트(entypo-fontello)가
   깨진다. Enfold 아이콘은 .av-icon-char / [class^="entypo-"] 에
   직접 font-family 를 걸기 때문에, 아래처럼 텍스트 요소만 지정하면
   아이콘은 영향을 받지 않는다.

   body 의 !important 도 아이콘을 깨뜨리지 않는다 — 상속값은 항상
   직접 선언보다 약하므로, 아이콘 요소의 자기 규칙이 그대로 이긴다.
   !important 를 쓴 이유는 Enfold 커스터마이저가 뿜는 인라인 CSS 가
   이 파일보다 뒤에 올 수 있기 때문이다. */
html body,
#top h1, #top h2, #top h3, #top h4, #top h5, #top h6,
#top .av-special-heading-tag,
#top .main_menu ul li a,
#top input, #top select, #top textarea, #top button{
  font-family:var(--j2-sans) !important;
}

/* ── 래퍼 기본 ─────────────────────────── */
#top .j2,
#top .j2 *,
#top .j2 *::before,
#top .j2 *::after{ box-sizing:border-box; }

#top .j2{
  font-family:var(--j2-sans);
  font-size:16px;
  line-height:1.72;
  color:var(--j2-ink);
  background:var(--j2-ground);
  -webkit-font-smoothing:antialiased;
}
#top .j2 img{ max-width:100%; display:block; }
#top .j2 a{ text-decoration:none; color:inherit; }
/* #top .j2 p{ margin:0; } */
#top .j2 ul{ margin:0; padding:0; list-style:none; }
#top .j2 :focus-visible{ outline:2px solid var(--j2-cyan); outline-offset:3px; }

/* Enfold 콘텐츠 폭을 벗어나 전체 너비로 깔아야 하는 섹션.
   색상 섹션(Color Section) 대신 Code Block 만 쓸 때 사용. */
#top .j2-bleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

#top .j2-sec{ padding-top:clamp(72px,9vw,124px); padding-bottom:clamp(72px,9vw,124px); }

#top .j2-wrap{
  width:100%;
  max-width:var(--j2-maxw);
  margin-left:auto; margin-right:auto;
  padding-left:var(--j2-gut); padding-right:var(--j2-gut);
}

/* ── 공통 타이포 ───────────────────────── */
#top .j2-eyebrow{
  font-family:var(--j2-sans);
  font-size:18px; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--j2-brand);
  display:flex; align-items:center; gap:10px;
  margin:0 0 18px;
}
#top .j2-eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; flex:none; }
#top .j2-eyebrow--deep{ color:var(--j2-mint); }

#top .j2 h1,
#top .j2 h2,
#top .j2 h3,
#top .j2 h4,
#top .j2 h5{ margin:0; padding:0; text-wrap:balance; }

#top .j2-h2{
  font-family:var(--j2-disp);
  font-size:clamp(29px,3.5vw,46px);
  font-weight:700;
  letter-spacing:-.018em; line-height:1.2;
  color:var(--j2-ink);
}
#top .j2-h2 em{ font-style:normal; color:var(--j2-brand); }

#top .j2-lede{
  color:var(--j2-ink-2);
  font-size:clamp(15px,1.15vw,17px);
  line-height:1.85;
  max-width:60ch;
  margin:20px 0 0;
}

/* 계측 눈금 구분선 */
#top .j2-ruler{
  height:11px;
  background-image:repeating-linear-gradient(to right,currentColor 0 1px,transparent 1px 12px);
  color:var(--j2-line);
}

/* ── 버튼 ──────────────────────────────── */
#top .j2-btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14.5px; font-weight:700;
  padding:14px 26px; border-radius:2px;
  border:1px solid transparent;
  transition:.24s cubic-bezier(.2,.8,.3,1);
}
#top .j2-btn--fill{ background:var(--j2-mint); color:#03252C; }
#top .j2-btn--fill:hover{ background:#7FE7CB; transform:translateY(-2px); color:#03252C; }
#top .j2-btn--ghost{ border-color:var(--j2-deep-line); color:var(--j2-deep-ink); }
#top .j2-btn--ghost:hover{ border-color:var(--j2-deep-ink-2); background:rgba(255,255,255,.05); }
#top .j2-acts{ display:flex; flex-wrap:wrap; gap:10px; margin:36px 0 0; }

/* ── 01 · 히어로 ───────────────────────── */
#top .j2-hero{
  position:relative;
  min-height:min(88vh,780px);
  display:flex; flex-direction:column; justify-content:flex-end;
  background:
    radial-gradient(120% 90% at 78% 42%, #0A4C63 0%, transparent 62%),
    linear-gradient(160deg,#052A38 0%,#04222E 55%,#03191F 100%);
  color:var(--j2-deep-ink);
  padding-top:clamp(72px,8vw,150px);
  overflow:hidden; isolation:isolate;
}
#top .j2-hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
#top .j2-hero__in{ position:relative; z-index:2; padding-bottom:clamp(40px,6vw,72px); }
#top .j2-hero__grid{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,4vw,64px); align-items:end;
}
/* Pretendard 는 Archivo 보다 자족이 좁다. 폭 축(font-stretch)이 없으므로
   최대 크기를 키우고 자간을 더 조여 히어로의 덩어리감을 되살린다. */
#top .j2-hero h1{
  font-family:var(--j2-disp);
  font-size:clamp(46px,9vw,124px);
  font-weight:900;
  letter-spacing:-.042em; line-height:.94;
  color:var(--j2-deep-ink);
}
#top .j2-hero h1 span{ display:block; }
/* 두꺼운 본체 옆에서 가는 앰퍼샌드로 대비를 만든다.
   (이전에는 폭 축을 74% 로 조여 만들던 대비) */
#top .j2-hero h1 .j2-amp{
  color:var(--j2-mint); font-weight:200;
  letter-spacing:0; padding-right:.06em;
}
#top .j2-hero__kr{
  font-size:clamp(16px,1.6vw,21px); font-weight:500;
  color:var(--j2-deep-ink); margin:26px 0 0; letter-spacing:-.01em;
}
#top .j2-hero__kr b{ color:var(--j2-mint); font-weight:700; }
#top .j2-hero__sub{
  color:var(--j2-deep-ink-2); font-size:15px;
  margin:12px 0 0; max-width:46ch; line-height:1.8;
}
#top .j2-hero__tech{
  display:flex; flex-wrap:wrap; gap:6px 8px; margin:30px 0 0;
  font-family:var(--j2-sans); font-size:11.5px; font-weight:500; letter-spacing:.06em;
}
#top .j2-hero__tech li{
  padding:5px 11px; border:1px solid var(--j2-deep-line);
  border-radius:2px; color:var(--j2-deep-ink-2);
}

/* 신호 판독 카드 */
#top .j2-readout{
  border:1px solid var(--j2-deep-line); border-radius:3px;
  background:rgba(4,34,46,.55); backdrop-filter:blur(8px);
  padding:20px 22px; width:min(280px,42vw);
  font-family:var(--j2-sans); font-size:11.5px; font-weight:500; color:var(--j2-deep-ink-2);
}
#top .j2-readout__ttl{
  display:flex; justify-content:space-between; align-items:center;
  letter-spacing:.16em; text-transform:uppercase; font-size:10px; font-weight:600;
  color:var(--j2-mint);
  padding-bottom:12px; margin-bottom:12px;
  border-bottom:1px solid var(--j2-deep-line);
}
#top .j2-dot{
  width:6px; height:6px; border-radius:50%; background:var(--j2-mint);
  box-shadow:0 0 0 0 rgba(79,201,169,.6);
  animation:j2-ping 2.2s infinite;
}
@keyframes j2-ping{
  70%{ box-shadow:0 0 0 8px rgba(79,201,169,0); }
  100%{ box-shadow:0 0 0 0 rgba(79,201,169,0); }
}
#top .j2-readout dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:9px 14px; }
#top .j2-readout dt{ color:var(--j2-deep-ink-2); opacity:.75; }
#top .j2-readout dd{
  margin:0; color:var(--j2-deep-ink);
  text-align:right; font-variant-numeric:tabular-nums;
}

/* 히어로 하단 지표 밴드 */
#top .j2-metrics{
  border-top:1px solid var(--j2-deep-line);
  background:rgba(3,20,27,.5);
  position:relative; z-index:2;
}
#top .j2-metrics ul{ display:grid; grid-template-columns:repeat(4,1fr); }
#top .j2-metrics li{
  padding:26px 0 26px 22px;
  border-left:1px solid var(--j2-deep-line);
}
#top .j2-metrics li:first-child{ border-left:0; padding-left:0; }
#top .j2-metrics b{
  display:block; font-family:var(--j2-disp);
  font-size:clamp(24px,2.6vw,34px); font-weight:700;
  color:var(--j2-deep-ink); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; line-height:1.1;
}
#top .j2-metrics b small{
  font-size:.5em; font-weight:500; color:var(--j2-mint);
  margin-left:4px; letter-spacing:0;
}
#top .j2-metrics span{
  display:block; font-size:12.5px;
  color:var(--j2-deep-ink-2); margin-top:7px;
}

/* ── 02 · 회사 개요 ────────────────────── */
#top .j2-about__grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,80px); align-items:start;
}
#top .j2-quote{
  font-family:var(--j2-disp); font-weight:500;
  font-size:clamp(19px,2vw,25px); line-height:1.55; letter-spacing:-.015em;
  color:var(--j2-ink); margin:28px 0 0;
  padding-left:20px; border-left:2px solid var(--j2-mint);
}
/* 회사 개요 표.
   dl/dt/dd 를 쓰지 않는다 — <dl> 안에 <div> 로 행을 감싸는 구조는
   HTML5 에선 유효하지만 편집기(TinyMCE)의 스키마가 이를 모르고
   언랩하면서 내용을 통째로 날려버린다. 실제로 발생했던 문제다.
   div/span 조합은 어떤 블록 타입에 붙여넣어도 살아남는다. */
#top .j2-spec{ border-top:1px solid var(--j2-ink); margin:0; }
#top .j2-spec__row{
  display:grid; grid-template-columns:96px minmax(0,1fr);
  gap:16px; padding:15px 0;
  border-bottom:1px solid var(--j2-line-soft);
  align-items:baseline;
}
#top .j2-spec__k{
  font-family:var(--j2-sans); font-size:15px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--j2-ink-3);
}
#top .j2-spec__v{ font-size:15px; color:var(--j2-ink); line-height:1.7; }

/* ── 03 · 기술 3분야 ───────────────────── */
#top .j2-tech{ background:var(--j2-surface); border-top:1px solid var(--j2-line); border-bottom:1px solid var(--j2-line); }
#top .j2-tech__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; }
#top .j2-tech__head .j2-lede{ margin:0; max-width:44ch; }
#top .j2-tech__list{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  margin-top:clamp(40px,5vw,68px);
  background:var(--j2-line); border:1px solid var(--j2-line);
}
#top .j2-tcard{
  background:var(--j2-surface);
  padding:clamp(26px,2.6vw,25px);
  display:flex; flex-direction:column; gap:16px;
  transition:background .3s ease;
}
#top .j2-tcard:hover{ background:var(--j2-surface-2); }
#top .j2-tcard__num{
  font-family:var(--j2-disp); font-size:13px; font-weight:700;
  letter-spacing:.2em; color:var(--j2-brand);
}
#top .j2-tcard svg{ width:44px; height:44px; stroke:var(--j2-brand); fill:none; stroke-width:1.4; }
#top .j2-tcard h3{
  font-family:var(--j2-disp); font-size:22px; font-weight:700;
  letter-spacing:-.01em; color:var(--j2-ink);
}
#top .j2-tcard h3 small{
  display:block; font-family:var(--j2-sans); font-size:13.5px;
  font-weight:500; color:var(--j2-ink-2); margin-top:5px; letter-spacing:0;
}
#top .j2-tcard p{ font-size:14.5px; color:var(--j2-ink-2); line-height:1.8; }
#top .j2-tcard ul{ margin:4px 0 0; display:flex; flex-direction:column; gap:7px; }
#top .j2-tcard li{
 font-size:16px; color:var(--j2-ink-2);
  padding-left:15px; position:relative; line-height:1.6;
  margin:0;
}
#top .j2-tcard li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:1px; background:var(--j2-mint);
}
#top .j2-tcard__more{
  margin-top: auto;
    /* font-family: var(--j2-sans); */
    font-size: 15px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--j2-brand) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
#top .j2-tcard__more::after{ content:"→"; transition:transform .25s; }
#top .j2-tcard:hover .j2-tcard__more::after{ transform:translateX(4px); }

/* ── 04 · J-Beacon 스펙시트 ────────────── */
#top .j2-beacon{
  background:linear-gradient(150deg,#052A38,#04222E 60%,#03191F);
  color:var(--j2-deep-ink); position:relative; overflow:hidden;
}
#top .j2-beacon::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:.5;
}
#top .j2-beacon .j2-wrap{ position:relative; z-index:1; }
#top .j2-beacon .j2-h2{ color:var(--j2-deep-ink); }
#top .j2-beacon .j2-h2 em{ color:var(--j2-mint); }
#top .j2-beacon .j2-lede{ color:var(--j2-deep-ink-2); }

#top .j2-sheet{
  margin-top:clamp(40px,5vw,64px);
  display:grid; grid-template-columns:repeat(12,1fr); gap:1px;
  background:var(--j2-deep-line); border:1px solid var(--j2-deep-line);
}
#top .j2-sheet > div{ background:#04222E; padding:24px 26px; }
#top .j2-sh--wide{ grid-column:span 5; }
#top .j2-sh--mid{ grid-column:span 4; }
#top .j2-sh--nar{ grid-column:span 3; }
#top .j2-sh--half{ grid-column:span 6; }
#top .j2-sheet h4{
  font-family:var(--j2-sans); font-size:10.5px; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--j2-mint); margin:0 0 16px;
}
#top .j2-sheet ul{ display:flex; flex-direction:column; gap:10px; }
#top .j2-sheet li{ font-size:14px; color:var(--j2-deep-ink); line-height:1.6; display:flex; gap:10px; }
#top .j2-sheet li::before{ content:"+"; color:var(--j2-mint); font-family:var(--j2-sans); flex:none; }
#top .j2-sheet p{ margin:10px 0 0; font-size:13px; color:var(--j2-deep-ink-2); line-height:1.7; }

/* 막대 폭 = 실제 바이트 비율(16 : 2 : 2).
   flex 로는 정확히 안 나온다 — flex-basis:0 + border-box 에서
   padding 이 최소 폭 바닥을 만들어 작은 항목이 부풀기 때문.
   grid 의 minmax(0,Nfr) 은 트랙 전체를 정확한 비율로 나눈다. */
#top .j2-packet{
  display:grid;
  grid-template-columns:minmax(0,16fr) minmax(0,2fr) minmax(0,2fr);
  border:1px solid var(--j2-deep-line);
  border-radius:2px; overflow:hidden; font-family:var(--j2-sans);
}
#top .j2-packet div{
  padding:12px 10px; text-align:center;
  border-right:1px solid var(--j2-deep-line);
  min-width:0;
}
#top .j2-packet div:last-child{ border-right:0; }
#top .j2-packet .j2-p-uuid{ background:rgba(79,201,169,.14); }
#top .j2-packet .j2-p-maj{ background:rgba(0,158,174,.14); }
#top .j2-packet .j2-p-min{ background:rgba(0,158,174,.08); }
#top .j2-packet b{ display:block; font-size:12px; color:var(--j2-deep-ink); font-weight:600; }
#top .j2-packet span{ display:block; font-size:10px; font-weight:500; color:var(--j2-deep-ink-2); margin-top:4px; letter-spacing:.06em; }

#top .j2-bigfig{
  display:flex; align-items:baseline; gap:8px;
  font-family:var(--j2-disp); font-weight:700;
  font-size:clamp(30px,3.4vw,44px); color:var(--j2-deep-ink);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
#top .j2-bigfig small{
  font-size:15px; font-weight:500; color:var(--j2-mint);
  font-family:var(--j2-sans); letter-spacing:.06em;
}

/* ── 05 · 솔루션 흐름 + 활용분야 ───────── */
#top .j2-flow{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  margin-top:clamp(36px,4vw,56px);
  background:var(--j2-line); border:1px solid var(--j2-line);
}
#top .j2-step{ background:var(--j2-surface); padding:26px 22px 28px; display:flex; flex-direction:column; gap:12px; }
#top .j2-step__n{
  font-family:var(--j2-sans); font-size:11px; font-weight:600; letter-spacing:.14em;
  color:var(--j2-brand); display:flex; align-items:center; gap:9px;
}
#top .j2-step__n::after{ content:""; flex:1; height:1px; background:var(--j2-line); }
#top .j2-step h4{ font-size:15.5px; font-weight:700; color:var(--j2-ink); letter-spacing:-.01em; line-height:1.5; }
#top .j2-step p{ font-size:13.5px; color:var(--j2-ink-2); line-height:1.75; }

#top .j2-apps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:clamp(36px,4vw,56px); }
#top .j2-app{
  background:var(--j2-surface); border:1px solid var(--j2-line); border-radius:3px;
  padding:28px 24px 30px; position:relative; overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), border-color .3s;
}
#top .j2-app::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--j2-cyan),var(--j2-mint));
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
#top .j2-app:hover{ transform:translateY(-4px); border-color:var(--j2-brand); }
#top .j2-app:hover::after{ transform:scaleX(1); }
#top .j2-app svg{ width:34px; height:34px; stroke:var(--j2-brand); fill:none; stroke-width:1.4; margin-bottom:18px; }
#top .j2-app h4{ font-size:16.5px; font-weight:700; color:var(--j2-ink); letter-spacing:-.01em; }
#top .j2-app p{ margin:9px 0 0; font-size:13.5px; color:var(--j2-ink-2); line-height:1.78; }

/* ── 06 · 연혁 / R&D ───────────────────── */
#top .j2-hist{ background:var(--j2-surface); border-top:1px solid var(--j2-line); border-bottom:1px solid var(--j2-line); }
#top .j2-tl{
  margin-top:clamp(40px,5vw,64px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--j2-line);
  border-top:1px solid var(--j2-line); border-bottom:1px solid var(--j2-line);
}
#top .j2-yr{ background:var(--j2-surface); padding:26px 22px 30px; }
#top .j2-yr__y{
  font-family:var(--j2-disp); font-size:clamp(30px,3vw,40px);
  font-weight:800; color:var(--j2-brand);
  letter-spacing:-.03em; line-height:1; margin-bottom:16px;
  font-variant-numeric:tabular-nums;
}
#top .j2-yr ul{ display:flex; flex-direction:column; gap:9px; }
#top .j2-yr li{ font-size:13.5px; color:var(--j2-ink-2); line-height:1.6; padding-left:14px; position:relative; }
#top .j2-yr li::before{
  content:""; position:absolute; left:0; top:.65em;
  width:5px; height:5px; border-radius:50%; background:var(--j2-mint);
}

#top .j2-rnd{ margin-top:clamp(44px,5vw,72px); }
#top .j2-rnd-scroll{ overflow-x:auto; }
#top .j2-rnd table{ width:100%; border-collapse:collapse; font-size:14px; margin:0; }
#top .j2-rnd th{
  text-align:left; font-family:var(--j2-sans); font-size:16px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--j2-ink-3);
  font-weight:600; padding:15px;
  border-bottom:1px solid var(--j2-ink); background:none;
}
#top .j2-rnd td{
  padding:15px; border-bottom:1px solid var(--j2-line-soft);
  color:var(--j2-ink-2); vertical-align:top; line-height:1.65; background:none;font-size: 14px;
}
#top .j2-rnd td:first-child{
  font-family:var(--j2-sans); font-size:14px; color:var(--j2-ink);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
#top .j2-rnd td b{ color:var(--j2-ink); font-weight:700; display:block; font-size: 14px; }

/* ── 07 · 고객사 ───────────────────────── */
#top .j2-segs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px;
  background:var(--j2-line); border:1px solid var(--j2-line); margin-top:36px;
}
#top .j2-segs div{ background:var(--j2-surface); padding:20px 18px; text-align:center; }
#top .j2-segs b{ display:block; font-size:14.5px; color:var(--j2-ink); font-weight:700; }
#top .j2-segs small{
  display:block; font-family:var(--j2-sans); font-size:10.5px; font-weight:600;
  color:var(--j2-ink-3); letter-spacing:.1em; margin-top:6px;
}
#top .j2-clients{ display:flex; flex-wrap:wrap; gap:8px; margin-top:32px; }
#top .j2-clients span{
  font-size:13.5px; color:var(--j2-ink-2);
  border:1px solid var(--j2-line); background:var(--j2-surface);
  padding:8px 15px; border-radius:2px;
}

/* ── 08 · CTA 밴드 ─────────────────────── */
#top .j2-cta{
  background:linear-gradient(120deg,#04384A,#006E8E 70%,#009EAE);
  color:#EAF6F9;
  padding-top:clamp(52px,6vw,84px); padding-bottom:clamp(52px,6vw,84px);
}
#top .j2-cta .j2-wrap{ display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap; }
#top .j2-cta h2{
  font-family:var(--j2-disp); font-size:clamp(26px,3vw,40px);
  font-weight:700; letter-spacing:-.02em;
  line-height:1.25; color:#fff;
}
#top .j2-cta p{ margin:12px 0 0; color:#B9DDE8; font-size:15px; }
#top .j2-cta .j2-acts{ margin:0; }
#top .j2-cta .j2-btn--fill{ background:#fff; color:#04384A; }
#top .j2-cta .j2-btn--fill:hover{ background:#CFF3EA; }
#top .j2-cta .j2-btn--ghost{ border-color:rgba(255,255,255,.35); color:#fff; }
#top .j2-cta .j2-btn--ghost:hover{ background:rgba(255,255,255,.12); }

/* ── 09 · 푸터 (선택) ──────────────────── */
#top .j2-ft{
  background:var(--j2-deep); color:var(--j2-deep-ink-2);
  padding-top:clamp(48px,5vw,72px); padding-bottom:32px;
}
#top .j2-ft__grid{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:36px; }
#top .j2-ft h5{
  font-family:var(--j2-sans); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--j2-mint); margin:0 0 16px; font-weight:600;
}
#top .j2-ft ul{ display:flex; flex-direction:column; gap:9px; font-size:13.5px; }
#top .j2-ft a:hover{ color:var(--j2-deep-ink); }
#top .j2-logo{ display:flex; flex-direction:column; line-height:1; }
#top .j2-logo__kr{ font-size:9.5px; letter-spacing:.32em; font-weight:700; color:var(--j2-deep-ink-2); margin-bottom:5px; }
#top .j2-logo__mark{
  font-family:var(--j2-disp); font-size:26px; font-weight:800; letter-spacing:.01em; color:var(--j2-deep-ink);
}
#top .j2-logo__mark i{ font-style:normal; color:var(--j2-mint); }
#top .j2-ft__addr{ font-size:13.5px; line-height:1.85; margin:20px 0 0; }
#top .j2-ft__addr b{ color:var(--j2-deep-ink); font-weight:600; }
#top .j2-ft__tel{
  font-family:var(--j2-disp); font-size:30px; font-weight:700;
  color:var(--j2-deep-ink); letter-spacing:-.01em; margin:6px 0 0;
  font-variant-numeric:tabular-nums;
}
#top .j2-ft__btm{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--j2-deep-line);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--j2-sans); font-size:11px; font-weight:500; letter-spacing:.05em;
}

#socket .copyright {
  width: 100%;
}

/* ── 스크롤 리빌 ───────────────────────── */
#top .j2-rv{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1);
}
#top .j2-rv.j2-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  #top .j2 *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  #top .j2-rv{ opacity:1; transform:none; }
}

/* ── 반응형 ────────────────────────────── */
@media (max-width:1080px){
  #top .j2-tech__list{ grid-template-columns:1fr 1fr; }
  #top .j2-flow{ grid-template-columns:1fr 1fr 1fr; }
  #top .j2-apps{ grid-template-columns:1fr 1fr; }
  #top .j2-tl{ grid-template-columns:1fr 1fr; }
  #top .j2-ft__grid{ grid-template-columns:1fr 1fr; }
  #top .j2-sh--wide,
  #top .j2-sh--mid,
  #top .j2-sh--nar,
  #top .j2-sh--half{ grid-column:span 6; }
}
@media (max-width:860px){
  #top .j2-hero__grid{ grid-template-columns:1fr; }
  #top .j2-readout{ width:100%; max-width:340px; }
  #top .j2-about__grid{ grid-template-columns:1fr; }
  #top .j2-metrics ul{ grid-template-columns:1fr 1fr; }
  #top .j2-metrics li{ padding-left:0; border-left:0; border-top:1px solid var(--j2-deep-line); }
  #top .j2-metrics li:nth-child(-n+2){ border-top:0; }
}
@media (max-width:640px){
  #top .j2-tech__list{ grid-template-columns:1fr; }
  #top .j2-flow{ grid-template-columns:1fr; }
  #top .j2-apps{ grid-template-columns:1fr; }
  #top .j2-tl{ grid-template-columns:1fr; }
  #top .j2-ft__grid{ grid-template-columns:1fr; }
  #top .j2-spec__row{ grid-template-columns:1fr; gap:4px; }
  #top .j2-sh--wide,
  #top .j2-sh--mid,
  #top .j2-sh--nar,
  #top .j2-sh--half{ grid-column:span 12; }

  #top .j2-packet {
    display: flex;
    flex-direction: column;
  }
}