/* docs/styles.css */
/* 기존 CSS + hero center 정렬용 클래스 추가 + 다운로드 그룹이 중앙 폭에서 보기 좋게 */

:root {
  --bg: #0b1020;
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.62);

  --card: rgba(255, 255, 255, 0.055);
  --stroke: rgba(255, 255, 255, 0.085);
  --stroke2: rgba(255, 255, 255, 0.12);

  --accent: #2f6bff;
  --accent2: #64ffd3;

  --radius: 18px;
  --shadow: 0 14px 50px rgba(0, 0, 0, 0.34);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding-top: 56px;
  /* 네비게이션 바 높이만큼 여백 */
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    system-ui,
    Segoe UI,
    Roboto,
    Arial;
  color: var(--text);
  background: var(--bg);
  position: relative;
}

/* ONE continuous background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 50% -10%,
      rgba(255, 255, 255, 0.08),
      transparent 60%),
    linear-gradient(180deg,
      rgba(13, 18, 36, 1) 0%,
      rgba(8, 12, 26, 1) 65%,
      rgba(6, 9, 20, 1) 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

.wrap {
  width: min(1100px, 92vw);
  margin: 0 auto;
}

a {
  color: inherit;
}

.link {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link:hover {
  opacity: 0.9;
}

/* NAV */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  background: rgba(11, 16, 32, 0.45);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
}

.brand-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 8px 30px rgba(47, 107, 255, 0.28);
}

.brand-name {
  letter-spacing: -0.3px;
}

.nav-links {
  display: flex;
  gap: 16px;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: var(--muted);
  font-size: 13px;
}

.nav-links a:hover {
  color: var(--text);
}

/* Language segmented */
.segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.05);
}

.seg {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}

.seg[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  border: 1px solid var(--stroke2);
}

/* HERO */
.hero {
  padding: 64px 0 30px;
}

.eyebrow {
  margin: 0 0 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.headline {
  margin: 0;
  font-size: 44px;
  line-height: 1.06;
  letter-spacing: -1px;
}

.headline-sub {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 650;
  letter-spacing: -0.3px;
}

.lead {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
}

/* Mobile break: 기본 숨김, 모바일에서만 표시 */
.mobile-break {
  display: none;
}

@media (max-width: 980px) {
  .mobile-break {
    display: block;
  }
}

/* NEW: Hero center layout */
.hero-centered .hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.hero-centered .lead {
  text-align: center;
}

.hero-centered .meta {
  text-align: center;
  max-width: 70ch;
}

.hero-centered .download-groups {
  width: min(920px, 100%);
}

/* CTA buttons */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

.btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.btn.primary {
  border: 0;
  background: linear-gradient(135deg,
      rgba(47, 107, 255, 0.98),
      rgba(100, 255, 211, 0.72));
  color: #0b1020;
  font-weight: 850;
  box-shadow: 0 18px 70px rgba(47, 107, 255, 0.22);
}

.btn.ghost {
  background: transparent;
}

.btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.meta {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}

/* Glass */
.glass {
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
}

/* Download groups */
.download-groups {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.dl-group {
  border-radius: 18px;
  padding: 14px;
}

.dl-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dl-title {
  font-weight: 850;
  letter-spacing: -0.2px;
}

.dl-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  text-align: right;
}

/* STRIP */
.strip {
  padding: 12px 0 26px;
}

.strip-inner {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.strip-item {
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
}

/* SECTIONS */
.section {
  padding: 80px 0;
  position: relative;
  background: transparent;
}

.section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.18));
  opacity: 0.55;
}

.section-title {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.6px;
}

.section-sub {
  margin: 10px 0 0;
  color: var(--muted);
  max-width: 78ch;
  line-height: 1.6;
}

/* FEATURES */
.feature-grid {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-radius: 22px;
}

.feature.reverse .feature-text {
  order: 2;
}

.feature.reverse .feature-media {
  order: 1;
}

.feature-text h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.3px;
}

.feature-text p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.feature-media {
  width: 100%;
}

.media-placeholder {
  height: 220px;
  border-radius: 18px;
  // border: 1px dashed rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  // color: rgba(255, 255, 255, 0.55);
  // background: rgba(255, 255, 255, 0.03);
}

.media-img {
  max-height: 220px;
}

.media-img-widget-custom {
  max-height: 300px;
}

