/* ==========================================================
   홈(/) 개편 — 시안 「메인페이지(PC+모바일)_와이어프레임」 규격
   기준 1440 / 콘텐츠 1200 · H1 56/1.3 · 섹션 H2 40/1.35 · 카드 H3 20/1.45 · 본문 16/1.7 · 보조 14/1.6
   색: 네이비 #142A3A · 딥네이비 #0C1C27 · 골드 #A68B5B(번호·작은 강조만) · 글자 #1F2529 · 보조 #5E6870
       선 #DDE1E3 · 보조 배경 #F5F4F1 · 그림자 없음(선과 여백으로 구분)
   기존 style.css 뒤에 읽혀 필요한 곳만 덮어쓴다. 새로 그린 단은 .hm-* 로 시작한다.
   ========================================================== */

:root {
  --hm-navy: #142a3a;
  --hm-deep: #0c1c27;
  --hm-gold: #a68b5b;
  --hm-ink: #1f2529;
  --hm-muted: #5e6870;
  --hm-line: #dde1e3;
  --hm-line-strong: #aeb6ba;
  --hm-ivory: #f5f4f1;
  --hm-font: "Noto Sans KR", "SUIT-Regular", "Apple SD Gothic Neo", sans-serif;
}

/* ---------- 히어로: 배경(영상·사진)과 크기는 그대로, 글은 왼쪽 정렬 ---------- */

.main-visual .video-overlay {
  background: linear-gradient(90deg, rgba(12, 28, 39, 0.80) 0%, rgba(12, 28, 39, 0.52) 55%, rgba(12, 28, 39, 0.28) 100%);
}

.main-visual .main-overlay {
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;          /* 콘텐츠 1200 + 좌우 여백 40 */
  margin: 0 auto;
  padding: 0 40px;
  text-align: left;
  font-family: var(--hm-font);
}

.hero-title {
  margin: 0;
  font-family: var(--hm-font);
  font-size: 56px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
  word-break: keep-all;
}

.hero-brand {
  display: block;
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #d9c9a6;
}

.hero-desc {
  margin: 22px 0 0;
  font-family: var(--hm-font);
  font-size: 20px;
  line-height: 1.6;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  word-break: keep-all;
}

.hero-br-m {
  display: none;
}

/* 검색창: 흰 알약 560×56, 오른쪽에 네이비 원 버튼 */
.main-visual .search-box {
  box-sizing: border-box;
  width: 560px;
  max-width: 100%;
  height: 56px;
  margin: 36px 0 0;
  padding: 0 6px 0 24px;
  justify-content: flex-start;
  background: #fff;
  border-radius: 999px;
}

.main-visual .search-box input {
  flex: 1;
  min-width: 0;
  width: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--hm-font);
  font-size: 16px;
  color: var(--hm-ink);
}

.main-visual .search-box input::placeholder {
  color: #8b95a3;
}

.main-visual .search-box button {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--hm-navy);
}

.main-visual .search-box .search-button {
  width: 18px;
  height: 18px;
}

@media (max-width: 767px) {
  .main-visual .main-overlay {
    padding: 0 20px;
  }

  .hero-title {
    font-size: 34px;
  }

  .hero-brand {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .hero-desc {
    font-size: 17px;
    margin-top: 16px;
  }

  .hero-br-m {
    display: inline;
  }

  .main-visual .search-box {
    width: 100%;
    height: 52px;
    margin-top: 28px;
  }
}


/* ---------- 공통: 콘텐츠 폭 1200 + 좌우 여백 40 ---------- */

.hm-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

.hm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 신뢰 근거 6칸: 히어로 바로 아래, 3열 2줄 테두리 카드(그림자 없음) ---------- */

.hm-trust {
  padding: 24px 0 0;
  background: #fff;
  font-family: var(--hm-font);
}

/* 홈의 넓은 단 공통 폭(최대 95.25rem, 좌우 1.25rem). 신뢰 근거와 주요 업무분야의 좌우 끝선이 같다 */
.hm-trust .hm-wrap,
.hm-wrap--wide {
  max-width: 95.25rem;
  padding: 0 1.25rem;
}

.hm-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-trust-grid li {
  box-sizing: border-box;
  min-height: 112px;
  padding: 26px 24px 24px;
  border: 1px solid var(--hm-line-strong);
  background: #fff;
}

/* 제목은 굵게, 항상 한 줄. 화면이 좁아지면 글자를 줄이고, 그래도 넘치면 말줄임 */
.hm-trust-grid strong {
  display: block;
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--hm-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-trust-grid p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--hm-muted);
  word-break: keep-all;
}

