소개 랜딩

<header class="bar">
  <div class="wrap bar-in">
    <strong>마야 도서관</strong>
    <nav><a href="#join">문의</a></nav>
  </div>
</header>

<section class="hero">
  <div class="wrap">
    <h1>책을 빌리고 자리를 예약합니다</h1>
    <p>회원이면 누구나 이용할 수 있습니다.</p>
    <a class="btn" href="#join">문의하기</a>
  </div>
</section>

<section class="wrap">
  <h2>이런 것을 할 수 있습니다</h2>
  <div class="features">
    <article>
      <h3>대출</h3>
      <p>한 번에 다섯 권까지 빌립니다.</p>
    </article>
    <article>
      <h3>열람실</h3>
      <p>자리를 미리 예약합니다.</p>
    </article>
    <article>
      <h3>행사</h3>
      <p>매달 독서 모임이 열립니다.</p>
    </article>
  </div>
</section>

<section class="tint" id="join">
  <div class="wrap narrow">
    <h2>문의하기</h2>
    <form>
      <label for="nm">이름</label>
      <input id="nm" name="nm" required>
      <label for="msg">남길 말</label>
      <textarea id="msg" name="msg" rows="3"></textarea>
      <button class="btn">보내기</button>
    </form>
  </div>
</section>

<footer class="foot">
  <div class="wrap"><p>문의 홍길동</p></div>
</footer>

* { box-sizing: border-box; }

:root {
  --brand: #6e56cf;
  --ink: #3b4252;
  --line: #e5e0f5;
  --tint: #f8f7fd;
}

body {
  font-family: "Pretendard", "맑은 고딕", sans-serif;
  line-height: 1.7; color: var(--ink); margin: 0;
}

/* 구역마다 되풀이되는 폭 제한을 한 클래스로 둡니다 */
.wrap { max-width: 760px; margin: 0 auto; padding: 28px 16px; }
.narrow { max-width: 460px; }

/* 머리 줄 */
.bar { border-bottom: 1px solid var(--line); }
.bar-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px; padding-bottom: 14px;
}

/* 머리 화면 — 바탕은 끝까지, 글은 가운데로 */
.hero { background: var(--tint); text-align: center; }
.hero h1 { font-size: clamp(22px, 5vw, 34px); margin: 0 0 8px; }
.hero p  { margin: 0 0 18px; color: #5b6272; }

/* 기능 목록 */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.features article {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
}
.features h3 { margin: 0 0 4px; font-size: 1rem; color: var(--brand); }
.features p  { margin: 0; color: #5b6272; font-size: 0.95rem; }

/* 문의 구역 */
.tint { background: var(--tint); }
form label { display: block; margin: 10px 0 4px; font-size: 0.9rem; }
input, textarea {
  width: 100%; font: inherit;
  padding: 9px 10px;
  border: 1px solid #ccc; border-radius: 8px;
}
input:focus, textarea:focus { outline: 2px solid var(--brand); border-color: var(--brand); }

/* 단추 — a 와 button 에 같은 모양을 줍니다 */
.btn {
  display: inline-block; font: inherit;
  background: var(--brand); color: #fff;
  border: 0; border-radius: 8px;
  padding: 10px 20px; margin-top: 14px;
  text-decoration: none; cursor: pointer;
  transition: transform 0.15s ease;
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }

.foot { border-top: 1px solid var(--line); color: #686c78; font-size: 0.9rem; }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }