/* 종합 풀이 상세(/saju/jonghap) — 이 화면에만 실린다.
 *
 * 색·서체·간격은 v9.css 의 `--st-*` 토큰을 그대로 쓴다. 새 색이나 새 서체를 들이지 않는다.
 * 제목은 명조(Gowun Batang), 나머지는 고딕(Noto Sans KR). 발췌 문장은 결과 화면과 같은
 * 읽는 본문(명조 17/30)이다. 12px 아래로 내리지 않는다.
 *
 * 한 줄 폭은 PC 에서도 430px(`.rn-mobile`). 좌우 여백은 `.st-pad` 하나(16px).
 */

.jh { --jh-shot-r: var(--st-r); }

/* ── 공통 글줄 ─────────────────────────────────────────────── */
.jh-eyebrow { margin: 0; font-size: 13px; line-height: 20px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--st-action-press); }
.jh-h2 { margin: 6px 0 0; font-family: var(--st-font-display); font-size: 26px; line-height: 36px;
  font-weight: 700; letter-spacing: -0.04em; color: var(--st-ink); }
.jh-lede { margin: 12px 0 0; font-size: 16px; line-height: 26px; color: var(--st-body); }
.jh-note { margin: 16px 0 0; font-size: 13px; line-height: 20px; color: var(--st-muted); }
.jh-link { font-weight: 700; color: var(--st-wood); text-decoration: underline;
  text-underline-offset: 3px; }

/* ── 첫 화면 ───────────────────────────────────────────────── */
.jh-hero { padding-top: 24px; padding-bottom: 28px; }
.jh-hero__title { margin: 6px 0 0; font-family: var(--st-font-display); font-size: 30px;
  line-height: 40px; font-weight: 700; letter-spacing: -0.045em; color: var(--st-ink); }
.jh-hero__lede { margin: 10px 0 0; font-size: 16px; line-height: 26px; color: var(--st-body); }
.jh-hero__art { margin: 18px 0 0; }
.jh-hero__art .rn-scene { aspect-ratio: 2 / 1; border-radius: var(--st-r); }

/* 값과 단추 한 줄. 값은 고딕 숫자(ST/PriceSummary)다. */
.jh-buy { margin-top: 18px; display: flex; align-items: center; gap: 16px; }
.jh-price { margin: 0; flex: 0 0 auto; font-size: 15px; line-height: 32px; font-weight: 700;
  color: var(--st-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jh-price b { font-size: 26px; letter-spacing: -0.03em; }
.jh-buy .jh-buy__cta, .jh-dock .jh-buy__cta { flex: 1 1 auto; min-width: 0; min-height: 52px;
  font-size: 16px; font-weight: 700; }
.jh-meta { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 13px;
  line-height: 20px; color: var(--st-muted); }
.jh-meta span + span::before { content: "·"; margin: 0 8px; color: var(--st-disabled); }
.jh-soon { margin-top: 18px; padding: 16px; border-radius: var(--st-r); background: var(--st-band); }
.jh-soon b { display: block; font-size: 16px; line-height: 24px; }
.jh-soon p { margin: 4px 0 12px; font-size: 14px; line-height: 22px; color: var(--st-body); }

/* ── 구역 ──────────────────────────────────────────────────── */
.jh-sec { padding-top: 40px; padding-bottom: 40px; border-top: 8px solid var(--st-band); }

/* ── 돈·일·관계·시기 ───────────────────────────────────────── */
/* 알약은 홈 「실제 풀이 사례」와 같은 것(`.st-case-tab`)이다. 넷이 한 줄에 같은 폭으로 선다. */
.jh-tabs { margin-top: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.jh .jh-tab { padding: 0 6px; font-size: 15px; }
.jh-panel { margin-top: 24px; }
.jh-panel[hidden] { display: none; }
.jh-panel__where { margin: 0; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--st-muted); }
.jh-panel__ask { margin: 4px 0 0; font-family: var(--st-font-ui); font-size: 20px; line-height: 30px;
  font-weight: 700; letter-spacing: -0.03em; color: var(--st-ink); }

/* 발췌 — 결과 화면과 같은 읽는 본문. 떨어진 두 문장은 따로 선다(이어 붙이지 않는다). */
.jh-quotes { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.jh-quote { margin: 0; padding: 1px 0 1px 16px; border-left: 2px solid var(--st-action); }
.jh-quote p { margin: 0; font-family: var(--st-font-display); font-size: 17px; line-height: 30px;
  font-weight: 400; letter-spacing: -0.01em; color: var(--st-read); }
.jh-quote strong { font-weight: 700; color: var(--st-ink); }
.jh-quotes__src { margin: 10px 0 0; font-size: 12px; line-height: 18px; color: var(--st-muted); }

/* ── 결과 화면 미리보기 창 ────────────────────────────────── */
/* 원본 716px 한 장을 창으로 보여 준다. 폰 폭(2배 화면)에서 1:1 이라 글자가 뭉개지지 않는다. */
.jh-shot { display: block; width: 100%; margin: 20px 0 0; padding: 0; overflow: hidden;
  border: 1px solid var(--st-line); border-radius: var(--jh-shot-r); background: #FFFFFF;
  color: var(--st-ink); font: inherit; text-align: left; text-decoration: none; cursor: zoom-in; }
.jh-shot__frame { display: block; background: #FFFFFF; }
.jh-shot__frame img { display: block; width: 100%; height: auto; object-fit: cover; }
.jh-shot__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 0 14px; border-top: 1px solid var(--st-line); font-size: 14px; line-height: 20px; }
.jh-shot__label { min-width: 0; color: var(--st-body); }
.jh-shot__go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  font-weight: 700; color: var(--st-wood); white-space: nowrap; }
.jh-shot:hover .jh-shot__go { text-decoration: underline; text-underline-offset: 3px; }

/* ── 10년과 12개월 ─────────────────────────────────────────── */
.jh-switch { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.jh .jh-switch__btn { font-size: 15px; }
.jh .jh-switch__btn[aria-pressed="true"] { border-color: var(--st-ink); background: var(--st-ink);
  color: #FFFFFF; font-weight: 700; }
.jh-switch + .jh-shot { margin-top: 12px; }

/* ── 다섯 생활 기준 ────────────────────────────────────────── */
.jh-lede + .jh-panel__where { margin-top: 20px; }
.jh-rules { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--st-line); }
.jh-rules li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: center;
  min-height: 52px; padding: 10px 0; border-bottom: 1px solid var(--st-line);
  font-size: 16px; line-height: 24px; font-weight: 600; color: var(--st-ink); }
.jh-rules__n { width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--st-line-field); border-radius: 6px; font-family: var(--st-font-display);
  font-size: 14px; font-weight: 700; line-height: 1; color: var(--st-action-press); }

/* ── 접어 둔 것(10장 · 목차 · 묻는 것) ──────────────────────── */
.jh-folds { margin-top: 20px; border-top: 1px solid var(--st-line); }
.jh-fold { border-bottom: 1px solid var(--st-line); }
.jh-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 14px 0; list-style: none; cursor: pointer;
  font-size: 16px; line-height: 24px; font-weight: 700; color: var(--st-ink); }