@media (max-width: 1024px) {
  .hm-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .hm-wrap {
    padding: 0 20px;
  }

  .hm-trust {
    padding-top: 16px;
  }

  .hm-trust-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .hm-trust-grid li {
    min-height: 0;
    padding: 18px 20px;
  }

  .hm-trust-grid strong {
    font-size: clamp(15px, 4.6vw, 18px);
  }

  .hm-trust-grid p {
    margin-top: 4px;
  }
}


/* ---------- 단 제목 공통: H2 40/1.35 + 회색 부제 ---------- */

.hm-head {
  margin: 0 0 40px;
  font-family: var(--hm-font);
}

.hm-h2 {
  margin: 0;
  font-family: var(--hm-font);
  font-size: 40px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--hm-ink);
  word-break: keep-all;
}

.hm-lead {
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--hm-gold);
  word-break: keep-all;
}

/* ---------- 주요 업무분야: 번호 01~08, 2열 테두리 카드 ---------- */

.hm-areas {
  padding: 120px 0 110px;
  background: #fff;
  font-family: var(--hm-font);
}

.hm-areas-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 카드: 작은 금색 번호(위) → 제목 → 한 줄 설명, 오른쪽 가운데에 금색 화살표 */
.hm-area {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 16px;
  min-height: 128px;
  height: 100%;
  padding: 24px 32px 26px;
  border: 1px solid var(--hm-line-strong);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}

a.hm-area:hover {
  border-color: var(--hm-navy);
  background: #fafbfc;
}

.hm-area .body {
  display: block;
  min-width: 0;
}

.hm-area .num {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  color: var(--hm-gold);
  letter-spacing: 0.04em;
}

.hm-area strong {
  display: block;
  font-size: 22px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--hm-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-area .desc {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--hm-muted);
  word-break: keep-all;
}

.hm-area .arr {
  justify-self: end;
  font-size: 28px;
  line-height: 1;
  color: var(--hm-gold);
  transition: transform 0.2s;
}

a.hm-area:hover .arr {
  transform: translateX(4px);
}

@media (max-width: 1024px) {
  .hm-areas {
    padding-top: 96px;
  }

  .hm-h2 {
    font-size: 32px;
  }
}

@media (max-width: 767px) {
  .hm-head {
    margin-bottom: 24px;
  }

  .hm-h2 {
    font-size: 28px;
    line-height: 1.4;
  }

  .hm-lead {
    font-size: 16px;
    margin-top: 6px;
  }

  .hm-areas {
    padding-top: 72px;
    padding-bottom: 64px;
  }

  .hm-areas-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .hm-area {
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 10px;
    min-height: 96px;
    padding: 16px 20px 18px;
  }

  .hm-area .num {
    font-size: 12px;
    margin-bottom: 6px;
  }

  .hm-area strong {
    font-size: 18px;
  }

  .hm-area .desc {
    font-size: 14.5px;
  }
}


/* ==========================================================
   시안 팔레트 적용 — 기존 단(변호사·성공사례·후기·소식·사무소)의 옛 청록빛 네이비(#204B62)와
   하늘색 틴트를 시안 색으로 바꾼다. 이 파일은 홈에서 맨 뒤에 읽히므로 아래 규칙이 이긴다.
   네이비 #142A3A · 딥네이비 #0C1C27 · 골드 #A68B5B · 글자 #1F2529 · 보조 글자 #5E6870
   선 #DDE1E3 · 강조 선 #AEB6BA · 보조 배경 #F5F4F1 · 그림자 없이 선과 여백으로 구분
   ========================================================== */

