/* ============================================================
   STUDYCUBE HOMEPAGE — style.css (Full Rebuild)
   ============================================================ */

/* ─── RESET & TOKENS ──────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --blue-950: #06101f;
  --blue-900: #0a1628;
  --blue-800: #0d2240;
  --blue-700: #0e3460;
  --blue-600: #1253a4;
  --blue-500: #1a6bc7;
  --blue-400: #3a8ee6;
  --blue-300: #6aacf0;
  --blue-100: #dbeafe;
  --green-700: #065f46;
  --green-600: #0b7b60;
  --green-500: #0ea47a;
  --green-400: #25c299;
  --green-100: #d1fae5;
  --orange-500: #f59e0b;
  --orange-100: #fef3c7;
  --purple-600: #7c3aed;
  --purple-100: #ede9fe;
  --gray-900: #0f172a;
  --gray-700: #374151;
  --gray-500: #6b7280;
  --gray-300: #d1d5db;
  --gray-100: #f3f4f6;
  --white: #ffffff;
  --gradient-main: linear-gradient(135deg, var(--blue-500) 0%, var(--green-500) 100%);
  --gradient-hero: linear-gradient(160deg, #06101f 0%, #0d2240 50%, #073420 100%);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, .12);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, .18);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, .22);
  --shadow-glow-blue: 0 0 30px rgba(26, 107, 199, .35);
  --shadow-glow-green: 0 0 30px rgba(14, 164, 122, .3);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --transition: .3s cubic-bezier(.4, 0, .2, 1);
  --header-h: 70px;
  --top-bar-h: 56px;
}

/* ─── TOP BRAND BAR ────────────────────────────────────── */
.top-brand-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--top-bar-h);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.top-brand-logo {
  height: 36px;
  width: auto;
  display: block;
  object-fit: contain;
  transition: opacity .3s;
}

.top-brand-bar a:hover .top-brand-logo {
  opacity: .75;
}



html {
  scroll-behavior: smooth;
  font-size: 16px;
  scrollbar-width: none;
  /* Prevent the continuously moving partner-logo track from expanding the page. */
  overflow-x: clip;
}

html::-webkit-scrollbar {
  width: 0;
  height: 0;
}

body {
  font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  color: var(--gray-900);
  background: var(--white);
  line-height: 1.65;
  overflow-x: hidden;
  /* Korean text should wrap by words, never by individual syllables. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

em {
  font-style: normal;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 110px 0;
}

/* ─── BUTTONS ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 50px;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: all var(--transition);
  white-space: nowrap;
  cursor: pointer;
}

.btn-primary {
  background: var(--gradient-main);
  color: var(--white);
  box-shadow: 0 4px 20px rgba(26, 107, 199, .4);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(26, 107, 199, .5);
}

.btn-outline {
  background: rgba(255, 255, 255, .10);
  border: 2px solid rgba(255, 255, 255, .5);
  color: var(--white);
  backdrop-filter: blur(6px);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, .18);
  border-color: var(--white);
  transform: translateY(-2px);
}

.btn-lg {
  padding: 16px 38px;
  font-size: 1.05rem;
}

.btn-full {
  width: 100%;
}

/* ─── SECTION COMMONS ─────────────────────────────────────── */
.section-header {
  text-align: center;
  margin-bottom: 64px;
}

.section-tag {
  display: inline-block;
  background: var(--gradient-main);
  color: var(--white);
  font-size: .70rem;
  font-weight: 800;
  letter-spacing: .14em;
  padding: 5px 18px;
  border-radius: 50px;
  margin-bottom: 18px;
}

.tag-white {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(8px);
}

.section-title {
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  font-weight: 900;
  color: var(--gray-900);
  line-height: 1.22;
  letter-spacing: -.03em;
  margin-bottom: 16px;
}

.section-desc {
  font-size: 1.05rem;
  color: var(--gray-500);
  max-width: 560px;
  margin: 0 auto;
}

.partner-join-text {
  max-width: none;
  color: var(--gray-900);
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.035em;
}

.gradient-text {
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── HEADER ───────────────────────────────────────────────── */
#site-header {
  position: fixed;
  top: var(--top-bar-h);
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-h);
  transition: background var(--transition), backdrop-filter var(--transition), box-shadow var(--transition);
}

#site-header.scrolled {
  background: rgba(6, 16, 31, .96);
  backdrop-filter: blur(18px);
  box-shadow: 0 2px 24px rgba(0, 0, 0, .3);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  /* 로고를 맨 좌측으로 — container max-width 제거 */
  max-width: none;
  margin: 0;
  padding-left: 20px;
  padding-right: 64px;
}

.logo {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--white);
  transition: opacity var(--transition);
}

.logo:hover {
  opacity: .85;
}

.logo-study {
  color: var(--white);
}

.logo-cube {
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-img {
  height: 42px;
  width: auto;
  display: block;
  object-fit: contain;
}

.gnb ul {
  display: flex;
  gap: 2px;
  align-items: center;
}

.gnb ul li {
  display: flex;
  align-items: center;
  height: var(--header-h);
}

.gnb ul li a {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, .8);
  font-size: 1rem;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.gnb ul li a:hover {
  color: var(--white);
  background: rgba(255, 255, 255, .1);
}

/* ─── GNB 말풍선 (배리어프리) ──────────────────────────── */
/* li 내부 상단에 절대 위치 배치 — 키오스크 텍스트는 다른 메뉴와 동일 위치 유지 */
.gnb-tooltip-wrap {
  position: relative;
}

.gnb-tooltip {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-main);
  color: var(--white) !important;
  font-size: .57rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
  white-space: nowrap;
  letter-spacing: -.01em;
  box-shadow: 0 2px 8px rgba(26, 107, 199, .35);
  text-align: center;
  cursor: default;
  pointer-events: none;
  margin-bottom: 10px;
  animation: gnb-float 2.4s ease-in-out infinite;
}

/* 말풍선 꼬리 (아래 방향) */
.gnb-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--green-500);
}

@keyframes gnb-float {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-2px);
  }
}




.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: var(--transition);
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─── HERO ─────────────────────────────────────────────────── */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--gradient-hero);
  padding-top: calc(var(--header-h) + var(--top-bar-h));
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(3, 16, 31, .90) 0%, rgba(3, 16, 31, .78) 54%, rgba(3, 16, 31, .34) 100%),
    linear-gradient(180deg, rgba(3, 16, 31, .08), rgba(3, 16, 31, .28)),
    url('image/studycafe-kiosk-hero.png');
  background-position: 72% center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
}

.hero-glow-1 {
  width: 700px;
  height: 700px;
  top: -15%;
  right: -10%;
  background: radial-gradient(circle, rgba(26, 107, 199, .5) 0%, transparent 70%);
  animation: glow-pulse 6s ease-in-out infinite;
}

.hero-glow-2 {
  width: 500px;
  height: 500px;
  bottom: -10%;
  left: -5%;
  background: radial-gradient(circle, rgba(14, 164, 122, .45) 0%, transparent 70%);
  animation: glow-pulse 8s 2s ease-in-out infinite;
}

@keyframes glow-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: .55;
  }

  50% {
    transform: scale(1.18);
    opacity: .75;
  }
}

.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 60px 60px;
}

.hero-particles {
  display: none;
}

.hero-particle {
  position: absolute;
  border-radius: 50%;
  opacity: .12;
  animation: float-particle linear infinite;
}

@keyframes float-particle {
  0% {
    transform: translateY(105vh) scale(0);
    opacity: 0;
  }

  8% {
    opacity: .12;
  }

  92% {
    opacity: .12;
  }

  100% {
    transform: translateY(-10vh) scale(1);
    opacity: 0;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 130px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .88);
  font-size: .83rem;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: 50px;
  margin-bottom: 30px;
  backdrop-filter: blur(10px);
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-400);
  box-shadow: 0 0 8px var(--green-400);
  animation: blink-led 2s infinite;
}

