/* ==========================================================================
   보험 자료실 메뉴별 한 페이지 보기 (portal/page-mode.js)
   ========================================================================== */

/* 지금 메뉴가 아닌 구역은 숨깁니다 (자바스크립트가 켜진 경우에만) */
.pm-on .app-container > section.pm-hidden { display: none !important; }

/* 지금 보고 있는 메뉴 버튼은 채워진 모양으로 */
:root .nav-links .nav-link.flow-btn[aria-current="page"] {
  border-color: transparent;
  border-radius: 12px;
  color: var(--flow-on-fill);
}
:root .flow-btn[aria-current="page"] .flow-btn-circle { width: 220px; height: 220px; opacity: 1; }
:root .flow-btn[aria-current="page"] .flow-btn-arr { stroke: var(--flow-on-fill); }
:root .flow-btn[aria-current="page"] .flow-btn-arr--in { left: 9px; }
:root .flow-btn[aria-current="page"] .flow-btn-arr--out { right: -25%; }
:root .flow-btn[aria-current="page"] .flow-btn-text { transform: translateX(7px); }

/* 페이지 끝 '이전 / 다음 메뉴' */
.pm-pager {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 1080px;
  margin: 56px auto 24px;
  padding: 0 22px;
}
.pm-on .pm-pager { display: grid; }
.pm-pager a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px;
  border: 1px solid #D2D2D7;
  border-radius: 16px;
  background: #FFFFFF;
  color: #1D1D1F;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.pm-pager a:hover { border-color: #0071E3; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.3); transform: translateY(-2px); }
.pm-pager .pm-next { text-align: right; grid-column: 2; }
.pm-pager small { font-size: 13px; color: #6E6E73; }
.pm-pager strong { font-size: 18px; font-weight: 700; }
[data-theme="dark"] .pm-pager a { border-color: #424245; background: #1D1D1F; color: #F5F5F7; }
[data-theme="dark"] .pm-pager small { color: #A1A1A6; }

@media (max-width: 640px) {
  .pm-pager { gap: 8px; margin-top: 40px; padding: 0 14px; }
  .pm-pager a { padding: 14px 14px; }
  .pm-pager strong { font-size: 15px; }
}