:root {
  --main-navi: #142a3a;   /* var(--main-navi) 를 쓰는 모든 요소(버튼·태그·아이콘·제목)가 한 번에 바뀐다 */
  --main-text: #1f2529;
}

main {
  color: var(--hm-ink);
}

/* 단 배경: 흰색과 아이보리가 번갈아. 변호사·후기·사무소 단이 아이보리 */
.expert-background-wrapper,
.review_bg,
.map-section {
  background-color: var(--hm-ivory);
}

/* 기존 단 제목: 시안의 기본 글자색, 굵게 */
.expert-title,
.success-section .inner_txt .success-title,
.review-title,
.media-title,
.map-title {
  color: var(--hm-ink);
}

/* 기존 단 부제(밑줄 글): 금색 */
.expert-sub-title,
.success-sub-title {
  color: var(--hm-gold);
  text-decoration: none;
}

/* 성공사례 카드: 하늘색 틴트 → 흰 바탕 + 회색 선 */
.success-card,
.success-list .success-card {
  background-color: #fff;
  border-color: var(--hm-line);
}

.success-card .tag,
.tag {
  background-color: var(--hm-navy);
}

.arrow,
.mobile-more-arrows .mobile-arrow {
  background-color: var(--hm-navy);
}

/* 후기 */
.review-hashtag {
  color: var(--hm-navy);
}

/* 소식: 공지 상자 하늘색 → 아이보리, 머리글 네이비 */
.notice-box {
  background-color: var(--hm-ivory);
}

.media-headline {
  color: var(--hm-navy);
}

/* 사무소 안내: 두꺼운 네이비 테두리 → 얇은 회색 선, 선택 카드는 네이비 선 + 아이보리 */
.map-card {
  border: 1px solid var(--hm-line-strong);
  background-color: #fff;
}

.map-card.active {
  border-color: var(--hm-navy);
  background-color: #fff;
}

.map-icon,
.map-info strong {
  color: var(--hm-navy);
}

.map-btn {
  border-color: var(--hm-navy);
  color: var(--hm-navy);
}

.map-btn:hover {
  background-color: var(--hm-navy);
  color: #fff;
}

/* 모든 단의 제목·부제를 같은 규격으로: 제목 40px/700, 부제 18px 금색, 제목 아래 10px.
   옛 CSS 가 걸어 둔 고정 폭·인라인 배치·다른 글자 크기를 높은 우선순위로 덮어쓴다 */
.success-section .inner_txt .success-title.hm-h2,
.expert-section .expert-title.hm-h2,
.review_bg .review-title.hm-h2,
.media-section .media-title.hm-h2,
.map-section .map-title.hm-h2,
.hm-areas .hm-h2 {
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: 40px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--hm-ink);
  white-space: nowrap;
  text-align: left;
}

.hm-head .hm-lead,
.review_bg .hm-head .hm-lead,
.media-section .hm-head .hm-lead,
.map-section .hm-head .hm-lead {
  display: block;
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--hm-gold);
  text-decoration: none;
  text-align: left;
}

.review_bg .review-title-box.hm-head,
.media-section .media-head,
.map-section .hm-head {
  display: block;
  width: 100%;
  margin: 0 0 32px;
}

@media (max-width: 1024px) {
  .success-section .inner_txt .success-title.hm-h2,
  .expert-section .expert-title.hm-h2,
  .review_bg .review-title.hm-h2,
  .media-section .media-title.hm-h2,
  .map-section .map-title.hm-h2,
  .hm-areas .hm-h2 {
    font-size: 32px;
  }
}

