@charset "UTF-8";
/* Pretendard : 구글 폰트에 없는 폰트라 jsDelivr 에서 받습니다 (API 홈페이지와 동일) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
/* static 빌드도 필요합니다 : variable 빌드는 이름이 'Pretendard Variable' 이라
   CSS 의 font-family: 'Pretendard' 와 이름이 달라 안 먹습니다 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
/* Outfit / Montserrat : .logo-kc 에서 쓰는데 그동안 불러오지 않고 있었습니다 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* ==========================================================================
   KC SOLUTION - Global Design Tokens & Base Styles
   ========================================================================== */

:root {
    /* Color Palette - Deep Dark Luxury & Cyberpunk Neons */
    --bg-darkest: #050711;
    --bg-dark: #090d1f;
    --bg-card: #0b1120;
    --bg-card-hover: rgba(22, 30, 64, 0.9);
    --bg-glass: rgba(12, 17, 36, 0.65);
    --brand-primary: #3b82f6; /* Vibrant Electric Blue */
    --brand-cyan: #06b6d4; /* Cyber Cyan */
    --brand-purple: #8b5cf6; /* Royal Violet */
    --brand-accent: #f43f5e; /* Ruby Accent */
    --brand-emerald: #10b981; /* Live Emerald */

    --gradient-primary: #504eec;
    --gradient-accent: #4487eb;
    --gradient-text: #69acda;
    --gradient-card: linear-gradient(180deg, rgba(37, 99, 235, 0.08) 0%, rgba(15, 23, 42, 0) 100%);
    /* Typography */
    --text-primary: #ffffff;
    --text-secondary: #ffffff;
    --text-muted: #ffffff;
    --text-dim: #f1f5f9;
    /* Borders & Shadows */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-focus: rgba(59, 130, 246, 0.5);
    --border-glow: none;
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-glow: none;
    /* Layout */
    --header-height: 84px; /* [통일] API 홈페이지 헤더와 같은 높이 */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --max-width: 1440px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 17.5px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-darkest);
  color: var(--text-primary);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
  background-attachment: fixed;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Korean typographic stability - prevent mid-word syllable breaks & single-character orphans */
h1, h2, h3, h4, h5, h6,
p, span, a, li, button, input, td, th, label, dt, dd, strong, b, em {
  word-break: keep-all;
}

/* Headings color contrast rule: when body content is white (#ffffff), titles must be vibrant cyan / sky blue */
h1, .hero-title, .brand-title {
  text-wrap: balance;
  color: #ffffff;
}

h2, .section-head h2, .section-header h2, .demo-main-title, .strip-header-row h2, .cta-banner-box h2, .infra-content h2 {
    color: #ffc83b ;
    text-wrap: balance;
}

h3, .card-title, .quick-service-card h3, .pricing-card h3, .price-card-wrap .price-card h3, .migration-card-title, .free-card-title-wrap h3, .plan-title, .solution-body h3, .story-content h3, .pricing-teaser-inner h3, .partner-name, .demo-cur-name {
    color: #ffc83b !important;
    text-wrap: balance;
}

h4, .sub-card-title, .step-title, .benefit-title, .clean-pricing-table .col-tier {
  color: #ffc83b !important;
  text-wrap: balance;
}

p, .section-desc, .slide-desc, .wallet-section-desc, .plan-sub, .free-card-desc, .policy-strip-desc, .card-desc, .migration-card-desc, li, td {
  text-wrap: pretty;
  color: #ffffff !important;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, textarea, select {
  font-family: inherit;
  outline: none;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   Atmospheric Glow Effects (Disabled to ensure crystal-clear text readability)
   ========================================================================== */
.ambient-glow {
  display: none !important;
}

/* ==========================================================================
   GNB Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: 1000;
  background: rgba(6, 8, 19, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  transition: var(--transition);
}

.site-header.scrolled {
  background: rgba(5, 7, 17, 0.95);
  border-bottom-color: rgba(59, 130, 246, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* 로고 이미지 및 텍스트 스타일 */
.logo-img {
  /* [통일] API 홈페이지 로고와 같은 높이 */
  height: 48px;
  max-height: 48px;
  width: auto;
  vertical-align: middle;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease;
}

.brand-logo .logo-img {
  /* [통일] API 홈페이지 로고와 같은 높이 */
  height: 48px;
  max-height: 48px;
  width: auto;
  object-fit: contain;
  display: block;
}

.brand-logo:hover .logo-img {
  transform: scale(1.05) translateY(-2px);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}

.logo-text {
  display: inline-flex;
  align-items: flex-end;
  line-height: 1;
  white-space: nowrap;
  padding-bottom: 2px; /* 로고 심볼 K 바닥선과 솔루션 글자 밑선을 정확히 일치 */
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-logo {
  display: inline-flex;
  align-items: flex-end; /* 로고와 텍스트의 밑선 맞춤 */
  /* [통일] API 홈페이지(.brand-logo-combo / .brand-text) 와 동일한 크기 */
  gap: 11px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.brand-logo .logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.brand-logo .highlight {
  /* [통일] API 홈페이지 로고와 같은 흰색 */
  display: inline-block;
  white-space: nowrap;
  color: #ffffff;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-link {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 0;
  position: relative;
  transition: color 0.25s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--gradient-accent);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
}

.nav-link:hover,
.nav-link.active {
  color: #ffffff;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.status-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-emerald);
  letter-spacing: 0.5px;
}

.status-pill .pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-emerald);
  animation: pulse-ring 2s infinite ease-out;
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.btn-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 24px 9px 13px;
  background: #1b88c2;
  border-radius: 100px;
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  transition: var(--transition);
  text-decoration: none;
}

.btn-header-cta:hover {
  /* [통일] 모든 버튼 공통 오버 효과 */
  background: #2196d4;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.btn-header-cta img,
.btn-header-cta .btn-tg-icon {
  /* [비율] 버튼 높이의 약 52% */
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
}

.btn-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  padding: 4px;
}

/* Mobile Nav Drawer */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  height: 100vh;
  background: rgba(9, 13, 31, 0.98);
  backdrop-filter: blur(25px);
  border-left: 1px solid var(--border-subtle);
  z-index: 1001;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.7);
}

.mobile-nav-drawer.open {
  right: 0;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-subtle);
}

.drawer-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
}

.mobile-menu-links a {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-secondary);
}

.mobile-menu-links a.active,
.mobile-menu-links a:hover {
  color: var(--brand-primary);
}

.drawer-footer {
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   Buttons & Core Components
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  /* [통일] 텔레그램 버튼처럼 둥근(알약) 모양 */
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
}

.btn-primary {
  /* [통일] 텔레그램 버튼과 같은 색 */
  background: #1b88c2;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
}

.btn-primary:hover {
  /* [통일] 모든 버튼 공통 오버 효과 */
  background: #2196d4;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.btn-secondary {
  /* [통일] .btn-primary 와 완전히 같게 */
  background: #1b88c2;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
}

.btn-secondary:hover {
  /* [통일] 모든 버튼 공통 오버 효과 */
  background: #2196d4;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.btn-telegram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #1b88c2;
  color: #fff !important;
  font-weight: 700;
  border-radius: 100px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  text-decoration: none;
  transition: var(--transition);
}

.btn-telegram:hover {
  /* [통일] 모든 버튼 공통 오버 효과 */
  background: #2196d4;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.btn-telegram img {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

/* ==========================================================================
   [통일] 메인 슬라이드 버튼 : API 홈페이지(.btn-luxury-outline) 와 같은 스타일
   어두운 반투명 바탕 + 골드 얇은 테두리 + 흐림 효과
   ========================================================================== */
.slide-content .btn-group .btn,
.slide-content .btn-group .btn-telegram {
  background: rgba(14, 18, 28, 0.75);
  color: #f1f5f9 !important;
  border: 1.5px solid rgba(223, 172, 108, 0.45);
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.slide-content .btn-group .btn:hover,
.slide-content .btn-group .btn-telegram:hover {
  background: rgba(223, 172, 108, 0.18);
  border-color: #dfac6c;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: none;
}

.btn-lg {
  padding: 18px 36px;
  font-size: 17px;
  /* [통일] 둥근(알약) 모양 */
  border-radius: 100px;
  /* [맞춤] 큰 버튼끼리 가로·세로 크기를 똑같이 맞춥니다.
     글자 길이에 따라 폭이 제각각이던 것을 최소폭으로 고정하고,
     높이는 아이콘이 있든 없든 같게 잡습니다. */
  height: 70px;
  min-width: 290px;
  box-sizing: border-box;
}

.badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgb(238 190 166 / 12%);
    border: 1px solid rgb(238 190 166 / 12%);
    border-radius: 100px;
    font-size: 15px;
    font-weight: 700;
    color: #ff8c1a;
    margin-bottom: 20px;
    white-space: nowrap;
    word-break: keep-all;
}

.section-head {
  text-align: center;
  margin-bottom: 60px;
}

    .eyebrow,
    .section-head .eyebrow {
        /* [통일] 모든 아이브로 : 15px · 굵기 800 · 자간 3px · 시안 */
        display: inline-block;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #ff8c1a;
        margin-bottom: 12px;
    }

.section-head h2 {
  /* [통일] 모든 섹션 제목 : clamp(28px, 3.4vw, 38px) · 자간 -0.5px */
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.5px;
  line-height: 1.25;
  margin-bottom: 16px;
}

.section-head p {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ==========================================================================
   Subpage Common Hero Banner
   ========================================================================== */
.sub-hero {
  /* [통일] 모든 서브페이지 상단 배너 : 보이는 여백 위 48px / 아래 48px 로 균형 */
  padding: calc(var(--header-height) + 48px) 0 48px;
  position: relative;
  background: radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, 0.18) 0%, transparent 70%);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}

.sub-hero .breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15.5px;
  color: var(--text-dim);
  margin-bottom: 20px;
}

.sub-hero .breadcrumb a {
  color: var(--text-muted);
}

.sub-hero .breadcrumb a:hover {
  color: var(--brand-primary);
}

.sub-hero h1 {
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
  margin-bottom: 16px;
  line-height: 1.2;
}

.sub-hero p.lead {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 720px;
  line-height: 1.7;
}

/* ==========================================================================
   Home Hero Section
   ========================================================================== */
.home-hero {
  position: relative;
  padding: 210px 0 130px;
  overflow: hidden;
}

.hero-bg-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-bg-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  filter: brightness(0.7) contrast(1.2);
}

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, 
    rgba(5, 7, 17, 0.8) 0%, 
    rgba(5, 7, 17, 0.6) 40%, 
    rgba(5, 7, 17, 0.95) 85%, 
    var(--bg-darkest) 100%
  );
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-text h1 {
  font-size: clamp(38px, 4.8vw, 62px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -1.8px;
  margin-bottom: 24px;
  color: #ffffff;
}

.hero-text h1 .gradient-text {
  /* [통일] 글자 그라데이션 방식 제거 — 단색 */
  color: var(--gradient-text);
}

.hero-text p.lead {
  font-size: 19px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 40px;
  max-width: 580px;
}

.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 50px;
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 36px;
  border-top: 1px solid var(--border-subtle);
}

.metric-item .val {
  font-size: 32px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.5px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.metric-item .val span {
  font-size: 16px;
  color: var(--brand-primary);
}

.metric-item .lbl {
  font-size: 15.5px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Hero Visual Card */
.hero-visual {
  position: relative;
}

.hero-main-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: transform 0.4s ease;
}

.hero-main-card:hover {
  transform: translateY(-6px);
}

.card-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  background: rgba(10, 14, 30, 0.9);
  border-bottom: 1px solid var(--border-subtle);
}

.window-dots {
  display: flex;
  gap: 8px;
}

.window-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.window-dots span:nth-child(1) { background: #ef4444; }
.window-dots span:nth-child(2) { background: #f59e0b; }
.window-dots span:nth-child(3) { background: #10b981; }

.topbar-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.hero-media-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.hero-media-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.hero-main-card:hover .hero-media-wrap img {
  transform: scale(1.04);
}

/* Floating interactive badges */
.hero-float-badge {
  position: absolute;
  background: rgba(14, 19, 41, 0.9);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  animation: float-bob 4s infinite ease-in-out;
  z-index: 5;
}

.badge-float-1 {
  top: -24px;
  right: -24px;
  animation-delay: 0s;
}

.badge-float-2 {
  bottom: -24px;
  left: -24px;
  animation-delay: 2s;
}

@keyframes float-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.hero-float-badge .badge-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.badge-icon.green {
  background: rgba(16, 185, 129, 0.15);
  color: var(--brand-emerald);
}

.badge-icon.blue {
  background: rgba(59, 130, 246, 0.15);
  color: var(--brand-primary);
}

.badge-text .subtitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-text .main-text {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
}

/* ==========================================================================
   Home Feature Story Banner (실패를 맛본 업체도...)
   ========================================================================== */
.story-banner {
  padding: 80px 0;
  position: relative;
  background: linear-gradient(180deg, transparent 0%, rgba(37, 99, 235, 0.05) 50%, transparent 100%);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.story-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 60px 48px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 50px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.story-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gradient-primary);
}

.story-content h3 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
  line-height: 1.35;
  color: #fff;
  margin-bottom: 20px;
}

.story-content p {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 28px;
}

.story-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.story-feat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.story-feat-item span.chk {
  color: var(--brand-emerald);
  font-size: 16px;
  font-weight: 900;
}

.story-visual-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-subtle);
}

.story-visual-wrap img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

/* ==========================================================================
   Solutions Grid (Core Platforms)
   ========================================================================== */
