/* WYD 2027 광주대교구대회 랜딩 — 「부드러운 톤 v1」 (2026-10-03 코드 반영)
   값의 출처: Paper 01KVQCG0V4PYMAEEKNM23RXF5Y 페이지 2-0 「부드러운 톤 v1 · KO 00~07 / 모바일 00~07 · 상태」
   실측(get_jsx). 정본 규칙: catholic/wyd/00-정본/WYD_랜딩_비비드톤_레퍼런스분석_v1.md 「최종 정본 (2026-09-29)」.
   흰 바탕 · 강조 파랑 #0047BB 하나 · 빨강은 큰 글자 한 점 · 버튼 48/r8 · 카드 r14 · 사진 r20 ·
   푸터 #222222 + 흰 WYD 로고 + 광주 CI · 헤더 WYD 교구 로고 왼쪽 · 붓 획·방사형 금지 · 서체 기존 유지.
   사진: 히어로 흑백, 본문 채도 88%/밝기 104%.
   이 파일은 랜딩(public/landing/ko.html · en.html) 전용이다. 신청 화면(Next)은 app/globals.css를 쓴다. */

@import url("./arita.css");

/* ── 라틴 글꼴 자체 호스팅 (2026-10-19) ──
   종전에는 구글 글꼴을 @import로 걸었다. 페이지 → 이 파일 → 구글 목록 → 글꼴 파일 순으로 사슬이 길어
   글꼴이 첫 그리기보다 늦게 왔고, 히어로 제목(Playfair 보통 · Playfair 기울임 · DM Serif 기울임)이
   대체 글꼴로 먼저 그려졌다가 세 번 따로 바뀌어 「조립되는」 것처럼 보였다(대표 지적).
   이제 같은 파일(구글 v40/v17/v42 라틴 서브셋, OFL)을 직접 두고, 각 랜딩 <head>가 히어로 글꼴을 preload한다.
   가변 글꼴이라 무게마다 같은 파일이다. 6개 언어 랜딩의 글자는 전부 이 범위 안이다(프랑스어 œ 포함).
   Playfair 보통은 파일 축이 400–900이다 — 모바일 기간 카드 날짜 · 주제어가 600 · 700을 써서 400–700으로 연다(2026-10-25). */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("./fonts/landing/PlayfairDisplay.latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 500; font-display: swap;
  src: url("./fonts/landing/PlayfairDisplay-Italic.latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Serif Display"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("./fonts/landing/DMSerifDisplay-Italic.latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("./fonts/landing/NotoSans.latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── tokens ── */
:root {
  --white: #FFFFFF;
  --ink: #222222;          /* 본문·제목 */
  --ink-2: #3F3F3F;        /* 리드 */
  --muted: #6A6A6A;        /* 구역 이름·보조 글 */
  --faint: #B0B0B0;        /* 푸터 보조 글 */
  --disabled: #C1C1C1;
  --line: #DDDDDD;         /* 카드 테두리·구획 첫 줄 */
  --line-soft: #EBEBEB;    /* 목록 사이 줄 */
  --soft: #F7F7F7;         /* 「약」 판 */
  --chip: #F2F2F2;         /* 원형 단추 바탕 */
  --blue: #0047BB;         /* 강조 하나 */
  --blue-hover: #003C9E;
  --blue-sub: #D6E0F3;     /* 파랑 면 위 구역 이름 */
  --blue-text: #E6ECF7;    /* 파랑 면 위 본문 */
  --blue-rail: #8FA9DC;    /* 파랑 면 위 남은 길 */
  --red: #F32735;          /* 큰 글자 한 점 */
  --footer: #F5F5F5;       /* 푸터 바탕 Gray 1 — 공식 팔레트 안, 컬러 마스터 로고를 그대로 올린다 */
  --footer-line: #DCDCDC;
  --footer-text: #525252;
  --sky: #DDE6EE;          /* 광주 사진이 뜨기 전 하늘색 바탕 */

  --font-display: "Playfair Display", Georgia, serif;
  --font-sans: "Noto Sans", system-ui, -apple-system, sans-serif;
  --font-ko-display: "Arita Buri KR", "Noto Serif KR", serif;
  --font-ko-body: "Arita Dotum KR", "Noto Sans KR", system-ui, sans-serif;

  --shadow-float: 0 0 0 1px rgba(0,0,0,.02), 0 2px 6px rgba(0,0,0,.04), 0 4px 8px rgba(0,0,0,.10);

  --page: 1440px;
  --gutter: 64px;
  /* 초광폭에서 글은 가운데 1312 폭에 서고, 바탕·사진은 화면 끝까지 간다. */
  --page-inset: max(var(--gutter), calc(50% - var(--page) / 2 + var(--gutter)));

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 1100px) { :root { --gutter: 40px; } }
@media (max-width: 768px)  { :root { --gutter: 20px; } }

/* 모바일 전용 짧은 문장 — 원문과 짧은 문장을 나란히 두고 한쪽만 보인다(숨긴 쪽은 display:none이라 스크린리더도 읽지 않는다) */
.t-short { display: none; }
@media (max-width: 768px) {
  .t-full { display: none; }
  .t-short { display: inline; }
}

/* ── reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.ko { font-family: var(--font-ko-body); }
/* 한글 지면은 어절 단위로 끊는다. 붙여쓴 URL·긴 영문 토큰은 overflow-wrap이 받는다. */
html[lang="ko"] body { word-break: keep-all; overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* 안드로이드 크롬은 누른 자리에 옅은 파란 사각형을 그린다 — 메뉴 · 언어 단추에서 눌림이 사각형으로 보였다
   (2026-10-25 대표 지적). 앱 지면은 Tailwind 기본값이 끄고 있어 랜딩만 남아 있었다. 키보드 포커스 선은 그대로다. */
html { -webkit-tap-highlight-color: transparent; }
/* 가로 스크롤 방지 — clip은 스크롤 컨테이너를 만들지 않아 상단 바의 sticky가 산다. */
.site { position: relative; overflow-x: clip; }
.section { padding-inline: var(--page-inset); }

/* ── 활자 ── */
.kicker {
  font-size: 14px; line-height: 18px; font-weight: 500; color: var(--muted);
}
.en .kicker {
  font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.kicker--on-blue { color: var(--blue-sub); }

/* 화면 제목 — KO는 아리따 부리 600, EN은 Playfair 500. 두 줄은 span 둘로 나눈다. */
.h2 {
  font-family: var(--font-ko-display); font-weight: 600;
  font-size: 48px; line-height: 62px; letter-spacing: -0.015em; color: var(--ink);
}
.en .h2 { font-family: var(--font-display); font-weight: 500; line-height: 58px; }
.h2 > span { display: block; }
.h2--sm { font-size: 32px; line-height: 44px; letter-spacing: -0.01em; }
.en .h2--sm { line-height: 40px; }
.h2--on-blue { color: var(--white); }
.head { display: flex; flex-direction: column; gap: 16px; }

.lead { font-size: 17px; line-height: 29px; font-weight: 500; color: var(--ink-2); }

.link {
  align-self: flex-start;
  color: var(--blue); font-size: 16px; line-height: 24px; font-weight: 600;
  text-decoration: underline 1px; text-underline-offset: 4px;
  transition: text-decoration-thickness 160ms var(--ease-out);
}
.link:hover { text-decoration-thickness: 2px; }
.link--arrow { display: inline-flex; align-items: center; gap: 6px; }
.link--arrow svg { flex-shrink: 0; }

/* ── 버튼 — 48 / radius 8 / 파랑 하나 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border-radius: 8px; border: 0;
  background: var(--blue); color: var(--white);
  font-size: 16px; line-height: 20px; font-weight: 600; white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out);
}
.btn:hover { background: var(--blue-hover); }
.btn svg { flex-shrink: 0; transition: transform 160ms var(--ease-out); }
.btn:hover svg { transform: translateX(2px); }
.btn--block { display: flex; width: 100%; }

/* 본문 사진 — 파일 색 그대로 쓴다. 종전 정본 규칙(채도 88% · 밝기 104% 필터)은 2026-10-25 대표 결정으로 뺐다. */
.photo { background-size: cover; background-position: 50%; background-color: #EEE; }

/* ══ 상단 바 ══ */
.nav {
  position: relative; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  height: 88px; padding-inline: var(--page-inset); /* 112 → 88(2026-10-04): 여백이 커서 메뉴가 떠 보였다 */
  background: var(--white); border-bottom: 1px solid var(--line);
}
.nav__brand { display: block; flex-shrink: 0; }
.nav__brand img { width: 106px; height: 58px; object-fit: contain; object-position: left center; }
.nav__right { display: flex; align-items: center; gap: 24px; } /* 32 → 24(2026-10-16): 메뉴 묶음을 오른쪽 여백선 쪽으로 좁힌다 */
.nav__links { display: flex; align-items: center; gap: 24px; }
.nav__links a { font-size: 16px; line-height: 20px; font-weight: 600; color: var(--ink); }
.nav__links a:hover { color: var(--blue); }
.nav__links .nav__contact { color: var(--blue); }
.nav__toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border-radius: 9999px;
  border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer;
}
/* ☰ · ✕ 두 아이콘을 한자리에 겹쳐 두고, 열림 상태에 따라 하나만 보인다(바꿈 움직임은 파일 끝 「메뉴 열고 닫기」). */
.nav__toggle { position: relative; }
.nav__toggle-x { position: absolute; inset: 0; margin: auto; opacity: 0; transform: rotate(-90deg) scale(.6); }
.menu-open .nav__toggle-bars { opacity: 0; transform: rotate(90deg) scale(.6); }
.menu-open .nav__toggle-x { opacity: 1; transform: none; }

/* 언어 — 알약 + 카드(데스크톱) / 시트(모바일) */
.langsw { position: relative; }
.langsw__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px; border-radius: 9999px;
  border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer;
  font-family: var(--font-sans); font-size: 14px; line-height: 18px; font-weight: 600;
}
.langsw__btn:hover { border-color: var(--ink); }
.langsw__btn svg { flex-shrink: 0; transition: transform 160ms var(--ease-out); }
.langsw__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.langsw__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
  display: flex; flex-direction: column; min-width: 220px; padding: 8px;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-float);
}
.js .langsw__menu { display: none; }
.js .langsw__menu.is-open { display: flex; animation: fade-in 160ms var(--ease-out) both; }
.langsw__head, .langsw__backdrop { display: none; }
.langsw__item {
  display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 12px; border-radius: 8px;
  font-family: var(--font-sans); color: var(--ink);
}
.langsw__item:hover { background: var(--soft); }
.langsw__name { flex: 1; font-size: 16px; line-height: 22px; font-weight: 500; }
.langsw__item[lang="ko"] .langsw__name { font-family: var(--font-ko-body); }
.langsw__item[aria-current="true"] .langsw__name { font-weight: 700; }
/* 국기 — 원형 18 · 옅은 테두리(2026-10-16 Paper 나안). 버튼에는 넣지 않고 메뉴 안에만 둔다. */
.langsw__flag { width: 18px; height: 18px; flex-shrink: 0; border-radius: 9999px; object-fit: cover;
                box-shadow: 0 0 0 1px rgba(0,0,0,.10); }
.langsw__item[aria-current="true"] { background: #EEF3FB; }
.langsw__item[aria-current="true"] .langsw__name { color: var(--blue); font-weight: 600; }
.langsw__check { width: 20px; height: 20px; flex-shrink: 0; color: var(--blue); }

/* 모바일 메뉴 오버레이 — 상단 바(64) 아래 흰 면, 큰 부리 글자 목록 + 아래 전폭 버튼 */
/* 닫혀 있어도 자리를 지키고 visibility로만 숨긴다 — display를 켜고 끄면 나타나는 움직임을 줄 수 없다. */
.menu {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column;
  padding: 88px var(--gutter) 32px;
  background: var(--white); overflow-y: auto;
  visibility: hidden; opacity: 0; pointer-events: none;
}
.menu.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
@media (min-width: 1101px) { .menu { display: none; } }
/* 데스크톱 메뉴 묶음(About ~ 언어)은 본문 여백선보다 32px 오른쪽까지 민다(2026-10-16 대표 결정).
   로고는 여백선 그대로. 모바일 · 태블릿(1100 이하)은 메뉴 단추 하나라 여백선을 지킨다. */
@media (min-width: 1101px) { .nav { padding-right: calc(var(--page-inset) - 32px); } }
.menu__list { display: flex; flex-direction: column; }
.menu__list a {
  display: flex; align-items: center; justify-content: space-between; height: 68px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-ko-display); font-weight: 600;
  font-size: 26px; line-height: 34px; letter-spacing: -0.01em; color: var(--ink);
}
.en .menu__list a { font-family: var(--font-display); font-weight: 500; }
.menu__list a svg { color: var(--muted); flex-shrink: 0; }
.menu__list .menu__contact, .menu__list .menu__contact svg { color: var(--blue); }
.menu__cta { margin-top: auto; height: 52px; }
.menu-open { overflow: hidden; }
.menu-open body { position: fixed; left: 0; right: 0; width: 100%; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ══ 00 히어로 ══ */
.hero {
  display: grid; grid-template-columns: 608fr 640fr; gap: 64px;
  padding: 32px var(--page-inset);
  height: clamp(560px, calc(100svh - 88px), 784px);
}
.hero__copy {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 40px; min-width: 0;
}
.hero__kicker {
  font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  margin-bottom: -16px; /* 표어와의 간격 24 (copy gap 40 - 16) */
}
.hero__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: min(104px, 7.23vw); line-height: 1.0385; letter-spacing: -0.02em; color: var(--ink);
}
.hero__title > span { display: block; }
.hero__title .it { font-style: italic; }
.hero__red { color: var(--red); }
.hero__cta { align-self: flex-start; }
.hero__photo {
  border-radius: 20px;
  background-size: cover; background-position: 78% 50%; background-color: #EEE;
}
.hero__photo { position: relative; min-width: 0; }

/* 데스크톱: 사진을 히어로 오른쪽 끝까지 깔고 왼쪽을 흰색으로 녹여 제목을 올린다(2026-10-04 Paper 예시 나).
   사진 칸은 1440 기준 왼쪽 400부터 끝까지(27.8%), 페이드는 사진 왼쪽 절반. */
@media (min-width: 1101px) {
  .hero { position: relative; }
  .hero__photo { position: absolute; top: 0; bottom: 0; right: 0; left: 27.78%; border-radius: 0; }
  .hero__photo::after { content: ""; position: absolute; top: 0; bottom: 0; left: -2px; width: calc(50% + 2px); z-index: 1;
                        background: linear-gradient(to right, #FFF 0%, #FFF 22%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 100%); }
  /* 사진 아래 경계선이 보이지 않게 아래 120px만 흰색으로 녹인다(2026-10-04) */
  .hero__photo::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 121px; z-index: 1;
                         background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 60%, #FFF 100%); }
  /* 제목 묶음은 왼쪽 칸 한가운데(2026-10-04 Paper) */
  .hero__copy { position: relative; z-index: 2; justify-content: center; align-items: center; text-align: center; }
  .hero__cta { align-self: center; }
}


.about {
  display: grid; grid-template-columns: 608fr 640fr; gap: 64px; align-items: center;
  padding-block: 96px;
}
.about__text { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.about__photo { aspect-ratio: 1; border-radius: 20px; background-position: 50% 50%; }

/* ══ 02 광주라는 곳 ══ */
.where { position: relative; height: 1000px; background: var(--sky); }
.where__photo { position: absolute; inset: 0; background-position: 50% 100%; background-color: var(--sky); }
.where__text { position: relative; display: flex; flex-direction: column; gap: 16px; padding-top: 128px; }
.where__kicker { color: var(--ink-2); font-weight: 600; }
.en .where__kicker { color: var(--ink-2); }
.where__row { display: grid; grid-template-columns: 736fr 576fr; align-items: end; }
.where__para { padding-bottom: 6px; font-size: 17px; line-height: 29px; font-weight: 500; color: var(--ink); }

.why { padding-bottom: 96px; }
.why__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
             padding-top: 96px; padding-bottom: 32px; }
.why__arrows { display: flex; gap: 8px; padding-bottom: 4px; }
.why__arrow {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border-radius: 9999px;
  border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer;
  transition: border-color 160ms var(--ease-out);
}
.why__arrow:hover:not(:disabled) { border-color: var(--ink); }
.why__arrow:disabled { color: var(--disabled); cursor: default; }
.why__track {
  display: flex; gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-inline: var(--page-inset); scroll-padding-inline: var(--page-inset);
  scrollbar-width: none;
}
.why__track::-webkit-scrollbar { display: none; }
.why__card { flex: 0 0 384px; display: flex; flex-direction: column; gap: 16px; scroll-snap-align: start; }
.why__img { position: relative; height: 288px; border-radius: 14px; overflow: hidden; }
.why__body { display: flex; flex-direction: column; gap: 6px; }
.why__title { font-size: 20px; line-height: 26px; font-weight: 600; color: var(--ink); }
.why__text { font-size: 15px; line-height: 24px; font-weight: 500; color: var(--muted); }
.why__progress { display: none; }

/* ══ 03 머무는 곳 ══ */
.stay__head {
  display: grid; grid-template-columns: 608fr 640fr; gap: 64px; align-items: end;
  padding-top: 96px; padding-bottom: 56px;
}
.stay__lead { padding-bottom: 8px; font-size: 20px; line-height: 32px; font-weight: 500; color: var(--ink); }
.stay__row { display: grid; grid-template-columns: 608fr 640fr; gap: 64px; padding-bottom: 128px; }
.stay__photo { min-height: 720px; border-radius: 20px; background-position: 50% 30%; }
.stay__list { display: flex; flex-direction: column; min-width: 0; }
.stay__item { display: flex; gap: 32px; padding-block: 32px; border-top: 1px solid var(--line-soft); }
.stay__item:first-child { border-top-color: var(--line); }
.stay__item:last-of-type { border-bottom: 1px solid var(--line-soft); }
.stay__icon { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 96px; flex-shrink: 0; }
.stay__icon svg { width: 48px; height: 48px; }
.stay__icon span { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--muted); text-align: center; }
.stay__item p { flex: 1; min-width: 0; font-size: 17px; line-height: 29px; font-weight: 500; color: var(--ink); }
.stay__link { margin-top: 32px; }

/* ══ 04 참가 절차 — 파랑 면 ══ */
.journey { padding-bottom: 32px; }
.journey__panel {
  display: flex; flex-direction: column; gap: 72px;
  padding: 80px 64px; border-radius: 20px; background: var(--blue); color: var(--white);
}
.tl { position: relative; }
.tl__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tl__step { display: flex; flex-direction: column; min-width: 0; }
.tl__when { height: 24px; font-size: 14px; line-height: 24px; font-weight: 600; color: var(--white); white-space: nowrap; }
.tl__step--now .tl__when { font-weight: 700; }
.tl__when--num { font-family: var(--font-sans); letter-spacing: .02em; }
.tl__rail { display: flex; align-items: center; height: 40px; }
.tl__node { position: relative; width: 16px; height: 16px; flex-shrink: 0; border-radius: 9999px;
            background: var(--blue); border: 2px solid var(--white); }
/* 04 도착 — 선이 닿으면 빈 원 안이 흰색으로 차오른다(landing.js가 판에 .is-arrived를 건다). */
.tl__node::after { content: ""; position: absolute; inset: -2px; border-radius: 9999px; background: var(--white); transform: scale(0); }
.is-arrived .tl__step:last-child .tl__node::after { transform: none; }
.journey__panel { position: relative; overflow: clip; }
.tl__line { flex: 1; height: 1px; border-radius: 9999px; background: var(--blue-rail); }
.tl__step--now .tl__node { background: var(--white); }
.tl__step--now .tl__line { height: 2px; background: var(--white); }
.tl__body { display: flex; flex-direction: column; gap: 8px; padding-top: 28px; padding-right: 40px; }
.tl__num { font-family: var(--font-display); font-weight: 500; font-size: 44px; line-height: 52px;
           letter-spacing: -0.01em; font-variant-numeric: lining-nums; color: var(--white); }
.tl__name { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--white); }
.tl__desc { font-size: 16px; line-height: 26px; font-weight: 500; color: var(--blue-text); }
.tl__logo { position: absolute; right: 0; top: -24px; width: 80px; height: 44px; object-fit: contain; object-position: right bottom; }

/* ══ 05 등록 안내 ══ */
.before { display: flex; flex-direction: column; gap: 48px; padding-block: 96px; }
.before__cards { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 24px; align-items: start; }
.before__card { display: flex; flex-direction: column; padding: 8px 32px 24px; border-radius: 14px; }
.before__card--ask { background: var(--white); border: 1px solid var(--line); }
.before__card--not { background: var(--soft); }
.before__cardhead { display: flex; align-items: center; gap: 12px; padding: 24px 0 20px; }
.before__badge { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
                 flex-shrink: 0; border-radius: 9999px; }
.before__badge--yes { background: var(--blue); color: var(--white); }
.before__badge--no { background: var(--white); border: 1px solid var(--disabled); color: var(--ink); }
.before__title { font-size: 20px; line-height: 26px; font-weight: 600; color: var(--ink); }
.before__list li { padding-block: 18px; border-top: 1px solid var(--line-soft);
                   font-size: 17px; line-height: 27px; font-weight: 500; color: var(--ink); }
.before__card--not .before__list li { border-top-color: var(--line); }
.before__note { padding-top: 16px; border-top: 1px solid var(--line-soft);
                font-size: 14px; line-height: 22px; font-weight: 500; color: var(--muted); }
.before__foot { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 24px; align-items: end; padding-top: 8px; }
.before__privacy { display: flex; flex-direction: column; gap: 12px; padding-right: 64px; }
.before__privacy p { font-size: 15px; line-height: 24px; font-weight: 500; color: var(--muted); }
/* 버튼은 푸터 「순례단과 함께 광주로 오십시오」 버튼과 같게 — 글자 폭, 오른쪽 끝, 세로 가운데(2026-10-04) */
.before__cta { justify-self: end; align-self: center; }

/* ══ 06 자주 묻는 질문 ══ */
.faqsec { display: flex; flex-direction: column; gap: 48px; padding-top: 96px; padding-bottom: 128px; }
.faqsec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.faqsec__contact--top { padding-bottom: 12px; }
.faqsec__contact--bottom { display: none; }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: start; }
.faq__col { display: flex; flex-direction: column; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-soft); }
.faq__item { border-top: 1px solid var(--line-soft); }
.faq__col > .faq__item:first-child { border-top: 0; }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 24px; cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__qtext { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.faq__cat { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--muted); }
.en .faq__cat { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
.faq__title { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--ink); }
.faq__sign {
  position: relative; width: 32px; height: 32px; flex-shrink: 0; border-radius: 9999px; background: var(--chip);
  transition: background-color 160ms var(--ease-out);
}
.faq__q:hover .faq__sign { background: var(--line-soft); }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.8px; border-radius: 2px;
  background: var(--ink); transform: translate(-50%, -50%);
  transition: transform 200ms var(--ease-out);
}
.faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__item[open] .faq__q { padding-bottom: 16px; }
.faq__a { padding: 0 56px 32px 0; }
.faq__a p { font-size: 16px; line-height: 27px; font-weight: 500; color: var(--ink-2); }
.faq__more { display: none; }

