@charset "UTF-8";
/* ============================================================
   의정종합법률사무소 · 개인회생2번 랜딩페이지
   Layout base : 1512px (좌우 마진 186px / 본문 1140px)
   Font system : 100% vw 비례 (rem = 루트폰트)
   ============================================================ */

/* ------------------------------------------------------------
   1. 반응형 폰트 스케일 (모든 화면 동일 비율)
   - PC   : 1512 기준 1rem = 10px, 1600px 에서 최고 크기 고정
   - 태블릿/펼친모바일 : 990 ~ 501, 600px 에서 최고 크기 고정
   - 접은모바일        : 500 이하, 420px 에서 최고 크기 고정
   ------------------------------------------------------------ */
html { font-size: calc(100vw / 151.2); }                                  /* 1512 → 10px */
@media (min-width: 1600px) { html { font-size: 10.582px; } }              /* 1600 최고폰트 */

/* 모바일 가독성 : 기준 폰트를 10px → 11px 로 (전 구간 동일 비율 +10%) */
@media (max-width: 990px)  { html { font-size: calc(100vw / 55); } }      /* 605 → 11px */
@media (max-width: 990px) and (min-width: 600px) { html { font-size: 11px; } }

@media (max-width: 500px)  { html { font-size: calc(100vw / 38); } }      /* 418 → 11px */
@media (max-width: 500px) and (min-width: 420px) { html { font-size: 11px; } }

/* ------------------------------------------------------------
   2. 디자인 토큰
   ------------------------------------------------------------ */
:root{
  --navy-900:#0a1220;
  --navy-800:#0f1d33;
  --navy-700:#16304d;
  --navy:#1a3b5d;
  --navy-line:#24456b;
  --blue:#215a97;
  --blue-txt:#1a3a5c;
  --gold:#c9963a;
  --gold-lt:#e0ac4d;
  --kakao:#fae100;
  --kakao-txt:#3c1e1e;
  --green:#12a05c;
  --ink:#1a2433;
  --ink-2:#3f4a5a;
  --muted:#77808f;
  --muted-2:#9aa3b0;
  --line:#e3e7ee;
  --line-2:#eef1f6;
  --bg:#ffffff;
  --bg-soft:#f6f7fb;
  --bg-blue:#f2f6fb;
  --radius:1rem;
  --shadow-sm:0 .2rem .8rem rgba(20,35,60,.06);
  --shadow:0 .6rem 2.4rem rgba(20,35,60,.09);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Inter 는 한글 글리프가 없어 한글은 Pretendard 로 폴백된다 */
  --font-en:'Inter','Pretendard Variable',Pretendard,system-ui,sans-serif;
}

/* ------------------------------------------------------------
   3. Reset
   ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,
              'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',system-ui,sans-serif;
  font-size:1.6rem;
  line-height:1.7;
  color:var(--ink);
  background:#fff;
  -webkit-text-size-adjust:100%;
  word-break:keep-all;
  overflow-wrap:break-word;
}
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
img{max-width:100%;height:auto;display:block;border:0;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input,textarea,select{font:inherit;color:inherit;}
table{border-collapse:collapse;width:100%;}
address{font-style:normal;}
:focus-visible{outline:.2rem solid var(--blue);outline-offset:.2rem;}
.blind{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ------------------------------------------------------------
   4. 레이아웃 골격
   ------------------------------------------------------------ */
/* overflow:hidden 은 position:sticky 를 무력화시킨다.
   가로만 잘라내는 overflow-x:clip 을 쓰면 헤더 고정이 정상 동작한다. */
#wrap{background:#fff;overflow-x:clip;position:relative;}
/* 콘텐츠 폭은 각 섹션 내부 래퍼(.inner/.hero__in 등)가 잡는다.
   #wrap 에 max-width 를 걸면 1920 이상 화면에서 섹션 배경색이 양옆에 끊겨 보이므로 제거. */
.inner{width:114rem;margin:0 auto;}                 /* 1140px · 좌우 186px @1512 */
.sec{padding:10rem 0;}
.sec--soft{background:var(--bg-soft);}
.sec--tight{padding:8rem 0;}