.solutions-section {
  padding: 120px 0;
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.solution-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  position: relative;
}

.solution-card:hover {
  transform: translateY(-8px);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: var(--shadow-lg), var(--border-glow);
  background: var(--bg-card-hover);
}

.solution-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.solution-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.solution-card:hover .solution-thumb img {
  transform: scale(1.08);
}

.solution-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(5, 7, 17, 0.85);
  backdrop-filter: blur(10px);
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.solution-body {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.solution-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.solution-icon-wrap img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.solution-body h3 {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
}

.solution-body p {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
  flex-grow: 1;
}

.solution-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
}

.solution-footer .more-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.solution-footer .more-link:hover {
  gap: 10px;
  color: #60a5fa;
}

/* ==========================================================================
   Portfolio Showcase Section
   ========================================================================== */
.portfolio-section {
  padding: 120px 0;
  background: rgba(8, 12, 28, 0.4);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.portfolio-filter {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 10px 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 100px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.portfolio-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  position: relative;
  display: flex;
  flex-direction: column;
}

.portfolio-card:hover {
  transform: translateY(-8px);
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: var(--shadow-lg);
}

.portfolio-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #000;
}

.portfolio-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.portfolio-card:hover .portfolio-media img {
  transform: scale(1.06);
}

.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(5, 7, 17, 0.95) 100%);
  opacity: 0.8;
}

.portfolio-info {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.portfolio-info .tag {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-cyan);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.portfolio-info h4 {
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
}

.portfolio-info p {
  font-size: 15.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ==========================================================================
   Server & Infrastructure Section
   ========================================================================== */
.infra-section {
  padding: 120px 0;
}

.infra-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

.infra-content h2 {
  font-size: clamp(28px, 3.8vw, 42px);
  font-weight: 900;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 20px;
}

.infra-content p.desc {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 36px;
}

.infra-features-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}

.infra-feat-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.infra-feat-box .icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);
  font-size: 18px;
  flex-shrink: 0;
}

.infra-feat-box h4 {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.infra-feat-box p {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.infra-display {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.display-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle);
}

.display-header .title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-secondary);
  letter-spacing: 1px;
}

.display-metrics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}

.metric-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
}

.metric-card .num {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
}

.metric-card .label {
  font-size: 14px;
  color: var(--brand-cyan);
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

.security-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.security-check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-primary);
  border-left: 3px solid var(--brand-emerald);
}

/* ==========================================================================
   Pricing Section & Tables
   ========================================================================== */
.pricing-section {
  padding: 120px 0;
  background: linear-gradient(180deg, rgba(8, 12, 28, 0.5) 0%, transparent 100%);
}

.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}

.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: var(--transition);
}

.pricing-card:hover {
  transform: translateY(-8px);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: var(--shadow-lg);
}

.pricing-card.featured {
  background: rgba(17, 30, 69, 0.525);
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.25);
  transform: scale(1.02);
}

.pricing-card.featured:hover {
  transform: scale(1.02) translateY(-8px);
}

.featured-ribbon {
  position: absolute;
  top: 20px;
  right: 24px;
  background: var(--gradient-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 5px 14px;
  border-radius: 100px;
}

.pricing-card .opt-num {
  font-size: 14px;
  font-weight: 800;
  color: var(--brand-cyan);
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}

.pricing-card h3 {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 18px;
}

.pricing-card .price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}

.pricing-card .price-row .cost {
  font-size: 38px;
  font-weight: 900;
  color: #fff;
}

.pricing-card .price-row .unit {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
}

.pricing-card .sub-desc {
  font-size: 14px;
  color: var(--brand-primary);
  font-weight: 700;
  margin-bottom: 28px;
  min-height: 22px;
}

.pricing-features-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
  flex-grow: 1;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
}

.pricing-features-list li {
  font-size: 14.5px;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pricing-features-list li::before {
  content: '✓';
  color: var(--brand-emerald);
  font-weight: 900;
}

.pricing-secondary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

/* ==========================================================================
   Detailed Enterprise Pricing & Policy Table (in pricing.html)
   ========================================================================== */
.pricing-badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    /*background: rgba(30, 58, 138, 0.35);
  border: 1px solid rgba(59, 130, 246, 0.4);*/
    border-radius: 999px;
    /* [통일] 아이브로와 같은 글자 규격 */
    color: #ff8c1a;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 16px;
    white-space: nowrap;
    word-break: keep-all;
}

.pricing-badge-tag.tag-purple {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.45);
  color: #c4b5fd;
}

.pricing-badge-tag .tag-highlight {
  color: #38bdf8;
  font-weight: 800;
}

.pricing-badge-tag.tag-purple .tag-highlight {
  color: #d8b4fe;
  font-weight: 800;
}

.table-mobile-hint {
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 14.5px;
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.12);
  border: 1px dashed rgba(59, 130, 246, 0.4);
  padding: 8px 16px;
  border-radius: 999px;
  margin: 18px auto 0;
  max-width: fit-content;
  text-align: center;
}

@media (max-width: 992px) {
  .table-mobile-hint {
    display: inline-flex;
  }
}

.pricing-table-wrap {
  background: #0b1120;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow-x: auto;
  margin-top: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.pricing-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  text-align: left;
}

.pricing-table thead tr {
  background: #070c18;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pricing-table th {
  padding: 16px 20px;
  color: #38bdf8;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.pricing-table td {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 16px;
  color: #ffffff;
  vertical-align: middle;
  line-height: 1.6;
  word-break: keep-all;
}

.pricing-table tbody tr {
  transition: background 0.15s ease;
}

.pricing-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.pricing-table tbody tr:last-child td {
  border-bottom: none;
}

/* 카테고리 셀 (깔끔한 텍스트 & 서브라벨) */
.table-cat-cell {
  vertical-align: middle !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
  background: rgba(6, 10, 19, 0.5);
  padding: 20px 24px !important;
}

.cat-title {
  font-size: 16.5px;
  font-weight: 700;
  color: #38bdf8;
  margin-bottom: 3px;
  white-space: nowrap;
}

.cat-sub {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* 항목명 */
.table-item-title {
  font-size: 16px;
  font-weight: 600;
  color: #38bdf8;
  white-space: nowrap;
}

/* 제공 스펙 텍스트 */
.spec-text-block {
  font-size: 15.5px;
  line-height: 1.5;
  color: #ffffff;
  word-break: keep-all;
}

.spec-text-block span {
  white-space: nowrap;
}

.spec-text-block strong {
  color: #ffffff;
  font-weight: 700;
}

.spec-text-block .spec-dim {
  color: #ffffff;
  font-size: 14.5px;
  margin-left: 4px;
}

/* 요율 및 비용 상태 (깔끔한 도트 + 텍스트) */
.rate-status-clean {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  font-weight: 700;
  white-space: nowrap;
  word-break: keep-all;
}

.rate-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rate-status-clean.emerald {
  color: #34d399;
}
.rate-status-clean.emerald .rate-dot {
  background: #34d399;
}

.rate-status-clean.cyan {
  color: #38bdf8;
}
.rate-status-clean.cyan .rate-dot {
  background: #38bdf8;
}

.rate-status-clean.purple {
  color: #c084fc;
}
.rate-status-clean.purple .rate-dot {
  background: #c084fc;
}

.rate-status-clean.free {
  color: #34d399;
  font-weight: 800;
}
.rate-status-clean.free .rate-dot {
  background: #34d399;
}

.rate-status-clean.amber {
  color: #ffc83b;
}
.rate-status-clean.amber .rate-dot {
  background: #ffc83b;
}

/* 혜택 셀 */
.benefit-clean {
  font-size: 15.5px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
  word-break: keep-all;
}

.benefit-clean span {
  word-break: keep-all;
}

.benefit-clean .check-mark {
  color: #38bdf8;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}

.benefit-clean strong {
  color: #ffffff;
  font-weight: 700;
}

.benefit-clean .benefit-note {
  color: #ffffff;
  font-size: 14.5px;
}

/* ==========================================================================
   Video Demo Section
   ========================================================================== */
.video-demo-section {
  padding: 120px 0;
}

.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}

.video-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
}

.video-card .thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.video-card .thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.6s ease, opacity 0.3s;
}

.video-card:hover .thumb-wrap img {
  transform: scale(1.05);
  opacity: 1;
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: var(--transition);
  z-index: 5;
}

.video-card:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.15);
  background: var(--brand-purple);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
}

.video-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px;
  background: linear-gradient(180deg, transparent 0%, rgba(5, 7, 17, 0.95) 100%);
  z-index: 4;
}

.video-meta h4 {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}

.video-meta p {
  font-size: 15.5px;
  color: var(--text-muted);
}

/* ==========================================================================
   FAQ Accordion Section
   ========================================================================== */
.faq-section {
  padding: 120px 0;
}

.faq-accordion {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}

    .faq-item.is-open,
    .faq-item[open]:not(.faq-anim) {
        border-color: rgba(59, 130, 246, 0.4);
        background: var(--bg-card);
    }

.faq-item summary {
  padding: 24px 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary .icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.faq-item summary .icon::before,
.faq-item summary .icon::after {
  content: '';
  position: absolute;
  background-color: #fff;
  transition: all 0.3s;
}

.faq-item summary .icon::before {
  width: 12px;
  height: 2px;
}

.faq-item summary .icon::after {
  width: 2px;
  height: 12px;
}

    .faq-item.is-open summary .icon,
    .faq-item[open]:not(.faq-anim) summary .icon {
        transform: rotate(45deg);
        background: rgba(96, 165, 250, 0.48);
    }

/* 펼침 애니메이션 : 0fr -> 1fr 로 실제 높이만큼만 부드럽게 늘어납니다 */
.faq-item.faq-anim > .faq-collapse {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
}

    .faq-item.faq-anim.is-open > .faq-collapse {
        grid-template-rows: 1fr;
        opacity: 1;
    }

    /* 접혔을 때 padding 이 남아 28px 틈이 생기므로, 여백을 안쪽 자식으로 옮깁니다 */
    .faq-item.faq-anim > .faq-collapse > .faq-body {
        overflow: hidden;
        min-height: 0;
        padding: 0;
    }

        .faq-item.faq-anim > .faq-collapse > .faq-body > * {
            margin-left: 30px;
            margin-right: 30px;
        }

        .faq-item.faq-anim > .faq-collapse > .faq-body > *:last-child {
            margin-bottom: 28px;
        }

@media (prefers-reduced-motion: reduce) {
    .faq-item.faq-anim > .faq-collapse {
        transition: none;
    }
}

.faq-body {
  padding: 0 30px 28px 30px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.75;
}

.faq-highlight-box {
    margin-top: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid rgba(96, 165, 250, 0.48);
    padding: 16px 20px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 14px;
    color: var(--text-muted);
}

/* ==========================================================================
   Global CTA Banner
   ========================================================================== */
.global-cta-section {
  /* [축소] 상담·제휴 문의 영역이 너무 길어 여백을 줄입니다 */
  padding: 70px 0 80px;
}

.cta-banner-box {
    background: var(--bg-card);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: var(--radius-xl);
    /* [축소] 80px -> 48px */
    padding: 48px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
}

.cta-banner-box::before {
  display: none;
}

.cta-banner-box h2 {
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 20px;
  line-height: 1.25;
}

.cta-banner-box p {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 650px;
  margin: 0 auto 26px;
  line-height: 1.7;
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.cta-telegram-btn {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  background: #1b88c2;
  color: #fff;
  padding: 16px 44px;
  font-size: 20px;
  font-weight: 700;
  /* [통일] 알약(둥근) 모양 · 같은 테두리 */
  border-radius: 100px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  transition: var(--transition);
}

.cta-telegram-btn:hover {
  /* [통일] 모든 버튼 공통 오버 효과 */
  background: #2196d4;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.cta-telegram-btn img {
  /* [비율] 버튼 88px 의 약 52% */
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.3));
}

.cta-email-hint {
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-dim);
}

.cta-email-hint a {
  color: var(--text-muted);
  text-decoration: underline;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: #03050c;
  border-top: 1px solid var(--border-subtle);
  padding: 90px 0 40px;
  color: var(--text-muted);
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 50px;
  margin-bottom: 60px;
}

.footer-brand .f-logo,
.footer-brand .brand-logo {
    display: inline-flex;
    align-items: flex-end; /* [통일] 헤더 로고와 같은 밑선 정렬 */
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
    /* [통일] 상단 헤더 로고와 동일 : 심볼 48px · 글자 24px · 간격 11px */
    gap: 11px;
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 20px;
    justify-content: center;
}

.footer-brand .f-logo .logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
}

.footer-brand .f-logo .logo-img,
.footer-brand .brand-logo .logo-img {
  /* [통일] 상단 헤더 로고와 100% 동일 */
  height: 48px;
  max-height: 48px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
}

.footer-brand p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-dim);
  margin-bottom: 24px;
}

.footer-col h5 {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 24px;
  letter-spacing: 0.5px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  font-size: 14px;
  color: var(--text-dim);
  transition: color 0.25s;
}

.footer-links a:hover {
  color: var(--brand-primary);
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14px;
}

.footer-contact-info .item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
}

.footer-contact-info .item .icon {
  color: var(--brand-primary);
}

.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-bottom .copy {
  font-size: 15px;
  color: var(--text-dim);
}

.footer-legal-links {
  display: flex;
  gap: 24px;
}

.footer-legal-links a {
  font-size: 15px;
  color: var(--text-dim);
}

.footer-legal-links a:hover {
  color: var(--text-secondary);
}

/* ==========================================================================
   Quick Floating CTA (Telegram)
   ========================================================================== */
