@charset "UTF-8";
/* ============================================================================
   oh-law.co.kr — 상속 클러스터 스타일시트
   /assets/inheritance.css

   대상: /inheritance/ 이하 필러 페이지 및 스포크 페이지
   버전: 1.0 (2026-08-22)

   [구성]
   0. 토큰
   1. 리셋 · 기본 타이포그래피
   2. 레이아웃
   3. 문서 헤더 (브레드크럼 · H1 · 메타)
   4. 핵심 답변 박스        ← 인용 타깃 블록
   5. 목차
   6. 본문 (제목 · 문단 · 표 · 목록 · 링크)
   7. 근거 블록 · 실무 메모
   8. 클러스터 목록 (필러 전용)
   9. FAQ
  10. 작성자 박스
  11. CTA
  12. 관련 글 · 면책
  13. 유틸리티
  14. 반응형 · 접근성 · 인쇄
   ========================================================================= */


/* ── 0. 토큰 ───────────────────────────────────────────────────────────── */
:root {
  /* 색 */
  --ol-navy:        #1E2A4A;
  --ol-navy-soft:   #33405F;
  --ol-cream:       #F5F1EA;
  --ol-cream-deep:  #FBFAF8;
  --ol-gold:        #C9A961;
  --ol-line:        #E3E0DA;
  --ol-text:        #25262B;
  --ol-text-soft:   #3A3C43;
  --ol-muted:       #6B6E76;
  --ol-bg:          #FFFFFF;

  /* 서체 */
  --ol-serif:  "Noto Serif KR", "Nanum Myeongjo", Georgia, serif;
  --ol-sans:   "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont,
               "Segoe UI", system-ui, sans-serif;
  --ol-mono:   "JetBrains Mono", "D2Coding", ui-monospace, SFMono-Regular, monospace;

  /* 치수 */
  --ol-measure: min(720px, 92vw);
  --ol-radius:  2px;

  /* 간격 스케일 */
  --ol-s1: .4rem;
  --ol-s2: .75rem;
  --ol-s3: 1.2rem;
  --ol-s4: 1.75rem;
  --ol-s5: 2.5rem;
  --ol-s6: 3.5rem;
}


/* ── 1. 리셋 · 기본 타이포그래피 ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ol-bg);
  color: var(--ol-text);
  font-family: var(--ol-sans);
  font-size: 17px;
  line-height: 1.85;
  word-break: keep-all;      /* 한글 단어 단위 줄바꿈 */
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ol-navy); text-underline-offset: .18em; }
a:hover { color: var(--ol-gold); }
a:focus-visible {
  outline: 2px solid var(--ol-gold);
  outline-offset: 2px;
  border-radius: var(--ol-radius);
}


/* ── 2. 레이아웃 ──────────────────────────────────────────────────────── */
.ol-wrap {
  width: var(--ol-measure);
  margin: 0 auto;
  padding: 2rem 0 5rem;
}


/* ── 3. 문서 헤더 ─────────────────────────────────────────────────────── */
.ol-crumb {
  font-size: .82rem;
  color: var(--ol-muted);
  margin-bottom: var(--ol-s4);
  line-height: 1.6;
}
.ol-crumb a { color: inherit; text-decoration: none; }
.ol-crumb a:hover { color: var(--ol-navy); text-decoration: underline; }

h1 {
  font-family: var(--ol-serif);
  font-size: clamp(1.6rem, 4.5vw, 2.2rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.02em;
  margin: 0 0 var(--ol-s2);
}

.ol-meta {
  font-size: .85rem;
  color: var(--ol-muted);
  border-bottom: 1px solid var(--ol-line);
  padding-bottom: var(--ol-s3);
  margin: 0 0 var(--ol-s5);
  line-height: 1.7;
}
.ol-meta strong { color: var(--ol-text); font-weight: 600; }


/* ── 4. 핵심 답변 박스 ────────────────────────────────────────────────────
   이 페이지에서 가장 중요한 블록입니다. AI가 실제로 인용하는 구간이므로
   시각적으로도 다른 요소보다 먼저 읽히도록 배치합니다.
   ------------------------------------------------------------------------ */
.ol-answer {
  background: var(--ol-cream);
  border-left: 3px solid var(--ol-gold);
  padding: var(--ol-s3) 1.5rem;
  margin: 0 0 var(--ol-s5);
  border-radius: var(--ol-radius);
}
.ol-answer h2 {
  font-family: var(--ol-sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ol-gold);
  text-transform: uppercase;
  margin: 0 0 var(--ol-s1);
  padding: 0;
}
.ol-answer p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.8;
}
.ol-answer p + p { margin-top: var(--ol-s2); }


/* ── 5. 목차 ──────────────────────────────────────────────────────────── */
.ol-toc {
  border: 1px solid var(--ol-line);
  border-radius: var(--ol-radius);
  padding: var(--ol-s3) 1.5rem;
  margin: 0 0 var(--ol-s5);
}
.ol-toc strong {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ol-muted);
  margin-bottom: var(--ol-s1);
}
.ol-toc ol { margin: 0; padding-left: 1.2rem; }
.ol-toc li { margin: .25rem 0; }
.ol-toc a { color: var(--ol-navy); text-decoration: none; }
.ol-toc a:hover { text-decoration: underline; }


