/* ============================================================
   서브 상단 B — 블루프린트 밴드
   모든 스타일은 .subtop.stb 아래로만 쓴다(다른 블럭과 충돌 방지).
   색은 jungshin.css 기준색 #134a8e 한 계열로만 농도를 나눈다.
   ============================================================ */
.subtop.stb{
  --stb-deep:#0b2d57;
  --stb-base:#134a8e;
  --stb-edge:#17569f;
  --stb-trace:#6fa8e6;
  --stb-label:rgba(255,255,255,.55);
  --stb-max:1440px;
  --stb-pad:40px;
  position:relative;
  background:#fff;
}

/* ── 밴드 ───────────────────────────────────── */
.subtop.stb .stb-band{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  min-height:clamp(190px,19vw,244px);
  background:linear-gradient(105deg,var(--stb-deep) 0%,var(--stb-base) 66%,var(--stb-edge) 100%);
}

/* 도면 모눈 */
.subtop.stb .stb-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.35));
          mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.35));
}

/* 회로 배선 — 오른쪽에서 들어와 패드에서 끝난다 */
.subtop.stb .stb-trace{
  position:absolute;right:0;bottom:0;
  width:min(56vw,700px);height:100%;
  opacity:.9;pointer-events:none;
}
.subtop.stb .stb-trace path{
  stroke-dasharray:900;stroke-dashoffset:900;
  animation:stbDraw 1.05s cubic-bezier(.4,0,.2,1) forwards;
}
.subtop.stb .stb-trace path:nth-child(2){animation-delay:.13s}
.subtop.stb .stb-trace path:nth-child(3){animation-delay:.26s}
.subtop.stb .stb-pad circle{opacity:0;animation:stbPad .3s ease-out forwards;animation-delay:.95s}
.subtop.stb .stb-pad circle:nth-child(2){animation-delay:1.08s}
.subtop.stb .stb-pad circle:nth-child(3){animation-delay:1.21s}
@keyframes stbDraw{to{stroke-dashoffset:0}}
@keyframes stbPad{to{opacity:1}}

/* ── 제목 ───────────────────────────────────── */
.subtop.stb .stb-inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--stb-max);
  margin:0 auto;padding:0 var(--stb-pad) 38px;
  box-sizing:border-box;
}
.subtop.stb .stb-eyebrow{
  font-family:'IBM Plex Mono','Consolas',monospace;
  font-size:11.5px;font-weight:600;letter-spacing:.2em;
  color:var(--stb-label);
  margin:0 0 14px;padding:0;
}
/* [2026-08-23] 메뉴명에 Welcome 서체(대표님 지시).
   ⚠️ @font-face 는 custom/css/scoped.css 가 이미 선언한다 — 여기에 다시 적지 마라.
   ⚠️ 장식체라 자간을 좁히면 뭉친다. 원래 값으로 되돌리지 마라. */
.subtop.stb .stb-title{
  font-family:'Welcome','Pretendard Variable','Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  font-size:clamp(28px,3.4vw,48px);
  font-weight:800;line-height:1.32;letter-spacing:-.004em;
  color:#fff;
  margin:0;padding:0;border:0;
  text-shadow:0 1px 18px rgba(0,0,0,.16);
}

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

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

/* ── 반응형 ─────────────────────────────────── */
@media (max-width:1100px){ .subtop.stb{--stb-pad:32px} }
@media (max-width:900px){
  .subtop.stb .stb-trace{display:none}
}
@media (max-width:820px){
  .subtop.stb{--stb-pad:22px}
  .subtop.stb .stb-band{min-height:150px}
  .subtop.stb .stb-inner{padding-bottom:28px}
  .subtop.stb #content_div.stb-gap{padding-top:38px}
}

@media (prefers-reduced-motion:reduce){
  .subtop.stb .stb-trace path{stroke-dashoffset:0;animation:none}
  .subtop.stb .stb-pad circle{opacity:1;animation:none}
}