body {
  font-family: 'RiaSans Bold', 'RiaSans', sans-serif;
}

/* RiaSans Regular (400) */
@font-face {
  font-family: 'RiaSans';
  src:
    url('/fonts/RiaSans/RiaSans-Regular.otf') format('opentype'),
    url('/fonts/RiaSans/RiaSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --kr-fallback: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic',
    system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

html,
body {
  font-family: 'RiaSans', var(--kr-fallback);
  font-weight: 400;
  /* 기본은 레귤러 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  /* 가짜 Bold/Italic 생성 방지 */
}

/* RiaSans Bold (700) */
@font-face {
  font-family: 'RiaSans';
  src:
    url('/fonts/RiaSans/RiaSans-Bold.otf') format('opentype'),
    url('/fonts/RiaSans/RiaSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* RiaSans ExtraBold (800) */
@font-face {
  font-family: 'RiaSans';
  src:
    url('/fonts/RiaSans/RiaSans-ExtraBold.otf') format('opentype'),
    url('/fonts/RiaSans/RiaSans-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ========== HERO SPLIT ========== */
.hero-grid {
  display: grid;
  grid-template-columns: min(56vw, 980px) 1fr;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  background: #e0eef1;
  overflow: hidden;
}

.hero-left {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-top-right-radius: 0;
  border-bottom-right-radius: 320px;
}

.hero-swiper {
  height: 100%;
}

.hero-swiper .swiper-slide {
  height: 100%;
  position: relative;
}

.hero-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-swiper .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0));
}

/* 화살표 */
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 0;
}

.hero-swiper .swiper-button-prev {
  left: 16px;
}

.hero-swiper .swiper-button-next {
  right: 16px;
}

.hero-swiper .swiper-button-prev:after,
.hero-swiper .swiper-button-next:after {
  font-size: 18px;
  color: #00c2d9;
}

/* 오른쪽 영역 */
.hero-right {
  display: flex;
  align-items: center;
  padding: 0 48px;

  /* ✅ 배경 이미지 + 배경색 같이 */
  background:
    url('/1x/m/main__visual__04.png') no-repeat center / cover,
    #e0eef1;
}

.hero-content {
  max-width: 720px;
  margin-left: 30px;
}

.hero-eyebrow {
  font-size: 23px;
  margin: 0 0 18px;
  color: #4d4d4d;
  font-family: 'SUIT Variable', 'SUIT', sans-serif;
  font-weight: 900;
}

.hero-headline {
  font-size: 38px;
  font-weight: bold;
  line-height: 1.35;
  margin: 0 0 22px;
}

.hero-divider {
  border: 0;
  height: 2px;
  background: #b2b2b2;
  width: 100%;
  margin: 0 0 22px;
}

/* MORE 버튼 */
.btn-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 0 16px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(180deg, #19f6ff 0%, #0fe6f3 100%);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  width: auto;
  /* ✅ 버튼 크기 auto */
  flex: 0 0 auto;
  /* ✅ flex 영향 안 받게 */
  font-family: "pretendard", sans-serif;
}

.btn-arrow {
  width: 36px;
  height: 12px;
}

.btn-arrow line,
.btn-arrow polyline {
  stroke: #fff;
  stroke-width: 2;
  fill: none;
}

.hero-cta {
  display: inline-flex;
  /* ✅ block → inline-flex (내용 크기만큼) */
  flex-direction: column;
  align-items: flex-start;
  /* ✅ 왼쪽 정렬 */
  gap: 8px;
  /* ✅ 간격 줄이기 (원하면 0도 가능) */
  width: auto;
  /* ✅ 강제로 꽉 차는 거 차단 */
}

.hero-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;

  width: max-content;
}

.hero-bullets .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #fff;
  opacity: .45;
  margin: 0 6px !important;
}

.hero-bullets .swiper-pagination-bullet-active {
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  background: transparent;
  opacity: 1;
}

.hero-controls .ctrl {
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero-controls .ctrl svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  stroke-width: 2;
  fill: none;
}

.icon-pause {
  display: inline-block;
  width: 12px;
  height: 14px;
  position: relative;
}

.icon-pause::before,
.icon-pause::after {
  content: "";
  position: absolute;
  top: 0;
  width: 3px;
  height: 100%;
  background: #fff;
}

.icon-pause::before {
  left: 0;
}

.icon-pause::after {
  right: 0;
}

.hero-controls .toggle.is-stopped .icon-pause {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
}

/* 반응형 */
@media(max-width:992px) {
  .hero-left {
    border-bottom-right-radius: 240px;
  }

  .hero-headline {
    font-size: 32px;
  }
}

@media(max-width:768px) {
  .hero-grid {
    grid-template-columns: 88vw 1fr;
    height: 84vh;
  }

  .hero-left {
    border-bottom-right-radius: 200px;
  }

  .hero-headline {
    font-size: 26px;
  }
}

@media(max-width:480px) {
  .hero-grid {
    height: 74vh;
  }

  .hero-headline {
    font-size: 22px;
  }
}

/* 왼쪽 슬라이드 컨테이너 배경 제거 (필요 시 유지) */
.hero-left {
  background: transparent;
}

