.peap-nav-menu { position: relative; }
.peap-nav-menu__toggle, .peap-nav-menu__submenu-toggle { display: none; }
.peap-nav-menu__list, .peap-nav-menu__list .sub-menu { list-style: none; margin: 0; padding: 0; }
.peap-nav-menu__list { align-items: center; display: flex; gap: var(--peap-nav-gap, 22px); }
.peap-nav-menu--vertical .peap-nav-menu__list { align-items: stretch; flex-direction: column; }
.peap-nav-menu li { position: relative; }
.peap-nav-menu a { display: block; text-decoration: none; }
.peap-nav-menu .sub-menu { background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .12); display: none; left: 0; min-width: 180px; position: absolute; top: 100%; z-index: 50; }
.peap-nav-menu .menu-item-has-children:hover > .sub-menu, .peap-nav-menu .menu-item-has-children:focus-within > .sub-menu { display: block; }
.peap-nav-menu .sub-menu .sub-menu { left: 100%; top: 0; }
.peap-nav-menu.is-mobile .peap-nav-menu__toggle { display: inline-flex; }
.peap-nav-menu.is-mobile .peap-nav-menu__list { display: none; flex-direction: column; padding-top: 12px; width: 100%; }
.peap-nav-menu.is-mobile.is-open .peap-nav-menu__list { display: flex; }
.peap-nav-menu.is-mobile .peap-nav-menu__list > li { width: 100%; }
.peap-nav-menu.is-mobile .peap-nav-menu__submenu-toggle { display: inline-flex; float: right; }
.peap-nav-menu.is-mobile .sub-menu { box-shadow: none; padding-left: 1em; position: static; }
.peap-nav-menu.is-mobile .menu-item-has-children:hover > .sub-menu, .peap-nav-menu.is-mobile .menu-item-has-children:focus-within > .sub-menu { display: none; }
.peap-nav-menu.is-mobile .menu-item-has-children.is-open > .sub-menu { display: block; }

.peap-login { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; }
.peap-login__button, .peap-login input[type="submit"] { border: 0; cursor: pointer; display: inline-flex; padding: .65em 1em; text-decoration: none; }
.peap-login form { display: grid; gap: 10px; }

.peap-share-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.peap-share-buttons--stack { align-items: flex-start; flex-direction: column; }
.peap-share-buttons__button { align-items: center; display: inline-flex; padding: .6em .85em; text-decoration: none; }


.peap-related-posts__grid { display: grid; gap: var(--peap-related-gap, 24px); grid-template-columns: repeat(var(--peap-related-columns, 3), minmax(0, 1fr)); }
.peap-related-posts__heading { margin-top: 0; }

.peap-table-of-contents__list { display: grid; gap: .5em; list-style: none; margin: .75em 0 0; padding: 0; }
.peap-table-of-contents__item--level-3 { padding-left: 1em; }
.peap-table-of-contents__item--level-4 { padding-left: 2em; }
.peap-table-of-contents a { text-decoration: none; }
.peap-table-of-contents.is-collapsed .peap-table-of-contents__list { display: none; }

.peap-reading-progress { --peap-progress-size: 4px; background: rgba(0, 0, 0, .14); height: var(--peap-progress-size); overflow: hidden; width: 100%; }
.peap-reading-progress__fill { background: currentColor; display: block; height: 100%; transform: scaleX(var(--peap-reading-progress, 0)); transform-origin: left center; width: 100%; }
.peap-reading-progress--fixed { left: 0; position: fixed; top: 0; z-index: 9999; }
.peap-reading-progress--vertical { height: 160px; width: var(--peap-progress-size); }
.peap-reading-progress--vertical .peap-reading-progress__fill { height: 100%; transform: scaleY(var(--peap-reading-progress, 0)); transform-origin: center bottom; width: 100%; }

.peap-search-query { display: grid; gap: var(--peap-search-query-gap, 20px); }
.peap-search-query__item { align-items: start; display: flex; gap: 18px; }
.peap-search-query__image img { display: block; height: 96px; object-fit: cover; width: 96px; }
.peap-search-query__title { margin: 0 0 .45em; }
.peap-search-query__pagination ul { display: flex; gap: 8px; list-style: none; padding: 0; }

@media (max-width: 767px) { .peap-related-posts__grid { grid-template-columns: 1fr; } }

