/* 첫 페이지와 글 페이지가 같이 쓰는 것: 색·글꼴, 상단 로고·메뉴, 푸터 */
:root {
  --bg: #F6F5F1;
  --surface: #FFFFFF;
  --ink: #111111;
  --muted: #6B6B66;
  --line: #E3E1DA;
  --accent: #73FFFF;
  --radius: 16px;
  --gutter: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
/* 복사 막기: 글자 선택·이미지 끌기·길게 눌러 저장을 막는다. 메일 주소와 글 속 코드는 복사할 수 있게 둔다 */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img, svg { -webkit-user-drag: none; }
.mail, .mail *, pre, pre * { -webkit-user-select: text; user-select: text; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
h1, h2, h3, p, li { word-break: keep-all; }
svg { display: block; }

/* ---------- 상단 ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px var(--gutter);
  font-weight: 700; font-size: 16px;
  pointer-events: none;
}
.nav a { pointer-events: auto; text-decoration: none; }
/* 로고: 글자를 물결 모양으로 얹는다 */
.logo { font-size: 22px; font-weight: 800; letter-spacing: 0.08em; color: var(--ink); }
.logo span {
  display: inline-block; transform-origin: 50% 60%;
  transform: translateY(calc(var(--y) + var(--dy, 0px))) rotate(calc(var(--r) + var(--dr, 0deg)));
}
/* 메뉴 버튼: 올리면 OPEN 글자가 하나씩 위에서 떨어지고, MENU 글자는 아래로 빠진다 */
.menu-btn {
  position: relative;
  pointer-events: auto; display: inline-grid; overflow: hidden;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 800; letter-spacing: 0.08em; line-height: 1.3;
}
.menu-btn span { grid-area: 1 / 1; display: flex; justify-content: flex-end; }
.menu-btn i {
  font-style: normal; display: inline-block;
  transition: transform .3s cubic-bezier(.3, 1.45, .55, 1), opacity .2s;
  transition-delay: calc(var(--i) * 60ms);
}
.menu-btn .b i { transform: translateY(-115%); }
.menu-btn:hover .a i, .menu-btn:focus-visible .a i { transform: translateY(115%); }
.menu-btn:hover .b i, .menu-btn:focus-visible .b i { transform: translateY(0); }
/* 누르면 글자가 가운데로 모여 사라지고 점선 원이 한 바퀴 돈 뒤 메뉴가 열린다 */
.menu-btn .dots {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  opacity: 0; transition: opacity .15s;
}
.menu-btn .dots svg { width: 100%; height: 100%; }
.menu-btn.loading i {
  transition-delay: 0s; transition-duration: .18s;
  opacity: 0; transform: translateX(calc((1.5 - var(--i)) * 0.75em)) scale(.2) !important;
}
.menu-btn.loading .dots { opacity: 1; }
.menu-btn.loading .dots svg { animation: dots-spin .5s linear infinite; }
@keyframes dots-spin { to { transform: rotate(360deg); } }

/* 메뉴 화면: 어두운 화면 가운데 링크 세 개. 올리면 화살표가 물결로 바뀐다 */
.menu {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center;
  background: var(--ink); color: var(--bg);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
}
.menu.open { opacity: 1; visibility: visible; }
.menu-close {
  position: absolute; top: 12px; right: calc(var(--gutter) - 8px);
  width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: 0; color: inherit; cursor: pointer;
}
.menu-close svg { width: 22px; height: 22px; }
.menu svg path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.menu ul { list-style: none; display: grid; gap: 14px; text-align: center; }
.menu a {
  display: inline-flex; align-items: center; gap: 0.3em;
  color: inherit; text-decoration: none;
  font-size: clamp(32px, 5vw, 56px); font-weight: 800; letter-spacing: -0.03em;
}
.menu .arrow { display: inline-grid; width: 0.8em; }
.menu .arrow svg { grid-area: 1 / 1; width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .menu, .menu-btn i, .menu-btn .dots { transition: none; }
}

/* 어두운 푸터. Penny가 윗변 너머로 고개를 내민다 */
.site-footer {
  position: relative;
  background: var(--ink); color: var(--bg);
  padding: 72px var(--gutter) 32px;
}
.footer-penny {
  position: absolute; left: 50%; bottom: 100%; z-index: -1;
  width: clamp(120px, 12vw, 170px);
  transform: translate(-50%, 38%);
}
.footer-penny svg { width: 100%; height: auto; }
.site-footer .logo { color: var(--bg); font-size: 28px; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px;
  margin-bottom: 96px;
}
.footer-col h3 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a { color: #8A8A85; text-decoration: none; font-weight: 600; transition: color .15s; }
.footer-col a:hover { color: var(--bg); }
.copyright { font-size: 13px; color: #8A8A85; }

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}