/* 랜딩·로그인·진위 확인 — DJI 쇼룸: 사진(=제품 화면) 타일, 가운데 섹션 제목, 옅은 회색 띠, 숯색 푸터 */
.grow { flex: 1; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.center { text-align: center; }
.announce { background: var(--announce); height: 40px; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 14px; letter-spacing: -0.28px; padding: 0 16px; }
.announce .text-link { font-size: 14px; }
.nav { position: sticky; top: 0; z-index: 50; height: 64px; background: var(--canvas); border-bottom: 1px solid transparent; transition: background-color .2s, border-color .2s; }
.nav-in { max-width: 1440px; margin: 0 auto; height: 100%; display: flex; align-items: center; gap: 28px; padding: 0 32px; }
.nav-links { display: flex; gap: 26px; font-size: 14px; color: var(--nav-ink, #303233); }
.nav-links a:hover { color: var(--primary); }
.nav-login { font-size: 14px; }
.nav-cta { height: 32px; }
.nav.overlay { position: fixed; left: 0; right: 0; top: 40px; background: transparent; color: #fff; }
.nav.overlay .brand { color: #fff; }
.nav.overlay .nav-links { color: #fff; }
.nav.overlay.solid { position: fixed; top: 0; background: rgba(255, 255, 255, .97); color: var(--ink); border-bottom-color: var(--divider); backdrop-filter: blur(10px); }
.nav.overlay.solid .brand, .nav.overlay.solid .nav-links { color: var(--ink); }
.brand.inv { color: #fff; }

/* 첫 화면 슬라이드 — 어두운 배경 위 제품 화면 */
.hero { position: relative; overflow: hidden; background: #0d1117; color: #fff; }
.hero-track { display: flex; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.slide { flex: 0 0 100%; min-height: min(860px, 100svh); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 40px; padding: 150px max(32px, calc((100vw - 1320px) / 2)) 90px; }
.slide.s1 { background: radial-gradient(120% 90% at 85% 40%, #1d3b66 0%, #0d1117 60%); }
.slide.s2 { background: radial-gradient(120% 90% at 80% 50%, #3a2a1f 0%, #110d0b 62%); }
.slide.s3 { background: radial-gradient(110% 90% at 80% 50%, #1e3a2f 0%, #0b120f 62%); }
.slide-copy { display: flex; flex-direction: column; gap: 18px; }
.slide-copy h1, .slide-copy h2 { color: #fff; }
.slide-sub { color: rgba(255, 255, 255, .78); font-size: 17px; line-height: 1.65; max-width: 480px; }
.eyebrow.light { color: #ffb37a; }
.slide-shot img { width: 100%; height: auto; box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
.slide-shot.phone { display: flex; justify-content: center; }
.slide-shot.phone img { width: min(340px, 80%); border-radius: 28px; border: 8px solid #1c1c1e; }
.hero-dots { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; gap: 8px; }
.hero-dots button { width: 28px; height: 3px; border: none; padding: 0; background: rgba(255, 255, 255, .35); border-radius: 2px; }
.hero-dots button[aria-selected="true"] { background: #fff; }

/* 제품 타일 — 사각, 흰 홈 간격 */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px; background: var(--canvas); }
.tile { background: var(--fog); min-height: 640px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 52px 32px 0; overflow: hidden; gap: 6px; }
.tile-eyebrow { color: var(--ink-3); font-size: 14px; }
.tile-name { font-size: 44px; font-weight: 300; letter-spacing: -1.6px; line-height: 1.1; margin: 4px 0; font-family: 'Open Sans', sans-serif; }
.tile-tag { font-size: 17px; color: var(--ink); margin-bottom: 4px; }
.tile picture { margin-top: auto; width: 100%; display: flex; justify-content: center; padding-top: 28px; }
.tile img { width: min(560px, 96%); height: auto; box-shadow: 0 12px 40px rgba(0, 0, 0, .12); transition: transform .5s; }
.tile:hover img { transform: translateY(-6px); }

.sec { padding: 104px max(16px, calc((100vw - 1200px) / 2)); }
.sec.soft { background: var(--canvas-soft); }
.sec > .eyebrow { margin-bottom: 10px; }
.sec-lead { max-width: 640px; margin: 16px auto 0; line-height: 1.7; }
.sec-lead.left { margin-left: 0; }
.tier-eyebrow { color: var(--tier-orange); font-size: 12px; letter-spacing: -0.24px; }

/* 비교 — 스펙 열 */
.cmp-wrap { overflow-x: auto; margin-top: 52px; scrollbar-width: thin; }
.cmp { display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); border-top: 1px solid var(--divider); min-width: 960px; }
.cmp-col { padding: 28px 22px 32px; border-right: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 6px; }
.cmp-col:last-child { border-right: none; }
.cmp-col.us { background: var(--canvas-soft); box-shadow: inset 0 3px 0 var(--primary); }
.cmp-name { font-size: 24px; font-weight: 400; letter-spacing: -0.72px; }
.cmp-col dl { margin: 18px 0 8px; }
.cmp-col dt { font-size: 12px; color: var(--steel); margin-top: 16px; }
.cmp-col dd { margin: 2px 0 0; font-size: 32px; letter-spacing: -1px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cmp-col dd.small { font-size: 18px; letter-spacing: -0.4px; line-height: 1.6; color: var(--ink-2); }
.cmp-col.us dd { color: var(--primary); }
.cmp-note { font-size: 12.5px; color: var(--ink-3); margin-top: auto; padding-top: 10px; }
.cmp-col .btn { margin-top: 14px; align-self: flex-start; }
.cmp-src { max-width: 820px; margin: 22px auto 0; line-height: 1.7; }

/* 계산기 */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--divider); border: 1px solid var(--divider); margin-top: 44px; }
.calc-in, .calc-out { background: #fff; padding: 32px; display: flex; flex-direction: column; gap: 22px; }
.range-row { display: flex; align-items: center; gap: 16px; }
.range-row input { flex: 1; accent-color: var(--primary); height: 24px; }
.range-row b { font-size: 28px; font-weight: 400; letter-spacing: -0.8px; min-width: 70px; text-align: right; }
.co { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); gap: 10px; }
.co b { font-size: 30px; font-weight: 400; letter-spacing: -0.9px; font-variant-numeric: tabular-nums; }
.co.us b { color: var(--primary); }
.calc-save { font-size: 16px; line-height: 1.6; }
.calc-save b { color: var(--primary); font-weight: 600; }

/* AI — 검은 미디어 타일 */
.media-tile { background: var(--media-black); color: #fff; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; padding: 64px; align-items: center; }
.media-tile h2 { color: #fff; line-height: 1.25; }
.ai-flow { list-style: none; counter-reset: s; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 18px; }
.ai-flow li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 2px 12px; }
.ai-flow li::before { content: counter(s); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.ai-flow b { font-weight: 600; }
.ai-flow span { color: rgba(255, 255, 255, .7); font-size: 14.5px; line-height: 1.6; }
.mt-note { color: rgba(255, 255, 255, .5); margin-top: 24px; line-height: 1.7; }
.mt-shot img { width: 100%; height: auto; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.split-shot img { width: 100%; height: auto; background: var(--fog); }
.checks { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 10px; }
.checks li { padding-left: 26px; position: relative; font-size: 15.5px; }
.checks li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg); }

.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--divider); border: 1px solid var(--divider); margin-top: 48px; }
.feat { background: #fff; padding: 28px 24px 30px; display: flex; flex-direction: column; gap: 8px; }
.feat .t-sub { font-size: 18px; letter-spacing: -0.4px; }
.feat .muted { line-height: 1.65; }

.how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.how-step { display: flex; flex-direction: column; gap: 10px; position: relative; }
.how-step picture { background: var(--fog); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.how-step img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.how-no { position: absolute; left: 12px; top: 12px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }

.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 44px; }
.tier { display: flex; flex-direction: column; gap: 6px; }
.tier-price { font-size: 40px; letter-spacing: -1.2px; line-height: 1.2; margin: 8px 0 4px; }
.topup-band { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; margin-top: 24px; padding: 24px 28px; background: #fff; border: 1px solid var(--divider); }
.topup-band div { display: flex; flex-direction: column; gap: 2px; }
.topup-band b { font-size: 20px; font-weight: 600; letter-spacing: -0.4px; }
.topup-band em { font-style: normal; color: var(--badge-orange); font-size: 14px; }
.topup-band .btn { margin-left: auto; }

.link-band { background: var(--canvas-soft); padding: 64px max(16px, calc((100vw - 1200px) / 2)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.link-band a { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.link-band h3 { font-size: 20px; font-weight: 500; letter-spacing: 0; }
.link-band svg { color: var(--ink); }

.faq { max-width: 860px; margin: 40px auto 0; }
.faq-row { border-bottom: 1px solid var(--divider); }
.faq-row summary { list-style: none; cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 16px; display: flex; justify-content: space-between; gap: 16px; }
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary::after { content: '+'; font-weight: 400; font-size: 22px; line-height: 1; color: var(--ink-3); }
.faq-row[open] summary::after { content: '−'; }
.faq-row p { padding: 0 0 18px; line-height: 1.75; font-size: 15px; }

.final-cta { background: #0d1117; color: #fff; text-align: center; padding: 96px 16px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.final-cta h2 { color: #fff; }
.final-cta p { color: rgba(255, 255, 255, .7); }

/* 푸터 */
.footer { background: var(--footer); color: var(--footer-link); padding: 48px 16px 32px; }
.footer-in { max-width: 1200px; margin: 0 auto; }
.f-top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid var(--footer-divider); }
.f-top p { flex: 1; font-size: 14px; }
.f-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--footer-divider); }
.f-cols h4 { color: #fff; font-size: 12px; font-weight: 500; line-height: 2; margin-bottom: 6px; letter-spacing: 0; }
.f-cols a { display: block; font-size: 13px; line-height: 2.1; }
.f-cols a:hover { color: #fff; }
.f-legal { font-size: 12px; padding-top: 20px; }

/* 로그인 */
.login-body { background: var(--canvas-soft); }
.login-wrap { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 28px 16px 60px; }
.login-wrap > .brand { align-self: flex-start; margin-bottom: 10vh; }
.login-card { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--divider); padding: 40px 34px; }
.btn.google { background: #fff; color: var(--ink); border-color: var(--card-border); gap: 10px; }
.btn.google:hover { background: var(--fog); }
.or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 13px; margin: 22px 0 14px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--divider); }
.login-card form .input { flex: 1; min-width: 0; }
.login-card form { flex-wrap: nowrap; }
.login-msg { background: #fff1f0; color: #a8071a; padding: 10px 12px; font-size: 14px; margin-bottom: 14px; }

/* 진위 확인·문서 */
.verify, .legal { max-width: 960px; margin: 0 auto; padding: 72px 16px 96px; }
.verify h1 { margin-top: 8px; }
.v-lead { margin-top: 16px; max-width: 640px; line-height: 1.7; }
.v-result { display: flex; gap: 18px; padding: 26px; margin-top: 32px; border: 1px solid var(--divider); }
.v-result.ok { border-color: #b7e1c1; background: #f4fbf6; }
.v-result.bad { border-color: #f3c3c6; background: #fff7f7; }
.v-ic { width: 44px; height: 44px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; background: var(--ok); color: #fff; }
.v-result.bad .v-ic { background: var(--error); }
.v-dl { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; margin: 16px 0 0; font-size: 14.5px; }
.v-dl dt { color: var(--ink-3); }
.v-dl dd { margin: 0; word-break: break-all; }
.v-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.v-box { border: 1px solid var(--divider); padding: 24px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.v-drop { width: 100%; border: 1.5px dashed var(--card-border); padding: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.v-drop input { font-size: 14px; max-width: 100%; }
.legal h2 { font-size: 18px; margin: 30px 0 8px; letter-spacing: -0.4px; }
.legal p { line-height: 1.8; color: var(--ink-2); }

@media (max-width: 1024px) {
  .nav-links { display: none; }
  .slide { grid-template-columns: 1fr; padding-top: 128px; gap: 28px; min-height: auto; padding-bottom: 80px; }
  .tile { min-height: 520px; }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .how { grid-template-columns: repeat(2, 1fr); }
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .media-tile { grid-template-columns: 1fr; padding: 44px 32px; }
}
@media (max-width: 768px) {
  .announce { font-size: 12.5px; gap: 8px; height: auto; min-height: 40px; padding: 8px 12px; text-align: center; flex-wrap: wrap; }
  .announce .text-link { font-size: 12.5px; }
  .nav-in { padding: 0 16px; gap: 12px; }
  .nav-login { display: none; }
  .nav.overlay { top: 56px; }
  .slide { padding: 120px 16px 72px; }
  .slide-sub { font-size: 15.5px; }
  .slide-sub br { display: none; }
  .tiles { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
  .tile { min-height: 0; padding: 40px 16px 0; }
  .tile-name { font-size: 34px; }
  .sec { padding: 72px 16px; }
  .cmp-wrap { margin: 36px -16px 0; padding: 0 16px; }
  .cmp { grid-template-columns: repeat(5, 200px); min-width: 0; }
  .cmp-col dd { font-size: 26px; }
  .calc { grid-template-columns: 1fr; }
  .calc-in, .calc-out { padding: 22px 18px; }
  .co b { font-size: 24px; }
  .media-tile { padding: 36px 20px; margin: 0 -16px; gap: 28px; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .feat-grid { grid-template-columns: 1fr; }
  .how { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tiers { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tier-price { font-size: 28px; }
  .option-card.tier { padding: 18px; }
  .option-card.tier.active { padding: 17px; }
  .topup-band { gap: 18px; padding: 20px; }
  .topup-band .btn { margin-left: 0; width: 100%; }
  .link-band { grid-template-columns: 1fr; gap: 36px; padding: 52px 16px; }
  .f-cols { grid-template-columns: 1fr 1fr; }
  .f-top p { flex-basis: 100%; order: 3; }
  .login-card { padding: 30px 20px; }
  .login-wrap > .brand { margin-bottom: 6vh; }
  .v-forms { grid-template-columns: 1fr; }
  .v-result { flex-direction: column; padding: 20px; }
  .v-dl { grid-template-columns: 90px 1fr; }
  .verify, .legal { padding: 48px 16px 72px; }
}
@media (max-width: 456px) {
  .how { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
}