/*
Theme Name:  blog-policy
Theme URI:   https://policynotion.com
Description: 직장인이 꼭 알아야 할 정부 정책·재테크·직장 정보 블로그 테마
Version:     1.0.0
Author:      PolicyNotion
Text Domain: blog-policy
*/

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* ==========================================================================
   1. CSS VARIABLES
   ========================================================================== */

:root {
  --pn-navy:        #1E293B;
  --pn-navy-dark:   #0F172A;
  --pn-gold:        #F97316;
  --pn-gold-dark:   #EA580C;
  --pn-yellow:      #FACC15;
  --pn-ink:         #1a1d24;
  --pn-ink-soft:    #4a4f5c;
  --pn-ink-faint:   #8a8f9c;
  --pn-paper:       #FBF8F2;
  --pn-paper-2:     #F3ECDF;
  --pn-money:       #FFF3E0;
  --pn-line:        #ece5d6;
  --pn-line-strong: #d8cfbb;
  --pn-bg:          #ffffff;
}

[data-theme="dark"] {
  --pn-navy:        #FDBA74;
  --pn-navy-dark:   #FED7AA;
  --pn-gold:        #FB923C;
  --pn-gold-dark:   #FB923C;
  --pn-yellow:      #FDE047;
  --pn-ink:         #e8eaf0;
  --pn-ink-soft:    #a6acbd;
  --pn-ink-faint:   #6e7488;
  --pn-paper:       #1E293B;
  --pn-paper-2:     #28344A;
  --pn-money:       #3A2A12;
  --pn-line:        #2A3650;
  --pn-line-strong: #3B4A66;
  --pn-bg:          #0F172A;
}

/* ==========================================================================
   2. BASE RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--pn-ink);
  background-color: var(--pn-bg);
}

.site {
  max-width: 1180px;
  margin: 0 auto;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--pn-navy); }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.025em; }

p { margin: 0; }

ul, ol { margin: 0; padding: 0; }

button { font-family: inherit; cursor: pointer; }

/* ==========================================================================
   3. UTILITY
   ========================================================================== */

/* 금액 강조 */
.pn-won {
  color: var(--pn-gold-dark);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* 카테고리 pill */
.pn-cat-pill {
  display: inline-block;
  background: var(--pn-paper-2);
  color: var(--pn-navy);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* 이미지 래퍼 — 함정 #01: aspect-ratio는 래퍼에, img는 100%×100% */
.pn-thumb-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}
.pn-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 카드 Stretched Link — 함정 #02 */
.pn-card { position: relative; }
.pn-card__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.pn-card__tag  { position: relative; z-index: 2; }
.pn-card__meta { position: relative; z-index: 2; }

/* ==========================================================================
   4. SIGNATURE BANNER
   ========================================================================== */

.pn-signature {
  background: var(--pn-navy);
  color: #fff;
  border-top: 4px solid var(--pn-gold);
  border-bottom: 4px solid var(--pn-gold);
  padding: 56px 36px;
  text-align: center;
}

[data-theme="dark"] .pn-signature { background: #0A0F1A; }

.pn-signature .pn-sig-quote {
  font-size: 40px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.04em;
  max-width: 760px;
  margin: 0 auto;
}

.pn-signature .pn-sig-quote .pn-sig-accent { color: var(--pn-yellow); }

.pn-signature .pn-sig-attr {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  font-weight: 600;
}

/* ==========================================================================
   5. FOOTER
   ========================================================================== */

.pn-footer {
  background: var(--pn-paper);
  padding: 44px 28px 28px;
  border-top: 1px solid var(--pn-line);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 36px;
  font-size: 14px;
  color: var(--pn-ink-soft);
}

.pn-footer h4 { font-size: 16px; color: var(--pn-navy); margin-bottom: 14px; font-weight: 800; }
.pn-footer ul { list-style: none; }
.pn-footer li { margin: 6px 0; }

.pn-footer-about p { line-height: 1.7; color: var(--pn-ink-soft); font-size: 14px; }

.pn-foot-logo {
  font-size: 22px;
  font-weight: 900;
  color: var(--pn-navy);
  margin-bottom: 8px;
  letter-spacing: -0.04em;
}
.pn-foot-logo span { color: var(--pn-gold); }

.pn-foot-legal {
  grid-column: 1 / -1;
  border-top: 1px solid var(--pn-line);
  padding-top: 20px;
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--pn-ink-faint);
}

/* ==========================================================================
   6. RESPONSIVE — FOOTER
   ========================================================================== */

@media (max-width: 920px) {
  .pn-footer { grid-template-columns: 1fr 1fr; padding: 32px 20px 22px; gap: 24px; }
  .pn-footer-about { grid-column: 1 / -1; }
  .pn-foot-legal { flex-direction: column; gap: 6px; }
  .pn-signature { padding: 40px 22px; }
  .pn-signature .pn-sig-quote { font-size: 27px; }
}

@media (max-width: 540px) {
  .pn-footer { grid-template-columns: 1fr; }
}

/* ==========================================================================
   7. HEADER
   ========================================================================== */

.pn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--pn-line);
}

/* ── Logo (텍스트) ── */
.pn-logo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}
.pn-logo-mark {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--pn-navy);
  white-space: nowrap;
}
.pn-logo-mark span { color: var(--pn-gold); }
.pn-logo-sub {
  font-size: 12px;
  color: var(--pn-ink-faint);
  font-weight: 600;
  white-space: nowrap;
}

/* ── Logo (이미지 custom-logo) ── */
.pn-logo--img a { display: block; line-height: 0; }
.pn-logo--img img { height: 36px; width: auto; }

/* ==========================================================================
   8. PRIMARY NAV  (wp_nav_menu 생성 구조에 대응)
   ========================================================================== */

.pn-nav { display: flex; align-items: center; }

.pn-nav ul {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--pn-ink-soft);
}
.pn-nav li { margin: 0; }
.pn-nav a {
  display: inline-block;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
  color: var(--pn-ink-soft);
}
.pn-nav a:hover { color: var(--pn-navy); }

/* WP 활성 메뉴 클래스 → .pn-active 스타일 */
.pn-nav li.current-menu-item > a,
.pn-nav li.current_page_item  > a,
.pn-nav li.current-menu-ancestor > a {
  color: var(--pn-navy);
  border-bottom-color: var(--pn-gold);
}

/* ==========================================================================
   9. SEARCH FORM
   ========================================================================== */

.pn-search { position: relative; min-width: 210px; }

.pn-search input {
  width: 100%;
  padding: 9px 14px 9px 36px;
  border: 1px solid var(--pn-line-strong);
  border-radius: 999px;
  font-size: 14px;
  background: var(--pn-paper);
  font-family: inherit;
  color: var(--pn-ink);
  outline: none;
  transition: border-color .15s, background .15s;
}
.pn-search input::placeholder { color: var(--pn-ink-faint); }
.pn-search input:focus {
  border-color: var(--pn-navy);
  background: var(--pn-bg);
}

/* 돋보기 아이콘 */
.pn-search::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  pointer-events: none;
  background: no-repeat center / contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f9c' stroke-width='2.5' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.5' y2='16.5'/></svg>");
}

/* ==========================================================================
   10. THEME TOGGLE
   ========================================================================== */

