@charset "utf-8";
/* ==========================================================================
   법진 성공사례 상세페이지 CSS
   version : v2
   updated : 2026-08-26

   [v4 -> v5] .bjd 에 --card-bg 정의 추가(이중 안전장치).
              목록 CSS v4가 .bjc-card 자신에 정의하도록 고쳤으나,
              상세페이지 쪽에도 두어 어느 한쪽만 갱신돼도 도넛이 깨지지 않게 한다.
   [v3 -> v4] CTA를 목업 1번안으로 전면 교체. 세로 2단(전화 -> 카카오톡).
              단일 컴포넌트(.bjd-cta-box) — 상단·하단 어디서 호출해도 같은 모양.
              간이형/전체형 구분 폐지. 카카오 노란색을 배경으로 쓰지 않음.
              축소 기준은 화면 폭이 아니라 컴포넌트 폭(컨테이너 쿼리).
   [v2 -> v3] CTA 2종 (폐지됨).
   [v1 -> v2] CTA에 전화번호 버튼 추가.
   대상    : bo_table=case · view.skin.php
   짝파일  : 법진_성공사례목록_CSS_v3_20260826.css  (먼저 로드할 것)
   --------------------------------------------------------------------------
   구성 순서
     CASE SUMMARY (목록 카드 재사용 · bjc-card is-static)
       ↓ 결과 비교표 (<table>)
       ↓ 사건 본문 (에디터 · h2 기준 목차 자동)
       ↓ FAQ (<details>)
   클래스는 bjd- 프리픽스(법진 detail). 목록의 bjc- 와 구분한다.
   ========================================================================== */

.bjd{
  --green:#003B3F;
  --green-mid:#14595C;
  --gold:#CCA652;
  --gold-deep:#A07B32;
  --gold-pale:#EADFC6;
  --paper:#F3F5F2;
  --ink:#0E2224;
  --line:#D5DCD7;
  --mute:#8A9A93;
  --card-bg:#F3F5F2;      /* CASE SUMMARY 카드 배경 = 도넛 가운데 구멍 색 */
  --sans:"Noto Sans KR","맑은 고딕",Malgun Gothic,sans-serif;
  --serif:"Noto Serif KR","Nanum Myeongjo",serif;
  max-width:1100px;margin:0 auto;
  font-family:var(--sans);color:var(--ink);
  letter-spacing:-.01em;
}

/* ── 머리 ───────────────────────────────────────────────────────────── */
.bjd-kicker{
  font-size:13px;font-weight:500;color:var(--green-mid);
  letter-spacing:.02em;margin-bottom:12px;
}
.bjd-kicker b{color:var(--green);font-weight:700}
.bjd-title{
  margin:0 0 26px;font-family:var(--serif);font-weight:700;color:var(--green);
  font-size:clamp(21px,3.4vw,30px);line-height:1.45;word-break:keep-all;
}

/* ── CASE SUMMARY ───────────────────────────────────────────────────── */
.bjd-summary{margin-bottom:34px}
.bjd-summary .bjc-card{max-width:520px}

/* ── 본문 2단 (PC: 목차 + 본문) ─────────────────────────────────────── */
.bjd-cols{display:flex;gap:38px;align-items:flex-start}
.bjd-main{flex:1 1 auto;min-width:0}

/* ── 목차 ───────────────────────────────────────────────────────────── */
.bjd-toc{
  flex:0 0 208px;position:sticky;top:88px;
  border-left:2px solid var(--gold);padding-left:16px;
}
.bjd-toc-t{
  font-size:11.5px;font-weight:700;color:var(--gold-deep);
  letter-spacing:.14em;margin-bottom:12px;
}
.bjd-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.bjd-toc li{margin-bottom:11px;counter-increment:toc}
.bjd-toc a{
  display:block;font-size:13.5px;line-height:1.5;color:var(--mute);
  text-decoration:none;word-break:keep-all;
}
.bjd-toc a::before{
  content:counter(toc,decimal-leading-zero);
  margin-right:7px;font-size:10.5px;color:var(--gold);font-weight:700;
}
.bjd-toc a:hover{color:var(--green)}
.bjd-toc-m{display:none}          /* 모바일 접힘 목차 */

