/* 홈 히어로 + 상품 카드 (v14) — src/hero-view.js 전용 스타일
   style.css · polish.css 뒤에 로드하세요. 클래스는 모두 .hv- 접두사라 기존 규칙과 겹치지 않습니다. */

.hv {
  --hv-paper: #faf9f6;
  --hv-wall: #edeae4;
  --hv-ink: #1e2126;
  --hv-ink2: #5a5d64;
  --hv-ink3: #8a8d94;
  --hv-ink4: #43474e;
  --hv-line: #e3dfd7;
  --hv-c: #009fe3;
  --hv-m: #e4007f;
  --hv-y: #ffd800;
  --hv-k: #1e2126;
  --hv-cta: #d4006e;
}

/* ---------- 4색 점 ---------- */
.hv-dots {
  display: inline-grid; grid-template-columns: 1fr 1fr; gap: 3px;
  width: 22px; height: 22px; flex: none;
}
.hv-dots i { display: block; border-radius: 50%; }
.hv-dots i:nth-child(1) { background: var(--hv-c); }
.hv-dots i:nth-child(2) { background: var(--hv-m); }
.hv-dots i:nth-child(3) { background: var(--hv-y); }
.hv-dots i:nth-child(4) { background: var(--hv-k); }
.hv-dots--sm { width: 14px; height: 14px; gap: 2px; }

/* ---------- 히어로 ---------- */
.hv-hero {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 28px;
  background: var(--hv-wall);
  box-shadow: 0 2px 4px rgba(30, 33, 38, .04), 0 40px 70px -50px rgba(30, 33, 38, .45);
}
.hv-hero__media { position: absolute; inset: 0; z-index: 0; }
.hv-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 38% 54%;
}
/* 사진의 빈 벽면(오른쪽)으로 종이색을 흘려 글자를 안전하게 */
.hv-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(250, 249, 246, 0) 30%,
      rgba(250, 249, 246, .55) 44%,
      rgba(250, 249, 246, .90) 56%,
      rgba(250, 249, 246, .97) 66%,
      rgba(250, 249, 246, .975) 100%),
    linear-gradient(180deg, rgba(250, 249, 246, .35), rgba(250, 249, 246, 0) 32%);
}
.hv-hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) min(560px, 46%);
  align-items: center;
  min-height: clamp(470px, 40vw, 600px);
  padding: clamp(26px, 3.6vw, 56px);
}
.hv-hero__copy { grid-column: 2; max-width: 34em; }

.hv-eyebrow {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 18px;
  font-size: .82rem; font-weight: 700; letter-spacing: .06em;
  color: var(--hv-ink2);
}
.hv-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(1.95rem, 3.35vw, 3.05rem);
  line-height: 1.24; letter-spacing: -.042em; font-weight: 800;
  color: var(--hv-ink);
  text-wrap: balance;
}
.hv-hero h1 em {
  font-style: normal;
  background: linear-gradient(transparent 61%, rgba(255, 216, 0, .82) 61% 93%, transparent 93%);
  padding: 0 .05em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hv-lede {
  margin: 0 0 22px; max-width: 31em;
  font-size: clamp(.95rem, 1.05vw, 1.06rem); line-height: 1.72;
  color: var(--hv-ink4);
}
.hv-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 26px; padding: 0; list-style: none; }
.hv-chips li {
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(30, 33, 38, .13);
  font-size: .82rem; font-weight: 600; color: #3c4046; letter-spacing: -.01em;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.hv-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.hv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 27px; border-radius: 999px; border: 2px solid transparent;
  font-size: 1rem; font-weight: 800; letter-spacing: -.02em; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.hv-btn--primary {
  background: var(--hv-cta); border-color: var(--hv-cta); color: #fff;
  box-shadow: 0 12px 26px -14px rgba(212, 0, 110, .85);
}
.hv-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(212, 0, 110, .9); }
.hv-btn--ghost { background: rgba(255, 255, 255, .72); border-color: rgba(30, 33, 38, .22); color: var(--hv-ink); }
.hv-btn--ghost:hover { background: #fff; border-color: var(--hv-ink); transform: translateY(-2px); }

.hv-facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px;
  margin: clamp(22px, 3vw, 32px) 0 0; padding: 18px 0 0;
  border-top: 1px solid rgba(30, 33, 38, .12);
  font-size: .85rem; color: var(--hv-ink2); list-style: none;
}
.hv-facts li { display: flex; align-items: center; gap: 7px; }
.hv-facts li + li::before {
  content: ""; width: 1px; height: 12px;
  background: rgba(30, 33, 38, .18); margin-right: 2px;
}
.hv-facts b { color: var(--hv-ink); font-weight: 800; }

/* ---------- 상품 섹션 ---------- */
.hv-products {
  /* 아래 .why 섹션과의 간격 — 예전 <section class="block"> 의 margin-bottom 56px 자리를 대신한다 */
  margin: clamp(44px, 6vw, 80px) 0 clamp(48px, 5.5vw, 72px);
  scroll-margin-top: 90px;
}
.hv-sechead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.hv-kicker { margin: 0 0 6px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--hv-m); }
.hv-sectitle {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 800; letter-spacing: -.035em;
}
.hv-more {
  font-size: .88rem; font-weight: 700; color: var(--hv-ink2);
  text-decoration: none; white-space: nowrap;
}
.hv-more:hover { color: var(--hv-ink); }

