@charset "UTF-8";
/* 궁합 공개 입구(palja/gunghap). 열 폭은 layout.css(.pm-page)가 정한다. 색·모서리는 tokens.css 토큰만 쓴다. */
.gh-p { margin: 0 0 14px; font-size: 16px; line-height: 1.85; }
.gh-sec > .gh-p:last-child { margin-bottom: 0; }
.gh-jump { margin: 0; }
.gh-more { display: flex; flex-wrap: wrap; gap: var(--pm-gap-item); margin: 6px 0 12px; }
.gh-more .pm-btn { flex: 1 1 160px; justify-content: center; text-align: center; }

.gh-axes { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: var(--pm-gap-item); counter-reset: ghax; }
.gh-axes li { counter-increment: ghax; display: grid; gap: 2px; padding: 10px 14px 10px 46px; position: relative; border-radius: var(--pm-r-input); border: 1px solid var(--pm-line); background: var(--pm-cream); font-size: 15px; line-height: 1.7; }
.gh-axes li::before { content: counter(ghax); position: absolute; left: 12px; top: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--pm-soft); color: var(--pm-fire-deep); font-weight: 800; font-size: 13px; line-height: 24px; text-align: center; }
.gh-axes b { font-family: var(--pm-font-head); font-weight: 400; font-size: 17px; }
.gh-axes span { color: var(--pm-sub-text); }

.gh-rels { margin: 6px 0 0; display: grid; gap: var(--pm-gap-item); }
.gh-rel { padding: 10px 14px; border-radius: var(--pm-r-input); border: 1px solid var(--pm-line); border-left: 8px solid var(--pm-line); background: var(--pm-cream); }
.gh-rel dt { margin: 0 0 2px; font-family: var(--pm-font-head); font-weight: 400; font-size: 18px; }
.gh-rel dd { margin: 0; font-size: 15px; line-height: 1.75; }
.gh-rel--good { border-left-color: var(--pm-wood); }
.gh-rel--clash { border-left-color: var(--pm-fire); }
.gh-rel--mind { border-left-color: var(--pm-earth); }
.gh-rel--soft { border-left-color: var(--pm-water); }

.gh-years { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pm-gap-item); }
.gh-years li { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: var(--pm-r-input); background: var(--pm-cream); border: 1px solid var(--pm-line); font-size: 14.5px; line-height: 1.6; }
.gh-years b { flex: none; min-width: 5.2em; font-family: var(--pm-font-head); font-weight: 400; font-size: 16px; }
.gh-years span { color: var(--pm-sub-text); overflow-wrap: anywhere; }
@media (min-width: 720px) { .gh-years { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gh-nav { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--pm-gap-item); }
.gh-navbtn { display: flex; align-items: center; justify-content: center; min-height: var(--pm-tap); padding: 0 8px; border-radius: var(--pm-r-pill); background: var(--pm-soft); color: var(--pm-ink); font-weight: 700; font-size: 14.5px; text-decoration: none; }
.gh-navbtn:hover { background: var(--pm-soft2); }
.gh-navbtn:focus-visible { outline: 3px solid var(--pm-focus); outline-offset: 2px; }

.gh-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; table-layout: fixed; }
.gh-table tbody { scroll-margin-top: 72px; }
.gh-table tbody[id] { scroll-margin-top: 72px; }
.gh-grp th { padding: 14px 4px 4px; text-align: left; font-family: var(--pm-font-head); font-weight: 400; font-size: 20px; line-height: 1.3; }
.gh-grp th small { font-family: var(--pm-font-body); font-size: 14px; color: var(--pm-sub-text); }
.gh-cell th, .gh-cell td { padding: 8px 12px; background: var(--pm-cream); border-top: 1px solid var(--pm-line); border-bottom: 1px solid var(--pm-line); vertical-align: top; font-size: 15px; line-height: 1.65; }
.gh-c1 { width: 6.4em; }
.gh-cell th { border-left: 8px solid var(--pm-line); border-radius: var(--pm-r-input) 0 0 var(--pm-r-input); text-align: left; font-weight: 700; }
.gh-cell td { border-right: 1px solid var(--pm-line); border-radius: 0 var(--pm-r-input) var(--pm-r-input) 0; overflow-wrap: anywhere; }
.gh-cell.gh-rel--good th { border-left-color: var(--pm-wood); }
.gh-cell.gh-rel--clash th { border-left-color: var(--pm-fire); }
.gh-cell.gh-rel--mind th { border-left-color: var(--pm-earth); }
.gh-cell.gh-rel--soft th { border-left-color: var(--pm-water); }
.gh-ko { font-family: var(--pm-font-head); font-weight: 400; font-size: 16.5px; }
.gh-cell small { font-size: 13px; color: var(--pm-sub-text); }
.gh-line { display: block; color: var(--pm-ink); }

.gh-faq { margin: 0; display: grid; gap: var(--pm-gap-item); }
.gh-faq > div { padding: 10px 14px; border-radius: var(--pm-r-input); background: var(--pm-cream); border: 1px solid var(--pm-line); }
.gh-faq dt { margin: 0 0 4px; font-weight: 800; font-size: 15.5px; line-height: 1.6; }
.gh-faq dd { margin: 0; font-size: 15px; line-height: 1.75; }