/* Share controls: scoped to this widget; brand selectors stay low-specificity so editor colors win. */
.peap-share-buttons__item { position: relative; display: inline-flex; max-width: 100%; }
.peap-share-buttons .peap-share-buttons__button { border: 0; margin: 0; font: inherit; line-height: 1; justify-content: center; gap: .5em; cursor: pointer; box-shadow: none; transition: color .18s, background-color .18s; }
.peap-share-buttons__button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.peap-share-buttons__icon { width: var(--peap-share-icon-size, 24px); height: var(--peap-share-icon-size, 24px); flex: none; fill: currentColor; display: block; }
:where(.peap-share-buttons[data-view="icon"]) .peap-share-buttons__button { padding: 16px; }
.peap-share-buttons[data-shape="square"] .peap-share-buttons__button { border-radius: 0; }
.peap-share-buttons[data-shape="rounded"] .peap-share-buttons__button { border-radius: var(--peap-share-radius, 10px); }
.peap-share-buttons[data-shape="circle"] .peap-share-buttons__button { border-radius: 999px; }
:where(.peap-share-buttons[data-color-mode="original"]:not([data-view="text"])) .peap-share-buttons__button { color: var(--peap-share-brand-fg, #fff); background-color: var(--peap-share-brand-bg, #6c757d); }
.peap-share-buttons__button--facebook { --peap-share-brand-bg: #1877f2; }
.peap-share-buttons__button--x { --peap-share-brand-bg: #000; }
.peap-share-buttons__button--linkedin { --peap-share-brand-bg: #0a66c2; }
.peap-share-buttons__button--kakao { --peap-share-brand-bg: #fee500; --peap-share-brand-fg: #191919; }
.peap-share-buttons__status { --peap-share-tooltip-bg: #222; position: absolute; z-index: 100; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); box-sizing: border-box; width: max-content; max-width: min(280px, calc(100vw - 24px)); padding: 8px 12px; border-radius: 6px; background: var(--peap-share-tooltip-bg); color: #fff; font-size: 13px; line-height: 1.5; text-align: center; overflow-wrap: anywhere; opacity: 0; visibility: hidden; pointer-events: none; }
.peap-share-buttons__status::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: calc(-5px + var(--peap-share-arrow-shift, 0px)); border: 5px solid transparent; border-top-color: var(--peap-share-tooltip-bg); }
.peap-share-buttons__status.is-visible { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .peap-share-buttons .peap-share-buttons__button { transition: none; } }

:where(button.peap-share-buttons__button) { background: transparent; color: inherit; }

/* TOC presets: plain retains the existing presentation. */
.peap-table-of-contents { --peap-toc-accent: #3158a8; --peap-toc-gap: .5em; --peap-toc-indent: 1em; --peap-toc-header-gap: .75em; }
.peap-table-of-contents[hidden] { display: none !important; }
.peap-table-of-contents__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.peap-table-of-contents__title { min-width: 0; }
.peap-table-of-contents .peap-table-of-contents__list { gap: var(--peap-toc-gap); margin-top: var(--peap-toc-header-gap); }
.peap-table-of-contents .peap-table-of-contents__item { padding: 0; margin: 0; margin-inline-start: calc(var(--peap-toc-depth, 0) * var(--peap-toc-indent)); }
.peap-table-of-contents__item > a { display: flex; align-items: baseline; gap: .65em; overflow-wrap: anywhere; }
.peap-toc-label { min-width: 0; }
.peap-toc-marker { flex-shrink: 0; color: var(--peap-toc-accent); font-variant-numeric: tabular-nums; }
.peap-table-of-contents__toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; flex-shrink: 0; cursor: pointer; font: inherit; }
.peap-toc-chevron { width: 8px; height: 8px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(45deg); }
.is-collapsed .peap-toc-chevron { transform: rotate(225deg); }
.peap-table-of-contents a:focus-visible, .peap-table-of-contents button:focus-visible { outline: 2px solid var(--peap-toc-accent); outline-offset: 3px; }
.peap-toc--box, .peap-toc--card { padding: 28px; border: 1px solid #dce1e8; border-radius: 4px; background: #fff; }
.peap-toc--card { border-radius: 16px; background: #f7f9fc; box-shadow: 0 6px 24px #182b4a0a; }
.peap-toc--rail { border-inline-start: 3px solid var(--peap-toc-accent); padding-inline-start: 20px; }
:where(.peap-table-of-contents:not(.peap-toc--plain)) .peap-table-of-contents__header { padding-bottom: 16px; border-bottom: 1px solid #dce1e8; font-size: 20px; font-weight: 700; }
:where(.peap-table-of-contents:not(.peap-toc--plain)) .peap-table-of-contents__item > a { padding: 9px 12px; border-radius: 6px; color: #263449; font-weight: 600; }
:where(.peap-table-of-contents:not(.peap-toc--plain)) .is-child > a { font-size: .92em; font-weight: 400; }
:where(.peap-table-of-contents:not(.peap-toc--plain)) .peap-table-of-contents__item > a:hover { background: #edf1f7; }
:where(.peap-table-of-contents:not(.peap-toc--plain)) .peap-table-of-contents__item > a.is-active { color: var(--peap-toc-accent); background: #eaf0fa; }
:where(.peap-table-of-contents:not(.peap-toc--plain)) .peap-table-of-contents__toggle { border: 0; background: transparent; color: inherit; padding: 6px; font-size: 12px; font-weight: 400; }
@media (max-width: 767px) {
 .peap-toc--box, .peap-toc--card { padding: 18px; }
 .peap-table-of-contents__header { flex-wrap: wrap; }
}

/* Preserve a visible keyboard focus even when hover colors are customized. */
.peap-nav-menu :is(a, button):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.peap-login :is(a, input, button):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.peap-search-query__body { min-width: 0; overflow-wrap: anywhere; }
.peap-search-query__image { flex-shrink: 0; max-width: 100%; }
.peap-search-query__image img { max-width: 100%; }
.peap-search-query__pagination ul { flex-wrap: wrap; }
.peap-search-query__pagination li > .page-numbers { display: inline-block; }
.peap-search-query a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }