@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Savate:ital,wght@0,200..900;1,200..900&display=swap');

/* =========================================================================
 * sub.css — 업무분야 서브페이지 통합 CSS
 *   [이혼·재산분할] 히어로 / 이혼준비 스와이프 / 재산분할 / 형성과정 스와이프 / 전략 / CTA
 * ========================================================================= */

/* ===== 히어로 배너 (5678:4701 상단, 배너 1000) ===== */
.dv_hero { position: relative; box-sizing: border-box; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; overflow: hidden; background-size: cover; background-position: center; border-radius: 0 0 0 100px; color: #fff; padding: 190px 20px 70px; }
.dv_hero > * { position: relative; z-index: 1; }
.dv_hero_ttl { text-align: center; }
.dv_hero_center { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 60px; }
.dv_hero_h { font-size: 45px; font-weight: 700; letter-spacing: -0.9px; line-height: 1.4; }
.dv_hero_lwrap { display: block; text-align: center; }
.dv_hero_line { position: relative; display: inline-block; color: #b3b3b3; }
.dv_hero_line .rv { position: absolute; left: 0; top: 0; width: 0; overflow: hidden; white-space: nowrap; color: #fff; }
.dv_hero.reveal .l1 .rv { width: 100%; transition: width .9s cubic-bezier(.4, 0, .2, 1) .2s; }
.dv_hero.reveal .l2 .rv { width: 100%; transition: width .9s cubic-bezier(.4, 0, .2, 1) 1.1s; }
.dv_hero_desc { font-size: 18px; font-weight: 400; letter-spacing: -0.36px; line-height: 1.4; text-align: center; color: #fff; }
/* 히어로 아래 화살표 — #78838A 링 위로 흰색이 20초 동안 차오르고, 다 차면 화살표가 흰색으로 부드럽게 바뀐 뒤 위아래로 통통 */
.dv_hero_arrow { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 57px; height: 57px; margin-top: 40px;
    animation: dvArrowBounce 1.1s ease-in-out 20s infinite; }
.dv_hero_arrow_ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.dv_hero_arrow_track { fill: none; stroke: #78838A; stroke-width: 1; }
.dv_hero_arrow_prog { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round;
    stroke-dasharray: 169.646; stroke-dashoffset: 169.646;   /* 2πr, r=27 → 흰색 원이 20초간 차오름 */
    animation: dvArrowFill 20s linear forwards; }
.dv_hero_arrow_ic { position: relative; width: 20px; height: 20px; color: #78838A;
    animation: dvArrowColor 20s ease-in forwards; }   /* 링이 다 찰 무렵 화살표 색이 흰색으로 */
.dv_hero_arrow_ic::before { content: ""; position: absolute; left: 50%; top: 1px; width: 1.6px; height: 13px; background: currentColor; transform: translateX(-50%); }
.dv_hero_arrow_ic::after { content: ""; position: absolute; left: 50%; top: 8px; width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateX(-50%) rotate(45deg); }
@keyframes dvArrowFill { to { stroke-dashoffset: 0; } }
@keyframes dvArrowColor { 0%, 82% { color: #78838A; } 100% { color: #fff; } }
@keyframes dvArrowBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
    .dv_hero_arrow { animation: none; }
    .dv_hero_arrow_prog { animation: none; stroke-dashoffset: 0; }
    .dv_hero_arrow_ic { animation: none; color: #fff; }
}

/* ===== 하이라이트(글자 뒤 검은 배경) 등장 — 배경이 좌→우로 그어진 뒤, 글자가 좌→우로 등장 =====
 * 각 페이지의 검은 배경 마크(.dv_rp_mark/.cu_rp_mark/.ad_ev_mark/.fv_intro_mark/.du_intro_mark)에
 * 공통으로 .hl_mk 를 부여하고 내부 글자는 .hl_t 로 감싼다. 여백/라운드는 각 마크 클래스 유지. */
.hl_mk { position: relative; display: inline-block; }
.hl_mk::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--hl-bg, #111); }
.hl_mk .hl_t { position: relative; z-index: 1; display: inline-block; }
/* 스크립트가 준비(.is-hl)했을 때만 초기 숨김 → JS 미동작 시 그대로 노출(깨짐 방지) */
.hl_mk.is-hl::before { transform: scaleX(0); transform-origin: left center; }
.hl_mk.is-hl .hl_t { clip-path: inset(-30% 100% -30% 0); }
.hl_mk.is-hl.on::before { transform: scaleX(1); transition: transform .5s cubic-bezier(.5, 0, .15, 1); }
.hl_mk.is-hl.on .hl_t { clip-path: inset(-30% 0 -30% 0); transition: clip-path .55s cubic-bezier(.5, 0, .15, 1) .45s; }
@media (prefers-reduced-motion: reduce) {
    .hl_mk.is-hl::before { transform: scaleX(1); }
    .hl_mk.is-hl .hl_t { clip-path: none; }
}

/* ===== 공통 스와이프 (좌측 inner 정렬 · 우측 화면 끝까지) ===== */
/* margin-left(패딩 아님)로 두어 왼쪽(inner 왼쪽=헤딩 왼쪽)에서 슬라이드가 잘려 안 보이게 */
.dv_sw { overflow: hidden; cursor: grab; touch-action: pan-y; text-align: left; margin-left: max(20px, calc((100% - 1700px) / 2)); }
/* 히어로 다음 첫 스와이프(준비단계·주요업무): margin→padding 으로 컨테이너를 풀폭으로 → 슬라이드하면 좌측 여백까지 카드가 밀려 보임(시작은 그대로 inner 좌측) */
.dv_prep_sw, .fl_key_sw { margin-left: 0; padding-left: max(20px, calc((100% - 1700px) / 2)); box-sizing: border-box; }
.dv_sw.is-drag { cursor: grabbing; }
/* 블록 flex(+max-content) → 넘칠 때도 트랙이 항상 컨테이너 왼쪽에서 시작(반응형 포함) */
.dv_sw_track { display: flex; width: max-content; gap: 22px; will-change: transform; }

/* ===== 이혼 준비 (5717:829) ===== */
.dv_prep { padding: 130px 0; }
.dv_prep_head { margin-bottom: 40px; }
.dv_prep_tit { font-size: 35px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.4; color: #111; }
.dv_prep_desc { margin-top: 10px; font-size: 18px; font-weight: 400; letter-spacing: -0.18px; line-height: 1.5; color: #222; }
.dv_prep_card { flex: 0 0 552px; width: 552px; }
.dv_prep_img { width: 100%; aspect-ratio: 552 / 326; border-radius: 15px; background-size: cover; background-position: center; }
.dv_prep_tx { margin-top: 20px; text-align: center; }
.dv_prep_ctit { font-size: 22px; font-weight: 600; letter-spacing: -0.22px; line-height: 1.5; color: #222; }
.dv_prep_cdesc { margin-top: 8px; font-size: 18px; font-weight: 400; letter-spacing: -0.18px; line-height: 1.5; color: #111; }

/* ===== 이혼 이후 정리 문제 (5678:5404) ===== */
.dv_after { padding: 130px 0; }
.dv_after_in { display: flex; align-items: flex-start; gap: 22px; }
.dv_after_head { flex: 0 0 553px; max-width: 553px; }
.dv_after_tit { font-size: 35px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.4; color: #111; }
.dv_after_desc { margin-top: 10px; font-size: 18px; font-weight: 400; letter-spacing: -0.18px; line-height: 1.5; color: #222; }
.dv_after_list { flex: 1 1 auto; min-width: 0; list-style: none; margin: 0; padding: 0; }
.dv_after_item { display: flex; gap: 30px; align-items: flex-start; min-height: 150px; box-sizing: border-box; padding: 40px 0; border-top: 1px solid #c0ccd2; }
.dv_after_no { flex: 0 0 auto; font-family: 'UnShinmun', serif; font-size: 40px; letter-spacing: -0.8px; line-height: 1.5; color: #78838a; }
.dv_after_body { min-width: 0; }
.dv_after_name { font-weight: 500; font-size: 28px; line-height: 1.6; letter-spacing: -0.48px; color: #111; }
.dv_after_txt { font-size: 18px; font-weight: 400; line-height: 1.6; letter-spacing: -0.48px; color: #111; }

/* ===== 재산분할 (스크롤 시 배경 100% 확장) (5710:819) ===== */
.dv_rp { padding: 40px 0; }
/* 도달 시 width:100%로 부드럽게 확장 — 폭은 sub.js가 px로 지정(px↔px 전환이라 확실히 부드러움) */
.dv_rp_bg { position: relative; box-sizing: border-box; width: 1700px; max-width: 100%; height: 600px; margin: 0 auto; overflow: hidden; background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; color: #fff;
    transition: width 1.4s cubic-bezier(.22, 1, .36, 1), border-radius 1.4s cubic-bezier(.22, 1, .36, 1);  background-size:100vw 100%}
.dv_rp_bg.expand { border-radius: 0; }
.dv_rp_h { font-size: 35px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.4; padding-bottom:20px}
.dv_rp_mark { padding: 2px 10px; }
.dv_rp_desc { font-size: 20px; font-weight: 400; letter-spacing: -0.2px; line-height: 1.5; }

/* ===== 형성 과정 (스와이프 · 호버 상승) (5726:1289) ===== */
.dv_form { padding: 130px 0; }
.dv_form_head { text-align: center; margin-bottom: 60px; font-size: 45px; font-weight: 700; letter-spacing: -0.9px; line-height: 1.3; color: #111; }
.dv_form_head .off { color: #b3b3b3; }
/* 가로가 남으면 카드 묶음 중앙정렬, 넘치면 safe가 자동으로 왼쪽 시작(스와이프) → 중간 카드 잘림 방지 */
.dv_form_sw { box-sizing: border-box; width: calc(100% - 100px); margin: 0 auto; padding-top: 40px; display: flex; justify-content: safe center; }
.dv_sw.is-drag .dv_form_card { pointer-events: none; }   /* 드래그 중 호버 상승 방지(버벅임↓) */
.dv_form_card { position: relative; flex: 0 0 300px; width: 300px; height: 610px; border-radius: 15px; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; padding: 70px 20px; text-align: center; color: #fff; transition: transform .4s cubic-bezier(.4, 0, .2, 1); }
.dv_form_card:hover { transform: translateY(-32px); }
.dv_form_bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.dv_form_grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(120, 148, 168, 0) 0%, rgba(76, 93, 106, 0) 50%, #20262b 100%); }
.dv_form_tx { position: relative; z-index: 1; }
.dv_form_name { font-size: 25px; font-weight: 600; letter-spacing: -0.25px; line-height: 1.5; }
.dv_form_desc { margin-top: 10px; font-size: 18px; font-weight: 400; letter-spacing: -0.18px; line-height: 1.5; }

/* ===== 그날의 재산분할 전략 (다크 밴드) (5710:830) ===== */
/* 좌측 하단 100px 라운드 → 그 안으로 아래 CTA(밝은) 섹션 배경이 비쳐 보임 */
.dv_str { position: relative; z-index: 1; padding: 160px 0; background-color: #20262b; background-size: cover; background-position: center; color: #fff; border-radius: 0 0 0 200px; }
.dv_str_label { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 500; letter-spacing: -0.36px; line-height: 1.5; }
.dv_str_dot { width: 7px; height: 7px; background: #78838a; flex: 0 0 auto; }
.dv_str_h { margin-top: 20px; font-size: 45px; font-weight: 700; letter-spacing: -0.9px; line-height: 1.4; }
.dv_str_sub { margin-top: 20px; font-size: 22px; font-weight: 400; letter-spacing: -0.22px; line-height: 1.5; }
.dv_str_bot { margin-top: 300px; }
.dv_str_pills { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }
/* pill 갯수별 변형 — _01: 한 줄에 2개(예: 상간자소송 6개). 폭 제한으로 2개씩 줄바꿈(자연폭 유지) */
.dv_str_pills_01 { max-width: 991px; }
.dv_str_pill { display: inline-flex; align-items: center; gap: 12px; padding: 12px 30px 12px 20px; border: 1px solid #fff; border-radius: 50px; font-size: 20px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.5; }
.dv_str_ck { width: 24px; height: 24px; flex: 0 0 auto; }
.dv_str_desc { margin-top: 30px; font-size: 18px; font-weight: 400; letter-spacing: -0.36px; line-height: 1.5; }

/* ===== CTA (5678:5410) — 밝은 밴드, 전략 라운드 아래로 겹쳐 배경이 비치게 ===== */
.dv_cta { position: relative; z-index: 0; margin-top: -100px; background-color: #f5f3ef; background-size: cover; background-position: center; padding: 340px 20px 250px; display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.dv_cta_tx { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #111; }
.dv_cta_h { font-size: 35px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.4; }
.dv_cta_desc { font-size: 18px; font-weight: 500; letter-spacing: -0.36px; line-height: 1.5; }
.dv_cta_btn { display: inline-flex; align-items: center; justify-content: flex-end; gap: 38px; box-sizing: border-box; width: 370px; height: 60px; padding: 8px 10px; border-radius: 50px; background: linear-gradient(90deg, #20262b 0%, #4c5d6a 50%, #7894a8 100%); }
.dv_cta_btn:hover { filter: brightness(1.08); text-decoration: none; }
/* 마우스 오버 시 옆 +원 아이콘 360도 회전 */
.dv_cta_btn:hover .dv_cta_btn_ic { transform: rotate(360deg); }
.dv_cta_btn_tx { font-size: 20px; font-weight: 500; letter-spacing: -0.2px; color: #fff; }
.dv_cta_btn_tx b { font-weight: 700; }
.dv_cta_btn_ic { width: 42px; height: 42px; flex: 0 0 auto; border-top: 1px solid #fff;  border-bottom: 1px solid #fff;    border-radius: 50%; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }

/* ============================================================
 * [상간자소송] adultery.php 전용 (Figma 5717:482)
 * ============================================================ */
/* 히어로 헤딩 — 1행 흰색 / 2행 회색(#b3b3b3), 정적 */
.ad_hero_h { font-size: 45px; font-weight: 700; letter-spacing: -0.9px; line-height: 1.4; text-align: center; color: #fff; }
.ad_hero_h .l2 { color: #b3b3b3; }

/* ===== FAQ 아코디언 (5717:716) ===== */
.ad_faq { padding: 220px 0; }
.ad_faq_in { display: flex; align-items: flex-start; gap: 22px; }
.ad_faq_head { flex: 0 0 553px; max-width: 553px; }
.ad_faq_tit { font-size: 35px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.4; color: #111; }
.ad_faq_desc { margin-top: 10px; font-size: 18px; font-weight: 400; letter-spacing: -0.18px; line-height: 1.5; color: #222; }
.ad_faq_list { flex: 1 1 auto; min-width: 0; }
/* 항목: py40 px8, 열림 214px / 닫힘 140px (답변 grid 0fr↔1fr 전환) */
.ad_faq_item { box-sizing: border-box; padding: 40px 8px; border-top: 1px solid #c0ccd2; }
.ad_faq_q { display: flex; align-items: center; gap: 50px; width: 100%; padding: 0; margin: 0; background: none; border: 0; cursor: pointer; text-align: left; color: inherit; }
.ad_faq_qmark { flex: 0 0 auto; font-family: 'UnShinmun', serif; font-size: 40px; letter-spacing: -0.8px; line-height: 1.5; color: #2f3a42; }
.ad_faq_qtx { flex: 1 1 auto; min-width: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.48px; line-height: 1.6; color: #111; }
.ad_faq_ic { flex: 0 0 45px; width: 45px; height: 45px; background: url("../img/sub/adultery/ico-faq-plus.svg") center / contain no-repeat; filter: drop-shadow(0 2px 3.5px rgba(0, 0, 0, .15)); }
.ad_faq_item.open .ad_faq_ic { background-image: url("../img/sub/adultery/ico-faq-toggle.svg"); }
.ad_faq_a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1); }
.ad_faq_item.open .ad_faq_a { grid-template-rows: 1fr; }
.ad_faq_a_in { overflow: hidden; }
.ad_faq_arow { display: flex; align-items: center; gap: 50px; padding-top: 10px; }
.ad_faq_amark { flex: 0 0 auto; font-family: 'UnShinmun', serif; font-size: 40px; letter-spacing: -0.8px; line-height: 1.5; color: #78838a; }
.ad_faq_atx { min-width: 0; font-size: 20px; font-weight: 400; letter-spacing: -0.4px; line-height: 1.6; color: #111; }

/* ===== 증거 유형 그리드 (5891:664) — 헤딩(좌측 절대배치 580px) + 카드 5개(우측 1271px 그리드) ===== */
.ad_ev { position: relative; padding: 220px 0 220px; background: url("../img/sub/adultery/ad_ev_bg.webp") no-repeat center top / cover; }
.ad_ev .inner { position: relative; }
/* 카드 그리드: 3열 408px, inner 우측 정렬(1271/1700=74.77%). 첫 카드를 col2에 두어 1행1열을 비우고 헤딩이 겹침 */
.ad_ev_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px 23px; width: 74.77%; max-width: 1271px; margin-left: auto; }
.ad_ev_card:first-child { grid-column: 2; }
.ad_ev_head { position: absolute; left: 0; top: 0; width: 580px; z-index: 2; }
.ad_ev_tit { font-size: 45px; font-weight: 700; letter-spacing: -0.9px; line-height: 1.3; color: #111; white-space: nowrap; }
.ad_ev_mark { color: #fff; padding: 2px 5px; border-radius: 6px; }
.ad_ev_sub { margin-top: 40px; font-size: 25px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.4; color: #111; }
.ad_ev_desc { margin-top: 10px; font-size: 18px; font-weight: 400; letter-spacing: -0.18px; line-height: 1.5; color: #222; }
.ad_ev_card { display: flex; flex-direction: column; gap: 13px; }
.ad_ev_img { position: relative; width: 100%; aspect-ratio: 408 / 291; border-radius: 15px; background-size: cover; background-position: center bottom; }
.ad_ev_img::after { content: ""; position: absolute; inset: 0; border-radius: 15px; background: rgba(0, 0, 0, .1); }
.ad_ev_name { font-size: 22px; font-weight: 600; letter-spacing: -0.22px; line-height: 1.5; color: #222; }
.ad_ev_cdesc { margin-top: 6px; font-size: 18px; font-weight: 400; letter-spacing: -0.18px; line-height: 1.5; color: #222; }

/* 전략 다크 밴드는 공통 .dv_str 사용(배경은 오버레이 없이 어둡게 구운 이미지) */

/* ===== CTA (5810:2459) — 밝은 밴드, 전략 라운드 아래로 겹쳐 배경이 비치게 ===== */
.ad_cta { position: relative; z-index: 0; margin-top: -190px; background-color: #fff; background-size: cover; background-position: center bottom; padding: 330px 20px 160px; display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; overflow: hidden; }
.ad_cta::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .45); pointer-events: none; }   /* 시안 이미지 55% 불투명 근사 */
.ad_cta > * { position: relative; z-index: 1; }
.ad_cta_tx { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #111; }

@media (max-width:1800px) {
.dv_str {border-radius: 0 0 0 150px; }
.ad_ev_head {left:20px}
}

/* ===== 반응형 ===== */
@media (max-width: 1024px) {
    .dv_hero { padding: 150px 20px 60px; border-radius: 0 0 0 60px; }
    .dv_hero_h { font-size: 34px; }
    .dv_hero_desc { font-size: 16px; }
    .sv_en { font-size: 38px; }
    .sv_ko { font-size: 18px; }
    .dv_prep { padding: 90px 0; }
    .dv_prep_tit { font-size: 28px; }
    .dv_prep_card { flex-basis: 60vw; width: 60vw; max-width: 460px; }
    .dv_prep_ctit { font-size: 20px; }
    .dv_after { padding: 90px 0; }
    .dv_after_head { flex-basis: 40%; }
    .dv_after_tit { font-size: 28px; }
    .dv_after_no { font-size: 34px; }
    .dv_after_name { font-size: 24px; }
    .dv_after_txt { font-size: 16px; }
    .dv_rp_bg { height: 480px; }
    .dv_rp_h { font-size: 28px; }
    .dv_rp_desc { font-size: 18px; }
    .dv_form { padding: 90px 0; }
    .dv_form_head { font-size: 34px; margin-bottom: 44px; }
    .dv_form_card { flex-basis: 260px; width: 260px; height: 520px; }
    .dv_form_sw { width: calc(100% - 60px); justify-content: flex-start; }   /* 반응형: 항상 왼쪽 시작 */
    .dv_str { padding: 90px 0; border-radius: 0 0 0 60px; }
    .dv_str_h { font-size: 34px; }
    .dv_str_sub { font-size: 18px; }
    .dv_str_bot { margin-top: 300px; }
    .dv_str_pill { font-size: 17px; padding: 10px 22px 10px 16px; }
    .dv_str_ck { width: 22px; height: 22px; }
    .dv_cta { margin-top: -60px; padding: 240px 20px 160px; }
    .dv_cta_h { font-size: 28px; }
}
@media (max-width: 768px) {
    .dv_hero { padding: 120px 20px 50px; border-radius: 0 0 0 40px; }
    .dv_hero_center { gap: 40px; }
    .dv_hero_h { font-size: 23px; letter-spacing: -0.5px; }
    .dv_hero_line .rv { white-space: nowrap; }
    .dv_hero_desc { font-size: 14px; }
    .dv_hero_arrow { width: 48px; height: 48px; }
    .sv_en { font-size: 30px; }
    .sv_ko { font-size: 16px; }
    .dv_prep { padding: 60px 0; }
    .dv_prep_tit { font-size: 23px; }
    .dv_prep_desc { font-size: 15px; }
    .dv_prep_card { flex-basis: 100vw; width: 100vw; max-width: 360px; }
    .dv_prep_ctit { font-size: 18px; }
    .dv_prep_cdesc { font-size: 15px; }
    .dv_after { padding: 60px 0; }
    .dv_after_in { flex-direction: column; gap: 30px; }
    .dv_after_head { flex: none; max-width: none; }
    .dv_after_tit { font-size: 23px; }
    .dv_after_desc { font-size: 15px; }
    .dv_after_item { min-height: 0; padding: 24px 0; gap: 18px; }
    .dv_after_no { font-size: 30px; }
    .dv_after_name { font-size: 20px; }
    .dv_after_txt { font-size: 15px; }
    .dv_rp_bg { height: 340px; gap: 14px; padding: 0 20px; box-sizing: border-box; }
    .dv_rp_h { font-size: 20px; }
    .dv_rp_desc { font-size: 14px; white-space: normal; }
    .dv_form { padding: 60px 0; }
    .dv_form_head { font-size: 23px; margin-bottom: 36px; }
    .dv_form_card { flex-basis: 220px; width: 220px; height: 440px; padding: 50px 18px; }
    .dv_form_card:hover { transform: translateY(-22px); }
    .dv_form_name { font-size: 21px; }
    .dv_form_desc { font-size: 15px; }
    .dv_form_sw { width: calc(100% - 40px); }
    .dv_str { padding: 60px 0; border-radius: 0 0 0 40px; }
    .dv_str_label { font-size: 16px; }
    .dv_str_h { font-size: 23px; }
    .dv_str_sub { font-size: 16px; }
    .dv_str_bot { margin-top: 200px; }
    .dv_str_pills { gap: 8px; }
    .dv_str_desc br {display:none}
    .dv_str_pill { font-size: 15px; padding: 9px 16px 9px 14px; gap: 8px; }
    .dv_str_ck { width: 20px; height: 20px; }
    .dv_str_desc { font-size: 15px; white-space: normal; }
    .dv_cta { margin-top: -40px; padding: 150px 20px 90px; gap: 30px; }
    .dv_cta_h { font-size: 23px; }
    .dv_cta_desc { font-size: 15px; }
    .dv_cta_btn { width: 100%; max-width: 340px; }
    .dv_prep_cdesc br {display:none}
}
@media (max-width: 486px) {
    .dv_str_bot { margin-top: 100px; }
    .dv_hero_h { font-size: 20px; }
    .dv_hero_desc { font-size: 13px; }
    .sv_en { font-size: 24px; }
    .sv_ko { font-size: 15px; }
    .dv_prep_tit { font-size: 20px; }
    .dv_prep_desc { font-size: 14px; }
    .dv_prep_ctit { font-size: 17px; }
    .dv_prep_cdesc { font-size: 14px; }
    .dv_after_tit { font-size: 20px; }
    .dv_after_desc { font-size: 14px; }
    .dv_after_no { font-size: 26px; }
    .dv_after_name { font-size: 18px; }
    .dv_after_txt { font-size: 14px; }
    .dv_rp_h { font-size: 18px; }
    .dv_rp_desc { font-size: 13px; }
    .dv_form_head { font-size: 20px; }
    .dv_form_name { font-size: 19px; }
    .dv_form_desc { font-size: 14px; }
    .dv_str_label { font-size: 15px; }
    .dv_str_h { font-size: 20px; }
    .dv_str_sub { font-size: 14px; }
    .dv_str_pill { font-size: 14px; }
    .dv_str_desc { font-size: 14px; }
    .dv_cta_h { font-size: 20px; }
    .dv_cta_desc { font-size: 14px; }
    .dv_cta_btn_tx { font-size: 16px; }
}

/* ===== [상간자소송] 반응형 ===== */
@media (max-width: 1800px) {
    .ad_str { border-radius: 0 0 0 150px; }
}
/* 1200 이하: 증거 섹션은 헤딩을 위로 올리고(정적) 카드 그리드를 전체 너비로 전환 */
@media (max-width: 1200px) {
    .ad_ev .inner { position: static; }
    .ad_ev_head { position: static; width: auto; max-width: 760px; margin-bottom: 50px; }
    .ad_ev_grid { width: 100%; max-width: none; margin-left: 0; }
    .ad_ev_card:first-child { grid-column: auto; }
    .ad_ev_tit { white-space: normal; }
}
@media (max-width: 1024px) {
    .ad_hero_h { font-size: 34px; }
    .ad_faq { padding: 90px 0; }
    .ad_faq_tit { font-size: 28px; }
    .ad_faq_q, .ad_faq_arow { gap: 28px; }
    .ad_faq_qmark, .ad_faq_amark { font-size: 32px; }
    .ad_faq_qtx { font-size: 20px; }
    .ad_faq_atx { font-size: 18px; }
    .ad_ev { padding: 90px 0 100px; }
    .ad_ev_grid { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
    .ad_ev_tit { font-size: 34px; }
    .ad_ev_sub { font-size: 22px; }
    .ad_str { padding: 100px 0; border-radius: 0 0 0 100px; }
    .ad_str_h { font-size: 34px; }
    .ad_str_sub { font-size: 18px; }
    .ad_str_bot { margin-top: 90px; }
    .ad_str_pill { font-size: 17px; padding: 10px 22px 10px 16px; }
    .ad_str_ck { width: 22px; height: 22px; }
    .ad_cta { margin-top: -100px; padding: 220px 20px 110px; }
}
@media (max-width: 768px) {
    .ad_hero_h { font-size: 23px; letter-spacing: -0.5px; }
    .ad_faq { padding: 60px 0; }
    .ad_faq_in { flex-direction: column; gap: 30px; }
    .ad_faq_head { flex: none; max-width: none; }
    .ad_faq_tit { font-size: 23px; }
    .ad_faq_desc { font-size: 15px; }
    .ad_faq_item { padding: 26px 4px; }
    .ad_faq_q, .ad_faq_arow { gap: 16px; }
    .ad_faq_qmark, .ad_faq_amark { font-size: 26px; }
    .ad_faq_qtx { font-size: 17px; }
    .ad_faq_atx { font-size: 15px; }
    .ad_faq_ic { flex-basis: 34px; width: 34px; height: 34px; }
    .ad_ev { padding: 60px 0 70px; }
    .ad_ev_grid { grid-template-columns: 1fr; gap: 30px; }
    .ad_ev_tit { font-size: 23px; }
    .ad_ev_sub { font-size: 18px; }
    .ad_ev_desc { font-size: 15px; }
    .ad_ev_desc br { display: none; }
    .ad_ev_name { font-size: 20px; }
    .ad_ev_cdesc { font-size: 15px; }
    .ad_str { padding: 70px 0; border-radius: 0 0 0 60px; }
    .ad_str_label { font-size: 16px; }
    .ad_str_h { font-size: 23px; }
    .ad_str_sub { font-size: 16px; }
    .ad_str_bot { margin-top: 50px; }
    .ad_str_pills { gap: 8px; }
    .ad_str_pill { font-size: 15px; padding: 9px 16px 9px 14px; gap: 8px; }
    .ad_str_ck { width: 20px; height: 20px; }
    .ad_str_note { font-size: 15px; }
    .ad_str_note br { display: none; }
    .ad_cta { margin-top: -60px; padding: 130px 20px 80px; gap: 30px; }
}
@media (max-width: 486px) {
    .ad_hero_h { font-size: 20px; }
    .ad_faq_tit { font-size: 20px; }
    .ad_faq_qmark, .ad_faq_amark { font-size: 22px; }
    .ad_faq_qtx { font-size: 15px; }
    .ad_faq_atx { font-size: 14px; }
    .ad_ev_tit { font-size: 20px; }
    .ad_ev_sub { font-size: 16px; }
    .ad_ev_desc { font-size: 14px; }
    .ad_ev_name { font-size: 18px; }
    .ad_ev_cdesc { font-size: 14px; }
    .ad_str_h { font-size: 20px; }
    .ad_str_sub { font-size: 14px; }
    .ad_str_pill { font-size: 14px; }
    .ad_str_note { font-size: 14px; }
}

/* ============================================================
 * [학교폭력·가정폭력·성범죄] violence.php 전용 (Figma 5830:3113)
 * ============================================================ */
/* 히어로 · 전략 밴드 · CTA 는 공통 .dv_hero / .dv_str / .dv_cta 클래스 사용(디자인 동일) */

/* ===== 인트로 (5841:3803) ===== */
.fv_intro { padding: 130px 0 0; }
.fv_intro_in { max-width: 947px; text-align: center; }
.fv_intro_h { font-size: 45px; font-weight: 600; letter-spacing: -0.9px; line-height: 1.4; color: #111; }
.fv_intro_mark { color: #fff; padding: 2px 10px; }
.fv_intro_desc { margin-top: 24px; font-size: 18px; font-weight: 400; letter-spacing: -0.18px; line-height: 1.5; color: #222; }

/* ===== 분야별 대응 (5855:679) ===== */
.fv_field { padding: 60px 0 130px; }
.fv_row { display: flex; align-items: center; gap: 120px; padding: 60px 0; border-top: 1px solid #c0ccd2; }
.fv_row--rev { flex-direction: row-reverse; }
.fv_row_img { flex: 0 0 750px; width: 750px; height: 700px; border-radius: 15px; background-size: cover; background-position: center; }
.fv_row_tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.fv_row_head { display: flex; flex-direction: column; gap: 15px; }
.fv_row_tit { font-size: 35px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.4; color: #111; }
.fv_row_lead { display: flex; flex-direction: column; gap: 10px; }
.fv_row_sub { font-size: 20px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.5; color: #111; }
.fv_row_desc { font-size: 18px; font-weight: 400; letter-spacing: -0.18px; line-height: 1.5; color: #111; }
.fv_row_block { display: flex; flex-direction: column; gap: 12px; }
.fv_row_label { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 500; letter-spacing: -0.36px; line-height: 1.5; color: #2f3a42; }
.fv_dot { width: 7px; height: 7px; background: #78838a; flex: 0 0 auto; }
.fv_tags { display: flex; flex-wrap: wrap; gap: 12px; }
.fv_tag { display: inline-flex; align-items: center; padding: 10px 20px; border: 1px solid #ccc; border-radius: 10px; font-size: 18px; font-weight: 500; letter-spacing: -0.18px; line-height: 1.5; color: #111; }
.fv_steps { list-style: none; margin: 0; padding: 0; width: 698px; max-width: 100%; }
.fv_step { display: flex; flex-direction: column; gap: 4px; padding: 10px 20px; border-top: 1px solid #ccc; }
.fv_step_t { font-size: 18px; font-weight: 500; letter-spacing: -0.18px; line-height: 1.5; color: #111; }
.fv_step_d { font-size: 17px; font-weight: 400; letter-spacing: -0.17px; line-height: 1.5; color: #111; }
.fv_note { box-sizing: border-box; width: 698px; max-width: 100%; padding: 30px; background: #f5f3ef; text-align: center; font-size: 18px; font-weight: 500; letter-spacing: -0.18px; line-height: 1.5; color: #111; }

/* 분야별 대응 좌우 분할 행(학교폭력/가정폭력/성범죄): PC에서만 좌→우 / 우→좌 슬라이드 인
 * (모바일 ≤768px 에서는 세로로 쌓이므로 기존 rv-up = 밑에서 위로 모션 그대로 유지)
 * opacity/transition/지연은 reveal.css 기본(.rv-item)에 위임하고 transform 방향(축)만 덮어씀.
 * 초기 transform 이 기본 is-in(.rv-item.is-in)보다 우선하므로 진입 리셋도 함께 명시.
 * 거리·값은 reveal.css 의 .rv-left/.rv-right(52px, translate3d)와 동일하게 맞춤 */
@media (min-width: 769px) {
    html.rv-ready .fv_row .fv_row_img.rv-item      { transform: translate3d(-52px, 0, 0); }  /* 일반 행: 이미지=왼쪽 → 왼쪽에서 */
    html.rv-ready .fv_row .fv_row_tx.rv-item       { transform: translate3d(52px, 0, 0); }   /* 일반 행: 텍스트=오른쪽 → 오른쪽에서 */
    html.rv-ready .fv_row--rev .fv_row_img.rv-item { transform: translate3d(52px, 0, 0); }    /* 반전 행: 이미지=오른쪽 → 오른쪽에서 */
    html.rv-ready .fv_row--rev .fv_row_tx.rv-item  { transform: translate3d(-52px, 0, 0); }   /* 반전 행: 텍스트=왼쪽 → 왼쪽에서 */
    html.rv-ready .fv_row .fv_row_img.rv-item.is-in,
    html.rv-ready .fv_row .fv_row_tx.rv-item.is-in { transform: translate3d(0, 0, 0); }       /* 진입 완료 → 제자리 */
}

/* ===== 이런 상황이라면 상담이 필요합니다 (5855:759) ===== */
.fv_sit { padding: 130px 0; }
.fv_sit_in { display: flex; align-items: flex-start; gap: 22px; }
.fv_sit_head { flex: 0 0 411px; }
.fv_sit_tit { font-size: 35px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.4; color: #111; }
.fv_sit_grid { flex: 1 1 auto; min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.fv_sit_item { box-sizing: border-box; min-height: 112px; padding: 40px 0; border-top: 1px solid #c0ccd2; font-size: 20px; font-weight: 400; letter-spacing: -0.4px; line-height: 1.6; color: #111; }
.fv_sit_item:nth-last-child(-n+2) { border-bottom: 1px solid #c0ccd2; }

/* ===== 그날의 대응 전략 — 밴드·헤딩은 공통 .dv_str 사용, 카드 레이아웃만 전용 ===== */
/* 상단(라벨/헤딩/부제)→카드 간격은 divorce와 동일하게 120px */
.fv_str_cards { margin-top: 300px; display: flex; gap: 12px; list-style: none; padding: 0; margin-bottom: 0; }
.fv_str_card { display: flex; flex-direction: column; gap: 10px; }
.fv_str_pill { display: inline-flex; align-items: center; gap: 12px; box-sizing: border-box; width: 374px; padding: 12px 30px 12px 20px; border: 1px solid #fff; border-radius: 50px; font-size: 20px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.5; }
.fv_str_ck { width: 24px; height: 24px; flex: 0 0 auto; }
.fv_str_cdesc { font-size: 18px; font-weight: 400; letter-spacing: -0.36px; line-height: 1.5; color: #fff; }

/* CTA 는 공통 .dv_cta 사용(높이·오버랩 divorce와 동일) */

/* ===== 반응형 (폰트 축소) ===== */
@media (max-width: 1024px) {
    .fv_hero { min-height: 720px; padding: 150px 20px 60px; border-radius: 0 0 0 60px; }
    .fv_hero_h { font-size: 34px; }
    .fv_hero_desc { font-size: 16px; }
    .fv_intro { padding: 90px 0 0; }
    .fv_intro_h { font-size: 34px; }
    .fv_intro_desc { font-size: 16px; }
    .fv_field { padding: 40px 0 90px; }
    .fv_row { gap: 40px; padding: 40px 0; }
    .fv_row_img { flex-basis: 40%; width: 40%; height: 460px; }
    .fv_row_tit { font-size: 28px; }
    .fv_row_sub { font-size: 18px; }
    .fv_row_desc { font-size: 16px; }
    .fv_tag { font-size: 16px; }
    .fv_step_t { font-size: 16px; }
    .fv_step_d { font-size: 15px; }
    .fv_note { font-size: 16px; }
    .fv_sit { padding: 90px 0; }
    .fv_sit_tit { font-size: 28px; }
    .fv_sit_item { font-size: 18px; }
    .fv_str { padding: 90px 0; border-radius: 0 0 0 60px; }
    .fv_str_h { font-size: 34px; }
    .fv_str_sub { font-size: 18px; }
    .fv_str_cards { margin-top: 90px; flex-wrap: wrap; }
    .fv_str_pill { font-size: 17px; }
    .fv_str_cdesc { font-size: 16px; }
    .fv_cta { margin-top: -60px; padding: 240px 20px 120px; }
    .fv_cta_box { padding: 0 20px; }
    .fv_cta_h { font-size: 28px; }
}
@media (max-width: 768px) {
	.fv_row_tx  {width:100%}
	.fv_steps {width:100%}
    .fv_hero { min-height: 560px; padding: 120px 20px 50px; border-radius: 0 0 0 40px; }
    .fv_hero_center { gap: 40px; }
    .fv_hero_h { font-size: 23px; letter-spacing: -0.5px; }
    .fv_hero_desc { font-size: 14px; }
    .fv_hero_arrow img { width: 48px; height: 48px; }
    .fv_intro_h { font-size: 23px; }
    .fv_intro_desc { font-size: 15px; }
    .fv_row { flex-direction: column; gap: 24px; padding: 30px 0; }
    .fv_row--rev { flex-direction: column; }
    .fv_row_img { flex: none; width: 100%; height: 300px; }
    .fv_row_tx { gap: 20px; }
    .fv_row_tit { font-size: 23px; }
    .fv_row_sub { font-size: 16px; }
    .fv_row_desc { font-size: 15px; }
    .fv_tag { font-size: 15px; padding: 8px 14px; }
    .fv_step_t { font-size: 16px; }
    .fv_step_d { font-size: 14px; }
    .fv_note { font-size: 15px; padding: 24px; }
    .fv_sit { padding: 60px 0; }
    .fv_sit_in { flex-direction: column; gap: 24px; }
    .fv_sit_head { flex: none; }
    .fv_sit_tit { font-size: 23px; }
    .fv_sit_grid { grid-template-columns: 1fr; width: 100%;}
    .fv_sit_item { min-height: 0; padding: 20px 0; font-size: 15px; border-bottom: 0; }
    .fv_sit_item:last-child { border-bottom: 1px solid #c0ccd2; }
    .fv_str { padding: 60px 0; border-radius: 0 0 0 40px; }
    .fv_str_label { font-size: 16px; }
    .fv_str_h { font-size: 23px; }
    .fv_str_sub { font-size: 16px; }
    .fv_str_cards { flex-direction: column; gap: 20px; margin-top: 50px; }
    .fv_str_pill { width: 100%; max-width: 374px; font-size: 16px; padding: 11px 20px 11px 16px; }
    .fv_str_cdesc { font-size: 15px; }
    .fv_cta { margin-top: -40px; padding: 150px 20px 90px; }
    .fv_cta_box { padding: 0; gap: 30px; }
    .fv_cta_h { font-size: 23px; }
    .fv_cta_desc { font-size: 15px; }
    .fv_cta_btn { width: 100%; max-width: 340px; }
	
}
@media (max-width: 486px) {
    .fv_hero_h { font-size: 20px; }
    .fv_hero_desc { font-size: 13px; }
    .fv_intro_h { font-size: 20px; }
    .fv_intro_desc { font-size: 14px; }
    .fv_row_img { height: 220px; }
    .fv_row_tit { font-size: 20px; }
    .fv_row_sub { font-size: 15px; }
    .fv_row_desc { font-size: 14px; }
    .fv_tag { font-size: 12px; }
    .fv_step_t { font-size: 15px; }
    .fv_step_d { font-size: 13px; }
    .fv_note { font-size: 14px; }
    .fv_sit_tit { font-size: 20px; }
    .fv_sit_item { font-size: 14px; }
    .fv_str_label { font-size: 15px; }
    .fv_str_h { font-size: 20px; }
    .fv_str_sub { font-size: 14px; }
    .fv_str_pill { font-size: 15px; }
    .fv_str_cdesc { font-size: 14px; }
    .fv_cta_h { font-size: 20px; }
    .fv_cta_desc { font-size: 14px; }
    .fv_cta_btn_tx { font-size: 16px; }
}

/* ============================================================
 * 양육권분쟁(custody) 전용 — 히어로/준비/전략/CTA 는 dv_ 공통 사용,
 *   ① 양육권과 함께 결정(cu_rp): dv_rp 배경 확장 재사용 + 흰 텍스트 콘텐츠
 *   ② 양육권 판단 기준(cu_cr): 좌 이미지 + 우 01~06 리스트
 * ============================================================ */
/* ① 배경 확장 밴드 안 콘텐츠 (dv_rp_bg 위, 흰색 글자) */
.dv_rp_bg.cu_rp_bg { height: auto; min-height: 811px; padding: 70px 20px; background-size: 100vw 100%; }   /* 확장 시 이미지 고정(가로 뷰포트폭)·영역만 확장 */
.cu_rp_inner { width: 100%; max-width: 1402px; display: flex; flex-direction: column; align-items: center; gap: 60px; }
.cu_rp_head { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cu_rp_tit { font-size: 35px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.3; text-align: center; }
.cu_rp_mark { padding: 2px 10px; }
.cu_rp_desc { font-size: 20px; font-weight: 400; letter-spacing: -0.2px; line-height: 1.5; text-align: center; }
.cu_rp_rights { display: flex; width: 100%; list-style: none; margin: 0; padding: 0; }
.cu_rp_right { flex: 1 1 0; min-width: 0; padding: 20px 10px; text-align: center; }
.cu_rp_right:not(:last-child) { border-right: 1px solid #fff; }
.cu_rp_rname { font-size: 25px; font-weight: 600; letter-spacing: -0.25px; line-height: 1.5; }
.cu_rp_rdesc { margin-top: 10px; font-size: 18px; font-weight: 400; letter-spacing: -0.18px; line-height: 1.5; }
.cu_rp_note { width: 100%; box-sizing: border-box; padding: 50px 40px; border-radius: 15px; background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); text-align: center; color: #111; font-size: 18px; font-weight: 500; letter-spacing: -0.18px; line-height: 1.5; }

/* ② 양육권 판단 기준 (좌 이미지 + 우 리스트) */
.cu_cr { padding: 130px 0; }
.cu_cr_in { display: flex; align-items: flex-end; gap: 124px; }
.cu_cr_img { flex: 0 0 450px; width: 450px; height: 648px; border-radius: 15px; background-size: cover; background-position: center bottom; }
.cu_cr_body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 60px; }
.cu_cr_head { display: flex; flex-direction: column; gap: 30px; }
.cu_cr_tit { font-size: 45px; font-weight: 700; letter-spacing: -0.9px; line-height: 1.3; color: #111; }
.cu_cr_hl { color: #78838a; }
.cu_cr_sub { display: flex; flex-direction: column; gap: 10px; }
.cu_cr_sub1 { font-size: 25px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.4; color: #111; }
.cu_cr_sub2 { font-size: 18px; font-weight: 400; letter-spacing: -0.18px; line-height: 1.5; color: #222; }
.cu_cr_list { list-style: none; margin: 0; padding: 0; }
.cu_cr_item { display: flex; align-items: center; gap: 50px; padding: 24px 0; border-top: 1px solid #c0ccd2; }
.cu_cr_no { flex: 0 0 auto; font-family: 'UnShinmun', serif; font-size: 40px; letter-spacing: -0.8px; line-height: 1.5; color: #78838a; }
.cu_cr_txt { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.cu_cr_name { flex: 0 0 300px; width: 300px; font-size: 28px; font-weight: 500; letter-spacing: -0.56px; line-height: 1.6; color: #111; }
.cu_cr_cdesc { font-size: 18px; font-weight: 400; letter-spacing: -0.36px; line-height: 1.6; color: #111; }

/* 전략 밴드 태그: 시안대로 상단 3개 / 하단 2개 (폭 제한으로 3개 후 줄바꿈) */
.cu_str .dv_str_pills { max-width: 700px; }

@media (max-width: 1024px) {
    .dv_rp_bg.cu_rp_bg { min-height: 0; padding: 60px 20px; }
    .cu_rp_inner { gap: 40px; }
    .cu_rp_tit { font-size: 28px; }
    .cu_rp_desc { font-size: 18px; }
    .cu_rp_rights { flex-wrap: wrap; }
    .cu_rp_right { flex: 0 0 50%; padding: 16px 10px; }
    .cu_rp_right:not(:last-child) { border-right: none; }
    .cu_rp_note { padding: 36px 24px; }
    .cu_cr { padding: 90px 0; }
    .cu_cr_in { flex-direction: column; align-items: stretch; gap: 40px; }
    .cu_cr_img { flex: none; width: 100%; height: 380px; }
    .cu_cr_body { gap: 40px; }
    .cu_cr_tit { font-size: 34px; }
    .cu_cr_name { flex: 0 0 240px; width: 240px; }
}
@media (max-width: 768px) {
    .cu_rp_tit { font-size: 22px; }
    .cu_rp_desc { font-size: 15px; }
    .cu_rp_desc br { display: none; }
    .cu_rp_rname { font-size: 20px; }
    .cu_rp_rdesc { font-size: 15px; }
    .cu_rp_note { padding: 28px 18px; font-size: 15px; }
    .cu_cr { padding: 60px 0; }
    .cu_cr_img { height: 300px; }
    .cu_cr_tit { font-size: 23px; }
    .cu_cr_sub1 { font-size: 18px; }
    .cu_cr_sub2 { font-size: 15px; }
    .cu_cr_item { gap: 18px; padding: 20px 0; }
    .cu_cr_no { font-size: 30px; }
    .cu_cr_txt { flex-direction: column; align-items: flex-start; gap: 4px; }
    .cu_cr_name { flex: none; width: auto; font-size: 20px; }
    .cu_cr_cdesc { font-size: 15px; }
}
@media (max-width: 486px) {
    .cu_rp_tit { font-size: 20px; }
    .cu_rp_rname { font-size: 18px; }
    .cu_rp_rdesc { font-size: 14px; }
    .cu_rp_rdesc br { display: none; }
    .cu_cr_tit { font-size: 20px; }
    .cu_cr_no { font-size: 26px; }
    .cu_cr_name { font-size: 18px; }
    .cu_cr_cdesc { font-size: 14px; }
}

/* ============================================================
 * 마약(drug) 전용 — 히어로/인트로(fv_intro)/상황(fv_sit)/전략(dv_str)/CTA(dv_cta) 는 공통 재사용,
 *   ① 대응 단계(dg_flow/dg_step): 좌 카드 목록 + 우 설명 (+ 연결 점 dg_dots)
 *   ② 주요 사건 유형(dg_type): dv_sw 공통 스와이프 — PC 4열, 반응형 스와이프
 * ============================================================ */
/* ① 대응 단계 */
.dg_flow { padding: 40px 0 130px; }
.dg_dots { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 60px; }
.dg_dots span { width: 6px; height: 6px; border-radius: 50%; background: #c0ccd2; }
.dg_step_in { display: flex; align-items: center; justify-content: center; gap: 100px; }
.dg_step_card { flex: 0 0 566px; width: 566px; box-sizing: border-box; background: #fff; border-radius: 15px; padding: 15px 20px; box-shadow: 0 2px 15px rgba(39, 56, 69, .08); }
.dg_step_item { padding: 16px 20px; text-align: center; font-size: 18px; font-weight: 500; letter-spacing: -0.18px; line-height: 1.5; color: #000; }
.dg_step_item + .dg_step_item { border-top: 1px solid #ccc; }
.dg_step_tx { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.dg_step_h { font-size: 25px; font-weight: 600; letter-spacing: -0.25px; line-height: 1.4; color: #000; }
.dg_step_desc { font-size: 18px; font-weight: 400; letter-spacing: -0.18px; line-height: 1.5; color: #000; }

/* ② 주요 사건 유형 (dv_sw 공통 스와이프) */
.dg_type { padding: 130px 0; }
.dg_type_h { margin-bottom: 30px; text-align: center; font-size: 35px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.4; color: #111; }
/* 가로가 남으면 카드 묶음 중앙정렬, 넘치면 자동으로 왼쪽 시작(스와이프) */
.dg_type_sw { box-sizing: border-box; width: calc(100% - 40px); margin: 0 auto; display: flex; justify-content: safe center; }
.dg_type_sw .dv_sw_track { gap: 27px; }
.dg_type_card { position: relative; flex: 0 0 404px; width: 404px; height: 556px; border-radius: 15px; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 70px 20px; text-align: center; color: #fff; }
.dg_type_bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.dg_type_bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .2); }
.dg_type_grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(120, 131, 138, 0) 0%, #273845 100%); mix-blend-mode: overlay; }
.dg_type_tx { position: relative; z-index: 1; }
.dg_type_name { font-size: 25px; font-weight: 600; letter-spacing: -0.25px; line-height: 1.5; }
.dg_type_desc { margin-top: 10px; font-size: 20px; font-weight: 400; letter-spacing: -0.2px; line-height: 1.5; }

/* ===== 마약 반응형 ===== */
@media (max-width: 1024px) {
    .dg_flow { padding: 30px 0 90px; }
    .dg_dots { margin-bottom: 44px; }
    .dg_step_in { gap: 50px; }
    .dg_step_card { flex-basis: 46%; width: 46%; }
    .dg_step_item { padding: 14px 16px; font-size: 16px; }
    .dg_step_tx { gap: 24px; }
    .dg_step_h { font-size: 22px; }
    .dg_step_desc { font-size: 16px; }
    .dg_type { padding: 90px 0; }
    .dg_type_h { font-size: 28px; }
    .dg_type_sw { justify-content: flex-start; }
    .dg_type_card { flex-basis: 320px; width: 320px; height: 470px; }
    .dg_type_desc { font-size: 18px; }
}
@media (max-width: 768px) {
    .dg_flow { padding: 20px 0 60px; }
    .dg_dots { margin-bottom: 32px; }
    .dg_step_in { flex-direction: column; gap: 30px; }
    .dg_step_card { flex: none; width: 100%; }
    .dg_step_h { font-size: 20px; }
    .dg_step_desc { font-size: 15px; }
    .dg_step_desc br { display: none; }
    .dg_type { padding: 60px 0; }
    .dg_type_h { font-size: 23px; }
    .dg_type_card { flex-basis: 260px; width: 260px; height: 380px; padding: 50px 18px; }
    .dg_type_name { font-size: 21px; }
    .dg_type_desc { font-size: 16px; }
}
@media (max-width: 486px) {
    .dg_step_h { font-size: 18px; }
    .dg_step_desc { font-size: 14px; }
    .dg_type_h { font-size: 20px; }
    .dg_type_name { font-size: 19px; }
    .dg_type_desc { font-size: 14px; }
}

/* ============================================================
 * 디데이회생(dday) 전용 — 히어로/FAQ/전략(dv_str+fv_str)/CTA 는 공통 재사용,
 *   ① 브랜드 밴드(dd_band): 로고+제목(하이라이트)+설명 + 가로 100% 확장 이미지(dv_rp 재사용)
 *   ② 함께하는 분야(dd_field): 6칸 그리드(세로 구분선)
 *   ③ CTA 버튼 2개(dd_cta_btns)
 * ============================================================ */
/* ① 브랜드 밴드 */
.dd_band { padding: 200px 0 0; text-align: center; }   /* 시안: 히어로(1000)→로고(1207) 약 207 간격 */
.dd_band_logo { margin-bottom: 80px; }
.dd_band_logo img { display: inline-block; height: 100px; width: auto; }
.dd_band_tit { font-size: 45px; font-weight: 600; letter-spacing: -0.9px; line-height: 1.4; color: #111; }
.dd_band_mark { --hl-bg: #a1c2ff; color: #fff; padding: 2px 10px; }
.dd_band_sub { margin-top: 24px; font-size: 25px; font-weight: 600; letter-spacing: -0.25px; line-height: 1.4; color: #111; }
.dd_band_desc { margin-top: 15px; font-size: 18px; font-weight: 400; letter-spacing: -0.18px; line-height: 1.5; color: #111; }
.dd_rp { padding: 50px 0 0; }
.dv_rp_bg.dd_rp_bg { height: 424px; background-size: 100vw 100% }   /* 확장 시 이미지 고정(가로 뷰포트폭)·영역만 확장 */

/* ② 디데이회생이 함께하는 분야 (6칸 그리드) */
.dd_field { padding: 227px 0 192px; background-size: cover; background-position: center; background-repeat: no-repeat; }   /* 시안: 밴드 722(상 227·하 192) */
.dd_field_tit { text-align: center; margin-bottom: 60px; font-size: 45px; font-weight: 600; letter-spacing: -0.9px; line-height: 1.4; color: #111; }
.dd_field_mark { color: #a1c2ff; font-weight: 700; }
.dd_field_grid { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 30px; max-width: 1699px; margin: 0 auto; }
.dd_field_cell { display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px 10px; font-size: 25px; font-weight: 600; letter-spacing: -0.25px; line-height: 1.4; color: #111; border-right: 1px solid #c0ccd2; }
.dd_field_cell:nth-child(3n+1) { border-left: 1px solid #c0ccd2; }

/* ③ 전략 카드 폭(디데이회생 시안 430) · CTA 버튼 2개 */
.dd_str_cards .fv_str_pill { width: 430px; }
.dd_cta_btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
/* 2번째 버튼(디데이회생 바로가기): 시안대로 파란 그라데이션 · 글자는 가운데, 화살표만 우측 고정 */
.dd_cta_btn2 { position: relative; justify-content: center; gap: 0; padding-right: 52px; background: linear-gradient(90deg, #5380f4 0%, #6791f7 50%, #9bbdfd 100%); }
.dd_cta_btn2 .dv_cta_btn_ic { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
/* dday 바로가기 버튼: 아이콘이 세로중앙(translateY) 잡혀 있어 회전과 함께 유지 */
.dd_cta_btn2:hover .dv_cta_btn_ic { transform: translateY(-50%) rotate(360deg); }

@media (max-width: 1024px) {
    .dd_band { padding: 140px 0 0; }
    .dd_band_logo { margin-bottom: 50px; }
    .dd_band_logo img { height: 72px; }
    .dd_band_tit { font-size: 34px; }
    .dd_band_sub { font-size: 22px; }
    .dv_rp_bg.dd_rp_bg { height: 340px; }
    .dd_field { padding: 150px 0 130px; }
    .dd_field_tit { font-size: 34px; margin-bottom: 40px; }
    .dd_field_cell { font-size: 20px; }
    .dd_str_cards .fv_str_pill { width: 100%; max-width: 374px; }
}
@media (max-width: 768px) {
    .dd_band { padding: 90px 0 0; }
    .dd_band_logo img { height: 56px; }
    .dd_band_tit { font-size: 23px; }
    .dd_band_sub { font-size: 18px; }
    .dd_band_desc { font-size: 15px; }
    .dd_band_desc br { display: none; }
    .dv_rp_bg.dd_rp_bg { height: 240px; }
    .dd_field { padding: 90px 0 80px; }
    .dd_field_tit { font-size: 23px; }
    /* 모바일: 세로 구분선 대신 가로 구분선 2열 */
    .dd_field_grid { grid-template-columns: repeat(2, 1fr); row-gap: 0; }
    .dd_field_cell { padding: 18px 10px; font-size: 16px; border-right: none; border-top: 1px solid #c0ccd2; }
    .dd_field_cell:nth-child(3n+1) { border-left: none; }
    .dd_field_cell:nth-child(2n) { border-left: 1px solid #c0ccd2; }
    .dd_cta_btns { flex-direction: column; align-items: center; width: 100%; }
}
@media (max-width: 486px) {
    .dd_band_tit { font-size: 20px; }
    .dd_band_sub { font-size: 16px; }
    .dd_field_tit { font-size: 20px; }
    .dd_field_grid { grid-template-columns: 1fr; }
    .dd_field_cell { font-size: 15px; }
    .dd_field_cell:nth-child(2n) { border-left: none; }
}

/* ============================================================
 * 음주운전구제(dui) 전용 — 히어로/전략(dv_str)/CTA(dv_cta)/QA(ad_faq)/
 *   4이미지(dg_type) 는 공통 재사용. 아래 3개만 전용:
 *   ① 인트로(du_intro): 강조 박스 제목 + 소제목 + 설명 (중앙)
 *   ② 체크리스트(du_check): 좌 이미지 + 우 카드(Check 01~04)
 *   ③ 처분 기준 테이블(du_table): 면허정지/취소 2행
 * ============================================================ */
/* ① 인트로 */
.du_intro { padding: 130px 0 0; }
.du_intro_in { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.du_intro_h { font-size: 45px; font-weight: 600; letter-spacing: -0.9px; line-height: 1.4; color: #111; }
.du_intro_mark { color: #fff; padding: 4px 14px; margin-right: 6px; }
.du_intro_txt { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.du_intro_sub { font-size: 25px; font-weight: 600; letter-spacing: -0.25px; line-height: 1.4; color: #000; }
.du_intro_desc { font-size: 18px; font-weight: 400; letter-spacing: -0.18px; line-height: 1.5; color: #222; }

/* ② 체크리스트 (좌 이미지 551 + 우 카드) — 1270 중앙 */
.du_check { padding: 100px 0 0; }
.du_check_in { display: flex; align-items: stretch; gap: 26px; max-width: 1270px; margin: 0 auto; }
.du_check_img { flex: 0 0 551px; min-height: 571px; border-radius: 15px; background-size: cover; background-position: center bottom; }
.du_check_card { flex: 1 1 auto; min-width: 0; box-sizing: border-box; background: #fff; border-radius: 15px; box-shadow: 0 2px 15px rgba(39, 56, 69, .08); padding: 50px 50px 30px; }
.du_check_item { display: flex; align-items: flex-start; gap: 24px; padding: 20px; }
.du_check_item + .du_check_item { border-top: 1px solid #c0ccd2; }
.du_check_ck { position: relative; flex: 0 0 16px; width: 16px; height: 16px; margin-top: 5px; border-radius: 3px; background: #c0ccd2; }
.du_check_ck::after { content: ""; position: absolute; left: 6px; top: 4px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.du_check_tx { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.du_check_no { font-size: 15px; font-weight: 500; letter-spacing: -0.15px; line-height: 1.5; color: #d70000;  font-family: "Savate", sans-serif !important;}
.du_check_tit { font-size: 18px; font-weight: 600; letter-spacing: -0.18px; line-height: 1.5; color: #000; }
.du_check_desc { font-size: 16px; font-weight: 400; letter-spacing: -0.16px; line-height: 1.5; color: #333; }

/* ③ 처분 기준 테이블 — 1270 중앙, 좌 라벨 327 + 우 내용 */
.du_table { padding: 90px 0 0; }
.du_table_in { max-width: 1270px; margin: 0 auto; }
.du_table_row { display: flex; align-items: stretch; border-top: 1px solid #c0ccd2; }
.du_table_row:first-child { border-top: 2px solid #2f3a42; }
.du_table_row:last-child { border-bottom: 1px solid #c0ccd2; }
.du_table_th { flex: 0 0 327px; box-sizing: border-box; display: flex; align-items: center; padding: 25px 20px; font-size: 20px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.6; color: #111; }
.du_table_td { flex: 1 1 auto; min-width: 0; box-sizing: border-box; display: flex; align-items: center; padding: 25px 20px; }
.du_table_td ul { margin: 0; padding-left: 30px; list-style: disc; }
.du_table_td li { font-size: 20px; font-weight: 400; letter-spacing: -0.4px; line-height: 1.6; color: #111; }
.du_table_td li::marker {font-size: 15px;}

/* ===== 음주운전구제 반응형 ===== */
@media (max-width: 1024px) {
    .du_intro { padding: 90px 0 0; }
    .du_intro_h { font-size: 34px; }
    .du_intro_sub { font-size: 22px; }
    .du_intro_desc { font-size: 16px; }
    .du_check { padding: 70px 0 0; }
    .du_check_img { flex-basis: 40%; min-height: 0; }
    .du_check_card { padding: 30px 30px 16px; }
    .du_check_tit { font-size: 17px; }
    .du_table_th { flex-basis: 220px; font-size: 18px; }
    .du_table_td li { font-size: 18px; }
}
@media (max-width: 768px) {
    .du_intro { padding: 60px 0 0; }
    .du_intro_h { font-size: 23px; letter-spacing: -0.5px; }
    .du_intro_mark { padding: 3px 10px; }
    .du_intro_sub { font-size: 18px; }
    .du_intro_desc { font-size: 15px; }
    .du_intro_desc br { display: none; }
    .du_check { padding: 50px 0 0; }
    .du_check_in { flex-direction: column; gap: 20px; }
    .du_check_img { flex: none; width: 100%; height: 260px; }
    .du_check_card { padding: 16px 20px; }
    .du_check_item { padding: 18px 4px; gap: 16px; }
    .du_check_tit { font-size: 16px; }
    .du_check_desc { font-size: 15px; }
    .du_table_row { flex-direction: column; }
    .du_table_th { flex: none; width: 100%; padding: 18px 4px 6px; font-size: 18px; }
    .du_table_td { padding: 0 4px 18px; }
    .du_table_td li { font-size: 15px; }
}
@media (max-width: 486px) {
    .du_intro_h { font-size: 20px; }
    .du_intro_sub { font-size: 16px; }
    .du_intro_desc { font-size: 14px; }
    .du_check_tit { font-size: 15px; }
    .du_check_desc { font-size: 14px; }
    .du_check_no { font-size: 14px; }
    .du_table_th { font-size: 16px; }
    .du_table_td li { font-size: 14px; }
}

/* ============================================================
 * 사실혼분쟁(defacto) 전용 — 히어로/상담5카드(dv_prep)/전략(dv_str)/CTA(dv_cta) 공통 재사용.
 *   ① 상담카드 좌측정렬(df_case)  ② 법적인정+판단요소 배경 100% 확장(df_rec, dv_rp 재사용)
 *   ③ 청구 01~03(df_claim)  ④ 인용 다크밴드(df_quote)  ⑤ 법률혼·사실혼 비교표(df_cmp)
 * ============================================================ */
/* ① 상담 카드(공통 dv_prep) — 섹션 여백 + 텍스트 좌측정렬 (히어로 하단70 + 상단140 ≈ 시안 207) */
.df_case { padding: 140px 0 130px; }
.df_case .dv_prep_tx { text-align: left; }

/* ② 사실혼 법적 인정 + 판단 주요 요소(배경 100% 확장) (상담 하단130 + 상단120 ≈ 시안 249) */
.df_rec { padding: 120px 0 60px; }
.df_rec_head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.df_rec_h { font-size: 45px; font-weight: 600; letter-spacing: -0.9px; line-height: 1.4; color: #111; }
.df_rec_mark { color: #fff; padding: 2px 10px; }   /* 검은 네임펜(하이라이트) — 다른 서브페이지와 동일 */
.df_rec_sub { margin-top: 30px; font-size: 18px; font-weight: 400; letter-spacing: -0.18px; line-height: 1.5; color: #222; }
.df_rec_dots { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 40px 0; }
.df_rec_dots i { width: 6px; height: 6px; border-radius: 50%; background: #c1ccd2; }
.df_rec_dots i:nth-child(1) { opacity: 0.2; }
.df_rec_dots i:nth-child(2) { opacity: 0.6; }
.df_rec_dots i:nth-child(3) { opacity: 1; }
.df_rec_factit { font-size: 35px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.4; color: #111; }
.df_recwrap { padding-top: 30px; }
.dv_rp_bg.df_rec_bg { height: 368px; background-size: 100vw 100%; }   /* 확장 시 이미지 고정(가로 뷰포트폭)·영역만 확장 */
.df_rec_cols { box-sizing: border-box; display: flex; width: 100%; max-width: 1550px; margin: 0 auto; padding: 0 20px; list-style: none; }
.df_rec_col { flex: 1 1 0; min-width: 0; box-sizing: border-box; padding: 10px 20px; text-align: center; border-right: 1px solid #fff; }
.df_rec_col:last-child { border-right: 0; }
.df_rec_ctit { font-size: 25px; font-weight: 600; letter-spacing: -0.25px; line-height: 1.4; }
.df_rec_cdesc { margin-top: 14px; font-size: 18px; font-weight: 400; letter-spacing: -0.18px; line-height: 1.6; }

/* ③ 사실혼이 끝났다면, 무엇을 청구할 수 있을까요? (법적 하단60 + 상단60 = 시안 120 / 하단260 = 인용밴드 백색간격) */
.df_claim { padding: 60px 0 260px; }
.df_claim_in { display: flex; align-items: flex-start; gap: 213px; }
.df_claim_head { flex: 0 0 367px; }
.df_claim_h { font-size: 35px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.4; color: #111; }
.df_claim_sub { margin-top: 10px; font-size: 18px; font-weight: 400; letter-spacing: -0.18px; line-height: 1.5; color: #111; }
.df_claim_list { flex: 1 1 auto; min-width: 0; list-style: none; margin: 0; padding: 0; }
.df_claim_item { display: flex; gap: 30px; align-items: flex-start; box-sizing: border-box; min-height: 150px; padding: 40px 0; border-bottom: 1px solid #c0ccd2; }
.df_claim_no { flex: 0 0 auto; font-family: 'UnShinmun', serif; font-size: 40px; letter-spacing: -0.8px; line-height: 1.5; color: #78838a; }
.df_claim_tx { min-width: 0; }
.df_claim_ctit { font-size: 28px; font-weight: 500; letter-spacing: -0.48px; line-height: 1.6; color: #111; }
.df_claim_cdesc { font-size: 18px; font-weight: 400; letter-spacing: -0.36px; line-height: 1.6; color: #111; }

/* ④ 인용 다크 밴드 (시안 밴드 높이 680 ≈ 내부 상·하 260 + 콘텐츠) */
.df_quote { background-color: #20262b; background-size: cover; background-position: center; color: #fff; padding: 260px 20px; }
.df_quote_in { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 940px; margin: 0 auto; text-align: center; }
.df_quote_h { font-size: 40px; font-weight: 600; letter-spacing: -0.8px; line-height: 1.4; }
.df_quote_sub { font-size: 20px; font-weight: 400; letter-spacing: -0.2px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }

/* ⑤ 법률혼과 사실혼, 무엇이 다를까요? (인용밴드 하단 백색간격 상단217 / 하단235 = 전략밴드 백색간격) */
.df_cmp { padding: 217px 0 235px; }
.df_cmp_in { display: flex; align-items: center; justify-content: center; gap: 139px; }
.df_cmp_table { display: flex; align-items: stretch; gap: 20px; }
.df_cmp_col { position: relative; display: flex; flex-direction: column; padding-top: 24px; }
.df_cmp_legal, .df_cmp_defacto { width: 414px; }
.df_cmp_labels { width: 140px; }
.df_cmp_pill { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 209px; padding: 8px 30px; border-radius: 50px; font-size: 22px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.df_cmp_pill_legal { background: #c1ccd2; color: #111; }
.df_cmp_pill_defacto { background: linear-gradient(90deg, #20262b 0%, #4c5d6a 50%, #7894a8 100%); color: #fff; }
.df_cmp_card { flex: 1 1 auto; box-sizing: border-box; display: flex; flex-direction: column; padding: 35px 20px 15px; border-radius: 15px; }
.df_cmp_legal .df_cmp_card { background: #fff; border: 2px solid #c0ccd2; }
.df_cmp_defacto .df_cmp_card { background: #fff; border: 2px solid #20262b; box-shadow: 0 2px 15px rgba(39, 56, 69, 0.08); }
.df_cmp_card--plain { border: 2px solid transparent; }
.df_cmp_cell, .df_cmp_label { box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 14px 0; text-align: center; font-size: 20px; letter-spacing: -0.4px; line-height: 1.6; }
.df_cmp_cell { font-weight: 400; color: #333; border-bottom: 1px dashed #c0ccd2; }
.df_cmp_card .df_cmp_cell:last-child { border-bottom: 0; }
.df_cmp_cell--strong { font-weight: 600; color: #20262b; }
.df_cmp_label { font-weight: 600; color: #78838a; }
.df_cmp_h { font-size: 35px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.4; color: #111; }

/* 전략 밴드 태그: 시안대로 3개 / 2개 */
.df_str .dv_str_pills { max-width: 740px; }

/* ===== [사실혼분쟁] 반응형 ===== */
@media (max-width: 1024px) {
    .df_case { padding: 100px 0 90px; }
    .df_rec { padding: 90px 0 50px; }
    .df_rec_h { font-size: 34px; }
    .df_rec_factit { font-size: 28px; }
    .dv_rp_bg.df_rec_bg { height: auto; min-height: 300px; }
    .df_rec_cols { padding: 50px 20px; }
    .df_rec_ctit { font-size: 22px; }
    .df_rec_cdesc { font-size: 16px; }
    .df_claim { padding: 50px 0 160px; }
    .df_claim_in { gap: 40px; }
    .df_claim_head { flex-basis: 300px; }
    .df_claim_h { font-size: 28px; }
    .df_claim_ctit { font-size: 24px; }
    .df_claim_no { font-size: 34px; }
    .df_quote { padding: 170px 20px; }
    .df_quote_h { font-size: 30px; }
    .df_quote_sub { font-size: 18px; }
    .df_cmp { padding: 140px 0 150px; }
    .df_cmp_in { flex-direction: column-reverse; gap: 40px; }
    .df_cmp_h { font-size: 28px; text-align: center; }
    .df_cmp_table { gap: 14px; }
    .df_cmp_legal, .df_cmp_defacto { width: auto; flex: 1 1 0; }
    .df_cmp_labels { width: auto; flex: 0 0 120px; }
    .df_cmp_cell, .df_cmp_label { font-size: 18px; }
}
@media (max-width: 768px) {
    .df_case { padding: 60px 0; }
    .df_rec { padding: 60px 0 40px; }
    .df_rec_h { font-size: 23px; }
    .df_rec_sub { font-size: 15px; }
    .df_rec_factit { font-size: 20px; }
    .df_rec_cols { flex-direction: column; max-width: 520px; padding: 30px 20px; }
    .df_rec_col { border-right: 0; border-top: 1px solid rgba(255, 255, 255, 0.3); padding: 22px 10px; }
    .df_rec_col:first-child { border-top: 0; }
    .df_rec_ctit { font-size: 20px; }
    .df_rec_cdesc { font-size: 15px; }
    .df_claim { padding: 40px 0 100px; }
    .df_claim_in { flex-direction: column; gap: 30px; }
    .df_claim_head { flex: none; }
    .df_claim_h { font-size: 23px; }
    .df_claim_sub br { display: none; }
    .df_claim_item { gap: 18px; min-height: 0; padding: 24px 0; }
    .df_claim_no { font-size: 30px; }
    .df_claim_ctit { font-size: 20px; }
    .df_claim_cdesc { font-size: 15px; }
    .df_quote { padding: 100px 20px; }
    .df_quote_h { font-size: 23px; }
    .df_quote_h br { display: none; }
    .df_quote_sub { font-size: 15px; }
    .df_quote_sub br { display: none; }
    .df_cmp { padding: 90px 0 100px; }
    .df_cmp_table { gap: 8px; }
    .df_cmp_col { padding-top: 20px; }
    .df_cmp_pill { width: auto; min-width: 120px; padding: 6px 18px; font-size: 16px; }
    .df_cmp_card { padding: 28px 10px 12px; }
	.df_cmp_card--plain { padding: 28px 0px 12px !important; }
    .df_cmp_labels { flex-basis: 84px; }
    .df_cmp_cell, .df_cmp_label { min-height: 46px; padding: 5px 2px; font-size: 13px; }
    .df_cmp_h { font-size: 23px; }
    .df_cmp_labels { flex-basis: 68px; }	
}
@media (max-width: 486px) {
    .df_rec_h { font-size: 20px; }
    .df_rec_factit { font-size: 18px; }
    .df_rec_ctit { font-size: 18px; }
    .df_claim_h { font-size: 20px; }
    .df_claim_no { font-size: 26px; }
    .df_claim_ctit { font-size: 18px; }
    .df_claim_cdesc { font-size: 14px; }
    .df_quote_h { font-size: 20px; }
    .df_quote_sub { font-size: 14px; }
    .df_cmp_pill { min-width: 96px; font-size: 14px; }
    .df_cmp_cell, .df_cmp_label { font-size: 12px; }
    .df_cmp_h { font-size: 20px; }
    .df_cmp_labels { flex-basis: 60px; }
}

/* ============================================================================
 *  외국인법률센터 (field/foreigner) — Figma 6049:722
 * ========================================================================== */
.br_gap { }                         /* 문단 간격용 br (항상 표시) */
.fl_dim { color: #b3b3b3; }

/* 히어로: 긴 문장이라 wipe 대신 페이드업 리빌 (줄바꿈 허용) */
.fl_hero_h { font-size: min(45px, 3.5vw); }
.fl_hero_desc { max-width: 830px; margin-left: auto; margin-right: auto; }

/* 공통 섹션 헤딩 (영문 + 국문) */
.fl_head { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.fl_head_en { font-family: 'SIMPLECANDY', 'Times New Roman', serif; font-size: 30px; letter-spacing: -0.6px; line-height: 1.3; color: #78838a; }
.fl_head_ko { font-size: 35px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.4; color: #111; }
.fl_head--left { text-align: left; align-items: flex-start; }

/* 주요 업무 분야 */
.fl_key { padding: 150px 0 0; }
.fl_key_sw { box-sizing: border-box; width: calc(100% - 40px); margin: 40px auto 0; padding-left: 0; display: flex; justify-content: safe center; }
.fl_key_sw .dv_sw_track { gap: 27px; }
.fl_key_card { flex: 0 0 404px; width: 404px; display: flex; flex-direction: column; gap: 20px; }
.fl_key_img { position: relative; width: 100%; aspect-ratio: 404 / 556; border-radius: 15px; overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: flex-end; justify-content: center; padding: 0 20px 44px; box-sizing: border-box; }
.fl_key_img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(39,56,69,.10) 0%, rgba(39,56,69,.62) 100%); }
.fl_key_lbl { position: relative; z-index: 1; text-align: center; color: #fff; }
.fl_key_en { font-size: 17px; font-weight: 400; letter-spacing: -0.17px; line-height: 1.5; }
.fl_key_ko { margin-top: 4px; font-size: 25px; font-weight: 600; letter-spacing: -0.25px; line-height: 1.5; }
.fl_key_desc { color: #111; }
.fl_key_desc p { font-size: 17px; font-weight: 400; letter-spacing: -0.17px; line-height: 1.5; }
/* 불릿(•): 줄바꿈 시 둘째 줄이 글자 밑으로 정렬(행잉 인덴트) — 불릿은 CSS로 표시 */
.fl_key_li { position: relative; padding-left: 0.9em; text-align: left;}
.fl_key_li::before { content: "•"; position: absolute; left: 0; top: 0; }

/* 우리 센터만의 차별점 */
.fl_why { padding: 200px 0; }
.fl_why_in { display: flex; align-items: flex-start; gap: 120px; }
.fl_why_l { flex: 0 0 409px; display: flex; flex-direction: column; gap: 60px; }
.fl_why_card { width: 375px; max-width: 100%; aspect-ratio: 375 / 339; border-radius: 15px; overflow: hidden; }
.fl_why_card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl_why_list { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; }
.fl_why_item { display: flex; gap: 30px; align-items: flex-start; padding: 50px 0; border-top: 1px solid #c0ccd2; }
.fl_why_no { flex: 0 0 auto; font-family: 'UnShinmun', serif; font-size: 40px; letter-spacing: -0.8px; line-height: 1.5; color: #78838a; }
.fl_why_tx { min-width: 0; }
.fl_why_t { font-size: 28px; font-weight: 500; letter-spacing: -0.48px; line-height: 1.6; color: #111; }
.fl_why_d { margin-top: 2px; font-size: 18px; font-weight: 400; letter-spacing: -0.36px; line-height: 1.6; color: #111; }

/* 상담 안내 */
.fl_help { padding: 194px 0 200px; background-size: cover; background-position: center; background-repeat: no-repeat; }
.fl_help_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 27px; margin-top: 56px; list-style: none; padding: 0; }
.fl_help_card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; min-height: 339px; padding: 50px 40px; text-align: center; border-radius: 15px; background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); box-shadow: 0 2px 30px rgba(0,0,0,.03); box-sizing: border-box; }
.fl_help_top { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.fl_help_ic { width: 50px; height: 50px; object-fit: contain; }
.fl_help_lbl { font-size: 20px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.5; color: #111; }
.fl_help_info { font-size: 20px; font-weight: 400; letter-spacing: -0.2px; line-height: 1.6; color: #111; }
.fl_help_info p { margin: 0; }

/* ----- 반응형 ----- */
@media (max-width: 1200px) {
    .fl_key { padding-top: 120px; }
    .fl_head_en { font-size: 26px; }
    .fl_head_ko { font-size: 30px; }
    .fl_key_ko { font-size: 22px; }
    .fl_why { padding: 150px 0; }
    .fl_why_in { gap: 60px; }
    .fl_why_no { font-size: 34px; }
    .fl_why_t { font-size: 24px; }
    .fl_help { padding: 150px 0 160px; }
}
@media (max-width: 1024px) {
    .fl_head_en { font-size: 24px; }
    .fl_head_ko { font-size: 28px; }
    .fl_key_card { flex-basis: 320px; width: 320px; }
    .fl_key_en { font-size: 16px; }
    .fl_key_ko { font-size: 21px; }
    .fl_key_desc p { font-size: 16px; }
    .fl_why_in { flex-direction: column; gap: 50px; }
    .fl_why_l { flex: none; width: 100%; }
    .fl_why_list { width: 100%; }
    .fl_why_item { padding: 36px 0; gap: 24px; }
    .fl_why_no { font-size: 32px; }
    .fl_why_t { font-size: 22px; }
    .fl_why_d { font-size: 16px; }
    .fl_help_grid { grid-template-columns: repeat(2, 1fr); }
    .fl_help_lbl { font-size: 18px; }
    .fl_help_info { font-size: 18px; }
}
@media (max-width: 768px) {
    .br_pc { display: none; }
    .fl_key { padding-top: 90px; }
    .fl_head_en { font-size: 20px; }
    .fl_head_ko { font-size: 24px; }
    .fl_key_sw { margin-top: 30px; }
    .fl_key_sw .dv_sw_track { gap: 20px; }
    .fl_key_ko { font-size: 19px; }
    .fl_key_img { padding: 0 16px 30px; }
    .fl_why { padding: 100px 0; }
    .fl_why_l { gap: 40px; }
    .fl_why_item { padding: 30px 0; gap: 18px; }
    .fl_why_no { font-size: 28px; }
    .fl_why_t { font-size: 20px; }
    .fl_help { padding: 100px 0 110px; }
    .fl_help_grid { margin-top: 36px; gap: 16px; }
    .fl_help_card { min-height: 0; padding: 40px 24px; gap: 20px; }
}
@media (max-width: 486px) {
    .fl_head_en { font-size: 18px; }
    .fl_head_ko { font-size: 20px; }
    .fl_key_card { flex-basis: 280px; width: 280px; }
    .fl_key_en { font-size: 14px; }
    .fl_key_ko { font-size: 18px; }
    .fl_key_desc p { font-size: 14px; }
    .fl_why_no { font-size: 24px; }
    .fl_why_t { font-size: 18px; }
    .fl_why_d { font-size: 14px; }
    .fl_help_grid { grid-template-columns: 1fr; }
    .fl_help_lbl { font-size: 16px; }
    .fl_help_info { font-size: 15px; }
}

/* ===== 모바일: 모든 서브 스와이프 1개만 노출 (자동 모션은 sub.js에서 정지) ===== */
/* 컨테이너 인셋을 좌 20px 로 통일하고 카드 폭을 화면폭에 맞춰 한 번에 1개만 보이게 */
@media (max-width: 768px) {
    .dv_sw,
    .dv_prep_sw, .fl_key_sw,
    .dv_form_sw {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 20px;
        padding-right: 0;
        box-sizing: border-box;
        justify-content: flex-start;   /* dv_form_sw(safe center) 무력화 */
    }
    .dg_step_tx {text-align:center}
    .dv_sw_track { gap: 20px; }
    .dv_sw_track > * {
        flex: 0 0 calc(100vw - 40px) !important;
        width: calc(100vw - 40px) !important;
        max-width: calc(100vw - 40px) !important;
    }
}

/* 스크롤 리빌 공통 스타일은 theme/basic/css/reveal.css 로 이동(전역 로드) */