/* ==========================================================================
   대문(랜딩) 전용 스타일. index.php 에서만 읽는다.
   여기 있는 규칙을 app.css 로 옮기지 않는다. 전 페이지가 무거워지고
   로그인 뒤 화면과 톤이 섞인다.

   모바일 우선. 데스크톱 규칙은 @media (min-width:769px) 안에만 둔다.
   ========================================================================== */

.land {
  --land-ink:   #0b1220;                 /* 히어로처럼 어두운 면 위의 글자 */
  --land-r:     18px;
  margin: -16px -16px 0;                 /* .wrap 의 좌우 여백을 히어로가 먹는다 */
}

/* ---------- 히어로 ---------- */
.land-hero {
  position: relative;
  overflow: hidden;
  padding: 46px 20px 44px;
  background:
    radial-gradient(120% 90% at 15% 0%,   #2f6ff5 0%, transparent 55%),
    radial-gradient(100% 80% at 100% 10%, #6d3ff0 0%, transparent 60%),
    linear-gradient(160deg, #14235c 0%, #0b1220 100%);
  color: #fff;
  text-align: center;
}

/* 배경에서 천천히 도는 빛무리. 장식이라 스크린리더에서 뺀다 */
.land-hero::before,
.land-hero::after {
  content: "";
  position: absolute; z-index: 0;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .5;
  pointer-events: none;
}
.land-hero::before {
  width: 320px; height: 320px; top: -120px; left: -90px;
  background: #3b82f6;
  animation: land-float 14s ease-in-out infinite;
}
.land-hero::after {
  width: 280px; height: 280px; right: -100px; bottom: -110px;
  background: #a855f7;
  animation: land-float 18s ease-in-out infinite reverse;
}
@keyframes land-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(24px, 26px, 0) scale(1.12); }
}

.land-hero > * { position: relative; z-index: 1; }

.land-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 16px; padding: 6px 13px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em;
  color: #dce7ff;
}
.land-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74,222,128,.7);
  animation: land-pulse 2.4s ease-out infinite;
}
@keyframes land-pulse {
  to { box-shadow: 0 0 0 9px rgba(74,222,128,0); }
}

.land-hero h1 {
  font-size: 30px; line-height: 1.28; letter-spacing: -0.035em;
  color: #fff;
}
.land-hero h1 .g {
  background: linear-gradient(100deg, #7dd3fc 0%, #a78bfa 55%, #f0abfc 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.land-lead {
  margin: 14px auto 0; max-width: 30em;
  font-size: 15.5px; line-height: 1.65;
  color: #c5d2ea;
}

.land-cta {
  display: flex; flex-direction: column; gap: 9px;
  margin: 24px auto 0; max-width: 340px;
}
.land-cta .btn { width: 100%; }
/* 흰 배경 버튼은 어두운 히어로 위에서 제일 눈에 띈다 */
.land-cta .btn-hero {
  background: #fff; border-color: #fff; color: #10204a; font-weight: 800;
  box-shadow: 0 10px 24px rgba(4,10,30,.35);
}
.land-cta .btn-hero:hover { background: #eef4ff; border-color: #eef4ff; }
.land-cta .btn-hero2 {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); color: #fff;
}
.land-cta .btn-hero2:hover { background: rgba(255,255,255,.2); }

.land-note { margin: 14px 0 0; font-size: 12.5px; color: #97a8c8; }

/* ---------- 히어로 안의 스캔 목업 ---------- */
.land-mock {
  width: 232px; margin: 30px auto 0;
  border-radius: 22px; padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 22px 48px rgba(3,8,26,.5);
}
.land-mock-cam {
  position: relative; overflow: hidden;
  height: 150px; border-radius: 14px;
  background: #0d1730;
  display: flex; align-items: center; justify-content: center;
}
.land-mock-cam svg { width: 70px; height: 70px; color: #7ea6ff; opacity: .95; }
/* 스캔 라인. 위아래로 훑는다 */
.land-mock-cam::after {
  content: "";
  position: absolute; left: 8%; right: 8%; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #4ade80, transparent);
  box-shadow: 0 0 12px rgba(74,222,128,.9);
  animation: land-scan 2.6s ease-in-out infinite;
}
@keyframes land-scan {
  0%, 100% { top: 12%; }
  50%      { top: 84%; }
}
.land-mock-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding: 9px 11px;
  border-radius: 10px; background: rgba(255,255,255,.12);
  font-size: 12.5px; color: #e8eeff;
}
.land-mock-row b { font-size: 13px; }
.land-mock-tag {
  padding: 2px 8px; border-radius: 999px;
  background: rgba(74,222,128,.2); color: #86efac; font-weight: 800; font-size: 11.5px;
}

/* ---------- 공통 섹션 ---------- */
.land-sec { padding: 40px 16px 4px; }
.land-sec-hd { text-align: center; margin-bottom: 22px; }
.land-sec-hd .kicker {
  display: block; margin-bottom: 8px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand);
}
.land-sec-hd h2 { font-size: 21px; letter-spacing: -0.03em; }
.land-sec-hd p { margin: 9px auto 0; max-width: 32em; color: var(--text-2); font-size: 14.5px; }

/* ---------- 3단계 흐름 ---------- */
.land-steps { display: grid; gap: 10px; counter-reset: land-step; }
.land-step {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 16px 16px 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--land-r); box-shadow: var(--shadow);
}
.land-step .num {
  flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--brand), #7c3aed);
  color: #fff; font-weight: 800; font-size: 14px;
}
.land-step h3 { font-size: 15px; margin-bottom: 3px; }
.land-step p { margin: 0; color: var(--text-2); font-size: 13.5px; }

