/* =========================================================
   메인 페이지 PROJECT · ARCHIVE 섹션 (assets/js/home-sections.js가 내용을 그림)
   - 색은 light.css 토큰만 (다크: --brand = 금빛, 하늘색 없음). 이 파일의 새 값은 선·점선 투명도 토큰 3개뿐.
   - 12열 격자(데스크톱 열 간격 40px), 세로 간격 8px 단위, 버튼·링크 44px 이상, 본문 16px 이상.
   ========================================================= */
:root {
  --hs-line: rgba(25, 31, 40, .2);     /* '예정' 상태 칩 테두리 */
  --hs-dash: rgba(25, 31, 40, .18);    /* 예정 카드 점선 */
  --hs-track: rgba(25, 31, 40, .1);    /* 아직 안 열린 회차 막대 */
  --hs-gap: 24px;
}
:root[data-theme="dark"] {
  --hs-line: rgba(244, 235, 220, .24);
  --hs-dash: rgba(244, 235, 220, .2);
  --hs-track: rgba(244, 235, 220, .12);
}
@media (min-width: 1024px) { :root { --hs-gap: 40px; } }

/* ---- 섹션 머리: 큰 영문 제목 · 한글 부제 · 오른쪽 끝 링크 ---- */
.hs-head .hs-more { margin-left: auto; align-self: flex-end; min-height: 44px; padding-bottom: .3em; }
@media (max-width: 767px) { .hs-head .hs-more { margin-left: 0; padding-bottom: 0; } }

/* ---- 공통 글자 조각 ---- */
.hs-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.hs-k { font-size: 15px; font-weight: 600; color: var(--ink-2); line-height: 1.45; }
.hs-status { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; background: var(--brand); color: var(--brand-on); }
.hs-status.is-upcoming { background: var(--brand-tint-2); color: var(--brand); }
.hs-status.is-finished { background: var(--bg-deep); color: var(--ink-2); }
.hs-status.is-planned { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hs-line); }
.hs-ic { width: 18px; height: 18px; flex: none; }

/* =========================================================
   PROJECT — 진행 중인 프로젝트 하나를 크게
   ========================================================= */