/* 전에 #fff 였으면 경계도 투명해짐 */

/* 슬라이더 박스 배경 제거 */
.hero-swiper {
  background: transparent;
}

/* 전에 #000 때문에 회색 느낌 */

/* 상단 어두운 그라데이션 꺼버리기 */
.hero-swiper .swiper-slide::before {
  content: none;
}

/* ===== Right Edge Vertical Nav ===== */
/* ===== Right Edge Vertical Nav ===== */
.edge-nav {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  /* 버튼 사이 간격 제거 */
  pointer-events: none;
}

/* 공통 칩 */
.nav-chip {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 176px;
  margin: 0;
  border-radius: 16px 0 0 16px;
  /* 오른쪽 직각, 왼쪽 둥글 */
  text-decoration: none;
  background: #4a4d51;
  color: #fff;
  font-weight: 800;
  box-shadow: -8px 10px 18px rgba(0, 0, 0, .18);
  transition: box-shadow .15s ease, transform .15s ease;
}

/* 텍스트 회전 → + 가 맨 밑으로 */
.nav-chip span {
  display: inline-block;
  transform: rotate(270deg);
  /* -90도 */
  white-space: nowrap;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .3px;
  font-family: "pretendard", sans-serif;
}

.nav-online {
  background: #4a4d51;
}

.nav-kakao {
  background: #f0b33a;
  height: 196px;
}

/* 호버 효과 */
.nav-chip:hover {
  transform: translateX(-2px);
  box-shadow: -10px 14px 22px rgba(0, 0, 0, .22);
}

/* 반응형 */
@media (max-width: 1200px) {
  .nav-chip {
    width: 52px;
    height: 165px;
  }

  .nav-kakao {
    height: 185px;
  }
}

@media (max-width: 992px) {
  .edge-nav {
    right: 4px;
  }

  .nav-chip {
    width: 48px;
    height: 150px;
  }

  .nav-kakao {
    height: 170px;
  }
}

/* ✅ 모바일: 하단 가로 배치 */
@media (max-width: 768px) {
  .edge-nav {
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom));
    right: 16px;
    transform: none;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .nav-chip {
    width: auto;
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    /* 알약 */
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  }

  /* ✅ 모바일에서는 글자 다시 정상 가로로 */
  .nav-chip span {
    transform: none;
    /* 회전 제거 */
  }

  .nav-kakao {
    height: 44px;
  }
}

.swiper-pagination-bullet {
  width: 14px !important;
  /* ← 원래 8px 정도 → 크게 */
  height: 14px !important;
  background: #fff !important;
  opacity: 1 !important;
  /* 투명도 제거 */
  margin: 0 6px !important;
  /* 도트 간격 넉넉하게 */
}

/* 활성 도트(현재 슬라이드) */
.swiper-pagination-bullet-active {
  width: 18px !important;
  /* 더 크게 강조 */
  height: 18px !important;
  border: 2px solid #fff !important;
  background: transparent !important;
  /* 속 비워서 링처럼 */
  opacity: 1 !important;
}

/* ===== MOBILE (<=768px): Hero 섹션 정돈 ===== */
@media (max-width: 768px) {

  /* 1) 슬라이더가 화면을 꽉 채우고, 텍스트는 아래로 */
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: calc(100dvh - 64px) auto;
    /* 64px=대략 헤더 높이 */
    height: auto;
    min-height: 0;
    background: #fff;
    /* 배경 들쭉날쭉 방지 */
  }

  .hero-left {
    order: 0;
    height: calc(100dvh - 64px);
    border-bottom-right-radius: 0;
    /* 모바일에서는 둥근 모서리 제거 */
    overflow: hidden;
    background: #fff;
  }

  .hero-swiper {
    height: 100%;
  }

  .hero-swiper .swiper-slide img {
    object-fit: cover;
  }

  /* 2) 화살표/도트 크기 및 위치 */
  .hero-swiper .swiper-button-prev,
  .hero-swiper .swiper-button-next {
    width: 36px;
    height: 36px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  }

  .hero-swiper .swiper-button-prev {
    left: 10px;
  }

  .hero-swiper .swiper-button-next {
    right: 10px;
  }

  /* Swiper pagination을 화면 하단 중앙에 고정 */
  .hero-bullets {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 5;
  }

  /* 3) 오른쪽 콘텐츠 영역은 슬라이더 아래 ‘카드’ 느낌으로 */
  .hero-right {
    order: 1;
    background: #fff;
    padding: 22px 16px 28px;
    display: block;
  }

  .hero-content {
    max-width: none;
    margin: 0;
  }

  .hero-eyebrow {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .hero-headline {
    font-size: 22px;
    line-height: 1.35;
    margin-bottom: 16px;
  }

  .hero-divider {
    margin-bottom: 16px;
  }

  /* CTA 묶음 간결하게 */
  .hero-cta {
    align-items: flex-start;
    gap: 8px;
    width: auto;
  }

  .btn-more {
    height: 42px;
    padding: 0 16px;
  }

  /* 모바일 하단 칩 버튼은 이미 가로 배치 → 간격 조금 */
  .edge-nav {
    gap: 10px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .nav-chip {
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
  }

  .nav-chip span {
    transform: none;
  }
}

/* =========================
   ABOUT SECTION – FULL CSS
   ========================= */

/* =========================
   ABOUT SECTION – FULL CSS
   ========================= */

:root {
  --accent: #27F5F3;
  --section-radius: 28px;
  /* 섹션 하단 라운드 */
  --card-radius: 28px;
  /* 카드 라운드 */

  /* 가운데(2번) 카드 올림값 */
  --raise-desktop: 88px;
  /* 데스크탑에서 더 위로 */
  --raise-tablet: 56px;
  /* 태블릿에서 올림 */
}

/* 섹션 전체 */
.about-tiles {
  position: relative;
  min-height: 100dvh;
  /* 세로 100vh (모바일 주소창 대응) */
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 0 0 var(--section-radius) var(--section-radius);
  /* 하단 양쪽만 둥글게 */
  isolation: isolate;
  z-index: 4;
}

/* 배경(느린 확대) */
.about-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.about-bg img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  transform-origin: center;
  transform: scale(1.12);
  animation: aboutZoom 28s ease-in-out infinite alternate;
  /* 아주 천천히 확대/축소 */
  will-change: transform;
}

