/* =========================================================
   HUBISLAB — SHARED SITE BLOCKS (CTA band + footer)

   Injected by assets/js/site-blocks.js on every page.

   Written to be SELF-CONTAINED on purpose. The site has two
   generations of markup:
     - index.html / about.html : inline styles only, no style.css,
       palette --navy:#0E2A47 / --blue:#2E5AAC, and no .btn or
       .hero-cta classes at all.
     - every other page        : style.css, palette --navy:#13201f.
   So these blocks must not lean on style.css classes, utility
   classes, or either palette. Everything they need is declared
   here under its own --sb-* variables and .sb-* class names.
   ========================================================= */

.ctaband, footer.sb-foot{
  --sb-navy:#0E2A47;
  --sb-blue:#2E5AAC;
  --sb-ink:#3a4658;
  --sb-mute:#68727f;
  --sb-line:#e6ebf1;
}

/* bilingual spans: style.css owns these, but index/about never load it,
   so the rule is repeated here. Identical values — safe to duplicate. */
footer.sb-foot [data-en]{display:none}
html[lang="en"] footer.sb-foot [data-kr]{display:none}
html[lang="en"] footer.sb-foot [data-en]{display:revert}

/* ---------------- CTA band ----------------
   Lifted verbatim from index.html's inline styles so every page carries the
   MAIN PAGE's band, not a new design. Only two things are added: the
   --serif-en / --navy fallbacks (index.html declares them, the other pages do
   not), and the .ctaband--static escape hatch below. */
/* 배경 이미지는 마크업이 아니라 ::before 로 넣는다.
   이 밴드는 site-blocks.js 가 페이지마다 자동 생성하기 때문에, 마크업을 늘리면
   생성기까지 같이 고쳐야 한다. 가상요소로 두면 CSS 한 곳만 바꿔도 전 페이지에 적용된다.
   가상요소는 JS 로 직접 못 잡지만, 부모에 건 CSS 변수는 가상요소까지 상속되므로
   --cta-x / --cta-y / --cta-s 로 모션을 먹인다. */
.ctaband{
  position:relative;isolation:isolate;overflow:hidden;
  background:#0A1F36;padding:var(--sec-pad,clamp(78px,9.4vw,180px)) 0;
  --cta-x:0px; --cta-y:0px; --cta-s:1.06;
}
.ctaband::before{
  content:"";position:absolute;inset:-7%;z-index:-2;
  background:url(../img/ctaband-bg.jpg) center 42%/cover no-repeat;
  transform:translate3d(var(--cta-x),var(--cta-y),0) scale(var(--cta-s));
  will-change:transform;
}
/* 스크림 — 왼쪽(카피)은 짙게, 오른쪽으로 갈수록 사진이 살아난다.
   위아래 페이드는 위 섹션(밝은 지도)·아래 푸터(흰색)와의 단차를 없앤다. */
.ctaband::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,26,46,.95) 0%,rgba(8,26,46,.9) 38%,
      rgba(8,26,46,.78) 66%,rgba(8,26,46,.66) 100%),
    linear-gradient(180deg,rgba(8,26,46,.55) 0%,rgba(8,26,46,0) 26%,
      rgba(8,26,46,0) 74%,rgba(8,26,46,.5) 100%);
}
.ctaband__wrap{
  max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,60px);
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(32px,4vw,56px);
  opacity:0;transform:translateY(72px);
  transition:opacity 1s ease,transform 1.15s cubic-bezier(.16,.72,.2,1);
}
.ctaband.in .ctaband__wrap{opacity:1;transform:none;}
.ctaband__text{flex:1 1 460px;}
.ctaband__text h2{
  font-size:clamp(1.7rem,3.1vw,2.7rem);font-weight:800;color:#fff;
  letter-spacing:-.02em;line-height:1.28;margin:0;
  text-shadow:0 1px 24px rgba(6,20,36,.5);
}
/* Literal font stack, NOT var(--serif-en): about.html defines --serif-en as
   Pretendard (a sans), which turned this quote into sans-serif there. The shared
   block must not inherit a page-local redefinition. */