@keyframes blink-led {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .3;
  }
}

.hero-title {
  font-size: clamp(2rem, 4.8vw, 3.8rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.2;
  letter-spacing: -.035em;
  margin-bottom: 24px;
}

.hero-title .gradient-text {
  background: linear-gradient(100deg, #d8f2ff 0%, #7bd8ff 52%, #7ff3cf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 3px 20px rgba(1, 14, 30, .42);
}

/* Keep the brand name as the focal point of the homepage hero. */
.hero-title .hero-lead,
.hero-title .hero-partner {
  font-size: .74em;
  line-height: 1.42;
}

.hero-title .hero-brand {
  display: inline-block;
  margin-top: 4px;
  font-size: 1.2em;
  line-height: 1.1;
  letter-spacing: -.055em;
}

.hero-sub {
  font-size: clamp(.95rem, 1.8vw, 1.2rem);
  color: rgba(255, 255, 255, .68);
  margin-bottom: 44px;
  line-height: 1.75;
}

.hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

/* KPI Row */
.hero-kpi-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-lg);
  padding: 28px 0;
  backdrop-filter: blur(12px);
  gap: 0;
}

.kpi-card {
  text-align: center;
  padding: 0 36px;
}

.kpi-num {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -.03em;
}

.kpi-unit {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--green-400);
}

.kpi-label {
  display: block;
  font-size: .8rem;
  color: rgba(255, 255, 255, .5);
  margin-top: 5px;
}

.kpi-divider {
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, .15);
}

.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: rgba(255, 255, 255, .4);
  font-size: .78rem;
}

.scroll-arrow {
  width: 18px;
  height: 18px;
  border-right: 2px solid rgba(255, 255, 255, .35);
  border-bottom: 2px solid rgba(255, 255, 255, .35);
  transform: rotate(45deg);
  margin: 8px auto 0;
  animation: bounce-arrow 1.6s infinite;
}

@keyframes bounce-arrow {

  0%,
  100% {
    transform: rotate(45deg) translateY(0);
  }

  50% {
    transform: rotate(45deg) translateY(6px);
  }
}

/* ─── SECTION 2: CORE VALUE ───────────────────────────────── */
.sec-value {
  background: var(--gray-100);
}

.value-icon-grid {
    display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 36px;
}

.vi-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px 30px;
  text-align: center;
  box-shadow: var(--shadow-md);
  border: 1.5px solid transparent;
  transition: all var(--transition);
}

.vi-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--blue-300);
}

.vi-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 22px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vi-icon-wrap svg {
  width: 48px;
  height: 48px;
}

.vi-blue {
  background: var(--blue-100);
}

.vi-green {
  background: var(--green-100);
}

.vi-purple {
  background: var(--purple-100);
}

.vi-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 10px;
}

.vi-card p {
  font-size: .88rem;
  color: var(--gray-500);
  line-height: 1.7;
}

.value-icon-grid[hidden],
.value-highlight-grid[hidden] {
  display: none !important;
}

.value-inhouse-banner {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.4fr);
  gap: 48px;
  align-items: center;
  padding: 42px clamp(28px, 5vw, 64px);
  margin-bottom: 36px;
  border-radius: var(--radius-xl);
  background: linear-gradient(125deg, var(--blue-950), #0b4c73 62%, #08705a);
  box-shadow: var(--shadow-xl);
}

.value-inhouse-label {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 50px;
  background: rgba(255,255,255,.13);
  color: var(--green-400);
  font-size: .68rem;
  letter-spacing: .09em;
  font-weight: 900;
}

.value-inhouse-main h3 {
  margin: 13px 0 12px;
  color: var(--white);
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  line-height: 1.28;
}

.value-inhouse-main em { color: var(--green-400); font-style: normal; }
.value-inhouse-main p { color: rgba(255,255,255,.68); font-size: .88rem; line-height: 1.75; }

.value-solution-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.value-solution-flow > div {
  min-height: 138px;
  padding: 20px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.value-solution-flow span { color: var(--green-400); font-weight: 900; font-size: .74rem; margin-bottom: 9px; }
.value-solution-flow strong { color: var(--white); font-size: .9rem; line-height: 1.4; }
.value-solution-flow small { color: rgba(255,255,255,.52); font-size: .72rem; margin-top: 6px; line-height: 1.4; }
.value-solution-flow > b { color: var(--green-400); font-size: 1.35rem; }

@media (max-width: 900px) {
  .value-inhouse-banner { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 600px) {
  .value-inhouse-banner { padding: 30px 22px; }
  .value-solution-flow { grid-template-columns: 1fr; gap: 8px; }
  .value-solution-flow > b { transform: rotate(90deg); text-align: center; }
  .value-solution-flow > div { min-height: auto; }
}

/* Keep the barrier-free kiosk and its feature copy in separate flow rows on
   phones. The product image must never overlap the introduction or labels. */
@media (max-width: 760px) {
  .sec-barrier-event {
    padding: 30px 0 40px;
  }

  .barrier-event-banner {
    gap: 20px;
  }

  .barrier-event-visual {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: min(190px, 56vw);
    margin: 0 auto 8px;
  }

  .barrier-event-features {
    margin-top: 0;
  }
}

.value-highlight-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.value-highlight-grid:has(.vh-blue[hidden]) {
  grid-template-columns: repeat(3, 1fr);
}

/* 서버 운영 메시지: 단정적 수치 대신 안정적 운영 역량을 강조 */
.vh-green > h4 {
  font-size: 0;
}

.vh-green > h4::after {
  content: '안정적인 서버 운영';
  font-size: 1rem;
}

.vh-green > p {
  font-size: 0;
}

.vh-green > p::after {
  content: '실시간 부하 분산과 상시 모니터링으로 성수기에도 안정적인 서비스를 운영합니다.';
  font-size: .82rem;
  line-height: 1.65;
}

.vh-card {
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.vh-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .06;
  background: currentColor;
}

.vh-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.vh-blue {
  background: var(--blue-100);
  color: var(--blue-600);
}

.vh-green {
  background: var(--green-100);
  color: var(--green-600);
}

.vh-orange {
  background: var(--orange-100);
  color: var(--orange-500);
}

.vh-purple {
  background: var(--purple-100);
  color: var(--purple-600);
}

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

.vh-badge {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  background: currentColor;
  color: var(--white);
  padding: 3px 10px;
  border-radius: 50px;
}

.vh-icon {
  font-size: 1.5rem;
}

.vh-card h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.vh-card p {
  font-size: .82rem;
  color: var(--gray-600, var(--gray-700));
  line-height: 1.65;
}

.value-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}

.value-detail-card {
  padding: 30px 26px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.value-detail-kicker {
  display: inline-block;
  color: var(--blue-600);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .08em;
  margin-bottom: 12px;
}

.value-detail-card h3 {
  margin-bottom: 14px;
  color: var(--gray-900);
  font-size: 1.05rem;
}

.value-detail-card p {
  margin: 0 0 12px;
  color: var(--gray-600);
  font-size: .84rem;
  line-height: 1.7;
}

.value-detail-card p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .value-detail-grid { grid-template-columns: 1fr; }
}

.vh-card p strong {
  display: block;
  margin-top: 4px;
  font-weight: 700;
}

/* ─── SECTION 3: BARRIER FREE ────────────────────────────── */
.sec-barrier {
  background: linear-gradient(150deg, var(--blue-900) 0%, var(--blue-800) 60%, #073424 100%);
  overflow: hidden;
  position: relative;
}

.sec-barrier::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
  background-size: 50px 50px;
}

.barrier-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.barrier-text .section-tag {
  margin-bottom: 22px;
}

.barrier-text h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.2;
  letter-spacing: -.03em;
  margin-bottom: 6px;
}

