/* ── self-host Poppins (구글 폰트 깜빡임 방지) ──────────────
   font-display: optional → 로드 전엔 폴백, 로드 후에도 '교체 안 함'
   = 레이아웃 시프트(폭 변화) 없음. preload된 캐시면 바로 Poppins로 그림 */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: optional; src: url("/fonts/poppins-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: optional; src: url("/fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: optional; src: url("/fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: optional; src: url("/fonts/poppins-latin-700-normal.woff2") format("woff2"); }

/* ============================================================
   stella-art — 미니멀 갤러리 테마
   starcongart.wordpress.com 레이아웃 재현
   왼쪽 세로 사이드바 + 반응형 메이슨리 그리드 (3 → 2 → 1)
   ============================================================ */

:root {
  --sidebar-w: 230px;
  --gap: 2.5rem;
  --fg: #1c1c1c;
  --muted: #9a9a96;
  --soft: #6f6f6b;
  --bg: #f2f1ee;          /* 따뜻한 연회색 배경 */
  --maxw: 1500px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; transition: opacity .15s; }
a:hover { opacity: 0.55; }

/* 이미지 fade-in: JS 켜진 경우만. 로드 완료 시 서서히 나타남 */
.js img.fade { opacity: 0; transition: opacity .7s ease; }
.js img.fade.is-loaded { opacity: 1; }

/* ── 사이드바 ─────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  padding: 2.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background: var(--bg);
  overflow-y: auto;
}

.brand a { display: flex; flex-direction: column; line-height: 1.1; }
.brand-en { font-size: 1.7rem; font-weight: 300; letter-spacing: 0.01em; }
.brand-ko { font-size: 0.9rem; font-weight: 300; color: var(--muted); margin-top: 0.35rem; }

.menu { display: flex; flex-direction: column; gap: 1.4rem; flex: 1; }

.menu-head {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--fg);
}

/* Artworks 접기 토글 */
.menu-group { }
.menu-group > summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
}
.menu-group > summary::-webkit-details-marker { display: none; }
.menu-group > summary::after { content: " +"; color: var(--muted); font-weight: 400; }
.menu-group[open] > summary::after { content: " ×"; }

.menu-sub { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.menu-sub li { margin: 0.25rem 0; }
.menu-sub a { font-size: 0.92rem; color: var(--soft); }
.menu-sub a.active { color: var(--fg); font-weight: 600; }
.menu-sub li.medium a { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; }

.menu-contact { color: var(--soft); font-weight: 400; }

.social { color: var(--muted); }
.social a { display: inline-flex; }

/* ── 본문 영역 ───────────────────────────────────────────── */
.content {
  margin-left: var(--sidebar-w);
  padding: 2.5rem clamp(1.5rem, 4vw, 4rem) 5rem;
  max-width: var(--maxw);
}

.page-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
  min-height: 2rem;
}
.page-title {
  font-size: 1.3rem;
  font-weight: 300;
  margin: 0;
  text-align: center;
  flex: 1;
  letter-spacing: 0.01em;
}
.page-title .cat-prefix { color: var(--muted); }
.search-icon { background: none; border: none; cursor: pointer; color: var(--fg); padding: 0; display: inline-flex; }

/* 검색 패널 */
.search-panel { margin: -1rem 0 2.5rem; }
#search-input {
  width: 100%; max-width: 540px;
  padding: 0.5rem 0.1rem;
  border: none; border-bottom: 1px solid var(--fg);
  background: transparent;
  font: inherit; font-size: 1.5rem; font-weight: 300;
  outline: none;
}
.search-results { list-style: none; margin: 0.6rem 0 0; padding: 0; max-width: 540px; }
.search-results li a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0; border-bottom: 1px solid var(--line);
}
.search-results .meta { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.nav-burger { display: none; font-size: 1.4rem; cursor: pointer; }
.sb-burger { display: none; font-size: 1.5rem; line-height: 1; cursor: pointer; }

/* ── 메이슨리 그리드 (CSS multi-column) ───────────────────── */
/* 기본(JS 꺼짐) 폴백: CSS 칼럼 메이슨리(열 우선) */
.grid {
  column-count: 3;
  column-gap: var(--gap);
}
@media (max-width: 1100px) { .grid { column-count: 2; } }
@media (max-width: 700px)  { .grid { column-count: 1; } }

/* JS 켜짐: 행 우선 메이슨리 — 카드를 컬럼 div로 분배(좌→우로 읽힘) */
.grid.masonry-js { column-count: auto; display: flex; gap: var(--gap); align-items: flex-start; }
.grid-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.masonry-js .card { margin-bottom: 0; }

/* 카드형: 대표 이미지(위) + 흰 배경 콘텐츠 영역(아래). 그림자 없이 깔끔하게 */
.card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 var(--gap);
  width: 100%;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
}
.card-img img,
.single-img,
.thumbs img {
  width: 100%;
  height: auto;
  display: block;
}
.card-body { padding: 1.25rem 1.35rem 1.5rem; }

.tagline { font-size: 0.8rem; color: var(--muted); margin: 1rem 0 0.5rem; letter-spacing: 0.01em; }
.card-body .tagline { margin-top: 0; }
.card-title { font-size: 1.45rem; font-weight: 700; margin: 0 0 0.5rem; line-height: 1.25; letter-spacing: -0.01em; }
.card-caption { font-size: 0.95rem; font-weight: 300; color: var(--soft); white-space: pre-line; }
.card-caption div { margin: 0.05rem 0; }

/* 카드 하단 썸네일 — 전부, 원본 비율 그대로, 3개씩 한 줄 */
.card-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 1rem; align-items: start; }
.card-thumbs a { display: block; }
.card-thumbs img { width: 100%; height: auto; display: block; }

.empty { color: var(--muted); }

/* ── 단일 작품 페이지 ─────────────────────────────────────── */
.single { max-width: 760px; margin: 0 auto; }
.single .tagline { font-size: 0.85rem; margin-top: 1rem; }
.single-caption { font-size: 1rem; font-weight: 300; color: var(--soft); margin-top: 0.3rem; white-space: pre-line; }
.single-body { margin-top: 1.5rem; }
.thumbs { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }

/* ── 분류 목록 페이지 ─────────────────────────────────────── */
.term-index { list-style: none; padding: 0; max-width: 400px; margin: 0 auto; }
.term-index li { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #e3e1dc; }
.term-index .count { color: var(--muted); font-size: 0.85rem; }

/* ── 반응형: 모바일에서 사이드바를 상단 바로 ──────────────── */
@media (max-width: 780px) {
  /* 상단 고정(sticky) 바: 사이트명 + 햄버거 */
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 50;
    width: auto; height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 0.9rem 1.25rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .brand { flex: 1; }
  .brand a { flex-direction: row; align-items: baseline; gap: 0.5rem; }
  .brand-en { font-size: 1.3rem; }

  .sb-burger { display: block; }

  /* 메뉴·소셜은 평소 접혀 있다가 햄버거로 펼침 */
  .menu { display: none; flex-basis: 100%; }
  .social { display: none; flex-basis: 100%; }
  .nav-toggle:checked ~ .sidebar .menu { display: flex; }
  .nav-toggle:checked ~ .sidebar .social { display: flex; }

  .content { margin-left: 0; padding: 1.5rem 1.25rem 4rem; }
  .nav-burger { display: none; }   /* 사이드바 햄버거로 대체 */
  .page-title { text-align: left; }
}