/* ══════════════════════════════════════════════════
   deframe Ghost Theme — screen.css v2.0
   Charcoal header, #00c9a7 signal, DM Serif + Noto Serif KR + Pretendard
   ══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Sora:wght@400;600;700;800&family=Noto+Serif+KR:wght@600;700;900&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* ── Variables ── */
:root {
  --signal: #00c9a7;
  --signal-dark: #00a88c;
  --signal-deeper: #008573;
  --charcoal: #292524;

  --black: #0a0a0a;
  --g900: #171717;
  --g800: #262626;
  --g700: #404040;
  --g600: #525252;
  --g500: #737373;
  --g400: #a3a3a3;
  --g300: #d4d4d4;
  --g200: #e5e5e5;
  --g100: #f5f5f5;
  --g50: #fafafa;
  --white: #fff;

  --site-width: 1100px;
  --content-width: 720px;
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
  font-family: 'Pretendard Variable', 'Noto Sans KR', -apple-system, sans-serif;
  color: var(--g900); background: var(--white);
  line-height: 1.5; letter-spacing: -0.3px;
  min-height: 100vh; display: flex; flex-direction: column;
}
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; }
.site-content { flex: 1; }
.w { max-width: var(--site-width); margin: 0 auto; padding: 0 32px; }


/* ══════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════ */
.site-header { background: var(--charcoal); }
.site-header.is-home { position: relative; } /* Not sticky on homepage */
.site-header:not(.is-home) { position: relative; } /* Compact header handles sticky */

.hd-wrap { max-width: var(--site-width); margin: 0 auto; padding: 0 32px; }

/* Top nav */
.hd-top {
  display: flex; justify-content: flex-end;
  padding-top: 14px; padding-bottom: 4px;
}
.hd-top a {
  font-family: 'Sora', sans-serif; font-size: 0.9375rem; font-weight: 400;
  padding: 5px 10px; letter-spacing: 0.3px;
  color: rgba(255,255,255,0.65); transition: color 0.15s;
}
.hd-top a:hover { color: rgba(255,255,255,0.95); }
.hd-top__sep {
  font-size: 0.8125rem; color: rgba(255,255,255,0.25);
  padding: 0 2px; user-select: none;
}

/* Main row */
.hd-main {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 4px 0 14px;
}

/* Logo */
.site-logo {
  font-family: 'DM Serif Display', serif;
  font-size: 64px; letter-spacing: -0.5px; line-height: 0.85;
  display: inline-block;
}
.site-logo .de { color: var(--signal); }
.site-logo .frame { color: var(--white); }
.site-logo .slash { color: rgba(255,255,255,0.35); font-weight: 400; }

/* Logo image (from Ghost Admin) */
.site-logo__img { height: 54px; width: auto; display: block; }
.site-logo__img--compact { height: 22px; }
.footer-logo__img { height: 24px; width: auto; display: block; margin-bottom: 12px; }

/* Right actions */
.hd-right { display: flex; align-items: center; gap: 14px; padding-bottom: 6px; }
.hd-support-btn {
  font-family: 'Sora', sans-serif; font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase;
  padding: 9px 24px; color: var(--charcoal); background: var(--signal);
  transition: opacity 0.15s;
}
.hd-support-btn:hover { opacity: 0.85; }
.hd-menu-btn {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background 0.15s;
}
.hd-menu-btn:hover { background: rgba(255,255,255,0.1); }

/* Compact header — non-home pages, appears on scroll */
.hd-compact {
  position: fixed; top: -48px; left: 0; right: 0; z-index: 100;
  background: var(--charcoal); height: 48px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
  transition: top 0.3s ease;
}
.hd-compact.is-visible { top: 0; }
.hd-compact .site-logo { font-size: 1.375rem; }
.hd-compact .hd-right { display: flex; align-items: center; gap: 10px; padding-bottom: 0; }
.hd-compact .hd-support-btn { padding: 6px 16px; font-size: 0.75rem; }
.hd-compact .hd-menu-btn { width: 32px; height: 32px; }


/* ══════════════════════════════════════════
   MENU PANEL
   ══════════════════════════════════════════ */
.menu-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 200; opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.menu-overlay.is-open { opacity: 1; visibility: visible; }

.menu-panel {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 320px; max-width: 85vw;
  background: var(--white); z-index: 300;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}
