/* studio와 동일 토큰 — publish-starter-theme.js 가 :root 를 덮어씀 */
@import url("asol-blog-categories.css");
@import url("asol-footer.css");

:root {
  /* 기본: 인디고·틸 — publish-starter-theme.js indigo 프리셋 */
  --publish_starter_point: #4bc4b8;
  --publish_starter_bg: #121d30;
  --publish_starter_concept_color: #285ccc;
  --publish_starter_text: #dce7f7;
  /* Bootstrap primary·링크가 테마 포인트와 동기화되도록 */
  --bs-primary: var(--publish_starter_point);
  --bs-primary-rgb: 75, 196, 184;
  --bs-link-color: var(--publish_starter_point);
  --bs-link-hover-color: color-mix(in srgb, var(--publish_starter_point) 88%, #000);
  /* Bootstrap 본문·컴포넌트 기본 서체 → Pretendard */
  --bs-font-sans-serif: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* 리뷰 등 컴포넌트 별칭 — 미설정 시 color-mix·배경이 무효로 레이아웃·대비가 깨짐 */
  --text: var(--publish_starter_text);
  --asol_box: var(--publish_starter_bg);
  --asol_concept_color: var(--publish_starter_concept_color);
  --asol_description: color-mix(in srgb, var(--publish_starter_text) 68%, transparent);
  /* 리뷰 별점 — 테마 포인트와 분리된 노란·골드 */
  --asol_review_star: #e9b949;
  /* 고정 헤더 높이에 맞춘 본문 상단 여백 — 991 이하는 미디어쿼리에서 별도 (바 inset + inner 세로 +5px×2) */
  --asol-site-header-offset: calc(clamp(4.75rem, 11vw, 6.25rem) + 20px);
  /* index #main-content: bestgame 다음 섹션부터 균일 간격 (bestgame 예외) */
  --asol-main-section-gap: clamp(2.5rem, 6vw, 100px);
  /* Bootstrap .text-body·유틸이 기본 어두운 RGB에 묶이지 않도록 */
  --bs-body-color: var(--publish_starter_text);
  --bs-body-color-rgb: 220, 231, 247;
}

html {
  scroll-padding-top: var(--asol-site-header-offset);
  /* 스크롤바 유무로 가로폭이 바뀌지 않게 — 모달 열림 시 고정 헤더·본문 흔들림 방지 */
  scrollbar-gutter: stable;
  /*
   * 가로만 막을 때 hidden 은 많은 브라우저에서 overflow-y 가 auto 로 바뀌어
   * html/body 가 스크롤 컨테이너가 되고 → 자손 position:sticky 가 뷰포트 기준으로 풀림.
   * clip 은 세로를 visible 로 둘 수 있어 sticky 유지 + 가로 오버플로만 제거.
   */
  overflow-x: hidden;
  overflow-x: clip;
  /* 섹션 타이틀 강조(단색): 테마 포인트와 무관 — 다크 계열=밝은색, 화이트 프리셋=진한색 */
  --asol-article-heading-accent: #f8fafc;
}

html[data-ps-preset="white"] {
  --asol-article-heading-accent: #373737;
}

/* 퍼플 프리셋: primary·CTA — #493192 계열 딥 바이올렛 (publish-starter-theme.js point 와 동기) */
html[data-ps-preset="purple"] {
  --asol-purple-cta: #3d2878;
  --asol-purple-cta-hover: #2f1f5c;
  --asol-purple-cta-glow: #493192;
}

html[data-ps-preset="purple"] .btn-primary,
html[data-ps-preset="purple"] .btn.btn-primary {
  --bs-btn-bg: var(--asol-purple-cta);
  --bs-btn-border-color: var(--asol-purple-cta);
  --bs-btn-hover-bg: var(--asol-purple-cta-hover);
  --bs-btn-hover-border-color: var(--asol-purple-cta-hover);
  --bs-btn-active-bg: var(--asol-purple-cta-hover);
  --bs-btn-active-border-color: var(--asol-purple-cta-hover);
  --bs-btn-disabled-bg: color-mix(in srgb, var(--asol-purple-cta) 55%, transparent);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--asol-purple-cta) 45%, transparent);
}

