@charset "utf-8"; /* ========================================================================== 법진 성공사례 목록 카드 CSS version : v4 updated : 2026-08-26 대상 : bo_table=case 목록 · 메인 슬라이드(main-case-slide) 원본 : beobjin_case_mix_20260826.html (카드 확정본) -------------------------------------------------------------------------- [v3 -> v4 변경] 1. --card-bg 를 .bjc-card 자신에게 정의. ★버그 수정★ v3까지는 .bjc-list / .main-case-slide 에만 있어서, 상세페이지 CASE SUMMARY(.bjd-summary 안)에서는 변수를 못 찾았다. 그 결과 도넛 가운데 구멍이 투명이 되어 "파이 그래프"로 보였고, 카드 배경도 흰색이 되고 탕감률 숫자가 초록 위 초록으로 묻혔다. 모든 var() 에 폴백값을 넣어 어느 컨텍스트에서도 깨지지 않게 했다. 2. 탕감액 표시(.bjc-cut) 추가. 화살표 자리에 "▼ 7,326만원 탕감". 총채무 -> 총변제 사이의 화살표가 곧 감액분이므로 그 자리에 둔다. 카드 높이가 늘지 않는다. 파산은 탕감액 = 총채무액이라 표시하지 않는다. [v2 -> v3 변경] 1. .bjc-sum 에 3줄 line-clamp 추가. 제목 길이가 제각각이면 카드 높이가 들쭉날쭉해진다. 목록 규칙은 "쟁점형 20~28자"이고 그 범위는 360px에서 2줄로 들어가므로, 3줄은 규칙을 어긴 옛 제목을 받아내는 안전망이다. 2줄로 자르면 쟁점이 잘려 B안(쟁점형 문장)을 고른 이유가 사라진다. 2. .bjc-card.is-static 추가 — 상세페이지 CASE SUMMARY용. 링크가 아닌
로 같은 카드를 재사용할 때 hover·커서를 끈다. [v1 -> v2 변경] 1. .bjc-card 를 이름있는 컨테이너(bjcard)로 지정. v1에서 .bjc-meta / .bjc-sum 은 위에 컨테이너가 없어 cqw 가 뷰포트 기준으로 잡혔다. 데스크톱에서는 항상 clamp 최댓값이 나와, swiper 279px 카드에서 이 두 줄만 데스크톱 크기로 남는 버그가 있었다. 2. 카드 내부 여백·글자 축소를 뷰포트 미디어쿼리 -> @container 로 이관. 카드가 좁아지면 뷰포트와 무관하게 줄어든다. 뷰포트 미디어쿼리는 "몇 열로 깔 것인가"(그리드)에만 남긴다. 3. 태그 칩을 축소 가능(flex:0 1 auto + ellipsis)으로 변경. v1에서는 칩이 flex:none 이라 좁아지면 유형·지역 쪽이 잘려나갔다. 잘려야 할 것은 태그이지 "개인회생 · 평택"이 아니다. -------------------------------------------------------------------------- [적용 전 확인] 1. 모든 클래스는 bjc- 프리픽스. 기존 테마의 .card/.head/.body/.meta 와 충돌하지 않도록 의도적으로 분리했다. 기존 .case-list 관련 CSS는 지운다. 2. 도넛은 SVG가 아니라 conic-gradient. PHP는 --p 변수(0~100)만 넘기면 된다. 3. 폰트는 에 링크로 넣는다(@import는 렌더 차단): [주의] 클래스명 충돌로 specificity 사고가 났던 이력이 있다(cap/to). 새 클래스는 반드시 bjc- 프리픽스를 붙인다. ========================================================================== */ /* ── 토큰 ───────────────────────────────────────────────────────────── */ .bjc-list, .main-case-slide{ --green:#003B3F; --green-mid:#14595C; --gold:#CCA652; --gold-deep:#A07B32; --gold-pale:#EADFC6; --paper:#F3F5F2; --ink:#0E2224; --line:#D5DCD7; --mute:#8A9A93; --sans:"Noto Sans KR","맑은 고딕",Malgun Gothic,sans-serif; --serif:"Noto Serif KR","Nanum Myeongjo",serif; } /* ── 목록 그리드 ────────────────────────────────────────────────────── */ /* 뷰포트 미디어쿼리는 여기에만 쓴다 — 몇 열로 깔지는 화면의 문제다 */ .bjc-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; list-style:none; margin:0; padding:0; } .bjc-list > li{ position:relative; display:flex; margin:0;padding:0;border:0;background:none;list-style:none; } .bjc-list > li::before, .bjc-list > li::after{content:none} @media (max-width:1080px){ .bjc-list{grid-template-columns:repeat(2,1fr)} } @media (max-width:720px){ .bjc-list{grid-template-columns:1fr;gap:14px} } /* 관리자 체크박스 — 카드 위에 띄운다 */ .bjc-list .chk_box{ position:absolute;top:8px;left:8px;z-index:3; margin:0;padding:0;background:none;border:0; } /* ── 카드 (a 태그) ──────────────────────────────────────────────────── */ .bjc-card{ /* 카드 자신이 배경 변수를 갖는다. 목록·슬라이드·상세 어디에 놓여도 동일 */ --card-bg:var(--paper,#F3F5F2); container-type:inline-size; container-name:bjcard; /* 내부 축소의 기준은 화면이 아니라 카드 폭 */ position:relative; display:flex; flex-direction:column; width:100%; background:var(--card-bg,#F3F5F2); border:1px solid var(--line,#D5DCD7); color:var(--ink); font-family:var(--sans); text-decoration:none; transition:transform .18s ease, box-shadow .18s ease; } .bjc-card:hover, .bjc-card:focus{text-decoration:none;color:var(--ink)} .bjc-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,59,63,.13)} .bjc-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px} /* ── 상단 띠 : 유형 · 지역 · 태그 ───────────────────────────────────── */ .bjc-head{ container-type:inline-size; display:flex;align-items:center;gap:6px; padding:15px 19px 13px; border-bottom:1px solid var(--line); flex-wrap:nowrap; overflow:hidden; } .bjc-type{ flex:none;white-space:nowrap; font-size:clamp(11.5px,4cqw,13.5px);font-weight:500;color:var(--green-mid); } .bjc-sep{flex:none;color:var(--line)} .bjc-loc{ flex:none;white-space:nowrap; font-size:clamp(12.5px,4.4cqw,15px);font-weight:700;color:var(--green); } .bjc-tags{ margin-left:auto;min-width:0; display:flex;gap:4px;flex-wrap:nowrap;justify-content:flex-end; } /* 좁아지면 태그가 줄어든다. 유형·지역은 절대 잘리지 않는다 */ .bjc-tags span{ flex:0 1 auto;min-width:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-size:clamp(10px,3.4cqw,11.5px);font-weight:500;color:var(--green-mid); background:#fff;border:1px solid var(--line);border-radius:12px; padding:3.5px clamp(7px,2.4cqw,10px); } .bjc-tags span::before{content:"#";color:var(--gold);font-weight:700;margin-right:1.5px} /* 개인파산 — 상단 띠만 딥그린 스왑 */ .bjc-card.is-bk .bjc-head{background:var(--green);border-bottom-color:var(--green)} .bjc-card.is-bk .bjc-type{color:#9DBAB8} .bjc-card.is-bk .bjc-sep{color:rgba(204,166,82,.45)} .bjc-card.is-bk .bjc-loc{color:#fff} /* ── 본문 : 도넛 42% / 금액 58% ─────────────────────────────────────── */ .bjc-body{ container-type:inline-size; display:flex;align-items:center; padding:22px 19px 18px; } .bjc-zd{flex:0 0 42%;display:flex;align-items:center;justify-content:center} .bjc-za{flex:0 0 58%;display:flex;align-items:center;justify-content:center;min-width:0} /* 도넛 — conic-gradient. --p:0~100 */ .bjc-donut{ position:relative;flex:none; width:min(118px,92cqw);aspect-ratio:1/1; } .bjc-donut::before{ content:"";position:absolute;inset:5%;border-radius:50%; background:var(--gold-pale,#EADFC6); /* 구형 브라우저 폴백 */ background:conic-gradient(var(--green,#003B3F) calc(var(--p,0) * 1%), var(--gold-pale,#EADFC6) 0); } .bjc-donut::after{ content:"";position:absolute;inset:15%;border-radius:50%; background:var(--card-bg,#F3F5F2); /* 폴백 없으면 구멍이 사라진다 */ } .bjc-dmid{ position:absolute;inset:0;z-index:1; display:flex;flex-direction:column;align-items:center;justify-content:center; line-height:1; } .bjc-dn{ font-family:var(--serif);font-weight:700;color:var(--green); font-size:clamp(19px,7.4cqw,27px); } .bjc-dn i{font-style:normal;font-weight:500;font-size:.5em;margin-left:1px} .bjc-dl{ margin-top:5px;font-weight:700;color:var(--gold-deep); font-size:clamp(9.5px,3.2cqw,11px);letter-spacing:.1em; } /* 변제율 병기 — 카드 확정본에 없던 줄. 빼려면 아래 한 줄만 display:none */ .bjc-dl2{ margin-top:4px;font-weight:500;color:var(--mute); font-size:clamp(8.5px,2.8cqw,10px);letter-spacing:-.01em;white-space:nowrap; } .bjc-card.is-bk .bjc-dn{font-size:clamp(17px,6.4cqw,24px);letter-spacing:-.02em} /* 금액 */ .bjc-amt{text-align:center;min-width:0} .bjc-cap{ margin-bottom:4px;font-weight:700;color:var(--mute); font-size:clamp(10px,3.4cqw,11.5px);letter-spacing:.1em; white-space:nowrap;word-break:keep-all; } .bjc-capto{color:var(--gold-deep)} .bjc-from{ font-family:var(--serif);font-weight:500;color:var(--mute); font-size:clamp(14px,5.6cqw,19px);line-height:1.15;white-space:nowrap; text-decoration:line-through; text-decoration-thickness:1px; text-decoration-color:#B9C5BE; } /* 화살표 + 탕감액 — 감액분을 화살표 자리에 붙인다 */ .bjc-op{ margin:5px 0 4px;color:var(--gold);font-size:11px; display:flex;align-items:center;justify-content:center;gap:5px; white-space:nowrap;line-height:1; } .bjc-cut{ font-weight:700;color:var(--gold-deep);letter-spacing:-.02em; font-size:clamp(10px,3.2cqw,11.5px); } .bjc-to{ font-family:var(--serif);font-weight:700;color:var(--green); font-size:clamp(19px,8cqw,27px);line-height:1.1;white-space:nowrap; } /* ── 하위 지표 : 회생 월변제금·변제기간 / 파산 원금·이자 ────────────── */ /* cqw 기준 = .bjc-card (bjcard). v1에서는 여기가 뷰포트였다 */ .bjc-meta{ display:flex;margin:0 19px;padding:0; border-top:1px solid var(--line); } .bjc-meta > div{flex:1 1 50%;min-width:0;padding:13px 0;text-align:center} .bjc-meta > div + div{border-left:1px solid var(--line)} .bjc-meta dt{ margin:0 0 5px;font-weight:700;color:var(--mute); font-size:clamp(10.5px,3.5cqw,12px);letter-spacing:.04em; } .bjc-meta dd{ margin:0;font-weight:500;color:var(--ink); font-size:clamp(12.5px,4.2cqw,15.5px); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* ── 쟁점형 제목 ────────────────────────────────────────────────────── */ /* 3줄에서 자른다. 규칙(20~28자)을 지킨 제목은 360px에서 2줄로 들어간다 */ .bjc-sum{ margin:0;padding:16px 19px 0; font-family:var(--serif);font-weight:500;color:var(--green); font-size:clamp(14px,4.4cqw,15.5px);line-height:1.62; word-break:keep-all; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; } /* ── 하단 : 시점 · 로고 · 자세히 보기 ───────────────────────────────── */ .bjc-foot{ container-type:inline-size; margin-top:auto;padding:15px 19px; display:flex;align-items:center;justify-content:space-between; gap:6px;flex-wrap:nowrap; } .bjc-when{ flex:0 1 auto;min-width:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; color:var(--mute); font-size:clamp(10px,3.4cqw,11.5px);letter-spacing:-.02em; } .bjc-when:empty{display:none} .bjc-logo{ flex:none;margin-left:auto;margin-right:clamp(6px,2.6cqw,9px); display:flex;align-items:center;justify-content:center; width:clamp(42px,15cqw,54px);height:21px; } .bjc-logo img{display:block;max-width:100%;max-height:100%;width:auto;height:auto} .bjc-more{ flex:none;white-space:nowrap;font-weight:700;color:var(--green); font-size:clamp(11.5px,4cqw,13px); } .bjc-more b{color:var(--gold);margin-left:3px;font-weight:700} /* ── 상세페이지 CASE SUMMARY (링크 아님) ────────────────────────────── */ .bjc-card.is-static{cursor:default} .bjc-card.is-static:hover{transform:none;box-shadow:none} .bjc-card.is-static .bjc-more{display:none} .bjc-card.is-static .bjc-sum{ -webkit-line-clamp:unset;line-clamp:unset;display:block;overflow:visible; } /* ── 메인 슬라이드 (swiper) ─────────────────────────────────────────── */ .main-case-slide{height:auto} .main-case-slide .bjc-card{max-width:100%;height:100%} /* ══════════════════════════════════════════════════════════════════════ 카드 폭 기준 축소 — 화면 폭이 아니라 카드 폭에 반응한다. 목록 1열(모바일)이든 swiper 279px(데스크톱)이든 같은 규칙이 걸린다. ══════════════════════════════════════════════════════════════════════ */ @container bjcard (max-width:420px){ .bjc-head{padding:13px 16px 11px;gap:5px} .bjc-body{padding:18px 16px 15px} .bjc-dl{margin-top:3px} .bjc-dl2{margin-top:3px} .bjc-cap{letter-spacing:.06em;margin-bottom:3px} .bjc-op{margin:4px 0 3px;font-size:10px} .bjc-meta{margin:0 16px} .bjc-meta > div{padding:11px 0} .bjc-sum,.bjc-foot{padding-left:16px;padding-right:16px} } @container bjcard (max-width:340px){ .bjc-head{padding:12px 14px 10px;gap:4px} .bjc-body{padding:16px 14px 13px} .bjc-meta{margin:0 14px} .bjc-sum{padding:14px 14px 0;line-height:1.55} .bjc-foot{padding:13px 14px;gap:4px} .bjc-logo{margin-right:6px} } /* 태그를 줄여도 상단이 안 들어가는 폭. 두 번째 태그를 접는다 */ @container bjcard (max-width:290px){ .bjc-tags span:nth-child(2){display:none} } /* 실사용 하한 아래. 도넛을 접고 금액만 남긴다 */ @container bjcard (max-width:250px){ .bjc-cut{display:none} .bjc-zd{display:none} .bjc-za{flex:1 1 100%} .bjc-logo{display:none} } /* ── 접근성 · 출력 ──────────────────────────────────────────────────── */ @media (hover:none){ .bjc-card:hover{transform:none;box-shadow:none} } @media (prefers-reduced-motion:reduce){ .bjc-card{transition:none} .bjc-card:hover{transform:none} } @media print{ .bjc-card{break-inside:avoid;box-shadow:none;transform:none} .bjc-more{display:none} }