.pn-theme-toggle {
  width: 38px;
  height: 38px;
  border: 1px solid var(--pn-line-strong);
  border-radius: 50%;
  background: var(--pn-paper);
  color: var(--pn-ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.pn-theme-toggle:hover  { border-color: var(--pn-navy); color: var(--pn-navy); }
.pn-theme-toggle svg    { width: 16px; height: 16px; display: block; }
.pn-theme-toggle .pn-icon-moon { display: none; }

[data-theme="dark"] .pn-theme-toggle .pn-icon-sun  { display: none; }
[data-theme="dark"] .pn-theme-toggle .pn-icon-moon { display: block; }

/* ==========================================================================
   11. RESPONSIVE — HEADER
   ========================================================================== */

@media (max-width: 1080px) {
  .pn-logo-sub          { display: none; }
  .pn-nav ul            { gap: 18px; font-size: 14px; }
  .pn-search            { min-width: 170px; }
}

@media (max-width: 920px) {
  .pn-header {
    flex-wrap: wrap;
    padding: 16px 20px;
    gap: 14px;
  }
  /* 모바일: 로고(1) → 검색(2) → 토글(3) → 네비(4) */
  .pn-nav            { order: 4; width: 100%; overflow-x: auto; padding-bottom: 4px; }
  .pn-nav ul         { gap: 18px; }
  .pn-search         { order: 2; flex: 1; min-width: 0; }
  .pn-theme-toggle   { order: 3; }
}

/* ==========================================================================
   12. MONTH BAR
   ========================================================================== */

.pn-monthbar {
  background: var(--pn-paper);
  border-bottom: 1px solid var(--pn-line);
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.pn-monthbar .pn-month-tag  { font-size: 14px; font-weight: 800; color: var(--pn-navy); letter-spacing: -0.01em; }
.pn-monthbar .pn-month-tag em { font-style: normal; color: var(--pn-gold); }
.pn-monthbar .pn-month-note { font-size: 13px; color: var(--pn-ink-soft); font-weight: 500; }
.pn-monthbar .pn-month-date { font-size: 13px; color: var(--pn-ink-faint); font-weight: 500; }

/* ==========================================================================
   13. LEAD (홈 대표 포스트)
   ========================================================================== */

.pn-lead {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 44px;
  align-items: center;
  padding: 52px 36px 56px;
  border-bottom: 1px solid var(--pn-line);
}

/* 왼쪽 비주얼 카드 */
.pn-lead-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--pn-navy);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-decoration: none;
}
/* 골드 원 장식 */
.pn-lead-visual::before {
  content: '';
  position: absolute;
  width: 150px; height: 150px;
  background: var(--pn-gold);
  border-radius: 50%;
  top: -44px; right: -44px;
  opacity: .9;
}
/* 사선 패턴 */
.pn-lead-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent 0 22px,
    rgba(255,255,255,.04) 22px 23px
  );
}
/* 썸네일이 있을 경우 이미지가 카드 전체를 채움 */
.pn-lead-visual .pn-lead-thumb {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pn-lead-visual .pn-lead-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .6;
}
.pn-lv-label {
  position: relative; z-index: 1;
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: 14px;
}
.pn-lv-amount {
  position: relative; z-index: 1;
  font-size: 52px; font-weight: 900;
  color: #fff; letter-spacing: -0.04em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.pn-lv-amount span { color: var(--pn-gold); }
.pn-lv-sub {
  position: relative; z-index: 1;
  margin-top: 14px; font-size: 13px;
  color: rgba(255,255,255,.75);
  font-weight: 500; text-align: center; line-height: 1.6;
}

/* 오른쪽 텍스트 영역 */
.pn-lead-body .pn-lead-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pn-gold);
  margin-bottom: 16px;
}
.pn-lead-body .pn-lead-eyebrow::before {
  content: ''; width: 28px; height: 2px; background: var(--pn-gold);
}
.pn-lead-body h1 {
  font-size: 38px; line-height: 1.28;
  color: var(--pn-navy); font-weight: 800;
  letter-spacing: -0.03em; margin-bottom: 20px;
}
.pn-lead-body .pn-lead-summary {
  font-size: 16.5px; line-height: 1.8;
  color: var(--pn-ink-soft); margin-bottom: 22px;
}
.pn-lead-body .pn-lead-summary strong { color: var(--pn-ink); font-weight: 700; }