.menu-panel.is-open { transform: translateX(0); }
.menu-panel__inner {
  padding: 28px 24px 40px;
  display: flex; flex-direction: column; min-height: 100%;
}
.menu-panel__close {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--g400); align-self: flex-end; margin-bottom: 24px;
}
.menu-panel__close:hover { color: var(--g900); }

.menu-panel__section { margin-bottom: 24px; }
.menu-panel__section--secondary { padding-top: 20px; border-top: 1px solid var(--g100); }

/* Primary nav — serif */
.menu-panel__nav--primary a {
  display: block;
  font-family: 'Noto Serif KR', serif;
  font-size: 1.3125rem; font-weight: 700; color: var(--g900);
  padding: 9px 0; letter-spacing: -0.3px;
}
.menu-panel__nav--primary a:hover { color: var(--signal-dark); }

/* Secondary nav */
.menu-panel__nav--secondary a {
  display: block; font-size: 1.0625rem; font-weight: 500;
  color: var(--g500); padding: 7px 0; letter-spacing: -0.2px;
}
.menu-panel__nav--secondary a:hover { color: var(--g900); }

.menu-panel__support {
  display: inline-block;
  font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 700;
  color: var(--charcoal); background: var(--signal);
  padding: 12px 28px;
}

.menu-panel__bottom {
  margin-top: auto; padding-top: 24px;
  border-top: 1px solid var(--g100);
  font-size: 0.9375rem; color: var(--g400);
}
.menu-panel__bottom a { margin-right: 16px; }
.menu-panel__bottom a:hover { color: var(--g900); }

body.menu-is-open { overflow: hidden; }


/* ══════════════════════════════════════════
   MISSION SECTION (homepage only)
   ══════════════════════════════════════════ */
.mission {
  padding: 56px 0 48px; text-align: center;
  background:
    radial-gradient(ellipse 80% 60% at 20% 100%, rgba(0,201,167,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 85% 0%, rgba(0,201,167,0.03) 0%, transparent 70%),
    #fafaf9;
  border-bottom: 1px solid var(--g200);
}
.mission-headline {
  font-family: 'Noto Serif KR', serif;
  font-weight: 900; font-size: 2rem; line-height: 1.35;
  color: var(--g900); letter-spacing: -0.5px;
  max-width: 680px; margin: 0 auto 20px;
  word-break: keep-all;
}
.mission-body {
  font-family: 'Pretendard Variable', sans-serif;
  font-size: 16px; color: var(--g600); line-height: 1.7;
  letter-spacing: -0.2px;
  max-width: 560px; margin: 0 auto;
  word-break: keep-all;
}
.mission-body a {
  color: var(--signal-dark); text-decoration: underline;
  text-underline-offset: 3px;
}
.mission-body a:hover { color: var(--signal-deeper); }


/* ══════════════════════════════════════════
   FEATURED POST (homepage)
   ══════════════════════════════════════════ */
.feat { padding: 48px 0 52px; border-bottom: 1px solid var(--g200); }
.feat a {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center;
}
.feat-cat {
  font-family: 'Sora', sans-serif; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--signal-dark); margin-bottom: 16px;
}
.feat-title {
  font-family: 'Noto Serif KR', serif;
  font-weight: 900; font-size: 2.25rem; line-height: 1.28;
  letter-spacing: -0.8px; color: var(--g900);
  word-break: keep-all; margin-bottom: 16px;
  transition: color 0.2s;
}
.feat a:hover .feat-title { color: var(--g600); }
.feat-excerpt {
  font-size: 1.0625rem; color: var(--g500); line-height: 1.65;
  letter-spacing: -0.2px; margin-bottom: 14px;
}
.feat-author {
  font-family: 'Sora', sans-serif; font-size: 0.8125rem; color: var(--g400);
}
.feat-img {
  aspect-ratio: 1.91 / 1; overflow: hidden; background: var(--g100);
}
.feat-img img { width: 100%; height: 100%; object-fit: cover; }


/* ══════════════════════════════════════════
   MAIN GRID (articles + sidebar)
   ══════════════════════════════════════════ */
.main-grid {
  display: grid; grid-template-columns: 1fr 280px;
  gap: 48px; padding: 40px 0 56px; align-items: start;
}

/* Section heading */
.sec-heading {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 16px; border-bottom: 2px solid var(--g900);
}
.sec-heading h2 {
  font-family: 'Sora', sans-serif; font-size: 1.125rem;
  font-weight: 800; color: var(--g900); letter-spacing: -0.2px;
}
.sec-heading a {
  font-family: 'Sora', sans-serif; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--g900);
}
.sec-heading a:hover { color: var(--g500); }


