/* ================================================================
   Rosette v2 — style.css
   팔레트: #f9c8dc / #f7a8ce / #f472b6 / #4a4448 / #2c2c2c
================================================================ */

/* ── CSS 변수 ── */
:root {
  /* 팔레트 */
  --pink-pale:   #f9c8dc;
  --pink-light:  #f7a8ce;
  --pink-mid:    #f472b6;
  --pink-dark:   #d946a8;
  --gray:        #4a4448;
  --charcoal:    #2c2c2c;

  /* 라이트 모드 */
  --bg:          #fdfbfc;
  --bg-card:     #ffffff;
  --bg-hover:    #fdf2f8;
  --border:      #f0dce8;
  --border-soft: #f9edf5;

  --text-1: #2c2c2c;
  --text-2: #4a4448;
  --text-3: #8b7a85;

  --accent:      #f472b6;
  --accent-muted:#fde8f4;

  --shadow:      0 1px 4px rgba(244,114,182,.08), 0 4px 20px rgba(244,114,182,.06);
  --shadow-hover:0 4px 16px rgba(244,114,182,.20), 0 8px 32px rgba(244,114,182,.10);

  --header-bg:   #ffffff;
  --footer-bg:   #fdf2f8;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-full: 9999px;

  --font-sans:  'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  --font-serif: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  --ease: .2s ease;
}

/* ── 다크 모드 ── */
[data-theme="dark"] {
  --bg:          #1e1a1c;
  --bg-card:     #252023;
  --bg-hover:    #2e2830;
  --border:      #3d3339;
  --border-soft: #302830;

  --text-1: #f5e8ef;
  --text-2: #c9aec0;
  --text-3: #8a6e7e;

  --accent-muted: #3a1a2e;

  --shadow:       0 1px 4px rgba(0,0,0,.4);
  --shadow-hover: 0 4px 16px rgba(244,114,182,.18);

  --header-bg:  #1e1a1c;
  --footer-bg:  #1a161a;
}

/* ================================================================
   RESET & BASE
================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background .25s, color .25s;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { border: none; background: none; cursor: pointer; font: inherit; color: inherit; }

/* ================================================================
   HEADER
================================================================ */
#site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  transition: background .25s, border-color .25s;
}

.header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;   /* 수직 중앙 */
  gap: 8px;
}

/* 블로그 로고 이미지 */
.blog-logo {
  height: 36px;
  width: auto;
  display: block;
}

/* 블로그 제목 */
.blog-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  white-space: nowrap;
  margin-right: auto; /* ← 제목이 왼쪽 고정, 나머지 오른쪽 밀기 */
}
.blog-title a {
  background: linear-gradient(90deg, var(--charcoal) 0%, var(--pink-mid) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="dark"] .blog-title a {
  background: linear-gradient(90deg, #f5e8ef 0%, var(--pink-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* GNB */
.gnb { display: flex; align-items: center; }
.gnb-list {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;   /* 줄바꿈 방지 */
}
.gnb-list > li { display: flex; align-items: center; }
.gnb-list a {
  display: inline-flex;
  align-items: center;
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-2);
  padding: 6px 12px;
  border-radius: var(--r-full);
  transition: background var(--ease), color var(--ease);
  line-height: 1;
}
.gnb-list a:hover { background: var(--accent-muted); color: var(--accent); }

/* 카테고리 드롭다운 */
.gnb-cat-wrap { position: relative; }

.gnb-cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-2);
  padding: 6px 12px;
  border-radius: var(--r-full);
  border: none;
  line-height: 1;
  transition: all var(--ease);
}
.gnb-cat-btn:hover,
.gnb-cat-btn[aria-expanded="true"] {
  background: var(--accent-muted);
  color: var(--accent);
}
.gnb-cat-btn svg { transition: transform var(--ease); flex-shrink: 0; }
.gnb-cat-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.gnb-cat-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 160px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  box-shadow: 0 8px 32px rgba(244,114,182,.14), 0 2px 8px rgba(0,0,0,.08);
  padding: 8px;
  z-index: 200;
  animation: dropIn .15s ease;
}
.gnb-cat-dropdown.open { display: block; }

@keyframes dropIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 티스토리 category_list 링크 오버라이드 */
.gnb-cat-dropdown a,
.gnb-cat-dropdown .category_list,
.gnb-cat-dropdown .category_list li { list-style: none; }
.gnb-cat-dropdown a {
  display: block;
  font-size: .82rem;
  color: var(--text-2);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  transition: all var(--ease);
  white-space: nowrap;
}
.gnb-cat-dropdown a:hover { background: var(--accent-muted); color: var(--accent); }