/* ══ 07 선언문 ══ */
.manifesto { padding-top: 128px; padding-bottom: 144px; }
.manifesto__inner { display: flex; flex-direction: column; gap: 32px; }
.manifesto__verse {
  font-family: var(--font-ko-display); font-weight: 600;
  font-size: 88px; line-height: 108px; letter-spacing: -0.025em; color: var(--ink);
}
.en .manifesto__verse { font-family: var(--font-display); font-weight: 500; font-size: 80px; line-height: 96px; letter-spacing: -0.02em; }
.manifesto__verse > span { display: block; }
.manifesto__red { color: var(--red); }
.manifesto__source { display: flex; align-items: center; gap: 12px;
                     font-size: 15px; line-height: 22px; font-weight: 500; color: var(--muted); }
.manifesto__source i { width: 24px; height: 1px; flex-shrink: 0; background: var(--disabled); }

/* ══ 푸터 — 긴 푸터 ══ */
.footer { padding-top: 80px; padding-bottom: 32px; background: var(--footer); color: #000000;
          border-top: 1px solid var(--footer-line); }
.footer__cta { display: flex; align-items: center; justify-content: space-between; gap: 64px; padding-bottom: 80px; }
.footer__lead { font-family: var(--font-ko-display); font-weight: 600;
                font-size: 36px; line-height: 48px; letter-spacing: -0.01em; }
