/* 파트 이동 바 — 무료·유료 풀이 공용.
   풀이는 읽는 화면이다. 이건 그 위에 얹는 보조 장치라서
   본문을 가리지 않고, 읽는 동안에는 스스로 물러나야 한다.
   그래서 바닥에 꽉 찬 띠가 아니라 떠 있는 알약 하나로 둔다. */

/* display 를 지정한 요소는 [hidden] 을 무시한다(작성자 스타일이 UA 스타일을 이긴다).
   무료 페이지에는 전역 [hidden] 규칙이 없으므로 여기서 못 박는다. */
.part-nav[hidden], .part-nav-row[hidden], .part-nav-resume[hidden],
.part-sheet[hidden], .part-sheet-backdrop[hidden] { display: none !important; }

body.has-part-nav { padding-bottom: 64px; }

.part-nav {
  position: fixed; left: 50%; z-index: 70;
  bottom: calc(14px + env(safe-area-inset-bottom, 0));
  transform: translateX(-50%);
  width: var(--app-max-width);
  max-width: calc(100% - 28px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 8px;
}
.part-nav-row, .part-nav-resume, .part-nav-chat {
  border-radius: 999px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 22px rgba(28,36,48,.13), 0 0 0 1px rgba(28,36,48,.07);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
}
.part-nav {
  transition: opacity .22s ease, transform .22s ease;
}
.part-nav-chat { grid-column: 2; grid-row: 1; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; color: var(--report-accent-strong); cursor: pointer; }
.premium-body .part-nav, body[data-report-export] .part-nav { width: 412px; grid-template-columns: minmax(0, 1fr) 48px 48px; }
.part-nav-export { grid-column: 3; grid-row: 1; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px; color: #77433d; background: rgba(255,252,246,.98); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 6px 22px rgba(28,36,48,.13), 0 0 0 1px rgba(70,48,43,.09); cursor: pointer; }
.part-nav-row, .part-nav-resume { grid-column: 1; grid-row: 1; min-width: 0; }
/* 아래로 읽어 내려가는 동안에는 비켜 준다. 멈추거나 위로 올리면 돌아온다. */
.part-nav.part-nav-away { opacity: 0; transform: translateX(-50%) translateY(14px); pointer-events: none; }

.part-nav-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; }
.part-nav-step {
  display: grid; place-items: center; width: 44px; height: 48px; padding: 0;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--report-accent-strong); font: 300 24px/1 var(--sans); cursor: pointer;
  transition: color .15s ease;
}
.part-nav-step:disabled { color: color-mix(in srgb, var(--report-accent-strong) 24%, transparent); cursor: default; }

.part-nav-current {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 0; height: 48px; padding: 0 4px;
  border: 0; background: transparent; cursor: pointer;
}
.part-nav-icon { flex: 0 0 16px; width: 16px; height: 16px; color: var(--report-accent); }
.part-nav button:focus-visible { outline: 2px solid var(--report-accent); outline-offset: -3px; border-radius: 999px; }
.part-nav-label {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--report-ink); font: 600 14px/1.4 var(--sans); letter-spacing: -.025em;
}
.part-nav-count { flex: 0 0 auto; color: color-mix(in srgb, var(--report-accent-strong) 52%, transparent); font: 600 11px/1.4 var(--sans); letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* 이어 읽기 — 따로 띄우지 않고 같은 알약이 잠깐 다른 얼굴을 한다.
   별도 배너를 띄우면 그것대로 본문을 가린다. */
.part-nav-resume { display: flex; align-items: center; gap: 2px; }
.part-nav-resume-go {
  display: flex; flex: 1; align-items: center; justify-content: center; gap: 7px; min-width: 0; height: 48px; padding: 0 6px 0 18px;
  border: 0; background: transparent; cursor: pointer;
}
.part-nav-resume-go strong { flex-shrink: 0; color: var(--report-accent-strong); font: 700 14px/1.4 var(--sans); letter-spacing: -.02em; }
.part-nav-resume-go span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: color-mix(in srgb, var(--report-ink) 62%, transparent); font: 500 13px/1.4 var(--sans); letter-spacing: -.02em; }
.part-nav-resume-close { flex: 0 0 44px; width: 44px; height: 48px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: color-mix(in srgb, var(--report-accent-strong) 40%, transparent); font: 300 19px/1 var(--sans); cursor: pointer; }