/* ── 결과 비교표 ────────────────────────────────────────────────────── */
.bjd-table-wrap{margin:0 0 40px}
.bjd-h2,
.bjd-main h2{
  margin:44px 0 18px;font-family:var(--serif);font-weight:700;color:var(--green);
  font-size:clamp(17px,2.4vw,21px);line-height:1.5;
  padding-bottom:11px;border-bottom:2px solid var(--green);
  word-break:keep-all;scroll-margin-top:92px;
}
.bjd-table-wrap .bjd-h2{margin-top:0}
table.bjd-table{
  width:100%;border-collapse:collapse;background:#fff;
  border-top:2px solid var(--green);
}
table.bjd-table th,
table.bjd-table td{
  padding:13px 16px;border-bottom:1px solid var(--line);
  font-size:14.5px;line-height:1.5;
}
table.bjd-table thead th{
  background:var(--paper);font-weight:700;color:var(--green-mid);
  font-size:12.5px;letter-spacing:.06em;
}
table.bjd-table tbody th{
  text-align:left;font-weight:500;color:var(--mute);width:34%;
}
table.bjd-table td{
  text-align:right;font-family:var(--serif);font-weight:500;
  white-space:nowrap;
}
table.bjd-table td.is-after{color:var(--green);font-weight:700}
table.bjd-table td.is-none{color:#C3CCC7;font-family:var(--sans)}
table.bjd-table tr.is-key td.is-after{font-size:16px}
.bjd-tnote{
  margin:11px 0 0;font-size:12.5px;color:var(--mute);line-height:1.7;
}

/* ── 본문 ───────────────────────────────────────────────────────────── */
.bjd-main p{margin:0 0 17px;font-size:15.5px;line-height:1.85;color:#3E4E48;word-break:keep-all}
.bjd-main img{max-width:100%;height:auto}
.bjd-fig{margin:26px 0}
.bjd-fig img{display:block;width:100%;border:1px solid var(--line)}
.bjd-fig figcaption{
  margin-top:9px;font-size:12.5px;color:var(--mute);line-height:1.7;
}

/* ── FAQ ────────────────────────────────────────────────────────────── */
.bjd-faq{margin-top:48px}
.bjd-faq details{
  border-bottom:1px solid var(--line);background:#fff;
}
.bjd-faq details:first-of-type{border-top:1px solid var(--line)}
.bjd-faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:18px 44px 18px 18px;
  font-weight:700;font-size:15px;line-height:1.6;color:var(--green);
  word-break:keep-all;
}
.bjd-faq summary::-webkit-details-marker{display:none}
.bjd-faq summary::before{
  content:"Q";position:absolute;left:18px;top:18px;
  font-family:var(--serif);color:var(--gold);font-size:15px;
}
.bjd-faq summary{padding-left:42px}
.bjd-faq summary::after{
  content:"";position:absolute;right:20px;top:26px;
  width:8px;height:8px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg);transition:transform .18s ease;
}
.bjd-faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.bjd-faq .bjd-a{padding:0 20px 20px 42px}
.bjd-faq .bjd-a p{
  margin:0 0 12px;font-size:14.5px;line-height:1.85;color:#3E4E48;
}
.bjd-faq .bjd-a p:last-child{margin-bottom:0}
.bjd-faq .bjd-a p.bjd-cite{
  font-size:13px;color:var(--gold-deep);font-weight:500;
}

/* ══════════════════════════════════════════════════════════════════════
   상담 CTA — 공통 컴포넌트 (.bjd-cta-box)
   상세페이지 어느 위치에서 호출해도 동일하게 렌더링된다.
   호출 위치는 PHP가 정하고, 이 CSS는 위치를 가정하지 않는다.
   ══════════════════════════════════════════════════════════════════════ */
.bjd-cta-box{
  container-type:inline-size;
  container-name:bjcta;
  --ivory:#F7F5F1;
  margin:38px 0;
  padding:30px 26px 24px;
  background:var(--ivory);
  border:1px solid #E2E0DA;
  text-align:center;
}

