/* home.css — 홈 전용(히어로 + 임팩트 제품 쇼케이스 + 가치 제안 밴드). base.css 뒤 로드, 토큰만. */
/* 히어로(홈 전용 — base.css 예산 확보차 이관) */
.hero { text-align: center; padding: 96px 0 60px; position: relative; }
/* 히어로 프리미엄 배경 — 부드러운 액센트 글로우(고급감, 자가 생성 SVG 대체) */
.hero::before { content: ""; position: absolute; left: 50%; top: -40px; transform: translateX(-50%);
  width: 1000px; max-width: 100%; height: 460px; z-index: -1; pointer-events: none;
  background: radial-gradient(52% 60% at 50% 38%, var(--accent-soft), transparent 72%); }
.hero h1 { font-size: 70px; font-weight: 800; letter-spacing: -0.037em; line-height: 1.03;
  margin: 0 0 20px; }
.hero p { font-size: 23px; color: var(--muted); margin: 0 auto; max-width: 640px; line-height: 1.45; }
.hero-cta { margin-top: 36px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.value-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.vp-card { text-align: center; padding: 34px 26px; border: 1px solid var(--hairline);
  border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease; }
.vp-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px var(--accent-soft); }
.vp-ic { width: 54px; height: 54px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 15px; background: var(--accent-soft);
  color: var(--accent); margin-bottom: 18px; }
.vp-ic svg { width: 27px; height: 27px; }
.vp-card h2, .vp-card h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 8px; color: var(--text); }
.vp-card p { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0; }
@media (max-width: 734px) {
  .hero h1 { font-size: 40px; }
  .hero p { font-size: 17px; }
  .value-band { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
  .vp-card { padding: 26px 22px; }
}
.showcase { display: flex; flex-direction: column; gap: 40px; margin-top: 60px; }
.showcase-item { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center;
  padding: 44px; border: 1px solid var(--hairline); border-radius: 24px; background: var(--surface);
  box-shadow: var(--shadow-card); transition: transform .18s ease, box-shadow .18s ease; }
.showcase-item:hover { text-decoration: none; transform: translateY(-4px);
  box-shadow: 0 20px 48px var(--accent-soft); }
.showcase-item:nth-child(even) .showcase-shot { order: -1; }
/* 그리드 트랙이 자식 min-content 로 부풀어 좁은 화면에서 가로 넘침 방지(폴드 접힘 등). */
.showcase-copy { min-width: 0; overflow-wrap: anywhere; }
.showcase-copy h2 { font-size: 42px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
  margin: 0 0 12px; color: var(--text); }
.showcase-tag { color: var(--accent-ink); font-size: 17px; font-weight: 600; margin: 0 0 16px; }
.showcase-sum { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0 0 20px; }
.showcase-price { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 24px;
  font-variant-numeric: tabular-nums; }
.showcase-shot { display: flex; justify-content: center; min-width: 0; }
.showcase-shot img { max-width: 100%; max-height: 440px; border-radius: 18px;
  box-shadow: 0 12px 36px rgba(0,0,0,.16); }
@media (max-width: 734px) {
  /* 히어로 — 데스크톱 70px 은 폰 폭을 넘쳐 텍스트가 잘렸다. 폰에서 축소해 오버플로 제거. */
  .hero { padding: 52px 0 36px; }
  .hero h1 { font-size: 40px; letter-spacing: -0.028em; margin: 0 0 14px; }
  .hero p { font-size: 16.5px; }
  .hero-cta { margin-top: 24px; gap: 10px; }
  .showcase-item { grid-template-columns: 1fr; gap: 24px; padding: 26px; }
  .showcase-item:nth-child(even) .showcase-shot { order: 0; }
  .showcase-copy h2 { font-size: 30px; }
}

/* 홈 공지 스트립 — 히어로 아래, 고정/최신 공지 1건을 담백히 노출(런칭·업데이트 알림). 토큰만. */
.home-notice { display: flex; align-items: center; gap: 12px; margin: 28px 0 0;
  padding: 13px 18px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); text-decoration: none;
  /* min-width:0 + overflow:hidden — nowrap 제목이 레이아웃 뷰포트를 부풀려 모바일에서 페이지가
     뷰포트보다 넓어져 가로 스크롤·잘림을 유발하던 문제 방지(제목은 ellipsis 로 줄어든다). */
  min-width: 0; overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease; }
.home-notice:hover, .home-notice:focus-visible { border-color: var(--accent);
  box-shadow: 0 8px 24px var(--accent-soft); }
.home-notice .hn-badge { flex: 0 0 auto; font-size: 12px; font-weight: 700;
  letter-spacing: .02em; padding: 3px 10px; border-radius: 999px;
  background: var(--accent-btn); color: var(--on-accent); }
/* line-clamp(줄바꿈 허용) — nowrap 은 제목의 intrinsic width(전체 텍스트 폭)로 레이아웃
   뷰포트를 부풀렸다. 줄바꿈을 허용하면 intrinsic width 가 '가장 긴 단어'로 작아져 안전하고,
   1줄 clamp 로 단일 라인·ellipsis 외관은 유지한다. */
.home-notice .hn-title { flex: 1 1 0; min-width: 0; font-weight: 600; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-word; }
.home-notice .hn-arrow { flex: 0 0 auto; color: var(--muted); }
.home-notice:hover .hn-arrow, .home-notice:focus-visible .hn-arrow { color: var(--accent); }