/* ══════════════════════════════════════════
   ARTICLE LIST ITEM (Vox-style horizontal)
   ══════════════════════════════════════════ */
.art-item {
  display: grid; grid-template-columns: 1fr 200px;
  gap: 24px; align-items: center;
  padding: 28px 0; border-bottom: 1px solid var(--g200);
}
.art-item:last-child { border-bottom: none; }

.art-meta {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.art-cat {
  font-family: 'Sora', sans-serif; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--signal-dark);
}
.art-date {
  font-family: 'Sora', sans-serif; font-size: 0.75rem; color: var(--g400);
}
.art-sep { color: var(--g300); font-size: 0.625rem; }

.art-title {
  font-family: 'Noto Serif KR', serif;
  font-weight: 700; font-size: 1.375rem; line-height: 1.35;
  letter-spacing: -0.5px; color: var(--g900);
  word-break: keep-all; margin-bottom: 8px;
  transition: color 0.15s;
}
.art-item:hover .art-title { color: var(--g600); }

.art-excerpt {
  font-size: 1rem; color: var(--g500); line-height: 1.55; letter-spacing: -0.2px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px;
}
.art-author {
  font-family: 'Sora', sans-serif; font-size: 0.75rem;
  color: var(--g400); text-transform: uppercase;
}

.art-thumb {
  aspect-ratio: 1.91 / 1; overflow: hidden; background: var(--g100);
}
.art-thumb img { width: 100%; height: 100%; object-fit: cover; }


/* ══════════════════════════════════════════
   ARTICLE GRID (tag/archive pages)
   ══════════════════════════════════════════ */
.article-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px; margin-bottom: 48px;
}
.card-img {
  aspect-ratio: 1.91 / 1; overflow: hidden; margin-bottom: 14px; background: var(--g100);
}
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-cat {
  font-family: 'Sora', sans-serif; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--signal-dark); margin-bottom: 6px;
}
.card-title {
  font-family: 'Pretendard Variable', sans-serif;
  font-weight: 700; font-size: 1.1875rem; line-height: 1.3;
  color: var(--g900); word-break: keep-all; letter-spacing: -0.3px;
  transition: color 0.15s;
}
.card-title:hover { color: var(--g600); }
.card-author {
  font-family: 'Sora', sans-serif; font-size: 0.75rem;
  color: var(--g400); margin-top: 10px;
}