.floating-quick-cta {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #1b88c2;
  color: #fff !important;
  padding: 12px 26px 12px 14px;
  border-radius: 100px;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  transition: all 0.25s ease;
  text-decoration: none;
  animation: floating-glow 3s infinite alternate ease-in-out;
}

@keyframes floating-glow {
  0% {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  }
  100% {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  }
}

.floating-quick-cta:hover {
  /* [통일] 모든 버튼 공통 오버 효과 */
  background: #2196d4;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  color: #fff !important;
}

.floating-quick-cta img {
  /* [비율] 버튼 90px 의 약 52% */
  width: 46px;
  height: 46px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1100px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 60px;
    text-align: center;
  }

  .hero-text p.lead {
    margin: 0 auto 40px;
  }

  .hero-btns {
    justify-content: center;
  }

  .hero-metrics {
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
  }

  .hero-visual {
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
  }

  .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-card.featured {
    transform: none;
  }

  .pricing-card.featured:hover {
    transform: translateY(-8px);
  }

  .infra-layout {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .footer-top-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  div[style*="grid-template-columns: 1.1fr 0.9fr"],
  div[style*="grid-template-columns: 0.9fr 1.1fr"],
  div[style*="grid-template-columns: 1.18fr 0.82fr"],
  div[style*="grid-template-columns: 1fr 1.1fr"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .partners-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 72px;
  }

  .main-nav {
    display: none;
  }

  .header-actions .status-pill {
    display: none;
  }

  .btn-menu-toggle {
    display: block;
  }

  .story-box {
    grid-template-columns: 1fr;
    padding: 36px 24px;
    gap: 36px;
  }

  .solutions-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .pricing-cards-grid {
    grid-template-columns: 1fr;
  }

  .pricing-secondary-grid {
    grid-template-columns: 1fr;
  }

  .video-grid {
    grid-template-columns: 1fr;
  }

  .infra-features-list {
    grid-template-columns: 1fr;
  }

  .footer-top-grid {
    grid-template-columns: 1fr;
  }

  .badge-float-1,
  .badge-float-2 {
    display: none;
  }


  .floating-quick-cta {
    padding: 8px;
    bottom: 20px;
    right: 20px;
    border-radius: 50%;
  }

  .floating-quick-cta img {
    width: 62px;
    height: 62px;
  }

  .quick-services-grid {
    grid-template-columns: 1fr;
  }

  .portal-metrics-grid {
    grid-template-columns: 1fr 1fr;
  }

  .portfolio-strip-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pricing-teaser-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 30px;
  }

  .pricing-teaser-inner .action-btn {
    justify-content: center;
  }

  /* Inline grid overrides across sub-pages (solutions, security, about, contact) */
  div[style*="grid-template-columns: 1.1fr 0.9fr"],
  div[style*="grid-template-columns: 0.9fr 1.1fr"],
  div[style*="grid-template-columns: 1fr 1.1fr"],
  div[style*="grid-template-columns: repeat(4, 1fr)"],
  div[style*="grid-template-columns: repeat(3, 1fr)"],
  div[style*="grid-template-columns: repeat(2, 1fr)"],
  div[style*="grid-template-columns: 1fr 1fr"],
  /* [포괄] 인라인 grid-template-columns 는 휴대폰에서 무조건 1단 */
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Specific fix for migration & cards with wide padding on mobile */
  div[style*="padding: 50px"] {
    padding: 28px 18px !important;
  }

  /* Partners grid on mobile */
  .partners-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Sub-page section headings fluid sizing */
  .section-head h2 {
    font-size: clamp(24px, 5vw, 30px) !important;
  }
}

/* ==========================================================================
   NEW: Portal Hero Slider & Main Page Dedicated Styles
   ========================================================================== */
.portal-hero-slider {
  position: relative;
  /* [통일] 영상 보이는 높이를 API 홈페이지(680px) 와 같게 고정 */
  height: calc(680px + var(--header-height));
  min-height: calc(680px + var(--header-height));
  max-height: none;
  padding-top: var(--header-height);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.slider-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 680px;
  max-height: 860px;
  display: flex;
  align-items: center;
}

.slide-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s ease;
  display: flex;
  align-items: center;
  z-index: 1;
}

.slide-item.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* ==========================================================================
   Hero Cinematic Video Background & Overlays
   ========================================================================== */
.hero-video-bg-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  background-color: #050814;
}

.hero-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
  filter: brightness(1.30) contrast(1.05) saturate(1.12);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 감각적인 비디오 오버레이:
   영상이 환하고 화사하게 살아나면서 좌측 텍스트의 가독성을 정확히 확보하는 부드러운 그라데이션 */
.hero-video-gradient-overlay {
  /* [통일] API 홈페이지와 동일하게 영상 위 검정 레이어 제거 */
  display: none;
}

.hero-video-bottom-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  z-index: 2;
  background: linear-gradient(to bottom, 
    transparent 0%, 
    rgba(5, 8, 20, 0.4) 60%,
    rgba(5, 8, 20, 0.90) 100%
  );
  pointer-events: none;
}

/* 이전 이미지 슬라이더 호환 fallback */
.slide-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.slide-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slide-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 20, 0.45);
}

.slide-content {
  position: relative;
  z-index: 3;
  max-width: 780px;
  padding: 80px 0;
}

.slide-content .badge-tag {
  animation: slideFadeIn 0.8s ease forwards;
}

.slide-content h1 {
  /* [확대] 부제목을 없앤 만큼 대제목을 키웁니다 */
  font-size: clamp(42px, 5.6vw, 76px);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -2px;
  color: #ffffff;
  margin-bottom: 36px;
  text-shadow: 0 4px 24px rgba(0, 4, 15, 0.75), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.slide-content p.slide-desc {
  font-size: 19px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 40px;
  max-width: 640px;
  text-shadow: 0 2px 12px rgba(0, 4, 15, 0.7);
}

.slide-content .btn-group {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* [균형] 커진 제목에 맞춰 슬라이드 버튼도 키웁니다 */
.slide-content .btn-group .btn {
  height: 78px;
  min-width: 250px;
  font-size: 19px;
}

@keyframes slideFadeIn {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-item.active .slide-content h1 {
  animation: slideFadeIn 0.8s 0.15s ease forwards;
}

.slide-item.active .slide-content p.slide-desc {
  animation: slideFadeIn 0.8s 0.3s ease forwards;
}

.slide-item.active .slide-content .btn-group {
  animation: slideFadeIn 0.8s 0.45s ease forwards;
}

/* Slider Controls */
.slider-controls {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  z-index: 10;
}

.controls-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.slider-dots {
  display: flex;
  gap: 12px;
}

.slider-dot {
  width: 38px;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.slider-dot.active {
  width: 60px;
  background: var(--brand-primary);
}

.slider-arrows {
  display: flex;
  gap: 12px;
}

.slider-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(14, 19, 41, 0.7);
  border: 1px solid var(--border-subtle);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  backdrop-filter: blur(10px);
}

.slider-arrow-btn:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  transform: scale(1.05);
}

/* ==========================================================================
   Hero Live Video Background Switcher Controls
   ========================================================================== */
.hero-video-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(14, 20, 42, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 5px 8px 5px 14px;
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  z-index: 5;
}

.video-switch-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #ffffff;
  text-transform: uppercase;
}

.pulse-beacon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
  animation: beaconPulse 2s infinite;
}

@keyframes beaconPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.55; }
}

.video-switch-btns {
  display: flex;
  gap: 6px;
}

.btn-video-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  flex-shrink: 0;
  word-break: keep-all;
}

.btn-video-opt:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.btn-video-opt.active {
  color: #ffffff;
  background: rgba(22, 140, 224, 0.85);
  border-color: rgba(6, 182, 212, 0.5);
}

.btn-video-opt .v-icon {
  font-size: 15px;
  line-height: 1;
}

.slide-content h1 {
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.95);
}

.slide-content p.slide-desc {
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);
}

@media (max-width: 900px) {
  .controls-inner {
    flex-wrap: wrap;
    gap: 12px;
  }
  .hero-video-switch {
    order: 3;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    padding: 4px 6px;
  }
  .video-switch-badge {
    display: none;
  }
  .btn-video-opt {
    padding: 5px 10px;
    font-size: 15.5px;
  }
  .hero-video-gradient-overlay {
    background: linear-gradient(180deg, 
      rgba(5, 8, 20, 0.45) 0%, 
      rgba(5, 8, 20, 0.25) 45%, 
      rgba(5, 8, 20, 0.15) 75%,
      rgba(5, 8, 20, 0.55) 100%
    );
  }
}

/* ==========================================================================
   4 Core Services Quick Navigation Cards
   ========================================================================== */
.quick-services-section {
  padding: 80px 0;
  position: relative;
  z-index: 5;
  /* [통일] 슬라이드를 40px 파고들던 겹침 제거 */
  margin-top: 0;
}

.quick-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.quick-service-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: var(--radius-lg);
    padding: 32px 26px;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

    .quick-service-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: rgba(96, 165, 250, 0.48);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .quick-service-card:hover {
        transform: translateY(-8px);
        border-color: rgba(96, 165, 250, 0.48);
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
        background: rgba(20, 28, 60, 0.95);
    }

.quick-service-card:hover::before {
  opacity: 1;
}

.quick-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.quick-card-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.quick-service-card h3 {
  font-size: clamp(17px, 1.25vw, 19.5px);
  font-weight: 800;
  /* [지정] 카드 제목 골드 */
  color: #ffc83b !important;
  margin-bottom: 10px;
  letter-spacing: -0.4px;
  word-break: keep-all;
}

.quick-service-card p {
  font-size: 15.5px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 22px;
  flex-grow: 1;
}

.quick-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  font-weight: 700;
  /* [지정] 자세히 알아보기 주황 */
  color: #ff8c1a;
  transition: gap 0.2s;
}

.quick-service-card:hover .quick-card-link {
  gap: 12px;
  color: #ff8c1a;
}

/* ==========================================================================
   Portal Key Metrics Bar
   ========================================================================== */
.portal-metrics-bar {
  padding: 50px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(6, 9, 23, 0.6);
}

.portal-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}

.portal-metric-box {
  padding: 10px;
}

.portal-metric-box .metric-num {
  font-size: 40px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -1px;
  margin-bottom: 4px;
}

.portal-metric-box .metric-num span {
  /* [지정] 기호 골드 */
  color: #ffc83b;
  font-size: 22px;
}

.portal-metric-box .metric-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  word-break: keep-all;
}

.portal-metric-box .metric-sub {
  font-size: 14px;
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
  word-break: keep-all;
}

/* ==========================================================================
   Portfolio Visual Strip Showcase
   ========================================================================== */
.portfolio-strip-section {
  padding: 100px 0;
}

.strip-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 20px;
}

.strip-header-row h2 {
  /* [통일] 모든 섹션 제목 : clamp(28px, 3.4vw, 38px) · 자간 -0.5px */
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.5px;
  line-height: 1.25;
}

.portfolio-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.strip-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  position: relative;
  transition: var(--transition);
}

.strip-item:hover {
  transform: translateY(-6px);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.strip-thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
}

.strip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.strip-item:hover .strip-thumb img {
  transform: scale(1.08);
}

.strip-meta {
  padding: 16px 20px;
  background: rgba(10, 14, 30, 0.95);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.strip-meta .name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  word-break: keep-all;
}

.strip-meta .tag {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-cyan);
  background: rgba(6, 182, 212, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  word-break: keep-all;
  flex-shrink: 0;
}

/* ==========================================================================
   Pricing Teaser Banner
   ========================================================================== */
.pricing-teaser-section {
  padding: 40px 0 100px;
}

