/* ═══════════════════════════════════════════════
   고민만 많은 연구원 — 공통 스타일시트
   ═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;500;600&family=DM+Mono:ital,wght@0,300;0,400;1,300&family=Playfair+Display:ital,wght@0,700;1,400&display=swap');

:root {
  --ink:     #18160f;
  --paper:   #f7f3ec;
  --paper2:  #eeead9;
  --paper3:  #e6e1d8;
  --muted:   #857d6e;
  --line:    #d9d3c7;
  --accent:  #6b4c2a;
  --accent2: #a07040;
  --card:    #faf8f4;
  --shadow:  rgba(24,22,15,.08);
  --nav-h:   56px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Noto Serif KR', serif;
  min-height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
}

/* ── 사이트 공통 헤더/nav ── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
  padding: 0 2rem;
  gap: 2rem;
}
.site-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
  white-space: nowrap; flex-shrink: 0;
}
.site-logo em { font-style: italic; color: var(--accent); }

.site-nav { display: flex; gap: 0; margin-left: auto; }
.site-nav a {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  padding: 0.4rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: all .15s;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--accent); border-color: var(--line); }
.site-nav a.active {
  color: var(--accent);
  border-color: var(--line);
  background: var(--card);
}
.site-nav a.wip {
  opacity: 0.55;
  cursor: default;
  pointer-events: none; /* 링크 비활성 */
}
.site-nav a.wip::after {
  content: ' (준비중)';
  font-size: 0.55rem;
  opacity: 0.7;
}

/* 모바일 햄버거 */
.nav-toggle {
  display: none;
  background: none; border: none;
  cursor: pointer; padding: 0.3rem;
  color: var(--muted); margin-left: auto;
}
.nav-toggle span {
  display: block; width: 20px; height: 1.5px;
  background: var(--ink); margin: 4px 0;
  transition: all .2s;
}

/* ── 공통 푸터 ── */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.5rem 2rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem; color: var(--muted);
  letter-spacing: 0.08em;
  display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem;
  margin-top: auto;
}

/* ── 공통 유틸 ── */
.tag {
  font-family: 'DM Mono', monospace; font-size: 0.62rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--line); border-radius: 99px;
  color: var(--muted);
}

@media (max-width: 680px) {
  .site-header { padding: 0 1rem; }
  .site-nav {
    display: none; flex-direction: column;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0.8rem 1rem;
    gap: 0.2rem;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 0.5rem 0.8rem; }
  .nav-toggle { display: block; }
}