.barrier-text h2 em {
  color: var(--green-400);
}

.highlight-nia {
  display: inline-block;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.1em;
}

.barrier-text h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 20px;
}

.barrier-text p {
  font-size: .94rem;
  color: rgba(255, 255, 255, .6);
  line-height: 1.8;
  margin-bottom: 24px;
}

.barrier-text p strong {
  color: rgba(255, 255, 255, .9);
}

.barrier-check-list {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.barrier-check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .9rem;
  color: rgba(255, 255, 255, .75);
}

.chk {
  width: 22px;
  height: 22px;
  background: var(--green-500);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 900;
  flex-shrink: 0;
}

/* Barrier Free Kiosk Device */
.barrier-visual {
  display: flex;
  justify-content: center;
}

.bfk-device {
  width: 300px;
  background: #1a1a2e;
  border-radius: 20px 20px 8px 8px;
  overflow: visible;
  box-shadow: var(--shadow-xl), var(--shadow-glow-blue);
  animation: float-y 4.5s ease-in-out infinite;
  border: 2px solid rgba(255, 255, 255, .1);
}

@keyframes float-y {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-14px);
  }
}

.bfk-top-bar {
  background: var(--gradient-main);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 18px 18px 0 0;
}

.bfk-logo {
  font-weight: 900;
  font-size: .9rem;
  color: var(--white);
  letter-spacing: .05em;
}

.bfk-nia-badge {
  background: rgba(255, 255, 255, .22);
  color: var(--white);
  font-size: .65rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .05em;
}

.bfk-screen {
  padding: 16px;
}

.bfk-accessibility-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.bfk-acc-btn {
  flex: 1;
  padding: 8px 4px;
  border-radius: 8px;
  font-size: .62rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: all var(--transition);
}

.bfk-acc-btn.active {
  background: rgba(14, 164, 122, .25);
  color: var(--green-400);
  border-color: var(--green-400);
}

.bfk-welcome {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .05);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.bfk-hand-icon {
  font-size: 2rem;
}

.bfk-welcome-text {
  font-size: .82rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.5;
}

.bfk-welcome-text small {
  display: block;
  font-size: .72rem;
  color: rgba(255, 255, 255, .5);
  font-weight: 400;
}

.bfk-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.bfk-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: 14px 8px;
  font-size: .68rem;
  color: rgba(255, 255, 255, .7);
  font-weight: 600;
  transition: all var(--transition);
}

.bfk-menu-item> :first-child {
  font-size: 1.4rem;
}

.bfk-menu-item:hover {
  background: rgba(26, 107, 199, .2);
  border-color: var(--blue-400);
}

.bfk-stand-plate {
  height: 24px;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px;
}

.bfk-braille-strip {
  width: 80%;
  height: 6px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, .3) 3px, transparent 3px, transparent 7px);
  border-radius: 3px;
}

.bfk-badge-row {
  display: flex;
  gap: 8px;
  padding: 12px;
}

.bfk-cert-badge {
  flex: 1;
  text-align: center;
  padding: 7px;
  background: rgba(14, 164, 122, .2);
  border: 1px solid rgba(14, 164, 122, .4);
  color: var(--green-400);
  font-size: .7rem;
  font-weight: 800;
  border-radius: 8px;
}

.cert-blue {
  background: rgba(26, 107, 199, .2);
  border-color: rgba(26, 107, 199, .4);
  color: var(--blue-300);
}

/* ─── SECTION 4: COST ─────────────────────────────────────── */
.sec-cost {
  background: var(--white);
}

.cost-title {
  font-size: clamp(1.7rem, 3vw, 2.6rem);
}

.cost-highlight-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.cost-hl-card {
  background: var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 32px 40px;
  text-align: center;
  min-width: 180px;
  flex: 1;
  max-width: 280px;
  border: 2px solid transparent;
  transition: all var(--transition);
}

.cost-hl-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.cost-main {
  background: linear-gradient(135deg, #0d2240 0%, #073424 100%);
  border-color: var(--blue-500);
  box-shadow: var(--shadow-glow-blue);
}

.cost-main .cost-hl-label {
  color: rgba(255, 255, 255, .6);
}

.cost-main .cost-hl-value {
  color: var(--white);
}

.cost-hl-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

.cost-hl-label {
  font-size: .8rem;
  color: var(--gray-500);
  margin-bottom: 8px;
  font-weight: 600;
}

.cost-hl-value {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--gray-900);
}

.accent-green {
  color: var(--green-500) !important;
}

.price-big {
  font-size: 2.4rem;
}

.price-note {
  font-size: 1rem;
  margin-left: 4px;
  color: rgba(255, 255, 255, .6);
}

/* Comparison Table */
.cost-table-wrap {
  background: var(--gray-100);
  border-radius: var(--radius-xl);
  padding: 40px;
  margin-bottom: 24px;
}

.cost-table-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cost-table-scroll {
  overflow-x: auto;
}

.cost-table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

.cost-table th,
.cost-table td {
  padding: 14px 20px;
  text-align: center;
  font-size: .9rem;
}

.cost-table thead tr {
  border-bottom: 2px solid var(--gray-300);
}

.cost-table th {
  font-weight: 800;
  color: var(--gray-700);
  font-size: .82rem;
  letter-spacing: .03em;
}

.th-studycube {
  color: var(--blue-600) !important;
}

.th-save {
  color: var(--green-600) !important;
}

.cost-table tbody tr {
  border-bottom: 1px solid var(--gray-300);
  transition: background var(--transition);
}

.cost-table tbody tr:hover {
  background: rgba(26, 107, 199, .05);
}

.cost-table td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--gray-700);
}

.td-competitor {
  color: var(--gray-500);
}

.td-studycube {
  color: var(--blue-600);
  font-weight: 700;
}

.td-save {
  color: var(--green-600);
  font-weight: 800;
}

.tr-total {
  background: linear-gradient(90deg, rgba(26, 107, 199, .06), rgba(14, 164, 122, .06));
}

.tr-total td {
  padding: 18px 20px;
}

.cost-app-note {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(90deg, rgba(14, 164, 122, .1), rgba(26, 107, 199, .1));
  border: 1px solid rgba(14, 164, 122, .3);
  border-radius: var(--radius-md);
  padding: 16px 22px;
  font-size: .9rem;
  color: var(--gray-700);
  margin-top: 20px;
}

.app-note-icon {
  font-size: 1.4rem;
}

/* ─── SECTION 5: FEATURES ─────────────────────────────────── */
.sec-features {
  background: var(--gray-100);
}

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

/* PPT 비용 비교를 알림/앱 항목으로 분리한 시각화 */
.sec-cost .cost-highlight-row,
.sec-cost .cost-table-wrap { display: none; }