@media (max-width: 767px) {
  .success-section .inner_txt .success-title.hm-h2,
  .expert-section .expert-title.hm-h2,
  .review_bg .review-title.hm-h2,
  .media-section .media-title.hm-h2,
  .map-section .map-title.hm-h2,
  .hm-areas .hm-h2 {
    font-size: 28px;
    line-height: 1.4;
  }

  .hm-head .hm-lead,
  .review_bg .hm-head .hm-lead,
  .media-section .hm-head .hm-lead,
  .map-section .hm-head .hm-lead {
    font-size: 16px;
    margin-top: 6px;
  }
}

/* ---------- 변호사 카드, 모바일에서 크게 (시안 모바일 3/8: 표시 280×350, 4:5 세로형) ---------- */

@media (max-width: 767px) {
  .expert-background-wrapper .expert-section {
    margin-top: 0;
    height: auto;
    padding: 56px 0 48px;
  }

  .expert-background-wrapper .expert-zigzag-slide {
    gap: 12px;
    margin-top: 1.5rem;
    --card-sec: 4.5s;
  }

  .expert-background-wrapper .zigzag-card {
    width: 280px;
    height: auto;
  }

  .expert-background-wrapper .lawyer-image-wrapper {
    width: 280px;
    height: 350px;
    border-radius: 1rem;
  }

  .expert-background-wrapper .lawyer-image-wrapper .lawyer-photo-img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center top;
  }

  .expert-background-wrapper .zigzag-card strong {
    font-size: 1.125rem;
  }

  .expert-background-wrapper .zigzag-card span {
    font-size: 0.875rem;
  }
}

/* 모바일 가로(481~767) 는 조금 더 작게 두 장 반이 보이게 */
@media (min-width: 481px) and (max-width: 767px) {
  .expert-background-wrapper .zigzag-card,
  .expert-background-wrapper .lawyer-image-wrapper {
    width: 240px;
  }

  .expert-background-wrapper .lawyer-image-wrapper {
    height: 300px;
  }
}

@media (max-width: 767px) {
  /* 제목·부제가 화면 가장자리에 붙지 않게. 카드 띠는 그대로 가장자리까지 흐른다 */
  .expert-background-wrapper .expert-inner {
    padding: 0 20px;
  }

  .expert-background-wrapper .expert-zigzag-slide {
    margin-left: -20px;
    padding-left: 20px;
  }
}

/* ==========================================================
   단 사이 간격 통일 — 시안 「섹션 간격 120~144px」. 모든 단이 위아래로 같은 여백(--hm-sec)을 갖는다.
   옛 CSS 의 제각각인 margin/padding 을 걷어낸다. 신뢰 근거만 히어로에 붙어 24px.
   ========================================================== */
:root {
  --hm-sec: 120px;
}

.hm-areas {
  padding: var(--hm-sec) 0;
}

.expert-background-wrapper .expert-section {
  margin: 0;
  padding: var(--hm-sec) 0;
  height: auto;
}

.expert-background-wrapper .expert-inner {
  margin: 0 auto;
}

.expert-background-wrapper .expert-zigzag-slide {
  margin-bottom: 0;
}

.success-section .inner_txt {
  padding-top: var(--hm-sec);
  padding-bottom: var(--hm-sec);
}

.review_bg {
  padding: var(--hm-sec) 0;
}

.review_bg .review-header {
  margin-top: 0;
}

.media-section {
  padding: var(--hm-sec) 0;
}

.media-section .media-head {
  margin-top: 0;
}

.map-section {
  padding: var(--hm-sec) 0;
}

.map-section .map-inner {
  margin-top: 0;
}

@media (max-width: 1024px) {
  :root { --hm-sec: 96px; }
}

@media (max-width: 767px) {
  :root { --hm-sec: 64px; }

  .expert-background-wrapper .expert-section {
    padding: var(--hm-sec) 0;
  }
}

.media-section .media-header {
  margin-top: 0;
}