.about-bg__overlay {
  position: absolute;
  inset: 0;

}

@keyframes aboutZoom {
  0% {
    transform: scale(1.12);
  }

  100% {
    transform: scale(1.20);
  }
}

/* 모션 최소화 환경 */
@media (prefers-reduced-motion: reduce) {
  .about-bg img {
    animation: none;
  }
}

/* 내부 컨테이너 & 타이틀 */
.about-inner {
  width: min(1240px, 94%);
  margin-inline: auto;
  padding: clamp(48px, 7vw, 84px) 0;
  color: #fff;
  text-align: center;
}

.about-kicker {
  display: inline-block;
  width: 82px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
  margin-bottom: 16px;
}

.about-title {
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: .4px;
  font-size: clamp(28px, 3.2vw, 44px);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

.about-lead {
  margin: 0 0 clamp(26px, 4vw, 40px);
  font-size: clamp(14px, 1.35vw, 18px);
  opacity: .95;
}

/* 그리드 */
.about-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: clamp(16px, 3.2vw, 28px);
  align-items: start;

  /* 가운데 카드가 올라간 만큼 상단 여백 확보 → 타이틀/문구와 겹침 방지 */
  padding-top: var(--raise-desktop);
}

/* 카드 */
.about-card {
  --lift: 0px;
  /* 카드 개별 올림 보정값 */

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  height: 380px;
  /* ★ 요청: 세로값 380px */
  min-height: 380px;
  padding: 36px 28px 32px;
  border-radius: var(--card-radius);
  text-align: center;
  color: #111;

  /* ★ 요청: 반투명 흰색(뒤 배경 보임) + 유리 느낌 */
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .20);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);

  transform: translateY(var(--lift));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.about-card:hover {
  transform: translateY(calc(var(--lift) - 4px));
  box-shadow: 0 28px 56px rgba(0, 0, 0, .28);
  border-color: rgba(255, 255, 255, .8);
}

/* 아이콘(이미지 사용 시) */
.about-icon-img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  display: block;
  margin-bottom: 18px;
}

.about-icon-img {
  opacity: 1 !important;
  filter: brightness(0) !important;
  /* → 검정 */
  mix-blend-mode: normal !important;
}

/* 텍스트 & 버튼 */
.about-card__title {
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: .3px;
  color: #111;
  margin: 0 0 16px;
}

