/* ==========================================================================
   /solution/snapq 페이지 전용 CSS
   ----------------------------------------------------------------------------
   - 활발히 개발 중인 영역 (hero swap mock + 알고리즘 별자리 + 아이콘 mock SVG modifier)
     을 style.css 에서 분리.
   - snapq/index.php 에서 style.css 다음에 로드 → 동일 클래스 충돌 시 이쪽이 우선.
   - 나머지 snapq 섹션 (admin-mock, chat, vs, trust, fsec, timeline, collect-mock,
     ship-mock 등) 은 점진적으로 추가 분리 예정.
   ========================================================================== */

/* --------------------------------------------------------------------------
   hero 우측 — 자동진열 관리자 목업 (3×2 카드 그리드 swap 애니메이션)
   JS(initSnapqHeroSwap)가 카드의 transform 을 변경해 슬롯 자리바꿈을 수행.
   -------------------------------------------------------------------------- */
.sq-hero-mock {
  position: relative;
  width: 100%;
  height: clamp(400px, 36vw, 520px);
  border-radius: 16px;
  background: linear-gradient(180deg, #1B2540 0%, #0F1A36 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  overflow: hidden;
  box-shadow: 0 24px 56px -16px rgba(0, 0, 0, 0.45);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}
/* 윈도우 chrome */
.sq-hero-mock__chrome {
  display: flex; align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sq-hero-mock__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.sq-hero-mock__dot:nth-child(1) { background: #FF6B6B; }
.sq-hero-mock__dot:nth-child(2) { background: #FFC542; }
.sq-hero-mock__dot:nth-child(3) { background: #3DDC97; }
.sq-hero-mock__title {
  margin-left: 12px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: -0.01em;
}
/* 탭 + AUTO 뱃지 */
.sq-hero-mock__bar {
  display: flex; align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sq-hero-mock__tab {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: -0.01em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.sq-hero-mock__tab.is-active {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}
.sq-hero-mock__badge {
  margin-left: auto;
  display: inline-flex; align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #5BB6FF;
  background: rgba(38, 153, 251, 0.14);
  border: 1px solid rgba(38, 153, 251, 0.30);
  border-radius: 999px;
}
.sq-hero-mock__pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #5BB6FF;
  box-shadow: 0 0 0 0 rgba(91, 182, 255, 0.6);
  animation: sqHeroMockPulse 1.6s ease-out infinite;
}
@keyframes sqHeroMockPulse {
  0%   { box-shadow: 0 0 0 0 rgba(91, 182, 255, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(91, 182, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(91, 182, 255, 0); }
}

/* 3×2 카드 그리드 — 절대좌표 + transform 으로 슬롯 자리바꿈 애니메이션.
   CSS 변수 (--pad, --gap) 로 hero/inline 두 인스턴스에서 동일 셋업 공유.
   JS(layout) 도 동일 변수를 getComputedStyle 로 읽어 슬롯 좌표 계산. */
.sq-hero-mock__grid {
  position: relative;
  --pad: 14px;
  --gap: 10px;
  padding: var(--pad);
}
/* inline 변형 — 기능 소개 자동진열 미리보기 영역(작은 컨테이너) 용 */
.sq-hero-mock__grid--inline {
  --pad: 6px;
  --gap: 6px;
  flex: 1;
  min-height: 200px;
}
.sq-hero-mock__card {
  position: absolute;
  top: var(--pad); left: var(--pad);
  width: calc((100% - var(--pad) * 2 - var(--gap) * 2) / 3);
  height: calc((100% - var(--pad) * 2 - var(--gap)) / 2);
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5);
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
  display: grid;
  grid-template-rows: 1fr auto;
}
.sq-hero-mock__grid--inline .sq-hero-mock__card {
  border-radius: 6px;
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 0.3);
}
.sq-hero-mock__grid--inline .sq-hero-mock__meta {
  padding: 4px 6px;
  gap: 4px;
}
.sq-hero-mock__grid--inline .sq-hero-mock__rank {
  width: 14px; height: 14px;
  font-size: 8px;
}
.sq-hero-mock__grid--inline .sq-hero-mock__name {
  font-size: 9px;
}

/* Feature 01 (자동진열) — 미리보기 카드명 잘림 방지 컬럼 비율 깸 */
@media (min-width: 960px) {
  #feat-01 .sq-fsec__grid {
    grid-template-columns: 1.55fr 1fr;
    gap: 48px;
  }
}
#feat-01 .sq-admin-mock__cols {
  grid-template-columns: 0.7fr 1.3fr;
  padding: 8px;
  gap: 8px;
}
#feat-01 .sq-hero-mock__grid--inline .sq-hero-mock__name { font-size: 10.5px; }
#feat-01 .sq-hero-mock__grid--inline .sq-hero-mock__rank { width: 16px; height: 16px; font-size: 9px; }
#feat-01 .sq-hero-mock__grid--inline { min-height: 240px; }

/* RESULTS 섹션 — sub-sec 제거 후 타이틀과 stats 그리드 사이 호흡 보강 */
.page-snapq .sq-stats > .wrap.center { margin-bottom: clamp(40px, 5vw, 72px); }

/* Feature 04 (다양한 알고리즘 조건) — visual 패널과 copy 컬럼 1:1 비율 */
@media (min-width: 960px) {
  #feat-04 .sq-fsec__grid {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }
}
/* panel-body 를 정사각으로 — SVG viewBox(100×100) 가 컨테이너에 1:1 매핑되어
   원형 chip 이 진짜 원형으로 유지됨. 동시에 패널 면적 대폭 확장. */
#feat-04 .sq-fsec__panel-body {
  aspect-ratio: 1 / 1;
}
/* 별자리 영역 — panel-body 안에서 자유롭게 펼침 */
#feat-04 .sq-algo-mock__constellation { min-height: 0; }

.sq-hero-mock__card.is-moved {
  animation: sqHeroMockMoved 0.9s ease-out;
}
@keyframes sqHeroMockMoved {
  0%   { box-shadow: 0 0 0 0   rgba(91, 182, 255, 0.0),  0 6px 18px -8px rgba(0,0,0,0.5); }
  35%  { box-shadow: 0 0 0 3px rgba(91, 182, 255, 0.65), 0 12px 28px -8px rgba(91,182,255,0.45); }
  100% { box-shadow: 0 0 0 0   rgba(91, 182, 255, 0.0),  0 6px 18px -8px rgba(0,0,0,0.5); }
}

.sq-hero-mock__thumb {
  width: 100%; height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sq-hero-mock__svg {
  width: 100%;
  height: 100%;
  max-width: 80%;
  max-height: 80%;
  display: block;
  overflow: visible;
}
.sq-hero-mock__svg use {
  width: 100%;
  height: 100%;
}
.sq-hero-mock__thumb--c1 { background: linear-gradient(135deg, #FFE4E8 0%, #FFC3CC 100%); }
.sq-hero-mock__thumb--c2 { background: linear-gradient(135deg, #DEEEDB 0%, #B5D9B0 100%); }
.sq-hero-mock__thumb--c3 { background: linear-gradient(135deg, #DCE9FB 0%, #B7D5F5 100%); }
.sq-hero-mock__thumb--c4 { background: linear-gradient(135deg, #FBEFCC 0%, #F2D680 100%); }
.sq-hero-mock__thumb--c5 { background: linear-gradient(135deg, #EAE0F8 0%, #CBB5EA 100%); }
.sq-hero-mock__thumb--c6 { background: linear-gradient(135deg, #FBE2CC 0%, #F2BA8D 100%); }

.sq-hero-mock__meta {
  display: flex; align-items: center;
  gap: 6px;
  padding: 7px 9px;
  background: #fff;
  border-top: 1px solid #F0F0F4;
}
.sq-hero-mock__rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: #0F1A36;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.sq-hero-mock__name {
  font-size: 10.5px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 푸터 상태 라인 */
.sq-hero-mock__foot {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: rgba(0, 0, 0, 0.20);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: -0.01em;
}
.sq-hero-mock__foot-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #3DDC97;
  box-shadow: 0 0 8px rgba(61, 220, 151, 0.6);
}

/* --------------------------------------------------------------------------
   sq-icon-mock — Feature 03 (아이콘 자동관리) 카드 SVG 일러스트 modifier
   기존 베이스 (.sq-icon-mock, .sq-icon-mock__media 등) 는 style.css 유지.
   여기서는 신규 SVG 배치 + 파스텔 톤 modifier 만 분리.
   -------------------------------------------------------------------------- */
.sq-icon-mock__media--c1 { background: linear-gradient(135deg, #FFE4E8 0%, #FFC3CC 100%); }
.sq-icon-mock__media--c2 { background: linear-gradient(135deg, #DEEEDB 0%, #B5D9B0 100%); }
.sq-icon-mock__media--c3 { background: linear-gradient(135deg, #DCE9FB 0%, #B7D5F5 100%); }
.sq-icon-mock__media--c4 { background: linear-gradient(135deg, #FBEFCC 0%, #F2D680 100%); }
.sq-icon-mock__media--c5 { background: linear-gradient(135deg, #EAE0F8 0%, #CBB5EA 100%); }
.sq-icon-mock__media--c6 { background: linear-gradient(135deg, #FBE2CC 0%, #F2BA8D 100%); }
.sq-icon-mock__svg {
  width: 70%;
  height: 70%;
  display: block;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   sq-algo-mock --v3 — 다양한 알고리즘 조건 (별자리 컨셉)
   기존 sq-algo-mock 기본/--v2 스타일은 style.css 유지.
   --v3 별자리 + 노드/펄스/footer 만 여기서 처리.
   -------------------------------------------------------------------------- */
.sq-algo-mock--v3 {
  padding: 0;
  gap: 0;
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(38, 153, 251, 0.10) 0%, transparent 60%),
    radial-gradient(50% 60% at 50% 55%, rgba(165, 83, 229, 0.10) 0%, transparent 65%),
    linear-gradient(180deg, #0F1A36 0%, #1B2540 100%);
  color: #fff;
}
.sq-algo-mock__constellation {
  position: relative;
  flex: 1;
  min-height: 360px;            /* constellation 영역 확보 — 작은 panel 에서도 chip 가독성 유지 */
  isolation: isolate;
}

/* SVG 연결선 (6 라인) — 노드 → 코어 */
.sq-algo-mock__lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.sq-algo-mock__lines use {
  fill: none;
  stroke: rgba(91, 182, 255, 0.45);
  stroke-width: 0.4;
  stroke-dasharray: 1.5 1.2;
  vector-effect: non-scaling-stroke;
  animation: sqAlgoLineFlow 2.6s linear infinite;
}
@keyframes sqAlgoLineFlow {
  to { stroke-dashoffset: -8; }
}
/* 펄스 chip — 카테고리 텍스트를 운반하는 chip 형태로 진화.
   g 그룹 안 rect(배경) + text(라벨). animateMotion 으로 라인 따라 이동. */
.sq-algo-mock__pchip {
  filter: drop-shadow(0 2px 4px rgba(38, 153, 251, 0.45));
}
.sq-algo-mock__pchip-bg {
  fill: rgba(15, 26, 54, 0.92);
  stroke: rgba(91, 182, 255, 0.85);
  stroke-width: 0.35;
  vector-effect: non-scaling-stroke;
}
.sq-algo-mock__pchip-text {
  font-family: 'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
  font-size: 2.4px;          /* viewBox 100 단위 — 1.5배 축소 (3.6 → 2.4) */
  font-weight: 800;
  fill: #E0F0FF;
  letter-spacing: -0.04px;
  /* SVG 내부 text 는 dominant-baseline 으로 수직 중앙 정렬 */
  dominant-baseline: middle;
}

/* 중앙 코어 */
.sq-algo-mock__core {
  position: absolute;
  left: 50%; top: 50%;
  width: 84px; height: 84px;          /* chip 키운 비례에 맞춰 코어도 확대 */
  transform: translate(-50%, -50%);
  z-index: 2;
}
.sq-algo-mock__core-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #5BB6FF 0%, #2699FB 60%, #A553E5 130%);
  border-radius: 50%;
  color: #fff;
  font-size: 36px;
  box-shadow:
    0 0 0 6px rgba(91, 182, 255, 0.12),
    0 12px 28px -10px rgba(38, 153, 251, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: sqAlgoCorePulse 2.4s ease-in-out infinite;
}
@keyframes sqAlgoCorePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.sq-algo-mock__core-halo {
  position: absolute; inset: -8px;
  border: 1.5px solid rgba(91, 182, 255, 0.45);
  border-radius: 50%;
  opacity: 0;
  animation: sqAlgoCoreHalo 2.4s ease-out infinite;
}
.sq-algo-mock__core-halo--2 { animation-delay: 1.2s; border-color: rgba(165, 83, 229, 0.40); }
@keyframes sqAlgoCoreHalo {
  0%   { transform: scale(0.8); opacity: 0.85; }
  80%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* 6 카테고리 노드 — 정적 hex 위치 (아이콘만, 텍스트 라벨은 pulse chip 으로 이전됨).
   chip 이 motion 담당하므로 wrapper float 제거. icon glow 만 사이클 펄스. */
.sq-algo-mock__node {
  position: absolute;
  left: var(--x, 50%);
  top:  var(--y, 50%);
  width: 38px;
  height: 38px;
  margin-left: -19px;
  margin-top:  -19px;
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
}
.sq-algo-mock__node-icon {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, rgba(91, 182, 255, 0.30) 0%, rgba(38, 153, 251, 0.18) 100%);
  border: 1.5px solid rgba(91, 182, 255, 0.85);
  border-radius: 50%;
  color: #E0F0FF;
  font-size: 18px;
  box-shadow:
    0 0 0 4px rgba(91, 182, 255, 0.10),
    0 6px 16px -6px rgba(91, 182, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  animation: sqAlgoNodeGlow 2.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.sq-algo-mock__node-icon i {
  display: inline-flex;
  line-height: 1;
}
@keyframes sqAlgoNodeGlow {
  0%, 100% {
    box-shadow:
      0 0 0 4px rgba(91, 182, 255, 0.10),
      0 6px 16px -6px rgba(91, 182, 255, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.30);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(91, 182, 255, 0.22),
      0 8px 22px -6px rgba(91, 182, 255, 0.85),
      inset 0 1px 0 rgba(255, 255, 255, 0.45);
  }
}
/* node-name 스타일 — 마크업에서 제거되었지만 외부에서 추가될 경우 대비 잔존.
   현재 마크업은 텍스트 라벨을 SVG pulse chip 으로 운반. */

/* v3 의 무한 footer — 다크 배경 위 톤 */
.sq-algo-mock--v3 .sq-algo-mock__inf {
  margin-top: 0;
  background:
    linear-gradient(90deg,
      rgba(165, 83, 229, 0.18) 0%,
      rgba(91, 182, 255, 0.14) 60%,
      rgba(38, 153, 251, 0.18) 100%);
  border: 1px solid rgba(91, 182, 255, 0.25);
  border-radius: 0;
  border-left: 0; border-right: 0; border-bottom: 0;
  padding: 9px 14px;
}
.sq-algo-mock--v3 .sq-algo-mock__inf-text {
  background: linear-gradient(90deg, #C5A1F2 0%, #7DC4FF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   스냅큐 페이지 max-width 확장 — lp.css 의 .wrap { max-width: var(--lp-max) }
   변수만 덮어씀. 다른 페이지(lp.css 공유)는 영향 없음.
   -------------------------------------------------------------------------- */
body.page-snapq { --lp-max: 1400px; }

/* --------------------------------------------------------------------------
   스냅큐 페이지 전체 spacing 폴리시
   - 섹션 내부 elements 의 수직 리듬 보강 (eyebrow ↔ title ↔ lead ↔ points)
   - 패널 헤더/푸터 padding boost (콘텐츠가 가장자리에 너무 붙는 느낌 해소)
   - 섹션간 간격은 .section padding (lp.css clamp 72-128) 이 충분하므로 유지
   -------------------------------------------------------------------------- */

/* 우측 카피 영역 — eyebrow 다음 title 까지 간격 부재였음 → 12px 부여.
   title→lead, lead→points 도 명확한 리듬으로 통일. */
.page-snapq .sq-fsec__eyebrow { margin: 0 0 12px; }
.page-snapq .sq-fsec__title   { margin: 0 0 20px; }
.page-snapq .sq-fsec__lead    { margin: 0 0 32px; }
.page-snapq .sq-fsec__points  { gap: 14px; }
.page-snapq .sq-fsec__points li { line-height: 1.65; }

/* 패널 헤더/푸터 padding 한 단계 키움 — 14/16 → 16/20 */
.page-snapq .sq-fsec__panel-head { padding: 16px 20px; gap: 14px; }
.page-snapq .sq-fsec__panel-foot { padding: 14px 18px 16px; gap: 10px; }

/* 패널 헤더 텍스트 라인 사이 약간 — 1px → 3px */
.page-snapq .sq-fsec__panel-info { gap: 3px; }

/* problem 섹션 — sq-axes(칩) 와 그 아래 첫 feature 섹션 사이 호흡 */
.page-snapq .sq-axes { margin-top: 48px; }

/* features 섹션 — 첫 feature 가 problem 섹션 직후 바로 이어지므로,
   PC 에서 시각적 분리감을 위해 첫 feature 의 top padding 살짝 강화 */
@media (min-width: 960px) {
  .page-snapq .sq-fsec { padding-top: clamp(80px, 9vw, 140px); }
}

/* problem 섹션 — section padding 강화.
   주변 sq-fsec 가 80~140px top padding 을 가지면서 problem 만 기본 72~128 이라
   상대적으로 답답해 보이는 문제 해소. 위·아래 모두 동일 패턴으로. */
.page-snapq .section.problem {
  padding-block: clamp(96px, 10vw, 160px);
}
/* problem 안의 타이틀 블록과 timeline / axes 사이 호흡도 미세 보강.
   .sq-timeline 자체 margin (clamp 80~140) 외에 섹션 내 정렬 깔끔히. */
.page-snapq .section.problem > .wrap.center:first-child { margin-bottom: 0; }
.page-snapq .section.problem .sub-sec { margin-bottom: 18px; }

/* timeline max-width 1200px 강제 — .wrap.max-width(1400) 보다 specificity 높임.
   style.css 의 .sq-timeline max-width 가 lp.css 의 .wrap max-width 에 의해
   덮어쓰이는 cascade 충돌 해결. */
.page-snapq .wrap.sq-timeline { max-width: 1200px; }

/* stats 섹션 — 카드 간 gap 보강 */
.page-snapq .sq-stats__grid { gap: clamp(20px, 2.5vw, 32px); }

/* cases 섹션 — 카드 간 gap 보강 */
.page-snapq .sq-cases__grid { gap: clamp(24px, 3vw, 40px); }

/* closing — 폼 카드 안쪽 padding 살짝 키움 */
.page-snapq .closing-form { padding: 36px; }

/* hero — copy 와 visual 컬럼 사이 gap 살짝 키움 (mockup 이 카피에 너무 붙지 않게) */
@media (min-width: 960px) {
  .page-snapq .hero-grid { gap: clamp(40px, 6vw, 88px); }
}

/* hero-copy — 모든 솔루션 공통 좌측 정렬 (lp.css `.hero-copy { text-align: left }`) */
.page-snapq .hero-copy {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}