/* LogicLab Web Landing — responsive layout
 * Bands: phone ≤640px / pad 641–1024px / monitor ≥1025px (monitor = base design).
 * Static layout/typography lives here as classes; dynamic values (theme colors,
 * per-card tones, hover handlers) stay inline in app.jsx.
 */

:root {
  /* fluid spacing */
  --lw-section-y: clamp(64px, 10vw, 120px);
  --lw-gutter:    clamp(16px, 4vw, 32px);
  --lw-gap-xl:    clamp(28px, 5vw, 80px);   /* Overview image↔text */
  --lw-gap-lg:    clamp(24px, 4.5vw, 64px); /* Hero grid */
  --lw-gap-md:    clamp(16px, 2.5vw, 32px);

  /* fluid type */
  --lw-fs-body:       clamp(15px, 1.05vw + 11px, 19px);
  --lw-fs-card-title: clamp(19px, 1.4vw + 8px, 26px);
}

body { overflow-x: hidden; }
img { max-width: 100%; }

/* ── Containers / sections ─────────────────────────── */
.lw-container {
  width: 100%;
  max-width: max(1320px, 68.75vw);
  margin: 0 auto;
  padding: 0 var(--lw-gutter);
}

.lw-section { padding: var(--lw-section-y) 0; }
.lw-section--hero { padding: clamp(96px, 13vw, 140px) 0 clamp(48px, 8vw, 80px); }
.lw-section--portal { padding: clamp(110px, 15vw, 150px) 0 clamp(56px, 9vw, 90px); }

/* ── Shared typography ─────────────────────────────── */
.lw-h2 {
  margin-top: 18px;
  margin-bottom: 0;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', system-ui, sans-serif;
  font-size: clamp(26px, 3.2vw, 46px);
  line-height: 1.25;
  color: #1F2A44;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.lw-p {
  margin-top: 22px;
  font-size: clamp(15px, 1vw + 10px, 17px);
  line-height: 1.7;
  color: #1F2A44;
  font-family: 'Pretendard', system-ui, sans-serif;
  opacity: 0.9;
}
.lw-hero-h1 {
  margin-top: 22px;
  margin-bottom: 0;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', system-ui, sans-serif;
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1.2;
  color: #1F2A44;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.lw-hero-p {
  margin-top: clamp(18px, 2.4vw, 30px);
  font-size: var(--lw-fs-body);
  line-height: 1.65;
  color: #1F2A44;
  max-width: 540px;
  font-family: 'Pretendard', system-ui, sans-serif;
}
.lw-cta-h2 {
  margin-top: 22px;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', system-ui, sans-serif;
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff;
}
.lw-card-title {
  font-size: var(--lw-fs-card-title);
  font-weight: 900;
  line-height: 1.35;
  font-family: 'Pretendard', system-ui, sans-serif;
}

/* ── Grids (monitor defaults = current design) ─────── */
.lw-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--lw-gap-lg);
  align-items: center;
}
.lw-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lw-gap-xl);
  align-items: center;
}
.lw-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.lw-grid-3--loose { gap: clamp(18px, 2.7vw, 32px); }
.lw-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.7vw, 20px);
}
.lw-fit-grid {
  margin-top: clamp(56px, 8vw, 96px);
  padding: clamp(24px, 4vw, 40px) clamp(20px, 3.6vw, 36px);
  border-radius: 28px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
}
.lw-fit-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.lw-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 3.5vw, 40px);
  font-family: 'Pretendard', system-ui, sans-serif;
}

/* Forms (modal / portal): 2 columns → phone 1 column */
.lw-form-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.lw-form-2col--wide { grid-template-columns: 1.4fr 1fr; }

/* AuthPortal shell: sidebar + main */
.lw-portal-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  align-items: start;
}

/* ── Media / decorations ───────────────────────────── */
.lw-media { position: relative; width: 100%; }

/* Hero 밑줄: 기본(monitor) 물결, 폰/패드 직선 */
.lw-underline-straight { display: none; }

/* HowTo 스텝 설명: 온점 뒤 문장을 PC 포함 모든 화면에서 새 줄로.
   폭 제한은 head 문장이 좁아 재-wrap되지 않게 넉넉히(≈30자). */
.lw-howto-desc { max-width: 30em; }
.lw-howto-desc .lw-dash-part { display: block; }

.lw-step-badge {
  width: clamp(72px, 8vw, 92px);
  height: clamp(72px, 8vw, 92px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 900;
  border: 3px solid #1F2A44;
  font-family: 'Pretendard', system-ui, sans-serif;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.08);
}
.lw-value-card {
  border-radius: 28px;
  padding: clamp(24px, 3vw, 36px) clamp(20px, 2.8vw, 32px);
  min-height: clamp(220px, 24vw, 280px);
  position: relative;
  box-shadow: 0 16px 30px -20px rgba(0, 0, 0, 0.25);
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: default;
}

