.site-header .nav-wrap {
  min-height: 56px;
}

/* 헤더 맨 밑에 붙은 남색 선. 헤더와 한 판으로 움직여서 절대 어긋나지 않는다. */
.site-header::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--navy-deep);
}

/* 마우스가 있는 화면(PC)에서는 평소에 헤더(+선)를 위로 접어 올려서 선만 삐져나와 보이게 하고,
   화면 맨 위에 마우스를 가져다 대면 통째로 내려오게 함.
   터치 기기(모바일/태블릿)에서는 항상 보이도록 이 동작에서 제외한다. */
@media (hover: hover) and (pointer: fine) {
  .header-hover-zone {
    position: relative;
  }

  .header-hover-zone::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    z-index: 31;
  }

  .header-hover-zone .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    transform: translateY(-56px);
    transition: transform 0.9s ease, opacity 3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* 인트로가 끝나 reveal-item이 is-visible로 바뀌어도, 호버 전까지는 계속 접힌(선만 보이는) 상태 유지 */
  .header-hover-zone .site-header.is-visible {
    transform: translateY(-56px);
  }

  .header-hover-zone:hover .site-header,
  .header-hover-zone:focus-within .site-header {
    transform: translateY(0);
  }
}

.site-header .brand-mark {
  width: 35px;
  height: 35px;
  border-radius: 10px;
  font-size: 1.1rem;
}

.site-header .header-home-button {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}

.site-header .header-home-button svg {
  width: 24px;
  height: 24px;
}

/* 첫 화면 헤더는 본 홈페이지보다 얇아서(56px) 글씨를 따로 줄여 쓴다.
   본 홈페이지 헤더를 키운 만큼 여기도 같은 비율로 키웠다. */
.site-header .brand-kor {
  font-size: 1.06rem;
}

.site-header .brand-sub {
  font-size: 0.71rem;
}

.landing-hero {
  position: relative;
  background: #ffffff;
  overflow-x: hidden;
}

.landing-photo {
  width: 100%;
  height: min(56vh, 520px);
  background-color: #eaf1f8;
  background-size: cover;
  background-position: center 28%;
  position: relative;
  will-change: opacity, transform;
  transition: opacity 1.8s ease-out, transform 1.8s ease-out !important;
}

.landing-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.08) 60%,
      rgba(255, 255, 255, 0.6) 85%,
      #ffffff 100%);
}

.landing-inner {
  max-width: 720px;
  margin-top: -80px;
  position: relative;
  z-index: 1;
  padding: 0 0 72px;
}

.landing-inner .section-label {
  margin-bottom: 20px;
  color: #c9820f;
  font-size: 1.2rem;
  font-weight: 950;
  letter-spacing: 0.02em;
}

/* 인트로: 문구가 제자리에서 크게 타이핑되며 등장한 뒤, 제자리에서 작아지며 나머지가 함께 나타남 */

.landing-intro-copy {
  transform-origin: center center;
}

.reveal-item {
  opacity: 0;
}

/* 채팅 버튼은 transform과 transition 자리를 styles.css가 이미 쓰고 있다
   (스크롤 흔들림 --drift, 호버 확대 --fab-scale). 여기서 같이 지정하면 그 설정을 덮어써서,
   styles.css를 고칠 때마다 이쪽도 맞춰 고쳐야 하는 상태가 된다.
   그래서 위로 떠오르는 등장 이동은 채팅 버튼을 뺀 나머지에만 준다. */
