/* 구구절절 웹 — 공통 톤 (크림/잉크, 문장 중심 미니멀). 표준 CSS만 사용. */
:root {
  --cream: #F7F4EF;
  --ink: #1A1814;
  --gray: #8C8880;
  --soft-ink: #3A352E; /* 본문 가독용 — 잉크에 가깝되 부드러운 톤 */
  --leaf: #3FB967;
  --border: rgba(26, 24, 20, 0.08);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Noto Serif KR', serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
  display: flex;
  min-height: 100%;
}
.wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 14px;
  min-height: 100vh; /* dvh 미지원 브라우저 폴백 */
  min-height: 100dvh; /* 모바일 주소창 제외한 실제 보이는 높이 → 진짜 수직 중앙 */
}
.brand {
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.03em;
}
/* 로고 — 박스/배경/그림자/테두리 없이 크림 배경 위에 그냥 얹힘. 정사각, 화면폭의 ~32%. */
.logo-box {
  width: 32vw;
  max-width: 170px;
  min-width: 120px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.tagline {
  font-size: 17px;
  font-weight: 500;
  color: var(--soft-ink);
  line-height: 1.75;
}
.handle {
  font-weight: 700;
  font-size: 22px;
  color: var(--leaf); /* 핸들 강조 — 빨강 금지 */
  letter-spacing: -0.01em;
}
.note {
  font-size: 16px;
  font-weight: 500;
  color: var(--soft-ink);
  line-height: 1.75;
}
.divider {
  width: 28px;
  height: 2px;
  background: var(--border);
  margin: 6px 0;
}
.footer-links {
  position: fixed;
  bottom: 18px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 12px;
}
.footer-links a { color: var(--gray); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }

.page {
  max-width: 560px;
  margin: 0 auto;
  padding: 80px 24px 120px;
  width: 100%;
}
.page h1 { font-size: 24px; font-weight: 900; margin-bottom: 16px; letter-spacing: -0.03em; }
.page p { font-size: 15px; color: var(--gray); line-height: 1.8; }
.page .back { display: inline-block; margin-top: 28px; font-size: 13px; color: var(--gray); text-decoration: none; }
.page .back:hover { color: var(--ink); }