/* 변호사 단도 다른 단과 같은 폭·여백(최대 95.25rem, 좌우 1.25rem)으로 제목 왼쪽 선을 맞춘다 */
.expert-background-wrapper .expert-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 95.25rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.expert-background-wrapper {
  overflow: hidden; /* 카드 띠가 오른쪽으로 길게 이어지므로 가로 스크롤이 생기지 않게 */
}

/* 변호사 단 바깥 상자는 화면 전체 폭(아이보리 띠), 가운데 맞춤은 .expert-inner 가 맡는다 */
.expert-background-wrapper .expert-section {
  width: 100%;
  max-width: none;
}

/* 성공사례 단도 같은 폭으로 (제목 왼쪽 선 통일) */
.success-section .inner_txt {
  box-sizing: border-box;
  max-width: 95.25rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* ---------- 히어로 배경, 화면 크기별 ----------
   PC: 영상이 화면 높이를 꽉 채운다(현재 유지).
   태블릿: 영상은 두되 높이를 줄여 가운데가 지나치게 확대돼 보이지 않게.
   모바일: 시안 「사진(모바일) 390×560」 — 세로 화면에 가로 영상을 억지로 늘리지 않고, 썸네일 사진을 보여주고 영상은 끈다. */

.main-visual .video-thumbnail,
.main-visual .bg-video {
  object-fit: cover;
  object-position: center;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .main-visual {
    height: 72vh;
    min-height: 560px;
    max-height: 760px;
  }
}

@media (max-width: 767px) {
  .main-visual {
    height: 560px;
    min-height: 0;
  }

  /* 2026-10-01 사용자 결정: 휴대폰에서도 영상을 튼다. 가로 영상이라 좌우가 잘리고 가운데만 보인다(높이 560px 로 확대 폭 최소화).
     세로 화면용 영상(9:16)이 준비되면 여기서 바꿔 끼우면 된다. */
  .main-visual .bg-video {
    display: block;
    object-position: center;
  }

  .main-visual .main-overlay {
    top: 50%;
    transform: translateY(-50%);
  }
}

/* ---------- 대세 소식: 「더 많은 소식 보러가기」는 어느 화면에서나 가운데, 모바일의 빈 공간 제거 ---------- */
.media-section .media-more {
  display: block;
  width: fit-content;
  margin: 2.5rem auto 0;
}

/* 옛 CSS 가 슬라이드 칸 높이를 652px 로 고정해 카드 아래로 빈 공간이 남고(PC 250px, 모바일 200px),
   칸의 폭이 부모보다 넓어 오른쪽으로 삐져나가 버튼이 가운데에서 벗어났다 → 내용 높이만큼, 부모 폭 안에 */
.media-section .slide-column,
.media-section .horizontal-slide {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
}

/* 사무소 안내 제목에 남아 있던 옛 형광펜(하늘색 밑줄) 제거 — 다른 단과 같은 제목 */
.map-section .map-title.hm-h2 {
  box-shadow: none;
  text-decoration: none;
  background: none;
}

/* 소식 단의 바깥 높이도 고정값(화면 높이 기준)이 걸려 있어 아래 여백이 먹혔다 → 내용 높이 */
.media-section {
  height: auto;
  min-height: 0;
  max-height: none;
}

/* 태블릿·노트북 폭에서 옛 CSS 가 소식 안쪽 상자에 -4rem 음수 여백을 걸어 위아래 여백을 먹었다 */
.media-section .media-inner-column {
  margin: 0 auto;
}

.media-section .slide-column {
  margin-left: 0;
  margin-right: 0;
  left: auto;
  transform: none;
}

/* ---------- 성공사례 카드, 모바일에서 크게 (시안 모바일 4/8: 카드 한 장씩, 제목 18~20px, 본문 16px/1.7) ---------- */
@media (max-width: 767px) {
  /* 카드 폭은 목록(가로로 긴 띠)의 % 가 아니라 화면 폭 기준으로. 휴대폰 세로는 한 장, 가로는 두 장 */
  .success-section .success-list .success-card {
    flex: 0 0 calc(50vw - 26px);
    width: calc(50vw - 26px);
    max-width: none;
    min-width: 0;
    min-height: 300px;
    padding: 24px 22px 26px;
    border: 1px solid var(--hm-line);
    box-shadow: none;
  }

  .success-section .card-title {
    font-size: 19px;
    line-height: 1.45;
    font-weight: 700;
    margin-bottom: 10px;
  }

  .success-section .tag {
    font-size: 13px;
    padding: 4px 10px;
    margin-bottom: 12px;
  }

  .success-section .card-summary {
    font-size: 15.5px;
    line-height: 1.7;
    max-height: none;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 480px) {
  .success-section .success-list .success-card {
    flex: 0 0 calc(100vw - 40px);
    width: calc(100vw - 40px);
  }
}


/* ---------- 법률정보: 분야 라벨 + 질문형 제목, 한 줄씩 선으로 구분 (시안 5/7, 모바일 5/8) ---------- */

.hm-legal {
  padding: var(--hm-sec) 0;
  background: #fff;
  font-family: var(--hm-font);
}

.hm-legal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hm-line);
}

