/* ============================================================
   앤에스앤넷 홈페이지 — global styles & interaction states
   Design tokens
     ink-900 #0F2854  brand #1C4D8D  brand-2 #4988C4
     sky-2 #95BDD7  sky-1 #BDE8F5  wash #E8F1F8
     text #141b26 / #42505f / #5c6675  muted #8a93a2
   ============================================================ */
:root{
  --ink:#0F2854;
  --brand:#1C4D8D;
  --brand-2:#4988C4;
  --sky-2:#95BDD7;
  --sky-1:#BDE8F5;
  --wash:#E8F1F8;
  --line:#eaedf2;
  --line-2:#eef1f5;
  --text:#141b26;
  --text-2:#42505f;
  --text-3:#5c6675;
  --muted:#8a93a2;
  --mono:'Noto Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Noto Sans KR',system-ui,-apple-system,sans-serif;
  color:var(--text);background:#fff;
  -webkit-font-smoothing:antialiased;line-height:1.6;
}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--ink)}
button{font-family:inherit}
input,textarea,select{font-family:inherit}
img{max-width:100%;display:block}

@keyframes nsn-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.nsn-up{animation:nsn-up .7s ease both}
.nsn-up-slow{animation:nsn-up .9s ease both}

/* ---------- interaction states (were style-hover / style-focus) ---------- */
.nav-link{transition:.15s}
.nav-link:hover{color:var(--brand)!important}

.btn-primary{transition:.18s}
.btn-primary:hover{background:var(--ink)!important}

.btn-outline{transition:.18s}
.btn-outline:hover{border-color:var(--brand)!important;color:var(--brand)!important}

.btn-white{transition:.18s}
.btn-white:hover{background:var(--sky-1)!important}

.link-arrow{transition:.15s}
.link-arrow:hover{color:var(--ink)!important}

.carousel-btn{transition:.18s}
.carousel-btn:hover{border-color:var(--brand)!important;color:var(--brand)!important}

.svc-card{transition:.2s}
.svc-card:hover{
  border-color:var(--brand)!important;
  box-shadow:0 20px 40px -26px rgba(15,40,84,.35);
  transform:translateY(-4px);
}

.hover-card{transition:.2s}
.hover-card:hover{
  border-color:var(--brand)!important;
  box-shadow:0 18px 38px -26px rgba(15,40,84,.35);
  transform:translateY(-3px);
}

.foot-link{transition:.15s}
.foot-link:hover{color:#fff!important}
.foot-contact:hover{color:var(--sky-2)!important}

.field{transition:border-color .15s}
.field:focus{border-color:var(--brand)!important}

.reset-btn{transition:.15s}
.reset-btn:hover{background:#e6e9ee!important}

/* image-slot placeholder */
.img-slot{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:#eef1f6;color:#9aa4b3;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-align:center;padding:10px;line-height:1.5;
}
.img-slot.on-dark{background:#13315e;color:#7f9bc4}

/* blog post body (rendered markdown) */
.post-body h1{font-size:26px;font-weight:700;color:var(--ink);margin:0 0 18px}
.post-body h2{font-size:21px;font-weight:700;color:var(--ink);margin:34px 0 14px;letter-spacing:-.01em}
.post-body p{margin:0 0 18px}
.post-body ul{margin:0 0 18px;padding-left:22px;color:#33404d}
.post-body li{margin-bottom:8px}
.post-body hr{border:none;border-top:1px solid var(--line);margin:32px 0}
.post-body strong{font-weight:700;color:var(--ink)}
.post-body a{color:var(--brand);font-weight:600}

/* ============================================================
   반응형
   본문 마크업이 인라인 style 로 작성돼 있어, 레이아웃을 바꾸는 규칙은
   !important 가 필요하다. 좌우 여백처럼 여러 요소에 반복되는 값은
   인라인 style 속성을 직접 겨냥해 한 번에 덮어쓴다.
   ============================================================ */
@media(max-width:1024px){
  .grid-hero{grid-template-columns:1fr!important}
  .grid-4{grid-template-columns:repeat(2,1fr)!important}
  .grid-3{grid-template-columns:repeat(2,1fr)!important}
  .grid-2{grid-template-columns:1fr!important}
  .svc-row{flex-direction:column!important}
  .contact-grid{grid-template-columns:1fr!important}
  .foot-grid{grid-template-columns:1fr 1fr!important}
}

@media(max-width:720px){
  /* 가로 넘침 방지 — 어떤 요소도 화면보다 넓어지지 않게 */
  html,body{max-width:100%;overflow-x:hidden}

  /* 컨테이너 좌우 여백 축소 (인라인 padding 을 덮어씀) */
  [style*="max-width:1220px"]{padding-left:20px!important;padding-right:20px!important}

  /* --- 헤더 --- */
  .hdr-tag{display:none!important}          /* 상단 모노 태그라인 숨김 */
  .hdr-top{font-size:11px!important;justify-content:flex-end!important;gap:10px}
  .hdr-main{height:auto!important;flex-wrap:wrap!important;padding-top:12px!important;padding-bottom:12px!important;gap:10px!important}
  /* 모바일에서도 메뉴로 이동할 수 있어야 한다 (가로 스크롤 되는 한 줄) */
  .top-nav{
    order:3;width:100%;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    gap:0!important;
    border-top:1px solid #eef1f5;padding-top:4px;
    scrollbar-width:none;
  }
  .top-nav::-webkit-scrollbar{display:none}
  .top-nav .nav-link{white-space:nowrap;padding:10px 12px!important;font-size:14px!important}

  /* --- 레이아웃 --- */
  .grid-4,.grid-3,.grid-2,.stat-grid,.foot-grid{grid-template-columns:1fr!important}
  .form-grid{grid-template-columns:1fr!important}
  .clients-grid{grid-template-columns:repeat(2,1fr)!important}

  /* --- 타이포 / 여백 --- */
  .hero-h1{font-size:32px!important;line-height:1.25!important}
  h1{font-size:28px!important}
  h2{font-size:24px!important}
  section{padding-top:48px!important;padding-bottom:48px!important}

  /* --- 개별 요소 --- */
  .about-circles{flex-wrap:wrap!important;gap:14px!important;justify-content:center}
  .about-circles>div{width:140px!important;height:140px!important}
  .svc-row{gap:24px!important}
  /* 유지보수 절차: 가로 3단 → 세로 스택 (화살표는 숨김) */
  .flow-row{flex-direction:column!important;gap:10px!important}
  .flow-row>div{width:100%}
  .flow-row span{display:none!important}
  .maint-flow>div:nth-child(2){display:none!important}
}

/* 아주 좁은 화면 */
@media(max-width:380px){
  .clients-grid{grid-template-columns:1fr!important}
  .hero-h1{font-size:28px!important}
}