/* 공통 상단 내비게이션 — 전 페이지 고정값
   단일 소스: site/_sync_nav.py 가 각 페이지의 <nav class="nav"> 블록을 이 규격으로 덮어씁니다.
   페이지별 <style> 보다 뒤에 로드되어야 하므로 </head> 직전에 link 를 넣습니다.

   구조: [로고] [링크들(가로 스크롤)] [CTA]
   CTA 는 스크롤 영역 밖에 있어 좁은 화면에서도 잘리지 않습니다. */

.nav{
  position:fixed; top:0; left:0; width:100%; height:60px; z-index:100;
  display:flex; align-items:center;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid #e6e6e6;
}
.nav-in{
  width:100%; max-width:900px; margin:0 auto; padding:0 22px;
  display:flex; align-items:center; gap:16px;
}
.nav-logo{
  flex:0 0 auto; font-size:17px; font-weight:800; letter-spacing:-.01em;
  color:#0a0a0a; text-decoration:none; white-space:nowrap;
}
.nav-logo .lg-long{display:inline;}
.nav-logo .lg-short{display:none;}

/* 링크 영역 — 넘치면 가로 스크롤 (스크롤바는 숨김) */
.nav-right{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; justify-content:flex-end; gap:17px;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.nav-right::-webkit-scrollbar{display:none;}

.nav-link{
  flex:0 0 auto; font-size:13px; font-weight:700; color:#0a0a0a;
  text-decoration:none; opacity:.68; transition:opacity .3s; white-space:nowrap;
}
.nav-link:hover{opacity:1;}
.nav-link.on{opacity:1;}

/* CTA — 스크롤 영역 밖. 항상 온전히 보인다 */
.nav-cta{
  flex:0 0 auto; font-size:12.5px; font-weight:700; padding:8px 16px;
  border-radius:100px; background:#0a0a0a; color:#fff;
  text-decoration:none; transition:opacity .3s; white-space:nowrap;
}
.nav-cta:hover{opacity:.82;}

@media(max-width:880px){
  .nav-in{gap:12px;}
  .nav-right{gap:14px;}
  .nav-link{font-size:12.5px;}
}
@media(max-width:700px){
  .nav-in{padding:0 16px; gap:10px;}
  .nav-logo{font-size:15.5px;}
  .nav-logo .lg-long{display:none;}
  .nav-logo .lg-short{display:inline;}
  /* 좁은 화면에서는 링크를 왼쪽부터 채워 스크롤 시작점을 맞춘다 */
  .nav-right{justify-content:flex-start; gap:15px; padding-right:4px;}
  .nav-link{font-size:13px; opacity:.78;}
  .nav-cta{font-size:12px; padding:8px 13px;}
}
@media(max-width:400px){
  .nav-in{padding:0 13px; gap:8px;}
  .nav-logo{font-size:14.5px;}
  .nav-right{gap:13px;}
  .nav-cta{font-size:11.5px; padding:7px 11px;}
}

/* ── 본문 좌우 여백 보정 ─────────────────────────────────────────
   페이지 <style> 의 .hero / .part 등이 축약형 padding 으로 .container 의
   좌우 22px 를 0 으로 덮어써, 모바일에서 글자가 화면 끝에 붙는 문제가 있었다.
   이 파일은 페이지 스타일보다 뒤에 로드되므로, 롱핸드로 좌우만 되살린다.
   (2026-09-29) */
.container{ padding-left:22px; padding-right:22px; }
@media(max-width:520px){
  .container{ padding-left:18px; padding-right:18px; }
}

/* ── 서비스 상호 연계 블록 ──────────────────────────────────────
   site/_sync_links.py 가 각 페이지 하단(최종 CTA 앞)에 심는다.
   페이지마다 색·폰트 변수명이 달라서 값을 직접 박는다. (2026-09-29) */
.xlinks{ margin-top:22px; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(max-width:760px){ .xlinks{ grid-template-columns:1fr; } }
.xlinks .xl{
  display:block; text-decoration:none; background:#fff;
  border:1px solid #e6e6e6; border-radius:14px; padding:22px 22px 20px;
  transition:transform .25s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .25s;
}
.xlinks .xl:hover{ transform:translateY(-2px); border-color:#cfd4ff; box-shadow:0 16px 36px -28px rgba(59,78,255,.55); }
.xlinks .xl-k{ font-size:11.5px; font-weight:800; letter-spacing:.06em; color:#3B4EFF; }
.xlinks .xl-t{ margin-top:9px; font-size:18px; font-weight:800; letter-spacing:-.015em; color:#0a0a0a; }
.xlinks .xl-d{ margin-top:10px; font-size:13.5px; color:#6b6b6b; line-height:1.68; word-break:keep-all; }
.xlinks .xl-go{ margin-top:14px; font-size:13px; font-weight:700; color:#3B4EFF; }