/* ============================================================
   LossUp 홈페이지 전용 스타일 (index.html)
   styles.css 뒤에 로드됩니다 — 공용 토큰(:root 색상/폰트/radius)은
   styles.css를 그대로 쓰고, 여기는 홈페이지 섹션 컴포넌트만 다룹니다.

   구조:
   1. Section 리듬 (구분선 + 옅은 명암 교차)
   2. Header / Badge
   3. Hero
   4. Problem
   5. How it works + 실제 화면 쇼케이스
   6. Project
   7. Apply
   8. 반응형(모바일)
   ============================================================ */

/* ── 1. Section 리듬 ───────────────────────────────────────── */
/* 배경색 블록 대신 얇은 구분선 + 거의-화이트 톤 교차로만 구간을 나눕니다. */

.hero {
  background-image: none !important;
  background-color: #ffffff;
}

#problem,
#how,
#project,
.apply-section {
  border-top: 1px solid var(--line);
}
#problem,
#how,
#project {
  padding-top: 88px;
  padding-bottom: 88px;
}
#problem { background: #ffffff; }
#how     { background: #FAFAF9; }
#project { background: #ffffff; }
.apply-section { background: #FAFAF9 !important; }

/* ── 2. Badge (모두의창업 등 작은 신뢰 배지) ─────────────────── */

.lu-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lu-badge:hover,
.lu-badge:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 4px 14px rgba(184, 142, 79, .18);
}
.lu-badge img { width: 18px; height: 18px; object-fit: contain; }
.lu-badge span { font-size: 12px; font-weight: 700; color: var(--muted); }

.lu-example-tag {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gold);
  background: var(--soft);
  border-radius: 999px;
  padding: 2px 8px;
}

/* ── 3. Hero ──────────────────────────────────────────────── */

.lu-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.lu-hero-copy { text-align: left; }
.lu-hero-copy .hero-actions { justify-content: flex-start; }
.lu-hero-visual { position: relative; }
.lu-hero-visual .lu-shot-frame { max-width: 560px; margin-inline: auto; }

/* ── 4. Problem (텍스트 중심, 이미지 없음) ───────────────────── */

.lu-problem-text { color: var(--muted); font-size: 16px; line-height: 1.75; }

#problem h2 { font-size: 34px; letter-spacing: -1px; margin: 8px 0 16px; }
#how h2,
#project h2 { font-size: 32px; letter-spacing: -1px; }
#how .section-head { margin-bottom: 0; }
#project h2 { margin: 8px 0 14px; }

/* ── 5. 실제 화면 스크린샷 프레임 + 쇼케이스 ─────────────────── */

.lu-shot-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(23, 58, 44, .10);
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.lu-showcase-item:hover .lu-shot-frame {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(23, 58, 44, .14);
}
.lu-shot-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #F7F8F7;
  border-bottom: 1px solid var(--line);
}
.lu-shot-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.lu-shot-bar b {
  margin-left: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}
.lu-shot-frame img { display: block; width: 100%; height: auto; }
.lu-shot-caption {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.lu-showcase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.lu-showcase-item { flex: 1 1 420px; max-width: 460px; }
.lu-showcase-item figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 14.5px;
  color: var(--text);
  font-weight: 600;
}
.lu-showcase-item figcaption b {
  display: block;
  color: var(--green);
  font-size: 13px;
  letter-spacing: .02em;
  margin-bottom: 3px;
}
.lu-flow-arrow { font-size: 20px; color: var(--line); }
.lu-showcase-tag { display: block; margin-top: 32px; }

/* ── 6. Project ───────────────────────────────────────────── */

.lu-project-inner { max-width: 640px; }
.lu-project-badge { height: 34px; margin-top: 26px; opacity: .85; }

/* ── 공용: 버튼 포커스 표시(키보드 접근성) ────────────────────── */

.button:focus-visible,
.nav-cta:focus-visible,
.lu-badge:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ── 8. 반응형 ────────────────────────────────────────────── */

@media (max-width: 860px) {
  .lu-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .lu-hero-copy { text-align: center; }
  .lu-hero-copy .hero-actions { justify-content: center; }
  .lu-badge { margin-inline: auto; }

  .lu-showcase { flex-direction: column; }
  .lu-showcase .lu-flow-arrow { transform: rotate(90deg); }
  .lu-showcase-item { max-width: 100%; width: 100%; }

  #problem, #how, #project { padding-top: 64px; padding-bottom: 64px; }
}