.ctaband__quote{
  margin-top:clamp(16px,1.8vw,26px);
  font-family:"Cormorant Garamond","Noto Serif KR",serif;
  font-style:italic;font-size:clamp(1.3rem,2vw,1.9rem);color:rgba(255,255,255,.78);letter-spacing:0;
  text-shadow:0 1px 20px rgba(6,20,36,.45);
}
.ctaband__btns{display:flex;flex-wrap:wrap;gap:16px;flex:0 0 auto;}
.ctaband__btn{
  display:inline-flex;align-items:center;gap:clamp(28px,3vw,52px);
  background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:2px;
  padding:18px 30px;font-size:15px;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.ctaband__btn svg{
  width:38px;height:10px;stroke:currentColor;fill:none;stroke-width:1;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
/* Literal #0E2A47 for the same reason: style.css sets --navy:#13201f, so
   var(--navy) made the hover dark green on every page that loads it. */
.ctaband__btn:hover{background:#fff;color:#0E2A47;border-color:#fff;}
.ctaband__btn:hover svg{transform:translateX(6px);}

/* If the reveal observer never runs (JS disabled), the band must not stay
   invisible — this class is set by site-blocks.js as a no-JS safety net. */
.ctaband--static .ctaband__wrap{opacity:1;transform:none;}

/* ---------------- footer ---------------- */
/* 네비 컬럼을 뺀 납작한 한 줄 구성.
   왼쪽: 로고 ─ 회사정보(사업자정보 + 카피라이트)
   오른쪽: 정책 링크 ─ 소셜 아이콘 (같은 줄, 세로 중앙 정렬) */
footer.sb-foot{
  background:#fff;border-top:1px solid var(--sb-line);color:var(--sb-mute);
  padding:clamp(34px,4.4vw,52px) 0;
}
/* 좌우 여백은 .ft__in 안쪽으로 옮긴다. 바깥 footer 에 padding 을 주면
   max-width:1440px 이 '패딩을 뺀 나머지' 안에서 가운데 정렬돼,
   같은 1440 컨테이너를 쓰는 .ctaband__wrap 보다 한 패딩만큼 바깥에서 시작한다.
   (2600px 화면에서 푸터 580px / CTA 640px 로 60px 어긋났다) */
.sb-foot .ft__in{
  max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,60px);
  display:flex;align-items:center;justify-content:space-between;gap:28px 60px;flex-wrap:wrap;
}
.sb-foot .ft__brand{display:flex;align-items:center;gap:clamp(26px,3.4vw,54px);}
.sb-foot .ft__logo{height:32px;width:auto;flex:none;}
.sb-foot .ft__co{font-size:13.5px;font-weight:700;color:var(--sb-navy);margin:0 0 2px;letter-spacing:.01em;}
.sb-foot .ft__info p{font-size:13px;line-height:1.85;color:var(--sb-mute);margin:0;}
.sb-foot .ft__copy{margin-top:6px !important;font-size:12.5px !important;color:#9aa6b4;letter-spacing:.01em;}
.sb-foot .ft__side{display:flex;flex-direction:row;align-items:center;gap:clamp(20px,2.6vw,42px);}
.sb-foot .ft__links{display:flex;gap:22px;}
.sb-foot .ft__links a{font-size:13px;font-weight:600;color:var(--sb-ink);text-decoration:none;transition:color .18s ease;white-space:nowrap;}
.sb-foot .ft__links a:hover{color:var(--sb-blue);}
.sb-foot .ft__social{display:flex;gap:9px;}
/* 헤더 아이콘과 마찬가지로 테두리 없는 형태 */
.sb-foot .ft__social a{width:34px;height:34px;border:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:transparent;
  color:#5a6676;transition:background .2s ease,color .2s ease;}
.sb-foot .ft__social a:hover{background:var(--sb-navy);color:#fff;}
.sb-foot .ft__social svg{width:17px;height:17px;fill:currentColor;}

@media (max-width:960px){
  .sb-foot .ft__in{flex-direction:column;align-items:flex-start;}
  .sb-foot .ft__brand{flex-direction:column;align-items:flex-start;gap:18px;}
  /* 세로로 쌓이면 줄들이 글자 길이만큼 넓어져(375px 화면에서 501px) 모든 페이지가 옆으로 밀리고
     이메일 · 소셜 아이콘이 잘렸다 — 화면 폭 안에 두고 긴 주소 · 이메일은 줄을 바꾼다 */
  .sb-foot .ft__in>*,.sb-foot .ft__brand>*{max-width:100%;min-width:0;}
  .sb-foot .ft__info p{overflow-wrap:anywhere;}
  .sb-foot .ft__side{flex-wrap:wrap;row-gap:14px;}
  .sb-foot .ft__links{flex-wrap:wrap;row-gap:8px;}
}
/* index.html's own responsive rules for the band, carried over as-is */
@media (max-width:720px){
  .ctaband{padding:clamp(56px,9vh,90px) 0;}
  .ctaband__wrap{flex-direction:column;align-items:stretch;}
  .ctaband__btns{width:100%;}
  .ctaband__btn{flex:1 1 auto;justify-content:space-between;}
}
@media (prefers-reduced-motion:reduce){
  .ctaband__wrap{transition:opacity .4s ease;transform:none;}
}

/* ---------------- floating buttons (전 페이지 공통) ----------------
   index.html 안에만 있던 플로팅 버튼을 공용 블록으로 옮겼다.
   색상 변수는 페이지마다 이름이 달라서(--navy / --sb-navy) 자체 값으로 고정한다. */
.sb-fab{position:fixed;right:24px;bottom:26px;z-index:90;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;}
.sb-fab .fab__btn{display:flex;align-items:center;height:54px;width:54px;border-radius:27px;
  border:1.5px solid transparent;cursor:pointer;overflow:hidden;padding:0;
  font-family:inherit;color:#fff;text-decoration:none;
  box-shadow:0 10px 24px -10px rgba(14,42,71,.55);
  transition:width .34s cubic-bezier(.4,0,.2,1),background .22s ease,color .22s ease,
             box-shadow .22s ease,border-color .22s ease;}
.sb-fab .fab__ic{flex:none;width:52px;height:54px;display:flex;align-items:center;justify-content:center;}
.sb-fab .fab__ic svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.sb-fab .fab__label{white-space:nowrap;font-size:15px;font-weight:600;letter-spacing:-.01em;
  padding-right:22px;opacity:0;transition:opacity .2s ease;}
.sb-fab .fab__btn:hover .fab__label{opacity:1;}
.sb-fab .fab__btn:hover{box-shadow:0 14px 30px -10px rgba(14,42,71,.6);}
.sb-fab .fab__btn--catalog{background:#0E2A47;}
.sb-fab .fab__btn--catalog:hover{width:206px;background:#0A1F36;}
.sb-fab .fab__btn--inquiry{background:#d9542e;}
.sb-fab .fab__btn--inquiry:hover{width:172px;background:#0E2A47;}
.sb-fab .fab__btn--top{background:#0E2A47;}
.sb-fab .fab__btn--top:hover{width:172px;background:#fff;color:#0E2A47;border-color:#e2e7ee;
  box-shadow:0 14px 30px -10px rgba(14,42,71,.28);}
@media (max-width:600px){ .sb-fab{right:16px;bottom:18px;} }

/* ---------------- 검색 자동완성 ---------------- */
.sb-ac{position:absolute;left:0;right:0;top:100%;z-index:5;margin:8px 0 0;padding:6px;
  list-style:none;background:#fff;border:1px solid #e3e7ec;border-radius:12px;
  box-shadow:0 18px 40px rgba(14,42,71,.12);max-height:340px;overflow-y:auto;}
.sb-ac li{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 14px;border-radius:8px;cursor:pointer;transition:background .15s ease;}
.sb-ac li:hover,.sb-ac li.on{background:#f2f5f9;}
.sb-ac__n{font-size:14.5px;font-weight:500;color:#1a1a1a;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-ac__n b{font-weight:800;color:#2E5AAC;}
.sb-ac__l{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:#9aa4b0;}

/* ---------- 커서 글로우 (마우스 따라다니는 원) ----------
   GNI 사이트와 동일한 구성: 평소에는 브랜드 블루의 부드러운 원이 커서를
   따라오다가, 클릭 가능한 요소 위에서는 작은 점으로 줄어든다.
   mix-blend-mode:multiply 라서 밝은 배경에서만 은은하게 얹힌다.
   포인터가 거친 기기(터치)와 모션 축소 설정에서는 아예 만들지 않는다. */
.cglow{
  position:fixed;top:0;left:0;width:150px;height:150px;border-radius:50%;
  pointer-events:none;z-index:60;transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    rgba(46,90,172,.14) 0%, rgba(46,90,172,.105) 24%, rgba(46,90,172,.06) 44%,
    rgba(46,90,172,.03) 60%, rgba(46,90,172,.013) 74%, rgba(46,90,172,.004) 88%,
    transparent 100%);
  opacity:0;
  transition:opacity .4s ease,
             width .25s cubic-bezier(.3,.7,.2,1),
             height .25s cubic-bezier(.3,.7,.2,1),
             background .25s ease;
  will-change:transform,filter;mix-blend-mode:multiply;filter:blur(7px);
}
.cglow.hot{
  width:20px;height:20px;
  background:radial-gradient(circle, rgba(46,90,172,.5) 0%, rgba(46,90,172,.3) 50%, transparent 80%);
  filter:blur(1.5px);
}
@media (prefers-reduced-motion:reduce){ .cglow{display:none;} }

/* 푸터 FAMILY SITE — 관리자 [설정 > 패밀리 사이트] 에 등록한 곳이 있을 때만 생긴다 */
.ft__family{position:relative;flex:none;}
.ft__family__btn{display:flex;align-items:center;gap:8px;min-width:164px;
  padding:9px 11px;border:1px solid #d7dee7;border-radius:3px;background:#fff;
  font-size:11.5px;letter-spacing:.06em;color:#68727f;cursor:pointer;}
.ft__family__btn svg{width:12px;height:12px;margin-left:auto;fill:none;stroke:currentColor;stroke-width:2;}
.ft__family__btn:hover{border-color:#b9c4d1;color:#1a1a1a;}
.ft__family__list{position:absolute;left:0;right:0;bottom:calc(100% + 5px);z-index:20;
  margin:0;padding:4px 0;list-style:none;background:#fff;border:1px solid #d7dee7;border-radius:3px;
  box-shadow:0 6px 20px rgba(16,24,40,.1);}
.ft__family__list a{display:block;padding:7px 10px;font-size:12px;color:#49525d;text-decoration:none;}
.ft__family__list a:hover{background:#f4f7fa;color:#0E2A47;}