.pricing-teaser-box {
  background: rgba(13, 19, 42, 0.925);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  padding: 50px 48px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.pricing-teaser-box::before {
  display: none;
}

.pricing-teaser-inner {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 2;
}

.pricing-teaser-inner h3 {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 12px;
}

.pricing-teaser-inner p {
  font-size: 15.5px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.pricing-teaser-inner .action-btn {
  display: flex;
  justify-content: flex-end;
}


/* ==========================================================================
   Fallback & Utility Styles for Price Cards & Sections
   ========================================================================== */
.price-section {
  padding: 80px 0;
  position: relative;
  z-index: 2;
}

.price-card-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.price-card-wrap .price-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.price-card-wrap .price-card:hover {
  transform: translateY(-5px);
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.price-card-wrap .price-card .num {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--brand-cyan);
  margin-bottom: 10px;
}

.price-card-wrap .price-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
}

.price-card-wrap .price-card .price {
  font-size: 20px;
  font-weight: 800;
  color: #60a5fa;
  margin-bottom: 14px;
}

.price-card-wrap .price-card .detail {
  font-size: 15.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ==========================================================================
   Comprehensive Responsive Overrides (Mobile & Tablet)
   ========================================================================== */

/* Prevent horizontal overflow across all viewports */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Tablet Overrides (<= 1100px) */
@media (max-width: 1100px) {
  .container {
    padding: 0 20px;
  }

  .quick-services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .portal-metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  .portfolio-strip-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .pricing-teaser-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .pricing-teaser-inner .action-btn {
    justify-content: flex-start !important;
  }
}

/* Mobile Overrides (<= 768px) */
@media (max-width: 768px) {
  :root {
    --header-height: 64px;
  }

  .container {
    padding: 0 16px;
  }

.cta-telegram-btn
{
padding : 5px 5px;
}

  /* --- Header & Navigation --- */
  .site-header {
    height: var(--header-height);
  }

  .main-nav {
    display: none !important;
  }

  .header-actions .status-pill {
    display: none !important;
  }

  .brand-logo {
    gap: 4px;
    font-size: 21px;
    line-height: 1;
  }

  .brand-logo .logo-img,
  .logo-img {
    height: 38px !important;
    max-height: 40px !important;
    width: auto;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .btn-header-cta {
    padding: 7px 12px;
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }

  .btn-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 20px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    line-height: 1;
  }

  .btn-menu-toggle:active {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.95);
  }

  /* --- Mobile Drawer Sizing --- */
  .mobile-nav-drawer {
    width: min(320px, 86vw);
    padding: 24px 20px;
  }

  /* --- Portal Hero Slider --- */
  .portal-hero-slider,
  .slider-container {
    min-height: 520px;
    height: auto;
    max-height: none;
  }

  .slide-content {
    padding: 40px 0 90px;
    max-width: 100%;
  }

  .slide-content .badge-tag {
    font-size: 15px;
    padding: 4px 10px;
    margin-bottom: 14px;
  }

  .slide-content h1 {
    font-size: 40px;
    line-height: 1.25;
    letter-spacing: -0.8px;
    margin-bottom: 14px;
    word-break: keep-all;
  }

  .slide-content p.slide-desc {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
    word-break: keep-all;
  }

  .slide-content .btn-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .slide-content .btn-group .btn {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: 14px;
  }

  .slider-controls {
    bottom: 20px;
  }

  .slider-dots {
    gap: 8px;
  }

  .slider-dot {
    width: 24px;
    height: 4px;
  }

  .slider-dot.active {
    width: 40px;
  }

  .slider-arrows {
    gap: 8px;
  }

  .slider-arrow-btn {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  /* --- 4 Core Services Quick Cards (1 Column on Mobile) --- */
  .quick-services-section {
    padding: 40px 0;
    margin-top: 0;
  }

  .quick-services-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .quick-service-card {
    padding: 24px 20px;
  }

  .quick-service-card h3 {
    font-size: 18px;
  }

  .quick-service-card p {
    font-size: 15.5px;
    margin-bottom: 16px;
  }

  /* --- Portal Metrics Bar (2x2 Grid on Mobile) --- */
  .portal-metrics-bar {
    padding: 32px 0;
  }

  .portal-metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 12px !important;
  }

  .portal-metric-box {
    padding: 4px;
  }

  .portal-metric-box .metric-num {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .portal-metric-box .metric-num span {
    font-size: 18px;
  }

  .portal-metric-box .metric-label {
    font-size: 14px;
  }

  .portal-metric-box .metric-sub {
    font-size: 15px;
  }

  /* --- Portfolio Visual Strip (1 Column on Mobile) --- */
  .portfolio-strip-section {
    padding: 50px 0;
  }

  .strip-header-row {
    margin-bottom: 20px;
    gap: 10px;
  }

  .strip-header-row h2 {
    font-size: 22px;
  }

  .portfolio-strip-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* --- Pricing Teaser Banner --- */
  .pricing-teaser-section {
    padding: 10px 0 50px;
  }

  .pricing-teaser-box {
    padding: 30px 20px;
    border-radius: var(--radius-lg);
  }

  .pricing-teaser-inner {
    grid-template-columns: 1fr !important;
    text-align: left !important;
    gap: 20px !important;
  }

  .pricing-teaser-inner h3 {
    font-size: 21px;
    margin-bottom: 8px;
  }

  .pricing-teaser-inner p {
    font-size: 15.5px;
    line-height: 1.6;
  }

  .pricing-teaser-inner .action-btn {
    justify-content: stretch !important;
    width: 100%;
  }

  .pricing-teaser-inner .action-btn .btn {
    width: 100%;
    justify-content: center;
  }

  /* --- Floating Quick CTA --- */
  .floating-quick-cta {
    bottom: 16px;
    right: 16px;
    padding: 8px;
    border-radius: 999px;
  }

  .floating-quick-cta img {
    width: 62px;
    height: 62px;
  }


  /* --- General Content Sections --- */
  .section-header {
    margin-bottom: 32px;
  }

  .section-header h2 {
    font-size: 24px;
  }

  .section-header p.lead {
    font-size: 14.5px;
  }
}

/* Extra Small Mobile (<= 380px) */
@media (max-width: 380px) {
  .brand-logo {
    font-size: 19px;
  }

  .brand-logo .logo-img,
  .logo-img {
    height: 34px !important;
  }

  .btn-header-cta {
    padding: 6px 10px;
    font-size: 14px;
  }

  .btn-menu-toggle {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
}



/* KC 로고 영문 텍스트 스타일 */
.logo-kc {
  display: inline-block;
  white-space: nowrap;
  font-family: 'Outfit', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 900;
  /* [통일] API 홈페이지 .brand-kc 와 동일 */
  letter-spacing: -0.01em;
  color: #ffffff;
  margin-right: 4px;
}

/* ==========================================================================
   Wallet & Balance Management Architecture (Seamless vs Transfer)
   ========================================================================== */
.wallet-methods-section {
  padding: 80px 0 75px;
  position: relative;
  scroll-margin-top: 80px;
  background: rgba(8, 12, 26, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.wallet-section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wallet-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(30, 58, 138, 0.35);
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: 999px;
  /* [통일] 아이브로와 같은 글자 규격 */
  /* [지정] WALLET ARCHITECTURE 라인 주황 */
  color: #ff8c1a;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 16px;
  white-space: nowrap;
  word-break: keep-all;
}

.wallet-badge-tag .tag-highlight {
  color: #ff8c1a;
  font-weight: 800;
}

.wallet-section-title {
  /* [통일] 모든 섹션 제목 : clamp(28px, 3.4vw, 38px) · 자간 -0.5px */
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.5px;
  line-height: 1.25;
  margin: 0 0 14px;
  word-break: keep-all;
}

.wallet-section-desc {
  font-size: 15px;
  color: var(--text-secondary, #ffffff);
  line-height: 1.65;
  margin: 0;
  word-break: keep-all;
}

.wallet-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 28px;
}

.wallet-method-card {
  background: var(--bg-card, #0e172a);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 18px;
  padding: 32px 28px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.wallet-method-card:hover {
  transform: translateY(-4px);
}

.seamless-card {
  border-color: rgba(6, 182, 212, 0.4);
  background: rgba(12, 22, 46, 0.94);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

.seamless-card:hover {
  border-color: rgba(6, 182, 212, 0.7);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.22);
}

.transfer-card {
  border-color: rgba(139, 92, 246, 0.35);
  background: rgba(19, 15, 46, 0.94);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

.transfer-card:hover {
  border-color: rgba(139, 92, 246, 0.65);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.22);
}

.wallet-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.wallet-card-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.seamless-card .wallet-card-icon-wrap {
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.4);
}

.transfer-card .wallet-card-icon-wrap {
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.4);
}

.wallet-type-badge {
  display: inline-block;
  font-size: 15px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.seamless-badge {
  background: rgba(6, 182, 212, 0.2);
  color: var(--brand-cyan, #06b6d4);
  border: 1px solid rgba(6, 182, 212, 0.4);
}

.transfer-badge {
  background: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.4);
}

.wallet-card-title {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 3px;
  line-height: 1.2;
}

.wallet-card-sub {
  font-size: 15px;
  color: var(--text-muted, #ffffff);
  font-weight: 600;
}

.wallet-core-diff {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 22px;
  border-left: 3px solid;
}

.seamless-card .wallet-core-diff {
  border-left-color: var(--brand-cyan, #06b6d4);
}

.transfer-card .wallet-core-diff {
  border-left-color: var(--brand-purple, #8b5cf6);
}

.diff-tag {
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted, #ffffff);
  margin-bottom: 4px;
}

.wallet-core-diff p {
  margin: 0;
  font-size: 16px;
  color: #ffffff;
  line-height: 1.5;
  word-break: keep-all;
}

.seamless-card .wallet-core-diff strong {
  color: #ffc83b;
  font-weight: 800;
}

.transfer-card .wallet-core-diff strong {
  color: #ffc83b;
  font-weight: 800;
}

.wallet-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wallet-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary, #ffffff);
  line-height: 1.5;
  word-break: keep-all;
}

.seamless-card .check-icon {
  color: var(--brand-cyan, #06b6d4);
  font-weight: 900;
  font-size: 14px;
  flex-shrink: 0;
}

.transfer-card .check-icon {
  color: #c4b5fd;
  font-weight: 900;
  font-size: 14px;
  flex-shrink: 0;
}

.wallet-features-list li strong {
  color: #ffffff;
}

.wallet-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-label {
  color: var(--text-muted, #ffffff);
  font-weight: 700;
}

.seamless-card .footer-val {
  color: #ffc83b;
  font-weight: 700;
}

.transfer-card .footer-val {
  color: #ffc83b;
  font-weight: 700;
}

/* 요약 배너 */
.wallet-summary-banner {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.summary-badge {
  background: #209ce5;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.summary-text {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.65;
  word-break: keep-all;
}

.summary-text strong {
  color: #38bdf8;
}

@media (max-width: 768px) {
  .wallet-methods-section {
    padding: 60px 0 50px;
  }
  .wallet-section-header {
    margin-bottom: 30px;
  }
  .wallet-cards-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .wallet-method-card {
    padding: 24px 20px;
  }
  .wallet-summary-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
  }
}

/* ==========================================================================
   무료게임 vs 유료게임 미니게임 안내 (Free & Paid Minigames Showcase)
   ========================================================================== */
.minigame-category-block {
  margin-top: 40px;
  scroll-margin-top: 100px;
}

/* 무료 게임 통합 카드 (클린 & 미니멀) */
.free-games-unified-card {
  background: #0b1120;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 32px 36px;
  margin-bottom: 40px;
}

.free-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.free-card-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.free-card-title-wrap h3 {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  word-break: keep-all;
}

.free-pill-tag {
  font-size: 14px;
  font-weight: 700;
  color: #34d399;
  background: rgba(16, 185, 129, 0.1);
  padding: 3px 10px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  word-break: keep-all;
}

.free-card-desc {
  font-size: 14.5px;
  color: #ffffff;
  line-height: 1.6;
  margin: 0 0 24px;
  word-break: keep-all;
  text-wrap: pretty;
}

.free-card-desc strong {
  color: #f1f5f9;
}

/* 3개 게임 깔끔한 3열 그리드 */
.free-games-trio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 20px;
}

.free-game-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.free-game-item-name {
  font-size: 15.5px;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  word-break: keep-all;
}

.free-game-item-desc {
  font-size: 14.5px;
  color: #ffffff;
  line-height: 1.5;
  word-break: keep-all;
}

/* 3대 특징 리스트 */
.free-meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 15px;
  color: #ffffff;
  line-height: 1.5;
}

.free-meta-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  word-break: keep-all;
}

.free-meta-list .meta-check {
  color: #38bdf8;
  font-weight: 800;
}

.free-meta-list strong {
  color: #ffffff;
}

/* 유료 게임 4대 카드 그리드 */
.paid-clean-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.paid-clean-card {
  background: #0b1120;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.paid-clean-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

.paid-clean-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.paid-clean-card-title {
  font-size: 16.5px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  word-break: keep-all;
}

.paid-clean-card-title .title-num {
  color: #38bdf8;
  margin-right: 6px;
  font-weight: 800;
}

.paid-clean-card-badge {
  font-size: 15.5px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.paid-clean-lineup {
  font-size: 14.5px;
  color: #ffffff;
  line-height: 1.5;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  word-break: keep-all;
}

/* 티어 가격표 */
.clean-pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
}

.clean-pricing-table tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.clean-pricing-table tr:last-child {
  border-bottom: none;
}

.clean-pricing-table td {
  padding: 10px 4px;
  vertical-align: middle;
  font-size: 15.5px;
  word-break: keep-all;
}

.clean-pricing-table .col-tier {
  color: #ffffff;
  font-weight: 500;
  word-break: keep-all;
}

.clean-pricing-table .col-price {
  color: #ffffff;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.clean-pricing-table .col-discount {
  text-align: right;
  padding-left: 10px;
  white-space: nowrap;
  width: 95px;
}

.clean-pricing-table .discount-txt {
  font-size: 14px;
  font-weight: 600;
  color: #f87171;
}

.clean-pricing-table .discount-txt.green {
  color: #34d399;
}

.clean-pricing-table .discount-txt.subtle {
  color: #ffffff;
}

.clean-pricing-table tr.highlight-tier {
  background: rgba(56, 189, 248, 0.04);
}

.clean-pricing-table tr.highlight-tier .col-tier,
.clean-pricing-table tr.highlight-tier .col-price {
  color: #38bdf8;
  font-weight: 800;
}

.clean-pricing-table tr.highlight-tier .discount-txt {
  color: #38bdf8;
  font-weight: 800;
}

/* 카드 하단 안내 */
.clean-card-note {
  margin-top: auto;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid rgba(255, 255, 255, 0.15);
  font-size: 14px;
  color: #ffffff;
  line-height: 1.55;
  border-radius: 0 6px 6px 0;
  word-break: keep-all;
  text-wrap: pretty;
}

.clean-card-note strong {
  color: #ffffff;
}

.clean-card-note.note-blue {
  border-left-color: #38bdf8;
}

.clean-card-note.note-green {
  border-left-color: #34d399;
}

/* 벳365 특화 딜 */
.bet365-clean-deal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  margin-bottom: 18px;
  gap: 12px;
}

.bet365-clean-deal .deal-name {
  font-size: 15.5px;
  font-weight: 600;
  color: #ffffff;
  word-break: keep-all;
  line-height: 1.45;
}

.bet365-clean-deal .deal-val {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
}

.bet365-clean-deal .deal-tag {
  font-size: 14px;
  color: #34d399;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .free-games-trio-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .free-meta-list {
    flex-direction: column;
    gap: 10px;
  }
  .paid-clean-grid {
    grid-template-columns: 1fr;
  }
  .free-games-unified-card {
    padding: 24px 20px;
  }
  .paid-clean-card {
    padding: 24px 20px;
  }
}

/* ==========================================================================
   솔루션 정규 임대 플랜 (솔루션A / 솔루션B / 솔루션Custom) 엔터프라이즈 클린 스타일
   ========================================================================== */
.solution-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 28px;
}

.solution-plan-card {
    background: var(--bg-card);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 20px;
    padding: 32px 26px 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 14px 40px rgba(3, 7, 24, 0.42), 0 1px 0 rgba(255, 255, 255, 0.12) inset;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.solution-plan-card:hover {
  transform: translateY(-5px);
  border-color: rgba(96, 165, 250, 0.48);
  box-shadow: 0 20px 48px rgba(3, 7, 24, 0.52), 0 1px 0 rgba(255, 255, 255, 0.22) inset;
}

.solution-plan-card.featured {
  background: rgba(24, 51, 115, 0.6);
  border: 1px solid rgba(96, 165, 250, 0.52);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

.solution-plan-card.featured:hover {
  border-color: rgba(147, 197, 253, 0.72);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
}

.plan-top-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 7px;
}

.plan-label {
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #38bdf8;
  text-transform: uppercase;
}

.plan-badge-clean {
  font-size: 15px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  white-space: nowrap;
}

.plan-badge-clean.gold {
  color: #ffc83b;
  background: rgba(255, 200, 59, 0.14);
  border-color: rgba(255, 200, 59, 0.35);
}

.plan-title {
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 8px;
  letter-spacing: -0.3px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  word-break: keep-all;
}

.plan-sub {
  font-size: 15.5px;
  color: #ffffff;
  line-height: 1.55;
  margin: 0 0 18px;
  min-height: 42px;
  word-break: keep-all;
  text-wrap: pretty;
}

.plan-pricing-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.plan-price-main {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.plan-price-val {
  font-size: 27px;
  font-weight: 900;
  /* [지정] 요금 금액 골드 */
  color: #ffc83b;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.plan-rate-fixed-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: #34d399;
  font-size: 14px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  margin-top: 4px;
  white-space: nowrap;
  word-break: keep-all;
}

.plan-rate-negotiable-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: #34d399;
  font-size: 14px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  margin-top: 4px;
  white-space: nowrap;
  word-break: keep-all;
}

.plan-mini-rates-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  color: #ffffff;
  line-height: 1.6;
  margin-top: 8px;
  word-break: keep-all;
}

.plan-mini-rates-box strong {
  color: #ffffff;
  white-space: nowrap;
}

.plan-mini-rates-box .rate-pill {
  white-space: nowrap;
  display: inline-block;
}

.solution-notice-banner {
    background: var(--bg-card);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-left: 4px solid rgba(96, 165, 250, 0.48);
    border-radius: 12px;
    padding: 16px 22px;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15.5px;
    line-height: 1.6;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(3, 7, 24, 0.25);
    word-break: keep-all;
}

.solution-notice-banner strong {
  color: #ffffff;
}

.solution-notice-icon {
  color: #38bdf8;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.3;
  flex-shrink: 0;
}

@media (max-width: 1100px) {
  .solution-plans-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .solution-policy-strip {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .solution-plan-card {
    padding: 34px 26px;
  }
}

@media (max-width: 480px) {
  .plan-price-val {
    font-size: 24px;
  }
  .plan-pricing-box {
    padding: 14px 16px;
  }
  .solution-plan-card {
    padding: 28px 20px;
  }
}


.plan-price-unit {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.plan-setup-pill {
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(56, 189, 248, 0.12);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(56, 189, 248, 0.28);
  white-space: nowrap;
  flex-shrink: 0;
}

.plan-setup-pill strong {
  color: #38bdf8;
}

.plan-coverage-bar {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  padding: 9px 13px;
  font-size: 15px;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  word-break: keep-all;
}

.plan-coverage-bar .bar-label {
  font-size: 15px;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.plan-spec-section {
  margin-bottom: 20px;
}

.plan-spec-heading {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.plan-spec-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.plan-spec-items {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  flex-grow: 1;
}

.plan-spec-items li {
  font-size: 15.5px;
  color: #ffffff;
  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  word-break: keep-all;
  text-wrap: pretty;
}

.plan-spec-items li strong {
  color: #ffffff;
  font-weight: 700;
  word-break: keep-all;
}

.plan-check {
  color: #34d399;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.45;
  flex-shrink: 0;
}

.plan-star {
  color: #f472b6;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.45;
  flex-shrink: 0;
}

.text-pink-highlight {
  color: #f472b6 !important;
  font-weight: 800;
}

.plan-coverage-star-pink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #f472b6;
  font-weight: 800;
  background: rgba(244, 114, 182, 0.15);
  border: 1px solid rgba(244, 114, 182, 0.38);
  padding: 1px 8px;
  border-radius: 6px;
}

.plan-badge-clean.pink {
  color: #f472b6;
  background: rgba(244, 114, 182, 0.14);
  border-color: rgba(244, 114, 182, 0.4);
}

.plan-cta-wrap {
  margin-top: auto;
}

.plan-dim-note {
  font-size: 14.5px;
  color: #ffffff;
  margin-top: 4px;
  display: block;
}

.plan-cta-wrap {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.plan-cta-wrap .btn {
  width: 100%;
  padding: 15px 24px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  /* [통일] 다른 버튼과 같은 알약 모양 */
  border-radius: 100px;
  white-space: nowrap;
}

/* 하단 통합 정책 3대 스트립 바 */
.solution-policy-strip {
  background: rgba(21, 33, 66, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 16px;
  padding: 24px 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 10px;
  box-shadow: 0 10px 30px rgba(3, 7, 24, 0.28);
}

.policy-strip-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.policy-strip-label {
  font-size: 15.5px;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.policy-strip-val {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.4;
  word-break: keep-all;
}

.policy-strip-val span {
  white-space: nowrap;
  display: inline-block;
}

.policy-strip-desc {
  font-size: 15px;
  color: #ffffff;
  line-height: 1.6;
  word-break: keep-all;
  text-wrap: pretty;
}

/* 미니게임 변동 고지 바 */
.minigame-policy-notice {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 14px 20px;
  margin-top: 24px;
  text-align: center;
  font-size: 15.5px;
  color: #ffffff;
}

.minigame-policy-notice strong {
  color: #ffffff;
}

/* ==========================================================================
   기존 솔루션 무중단 이사하기 (Migration Section)
   ========================================================================== */
.migration-section {
  position: relative;
  scroll-margin-top: 90px;
}

.migration-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.migration-card {
    background: var(--bg-card);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 18px;
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 12px 36px rgba(3, 7, 24, 0.38), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

    .migration-card:hover {
        transform: translateY(-5px);
        border-color: rgba(96, 165, 250, 0.48);
        box-shadow: 0 18px 44px rgba(3, 7, 24, 0.5), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    }

.migration-step-badge {
    font-size: 14px;
    font-weight: 800;
    color: #ff8c1a;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: inline-block;
}

.migration-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.migration-card-title {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 12px;
  line-height: 1.35;
  word-break: keep-all;
  letter-spacing: -0.3px;
}

.migration-card-desc {
  font-size: 15.5px;
  color: #ffffff;
  line-height: 1.65;
  margin: 0;
  word-break: keep-all;
  text-wrap: pretty;
}

@media (max-width: 1100px) {
  .migration-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .migration-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .migration-card {
    padding: 24px 20px;
  }
}

/* ==========================================================================
   DEMO DESIGN SHOWCASE SECTION (PC & Mobile Scrollable Dual Mockup Viewer)
   ========================================================================== */
.demo-showcase-section {
  padding: 85px 0 100px;
  position: relative;
  background: radial-gradient(circle at 50% 15%, rgba(124, 58, 237, 0.08) 0%, transparent 60%),
              radial-gradient(circle at 85% 65%, rgba(56, 189, 248, 0.06) 0%, transparent 50%);
}

.demo-section-head {
  margin-bottom: 24px;
}

.demo-main-title {
  /* [통일] 모든 섹션 제목 : clamp(28px, 3.4vw, 38px) · 자간 -0.5px */
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 900;
  /* [지정] 데모 섹션 제목만 골드 */
  color: #ffc83b !important;
  letter-spacing: -0.5px;
  line-height: 1.25;
  margin-bottom: 12px;
}

.demo-main-sub {
  font-size: 15.5px;
  color: #ffffff;
  max-width: 780px;
  line-height: 1.65;
  margin: 0;
  word-break: keep-all;
}

/* Demo Filter Tabs */
.demo-tabs-wrap {
  margin: 28px 0 32px;
  position: relative;
}

.demo-tabs-scroll {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.demo-tab-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-radius: 9999px;
  padding: 8px 18px;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
  outline: none;
}

.demo-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  transform: translateY(-1px);
}

.demo-tab-btn.active {
  background: rgba(124, 58, 237, 0.22);
  border-color: #8b5cf6;
  color: #ffffff;
}

/* Demo Viewer Card Container */
.demo-viewer-card {
  background: #111526;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 26px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* 카드 본문 : PC + 모바일 2단 */
.demo-viewer-body {
  display: grid;
  /* 모바일 칼럼은 폰 폭(270px) + 좌측 여백만큼만 차지하고, 나머지는 PC 가 씁니다 */
  grid-template-columns: 1fr 296px;
  gap: 24px;
  align-items: start;
}

/* PC Column */
.demo-pc-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.demo-pc-head {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  min-height: 22px;
}

.demo-title-group {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.demo-cur-name {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.4px;
}

.demo-cur-tag {
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}

/* PC 캡처 하단 캡션 : 설명 - 색상 */
.demo-pc-caption {
  margin: 14px 0 0;
  font-size: 15.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.1px;
}

.demo-pc-note {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.42);
}

/* PC / MOBILE 라벨 : 두 칼럼이 완전히 같은 스타일이어야 합니다 */
.demo-res-tag {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* PC Mockup Frame */
.demo-pc-mockup {
  border-radius: 14px;
  background: #090d19;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.browser-topbar {
  background: #151b2e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  user-select: none;
}

.browser-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.browser-controls .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.browser-controls .dot-close { background: #ef4444; }
.browser-controls .dot-min { background: #f59e0b; }
.browser-controls .dot-max { background: #10b981; }

.browser-address-bar {
  flex: 1;
  max-width: 420px;
  background: rgba(10, 14, 25, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #ffffff;
  font-family: ui-monospace, SFMono-Regular, monospace;
}

.browser-address-bar svg {
  color: #38bdf8;
  flex-shrink: 0;
}

.browser-hint .scroll-badge {
  font-size: 15px;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 9999px;
  padding: 2px 8px;
  font-weight: 600;
  white-space: nowrap;
}

/* Scroll Viewports (Crucial Feature) */
.demo-scroll-viewport {
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  background: #080b14;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  cursor: default;
}

.demo-scroll-viewport.pc-viewport {
  /* 디자인 1 (1920x1089) 을 기준 비율로 삼아 5종 모두 같은 크기로 고정합니다.
     세로로 긴 전체페이지 캡처는 윗부분(메인 화면)이 꽉 차게 보이고 스크롤은 없습니다. */
  height: auto;
  max-height: none;
  aspect-ratio: 1920 / 1089;
  overflow: hidden;
}

  .pc-viewport .demo-viewport-inner {
    height: 100%;
  }

  .pc-viewport .demo-viewport-img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: top center;
  }

/* Custom Scrollbars */
.demo-scroll-viewport::-webkit-scrollbar {
  width: 7px;
}

.demo-scroll-viewport::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.7);
}

.demo-scroll-viewport::-webkit-scrollbar-thumb {
  background: #3b4465;
  border-radius: 6px;
}

.demo-scroll-viewport::-webkit-scrollbar-thumb:hover {
  background: #8b5cf6;
}

/* Floating Scroll Hint Tooltip */
.viewport-scroll-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 9999px;
  pointer-events: none;
  z-index: 20;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  animation: floatHint 2.2s infinite ease-in-out;
}

.viewport-scroll-hint.faded {
  opacity: 0 !important;
  transform: translate(-50%, 10px) !important;
}

@keyframes floatHint {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -4px); }
}

.demo-viewport-inner {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

  /* 이미지가 뷰포트보다 짧으면 위아래 가운데로 */
  .demo-viewport-inner > .demo-viewport-img {
    margin-top: auto;
    margin-bottom: auto;
  }

.demo-viewport-img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.25s ease;
}

/* Mobile Column */
.demo-mobile-column {
  /* [삭제] PC / 모바일 구분선 없음 */
  border-left: none;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.demo-mobile-head {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 12px;
  min-height: 22px;
  text-align: left;
}

/* Mobile Phone Chassis */
.demo-mobile-mockup {
  width: 270px;
  max-width: 100%;
  background: #141829;
  border: 9px solid #232b42;
  border-radius: 46px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.phone-dynamic-island {
  width: 76px;
  height: 18px;
  background: #090c17;
  border-radius: 14px;
  margin: 6px auto 4px;
  position: relative;
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.phone-header-bar {
  background: #111524;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 6px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15.5px;
  color: #ffffff;
  user-select: none;
}

.phone-bar-btn {
  font-size: 14px;
  cursor: default;
}

.phone-bar-title {
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: 0.5px;
}

.phone-bar-action {
  font-size: 15px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 7px;
  border-radius: 4px;
}

.demo-scroll-viewport.mobile-viewport {
  height: 500px;
  max-height: 500px;
}

.demo-scroll-viewport.mobile-viewport::-webkit-scrollbar {
  width: 4px;
}

.demo-scroll-viewport.mobile-viewport::-webkit-scrollbar-thumb {
  background: #3b4465;
  border-radius: 4px;
}

.phone-home-bar {
  width: 100px;
  height: 4px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  margin: 8px auto 6px;
}

/* Fallback Scrollable Placeholder Mock Layout */
.demo-placeholder-view {
  width: 100%;
  background: #090d1a;
  color: #ffffff;
  display: flex;
  flex-direction: column;
}

.mock-hero-banner {
  background: #101528;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 40px 24px;
  text-align: center;
  position: relative;
}

.mock-watermark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.28);
  padding: 6px 14px;
  border-radius: 9999px;
  margin-bottom: 16px;
}

.mock-title {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 10px;
}

.mock-desc {
  font-size: 15px;
  color: #ffffff;
  max-width: 500px;
  margin: 0 auto 20px;
  line-height: 1.6;
}

.mock-grid-box {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mock-category-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.mock-cat-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: #ffffff;
  white-space: nowrap;
}

.mock-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.mock-game-card {
  background: #11172a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mock-thumb {
  height: 70px;
  background: rgba(56, 189, 248, 0.08);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #38bdf8;
  border: 1px dashed rgba(56, 189, 248, 0.25);
}

.mock-card-name {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

.mock-card-sub {
  font-size: 15px;
  color: #ffffff;
}

.mock-footer {
  background: #060811;
  padding: 24px;
  font-size: 15px;
  color: #ffffff;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Bottom Caption */
.demo-footer-caption {
  margin-top: 20px;
  font-size: 15.5px;
  color: #ffffff;
  text-align: left;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .demo-viewer-body {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .demo-viewer-card {
    padding: 20px 20px 24px;
  }
  .demo-mobile-column {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 0;
    padding-top: 32px;
  }
}

@media (max-width: 768px) {
  .demo-showcase-section {
    padding: 60px 0 75px;
  }
  .demo-tabs-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .demo-tabs-scroll::-webkit-scrollbar {
    display: none;
  }
  .demo-tab-btn {
    padding: 6px 14px;
    font-size: 14.5px;
  }
  .demo-scroll-viewport.pc-viewport {
    height: auto;
    max-height: none;
  }
  .demo-scroll-viewport.mobile-viewport {
    height: 440px;
    max-height: 440px;
  }
}



/* ==========================================================================
   Telegram Premium Button Design System (Universal)
   ========================================================================== */
.btn-telegram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #1b88c2;
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 14px 26px;
  border-radius: 100px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.btn-telegram:hover {
  /* [통일] 모든 버튼 공통 오버 효과 */
  background: #2196d4;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.btn-telegram img {
  width: 30px;
  height: 30px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-telegram:hover img {
  transform: scale(1.14) rotate(-6deg);
}

.btn-telegram.btn-lg {
  padding: 16px 36px;
  /* [맞춤] 옆 버튼과 글자 크기를 같게 (18px -> 17px) */
  font-size: 17px;
  gap: 14px;
}

.btn-telegram.btn-lg img {
  width: 36px;
  height: 36px;
}

.footer-telegram-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(34, 158, 217, 0.15);
  border: 1.5px solid rgba(56, 189, 248, 0.5);
  padding: 8px 18px;
  border-radius: 100px;
  color: #38bdf8 !important;
  font-size: 14.5px;
  font-weight: 800;
  text-decoration: none;
  transition: var(--transition);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.footer-telegram-badge:hover {
  background: rgba(34, 158, 217, 0.3);
  border-color: #38bdf8;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  color: #ffffff !important;
}

.footer-telegram-badge img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}


/* =================================================================
   정품 게임사 로고 듀얼 교차 무한 롤링 마키 (Dual Cross Marquee Slider)
   ================================================================= */
.marquee-dual-wrap {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    z-index: 1;
    margin-top: 10px;
}

.marquee-container {
    display: flex;
    width: 100%;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    padding: 8px 0;
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
    display: flex;
    gap: 20px;
    width: max-content;
    will-change: transform;
}

    /* 트랙 1: 좌측 ◀ 롤링 (42s 균일 순항) */
    .marquee-track.track-left {
        animation: scrollLeft 42s linear infinite;
    }

    /* 트랙 2: 우측 ▶ 롤링 (42s 균일 순항) */
    .marquee-track.track-right {
        animation: scrollRight 42s linear infinite;
    }

.marquee-container:hover .marquee-track {
    animation-play-state: paused;
}

/* 마키 애니메이션 키프레임 : 이 정의가 없으면 animation 속성이 무시되어 로고가 멈춰 있습니다 */
@keyframes scrollLeft {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes scrollRight {
    0% { transform: translate3d(-50%, 0, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* 접근성 : 윈도우 '애니메이션 표시' 를 끈 사용자는 롤링 정지 */
@media (prefers-reduced-motion: reduce) {
    .marquee-track.track-left,
    .marquee-track.track-right {
        animation: none;
    }
}

.logo-card-rect {
    width: 236px;
    height: 98px;
    border-radius: 14px;
    background: rgba(20, 17, 27, 0.91);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 200, 59, 0.22);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -1px 2px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
    flex-shrink: 0;
    cursor: pointer;
}

    .logo-card-rect::before {
        content: '';
        position: absolute;
        top: 0;
        left: 20%;
        right: 20%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 200, 59, 0.6), transparent);
        opacity: 0.6;
        transition: opacity 0.3s ease, left 0.3s ease, right 0.3s ease;
    }

    .logo-card-rect img {
        width: 100%;
        height: 100%;
        max-height: 64px;
        object-fit: contain;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
        filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.65));
        pointer-events: none;
    }

    .logo-card-rect::after {
        content: '';
        position: absolute;
        top: -80%;
        left: -80%;
        width: 50%;
        height: 260%;
        background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.22) 50%, transparent 80%);
        transform: rotate(25deg);
        opacity: 0;
        pointer-events: none;
        transition: none;
    }



/* =================================================================
   디자인 안내 : 디자인 + 색상 통합 선택바 (portfolio.html)
   ================================================================= */
.skin-picker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.skin-picker-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.skin-picker-sep {
    width: 1px;
    align-self: stretch;
    min-height: 26px;
    background: rgba(255, 255, 255, 0.12);
}

    .skin-picker .demo-tab-btn {
        margin: 0;
    }

.skin-color-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.72);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

    .skin-color-btn:hover {
        background: rgba(255, 255, 255, 0.09);
        color: #fff;
    }

    .skin-color-btn.active {
        background: rgba(255, 200, 59, 0.12);
        border-color: rgba(255, 200, 59, 0.55);
        color: #ffc83b;
    }

.skin-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.18);
}

@media (max-width: 760px) {
    .skin-picker {
        gap: 8px 12px;
        padding: 10px 12px;
    }

    .skin-picker-sep {
        display: none;
    }

    .skin-picker-group {
        width: 100%;
        gap: 6px;
    }

    .skin-color-btn {
        padding: 7px 13px 7px 10px;
        font-size: 13px;
    }
}

/* =================================================================
   솔루션 안내 : skinimage 폴더 스킨으로 만든 조합 비주얼 (solutions.html)
   ================================================================= */
.skin-combo {
    position: relative;
    isolation: isolate;
    margin: 26px 26px 34px 0;
}

    .skin-combo .skin-combo-pc {
        position: relative;
        z-index: 2;
        aspect-ratio: 1920 / 1089;
        border-radius: 16px;
        overflow: hidden;
        background: #090d19;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.62);
    }

    .skin-combo .skin-combo-back {
        position: absolute;
        top: -26px;
        right: -26px;
        width: 62%;
        z-index: 1;
        aspect-ratio: 1920 / 1089;
        border-radius: 14px;
        overflow: hidden;
        background: #090d19;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
        opacity: 0.78;
    }

    .skin-combo .skin-combo-phone {
        position: absolute;
        right: -22px;
        bottom: -34px;
        width: 25%;
        z-index: 3;
        aspect-ratio: 390 / 740;
        border-radius: 22px;
        overflow: hidden;
        background: #141829;
        border: 6px solid #232b42;
        box-shadow: 0 24px 50px rgba(0, 0, 0, 0.72);
    }

    .skin-combo img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: top center;
    }

/* 디자인 시리즈 타일 조합 */
.skin-series {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.skin-series-row {
    display: grid;
    gap: 14px;
}

    .skin-series-row.pc {
        grid-template-columns: 1fr 1fr;
    }

    .skin-series-row.mobile {
        grid-template-columns: repeat(3, 1fr);
    }

.skin-tile {
    position: relative;
    overflow: hidden;
    background: #090d19;
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}

    .skin-tile.pc {
        aspect-ratio: 1920 / 1089;
        border-radius: 14px;
    }

    .skin-tile.mobile {
        aspect-ratio: 390 / 700;
        border-radius: 18px;
    }

    .skin-tile img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: top center;
    }

.skin-tile-label {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(10, 13, 25, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

@media (max-width: 900px) {
    .skin-combo {
        margin: 20px 18px 26px 0;
    }

    .skin-combo .skin-combo-back {
        top: -18px;
        right: -18px;
    }

    .skin-combo .skin-combo-phone {
        right: -12px;
        bottom: -22px;
        border-width: 4px;
    }

    .skin-series-row {
        gap: 10px;
    }
}

/* =================================================================
   회사소개 : 카드 아이콘 (인라인 SVG · 카드별 --ic 색상 지정)
   ================================================================= */
.about-icon {
    --ic: #38bdf8;
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.09);
    overflow: hidden;
}

    /* 카드 색상 틴트 */
    .about-icon::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--ic);
        opacity: 0.14;
    }

    /* 상단 광택 */
    .about-icon::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 45%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent);
        pointer-events: none;
    }

    .about-icon svg {
        position: relative;
        z-index: 1;
        width: 29px;
        height: 29px;
        fill: none;
        stroke: var(--ic);
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
    }

        .about-icon svg .ic-fill {
            fill: var(--ic);
            stroke: none;
        }

@media (max-width: 768px) {
    .about-icon {
        width: 48px;
        height: 48px;
        border-radius: 13px;
        margin-bottom: 16px;
    }

        .about-icon svg {
            width: 25px;
            height: 25px;
        }
}

@media (max-width: 768px) {
    /* 디자인 시리즈 : PC 타일은 1단, 모바일 타일은 3단 유지 */
    .skin-series-row.pc {
        grid-template-columns: 1fr;
    }

    .skin-combo {
        margin: 16px 14px 22px 0;
    }
}

/* =================================================================
   모바일 최적화 보강 (휴대폰 전용) — 2026-09-19
   인라인 style 로 박혀 있는 값들을 휴대폰에서만 덮어씁니다.
   ================================================================= */
@media (max-width: 768px) {

    /* 1) 섹션 상하 여백 : 100px → 56px (스크롤 길이 절반으로) */
    section[style*="padding: 100px 0"],
    section[style*="padding: 100px 0;"] {
        padding: 10px 0 !important;
    }

    section[style*="padding: 60px 0 70px"] {
        padding: 44px 0 56px !important;
    }

    /* 2) 인라인으로 큰 제목 글자 줄이기 */
    [style*="font-size: 34px"] {
        font-size: 24px !important;
        line-height: 1.35 !important;
    }

    [style*="font-size: 32px"] {
        font-size: 26px !important;
    }

    [style*="font-size: 21px"] {
        font-size: 15.5px !important;
    }

    [style*="font-size: 22px"] {
        font-size: 18px !important;
    }

    /* 3) 카드 안쪽 여백 축소 */
    div[style*="padding: 36px 28px"],
    div[style*="padding: 36px"] {
        padding: 24px 20px !important;
    }

    div[style*="padding: 32px 24px"] {
        padding: 22px 18px !important;
    }

.cta-banner-box h2
{
font-size: clamp(29px, 4.2vw, 46px);
}

    /* 4) 플로팅 상담 버튼 : 본문을 가리지 않게 축소 */
    .floating-quick-cta {
        bottom: 16px;
        right: 16px;
        padding: 9px 16px 9px 10px;
        font-size: 14px;
        gap: 8px;
    }

        .floating-quick-cta img {
            width: 24px;
            height: 24px;
        }

    /* 본문 마지막 줄이 버튼에 가리지 않도록 */
    .site-footer {
        padding-bottom: 84px;
    }

    /* 5) 디자인 안내 : PC 스킨을 옆으로 밀어 보게 (글자 판독용) */
    .demo-scroll-viewport.pc-viewport {
        aspect-ratio: auto;
        height: 300px;
        max-height: 300px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

        .pc-viewport .demo-viewport-inner {
            width: 640px;
            min-width: 640px;
            height: 100%;
        }

        .pc-viewport .demo-viewport-img {
            width: 640px;
            height: 100%;
            object-fit: cover;
            object-position: top center;
        }

    .demo-viewer-card {
        padding: 16px 14px 20px;
        gap: 18px;
    }

    .demo-viewer-body {
        gap: 28px;
    }

    .demo-mobile-column {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 22px;
    }

    /* 6) 회사소개 / 보안 카드 그리드는 1단이지만 좌우 여백 확보 */
    .container {
        padding: 0 18px;
    }
}

@media (max-width: 480px) {
    .demo-tab-btn {
        padding: 6px 12px;
        font-size: 13.5px;
    }

    .skin-color-btn {
        padding: 6px 11px 6px 9px;
        font-size: 12.5px;
    }

    .skin-series-row.mobile {
        gap: 8px;
    }

    .demo-scroll-viewport.pc-viewport {
        height: 260px;
        max-height: 260px;
    }
}



/* =================================================================
   서버&보안 : AWS 인프라 섹션
   왼쪽 = 스펙 2종 + 실시간 지표 / 오른쪽 = 관제 영상
   두 칸을 stretch 로 놓고 영상이 칸을 꽉 채우므로 높이가 항상 같습니다.
   ================================================================= */
.aws-layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 24px;
    align-items: stretch;
}

.aws-layout-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.aws-spec-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* [통일] 2중 암호화 DB 카드와 동일한 규격 */
.aws-spec-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

    .aws-spec-card:hover {
        border-color: rgba(255, 200, 59, 0.4);
        transform: translateY(-3px);
    }

/* 실시간 상태 지표 박스 : 남는 높이를 흡수합니다 */
.aws-health {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
}

.aws-health-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.aws-health-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ffffff;
}

.aws-metrics {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 14px;
}

.aws-metric-top {
    display: flex;
    justify-content: space-between;
    font-size: 13.5px;
    margin-bottom: 6px;
    color: var(--text-muted);
}

    .aws-metric-top span:last-child {
        font-weight: 700;
    }

.aws-bar {
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

    .aws-bar i {
        display: block;
        height: 100%;
    }

.aws-panel-note {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--text-dim);
}

/* 오른쪽 관제 영상 : 칸 높이를 그대로 채웁니다 */
.aws-video-card {
    position: relative;
    min-height: 340px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #05070f;
    border: 1px solid rgba(6, 182, 212, 0.35);
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.18), var(--shadow-lg);
}

    .aws-video-card video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.aws-live-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    margin-bottom: 0;
    z-index: 2;
}

@media (max-width: 980px) {
    .aws-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .aws-video-card {
        min-height: 0;
        aspect-ratio: 16 / 9;
        order: -1;
    }
}

@media (max-width: 560px) {
    .aws-spec-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .aws-spec-card {
        padding: 20px 18px;
    }

    .aws-health {
        padding: 20px 18px;
    }
}

/* =================================================================
   히어로 영상 선택 버튼 : 휴대폰에서 줄바꿈 (한 줄로 두면 519px 라 양옆이 잘립니다)
   ================================================================= */
@media (max-width: 768px) {
    .hero-video-switch {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 18px;
        padding: 6px;
        max-width: 100%;
    }

    .video-switch-btns {
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        max-width: 100%;
    }

    .btn-video-opt {
        padding: 5px 10px;
        font-size: 12.5px;
        gap: 4px;
    }

        .btn-video-opt .v-icon {
            font-size: 12.5px;
        }
}

@media (max-width: 420px) {
    .btn-video-opt {
        padding: 4px 9px;
        font-size: 11.8px;
    }
}


/* === [UNIFY] CARD HOVER + RESPONSIVE TEXT === */
/* ==========================================================================
   [통일] 카드 마우스 오버 효과 — 사이트 전체 카드가 100% 동일한 효과
   기준 : index.html 퀵서비스 카드 (파란 상단 라인 + 살짝 밝은 배경 + 8px 상승)
   ※ 인라인 style 로 border / background 가 박힌 카드가 많아 !important 필요
   ========================================================================== */
.quick-service-card,
.aws-spec-card,
.solution-plan-card,
.migration-card,
.solution-card,
.portfolio-card,
.pricing-card,
.paid-clean-card,
.wallet-method-card,
.seamless-card,
.transfer-card,
section div[style*="background: var(--bg-card)"] {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease,
                box-shadow 0.3s ease,
                background 0.3s ease;
}

.quick-service-card::before,
.aws-spec-card::before,
.solution-plan-card::before,
.migration-card::before,
.solution-card::before,
.portfolio-card::before,
.pricing-card::before,
.paid-clean-card::before,
.wallet-method-card::before,
.seamless-card::before,
.transfer-card::before,
section div[style*="background: var(--bg-card)"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(96, 165, 250, 0.48);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 3;
}

.quick-service-card:hover,
.aws-spec-card:hover,
.solution-plan-card:hover,
.migration-card:hover,
.solution-card:hover,
.portfolio-card:hover,
.pricing-card:hover,
.paid-clean-card:hover,
.wallet-method-card:hover,
.seamless-card:hover,
.transfer-card:hover,
section div[style*="background: var(--bg-card)"]:hover {
    transform: translateY(-8px);
    border-color: rgba(96, 165, 250, 0.48) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
    background: rgba(20, 28, 60, 0.95) !important;
}

.quick-service-card:hover::before,
.aws-spec-card:hover::before,
.solution-plan-card:hover::before,
.migration-card:hover::before,
.solution-card:hover::before,
.portfolio-card:hover::before,
.pricing-card:hover::before,
.paid-clean-card:hover::before,
.wallet-method-card:hover::before,
.seamless-card:hover::before,
.transfer-card:hover::before,
section div[style*="background: var(--bg-card)"]:hover::before {
    opacity: 1;
}

/* 데모 뷰어 / 영상 카드는 '카드'가 아니므로 제외 */
.demo-viewer-card,
.aws-video-card,
.aws-health {
    transform: none !important;
}

/* 터치 기기에서는 hover 가 남아붙는 문제가 있어 효과를 끕니다 */
@media (hover: none) {
    .quick-service-card:hover,
    .aws-spec-card:hover,
    .solution-plan-card:hover,
    .migration-card:hover,
    .solution-card:hover,
    .portfolio-card:hover,
    .pricing-card:hover,
    .paid-clean-card:hover,
    .wallet-method-card:hover,
    .seamless-card:hover,
    .transfer-card:hover,
    section div[style*="background: var(--bg-card)"]:hover {
        transform: none;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    }
}

/* ==========================================================================
   [반응형] 글자 깨짐 / 줄 흘러내림 방지
   - 한글은 단어 단위로 끊고(keep-all), 긴 영문/URL 만 강제 줄바꿈
   - 버튼·뱃지·라벨은 절대 두 줄로 쪼개지지 않게 고정
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
p, li, dt, dd,
.eyebrow, .section-head p,
.quick-service-card h3, .quick-service-card p,
.aws-spec-card h4, .aws-spec-card p,
.solution-plan-card h3, .solution-plan-card p,
.migration-card-title, .migration-card-desc,
.faq-item summary, .faq-body,
.footer-brand p, .footer-col h4, .footer-links a {
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-hyphens: none;
    hyphens: none;
}

/* 버튼/뱃지 : 한 줄 유지 */
.btn-header-cta,
.btn-primary,
.btn-secondary,
.btn-telegram,
.cta-telegram-btn,
.floating-quick-cta,
.quick-card-link,
.more-link,
.badge-tag,
.status-pill,
.demo-tab-btn,
.skin-color-btn,
.nav-link {
    white-space: nowrap;
}

/* flex/grid 자식이 내용 때문에 밖으로 삐져나가는 것 방지 */
.container > *,
.section-head,
.quick-services-grid > *,
.aws-spec-grid > *,
.aws-layout > *,
.footer-top > * {
    min-width: 0;
}

@media (max-width: 1024px) {
    .quick-service-card h3,
    .aws-spec-card h4,
    .solution-plan-card h3 {
        font-size: 17px;
        line-height: 1.4;
    }
}

@media (max-width: 768px) {
    /* 제목이 아래로 뚝 떨어지거나 한 글자만 남는 현상 방지 */
    h1, h2, h3, h4 {
        line-height: 1.32;
        letter-spacing: -0.5px;
        word-break: keep-all;
    }

    p, li {
        line-height: 1.65;
        word-break: keep-all;
    }

    /* 가로로 넘치는 요소 전면 차단 */
    img, video, table, pre, iframe {
        max-width: 100%;
        height: auto;
    }

    /* 숫자/영문 혼합 라벨이 쪼개지지 않도록 */
    .eyebrow,
    .badge-tag,
    .status-pill {
        white-space: nowrap;
        font-size: 11.5px;
        letter-spacing: 0.6px;
    }

    /* 버튼이 한 줄에 안 들어가면 줄바꿈 대신 폭을 줄입니다 */
    .btn-group,
    .hero-cta-group,
    .cta-btn-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .btn-primary,
    .btn-secondary,
    .btn-telegram,
    .cta-telegram-btn {
        max-width: 100%;
        padding-left: 18px;
        padding-right: 18px;
        font-size: 15px;
    }

    /* 테이블은 가로 스크롤로 : 셀 글자 깨짐 방지 */
    .table-wrap,
    .pricing-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-wrap table,
    .pricing-table-wrap table {
        min-width: 560px;
    }
}

@media (max-width: 420px) {
    h1 { letter-spacing: -0.8px; }

    .btn-primary,
    .btn-secondary,
    .btn-telegram,
    .cta-telegram-btn {
        padding-left: 14px;
        padding-right: 14px;
        font-size: 19px;
    }
}


/* === [MOBILE HEADER] CTA COMPACT + MENU EMPHASIS === */
/* ==========================================================================
   모바일 헤더 : 실시간 상담 버튼은 아이콘만 남겨 작게, 햄버거 메뉴는 부각
   ※ PC(769px 이상) 는 전혀 건드리지 않습니다
   ========================================================================== */
@media (max-width: 768px) {
    /* 실시간 상담 = 텔레그램 아이콘만 남긴 동그란 버튼 */
	.pc-only {
		display:none;
	}

    .btn-header-cta {
        width: 40px;
        height: 40px;
        min-width: 40px;
        padding: 0 !important;
        gap: 0;
        border-radius: 50% !important;
        justify-content: center;
        border-width: 1px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    }

        .btn-header-cta > span,
        .btn-header-cta .cta-label {
            display: none !important;
        }

        .btn-header-cta img,
        .btn-header-cta .btn-tg-icon {
            width: 24px !important;
            height: 24px !important;
            margin: 0;
        }

    /* 햄버거 메뉴 : 골드 포인트로 확실히 눈에 띄게 */
    .btn-menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
        font-size: 24px !important;
        line-height: 1;
        color: #ffc83b !important;
        background: rgba(255, 200, 59, 0.14) !important;
        border: 1.5px solid rgba(255, 200, 59, 0.6) !important;
        border-radius: 12px !important;
        box-shadow: 0 0 0 1px rgba(255, 200, 59, 0.12), 0 6px 18px rgba(0, 0, 0, 0.45);
        cursor: pointer;
    }

        .btn-menu-toggle:active {
            background: rgba(255, 200, 59, 0.28) !important;
            transform: scale(0.94);
        }

    .header-actions {
        gap: 10px;
    }
}

