/* 임시 홈. M5에서 손그림 일러스트와 함께 다시 만든다. */
.hero {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-4) var(--space-4);
  text-align: center;
}

/* TODO: 네 자아가 들어간 손그림으로 교체 */
.hero-drawing {
  color: var(--ink-soft);
  max-width: 520px;
  margin: 0 auto var(--space-5);
}

.hero-drawing svg {
  display: block;
  width: 100%;
  height: auto;
}

.hero h1 {
  font-size: clamp(36px, 7vw, 52px);
  margin: 0;
}

/* 이름 밑 혼잣말. 게임 대사처럼 한 글자씩 찍히고, ▼를 누르면 다음 말 */
.saying {
  position: relative;
  display: inline-block;
  max-width: min(100%, 440px);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-6);
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
}

.saying-frame {
  position: absolute;
  inset: 0;
  color: var(--ink-soft);
  pointer-events: none;
}

.saying-frame svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 다 찍힌 문장(투명)이 자리를 먼저 잡아서, 찍는 동안 상자가 늘어나지 않는다 */
.saying-text {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 0.25em;
}

.saying-text::before,
.saying-text::after {
  grid-row: 1;
  color: var(--ink-soft);
  font-family: var(--font-display);
}

.saying-text::before {
  content: "“";
  grid-column: 1;
}

.saying-text::after {
  content: "”";
  grid-column: 3;
}

.saying-full,
.saying-typed {
  grid-area: 1 / 2;
}

.saying-full {
  color: transparent;
}

/* 게임 대사창처럼 오른쪽 아래 구석에 떠 있다. 글자 흐름 밖이라 문장은 상자 한가운데 온다.
   손그림 테두리가 상자 끝보다 조금 안쪽에 그려져서, 그 선까지의 거리가 오른쪽·아래 같도록 맞춘 값 */
.saying-next {
  position: absolute;
  right: 12.5px;
  bottom: 12.5px;
  color: var(--ink-soft);
}

.saying-next svg {
  display: block;
  width: 8px;
  height: auto;
  opacity: 0.35;
  transition: opacity var(--quick) var(--ease);
  animation: saying-blink 1.6s steps(1) infinite;
}

.saying:hover .saying-next svg,
.saying:focus-visible .saying-next svg {
  opacity: 1;
  color: var(--accent);
  animation: saying-bob 0.6s var(--ease) infinite alternate;
}

.saying.is-typing .saying-next {
  visibility: hidden;
}

@keyframes saying-blink {
  50% {
    opacity: 0;
  }
}

@keyframes saying-bob {
  to {
    transform: translateY(2px);
  }
}

.home-section h2 {
  font-size: 22px;
  margin: var(--space-7) 0 0;
}

.home-section h2 a {
  text-decoration: none;
}

.home-section .year h2 {
  display: none;
}

.home-section .note-list {
  margin-top: var(--space-4);
}

.more {
  margin: var(--space-3) 0 0;
  font-size: 15px;
}