.about-card__cta {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(180deg, #19f6ff 0%, #0fe6f3 100%);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .15);
}

/* ★ 가운데(2번) 카드만 위로 더 올리기 */
.about-card.is-raised {
  --lift: calc(-1 * var(--raise-desktop));
}

/* =========================
   반응형
   ========================= */
@media (max-width: 1100px) {
  .about-grid {
    grid-template-columns: repeat(2, 1fr);
    padding-top: var(--raise-tablet);
    /* 태블릿 보정 */
  }

  .about-card {
    height: 340px;
    min-height: 340px;
  }

  .about-card.is-raised {
    --lift: calc(-1 * var(--raise-tablet));
  }
}

@media (max-width: 720px) {
  .about-grid {
    grid-template-columns: 1fr;
    padding-top: 0;
    /* 모바일은 올림 제거 */
  }

  .about-card {
    height: 260px;
    min-height: 260px;
  }

  .about-card.is-raised {
    --lift: 0;
  }

  .about-tiles {
    border-radius: 0 0 22px 22px;
  }
}


/* --- FAST ZOOM: 배경 확대 더 빠르게 --- */
.about-tiles .about-bg img {
  animation: aboZoom 8s ease-in-out infinite alternate !important;
  /* ← 기존 24s → 8s */
  transform-origin: center;
  will-change: transform;
}

@keyframes aboZoom {
  0% {
    transform: translateZ(0) scale(1.10);
  }

  /* 시작 배율 */
  100% {
    transform: translateZ(0) scale(1.30);
  }

  /* 끝 배율(조금 더 크게) */
}

/* (선택) 모바일은 너무 어지러우면 살짝 느리게 */
@media (max-width: 720px) {
  .about-tiles .about-bg img {
    animation-duration: 10s !important;
  }
}


/* =========================
   PRODUCT SECTION (이번 섹션 전용)
   — 윗 섹션 배경 뒤로 딱 붙도록 언더랩
   ========================= */

/* 섹션 래퍼: 윗 섹션 둥근 하단만큼 위로 끌어올림(틈 제거) */
.product-tiles {
  position: relative;
  /* 윗 섹션 하단 라운드 높이만큼 올림 (기본 28px, 필요시 값만 바꿔) */
  margin-top: calc(-1 * var(--section-radius, 28px) - 1px);
  /* 끌어올린 만큼 상단 패딩 보정 */
  padding: calc(clamp(44px, 6vw, 80px) + var(--section-radius, 28px)) 0 64px;
  /* 이번 섹션 하단 두 모서리만 둥글게 */
  border-radius: 0 0 var(--section-radius, 28px) var(--section-radius, 28px);
  /* 하단 라운드 유지용 클리핑 — 상단 언더랩은 margin으로 해결 */
  overflow: hidden;
  /* 스택 컨텍스트 만들지 않음 → 윗 섹션이 위에 오도록 */
  z-index: auto;
  height: 100vh;
  z-index: 3;
}

/* 배경 레이어: 섹션 내부에 깔고, 살짝 확대 애니메이션 */
.prod-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 콘텐츠 뒤, (윗 섹션과는 margin 언더랩으로 겹침) */
  overflow: hidden;
  pointer-events: none;
}

.prod-bg img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  transform-origin: center;
  animation: prodZoom 10s ease-in-out infinite alternate;
}

@keyframes prodZoom {
  0% {
    transform: scale(1.12);
  }

  100% {
    transform: scale(1.22);
  }
}

.prod-bg__overlay {
  position: absolute;
  inset: 0;
  /* 필요시 톤 맞춤 */

}

/* 타이틀/컨테이너 */
.product-inner {
  width: min(1240px, 94%);
  margin: 0 auto;
  color: #fff;
}

.product-kicker {
  display: inline-block;
  width: 82px;
  height: 5px;
  border-radius: 999px;
  background: #27F5F3;
}

.product-title {
  margin: 12px 0 26px;
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 34px);
  letter-spacing: .2px;
}

/* =========================
   슬라이더 (Swiper)
   ========================= */
.prod-swiper {
  overflow: visible;
}

.prod-swiper .swiper-wrapper {
  align-items: stretch;
}

.prod-swiper .swiper-slide {
  width: auto;
  margin-right: 22px;
}

/* 카드: 사각형 레이아웃(이미지 프레임은 위쪽만 둥글게) */
.prod-card {
  position: relative;
  display: block;
  width: clamp(260px, 32vw, 520px);
  color: #fff;
  text-decoration: none;
  transform: translateY(0);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* 지그재그 높이 */
.prod-card:nth-child(odd) {
  transform: translateY(-14px);
}

.prod-card:nth-child(even) {
  transform: translateY(14px);
}

.prod-card:hover {
  transform: translateY(0);
}

/* 이미지 박스: 사각형 + 위만 둥글게 */
.prod-frame {
  position: relative;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  /* ▲ 위쪽만 둥글 */
  box-shadow: 0 18px 38px rgba(0, 0, 0, .26);
}

.prod-img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
}

.prod-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .60) 100%);
}

/* 텍스트 박스: 아래쪽만 둥글게 */
.prod-info {
  background: rgba(22, 22, 22, .86);
  border-radius: 0 0 14px 14px;
  /* ▼ 아래만 둥글 */
  padding: 16px 16px 14px;
}

.prod-name {
  margin: 0 0 6px;
  font-weight: 800;
  font-size: clamp(16px, 1.6vw, 20px);
}

.prod-desc {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.35;
  opacity: .95;
  font-family: "pretendard", sans-serif;
}

.prod-view {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #19f6ff, #0fe6f3);
  font-weight: 800;
  font-size: 11px;
}

/* =========================
   커스텀 DRAG 커서 (슬라이더 영역에서만 표시)
   ========================= */
.drag-cursor {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) scale(1);
  width: 106px;
  height: 106px;
  border-radius: 999px;
  background: #232323;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 60;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  transition: transform .12s ease, opacity .12s ease;
}

.drag-cursor .chev {
  font-size: 18px;
  opacity: .9;
}

.drag-cursor .txt {
  font-size: 14px;
  font-weight: 800;
}

/* 슬라이더 위에서만 커서 보이게 + 기본 커서 숨김 */
.prod-swiper:hover {
  cursor: none;
}

.prod-swiper:hover~.drag-cursor {
  display: flex;
}

.prod-swiper:active~.drag-cursor {
  transform: translate(-50%, -50%) scale(.92);
}

/* =========================
   반응형
   ========================= */
@media (pointer: coarse) {
  .prod-swiper {
    cursor: auto;
  }

  .drag-cursor {
    display: none !important;
  }
}

