/* 사용자 요청 (2026-10-12): "index 페이지 HTML 구현 시작하자" — index 전용 스타일.
 * v1 디자인 시안(docs/design/drafts/v1_index_1k.png) 기준: Hero → Vision → AI Milestones → Contact. */

/* ── Hero ────────────────────────────── */
.hero {
  padding-block: var(--space-8);
}

.hero__inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.hero__text {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.hero__title {
  display: grid;
  font-size: var(--text-3xl-size);
  line-height: var(--text-3xl-line);
}

.hero__copy {
  max-width: calc(var(--space-16) * 4);
  color: var(--color-text-secondary);
}

.hero__text .btn {
  margin-top: var(--space-2);
}

.hero__art {
  width: 100%;
  max-width: calc(var(--space-16) * 3);
  justify-self: center;
}

/* Hero 그림 (templates/hero_art.html) 선 색·두께 */
.hero__art-svg .grid   { stroke: var(--color-border); stroke-width: var(--border-width-default); }
.hero__art-svg .ink    { stroke: var(--color-text-secondary); stroke-width: var(--border-width-strong); }
.hero__art-svg .dash   { stroke: var(--color-text-secondary); stroke-width: var(--border-width-default); stroke-dasharray: var(--space-1) var(--space-1); }
.hero__art-svg .accent { stroke: var(--color-primary); stroke-width: var(--border-width-strong); }
.hero__art-svg .handle { stroke: var(--color-primary); stroke-width: var(--border-width-strong); fill: var(--color-surface); }
.hero__art-svg .grid,
.hero__art-svg .ink,
.hero__art-svg .dash,
.hero__art-svg .accent,
.hero__art-svg .handle { vector-effect: non-scaling-stroke; }

/* ── Vision: 두 기둥 ─────────────────── */
.pillars {
  display: grid;
  gap: var(--space-2);
}

.pillar {
  padding: var(--space-4);
}

.pillar__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width-default) solid var(--color-border);
}

.pillar__icon,
.principle__icon,
.contact-card__icon {
  color: var(--color-primary);
}

.pillar__icon .icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.pillar__title {
  font-size: var(--text-xl-size);
  line-height: var(--text-xl-line);
}

.pillar__sub {
  color: var(--color-text-secondary);
}

.pillar__list {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-3);
  color: var(--color-text-secondary);
}

/* ── Vision: 원칙 3개 ────────────────── */
.principles {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.principle {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-4);
}

.principle__icon .icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
  margin-bottom: var(--space-2);
}

.principle__title {
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-line);
}

.principle__text {
  color: var(--color-text-secondary);
}

/* ── AI Milestones: 세로 타임라인 ─────── */
.timeline {
  position: relative;
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-left: var(--space-4);
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--space-1);
  border-left: var(--border-width-strong) solid var(--color-primary);
}

.timeline__item {
  position: relative;
  display: grid;
  gap: var(--space-1);
}

/* 선 위의 작은 사각 표시 */
.timeline__item::before {
  content: "";
  position: absolute;
  top: var(--space-1);
  left: calc(var(--space-1) - var(--space-4) - var(--space-1) / 2 + var(--border-width-strong) / 2);
  width: var(--space-1);
  height: var(--space-1);
  background: var(--color-primary);
}

.timeline__date {
  color: var(--color-text-secondary);
}

.timeline__box {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
}

.timeline__name {
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-line);
}

.timeline__desc {
  color: var(--color-text-secondary);
}

/* ── Contact: 연락처 이미지 자리 ──────── */
.contact-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--space-16);
  padding: var(--space-4);
}

.contact-card__icon .icon {
  width: var(--space-6);
  height: var(--space-6);
  color: var(--color-text-secondary);
}

/* 이메일 주소 그림 (3배 크기로 만들어 줄여서 보여 준다 — 고해상도 화면에서도 선명) */
.contact-card__email {
  flex: 0 1 auto;
  min-width: 0;
  width: 100%;
  max-width: calc(var(--space-16) * 2 + var(--space-4));
  height: auto;
}

.contact-card__icon {
  flex: none;
}

/* ── Tablet ──────────────────────────── */
@media (min-width: 672px) {
  .pillars {
    grid-template-columns: repeat(2, 1fr);
  }

  .principles {
    grid-template-columns: repeat(3, 1fr);
  }

  .timeline__item {
    grid-template-columns: calc(var(--space-12) + var(--space-1)) 1fr;
    gap: var(--space-3);
    align-items: start;
  }

  .timeline__date {
    padding-top: var(--space-3);
  }

  .timeline__item::before {
    top: calc(var(--space-3) + var(--space-1));
  }
}

/* ── Desktop ─────────────────────────── */
@media (min-width: 1056px) {
  .hero {
    padding-block: var(--space-16);
  }

  .hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .hero__title {
    font-size: var(--text-4xl-size);
    line-height: var(--text-4xl-line);
  }

  .hero__art {
    max-width: none;
  }

  .pillar,
  .principle {
    padding: var(--space-5);
  }
}