/* STEPS */
.steps {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.step {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
}

.step-num {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(47, 107, 255, 0.22);
  border: 1px solid rgba(47, 107, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 850;
}

.step-body h3 {
  margin: 0;
  font-size: 15px;
}

.step-body p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

/* INSTALL */
.cards-2 {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.card {
  padding: 16px;
  border-radius: 18px;
}

.card h3 {
  margin: 0;
  font-size: 15px;
}

.card ul {
  margin: 10px 0 0 18px;
  color: var(--muted);
  line-height: 1.7;
}

.cta-slab {
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg,
      rgba(47, 107, 255, 0.16),
      rgba(100, 255, 211, 0.08));
}

/* FAQ */
.faq {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  padding: 14px 16px;
  border-radius: 18px;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 750;
  letter-spacing: -0.2px;
}

.faq-item p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

/* FOOTER */
.footer {
  padding: 24px 0 32px;
  text-align: center;
}

.muted {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}

/* RESPONSIVE */
@media (max-width: 980px) {
  .nav-links {
    gap: 10px;
    font-size: 12px;
  }

  .download-groups {
    grid-template-columns: 1fr;
  }
}

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

  .feature.reverse .feature-text {
    order: 1;
  }

  .feature.reverse .feature-media {
    order: 2;
  }

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

@media (max-width: 820px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* HERO download groups - compact rows */
.download-groups.compact {
  width: min(920px, 100%);
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 라벨(PC 프로그램 / iOS 앱) */
.dl-label {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 12px;
  border-radius: 999px;
  // border: 1px solid rgba(255, 255, 255, 0.1);
  // background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

/* cta-row가 가운데정렬 hero에서 보기 좋게 */
.hero-centered .cta-row {
  justify-content: center;
}

/* HERO image */
.hero-media {
  margin: 18px 0 6px;
  width: min(980px, 100%);
  display: flex;
  justify-content: center;
  position: relative;
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;

  /* 너무 과하게 튀지 않게 */
  transform: translateY(0);
  border-radius: 22px;

  /* “떠 있는” 느낌 */
  filter: drop-shadow(0 28px 90px rgba(0, 0, 0, .48));

  /* 유리 UI랑 잘 섞이도록 살짝 부드럽게 */
  image-rendering: auto;
}

/* 이미지 뒤에 은은한 글로우 (배경과 자연스럽게 블렌딩) */
.hero-media::before {
  content: "";
  position: absolute;
  inset: -20px 12%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 50% 50%, rgba(47, 107, 255, .22), transparent 70%),
    radial-gradient(closest-side at 65% 40%, rgba(100, 255, 211, .14), transparent 72%);
  filter: blur(18px);
  opacity: .9;
}

/* hero가 중앙정렬일 때 이미지 포함 간격 보정 */
.hero-centered .hero-center {
  gap: 0;
  /* 기존 유지 */
}

/* 모바일에서 이미지가 꽉 차서 답답해 보일 수 있어서 살짝 여백 */
@media (max-width: 640px) {
  .hero-media {
    margin-top: 16px;
    width: 100%;
  }

  .hero-image {
    border-radius: 18px;
    filter: drop-shadow(0 18px 60px rgba(0, 0, 0, .44));
  }
}


/* HERO split layout (left text / right image) */
.hero-split {
  padding: 64px 0 30px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: 32px;
  align-items: center;
}

/* Left */
.hero-copy {
  text-align: left;
}

.hero-copy .lead {
  max-width: 60ch;
}

/* Right */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image {
  width: min(780px, 100%);
  height: auto;
  display: block;
  border-radius: 22px;
  filter: drop-shadow(0 28px 90px rgba(0, 0, 0, .48));
}

/* Subtle glow behind the image (natural blend) */
.hero-visual::before {
  content: "";
  position: absolute;
  inset: -24px -18px;
  z-index: -1;
  background:
    radial-gradient(closest-side at 35% 45%, rgba(47, 107, 255, .22), transparent 72%),
    radial-gradient(closest-side at 70% 35%, rgba(100, 255, 211, .14), transparent 75%);
  filter: blur(18px);
  opacity: .9;
}

/* Download rows align left in hero */
.hero-copy .cta-row {
  justify-content: flex-start;
}

/* Make the compact download groups feel like "rows" */
.download-groups.compact {
  width: 100%;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Responsive: stack on mobile */
@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-copy .lead {
    margin: 14px auto 0;
  }

  .hero-copy .cta-row {
    justify-content: center;
  }

  .hero-image {
    width: min(500px, 100%);
    border-radius: 18px;
    filter: drop-shadow(0 18px 60px rgba(0, 0, 0, .44));
  }
}