/* 목차 — 아래에서 올라오는 시트. 항목이 진짜 <a> 라 링크 복사가 그냥 된다. */
.part-sheet-backdrop { position: fixed; inset: 0; z-index: 71; background: rgba(22,28,36,.34); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.part-sheet {
  position: fixed; left: 50%; bottom: 0; z-index: 72;
  transform: translateX(-50%);
  width: min(100%, var(--app-max-width));
  max-height: 76vh; overflow-y: auto;
  padding: 10px 14px calc(20px + env(safe-area-inset-bottom, 0));
  border-radius: 22px 22px 0 0; background: #fff;
  box-shadow: 0 -10px 40px rgba(24,32,44,.18);
  animation: part-sheet-in .22s cubic-bezier(.2,.8,.3,1);
}
.part-sheet::before { content: ""; display: block; width: 36px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: #dfe3ea; }
@keyframes part-sheet-in { from { transform: translateX(-50%) translateY(18px) } to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) { .part-sheet { animation: none } .part-nav { transition: none } }

.part-sheet-list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; counter-reset: part; }
.part-sheet-item {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: baseline; gap: 6px;
  padding: 13px 12px; border-radius: 12px;
  color: var(--report-ink); font: 500 16px/1.45 var(--sans); letter-spacing: -.03em;
  text-decoration: none; counter-increment: part;
}
.part-sheet-item::before { content: counter(part); color: color-mix(in srgb, var(--report-accent-strong) 40%, transparent); font: 600 12px/1.45 var(--sans); font-variant-numeric: tabular-nums; }
.part-sheet-item:hover { background: var(--report-accent-soft); }
.part-sheet-item[aria-current] { color: var(--report-accent-strong); font-weight: 700; }
.part-sheet-item[aria-current]::before { color: var(--report-accent-strong); }
/* 지난번에 읽던 곳. 목차 안에 표시만 하고 따로 띄우지 않는다. */
.part-sheet-item[data-last]::after { content: "지난번"; grid-column: 2; justify-self: start; margin-top: 3px; padding: 2px 7px; border-radius: 5px; background: #eef1f6; color: #6b7d95; font: 600 10px/1.5 var(--sans); letter-spacing: .04em; }
body.part-sheet-open { overflow: hidden; }

/* 다른 떠 있는 것들과 겹치지 않게 */
body.site-menu-locked .part-nav { display: none; }
body:has(.calc-overlay:not([hidden])) .part-nav { display: none; }

/* 유료 풀이의 부(部) 머리 — 누르는 줄이 아니라 묶음 이름이다 */
.part-sheet-group { padding: 16px 16px 6px; color: #a08a5f; font: 600 11.5px/1.4 var(--serif); letter-spacing: .12em; list-style: none; }
.part-sheet-group:first-child { padding-top: 6px; }

/* Contents and resume surfaces match the warm report paper. */
.part-nav-row,.part-nav-resume,.part-nav-chat,.part-nav-export{background:rgba(255,253,248,.98);box-shadow:0 5px 22px #55312d14,0 0 0 1px #ded5c7}.part-nav-count{color:var(--ui-muted)}.part-sheet{box-sizing:border-box;background:var(--ui-surface);border:1px solid var(--ui-line);border-bottom:0;max-height:76dvh;overscroll-behavior:contain}.part-sheet::before{background:var(--ui-line)}.part-sheet-list{gap:4px}.part-sheet-item{min-height:48px;align-items:center;padding:13px 12px;font-size:15px}.part-sheet-item[aria-current]{background:var(--ui-soft);color:var(--ui-action)}.part-sheet-item:focus-visible{outline:2px solid var(--ui-action);outline-offset:-2px}.part-sheet-item[data-last]::after{background:var(--ui-soft);color:var(--ui-gold)}.part-sheet-group{font-size:12px;color:var(--ui-gold)}