@media (max-width: 1100px) {
  .prod-swiper .swiper-slide {
    margin-right: 18px;
  }

  .prod-img {
    height: 320px;
  }

  .prod-card:nth-child(odd) {
    transform: translateY(-10px);
  }

  .prod-card:nth-child(even) {
    transform: translateY(10px);
  }
}

@media (max-width: 768px) {
  .product-tiles {
    border-radius: 0 0 22px 22px;
  }

  .prod-card {
    width: clamp(240px, 74vw, 360px);
  }

  .prod-swiper .swiper-slide {
    margin-right: 14px;
  }

  /* 모바일은 지그재그 제거 */
  .prod-card:nth-child(odd),
  .prod-card:nth-child(even) {
    transform: translateY(0);
  }

  .prod-img {
    height: 280px;
  }
}

/* =========================
   PRODUCT 섹션 전용 CSS (전체)
   - 위 섹션 배경 뒤로 언더랩
   - 사각 카드(위만 둥글게) + 아래 정보 박스(아래만 둥글게)
   - 지그재그 높이
   - 커스텀 드래그 커서(표시는 JS가 제어)
   - 자동 슬라이더는 JS에서 Swiper로 초기화
   ========================= */

/* 섹션 래퍼: 윗 섹션 하단 라운드만큼 끌어올려 틈 제거 */
.product-tiles {
  position: relative;
  margin-top: calc(-1 * var(--section-radius, 28px) - 1px);
  /* 윗섹션과 언더랩 */
  padding: calc(clamp(44px, 6vw, 80px) + var(--section-radius, 28px)) 0 64px;
  /* 보정 */
  border-radius: 0 0 var(--section-radius, 28px) var(--section-radius, 28px);
  /* 하단 두 모서리만 둥글게 */
  overflow: hidden;
  /* 하단 둥근 모서리 유지 */
  z-index: 3;
  /* 스택 컨텍스트 생성 방지(윗섹션을 위에 두기) */
}

/* 배경(느린 확대) */
.prod-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 콘텐츠 뒤 */
  overflow: hidden;
  pointer-events: none;
}

.prod-bg img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  transform-origin: center;
  animation: prodZoom 10s ease-in-out infinite alternate;
  /* 약간 빠르게 확대/축소 */
}

@keyframes prodZoom {
  0% {
    transform: scale(1.12);
  }

  100% {
    transform: scale(1.22);
  }
}

/* 필요 시 톤 덮개 */
.prod-bg__overlay {
  position: absolute;
  inset: 0;

}

/* 내부 컨테이너 & 타이틀 */
.product-inner {
  width: min(1240px, 94%);
  margin: 60px auto;
  color: #fff;
}

.product-kicker {
  width: 82px;
  height: 5px;
  border-radius: 999px;
  background: #27F5F3;
  margin: 0 auto;
  display: block;
}

.product-title {
  margin: 12px 0 50px;
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 30px);
  letter-spacing: .2px;
  text-align: center;
  color: #000000;
}

/* ========== Swiper 레일 ========== */
.prod-swiper {
  overflow: visible;
  cursor: none;
}

/* 기본 커서 숨김(드래그 커서는 JS가 표시) */
.prod-swiper .swiper-wrapper {
  align-items: stretch;
}

.prod-swiper .swiper-slide {
  width: auto;
  margin-right: 22px;
}

/* ========== 카드 ========== */
.prod-card {
  position: relative;
  display: block;
  width: clamp(260px, 32vw, 520px);
  color: #fff;
  text-decoration: none;
  transform: translateY(0);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* 지그재그 */
.prod-card:nth-child(odd) {
  transform: translateY(-14px);
}

.prod-card:nth-child(even) {
  transform: translateY(14px);
}

.prod-card:hover {
  transform: translateY(0);
}

/* 이미지 프레임: 사각형 + 위만 둥글게 */
.prod-frame {
  position: relative;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  /* ▲ 위쪽만 둥글 */
  box-shadow: 0 18px 38px rgba(0, 0, 0, .26);
}

.prod-img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
}

.prod-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .60) 100%);
}

/* 텍스트 박스: 아래만 둥글게 */
.prod-info {
  background: rgba(22, 22, 22, .86);
  border-radius: 0 0 14px 14px;
  /* ▼ 아래만 둥글 */
  padding: 16px 16px 14px;
}

.prod-name {
  margin: 0 0 6px;
  font-weight: 800;
  font-size: clamp(16px, 1.6vw, 20px);
}

.prod-desc {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.35;
  opacity: .95;
}

.prod-view {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #19f6ff, #0fe6f3);
  font-weight: 800;
  font-size: 11px;
  color: #fff;
  text-decoration: none;
}

/* ========== 커스텀 DRAG 커서 (표시/위치는 JS가 제어) ========== */
.drag-cursor {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) scale(1);
  width: 106px;
  height: 106px;
  border-radius: 999px;
  background: #232323;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  /* 기본 숨김 → JS에서 보이게 */
  z-index: 60;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  transition: transform .12s ease, opacity .12s ease, visibility .12s ease;
}

