/*
 * 홈(01) 전용 — shell.css 위에 얹는다 (H1, docs/homepage-plan.md §2 · 시안 Homepage-1c #p1)
 * ★토큰은 shell.css의 것만 쓴다. 여기서 새 색을 만들지 않는다 — 예외는 안내서 7갈래의 카테고리 색
 *   (§1.1 "안내서 7갈래 구분에만")이고, 그것도 페이지 마크업의 인라인 값으로 둔다.
 */

/* ── 히어로 — 표제 + 최근 갱신 ─────────────────────────────────────────── */
.home-hero {
  display: flex;
  gap: 52px;
  align-items: flex-end;
  padding-block: 68px 60px;
}
.home-hero__main {
  flex: 1;
  min-width: 0;
}
.home-hero__title {
  margin-top: 20px;
}
.home-hero__title em {
  font-style: normal;
  color: var(--primary);
}
.home-hero__lead {
  margin-top: 24px;
  max-width: 520px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--text);
}
.home-hero__actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.home-updates {
  width: 450px;
  flex-shrink: 0;
  padding: 26px 28px;
  border-radius: var(--r-card);
  background: var(--surface);
}
.home-updates__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sub);
}
.home-updates__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sky); /* ★#0EA5E9는 "최신" 하나에만 */
}
.home-updates ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.home-updates li {
  padding-bottom: 14px;
  border-bottom: 1px solid #E5E1DB;
}
.home-updates li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.home-updates a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--title);
}
.home-updates a b {
  font-size: 15px;
  font-weight: 700;
}
.home-updates a:hover b {
  color: var(--primary);
}
.home-updates a span {
  font-size: 12.5px;
  color: var(--sub);
}

/* ── 검색 ───────────────────────────────────────────────────────────────── */
.home-search {
  padding-bottom: 66px;
}
.home-search__box {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 19px 0 24px;
  border: 1px solid #E5E1DB;
  border-radius: 32px;
  background: var(--surface);
  color: var(--sub);
  transition: background-color 0.15s, border-color 0.15s;
}
.home-search__box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.5px var(--primary);
  background: #fff;
}
.home-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--title);
  font: inherit;
  font-size: 16px;
}
.home-search__input::placeholder {
  color: var(--faint);
}
.home-search__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--sub);
  font-size: 12px;
}

/* ── 블록 공통 ──────────────────────────────────────────────────────────── */
.home-block {
  padding-bottom: 70px;
}
.home-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 30px;
}
.home-block__note {
  font-size: 14px;
  color: var(--sub);
}

/* ── 무엇을 할 수 있나 — 3칸 + 업무 칩 ──────────────────────────────────── */
.home-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-block: 1px solid #E5E1DB;
  background: #E5E1DB; /* 칸 사이 1px 선 */
}
.home-pillars > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 26px 24px;
  background: var(--paper);
}
.home-pillars .num {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}
.home-pillars b {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.home-pillars p {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text);
}

.home-areas {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.home-area {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 15px;
  border: 1px solid #E5E1DB;
  border-radius: 999px;
  color: var(--text-strong);
  font-size: 14px;
  white-space: nowrap;
}
a.home-area:hover {
  border-color: var(--line-faint);
  background: var(--surface);
  color: var(--title);
}
/* 이 제품만의 것 두 개(PMS · 신경망)를 채워 보인다 — 시안 그대로 */
.home-area--hot,
a.home-area--hot:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}
a.home-area--hot:hover {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
}
.home-area--more {
  border-style: dashed;
  border-color: var(--line-faint);
  color: var(--sub);
}