/* ---------- 기능 카드 ---------- */
.land-grid { display: grid; gap: 10px; }
.land-feat {
  padding: 18px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--land-r); box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.land-feat:hover {
  transform: translateY(-3px);
  border-color: #c9d8f5;
  box-shadow: 0 10px 26px rgba(16,24,40,.1);
}
.land-feat .ic {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: 12px;
  border-radius: 11px;
  background: linear-gradient(140deg, #eaf1ff, #e8e4ff);
  color: var(--brand-dk);
}
.land-feat .ic svg { width: 21px; height: 21px; }
.land-feat h3 { font-size: 15px; margin-bottom: 5px; }
.land-feat p { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.6; }

/* ---------- 요금 ---------- */
.land-plans { display: grid; gap: 12px; }
.land-plan {
  position: relative;
  padding: 20px 18px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--land-r); box-shadow: var(--shadow);
}
.land-plan.hot {
  border-color: transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(140deg, var(--brand), #7c3aed) border-box;
  border: 2px solid transparent;
  box-shadow: 0 12px 30px rgba(26,86,219,.16);
}
.land-plan .tag {
  position: absolute; top: -11px; right: 16px;
  padding: 3px 11px; border-radius: 999px;
  background: linear-gradient(140deg, var(--brand), #7c3aed);
  color: #fff; font-size: 11.5px; font-weight: 800;
}
.land-plan h3 { font-size: 16px; }
.land-plan .price {
  margin: 6px 0 2px;
  font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--brand-dk);
}
.land-plan .price small { font-size: 13px; font-weight: 700; color: var(--muted); }
.land-plan .cond { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.land-plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.land-plan li {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 13.5px; color: var(--text-2);
}
.land-plan li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ok); }

/* ---------- 이용권 등급 ----------
   무료·사업자 인증(.land-plans.p2) 아래에 등급 카드를 따로 깐다.
   등급 수는 운영자가 바꿀 수 있으므로 열 수를 고정하지 않고 auto-fit 으로 흘린다 */
.land-tier-hd { margin: 30px 0 14px; text-align: center; }
.land-tier-hd h3 {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 19px; letter-spacing: -0.02em;
}
.land-tier-hd p { margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.65; }
.tier-badge {
  padding: 3px 10px; border-radius: 999px;
  background: var(--brand-sf); color: var(--brand-dk);
  font-size: 11.5px; font-weight: 800;
}

.land-tiers { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.land-tier {
  position: relative;
  padding: 16px 15px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--land-r); box-shadow: var(--shadow);
}
.land-tier.hot { border-color: #c9d8f5; box-shadow: 0 10px 26px rgba(26,86,219,.12); }
.land-tier .tag {
  position: absolute; top: -10px; right: 14px;
  padding: 3px 10px; border-radius: 999px;
  background: linear-gradient(140deg, var(--brand), #7c3aed);
  color: #fff; font-size: 11px; font-weight: 800;
}
.land-tier h4 { margin: 0; font-size: 14.5px; }
/* 정가 줄. 판매가(.price) 바로 위에 작게 둔다 */
.land-tier .tier-was { margin: 5px 0 0; font-size: 12.5px; }
.land-tier .tier-was + .price { margin-top: 1px; }
.land-tier .price {
  margin: 4px 0 10px;
  font-size: 18px; font-weight: 800; letter-spacing: -0.03em; color: var(--brand-dk);
}
.land-tier .price small { margin-left: 3px; font-size: 12px; font-weight: 700; color: var(--muted); }
/* 장기 결제 월 환산 - 대표 금액이 아니라 보조 정보라 작게.
   판매가 바로 아래 붙여야 한 덩어리로 읽힌다(사이가 벌어지면 별개 정보로 보인다) */
.land-tier .price + .tier-per { margin: -7px 0 10px; font-size: 12px; font-weight: 700; color: var(--brand-dk); }
.land-tier ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.land-tier li {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12.8px; color: var(--text-2);
}
.land-tier li svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--ok); }
/* 상품 부가 설명(관리자 memo). 엔터프라이즈의 "전용 서버" 안내가 여기로 온다 */
.land-tier .tier-memo {
  margin: 10px 0 0; padding-top: 9px;
  border-top: 1px dashed var(--line);
  font-size: 12px; color: var(--text-2); line-height: 1.6;
}
.tier-promo {
  margin: 10px 0 0; padding-top: 9px;
  border-top: 1px dashed var(--line);
  font-size: 12px; font-weight: 700; color: var(--brand-dk);
}
.land-tier-note {
  margin: 14px auto 0; max-width: 760px;
  font-size: 12.5px; color: var(--muted); line-height: 1.7; text-align: center;
}

