@charset "UTF-8";
/* ============================================================
   혜봄세무회계 — 공통 스타일시트
   브랜드: 딥네이비 #0F2A47 + 로고 레드 #EF3B33 + 그레이스케일
   외부 CDN/웹폰트 사용 없음 (시스템 폰트 스택)
   ============================================================ */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html,body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol,li{margin:0;padding:0;}
ul,ol{list-style:none;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
table{border-collapse:collapse;width:100%;}

/* ---------- 2. Tokens ---------- */
:root{
  --navy:#0F2A47;
  --navy-deep:#081A2E;
  --navy-mid:#1B4271;
  --navy-tint:#EDF2F8;
  --navy-tint2:#DDE7F1;

  --red:#EF3B33;
  --red-dark:#CD2A23;
  --red-tint:#FDEFEE;

  --ink:#101820;
  --body:#4A5661;
  --muted:#8290A0;
  --line:#E2E8EF;
  --line-soft:#EFF3F7;
  --white:#fff;
  --bg:#fff;
  --bg-soft:#F6F8FB;
  /* 로고 파일(assets/logo.png)의 배경 픽셀값. 헤더·히어로 배경을 이 값으로 통일한다. */
  --logo-bg:#FFFFFF;
  /* 구성원 사진 프레임 통일용 중립 그레이 (김혜지 세무사 증명사진 배경 계열) */
  --photo-bg:#EFF0F2;

  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:30px;
  --sh-1:0 1px 2px rgba(15,42,71,.05), 0 6px 18px rgba(15,42,71,.06);
  --sh-2:0 2px 6px rgba(15,42,71,.06), 0 18px 44px rgba(15,42,71,.10);
  --sh-red:0 10px 26px rgba(239,59,51,.28);

  --wrap:1180px;
  --hdr:76px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic","맑은 고딕","Apple SD Gothic Neo","Noto Sans KR","Helvetica Neue",Arial,sans-serif;
}

html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--body);
  font-size:16px;line-height:1.72;
  letter-spacing:-.01em;
  word-break:keep-all;
  overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--navy);color:#fff;}

