/* AUTO-GENERATED by web-kit — 직접 수정 금지. 정본: C:/dev/tools/web-kit (python sync.py) */
/* 홈 티저 섹션 골격 — service 카드(hs-svc) / story split(hs-story) / explore 그리드(hs-gc)
   3사 자구 동일 검증(2026-07-02) 후 web-kit SSOT 화. .teaser-more 여백은 앱별 유지(landing.css).
   .reveal 옵저버(landing.js)·.reveal-stagger 는 각 앱 기존 정의 재사용. */
:root { --motion-sig: 1281ms; --ease-sig: cubic-bezier(.22,.61,.36,1); }

.hs-svc-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: var(--sp-6); }
.hs-svc { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden;
          border: 1px solid var(--border); background: var(--surface); text-decoration: none;
          box-shadow: 0 12px 28px -18px rgba(0,0,0,0.10); transition: transform .2s ease, box-shadow .2s ease; }
.hs-svc:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -20px rgba(0,0,0,0.10); }
.hs-svc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* design-block §1.1 예외 승인 (2026-07-02): 밝은 사진 위 흰 제목 가독성용 기능성 스크림 — .hs-svc 한정 */
.hs-svc::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 38%; z-index: 1; pointer-events: none;
                  background: linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0)); }
.hs-svc__head { position: absolute; top: 0; left: 0; right: 0; padding: 26px 26px 0; z-index: 2; }
.hs-svc__ey { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: #fff; letter-spacing: -0.01em; text-shadow: 0 1px 8px rgba(0,0,0,0.40); }
.hs-svc__t { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: #fff; letter-spacing: -0.02em; line-height: 1.3; margin-top: 6px; text-shadow: 0 1px 10px rgba(0,0,0,0.40); }
.hs-svc__result { position: absolute; left: 18px; right: 18px; bottom: 18px; background: #fff; border-radius: var(--r-md); padding: 14px 18px; box-shadow: 0 10px 22px -16px rgba(0,0,0,0.10); }
.hs-svc__rl { font-size: var(--fs-caption); color: var(--muted); letter-spacing: -0.01em; }
.hs-svc__rv { font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: -0.02em; margin-top: 2px; }
.hs-svc__rv b { color: var(--accent-h); }

.hs-story { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface); min-height: 420px; margin-top: var(--sp-6); }
.hs-story__txt { padding: 44px 48px; display: flex; flex-direction: column; }
.hs-story__top { display: flex; align-items: center; }
.hs-story__ey { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--fg); }
.hs-story__ey .ico { width: 24px; height: 24px; border-radius: 7px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.hs-story__t { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: -0.02em; margin: auto 0 14px; line-height: 1.35; }
.hs-story__d { font-size: var(--fs-body); color: var(--muted); line-height: 1.7; letter-spacing: -0.02em; margin: 0 0 26px; }
.hs-story__btn { align-self: flex-start; background: var(--fg); color: #fff; border-radius: var(--r-md); padding: 13px 24px; font-weight: var(--fw-bold); font-size: var(--fs-body); text-decoration: none; }
.hs-story__img { position: relative; background: #eef1ef; }
.hs-story__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.hs-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: var(--sp-6); }
.hs-gc { position: relative; display: block; aspect-ratio: 5 / 4; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface); text-decoration: none; box-shadow: 0 12px 28px -18px rgba(0,0,0,0.10); transition: transform .2s ease; }
.hs-gc:hover { transform: translateY(-4px); }
.hs-gc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hs-gc__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; }
.hs-gc--photo .hs-gc__bar { background: rgba(15,23,19,0.55); }
.hs-gc__label { font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.hs-gc--photo .hs-gc__label { color: #fff; }
.hs-gc--light .hs-gc__label { color: var(--fg); }
.hs-gc__arrow { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.hs-gc--light .hs-gc__arrow { background: var(--bg); color: var(--fg); border: 1px solid var(--border); }
.hs-gc--photo .hs-gc__arrow { background: rgba(255,255,255,0.92); color: var(--fg); }

@media (max-width: 860px) {
  .hs-svc-row, .hs-grid3, .hs-story { grid-template-columns: 1fr; }
  .hs-story__img { min-height: 240px; }
}

/* 섹션별 시그니처 모션 (writeplz 동기화) — service=슬라이드+결과칩 · story=텍스트슬라이드+이미지와이프 · explore=블러인 */
#service .hs-svc.reveal { transition: opacity var(--motion-sig) var(--ease-sig), transform var(--motion-sig) var(--ease-sig); transition-delay: var(--reveal-delay, 0ms); }
#service .hs-svc.reveal:nth-child(1) { transform: translateX(-44px); }
#service .hs-svc.reveal:nth-child(2) { transform: translateY(26px) scale(.96); }
#service .hs-svc.reveal:nth-child(3) { transform: translateX(44px); }
#service .hs-svc.reveal.is-in { transform: none; }
#service .hs-svc__result { opacity: 0; transform: translateY(14px); transition: opacity .78s var(--ease-sig) .35s, transform .78s var(--ease-sig) .35s; }
#service .hs-svc.reveal.is-in .hs-svc__result { opacity: 1; transform: none; }

#story .hs-story.reveal { transform: none; }
#story .hs-story__txt { opacity: 0; transform: translateX(-30px); transition: opacity var(--motion-sig) var(--ease-sig), transform var(--motion-sig) var(--ease-sig); }
#story .hs-story.reveal.is-in .hs-story__txt { opacity: 1; transform: none; }
#story .hs-story__img { clip-path: inset(0 100% 0 0); transition: clip-path var(--motion-sig) var(--ease-sig) .08s; }
#story .hs-story.reveal.is-in .hs-story__img { clip-path: inset(0 0 0 0); }

#explore .hs-gc.reveal { filter: blur(9px); transition: opacity var(--motion-sig) var(--ease-sig), filter var(--motion-sig) var(--ease-sig); transition-delay: var(--reveal-delay, 0ms); }
#explore .hs-gc.reveal.is-in { filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
  #service .hs-svc.reveal, #explore .hs-gc.reveal { transform: none !important; filter: none !important; }
  #service .hs-svc__result, #story .hs-story__txt { opacity: 1 !important; transform: none !important; }
  #story .hs-story__img { clip-path: none !important; }
}