.cost-compare-visual { margin-top: 12px; }
.cost-visual-intro { margin: 0 0 14px; color: var(--gray-500); font-size: .95rem; text-align: center; }
.cost-visual-head { text-align: center; max-width: 720px; margin: 0 auto 28px; }
.cost-visual-head h3 { margin: 10px 0 8px; color: var(--gray-900); font-size: clamp(1.55rem, 3.1vw, 2.4rem); line-height: 1.3; }
.cost-visual-head h3 strong { color: var(--blue-600); }
.cost-visual-head p { color: var(--gray-500); font-size: .95rem; }
.cost-chart { padding: 28px 34px 30px; border: 1px solid var(--blue-100); border-radius: var(--radius-xl); background: linear-gradient(135deg, #f7fbff, #fff); box-shadow: var(--shadow-sm); }
.cost-chart-legend { display: flex; justify-content: flex-end; gap: 18px; font-size: .76rem; font-weight: 800; }
.legend-sc { color: var(--blue-600); }.legend-other { color: #f06a55; }
.cost-chart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 12px; }
.cost-chart-item { text-align: center; }
.bar-area { height: 158px; display: flex; align-items: end; justify-content: center; gap: 14px; padding: 0 12px 8px; border-bottom: 1px solid var(--gray-300); background: repeating-linear-gradient(to top, transparent 0, transparent 38px, rgba(12,43,85,.07) 39px, transparent 40px); }
.bar { display: flex; align-items: start; justify-content: center; width: min(32%, 72px); height: var(--bar); min-height: 8px; padding-top: 7px; border-radius: 8px 8px 2px 2px; font-size: .68rem; font-weight: 900; white-space: nowrap; }
.bar-sc { background: var(--blue-500); color: var(--blue-700); transform: translateY(-1px); }.bar-other { background: #f3aa94; color: #b33d2b; }
.cost-chart-item > strong { display: block; margin-top: 12px; color: var(--gray-800); font-size: .92rem; }.cost-chart-item > small { color: var(--gray-500); font-size: .74rem; }
.cost-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 22px; }
.cost-detail-card { padding: 32px; border-radius: var(--radius-xl); background: var(--white); border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); }
.notification-cost { border-top: 4px solid var(--blue-500); }.app-cost { border-top: 4px solid var(--green-500); }
.cost-ppt-head { margin: 0 0 24px; padding-bottom: 20px; border-bottom: 1px solid var(--gray-200); text-align: center; }
.cost-ppt-head p { color: var(--gray-700); font-size: .84rem; font-weight: 800; line-height: 1.5; }
.cost-ppt-head h4 { margin: 7px 0 0; color: var(--blue-600); font-size: clamp(1.26rem, 2.25vw, 1.72rem); line-height: 1.35; }
.cost-ppt-head h4 strong { color: var(--green-600); font-size: 1.15em; }
.app-cost .cost-ppt-head h4 { color: var(--green-600); }.app-cost .cost-ppt-head h4 strong { color: var(--blue-600); }
.cost-detail-kicker { color: var(--blue-600); font-size: .72rem; font-weight: 900; letter-spacing: .08em; }.app-cost .cost-detail-kicker { color: var(--green-600); }
.cost-detail-card h4 { margin: 11px 0; color: var(--gray-900); font-size: clamp(1.18rem, 2vw, 1.48rem); line-height: 1.35; }.cost-detail-card h4 strong { color: var(--blue-600); }.app-cost h4 strong { color: var(--green-600); }
.cost-detail-lead { min-height: 49px; color: var(--gray-500); font-size: .87rem; line-height: 1.65; }
.mini-cost-table { margin-top: 20px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; }.mini-cost-table > div { display: grid; grid-template-columns: 1fr 1fr 1.2fr; }.mini-cost-table span, .mini-cost-table strong { padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--gray-200); font-size: .8rem; }.mini-cost-table .mini-head { background: var(--gray-100); }.mini-cost-table .mini-head > * { color: var(--gray-600); font-weight: 800; }.mini-cost-table strong { color: var(--blue-600); background: rgba(26,107,199,.07); }.app-cost .mini-cost-table strong { color: var(--green-600); background: rgba(14,164,122,.07); }.mini-cost-table > div:last-child > * { border-bottom: 0; }
.cost-detail-emphasis { margin: 17px 0 0; color: var(--gray-800); font-size: .9rem; font-weight: 900; text-align: center; }.cost-disclaimer { margin: 16px 0 0; color: var(--gray-400); font-size: .72rem; text-align: center; line-height: 1.6; }.cost-disclaimer p { margin: 3px 0; }

@media (max-width: 700px) { .cost-chart { padding: 22px 16px; }.cost-chart-grid { gap: 10px; }.bar-area { gap: 6px; padding-inline: 2px; }.bar { width: 43%; font-size: .57rem; }.cost-detail-grid { grid-template-columns: 1fr; }.cost-detail-card { padding: 25px 20px; }.cost-detail-lead { min-height: 0; } }

.features-grid:has(.feat-card[hidden]) { grid-template-columns: repeat(2, 1fr); }

.sec-store-only { background: var(--white); }
.store-only-wrap { display: grid; grid-template-columns: minmax(250px, .75fr) minmax(0, 1.25fr); align-items: center; gap: clamp(36px, 7vw, 100px); max-width: 1080px; margin: 0 auto; padding: clamp(34px, 6vw, 70px); border-radius: var(--radius-xl); background: linear-gradient(135deg, #f5fbf9, #f4f9ff); border: 1px solid var(--green-100); }
.store-only-visual { display: flex; justify-content: center; }.store-only-visual img { width: min(100%, 250px); border-radius: 16px; box-shadow: var(--shadow-xl); }
.store-only-label { color: var(--green-600); font-size: .7rem; letter-spacing: .12em; font-weight: 900; }
.store-only-content h2 { margin: 10px 0 12px; color: var(--gray-900); font-size: clamp(1.55rem, 3vw, 2.35rem); line-height: 1.28; }.store-only-content h2 em { color: var(--green-600); font-style: normal; }
.store-only-intro { color: var(--gray-500); font-size: .92rem; line-height: 1.7; margin-bottom: 24px; }
.store-only-benefits { display: grid; gap: 14px; margin-bottom: 26px; }.store-only-benefits > div { display: flex; align-items: flex-start; gap: 14px; }.store-only-benefits > div > span { display: flex; align-items: center; justify-content: center; flex: 0 0 42px; height: 42px; border-radius: 12px; background: var(--white); box-shadow: var(--shadow-sm); font-size: 1.3rem; }
.store-only-benefits strong { display: block; color: var(--gray-900); font-size: .96rem; margin-bottom: 3px; }.store-only-benefits p { color: var(--gray-500); font-size: .82rem; line-height: 1.55; }
@media (max-width: 760px) { .features-grid:has(.feat-card[hidden]) { grid-template-columns: 1fr; }.store-only-wrap { grid-template-columns: 1fr; padding: 34px 24px; gap: 30px; }.store-only-visual img { width: 190px; } }

.feat-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  box-shadow: var(--shadow-md);
  border: 2px solid transparent;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.feat-card::after {
  content: '';
  position: absolute;
  inset: 0 0 0 0;
  background: var(--gradient-main);
  opacity: 0;
  transition: opacity .4s;
  border-radius: var(--radius-xl);
}

.feat-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--blue-300);
}

.feat-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.feat-icon-wrap svg {
  width: 52px;
  height: 52px;
}

.f-store {
  background: var(--blue-100);
}

.f-iot {
  background: var(--green-100);
}

.f-app {
  background: var(--purple-100);
}

.feat-badge {
  display: inline-block;
  background: var(--blue-100);
  color: var(--blue-600);
  font-size: .68rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 14px;
  letter-spacing: .06em;
}

.feat-badge-green {
  background: var(--green-100);
  color: var(--green-600);
}

.feat-badge-purple {
  background: var(--purple-100);
  color: var(--purple-600);
}

.feat-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 12px;
}

.feat-card p {
  font-size: .88rem;
  color: var(--gray-500);
  line-height: 1.75;
  margin-bottom: 20px;
}

.feat-card p strong {
  color: var(--gray-700);
}

.feat-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.feat-tags span {
  background: var(--gray-100);
  color: var(--gray-600, var(--gray-700));
  font-size: .72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}

/* ─── SECTION 6: PROCESS TIMELINE ────────────────────────── */
.sec-process {
  background: var(--blue-950);
  overflow: hidden;
  position: relative;
}

.sec-process::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
  background-size: 48px 48px;
}