/* 헤더 오른쪽 액션 버튼 그룹 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* 테마 토글 */
.theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .88rem;
  border: none;
  color: var(--text-2);      /* 모드에 따라 자동 변경 */
  background: transparent;
  transition: all var(--ease);
}
.theme-toggle:hover {
  color: var(--accent);
  background: var(--accent-muted);
}
[data-theme="light"] .icon-dark,
[data-theme="dark"]  .icon-light { display: none; }

/* 햄버거 */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--text-2);
  border-radius: 2px;
  transition: all var(--ease);
}

/* ================================================================
   PAGE
================================================================ */
#page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 24px 64px;
}

/* ================================================================
   PROFILE BANNER
================================================================ */
#profile-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 20px 28px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
  transition: background .25s, border-color .25s;
}

.profile-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--pink-pale), var(--pink-mid));
  border: none;
  flex-shrink: 0;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.profile-name {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 6px;
}
.profile-desc {
  font-size: .9rem;
  color: var(--text-3);
  line-height: 1.5;
}
.profile-links { display: flex; gap: 6px; }
.profile-links a {
  font-size: .7rem;
  font-weight: 500;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 3px 12px;
  transition: all var(--ease);
}
.profile-links a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-muted); }

/* ================================================================
   PIN GRID — 인덱스 페이지에서만 masonry 활성화
   퍼머링크/카테고리 등 다른 페이지에선 일반 블록으로
================================================================ */

/* 기본: 그리드 비활성 (퍼머링크 등) */
.pin-grid {
  display: block;
}

/* 인덱스(홈) 페이지에서만 masonry */
#tt-body-index .pin-grid,
#tt-body-category .pin-grid,
#tt-body-search .pin-grid,
#tt-body-tag .pin-grid,
#tt-body-archive .pin-grid {
  columns: 3;
  column-gap: 16px;
}

@media (max-width: 900px) {
  #tt-body-index .pin-grid,
  #tt-body-category .pin-grid,
  #tt-body-search .pin-grid,
  #tt-body-tag .pin-grid,
  #tt-body-archive .pin-grid { columns: 2; column-gap: 14px; }
}
@media (max-width: 480px) {
  #tt-body-index .pin-grid,
  #tt-body-category .pin-grid,
  #tt-body-search .pin-grid,
  #tt-body-tag .pin-grid,
  #tt-body-archive .pin-grid { columns: 2; column-gap: 10px; }
}

/* 퍼머링크 페이지에서 post-single — 프로필 배너와 동일한 너비 */
#tt-body-page .post-single {
  width: 100%;
  margin: 0 auto;
}

.pin-card {
  break-inside: avoid;
  margin-bottom: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow var(--ease), transform var(--ease), background .25s;
}
.pin-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }

/* 호버 시 제목 오버레이 */
.pin-hover-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 16px 14px;
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--ease);
  word-break: keep-all;
  line-height: 1.4;
}
.pin-card:hover .pin-hover-title { opacity: 1; }

/* pin-link 상대 포지션 기준 */
.pin-link { display: block; position: relative; }

/* 썸네일 있을 때 */
.pin-thumb { width: 100%; overflow: hidden; }
.pin-thumb img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .45s ease;
}
.pin-thumb a { display: block; }  /* list_rep_thumbnail은 a 태그로 감싸질 수 있음 */
.pin-thumb a img { width: 100%; height: auto; display: block; }
.pin-card:hover .pin-thumb img { transform: scale(1.05); }

/* 플레이스홀더: 기본은 보임 */
.pin-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  font-size: 1.4rem;
  background: linear-gradient(135deg, var(--pink-pale), var(--pink-light));
  color: #fff;
}
[data-theme="dark"] .pin-placeholder { color: #000; }

/* 썸네일이 존재하면 플레이스홀더 숨김 */
.pin-thumb + .pin-placeholder { display: none; }

.pin-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 7px; }

.pin-cat {
  display: inline-block;
  align-self: flex-start;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-muted);
  border-radius: var(--r-full);
  padding: 3px 10px;
  transition: background var(--ease);
}
.pin-cat:hover { background: var(--pink-pale); }

.pin-title {
  font-family: var(--font-serif);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-1);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pin-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .72rem;
  color: var(--text-3);
}
.pin-cmt { color: var(--pink-mid); }