/* ══════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════ */
.sidebar { padding-top: 58px; }
.sb-stack { display: flex; flex-direction: column; }
.sb-link {
  display: block; padding: 14px 18px;
  background: var(--g100); border-bottom: 1px solid var(--white);
  transition: background 0.15s;
}
.sb-link:hover { background: #ebebeb; }
.sb-link__label {
  font-family: 'Sora', sans-serif; font-size: 1rem;
  font-weight: 700; color: var(--g900); letter-spacing: -0.1px;
}
.sb-link__desc { font-size: 0.875rem; color: var(--g400); margin-top: 3px; }
.sb-link--dark { background: #e0e0e0; }
.sb-link--dark:hover { background: #d4d4d4; }
.sb-link--accent { background: var(--charcoal); }
.sb-link--accent:hover { background: #1c1917; }
.sb-link--accent .sb-link__label { color: var(--signal); }
.sb-link--accent .sb-link__desc { color: rgba(255,255,255,0.4); }


/* ══════════════════════════════════════════
   TAG/TOPIC SECTION (homepage)
   ══════════════════════════════════════════ */
.tag-section { padding: 48px 0 52px; border-top: 1px solid var(--g200); }
.tag-section__top {
  display: grid; grid-template-columns: 1fr 280px;
  gap: 40px; align-items: start; margin-bottom: 32px;
}
.tag-section__title {
  font-family: 'Noto Serif KR', serif;
  font-weight: 900; font-size: 1.75rem; line-height: 1.25;
  letter-spacing: -0.5px; color: var(--g900); margin-bottom: 10px;
}
.tag-section__desc {
  font-size: 1.0625rem; color: var(--g500); line-height: 1.6; letter-spacing: -0.2px;
}
.tag-section__img {
  aspect-ratio: 1.91 / 1; overflow: hidden; background: var(--g100);
}
.tag-section__img img { width: 100%; height: 100%; object-fit: cover; }

.tag-art {
  display: flex; align-items: baseline; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid #f0f0f0;
}
.tag-art:first-child { border-top: 1px solid var(--g200); }
.tag-art__title {
  font-family: 'Pretendard Variable', sans-serif;
  font-weight: 600; font-size: 1.0625rem; line-height: 1.4; letter-spacing: -0.3px;
  color: var(--g900); word-break: keep-all; flex: 1;
  transition: color 0.15s;
}
.tag-art:hover .tag-art__title { color: var(--g600); }
.tag-art__date {
  font-family: 'Sora', sans-serif; font-size: 0.75rem;
  color: var(--g400); white-space: nowrap; flex-shrink: 0;
}
.tag-more-row { padding-top: 24px; }
.tag-more-btn {
  display: inline-block; padding: 11px 28px;
  border: 2px solid var(--g900);
  font-family: 'Sora', sans-serif; font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.5px; color: var(--g900);
  transition: background 0.15s, color 0.15s;
}
.tag-more-btn:hover { background: var(--g900); color: var(--white); }


/* ══════════════════════════════════════════
   TAG/ARCHIVE PAGE HEADER
   ══════════════════════════════════════════ */
.tag-header { padding: 48px 0 40px; border-bottom: 1px solid var(--g200); margin-bottom: 40px; }
.tag-header__label {
  font-family: 'Sora', sans-serif; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--signal-dark); margin-bottom: 12px;
}
.tag-header__name {
  font-family: 'Noto Serif KR', serif;
  font-weight: 900; font-size: 2rem; color: var(--g900);
  margin-bottom: 10px; letter-spacing: -0.5px;
}
.tag-header__desc {
  font-size: 1.0625rem; color: var(--g500); line-height: 1.6;
  max-width: 640px; letter-spacing: -0.2px;
}
.tag-header__count {
  font-family: 'Sora', sans-serif; font-size: 0.8125rem;
  color: var(--g400); margin-top: 12px;
}


/* ══════════════════════════════════════════
   SINGLE POST
   ══════════════════════════════════════════ */
.post-header {
  max-width: var(--content-width); margin: 0 auto;
  padding: 48px 32px 40px;
}
.post-header__topic { margin-bottom: 16px; }
.post-header__topic a {
  font-family: 'Sora', sans-serif; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--signal-dark);
}
.post-header__topic a:hover { color: var(--signal-deeper); }
.post-header__title {
  font-family: 'Noto Serif KR', serif;
  font-weight: 900; font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.28; letter-spacing: -0.8px;
  color: var(--g900); margin-bottom: 16px; word-break: keep-all;
}
.post-header__excerpt {
  font-size: 1.1875rem; color: var(--g500); line-height: 1.65;
  letter-spacing: -0.2px; margin-bottom: 24px; word-break: keep-all;
}
.post-header__meta {
  display: flex; align-items: center; gap: 16px;
  font-size: 0.875rem; color: var(--g400);
  padding-top: 20px; border-top: 1px solid var(--g200);
}
.post-header__author { font-weight: 600; color: var(--g700); }

/* Feature image */
.post-feature-image {
  max-width: 960px; margin: 0 auto 48px; padding: 0 32px;
}
.post-feature-image img { width: 100%; }
.post-feature-image figcaption {
  font-size: 0.8125rem; color: var(--g400); margin-top: 8px; text-align: right;
}

/* Post content — Ghost editor output */
.post-content {
  max-width: var(--content-width); margin: 0 auto;
  padding: 0 32px 64px;
}
.post-content > * + * { margin-top: 24px; }
.post-content p {
  font-size: 1.125rem; line-height: 1.85; color: var(--g800);
  word-break: keep-all; letter-spacing: -0.2px;
}
.post-content h2 {
  font-family: 'Noto Serif KR', serif;
  font-size: 1.5rem; font-weight: 700; line-height: 1.35;
  color: var(--g900); margin-top: 48px; padding-top: 32px;
  border-top: 1px solid var(--g100); letter-spacing: -0.5px;
}
.post-content h3 {
  font-family: 'Noto Serif KR', serif;
  font-size: 1.25rem; font-weight: 700; line-height: 1.4;
  color: var(--g900); margin-top: 40px; letter-spacing: -0.3px;
}
.post-content strong { font-weight: 700; color: var(--g900); }
.post-content a {
  color: var(--signal-dark); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(0,169,140,0.3);
}
.post-content a:hover { text-decoration-color: var(--signal-dark); }
.post-content blockquote {
  border-left: 3px solid var(--signal); padding-left: 24px;
  margin-left: 0; color: var(--g600);
}
.post-content ul, .post-content ol { padding-left: 24px; }
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li {
  font-size: 1.125rem; line-height: 1.85; color: var(--g800); margin-bottom: 8px;
}
.post-content hr {
  border: none; border-top: 1px solid var(--g200); margin: 48px 0;
}
.post-content figure { margin: 40px 0; }
.post-content figcaption { font-size: 0.8125rem; color: var(--g400); margin-top: 8px; }
.post-content pre {
  background: var(--g50); border: 1px solid var(--g200);
  border-radius: 8px; padding: 24px; overflow-x: auto;
  font-size: 0.9375rem; line-height: 1.6;
}
.post-content code {
  font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.9em;
  background: var(--g50); padding: 2px 6px; border-radius: 4px;
}
.post-content pre code { background: none; padding: 0; }

/* Wide images */
.post-content .kg-width-wide {
  max-width: 960px;
  margin-left: calc((var(--content-width) - 960px) / 2 - 32px);
  margin-right: calc((var(--content-width) - 960px) / 2 - 32px);
}
.post-content .kg-width-full {
  max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}

/* Ghost callout */
.post-content .kg-callout-card {
  background: #fafaf9; border-radius: 8px; padding: 24px;
  border-left: 3px solid var(--signal);
}

/* Post footer */
.post-footer {
  max-width: var(--content-width); margin: 0 auto; padding: 0 32px 64px;
}
.post-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-top: 32px; border-top: 1px solid var(--g200);
}
.post-tags a {
  font-size: 0.8125rem; font-weight: 500; color: var(--g500);
  background: var(--g50); padding: 4px 12px; border-radius: 4px;
}
.post-tags a:hover { color: var(--signal-dark); background: #f0fdf9; }

/* Related posts */
.related-posts {
  max-width: 960px; margin: 0 auto;
  padding: 48px 32px 64px; border-top: 1px solid var(--g200);
}
.related-posts__title {
  font-family: 'Sora', sans-serif; font-size: 0.875rem; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--g900); margin-bottom: 32px;
}


/* ══════════════════════════════════════════
   NEWSLETTER
   ══════════════════════════════════════════ */
.newsletter-section {
  background: var(--charcoal); padding: 56px 0; text-align: center;
}
.newsletter-inner {
  max-width: var(--site-width); margin: 0 auto; padding: 0 32px;
}
.newsletter-section h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.75rem; color: var(--white); margin-bottom: 8px;
}
.newsletter-section p {
  font-size: 1rem; color: rgba(255,255,255,0.45);
  margin-bottom: 28px; letter-spacing: -0.2px;
}
.newsletter-form {
  max-width: 420px; margin: 0 auto;
}
.newsletter-fields {
  display: flex; flex-direction: column;
}
.newsletter-input {
  font-size: 0.9375rem; padding: 13px 16px; width: 100%;
  border: 2px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06); color: var(--white); outline: none;
  font-family: 'Pretendard Variable', sans-serif;
}
.newsletter-name { border-bottom: none; }
.newsletter-input::placeholder { color: rgba(255,255,255,0.3); }
.newsletter-input:focus { border-color: rgba(255,255,255,0.5); }
.newsletter-btn {
  font-family: 'Sora', sans-serif; font-size: 0.9375rem; font-weight: 700;
  padding: 14px 28px; color: var(--charcoal); background: var(--signal);
  border: 2px solid var(--signal); cursor: pointer;
  width: 100%; transition: opacity 0.15s;
}
.newsletter-btn:hover { opacity: 0.85; }
.newsletter-message {
  margin-top: 16px; font-size: 0.9375rem; letter-spacing: -0.2px;
}
.newsletter-message--success { color: var(--signal); }
.newsletter-message--error { color: #f87171; }


/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
.site-footer { background: var(--g900); padding: 44px 0 28px; }
.footer-inner {
  max-width: var(--site-width); margin: 0 auto; padding: 0 32px;
}
.footer-top {
  display: flex; justify-content: space-between;
  align-items: flex-start; margin-bottom: 36px; gap: 48px;
}
.footer-logo {
  font-family: 'DM Serif Display', serif; font-size: 1.5rem;
  margin-bottom: 12px; line-height: 1;
}
.footer-logo .de { color: var(--signal); }
.footer-logo .frame { color: var(--white); }
.footer-logo .slash { color: rgba(255,255,255,0.25); }
.footer-tagline {
  font-size: 0.875rem; color: var(--g600); max-width: 280px;
  line-height: 1.6; letter-spacing: -0.2px;
}
.footer-nav { display: flex; gap: 48px; }
.footer-nav-group h4 {
  font-family: 'Sora', sans-serif; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--g600); margin-bottom: 12px;
}
.footer-nav-group a {
  display: block; font-size: 0.9375rem; color: var(--g500);
  padding: 3px 0; transition: color 0.15s;
}
.footer-nav-group a:hover { color: var(--white); }
.footer-bottom {
  padding-top: 20px; border-top: 1px solid var(--g800);
  font-size: 0.75rem; color: var(--g700);
}