.drag-cursor .chev {
  font-size: 18px;
  opacity: .9;
}

.drag-cursor .txt {
  font-size: 14px;
  font-weight: 800;
}

/* 터치에서는 기본 커서 유지, 커스텀 커서 제거 */
@media (pointer: coarse) {
  .prod-swiper {
    cursor: auto;
  }

  .drag-cursor {
    display: none !important;
  }
}

/* 반응형 */
@media (max-width:1100px) {
  .prod-swiper .swiper-slide {
    margin-right: 18px;
  }

  .prod-img {
    height: 320px;
  }

  .prod-card:nth-child(odd) {
    transform: translateY(-10px);
  }

  .prod-card:nth-child(even) {
    transform: translateY(10px);
  }
}

@media (max-width:768px) {
  .product-tiles {
    border-radius: 0 0 22px 22px;
  }

  .prod-card {
    width: clamp(240px, 74vw, 360px);
  }

  .prod-swiper .swiper-slide {
    margin-right: 14px;
  }

  /* 모바일은 지그재그 제거 */
  .prod-card:nth-child(odd),
  .prod-card:nth-child(even) {
    transform: translateY(0);
  }

  .prod-img {
    height: 280px;
  }
}

/* ===== PRODUCT 섹션: 카드/이미지 크기 통일 오버라이드 ===== */

/* 공통 크기 변수 */
:root {
  --prod-card-w: 460px;
  /* 카드 가로 */
  --prod-img-h: 360px;
  /* 이미지 높이 */
}

/* 모든 슬라이드 동일 너비로 강제 */
.prod-swiper .swiper-wrapper {
  align-items: stretch;
}

.prod-swiper .swiper-slide {
  width: var(--prod-card-w) !important;
  /* ← Swiper가 이 값을 사용 */
  flex-shrink: 0;
  margin-right: 22px;
  /* 필요 시 간격 조절 */
}

/* 카드 자체도 동일 너비 */
.prod-card {
  width: var(--prod-card-w) !important;
  /* 기존 clamp() 덮어쓰기 */
}

/* 이미지 높이 고정 + 꽉 채우기 */
.prod-img {
  width: 100% !important;
  height: var(--prod-img-h) !important;
  object-fit: cover !important;
  display: block;
}

/* 지그재그는 유지하지만 크기는 동일 (원치 않으면 아래 두 줄 삭제) */
.prod-card:nth-child(odd) {
  transform: translateY(-14px);
}

.prod-card:nth-child(even) {
  transform: translateY(14px);
}

/* 반응형(원하는 값으로 조절) */
@media (max-width: 1100px) {
  :root {
    --prod-card-w: 380px;
    --prod-img-h: 320px;
  }

  .prod-swiper .swiper-slide {
    margin-right: 18px;
  }
}

@media (max-width: 768px) {
  :root {
    --prod-card-w: 300px;
    --prod-img-h: 280px;
  }

  .prod-swiper .swiper-slide {
    margin-right: 14px;
  }

  /* 모바일에서 지그재그 제거하려면 주석 해제
  .prod-card:nth-child(odd),
  .prod-card:nth-child(even){ transform: translateY(0); }
  */
}


/* ===== PRODUCT: 하단 검은 영역 제거 + 텍스트만 이미지 위로 ===== */

/* 카드 안에서 텍스트를 겹치기 위해 절대배치 */
.prod-card {
  position: relative;
}

/* 이미지 프레임은 그대로 유지 (이미지가 아래까지 꽉 차도록) */
.prod-frame {
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

/* 하단 정보 박스: 배경/둥근모서리 제거하고 이미지 위에 겹치기 */
.prod-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 16px 14px;

  background: transparent !important;
  /* ← 검은 배경 제거 */
  border-radius: 0 !important;
  /* ← 둥근 모서리 제거 */
  box-shadow: none !important;
  pointer-events: none;
  /* 버튼 제외하고 텍스트는 클릭 영향 X(선택) */
}

/* 텍스트 가독성 확보(이미지 위라서) */
.prod-name,
.prod-desc {
  text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

/* VIEW 버튼은 클릭 가능해야 하니 pointer-events 되살림 */
.prod-view {
  pointer-events: auto;
}

/* 필요 시 그라데이션(이미지 위 명암) 유지 */
.prod-grad {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55) 100%);
}

/* PRODUCT: 카드(박스) 너비 475px로 고정 */
:root {
  --prod-img-h: 475px;
  ;
}

.prod-swiper .swiper-slide {
  width: var(--prod-card-w) !important;
  /* 슬라이드 폭 */
}

.prod-card {
  width: var(--prod-card-w) !important;
  /* 카드 폭 */
}

/* PRODUCT: 하단 그라데이션 더 진하게 */
.prod-grad {
  /* 위는 거의 투명 → 아래로 갈수록 확실히 어두워짐 */
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.06) 30%,
      rgba(0, 0, 0, 0.42) 60%,
      rgba(0, 0, 0, 0.80) 100%) !important;
}

