/*
 * SCR-APPQR 모바일 앱 다운로드 랜딩 전용 스타일.
 * design.md §1 토큰만 참조. shared.css 프리미티브(kx-page·kx-card) 위에 얹는다.
 * 정본: WISE(UIWS) 모바일앱 소개 패턴 이식(토큰만 kintex로 치환). 이모지 0·선 SVG만.
 */
@import '../shared.css';

.kx-appqr {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ── ① 히어로 ── */
.kx-appqr__hero {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-6);
  align-items: center;
}
@media (max-width: 860px) {
  .kx-appqr__hero {
    grid-template-columns: 1fr;
  }
}
.kx-appqr__hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.kx-appqr__eyebrow {
  align-self: flex-start;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-700);
  background: var(--color-primary-050);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
}
.kx-appqr__title {
  font-size: var(--fs-h1);
  line-height: 1.2;
  color: var(--color-neutral-900);
  margin: var(--space-1) 0 0;
}
.kx-appqr__subtitle {
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  color: var(--color-neutral-700);
  margin: 0;
}
.kx-appqr__intro {
  font-size: var(--fs-body);
  color: var(--color-neutral-500);
  line-height: 1.6;
  margin: var(--space-1) 0 0;
  max-width: 560px;
}

.kx-appqr__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.kx-appqr__chip {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-neutral-700);
  background: var(--color-neutral-050);
  border: var(--border-card);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}

.kx-appqr__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.kx-appqr__actions .kx-btn {
  text-decoration: none;
}
.kx-appqr__meta {
  font-size: var(--fs-caption);
  color: var(--color-neutral-500);
  margin: var(--space-2) 0 0;
}

/* 히어로 QR 카드 */
.kx-appqr__hero-qr {
  display: flex;
  justify-content: center;
}
.kx-appqr__qr-card {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.kx-appqr__qr {
  background: var(--color-white);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kx-appqr__qr svg {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
}
.kx-appqr__name-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-neutral-700);
}
.kx-appqr__name {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-900);
}
.kx-appqr__qr-hint {
  font-size: var(--fs-caption);
  color: var(--color-neutral-500);
  margin: 0;
}

/* ── 섹션 공통 ── */
.kx-appqr__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.kx-appqr__section-title {
  font-size: var(--fs-h2);
  color: var(--color-neutral-900);
  margin: 0;
}
.kx-appqr__section-sub {
  font-size: var(--fs-body);
  color: var(--color-neutral-500);
  margin: calc(-1 * var(--space-2)) 0 0;
  max-width: 640px;
}

/* ── ② 핵심 기능 카드 ── */
.kx-appqr__features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.kx-appqr__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.kx-appqr__feature-icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-primary-050);
  color: var(--color-primary-700);
}
.kx-appqr__feature-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kx-appqr__feature-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-900);
  margin: 0;
}
.kx-appqr__feature-desc {
  font-size: var(--fs-body);
  color: var(--color-neutral-500);
  line-height: 1.55;
  margin: 0;
}

/* ── ③ 미리보기 목업 ── */
.kx-appqr__previews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}
.kx-appqr__preview {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.kx-appqr__preview-frame {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 9 / 18;
  border: 2px solid var(--color-neutral-200);
  border-radius: 24px;
  background: linear-gradient(
    160deg,
    var(--color-primary-050) 0%,
    var(--color-neutral-050) 100%
  );
  display: grid;
  place-items: center;
  color: var(--color-primary-600);
}
.kx-appqr__preview-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  border: var(--border-card);
}
.kx-appqr__preview-cap {
  font-size: var(--fs-caption);
  color: var(--color-neutral-500);
  text-align: center;
}

/* ── ④⑤ 설치 안내 + 요구사항/배지 ── */
.kx-appqr__install {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 720px) {
  .kx-appqr__install {
    grid-template-columns: 1fr;
  }
}
.kx-appqr__install-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.kx-appqr__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.kx-appqr__step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}
.kx-appqr__step-num {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-primary-050);
  color: var(--color-primary-700);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}
.kx-appqr__step-text {
  font-size: var(--fs-body);
  color: var(--color-neutral-700);
  line-height: 1.55;
}

.kx-appqr__reqs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.kx-appqr__req {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body);
  color: var(--color-neutral-700);
}
.kx-appqr__req-icon {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-success-050, var(--color-primary-050));
  color: var(--color-success-600, var(--color-primary-700));
}

.kx-appqr__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.kx-appqr__badge {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  min-width: 200px;
}
.kx-appqr__badge--android {
  background: var(--color-neutral-900);
  border-color: var(--color-neutral-900);
  color: var(--color-white);
}
.kx-appqr__badge--android .kx-appqr__badge-icon,
.kx-appqr__badge--android .kx-appqr__badge-sub {
  color: var(--color-neutral-200);
}
.kx-appqr__badge--ios {
  background: var(--color-white);
  color: var(--color-neutral-500);
}
.kx-appqr__badge-icon {
  flex: none;
  display: grid;
  place-items: center;
}
.kx-appqr__badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.kx-appqr__badge-sub {
  font-size: var(--fs-caption);
  color: var(--color-neutral-500);
}
.kx-appqr__badge-main {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
}
.kx-appqr__ios {
  font-size: var(--fs-caption);
  color: var(--color-neutral-500);
  margin: var(--space-2) 0 0;
}
