/* =========================================================
   mifplus blog — public design system
   ref/design 기반 리디자인. 셀프호스팅 폰트(Paperlogy) + CSP 엄격.
   ⚠ 레거시 페이지 인라인 스타일 호환을 위해 --blue/--card 토큰 유지.
========================================================= */

/* ---- self-hosted display font ---- */
@font-face {
  font-family: "Paperlogy";
  src: url("/Paperlogy-Regular.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ref/design palette */
  --bg: #ffffff;
  --surface: #f6f6f4;
  --surface-2: #efefec;
  --text: #15191d;
  --muted: #73797f;
  --line: #e8e9e7;
  --dark: #151b21;
  --radius: 12px;
  --container: 1180px;
  --shadow: 0 12px 34px rgba(18, 23, 28, .05);

  /* 레거시 호환 토큰 (article/guestbook/search 인라인 스타일이 참조) */
  --blue: #2563eb;
  --card: #ffffff;

  --font-display: "Paperlogy", "Noto Sans KR", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  /* overflow-x:hidden 은 overflow-y를 auto로 승격시켜 body를 스크롤 컨테이너로 만들고,
     그 결과 sticky 헤더가 뷰포트 기준으로 고정되지 못해 모바일에서 sticky가 깨진다.
     clip 은 스크롤 컨테이너를 만들지 않으므로 가로 넘침은 자르면서 sticky는 유지된다. */
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }

h1, h2, h3, .brand, .eyebrow, .hero h1, .section-heading h2 { font-family: var(--font-display); }

.wrap { width: min(calc(100% - 48px), var(--container)); margin: 0 auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =========================================================
   BUTTONS
========================================================= */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 22px; border-radius: 8px; border: 1px solid transparent;
  font-weight: 700; font-size: 14px; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); color: #fff; }
.button-dark {
  background: var(--dark); color: #fff; box-shadow: 0 8px 22px rgba(21,27,33,.14);
}
.button-ghost {
  background: #fff; color: var(--text); border-color: var(--line);
}
.button-ghost:hover { color: var(--text); border-color: #c8cbcd; }

/* =========================================================
   HEADER / NAV
========================================================= */
header.site-header {
  position: sticky; top: 0; z-index: 2000;
  display: flex; align-items: center;
  height: 84px;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(232,233,231,.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; letter-spacing: -.04em; color: var(--text);
  flex: 0 0 auto;
}
.brand:hover { color: var(--text); }

.primary-nav {
  display: flex; align-items: center; gap: 28px;
  font-size: 14px; font-weight: 600;
}
.primary-nav a { position: relative; color: var(--text); white-space: nowrap; }
.primary-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -8px; width: 100%; height: 1px;
  background: var(--text); transform: scaleX(0); transform-origin: right;
  transition: transform .25s ease;
}
.primary-nav a:hover { color: var(--text); }
.primary-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.primary-nav a.active { color: var(--text); }
.primary-nav a.active::after { transform: scaleX(1); background: var(--blue); }

.search-button {
  border: 0; background: transparent; padding: 0; width: 22px; height: 22px;
  cursor: pointer; color: var(--text); flex: 0 0 auto;
}
.search-button svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.menu-button {
  display: none; border: 0; background: transparent; width: 34px; padding: 5px;
  cursor: pointer; color: var(--text);
}
.menu-button span:not(.sr-only) {
  display: block; height: 1.5px; background: currentColor; margin: 5px 0;
  transition: transform .25s ease, opacity .25s ease;
}

/* 본문 여백: sticky header는 자체 공간을 차지하므로 별도 padding 최소화 */
main { display: block; padding-bottom: 40px; }
main > .wrap { padding-top: 26px; }

/* 글 상세(article.php)는 읽기 좋은 폭으로 제한 (비침투적 오버라이드) */
main > .wrap > .article { max-width: 860px; margin-left: auto; margin-right: auto; }

/* ✅ 글 상세 페이지에서는 헤더/본문/푸터 가로 폭을 본문과 동일하게 맞춤
   (홈 등 다른 페이지는 넓은 --container 유지) */
body.page-article .site-header > .wrap,
body.page-article main > .wrap,
body.page-article .site-footer > .wrap { width: min(calc(100% - 48px), 900px); }
body.page-article main > .wrap > .article { max-width: none; }

/* =========================================================
   HERO (home 랜딩 상단)
========================================================= */
.hero { background: linear-gradient(110deg, #fbfbfa 0%, #f5f5f2 100%); }
.hero-grid {
  min-height: 460px; display: grid; grid-template-columns: 1fr 1.25fr;
  align-items: stretch; gap: 0;
}
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 72px 48px 72px 0; }
.eyebrow { margin: 0 0 22px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.hero h1 { margin: 0; font-size: clamp(38px, 4vw, 56px); line-height: 1.25; letter-spacing: -.04em; }
.hero-description { margin: 26px 0 32px; color: #4f565d; font-size: 16px; line-height: 1.9; }
.hero .button { align-self: flex-start; }
/* 배경과 자연스럽게 이어지도록: 프레임/배경 제거 + 가장자리 페더 마스크 */
.hero-art { min-height: 460px; display: flex; align-items: center; justify-content: center; overflow: visible; background: transparent; }
.hero-art img {
  width: 100%; height: 100%; object-fit: contain;
  /* 우측 상단에 집중, 사방(특히 타이틀 쪽 좌측)으로 넓고 부드럽게 페이드 → 경계 제거 */
  -webkit-mask-image: radial-gradient(95% 125% at 70% 44%, #000 20%, rgba(0,0,0,.55) 48%, transparent 74%);
          mask-image: radial-gradient(95% 125% at 70% 44%, #000 20%, rgba(0,0,0,.55) 48%, transparent 74%);
}

/* =========================================================
   SECTIONS
========================================================= */
.section { padding: 64px 0; }
.section.tight { padding: 40px 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; gap: 16px; }
.section-heading h2 { margin: 0; font-size: 23px; letter-spacing: -.03em; }
.section-heading.compact h2 { font-size: 19px; }
.section-heading a, .text-link { font-size: 13px; font-weight: 600; color: var(--muted); }
.section-heading a:hover, .text-link:hover { color: var(--text); }

/* 필터(카테고리/태그/검색) 결과 상단 헤더 */
.filter-head { padding: 30px 0 6px; }
.filter-head .eyebrow { margin-bottom: 10px; }
.filter-head h1 { margin: 0; font-size: 28px; letter-spacing: -.03em; }
.filter-head .sub { margin: 10px 0 0; color: var(--muted); font-size: 14px; }

/* =========================================================
   INFO COLUMNS (카테고리 / 인기 글)
========================================================= */
.info-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0; }
.info-column { padding-right: 40px; }
.info-column.bordered { padding: 0 0 0 40px; border-left: 1px solid var(--line); }
.category-list, .popular-list { list-style: none; margin: 0; padding: 0; }
.category-list li + li, .popular-list li + li { margin-top: 16px; }
.category-list a { display: flex; align-items: center; justify-content: space-between; color: #5f666d; font-size: 14px; font-weight: 600; }
.category-list a:hover { color: var(--text); }
.category-list .count { color: var(--muted); font-weight: 600; }
.popular-list a { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.popular-list .rank { color: var(--text); font-weight: 700; font-family: var(--font-display); }
.popular-list .ttl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4d545b; font-weight: 600; }
.popular-list .views { color: #94999e; font-size: 12px; }

/* =========================================================
   TAG CLOUD (홈 하단)
========================================================= */
.tags-section { border-top: 1px solid var(--line); }
.tag-list { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-list a {
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px;
  color: #697078; font-size: 12px; font-weight: 600; background: #fff;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.tag-list a:hover { color: var(--text); border-color: #c8cbcd; background: var(--surface); }

/* =========================================================
   FOOTER
========================================================= */
footer.site-footer { border-top: 1px solid var(--line); padding: 46px 0 40px; margin-top: 20px; }
.footer-grid { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 30px; }
.footer-grid .brand { display: inline-block; }
.footer-grid p { margin: 0; color: #7b8186; font-size: 12px; }
.socials { display: flex; gap: 14px; margin: 18px 0; }
.socials a { font-size: 12px; font-weight: 700; color: var(--muted); }
.socials a:hover { color: var(--text); }
.footer-nav { display: flex; gap: 28px; font-size: 13px; font-weight: 600; }
.footer-nav a { color: var(--muted); }
.footer-nav a:hover { color: var(--text); }
.footer-meta {
  grid-column: 1 / -1; margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--muted); font-size: 12px; position: relative;
}
.footer-meta .visits b { color: var(--text); }
/* 모바일에서만 활성화되는 관리자 히든 링크(레거시 유지) */
.footer-meta .admin-mobile-link { display: none; }
@media (max-width: 768px) {
  .footer-meta .admin-mobile-link { display: block; position: absolute; right: 0; top: 0; width: 60px; height: 100%; z-index: 1; }
}

/* =========================================================
   더보기 / 광고 / 페이저 (레거시 기능 유지, 리스타일)
========================================================= */
.moreWrap { margin-top: 26px; display: flex; justify-content: center; }
.moreBtn {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 11px 22px; font-weight: 700; font-size: 14px; cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.moreBtn:hover { border-color: #c8cbcd; background: var(--surface); }
.moreBtn:disabled { opacity: .5; cursor: not-allowed; }

.ad-box { display: block; width: 100%; min-width: 280px; min-height: 120px; margin: 22px 0; clear: both; }
.ad-box .adsbygoogle { display: block; width: 100%; min-width: 280px; min-height: 120px; }

.pager { margin: 22px 0 10px; display: flex; justify-content: center; }
.pagerInner { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; color: var(--muted); font-weight: 600; font-size: 14px; }
.pagerInner a:hover { color: var(--text); }
.pagerInner .is-current { color: var(--text); font-weight: 700; }
.pagerInner .is-disabled { opacity: .35; pointer-events: none; }

/* =========================================================
   모바일 검색 레이어 (데스크탑/모바일 공용)
========================================================= */
#searchLayer { display: none; position: fixed; inset: 0; z-index: 9999; }
#searchLayer.is-open { display: block; }
#searchLayer .sl-back { position: absolute; inset: 0; background: rgba(21,27,33,.35); }
#searchLayer .sl-panel {
  position: absolute; left: 50%; top: 84px; transform: translateX(-50%);
  width: min(calc(100% - 32px), 620px);
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  box-shadow: 0 18px 50px rgba(21,27,33,.22);
}
#searchLayer .sl-form { display: flex; align-items: center; gap: 10px; }
#searchLayer .sl-form svg { opacity: .6; flex: 0 0 auto; stroke: currentColor; }
#searchLayer .sl-form input { border: 0; outline: none; width: 100%; font-size: 16px; font-weight: 600; background: transparent; }
#searchLayer .sl-go {
  border: 0; background: var(--dark); color: #fff; font-weight: 700;
  border-radius: 10px; padding: 11px 16px; cursor: pointer; flex: 0 0 auto;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { padding: 56px 0 36px; }
  .hero-art { min-height: 300px; }
  .info-grid { grid-template-columns: 1fr; gap: 40px; }
  .info-column { padding-right: 0; }
  .info-column.bordered { padding: 40px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 900px) {
  .wrap { width: min(calc(100% - 32px), var(--container)); }
  .site-header { height: 70px; }
  .menu-button { display: block; }
  .primary-nav {
    position: fixed; inset: 70px 0 auto 0; display: grid; gap: 0; padding: 12px 20px 20px;
    background: rgba(255,255,255,.98); border-bottom: 1px solid var(--line);
    transform: translateY(-130%); opacity: 0; pointer-events: none;
    transition: transform .28s ease, opacity .28s ease;
  }
  .primary-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .primary-nav a { padding: 14px 2px; border-bottom: 1px solid var(--line); }
  .primary-nav a::after { display: none; }
  .primary-nav .search-button { display: none; }
  .menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  /* 모바일에선 검색 아이콘을 메뉴 버튼 옆에 별도 노출 */
  .nav-actions { display: flex; align-items: center; gap: 8px; }
  .nav-actions .search-button { display: inline-block; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-nav { flex-wrap: wrap; gap: 16px 24px; }
}

@media (min-width: 901px) {
  .nav-actions .search-button { display: none; } /* PC는 nav 내부 아이콘 사용 */
}

@media (max-width: 640px) {
  .wrap { width: min(calc(100% - 24px), var(--container)); }
  .brand { font-size: 20px; }
  .section { padding: 48px 0; }
  .hero h1 { font-size: clamp(32px, 8vw, 44px); }
  .hero-description { margin: 18px 0 24px; font-size: 14px; }
  .section-heading h2 { font-size: 20px; }
  .footer-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
}