/* ============================================================
   서브 상단 A — 파스텔
   모든 스타일은 .subtop.sta 아래로만 쓴다(다른 블럭과 충돌 방지).
   배경 사각형 색·위치는 index.html 이 인라인 --sta-* 변수로 넘긴다.
   ============================================================ */
.subtop.sta{
  --sta-primary:#134a8e;
  --sta-ink:#1f2d3f;
  --sta-muted:#7a8699;
  --sta-line:#e6ebf2;
  --sta-max:1440px;
  --sta-pad:40px;
  position:relative;
  background:#fff;
}

/* ── 머리 ───────────────────────────────────── */
.subtop.sta .sta-head{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:clamp(176px,17.5vw,228px);
  background:#fff;
}

/* 파스텔 사각형 — 원래 움직임 그대로 */
.subtop.sta .sta-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.subtop.sta .sta-sq{position:absolute;display:block;box-sizing:border-box}
/* 색은 관리자 컬러설정에 연동된다 —
   --c-primary = 배경색, --c-accent = 메뉴 글자색. bg_sub.php 가 :root 에 넣어 준다.
   진한 값이 그대로 오므로 opacity 로 옅게 만들어 쓴다(관리자가 색을 바꾸면 그대로 따라간다). */
.subtop.sta .sta-sq1{
  width:150px;height:150px;top:24px;left:var(--sta-l1,40%);
  background:transparent;border:20px solid var(--c-accent,#146590);
  opacity:.2;
  animation:staMove1 25s ease-in-out infinite alternate;
}
.subtop.sta .sta-sq2{
  width:90px;height:90px;top:52px;left:var(--sta-l2,50%);
  background:var(--c-primary,#092C3E);border:0;
  opacity:.085;
  animation:staMove2 30s ease-in-out infinite alternate;
}
@keyframes staMove1{
  0%{transform:translate(0,0) rotate(0deg)}
  100%{transform:translate(40vw,44px) rotate(45deg)}
}
@keyframes staMove2{
  0%{transform:translate(0,0) rotate(0deg)}
  100%{transform:translate(-40vw,-26px) rotate(-30deg)}
}

/* ── 제목 ───────────────────────────────────── */
.subtop.sta .sta-inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--sta-max);
  margin:0 auto;padding:0 var(--sta-pad);
  box-sizing:border-box;
}
/* 왼쪽 세로 기둥 — jn-rows 의 기준색 2px 규칙선을 세운 것 */
.subtop.sta .sta-lead{position:relative;padding-left:22px;min-width:0}
.subtop.sta .sta-lead::before{
  content:"";position:absolute;left:0;top:5px;bottom:7px;
  width:2px;background:var(--sta-primary);
}
.subtop.sta .sta-eyebrow{
  font-family:'IBM Plex Mono','Consolas',monospace;
  font-size:11.5px;font-weight:600;letter-spacing:.2em;
  color:var(--sta-muted);
  margin:0 0 12px;padding:0;
}
/* [2026-08-23] 메뉴명에 Welcome 서체(대표님 지시).
   ⚠️ @font-face 는 custom/css/scoped.css 가 이미 선언한다 — 여기에 다시 적지 마라.
   ⚠️ 장식체라 자간을 좁히면 뭉친다. 원래 값으로 되돌리지 마라. */
.subtop.sta .sta-title{
  font-family:'Welcome','Pretendard Variable','Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  font-size:clamp(26px,3.0vw,42px);   /* [2026-08-23] 54 -> 42px (최소 30 -> 26). 대표님 지시로 축소 */
  font-weight:800;line-height:1.3;letter-spacing:-.004em;
  color:var(--sta-ink);
  margin:0;padding:0;border:0;
  word-break:keep-all;
}

/* ── LNB — 폭을 본문(1440)과 맞춘다 ─────────────── */
.subtop.sta #sub-lnb-wrapper.sub_lnb_list{
  position:relative;z-index:50;
  border-top:1px solid var(--sta-line);
  border-bottom:1px solid var(--sta-line);
}
.subtop.sta #sub-lnb-wrapper.sub_lnb_list > .inner{
  width:100%;max-width:var(--sta-max);margin:0 auto;
  padding-left:var(--sta-pad);padding-right:var(--sta-pad);
  box-sizing:border-box;
}
.subtop.sta #sub-lnb-wrapper .sub_lnb_dropdown ul.sub_menu_list{z-index:60}

/* ── 본문 위 여백 ───────────────────────────── */
.subtop.sta #content_div.sta-gap{padding-top:56px;background:#fff}

/* ── 반응형 ─────────────────────────────────── */
@media (max-width:1100px){ .subtop.sta{--sta-pad:32px} }
@media (max-width:820px){
  .subtop.sta{--sta-pad:22px}
  .subtop.sta .sta-head{min-height:140px}
  .subtop.sta .sta-sq1{width:104px;height:104px;border-width:14px}
  .subtop.sta .sta-sq2{width:62px;height:62px}
  .subtop.sta #content_div.sta-gap{padding-top:38px}
}

@media (prefers-reduced-motion:reduce){
  .subtop.sta .sta-sq{animation:none}
}