/* ==========================================================================
   Frontier Law — geopyeong(지평) 신규 스킨. Claude Design 시안 기반 디자인 토큰.
   기존 template.css/style.css 뒤에 로드되어 시각 요소만 오버라이드한다.
   fullPage.js 앵커 구조·swiper 초기화 셀렉터·DB 루프 마크업은 건드리지 않는다.
   ========================================================================== */

:root {
  /* ── 회생파산 팔레트 (최종 3안) ────────────────────────────────
     블랙 3톤 + 액션 블루 + 크림. 랜딩과 서브페이지가 같은 값을 쓴다. */
  --lp-blue: #0024FF;
  --lp-blue-700: #001BC4;
  --lp-blue-050: #EEF1FF;
  --lp-cream: #FFE6BA;

  --lp-black: #000000;
  --lp-sidebar: #171717;
  --lp-dark: #151515;
  --lp-card-dark: #080808;

  --lp-white: #FFFFFF;
  --lp-ink: #111111;
  --lp-body: #4A4A4A;
  --lp-muted: #8A8A8A;
  --lp-line: #E4E4E4;
  --lp-surface: #F6F6F7;

  --lp-nav-w: 270px;
  --lp-max: 1180px;
  --lp-font: var(--fl-font);

  /* ── 기존 --fl-* 토큰을 새 팔레트로 재매핑 ────────────────────
     .fl-* 컴포넌트(카드·버튼·태그·폼)가 전부 이 토큰을 참조하므로
     여기만 바꾸면 서브페이지까지 한 번에 따라온다. */
  --fl-bg: var(--lp-white);
  --fl-surface: var(--lp-surface);
  --fl-text: var(--lp-ink);
  --fl-accent: var(--lp-blue);
  --fl-accent-2: var(--lp-blue-700);
  --fl-divider: var(--lp-line);

  --fl-accent-100: var(--lp-blue-050);
  --fl-accent-600: var(--lp-blue-700);
  --fl-accent-700: var(--lp-blue);
  --fl-accent-800: var(--lp-blue-700);

  --fl-neutral-100: var(--lp-surface);
  --fl-neutral-200: #E9E9EB;
  --fl-neutral-800: var(--lp-body);

  --fl-font: 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;

  --fl-space-2: 8px;
  --fl-space-3: 12px;
  --fl-space-4: 16px;
  --fl-space-6: 24px;
  --fl-space-8: 32px;

  --fl-shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --fl-shadow-md: 0 3px 10px rgba(0,0,0,0.10);
  --fl-shadow-lg: 0 12px 32px rgba(0,0,0,0.16);
}

/* ── 한글 줄바꿈 ──
   style.css 의 `p {word-break:break-all}` 이 "최대한 감면/합니다." 처럼
   어절 중간을 끊는다. 상속이 아니라 직접 지정해야 이긴다. */
#contents, #header, footer.footer,
#contents p, #contents li, #contents dt, #contents dd,
#contents h1, #contents h2, #contents h3, #contents h4 {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── 공통 섹션 타이틀 ── */
.fl-kicker {
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fl-accent-700); font-weight: 700; font-family: var(--fl-font);
}
.fl-h2 { font-size: clamp(31px,3.2vw,46px); margin: var(--fl-space-2) 0 var(--fl-space-6); font-weight: 800; letter-spacing: -0.01em; color: var(--fl-text); }