/* ================================================================
   POST SINGLE — 글 상세
================================================================ */
.post-single {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.post-header {
  padding: 48px 52px 32px;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
}
.post-cat-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-muted);
  border-radius: var(--r-full);
  padding: 4px 14px;
  margin-bottom: 16px;
  transition: background var(--ease);
}
.post-cat-badge:hover { background: var(--pink-pale); }
.post-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-1);
  word-break: keep-all;
  margin-bottom: 16px;
}
.post-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: .78rem;
  color: var(--text-3);
}
.post-cmt { color: var(--pink-mid); }

/* 관리 버튼 */
.post-admin {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 10px 52px;
  border-bottom: 1px solid var(--border-soft);
}
.admin-btn {
  font-size: .74rem;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-3);
  transition: all var(--ease);
}
.admin-btn:hover { border-color: var(--accent); color: var(--accent); }
.admin-del:hover { border-color: #ef4444; color: #ef4444; }

/* 본문 */
.post-content {
  padding: 44px 52px;
  font-size: 1rem;
  line-height: 1.95;
  color: var(--text-1);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.post-content h2 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-1);
  margin: 2em 0 .6em;
  padding-bottom: .3em;
  border-bottom: 2px solid var(--pink-pale);
}
.post-content h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-1);
  margin: 1.6em 0 .5em;
}
.post-content p { margin-bottom: 1.1em; }
.post-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post-content img { border-radius: var(--r-md); margin: 1.5em auto; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.post-content blockquote {
  margin: 1.5em 0;
  padding: 16px 20px;
  border-left: 3px solid var(--pink-mid);
  background: var(--accent-muted);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-2);
  font-style: italic;
}
.post-content code {
  background: var(--accent-muted);
  color: var(--pink-dark);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .88em;
}
.post-content pre {
  background: var(--charcoal);
  color: #f5e8ef;
  padding: 20px 24px;
  border-radius: var(--r-md);
  overflow-x: auto;
  margin: 1.5em 0;
  font-size: .88em;
  line-height: 1.7;
}
[data-theme="dark"] .post-content pre { background: #100e10; }
.post-content pre code { background: none; color: inherit; padding: 0; }
.post-content hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }
.post-content ul { list-style: disc; padding-left: 1.5em; margin-bottom: 1em; }
.post-content ol { list-style: decimal; padding-left: 1.5em; margin-bottom: 1em; }
.post-content li { margin-bottom: .3em; }
.post-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .9em; }
.post-content th, .post-content td { padding: 10px 14px; border: 1px solid var(--border); }
.post-content th { background: var(--accent-muted); font-weight: 600; }

/* 태그 */
.post-tags {
  padding: 20px 52px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.post-tags a {
  font-size: .78rem;
  color: var(--text-2);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 4px 14px;
  transition: all var(--ease);
}
.post-tags a:hover { background: var(--accent-muted); color: var(--accent); border-color: var(--pink-pale); }

/* 이전/다음 글 */
.post-adjacent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border-soft);
}
.adj-btn {
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background var(--ease);
}
.adj-btn:hover { background: var(--bg-hover); }
.adj-prev { border-right: 1px solid var(--border-soft); }
.adj-next { align-items: flex-end; text-align: right; }
.adj-dir { font-size: .7rem; color: var(--text-3); letter-spacing: .06em; }
.adj-title {
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 관련 글 */
.related { padding: 28px 52px; border-top: 1px solid var(--border-soft); }
.related-heading {
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: 16px;
}
.related-heading span { color: var(--accent); }
.related-list { display: flex; gap: 12px; flex-wrap: wrap; }
.related-item { flex: 1; min-width: 130px; max-width: 180px; }
.related-item a {
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  transition: box-shadow var(--ease), transform var(--ease);
}
.related-item a:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.related-thumb { aspect-ratio: 3/2; overflow: hidden; background: var(--accent-muted); }
.related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.related-title { display: block; font-size: .78rem; font-weight: 500; color: var(--text-1); padding: 8px 10px 2px; }
.related-date { display: block; font-size: .7rem; color: var(--text-3); padding: 0 10px 10px; }

/* 댓글 */
.comment-section { padding: 36px 52px; border-top: 1px solid var(--border-soft); }
.comment-section .tt-comment-cont { font-family: var(--font-sans); color: var(--text-1); }
.comment-section .tt-box-total { font-size: .82rem; color: var(--text-3); margin-bottom: 20px; }
.comment-section .tt-list-reply { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.comment-section .tt-item-reply {
  padding: 16px 20px;
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--border-soft);
}
.comment-section .tt-link-user { color: var(--accent); font-weight: 600; }
.comment-section .tt_date { font-size: .74rem; color: var(--text-3); }
.comment-section .tt_desc { color: var(--text-1); margin-top: 6px; font-size: .9rem; }
.comment-section .tt-btn_register {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-full);
  padding: 8px 24px;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--ease);
}
.comment-section .tt-btn_register:hover { background: var(--pink-dark); }
.comment-section input[type="text"],
.comment-section input[type="password"] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-1);
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: .88rem;
  transition: border-color var(--ease);
}
.comment-section input:focus { outline: none; border-color: var(--pink-mid); }