.sec-process .section-title {
  color: var(--white);
}

.sec-process .section-desc {
  color: rgba(255, 255, 255, .55);
}

.timeline-wrap {
  position: relative;
  z-index: 1;
}

.timeline-line {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 200px);
  height: 2px;
  background: linear-gradient(90deg, var(--blue-500), var(--green-400));
  opacity: .4;
}

.timeline-steps {
  display: flex;
  gap: 0;
  justify-content: space-between;
  position: relative;
}

.tl-step {
  flex: 1;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tl-dot {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 2px solid rgba(255, 255, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
  transition: all var(--transition);
  flex-shrink: 0;
}

.tl-dot-main {
  background: var(--gradient-main);
  border-color: transparent;
  box-shadow: 0 0 30px rgba(14, 164, 122, .5), var(--shadow-glow-blue);
  animation: pulse-dot 2.5s infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(14, 164, 122, .5);
  }

  50% {
    box-shadow: 0 0 45px rgba(14, 164, 122, .8);
  }
}

.tl-step:hover .tl-dot {
  background: rgba(26, 107, 199, .3);
  border-color: var(--blue-400);
  transform: scale(1.1);
}

.tl-num {
  font-size: .75rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: .05em;
}

.tl-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius-lg);
  padding: 22px 16px;
  width: 100%;
  transition: all var(--transition);
}

.tl-card:hover {
  background: rgba(255, 255, 255, .09);
  transform: translateY(-4px);
}

.tl-card-main {
  background: rgba(26, 107, 199, .18);
  border-color: rgba(26, 107, 199, .4);
}

.tl-icon {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.tl-card h4 {
  font-size: .92rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 8px;
}

.tl-card p {
  font-size: .78rem;
  color: rgba(255, 255, 255, .5);
  line-height: 1.6;
}

.tl-speed {
  display: inline-block;
  background: var(--green-500);
  color: var(--white);
  font-size: .72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.tl-speed strong {
  color: var(--white);
}

/* ─── SECTION 7: PARTNERS ─────────────────────────────────── */
.sec-partners {
  background: var(--white);
}

.transfer-platform {
  margin-top: 44px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #f7fbff, #f7fffc);
}

.transfer-platform-head { text-align: center; max-width: 760px; margin: 0 auto 30px; }
.transfer-platform-head h3 { margin: 10px 0 8px; color: var(--gray-900); font-size: clamp(1.35rem, 2.5vw, 1.9rem); }
.transfer-platform-head p { color: var(--gray-500); font-size: .9rem; line-height: 1.65; }

.transfer-platform-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.transfer-flow-card { padding: 26px; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--blue-100); box-shadow: var(--shadow-sm); }
.transfer-flow-card { padding: 14px; }
.transfer-reference-img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.transfer-flow-card > :not(.transfer-reference-img):not(.transfer-reference-copy) { display: none; }

.transfer-reference-copy {
  padding: 10px 10px 20px;
}

.transfer-reference-copy span {
  color: var(--blue-600);
  font-size: .68rem;
  letter-spacing: .1em;
  font-weight: 900;
}

.transfer-reference-copy h4 {
  margin: 8px 0;
  color: var(--gray-900);
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
}

.transfer-reference-copy p {
  max-width: 850px;
  color: var(--gray-500);
  font-size: .9rem;
  line-height: 1.7;
}
.transfer-card-title { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.transfer-card-title > span { display: flex; align-items: center; justify-content: center; flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--gradient-main); color: var(--white); font-size: .72rem; font-weight: 900; }
.transfer-card-title strong { display: block; color: var(--gray-900); font-size: 1rem; }
.transfer-card-title small { color: var(--gray-500); font-size: .75rem; }

.server-flow { display: grid; grid-template-columns: 1fr auto .7fr auto 1fr; align-items: center; gap: 8px; }
.server-node { padding: 15px 8px; border-radius: var(--radius-sm); background: var(--gray-100); color: var(--gray-700); text-align: center; font-size: .78rem; font-weight: 800; line-height: 1.45; }
.server-node b { font-size: .76rem; }
.server-node small { color: var(--gray-500); font-size: .62rem; font-weight: 500; }
.server-core { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: var(--blue-600); color: var(--white); text-align: center; font-weight: 900; line-height: 1.25; box-shadow: 0 6px 16px rgba(26,107,199,.28); }
.server-flow i { color: var(--blue-400); font-style: normal; font-weight: 900; }

.iot-flow { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 10px; }
.iot-flow > div { position: relative; padding: 13px 6px; border-radius: var(--radius-sm); background: var(--green-100); color: var(--green-600); text-align: center; font-size: .69rem; font-weight: 800; line-height: 1.45; }
.iot-flow em { display: none; }.iot-flow > div:not(:last-child)::after { content: '→'; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); z-index: 1; color: var(--green-500); font-size: .9rem; }

.server-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.server-tags span { padding: 5px 9px; border-radius: 50px; background: var(--gray-100); color: var(--gray-600); font-size: .68rem; font-weight: 600; }

.platform-detail-list {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.platform-detail-list > div {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
}

.platform-detail-list span { font-size: 1rem; line-height: 1.45; }
.platform-detail-list p { margin: 0; color: var(--gray-600); font-size: .72rem; line-height: 1.55; }
.platform-detail-list strong { color: var(--gray-800); font-weight: 800; }

@media (max-width: 900px) { .transfer-platform-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .transfer-platform { padding: 28px 20px; }
  .server-flow { grid-template-columns: 1fr; gap: 8px; }
  .server-flow i { transform: rotate(90deg); text-align: center; }
  .server-core { margin: 0 auto; }
  .iot-flow { grid-template-columns: 1fr; }
  .iot-flow > div:not(:last-child)::after { content: '↓'; position: static; display: block; margin: 5px 0 0; transform: none; }
}

/* 메인에서는 가볍게 살펴보는 배리어프리 이벤트 배너로 표시 */
.sec-barrier-event {
  padding: 32px 0 118px;
  background: var(--gray-100);
  overflow: visible;
}

.sec-barrier-event::before { display: none; }
.sec-barrier-event .barrier-wrap { display: none; }

.barrier-event-banner {
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) minmax(280px, .9fr);
  gap: 26px;
  align-items: center;
  min-height: 252px;
  padding: clamp(24px, 3vw, 34px) 300px clamp(24px, 3vw, 34px) clamp(28px, 5vw, 62px);
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-xl);
  background: linear-gradient(110deg, #eff8ff 0%, #f8fffc 100%);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: visible;
}

.barrier-event-banner::after {
  content: '';
  position: absolute;
  width: 240px;
  height: 240px;
  right: -95px;
  top: -120px;
  border-radius: 50%;
  background: rgba(14,164,122,.1);
}

.barrier-event-copy { position: relative; z-index: 1; }
.barrier-event-label { color: var(--blue-600); font-size: .68rem; font-weight: 900; letter-spacing: .1em; }
.barrier-event-copy h2 { margin: 10px 0 10px; color: var(--gray-900); font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.32; }
.barrier-event-copy h2 strong { color: var(--blue-600); }
.barrier-event-copy p { color: var(--gray-500); font-size: .88rem; margin-bottom: 20px; }
.barrier-event-link { display: inline-flex; gap: 10px; align-items: center; color: var(--blue-600); font-size: .88rem; font-weight: 800; }
.barrier-event-link span { font-size: 1.15rem; }

