/* 홈 히어로 — 무대(이 주의 콘텐츠·자동 넘김) + 이번 주 읽을 질문 3건
   시안: docs/JAIN/design-html/home-hero-motion-concept (조합안, 2026-09-29 확정) */
.kv{
  --cat:var(--accent);
  --kv-dwell:7s;
  --kv-ease:cubic-bezier(.77,0,.18,1);
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);
  gap:40px;
  font-family:'Pretendard',-apple-system,sans-serif;
}
/* 카테고리색 — 매칭 없으면 코발트(액센트) */
.kv [data-cat="경영"]{ --cat:var(--brand-people); }
.kv [data-cat="인생"]{ --cat:var(--brand-life); }
.kv [data-cat="교육"]{ --cat:var(--brand-study); }
.kv [data-cat="사회"]{ --cat:var(--accent); }

/* ===== 무대 ===== */
.kv_stage{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16 / 10;          /* 기본 16:10, 목록이 더 길면 목록 높이까지 늘어난다 */
  border-radius:20px;
  overflow:hidden;
  isolation:isolate;
  background:#1B1F2A;
  color:#fff;
  text-decoration:none;
}
.kv_media,
.kv_layer{ position:absolute; inset:0; overflow:hidden; }
.kv_img{
  position:absolute;
  left:-6%; top:-6%;
  width:112%; height:112%;
  object-fit:cover;
  translate:calc(var(--kv-px, 0) * -12px) calc(var(--kv-py, 0) * -8px);
  transition:translate .7s var(--ease-out), filter .8s, scale .8s var(--ease-out);
}
.kv_layer.is-leave .kv_img{ scale:1.05; filter:brightness(.8); }
.kv_shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.36) 55%, rgba(0,0,0,.82) 100%);
}
.kv_cap{ position:absolute; left:40px; right:40px; bottom:36px; }
.kv_cap *{ -webkit-text-stroke:0; }
.kv_meta{ display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,.85); }
.kv_pill{
  padding:4px 12px;
  border-radius:var(--radius-full);
  background:var(--cat);
  color:#fff;
  font-size:12px;
  font-weight:600;
  transition:background .5s;
}
.kv_label{ font-weight:600; }
.kv_date{ color:rgba(255,255,255,.7); }
.kv_title{
  margin:12px 0 0;
  max-width:640px;
  color:#fff;
  font-size:34px;
  font-weight:700;
  line-height:1.32;
  letter-spacing:-1px;
  word-break:keep-all;
}
.kv_desc{
  margin:8px 0 0;
  max-width:620px;
  color:rgba(255,255,255,.95);
  font-size:16px;
  line-height:1.6;
  text-shadow:0 1px 8px rgba(0,0,0,.25);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.kv_desc[hidden]{ display:none; }
.kv_sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ===== 이번 주 읽을 질문 ===== */
.kv_side{ min-width:0; display:flex; flex-direction:column; }
.kv_head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:20px;
  border-bottom:1px solid var(--border-hairline);
}
.kv_head_title{ color:var(--text-strong); font-size:16px; font-weight:700; line-height:24px; letter-spacing:-0.16px; }
.kv_list{ flex:1; display:flex; flex-direction:column; margin:0; padding:0; list-style:none; }
.kv_list li{ flex:1; display:flex; min-width:0; }
.kv_row{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--border-hairline);
  text-decoration:none;
}
.kv_rtext{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.kv_tag{ color:var(--cat); font-size:12px; font-weight:600; }
.kv_rtitle{
  margin:0;
  color:var(--text-secondary);
  font-size:16px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:-0.2px;
  word-break:keep-all;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:color .4s;
}
.kv_rdesc{ color:var(--text-muted); font-size:14px; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kv_thumb{
  position:relative;
  flex:none;
  width:104px; height:104px;
  border-radius:var(--radius-lg);
  background:rgba(0,0,0,.04);
  overflow:hidden;
}
.kv_thumb img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  transition:filter .6s, scale .6s var(--ease-out);
}
/* 비활성 썸네일은 카테고리색 듀오톤, 활성은 원색 */
.kv_thumb::after{ content:""; position:absolute; inset:0; background:var(--cat); mix-blend-mode:screen; opacity:.55; transition:opacity .6s; }
.kv_row.is-on .kv_rtitle,
.kv_row:hover .kv_rtitle{ color:var(--text-strong); }
.kv_row.is-on .kv_thumb img{ filter:none; scale:1.04; }
.kv_row.is-on .kv_thumb::after{ opacity:0; }

/* 자동 넘김 버튼 — 둘레 링이 다음 글까지 남은 시간 */
.kv_ring{
  position:relative;
  flex:none;
  display:grid;
  place-items:center;
  width:36px; height:36px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--surface-sunken);
  color:var(--text-strong);
  cursor:pointer;
}
.kv_ring[hidden]{ display:none; }
.kv_ring_track{ position:absolute; inset:0; width:36px; height:36px; rotate:-90deg; }
.kv_ring_track circle{ fill:none; stroke:var(--border-hairline); stroke-width:2; }
.kv_ring_track .kv_ring_val{ stroke:var(--text-strong); stroke-dasharray:100; stroke-dashoffset:100; }
.kv_ring.is-go .kv_ring_val{ animation:kv-ring var(--kv-dwell) linear both; }
.kv.is-paused .kv_ring_val{ animation-play-state:paused; }
.kv_ring_icon{ position:relative; width:12px; height:12px; fill:currentColor; }
.kv_ring_icon--play,
.kv_ring.is-stopped .kv_ring_icon--pause{ display:none; }
.kv_ring.is-stopped .kv_ring_icon--play{ display:block; }