/* ---------- FAQ ---------- */
.land-faq { display: grid; gap: 8px; }
.land-faq details {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow);
  overflow: hidden;
}
.land-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px;
  font-weight: 700; font-size: 14.5px; cursor: pointer;
  list-style: none;
}
.land-faq summary::-webkit-details-marker { display: none; }
.land-faq summary svg {
  width: 18px; height: 18px; flex: none; color: var(--muted);
  transition: transform .18s ease;
}
.land-faq details[open] summary svg { transform: rotate(180deg); }
.land-faq .a {
  margin: 0; padding: 0 16px 15px;
  color: var(--text-2); font-size: 13.5px; line-height: 1.65;
}

/* ---------- 마무리 CTA ---------- */
.land-end {
  margin: 40px 0 0; padding: 34px 20px 36px;
  text-align: center; color: #fff;
  background:
    radial-gradient(100% 100% at 0% 0%, #3b6df5 0%, transparent 60%),
    linear-gradient(140deg, #17255e, #0b1220);
}
.land-end h2 { font-size: 21px; color: #fff; letter-spacing: -0.03em; }
.land-end p { margin: 10px auto 0; max-width: 28em; color: #c5d2ea; font-size: 14.5px; }
.land-end .land-cta { margin-top: 20px; }

/* ---------- 스크롤 등장 ----------
   기본은 그냥 보이게 두고, 지원하는 브라우저에서만 살짝 올라오게 만든다.
   (자바스크립트 없이 처리한다. 미지원 브라우저에서 내용이 사라지면 안 된다) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .land-step, .land-feat, .land-plan, .land-tier, .land-faq details {
      animation: land-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
  @keyframes land-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
}
/* 사용자가 OS·브라우저에서 **동작 줄이기**를 켰으면 움직임을 멈춘다.
   (윈도우: 설정 > 접근성 > 시각 효과 > 애니메이션 효과 / macOS: 손쉬운 사용 > 디스플레이 > 동작 줄이기)
   ★멈추더라도 **깨져 보이면 안 된다**★ 스캔선은 `top:0` 이 기본값이라 그냥 끄면
   카메라 맨 위 모서리에 선 하나가 붙어 잘린 것처럼 보인다 → 가운데에 세워 둔다 */
@media (prefers-reduced-motion: reduce) {
  .land-hero::before, .land-hero::after, .land-eyebrow .dot {
    animation: none;
  }
  .land-mock-cam::after {
    animation: none;
    top: 48%;
    opacity: .85;
  }
}

/* ==========================================================================
   데스크톱
   ========================================================================== */
@media (min-width: 769px) {
  .land { margin: -24px 0 0; }

  .land-hero {
    padding: 74px 40px 70px;
    border-radius: 0 0 32px 32px;
  }
  .land-hero::before { width: 520px; height: 520px; top: -180px; left: -140px; }
  .land-hero::after  { width: 460px; height: 460px; right: -160px; bottom: -180px; }
  .land-hero h1 { font-size: 46px; line-height: 1.2; }
  .land-lead { font-size: 17px; }
  .land-cta {
    flex-direction: row; justify-content: center; max-width: none;
  }
  .land-cta .btn { width: auto; min-width: 178px; }
  .land-mock { width: 300px; margin-top: 38px; }
  .land-mock-cam { height: 196px; }

  .land-sec { padding: 66px 0 6px; }
  .land-sec-hd { margin-bottom: 30px; }
  .land-sec-hd h2 { font-size: 30px; }
  .land-sec-hd p { font-size: 15.5px; }

  .land-steps { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .land-grid  { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .land-plans { grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
  /* 무료·사업자 인증 두 장만 있을 때. 3열 자리에 두 장을 흘리면 오른쪽이 휑하다 */
  .land-plans.p2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; }
  .land-plan.hot { transform: translateY(-6px); }

  .land-tiers { gap: 14px; }
  .land-tier-hd { margin: 40px 0 18px; }
  .land-tier-hd h3 { font-size: 22px; }

  .land-faq { max-width: 760px; margin: 0 auto; }

  .land-end {
    margin-top: 66px; padding: 60px 40px 62px;
    border-radius: 32px;
  }
  .land-end h2 { font-size: 30px; }
}