/* ── 버튼 ── */
.fl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none; font-family: var(--fl-font); font-weight: 700;
  font-size: 18px; line-height: 1.2; border-radius: 3px; border: 1px solid transparent;
  padding: 14px 22px; transition: transform .12s ease, box-shadow .12s ease;
}
.fl-btn:hover { transform: translateY(-2px); box-shadow: var(--fl-shadow-sm); }
.fl-btn-primary { background: var(--fl-accent); color: #fff; }
.fl-btn-primary:hover { background: var(--fl-accent-600); color: #fff; }
.fl-btn-secondary { border-color: var(--fl-divider); color: var(--fl-text); background: #fff; }
.fl-btn-secondary:hover { background: var(--fl-neutral-100); }

/* ── 태그/뱃지 ── */
.fl-tag {
  display: inline-flex; align-items: center; font-size: 14px; letter-spacing: 0.02em;
  padding: 4px 12px; border-radius: 999px; font-family: var(--fl-font); font-weight: 600;
}
.fl-tag-accent { background: var(--fl-accent-100); color: var(--fl-accent-800); }
.fl-tag-neutral { background: var(--fl-neutral-200); color: var(--fl-neutral-800); }
.fl-tag-outline { border: 1px solid var(--fl-accent); color: var(--fl-accent-700); background: #fff; }

/* ── 카드 ── */
.fl-card {
  background: #fff; border-radius: 4px; box-shadow: var(--fl-shadow-sm);
  padding: var(--fl-space-4); transition: transform .15s ease, box-shadow .15s ease;
}
.fl-card:hover { transform: translateY(-4px); box-shadow: var(--fl-shadow-md); }
.fl-card-title { font-family: var(--fl-font); font-weight: 800; font-size: 22px; color: var(--fl-text); margin: 0 0 8px; }
.fl-card-body { font-size: 17px; color: rgba(32,30,29,0.7); line-height: 1.6; margin: 0; }

/* ── 히어로 (main-visual) ── */
.fl-hero {
  background: var(--fl-bg); min-height: 100vh; display: flex; align-items: center;
  padding: 100px 40px 60px;
}
.fl-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--fl-space-8); align-items: center; max-width: 1280px; margin: 0 auto; width: 100%; }
.fl-hero h1 { font-family: var(--fl-font); font-weight: 800; font-size: clamp(34px,4vw,55px); line-height: 1.18; color: var(--fl-text); margin: var(--fl-space-4) 0; }
.fl-hero p.lead { font-size: 22px; color: rgba(32,30,29,0.72); max-width: 46ch; line-height: 1.6; }
.fl-hero-photo { aspect-ratio: 4/5; overflow: hidden; border-radius: 4px; filter: grayscale(1) contrast(1.06); box-shadow: var(--fl-shadow-lg); }
.fl-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-hero-badges { display: flex; gap: var(--fl-space-2); flex-wrap: wrap; margin-top: var(--fl-space-6); }
.fl-hero-cta { display: flex; gap: var(--fl-space-3); margin-top: var(--fl-space-6); flex-wrap: wrap; }
@media (max-width: 860px) {
  .fl-hero-grid { grid-template-columns: 1fr; }
  .fl-hero { padding-top: 130px; }
}

/* ── 그리드 유틸 ── */
.fl-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fl-space-4); }
.fl-grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--fl-space-4); }
.fl-grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--fl-space-4); }
.fl-grid5 { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--fl-space-4); }
@media (max-width: 1000px) { .fl-grid4, .fl-grid5 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 860px) { .fl-grid2, .fl-grid3 { grid-template-columns: 1fr; } }

/* ── 서브페이지 히어로 (사이드바 옆 상단 배너) ── */
.fl-subhero { padding-top: var(--fl-space-8); padding-bottom: var(--fl-space-6); }
.fl-subhero h1 { font-size: clamp(36px,4.4vw,55px); line-height: 1.2; margin: var(--fl-space-4) 0; font-weight: 800; font-family: var(--fl-font); color: var(--fl-text); }
.fl-subhero p.lead { font-size: 21px; opacity: 0.75; max-width: 56ch; line-height: 1.6; }
.fl-hr { height: 2px; border: 0; margin: var(--fl-space-6) 0; background: var(--fl-divider); }

/* ── 섹션 공통 wrap (fp-auto-height 섹션용) ── */
.fl-section { max-width: 1280px; margin: 0 auto; padding: 56px 40px; }
.fl-section-tight { padding-top: 32px; padding-bottom: 32px; }
@media (max-width: 720px) { .fl-section { padding-left: 24px; padding-right: 24px; } }
.fl-section-surface { background: var(--fl-surface); }