.reveal-item:not(.chat-fab) {
  transform: translateY(18px);
  transition: opacity 3s cubic-bezier(0.22, 1, 0.36, 1), transform 3s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-word.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-item.is-visible {
  opacity: 1;
}

.reveal-item.is-visible:not(.chat-fab) {
  transform: translateY(0);
}

/* 채팅 버튼의 등장 효과는 transition 대신 애니메이션으로 준다. transition 자리를 쓰지 않으므로
   styles.css의 호버 확대 설정과 부딪히지 않고, 그쪽을 고쳐도 여기를 따라 고칠 필요가 없다. */
.chat-fab.reveal-item.is-visible {
  animation: chat-fab-fade-in 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes chat-fab-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.landing-lead {
  margin: 0 0 26px;
  white-space: pre-line;
  font-size: 1.3rem;
  line-height: 1.65;
  font-weight: 500;
  color: var(--text);
}

.landing-inner h1 {
  margin: 0 0 26px;
  white-space: pre-line;
  font-size: clamp(2.5rem, 4.6vw, 3.4rem);
  line-height: 1.32;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.landing-text {
  margin: 0 0 34px;
  font-size: 1.18rem;
  line-height: 1.75;
  color: var(--muted);
}

.landing-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 34px;
}

.landing-actions .primary-btn,
.landing-actions .secondary-btn {
  min-height: 60px;
  padding: 0 2rem;
  font-size: 1.12rem;
  box-shadow: 0 10px 18px rgba(20, 59, 92, 0.2);
}

/* 전화 상담 버튼 — 어르신이 놓치지 않게 한 줄 전체를 쓴다.
   지금 고객이 닿는 길이 전화뿐이라 가장 눈에 띄어야 한다. */
.landing-actions .tel-btn {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 66px;
  padding: 0 1.5rem;
  border-radius: 14px;
  background: #0f7a3d;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  text-decoration: none;
  box-shadow: 0 10px 18px rgba(15, 122, 61, 0.28);
  transition: background 0.15s ease, transform 0.15s ease;
}

.landing-actions .tel-btn:hover,
.landing-actions .tel-btn:focus-visible {
  background: #0c6733;
  transform: translateY(-1px);
}

.landing-actions .tel-btn:active {
  transform: translateY(0);
}

.landing-actions .tel-btn-icon {
  font-size: 1.35rem;
  line-height: 1;
}

.landing-actions .tel-btn strong {
  font-weight: 800;
  letter-spacing: 0.5px;
}

.landing-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.landing-points li {
  display: flex;
  min-height: 60px;
  background: #fff;
  /* 테두리를 또렷하게 — 흰 배경에 흰 알약이라 경계가 잘 안 보였다 */
  border: 2px solid rgba(20, 59, 92, 0.22);
  border-radius: 999px;
  box-shadow: 0 10px 18px rgba(20, 59, 92, 0.12);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* 2026-09-21: 알약 안에 링크를 넣었다. 글자만이 아니라
   알약 전체가 눌리도록 a 가 칸을 꽉 채우게 한다. */
.landing-points li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.7rem 1rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  border-radius: inherit;
}

/* 누를 수 있다는 걸 알 수 있게 반응을 준다 */
.landing-points li:hover,
.landing-points li:focus-within {
  border-color: rgba(20, 59, 92, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 14px 22px rgba(20, 59, 92, 0.18);
}

/* 휴대폰에서는 화면 아래 항상 떠 있는 전화상담·상담신청 버튼(mobile-cta.js)이
   같은 역할을 하므로, 문구 아래 버튼 목록은 중복이라 숨긴다 (2026-09-25).
   mobile-cta가 뜨는 기준(styles.css, 980px)과 맞췄다. */
@media (max-width: 980px) {
  .landing-actions,
  .landing-points {
    display: none;
  }
}

@media (max-width: 640px) {
  .landing-photo {
    height: min(40vh, 320px);
  }

  .landing-inner {
    margin-top: -48px;
    padding-bottom: 48px;
  }

  .landing-inner h1 {
    font-size: 2rem;
  }

  .landing-lead {
    font-size: 1.1rem;
  }

  .landing-text {
    font-size: 1.05rem;
  }

  .landing-actions {
    grid-template-columns: 1fr;
  }

  .landing-points {
    grid-template-columns: 1fr;
  }
}