/* 지주택 안내 허브(guide.html)·하위 페이지(guide/…). tools/build-guide-pages.py 가 만드는 마크업 전용.
   규칙(사용자 결정 2026-11-09): 컨테이너는 한 겹만. 본문은 흰 카드 하나(1px --line, 큰 radius)이고,
   카드 안에는 바탕색·테두리 상자를 두지 않고 소제목과 간격으로만 나눈다. 보조 링크는 텍스트 링크(→). 회색 위주 */
.gp { padding-top: clamp(24px, 3.4vw, 40px); }
.gp-crumbs { margin-bottom: 14px; }
.gp-crumbs span[aria-current] { color: var(--muted); }
.gp-head { max-width: 820px; }
.gp-kicker { font-size: 13px; font-weight: 700; color: var(--muted); }
.gp-head h1 { margin-top: 6px; font-size: clamp(26px, 3vw, 34px); font-weight: 700; line-height: 1.3; letter-spacing: -.035em; }
.gp-lead { margin-top: 10px; font-size: 15.5px; line-height: 1.75; color: var(--body); }

.gp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; align-items: start; margin-top: 24px; }
.gp-main { min-width: 0; }

/* 카드(한 겹) */
.gp-card { padding: 30px 32px 34px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.gp-hub .gp-card { margin-top: 18px; scroll-margin-top: 96px; }
.gp-card > h2, .gp-sec > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.gp-card > h2 small, .gp-sec > h2 small { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.gp-card > p { margin-top: 10px; font-size: 15px; line-height: 1.8; color: #33373e; }

/* 본문 칸: 소제목과 간격으로만 나눈다 */
.gp-sec { scroll-margin-top: 96px; }
.gp-sec + .gp-sec { margin-top: 44px; }
.gp-sec > p, .gp-sec p { margin-top: 10px; font-size: 15px; line-height: 1.8; color: #33373e; }
.gp-sec h3 { margin-top: 24px; font-size: 14px; font-weight: 700; color: var(--muted); }
.gp-sec > h2 + h3, .gp-sec > h2 + .gp-live + h3 { margin-top: 16px; }

.gp-list { margin-top: 8px; }
.gp-list li { position: relative; padding: 3px 0 3px 14px; font-size: 15px; line-height: 1.75; color: #33373e; }
.gp-list li::before { content: ""; position: absolute; left: 2px; top: .95em; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-line); }
.gp-ticks li { padding-left: 22px; }
.gp-ticks li::before { left: 4px; top: .6em; width: 5px; height: 9px; border: solid var(--muted); border-width: 0 1.6px 1.6px 0; border-radius: 0; background: none; transform: rotate(45deg); }
.gp-law li { font-size: 14px; color: var(--body); }
.gp-basis { margin-top: 10px !important; font-size: 12.5px !important; line-height: 1.6 !important; color: var(--muted) !important; }
.gp-basis span { font-weight: 700; margin-right: 2px; }
.gp-check { margin-top: 14px !important; font-size: 13px !important; line-height: 1.65 !important; color: var(--accent-ink) !important; font-weight: 600; }
.gp-more { margin-top: 14px !important; font-size: 14px !important; font-weight: 700; }
.gp-more a { color: var(--body); }
.gp-more a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* 상자 대신 소제목+글 */
.gp-box h3 { margin-top: 20px; }
.gp-box p { font-size: 15px; line-height: 1.8; color: #33373e; }
.gp-box h3 + p { margin-top: 4px; }
.gp-boxes, .gp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.gp-pair { margin-top: 4px; }
.gp-sec > .gp-box:first-of-type > p:first-child { margin-top: 16px; }

/* 번호 목록(가입 전 확인·확인할 점): 번호와 간격 */
.gp-steps { margin-top: 12px; counter-reset: s; }
.gp-steps > li { position: relative; padding: 0 0 0 34px; counter-increment: s; }
.gp-steps > li + li { margin-top: 18px; }
.gp-steps > li::before { content: counter(s); position: absolute; left: 0; top: 1px; font-size: 15px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.gp-steps h3 { margin: 0 !important; font-size: 16px; color: var(--text); }
.gp-steps p { margin-top: 0 !important; }
.gp-steps h3 + p { margin-top: 4px !important; }

/* 단계 흐름 · 바로가기: 텍스트 링크 */
.gp-flow { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; }
.gp-flow a { display: inline-flex; align-items: baseline; gap: 6px; font-size: 15px; font-weight: 600; color: var(--text); }
.gp-flow a::after { content: "→"; color: var(--muted); font-weight: 400; }
.gp-flow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gp-flow em { font-size: 13px; font-style: normal; font-weight: 700; color: var(--muted); }
.gp-live { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 10px; font-size: 14px; color: var(--body); }
.gp-live b { font-size: 17px; color: var(--text); font-variant-numeric: tabular-nums; }
.gp-live::after { content: "현장 목록 보기 →"; font-size: 13.5px; font-weight: 700; color: var(--body); }
.gp-live:hover::after { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* 표: 선만 */
.gp-table-wrap { margin-top: 14px; overflow-x: auto; }
.gp-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; }
.gp-table th, .gp-table td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.65; }
.gp-table thead th { font-size: 13px; color: var(--muted); }
.gp-table tbody tr:last-child > * { border-bottom: 0; }
.gp-table tbody th { width: 20%; font-weight: 700; }
.gp-time td:last-child { width: 30%; font-size: 12.5px; color: var(--muted); }

/* 판례 목록: 간격만 */
.gp-cases { margin-top: 10px; }
.gp-cases li + li { margin-top: 16px; }
.gp-cases a, .gp-cases div { display: block; }
.gp-case-meta { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.gp-case-why { display: block; margin-top: 2px; font-size: 15px; line-height: 1.7; color: #33373e; }
.gp-cases a .gp-case-why::after { content: " →"; color: var(--muted); }
.gp-cases a:hover .gp-case-why { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* 링크 목록(관련 쟁점·칼럼) */
.gp-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; margin-top: 12px; }
.gp-links a { display: flex; flex-direction: column; gap: 1px; }
.gp-links b { font-size: 15px; line-height: 1.5; }
.gp-links b::after { content: " →"; color: var(--muted); font-weight: 400; }
.gp-links span { font-size: 12.5px; color: var(--muted); }
.gp-links a:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* 분야 페이지: 쟁점 목록 */
.gp-topics { margin-top: 12px; }
.gp-topics li + li { margin-top: 22px; }
.gp-topics a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; }
.gp-topics b { font-size: 16.5px; line-height: 1.45; letter-spacing: -.02em; }
.gp-topics b::after { content: " →"; color: var(--muted); font-weight: 400; }
.gp-topics span { grid-column: 1; font-size: 14.5px; line-height: 1.7; color: var(--body); }
.gp-topics em { grid-column: 2; grid-row: 1; align-self: baseline; font-size: 12.5px; font-style: normal; color: var(--muted); white-space: nowrap; }
.gp-topics a:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* 상담: 카드 밖, 선 하나로만 가른다 */
.gp-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: center; margin-top: 28px; padding: 0 4px; }
.gp-cta h2 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.gp-cta p { margin-top: 6px; font-size: 14px; line-height: 1.7; color: var(--body); }
.gp-cta-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.gp-btn { font-size: 14.5px; font-weight: 700; color: var(--body); }
.gp-btn:not(.gp-btn-dark)::after { content: " →"; color: var(--muted); font-weight: 400; }
.gp-btn:not(.gp-btn-dark):hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.gp-btn-dark { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 12px; background: var(--accent); color: #fff; }
.gp-btn-dark:hover { background: var(--dark); }

/* 이전·다음: 텍스트 링크 */
.gp-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; padding: 18px 4px 0; border-top: 1px solid var(--line); }
.gp-pager a { display: flex; flex-direction: column; gap: 1px; }
.gp-pager span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.gp-pager b { font-size: 15px; line-height: 1.5; }
.gp-pager a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.gp-prev b::before { content: "← "; color: var(--muted); font-weight: 400; }
.gp-next { text-align: right; }
.gp-next b::after { content: " →"; color: var(--muted); font-weight: 400; }
.gp-main > .law-note, .gp-hub > .law-note { margin-top: 18px; padding: 0 4px; }

/* 옆 목차: 카드 없이 글자 목록 */
.gp-side { position: sticky; top: 92px; display: grid; gap: 26px; padding-top: 4px; }
.gp-side-box b { display: block; padding-bottom: 8px; font-size: 13px; color: var(--muted); }
.gp-side-box a { display: block; padding: 5px 0 5px 12px; border-left: 2px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--body); }
.gp-side-box a:hover { color: var(--text); }
.gp-side-box a[aria-current] { border-left-color: var(--text); color: var(--text); font-weight: 700; }

/* 허브 */
.gp-hub .gp-head { margin-bottom: 6px; }
.gp-hub-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 32px; margin-top: 18px; }
.gp-hub-cards a { display: flex; flex-direction: column; gap: 3px; }
.gp-hub-cards b { font-size: 16.5px; letter-spacing: -.02em; }
.gp-hub-cards b::after { content: " →"; color: var(--muted); font-weight: 400; }
.gp-hub-cards span { font-size: 14px; line-height: 1.6; color: var(--body); }
.gp-hub-cards a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.gp-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; margin-top: 26px; }
.gp-area { display: flex; flex-direction: column; }
.gp-area h3 { font-size: 17px; font-weight: 700; }
.gp-area h3 small { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--muted); }
.gp-area h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gp-area > p { margin-top: 6px; font-size: 14px; line-height: 1.7; color: var(--body); }
.gp-area-topics { margin-top: 10px; columns: 2; column-gap: 20px; }
.gp-area-topics li { break-inside: avoid; }
.gp-area-topics a { display: block; padding: 3px 0; font-size: 14px; line-height: 1.5; color: var(--accent-ink); }
.gp-area-topics a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.gp-area-more { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--body); }
.gp-area-more:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1080px) {
  .gp-hub-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .gp-grid { grid-template-columns: minmax(0, 1fr); }
  .gp-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; padding: 8px 4px 0; }
  .gp-cta { grid-template-columns: minmax(0, 1fr); }
  .gp-areas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .gp-card { padding: 22px 18px 26px; }
  .gp-card > h2, .gp-sec > h2 { font-size: 18px; }
  .gp-sec + .gp-sec { margin-top: 36px; }
  .gp-boxes, .gp-pair, .gp-links, .gp-hub-cards, .gp-side { grid-template-columns: minmax(0, 1fr); }
  .gp-topics a { grid-template-columns: minmax(0, 1fr); }
  .gp-topics em { grid-column: 1; grid-row: auto; }
  .gp-pager { grid-template-columns: minmax(0, 1fr); }
  .gp-pager > span:empty { display: none; }
  .gp-next { text-align: left; }
  .gp-area-topics { columns: 1; }
  .gp-cta-btns { flex-direction: column; align-items: stretch; }
  .gp-btn-dark { justify-content: center; }
  /* 손가락 터치 범위: 글자 링크도 36px 이상 */
  .gp-btn:not(.gp-btn-dark) { padding: 10px 0; }
  .gp-flow { gap: 0 22px; }
  .gp-flow a { min-height: 40px; align-items: center; }
  .gp-live { min-height: 40px; align-items: center; }
  .gp-area-topics a { padding: 9px 0; }
  .gp-side-box a { padding-top: 9px; padding-bottom: 9px; }
  .gp-more a, .gp-area-more { display: inline-block; padding: 10px 0; }
  .gp-area h3 a { display: inline-block; padding: 8px 0; }
  /* 표는 좁은 화면에서 줄마다 쌓는다(가로 스크롤·상자 없이, 줄 사이 선만) */
  .gp-table { min-width: 0; }
  .gp-table thead { display: none; }
  .gp-table, .gp-table tbody, .gp-table tr, .gp-table th, .gp-table td { display: block; width: auto !important; }
  .gp-table tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .gp-table tr:last-child { border-bottom: 0; }
  .gp-table th, .gp-table td { padding: 0; border: 0; }
  .gp-table td { margin-top: 4px; }
  .gp-table td:empty, .gp-table th:empty { display: none; }
  .gp-cmp td::before { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
  .gp-cmp td:nth-child(2)::before { content: "지역주택조합"; }
  .gp-cmp td:nth-child(3)::before { content: "재개발·재건축"; margin-top: 6px; }
}
.gp-cases a.gp-case-ext .gp-case-why::after { content: ""; }
/* 조문 링크: 글자 링크(밑줄 점선) */
.gp-lawlink { color: inherit; text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.gp-lawlink:hover { color: var(--text); text-decoration-color: currentColor; }