/* ---------- 3. Layout & type helpers ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px;}
.wrap-nar{max-width:940px;}
.sec{padding:96px 0;}
.sec-sm{padding:64px 0;}
.sec-soft{background:var(--bg-soft);}
.sec-navy{background:var(--navy);color:#C9D6E4;}
.sec-navy h1,.sec-navy h2,.sec-navy h3,.sec-navy strong{color:#fff;}

.eyebrow{
  display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);margin-bottom:14px;
}
.eyebrow.on-navy{color:#7FB0E8;}
.eyebrow-pill{
  display:inline-block;padding:6px 16px;border-radius:100px;
  background:var(--navy-tint);color:var(--navy-mid);
  font-size:13px;font-weight:800;letter-spacing:.04em;margin-bottom:18px;
}
h1,h2,h3,h4{color:var(--ink);font-weight:800;letter-spacing:-.028em;line-height:1.26;}
.d1{font-size:clamp(30px,5.2vw,54px);line-height:1.2;letter-spacing:-.035em;}
.d2{font-size:clamp(26px,3.9vw,42px);line-height:1.24;}
.d3{font-size:clamp(21px,2.5vw,28px);}
.lead{font-size:clamp(16px,1.65vw,18.5px);color:var(--body);line-height:1.78;}
.sec-navy .lead{color:#B8C9DA;}
.center{text-align:center;}
.mt-s{margin-top:14px;} .mt-m{margin-top:26px;} .mt-l{margin-top:44px;} .mt-xl{margin-top:64px;}
.accent{color:var(--red);}
.accent-navy{color:var(--navy);}
.sec-head{max-width:760px;margin-bottom:52px;}
.sec-head.center{margin-left:auto;margin-right:auto;}
.small{font-size:13.5px;line-height:1.7;color:var(--muted);}
.rule{height:1px;background:var(--line);border:0;}

/* ---------- 4. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border-radius:100px;font-size:16px;font-weight:800;
  letter-spacing:-.01em;line-height:1;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
  border:1.5px solid transparent;text-align:center;
}
.btn:hover{transform:translateY(-2px);}
.btn:focus-visible{outline:3px solid #7FB0E8;outline-offset:2px;}
.btn-red{background:var(--red);color:#fff;box-shadow:var(--sh-red);}
.btn-red:hover{background:var(--red-dark);color:#fff;}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:var(--navy-mid);color:#fff;}
.btn-line{background:#fff;color:var(--navy);border-color:var(--line);}
.btn-line:hover{border-color:var(--navy);color:var(--navy);}
.btn-ghost-navy{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.34);}
.btn-ghost-navy:hover{background:#fff;color:var(--navy);}
.btn-sm{padding:11px 20px;font-size:14.5px;}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;}
.btn-row.center{justify-content:center;}

/* ---------- 5. Top utility bar ---------- */
.topbar{background:var(--navy-deep);color:#93A9C0;font-size:13px;}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:38px;gap:16px;}
.topbar .tb-left{display:flex;gap:18px;align-items:center;min-width:0;}
.topbar .tb-left span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar a{color:#C6D6E6;font-weight:700;}
.topbar a:hover{color:#fff;}
.tb-tel{font-weight:800;color:#fff !important;letter-spacing:.01em;}

/* ---------- 6. Header / GNB ---------- */
/* 2차 수정지시 탭1-2 : 스크롤 시 헤더가 반투명이라 로고(흰 배경)와 색이 어긋나던 문제
   → 로고 원본(assets/logo.png)의 배경 픽셀값 #FFFFFF 와 동일한 불투명 흰색으로 통일 */
.hdr{
  position:sticky;top:0;z-index:120;background:var(--logo-bg);
  border-bottom:1px solid var(--line);
}
.hdr-in{display:flex;align-items:center;gap:20px;height:var(--hdr);}
.brand{display:flex;align-items:center;gap:10px;flex:none;}
.brand img{height:38px;width:auto;}
.brand .b-tag{
  font-size:11.5px;font-weight:800;color:var(--muted);letter-spacing:.04em;
  border-left:1px solid var(--line);padding-left:10px;line-height:1.35;
}
.gnb{display:flex;align-items:center;gap:2px;margin-left:auto;}
.gnb > li{position:relative;}
.gnb > li > a{
  display:block;padding:10px 17px;border-radius:10px;
  font-size:16px;font-weight:700;color:var(--ink);white-space:nowrap;
  transition:color .16s,background .16s;
}
.gnb > li > a:hover,.gnb > li.is-open > a{color:var(--navy);background:var(--navy-tint);}
.gnb > li > a[aria-current="page"]{color:var(--red);}
.has-sub > a::after{
  content:"";display:inline-block;width:6px;height:6px;margin-left:7px;vertical-align:2px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.55;
}
.subnav{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:250px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-2);padding:10px;opacity:0;visibility:hidden;transition:.18s ease;
}
.has-sub:hover .subnav,.has-sub:focus-within .subnav,.has-sub.is-open .subnav{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.subnav a{display:block;padding:11px 14px;border-radius:9px;font-size:15px;font-weight:700;color:var(--ink);}
.subnav a small{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-top:1px;}
.subnav a:hover{background:var(--navy-tint);color:var(--navy);}
.hdr-cta{display:flex;align-items:center;gap:9px;flex:none;margin-left:6px;}
.hdr-cta .btn{padding:12px 21px;font-size:15px;}
.cta-flash{position:relative;}
.cta-flash::after{
  content:"";position:absolute;inset:-4px;border-radius:100px;border:2px solid var(--red);
  opacity:0;animation:ctaPulse 2.6s ease-out infinite;pointer-events:none;
}
@keyframes ctaPulse{0%{opacity:.65;transform:scale(.98);}70%,100%{opacity:0;transform:scale(1.12);}}
.burger{display:none;width:46px;height:46px;border-radius:11px;border:1px solid var(--line);flex:none;}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px auto;border-radius:2px;transition:.2s;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* mobile drawer */
.mnav{
  /* display:none이면 is-open이 붙어도 영영 안 보임 — visibility로만 숨긴다 */
  position:fixed;inset:0;z-index:130;background:rgba(8,26,46,.5);
  opacity:0;visibility:hidden;transition:.2s;
}
.mnav.is-open{opacity:1;visibility:visible;}
.mnav-panel{
  position:absolute;top:0;right:0;width:min(360px,86vw);height:100%;background:#fff;
  padding:18px 20px 40px;overflow-y:auto;transform:translateX(100%);transition:transform .26s ease;
  display:flex;flex-direction:column;gap:6px;
}
.mnav.is-open .mnav-panel{transform:none;}
.mnav-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:10px;}
.mnav-top img{height:34px;}
.mnav-close{font-size:26px;line-height:1;color:var(--muted);padding:6px 10px;}
.mnav a{display:block;padding:13px 6px;font-size:17px;font-weight:800;color:var(--ink);border-bottom:1px solid var(--line-soft);}
.mnav .m-sub a{padding:10px 6px 10px 18px;font-size:15px;font-weight:700;color:var(--body);border-bottom:0;}
.mnav .m-sub{background:var(--bg-soft);border-radius:12px;padding:6px 4px;margin:6px 0 10px;}
.mnav-cta{margin-top:22px;display:grid;gap:10px;}
/* .mnav a{color:var(--ink)} 가 (0,1,1) 이라 .btn-navy{color:#fff} (0,1,0) 를 이겨
   메뉴 안 버튼이 네이비 · 빨강 바탕에 검은 글씨로 나왔다 (대비 1.23) */
.mnav-cta .btn-red,.mnav-cta .btn-navy{color:#fff;}
.mnav-cta .btn-line{color:var(--navy);}

/* ---------- 7. 우측 고정 플로팅 아이콘 ---------- */
.floatbar{
  /* 사양: 우측 '상단'에 스크롤과 무관하게 계속 고정 (헤더 아래) */
  position:fixed;right:18px;top:112px;transform:none;z-index:110;
  display:flex;flex-direction:column;gap:10px;
}
.fb-item{
  position:relative;width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;box-shadow:0 6px 20px rgba(15,42,71,.18);
  border:1px solid rgba(15,42,71,.06);transition:transform .18s ease,box-shadow .18s ease;
}
.fb-item:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 12px 28px rgba(15,42,71,.24);}
.fb-item svg{width:30px;height:30px;display:block;}
.fb-kakao{background:#FEE500;border-color:#F2D900;}
.fb-naver{background:#03C75A;border-color:#03B252;}
.fb-tel{background:var(--navy);border-color:var(--navy-deep);}
/* '맨 위로'는 사양의 문의 3아이콘과 성격이 다르므로 간격으로 시각적 구분 */
.fb-top{
  background:#fff;color:var(--navy);font-size:20px;font-weight:800;
  width:60px;height:44px;border-radius:22px;margin-top:12px;
}
.fb-label{
  position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(6px);
  background:var(--navy-deep);color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap;
  padding:7px 12px;border-radius:8px;opacity:0;pointer-events:none;transition:.18s;
}
.fb-item:hover .fb-label{opacity:1;transform:translateY(-50%) translateX(0);}

/* 모바일 하단 고정바 */
.mobilebar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:115;
  background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(15,42,71,.10);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
}
.mobilebar ul{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.mobilebar ul.mb-one{grid-template-columns:1fr;}   /* 칸이 하나면 가로로 꽉 */
/* 카톡 · 예약 · 전화 + 건너가기 한 줄. 375px 에서 아이콘 3칸(52px)을 빼도
   184px 가 남아 라벨이 들어간다. 2줄로 쌓으면 110px 라 화면을 너무 먹는다 */
/* auto 로 두면 사업자 쪽(양도 · 상속 · 증여)과 재산 쪽(기장 · 경리 · 외부조정)의
   글자 길이가 달라 칸 폭이 15px 씩 어긋났다. 긴 쪽에 맞춰 고정한다 */
.mobilebar ul.mb-mix{grid-template-columns:1fr 150px;gap:6px;align-items:stretch;}
/* 카톡 · 예약 · 전화는 li 하나로 묶어야 테두리를 두르고 옆 칸과 높이를 맞출 수 있다 */
.mobilebar .mb-grp{display:flex;flex-direction:column;justify-content:center;gap:0;
  border:1.5px solid var(--navy);border-radius:12px;padding:4px 6px 5px;}
.mobilebar .mb-cap{text-align:center;font-size:9.5px;font-weight:800;
  letter-spacing:.06em;color:var(--navy);}
.mobilebar .mb-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;}
.mobilebar .mb-mix > li:last-child{display:flex;}
.mobilebar .mb-mix > li:last-child > a{flex:1;}
/* 가운데 정렬이라 왼쪽에 여백이 남았다. 오른쪽으로 붙인다 */
.mobilebar .mb-mix .mb-cta{flex-direction:column;align-items:center;justify-content:center;
  gap:1px;padding:8px 6px;min-width:0;background:var(--navy);}
.mobilebar .mb-ic{flex-direction:column;gap:3px;padding:8px 2px;font-size:10.5px;
  font-weight:700;background:var(--bg-soft);color:var(--navy);}
.mobilebar .mb-ic svg{width:21px;height:21px;}
.mobilebar .mb-k svg path,.mobilebar .mb-k svg circle{fill:#3C1E1E;}
.mobilebar .mb-k{background:#FEE500;}
.mobilebar .mb-n{background:#018A40;color:#fff;}   /* #03C75A 는 흰 글씨 대비 2.25 */
.mobilebar .mb-n svg path,.mobilebar .mb-n svg circle{fill:#fff;}
.mobilebar .mb-one a{flex-direction:row;align-items:center;gap:9px;padding:11px 14px;}
/* 라벨만 있으면 눌러야 하는 줄 모른다 — 볼드 동작 + 부제 + 화살표 */
.mb-t{display:flex;flex-direction:column;align-items:center;line-height:1.28;}
.mb-t b{font-size:16px;font-weight:800;letter-spacing:-.035em;white-space:nowrap;}
.mb-t i{font-style:normal;font-size:13px;font-weight:600;opacity:.88;white-space:nowrap;}
.mb-arw{display:none;}   /* 화살표를 빼고 그 폭을 글자에 준다 */
/* 문의가 아니라 이동 링크다. 상단 상담문의(빨강)와 같은 급으로 보이면 안 된다 */
.mobilebar .mb-one a.mb-cta{background:var(--navy);}
.mobilebar a{
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;
  font-size:11.5px;font-weight:800;color:var(--ink);border-radius:10px;
}
.mobilebar a svg{width:22px;height:22px;}
.mobilebar a.mb-cta{background:var(--red);color:#fff;}
/* 상단바 우측 '재산전문센터 ↔ 사업자 홈페이지' 상호 이동 버튼
   좁은 화면에선 메뉴와 겹치므로 넓은 화면에서만 표시(모바일·태블릿은 하단바와 메뉴에 있음) */
.hdr-xlink{white-space:nowrap;}
@media (max-width:1080px){.hdr-xlink{display:none;}}
/* 1081~1280px: 이동 버튼이 표시되는 좁은 데스크톱 구간 — 메뉴·버튼 살짝 압축해 겹침 방지 */
@media (min-width:1081px) and (max-width:1280px){
  .gnb > li > a{padding:10px 11px;font-size:15px;}
  .hdr-cta .btn{padding:11px 14px;font-size:14px;}
}
/* 320px대 초소형 화면: 로고 옆 문구 숨김 + 로고·버튼 축소로 상단바 넘침 방지 */
@media (max-width:374px){
  .brand .b-tag{display:none;}
  .brand img{height:30px;}
  .hdr-cta .btn{padding:10px 13px;font-size:13.5px;}
  .hdr-cta{gap:6px;margin-left:auto;}
}

/* ---------- 8. Hero ---------- */
.hero{position:relative;background:var(--navy);color:#C9D6E4;overflow:hidden;}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 520px at 84% 8%, rgba(239,59,51,.28), transparent 62%),
    radial-gradient(760px 520px at 6% 96%, rgba(27,66,113,.85), transparent 60%);
  pointer-events:none;
}
.hero-grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;padding:88px 0 96px;}
.hero h1{color:#fff;font-size:clamp(31px,4.9vw,53px);line-height:1.24;letter-spacing:-.035em;}
.hero h1 .hl{
  color:#fff;background:linear-gradient(transparent 62%, rgba(239,59,51,.85) 62%);
  padding:0 2px;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);color:#DCE7F2;
  font-size:13px;font-weight:700;padding:8px 16px;border-radius:100px;margin-bottom:22px;
}
.hero-badge b{color:#fff;}
/* 수상 표기 옆 시상 주최·주관·선정시점 고지 (세무사 광고규정 / 표시광고법 실증) */
.hero-badge{margin-bottom:8px;}
.hero-badge-note{
  display:block;max-width:34em;margin-bottom:20px;
  font-size:11.5px;line-height:1.6;font-weight:600;color:#8FA6BC;
}
.awardnote{
  margin-top:14px;padding:12px 15px;border-left:3px solid var(--line);
  background:var(--bg-soft);border-radius:0 10px 10px 0;
  font-size:12.5px;line-height:1.7;color:var(--muted);font-weight:600;
}
.hero-sub{margin-top:24px;font-size:clamp(15.5px,1.6vw,18px);color:#B4C7DA;line-height:1.8;max-width:32em;}
.hero-quote{
  margin-top:30px;padding:20px 24px;border-left:3px solid var(--red);
  background:rgba(255,255,255,.06);border-radius:0 14px 14px 0;
}
.hero-quote p{color:#fff;font-size:clamp(16px,1.8vw,20px);font-weight:800;letter-spacing:-.02em;line-height:1.5;}
.hero-quote small{display:block;margin-top:8px;color:#9DB4CB;font-size:13.5px;font-weight:600;}
.hero-cta{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap;}
.hero-fig{position:relative;}
/* 3차 수정 : 교체요청사진1번(3:2 비율)이 4:3 크롭에서 인물이 잘리지 않도록 3:2로 */
.hero-fig img{border-radius:var(--r-xl);box-shadow:0 30px 70px rgba(0,0,0,.4);width:100%;object-fit:cover;aspect-ratio:3/2;}
.hero-fig .fig-tag{
  /* 총괄수정(메인): 작은 박스가 인물 머리를 가려 → 사진 상단을 가로지르는 넓은 띠로 (얼굴 구간 아래로 내려오지 않음) */
  position:absolute;left:0;right:0;top:0;bottom:auto;background:rgba(255,255,255,.95);
  border-radius:var(--r-xl) var(--r-xl) 0 0;padding:11px 20px;box-shadow:none;max-width:none;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;
}
.hero-fig.sq .fig-tag{border-radius:0;}   /* 2차: 사진이 각진 모서리면 띠도 각지게 */
.hero-fig .fig-tag b{display:inline;color:var(--navy);font-size:15px;font-weight:800;white-space:nowrap;}
.hero-fig .fig-tag span{font-size:12.5px;color:var(--muted);font-weight:600;}
.hero-strip{position:relative;margin-top:18px;border-top:1px solid rgba(255,255,255,.14);}
.hero-strip ul{display:grid;grid-template-columns:repeat(4,1fr);}
.hero-strip li{padding:26px 20px;border-right:1px solid rgba(255,255,255,.14);}
.hero-strip li:last-child{border-right:0;}
.hero-strip b{display:block;color:#fff;font-size:clamp(17px,2vw,21px);font-weight:800;letter-spacing:-.02em;}
.hero-strip span{font-size:13px;color:#93A9C0;font-weight:600;}

/* 서브페이지 헤더 */
.phead{background:var(--navy);color:#B4C7DA;position:relative;overflow:hidden;}
.phead::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(760px 420px at 88% 0%, rgba(239,59,51,.24), transparent 62%);
}
.phead-in{position:relative;padding:64px 0 68px;max-width:820px;}
.phead h1{color:#fff;font-size:clamp(28px,4.3vw,46px);letter-spacing:-.035em;}
.phead p{margin-top:18px;color:#B4C7DA;font-size:clamp(15px,1.6vw,17.5px);line-height:1.78;}
.phead p.phead-note{
  margin-top:14px;font-size:13px;line-height:1.7;color:#8FA7BF;font-weight:600;
  padding-top:12px;border-top:1px solid rgba(255,255,255,.14);display:inline-block;
}
.phead p.phead-note b{color:#DCE7F2;font-weight:800;}
.crumb{font-size:13px;color:#8FA7BF;font-weight:700;margin-bottom:16px;letter-spacing:.02em;}
.crumb a:hover{color:#fff;}

/* ---------- 9. Cards ---------- */
.grid{display:grid;gap:22px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 28px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card-link:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--navy-tint2);}
.card h3{font-size:19.5px;margin-bottom:10px;}
.card p{font-size:15px;line-height:1.75;}
.card .c-num{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:12px;background:var(--navy-tint);color:var(--navy);font-weight:900;font-size:15px;margin-bottom:16px;
}
.card .c-more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;color:var(--red);font-weight:800;font-size:14.5px;}
.card .c-more::after{content:"→";transition:transform .18s;}
.card-link:hover .c-more::after{transform:translateX(4px);}
.card-flat{background:var(--bg-soft);border-color:transparent;}
/* 카드마다 설명 줄 수가 달라 "… 보기 →" 높이가 어긋났다 — 링크를 맨 아래로 민다 */
.grid .card{display:flex;flex-direction:column;}
.grid .card .c-more{margin-top:auto;padding-top:16px;}
.tag{
  display:inline-block;padding:5px 12px;border-radius:100px;background:var(--navy-tint);
  color:var(--navy-mid);font-size:12.5px;font-weight:800;margin:0 6px 6px 0;
}
.tag-red{background:var(--red-tint);color:var(--red-dark);}

/* 체크 리스트 */
.checks li{position:relative;padding-left:28px;margin-bottom:9px;font-size:15px;line-height:1.7;}
.checks li::before{
  content:"";position:absolute;left:0;top:8px;width:16px;height:16px;border-radius:50%;
  background:var(--red);
  -webkit-mask:no-repeat center/9px 9px url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6l3.4 3.4L11 2.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask:no-repeat center/9px 9px url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6l3.4 3.4L11 2.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.dots li{position:relative;padding-left:15px;margin-bottom:7px;font-size:14.5px;line-height:1.7;}
.dots li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--muted);}

/* split (텍스트 + 사진) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split.rev .sp-fig{order:-1;}
.sp-fig img{border-radius:var(--r-xl);box-shadow:var(--sh-2);width:100%;object-fit:cover;}
.sp-fig.ratio img{aspect-ratio:4/3;}

/* ---------- 10. 계단식 성장 카드 (사업자 세금) ---------- */
.stairs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:end;position:relative;}
/* 계단이 '성장'을 뜻한다는 걸 한눈에 보이게 하는 상승 곡선 — 카드 뒤에 깐다 */
.stairs > .stair{position:relative;z-index:1;}
.stairs-rise{position:absolute;left:2%;top:-12px;width:60%;height:auto;z-index:0;pointer-events:none;opacity:.17;}
/* 붓질처럼 두툼한 스윕 — 얇은 선이나 점선은 '성장'의 기세가 안 산다.
   색은 남색(빨강은 CTA 몫), 투명도를 낮춰 배경 그래픽으로 깔린다 */
.stairs-rise .sr-line{fill:none;stroke:var(--navy-mid);stroke-width:15;stroke-linecap:round;}
.stairs-rise .sr-head{fill:var(--navy-mid);stroke:none;}
.stair{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-1);transition:transform .22s ease,box-shadow .22s ease;
}
.stair:hover{transform:translateY(-6px);box-shadow:var(--sh-2);}
.stair-1{margin-bottom:0;}
.stair-2{margin-bottom:54px;}
.stair-3{margin-bottom:108px;}
.stair-hd{padding:22px 26px;color:#fff;}
.stair-1 .stair-hd{background:#5C88BC;}
.stair-2 .stair-hd{background:var(--navy-mid);}
.stair-3 .stair-hd{background:var(--navy);}
.stair-hd .st-step{font-size:12.5px;font-weight:800;letter-spacing:.12em;opacity:.82;}
.stair-hd h3{color:#fff;font-size:21px;margin-top:4px;}
.stair-hd p{font-size:13.5px;color:rgba(255,255,255,.86);margin-top:6px;line-height:1.6;}
.stair-bd{padding:26px;background:#fff;}
.stair-bd h4{font-size:15.5px;color:var(--navy);margin:18px 0 8px;}
.stair-bd h4:first-child{margin-top:0;}
.stairs-base{
  height:14px;border-radius:0 0 var(--r-lg) var(--r-lg);
  background:linear-gradient(90deg,var(--navy-tint),var(--navy-tint2));margin-top:-1px;
}

/* ---------- 11. 업종별 버튼 ---------- */
.indgroup{margin-bottom:56px;}
.indgroup-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:8px;}
.indgroup-hd h3{font-size:23px;}
.ind-chip{font-size:12.5px;font-weight:800;padding:5px 13px;border-radius:100px;}
.chip-general{background:var(--navy-tint);color:var(--navy-mid);}
.chip-special{background:var(--red-tint);color:var(--red-dark);}
.chip-np{background:var(--navy-tint);color:var(--navy);}
/* 초록은 이 네 줄에서만 쓰였다. 구분은 명도로 남기고 색상은 네이비 하나로 (2026-09-24) */
.ind-np{background:var(--navy-tint);border-color:var(--navy-tint2);color:var(--navy);}
.ind-np:hover{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 12px 26px rgba(15,42,71,.24);}
/* 마지막 칸은 업종이 아니라 안내 페이지로 가는 자리라 채워서 구분한다 */
.ind-np.is-guide{background:var(--navy);border-color:var(--navy);color:#fff;}
.indgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px;}
.indbtn{
  display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-height:112px;
  padding:20px 20px 17px;border-radius:16px;border:1.5px solid;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.indbtn b{font-size:16.5px;font-weight:800;letter-spacing:-.02em;line-height:1.35;}
.indbtn .ib-go{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:6px;opacity:.78;}
.indbtn .ib-go::after{content:"→";transition:transform .18s;}
.indbtn:hover{transform:translateY(-3px);}
.indbtn:hover .ib-go::after{transform:translateX(4px);}
/* 일반업종 = 네이비 계열 */
.ind-general{background:#fff;border-color:var(--navy-tint2);color:var(--navy);}
.ind-general:hover{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 12px 26px rgba(15,42,71,.22);}
/* 특수업종 = 레드 계열 (색을 다르게) */
.ind-special{background:var(--red-tint);border-color:#F6C6C3;color:var(--red-dark);}
.ind-special:hover{background:var(--red);border-color:var(--red);color:#fff;box-shadow:var(--sh-red);}
.indsub{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.indsub a{
  font-size:13px;font-weight:700;color:var(--body);background:var(--bg-soft);
  border:1px solid var(--line);padding:8px 14px;border-radius:100px;transition:.16s;
}
.indsub a:hover{border-color:var(--navy);color:var(--navy);}

/* ---------- 12. 가격표 ---------- */
.toggle{
  display:inline-flex;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:100px;padding:5px;gap:4px;
}
.toggle button{
  padding:11px 30px;border-radius:100px;font-size:15.5px;font-weight:800;color:var(--muted);transition:.18s;
}
.toggle button[aria-selected="true"]{background:#fff;color:var(--navy);box-shadow:var(--sh-1);}
.picker{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px;}
.picker label{font-size:14.5px;font-weight:800;color:var(--ink);}
.picker select,.picker input{
  min-width:230px;padding:13px 16px;border-radius:12px;border:1.5px solid var(--line);
  background:#fff;font-size:15px;font-weight:700;color:var(--ink);
}
.picker select:focus,.picker input:focus{outline:none;border-color:var(--navy);}
.picker .lbl-unit{color:var(--red);font-weight:800;}
/* 금액 직접 입력 — 단위(억원)를 상시 노출 */
.unitfield{position:relative;display:inline-flex;align-items:center;}
.unitfield input{padding-right:62px;}
.unitfield .uf-suffix{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;
  font-size:14.5px;font-weight:800;color:var(--navy);
}
.unitfield input[aria-invalid="true"]{border-color:var(--red);background:#FFF7F6;}
.picker-help{margin-top:10px;font-size:13.5px;color:var(--muted);font-weight:600;text-align:center;}
.picker-help b{color:var(--ink);font-weight:800;}
.picker-warn{
  margin-top:10px;padding:12px 16px;border-radius:12px;
  background:#FDECEA;border:1px solid #F5B7B1;color:#8E1A15;
  font-size:14px;font-weight:700;line-height:1.65;text-align:center;
}
.calcout{
  margin-top:22px;background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:28px 30px;
  display:none;
}
.calcout.on{display:block;}
.calcout .co-top{font-size:13.5px;color:#9DB4CB;font-weight:700;}
.calcout .co-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:14px;}
.calcout .co-k{font-size:13.5px;color:#9DB4CB;font-weight:700;}
.calcout .co-v{font-size:clamp(22px,3vw,30px);font-weight:900;color:#fff;letter-spacing:-.03em;line-height:1.3;}
.calcout .co-f{font-size:13px;color:#B4C7DA;margin-top:6px;line-height:1.6;}
.calcout .co-note{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);font-size:13px;color:#9DB4CB;}

.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:#fff;}
.tbl{min-width:660px;font-size:15px;}
.tbl caption{text-align:left;padding:16px 20px;font-weight:800;color:var(--ink);font-size:16px;background:var(--bg-soft);border-bottom:1px solid var(--line);}
.tbl th,.tbl td{padding:14px 16px;border-bottom:1px solid var(--line-soft);text-align:center;vertical-align:middle;}
.tbl thead th{background:var(--navy-tint);color:var(--navy);font-weight:800;font-size:14.5px;border-bottom:1px solid var(--line);}
.tbl tbody tr:last-child td,.tbl tbody tr:last-child th{border-bottom:0;}
.tbl th[scope="row"],.tbl .lead-cell{background:var(--bg-soft);font-weight:800;color:var(--ink);}
.tbl td.num{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);}
.tbl td.formula{font-size:14px;color:var(--body);font-variant-numeric:tabular-nums;}
.tbl tbody tr.is-hit{background:#FFF7F0;box-shadow:inset 3px 0 0 var(--red);}
.tbl tbody tr.is-hit td,.tbl tbody tr.is-hit th{background:transparent;}
.tbl tbody tr.is-hit td.num{color:var(--red-dark);}
.pricenote{background:var(--bg-soft);border-radius:var(--r);padding:24px 26px;margin-top:22px;}
.pricenote ol{counter-reset:n;}
.pricenote li{counter-increment:n;position:relative;padding-left:28px;margin-bottom:8px;font-size:14.5px;line-height:1.7;}
.pricenote li::before{
  content:counter(n) ")";position:absolute;left:0;top:0;color:var(--navy);font-weight:800;font-size:14px;
}
.warnbox{
  display:flex;gap:14px;align-items:flex-start;background:var(--red-tint);border:1px solid #F8D3D1;
  border-radius:var(--r);padding:20px 24px;margin-top:22px;
}
.warnbox .wb-ico{flex:none;width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;}
.warnbox b{color:var(--red-dark);display:block;font-size:15.5px;}
.warnbox p{font-size:14.5px;color:#8A322D;margin-top:3px;}
/* 라벨 + 목록 두 줄. 문장 중간에 <b>를 쓰면 display:block 이라 줄이 끊긴다 */
.warnbox .wb-line{display:flex;gap:10px;align-items:baseline;margin-top:7px;}
.warnbox .wb-line > span{flex:0 0 100px;white-space:nowrap;font-weight:800;color:var(--red-dark);}
@media (max-width:600px){
  .warnbox .wb-line{display:block;}
  .warnbox .wb-line > span{display:block;margin-bottom:2px;}
}

/* ---------- 재건축 · 리모델링 안내 ---------- */
.rd-map{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 10px;overflow-x:auto;}
.rd-map svg{width:100%;min-width:720px;height:auto;display:block;}
.rd-tl{list-style:none;padding:0;margin:0;border-left:2px solid var(--line);}
.rd-tl li{display:flex;gap:16px;padding:0 0 22px 22px;position:relative;}
.rd-tl li:last-child{padding-bottom:0;}
.rd-tl li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--red);}
.rd-tl li.rd-now::before{width:16px;height:16px;left:-9px;background:var(--red);box-shadow:0 0 0 4px rgba(205,42,35,.18);}
.rd-tl li.rd-now .rd-when{color:var(--red);}
.rd-tl li.rd-now b{color:var(--red-dark);}
.rd-tl .rd-when{flex:none;width:92px;font-weight:800;color:var(--navy);font-size:14.5px;}
.rd-tl b{color:var(--navy);font-size:16px;}
.rd-tl p{font-size:14.5px;color:var(--ink-soft);}
.rd-step{display:inline-block;font-size:18px;font-weight:900;color:var(--red);margin-bottom:6px;}
.rd-chk{list-style:none;padding:0;margin:8px 0 14px;}
.rd-chk li{position:relative;padding-left:18px;font-size:14.5px;color:var(--ink);margin-top:6px;}
.rd-chk li::before{content:"·";position:absolute;left:6px;color:var(--red);font-weight:900;}
.rd-case{margin-top:auto;padding:18px 20px;background:var(--bg-soft);border-left:3px solid var(--navy);border-radius:0 10px 10px 0;
  min-height:172px;display:flex;flex-direction:column;justify-content:center;}
.rd-case b{display:block;font-size:14px;color:var(--navy);}
.rd-case p{font-size:14px;color:var(--ink-soft);margin-top:4px;}
/* 사례 카드와 확실히 분리 — 위 여백 + 가는 구분선 */
.rd-topbox{margin-top:56px;padding-top:40px;border-top:1px solid var(--line);}
.rd-topbox h3{margin-bottom:0;}
.rd-topbox .rd-topics{margin-top:34px;}
.rd-topbox .small{margin-top:30px;}
.rd-topics{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.rd-topics li{background:#EDF3FB;border:1.5px solid #AFC3DC;border-radius:999px;padding:11px 20px;font-size:15.5px;font-weight:800;color:#1B4C86;}
/* 증여 · 상속 카드 — 설명 길이가 달라도 체크리스트가 같은 높이에서 시작하게 */
.rd-plan > p{min-height:132px;}
@media (max-width:940px){ .rd-plan > p{min-height:0;} }
/* 다른 곳엔 없는 항목만 빨강 — 세금만 보는 곳이 아니라는 신호 */
.rd-topics li.hot{background:#FDECEB;border-color:#E9AFAB;color:#B3261E;}
.rd-wrap{overflow-x:auto;}
.rd-tbl{width:100%;min-width:640px;border-collapse:collapse;background:#fff;font-size:14.5px;}
.rd-tbl th{background:var(--navy);color:#fff;font-weight:800;padding:12px 14px;text-align:left;white-space:nowrap;}
.rd-tbl td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;}
.rd-tbl tr:last-child td{border-bottom:0;}
.rd-tbl td:first-child{font-weight:800;color:var(--navy);white-space:nowrap;}
@media (max-width:640px){
  .rd-tl li{flex-direction:column;gap:4px;}
  .rd-tl .rd-when{width:auto;}
}

/* 최신으로 고친 Focus 카드 — 노란 배경으로 한눈에 구분 */
.card.is-new{background:#FFFBEA;border-color:#F0D68A;}
.card.is-new .cd-new{display:inline-block;background:var(--red);color:#fff;font-size:11px;font-weight:800;letter-spacing:.01em;padding:3px 9px;border-radius:999px;margin-bottom:10px;}

/* 업종 카드 '2026 업데이트' 배지 — 최신으로 고친 업종만 붙는다 */
.indbtn{position:relative;}
.ib-spacer{display:none;}   /* 모바일 격자 정렬용, PC 에는 없는 칸 */
.ib-new{
  position:absolute;top:10px;right:12px;background:var(--red);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.01em;padding:3px 9px;border-radius:999px;
}
.pb-0{padding-bottom:0;}

/* ---------- 13. 경리 아웃소싱 ---------- */
/* 표 전체 폭을 채우고 BASIC·PLUS·PRO 3열을 균등 분할 (table-layout:fixed) */
.plan-tbl{min-width:820px;width:100%;font-size:15px;table-layout:fixed;}
.plan-tbl thead th{padding:22px 20px;text-align:left;vertical-align:top;background:var(--bg-soft);border-bottom:1px solid var(--line);}
.plan-tbl thead th:first-child{width:124px;}
.plan-tbl th,.plan-tbl td{word-break:keep-all;overflow-wrap:break-word;}
.plan-tbl thead th .pt-name{display:block;font-size:19px;font-weight:900;color:var(--navy);letter-spacing:.02em;}
.plan-tbl thead th .pt-desc{display:block;font-size:13.5px;font-weight:700;color:var(--body);margin-top:4px;}
.plan-tbl th[scope="row"]{width:120px;text-align:left;background:var(--bg-soft);font-weight:800;color:var(--ink);font-size:14.5px;vertical-align:top;}
.plan-tbl td{text-align:left;vertical-align:top;padding:20px;border-bottom:1px solid var(--line-soft);}
.plan-tbl .pt-price{font-size:19px;font-weight:900;color:var(--navy);}
.plan-tbl .pt-price small{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-top:3px;}
.plan-tbl .pt-vip{background:#FBFCFE;}
/* BASIC/PLUS 전체 포함 표기 */
.plan-tbl .pt-inc{display:block;font-size:14.5px;font-weight:900;color:var(--navy);margin-bottom:10px;}
.plan-tbl ul li{position:relative;padding-left:15px;margin-bottom:6px;font-size:14.5px;line-height:1.65;}
.plan-tbl ul li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;background:var(--navy-mid);}
.plan-tbl ul li.is-add{font-weight:800;color:var(--red-dark);}
.plan-tbl ul li.is-add::before{background:var(--red);}

/* ---------- 14. 재산제세 버튼 (링크 없음) ---------- */
.propgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.propbtn{
  background:#fff;border:1.5px solid var(--navy-tint2);border-radius:18px;padding:26px 24px;
  text-align:left;cursor:default;
}
.propbtn .pb-en{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--red);}
.propbtn b{display:block;font-size:21px;font-weight:900;color:var(--navy);margin-top:6px;letter-spacing:-.03em;}
.propbtn p{font-size:14px;color:var(--body);margin-top:9px;line-height:1.65;}
.propgrid-sm{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.propbtn-sm{
  background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;
  padding:20px 18px;text-align:left;cursor:default;
}
.propbtn-sm b{display:block;font-size:16px;font-weight:800;color:var(--navy);}
.propbtn-sm span{font-size:13px;color:var(--muted);font-weight:600;}

/* ---------- 15. 고객의 말 마퀴 ---------- */
.marquee{position:relative;overflow:hidden;padding:6px 0;}
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--bg-soft),transparent);}
.marquee::after{right:0;background:linear-gradient(270deg,var(--bg-soft),transparent);}
.marquee.on-white::before{background:linear-gradient(90deg,#fff,transparent);}
.marquee.on-white::after{background:linear-gradient(270deg,#fff,transparent);}
.mq-track{display:flex;gap:20px;width:max-content;will-change:transform;}
.mq-ltr .mq-track{animation:mqLtr 62s linear infinite;}
.mq-rtl .mq-track{animation:mqRtl 68s linear infinite;}
/* 같은 좌→우 방향에서 두 줄의 속도만 다르게 (사양: 좌에서 우로) */
.mq-slow .mq-track{animation-duration:78s;}
.marquee:hover .mq-track{animation-play-state:paused;}
@keyframes mqLtr{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@keyframes mqRtl{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.mq-card{
  flex:none;width:340px;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:26px 26px 22px;box-shadow:var(--sh-1);display:flex;flex-direction:column;
}
.mq-card .q{font-size:23px;font-weight:900;color:var(--red);line-height:1;margin-bottom:12px;}
.mq-card p{font-size:15px;color:var(--ink);line-height:1.72;font-weight:600;flex:1;}
.mq-card .m-meta{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line);}
.mq-card .m-ctx{display:block;font-size:12.5px;color:var(--muted);font-weight:600;}
.mq-card .m-who{display:block;font-size:13.5px;color:var(--navy);font-weight:800;margin-top:3px;}

/* 후기 카드는 길이가 제각각이다. 그리드로 깔면 같은 줄이 가장 큰 카드에 맞춰 늘어나
   짧은 카드 안에 큰 공백이 생긴다. 다단(columns)으로 흘려 카드가 제 높이만 쓰고
   아래 카드가 빈자리로 올라오게 한다. 목록은 글자 수로 정렬돼 있어 단 높이도 고르게 나뉜다 */
.revgrid{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;
  background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;}
.revcol{display:flex;flex-direction:column;}
.revcol + .revcol{border-left:1px solid var(--line);}
.revgrid .revcard{background:transparent;border:0;border-radius:0;margin-bottom:0;padding:26px 26px 30px;}
.revcol .revcard + .revcard{border-top:1px solid var(--line);}
.revcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;display:flex;flex-direction:column;}
.revcard .q{font-size:23px;font-weight:900;color:var(--red);line-height:1;margin-bottom:12px;}
.revcard p{font-size:15px;color:var(--ink);line-height:1.75;font-weight:600;}
.revcard .m-meta{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line);}
.revcard .m-ctx{display:block;font-size:12.5px;color:var(--muted);font-weight:600;}
.revcard .m-who{display:block;font-size:13.5px;color:var(--navy);font-weight:800;margin-top:3px;}
.stars{color:#F5A623;font-size:14px;letter-spacing:2px;}

/* 체크리스트에서 가장 놓치기 쉬운 줄 하나만 형광펜으로 */
.rd-chk li.hl{font-weight:800;}
.rd-chk li.hl span{background:linear-gradient(transparent 58%,#FFEEA0 58%);padding:0 1px 1px;}
/* 표는 '지금 검토할 것' 칸이 읽는 사람 할 일이라 먼저 보이게 */
/* 마지막 열이 "먼저 확인할 것"인 표만 강조한다. 고문 비교표는 마지막이 단발 자문이라 해당 없음 */
.rd-tbl.act-last td:last-child{color:var(--navy);font-weight:700;}
/* 재산 홈 3카드 아래 지역 한 줄 — 3카드보다 작고 좁게 */
.pc-region{margin-top:46px;}
.pc-region-k{text-align:center;font-size:17.5px;font-weight:800;color:var(--navy);letter-spacing:-.01em;}
.pc-region .pc-rcard{background:var(--bg-soft);border-color:#E1E8F1;padding:24px 26px;}
.pc-region .pc-rcard h3{font-size:19px;margin-top:15px;}
.pc-region .pc-rcard p{font-size:15px;margin-top:7px;}
.pc-region .pc-rcard .c-more{margin-top:14px;}
@media (max-width:600px){ .pc-region-k{font-size:16px;} }

/* 모바일용 요금 카드 — PC에서는 표를 쓴다. 미디어쿼리보다 위에 있어야 한다 */
.plan-cards{display:none;}

/* 모바일: 도식은 폭에 맞춰 줄이면 글자를 못 읽는다. 감추고 역별 목록으로 대신한다 */
.rd-mlist{display:none;}
.rd-sm{display:none;}

/* 업종 칩 펼치기 — 모바일 전용. PC 는 카드 격자를 그대로 쓴다 */
.ind-toggle{display:none;}
.ind-more{display:none;margin:14px auto 0;padding:11px 20px;width:max-content;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:13.5px;font-weight:700;color:var(--navy);cursor:pointer;}
.ind-more:hover{border-color:var(--navy);}
/* 붙여서 읽어야 하는 구(句)가 줄 끝에서 끊기지 않게 */
.nb{white-space:nowrap;}

/* 태블릿 폭에서는 업종이 2열이라 91개를 다 펼치면 이 구역만 7,900px 가 된다.
   레이아웃은 그대로 두고 높이만 접는다 (펼치기 버튼은 모바일과 같은 것) */
@media (min-width:601px) and (max-width:1024px){
  .wrap .grid.ind-grid{max-height:430px;overflow:hidden;}
  .ind-toggle:checked ~ .grid.ind-grid{max-height:none;}
  .ind-more{display:block;}
}

@media (max-width:600px){
  .rd-map{overflow-x:visible;padding:6px 4px;}
  .rd-map svg{display:none;}
  .rd-mlist{display:block;list-style:none;padding:0;margin:0;}
  .rd-mlist li{display:flex;gap:12px;align-items:flex-start;padding:11px 8px;border-bottom:1px solid var(--line);}
  .rd-mlist li:last-child{border-bottom:0;}
  .rd-mlist li > b{flex:0 0 66px;font-size:14px;font-weight:800;color:var(--navy);padding-top:5px;}
  .rd-mlist li > div{display:flex;flex-wrap:wrap;gap:6px;}
  .rd-t{border-radius:999px;padding:5px 12px;font-size:13px;font-weight:800;}
  .rd-t.up{background:#FDECEB;border:1px solid #E9AFAB;color:#B3261E;}
  .rd-t.dn{background:#EDF3FB;border:1px solid #AFC3DC;color:#1B4C86;}
  .rd-topbox{margin-top:36px;padding-top:28px;}
  .rd-topbox h3{font-size:20px;}
  .rd-topbox .rd-topics{margin-top:20px;}
  .rd-topbox .small{margin-top:20px;}
  .rd-topics{gap:7px;}
  .rd-topics li{padding:8px 13px;font-size:13px;border-width:1px;}
  /* 4열 표는 폭을 못 줄인다. 잘리는 3 · 4열이 정작 중요한 칸이라 카드로 풀어 쌓는다 */
  .rd-wrap{overflow-x:visible;}
  .rd-tbl{display:block;min-width:0;background:transparent;}
  .rd-tbl thead{display:none;}
  .rd-tbl tbody,.rd-tbl tr,.rd-tbl td{display:block;width:auto;}
  .rd-tbl tr{background:#fff;border:1px solid var(--line);border-radius:12px;
    padding:14px 16px;margin-bottom:10px;}
  .rd-tbl td{border-bottom:0;padding:4px 0;white-space:normal;}
  .rd-tbl td:first-child{font-size:15.5px;white-space:normal;
    padding-bottom:9px;margin-bottom:7px;border-bottom:1px solid var(--line);}
  .rd-tbl td:not(:first-child){display:flex;gap:10px;align-items:baseline;}
  .rd-tbl td:not(:first-child)::before{content:attr(data-l);flex:0 0 88px;
    color:var(--muted);font-weight:700;font-size:12.5px;}
  /* 버튼이 2개 · 1개로 접혀 줄이 들쭉날쭉했다. 폰에서는 한 줄에 하나씩, 폭을 꽉 채운다.
     재건축 페이지의 3개짜리(.rd-btns)만 가로로 둔다 */
  /* 상담료 : '대면과 동일'이 금액 뒤에 붙어 읽히지 않는다 */
  .tbl td.num small{display:block;margin-top:5px;}
  /* 보수표 : 조정료 칸이 잘려 기장료만 보고 오해할 수 있다. 구간마다 카드로 푼다 */
  .fee-tbl{display:block;min-width:0;}
  .fee-tbl caption{display:block;}   /* table-caption 인 채로 두면 세로로 써진다 */
  .fee-tbl thead{display:none;}
  .fee-tbl tbody,.fee-tbl tr,.fee-tbl th,.fee-tbl td{display:block;width:auto;}
  .fee-tbl tr{padding:13px 16px;border-bottom:1px solid var(--line);}
  .fee-tbl tr:last-child{border-bottom:0;}
  .fee-tbl th[scope="row"]{background:transparent;padding:0 0 9px;font-size:15.5px;
    border-bottom:1px solid var(--line-soft);margin-bottom:8px;}
  .fee-tbl td{padding:4px 0;border:0;text-align:left;display:flex;gap:10px;align-items:baseline;}
  .fee-tbl td::before{content:attr(data-l);flex:0 0 78px;color:var(--muted);
    font-weight:700;font-size:12.5px;}
  /* 경리 아웃소싱 : 표는 가로로 못 줄인다. 카드 3장으로 바꿔 끼운다 */
  .plan-wrap{display:none;}
  .plan-cards{display:grid;gap:14px;margin-top:8px;}
  .plan-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px;}
  .plan-card.is-pro{background:#FBFCFE;}
  .plan-card .pt-name{display:block;font-size:19px;font-weight:900;color:var(--navy);letter-spacing:.02em;}
  .plan-card .pt-desc{display:block;font-size:13.5px;font-weight:700;color:var(--body);margin-top:4px;}
  .plan-card .pt-price{font-size:18px;font-weight:900;color:var(--navy);
    margin:14px 0;padding:10px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
  .plan-card .pt-inc{display:block;font-size:14.5px;font-weight:900;color:var(--navy);margin-bottom:10px;}
  .plan-card ul li{position:relative;padding-left:15px;margin-bottom:6px;font-size:14.5px;line-height:1.65;}
  .plan-card ul li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;
    border-radius:50%;background:var(--navy-mid);}
  .plan-card ul li.is-add{font-weight:800;color:var(--red-dark);}
  .plan-card ul li.is-add::before{background:var(--red);}
  .btn-row:not(.rd-btns){flex-direction:column;align-items:stretch;gap:10px;}
  .btn-row:not(.rd-btns) .btn{width:100%;}
  /* 문의 작성기 · 문답지 버튼도 같은 규칙 — 글자가 길어 한 줄에 셋은 안 들어간다 */
  .qb-actions{flex-direction:column;align-items:stretch;gap:10px;}
  .qb-actions .btn{width:100%;}
  .qb-actions .qb-msg{text-align:center;}
  /* 쟁점 칩 : 줄마다 폭이 달라 들쭉날쭉했다. 2열로 폭을 맞춘다 */
  /* 함께 보면 좋은 글 : 제목이 길어 2열은 안 들어간다. 한 줄에 하나씩 꽉 채운다 */
  .rel-sub{display:grid;grid-template-columns:1fr;gap:8px;}
  .rel-sub a{text-align:left;}
  .rd-topics{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
  .rd-topics li{text-align:center;padding:10px 8px;font-size:12.5px;}
  /* 업종이 91개라 큰 카드로 깔면 이 섹션만 17,000px 가 된다.
     모바일은 이름만 남긴 2열 버튼으로 줄이고, 설명은 들어간 페이지에서 읽게 한다 */
  /* 업종 91개. 파일 아래쪽 body[data-page="hub"] .g4 등이 (0,2,1) 이라
     .grid.ind-grid (0,2,0) 를 이겨 열 수 · 여백 · 글자크기를 도로 가져갔다.
     그래서 .wrap 을 앞에 붙여 (0,3,0) 으로 올린다. 순서가 아니라 특이도로 이긴다.
     열은 minmax(0,1fr) — 그냥 1fr 은 최소폭이 auto 라 긴 이름이 제 열을 밀어낸다. */
  .wrap .grid.ind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;grid-auto-flow:dense;max-height:224px;overflow:hidden;}
  .ind-toggle:checked ~ .grid.ind-grid{max-height:none;}
  .wrap .ind-grid .card{min-height:0;padding:11px 4px;border-radius:10px;
    align-items:center;justify-content:center;text-align:center;}
  .wrap .ind-grid .card h3{margin:0;font-size:12.5px;line-height:1.25;
    letter-spacing:-.04em;white-space:nowrap;}
  .wrap .ind-grid .card.is-wide{grid-column:span 2;}
  .wrap .ind-grid .card p,
  .wrap .ind-grid .card .c-more{display:none;}
  .ind-more{display:block;}
  /* 서비스 6장이 1열이면 900px 다. 2열로 줄이고 설명은 들어간 페이지에서 읽게 한다 */
  .wrap .grid.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
  .wrap .svc-grid .card{min-height:0;padding:14px 8px;border-radius:11px;
    align-items:center;justify-content:center;text-align:center;}
  .wrap .svc-grid .card h3{margin:0;font-size:13.5px;line-height:1.3;
    letter-spacing:-.035em;word-break:keep-all;}
  .wrap .svc-grid .card p,
  .wrap .svc-grid .card .c-more{display:none;}
  /* 우측 원형 3개가 스크롤 내내 본문 글씨를 덮었다. 모바일은 하단바로 합치고
     맨 위로(↑) 만 남긴다. PC 는 폭이 넉넉하니 그대로 둔다 */
  .floatbar{background:none;box-shadow:none;border:0;padding:0;}
  .floatbar .fb-title,
  .floatbar .fb-kakao,
  .floatbar .fb-naver,
  .floatbar .fb-tel{display:none;}
  /* 후기는 세 단으로 높이를 맞추려다 보니 여백만 커졌다.
     모바일에서는 카드 높이를 그대로 두고 옆으로 넘겨 보게 한다.
     revcol 은 display:contents 로 없애 카드가 바로 가로 트랙에 들어간다 */
  .revgrid.revgrid{display:flex;overflow-x:auto;gap:12px;padding:2px 0 10px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;border:0;}
  .revgrid.revgrid .revcol{display:contents;}
  .revgrid.revgrid .revcol + .revcol{border-left:0;}
  .revgrid.revgrid .revcard{flex:0 0 80%;scroll-snap-align:start;background:#fff;
    border:1px solid var(--line);border-radius:16px;padding:20px 18px 22px;}
  .revgrid.revgrid .revcol .revcard + .revcard{border-top:1px solid var(--line);}
  /* 구성원 태그가 flex-wrap 이라 줄마다 폭이 달랐다 */
  .mem-bd .m-tags{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
  .mem-bd .m-tags .tag{text-align:center;white-space:nowrap;font-size:11.5px;padding:7px 4px;}
  /* 수상 배지와 제목이 붙어 있었다 */
  .hero-badge{margin-bottom:14px;}
  /* '다른 서비스' 목록이 제목 + 설명이라 두 줄씩 넘어가 줄이 안 맞았다 */
  .pc-list .svc-d{display:none;}
  .pc-list li{padding:13px 14px;}
  .pc-list b{font-size:13.5px;font-weight:800;letter-spacing:-.02em;}
  /* 업종 버튼 64개가 1열이면 6,400px 다. 지역 · 업종 칩과 같은 3열로 */
  .wrap .indgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:16px;}
  .wrap .indgrid .indbtn{min-height:0;padding:11px 5px;border-radius:10px;gap:0;
    align-items:center;justify-content:center;text-align:center;}
  .wrap .indgrid .indbtn b{font-size:11.5px;line-height:1.28;letter-spacing:-.04em;
    word-break:keep-all;}
  .wrap .indgrid .indbtn .ib-go{display:none;}
  .wrap .indgrid .ib-new{display:none;}   /* 절대위치 배지가 업종명을 덮었다 */
  /* 두 줄로 접히는 이름은 아래로 몰아 윗줄을 고르게 한다 (비영리 칸은 순서가 따로 있다) */
  .wrap .indgrid .ib-full{grid-column:1/-1;}
  /* 마지막 묶음의 아래 여백(56px)이 섹션 여백에 더해져 140px 이 됐다 */
  .wrap > .indgroup:last-child{margin-bottom:0;}
  /* 지역 카드 50장도 같은 칩 격자로. 카드로 깔면 이 구역만 5,500px 가 된다 */
  .wrap .grid.reg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
  .wrap .reg-grid .card{min-height:0;padding:11px 4px;border-radius:10px;
    align-items:center;justify-content:center;text-align:center;}
  .wrap .reg-grid .card h3{margin:0;font-size:12.5px;line-height:1.25;
    letter-spacing:-.04em;white-space:nowrap;}
  .wrap .reg-grid .card p,
  .wrap .reg-grid .card .c-more{display:none;}

  .rd-btns{display:flex;flex-wrap:nowrap;gap:8px;}
  .rd-btns .btn{flex:1 1 0;min-width:0;padding:13px 4px;font-size:13.5px;white-space:nowrap;}
  .rd-lg{display:none;}
  .rd-sm{display:inline;}
}



/* ---------- 16. 구성원 ---------- */
.memgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.mem{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;}
/* 2차 수정지시 탭2-4 : 사진 표시 크기를 더 작게 (노란 표시 비율 ≒ 5:7)
   2차 수정지시 탭2-5 : 세무사 3인 사진틀 배경을 흰색/그레이로 통일 */
.mem-photo{
  aspect-ratio:5/7;width:min(74%,236px);margin:26px auto 4px;
  background:var(--photo-bg);border:1px solid var(--line);border-radius:16px;
  position:relative;overflow:hidden;
}
.mem-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;background:var(--photo-bg);}
.mem-photo .ph-none{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:var(--photo-bg);
}
.mem-photo .ph-none .init{
  width:76px;height:76px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:29px;font-weight:900;letter-spacing:-.03em;
}
.mem-photo .ph-none small{font-size:12px;color:var(--muted);font-weight:700;}
.mem-role{
  position:absolute;left:10px;top:10px;background:var(--red);color:#fff;
  font-size:11.5px;font-weight:800;padding:5px 11px;border-radius:100px;box-shadow:var(--sh-red);
}
.mem-role.is-navy{background:var(--navy);box-shadow:0 8px 20px rgba(15,42,71,.3);}
.mem-bd{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1;}
.mem-bd .m-name{font-size:24px;font-weight:900;color:var(--ink);letter-spacing:-.03em;}
.mem-bd .m-name small{font-size:14px;font-weight:800;color:var(--muted);margin-left:8px;letter-spacing:0;}
.mem-bd .m-line{font-size:14.5px;color:var(--red-dark);font-weight:800;margin-top:6px;}
.mem-bd .m-desc{font-size:14.5px;line-height:1.75;margin-top:14px;flex:1;}
.mem-bd .m-tags{margin-top:16px;}
.mem-bd .btn{margin-top:20px;width:100%;}

/* ---------- 17. CTA 밴드 / 문의 ---------- */
.ctaband{background:var(--navy);color:#B4C7DA;position:relative;overflow:hidden;}
.ctaband::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 400px at 78% 20%, rgba(239,59,51,.3), transparent 60%);}
.ctaband-in{position:relative;padding:76px 0;text-align:center;}
.ctaband h2{color:#fff;}
.ctaband p{margin-top:16px;color:#B4C7DA;}

.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.ccard{
  border-radius:var(--r-lg);padding:32px 28px;border:1px solid var(--line);background:#fff;
  display:flex;flex-direction:column;gap:12px;transition:transform .2s,box-shadow .2s;
}
.ccard:hover{transform:translateY(-4px);box-shadow:var(--sh-2);}
.ccard .cc-ico{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;}
.ccard .cc-ico svg{width:30px;height:30px;}
.cc-kakao .cc-ico{background:#FEE500;}
.cc-naver .cc-ico{background:#03C75A;}
.cc-tel .cc-ico{background:var(--navy);}
.ccard h3{font-size:20px;}
.ccard .cc-v{font-size:17px;font-weight:900;color:var(--navy);letter-spacing:-.02em;word-break:break-all;}
.ccard p{font-size:14.5px;flex:1;}

.infolist{border-top:1px solid var(--line);}
.infolist div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:18px 4px;border-bottom:1px solid var(--line);}
.infolist dt{font-weight:800;color:var(--ink);font-size:15px;}
.infolist dd{font-size:15px;color:var(--body);}

.quotebox{background:var(--bg-soft);border-radius:var(--r-lg);padding:34px 32px;}
.qb-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px;}
.qb-f label{display:block;font-size:13.5px;font-weight:800;color:var(--ink);margin-bottom:7px;}
.qb-f select,.qb-f input,.qb-f textarea{
  width:100%;padding:13px 15px;border-radius:12px;border:1.5px solid var(--line);
  background:#fff;font-size:15px;font-weight:600;color:var(--ink);
}
.qb-f textarea{min-height:96px;resize:vertical;font-weight:500;}
.qb-f select:focus,.qb-f input:focus,.qb-f textarea:focus{outline:none;border-color:var(--navy);}
.qb-full{grid-column:1/-1;}
.qb-out{
  margin-top:20px;background:#fff;border:1.5px dashed var(--line);border-radius:14px;padding:20px 22px;
  font-size:14.5px;line-height:1.8;white-space:pre-wrap;color:var(--ink);min-height:80px;
}
.qb-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;align-items:center;}
/* 재산 견적 문의는 제목·문답지가 가운데라 버튼도 가운데 (문의 작성기는 폼이라 왼쪽 유지) */
.qb-actions.qb-center{justify-content:center;}
.qb-msg{font-size:13.5px;font-weight:800;color:var(--navy);}

/* ---------- 18. Footer ---------- */
.ftr{background:var(--navy-deep);color:#8FA7BF;padding:64px 0 34px;font-size:14px;}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:36px;}
/* 2차 수정지시 탭2-6 : 기존 filter:brightness(0) invert(1) 이 로고의 흰 배경까지 흰 사각형으로
   칠해 버려 회색 박스만 보이던 문제. 어두운 푸터 위에 흰 라운드 박스를 깔고 원본 로고를 그대로 표시. */
.ftr .f-logo-box{
  display:inline-block;background:#fff;border-radius:12px;padding:10px 14px;
  margin-bottom:16px;line-height:0;box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.ftr img.f-logo{height:34px;width:auto;display:block;}
.ftr h4{color:#fff;font-size:14.5px;font-weight:800;margin-bottom:14px;letter-spacing:.02em;}
.ftr li{margin-bottom:9px;line-height:1.6;}
.ftr a:hover{color:#fff;}
.ftr .f-tel{font-size:24px;font-weight:900;color:#fff;letter-spacing:-.02em;display:block;margin-bottom:6px;}
.ftr-legal{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:12.8px;line-height:1.85;color:#7E96AE;}
.ftr-legal b{color:#C6D6E6;}
/* 2차 수정지시 탭2-7 : '광고주체 : ~' 배지 삭제 → .ad-owner 규칙도 미사용이므로 제거 */

/* ---------- 19. 반응형 ---------- */
@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,1fr);}
  .indgrid{grid-template-columns:repeat(3,1fr);}
  .propgrid-sm{grid-template-columns:repeat(2,1fr);}
  .ftr-grid{grid-template-columns:repeat(2,1fr);}
  .brand .b-tag{display:none;}
  .gnb > li > a{padding:10px 12px;font-size:15px;}
}
@media (max-width:940px){
  .gnb,.hdr-cta .btn-line{display:none;}
  .burger{display:block;}
  .hdr-in{gap:12px;}
  .hdr-cta{margin-left:auto;}
  .hero-grid{grid-template-columns:1fr;gap:38px;padding:56px 0 64px;}
  /* 모바일: 말풍선이 사진 속 인물을 가리지 않도록 사진 '아래'에 별도 카드로 표시 (겹침 자체를 제거) */
  .hero-fig .fig-tag{
    position:static;display:block;margin:10px 0 0;max-width:none;background:#fff;border-radius:16px;
    padding:12px 16px;border:1px solid var(--line);box-shadow:none;
  }
  .hero-fig .fig-tag b{display:block;white-space:normal;}
  .hero-strip ul{grid-template-columns:repeat(2,1fr);}
  .hero-strip li:nth-child(2n){border-right:0;}
  .hero-strip li:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.14);}
  .split{grid-template-columns:1fr;gap:32px;}
  .split.rev .sp-fig{order:0;}
  .stairs{grid-template-columns:1fr;}
  .stairs-rise{display:none;}
  .stair-1,.stair-2,.stair-3{margin-bottom:0;}
  .stairs-base{display:none;}
  .g3,.memgrid,.contact-cards,.propgrid{grid-template-columns:1fr;}
  .revgrid{grid-template-columns:1fr;}
  .revcol + .revcol{border-left:0;border-top:1px solid var(--line);}
  .mobilebar{display:block;}
  body{padding-bottom:76px;}
}
@media (max-width:768px){
  .sec{padding:42px 0;}   /* 섹션 사이가 120px 이라 스크롤만 길었다 (2026-09-24) */
  .sec-sm{padding:44px 0;}
  .wrap{padding:0 18px;}
  .g2,.g3,.g4,.indgrid,.propgrid-sm,.ftr-grid,.qb-fields,.calcout .co-grid{grid-template-columns:1fr;}
  .card{padding:26px 22px;}
  .sec-head{margin-bottom:34px;}
  .topbar .tb-left span.hide-sm{display:none;}
  .mq-card{width:290px;}
  .infolist div{grid-template-columns:1fr;gap:4px;}
  .picker select,.picker input,.unitfield{min-width:0;width:100%;}
  .picker{flex-direction:column;align-items:stretch;}
  .marquee::before,.marquee::after{width:44px;}
  .phead-in{padding:44px 22px 48px;}   /* .wrap 의 좌우 여백을 지우고 있었다 */
  .quotebox{padding:26px 20px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
  .mq-track{animation:none !important;}
}
@media print{
  .hdr,.topbar,.floatbar,.mobilebar,.mnav,.ctaband{display:none !important;}
  body{color:#000;}
}

/* ---------- 20. 보강 유틸 ---------- */
[hidden]{display:none !important;}
.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--navy);color:#fff;padding:12px 20px;font-weight:800;border-radius:0 0 10px 0;
}
.skip:focus{left:0;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.c-more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:var(--red);font-weight:800;font-size:14.5px;}
.c-more::after{content:"\2192";transition:transform .18s;}
.card-link:hover .c-more::after,.ccard:hover .c-more::after{transform:translateX(4px);}

/* 경리 아웃소싱 : 2차 수정지시 탭3-11 로 사진 삭제 → .outsource-lay / .outsource-photo 규칙 제거 */

/* 재산제세 기타 버튼 3열 정렬 */
.propgrid-sm{grid-template-columns:repeat(3,1fr);}

@media (max-width:1080px){
  .propgrid-sm{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
  .propgrid-sm{grid-template-columns:1fr;}
}


/* ================================================================
   손글씨 수정지시 반영 (2026-08)
   ================================================================ */
.mb-m{margin-bottom:26px;}

/* No.13 / No.14 / No.21 — 서비스 소개 드롭다운을 '사업자' / '재산' 그룹으로 */
.subnav .sub-group{
  padding:10px 14px 4px;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  color:var(--muted);list-style:none;
}
.subnav .sub-group:first-child{padding-top:4px;}
.mnav .m-sub .m-sub-h{
  display:block;padding:8px 6px 2px 18px;font-size:11.5px;font-weight:800;
  letter-spacing:.06em;color:var(--muted);
}

/* No.22 — 우측 고정 문의 아이콘 묶음 라벨 '바로상담' */
/* 상단바 삭제에 맞춰 플로팅바 위치 보정 */
.floatbar{top:96px;}

.fb-title{
  display:block;text-align:center;font-size:11.5px;font-weight:800;letter-spacing:.01em;
  color:var(--navy);background:#fff;border:1px solid rgba(15,42,71,.08);
  border-radius:100px;padding:6px 0;box-shadow:0 6px 20px rgba(15,42,71,.14);
}

/* No.22 — 메인 히어로 하얀색 바탕
   2차 수정지시 탭1-2 : 헤더와 이어지도록 로고 배경색(#FFFFFF)으로 통일.
   스크롤 시 색이 달라 보이던 상단 그라데이션 오버레이도 제거. */
.hero.hero-light{background:var(--logo-bg);color:var(--body);}
.hero.hero-light::before{
  background:
    radial-gradient(760px 520px at 6% 96%, rgba(27,66,113,.05), transparent 60%);
}
.hero.hero-light h1{color:var(--ink);}
.hero.hero-light h1 .hl{color:var(--ink);}
.hero.hero-light .hero-badge{background:var(--navy-tint);border-color:var(--navy-tint2);color:var(--navy);}
.hero.hero-light .hero-badge b{color:var(--navy);}
.hero.hero-light .hero-badge-note{color:var(--muted);}
.hero.hero-light .hero-sub{color:var(--body);}
.hero.hero-light .hero-quote{background:var(--bg-soft);}
.hero.hero-light .hero-quote p{color:var(--ink);}
.hero.hero-light .hero-quote small{color:var(--muted);}
.hero.hero-light .hero-fig img{box-shadow:0 24px 60px rgba(15,42,71,.16);}
.hero.hero-light .hero-fig .fig-tag{border:1px solid var(--line);}
.hero.hero-light .hero-strip{border-top:1px solid var(--line);}
.hero.hero-light .hero-strip li{border-right:1px solid var(--line);}
/* 위 선택자가 .hero-strip li:last-child 보다 우선순위가 높아 마지막 칸 줄이 살아난다 */
.hero.hero-light .hero-strip li:last-child{border-right:0;}
.hero.hero-light .hero-strip b{color:var(--ink);}
.hero.hero-light .hero-strip span{color:var(--muted);}
@media (max-width:900px){
  .hero.hero-light .hero-strip li:nth-child(2n){border-right:0;}
  .hero.hero-light .hero-strip li:nth-child(-n+2){border-bottom:1px solid var(--line);}
}

/* 2차 수정지시 탭4-7 : 고객의 말 사진 */
.rev-photo{margin:28px auto 0;max-width:760px;}
.rev-photo img{width:100%;height:auto;border-radius:16px;box-shadow:0 12px 32px rgba(15,42,71,.14);}

/* 모바일에서도 우측 '바로상담' 플로팅바 유지 (요청: 모바일 진입 시 사라지지 않게)
   위쪽의 .floatbar{top:96px} 전역 보정보다 뒤에 둬야 하단 배치가 적용됨 */
@media (max-width:940px){
  .floatbar{
    top:auto;bottom:calc(88px + env(safe-area-inset-bottom));right:10px;gap:8px;
  }
  .fb-title{font-size:10.5px;padding:5px 0;}
  .fb-item{width:48px;height:48px;}
  .fb-item svg{width:24px;height:24px;}
  .fb-top{width:48px;height:36px;margin-top:6px;font-size:17px;}
  .fb-label{display:none;} /* 호버 라벨은 터치 화면에서 의미 없음 */
}

/* ================================================================
   재산전문센터 (pcenter-*) — 2026-08-20 추가제작 사양
   ================================================================ */
/* 히어로 위 분야 표기 — 크게 */
.eyebrow.eyebrow-lg{font-size:19px;letter-spacing:.05em;margin-bottom:18px;}
/* 로고 옆 '재산전문센터' 라벨 — 빨강 강조 */
.b-tag.pc-tag{color:var(--red);font-weight:800;font-size:14px;line-height:1.3;align-self:center;}
/* 사양: 사진은 네모칸으로 */
.sq img{border-radius:0 !important;}
figure.sq{margin:0;}
.pc-member figure.sq img{width:100%;height:auto;display:block;}
/* 사양: 블로그·네이버예약 연결 링크는 빨간색 */
.pc-red{color:var(--red) !important;font-weight:800;}
/* 상속 프로세스 (세로 화살표 흐름 · 수정사항1: 단계별 설명 포함) */
.pc-steps{list-style:none;max-width:560px;margin:0 auto;padding:0;}
.pc-steps li{
  display:block;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:18px 22px;font-size:17px;
}
.pc-steps .pcs-head{display:flex;align-items:center;gap:14px;}
.pc-steps li b{font-weight:800;color:var(--ink);}
.pc-steps .pcs-num{
  flex:none;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:800;
}
.pc-steps .pcs-desc{margin:9px 0 0 44px;font-size:15.5px;color:var(--body);line-height:1.8;}
.pc-steps li.is-key{border-color:var(--red);box-shadow:0 8px 22px rgba(205,42,35,.08);}
.pc-steps .pcs-note{
  margin:14px 0 0 44px;background:var(--red-tint);border:1px solid #F5C9C6;border-radius:10px;
  padding:14px 18px;font-size:15px;line-height:1.8;color:var(--body);
}
.pc-steps .pcs-note b{color:var(--red-dark);}
.pc-steps li + li{margin-top:34px;position:relative;}
.pc-steps li + li::before{
  content:"↓";position:absolute;top:-31px;left:50%;transform:translateX(-50%);
  color:var(--red);font-size:20px;font-weight:800;
}
.pc-steps li:last-child .pcs-num{background:var(--red);}
/* 인용 블록 — 본문 lead와 같은 크기·행간, 좌우 대칭 카드형 */
.pc-q{
  margin:0;background:var(--bg-soft);border:1px solid var(--line-soft);
  padding:26px 30px;border-radius:14px;font-size:16.5px;line-height:1.9;color:var(--body);
}
/* 섹션 안에 중첩된 좁은 컨테이너는 항상 가운데 정렬 */
.wrap > .wrap-nar{margin-left:auto;margin-right:auto;}
.pc-q b{color:var(--ink);}
.pc-q p{margin:0;}
.pc-q p + p{margin-top:14px;}
.pc-qh{font-size:17px;font-weight:800;color:var(--ink);}
/* 아이콘 도형 */
.ico-c{
  width:60px;height:60px;border-radius:50%;background:var(--navy-tint);color:var(--navy);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.ico-c svg{width:28px;height:28px;}
.ico-c.is-red{background:var(--red-tint);color:var(--red-dark);}
.pc-cardtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.pc-cardtop .c-num{margin-bottom:0;}
.pc-doc h4{display:flex;align-items:center;gap:10px;}
.pc-doc h4 svg{width:18px;height:18px;flex:none;}
.pc-due > svg{width:28px;height:28px;flex:none;color:#fff;}
/* 절차 — 가로 스텝 (번호 원 + 화살표 연결) */
.pc-hsteps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
.pc-hsteps li{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 22px;box-shadow:var(--sh-1);}
.pc-hsteps .hs-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.pc-hsteps .hs-ico{
  width:50px;height:50px;border-radius:14px;background:var(--navy-tint);color:var(--navy);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.pc-hsteps .hs-ico svg{width:25px;height:25px;}
.pc-hsteps li:last-child .hs-ico{background:var(--red-tint);color:var(--red-dark);}
.pc-hsteps .hs-num{
  display:flex;width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;
  align-items:center;justify-content:center;font-weight:800;font-size:13.5px;flex:none;
}
.pc-hsteps li:last-child .hs-num{background:var(--red);}
.pc-hsteps b{display:block;font-size:17px;color:var(--ink);margin-bottom:8px;}
.pc-hsteps p{font-size:15px;line-height:1.75;color:var(--body);margin:0;}
.pc-hsteps li:not(:last-child)::after{
  content:"→";position:absolute;right:-16px;top:44%;color:var(--red);
  font-weight:800;font-size:19px;z-index:2;
}
@media (max-width:768px){.pc-hsteps li:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-20px;transform:translateX(-50%);}}
/* 필요서류 카드 */
.pc-docs{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.pc-doc{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-1);overflow:hidden;}
.pc-doc h4{background:var(--navy);color:#fff;font-size:15.5px;font-weight:800;padding:14px 22px;}
.pc-doc ul{list-style:none;padding:18px 22px;margin:0;}
.pc-doc li{font-size:15.5px;line-height:1.8;color:var(--body);padding:4px 0;}
.pc-doc li::before{content:"✔";color:var(--red);font-weight:800;margin-right:10px;font-size:13px;}
@media (max-width:768px){.pc-docs{grid-template-columns:1fr;}}
/* 신고기한 콜아웃 */
.pc-due{display:flex;align-items:center;gap:16px;background:var(--navy);color:#fff;border-radius:16px;padding:20px 26px;}
.pc-due .d-k{flex:none;background:var(--red);color:#fff;font-size:13px;font-weight:800;border-radius:100px;padding:7px 15px;}
.pc-due b{font-size:17px;line-height:1.5;}
/* 수정사항2: 강조 표시 */
.mk{background:linear-gradient(180deg,transparent 58%,#FBD9D6 0);font-weight:800;color:var(--ink);padding:0 2px;}
.phead .ph-hl{
  display:inline-block;background:var(--red);color:#fff;font-weight:800;
  font-size:1.22em;padding:4px 14px;border-radius:8px;margin-bottom:12px;
}
.pc-award{
  display:inline-block;background:var(--red-tint);border:1px solid #F2C4C0;color:var(--red-dark);
  font-weight:800;font-size:16px;padding:11px 24px;border-radius:100px;
}
/* 수정사항2: 혜봄소개 멤버 카드 (사진 비율 통일 + 직책/설명) */
.pc-member figure.sq img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;}
.pc-member .m-role{display:inline-block;margin-top:14px;}
.pc-member .m-line{font-size:13.5px;font-weight:700;color:var(--red-dark);margin-top:6px;}
.pc-member .m-desc{font-size:14.5px;color:var(--body);line-height:1.78;margin-top:10px;text-align:left;}
/* 수정사항2: 상담료 문구 크게 */
.pc-feenote{font-size:13.5px;font-weight:500;color:var(--body);line-height:1.85;}
/* 기타재산세금 상세 카드 — 내부 음영 박스를 카드 하단에 같은 높이로 정렬 */
.pc-detail{display:flex;flex-direction:column;}
.pc-detail > p.small{font-size:15px;line-height:1.75;color:var(--muted);margin-top:6px;}
.pc-detail .pc-foot{margin-top:auto;padding-top:20px;}
.pc-detail .pc-qh{margin-bottom:16px;}
.pc-qh::before{content:"Q.";color:var(--red);font-weight:800;margin-right:7px;}
.pc-detail .pc-q{
  min-height:128px;display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:20px 24px;font-size:15.5px;
}
/* '이런 상황이라면' 리스트 */
.pc-list{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.pc-list li{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:16px 20px;font-size:16px;line-height:1.7;color:var(--ink);font-weight:600;
}
.pc-list li::before{content:"✓";color:var(--red);font-weight:800;margin-right:9px;}
@media (max-width:768px){.pc-list{grid-template-columns:1fr;}}
/* ===== 총괄수정(2026-08-20 엑셀) ===== */
/* 상담사례: 세목별 3열 사례 목록 (1번 가독성 + 2번 공감 포인트 절충) */
.pc-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;}
/* 세 박스 아래끝을 맞춘다 — 내용 길이가 달라도 같은 높이로 */
.pc-case{display:flex;flex-direction:column;}
.pc-case ol{flex:1 0 auto;display:flex;flex-direction:column;justify-content:flex-start;}
.pc-case{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-1);overflow:hidden;}
.pc-case h3{display:flex;align-items:baseline;justify-content:space-between;gap:10px;background:var(--navy);color:#fff;font-size:17px;font-weight:800;padding:15px 22px;margin:0;}
.pc-case h3 small{font-size:12.5px;font-weight:700;color:#C6D6E6;white-space:nowrap;}
.pc-case ol{list-style:none;margin:0;padding:4px 22px 8px;counter-reset:cs;}
.pc-case li{counter-increment:cs;position:relative;padding:13px 0 13px 34px;border-bottom:1px dashed var(--line);}
.pc-case li:last-child{border-bottom:0;}
.pc-case li::before{content:counter(cs,decimal-leading-zero);position:absolute;left:0;top:15px;font-size:12px;font-weight:800;color:var(--red);}
.pc-case li b{display:block;font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.5;}
.pc-case li p{margin:4px 0 0;font-size:14px;line-height:1.7;color:var(--muted);}
.pc-case li.is-key{background:#FFF6F5;margin:0 -22px;padding-left:56px;padding-right:22px;}
.pc-case li.is-key::before{left:22px;}
.pc-case li.is-key b::after{content:"대표 사례";display:inline-block;font-size:11px;font-weight:800;color:#fff;background:var(--red);border-radius:100px;padding:2px 8px;margin-left:8px;vertical-align:2px;line-height:1.5;}
@media (max-width:940px){.pc-cases{grid-template-columns:1fr;}}
/* 상담료: 신고대행 견적 문의 (카카오톡 채널 + 사전 문답지) */
.pc-due{flex-wrap:wrap;}
.pc-due .btn{flex:none;margin-left:auto;}
.pc-tpl{white-space:pre-line;background:#fff;border:1.5px dashed var(--navy);border-radius:14px;padding:18px 24px;font-size:15px;line-height:1.9;color:var(--ink);font-weight:600;}
.tbl td small{font-size:12.5px;color:var(--muted);font-weight:600;}
@media (max-width:768px){.pc-due .btn{margin-left:0;width:100%;}}

/* ===== 총괄수정 2차 ===== */
/* 히어로 안 전국 비대면 콜아웃 (첫 화면에서 바로 인식) */
.hero-nation{margin-top:22px;padding:15px 18px 15px 20px;border-radius:14px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);box-shadow:var(--sh-1);}
.hero-nation > b{display:block;font-size:16px;font-weight:800;color:var(--ink);line-height:1.5;}
.hero-nation > p{font-size:15.5px;font-weight:500;color:var(--body);line-height:1.62;}
.hero-nation > p.hn-sub{margin-top:5px;font-size:14px;font-weight:600;color:var(--muted);}
.hero-nation > span{display:block;margin-top:4px;font-size:14.5px;font-weight:600;color:var(--muted);line-height:1.7;}
/* 2026-09-24 : 다시 형광펜 + 굵게 (h1 의 .hl 과 같은 결) */
.hero-nation .mk{display:inline;font-size:inherit;padding:0;color:var(--ink);font-weight:800;
  background:linear-gradient(180deg,transparent 56%,rgba(205,42,35,.22) 0);}
/* 페이지 하단 전국 비대면 밴드 */
.nation-sec{background:var(--navy);color:#fff;text-align:center;padding:58px 0 60px;}
.nation-sec .nb-pill{display:inline-block;background:var(--red);color:#fff;font-size:12.5px;font-weight:800;border-radius:100px;padding:6px 14px;margin-bottom:16px;}
.nation-sec h2{font-size:clamp(22px,2.7vw,31px);font-weight:900;letter-spacing:-.03em;line-height:1.4;color:#fff;}
.nation-sec p{margin-top:12px;font-size:clamp(15px,1.6vw,17.5px);color:#C6D6E6;line-height:1.8;}
.nation-sec .mk{color:#fff;background:linear-gradient(180deg,transparent 58%,rgba(205,42,35,.85) 0);}
.nation-sec .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}
.nation-sec .btn-line:hover{border-color:#fff;}
/* 혜봄소개 멤버 카드: 하단(전문분야 · 버튼) 줄맞춤 */
.pc-member{display:flex;flex-direction:column;}
.pc-member .m-desc{flex:1 0 auto;}
/* 상속 프로세스: 단계 옆 관련 사례 */
.pc-steps{max-width:820px;}
.pc-steps li.has-side{display:grid;grid-template-columns:1fr 236px;gap:18px;align-items:stretch;}
.pc-steps .pcs-side{background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:12px 14px 8px;}
.pc-steps .pcs-side-k{display:block;font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--red);margin-bottom:4px;}
.pc-steps .pcs-side a{display:block;font-size:13.5px;font-weight:700;color:var(--navy);line-height:1.5;padding:6px 0;border-bottom:1px dashed var(--line);}
.pc-steps .pcs-side a:last-child{border-bottom:0;}
.pc-steps .pcs-side a::after{content:" →";color:var(--red);}
.pc-steps .pcs-side em{display:block;font-style:normal;font-size:13px;color:var(--muted);line-height:1.6;padding:6px 0 4px;}
@media (max-width:768px){.pc-steps li.has-side{grid-template-columns:1fr;}}
/* 사례 맛보기 카드 */
.pc-teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.pc-tcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 22px 20px;box-shadow:var(--sh-1);}
.pc-tcard b{display:block;font-size:16px;font-weight:800;color:var(--ink);line-height:1.55;}
.pc-tcard p{margin-top:10px;font-size:14px;color:var(--muted);line-height:1.7;}
.pc-sub-h{font-size:clamp(18px,2vw,22px);font-weight:900;letter-spacing:-.02em;color:var(--ink);text-align:center;}
@media (max-width:768px){.pc-teaser{grid-template-columns:1fr;}}
/* 기타재산세금: 자금출처 · 세무조사 강조 블록 + 카드 강조 */
.pc-alert{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.pc-alert article{background:var(--navy);color:#fff;border-radius:16px;padding:30px 30px 28px;}
.pc-alert .al-k{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.06em;color:#FFB3AE;margin-bottom:10px;}
.pc-alert h3{font-size:clamp(18px,2vw,22px);font-weight:900;line-height:1.42;color:#fff;letter-spacing:-.02em;}
.pc-alert p{margin-top:12px;font-size:15px;line-height:1.8;color:#C6D6E6;}
.pc-alert p b{color:#fff;}
.pc-detail.is-accent{border-color:var(--red);box-shadow:0 8px 22px rgba(205,42,35,.08);}
@media (max-width:768px){.pc-alert{grid-template-columns:1fr;}}
.pc-result{margin-top:10px;font-size:14px;font-weight:700;color:var(--navy);line-height:1.65;}
.pc-result b{color:var(--red);margin-right:2px;}

/* 회사소개: 그래서 혜봄은 무엇이 다른가 */
.diff-lead{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:38px 40px;text-align:center;}
.diff-lead b{display:block;font-size:clamp(20px,2.4vw,29px);font-weight:900;letter-spacing:-.03em;line-height:1.45;color:#fff;}
.diff-lead p{margin-top:16px;font-size:clamp(15px,1.6vw,17px);color:#C6D6E6;line-height:1.85;}
.diff-lead p b{display:inline;font-size:inherit;color:#fff;font-weight:800;}
.diff-lead .mk{display:inline;color:#fff;background:linear-gradient(180deg,transparent 58%,rgba(205,42,35,.9) 0);}
@media (max-width:768px){.diff-lead{padding:28px 22px;}}



/* ---------------------------------------------------------------- 지역별 허브 */
.hub-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px;}
.hub-nav a{font-size:14px;font-weight:800;color:var(--navy);background:#fff;
  border:1px solid var(--line);border-radius:100px;padding:9px 18px;transition:.16s;}
.hub-nav a:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
.hub-group{margin-top:58px;}
.hub-group:first-of-type{margin-top:26px;}
.hub-group>h3{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:900;
  color:var(--navy);letter-spacing:-.02em;}
.hub-group>h3::after{content:"";flex:1;height:1px;background:var(--line);}
.hub-group>h3 span{font-size:13px;font-weight:700;color:var(--muted);}
/* 허브·지역 페이지의 카드는 항목이 많아 기본 카드보다 촘촘하게 */
body[data-page="hub"] .grid,body[data-page^="local-"] .grid{gap:14px;}
body[data-page="hub"] .card,body[data-page^="local-"] .card{padding:22px 20px;border-radius:var(--r);}
body[data-page="hub"] .card h3,body[data-page^="local-"] .card h3{font-size:17px;margin-bottom:7px;}
body[data-page="hub"] .card p,body[data-page^="local-"] .card p{font-size:14px;line-height:1.65;color:var(--muted);}
body[data-page="hub"] .card .c-more,body[data-page^="local-"] .card .c-more{margin-top:13px;font-size:13.5px;}
@media (max-width:900px){
  body[data-page="hub"] .g4,body[data-page^="local-"] .g4{grid-template-columns:repeat(2,1fr);}
  body[data-page^="local-"] .g3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  body[data-page="hub"] .g4,body[data-page^="local-"] .g4,
  body[data-page^="local-"] .g3,body[data-page^="local-"] .g2{grid-template-columns:1fr;}
  .hub-group{margin-top:40px;}
  .hub-nav a{font-size:13px;padding:8px 15px;}
}
.hub-cap{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.06em;margin:14px 0 8px;}
/* flex-wrap 이면 글자 길이대로 흘러 줄 끝이 들쭉날쭉하다 — 그리드로 칸 너비를 통일한다 */
.hub-pills{list-style:none;padding:0;margin:0;display:grid;gap:6px;
  grid-template-columns:repeat(auto-fill,minmax(78px,1fr));}
.hub-pills a{text-align:center;}
/* 재산 허브는 라벨이 "분당 양도소득세"처럼 길어 칸을 넓게 */
[data-page="pc-hub"] .hub-pills{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));}
.hub-pills a{display:block;font-size:13px;font-weight:700;color:var(--body);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:100px;
  padding:6px 12px;white-space:nowrap;transition:.14s;}
.hub-pills a:hover{border-color:var(--navy);color:var(--navy);background:#fff;}

/* 모바일 목록 정렬. 파일 끝에 두는 이유 :
   .hub-nav / .hub-pills 기본 규칙이 아래쪽에 있고 특이도가 같아 순서로 이겨야 한다.
   분류 버튼 4개는 flex-wrap 이라 3 + 1 로 흩어졌고,
   알약은 칸을 채우지 않아 글자 길이대로 폭이 달랐다. */
@media (max-width:600px){
  .hub-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .hub-nav a{text-align:center;padding:11px 6px;font-size:13px;}
  .hub-pills,
  [data-page="pc-hub"] .hub-pills{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hub-pills a{font-size:12.5px;padding:10px 4px;letter-spacing:-.03em;}
}

/* 홈 · 고객의 말 : 모바일에서는 자동 흐름 대신 손가락으로 넘기게 한다.
   (자동 마퀴는 폰에서 멈춰 있는 것처럼 보이고, 손으로 세울 수도 없다)
   파일 끝에 두는 이유 : .mq-ltr .mq-track 의 animation 과 특이도가 같아 순서로 이겨야 한다. */
@media (max-width:600px){
  /* 자동 흐름은 그대로 둔다 (사용자 요청). 긴 여백의 원인은 애니메이션이 아니라
     후기 하나가 6문단으로 쪼개져 카드가 699px 까지 늘어난 것이었다 */
  .marquee .mq-track{gap:12px;}
  .marquee .mq-card{width:80vw;max-width:300px;padding:20px 18px 18px;}
  /* 카드가 가장 긴 후기에 맞춰 전부 699px 로 늘어나 안이 텅 비었다.
     홈은 맛보기이므로 여덟 줄에서 끊는다 (전문은 고객의 말 페이지에 있다) */
  /* -webkit-box 는 flex 자식이라 flow-root 로 바뀌어 클램프가 죽는다. 높이로 자른다 */
  .marquee .mq-card p{max-height:212px;overflow:hidden;}
  /* 후기 페이지는 글을 자르지 않되, 짧은 카드까지 늘리지는 않는다 */
  .revgrid.revgrid{align-items:flex-start;}
  /* 재산 히어로는 사진 아래가 바로 끝나 사업자 쪽과 여백이 달랐다 */
  [data-page^="pc"] .hero-fig{margin-bottom:26px;}
}


/* ---------- 업종 안내 버튼 (2026-09-29) ----------
   '유형별 단계 안내'는 업종 버튼들과 성격이 달라 한 줄을 다 쓰고 가운데 정렬한다.
   3칸으로 줄어드는 폭(1080 이하)에서는 조합 버튼도 한 줄을 써야 아래 3개가 딱 맞는다.
   .indgrid 하위 선택자(0,2,0)라야 .indbtn(0,1,0) 기본값을 이긴다.
   파일 끝에 두는 이유 : 모바일 규칙 .wrap .indgrid .indbtn b 와 동점이라 뒤에 와야 이긴다. */
.indgrid .ib-full{grid-column:1/-1;align-items:center;text-align:center;}
.indgrid .ib-full b{font-size:23.5px;}
.indgrid .ib-full .ib-go{font-size:14.5px;justify-content:center;}
@media (max-width:1080px){ .indgrid .ib-wide{grid-column:1/-1;} }
@media (max-width:600px){ .wrap .indgrid .ib-full b{font-size:16.5px;} }


/* ---------- 본문 하이라이트 (2026-09-30) ----------
   형광펜처럼 글자 아랫부분만 덮는다. 브랜드 빨강을 옅게 써서 남색 본문과 부딪치지 않게. */
.mk{background:linear-gradient(to top,#FBDBD8 46%,transparent 46%);font-weight:800;padding:0 2px;border-radius:2px;}


/* ---------- 2열 표 (2026-09-30) ----------
   칸이 둘뿐인 표가 본문 전체 폭에 퍼지면 가운데가 휑하다. 좁혀서 가운데 정렬. */
.rd-wrap.rw-nar{max-width:640px;margin-left:auto;margin-right:auto;}


/* ---------- 메뉴 그룹 라벨 색 (2026-09-30) ----------
   전부 회색이라 눈에 띄지 않았다. 남색은 검정처럼 보여 빨강으로 통일한다 (2026-09-30). */
.subnav .sub-group.sg-biz,.mnav .m-sub .m-sub-h.sg-biz{color:var(--red);}
.subnav .sub-group.sg-prop,.mnav .m-sub .m-sub-h.sg-prop{color:var(--red);}


/* ---------- 금액 표 가운데 정렬 (2026-09-30) ----------
   값이 짧은 금액 표는 왼쪽 정렬이면 값 오른쪽이 휑하다.
   모바일에서는 표가 카드처럼 쌓여 라벨과 값이 붙으므로 그대로 둔다. */
@media (min-width:601px){
  .rd-tbl.tb-c th,.rd-tbl.tb-c td{text-align:center;}
}


/* ---------- 짧은 금액 표는 폰에서도 표로 (2026-10-01) ----------
   기본 .rd-tbl 은 폰에서 카드로 풀리는데, 값이 짧은 표는 그러면 스크롤만 길어진다.
   파일 끝에 둬야 앞쪽 모바일 규칙(0,1,0)을 확실히 덮는다. */
@media (max-width:600px){
  .rd-tbl.tb-keep{display:table;width:100%;min-width:0;background:#fff;
    border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:13px;}
  .rd-tbl.tb-keep thead{display:table-header-group;}
  .rd-tbl.tb-keep tbody{display:table-row-group;}
  .rd-tbl.tb-keep tr{display:table-row;background:transparent;border:0;
    border-radius:0;padding:0;margin:0;}
  .rd-tbl.tb-keep th{display:table-cell;padding:10px 8px;font-size:12px;white-space:nowrap;}
  .rd-tbl.tb-keep td{display:table-cell;padding:10px 8px;white-space:nowrap;
    border-bottom:1px solid var(--line);margin:0;}
  .rd-tbl.tb-keep tr:last-child td{border-bottom:0;}
  .rd-tbl.tb-keep td:first-child{font-size:13px;white-space:nowrap;
    padding-bottom:10px;margin-bottom:0;border-bottom:1px solid var(--line);}
  .rd-tbl.tb-keep tr:last-child td:first-child{border-bottom:0;}
  .rd-tbl.tb-keep td:not(:first-child){display:table-cell;}
  .rd-tbl.tb-keep td:not(:first-child)::before{content:none;}
  .rd-tbl.tb-c.tb-keep th,.rd-tbl.tb-c.tb-keep td{text-align:center;}
}


/* ---------- 상속 → 양도 흐름 도식 (2026-10-01) ----------
   상속재산 평가액이 그대로 양도 취득가액이 되는 구조를 두 상자와 화살표로 보여준다.
   표로만 두면 '연결'이 안 보인다. 폰에서는 세로로 쌓고 화살표를 아래로 돌린다. */
.flowcmp{display:grid;grid-template-columns:1fr 92px 1fr;align-items:stretch;gap:0;
  max-width:860px;margin:0 auto;}
.fc-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-2);padding:22px 22px 18px;}
.fc-tag{display:inline-block;background:var(--navy);color:#fff;font-size:12.5px;font-weight:800;
  letter-spacing:.04em;border-radius:999px;padding:5px 14px;margin-bottom:14px;}
.fc-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px;}
.fc-row:last-child{border-bottom:0;}
.fc-row span{color:#46546A;}
.fc-row b{color:var(--navy);font-weight:800;text-align:right;}
.fc-row.fc-hl{background:#FFF6D6;border-radius:8px;padding:9px 10px;border-bottom:0;margin:2px -10px;}
.fc-row.fc-note span,.fc-row.fc-note b{color:var(--muted);font-weight:700;font-size:13px;}
/* 화살표: 왼쪽 상자의 평가액 줄에서 오른쪽 상자의 취득가액 줄로 비스듬히 내려간다 */
.fc-arrow{position:relative;}
.fc-arrow svg{position:absolute;left:2px;top:86px;width:88px;height:48px;}
.fc-arrow i{position:absolute;left:50%;top:48px;transform:translateX(-50%);
  display:block;font-style:normal;font-size:12px;font-weight:800;color:var(--red);
  text-align:center;line-height:1.3;white-space:nowrap;}
@media (max-width:760px){
  /* 세로로 쌓으면 두 쪽을 비교할 수가 없다. 좁아도 나란히 두고 글자를 줄여 쌓는다 */
  .flowcmp{grid-template-columns:1fr 46px 1fr;gap:0;}
  .fc-box{padding:14px 11px 12px;border-radius:14px;}
  .fc-tag{font-size:11px;padding:4px 9px;margin-bottom:10px;}
  .fc-row{flex-direction:column;align-items:flex-start;gap:1px;padding:7px 0;font-size:11.5px;}
  .fc-row span{line-height:1.35;}
  .fc-row{align-items:stretch;}
  .fc-row b{text-align:right;font-size:13px;display:block;width:100%;}
  .fc-row.fc-hl{padding:7px 8px;margin:2px -8px;}
  .fc-arrow svg{display:none;}
  .fc-arrow i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    font-size:9.5px;line-height:1.35;word-break:keep-all;white-space:normal;width:44px;}
  .fc-arrow i::before{content:"▶";display:block;font-size:12px;margin-bottom:3px;}
}

/* 재산 — 일하는 방식 · 신뢰 블록 (2026-10-01) */
.wayl{list-style:none;margin:0;padding:0;}
.wayl li{position:relative;padding:24px 0 24px 70px;border-top:1px solid var(--line);}
.wayl li:last-child{border-bottom:1px solid var(--line);}
.wayl .wn{position:absolute;left:0;top:25px;font-size:27px;font-weight:800;color:var(--red);font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1;}
.wayl h3{font-size:18.5px;font-weight:800;color:var(--ink);margin:0;letter-spacing:-.02em;}
.wayl p{margin:8px 0 0;color:var(--body);line-height:1.85;}
.trustbox{text-align:center;}
.trustbox .tb-big{font-size:clamp(29px,5vw,43px);font-weight:800;color:var(--navy);letter-spacing:-.035em;margin:0;line-height:1.2;}
.trustbox .tb-sub{margin:12px 0 0;font-size:clamp(16.5px,2.4vw,21px);font-weight:800;color:var(--red-dark);letter-spacing:-.02em;}
.trustbox .tb-body{margin:20px auto 0;max-width:720px;color:var(--body);line-height:1.85;text-align:left;}
.closebox{background:var(--navy);border-radius:var(--r-lg);padding:44px 34px;text-align:center;}
.closebox h2{color:#fff;margin:0;}
.closebox p{margin:16px auto 0;max-width:660px;color:#D5E2F0;line-height:1.95;}
@media(max-width:600px){
  .wayl li{padding:48px 0 22px;}
  .wayl .wn{top:20px;font-size:24px;}
  .closebox{padding:34px 22px;}
}

/* 히어로 인용구 — 일하는 방식 한 줄 (2026-10-02) */
.hero-quote .hq-way{margin-top:4px;color:var(--navy);font-weight:700;}

/* 비교표 — 상속 단계 / 양도 단계 구분 (2026-10-02) */
.rd-tbl tbody th[scope="row"]{background:#F1F5FA;color:var(--navy);font-weight:800;}
.rd-tbl tr.cg-h th{background:var(--navy-tint);color:var(--navy);font-weight:800;
  font-size:13.5px;letter-spacing:.02em;text-align:left;padding:10px 16px;}
.rd-tbl tr.cg-h.cg-yd th{background:var(--red-tint);color:var(--red-dark);}
.rd-tbl tr.cg-sg td,.rd-tbl tbody tr.cg-sg th[scope="row"]{background:#F8FAFD;}
.rd-tbl tr.cg-yd td,.rd-tbl tbody tr.cg-yd th[scope="row"]{background:#FFFAF7;}
.rd-tbl tr.cg-key td,.rd-tbl tbody tr.cg-key th[scope="row"]{background:#FFF6D6;}
.rd-tbl tbody tr.cg-key th[scope="row"]{color:var(--red-dark);}
.rd-tbl tr.cg-key td{color:var(--red-dark);font-weight:800;}

/* 같은 배경 섹션이 붙을 때 겹치는 여백 (2026-10-02) */
.sec:not(.sec-soft)+.sec:not(.sec-soft){padding-top:0;}
.sec-soft+.sec-soft{padding-top:0;}

/* 폰: 카드로 풀린 표의 첫 열(th)도 블록으로 (2026-10-02) */
@media (max-width:600px){
  .rd-tbl:not(.tb-keep) tbody th[scope="row"]{display:block;width:auto;background:transparent;color:var(--navy);font-size:15.5px;white-space:normal;text-align:left;padding:4px 0 9px;margin-bottom:7px;border-bottom:1px solid var(--line);}
}

/* 폰: 비교형 그림은 가운데 정렬 · 상자 제목은 한 줄로 (2026-10-02) */
@media (max-width:760px){
  .fc-tag{white-space:nowrap;display:block;width:fit-content;margin-left:auto;margin-right:auto;}
  .fc-cmp .fc-row{align-items:center;text-align:center;}
  .fc-cmp .fc-row span,.fc-cmp .fc-row b{text-align:center;width:100%;}
}

/* 표 다듬기 — 제목 간격 · 칸 구분줄 · 하이라이트 강조 (2026-10-06) */
.rd-tbl caption{padding:0 10px 16px;line-height:1.55;}
.rd-tbl thead th + th{border-left:1px solid rgba(255,255,255,.22);}
.rd-tbl tbody td + td,
.rd-tbl tbody th[scope="row"] + td{border-left:1px solid var(--line);}
.rd-tbl tbody tr.cg-h th{border-left:0;}
/* 빨간 글씨 + 노란 배경은 눈이 아프다. 강조는 하이라이트로만 */
.rd-tbl tbody tr.cg-key td{background:#fff;color:var(--ink);font-weight:400;}
.rd-tbl tbody tr.cg-key th[scope="row"]{background:#F1F5FA;color:var(--navy);}
.rd-tbl .mk{background:linear-gradient(to top,#FBDBD8 46%,transparent 46%);
  font-weight:800;color:var(--ink);padding:0 3px;border-radius:2px;}
@media (max-width:600px){
  /* tb-keep 의 nowrap 때문에 긴 칸이 줄바꿈을 못 하고 넘쳤다 */
  .rd-tbl.tb-keep{table-layout:fixed;width:100%;}
  .rd-tbl.tb-keep th,.rd-tbl.tb-keep td{white-space:normal;word-break:keep-all;
    overflow-wrap:anywhere;padding:9px 5px;}
  .rd-tbl.tb-keep td{font-size:12px;}
  .rd-tbl.tb-keep th{font-size:11.5px;}
  .rd-tbl.tb-keep td:first-child,.rd-tbl.tb-keep th[scope="row"]{white-space:normal;font-size:12px;}
  .rd-tbl caption{padding:0 6px 13px;line-height:1.5;}
}

/* 비교표 칸 너비 고르게 (2026-10-07) */
/* 전체에 걸었더니 다른 표의 글자가 깨졌다. 말소 표처럼 둘을 나란히 비교하는 표에만 */
.rd-tbl.tb-eq{table-layout:fixed;width:100%;}
.rd-tbl.tb-eq th,.rd-tbl.tb-eq td{white-space:normal;word-break:keep-all;overflow-wrap:anywhere;}
.rd-tbl.tb-eq th:first-child,.rd-tbl.tb-eq td:first-child{width:24%;}
/* 사례 카드 번호 — 브랜드 레드 (2026-10-07) */
.card .c-num.c-num-red{background:var(--red-tint);color:var(--red-dark);}

/* 표 안의 중요 표시 (2026-10-07) */
.rd-tbl .tb-imp{display:inline-block;margin-top:4px;color:var(--red-dark);font-weight:800;font-size:12px;line-height:1.45;}

/* 임대사업자 페이지 — 표는 하이라이트만 굵게 (2026-10-07) */
[data-page="주택임대사업자-양도"] .rd-tbl tbody th,
[data-page="주택임대사업자-양도"] .rd-tbl tbody td,
[data-page="주택임대사업자-양도"] .rd-tbl tbody td:first-child,
[data-page="주택임대사업자-양도"] .rd-tbl tbody b{font-weight:400;}
[data-page="주택임대사업자-양도"] .rd-tbl .mk,
[data-page="주택임대사업자-양도"] .rd-tbl .tb-imp{font-weight:800;}

/* 임대사업자 페이지 — 폰 가독성 (2026-10-07) */
@media (max-width:600px){
  [data-page="주택임대사업자-양도"] .rd-tbl.tb-keep th,
  [data-page="주택임대사업자-양도"] .rd-tbl.tb-keep td{line-height:1.65;padding:12px 6px;}
  [data-page="주택임대사업자-양도"] .rd-tbl.tb-keep small{display:inline-block;
    margin-top:4px;line-height:1.55;}
  [data-page="주택임대사업자-양도"] .rd-tbl caption{padding-bottom:14px;line-height:1.6;}
  [data-page="주택임대사업자-양도"] .small{line-height:1.85;}
  [data-page="주택임대사업자-양도"] .card p{line-height:1.8;}
  [data-page="주택임대사업자-양도"] .rd-chk li{line-height:1.8;}
  [data-page="주택임대사업자-양도"] .wayl p{line-height:1.85;}
}

/* 업종 다른 이름 한 줄 (2026-10-13) */
.phead .alias-line{margin-top:10px;color:rgba(255,255,255,.72);font-size:13px;letter-spacing:-.01em}

/* 좁은 폰(360px 안팎)에서 하단바 「네이버예 / 약」 줄바꿈 막기 (2026-10-15) */
.mobilebar .mb-ic span{white-space:nowrap;}
@media (max-width:380px){.mobilebar .mb-ic{font-size:10px;letter-spacing:-.04em;padding-left:1px;padding-right:1px;}}