.hm-legal-list li {
  border-bottom: 1px solid var(--hm-line);
}

.hm-legal-list a {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 20px;
  min-height: 88px;
  padding: 18px 8px;
  color: inherit;
  text-decoration: none;
  transition: background 0.2s;
}

.hm-legal-list a:hover {
  background: var(--hm-ivory);
}

.hm-legal-list .cat {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--hm-gold);
  word-break: keep-all;
}

.hm-legal-list strong {
  font-size: 20px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--hm-ink);
  word-break: keep-all;
}

.hm-legal-list a:hover strong {
  color: var(--hm-navy);
}

.hm-legal-list .arr {
  justify-self: end;
  font-size: 24px;
  line-height: 1;
  color: var(--hm-gold);
  transition: transform 0.2s;
}

.hm-legal-list a:hover .arr {
  transform: translateX(4px);
}

.hm-more {
  margin: 32px 0 0;
  text-align: center;
}

.hm-more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border: 1px solid var(--hm-line-strong);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--hm-ink);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.hm-more a:hover {
  border-color: var(--hm-navy);
  color: var(--hm-navy);
}

@media (max-width: 767px) {
  .hm-legal-list a {
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 4px 12px;
    min-height: 0;
    padding: 16px 4px;
  }

  .hm-legal-list .cat {
    grid-column: 1;
    font-size: 13px;
  }

  .hm-legal-list strong {
    grid-column: 1;
    font-size: 16px;
    line-height: 1.5;
  }

  .hm-legal-list .arr {
    grid-column: 2;
    grid-row: 1 / span 2;
    font-size: 20px;
  }
}


/* ---------- 분야 알약 버튼 (법률정보 단) — 성공사례 단의 버튼과 같은 결, 색은 시안 네이비 ---------- */

.hm-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
}