.jh-fold > summary::-webkit-details-marker { display: none; }
.jh-fold > summary > span { min-width: 0; }
.jh-fold__i { flex: 0 0 auto; color: var(--st-muted); transition: transform 0.2s ease; }
.jh-fold[open] .jh-fold__i { transform: rotate(180deg); }
.jh-fold__body { padding: 0 0 20px; }
.jh-fold__body > p { margin: 0; font-size: 15px; line-height: 25px; color: var(--st-body); }
.jh-fold__body > p + p { margin-top: 8px; }
.jh-fold__body > .jh-note { margin-top: 16px; font-size: 13px; line-height: 20px; color: var(--st-muted); }

/* 10장 — 두 줄 썸네일. 창은 가로 3 : 세로 2, 결과 카드의 윗부분이다. */
.jh-thumbs { margin: 4px 0 0; padding: 0; list-style: none; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.jh-thumb { display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--st-ink);
  font: inherit; text-align: left; text-decoration: none; cursor: zoom-in; }
.jh .jh-shot, .jh .jh-thumb { color: var(--st-ink); }
.jh-thumb__frame { position: relative; display: block; overflow: hidden; border: 1px solid var(--st-line);
  border-radius: 10px; background: #FFFFFF; }
.jh-thumb__frame img { display: block; width: 100%; height: auto; object-fit: cover; }
.jh-thumb__n { position: absolute; top: 8px; left: 8px; min-width: 28px; height: 22px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 6px; background: var(--st-ink); color: #FFFFFF;
  font-size: 12px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.jh-thumb__title { display: block; margin-top: 8px; font-size: 14px; line-height: 20px; font-weight: 600;
  letter-spacing: -0.02em; }

/* 7부 22장 */
.jh-outline { margin: 0; padding: 0; list-style: none; }
.jh-outline__part { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 12px 0;
  border-top: 1px solid var(--st-line); }
.jh-outline__part:first-child { padding-top: 2px; border-top: 0; }
.jh-outline__n { font-size: 13px; line-height: 24px; font-weight: 700; color: var(--st-action-press);
  font-variant-numeric: tabular-nums; }
.jh-outline__part b { display: block; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--st-ink); }
.jh-outline__part p { margin: 2px 0 0; font-size: 14px; line-height: 22px; color: var(--st-body); }

/* 다루지 않는 것 */
.jh-cannot ul { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 6px; }
.jh-cannot li { position: relative; padding-left: 16px; font-size: 15px; line-height: 24px; color: var(--st-ink); }
.jh-cannot li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 7px; height: 2px;
  background: var(--st-action); }