@media (max-width: 420px) {
    .btn-header-cta {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }

        .btn-header-cta img,
        .btn-header-cta .btn-tg-icon {
            width: 22px !important;
            height: 22px !important;
        }

    .btn-menu-toggle {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px;
        font-size: 22px !important;
    }
}


/* === [MOBILE DRAWER] MENU AS BUTTONS === */
/* ==========================================================================
   모바일 메뉴 : 글자 나열이 아니라 버튼(패널) 형태로 구분
   ========================================================================== */
.mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 22px;
}

.mobile-menu-links a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 14px 13px 18px;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: rgba(255, 255, 255, 0.86);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

    /* 좌측 액센트 바 */
    .mobile-menu-links a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: rgba(96, 165, 250, 0.55);
        opacity: 0;
        transition: opacity 0.22s ease;
    }

    /* 우측 화살표 */
    .mobile-menu-links a::after {
        content: '\203A';
        font-size: 21px;
        line-height: 1;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.3);
        transition: color 0.22s ease, transform 0.22s ease;
    }

    .mobile-menu-links a:hover,
    .mobile-menu-links a:active {
        background: rgba(96, 165, 250, 0.12);
        border-color: rgba(96, 165, 250, 0.45);
        color: #ffffff;
        transform: translateX(2px);
    }

        .mobile-menu-links a:hover::before,
        .mobile-menu-links a:active::before {
            opacity: 1;
        }

        .mobile-menu-links a:hover::after,
        .mobile-menu-links a:active::after {
            color: rgba(255, 255, 255, 0.7);
            transform: translateX(3px);
        }

    /* 현재 페이지 = 골드 */
    .mobile-menu-links a.active {
        color: #ffc83b;
        background: rgba(255, 200, 59, 0.1);
        border-color: rgba(255, 200, 59, 0.45);
    }

        .mobile-menu-links a.active::before {
            background: #ffc83b;
            opacity: 1;
        }

        .mobile-menu-links a.active::after {
            color: #ffc83b;
        }