/* 섹션 헤더 */
.sec-eyebrow{
  display:block;text-align:center;font-size:1.5rem;font-weight:800;
  letter-spacing:.12em;color:var(--gold);margin-bottom:1.2rem;
}
.sec-eyebrow--blue{color:var(--blue-txt);}
/* 진행절차 섹션만 PROCESS 라벨 아래 여백 제거 */
.process .sec-eyebrow{margin-bottom:0;}
.support .sec-eyebrow{margin-bottom:.4rem;}
.faq .sec-eyebrow{margin-bottom:0;font-size:1.8rem;}
.sec-title{font-size:4.2rem;font-weight:800;line-height:1.35;letter-spacing:-.02em;color:var(--ink);}
.sec-title--c{text-align:center;}
.sec-title em{font-style:normal;color:var(--blue-txt);}
.sec-lead{margin-top:1.8rem;font-size:2.1rem;line-height:2.8rem;letter-spacing:0;font-weight:600;color:#080E1C;}
.sec-lead--c{text-align:center;}

/* ------------------------------------------------------------
   5. 헤더
   ------------------------------------------------------------ */
/* 앵커 이동 시 고정 헤더에 가리지 않도록 */
section[id],footer[id],div[id]{scroll-margin-top:9.4rem;}
@media (max-width:990px){section[id],footer[id],div[id]{scroll-margin-top:7.4rem;}}

.hd{
  position:sticky;top:0;z-index:200;background:#fff;
  border-bottom:.1rem solid rgba(26,58,92,.2);
}
.hd__in{width:114rem;margin:0 auto;height:8.4rem;display:flex;align-items:center;gap:1.4rem;}
.hd__logo{display:flex;align-items:center;gap:1rem;flex:none;}
.hd__mark{width:3rem;height:auto;flex:none;}
.hd__name{font-size:1.9rem;font-weight:800;letter-spacing:-.03em;color:var(--navy-800);}
.hd__badge{
  flex:none;padding:.5rem 1.2rem;border-radius:10rem;background:#1a3a5c;
  font-size:1.25rem;font-weight:700;color:#fff;letter-spacing:-.02em;
}
.hd__nav{margin-left:4.4rem;}
.hd__nav ul{display:flex;align-items:center;gap:3.2rem;}
.hd__nav a{white-space:nowrap;font-size:1.55rem;font-weight:600;color:#818994;letter-spacing:-.02em;transition:color .2s;}
.hd__nav a:hover{color:var(--navy);}
.hd__util{margin-left:auto;display:flex;align-items:center;gap:1.8rem;}
.hd__tel{display:flex;align-items:center;gap:.9rem;white-space:nowrap;font-family:var(--font-en);font-size:1.8rem;font-weight:700;color:#202020;letter-spacing:-.01em;}
.hd__ico{width:2.8rem;height:2.8rem;border-radius:50%;display:grid;place-items:center;flex:none;}
.hd__ico--tel{background:var(--navy);}
.hd__ico--kakao{background:#fee500;}
.hd__ico svg{width:1.5rem;height:1.5rem;}
.hd__ico img{width:1.5rem;height:1.5rem;object-fit:contain;}
/* 말풍선 꼬리가 아래로 뻗어 있어 그림 상자 중심과 말풍선 중심이 어긋난다(원본 기준 2.5px).
   상자는 이미 정중앙이므로 그만큼만 내려 말풍선을 원 한가운데로 맞춘다. */
.hd__ico--kakao img{width:auto;height:1.7rem;position:relative;top:.12rem;}
.hd__div{width:.1rem;height:2rem;background:var(--line);}
.hd__kakao{display:flex;align-items:center;gap:.9rem;white-space:nowrap;font-family:var(--font-en);font-size:1.65rem;font-weight:700;color:#202020;}
.hd__toggle{display:none;}

/* ------------------------------------------------------------
   6. 퀵메뉴
   ------------------------------------------------------------ */
.quick{
  position:fixed;right:2.4rem;top:20%;z-index:150;
  width:7.2rem;padding:0;border-radius:4rem;overflow:hidden;
  background:#0d2237;
  box-shadow:0 1rem 3rem rgba(10,20,40,.28);text-align:center;
}
.quick__ttl{padding:1.6rem .8rem 1.3rem;background:#061524;
  font-size:1.2rem;font-weight:800;color:#fff;line-height:1.25;letter-spacing:-.02em;}
.quick__ttl span{display:block;font-size:1.05rem;font-weight:600;color:#a9bdd6;}
.quick__list{margin:0;padding:1.2rem .9rem 1.6rem;display:grid;gap:1rem;justify-items:center;}
/* 아이콘 + 라벨을 한 원 안에 담는다 */
.quick__list a{
  width:5.4rem;height:5.4rem;border-radius:50%;
  display:grid;place-content:center;justify-items:center;gap:.2rem;
  background:#22466b;
  background:linear-gradient(116.04deg,#133E78 .94%,#22B6D0 93.32%);
  transition:filter .2s;
}
/* 전화·카톡은 단색, 신청만 그라데이션 유지 */
.quick__list li:nth-child(1) a,
.quick__list li:nth-child(2) a{background:#22466b;}
.quick__list a:hover{filter:brightness(1.15);}
.quick__ico{display:grid;place-items:center;}
.quick__ico img{width:auto;}
.q-tel img{height:1.8rem;}
.q-kko img{height:1.9rem;}
.q-app img{height:1.9rem;}
.quick__list b{display:block;font-size:1.05rem;font-weight:700;color:#fff;letter-spacing:-.02em;}

/* ------------------------------------------------------------
   7. 정보 카드 그리드 (상황별 확인 정보)
   ------------------------------------------------------------ */
.topics{padding:6rem 0 9rem;background:var(--bg-soft);}
.topics__hd{display:flex;align-items:flex-end;justify-content:space-between;
  padding-bottom:1.8rem;border-bottom:.1rem solid rgba(26,58,92,.2);}
.topics__hd h2{font-size:3.4rem;font-weight:800;letter-spacing:-.03em;color:var(--navy-800);}
.topics__hd h2 em{font-style:normal;color:var(--blue-txt);}
/* 모바일에서만 살아나는 줄바꿈 */
.br-m{display:none;}
.topics__logo{width:5rem;opacity:.9;}
.cardgrid{margin-top:3rem;display:grid;grid-template-columns:repeat(3,1fr);gap:3rem 3rem;}
.card{position:relative;cursor:pointer;transition:transform .35s var(--ease);}
.card:hover{transform:translateY(-.6rem);}
.card__link{display:inline-block;}
.card__link::after{content:"";position:absolute;inset:0;z-index:2;}
.card__thumb{display:block;position:relative;overflow:hidden;aspect-ratio:1/1;background:#dfe3ea;
  border-radius:0 0 2rem 0;}
.card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.card__thumb::after{content:"";position:absolute;left:0;top:0;right:0;height:10rem;border-radius:inherit;
  pointer-events:none;background:linear-gradient(180deg,rgba(10,18,32,.34),rgba(10,18,32,0));}
.card__more{position:absolute;right:2.2rem;top:2rem;z-index:1;text-align:center;color:#fff;}
.card__more-ico{display:grid;place-items:center;width:2rem;height:2rem;margin:0 auto;
  border:.1rem solid rgba(255,255,255,.8);border-radius:50%;transition:.3s var(--ease);}
.card__more-ico svg{width:1rem;height:1rem;}
.card__more b{display:block;margin-top:.35rem;font-size:.9rem;font-weight:400;
  letter-spacing:-.02em;text-shadow:0 .1rem .3rem rgba(0,0,0,.35);}
.card:hover .card__more-ico{background:rgba(255,255,255,.2);border-color:#fff;}
.card:hover .card__thumb img{transform:scale(1.05);}
.card__body{
  position:relative;margin:-4.6rem 0 0 0;width:33rem;max-width:100%;
  background:#fff;padding:1.5rem 1.6rem 1.7rem;box-shadow:var(--shadow-sm);
}
.card__body h3{font-size:1.55rem;font-weight:800;line-height:2rem;letter-spacing:-.03em;color:var(--navy-800);}
/* body 의 word-break:keep-all 을 여기서만 푼다.
   좁은 카드 폭에서 "핵심입니다." 같은 단어가 통째로 넘어가 줄 끝이 비는 것을 막는다. */
.card__body p{margin-top:.8rem;font-size:1.1rem;line-height:1.6rem;letter-spacing:0;
  word-break:normal;color:var(--muted);}

/* ------------------------------------------------------------
   8. 히어로
   ------------------------------------------------------------ */
.hero{
  position:relative;color:#fff;
  background:#0a1220 url("../img/hero-bg.jpg") center/cover no-repeat;
}
.hero__in{position:relative;z-index:1;width:114rem;margin:0 auto;
  display:flex;align-items:flex-start;gap:6rem;padding:11rem 0;}
.hero__txt{flex:1 1 auto;}
.hero__badge{
  display:inline-block;padding:.9rem 2rem;border-radius:10rem;
  border:0;background:rgba(255,255,255,.07);
  font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:#fff;
}
.hero__badge em{font-style:normal;color:#F1CC89;}
.hero__ttl{margin-top:2.6rem;font-size:5.2rem;font-weight:800;line-height:1.28;letter-spacing:-.035em;}
.hero__ttl em{display:block;margin-bottom:1rem;font-style:normal;font-size:2.4rem;
  font-weight:800;letter-spacing:-.02em;color:var(--gold-lt);}
.hero__lead{margin-top:2.8rem;font-size:1.9rem;line-height:1.85;color:#FAF8F8;}
.hero__cta{margin-top:4rem;display:flex;gap:1.2rem;}
.hero__card{
  flex:none;width:42rem;border-radius:1.6rem;overflow:hidden;
  background:#101827D1;
  border:.1rem solid #273A5F;box-shadow:0 2rem 5rem rgba(0,0,0,.4);
}
.hero__card-in{position:relative;height:38rem;display:flex;align-items:flex-end;}
/* 저울 워터마크 : 색·투명도가 이미 구워진 PNG 라 마스크 없이 그대로 깐다 */
.hero__card-in::before{
  content:"";position:absolute;left:4rem;bottom:3rem;
  width:17.4rem;aspect-ratio:452/415;pointer-events:none;
  background:url("../img/scale.png") left bottom/contain no-repeat;
}
.hero__card-txt{position:absolute;left:4.4rem;top:4.6rem;z-index:2;}
.hero__card-txt span{display:block;font-size:2.1rem;font-weight:700;color:#F1CC89;letter-spacing:-.02em;}
.hero__card-txt strong{display:block;margin-top:0;line-height:1.15;font-size:4.6rem;font-weight:800;letter-spacing:-.04em;}
.hero__card-img{position:relative;z-index:1;margin-left:auto;width:24.5rem;}
.hero__card-ft{
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  padding:1.6rem 0;background:#060A15;
  border-top:.1rem solid rgba(255,255,255,.08);
  font-size:1.7rem;color:#7284A4;
}
.hero__card-ft img{width:auto;height:2rem;}

/* 공용 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.8rem;
  border-radius:10rem;font-weight:800;letter-spacing:-.02em;transition:.25s var(--ease);}
.btn svg{width:1.6rem;height:1.6rem;flex:none;}
.btn img{flex:none;width:auto;height:1.7rem;}
.btn--kakao img{height:1.8rem;}
.btn--tel{padding:1.3rem 2.4rem;font-size:1.6rem;background:var(--navy);color:#fff;}
.btn--tel:hover{background:#25507d;}
.btn--kakao{padding:1.3rem 2.4rem;font-size:1.6rem;background:var(--kakao);color:var(--kakao-txt);}
.btn--kakao:hover{background:#ffe926;}
.btn--ghost{padding:1.3rem 2.4rem;font-size:1.6rem;border:.1rem solid rgba(255,255,255,.3);color:#fff;}
.btn--ghost:hover{background:rgba(255,255,255,.1);}

/* ------------------------------------------------------------
   9. 상담 신청 폼
   ------------------------------------------------------------ */
.contact{background:#F3F4F6;padding:7.4rem 0;}
.contact--dark{background:#eef0f5;}
.contact__in{width:114rem;margin:0 auto;display:flex;align-items:center;gap:6rem;}
.contact__txt{flex:none;width:44rem;}
.contact__eyebrow{font-size:1.5rem;font-weight:800;line-height:1.3;letter-spacing:.1em;color:var(--gold);}
.contact__txt h2{margin-top:.6rem;font-size:4.2rem;font-weight:800;line-height:1.2;letter-spacing:-.035em;color:var(--ink);}
/* 두 버튼 폭을 넓은 쪽(전화번호)에 맞춰 동일하게.
   inline-grid + 1fr 이면 가장 넓은 칸 기준으로 모든 칸이 같아진다. */
.contact__btns{margin-top:2.6rem;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1rem;}
/* 이 섹션 버튼만 세로 패딩 축소 (CTA 배너의 같은 클래스는 유지) */
.contact__btns .btn{padding:.9rem 1.7rem;}
.contact__form{flex:1 1 auto;max-width:55rem;margin-left:auto;}
.frm-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}
.frm-field{position:relative;}
.frm-field + .frm-field,.frm-row + .frm-field,.frm-row + .frm-row{margin-top:1.2rem;}
/* 위 규칙은 세로로 쌓인 칸을 위한 것이다.
   .frm-row 안의 두 칸은 가로로 나란하므로 간격은 grid gap 이 맡고 margin 은 없앤다. */
.frm-row > .frm-field + .frm-field{margin-top:0;}
.frm-input{
  display:block;width:100%;height:5.6rem;padding:0 1.8rem;border:.1rem solid var(--line);
  border-radius:.8rem;background:#fff;font-size:1.4rem;color:var(--ink);
  transition:border-color .2s,box-shadow .2s;
}
textarea.frm-input{height:auto;min-height:5.6rem;padding:1.6rem 1.8rem;resize:vertical;line-height:1.6;}
.frm-input::placeholder{color:#b3bac6;}
.frm-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 .3rem rgba(33,90,151,.12);}
.frm-input[aria-invalid="true"]{border-color:#d94a4a;}
.frm-agree{margin-top:1.4rem;display:flex;align-items:flex-start;gap:.8rem;font-size:1.25rem;color:var(--muted);}
.frm-agree input{width:1.7rem;height:1.7rem;margin:.2rem 0 0;accent-color:var(--blue);flex:none;cursor:pointer;}
.frm-agree a{text-decoration:underline;text-underline-offset:.3rem;color:var(--ink-2);}
.frm-submit{
  width:100%;height:6rem;margin-top:1.6rem;border-radius:.8rem;
  background:linear-gradient(90deg,#1A3A5C 0%,#215B99 100%);
  color:#fff;font-size:1.65rem;font-weight:800;letter-spacing:-.02em;
  transition:filter .25s,transform .25s;
}
.frm-submit:hover{filter:brightness(1.1);}
.frm-submit:disabled{opacity:.6;cursor:progress;}
.frm-msg{margin-top:1.2rem;font-size:1.4rem;font-weight:700;min-height:1.9rem;}
.frm-msg.is-ok{color:var(--green);}
.frm-msg.is-err{color:#d94a4a;}
.frm-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

/* ------------------------------------------------------------
   10. 통계 배너
   ------------------------------------------------------------ */
.stats{
  padding:9rem 0 11rem;text-align:center;
  background:#e9eef5 url("../img/stats-bg.jpg") center/cover no-repeat;
}
.stats h2{font-size:4.2rem;font-weight:800;letter-spacing:-.035em;color:var(--ink);}
.stats h2 em{font-style:normal;color:var(--blue-txt);}
.stats__lead{margin-top:1.2rem;font-size:2.1rem;line-height:2.8rem;font-weight:600;color:#080E1C;}
.stats__box{
  margin-top:4.4rem;padding:4.6rem 4rem;border-radius:1.6rem;background:#fff;
  box-shadow:0 1.2rem 4rem rgba(25,45,75,.08);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.stat dt{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);}
.stat dd{margin:.8rem 0 0;font-size:5.2rem;font-weight:800;letter-spacing:-.04em;color:var(--navy-700);line-height:1.2;}
.js-count{font-variant-numeric:tabular-nums;}
.stat small{display:block;margin-top:.6rem;font-size:1.5rem;letter-spacing:0;color:rgba(0,0,0,.3);font-weight:500;}

/* ------------------------------------------------------------
   11. 소개 3카드
   ------------------------------------------------------------ */
.intro{padding:10rem 0;}
.intro__cards{margin-top:5rem;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
/* PC 는 3단 그리드 그대로 둔다.
   슬라이더 JS 가 넣는 인라인 transform 과 복제 카드를 여기서 무력화한다. */
@media (min-width:991px){
  .intro__cards{transform:none!important;transition:none!important;}
  .intro__card.is-clone{display:none;}
}
.intro__card{border:.1rem solid #F3F4F6;border-radius:.6rem;overflow:hidden;background:#fff;
  transition:box-shadow .3s,transform .3s;}
.intro__card:hover{box-shadow:var(--shadow);transform:translateY(-.4rem);}
.intro__card img{width:100%;aspect-ratio:360/160;object-fit:cover;}
.intro__card div{padding:2.2rem 2rem 2.6rem;}
.intro__card h3{font-size:1.65rem;font-weight:800;letter-spacing:-.03em;color:#1A3A5C;}
/* body 의 word-break:keep-all 해제 — 좁은 카드에서 줄 끝이 비는 것을 막는다 */
.intro__card p{margin-top:1rem;font-size:1.35rem;line-height:1.7;word-break:normal;color:var(--muted);}

/* ------------------------------------------------------------
   12. 정의 블록
   ------------------------------------------------------------ */
.define{background:var(--bg-soft);padding:8rem 0;}
.define__in{width:114rem;margin:0 auto;display:flex;gap:5rem;align-items:flex-start;}
.define__ttl{flex:none;width:34rem;}
.define__ttl img{width:7rem;margin-bottom:1.6rem;}
.define__ttl h2{font-size:4.2rem;font-weight:800;line-height:1.4;letter-spacing:-.035em;color:var(--navy-800);}
.define__ttl h2 em{font-style:normal;color:var(--blue-txt);}
/* 흰 박스는 본문만, 슬라이더 조작부는 박스 바깥 오른쪽에 둔다 */
.define__main{flex:1 1 auto;display:flex;align-items:stretch;gap:2.8rem;}
.define__box{
  flex:1 1 auto;
  background:#fff;border:.1rem solid var(--line);border-radius:1rem;
  padding:3rem 3.4rem;font-size:1.6rem;line-height:3.2rem;letter-spacing:0;font-weight:500;color:#000;box-shadow:var(--shadow-sm);
}
.define__box strong{color:var(--blue-txt);font-weight:800;}

/* 세로 슬라이더 : 3개 문단을 같은 칸에 겹쳐 두어 박스 높이가 흔들리지 않게 한다 */
.define__slides{flex:1 1 auto;display:grid;}
.define__slide{
  grid-area:1/1;opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease);
}
.define__slide.is-on{opacity:1;visibility:visible;}

.define__nav{
  flex:none;width:2.4rem;display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;gap:1.4rem;
}
.define__arrow{
  flex:none;width:1.8rem;height:1.3rem;background:#1A3A5C;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:opacity .2s;
}
.define__arrow:hover{opacity:.6;}
.define__arrow--up{-webkit-mask-image:url("../img/chev-up.png");mask-image:url("../img/chev-up.png");}
.define__arrow--down{-webkit-mask-image:url("../img/chev-down.png");mask-image:url("../img/chev-down.png");}
.define__dots{display:flex;flex-direction:column;align-items:center;gap:.9rem;}
.define__dots button{
  /* 버튼 기본 패딩(1px 6px)이 남아 있으면 폭이 밀려 타원이 된다 */
  display:block;padding:0;width:.6rem;height:.6rem;border-radius:50%;
  background:rgba(26,58,92,.2);transition:background .2s;
}
.define__dots button.is-on{background:#1A3A5C;}

/* ------------------------------------------------------------
   13. 기준 3분할
   ------------------------------------------------------------ */
.criteria{padding:10rem 0;}
.criteria__hd{display:flex;align-items:flex-start;justify-content:space-between;}
.criteria__hd h2{font-size:4.2rem;font-weight:800;line-height:1.35;letter-spacing:-.035em;color:var(--navy-800);}
.criteria__hd h2 em{font-style:normal;color:var(--blue-txt);}
.criteria__links{display:flex;gap:2rem;text-align:center;}
.criteria__links a{display:block;}
.criteria__links span{
  width:6.4rem;height:6.4rem;border-radius:50%;background:var(--bg-blue);
  display:grid;place-items:center;margin:0 auto;transition:background .25s;
}
.criteria__links a:hover span{background:#e2ebf7;}
.criteria__links span svg{width:2.8rem;height:2.8rem;}
.criteria__links span img{width:auto;height:3.8rem;}
.criteria__links b{display:block;margin-top:.8rem;font-size:1.25rem;font-weight:600;color:var(--muted);}
.criteria__rule{margin:3.4rem 0 5rem;height:.1rem;background:var(--line);}
.criteria__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3.2rem;}
/* 위 테두리는 살려 두고, 태그 칩이 top:-.1rem 으로 그 위를 덮는다.
   → 태그 오른쪽 구간에만 선이 이어져 보인다. */
.crit{border:.1rem solid #1A3A5C26;}
.crit__tag{
  display:inline-block;padding:1rem 2.4rem;background:#1A3A5C;
  color:#fff;font-size:1.5rem;font-weight:800;letter-spacing:-.02em;
  /* 태그 높이(4.55rem)의 절반(2.27rem)만큼 끌어올려
     카드 위 테두리가 태그 세로 중앙을 지나게 한다.
     top 은 레이아웃을 바꾸지 않으므로 같은 값의 음수 margin-bottom 으로
     아래 본문도 함께 끌어올려 원래 여백을 유지한다. */
  margin:0 0 -2.27rem -.1rem;position:relative;top:-2.27rem;
}
.crit__body{padding:2.6rem 2.4rem 3rem;}
.crit__body strong{display:block;font-size:1.55rem;font-weight:700;line-height:1.6;color:#6A7282;}
.crit__body p{margin-top:0;font-size:1.45rem;font-weight:400;line-height:1.7;color:#6A7282;}

/* ------------------------------------------------------------
   14. 사례 슬라이더
   ------------------------------------------------------------ */
.cases{
  position:relative;padding:10rem 0;color:#fff;
  background:#20211f url("../img/case-bg.jpg") center/cover no-repeat;
}
.cases__in{position:relative;z-index:1;width:114rem;margin:0 auto;display:flex;gap:5rem;}
.cases__hd{flex:none;width:30rem;padding-top:1rem;}
.cases__hd span{display:block;font-size:1.5rem;font-weight:800;letter-spacing:.12em;color:var(--gold);}
.cases__hd h2{margin-top:.6rem;font-size:4.2rem;font-weight:800;line-height:1.35;letter-spacing:-.035em;}
.cases__nav{margin-top:5rem;display:flex;align-items:center;gap:1.4rem;font-size:1.4rem;color:#cfd6df;}
.cases__nav button{width:2.6rem;height:2.6rem;display:grid;place-items:center;
  border-radius:50%;color:#fff;transition:background .2s;}
.cases__nav button:hover{background:rgba(255,255,255,.14);}
.cases__nav button svg{width:1.3rem;height:1.3rem;}
.cases__nav b{font-weight:800;color:#fff;}
.cases__nav i{display:block;width:3rem;height:.1rem;background:rgba(255,255,255,.4);font-style:normal;}
/* 세로 스크롤은 살리고 가로 드래그만 슬라이더가 받는다 */
.cases__view{flex:1 1 auto;min-width:0;width:calc(100% + 18.6rem);overflow:hidden;
  touch-action:pan-y;cursor:grab;}
.cases__view.is-dragging{cursor:grabbing;user-select:none;}
.cases__track{display:flex;gap:2.8rem;transition:transform .5s var(--ease);}
.case{
  flex:0 0 35.6rem;background:#fff;border-radius:1.2rem;
  padding:3rem 2.6rem 3.2rem;min-height:29rem;
  display:flex;flex-direction:column;box-shadow:0 1.4rem 4rem rgba(0,0,0,.2);
}
.case__no{font-size:3.4rem;font-weight:800;color:#e8ebf0;line-height:1;letter-spacing:-.03em;}
.case h3{margin-top:auto;font-size:1.85rem;font-weight:800;letter-spacing:-.03em;color:var(--navy-800);}
.case p{margin-top:1.2rem;font-size:1.4rem;line-height:1.7;color:var(--muted);}

/* ------------------------------------------------------------
   15. 진행절차
   ------------------------------------------------------------ */
.process{padding:10rem 0;}
.process__grid{margin-top:5rem;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:start;gap:0 2.4rem;}
/* 화살표를 이미지 세로 중앙에 맞춘다.
   칸 너비 34rem × (156/253) ≈ 21rem 이 이미지 높이 → 절반 10.5rem, 화살표 절반 1.1rem */
.process__arrow{align-self:start;margin-top:9.4rem;}
.process__arrow img{width:auto;height:2.2rem;}
/* 박스 비율은 그대로 두고(화살표 중앙 정렬 계산이 이 높이에 맞춰져 있다)
   그 안에서 일러스트만 작게 넣는다 */
.step__fig{display:grid;place-items:center;aspect-ratio:253/156;
  border:.1rem solid #1A3A5C1A;border-radius:.4rem;background:#fff;overflow:hidden;}
.step__fig img{width:76%;height:auto;}
.step__no{display:block;margin-top:2rem;font-size:1.3rem;font-weight:800;letter-spacing:.1em;color:#1A3A5C;}
.step h3{margin-top:0;font-size:2.4rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);}
.step ul{margin-top:1.4rem;display:grid;gap:.6rem;}
.step li{position:relative;padding-left:1rem;font-size:1.4rem;line-height:2rem;color:var(--muted);}
.step li::before{content:"·";position:absolute;left:0;color:var(--muted-2);}

/* ------------------------------------------------------------
   16. 함께 검토하는 항목
   ------------------------------------------------------------ */
.support{background:#F9FAFB;padding:10rem 0;}
.support__grid{margin-top:5rem;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.support__item{
  display:flex;gap:1.4rem;padding:2.6rem 2.4rem;background:#fff;
  border:.1rem solid #EDEDED;border-radius:1.2rem;
}
.support__item i{display:block;flex:none;font-style:normal;line-height:0;}
.support__item i img{width:2.6rem;height:2.6rem;}
.support__item h3{font-size:1.55rem;font-weight:700;letter-spacing:-.03em;color:#1A3A5C;}
.support__item p{margin-top:0;font-size:1.35rem;line-height:1.65;color:#6A7282;}

/* ------------------------------------------------------------
   17. 주제별 정보 안내
   ------------------------------------------------------------ */
.subject{padding:10rem 0;position:relative;overflow:hidden;}
.subject__hd{position:relative;z-index:1;}
.subject__hd span{display:block;font-size:1.5rem;font-weight:800;letter-spacing:.12em;color:var(--gold);}
.subject__hd h2{margin-top:.6rem;font-size:4.2rem;font-weight:800;line-height:1.35;letter-spacing:-.035em;color:var(--navy-800);}
.subject__hd h2 em{font-style:normal;color:var(--blue-txt);}
/* 섹션이 full-bleed 라 right:0 이면 화면 끝에 붙는다.
   본문 칼럼(114rem) 오른쪽 끝에 맞춰 여백을 준다. 좁은 화면에선 3rem 로 폴백. */
.subject__logo{position:absolute;right:max(3rem, calc((100% - 114rem) / 2));
  top:8rem;width:18rem;opacity:.03;}
.subject__grid{margin-top:4.6rem;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.subject__link{
  display:flex;align-items:center;justify-content:space-between;gap:1.6rem;
  padding:2.4rem 2.4rem;border:.1rem solid #1A3A5C;border-radius:.2rem;
  font-size:1.8rem;font-weight:700;line-height:1.5;letter-spacing:-.03em;color:var(--navy-800);
  transition:background .25s,color .25s;
}
.subject__link span{width:3.2rem;height:3.2rem;flex:none;border-radius:50%;
  border:.1rem solid #1A3A5C;display:grid;place-items:center;transition:.25s;}
.subject__link span img{width:auto;height:1.4rem;}
.subject__link:hover{background:var(--navy-700);color:#fff;}
.subject__link:hover span{border-color:rgba(255,255,255,.5);}

/* ------------------------------------------------------------
   18. CTA 배너
   ------------------------------------------------------------ */
.cta{
  position:relative;padding:12rem 0;text-align:center;color:#fff;
  background:#1b1410 url("../img/cta-bg.jpg") center/cover no-repeat;
}
.cta__in{position:relative;z-index:1;width:114rem;margin:0 auto;}
.cta span{display:block;font-size:1.5rem;font-weight:800;letter-spacing:.12em;color:var(--gold-lt);}
.cta h2{margin-top:1.4rem;font-size:4.2rem;font-weight:700;letter-spacing:-.035em;}
.cta p{margin-top:0;font-size:2.05rem;color:#fff;}
.cta__btns{margin-top:3.4rem;display:flex;justify-content:center;gap:1.2rem;}

/* ------------------------------------------------------------
   19. FAQ
   ------------------------------------------------------------ */
.faq{padding:10rem 0 11rem;background:#f4f8fc url("../img/faq-bg.jpg") center/cover no-repeat;}
/* 1512 기준 좌우 여백 488px → 본문 폭 1512-976 = 536px */
.faq__list{width:53.6rem;margin:4.6rem auto 0;display:grid;gap:1.2rem;}
.faq__item{background:#fff;border-radius:.8rem;box-shadow:0 .3rem 1.4rem rgba(25,45,75,.06);overflow:hidden;}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:2rem 2.4rem;text-align:left;font-size:1.6rem;font-weight:700;
  letter-spacing:-.03em;color:var(--navy-800);
}
.faq__q svg{width:1.4rem;height:1.4rem;flex:none;color:#C9963A;transition:transform .3s var(--ease);}
.faq__item.is-open .faq__q svg{transform:rotate(180deg);}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease);}
.faq__item.is-open .faq__a{grid-template-rows:1fr;}
.faq__a > div{overflow:hidden;}
.faq__a p{padding:0 2.4rem 2.2rem;font-size:1.5rem;line-height:1.85;color:var(--ink-2);}

/* ------------------------------------------------------------
   20. 푸터
   ------------------------------------------------------------ */
.ft{background:#161a1f;color:#9aa3ad;padding:5.4rem 0 4rem;}
.ft__in{width:114rem;margin:0 auto;}
.ft__cols{display:flex;gap:9rem;}
.ft h2,.ft h3{font-size:1.5rem;font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:.6rem;}
.ft p,.ft li{font-size:1.4rem;line-height:1.9;}
.ft a:hover{color:#fff;}
/* 빠른 연결 : 아이콘 + 텍스트 */
.ft__link{display:inline-flex;align-items:center;gap:.9rem;}
.ft__link img{flex:none;width:1.7rem;height:1.7rem;object-fit:contain;}
.ft__bar{margin-top:3.4rem;padding-top:2.4rem;border-top:.1rem solid #F3F4F633;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;font-size:1.3rem;color:#D1D5DC;}
.ft__copy{color:#D1D5DC;}
.ft__copy em{font-style:normal;color:#fff;}

/* ------------------------------------------------------------
   21. 블로그 상세
   ------------------------------------------------------------ */
.post{background:var(--bg-soft);padding-bottom:6rem;}
.post__hero{width:128.8rem;margin:0 auto;padding-top:9rem;}
.post__hero img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:1rem;}
.post__body{width:128.8rem;margin:0 auto;background:#fff;padding:6.6rem 0 8rem;}
.post__wrap{width:73.5rem;margin:0 auto;}
.crumb{display:flex;align-items:center;gap:.8rem;font-size:1.3rem;color:var(--muted-2);}
.crumb a:hover{color:var(--navy);}
.crumb b{font-weight:700;color:var(--ink-2);}
.post__tag{display:inline-block;margin-top:1.6rem;padding:.35rem 1.4rem;border-radius:10rem;
  border:.1rem solid #C7D5F0;background:#F0F4FF;font-size:1.3rem;font-weight:700;color:#1A3A5C;}
.post__ttl{margin-top:2rem;font-size:3.2rem;font-weight:800;line-height:1.4;letter-spacing:-.04em;color:#1A3A5C;}
/* .post p 규칙(아래)이 더 구체적이라 .post 를 붙여 우선순위를 맞춘다 */
.post .post__meta{margin-top:.5rem;font-size:1.45rem;color:#99A1AF;}
.post__summary{
  margin-top:3rem;padding:2.4rem 2.6rem;background:#FDFAF5;border-left:.4rem solid #C9963A;
  font-size:1.65rem;line-height:2.275rem;color:#364153;
}
.post h2{margin:5rem 0 2rem;font-size:2.1rem;font-weight:800;letter-spacing:-.035em;color:#1A3A5C;}
.post h2 em{font-style:normal;color:var(--gold);}
/* 관련 글 목록 바로 앞 소제목(개인회생2번 관련 정보)만 금색 */
.post h2:has(+ .rel){color:#C9963A;}
/* 문의 방법 · 사무소 안내 · 관련 정보 세 소제목만 .notice h3 와 같은 크기 */
.post h2:has(+ .ways),
.post h2:has(+ .office-tbl),
.post h2:has(+ .rel){font-size:1.6rem;}
.post h3{margin:3.6rem 0 1.4rem;font-size:1.75rem;font-weight:800;letter-spacing:-.035em;color:#1A3A5C;}
.post p{font-size:1.5rem;line-height:1.95;color:#4A5565;}
.post p + p{margin-top:1.4rem;}
.post__table{margin:1rem 0 4.6rem;border:.1rem solid #E5E7EB;border-radius:1.2rem;overflow:hidden;}
.post__table th{padding:1.4rem 2rem;background:#1A3A5C;color:#fff;font-size:1.4rem;
  font-weight:700;text-align:left;letter-spacing:-.02em;}
.post__table td{padding:1.6rem 2rem;border-top:.1rem solid var(--line-2);font-size:1.4rem;
  line-height:1.6;color:var(--muted);vertical-align:top;}
.post__table td:last-child{font-weight:700;color:#1A3A5C;}
/* 본문 행 : 홀수 흰색 / 짝수 회색, 두 칸 사이 세로 구분선 */
.post__table tbody tr:nth-child(odd) td{background:#fff;}
.post__table tbody tr:nth-child(even) td{background:#F9FAFB;}
.post__table td + td{border-left:.1rem solid #F3F4F6;}
.post__cta{
  margin:4rem 0;padding:3rem 3.2rem;border-radius:1.2rem;background:#1A3A5C;color:#fff;
}
/* 상세페이지 CTA 안에서만 버튼을 각지게 (메인 상담 섹션은 알약형 유지) */
.post__cta .btn{border-radius:.4rem;}
.post__cta span{font-size:1.5rem;color:rgba(255,255,255,.6);}
.post__cta strong{display:block;margin-top:.6rem;font-size:2rem;font-weight:800;letter-spacing:-.03em;color:#fff;}
.post__cta strong em{font-style:normal;color:#C9963A;}
.post__cta div{margin-top:2rem;display:flex;gap:1.2rem;flex-wrap:wrap;}
.post__cta .btn--tel{background:#22A65A;}
.post__cta .btn--tel:hover{background:#1c8f4d;}
.post__cta small{display:block;margin-top:1.8rem;font-size:1.4rem;color:rgba(255,255,255,.3);}
.cases2{margin-top:1rem;display:grid;gap:1.6rem;}
.cases2 li{display:flex;gap:2.4rem;padding:2.8rem 3rem;background:#F9FAFB;border-radius:1.2rem;}
/* 번호만 Noto Sans KR */
.cases2 b{flex:none;font-family:'Noto Sans KR',var(--font-en);
  font-size:2.8rem;font-weight:700;color:#E0D5C8;line-height:1.4;}
.cases2 h3{margin:0;font-size:1.75rem;}
.cases2 p{margin-top:.8rem;font-size:1.55rem;line-height:2.4rem;color:#4A5565;}
.cases2 span{display:block;margin-top:1rem;font-size:1.5rem;font-weight:600;color:var(--gold);}
.notice{
  margin-top:3.4rem;padding:2.6rem 2.8rem;border-radius:1.2rem;
  background:#FFFBF3;border:.1rem solid #FFEDD4;
}
.notice h3{margin:0 0 1rem;display:flex;align-items:center;gap:.8rem;font-size:1.6rem;color:#9A5A00;}
.notice h3 img{width:1.6rem;height:auto;}
.notice p{margin-left:2.4rem;font-size:1.4rem;line-height:1.85;color:#7A4800;}
.checklist{margin-top:3.4rem;padding:3rem 3.2rem;border-radius:1.2rem;
  background:#EFF6FF;border:.1rem solid #BEDBFF;}
.checklist h3{margin:0;font-size:1.75rem;color:#1A3A5C;}
.checklist h3 em{font-style:normal;color:#C9963A;}
.checklist > p{margin-top:1rem;font-size:1.55rem;color:#6A7282;}
.checklist ul{margin-top:1.8rem;border-radius:1.2rem;
  border:.1rem solid #E5E7EB;
  display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 3rem;}
.checklist li{display:flex;align-items:flex-start;gap:1rem;font-size:1.55rem;color:#364153;}
.checklist li b{flex:none;min-width:2.5rem;height:2.5rem;padding:0 .6rem;border-radius:.4rem;background:#1A3A5C;
  color:#fff;font-size:1.15rem;font-weight:700;display:grid;place-items:center;margin-top:.2rem;}
.ways{margin-top:2.6rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;text-align:center;}
.ways a{padding:2.4rem 1.4rem;border-radius:1.2rem;color:#fff;transition:filter .25s;}
.ways a:hover{filter:brightness(1.08);}
.ways a:nth-child(1){background:#1A3A5C;}
.ways a:nth-child(2){background:#C9963A;}
.ways a:nth-child(3){background:#22A65A;}
.ways svg{width:1.8rem;height:1.8rem;margin:0 auto .8rem;}
.ways img{width:auto;height:2.4rem;margin:0 auto .9rem;}
.ways b{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.02em;}
.ways i{display:block;margin-top:.5rem;font-size:1.25rem;font-style:normal;color:rgba(255,255,255,.7);}
/* .post p 규칙이 더 구체적이라 .post 를 붙여 우선순위를 맞춘다 */
.post .ways-note{margin-top:3rem;text-align:center;font-size:1.4rem;color:#99A1AF;}
/* 안내문 바로 다음 소제목(개인회생2번 · 의정종합법률사무소) 위 여백 확대 */
.post .ways-note + h2{margin-top:8rem;}
.office-tbl{margin-top:1rem;border:.1rem solid #E5E7EB;border-radius:1.2rem;overflow:hidden;}
.office-tbl th{width:14rem;padding:1.4rem 2rem;border-top:.1rem solid #F3F4F6;
  border-right:.1rem solid #F3F4F6;
  font-size:1.4rem;font-weight:700;text-align:left;color:#6A7282;}
.office-tbl td{padding:1.4rem 2rem;border-top:.1rem solid #F3F4F6;font-size:1.4rem;color:#364153;}
.office-tbl tr:first-child th,.office-tbl tr:first-child td{border-top:0;}
/* 본문 표와 같은 방식 : 홀수 흰색 / 짝수 회색 */
.office-tbl tbody tr:nth-child(odd) th,.office-tbl tbody tr:nth-child(odd) td{background:#fff;}
.office-tbl tbody tr:nth-child(even) th,.office-tbl tbody tr:nth-child(even) td{background:#F9FAFB;}
.rel{margin-top:1rem;display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;}
.rel a{display:flex;align-items:flex-start;gap:1.6rem;padding:1.4rem;border:.1rem solid #E5E7EB;
  border-radius:1.2rem;background:#F9FAFB;transition:box-shadow .25s;}
.rel a:hover{box-shadow:var(--shadow-sm);}
.rel img{width:8rem;height:5rem;object-fit:cover;border-radius:1.2rem;flex:none;}
.rel b{font-size:1.15rem;font-weight:700;line-height:1.5;letter-spacing:-.03em;color:#1A3A5C;}
/* 전체보기 목록 페이지 */
.list{margin-top:2.6rem;display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;}
.list a{display:flex;align-items:flex-start;gap:1.6rem;padding:1.6rem;
  border:.1rem solid #E5E7EB;border-radius:1.2rem;background:#F9FAFB;transition:box-shadow .25s;}
.list a:hover{box-shadow:var(--shadow-sm);}
.list img{width:9rem;height:9rem;object-fit:cover;border-radius:1.2rem;flex:none;}
.list b{display:block;font-size:1.45rem;font-weight:700;line-height:1.5;letter-spacing:-.03em;color:#1A3A5C;}
.list span{display:block;margin-top:.6rem;font-size:1.25rem;line-height:1.6;color:#6A7282;}
/* 목록 페이지 페이징 */
.pager{margin-top:3.4rem;display:flex;justify-content:center;align-items:center;gap:.6rem;}
.pager a{min-width:3.4rem;height:3.4rem;padding:0 .8rem;display:grid;place-items:center;
  border:.1rem solid #E5E7EB;border-radius:.6rem;background:#fff;
  font-size:1.35rem;font-weight:700;color:#6A7282;transition:.2s;}
.pager a:hover{border-color:#1A3A5C;color:#1A3A5C;}
.pager a.is-on{background:#1A3A5C;border-color:#1A3A5C;color:#fff;}
.pager__nav{font-size:1.7rem;line-height:1;}
.pager .is-off{opacity:.35;pointer-events:none;}

/* 첫 섹션 제목 오른쪽 전체보기 버튼 */
.topics__all{flex:none;display:inline-flex;align-items:center;gap:.6rem;
  padding:.9rem 1.8rem;border-radius:.4rem;background:#1A3A5C;
  font-size:1.35rem;font-weight:700;color:#fff;transition:filter .25s;}
.topics__all:hover{filter:brightness(1.15);}
.topics__all svg{width:1.1rem;height:1.1rem;}

.post__back{margin-top:4rem;display:flex;justify-content:center;}
.post__back a{display:inline-flex;align-items:center;gap:.8rem;
  padding:1.4rem 2.8rem;border-radius:1.2rem;background:#1A3A5C;
  font-size:1.25rem;color:#fff;transition:filter .25s;}
.post__back a:hover{filter:brightness(1.15);}
.post__back svg{width:1.2rem;height:1.2rem;}

/* ------------------------------------------------------------
   22. 모바일 (≤990px)
   ------------------------------------------------------------ */
@media (max-width:990px){
  .inner,.hd__in,.hero__in,.contact__in,.cases__in,.define__in,.cta__in,.ft__in,
  .post__body,.post__wrap{width:calc(100% - 8rem);}
  .sec,.intro,.criteria,.process,.support,.subject{padding:5.4rem 0;}

  /* 헤더 : 모바일은 다크 */
  .hd{background:#091427;border-bottom-color:rgba(255,255,255,.14);}
  .hd__in{height:6.4rem;gap:1rem;}
  .hd__name{font-size:1.7rem;color:#fff;}
  /* 로고 PNG 가 남색 단색이라 반전만으로 흰색이 된다 (흰색 파일 별도 불필요) */
  .hd__mark{filter:brightness(0) invert(1);}
  /* 햄버거 svg 는 stroke 를 속성으로 박아뒀으므로 여기서 덮는다 */
  .hd__toggle svg{stroke:#fff;}
  /* 전화·카톡 아이콘은 빼고 배지만 노출.
     order 를 주지 않으므로 마크업 순서대로 배지가 로고 앞에 온다 (데스크톱과 동일). */
  .hd__tel,.hd__kakao,.hd__div{display:none;}
  .hd__nav{position:absolute;left:0;top:100%;width:100%;margin:0;background:#fff;
    border-bottom:.1rem solid var(--line);display:none;}
  .hd__nav.is-open{display:block;}
  .hd__nav ul{flex-direction:column;align-items:stretch;gap:0;padding:1rem 4rem 2rem;}
  .hd__nav a{display:block;padding:1.4rem 0;font-size:1.6rem;border-bottom:.1rem solid var(--line-2);}
  .hd__util{gap:1rem;}
  .hd__toggle{display:grid;place-items:center;width:3.4rem;height:3.4rem;}
  .hd__toggle svg{width:2rem;height:2rem;}

  /* 퀵메뉴 → 하단 고정바 */
  .quick{top:auto;bottom:0;right:0;left:0;transform:none;width:100%;border-radius:20px 20px 0 0;
    padding:0;display:flex;box-shadow:0 -.4rem 1.6rem rgba(10,20,40,.2);}
  .quick__ttl{display:none;}
  /* 기본값 justify-items:center 를 풀어야 칸이 1/3 폭을 꽉 채운다 */
  .quick__list{margin:0;padding:0;flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:0;
    justify-items:stretch;}
  /* 바 자체 패딩을 0 으로 두고 칸 안쪽 패딩으로 높이를 만든다 (위아래 띠 제거) */
  .quick__list a{width:100%;height:auto;padding:1.8rem 0;border-radius:0;background:none;gap:.3rem;}
  /* 좌·우 칸과 가운데 칸 색을 구분 (.quick 의 overflow:hidden 이 위쪽 모서리를 잘라 준다) */
  .quick__list li:nth-child(1) a,
  .quick__list li:nth-child(3) a{background:#22466B;}
  .quick__list li:nth-child(2) a{background:#14375A;}
  .quick__ico{width:auto;height:auto;}
  .q-tel img,.q-kko img,.q-app img{height:2rem;}
  .quick__ico svg{width:1.4rem;height:1.4rem;}
  .quick__list b{font-size:1.15rem;}
  /* 고정바가 푸터를 가리지 않도록 자리를 비워 둔다 (패딩이 붙어 바가 높아진 만큼 6.4 → 8rem).
     이 패딩 자리와 바의 둥근 모서리 뒤로 body 배경이 비치므로 푸터와 같은 색으로 맞춘다. */
  body{padding-bottom:8rem;background:#161a1f;}

  /* 카드 그리드 */
  .topics{padding:5rem 0 6rem;}
  /* 모바일은 제목을 히어로급으로 키우고 구분선을 뺀다.
     제목이 두 줄이 되므로 전체보기 버튼은 아래 줄 우측으로 내린다. */
  .topics__hd{align-items:flex-end;padding-bottom:0;border-bottom:0;}
  .topics__hd h2{font-size:2.9rem;line-height:1.32;}
  .br-m{display:inline;}
  .topics__logo{width:4rem;}
  .cardgrid{grid-template-columns:1fr;gap:3.4rem;}
  .card__body{width:calc(100% - 3rem);margin-top:-4rem;padding:2rem 2rem 2.2rem;}
  .card__more{right:1.6rem;top:1.4rem;}
  .card__more-ico{width:2.8rem;height:2.8rem;}
  .card__more-ico svg{width:1.5rem;height:1.5rem;}
  .card__more b{font-size:1.2rem;}
  .card__body h3{font-size:1.9rem;}
  .card__body p{font-size:1.5rem;}

  /* 히어로 */
  .hero__in{flex-direction:column;align-items:stretch;min-height:0;padding:6rem 0;gap:4rem;}
  .hero__badge{font-size:1.65rem;}
  .hero__ttl{font-size:3.6rem;}
  .hero__ttl em{font-size:2rem;margin-bottom:.8rem;}
  .hero__lead{font-size:1.6rem;}
  .hero__cta{flex-wrap:wrap;}
  .hero__card{width:100%;}
  .hero__card-in{height:34rem;}
  .hero__card-txt span{font-size:2.3rem;}
  .hero__card-txt strong{font-size:4.1rem;}
  .hero__card-img{width:22rem;}

  /* 폼 */
  .contact{padding:6rem 0;}
  .contact__in{flex-direction:column;align-items:stretch;gap:3rem;}
  .contact__txt{width:auto;}
  .contact__eyebrow,.contact__txt h2{text-align:center;}
  .contact__eyebrow{font-size:1.8rem;}
  .contact__txt h2{font-size:3.2rem;}
  /* 세로 flex 에서 가로 auto 마진은 stretch 를 무효화한다.
     데스크톱용 margin-left:auto / max-width 를 풀지 않으면
     폼이 내용 폭으로 줄어 오른쪽에 붙는다. */
  /* 폼만 좌우를 더 들여 가운데로 : 412px 기준 좌우 여백 77px */
  .contact__form{max-width:none;width:calc(100% - 8.2rem);margin:0 auto;}
  /* inline-grid 는 내용 폭이라 버튼 줄만 오른쪽이 짧아진다 */
  /* 버튼줄도 폼과 같은 폭(좌우 77px)으로 맞춘다.
     258px 안에 두 버튼을 가로로 넣어야 하므로 폭 균등(1fr)을 포기하고
     각자 내용 폭으로 두어 양 끝에 붙인다. 균등 배분이면 전화번호가 11px 까지 내려간다. */
  /* 폼과 같은 폭(258px)을 두 버튼이 정확히 반씩 나눠 채운다.
     칸이 126px 뿐이라 "0507-0177-8034"(14자)를 넣으려면
     아이콘·패딩·글자를 여기까지 줄여야 한다. */
  .contact__btns{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
    width:calc(100% - 8.2rem);margin-left:auto;margin-right:auto;}
  .contact__btns .btn{padding:.9rem .45rem;gap:.3rem;font-size:1.1rem;white-space:nowrap;}
  .contact__btns .btn img{height:1rem;}
  .frm-row{grid-template-columns:1fr;}
  .frm-input{height:5.2rem;font-size:1.6rem;}
  /* 추가 문의 사항 칸만 높이 2배 (64px → 129px) */
  textarea.frm-input{min-height:11.9rem;}
  .frm-submit{height:5.6rem;font-size:1.7rem;}

  /* 통계 */
  .stats{padding:6rem 0 7rem;}
  /* 행간은 412px 기준 제목 36px / 부제목 20px. rem 이라 폭에 따라 같은 비율로 따라간다 */
  .stats h2{font-size:3rem;line-height:3.7rem;}
  .stats__lead{font-size:1.6rem;line-height:2.1rem;}
  .stats__box{grid-template-columns:1fr;gap:3rem;padding:3.4rem 2.4rem;}
  .stat dt{font-size:2.7rem;}
  .stat dd{font-size:4.3rem;}
  .stat small{font-size:1.7rem;}

  /* 소개 */
  .sec-title{font-size:2.9rem;}
  .sec-lead{font-size:1.5rem;}
  /* 제목·본문은 왼쪽 정렬 */
  .intro .sec-title,.intro .sec-lead{text-align:left;}
  /* 카드는 좌우가 살짝 보이는 슬라이드로.
     뷰를 음수 마진으로 화면 끝까지 넓히고(overflow 는 여기서 자름),
     트랙에 같은 값의 패딩을 줘서 첫 카드가 본문 좌측선에 맞게 한다. */
  /* 세로 스크롤은 살리고 가로 드래그만 슬라이더가 받는다.
     이게 없으면 가로로 끌 때 브라우저가 페이지까지 같이 밀어 버린다. */
  .intro__view{margin:4rem -4rem 0;overflow:hidden;cursor:grab;touch-action:pan-y;}
  .intro__view.is-dragging{cursor:grabbing;user-select:none;}
  .intro__cards{margin-top:0;display:flex;gap:1.6rem;padding:0 4rem;
    transition:transform .5s var(--ease);}
  /* 트랙 패딩을 뺀 폭 = 본문 컨테이너 폭. 옆 카드는 좌우 여백만큼 걸쳐 보인다 */
  .intro__card{flex:0 0 100%;}
  .intro__card h3{font-size:1.8rem;}
  .intro__card p{font-size:1.45rem;}

  /* 정의 */
  /* 기본값 align-items:flex-start 를 풀어야 제목 블록이 컨테이너 폭을 다 써서 가운데로 온다 */
  .define__in{flex-direction:column;align-items:stretch;gap:2.4rem;}
  /* 아이콘·제목 가운데 정렬 (img 는 인라인 요소라 text-align 으로 같이 따라온다) */
  .define__ttl{width:auto;text-align:center;}
  .define__ttl img{margin-left:auto;margin-right:auto;}   /* 리셋에서 block 이라 가운데는 마진으로 */
  .define__ttl h2{font-size:2.9rem;}
  /* body 의 word-break:keep-all 을 여기서만 푼다.
     단어 도중에도 끊어서 줄 끝이 비지 않게 한다. */
  .define__box{font-size:1.5rem;padding:2.4rem;word-break:break-all;}
  /* 세로로 세워 뒀던 조작부를 박스 아래 가로 한 줄로 내린다 */
  .define__main{flex-direction:column;gap:2rem;}
  .define__nav{width:auto;flex-direction:row;justify-content:center;gap:4.6rem;}
  .define__dots{flex-direction:row;gap:.8rem;}
  /* 위·아래 화살표 이미지를 그대로 돌려 좌·우 화살표로 쓴다 (별도 파일 불필요) */
  .define__arrow{width:1.7rem;height:1.7rem;transform:rotate(-90deg);}

  /* 기준 */
  .criteria__hd{flex-direction:column;gap:2.4rem;}
  .criteria__hd h2{font-size:2.9rem;}
  .criteria__rule{margin:2.6rem 0 3rem;}
  .criteria__grid{grid-template-columns:1fr;gap:2rem;}
  .crit__body strong{font-size:1.65rem;}
  .crit__body p{font-size:1.5rem;}

  /* 사례 */
  .cases{padding:6rem 0;}
  .cases__in{flex-direction:column;gap:3rem;}
  .cases__hd{width:auto;}
  .cases__hd h2{font-size:2.9rem;}
  .cases__nav{margin-top:2rem;}
  .cases__view{width:100%;}
  .case{flex:0 0 100%;min-height:0;padding:2.6rem 2.2rem;}
  .case h3{font-size:1.9rem;margin-top:1.6rem;}
  .case p{font-size:1.45rem;}
  .cases__track{gap:1.6rem;}

  /* 절차 */
  /* 412px 기준 좌우 여백 80px : inner 자체 여백(3rem) 에 이만큼을 더 준다 */
  .process .inner{padding-left:4.38rem;padding-right:4.38rem;}
  .process__grid{grid-template-columns:1fr;gap:3.4rem;margin-top:2.6rem;}
  /* 가로 화살표 대신 아래 방향 화살표를 단계 사이에 넣는다.
     img 는 가로용이므로 감추고 배경 이미지로 교체한다. */
  .process__arrow{display:block;align-self:center;margin:0 auto;
    width:1.9rem;height:1.05rem;
    background:url("../img/step-arrow-down.png") center/contain no-repeat;}
  .process__arrow img{display:none;}
  .step h3{font-size:2.1rem;}
  .step li{font-size:1.5rem;}

  /* 검토 항목 */
  .support__grid{grid-template-columns:1fr;gap:1.2rem;}
  .support__item{padding-top:1.7rem;padding-bottom:1.7rem;}   /* 2.6rem 에서 축소 */
  .support__item i img{width:2.1rem;height:2.1rem;}           /* 2.6rem 에서 축소 */
  .support__item h3{font-size:1.65rem;}
  .support__item p{font-size:1.45rem;}

  /* 주제별 */
  .subject__hd h2{font-size:2.9rem;}
  .subject__logo{display:none;}
  .subject__grid{grid-template-columns:1fr;gap:1.2rem;}
  .subject__link{font-size:1.65rem;padding:2rem;}

  /* CTA */
  .cta{padding:6.4rem 0;}
  .cta h2{font-size:2.9rem;}
  .cta p{font-size:1.5rem;}
  .cta__btns{flex-wrap:wrap;}

  /* FAQ */
  .faq{padding:6rem 0 7rem;}
  .faq__list{width:100%;margin-top:3.4rem;}
  .faq__q{font-size:1.6rem;padding:1.8rem 2rem;}
  .faq__a p{font-size:1.5rem;padding:0 2rem 2rem;}

  /* 푸터 */
  .ft{padding:4rem 0 3rem;}
  .ft__cols{flex-direction:column;gap:3rem;}
  .ft__bar{flex-direction:column;align-items:flex-start;gap:1rem;}
  .ft p,.ft li{font-size:1.45rem;}
  .ft__bar{font-size:1.35rem;}

  /* 블로그 상세 */
  /* 맨 위 이미지는 화면 끝까지, 위 여백·모서리 없이 */
  .post__hero{width:100%;padding-top:0;}
  .post__hero img{aspect-ratio:16/9;border-radius:0;}
  .post__body{padding:4rem 2.4rem 5rem;width:calc(100% - 4rem);border-radius:.6rem;}
  .post__wrap{width:100%;}
  /* 아래 .post p 규칙(1.55rem)이 더 구체적이라 선택자를 한 단계 올린다 */
  .post p.post__tag{font-size:1.15rem;}
  .post__ttl{font-size:2.4rem;}
  .post h2{font-size:2rem;margin:4rem 0 1.6rem;}
  .post h3{font-size:1.8rem;}
  /* 본문 단락도 단어 중간에서 끊어 줄 끝이 비지 않게 한다 (제목은 제외) */
  .post p,.post li{font-size:1.55rem;word-break:break-all;}
  /* body 의 word-break:keep-all 을 여기서만 푼다. 좁은 폭에서 줄 끝이 비지 않게 */
  .post__summary{font-size:1.5rem;padding:2rem;word-break:break-all;}
  /* 상세 CTA : 좁은 폭에서 전화번호가 두 줄로 접히지 않도록 버튼을 한 줄씩 꽉 채운다 */
  .post__cta{padding:2.4rem 2rem;}
  .post__cta span,.post__cta strong{word-break:break-all;}
  .post__cta div{flex-direction:row;flex-wrap:nowrap;gap:1rem;}
  .post__cta .btn{flex:1 1 0;min-width:0;width:auto;padding:1.2rem .8rem;gap:.5rem;
    font-size:1.5rem;white-space:nowrap;}
  /* 페이지 하단 CTA 는 버튼 문구가 길어("…전화 상담") 가로로는 안 들어간다.
     두 CTA 중 하단에만 <small> 이 있어 그걸로 구분한다. */
  .post__cta:has(small) div{flex-direction:column;align-items:flex-start;}
  .post__cta:has(small) .btn{flex:none;width:auto;padding:1.2rem 2.4rem;font-size:1.5rem;}
  /* 좁은 폭에서 1열이 과하게 눌리지 않도록 40:60 으로 고정하고,
     body 의 word-break:keep-all 을 풀어 줄 끝이 비지 않게 한다 */
  .post__table table{table-layout:fixed;}
  .post__table th:first-child,.post__table td:first-child{width:40%;}
  .post__table th,.post__table td{padding:1.2rem 1.4rem;font-size:1.3rem;word-break:break-all;}
  .post__table{display:block;overflow-x:auto;}
  .list{grid-template-columns:1fr;}
  /* 경고 박스 : 아이콘을 제목 첫 줄에 맞추고, 본문 들여쓰기를 없애 폭을 되찾는다 */
  .notice{padding:2.2rem 2rem;}
  .notice h3{align-items:flex-start;}
  /* 아이콘을 키우고, 본문 들여쓰기를 (아이콘 폭 + gap .8rem) 으로 맞춰 제목 글자와 좌측선을 일치시킨다 */
  .notice h3 img{width:2.2rem;margin-top:.1rem;}
  .notice p{margin-left:3rem;}
  /* 체크리스트 : 번호 배지와 여백을 줄여 글자 칸을 넓힌다 */
  .checklist{padding:2.4rem 2rem;}
  .checklist ul{grid-template-columns:1fr;}
  .checklist li{gap:.8rem;}
  .checklist li b{min-width:2.2rem;height:2.2rem;}
  /* 세로로 쌓지 않고 3칸 가로 유지. 칸이 좁아지므로 여백만 줄인다 */
  .ways{grid-template-columns:repeat(3,1fr);gap:.8rem;}
  .ways a{padding:2rem .8rem;}
  .rel{grid-template-columns:1fr 1fr;}
  .cases2 h3{font-size:1.65rem;}
  .cases2 p{font-size:1.45rem;}
  .office-tbl th{width:10rem;}
}

/* 펼친 모바일 (501~990px)
   반폭 칸이 174px 이상 확보되므로 상담 버튼을 원래 크기로 되돌린다.
   (≤500px 에서만 126px 칸에 맞춰 줄여 놓은 값이다) */
@media (min-width:501px) and (max-width:990px){
  .contact__btns{gap:1rem;}
  .contact__btns .btn{padding:.9rem 1rem;gap:.6rem;font-size:1.6rem;}
  .contact__btns .btn img{height:1.6rem;}
}

/* 접은 모바일 (≤500px) 미세 조정 */
@media (max-width:500px){
  .inner,.hd__in,.hero__in,.contact__in,.cases__in,.define__in,.cta__in,.ft__in,
  .post__body,.post__wrap{width:calc(100% - 6rem);}
  .post__body{width:calc(100% - 3rem);padding:3.4rem 2rem 4rem;}
  .hero__ttl{font-size:3.2rem;}
  .hd__name{font-size:1.6rem;}
  /* 접은 폭에서는 반칸이 141px 뿐이라 전화번호가 들어가도록 더 줄인다 */
  .post__cta .btn{padding:1.2rem .6rem;gap:.4rem;font-size:1.2rem;}
  .post__cta .btn img{height:1.25rem;}
  /* 세로로 쌓는 하단 CTA 는 폭이 넉넉하므로 줄이지 않는다 */
  .post__cta:has(small) .btn{padding:1.2rem 1.6rem;gap:.6rem;font-size:1.35rem;}
  .post__cta:has(small) .btn img{height:1.6rem;}
  /* 가로 배치는 유지하되, 좁은 폭이라 여백만 줄여 글자 칸을 넓힌다 */
  .cases2 li{gap:1.4rem;padding:2.2rem 2rem;}
  /* 관련 정보 : 2칸이면 가로 카드가 안 들어가므로 썸네일을 위로 올린다 */
  .rel{gap:1rem;}
  .rel a{flex-direction:column;gap:.8rem;padding:1rem;}
  .rel img{width:100%;height:auto;aspect-ratio:16/10;}
  /* 문의 방법 3칸이 접은 폭에도 들어가도록 글자·아이콘을 줄인다 */
  .ways a{padding:1.8rem .5rem;}
  .ways img{height:2rem;margin-bottom:.7rem;}
  .ways b{font-size:1.25rem;}
  .ways i{font-size:1.02rem;margin-top:.4rem;}
  /* 좌우 여백이 3rem 으로 줄어드는 구간이라 슬라이드 뷰도 같이 맞춘다 */
  .intro__view{margin-left:-3rem;margin-right:-3rem;}
  .intro__cards{padding:0 3rem;}
}

/* 인쇄 */
@media print{
  .quick,.hd,.contact,.cta,.faq{display:none;}
  #wrap{max-width:none;}
}

/* 모션 최소화 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* ------------------------------------------------------------
   23. 스크롤 등장 효과 (JS 로 .reveal 부여 · 미지원 시 항상 노출)
   ------------------------------------------------------------ */
.reveal{opacity:0;transform:translateY(2.4rem);
  transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.is-in{opacity:1;transform:none;}
.cardgrid .reveal:nth-child(3n+2),.intro__cards .reveal:nth-child(2),
.criteria__grid .reveal:nth-child(2),.support__grid .reveal:nth-child(3n+2),
.subject__grid .reveal:nth-child(3n+2){transition-delay:.08s;}
.cardgrid .reveal:nth-child(3n+3),.intro__cards .reveal:nth-child(3),
.criteria__grid .reveal:nth-child(3),.support__grid .reveal:nth-child(3n+3),
.subject__grid .reveal:nth-child(3n+3){transition-delay:.16s;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;}}
/* 모바일은 올라오는 대신 서서히 나타나기만 한다.
   translateY 를 쓰면 슬라이드의 translateX 와 겹쳐 어색해지기 때문이다. */
@media (max-width:990px){
  .reveal{opacity:0;transform:none;transition:opacity .55s var(--ease);}
  .reveal.is-in{opacity:1;transform:none;}
  /* 슬라이드 안 카드는 제외한다. 트랙 밖에 있어 관찰이 늦어 깜빡인다 */
  .intro__card.reveal{opacity:1;}
}

/* ------------------------------------------------------------
   24. AEO 블록 : 한눈에 보기 / 목차
   ------------------------------------------------------------ */
.tldr{
  margin-top:3rem;padding:2.6rem 3rem;border-radius:1rem;
  background:#F0F4FF;border:.1rem solid #C7D5F0;
}
.post .tldr h2{
  margin:0;font-size:1.8rem;font-weight:800;letter-spacing:-.03em;
  color:#1A3A5C;display:flex;align-items:center;gap:.7rem;
}
.post .tldr h2::before{
  content:"";width:.4rem;height:1.5rem;border-radius:.2rem;background:var(--blue-txt);
}
.tldr ul{display:grid;gap:1rem;}
.tldr li{
  position:relative;padding-left:2.8rem;font-size:1.6rem;line-height:1.75;color:#364153;
}
.tldr li::before{
  content:"";position:absolute;left:.4rem;top:.75rem;width:.7rem;height:.7rem;
  border-radius:50%;background:#1A3A5C;
}
.tldr li b{font-weight:800;color:var(--navy-800);}

.toc{
  margin-top:2.4rem;padding:2.4rem 3rem 2.4rem 4rem;border-radius:1rem;
  background:#F9FAFB;
}
.post .toc h2{
  margin:0;font-size:1.6rem;font-weight:800;letter-spacing:-.02em;color:#101828;
}
.toc ol{counter-reset:toc;display:grid;gap:.7rem;}
.toc li{counter-increment:toc;}
.toc a{
  display:block;padding-left:3.4rem;position:relative;
  font-size:1.55rem;font-weight:500;line-height:1.6;color:#364153;
  text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:.4rem;transition:.2s;
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);position:absolute;left:0;
  font-size:1.4rem;font-weight:700;color:#1A3A5C;
}
.toc a:hover{color:var(--blue-txt);text-decoration-color:currentColor;}

/* 앵커 이동 시 sticky 헤더에 가리지 않도록 */
.post h2[id],.post h3[id],.post section[id],.post div[id]{scroll-margin-top:10rem;}

@media (max-width:990px){
  .tldr{padding:2.2rem;margin-top:2.4rem;}
  .tldr li{font-size:1.55rem;padding-left:2rem;}
  .post .tldr h2{font-size:1.75rem;}
  .toc{padding:2rem 2.2rem;}
  .toc a{font-size:1.5rem;}
  .post .toc h2{font-size:1.55rem;}
}

/* ------------------------------------------------------------
   개인정보 안내 모달
   폼의 "자세히" 링크를 눌러도 페이지를 떠나지 않도록,
   privacy 페이지 본문만 가져와 이 레이어에 띄운다.
   ------------------------------------------------------------ */
.pv-mask{
  position:fixed;inset:0;z-index:400;display:none;
  align-items:center;justify-content:center;padding:2.4rem;
  background:rgba(10,18,32,.55);
}
.pv-mask.is-open{display:flex;}
.pv-dialog{
  position:relative;display:flex;flex-direction:column;
  width:100%;max-width:62rem;max-height:84vh;
  background:#fff;border-radius:1.2rem;overflow:hidden;
  box-shadow:0 2.4rem 6rem rgba(10,20,40,.35);
}
.pv-dialog__hd{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:1.6rem;
  padding:2.2rem 2.6rem;border-bottom:.1rem solid rgba(26,58,92,.2);
}
.pv-dialog__hd h2{font-size:2rem;font-weight:800;letter-spacing:-.03em;color:var(--navy-800);}
.pv-close{
  flex:none;display:grid;place-items:center;width:3.4rem;height:3.4rem;
  border-radius:50%;color:var(--muted);transition:background .2s,color .2s;
}
.pv-close:hover{background:var(--line-2);color:var(--ink);}
.pv-close svg{width:1.8rem;height:1.8rem;}
.pv-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2.4rem 2.6rem 3rem;}
.pv-body .post__summary{
  padding:1.6rem 1.8rem;border-radius:.8rem;background:var(--bg-blue);
  font-size:1.4rem;line-height:1.75;color:var(--ink-2);
}
.pv-body h2{margin-top:2.6rem;font-size:1.65rem;font-weight:800;letter-spacing:-.03em;color:var(--navy-800);}
.pv-body p{margin-top:.8rem;font-size:1.4rem;line-height:1.75;color:var(--ink-2);}
.pv-body th,.pv-body td{padding:1.1rem 1.2rem;border-bottom:.1rem solid var(--line);font-size:1.4rem;text-align:left;}
.pv-body th{width:9rem;color:var(--muted);font-weight:700;}
.pv-body .office-tbl{margin-top:1.2rem;}
.pv-body a{text-decoration:underline;text-underline-offset:.3rem;}
body.pv-lock{overflow:hidden;}
@media (max-width:990px){
  .pv-mask{padding:1.6rem;align-items:flex-end;}
  .pv-dialog{max-height:88vh;border-radius:1.2rem 1.2rem 0 0;}
  .pv-dialog__hd{padding:1.8rem 2rem;}
  .pv-dialog__hd h2{font-size:1.8rem;}
  .pv-body{padding:2rem 2rem 2.6rem;}
}

/* ------------------------------------------------------------
   상세 페이지 전용 서체
   ------------------------------------------------------------ */
body.doc .post{font-family:'Noto Sans KR','Pretendard Variable',Pretendard,
  -apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;}