/* teaser.css — 티저 와이어프레임 전용. 토큰·자리표시(.ph)·라벨(.lbl)·버튼(.btn)은 wf.css에서 온다.
   한 스크롤. 12칸 격자 하나로 모든 구간을 정렬한다.
   구간 머리(번호+라벨)는 데스크톱에서 왼쪽 2칸, 내용은 3~12칸. 폰에서는 머리가 위로 올라간다.
   위계는 크기와 굵기로만. 구간 사이는 헤어라인 하나. */

html { scroll-behavior: smooth; }
body { margin: 0; }
main { max-width: none; padding: 0; }

/* ── 격자 ── */
.sec {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s4); row-gap: var(--s8);
  max-width: var(--max); margin: 0 auto; box-sizing: border-box;
  padding: var(--s12) var(--gutter) var(--s16);
  border-top: 1px solid var(--seam);
  scroll-margin-top: var(--head-h);
}
.sec-head { grid-column: 1 / -1; display: flex; gap: var(--s3); }
.sec-head .num { color: var(--mute); }
h2 { font-size: var(--t-md); font-weight: 600; margin: var(--s10) 0 var(--s3); letter-spacing: -.02em; }
h2:first-child { margin-top: 0; }
.hint { color: var(--mute); font-size: var(--t-sm); max-width: var(--prose); }

/* ── 상단 바 — 항상. 알약 4개 + 미끄러지는 인디케이터 ── */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  height: var(--head-h); padding: 0 var(--gutter); box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.bar.past { border-bottom-color: var(--seam); }
.bar .brand { font-family: var(--f-label); font-weight: 600; font-size: var(--t-sm); white-space: nowrap; }
.bar .brand small { font-weight: 400; color: var(--mute); margin-left: var(--s2); }
.nav {
  position: relative; display: flex; gap: var(--s1);
  padding: 3px; border-radius: 999px; background: var(--nav-off);
}
.nav a {
  position: relative; z-index: 1;
  font-family: var(--f-label); font-size: var(--t-sm); font-weight: 500;
  color: var(--nav-off-ink); padding: 0 var(--s4); height: 32px; line-height: 32px;
  border-radius: 999px; white-space: nowrap; transition: color .35s;
}
.nav a[aria-current] { color: var(--nav-on-ink); }
.nav .thumb {
  position: absolute; top: 3px; left: 0; height: 32px; width: 0;
  border-radius: 999px; background: var(--nav-on);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), width .45s cubic-bezier(.2, .7, .2, 1);
}

/* ── ① 랜딩 — 화면 하나. 영상 루프 자리 위에 제목. 하단 줄은 격자 안 ── */
.hero { position: relative; min-height: 100svh; display: grid; }
.hero .loop { position: absolute; inset: 0; aspect-ratio: auto; }
.hero-text {
  position: relative; align-self: end; width: 100%; max-width: var(--max);
  margin: 0 auto; box-sizing: border-box;
  padding: 0 var(--gutter) var(--s8);
}
.hero h1 {
  font-size: var(--t-display); font-weight: 600; line-height: 1.08; letter-spacing: -.03em;
  margin: 0 0 var(--s6); text-wrap: balance;
}
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); align-items: baseline; }
.hero-meta .cue { margin-left: auto; }

/* ── ② 초대장 — 카드 3~6칸, 글 8~12칸 ── */
.card { grid-column: 1 / -1; }
.card .vector { aspect-ratio: 3 / 4; }
.invite-body { grid-column: 1 / -1; }
.lead { font-size: var(--t-xl); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; margin: 0 0 var(--s8); }
.facts { display: grid; grid-template-columns: 6em 1fr; margin: 0; max-width: 34rem; }
.facts dt, .facts dd { padding: var(--s3) 0; border-top: 1px solid var(--seam); margin: 0; }
.facts dt { font-family: var(--f-label); color: var(--mute); font-size: var(--t-sm); }
.facts dd { font-size: var(--t-base); }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s8); max-width: 34rem; }
.acts .btn { text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; }

/* ── ③ 정보 — 포스터 3~5칸, 글 7~12칸 ── */
.poster { grid-column: 1 / -1; }
.poster .sheet { aspect-ratio: 2 / 3; }
.info-body { grid-column: 1 / -1; }
.info .wide { max-width: 40rem; }
.info .wide + .hint { margin-top: var(--s3); }

/* ── ④ 방명록 — 쓰기 줄 하나, 목록은 헤어라인 ── */
.guest-body { grid-column: 1 / -1; }
.write { display: grid; gap: var(--s3); }
.write input {
  font: inherit; color: inherit; background: none; min-height: 44px; box-sizing: border-box;
  border: 0; border-bottom: 1px solid var(--seam); padding: var(--s2) 0;
}
.write input::placeholder { color: var(--mute); }
.write input:focus-visible { outline: none; border-bottom-color: var(--ink); }
.write .btn { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; background: none; font: inherit; font-family: var(--f-label); cursor: pointer; }
.hp { position: absolute; left: -9999px; }
.entries { margin: var(--s10) 0 0; padding: 0; }
.entries li {
  display: grid; grid-template-columns: 7em 1fr auto; gap: var(--s2) var(--s4);
  padding: var(--s3) 0; border-top: 1px solid var(--seam);
}
.entries .n { font-weight: 500; }
.entries .d { color: var(--mute); font-size: var(--t-sm); }

.foot {
  max-width: var(--max); margin: 0 auto; box-sizing: border-box;
  padding: var(--s8) var(--gutter) var(--s16); border-top: 1px solid var(--seam);
  color: var(--mute); font-size: var(--t-sm);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s6);
}
.foot p { margin: 0; }

/* ── 데스크톱: 구간 머리 왼쪽 2칸, 내용은 3칸부터 ── */
@media (min-width: 60rem) {
  .sec { padding-top: var(--s16); padding-bottom: var(--s24); }
  .sec-head { grid-column: 1 / 3; flex-direction: column; gap: var(--s1); }
  .card { grid-column: 3 / 7; }
  .invite-body { grid-column: 8 / 13; }
  .poster { grid-column: 3 / 6; }
  .info-body { grid-column: 7 / 13; }
  .guest-body { grid-column: 3 / 13; }
  .write { grid-template-columns: 12rem 1fr auto; align-items: end; }
  .write .btn { justify-self: end; }
  .acts { grid-template-columns: repeat(4, auto); justify-content: start; max-width: none; }
  .acts .btn { padding-inline: var(--s5); }
  .hero-text { padding-bottom: var(--s12); }
}
@media (min-width: 40rem) and (max-width: 60rem) {
  .sec-head { grid-column: 1 / -1; }
  .card { grid-column: 1 / 7; }
  .invite-body { grid-column: 7 / 13; }
  .poster { grid-column: 1 / 5; }
  .info-body { grid-column: 5 / 13; }
}
@media (max-width: 40rem) {
  .bar .brand small { display: none; }
  .nav a { padding: 0 var(--s3); }
  .entries li { grid-template-columns: 1fr auto; }
  .entries .m { grid-column: 1 / -1; order: 1; }
}