/* 드로어 헤더 / 푸터 다듬기 */
.drawer-header {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.drawer-close {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

    .drawer-close:hover,
    .drawer-close:active {
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
    }

.drawer-footer {
    padding-top: 18px;
    margin-top: 18px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

@media (max-width: 380px) {
    .mobile-menu-links a {
        font-size: 14.5px;
        padding: 12px 12px 12px 16px;
    }
}


/* === [MOBILE] HEADING LINE SPACING === */
/* ==========================================================================
   모바일 : 두 줄 이상 제목의 줄 간격 확보 (붙어 보이는 현상 해결)
   ※ PC 는 그대로 둡니다
   ========================================================================== */
@media (max-width: 768px) {
    .sub-hero h1,
    .section-head h2,
    .demo-section-head h2,
    .hero-slide-title,
    .slide-content h1,
    .slide-content h2,
    h1, h2 {
        line-height: 1.45 !important;
        word-break: keep-all;
    }

    .sub-hero h1 {
        font-size: clamp(23px, 6.2vw, 30px);
        letter-spacing: -0.6px;
        margin-bottom: 14px;
    }

    .sub-hero p.lead {
        font-size: 15.5px;
        line-height: 1.75;
    }

    h3, h4 {
        line-height: 1.4 !important;
    }
}


/* === [FIX] TABLET HEADER + HERO BUTTONS + BIGGER MOBILE SKIN === */
/* ==========================================================================
   1) 태블릿 폭(769~1100px)에서 상단 메뉴가 로고/버튼과 겹치던 문제
      -> 1100px 이하는 아예 모바일 헤더(햄버거)로 전환합니다.
   ========================================================================== */
@media (max-width: 1100px) {
    .main-nav {
        display: none !important;
    }

    .header-actions .status-pill {
        display: none !important;
    }

    .btn-menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 24px;
        line-height: 1;
        color: #ffc83b;
        background: rgba(255, 200, 59, 0.14);
        border: 1.5px solid rgba(255, 200, 59, 0.6);
        border-radius: 12px;
        box-shadow: 0 0 0 1px rgba(255, 200, 59, 0.12), 0 6px 18px rgba(0, 0, 0, 0.45);
        cursor: pointer;
    }

        .btn-menu-toggle:active {
            background: rgba(255, 200, 59, 0.28);
            transform: scale(0.94);
        }

    .header-actions {
        gap: 10px;
    }
}

/* ==========================================================================
   2) 메인 히어로 슬라이드 버튼 : 모바일에서 크기/여백/정렬 정리
      (인라인 margin-left:50px 때문에 한쪽으로 밀리던 문제 포함)
   ========================================================================== */
@media (max-width: 768px) {
    .slide-content .btn-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 55%;
    }

    .slide-content .btn-group .btn,
    .slide-content .btn-group .btn-telegram,
    .slide-content .btn-group .btn-lg {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
        max-width: 300px;
        min-width: 0 !important;
        height: 50px !important;
        padding: 0 18px !important;
        font-size: 15px !important;
        border-radius: 100px;
        justify-content: center;
        gap: 8px;
        background: rgba(14, 18, 28, 0.88);
        border: 1.5px solid rgba(223, 172, 108, 0.55);
    }

        .slide-content .btn-group .btn img,
        .slide-content .btn-group .btn-telegram img {
            width: 24px;
            height: 24px;
        }
}

@media (max-width: 420px) {
    .slide-content .btn-group .btn,
    .slide-content .btn-group .btn-telegram,
    .slide-content .btn-group .btn-lg {
        height: 55px !important;
        font-size: 19px !important;
        /*max-width: 270px;*/
    }
}

/* ==========================================================================
   3) 디자인 안내 : 모바일에서 모바일 스킨을 크게 보여줍니다
   ========================================================================== */
@media (max-width: 1024px) {
    .demo-mobile-mockup {
        width: min(380px, 100%);
        border-width: 8px;
        border-radius: 40px;
    }

    .demo-scroll-viewport.mobile-viewport {
        height: 640px !important;
        max-height: 640px !important;
    }
}

@media (max-width: 768px) {
    .demo-mobile-mockup {
        width: min(340px, 100%);
        border-width: 8px;
        border-radius: 40px;
    }

    .demo-scroll-viewport.mobile-viewport {
        height: 600px !important;
        max-height: 600px !important;
    }

    /* PC 캡처도 조금 더 크게 */
    .demo-scroll-viewport.pc-viewport {
        height: 340px !important;
        max-height: 340px !important;
    }

    .demo-mobile-column {
        padding-left: 0;
    }
}

@media (max-width: 420px) {
    .demo-mobile-mockup {
        width: min(310px, 100%);
        border-width: 7px;
        border-radius: 36px;
    }

    .demo-scroll-viewport.mobile-viewport {
        height: 540px !important;
        max-height: 540px !important;
    }
}


/* === [SKIN LIGHTBOX] MOBILE LANDSCAPE VIEWER === */
/* ==========================================================================
   1) 모바일/태블릿 : PC 캡처는 스크롤 없이 전체가 보이도록 축소
   2) 탭하면 화면을 꽉 채우는 '가로 보기' 뷰어가 열립니다
   ========================================================================== */
@media (max-width: 1024px) {
    .demo-scroll-viewport.pc-viewport {
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 1920 / 1089;
        overflow: hidden !important;
    }

        .pc-viewport .demo-viewport-inner {
            width: 100% !important;
            min-width: 0 !important;
            height: 100%;
        }

        .pc-viewport .demo-viewport-img {
            width: 100%;
            height: 100%;
            margin: 0;
            object-fit: cover;
            object-position: top center;
        }

    #pcScrollHint {
        display: none !important;
    }

    .demo-pc-mockup {
        position: relative;
        cursor: zoom-in;
    }

        /* 탭 안내 배지 */
        .demo-pc-mockup::after {
            content: '탭하면 크게 보기';
            position: absolute;
            right: 10px;
            bottom: 10px;
            z-index: 4;
            padding: 6px 12px;
            border-radius: 100px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: -0.2px;
            color: #0b1020;
            background: rgba(255, 200, 59, 0.92);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
            pointer-events: none;
        }
}