.barrier-event-visual {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: -95px;
  width: 242px;
  height: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.barrier-event-visual img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.barrier-event-features { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.barrier-event-features > div { min-height: 108px; padding: 14px 12px; text-align: center; border-radius: var(--radius-lg); background: var(--white); border: 1px solid rgba(26,107,199,.1); box-shadow: 0 5px 15px rgba(15,33,56,.06); }
.barrier-event-features span { display: block; margin-bottom: 10px; color: var(--green-500); font-size: 1.6rem; font-weight: 900; }
.barrier-event-features strong { display: block; color: var(--gray-900); font-size: .86rem; }
.barrier-event-features small { display: block; color: var(--gray-500); margin-top: 5px; font-size: .67rem; line-height: 1.35; }

@media (max-width: 980px) {
  .sec-barrier-event { padding-bottom: 62px; }
  .barrier-event-banner { grid-template-columns: 1fr; padding-right: clamp(28px, 5vw, 62px); }
  .barrier-event-visual { position: relative; right: auto; bottom: auto; width: min(240px, 62vw); margin: 0 auto -55px; }
}

@media (max-width: 760px) {
  .sec-barrier-event { padding: 30px 0; }
  .barrier-event-banner { grid-template-columns: 1fr; gap: 26px; padding: 28px 24px; }
  .barrier-event-visual { width: min(210px, 64vw); margin-bottom: -40px; }
}

.partner-kpi-row {
  max-width: 900px;
  margin: 0 auto 60px;
  background: var(--gradient-hero);
  box-shadow: var(--shadow-lg);
}

.logo-slider-wrap {
  overflow: hidden;
  margin-bottom: 60px;
}

.logo-slider-track {
  overflow: hidden;
  margin-bottom: 16px;
}

.logo-slider-inner {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: slide-left 30s linear infinite;
}

.logo-slider-reverse {
  animation: slide-right 35s linear infinite;
}

@keyframes slide-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes slide-right {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

.partner-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 189px;
  height: 87px;
  padding: 12px 20px;
  background: var(--white);
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-md);
  transition: all var(--transition);
  cursor: default;
}

.partner-logo-item img {
  display: block;
  max-width: 100%;
  max-height: 57px;
  object-fit: contain;
}

.partner-logo-item:hover {
  background: var(--white);
  border-color: var(--blue-300);
}

.cert-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.cert-item {
  background: var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  text-align: center;
  min-width: 140px;
  flex: 1;
  max-width: 180px;
  border: 2px solid var(--gray-300);
  transition: all var(--transition);
}

.cert-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-300);
  background: var(--blue-100);
}

.cert-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

.cert-name {
  font-size: .95rem;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 4px;
}

.cert-sub {
  font-size: .73rem;
  color: var(--gray-500);
}

/* ─── TRUST & CERTIFICATIONS ───────────────────────────────── */
.sec-partners { padding-bottom: 56px; }
.sec-trust-certifications { padding: 56px 0 72px; background: var(--white); }
.trust-cert-head { max-width: 840px; margin: 0 auto 30px; text-align: center; }
.trust-cert-head h2 { margin: 10px 0; color: var(--gray-900); font-size: clamp(1.7rem, 3.3vw, 2.65rem); line-height: 1.32; }
.trust-cert-head p { color: var(--gray-500); font-size: .96rem; line-height: 1.65; }
.trust-cert-image { max-width: 1080px; margin: 0 auto; padding: clamp(14px, 2vw, 26px); border: 1px solid var(--gray-200); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-sm); }
.trust-cert-image img { display: block; width: 100%; height: auto; }
@media (max-width: 600px) { .sec-partners { padding-bottom: 44px; }.sec-trust-certifications { padding: 44px 0 56px; }.trust-cert-image { padding: 8px; border-radius: var(--radius-md); }.trust-cert-head { margin-bottom: 20px; }.trust-cert-head p { font-size: .86rem; } }

/* ─── CONTACT ──────────────────────────────────────────────── */
.sec-contact {
  background: var(--gray-100);
}

.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.contact-info-side .section-tag {
  margin-bottom: 20px;
}

.contact-info-side h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900;
  color: var(--gray-900);
  line-height: 1.25;
  letter-spacing: -.025em;
  margin-bottom: 16px;
}

.contact-info-side>p {
  font-size: 1rem;
  color: var(--gray-500);
  margin-bottom: 32px;
  line-height: 1.7;
}

.contact-detail-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-detail-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cd-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.contact-detail-item div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kakao-channel-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 3px;
}

.kakao-channel-link:hover {
  transform: translateY(-1px);
}

.kakao-channel-logo {
  display: block;
  width: 34px;
  height: 34px;
}

.contact-detail-item strong {
  font-size: .85rem;
  color: var(--gray-700);
  font-weight: 600;
}

.contact-detail-item span {
  font-size: 1.05rem;
  color: var(--gray-900);
  font-weight: 600;
}

.contact-form-side {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 44px 40px;
  box-shadow: var(--shadow-lg);
}

.contact-form-full h3 {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--gray-900);
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--gray-100);
}

.contact-form-guide {
  margin: -14px 0 22px;
  color: var(--gray-500);
  font-size: .84rem;
  line-height: 1.6;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.req { color: #ef4444; font-size: .8rem; }

.form-terms { margin: 16px 0 22px; }

.terms-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin-bottom: 8px;
}

.terms-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--blue-500);
}

.terms-label strong { font-size: .88rem; color: var(--gray-900); }
.terms-label small { color: var(--gray-500); }

.terms-view-btn {
  font-size: .78rem;
  color: var(--blue-500);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.terms-content {
  display: none;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: .78rem;
  color: var(--gray-500);
  line-height: 1.6;
  margin-top: 8px;
}

.btn-submit-contact {
  width: 100%;
  padding: 18px;
  background: var(--gradient-main);
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 800;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 24px rgba(26, 107, 199, .35);
  transition: all var(--transition);
}

.btn-submit-contact:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(26, 107, 199, .5); }
.btn-submit-contact:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.bsc-icon { font-size: 1.2rem; }

.contact-form h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--gray-100);
}

.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: .83rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 7px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-family: inherit;
  color: var(--gray-900);
  background: var(--white);
  resize: none;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(26, 107, 199, .12);
}

/* ─── FOOTER ───────────────────────────────────────────────── */
#site-footer {
  background: var(--blue-900);
}

/* 메인 푸터: 회사 정보와 고객센터를 분리한 간결한 레이아웃 */
#site-footer {
  background: #111;
}

#site-footer .footer-top {
  padding: 28px 0 0;
}

#site-footer .footer-top-inner {
  display: block;
}

#site-footer .footer-logo-area {
  min-width: 0;
}

#site-footer .footer-logo {
  width: 158px;
  margin: 0;
}

#site-footer .footer-tagline,
#site-footer .footer-links {
  display: none;
}

#site-footer .footer-bottom {
  padding: 22px 0 30px;
}

#site-footer .footer-bottom-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 48px;
  align-items: start;
}

#site-footer .footer-divider {
  grid-column: 1 / -1;
  margin: 0 0 24px;
  background: rgba(255,255,255,.08);
}

#site-footer .footer-company-info { grid-column: 1; grid-row: 2; }
#site-footer .footer-company-info p { color: rgba(255,255,255,.48); font-size: .86rem; line-height: 1.8; }
#site-footer .footer-company-info p:nth-child(3) { display: none; }

#site-footer .footer-reference-contact {
  grid-column: 2;
  grid-row: 2;
  min-width: 360px;
  color: rgba(255,255,255,.52);
}

#site-footer .footer-reference-contact strong { display: block; color: rgba(255,255,255,.78); font-size: .92rem; margin-bottom: 12px; }
#site-footer .footer-reference-contact p { font-size: .86rem; line-height: 1.8; }
#site-footer .footer-reference-contact a { color: rgba(255,255,255,.62); text-decoration: underline; text-underline-offset: 3px; }

#site-footer .footer-copyright {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  color: rgba(255,255,255,.38);
  margin-top: 64px;
  font-size: .8rem;
}