/* ── 6. 본문 ──────────────────────────────────────────────────────────── */
h2 {
  font-family: var(--ol-serif);
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.01em;
  margin: var(--ol-s6) 0 1rem;
  padding-top: .5rem;
  scroll-margin-top: 1.5rem;   /* 목차 앵커 점프 시 제목이 잘리지 않도록 */
}

h3 {
  font-family: var(--ol-sans);
  font-size: 1.08rem;
  font-weight: 700;
  margin: var(--ol-s4) 0 var(--ol-s1);
  scroll-margin-top: 1.5rem;
}

p { margin: 0 0 1.1rem; }

ul, ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
li { margin: .3rem 0; }

strong { font-weight: 700; }

hr {
  border: 0;
  border-top: 1px solid var(--ol-line);
  margin: var(--ol-s5) 0;
}

/* 표 — 반드시 실제 표 마크업을 쓸 것. 이미지 표는 인용되지 않습니다. */
table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--ol-s4) 0;
  font-size: .94rem;
  line-height: 1.7;
}
caption {
  caption-side: top;
  text-align: left;
  font-size: .84rem;
  color: var(--ol-muted);
  padding-bottom: var(--ol-s1);
}
th, td {
  border: 1px solid var(--ol-line);
  padding: .7rem .8rem;
  text-align: left;
  vertical-align: top;
}
th {
  background: var(--ol-cream);
  font-weight: 600;
}
tbody tr:nth-child(even) td { background: var(--ol-cream-deep); }

/* 좁은 화면에서 표가 잘리지 않도록 감싸는 컨테이너 */
.ol-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--ol-s4) 0;
}
.ol-table-scroll table { margin: 0; }


/* ── 7. 근거 블록 · 실무 메모 ─────────────────────────────────────────── */

/* 법령·판례 인용. 조문 전문보다 요지 + 조문번호가 인용에 유리합니다. */
.ol-source {
  border: 1px solid var(--ol-line);
  border-top: 2px solid var(--ol-navy);
  background: var(--ol-cream-deep);
  padding: 1.1rem 1.3rem;
  margin: var(--ol-s4) 0;
  font-size: .93rem;
  line-height: 1.75;
}
.ol-source cite {
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: .88rem;
  color: var(--ol-navy);
  margin-bottom: var(--ol-s1);
}
.ol-source p:last-child { margin-bottom: 0; }

/* 변호사 1인칭 실무 경험. 경쟁 콘텐츠가 구조적으로 쓸 수 없는 부분입니다. */
.ol-note {
  border-left: 3px solid var(--ol-navy);
  padding: .2rem 0 .2rem 1.2rem;
  margin: var(--ol-s4) 0;
  color: var(--ol-text-soft);
}
.ol-note strong {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ol-navy);
  margin-bottom: var(--ol-s1);
}
.ol-note p:last-child { margin-bottom: 0; }


/* ── 8. 클러스터 목록 (필러 페이지 전용) ──────────────────────────────────
   ItemList 스키마의 항목과 화면 목록이 일치해야 합니다.
   ------------------------------------------------------------------------ */
.ol-cluster {
  margin: var(--ol-s5) 0;
  padding: var(--ol-s3) 1.5rem;
  background: var(--ol-cream);
  border-radius: var(--ol-radius);
}
.ol-cluster h2 {
  font-size: 1.1rem;
  margin: 0 0 var(--ol-s2);
  padding: 0;
}
.ol-cluster ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ol-cluster li {
  padding: .6rem 0;
  border-bottom: 1px solid var(--ol-line);
  font-size: .94rem;
  line-height: 1.7;
  color: var(--ol-muted);
}
.ol-cluster li:last-child { border-bottom: 0; }
.ol-cluster li a {
  font-weight: 600;
  color: var(--ol-navy);
  text-decoration: none;
}
.ol-cluster li a:hover { text-decoration: underline; }


/* ── 9. FAQ ───────────────────────────────────────────────────────────────
   화면 텍스트와 FAQPage 스키마의 acceptedAnswer.text 가
   글자 단위로 일치해야 합니다.
   ------------------------------------------------------------------------ */
.ol-faq { margin-top: var(--ol-s6); }
.ol-faq > h2 { margin-top: 0; }

.ol-faq details {
  border-bottom: 1px solid var(--ol-line);
  padding: 1rem 0;
}
.ol-faq summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  line-height: 1.7;
}
.ol-faq summary::-webkit-details-marker { display: none; }
.ol-faq summary::before {
  content: "Q. ";
  color: var(--ol-gold);
  font-weight: 700;
}
.ol-faq summary:focus-visible {
  outline: 2px solid var(--ol-gold);
  outline-offset: 3px;
}
.ol-faq details p {
  margin: var(--ol-s2) 0 0;
  color: var(--ol-text-soft);
}
.ol-faq details[open] summary { color: var(--ol-navy); }