/* 가로 보기 뷰어 (전체화면) */
.skin-lightbox {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(3, 6, 14, 0.98);
    display: none;
}

    .skin-lightbox.open {
        display: block;
    }

.skin-lb-rotator {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vh;
    height: 100vw;
    width: 100dvh;
    height: 100dvw;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    box-sizing: border-box;
}

.skin-lb-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.skin-lb-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.skin-lb-sep {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.18);
    margin: 0 4px;
}

.skin-lb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

    .skin-lb-chip.active {
        color: #ffc83b;
        background: rgba(255, 200, 59, 0.14);
        border-color: rgba(255, 200, 59, 0.55);
    }

/* 크게보기 닫기 버튼 : 확실히 눈에 띄게 강조 */
.skin-lb-close {
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    padding: 0 16px 0 13px;
    border-radius: 100px;
    background: #e0483c;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -0.2px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(224, 72, 60, 0.45), 0 0 0 4px rgba(224, 72, 60, 0.18);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

    .skin-lb-close svg {
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
    }

    .skin-lb-close:hover {
        background: #f0584b;
        transform: translateY(-1px);
        box-shadow: 0 10px 24px rgba(224, 72, 60, 0.55), 0 0 0 5px rgba(224, 72, 60, 0.22);
    }

    .skin-lb-close:active {
        transform: scale(0.96);
    }

.skin-lb-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skin-lb-img {
    /* [통일] 어떤 디자인이든 같은 가로 비율로 화면에 꽉 차게 (스크롤 없음) */
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1920 / 1089;
    object-fit: cover;
    object-position: top center;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   모바일 : 메인 히어로 문구 가운데 정렬
   ========================================================================== */
@media (max-width: 768px) {
    .slide-content {
        text-align: center;
        align-items: center;
    }

        .slide-content h1,
        .slide-content p,
        .slide-content p.slide-desc,
        .slide-content .badge-tag {
            text-align: center;
        }

        .slide-content .badge-tag {
            margin-left: auto;
            margin-right: auto;
        }

        .slide-content .btn-group {
            align-items: center;
            justify-content: center;
			margin-left: 23%;
        }
}


/* === [MOBILE] ICON BESIDE TITLE === */
/* ==========================================================================
   모바일 : 아이콘이 한 줄을 통째로 차지하지 않고 제목 앞에 오도록
   ========================================================================== */
@media (max-width: 768px) {
    .quick-service-card {
        display: grid;
        grid-template-columns: 44px 1fr;
        grid-template-areas:
            "icon title"
            "desc desc"
            "link link";
        column-gap: 12px;
        row-gap: 10px;
        align-items: center;
        padding: 22px 18px;
    }

        .quick-service-card > .about-icon {
            grid-area: icon;
            width: 44px;
            height: 44px;
            min-width: 44px;
            border-radius: 12px;
            margin-bottom: 0;
        }

            .quick-service-card > .about-icon svg {
                width: 23px;
                height: 23px;
            }

        .quick-service-card h3 {
            grid-area: title;
            align-self: center;
            margin-bottom: 0;
            font-size: 16.5px;
            line-height: 1.35;
        }

        .quick-service-card p {
            grid-area: desc;
            margin-bottom: 0;
            font-size: 14.5px;
            line-height: 1.6;
        }

        .quick-service-card .quick-card-link {
            grid-area: link;
            font-size: 14.5px;
        }

    /* 서버 & 보안 : AWS 스펙 카드도 동일 형태 */
    .aws-spec-card {
        display: grid;
        grid-template-columns: 44px 1fr;
        grid-template-areas:
            "icon title"
            "desc desc";
        column-gap: 12px;
        row-gap: 10px;
        align-items: center;
        padding: 22px 18px;
    }

        .aws-spec-card > .about-icon {
            grid-area: icon;
            width: 44px;
            height: 44px;
            min-width: 44px;
            border-radius: 12px;
            margin-bottom: 0;
        }

            .aws-spec-card > .about-icon svg {
                width: 23px;
                height: 23px;
            }

        .aws-spec-card h4 {
            grid-area: title;
            align-self: center;
            margin-bottom: 0 !important;
            font-size: 16px !important;
            line-height: 1.35;
        }

        .aws-spec-card p {
            grid-area: desc;
            margin-bottom: 0;
        }

    /* 그 밖의 카드 아이콘은 크기만 줄여서 여백 낭비를 막습니다 */
    section div[style*="background: var(--bg-card)"] > .about-icon {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        margin-bottom: 14px;
    }

        section div[style*="background: var(--bg-card)"] > .about-icon svg {
            width: 24px;
            height: 24px;
        }
}


/* === [SKIN] COLOR BAR ABOVE PREVIEW + DESKTOP POPUP === */
/* ==========================================================================
   색상 선택을 시안(PC 캡처) 바로 위로 분리
   ========================================================================== */
/* 시안 윗줄 : 왼쪽 설명 글 + 오른쪽 색상 선택 */
.skin-color-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 12px;
}

    .skin-caption-text {
        min-width: 0;
        flex: 1 1 320px;
    }

    .skin-color-bar .skin-color-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
        margin-left: auto;
    }

        .skin-color-bar .skin-color-list:empty {
            display: none;
        }

    /* 위로 옮겼으므로 윗여백 제거 */
    .skin-caption-text .demo-pc-caption {
        margin-top: 0;
    }