/* ===== 모션 — 전환 때만 재생(첫 로드의 제목·이미지는 숨기지 않는다) ===== */
.kv_layer.is-enter{ animation:kv-wipe .82s var(--kv-ease) both; }
.kv_layer.is-enter .kv_img{ animation:kv-settle 1.3s var(--ease-out) both; }
.kv_w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em; }
.kv_wi{ display:inline-block; animation:kv-word .72s var(--kv-ease) both; animation-delay:calc(var(--i) * 38ms); }
.kv_meta.is-fade,
.kv_desc.is-fade{ animation:kv-fade .6s var(--ease-out) .18s both; }

@media (prefers-reduced-motion:no-preference){
  .kv_layer.is-first .kv_img{ animation:kv-settle 1.8s var(--ease-out) both; }
  /* 스크롤하면 무대는 확대, 캡션은 먼저 떠오르며 빠진다 (지원 브라우저만, Firefox 안정판은 정적) */
  @supports (animation-timeline:view()){
    .kv_media{ animation:kv-zoom linear both; animation-timeline:view(); animation-range:cover 50% cover 100%; }
    .kv_cap{ animation:kv-lift linear both; animation-timeline:view(); animation-range:cover 50% cover 100%; }
  }
}
@media (prefers-reduced-motion:reduce){
  .kv_layer.is-enter,
  .kv_layer.is-enter .kv_img,
  .kv_wi,
  .kv_meta.is-fade,
  .kv_desc.is-fade{ animation:none; }
  .kv_layer.is-enter{ animation:kv-xfade .2s both; }
  .kv_img,
  .kv_thumb img,
  .kv_thumb::after{ transition-duration:.2s; }
}

@keyframes kv-wipe{ from{ clip-path:inset(0 0 0 100%); } to{ clip-path:inset(0 0 0 0); } }
@keyframes kv-settle{ from{ scale:1.14; } to{ scale:1; } }
@keyframes kv-word{ from{ transform:translateY(112%); } to{ transform:none; } }
@keyframes kv-fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes kv-xfade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes kv-ring{ from{ stroke-dashoffset:100; } to{ stroke-dashoffset:0; } }
@keyframes kv-zoom{ from{ scale:1; } to{ scale:1.16; } }
@keyframes kv-lift{ from{ transform:none; opacity:1; } to{ transform:translateY(-60px); opacity:.2; } }

/* ===== 반응형 ===== */
@media (max-width:900px){
  .kv{ grid-template-columns:1fr; gap:28px; }
  .kv_stage{ aspect-ratio:4 / 3; }
  .kv_cap{ left:20px; right:20px; bottom:20px; }
  .kv_title{ font-size:22px; letter-spacing:-0.4px; }
  .kv_desc{ display:none; }
  .kv_thumb{ width:88px; height:88px; }
  .kv_row{ padding:16px 0; }
}