.hv-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px); align-items: stretch;
}
.hv-card {
  display: flex; flex-direction: column;
  height: 100%;
  text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--hv-line); border-radius: 20px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(30, 33, 38, .04), 0 18px 34px -30px rgba(30, 33, 38, .4);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hv-card:hover {
  transform: translateY(-4px); border-color: #d6d1c7;
  box-shadow: 0 20px 40px -26px rgba(30, 33, 38, .45);
}
.hv-card__media { position: relative; display: block; background: #f0eee9; }
.hv-card__media img {
  display: block; flex: none; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.hv-badge {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  padding: 4px 10px; border-radius: 999px;
  background: var(--hv-cta); color: #fff;
  font-size: .74rem; font-weight: 800; letter-spacing: -.01em;
  box-shadow: 0 6px 14px -8px rgba(212, 0, 110, .8);
}
.hv-card__body {
  display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto;
  padding: 16px 17px 18px;
}
/* 제목·설명은 최대 줄 수를 고정해 카드 높이를 밀지 않게 */
.hv-card__body h3 {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0; font-size: 1.1rem; line-height: 1.35; letter-spacing: -.03em;
}
.hv-spec {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(1.55em * 2);
  font-size: .85rem; line-height: 1.55; color: var(--hv-ink3);
}
.hv-price { font-size: .88rem; font-weight: 800; color: var(--hv-ink); font-variant-numeric: tabular-nums; }
.hv-from {
  align-self: flex-start; margin-top: auto;
  white-space: nowrap; max-width: 100%;
  padding: 7px 13px; border-radius: 999px;
  border: 1.5px solid var(--hv-cta); color: var(--hv-cta);
  font-size: .83rem; font-weight: 800; letter-spacing: -.01em;
  transition: background .16s ease, color .16s ease;
}
.hv-card:hover .hv-from { background: var(--hv-cta); color: #fff; }
.hv-arrow { display: inline-block; transition: transform .16s ease; }
.hv-card:hover .hv-arrow { transform: translateX(3px); }

/* ---------- 반응형 ---------- */
@media (max-width: 1080px) {
  .hv-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 52%); }
  .hv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hv-hero { border-radius: 22px; }
  .hv-hero__media { position: relative; aspect-ratio: 5 / 4; }
  .hv-hero__media img { object-position: 42% 50%; }
  .hv-hero__scrim { display: none; }
  .hv-hero__inner { display: block; min-height: 0; padding: clamp(20px, 5vw, 30px); }
  .hv-hero__copy { grid-column: auto; max-width: none; }
  .hv-hero h1 { font-size: clamp(1.72rem, 6.2vw, 2.3rem); line-height: 1.28; }
  .hv-lede { font-size: .95rem; }
  .hv-facts { gap: 0 12px; font-size: .82rem; }
}
@media (max-width: 600px) {
  .hv-hero__media { aspect-ratio: 4 / 3; }
  .hv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hv-card__body { padding: 12px 12px 14px; }
  .hv-card__body { padding: 12px 12px 13px; }
  .hv-card__body h3 { font-size: 1rem; line-height: 1.32; }
  .hv-spec { font-size: .8rem; line-height: 1.5; min-height: calc(1.5em * 2); }
  .hv-from { padding: 6px 10px; font-size: .76rem; }
  .hv-cta { gap: 8px; }
  .hv-btn { padding: 14px 22px; font-size: .95rem; flex: 1 1 auto; }
  .hv-facts { row-gap: 8px; }
  .hv-facts li { font-size: .8rem; }
  .hv-facts li + li::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-btn, .hv-card, .hv-from, .hv-arrow { transition: none !important; }
}

/* ---------- 신뢰 문구 띠: 인디고 디지털 인쇄 · 당일 출고 ---------- */
.hv-trust { margin: 18px 0 6px; }
.hv-trust ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hv-trust__item {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; background: #fff; border: 1px solid var(--hv-line); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(30, 33, 38, .04), 0 18px 34px -28px rgba(30, 33, 38, .4);
}
.hv-trust__item:nth-child(1) .hv-trust__icon { background: #e6f5fc; color: #0a7fb4; }
.hv-trust__item:nth-child(2) .hv-trust__icon { background: #fde6f2; color: #b8005f; }
.hv-trust__icon { flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; }
.hv-trust__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hv-trust__txt b { font-size: 1.08rem; font-weight: 800; color: var(--hv-ink); letter-spacing: -.01em; }
.hv-trust__txt span { font-size: .9rem; line-height: 1.55; color: var(--hv-ink2); }
@media (max-width: 760px) {
  .hv-trust ul { grid-template-columns: 1fr; }
  .hv-trust__item { padding: 16px 16px; gap: 14px; }
  .hv-trust__icon { width: 52px; height: 52px; border-radius: 15px; }
}