/* 머리 */
.bjd-cta-mark{
  display:block;width:26px;height:26px;margin:0 auto 12px;
  background:var(--gold);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a1 1 0 011 1v1.3l6.3 1.4a1 1 0 01-.4 2L13 6.3V19h4a1 1 0 010 2H7a1 1 0 010-2h4V6.3L5.1 7.7a1 1 0 11-.4-2L11 4.3V3a1 1 0 011-1zM5.5 9l2.8 5.2a1 1 0 01-.2 1.2 4 4 0 01-5.2 0 1 1 0 01-.2-1.2L5.5 9zm13 0l2.8 5.2a1 1 0 01-.2 1.2 4 4 0 01-5.2 0 1 1 0 01-.2-1.2L18.5 9z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a1 1 0 011 1v1.3l6.3 1.4a1 1 0 01-.4 2L13 6.3V19h4a1 1 0 010 2H7a1 1 0 010-2h4V6.3L5.1 7.7a1 1 0 11-.4-2L11 4.3V3a1 1 0 011-1zM5.5 9l2.8 5.2a1 1 0 01-.2 1.2 4 4 0 01-5.2 0 1 1 0 01-.2-1.2L5.5 9zm13 0l2.8 5.2a1 1 0 01-.2 1.2 4 4 0 01-5.2 0 1 1 0 01-.2-1.2L18.5 9z'/></svg>") center/contain no-repeat;
}
.bjd-cta-t{
  margin:0 0 8px;font-family:var(--sans);font-weight:700;color:var(--green);
  font-size:clamp(18px,4.6cqw,22px);letter-spacing:-.02em;line-height:1.4;
  border:0;padding:0;
}
.bjd-cta-s{
  margin:0 0 20px !important;color:#6B7B74;
  font-size:clamp(12.5px,3.2cqw,14px);line-height:1.6;word-break:keep-all;
}
.bjd-cta-rule{
  display:block;width:34px;height:1px;background:var(--gold);
  margin:0 auto 20px;opacity:.7;
}

/* 카드 공통 — 세로 2단 */
.bjd-cta-card{
  display:flex;align-items:center;gap:clamp(12px,3.4cqw,18px);
  padding:clamp(14px,3.6cqw,20px) clamp(14px,3.4cqw,22px);
  border-radius:8px;text-decoration:none;text-align:left;
  margin-bottom:12px;transition:filter .15s ease;
}
.bjd-cta-card:last-of-type{margin-bottom:0}
.bjd-cta-card:hover{filter:brightness(.97)}
.bjd-cta-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.bjd-cta-ico{
  flex:none;width:clamp(44px,12cqw,58px);aspect-ratio:1;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.bjd-cta-ico::before{content:"";width:52%;height:52%;background:currentColor}
.bjd-cta-txt{flex:1 1 auto;min-width:0}
.bjd-cta-lb{
  display:block;font-weight:700;letter-spacing:-.02em;line-height:1.35;
  font-size:clamp(15px,4.2cqw,19px);
}
.bjd-cta-sub{
  display:block;margin-top:5px;line-height:1.55;
  font-size:clamp(11.5px,2.9cqw,13px);word-break:keep-all;
}
.bjd-cta-sub i{font-style:normal;margin:0 6px;opacity:.5}
.bjd-cta-go{
  flex:none;width:22px;height:22px;position:relative;
  border-left:1px solid currentColor;padding-left:16px;
}
.bjd-cta-go::before{
  content:"";position:absolute;right:2px;top:5px;width:9px;height:9px;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg);
}

