/* ============================================================
   정신전자 공통 디자인 규칙  (jungshin.css)
   기준색: 제품소개(pg106)의 #134a8e — 이 한 계열만 쓰고 농도로 구분한다.
   적용: 모든 회사소개 계열 페이지 블럭에서 이 파일을 먼저 불러온 뒤
         각 페이지 전용 style.css를 잇는다.
   ============================================================ */
.jn{
  /* 레이아웃 */
  --jn-max:1440px;
  --jn-pad:40px;

  /* 색 — 기준색 1계열 */
  --jn-primary:#134a8e;   /* 기준색 (제목·강조·불릿) */
  --jn-deep:#0e3768;      /* 기준색보다 한 단계 진함 (아주 드물게) */
  --jn-ink:#1f2d3f;       /* 제목 글자 */
  --jn-body:#4a5568;      /* 본문 글자 */
  --jn-muted:#7a8699;     /* 보조 글자 */
  --jn-line:#e6ebf2;      /* 구분선 */
  --jn-bg:#f7f9fc;        /* 옅은 면 배경 */

  /* 면(카드·타원) 농도 5단계 — 배경은 옅게, 글자는 --jn-primary */
  --t1:#eef4fc;
  --t2:#e3edf9;
  --t3:#d7e5f5;
  --t4:#cbdef1;
  --t5:#bfd6ed;

  color:var(--jn-body);
  font-family:'Pretendard Variable','Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.65;
}
.jn *{box-sizing:border-box}
.jn-wrap{max-width:var(--jn-max);margin:0 auto;padding:0 var(--jn-pad)}

/* ── 페이지 머리말 ──────────────────────────
   슬로건은 세 층으로. 가운데 핵심 어절만 크게 키워 구도 중심을 잡는다. */
.jn-head{padding:84px 0 62px}
.jn-eyebrow{
  font-family:'IBM Plex Mono','Consolas',monospace;font-size:12px;font-weight:600;
  letter-spacing:.18em;color:var(--jn-primary);margin:0 0 26px;
}
.jn-pre{font-size:clamp(15px,1.15vw,18px);font-weight:500;color:var(--jn-muted);margin:0 0 14px}
.jn-key{
  font-size:clamp(29px,3.4vw,50px);font-weight:800;line-height:1.34;letter-spacing:-.032em;
  color:var(--jn-primary);margin:0;
}
.jn-post{
  font-size:clamp(15px,1.15vw,18px);font-weight:500;line-height:1.75;color:var(--jn-muted);
  margin:16px 0 0;max-width:900px;
}
.jn-post strong{font-weight:700;color:var(--jn-primary)}

/* ── 섹션 ─────────────────────────────────── */
.jn-sec{padding:0 0 84px}
.jn-sec-head{display:flex;align-items:baseline;gap:14px;margin:0 0 26px}
.jn-sec-title{font-size:clamp(19px,1.7vw,24px);font-weight:800;letter-spacing:-.02em;color:var(--jn-ink);margin:0}
.jn-sec-note{font-size:14px;color:var(--jn-muted);margin:0}

/* ── 공통 리스트 (불릿은 기준색 하나로) ───────── */
.jn-list{list-style:none;margin:0;padding:0}
.jn-list li{position:relative;padding:0 0 12px 20px;font-size:16px;line-height:1.78;color:var(--jn-body)}
.jn-list li:last-child{padding-bottom:0}
.jn-list li::before{
  content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;
  background:var(--jn-primary);opacity:.75;
}

/* ── 데이터 행 (라벨 : 값) ────────────────── */
.jn-rows{list-style:none;margin:0;padding:0;border-top:2px solid var(--jn-primary)}
.jn-rows li{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:17px 4px;border-bottom:1px solid var(--jn-line);
}
.jn-rows-name{font-size:15.5px;font-weight:600;color:var(--jn-ink)}
.jn-rows-val{
  font-family:'IBM Plex Mono','Consolas',monospace;font-variant-numeric:tabular-nums;
  font-size:16px;font-weight:600;color:var(--jn-primary);white-space:nowrap;
}

/* ── 반응형 공통 기준 ───────────────────────── */
@media (max-width:1100px){
  .jn{--jn-pad:32px}
}
@media (max-width:820px){
  .jn{--jn-pad:22px}
  .jn-head{padding:52px 0 38px}
  .jn-sec{padding:0 0 54px}
  .jn-list li{font-size:15.5px}
}