/* [프로젝트 확장] WordPress integration only; reference motion remains authoritative. */
/* WP global body styles are block-theme chrome; reference controls this route. */
body.mp-reference { margin: 0; padding: 0; background: transparent; color: var(--text); font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: var(--t-body); line-height: var(--lh-body); }
body.mp-reference.admin-bar #siteHeader { top: 32px; }
@media(max-width:782px) { body.mp-reference.admin-bar #siteHeader { top: 46px; } }

/* [프로젝트 확장] Core's .has-fixed-layout selector outranks the reference's
   .prose table and forces equal columns/word splitting. Preserve the authored
   table DOM while applying the reference's auto layout and horizontal rules. */
.prose .wp-block-table .has-fixed-layout { table-layout: auto; }
.prose .wp-block-table th, .prose .wp-block-table td {
  word-break: keep-all;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
.prose .wp-block-table th:first-child, .prose .wp-block-table td:first-child {
  border-right: 1px solid rgba(255,255,255,.07);
}
.prose .wp-block-table thead { border-bottom: 0; }
.prose .wp-block-table tfoot { border-top: 0; }

/* [프로젝트 확장] NFD list defaults add .8rem above the first nested item.
   The reference starts each list at zero and spaces only li + li (7px). */
.prose li:first-child { margin-top: 0; }

/* [프로젝트 확장] The header owns its hit areas and decoration, including
   hover/focus. Decorative glass must never become a mouse target. */
#siteHeader a, .mp-mobile-menu a { text-decoration: none; }
#siteHeader .head-glass { pointer-events: none; }
#siteHeader .head-nav > span > a { display: inline-flex; align-items: center; min-height: 36px; }
#siteHeader .nav-has-sub { cursor: pointer; }
#siteHeader:focus-within { transform: none; }
body.mp-reference .page-title,
body.mp-reference .sec-title,
body.mp-reference .panel-title { color: var(--text); }

/* [프로젝트 확장] One mobile navigation contract for the top and scrolled header.
   A native modal lives outside transformed content; its list scrolls naturally. */
:root { --mp-touch: 44px; --mp-mobile-gap: 20px; --mp-mobile-title-lines: 3; }
.mp-menu-toggle, .mp-menu-close {
  align-items: center; justify-content: center; width: var(--mp-touch); height: var(--mp-touch);
  padding: 0; background: transparent; color: var(--text); border: 0; border-radius: 50%; cursor: pointer;
}
.mp-menu-toggle { display: none; }
.mp-menu-close { display: inline-flex; }
.mp-menu-toggle:focus-visible, .mp-menu-close:focus-visible, .mp-mobile-menu a:focus-visible {
  outline: 2px solid var(--accent-3); outline-offset: 3px;
}
.mp-mobile-menu {
  position: fixed; inset: 0; margin: 0; padding: 0 var(--gutter) max(32px, env(safe-area-inset-bottom));
  width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none;
  border: 0; color: var(--text); background: #050918; overscroll-behavior: contain;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
}
.mp-mobile-menu::backdrop { background: #050918; }
.mp-menu-top {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--header-top-pad); padding-bottom: 18px; background: #050918;
}
.mp-mobile-menu ul { list-style: none; padding: 0; margin: 0; }
.mp-menu-pages > li { border-top: 1px solid var(--line); padding-block: 12px; }
.mp-menu-pages > li > a { font-family: "A2Z", sans-serif; font-size: var(--t-h3); font-weight: 700; }
.mp-mobile-menu a { display: flex; align-items: center; min-height: var(--mp-touch); width: fit-content; color: var(--text); }
.mp-mobile-menu a[aria-current] { color: var(--accent-3); }
.mp-mobile-menu .mp-menu-categories { padding-left: 16px; padding-bottom: 8px; }
.mp-menu-categories > li > a { font-size: var(--t-body); font-weight: 600; }
.mp-reference #main, .mp-reference > footer { transform-origin: center top; }

@media (max-width: 767px) {
  #siteHeader .head-nav { display: none; }
  .mp-menu-toggle { display: inline-flex; }
  .head-row { gap: 16px; padding-inline: 0; }
  #siteHeader[data-scrolled="true"] .head-row { padding-inline: 16px; }
  .lead-head, .finder-row { gap: var(--mp-mobile-gap); }
  .lead-head .search, .finder .search, .list-head--search .search { flex: 0 0 100%; width: 100%; max-width: none; }
  .cat-head { flex-direction: column; align-items: stretch; gap: var(--mp-mobile-gap); }
  .cat-head > .btn { align-self: flex-end; }
  .rail-cta { width: fit-content; align-self: flex-end; }
  .mp-share-bottom { display: flex; justify-content: flex-end; }
  /* Left-aligned about hero keeps its CTA on the same content alignment. */
  .lead-grid > *, .lead-grid .card, .lead-grid .card-body { min-width: 0; }
  .lead-grid .card { height: auto; }
  .lead-grid .card-media { flex: 0 0 auto; }
  .lead-grid .card-thumb { height: auto; min-height: 0; aspect-ratio: 16 / 9; flex: 0 0 auto; }
  .lead-grid .card-body { padding: var(--card-pad); }
  .lead-grid .card-title, .lead-grid .card-title a { font-size: var(--t-card-title); font-weight: 400; }
  .lead-grid .card-title a { -webkit-line-clamp: var(--mp-mobile-title-lines); min-height: calc(var(--mp-mobile-title-lines) * 1em * var(--lh-head)); }
  .lead-grid .card-excerpt { font-size: var(--t-cap); -webkit-line-clamp: 2; min-height: 3.2em; margin-top: 8px; }
  .lead-grid .card-meta { font-size: var(--t-cap); }
}

/* [프로젝트 확장] Landing UserCursor: 28px arrow, -14deg, two distinct springs,
   Hello in D2Coding, exact default label metrics. Pointer events always pass through.
   Scoped !important wins over theme/plugin link cursor rules only while active. */
.mp-ref-cursor { position: fixed; inset: 0; z-index: 2000; pointer-events: none; opacity: 0; transition: opacity .18s cubic-bezier(.22,1,.36,1); }
.mp-ref-cursor.is-on { opacity: 1; }
.mp-ref-cursor, .mp-ref-cursor * { pointer-events: none; }
.mp-ref-cursor-arrow, .mp-ref-cursor-label { position: absolute; top: 0; left: 0; user-select: none; will-change: transform; }
.mp-ref-cursor-label span {
  display: inline-flex; align-items: center; border-radius: 9999px; background: #0050FF; color: #fff;
  font-family: d2coding, "D2Coding", monospace; font-size: 14px; font-weight: 500; line-height: 1;
  padding: 5.04px 12.04px; transform: translate(25.2px,11.6px); box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
@media (pointer: fine) {
  body.mp-reference.mp-cursor-active, body.mp-reference.mp-cursor-active * { cursor: none !important; }
}
@media (prefers-reduced-motion: reduce) { .mp-ref-cursor { transition: none; } }

/* [프로젝트 확장] Plugin CSS adds 6px padding, white side borders, negative
   margins and center alignment that do not exist in the approved article mockup. */
.mp-reference .relpost-block-single { padding: 0; margin: 0; border: 0; float: none; text-align: left; }
.mp-reference .relpost-block-single, .mp-reference .relpost-block-single:hover { background: var(--glass-fall), var(--glass-tint); }
.mp-reference .relpost-block-single-text { margin: 0; }
.mp-reference .relpost-block-single-image { background-position: center !important; }

/* [프로젝트 확장] Restore the existing authored copy control, overriding the
   reference's broad code-block-pro selector that also styled the icon as a code box. */
.prose .code-block-pro-copy-button.mp-copy-ready {
  position: absolute; display: inline-flex !important; align-items: center; justify-content: center;
  top: 6px; right: 8px; width: 40px; height: 40px; min-width: 40px; z-index: 2;
  margin: 0; padding: 0 !important; border: 0; border-radius: 8px; color: var(--text) !important;
  background: var(--code-bg) !important; overflow: hidden !important; cursor: pointer;
}
.prose .code-block-pro-copy-button-pre { display: none; }
.mp-copy-ready .with-check { display: none; }
.mp-copy-ready.is-copied .with-check { display: block; }
.mp-copy-ready.is-copied .without-check { display: none; }
.mp-copy-ready:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 2px; }
#mp-scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 950; width: 100%; height: 2px;
  transform: scaleX(0); transform-origin: left center; pointer-events: none;
  background: linear-gradient(90deg,var(--accent),var(--accent-3));
}
body.admin-bar #mp-scroll-progress { top: 32px; }
@media (max-width: 782px) { body.admin-bar #mp-scroll-progress { top: 46px; } }

/* [프로젝트 확장] Preserve authored diagram columns; scroll only the code block.
   Ordinary text examples retain the approved reference's wrapping behavior. */
.prose pre.mp-ascii-diagram code { white-space: pre; }

/* [프로젝트 확장] Fade the full-screen menu; slide each link in reading order.
   Opacity/transform only, with short closing motion and reduced-motion fallback. */
:root { --mp-menu-fade: 240ms; --mp-menu-enter: 420ms; --mp-menu-step: 35ms; --mp-menu-exit: 180ms; --mp-menu-shift: 24px; }
.mp-mobile-menu[open] { animation: mp-menu-fade var(--mp-menu-fade) var(--ease) both; }
.mp-mobile-menu[open]::backdrop { animation: mp-menu-fade var(--mp-menu-fade) var(--ease) both; }
.mp-mobile-menu[open] .mp-menu-pages a {
  animation: mp-menu-enter var(--mp-menu-enter) var(--ease) both;
  animation-delay: calc(60ms + var(--mp-menu-order, 0) * var(--mp-menu-step));
}
.mp-mobile-menu.mp-menu-exiting { animation: mp-menu-fade-out var(--mp-menu-exit) ease-in both; }
.mp-mobile-menu.mp-menu-exiting::backdrop { animation: mp-menu-fade-out var(--mp-menu-exit) ease-in both; }
.mp-mobile-menu.mp-menu-exiting .mp-menu-pages a { animation: none; }
@keyframes mp-menu-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mp-menu-enter { from { opacity: 0; transform: translateX(calc(-1 * var(--mp-menu-shift))); } to { opacity: 1; transform: translateX(0); } }
@keyframes mp-menu-fade-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mp-mobile-menu[open], .mp-mobile-menu[open]::backdrop, .mp-mobile-menu[open] .mp-menu-pages a { animation: none; }
}

/* [프로젝트 확장] Text links need a persistent non-color cue on touch screens.
   One treatment for authored prose, about/career links, contact values and legal links. */
.mp-reference :is(.prose, .page-panel) a[href]:not(.btn):not(.wp-block-button__link):not(:has(img)),
.mp-reference .contact-card .contact-value,
.mp-reference .foot-link {
  color: var(--accent-3);
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, currentColor 65%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-skip-ink: auto;
  transition: color var(--dur-1) var(--ease), text-decoration-color var(--dur-1) var(--ease);
}
.mp-reference :is(.prose, .page-panel) a[href]:not(.btn):not(.wp-block-button__link):not(:has(img)):is(:hover, :focus-visible),
.mp-reference .contact-card:is(:hover, :focus-visible) .contact-value,
.mp-reference .foot-link:is(:hover, :focus-visible) {
  color: var(--text);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
/* Existing emphasis/code rules otherwise turn part of a link back into body text. */
.mp-reference :is(.prose, .page-panel) a[href] :is(strong, em, code) { color: inherit; }