/* ── 10. 작성자 박스 ──────────────────────────────────────────────────── */
.ol-author {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin: var(--ol-s6) 0 0;
  padding: 1.5rem;
  background: var(--ol-cream);
  border-radius: var(--ol-radius);
}
.ol-author img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.ol-author .n { font-weight: 700; font-size: 1.02rem; }
.ol-author .r {
  font-size: .86rem;
  color: var(--ol-muted);
  margin: .15rem 0 .55rem;
}
.ol-author .b {
  font-size: .9rem;
  line-height: 1.7;
  margin: 0;
}


/* ── 11. CTA ──────────────────────────────────────────────────────────── */
.ol-cta {
  margin: var(--ol-s5) 0 0;
  padding: var(--ol-s4);
  border: 1px solid var(--ol-navy);
  border-radius: var(--ol-radius);
  text-align: center;
}
.ol-cta p { margin: 0 0 1rem; font-size: .96rem; }
.ol-cta a {
  display: inline-block;
  background: var(--ol-navy);
  color: #fff;
  text-decoration: none;
  padding: .8rem 2rem;
  border-radius: var(--ol-radius);
  font-weight: 600;
  transition: background .15s ease;
}
.ol-cta a:hover { background: var(--ol-navy-soft); color: #fff; }


/* ── 12. 관련 글 · 면책 ───────────────────────────────────────────────── */
.ol-related {
  margin-top: var(--ol-s6);
  border-top: 1px solid var(--ol-line);
  padding-top: var(--ol-s4);
}
.ol-related strong {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ol-muted);
  margin-bottom: var(--ol-s2);
}
.ol-related ul { margin: 0; padding-left: 1.1rem; }
.ol-related li { margin: .35rem 0; font-size: .94rem; }
.ol-related a { color: var(--ol-navy); }

.ol-disclaimer {
  margin-top: var(--ol-s5);
  font-size: .82rem;
  line-height: 1.7;
  color: var(--ol-muted);
}


/* ── 13. 유틸리티 ─────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ol-num { font-family: var(--ol-mono); font-variant-numeric: tabular-nums; }


/* ── 14. 반응형 · 접근성 · 인쇄 ───────────────────────────────────────── */
@media (max-width: 600px) {
  body { font-size: 16px; line-height: 1.8; }
  .ol-wrap { padding: 1.5rem 0 3.5rem; }
  .ol-answer,
  .ol-toc,
  .ol-cluster { padding-left: 1.1rem; padding-right: 1.1rem; }
  .ol-author { flex-direction: column; }
  h2 { margin-top: var(--ol-s5); }
  th, td { padding: .55rem .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .ol-cta, .ol-related, .ol-toc { display: none; }
  body { font-size: 11pt; color: #000; }
  .ol-wrap { width: 100%; padding: 0; }
  .ol-answer { border-left: 2px solid #000; background: none; }
  .ol-faq details { display: block; }
  .ol-faq details > * { display: block; }   /* 인쇄 시 답변 모두 펼침 */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ── 14. 전환 CTA (광고 착지용) ───────────────────────────────────────── */
.ol-cta-top {
  margin: var(--ol-s4) 0;
  padding: var(--ol-s3) var(--ol-s4);
  background: var(--ol-cream-deep);
  border: 1px solid var(--ol-gold);
  border-radius: var(--ol-radius);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.2rem;
}
.ol-cta-top p {
  margin: 0;
  flex: 1 1 260px;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--ol-text-soft);
}
.ol-cta-top .ol-btns { display: flex; gap: .5rem; flex: 0 0 auto; }
.ol-cta-top a {
  display: inline-block;
  padding: .72rem 1.4rem;
  border-radius: var(--ol-radius);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .15s ease;
}
.ol-cta-top a.call { background: var(--ol-navy); color: #fff; }
.ol-cta-top a.form { background: var(--ol-gold); color: #fff; }
.ol-cta-top a:hover { opacity: .88; color: #fff; }

.ol-cta .ol-btns { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.ol-cta .ol-btn-call { background: var(--ol-navy); }
.ol-cta .ol-btn-call + a { background: var(--ol-gold); }
.ol-cta .ol-btn-call + a:hover { background: var(--ol-gold); color: #fff; opacity: .88; }

.ol-bcta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 99;
  background: #fff;
  border-top: 1px solid var(--ol-line);
  box-shadow: 0 -4px 20px rgba(0,0,0,.10);
  display: flex;
  gap: 10px;
  padding: 10px 14px;
}
.ol-bcta a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px;
  border-radius: 10px;
  font-weight: 800;
  font-size: .92rem;
  text-decoration: none;
}
.ol-bcta .p { background: var(--ol-navy); color: #fff; }
.ol-bcta .f { background: var(--ol-gold); color: #fff; }

@media (min-width: 768px) { .ol-bcta { display: none; } }
@media (max-width: 767px) {
  body { padding-bottom: 70px; }
  .ol-cta-top { flex-direction: column; align-items: stretch; }
  .ol-cta-top p { flex: 0 0 auto; }
  .ol-cta-top .ol-btns { width: 100%; }
  .ol-cta-top .ol-btns a { flex: 1; text-align: center; }
}