/* ── 화면 — 어두운 면(★페이지당 하나) ─────────────────────────────────────── */
.home-screens {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 44px 46px;
  border-radius: var(--r-card);
  background: var(--dark);
}
.home-screens__text {
  flex: 1;
  min-width: 0;
}
.home-screens .kicker {
  color: #8E96B0;
}
.home-screens h2 {
  margin-top: 14px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.3;
  color: #fff;
}
.home-screens p {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--on-dark-sub);
}
.home-screens__shots {
  width: 560px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.home-shot {
  position: relative;
  height: 180px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
}
.home-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}
.home-shot figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 24px 12px 10px;
  background: linear-gradient(rgba(20, 20, 43, 0), rgba(20, 20, 43, 0.88));
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

/* ── 안내서 7갈래 + 업종별 · 도입 첫날 ─────────────────────────────────────── */
.home-manual {
  display: flex;
  gap: 44px;
  align-items: flex-start;
}
.home-manual__list {
  flex: 1.3;
  min-width: 0;
}
.home-manual__title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.home-manual__lead {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text);
}
.home-lanes {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.home-lanes a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--title);
}
.home-lanes li:last-child a {
  border-bottom: 0;
}
.home-lanes a:hover b {
  color: var(--primary);
}
.home-lanes .num {
  width: 22px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
}
.home-lanes b {
  font-size: 15.5px;
  font-weight: 700;
}
.home-lanes__desc {
  margin-left: auto;
  font-size: 13px;
  color: var(--sub);
  text-align: right;
}
.home-lanes__count {
  width: 28px;
  flex-shrink: 0;
  font-size: 12.5px;
  color: var(--faint);
  text-align: right;
}

.home-manual__side {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.home-side-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.home-tags {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.home-tag {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--text-strong);
  font-size: 12.5px;
}
.home-tag:hover {
  color: var(--primary);
}

.home-firstday {
  padding: 26px 28px;
  border-radius: var(--r-card);
  background: var(--primary);
  color: #fff;
}
.home-firstday ol {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13.5px;
  color: #DCDCFB;
  counter-reset: step;
}
.home-firstday li {
  counter-increment: step;
}
.home-firstday li::before {
  content: counter(step);
  display: inline-block;
  width: 18px;
  font-variant-numeric: tabular-nums;
}
.home-firstday .btn {
  margin-top: 18px;
  background: #fff;
  color: var(--primary);
  font-weight: 700;
}
.home-firstday .btn:hover {
  background: var(--tint);
  color: var(--on-tint);
}

/* ── 브랜드 ─────────────────────────────────────────────────────────────── */
.home-brand {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 30px 34px;
  border-radius: var(--r-card);
  background: var(--surface);
}
.home-brand__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-brand__text b {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.home-brand__dots {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.home-brand__dots span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

/* ── 마지막 권유 ────────────────────────────────────────────────────────── */
.home-cta {
  padding: 52px 0 46px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.home-cta h2 {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.home-cta p {
  margin-top: 14px;
  font-size: 15px;
  color: var(--text);
}
.home-cta__actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* ── 좁은 화면 ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .home-hero,
  .home-manual {
    flex-direction: column;
    align-items: stretch;
  }
  .home-updates,
  .home-manual__side {
    width: auto;
  }
  .home-screens {
    flex-direction: column;
    align-items: stretch;
  }
  .home-screens__shots {
    width: auto;
  }
}

@media (max-width: 720px) {
  .home-hero {
    gap: 36px;
    padding-top: 44px;
  }
  .home-hero__lead {
    font-size: 16px;
  }
  .home-search__box {
    height: 56px;
  }
  .home-search__key {
    display: none;
  }
  .home-pillars {
    grid-template-columns: 1fr;
  }
  .home-screens {
    padding: 30px 22px;
  }
  .home-screens__shots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-screens__shots .home-shot:last-child {
    grid-column: 1 / -1;
  }
  .home-lanes__desc {
    display: none;
  }
  .home-lanes .num + b {
    margin-right: auto;
  }
  .home-brand {
    flex-wrap: wrap;
    padding: 24px;
  }
  .home-brand__dots {
    margin-left: 0;
  }
  .home-cta h2 {
    font-size: 30px;
  }
}