/* ─────────────────────────────────────────────────────────
   Hyunjun-Kim.me · Welcome Page
   100vh flex center · 타이포가 주인공
   상태 A (first-visit) / 상태 B (return) 단일 HTML 내 공존
   의존: design-tokens.css, common.css
   ───────────────────────────────────────────────────────── */

.welcome-main {
  /* 헤더 높이만큼 제외한 풀 영역 */
  min-height: calc(100vh - var(--header-h-desktop));
  min-height: calc(100dvh - var(--header-h-desktop));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem 6rem;
  position: relative;
  overflow: hidden; /* 워터마크 경계 클립 */
  background: var(--color-paper);
}

@media (max-width: 767px) {
  .welcome-main {
    min-height: calc(100vh - var(--header-h-mobile));
    min-height: calc(100dvh - var(--header-h-mobile));
    padding: 2rem 1.25rem 6rem;
  }
}

.welcome-hero {
  text-align: center;
  max-width: 560px;
  width: 100%;
  position: relative; /* 워터마크 위로 */
  z-index: 1;
}

/* ─── Background Typographic Watermark ───
   매거진 표지 로고 감성 · 데코레이션
   Editorial Sharpness Don'ts 준수: 이미지 · 그라디언트 · 섀도우 없음, 타이포만 */
.welcome-watermark {
  position: absolute;
  bottom: -40px;
  left: -20px;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(120px, 22vw, 280px);
  letter-spacing: -0.03em;
  line-height: 0.85;
  color: var(--color-ink);
  opacity: 0.04;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
@media (max-width: 767px) {
  .welcome-watermark {
    font-size: clamp(80px, 28vw, 140px);
    bottom: -20px;
    left: -12px;
  }
}

.welcome-name {
  font-family: var(--font-ko);
  font-size: var(--fs-hero);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-hero);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  margin: 0;
}
.welcome-name .mid {
  color: var(--color-graphite);
  font-weight: var(--fw-regular);
  margin-inline: 0.25em;
}

.welcome-subtitle {
  margin-top: 0.75rem;
  font-family: var(--font-en);
  font-size: 1.125rem; /* 18 */
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-meta);
  color: var(--color-graphite);
}
@media (max-width: 767px) {
  .welcome-subtitle { font-size: 1rem; }
}

/* ─── Hook Copy ───
   Profile 마스터 카피 "마케팅 회사를 채용하세요." 와 동일 문구
   5초 안에 전달할 프레임 · 선언 수준의 크기 (subtitle 과 divider 사이) */
.welcome-hook {
  margin: 2rem auto 0;
  max-width: 480px;
  font-family: var(--font-ko);
  font-size: clamp(1.5rem, 2.8vw, 1.875rem); /* 24 → 30 */
  font-weight: var(--fw-bold);
  line-height: 1.35;
  letter-spacing: -0.025em;
  color: var(--color-ink);
}
.welcome-hook .quote {
  color: var(--color-accent);
  font-weight: var(--fw-bold);
}
@media (max-width: 767px) {
  .welcome-hook {
    margin-top: 1.5rem;
    font-size: clamp(1.25rem, 5.5vw, 1.5rem); /* 20 → 24 */
    max-width: 340px;
  }
}

/* ─── Decorative Line + "언어 선택" label ─── */
.welcome-divider {
  margin: 2.5rem auto 1.5rem; /* hook 삽입으로 여백 소폭 축소 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  max-width: 320px;
}
.welcome-divider .bar {
  flex: 1;
  height: 2px;
  background: var(--color-accent);
  transform-origin: center;
}
.welcome-divider .bar-left  { transform-origin: right; }
.welcome-divider .bar-right { transform-origin: left;  }
.welcome-divider .label {
  font-family: var(--font-en);
  font-size: 0.6875rem; /* 11 */
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
  color: var(--color-graphite);
  white-space: nowrap;
}

/* ─── Welcome · Language Toggle (중앙) ─── */
.lang-toggle[data-lang-toggle="welcome"] {
  display: inline-flex;
  gap: 1rem;
  justify-content: center;
}
.lang-toggle[data-lang-toggle="welcome"] .lang-btn {
  min-width: 64px;
  height: 36px;
  padding: 0 1rem;
  font-family: var(--font-en);
  font-size: 0.875rem; /* 14 */
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-meta);
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--border-hair) solid var(--color-stone);
  border-radius: var(--radius-0);
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-std),
              border-color var(--dur-base) var(--ease-std);
}
.lang-toggle[data-lang-toggle="welcome"] .lang-btn:hover {
  border-color: var(--color-graphite);
}
.lang-toggle[data-lang-toggle="welcome"] .lang-btn[aria-current="true"] {
  background: var(--color-whisper);
  border-color: var(--color-ink);
  border-width: var(--border-hair);
  font-weight: var(--fw-bold);
}

/* ─── CTA Stack ─── */
.welcome-cta-stack {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* 리턴 상태에서만 Primary + Secondary 병렬 */
[data-state="return"] .welcome-cta-stack {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ─── State Visibility Switch ─── */
[data-welcome-state="first-visit"] { display: block; }
[data-welcome-state="return"]      { display: none; }

[data-state="return"] [data-welcome-state="first-visit"] { display: none; }
[data-state="return"] [data-welcome-state="return"]      { display: block; }

/* ─── Welcome Footer (하단 고정) ─── */
.welcome-footer {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  font-family: var(--font-en);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-meta);
  color: var(--color-graphite);
  text-align: center;
  white-space: nowrap;
}
.welcome-footer a { color: inherit; text-decoration-color: var(--color-hairline); }
.welcome-footer a:hover {
  color: var(--color-ink);
  text-decoration-color: var(--color-accent);
}
.welcome-footer .sep { color: var(--color-hairline); margin-inline: 0.5em; }

@media (max-width: 480px) {
  .welcome-footer { white-space: normal; max-width: 90vw; line-height: 1.6; }
}

/* ─── Entry Animation (welcome 전용 시퀀스) ─── */
.welcome-hero > .welcome-name,
.welcome-hero > .welcome-subtitle,
.welcome-hero > .welcome-hook,
.welcome-hero > .welcome-divider,
.welcome-hero > .welcome-lang,
.welcome-hero > .welcome-cta-stack {
  opacity: 0;
  transform: translateY(8px);
  animation: welcomeFadeUp 0.5s var(--ease-out) forwards;
}
.welcome-hero > .welcome-name      { animation-delay: 0.20s; }
.welcome-hero > .welcome-subtitle  { animation-delay: 0.32s; }
.welcome-hero > .welcome-hook      { animation-delay: 0.48s; }
.welcome-hero > .welcome-divider   { animation-delay: 0.66s; }
.welcome-hero > .welcome-lang      { animation-delay: 0.80s; }
.welcome-hero > .welcome-cta-stack { animation-delay: 0.95s; }

.welcome-divider .bar {
  transform: scaleX(0);
  animation: welcomeBarGrow 0.4s var(--ease-out) 0.70s forwards;
}
.welcome-divider .bar-right { animation-delay: 0.75s; }

/* 워터마크는 은은하게 페이드인 (문구가 올라온 뒤) */
.welcome-watermark {
  opacity: 0;
  animation: welcomeWatermarkFade 1.2s var(--ease-out) 0.6s forwards;
}
@keyframes welcomeWatermarkFade {
  to { opacity: 0.04; }
}

@keyframes welcomeFadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes welcomeBarGrow {
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-hero > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .welcome-divider .bar {
    transform: scaleX(1) !important;
    animation: none !important;
  }
  .welcome-watermark {
    opacity: 0.04 !important;
    animation: none !important;
  }
}