/* 인포로 법률노트 (infolaw.co.kr): 법률 블로그. 흰 바탕, 짙은 소나무색 글자와 버튼, 카테고리 표시에만 번트 오렌지.
   첫 화면은 글쓴이 소개 + 카테고리 칩 + 썸네일 글 카드, 글 상세는 700px 읽기 칸에 글쓴이 줄·읽는 시간·태그·이전/다음 글. site.css 뒤에 덧씌운다. */
html:root {
  --baize: #1f3d36;
  --baize-deep: #152c27;
  --baize-text: #1d2321;
  --baize-muted: #66706c;
  --ink: #1d2321;
  --muted: #66706c;
  --line: #e6e8e5;
  --sage: #f5f6f4;
  --paper: #ffffff;
  --link: #1f3d36;
  --seal: #c2410c;
  --r: 12px;
}

/* 머리글: 흰 바탕 블로그 바 */
.top { background: rgba(255, 255, 255, .96); color: var(--ink); border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.4) blur(6px); }
.top .brand { color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
.top .seal, .bl-author .seal { border-radius: 50%; box-shadow: none; }
.nav a { color: #3a423f; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); border-bottom-color: var(--seal); }
.field-tag { color: var(--ink); border-left-color: var(--line); }
.field-tag:hover { color: var(--seal); }
.call { background: var(--sage); color: var(--ink); border-radius: 999px; }
.top .call-apply { background: var(--baize); color: #fff; }
.top .call-apply:hover { background: var(--baize-deep); color: #fff; }
.btn, .sheet, .hook, .tool, .note, .mid-cta, .gist, .cta, .case-cta, .kakao, .opts label { border-radius: var(--r); }
.btn { background: var(--baize); }
.btn:hover { background: var(--baize-deep); }

/* 카테고리 표시 */
.bl-cat { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; color: var(--seal); }
.bl-cat a { color: inherit; text-decoration: none; }
.bl-cat a:hover { text-decoration: underline; }

/* 첫 화면 */
.bl-wrap { padding-top: clamp(24px, 4vw, 44px); }
.bl-profile { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 24px); padding-bottom: clamp(18px, 3vw, 28px); }
.bl-avatar { width: clamp(64px, 9vw, 88px); height: clamp(64px, 9vw, 88px); font-size: clamp(30px, 4vw, 42px); border-radius: 50%; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--line); }
.bl-profile h1 { margin: 0 0 4px; font-size: clamp(26px, 3.6vw, 36px); line-height: 1.25; font-weight: 800; letter-spacing: -.03em; }
.bl-profile p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.bl-profile .bl-owner { margin-top: 4px; font-size: 13.5px; }
.bl-chips { display: flex; gap: 8px; padding: 0 0 18px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.bl-chips::-webkit-scrollbar { display: none; }
.bl-chips a { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--sage); color: var(--ink); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background .15s; }
.bl-chips a:hover { background: #e9ece8; color: var(--ink); }
.bl-cols { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(28px, 4vw, 56px); padding-top: 26px; }
.bl-feed > h2, .bl-side h2 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--muted); letter-spacing: .01em; }
.bl-card { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.bl-thumb { display: block; text-decoration: none; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--sage); }
.bl-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .3s; }
.bl-card:hover .bl-thumb img { transform: scale(1.03); }
.bl-tile { display: grid; place-items: center; width: 100%; height: 100%; padding: 12px; text-align: center; font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--baize); background: #eef3f0; }
.bl-tile[data-g="개인회생"], .bl-tile[data-g="채무조정"], .bl-tile[data-g="파산"], .bl-tile[data-g="법인파산"] { background: #eef1f7; color: #23365c; }
.bl-tile[data-g="이혼"] { background: #f6eff2; color: #6b2a45; }
.bl-tile[data-g="학교폭력"] { background: #f2f4e9; color: #3f4f17; }
.bl-tile[data-g="음주운전"], .bl-tile[data-g="성범죄"], .bl-tile[data-g="마약범죄"] { background: #f7efe9; color: #8a3410; }
.bl-tile[data-g="판례"] { background: #f1f0ee; color: #3d3a35; }
.bl-tile[data-g="칼럼"] { background: #eef3f0; color: var(--baize); }
.bl-body h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.45; font-weight: 800; letter-spacing: -.02em; }
.bl-body h3 a { color: var(--ink); text-decoration: none; }
.bl-body h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.bl-sum { margin: 0 0 8px; color: #4a524f; font-size: 15.5px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-meta { margin: 0; color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.bl-side section { margin-bottom: 28px; }
.bl-catlist, .bl-pop { margin: 0; padding: 0; list-style: none; }
.bl-catlist a { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 15.5px; }
.bl-catlist a:hover { color: var(--seal); }
.bl-catlist span { color: var(--muted); font-size: 13.5px; }
.bl-pop { counter-reset: p; }
.bl-pop li { counter-increment: p; display: grid; grid-template-columns: 26px 1fr; padding: 9px 0; border-bottom: 1px solid var(--line); }
.bl-pop li::before { content: counter(p); color: var(--seal); font-weight: 800; }
.bl-pop a { color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1.5; }
.bl-pop a:hover { text-decoration: underline; }
.bl-home .cta { margin-top: clamp(32px, 5vw, 56px); }

/* 글 상세: 읽기 칸, 글쓴이 줄 */
.layout { grid-template-columns: minmax(0, 700px); }
.crumb { font-size: 13px; }
.page-head { max-width: 700px; margin: 0 auto; padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.page-head h1 { font-weight: 800; letter-spacing: -.03em; font-size: clamp(28px, 4.2vw, 40px); line-height: 1.35; }
.page-head .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 14px; }
.bl-author { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.bl-author .seal { width: 28px; height: 28px; font-size: 16px; }
.bl-author b { font-weight: 700; }
.article { font-size: 18px; line-height: 1.9; }
.article h2 { font-weight: 800; letter-spacing: -.02em; margin-top: 2.2em; }
.gist { background: var(--sage); box-shadow: none; }
.gist-tag { color: var(--seal); }
.note { background: #fbf6f2; box-shadow: inset 3px 0 0 var(--seal); }
.tw th { background: var(--sage); color: var(--ink); }
.steps li::before { background: var(--baize); border-color: var(--baize); color: #fff; border-radius: 50%; }
.cta { background: var(--baize); }
.case-cta { background: var(--sage); box-shadow: none; }
.bl-foot { margin: 40px 0 8px; }
.bl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.bl-tags span { padding: 4px 11px; border-radius: 999px; background: var(--sage); color: #4a524f; font-size: 14px; }
.bl-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bl-pn a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15.5px; line-height: 1.45; }
.bl-pn a:hover { border-color: var(--baize); }
.bl-pn .next { text-align: right; }
.bl-pn small { display: block; margin-bottom: 4px; color: var(--muted); font-weight: 400; font-size: 13px; }
.foot { background: #18201d; }

/* 키워드 랜딩 */
.lp-hero, .lp-promo, .lp-trust { background: #142a25; }
.lp-hero .kw, .lp-live b, .lp-hero h1 em { color: #fdba74; }

@media (max-width: 900px) {
  .bl-cols { grid-template-columns: minmax(0, 1fr); }
  .bl-side { order: 2; }
}
@media (max-width: 560px) {
  .bl-card { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 16px 0; }
  .bl-body h3 { font-size: 17px; }
  .bl-sum { -webkit-line-clamp: 2; font-size: 14.5px; }
  .bl-tile { font-size: 15px; }
  .bl-pn { grid-template-columns: minmax(0, 1fr); }
  .bl-pn .next { text-align: left; }
  .article { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .bl-card:hover .bl-thumb img { transform: none; } }