.en .footer__lead { font-family: var(--font-display); font-weight: 500; }
.footer__btn { flex-shrink: 0; }
.footer__mid {
  display: grid; grid-template-columns: minmax(0, 672fr) 256fr 256fr; gap: 64px; align-items: start;
  padding-block: 48px; border-top: 1px solid var(--footer-line);
}
.footer__wyd a, .footer__diocese a { display: inline-flex; }
.footer__wyd img { width: 220px; height: 121px; object-fit: contain; object-position: left center; }
.footer__links { display: flex; flex-direction: column; gap: 12px; }
.footer__links a { font-size: 15px; line-height: 22px; font-weight: 500; color: #000000; }
.footer__links a:hover { text-decoration: underline 1px; text-underline-offset: 3px; }
.footer__diocese { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; text-align: right; }
.footer__diocese img { width: 160px; height: auto; }
/* KO 지면의 머리말·푸터 교구대회명은 국문 명칭이라 한글 글꼴로 (2026-10-21 검색 문구). */
.ko .footer__did { font-family: var(--font-ko-body); }
.footer__did { font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 500;
               letter-spacing: .1em; text-transform: uppercase; color: var(--footer-text); }
.footer__bottom {
  display: grid; grid-template-columns: minmax(0, 672fr) 256fr 256fr; gap: 64px; align-items: start;
  padding-top: 24px; border-top: 1px solid var(--footer-line);
  font-size: 13px; line-height: 20px; font-weight: 500; color: var(--footer-text);
}
.footer__org { display: flex; flex-direction: column; }
.footer__org a { color: #000000; }
.footer__org a:hover { text-decoration: underline 1px; text-underline-offset: 3px; }
.footer__privacy { display: flex; justify-content: flex-end; }
.footer__privacy a { color: #000000; text-decoration: underline 1px; text-underline-position: from-font; }

/* ══ 떠 있는 등록 CTA ══ */
.sticky-cta {
  position: fixed; right: var(--page-inset); bottom: 40px; z-index: 20;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
}
.sticky-cta .btn { width: auto; display: inline-flex; box-shadow: var(--shadow-float); }
.js .sticky-cta.is-on { opacity: 1; visibility: visible; transform: none;
                        transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s; }
html.menu-open .sticky-cta.is-on { opacity: 0; visibility: hidden; }

/* ══ 스크롤 진입 ══ */
.js [data-reveal] { opacity: 0; transform: translateY(16px);
                    transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal]:focus-within { opacity: 1; transform: none; }

/* ════════ 1101–1439: 같은 구조, 폭만 줄인다 ════════ */
@media (max-width: 1439px) {
  .journey__panel { padding-inline: 48px; }
  .tl__body { padding-right: 24px; }
}

/* ════════ ≤1100: 모바일 구조 (상단 바 64 · 단 쌓기) ════════ */
@media (max-width: 1100px) {
  .nav {
    position: sticky; top: 0; height: 64px;
    transition: transform 240ms var(--ease-out);
  }
  .nav.is-hidden { transform: translateY(-100%); }
  .menu-open .nav { position: fixed; left: 0; right: 0; top: 0; transform: none; }
  .nav__brand img { width: 80px; height: 44px; }
  .nav__right { gap: 8px; }
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .langsw__btn { height: 44px; padding: 0 16px; }

  /* 첫 화면에 버튼까지 다 보이게 — 주소표시줄을 뺀 높이(svh)에 히어로를 맞추고 사진이 남는 자리만큼 준다.
     vh는 주소표시줄이 숨은 높이라 버튼이 그 아래로 밀렸다(2026-10-03 대표 지적). */
  /* 사진을 좌우 끝까지 깔고 아래를 흰색으로 녹여 그 위에 제목을 올린다(2026-10-04 Paper 「풀 가」).
     실제 아이폰 사파리는 보이는 높이가 660 안팎이라 사진 칸을 따로 두면 16:9로 납작해졌다.
     사진 높이 = 보이는 높이 - 상단 바 - 글 높이 + 겹침. 제목 17vw(375에서 64), 소제목은 모바일에서 뺀다. */
  .hero { --hero-fs: clamp(44px, 17vw, 80px); --hero-overlap: 146px;
          --hero-copy-h: calc(116px + 3.27 * var(--hero-fs));
          display: flex; flex-direction: column; gap: 0; height: auto; padding: 0 0 24px; }
  /* 좁은 화면은 사진을 조금 더 오른쪽으로 당긴다: 다섯 사람 얼굴이 모두 들어오게(2026-10-13) */
  .hero__photo { order: -1; border-radius: 0; background-position: 84% 50%;
                 height: clamp(300px, calc(100svh - 64px - var(--hero-copy-h) + var(--hero-overlap)), 560px); }
  .hero__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 190px; z-index: 1;
                        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 50%, #FFF 72%); }
  .hero__copy { position: relative; z-index: 2; gap: 20px; margin-top: calc(-1 * var(--hero-overlap));
                padding: 20px var(--gutter) 0; text-align: center; }
  .hero__kicker { display: none; }
  .hero__title { font-size: var(--hero-fs); line-height: 1.09; }
  .hero__cta { align-self: stretch; height: 52px; }


  .about { display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding: 64px var(--gutter); }
  .about__text { gap: 24px; }
  .about__photo { aspect-ratio: auto; height: 350px; }
  .head { gap: 12px; }
  .h2 { font-size: 30px; line-height: 40px; }
  .en .h2 { line-height: 38px; }
  .h2--sm { font-size: 26px; line-height: 36px; }
  .en .h2--sm { line-height: 34px; }
  .lead { font-size: 16px; line-height: 27px; }
  .link { min-height: 44px; display: inline-flex; align-items: center; }

  .where { height: 760px; }
  .where__photo { background-position: 28% 100%; }
  .where__text { padding-top: 64px; gap: 12px; }
  .where__row { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  .where__para { padding-bottom: 0; font-size: 16px; line-height: 27px; }

  .why { padding-bottom: 64px; }
  .why__head { padding-top: 64px; padding-bottom: 24px; }
  .why__arrows { display: none; }
  .why__track { gap: 16px; }
  .why__card { flex-basis: 296px; gap: 14px; }
  .why__img { height: 222px; }
  .why__title { font-size: 18px; line-height: 24px; }
  .why__progress { display: flex; align-items: center; gap: 16px; padding-top: 28px; }
  .why__bars { display: flex; flex: 1; gap: 4px; }
  .why__bars i { flex: 1; height: 2px; border-radius: 9999px; background: var(--line); transition: background-color 200ms var(--ease-out); }
  .why__bars i.is-on { background: var(--ink); }
  .why__count { flex-shrink: 0; font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 600;
                letter-spacing: .04em; color: var(--muted); }

  .stay__head { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding-top: 64px; padding-bottom: 24px; }
  .stay__lead { padding-bottom: 0; font-size: 17px; line-height: 27px; }
  .stay__row { display: flex; flex-direction: column; gap: 24px; padding-bottom: 136px; }
  .stay__photo { min-height: 0; height: 400px; }
  .stay__item { gap: 16px; padding-block: 24px; }
  .stay__icon { width: 72px; gap: 8px; }
  .stay__icon svg { width: 44px; height: 44px; }
  .stay__item p { font-size: 16px; line-height: 27px; }
  .stay__link { margin-top: 20px; }

  .journey__panel { gap: 40px; padding: 48px 24px 40px; }
  .tl { display: flex; flex-direction: column; gap: 0; }
  .tl__list { display: flex; flex-direction: column; }
  .tl__step { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 16px; }
  .tl__rail { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; height: auto; padding-top: 4px; }
  .tl__line { width: 1px; height: auto; flex: 1; }
  .tl__step--now .tl__line { width: 2px; height: auto; }
  .tl__step:last-child .tl__line { display: none; }
  .tl__when { grid-column: 2; }
  .tl__body { grid-column: 2; gap: 6px; padding: 6px 0 32px; }
  .tl__step:last-child .tl__body { padding-bottom: 0; }
  .tl__num { font-size: 36px; line-height: 44px; }
  .tl__name { font-size: 18px; line-height: 26px; }
  .tl__desc { font-size: 15px; line-height: 25px; }
  .tl__logo { position: static; align-self: flex-end; margin-top: 40px; }

  .before { gap: 32px; padding-block: 64px; }
  .before__cards { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .before__card { padding: 4px 20px 20px; }
  .before__card--not { padding-bottom: 8px; }
  .before__cardhead { padding: 20px 0 16px; }
  .before__title { font-size: 18px; line-height: 24px; }
  .before__list li { padding-block: 16px; font-size: 16px; line-height: 26px; }
  .before__note { padding-top: 14px; }
  .before__foot { display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding-top: 0; }
  .before__privacy { gap: 4px; padding-right: 0; }
  .before__cta { height: 52px; align-self: stretch; }

  .faqsec { gap: 32px; padding-top: 64px; padding-bottom: 80px; }
  .faqsec__contact--top { display: none; }
  .faqsec__contact--bottom { display: inline-flex; margin-top: -8px; }
  .faq { display: flex; flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-soft); }
  .faq__col { display: contents; }
  .faq__item { border-top: 1px solid var(--line-soft); }
  .faq__col > .faq__item:first-child { border-top: 1px solid var(--line-soft); }
  .faq__col > .faq__item--first:first-child { border-top: 0; }
  .faq__q { gap: 16px; padding-block: 20px; }
  .faq__title { font-size: 17px; line-height: 25px; }
  .faq__a { padding: 0 0 24px; }
  .js .faq.is-collapsed .faq__item--more { display: none; }
  .js .faq.is-collapsed { border-bottom: 0; }
  .js .faq.is-collapsed .faq__more {
    order: 99; display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 48px; margin-top: 28px; border-radius: 8px; /* 목록과 24 띄운다(마지막 문항이 4px 겹쳐 28) — 아래 「문의하기」까지도 24 */
    border: 1px solid var(--ink); background: var(--white); color: var(--ink); cursor: pointer;
    font-size: 16px; line-height: 24px; font-weight: 600;
  }

  .manifesto { padding-top: 80px; padding-bottom: 96px; }
  .manifesto__inner { gap: 24px; }
  .manifesto__verse { font-size: clamp(40px, 11.5vw, 64px); line-height: 1.25; }
  .en .manifesto__verse { font-size: clamp(36px, 10vw, 60px); line-height: 1.2; }
  .ko .manifesto__red { display: block; }

  .footer { padding-top: 56px; }
  .footer__cta { flex-direction: column; align-items: stretch; gap: 24px; padding-bottom: 48px; }
  .footer__lead { font-size: 26px; line-height: 36px; }
  .footer__btn { height: 52px; }
  .footer__mid { display: flex; flex-direction: column; gap: 32px; padding-block: 40px; }
  .footer__wyd img { width: 160px; height: 88px; }
  .footer__links { gap: 0; }
  .footer__links a { display: flex; align-items: center; height: 44px; font-size: 16px; }
  .footer__diocese { align-items: flex-start; text-align: left; }
  .footer__bottom { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "org org" "copy privacy"; gap: 16px; }
  .footer__org { grid-area: org; }
  .footer__copy { grid-area: copy; }
  .footer__privacy { grid-area: privacy; }
  .footer__copy { align-self: center; }
  .footer__privacy a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ════════ ≤768: 휴대폰 ════════ */
@media (max-width: 768px) {
  /* 떠 있는 CTA는 휴대폰에서 쓰지 않는다 — 아래 흰 띠가 화면을 너무 좁혔다(2026-10-25 대표 지시).
     등록은 히어로 · 등록 안내 · 푸터의 지면 안 버튼으로 한다. */
  .sticky-cta { display: none; }

  /* 언어는 아래에서 올라오는 시트 */
  .langsw.is-open .langsw__backdrop { display: block; position: fixed; inset: 0; z-index: 49; background: rgba(0,0,0,.5);
                                      animation: fade-in 200ms var(--ease-out) both; }
  .langsw__menu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; min-width: 0;
                  padding: 8px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
                  border: 0; border-radius: 20px 20px 0 0; box-shadow: none; }
  .js .langsw__menu.is-open { animation: sheet-in 240ms var(--ease-out) both; }
  .langsw__menu::before { content: ""; align-self: center; width: 36px; height: 4px; margin: 4px 0 8px;
                          border-radius: 9999px; background: var(--line); }
  .langsw__head { display: flex; align-items: center; justify-content: space-between; height: 52px; margin-bottom: 8px; }
  .langsw__title { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--ink); }
  .en .langsw__title { font-family: var(--font-sans); }
  .langsw__close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
                   border: 0; border-radius: 9999px; background: var(--chip); color: var(--ink); cursor: pointer; }
  .langsw__item { height: 56px; padding: 0; border-radius: 0; border-top: 1px solid var(--line-soft); }
  .langsw__item:hover { background: transparent; }
}
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }

/* ══ 데스크톱 버튼 한 단계 낮춤 (2026-10-03 Paper 정본) ══
   주 버튼 44 · 15/19 · 화살표 16, 히어로만 48 · 16/20 · 18로 남겨 첫 화면 위계를 지킨다.
   언어 알약 36. ≤1100은 종전 값(모바일 52·44)을 그대로 쓴다. */
@media (min-width: 1101px) {
  .btn { height: 44px; padding: 0 20px; font-size: 15px; line-height: 19px; }
  .btn svg { width: 16px; height: 16px; }
  .hero__cta { height: 48px; padding: 0 24px; font-size: 16px; line-height: 20px; }
  .hero__cta svg { width: 18px; height: 18px; }
  .langsw__btn { height: 36px; padding: 0 12px; }
}

/* ══ 움직임 줄이기 ══ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .why__track { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .nav, .sticky-cta, .btn svg, .faq__sign::before, .faq__sign::after { transition: none !important; }
  .btn:hover svg { transform: none; }
}
@media print {
  .js [data-reveal] { opacity: 1; transform: none; }
  .sticky-cta, .nav__toggle, .langsw { display: none; }
}

/* ══ 조직위 수정안 (2026-10-12) — EN 지면부터 쓴다. 기존 규칙은 KO 지면이 그대로 쓰므로 건드리지 않고 새 이름만 더한다 ══ */
/* 사진 자리만 있는 칸 — 조직위 사진을 받기 전까지 비워 둔다 */
.photo--empty { background-image: none; background-color: #EBEBEB; }
/* 세 줄째가 긴 제목(「WYD journey」)은 한 단계 작게 */
@media (min-width: 1101px) { .hero--long .hero__title { font-size: min(92px, 6.39vw); line-height: 1.087; } }


.lead--paras { display: flex; flex-direction: column; gap: 29px; }

/* 홈스테이 — 글 한 줄 + 넓은 사진 */
.home { display: flex; flex-direction: column; gap: 56px; padding-top: 96px; }
.home__text { display: flex; flex-direction: column; gap: 16px; }
.home__row { display: grid; grid-template-columns: 736fr 576fr; align-items: start; }
.home__para { display: flex; flex-direction: column; gap: 29px; padding-top: 8px;
              font-size: 17px; line-height: 29px; font-weight: 500; color: var(--ink-2); }
.home__photo { height: 560px; border-radius: 20px; background-position: 50% 62%; }

/* 영어 항목 이름(Accommodation·Transportation)이 96px 칸을 넘는다 */
.en .stay__icon { width: 112px; }


@media (max-width: 1100px) {
  .hero--long { --hero-fs: clamp(40px, 13.4vw, 76px); }
  .lead--paras { gap: 16px; }
  .home { gap: 24px; padding-top: 64px; }
  .home__text { gap: 12px; }
  .home__row { display: flex; flex-direction: column; gap: 20px; }
  .home__para { gap: 16px; padding-top: 0; font-size: 16px; line-height: 27px; }
  .home__photo { height: 260px; }
  .en .stay__icon { width: 92px; }
  .en .stay__icon span { font-size: 12px; }
}


/* ══ 움직임 — 우리 모션 라이브러리(motion-library/index.html)의 패턴 · 수치 (2026-10-12) ══
   손님이 보는 지면이라 눈에 보이는 강도로 넣는다(등장 24px · 순차 70ms · 누름 .95 · 탄성 복귀).
   전부 transform · opacity · clip-path만 쓴다. 움직임을 줄인 기기에는 이 묶음이 통째로 없다. */
@media (prefers-reduced-motion: no-preference) {
  :root { --m-out: cubic-bezier(.22, 1, .36, 1); --m-back: cubic-bezier(.34, 1.56, .64, 1); }

  /* 스크롤 등장 — 종전 16px · 400ms를 24px · 700ms로 키운다. */
  .js [data-reveal] { transform: translateY(24px);
                      transition: opacity 700ms var(--m-out), transform 700ms var(--m-out); }

  /* 묶음 안의 낱개는 차례로 올라온다(순차 70ms). 조상이 [data-reveal]일 때만 감춘다 — 아니면 영영 안 보인다. */
  .js [data-reveal] .stay__item,
  .js [data-reveal] .tl__step,
  .js [data-reveal] .faq__item { opacity: 0; transform: translateY(20px);
                                 transition: opacity 600ms var(--m-out), transform 600ms var(--m-out); }
  .js [data-reveal].is-in .stay__item,
  .js [data-reveal].is-in .tl__step,
  .js [data-reveal].is-in .faq__item,
  .js [data-reveal]:focus-within .stay__item,
  .js [data-reveal]:focus-within .tl__step,
  .js [data-reveal]:focus-within .faq__item { opacity: 1; transform: none; }
  .js [data-reveal] :is(.stay__item, .tl__step, .faq__item):nth-child(1) { transition-delay: 80ms; }
  .js [data-reveal] :is(.stay__item, .tl__step, .faq__item):nth-child(2) { transition-delay: 150ms; }
  .js [data-reveal] :is(.stay__item, .tl__step, .faq__item):nth-child(3) { transition-delay: 220ms; }
  .js [data-reveal] :is(.stay__item, .tl__step, .faq__item):nth-child(4) { transition-delay: 290ms; }

  /* 문장 드러내기 — 히어로 제목이 줄마다 아래에서 올라온다(줄당 800ms · 순차 110ms). */
  .hero__title > span { animation: m-line 800ms var(--m-out) both; }
  /* 글꼴이 다 오기 전(<html>.f-wait)에는 첫 장면(가림막 아래)에 멈춰 둔다 — 제목이 마지막 글꼴로 한 번만
     올라온다. f-wait는 각 랜딩 <head>의 글꼴 대기 스크립트가 걸고, 늦어도 800ms 뒤 걷는다. */
  .f-wait .hero__title > span,
  .f-wait .hero__cta { animation-play-state: paused; }
  /* 머리말(「Days in the Archdiocese of Gwangju」, Noto Sans)도 글꼴이 온 뒤 한 번에 나타난다. */
  .hero__kicker { transition: opacity 300ms var(--m-out); }
  .f-wait .hero__kicker { opacity: 0; }
  .hero__title > span:nth-child(2) { animation-delay: 110ms; }
  .hero__title > span:nth-child(3) { animation-delay: 220ms; }
  .hero__cta { animation: m-rise 700ms var(--m-out) 420ms both; }
  /* 교구대회 기간 판(.glance)의 5일 띠는 스크롤 진입 때 차례로 펼쳐진다 — 파일 끝 「교구대회 기간 펼치기」.
     종전에는 여기서 페이지를 열 때 재생했는데, 판이 첫 화면 아래라 내려오면 이미 끝나 있었다. */

  /* 버튼 누름 — .95로 눌렸다가 탄성으로 돌아온다. */
  .btn { transition: background-color 160ms var(--ease-out), transform 320ms var(--m-back); }
  .btn:active { transform: scale(.95); transition-duration: 160ms, 90ms; }

  /* 광주의 매력 카드 — 올리면 카드가 6px 떠오른다(탄성 복귀). */
  .why__card { transition: transform 350ms var(--m-back); }
  .why__card:hover { transform: translateY(-6px); }
  /* 가로 스크롤 줄은 세로로도 잘린다 — 떠오를 자리를 안쪽 여백으로 주고 같은 만큼 당겨 올린다. */
  .why__track { padding-top: 10px; margin-top: -10px; }

  /* 화살표 링크 — 화살표가 4px 나간다. */
  .link--arrow svg { transition: transform 350ms var(--m-out); }
  .link--arrow:hover svg { transform: translateX(4px); }

  /* 아코디언 — 높이 · 답 나타남은 landing.js가 움직인다(열기 320ms · 닫기 260ms). 접는 동안 기호는 먼저 + 로. */
  .faq__item.is-closing .faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
  .faq__sign::before, .faq__sign::after { transition: transform 300ms var(--m-out); }

  @keyframes m-line { from { clip-path: inset(0 0 100% 0); transform: translateY(40%); }
                      to { clip-path: inset(-10% 0 -20% 0); transform: none; } }
  @keyframes m-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
}

/* ══ 랜딩 v2 (2026-10-16 Paper 「랜딩 v2」) ══ */

/* 넓은 화면(1441+) — 2026-10-16 대표 채택 Paper 「랜딩 v2 · 넓은 화면 1920 · 히어로 비례 확대 + 상단바 양 끝」.
   히어로는 1440 판을 화면 폭에 비례해 그대로 키운다(1920에서 1.33배) — 1440에서 쓰는 px 값을 vw로 옮겼다
   (값 ÷ 1440 × 100). 사진은 화면 오른쪽 끝까지 간다. 상단 바 로고 · 메뉴는 화면 양 끝 쪽(왼쪽 64 · 오른쪽 32).
   캐러셀(.why)은 종전대로 가운데 1440에 머문다. 1440 이하 화면은 바뀌지 않는다. */
@media (min-width: 1441px) {
  .nav { padding-left: var(--gutter); padding-right: calc(var(--gutter) - 32px); }
  .why { max-width: var(--page); margin-inline: auto; }
  .hero { gap: 4.444vw; padding: 2.222vw 4.444vw; height: clamp(38.89vw, calc(100svh - 88px), 54.44vw); }
  .hero__copy { gap: 2.778vw; }
  .hero__kicker { font-size: 0.903vw; line-height: 1.25vw; margin-bottom: -1.111vw; }
  .hero__title { font-size: 7.23vw; }
  .hero--long .hero__title { font-size: 6.39vw; }
  .hero__cta { height: 3.333vw; padding: 0 1.667vw; gap: 0.556vw; border-radius: 0.556vw; font-size: 1.111vw; line-height: 1.389vw; }
  .hero__cta svg { width: 1.25vw; height: 1.25vw; }
  .hero__photo::before { height: 8.4vw; }
  .hero__dots { right: 4.444vw; bottom: 2.778vw; }
}


/* 히어로 「Gwangju.」 — Playfair 기울임 w가 장식형이라 이 한 단어만 DM Serif Display 기울임으로 */
.hero__gj { font-family: "DM Serif Display", var(--font-display); font-weight: 400; font-size: 1.02em; letter-spacing: -0.015em; }

/* 히어로 사진 두 장 번갈아(성당 앞 · 십자가). 4초마다 1.2초에 걸쳐 겹쳐 바뀐다.
   좌우로 밀어 넘길 수 있다(landing.js) — 칸 밖으로 밀려난 사진은 잘라 내고, 세로 스크롤은 페이지에 남긴다. */
.hero__photo { background: #FFF; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
@media (hover: hover) { .hero__photo { cursor: grab; } .hero__photo.is-dragging { cursor: grabbing; } }
.hero__slide { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat;
               opacity: 0; transition: opacity 1200ms var(--ease-out); }
.hero__slide.is-on { opacity: 1; }
.hero__slide--wall { background-position: 78% 50%; }
.hero__slide--cross { background-position: 100% 50%; }
.hero__dots { position: absolute; z-index: 3; right: 64px; bottom: 40px; display: flex; align-items: center; gap: 8px; }
.hero__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 9999px; background: rgba(26,26,26,.28);
             cursor: pointer; transition: width 300ms var(--ease-out), background-color 300ms var(--ease-out); }
.hero__dot.is-on { width: 24px; background: #1A1A1A; }
/* 누르기 쉬운 크기(24)를 보이는 점 둘레에 깐다 */
.hero__dot { position: relative; }
.hero__dot::before { content: ""; position: absolute; inset: -9px -4px; }
@media (max-width: 1100px) {
  .hero__slide--wall { background-position: 84% 50%; }
  .hero__slide--cross { background-position: 86% 50%; }
  /* 좁은 화면은 점을 두지 않는다 — 사진을 밀어 넘기고 4초마다 저절로 넘어간다(2026-10-25 대표 결정).
     제목 위 가운데 · 사진 오른쪽 위 유리 알약을 거쳐 뺐다. 데스크톱 점은 그대로다. */
  .hero__dots { display: none; }
}


/* 언어 시트(모바일) — 현재 언어 줄에 옅은 파랑을 깔려면 안쪽 여백이 있어야 한다 */
@media (max-width: 768px) {
  .langsw__item { padding: 0 12px; }
  .langsw__item[aria-current="true"] { border-radius: 8px; }
}

/* 주제 성구 — 「courage」·「용기를」 파랑(빨강 「overcome」·「이겼다」와 짝) */
.manifesto__blue { color: var(--blue); }


/* ══ 01 한눈에 — 「교구대회 기간」 카드 (2026-10-25 대표 채택, Paper 「랜딩 v2 · KO 01」·「모바일 KO」) ══
   한 벌 마크업이다. 넓은 화면(1101+)은 두 칸 — 왼쪽에 연도 알약 · 큰 날짜 · 서울 판, 오른쪽에 5일 달력 띠.
   좁은 화면은 연도 → 날짜 → 달력 띠 → 안내 한 줄 → 서울 판으로 쌓는다.
   5일은 숙소 예약 달력처럼 한 띠로 묶는다(첫날 · 끝날 파란 원, 31일과 1일 사이 흰 틈이 월 경계).
   날마다 주제어를 선으로 매달고, 휴대폰(≤640)에서는 짝수 날을 한 줄 아래로 엇갈려 긴 언어도 옆 단어와 붙지 않는다.
   「~의 날」 정식 이름은 화면 읽기용 글(.glance__sr)에 남긴다. 아리따 부리는 700이 없어 600으로 쓴다. */
.glance { padding-top: 32px; }
.glance__card { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "when cal" "next cal";
                column-gap: 64px; align-items: center; padding: 40px 48px;
                border-radius: 14px; background: var(--white); border: 1px solid var(--line); }
.glance__when { grid-area: when; align-self: end; display: flex; flex-direction: column; gap: 10px; }
.glance__year { align-self: flex-start; display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
                border-radius: 9999px; background: var(--blue); color: var(--white);
                font-family: var(--font-display); font-size: 16px; line-height: 20px; font-weight: 600; font-variant-numeric: lining-nums; }
.glance__big { font-family: var(--font-display); font-weight: 500; font-size: 60px; line-height: 66px;
               letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.glance__big-narrow { display: none; }

.glance__cal { grid-area: cal; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* 날짜 띠 — 옅은 띠는 첫 칸 가운데부터 끝 칸 가운데까지. 띠 위치는 요일 줄 높이 + 간격에서 잰다. */
.glance__range { --pt: 0px; --wd-h: 18px; --wd-gap: 12px; --dn: 56px;
                 position: relative; list-style: none; margin: 0; padding: var(--pt) 0 0;
                 display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.glance__range::before { content: ""; position: absolute; left: 10%; right: 10%; height: var(--dn);
                         top: calc(var(--pt) + var(--wd-h) + var(--wd-gap)); background: #EEF3FB; }
.glance__range::after { content: ""; position: absolute; left: 60%; width: 2px; height: 32px; margin-left: -1px;
                        top: calc(var(--pt) + var(--wd-h) + var(--wd-gap) + (var(--dn) - 32px) / 2); background: var(--white); }
.glance__range li { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.glance__wd { height: var(--wd-h); margin-bottom: var(--wd-gap); font-family: var(--font-sans); font-size: 12px; line-height: var(--wd-h);
              font-weight: 600; letter-spacing: 0.06em; color: var(--muted); }
.ko .glance__wd { font-family: var(--font-ko-body); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.glance__dn { display: flex; align-items: center; justify-content: center; width: min(var(--dn), 100%); height: var(--dn);
              font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 600;
              font-variant-numeric: lining-nums; color: var(--blue); }
.glance__range .is-edge .glance__dn { border-radius: 9999px; background: var(--blue); font-weight: 700; color: var(--white); }
/* 주제어 — 날짜 아래로 선을 내리고 끝의 파란 점 아래에 매단다. */
.glance__theme { --lead: 14px; display: flex; flex-direction: column; align-items: center; white-space: nowrap;
                 font-family: var(--font-display); font-size: 17px; line-height: 24px; font-weight: 600; color: #1A1A1A; }
.glance__theme::before { content: ""; width: 5px; height: calc(var(--lead) + 5px); margin-bottom: 6px;
                         background: linear-gradient(#AFC4E8, #AFC4E8) center top / 1px var(--lead) no-repeat,
                                     radial-gradient(circle, var(--blue) 2.5px, transparent 3px) center bottom / 5px 5px no-repeat; }
.ko .glance__theme { font-family: var(--font-ko-display); font-size: 18px; line-height: 26px; }
.glance__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.glance__caption { display: none; padding-top: 8px; text-align: center; font-size: 13px; line-height: 18px; font-weight: 300; color: var(--muted); }

/* 그다음 — 옅은 회색 판에 WYD 서울 2027 로고 + 「8월 3일부터 서울 본대회로」. 다음 목적지를 공식 로고로 보여 준다. */
.glance__next { grid-area: next; align-self: start; justify-self: start; display: flex; align-items: center; gap: 12px;
                margin-top: 20px; padding: 10px 16px 10px 14px; border-radius: 10px; background: #F5F5F5; }
.glance__next-logo { flex-shrink: 0; width: 52px; height: 29px; object-fit: contain; }
.glance__next > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0;
                                  padding-left: 12px; border-left: 1px solid #DCDCDC; }
.glance__next-k { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
.ko .glance__next-k { letter-spacing: 0; }
.glance__next b { font-size: 14px; line-height: 20px; font-weight: 600; color: #1A1A1A; }
.ko .glance__next b { font-weight: 700; }

@media (max-width: 1439px) {
  .glance__card { column-gap: 40px; padding: 32px 36px; }
  .glance__big { font-size: 52px; line-height: 58px; }
}
/* 좁은 화면 — 위에서 아래로 쌓는다. 큰 날짜는 KO만 「7월 29일 – 8월 2일」로 풀어 쓴다. */
@media (max-width: 1100px) {
  .glance { padding-top: 12px; }
  .glance__card { display: flex; flex-direction: column; align-items: stretch; gap: 22px; padding: 24px 20px 22px; }
  .glance__when { align-self: stretch; }
  .glance__year { height: 28px; padding: 0 12px; font-size: 15px; }
  .glance__big { font-size: 34px; line-height: 40px; color: #1A1A1A; }
  .ko .glance__big { font-family: var(--font-ko-display); font-weight: 600; font-size: 30px; line-height: 38px; }
  .glance__big-wide { display: none; }
  .glance__big-narrow { display: inline; }
  .glance__cal { padding-top: 4px; }
  .glance__range { --pt: 2px; --wd-h: 16px; --wd-gap: 10px; --dn: 52px; }
  .glance__wd { font-size: 11px; }
  .ko .glance__wd { font-size: 12px; }
  .glance__dn { font-size: 22px; line-height: 26px; }
  .glance__theme { --lead: 12px; font-size: 15px; line-height: 20px; }
  .ko .glance__theme { font-size: 17px; line-height: 24px; }
  .glance__caption { display: block; }
  .glance__next { align-self: stretch; gap: 14px; margin-top: 0; padding: 14px 16px; border-radius: 12px; }
  .glance__next-logo { width: 58px; height: 32px; }
  .glance__next > span:last-child { gap: 2px; padding-left: 14px; }
  .glance__next-k { font-size: 11px; }
  .ko .glance__next-k { font-size: 12px; }
  .glance__next b { font-size: 15px; line-height: 21px; }
}
/* 휴대폰 — 짝수 날 주제어를 한 줄 아래로 엇갈린다. ES · IT · PT는 첫날 · 끝날 단어가 길어 한 단계 줄인다. */
@media (max-width: 640px) {
  .glance__range li:nth-child(even) .glance__theme { --lead: 42px; }
  html:is([lang="es"], [lang="it"], [lang="pt"]) .glance__theme { font-size: 14px; letter-spacing: -0.01em; }
}

/* 히어로 접수 상태 — 등록 단추 바로 아래 한 줄(2026-10-25 Paper 「KO 00 히어로」). 점은 옅은 고리를 두르고
   물결이 2초마다 퍼진다(파일 끝). 묶음 간격(40 · 모바일 20)에서 당겨 단추와 16 · 14로 붙인다. */
.hero__status { align-self: center; display: inline-flex; align-items: center; gap: 8px; margin-top: -24px;
                font-size: 14px; line-height: 20px; font-weight: 600; color: var(--blue); }
.hero__status-dot { position: relative; flex-shrink: 0; width: 8px; height: 8px; border-radius: 9999px; background: var(--blue);
                    box-shadow: 0 0 0 4px rgba(0, 71, 187, .14); }
@media (min-width: 1441px) {
  .hero__status { gap: 0.556vw; margin-top: -1.667vw; font-size: 0.972vw; line-height: 1.389vw; }
  .hero__status-dot { width: 0.556vw; height: 0.556vw; box-shadow: 0 0 0 0.278vw rgba(0, 71, 187, .14); }
}
@media (max-width: 1100px) { .hero__status { margin-top: -6px; } }


/* 푸터 아랫줄 — 조직위 이름 · 메일을 한 줄에(Paper 「랜딩 v2 · EN 푸터 아랫줄 · 조직위 한 줄 두 안」 나안, 2026-10-16).
   언어마다 이름 길이가 달라 한 줄에 다 들어가는 1240 이상에서만(가장 긴 FR이 1230) 한 줄로 쓰고,
   그 아래 데스크톱 폭은 가안(이름 위 · 메일 아래)으로 쌓는다. 모바일(1100 이하)은 종전 그대로다. */
@media (min-width: 1101px) {
  .footer__bottom { display: flex; justify-content: space-between; gap: 40px; }
  .footer__copy, .footer__privacy { flex-shrink: 0; }
  .footer__org { flex: 0 1 auto; min-width: 0; }
}
@media (min-width: 1240px) {
  .footer__bottom { align-items: center; }
  .footer__org { flex: 1 1 auto; flex-direction: row; justify-content: center; align-items: center; white-space: nowrap; }
  .footer__org span { display: inline-flex; align-items: center; }
  .footer__org span::after { content: ""; width: 3px; height: 3px; margin-inline: 12px; border-radius: 9999px; background: #B5B5B5; }
}

/* ══ 참가 절차 — 노선 그리기 (2026-10-19, taste skill 분석 1번 · 대표 승인) ══
   「등록부터 광주까지」 선이 스크롤을 따라 그려진다. 선이 닿는 정류장마다 점이 켜진다.
   끝 상태는 Paper 정본 그대로다(지금 구간 흰색 · 남은 길 옅은 파랑) — 그리는 과정만 더한다.
   스크롤 위치에 묶인 움직임이라 일정한 속도(linear)다. 구간 넷이 --tl-from ~ --tl-to를 나눠 쓴다
   (데스크톱은 마지막 선이 로고 쪽 끝까지 가고, ≤1100 세로 노선은 마지막 선이 없다).
   스크롤 타임라인을 모르는 브라우저와 움직임 줄이기에서는 처음부터 다 그려진 정본이 보인다. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .tl {
      view-timeline: --tl block;
      --tl-from: 12%;
      --tl-to: 46%;
      --tl-seg: calc((var(--tl-to) - var(--tl-from)) / 4);
    }
    .js .tl__step:nth-child(1) { --k: 0; }
    .js .tl__step:nth-child(2) { --k: 1; }
    .js .tl__step:nth-child(3) { --k: 2; }
    .js .tl__step:nth-child(4) { --k: 3; }

    .js .tl__line {
      transform-origin: left center;
      animation: tl-draw-x linear both;
      animation-timeline: --tl;
      animation-range:
        cover calc(var(--tl-from) + var(--tl-seg) * var(--k))
        cover calc(var(--tl-from) + var(--tl-seg) * (var(--k) + 1));
    }
    .js .tl__node {
      animation: tl-node linear both;
      animation-timeline: --tl;
      animation-range:
        cover calc(var(--tl-from) + var(--tl-seg) * var(--k) - 3%)
        cover calc(var(--tl-from) + var(--tl-seg) * var(--k) + 1%);
    }

    @keyframes tl-draw-x { from { transform: scaleX(0); } to { transform: none; } }
    @keyframes tl-draw-y { from { transform: scaleY(0); } to { transform: none; } }
    @keyframes tl-node { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
  }

  /* 세로 노선 — 노선이 화면보다 길어 덮는 구간이 길다. 위에서 아래로 그린다. */
  @media (prefers-reduced-motion: no-preference) and (max-width: 1100px) {
    .js .tl { --tl-from: 6%; --tl-to: 72%; }
    .js .tl__line { transform-origin: center top; animation-name: tl-draw-y; }
  }
}

/* ══ 교구대회 기간 펼치기 (2026-10-19 대표 요청, 2026-10-25 달력 띠 카드로 다시 짬) ══
   히어로 바로 아래 판이 화면에 들어올 때 한 번 펼쳐진다(`landing.js`의 [data-reveal] 판정을 그대로 쓴다).
   판 자체는 움직이지 않는다 — 안의 것만 읽는 순서대로 나온다.
   연도 알약 → 큰 날짜가 가림막 뒤에서 올라오고 → 옅은 띠가 첫날에서 끝날까지 그어지며(700ms)
   → 날짜와 주제어가 하루에 90ms씩 뒤따른다. 첫날 · 끝날 파란 원은 톡 나온다. 끝 상태는 Paper 정본 그대로다. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal="glance"] { opacity: 1; transform: none; transition: none; }

  /* 진입 전 — 진입 뒤 애니메이션의 첫 장면과 같은 값으로 숨겨 둔다. */
  .js [data-reveal="glance"]:not(.is-in) :is(.glance__year, .glance__wd, .glance__dn, .glance__theme, .glance__caption, .glance__next) { opacity: 0; }
  .js [data-reveal="glance"]:not(.is-in) .glance__range::before { transform: scaleX(0); }
  .js [data-reveal="glance"]:not(.is-in) .glance__big { clip-path: inset(0 0 100% 0); }

  .js [data-reveal="glance"].is-in .glance__year { animation: m-rise 500ms var(--m-out) both; }
  .js [data-reveal="glance"].is-in .glance__big { animation: m-line 900ms var(--m-out) 80ms both; }

  .glance__range li { --d: 0; }
  .glance__range li:nth-child(2) { --d: 1; }
  .glance__range li:nth-child(3) { --d: 2; }
  .glance__range li:nth-child(4) { --d: 3; }
  .glance__range li:nth-child(5) { --d: 4; }
  .js [data-reveal="glance"].is-in .glance__range::before { transform-origin: left center;
    animation: g-draw 700ms var(--m-out) 380ms both; }
  .js [data-reveal="glance"].is-in :is(.glance__wd, .glance__dn) { animation: m-rise 500ms var(--m-out) calc(420ms + var(--d) * 90ms) both; }
  .js [data-reveal="glance"].is-in .is-edge .glance__dn { animation: g-pop 300ms var(--m-back) calc(420ms + var(--d) * 90ms) both; }
  .js [data-reveal="glance"].is-in .glance__theme { animation: m-rise 500ms var(--m-out) calc(600ms + var(--d) * 90ms) both; }
  .js [data-reveal="glance"].is-in .glance__caption { animation: m-rise 500ms var(--m-out) 1000ms both; }
  .js [data-reveal="glance"].is-in .glance__next { animation: m-rise 500ms var(--m-out) 1080ms both; }

  /* 히어로 「사전등록 받는 중」 — 단추 뒤에 올라오고, 점에서 물결이 2초마다 퍼진다(지금 열려 있다는 신호, 2026-10-25 대표 지시). */
  .hero__status { animation: m-rise 700ms var(--m-out) 520ms both; }
  .f-wait .hero__status { animation-play-state: paused; }
  .hero__status-dot::after { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: var(--blue);
                             animation: g-ping-loop 2000ms var(--m-out) 1300ms infinite both; }
  @keyframes g-ping-loop { 0% { opacity: .5; transform: none; } 60%, 100% { opacity: 0; transform: scale(3.2); } }

  @keyframes g-pop { from { transform: scale(0); } to { transform: none; } }
  @keyframes g-draw { from { transform: scaleX(0); } to { transform: none; } }
}

/* ══ 메뉴 열고 닫기 (2026-10-25 대표 요청 — 「한 번 깜박이고 나타난다」) ══
   열 때: 흰 면이 320ms에 걸쳐 차오르고, 메뉴 항목이 위에서부터 50ms 간격으로 14px 올라오며 나타난다.
   등록 버튼이 마지막이다. ☰는 돌며 사라지고 ✕가 반대로 돌며 들어온다.
   닫을 때: 항목은 지연 없이 160ms에 빠지고 흰 면은 320ms에 걷힌다 — 나갈 때가 들어올 때보다 빠르다.
   움직임 줄이기에서는 위 규칙이 없어 바로 나타나고 바로 사라진다. */
@media (prefers-reduced-motion: no-preference) {
  .menu { transition: opacity 320ms var(--m-out), visibility 0s linear 320ms; }
  .menu.is-open { transition: opacity 320ms var(--m-out), visibility 0s; }

  .menu__list a, .menu__cta { opacity: 0; transform: translateY(14px);
                              transition: opacity 160ms var(--m-out), transform 160ms var(--m-out); }
  .menu.is-open :is(.menu__list a, .menu__cta) { opacity: 1; transform: none;
    transition: opacity 480ms var(--m-out) var(--md, 0ms), transform 560ms var(--m-out) var(--md, 0ms); }
  .menu.is-open .menu__list a:nth-child(1) { --md: 80ms; }
  .menu.is-open .menu__list a:nth-child(2) { --md: 130ms; }
  .menu.is-open .menu__list a:nth-child(3) { --md: 180ms; }
  .menu.is-open .menu__list a:nth-child(4) { --md: 230ms; }
  .menu.is-open .menu__cta { --md: 300ms; }

  .nav__toggle svg { transition: opacity 200ms var(--m-out), transform 360ms var(--m-out); }
}

/* ══ 참가 절차 — 04 도착 (2026-10-25 대표 요청) ══
   선이 04에 닿는 순간 빈 원 안이 탄성 있게 차오른다(500ms). 빛·고리 효과는 뺐다(같은 날 대표 요청).
   움직임 줄이기에서는 원만 채워진 채로 보인다. */
@media (prefers-reduced-motion: no-preference) {
  .tl__node::after { transition: transform 500ms var(--m-back); }
}