html[data-ps-preset="purple"] #site-header .asol_cta_btn,
html[data-ps-preset="purple"] a.asol_cta_btn {
  background-color: var(--asol-purple-cta);
}

html[data-ps-preset="purple"] #site-header .asol_cta_btn:hover,
html[data-ps-preset="purple"] #site-header .asol_cta_btn:focus-visible,
html[data-ps-preset="purple"] a.asol_cta_btn:hover,
html[data-ps-preset="purple"] a.asol_cta_btn:focus-visible {
  background-color: var(--asol-purple-cta-hover);
  filter: none;
}

/* 공통: 섹션 헤더 보조 — 프로세스·피처·히어로 등에서 .asol_process__divider / .asol_process__lead 재사용 */
.asol_process__divider {
  display: block;
  width: clamp(52px, 10vw, 84px);
  height: 2px;
  flex-shrink: 0;
  margin: 0.35rem auto 0.8rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--publish_starter_point, #be123c) 70%, transparent) 22%,
    var(--publish_starter_point, #be123c) 50%,
    color-mix(in srgb, var(--publish_starter_point, #be123c) 70%, transparent) 78%,
    transparent 100%
  );
  opacity: 0.85;
}

/* 비용안내: 서버·제작·유지보수 섹션 헤더 (카지노 제작 히어로와 동일 divider) */
#asol-cost-server .asol_cost_sk__hero .asol_process__divider,
#asol-cost-build .asol_cost_sk__hero .asol_process__divider,
#asol-cost-maintain .asol_maint__hero .asol_process__divider {
  margin-top: clamp(0.5rem, 1.2vw, 0.75rem);
  margin-bottom: clamp(0.65rem, 1.8vw, 0.9rem);
}

.asol_process__lead {
  margin: 0;
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.6;
  font-weight: 500;
  color: color-mix(in srgb, var(--publish_starter_text, #1e293b) 78%, transparent);
}

/* Bootstrap 모달: padding-right 보정 차단 + overflow hidden 제거(sticky 붕괴 방지 — scroll lock은 JS) */
body.modal-open {
  padding-right: 0 !important;
  overflow: visible !important;
}

body {
  background-color: var(--publish_starter_bg);
  color: var(--publish_starter_text);
  min-height: 100vh;
  /* 고정 헤더를 본문 위에 겹치게(overlay) */
  padding-top: 0;
  overflow-x: hidden;
  overflow-x: clip;
}

/* 서브 페이지(일반 문서형): main 본문은 헤더에 가리지 않게 오프셋 적용 */
main#main-content {
  padding-top: var(--asol-site-header-offset);
}

/* 홈 본문: 첫 블록(bestgame)은 그대로, 이후 섹션 래퍼 간 상단 간격 통일 */


/* 전역 img: 끌어서 이동·새 탭 드롭 방지, 지연 로드 시 스크롤 앵커 튐 완화 */
img {
  -webkit-user-drag: none;
  user-select: none;
  overflow-anchor: none;
}

/* 전역: a 링크 텍스트 장식(밑줄 등) 제거 */
a,
a:hover,
a:focus,
a:focus-visible,
a:active,
a:visited {
  text-decoration: none;
}

#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

/* 스크롤 시 숨김은 바에만 적용 — 오프캔버(형제)는 transform 영향 밖에 둠 */
#site-header .asol_site_header__bar {
  /* 헤더를 본문 위로 오버레이: 배경 제거 */
  background-color: transparent;
  color: var(--publish_starter_text);
  transform: translateY(0);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

html.asol-header-scroll-hidden #site-header .asol_site_header__bar {
  transform: translateY(-100%);
  pointer-events: none;
}

/* 클래식 헤더: 배경은 container만 — 바는 투명 + 가장자리에서 약 10px inset */
#site-header .asol_site_header__bar:not(.asol_site_header__bar--v2) {
  padding: 10px 10px 0;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  #site-header .asol_site_header__bar {
    transition-duration: 0.12s;
  }
}