/* ── main-center: 정부기관 신뢰 배지 + 계산기 + 개정3가지 + 9가지솔루션 ── */
.fl-trustbar { display: flex; gap: var(--fl-space-2); flex-wrap: wrap; justify-content: center; margin: var(--fl-space-4) 0 var(--fl-space-8); }
.fl-calc-card {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--fl-space-6); align-items: center;
  background: #fff; border-radius: 4px; box-shadow: var(--fl-shadow-md); padding: var(--fl-space-6);
}
@media (max-width: 860px) { .fl-calc-card { grid-template-columns: 1fr; } }
.fl-calc-result { background: var(--fl-bg); text-align: center; padding: var(--fl-space-6); border-radius: 4px; }
.fl-calc-amount { font-family: var(--fl-font); font-weight: 800; font-size: 43px; color: var(--fl-accent-700); margin-top: var(--fl-space-3); }
.fl-seg { display: inline-flex; overflow: hidden; border: 1px solid var(--fl-divider); border-radius: 3px; }
.fl-seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 16px; cursor: pointer; font-family: var(--fl-font); }
.fl-seg-opt + .fl-seg-opt { border-left: 1px solid var(--fl-divider); }
.fl-seg-opt.active { background: var(--fl-accent); color: #fff; }
.fl-field label { display: block; font-size: 14px; margin-bottom: 6px; color: rgba(32,30,29,0.65); font-family: var(--fl-font); font-weight: 600; }
.fl-chip-btn {
  cursor: pointer; border: 1px solid var(--fl-accent); background: #fff; color: var(--fl-accent-700);
  border-radius: 999px; padding: 6px 14px; font-size: 16px; font-family: var(--fl-font); font-weight: 600;
}
.fl-chip-btn.active { background: var(--fl-accent); color: #fff; }
.fl-range { width: 100%; accent-color: var(--fl-accent); }

.fl-stat-card { text-align: center; }
.fl-stat-value { font-family: var(--fl-font); font-weight: 800; font-size: 38px; color: var(--fl-accent-700); }
.fl-stat-label { font-size: 16px; color: rgba(32,30,29,0.62); margin-top: 6px; }

.fl-change-card { display: flex; flex-direction: column; gap: 6px; }
.fl-change-head { display: flex; align-items: center; gap: var(--fl-space-3); margin-bottom: 6px; }
.fl-change-photo { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none; background: var(--fl-neutral-200); filter: grayscale(1); }
.fl-change-photo img { width: 100%; height: 100%; object-fit: cover; }

.fl-benefit-n { font-size: 13px; letter-spacing: 0.1em; color: var(--fl-accent-700); font-weight: 700; font-family: var(--fl-font); }

/* ── compare (개인회생 vs 파산) ── */
.fl-compare-card { border: 2px solid var(--fl-divider); }
.fl-compare-card .fl-card-title { font-size: 26px; }

/* ── FAQ 아코디언 ── */
.fl-faq-item { border-bottom: 1px solid var(--fl-divider); }
.fl-faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--fl-space-3);
  background: none; border: none; padding: 18px 0; text-align: left; cursor: pointer;
  font-family: var(--fl-font); font-size: 19px; font-weight: 700; color: var(--fl-text);
}
.fl-faq-q svg { transition: transform .2s ease; flex: none; color: var(--fl-accent); }
.fl-faq-item.open .fl-faq-q svg { transform: rotate(180deg); }
.fl-faq-a { display: none; padding: 0 0 18px; font-size: 18px; color: rgba(32,30,29,0.78); max-width: 70ch; line-height: 1.6; }
.fl-faq-item.open .fl-faq-a { display: block; }