.hm-pill {
  padding: 10px 22px;
  border: 2px solid var(--hm-navy);
  border-radius: 999px;
  background: #fff;
  color: var(--hm-navy);
  font-family: var(--hm-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.hm-pill:hover,
.hm-pill.is-active {
  background: var(--hm-navy);
  color: #fff;
}

.hm-legal-list.is-loading {
  opacity: 0.5;
}

.hm-legal-empty {
  padding: 28px 8px;
  color: var(--hm-muted);
  font-size: 15px;
}

@media (max-width: 767px) {
  .hm-pills {
    gap: 8px;
    margin-bottom: 18px;
  }

  .hm-pill {
    padding: 8px 14px;
    font-size: 13.5px;
    border-width: 1.5px;
  }
}


/* ---------- 대세 소식: 공지 세 줄 (시안 6/7) — 라벨 | 제목 | 화살표, 가로 선 ---------- */

.media-section .media-header {
  display: block;
}

.hm-notice {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  border-top: 2px solid var(--hm-line-strong);
}

.hm-notice li {
  border-bottom: 1px solid var(--hm-line-strong);
}

.hm-notice a {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 16px;
  min-height: 36px;
  padding: 8px 12px;
  color: inherit;
  text-decoration: none;
  font-family: var(--hm-font);
  transition: background 0.2s;
}

.hm-notice a:hover {
  background: var(--hm-ivory);
}

.hm-notice .label {
  font-size: 16px;
  font-weight: 700;
  color: var(--hm-ink);
}

.hm-notice .t {
  font-size: 16px;
  line-height: 1.5;
  color: #2f3a4a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-notice a:hover .t {
  color: var(--hm-navy);
}

.hm-notice .arr {
  justify-self: end;
  font-size: 22px;
  line-height: 1;
  color: var(--hm-gold);
}

@media (max-width: 767px) {
  .hm-notice {
    margin-bottom: 28px;
  }

  .hm-notice a {
    grid-template-columns: 44px minmax(0, 1fr) 20px;
    gap: 10px;
    padding: 10px 4px;
  }

  .hm-notice .label,
  .hm-notice .t {
    font-size: 14.5px;
  }

  .hm-notice .t {
    white-space: normal;
  }
}


/* ---------- 상담 CTA 띠: 사무소 안내와 푸터 사이, 네이비 바탕 (시안 7/8: 높이 120~144, 글자 18~20px/500) ---------- */

.hm-cta {
  background: var(--hm-navy);
  color: #fff;
  font-family: var(--hm-font);
}

.hm-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 144px;
  padding-top: 32px;
  padding-bottom: 32px;
}

.hm-cta-text h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
}

.hm-cta-text p {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  word-break: keep-all;
}

.hm-cta-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.hm-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  background: #fff;
  color: var(--hm-navy);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s, background 0.2s;
}

.hm-cta-btn:hover {
  background: var(--hm-ivory);
  transform: translateY(-1px);
}

.hm-cta-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.2s;
}

.hm-cta-tel:hover {
  background: rgba(255, 255, 255, 0.12);
}

.hm-cta-tel .ico {
  font-size: 16px;
  color: var(--hm-gold);
}

@media (max-width: 1024px) {
  .hm-cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    min-height: 0;
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .hm-cta-inner {
    align-items: center;
    text-align: center;
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .hm-cta-text h2 {
    font-size: 22px;
  }

  .hm-cta-text p {
    font-size: 14.5px;
  }

  .hm-cta-actions {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }

  .hm-cta-btn,
  .hm-cta-tel {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
}

/* CTA 띠의 좌우 폭을 푸터 글 묶음(최대 1500px, 좌우 20px)과 맞춘다 — 왼쪽 문구와 오른쪽 전화 버튼이 푸터 글과 같은 선에 */
.hm-cta .hm-cta-inner {
  max-width: 1500px;
  padding-left: 20px;
  padding-right: 20px;
}

/* 전화 버튼의 오른쪽 끝을 푸터 마지막 열(사업자등록번호) 글자 끝에 맞춘다.
   푸터 격자: 2.2fr 1.2fr 1.1fr 1fr, 열 간격 40px → 마지막 열 시작 = (폭-120)×4.5/5.5+120, 글자 폭 134px.
   정리하면 오른쪽 여백 = 폭×0.1818 − 156px (폭 = min(1500px, 화면) − 40px). */
@media (min-width: 1025px) {
  .hm-cta .hm-cta-inner {
    padding-right: calc(20px + (min(1500px, 100%) - 40px) * 0.1818 - 156px);
  }
}

@media (max-width: 767px) {
  /* 세로 영상이 560px 틀을 꽉 채우고 가운데가 보이게 */
  .main-visual .bg-video {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    object-position: center;
  }
}

@media (max-width: 400px) {
  /* 좁은 휴대폰에서 제목 줄이 어색하게 꺾이지 않게 */
  .hero-title {
    font-size: 30px;
  }
}