/* Bright Premium (clean + high-end emphasis + motion) */
:root{
  --bg:#f6f8fc;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#5b6473;
  --stroke: rgba(15, 23, 42, .10);
  --shadow: 0 18px 45px rgba(15, 23, 42, .08);
  --shadow2: 0 10px 22px rgba(15, 23, 42, .10);
  --accent:#2563eb;   /* blue */
  --accent2:#7c3aed;  /* purple */
  --accent3:#16a34a;  /* green */
  --accent4:#f97316;  /* orange */
}

html, body { font-family: "Pretendard", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
body{
  background: radial-gradient(1200px 700px at 18% 10%, rgba(37,99,235,.12), transparent 60%),
              radial-gradient(900px 620px at 85% 30%, rgba(124,58,237,.10), transparent 60%),
              radial-gradient(1000px 720px at 60% 85%, rgba(22,163,74,.08), transparent 60%),
              var(--bg);
  color: var(--text);
}
::selection{ background: rgba(37,99,235,.18); }

.shadow-soft{ box-shadow: var(--shadow); }
.shadow-soft2{ box-shadow: var(--shadow2); }

.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 24px;
}

.badge{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
}

.btn-primary{
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 55%, var(--accent3) 110%);
  color:#fff;
}
.btn-primary:hover{ filter: brightness(1.05); }

.btn-outline{
  border: 1px solid rgba(15,23,42,.16);
  background: rgba(255,255,255,.75);
}
.btn-outline:hover{ background: rgba(255,255,255,.92); }

.hero{
  position: relative;
  overflow: hidden;
}
.hero .blob{
  position:absolute;
  width:520px; height:520px;
  border-radius:999px;
  filter: blur(40px);
  opacity:.22;
  animation: blob 14s ease-in-out infinite;
  pointer-events:none;
}
.hero .b1{ left:-160px; top:-220px; background: radial-gradient(circle at 30% 30%, rgba(37,99,235,.9), rgba(37,99,235,0)); }
.hero .b2{ right:-220px; top:-160px; background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.9), rgba(124,58,237,0)); animation-delay:-5s; }
.hero .b3{ left:35%; bottom:-260px; background: radial-gradient(circle at 30% 30%, rgba(22,163,74,.9), rgba(22,163,74,0)); animation-delay:-9s; }

@keyframes blob{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(40px,-20px,0) scale(1.08); }
}

.kpi{
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.75));
  border: 1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(8px);
}

.tile{
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.80));
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 24px;
  transition: 220ms ease;
}
.tile:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(15,23,42,.10);
}
.tile .topbar{
  height:6px; border-radius:999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
}

/* Section theme */
.section{ --c: var(--accent); }
.section .section-pill{
  color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  background: color-mix(in srgb, var(--c) 10%, white);
}
.section .section-link{ color: var(--c); }
.section-title{
  position:relative; display:inline-block;
}
.section-title::after{
  content:"";
  position:absolute;
  left:0; bottom:-10px;
  width:100%; height:8px;
  border-radius:999px;
  background: color-mix(in srgb, var(--c) 22%, transparent);
  animation: underline 2.8s ease-in-out infinite;
}
@keyframes underline{
  0%,100%{ transform: scaleX(.95); filter: brightness(1); }
  50%{ transform: scaleX(1.05); filter: brightness(1.1); }
}
@supports not (color-mix(in srgb, red 50%, white)){
  .section .section-pill{ background: rgba(37,99,235,.10); border-color: rgba(37,99,235,.22); }
  .section-title::after{ background: rgba(37,99,235,.18); }
}

/* Per section colors */
.section-services{ --c: var(--accent); }
.section-service-detail{ --c: var(--accent2); }
.section-pain{ --c: #dc2626; }
.section-strategy{ --c: var(--accent3); }
.section-cases{ --c: var(--accent2); }
.section-channels{ --c: var(--accent); }
.section-nonblog{ --c: #0ea5e9; }
.section-process{ --c: var(--accent4); }
.section-faq{ --c: #0f766e; }

/* Case images */
.case-img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.10);
  background:#0b1220;
}

/* Progress bar */
#scrollbar{
  position: fixed;
  top:0; left:0; height:3px;
  width:0%;
  z-index: 9999;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
}

/* Motion: gentle float for hero tiles */
@keyframes floaty { 0%{ transform: translateY(0); } 50%{ transform: translateY(-8px);} 100%{ transform: translateY(0);} }
.floaty{ animation: floaty 6.2s ease-in-out infinite; }

.swiper-pagination-bullet { opacity:.35; }
.swiper-pagination-bullet-active { opacity:1; }

@media (max-width: 768px) { main{ padding-bottom:76px; } }

/* Mobile: lock motion (no hover/tilt sticky) */
@media (hover: none) {
  .tile, .card { transform: none !important; }
  .tile:hover, .card:hover { transform: none !important; }
  .floaty { animation: none !important; }
}
html, body {
  overflow-x: hidden;
}

.hero {
  overflow: hidden;
}
/* iOS 가로 스크롤(옆으로 밀림) 완전 차단 */
html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;       /* 지원 브라우저에서 더 강력 */
}

body {
  position: relative;
  overscroll-behavior-x: none; /* 일부 브라우저에서 가로 오버스크롤 방지 */
}

/* hero 내부 요소가 화면 밖으로 나가도 가로폭 계산에 안 잡히게 */
.hero {
  overflow: clip;
}

.hero .blob {
  max-width: 100vw;
  left: max(-160px, -12vw); /* 너무 과하게 밖으로 나가지 않게 */
}

.hero .b2{
  right: max(-220px, -16vw);
}

/* clip 미지원 브라우저 대비 */
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
  .hero { overflow: hidden; }
}
/* Success cases: same card size */
.caseSwiper .swiper-slide {
  height: auto;
}

.caseCard {
  height: 520px;              /* 원하는 고정 높이 */
  display: flex;
  flex-direction: column;
}

.caseCard .caseMedia {
  height: 200px;              /* 이미지 영역 고정 */
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: #0b1220;
}

.caseCard .caseMedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* 이미지 비율 유지 + 잘라서 채움 */
  display: block;
}

.caseCard .caseBody {
  flex: 1;                    /* 남은 공간 채움 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 14px;
}

.caseCard .caseResult {
  margin-top: 14px;
}
/* === 성공사례 이미지(SVG) 잘림 방지: 전체 보이기 === */
.caseMedia {
  background: #ffffff; /* 여백이 생겨도 깔끔 */
}

.caseMedia img {
  width: 100%;
  height: 100%;
  object-fit: contain !important; /* cover -> contain */
  background: #ffffff;
  display: block;
}

/* (선택) 성공사례 이미지 영역 높이 고정 */
.caseMedia { height: 200px; }