/* ══════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════ */
.pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 16px; padding: 48px 0;
}
.pagination a {
  font-family: 'Sora', sans-serif; font-size: 0.875rem; font-weight: 600;
  color: var(--g500); padding: 8px 16px;
  border: 1px solid var(--g200); border-radius: 4px;
}
.pagination a:hover { color: var(--g900); border-color: var(--g900); }
.pagination .page-number { font-size: 0.875rem; color: var(--g400); }


/* ══════════════════════════════════════════
   ERROR PAGE
   ══════════════════════════════════════════ */
.error-page {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  padding: 96px 32px; min-height: 50vh;
}
.error-code {
  font-family: 'DM Serif Display', serif;
  font-size: 6rem; color: var(--g200); line-height: 1; margin-bottom: 16px;
}
.error-message { font-size: 1.0625rem; color: var(--g500); margin-bottom: 32px; }
.error-link { font-size: 0.9375rem; font-weight: 600; color: var(--signal-dark); }


/* ══════════════════════════════════════════
   PAGE (static)
   ══════════════════════════════════════════ */
.page-header {
  max-width: var(--content-width); margin: 0 auto;
  padding: 48px 32px 32px;
}
.page-header__title {
  font-family: 'Noto Serif KR', serif;
  font-weight: 900; font-size: 2rem; line-height: 1.3;
  letter-spacing: -0.5px; color: var(--g900);
}


