/* 권민지 변호사 — 법률 칼럼(게시판 + 글)
   본체 styles.css 의 토큰·헤더·버튼·푸터를 그대로 쓰고, 여기에는 칼럼에만 필요한 것만 둔다.
   글마다 CSS 를 품지 않는다 — 이 파일 하나를 고치면 이미 발행된 글까지 전부 따라온다. */

/* 칼럼 본문은 어떤 글자가 올지 모른다. 본체의 '페이지에 쓰인 글자만' 서브셋 대신
   상용 한글 2,350자 서브셋을 쓴다. (~/kwonminji_site_src/build_fonts.py 가 같이 만든다) */
@font-face { font-family: "PaperlogyKS"; font-weight: 700; font-style: normal; font-display: swap;
  src: url(fonts/paperlogy-700.ks.woff2) format("woff2"); }
@font-face { font-family: "PaperlogyKS"; font-weight: 600; font-style: normal; font-display: swap;
  src: url(fonts/paperlogy-600.ks.woff2) format("woff2"); }
@font-face { font-family: "PretendardKS"; font-weight: 45 920; font-style: normal; font-display: swap;
  src: url(fonts/pretendard.ks.woff2) format("woff2-variations"); }
:root {
  --sans: "PretendardKS", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --title: "PaperlogyKS", var(--sans);
}
body { padding-right: 0; }
.bwrap { width: min(100% - var(--gut) * 2, 46rem); margin-inline: auto; }

/* ---------- 글 ---------- */
.post { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem); }
.post__cat { display: inline-block; font-family: var(--title); font-weight: 600; font-size: .875rem; color: var(--burg); }
.post__cat:hover { text-decoration: underline; }
.post h1 { margin-top: .875rem; font-family: var(--title); font-weight: 700; color: var(--ink); font-size: clamp(1.75rem, 4.2vw, 2.625rem); line-height: 1.34; letter-spacing: -.03em; text-wrap: balance; }
.post__meta { margin-top: 1.25rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--ink); font-size: .875rem; color: var(--mute); display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.post__meta b { color: var(--ink); font-weight: 600; }

article { padding-top: 2rem; font-size: 1.0625rem; line-height: 1.95; color: var(--ink-2); }
article > p { margin-top: 1.25rem; }
article > p:first-child { margin-top: 0; }
article h2 { margin-top: 3.25rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-family: var(--title); font-weight: 700; font-size: clamp(1.3125rem, 2.6vw, 1.625rem); line-height: 1.45; letter-spacing: -.028em; color: var(--ink); }
article h2 + p { margin-top: 1rem; }
article strong, article b { color: var(--ink); font-weight: 700; }
article a { color: var(--burg); text-decoration: underline; }