/* ================================================================
   LIST PAGE
================================================================ */
.list-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}
.list-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-1);
}
.list-count { font-size: .82rem; color: var(--text-3); }
.list-empty { padding: 48px; text-align: center; color: var(--text-3); font-size: .9rem; }

.list-ul { display: flex; flex-direction: column; gap: 14px; }
.list-item {
  display: flex;
  gap: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: box-shadow var(--ease), transform var(--ease);
}
.list-item:hover { box-shadow: var(--shadow-hover); transform: translateX(4px); }
.list-thumb { width: 120px; height: 88px; border-radius: var(--r-md); overflow: hidden; background: var(--accent-muted); flex-shrink: 0; }
.list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.list-body { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.list-cat { font-size: .7rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.list-title-link { font-size: 1rem; font-weight: 700; color: var(--text-1); display: block; transition: color var(--ease); }
.list-title-link:hover { color: var(--accent); }
.list-summary {
  font-size: .82rem;
  color: var(--text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.list-meta { font-size: .74rem; color: var(--text-3); display: flex; gap: 14px; margin-top: 2px; }

/* 태그 클라우드 */
.page-heading {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 20px;
}
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pill {
  display: inline-block;
  padding: 5px 16px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  color: var(--text-2);
  background: var(--bg-card);
  font-size: .82rem;
  transition: all var(--ease);
}
.tag-pill:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.tag-pill.size1 { font-size: .74rem; }
.tag-pill.size2 { font-size: .88rem; }
.tag-pill.size3 { font-size: .96rem; font-weight: 700; border-color: var(--pink-pale); color: var(--accent); }

/* ================================================================
   무한 스크롤 로딩 인디케이터
================================================================ */
.scroll-loader {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 32px 0;
}
.scroll-loader.active { display: flex; }
.scroll-loader span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink-light);
  animation: dotPulse 1.2s ease-in-out infinite;
}
.scroll-loader span:nth-child(2) { animation-delay: .2s; }
.scroll-loader span:nth-child(3) { animation-delay: .4s; }
@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(.6); opacity: .4; }
  40%           { transform: scale(1);  opacity: 1; }
}

/* ================================================================
   FOOTER
================================================================ */
#site-footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--border);
  text-align: center;
  padding: 28px 24px;
  transition: background .25s;
}
.footer-copy { font-size: .78rem; color: var(--text-3); }
.footer-copy a { color: var(--accent); font-weight: 500; }

/* 티스토리 자동 삽입 — 카테고리 다른 글 표 강제 숨김 */
.another_category,
.area_related,
#category-other-articles { display: none !important; }

/* ================================================================
   SCROLLBAR
================================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--pink-pale); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--pink-mid); }

/* ================================================================
   RESPONSIVE
================================================================ */


@media (max-width: 720px) {
  .gnb { display: none; }
  .gnb.open {
    display: block;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
    z-index: 99;
    padding: 8px 16px 12px;
  }
  .gnb-list { flex-direction: column; gap: 0; }
  .gnb-list > li { border-bottom: 1px solid var(--border-soft); }
  .gnb-list a, .gnb-cat-btn { padding: 12px 4px; border-radius: 0; width: 100%; }
  .gnb-cat-dropdown { position: static; transform: none; box-shadow: none; border: none; padding: 0 8px; animation: none; }
  .hamburger { display: flex; }
  .post-header { padding: 28px 24px 20px; }
  .post-content { padding: 28px 24px; }
  .post-tags { padding: 16px 24px; }
  .post-admin { padding: 8px 24px; }
  .post-adjacent { grid-template-columns: 1fr; }
  .adj-prev { border-right: none; border-bottom: 1px solid var(--border-soft); }
  .adj-btn { padding: 16px 20px; }
  .related { padding: 20px 24px; }
  .comment-section { padding: 24px 20px; }
}

@media (max-width: 480px) {
  #page { padding: 16px 14px 48px; }
  .pin-grid { columns: 1; }
  #profile-banner { padding: 16px 18px; }
  .list-item { flex-direction: column; }
  .list-thumb { width: 100%; height: 160px; }
}