/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .site-logo { font-size: 36px; }
  .site-logo__img { height: 32px; }
  .site-logo__img--compact { height: 20px; }
  .hd-top { display: none; }
  .hd-wrap { padding: 0 20px; }
  .hd-main { align-items: center; padding: 12px 0; }
  .hd-right { gap: 10px; padding-bottom: 0; }
  .hd-support-btn { font-size: 0.75rem; padding: 7px 16px; }
  .hd-compact { padding: 0 20px; }

  .mission { padding: 40px 0 36px; }
  .mission-headline { font-size: 1.5rem; }

  .feat a { grid-template-columns: 1fr; gap: 24px; }
  .feat-img { order: -1; }
  .feat-title { font-size: 1.6rem; }

  .main-grid { grid-template-columns: 1fr; gap: 0; }
  .sidebar {
    padding-top: 24px; border-top: 1px solid var(--g200); margin-top: 8px;
  }
  .sb-stack {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
  .sb-link--accent { grid-column: 1 / -1; }

  .art-item { grid-template-columns: 1fr 120px; gap: 16px; }
  .art-title { font-size: 1.05rem; }
  .art-excerpt { display: none; }

  .article-grid { grid-template-columns: 1fr; }

  .tag-section__top { grid-template-columns: 1fr; gap: 20px; }
  .tag-section__title { font-size: 1.4rem; }

  .newsletter-inner { padding: 0 20px; }
  .newsletter-form { max-width: 100%; }

  .footer-top { flex-direction: column; }
  .footer-nav { flex-direction: column; gap: 20px; }

  .menu-panel { width: 100%; max-width: 100vw; }

  .post-header { padding: 32px 24px; }
  .post-header__title { font-size: 1.6rem; }
  .post-content { padding: 0 24px 48px; }
  .post-content p, .post-content li { font-size: 1rem; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .site-logo { font-size: 52px; }
  .site-logo__img { height: 46px; }
  .feat-title { font-size: 1.9rem; }
  .feat a { gap: 32px; }
  .main-grid { grid-template-columns: 1fr 240px; gap: 32px; }
  .art-item { grid-template-columns: 1fr 160px; }
  .tag-section__top { grid-template-columns: 1fr 220px; gap: 28px; }
  .article-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .w, .post-header, .post-content, .post-footer { padding-left: 20px; padding-right: 20px; }
}


/* ══════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* Hide Ghost Portal default button */
.gh-portal-triggerbtn-iframe { display: none !important; }