/* 전화 — 딥그린 */
.bjd-cta-card.is-tel{background:var(--green);color:#fff}
.bjd-cta-card.is-tel .bjd-cta-ico{border:1.5px solid rgba(204,166,82,.55);color:var(--gold)}
.bjd-cta-card.is-tel .bjd-cta-ico::before{
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 013 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 013 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/></svg>") center/contain no-repeat;
}
.bjd-cta-card.is-tel .bjd-cta-lb{color:#EDE4CE;font-size:clamp(13.5px,3.6cqw,16px)}
.bjd-cta-num{
  display:block;margin:2px 0 4px;color:var(--gold);font-weight:700;
  font-size:clamp(21px,6.8cqw,33px);letter-spacing:-.01em;line-height:1.15;
  white-space:nowrap;
}
.bjd-cta-card.is-tel .bjd-cta-sub{color:#9DB2AE}
.bjd-cta-card.is-tel .bjd-cta-go{color:var(--gold);border-left-color:rgba(255,255,255,.18)}

/* 카카오 — 아이보리 + 골드 (브랜드 노란색을 배경으로 쓰지 않는다) */
.bjd-cta-card.is-kakao{background:#fff;border:1.5px solid var(--gold);color:var(--green)}
.bjd-cta-card.is-kakao .bjd-cta-ico{border:1.5px solid var(--gold);color:var(--green)}
.bjd-cta-card.is-kakao .bjd-cta-ico::before{
  width:56%;height:56%;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3.2c-5 0-9 3.2-9 7.1 0 2.5 1.7 4.7 4.2 6l-1 3.6c-.1.3.3.6.6.4l4.2-2.8c.3 0 .7.1 1 .1 5 0 9-3.2 9-7.2s-4-7.2-9-7.2z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3.2c-5 0-9 3.2-9 7.1 0 2.5 1.7 4.7 4.2 6l-1 3.6c-.1.3.3.6.6.4l4.2-2.8c.3 0 .7.1 1 .1 5 0 9-3.2 9-7.2s-4-7.2-9-7.2z'/></svg>") center/contain no-repeat;
}
.bjd-cta-card.is-kakao .bjd-cta-lb{color:var(--green)}
.bjd-cta-card.is-kakao .bjd-cta-sub{color:#6B7B74}
.bjd-cta-pill{
  display:inline-block;margin-top:9px;padding:7px 15px;border-radius:4px;
  background:var(--gold);color:var(--green);font-weight:700;
  font-size:clamp(11.5px,2.9cqw,13px);white-space:nowrap;
}
.bjd-cta-card.is-kakao .bjd-cta-go{color:var(--gold);border-left-color:#E4DCC8}

/* 꼬리 */
.bjd-cta-note{
  margin:20px 0 0 !important;display:flex;align-items:center;justify-content:center;gap:7px;
  color:#8A9A93;font-size:clamp(11.5px,2.9cqw,12.5px);line-height:1.55;word-break:keep-all;
}
.bjd-cta-note::before{
  content:"";flex:none;width:13px;height:13px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a5 5 0 015 5v3h1a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2v-8a2 2 0 012-2h1V7a5 5 0 015-5zm0 2a3 3 0 00-3 3v3h6V7a3 3 0 00-3-3z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a5 5 0 015 5v3h1a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2v-8a2 2 0 012-2h1V7a5 5 0 015-5zm0 2a3 3 0 00-3 3v3h6V7a3 3 0 00-3-3z'/></svg>") center/contain no-repeat;
}

/* 컴포넌트 폭 기준 축소 — 화면 폭이 아니라 CTA 자신의 폭에 반응 */
@container bjcta (max-width:340px){
  .bjd-cta-go{display:none}          /* 화살표를 접어 텍스트 폭을 확보 */
  .bjd-cta-card{gap:11px;padding:14px 13px}
  .bjd-cta-ico{width:40px}
}
@container bjcta (max-width:268px){
  .bjd-cta-ico{display:none}
  .bjd-cta-card{text-align:center;display:block}
  .bjd-cta-pill{white-space:normal}
}

/* ── 모바일 ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .bjd-cta-box{padding:24px 16px 20px;margin:30px 0}
  .bjd-cols{display:block}
  .bjd-toc{
    position:static;border-left:0;padding-left:0;
    border:1px solid var(--line);background:#fff;margin-bottom:30px;
  }
  .bjd-toc-d{padding:0}
  .bjd-toc-m{
    display:block;list-style:none;cursor:pointer;
    padding:14px 16px;font-size:13.5px;font-weight:700;color:var(--green);
  }
  .bjd-toc-m::-webkit-details-marker{display:none}
  .bjd-toc-t{display:none}
  .bjd-toc ol{padding:0 16px 16px}
  .bjd-summary .bjc-card{max-width:none}
  table.bjd-table th,table.bjd-table td{padding:11px 12px;font-size:13.5px}
  table.bjd-table tbody th{width:38%}
}