/* 핵심 요약: 상자 대신 위아래 선 */
.sumbox { margin: 0 0 2.25rem; padding: 1.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sumbox b { display: block; font-family: var(--title); font-weight: 600; font-size: .9375rem; color: var(--burg); margin-bottom: .75rem; }
.sumbox ul { counter-reset: s; display: grid; gap: .5rem; }
.sumbox li { counter-increment: s; display: grid; grid-template-columns: 1.75rem 1fr; font-size: 1rem; line-height: 1.75; color: var(--ink); }
.sumbox li::before { content: counter(s); font-family: var(--title); font-weight: 600; color: var(--burg); font-variant-numeric: tabular-nums; }

/* 비교표 */
table.cmp { width: 100%; margin: 1.5rem 0 .5rem; border-collapse: collapse; border-top: 2px solid var(--ink); font-size: .9688rem; line-height: 1.75; }
table.cmp th, table.cmp td { padding: .9375rem .875rem .9375rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.cmp th { font-family: var(--title); font-weight: 600; color: var(--ink); white-space: nowrap; }
table.cmp td { color: var(--ink-2); }
.cmpwrap { overflow-x: auto; }

/* 사례 */
.casebox { margin: 1.75rem 0 .5rem; padding: 1.5rem clamp(1.125rem, 3vw, 1.75rem); background: var(--panel); }
.casebox b { display: block; font-family: var(--title); font-weight: 600; font-size: .875rem; color: var(--burg); margin-bottom: .625rem; }
.casebox p { font-size: 1rem; line-height: 1.85; color: var(--ink-2); }

/* 체크리스트: 번호 매긴 헤어라인 행 */
.checks { margin: 1.5rem 0 .5rem; counter-reset: c; border-top: 1px solid var(--line); }
.checks li { counter-increment: c; display: grid; grid-template-columns: 2.25rem 1fr; padding: .8125rem 0; border-bottom: 1px solid var(--line-soft); font-size: 1rem; line-height: 1.75; color: var(--ink); }
.checks li::before { content: counter(c, decimal-leading-zero); font-family: var(--title); font-weight: 600; font-size: .875rem; color: var(--burg); font-variant-numeric: tabular-nums; padding-top: .1rem; }

.post__fine { margin-top: 2.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .8125rem; line-height: 1.8; color: var(--mute); }

/* 글 끝 상담 */
.pcta { background: var(--burg); color: #fff; padding: clamp(2.5rem, 5vw, 4rem) 0; }
.pcta__in { display: grid; gap: 1.5rem; }
.pcta h2 { font-family: var(--title); font-weight: 700; font-size: clamp(1.375rem, 3vw, 1.875rem); line-height: 1.4; letter-spacing: -.028em; }
.pcta p { font-size: .9688rem; line-height: 1.85; color: #F3DCE3; }
.pcta__act { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.pcta__tel { font-family: var(--title); font-weight: 700; font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: -.02em; font-variant-numeric: tabular-nums; border-bottom: 2px solid rgba(255,255,255,.7); padding-bottom: .125rem; }
.pcta .btn--line:hover { color: var(--burg); }

.pnav { padding: 2rem 0 3rem; }
.pnav a { display: inline-flex; align-items: center; gap: .75rem; font-weight: 600; font-size: .9375rem; color: var(--ink); }
.pnav a:hover { color: var(--burg); }
.pnav .arw { transform: rotate(180deg); }
.pnav a:hover .arw { transform: rotate(180deg) translateX(.35rem); }

/* ---------- 게시판 ---------- */
.board { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 6rem); }
.board .wrap { width: min(100% - var(--gut) * 2, 68rem); }
.board h1 { font-family: var(--title); font-weight: 700; color: var(--ink); font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.34; letter-spacing: -.03em; }
.board__lead { margin-top: 1rem; font-size: 1rem; line-height: 1.85; color: var(--ink-2); max-width: 40em; }
.board__bar { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end; justify-content: space-between; border-bottom: 2px solid var(--ink); }
.tabs { display: flex; flex-wrap: wrap; }
.tabs button { background: none; border: 0; cursor: pointer; padding: .875rem 1rem; font-family: var(--title); font-weight: 600; font-size: .9375rem; color: var(--mute); transition: color .3s var(--out), background .3s var(--out); }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-pressed="true"] { background: var(--burg); color: #fff; }
.tabs button i { font-style: normal; margin-left: .375rem; font-size: .8125rem; font-variant-numeric: tabular-nums; opacity: .75; }
.board__search { position: relative; margin-bottom: .5rem; }
.board__search input { width: 15rem; max-width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; padding: .5rem .25rem; font-size: .9375rem; outline: none; }
.board__search input:focus { border-bottom-color: var(--burg); }
.board__count { margin-top: 1rem; font-size: .8125rem; color: var(--mute); font-variant-numeric: tabular-nums; }

.rows { margin-top: .5rem; }
.row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 6.5rem; gap: 1.5rem; align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid var(--line); transition: background .3s var(--out); }
.row[hidden] { display: none; }
.row:hover { background: var(--panel); }
.row__cat { font-size: .8125rem; font-weight: 700; color: var(--burg); padding-left: .875rem; }
.row__t { display: block; font-family: var(--title); font-weight: 700; font-size: 1.1875rem; line-height: 1.5; letter-spacing: -.028em; color: var(--ink); }
.row:hover .row__t { color: var(--burg); }
.row__d { display: block; margin-top: .375rem; font-size: .9375rem; line-height: 1.75; color: var(--mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row__date { font-size: .8125rem; color: var(--mute); text-align: right; padding-right: .875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.board__more { margin-top: 2rem; text-align: center; }
.board__more button { background: none; border: 1px solid var(--ink); min-height: 3rem; padding: 0 2rem; cursor: pointer; font-weight: 600; font-size: .9375rem; color: var(--ink); transition: background .3s var(--out), color .3s var(--out); }
.board__more button:hover { background: var(--ink); color: #fff; }
.board__empty { padding: 3rem 0; text-align: center; color: var(--mute); }

@media (max-width: 760px) {
  .row { grid-template-columns: 1fr; gap: .375rem; padding: 1.25rem 0; }
  .row__cat { padding-left: 0; }
  .row__date { text-align: left; padding-right: 0; }
  .board__search input { width: 100%; }
  .board__search { width: 100%; }
  table.cmp { font-size: .9063rem; }
  table.cmp th { white-space: normal; }
}