.pn-lead-meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--pn-ink-faint); font-weight: 500;
  padding-top: 18px; border-top: 1px solid var(--pn-line);
  flex-wrap: wrap;
}
.pn-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--pn-line-strong); flex-shrink: 0; }
.pn-lead-cta {
  display: inline-block; margin-top: 22px;
  padding: 12px 24px;
  background: var(--pn-navy); color: #fff;
  border-radius: 6px; font-size: 14px; font-weight: 700;
  transition: background .15s;
}
.pn-lead-cta:hover { background: var(--pn-navy-dark); color: #fff; }

[data-theme="dark"] .pn-lead-cta { background: var(--pn-gold); color: #0F172A; }
[data-theme="dark"] .pn-lead-cta:hover { background: var(--pn-navy); color: #fff; }

/* ==========================================================================
   14. CHIPS (카테고리 태그)
   ========================================================================== */

.pn-chips {
  padding: 22px 28px;
  border-bottom: 1px solid var(--pn-line);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--pn-paper);
}
.pn-chips-label {
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pn-ink-faint);
}
.pn-chip {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--pn-line-strong);
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: var(--pn-ink-soft); background: var(--pn-bg);
  transition: border-color .15s, color .15s;
}
.pn-chip:hover { border-color: var(--pn-navy); color: var(--pn-navy); }
.pn-chip-hot {
  background: var(--pn-navy); color: #fff; border-color: var(--pn-navy);
}
.pn-chip-hot::before {
  content: '●'; color: var(--pn-gold);
  margin-right: 6px; font-size: 9px; vertical-align: middle;
}
[data-theme="dark"] .pn-chip-hot { background: var(--pn-gold); color: #0F172A; border-color: var(--pn-gold); }

/* ==========================================================================
   15. SECTION HEADER
   ========================================================================== */

.pn-section { padding: 52px 28px 24px; }
.pn-section-head {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 16px;
  margin-bottom: 10px; padding-bottom: 16px;
  border-bottom: 2px solid var(--pn-navy);
}
.pn-section-head h2 { font-size: 26px; color: var(--pn-navy); font-weight: 800; letter-spacing: -0.03em; }
.pn-section-head .pn-section-sub { font-size: 13px; color: var(--pn-ink-faint); font-weight: 500; }

/* ==========================================================================
   16. LOG ITEM (탐사 기록 리스트)
   ========================================================================== */

.pn-log-item {
  display: grid;
  grid-template-columns: 64px 1fr 150px;
  gap: 24px; align-items: center;
  padding: 22px 8px;
  border-bottom: 1px solid var(--pn-line);
  transition: background .15s;
  color: inherit;
}
.pn-log-item:hover { background: var(--pn-paper); }
.pn-log-item:last-child { border-bottom: none; }

.pn-log-num {
  font-size: 30px; font-weight: 900;
  color: var(--pn-gold); line-height: 1;
  text-align: right; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.pn-log-num small {
  display: block; font-size: 9px; font-weight: 800;
  color: var(--pn-ink-faint); letter-spacing: .16em; margin-top: 6px;
}

.pn-log-body h3 {
  font-size: 18px; font-weight: 700; line-height: 1.42;
  color: var(--pn-ink); margin-bottom: 5px;
  transition: color .15s; letter-spacing: -0.02em;
}
.pn-log-item:hover .pn-log-body h3 { color: var(--pn-navy); }
.pn-log-body .pn-log-desc { font-size: 13.5px; line-height: 1.6; color: var(--pn-ink-soft); }
.pn-log-body .pn-cat-tag {
  display: inline-block;
  background: var(--pn-paper-2); color: var(--pn-navy);
  padding: 2px 9px; border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  margin-right: 8px; vertical-align: 1px;
}

.pn-log-money { text-align: right; }
.pn-log-money .pn-log-amount {
  font-size: 19px; font-weight: 900;
  color: var(--pn-gold-dark); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.pn-log-money .pn-log-amount-label {
  display: block; font-size: 11px;
  color: var(--pn-ink-faint); font-weight: 600;
  margin-bottom: 3px; letter-spacing: .03em;
}
.pn-log-money .pn-log-date { font-size: 12px; color: var(--pn-ink-faint); font-weight: 500; margin-top: 6px; }

/* More 버튼 */
.pn-more-row { text-align: center; padding: 36px 0 12px; }
.pn-btn-more {
  display: inline-block; padding: 12px 28px;
  border: 1.5px solid var(--pn-navy); border-radius: 999px;
  font-size: 14px; font-weight: 700;
  color: var(--pn-navy); background: var(--pn-bg);
  transition: background .15s, color .15s, border-color .15s;
}
.pn-btn-more:hover { background: var(--pn-navy); color: #fff; }
[data-theme="dark"] .pn-btn-more:hover { background: var(--pn-gold); color: #0F172A; border-color: var(--pn-gold); }

/* ==========================================================================
   17. RESPONSIVE — HOME
   ========================================================================== */

@media (max-width: 920px) {
  .pn-monthbar { padding: 14px 20px; gap: 8px; }
  .pn-monthbar .pn-month-note { display: none; }

  .pn-lead {
    grid-template-columns: 1fr;
    gap: 28px; padding: 36px 20px 40px;
  }
  .pn-lead-visual { aspect-ratio: 16 / 9; }
  .pn-lv-amount   { font-size: 42px; }
  .pn-lead-body h1          { font-size: 27px; }
  .pn-lead-body .pn-lead-summary { font-size: 15px; }

  .pn-section { padding: 36px 20px 16px; }
  .pn-section-head h2 { font-size: 21px; }

  .pn-log-item {
    grid-template-columns: 1fr auto;
    grid-template-areas: "num money" "body body";
    gap: 6px 16px; padding: 18px 0;
  }
  .pn-log-num   { grid-area: num;   text-align: left; font-size: 22px; }
  .pn-log-num small { display: inline; margin-left: 6px; }
  .pn-log-money { grid-area: money; }
  .pn-log-money .pn-log-date { display: none; }
  .pn-log-body  { grid-area: body; }
  .pn-log-body h3 { font-size: 16px; }
}

@media (max-width: 540px) {
  .pn-section-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pn-lead-body h1 { font-size: 23px; }
}

/* ==========================================================================
   18. BREADCRUMB
   ========================================================================== */

.pn-crumb {
  padding: 16px 28px;
  border-bottom: 1px solid var(--pn-line);
  font-size: 13px; color: var(--pn-ink-faint);
  background: var(--pn-paper);
}
.pn-crumb a:hover { color: var(--pn-navy); }
.pn-crumb .pn-crumb-sep { margin: 0 8px; opacity: .5; }
.pn-crumb .pn-crumb-current { color: var(--pn-ink-soft); font-weight: 600; }

/* ==========================================================================
   19. ARTICLE HEAD
   ========================================================================== */

.pn-article-head {
  padding: 52px 36px 36px;
  max-width: 800px; margin: 0 auto;
}
.pn-article-head h1 {
  font-size: 40px; line-height: 1.28;
  color: var(--pn-navy); font-weight: 800;
  letter-spacing: -0.035em; margin-bottom: 20px;
}
.pn-lede {
  font-size: 18px; line-height: 1.8;
  color: var(--pn-ink-soft); margin-bottom: 26px;
}
.pn-lede strong { color: var(--pn-ink); font-weight: 700; }

.pn-article-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--pn-ink-faint); font-weight: 500;
  padding-top: 20px; border-top: 1px solid var(--pn-line);
}
.pn-log-mini { font-weight: 800; color: var(--pn-navy); font-size: 12px; letter-spacing: .04em; }
.pn-log-mini em { font-style: normal; color: var(--pn-gold); }

/* ==========================================================================
   20. RESULT BOX (선결론 카드)
   ========================================================================== */

.pn-result-box { max-width: 800px; margin: 8px auto 0; padding: 0 28px; }

.pn-result-card {
  background: var(--pn-navy); color: #fff;
  border-radius: 10px; padding: 28px 32px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.pn-result-main { flex: 1; min-width: 220px; }
.pn-result-label {
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-bottom: 6px;
}
.pn-result-amount {
  font-size: 46px; font-weight: 900;
  letter-spacing: -0.04em; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums;
}
.pn-result-amount span { color: var(--pn-gold); }
.pn-result-note {
  border-left: 1px solid rgba(255,255,255,.2);
  padding-left: 28px; font-size: 14px;
  line-height: 1.7; color: rgba(255,255,255,.8);
  max-width: 320px;
}

[data-theme="dark"] .pn-result-card {
  background: var(--pn-paper-2);
  border: 1px solid var(--pn-line);
}
[data-theme="dark"] .pn-result-card .pn-result-amount { color: var(--pn-ink); }
[data-theme="dark"] .pn-result-card .pn-result-label,
[data-theme="dark"] .pn-result-card .pn-result-note  { color: var(--pn-ink-soft); }
[data-theme="dark"] .pn-result-card .pn-result-note  { border-left-color: var(--pn-line); }

/* ==========================================================================
   21. TOC
   ========================================================================== */

.pn-toc {
  max-width: 800px; margin: 40px auto 0;
  padding: 22px 26px;
  background: var(--pn-paper);
  border-left: 3px solid var(--pn-gold);
  border-radius: 0 6px 6px 0;
}
.pn-toc-head {
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pn-gold-dark); margin-bottom: 12px;
}
.pn-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.pn-toc li {
  counter-increment: toc; padding: 5px 0; font-size: 15px;
}
.pn-toc li::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--pn-gold-dark); font-weight: 800;
  margin-right: 12px; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.pn-toc a { color: var(--pn-ink-soft); font-weight: 600; transition: color .15s; }
.pn-toc a:hover { color: var(--pn-navy); }

/* ==========================================================================
   22. BODY (포스트 본문)
   ========================================================================== */

.pn-body {
  max-width: 800px; margin: 0 auto;
  padding: 44px 28px 24px;
  font-size: 17px; line-height: 1.85; color: var(--pn-ink);
}
.pn-body h2 {
  font-size: 27px; color: var(--pn-navy); font-weight: 800;
  margin: 52px 0 18px; padding-bottom: 12px;
  border-bottom: 2px solid var(--pn-navy); letter-spacing: -0.03em;
}
.pn-body h2:first-child { margin-top: 0; }
.pn-body .pn-h2-num {
  display: inline-block; font-size: 15px;
  color: var(--pn-gold-dark); font-weight: 900;
  margin-right: 12px; vertical-align: 4px;
  letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.pn-body h3 {
  font-size: 20px; color: var(--pn-ink); font-weight: 800;
  margin: 34px 0 12px; letter-spacing: -0.02em;
}
.pn-body p { margin: 0 0 18px; color: var(--pn-ink-soft); }
.pn-body p strong { color: var(--pn-ink); font-weight: 700; }

.pn-body ul, .pn-body ol { margin: 0 0 22px; padding-left: 22px; color: var(--pn-ink-soft); }
.pn-body li { margin: 8px 0; line-height: 1.75; }
.pn-body ul li::marker { color: var(--pn-gold); }

/* Gutenberg 기본 블록 스타일 */
.pn-body blockquote {
  border-left: 3px solid var(--pn-gold);
  margin: 24px 0; padding: 16px 20px;
  background: var(--pn-paper); border-radius: 0 6px 6px 0;
  color: var(--pn-ink-soft); font-style: normal;
}
.pn-body pre {
  background: var(--pn-paper-2); border-radius: 6px;
  padding: 18px 20px; overflow-x: auto;
  font-size: 14px; line-height: 1.6; margin: 0 0 22px;
}
.pn-body code {
  font-size: .9em; background: var(--pn-paper-2);
  padding: 2px 6px; border-radius: 4px;
}
.pn-body pre code { background: none; padding: 0; }

/* 이미지 — 함정 #01 대응 */
.pn-body figure { margin: 0 0 22px; }
.pn-body figure img { border-radius: 6px; }
.pn-body figcaption { font-size: 13px; color: var(--pn-ink-faint); text-align: center; margin-top: 8px; }

/* ==========================================================================
   23. CALLOUT / WARN
   ========================================================================== */

.pn-callout {
  background: var(--pn-money);
  border-left: 3px solid var(--pn-gold);
  padding: 18px 22px; margin: 24px 0 28px;
  border-radius: 0 6px 6px 0;
  font-size: 15px; color: var(--pn-ink-soft); line-height: 1.75;
}
.pn-callout .pn-callout-label {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pn-gold-dark); margin-bottom: 6px;
}
.pn-callout strong { color: var(--pn-ink); }

.pn-warn {
  background: var(--pn-paper);
  border: 1px solid var(--pn-line-strong);
  border-left: 3px solid var(--pn-navy);
  padding: 18px 22px; margin: 24px 0 28px;
  border-radius: 0 6px 6px 0;
  font-size: 15px; color: var(--pn-ink-soft); line-height: 1.75;
}
.pn-warn .pn-warn-label {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pn-navy); margin-bottom: 6px;
}
.pn-warn strong { color: var(--pn-ink); }

/* ==========================================================================
   24. TABLE
   ========================================================================== */

.pn-table-wrap { margin: 22px 0 28px; overflow-x: auto; }
.pn-body table  { width: 100%; border-collapse: collapse; font-size: 15px; }
.pn-body th, .pn-body td {
  padding: 12px 14px; text-align: left;
  border-bottom: 1px solid var(--pn-line); vertical-align: top;
}
.pn-body th {
  background: var(--pn-paper); color: var(--pn-navy);
  font-weight: 700; font-size: 13px; letter-spacing: .03em;
  border-bottom: 2px solid var(--pn-navy);
}
.pn-body td { color: var(--pn-ink-soft); }
.pn-body td strong { color: var(--pn-ink); }
.pn-body td.pn-td-amount {
  color: var(--pn-gold-dark); font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ==========================================================================
   25. STEPS / FAQ
   ========================================================================== */

.pn-steps { counter-reset: step; list-style: none; padding: 0; margin: 24px 0 28px; }
.pn-steps > li {
  counter-increment: step;
  padding: 18px 22px 18px 64px; position: relative;
  margin: 0 0 12px;
  background: var(--pn-bg);
  border: 1px solid var(--pn-line); border-radius: 8px;
}
.pn-steps > li::before {
  content: counter(step);
  position: absolute; left: 18px; top: 18px;
  width: 32px; height: 32px;
  background: var(--pn-navy); color: #fff;
  border-radius: 50%; display: flex;
  align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px;
}
[data-theme="dark"] .pn-steps > li::before { background: var(--pn-gold); color: #0F172A; }
.pn-steps > li .pn-step-title {
  display: block; font-size: 17px; font-weight: 800;
  color: var(--pn-ink); margin-bottom: 6px; letter-spacing: -0.02em;
}
.pn-steps > li .pn-step-meta {
  display: inline-block; font-size: 12px;
  color: var(--pn-gold-dark); font-weight: 700;
  margin-left: 10px; letter-spacing: .04em;
}
.pn-steps > li p { font-size: 15px; margin: 0; color: var(--pn-ink-soft); }

.pn-faq { margin: 24px 0 28px; }
.pn-faq > div {
  border-bottom: 1px solid var(--pn-line); padding: 18px 0;
}
.pn-faq > div:first-child { border-top: 1px solid var(--pn-line); }
.pn-faq .pn-q {
  font-weight: 800; font-size: 17px;
  color: var(--pn-navy); margin-bottom: 8px; letter-spacing: -0.02em;
}
.pn-faq .pn-q::before { content: 'Q.'; color: var(--pn-gold-dark); margin-right: 8px; }
.pn-faq .pn-a { font-size: 15px; color: var(--pn-ink-soft); line-height: 1.75; }
.pn-faq .pn-a::before { content: 'A.'; color: var(--pn-navy); font-weight: 800; margin-right: 8px; }

/* ==========================================================================
   26. ARTICLE FOOTER / TAGS
   ========================================================================== */

.pn-article-foot {
  max-width: 800px; margin: 24px auto 0;
  padding: 28px 28px 36px;
  border-top: 1px solid var(--pn-line);
  display: flex; align-items: center;
  justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.pn-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pn-tag {
  display: inline-block; padding: 4px 12px;
  border: 1px solid var(--pn-line-strong); border-radius: 999px;
  font-size: 13px; color: var(--pn-ink-soft); font-weight: 500;
  transition: border-color .15s, color .15s;
}
.pn-tag::before { content: '#'; color: var(--pn-gold); margin-right: 3px; }
.pn-tag:hover { border-color: var(--pn-navy); color: var(--pn-navy); }

/* ==========================================================================
   27. INLINE SIGNATURE (포스트 하단)
   ========================================================================== */

.pn-sig-inline {
  max-width: 800px; margin: 28px auto 0;
  padding: 32px 28px; text-align: center;
  border-top: 1px solid var(--pn-line);
  border-bottom: 1px solid var(--pn-line);
  background: var(--pn-paper);
}
[data-theme="dark"] .pn-sig-inline { background: var(--pn-paper-2); }
.pn-sig-inline .pn-sig-q {
  font-size: 24px; color: var(--pn-navy);
  font-weight: 900; letter-spacing: -0.03em;
}
.pn-sig-inline .pn-sig-q em { color: var(--pn-gold-dark); font-style: normal; }
.pn-sig-inline .pn-sig-attr {
  margin-top: 8px; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--pn-ink-faint); font-weight: 600;
}

/* ==========================================================================
   28. PREV / NEXT PAGER
   ========================================================================== */

.pn-pager {
  max-width: 960px; margin: 48px auto 0;
  padding: 0 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.pn-pager-card {
  display: block; padding: 22px 24px;
  border: 1px solid var(--pn-line); border-radius: 8px;
  background: var(--pn-bg); transition: border-color .15s, background .15s;
}
.pn-pager-card:hover {
  border-color: var(--pn-navy); background: var(--pn-paper);
}
.pn-pager-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pn-gold-dark); margin-bottom: 8px;
}
.pn-pager-title {
  font-size: 16px; font-weight: 800;
  color: var(--pn-ink); line-height: 1.45; letter-spacing: -0.02em;
}
.pn-pager-next { text-align: right; }
.pn-pager-next .pn-pager-label::after  { content: ' →'; }
.pn-pager-prev .pn-pager-label::before { content: '← '; }

/* ==========================================================================
   29. RELATED POSTS
   ========================================================================== */

.pn-related { max-width: 1180px; margin: 64px auto 0; padding: 0 28px 48px; }
.pn-related-head {
  display: flex; align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px; padding-bottom: 14px;
  border-bottom: 2px solid var(--pn-navy);
}
.pn-related-head h2 { font-size: 24px; color: var(--pn-navy); font-weight: 800; letter-spacing: -0.03em; }

.pn-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pn-rcard {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px;
  border: 1px solid var(--pn-line); border-radius: 8px;
  background: var(--pn-bg); transition: transform .2s, border-color .2s;
}
.pn-rcard:hover { transform: translateY(-3px); border-color: var(--pn-navy); }
.pn-rcard:hover .pn-rcard-title { color: var(--pn-navy); }
.pn-rcard-cat {
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--pn-gold-dark);
}
.pn-rcard-title {
  font-size: 17px; font-weight: 800;
  line-height: 1.42; color: var(--pn-ink);
  transition: color .15s; letter-spacing: -0.02em;
}
.pn-rcard-amount {
  font-size: 18px; font-weight: 900;
  color: var(--pn-gold-dark);
  font-variant-numeric: tabular-nums; margin-top: auto;
}
.pn-rcard-amount small {
  font-size: 11px; color: var(--pn-ink-faint);
  font-weight: 600; margin-right: 5px; letter-spacing: .03em;
}

/* ==========================================================================
   30. RESPONSIVE — SINGLE
   ========================================================================== */

@media (max-width: 920px) {
  .pn-crumb { padding: 14px 20px; }
  .pn-article-head        { padding: 36px 20px 28px; }
  .pn-article-head h1     { font-size: 27px; }
  .pn-lede                { font-size: 16px; }
  .pn-result-box, .pn-toc, .pn-body, .pn-article-foot,
  .pn-sig-inline, .pn-pager { padding-left: 20px; padding-right: 20px; }
  .pn-result-card         { padding: 22px; gap: 16px; }
  .pn-result-amount       { font-size: 36px; }
  .pn-result-note {
    border-left: none; padding-left: 0;
    border-top: 1px solid rgba(255,255,255,.2); padding-top: 14px;
    max-width: none;
  }
  [data-theme="dark"] .pn-result-note { border-top-color: var(--pn-line); }
  .pn-body                { padding-top: 36px; font-size: 16px; }
  .pn-body h2             { font-size: 22px; }
  .pn-pager               { grid-template-columns: 1fr; }
  .pn-related-grid        { grid-template-columns: 1fr; }
  .pn-related             { padding: 0 20px 36px; }
}
@media (max-width: 540px) {
  .pn-article-head h1 { font-size: 23px; }
}

/* ==========================================================================
   31. PAGE HEAD (아카이브·문의 등 공통)
   ========================================================================== */

.pn-page-head {
  padding: 56px 36px 40px; max-width: 1000px;
  margin: 0 auto; border-bottom: 1px solid var(--pn-line);
}
.pn-page-head .pn-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pn-gold-dark); margin-bottom: 18px;
}
.pn-page-head .pn-eyebrow::before { content:''; width: 32px; height: 2px; background: var(--pn-gold); }
.pn-page-head h1 {
  font-size: 40px; line-height: 1.2; color: var(--pn-navy);
  font-weight: 800; letter-spacing: -0.035em; margin-bottom: 16px;
}
.pn-page-head .pn-tagline { font-size: 16px; color: var(--pn-ink-soft); line-height: 1.7; }
.pn-page-head .pn-tagline strong { color: var(--pn-ink); font-weight: 700; }
.pn-page-head .pn-stat-row {
  display: flex; gap: 28px; margin-top: 24px; padding-top: 22px;
  border-top: 1px solid var(--pn-line); font-size: 13px;
  color: var(--pn-ink-faint); font-weight: 500;
}
.pn-page-head .pn-stat-row b {
  color: var(--pn-navy); font-size: 24px; font-weight: 900;
  display: block; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.pn-page-head .pn-stat-row b.gold { color: var(--pn-gold-dark); }

/* ==========================================================================
   32. ARCHIVE — CAT NAV + CAT SECTION + ARCH ITEMS
   ========================================================================== */

.pn-cat-nav {
  position: sticky; top: 0; z-index: 10;
  background: var(--pn-bg); border-bottom: 1px solid var(--pn-line);
  padding: 14px 28px; display: flex; gap: 8px; overflow-x: auto;
}
.pn-cat-nav a {
  padding: 7px 14px; border-radius: 999px; font-size: 13px;
  font-weight: 600; color: var(--pn-ink-soft); white-space: nowrap;
  border: 1px solid transparent; transition: all .15s;
}
.pn-cat-nav a:hover { background: var(--pn-paper); color: var(--pn-navy); }
.pn-cat-nav a.pn-active { background: var(--pn-navy); color: #fff; }
[data-theme="dark"] .pn-cat-nav a.pn-active { background: var(--pn-gold); color: #0F172A; }

.pn-cat-section {
  padding: 52px 36px 8px; max-width: 1000px;
  margin: 0 auto; scroll-margin-top: 60px;
}
.pn-cat-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; margin-bottom: 22px; padding-bottom: 16px;
  border-bottom: 2px solid var(--pn-navy); flex-wrap: wrap;
}
.pn-cat-section-head h2 {
  font-size: 30px; color: var(--pn-navy); font-weight: 800;
  letter-spacing: -0.035em; display: flex; align-items: baseline; gap: 14px;
}
.pn-cat-count {
  font-size: 13px; font-weight: 700; color: var(--pn-gold-dark);
  background: var(--pn-money); padding: 4px 12px;
  border-radius: 999px; letter-spacing: .03em;
}
.pn-cat-section-head .pn-cat-desc {
  font-size: 14px; color: var(--pn-ink-faint);
  font-weight: 500; max-width: 460px; line-height: 1.7;
}

.pn-arch-item {
  display: grid; grid-template-columns: 56px 1fr 140px;
  gap: 22px; align-items: center;
  padding: 20px 8px; border-bottom: 1px solid var(--pn-line);
  transition: background .15s;
}
.pn-arch-item:hover { background: var(--pn-paper); }
.pn-arch-item:last-child { border-bottom: none; }
.pn-arch-num {
  font-size: 26px; font-weight: 900; color: var(--pn-gold);
  line-height: 1; text-align: right;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.pn-arch-num small {
  display: block; font-size: 9px; font-weight: 800;
  color: var(--pn-ink-faint); letter-spacing: .14em; margin-top: 5px;
}
.pn-arch-body h3 {
  font-size: 18px; font-weight: 700; line-height: 1.4;
  color: var(--pn-ink); margin-bottom: 4px;
  transition: color .15s; letter-spacing: -0.02em;
}
.pn-arch-item:hover .pn-arch-body h3 { color: var(--pn-navy); }
.pn-arch-body .pn-arch-desc { font-size: 13px; line-height: 1.6; color: var(--pn-ink-soft); }
.pn-arch-money { text-align: right; }
.pn-arch-money .pn-arch-amount {
  font-size: 17px; font-weight: 900; color: var(--pn-gold-dark);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.pn-arch-money .pn-arch-amount small {
  display: block; font-size: 10px; color: var(--pn-ink-faint);
  font-weight: 600; margin-bottom: 3px; letter-spacing: .03em;
}
.pn-arch-money .pn-arch-date {
  font-size: 12px; color: var(--pn-ink-faint); font-weight: 500; margin-top: 6px;
}

.pn-back-row { text-align: center; padding: 28px 0; }

/* ==========================================================================
   33. SEARCH — HEAD + BIG FORM + FILTER + RESULTS + EMPTY
   ========================================================================== */

.pn-search-head {
  padding: 52px 36px 38px; max-width: 1000px;
  margin: 0 auto; border-bottom: 1px solid var(--pn-line);
}
.pn-search-head .pn-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pn-gold-dark);
  margin-bottom: 14px; display: inline-block;
}
.pn-search-head h1 {
  font-size: 34px; line-height: 1.3; color: var(--pn-navy);
  font-weight: 800; letter-spacing: -0.035em; margin-bottom: 22px;
}
.pn-search-head h1 .pn-q { color: var(--pn-ink); position: relative; padding: 0 2px; }
.pn-search-head h1 .pn-q::after {
  content:''; position: absolute; left: 0; right: 0; bottom: 1px;
  height: 9px; background: var(--pn-gold); opacity: .28; z-index: -1;
}

.pn-search-big { display: flex; gap: 8px; max-width: 640px; }
.pn-search-big .pn-sb-wrap { position: relative; flex: 1; }
.pn-search-big .pn-sb-wrap::before {
  content:''; position: absolute; left: 18px; top: 50%;
  width: 16px; height: 16px; transform: translateY(-50%);
  pointer-events: none; z-index: 1;
  background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f9c' stroke-width='2.5' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.5' y2='16.5'/></svg>");
}
.pn-search-big input {
  width: 100%; padding: 14px 18px 14px 46px;
  border: 1.5px solid var(--pn-line-strong); border-radius: 999px;
  font-size: 15px; background: var(--pn-paper); font-family: inherit;
  color: var(--pn-ink); outline: none;
  transition: border-color .15s, background .15s;
}
.pn-search-big input:focus { border-color: var(--pn-navy); background: var(--pn-bg); }
.pn-search-big button {
  background: var(--pn-navy); color: #fff; border: none;
  padding: 0 28px; border-radius: 999px; font-size: 14px;
  font-weight: 700; transition: background .15s; cursor: pointer; font-family: inherit;
}
.pn-search-big button:hover { background: var(--pn-navy-dark); }
[data-theme="dark"] .pn-search-big button { background: var(--pn-gold); color: #0F172A; }

.pn-filter-bar {
  max-width: 1000px; margin: 0 auto; padding: 24px 36px 8px;
  display: flex; gap: 24px; align-items: flex-start;
  flex-wrap: wrap; border-bottom: 1px solid var(--pn-line);
}
.pn-filter-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pn-filter-label {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pn-ink-faint); margin-right: 4px;
}
.pn-chip-active { background: var(--pn-navy); color: #fff; border-color: var(--pn-navy); }
[data-theme="dark"] .pn-chip-active { background: var(--pn-gold); color: #0F172A; border-color: var(--pn-gold); }
.pn-chip .pn-count { opacity: .6; margin-left: 4px; font-weight: 500; }
.pn-sort-group { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pn-sort-btn {
  padding: 6px 12px; border: none; background: transparent;
  font-size: 13px; font-weight: 600; color: var(--pn-ink-soft);
  border-radius: 4px; cursor: pointer; transition: all .15s; font-family: inherit;
}
.pn-sort-btn:hover { color: var(--pn-navy); }
.pn-sort-btn.pn-active { background: var(--pn-navy); color: #fff; }
[data-theme="dark"] .pn-sort-btn.pn-active { background: var(--pn-gold); color: #0F172A; }

.pn-results-meta {
  padding: 22px 36px 8px; max-width: 1000px;
  margin: 0 auto; font-size: 13px; color: var(--pn-ink-faint); font-weight: 500;
}
.pn-results-meta strong {
  color: var(--pn-navy); font-size: 18px; font-weight: 900;
  margin: 0 2px; font-variant-numeric: tabular-nums;
}

.pn-results { max-width: 1000px; margin: 0 auto; padding: 8px 36px 24px; }
.pn-res-item {
  display: grid; grid-template-columns: 56px 1fr 130px;
  gap: 22px; align-items: center;
  padding: 22px 8px; border-bottom: 1px solid var(--pn-line);
  transition: background .15s;
}
.pn-res-item:hover { background: var(--pn-paper); }
.pn-res-num {
  font-size: 26px; font-weight: 900; color: var(--pn-gold);
  line-height: 1; text-align: right;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.pn-res-num small {
  display: block; font-size: 9px; font-weight: 800;
  color: var(--pn-ink-faint); letter-spacing: .14em; margin-top: 5px;
}
.pn-res-body h3 {
  font-size: 18px; font-weight: 700; line-height: 1.4;
  color: var(--pn-ink); margin-bottom: 6px;
  transition: color .15s; letter-spacing: -0.02em;
}
.pn-res-item:hover .pn-res-body h3 { color: var(--pn-navy); }
.pn-res-body h3 mark {
  background: rgba(249,115,22,.25); color: inherit;
  padding: 1px 3px; border-radius: 2px; font-weight: 800;
}
[data-theme="dark"] .pn-res-body h3 mark { background: rgba(251,146,60,.3); }
.pn-res-body .pn-res-desc { font-size: 13px; color: var(--pn-ink-soft); line-height: 1.6; }
.pn-res-body .pn-res-desc mark {
  background: rgba(249,115,22,.2); color: inherit;
  padding: 0 2px; border-radius: 2px; font-weight: 600;
}
[data-theme="dark"] .pn-res-body .pn-res-desc mark { background: rgba(251,146,60,.25); }
.pn-res-money { text-align: right; }
.pn-res-money .pn-res-amount {
  font-size: 17px; font-weight: 900; color: var(--pn-gold-dark);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1;
}
.pn-res-money .pn-res-amount small {
  display: block; font-size: 10px; color: var(--pn-ink-faint);
  font-weight: 600; margin-bottom: 3px;
}
.pn-res-money .pn-res-date {
  font-size: 12px; color: var(--pn-ink-faint); font-weight: 500; margin-top: 6px;
}

.pn-empty { max-width: 600px; margin: 56px auto; padding: 44px 36px; text-align: center; }
.pn-empty .pn-empty-icon {
  width: 56px; height: 56px; margin: 0 auto 20px;
  border: 2px dashed var(--pn-line-strong); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--pn-ink-faint);
}
.pn-empty .pn-empty-icon svg { width: 24px; height: 24px; }
.pn-empty h2 {
  font-size: 24px; color: var(--pn-navy); font-weight: 800;
  margin-bottom: 10px; letter-spacing: -0.03em;
}
.pn-empty p { font-size: 15px; color: var(--pn-ink-soft); line-height: 1.7; margin-bottom: 8px; }
.pn-empty-suggest {
  margin-top: 26px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}

/* ==========================================================================
   34. PAGINATION
   ========================================================================== */

.pn-pagination {
  max-width: 1000px; margin: 0 auto; padding: 36px 36px 24px;
  display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
}
.pn-pagination a,
.pn-pagination span {
  min-width: 38px; height: 38px; display: flex; align-items: center;
  justify-content: center; padding: 0 10px;
  border: 1px solid var(--pn-line); border-radius: 6px;
  font-size: 14px; font-weight: 600;
  color: var(--pn-ink-soft); background: var(--pn-bg); transition: all .15s;
}
.pn-pagination a:hover { border-color: var(--pn-navy); color: var(--pn-navy); }
.pn-pagination .current,
.pn-pagination .pn-page-current { background: var(--pn-navy); color: #fff; border-color: var(--pn-navy); }
[data-theme="dark"] .pn-pagination .current,
[data-theme="dark"] .pn-pagination .pn-page-current { background: var(--pn-gold); color: #0F172A; border-color: var(--pn-gold); }
.pn-pagination .dots { border: none; background: transparent; color: var(--pn-ink-faint); }

/* ==========================================================================
   35. 404
   ========================================================================== */

.pn-404-wrap {
  display: flex; align-items: center;
  justify-content: center; padding: 72px 28px;
}
.pn-404-inner { max-width: 640px; width: 100%; text-align: center; }
.pn-404-coin {
  width: 110px; height: 110px; margin: 0 auto 32px; border-radius: 50%;
  background: var(--pn-navy); display: flex; align-items: center;
  justify-content: center; position: relative;
}
.pn-404-coin::after {
  content:''; position: absolute; inset: 8px;
  border: 2px solid var(--pn-gold); border-radius: 50%; opacity: .55;
}
.pn-404-coin span {
  font-size: 40px; font-weight: 900; color: var(--pn-gold);
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .pn-404-coin { background: var(--pn-paper); border: 1px solid var(--pn-line); }

.pn-404-amount {
  font-size: 56px; font-weight: 900; color: var(--pn-navy);
  letter-spacing: -0.05em; line-height: 1; margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.pn-404-amount span { color: var(--pn-gold-dark); }
.pn-404-inner h1 {
  font-size: 30px; color: var(--pn-navy); font-weight: 800;
  letter-spacing: -0.035em; margin-bottom: 14px;
}
.pn-404-desc { font-size: 16px; color: var(--pn-ink-soft); line-height: 1.8; margin-bottom: 8px; }
.pn-404-desc strong { color: var(--pn-ink); font-weight: 700; }

.pn-404-reasons {
  text-align: left; max-width: 420px; margin: 28px auto 32px;
  background: var(--pn-paper); border-left: 3px solid var(--pn-gold);
  padding: 18px 22px; border-radius: 0 6px 6px 0;
}
.pn-404-r-label {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pn-gold-dark); margin-bottom: 10px;
}
.pn-404-reasons ul { margin: 0; padding-left: 18px; color: var(--pn-ink-soft); font-size: 14px; }
.pn-404-reasons li { margin: 5px 0; line-height: 1.7; }

.pn-404-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center; margin-bottom: 28px;
}
.pn-404-cta-primary {
  display: inline-block; padding: 13px 26px;
  background: var(--pn-navy); color: #fff; border-radius: 8px;
  font-size: 14px; font-weight: 700; transition: background .15s;
}
.pn-404-cta-primary:hover { background: var(--pn-navy-dark); color: #fff; }
[data-theme="dark"] .pn-404-cta-primary { background: var(--pn-gold); color: #0F172A; }
[data-theme="dark"] .pn-404-cta-primary:hover { background: var(--pn-gold-dark); }
.pn-404-cta-secondary {
  display: inline-block; padding: 13px 26px;
  background: var(--pn-bg); border: 1px solid var(--pn-line-strong);
  border-radius: 8px; font-size: 14px; font-weight: 700;
  color: var(--pn-ink-soft); transition: all .15s;
}
.pn-404-cta-secondary:hover { border-color: var(--pn-navy); color: var(--pn-navy); }

.pn-404-search {
  max-width: 480px; margin: 0 auto;
  padding-top: 28px; border-top: 1px dashed var(--pn-line);
}
.pn-404-search-label {
  font-size: 13px; color: var(--pn-ink-faint); margin-bottom: 12px; font-weight: 500;
}
.pn-404-search-form { display: flex; gap: 6px; }
.pn-404-search-form .pn-sb-wrap { position: relative; flex: 1; }
.pn-404-search-form .pn-sb-wrap::before {
  content:''; position: absolute; left: 14px; top: 50%;
  width: 14px; height: 14px; transform: translateY(-50%);
  pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f9c' stroke-width='2.5' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.5' y2='16.5'/></svg>");
}
.pn-404-search-form input {
  width: 100%; padding: 12px 14px 12px 38px;
  border: 1px solid var(--pn-line-strong); border-radius: 8px;
  font-size: 14px; background: var(--pn-paper); font-family: inherit;
  color: var(--pn-ink); outline: none;
  transition: border-color .15s, background .15s;
}
.pn-404-search-form input:focus { border-color: var(--pn-navy); background: var(--pn-bg); }
.pn-404-search-form button {
  background: var(--pn-navy); color: #fff; border: none;
  padding: 0 20px; border-radius: 8px; font-size: 14px;
  font-weight: 700; cursor: pointer; font-family: inherit;
}
[data-theme="dark"] .pn-404-search-form button { background: var(--pn-gold); color: #0F172A; }

/* ==========================================================================
   36. PAGE / CONTACT
   ========================================================================== */

.pn-page-body {
  max-width: 800px; margin: 52px auto 64px;
  padding: 0 36px; font-size: 16px; line-height: 1.8;
  color: var(--pn-ink-soft);
}
.pn-page-body h2 { color: var(--pn-navy); font-size: 26px; margin: 36px 0 16px; letter-spacing: -0.03em; }
.pn-page-body p { margin-bottom: 18px; }

.pn-contact-wrap {
  max-width: 1000px; margin: 0 auto; padding: 48px 36px 24px;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start;
}

.pn-form { display: flex; flex-direction: column; gap: 20px; }
.pn-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pn-field { display: flex; flex-direction: column; gap: 8px; }
.pn-field label { font-size: 13px; font-weight: 700; color: var(--pn-ink); letter-spacing: -0.01em; }
.pn-field .pn-req { color: var(--pn-gold-dark); margin-left: 3px; }
.pn-field .pn-hint { font-size: 12px; color: var(--pn-ink-faint); }
.pn-field input,
.pn-field select,
.pn-field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--pn-line-strong);
  border-radius: 8px; font-size: 15px; font-family: inherit;
  background: var(--pn-paper); color: var(--pn-ink); outline: none;
  transition: border-color .15s, background .15s;
}
.pn-field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.pn-field input:focus,
.pn-field select:focus,
.pn-field textarea:focus { border-color: var(--pn-navy); background: var(--pn-bg); }
.pn-field input::placeholder,
.pn-field textarea::placeholder { color: var(--pn-ink-faint); }
.pn-checkline {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--pn-ink-soft); line-height: 1.6; cursor: pointer;
}
.pn-checkline input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 1px;
  flex-shrink: 0; accent-color: var(--pn-navy);
}
.pn-checkline a { color: var(--pn-navy); font-weight: 600; border-bottom: 1px solid var(--pn-gold); }
.pn-form-submit {
  align-self: flex-start; padding: 14px 32px;
  background: var(--pn-navy); color: #fff; border: none;
  border-radius: 8px; font-size: 15px; font-weight: 700;
  transition: background .15s; cursor: pointer; font-family: inherit;
}
.pn-form-submit:hover { background: var(--pn-navy-dark); }
[data-theme="dark"] .pn-form-submit { background: var(--pn-gold); color: #0F172A; }
[data-theme="dark"] .pn-form-submit:hover { background: var(--pn-gold-dark); }
.pn-form-note { font-size: 12px; color: var(--pn-ink-faint); margin-top: -6px; }

.pn-aside { display: flex; flex-direction: column; gap: 16px; }
.pn-aside-card {
  border: 1px solid var(--pn-line); border-radius: 10px;
  padding: 24px; background: var(--pn-paper);
}
.pn-aside-card.mail { background: var(--pn-money); }
.pn-aside-card h3 {
  font-size: 15px; font-weight: 800; color: var(--pn-navy);
  margin-bottom: 12px; display: flex; align-items: center;
  gap: 8px; letter-spacing: -0.02em;
}
.pn-aside-card h3::before {
  content:''; width: 7px; height: 7px;
  background: var(--pn-gold); border-radius: 50%; flex-shrink: 0;
}
.pn-aside-card p { font-size: 14px; color: var(--pn-ink-soft); line-height: 1.7; margin-bottom: 8px; }
.pn-aside-mail {
  display: inline-block; font-size: 18px; font-weight: 800;
  color: var(--pn-navy); padding: 4px 0;
  border-bottom: 2px solid var(--pn-gold);
  letter-spacing: -0.02em; word-break: break-all;
}
.pn-aside-card ul { list-style: none; padding: 0; margin: 0; }
.pn-aside-card li {
  font-size: 14px; color: var(--pn-ink-soft); padding: 7px 0;
  border-bottom: 1px dashed var(--pn-line);
  display: flex; justify-content: space-between; gap: 12px;
}
.pn-aside-card li:last-child { border-bottom: none; }
.pn-aside-card li b { color: var(--pn-ink); font-weight: 700; }
.pn-aside-card li span { color: var(--pn-gold-dark); font-weight: 700; white-space: nowrap; }
.pn-aside-note { font-size: 13px; color: var(--pn-ink-soft); line-height: 1.7; }
.pn-aside-note strong { color: var(--pn-ink); }

/* ==========================================================================
   38. PAGE / ABOUT
   ========================================================================== */

/* page-head wider tagline support */
.pn-page-head .pn-tagline strong { color: var(--pn-ink); font-weight: 700; }

/* SECTION (about: 본문 섹션) */
.pn-about-section { max-width: 820px; margin: 0 auto; padding: 56px 36px 0; }
.pn-about-section h2 {
  font-size: 28px; color: var(--pn-navy); font-weight: 800;
  margin-bottom: 22px; padding-bottom: 14px;
  border-bottom: 2px solid var(--pn-navy); letter-spacing: -0.035em;
}
.pn-about-section p {
  margin: 0 0 16px; font-size: 16px; line-height: 1.85; color: var(--pn-ink-soft);
}
.pn-about-section p strong { color: var(--pn-ink); font-weight: 700; }

/* PRINCIPLES (원칙 5개) */
.pn-principles { list-style: none; padding: 0; margin: 12px 0 0; }
.pn-principles > li {
  display: grid; grid-template-columns: 56px 1fr; gap: 22px;
  padding: 24px 0; border-bottom: 1px solid var(--pn-line);
}
.pn-principles > li:last-child { border-bottom: none; }
.pn-principle-num {
  width: 44px; height: 44px; background: var(--pn-navy); color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 17px;
}
[data-theme="dark"] .pn-principle-num { background: var(--pn-gold); color: #0F172A; }
.pn-principle-body h3 {
  font-size: 20px; font-weight: 800; color: var(--pn-ink);
  margin-bottom: 8px; letter-spacing: -0.02em;
}
.pn-principle-body p { font-size: 15px; color: var(--pn-ink-soft); margin: 0; line-height: 1.75; }

/* CATEGORY GRID (다루는 것) */
.pn-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 4px; }
.pn-cat-card {
  border: 1px solid var(--pn-line); border-radius: 8px;
  padding: 20px 22px; background: var(--pn-paper); transition: all .15s;
  display: block;
}
.pn-cat-card:hover { border-color: var(--pn-navy); transform: translateY(-2px); }
.pn-cat-card h3 {
  font-size: 18px; font-weight: 800; color: var(--pn-navy);
  margin-bottom: 6px; display: flex; align-items: center; gap: 8px;
  letter-spacing: -0.02em;
}
.pn-cat-card h3::before { content:'●'; color: var(--pn-gold); font-size: 9px; }
.pn-cat-card p { font-size: 13px; color: var(--pn-ink-soft); margin: 0; line-height: 1.7; }

/* SCHEDULE (발행 일정) */
.pn-schedule { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 4px; }
.pn-schedule-card {
  border-left: 3px solid var(--pn-gold); background: var(--pn-paper);
  padding: 20px 24px; border-radius: 0 6px 6px 0;
}
.pn-schedule-card.full { grid-column: 1 / -1; border-left-color: var(--pn-yellow); }
.pn-sched-day {
  font-size: 22px; font-weight: 800; color: var(--pn-navy);
  margin-bottom: 4px; letter-spacing: -0.02em;
}
.pn-sched-time {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pn-gold-dark); font-weight: 700; margin-bottom: 10px;
}
.pn-schedule-card p { font-size: 14px; color: var(--pn-ink-soft); margin: 0; line-height: 1.65; }
.pn-schedule-card p strong { color: var(--pn-ink); font-weight: 700; }

/* SOURCES (어디서 찾나요) */
.pn-sources { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.pn-sources li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border: 1px solid var(--pn-line); border-radius: 6px;
  font-size: 14px; color: var(--pn-ink-soft); background: var(--pn-bg);
}
.pn-sources li::before {
  content:''; width: 8px; height: 8px;
  background: var(--pn-gold); border-radius: 50%; flex-shrink: 0;
}
.pn-sources li strong { color: var(--pn-ink); font-weight: 700; margin-right: 6px; }
.pn-sources li code {
  font-family: monospace; font-size: 12px; color: var(--pn-ink-faint); margin-left: auto;
}

/* CONTACT BOX (about 페이지 하단) */
.pn-contact-box {
  background: var(--pn-money); padding: 28px; border-radius: 8px;
  border: 1px solid var(--pn-line); margin-top: 12px;
}
.pn-contact-box p { margin-bottom: 12px; }
.pn-contact-box .pn-contact-mail {
  display: inline-block; font-size: 20px; color: var(--pn-navy); font-weight: 800;
  padding: 8px 0; border-bottom: 2px solid var(--pn-gold); letter-spacing: -0.02em;
}
.pn-contact-box .pn-contact-form-link {
  color: var(--pn-navy); font-weight: 700; border-bottom: 1px solid var(--pn-gold);
}

/* ==========================================================================
   39. COMMENTS
   ========================================================================== */

.pn-comments {
  max-width: 820px; margin: 56px auto 0; padding: 0 36px;
}
.pn-comments-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-bottom: 16px; border-bottom: 2px solid var(--pn-navy); margin-bottom: 28px;
}
.pn-comments-head h2 {
  font-size: 24px; color: var(--pn-navy); font-weight: 800;
  letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 12px; margin: 0;
}
.pn-comments-count {
  font-size: 13px; font-weight: 700; color: var(--pn-gold-dark);
  background: var(--pn-money); padding: 3px 11px; border-radius: 999px;
}
.pn-comments-closed { font-size: 13px; color: var(--pn-ink-faint); }

/* LIST */
.pn-comment-list, .pn-comment-list ol.children {
  list-style: none; padding: 0; margin: 0;
}
.pn-comment-list ol.children {
  margin: 16px 0 0 32px; padding-left: 18px;
  border-left: 2px solid var(--pn-line);
}
.pn-comment { margin: 0 0 24px; }
.pn-comment:last-child { margin-bottom: 0; }
.pn-comment-inner {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
}
.pn-comment-avatar img {
  width: 44px; height: 44px; border-radius: 50%; display: block;
  border: 1px solid var(--pn-line);
}
.pn-comment-main { min-width: 0; }
.pn-comment-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.pn-comment-author {
  font-size: 14px; font-weight: 800; color: var(--pn-ink); letter-spacing: -0.01em;
}
.pn-comment-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--pn-navy); color: #fff; letter-spacing: .04em;
}
[data-theme="dark"] .pn-comment-badge { background: var(--pn-gold); color: #0F172A; }
.pn-comment-date {
  font-size: 12px; color: var(--pn-ink-faint); font-variant-numeric: tabular-nums;
}
.pn-comment-date a { color: inherit; }
.pn-comment-body {
  font-size: 15px; line-height: 1.75; color: var(--pn-ink-soft); word-wrap: break-word;
}
.pn-comment-body p { margin: 0 0 10px; }
.pn-comment-body p:last-child { margin-bottom: 0; }
.pn-comment-body a {
  color: var(--pn-navy); border-bottom: 1px solid var(--pn-gold);
}
.pn-comment-pending {
  font-size: 12px; color: var(--pn-gold-dark); font-style: italic; margin: 6px 0;
}
.pn-comment-foot {
  margin-top: 10px; display: flex; gap: 14px; font-size: 12px; font-weight: 600;
}
.pn-comment-reply a, .pn-comment-edit a {
  color: var(--pn-ink-faint);
  border-bottom: 1px dashed var(--pn-line-strong);
  padding-bottom: 1px; transition: color .15s, border-color .15s;
}
.pn-comment-reply a:hover, .pn-comment-edit a:hover {
  color: var(--pn-navy); border-color: var(--pn-gold);
}

/* PAGER */
.pn-comments-pager { margin: 28px 0; text-align: center; font-size: 13px; }
.pn-comments-pager .nav-links { display: flex; justify-content: center; gap: 14px; }

/* FORM */
.pn-comment-form {
  display: flex; flex-direction: column; gap: 18px;
  margin-top: 36px; padding-top: 32px; border-top: 1px dashed var(--pn-line);
}
.pn-comment-form-title {
  font-size: 18px; color: var(--pn-navy); font-weight: 800;
  letter-spacing: -0.02em; margin: 0;
}
.pn-comment-cancel { font-size: 12px; color: var(--pn-ink-faint); font-weight: 600; }
.pn-comment-cancel a { color: var(--pn-gold-dark); }
.pn-comment-form .pn-form-note { margin-top: -4px; }
/* 폼 안의 필드는 contact 폼의 .pn-field / .pn-form-row 스타일 재사용 */

/* "회신 중" 안내 / logged in 안내 */
.pn-comment-form .logged-in-as, .pn-comment-form .must-log-in {
  font-size: 13px; color: var(--pn-ink-soft);
}
.pn-comment-form .logged-in-as a, .pn-comment-form .must-log-in a {
  color: var(--pn-navy); font-weight: 700; border-bottom: 1px solid var(--pn-gold);
}

/* ==========================================================================
   37. RESPONSIVE — PHASE E
   ========================================================================== */

@media (max-width: 920px) {
  .pn-page-head              { padding: 36px 20px 28px; }
  .pn-page-head h1           { font-size: 27px; }
  .pn-page-head .pn-stat-row { gap: 18px; flex-wrap: wrap; }
  .pn-cat-nav                { padding: 12px 20px; }
  .pn-cat-section            { padding: 36px 20px 8px; }
  .pn-cat-section-head h2    { font-size: 22px; }
  .pn-about-section          { padding: 36px 20px 0; }
  .pn-about-section h2       { font-size: 22px; }
  .pn-cats                   { grid-template-columns: 1fr; }
  .pn-schedule               { grid-template-columns: 1fr; }
  .pn-arch-item              { grid-template-columns: 1fr auto; grid-template-areas: "num money" "body body"; gap: 6px 16px; padding: 18px 0; }
  .pn-arch-num               { grid-area: num; text-align: left; font-size: 20px; }
  .pn-arch-num small         { display: inline; margin-left: 6px; }
  .pn-arch-money             { grid-area: money; }
  .pn-arch-money .pn-arch-date { display: none; }
  .pn-arch-body              { grid-area: body; }
  .pn-arch-body h3           { font-size: 16px; }
  .pn-search-head            { padding: 36px 20px 28px; }
  .pn-search-head h1         { font-size: 25px; }
  .pn-filter-bar             { padding: 18px 20px 8px; gap: 16px; }
  .pn-sort-group             { margin-left: 0; width: 100%; padding-top: 8px; border-top: 1px dashed var(--pn-line); }
  .pn-results                { padding: 8px 20px 24px; }
  .pn-res-item               { grid-template-columns: 1fr auto; grid-template-areas: "num money" "body body"; gap: 6px 16px; padding: 20px 0; }
  .pn-res-num                { grid-area: num; text-align: left; font-size: 20px; }
  .pn-res-num small          { display: inline; margin-left: 6px; }
  .pn-res-money              { grid-area: money; }
  .pn-res-money .pn-res-date { display: none; }
  .pn-res-body               { grid-area: body; }
  .pn-res-body h3            { font-size: 16px; }
  .pn-results-meta           { padding: 18px 20px 4px; }
  .pn-pagination             { padding: 28px 20px 16px; }
  .pn-404-wrap               { padding: 48px 20px; }
  .pn-404-amount             { font-size: 44px; }
  .pn-404-inner h1           { font-size: 24px; }
  .pn-404-actions            { flex-direction: column; align-items: stretch; }
  .pn-404-cta-primary,
  .pn-404-cta-secondary      { text-align: center; }
  .pn-contact-wrap           { grid-template-columns: 1fr; gap: 32px; padding: 32px 20px 16px; }
  .pn-page-body              { padding: 0 20px; margin-top: 36px; }
  .pn-comments               { padding: 0 20px; margin-top: 40px; }
  .pn-comments-head h2       { font-size: 20px; }
  .pn-comment-list ol.children { margin-left: 14px; padding-left: 12px; }
}
@media (max-width: 540px) {
  .pn-page-head h1    { font-size: 23px; }
  .pn-search-head h1  { font-size: 21px; }
  .pn-form-row        { grid-template-columns: 1fr; }
  .pn-principles > li { grid-template-columns: 44px 1fr; gap: 14px; }
  .pn-principle-num   { width: 36px; height: 36px; font-size: 14px; }
}