/* (옵션) 카드 호버 시 더 진하게 */
.prod-card:hover .prod-grad {
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.08) 28%,
      rgba(0, 0, 0, 0.48) 62%,
      rgba(0, 0, 0, 0.88) 100%) !important;
  transition: background .18s ease;
}















/* =========================
   R&D SECTION
   ========================= */

/* 전역 라운드가 이미 있으면 그대로 사용 */
:root {
  --section-radius: 28px;
  /* 아랫모서리 둥글게 */
  --accent: #27F5F3;
}

/* 섹션 래퍼: 윗섹션과 자연스럽게 겹치기(언더랩) */
.rnd-tiles {
  position: relative;
  margin-top: calc(-1 * var(--section-radius) - 1px);
  /* 위 섹션 아래 라운드만큼 올림 */
  padding: calc(clamp(44px, 6vw, 80px) + var(--section-radius)) 0 84px;
  border-radius: 0 0 var(--section-radius) var(--section-radius);
  overflow: hidden;
  /* 아랫 라운드 유지 */
  isolation: isolate;
  /* 내부 z-index 안전 */
  min-height: 100dvh;
  z-index: 2;
}

/* 배경 + 느린 확대 */
.rnd-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 콘텐츠 뒤로 */
  overflow: hidden;
}

.rnd-bg img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  transform-origin: center;
  animation: rndZoom 14s ease-in-out infinite alternate;
}

@keyframes rndZoom {
  0% {
    transform: scale(1.10);
  }

  100% {
    transform: scale(1.20);
  }
}

/* 살짝 톤 다운 */
.rnd-bg__overlay {
  position: absolute;
  inset: 0;

}

/* 컨테이너 & 타이틀 */
.rnd-inner {
  width: min(1240px, 94%);
  margin-inline: auto;
  color: #fff;
  text-align: center;
  margin-top: 5%;
}

.rnd-kicker {
  display: inline-block;
  width: 82px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
}

.rnd-title {
  margin: 12px 0 10px;
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 34px);
  letter-spacing: .2px;
}

.rnd-lead {
  margin: 0 0 24px;
  font-size: clamp(14px, 1.35vw, 18px);
  opacity: .95;
}

/* 유리 보드 */
.rnd-board {
  position: relative;
  padding: clamp(22px, 3.2vw, 32px);
  border-radius: 28px;
  background: rgba(18, 19, 22, .78);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  overflow: hidden;
  height: 320px;
}

/* 보드에 은은한 라인 패턴 */
.rnd-board::before {
  content: "";
  position: absolute;
  inset: 0;

  opacity: .35;
  pointer-events: none;
}

/* 보드 상단 우측 VIEW 버튼 */
.rnd-more {
  position: absolute;
  top: 14px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(180deg, #19f6ff 0%, #0fe6f3 100%);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .15);
}

/* 그리드 */
.rnd-grid {
  list-style: none;
  padding: 0;
  margin: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
  text-align: center;
}

/* 아이템 */
.rnd-item {
  color: #fff;
}

.rnd-icon-badge {
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0 14px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .22);
}

.rnd-icon-badge img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: none;
}

.rnd-name {
  margin: 0 0 8px;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 600;
  line-height: 1.2;
}

.rnd-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  opacity: .95;
}

/* ===== 반응형 ===== */
@media (max-width: 1100px) {
  .rnd-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rnd-board {
    padding: 26px;
  }

  .rnd-more {
    top: 12px;
    right: 14px;
  }
}

@media (max-width: 720px) {
  .rnd-tiles {
    border-radius: 0 0 22px 22px;
  }

  .rnd-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .rnd-board {
    padding: 22px;
  }

  .rnd-more {
    top: 10px;
    right: 12px;
  }
}

/* 슬라이더 오른쪽 여백 제거 */
.prod-swiper {
  padding-right: 0 !important;
  /* 컨테이너 내부 패딩 제거 */
}