/* ── 마지막 단추 ───────────────────────────────────────────── */
.jh-final { padding-bottom: 44px; }
.jh-final .jh-buy { margin-top: 20px; }
.jh-legal { margin: 16px 0 0; font-size: 12px; line-height: 20px; color: var(--st-muted); }
.jh .jh-legal a { color: var(--st-body); text-decoration: underline; text-underline-offset: 2px; }

/* ── 아래 고정 단추 — 첫 화면 단추가 지나간 뒤에만 선다 ──────── */
/* 마지막 단추나 바닥글이 보이면 물러난다. 같은 단추 둘이 겹쳐 보이지 않게. */
.jh-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex;
  justify-content: center; pointer-events: none; }
.jh-dock__inner { width: min(100%, var(--st-app)); display: flex; align-items: center; gap: 16px;
  padding: 10px var(--st-gut) calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--st-line); background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -6px 18px rgba(33, 30, 27, 0.06); pointer-events: auto;
  transition: transform 0.22s ease, opacity 0.22s ease; }
.jh-dock[data-state="off"] .jh-dock__inner { transform: translateY(110%); opacity: 0; pointer-events: none; }
.jh-price--dock { font-size: 14px; line-height: 28px; }
.jh-price--dock b { font-size: 21px; }

/* ── 결과 화면 원본 보기 ───────────────────────────────────── */
/* 폰에서는 화면 전체, PC 에서는 원본 폭(716)이 들어가는 가운데 창. 머리·바닥 띠는 고정이라
   닫기·이동 단추가 스크롤에 밀려 화면 밖으로 나가지 않는다. */
.jh-viewer { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--st-bg); color: var(--st-ink); overflow: hidden; }
.jh-viewer[open] { display: flex; flex-direction: column; }
.jh-viewer::backdrop { background: rgba(20, 18, 16, 0.72); }
.jh-viewer__head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: 56px;
  padding: 6px 6px 6px var(--st-gut); border-bottom: 1px solid var(--st-line); }
.jh-viewer__title { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; align-items: baseline; gap: 8px;
  font-size: 15px; line-height: 22px; }
.jh-viewer__title b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.jh-viewer__n { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--st-action-press);
  font-variant-numeric: tabular-nums; }
.jh-viewer__mode { flex: 0 0 auto; min-height: 44px; padding: 0 14px; border: 1px solid var(--st-line-field);
  border-radius: 999px; background: #FFFFFF; color: var(--st-ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.jh-viewer__mode[aria-pressed="true"] { border-color: var(--st-ink); background: var(--st-ink); color: #FFFFFF; }
.jh-viewer__mode[hidden] { display: none; }
.jh-viewer__close { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--st-r); background: none; color: var(--st-ink); cursor: pointer; }
.jh-viewer__stage { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
  background: var(--st-band); touch-action: pan-x pan-y pinch-zoom; }
.jh-viewer__stage img { display: block; width: 100%; max-width: 716px; height: auto; margin: 0 auto;
  background: #FFFFFF; }
.jh-viewer[data-mode="actual"] .jh-viewer__stage img { width: 716px; max-width: none; margin: 0; }
.jh-viewer__foot { flex: 0 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 8px; min-height: 60px;
  padding: 8px var(--st-gut) calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--st-line); }
.jh-viewer__step { display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  min-height: 44px; padding: 0 14px 0 10px; border: 1px solid var(--st-line-field); border-radius: var(--st-r);
  background: #FFFFFF; color: var(--st-ink); font-size: 15px; font-weight: 700; cursor: pointer; }
.jh-viewer__step:last-child { padding: 0 10px 0 14px; }
.jh-viewer__hint { margin: 0; text-align: center; font-size: 12px; line-height: 18px; color: var(--st-muted); }
html.jh-lock, html.jh-lock body { overflow: hidden; }

@media (min-width: 800px) {
  .jh-viewer { width: 760px; height: min(92vh, 1100px); margin: auto; border-radius: var(--st-r-lg); }
}

@media (max-width: 370px) {
  .jh-hero__title { font-size: 28px; line-height: 38px; }
  .jh-h2 { font-size: 24px; line-height: 34px; }
  .jh-buy { gap: 12px; }
  .jh-price b { font-size: 24px; }
  .jh .jh-tab { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .jh-dock__inner, .jh-fold__i { transition: none; }
}