@media (max-width: 760px) {
  #site-footer .footer-bottom-inner { grid-template-columns: 1fr; gap: 24px; }
  #site-footer .footer-reference-contact { grid-column: 1; min-width: 0; }
  #site-footer .footer-copyright { grid-column: 1; grid-row: 3; margin-top: 0; }
}

.footer-top {
  padding: 20px 0 0;
}

.footer-top-inner {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.footer-logo-area {
  flex: 0 0 auto;
  min-width: 200px;
}

.footer-logo {
  display: block;
  width: 150px;
  height: auto;
  filter: invert(1);
  margin-bottom: 10px;
}

.footer-tagline {
  font-size: .88rem;
  color: rgba(255, 255, 255, .45);
}

.footer-links {
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  flex-wrap: nowrap;
  margin: 0;
}

.footer-link-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.footer-link-items {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.footer-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, .08);
  margin: 6px 0 0;
}

.admin-dashboard-image {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--gray-300);
}

.admin-mockup-wrap:has(.admin-dashboard-image) .admin-browser-frame {
  display: none;
}

.mobile-app-preview {
  display: block;
  width: min(100%, 360px);
  margin: 0 auto;
  border-radius: 28px;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--gray-300);
}

.mobile-app-gallery {
  background: var(--white);
  padding: 64px 0 80px;
}

.app-guide-panel {
  padding: 34px 24px 42px;
  text-align: center;
  border-top: 2px solid var(--gray-100);
}

.app-guide-panel + .app-guide-panel { margin-top: 56px; }

.app-guide-kicker {
  margin: 0 0 10px;
  color: var(--gray-900);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  font-weight: 900;
}

.app-guide-panel h2 {
  margin: 0;
  color: #4775c6;
  font-size: clamp(1.35rem, 2.6vw, 2.25rem);
  font-weight: 900;
  line-height: 1.35;
}

.app-guide-phone-layout {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 230px minmax(150px, 1fr);
  align-items: center;
  gap: 26px;
  max-width: 900px;
  margin: 46px auto 0;
}

.app-guide-phone {
  padding: 14px;
  background: #fff;
  border: 7px solid #f0f1f3;
  border-radius: 32px;
  box-shadow: 0 12px 28px rgba(15, 33, 56, .16);
  text-align: left;
}

.app-guide-phone-real {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--gray-300);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  background: #fff;
}

.app-guide-phone-real img {
  display: block;
  width: 100%;
  height: auto;
}

