/* =========================================================
   GREETING.CSS
   인사말 / 초대 문구
========================================================= */


/* =========================================================
   1. Greeting Layout
========================================================= */

.greeting {
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  width: 100%;

  /*
    너무 고정적으로 높지 않게,
    화면 크기에 따라 자연스럽게 조절
  */
  min-height: clamp(420px, 105vw, 480px);

  text-align: center;
}


/* =========================================================
   2. Greeting Title
========================================================= */

.greeting__title {
  width: 100%;
  max-width: 310px;

  margin: 0;

  color:
    var(--color-ink);

  font-family:
    "SUIT-Light";

  /*
    기존 25 ~ 34px
    ↓
    조금 더 차분한 모바일 비율
  */
  font-size:
    clamp(20px, 5.8vw, 25px);

  font-weight: 500;

  line-height: 1.55;

  letter-spacing:
    -0.03em;

  white-space: pre-line;

  word-break: keep-all;
}


/* =========================================================
   3. Greeting Divider
========================================================= */

.greeting__rule {
  width: 1px;

  height:
    clamp(42px, 11vw, 50px);

  margin:
    clamp(24px, 6vw, 28px)
    0;

  background:
    var(--color-accent);

  opacity: 0.75;
}


/* =========================================================
   4. Greeting Body
========================================================= */

.greeting__body {
  width: 100%;
  max-width: 320px;

  margin: 0;

  color:
    var(--color-muted);

  font-family:
    "SUIT-Light";

  /*
    본문은 모바일에서 너무 커지지 않게
  */
  font-size:
    clamp(16px, 3.2vw, 18px);

  font-weight: 400;

  /*
    인사말은 여백감이 중요해서
    줄간격을 넉넉하게 유지
  */
  line-height: 2;

  letter-spacing:
    -0.015em;

  white-space: pre-line;

  word-break: keep-all;
}