/* 사이트 공용 색상 팔레트 — thumbnail-v3.png(타이틀 일러스트)의 차분한 라벤더·아이보리 톤에 맞춰 정리 */
:root {
  --bg: #f4efe6;
  --surface: #faf7f2;
  --surface2: #f0ebe0;
  --surface3: #e8e2d6;
  --border: #d4c9b8;

  --text: #3a3530;
  --text-dim: #8a7e6b;
  --text-muted: #b0a898;

  --pink: #c0899e;
  --pink-dim: rgba(192,137,158,0.15);
  --violet: #a89ec4;
  --violet-dim: rgba(168,158,196,0.15);
  --blue: #5a82a8;
  --blue-dim: rgba(90,130,168,0.15);
  --amber: #c9962a;
  --amber-dim: rgba(201,150,42,0.15);
  --mint: #5a9e7a;
  --mint-dim: rgba(90,158,122,0.15);
  --rose: #c2727f;

  --radius: 12px;
  --font-title: 'ko-font', sans-serif;
  --font-body: 'ko-font', sans-serif;

  /* 페이지 배경 그라데이션 — 위: 햇살(아이보리), 아래: 심해(보라) */
  --page-gradient: linear-gradient(180deg, #f8f3ea 0%, #ece2ea 48%, #b6a9cf 82%, #a89ec4 100%);

  /* 그라데이션 위에 얹는 반투명 블록 */
  --surface-glass: rgba(250, 247, 242, 0.7);
  --surface-glass-strong: rgba(250, 247, 242, 0.86);
}

/* 공용 내비게이션 링크 — 뒤로가기/홈/목록 등. 라벨·목적지는 페이지마다 다를 수 있음 */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--text-dim);
  font-size: 0.85rem;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: color 0.2s;
}
.nav-link:hover { color: var(--text); }

/* 공용 보조 액션 버튼 — "편집/수정/관리자 모드" 등 작은 아웃라인 필 */
.action-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-glass);
  color: var(--text-dim);
  font-family: var(--font-title);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}
.action-pill:hover {
  background: var(--violet-dim);
  border-color: var(--violet);
  color: var(--text);
}

/* 페이지 좌상단 고정 위치 — 홈/뒤로가기 등 진입 내비게이션을 모든 페이지에서 같은 자리에 */
.nav-corner {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 10;
}

/* 페이지 우상단 고정 위치 — 다른 페이지로 이동하는 보조 버튼들을 모아두는 자리 */
.nav-corner-right {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* 실시간 연결 상태 표시 — 좌하단 코너에 스크롤과 무관하게 고정 */
.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.6rem;
  color: var(--text-muted);
  position: fixed;
  bottom: 3%;
  left: 1.2rem;
  z-index: 50;
  transition: all 0.3s;
}
.sync-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  transition: background 0.3s;
}
.sync-badge.offline .dot { background: var(--rose); }

/* 공용 페이지 타이틀 — 큰 헤더형 페이지(랜덤 뽑기/관리자/글 목록 등)의 제목 영역을 통일 */
.page-hero {
  text-align: center;
  padding: 44px 16px 36px;
}
.page-hero h1 {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
  color: #5a4a6b;
}
.page-hero .action-pill { margin-top: 10px; }
@media (max-width: 420px) {
  .page-hero h1 { font-size: 1.4rem; }
  .nav-corner-right { gap: 0.35rem; }
  .nav-corner-right .action-pill { padding: 0.32rem 0.6rem; font-size: 0.7rem; }
}
</content>