/* Swiper가 wrapper 오른쪽에 여유를 두는 경우 대비 */
.prod-swiper .swiper-wrapper {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

/* (내부 컨테이너를 쓰는 레이아웃이라면) 슬라이더만 전체 폭으로 빼기 */
.product-inner .prod-swiper {
  width: 100vw;
  /* 뷰포트 전체 너비 */
  margin-left: 50%;
  transform: translateX(-50%);
  /* 가운데 컨테이너 안에서 full-bleed */
}




/* ===== NEWS section base ===== */
:root {
  --nk-gap: 28px;
  --nk-radius: 24px;
  --nk-accent: #27F5F3;
}

.nk-news {
  padding: 72px 20px 56px;
  color: #222;
  /* 요청: 섹션 배경 이미지 */
  background: center / cover no-repeat url('/1x/s1/news_bg.png');
  position: relative;
}

/* 하단만 둥글게(상단 직각) */
.nk-news--rounded-bottom {
  border-radius: 0 0 var(--nk-radius) var(--nk-radius);
  overflow: hidden;
  margin-top: -1%;
  z-index: 1;
  min-height: 100dvh;
}


.nk-news__head {
  max-width: 1240px;
  margin: 96px auto 77px;
  text-align: center;
}

.nk-news__bar {
  display: block;
  width: 68px;
  height: 4px;
  margin: 0 auto 14px;
  background: var(--nk-accent);
  border-radius: 999px;
}

.nk-news__title {
  font: 800 40px/1.1 Pretendard, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .5px;
  margin: 0 0 10px;
  font-family: 'RiaSans', var(--kr-fallback);
}

.nk-news__sub {
  opacity: .85;
  margin: 0;
  font-weight: 500
}

/* ===== slider layout ===== */
.nk-slider {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  --perView: 3;
}

.nk-slider__viewport {
  overflow: hidden;
}

.nk-slider__track {
  display: flex;
  gap: var(--nk-gap);
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.nk-card {
  flex: 0 0 calc((100% - (var(--nk-gap) * (var(--perView) - 1))) / var(--perView));
}

.nk-card__media {
  display: block;
  height: 400px;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: none;
}

.nk-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nk-card__cap {
  padding: 18px 6px 0;
}

.nk-card__title {
  margin: 0 0 6px;
  font: 800 20px/1.35 Pretendard, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #fff;
  text-align: center;

}

.nk-card__desc {
  margin: 0;
  color: #666;
  font-weight: 600
}

/* ===== nav ===== */
.nk-slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 22px;
  user-select: none;
}

.nk-nav {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 28px;
  line-height: 1;
}

.nk-nav--prev::before {
  content: "<";
}

.nk-nav--next::before {
  content: ">";
}

/* 도트(시안 느낌: 활성은 링이 생김) */
.nk-dots {
  display: flex;
  align-items: center;
  gap: 54px;
}

.nk-dot {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.nk-dot::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  transition: transform .22s ease;
}

.nk-dot.is-active::after {
  transform: translate(-50%, -50%) scale(1);
}

/* ===== responsive ===== */
@media (max-width: 1200px) {
  .nk-slider {
    --perView: 2;
  }

  .nk-card__media {
    height: 300px;
  }
}

@media (max-width: 780px) {
  .nk-slider {
    --perView: 1;
  }

  .nk-card__media {
    height: 260px;
  }

  .nk-dots {
    gap: 38px
  }
}



:root {
  --accent: #27F5F3;
  --section-radius: 28px;
  /* 하단 모서리만 둥글게 */
  --fg: #fff;
  --fg-dim: rgba(255, 255, 255, .85);
  --glass: rgba(255, 255, 255, .14);
  --glass-border: rgba(255, 255, 255, .35);
}

/* 전체 섹션 래퍼 */
.con-section {
  position: relative;
  overflow: hidden;
  /*border-radius: 0 0 var(--section-radius) var(--section-radius);*/
  /* 하단만 둥글 */
  color: var(--fg);
  isolation: isolate;
  margin-top: -2%;
  min-height: 100dvh;
}

/* 배경 이미지 + 살짝 어둡게 */
.con-bg {
  position: absolute;
  inset: 0;
  background: url("/1x/s1/con_bg.png") center/cover no-repeat;
  z-index: -2;
}

.con-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .35));
  z-index: -1;
}

/* 인너 */
.con-inner {
  width: min(1200px, 92%);
  margin-inline: auto;
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 7vw, 84px);
}

/* 헤더 */
.con-head {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.con-kicker {
  display: inline-block;
  width: 86px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
  margin-bottom: 14px;
}

.con-title {
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: .3px;
  margin: 0 0 10px;
  font-weight: 900;
}

.con-lead {
  margin: 0;
  color: var(--fg-dim);
  font-size: clamp(14px, 1.5vw, 18px);
}

.con-note {
  margin: 10px 0 0;
  font-size: 12px;
  opacity: .9;
  color: var(--fg-dim);
}

/* 폼 그리드 */
.con-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(18px, 2.4vw, 26px);
}

/* 입력 공통(유리 느낌) */
.con-field input,
.con-field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--fg);
  outline: none;
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  font-size: 16px;
}

.con-field input::placeholder,
.con-field textarea::placeholder {
  color: rgba(255, 255, 255, .7);
}

/* 텍스트에어리어는 2칸 차지 */
.con-field--area {
  grid-column: 1 / -1;
}

/* 체크박스 + 전송 */
.con-consents {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: clamp(18px, 2.2vw, 24px);
}

/* 커스텀 체크 */
.con-check {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-dim);
}

.con-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.con-check__ui {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .7);
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
}

.con-check input:checked+.con-check__ui {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(39, 245, 243, .18) inset;
}

.con-check input:checked+.con-check__ui::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--accent);
}

/* 전송 버튼 */
.con-submit {
  margin-left: auto;
  padding: 11px 26px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(180deg, #19f6ff 0%, #0fe6f3 100%);
  color: #001316;
  font-weight: 900;
  letter-spacing: .5px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.con-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

/* 오류 표시 (간단) */
.con-field input:invalid:focus,
.con-field textarea:invalid:focus {
  border-color: #ff9a9a;
  box-shadow: 0 0 0 3px rgba(255, 0, 0, .18);
}

/* 반응형 */
@media (max-width: 900px) {
  .con-grid {
    grid-template-columns: 1fr;
  }

  .con-submit {
    width: 100%;
    margin-left: 0;
  }
}