/* ── 상담신청 카드(main-online) 리스킨 ── */
.main-online .online-form { background: #fff !important; }
.main-online .fl-section { padding-top: 40px; padding-bottom: 40px; }

/* ── 지사 탭(main-location) ── */
.main-location .tab-loca {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none;
  margin: 0 0 var(--fl-space-6); padding: 0;
}
.main-location .tab-loca li { margin: 0; }
.main-location .tab-loca a {
  display: inline-flex; align-items: center; height: auto; padding: 8px 16px;
  border: 1px solid var(--fl-divider); border-radius: 999px; background: #fff;
  color: var(--fl-text); font-size: 16px; font-weight: 600; cursor: pointer;
  font-family: var(--fl-font); transition: all .12s ease;
}
.main-location .tab-loca a.active { color: #fff !important; background: var(--fl-accent) !important; border-color: var(--fl-accent) !important; }

/* ── 사이드 점 네비게이션 ── */
#fullpage_navi li a.active { color: var(--fl-accent); }
#fullpage_navi li a.active::before, #fullpage_navi li a.active::after { background-color: var(--fl-accent) !important; border-color: var(--fl-accent) !important; }

/* ── 공통: fl-section 안에서 카드 hover 시 살짝 뜨는 느낌 통일 ── */
.fl-section .fl-card, .fl-section .fl-calc-card, .fl-section .fl-compare-card { will-change: transform; }

/* ==========================================================================
   좌측 사이드바 GNB (데스크톱, 1025px~). 기존 상단 가로 헤더를 클로드디자인의
   Sidebar 컴포넌트처럼 좌측 고정 컬럼으로 전환. 모바일(~1024px)은 기존
   오프캔버스 햄버거 메뉴 동작을 그대로 둔다(별도 CSS 손대지 않음).
   ========================================================================== */
@media screen and (min-width: 1025px) {
  #header {
    top: var(--notice-h, 0px);
    left: 0;
    width: var(--lp-nav-w);
    height: calc(100vh - var(--notice-h, 0px));
    background-color: var(--lp-sidebar) !important;
    box-shadow: 1px 0 0 rgba(255,255,255,0.08) !important;
    overflow-y: auto;
    transition: none;
  }
  .hader-inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    max-width: none;
    min-height: 100%;
    padding: var(--fl-space-6) var(--fl-space-4);
    gap: var(--fl-space-6);
  }
  .hader-inner .logo a {
    background-image: url('../images/common/logo_on.png') !important;
    width: 140px; height: 60px;
  }
  .hader-inner .gnb {
    width: 100%;
    text-align: left;
  }
  .hader-inner .gnb .gnb-1depth {
    margin-right: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .hader-inner .gnb .gnb-1depth-li {
    display: block;
    width: 100%;
    padding: 0;
    vertical-align: initial;
  }
  .hader-inner .gnb .gnb-1depth-li { position: relative; }
  .hader-inner .gnb .gnb-1depth-li > a {
    line-height: 1.4;
    padding: 12px 4px;
    font-size: 19px;
    color: rgba(255,255,255,0.72) !important;
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }
  .hader-inner .gnb .gnb-1depth-li:hover > a,
  .hader-inner .gnb .gnb-1depth-li > a[aria-current] {
    color: var(--lp-white) !important;
    font-weight: 800;
  }
  .hader-inner .gnb .gnb-1depth-li > a[aria-current]::before {
    content: ''; position: absolute; left: -18px; top: 50%;
    width: 3px; height: 15px; margin-top: -7px; background: var(--lp-cream);
  }
  .hader-inner .gnb-2depth,
  .hader-inner .gnb .gnb-2depth-a { color: rgba(255,255,255,0.5); }
  /* 다크 사이드바에는 화이트 로고 */
  .hader-inner .logo a { background-image: url('../images/common/logo.png') !important; }
  .hader-inner .gnb-2depth {
    position: static !important;
    width: 100% !important;
    padding: 4px 0 10px 12px !important;
    text-align: left !important;
    background: none !important;
    box-shadow: none !important;
  }
  .hader-inner .gnb-2depth::before { display: none; }
  .hader-inner .gnb .gnb-2depth-a {
    padding: 6px 0;
    font-size: 17px; font-weight: 600;
    color: var(--fl-accent-700) !important;
  }
  .hader-inner .gnb .gnb-top {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    gap: var(--fl-space-2);
    padding-top: var(--fl-space-4);
    margin-top: var(--fl-space-4);
    border-top: 1px solid var(--fl-divider);
    width: 100%;
  }
  .hader-inner .gnb .gnb-top li:not(:first-child)::before { display: none; }
  .hader-inner .gnb .gnb-top li a {
    color: rgba(32,30,29,0.6) !important;
    font-size: 16px;
  }
  .menu-btn { display: none !important; }

  /* 본문 영역을 사이드바 폭만큼 밀어내기 */
  #wrapper { padding-top: var(--notice-h, 0px); }
  #contents, footer.footer { margin-left: var(--lp-nav-w); width: calc(100% - var(--lp-nav-w)); }
}

/* ── FloatingChannels: 우하단 전화/카카오/네이버 원형 버튼 ── */
.fl-floating-channels {
  position: fixed; right: var(--fl-space-6); bottom: var(--fl-space-6); z-index: 333;
  display: flex; flex-direction: column-reverse; gap: var(--fl-space-3);
}
.fl-floating-btn {
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--fl-shadow-md); transition: transform .12s ease, box-shadow .12s ease;
}
.fl-floating-btn:hover { transform: translateY(-2px); box-shadow: var(--fl-shadow-lg); }
.fl-floating-btn-primary { background: var(--fl-accent); color: #fff; }
.fl-floating-btn-kakao { background: #FEE500; color: #191919; }
.fl-floating-btn-naver { background: #03C75A; color: #fff; }

/* ── 변호사 카드/모달 ── */
.fl-lawyer-card { background: #fff; }
.fl-modal-backdrop {
  position: fixed; inset: 0; z-index: 500; display: none; align-items: center; justify-content: center;
  background: rgba(32,30,29,0.5); padding: var(--fl-space-4);
}
.fl-modal-backdrop.is-open { display: flex; }
.fl-modal {
  position: relative; width: min(560px, 100%); max-height: 86vh; overflow-y: auto;
  background: #fff; border-radius: 4px; box-shadow: var(--fl-shadow-lg); padding: var(--fl-space-6);
}
.fl-modal-close {
  position: absolute; top: var(--fl-space-3); right: var(--fl-space-3);
  width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--fl-neutral-100);
  cursor: pointer; font-size: 17px; color: var(--fl-text);
}

/* ── 상담폼 필드 ── */
.fl-chip-toggle {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--fl-divider); border-radius: 999px; padding: 6px 14px;
  font-size: 16px; font-family: var(--fl-font); background: #fff;
}
.fl-chip-toggle:has(input:checked) { background: var(--fl-accent-100); border-color: var(--fl-accent); color: var(--fl-accent-800); }
.fl-input {
  width: 100%; min-height: 40px; padding: 8px 12px; font: inherit; font-size: 17px;
  color: var(--fl-text); background: var(--fl-bg); border: 1px solid var(--fl-divider);
  border-radius: 3px; box-sizing: border-box;
}
.fl-input:focus-visible { outline: 2px solid var(--fl-accent); outline-offset: 0; }
.fl-agree { display: flex; align-items: center; gap: 8px; font-size: 16px; cursor: pointer; color: var(--fl-text); }
.fl-btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }

/* ── 신뢰 로고 스트립 ── */
.fl-logo-strip { display: flex; gap: var(--fl-space-8); flex-wrap: wrap; align-items: center; justify-content: center; }
.fl-logo-strip img { filter: grayscale(1); opacity: .75; width: 140px; height: 44px; object-fit: contain; }

/* ── 신청자격 아이콘 ── */
.fl-eligibility-icon { width: 48px; height: 48px; margin-bottom: var(--fl-space-3); }
.fl-eligibility-icon img { width: 100%; height: 100%; object-fit: contain; }

/* ── 플로팅 상담버튼 회피 여백 ──
   사이드바(270px)가 본문 폭을 줄여 본문 오른쪽 끝이 플로팅 버튼
   (52px + right:24px) 밑으로 들어간다. 넓은 화면에서만 좌우 여백을
   대칭으로 키워 본문이 버튼을 피해가게 한다. */
@media (min-width: 1280px) {
  .fl-section { padding-left: 88px; padding-right: 88px; }
}

/* ── 푸터 ──
   style.css 의 웜브라운(#3f3a39) + 구 액센트 레드(#ec3013)를 새 팔레트로 덮는다.
   다크 배경에서는 블루(#0024FF)가 대비 1.7:1 로 읽히지 않으므로,
   랜딩과 같은 '어두운 배경 위 크림' 조합을 쓴다(약 14.6:1). */
footer.footer { background-color: var(--lp-sidebar); }
footer.footer strong { color: var(--lp-cream); }
/* 사이드바가 생기면서 푸터 폭이 줄어 .inner 가 좌우 끝에 붙는다.
   본문 섹션과 같은 여백을 줘서 로고·카피라이트가 잘리지 않게 한다. */
footer.footer .inner { padding-left: 32px; padding-right: 32px; box-sizing: border-box; }
@media (min-width: 1280px) {
  footer.footer .inner { padding-left: 88px; padding-right: 88px; }
}
/* style.css 의 `footer .btm span:nth-of-type(1){width:540px}` 는 고정폭 540px
   두 개로 푸터 폭을 넘겨, 세 번째 Copyright 를 폭 15px 로 짓눌러 한 글자씩
   세로로 쌓이게 만든다. 고정폭을 풀고 줄바꿈을 허용한다. */
footer.footer .btm {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px 48px;
}
footer.footer .btm span:nth-of-type(1) { width: auto; }
/* 고정폭을 풀면 span 두 개가 붙으므로 사이를 띄운다 */
footer.footer .btm p span + span { margin-left: 16px; }
footer.footer .btm > p:last-child { margin-left: auto; }