/* =========================================================================
   공통 레이아웃 — 헤더 · 전체 메뉴 · 서브 히어로 · 탭 · 푸터 · 플로팅 버튼 · 버튼
   (반응형 보정은 base.css 의 RESPONSIVE 블록이 !important 로 덮어쓴다)
   ========================================================================= */

/* ---------- 버튼 (pill) ---------- */
.btn {
  font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: -0.14px;
  border-radius: 100px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 150ms ease-out, transform 100ms ease-out;
  white-space: nowrap; line-height: normal;
  background: #000; color: #fff; padding: 14px 30px;
}
.btn:active { transform: scale(0.98); }
.btn--buy { background: #0F78C4; color: #fff; padding: 14px 30px; }
.btn--secondary { background: transparent; color: #0a1317; padding: 12px 28px; border: 2px solid #0a1317; }
.btn--ghost { background: transparent; color: #0a1317; padding: 10px 22px; border: 2px solid rgba(10,19,23,0.12); }

/* ---------- 헤더 ---------- */
.site-header {
  position: sticky; top: 0; left: 0; right: 0; z-index: 110;
  background-color: #ffffff;
  border-bottom: 1px solid #dee3e9;
  transition: background-color 220ms ease-out, border-bottom-color 220ms ease-out;
}
.site-header--overlay { position: fixed; }
.site-header.is-menu-open { transition: none; }   /* 전체 메뉴를 열 때는 흰 헤더로 즉시 전환 */
.site-header.is-on-photo { background-color: transparent; border-bottom-color: rgba(255,255,255,0.22); }
/* 사진 위를 스크롤하는 동안: 사진 톤의 남색 (히어로 제목과 겹쳐 보이지 않도록) */
.site-header.is-on-photo.is-scrolled { background-color: #143556; border-bottom-color: rgba(255,255,255,0.12); }

.hdr-bar { height: 80px; display: flex; align-items: center; gap: 48px; }
.hdr-logo { display: inline-flex; align-items: center; }
.hdr-logo img { height: 34px; width: auto; }
.is-on-photo .hdr-logo img { filter: brightness(0) invert(1); }

.hdr-nav { flex: 1; display: flex; justify-content: center; gap: 8px; }
.hdr-item { position: relative; }
.hdr-link {
  display: inline-block; line-height: normal; text-align: center;
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: 600;
  color: #0a1317; padding: 12px 20px; letter-spacing: -0.16px; white-space: nowrap;
}
.is-on-photo .hdr-link { color: #ffffff; }
.hdr-item.is-open .hdr-link { color: #0F78C4; }
.is-on-photo .hdr-item.is-open .hdr-link { color: #a9d6ff; }

.hdr-sub {
  display: none;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid #dee3e9; border-radius: 12px;
  box-shadow: rgba(20,22,26,0.08) 0px 8px 24px 0px;
  padding: 8px; min-width: 180px; z-index: 60;
  flex-direction: column;
}
.hdr-item.is-open .hdr-sub { display: flex; }
.hdr-sub a {
  font-size: 15.5px; padding: 11px 16px; border-radius: 8px;
  color: #1c1e21; white-space: nowrap; cursor: pointer;
  font-weight: 500; letter-spacing: -0.14px;
}
.hdr-sub a:hover { background: #f1f4f7; color: #0F78C4; }

.hdr-menu-btn {
  width: 48px; height: 48px; border-radius: 9999px;
  background: #0a1317; color: #fff; border: none;
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 150ms ease-out;
}
.is-on-photo .hdr-menu-btn { background: rgba(255,255,255,0.14); }
.site-header .hdr-menu-btn:hover { background: #0F78C4; }

/* ---------- 전체 메뉴 (사이트맵) ---------- */
@keyframes mcg-fade { from { opacity: 0; } to { opacity: 1; } }
.sitemap {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,19,23,0.6);
  animation: mcg-fade 200ms ease-out;
  /* 시안의 backdrop-filter: blur(4px) 는 이미지가 많은 페이지에서 열 때 수백 ms 멈춤을 일으켜 제외 */
}
.sitemap[hidden] { display: none; }
.sitemap-panel { background: #fff; margin: 0; padding-top: 80px; border-bottom: 1px solid #dee3e9; }
.container.sitemap-body { padding: 32px 32px 64px; }
.sitemap-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 48px; }
.sitemap-label { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #0F78C4; }
.sitemap-close {
  width: 44px; height: 44px; border-radius: 9999px;
  background: #f1f4f7; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #0a1317;
}
.sitemap-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px; }
.sitemap-col { display: flex; flex-direction: column; gap: 8px; }
.sitemap-col h3 {
  margin: 0 0 16px; padding-bottom: 14px;
  font-size: 20px; font-weight: 800; color: #0a1317;
  letter-spacing: -0.02em;
  border-bottom: 2px solid #0a1317;
}
.mcg-sitemap-link {
  font-size: 15px; padding: 8px 0; color: #1c1e21;
  cursor: pointer; font-weight: 500; letter-spacing: -0.16px;
  transition: color 150ms ease-out;
}
.mcg-sitemap-link:hover { color: #0F78C4; }
.sitemap-foot {
  margin-top: 64px; padding-top: 32px; border-top: 1px solid #dee3e9;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
}
.sitemap-contact { display: flex; gap: 16px; align-items: center; color: #41505e; font-size: 13px; }
.sitemap-contact__label { font-weight: 700; color: #0a1317; }
.sitemap-contact__tel { font-size: 18px; font-weight: 800; color: #0a1317; letter-spacing: -0.01em; }
.sitemap-contact__sep { color: #dee3e9; }

/* ---------- 서브 페이지 히어로 ---------- */
.page-hero { position: relative; height: 420px; overflow: hidden; background: #0a2d50; }
.page-hero__photo {
  position: absolute; top: 0; bottom: 0; height: 100%;
  left: 0; width: 100%;
  object-fit: cover; object-position: center; display: block;
}
.page-hero--business .page-hero__photo { left: -5%; width: calc(100% + 5%); }
.page-hero--solution .page-hero__photo { filter: grayscale(1) contrast(1.06); }
.page-hero--reference .page-hero__photo { object-position: center 40%; }
.page-hero--support .page-hero__photo { object-position: right 40%; }
.page-hero__tint { position: absolute; inset: 0; pointer-events: none; background: #0F78C4; mix-blend-mode: color; }
.page-hero__wash {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,26,48,0.70) 0%, rgba(6,26,48,0.42) 42%, rgba(6,26,48,0.58) 100%);
}
.container.page-hero-inner {
  position: relative; height: 100%; box-sizing: border-box;
  padding-top: 80px; padding-bottom: 0;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; text-align: left;
}
.page-hero-title {
  margin: 0; font-family: var(--font-display);
  font-size: 62px; font-weight: 800; letter-spacing: 0.04em;
  line-height: 1.18; color: #fff; word-break: keep-all;
  text-shadow: 0 2px 22px rgba(6,26,48,0.5);
}
.page-hero__crumb { margin-top: 22px; }
.breadcrumb { display: flex; align-items: center; gap: 12px; padding: 0; font-size: 15px; color: rgba(255,255,255,0.85); }
.breadcrumb__home { display: inline-flex; align-items: center; color: rgba(255,255,255,0.85); text-decoration: none; cursor: pointer; }
.breadcrumb__text { color: rgba(255,255,255,0.85); text-decoration: none; letter-spacing: 0.02em; cursor: pointer; }
.breadcrumb__sep { color: rgba(255,255,255,0.55); }
.breadcrumb__leaf { color: #ffffff; font-weight: 700; }

/* ---------- 탭 (서브 내비) ---------- */
.sub-nav { display: grid; grid-template-columns: repeat(var(--tabs, 4), 1fr); background: #fff; border-bottom: 1px solid #dee3e9; }
.sub-nav > a {
  display: flex; align-items: center; justify-content: center; text-align: center; line-height: normal;
  border: none; cursor: pointer; font-family: inherit;
  padding: 21px 12px; font-size: 16.5px; font-weight: 500;
  letter-spacing: -0.02em; white-space: nowrap;
  background: #fff; color: #33414f;
  border-right: 1px solid #e6eaef;
  transition: background 180ms ease-out, color 180ms ease-out;
}
.sub-nav > a:last-child { border-right: none; }
.sub-nav > a:hover { background: #f1f4f7; color: #0a1317; }
.sub-nav > a.is-active { background: #0a1317; color: #ffffff; font-weight: 700; }

/* ---------- 푸터 ---------- */
.site-footer { margin-top: 0; }
.site-footer__nav { background: #0a1317; border-top: 1px solid rgba(255,255,255,0.10); }
.container.site-footer__nav-inner { padding: 44px 32px; }
.footer-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.footer-col__title { font-size: 15px; font-weight: 700; color: #ffffff; letter-spacing: -0.14px; white-space: nowrap; }
.footer-col a {
  font-size: 14.5px; color: rgba(255,255,255,0.76); cursor: pointer;
  letter-spacing: -0.13px; white-space: nowrap;
  transition: color 150ms ease-out;
}
.footer-col a:hover { color: #ffffff; }

.site-footer__company { background: #0a1317; color: rgba(255,255,255,0.7); }
.container.site-footer__company-inner { padding: 34px 32px 40px; }
.site-footer__links {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; flex-wrap: wrap; padding-bottom: 18px;
}
.site-footer__policy { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; color: #fff; font-weight: 700; font-size: 13px; }
.site-footer__policy a { cursor: pointer; color: inherit; text-decoration: none; }
.site-footer__sep { color: rgba(255,255,255,0.3); }

.family { position: relative; }
.family__btn {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px; padding: 11px 16px; font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; display: inline-flex; align-items: center; gap: 12px; min-width: 180px;
  justify-content: space-between; white-space: nowrap;
}
.family__up { display: none; }
.family.is-open .family__up { display: block; }
.family.is-open .family__down { display: none; }
.family__list {
  display: none;
  position: absolute; bottom: calc(100% + 6px); right: 0;
  background: #fff; color: #0a1317; border-radius: 8px;
  box-shadow: rgba(0,0,0,0.3) 0px 8px 24px; min-width: 180px;
  padding: 4px; z-index: 10;
}
.family.is-open .family__list { display: block; }
.family__list a {
  display: block; padding: 10px 14px; border-radius: 6px;
  font-size: 14px; font-weight: 500; cursor: pointer; letter-spacing: -0.14px;
}
.family__list a:hover { background: #f1f4f7; }

.site-footer__info {
  border-top: 1px solid rgba(255,255,255,0.12); padding-top: 24px;
  display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap;
}
.site-footer__name { color: #fff; font-weight: 700; font-size: 18px; flex-shrink: 0; padding-top: 0; letter-spacing: -0.02em; }
.site-footer__detail {
  display: flex; flex-direction: column; gap: 4px;
  color: rgba(255,255,255,0.78); font-size: 14.5px; line-height: 1.45; min-width: 0; flex: 1;
}
.site-footer__copy { color: rgba(255,255,255,0.6); }
.site-footer__blog { flex-shrink: 0; align-self: center; display: inline-flex; text-decoration: none; line-height: 0; }
.site-footer__blog img { width: 52px; height: 52px; border-radius: 12px; display: block; }

/* ---------- 플로팅 버튼 ---------- */
.floating-actions {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  opacity: 1; pointer-events: auto;
  transition: opacity 180ms ease-out;
}
.floating-actions.is-clash { opacity: 0; pointer-events: none; }
.floating-actions__contact {
  width: 64px; height: 64px; border-radius: 9999px;
  background: #0F78C4; color: #fff; border: none; cursor: pointer;
  box-shadow: rgba(15,120,196,0.35) 0px 8px 24px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: inherit;
}
.floating-actions__contact span { font-size: 10px; font-weight: 700; letter-spacing: -0.1px; white-space: nowrap; }
.floating-actions__top {
  width: 48px; height: 48px; border-radius: 9999px;
  background: #fff; color: #0a1317;
  border: 1px solid #dee3e9; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease-out;
  box-shadow: rgba(0,0,0,0.06) 0px 4px 12px;
}
.floating-actions__top.is-visible { opacity: 1; pointer-events: auto; }

/* 서브 페이지 본문 래퍼 */
.site-main { position: relative; }

/* ---------- 이미지 자리 (빈 슬롯) ---------- */
.img-slot {
  display: block; position: relative;
  font: 13px/1.3 system-ui, -apple-system, sans-serif;
  width: 100%; height: 100%; aspect-ratio: 3/2;
}
.img-slot__frame { position: absolute; inset: 0; overflow: hidden; background: rgba(127,127,127,.08); }
.img-slot__empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; text-align: center; padding: 12px; box-sizing: border-box;
  user-select: none;
}
.img-slot__empty svg { opacity: .45; }
.img-slot__cap { max-width: 90%; font-weight: 500; letter-spacing: .01em; opacity: .75; }
.img-slot__ring { position: absolute; inset: 0; pointer-events: none; border: 1.5px dashed currentColor; opacity: .35; }

/* ---------- 페이지 전환 (View Transitions) ----------
   링크 이동 시 화면을 지우지 않고 이전/다음 페이지를 교차시킨다 (미지원 브라우저는 일반 이동).
   기본 교차(plus-lighter) 방식이라 두 페이지에서 같은 부분(같은 메뉴 그룹의 히어로·탭 등)은 그대로 보이고 바뀐 부분만 전환된다.
   헤더·플로팅 버튼은 이름을 붙여 고정. 히어로·탭에는 이름을 붙이지 않는다 —
   솔루션 히어로의 mix-blend-mode 와 겹쳐 페이지 글자 렌더링이 달라지기 때문. */
@view-transition { navigation: auto; }
.site-header      { view-transition-name: site-header; }
.floating-actions { view-transition-name: floating-actions; }
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation-duration: 220ms; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ===== 오류 화면 (404 등) ===== */
.err-page { background: #f6f8fa; }
.err-page__inner { min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 96px 0 104px; }
.err-page__code { font-family: var(--font-display); font-size: 72px; font-weight: 800; line-height: 1; color: #0F78C4; letter-spacing: -0.02em; }
.err-page__title { margin: 22px 0 0; font-size: 28px; font-weight: 800; color: #0a1317; letter-spacing: -0.02em; }
.err-page__body { margin: 14px 0 0; font-size: 16.5px; line-height: 1.7; color: #41505e; word-break: keep-all; }
.err-page__actions { display: flex; gap: 10px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }
.err-page__btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 28px; border-radius: 100px;
  font-size: 16px; font-weight: 700; color: #0a1317; background: #fff; border: 1px solid #c7ced6; transition: background 160ms ease-out, color 160ms ease-out; }
.err-page__btn:hover { background: #eef1f5; }
.err-page__btn--primary { background: #0F78C4; border-color: #0F78C4; color: #fff; }
.err-page__btn--primary:hover { background: #0a1317; border-color: #0a1317; }
@media (max-width: 768px) {
  .err-page__inner { min-height: 50vh; padding: 64px 0 72px; }
  .err-page__code { font-size: 56px; }
  .err-page__title { font-size: 22px; }
  .err-page__body { font-size: 15px; }
}

/* ===== 푸터 — 모바일 (owlens.io 모바일 푸터와 같은 정렬·글꼴·크기) =====
   [브랜드 사이트] → [개인정보처리방침 | 오시는 길] → 구분선 → 로고 → [회사명 … 블로그] → 회사 정보 → Copyright
   → 구분선 → 영업 및 도입 문의(전화·메일). 메뉴 목록은 상단 햄버거 메뉴와 겹치므로 숨긴다. PC 는 시안 그대로.
   글꼴 Pretendard 는 모바일 푸터에서만 쓰므로 PC 에서는 내려받지 않는다. */
@font-face { font-family: "Pretendard"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/Pretendard-Regular-f897fa3ff216e4be74648184144780b1.woff") format("woff"); }
@font-face { font-family: "Pretendard"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/Pretendard-SemiBold-e02072832a9d8ef22f3d1d08bb917f9d.woff") format("woff"); }
@font-face { font-family: "Pretendard"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/Pretendard-Bold-bd94b933c6839371baa27f7950ef3784.woff") format("woff"); }
.site-footer__logo, .site-footer__sales { display: none; }
@media (max-width: 768px) {
  .site-footer__nav { display: none; }
  .site-footer__company { font-family: "Pretendard", -apple-system, sans-serif; letter-spacing: normal; }
  .site-footer__company .family__btn { font-family: inherit; }
  .container.site-footer__company-inner { padding: 50px 20px; }

  .site-footer__links { flex-direction: column; align-items: stretch; gap: 30px; padding-bottom: 30px; }
  .site-footer__links .family { order: -1; }
  .site-footer__links .family__btn { width: 100%; padding: 13px 16px; }
  .site-footer__links .family__list { left: 0; right: 0; }
  .site-footer__policy { gap: 0; font-size: 12px; line-height: 14.4px; }
  .site-footer__policy a + .site-footer__sep + a { font-weight: 400; }
  .site-footer__sep { margin: 0 10px; color: #555; }

  .site-footer__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; align-items: end;
                       border-top-color: #444; padding-top: 30px; }
  .site-footer__logo { display: block; grid-column: 1 / -1; grid-row: 1; height: 38px; width: auto; max-width: 100%; margin-bottom: 22px; }
  .site-footer__name { grid-column: 1; grid-row: 2; font-size: 16px; font-weight: 700; line-height: 19.2px; letter-spacing: normal; padding-bottom: 10px; }
  .site-footer__blog { grid-column: 2; grid-row: 2; align-self: start; }
  .site-footer__blog img { width: 42px; height: 42px; border-radius: 10px; }
  .site-footer__detail { grid-column: 1 / -1; grid-row: 3; gap: 4px; font-size: 12px; line-height: 16px; color: #999; word-break: keep-all; }
  .site-footer__detail .mcg-meta-row { column-gap: 0; row-gap: 0; }
  .site-footer__detail .mcg-meta-row > span { white-space: nowrap; }
  .site-footer__detail .mcg-meta-row > span:not(:first-child)::before { content: "|"; margin: 0 10px; color: #555; }
  .site-footer__detail .site-footer__dup { display: none; }   /* 대표전화는 아래 '영업 및 도입 문의' 에 있으므로 숨김 */
  .site-footer__detail .mcg-meta-row > .site-footer__email { flex-basis: 100%; }   /* 회사 메일은 사업자등록번호 다음 줄 */
  .site-footer__detail .mcg-meta-row > span.site-footer__email:not(:first-child)::before { content: none; }
  .site-footer__copy { font-size: 12px; color: #999; }

  /* 영업 및 도입 문의 — 전화·메일 바로 연결 (300px 폭 가운데) */
  .site-footer__sales { display: block; margin-top: 30px; padding-top: 30px; border-top: 1px solid #444; }
  .site-footer__sales-title { text-align: center; font-size: 24px; font-weight: 600; line-height: 20px; color: #fff; padding: 0 0 30px; }
  .site-footer__sales a { display: flex; align-items: center; gap: 22px; width: 300px; max-width: 100%; min-height: 50px;
                          margin: 0 auto; color: #fff; text-decoration: none; }
  .site-footer__sales img { flex: none; display: block; }
  .site-footer__sales-tel img { width: 28px; height: 28px; }
  .site-footer__sales-mail img { width: 31px; height: 25px; }
  .site-footer__sales-tel span { font-size: 26px; font-weight: 700; line-height: 20px; }
  .site-footer__sales-mail span { font-size: 16px; font-weight: 400; line-height: 20px; word-break: break-all; }
}