.app-guide-phone-head { display: flex; justify-content: space-between; padding: 4px 3px 12px; font-size: .7rem; }
.app-ticket { display: flex; flex-direction: column; gap: 7px; padding: 12px; border-radius: 14px; background: #f7f7f8; font-size: .65rem; }
.app-ticket b { color: #6d3f91; }.app-ticket small { color: var(--gray-500); }.app-ticket em { color: var(--gray-500); font-style: normal; }.app-ticket em strong { color: #e9ae3e; }
.app-qr { display: grid; place-items: center; width: 68px; height: 68px; margin: 2px auto; color: #111; border: 5px solid #111; font-size: 3.3rem; line-height: 1; }
.app-ticket button, .app-guide-actions button { border: 1px solid var(--gray-300); border-radius: 20px; padding: 7px; background: #fff; font-size: .62rem; }
.app-guide-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 10px 0; }
.app-guide-nav { display: flex; justify-content: space-around; border-top: 1px solid var(--gray-200); padding-top: 10px; color: var(--gray-500); }

.app-guide-notes { display: flex; flex-direction: column; gap: 18px; color: #4775c6; font-size: .8rem; font-weight: 800; text-align: left; }
.app-guide-notes-left { text-align: right; }.app-guide-notes span { position: relative; }.app-guide-notes-left span::after, .app-guide-notes-right span::before { content: ''; display: inline-block; width: 24px; border-top: 1px solid #b7c7e7; vertical-align: middle; }.app-guide-notes-left span::after { margin-left: 8px; }.app-guide-notes-right span::before { margin-right: 8px; }

.app-screen-carousel { display: grid; grid-template-columns: 64px repeat(5, minmax(110px, 1fr)) 64px; align-items: center; gap: 8px; max-width: 1060px; margin: 46px auto 0; }
.app-carousel-arrow { color: #4775c6; font-family: Arial, sans-serif; font-size: 8rem; font-weight: 300; line-height: 1; }
.app-screen { min-height: 300px; padding: 14px 10px; border: 1px solid var(--gray-300); background: #fff; box-shadow: 0 3px 12px rgba(15, 33, 56, .08); text-align: left; font-size: .68rem; overflow: hidden; }
.app-screen b { display: block; margin-bottom: 14px; color: var(--gray-700); font-size: .72rem; }.app-screen i { display: block; height: 17px; margin: 8px 0; border-radius: 3px; background: #eef1f4; }.app-screen-qr .app-qr { width: 92px; height: 92px; margin-top: 55px; }.app-screen-qr small { display: block; text-align: center; color: var(--gray-500); }.app-screen-login input { width: 100%; box-sizing: border-box; margin: 8px 0; padding: 8px; border: 1px solid var(--gray-300); }.app-screen-login button, .app-screen-seat button, .app-screen-locker button { width: 100%; margin-top: 8px; padding: 8px; border: 0; color: #fff; background: #199c60; }.app-screen-login button:last-child { background: #2f7cb8; }.seat-map { margin-top: 35px; padding: 18px 6px; color: #777; background: #f1f3f3; line-height: 2.3; letter-spacing: 5px; }.app-screen-locker p { padding: 9px 0; border-bottom: 1px solid var(--gray-200); color: var(--gray-500); }

.app-real-carousel {
  position: relative;
  display: block;
  max-width: 860px;
  margin: 42px auto 0;
}

.app-carousel-viewport { position: relative; height: 610px; overflow: visible; }
.app-carousel-slide { position: absolute; top: 0; left: 50%; width: 340px; display: block; margin: 0; opacity: 0; pointer-events: none; transform: translateX(-50%) scale(.76); transform-origin: center top; transition: opacity .35s ease, transform .45s ease; }
.app-carousel-slide.active { z-index: 3; opacity: 1; pointer-events: auto; transform: translateX(-50%) scale(1); animation: app-slide-in .45s ease; }
.app-carousel-slide.preview-prev,
.app-carousel-slide.preview-next { z-index: 1; opacity: .62; }
.app-carousel-slide.preview-prev { transform: translateX(calc(-50% - 280px)) scale(.76); }
.app-carousel-slide.preview-next { transform: translateX(calc(-50% + 280px)) scale(.76); }
.app-carousel-slide img { display: block; width: 100%; height: 560px; object-fit: contain; border: 1px solid var(--gray-300); box-shadow: var(--shadow-lg); background: transparent; }
.app-carousel-slide figcaption { margin-top: 12px; color: var(--gray-700); font-size: .95rem; font-weight: 800; }
.app-carousel-slide:not(.active) figcaption { visibility: hidden; }
.app-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 2px; }
.app-carousel-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--gray-300); cursor: pointer; }
.app-carousel-dots button.active { width: 25px; border-radius: 8px; background: #4775c6; }

@keyframes app-slide-in { from { opacity: 0; transform: translateX(-50%) scale(.94); } to { opacity: 1; transform: translateX(-50%) scale(1); } }

@media (max-width: 760px) {
  .app-guide-phone-layout { grid-template-columns: 1fr; }.app-guide-phone { max-width: 230px; margin: 0 auto; }.app-guide-notes { display: none; }.app-screen-carousel { grid-template-columns: 1fr 1fr; }.app-carousel-arrow { display: none; }.app-screen { min-height: 230px; }.app-screen:nth-of-type(n+5) { display: none; }
  .app-real-carousel { max-width: 100%; }.app-carousel-viewport { height: 455px; }.app-carousel-slide { width: 220px; }.app-carousel-slide img { height: 420px; }.app-carousel-slide.preview-prev { transform: translateX(calc(-50% - 130px)) scale(.56); }.app-carousel-slide.preview-next { transform: translateX(calc(-50% + 130px)) scale(.56); }
}

.footer-link-col strong {
  color: rgba(255, 255, 255, .9);
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: 0;
}

.footer-link-col a {
  color: rgba(255, 255, 255, .45);
  font-size: .82rem;
  transition: color var(--transition);
}

.footer-link-col a:hover {
  color: var(--green-400);
}

.footer-bottom {
  padding: 20px 0 0;
}

.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-company-info p {
  font-size: .79rem;
  color: rgba(255, 255, 255, .35);
  line-height: 1.7;
}

.footer-copyright {
  font-size: .76rem;
  color: rgba(255, 255, 255, .25);
  margin-top: 4px;
  letter-spacing: .03em;
}

/* ─── QUICK BUTTONS ────────────────────────────────────────── */
.quick-buttons {
  position: fixed;
  right: 24px;
  bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 999;
  opacity: 0;
  transform: translateX(80px);
  transition: all var(--transition);
}

.quick-buttons.visible {
  opacity: 1;
  transform: translateX(0);
}

.quick-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 50px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition);
  text-decoration: none;
  cursor: pointer;
}

.quick-btn:hover {
  transform: scale(1.05) translateX(-3px);
  box-shadow: var(--shadow-xl);
}

.quick-call {
  background: var(--gradient-main);
}

.quick-call .qb-text {
  line-height: 1.35;
}

.quick-consult {
  background: var(--blue-600);
}

.quick-kakao {
  width: 70px;
  height: 70px;
  padding: 0;
  justify-content: center;
  align-self: flex-end;
  background: #FEE500;
}

.quick-kakao img {
  display: block;
  width: 42px;
  height: 42px;
}

.quick-blog {
  width: 70px;
  height: 70px;
  padding: 0;
  justify-content: center;
  align-self: flex-end;
  background: #252525;
}

.quick-blog span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 5px;
  background: #20c76a;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 31px;
  font-weight: 900;
  line-height: 1;
}

.quick-top {
  background: var(--gray-900);
  width: 70px;
  height: 70px;
  padding: 0;
  gap: 3px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: flex-end;
}

.quick-top .qb-icon { font-size: .9rem; line-height: 1; }
.quick-top .qb-text { font-size: .72rem; line-height: 1; }

/* ─── HOMEPAGE HEADER & EMPHASIS TUNING ────────────────────── */
#site-header { top: var(--top-bar-h); height: calc(var(--header-h) + 12px); }
.gnb ul li { height: calc(var(--header-h) + 12px); }
.hero-title { font-size: clamp(calc(2rem - 4px), calc(4.8vw - 4px), calc(3.8rem - 4px)); }
.partner-join-text { color: var(--gray-500); font-size: clamp(1rem, 1.65vw, 1.35rem); font-weight: 600; }
.barrier-event-visual { bottom: -60px; }

.qb-icon {
  font-size: 1.1rem;
}

/* ─── TOAST ─────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--gray-900);
  color: var(--white);
  padding: 14px 28px;
  border-radius: 50px;
  font-size: .88rem;
  font-weight: 500;
  box-shadow: var(--shadow-xl);
  z-index: 9999;
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
  white-space: nowrap;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}

/* ─── ANIMATIONS ────────────────────────────────────────────── */
.animate-fade-down {
  animation: fade-down .8s ease both;
}

.animate-fade-up {
  animation: fade-up .8s ease both;
}

@keyframes fade-down {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(32px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-44px);
  transition: opacity .75s ease, transform .75s ease;
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(44px);
  transition: opacity .75s ease, transform .75s ease;
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .value-highlight-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .timeline-steps {
    flex-wrap: wrap;
    gap: 28px;
    justify-content: center;
  }

  .timeline-line {
    display: none;
  }

  .tl-step {
    max-width: 220px;
  }

  .features-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 900px) {
  .gnb {
    display: none;
  }

  .gnb.mobile-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: rgba(6, 16, 31, .98);
    backdrop-filter: blur(18px);
    padding: 20px 24px 30px;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }

  .gnb.mobile-open ul {
    flex-direction: column;
    gap: 4px;
  }

  .gnb.mobile-open ul li a {
    padding: 12px 16px;
    font-size: 1rem;
  }

  .hamburger {
    display: flex;
  }

  .value-icon-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto 36px;
  }

  .barrier-wrap {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .contact-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .cost-highlight-row {
    flex-direction: column;
    align-items: center;
  }

  .cost-hl-card {
    max-width: 100%;
    width: 100%;
  }

  .footer-top-inner {
    flex-direction: column;
    gap: 36px;
  }

  .quick-buttons {
    right: 12px;
    bottom: 20px;
  }
}

@media (max-width: 600px) {
  html {
    overflow-x: clip;
  }

  section {
    padding: 70px 0;
  }

  #hero .hero-title {
    font-size: 1.58rem;
    line-height: 1.32;
    letter-spacing: -.045em;
    word-break: keep-all;
  }

  #hero .hero-subtitle {
    font-size: .9rem;
    line-height: 1.7;
  }

  .quick-buttons {
    right: 14px;
    bottom: 16px;
    gap: 8px;
  }

  .quick-btn.quick-call,
  .quick-btn.quick-consult,
  .quick-btn.quick-kakao,
  .quick-btn.quick-top {
    width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 0;
    gap: 0;
    justify-content: center;
    align-self: flex-end;
  }

  .quick-btn .qb-text {
    display: none;
  }

  .quick-btn .qb-icon {
    font-size: 1.15rem;
  }

  .quick-kakao img {
    width: 32px;
    height: 32px;
  }

  .hero-kpi-row {
    flex-direction: column;
    padding: 24px 20px;
    gap: 16px;
  }

  .kpi-divider {
    display: none;
  }

  .value-highlight-grid {
    grid-template-columns: 1fr;
  }

  .cert-row {
    flex-direction: column;
    align-items: center;
  }

  .cert-item {
    max-width: 100%;
    width: 100%;
  }

  .contact-form-side {
    padding: 28px 20px;
  }

  .bfk-device {
    width: 260px;
  }
}

/* Footer stacking for phone layouts. Keep each content group in its own row
   so company information and customer support never overlap. */
@media (max-width: 600px) {
  #site-footer .footer-top {
    padding-top: 24px;
  }

  #site-footer .footer-top-inner {
    display: block;
  }

  #site-footer .footer-bottom {
    padding: 20px 0 28px;
  }

  #site-footer .footer-bottom-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  #site-footer .footer-divider {
    order: 1;
    margin: 0 0 20px;
  }

  #site-footer .footer-company-info {
    order: 2;
    margin: 0;
  }

  #site-footer .footer-reference-contact {
    order: 3;
    min-width: 0;
    margin: 18px 0 0;
  }

  #site-footer .footer-copyright {
    order: 4;
    margin: 16px 0 0;
  }

  #site-footer .footer-company-info p,
  #site-footer .footer-reference-contact p,
  #site-footer .footer-copyright {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: keep-all;
  }
}

/* Final mobile override: this is deliberately after the desktop event-banner
   rules so the kiosk stays in normal document flow above its feature cards. */
@media (max-width: 760px) {
  .sec-barrier-event {
    padding: 30px 0 40px;
  }

  .barrier-event-banner {
    gap: 20px;
  }

  .barrier-event-visual {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: min(190px, 56vw);
    margin: 0 auto 8px;
  }

  .barrier-event-features {
    margin-top: 0;
  }
}