.hs-feature { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: clamp(24px, 4vw, 56px); border-radius: 28px; background: var(--bg-alt); }
.hs-feature-text { min-width: 0; }
.hs-title { margin-top: 16px; font-size: clamp(32px, 4.2vw, 56px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.08; text-wrap: balance; }
.hs-sum { margin-top: 16px; font-size: 17px; line-height: 1.7; color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.hs-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 24px; }
.hs-actions .btn { min-height: 52px; }
@media (max-width: 599px) { .hs-actions .btn { flex: 1 1 auto; padding: 0 20px; } }

/* 그림: 드론 여섯 대 (선 그림, 테마 강조색) */
.hs-feature-art { display: grid; place-items: center; color: var(--brand); min-width: 0; }
.hs-swarm { width: 100%; max-width: 400px; height: auto; overflow: visible; }
.hs-fill { fill: currentColor; }
.hs-link { stroke-dasharray: 3 6; opacity: .5; }
@media (max-width: 1023px) {
  .hs-feature-art { order: -1; }
  .hs-swarm { max-width: 320px; }
}
@media (max-width: 599px) { .hs-swarm { max-width: 240px; } }

/* 회차 띠: 회차마다 위쪽 막대 (열린 회차 = 강조색) */
.hs-build { min-width: 0; padding-top: 24px; border-top: 1px solid var(--hair); }
.hs-build-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-bottom: 16px; }
.hs-build-h { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.hs-count { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.hs-count b { font-size: 17px; color: var(--ink); }
.hs-steps { display: grid; gap: 8px; }
.hs-step { position: relative; min-width: 0; }
.hs-step > a, .hs-step > div { display: block; height: 100%; padding: 16px 12px 12px 0; color: inherit; text-decoration: none; border-radius: 0 0 12px 12px; transition: background-color .2s; }
.hs-step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px; background: var(--hs-track); transform-origin: left center; }
.hs-step.is-open::before { background: var(--brand); }
.hs-step > a:hover { background: var(--brand-tint); }
.hs-step-n { display: block; font-size: 15px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.hs-step.is-soon .hs-step-n { color: var(--ink-3); }
.hs-step-t { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; line-height: 1.45; letter-spacing: -0.02em; text-wrap: balance; }
.hs-step.is-soon .hs-step-t { color: var(--ink-2); }
.hs-step-s { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.hs-step.is-open .hs-step-s { color: var(--brand); }
@media (min-width: 768px) {
  .hs-steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
  .hs-step > a { margin-right: -4px; padding-left: 8px; margin-left: -8px; }
}
/* 휴대폰: 세로 목록, 막대는 왼쪽 */
@media (max-width: 767px) {
  .hs-step::before { right: auto; bottom: 0; width: 3px; height: auto; transform-origin: center top; }
  .hs-step > a, .hs-step > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; align-items: baseline; min-height: 56px; padding: 12px 12px 12px 16px; border-radius: 0 12px 12px 0; }
  .hs-step-t { margin-top: 0; }
  .hs-step-s { grid-column: 2; margin-top: 4px; }
}

@media (min-width: 1024px) {
  .hs-feature { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hs-gap); row-gap: 32px; padding: 40px 48px; }
  .hs-feature-text { grid-column: 1 / span 7; align-self: center; }
  .hs-feature-art { grid-column: 8 / span 5; }
  .hs-build { grid-column: 1 / -1; }
}

/* =========================================================
   ARCHIVE — 프로젝트 카드 (진행 중 = 링크, 예정 = 흐린 점선 · 누를 수 없음)
   ========================================================= */
.hs-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .hs-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hs-gap); } }
.hs-card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 24px; background: var(--surface); overflow: hidden; transition: background-color .2s; }
.hs-cover { aspect-ratio: 2 / 1; display: grid; place-items: center; padding: 8px 16px; background: var(--brand-tint); color: var(--brand); transition: background-color .2s; }
@media (min-width: 600px) and (max-width: 899px) { .hs-cover { aspect-ratio: 3 / 1; } }
.hs-cover-svg { width: 100%; height: 100%; max-width: 360px; }
.hs-soft { opacity: .5; }
.hs-dot { fill: currentColor; stroke: none; opacity: .55; }
.hs-card-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px; min-width: 0; }
@media (max-width: 599px) { .hs-card-body { padding: 20px 16px; } }
.hs-card-title { font-size: clamp(22px, 2vw, 26px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.2; text-wrap: balance; }
.hs-card-sub { margin-top: -8px; font-size: 16px; font-weight: 600; color: var(--ink-3); }
.hs-card-sum { font-size: 16px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.hs-card-link { color: inherit; text-decoration: none; }
.hs-card-link::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.hs-card-link:focus-visible { outline: none; }
.hs-card:has(.hs-card-link:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; }
.hs-card.is-live:hover { background: var(--brand-tint); }
.hs-card.is-live:hover .hs-cover { background: var(--brand-tint-2); }
.hs-card.is-live:hover .hs-card-go .hs-ic { transform: translateX(3px); }
.hs-cprog { display: grid; gap: 8px; }
.hs-cprog p { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.hs-cprog b { color: var(--ink); }
.hs-seg { display: flex; gap: 4px; }
.hs-seg li { flex: 1; height: 4px; border-radius: 2px; background: var(--hs-track); }
.hs-seg li.is-open { background: var(--brand); }
/* 최신 회차 바로 가기: 카드 전체 링크 위에 따로 눌림 */
.hs-now { position: relative; z-index: 1; display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; background: var(--bg-alt); color: inherit; text-decoration: none; transition: background-color .2s; }
.hs-now:hover { background: var(--brand-tint-2); }
.hs-now span { font-size: 14px; font-weight: 700; color: var(--brand); }
.hs-now b { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.45; text-wrap: pretty; }
.hs-card-go { margin-top: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--brand); font-weight: 700; font-size: 16px; }
.hs-card-go .hs-ic { transition: transform .2s var(--ease); }
.hs-card.is-static { background: transparent; border: 1.5px dashed var(--hs-dash); cursor: default; }
.hs-card.is-static .hs-cover { background: transparent; color: var(--ink-3); border-bottom: 1.5px dashed var(--hs-dash); }
.hs-card.is-static .hs-card-title { color: var(--ink-2); }
.hs-card.is-static .hs-card-sum { color: var(--ink-3); }

/* =========================================================
   들어올 때 (한 번) — html.hs-motion 일 때만. 동작 줄이기면 처음부터 최종 상태.
   PROJECT: 드론이 흩어진 자리에서 대형으로 모이고, 이어서 합의 링크와 회차 막대가 차례로 그려짐.
   ARCHIVE: 카드가 왼쪽부터 차례로 올라옴.
   ========================================================= */
.hs-motion .hs-drone { transition: transform 1.4s var(--ease), opacity .5s ease; transition-delay: calc(var(--i) * 70ms); }
.hs-motion .hs-feature:not(.hs-in) .hs-drone { transform: translate(var(--sx), var(--sy)); opacity: 0; }
.hs-motion .hs-link { transition: opacity .6s ease calc(900ms + var(--i) * 50ms); }
.hs-motion .hs-feature:not(.hs-in) .hs-link { opacity: 0; }
.hs-motion .hs-step::before { transition: transform .7s var(--ease) calc(500ms + var(--i) * 110ms); }
.hs-motion .hs-feature:not(.hs-in) .hs-step::before { transform: scaleX(0); }
@media (max-width: 767px) { .hs-motion .hs-feature:not(.hs-in) .hs-step::before { transform: scaleY(0); } }
.hs-motion .hs-card { transition: opacity .6s ease, transform .8s var(--ease), background-color .2s; }
.hs-motion .hs-card:nth-child(2) { transition-delay: 90ms, 90ms, 0s; }
.hs-motion .hs-card:nth-child(3) { transition-delay: 180ms, 180ms, 0s; }
.hs-motion .hs-cards:not(.hs-in) .hs-card { opacity: 0; transform: translateY(24px); }
@media (prefers-reduced-motion: reduce) {
  .hs-drone, .hs-link, .hs-step::before, .hs-card, .hs-cover, .hs-card-go .hs-ic, .hs-now, .hs-step > a { transition: none !important; }
}