/* 히어로(릴) 위로 본문 겹침 — 값은 디자인에 맞게 조절 */
#asol_article_mainbanner {
  position: relative;
  z-index: 0;
}

#asol_article_reviewbox {
  position: relative;
  z-index: 1;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  background-color: var(--publish_starter_bg);
}

/* 투명 배경 위에서 히어로와 겹칠 때 가독성 */
.asol_main_intro {
  text-shadow: 0 0 1px rgb(255 255 255 / 0.95), 0 0 12px rgb(255 255 255 / 0.65);
}

/* py-3 대신: BS 유틸 !important 와 충돌하지 않도록 패딩만 여기서 제어 */
#site-header .asol_site_header__bar:not(.asol_site_header__bar--v2) .asol_site_header__inner.container {
  /* 반투명 + backdrop-blur — 불투명도가 너무 높으면 뒤가 비쳐 보이지 않음 */
  background-color: color-mix(in srgb, var(--publish_starter_bg, #fafafa) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--publish_starter_text, #1e293b) 10%, transparent);
  border-radius: 12px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--publish_starter_text, #1e293b) 10%, transparent);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  color: inherit;
  padding-top: calc(1rem + 5px);
  padding-bottom: calc(1rem + 5px);
}

:root[data-theme="dark"] #site-header .asol_site_header__bar:not(.asol_site_header__bar--v2) .asol_site_header__inner.container,
html[data-ps-preset]:not([data-ps-preset="white"]) #site-header .asol_site_header__bar:not(.asol_site_header__bar--v2) .asol_site_header__inner.container {
  background-color: color-mix(in srgb, var(--publish_starter_bg, #0b1220) 58%, transparent);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

/* 로고 워드마크(currentColor)·링크가 테마 텍스트를 따름 — .text-body는 BS 기본 RGB에 고정될 수 있음 */
#site-header .asol_logo {
  display: flex;
  align-items: center;
  min-width: 0;
}

#site-header .asol_logo a {
  display: flex;
  align-items: center;
  line-height: 0;
  color: var(--publish_starter_text);
}

#site-header .asolutionLogoFull {
  --as-logo-word-color: var(--publish_starter_text);
  color: var(--publish_starter_text);
  align-items: center;
}

/* 워드마크 viewBox 여백으로 위로 붙어 보일 때 살짝 내림(시각적 중앙) */
#site-header .asolutionLogoFull__word {
  transform: translateY(0.04em);
}

/* 메뉴 항목 간격 */
#site-header .asol_menu .asol_menu__list {
  column-gap: clamp(1.5rem, 2.8vw, 2.75rem);
  row-gap: 0.85rem;
}

/* 메뉴: 항상 본문 텍스트 토큰 (화이트·다크 배경 모두 대비 유지) */
#site-header .asol_menu a {
  color: var(--publish_starter_text);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
}

#site-header .asol_menu a:hover,
#site-header .asol_menu a:focus-visible {
  color: color-mix(in srgb, var(--publish_starter_text) 78%, #fff 22%);
}

/* 우측: CONTACT US (포인트색) + 기어 정사각 박스 */
#site-header .asol_header_actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

#site-header .asol_cta_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.35rem;
  border-radius: 10px;
  background-color: var(--publish_starter_point);
  color: #fff;
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1.2;
  border: none;
  transition: filter 0.15s ease, transform 0.15s ease;
}

#site-header .asol_cta_btn:hover,
#site-header .asol_cta_btn:focus-visible {
  color: #fff;
  filter: brightness(1.08);
}

#site-header .asol_icon_square_btn {
  --asol-icon-box: 2.75rem;
  box-sizing: border-box;
  width: var(--asol-icon-box);
  height: var(--asol-icon-box);
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--publish_starter_text) 24%, transparent);
  border-radius: 10px;
  background: transparent;
  color: var(--publish_starter_text);
  line-height: 1;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#site-header .asol_icon_square_btn:hover {
  background-color: color-mix(in srgb, var(--publish_starter_text) 7%, transparent);
}