/* ── Header / nav / drawer ─────────────────────────── */
.lw-header { padding: clamp(14px, 2vw, 26px) 0; }
.lw-header-inner {
  width: 100%;
  padding: 0 var(--lw-gutter);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lw-nav {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}
.lw-nav a {
  width: clamp(120px, 12vw, 182px);
  text-align: center;
  color: #1F2A44;
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(17px, 1.6vw, 23px);
  font-family: 'Pretendard', system-ui, sans-serif;
}
.lw-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid #1F2A44;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: #1F2A44;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(31, 42, 68, 0.14);
}
.lw-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(31, 42, 68, 0.45);
  z-index: 190;
  animation: ll-fade .2s ease;
}
.lw-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 84vw);
  background: #fff;
  z-index: 200;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
}
.lw-drawer a {
  padding: 14px 12px;
  border-radius: 12px;
  color: #1F2A44;
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  font-family: 'Pretendard', system-ui, sans-serif;
}
.lw-drawer a:active { background: rgba(31, 42, 68, 0.06); }

/* ── pad: ≤1024px ──────────────────────────────────── */
@media (max-width: 1024px) {
  .lw-hero-grid,
  .lw-grid-2,
  .lw-fit-grid,
  .lw-portal-grid { grid-template-columns: 1fr; }
  .lw-grid-3,
  .lw-grid-3--loose,
  .lw-grid-4 { grid-template-columns: repeat(2, 1fr); }

  .lw-media { max-width: min(560px, 100%); margin: 0 auto; }

  .lw-nav { display: none; }
  .lw-nav-toggle { display: inline-flex; }

  .lw-howto-connector { display: none; }
  /* min-height 해제 시 절대배치 아이콘(bottom:24)이 본문과 겹치지 않게 하단 여백 확보 */
  .lw-value-card { min-height: 0; padding-bottom: 76px; }

  /* Hero 밑줄: 폰/패드에서 물결 → 직선 */
  .lw-underline-wave { display: none; }
  .lw-underline-straight { display: inline; }

  /* ── Hero · 서비스 소개: 1컬럼 전환 시 텍스트/버튼 중앙 정렬 ── */
  #top .lw-hero-grid > div:first-child,
  #overview .lw-grid-2 > div:first-child { text-align: center; }

  /* max-width 문단은 블록 자체도 가운데로 */
  #top .lw-hero-grid > div:first-child .lw-hero-p { margin-left: auto; margin-right: auto; }

  /* Hero 버튼 행 · 통계 행 가운데 정렬 */
  #top .lw-hero-grid > div:first-child > div { justify-content: center; }

  /* 서비스 소개 체크리스트: 가운데 좁은 블록 + 항목 내부 텍스트는 좌측 유지.
     fit-content 로 shrink-wrap 하면 WebKit(iOS Safari)이 nested-flex(li=flex,
     텍스트 래퍼=flex item) 폭을 실제 필요(263px)보다 덜 계산해 마지막 글자가 조기
     줄바꿈됨. → 정의된 고정폭(측정된 최대 필요폭 263px + 여유)으로 안정화. */
  #overview .lw-grid-2 > div:first-child ul {
    width: 300px;
    max-width: 100%;
    margin-inline: auto;
  }
  #overview .lw-grid-2 > div:first-child ul li {
    text-align: left;
    word-break: keep-all;   /* 한국어 어절 단위 줄바꿈: '면/션/공/에' 낱글자 넘침 방지 */
  }
}

/* ── phone: ≤640px ─────────────────────────────────── */
@media (max-width: 640px) {
  .lw-grid-3,
  .lw-grid-3--loose,
  .lw-grid-4,
  .lw-footer-grid { grid-template-columns: 1fr; }
  .lw-fit-inner { grid-template-columns: repeat(2, 1fr); }
  .lw-form-2col,
  .lw-form-2col--wide { grid-template-columns: 1fr; }
  .lw-doodle { display: none; }
  .lw-hero-h1 span > svg { bottom: -7px !important; }

  /* 구분 텍스트(—, 반점, 온점): 분리 지점 뒤를 새 줄로 (줄 중간 wrap 방지) */
  .lw-dash-part { display: block; }
  /* HowTo 스텝 설명 폭 제한 해제 */
  .lw-howto-desc { max-width: none; }

  /* 가치를 더합니다: 폰에서 좌우 2단 헤더를 세로 스택 + 중앙 정렬
     (인라인 style의 align-items:end 를 이기려면 !important 필요) */
  #value .lw-container > div:first-child {
    flex-direction: column;
    align-items: center !important;
    text-align: center;
  }
}