@media (max-width: 640px) {
    .skin-color-bar {
        align-items: flex-start;
    }

        .skin-color-bar .skin-color-list {
            justify-content: flex-start;
            margin-left: 0;
        }
}

/* 디자인 선택바는 이제 디자인 칩만 들어갑니다 */
.skin-picker {
    justify-content: center;
}

/* PC 캡처 클릭 안내 (데스크톱) */
@media (min-width: 1025px) {
    .demo-pc-mockup {
        position: relative;
        cursor: zoom-in;
    }

        .demo-pc-mockup::after {
            content: '클릭하면 크게 보기';
            position: absolute;
            right: 12px;
            bottom: 12px;
            z-index: 4;
            padding: 7px 14px;
            border-radius: 100px;
            font-size: 13px;
            font-weight: 700;
            color: #0b1020;
            background: rgba(255, 200, 59, 0.92);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.25s ease;
        }

        .demo-pc-mockup:hover::after {
            opacity: 1;
        }

    /* 데스크톱 레이어 팝업 : 회전 없이 화면 중앙에 크게 */
    .skin-lightbox {
        display: none;
    }

        .skin-lightbox.open {
            display: block;
        }

    .skin-lightbox.lb-desktop .skin-lb-rotator {
        width: 100vw;
        height: 100vh;
        transform: translate(-50%, -50%);
        padding: 28px 32px;
        gap: 16px;
    }

    .skin-lightbox.lb-desktop .skin-lb-chip {
        font-size: 14px;
        padding: 8px 16px;
    }

    .skin-lightbox.lb-desktop .skin-lb-close {
        height: 40px;
        padding: 0 20px 0 16px;
        font-size: 15px;
        gap: 8px;
    }

        .skin-lightbox.lb-desktop .skin-lb-close svg {
            width: 18px;
            height: 18px;
        }

    .skin-lightbox.lb-desktop .skin-lb-img {
        border-radius: 10px;
    }
}


/* === [SKIN] BAR ROW + COLUMN TOP ALIGN === */
/* ==========================================================================
   설명·색상 줄을 별도 행으로 두어 PC 시안과 모바일 시안의 윗선을 정확히 맞춥니다
   ========================================================================== */
.demo-viewer-body {
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    row-gap: 12px;
}

.demo-viewer-body > .skin-color-bar {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
}

.demo-viewer-body > .demo-pc-column {
    grid-column: 1;
    grid-row: 2;
}

.demo-viewer-body > .demo-mobile-column {
    grid-column: 2;
    grid-row: 2;
    border-left: none;
}

/* 1단으로 접히는 폭에서는 순서대로 쌓이게 되돌립니다 */
@media (max-width: 1024px) {
    .demo-viewer-body {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        row-gap: 20px;
    }

        .demo-viewer-body > .skin-color-bar,
        .demo-viewer-body > .demo-pc-column,
        .demo-viewer-body > .demo-mobile-column {
            grid-column: auto;
            grid-row: auto;
        }

    .demo-mobile-column {
        border-left: none;
        border-top: none;
        padding-left: 0;
        padding-top: 0;
    }
}