/* Reading the guide as a document or with 정본 service (split.js).
   Past 10% of the guide the lower part of the window blurs and asks; 정본 서비스로 보기 shows a short loading
   and then halves the window: this guide as it is on the left, the service engine on the right. */
html { scrollbar-gutter: stable; }
html.jb-asking { overflow: hidden; }

/* The blur fades in from its top edge, so the text above stays readable. */
.jb-veil {
  position: fixed; left: 0; right: 0; bottom: 0; height: 64vh; z-index: 30;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--paper) 72%, transparent) 30%);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26%); mask-image: linear-gradient(to bottom, transparent, #000 26%);
  opacity: 0; transition: opacity 0.35s ease; pointer-events: none;
}
.jb-ask {
  position: fixed; left: 50%; bottom: 14vh; z-index: 31; width: min(440px, calc(100vw - 32px));
  padding: 28px 28px 24px; background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.1); text-align: center;
  opacity: 0; transform: translate(-50%, 12px); transition: opacity 0.35s ease, transform 0.35s ease;
}
html.jb-asking .jb-veil { opacity: 1; pointer-events: auto; }
html.jb-asking .jb-ask { opacity: 1; transform: translate(-50%, 0); }
.jb-ask-title { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; color: var(--ink); }
.jb-ask-text { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.jb-ask-actions { display: grid; gap: 8px; margin-top: 22px; }
.jb-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 18px;
  border: 0; border-radius: 2px; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer;
}
.jb-btn-primary { background: var(--navy); color: var(--paper); }
.jb-btn-ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px var(--line); }
.jb-btn:hover { opacity: 0.9; }
.jb-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* The header stays at the top while the guide scrolls: ../site-top.css and ../site-top.js. */
.doc h2, .doc h3, .doc h4 { scroll-margin-top: 76px; }

/* The button beside the guide's title, at the right end of the title row; hidden while the engine is open.
   On a narrow screen it wraps under the title. */
.jb-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.jb-open { height: 40px; padding: 0 18px; gap: 8px; font-size: 15px; flex: none; }
html.jb-split .jb-open { display: none; }
/* From the start (html.jb-nudge): one soft ring widens out of the button, then its arrow nudges gently every 8 seconds. */
.jb-open { position: relative; }
.jb-open > span { display: inline-block; }
html.jb-nudge .jb-open::after {
  content: ""; position: absolute; inset: 0; border-radius: 2px; pointer-events: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--navy) 28%, transparent);
  animation: jb-ring 2s ease-out 0.8s 1;
}
html.jb-nudge .jb-open > span { animation: jb-nudge 8s ease-in-out 3s infinite; }
@keyframes jb-ring { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--navy) 28%, transparent); } to { box-shadow: 0 0 0 10px color-mix(in srgb, var(--navy) 0%, transparent); } }
@keyframes jb-nudge { 0%, 6%, 100% { transform: none; } 3% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { html.jb-nudge .jb-open::after, html.jb-nudge .jb-open > span { animation: none; } }

/* A short loading between the question and the split. */
.jb-loading {
  position: fixed; inset: 0; z-index: 40; display: grid; place-content: center; justify-items: center; gap: 16px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: var(--ink-2); font-size: 15px;
  opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
html.jb-loading-on .jb-loading { opacity: 1; pointer-events: auto; }
.jb-spinner { width: 28px; height: 28px; border: 2px solid var(--line); border-top-color: var(--navy); border-radius: 50%; animation: jb-spin 0.8s linear infinite; }
@keyframes jb-spin { to { transform: rotate(360deg); } }

/* The engine on the right half; the guide, unchanged, keeps the left half and scrolls as before.
   On a phone the engine covers the page, and a citation brings the guide back. */
.jb-pane {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 20; width: 100vw; display: flex; flex-direction: column;
  background: var(--paper); border-left: 1px solid var(--line);
  transform: translateX(100%); visibility: hidden; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0s linear 0.4s;
}
html.jb-split .jb-pane { transform: none; visibility: visible; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0s; }
/* Exactly as tall as the site header on the left (--jb-top-h, measured by split.js), with the same hairline drawn the
   same way (a 1px shadow under the box), so the two lines are one line. */
.jb-pane-head {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none;
  box-sizing: border-box; height: var(--jb-top-h, 51px);
  padding: 0 12px 0 20px; box-shadow: 0 1px 0 var(--line, var(--hairline)); font-size: 14px; color: var(--ink-2);
}
/* While the engine is open the site header shows its hairline even at the top, matching the pane's. */
html.jb-split header.top { box-shadow: 0 1px 0 var(--line, var(--hairline)); }
.jb-pane-head b { color: var(--ink); font-weight: 600; }
.jb-close { border: 0; background: none; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; padding: 6px 8px; }
.jb-close:hover { color: var(--ink); }
.jb-pane iframe { flex: 1; width: 100%; border: 0; display: block; }
@media (min-width: 900px) {
  .jb-pane { width: 50vw; }
  html.jb-split body { padding-right: 50vw; }
}
/* The part the engine cited, until the next citation. */
.jb-mark { background: color-mix(in srgb, var(--navy) 8%, transparent); box-shadow: -12px 0 0 color-mix(in srgb, var(--navy) 8%, transparent), 12px 0 0 color-mix(in srgb, var(--navy) 8%, transparent); transition: background-color 0.3s ease; }

@media (prefers-reduced-motion: reduce) {
  .jb-veil, .jb-ask, .jb-loading, .jb-pane { transition: none !important; }
  .jb-spinner { animation-duration: 2s; }
}
@media print {
  .jb-veil, .jb-ask, .jb-loading, .jb-pane { display: none !important; }
  html.jb-split body { padding-right: 0; }
  .jb-mark { background: none; box-shadow: none; }
}