#site-header .asol_icon_square_btn:focus-visible {
  outline: 2px solid var(--publish_starter_point);
  outline-offset: 2px;
}

#site-header .asol_header_row {
  min-width: 0;
  align-items: stretch;
  gap: 0.5rem;
}

#site-header .asol_header_start {
  display: flex;
  align-items: center;
  gap: 0.5rem 1rem;
}

/* 991 이하: 헤더 풀블리드·좌우 0·행 밀착·아이콘 보더 제거·세로 패딩 축소 */
@media (max-width: 991.98px) {
  :root {
    --asol-site-header-offset: calc(clamp(3.35rem, 9vw, 4.9rem) + 20px);
  }

  #site-header .asol_site_header__bar:not(.asol_site_header__bar--v2) .asol_site_header__inner.container {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    --bs-gutter-x: 0;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  /* Contact us ↔ 기어 간격 제거, 묶음 우측 끝 */
  #site-header .asol_header_actions {
    gap: 0;
    margin-left: auto;
    margin-right: 0;
    padding-right: 0;
  }

  #site-header .asol_header_actions .asol_theme {
    margin: 0;
  }

  #site-header .asol_header_row {
    gap: 0;
    padding-left: 0;
    padding-right: 0;
  }

  #site-header .asol_header_start {
    gap: 0.35rem;
    padding-left: 0;
    margin-left: 0;
  }

  #site-header .asol_menu .asol_menu__list {
    column-gap: clamp(1.15rem, 2.2vw, 2.35rem);
    row-gap: 0.65rem;
  }

  #site-header .asol_logo {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  #site-header .asol_logo a {
    margin: 0;
    padding: 0;
  }

  #site-header .asol_icon_square_btn {
    border: none;
    transition: background-color 0.15s ease;
  }
}

#site-header .asol_menu--desktop {
  min-width: 0;
}

/* lg 미만: 가로 네비 숨김 → 햄버거 + 오프캔버 */
#site-header .asol_nav_toggler {
  flex-shrink: 0;
}

/* 네비 오프캔버 열림 — 스크롤 잠금은 asol-nav-offcanvas-scroll-lock.js (position:fixed) */
html.asol-nav-offcanvas-open,
body.asol-nav-offcanvas-open {
  overscroll-behavior: none;
}

/* 모바일·태블릿 드로어 내비 — 패널 너비 370px (백드롭은 전체) */
#asolNavOffcanvas.asol_nav_offcanvas {
  --bs-offcanvas-width: 370px;
  background-color: var(--publish_starter_bg);
  color: var(--publish_starter_text);
}

#asolNavOffcanvas .asol_nav_offcanvas__head {
  border-color: color-mix(in srgb, var(--publish_starter_text) 12%, transparent) !important;
}

#asolNavOffcanvas .offcanvas-title {
  color: var(--publish_starter_text);
}

#asolNavOffcanvas .asol_menu__list--drawer {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

#asolNavOffcanvas .asol_menu__list--drawer li {
  margin: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--publish_starter_text) 8%, transparent);
}

#asolNavOffcanvas .asol_menu__list--drawer a {
  display: block;
  padding: 0.85rem 0.15rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--publish_starter_text);
  text-decoration: none;
}

#asolNavOffcanvas .asol_menu__list--drawer a:hover,
#asolNavOffcanvas .asol_menu__list--drawer a:focus-visible {
  color: var(--publish_starter_point);
}

#site-header .asol_cta_btn--drawer {
  box-sizing: border-box;
}

html[data-ps-preset]:not([data-ps-preset="white"]) #asolNavOffcanvas .asol_nav_offcanvas__close,
:root[data-theme="dark"] #asolNavOffcanvas .asol_nav_offcanvas__close {
  filter: invert(1);
}

@media (max-width: 500px) {
  #site-header .asol_header_actions .asol_cta_btn {
    border-radius: 5px;
    padding: 0.6rem 0.8rem;
  }
}

@media (max-width: 575.98px) {
  #site-header .asolutionLogoFull.asolution_logo_32 {
    --as-logo-size: clamp(26px, 7.5vw, 32px);
  }
}